ngx-color 8.0.3 → 9.0.0

package/esm2022/block/block.component.mjs

@@ -0,0 +1,160 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { CheckboardModule, ColorWrap, EditableInputModule, getContrastingColor, isValidHex, SwatchModule, } from 'ngx-color';
+import { BlockSwatchesComponent } from './block-swatches.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 BlockComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 170;
+    /** Color squares to display */
+    colors = [
+        '#D9E3F0',
+        '#F47373',
+        '#697689',
+        '#37D67A',
+        '#2CCCE4',
+        '#555555',
+        '#dce775',
+        '#ff8a65',
+        '#ba68c8',
+    ];
+    triangle = 'top';
+    input = {
+        width: '100%',
+        fontSize: '12px',
+        color: '#666',
+        border: '0px',
+        outline: 'none',
+        height: '22px',
+        boxShadow: 'inset 0 0 0 1px #ddd',
+        borderRadius: '4px',
+        padding: '0 7px',
+        boxSizing: 'border-box',
+    };
+    wrap = {
+        position: 'relative',
+        width: '100%',
+    };
+    disableAlpha = true;
+    constructor() {
+        super();
+    }
+    handleValueChange({ data, $event }) {
+        this.handleBlockChange({ hex: data, $event });
+    }
+    getContrastingColor(hex) {
+        return getContrastingColor(hex);
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            // this.hex = hex;
+            this.handleChange({
+                hex,
+                source: 'hex',
+            }, $event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: BlockComponent, selector: "color-block", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BlockComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => BlockComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+  <div class="block-card block-picker {{ className }}">
+    <div class="block-triangle" *ngIf="triangle !== 'hide'"
+      [style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
+    ></div>
+
+    <div class="block-head" [style.background]="hex">
+      <color-checkboard *ngIf="hex === 'transparent'"
+        borderRadius="6px 6px 0 0"
+      ></color-checkboard>
+      <div class="block-label" [style.color]="getContrastingColor(hex)">
+        {{ hex }}
+      </div>
+    </div>
+
+    <div class="block-body">
+      <color-block-swatches [colors]="colors"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-block-swatches>
+      <color-editable-input [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: input, wrap: wrap}"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, isInline: true, styles: [".block-card{background:#fff;border-radius:6px;box-shadow:0 1px #0000001a;position:relative}.block-head{align-items:center;border-radius:6px 6px 0 0;display:flex;height:110px;justify-content:center;position:relative}.block-body{padding:10px}.block-label{font-size:18px;position:relative}.block-triangle{border-style:solid;border-width:0 10px 10px 10px;height:0;left:50%;margin-left:-10px;position:absolute;top:-10px;width:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.EditableInputComponent; }), selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return BlockSwatchesComponent; }), selector: "color-block-swatches", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { BlockComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BlockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-block', template: `
+  <div class="block-card block-picker {{ className }}">
+    <div class="block-triangle" *ngIf="triangle !== 'hide'"
+      [style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
+    ></div>
+
+    <div class="block-head" [style.background]="hex">
+      <color-checkboard *ngIf="hex === 'transparent'"
+        borderRadius="6px 6px 0 0"
+      ></color-checkboard>
+      <div class="block-label" [style.color]="getContrastingColor(hex)">
+        {{ hex }}
+      </div>
+    </div>
+
+    <div class="block-body">
+      <color-block-swatches [colors]="colors"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-block-swatches>
+      <color-editable-input [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: input, wrap: wrap}"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BlockComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => BlockComponent),
+                        },
+                    ], styles: [".block-card{background:#fff;border-radius:6px;box-shadow:0 1px #0000001a;position:relative}.block-head{align-items:center;border-radius:6px 6px 0 0;display:flex;height:110px;justify-content:center;position:relative}.block-body{padding:10px}.block-label{font-size:18px;position:relative}.block-triangle{border-style:solid;border-width:0 10px 10px 10px;height:0;left:50%;margin-left:-10px;position:absolute;top:-10px;width:0}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], triangle: [{
+                type: Input
+            }] } });
+class ColorBlockModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorBlockModule, declarations: [BlockComponent, BlockSwatchesComponent], imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule], exports: [BlockComponent, BlockSwatchesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorBlockModule, imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule] });
+}
+export { ColorBlockModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorBlockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BlockComponent, BlockSwatchesComponent],
+                    exports: [BlockComponent, BlockSwatchesComponent],
+                    imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmxvY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9ibG9jay9ibG9jay5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUNMLGdCQUFnQixFQUNoQixTQUFTLEVBQ1QsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixVQUFVLEVBQ1YsWUFBWSxHQUNiLE1BQU0sV0FBVyxDQUFDO0FBQ25CLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBRW5ELE1BOEVhLGNBQWUsU0FBUSxTQUFTO0lBQzNDLG1DQUFtQztJQUMxQixLQUFLLEdBQW9CLEdBQUcsQ0FBQztJQUN0QywrQkFBK0I7SUFDdEIsTUFBTSxHQUFHO1FBQ2hCLFNBQVM7UUFDVCxTQUFTO1FBQ1QsU0FBUztRQUNULFNBQVM7UUFDVCxTQUFTO1FBQ1QsU0FBUztRQUNULFNBQVM7UUFDVCxTQUFTO1FBQ1QsU0FBUztLQUNWLENBQUM7SUFDTyxRQUFRLEdBQW1CLEtBQUssQ0FBQztJQUMxQyxLQUFLLEdBQTRCO1FBQy9CLEtBQUssRUFBRSxNQUFNO1FBQ2IsUUFBUSxFQUFFLE1BQU07UUFDaEIsS0FBSyxFQUFFLE1BQU07UUFDYixNQUFNLEVBQUUsS0FBSztRQUNiLE9BQU8sRUFBRSxNQUFNO1FBQ2YsTUFBTSxFQUFFLE1BQU07UUFDZCxTQUFTLEVBQUUsc0JBQXNCO1FBQ2pDLFlBQVksRUFBRSxLQUFLO1FBQ25CLE9BQU8sRUFBRSxPQUFPO1FBQ2hCLFNBQVMsRUFBRSxZQUFZO0tBQ3hCLENBQUM7SUFDRixJQUFJLEdBQTRCO1FBQzlCLFFBQVEsRUFBRSxVQUFVO1FBQ3BCLEtBQUssRUFBRSxNQUFNO0tBQ2QsQ0FBQztJQUNGLFlBQVksR0FBRyxJQUFJLENBQUM7SUFFcEI7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDaEMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFDRCxtQkFBbUIsQ0FBQyxHQUFHO1FBQ3JCLE9BQU8sbUJBQW1CLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUNELGlCQUFpQixDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRTtRQUMvQixJQUFJLFVBQVUsQ0FBQyxHQUFHLENBQUMsRUFBRTtZQUNuQixrQkFBa0I7WUFDbEIsSUFBSSxDQUFDLFlBQVksQ0FDZjtnQkFDRSxHQUFHO2dCQUNILE1BQU0sRUFBRSxLQUFLO2FBQ2QsRUFDRCxNQUFNLENBQ1AsQ0FBQztTQUNIO0lBQ0gsQ0FBQzt1R0F2RFUsY0FBYzsyRkFBZCxjQUFjLDBHQVpkO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxjQUFjLENBQUM7Z0JBQzdDLEtBQUssRUFBRSxJQUFJO2FBQ1o7WUFDRDtnQkFDRSxPQUFPLEVBQUUsU0FBUztnQkFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxjQUFjLENBQUM7YUFDOUM7U0FDRixpREExRVM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMEJULDhrQ0E2RzhCLHNCQUFzQjs7U0EzRDFDLGNBQWM7MkZBQWQsY0FBYztrQkE5RTFCLFNBQVM7K0JBQ0UsYUFBYSxZQUNiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTBCVCx1QkFvQ29CLEtBQUssbUJBQ1QsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxlQUFlLENBQUM7NEJBQzdDLEtBQUssRUFBRSxJQUFJO3lCQUNaO3dCQUNEOzRCQUNFLE9BQU8sRUFBRSxTQUFTOzRCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxlQUFlLENBQUM7eUJBQzlDO3FCQUNGOzBFQUlRLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBV0csUUFBUTtzQkFBaEIsS0FBSzs7QUEyQ1IsTUFLYSxnQkFBZ0I7dUdBQWhCLGdCQUFnQjt3R0FBaEIsZ0JBQWdCLGlCQS9EaEIsY0FBYyxFQTJETSxzQkFBc0IsYUFFM0MsWUFBWSxFQUFFLGdCQUFnQixFQUFFLFlBQVksRUFBRSxtQkFBbUIsYUE3RGhFLGNBQWMsRUE0REMsc0JBQXNCO3dHQUdyQyxnQkFBZ0IsWUFGakIsWUFBWSxFQUFFLGdCQUFnQixFQUFFLFlBQVksRUFBRSxtQkFBbUI7O1NBRWhFLGdCQUFnQjsyRkFBaEIsZ0JBQWdCO2tCQUw1QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLGNBQWMsRUFBRSxzQkFBc0IsQ0FBQztvQkFDdEQsT0FBTyxFQUFFLENBQUMsY0FBYyxFQUFFLHNCQUFzQixDQUFDO29CQUNqRCxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsWUFBWSxFQUFFLG1CQUFtQixDQUFDO2lCQUM3RSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHtcbiAgQ2hlY2tib2FyZE1vZHVsZSxcbiAgQ29sb3JXcmFwLFxuICBFZGl0YWJsZUlucHV0TW9kdWxlLFxuICBnZXRDb250cmFzdGluZ0NvbG9yLFxuICBpc1ZhbGlkSGV4LFxuICBTd2F0Y2hNb2R1bGUsXG59IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBCbG9ja1N3YXRjaGVzQ29tcG9uZW50IH0gZnJvbSAnLi9ibG9jay1zd2F0Y2hlcy5jb21wb25lbnQnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWJsb2NrJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImJsb2NrLWNhcmQgYmxvY2stcGlja2VyIHt7IGNsYXNzTmFtZSB9fVwiPlxuICAgIDxkaXYgY2xhc3M9XCJibG9jay10cmlhbmdsZVwiICpuZ0lmPVwidHJpYW5nbGUgIT09ICdoaWRlJ1wiXG4gICAgICBbc3R5bGUuYm9yZGVyLWNvbG9yXT1cIid0cmFuc3BhcmVudCB0cmFuc3BhcmVudCAnICsgdGhpcy5oZXggKyAnIHRyYW5zcGFyZW50J1wiXG4gICAgPjwvZGl2PlxuXG4gICAgPGRpdiBjbGFzcz1cImJsb2NrLWhlYWRcIiBbc3R5bGUuYmFja2dyb3VuZF09XCJoZXhcIj5cbiAgICAgIDxjb2xvci1jaGVja2JvYXJkICpuZ0lmPVwiaGV4ID09PSAndHJhbnNwYXJlbnQnXCJcbiAgICAgICAgYm9yZGVyUmFkaXVzPVwiNnB4IDZweCAwIDBcIlxuICAgICAgPjwvY29sb3ItY2hlY2tib2FyZD5cbiAgICAgIDxkaXYgY2xhc3M9XCJibG9jay1sYWJlbFwiIFtzdHlsZS5jb2xvcl09XCJnZXRDb250cmFzdGluZ0NvbG9yKGhleClcIj5cbiAgICAgICAge3sgaGV4IH19XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJibG9jay1ib2R5XCI+XG4gICAgICA8Y29sb3ItYmxvY2stc3dhdGNoZXMgW2NvbG9yc109XCJjb2xvcnNcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVCbG9ja0NoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgKG9uU3dhdGNoSG92ZXIpPVwib25Td2F0Y2hIb3Zlci5lbWl0KCRldmVudClcIlxuICAgICAgPjwvY29sb3ItYmxvY2stc3dhdGNoZXM+XG4gICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXQgW3ZhbHVlXT1cImhleFwiXG4gICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgW3N0eWxlXT1cIntpbnB1dDogaW5wdXQsIHdyYXA6IHdyYXB9XCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5ibG9jay1jYXJkIHtcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICBib3JkZXItcmFkaXVzOiA2cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDFweCByZ2JhKDAsIDAsIDAsIC4xKTtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB9XG4gICAgLmJsb2NrLWhlYWQge1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDZweCA2cHggMCAwO1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGhlaWdodDogMTEwcHg7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB9XG4gICAgLmJsb2NrLWJvZHkge1xuICAgICAgcGFkZGluZzogMTBweDtcbiAgICB9XG4gICAgLmJsb2NrLWxhYmVsIHtcbiAgICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB9XG4gICAgLmJsb2NrLXRyaWFuZ2xlIHtcbiAgICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgICBib3JkZXItd2lkdGg6IDAgMTBweCAxMHB4IDEwcHg7XG4gICAgICBoZWlnaHQ6IDA7XG4gICAgICBsZWZ0OiA1MCU7XG4gICAgICBtYXJnaW4tbGVmdDogLTEwcHg7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICB0b3A6IC0xMHB4O1xuICAgICAgd2lkdGg6IDA7XG4gICAgfVxuICBgLFxuICBdLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQmxvY2tDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBDb2xvcldyYXAsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBCbG9ja0NvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBCbG9ja0NvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAxNzA7XG4gIC8qKiBDb2xvciBzcXVhcmVzIHRvIGRpc3BsYXkgKi9cbiAgQElucHV0KCkgY29sb3JzID0gW1xuICAgICcjRDlFM0YwJyxcbiAgICAnI0Y0NzM3MycsXG4gICAgJyM2OTc2ODknLFxuICAgICcjMzdENjdBJyxcbiAgICAnIzJDQ0NFNCcsXG4gICAgJyM1NTU1NTUnLFxuICAgICcjZGNlNzc1JyxcbiAgICAnI2ZmOGE2NScsXG4gICAgJyNiYTY4YzgnLFxuICBdO1xuICBASW5wdXQoKSB0cmlhbmdsZTogJ3RvcCcgfCAnaGlkZScgPSAndG9wJztcbiAgaW5wdXQ6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICBjb2xvcjogJyM2NjYnLFxuICAgIGJvcmRlcjogJzBweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIGhlaWdodDogJzIycHgnLFxuICAgIGJveFNoYWRvdzogJ2luc2V0IDAgMCAwIDFweCAjZGRkJyxcbiAgICBib3JkZXJSYWRpdXM6ICc0cHgnLFxuICAgIHBhZGRpbmc6ICcwIDdweCcsXG4gICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gIH07XG4gIHdyYXA6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gIH07XG4gIGRpc2FibGVBbHBoYSA9IHRydWU7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIGhhbmRsZVZhbHVlQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUJsb2NrQ2hhbmdlKHsgaGV4OiBkYXRhLCAkZXZlbnQgfSk7XG4gIH1cbiAgZ2V0Q29udHJhc3RpbmdDb2xvcihoZXgpIHtcbiAgICByZXR1cm4gZ2V0Q29udHJhc3RpbmdDb2xvcihoZXgpO1xuICB9XG4gIGhhbmRsZUJsb2NrQ2hhbmdlKHsgaGV4LCAkZXZlbnQgfSkge1xuICAgIGlmIChpc1ZhbGlkSGV4KGhleCkpIHtcbiAgICAgIC8vIHRoaXMuaGV4ID0gaGV4O1xuICAgICAgdGhpcy5oYW5kbGVDaGFuZ2UoXG4gICAgICAgIHtcbiAgICAgICAgICBoZXgsXG4gICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgKTtcbiAgICB9XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbQmxvY2tDb21wb25lbnQsIEJsb2NrU3dhdGNoZXNDb21wb25lbnRdLFxuICBleHBvcnRzOiBbQmxvY2tDb21wb25lbnQsIEJsb2NrU3dhdGNoZXNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDaGVja2JvYXJkTW9kdWxlLCBTd2F0Y2hNb2R1bGUsIEVkaXRhYmxlSW5wdXRNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvckJsb2NrTW9kdWxlIHt9XG4iXX0=

package/esm2022/checkboard.component.mjs

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, NgModule, } from '@angular/core';
+import { getCheckerboard } from './helpers/checkboard';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+class CheckboardComponent {
+    white = 'transparent';
+    size = 8;
+    grey = 'rgba(0,0,0,.08)';
+    boxShadow;
+    borderRadius;
+    gridStyles;
+    ngOnInit() {
+        const background = getCheckerboard(this.white, this.grey, this.size);
+        this.gridStyles = {
+            borderRadius: this.borderRadius,
+            boxShadow: this.boxShadow,
+            background: `url(${background}) center left`,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: CheckboardComponent, selector: "color-checkboard", inputs: { white: "white", size: "size", grey: "grey", boxShadow: "boxShadow", borderRadius: "borderRadius" }, ngImport: i0, template: `<div class="grid" [ngStyle]="gridStyles"></div>`, isInline: true, styles: [".grid{inset:0;position:absolute}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { CheckboardComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-checkboard', template: `<div class="grid" [ngStyle]="gridStyles"></div>`, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".grid{inset:0;position:absolute}\n"] }]
+        }], propDecorators: { white: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], grey: [{
+                type: Input
+            }], boxShadow: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }] } });
+class CheckboardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, declarations: [CheckboardComponent], imports: [CommonModule], exports: [CheckboardComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, imports: [CommonModule] });
+}
+export { CheckboardModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CheckboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CheckboardComponent],
+                    exports: [CheckboardComponent],
+                    imports: [CommonModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NoZWNrYm9hcmQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxHQUVULE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQzs7O0FBRXZELE1BaUJhLG1CQUFtQjtJQUNyQixLQUFLLEdBQUcsYUFBYSxDQUFDO0lBQ3RCLElBQUksR0FBRyxDQUFDLENBQUM7SUFDVCxJQUFJLEdBQUcsaUJBQWlCLENBQUM7SUFDekIsU0FBUyxDQUFVO0lBQ25CLFlBQVksQ0FBVTtJQUMvQixVQUFVLENBQTBCO0lBRXBDLFFBQVE7UUFDTixNQUFNLFVBQVUsR0FBRyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyRSxJQUFJLENBQUMsVUFBVSxHQUFHO1lBQ2hCLFlBQVksRUFBRSxJQUFJLENBQUMsWUFBWTtZQUMvQixTQUFTLEVBQUUsSUFBSSxDQUFDLFNBQVM7WUFDekIsVUFBVSxFQUFFLE9BQU8sVUFBVSxlQUFlO1NBQzdDLENBQUM7SUFDSixDQUFDO3VHQWZVLG1CQUFtQjsyRkFBbkIsbUJBQW1CLHNLQWZwQixpREFBaUQ7O1NBZWhELG1CQUFtQjsyRkFBbkIsbUJBQW1CO2tCQWpCL0IsU0FBUzsrQkFDRSxrQkFBa0IsWUFDbEIsaURBQWlELHVCQVl0QyxLQUFLLG1CQUNULHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSzs7QUFhUixNQUthLGdCQUFnQjt1R0FBaEIsZ0JBQWdCO3dHQUFoQixnQkFBZ0IsaUJBdkJoQixtQkFBbUIsYUFxQnBCLFlBQVksYUFyQlgsbUJBQW1CO3dHQXVCbkIsZ0JBQWdCLFlBRmpCLFlBQVk7O1NBRVgsZ0JBQWdCOzJGQUFoQixnQkFBZ0I7a0JBTDVCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsbUJBQW1CLENBQUM7b0JBQ25DLE9BQU8sRUFBRSxDQUFDLG1CQUFtQixDQUFDO29CQUM5QixPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7aUJBQ3hCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBOZ01vZHVsZSxcbiAgT25Jbml0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgZ2V0Q2hlY2tlcmJvYXJkIH0gZnJvbSAnLi9oZWxwZXJzL2NoZWNrYm9hcmQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1jaGVja2JvYXJkJyxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwiZ3JpZFwiIFtuZ1N0eWxlXT1cImdyaWRTdHlsZXNcIj48L2Rpdj5gLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gIC5ncmlkIHtcbiAgICB0b3A6IDBweDtcbiAgICByaWdodDogMHB4O1xuICAgIGJvdHRvbTogMHB4O1xuICAgIGxlZnQ6IDBweDtcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIH1cbiAgYCxcbiAgXSxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDaGVja2JvYXJkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgd2hpdGUgPSAndHJhbnNwYXJlbnQnO1xuICBASW5wdXQoKSBzaXplID0gODtcbiAgQElucHV0KCkgZ3JleSA9ICdyZ2JhKDAsMCwwLC4wOCknO1xuICBASW5wdXQoKSBib3hTaGFkb3chOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGJvcmRlclJhZGl1cyE6IHN0cmluZztcbiAgZ3JpZFN0eWxlcyE6IFJlY29yZDxzdHJpbmcsIHN0cmluZz47XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgY29uc3QgYmFja2dyb3VuZCA9IGdldENoZWNrZXJib2FyZCh0aGlzLndoaXRlLCB0aGlzLmdyZXksIHRoaXMuc2l6ZSk7XG4gICAgdGhpcy5ncmlkU3R5bGVzID0ge1xuICAgICAgYm9yZGVyUmFkaXVzOiB0aGlzLmJvcmRlclJhZGl1cyxcbiAgICAgIGJveFNoYWRvdzogdGhpcy5ib3hTaGFkb3csXG4gICAgICBiYWNrZ3JvdW5kOiBgdXJsKCR7YmFja2dyb3VuZH0pIGNlbnRlciBsZWZ0YCxcbiAgICB9O1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0NoZWNrYm9hcmRDb21wb25lbnRdLFxuICBleHBvcnRzOiBbQ2hlY2tib2FyZENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBDaGVja2JvYXJkTW9kdWxlIHt9XG4iXX0=

package/esm2022/chrome/chrome-fields.component.mjs

@@ -0,0 +1,317 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { isValidHex } from 'ngx-color';
+import { TinyColor } from '@ctrl/tinycolor';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-color";
+class ChromeFieldsComponent {
+    disableAlpha;
+    hsl;
+    rgb;
+    hex;
+    onChange = new EventEmitter();
+    view = '';
+    input = {
+        fontSize: '11px',
+        color: '#333',
+        width: '100%',
+        borderRadius: '2px',
+        border: 'none',
+        boxShadow: 'inset 0 0 0 1px #dadada',
+        height: '21px',
+        'text-align': 'center',
+    };
+    label = {
+        'text-transform': 'uppercase',
+        fontSize: '11px',
+        'line-height': '11px',
+        color: '#969696',
+        'text-align': 'center',
+        display: 'block',
+        marginTop: '12px',
+    };
+    ngOnInit() {
+        if (this.hsl.a === 1 && this.view !== 'hex') {
+            this.view = 'hex';
+        }
+        else if (this.view !== 'rgb' && this.view !== 'hsl') {
+            this.view = 'rgb';
+        }
+    }
+    toggleViews() {
+        if (this.view === 'hex') {
+            this.view = 'rgb';
+        }
+        else if (this.view === 'rgb') {
+            this.view = 'hsl';
+        }
+        else if (this.view === 'hsl') {
+            if (this.hsl.a === 1) {
+                this.view = 'hex';
+            }
+            else {
+                this.view = 'rgb';
+            }
+        }
+    }
+    round(value) {
+        return Math.round(value);
+    }
+    handleChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                const color = new TinyColor(data.hex);
+                this.onChange.emit({
+                    data: {
+                        hex: this.disableAlpha ? color.toHex() : color.toHex8(),
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else if (data.r || data.g || data.b) {
+            this.onChange.emit({
+                data: {
+                    r: data.r || this.rgb.r,
+                    g: data.g || this.rgb.g,
+                    b: data.b || this.rgb.b,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+        else if (data.a) {
+            if (data.a < 0) {
+                data.a = 0;
+            }
+            else if (data.a > 1) {
+                data.a = 1;
+            }
+            if (this.disableAlpha) {
+                data.a = 1;
+            }
+            this.onChange.emit({
+                data: {
+                    h: this.hsl.h,
+                    s: this.hsl.s,
+                    l: this.hsl.l,
+                    a: Math.round(data.a * 100) / 100,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+        else if (data.h || data.s || data.l) {
+            const s = data.s && data.s.replace('%', '');
+            const l = data.l && data.l.replace('%', '');
+            this.onChange.emit({
+                data: {
+                    h: data.h || this.hsl.h,
+                    s: Number(s || this.hsl.s),
+                    l: Number(l || this.hsl.l),
+                    source: 'hsl',
+                },
+                $event,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ChromeFieldsComponent, selector: "color-chrome-fields", inputs: { disableAlpha: "disableAlpha", hsl: "hsl", rgb: "rgb", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <div class="chrome-wrap">
+      <div class="chrome-fields">
+        <ng-template [ngIf]="view === 'hex'">
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="hex" [value]="hex"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        </ng-template>
+        <ng-template [ngIf]="view === 'rgb'">
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="r" [value]="rgb.r"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="g" [value]="rgb.g"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="b" [value]="rgb.b"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input *ngIf="!disableAlpha"
+              [style]="{ input: input, label: label }"
+              label="a" [value]="rgb.a"
+              [arrowOffset]="0.01"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        </ng-template>
+        <ng-template [ngIf]="view === 'hsl'">
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="h"
+              [value]="round(hsl.h)"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="s" [value]="round(hsl.s * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="l" [value]="round(hsl.l * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input *ngIf="!disableAlpha"
+              [style]="{ input: input, label: label }"
+              label="a" [value]="hsl.a"
+              [arrowOffset]="0.01"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        </ng-template>
+      </div>
+
+      <div class="chrome-toggle">
+        <div class="chrome-icon" (click)="toggleViews()" #icon>
+          <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
+            <path #iconUp fill="#333"
+              d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
+            />
+            <path #iconDown fill="#333"
+              d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { ChromeFieldsComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ChromeFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-chrome-fields', template: `
+    <div class="chrome-wrap">
+      <div class="chrome-fields">
+        <ng-template [ngIf]="view === 'hex'">
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="hex" [value]="hex"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        </ng-template>
+        <ng-template [ngIf]="view === 'rgb'">
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="r" [value]="rgb.r"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="g" [value]="rgb.g"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="b" [value]="rgb.b"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input *ngIf="!disableAlpha"
+              [style]="{ input: input, label: label }"
+              label="a" [value]="rgb.a"
+              [arrowOffset]="0.01"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        </ng-template>
+        <ng-template [ngIf]="view === 'hsl'">
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="h"
+              [value]="round(hsl.h)"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="s" [value]="round(hsl.s * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input
+              [style]="{ input: input, label: label }"
+              label="l" [value]="round(hsl.l * 100) + '%'"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+          <div class="chrome-field">
+            <color-editable-input *ngIf="!disableAlpha"
+              [style]="{ input: input, label: label }"
+              label="a" [value]="hsl.a"
+              [arrowOffset]="0.01"
+              (onChange)="handleChange($event)"
+            ></color-editable-input>
+          </div>
+        </ng-template>
+      </div>
+
+      <div class="chrome-toggle">
+        <div class="chrome-icon" (click)="toggleViews()" #icon>
+          <svg class="chrome-toggle-svg" viewBox="0 0 24 24">
+            <path #iconUp fill="#333"
+              d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
+            />
+            <path #iconDown fill="#333"
+              d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".chrome-wrap{padding-top:16px;display:flex}.chrome-fields{flex:1;display:flex;margin-left:-6px}.chrome-field{padding-left:6px;width:100%}.chrome-toggle{width:32px;text-align:right;position:relative}.chrome-icon{margin-right:-4px;margin-top:12px;cursor:pointer;position:relative}.chrome-toggle-svg{width:24px;height:24px;border:1px transparent solid;border-radius:5px}.chrome-toggle-svg:hover{background:#eee}\n"] }]
+        }], propDecorators: { disableAlpha: [{
+                type: Input
+            }], hsl: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], hex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hyb21lLWZpZWxkcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2Nocm9tZS9jaHJvbWUtZmllbGRzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsVUFBVSxFQUFjLE1BQU0sV0FBVyxDQUFDO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7OztBQUU1QyxNQXFJYSxxQkFBcUI7SUFDdkIsWUFBWSxDQUFXO0lBQ3ZCLEdBQUcsQ0FBUTtJQUNYLEdBQUcsQ0FBUTtJQUNYLEdBQUcsQ0FBVTtJQUNaLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQzdDLElBQUksR0FBRyxFQUFFLENBQUM7SUFDVixLQUFLLEdBQTJCO1FBQzlCLFFBQVEsRUFBRSxNQUFNO1FBQ2hCLEtBQUssRUFBRSxNQUFNO1FBQ2IsS0FBSyxFQUFFLE1BQU07UUFDYixZQUFZLEVBQUUsS0FBSztRQUNuQixNQUFNLEVBQUUsTUFBTTtRQUNkLFNBQVMsRUFBRSx5QkFBeUI7UUFDcEMsTUFBTSxFQUFFLE1BQU07UUFDZCxZQUFZLEVBQUUsUUFBUTtLQUN2QixDQUFDO0lBQ0YsS0FBSyxHQUEyQjtRQUM5QixnQkFBZ0IsRUFBRSxXQUFXO1FBQzdCLFFBQVEsRUFBRSxNQUFNO1FBQ2hCLGFBQWEsRUFBRSxNQUFNO1FBQ3JCLEtBQUssRUFBRSxTQUFTO1FBQ2hCLFlBQVksRUFBRSxRQUFRO1FBQ3RCLE9BQU8sRUFBRSxPQUFPO1FBQ2hCLFNBQVMsRUFBRSxNQUFNO0tBQ2xCLENBQUM7SUFFRixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLElBQUksSUFBSSxD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OzJGQUFyQixxQkFBcUI7a0JBcklqQyxTQUFTOytCQUNFLHFCQUFxQixZQUNyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMEZULG1CQXNDZ0IsdUJBQXVCLENBQUMsTUFBTSx1QkFDMUIsS0FBSzs4QkFHakIsWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBpc1ZhbGlkSGV4LCBIU0xBLCBSR0JBIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IFRpbnlDb2xvciB9IGZyb20gJ0BjdHJsL3Rpbnljb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNocm9tZS1maWVsZHMnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtd3JhcFwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1maWVsZHNcIj5cbiAgICAgICAgPG5nLXRlbXBsYXRlIFtuZ0lmXT1cInZpZXcgPT09ICdoZXgnXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1maWVsZFwiPlxuICAgICAgICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBpbnB1dCwgbGFiZWw6IGxhYmVsIH1cIlxuICAgICAgICAgICAgICBsYWJlbD1cImhleFwiIFt2YWx1ZV09XCJoZXhcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbbmdJZl09XCJ2aWV3ID09PSAncmdiJ1wiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtZmllbGRcIj5cbiAgICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJyXCIgW3ZhbHVlXT1cInJnYi5yXCJcbiAgICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtZmllbGRcIj5cbiAgICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJnXCIgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtZmllbGRcIj5cbiAgICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJiXCIgW3ZhbHVlXT1cInJnYi5iXCJcbiAgICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtZmllbGRcIj5cbiAgICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCAqbmdJZj1cIiFkaXNhYmxlQWxwaGFcIlxuICAgICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJhXCIgW3ZhbHVlXT1cInJnYi5hXCJcbiAgICAgICAgICAgICAgW2Fycm93T2Zmc2V0XT1cIjAuMDFcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbbmdJZl09XCJ2aWV3ID09PSAnaHNsJ1wiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtZmllbGRcIj5cbiAgICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJoXCJcbiAgICAgICAgICAgICAgW3ZhbHVlXT1cInJvdW5kKGhzbC5oKVwiXG4gICAgICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2hyb21lLWZpZWxkXCI+XG4gICAgICAgICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgICAgICAgICAgW3N0eWxlXT1cInsgaW5wdXQ6IGlucHV0LCBsYWJlbDogbGFiZWwgfVwiXG4gICAgICAgICAgICAgIGxhYmVsPVwic1wiIFt2YWx1ZV09XCJyb3VuZChoc2wucyAqIDEwMCkgKyAnJSdcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1maWVsZFwiPlxuICAgICAgICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBpbnB1dCwgbGFiZWw6IGxhYmVsIH1cIlxuICAgICAgICAgICAgICBsYWJlbD1cImxcIiBbdmFsdWVdPVwicm91bmQoaHNsLmwgKiAxMDApICsgJyUnXCJcbiAgICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaHJvbWUtZmllbGRcIj5cbiAgICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCAqbmdJZj1cIiFkaXNhYmxlQWxwaGFcIlxuICAgICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogaW5wdXQsIGxhYmVsOiBsYWJlbCB9XCJcbiAgICAgICAgICAgICAgbGFiZWw9XCJhXCIgW3ZhbHVlXT1cImhzbC5hXCJcbiAgICAgICAgICAgICAgW2Fycm93T2Zmc2V0XT1cIjAuMDFcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS10b2dnbGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNocm9tZS1pY29uXCIgKGNsaWNrKT1cInRvZ2dsZVZpZXdzKClcIiAjaWNvbj5cbiAgICAgICAgICA8c3ZnIGNsYXNzPVwiY2hyb21lLXRvZ2dsZS1zdmdcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCI+XG4gICAgICAgICAgICA8cGF0aCAjaWNvblVwIGZpbGw9XCIjMzMzXCJcbiAgICAgICAgICAgICAgZD1cIk0xMiw1LjgzTDE1LjE3LDlMMTYuNTgsNy41OUwxMiwzTDcuNDEsNy41OUw4LjgzLDlMMTIsNS44M1pcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDxwYXRoICNpY29uRG93biBmaWxsPVwiIzMzM1wiXG4gICAgICAgICAgICAgIGQ9XCJNMTIsMTguMTdMOC44MywxNUw3LjQyLDE2LjQxTDEyLDIxTDE2LjU5LDE2LjQxTDE1LjE3LDE1WlwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvc3ZnPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuY2hyb21lLXdyYXAge1xuICAgICAgICBwYWRkaW5nLXRvcDogMTZweDtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtZmllbGRzIHtcbiAgICAgICAgZmxleDogMTtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IC02cHg7XG4gICAgICB9XG4gICAgICAuY2hyb21lLWZpZWxkIHtcbiAgICAgICAgcGFkZGluZy1sZWZ0OiA2cHg7XG4gICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgfVxuICAgICAgLmNocm9tZS10b2dnbGUge1xuICAgICAgICB3aWR0aDogMzJweDtcbiAgICAgICAgdGV4dC1hbGlnbjogcmlnaHQ7XG4gICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIH1cbiAgICAgIC5jaHJvbWUtaWNvbiB7XG4gICAgICAgIG1hcmdpbi1yaWdodDogLTRweDtcbiAgICAgICAgbWFyZ2luLXRvcDogMTJweDtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICB9XG4gICAgICAuY2hyb21lLXRvZ2dsZS1zdmcge1xuICAgICAgICB3aWR0aDogMjRweDtcbiAgICAgICAgaGVpZ2h0OiAyNHB4O1xuICAgICAgICBib3JkZXI6IDFweCB0cmFuc3BhcmVudCBzb2xpZDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgfVxuICAgICAgLmNocm9tZS10b2dnbGUtc3ZnOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZDogI2VlZTtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIENocm9tZUZpZWxkc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGRpc2FibGVBbHBoYSE6IGJvb2xlYW47XG4gIEBJbnB1dCgpIGhzbCE6IEhTTEE7XG4gIEBJbnB1dCgpIHJnYiE6IFJHQkE7XG4gIEBJbnB1dCgpIGhleCE6IHN0cmluZztcbiAgQE91dHB1dCgpIG9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIHZpZXcgPSAnJztcbiAgaW5wdXQ6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgZm9udFNpemU6ICcxMXB4JyxcbiAgICBjb2xvcjogJyMzMzMnLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgYm9yZGVyUmFkaXVzOiAnMnB4JyxcbiAgICBib3JkZXI6ICdub25lJyxcbiAgICBib3hTaGFkb3c6ICdpbnNldCAwIDAgMCAxcHggI2RhZGFkYScsXG4gICAgaGVpZ2h0OiAnMjFweCcsXG4gICAgJ3RleHQtYWxpZ24nOiAnY2VudGVyJyxcbiAgfTtcbiAgbGFiZWw6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgJ3RleHQtdHJhbnNmb3JtJzogJ3VwcGVyY2FzZScsXG4gICAgZm9udFNpemU6ICcxMXB4JyxcbiAgICAnbGluZS1oZWlnaHQnOiAnMTFweCcsXG4gICAgY29sb3I6ICcjOTY5Njk2JyxcbiAgICAndGV4dC1hbGlnbic6ICdjZW50ZXInLFxuICAgIGRpc3BsYXk6ICdibG9jaycsXG4gICAgbWFyZ2luVG9wOiAnMTJweCcsXG4gIH07XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMuaHNsLmEgPT09IDEgJiYgdGhpcy52aWV3ICE9PSAnaGV4Jykge1xuICAgICAgdGhpcy52aWV3ID0gJ2hleCc7XG4gICAgfSBlbHNlIGlmICh0aGlzLnZpZXcgIT09ICdyZ2InICYmIHRoaXMudmlldyAhPT0gJ2hzbCcpIHtcbiAgICAgIHRoaXMudmlldyA9ICdyZ2InO1xuICAgIH1cbiAgfVxuICB0b2dnbGVWaWV3cygpIHtcbiAgICBpZiAodGhpcy52aWV3ID09PSAnaGV4Jykge1xuICAgICAgdGhpcy52aWV3ID0gJ3JnYic7XG4gICAgfSBlbHNlIGlmICh0aGlzLnZpZXcgPT09ICdyZ2InKSB7XG4gICAgICB0aGlzLnZpZXcgPSAnaHNsJztcbiAgICB9IGVsc2UgaWYgKHRoaXMudmlldyA9PT0gJ2hzbCcpIHtcbiAgICAgIGlmICh0aGlzLmhzbC5hID09PSAxKSB7XG4gICAgICAgIHRoaXMudmlldyA9ICdoZXgnO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy52aWV3ID0gJ3JnYic7XG4gICAgICB9XG4gICAgfVxuICB9XG4gIHJvdW5kKHZhbHVlKSB7XG4gICAgcmV0dXJuIE1hdGgucm91bmQodmFsdWUpO1xuICB9XG4gIGhhbmRsZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgaWYgKGRhdGEuaGV4KSB7XG4gICAgICBpZiAoaXNWYWxpZEhleChkYXRhLmhleCkpIHtcbiAgICAgICAgY29uc3QgY29sb3IgPSBuZXcgVGlueUNvbG9yKGRhdGEuaGV4KTtcbiAgICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IHRoaXMuZGlzYWJsZUFscGhhID8gY29sb3IudG9IZXgoKSA6IGNvbG9yLnRvSGV4OCgpLFxuICAgICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgICB9LFxuICAgICAgICAgICRldmVudCxcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChkYXRhLnIgfHwgZGF0YS5nIHx8IGRhdGEuYikge1xuICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgZGF0YToge1xuICAgICAgICAgIHI6IGRhdGEuciB8fCB0aGlzLnJnYi5yLFxuICAgICAgICAgIGc6IGRhdGEuZyB8fCB0aGlzLnJnYi5nLFxuICAgICAgICAgIGI6IGRhdGEuYiB8fCB0aGlzLnJnYi5iLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH0sXG4gICAgICAgICRldmVudCxcbiAgICAgIH0pO1xuICAgIH0gZWxzZSBpZiAoZGF0YS5hKSB7XG4gICAgICBpZiAoZGF0YS5hIDwgMCkge1xuICAgICAgICBkYXRhLmEgPSAwO1xuICAgICAgfSBlbHNlIGlmIChkYXRhLmEgPiAxKSB7XG4gICAgICAgIGRhdGEuYSA9IDE7XG4gICAgICB9XG5cbiAgICAgIGlmICh0aGlzLmRpc2FibGVBbHBoYSkge1xuICAgICAgICBkYXRhLmEgPSAxO1xuICAgICAgfVxuXG4gICAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoe1xuICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgaDogdGhpcy5oc2wuaCxcbiAgICAgICAgICBzOiB0aGlzLmhzbC5zLFxuICAgICAgICAgIGw6IHRoaXMuaHNsLmwsXG4gICAgICAgICAgYTogTWF0aC5yb3VuZChkYXRhLmEgKiAxMDApIC8gMTAwLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH0sXG4gICAgICAgICRldmVudCxcbiAgICAgIH0pO1xuICAgIH0gZWxzZSBpZiAoZGF0YS5oIHx8IGRhdGEucyB8fCBkYXRhLmwpIHtcbiAgICAgIGNvbnN0IHMgPSBkYXRhLnMgJiYgZGF0YS5zLnJlcGxhY2UoJyUnLCAnJyk7XG4gICAgICBjb25zdCBsID0gZGF0YS5sICYmIGRhdGEubC5yZXBsYWNlKCclJywgJycpO1xuICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgZGF0YToge1xuICAgICAgICAgIGg6IGRhdGEuaCB8fCB0aGlzLmhzbC5oLFxuICAgICAgICAgIHM6IE51bWJlcihzIHx8IHRoaXMuaHNsLnMpLFxuICAgICAgICAgIGw6IE51bWJlcihsIHx8IHRoaXMuaHNsLmwpLFxuICAgICAgICAgIHNvdXJjZTogJ2hzbCcsXG4gICAgICAgIH0sXG4gICAgICAgICRldmVudCxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxufVxuIl19