ngx-color 8.0.2 → 9.0.0

package/esm2022/chrome/chrome.component.mjs

@@ -0,0 +1,187 @@
+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";
+class ChromeComponent extends ColorWrap {
+    /** Remove alpha slider and options from picker */
+    disableAlpha = false;
+    circle = {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
+        transform: 'translate(-6px, -8px)',
+    };
+    pointer = {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        transform: 'translate(-6px, -2px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+    };
+    activeBackground;
+    constructor() {
+        super();
+    }
+    afterValidChange() {
+        const alpha = this.disableAlpha ? 1 : this.rgb.a;
+        this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"], dependencies: [{ kind: "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 });
+}
+export { ChromeComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px #0000001a;z-index:2}.chrome-swatch{width:28px;height:28px;border-radius:15px;position:relative;overflow:hidden}.saturation{width:100%;padding-bottom:55%;position:relative;border-radius:2px 2px 0 0;overflow:hidden}.chrome-toggles{flex:1}.chrome-hue{height:10px;position:relative;margin-bottom:8px}.chrome-alpha{height:10px;position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
+                type: Input
+            }] } });
+class ColorChromeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, declarations: [ChromeComponent, ChromeFieldsComponent], imports: [CommonModule,
+            AlphaModule,
+            CheckboardModule,
+            EditableInputModule,
+            HueModule,
+            SaturationModule], exports: [ChromeComponent, ChromeFieldsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorChromeModule, imports: [CommonModule,
+            AlphaModule,
+            CheckboardModule,
+            EditableInputModule,
+            HueModule,
+            SaturationModule] });
+}
+export { ColorChromeModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hyb21lLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2hyb21lL2Nocm9tZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUFFLFdBQVcsRUFBRSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsbUJBQW1CLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3ZILE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBRW5ELE1Bc0hhLGVBQWdCLFNBQVEsU0FBUztJQUM1QyxrREFBa0Q7SUFDekMsWUFBWSxHQUFHLEtBQUssQ0FBQztJQUM5QixNQUFNLEdBQTJCO1FBQy9CLEtBQUssRUFBRSxNQUFNO1FBQ2IsTUFBTSxFQUFFLE1BQU07UUFDZCxZQUFZLEVBQUUsS0FBSztRQUNuQixTQUFTLEVBQUUsMENBQTBDO1FBQ3JELFNBQVMsRUFBRSx1QkFBdUI7S0FDbkMsQ0FBQztJQUNGLE9BQU8sR0FBMkI7UUFDaEMsS0FBSyxFQUFFLE1BQU07UUFDYixNQUFNLEVBQUUsTUFBTTtRQUNkLFlBQVksRUFBRSxLQUFLO1FBQ25CLFNBQVMsRUFBRSx1QkFBdUI7UUFDbEMsZUFBZSxFQUFFLG9CQUFvQjtRQUNyQyxTQUFTLEVBQUUsaUNBQWlDO0tBQzdDLENBQUM7SUFDRixnQkFBZ0IsQ0FBVTtJQUUxQjtRQUNFLEtBQUssRUFBRSxDQUFDO0lBQ1YsQ0FBQztJQUVELGdCQUFnQjtRQUNkLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDakQsSUFBSSxDQUFDLGdCQUFnQixHQUFHLFFBQVEsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssS0FBSyxHQUFHLENBQUM7SUFDeEYsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUNoQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDO3VHQTlCVSxlQUFlOzJGQUFmLGVBQWUsaUZBWmY7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztnQkFDOUMsS0FBSyxFQUFFLElBQUk7YUFDWjtZQUNEO2dCQUNFLE9BQU8sRUFBRSxTQUFTO2dCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQzthQUMvQztTQUNGLGlEQWxIUzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E0Q1QsK3FEQTBHK0IscUJBQXFCOztTQWxDMUMsZUFBZTsyRkFBZixlQUFlO2tCQXRIM0IsU0FBUzsrQkFDRSxjQUFjLFlBQ2Q7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNENULG1CQTBEZ0IsdUJBQXVCLENBQUMsTUFBTSx1QkFDMUIsS0FBSyxhQUNmO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLGdCQUFnQixDQUFDOzRCQUM5QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjt3QkFDRDs0QkFDRSxPQUFPLEVBQUUsU0FBUzs0QkFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsZ0JBQWdCLENBQUM7eUJBQy9DO3FCQUNGOzBFQUlRLFlBQVk7c0JBQXBCLEtBQUs7O0FBK0JSLE1BWWEsaUJBQWlCO3VHQUFqQixpQkFBaUI7d0dBQWpCLGlCQUFpQixpQkE3Q2pCLGVBQWUsRUFrQ00scUJBQXFCLGFBR25ELFlBQVk7WUFDWixXQUFXO1lBQ1gsZ0JBQWdCO1lBQ2hCLG1CQUFtQjtZQUNuQixTQUFTO1lBQ1QsZ0JBQWdCLGFBMUNQLGVBQWUsRUFtQ0MscUJBQXFCO3dHQVVyQyxpQkFBaUIsWUFSMUIsWUFBWTtZQUNaLFdBQVc7WUFDWCxnQkFBZ0I7WUFDaEIsbUJBQW1CO1lBQ25CLFNBQVM7WUFDVCxnQkFBZ0I7O1NBR1AsaUJBQWlCOzJGQUFqQixpQkFBaUI7a0JBWjdCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixDQUFDO29CQUN0RCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLENBQUM7b0JBQ2pELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7d0JBQ1gsZ0JBQWdCO3dCQUNoQixtQkFBbUI7d0JBQ25CLFNBQVM7d0JBQ1QsZ0JBQWdCO3FCQUNqQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQWxwaGFNb2R1bGUsIENoZWNrYm9hcmRNb2R1bGUsIENvbG9yV3JhcCwgRWRpdGFibGVJbnB1dE1vZHVsZSwgSHVlTW9kdWxlLCBTYXR1cmF0aW9uTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IENocm9tZUZpZWxkc0NvbXBvbmVudCB9IGZyb20gJy4vY2hyb21lLWZpZWxkcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNocm9tZScsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJjaHJvbWUtcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzYXR1cmF0aW9uXCI+XG4gICAgICA8Y29sb3Itc2F0dXJhdGlvblxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtoc3ZdPVwiaHN2XCJcbiAgICAgICAgW2NpcmNsZV09XCJjaXJjbGVcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1zYXR1cmF0aW9uPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtYm9keVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1jb250cm9sc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLWNvbG9yXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1zd2F0Y2hcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtYWN0aXZlXCJcbiAgICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwiYWN0aXZlQmFja2dyb3VuZFwiXG4gICAgICAgICAgICA+PC9kaXY+XG4gICAgICAgICAgICA8Y29sb3ItY2hlY2tib2FyZD48L2NvbG9yLWNoZWNrYm9hcmQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLXRvZ2dsZXNcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLWh1ZVwiPlxuICAgICAgICAgICAgPGNvbG9yLWh1ZVxuICAgICAgICAgICAgICBbcmFkaXVzXT1cIjJcIlxuICAgICAgICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgICAgICAgIFtwb2ludGVyXT1cInBvaW50ZXJcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICA+PC9jb2xvci1odWU+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1hbHBoYVwiICpuZ0lmPVwiIWRpc2FibGVBbHBoYVwiPlxuICAgICAgICAgICAgPGNvbG9yLWFscGhhXG4gICAgICAgICAgICAgIFtyYWRpdXNdPVwiMlwiIFtyZ2JdPVwicmdiXCIgW2hzbF09XCJoc2xcIlxuICAgICAgICAgICAgICBbcG9pbnRlcl09XCJwb2ludGVyXCIgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItYWxwaGE+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8Y29sb3ItY2hyb21lLWZpZWxkc1xuICAgICAgICBbcmdiXT1cInJnYlwiIFtoc2xdPVwiaHNsXCIgW2hleF09XCJoZXhcIlxuICAgICAgICBbZGlzYWJsZUFscGhhXT1cImRpc2FibGVBbHBoYVwiXG4gICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWNocm9tZS1maWVsZHM+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuY2hyb21lLXBpY2tlciB7XG4gICAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgYm94LXNoYWRvdzogMCAwIDJweCByZ2JhKDAsIDAsIDAsIDAuMyksIDAgNHB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMyk7XG4gICAgICAgIGJveC1zaXppbmc6IGluaXRpYWw7XG4gICAgICAgIHdpZHRoOiAyMjVweDtcbiAgICAgICAgZm9udC1mYW1pbHk6ICdNZW5sbyc7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWNvbnRyb2xzIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtY29sb3Ige1xuICAgICAgICB3aWR0aDogNDJweDtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtYm9keSB7XG4gICAgICAgIHBhZGRpbmc6IDE0cHggMTRweCAxMnB4O1xuICAgICAgfVxuICAgICAgLmNocm9tZS1hY3RpdmUge1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIHRvcDogMDtcbiAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICBsZWZ0OiAwO1xuICAgICAgICByaWdodDogMDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMjBweDtcbiAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgICAgICAgei1pbmRleDogMjtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtc3dhdGNoIHtcbiAgICAgICAgd2lkdGg6IDI4cHg7XG4gICAgICAgIGhlaWdodDogMjhweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMTVweDtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgfVxuICAgICAgLnNhdHVyYXRpb24ge1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgcGFkZGluZy1ib3R0b206IDU1JTtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBib3JkZXItcmFkaXVzOiAycHggMnB4IDAgMDtcbiAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtdG9nZ2xlcyB7XG4gICAgICAgIGZsZXg6IDE7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWh1ZSB7XG4gICAgICAgIGhlaWdodDogMTBweDtcbiAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICBtYXJnaW4tYm90dG9tOiA4cHg7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWFscGhhIHtcbiAgICAgICAgaGVpZ2h0OiAxMHB4O1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENocm9tZUNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENocm9tZUNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDaHJvbWVDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUmVtb3ZlIGFscGhhIHNsaWRlciBhbmQgb3B0aW9ucyBmcm9tIHBpY2tlciAqL1xuICBASW5wdXQoKSBkaXNhYmxlQWxwaGEgPSBmYWxzZTtcbiAgY2lyY2xlOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHdpZHRoOiAnMTJweCcsXG4gICAgaGVpZ2h0OiAnMTJweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNnB4JyxcbiAgICBib3hTaGFkb3c6ICdyZ2IoMjU1LCAyNTUsIDI1NSkgMHB4IDBweCAwcHggMXB4IGluc2V0JyxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTZweCwgLThweCknLFxuICB9O1xuICBwb2ludGVyOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHdpZHRoOiAnMTJweCcsXG4gICAgaGVpZ2h0OiAnMTJweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNnB4JyxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTZweCwgLTJweCknLFxuICAgIGJhY2tncm91bmRDb2xvcjogJ3JnYigyNDgsIDI0OCwgMjQ4KScsXG4gICAgYm94U2hhZG93OiAnMCAxcHggNHB4IDAgcmdiYSgwLCAwLCAwLCAwLjM3KScsXG4gIH07XG4gIGFjdGl2ZUJhY2tncm91bmQhOiBzdHJpbmc7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIGFmdGVyVmFsaWRDaGFuZ2UoKSB7XG4gICAgY29uc3QgYWxwaGEgPSB0aGlzLmRpc2FibGVBbHBoYSA/IDEgOiB0aGlzLnJnYi5hO1xuICAgIHRoaXMuYWN0aXZlQmFja2dyb3VuZCA9IGByZ2JhKCR7dGhpcy5yZ2Iucn0sICR7dGhpcy5yZ2IuZ30sICR7dGhpcy5yZ2IuYn0sICR7YWxwaGF9KWA7XG4gIH1cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIHRoaXMuaGFuZGxlQ2hhbmdlKGRhdGEsICRldmVudCk7XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbQ2hyb21lQ29tcG9uZW50LCBDaHJvbWVGaWVsZHNDb21wb25lbnRdLFxuICBleHBvcnRzOiBbQ2hyb21lQ29tcG9uZW50LCBDaHJvbWVGaWVsZHNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEFscGhhTW9kdWxlLFxuICAgIENoZWNrYm9hcmRNb2R1bGUsXG4gICAgRWRpdGFibGVJbnB1dE1vZHVsZSxcbiAgICBIdWVNb2R1bGUsXG4gICAgU2F0dXJhdGlvbk1vZHVsZSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JDaHJvbWVNb2R1bGUge31cbiJdfQ==

package/esm2022/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";
+class CircleSwatchComponent {
+    color;
+    circleSize = 28;
+    circleSpacing = 14;
+    focus = false;
+    onClick = new EventEmitter();
+    onSwatchHover = new EventEmitter();
+    focusStyle = {};
+    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 });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CircleSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 });
+}
+export { CircleSwatchComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLXN3YXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NpcmNsZS9jaXJjbGUtc3dhdGNoLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7O0FBRXZCLE1BNEJhLHFCQUFxQjtJQUN2QixLQUFLLENBQVU7SUFDZixVQUFVLEdBQUcsRUFBRSxDQUFDO0lBQ2hCLGFBQWEsR0FBRyxFQUFFLENBQUM7SUFDbkIsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNiLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQ2xDLGFBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQ2xELFVBQVUsR0FBMkIsRUFBRSxDQUFDO0lBQ3hDLFdBQVcsR0FBMkI7UUFDcEMsWUFBWSxFQUFFLEtBQUs7UUFDbkIsVUFBVSxFQUFFLGFBQWE7UUFDekIsVUFBVSxFQUFFLDBCQUEwQjtLQUN2QyxDQUFDO0lBRUYsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxHQUFHLGVBQWUsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLE1BQU0sSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2xGLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxHQUFHLGVBQWdCLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBRSxNQUFPLElBQUksQ0FBQyxLQUFNLGFBQWMsSUFBSSxDQUFDLEtBQU0sRUFBRSxDQUFDO1FBQzlHLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNkLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxHQUFHLG1CQUFvQixJQUFJLENBQUMsS0FBTSxhQUFjLElBQUksQ0FBQyxLQUFNLEVBQUUsQ0FBQztTQUN4RjtJQUNILENBQUM7SUFDRCxXQUFXLENBQUMsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFO1FBQ3pCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDckMsQ0FBQzt1R0F2QlUscUJBQXFCOzJGQUFyQixxQkFBcUIsdVBBMUJ0Qjs7Ozs7Ozs7Ozs7R0FXVDs7U0FlVSxxQkFBcUI7MkZBQXJCLHFCQUFxQjtrQkE1QmpDLFNBQVM7K0JBQ0UscUJBQXFCLFlBQ3JCOzs7Ozs7Ozs7OztHQVdULG1CQVlnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLOzhCQUdqQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNpcmNsZS1zd2F0Y2gnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwiY2lyY2xlLXN3YXRjaFwiXG4gICAgW3N0eWxlLndpZHRoLnB4XT1cImNpcmNsZVNpemVcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImNpcmNsZVNpemVcIlxuICAgIFtzdHlsZS5tYXJnaW4tcmlnaHQucHhdPVwiY2lyY2xlU3BhY2luZ1wiIFtzdHlsZS5tYXJnaW4tYm90dG9tLnB4XT1cImNpcmNsZVNwYWNpbmdcIlxuICAgID5cbiAgICA8Y29sb3Itc3dhdGNoXG4gICAgICBbY29sb3JdPVwiY29sb3JcIiBbc3R5bGVdPVwic3dhdGNoU3R5bGVcIiBbZm9jdXNdPVwiZm9jdXNcIiBbZm9jdXNTdHlsZV09XCJmb2N1c1N0eWxlXCJcbiAgICAgIChvbkNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIiAob25Ib3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiPlxuICAgIDwvY29sb3Itc3dhdGNoPlxuICAgIDxkaXYgY2xhc3M9XCJjbGVhclwiPjwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAuY2lyY2xlLXN3YXRjaCB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMTAwbXMgZWFzZTtcbiAgfVxuICAuY2lyY2xlLXN3YXRjaDpob3ZlciB7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxLjIpO1xuICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgQ2lyY2xlU3dhdGNoQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgY29sb3IhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGNpcmNsZVNpemUgPSAyODtcbiAgQElucHV0KCkgY2lyY2xlU3BhY2luZyA9IDE0O1xuICBASW5wdXQoKSBmb2N1cyA9IGZhbHNlO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgb25Td2F0Y2hIb3ZlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBmb2N1c1N0eWxlOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge307XG4gIHN3YXRjaFN0eWxlOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgYmFja2dyb3VuZDogJ3RyYW5zcGFyZW50JyxcbiAgICB0cmFuc2l0aW9uOiAnMTAwbXMgYm94LXNoYWRvdyBlYXNlIDBzJyxcbiAgfTtcblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnN3YXRjaFN0eWxlLmJveFNoYWRvdyA9IGBpbnNldCAwIDAgMCAke3RoaXMuY2lyY2xlU2l6ZSAvIDJ9cHggJHt0aGlzLmNvbG9yfWA7XG4gICAgdGhpcy5mb2N1c1N0eWxlLmJveFNoYWRvdyA9IGBpbnNldCAwIDAgMCAkeyB0aGlzLmNpcmNsZVNpemUgLyAyIH1weCAkeyB0aGlzLmNvbG9yIH0sIDAgMCA1cHggJHsgdGhpcy5jb2xvciB9YDtcbiAgICBpZiAodGhpcy5mb2N1cykge1xuICAgICAgdGhpcy5mb2N1c1N0eWxlLmJveFNoYWRvdyA9IGBpbnNldCAwIDAgMCAzcHggJHsgdGhpcy5jb2xvciB9LCAwIDAgNXB4ICR7IHRoaXMuY29sb3IgfWA7XG4gICAgfVxuICB9XG4gIGhhbmRsZUNsaWNrKHsgaGV4LCAkZXZlbnQgfSkge1xuICAgIHRoaXMub25DbGljay5lbWl0KHsgaGV4LCAkZXZlbnQgfSk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/circle/circle.component.mjs

@@ -0,0 +1,136 @@
+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";
+class CircleComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 252;
+    /** Color squares to display */
+    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 */
+    circleSize = 28;
+    /** Value for spacing between circles */
+    circleSpacing = 14;
+    constructor() {
+        super();
+    }
+    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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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 });
+}
+export { CircleComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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
+            }] } });
+class ColorCircleModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorCircleModule, declarations: [CircleComponent, CircleSwatchComponent], imports: [CommonModule, SwatchModule], exports: [CircleComponent, CircleSwatchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorCircleModule, imports: [CommonModule, SwatchModule] });
+}
+export { ColorCircleModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorCircleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CircleComponent, CircleSwatchComponent],
+                    exports: [CircleComponent, CircleSwatchComponent],
+                    imports: [CommonModule, SwatchModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2lyY2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvY2lyY2xlL2NpcmNsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEcsT0FBTyxFQUNMLEtBQUssRUFDTCxJQUFJLEVBQ0osUUFBUSxFQUNSLEtBQUssRUFDTCxJQUFJLEVBQ0osVUFBVSxFQUNWLFVBQVUsRUFDVixLQUFLLEVBQ0wsTUFBTSxFQUNOLFNBQVMsRUFDVCxVQUFVLEVBQ1YsSUFBSSxFQUNKLE1BQU0sRUFDTixJQUFJLEVBQ0osTUFBTSxFQUNOLEdBQUcsRUFDSCxJQUFJLEVBQ0osTUFBTSxHQUNQLE1BQU0saUJBQWlCLENBQUM7QUFDekIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRTVDLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNoRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRW5ELE1BMENhLGVBQWdCLFNBQVEsU0FBUztJQUM1QyxtQ0FBbUM7SUFDMUIsS0FBSyxHQUFvQixHQUFHLENBQUM7SUFDdEMsK0JBQStCO0lBRS9CLE1BQU0sR0FBYTtRQUNqQixHQUFHLENBQUMsS0FBSyxDQUFDO1FBQ1YsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNYLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDYixVQUFVLENBQUMsS0FBSyxDQUFDO1FBQ2pCLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFD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LE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxZQUFZLENBQUM7aUJBQ3RDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgYW1iZXIsXG4gIGJsdWUsXG4gIGJsdWVHcmV5LFxuICBicm93bixcbiAgY3lhbixcbiAgZGVlcE9yYW5nZSxcbiAgZGVlcFB1cnBsZSxcbiAgZ3JlZW4sXG4gIGluZGlnbyxcbiAgbGlnaHRCbHVlLFxuICBsaWdodEdyZWVuLFxuICBsaW1lLFxuICBvcmFuZ2UsXG4gIHBpbmssXG4gIHB1cnBsZSxcbiAgcmVkLFxuICB0ZWFsLFxuICB5ZWxsb3csXG59IGZyb20gJ21hdGVyaWFsLWNvbG9ycyc7XG5pbXBvcnQgeyBUaW55Q29sb3IgfSBmcm9tICdAY3RybC90aW55Y29sb3InO1xuXG5pbXBvcnQgeyBDb2xvcldyYXAsIGlzVmFsaWRIZXgsIFN3YXRjaE1vZHVsZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBDaXJjbGVTd2F0Y2hDb21wb25lbnQgfSBmcm9tICcuL2NpcmNsZS1zd2F0Y2guY29tcG9uZW50JztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaXJjbGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY2lyY2xlLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIlxuICAgICAgW3N0eWxlLndpZHRoLnB4XT1cIndpZHRoXCJcbiAgICAgIFtzdHlsZS5tYXJnaW4tcmlnaHQucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgICAgW3N0eWxlLm1hcmdpbi1ib3R0b20ucHhdPVwiLWNpcmNsZVNwYWNpbmdcIlxuICAgID5cbiAgICAgIDxjb2xvci1jaXJjbGUtc3dhdGNoXG4gICAgICAgICpuZ0Zvcj1cImxldCBjb2xvciBvZiBjb2xvcnNcIlxuICAgICAgICBbY2lyY2xlU2l6ZV09XCJjaXJjbGVTaXplXCJcbiAgICAgICAgW2NpcmNsZVNwYWNpbmddPVwiY2lyY2xlU3BhY2luZ1wiXG4gICAgICAgIFtjb2xvcl09XCJjb2xvclwiXG4gICAgICAgIFtmb2N1c109XCJpc0FjdGl2ZShjb2xvcilcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVCbG9ja0NoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgKG9uU3dhdGNoSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgPjwvY29sb3ItY2lyY2xlLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLmNpcmNsZS1waWNrZXIge1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBmbGV4LXdyYXA6IHdyYXA7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENpcmNsZUNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENpcmNsZUNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDaXJjbGVDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMjUyO1xuICAvKiogQ29sb3Igc3F1YXJlcyB0byBkaXNwbGF5ICovXG4gIEBJbnB1dCgpXG4gIGNvbG9yczogc3RyaW5nW10gPSBbXG4gICAgcmVkWyc1MDAnXSxcbiAgICBwaW5rWyc1MDAnXSxcbiAgICBwdXJwbGVbJzUwMCddLFxuICAgIGRlZXBQdXJwbGVbJzUwMCddLFxuICAgIGluZGlnb1snNTAwJ10sXG4gICAgYmx1ZVsnNTAwJ10sXG4gICAgbGlnaHRCbHVlWyc1MDAnXSxcbiAgICBjeWFuWyc1MDAnXSxcbiAgICB0ZWFsWyc1MDAnXSxcbiAgICBncmVlblsnNTAwJ10sXG4gICAgbGlnaHRHcmVlblsnNTAwJ10sXG4gICAgbGltZVsnNTAwJ10sXG4gICAgeWVsbG93Wyc1MDAnXSxcbiAgICBhbWJlclsnNTAwJ10sXG4gICAgb3JhbmdlWyc1MDAnXSxcbiAgICBkZWVwT3JhbmdlWyc1MDAnXSxcbiAgICBicm93blsnNTAwJ10sXG4gICAgYmx1ZUdyZXlbJzUwMCddLFxuICBdO1xuICAvKiogVmFsdWUgZm9yIGNpcmNsZSBzaXplICovXG4gIEBJbnB1dCgpIGNpcmNsZVNpemUgPSAyODtcbiAgLyoqIFZhbHVlIGZvciBzcGFjaW5nIGJldHdlZW4gY2lyY2xlcyAqL1xuICBASW5wdXQoKSBjaXJjbGVTcGFjaW5nID0gMTQ7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuICBpc0FjdGl2ZShjb2xvcjogc3RyaW5nKSB7XG4gICAgcmV0dXJuIG5ldyBUaW55Q29sb3IodGhpcy5oZXgpLmVxdWFscyhjb2xvcik7XG4gIH1cbiAgaGFuZGxlQmxvY2tDaGFuZ2UoeyBoZXgsICRldmVudCB9OiB7IGhleDogc3RyaW5nLCAkZXZlbnQ6IEV2ZW50IH0pIHtcbiAgICBpZiAoaXNWYWxpZEhleChoZXgpKSB7XG4gICAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGhleCwgc291cmNlOiAnaGV4JyB9LCAkZXZlbnQpO1xuICAgIH1cbiAgfVxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtDaXJjbGVDb21wb25lbnQsIENpcmNsZVN3YXRjaENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yQ2lyY2xlTW9kdWxlIHt9XG4iXX0=

package/esm2022/color-wrap.component.mjs

@@ -0,0 +1,173 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, forwardRef, Input, isDevMode, NgModule, Output, } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { debounceTime, tap } from 'rxjs/operators';
+import { simpleCheckForValidColor, toState } from './helpers/color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+export var ColorMode;
+(function (ColorMode) {
+    ColorMode["HEX"] = "hex";
+    ColorMode["HSL"] = "hsl";
+    ColorMode["HSV"] = "hsv";
+    ColorMode["RGB"] = "rgb";
+})(ColorMode || (ColorMode = {}));
+class ColorWrap {
+    className;
+    /**
+     * Descriptors the return color format if the component is used with two-way binding
+     */
+    mode = ColorMode.HEX;
+    color = {
+        h: 250,
+        s: 0.5,
+        l: 0.2,
+        a: 1,
+    };
+    colorChange = new EventEmitter();
+    onChange = new EventEmitter();
+    onChangeComplete = new EventEmitter();
+    onSwatchHover = new EventEmitter();
+    oldHue;
+    hsl;
+    hsv;
+    rgb;
+    hex;
+    source;
+    currentColor;
+    changes;
+    disableAlpha;
+    _onChangeCompleteSubscription = new Subscription();
+    _onSwatchHoverSubscription = new Subscription();
+    ngOnInit() {
+        this.changes = this.onChange
+            .pipe(debounceTime(100), tap(event => {
+            this.onChangeComplete.emit(event);
+            switch (this.mode) {
+                case ColorMode.HEX:
+                    this.colorChange.emit(event.color.hex);
+                    break;
+                case ColorMode.HSL:
+                    this.colorChange.emit(event.color.hsl);
+                    break;
+                case ColorMode.HSV:
+                    this.colorChange.emit(event.color.hsv);
+                    break;
+                case ColorMode.RGB:
+                    this.colorChange.emit(event.color.rgb);
+                    break;
+                default:
+                    const msg = `The mode '${this.mode}' is not supported`;
+                    if (isDevMode()) {
+                        throw new Error(msg);
+                    }
+                    else {
+                        console.warn(msg);
+                    }
+                    break;
+            }
+        }))
+            .subscribe();
+        this.setState(toState(this.color, 0));
+        this.currentColor = this.hex;
+    }
+    ngOnChanges() {
+        this.setState(toState(this.color, this.oldHue));
+    }
+    ngOnDestroy() {
+        this.changes?.unsubscribe();
+        this._onChangeCompleteSubscription?.unsubscribe();
+        this._onSwatchHoverSubscription?.unsubscribe();
+    }
+    setState(data) {
+        this.oldHue = data.oldHue;
+        this.hsl = data.hsl;
+        this.hsv = data.hsv;
+        this.rgb = data.rgb;
+        this.hex = data.hex;
+        this.source = data.source;
+        this.afterValidChange();
+    }
+    handleChange(data, $event) {
+        const isValidColor = simpleCheckForValidColor(data);
+        if (isValidColor) {
+            const color = toState(data, data.h || this.oldHue, this.disableAlpha);
+            this.setState(color);
+            this.onChange.emit({ color, $event });
+            this.afterValidChange();
+        }
+    }
+    /** hook for components after a complete change */
+    afterValidChange() { }
+    handleSwatchHover(data, $event) {
+        const isValidColor = simpleCheckForValidColor(data);
+        if (isValidColor) {
+            const color = toState(data, data.h || this.oldHue);
+            this.setState(color);
+            this.onSwatchHover.emit({ color, $event });
+        }
+    }
+    registerOnChange(fn) {
+        this._onChangeCompleteSubscription.add(this.onChangeComplete.pipe(tap(event => fn(event.color.hex))).subscribe());
+    }
+    registerOnTouched(fn) {
+        this._onSwatchHoverSubscription.add(this.onSwatchHover.pipe(tap(() => fn())).subscribe());
+    }
+    setDisabledState(isDisabled) { }
+    writeValue(hex) {
+        this.color = hex;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ColorWrap, selector: "color-wrap", inputs: { className: "className", mode: "mode", color: "color" }, outputs: { colorChange: "colorChange", onChange: "onChange", onChangeComplete: "onChangeComplete", onSwatchHover: "onSwatchHover" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorWrap),
+                multi: true,
+            }
+        ], usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
+}
+export { ColorWrap };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrap, decorators: [{
+            type: Component,
+            args: [{
+                    // create seletor base for test override property
+                    selector: 'color-wrap',
+                    template: ``,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorWrap),
+                            multi: true,
+                        }
+                    ]
+                }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], colorChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], onChangeComplete: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+class ColorWrapModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, declarations: [ColorWrap], imports: [CommonModule], exports: [ColorWrap] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, imports: [CommonModule] });
+}
+export { ColorWrapModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorWrapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ColorWrap],
+                    exports: [ColorWrap],
+                    imports: [CommonModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itd3JhcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbG9yLXdyYXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUNMLFNBQVMsRUFDVCxRQUFRLEVBSVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEMsT0FBTyxFQUFFLFlBQVksRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFcEUsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQU96RSxNQUFNLENBQU4sSUFBWSxTQUtYO0FBTEQsV0FBWSxTQUFTO0lBQ25CLHdCQUFXLENBQUE7SUFDWCx3QkFBVyxDQUFBO0lBQ1gsd0JBQVcsQ0FBQTtJQUNYLHdCQUFXLENBQUE7QUFDYixDQUFDLEVBTFcsU0FBUyxLQUFULFNBQVMsUUFLcEI7QUFFRCxNQVlhLFNBQVM7SUFDWCxTQUFTLENBQVU7SUFFNUI7O09BRUc7SUFDTSxJQUFJLEdBQWMsU0FBUyxDQUFDLEdBQUcsQ0FBQztJQUVoQyxLQUFLLEdBQWdDO1FBQzVDLENBQUMsRUFBRSxHQUFHO1FBQ04sQ0FBQyxFQUFFLEdBQUc7UUFDTixDQUFDLEVBQUUsR0FBRztRQUNOLENBQUMsRUFBRSxDQUFDO0tBQ0wsQ0FBQztJQUNRLFdBQVcsR0FBRyxJQUFJLFlBQVksRUFBK0IsQ0FBQztJQUM5RCxRQUFRLEdBQUcsSUFBSSxZQUFZLEVBQWMsQ0FBQztJQUMxQyxnQkFBZ0IsR0FBRyxJQUFJLFlB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RyxhQUFhO3NCQUF0QixNQUFNOztBQTBHVCxNQUthLGVBQWU7dUdBQWYsZUFBZTt3R0FBZixlQUFlLGlCQWhJZixTQUFTLGFBOEhWLFlBQVksYUE5SFgsU0FBUzt3R0FnSVQsZUFBZSxZQUZoQixZQUFZOztTQUVYLGVBQWU7MkZBQWYsZUFBZTtrQkFMM0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxTQUFTLENBQUM7b0JBQ3pCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQztvQkFDcEIsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgSW5wdXQsXG4gIGlzRGV2TW9kZSxcbiAgTmdNb2R1bGUsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IHNpbXBsZUNoZWNrRm9yVmFsaWRDb2xvciwgdG9TdGF0ZSB9IGZyb20gJy4vaGVscGVycy9jb2xvcic7XG5pbXBvcnQgeyBDb2xvciwgSFNMQSwgSFNWQSwgUkdCQSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuZXhwb3J0IGludGVyZmFjZSBDb2xvckV2ZW50IHtcbiAgJGV2ZW50OiBFdmVudDtcbiAgY29sb3I6IENvbG9yO1xufVxuXG5leHBvcnQgZW51bSBDb2xvck1vZGUge1xuICBIRVggPSAnaGV4JyxcbiAgSFNMID0gJ2hzbCcsXG4gIEhTViA9ICdoc3YnLFxuICBSR0IgPSAncmdiJ1xufVxuXG5AQ29tcG9uZW50KHtcbiAgLy8gY3JlYXRlIHNlbGV0b3IgYmFzZSBmb3IgdGVzdCBvdmVycmlkZSBwcm9wZXJ0eVxuICBzZWxlY3RvcjogJ2NvbG9yLXdyYXAnLFxuICB0ZW1wbGF0ZTogYGAsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ29sb3JXcmFwKSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDb2xvcldyYXAgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogRGVzY3JpcHRvcnMgdGhlIHJldHVybiBjb2xvciBmb3JtYXQgaWYgdGhlIGNvbXBvbmVudCBpcyB1c2VkIHdpdGggdHdvLXdheSBiaW5kaW5nXG4gICAqL1xuICBASW5wdXQoKSBtb2RlOiBDb2xvck1vZGUgPSBDb2xvck1vZGUuSEVYO1xuXG4gIEBJbnB1dCgpIGNvbG9yOiBIU0xBIHwgSFNWQSB8IFJHQkEgfCBzdHJpbmcgPSB7XG4gICAgaDogMjUwLFxuICAgIHM6IDAuNSxcbiAgICBsOiAwLjIsXG4gICAgYTogMSxcbiAgfTtcbiAgQE91dHB1dCgpIGNvbG9yQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxIU0xBIHwgSFNWQSB8IFJHQkEgfCBzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Q29sb3JFdmVudD4oKTtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlQ29tcGxldGUgPSBuZXcgRXZlbnRFbWl0dGVyPENvbG9yRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxDb2xvckV2ZW50PigpO1xuICBvbGRIdWUhOiBudW1iZXI7XG4gIGhzbCE6IEhTTEE7XG4gIGhzdiE6IEhTVkE7XG4gIHJnYiE6IFJHQkE7XG4gIGhleCE6IHN0cmluZztcbiAgc291cmNlITogc3RyaW5nO1xuICBjdXJyZW50Q29sb3IhOiBzdHJpbmc7XG4gIGNoYW5nZXM/OiBTdWJzY3JpcHRpb247XG4gIGRpc2FibGVBbHBoYT86IGJvb2xlYW47XG5cbiAgcHJpdmF0ZSBfb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcbiAgcHJpdmF0ZSBfb25Td2F0Y2hIb3ZlclN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNoYW5nZXMgPSB0aGlzLm9uQ2hhbmdlXG4gICAgICAucGlwZShcbiAgICAgICAgZGVib3VuY2VUaW1lKDEwMCksXG4gICAgICAgIHRhcChldmVudCA9PiB7XG4gICAgICAgICAgdGhpcy5vbkNoYW5nZUNvbXBsZXRlLmVtaXQoZXZlbnQpO1xuICAgICAgICAgIHN3aXRjaCAodGhpcy5tb2RlKSB7XG4gICAgICAgICAgICBjYXNlIENvbG9yTW9kZS5IRVg6XG4gICAgICAgICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChldmVudC5jb2xvci5oZXgpO1xuICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgQ29sb3JNb2RlLkhTTDpcbiAgICAgICAgICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KGV2ZW50LmNvbG9yLmhzbCk7XG4gICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgY2FzZSBDb2xvck1vZGUuSFNWOlxuICAgICAgICAgICAgICB0aGlzLmNvbG9yQ2hhbmdlLmVtaXQoZXZlbnQuY29sb3IuaHN2KTtcbiAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBjYXNlIENvbG9yTW9kZS5SR0I6XG4gICAgICAgICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChldmVudC5jb2xvci5yZ2IpO1xuICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgIGNvbnN0IG1zZyA9IGBUaGUgbW9kZSAnJHt0aGlzLm1vZGV9JyBpcyBub3Qgc3VwcG9ydGVkYDtcbiAgICAgICAgICAgICAgaWYgKGlzRGV2TW9kZSgpKSB7XG4gICAgICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKG1zZyk7XG4gICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgY29uc29sZS53YXJuKG1zZyk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgfVxuICAgICAgICB9KVxuICAgICAgKVxuICAgICAgLnN1YnNjcmliZSgpO1xuICAgIHRoaXMuc2V0U3RhdGUodG9TdGF0ZSh0aGlzLmNvbG9yLCAwKSk7XG4gICAgdGhpcy5jdXJyZW50Q29sb3IgPSB0aGlzLmhleDtcbiAgfVxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnNldFN0YXRlKHRvU3RhdGUodGhpcy5jb2xvciwgdGhpcy5vbGRIdWUpKTtcbiAgfVxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmNoYW5nZXM/LnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5fb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbj8udW5zdWJzY3JpYmUoKTtcbiAgICB0aGlzLl9vblN3YXRjaEhvdmVyU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICB9XG4gIHNldFN0YXRlKGRhdGEpIHtcbiAgICB0aGlzLm9sZEh1ZSA9IGRhdGEub2xkSHVlO1xuICAgIHRoaXMuaHNsID0gZGF0YS5oc2w7XG4gICAgdGhpcy5oc3YgPSBkYXRhLmhzdjtcbiAgICB0aGlzLnJnYiA9IGRhdGEucmdiO1xuICAgIHRoaXMuaGV4ID0gZGF0YS5oZXg7XG4gICAgdGhpcy5zb3VyY2UgPSBkYXRhLnNvdXJjZTtcbiAgICB0aGlzLmFmdGVyVmFsaWRDaGFuZ2UoKTtcbiAgfVxuICBoYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KSB7XG4gICAgY29uc3QgaXNWYWxpZENvbG9yID0gc2ltcGxlQ2hlY2tGb3JWYWxpZENvbG9yKGRhdGEpO1xuICAgIGlmIChpc1ZhbGlkQ29sb3IpIHtcbiAgICAgIGNvbnN0IGNvbG9yID0gdG9TdGF0ZShkYXRhLCBkYXRhLmggfHwgdGhpcy5vbGRIdWUsIHRoaXMuZGlzYWJsZUFscGhhKTtcbiAgICAgIHRoaXMuc2V0U3RhdGUoY29sb3IpO1xuICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHsgY29sb3IsICRldmVudCB9KTtcbiAgICAgIHRoaXMuYWZ0ZXJWYWxpZENoYW5nZSgpO1xuICAgIH1cbiAgfVxuICAvKiogaG9vayBmb3IgY29tcG9uZW50cyBhZnRlciBhIGNvbXBsZXRlIGNoYW5nZSAqL1xuICBhZnRlclZhbGlkQ2hhbmdlKCkge31cblxuICBoYW5kbGVTd2F0Y2hIb3ZlcihkYXRhLCAkZXZlbnQpIHtcbiAgICBjb25zdCBpc1ZhbGlkQ29sb3IgPSBzaW1wbGVDaGVja0ZvclZhbGlkQ29sb3IoZGF0YSk7XG4gICAgaWYgKGlzVmFsaWRDb2xvcikge1xuICAgICAgY29uc3QgY29sb3IgPSB0b1N0YXRlKGRhdGEsIGRhdGEuaCB8fCB0aGlzLm9sZEh1ZSk7XG4gICAgICB0aGlzLnNldFN0YXRlKGNvbG9yKTtcbiAgICAgIHRoaXMub25Td2F0Y2hIb3Zlci5lbWl0KHsgY29sb3IsICRldmVudCB9KTtcbiAgICB9XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAoaGV4OiBzdHJpbmcpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLl9vbkNoYW5nZUNvbXBsZXRlU3Vic2NyaXB0aW9uLmFkZCh0aGlzLm9uQ2hhbmdlQ29tcGxldGUucGlwZShcbiAgICAgIHRhcChldmVudCA9PiBmbihldmVudC5jb2xvci5oZXgpKSxcbiAgICApLnN1YnNjcmliZSgpKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiAoKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5fb25Td2F0Y2hIb3ZlclN1YnNjcmlwdGlvbi5hZGQodGhpcy5vblN3YXRjaEhvdmVyLnBpcGUoXG4gICAgICB0YXAoKCkgPT4gZm4oKSksXG4gICAgKS5zdWJzY3JpYmUoKSk7XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHt9XG5cbiAgd3JpdGVWYWx1ZShoZXg6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuY29sb3IgPSBoZXg7XG4gIH1cblxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtDb2xvcldyYXBdLFxuICBleHBvcnRzOiBbQ29sb3JXcmFwXSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yV3JhcE1vZHVsZSB7fVxuIl19