ngx-color 8.0.0 → 8.0.1

package/esm2020/chrome/chrome.component.mjs

@@ -0,0 +1,184 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { AlphaModule, CheckboardModule, ColorWrap, EditableInputModule, HueModule, SaturationModule } from 'ngx-color';
+import { ChromeFieldsComponent } from './chrome-fields.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 ChromeComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Remove alpha slider and options from picker */
+        this.disableAlpha = false;
+        this.circle = {
+            width: '12px',
+            height: '12px',
+            borderRadius: '6px',
+            boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
+            transform: 'translate(-6px, -8px)',
+        };
+        this.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)',
+        };
+    }
+    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);
+    }
+}
+ChromeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChromeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChromeComponent, 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>
+          <div class="chrome-alpha" *ngIf="!disableAlpha">
+            <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;top:0;bottom:0;left:0;right: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: "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 ChromeFieldsComponent; }), selector: "color-chrome-fields", inputs: ["disableAlpha", "hsl", "rgb", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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>
+          <div class="chrome-alpha" *ngIf="!disableAlpha">
+            <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),
+                        },
+                    ], 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;top:0;bottom:0;left:0;right: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: function () { return []; }, propDecorators: { disableAlpha: [{
+                type: Input
+            }] } });
+export class ColorChromeModule {
+}
+ColorChromeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorChromeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
+        AlphaModule,
+        CheckboardModule,
+        EditableInputModule,
+        HueModule,
+        SaturationModule], exports: [ChromeComponent, ChromeFieldsComponent] });
+ColorChromeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
+        AlphaModule,
+        CheckboardModule,
+        EditableInputModule,
+        HueModule,
+        SaturationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorChromeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ChromeComponent, ChromeFieldsComponent],
+                    exports: [ChromeComponent, ChromeFieldsComponent],
+                    imports: [
+                        CommonModule,
+                        AlphaModule,
+                        CheckboardModule,
+                        EditableInputModule,
+                        HueModule,
+                        SaturationModule,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hyb21lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2hyb21lL2Nocm9tZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUFFLFdBQVcsRUFBRSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3ZILE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBd0huRCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxTQUFTO0lBb0I1QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBcEJWLGtEQUFrRDtRQUN6QyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUM5QixXQUFNLEdBQTJCO1lBQy9CLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxZQUFZLEVBQUUsS0FBSztZQUNuQixTQUFTLEVBQUUsMENBQTBDO1lBQ3JELFNBQVMsRUFBRSx1QkFBdUI7U0FDbkMsQ0FBQztRQUNGLFlBQU8sR0FBMkI7WUFDaEMsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxLQUFLO1lBQ25CLFNBQVMsRUFBRSx1QkFBdUI7WUFDbEMsZUFBZSxFQUFFLG9CQUFvQjtZQUNyQyxTQUFTLEVBQUUsaUNBQWlDO1NBQzdDLENBQUM7SUFLRixDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNqRCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsUUFBUSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxLQUFLLEdBQUcsQ0FBQztJQUN4RixDQUFDO0lBQ0QsaUJBQWlCLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO1FBQ2hDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ2xDLENBQUM7OzRHQTlCVSxlQUFlO2dHQUFmLGVBQWUsaUZBWmY7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUM7WUFDOUMsS0FBSyxFQUFFLElBQUk7U0FDWjtRQUNEO1lBQ0UsT0FBTyxFQUFFLFNBQVM7WUFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUM7U0FDL0M7S0FDRixpREFsSFM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNENULHFzREEwRytCLHFCQUFxQjsyRkFsQzFDLGVBQWU7a0JBdEgzQixTQUFTOytCQUNFLGNBQWMsWUFDZDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E0Q1QsbUJBMERnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLLGFBQ2Y7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZ0JBQWdCLENBQUM7NEJBQzlDLEtBQUssRUFBRSxJQUFJO3lCQUNaO3dCQUNEOzRCQUNFLE9BQU8sRUFBRSxTQUFTOzRCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQzt5QkFDL0M7cUJBQ0Y7MEVBSVEsWUFBWTtzQkFBcEIsS0FBSzs7QUEyQ1IsTUFBTSxPQUFPLGlCQUFpQjs7OEdBQWpCLGlCQUFpQjsrR0FBakIsaUJBQWlCLGlCQTdDakIsZUFBZSxFQWtDTSxxQkFBcUIsYUFHbkQsWUFBWTtRQUNaLFdBQVc7UUFDWCxnQkFBZ0I7UUFDaEIsbUJBQW1CO1FBQ25CLFNBQVM7UUFDVCxnQkFBZ0IsYUExQ1AsZUFBZSxFQW1DQyxxQkFBcUI7K0dBVXJDLGlCQUFpQixZQVIxQixZQUFZO1FBQ1osV0FBVztRQUNYLGdCQUFnQjtRQUNoQixtQkFBbUI7UUFDbkIsU0FBUztRQUNULGdCQUFnQjsyRkFHUCxpQkFBaUI7a0JBWjdCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDO29CQUN0RCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUM7b0JBQ2pELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsZ0JBQWdCO3dCQUNoQixtQkFBbUI7d0JBQ25CLFNBQVM7d0JBQ1QsZ0JBQWdCO3FCQUNqQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQWxwaGFNb2R1bGUsIENoZWNrYm9hcmRNb2R1bGUsIENvbG9yV3JhcCwgRWRpdGFibGVJbnB1dE1vZHVsZSwgSHVlTW9kdWxlLCBTYXR1cmF0aW9uTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IENocm9tZUZpZWxkc0NvbXBvbmVudCB9IGZyb20gJy4vY2hyb21lLWZpZWxkcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNocm9tZScsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJjaHJvbWUtcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzYXR1cmF0aW9uXCI+XG4gICAgICA8Y29sb3Itc2F0dXJhdGlvblxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtoc3ZdPVwiaHN2XCJcbiAgICAgICAgW2NpcmNsZV09XCJjaXJjbGVcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1zYXR1cmF0aW9uPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtYm9keVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1jb250cm9sc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLWNvbG9yXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1zd2F0Y2hcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtYWN0aXZlXCJcbiAgICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwiYWN0aXZlQmFja2dyb3VuZFwiXG4gICAgICAgICAgICA+PC9kaXY+XG4gICAgICAgICAgICA8Y29sb3ItY2hlY2tib2FyZD48L2NvbG9yLWNoZWNrYm9hcmQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLXRvZ2dsZXNcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLWh1ZVwiPlxuICAgICAgICAgICAgPGNvbG9yLWh1ZVxuICAgICAgICAgICAgICBbcmFkaXVzXT1cIjJcIlxuICAgICAgICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgICAgICAgIFtwb2ludGVyXT1cInBvaW50ZXJcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICA+PC9jb2xvci1odWU+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1hbHBoYVwiICpuZ0lmPVwiIWRpc2FibGVBbHBoYVwiPlxuICAgICAgICAgICAgPGNvbG9yLWFscGhhXG4gICAgICAgICAgICAgIFtyYWRpdXNdPVwiMlwiIFtyZ2JdPVwicmdiXCIgW2hzbF09XCJoc2xcIlxuICAgICAgICAgICAgICBbcG9pbnRlcl09XCJwb2ludGVyXCIgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItYWxwaGE+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8Y29sb3ItY2hyb21lLWZpZWxkc1xuICAgICAgICBbcmdiXT1cInJnYlwiIFtoc2xdPVwiaHNsXCIgW2hleF09XCJoZXhcIlxuICAgICAgICBbZGlzYWJsZUFscGhhXT1cImRpc2FibGVBbHBoYVwiXG4gICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWNocm9tZS1maWVsZHM+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuY2hyb21lLXBpY2tlciB7XG4gICAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDJweCByZ2JhKDAsIDAsIDAsIDAuMyksIDAgNHB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMyk7XG4gICAgICAgIGJveC1zaXppbmc6IGluaXRpYWw7XG4gICAgICAgIHdpZHRoOiAyMjVweDtcbiAgICAgICAgZm9udC1mYW1pbHk6ICdNZW5sbyc7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWNvbnRyb2xzIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtY29sb3Ige1xuICAgICAgICB3aWR0aDogNDJweDtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtYm9keSB7XG4gICAgICAgIHBhZGRpbmc6IDE0cHggMTRweCAxMnB4O1xuICAgICAgfVxuICAgICAgLmNocm9tZS1hY3RpdmUge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIHRvcDogMDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICByaWdodDogMDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMjBweDtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICAgICAgei1pbmRleDogMjtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtc3dhdGNoIHtcbiAgICAgICAgd2lkdGg6IDI4cHg7XG4gICAgICAgIGhlaWdodDogMjhweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMTVweDtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgfVxuICAgICAgLnNhdHVyYXRpb24ge1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgcGFkZGluZy1ib3R0b206IDU1JTtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBib3JkZXItcmFkaXVzOiAycHggMnB4IDAgMDtcbiAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtdG9nZ2xlcyB7XG4gICAgICAgIGZsZXg6IDE7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWh1ZSB7XG4gICAgICAgIGhlaWdodDogMTBweDtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWFscGhhIHtcbiAgICAgICAgaGVpZ2h0OiAxMHB4O1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENocm9tZUNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENocm9tZUNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDaHJvbWVDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUmVtb3ZlIGFscGhhIHNsaWRlciBhbmQgb3B0aW9ucyBmcm9tIHBpY2tlciAqL1xuICBASW5wdXQoKSBkaXNhYmxlQWxwaGEgPSBmYWxzZTtcbiAgY2lyY2xlOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHdpZHRoOiAnMTJweCcsXG4gICAgaGVpZ2h0OiAnMTJweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNnB4JyxcbiAgICBib3hTaGFkb3c6ICdyZ2IoMjU1LCAyNTUsIDI1NSkgMHB4IDBweCAwcHggMXB4IGluc2V0JyxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTZweCwgLThweCknLFxuICB9O1xuICBwb2ludGVyOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHdpZHRoOiAnMTJweCcsXG4gICAgaGVpZ2h0OiAnMTJweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNnB4JyxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTZweCwgLTJweCknLFxuICAgIGJhY2tncm91bmRDb2xvcjogJ3JnYigyNDgsIDI0OCwgMjQ4KScsXG4gICAgYm94U2hhZG93OiAnMCAxcHggNHB4IDAgcmdiYSgwLCAwLCAwLCAwLjM3KScsXG4gIH07XG4gIGFjdGl2ZUJhY2tncm91bmQhOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIGFmdGVyVmFsaWRDaGFuZ2UoKSB7XG4gICAgY29uc3QgYWxwaGEgPSB0aGlzLmRpc2FibGVBbHBoYSA/IDEgOiB0aGlzLnJnYi5hO1xuICAgIHRoaXMuYWN0aXZlQmFja2dyb3VuZCA9IGByZ2JhKCR7dGhpcy5yZ2Iucn0sICR7dGhpcy5yZ2IuZ30sICR7dGhpcy5yZ2IuYn0sICR7YWxwaGF9KWA7XG4gIH1cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIHRoaXMuaGFuZGxlQ2hhbmdlKGRhdGEsICRldmVudCk7XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbQ2hyb21lQ29tcG9uZW50LCBDaHJvbWVGaWVsZHNDb21wb25lbnRdLFxuICBleHBvcnRzOiBbQ2hyb21lQ29tcG9uZW50LCBDaHJvbWVGaWVsZHNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEFscGhhTW9kdWxlLFxuICAgIENoZWNrYm9hcmRNb2R1bGUsXG4gICAgRWRpdGFibGVJbnB1dE1vZHVsZSxcbiAgICBIdWVNb2R1bGUsXG4gICAgU2F0dXJhdGlvbk1vZHVsZSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JDaHJvbWVNb2R1bGUge31cbiJdfQ==

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

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

package/esm2020/chrome/public_api.mjs

@@ -0,0 +1,3 @@
+export { ChromeFieldsComponent } from './chrome-fields.component';
+export { ChromeComponent, ColorChromeModule } from './chrome.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2hyb21lL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgQ2hyb21lRmllbGRzQ29tcG9uZW50IH0gZnJvbSAnLi9jaHJvbWUtZmllbGRzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBDaHJvbWVDb21wb25lbnQsIENvbG9yQ2hyb21lTW9kdWxlIH0gZnJvbSAnLi9jaHJvbWUuY29tcG9uZW50JztcbiJdfQ==

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

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export class CircleSwatchComponent {
+    constructor() {
+        this.circleSize = 28;
+        this.circleSpacing = 14;
+        this.focus = false;
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.focusStyle = {};
+        this.swatchStyle = {
+            borderRadius: '50%',
+            background: 'transparent',
+            transition: '100ms box-shadow ease 0s',
+        };
+    }
+    ngOnChanges() {
+        this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;
+        this.focusStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}, 0 0 5px ${this.color}`;
+        if (this.focus) {
+            this.focusStyle.boxShadow = `inset 0 0 0 3px ${this.color}, 0 0 5px ${this.color}`;
+        }
+    }
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+}
+CircleSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CircleSwatchComponent, selector: "color-circle-swatch", inputs: { color: "color", circleSize: "circleSize", circleSpacing: "circleSpacing", focus: "focus" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="circle-swatch"
+    [style.width.px]="circleSize" [style.height.px]="circleSize"
+    [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
+    >
+    <color-swatch
+      [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
+      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
+    </color-swatch>
+    <div class="clear"></div>
+  </div>
+  `, isInline: true, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CircleSwatchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-circle-swatch', template: `
+  <div class="circle-swatch"
+    [style.width.px]="circleSize" [style.height.px]="circleSize"
+    [style.margin-right.px]="circleSpacing" [style.margin-bottom.px]="circleSpacing"
+    >
+    <color-swatch
+      [color]="color" [style]="swatchStyle" [focus]="focus" [focusStyle]="focusStyle"
+      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)">
+    </color-swatch>
+    <div class="clear"></div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".circle-swatch{transform:scale(1);transition:transform .1s ease}.circle-swatch:hover{transform:scale(1.2)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLXN3YXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NpcmNsZS9jaXJjbGUtc3dhdGNoLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7O0FBOEJ2QixNQUFNLE9BQU8scUJBQXFCO0lBNUJsQztRQThCVyxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLGtCQUFhLEdBQUcsRUFBRSxDQUFDO1FBQ25CLFVBQUssR0FBRyxLQUFLLENBQUM7UUFDYixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsQyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEQsZUFBVSxHQUEyQixFQUFFLENBQUM7UUFDeEMsZ0JBQVcsR0FBMkI7WUFDcEMsWUFBWSxFQUFFLEtBQUs7WUFDbkIsVUFBVSxFQUFFLGFBQWE7WUFDekIsVUFBVSxFQUFFLDBCQUEwQjtTQUN2QyxDQUFDO0tBWUg7SUFWQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLEdBQUcsZUFBZSxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsTUFBTSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDbEYsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsZUFBZ0IsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFFLE1BQU8sSUFBSSxDQUFDLEtBQU0sYUFBYyxJQUFJLENBQUMsS0FBTSxFQUFFLENBQUM7UUFDOUcsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ2QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsbUJBQW9CLElBQUksQ0FBQyxLQUFNLGFBQWMsSUFBSSxDQUFDLEtBQU0sRUFBRSxDQUFDO1NBQ3hGO0lBQ0gsQ0FBQztJQUNELFdBQVcsQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUU7UUFDekIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUNyQyxDQUFDOztrSEF2QlUscUJBQXFCO3NHQUFyQixxQkFBcUIsdVBBMUJ0Qjs7Ozs7Ozs7Ozs7R0FXVDsyRkFlVSxxQkFBcUI7a0JBNUJqQyxTQUFTOytCQUNFLHFCQUFxQixZQUNyQjs7Ozs7Ozs7Ozs7R0FXVCxtQkFZZ0IsdUJBQXVCLENBQUMsTUFBTSx1QkFDMUIsS0FBSzs4QkFHakIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaXJjbGUtc3dhdGNoJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImNpcmNsZS1zd2F0Y2hcIlxuICAgIFtzdHlsZS53aWR0aC5weF09XCJjaXJjbGVTaXplXCIgW3N0eWxlLmhlaWdodC5weF09XCJjaXJjbGVTaXplXCJcbiAgICBbc3R5bGUubWFyZ2luLXJpZ2h0LnB4XT1cImNpcmNsZVNwYWNpbmdcIiBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCJjaXJjbGVTcGFjaW5nXCJcbiAgICA+XG4gICAgPGNvbG9yLXN3YXRjaFxuICAgICAgW2NvbG9yXT1cImNvbG9yXCIgW3N0eWxlXT1cInN3YXRjaFN0eWxlXCIgW2ZvY3VzXT1cImZvY3VzXCIgW2ZvY3VzU3R5bGVdPVwiZm9jdXNTdHlsZVwiXG4gICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCIgKG9uSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIj5cbiAgICA8L2NvbG9yLXN3YXRjaD5cbiAgICA8ZGl2IGNsYXNzPVwiY2xlYXJcIj48L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLmNpcmNsZS1zd2F0Y2gge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDEwMG1zIGVhc2U7XG4gIH1cbiAgLmNpcmNsZS1zd2F0Y2g6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMS4yKTtcbiAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIENpcmNsZVN3YXRjaENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNvbG9yITogc3RyaW5nO1xuICBASW5wdXQoKSBjaXJjbGVTaXplID0gMjg7XG4gIEBJbnB1dCgpIGNpcmNsZVNwYWNpbmcgPSAxNDtcbiAgQElucHV0KCkgZm9jdXMgPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpIG9uU3dhdGNoSG92ZXIgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgZm9jdXNTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHt9O1xuICBzd2F0Y2hTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgIGJhY2tncm91bmQ6ICd0cmFuc3BhcmVudCcsXG4gICAgdHJhbnNpdGlvbjogJzEwMG1zIGJveC1zaGFkb3cgZWFzZSAwcycsXG4gIH07XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5zd2F0Y2hTdHlsZS5ib3hTaGFkb3cgPSBgaW5zZXQgMCAwIDAgJHt0aGlzLmNpcmNsZVNpemUgLyAyfXB4ICR7dGhpcy5jb2xvcn1gO1xuICAgIHRoaXMuZm9jdXNTdHlsZS5ib3hTaGFkb3cgPSBgaW5zZXQgMCAwIDAgJHsgdGhpcy5jaXJjbGVTaXplIC8gMiB9cHggJHsgdGhpcy5jb2xvciB9LCAwIDAgNXB4ICR7IHRoaXMuY29sb3IgfWA7XG4gICAgaWYgKHRoaXMuZm9jdXMpIHtcbiAgICAgIHRoaXMuZm9jdXNTdHlsZS5ib3hTaGFkb3cgPSBgaW5zZXQgMCAwIDAgM3B4ICR7IHRoaXMuY29sb3IgfSwgMCAwIDVweCAkeyB0aGlzLmNvbG9yIH1gO1xuICAgIH1cbiAgfVxuICBoYW5kbGVDbGljayh7IGhleCwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7IGhleCwgJGV2ZW50IH0pO1xuICB9XG59XG4iXX0=

package/esm2020/circle/circle.component.mjs

@@ -0,0 +1,134 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, green, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow, } from 'material-colors';
+import { TinyColor } from '@ctrl/tinycolor';
+import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
+import { CircleSwatchComponent } from './circle-swatch.component';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class CircleComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 252;
+        /** Color squares to display */
+        this.colors = [
+            red['500'],
+            pink['500'],
+            purple['500'],
+            deepPurple['500'],
+            indigo['500'],
+            blue['500'],
+            lightBlue['500'],
+            cyan['500'],
+            teal['500'],
+            green['500'],
+            lightGreen['500'],
+            lime['500'],
+            yellow['500'],
+            amber['500'],
+            orange['500'],
+            deepOrange['500'],
+            brown['500'],
+            blueGrey['500'],
+        ];
+        /** Value for circle size */
+        this.circleSize = 28;
+        /** Value for spacing between circles */
+        this.circleSpacing = 14;
+    }
+    isActive(color) {
+        return new TinyColor(this.hex).equals(color);
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            this.handleChange({ hex, source: 'hex' }, $event);
+        }
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+CircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CircleComponent, selector: "color-circle", inputs: { width: "width", colors: "colors", circleSize: "circleSize", circleSpacing: "circleSpacing" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => CircleComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => CircleComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+    <div
+      class="circle-picker {{ className }}"
+      [style.width.px]="width"
+      [style.margin-right.px]="-circleSpacing"
+      [style.margin-bottom.px]="-circleSpacing"
+    >
+      <color-circle-swatch
+        *ngFor="let color of colors"
+        [circleSize]="circleSize"
+        [circleSpacing]="circleSpacing"
+        [color]="color"
+        [focus]="isActive(color)"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-circle-swatch>
+    </div>
+  `, isInline: true, styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-circle', template: `
+    <div
+      class="circle-picker {{ className }}"
+      [style.width.px]="width"
+      [style.margin-right.px]="-circleSpacing"
+      [style.margin-bottom.px]="-circleSpacing"
+    >
+      <color-circle-swatch
+        *ngFor="let color of colors"
+        [circleSize]="circleSize"
+        [circleSpacing]="circleSpacing"
+        [color]="color"
+        [focus]="isActive(color)"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-circle-swatch>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CircleComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => CircleComponent),
+                        },
+                    ], styles: [".circle-picker{display:flex;flex-wrap:wrap}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }] } });
+export class ColorCircleModule {
+}
+ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
+ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorCircleModule, imports: [CommonModule, SwatchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ColorCircleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CircleComponent, CircleSwatchComponent],
+                    exports: [CircleComponent, CircleSwatchComponent],
+                    imports: [CommonModule, SwatchModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2lyY2xlL2NpcmNsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEcsT0FBTyxFQUNMLEtBQUssRUFDTCxJQUFJLEVBQ0osUUFBUSxFQUNSLEtBQUssRUFDTCxJQUFJLEVBQ0osVUFBVSxFQUNWLFVBQVUsRUFDVixLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsRUFDVCxVQUFVLEVBQ1YsSUFBSSxFQUNKLE1BQU0sRUFDTixJQUFJLEVBQ0osTUFBTSxFQUNOLEdBQUcsRUFDSCxJQUFJLEVBQ0osTUFBTSxHQUNQLE1BQU0saUJBQWlCLENBQUM7QUFDekIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRTVDLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNoRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBNENuRCxNQUFNLE9BQU8sZUFBZ0IsU0FBUSxTQUFTO0lBOEI1QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBOUJWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QywrQkFBK0I7UUFFL0IsV0FBTSxHQUFhO1lBQ2pCLEdBQUcsQ0FBQyxLQUFLLENBQUM7WUFDVixJQUFJLENBQUMsS0FBSyxDQUFDO1lBQ1gsTUFBTSxDQUFDLEtBQUssQ0FBQztZQUNiLFVBQVUsQ0FBQyxLQUFLLENB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LFlBQVksRUFBRSxZQUFZLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgYW1iZXIsXG4gIGJsdWUsXG4gIGJsdWVHcmV5LFxuICBicm93bixcbiAgY3lhbixcbiAgZGVlcE9yYW5nZSxcbiAgZGVlcFB1cnBsZSxcbiAgZ3JlZW4sXG4gIGluZGlnbyxcbiAgbGlnaHRCbHVlLFxuICBsaWdodEdyZWVuLFxuICBsaW1lLFxuICBvcmFuZ2UsXG4gIHBpbmssXG4gIHB1cnBsZSxcbiAgcmVkLFxuICB0ZWFsLFxuICB5ZWxsb3csXG59IGZyb20gJ21hdGVyaWFsLWNvbG9ycyc7XG5pbXBvcnQgeyBUaW55Q29sb3IgfSBmcm9tICdAY3RybC90aW55Y29sb3InO1xuXG5pbXBvcnQgeyBDb2xvcldyYXAsIGlzVmFsaWRIZXgsIFN3YXRjaE1vZHVsZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBDaXJjbGVTd2F0Y2hDb21wb25lbnQgfSBmcm9tICcuL2NpcmNsZS1zd2F0Y2guY29tcG9uZW50JztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaXJjbGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY2lyY2xlLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIlxuICAgICAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCJcbiAgICAgIFtzdHlsZS5tYXJnaW4tcmlnaHQucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1ib3R0b20ucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgID5cbiAgICAgIDxjb2xvci1jaXJjbGUtc3dhdGNoXG4gICAgICAgICpuZ0Zvcj1cImxldCBjb2xvciBvZiBjb2xvcnNcIlxuICAgICAgICBbY2lyY2xlU2l6ZV09XCJjaXJjbGVTaXplXCJcbiAgICAgICAgW2NpcmNsZVNwYWNpbmddPVwiY2lyY2xlU3BhY2luZ1wiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIFtmb2N1c109XCJpc0FjdGl2ZShjb2xvcilcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVCbG9ja0NoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgKG9uU3dhdGNoSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgPjwvY29sb3ItY2lyY2xlLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmNpcmNsZS1waWNrZXIge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBmbGV4LXdyYXA6IHdyYXA7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENpcmNsZUNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENpcmNsZUNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDaXJjbGVDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMjUyO1xuICAvKiogQ29sb3Igc3F1YXJlcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpXG4gIGNvbG9yczogc3RyaW5nW10gPSBbXG4gICAgcmVkWyc1MDAnXSxcbiAgICBwaW5rWyc1MDAnXSxcbiAgICBwdXJwbGVbJzUwMCddLFxuICAgIGRlZXBQdXJwbGVbJzUwMCddLFxuICAgIGluZGlnb1snNTAwJ10sXG4gICAgYmx1ZVsnNTAwJ10sXG4gICAgbGlnaHRCbHVlWyc1MDAnXSxcbiAgICBjeWFuWyc1MDAnXSxcbiAgICB0ZWFsWyc1MDAnXSxcbiAgICBncmVlblsnNTAwJ10sXG4gICAgbGlnaHRHcmVlblsnNTAwJ10sXG4gICAgbGltZVsnNTAwJ10sXG4gICAgeWVsbG93Wyc1MDAnXSxcbiAgICBhbWJlclsnNTAwJ10sXG4gICAgb3JhbmdlWyc1MDAnXSxcbiAgICBkZWVwT3JhbmdlWyc1MDAnXSxcbiAgICBicm93blsnNTAwJ10sXG4gICAgYmx1ZUdyZXlbJzUwMCddLFxuICBdO1xuICAvKiogVmFsdWUgZm9yIGNpcmNsZSBzaXplICovXG4gIEBJbnB1dCgpIGNpcmNsZVNpemUgPSAyODtcbiAgLyoqIFZhbHVlIGZvciBzcGFjaW5nIGJldHdlZW4gY2lyY2xlcyAqL1xuICBASW5wdXQoKSBjaXJjbGVTcGFjaW5nID0gMTQ7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuICBpc0FjdGl2ZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIG5ldyBUaW55Q29sb3IodGhpcy5oZXgpLmVxdWFscyhjb2xvcik7XG4gIH1cbiAgaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXgsICRldmVudCB9OiB7IGhleDogc3RyaW5nLCAkZXZlbnQ6IEV2ZW50IH0pIHtcbiAgICBpZiAoaXNWYWxpZEhleChoZXgpKSB7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGhleCwgc291cmNlOiAnaGV4JyB9LCAkZXZlbnQpO1xuICAgIH1cbiAgfVxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yQ2lyY2xlTW9kdWxlIHt9XG4iXX0=

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

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

package/esm2020/circle/public_api.mjs

@@ -0,0 +1,3 @@
+export { CircleSwatchComponent } from './circle-swatch.component';
+export { CircleComponent, ColorCircleModule } from './circle.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2lyY2xlL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLGVBQWUsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgQ2lyY2xlU3dhdGNoQ29tcG9uZW50IH0gZnJvbSAnLi9jaXJjbGUtc3dhdGNoLmNvbXBvbmVudCc7XG5leHBvcnQgeyBDaXJjbGVDb21wb25lbnQsIENvbG9yQ2lyY2xlTW9kdWxlIH0gZnJvbSAnLi9jaXJjbGUuY29tcG9uZW50JztcbiJdfQ==

package/esm2020/compact/compact-color.component.mjs

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { getContrastingColor } from 'ngx-color';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export class CompactColorComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.swatchStyle = {
+            width: '15px',
+            height: '15px',
+            float: 'left',
+            marginRight: '5px',
+            marginBottom: '5px',
+            position: 'relative',
+            cursor: 'pointer',
+        };
+        this.swatchFocus = {};
+        this.getContrastingColor = getContrastingColor;
+    }
+    ngOnChanges() {
+        this.swatchStyle.background = this.color;
+        this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;
+        if (this.color.toLowerCase() === '#ffffff') {
+            this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';
+        }
+    }
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+}
+CompactColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CompactColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompactColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CompactColorComponent, selector: "color-compact-color", inputs: { color: "color", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="compact-color">
+    <color-swatch class="swatch"
+      [color]="color" [style]="swatchStyle"
+      [focusStyle]="swatchFocus"
+      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
+      >
+      <div class="compact-dot"
+        [class.active]="active" [style.background]="getContrastingColor(color)"
+      ></div>
+    </color-swatch>
+  </div>
+  `, isInline: true, styles: [".compact-dot{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"], dependencies: [{ kind: "component", type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CompactColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-compact-color', template: `
+  <div class="compact-color">
+    <color-swatch class="swatch"
+      [color]="color" [style]="swatchStyle"
+      [focusStyle]="swatchFocus"
+      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
+      >
+      <div class="compact-dot"
+        [class.active]="active" [style.background]="getContrastingColor(color)"
+      ></div>
+    </color-swatch>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".compact-dot{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcGFjdC1jb2xvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbXBhY3QvY29tcGFjdC1jb2xvci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFDOzs7QUFvQ2hELE1BQU0sT0FBTyxxQkFBcUI7SUFsQ2xDO1FBcUNZLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsRCxnQkFBVyxHQUEyQjtZQUNwQyxLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsS0FBSyxFQUFFLE1BQU07WUFDYixXQUFXLEVBQUUsS0FBSztZQUNsQixZQUFZLEVBQUUsS0FBSztZQUNuQixRQUFRLEVBQUUsVUFBVTtZQUNwQixNQUFNLEVBQUUsU0FBUztTQUNsQixDQUFDO1FBQ0YsZ0JBQVcsR0FBMkIsRUFBRSxDQUFDO1FBQ3pDLHdCQUFtQixHQUFHLG1CQUFtQixDQUFDO0tBWTNDO0lBVkMsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUM7UUFDekMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLEdBQUcsV0FBVyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDckQsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsRUFBRSxLQUFLLFNBQVMsRUFBRTtZQUMxQyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsR0FBRyxzQkFBc0IsQ0FBQztTQUNyRDtJQUNILENBQUM7SUFDRCxXQUFXLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFO1FBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDckMsQ0FBQzs7a0hBMUJVLHFCQUFxQjtzR0FBckIscUJBQXFCLCtMQWhDdEI7Ozs7Ozs7Ozs7OztHQVlUOzJGQW9CVSxxQkFBcUI7a0JBbENqQyxTQUFTOytCQUNFLHFCQUFxQixZQUNyQjs7Ozs7Ozs7Ozs7O0dBWVQsbUJBaUJnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLOzhCQUdqQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU07Z0JBQ0csYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgZ2V0Q29udHJhc3RpbmdDb2xvciB9IGZyb20gJ25neC1jb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNvbXBhY3QtY29sb3InLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwiY29tcGFjdC1jb2xvclwiPlxuICAgIDxjb2xvci1zd2F0Y2ggY2xhc3M9XCJzd2F0Y2hcIlxuICAgICAgW2NvbG9yXT1cImNvbG9yXCIgW3N0eWxlXT1cInN3YXRjaFN0eWxlXCJcbiAgICAgIFtmb2N1c1N0eWxlXT1cInN3YXRjaEZvY3VzXCJcbiAgICAgIChvbkNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIiAob25Ib3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+XG4gICAgICA8ZGl2IGNsYXNzPVwiY29tcGFjdC1kb3RcIlxuICAgICAgICBbY2xhc3MuYWN0aXZlXT1cImFjdGl2ZVwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImdldENvbnRyYXN0aW5nQ29sb3IoY29sb3IpXCJcbiAgICAgID48L2Rpdj5cbiAgICA8L2NvbG9yLXN3YXRjaD5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLmNvbXBhY3QtZG90IHtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgdG9wOiA1cHg7XG4gICAgcmlnaHQ6IDVweDtcbiAgICBib3R0b206IDVweDtcbiAgICBsZWZ0OiA1cHg7XG4gICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cbiAgLmNvbXBhY3QtZG90LmFjdGl2ZSB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIENvbXBhY3RDb2xvckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNvbG9yITogc3RyaW5nO1xuICBASW5wdXQoKSBhY3RpdmUhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgb25Td2F0Y2hIb3ZlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBzd2F0Y2hTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICB3aWR0aDogJzE1cHgnLFxuICAgIGhlaWdodDogJzE1cHgnLFxuICAgIGZsb2F0OiAnbGVmdCcsXG4gICAgbWFyZ2luUmlnaHQ6ICc1cHgnLFxuICAgIG1hcmdpbkJvdHRvbTogJzVweCcsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgY3Vyc29yOiAncG9pbnRlcicsXG4gIH07XG4gIHN3YXRjaEZvY3VzOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge307XG4gIGdldENvbnRyYXN0aW5nQ29sb3IgPSBnZXRDb250cmFzdGluZ0NvbG9yO1xuXG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuc3dhdGNoU3R5bGUuYmFja2dyb3VuZCA9IHRoaXMuY29sb3I7XG4gICAgdGhpcy5zd2F0Y2hGb2N1cy5ib3hTaGFkb3cgPSBgMCAwIDRweCAke3RoaXMuY29sb3J9YDtcbiAgICBpZiAodGhpcy5jb2xvci50b0xvd2VyQ2FzZSgpID09PSAnI2ZmZmZmZicpIHtcbiAgICAgIHRoaXMuc3dhdGNoU3R5bGUuYm94U2hhZG93ID0gJ2luc2V0IDAgMCAwIDFweCAjZGRkJztcbiAgICB9XG4gIH1cbiAgaGFuZGxlQ2xpY2soeyBoZXgsICRldmVudCB9KSB7XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoeyBoZXgsICRldmVudCB9KTtcbiAgfVxufVxuIl19