ngx-color 8.0.0 → 8.0.3

package/esm2020/sketch/sketch-fields.component.mjs

@@ -0,0 +1,209 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { isValidHex } from 'ngx-color';
+import { TinyColor } from '@ctrl/tinycolor';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-color";
+export class SketchFieldsComponent {
+    constructor() {
+        this.disableAlpha = false;
+        this.onChange = new EventEmitter();
+        this.input = {
+            width: '100%',
+            padding: '4px 10% 3px',
+            border: 'none',
+            boxSizing: 'border-box',
+            boxShadow: 'inset 0 0 0 1px #ccc',
+            fontSize: '11px',
+        };
+        this.label = {
+            display: 'block',
+            textAlign: 'center',
+            fontSize: '11px',
+            color: '#222',
+            paddingTop: '3px',
+            paddingBottom: '4px',
+            textTransform: 'capitalize',
+        };
+    }
+    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 || data.hex.length <= 6 ? 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 > 100) {
+                data.a = 100;
+            }
+            data.a /= 100;
+            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) {
+            this.onChange.emit({
+                data: {
+                    h: data.h || this.hsl.h,
+                    s: Number((data.s && data.s) || this.hsl.s),
+                    l: Number((data.l && data.l) || this.hsl.l),
+                    source: 'hsl',
+                },
+                $event,
+            });
+        }
+    }
+}
+SketchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SketchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SketchFieldsComponent, selector: "color-sketch-fields", inputs: { hsl: "hsl", rgb: "rgb", hex: "hex", disableAlpha: "disableAlpha" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+  <div class="sketch-fields">
+    <div class="sketch-double">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="hex"
+        [value]="hex.replace('#', '')"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-single">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="r"
+        [value]="rgb.r"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="255"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-single">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="g"
+        [value]="rgb.g"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="255"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-single">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="b"
+        [value]="rgb.b"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="255"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-alpha" *ngIf="disableAlpha === false">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="a"
+        [value]="round(rgb.a * 100)"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="100"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, isInline: true, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single,.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: "14.1.2", ngImport: i0, type: SketchFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-sketch-fields', template: `
+  <div class="sketch-fields">
+    <div class="sketch-double">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="hex"
+        [value]="hex.replace('#', '')"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-single">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="r"
+        [value]="rgb.r"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="255"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-single">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="g"
+        [value]="rgb.g"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="255"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-single">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="b"
+        [value]="rgb.b"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="255"
+      ></color-editable-input>
+    </div>
+    <div class="sketch-alpha" *ngIf="disableAlpha === false">
+      <color-editable-input
+        [style]="{ input: input, label: label }"
+        label="a"
+        [value]="round(rgb.a * 100)"
+        (onChange)="handleChange($event)"
+        [dragLabel]="true"
+        [dragMax]="100"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single,.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"] }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], hex: [{
+                type: Input
+            }], disableAlpha: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tldGNoLWZpZWxkcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3NrZXRjaC9za2V0Y2gtZmllbGRzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsVUFBVSxFQUFjLE1BQU0sV0FBVyxDQUFDO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7OztBQXdGNUMsTUFBTSxPQUFPLHFCQUFxQjtJQXRGbEM7UUEwRlcsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFDcEIsYUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDN0MsVUFBSyxHQUE0QjtZQUMvQixLQUFLLEVBQUUsTUFBTTtZQUNiLE9BQU8sRUFBRSxhQUFhO1lBQ3RCLE1BQU0sRUFBRSxNQUFNO1lBQ2QsU0FBUyxFQUFFLFlBQVk7WUFDdkIsU0FBUyxFQUFFLHNCQUFzQjtZQUNqQyxRQUFRLEVBQUUsTUFBTTtTQUNqQixDQUFDO1FBQ0YsVUFBSyxHQUE0QjtZQUMvQixPQUFPLEVBQUUsT0FBTztZQUNoQixTQUFTLEVBQUUsUUFBUTtZQUNuQixRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsTUFBTTtZQUNiLFVBQVUsRUFBRSxLQUFLO1lBQ2pCLGFBQWEsRUFBRSxLQUFLO1lBQ3BCLGFBQWEsRUFBRSxZQUFZO1NBQzVCLENBQUM7S0E2REg7SUEzREMsS0FBSyxDQUFDLEtBQUs7UUFDVCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUNELFlBQVksQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDM0IsSUFBSSxJQUFJLENBQUMsR0FBRyxFQUFFO1lB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O0lBQ0gsQ0FBQzs7a0hBbEZVLHFCQUFxQjtzR0FBckIscUJBQXFCLDRLQXBGdEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1EVDsyRkFpQ1UscUJBQXFCO2tCQXRGakMsU0FBUzsrQkFDRSxxQkFBcUIsWUFDckI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1EVCxtQkE4QmdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0ksUUFBUTtzQkFBakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IGlzVmFsaWRIZXgsIEhTTEEsIFJHQkEgfSBmcm9tICduZ3gtY29sb3InO1xuaW1wb3J0IHsgVGlueUNvbG9yIH0gZnJvbSAnQGN0cmwvdGlueWNvbG9yJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2tldGNoLWZpZWxkcycsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJza2V0Y2gtZmllbGRzXCI+XG4gICAgPGRpdiBjbGFzcz1cInNrZXRjaC1kb3VibGVcIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgbGFiZWw9XCJoZXhcIlxuICAgICAgICBbdmFsdWVdPVwiaGV4LnJlcGxhY2UoJyMnLCAnJylcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNrZXRjaC1zaW5nbGVcIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgbGFiZWw9XCJyXCJcbiAgICAgICAgW3ZhbHVlXT1cInJnYi5yXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgW2RyYWdMYWJlbF09XCJ0cnVlXCJcbiAgICAgICAgW2RyYWdNYXhdPVwiMjU1XCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJza2V0Y2gtc2luZ2xlXCI+XG4gICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgICAgW3N0eWxlXT1cInsgaW5wdXQ6IGlucHV0LCBsYWJlbDogbGFiZWwgfVwiXG4gICAgICAgIGxhYmVsPVwiZ1wiXG4gICAgICAgIFt2YWx1ZV09XCJyZ2IuZ1wiXG4gICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgIFtkcmFnTGFiZWxdPVwidHJ1ZVwiXG4gICAgICAgIFtkcmFnTWF4XT1cIjI1NVwiXG4gICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2tldGNoLXNpbmdsZVwiPlxuICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBpbnB1dCwgbGFiZWw6IGxhYmVsIH1cIlxuICAgICAgICBsYWJlbD1cImJcIlxuICAgICAgICBbdmFsdWVdPVwicmdiLmJcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICBbZHJhZ0xhYmVsXT1cInRydWVcIlxuICAgICAgICBbZHJhZ01heF09XCIyNTVcIlxuICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNrZXRjaC1hbHBoYVwiICpuZ0lmPVwiZGlzYWJsZUFscGhhID09PSBmYWxzZVwiPlxuICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBpbnB1dCwgbGFiZWw6IGxhYmVsIH1cIlxuICAgICAgICBsYWJlbD1cImFcIlxuICAgICAgICBbdmFsdWVdPVwicm91bmQocmdiLmEgKiAxMDApXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgW2RyYWdMYWJlbF09XCJ0cnVlXCJcbiAgICAgICAgW2RyYWdNYXhdPVwiMTAwXCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5za2V0Y2gtZmllbGRzIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBwYWRkaW5nLXRvcDogNHB4O1xuICAgIH1cbiAgICAuc2tldGNoLWRvdWJsZSB7XG4gICAgICAtd2Via2l0LWJveC1mbGV4OiAyO1xuICAgICAgZmxleDogMiAxIDAlO1xuICAgIH1cbiAgICAuc2tldGNoLXNpbmdsZSB7XG4gICAgICBmbGV4OiAxIDEgMCU7XG4gICAgICBwYWRkaW5nLWxlZnQ6IDZweDtcbiAgICB9XG4gICAgLnNrZXRjaC1hbHBoYSB7XG4gICAgICAtd2Via2l0LWJveC1mbGV4OiAxO1xuICAgICAgZmxleDogMSAxIDAlO1xuICAgICAgcGFkZGluZy1sZWZ0OiA2cHg7XG4gICAgfVxuICAgIDpob3N0LWNvbnRleHQoW2Rpcj1ydGxdKSAuc2tldGNoLXNpbmdsZSB7XG4gICAgICBwYWRkaW5nLXJpZ2h0OiA2cHg7XG4gICAgICBwYWRkaW5nLWxlZnQ6IDA7XG4gICAgfVxuICAgIDpob3N0LWNvbnRleHQoW2Rpcj1ydGxdKSAuc2tldGNoLWFscGhhIHtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDZweDtcbiAgICAgIHBhZGRpbmctbGVmdDogMDtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgU2tldGNoRmllbGRzQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaHNsITogSFNMQTtcbiAgQElucHV0KCkgcmdiITogUkdCQTtcbiAgQElucHV0KCkgaGV4ITogc3RyaW5nO1xuICBASW5wdXQoKSBkaXNhYmxlQWxwaGEgPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIGlucHV0OiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIHBhZGRpbmc6ICc0cHggMTAlIDNweCcsXG4gICAgYm9yZGVyOiAnbm9uZScsXG4gICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gICAgYm94U2hhZG93OiAnaW5zZXQgMCAwIDAgMXB4ICNjY2MnLFxuICAgIGZvbnRTaXplOiAnMTFweCcsXG4gIH07XG4gIGxhYmVsOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICBkaXNwbGF5OiAnYmxvY2snLFxuICAgIHRleHRBbGlnbjogJ2NlbnRlcicsXG4gICAgZm9udFNpemU6ICcxMXB4JyxcbiAgICBjb2xvcjogJyMyMjInLFxuICAgIHBhZGRpbmdUb3A6ICczcHgnLFxuICAgIHBhZGRpbmdCb3R0b206ICc0cHgnLFxuICAgIHRleHRUcmFuc2Zvcm06ICdjYXBpdGFsaXplJyxcbiAgfTtcblxuICByb3VuZCh2YWx1ZSkge1xuICAgIHJldHVybiBNYXRoLnJvdW5kKHZhbHVlKTtcbiAgfVxuICBoYW5kbGVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIGlmIChkYXRhLmhleCkge1xuICAgICAgaWYgKGlzVmFsaWRIZXgoZGF0YS5oZXgpKSB7XG4gICAgICAgIGNvbnN0IGNvbG9yID0gbmV3IFRpbnlDb2xvcihkYXRhLmhleCk7XG4gICAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgICAgZGF0YToge1xuICAgICAgICAgICAgaGV4OiB0aGlzLmRpc2FibGVBbHBoYSB8fCBkYXRhLmhleC5sZW5ndGggPD0gNiA/IGNvbG9yLnRvSGV4KCkgOiBjb2xvci50b0hleDgoKSxcbiAgICAgICAgICAgIHNvdXJjZTogJ2hleCcsXG4gICAgICAgICAgfSxcbiAgICAgICAgICAkZXZlbnQsXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH0gZWxzZSBpZiAoZGF0YS5yIHx8IGRhdGEuZyB8fCBkYXRhLmIpIHtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9IGVsc2UgaWYgKGRhdGEuYSkge1xuICAgICAgaWYgKGRhdGEuYSA8IDApIHtcbiAgICAgICAgZGF0YS5hID0gMDtcbiAgICAgIH0gZWxzZSBpZiAoZGF0YS5hID4gMTAwKSB7XG4gICAgICAgIGRhdGEuYSA9IDEwMDtcbiAgICAgIH1cbiAgICAgIGRhdGEuYSAvPSAxMDA7XG5cbiAgICAgIGlmICh0aGlzLmRpc2FibGVBbHBoYSkge1xuICAgICAgICBkYXRhLmEgPSAxO1xuICAgICAgfVxuXG4gICAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoe1xuICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgaDogdGhpcy5oc2wuaCxcbiAgICAgICAgICBzOiB0aGlzLmhzbC5zLFxuICAgICAgICAgIGw6IHRoaXMuaHNsLmwsXG4gICAgICAgICAgYTogTWF0aC5yb3VuZChkYXRhLmEgKiAxMDApIC8gMTAwLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH0sXG4gICAgICAgICRldmVudCxcbiAgICAgIH0pO1xuICAgIH0gZWxzZSBpZiAoZGF0YS5oIHx8IGRhdGEucyB8fCBkYXRhLmwpIHtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICBoOiBkYXRhLmggfHwgdGhpcy5oc2wuaCxcbiAgICAgICAgICBzOiBOdW1iZXIoKGRhdGEucyAmJiBkYXRhLnMpIHx8IHRoaXMuaHNsLnMpLFxuICAgICAgICAgIGw6IE51bWJlcigoZGF0YS5sICYmIGRhdGEubCkgfHwgdGhpcy5oc2wubCksXG4gICAgICAgICAgc291cmNlOiAnaHNsJyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgfSk7XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2020/sketch/sketch-preset-colors.component.mjs

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-color";
+export class SketchPresetColorsComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.swatchStyle = {
+            borderRadius: '3px',
+            boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',
+        };
+    }
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+    normalizeValue(val) {
+        if (typeof val === 'string') {
+            return { color: val };
+        }
+        return val;
+    }
+    focusStyle(val) {
+        const c = this.normalizeValue(val);
+        return {
+            boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,
+        };
+    }
+}
+SketchPresetColorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchPresetColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SketchPresetColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SketchPresetColorsComponent, selector: "color-sketch-preset-colors", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+  <div class="sketch-swatches">
+    <div class="sketch-wrap" *ngFor="let c of colors">
+      <color-swatch
+        [color]="normalizeValue(c).color"
+        [style]="swatchStyle"
+        [focusStyle]="focusStyle(c)"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+        class="swatch"
+      ></color-swatch>
+    </div>
+  </div>
+  `, isInline: true, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchPresetColorsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-sketch-preset-colors', template: `
+  <div class="sketch-swatches">
+    <div class="sketch-wrap" *ngFor="let c of colors">
+      <color-swatch
+        [color]="normalizeValue(c).color"
+        [style]="swatchStyle"
+        [focusStyle]="focusStyle(c)"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+        class="swatch"
+      ></color-swatch>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"] }]
+        }], propDecorators: { colors: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tldGNoLXByZXNldC1jb2xvcnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9za2V0Y2gvc2tldGNoLXByZXNldC1jb2xvcnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOzs7O0FBZ0R2QixNQUFNLE9BQU8sMkJBQTJCO0lBNUN4QztRQThDWSxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsQyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEQsZ0JBQVcsR0FBRztZQUNaLFlBQVksRUFBRSxLQUFLO1lBQ25CLFNBQVMsRUFBRSxpQ0FBaUM7U0FDN0MsQ0FBQztLQWlCSDtJQWZDLFdBQVcsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUU7UUFDekIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBQ0QsY0FBYyxDQUFDLEdBQW1CO1FBQ2hDLElBQUksT0FBTyxHQUFHLEtBQUssUUFBUSxFQUFFO1lBQzNCLE9BQU8sRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLENBQUM7U0FDdkI7UUFDRCxPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7SUFDRCxVQUFVLENBQUMsR0FBbUI7UUFDNUIsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUNuQyxPQUFPO1lBQ0wsU0FBUyxFQUFFLDRDQUE0QyxDQUFDLENBQUMsS0FBSyxFQUFFO1NBQ2pFLENBQUM7SUFDSixDQUFDOzt3SEF2QlUsMkJBQTJCOzRHQUEzQiwyQkFBMkIsaUtBMUM1Qjs7Ozs7Ozs7Ozs7OztHQWFUOzJGQTZCVSwyQkFBMkI7a0JBNUN2QyxTQUFTOytCQUNFLDRCQUE0QixZQUM1Qjs7Ozs7Ozs7Ozs7OztHQWFULG1CQTBCZ0IsdUJBQXVCLENBQUMsTUFBTSx1QkFDMUIsS0FBSzs4QkFHakIsTUFBTTtzQkFBZCxLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNoYXBlIH0gZnJvbSAnbmd4LWNvbG9yJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2tldGNoLXByZXNldC1jb2xvcnMnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwic2tldGNoLXN3YXRjaGVzXCI+XG4gICAgPGRpdiBjbGFzcz1cInNrZXRjaC13cmFwXCIgKm5nRm9yPVwibGV0IGMgb2YgY29sb3JzXCI+XG4gICAgICA8Y29sb3Itc3dhdGNoXG4gICAgICAgIFtjb2xvcl09XCJub3JtYWxpemVWYWx1ZShjKS5jb2xvclwiXG4gICAgICAgIFtzdHlsZV09XCJzd2F0Y2hTdHlsZVwiXG4gICAgICAgIFtmb2N1c1N0eWxlXT1cImZvY3VzU3R5bGUoYylcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgICAgKG9uSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgICBjbGFzcz1cInN3YXRjaFwiXG4gICAgICA+PC9jb2xvci1zd2F0Y2g+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnNrZXRjaC1zd2F0Y2hlcyB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC13cmFwOiB3cmFwO1xuICAgICAgbWFyZ2luOiAwcHggLTEwcHg7XG4gICAgICBwYWRkaW5nOiAxMHB4IDBweCAwcHggMTBweDtcbiAgICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCByZ2IoMjM4LCAyMzgsIDIzOCk7XG4gICAgfVxuICAgIC5za2V0Y2gtd3JhcCB7XG4gICAgICB3aWR0aDogMTZweDtcbiAgICAgIGhlaWdodDogMTZweDtcbiAgICAgIG1hcmdpbjogMHB4IDEwcHggMTBweCAwcHg7XG4gICAgfVxuICAgIDpob3N0LWNvbnRleHQoW2Rpcj1ydGxdKSAuc2tldGNoLXN3YXRjaGVzIHtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gICAgICBwYWRkaW5nLWxlZnQ6IDA7XG4gICAgfVxuICAgIDpob3N0LWNvbnRleHQoW2Rpcj1ydGxdKSAuc2tldGNoLXdyYXAge1xuICAgICAgbWFyZ2luLWxlZnQ6IDEwcHg7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFNrZXRjaFByZXNldENvbG9yc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNvbG9ycyE6IHN0cmluZ1tdO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgb25Td2F0Y2hIb3ZlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBzd2F0Y2hTdHlsZSA9IHtcbiAgICBib3JkZXJSYWRpdXM6ICczcHgnLFxuICAgIGJveFNoYWRvdzogJ2luc2V0IDAgMCAwIDFweCByZ2JhKDAsMCwwLC4xNSknLFxuICB9O1xuXG4gIGhhbmRsZUNsaWNrKHsgaGV4LCAkZXZlbnQgfSkge1xuICAgIHRoaXMub25DbGljay5lbWl0KHsgaGV4LCAkZXZlbnQgfSk7XG4gIH1cbiAgbm9ybWFsaXplVmFsdWUodmFsOiBzdHJpbmcgfCBTaGFwZSkge1xuICAgIGlmICh0eXBlb2YgdmFsID09PSAnc3RyaW5nJykge1xuICAgICAgcmV0dXJuIHsgY29sb3I6IHZhbCB9O1xuICAgIH1cbiAgICByZXR1cm4gdmFsO1xuICB9XG4gIGZvY3VzU3R5bGUodmFsOiBzdHJpbmcgfCBTaGFwZSkge1xuICAgIGNvbnN0IGMgPSB0aGlzLm5vcm1hbGl6ZVZhbHVlKHZhbCk7XG4gICAgcmV0dXJuIHtcbiAgICAgIGJveFNoYWRvdzogYGluc2V0IDAgMCAwIDFweCByZ2JhKDAsMCwwLC4xNSksIDAgMCA0cHggJHtjLmNvbG9yfWAsXG4gICAgfTtcbiAgfVxufVxuIl19

package/esm2020/sketch/sketch.component.mjs

@@ -0,0 +1,212 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { AlphaModule, CheckboardModule, ColorWrap, EditableInputModule, HueModule, isValidHex, SaturationModule, SwatchModule, } from 'ngx-color';
+import { SketchFieldsComponent } from './sketch-fields.component';
+import { SketchPresetColorsComponent } from './sketch-preset-colors.component';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-color";
+export class SketchComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Remove alpha slider and options from picker */
+        this.disableAlpha = false;
+        /** Hex strings for default colors at bottom of picker */
+        this.presetColors = [
+            '#D0021B',
+            '#F5A623',
+            '#F8E71C',
+            '#8B572A',
+            '#7ED321',
+            '#417505',
+            '#BD10E0',
+            '#9013FE',
+            '#4A90E2',
+            '#50E3C2',
+            '#B8E986',
+            '#000000',
+            '#4A4A4A',
+            '#9B9B9B',
+            '#FFFFFF',
+        ];
+        /** Width of picker */
+        this.width = 200;
+    }
+    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);
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            // this.hex = hex;
+            this.handleChange({
+                hex,
+                source: 'hex',
+            }, $event);
+        }
+    }
+}
+SketchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SketchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SketchComponent, selector: "color-sketch", inputs: { disableAlpha: "disableAlpha", presetColors: "presetColors", width: "width" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SketchComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => SketchComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="sketch-picker {{ className }}" [style.width.px]="width">
+    <div class="sketch-saturation">
+      <color-saturation [hsl]="hsl" [hsv]="hsv"
+        (onChange)="handleValueChange($event)"
+      >
+      </color-saturation>
+    </div>
+    <div class="sketch-controls">
+      <div class="sketch-sliders">
+        <div class="sketch-hue">
+          <color-hue [hsl]="hsl"
+            (onChange)="handleValueChange($event)"
+          ></color-hue>
+        </div>
+        <div class="sketch-alpha" *ngIf="disableAlpha === false">
+          <color-alpha
+            [radius]="2" [rgb]="rgb" [hsl]="hsl"
+            (onChange)="handleValueChange($event)"
+          ></color-alpha>
+        </div>
+      </div>
+      <div class="sketch-color">
+        <color-checkboard></color-checkboard>
+        <div class="sketch-active" [style.background]="activeBackground"></div>
+      </div>
+    </div>
+    <div class="sketch-fields-container">
+      <color-sketch-fields
+        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
+        [disableAlpha]="disableAlpha"
+        (onChange)="handleValueChange($event)"
+      ></color-sketch-fields>
+    </div>
+    <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
+      <color-sketch-preset-colors
+        [colors]="presetColors"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-sketch-preset-colors>
+    </div>
+  </div>
+  `, isInline: true, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return SketchFieldsComponent; }), selector: "color-sketch-fields", inputs: ["hsl", "rgb", "hex", "disableAlpha"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return SketchPresetColorsComponent; }), selector: "color-sketch-preset-colors", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-sketch', template: `
+  <div class="sketch-picker {{ className }}" [style.width.px]="width">
+    <div class="sketch-saturation">
+      <color-saturation [hsl]="hsl" [hsv]="hsv"
+        (onChange)="handleValueChange($event)"
+      >
+      </color-saturation>
+    </div>
+    <div class="sketch-controls">
+      <div class="sketch-sliders">
+        <div class="sketch-hue">
+          <color-hue [hsl]="hsl"
+            (onChange)="handleValueChange($event)"
+          ></color-hue>
+        </div>
+        <div class="sketch-alpha" *ngIf="disableAlpha === false">
+          <color-alpha
+            [radius]="2" [rgb]="rgb" [hsl]="hsl"
+            (onChange)="handleValueChange($event)"
+          ></color-alpha>
+        </div>
+      </div>
+      <div class="sketch-color">
+        <color-checkboard></color-checkboard>
+        <div class="sketch-active" [style.background]="activeBackground"></div>
+      </div>
+    </div>
+    <div class="sketch-fields-container">
+      <color-sketch-fields
+        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
+        [disableAlpha]="disableAlpha"
+        (onChange)="handleValueChange($event)"
+      ></color-sketch-fields>
+    </div>
+    <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
+      <color-sketch-preset-colors
+        [colors]="presetColors"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-sketch-preset-colors>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SketchComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => SketchComponent),
+                        },
+                    ], styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
+                type: Input
+            }], presetColors: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }] } });
+export class ColorSketchModule {
+}
+ColorSketchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorSketchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, declarations: [SketchComponent, SketchFieldsComponent,
+        SketchPresetColorsComponent], imports: [CommonModule,
+        AlphaModule,
+        CheckboardModule,
+        EditableInputModule,
+        HueModule,
+        SaturationModule,
+        SwatchModule], exports: [SketchComponent, SketchFieldsComponent,
+        SketchPresetColorsComponent] });
+ColorSketchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, imports: [CommonModule,
+        AlphaModule,
+        CheckboardModule,
+        EditableInputModule,
+        HueModule,
+        SaturationModule,
+        SwatchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SketchComponent,
+                        SketchFieldsComponent,
+                        SketchPresetColorsComponent,
+                    ],
+                    exports: [
+                        SketchComponent,
+                        SketchFieldsComponent,
+                        SketchPresetColorsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        AlphaModule,
+                        CheckboardModule,
+                        EditableInputModule,
+                        HueModule,
+                        SaturationModule,
+                        SwatchModule,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tldGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2tldGNoL3NrZXRjaC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUNMLFdBQVcsRUFDWCxnQkFBZ0IsRUFDaEIsU0FBUyxFQUNULG1CQUFtQixFQUNuQixTQUFTLEVBQ1QsVUFBVSxFQUNWLGdCQUFnQixFQUNoQixZQUFZLEdBQ2IsTUFBTSxXQUFXLENBQUM7QUFDbkIsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUE0SG5ELE1BQU0sT0FBTyxlQUFnQixTQUFRLFNBQVM7SUF3QjVDO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUF4QlYsa0RBQWtEO1FBQ3pDLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBQzlCLHlEQUF5RDtRQUNoRCxpQkFBWSxHQUFHO1lBQ3RCLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztTQUNWLENBQUM7UUFDRixzQkFBc0I7UUFDYixVQUFLLEdBQUcsR0FBRyxDQUFDO0lBSXJCLENBQUM7SUFDRCxnQkFBZ0I7UUFDZCxNQUFNLEtBQUssR0FBRyxJQUFJLENB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ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtcbiAgQWxwaGFNb2R1bGUsXG4gIENoZWNrYm9hcmRNb2R1bGUsXG4gIENvbG9yV3JhcCxcbiAgRWRpdGFibGVJbnB1dE1vZHVsZSxcbiAgSHVlTW9kdWxlLFxuICBpc1ZhbGlkSGV4LFxuICBTYXR1cmF0aW9uTW9kdWxlLFxuICBTd2F0Y2hNb2R1bGUsXG59IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBTa2V0Y2hGaWVsZHNDb21wb25lbnQgfSBmcm9tICcuL3NrZXRjaC1maWVsZHMuY29tcG9uZW50JztcbmltcG9ydCB7IFNrZXRjaFByZXNldENvbG9yc0NvbXBvbmVudCB9IGZyb20gJy4vc2tldGNoLXByZXNldC1jb2xvcnMuY29tcG9uZW50JztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1za2V0Y2gnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwic2tldGNoLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIiBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2tldGNoLXNhdHVyYXRpb25cIj5cbiAgICAgIDxjb2xvci1zYXR1cmF0aW9uIFtoc2xdPVwiaHNsXCIgW2hzdl09XCJoc3ZcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICA+XG4gICAgICA8L2NvbG9yLXNhdHVyYXRpb24+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNrZXRjaC1jb250cm9sc1wiPlxuICAgICAgPGRpdiBjbGFzcz1cInNrZXRjaC1zbGlkZXJzXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJza2V0Y2gtaHVlXCI+XG4gICAgICAgICAgPGNvbG9yLWh1ZSBbaHNsXT1cImhzbFwiXG4gICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvY29sb3ItaHVlPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNrZXRjaC1hbHBoYVwiICpuZ0lmPVwiZGlzYWJsZUFscGhhID09PSBmYWxzZVwiPlxuICAgICAgICAgIDxjb2xvci1hbHBoYVxuICAgICAgICAgICAgW3JhZGl1c109XCIyXCIgW3JnYl09XCJyZ2JcIiBbaHNsXT1cImhzbFwiXG4gICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvY29sb3ItYWxwaGE+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwic2tldGNoLWNvbG9yXCI+XG4gICAgICAgIDxjb2xvci1jaGVja2JvYXJkPjwvY29sb3ItY2hlY2tib2FyZD5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNrZXRjaC1hY3RpdmVcIiBbc3R5bGUuYmFja2dyb3VuZF09XCJhY3RpdmVCYWNrZ3JvdW5kXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2tldGNoLWZpZWxkcy1jb250YWluZXJcIj5cbiAgICAgIDxjb2xvci1za2V0Y2gtZmllbGRzXG4gICAgICAgIFtyZ2JdPVwicmdiXCIgW2hzbF09XCJoc2xcIiBbaGV4XT1cImhleFwiXG4gICAgICAgIFtkaXNhYmxlQWxwaGFdPVwiZGlzYWJsZUFscGhhXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgPjwvY29sb3Itc2tldGNoLWZpZWxkcz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2tldGNoLXN3YXRjaGVzLWNvbnRhaW5lclwiICpuZ0lmPVwicHJlc2V0Q29sb3JzICYmIHByZXNldENvbG9ycy5sZW5ndGhcIj5cbiAgICAgIDxjb2xvci1za2V0Y2gtcHJlc2V0LWNvbG9yc1xuICAgICAgICBbY29sb3JzXT1cInByZXNldENvbG9yc1wiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUJsb2NrQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAob25Td2F0Y2hIb3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1za2V0Y2gtcHJlc2V0LWNvbG9ycz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2tldGNoLXBpY2tlciB7XG4gICAgICBwYWRkaW5nOiAxMHB4IDEwcHggM3B4O1xuICAgICAgYm94LXNpemluZzogaW5pdGlhbDtcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggcmdiYSgwLDAsMCwuMTUpLCAwIDhweCAxNnB4IHJnYmEoMCwwLDAsLjE1KTtcbiAgICB9XG4gICAgLnNrZXRjaC1zYXR1cmF0aW9uIHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgcGFkZGluZy1ib3R0b206IDc1JTtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgfVxuICAgIC5za2V0Y2gtZmllbGRzLWNvbnRhaW5lciB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICB9XG4gICAgLnNrZXRjaC1zd2F0Y2hlcy1jb250YWluZXIge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICAgIC5za2V0Y2gtY29udHJvbHMge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gICAgLnNrZXRjaC1zbGlkZXJzIHtcbiAgICAgIHBhZGRpbmc6IDRweCAwcHg7XG4gICAgICAtd2Via2l0LWJveC1mbGV4OiAxO1xuICAgICAgZmxleDogMSAxIDAlO1xuICAgIH1cbiAgICAuc2tldGNoLWh1ZSB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBoZWlnaHQ6IDEwcHg7XG4gICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIH1cbiAgICAuc2tldGNoLWFscGhhIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTBweDtcbiAgICAgIG1hcmdpbi10b3A6IDRweDtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgfVxuICAgIC5za2V0Y2gtY29sb3Ige1xuICAgICAgd2lkdGg6IDI0cHg7XG4gICAgICBoZWlnaHQ6IDI0cHg7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBtYXJnaW4tdG9wOiA0cHg7XG4gICAgICBtYXJnaW4tbGVmdDogNHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogM3B4O1xuICAgIH1cbiAgICAuc2tldGNoLWFjdGl2ZSB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IDBweDtcbiAgICAgIHJpZ2h0OiAwcHg7XG4gICAgICBib3R0b206IDBweDtcbiAgICAgIGxlZnQ6IDBweDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgIGJveC1zaGFkb3c6IHJnYmEoMCwgMCwgMCwgMC4xNSkgMHB4IDBweCAwcHggMXB4IGluc2V0LCByZ2JhKDAsIDAsIDAsIDAuMjUpIDBweCAwcHggNHB4IGluc2V0O1xuICAgIH1cbiAgICA6aG9zdC1jb250ZXh0KFtkaXI9cnRsXSkgLnNrZXRjaC1jb2xvciB7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDRweDtcbiAgICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFNrZXRjaENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFNrZXRjaENvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTa2V0Y2hDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUmVtb3ZlIGFscGhhIHNsaWRlciBhbmQgb3B0aW9ucyBmcm9tIHBpY2tlciAqL1xuICBASW5wdXQoKSBkaXNhYmxlQWxwaGEgPSBmYWxzZTtcbiAgLyoqIEhleCBzdHJpbmdzIGZvciBkZWZhdWx0IGNvbG9ycyBhdCBib3R0b20gb2YgcGlja2VyICovXG4gIEBJbnB1dCgpIHByZXNldENvbG9ycyA9IFtcbiAgICAnI0QwMDIxQicsXG4gICAgJyNGNUE2MjMnLFxuICAgICcjRjhFNzFDJyxcbiAgICAnIzhCNTcyQScsXG4gICAgJyM3RUQzMjEnLFxuICAgICcjNDE3NTA1JyxcbiAgICAnI0JEMTBFMCcsXG4gICAgJyM5MDEzRkUnLFxuICAgICcjNEE5MEUyJyxcbiAgICAnIzUwRTNDMicsXG4gICAgJyNCOEU5ODYnLFxuICAgICcjMDAwMDAwJyxcbiAgICAnIzRBNEE0QScsXG4gICAgJyM5QjlCOUInLFxuICAgICcjRkZGRkZGJyxcbiAgXTtcbiAgLyoqIFdpZHRoIG9mIHBpY2tlciAqL1xuICBASW5wdXQoKSB3aWR0aCA9IDIwMDtcbiAgYWN0aXZlQmFja2dyb3VuZCE6IHN0cmluZztcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuICBhZnRlclZhbGlkQ2hhbmdlKCkge1xuICAgIGNvbnN0IGFscGhhID0gdGhpcy5kaXNhYmxlQWxwaGEgPyAxIDogdGhpcy5yZ2IuYTtcbiAgICB0aGlzLmFjdGl2ZUJhY2tncm91bmQgPSBgcmdiYSgke3RoaXMucmdiLnJ9LCAke3RoaXMucmdiLmd9LCAke3RoaXMucmdiLmJ9LCAke2FscGhhfSlgO1xuICB9XG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG4gIGhhbmRsZUJsb2NrQ2hhbmdlKHsgaGV4LCAkZXZlbnQgfSkge1xuICAgIGlmIChpc1ZhbGlkSGV4KGhleCkpIHtcbiAgICAgIC8vIHRoaXMuaGV4ID0gaGV4O1xuICAgICAgdGhpcy5oYW5kbGVDaGFuZ2UoXG4gICAgICAgIHtcbiAgICAgICAgICBoZXgsXG4gICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgKTtcbiAgICB9XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgU2tldGNoQ29tcG9uZW50LFxuICAgIFNrZXRjaEZpZWxkc0NvbXBvbmVudCxcbiAgICBTa2V0Y2hQcmVzZXRDb2xvcnNDb21wb25lbnQsXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBTa2V0Y2hDb21wb25lbnQsXG4gICAgU2tldGNoRmllbGRzQ29tcG9uZW50LFxuICAgIFNrZXRjaFByZXNldENvbG9yc0NvbXBvbmVudCxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBBbHBoYU1vZHVsZSxcbiAgICBDaGVja2JvYXJkTW9kdWxlLFxuICAgIEVkaXRhYmxlSW5wdXRNb2R1bGUsXG4gICAgSHVlTW9kdWxlLFxuICAgIFNhdHVyYXRpb25Nb2R1bGUsXG4gICAgU3dhdGNoTW9kdWxlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclNrZXRjaE1vZHVsZSB7fVxuIl19

package/esm2020/slider/ngx-color-slider.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLXNsaWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2xpZGVyL25neC1jb2xvci1zbGlkZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/esm2020/slider/public_api.mjs

@@ -0,0 +1,4 @@
+export { SliderSwatchComponent } from './slider-swatch.component';
+export { SliderSwatchesComponent } from './slider-swatches.component';
+export { ColorSliderModule, SliderComponent } from './slider.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2xpZGVyL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgU2xpZGVyU3dhdGNoQ29tcG9uZW50IH0gZnJvbSAnLi9zbGlkZXItc3dhdGNoLmNvbXBvbmVudCc7XG5leHBvcnQgeyBTbGlkZXJTd2F0Y2hlc0NvbXBvbmVudCB9IGZyb20gJy4vc2xpZGVyLXN3YXRjaGVzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBDb2xvclNsaWRlck1vZHVsZSwgU2xpZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9zbGlkZXIuY29tcG9uZW50JztcbiJdfQ==

package/esm2020/slider/slider-swatch.component.mjs

@@ -0,0 +1,52 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SliderSwatchComponent {
+    constructor() {
+        this.first = false;
+        this.last = false;
+        this.onClick = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;
+    }
+    handleClick($event) {
+        this.onClick.emit({
+            data: {
+                h: this.hsl.h,
+                s: 0.5,
+                l: this.offset,
+                source: 'hsl',
+            },
+            $event,
+        });
+    }
+}
+SliderSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: { hsl: "hsl", active: "active", offset: "offset", first: "first", last: "last" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="slider-swatch" [style.background]="background"
+    [class.first]="first" [class.last]="last" [class.active]="active"
+    (click)="handleClick($event)"
+  ></div>
+  `, isInline: true, styles: [".slider-swatch{height:12px;background:rgb(121,211,166);cursor:pointer}.slider-swatch.active{transform:scaleY(1.8);border-radius:3.6px/2px}.slider-swatch.first{border-radius:2px 0 0 2px}.slider-swatch.last{border-radius:0 2px 2px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderSwatchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-slider-swatch', template: `
+  <div class="slider-swatch" [style.background]="background"
+    [class.first]="first" [class.last]="last" [class.active]="active"
+    (click)="handleClick($event)"
+  ></div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".slider-swatch{height:12px;background:rgb(121,211,166);cursor:pointer}.slider-swatch.active{transform:scaleY(1.8);border-radius:3.6px/2px}.slider-swatch.first{border-radius:2px 0 0 2px}.slider-swatch.last{border-radius:0 2px 2px 0}\n"] }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLXN3YXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3NsaWRlci9zbGlkZXItc3dhdGNoLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7QUFzQ3ZCLE1BQU0sT0FBTyxxQkFBcUI7SUFsQ2xDO1FBc0NXLFVBQUssR0FBRyxLQUFLLENBQUM7UUFDZCxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ1osWUFBTyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7S0FpQjdDO0lBZEMsV0FBVztRQUNULElBQUksQ0FBQyxVQUFVLEdBQUcsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsVUFBVSxJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDO0lBQ3JFLENBQUM7SUFDRCxXQUFXLENBQUMsTUFBTTtRQUNoQixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztZQUNoQixJQUFJLEVBQUU7Z0JBQ0osQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDYixDQUFDLEVBQUUsR0FBRztnQkFDTixDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU07Z0JBQ2QsTUFBTSxFQUFFLEtBQUs7YUFDZDtZQUNELE1BQU07U0FDUCxDQUFDLENBQUM7SUFDTCxDQUFDOztrSEF0QlUscUJBQXFCO3NHQUFyQixxQkFBcUIsMk1BaEN0Qjs7Ozs7R0FLVDsyRkEyQlUscUJBQXFCO2tCQWxDakMsU0FBUzsrQkFDRSxxQkFBcUIsWUFDckI7Ozs7O0dBS1QsbUJBd0JnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLOzhCQUdqQixHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEhTTCB9IGZyb20gJ25neC1jb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXNsaWRlci1zd2F0Y2gnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaFwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIlxuICAgIFtjbGFzcy5maXJzdF09XCJmaXJzdFwiIFtjbGFzcy5sYXN0XT1cImxhc3RcIiBbY2xhc3MuYWN0aXZlXT1cImFjdGl2ZVwiXG4gICAgKGNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIlxuICA+PC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2xpZGVyLXN3YXRjaCB7XG4gICAgICBoZWlnaHQ6IDEycHg7XG4gICAgICBiYWNrZ3JvdW5kOiByZ2IoMTIxLCAyMTEsIDE2Nik7XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgfVxuICAgIC5zbGlkZXItc3dhdGNoLmFjdGl2ZSB7XG4gICAgICB0cmFuc2Zvcm06IHNjYWxlWSgxLjgpO1xuICAgICAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDMuNnB4IDJweDtcbiAgICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMuNnB4IDJweDtcbiAgICAgIGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiAzLjZweCAycHg7XG4gICAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAzLjZweCAycHg7XG4gICAgfVxuICAgIC5zbGlkZXItc3dhdGNoLmZpcnN0IHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDJweCAwcHggMHB4IDJweDtcbiAgICB9XG4gICAgLnNsaWRlci1zd2F0Y2gubGFzdCB7XG4gICAgICBib3JkZXItcmFkaXVzOiAwcHggMnB4IDJweCAwcHg7XG4gICAgfVxuXG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgU2xpZGVyU3dhdGNoQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgaHNsITogSFNMO1xuICBASW5wdXQoKSBhY3RpdmUhOiBib29sZWFuO1xuICBASW5wdXQoKSBvZmZzZXQhOiBudW1iZXI7XG4gIEBJbnB1dCgpIGZpcnN0ID0gZmFsc2U7XG4gIEBJbnB1dCgpIGxhc3QgPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgYmFja2dyb3VuZCE6IHN0cmluZztcblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLmJhY2tncm91bmQgPSBgaHNsKCR7dGhpcy5oc2wuaH0sIDUwJSwgJHt0aGlzLm9mZnNldCAqIDEwMH0lKWA7XG4gIH1cbiAgaGFuZGxlQ2xpY2soJGV2ZW50KSB7XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoe1xuICAgICAgZGF0YToge1xuICAgICAgICBoOiB0aGlzLmhzbC5oLFxuICAgICAgICBzOiAwLjUsXG4gICAgICAgIGw6IHRoaXMub2Zmc2V0LFxuICAgICAgICBzb3VyY2U6ICdoc2wnLFxuICAgICAgfSxcbiAgICAgICRldmVudCxcbiAgICB9KTtcbiAgfVxufVxuIl19