ngx-color 8.0.0 → 8.0.3

package/esm2020/material/material.component.mjs

@@ -0,0 +1,186 @@
+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";
+export class MaterialComponent extends ColorWrap {
+    constructor() {
+        super();
+        this.HEXinput = {
+            width: '100%',
+            marginTop: '12px',
+            fontSize: '15px',
+            color: 'rgb(51, 51, 51)',
+            padding: '0px',
+            'border-width': '0px 0px 2px',
+            outline: 'none',
+            height: '30px',
+        };
+        this.HEXlabel = {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            fontSize: '11px',
+            color: 'rgb(153, 153, 153)',
+            'text-transform': 'capitalize',
+        };
+        this.RGBinput = {
+            width: '100%',
+            marginTop: '12px',
+            fontSize: '15px',
+            color: '#333',
+            padding: '0px',
+            border: '0px',
+            'border-bottom': '1px solid #eee',
+            outline: 'none',
+            height: '30px',
+        };
+        this.RGBlabel = {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            fontSize: '11px',
+            color: '#999999',
+            'text-transform': 'capitalize',
+        };
+        this.zDepth = 1;
+        this.radius = 1;
+        this.background = '#fff';
+        this.disableAlpha = true;
+    }
+    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;
+    }
+}
+MaterialComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MaterialComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", 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
+            }] } });
+export class ColorMaterialModule {
+}
+ColorMaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorMaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
+ColorMaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorMaterialModule, imports: [CommonModule, EditableInputModule, RaisedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorMaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [MaterialComponent],
+                    declarations: [MaterialComponent],
+                    imports: [CommonModule, EditableInputModule, RaisedModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9tYXRlcmlhbC9tYXRlcmlhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUFFLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFVLE1BQU0sV0FBVyxDQUFDO0FBQzdGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFtRW5ELE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxTQUFTO0lBMkM5QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBM0NWLGFBQVEsR0FBNEI7WUFDbEMsS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsTUFBTTtZQUNqQixRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsaUJBQWlCO1lBQ3hCLE9BQU8sRUFBRSxLQUFLO1lBQ2QsY0FBYyxFQUFFLGFBQWE7WUFDN0IsT0FBTyxFQUFFLE1BQU07WUFDZixNQUFNLEVBQUUsTUFBTTtTQUNmLENBQUM7UUFDRixhQUFRLEdBQTRCO1lBQ2xDLFFBQVEsRUFBRSxVQUFVO1lBQ3BCLEdBQUcsRUFBRSxLQUFLO1lBQ1YsSUFBSSxFQUFFLEtBQUs7WUFDWCxRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsb0JBQW9CO1lBQzNCLGdCQUFnQixFQUFFLFlBQVk7U0FDL0IsQ0FBQztRQUNGLGFBQVEsR0FBNEI7WUFDbEMsS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsTUFBTTtZQUNqQixRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsTUFBTTtZ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QWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSzs7QUE2Q1IsTUFBTSxPQUFPLG1CQUFtQjs7Z0hBQW5CLG1CQUFtQjtpSEFBbkIsbUJBQW1CLGlCQXJGbkIsaUJBQWlCLGFBbUZsQixZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxhQW5GOUMsaUJBQWlCO2lIQXFGakIsbUJBQW1CLFlBRnBCLFlBQVksRUFBRSxtQkFBbUIsRUFBRSxZQUFZOzJGQUU5QyxtQkFBbUI7a0JBTC9CLFFBQVE7bUJBQUM7b0JBQ1IsT0FBTyxFQUFFLENBQUMsaUJBQWlCLENBQUM7b0JBQzVCLFlBQVksRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUNqQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxDQUFDO2lCQUMzRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29sb3JXcmFwLCBFZGl0YWJsZUlucHV0TW9kdWxlLCBpc1ZhbGlkSGV4LCBSYWlzZWRNb2R1bGUsIHpEZXB0aCB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItbWF0ZXJpYWwnLFxuICB0ZW1wbGF0ZTogYFxuICA8Y29sb3ItcmFpc2VkIFt6RGVwdGhdPVwiekRlcHRoXCIgW2JhY2tncm91bmRdPVwiYmFja2dyb3VuZFwiIFtyYWRpdXNdPVwicmFkaXVzXCI+XG4gICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIj5cbiAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cImhleFwiIFt2YWx1ZV09XCJoZXhcIlxuICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IEhFWGlucHV0LCBsYWJlbDogSEVYbGFiZWx9XCJcbiAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXNwbGl0XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXRlcmlhbC10aGlyZFwiPlxuICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cInJcIiBbdmFsdWVdPVwicmdiLnJcIlxuICAgICAgICAgICAgW3N0eWxlXT1cInsgaW5wdXQ6IFJHQmlucHV0LCBsYWJlbDogUkdCbGFiZWwgfVwiXG4gICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlSW5wdXRDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwibWF0ZXJpYWwtdGhpcmRcIj5cbiAgICAgICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXQgbGFiZWw9XCJnXCIgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBSR0JpbnB1dCwgbGFiZWw6IFJHQmxhYmVsIH1cIlxuICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUlucHV0Q2hhbmdlKCRldmVudClcIlxuICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXRoaXJkXCI+XG4gICAgICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0IGxhYmVsPVwiYlwiIFt2YWx1ZV09XCJyZ2IuYlwiXG4gICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVJbnB1dENoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9jb2xvci1yYWlzZWQ+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgLm1hdGVyaWFsLXBpY2tlciB7XG4gICAgd2lkdGg6IDEzMHB4O1xuICAgIGhlaWdodDogMTMwcHg7XG4gICAgcGFkZGluZzogMTZweDtcbiAgICBmb250LWZhbWlseTogUm9ib3RvO1xuICB9XG4gIC5tYXRlcmlhbC1zcGxpdCB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBtYXJnaW4tcmlnaHQ6IC0xMHB4O1xuICAgIHBhZGRpbmctdG9wOiAxMXB4O1xuICB9XG4gIC5tYXRlcmlhbC10aGlyZCB7XG4gICAgZmxleDogMSAxIDAlO1xuICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE1hdGVyaWFsQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gTWF0ZXJpYWxDb21wb25lbnQpLFxuICAgIH0sXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTWF0ZXJpYWxDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICBIRVhpbnB1dDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgd2lkdGg6ICcxMDAlJyxcbiAgICBtYXJnaW5Ub3A6ICcxMnB4JyxcbiAgICBmb250U2l6ZTogJzE1cHgnLFxuICAgIGNvbG9yOiAncmdiKDUxLCA1MSwgNTEpJyxcbiAgICBwYWRkaW5nOiAnMHB4JyxcbiAgICAnYm9yZGVyLXdpZHRoJzogJzBweCAwcHggMnB4JyxcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgaGVpZ2h0OiAnMzBweCcsXG4gIH07XG4gIEhFWGxhYmVsOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6ICcwcHgnLFxuICAgIGxlZnQ6ICcwcHgnLFxuICAgIGZvbnRTaXplOiAnMTFweCcsXG4gICAgY29sb3I6ICdyZ2IoMTUzLCAxNTMsIDE1MyknLFxuICAgICd0ZXh0LXRyYW5zZm9ybSc6ICdjYXBpdGFsaXplJyxcbiAgfTtcbiAgUkdCaW5wdXQ6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgbWFyZ2luVG9wOiAnMTJweCcsXG4gICAgZm9udFNpemU6ICcxNXB4JyxcbiAgICBjb2xvcjogJyMzMzMnLFxuICAgIHBhZGRpbmc6ICcwcHgnLFxuICAgIGJvcmRlcjogJzBweCcsXG4gICAgJ2JvcmRlci1ib3R0b20nOiAnMXB4IHNvbGlkICNlZWUnLFxuICAgIG91dGxpbmU6ICdub25lJyxcbiAgICBoZWlnaHQ6ICczMHB4JyxcbiAgfTtcbiAgUkdCbGFiZWw6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogJzBweCcsXG4gICAgbGVmdDogJzBweCcsXG4gICAgZm9udFNpemU6ICcxMXB4JyxcbiAgICBjb2xvcjogJyM5OTk5OTknLFxuICAgICd0ZXh0LXRyYW5zZm9ybSc6ICdjYXBpdGFsaXplJyxcbiAgfTtcbiAgQElucHV0KCkgekRlcHRoOiB6RGVwdGggPSAxO1xuICBASW5wdXQoKSByYWRpdXMgPSAxO1xuICBASW5wdXQoKSBiYWNrZ3JvdW5kID0gJyNmZmYnO1xuICBkaXNhYmxlQWxwaGEgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxuXG4gIGhhbmRsZUlucHV0Q2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICBpZiAoZGF0YS5oZXgpIHtcbiAgICAgIGlmIChpc1ZhbGlkSGV4KGRhdGEuaGV4KSkge1xuICAgICAgICB0aGlzLmhhbmRsZVZhbHVlQ2hhbmdlKHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IGRhdGEuaGV4LFxuICAgICAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgICAgICB9LFxuICAgICAgICAgICRldmVudCxcbiAgICAgICAgfSk7XG4gICAgICB9XG4gICAgfSBlbHNlIGlmIChkYXRhLnIgfHwgZGF0YS5nIHx8IGRhdGEuYikge1xuICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBhZnRlclZhbGlkQ2hhbmdlKCkge1xuICAgIHRoaXMuSEVYaW5wdXRbJ2JvcmRlci1ib3R0b20tY29sb3InXSA9IHRoaXMuaGV4O1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGV4cG9ydHM6IFtNYXRlcmlhbENvbXBvbmVudF0sXG4gIGRlY2xhcmF0aW9uczogW01hdGVyaWFsQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRWRpdGFibGVJbnB1dE1vZHVsZSwgUmFpc2VkTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JNYXRlcmlhbE1vZHVsZSB7IH1cbiJdfQ==

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

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

package/esm2020/material/public_api.mjs

@@ -0,0 +1,2 @@
+export { ColorMaterialModule, MaterialComponent } from './material.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvbWF0ZXJpYWwvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7IENvbG9yTWF0ZXJpYWxNb2R1bGUsIE1hdGVyaWFsQ29tcG9uZW50IH0gZnJvbSAnLi9tYXRlcmlhbC5jb21wb25lbnQnO1xuIl19

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

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

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

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class PhotoshopButtonComponent {
+    constructor() {
+        this.label = '';
+        this.active = false;
+        this.onClick = new EventEmitter();
+    }
+}
+PhotoshopButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3Bob3Rvc2hvcC9waG90b3Nob3AtYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7QUFzQ3ZCLE1BQU0sT0FBTyx3QkFBd0I7SUFwQ3JDO1FBcUNXLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2QsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7S0FDL0M7O3FIQUpZLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLDZJQWxDekI7Ozs7OztHQU1UOzJGQTRCVSx3QkFBd0I7a0JBcENwQyxTQUFTOytCQUNFLHdCQUF3QixZQUN4Qjs7Ozs7O0dBTVQsbUJBeUJnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLOzhCQUdqQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1waG90b3Nob3AtYnV0dG9uJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWJ1dHRvblwiICBbY2xhc3MuYWN0aXZlXT1cImFjdGl2ZVwiXG4gICAgICAoY2xpY2spPVwib25DbGljay5lbWl0KCRldmVudClcIlxuICAgID5cbiAgICAgIHt7IGxhYmVsIH19XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAucGhvdG9zaG9wLWJ1dHRvbiB7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIC0xODBkZWcsXG4gICAgICAgIHJnYigyNTUsIDI1NSwgMjU1KSAwJSxcbiAgICAgICAgcmdiKDIzMCwgMjMwLCAyMzApIDEwMCVcbiAgICAgICk7XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCByZ2IoMTM1LCAxMzUsIDEzNSk7XG4gICAgICBib3JkZXItcmFkaXVzOiAycHg7XG4gICAgICBoZWlnaHQ6IDIycHg7XG4gICAgICBib3gtc2hhZG93OiByZ2IoMjM0LCAyMzQsIDIzNCkgMHB4IDFweCAwcHggMHB4O1xuICAgICAgZm9udC1zaXplOiAxNHB4O1xuICAgICAgY29sb3I6IHJnYigwLCAwLCAwKTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgICAgbWFyZ2luLWJvdHRvbTogMTBweDtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1idXR0b24uYWN0aXZlIHtcbiAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDFweCAjODc4Nzg3O1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxufSlcbmV4cG9ydCBjbGFzcyBQaG90b3Nob3BCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBhY3RpdmUgPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpO1xufVxuIl19

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

@@ -0,0 +1,212 @@
+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 PhotoshopFieldsComponent {
+    constructor() {
+        this.onChange = new EventEmitter();
+        this.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',
+        };
+        this.RGBwrap = {
+            position: 'relative',
+        };
+        this.RGBlabel = {
+            left: '0px',
+            width: '34px',
+            textTransform: 'uppercase',
+            fontSize: '13px',
+            height: '24px',
+            lineHeight: '24px',
+            position: 'absolute',
+        };
+        this.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',
+        };
+        this.HEXwrap = {
+            position: 'relative',
+        };
+        this.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,
+            });
+        }
+    }
+}
+PhotoshopFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWZpZWxkcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3Bob3Rvc2hvcC9waG90b3Nob3AtZmllbGRzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsVUFBVSxFQUFZLE1BQU0sV0FBVyxDQUFDOzs7QUFvRmpELE1BQU0sT0FBTyx3QkFBd0I7SUFsRnJDO1FBc0ZZLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQzdDLGFBQVEsR0FBMkI7WUFDakMsVUFBVSxFQUFFLEtBQUs7WUFDakIsS0FBSyxFQUFFLEtBQUs7WUFDWixNQUFNLEVBQUUsTUFBTTtZQUNkLE1BQU0sRUFBRSw4QkFBOEI7WUFDdEMsU0FBUyxFQUNQLDBFQUEwRTtZQUM1RSxZQUFZLEVBQUUsS0FBSztZQUNuQixRQUFRLEVBQUUsTUFBTTtZQUNoQixXQUFXLEVBQUUsS0FBSztZQUNsQixXQUFXLEVBQUUsTUFBTTtTQUNwQixDQUFDO1FBQ0YsWUFBTyxHQUEyQjtZQUNoQyxRQUFRLEVBQUUsVUFBVTtTQUNyQixDQUFDO1FBQ0YsYUFBUSxHQUEyQjtZQUNqQyxJQUFJLEVBQUUsS0FBSztZQUNYLEtBQUssRUFBRSxNQUFNO1lBQ2IsYUFBYSxFQUFFLFdBQVc7WUFDMUIsUUFBUSxFQUFFLE1BQU07WUFDaEIsTUFBTSxFQUFFLE1BQU07WUFDZCxVQUFVLEVBQUUsTUFBTTtZQUNsQixRQUFRLEVBQUUsVUFBVTtTQUNyQixDQUFDO1FBQ0YsYUFBUSxHQUEyQjtZQUNqQyxVQUFVLEVBQUUsS0FBSztZQUNqQixLQUFLLEVBQUUsS0FBSztZQUNaLE1BQU0sRUFBRSxNQUFNO1lBQ2QsTUFBTSxFQUFFLG1CQUFtQjtZQUMzQixT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RGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgaXNWYWxpZEhleCwgSFNWLCBSR0IgfSBmcm9tICduZ3gtY29sb3InO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1waG90b3Nob3AtZmllbGRzJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1maWVsZHNcIj5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyb3VuZChoc3YuaClcIlxuICAgICAgbGFiZWw9XCJoXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyb3VuZChoc3YucyAqIDEwMClcIlxuICAgICAgbGFiZWw9XCJzXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyb3VuZChoc3YudiAqIDEwMClcIlxuICAgICAgbGFiZWw9XCJ2XCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWRpdmlkZXJcIj48L2Rpdj5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJyZ2IuclwiXG4gICAgICBsYWJlbD1cInJcIlxuICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgW3N0eWxlXT1cIntpbnB1dDogUkdCaW5wdXQsIHdyYXA6IFJHQndyYXAsIGxhYmVsOiBSR0JsYWJlbH1cIlxuICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dFxuICAgICAgW3ZhbHVlXT1cInJnYi5nXCJcbiAgICAgIGxhYmVsPVwiZ1wiXG4gICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbc3R5bGVdPVwie2lucHV0OiBSR0JpbnB1dCwgd3JhcDogUkdCd3JhcCwgbGFiZWw6IFJHQmxhYmVsfVwiXG4gICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0XG4gICAgICBbdmFsdWVdPVwicmdiLmJcIlxuICAgICAgbGFiZWw9XCJiXCJcbiAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVWYWx1ZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtzdHlsZV09XCJ7aW5wdXQ6IFJHQmlucHV0LCB3cmFwOiBSR0J3cmFwLCBsYWJlbDogUkdCbGFiZWx9XCJcbiAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWRpdmlkZXJcIj48L2Rpdj5cbiAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXRcbiAgICAgIFt2YWx1ZV09XCJoZXgucmVwbGFjZSgnIycsICcnKVwiXG4gICAgICBsYWJlbD1cIiNcIlxuICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgW3N0eWxlXT1cIntpbnB1dDogSEVYaW5wdXQsIHdyYXA6IEhFWHdyYXAsIGxhYmVsOiBIRVhsYWJlbH1cIlxuICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtZmllbGQtc3ltYm9sc1wiPlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1zeW1ib2xcIj7CsDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1zeW1ib2xcIj4lPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXN5bWJvbFwiPiU8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAucGhvdG9zaG9wLWZpZWxkcyB7XG4gICAgICBwYWRkaW5nLXRvcDogNXB4O1xuICAgICAgcGFkZGluZy1ib3R0b206IDlweDtcbiAgICAgIHdpZHRoOiA4NXB4O1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWZpZWxkLXN5bWJvbHMge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiA1cHg7XG4gICAgICByaWdodDogLTdweDtcbiAgICAgIGZvbnQtc2l6ZTogMTNweDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1zeW1ib2wge1xuICAgICAgaGVpZ2h0OiAyNHB4O1xuICAgICAgbGluZS1oZWlnaHQ6IDI0cHg7XG4gICAgICBwYWRkaW5nLWJvdHRvbTogN3B4O1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWRpdmlkZXIge1xuICAgICAgaGVpZ2h0OiA1cHg7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFBob3Rvc2hvcEZpZWxkc0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHJnYiE6IFJHQjtcbiAgQElucHV0KCkgaHN2ITogSFNWO1xuICBASW5wdXQoKSBoZXghOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBvbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBSR0JpbnB1dDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBtYXJnaW5MZWZ0OiAnMzUlJyxcbiAgICB3aWR0aDogJzQwJScsXG4gICAgaGVpZ2h0OiAnMjJweCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkIHJnYigxMzYsIDEzNiwgMTM2KScsXG4gICAgYm94U2hhZG93OlxuICAgICAgJ3JnYmEoMCwgMCwgMCwgMC4xKSAwcHggMXB4IDFweCBpbnNldCwgcmdiKDIzNiwgMjM2LCAyMzYpIDBweCAxcHggMHB4IDBweCcsXG4gICAgbWFyZ2luQm90dG9tOiAnMnB4JyxcbiAgICBmb250U2l6ZTogJzEzcHgnLFxuICAgIHBhZGRpbmdMZWZ0OiAnM3B4JyxcbiAgICBtYXJnaW5SaWdodDogJzEwcHgnLFxuICB9O1xuICBSR0J3cmFwOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICB9O1xuICBSR0JsYWJlbDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBsZWZ0OiAnMHB4JyxcbiAgICB3aWR0aDogJzM0cHgnLFxuICAgIHRleHRUcmFuc2Zvcm06ICd1cHBlcmNhc2UnLFxuICAgIGZvbnRTaXplOiAnMTNweCcsXG4gICAgaGVpZ2h0OiAnMjRweCcsXG4gICAgbGluZUhlaWdodDogJzI0cHgnLFxuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICB9O1xuICBIRVhpbnB1dDogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICBtYXJnaW5MZWZ0OiAnMjAlJyxcbiAgICB3aWR0aDogJzgwJScsXG4gICAgaGVpZ2h0OiAnMjJweCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICM4ODg4ODgnLFxuICAgIGJveFNoYWRvdzogJ2luc2V0IDAgMXB4IDFweCByZ2JhKDAsMCwwLC4xKSwgMCAxcHggMCAwICNFQ0VDRUMnLFxuICAgIG1hcmdpbkJvdHRvbTogJzNweCcsXG4gICAgZm9udFNpemU6ICcxM3B4JyxcbiAgICBwYWRkaW5nTGVmdDogJzNweCcsXG4gIH07XG4gIEhFWHdyYXA6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIH07XG4gIEhFWGxhYmVsOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0ge1xuICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgIHRvcDogJzBweCcsXG4gICAgbGVmdDogJzBweCcsXG4gICAgd2lkdGg6ICcxNHB4JyxcbiAgICB0ZXh0VHJhbnNmb3JtOiAndXBwZXJjYXNlJyxcbiAgICBmb250U2l6ZTogJzEzcHgnLFxuICAgIGhlaWdodDogJzI0cHgnLFxuICAgIGxpbmVIZWlnaHQ6ICcyNHB4JyxcbiAgfTtcblxuICByb3VuZCh2KSB7XG4gICAgcmV0dXJuIE1hdGgucm91bmQodik7XG4gIH1cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIGlmIChkYXRhWycjJ10pIHtcbiAgICAgIGlmIChpc1ZhbGlkSGV4KGRhdGFbJyMnXSkpIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZS5lbWl0KHtcbiAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICBoZXg6IGRhdGFbJyMnXSxcbiAgICAgICAgICAgIHNvdXJjZTogJ2hleCcsXG4gICAgICAgICAgfSxcbiAgICAgICAgICAkZXZlbnQsXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH0gZWxzZSBpZiAoZGF0YS5yIHx8IGRhdGEuZyB8fCBkYXRhLmIpIHtcbiAgICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7XG4gICAgICAgIGRhdGE6IHtcbiAgICAgICAgICByOiBkYXRhLnIgfHwgdGhpcy5yZ2IucixcbiAgICAgICAgICBnOiBkYXRhLmcgfHwgdGhpcy5yZ2IuZyxcbiAgICAgICAgICBiOiBkYXRhLmIgfHwgdGhpcy5yZ2IuYixcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9LFxuICAgICAgICAkZXZlbnQsXG4gICAgICB9KTtcbiAgICB9IGVsc2UgaWYgKGRhdGEuaCB8fCBkYXRhLnMgfHwgZGF0YS52KSB7XG4gICAgICB0aGlzLm9uQ2hhbmdlLmVtaXQoe1xuICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgaDogZGF0YS5oIHx8IHRoaXMuaHN2LmgsXG4gICAgICAgICAgczogZGF0YS5zIHx8IHRoaXMuaHN2LnMsXG4gICAgICAgICAgdjogZGF0YS52IHx8IHRoaXMuaHN2LnYsXG4gICAgICAgICAgc291cmNlOiAnaHN2JyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgfSk7XG4gICAgfVxuICB9XG59XG4iXX0=

package/esm2020/photoshop/photoshop-previews.component.mjs

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class PhotoshopPreviewsComponent {
+    constructor() {
+        this.currentColor = '';
+        this.backgroundNew = '';
+    }
+    ngOnChanges() {
+        this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;
+    }
+}
+PhotoshopPreviewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopPreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: PhotoshopPreviewsComponent, selector: "color-photoshop-previews", inputs: { rgb: "rgb", currentColor: "currentColor" }, usesOnChanges: true, ngImport: i0, template: `
+  <div>
+    <div class="photoshop-label">new</div>
+    <div class="photoshop-swatches">
+      <div class="photoshop-new" [style.background]="backgroundNew"></div>
+      <div class="photoshop-current" [style.background]="currentColor"></div>
+    </div>
+    <div class="photoshop-label">current</div>
+  </div>
+  `, isInline: true, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopPreviewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-photoshop-previews', template: `
+  <div>
+    <div class="photoshop-label">new</div>
+    <div class="photoshop-swatches">
+      <div class="photoshop-new" [style.background]="backgroundNew"></div>
+      <div class="photoshop-current" [style.background]="currentColor"></div>
+    </div>
+    <div class="photoshop-label">current</div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".photoshop-swatches{border:1px solid #B3B3B3;border-bottom:1px solid #F0F0F0;margin-bottom:2px;margin-top:1px}.photoshop-new{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 1px #000}.photoshop-current{height:34px;box-shadow:inset 1px 0 #000,inset -1px 0 #000,inset 0 -1px #000}.photoshop-label{font-size:14px;color:#000;text-align:center}\n"] }]
+        }], propDecorators: { rgb: [{
+                type: Input
+            }], currentColor: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLXByZXZpZXdzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcGhvdG9zaG9wL3Bob3Rvc2hvcC1wcmV2aWV3cy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxHQUVOLE1BQU0sZUFBZSxDQUFDOztBQXlDdkIsTUFBTSxPQUFPLDBCQUEwQjtJQXRDdkM7UUF3Q1csaUJBQVksR0FBRyxFQUFFLENBQUM7UUFDM0Isa0JBQWEsR0FBRyxFQUFFLENBQUM7S0FLcEI7SUFIQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUM7SUFDekUsQ0FBQzs7dUhBUFUsMEJBQTBCOzJHQUExQiwwQkFBMEIsMklBcEMzQjs7Ozs7Ozs7O0dBU1Q7MkZBMkJVLDBCQUEwQjtrQkF0Q3RDLFNBQVM7K0JBQ0UsMEJBQTBCLFlBQzFCOzs7Ozs7Ozs7R0FTVCxtQkF3QmdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSR0IgfSBmcm9tICduZ3gtY29sb3InO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1waG90b3Nob3AtcHJldmlld3MnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtbGFiZWxcIj5uZXc8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXN3YXRjaGVzXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLW5ld1wiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImJhY2tncm91bmROZXdcIj48L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtY3VycmVudFwiIFtzdHlsZS5iYWNrZ3JvdW5kXT1cImN1cnJlbnRDb2xvclwiPjwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtbGFiZWxcIj5jdXJyZW50PC9kaXY+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gIC5waG90b3Nob3Atc3dhdGNoZXMge1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICNCM0IzQjM7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNGMEYwRjA7XG4gICAgbWFyZ2luLWJvdHRvbTogMnB4O1xuICAgIG1hcmdpbi10b3A6IDFweDtcbiAgfVxuICAucGhvdG9zaG9wLW5ldyB7XG4gICAgaGVpZ2h0OiAzNHB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDFweCAwIDAgIzAwMCwgaW5zZXQgLTFweCAwIDAgIzAwMCwgaW5zZXQgMCAxcHggMCAjMDAwO1xuICB9XG4gIC5waG90b3Nob3AtY3VycmVudCB7XG4gICAgaGVpZ2h0OiAzNHB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDFweCAwIDAgIzAwMCwgaW5zZXQgLTFweCAwIDAgIzAwMCwgaW5zZXQgMCAtMXB4IDAgIzAwMDtcbiAgfVxuICAucGhvdG9zaG9wLWxhYmVsIHtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gICAgY29sb3I6ICMwMDA7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgUGhvdG9zaG9wUHJldmlld3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSByZ2IhOiBSR0I7XG4gIEBJbnB1dCgpIGN1cnJlbnRDb2xvciA9ICcnO1xuICBiYWNrZ3JvdW5kTmV3ID0gJyc7XG5cbiAgbmdPbkNoYW5nZXMoKSB7XG4gICAgdGhpcy5iYWNrZ3JvdW5kTmV3ID0gYHJnYigke3RoaXMucmdiLnJ9LCR7dGhpcy5yZ2IuZ30sICR7dGhpcy5yZ2IuYn0pYDtcbiAgfVxufVxuIl19