ngx-color 8.0.3 → 9.0.0

package/esm2022/hue.component.mjs

@@ -0,0 +1,128 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
+import { CoordinatesModule } from './coordinates.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./coordinates.directive";
+class HueComponent {
+    hsl;
+    pointer;
+    radius;
+    shadow;
+    hidePointer = false;
+    direction = 'horizontal';
+    onChange = new EventEmitter();
+    left = '0px';
+    top = '';
+    ngOnChanges() {
+        if (this.direction === 'horizontal') {
+            this.left = `${this.hsl.h * 100 / 360}%`;
+        }
+        else {
+            this.top = `${-(this.hsl.h * 100 / 360) + 100}%`;
+        }
+    }
+    handleChange({ top, left, containerHeight, containerWidth, $event }) {
+        let data;
+        if (this.direction === 'vertical') {
+            let h;
+            if (top < 0) {
+                h = 359;
+            }
+            else if (top > containerHeight) {
+                h = 0;
+            }
+            else {
+                const percent = -(top * 100 / containerHeight) + 100;
+                h = 360 * percent / 100;
+            }
+            if (this.hsl.h !== h) {
+                data = {
+                    h,
+                    s: this.hsl.s,
+                    l: this.hsl.l,
+                    a: this.hsl.a,
+                    source: 'rgb',
+                };
+            }
+        }
+        else {
+            let h;
+            if (left < 0) {
+                h = 0;
+            }
+            else if (left > containerWidth) {
+                h = 359;
+            }
+            else {
+                const percent = left * 100 / containerWidth;
+                h = 360 * percent / 100;
+            }
+            if (this.hsl.h !== h) {
+                data = {
+                    h,
+                    s: this.hsl.s,
+                    l: this.hsl.l,
+                    a: this.hsl.a,
+                    source: 'rgb',
+                };
+            }
+        }
+        if (!data) {
+            return;
+        }
+        this.onChange.emit({ data, $event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: HueComponent, selector: "color-hue", inputs: { hsl: "hsl", pointer: "pointer", radius: "radius", shadow: "shadow", hidePointer: "hidePointer", direction: "direction" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
+    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
+      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
+        <div class="color-hue-slider" [ngStyle]="pointer"></div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".color-hue{position:absolute;inset:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.color-hue-vertical{background:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { HueComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-hue', template: `
+  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
+    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
+      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
+        <div class="color-hue-slider" [ngStyle]="pointer"></div>
+      </div>
+    </div>
+  </div>
+  `, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".color-hue{position:absolute;inset:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.color-hue-vertical{background:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}\n"] }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], shadow: [{
+                type: Input
+            }], hidePointer: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+class HueModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: HueModule, declarations: [HueComponent], imports: [CommonModule, CoordinatesModule], exports: [HueComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueModule, imports: [CommonModule, CoordinatesModule] });
+}
+export { HueModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: HueModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HueComponent],
+                    exports: [HueComponent],
+                    imports: [CommonModule, CoordinatesModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvaHVlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxRQUFRLEVBRVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBRzVELE1Ba0RhLFlBQVk7SUFDZCxHQUFHLENBQVE7SUFDWCxPQUFPLENBQTBCO0lBQ2pDLE1BQU0sQ0FBVTtJQUNoQixNQUFNLENBQVU7SUFDaEIsV0FBVyxHQUFHLEtBQUssQ0FBQztJQUNwQixTQUFTLEdBQThCLFlBQVksQ0FBQztJQUNuRCxRQUFRLEdBQUcsSUFBSSxZQUFZLEVBQXVDLENBQUM7SUFDN0UsSUFBSSxHQUFHLEtBQUssQ0FBQztJQUNiLEdBQUcsR0FBRyxFQUFFLENBQUM7SUFFVCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLFlBQVksRUFBRTtZQUNuQyxJQUFJLENBQUMsSUFBSSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsR0FBRyxDQUFDO1NBQzFDO2FBQU07WUFDTCxJQUFJLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztTQUNsRDtJQUNILENBQUM7SUFDRCxZQUFZLENBQUMsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsTUFBTSxFQUFFO1FBQ2pFLElBQUksSUFBNEIsQ0FBQztRQUNqQyxJ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cm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgTmdNb2R1bGUsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29vcmRpbmF0ZXNNb2R1bGUgfSBmcm9tICcuL2Nvb3JkaW5hdGVzLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBIU0xBLCBIU0xBc291cmNlIH0gZnJvbSAnLi9oZWxwZXJzL2NvbG9yLmludGVyZmFjZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1odWUnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwiY29sb3ItaHVlIGNvbG9yLWh1ZS17e2RpcmVjdGlvbn19XCIgW3N0eWxlLmJvcmRlci1yYWRpdXMucHhdPVwicmFkaXVzXCIgW3N0eWxlLmJveC1zaGFkb3ddPVwic2hhZG93XCI+XG4gICAgPGRpdiBuZ3gtY29sb3ItY29vcmRpbmF0ZXMgKGNvb3JkaW5hdGVzQ2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCIgY2xhc3M9XCJjb2xvci1odWUtY29udGFpbmVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY29sb3ItaHVlLXBvaW50ZXJcIiBbc3R5bGUubGVmdF09XCJsZWZ0XCIgW3N0eWxlLnRvcF09XCJ0b3BcIiAqbmdJZj1cIiFoaWRlUG9pbnRlclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29sb3ItaHVlLXNsaWRlclwiIFtuZ1N0eWxlXT1cInBvaW50ZXJcIj48L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5jb2xvci1odWUge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgYm90dG9tOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHJpZ2h0OiAwO1xuICAgIH1cbiAgICAuY29sb3ItaHVlLWNvbnRhaW5lciB7XG4gICAgICBtYXJnaW46IDAgMnB4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgIH1cbiAgICAuY29sb3ItaHVlLXBvaW50ZXIge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIH1cbiAgICAuY29sb3ItaHVlLXNsaWRlciB7XG4gICAgICBtYXJnaW4tdG9wOiAxcHg7XG4gICAgICB3aWR0aDogNHB4O1xuICAgICAgYm9yZGVyLXJhZGl1czogMXB4O1xuICAgICAgaGVpZ2h0OiA4cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMnB4IHJnYmEoMCwgMCwgMCwgLjYpO1xuICAgICAgYmFja2dyb3VuZDogI2ZmZjtcbiAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgtMnB4KTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1ob3Jpem9udGFsIHtcbiAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgI2YwMCAwJSwgI2ZmMCAxNyUsICMwZjBcbiAgICAgICAgMzMlLCAjMGZmIDUwJSwgIzAwZiA2NyUsICNmMGYgODMlLCAjZjAwIDEwMCUpO1xuICAgIH1cbiAgICAuY29sb3ItaHVlLXZlcnRpY2FsIHtcbiAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCh0byB0b3AsICNmMDAgMCUsICNmZjAgMTclLCAjMGYwIDMzJSxcbiAgICAgICAgIzBmZiA1MCUsICMwMGYgNjclLCAjZjBmIDgzJSwgI2YwMCAxMDAlKTtcbiAgICB9XG4gIGAsXG4gIF0sXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgSHVlQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgaHNsITogSFNMQTtcbiAgQElucHV0KCkgcG9pbnRlciE6IFJlY29yZDxzdHJpbmcsIHN0cmluZz47XG4gIEBJbnB1dCgpIHJhZGl1cyE6IG51bWJlcjtcbiAgQElucHV0KCkgc2hhZG93ITogc3RyaW5nO1xuICBASW5wdXQoKSBoaWRlUG9pbnRlciA9IGZhbHNlO1xuICBASW5wdXQoKSBkaXJlY3Rpb246ICdob3Jpem9udGFsJyB8ICd2ZXJ0aWNhbCcgPSAnaG9yaXpvbnRhbCc7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8eyBkYXRhOiBIU0xBc291cmNlOyAkZXZlbnQ6IEV2ZW50IH0+KCk7XG4gIGxlZnQgPSAnMHB4JztcbiAgdG9wID0gJyc7XG5cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcpIHtcbiAgICAgIHRoaXMubGVmdCA9IGAke3RoaXMuaHNsLmggKiAxMDAgLyAzNjB9JWA7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMudG9wID0gYCR7LSh0aGlzLmhzbC5oICogMTAwIC8gMzYwKSArIDEwMH0lYDtcbiAgICB9XG4gIH1cbiAgaGFuZGxlQ2hhbmdlKHsgdG9wLCBsZWZ0LCBjb250YWluZXJIZWlnaHQsIGNvbnRhaW5lcldpZHRoLCAkZXZlbnQgfSk6IHZvaWQge1xuICAgIGxldCBkYXRhOiBIU0xBc291cmNlIHwgdW5kZWZpbmVkO1xuICAgIGlmICh0aGlzLmRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJykge1xuICAgICAgbGV0IGg6IG51bWJlcjtcbiAgICAgIGlmICh0b3AgPCAwKSB7XG4gICAgICAgIGggPSAzNTk7XG4gICAgICB9IGVsc2UgaWYgKHRvcCA+IGNvbnRhaW5lckhlaWdodCkge1xuICAgICAgICBoID0gMDtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGNvbnN0IHBlcmNlbnQgPSAtKHRvcCAqIDEwMCAvIGNvbnRhaW5lckhlaWdodCkgKyAxMDA7XG4gICAgICAgIGggPSAzNjAgKiBwZXJjZW50IC8gMTAwO1xuICAgICAgfVxuXG4gICAgICBpZiAodGhpcy5oc2wuaCAhPT0gaCkge1xuICAgICAgICBkYXRhID0ge1xuICAgICAgICAgIGgsXG4gICAgICAgICAgczogdGhpcy5oc2wucyxcbiAgICAgICAgICBsOiB0aGlzLmhzbC5sLFxuICAgICAgICAgIGE6IHRoaXMuaHNsLmEsXG4gICAgICAgICAgc291cmNlOiAncmdiJyxcbiAgICAgICAgfTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgbGV0IGg6IG51bWJlcjtcbiAgICAgIGlmIChsZWZ0IDwgMCkge1xuICAgICAgICBoID0gMDtcbiAgICAgIH0gZWxzZSBpZiAobGVmdCA+IGNvbnRhaW5lcldpZHRoKSB7XG4gICAgICAgIGggPSAzNTk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBjb25zdCBwZXJjZW50ID0gbGVmdCAqIDEwMCAvIGNvbnRhaW5lcldpZHRoO1xuICAgICAgICBoID0gMzYwICogcGVyY2VudCAvIDEwMDtcbiAgICAgIH1cblxuICAgICAgaWYgKHRoaXMuaHNsLmggIT09IGgpIHtcbiAgICAgICAgZGF0YSA9IHtcbiAgICAgICAgICBoLFxuICAgICAgICAgIHM6IHRoaXMuaHNsLnMsXG4gICAgICAgICAgbDogdGhpcy5oc2wubCxcbiAgICAgICAgICBhOiB0aGlzLmhzbC5hLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH07XG4gICAgICB9XG4gICAgfVxuXG4gICAgaWYgKCFkYXRhKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgdGhpcy5vbkNoYW5nZS5lbWl0KHsgZGF0YSwgJGV2ZW50IH0pO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW0h1ZUNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtIdWVDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDb29yZGluYXRlc01vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIEh1ZU1vZHVsZSB7fVxuIl19

package/esm2022/material/material.component.mjs

@@ -0,0 +1,188 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, EditableInputModule, isValidHex, RaisedModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+class MaterialComponent extends ColorWrap {
+    HEXinput = {
+        width: '100%',
+        marginTop: '12px',
+        fontSize: '15px',
+        color: 'rgb(51, 51, 51)',
+        padding: '0px',
+        'border-width': '0px 0px 2px',
+        outline: 'none',
+        height: '30px',
+    };
+    HEXlabel = {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        fontSize: '11px',
+        color: 'rgb(153, 153, 153)',
+        'text-transform': 'capitalize',
+    };
+    RGBinput = {
+        width: '100%',
+        marginTop: '12px',
+        fontSize: '15px',
+        color: '#333',
+        padding: '0px',
+        border: '0px',
+        'border-bottom': '1px solid #eee',
+        outline: 'none',
+        height: '30px',
+    };
+    RGBlabel = {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        fontSize: '11px',
+        color: '#999999',
+        'text-transform': 'capitalize',
+    };
+    zDepth = 1;
+    radius = 1;
+    background = '#fff';
+    disableAlpha = true;
+    constructor() {
+        super();
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    handleInputChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                this.handleValueChange({
+                    data: {
+                        hex: data.hex,
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else if (data.r || data.g || data.b) {
+            this.handleValueChange({
+                data: {
+                    r: data.r || this.rgb.r,
+                    g: data.g || this.rgb.g,
+                    b: data.b || this.rgb.b,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+    }
+    afterValidChange() {
+        this.HEXinput['border-bottom-color'] = this.hex;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: MaterialComponent, selector: "color-material", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MaterialComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => MaterialComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+  <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+    <div class="material-picker {{ className }}">
+      <color-editable-input label="hex" [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: HEXinput, label: HEXlabel}"
+      ></color-editable-input>
+      <div class="material-split">
+        <div class="material-third">
+          <color-editable-input label="r" [value]="rgb.r"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="g" [value]="rgb.g"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="b" [value]="rgb.b"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+      </div>
+    </div>
+  </color-raised>
+  `, isInline: true, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }, { kind: "component", type: i1.RaisedComponent, selector: "color-raised", inputs: ["zDepth", "radius", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { MaterialComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: MaterialComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-material', template: `
+  <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+    <div class="material-picker {{ className }}">
+      <color-editable-input label="hex" [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: HEXinput, label: HEXlabel}"
+      ></color-editable-input>
+      <div class="material-split">
+        <div class="material-third">
+          <color-editable-input label="r" [value]="rgb.r"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="g" [value]="rgb.g"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="b" [value]="rgb.b"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+      </div>
+    </div>
+  </color-raised>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MaterialComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => MaterialComponent),
+                        },
+                    ], styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+class ColorMaterialModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorMaterialModule, imports: [CommonModule, EditableInputModule, RaisedModule] });
+}
+export { ColorMaterialModule };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ColorMaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [MaterialComponent],
+                    declarations: [MaterialComponent],
+                    imports: [CommonModule, EditableInputModule, RaisedModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9tYXRlcmlhbC9tYXRlcmlhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUFFLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFVLE1BQU0sV0FBVyxDQUFDO0FBQzdGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFFbkQsTUFpRWEsaUJBQWtCLFNBQVEsU0FBUztJQUM5QyxRQUFRLEdBQTRCO1FBQ2xDLEtBQUssRUFBRSxNQUFNO1FBQ2IsU0FBUyxFQUFFLE1BQU07UUFDakIsUUFBUSxFQUFFLE1BQU07UUFDaEIsS0FBSyxFQUFFLGlCQUFpQjtRQUN4QixPQUFPLEVBQUUsS0FBSztRQUNkLGNBQWMsRUFBRSxhQUFhO1FBQzdCLE9BQU8sRUFBRSxNQUFNO1FBQ2YsTUFBTSxFQUFFLE1BQU07S0FDZixDQUFDO0lBQ0YsUUFBUSxHQUE0QjtRQUNsQyxRQUFRLEVBQUUsVUFBVTtRQUNwQixHQUFHLEVBQUUsS0FBSztRQUNWLElBQUksRUFBRSxLQUFLO1FBQ1gsUUFBUSxFQUFFLE1BQU07UUFDaEIsS0FBSyxFQUFFLG9CQUFvQjtRQUMzQixnQkFBZ0IsRUFBRSxZQUFZO0tBQy9CLENBQUM7SUFDRixRQUFRLEdBQTRCO1FBQ2xDLEtBQUssRUFBRSxNQUFNO1FBQ2IsU0FBUyxFQUFFLE1BQU07UUFDakIsUUFBUSxFQUFFLE1BQU07UUFDaEIsS0FBSyxFQUFFLE1BQU07UUFDYixPQUFPLEVBQUUsS0FBSztRQUNkLE1BQU0sRUFB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USxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7O0FBd0NSLE1BS2EsbUJBQW1CO3VHQUFuQixtQkFBbUI7d0dBQW5CLG1CQUFtQixpQkFyRm5CLGlCQUFpQixhQW1GbEIsWUFBWSxFQUFFLG1CQUFtQixFQUFFLFlBQVksYUFuRjlDLGlCQUFpQjt3R0FxRmpCLG1CQUFtQixZQUZwQixZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWTs7U0FFOUMsbUJBQW1COzJGQUFuQixtQkFBbUI7a0JBTC9CLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQzVCLFlBQVksRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUNqQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxDQUFDO2lCQUMzRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29sb3JXcmFwLCBFZGl0YWJsZUlucHV0TW9kdWxlLCBpc1ZhbGlkSGV4LCBSYWlzZWRNb2R1bGUsIHpEZXB0aCB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItbWF0ZXJpYWwnLFxuICB0ZW1wbGF0ZTogYFxuICA8Y29sb3ItcmFpc2VkIFt6RGVwdGhdPVwiekRlcHRoXCIgW2JhY2tncm91bmRdPVwiYmFja2dyb3VuZFwiIFtyYWRpdXNdPVwicmFkaXVzXCI+XG4gICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cImhleFwiIFt2YWx1ZV09XCJoZXhcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IEhFWGlucHV0LCBsYWJlbDogSEVYbGFiZWx9XCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXNwbGl0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXRlcmlhbC10aGlyZFwiPlxuICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cInJcIiBbdmFsdWVdPVwicmdiLnJcIlxuICAgICAgICAgICAgW3N0eWxlXT1cInsgaW5wdXQ6IFJHQmlucHV0LCBsYWJlbDogUkdCbGFiZWwgfVwiXG4gICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlSW5wdXRDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwibWF0ZXJpYWwtdGhpcmRcIj5cbiAgICAgICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXQgbGFiZWw9XCJnXCIgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBSR0JpbnB1dCwgbGFiZWw6IFJHQmxhYmVsIH1cIlxuICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUlucHV0Q2hhbmdlKCRldmVudClcIlxuICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXRoaXJkXCI+XG4gICAgICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0IGxhYmVsPVwiYlwiIFt2YWx1ZV09XCJyZ2IuYlwiXG4gICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVJbnB1dENoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9jb2xvci1yYWlzZWQ+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLm1hdGVyaWFsLXBpY2tlciB7XG4gICAgd2lkdGg6IDEzMHB4O1xuICAgIGhlaWdodDogMTMwcHg7XG4gICAgcGFkZGluZzogMTZweDtcbiAgICBmb250LWZhbWlseTogUm9ib3RvO1xuICB9XG4gIC5tYXRlcmlhbC1zcGxpdCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IC0xMHB4O1xuICAgIHBhZGRpbmctdG9wOiAxMXB4O1xuICB9XG4gIC5tYXRlcmlhbC10aGlyZCB7XG4gICAgZmxleDogMSAxIDAlO1xuICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE1hdGVyaWFsQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWF0ZXJpYWxDb21wb25lbnQpLFxuICAgIH0sXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTWF0ZXJpYWxDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICBIRVhpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBtYXJnaW5Ub3A6ICcxMnB4JyxcbiAgICBmb250U2l6ZTogJzE1cHgnLFxuICAgIGNvbG9yOiAncmdiKDUxLCA1MSwgNTEpJyxcbiAgICBwYWRkaW5nOiAnMHB4JyxcbiAgICAnYm9yZGVyLXdpZHRoJzogJzBweCAwcHggMnB4JyxcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgaGVpZ2h0OiAnMzBweCcsXG4gIH07XG4gIEhFWGxhYmVsOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6ICcwcHgnLFxuICAgIGxlZnQ6ICcwcHgnLFxuICAgIGZvbnRTaXplOiAnMTFweCcsXG4gICAgY29sb3I6ICdyZ2IoMTUzLCAxNTMsIDE1MyknLFxuICAgICd0ZXh0LXRyYW5zZm9ybSc6ICdjYXBpdGFsaXplJyxcbiAgfTtcbiAgUkdCaW5wdXQ6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgbWFyZ2luVG9wOiAnMTJweCcsXG4gICAgZm9udFNpemU6ICcxNXB4JyxcbiAgICBjb2xvcjogJyMzMzMnLFxuICAgIHBhZGRpbmc6ICcwcHgnLFxuICAgIGJvcmRlcjogJzBweCcsXG4gICAgJ2JvcmRlci1ib3R0b20nOiAnMXB4IHNvbGlkICNlZWUnLFxuICAgIG91dGxpbmU6ICdub25lJyxcbiAgICBoZWlnaHQ6ICczMHB4JyxcbiAgfTtcbiAgUkdCbGFiZWw6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogJzBweCcsXG4gICAgbGVmdDogJzBweCcsXG4gICAgZm9udFNpemU6ICcxMXB4JyxcbiAgICBjb2xvcjogJyM5OTk5OTknLFxuICAgICd0ZXh0LXRyYW5zZm9ybSc6ICdjYXBpdGFsaXplJyxcbiAgfTtcbiAgQElucHV0KCkgekRlcHRoOiB6RGVwdGggPSAxO1xuICBASW5wdXQoKSByYWRpdXMgPSAxO1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kID0gJyNmZmYnO1xuICBkaXNhYmxlQWxwaGEgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxuXG4gIGhhbmRsZUlucHV0Q2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICBpZiAoZGF0YS5oZXgpIHtcbiAgICAgIGlmIChpc1ZhbGlkSGV4KGRhdGEuaGV4KSkge1xuICAgICAgICB0aGlzLmhhbmRsZVZhbHVlQ2hhbmdlKHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IGRhdGEuaGV4LFxuICAgICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgICB9LFxuICAgICAgICAgICRldmVudCxcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChkYXRhLnIgfHwgZGF0YS5nIHx8IGRhdGEuYikge1xuICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBhZnRlclZhbGlkQ2hhbmdlKCkge1xuICAgIHRoaXMuSEVYaW5wdXRbJ2JvcmRlci1ib3R0b20tY29sb3InXSA9IHRoaXMuaGV4O1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGV4cG9ydHM6IFtNYXRlcmlhbENvbXBvbmVudF0sXG4gIGRlY2xhcmF0aW9uczogW01hdGVyaWFsQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRWRpdGFibGVJbnB1dE1vZHVsZSwgUmFpc2VkTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JNYXRlcmlhbE1vZHVsZSB7IH1cbiJdfQ==

package/esm2022/photoshop/photoshop-button.component.mjs

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+class PhotoshopButtonComponent {
+    label = '';
+    active = false;
+    onClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopButtonComponent, selector: "color-photoshop-button", inputs: { label: "label", active: "active" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div class="photoshop-button"  [class.active]="active"
+      (click)="onClick.emit($event)"
+    >
+      {{ label }}
+    </div>
+  `, isInline: true, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { PhotoshopButtonComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-photoshop-button', template: `
+    <div class="photoshop-button"  [class.active]="active"
+      (click)="onClick.emit($event)"
+    >
+      {{ label }}
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3Bob3Rvc2hvcC9waG90b3Nob3AtYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7QUFFdkIsTUFvQ2Esd0JBQXdCO0lBQzFCLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDWCxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ2QsT0FBTyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7dUdBSG5DLHdCQUF3QjsyRkFBeEIsd0JBQXdCLDZJQWxDekI7Ozs7OztHQU1UOztTQTRCVSx3QkFBd0I7MkZBQXhCLHdCQUF3QjtrQkFwQ3BDLFNBQVM7K0JBQ0Usd0JBQXdCLFlBQ3hCOzs7Ozs7R0FNVCxtQkF5QmdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXBob3Rvc2hvcC1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtYnV0dG9uXCIgIFtjbGFzcy5hY3RpdmVdPVwiYWN0aXZlXCJcbiAgICAgIChjbGljayk9XCJvbkNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgPlxuICAgICAge3sgbGFiZWwgfX1cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5waG90b3Nob3AtYnV0dG9uIHtcbiAgICAgIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgLTE4MGRlZyxcbiAgICAgICAgcmdiKDI1NSwgMjU1LCAyNTUpIDAlLFxuICAgICAgICByZ2IoMjMwLCAyMzAsIDIzMCkgMTAwJVxuICAgICAgKTtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkIHJnYigxMzUsIDEzNSwgMTM1KTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgIGhlaWdodDogMjJweDtcbiAgICAgIGJveC1zaGFkb3c6IHJnYigyMzQsIDIzNCwgMjM0KSAwcHggMXB4IDBweCAwcHg7XG4gICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICBjb2xvcjogcmdiKDAsIDAsIDApO1xuICAgICAgbGluZS1oZWlnaHQ6IDIwcHg7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgICBtYXJnaW4tYm90dG9tOiAxMHB4O1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWJ1dHRvbi5hY3RpdmUge1xuICAgICAgYm94LXNoYWRvdzogMCAwIDAgMXB4ICM4Nzg3ODc7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFBob3Rvc2hvcEJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGxhYmVsID0gJyc7XG4gIEBJbnB1dCgpIGFjdGl2ZSA9IGZhbHNlO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG59XG4iXX0=

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

@@ -0,0 +1,214 @@
+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";
+class PhotoshopFieldsComponent {
+    rgb;
+    hsv;
+    hex;
+    onChange = new EventEmitter();
+    RGBinput = {
+        marginLeft: '35%',
+        width: '40%',
+        height: '22px',
+        border: '1px solid rgb(136, 136, 136)',
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 1px inset, rgb(236, 236, 236) 0px 1px 0px 0px',
+        marginBottom: '2px',
+        fontSize: '13px',
+        paddingLeft: '3px',
+        marginRight: '10px',
+    };
+    RGBwrap = {
+        position: 'relative',
+    };
+    RGBlabel = {
+        left: '0px',
+        width: '34px',
+        textTransform: 'uppercase',
+        fontSize: '13px',
+        height: '24px',
+        lineHeight: '24px',
+        position: 'absolute',
+    };
+    HEXinput = {
+        marginLeft: '20%',
+        width: '80%',
+        height: '22px',
+        border: '1px solid #888888',
+        boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',
+        marginBottom: '3px',
+        fontSize: '13px',
+        paddingLeft: '3px',
+    };
+    HEXwrap = {
+        position: 'relative',
+    };
+    HEXlabel = {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        width: '14px',
+        textTransform: 'uppercase',
+        fontSize: '13px',
+        height: '24px',
+        lineHeight: '24px',
+    };
+    round(v) {
+        return Math.round(v);
+    }
+    handleValueChange({ data, $event }) {
+        if (data['#']) {
+            if (isValidHex(data['#'])) {
+                this.onChange.emit({
+                    data: {
+                        hex: data['#'],
+                        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.h || data.s || data.v) {
+            this.onChange.emit({
+                data: {
+                    h: data.h || this.hsv.h,
+                    s: data.s || this.hsv.s,
+                    v: data.v || this.hsv.v,
+                    source: 'hsv',
+                },
+                $event,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: PhotoshopFieldsComponent, selector: "color-photoshop-fields", inputs: { rgb: "rgb", hsv: "hsv", hex: "hex" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+  <div class="photoshop-fields">
+    <color-editable-input
+      [value]="round(hsv.h)"
+      label="h"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="round(hsv.s * 100)"
+      label="s"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="round(hsv.v * 100)"
+      label="v"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <div class="photoshop-divider"></div>
+    <color-editable-input
+      [value]="rgb.r"
+      label="r"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="rgb.g"
+      label="g"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="rgb.b"
+      label="b"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <div class="photoshop-divider"></div>
+    <color-editable-input
+      [value]="hex.replace('#', '')"
+      label="#"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
+    ></color-editable-input>
+    <div class="photoshop-field-symbols">
+      <div class="photoshop-symbol">°</div>
+      <div class="photoshop-symbol">%</div>
+      <div class="photoshop-symbol">%</div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\n"], dependencies: [{ kind: "component", type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+export { PhotoshopFieldsComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PhotoshopFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-photoshop-fields', template: `
+  <div class="photoshop-fields">
+    <color-editable-input
+      [value]="round(hsv.h)"
+      label="h"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="round(hsv.s * 100)"
+      label="s"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="round(hsv.v * 100)"
+      label="v"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <div class="photoshop-divider"></div>
+    <color-editable-input
+      [value]="rgb.r"
+      label="r"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="rgb.g"
+      label="g"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <color-editable-input
+      [value]="rgb.b"
+      label="b"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: RGBinput, wrap: RGBwrap, label: RGBlabel}"
+    ></color-editable-input>
+    <div class="photoshop-divider"></div>
+    <color-editable-input
+      [value]="hex.replace('#', '')"
+      label="#"
+      (onChange)="handleValueChange($event)"
+      [style]="{input: HEXinput, wrap: HEXwrap, label: HEXlabel}"
+    ></color-editable-input>
+    <div class="photoshop-field-symbols">
+      <div class="photoshop-symbol">°</div>
+      <div class="photoshop-symbol">%</div>
+      <div class="photoshop-symbol">%</div>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-fields{padding-top:5px;padding-bottom:9px;width:85px;position:relative}.photoshop-field-symbols{position:absolute;top:5px;right:-7px;font-size:13px}.photoshop-symbol{height:24px;line-height:24px;padding-bottom:7px}.photoshop-divider{height:5px}\n"] }]
+        }], propDecorators: { rgb: [{
+                type: Input
+            }], hsv: [{
+                type: Input
+            }], hex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWZpZWxkcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3Bob3Rvc2hvcC9waG90b3Nob3AtZmllbGRzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsVUFBVSxFQUFZLE1BQU0sV0FBVyxDQUFDOzs7QUFFakQsTUFrRmEsd0JBQXdCO0lBQzFCLEdBQUcsQ0FBTztJQUNWLEdBQUcsQ0FBTztJQUNWLEdBQUcsQ0FBVTtJQUNaLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBQzdDLFFBQVEsR0FBMkI7UUFDakMsVUFBVSxFQUFFLEtBQUs7UUFDakIsS0FBSyxFQUFFLEtBQUs7UUFDWixNQUFNLEVBQUUsTUFBTTtRQUNkLE1BQU0sRUFBRSw4QkFBOEI7UUFDdEMsU0FBUyxFQUNQLDBFQUEwRTtRQUM1RSxZQUFZLEVBQUUsS0FBSztRQUNuQixRQUFRLEVBQUUsTUFBTTtRQUNoQixXQUFXLEVBQUUsS0FBSztRQUNsQixXQUFXLEVBQUUsTUFBTTtLQUNwQixDQUFDO0lBQ0YsT0FBTyxHQUEyQjtRQUNoQyxRQUFRLEVBQUUsVUFBVTtLQUNyQixDQUFDO0lBQ0YsUUFBUSxHQUEyQjtRQUNqQyxJQUFJLEVBQUUsS0FBSztRQUNYLEtBQUssRUFBRSxNQUFNO1FBQ2IsYUFBYSxFQUFFLFdBQVc7UUFDMUIsUUFBUSxFQUFFLE1BQU07UUFDaEIsTUFBTSxFQUFFLE1BQU07UUFDZCxVQUFVLEVBQUUsTUFBTTtRQUNsQixRQUFRLEVBQUUsVUFBVTtLQUNyQixDQUFDO0lBQ0YsUUFBUSxHQUEyQjtRQUNqQyxVQUFVLEVBQUUsS0FBSztRQUNqQixLQUFLLEVBQUUsS0FBSztRQUNaLE1BQU0sRUFBRSxN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Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgaXNWYWxpZEhleCwgSFNWLCBSR0IgfSBmcm9tICduZ3gtY29sb3InO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1waG90b3Nob3AtZmllbGRzJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1maWVsZHNcIj5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyb3VuZChoc3YuaClcIlxuICAgICAgbGFiZWw9XCJoXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyb3VuZChoc3YucyAqIDEwMClcIlxuICAgICAgbGFiZWw9XCJzXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyb3VuZChoc3YudiAqIDEwMClcIlxuICAgICAgbGFiZWw9XCJ2XCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWRpdmlkZXJcIj48L2Rpdj5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyZ2IuclwiXG4gICAgICBsYWJlbD1cInJcIlxuICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgW3N0eWxlXT1cIntpbnB1dDogUkdCaW5wdXQsIHdyYXA6IFJHQndyYXAsIGxhYmVsOiBSR0JsYWJlbH1cIlxuICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgIGxhYmVsPVwiZ1wiXG4gICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbc3R5bGVdPVwie2lucHV0OiBSR0JpbnB1dCwgd3JhcDogUkdCd3JhcCwgbGFiZWw6IFJHQmxhYmVsfVwiXG4gICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwicmdiLmJcIlxuICAgICAgbGFiZWw9XCJiXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWRpdmlkZXJcIj48L2Rpdj5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJoZXgucmVwbGFjZSgnIycsICcnKVwiXG4gICAgICBsYWJlbD1cIiNcIlxuICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgW3N0eWxlXT1cIntpbnB1dDogSEVYaW5wdXQsIHdyYXA6IEhFWHdyYXAsIGxhYmVsOiBIRVhsYWJlbH1cIlxuICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtZmllbGQtc3ltYm9sc1wiPlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1zeW1ib2xcIj7CsDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1zeW1ib2xcIj4lPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXN5bWJvbFwiPiU8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAucGhvdG9zaG9wLWZpZWxkcyB7XG4gICAgICBwYWRkaW5nLXRvcDogNXB4O1xuICAgICAgcGFkZGluZy1ib3R0b206IDlweDtcbiAgICAgIHdpZHRoOiA4NXB4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWZpZWxkLXN5bWJvbHMge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiA1cHg7XG4gICAgICByaWdodDogLTdweDtcbiAgICAgIGZvbnQtc2l6ZTogMTNweDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1zeW1ib2wge1xuICAgICAgaGVpZ2h0OiAyNHB4O1xuICAgICAgbGluZS1oZWlnaHQ6IDI0cHg7XG4gICAgICBwYWRkaW5nLWJvdHRvbTogN3B4O1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWRpdmlkZXIge1xuICAgICAgaGVpZ2h0OiA1cHg7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFBob3Rvc2hvcEZpZWxkc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHJnYiE6IFJHQjtcbiAgQElucHV0KCkgaHN2ITogSFNWO1xuICBASW5wdXQoKSBoZXghOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBSR0JpbnB1dDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBtYXJnaW5MZWZ0OiAnMzUlJyxcbiAgICB3aWR0aDogJzQwJScsXG4gICAgaGVpZ2h0OiAnMjJweCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkIHJnYigxMzYsIDEzNiwgMTM2KScsXG4gICAgYm94U2hhZG93OlxuICAgICAgJ3JnYmEoMCwgMCwgMCwgMC4xKSAwcHggMXB4IDFweCBpbnNldCwgcmdiKDIzNiwgMjM2LCAyMzYpIDBweCAxcHggMHB4IDBweCcsXG4gICAgbWFyZ2luQm90dG9tOiAnMnB4JyxcbiAgICBmb250U2l6ZTogJzEzcHgnLFxuICAgIHBhZGRpbmdMZWZ0OiAnM3B4JyxcbiAgICBtYXJnaW5SaWdodDogJzEwcHgnLFxuICB9O1xuICBSR0J3cmFwOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9O1xuICBSR0JsYWJlbDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBsZWZ0OiAnMHB4JyxcbiAgICB3aWR0aDogJzM0cHgnLFxuICAgIHRleHRUcmFuc2Zvcm06ICd1cHBlcmNhc2UnLFxuICAgIGZvbnRTaXplOiAnMTNweCcsXG4gICAgaGVpZ2h0OiAnMjRweCcsXG4gICAgbGluZUhlaWdodDogJzI0cHgnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9O1xuICBIRVhpbnB1dDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBtYXJnaW5MZWZ0OiAnMjAlJyxcbiAgICB3aWR0aDogJzgwJScsXG4gICAgaGVpZ2h0OiAnMjJweCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICM4ODg4ODgnLFxuICAgIGJveFNoYWRvdzogJ2luc2V0IDAgMXB4IDFweCByZ2JhKDAsMCwwLC4xKSwgMCAxcHggMCAwICNFQ0VDRUMnLFxuICAgIG1hcmdpbkJvdHRvbTogJzNweCcsXG4gICAgZm9udFNpemU6ICcxM3B4JyxcbiAgICBwYWRkaW5nTGVmdDogJzNweCcsXG4gIH07XG4gIEhFWHdyYXA6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIH07XG4gIEhFWGxhYmVsOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogJzBweCcsXG4gICAgbGVmdDogJzBweCcsXG4gICAgd2lkdGg6ICcxNHB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiAndXBwZXJjYXNlJyxcbiAgICBmb250U2l6ZTogJzEzcHgnLFxuICAgIGhlaWdodDogJzI0cHgnLFxuICAgIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgfTtcblxuICByb3VuZCh2KSB7XG4gICAgcmV0dXJuIE1hdGgucm91bmQodik7XG4gIH1cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIGlmIChkYXRhWycjJ10pIHtcbiAgICAgIGlmIChpc1ZhbGlkSGV4KGRhdGFbJyMnXSkpIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IGRhdGFbJyMnXSxcbiAgICAgICAgICAgIHNvdXJjZTogJ2hleCcsXG4gICAgICAgICAgfSxcbiAgICAgICAgICAkZXZlbnQsXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH0gZWxzZSBpZiAoZGF0YS5yIHx8IGRhdGEuZyB8fCBkYXRhLmIpIHtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9IGVsc2UgaWYgKGRhdGEuaCB8fCBkYXRhLnMgfHwgZGF0YS52KSB7XG4gICAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoe1xuICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgaDogZGF0YS5oIHx8IHRoaXMuaHN2LmgsXG4gICAgICAgICAgczogZGF0YS5zIHx8IHRoaXMuaHN2LnMsXG4gICAgICAgICAgdjogZGF0YS52IHx8IHRoaXMuaHN2LnYsXG4gICAgICAgICAgc291cmNlOiAnaHN2JyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgfSk7XG4gICAgfVxuICB9XG59XG4iXX0=