ngx-color 7.0.1 → 7.3.0

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

@@ -1,450 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
-import { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';
-import { TinyColor } from '@ctrl/tinycolor';
-
-class SketchFieldsComponent {
-    constructor() {
-        this.disableAlpha = false;
-        this.onChange = new EventEmitter();
-        this.input = {
-            width: '100%',
-            padding: '4px 10% 3px',
-            border: 'none',
-            boxSizing: 'border-box',
-            boxShadow: 'inset 0 0 0 1px #ccc',
-            fontSize: '11px',
-        };
-        this.label = {
-            display: 'block',
-            textAlign: 'center',
-            fontSize: '11px',
-            color: '#222',
-            paddingTop: '3px',
-            paddingBottom: '4px',
-            textTransform: 'capitalize',
-        };
-    }
-    round(value) {
-        return Math.round(value);
-    }
-    handleChange({ data, $event }) {
-        if (data.hex) {
-            if (isValidHex(data.hex)) {
-                const color = new TinyColor(data.hex);
-                this.onChange.emit({
-                    data: {
-                        hex: this.disableAlpha || data.hex.length <= 6 ? color.toHex() : color.toHex8(),
-                        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.a) {
-            if (data.a < 0) {
-                data.a = 0;
-            }
-            else if (data.a > 100) {
-                data.a = 100;
-            }
-            data.a /= 100;
-            if (this.disableAlpha) {
-                data.a = 1;
-            }
-            this.onChange.emit({
-                data: {
-                    h: this.hsl.h,
-                    s: this.hsl.s,
-                    l: this.hsl.l,
-                    a: Math.round(data.a * 100) / 100,
-                    source: 'rgb',
-                },
-                $event,
-            });
-        }
-        else if (data.h || data.s || data.l) {
-            this.onChange.emit({
-                data: {
-                    h: data.h || this.hsl.h,
-                    s: Number((data.s && data.s) || this.hsl.s),
-                    l: Number((data.l && data.l) || this.hsl.l),
-                    source: 'hsl',
-                },
-                $event,
-            });
-        }
-    }
-}
-SketchFieldsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-sketch-fields',
-                template: `
-  <div class="sketch-fields">
-    <div class="sketch-double">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="hex"
-        [value]="hex.replace('#', '')"
-        (onChange)="handleChange($event)"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="r"
-        [value]="rgb.r"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="g"
-        [value]="rgb.g"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-single">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="b"
-        [value]="rgb.b"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="255"
-      ></color-editable-input>
-    </div>
-    <div class="sketch-alpha" *ngIf="disableAlpha === false">
-      <color-editable-input
-        [style]="{ input: input, label: label }"
-        label="a"
-        [value]="round(rgb.a * 100)"
-        (onChange)="handleChange($event)"
-        [dragLabel]="true"
-        [dragMax]="100"
-      ></color-editable-input>
-    </div>
-  </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [`
-    .sketch-fields {
-      display: flex;
-      padding-top: 4px;
-    }
-    .sketch-double {
-      -webkit-box-flex: 2;
-      flex: 2 1 0%;
-    }
-    .sketch-single {
-      flex: 1 1 0%;
-      padding-left: 6px;
-    }
-    .sketch-alpha {
-      -webkit-box-flex: 1;
-      flex: 1 1 0%;
-      padding-left: 6px;
-    }
-    :host-context([dir=rtl]) .sketch-single {
-      padding-right: 6px;
-      padding-left: 0;
-    }
-    :host-context([dir=rtl]) .sketch-alpha {
-      padding-right: 6px;
-      padding-left: 0;
-    }
-  `]
-            },] }
-];
-SketchFieldsComponent.propDecorators = {
-    hsl: [{ type: Input }],
-    rgb: [{ type: Input }],
-    hex: [{ type: Input }],
-    disableAlpha: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-
-class SketchPresetColorsComponent {
-    constructor() {
-        this.onClick = new EventEmitter();
-        this.onSwatchHover = new EventEmitter();
-        this.swatchStyle = {
-            borderRadius: '3px',
-            boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',
-        };
-    }
-    handleClick({ hex, $event }) {
-        this.onClick.emit({ hex, $event });
-    }
-    normalizeValue(val) {
-        if (typeof val === 'string') {
-            return { color: val };
-        }
-        return val;
-    }
-    focusStyle(val) {
-        const c = this.normalizeValue(val);
-        return {
-            boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,
-        };
-    }
-}
-SketchPresetColorsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-sketch-preset-colors',
-                template: `
-  <div class="sketch-swatches">
-    <div class="sketch-wrap" *ngFor="let c of colors">
-      <color-swatch
-        [color]="normalizeValue(c).color"
-        [style]="swatchStyle"
-        [focusStyle]="focusStyle(c)"
-        (onClick)="handleClick($event)"
-        (onHover)="onSwatchHover.emit($event)"
-        class="swatch"
-      ></color-swatch>
-    </div>
-  </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [`
-    .sketch-swatches {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-      margin: 0px -10px;
-      padding: 10px 0px 0px 10px;
-      border-top: 1px solid rgb(238, 238, 238);
-    }
-    .sketch-wrap {
-      width: 16px;
-      height: 16px;
-      margin: 0px 10px 10px 0px;
-    }
-    :host-context([dir=rtl]) .sketch-swatches {
-      padding-right: 10px;
-      padding-left: 0;
-    }
-    :host-context([dir=rtl]) .sketch-wrap {
-      margin-left: 10px;
-      margin-right: 0;
-    }
-  `]
-            },] }
-];
-SketchPresetColorsComponent.propDecorators = {
-    colors: [{ type: Input }],
-    onClick: [{ type: Output }],
-    onSwatchHover: [{ type: Output }]
-};
-
-class SketchComponent extends ColorWrap {
-    constructor() {
-        super();
-        /** Remove alpha slider and options from picker */
-        this.disableAlpha = false;
-        /** Hex strings for default colors at bottom of picker */
-        this.presetColors = [
-            '#D0021B',
-            '#F5A623',
-            '#F8E71C',
-            '#8B572A',
-            '#7ED321',
-            '#417505',
-            '#BD10E0',
-            '#9013FE',
-            '#4A90E2',
-            '#50E3C2',
-            '#B8E986',
-            '#000000',
-            '#4A4A4A',
-            '#9B9B9B',
-            '#FFFFFF',
-        ];
-        /** Width of picker */
-        this.width = 200;
-    }
-    afterValidChange() {
-        const alpha = this.disableAlpha ? 1 : this.rgb.a;
-        this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;
-    }
-    handleValueChange({ data, $event }) {
-        this.handleChange(data, $event);
-    }
-    handleBlockChange({ hex, $event }) {
-        if (isValidHex(hex)) {
-            // this.hex = hex;
-            this.handleChange({
-                hex,
-                source: 'hex',
-            }, $event);
-        }
-    }
-}
-SketchComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-sketch',
-                template: `
-  <div class="sketch-picker {{ className }}" [style.width]="width">
-    <div class="sketch-saturation">
-      <color-saturation [hsl]="hsl" [hsv]="hsv"
-        (onChange)="handleValueChange($event)"
-      >
-      </color-saturation>
-    </div>
-    <div class="sketch-controls">
-      <div class="sketch-sliders">
-        <div class="sketch-hue">
-          <color-hue [hsl]="hsl"
-            (onChange)="handleValueChange($event)"
-          ></color-hue>
-        </div>
-        <div class="sketch-alpha" *ngIf="disableAlpha === false">
-          <color-alpha
-            [radius]="2" [rgb]="rgb" [hsl]="hsl"
-            (onChange)="handleValueChange($event)"
-          ></color-alpha>
-        </div>
-      </div>
-      <div class="sketch-color">
-        <color-checkboard></color-checkboard>
-        <div class="sketch-active" [style.background]="activeBackground"></div>
-      </div>
-    </div>
-    <div class="sketch-fields-container">
-      <color-sketch-fields
-        [rgb]="rgb" [hsl]="hsl" [hex]="hex"
-        [disableAlpha]="disableAlpha"
-        (onChange)="handleValueChange($event)"
-      ></color-sketch-fields>
-    </div>
-    <div class="sketch-swatches-container" *ngIf="presetColors && presetColors.length">
-      <color-sketch-preset-colors
-        [colors]="presetColors"
-        (onClick)="handleBlockChange($event)"
-        (onSwatchHover)="onSwatchHover.emit($event)"
-      ></color-sketch-preset-colors>
-    </div>
-  </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [`
-    .sketch-picker {
-      padding: 10px 10px 3px;
-      box-sizing: initial;
-      background: #fff;
-      border-radius: 4px;
-      box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);
-    }
-    .sketch-saturation {
-      width: 100%;
-      padding-bottom: 75%;
-      position: relative;
-      overflow: hidden;
-    }
-    .sketch-fields-container {
-      display: block;
-    }
-    .sketch-swatches-container {
-      display: block;
-    }
-    .sketch-controls {
-      display: flex;
-    }
-    .sketch-sliders {
-      padding: 4px 0px;
-      -webkit-box-flex: 1;
-      flex: 1 1 0%;
-    }
-    .sketch-hue {
-      position: relative;
-      height: 10px;
-      overflow: hidden;
-    }
-    .sketch-alpha {
-      position: relative;
-      height: 10px;
-      margin-top: 4px;
-      overflow: hidden;
-    }
-    .sketch-color {
-      width: 24px;
-      height: 24px;
-      position: relative;
-      margin-top: 4px;
-      margin-left: 4px;
-      border-radius: 3px;
-    }
-    .sketch-active {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
-    }
-    :host-context([dir=rtl]) .sketch-color {
-      margin-right: 4px;
-      margin-left: 0;
-    }
-  `]
-            },] }
-];
-SketchComponent.ctorParameters = () => [];
-SketchComponent.propDecorators = {
-    disableAlpha: [{ type: Input }],
-    presetColors: [{ type: Input }],
-    width: [{ type: Input }]
-};
-class ColorSketchModule {
-}
-ColorSketchModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SketchComponent,
-                    SketchFieldsComponent,
-                    SketchPresetColorsComponent,
-                ],
-                exports: [
-                    SketchComponent,
-                    SketchFieldsComponent,
-                    SketchPresetColorsComponent,
-                ],
-                imports: [
-                    CommonModule,
-                    AlphaModule,
-                    CheckboardModule,
-                    EditableInputModule,
-                    HueModule,
-                    SaturationModule,
-                    SwatchModule,
-                ],
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ColorSketchModule, SketchComponent, SketchFieldsComponent as ɵa, SketchPresetColorsComponent as ɵb };
-//# sourceMappingURL=ngx-color-sketch.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ngx-color-sketch.js","sources":["../../../../src/lib/components/sketch/sketch-fields.component.ts","../../../../src/lib/components/sketch/sketch-preset-colors.component.ts","../../../../src/lib/components/sketch/sketch.component.ts","../../../../src/lib/components/sketch/ngx-color-sketch.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n  selector: 'color-sketch-fields',\n  template: `\n  <div class=\"sketch-fields\">\n    <div class=\"sketch-double\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"hex\"\n        [value]=\"hex.replace('#', '')\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"r\"\n        [value]=\"rgb.r\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"g\"\n        [value]=\"rgb.g\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"b\"\n        [value]=\"rgb.b\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"a\"\n        [value]=\"round(rgb.a * 100)\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"100\"\n      ></color-editable-input>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-fields {\n      display: flex;\n      padding-top: 4px;\n    }\n    .sketch-double {\n      -webkit-box-flex: 2;\n      flex: 2 1 0%;\n    }\n    .sketch-single {\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    .sketch-alpha {\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    :host-context([dir=rtl]) .sketch-single {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-alpha {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchFieldsComponent {\n  @Input() hsl!: HSLA;\n  @Input() rgb!: RGBA;\n  @Input() hex!: string;\n  @Input() disableAlpha = false;\n  @Output() onChange = new EventEmitter<any>();\n  input: {[key: string]: string} = {\n    width: '100%',\n    padding: '4px 10% 3px',\n    border: 'none',\n    boxSizing: 'border-box',\n    boxShadow: 'inset 0 0 0 1px #ccc',\n    fontSize: '11px',\n  };\n  label: {[key: string]: string} = {\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '11px',\n    color: '#222',\n    paddingTop: '3px',\n    paddingBottom: '4px',\n    textTransform: 'capitalize',\n  };\n\n  round(value) {\n    return Math.round(value);\n  }\n  handleChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        const color = new TinyColor(data.hex);\n        this.onChange.emit({\n          data: {\n            hex: this.disableAlpha || data.hex.length <= 6 ? color.toHex() : color.toHex8(),\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.a) {\n      if (data.a < 0) {\n        data.a = 0;\n      } else if (data.a > 100) {\n        data.a = 100;\n      }\n      data.a /= 100;\n\n      if (this.disableAlpha) {\n        data.a = 1;\n      }\n\n      this.onChange.emit({\n        data: {\n          h: this.hsl.h,\n          s: this.hsl.s,\n          l: this.hsl.l,\n          a: Math.round(data.a * 100) / 100,\n          source: 'rgb',\n        },\n        $event,\n      });\n    } else if (data.h || data.s || data.l) {\n      this.onChange.emit({\n        data: {\n          h: data.h || this.hsl.h,\n          s: Number((data.s && data.s) || this.hsl.s),\n          l: Number((data.l && data.l) || this.hsl.l),\n          source: 'hsl',\n        },\n        $event,\n      });\n    }\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { Shape } from 'ngx-color';\n\n@Component({\n  selector: 'color-sketch-preset-colors',\n  template: `\n  <div class=\"sketch-swatches\">\n    <div class=\"sketch-wrap\" *ngFor=\"let c of colors\">\n      <color-swatch\n        [color]=\"normalizeValue(c).color\"\n        [style]=\"swatchStyle\"\n        [focusStyle]=\"focusStyle(c)\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n        class=\"swatch\"\n      ></color-swatch>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-swatches {\n      position: relative;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0px -10px;\n      padding: 10px 0px 0px 10px;\n      border-top: 1px solid rgb(238, 238, 238);\n    }\n    .sketch-wrap {\n      width: 16px;\n      height: 16px;\n      margin: 0px 10px 10px 0px;\n    }\n    :host-context([dir=rtl]) .sketch-swatches {\n      padding-right: 10px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-wrap {\n      margin-left: 10px;\n      margin-right: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchPresetColorsComponent {\n  @Input() colors!: string[];\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  swatchStyle = {\n    borderRadius: '3px',\n    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',\n  };\n\n  handleClick({ hex, $event }) {\n    this.onClick.emit({ hex, $event });\n  }\n  normalizeValue(val: string | Shape) {\n    if (typeof val === 'string') {\n      return { color: val };\n    }\n    return val;\n  }\n  focusStyle(val: string | Shape) {\n    const c = this.normalizeValue(val);\n    return {\n      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n    };\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  NgModule,\n} from '@angular/core';\n\nimport {\n  AlphaModule,\n  CheckboardModule,\n  ColorWrap,\n  EditableInputModule,\n  HueModule,\n  SaturationModule,\n  SwatchModule,\n  isValidHex,\n} from 'ngx-color';\nimport { SketchFieldsComponent } from './sketch-fields.component';\nimport { SketchPresetColorsComponent } from './sketch-preset-colors.component';\n\n@Component({\n  selector: 'color-sketch',\n  template: `\n  <div class=\"sketch-picker {{ className }}\" [style.width]=\"width\">\n    <div class=\"sketch-saturation\">\n      <color-saturation [hsl]=\"hsl\" [hsv]=\"hsv\"\n        (onChange)=\"handleValueChange($event)\"\n      >\n      </color-saturation>\n    </div>\n    <div class=\"sketch-controls\">\n      <div class=\"sketch-sliders\">\n        <div class=\"sketch-hue\">\n          <color-hue [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-hue>\n        </div>\n        <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n          <color-alpha\n            [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-alpha>\n        </div>\n      </div>\n      <div class=\"sketch-color\">\n        <color-checkboard></color-checkboard>\n        <div class=\"sketch-active\" [style.background]=\"activeBackground\"></div>\n      </div>\n    </div>\n    <div class=\"sketch-fields-container\">\n      <color-sketch-fields\n        [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n        [disableAlpha]=\"disableAlpha\"\n        (onChange)=\"handleValueChange($event)\"\n      ></color-sketch-fields>\n    </div>\n    <div class=\"sketch-swatches-container\" *ngIf=\"presetColors && presetColors.length\">\n      <color-sketch-preset-colors\n        [colors]=\"presetColors\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onSwatchHover)=\"onSwatchHover.emit($event)\"\n      ></color-sketch-preset-colors>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-picker {\n      padding: 10px 10px 3px;\n      box-sizing: initial;\n      background: #fff;\n      border-radius: 4px;\n      box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n    }\n    .sketch-saturation {\n      width: 100%;\n      padding-bottom: 75%;\n      position: relative;\n      overflow: hidden;\n    }\n    .sketch-fields-container {\n      display: block;\n    }\n    .sketch-swatches-container {\n      display: block;\n    }\n    .sketch-controls {\n      display: flex;\n    }\n    .sketch-sliders {\n      padding: 4px 0px;\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n    }\n    .sketch-hue {\n      position: relative;\n      height: 10px;\n      overflow: hidden;\n    }\n    .sketch-alpha {\n      position: relative;\n      height: 10px;\n      margin-top: 4px;\n      overflow: hidden;\n    }\n    .sketch-color {\n      width: 24px;\n      height: 24px;\n      position: relative;\n      margin-top: 4px;\n      margin-left: 4px;\n      border-radius: 3px;\n    }\n    .sketch-active {\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      bottom: 0px;\n      left: 0px;\n      border-radius: 2px;\n      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;\n    }\n    :host-context([dir=rtl]) .sketch-color {\n      margin-right: 4px;\n      margin-left: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchComponent extends ColorWrap {\n  /** Remove alpha slider and options from picker */\n  @Input() disableAlpha = false;\n  /** Hex strings for default colors at bottom of picker */\n  @Input() presetColors = [\n    '#D0021B',\n    '#F5A623',\n    '#F8E71C',\n    '#8B572A',\n    '#7ED321',\n    '#417505',\n    '#BD10E0',\n    '#9013FE',\n    '#4A90E2',\n    '#50E3C2',\n    '#B8E986',\n    '#000000',\n    '#4A4A4A',\n    '#9B9B9B',\n    '#FFFFFF',\n  ];\n  /** Width of picker */\n  @Input() width = 200;\n  activeBackground!: string;\n  constructor() {\n    super();\n  }\n  afterValidChange() {\n    const alpha = this.disableAlpha ? 1 : this.rgb.a;\n    this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n  handleBlockChange({ hex, $event }) {\n    if (isValidHex(hex)) {\n      // this.hex = hex;\n      this.handleChange(\n        {\n          hex,\n          source: 'hex',\n        },\n        $event,\n      );\n    }\n  }\n}\n\n@NgModule({\n  declarations: [\n    SketchComponent,\n    SketchFieldsComponent,\n    SketchPresetColorsComponent,\n  ],\n  exports: [\n    SketchComponent,\n    SketchFieldsComponent,\n    SketchPresetColorsComponent,\n  ],\n  imports: [\n    CommonModule,\n    AlphaModule,\n    CheckboardModule,\n    EditableInputModule,\n    HueModule,\n    SaturationModule,\n    SwatchModule,\n  ],\n})\nexport class ColorSketchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './sketch.component';\n\nexport {SketchFieldsComponent as ɵa} from './sketch-fields.component';\nexport {SketchPresetColorsComponent as ɵb} from './sketch-preset-colors.component';"],"names":[],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"SketchComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":132,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"color-sketch","template":"\n  <div class=\"sketch-picker {{ className }}\" [style.width]=\"width\">\n    <div class=\"sketch-saturation\">\n      <color-saturation [hsl]=\"hsl\" [hsv]=\"hsv\"\n        (onChange)=\"handleValueChange($event)\"\n      >\n      </color-saturation>\n    </div>\n    <div class=\"sketch-controls\">\n      <div class=\"sketch-sliders\">\n        <div class=\"sketch-hue\">\n          <color-hue [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-hue>\n        </div>\n        <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n          <color-alpha\n            [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-alpha>\n        </div>\n      </div>\n      <div class=\"sketch-color\">\n        <color-checkboard></color-checkboard>\n        <div class=\"sketch-active\" [style.background]=\"activeBackground\"></div>\n      </div>\n    </div>\n    <div class=\"sketch-fields-container\">\n      <color-sketch-fields\n        [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n        [disableAlpha]=\"disableAlpha\"\n        (onChange)=\"handleValueChange($event)\"\n      ></color-sketch-fields>\n    </div>\n    <div class=\"sketch-swatches-container\" *ngIf=\"presetColors && presetColors.length\">\n      <color-sketch-preset-colors\n        [colors]=\"presetColors\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onSwatchHover)=\"onSwatchHover.emit($event)\"\n      ></color-sketch-preset-colors>\n    </div>\n  </div>\n  ","styles":["\n    .sketch-picker {\n      padding: 10px 10px 3px;\n      box-sizing: initial;\n      background: #fff;\n      border-radius: 4px;\n      box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n    }\n    .sketch-saturation {\n      width: 100%;\n      padding-bottom: 75%;\n      position: relative;\n      overflow: hidden;\n    }\n    .sketch-fields-container {\n      display: block;\n    }\n    .sketch-swatches-container {\n      display: block;\n    }\n    .sketch-controls {\n      display: flex;\n    }\n    .sketch-sliders {\n      padding: 4px 0px;\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n    }\n    .sketch-hue {\n      position: relative;\n      height: 10px;\n      overflow: hidden;\n    }\n    .sketch-alpha {\n      position: relative;\n      height: 10px;\n      margin-top: 4px;\n      overflow: hidden;\n    }\n    .sketch-color {\n      width: 24px;\n      height: 24px;\n      position: relative;\n      margin-top: 4px;\n      margin-left: 4px;\n      border-radius: 3px;\n    }\n    .sketch-active {\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      bottom: 0px;\n      left: 0px;\n      border-radius: 2px;\n      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;\n    }\n    :host-context([dir=rtl]) .sketch-color {\n      margin-right: 4px;\n      margin-left: 0;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":129,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"disableAlpha":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":3}}]}],"presetColors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"afterValidChange":[{"__symbolic":"method"}],"handleValueChange":[{"__symbolic":"method"}],"handleBlockChange":[{"__symbolic":"method"}]}},"ColorSketchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":180,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SketchComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"SketchComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":192,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"AlphaModule","line":193,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"CheckboardModule","line":194,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"EditableInputModule","line":195,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"HueModule","line":196,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"SaturationModule","line":197,"character":4},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":198,"character":4}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"color-sketch-fields","template":"\n  <div class=\"sketch-fields\">\n    <div class=\"sketch-double\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"hex\"\n        [value]=\"hex.replace('#', '')\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"r\"\n        [value]=\"rgb.r\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"g\"\n        [value]=\"rgb.g\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"b\"\n        [value]=\"rgb.b\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"a\"\n        [value]=\"round(rgb.a * 100)\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"100\"\n      ></color-editable-input>\n    </div>\n  </div>\n  ","styles":["\n    .sketch-fields {\n      display: flex;\n      padding-top: 4px;\n    }\n    .sketch-double {\n      -webkit-box-flex: 2;\n      flex: 2 1 0%;\n    }\n    .sketch-single {\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    .sketch-alpha {\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    :host-context([dir=rtl]) .sketch-single {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-alpha {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":94,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"hsl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":98,"character":3}}]}],"rgb":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"hex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"disableAlpha":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":102,"character":3}}]}],"round":[{"__symbolic":"method"}],"handleChange":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"color-sketch-preset-colors","template":"\n  <div class=\"sketch-swatches\">\n    <div class=\"sketch-wrap\" *ngFor=\"let c of colors\">\n      <color-swatch\n        [color]=\"normalizeValue(c).color\"\n        [style]=\"swatchStyle\"\n        [focusStyle]=\"focusStyle(c)\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n        class=\"swatch\"\n      ></color-swatch>\n    </div>\n  </div>\n  ","styles":["\n    .sketch-swatches {\n      position: relative;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0px -10px;\n      padding: 10px 0px 0px 10px;\n      border-top: 1px solid rgb(238, 238, 238);\n    }\n    .sketch-wrap {\n      width: 16px;\n      height: 16px;\n      margin: 0px 10px 10px 0px;\n    }\n    :host-context([dir=rtl]) .sketch-swatches {\n      padding-right: 10px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-wrap {\n      margin-left: 10px;\n      margin-right: 0;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":51,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"handleClick":[{"__symbolic":"method"}],"normalizeValue":[{"__symbolic":"method"}],"focusStyle":[{"__symbolic":"method"}]}}},"origins":{"SketchComponent":"./sketch.component","ColorSketchModule":"./sketch.component","ɵa":"./sketch-fields.component","ɵb":"./sketch-preset-colors.component"},"importAs":"ngx-color/sketch"}