ngx-color 7.0.2 → 7.3.1

package/fesm2020/ngx-color-compact.mjs

@@ -0,0 +1,451 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { getContrastingColor, isValidHex, ColorWrap, EditableInputModule, SwatchModule, RaisedModule } from 'ngx-color';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class CompactColorComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.swatchStyle = {
+            width: '15px',
+            height: '15px',
+            float: 'left',
+            marginRight: '5px',
+            marginBottom: '5px',
+            position: 'relative',
+            cursor: 'pointer',
+        };
+        this.swatchFocus = {};
+        this.getContrastingColor = getContrastingColor;
+    }
+    ngOnChanges() {
+        this.swatchStyle.background = this.color;
+        this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;
+        if (this.color.toLowerCase() === '#ffffff') {
+            this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';
+        }
+    }
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+}
+CompactColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompactColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CompactColorComponent, selector: "color-compact-color", inputs: { color: "color", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="compact-color">
+    <color-swatch class="swatch"
+      [color]="color" [style]="swatchStyle"
+      [focusStyle]="swatchFocus"
+      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
+      >
+      <div class="compact-dot"
+        [class.active]="active" [style.background]="getContrastingColor(color)"
+      ></div>
+    </color-swatch>
+  </div>
+  `, isInline: true, styles: [".compact-dot{position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;opacity:0}.compact-dot.active{opacity:1}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-compact-color',
+                    template: `
+  <div class="compact-color">
+    <color-swatch class="swatch"
+      [color]="color" [style]="swatchStyle"
+      [focusStyle]="swatchFocus"
+      (onClick)="handleClick($event)" (onHover)="onSwatchHover.emit($event)"
+      >
+      <div class="compact-dot"
+        [class.active]="active" [style.background]="getContrastingColor(color)"
+      ></div>
+    </color-swatch>
+  </div>
+  `,
+                    styles: [
+                        `
+  .compact-dot {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    border-radius: 50%;
+    opacity: 0;
+  }
+  .compact-dot.active {
+    opacity: 1;
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class CompactFieldsComponent {
+    constructor() {
+        this.onChange = new EventEmitter();
+        this.HEXWrap = {
+            marginTop: '-3px',
+            marginBottom: '-3px',
+            // flex: '6 1 0%',
+            position: 'relative',
+        };
+        this.HEXinput = {
+            width: '80%',
+            padding: '0px',
+            paddingLeft: '20%',
+            border: 'none',
+            outline: 'none',
+            background: 'none',
+            fontSize: '12px',
+            color: '#333',
+            height: '16px',
+        };
+        this.HEXlabel = {
+            display: 'none',
+        };
+        this.RGBwrap = {
+            marginTop: '-3px',
+            marginBottom: '-3px',
+            // flex: '3 1 0%',
+            position: 'relative',
+        };
+        this.RGBinput = {
+            width: '80%',
+            padding: '0px',
+            paddingLeft: '30%',
+            border: 'none',
+            outline: 'none',
+            background: 'none',
+            fontSize: '12px',
+            color: '#333',
+            height: '16px',
+        };
+        this.RGBlabel = {
+            position: 'absolute',
+            top: '6px',
+            left: '0px',
+            'line-height': '16px',
+            'text-transform': 'uppercase',
+            fontSize: '12px',
+            color: '#999',
+        };
+    }
+    handleChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                this.onChange.emit({
+                    data: {
+                        hex: data.hex,
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else {
+            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,
+            });
+        }
+    }
+}
+CompactFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompactFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CompactFieldsComponent, selector: "color-compact-fields", inputs: { hex: "hex", rgb: "rgb" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+  <div class="compact-fields">
+    <div class="compact-active" [style.background]="hex"></div>
+    <div style="flex: 6 1 0%;">
+      <color-editable-input
+        [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
+        label="hex"
+        [value]="hex"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="r"
+        [value]="rgb.r"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="g"
+        [value]="rgb.g"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="b"
+        [value]="rgb.b"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, isInline: true, styles: [".compact-fields{display:flex;padding-bottom:6px;padding-right:5px;position:relative}.compact-active{position:absolute;top:6px;left:5px;height:9px;width:9px}\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: CompactFieldsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-compact-fields',
+                    template: `
+  <div class="compact-fields">
+    <div class="compact-active" [style.background]="hex"></div>
+    <div style="flex: 6 1 0%;">
+      <color-editable-input
+        [style]="{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }"
+        label="hex"
+        [value]="hex"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="r"
+        [value]="rgb.r"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="g"
+        [value]="rgb.g"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+    <div style="flex: 3 1 0%">
+      <color-editable-input
+        [style]="{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }"
+        label="b"
+        [value]="rgb.b"
+        (onChange)="handleChange($event)"
+      ></color-editable-input>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+  .compact-fields {
+    display: flex;
+    padding-bottom: 6px;
+    padding-right: 5px;
+    position: relative;
+  }
+  .compact-active {
+    position: absolute;
+    top: 6px;
+    left: 5px;
+    height: 9px;
+    width: 9px;
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { hex: [{
+                type: Input
+            }], rgb: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+class CompactComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Color squares to display */
+        this.colors = [
+            '#4D4D4D',
+            '#999999',
+            '#FFFFFF',
+            '#F44E3B',
+            '#FE9200',
+            '#FCDC00',
+            '#DBDF00',
+            '#A4DD00',
+            '#68CCCA',
+            '#73D8FF',
+            '#AEA1FF',
+            '#FDA1FF',
+            '#333333',
+            '#808080',
+            '#cccccc',
+            '#D33115',
+            '#E27300',
+            '#FCC400',
+            '#B0BC00',
+            '#68BC00',
+            '#16A5A5',
+            '#009CE0',
+            '#7B64FF',
+            '#FA28FF',
+            '#000000',
+            '#666666',
+            '#B3B3B3',
+            '#9F0500',
+            '#C45100',
+            '#FB9E00',
+            '#808900',
+            '#194D33',
+            '#0C797D',
+            '#0062B1',
+            '#653294',
+            '#AB149E',
+        ];
+        this.zDepth = 1;
+        this.radius = 1;
+        this.background = '#fff';
+        this.disableAlpha = true;
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            this.handleChange({ hex, source: 'hex' }, $event);
+        }
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+CompactComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CompactComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: CompactComponent, selector: "color-compact", inputs: { colors: "colors", zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => CompactComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => CompactComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <color-raised class="color-compact" [zDepth]="zDepth" [background]="background" [radius]="radius">
+    <div class="compact-picker {{ className }}">
+      <div>
+        <color-compact-color
+          *ngFor="let color of colors" [color]="color"
+          [active]="color.toLowerCase() === hex.toLowerCase()"
+          (onClick)="handleBlockChange($event)"
+        ></color-compact-color>
+        <div class="compact-clear"></div>
+      </div>
+      <color-compact-fields
+        [hex]="hex"
+        [rgb]="rgb"
+        (onChange)="handleValueChange($event)"
+      ></color-compact-fields>
+    </div>
+  </color-raised>
+  `, isInline: true, styles: [".color-compact{background:#f6f6f6;radius:4px}.compact-picker{padding-top:5px;padding-left:5px;box-sizing:border-box;width:245px}.compact-clear{clear:both}\n"], components: [{ type: i0.forwardRef(function () { return i1.RaisedComponent; }), selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { type: i0.forwardRef(function () { return CompactColorComponent; }), selector: "color-compact-color", inputs: ["color", "active"], outputs: ["onClick", "onSwatchHover"] }, { type: i0.forwardRef(function () { return CompactFieldsComponent; }), selector: "color-compact-fields", inputs: ["hex", "rgb"], outputs: ["onChange"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: CompactComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-compact',
+                    template: `
+  <color-raised class="color-compact" [zDepth]="zDepth" [background]="background" [radius]="radius">
+    <div class="compact-picker {{ className }}">
+      <div>
+        <color-compact-color
+          *ngFor="let color of colors" [color]="color"
+          [active]="color.toLowerCase() === hex.toLowerCase()"
+          (onClick)="handleBlockChange($event)"
+        ></color-compact-color>
+        <div class="compact-clear"></div>
+      </div>
+      <color-compact-fields
+        [hex]="hex"
+        [rgb]="rgb"
+        (onChange)="handleValueChange($event)"
+      ></color-compact-fields>
+    </div>
+  </color-raised>
+  `,
+                    styles: [
+                        `
+    .color-compact {
+      background: #f6f6f6;
+      radius: 4px;
+    }
+    .compact-picker {
+      padding-top: 5px;
+      padding-left: 5px;
+      box-sizing: border-box;
+      width: 245px;
+    }
+    .compact-clear {
+      clear: both;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CompactComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => CompactComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { colors: [{
+                type: Input
+            }], zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+class ColorCompactModule {
+}
+ColorCompactModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCompactModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorCompactModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCompactModule, declarations: [CompactComponent, CompactColorComponent,
+        CompactFieldsComponent], imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule], exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent] });
+ColorCompactModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCompactModule, imports: [[CommonModule, EditableInputModule, SwatchModule, RaisedModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorCompactModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        CompactComponent,
+                        CompactColorComponent,
+                        CompactFieldsComponent,
+                    ],
+                    exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],
+                    imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorCompactModule, CompactColorComponent, CompactComponent, CompactFieldsComponent };
+//# sourceMappingURL=ngx-color-compact.mjs.map

package/fesm2020/ngx-color-compact.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-compact.mjs","sources":["../../src/lib/compact/compact-color.component.ts","../../src/lib/compact/compact-fields.component.ts","../../src/lib/compact/compact.component.ts","../../src/lib/compact/ngx-color-compact.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n} from '@angular/core';\n\nimport { getContrastingColor } from 'ngx-color';\n\n@Component({\n  selector: 'color-compact-color',\n  template: `\n  <div class=\"compact-color\">\n    <color-swatch class=\"swatch\"\n      [color]=\"color\" [style]=\"swatchStyle\"\n      [focusStyle]=\"swatchFocus\"\n      (onClick)=\"handleClick($event)\" (onHover)=\"onSwatchHover.emit($event)\"\n      >\n      <div class=\"compact-dot\"\n        [class.active]=\"active\" [style.background]=\"getContrastingColor(color)\"\n      ></div>\n    </color-swatch>\n  </div>\n  `,\n  styles: [\n    `\n  .compact-dot {\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    bottom: 5px;\n    left: 5px;\n    border-radius: 50%;\n    opacity: 0;\n  }\n  .compact-dot.active {\n    opacity: 1;\n  }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class CompactColorComponent implements OnChanges {\n  @Input() color!: string;\n  @Input() active!: boolean;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  swatchStyle: Record<string, string> = {\n    width: '15px',\n    height: '15px',\n    float: 'left',\n    marginRight: '5px',\n    marginBottom: '5px',\n    position: 'relative',\n    cursor: 'pointer',\n  };\n  swatchFocus: Record<string, string> = {};\n  getContrastingColor = getContrastingColor;\n\n  ngOnChanges() {\n    this.swatchStyle.background = this.color;\n    this.swatchFocus.boxShadow = `0 0 4px ${this.color}`;\n    if (this.color.toLowerCase() === '#ffffff') {\n      this.swatchStyle.boxShadow = 'inset 0 0 0 1px #ddd';\n    }\n  }\n  handleClick({ hex, $event }) {\n    this.onClick.emit({ hex, $event });\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { isValidHex, RGBA } from 'ngx-color';\n\n@Component({\n  selector: 'color-compact-fields',\n  template: `\n  <div class=\"compact-fields\">\n    <div class=\"compact-active\" [style.background]=\"hex\"></div>\n    <div style=\"flex: 6 1 0%;\">\n      <color-editable-input\n        [style]=\"{ wrap: HEXWrap, input: HEXinput, label: HEXlabel }\"\n        label=\"hex\"\n        [value]=\"hex\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div style=\"flex: 3 1 0%\">\n      <color-editable-input\n        [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n        label=\"r\"\n        [value]=\"rgb.r\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div style=\"flex: 3 1 0%\">\n      <color-editable-input\n        [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n        label=\"g\"\n        [value]=\"rgb.g\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div style=\"flex: 3 1 0%\">\n      <color-editable-input\n        [style]=\"{ wrap: RGBwrap, input: RGBinput, label: RGBlabel }\"\n        label=\"b\"\n        [value]=\"rgb.b\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n  .compact-fields {\n    display: flex;\n    padding-bottom: 6px;\n    padding-right: 5px;\n    position: relative;\n  }\n  .compact-active {\n    position: absolute;\n    top: 6px;\n    left: 5px;\n    height: 9px;\n    width: 9px;\n  }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class CompactFieldsComponent {\n  @Input() hex!: string;\n  @Input() rgb!: RGBA;\n  @Output() onChange = new EventEmitter<any>();\n  HEXWrap: {[key: string]: string} = {\n    marginTop: '-3px',\n    marginBottom: '-3px',\n    // flex: '6 1 0%',\n    position: 'relative',\n  };\n  HEXinput: {[key: string]: string} = {\n    width: '80%',\n    padding: '0px',\n    paddingLeft: '20%',\n    border: 'none',\n    outline: 'none',\n    background: 'none',\n    fontSize: '12px',\n    color: '#333',\n    height: '16px',\n  };\n  HEXlabel: {[key: string]: string} = {\n    display: 'none',\n  };\n  RGBwrap: {[key: string]: string} = {\n    marginTop: '-3px',\n    marginBottom: '-3px',\n    // flex: '3 1 0%',\n    position: 'relative',\n  };\n  RGBinput: {[key: string]: string} = {\n    width: '80%',\n    padding: '0px',\n    paddingLeft: '30%',\n    border: 'none',\n    outline: 'none',\n    background: 'none',\n    fontSize: '12px',\n    color: '#333',\n    height: '16px',\n  };\n  RGBlabel: {[key: string]: string} = {\n    position: 'absolute',\n    top: '6px',\n    left: '0px',\n    'line-height': '16px',\n    'text-transform': 'uppercase',\n    fontSize: '12px',\n    color: '#999',\n  };\n\n  handleChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        this.onChange.emit({\n          data: {\n            hex: data.hex,\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else {\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    }\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, SwatchModule, zDepth } from 'ngx-color';\nimport { CompactColorComponent } from './compact-color.component';\nimport { CompactFieldsComponent } from './compact-fields.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-compact',\n  template: `\n  <color-raised class=\"color-compact\" [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n    <div class=\"compact-picker {{ className }}\">\n      <div>\n        <color-compact-color\n          *ngFor=\"let color of colors\" [color]=\"color\"\n          [active]=\"color.toLowerCase() === hex.toLowerCase()\"\n          (onClick)=\"handleBlockChange($event)\"\n        ></color-compact-color>\n        <div class=\"compact-clear\"></div>\n      </div>\n      <color-compact-fields\n        [hex]=\"hex\"\n        [rgb]=\"rgb\"\n        (onChange)=\"handleValueChange($event)\"\n      ></color-compact-fields>\n    </div>\n  </color-raised>\n  `,\n  styles: [\n    `\n    .color-compact {\n      background: #f6f6f6;\n      radius: 4px;\n    }\n    .compact-picker {\n      padding-top: 5px;\n      padding-left: 5px;\n      box-sizing: border-box;\n      width: 245px;\n    }\n    .compact-clear {\n      clear: both;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CompactComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => CompactComponent),\n    },\n  ]\n})\nexport class CompactComponent extends ColorWrap {\n  /** Color squares to display */\n  @Input() colors = [\n    '#4D4D4D',\n    '#999999',\n    '#FFFFFF',\n    '#F44E3B',\n    '#FE9200',\n    '#FCDC00',\n    '#DBDF00',\n    '#A4DD00',\n    '#68CCCA',\n    '#73D8FF',\n    '#AEA1FF',\n    '#FDA1FF',\n    '#333333',\n    '#808080',\n    '#cccccc',\n    '#D33115',\n    '#E27300',\n    '#FCC400',\n    '#B0BC00',\n    '#68BC00',\n    '#16A5A5',\n    '#009CE0',\n    '#7B64FF',\n    '#FA28FF',\n    '#000000',\n    '#666666',\n    '#B3B3B3',\n    '#9F0500',\n    '#C45100',\n    '#FB9E00',\n    '#808900',\n    '#194D33',\n    '#0C797D',\n    '#0062B1',\n    '#653294',\n    '#AB149E',\n  ];\n  @Input() zDepth: zDepth = 1;\n  @Input() radius = 1;\n  @Input() background = '#fff';\n  disableAlpha = true;\n\n  constructor() {\n    super();\n  }\n  handleBlockChange({ hex, $event }) {\n    if (isValidHex(hex)) {\n      this.handleChange({ hex, source: 'hex' }, $event);\n    }\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [\n    CompactComponent,\n    CompactColorComponent,\n    CompactFieldsComponent,\n  ],\n  exports: [CompactComponent, CompactColorComponent, CompactFieldsComponent],\n  imports: [CommonModule, EditableInputModule, SwatchModule, RaisedModule],\n})\nexport class ColorCompactModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}