ngx-color 7.0.1 → 7.3.0

package/chrome/package.json

@@ -6,15 +6,27 @@
     "url": "git+https://github.com/scttcper/ngx-color.git"
   },
   "license": "MIT",
-  "main": "bundles/ngx-color-chrome.umd.js",
-  "module": "fesm2015/ngx-color-chrome.js",
-  "es2015": "fesm2015/ngx-color-chrome.js",
-  "esm2015": "esm2015/ngx-color-chrome.js",
-  "fesm2015": "fesm2015/ngx-color-chrome.js",
+  "module": "fesm2015/ngx-color-chrome.mjs",
+  "es2020": "fesm2020/ngx-color-chrome.mjs",
+  "esm2020": "esm2020/ngx-color-chrome.mjs",
+  "fesm2020": "fesm2020/ngx-color-chrome.mjs",
+  "fesm2015": "fesm2015/ngx-color-chrome.mjs",
   "typings": "ngx-color-chrome.d.ts",
-  "metadata": "ngx-color-chrome.metadata.json",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./ngx-color-chrome.d.ts",
+      "esm2020": "./esm2020/ngx-color-chrome.mjs",
+      "es2020": "./fesm2020/ngx-color-chrome.mjs",
+      "es2015": "./fesm2015/ngx-color-chrome.mjs",
+      "node": "./fesm2015/ngx-color-chrome.mjs",
+      "default": "./fesm2020/ngx-color-chrome.mjs"
+    }
+  },
   "sideEffects": false,
   "dependencies": {
-    "tslib": "^2.1.0"
+    "tslib": "^2.3.0"
   }
 }

package/chrome/public_api.d.ts

@@ -0,0 +1,2 @@
+export { ChromeFieldsComponent } from './chrome-fields.component';
+export { ChromeComponent, ColorChromeModule } from './chrome.component';

package/circle/circle-swatch.component.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter, OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class CircleSwatchComponent implements OnChanges {
     color: string;
     circleSize: number;
@@ -13,4 +14,6 @@ export declare class CircleSwatchComponent implements OnChanges {
         hex: any;
         $event: any;
     }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CircleSwatchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CircleSwatchComponent, "color-circle-swatch", never, { "color": "color"; "circleSize": "circleSize"; "circleSpacing": "circleSpacing"; "focus": "focus"; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never>;
 }

package/circle/circle.component.d.ts

@@ -1,4 +1,8 @@
 import { ColorWrap } from 'ngx-color';
+import * as i0 from "@angular/core";
+import * as i1 from "./circle-swatch.component";
+import * as i2 from "@angular/common";
+import * as i3 from "ngx-color";
 export declare class CircleComponent extends ColorWrap {
     /** Pixel value for picker width */
     width: string | number;
@@ -18,6 +22,11 @@ export declare class CircleComponent extends ColorWrap {
         data: any;
         $event: any;
     }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CircleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CircleComponent, "color-circle", never, { "width": "width"; "colors": "colors"; "circleSize": "circleSize"; "circleSpacing": "circleSpacing"; }, {}, never, never>;
 }
 export declare class ColorCircleModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorCircleModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorCircleModule, [typeof CircleComponent, typeof i1.CircleSwatchComponent], [typeof i2.CommonModule, typeof i3.SwatchModule], [typeof CircleComponent, typeof i1.CircleSwatchComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ColorCircleModule>;
 }

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

@@ -0,0 +1,85 @@
+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: "13.0.0", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ 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: "13.0.0", 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>
+  `,
+                    styles: [
+                        `
+  .circle-swatch {
+    transform: scale(1);
+    transition: transform 100ms ease;
+  }
+  .circle-swatch:hover {
+    transform: scale(1.2);
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLXN3YXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvY2lyY2xlL2NpcmNsZS1zd2F0Y2guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOzs7QUE4QnZCLE1BQU0sT0FBTyxxQkFBcUI7SUE1QmxDO1FBOEJXLGVBQVUsR0FBRyxFQUFFLENBQUM7UUFDaEIsa0JBQWEsR0FBRyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFHLEtBQUssQ0FBQztRQUNiLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsRCxlQUFVLEdBQTJCLEVBQUUsQ0FBQztRQUN4QyxnQkFBVyxHQUEyQjtZQUNwQyxZQUFZLEVBQUUsS0FBSztZQUNuQixVQUFVLEVBQUUsYUFBYTtZQUN6QixVQUFVLEVBQUUsMEJBQTBCO1NBQ3ZDLENBQUM7S0FZSDtJQVZDLFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsR0FBRyxlQUFlLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxNQUFNLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUNsRixJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsR0FBRyxlQUFnQixJQUFJLENBQUMsVUFBVSxHQUFHLENBQUUsTUFBTyxJQUFJLENBQUMsS0FBTSxhQUFjLElBQUksQ0FBQyxLQUFNLEVBQUUsQ0FBQztRQUM5RyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZCxJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsR0FBRyxtQkFBb0IsSUFBSSxDQUFDLEtBQU0sYUFBYyxJQUFJLENBQUMsS0FBTSxFQUFFLENBQUM7U0FDeEY7SUFDSCxDQUFDO0lBQ0QsV0FBVyxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRTtRQUN6QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7O2tIQXZCVSxxQkFBcUI7c0dBQXJCLHFCQUFxQix1UEExQnRCOzs7Ozs7Ozs7OztHQVdUOzJGQWVVLHFCQUFxQjtrQkE1QmpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHFCQUFxQjtvQkFDL0IsUUFBUSxFQUFFOzs7Ozs7Ozs7OztHQVdUO29CQUNELE1BQU0sRUFBRTt3QkFDTjs7Ozs7Ozs7R0FRRDtxQkFDQTtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsbUJBQW1CLEVBQUUsS0FBSztpQkFDM0I7OEJBRVUsS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaXJjbGUtc3dhdGNoJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImNpcmNsZS1zd2F0Y2hcIlxuICAgIFtzdHlsZS53aWR0aC5weF09XCJjaXJjbGVTaXplXCIgW3N0eWxlLmhlaWdodC5weF09XCJjaXJjbGVTaXplXCJcbiAgICBbc3R5bGUubWFyZ2luLXJpZ2h0LnB4XT1cImNpcmNsZVNwYWNpbmdcIiBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCJjaXJjbGVTcGFjaW5nXCJcbiAgICA+XG4gICAgPGNvbG9yLXN3YXRjaFxuICAgICAgW2NvbG9yXT1cImNvbG9yXCIgW3N0eWxlXT1cInN3YXRjaFN0eWxlXCIgW2ZvY3VzXT1cImZvY3VzXCIgW2ZvY3VzU3R5bGVdPVwiZm9jdXNTdHlsZVwiXG4gICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCIgKG9uSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIj5cbiAgICA8L2NvbG9yLXN3YXRjaD5cbiAgICA8ZGl2IGNsYXNzPVwiY2xlYXJcIj48L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLmNpcmNsZS1zd2F0Y2gge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDEwMG1zIGVhc2U7XG4gIH1cbiAgLmNpcmNsZS1zd2F0Y2g6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMS4yKTtcbiAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIENpcmNsZVN3YXRjaENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGNvbG9yITogc3RyaW5nO1xuICBASW5wdXQoKSBjaXJjbGVTaXplID0gMjg7XG4gIEBJbnB1dCgpIGNpcmNsZVNwYWNpbmcgPSAxNDtcbiAgQElucHV0KCkgZm9jdXMgPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpIG9uU3dhdGNoSG92ZXIgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgZm9jdXNTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHt9O1xuICBzd2F0Y2hTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgIGJhY2tncm91bmQ6ICd0cmFuc3BhcmVudCcsXG4gICAgdHJhbnNpdGlvbjogJzEwMG1zIGJveC1zaGFkb3cgZWFzZSAwcycsXG4gIH07XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5zd2F0Y2hTdHlsZS5ib3hTaGFkb3cgPSBgaW5zZXQgMCAwIDAgJHt0aGlzLmNpcmNsZVNpemUgLyAyfXB4ICR7dGhpcy5jb2xvcn1gO1xuICAgIHRoaXMuZm9jdXNTdHlsZS5ib3hTaGFkb3cgPSBgaW5zZXQgMCAwIDAgJHsgdGhpcy5jaXJjbGVTaXplIC8gMiB9cHggJHsgdGhpcy5jb2xvciB9LCAwIDAgNXB4ICR7IHRoaXMuY29sb3IgfWA7XG4gICAgaWYgKHRoaXMuZm9jdXMpIHtcbiAgICAgIHRoaXMuZm9jdXNTdHlsZS5ib3hTaGFkb3cgPSBgaW5zZXQgMCAwIDAgM3B4ICR7IHRoaXMuY29sb3IgfSwgMCAwIDVweCAkeyB0aGlzLmNvbG9yIH1gO1xuICAgIH1cbiAgfVxuICBoYW5kbGVDbGljayh7IGhleCwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7IGhleCwgJGV2ZW50IH0pO1xuICB9XG59XG4iXX0=

package/circle/esm2020/circle.component.mjs

@@ -0,0 +1,148 @@
+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: "13.0.0", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", 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>
+  `,
+                    styles: [
+                        `
+      .circle-picker {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CircleComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => CircleComponent),
+                        },
+                    ]
+                }]
+        }], 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: "13.0.0", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
+ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, imports: [[CommonModule, SwatchModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CircleComponent, CircleSwatchComponent],
+                    exports: [CircleComponent, CircleSwatchComponent],
+                    imports: [CommonModule, SwatchModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9jaXJjbGUvY2lyY2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNoRyxPQUFPLEVBQ0wsS0FBSyxFQUNMLElBQUksRUFDSixRQUFRLEVBQ1IsS0FBSyxFQUNMLElBQUksRUFDSixVQUFVLEVBQ1YsVUFBVSxFQUNWLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULFVBQVUsRUFDVixJQUFJLEVBQ0osTUFBTSxFQUNOLElBQUksRUFDSixNQUFNLEVBQ04sR0FBRyxFQUNILElBQUksRUFDSixNQUFNLEdBQ1AsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFNUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUE0Q25ELE1BQU0sT0FBTyxlQUFnQixTQUFRLFNBQVM7SUE4QjVDO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUE5QlYsbUNBQW1DO1FBQzFCLFVBQUssR0FBb0IsR0FBRyxDQUFDO1FBQ3RDLCtCQUErQjtRQUUvQixXQUFNLEdBQWE7WUFDakIsR0FBRyxDQUFDLEtBQUssQ0FBQztZQUNWLElBQUksQ0FBQyxLQUFLLENBQUM7WUFDWCxNQUFNLENBQUMsS0FBSyxDQUFDO1lBQ2IsVUFB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QjtrQkFMN0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUM7b0JBQ3RELE9BQU8sRUFBRSxDQUFDLGVBQWUsRUFBRSxxQkFBcUIsQ0FBQztvQkFDakQsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLFlBQVksQ0FBQztpQkFDdEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICBhbWJlcixcbiAgYmx1ZSxcbiAgYmx1ZUdyZXksXG4gIGJyb3duLFxuICBjeWFuLFxuICBkZWVwT3JhbmdlLFxuICBkZWVwUHVycGxlLFxuICBncmVlbixcbiAgaW5kaWdvLFxuICBsaWdodEJsdWUsXG4gIGxpZ2h0R3JlZW4sXG4gIGxpbWUsXG4gIG9yYW5nZSxcbiAgcGluayxcbiAgcHVycGxlLFxuICByZWQsXG4gIHRlYWwsXG4gIHllbGxvdyxcbn0gZnJvbSAnbWF0ZXJpYWwtY29sb3JzJztcbmltcG9ydCB7IFRpbnlDb2xvciB9IGZyb20gJ0BjdHJsL3Rpbnljb2xvcic7XG5cbmltcG9ydCB7IENvbG9yV3JhcCwgaXNWYWxpZEhleCwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IENpcmNsZVN3YXRjaENvbXBvbmVudCB9IGZyb20gJy4vY2lyY2xlLXN3YXRjaC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNpcmNsZScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjaXJjbGUtcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1yaWdodC5weF09XCItY2lyY2xlU3BhY2luZ1wiXG4gICAgICBbc3R5bGUubWFyZ2luLWJvdHRvbS5weF09XCItY2lyY2xlU3BhY2luZ1wiXG4gICAgPlxuICAgICAgPGNvbG9yLWNpcmNsZS1zd2F0Y2hcbiAgICAgICAgKm5nRm9yPVwibGV0IGNvbG9yIG9mIGNvbG9yc1wiXG4gICAgICAgIFtjaXJjbGVTaXplXT1cImNpcmNsZVNpemVcIlxuICAgICAgICBbY2lyY2xlU3BhY2luZ109XCJjaXJjbGVTcGFjaW5nXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW2ZvY3VzXT1cImlzQWN0aXZlKGNvbG9yKVwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUJsb2NrQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAob25Td2F0Y2hIb3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1jaXJjbGUtc3dhdGNoPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuY2lyY2xlLXBpY2tlciB7XG4gICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2lyY2xlQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2lyY2xlQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIENpcmNsZUNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAyNTI7XG4gIC8qKiBDb2xvciBzcXVhcmVzIHRvIGRpc3BsYXkgKi9cbiAgQElucHV0KClcbiAgY29sb3JzOiBzdHJpbmdbXSA9IFtcbiAgICByZWRbJzUwMCddLFxuICAgIHBpbmtbJzUwMCddLFxuICAgIHB1cnBsZVsnNTAwJ10sXG4gICAgZGVlcFB1cnBsZVsnNTAwJ10sXG4gICAgaW5kaWdvWyc1MDAnXSxcbiAgICBibHVlWyc1MDAnXSxcbiAgICBsaWdodEJsdWVbJzUwMCddLFxuICAgIGN5YW5bJzUwMCddLFxuICAgIHRlYWxbJzUwMCddLFxuICAgIGdyZWVuWyc1MDAnXSxcbiAgICBsaWdodEdyZWVuWyc1MDAnXSxcbiAgICBsaW1lWyc1MDAnXSxcbiAgICB5ZWxsb3dbJzUwMCddLFxuICAgIGFtYmVyWyc1MDAnXSxcbiAgICBvcmFuZ2VbJzUwMCddLFxuICAgIGRlZXBPcmFuZ2VbJzUwMCddLFxuICAgIGJyb3duWyc1MDAnXSxcbiAgICBibHVlR3JleVsnNTAwJ10sXG4gIF07XG4gIC8qKiBWYWx1ZSBmb3IgY2lyY2xlIHNpemUgKi9cbiAgQElucHV0KCkgY2lyY2xlU2l6ZSA9IDI4O1xuICAvKiogVmFsdWUgZm9yIHNwYWNpbmcgYmV0d2VlbiBjaXJjbGVzICovXG4gIEBJbnB1dCgpIGNpcmNsZVNwYWNpbmcgPSAxNDtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG4gIGlzQWN0aXZlKGNvbG9yOiBzdHJpbmcpIHtcbiAgICByZXR1cm4gbmV3IFRpbnlDb2xvcih0aGlzLmhleCkuZXF1YWxzKGNvbG9yKTtcbiAgfVxuICBoYW5kbGVCbG9ja0NoYW5nZSh7IGhleCwgJGV2ZW50IH06IHsgaGV4OiBzdHJpbmcsICRldmVudDogRXZlbnQgfSkge1xuICAgIGlmIChpc1ZhbGlkSGV4KGhleCkpIHtcbiAgICAgIHRoaXMuaGFuZGxlQ2hhbmdlKHsgaGV4LCBzb3VyY2U6ICdoZXgnIH0sICRldmVudCk7XG4gICAgfVxuICB9XG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0NpcmNsZUNvbXBvbmVudCwgQ2lyY2xlU3dhdGNoQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW0NpcmNsZUNvbXBvbmVudCwgQ2lyY2xlU3dhdGNoQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgU3dhdGNoTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JDaXJjbGVNb2R1bGUge31cbiJdfQ==

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

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

package/circle/esm2020/public_api.mjs

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

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

@@ -0,0 +1,237 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey } from 'material-colors';
+import { TinyColor } from '@ctrl/tinycolor';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+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: "13.0.0", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CircleSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ 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: "13.0.0", 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>
+  `,
+                    styles: [
+                        `
+  .circle-swatch {
+    transform: scale(1);
+    transition: transform 100ms ease;
+  }
+  .circle-swatch:hover {
+    transform: scale(1.2);
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }], focus: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+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: "13.0.0", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ type: i0.forwardRef(function () { return CircleSwatchComponent; }), selector: "color-circle-swatch", inputs: ["color", "circleSize", "circleSpacing", "focus"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: i0.forwardRef(function () { return i1$1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", 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>
+  `,
+                    styles: [
+                        `
+      .circle-picker {
+        display: flex;
+        flex-wrap: wrap;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CircleComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => CircleComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], circleSize: [{
+                type: Input
+            }], circleSpacing: [{
+                type: Input
+            }] } });
+class ColorCircleModule {
+}
+ColorCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
+ColorCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, imports: [[CommonModule, SwatchModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCircleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CircleComponent, CircleSwatchComponent],
+                    exports: [CircleComponent, CircleSwatchComponent],
+                    imports: [CommonModule, SwatchModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CircleComponent, CircleSwatchComponent, ColorCircleModule };
+//# sourceMappingURL=ngx-color-circle.mjs.map

package/circle/fesm2015/ngx-color-circle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-circle.mjs","sources":["../../../../src/lib/components/circle/circle-swatch.component.ts","../../../../src/lib/components/circle/circle.component.ts","../../../../src/lib/components/circle/ngx-color-circle.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n} from '@angular/core';\n\n@Component({\n  selector: 'color-circle-swatch',\n  template: `\n  <div class=\"circle-swatch\"\n    [style.width.px]=\"circleSize\" [style.height.px]=\"circleSize\"\n    [style.margin-right.px]=\"circleSpacing\" [style.margin-bottom.px]=\"circleSpacing\"\n    >\n    <color-swatch\n      [color]=\"color\" [style]=\"swatchStyle\" [focus]=\"focus\" [focusStyle]=\"focusStyle\"\n      (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\">\n    </color-swatch>\n    <div class=\"clear\"></div>\n  </div>\n  `,\n  styles: [\n    `\n  .circle-swatch {\n    transform: scale(1);\n    transition: transform 100ms ease;\n  }\n  .circle-swatch:hover {\n    transform: scale(1.2);\n  }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class CircleSwatchComponent implements OnChanges {\n  @Input() color!: string;\n  @Input() circleSize = 28;\n  @Input() circleSpacing = 14;\n  @Input() focus = false;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  focusStyle: Record<string, string> = {};\n  swatchStyle: Record<string, string> = {\n    borderRadius: '50%',\n    background: 'transparent',\n    transition: '100ms box-shadow ease 0s',\n  };\n\n  ngOnChanges() {\n    this.swatchStyle.boxShadow = `inset 0 0 0 ${this.circleSize / 2}px ${this.color}`;\n    this.focusStyle.boxShadow = `inset 0 0 0 ${ this.circleSize / 2 }px ${ this.color }, 0 0 5px ${ this.color }`;\n    if (this.focus) {\n      this.focusStyle.boxShadow = `inset 0 0 0 3px ${ this.color }, 0 0 5px ${ this.color }`;\n    }\n  }\n  handleClick({ hex, $event }) {\n    this.onClick.emit({ hex, $event });\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n  amber,\n  blue,\n  blueGrey,\n  brown,\n  cyan,\n  deepOrange,\n  deepPurple,\n  green,\n  indigo,\n  lightBlue,\n  lightGreen,\n  lime,\n  orange,\n  pink,\n  purple,\n  red,\n  teal,\n  yellow,\n} from 'material-colors';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nimport { ColorWrap, isValidHex, SwatchModule } from 'ngx-color';\nimport { CircleSwatchComponent } from './circle-swatch.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-circle',\n  template: `\n    <div\n      class=\"circle-picker {{ className }}\"\n      [style.width.px]=\"width\"\n      [style.margin-right.px]=\"-circleSpacing\"\n      [style.margin-bottom.px]=\"-circleSpacing\"\n    >\n      <color-circle-swatch\n        *ngFor=\"let color of colors\"\n        [circleSize]=\"circleSize\"\n        [circleSpacing]=\"circleSpacing\"\n        [color]=\"color\"\n        [focus]=\"isActive(color)\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onSwatchHover)=\"onSwatchHover.emit($event)\"\n      ></color-circle-swatch>\n    </div>\n  `,\n  styles: [\n    `\n      .circle-picker {\n        display: flex;\n        flex-wrap: wrap;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CircleComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => CircleComponent),\n    },\n  ]\n})\nexport class CircleComponent extends ColorWrap {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 252;\n  /** Color squares to display */\n  @Input()\n  colors: string[] = [\n    red['500'],\n    pink['500'],\n    purple['500'],\n    deepPurple['500'],\n    indigo['500'],\n    blue['500'],\n    lightBlue['500'],\n    cyan['500'],\n    teal['500'],\n    green['500'],\n    lightGreen['500'],\n    lime['500'],\n    yellow['500'],\n    amber['500'],\n    orange['500'],\n    deepOrange['500'],\n    brown['500'],\n    blueGrey['500'],\n  ];\n  /** Value for circle size */\n  @Input() circleSize = 28;\n  /** Value for spacing between circles */\n  @Input() circleSpacing = 14;\n\n  constructor() {\n    super();\n  }\n  isActive(color: string) {\n    return new TinyColor(this.hex).equals(color);\n  }\n  handleBlockChange({ hex, $event }: { hex: string, $event: Event }) {\n    if (isValidHex(hex)) {\n      this.handleChange({ hex, source: 'hex' }, $event);\n    }\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [CircleComponent, CircleSwatchComponent],\n  exports: [CircleComponent, CircleSwatchComponent],\n  imports: [CommonModule, SwatchModule],\n})\nexport class ColorCircleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}