ngx-color 7.1.0 → 7.3.2

package/photoshop/fesm2015/ngx-color-photoshop.js

@@ -1,460 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
-import { isValidHex, ColorWrap, EditableInputModule, HueModule, AlphaModule, SwatchModule, SaturationModule } from 'ngx-color';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-
-class PhotoshopButtonComponent {
-    constructor() {
-        this.label = '';
-        this.active = false;
-        this.onClick = new EventEmitter();
-    }
-}
-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: 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;
-    }
-  `]
-            },] }
-];
-PhotoshopButtonComponent.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.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;
-    }
-  `]
-            },] }
-];
-PhotoshopFieldsComponent.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.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 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;
-  }
-  `]
-            },] }
-];
-PhotoshopPreviewsComponent.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.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>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef(() => PhotoshopComponent),
-                        multi: true,
-                    }
-                ],
-                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;
-    }
-  `]
-            },] }
-];
-PhotoshopComponent.ctorParameters = () => [];
-PhotoshopComponent.propDecorators = {
-    header: [{ type: Input }],
-    onAccept: [{ type: Output }],
-    onCancel: [{ type: Output }]
-};
-class ColorPhotoshopModule {
-}
-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, PhotoshopComponent, PhotoshopPreviewsComponent as ɵa, PhotoshopButtonComponent as ɵb, PhotoshopFieldsComponent as ɵc };
-//# sourceMappingURL=ngx-color-photoshop.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ngx-color-photoshop.js","sources":["../../../../src/lib/components/photoshop/photoshop-button.component.ts","../../../../src/lib/components/photoshop/photoshop-fields.component.ts","../../../../src/lib/components/photoshop/photoshop-previews.component.ts","../../../../src/lib/components/photoshop/photoshop.component.ts","../../../../src/lib/components/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})\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 './photoshop.component';\n\nexport {PhotoshopButtonComponent as ɵb} from './photoshop-button.component';\nexport {PhotoshopFieldsComponent as ɵc} from './photoshop-fields.component';\nexport {PhotoshopPreviewsComponent as ɵa} from './photoshop-previews.component';"],"names":[],"mappings":"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"}

package/photoshop/ngx-color-photoshop.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"PhotoshopComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":127,"character":40},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"color-photoshop","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  ","styles":["\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  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":117,"character":19},"member":"OnPush"},"preserveWhitespaces":false,"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":121,"character":15},"useExisting":{"__symbolic":"reference","name":"PhotoshopComponent"},"multi":true}]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":3}}]}],"onAccept":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":130,"character":3}}]}],"onCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":131,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handleValueChange":[{"__symbolic":"method"}]}},"ColorPhotoshopModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":147,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PhotoshopComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"PhotoshopComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":161,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"EditableInputModule","line":162,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"HueModule","line":163,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"AlphaModule","line":164,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":165,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"SaturationModule","line":166,"character":4}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"color-photoshop-previews","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  ","styles":["\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  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":43,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"rgb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"currentColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"color-photoshop-button","template":"\n    <div class=\"photoshop-button\"  [class.active]=\"active\"\n      (click)=\"onClick.emit($event)\"\n    >\n      {{ label }}\n    </div>\n  ","styles":["\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  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":41,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"color-photoshop-fields","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  ","styles":["\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  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":89,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"rgb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"hsv":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"hex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":96,"character":3}}]}],"round":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}]}}},"origins":{"PhotoshopComponent":"./photoshop.component","ColorPhotoshopModule":"./photoshop.component","ɵa":"./photoshop-previews.component","ɵb":"./photoshop-button.component","ɵc":"./photoshop-fields.component"},"importAs":"ngx-color/photoshop"}