ngx-color 7.1.0 → 7.3.2

package/fesm2015/ngx-color-alpha.mjs

@@ -0,0 +1,123 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, toState, AlphaModule, CheckboardModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class AlphaPickerComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 316;
+        /** Pixel value for picker height */
+        this.height = 16;
+        this.direction = 'horizontal';
+        this.pointer = {
+            width: '18px',
+            height: '18px',
+            borderRadius: '50%',
+            transform: 'translate(-9px, -2px)',
+            boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+        };
+    }
+    ngOnChanges() {
+        if (this.direction === 'vertical') {
+            this.pointer.transform = 'translate(-3px, -9px)';
+        }
+        this.setState(toState(this.color, this.oldHue));
+    }
+    handlePickerChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+AlphaPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: AlphaPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlphaPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: AlphaPickerComponent, selector: "color-alpha-picker", inputs: { width: "width", height: "height", direction: "direction" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => AlphaPickerComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => AlphaPickerComponent)
+        }
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <div class="alpha-picker {{ className }}"
+      [style.width.px]="width" [style.height.px]="height">
+      <color-alpha
+        [hsl]="hsl"
+        [rgb]="rgb"
+        [pointer]="pointer"
+        [direction]="direction"
+        (onChange)="handlePickerChange($event)"
+      ></color-alpha>
+    </div>
+  `, isInline: true, styles: [".alpha-picker{position:relative}.color-alpha{radius:2px}\n"], components: [{ type: i1.AlphaComponent, selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: AlphaPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-alpha-picker',
+                    template: `
+    <div class="alpha-picker {{ className }}"
+      [style.width.px]="width" [style.height.px]="height">
+      <color-alpha
+        [hsl]="hsl"
+        [rgb]="rgb"
+        [pointer]="pointer"
+        [direction]="direction"
+        (onChange)="handlePickerChange($event)"
+      ></color-alpha>
+    </div>
+  `,
+                    styles: [
+                        `
+    .alpha-picker {
+      position: relative;
+    }
+    .color-alpha {
+      radius: 2px;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AlphaPickerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => AlphaPickerComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+class ColorAlphaModule {
+}
+ColorAlphaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorAlphaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, declarations: [AlphaPickerComponent], imports: [CommonModule, AlphaModule, CheckboardModule], exports: [AlphaPickerComponent] });
+ColorAlphaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, imports: [[CommonModule, AlphaModule, CheckboardModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorAlphaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AlphaPickerComponent],
+                    exports: [AlphaPickerComponent],
+                    imports: [CommonModule, AlphaModule, CheckboardModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlphaPickerComponent, ColorAlphaModule };
+//# sourceMappingURL=ngx-color-alpha.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-alpha.mjs","sources":["../../src/lib/alpha/alpha-picker.component.ts","../../src/lib/alpha/ngx-color-alpha.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule, OnChanges } from '@angular/core';\n\nimport { AlphaModule, CheckboardModule, ColorWrap, toState } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-alpha-picker',\n  template: `\n    <div class=\"alpha-picker {{ className }}\"\n      [style.width.px]=\"width\" [style.height.px]=\"height\">\n      <color-alpha\n        [hsl]=\"hsl\"\n        [rgb]=\"rgb\"\n        [pointer]=\"pointer\"\n        [direction]=\"direction\"\n        (onChange)=\"handlePickerChange($event)\"\n      ></color-alpha>\n    </div>\n  `,\n  styles: [\n    `\n    .alpha-picker {\n      position: relative;\n    }\n    .color-alpha {\n      radius: 2px;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AlphaPickerComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => AlphaPickerComponent)\n    }\n  ]\n})\nexport class AlphaPickerComponent extends ColorWrap implements OnChanges {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 316;\n  /** Pixel value for picker height */\n  @Input() height: string | number = 16;\n  @Input() direction: 'horizontal' | 'vertical' = 'horizontal';\n  pointer: {[key: string]: string} = {\n    width: '18px',\n    height: '18px',\n    borderRadius: '50%',\n    transform: 'translate(-9px, -2px)',\n    boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n  };\n\n  constructor() {\n    super();\n  }\n  ngOnChanges() {\n    if (this.direction === 'vertical') {\n      this.pointer.transform = 'translate(-3px, -9px)';\n    }\n    this.setState(toState(this.color, this.oldHue));\n  }\n  handlePickerChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [AlphaPickerComponent],\n  exports: [AlphaPickerComponent],\n  imports: [CommonModule, AlphaModule, CheckboardModule],\n})\nexport class ColorAlphaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MA4Ca,6BAA6B,SAAS;IAcjD;QACE,KAAK,EAAE,CAAC;;QAbD,UAAK,GAAoB,GAAG,CAAC;;QAE7B,WAAM,GAAoB,EAAE,CAAC;QAC7B,cAAS,GAA8B,YAAY,CAAC;QAC7D,YAAO,GAA4B;YACjC,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,uBAAuB;YAClC,SAAS,EAAE,iCAAiC;SAC7C,CAAC;KAID;IACD,WAAW;QACT,IAAI,IAAI,CAAC,SAAS,KAAK,UAAU,EAAE;YACjC,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,uBAAuB,CAAC;SAClD;QACD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;KACjD;IACD,kBAAkB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;;iHAzBU,oBAAoB;qGAApB,oBAAoB,mHAZpB;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;YACnD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,oBAAoB,CAAC;SACpD;KACF,sEAlCS;;;;;;;;;;;GAWT;2FAyBU,oBAAoB;kBAtChC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,QAAQ,EAAE;;;;;;;;;;;GAWT;oBACD,MAAM,EAAE;wBACN;;;;;;;GAOD;qBACA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;oBAC1B,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;4BACnD,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,0BAA0B,CAAC;yBACpD;qBACF;iBACF;0EAGU,KAAK;sBAAb,KAAK;gBAEG,MAAM;sBAAd,KAAK;gBACG,SAAS;sBAAjB,KAAK;;MA4BK,gBAAgB;;6GAAhB,gBAAgB;8GAAhB,gBAAgB,iBAjChB,oBAAoB,aA+BrB,YAAY,EAAE,WAAW,EAAE,gBAAgB,aA/B1C,oBAAoB;8GAiCpB,gBAAgB,YAFlB,CAAC,YAAY,EAAE,WAAW,EAAE,gBAAgB,CAAC;2FAE3C,gBAAgB;kBAL5B,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;oBACpC,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,gBAAgB,CAAC;iBACvD;;;AC5ED;;;;;;"}

package/fesm2015/ngx-color-block.mjs

@@ -0,0 +1,275 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, getContrastingColor, isValidHex, CheckboardModule, SwatchModule, EditableInputModule } from 'ngx-color';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class BlockSwatchesComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.swatchStyle = {
+            width: '22px',
+            height: '22px',
+            float: 'left',
+            marginRight: '10px',
+            marginBottom: '10px',
+            borderRadius: '4px',
+        };
+    }
+    handleClick({ hex, $event }) {
+        this.onClick.emit({ hex, $event });
+    }
+    focusStyle(c) {
+        return {
+            boxShadow: `${c} 0 0 4px`,
+        };
+    }
+}
+BlockSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BlockSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BlockSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: BlockSwatchesComponent, selector: "color-block-swatches", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <div class="block-swatches">
+      <color-swatch
+        *ngFor="let c of colors"
+        [color]="c"
+        [style]="swatchStyle"
+        [focusStyle]="focusStyle(c)"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+      ></color-swatch>
+      <div class="clear"></div>
+    </div>
+  `, isInline: true, styles: [".block-swatches{margin-right:-10px}.clear{clear:both}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BlockSwatchesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-block-swatches',
+                    template: `
+    <div class="block-swatches">
+      <color-swatch
+        *ngFor="let c of colors"
+        [color]="c"
+        [style]="swatchStyle"
+        [focusStyle]="focusStyle(c)"
+        (onClick)="handleClick($event)"
+        (onHover)="onSwatchHover.emit($event)"
+      ></color-swatch>
+      <div class="clear"></div>
+    </div>
+  `,
+                    styles: [`
+    .block-swatches {
+      margin-right: -10px;
+    }
+    .clear {
+      clear: both;
+    }
+  `],
+                }]
+        }], propDecorators: { colors: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class BlockComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 170;
+        /** Color squares to display */
+        this.colors = [
+            '#D9E3F0',
+            '#F47373',
+            '#697689',
+            '#37D67A',
+            '#2CCCE4',
+            '#555555',
+            '#dce775',
+            '#ff8a65',
+            '#ba68c8',
+        ];
+        this.triangle = 'top';
+        this.input = {
+            width: '100%',
+            fontSize: '12px',
+            color: '#666',
+            border: '0px',
+            outline: 'none',
+            height: '22px',
+            boxShadow: 'inset 0 0 0 1px #ddd',
+            borderRadius: '4px',
+            padding: '0 7px',
+            boxSizing: 'border-box',
+        };
+        this.wrap = {
+            position: 'relative',
+            width: '100%',
+        };
+        this.disableAlpha = true;
+    }
+    handleValueChange({ data, $event }) {
+        this.handleBlockChange({ hex: data, $event });
+    }
+    getContrastingColor(hex) {
+        return getContrastingColor(hex);
+    }
+    handleBlockChange({ hex, $event }) {
+        if (isValidHex(hex)) {
+            // this.hex = hex;
+            this.handleChange({
+                hex,
+                source: 'hex',
+            }, $event);
+        }
+    }
+}
+BlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: BlockComponent, selector: "color-block", inputs: { width: "width", colors: "colors", triangle: "triangle" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => BlockComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => BlockComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="block-card block-picker {{ className }}">
+    <div class="block-triangle" *ngIf="triangle !== 'hide'"
+      [style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
+    ></div>
+
+    <div class="block-head" [style.background]="hex">
+      <color-checkboard *ngIf="hex === 'transparent'"
+        borderRadius="6px 6px 0 0"
+      ></color-checkboard>
+      <div class="block-label" [style.color]="getContrastingColor(hex)">
+        {{ hex }}
+      </div>
+    </div>
+
+    <div class="block-body">
+      <color-block-swatches [colors]="colors"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-block-swatches>
+      <color-editable-input [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: input, wrap: wrap}"
+      ></color-editable-input>
+    </div>
+  </div>
+  `, isInline: true, styles: [".block-card{background:#fff;border-radius:6px;box-shadow:0 1px #0000001a;position:relative}.block-head{align-items:center;border-radius:6px 6px 0 0;display:flex;height:110px;justify-content:center;position:relative}.block-body{padding:10px}.block-label{font-size:18px;position:relative}.block-triangle{border-style:solid;border-width:0 10px 10px 10px;height:0;left:50%;margin-left:-10px;position:absolute;top:-10px;width:0}\n"], components: [{ type: i0.forwardRef(function () { return i1.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { type: i0.forwardRef(function () { return BlockSwatchesComponent; }), selector: "color-block-swatches", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }, { type: i0.forwardRef(function () { return i1.EditableInputComponent; }), selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: BlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-block',
+                    template: `
+  <div class="block-card block-picker {{ className }}">
+    <div class="block-triangle" *ngIf="triangle !== 'hide'"
+      [style.border-color]="'transparent transparent ' + this.hex + ' transparent'"
+    ></div>
+
+    <div class="block-head" [style.background]="hex">
+      <color-checkboard *ngIf="hex === 'transparent'"
+        borderRadius="6px 6px 0 0"
+      ></color-checkboard>
+      <div class="block-label" [style.color]="getContrastingColor(hex)">
+        {{ hex }}
+      </div>
+    </div>
+
+    <div class="block-body">
+      <color-block-swatches [colors]="colors"
+        (onClick)="handleBlockChange($event)"
+        (onSwatchHover)="onSwatchHover.emit($event)"
+      ></color-block-swatches>
+      <color-editable-input [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: input, wrap: wrap}"
+      ></color-editable-input>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .block-card {
+      background: #fff;
+      border-radius: 6px;
+      box-shadow: 0 1px rgba(0, 0, 0, .1);
+      position: relative;
+    }
+    .block-head {
+      align-items: center;
+      border-radius: 6px 6px 0 0;
+      display: flex;
+      height: 110px;
+      justify-content: center;
+      position: relative;
+    }
+    .block-body {
+      padding: 10px;
+    }
+    .block-label {
+      font-size: 18px;
+      position: relative;
+    }
+    .block-triangle {
+      border-style: solid;
+      border-width: 0 10px 10px 10px;
+      height: 0;
+      left: 50%;
+      margin-left: -10px;
+      position: absolute;
+      top: -10px;
+      width: 0;
+    }
+  `,
+                    ],
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BlockComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => BlockComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], triangle: [{
+                type: Input
+            }] } });
+class ColorBlockModule {
+}
+ColorBlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorBlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorBlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorBlockModule, declarations: [BlockComponent, BlockSwatchesComponent], imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule], exports: [BlockComponent, BlockSwatchesComponent] });
+ColorBlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorBlockModule, imports: [[CommonModule, CheckboardModule, SwatchModule, EditableInputModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorBlockModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BlockComponent, BlockSwatchesComponent],
+                    exports: [BlockComponent, BlockSwatchesComponent],
+                    imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BlockComponent, BlockSwatchesComponent, ColorBlockModule };
+//# sourceMappingURL=ngx-color-block.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-block.mjs","sources":["../../src/lib/block/block-swatches.component.ts","../../src/lib/block/block.component.ts","../../src/lib/block/ngx-color-block.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n@Component({\n  selector: 'color-block-swatches',\n  template: `\n    <div class=\"block-swatches\">\n      <color-swatch\n        *ngFor=\"let c of colors\"\n        [color]=\"c\"\n        [style]=\"swatchStyle\"\n        [focusStyle]=\"focusStyle(c)\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n      ></color-swatch>\n      <div class=\"clear\"></div>\n    </div>\n  `,\n  styles: [`\n    .block-swatches {\n      margin-right: -10px;\n    }\n    .clear {\n      clear: both;\n    }\n  `],\n})\nexport class BlockSwatchesComponent {\n  @Input() colors!: string[];\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n\n  swatchStyle = {\n    width: '22px',\n    height: '22px',\n    float: 'left',\n    marginRight: '10px',\n    marginBottom: '10px',\n    borderRadius: '4px',\n  };\n\n  handleClick({hex, $event}) {\n    this.onClick.emit({hex, $event});\n  }\n  focusStyle(c) {\n    return {\n      boxShadow: `${ c } 0 0 4px`,\n    };\n  }\n\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n  CheckboardModule,\n  ColorWrap,\n  EditableInputModule,\n  getContrastingColor,\n  isValidHex,\n  SwatchModule,\n} from 'ngx-color';\nimport { BlockSwatchesComponent } from './block-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-block',\n  template: `\n  <div class=\"block-card block-picker {{ className }}\">\n    <div class=\"block-triangle\" *ngIf=\"triangle !== 'hide'\"\n      [style.border-color]=\"'transparent transparent ' + this.hex + ' transparent'\"\n    ></div>\n\n    <div class=\"block-head\" [style.background]=\"hex\">\n      <color-checkboard *ngIf=\"hex === 'transparent'\"\n        borderRadius=\"6px 6px 0 0\"\n      ></color-checkboard>\n      <div class=\"block-label\" [style.color]=\"getContrastingColor(hex)\">\n        {{ hex }}\n      </div>\n    </div>\n\n    <div class=\"block-body\">\n      <color-block-swatches [colors]=\"colors\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onSwatchHover)=\"onSwatchHover.emit($event)\"\n      ></color-block-swatches>\n      <color-editable-input [value]=\"hex\"\n        (onChange)=\"handleValueChange($event)\"\n        [style]=\"{input: input, wrap: wrap}\"\n      ></color-editable-input>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .block-card {\n      background: #fff;\n      border-radius: 6px;\n      box-shadow: 0 1px rgba(0, 0, 0, .1);\n      position: relative;\n    }\n    .block-head {\n      align-items: center;\n      border-radius: 6px 6px 0 0;\n      display: flex;\n      height: 110px;\n      justify-content: center;\n      position: relative;\n    }\n    .block-body {\n      padding: 10px;\n    }\n    .block-label {\n      font-size: 18px;\n      position: relative;\n    }\n    .block-triangle {\n      border-style: solid;\n      border-width: 0 10px 10px 10px;\n      height: 0;\n      left: 50%;\n      margin-left: -10px;\n      position: absolute;\n      top: -10px;\n      width: 0;\n    }\n  `,\n  ],\n  preserveWhitespaces: false,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => BlockComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => BlockComponent),\n    },\n  ]\n})\nexport class BlockComponent extends ColorWrap {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 170;\n  /** Color squares to display */\n  @Input() colors = [\n    '#D9E3F0',\n    '#F47373',\n    '#697689',\n    '#37D67A',\n    '#2CCCE4',\n    '#555555',\n    '#dce775',\n    '#ff8a65',\n    '#ba68c8',\n  ];\n  @Input() triangle: 'top' | 'hide' = 'top';\n  input: {[key: string]: string} = {\n    width: '100%',\n    fontSize: '12px',\n    color: '#666',\n    border: '0px',\n    outline: 'none',\n    height: '22px',\n    boxShadow: 'inset 0 0 0 1px #ddd',\n    borderRadius: '4px',\n    padding: '0 7px',\n    boxSizing: 'border-box',\n  };\n  wrap: {[key: string]: string} = {\n    position: 'relative',\n    width: '100%',\n  };\n  disableAlpha = true;\n\n  constructor() {\n    super();\n  }\n\n  handleValueChange({ data, $event }) {\n    this.handleBlockChange({ hex: data, $event });\n  }\n  getContrastingColor(hex) {\n    return getContrastingColor(hex);\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: [BlockComponent, BlockSwatchesComponent],\n  exports: [BlockComponent, BlockSwatchesComponent],\n  imports: [CommonModule, CheckboardModule, SwatchModule, EditableInputModule],\n})\nexport class ColorBlockModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}