ngx-color 8.0.0 → 8.0.3

package/esm2020/photoshop/photoshop.component.mjs

@@ -0,0 +1,185 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core';
+import { AlphaModule, ColorWrap, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';
+import { PhotoshopButtonComponent } from './photoshop-button.component';
+import { PhotoshopFieldsComponent } from './photoshop-fields.component';
+import { PhotoshopPreviewsComponent } from './photoshop-previews.component';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export class PhotoshopComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Title text */
+        this.header = 'Color Picker';
+        this.onAccept = new EventEmitter();
+        this.onCancel = new EventEmitter();
+        this.circle = {
+            width: '12px',
+            height: '12px',
+            borderRadius: '6px',
+            boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 1px inset',
+            transform: 'translate(-6px, -10px)',
+        };
+    }
+    handleValueChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+PhotoshopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PhotoshopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: PhotoshopComponent, selector: "color-photoshop", inputs: { header: "header" }, outputs: { onAccept: "onAccept", onCancel: "onCancel" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => PhotoshopComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => PhotoshopComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="photoshop-picker {{ className }}">
+    <div class="photoshop-head">{{ header }}</div>
+    <div class="photoshop-body">
+      <div class="photoshop-saturation">
+        <color-saturation
+          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="photoshop-hue">
+        <color-hue direction="vertical"
+          [hsl]="hsl" [hidePointer]="true"
+          (onChange)="handleValueChange($event)"
+        ></color-hue>
+      </div>
+      <div class="photoshop-controls">
+        <div class="photoshop-top">
+          <div class="photoshop-previews">
+            <color-photoshop-previews
+              [rgb]="rgb" [currentColor]="currentColor"
+            ></color-photoshop-previews>
+          </div>
+          <div class="photoshop-actions">
+            <color-photoshop-button label="OK"
+              [active]="true" (onClick)="onAccept.emit($event)"
+            ></color-photoshop-button>
+            <color-photoshop-button label="Cancel"
+              (onClick)="onCancel.emit($event)"
+            >
+            </color-photoshop-button>
+            <color-photoshop-fields
+              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
+              (onChange)="handleValueChange($event)"
+            ></color-photoshop-fields>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, isInline: true, styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopPreviewsComponent; }), selector: "color-photoshop-previews", inputs: ["rgb", "currentColor"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopButtonComponent; }), selector: "color-photoshop-button", inputs: ["label", "active"], outputs: ["onClick"] }, { kind: "component", type: i0.forwardRef(function () { return PhotoshopFieldsComponent; }), selector: "color-photoshop-fields", inputs: ["rgb", "hsv", "hex"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: PhotoshopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-photoshop', template: `
+  <div class="photoshop-picker {{ className }}">
+    <div class="photoshop-head">{{ header }}</div>
+    <div class="photoshop-body">
+      <div class="photoshop-saturation">
+        <color-saturation
+          [hsl]="hsl" [hsv]="hsv" [circle]="circle"
+          (onChange)="handleValueChange($event)"
+        ></color-saturation>
+      </div>
+      <div class="photoshop-hue">
+        <color-hue direction="vertical"
+          [hsl]="hsl" [hidePointer]="true"
+          (onChange)="handleValueChange($event)"
+        ></color-hue>
+      </div>
+      <div class="photoshop-controls">
+        <div class="photoshop-top">
+          <div class="photoshop-previews">
+            <color-photoshop-previews
+              [rgb]="rgb" [currentColor]="currentColor"
+            ></color-photoshop-previews>
+          </div>
+          <div class="photoshop-actions">
+            <color-photoshop-button label="OK"
+              [active]="true" (onClick)="onAccept.emit($event)"
+            ></color-photoshop-button>
+            <color-photoshop-button label="Cancel"
+              (onClick)="onCancel.emit($event)"
+            >
+            </color-photoshop-button>
+            <color-photoshop-fields
+              [rgb]="rgb" [hex]="hex" [hsv]="hsv"
+              (onChange)="handleValueChange($event)"
+            ></color-photoshop-fields>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhotoshopComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => PhotoshopComponent),
+                        },
+                    ], styles: [".photoshop-picker{background:rgb(220,220,220);border-radius:4px;box-shadow:#00000040 0 0 0 1px,#00000026 0 8px 16px;box-sizing:initial;width:513px}.photoshop-head{background-image:linear-gradient(-180deg,rgb(240,240,240) 0%,rgb(212,212,212) 100%);border-bottom:1px solid rgb(177,177,177);box-shadow:#fff3 0 1px inset,#00000005 0 -1px inset;height:23px;line-height:24px;border-radius:4px 4px 0 0;font-size:13px;color:#4d4d4d;text-align:center}.photoshop-body{padding:15px 15px 0;display:flex}.photoshop-saturation{width:256px;height:256px;position:relative;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial;overflow:hidden}.photoshop-hue{position:relative;height:256px;width:23px;margin-left:10px;border-width:2px;border-style:solid;border-color:rgb(179,179,179) rgb(179,179,179) rgb(240,240,240);border-image:initial}.photoshop-controls{width:180px;margin-left:10px}.photoshop-top{display:flex}.photoshop-previews{width:60px}.photoshop-actions{flex:1 1 0%;margin-left:20px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { header: [{
+                type: Input
+            }], onAccept: [{
+                type: Output
+            }], onCancel: [{
+                type: Output
+            }] } });
+export class ColorPhotoshopModule {
+}
+ColorPhotoshopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorPhotoshopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, declarations: [PhotoshopComponent, PhotoshopPreviewsComponent,
+        PhotoshopButtonComponent,
+        PhotoshopFieldsComponent], imports: [CommonModule,
+        EditableInputModule,
+        HueModule,
+        AlphaModule,
+        SwatchModule,
+        SaturationModule], exports: [PhotoshopComponent, PhotoshopPreviewsComponent,
+        PhotoshopButtonComponent,
+        PhotoshopFieldsComponent] });
+ColorPhotoshopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, imports: [CommonModule,
+        EditableInputModule,
+        HueModule,
+        AlphaModule,
+        SwatchModule,
+        SaturationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorPhotoshopModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        PhotoshopComponent,
+                        PhotoshopPreviewsComponent,
+                        PhotoshopButtonComponent,
+                        PhotoshopFieldsComponent,
+                    ],
+                    exports: [
+                        PhotoshopComponent,
+                        PhotoshopPreviewsComponent,
+                        PhotoshopButtonComponent,
+                        PhotoshopFieldsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        EditableInputModule,
+                        HueModule,
+                        AlphaModule,
+                        SwatchModule,
+                        SaturationModule,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcGhvdG9zaG9wL3Bob3Rvc2hvcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV0SCxPQUFPLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ25ILE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3hFLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ3hFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUE0SG5ELE1BQU0sT0FBTyxrQkFBbUIsU0FBUSxTQUFTO0lBWS9DO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFaVixpQkFBaUI7UUFDUixXQUFNLEdBQUcsY0FBYyxDQUFDO1FBQ3ZCLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO1FBQ3JDLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDO1FBQy9DLFdBQU0sR0FBRztZQUNQLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxZQUFZLEVBQUUsS0FBSztZQUNuQixTQUFTLEVBQUUsMENBQTBDO1lBQ3JELFNBQVMsRUFBRSx3QkFBd0I7U0FDcEMsQ0FBQztJQUdGLENBQUM7SUFDRCxpQkFBaUIsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDaEMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7K0dBakJVLGtCQUFrQjttR0FBbEIsa0JBQWtCLGlJQVpsQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGtCQUFrQixDQUFDO1lBQ2pELEtBQUssRUFBRSxJQUFJO1NBQ1o7UUFDRDtZQUNFLE9BQU8sRUFBRSxTQUFTO1lBQ2xCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsa0JBQWtCLENBQUM7U0FDbEQ7S0FDRixpREF0SFM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3Q1QsMGhEQXVHQywwQkFBMEIsNklBQzFCLHdCQUF3Qiw2SkFDeEIsd0JBQXdCOzJGQXpCZixrQkFBa0I7a0JBMUg5QixTQUFTOytCQUNFLGlCQUFpQixZQUNqQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdDVCxtQkFrRWdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUssYUFDZjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxtQkFBbUIsQ0FBQzs0QkFDakQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7d0JBQ0Q7NEJBQ0UsT0FBTyxFQUFFLFNBQVM7NEJBQ2xCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLG1CQUFtQixDQUFDO3lCQUNsRDtxQkFDRjswRUFJUSxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksUUFBUTtzQkFBakIsTUFBTTtnQkFDRyxRQUFRO3NCQUFqQixNQUFNOztBQXNDVCxNQUFNLE9BQU8sb0JBQW9COztpSEFBcEIsb0JBQW9CO2tIQUFwQixvQkFBb0IsaUJBMUNwQixrQkFBa0IsRUF1QjNCLDBCQUEwQjtRQUMxQix3QkFBd0I7UUFDeEIsd0JBQXdCLGFBU3hCLFlBQVk7UUFDWixtQkFBbUI7UUFDbkIsU0FBUztRQUNULFdBQVc7UUFDWCxZQUFZO1FBQ1osZ0JBQWdCLGFBdkNQLGtCQUFrQixFQTZCM0IsMEJBQTBCO1FBQzFCLHdCQUF3QjtRQUN4Qix3QkFBd0I7a0hBV2Ysb0JBQW9CLFlBUjdCLFlBQVk7UUFDWixtQkFBbUI7UUFDbkIsU0FBUztRQUNULFdBQVc7UUFDWCxZQUFZO1FBQ1osZ0JBQWdCOzJGQUdQLG9CQUFvQjtrQkF0QmhDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLGtCQUFrQjt3QkFDbEIsMEJBQTBCO3dCQUMxQix3QkFBd0I7d0JBQ3hCLHdCQUF3QjtxQkFDekI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLGtCQUFrQjt3QkFDbEIsMEJBQTBCO3dCQUMxQix3QkFBd0I7d0JBQ3hCLHdCQUF3QjtxQkFDekI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixTQUFTO3dCQUNULFdBQVc7d0JBQ1gsWUFBWTt3QkFDWixnQkFBZ0I7cUJBQ2pCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgZm9yd2FyZFJlZiwgSW5wdXQsIE5nTW9kdWxlLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQWxwaGFNb2R1bGUsIENvbG9yV3JhcCwgRWRpdGFibGVJbnB1dE1vZHVsZSwgSHVlTW9kdWxlLCBTYXR1cmF0aW9uTW9kdWxlLCBTd2F0Y2hNb2R1bGUgfSBmcm9tICduZ3gtY29sb3InO1xuaW1wb3J0IHsgUGhvdG9zaG9wQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi9waG90b3Nob3AtYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBQaG90b3Nob3BGaWVsZHNDb21wb25lbnQgfSBmcm9tICcuL3Bob3Rvc2hvcC1maWVsZHMuY29tcG9uZW50JztcbmltcG9ydCB7IFBob3Rvc2hvcFByZXZpZXdzQ29tcG9uZW50IH0gZnJvbSAnLi9waG90b3Nob3AtcHJldmlld3MuY29tcG9uZW50JztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1waG90b3Nob3AnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIj5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWhlYWRcIj57eyBoZWFkZXIgfX08L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWJvZHlcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3Atc2F0dXJhdGlvblwiPlxuICAgICAgICA8Y29sb3Itc2F0dXJhdGlvblxuICAgICAgICAgIFtoc2xdPVwiaHNsXCIgW2hzdl09XCJoc3ZcIiBbY2lyY2xlXT1cImNpcmNsZVwiXG4gICAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVZhbHVlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICA+PC9jb2xvci1zYXR1cmF0aW9uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLWh1ZVwiPlxuICAgICAgICA8Y29sb3ItaHVlIGRpcmVjdGlvbj1cInZlcnRpY2FsXCJcbiAgICAgICAgICBbaHNsXT1cImhzbFwiIFtoaWRlUG9pbnRlcl09XCJ0cnVlXCJcbiAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgID48L2NvbG9yLWh1ZT5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1jb250cm9sc1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicGhvdG9zaG9wLXRvcFwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJwaG90b3Nob3AtcHJldmlld3NcIj5cbiAgICAgICAgICAgIDxjb2xvci1waG90b3Nob3AtcHJldmlld3NcbiAgICAgICAgICAgICAgW3JnYl09XCJyZ2JcIiBbY3VycmVudENvbG9yXT1cImN1cnJlbnRDb2xvclwiXG4gICAgICAgICAgICA+PC9jb2xvci1waG90b3Nob3AtcHJldmlld3M+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1hY3Rpb25zXCI+XG4gICAgICAgICAgICA8Y29sb3ItcGhvdG9zaG9wLWJ1dHRvbiBsYWJlbD1cIk9LXCJcbiAgICAgICAgICAgICAgW2FjdGl2ZV09XCJ0cnVlXCIgKG9uQ2xpY2spPVwib25BY2NlcHQuZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgICAgID48L2NvbG9yLXBob3Rvc2hvcC1idXR0b24+XG4gICAgICAgICAgICA8Y29sb3ItcGhvdG9zaG9wLWJ1dHRvbiBsYWJlbD1cIkNhbmNlbFwiXG4gICAgICAgICAgICAgIChvbkNsaWNrKT1cIm9uQ2FuY2VsLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICA8L2NvbG9yLXBob3Rvc2hvcC1idXR0b24+XG4gICAgICAgICAgICA8Y29sb3ItcGhvdG9zaG9wLWZpZWxkc1xuICAgICAgICAgICAgICBbcmdiXT1cInJnYlwiIFtoZXhdPVwiaGV4XCIgW2hzdl09XCJoc3ZcIlxuICAgICAgICAgICAgICAob25DaGFuZ2UpPVwiaGFuZGxlVmFsdWVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICA+PC9jb2xvci1waG90b3Nob3AtZmllbGRzPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgIC5waG90b3Nob3AtcGlja2VyIHtcbiAgICAgIGJhY2tncm91bmQ6IHJnYigyMjAsIDIyMCwgMjIwKTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICAgIGJveC1zaGFkb3c6IHJnYmEoMCwgMCwgMCwgMC4yNSkgMHB4IDBweCAwcHggMXB4LCByZ2JhKDAsIDAsIDAsIDAuMTUpIDBweCA4cHggMTZweDtcbiAgICAgIGJveC1zaXppbmc6IGluaXRpYWw7IHdpZHRoOiA1MTNweDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1oZWFkIHtcbiAgICAgIGJhY2tncm91bmQtaW1hZ2U6IGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgLTE4MGRlZyxcbiAgICAgICAgcmdiKDI0MCwgMjQwLCAyNDApIDAlLFxuICAgICAgICByZ2IoMjEyLCAyMTIsIDIxMikgMTAwJVxuICAgICAgKTtcbiAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCByZ2IoMTc3LCAxNzcsIDE3Nyk7XG4gICAgICBib3gtc2hhZG93OiByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMikgMHB4IDFweCAwcHggMHB4IGluc2V0LFxuICAgICAgICByZ2JhKDAsIDAsIDAsIDAuMDIpIDBweCAtMXB4IDBweCAwcHggaW5zZXQ7XG4gICAgICBoZWlnaHQ6IDIzcHg7XG4gICAgICBsaW5lLWhlaWdodDogMjRweDtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDRweCA0cHggMHB4IDBweDtcbiAgICAgIGZvbnQtc2l6ZTogMTNweDtcbiAgICAgIGNvbG9yOiByZ2IoNzcsIDc3LCA3Nyk7XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgfVxuICAgIC5waG90b3Nob3AtYm9keSB7XG4gICAgICBwYWRkaW5nOiAxNXB4IDE1cHggMHB4O1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1zYXR1cmF0aW9uIHtcbiAgICAgIHdpZHRoOiAyNTZweDtcbiAgICAgIGhlaWdodDogMjU2cHg7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBib3JkZXItd2lkdGg6IDJweDtcbiAgICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgICBib3JkZXItY29sb3I6IHJnYigxNzksIDE3OSwgMTc5KSByZ2IoMTc5LCAxNzksIDE3OSkgcmdiKDI0MCwgMjQwLCAyNDApO1xuICAgICAgYm9yZGVyLWltYWdlOiBpbml0aWFsO1xuICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICB9XG4gICAgLnBob3Rvc2hvcC1odWUge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgaGVpZ2h0OiAyNTZweDtcbiAgICAgIHdpZHRoOiAyM3B4O1xuICAgICAgbWFyZ2luLWxlZnQ6IDEwcHg7XG4gICAgICBib3JkZXItd2lkdGg6IDJweDtcbiAgICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gICAgICBib3JkZXItY29sb3I6IHJnYigxNzksIDE3OSwgMTc5KSByZ2IoMTc5LCAxNzksIDE3OSkgcmdiKDI0MCwgMjQwLCAyNDApO1xuICAgICAgYm9yZGVyLWltYWdlOiBpbml0aWFsO1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWNvbnRyb2xzIHtcbiAgICAgIHdpZHRoOiAxODBweDtcbiAgICAgIG1hcmdpbi1sZWZ0OiAxMHB4O1xuICAgIH1cbiAgICAucGhvdG9zaG9wLXRvcCB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cbiAgICAucGhvdG9zaG9wLXByZXZpZXdzIHtcbiAgICAgIHdpZHRoOiA2MHB4O1xuICAgIH1cbiAgICAucGhvdG9zaG9wLWFjdGlvbnMge1xuICAgICAgLXdlYmtpdC1ib3gtZmxleDogMTtcbiAgICAgIGZsZXg6IDEgMSAwJTtcbiAgICAgIG1hcmdpbi1sZWZ0OiAyMHB4O1xuICAgIH1cbiAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByZXNlcnZlV2hpdGVzcGFjZXM6IGZhbHNlLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFBob3Rvc2hvcENvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IENvbG9yV3JhcCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFBob3Rvc2hvcENvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBQaG90b3Nob3BDb21wb25lbnQgZXh0ZW5kcyBDb2xvcldyYXAge1xuICAvKiogVGl0bGUgdGV4dCAqL1xuICBASW5wdXQoKSBoZWFkZXIgPSAnQ29sb3IgUGlja2VyJztcbiAgQE91dHB1dCgpIG9uQWNjZXB0ID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbiAgQE91dHB1dCgpIG9uQ2FuY2VsID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbiAgY2lyY2xlID0ge1xuICAgIHdpZHRoOiAnMTJweCcsXG4gICAgaGVpZ2h0OiAnMTJweCcsXG4gICAgYm9yZGVyUmFkaXVzOiAnNnB4JyxcbiAgICBib3hTaGFkb3c6ICdyZ2IoMjU1LCAyNTUsIDI1NSkgMHB4IDBweCAwcHggMXB4IGluc2V0JyxcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTZweCwgLTEwcHgpJyxcbiAgfTtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuICBoYW5kbGVWYWx1ZUNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBQaG90b3Nob3BDb21wb25lbnQsXG4gICAgUGhvdG9zaG9wUHJldmlld3NDb21wb25lbnQsXG4gICAgUGhvdG9zaG9wQnV0dG9uQ29tcG9uZW50LFxuICAgIFBob3Rvc2hvcEZpZWxkc0NvbXBvbmVudCxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIFBob3Rvc2hvcENvbXBvbmVudCxcbiAgICBQaG90b3Nob3BQcmV2aWV3c0NvbXBvbmVudCxcbiAgICBQaG90b3Nob3BCdXR0b25Db21wb25lbnQsXG4gICAgUGhvdG9zaG9wRmllbGRzQ29tcG9uZW50LFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEVkaXRhYmxlSW5wdXRNb2R1bGUsXG4gICAgSHVlTW9kdWxlLFxuICAgIEFscGhhTW9kdWxlLFxuICAgIFN3YXRjaE1vZHVsZSxcbiAgICBTYXR1cmF0aW9uTW9kdWxlLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBDb2xvclBob3Rvc2hvcE1vZHVsZSB7fVxuIl19

package/esm2020/photoshop/public_api.mjs

@@ -0,0 +1,5 @@
+export { PhotoshopButtonComponent } from './photoshop-button.component';
+export { PhotoshopFieldsComponent } from './photoshop-fields.component';
+export { PhotoshopPreviewsComponent } from './photoshop-previews.component';
+export { ColorPhotoshopModule, PhotoshopComponent } from './photoshop.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvcGhvdG9zaG9wL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDeEUsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDeEUsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDNUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLGtCQUFrQixFQUFFLE1BQU0sdUJBQXVCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBQaG90b3Nob3BCdXR0b25Db21wb25lbnQgfSBmcm9tICcuL3Bob3Rvc2hvcC1idXR0b24uY29tcG9uZW50JztcbmV4cG9ydCB7IFBob3Rvc2hvcEZpZWxkc0NvbXBvbmVudCB9IGZyb20gJy4vcGhvdG9zaG9wLWZpZWxkcy5jb21wb25lbnQnO1xuZXhwb3J0IHsgUGhvdG9zaG9wUHJldmlld3NDb21wb25lbnQgfSBmcm9tICcuL3Bob3Rvc2hvcC1wcmV2aWV3cy5jb21wb25lbnQnO1xuZXhwb3J0IHsgQ29sb3JQaG90b3Nob3BNb2R1bGUsIFBob3Rvc2hvcENvbXBvbmVudCB9IGZyb20gJy4vcGhvdG9zaG9wLmNvbXBvbmVudCc7XG4iXX0=

package/esm2020/raised.component.mjs

@@ -8,8 +8,8 @@ export class RaisedComponent {
         this.background = '#fff';
     }
 }
-RaisedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RaisedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RaisedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: RaisedComponent, selector: "color-raised", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, ngImport: i0, template: `
+RaisedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: RaisedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RaisedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: RaisedComponent, selector: "color-raised", inputs: { zDepth: "zDepth", radius: "radius", background: "background" }, ngImport: i0, template: `
   <div class="raised-wrap">
     <div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
     <div class="raised-content">
@@ -17,7 +17,7 @@ RaisedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
     </div>
   </div>
   `, isInline: true, styles: [".raised-wrap{position:relative;display:inline-block}.raised-bg{position:absolute;top:0px;right:0px;bottom:0px;left:0px}.raised-content{position:relative}.zDepth-0{box-shadow:none}.zDepth-1{box-shadow:0 2px 10px #0000001f,0 2px 5px #00000029}.zDepth-2{box-shadow:0 6px 20px #00000030,0 8px 17px #0003}.zDepth-3{box-shadow:0 17px 50px #00000030,0 12px 15px #0000003d}.zDepth-4{box-shadow:0 25px 55px #00000036,0 16px 28px #00000038}.zDepth-5{box-shadow:0 40px 77px #00000038,0 27px 24px #0003}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RaisedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: RaisedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-raised', template: `
   <div class="raised-wrap">
@@ -36,10 +36,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 export class RaisedModule {
 }
-RaisedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RaisedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RaisedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: RaisedModule, declarations: [RaisedComponent], imports: [CommonModule], exports: [RaisedComponent] });
-RaisedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RaisedModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: RaisedModule, decorators: [{
+RaisedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: RaisedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RaisedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: RaisedModule, declarations: [RaisedComponent], imports: [CommonModule], exports: [RaisedComponent] });
+RaisedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: RaisedModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: RaisedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RaisedComponent],

package/esm2020/saturation.component.mjs

@@ -40,8 +40,8 @@ export class SaturationComponent {
         this.onChange.emit({ data, $event });
     }
 }
-SaturationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SaturationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SaturationComponent, selector: "color-saturation", inputs: { hsl: "hsl", hsv: "hsv", radius: "radius", pointer: "pointer", circle: "circle" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+SaturationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SaturationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SaturationComponent, selector: "color-saturation", inputs: { hsl: "hsl", hsv: "hsv", radius: "radius", pointer: "pointer", circle: "circle" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
   <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
     <div class="saturation-white">
       <div class="saturation-black"></div>
@@ -51,7 +51,7 @@ SaturationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
     </div>
   </div>
   `, isInline: true, styles: [".saturation-white{background:linear-gradient(to right,#fff,rgba(255,255,255,0));position:absolute;top:0;bottom:0;left:0;right:0}.saturation-black{background:linear-gradient(to top,#000,rgba(0,0,0,0));position:absolute;top:0;bottom:0;left:0;right:0}.color-saturation{position:absolute;top:0;bottom:0;left:0;right:0}.saturation-pointer{position:absolute;cursor:default}.saturation-circle{width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006;border-radius:50%;cursor:hand;transform:translate(-2px,-4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SaturationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SaturationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-saturation', template: `
   <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
@@ -78,10 +78,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 export class SaturationModule {
 }
-SaturationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SaturationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SaturationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SaturationModule, declarations: [SaturationComponent], imports: [CommonModule, CoordinatesModule], exports: [SaturationComponent] });
-SaturationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SaturationModule, imports: [CommonModule, CoordinatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SaturationModule, decorators: [{
+SaturationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SaturationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SaturationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: SaturationModule, declarations: [SaturationComponent], imports: [CommonModule, CoordinatesModule], exports: [SaturationComponent] });
+SaturationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SaturationModule, imports: [CommonModule, CoordinatesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SaturationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SaturationComponent],

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

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

package/esm2020/shade/public_api.mjs

@@ -0,0 +1,2 @@
+export { ColorShadeModule, ShadeSliderComponent } from './shade-picker.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2hhZGUvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7IENvbG9yU2hhZGVNb2R1bGUsIFNoYWRlU2xpZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9zaGFkZS1waWNrZXIuY29tcG9uZW50JztcbiJdfQ==

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

@@ -0,0 +1,92 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, ShadeModule, 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 ShadeSliderComponent extends ColorWrap {
+    constructor() {
+        super();
+        /** Pixel value for picker width */
+        this.width = 316;
+        /** Pixel value for picker height */
+        this.height = 16;
+        this.pointer = {
+            width: '18px',
+            height: '18px',
+            borderRadius: '50%',
+            transform: 'translate(-9px, -2px)',
+            boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+        };
+    }
+    ngOnChanges() {
+        this.setState(toState(this.color, this.oldHue));
+    }
+    handlePickerChange({ data, $event }) {
+        this.handleChange(data, $event);
+    }
+}
+ShadeSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShadeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ShadeSliderComponent, selector: "color-shade-picker", inputs: { width: "width", height: "height" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ShadeSliderComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => ShadeSliderComponent),
+        },
+    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <div class="shade-slider {{ className || '' }}"
+      [style.width.px]="width" [style.height.px]="height">
+      <color-shade
+        [hsl]="hsl"
+        [rgb]="rgb"
+        [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-shade>
+    </div>
+  `, isInline: true, styles: [".shade-slider{position:relative}\n"], dependencies: [{ kind: "component", type: i1.ShadeComponent, selector: "color-shade", inputs: ["hsl", "rgb", "pointer", "shadow", "radius"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-shade-picker', template: `
+    <div class="shade-slider {{ className || '' }}"
+      [style.width.px]="width" [style.height.px]="height">
+      <color-shade
+        [hsl]="hsl"
+        [rgb]="rgb"
+        [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-shade>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ShadeSliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => ShadeSliderComponent),
+                        },
+                    ], styles: [".shade-slider{position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+export class ColorShadeModule {
+}
+ColorShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, declarations: [ShadeSliderComponent], imports: [CommonModule, ShadeModule], exports: [ShadeSliderComponent] });
+ColorShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, imports: [CommonModule, ShadeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorShadeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ShadeSliderComponent],
+                    exports: [ShadeSliderComponent],
+                    imports: [CommonModule, ShadeModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUtcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2hhZGUvc2hhZGUtcGlja2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUMzRyxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDNUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7OztBQW9DbkQsTUFBTSxPQUFPLG9CQUFxQixTQUFRLFNBQVM7SUFhakQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQWJWLG1DQUFtQztRQUMxQixVQUFLLEdBQW9CLEdBQUcsQ0FBQztRQUN0QyxvQ0FBb0M7UUFDM0IsV0FBTSxHQUFvQixFQUFFLENBQUM7UUFDdEMsWUFBTyxHQUE0QjtZQUNqQyxLQUFLLEVBQUUsTUFBTTtZQUNiLE1BQU0sRUFBRSxNQUFNO1lBQ2QsWUFBWSxFQUFFLEtBQUs7WUFDbkIsU0FBUyxFQUFFLHVCQUF1QjtZQUNsQyxTQUFTLEVBQUUsaUNBQWlDO1NBQzdDLENBQUM7SUFJRixDQUFDO0lBQ0QsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUNELGtCQUFrQixDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRTtRQUNqQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNsQyxDQUFDOztpSEFyQlUsb0JBQW9CO3FHQUFwQixvQkFBb0IsMkZBWnBCO1FBQ1Q7WUFDRSxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsb0JBQW9CLENBQUM7WUFDbkQsS0FBSyxFQUFFLElBQUk7U0FDWjtRQUNEO1lBQ0UsT0FBTyxFQUFFLFNBQVM7WUFDbEIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztTQUNwRDtLQUNGLHNFQTlCUzs7Ozs7Ozs7OztHQVVUOzJGQXNCVSxvQkFBb0I7a0JBbENoQyxTQUFTOytCQUNFLG9CQUFvQixZQUNwQjs7Ozs7Ozs7OztHQVVULG1CQVFnQix1QkFBdUIsQ0FBQyxNQUFNLHVCQUMxQixLQUFLLGFBQ2Y7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUscUJBQXFCLENBQUM7NEJBQ25ELEtBQUssRUFBRSxJQUFJO3lCQUNaO3dCQUNEOzRCQUNFLE9BQU8sRUFBRSxTQUFTOzRCQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzt5QkFDcEQ7cUJBQ0Y7MEVBSVEsS0FBSztzQkFBYixLQUFLO2dCQUVHLE1BQU07c0JBQWQsS0FBSzs7QUF5QlIsTUFBTSxPQUFPLGdCQUFnQjs7NkdBQWhCLGdCQUFnQjs4R0FBaEIsZ0JBQWdCLGlCQTdCaEIsb0JBQW9CLGFBMkJyQixZQUFZLEVBQUUsV0FBVyxhQTNCeEIsb0JBQW9COzhHQTZCcEIsZ0JBQWdCLFlBRmpCLFlBQVksRUFBRSxXQUFXOzJGQUV4QixnQkFBZ0I7a0JBTDVCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsb0JBQW9CLENBQUM7b0JBQ3BDLE9BQU8sRUFBRSxDQUFDLG9CQUFvQixDQUFDO29CQUMvQixPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsV0FBVyxDQUFDO2lCQUNyQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUsIE9uQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29sb3JXcmFwLCBTaGFkZU1vZHVsZSwgdG9TdGF0ZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3Itc2hhZGUtcGlja2VyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwic2hhZGUtc2xpZGVyIHt7IGNsYXNzTmFtZSB8fCAnJyB9fVwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwid2lkdGhcIiBbc3R5bGUuaGVpZ2h0LnB4XT1cImhlaWdodFwiPlxuICAgICAgPGNvbG9yLXNoYWRlXG4gICAgICAgIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgW3JnYl09XCJyZ2JcIlxuICAgICAgICBbcG9pbnRlcl09XCJwb2ludGVyXCJcbiAgICAgICAgKG9uQ2hhbmdlKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNoYWRlPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnNoYWRlLXNsaWRlciB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2hhZGVTbGlkZXJDb21wb25lbnQpLFxuICAgICAgbXVsdGk6IHRydWUsXG4gICAgfSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBDb2xvcldyYXAsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBTaGFkZVNsaWRlckNvbXBvbmVudCksXG4gICAgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTaGFkZVNsaWRlckNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIHdpZHRoICovXG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgfCBudW1iZXIgPSAzMTY7XG4gIC8qKiBQaXhlbCB2YWx1ZSBmb3IgcGlja2VyIGhlaWdodCAqL1xuICBASW5wdXQoKSBoZWlnaHQ6IHN0cmluZyB8IG51bWJlciA9IDE2O1xuICBwb2ludGVyOiB7W2tleTogc3RyaW5nXTogc3RyaW5nfSA9IHtcbiAgICB3aWR0aDogJzE4cHgnLFxuICAgIGhlaWdodDogJzE4cHgnLFxuICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC05cHgsIC0ycHgpJyxcbiAgICBib3hTaGFkb3c6ICcwIDFweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMzcpJyxcbiAgfTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG4gIG5nT25DaGFuZ2VzKCkge1xuICAgIHRoaXMuc2V0U3RhdGUodG9TdGF0ZSh0aGlzLmNvbG9yLCB0aGlzLm9sZEh1ZSkpO1xuICB9XG4gIGhhbmRsZVBpY2tlckNoYW5nZSh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5oYW5kbGVDaGFuZ2UoZGF0YSwgJGV2ZW50KTtcbiAgfVxufVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtTaGFkZVNsaWRlckNvbXBvbmVudF0sXG4gIGV4cG9ydHM6IFtTaGFkZVNsaWRlckNvbXBvbmVudF0sXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFNoYWRlTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JTaGFkZU1vZHVsZSB7fVxuIl19

package/esm2020/shade.component.mjs

@@ -47,8 +47,8 @@ export class ShadeComponent {
         this.onChange.emit({ data, $event });
     }
 }
-ShadeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShadeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ShadeComponent, selector: "color-shade", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
+ShadeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ShadeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: ShadeComponent, selector: "color-shade", inputs: { hsl: "hsl", rgb: "rgb", pointer: "pointer", shadow: "shadow", radius: "radius" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="shade" [style.border-radius]="radius">
       <div
         class="shade-gradient"
@@ -71,7 +71,7 @@ ShadeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
       </div>
     </div>
   `, isInline: true, styles: [".shade,.shade-gradient{position:absolute;top:0;bottom:0;left:0;right:0}.shade-container{position:relative;height:100%;margin:0 3px}.shade-pointer{position:absolute}.shade-slider{width:4px;border-radius:1px;height:8px;box-shadow:0 0 2px #0009;background:#fff;margin-top:1px;transform:translate(-2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CoordinatesDirective, selector: "[ngx-color-coordinates]", outputs: ["coordinatesChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-shade', template: `
     <div class="shade" [style.border-radius]="radius">
@@ -111,10 +111,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 export class ShadeModule {
 }
-ShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ShadeModule, declarations: [ShadeComponent], imports: [CommonModule, CoordinatesModule], exports: [ShadeComponent] });
-ShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadeModule, imports: [CommonModule, CoordinatesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ShadeModule, decorators: [{
+ShadeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ShadeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ShadeModule, declarations: [ShadeComponent], imports: [CommonModule, CoordinatesModule], exports: [ShadeComponent] });
+ShadeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeModule, imports: [CommonModule, CoordinatesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ShadeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ShadeComponent],

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

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

package/esm2020/sketch/public_api.mjs

@@ -0,0 +1,4 @@
+export { SketchFieldsComponent } from './sketch-fields.component';
+export { SketchPresetColorsComponent } from './sketch-preset-colors.component';
+export { ColorSketchModule, SketchComponent } from './sketch.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2tldGNoL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgU2tldGNoRmllbGRzQ29tcG9uZW50IH0gZnJvbSAnLi9za2V0Y2gtZmllbGRzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBTa2V0Y2hQcmVzZXRDb2xvcnNDb21wb25lbnQgfSBmcm9tICcuL3NrZXRjaC1wcmVzZXQtY29sb3JzLmNvbXBvbmVudCc7XG5leHBvcnQgeyBDb2xvclNrZXRjaE1vZHVsZSwgU2tldGNoQ29tcG9uZW50IH0gZnJvbSAnLi9za2V0Y2guY29tcG9uZW50JztcbiJdfQ==