ngx-color 7.1.0 → 7.3.2

package/fesm2015/ngx-color-photoshop.mjs

@@ -0,0 +1,626 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { isValidHex, ColorWrap, EditableInputModule, HueModule, AlphaModule, SwatchModule, SaturationModule } from 'ngx-color';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class PhotoshopButtonComponent {
+    constructor() {
+        this.label = '';
+        this.active = false;
+        this.onClick = new EventEmitter();
+    }
+}
+PhotoshopButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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: "13.0.0", 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>
+  `,
+                    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: rgb(234, 234, 234) 0px 1px 0px 0px;
+      font-size: 14px;
+      color: rgb(0, 0, 0);
+      line-height: 20px;
+      text-align: center;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+    .photoshop-button.active {
+      box-shadow: 0 0 0 1px #878787;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+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: "13.0.0", ngImport: i0, type: PhotoshopFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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"], components: [{ type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: 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>
+  `,
+                    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;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { rgb: [{
+                type: Input
+            }], hsv: [{
+                type: Input
+            }], hex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+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: "13.0.0", ngImport: i0, type: PhotoshopPreviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopPreviewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", 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: "13.0.0", 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>
+  `,
+                    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 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;
+  }
+  .photoshop-current {
+    height: 34px;
+    box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;
+  }
+  .photoshop-label {
+    font-size: 14px;
+    color: #000;
+    text-align: center;
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { rgb: [{
+                type: Input
+            }], currentColor: [{
+                type: Input
+            }] } });
+
+class PhotoshopComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Title text */
+        this.header = 'Color Picker';
+        this.onAccept = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.circle = {
+            width: '12px',
+            height: '12px',
+            borderRadius: '6px',
+            boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
+            transform: 'translate(-6px, -10px)',
+        };
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+PhotoshopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PhotoshopComponent, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => PhotoshopComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => PhotoshopComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="photoshop-picker {{ className }}">
+    <div class="photoshop-head">{{ header }}</div>
+    <div class="photoshop-body">
+      <div class="photoshop-saturation">
+        <color-saturation
+          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="photoshop-hue">
+        <color-hue direction="vertical"
+          [hsl]="hsl" [hidePointer]="true"
+          (onChange)="handleValueChange($event)"
+        ></color-hue>
+      </div>
+      <div class="photoshop-controls">
+        <div class="photoshop-top">
+          <div class="photoshop-previews">
+            <color-photoshop-previews
+              [rgb]="rgb" [currentColor]="currentColor"
+            ></color-photoshop-previews>
+          </div>
+          <div class="photoshop-actions">
+            <color-photoshop-button label="OK"
+              [active]="true" (onClick)="onAccept.emit($event)"
+            ></color-photoshop-button>
+            <color-photoshop-button label="Cancel"
+              (onClick)="onCancel.emit($event)"
+            >
+            </color-photoshop-button>
+            <color-photoshop-fields
+              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
+              (onChange)="handleValueChange($event)"
+            ></color-photoshop-fields>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"], components: [{ type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return PhotoshopPreviewsComponent; }), selector: "color-photoshop-previews", inputs: ["rgb", "currentColor"] }, { type: i0.forwardRef(function () { return PhotoshopButtonComponent; }), selector: "color-photoshop-button", inputs: ["label", "active"], outputs: ["onClick"] }, { type: i0.forwardRef(function () { return PhotoshopFieldsComponent; }), selector: "color-photoshop-fields", inputs: ["rgb", "hsv", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-photoshop',
+                    template: `
+  <div class="photoshop-picker {{ className }}">
+    <div class="photoshop-head">{{ header }}</div>
+    <div class="photoshop-body">
+      <div class="photoshop-saturation">
+        <color-saturation
+          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="photoshop-hue">
+        <color-hue direction="vertical"
+          [hsl]="hsl" [hidePointer]="true"
+          (onChange)="handleValueChange($event)"
+        ></color-hue>
+      </div>
+      <div class="photoshop-controls">
+        <div class="photoshop-top">
+          <div class="photoshop-previews">
+            <color-photoshop-previews
+              [rgb]="rgb" [currentColor]="currentColor"
+            ></color-photoshop-previews>
+          </div>
+          <div class="photoshop-actions">
+            <color-photoshop-button label="OK"
+              [active]="true" (onClick)="onAccept.emit($event)"
+            ></color-photoshop-button>
+            <color-photoshop-button label="Cancel"
+              (onClick)="onCancel.emit($event)"
+            >
+            </color-photoshop-button>
+            <color-photoshop-fields
+              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
+              (onChange)="handleValueChange($event)"
+            ></color-photoshop-fields>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .photoshop-picker {
+      background: rgb(220, 220, 220);
+      border-radius: 4px;
+      box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px;
+      box-sizing: initial; width: 513px;
+    }
+    .photoshop-head {
+      background-image: linear-gradient(
+        -180deg,
+        rgb(240, 240, 240) 0%,
+        rgb(212, 212, 212) 100%
+      );
+      border-bottom: 1px solid rgb(177, 177, 177);
+      box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
+        rgba(0, 0, 0, 0.02) 0px -1px 0px 0px inset;
+      height: 23px;
+      line-height: 24px;
+      border-radius: 4px 4px 0px 0px;
+      font-size: 13px;
+      color: rgb(77, 77, 77);
+      text-align: center;
+    }
+    .photoshop-body {
+      padding: 15px 15px 0px;
+      display: flex;
+    }
+    .photoshop-saturation {
+      width: 256px;
+      height: 256px;
+      position: relative;
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);
+      border-image: initial;
+      overflow: hidden;
+    }
+    .photoshop-hue {
+      position: relative;
+      height: 256px;
+      width: 23px;
+      margin-left: 10px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);
+      border-image: initial;
+    }
+    .photoshop-controls {
+      width: 180px;
+      margin-left: 10px;
+    }
+    .photoshop-top {
+      display: flex;
+    }
+    .photoshop-previews {
+      width: 60px;
+    }
+    .photoshop-actions {
+      -webkit-box-flex: 1;
+      flex: 1 1 0%;
+      margin-left: 20px;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhotoshopComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => PhotoshopComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { header: [{
+                type: Input
+            }], onAccept: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }] } });
+class ColorPhotoshopModule {
+}
+ColorPhotoshopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorPhotoshopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
+        PhotoshopButtonComponent,
+        PhotoshopFieldsComponent], imports: [CommonModule,
+        EditableInputModule,
+        HueModule,
+        AlphaModule,
+        SwatchModule,
+        SaturationModule], exports: [PhotoshopComponent, PhotoshopPreviewsComponent,
+        PhotoshopButtonComponent,
+        PhotoshopFieldsComponent] });
+ColorPhotoshopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPhotoshopModule, imports: [[
+            CommonModule,
+            EditableInputModule,
+            HueModule,
+            AlphaModule,
+            SwatchModule,
+            SaturationModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PhotoshopComponent,
+                        PhotoshopPreviewsComponent,
+                        PhotoshopButtonComponent,
+                        PhotoshopFieldsComponent,
+                    ],
+                    exports: [
+                        PhotoshopComponent,
+                        PhotoshopPreviewsComponent,
+                        PhotoshopButtonComponent,
+                        PhotoshopFieldsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        EditableInputModule,
+                        HueModule,
+                        AlphaModule,
+                        SwatchModule,
+                        SaturationModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorPhotoshopModule, PhotoshopButtonComponent, PhotoshopComponent, PhotoshopFieldsComponent, PhotoshopPreviewsComponent };
+//# sourceMappingURL=ngx-color-photoshop.mjs.map

package/fesm2015/ngx-color-photoshop.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-photoshop.mjs","sources":["../../src/lib/photoshop/photoshop-button.component.ts","../../src/lib/photoshop/photoshop-fields.component.ts","../../src/lib/photoshop/photoshop-previews.component.ts","../../src/lib/photoshop/photoshop.component.ts","../../src/lib/photoshop/ngx-color-photoshop.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\n@Component({\n  selector: 'color-photoshop-button',\n  template: `\n    <div class=\"photoshop-button\"  [class.active]=\"active\"\n      (click)=\"onClick.emit($event)\"\n    >\n      {{ label }}\n    </div>\n  `,\n  styles: [\n    `\n    .photoshop-button {\n      background-image: linear-gradient(\n        -180deg,\n        rgb(255, 255, 255) 0%,\n        rgb(230, 230, 230) 100%\n      );\n      border: 1px solid rgb(135, 135, 135);\n      border-radius: 2px;\n      height: 22px;\n      box-shadow: rgb(234, 234, 234) 0px 1px 0px 0px;\n      font-size: 14px;\n      color: rgb(0, 0, 0);\n      line-height: 20px;\n      text-align: center;\n      margin-bottom: 10px;\n      cursor: pointer;\n    }\n    .photoshop-button.active {\n      box-shadow: 0 0 0 1px #878787;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class PhotoshopButtonComponent {\n  @Input() label = '';\n  @Input() active = false;\n  @Output() onClick = new EventEmitter<Event>();\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { isValidHex, HSV, RGB } from 'ngx-color';\n\n@Component({\n  selector: 'color-photoshop-fields',\n  template: `\n  <div class=\"photoshop-fields\">\n    <color-editable-input\n      [value]=\"round(hsv.h)\"\n      label=\"h\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n    ></color-editable-input>\n    <color-editable-input\n      [value]=\"round(hsv.s * 100)\"\n      label=\"s\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n    ></color-editable-input>\n    <color-editable-input\n      [value]=\"round(hsv.v * 100)\"\n      label=\"v\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n    ></color-editable-input>\n    <div class=\"photoshop-divider\"></div>\n    <color-editable-input\n      [value]=\"rgb.r\"\n      label=\"r\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n    ></color-editable-input>\n    <color-editable-input\n      [value]=\"rgb.g\"\n      label=\"g\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n    ></color-editable-input>\n    <color-editable-input\n      [value]=\"rgb.b\"\n      label=\"b\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: RGBinput, wrap: RGBwrap, label: RGBlabel}\"\n    ></color-editable-input>\n    <div class=\"photoshop-divider\"></div>\n    <color-editable-input\n      [value]=\"hex.replace('#', '')\"\n      label=\"#\"\n      (onChange)=\"handleValueChange($event)\"\n      [style]=\"{input: HEXinput, wrap: HEXwrap, label: HEXlabel}\"\n    ></color-editable-input>\n    <div class=\"photoshop-field-symbols\">\n      <div class=\"photoshop-symbol\">°</div>\n      <div class=\"photoshop-symbol\">%</div>\n      <div class=\"photoshop-symbol\">%</div>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .photoshop-fields {\n      padding-top: 5px;\n      padding-bottom: 9px;\n      width: 85px;\n      position: relative;\n    }\n    .photoshop-field-symbols {\n      position: absolute;\n      top: 5px;\n      right: -7px;\n      font-size: 13px;\n    }\n    .photoshop-symbol {\n      height: 24px;\n      line-height: 24px;\n      padding-bottom: 7px;\n    }\n    .photoshop-divider {\n      height: 5px;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class PhotoshopFieldsComponent {\n  @Input() rgb!: RGB;\n  @Input() hsv!: HSV;\n  @Input() hex!: string;\n  @Output() onChange = new EventEmitter<any>();\n  RGBinput: Record<string, string> = {\n    marginLeft: '35%',\n    width: '40%',\n    height: '22px',\n    border: '1px solid rgb(136, 136, 136)',\n    boxShadow:\n      'rgba(0, 0, 0, 0.1) 0px 1px 1px inset, rgb(236, 236, 236) 0px 1px 0px 0px',\n    marginBottom: '2px',\n    fontSize: '13px',\n    paddingLeft: '3px',\n    marginRight: '10px',\n  };\n  RGBwrap: Record<string, string> = {\n    position: 'relative',\n  };\n  RGBlabel: Record<string, string> = {\n    left: '0px',\n    width: '34px',\n    textTransform: 'uppercase',\n    fontSize: '13px',\n    height: '24px',\n    lineHeight: '24px',\n    position: 'absolute',\n  };\n  HEXinput: Record<string, string> = {\n    marginLeft: '20%',\n    width: '80%',\n    height: '22px',\n    border: '1px solid #888888',\n    boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',\n    marginBottom: '3px',\n    fontSize: '13px',\n    paddingLeft: '3px',\n  };\n  HEXwrap: Record<string, string> = {\n    position: 'relative',\n  };\n  HEXlabel: Record<string, string> = {\n    position: 'absolute',\n    top: '0px',\n    left: '0px',\n    width: '14px',\n    textTransform: 'uppercase',\n    fontSize: '13px',\n    height: '24px',\n    lineHeight: '24px',\n  };\n\n  round(v) {\n    return Math.round(v);\n  }\n  handleValueChange({ data, $event }) {\n    if (data['#']) {\n      if (isValidHex(data['#'])) {\n        this.onChange.emit({\n          data: {\n            hex: data['#'],\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else if (data.r || data.g || data.b) {\n      this.onChange.emit({\n        data: {\n          r: data.r || this.rgb.r,\n          g: data.g || this.rgb.g,\n          b: data.b || this.rgb.b,\n          source: 'rgb',\n        },\n        $event,\n      });\n    } else if (data.h || data.s || data.v) {\n      this.onChange.emit({\n        data: {\n          h: data.h || this.hsv.h,\n          s: data.s || this.hsv.s,\n          v: data.v || this.hsv.v,\n          source: 'hsv',\n        },\n        $event,\n      });\n    }\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  OnChanges,\n} from '@angular/core';\nimport { RGB } from 'ngx-color';\n\n@Component({\n  selector: 'color-photoshop-previews',\n  template: `\n  <div>\n    <div class=\"photoshop-label\">new</div>\n    <div class=\"photoshop-swatches\">\n      <div class=\"photoshop-new\" [style.background]=\"backgroundNew\"></div>\n      <div class=\"photoshop-current\" [style.background]=\"currentColor\"></div>\n    </div>\n    <div class=\"photoshop-label\">current</div>\n  </div>\n  `,\n  styles: [\n    `\n  .photoshop-swatches {\n    border: 1px solid #B3B3B3;\n    border-bottom: 1px solid #F0F0F0;\n    margin-bottom: 2px;\n    margin-top: 1px;\n  }\n  .photoshop-new {\n    height: 34px;\n    box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n  }\n  .photoshop-current {\n    height: 34px;\n    box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000;\n  }\n  .photoshop-label {\n    font-size: 14px;\n    color: #000;\n    text-align: center;\n  }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class PhotoshopPreviewsComponent implements OnChanges {\n  @Input() rgb!: RGB;\n  @Input() currentColor = '';\n  backgroundNew = '';\n\n  ngOnChanges() {\n    this.backgroundNew = `rgb(${this.rgb.r},${this.rgb.g}, ${this.rgb.b})`;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core';\n\nimport { AlphaModule, ColorWrap, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';\nimport { PhotoshopButtonComponent } from './photoshop-button.component';\nimport { PhotoshopFieldsComponent } from './photoshop-fields.component';\nimport { PhotoshopPreviewsComponent } from './photoshop-previews.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-photoshop',\n  template: `\n  <div class=\"photoshop-picker {{ className }}\">\n    <div class=\"photoshop-head\">{{ header }}</div>\n    <div class=\"photoshop-body\">\n      <div class=\"photoshop-saturation\">\n        <color-saturation\n          [hsl]=\"hsl\" [hsv]=\"hsv\" [circle]=\"circle\"\n          (onChange)=\"handleValueChange($event)\"\n        ></color-saturation>\n      </div>\n      <div class=\"photoshop-hue\">\n        <color-hue direction=\"vertical\"\n          [hsl]=\"hsl\" [hidePointer]=\"true\"\n          (onChange)=\"handleValueChange($event)\"\n        ></color-hue>\n      </div>\n      <div class=\"photoshop-controls\">\n        <div class=\"photoshop-top\">\n          <div class=\"photoshop-previews\">\n            <color-photoshop-previews\n              [rgb]=\"rgb\" [currentColor]=\"currentColor\"\n            ></color-photoshop-previews>\n          </div>\n          <div class=\"photoshop-actions\">\n            <color-photoshop-button label=\"OK\"\n              [active]=\"true\" (onClick)=\"onAccept.emit($event)\"\n            ></color-photoshop-button>\n            <color-photoshop-button label=\"Cancel\"\n              (onClick)=\"onCancel.emit($event)\"\n            >\n            </color-photoshop-button>\n            <color-photoshop-fields\n              [rgb]=\"rgb\" [hex]=\"hex\" [hsv]=\"hsv\"\n              (onChange)=\"handleValueChange($event)\"\n            ></color-photoshop-fields>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .photoshop-picker {\n      background: rgb(220, 220, 220);\n      border-radius: 4px;\n      box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px;\n      box-sizing: initial; width: 513px;\n    }\n    .photoshop-head {\n      background-image: linear-gradient(\n        -180deg,\n        rgb(240, 240, 240) 0%,\n        rgb(212, 212, 212) 100%\n      );\n      border-bottom: 1px solid rgb(177, 177, 177);\n      box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,\n        rgba(0, 0, 0, 0.02) 0px -1px 0px 0px inset;\n      height: 23px;\n      line-height: 24px;\n      border-radius: 4px 4px 0px 0px;\n      font-size: 13px;\n      color: rgb(77, 77, 77);\n      text-align: center;\n    }\n    .photoshop-body {\n      padding: 15px 15px 0px;\n      display: flex;\n    }\n    .photoshop-saturation {\n      width: 256px;\n      height: 256px;\n      position: relative;\n      border-width: 2px;\n      border-style: solid;\n      border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);\n      border-image: initial;\n      overflow: hidden;\n    }\n    .photoshop-hue {\n      position: relative;\n      height: 256px;\n      width: 23px;\n      margin-left: 10px;\n      border-width: 2px;\n      border-style: solid;\n      border-color: rgb(179, 179, 179) rgb(179, 179, 179) rgb(240, 240, 240);\n      border-image: initial;\n    }\n    .photoshop-controls {\n      width: 180px;\n      margin-left: 10px;\n    }\n    .photoshop-top {\n      display: flex;\n    }\n    .photoshop-previews {\n      width: 60px;\n    }\n    .photoshop-actions {\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n      margin-left: 20px;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => PhotoshopComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => PhotoshopComponent),\n    },\n  ]\n})\nexport class PhotoshopComponent extends ColorWrap {\n  /** Title text */\n  @Input() header = 'Color Picker';\n  @Output() onAccept = new EventEmitter<Event>();\n  @Output() onCancel = new EventEmitter<Event>();\n  circle = {\n    width: '12px',\n    height: '12px',\n    borderRadius: '6px',\n    boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',\n    transform: 'translate(-6px, -10px)',\n  };\n  constructor() {\n    super();\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [\n    PhotoshopComponent,\n    PhotoshopPreviewsComponent,\n    PhotoshopButtonComponent,\n    PhotoshopFieldsComponent,\n  ],\n  exports: [\n    PhotoshopComponent,\n    PhotoshopPreviewsComponent,\n    PhotoshopButtonComponent,\n    PhotoshopFieldsComponent,\n  ],\n  imports: [\n    CommonModule,\n    EditableInputModule,\n    HueModule,\n    AlphaModule,\n    SwatchModule,\n    SaturationModule,\n  ],\n})\nexport class ColorPhotoshopModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}