ngx-color 7.0.1 → 7.3.0

package/esm2020/saturation.component.mjs

@@ -0,0 +1,136 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
+import { CoordinatesModule } from './coordinates.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./coordinates.directive";
+import * as i2 from "@angular/common";
+export class SaturationComponent {
+    constructor() {
+        this.onChange = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.background = `hsl(${this.hsl.h}, 100%, 50%)`;
+        this.pointerTop = -(this.hsv.v * 100) + 1 + 100 + '%';
+        this.pointerLeft = this.hsv.s * 100 + '%';
+    }
+    handleChange({ top, left, containerHeight, containerWidth, $event }) {
+        if (left < 0) {
+            left = 0;
+        }
+        else if (left > containerWidth) {
+            left = containerWidth;
+        }
+        else if (top < 0) {
+            top = 0;
+        }
+        else if (top > containerHeight) {
+            top = containerHeight;
+        }
+        const saturation = left / containerWidth;
+        let bright = -(top / containerHeight) + 1;
+        bright = bright > 0 ? bright : 0;
+        bright = bright > 1 ? 1 : bright;
+        const data = {
+            h: this.hsl.h,
+            s: saturation,
+            v: bright,
+            a: this.hsl.a,
+            source: 'hsva',
+        };
+        this.onChange.emit({ data, $event });
+    }
+}
+SaturationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SaturationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SaturationComponent, selector: "color-saturation", inputs: { hsl: "hsl", hsv: "hsv", radius: "radius", pointer: "pointer", circle: "circle" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
+    <div class="saturation-white">
+      <div class="saturation-black"></div>
+      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
+        <div class="saturation-circle" [ngStyle]="circle"></div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".saturation-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0));position:absolute;top:0;bottom:0;left:0;right:0}.saturation-black{background:linear-gradient(to top,#000,rgba(0,0,0,0));position:absolute;top:0;bottom:0;left:0;right:0}.color-saturation{position:absolute;top:0;bottom:0;left:0;right:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"], directives: [{ type: i1.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SaturationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-saturation',
+                    template: `
+  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
+    <div class="saturation-white">
+      <div class="saturation-black"></div>
+      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
+        <div class="saturation-circle" [ngStyle]="circle"></div>
+      </div>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .saturation-white {
+      background: linear-gradient(to right, #fff, rgba(255,255,255,0));
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .saturation-black {
+      background: linear-gradient(to top, #000, rgba(0,0,0,0));
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .color-saturation {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .saturation-pointer {
+      position: absolute;
+      cursor: default;
+    }
+    .saturation-circle {
+      width: 4px;
+      height: 4px;
+      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
+      border-radius: 50%;
+      cursor: hand;
+      transform: translate(-2px, -4px);
+    }
+  `,
+                    ],
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], hsv: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }], circle: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+export class SaturationModule {
+}
+SaturationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SaturationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SaturationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SaturationModule, declarations: [SaturationComponent], imports: [CommonModule, CoordinatesModule], exports: [SaturationComponent] });
+SaturationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SaturationModule, imports: [[CommonModule, CoordinatesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SaturationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SaturationComponent],
+                    exports: [SaturationComponent],
+                    imports: [CommonModule, CoordinatesModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2F0dXJhdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbW1vbi9zYXR1cmF0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxRQUFRLEVBRVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBeUQ1RCxNQUFNLE9BQU8sbUJBQW1CO0lBdERoQztRQTREWSxhQUFRLEdBQUcsSUFBSSxZQUFZLEVBQXVDLENBQUM7S0FtQzlFO0lBOUJDLFdBQVc7UUFDVCxJQUFJLENBQUMsVUFBVSxHQUFHLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLGNBQWMsQ0FBQztRQUNsRCxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQztRQUN0RCxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUM7SUFDNUMsQ0FBQztJQUNELFlBQVksQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsZUFBZSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUU7UUFDakUsSUFBSSxJQUFJLEdBQUcsQ0FBQyxFQUFFO1lBQ1osSUFBSSxHQUFHLENBQUMsQ0FBQztTQUNWO2FBQU0sSUFBSSxJQUFJLEdBQUcsY0FBYyxFQUFFO1lBQ2hDLElBQUksR0FBRyxjQUFjLENBQUM7U0FDdkI7YUFBTSxJQUFJLEdBQUcsR0FBRyxDQUFDLEVBQUU7WUFDbEIsR0FBRyxHQUFHLENBQUMsQ0FBQztTQUNUO2FBQU0sSUFBSSxHQUFHLEdBQUcsZUFBZSxFQUFFO1lBQ2hDLEdBQUcsR0FBRyxlQUFlLENBQUM7U0FDdkI7UUFFRCxNQUFNLFVBQVUsR0FBRyxJQUFJLEdBQUcsY0FBYyxDQUFDO1FBQ3pDLElBQUksTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsZUFBZSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzFDLE1BQU0sR0FBRyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNqQyxNQUFNLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7UUFFakMsTUFBTSxJQUFJLEdBQWU7WUFDdkIsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNiLENBQUMsRUFBRSxVQUFVO1lBQ2IsQ0FBQyxFQUFFLE1BQU07WUFDVCxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBQ2IsTUFBTSxFQUFFLE1BQU07U0FDZixDQUFDO1FBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUN2QyxDQUFDOztnSEF4Q1UsbUJBQW1CO29HQUFuQixtQkFBbUIsNE1BcERwQjs7Ozs7Ozs7O0dBU1Q7MkZBMkNVLG1CQUFtQjtrQkF0RC9CLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7R0FTVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ047Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW9DRDtxQkFDQTtvQkFDRCxtQkFBbUIsRUFBRSxLQUFLO29CQUMxQixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7OEJBRVUsR0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNOztBQTBDVCxNQUFNLE9BQU8sZ0JBQWdCOzs2R0FBaEIsZ0JBQWdCOzhHQUFoQixnQkFBZ0IsaUJBaERoQixtQkFBbUIsYUE4Q3BCLFlBQVksRUFBRSxpQkFBaUIsYUE5QzlCLG1CQUFtQjs4R0FnRG5CLGdCQUFnQixZQUZsQixDQUFDLFlBQVksRUFBRSxpQkFBaUIsQ0FBQzsyRkFFL0IsZ0JBQWdCO2tCQUw1QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLG1CQUFtQixDQUFDO29CQUNuQyxPQUFPLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQztvQkFDOUIsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGlCQUFpQixDQUFDO2lCQUMzQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBOZ01vZHVsZSxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5cbmltcG9ydCB7IENvb3JkaW5hdGVzTW9kdWxlIH0gZnJvbSAnLi9jb29yZGluYXRlcy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgSFNMQSwgSFNWQSwgSFNWQXNvdXJjZSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2F0dXJhdGlvbicsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJjb2xvci1zYXR1cmF0aW9uXCIgbmd4LWNvbG9yLWNvb3JkaW5hdGVzIChjb29yZGluYXRlc0NoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2F0dXJhdGlvbi13aGl0ZVwiPlxuICAgICAgPGRpdiBjbGFzcz1cInNhdHVyYXRpb24tYmxhY2tcIj48L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzYXR1cmF0aW9uLXBvaW50ZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCIgW3N0eWxlLnRvcF09XCJwb2ludGVyVG9wXCIgW3N0eWxlLmxlZnRdPVwicG9pbnRlckxlZnRcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNhdHVyYXRpb24tY2lyY2xlXCIgW25nU3R5bGVdPVwiY2lyY2xlXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2F0dXJhdGlvbi13aGl0ZSB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsICNmZmYsIHJnYmEoMjU1LDI1NSwyNTUsMCkpO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2F0dXJhdGlvbi1ibGFjayB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gdG9wLCAjMDAwLCByZ2JhKDAsMCwwLDApKTtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGJvdHRvbTogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICByaWdodDogMDtcbiAgICB9XG4gICAgLmNvbG9yLXNhdHVyYXRpb24ge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2F0dXJhdGlvbi1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIGN1cnNvcjogZGVmYXVsdDtcbiAgICB9XG4gICAgLnNhdHVyYXRpb24tY2lyY2xlIHtcbiAgICAgIHdpZHRoOiA0cHg7XG4gICAgICBoZWlnaHQ6IDRweDtcbiAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDEuNXB4ICNmZmYsIGluc2V0IDAgMCAxcHggMXB4IHJnYmEoMCwwLDAsLjMpLCAwIDAgMXB4IDJweCByZ2JhKDAsMCwwLC40KTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgIGN1cnNvcjogaGFuZDtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC0ycHgsIC00cHgpO1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTYXR1cmF0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgaHNsITogSFNMQTtcbiAgQElucHV0KCkgaHN2ITogSFNWQTtcbiAgQElucHV0KCkgcmFkaXVzITogbnVtYmVyO1xuICBASW5wdXQoKSBwb2ludGVyITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQElucHV0KCkgY2lyY2xlITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7IGRhdGE6IEhTVkFzb3VyY2U7ICRldmVudDogRXZlbnQgfT4oKTtcbiAgYmFja2dyb3VuZCE6IHN0cmluZztcbiAgcG9pbnRlclRvcCE6IHN0cmluZztcbiAgcG9pbnRlckxlZnQhOiBzdHJpbmc7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5iYWNrZ3JvdW5kID0gYGhzbCgke3RoaXMuaHNsLmh9LCAxMDAlLCA1MCUpYDtcbiAgICB0aGlzLnBvaW50ZXJUb3AgPSAtKHRoaXMuaHN2LnYgKiAxMDApICsgMSArIDEwMCArICclJztcbiAgICB0aGlzLnBvaW50ZXJMZWZ0ID0gdGhpcy5oc3YucyAqIDEwMCArICclJztcbiAgfVxuICBoYW5kbGVDaGFuZ2UoeyB0b3AsIGxlZnQsIGNvbnRhaW5lckhlaWdodCwgY29udGFpbmVyV2lkdGgsICRldmVudCB9KSB7XG4gICAgaWYgKGxlZnQgPCAwKSB7XG4gICAgICBsZWZ0ID0gMDtcbiAgICB9IGVsc2UgaWYgKGxlZnQgPiBjb250YWluZXJXaWR0aCkge1xuICAgICAgbGVmdCA9IGNvbnRhaW5lcldpZHRoO1xuICAgIH0gZWxzZSBpZiAodG9wIDwgMCkge1xuICAgICAgdG9wID0gMDtcbiAgICB9IGVsc2UgaWYgKHRvcCA+IGNvbnRhaW5lckhlaWdodCkge1xuICAgICAgdG9wID0gY29udGFpbmVySGVpZ2h0O1xuICAgIH1cblxuICAgIGNvbnN0IHNhdHVyYXRpb24gPSBsZWZ0IC8gY29udGFpbmVyV2lkdGg7XG4gICAgbGV0IGJyaWdodCA9IC0odG9wIC8gY29udGFpbmVySGVpZ2h0KSArIDE7XG4gICAgYnJpZ2h0ID0gYnJpZ2h0ID4gMCA/IGJyaWdodCA6IDA7XG4gICAgYnJpZ2h0ID0gYnJpZ2h0ID4gMSA/IDEgOiBicmlnaHQ7XG5cbiAgICBjb25zdCBkYXRhOiBIU1ZBc291cmNlID0ge1xuICAgICAgaDogdGhpcy5oc2wuaCxcbiAgICAgIHM6IHNhdHVyYXRpb24sXG4gICAgICB2OiBicmlnaHQsXG4gICAgICBhOiB0aGlzLmhzbC5hLFxuICAgICAgc291cmNlOiAnaHN2YScsXG4gICAgfTtcbiAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoeyBkYXRhLCAkZXZlbnQgfSk7XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbU2F0dXJhdGlvbkNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTYXR1cmF0aW9uQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBTYXR1cmF0aW9uTW9kdWxlIHt9XG4iXX0=

package/esm2020/shade.component.mjs

@@ -0,0 +1,165 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
+import { CoordinatesModule } from './coordinates.directive';
+import { TinyColor } from '@ctrl/tinycolor';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./coordinates.directive";
+export class ShadeComponent {
+    constructor() {
+        this.onChange = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.gradient = {
+            background: `linear-gradient(to right,
+          hsl(${this.hsl.h}, 90%, 55%),
+          #000)`,
+        };
+        const hsv = new TinyColor(this.hsl).toHsv();
+        this.pointerLeft = 100 - (hsv.v * 100);
+    }
+    handleChange({ left, containerWidth, $event }) {
+        let data;
+        let v;
+        if (left < 0) {
+            v = 0;
+        }
+        else if (left > containerWidth) {
+            v = 1;
+        }
+        else {
+            v = Math.round((left * 100) / containerWidth) / 100;
+        }
+        const hsv = new TinyColor(this.hsl).toHsv();
+        if (hsv.v !== v) {
+            data = {
+                h: this.hsl.h,
+                s: 100,
+                v: 1 - v,
+                l: this.hsl.l,
+                a: this.hsl.a,
+                source: 'rgb',
+            };
+        }
+        if (!data) {
+            return;
+        }
+        this.onChange.emit({ data, $event });
+    }
+}
+ShadeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShadeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ShadeComponent, selector: "color-shade", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="shade" [style.border-radius]="radius">
+      <div
+        class="shade-gradient"
+        [ngStyle]="gradient"
+        [style.box-shadow]="shadow"
+        [style.border-radius]="radius"
+      ></div>
+      <div
+        ngx-color-coordinates
+        (coordinatesChange)="handleChange($event)"
+        class="shade-container"
+      >
+        <div
+          class="shade-pointer"
+          [style.left.%]="pointerLeft"
+          [style.top.%]="pointerTop"
+        >
+          <div class="shade-slider" [ngStyle]="pointer"></div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".shade{position:absolute;top:0;bottom:0;left:0;right:0}.shade-gradient{position:absolute;top:0;bottom:0;left:0;right:0}.shade-container{position:relative;height:100%;margin:0 3px}.shade-pointer{position:absolute}.shade-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-shade',
+                    template: `
+    <div class="shade" [style.border-radius]="radius">
+      <div
+        class="shade-gradient"
+        [ngStyle]="gradient"
+        [style.box-shadow]="shadow"
+        [style.border-radius]="radius"
+      ></div>
+      <div
+        ngx-color-coordinates
+        (coordinatesChange)="handleChange($event)"
+        class="shade-container"
+      >
+        <div
+          class="shade-pointer"
+          [style.left.%]="pointerLeft"
+          [style.top.%]="pointerTop"
+        >
+          <div class="shade-slider" [ngStyle]="pointer"></div>
+        </div>
+      </div>
+    </div>
+  `,
+                    styles: [
+                        `
+    .shade {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .shade-gradient {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .shade-container {
+      position: relative;
+      height: 100%;
+      margin: 0 3px;
+    }
+    .shade-pointer {
+      position: absolute;
+    }
+    .shade-slider {
+      width: 4px;
+      border-radius: 1px;
+      height: 8px;
+      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+      background: #fff;
+      margin-top: 1px;
+      transform: translateX(-2px);
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }], shadow: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+export class ShadeModule {
+}
+ShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeModule, declarations: [ShadeComponent], imports: [CommonModule, CoordinatesModule], exports: [ShadeComponent] });
+ShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeModule, imports: [[CommonModule, CoordinatesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ShadeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ShadeComponent],
+                    exports: [ShadeComponent],
+                    imports: [CommonModule, CoordinatesModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9jb21tb24vc2hhZGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLFFBQVEsRUFFUixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFFNUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7O0FBa0U1QyxNQUFNLE9BQU8sY0FBYztJQS9EM0I7UUFxRVksYUFBUSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7S0E0QzlDO0lBdkNDLFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxHQUFHO1lBQ2QsVUFBVSxFQUFFO2dCQUNGLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDVjtTQUNYLENBQUM7UUFDRixNQUFNLEdBQUcsR0FBRyxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDNUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDO0lBQ3pDLENBQUM7SUFFRCxZQUFZLENBQUMsRUFBRSxJQUFJLEVBQUUsY0FBYyxFQUFFLE1BQU0sRUFBRTtRQUMzQyxJQUFJLElBQUksQ0FBQztRQUNULElBQUksQ0FBUyxDQUFDO1FBQ2QsSUFBSSxJQUFJLEdBQUcsQ0FBQyxFQUFFO1lBQ1osQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNQO2FBQU0sSUFBSSxJQUFJLEdBQUcsY0FBYyxFQUFFO1lBQ2hDLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDUDthQUFNO1lBQ0wsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxJQUFJLEdBQUcsR0FBRyxDQUFDLEdBQUcsY0FBYyxDQUFDLEdBQUcsR0FBRyxDQUFDO1NBQ3JEO1FBRUQsTUFBTSxHQUFHLEdBQUcsSUFBSSxTQUFTLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQzVDLElBQUksR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDZixJQUFJLEdBQUc7Z0JBQ0wsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDYixDQUFDLEVBQUUsR0FBRztnQkFDTixDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUM7Z0JBQ1IsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztnQkFDYixDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2dCQUNiLE1BQU0sRUFBRSxLQUFLO2FBQ2QsQ0FBQztTQUNIO1FBRUQsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNULE9BQU87U0FDUjtRQUVELElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDdkMsQ0FBQzs7MkdBakRVLGNBQWM7K0ZBQWQsY0FBYyx1TUE3RGY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlQ7MkZBdUNVLGNBQWM7a0JBL0QxQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxhQUFhO29CQUN2QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlQ7b0JBQ0QsTUFBTSxFQUFFO3dCQUNOOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWdDRDtxQkFDQTtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsbUJBQW1CLEVBQUUsS0FBSztpQkFDM0I7OEJBRVUsR0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNOztBQW1EVCxNQUFNLE9BQU8sV0FBVzs7d0dBQVgsV0FBVzt5R0FBWCxXQUFXLGlCQXpEWCxjQUFjLGFBdURmLFlBQVksRUFBRSxpQkFBaUIsYUF2RDlCLGNBQWM7eUdBeURkLFdBQVcsWUFGYixDQUFDLFlBQVksRUFBRSxpQkFBaUIsQ0FBQzsyRkFFL0IsV0FBVztrQkFMdkIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxjQUFjLENBQUM7b0JBQzlCLE9BQU8sRUFBRSxDQUFDLGNBQWMsQ0FBQztvQkFDekIsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLGlCQUFpQixDQUFDO2lCQUMzQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBOZ01vZHVsZSxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29vcmRpbmF0ZXNNb2R1bGUgfSBmcm9tICcuL2Nvb3JkaW5hdGVzLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBIU0xBLCBSR0JBIH0gZnJvbSAnLi9oZWxwZXJzL2NvbG9yLmludGVyZmFjZXMnO1xuaW1wb3J0IHsgVGlueUNvbG9yIH0gZnJvbSAnQGN0cmwvdGlueWNvbG9yJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zaGFkZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInNoYWRlXCIgW3N0eWxlLmJvcmRlci1yYWRpdXNdPVwicmFkaXVzXCI+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwic2hhZGUtZ3JhZGllbnRcIlxuICAgICAgICBbbmdTdHlsZV09XCJncmFkaWVudFwiXG4gICAgICAgIFtzdHlsZS5ib3gtc2hhZG93XT1cInNoYWRvd1wiXG4gICAgICAgIFtzdHlsZS5ib3JkZXItcmFkaXVzXT1cInJhZGl1c1wiXG4gICAgICA+PC9kaXY+XG4gICAgICA8ZGl2XG4gICAgICAgIG5neC1jb2xvci1jb29yZGluYXRlc1xuICAgICAgICAoY29vcmRpbmF0ZXNDaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICBjbGFzcz1cInNoYWRlLWNvbnRhaW5lclwiXG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cInNoYWRlLXBvaW50ZXJcIlxuICAgICAgICAgIFtzdHlsZS5sZWZ0LiVdPVwicG9pbnRlckxlZnRcIlxuICAgICAgICAgIFtzdHlsZS50b3AuJV09XCJwb2ludGVyVG9wXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJzaGFkZS1zbGlkZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2hhZGUge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2hhZGUtZ3JhZGllbnQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuc2hhZGUtY29udGFpbmVyIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgIG1hcmdpbjogMCAzcHg7XG4gICAgfVxuICAgIC5zaGFkZS1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB9XG4gICAgLnNoYWRlLXNsaWRlciB7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogMXB4O1xuICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMnB4IHJnYmEoMCwgMCwgMCwgLjYpO1xuICAgICAgYmFja2dyb3VuZDogI2ZmZjtcbiAgICAgIG1hcmdpbi10b3A6IDFweDtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgU2hhZGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBoc2whOiBIU0xBO1xuICBASW5wdXQoKSByZ2IhOiBSR0JBO1xuICBASW5wdXQoKSBwb2ludGVyITogUmVjb3JkPHN0cmluZywgc3RyaW5nPjtcbiAgQElucHV0KCkgc2hhZG93ITogc3RyaW5nO1xuICBASW5wdXQoKSByYWRpdXMhOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBncmFkaWVudCE6IFJlY29yZDxzdHJpbmcsIHN0cmluZz47XG4gIHBvaW50ZXJMZWZ0ITogbnVtYmVyO1xuICBwb2ludGVyVG9wPzogbnVtYmVyO1xuXG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuZ3JhZGllbnQgPSB7XG4gICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LFxuICAgICAgICAgIGhzbCgke3RoaXMuaHNsLmh9LCA5MCUsIDU1JSksXG4gICAgICAgICAgIzAwMClgLFxuICAgIH07XG4gICAgY29uc3QgaHN2ID0gbmV3IFRpbnlDb2xvcih0aGlzLmhzbCkudG9Ic3YoKTtcbiAgICB0aGlzLnBvaW50ZXJMZWZ0ID0gMTAwIC0gKGhzdi52ICogMTAwKTtcbiAgfVxuXG4gIGhhbmRsZUNoYW5nZSh7IGxlZnQsIGNvbnRhaW5lcldpZHRoLCAkZXZlbnQgfSk6IHZvaWQge1xuICAgIGxldCBkYXRhO1xuICAgIGxldCB2OiBudW1iZXI7XG4gICAgaWYgKGxlZnQgPCAwKSB7XG4gICAgICB2ID0gMDtcbiAgICB9IGVsc2UgaWYgKGxlZnQgPiBjb250YWluZXJXaWR0aCkge1xuICAgICAgdiA9IDE7XG4gICAgfSBlbHNlIHtcbiAgICAgIHYgPSBNYXRoLnJvdW5kKChsZWZ0ICogMTAwKSAvIGNvbnRhaW5lcldpZHRoKSAvIDEwMDtcbiAgICB9XG5cbiAgICBjb25zdCBoc3YgPSBuZXcgVGlueUNvbG9yKHRoaXMuaHNsKS50b0hzdigpO1xuICAgIGlmIChoc3YudiAhPT0gdikge1xuICAgICAgZGF0YSA9IHtcbiAgICAgICAgaDogdGhpcy5oc2wuaCxcbiAgICAgICAgczogMTAwLFxuICAgICAgICB2OiAxIC0gdixcbiAgICAgICAgbDogdGhpcy5oc2wubCxcbiAgICAgICAgYTogdGhpcy5oc2wuYSxcbiAgICAgICAgc291cmNlOiAncmdiJyxcbiAgICAgIH07XG4gICAgfVxuXG4gICAgaWYgKCFkYXRhKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5vbkNoYW5nZS5lbWl0KHsgZGF0YSwgJGV2ZW50IH0pO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1NoYWRlQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW1NoYWRlQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBTaGFkZU1vZHVsZSB7fVxuIl19

package/esm2020/swatch.component.mjs

@@ -0,0 +1,125 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
+import { CheckboardModule } from './checkboard.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./checkboard.component";
+import * as i2 from "@angular/common";
+export class SwatchComponent {
+    constructor() {
+        this.style = {};
+        this.focusStyle = {};
+        this.onClick = new EventEmitter();
+        this.onHover = new EventEmitter();
+        this.divStyles = {};
+        this.focusStyles = {};
+        this.inFocus = false;
+    }
+    ngOnInit() {
+        this.divStyles = {
+            background: this.color,
+            ...this.style,
+        };
+    }
+    currentStyles() {
+        this.focusStyles = {
+            ...this.divStyles,
+            ...this.focusStyle,
+        };
+        return this.focus || this.inFocus ? this.focusStyles : this.divStyles;
+    }
+    handleFocusOut() {
+        this.inFocus = false;
+    }
+    handleFocus() {
+        this.inFocus = true;
+    }
+    handleHover(hex, $event) {
+        this.onHover.emit({ hex, $event });
+    }
+    handleClick(hex, $event) {
+        this.onClick.emit({ hex, $event });
+    }
+}
+SwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SwatchComponent, selector: "color-swatch", inputs: { color: "color", style: "style", focusStyle: "focusStyle", focus: "focus" }, outputs: { onClick: "onClick", onHover: "onHover" }, ngImport: i0, template: `
+    <div
+      class="swatch"
+      [ngStyle]="currentStyles()"
+      [attr.title]="color"
+      (click)="handleClick(color, $event)"
+      (keydown.enter)="handleClick(color, $event)"
+      (focus)="handleFocus()"
+      (blur)="handleFocusOut()"
+      (mouseover)="handleHover(color, $event)"
+      tabindex="0"
+    >
+      <ng-content></ng-content>
+      <color-checkboard
+        *ngIf="color === 'transparent'"
+        boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
+      ></color-checkboard>
+    </div>
+  `, isInline: true, styles: [".swatch{outline:none;height:100%;width:100%;cursor:pointer;position:relative}\n"], components: [{ type: i1.CheckboardComponent, selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-swatch',
+                    template: `
+    <div
+      class="swatch"
+      [ngStyle]="currentStyles()"
+      [attr.title]="color"
+      (click)="handleClick(color, $event)"
+      (keydown.enter)="handleClick(color, $event)"
+      (focus)="handleFocus()"
+      (blur)="handleFocusOut()"
+      (mouseover)="handleHover(color, $event)"
+      tabindex="0"
+    >
+      <ng-content></ng-content>
+      <color-checkboard
+        *ngIf="color === 'transparent'"
+        boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
+      ></color-checkboard>
+    </div>
+  `,
+                    styles: [
+                        `
+      .swatch {
+        outline: none;
+        height: 100%;
+        width: 100%;
+        cursor: pointer;
+        position: relative;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], focusStyle: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onHover: [{
+                type: Output
+            }] } });
+export class SwatchModule {
+}
+SwatchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SwatchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchModule, declarations: [SwatchComponent], imports: [CommonModule, CheckboardModule], exports: [SwatchComponent] });
+SwatchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchModule, imports: [[CommonModule, CheckboardModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SwatchComponent],
+                    exports: [SwatchComponent],
+                    imports: [CommonModule, CheckboardModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dhdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY29tbW9uL3N3YXRjaC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsUUFBUSxFQUVSLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7OztBQW9DMUQsTUFBTSxPQUFPLGVBQWU7SUFsQzVCO1FBb0NXLFVBQUssR0FBMkIsRUFBRSxDQUFDO1FBQ25DLGVBQVUsR0FBMkIsRUFBRSxDQUFDO1FBRXZDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQzVDLGNBQVMsR0FBMkIsRUFBRSxDQUFDO1FBQ3ZDLGdCQUFXLEdBQTJCLEVBQUUsQ0FBQztRQUN6QyxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBMkJqQjtJQXpCQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRztZQUNmLFVBQVUsRUFBRSxJQUFJLENBQUMsS0FBZTtZQUNoQyxHQUFHLElBQUksQ0FBQyxLQUFLO1NBQ2QsQ0FBQztJQUNKLENBQUM7SUFDRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLFdBQVcsR0FBRztZQUNqQixHQUFHLElBQUksQ0FBQyxTQUFTO1lBQ2pCLEdBQUcsSUFBSSxDQUFDLFVBQVU7U0FDbkIsQ0FBQztRQUNGLE9BQU8sSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hFLENBQUM7SUFDRCxjQUFjO1FBQ1osSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQztJQUNELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztJQUN0QixDQUFDO0lBQ0QsV0FBVyxDQUFDLEdBQVcsRUFBRSxNQUFNO1FBQzdCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUNELFdBQVcsQ0FBQyxHQUFXLEVBQUUsTUFBTTtRQUM3QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7OzRHQW5DVSxlQUFlO2dHQUFmLGVBQWUsK0xBaENoQjs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBa0JUOzJGQWNVLGVBQWU7a0JBbEMzQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO29CQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ047Ozs7Ozs7O0tBUUM7cUJBQ0Y7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2hEOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkFDRyxPQUFPO3NCQUFoQixNQUFNOztBQXFDVCxNQUFNLE9BQU8sWUFBWTs7eUdBQVosWUFBWTswR0FBWixZQUFZLGlCQTNDWixlQUFlLGFBeUNoQixZQUFZLEVBQUUsZ0JBQWdCLGFBekM3QixlQUFlOzBHQTJDZixZQUFZLFlBRmQsQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLENBQUM7MkZBRTlCLFlBQVk7a0JBTHhCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxDQUFDO29CQUMvQixPQUFPLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQzFCLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxnQkFBZ0IsQ0FBQztpQkFDMUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgTmdNb2R1bGUsXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ2hlY2tib2FyZE1vZHVsZSB9IGZyb20gJy4vY2hlY2tib2FyZC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zd2F0Y2gnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwic3dhdGNoXCJcbiAgICAgIFtuZ1N0eWxlXT1cImN1cnJlbnRTdHlsZXMoKVwiXG4gICAgICBbYXR0ci50aXRsZV09XCJjb2xvclwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlQ2xpY2soY29sb3IsICRldmVudClcIlxuICAgICAgKGtleWRvd24uZW50ZXIpPVwiaGFuZGxlQ2xpY2soY29sb3IsICRldmVudClcIlxuICAgICAgKGZvY3VzKT1cImhhbmRsZUZvY3VzKClcIlxuICAgICAgKGJsdXIpPVwiaGFuZGxlRm9jdXNPdXQoKVwiXG4gICAgICAobW91c2VvdmVyKT1cImhhbmRsZUhvdmVyKGNvbG9yLCAkZXZlbnQpXCJcbiAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPGNvbG9yLWNoZWNrYm9hcmRcbiAgICAgICAgKm5nSWY9XCJjb2xvciA9PT0gJ3RyYW5zcGFyZW50J1wiXG4gICAgICAgIGJveFNoYWRvdz1cImluc2V0IDAgMCAwIDFweCByZ2JhKDAsMCwwLDAuMSlcIlxuICAgICAgPjwvY29sb3ItY2hlY2tib2FyZD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLnN3YXRjaCB7XG4gICAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgfVxuICAgIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTd2F0Y2hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBjb2xvciE6IHN0cmluZztcbiAgQElucHV0KCkgc3R5bGU6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcbiAgQElucHV0KCkgZm9jdXNTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHt9O1xuICBASW5wdXQoKSBmb2N1cyE6IGJvb2xlYW47XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBvbkhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIGRpdlN0eWxlczogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHt9O1xuICBmb2N1c1N0eWxlczogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHt9O1xuICBpbkZvY3VzID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5kaXZTdHlsZXMgPSB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGlzLmNvbG9yIGFzIHN0cmluZyxcbiAgICAgIC4uLnRoaXMuc3R5bGUsXG4gICAgfTtcbiAgfVxuICBjdXJyZW50U3R5bGVzKCkge1xuICAgIHRoaXMuZm9jdXNTdHlsZXMgPSB7XG4gICAgICAuLi50aGlzLmRpdlN0eWxlcyxcbiAgICAgIC4uLnRoaXMuZm9jdXNTdHlsZSxcbiAgICB9O1xuICAgIHJldHVybiB0aGlzLmZvY3VzIHx8IHRoaXMuaW5Gb2N1cyA/IHRoaXMuZm9jdXNTdHlsZXMgOiB0aGlzLmRpdlN0eWxlcztcbiAgfVxuICBoYW5kbGVGb2N1c091dCgpIHtcbiAgICB0aGlzLmluRm9jdXMgPSBmYWxzZTtcbiAgfVxuICBoYW5kbGVGb2N1cygpIHtcbiAgICB0aGlzLmluRm9jdXMgPSB0cnVlO1xuICB9XG4gIGhhbmRsZUhvdmVyKGhleDogc3RyaW5nLCAkZXZlbnQpIHtcbiAgICB0aGlzLm9uSG92ZXIuZW1pdCh7IGhleCwgJGV2ZW50IH0pO1xuICB9XG4gIGhhbmRsZUNsaWNrKGhleDogc3RyaW5nLCAkZXZlbnQpIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7IGhleCwgJGV2ZW50IH0pO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1N3YXRjaENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTd2F0Y2hDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDaGVja2JvYXJkTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgU3dhdGNoTW9kdWxlIHt9XG4iXX0=