ngx-color 7.2.0 → 7.3.3

package/fesm2020/ngx-color-swatches.mjs

@@ -0,0 +1,441 @@
+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, ColorWrap, SwatchModule, RaisedModule } from 'ngx-color';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey } from 'material-colors';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class SwatchesColorComponent {
+    constructor() {
+        this.first = false;
+        this.last = false;
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.getContrastingColor = getContrastingColor;
+        this.colorStyle = {
+            width: '40px',
+            height: '24px',
+            cursor: 'pointer',
+            marginBottom: '1px',
+        };
+        this.focusStyle = {};
+    }
+    ngOnInit() {
+        this.colorStyle.background = this.color;
+        this.focusStyle.boxShadow = `0 0 4px ${this.color}`;
+        if (this.first) {
+            this.colorStyle.borderRadius = '2px 2px 0 0';
+        }
+        if (this.last) {
+            this.colorStyle.borderRadius = '0 0 2px 2px';
+        }
+        if (this.color === '#FFFFFF') {
+            this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';
+        }
+    }
+    handleClick($event) {
+        this.onClick.emit({
+            data: {
+                hex: this.color,
+                source: 'hex',
+            },
+            $event,
+        });
+    }
+}
+SwatchesColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchesColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchesColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SwatchesColorComponent, selector: "color-swatches-color", inputs: { color: "color", first: "first", last: "last", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <color-swatch
+      [color]="color"
+      [style]="colorStyle"
+      [focusStyle]="focusStyle"
+      [class.first]="first"
+      [class.last]="last"
+      (click)="handleClick($event)"
+      (keydown.enter)="handleClick($event)"
+      (onHover)="onSwatchHover.emit($event)"
+    >
+      <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
+        <svg
+          style="width: 24px; height: 24px;"
+          viewBox="0 0 24 24"
+          [style.fill]="getContrastingColor(color)"
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </div>
+    </color-swatch>
+  `, isInline: true, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}.swatch-check{display:flex;margin-left:8px}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], directives: [{ type: 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: SwatchesColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-swatches-color',
+                    template: `
+    <color-swatch
+      [color]="color"
+      [style]="colorStyle"
+      [focusStyle]="focusStyle"
+      [class.first]="first"
+      [class.last]="last"
+      (click)="handleClick($event)"
+      (keydown.enter)="handleClick($event)"
+      (onHover)="onSwatchHover.emit($event)"
+    >
+      <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
+        <svg
+          style="width: 24px; height: 24px;"
+          viewBox="0 0 24 24"
+          [style.fill]="getContrastingColor(color)"
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </div>
+    </color-swatch>
+  `,
+                    styles: [
+                        `
+      .swatches-group {
+        padding-bottom: 10px;
+        width: 40px;
+        float: left;
+        margin-right: 10px;
+      }
+      .swatch-check {
+        display: flex;
+        margin-left: 8px;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class SwatchesGroupComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+    }
+}
+SwatchesGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchesGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchesGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SwatchesGroupComponent, selector: "color-swatches-group", inputs: { group: "group", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <div class="swatches-group">
+      <color-swatches-color
+        *ngFor="let color of group; let idx = index"
+        [active]="color.toLowerCase() === active"
+        [color]="color"
+        [first]="idx === 0"
+        [last]="idx === group.length - 1"
+        (onClick)="onClick.emit($event)"
+      >
+      </color-swatches-color>
+    </div>
+  `, isInline: true, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}\n"], components: [{ type: SwatchesColorComponent, selector: "color-swatches-color", inputs: ["color", "first", "last", "active"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: 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: SwatchesGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-swatches-group',
+                    template: `
+    <div class="swatches-group">
+      <color-swatches-color
+        *ngFor="let color of group; let idx = index"
+        [active]="color.toLowerCase() === active"
+        [color]="color"
+        [first]="idx === 0"
+        [last]="idx === group.length - 1"
+        (onClick)="onClick.emit($event)"
+      >
+      </color-swatches-color>
+    </div>
+  `,
+                    styles: [
+                        `
+      .swatches-group {
+        padding-bottom: 10px;
+        width: 40px;
+        float: left;
+        margin-right: 10px;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { group: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class SwatchesComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 320;
+        /** Color squares to display */
+        this.height = 240;
+        /** An array of color groups, each with an array of colors */
+        this.colors = [
+            [
+                red['900'],
+                red['700'],
+                red['500'],
+                red['300'],
+                red['100'],
+            ],
+            [
+                pink['900'],
+                pink['700'],
+                pink['500'],
+                pink['300'],
+                pink['100'],
+            ],
+            [
+                purple['900'],
+                purple['700'],
+                purple['500'],
+                purple['300'],
+                purple['100'],
+            ],
+            [
+                deepPurple['900'],
+                deepPurple['700'],
+                deepPurple['500'],
+                deepPurple['300'],
+                deepPurple['100'],
+            ],
+            [
+                indigo['900'],
+                indigo['700'],
+                indigo['500'],
+                indigo['300'],
+                indigo['100'],
+            ],
+            [
+                blue['900'],
+                blue['700'],
+                blue['500'],
+                blue['300'],
+                blue['100'],
+            ],
+            [
+                lightBlue['900'],
+                lightBlue['700'],
+                lightBlue['500'],
+                lightBlue['300'],
+                lightBlue['100'],
+            ],
+            [
+                cyan['900'],
+                cyan['700'],
+                cyan['500'],
+                cyan['300'],
+                cyan['100'],
+            ],
+            [
+                teal['900'],
+                teal['700'],
+                teal['500'],
+                teal['300'],
+                teal['100'],
+            ],
+            [
+                '#194D33',
+                green['700'],
+                green['500'],
+                green['300'],
+                green['100'],
+            ],
+            [
+                lightGreen['900'],
+                lightGreen['700'],
+                lightGreen['500'],
+                lightGreen['300'],
+                lightGreen['100'],
+            ],
+            [
+                lime['900'],
+                lime['700'],
+                lime['500'],
+                lime['300'],
+                lime['100'],
+            ],
+            [
+                yellow['900'],
+                yellow['700'],
+                yellow['500'],
+                yellow['300'],
+                yellow['100'],
+            ],
+            [
+                amber['900'],
+                amber['700'],
+                amber['500'],
+                amber['300'],
+                amber['100'],
+            ],
+            [
+                orange['900'],
+                orange['700'],
+                orange['500'],
+                orange['300'],
+                orange['100'],
+            ],
+            [
+                deepOrange['900'],
+                deepOrange['700'],
+                deepOrange['500'],
+                deepOrange['300'],
+                deepOrange['100'],
+            ],
+            [
+                brown['900'],
+                brown['700'],
+                brown['500'],
+                brown['300'],
+                brown['100'],
+            ],
+            [
+                blueGrey['900'],
+                blueGrey['700'],
+                blueGrey['500'],
+                blueGrey['300'],
+                blueGrey['100'],
+            ],
+            ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],
+        ];
+        this.zDepth = 1;
+        this.radius = 1;
+        this.background = '#fff';
+    }
+    handlePickerChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+SwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SwatchesComponent, selector: "color-swatches", inputs: { width: "width", height: "height", colors: "colors", zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SwatchesComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => SwatchesComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="swatches-picker {{ className }}"
+    [style.width.px]="width" [style.height.px]="height">
+    <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+      <div class="swatches-overflow" [style.height.px]="height">
+        <div class="swatches-body">
+          <color-swatches-group
+            *ngFor="let group of colors"
+            [group]="group" [active]="hex"
+            (onClick)="handlePickerChange($event)"
+          ></color-swatches-group>
+        </div>
+      </div>
+    </color-raised>
+  </div>
+  `, isInline: true, styles: [".swatches-overflow{overflow-y:scroll}.swatches-overflow{padding:16px 0 6px 16px}\n"], components: [{ type: i0.forwardRef(function () { return i1.RaisedComponent; }), selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { type: i0.forwardRef(function () { return SwatchesGroupComponent; }), selector: "color-swatches-group", inputs: ["group", "active"], outputs: ["onClick", "onSwatchHover"] }], 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: SwatchesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-swatches',
+                    template: `
+  <div class="swatches-picker {{ className }}"
+    [style.width.px]="width" [style.height.px]="height">
+    <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+      <div class="swatches-overflow" [style.height.px]="height">
+        <div class="swatches-body">
+          <color-swatches-group
+            *ngFor="let group of colors"
+            [group]="group" [active]="hex"
+            (onClick)="handlePickerChange($event)"
+          ></color-swatches-group>
+        </div>
+      </div>
+    </color-raised>
+  </div>
+  `,
+                    styles: [
+                        `
+      .swatches-overflow {
+        overflow-y: scroll;
+      }
+      .swatches-overflow {
+        padding: 16px 0 6px 16px;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwatchesComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => SwatchesComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+class ColorSwatchesModule {
+}
+ColorSwatchesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSwatchesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorSwatchesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSwatchesModule, declarations: [SwatchesComponent, SwatchesGroupComponent,
+        SwatchesColorComponent], imports: [CommonModule, SwatchModule, RaisedModule], exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent] });
+ColorSwatchesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSwatchesModule, imports: [[CommonModule, SwatchModule, RaisedModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSwatchesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SwatchesComponent,
+                        SwatchesGroupComponent,
+                        SwatchesColorComponent,
+                    ],
+                    exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent],
+                    imports: [CommonModule, SwatchModule, RaisedModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorSwatchesModule, SwatchesColorComponent, SwatchesComponent, SwatchesGroupComponent };
+//# sourceMappingURL=ngx-color-swatches.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-swatches.mjs","sources":["../../src/lib/swatches/swatches-color.component.ts","../../src/lib/swatches/swatches-group.component.ts","../../src/lib/swatches/swatches.component.ts","../../src/lib/swatches/ngx-color-swatches.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnInit,\n  Output,\n} from '@angular/core';\n\nimport { getContrastingColor } from 'ngx-color';\n\n@Component({\n  selector: 'color-swatches-color',\n  template: `\n    <color-swatch\n      [color]=\"color\"\n      [style]=\"colorStyle\"\n      [focusStyle]=\"focusStyle\"\n      [class.first]=\"first\"\n      [class.last]=\"last\"\n      (click)=\"handleClick($event)\"\n      (keydown.enter)=\"handleClick($event)\"\n      (onHover)=\"onSwatchHover.emit($event)\"\n    >\n      <div class=\"swatch-check\" *ngIf=\"active\" [class.first]=\"first\" [class.last]=\"last\">\n        <svg\n          style=\"width: 24px; height: 24px;\"\n          viewBox=\"0 0 24 24\"\n          [style.fill]=\"getContrastingColor(color)\"\n        >\n          <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n        </svg>\n      </div>\n    </color-swatch>\n  `,\n  styles: [\n    `\n      .swatches-group {\n        padding-bottom: 10px;\n        width: 40px;\n        float: left;\n        margin-right: 10px;\n      }\n      .swatch-check {\n        display: flex;\n        margin-left: 8px;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SwatchesColorComponent implements OnInit {\n  @Input() color!: string;\n  @Input() first = false;\n  @Input() last = false;\n  @Input() active!: boolean;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  getContrastingColor = getContrastingColor;\n  colorStyle: Record<string, string> = {\n    width: '40px',\n    height: '24px',\n    cursor: 'pointer',\n    marginBottom: '1px',\n  };\n  focusStyle: Record<string, string> = {};\n\n  ngOnInit() {\n    this.colorStyle.background = this.color;\n    this.focusStyle.boxShadow = `0 0 4px ${this.color}`;\n    if (this.first) {\n      this.colorStyle.borderRadius = '2px 2px 0 0';\n    }\n    if (this.last) {\n      this.colorStyle.borderRadius = '0 0 2px 2px';\n    }\n    if (this.color === '#FFFFFF') {\n      this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';\n    }\n  }\n  handleClick($event) {\n    this.onClick.emit({\n      data: {\n        hex: this.color,\n        source: 'hex',\n      },\n      $event,\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'color-swatches-group',\n  template: `\n    <div class=\"swatches-group\">\n      <color-swatches-color\n        *ngFor=\"let color of group; let idx = index\"\n        [active]=\"color.toLowerCase() === active\"\n        [color]=\"color\"\n        [first]=\"idx === 0\"\n        [last]=\"idx === group.length - 1\"\n        (onClick)=\"onClick.emit($event)\"\n      >\n      </color-swatches-color>\n    </div>\n  `,\n  styles: [\n    `\n      .swatches-group {\n        padding-bottom: 10px;\n        width: 40px;\n        float: left;\n        margin-right: 10px;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SwatchesGroupComponent {\n  @Input() group!: string[];\n  @Input() active!: string;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\nimport {\n  amber,\n  blue,\n  blueGrey,\n  brown,\n  cyan,\n  deepOrange,\n  deepPurple,\n  green,\n  indigo,\n  lightBlue,\n  lightGreen,\n  lime,\n  orange,\n  pink,\n  purple,\n  red,\n  teal,\n  yellow,\n} from 'material-colors';\n\nimport { ColorWrap, RaisedModule, SwatchModule, zDepth } from 'ngx-color';\nimport { SwatchesColorComponent } from './swatches-color.component';\nimport { SwatchesGroupComponent } from './swatches-group.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-swatches',\n  template: `\n  <div class=\"swatches-picker {{ className }}\"\n    [style.width.px]=\"width\" [style.height.px]=\"height\">\n    <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n      <div class=\"swatches-overflow\" [style.height.px]=\"height\">\n        <div class=\"swatches-body\">\n          <color-swatches-group\n            *ngFor=\"let group of colors\"\n            [group]=\"group\" [active]=\"hex\"\n            (onClick)=\"handlePickerChange($event)\"\n          ></color-swatches-group>\n        </div>\n      </div>\n    </color-raised>\n  </div>\n  `,\n  styles: [\n    `\n      .swatches-overflow {\n        overflow-y: scroll;\n      }\n      .swatches-overflow {\n        padding: 16px 0 6px 16px;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SwatchesComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => SwatchesComponent),\n    },\n  ]\n})\nexport class SwatchesComponent extends ColorWrap {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 320;\n  /** Color squares to display */\n  @Input() height: string | number = 240;\n  /** An array of color groups, each with an array of colors */\n  @Input()\n  colors: string[][] = [\n    [\n      red['900'],\n      red['700'],\n      red['500'],\n      red['300'],\n      red['100'],\n    ],\n    [\n      pink['900'],\n      pink['700'],\n      pink['500'],\n      pink['300'],\n      pink['100'],\n    ],\n    [\n      purple['900'],\n      purple['700'],\n      purple['500'],\n      purple['300'],\n      purple['100'],\n    ],\n    [\n      deepPurple['900'],\n      deepPurple['700'],\n      deepPurple['500'],\n      deepPurple['300'],\n      deepPurple['100'],\n    ],\n    [\n      indigo['900'],\n      indigo['700'],\n      indigo['500'],\n      indigo['300'],\n      indigo['100'],\n    ],\n    [\n      blue['900'],\n      blue['700'],\n      blue['500'],\n      blue['300'],\n      blue['100'],\n    ],\n    [\n      lightBlue['900'],\n      lightBlue['700'],\n      lightBlue['500'],\n      lightBlue['300'],\n      lightBlue['100'],\n    ],\n    [\n      cyan['900'],\n      cyan['700'],\n      cyan['500'],\n      cyan['300'],\n      cyan['100'],\n    ],\n    [\n      teal['900'],\n      teal['700'],\n      teal['500'],\n      teal['300'],\n      teal['100'],\n    ],\n    [\n      '#194D33',\n      green['700'],\n      green['500'],\n      green['300'],\n      green['100'],\n    ],\n    [\n      lightGreen['900'],\n      lightGreen['700'],\n      lightGreen['500'],\n      lightGreen['300'],\n      lightGreen['100'],\n    ],\n    [\n      lime['900'],\n      lime['700'],\n      lime['500'],\n      lime['300'],\n      lime['100'],\n    ],\n    [\n      yellow['900'],\n      yellow['700'],\n      yellow['500'],\n      yellow['300'],\n      yellow['100'],\n    ],\n    [\n      amber['900'],\n      amber['700'],\n      amber['500'],\n      amber['300'],\n      amber['100'],\n    ],\n    [\n      orange['900'],\n      orange['700'],\n      orange['500'],\n      orange['300'],\n      orange['100'],\n    ],\n    [\n      deepOrange['900'],\n      deepOrange['700'],\n      deepOrange['500'],\n      deepOrange['300'],\n      deepOrange['100'],\n    ],\n    [\n      brown['900'],\n      brown['700'],\n      brown['500'],\n      brown['300'],\n      brown['100'],\n    ],\n    [\n      blueGrey['900'],\n      blueGrey['700'],\n      blueGrey['500'],\n      blueGrey['300'],\n      blueGrey['100'],\n    ],\n    ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF'],\n  ];\n  @Input() zDepth: zDepth = 1;\n  @Input() radius = 1;\n  @Input() background = '#fff';\n\n  constructor() {\n    super();\n  }\n\n  handlePickerChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [\n    SwatchesComponent,\n    SwatchesGroupComponent,\n    SwatchesColorComponent,\n  ],\n  exports: [SwatchesComponent, SwatchesGroupComponent, SwatchesColorComponent],\n  imports: [CommonModule, SwatchModule, RaisedModule],\n})\nexport class ColorSwatchesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}