ngx-color 7.0.2 → 7.3.1

package/esm2020/color-wrap.component.mjs

@@ -0,0 +1,163 @@
+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 = {}));
+export class ColorWrap {
+    constructor() {
+        /**
+         * Descriptors the return color format if the component is used with two-way binding
+         */
+        this.mode = ColorMode.HEX;
+        this.color = {
+            h: 250,
+            s: 0.5,
+            l: 0.2,
+            a: 1,
+        };
+        this.colorChange = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.onChangeComplete = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this._onChangeCompleteSubscription = new Subscription();
+        this._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;
+    }
+}
+ColorWrap.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorWrap.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", 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
+            }] } });
+export class ColorWrapModule {
+}
+ColorWrapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorWrapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, declarations: [ColorWrap], imports: [CommonModule], exports: [ColorWrap] });
+ColorWrapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorWrapModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ColorWrap],
+                    exports: [ColorWrap],
+                    imports: [CommonModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3Itd3JhcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbG9yLXdyYXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUNMLFNBQVMsRUFDVCxRQUFRLEVBSVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEMsT0FBTyxFQUFFLFlBQVksRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFcEUsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQU96RSxNQUFNLENBQU4sSUFBWSxTQUtYO0FBTEQsV0FBWSxTQUFTO0lBQ25CLHdCQUFXLENBQUE7SUFDWCx3QkFBVyxDQUFBO0lBQ1gsd0JBQVcsQ0FBQTtJQUNYLHdCQUFXLENBQUE7QUFDYixDQUFDLEVBTFcsU0FBUyxLQUFULFNBQVMsUUFLcEI7QUFjRCxNQUFNLE9BQU8sU0FBUztJQVp0QjtRQWVFOztXQUVHO1FBQ00sU0FBSSxHQUFjLFNBQVMsQ0FBQyxHQUFHLENBQUM7UUFFaEMsVUFBSyxHQUFnQztZQUM1QyxDQUFDLEVBQUUsR0FBRztZQUNOLENBQUMsRUFBRSxHQUFHO1lBQ04sQ0FBQyxFQUFFLEdBQUc7WUFDTixDQUFDLEVBQUUsQ0FBQztTQUNMLENBQUM7UUFDUSxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUErQixDQUFDO1FBQzlELGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBQzFDLHFCQUFnQixHQUFHLElBQUksWUFBWSxF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UUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxTQUFTLENBQUM7b0JBQ3pCLE9BQU8sRUFBRSxDQUFDLFNBQVMsQ0FBQztvQkFDcEIsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDO2lCQUN4QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgZm9yd2FyZFJlZixcbiAgSW5wdXQsXG4gIGlzRGV2TW9kZSxcbiAgTmdNb2R1bGUsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IHNpbXBsZUNoZWNrRm9yVmFsaWRDb2xvciwgdG9TdGF0ZSB9IGZyb20gJy4vaGVscGVycy9jb2xvcic7XG5pbXBvcnQgeyBDb2xvciwgSFNMQSwgSFNWQSwgUkdCQSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuZXhwb3J0IGludGVyZmFjZSBDb2xvckV2ZW50IHtcbiAgJGV2ZW50OiBFdmVudDtcbiAgY29sb3I6IENvbG9yO1xufVxuXG5leHBvcnQgZW51bSBDb2xvck1vZGUge1xuICBIRVggPSAnaGV4JyxcbiAgSFNMID0gJ2hzbCcsXG4gIEhTViA9ICdoc3YnLFxuICBSR0IgPSAncmdiJ1xufVxuXG5AQ29tcG9uZW50KHtcbiAgLy8gY3JlYXRlIHNlbGV0b3IgYmFzZSBmb3IgdGVzdCBvdmVycmlkZSBwcm9wZXJ0eVxuICBzZWxlY3RvcjogJ2NvbG9yLXdyYXAnLFxuICB0ZW1wbGF0ZTogYGAsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ29sb3JXcmFwKSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBDb2xvcldyYXAgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogRGVzY3JpcHRvcnMgdGhlIHJldHVybiBjb2xvciBmb3JtYXQgaWYgdGhlIGNvbXBvbmVudCBpcyB1c2VkIHdpdGggdHdvLXdheSBiaW5kaW5nXG4gICAqL1xuICBASW5wdXQoKSBtb2RlOiBDb2xvck1vZGUgPSBDb2xvck1vZGUuSEVYO1xuXG4gIEBJbnB1dCgpIGNvbG9yOiBIU0xBIHwgSFNWQSB8IFJHQkEgfCBzdHJpbmcgPSB7XG4gICAgaDogMjUwLFxuICAgIHM6IDAuNSxcbiAgICBsOiAwLjIsXG4gICAgYTogMSxcbiAgfTtcbiAgQE91dHB1dCgpIGNvbG9yQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxIU0xBIHwgSFNWQSB8IFJHQkEgfCBzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Q29sb3JFdmVudD4oKTtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlQ29tcGxldGUgPSBuZXcgRXZlbnRFbWl0dGVyPENvbG9yRXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxDb2xvckV2ZW50PigpO1xuICBvbGRIdWUhOiBudW1iZXI7XG4gIGhzbCE6IEhTTEE7XG4gIGhzdiE6IEhTVkE7XG4gIHJnYiE6IFJHQkE7XG4gIGhleCE6IHN0cmluZztcbiAgc291cmNlITogc3RyaW5nO1xuICBjdXJyZW50Q29sb3IhOiBzdHJpbmc7XG4gIGNoYW5nZXM/OiBTdWJzY3JpcHRpb247XG4gIGRpc2FibGVBbHBoYT86IGJvb2xlYW47XG5cbiAgcHJpdmF0ZSBfb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcbiAgcHJpdmF0ZSBfb25Td2F0Y2hIb3ZlclN1YnNjcmlwdGlvbiA9IG5ldyBTdWJzY3JpcHRpb24oKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNoYW5nZXMgPSB0aGlzLm9uQ2hhbmdlXG4gICAgICAucGlwZShcbiAgICAgICAgZGVib3VuY2VUaW1lKDEwMCksXG4gICAgICAgIHRhcChldmVudCA9PiB7XG4gICAgICAgICAgdGhpcy5vbkNoYW5nZUNvbXBsZXRlLmVtaXQoZXZlbnQpO1xuICAgICAgICAgIHN3aXRjaCAodGhpcy5tb2RlKSB7XG4gICAgICAgICAgICBjYXNlIENvbG9yTW9kZS5IRVg6XG4gICAgICAgICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChldmVudC5jb2xvci5oZXgpO1xuICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGNhc2UgQ29sb3JNb2RlLkhTTDpcbiAgICAgICAgICAgICAgdGhpcy5jb2xvckNoYW5nZS5lbWl0KGV2ZW50LmNvbG9yLmhzbCk7XG4gICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgY2FzZSBDb2xvck1vZGUuSFNWOlxuICAgICAgICAgICAgICB0aGlzLmNvbG9yQ2hhbmdlLmVtaXQoZXZlbnQuY29sb3IuaHN2KTtcbiAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBjYXNlIENvbG9yTW9kZS5SR0I6XG4gICAgICAgICAgICAgIHRoaXMuY29sb3JDaGFuZ2UuZW1pdChldmVudC5jb2xvci5yZ2IpO1xuICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIGRlZmF1bHQ6XG4gICAgICAgICAgICAgIGNvbnN0IG1zZyA9IGBUaGUgbW9kZSAnJHt0aGlzLm1vZGV9JyBpcyBub3Qgc3VwcG9ydGVkYDtcbiAgICAgICAgICAgICAgaWYgKGlzRGV2TW9kZSgpKSB7XG4gICAgICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKG1zZyk7XG4gICAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgY29uc29sZS53YXJuKG1zZyk7XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgfVxuICAgICAgICB9KVxuICAgICAgKVxuICAgICAgLnN1YnNjcmliZSgpO1xuICAgIHRoaXMuc2V0U3RhdGUodG9TdGF0ZSh0aGlzLmNvbG9yLCAwKSk7XG4gICAgdGhpcy5jdXJyZW50Q29sb3IgPSB0aGlzLmhleDtcbiAgfVxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICB0aGlzLnNldFN0YXRlKHRvU3RhdGUodGhpcy5jb2xvciwgdGhpcy5vbGRIdWUpKTtcbiAgfVxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmNoYW5nZXM/LnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5fb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMuX29uU3dhdGNoSG92ZXJTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgfVxuICBzZXRTdGF0ZShkYXRhKSB7XG4gICAgdGhpcy5vbGRIdWUgPSBkYXRhLm9sZEh1ZTtcbiAgICB0aGlzLmhzbCA9IGRhdGEuaHNsO1xuICAgIHRoaXMuaHN2ID0gZGF0YS5oc3Y7XG4gICAgdGhpcy5yZ2IgPSBkYXRhLnJnYjtcbiAgICB0aGlzLmhleCA9IGRhdGEuaGV4O1xuICAgIHRoaXMuc291cmNlID0gZGF0YS5zb3VyY2U7XG4gICAgdGhpcy5hZnRlclZhbGlkQ2hhbmdlKCk7XG4gIH1cbiAgaGFuZGxlQ2hhbmdlKGRhdGEsICRldmVudCkge1xuICAgIGNvbnN0IGlzVmFsaWRDb2xvciA9IHNpbXBsZUNoZWNrRm9yVmFsaWRDb2xvcihkYXRhKTtcbiAgICBpZiAoaXNWYWxpZENvbG9yKSB7XG4gICAgICBjb25zdCBjb2xvciA9IHRvU3RhdGUoZGF0YSwgZGF0YS5oIHx8IHRoaXMub2xkSHVlLCB0aGlzLmRpc2FibGVBbHBoYSk7XG4gICAgICB0aGlzLnNldFN0YXRlKGNvbG9yKTtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7IGNvbG9yLCAkZXZlbnQgfSk7XG4gICAgICB0aGlzLmFmdGVyVmFsaWRDaGFuZ2UoKTtcbiAgICB9XG4gIH1cbiAgLyoqIGhvb2sgZm9yIGNvbXBvbmVudHMgYWZ0ZXIgYSBjb21wbGV0ZSBjaGFuZ2UgKi9cbiAgYWZ0ZXJWYWxpZENoYW5nZSgpIHt9XG5cbiAgaGFuZGxlU3dhdGNoSG92ZXIoZGF0YSwgJGV2ZW50KSB7XG4gICAgY29uc3QgaXNWYWxpZENvbG9yID0gc2ltcGxlQ2hlY2tGb3JWYWxpZENvbG9yKGRhdGEpO1xuICAgIGlmIChpc1ZhbGlkQ29sb3IpIHtcbiAgICAgIGNvbnN0IGNvbG9yID0gdG9TdGF0ZShkYXRhLCBkYXRhLmggfHwgdGhpcy5vbGRIdWUpO1xuICAgICAgdGhpcy5zZXRTdGF0ZShjb2xvcik7XG4gICAgICB0aGlzLm9uU3dhdGNoSG92ZXIuZW1pdCh7IGNvbG9yLCAkZXZlbnQgfSk7XG4gICAgfVxuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogKGhleDogc3RyaW5nKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5fb25DaGFuZ2VDb21wbGV0ZVN1YnNjcmlwdGlvbi5hZGQodGhpcy5vbkNoYW5nZUNvbXBsZXRlLnBpcGUoXG4gICAgICB0YXAoZXZlbnQgPT4gZm4oZXZlbnQuY29sb3IuaGV4KSksXG4gICAgKS5zdWJzY3JpYmUoKSk7XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogKCkgPT4gdm9pZCk6IHZvaWQge1xuICAgIHRoaXMuX29uU3dhdGNoSG92ZXJTdWJzY3JpcHRpb24uYWRkKHRoaXMub25Td2F0Y2hIb3Zlci5waXBlKFxuICAgICAgdGFwKCgpID0+IGZuKCkpLFxuICAgICkuc3Vic2NyaWJlKCkpO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7fVxuXG4gIHdyaXRlVmFsdWUoaGV4OiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLmNvbG9yID0gaGV4O1xuICB9XG5cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbQ29sb3JXcmFwXSxcbiAgZXhwb3J0czogW0NvbG9yV3JhcF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvcldyYXBNb2R1bGUge31cbiJdfQ==

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

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

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

@@ -0,0 +1,186 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { isValidHex } from 'ngx-color';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export class CompactFieldsComponent {
+    constructor() {
+        this.onChange = new EventEmitter();
+        this.HEXWrap = {
+            marginTop: '-3px',
+            marginBottom: '-3px',
+            // flex: '6 1 0%',
+            position: 'relative',
+        };
+        this.HEXinput = {
+            width: '80%',
+            padding: '0px',
+            paddingLeft: '20%',
+            border: 'none',
+            outline: 'none',
+            background: 'none',
+            fontSize: '12px',
+            color: '#333',
+            height: '16px',
+        };
+        this.HEXlabel = {
+            display: 'none',
+        };
+        this.RGBwrap = {
+            marginTop: '-3px',
+            marginBottom: '-3px',
+            // flex: '3 1 0%',
+            position: 'relative',
+        };
+        this.RGBinput = {
+            width: '80%',
+            padding: '0px',
+            paddingLeft: '30%',
+            border: 'none',
+            outline: 'none',
+            background: 'none',
+            fontSize: '12px',
+            color: '#333',
+            height: '16px',
+        };
+        this.RGBlabel = {
+            position: 'absolute',
+            top: '6px',
+            left: '0px',
+            'line-height': '16px',
+            'text-transform': 'uppercase',
+            fontSize: '12px',
+            color: '#999',
+        };
+    }
+    handleChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                this.onChange.emit({
+                    data: {
+                        hex: data.hex,
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else {
+            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,
+            });
+        }
+    }
+}
+CompactFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompactFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CompactFieldsComponent, selector: "color-compact-fields", inputs: { hex: "hex", rgb: "rgb" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+  <div class="compact-fields">
+    <div class="compact-active" [style.background]="hex"></div>
+    <div style="flex: 6 1 0%;">
+      <color-editable-input
+        [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
+        label="hex"
+        [value]="hex"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="r"
+        [value]="rgb.r"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="g"
+        [value]="rgb.g"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="b"
+        [value]="rgb.b"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, isInline: true, styles: [".compact-fields{display:flex;padding-bottom:6px;padding-right:5px;position:relative}.compact-active{position:absolute;top:6px;left:5px;height:9px;width:9px}\n"], components: [{ type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactFieldsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-compact-fields',
+                    template: `
+  <div class="compact-fields">
+    <div class="compact-active" [style.background]="hex"></div>
+    <div style="flex: 6 1 0%;">
+      <color-editable-input
+        [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
+        label="hex"
+        [value]="hex"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="r"
+        [value]="rgb.r"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="g"
+        [value]="rgb.g"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="b"
+        [value]="rgb.b"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+  .compact-fields {
+    display: flex;
+    padding-bottom: 6px;
+    padding-right: 5px;
+    position: relative;
+  }
+  .compact-active {
+    position: absolute;
+    top: 6px;
+    left: 5px;
+    height: 9px;
+    width: 9px;
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { hex: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcGFjdC1maWVsZHMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9jb21wYWN0L2NvbXBhY3QtZmllbGRzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsVUFBVSxFQUFRLE1BQU0sV0FBVyxDQUFDOzs7QUE2RDdDLE1BQU0sT0FBTyxzQkFBc0I7SUEzRG5DO1FBOERZLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQzdDLFlBQU8sR0FBNEI7WUFDakMsU0FBUyxFQUFFLE1BQU07WUFDakIsWUFBWSxFQUFFLE1BQU07WUFDcEIsa0JBQWtCO1lBQ2xCLFFBQVEsRUFBRSxVQUFVO1NBQ3JCLENBQUM7UUFDRixhQUFRLEdBQTRCO1lBQ2xDLEtBQUssRUFBRSxLQUFLO1lBQ1osT0FBTyxFQUFFLEtBQUs7WUFDZCxXQUFXLEVBQUUsS0FBSztZQUNsQixNQUFNLEVBQUUsTUFBTTtZQUNkLE9BQU8sRUFBRSxNQUFNO1lBQ2YsVUFBVSxFQUFFLE1BQU07WUFDbEIsUUFBUSxFQUFFLE1BQU07WUFDaEIsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtTQUNmLENBQUM7UUFDRixhQUFRLEdBQTRCO1lBQ2xDLE9BQU8sRUFBRSxNQUFNO1NBQ2hCLENBQUM7UUFDRixZQUFPLEdBQTRCO1lBQ2pDLFNBQVMsRUFBRSxNQUFNO1lBQ2pCLFlBQVksRUFBRSxNQUFNO1lBQ3BCLGtCQUFrQjtZQUNsQixRQUFRLEVBQUUsVUFBVTtTQUNyQixDQUFDO1FBQ0YsYUFBUSxHQUE0QjtZQUNsQyxLQUFLLEVBQUUsS0FBSztZQUNaLE9BQU8sRUFBRSxLQUFLO1lBQ2QsV0FBVyxFQUFFLEtBQUs7WUFDbEIsTUFBTSxFQUFFLE1BQU07WUFDZCxPQUFPLEVBQUUsTUFBTTtZQUNmLFVBQVUsRUFBRSxNQUFNO1lBQ2xCLFFBQVEsRUFBRSxNQUFNO1lBQ2hCLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07U0FDZixDQUFDO1FBQ0YsYUFBUSxHQUE0QjtZQUNsQyxRQUFRLEVBQUUsVUFBVTtZQUNwQixHQUFHLEVBQUUsS0FBSztZQUNWLElBQUksRUFBRSxLQUFLO1lBQ1gsYUFBYSxFQUFFLE1BQU07WUFDckIsZ0JBQWdCLEVBQUUsV0FBVztZQUM3QixRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsTUFBTTtTQUNkLENBQUM7S0F5Qkg7SUF2QkMsWUFBWSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUMzQixJQUFJLElBQUksQ0FBQyxHQUFHLEVBQUU7WUFDWixJQUFJLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUU7Z0JBQ3hCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDO29CQUNqQixJQUFJLEVBQUU7d0JBQ0osR0FBRyxFQUFFLElBQUksQ0FBQyxHQUFHO3dCQUNiLE1BQU0sRUFBRSxLQUFLO3FCQUNkO29CQUNELE1BQU07aUJBQ1AsQ0FBQyxDQUFDO2FBQ0o7U0FDRjthQUFNO1lBQ0wsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUM7Z0JBQ2pCLElBQUksRUFBRTtvQkFDSixDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7b0JBQ3ZCLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDdkIsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO29CQUN2QixNQUFNLEVBQUUsS0FBSztpQkFDZDtnQkFDRCxNQUFNO2FBQ1AsQ0FBQyxDQUFDO1NBQ0o7SUFDSCxDQUFDOzttSEF6RVUsc0JBQXNCO3VHQUF0QixzQkFBc0IsbUlBekR2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBb0NUOzJGQXFCVSxzQkFBc0I7a0JBM0RsQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxzQkFBc0I7b0JBQ2hDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBb0NUO29CQUNELE1BQU0sRUFBRTt3QkFDTjs7Ozs7Ozs7Ozs7Ozs7R0FjRDtxQkFDQTtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsbUJBQW1CLEVBQUUsS0FBSztpQkFDM0I7OEJBRVUsR0FBRztzQkFBWCxLQUFLO2dCQUNHLEdBQUc7c0JBQVgsS0FBSztnQkFDSSxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgaXNWYWxpZEhleCwgUkdCQSB9IGZyb20gJ25neC1jb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWNvbXBhY3QtZmllbGRzJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImNvbXBhY3QtZmllbGRzXCI+XG4gICAgPGRpdiBjbGFzcz1cImNvbXBhY3QtYWN0aXZlXCIgW3N0eWxlLmJhY2tncm91bmRdPVwiaGV4XCI+PC9kaXY+XG4gICAgPGRpdiBzdHlsZT1cImZsZXg6IDYgMSAwJTtcIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICBbc3R5bGVdPVwieyB3cmFwOiBIRVhXcmFwLCBpbnB1dDogSEVYaW5wdXQsIGxhYmVsOiBIRVhsYWJlbCB9XCJcbiAgICAgICAgbGFiZWw9XCJoZXhcIlxuICAgICAgICBbdmFsdWVdPVwiaGV4XCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgc3R5bGU9XCJmbGV4OiAzIDEgMCVcIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICBbc3R5bGVdPVwieyB3cmFwOiBSR0J3cmFwLCBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgbGFiZWw9XCJyXCJcbiAgICAgICAgW3ZhbHVlXT1cInJnYi5yXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgc3R5bGU9XCJmbGV4OiAzIDEgMCVcIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICBbc3R5bGVdPVwieyB3cmFwOiBSR0J3cmFwLCBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgbGFiZWw9XCJnXCJcbiAgICAgICAgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgc3R5bGU9XCJmbGV4OiAzIDEgMCVcIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgICBbc3R5bGVdPVwieyB3cmFwOiBSR0J3cmFwLCBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgbGFiZWw9XCJiXCJcbiAgICAgICAgW3ZhbHVlXT1cInJnYi5iXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAuY29tcGFjdC1maWVsZHMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgcGFkZGluZy1ib3R0b206IDZweDtcbiAgICBwYWRkaW5nLXJpZ2h0OiA1cHg7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICB9XG4gIC5jb21wYWN0LWFjdGl2ZSB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogNnB4O1xuICAgIGxlZnQ6IDVweDtcbiAgICBoZWlnaHQ6IDlweDtcbiAgICB3aWR0aDogOXB4O1xuICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgQ29tcGFjdEZpZWxkc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGhleCE6IHN0cmluZztcbiAgQElucHV0KCkgcmdiITogUkdCQTtcbiAgQE91dHB1dCgpIG9uQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEhFWFdyYXA6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIG1hcmdpblRvcDogJy0zcHgnLFxuICAgIG1hcmdpbkJvdHRvbTogJy0zcHgnLFxuICAgIC8vIGZsZXg6ICc2IDEgMCUnLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9O1xuICBIRVhpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgd2lkdGg6ICc4MCUnLFxuICAgIHBhZGRpbmc6ICcwcHgnLFxuICAgIHBhZGRpbmdMZWZ0OiAnMjAlJyxcbiAgICBib3JkZXI6ICdub25lJyxcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgYmFja2dyb3VuZDogJ25vbmUnLFxuICAgIGZvbnRTaXplOiAnMTJweCcsXG4gICAgY29sb3I6ICcjMzMzJyxcbiAgICBoZWlnaHQ6ICcxNnB4JyxcbiAgfTtcbiAgSEVYbGFiZWw6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfTtcbiAgUkdCd3JhcDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgbWFyZ2luVG9wOiAnLTNweCcsXG4gICAgbWFyZ2luQm90dG9tOiAnLTNweCcsXG4gICAgLy8gZmxleDogJzMgMSAwJScsXG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIH07XG4gIFJHQmlucHV0OiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzgwJScsXG4gICAgcGFkZGluZzogJzBweCcsXG4gICAgcGFkZGluZ0xlZnQ6ICczMCUnLFxuICAgIGJvcmRlcjogJ25vbmUnLFxuICAgIG91dGxpbmU6ICdub25lJyxcbiAgICBiYWNrZ3JvdW5kOiAnbm9uZScsXG4gICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICBjb2xvcjogJyMzMzMnLFxuICAgIGhlaWdodDogJzE2cHgnLFxuICB9O1xuICBSR0JsYWJlbDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAnNnB4JyxcbiAgICBsZWZ0OiAnMHB4JyxcbiAgICAnbGluZS1oZWlnaHQnOiAnMTZweCcsXG4gICAgJ3RleHQtdHJhbnNmb3JtJzogJ3VwcGVyY2FzZScsXG4gICAgZm9udFNpemU6ICcxMnB4JyxcbiAgICBjb2xvcjogJyM5OTknLFxuICB9O1xuXG4gIGhhbmRsZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgaWYgKGRhdGEuaGV4KSB7XG4gICAgICBpZiAoaXNWYWxpZEhleChkYXRhLmhleCkpIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IGRhdGEuaGV4LFxuICAgICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgICB9LFxuICAgICAgICAgICRldmVudCxcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==