ngx-color 7.2.0 → 7.3.0

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

@@ -0,0 +1,218 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import * as i1 from 'ngx-color';
+import { ColorWrap, isValidHex, EditableInputModule, RaisedModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+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
+            }] } });
+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],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorMaterialModule, MaterialComponent };
+//# sourceMappingURL=ngx-color-material.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-material.mjs","sources":["../../../../src/lib/components/material/material.component.ts","../../../../src/lib/components/material/ngx-color-material.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, EditableInputModule, isValidHex, RaisedModule, zDepth } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-material',\n  template: `\n  <color-raised [zDepth]=\"zDepth\" [background]=\"background\" [radius]=\"radius\">\n    <div class=\"material-picker {{ className }}\">\n      <color-editable-input label=\"hex\" [value]=\"hex\"\n        (onChange)=\"handleValueChange($event)\"\n        [style]=\"{input: HEXinput, label: HEXlabel}\"\n      ></color-editable-input>\n      <div class=\"material-split\">\n        <div class=\"material-third\">\n          <color-editable-input label=\"r\" [value]=\"rgb.r\"\n            [style]=\"{ input: RGBinput, label: RGBlabel }\"\n            (onChange)=\"handleInputChange($event)\"\n          ></color-editable-input>\n        </div>\n        <div class=\"material-third\">\n          <color-editable-input label=\"g\" [value]=\"rgb.g\"\n            [style]=\"{ input: RGBinput, label: RGBlabel }\"\n            (onChange)=\"handleInputChange($event)\"\n          ></color-editable-input>\n        </div>\n        <div class=\"material-third\">\n          <color-editable-input label=\"b\" [value]=\"rgb.b\"\n            [style]=\"{ input: RGBinput, label: RGBlabel }\"\n            (onChange)=\"handleInputChange($event)\"\n          ></color-editable-input>\n        </div>\n      </div>\n    </div>\n  </color-raised>\n  `,\n  styles: [\n    `\n  .material-picker {\n    width: 130px;\n    height: 130px;\n    padding: 16px;\n    font-family: Roboto;\n  }\n  .material-split {\n    display: flex;\n    margin-right: -10px;\n    padding-top: 11px;\n  }\n  .material-third {\n    flex: 1 1 0%;\n    padding-right: 10px;\n  }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MaterialComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => MaterialComponent),\n    },\n  ]\n})\nexport class MaterialComponent extends ColorWrap {\n  HEXinput: {[key: string]: string} = {\n    width: '100%',\n    marginTop: '12px',\n    fontSize: '15px',\n    color: 'rgb(51, 51, 51)',\n    padding: '0px',\n    'border-width': '0px 0px 2px',\n    outline: 'none',\n    height: '30px',\n  };\n  HEXlabel: {[key: string]: string} = {\n    position: 'absolute',\n    top: '0px',\n    left: '0px',\n    fontSize: '11px',\n    color: 'rgb(153, 153, 153)',\n    'text-transform': 'capitalize',\n  };\n  RGBinput: {[key: string]: string} = {\n    width: '100%',\n    marginTop: '12px',\n    fontSize: '15px',\n    color: '#333',\n    padding: '0px',\n    border: '0px',\n    'border-bottom': '1px solid #eee',\n    outline: 'none',\n    height: '30px',\n  };\n  RGBlabel: {[key: string]: string} = {\n    position: 'absolute',\n    top: '0px',\n    left: '0px',\n    fontSize: '11px',\n    color: '#999999',\n    'text-transform': 'capitalize',\n  };\n  @Input() zDepth: zDepth = 1;\n  @Input() radius = 1;\n  @Input() background = '#fff';\n  disableAlpha = true;\n\n  constructor() {\n    super();\n  }\n\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n\n  handleInputChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        this.handleValueChange({\n          data: {\n            hex: data.hex,\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else if (data.r || data.g || data.b) {\n      this.handleValueChange({\n        data: {\n          r: data.r || this.rgb.r,\n          g: data.g || this.rgb.g,\n          b: data.b || this.rgb.b,\n          source: 'rgb',\n        },\n        $event,\n      });\n    }\n  }\n\n  afterValidChange() {\n    this.HEXinput['border-bottom-color'] = this.hex;\n  }\n}\n\n@NgModule({\n  exports: [MaterialComponent],\n  declarations: [MaterialComponent],\n  imports: [CommonModule, EditableInputModule, RaisedModule],\n})\nexport class ColorMaterialModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MAuEa,iBAAkB,SAAQ,SAAS;IA2C9C;QACE,KAAK,EAAE,CAAC;QA3CV,aAAQ,GAA4B;YAClC,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,KAAK;YACd,cAAc,EAAE,aAAa;YAC7B,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;SACf,CAAC;QACF,aAAQ,GAA4B;YAClC,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,oBAAoB;YAC3B,gBAAgB,EAAE,YAAY;SAC/B,CAAC;QACF,aAAQ,GAA4B;YAClC,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,KAAK;YACb,eAAe,EAAE,gBAAgB;YACjC,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;SACf,CAAC;QACF,aAAQ,GAA4B;YAClC,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,MAAM;YAChB,KAAK,EAAE,SAAS;YAChB,gBAAgB,EAAE,YAAY;SAC/B,CAAC;QACO,WAAM,GAAW,CAAC,CAAC;QACnB,WAAM,GAAG,CAAC,CAAC;QACX,eAAU,GAAG,MAAM,CAAC;QAC7B,iBAAY,GAAG,IAAI,CAAC;KAInB;IAED,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;KACjC;IAED,iBAAiB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;QAChC,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBACxB,IAAI,CAAC,iBAAiB,CAAC;oBACrB,IAAI,EAAE;wBACJ,GAAG,EAAE,IAAI,CAAC,GAAG;wBACb,MAAM,EAAE,KAAK;qBACd;oBACD,MAAM;iBACP,CAAC,CAAC;aACJ;SACF;aAAM,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE;YACrC,IAAI,CAAC,iBAAiB,CAAC;gBACrB,IAAI,EAAE;oBACJ,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;oBACvB,MAAM,EAAE,KAAK;iBACd;gBACD,MAAM;aACP,CAAC,CAAC;SACJ;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;KACjD;;8GA7EU,iBAAiB;kGAAjB,iBAAiB,mHAZjB;QACT;YACE,OAAO,EAAE,iBAAiB;YAC1B,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;YAChD,KAAK,EAAE,IAAI;SACZ;QACD;YACE,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;SACjD;KACF,iDA7DS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;2FAkCU,iBAAiB;kBAjE7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;oBAC1B,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BT;oBACD,MAAM,EAAE;wBACN;;;;;;;;;;;;;;;;GAgBD;qBACA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,mBAAmB,EAAE,KAAK;oBAC1B,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;4BAChD,KAAK,EAAE,IAAI;yBACZ;wBACD;4BACE,OAAO,EAAE,SAAS;4BAClB,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;yBACjD;qBACF;iBACF;0EAuCU,MAAM;sBAAd,KAAK;gBACG,MAAM;sBAAd,KAAK;gBACG,UAAU;sBAAlB,KAAK;;MA6CK,mBAAmB;;gHAAnB,mBAAmB;iHAAnB,mBAAmB,iBArFnB,iBAAiB,aAmFlB,YAAY,EAAE,mBAAmB,EAAE,YAAY,aAnF9C,iBAAiB;iHAqFjB,mBAAmB,YAFrB,CAAC,YAAY,EAAE,mBAAmB,EAAE,YAAY,CAAC;2FAE/C,mBAAmB;kBAL/B,QAAQ;mBAAC;oBACR,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,YAAY,CAAC;iBAC3D;;;AC3JD;;;;;;"}

package/material/material.component.d.ts

@@ -1,4 +1,7 @@
 import { ColorWrap, zDepth } from 'ngx-color';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-color";
 export declare class MaterialComponent extends ColorWrap {
     HEXinput: {
         [key: string]: string;
@@ -26,6 +29,11 @@ export declare class MaterialComponent extends ColorWrap {
         $event: any;
     }): void;
     afterValidChange(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaterialComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaterialComponent, "color-material", never, { "zDepth": "zDepth"; "radius": "radius"; "background": "background"; }, {}, never, never>;
 }
 export declare class ColorMaterialModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorMaterialModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorMaterialModule, [typeof MaterialComponent], [typeof i1.CommonModule, typeof i2.EditableInputModule, typeof i2.RaisedModule], [typeof MaterialComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ColorMaterialModule>;
 }

package/material/ngx-color-material.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './material.component';
+/// <amd-module name="ngx-color/material" />
+export * from './public_api';

package/material/package.json

@@ -5,15 +5,27 @@
     "type": "git",
     "url": "git+https://github.com/scttcper/ngx-color.git"
   },
-  "main": "bundles/ngx-color-material.umd.js",
-  "module": "fesm2015/ngx-color-material.js",
-  "es2015": "fesm2015/ngx-color-material.js",
-  "esm2015": "esm2015/ngx-color-material.js",
-  "fesm2015": "fesm2015/ngx-color-material.js",
+  "module": "fesm2015/ngx-color-material.mjs",
+  "es2020": "fesm2020/ngx-color-material.mjs",
+  "esm2020": "esm2020/ngx-color-material.mjs",
+  "fesm2020": "fesm2020/ngx-color-material.mjs",
+  "fesm2015": "fesm2015/ngx-color-material.mjs",
   "typings": "ngx-color-material.d.ts",
-  "metadata": "ngx-color-material.metadata.json",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./ngx-color-material.d.ts",
+      "esm2020": "./esm2020/ngx-color-material.mjs",
+      "es2020": "./fesm2020/ngx-color-material.mjs",
+      "es2015": "./fesm2015/ngx-color-material.mjs",
+      "node": "./fesm2015/ngx-color-material.mjs",
+      "default": "./fesm2020/ngx-color-material.mjs"
+    }
+  },
   "sideEffects": false,
   "dependencies": {
-    "tslib": "^2.1.0"
+    "tslib": "^2.3.0"
   }
 }

package/material/public_api.d.ts

@@ -0,0 +1 @@
+export { ColorMaterialModule, MaterialComponent } from './material.component';

package/ngx-color.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="ngx-color" />
 export * from './public_api';

package/package.json

@@ -1,12 +1,12 @@
 {
   "$schema": "../../../node_modules/ng-packagr/package.schema.json",
   "name": "ngx-color",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
     "material-colors": "^1.2.6",
-    "tslib": "^2.1.0"
+    "tslib": "^2.3.0"
   },
   "peerDependencies": {
     "@angular/core": ">=12.0.0-0",
@@ -27,12 +27,24 @@
     "material design",
     "popup"
   ],
-  "main": "bundles/ngx-color.umd.js",
-  "module": "fesm2015/ngx-color.js",
-  "es2015": "fesm2015/ngx-color.js",
-  "esm2015": "esm2015/ngx-color.js",
-  "fesm2015": "fesm2015/ngx-color.js",
+  "module": "fesm2015/ngx-color.mjs",
+  "es2020": "fesm2020/ngx-color.mjs",
+  "esm2020": "esm2020/ngx-color.mjs",
+  "fesm2020": "fesm2020/ngx-color.mjs",
+  "fesm2015": "fesm2015/ngx-color.mjs",
   "typings": "ngx-color.d.ts",
-  "metadata": "ngx-color.metadata.json",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./ngx-color.d.ts",
+      "esm2020": "./esm2020/ngx-color.mjs",
+      "es2020": "./fesm2020/ngx-color.mjs",
+      "es2015": "./fesm2015/ngx-color.mjs",
+      "node": "./fesm2015/ngx-color.mjs",
+      "default": "./fesm2020/ngx-color.mjs"
+    }
+  },
   "sideEffects": false
 }

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

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

package/photoshop/esm2020/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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvdG9zaG9wLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvcGhvdG9zaG9wL3Bob3Rvc2hvcC1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOztBQXNDdkIsTUFBTSxPQUFPLHdCQUF3QjtJQXBDckM7UUFxQ1csVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUNYLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFDZCxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztLQUMvQzs7cUhBSlksd0JBQXdCO3lHQUF4Qix3QkFBd0IsNklBbEN6Qjs7Ozs7O0dBTVQ7MkZBNEJVLHdCQUF3QjtrQkFwQ3BDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHdCQUF3QjtvQkFDbEMsUUFBUSxFQUFFOzs7Ozs7R0FNVDtvQkFDRCxNQUFNLEVBQUU7d0JBQ047Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXFCRDtxQkFDQTtvQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsbUJBQW1CLEVBQUUsS0FBSztpQkFDM0I7OEJBRVUsS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY29sb3ItcGhvdG9zaG9wLWJ1dHRvbicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInBob3Rvc2hvcC1idXR0b25cIiAgW2NsYXNzLmFjdGl2ZV09XCJhY3RpdmVcIlxuICAgICAgKGNsaWNrKT1cIm9uQ2xpY2suZW1pdCgkZXZlbnQpXCJcbiAgICA+XG4gICAgICB7eyBsYWJlbCB9fVxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgLnBob3Rvc2hvcC1idXR0b24ge1xuICAgICAgYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAtMTgwZGVnLFxuICAgICAgICByZ2IoMjU1LCAyNTUsIDI1NSkgMCUsXG4gICAgICAgIHJnYigyMzAsIDIzMCwgMjMwKSAxMDAlXG4gICAgICApO1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgcmdiKDEzNSwgMTM1LCAxMzUpO1xuICAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgaGVpZ2h0OiAyMnB4O1xuICAgICAgYm94LXNoYWRvdzogcmdiKDIzNCwgMjM0LCAyMzQpIDBweCAxcHggMHB4IDBweDtcbiAgICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICAgIGNvbG9yOiByZ2IoMCwgMCwgMCk7XG4gICAgICBsaW5lLWhlaWdodDogMjBweDtcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgIG1hcmdpbi1ib3R0b206IDEwcHg7XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgfVxuICAgIC5waG90b3Nob3AtYnV0dG9uLmFjdGl2ZSB7XG4gICAgICBib3gtc2hhZG93OiAwIDAgMCAxcHggIzg3ODc4NztcbiAgICB9XG4gIGAsXG4gIF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgUGhvdG9zaG9wQnV0dG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgbGFiZWwgPSAnJztcbiAgQElucHV0KCkgYWN0aXZlID0gZmFsc2U7XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbn1cbiJdfQ==