ngx-color 7.2.0 → 7.3.3

package/esm2020/hue/hue-picker.component.mjs

@@ -0,0 +1,113 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, HueModule, toState } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export class HuePickerComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 316;
+        /** Pixel value for picker height */
+        this.height = 16;
+        this.radius = 2;
+        this.direction = 'horizontal';
+        this.pointer = {
+            width: '18px',
+            height: '18px',
+            borderRadius: '50%',
+            transform: 'translate(-9px, -2px)',
+            backgroundColor: 'rgb(248, 248, 248)',
+            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({ a: 1, h: data.h, l: 0.5, s: 1 }, $event);
+    }
+}
+HuePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HuePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HuePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: HuePickerComponent, selector: "color-hue-picker", inputs: { width: "width", height: "height", radius: "radius", direction: "direction" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => HuePickerComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => HuePickerComponent),
+        },
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+  <div class="hue-picker {{ className }}"
+    [style.width.px]="width" [style.height.px]="height"
+  >
+    <color-hue [hsl]="hsl" [pointer]="pointer"
+      [direction]="direction" [radius]="radius"
+      (onChange)="handlePickerChange($event)"
+    ></color-hue>
+  </div>
+  `, isInline: true, styles: [".hue-picker{position:relative}\n"], components: [{ type: i1.HueComponent, selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HuePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-hue-picker',
+                    template: `
+  <div class="hue-picker {{ className }}"
+    [style.width.px]="width" [style.height.px]="height"
+  >
+    <color-hue [hsl]="hsl" [pointer]="pointer"
+      [direction]="direction" [radius]="radius"
+      (onChange)="handlePickerChange($event)"
+    ></color-hue>
+  </div>
+  `,
+                    styles: [
+                        `
+    .hue-picker {
+      position: relative;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => HuePickerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => HuePickerComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }] } });
+export class ColorHueModule {
+}
+ColorHueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorHueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorHueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorHueModule, declarations: [HuePickerComponent], imports: [CommonModule, HueModule], exports: [HuePickerComponent] });
+ColorHueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorHueModule, imports: [[CommonModule, HueModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorHueModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HuePickerComponent],
+                    exports: [HuePickerComponent],
+                    imports: [CommonModule, HueModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVlLXBpY2tlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2h1ZS9odWUtcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUUzRyxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDMUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQW1DbkQsTUFBTSxPQUFPLGtCQUFtQixTQUFRLFNBQVM7SUFnQi9DO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFoQlYsbUNBQW1DO1FBQzFCLFVBQUssR0FBb0IsR0FBRyxDQUFDO1FBQ3RDLG9DQUFvQztRQUMzQixXQUFNLEdBQW9CLEVBQUUsQ0FBQztRQUM3QixXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsY0FBUyxHQUE4QixZQUFZLENBQUM7UUFDN0QsWUFBTyxHQUE0QjtZQUNqQyxLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsWUFBWSxFQUFFLEtBQUs7WUFDbkIsU0FBUyxFQUFFLHVCQUF1QjtZQUNsQyxlQUFlLEVBQUUsb0JBQW9CO1lBQ3JDLFNBQVMsRUFBRSxpQ0FBaUM7U0FDN0MsQ0FBQztJQUlGLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLFVBQVUsRUFBRTtZQUNqQyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsR0FBRyx1QkFBdUIsQ0FBQztTQUNsRDtRQUNELElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUNELGtCQUFrQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUNqQyxJQUFJLENBQUMsWUFBWSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsR0FBRyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxNQUFNLENBQUMsQ0FBQztJQUMvRCxDQUFDOzsrR0E1QlUsa0JBQWtCO21HQUFsQixrQkFBa0IsbUlBWmxCO1FBQ1Q7WUFDRSxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsa0JBQWtCLENBQUM7WUFDakQsS0FBSyxFQUFFLElBQUk7U0FDWjtRQUNEO1lBQ0UsT0FBTyxFQUFFLFNBQVM7WUFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztTQUNsRDtLQUNGLHNFQTdCUzs7Ozs7Ozs7O0dBU1Q7MkZBc0JVLGtCQUFrQjtrQkFqQzlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7R0FTVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ047Ozs7R0FJRDtxQkFDQTtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsbUJBQW1CLEVBQUUsS0FBSztvQkFDMUIsU0FBUyxFQUFFO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLG1CQUFtQixDQUFDOzRCQUNqRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjt3QkFDRDs0QkFDRSxPQUFPLEVBQUUsU0FBUzs0QkFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsbUJBQW1CLENBQUM7eUJBQ2xEO3FCQUNGO2lCQUNGOzBFQUdVLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7O0FBOEJSLE1BQU0sT0FBTyxjQUFjOzsyR0FBZCxjQUFjOzRHQUFkLGNBQWMsaUJBcENkLGtCQUFrQixhQWtDbkIsWUFBWSxFQUFFLFNBQVMsYUFsQ3RCLGtCQUFrQjs0R0FvQ2xCLGNBQWMsWUFGaEIsQ0FBQyxZQUFZLEVBQUUsU0FBUyxDQUFDOzJGQUV2QixjQUFjO2tCQUwxQixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRSxDQUFDLGtCQUFrQixDQUFDO29CQUNsQyxPQUFPLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQztvQkFDN0IsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLFNBQVMsQ0FBQztpQkFDbkMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlLCBPbkNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29sb3JXcmFwLCBIdWVNb2R1bGUsIHRvU3RhdGUgfSBmcm9tICduZ3gtY29sb3InO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLWh1ZS1waWNrZXInLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwiaHVlLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIlxuICAgIFtzdHlsZS53aWR0aC5weF09XCJ3aWR0aFwiIFtzdHlsZS5oZWlnaHQucHhdPVwiaGVpZ2h0XCJcbiAgPlxuICAgIDxjb2xvci1odWUgW2hzbF09XCJoc2xcIiBbcG9pbnRlcl09XCJwb2ludGVyXCJcbiAgICAgIFtkaXJlY3Rpb25dPVwiZGlyZWN0aW9uXCIgW3JhZGl1c109XCJyYWRpdXNcIlxuICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICA+PC9jb2xvci1odWU+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLmh1ZS1waWNrZXIge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEh1ZVBpY2tlckNvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEh1ZVBpY2tlckNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBIdWVQaWNrZXJDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciB3aWR0aCAqL1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nIHwgbnVtYmVyID0gMzE2O1xuICAvKiogUGl4ZWwgdmFsdWUgZm9yIHBpY2tlciBoZWlnaHQgKi9cbiAgQElucHV0KCkgaGVpZ2h0OiBzdHJpbmcgfCBudW1iZXIgPSAxNjtcbiAgQElucHV0KCkgcmFkaXVzID0gMjtcbiAgQElucHV0KCkgZGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuICBwb2ludGVyOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzE4cHgnLFxuICAgIGhlaWdodDogJzE4cHgnLFxuICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC05cHgsIC0ycHgpJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICdyZ2IoMjQ4LCAyNDgsIDI0OCknLFxuICAgIGJveFNoYWRvdzogJzAgMXB4IDRweCAwIHJnYmEoMCwgMCwgMCwgMC4zNyknLFxuICB9O1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpIHtcbiAgICBpZiAodGhpcy5kaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCcpIHtcbiAgICAgIHRoaXMucG9pbnRlci50cmFuc2Zvcm0gPSAndHJhbnNsYXRlKC0zcHgsIC05cHgpJztcbiAgICB9XG4gICAgdGhpcy5zZXRTdGF0ZSh0b1N0YXRlKHRoaXMuY29sb3IsIHRoaXMub2xkSHVlKSk7XG4gIH1cbiAgaGFuZGxlUGlja2VyQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZSh7IGE6IDEsIGg6IGRhdGEuaCwgbDogMC41LCBzOiAxIH0sICRldmVudCk7XG4gIH1cbn1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbSHVlUGlja2VyQ29tcG9uZW50XSxcbiAgZXhwb3J0czogW0h1ZVBpY2tlckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEh1ZU1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9ySHVlTW9kdWxlIHt9XG4iXX0=

package/esm2020/hue/ngx-color-hue.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLWh1ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvaHVlL25neC1jb2xvci1odWUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/esm2020/hue/public_api.mjs

@@ -0,0 +1,2 @@
+export { ColorHueModule, HuePickerComponent } from './hue-picker.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvaHVlL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGNBQWMsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgQ29sb3JIdWVNb2R1bGUsIEh1ZVBpY2tlckNvbXBvbmVudCB9IGZyb20gJy4vaHVlLXBpY2tlci5jb21wb25lbnQnO1xuIl19

package/esm2020/hue.component.mjs

@@ -0,0 +1,165 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, } from '@angular/core';
+import { CoordinatesModule } from './coordinates.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./coordinates.directive";
+import * as i2 from "@angular/common";
+export class HueComponent {
+    constructor() {
+        this.hidePointer = false;
+        this.direction = 'horizontal';
+        this.onChange = new EventEmitter();
+        this.left = '0px';
+        this.top = '';
+    }
+    ngOnChanges() {
+        if (this.direction === 'horizontal') {
+            this.left = `${this.hsl.h * 100 / 360}%`;
+        }
+        else {
+            this.top = `${-(this.hsl.h * 100 / 360) + 100}%`;
+        }
+    }
+    handleChange({ top, left, containerHeight, containerWidth, $event }) {
+        let data;
+        if (this.direction === 'vertical') {
+            let h;
+            if (top < 0) {
+                h = 359;
+            }
+            else if (top > containerHeight) {
+                h = 0;
+            }
+            else {
+                const percent = -(top * 100 / containerHeight) + 100;
+                h = 360 * percent / 100;
+            }
+            if (this.hsl.h !== h) {
+                data = {
+                    h,
+                    s: this.hsl.s,
+                    l: this.hsl.l,
+                    a: this.hsl.a,
+                    source: 'rgb',
+                };
+            }
+        }
+        else {
+            let h;
+            if (left < 0) {
+                h = 0;
+            }
+            else if (left > containerWidth) {
+                h = 359;
+            }
+            else {
+                const percent = left * 100 / containerWidth;
+                h = 360 * percent / 100;
+            }
+            if (this.hsl.h !== h) {
+                data = {
+                    h,
+                    s: this.hsl.s,
+                    l: this.hsl.l,
+                    a: this.hsl.a,
+                    source: 'rgb',
+                };
+            }
+        }
+        if (!data) {
+            return;
+        }
+        this.onChange.emit({ data, $event });
+    }
+}
+HueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: HueComponent, selector: "color-hue", inputs: { hsl: "hsl", pointer: "pointer", radius: "radius", shadow: "shadow", hidePointer: "hidePointer", direction: "direction" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
+    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
+      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
+        <div class="color-hue-slider" [ngStyle]="pointer"></div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".color-hue{position:absolute;top:0;bottom:0;left:0;right:0}.color-hue-container{margin:0 2px;position:relative;height:100%}.color-hue-pointer{position:absolute}.color-hue-slider{margin-top:1px;width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;transform:translate(-2px)}.color-hue-horizontal{background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}.color-hue-vertical{background:linear-gradient(to top,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}\n"], directives: [{ type: i1.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-hue',
+                    template: `
+  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
+    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
+      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
+        <div class="color-hue-slider" [ngStyle]="pointer"></div>
+      </div>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .color-hue {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .color-hue-container {
+      margin: 0 2px;
+      position: relative;
+      height: 100%;
+    }
+    .color-hue-pointer {
+      position: absolute;
+    }
+    .color-hue-slider {
+      margin-top: 1px;
+      width: 4px;
+      border-radius: 1px;
+      height: 8px;
+      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+      background: #fff;
+      transform: translateX(-2px);
+    }
+    .color-hue-horizontal {
+      background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
+        33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    }
+    .color-hue-vertical {
+      background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
+        #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    }
+  `,
+                    ],
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], shadow: [{
+                type: Input
+            }], hidePointer: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+export class HueModule {
+}
+HueModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HueModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HueModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HueModule, declarations: [HueComponent], imports: [CommonModule, CoordinatesModule], exports: [HueComponent] });
+HueModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HueModule, imports: [[CommonModule, CoordinatesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: HueModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HueComponent],
+                    exports: [HueComponent],
+                    imports: [CommonModule, CoordinatesModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHVlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvaHVlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxRQUFRLEVBRVIsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBcUQ1RCxNQUFNLE9BQU8sWUFBWTtJQWxEekI7UUF1RFcsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFDcEIsY0FBUyxHQUE4QixZQUFZLENBQUM7UUFDbkQsYUFBUSxHQUFHLElBQUksWUFBWSxFQUF1QyxDQUFDO1FBQzdFLFNBQUksR0FBRyxLQUFLLENBQUM7UUFDYixRQUFHLEdBQUcsRUFBRSxDQUFDO0tBMkRWO0lBekRDLFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxTQUFTLEtBQUssWUFBWSxFQUFFO1lBQ25DLElBQUksQ0FBQyxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLEdBQUcsR0FBRyxHQUFHLENBQUM7U0FDMUM7YUFBTTtZQUNMLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1NBQ2xEO0lBQ0gsQ0FBQztJQUNELFlBQVksQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUUsZUFBZSxFQUFFLGNBQWMsRUFBRSxNQUFNLEVBQUU7UUFDakUsSUFBSSxJQUE0QixDQUFDO1FBQ2pDLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxVQUFVLEVBQUU7WUFDakMsSUFB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QUFZLEVBQUUsaUJBQWlCLENBQUM7aUJBQzNDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE5nTW9kdWxlLFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENvb3JkaW5hdGVzTW9kdWxlIH0gZnJvbSAnLi9jb29yZGluYXRlcy5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgSFNMQSwgSFNMQXNvdXJjZSB9IGZyb20gJy4vaGVscGVycy9jb2xvci5pbnRlcmZhY2VzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItaHVlJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGRpdiBjbGFzcz1cImNvbG9yLWh1ZSBjb2xvci1odWUte3tkaXJlY3Rpb259fVwiIFtzdHlsZS5ib3JkZXItcmFkaXVzLnB4XT1cInJhZGl1c1wiIFtzdHlsZS5ib3gtc2hhZG93XT1cInNoYWRvd1wiPlxuICAgIDxkaXYgbmd4LWNvbG9yLWNvb3JkaW5hdGVzIChjb29yZGluYXRlc0NoYW5nZSk9XCJoYW5kbGVDaGFuZ2UoJGV2ZW50KVwiIGNsYXNzPVwiY29sb3ItaHVlLWNvbnRhaW5lclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLWh1ZS1wb2ludGVyXCIgW3N0eWxlLmxlZnRdPVwibGVmdFwiIFtzdHlsZS50b3BdPVwidG9wXCIgKm5nSWY9XCIhaGlkZVBvaW50ZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbG9yLWh1ZS1zbGlkZXJcIiBbbmdTdHlsZV09XCJwb2ludGVyXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuY29sb3ItaHVlIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGJvdHRvbTogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICByaWdodDogMDtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1jb250YWluZXIge1xuICAgICAgbWFyZ2luOiAwIDJweDtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1wb2ludGVyIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS1zbGlkZXIge1xuICAgICAgbWFyZ2luLXRvcDogMXB4O1xuICAgICAgd2lkdGg6IDRweDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDFweDtcbiAgICAgIGhlaWdodDogOHB4O1xuICAgICAgYm94LXNoYWRvdzogMCAwIDJweCByZ2JhKDAsIDAsIDAsIC42KTtcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTJweCk7XG4gICAgfVxuICAgIC5jb2xvci1odWUtaG9yaXpvbnRhbCB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsICNmMDAgMCUsICNmZjAgMTclLCAjMGYwXG4gICAgICAgIDMzJSwgIzBmZiA1MCUsICMwMGYgNjclLCAjZjBmIDgzJSwgI2YwMCAxMDAlKTtcbiAgICB9XG4gICAgLmNvbG9yLWh1ZS12ZXJ0aWNhbCB7XG4gICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQodG8gdG9wLCAjZjAwIDAlLCAjZmYwIDE3JSwgIzBmMCAzMyUsXG4gICAgICAgICMwZmYgNTAlLCAjMDBmIDY3JSwgI2YwZiA4MyUsICNmMDAgMTAwJSk7XG4gICAgfVxuICBgLFxuICBdLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEh1ZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGhzbCE6IEhTTEE7XG4gIEBJbnB1dCgpIHBvaW50ZXIhOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+O1xuICBASW5wdXQoKSByYWRpdXMhOiBudW1iZXI7XG4gIEBJbnB1dCgpIHNoYWRvdyE6IHN0cmluZztcbiAgQElucHV0KCkgaGlkZVBvaW50ZXIgPSBmYWxzZTtcbiAgQElucHV0KCkgZGlyZWN0aW9uOiAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnID0gJ2hvcml6b250YWwnO1xuICBAT3V0cHV0KCkgb25DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHsgZGF0YTogSFNMQXNvdXJjZTsgJGV2ZW50OiBFdmVudCB9PigpO1xuICBsZWZ0ID0gJzBweCc7XG4gIHRvcCA9ICcnO1xuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpcmVjdGlvbiA9PT0gJ2hvcml6b250YWwnKSB7XG4gICAgICB0aGlzLmxlZnQgPSBgJHt0aGlzLmhzbC5oICogMTAwIC8gMzYwfSVgO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnRvcCA9IGAkey0odGhpcy5oc2wuaCAqIDEwMCAvIDM2MCkgKyAxMDB9JWA7XG4gICAgfVxuICB9XG4gIGhhbmRsZUNoYW5nZSh7IHRvcCwgbGVmdCwgY29udGFpbmVySGVpZ2h0LCBjb250YWluZXJXaWR0aCwgJGV2ZW50IH0pOiB2b2lkIHtcbiAgICBsZXQgZGF0YTogSFNMQXNvdXJjZSB8IHVuZGVmaW5lZDtcbiAgICBpZiAodGhpcy5kaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCcpIHtcbiAgICAgIGxldCBoOiBudW1iZXI7XG4gICAgICBpZiAodG9wIDwgMCkge1xuICAgICAgICBoID0gMzU5O1xuICAgICAgfSBlbHNlIGlmICh0b3AgPiBjb250YWluZXJIZWlnaHQpIHtcbiAgICAgICAgaCA9IDA7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBjb25zdCBwZXJjZW50ID0gLSh0b3AgKiAxMDAgLyBjb250YWluZXJIZWlnaHQpICsgMTAwO1xuICAgICAgICBoID0gMzYwICogcGVyY2VudCAvIDEwMDtcbiAgICAgIH1cblxuICAgICAgaWYgKHRoaXMuaHNsLmggIT09IGgpIHtcbiAgICAgICAgZGF0YSA9IHtcbiAgICAgICAgICBoLFxuICAgICAgICAgIHM6IHRoaXMuaHNsLnMsXG4gICAgICAgICAgbDogdGhpcy5oc2wubCxcbiAgICAgICAgICBhOiB0aGlzLmhzbC5hLFxuICAgICAgICAgIHNvdXJjZTogJ3JnYicsXG4gICAgICAgIH07XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIGxldCBoOiBudW1iZXI7XG4gICAgICBpZiAobGVmdCA8IDApIHtcbiAgICAgICAgaCA9IDA7XG4gICAgICB9IGVsc2UgaWYgKGxlZnQgPiBjb250YWluZXJXaWR0aCkge1xuICAgICAgICBoID0gMzU5O1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY29uc3QgcGVyY2VudCA9IGxlZnQgKiAxMDAgLyBjb250YWluZXJXaWR0aDtcbiAgICAgICAgaCA9IDM2MCAqIHBlcmNlbnQgLyAxMDA7XG4gICAgICB9XG5cbiAgICAgIGlmICh0aGlzLmhzbC5oICE9PSBoKSB7XG4gICAgICAgIGRhdGEgPSB7XG4gICAgICAgICAgaCxcbiAgICAgICAgICBzOiB0aGlzLmhzbC5zLFxuICAgICAgICAgIGw6IHRoaXMuaHNsLmwsXG4gICAgICAgICAgYTogdGhpcy5oc2wuYSxcbiAgICAgICAgICBzb3VyY2U6ICdyZ2InLFxuICAgICAgICB9O1xuICAgICAgfVxuICAgIH1cblxuICAgIGlmICghZGF0YSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMub25DaGFuZ2UuZW1pdCh7IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtIdWVDb21wb25lbnRdLFxuICBleHBvcnRzOiBbSHVlQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ29vcmRpbmF0ZXNNb2R1bGVdLFxufSlcbmV4cG9ydCBjbGFzcyBIdWVNb2R1bGUge31cbiJdfQ==

package/esm2020/material/material.component.mjs

@@ -0,0 +1,211 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, EditableInputModule, isValidHex, RaisedModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export class MaterialComponent extends ColorWrap {
+    constructor() {
+        super();
+        this.HEXinput = {
+            width: '100%',
+            marginTop: '12px',
+            fontSize: '15px',
+            color: 'rgb(51, 51, 51)',
+            padding: '0px',
+            'border-width': '0px 0px 2px',
+            outline: 'none',
+            height: '30px',
+        };
+        this.HEXlabel = {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            fontSize: '11px',
+            color: 'rgb(153, 153, 153)',
+            'text-transform': 'capitalize',
+        };
+        this.RGBinput = {
+            width: '100%',
+            marginTop: '12px',
+            fontSize: '15px',
+            color: '#333',
+            padding: '0px',
+            border: '0px',
+            'border-bottom': '1px solid #eee',
+            outline: 'none',
+            height: '30px',
+        };
+        this.RGBlabel = {
+            position: 'absolute',
+            top: '0px',
+            left: '0px',
+            fontSize: '11px',
+            color: '#999999',
+            'text-transform': 'capitalize',
+        };
+        this.zDepth = 1;
+        this.radius = 1;
+        this.background = '#fff';
+        this.disableAlpha = true;
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+    handleInputChange({ data, $event }) {
+        if (data.hex) {
+            if (isValidHex(data.hex)) {
+                this.handleValueChange({
+                    data: {
+                        hex: data.hex,
+                        source: 'hex',
+                    },
+                    $event,
+                });
+            }
+        }
+        else if (data.r || data.g || data.b) {
+            this.handleValueChange({
+                data: {
+                    r: data.r || this.rgb.r,
+                    g: data.g || this.rgb.g,
+                    b: data.b || this.rgb.b,
+                    source: 'rgb',
+                },
+                $event,
+            });
+        }
+    }
+    afterValidChange() {
+        this.HEXinput['border-bottom-color'] = this.hex;
+    }
+}
+MaterialComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: MaterialComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MaterialComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: MaterialComponent, selector: "color-material", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MaterialComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => MaterialComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+    <div class="material-picker {{ className }}">
+      <color-editable-input label="hex" [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: HEXinput, label: HEXlabel}"
+      ></color-editable-input>
+      <div class="material-split">
+        <div class="material-third">
+          <color-editable-input label="r" [value]="rgb.r"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="g" [value]="rgb.g"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="b" [value]="rgb.b"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+      </div>
+    </div>
+  </color-raised>
+  `, isInline: true, styles: [".material-picker{width:130px;height:130px;padding:16px;font-family:Roboto}.material-split{display:flex;margin-right:-10px;padding-top:11px}.material-third{flex:1 1 0%;padding-right:10px}\n"], components: [{ type: i1.RaisedComponent, selector: "color-raised", inputs: ["zDepth", "radius", "background"] }, { 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: MaterialComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-material',
+                    template: `
+  <color-raised [zDepth]="zDepth" [background]="background" [radius]="radius">
+    <div class="material-picker {{ className }}">
+      <color-editable-input label="hex" [value]="hex"
+        (onChange)="handleValueChange($event)"
+        [style]="{input: HEXinput, label: HEXlabel}"
+      ></color-editable-input>
+      <div class="material-split">
+        <div class="material-third">
+          <color-editable-input label="r" [value]="rgb.r"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="g" [value]="rgb.g"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+        <div class="material-third">
+          <color-editable-input label="b" [value]="rgb.b"
+            [style]="{ input: RGBinput, label: RGBlabel }"
+            (onChange)="handleInputChange($event)"
+          ></color-editable-input>
+        </div>
+      </div>
+    </div>
+  </color-raised>
+  `,
+                    styles: [
+                        `
+  .material-picker {
+    width: 130px;
+    height: 130px;
+    padding: 16px;
+    font-family: Roboto;
+  }
+  .material-split {
+    display: flex;
+    margin-right: -10px;
+    padding-top: 11px;
+  }
+  .material-third {
+    flex: 1 1 0%;
+    padding-right: 10px;
+  }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MaterialComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => MaterialComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { zDepth: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], background: [{
+                type: Input
+            }] } });
+export class ColorMaterialModule {
+}
+ColorMaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorMaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, declarations: [MaterialComponent], imports: [CommonModule, EditableInputModule, RaisedModule], exports: [MaterialComponent] });
+ColorMaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, imports: [[CommonModule, EditableInputModule, RaisedModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorMaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [MaterialComponent],
+                    declarations: [MaterialComponent],
+                    imports: [CommonModule, EditableInputModule, RaisedModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9tYXRlcmlhbC9tYXRlcmlhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUFFLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFVLE1BQU0sV0FBVyxDQUFDO0FBQzdGLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFtRW5ELE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxTQUFTO0lBMkM5QztRQUNFLEtBQUssRUFBRSxDQUFDO1FBM0NWLGFBQVEsR0FBNEI7WUFDbEMsS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsTUFBTTtZQUNqQixRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsaUJBQWlCO1lBQ3hCLE9BQU8sRUFBRSxLQUFLO1lBQ2QsY0FBYyxFQUFFLGFBQWE7WUFDN0IsT0FBTyxFQUFFLE1BQU07WUFDZixNQUFNLEVBQUUsTUFBTTtTQUNmLENBQUM7UUFDRixhQUFRLEdBQTRCO1lBQ2xDLFFBQVEsRUFBRSxVQUFVO1lBQ3BCLEdBQUcsRUFBRSxLQUFLO1lBQ1YsSUFBSSxFQUFFLEtBQUs7WUFDWCxRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsb0JBQW9CO1lBQzNCLGdCQUFnQixFQUFFLFlBQVk7U0FDL0IsQ0FBQztRQUNGLGFBQVEsR0FBNEI7WUFDbEMsS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsTUFBTTtZQUNqQixRQUFRLEVBQUUsTUFBTTtZQUNoQixLQUFLLEVBQUUsTUFBTTtZ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QUNaO3dCQUNEOzRCQUNFLE9BQU8sRUFBRSxTQUFTOzRCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxrQkFBa0IsQ0FBQzt5QkFDakQ7cUJBQ0Y7aUJBQ0Y7MEVBdUNVLE1BQU07c0JBQWQsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSzs7QUE2Q1IsTUFBTSxPQUFPLG1CQUFtQjs7Z0hBQW5CLG1CQUFtQjtpSEFBbkIsbUJBQW1CLGlCQXJGbkIsaUJBQWlCLGFBbUZsQixZQUFZLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxhQW5GOUMsaUJBQWlCO2lIQXFGakIsbUJBQW1CLFlBRnJCLENBQUMsWUFBWSxFQUFFLG1CQUFtQixFQUFFLFlBQVksQ0FBQzsyRkFFL0MsbUJBQW1CO2tCQUwvQixRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRSxDQUFDLGlCQUFpQixDQUFDO29CQUM1QixZQUFZLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQztvQkFDakMsT0FBTyxFQUFFLENBQUMsWUFBWSxFQUFFLG1CQUFtQixFQUFFLFlBQVksQ0FBQztpQkFDM0QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IENvbG9yV3JhcCwgRWRpdGFibGVJbnB1dE1vZHVsZSwgaXNWYWxpZEhleCwgUmFpc2VkTW9kdWxlLCB6RGVwdGggfSBmcm9tICduZ3gtY29sb3InO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLW1hdGVyaWFsJyxcbiAgdGVtcGxhdGU6IGBcbiAgPGNvbG9yLXJhaXNlZCBbekRlcHRoXT1cInpEZXB0aFwiIFtiYWNrZ3JvdW5kXT1cImJhY2tncm91bmRcIiBbcmFkaXVzXT1cInJhZGl1c1wiPlxuICAgIDxkaXYgY2xhc3M9XCJtYXRlcmlhbC1waWNrZXIge3sgY2xhc3NOYW1lIH19XCI+XG4gICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXQgbGFiZWw9XCJoZXhcIiBbdmFsdWVdPVwiaGV4XCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICBbc3R5bGVdPVwie2lucHV0OiBIRVhpbnB1dCwgbGFiZWw6IEhFWGxhYmVsfVwiXG4gICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYXRlcmlhbC1zcGxpdFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibWF0ZXJpYWwtdGhpcmRcIj5cbiAgICAgICAgICA8Y29sb3ItZWRpdGFibGUtaW5wdXQgbGFiZWw9XCJyXCIgW3ZhbHVlXT1cInJnYi5yXCJcbiAgICAgICAgICAgIFtzdHlsZV09XCJ7IGlucHV0OiBSR0JpbnB1dCwgbGFiZWw6IFJHQmxhYmVsIH1cIlxuICAgICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZUlucHV0Q2hhbmdlKCRldmVudClcIlxuICAgICAgICAgID48L2NvbG9yLWVkaXRhYmxlLWlucHV0PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1hdGVyaWFsLXRoaXJkXCI+XG4gICAgICAgICAgPGNvbG9yLWVkaXRhYmxlLWlucHV0IGxhYmVsPVwiZ1wiIFt2YWx1ZV09XCJyZ2IuZ1wiXG4gICAgICAgICAgICBbc3R5bGVdPVwieyBpbnB1dDogUkdCaW5wdXQsIGxhYmVsOiBSR0JsYWJlbCB9XCJcbiAgICAgICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVJbnB1dENoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICA+PC9jb2xvci1lZGl0YWJsZS1pbnB1dD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXRlcmlhbC10aGlyZFwiPlxuICAgICAgICAgIDxjb2xvci1lZGl0YWJsZS1pbnB1dCBsYWJlbD1cImJcIiBbdmFsdWVdPVwicmdiLmJcIlxuICAgICAgICAgICAgW3N0eWxlXT1cInsgaW5wdXQ6IFJHQmlucHV0LCBsYWJlbDogUkdCbGFiZWwgfVwiXG4gICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlSW5wdXRDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgPjwvY29sb3ItZWRpdGFibGUtaW5wdXQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvY29sb3ItcmFpc2VkPlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gIC5tYXRlcmlhbC1waWNrZXIge1xuICAgIHdpZHRoOiAxMzBweDtcbiAgICBoZWlnaHQ6IDEzMHB4O1xuICAgIHBhZGRpbmc6IDE2cHg7XG4gICAgZm9udC1mYW1pbHk6IFJvYm90bztcbiAgfVxuICAubWF0ZXJpYWwtc3BsaXQge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgbWFyZ2luLXJpZ2h0OiAtMTBweDtcbiAgICBwYWRkaW5nLXRvcDogMTFweDtcbiAgfVxuICAubWF0ZXJpYWwtdGhpcmQge1xuICAgIGZsZXg6IDEgMSAwJTtcbiAgICBwYWRkaW5nLXJpZ2h0OiAxMHB4O1xuICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBNYXRlcmlhbENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IE1hdGVyaWFsQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE1hdGVyaWFsQ29tcG9uZW50IGV4dGVuZHMgQ29sb3JXcmFwIHtcbiAgSEVYaW5wdXQ6IHtba2V5OiBzdHJpbmddOiBzdHJpbmd9ID0ge1xuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgbWFyZ2luVG9wOiAnMTJweCcsXG4gICAgZm9udFNpemU6ICcxNXB4JyxcbiAgICBjb2xvcjogJ3JnYig1MSwgNTEsIDUxKScsXG4gICAgcGFkZGluZzogJzBweCcsXG4gICAgJ2JvcmRlci13aWR0aCc6ICcwcHggMHB4IDJweCcsXG4gICAgb3V0bGluZTogJ25vbmUnLFxuICAgIGhlaWdodDogJzMwcHgnLFxuICB9O1xuICBIRVhsYWJlbDoge1trZXk6IHN0cmluZ106IHN0cmluZ30gPSB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wOiAnMHB4JyxcbiAgICBsZWZ0OiAnMHB4JyxcbiAgICBmb250U2l6ZTogJzExcHgnLFxuICAgIGNvbG9yOiAncmdiKDE1MywgMTUzLCAxNTMpJyxcbiAgICAndGV4dC10cmFuc2Zvcm0nOiAnY2FwaXRhbGl6ZScsXG4gIH07XG4gIFJHQmlucHV0OiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzEwMCUnLFxuICAgIG1hcmdpblRvcDogJzEycHgnLFxuICAgIGZvbnRTaXplOiAnMTVweCcsXG4gICAgY29sb3I6ICcjMzMzJyxcbiAgICBwYWRkaW5nOiAnMHB4JyxcbiAgICBib3JkZXI6ICcwcHgnLFxuICAgICdib3JkZXItYm90dG9tJzogJzFweCBzb2xpZCAjZWVlJyxcbiAgICBvdXRsaW5lOiAnbm9uZScsXG4gICAgaGVpZ2h0OiAnMzBweCcsXG4gIH07XG4gIFJHQmxhYmVsOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3A6ICcwcHgnLFxuICAgIGxlZnQ6ICcwcHgnLFxuICAgIGZvbnRTaXplOiAnMTFweCcsXG4gICAgY29sb3I6ICcjOTk5OTk5JyxcbiAgICAndGV4dC10cmFuc2Zvcm0nOiAnY2FwaXRhbGl6ZScsXG4gIH07XG4gIEBJbnB1dCgpIHpEZXB0aDogekRlcHRoID0gMTtcbiAgQElucHV0KCkgcmFkaXVzID0gMTtcbiAgQElucHV0KCkgYmFja2dyb3VuZCA9ICcjZmZmJztcbiAgZGlzYWJsZUFscGhhID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgaGFuZGxlVmFsdWVDaGFuZ2UoeyBkYXRhLCAkZXZlbnQgfSkge1xuICAgIHRoaXMuaGFuZGxlQ2hhbmdlKGRhdGEsICRldmVudCk7XG4gIH1cblxuICBoYW5kbGVJbnB1dENoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgaWYgKGRhdGEuaGV4KSB7XG4gICAgICBpZiAoaXNWYWxpZEhleChkYXRhLmhleCkpIHtcbiAgICAgICAgdGhpcy5oYW5kbGVWYWx1ZUNoYW5nZSh7XG4gICAgICAgICAgZGF0YToge1xuICAgICAgICAgICAgaGV4OiBkYXRhLmhleCxcbiAgICAgICAgICAgIHNvdXJjZTogJ2hleCcsXG4gICAgICAgICAgfSxcbiAgICAgICAgICAkZXZlbnQsXG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH0gZWxzZSBpZiAoZGF0YS5yIHx8IGRhdGEuZyB8fCBkYXRhLmIpIHtcbiAgICAgIHRoaXMuaGFuZGxlVmFsdWVDaGFuZ2Uoe1xuICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgcjogZGF0YS5yIHx8IHRoaXMucmdiLnIsXG4gICAgICAgICAgZzogZGF0YS5nIHx8IHRoaXMucmdiLmcsXG4gICAgICAgICAgYjogZGF0YS5iIHx8IHRoaXMucmdiLmIsXG4gICAgICAgICAgc291cmNlOiAncmdiJyxcbiAgICAgICAgfSxcbiAgICAgICAgJGV2ZW50LFxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgYWZ0ZXJWYWxpZENoYW5nZSgpIHtcbiAgICB0aGlzLkhFWGlucHV0Wydib3JkZXItYm90dG9tLWNvbG9yJ10gPSB0aGlzLmhleDtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBleHBvcnRzOiBbTWF0ZXJpYWxDb21wb25lbnRdLFxuICBkZWNsYXJhdGlvbnM6IFtNYXRlcmlhbENvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIEVkaXRhYmxlSW5wdXRNb2R1bGUsIFJhaXNlZE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yTWF0ZXJpYWxNb2R1bGUgeyB9XG4iXX0=

package/esm2020/material/ngx-color-material.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLW1hdGVyaWFsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9tYXRlcmlhbC9uZ3gtY29sb3ItbWF0ZXJpYWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/esm2020/material/public_api.mjs

@@ -0,0 +1,2 @@
+export { ColorMaterialModule, MaterialComponent } from './material.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvbWF0ZXJpYWwvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7IENvbG9yTWF0ZXJpYWxNb2R1bGUsIE1hdGVyaWFsQ29tcG9uZW50IH0gZnJvbSAnLi9tYXRlcmlhbC5jb21wb25lbnQnO1xuIl19

package/esm2020/ngx-color.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9uZ3gtY29sb3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/esm2020/photoshop/ngx-color-photoshop.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNvbG9yLXBob3Rvc2hvcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcGhvdG9zaG9wL25neC1jb2xvci1waG90b3Nob3AudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/esm2020/photoshop/photoshop-button.component.mjs

@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class PhotoshopButtonComponent {
+    constructor() {
+        this.label = '';
+        this.active = false;
+        this.onClick = new EventEmitter();
+    }
+}
+PhotoshopButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PhotoshopButtonComponent, selector: "color-photoshop-button", inputs: { label: "label", active: "active" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <div class="photoshop-button"  [class.active]="active"
+      (click)="onClick.emit($event)"
+    >
+      {{ label }}
+    </div>
+  `, isInline: true, styles: [".photoshop-button{background-image:linear-gradient(-180deg,rgb(255,255,255) 0%,rgb(230,230,230) 100%);border:1px solid rgb(135,135,135);border-radius:2px;height:22px;box-shadow:#eaeaea 0 1px;font-size:14px;color:#000;line-height:20px;text-align:center;margin-bottom:10px;cursor:pointer}.photoshop-button.active{box-shadow:0 0 0 1px #878787}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PhotoshopButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'color-photoshop-button',
+                    template: `
+    <div class="photoshop-button"  [class.active]="active"
+      (click)="onClick.emit($event)"
+    >
+      {{ label }}
+    </div>
+  `,
+                    styles: [
+                        `
+    .photoshop-button {
+      background-image: linear-gradient(
+        -180deg,
+        rgb(255, 255, 255) 0%,
+        rgb(230, 230, 230) 100%
+      );
+      border: 1px solid rgb(135, 135, 135);
+      border-radius: 2px;
+      height: 22px;
+      box-shadow: rgb(234, 234, 234) 0px 1px 0px 0px;
+      font-size: 14px;
+      color: rgb(0, 0, 0);
+      line-height: 20px;
+      text-align: center;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+    .photoshop-button.active {
+      box-shadow: 0 0 0 1px #878787;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3Bob3Rvc2hvcC9waG90b3Nob3AtYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7QUFzQ3ZCLE1BQU0sT0FBTyx3QkFBd0I7SUFwQ3JDO1FBcUNXLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBQ2QsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7S0FDL0M7O3FIQUpZLHdCQUF3Qjt5R0FBeEIsd0JBQXdCLDZJQWxDekI7Ozs7OztHQU1UOzJGQTRCVSx3QkFBd0I7a0JBcENwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFFBQVEsRUFBRTs7Ozs7O0dBTVQ7b0JBQ0QsTUFBTSxFQUFFO3dCQUNOOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQkQ7cUJBQ0E7b0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLG1CQUFtQixFQUFFLEtBQUs7aUJBQzNCOzhCQUVVLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXBob3Rvc2hvcC1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtYnV0dG9uXCIgIFtjbGFzcy5hY3RpdmVdPVwiYWN0aXZlXCJcbiAgICAgIChjbGljayk9XCJvbkNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgPlxuICAgICAge3sgbGFiZWwgfX1cbiAgICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5waG90b3Nob3AtYnV0dG9uIHtcbiAgICAgIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgLTE4MGRlZyxcbiAgICAgICAgcmdiKDI1NSwgMjU1LCAyNTUpIDAlLFxuICAgICAgICByZ2IoMjMwLCAyMzAsIDIzMCkgMTAwJVxuICAgICAgKTtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkIHJnYigxMzUsIDEzNSwgMTM1KTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgIGhlaWdodDogMjJweDtcbiAgICAgIGJveC1zaGFkb3c6IHJnYigyMzQsIDIzNCwgMjM0KSAwcHggMXB4IDBweCAwcHg7XG4gICAgICBmb250LXNpemU6IDE0cHg7XG4gICAgICBjb2xvcjogcmdiKDAsIDAsIDApO1xuICAgICAgbGluZS1oZWlnaHQ6IDIwcHg7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgICBtYXJnaW4tYm90dG9tOiAxMHB4O1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWJ1dHRvbi5hY3RpdmUge1xuICAgICAgYm94LXNoYWRvdzogMCAwIDAgMXB4ICM4Nzg3ODc7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFBob3Rvc2hvcEJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGxhYmVsID0gJyc7XG4gIEBJbnB1dCgpIGFjdGl2ZSA9IGZhbHNlO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG59XG4iXX0=