ngx-color 8.0.3 → 10.0.0

package/README.md

@@ -6,8 +6,6 @@
   <a href="https://www.npmjs.org/package/ngx-color">
     <img src="https://badge.fury.io/js/ngx-color.svg" alt="npm">
   </a> 
-  <a href="https://circleci.com/gh/scttcper/ngx-color">
-    <img src="https://circleci.com/gh/scttcper/ngx-color.svg?style=svg" alt="circleci"></a> 
   <a href="https://codecov.io/github/scttcper/ngx-color">
     <img src="https://img.shields.io/codecov/c/github/scttcper/ngx-color.svg" alt="codecov">
   </a>
@@ -59,7 +57,8 @@ Latest version available for each version of Angular
 | 5.1.4     | 9.x       |
 | 6.2.0     | 10.x 11.x |
 | 7.3.3     | 12.x 13.x |
-| current   | >= 14.x   |
+| 8.0.3     | 14.x 15.x |
+| current   | >= 16.x   |
 
 ### Install
 

package/alpha/alpha-picker.component.d.ts

@@ -19,7 +19,7 @@ export declare class AlphaPickerComponent extends ColorWrap implements OnChanges
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlphaPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlphaPickerComponent, "color-alpha-picker", never, { "width": "width"; "height": "height"; "direction": "direction"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlphaPickerComponent, "color-alpha-picker", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class ColorAlphaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorAlphaModule, never>;

package/alpha.component.d.ts

@@ -24,7 +24,7 @@ export declare class AlphaComponent implements OnChanges {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlphaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlphaComponent, "color-alpha", never, { "hsl": "hsl"; "rgb": "rgb"; "pointer": "pointer"; "shadow": "shadow"; "radius": "radius"; "direction": "direction"; }, { "onChange": "onChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlphaComponent, "color-alpha", never, { "hsl": { "alias": "hsl"; "required": false; }; "rgb": { "alias": "rgb"; "required": false; }; "pointer": { "alias": "pointer"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "radius": { "alias": "radius"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }
 export declare class AlphaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AlphaModule, never>;

package/block/block-swatches.component.d.ts

@@ -20,5 +20,5 @@ export declare class BlockSwatchesComponent {
         boxShadow: string;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<BlockSwatchesComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BlockSwatchesComponent, "color-block-swatches", never, { "colors": "colors"; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BlockSwatchesComponent, "color-block-swatches", never, { "colors": { "alias": "colors"; "required": false; }; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never, false, never>;
 }

package/block/block.component.d.ts

@@ -27,7 +27,7 @@ export declare class BlockComponent extends ColorWrap {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BlockComponent, "color-block", never, { "width": "width"; "colors": "colors"; "triangle": "triangle"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BlockComponent, "color-block", never, { "width": { "alias": "width"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "triangle": { "alias": "triangle"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class ColorBlockModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorBlockModule, never>;

package/checkboard.component.d.ts

@@ -10,7 +10,7 @@ export declare class CheckboardComponent implements OnInit {
     gridStyles: Record<string, string>;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboardComponent, "color-checkboard", never, { "white": "white"; "size": "size"; "grey": "grey"; "boxShadow": "boxShadow"; "borderRadius": "borderRadius"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboardComponent, "color-checkboard", never, { "white": { "alias": "white"; "required": false; }; "size": { "alias": "size"; "required": false; }; "grey": { "alias": "grey"; "required": false; }; "boxShadow": { "alias": "boxShadow"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class CheckboardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboardModule, never>;

package/chrome/chrome-fields.component.d.ts

@@ -18,5 +18,5 @@ export declare class ChromeFieldsComponent implements OnInit {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChromeFieldsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChromeFieldsComponent, "color-chrome-fields", never, { "disableAlpha": "disableAlpha"; "hsl": "hsl"; "rgb": "rgb"; "hex": "hex"; }, { "onChange": "onChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChromeFieldsComponent, "color-chrome-fields", never, { "disableAlpha": { "alias": "disableAlpha"; "required": false; }; "hsl": { "alias": "hsl"; "required": false; }; "rgb": { "alias": "rgb"; "required": false; }; "hex": { "alias": "hex"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }

package/chrome/chrome.component.d.ts

@@ -16,7 +16,7 @@ export declare class ChromeComponent extends ColorWrap {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChromeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChromeComponent, "color-chrome", never, { "disableAlpha": "disableAlpha"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChromeComponent, "color-chrome", never, { "disableAlpha": { "alias": "disableAlpha"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class ColorChromeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorChromeModule, never>;

package/circle/circle-swatch.component.d.ts

@@ -15,5 +15,5 @@ export declare class CircleSwatchComponent implements OnChanges {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CircleSwatchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CircleSwatchComponent, "color-circle-swatch", never, { "color": "color"; "circleSize": "circleSize"; "circleSpacing": "circleSpacing"; "focus": "focus"; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CircleSwatchComponent, "color-circle-swatch", never, { "color": { "alias": "color"; "required": false; }; "circleSize": { "alias": "circleSize"; "required": false; }; "circleSpacing": { "alias": "circleSpacing"; "required": false; }; "focus": { "alias": "focus"; "required": false; }; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never, false, never>;
 }

package/circle/circle.component.d.ts

@@ -23,7 +23,7 @@ export declare class CircleComponent extends ColorWrap {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CircleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CircleComponent, "color-circle", never, { "width": "width"; "colors": "colors"; "circleSize": "circleSize"; "circleSpacing": "circleSpacing"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CircleComponent, "color-circle", never, { "width": { "alias": "width"; "required": false; }; "colors": { "alias": "colors"; "required": false; }; "circleSize": { "alias": "circleSize"; "required": false; }; "circleSpacing": { "alias": "circleSpacing"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class ColorCircleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorCircleModule, never>;

package/color-wrap.component.d.ts

@@ -49,7 +49,7 @@ export declare class ColorWrap implements OnInit, OnChanges, OnDestroy, ControlV
     setDisabledState(isDisabled: boolean): void;
     writeValue(hex: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorWrap, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColorWrap, "color-wrap", never, { "className": "className"; "mode": "mode"; "color": "color"; }, { "colorChange": "colorChange"; "onChange": "onChange"; "onChangeComplete": "onChangeComplete"; "onSwatchHover": "onSwatchHover"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorWrap, "color-wrap", never, { "className": { "alias": "className"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "colorChange": "colorChange"; "onChange": "onChange"; "onChangeComplete": "onChangeComplete"; "onSwatchHover": "onSwatchHover"; }, never, never, false, never>;
 }
 export declare class ColorWrapModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorWrapModule, never>;

package/compact/compact-color.component.d.ts

@@ -15,5 +15,5 @@ export declare class CompactColorComponent implements OnChanges {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CompactColorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CompactColorComponent, "color-compact-color", never, { "color": "color"; "active": "active"; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CompactColorComponent, "color-compact-color", never, { "color": { "alias": "color"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "onClick": "onClick"; "onSwatchHover": "onSwatchHover"; }, never, never, false, never>;
 }

package/compact/compact-fields.component.d.ts

@@ -28,5 +28,5 @@ export declare class CompactFieldsComponent {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CompactFieldsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CompactFieldsComponent, "color-compact-fields", never, { "hex": "hex"; "rgb": "rgb"; }, { "onChange": "onChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CompactFieldsComponent, "color-compact-fields", never, { "hex": { "alias": "hex"; "required": false; }; "rgb": { "alias": "rgb"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }

package/compact/compact.component.d.ts

@@ -21,7 +21,7 @@ export declare class CompactComponent extends ColorWrap {
         $event: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CompactComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CompactComponent, "color-compact", never, { "colors": "colors"; "zDepth": "zDepth"; "radius": "radius"; "background": "background"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CompactComponent, "color-compact", never, { "colors": { "alias": "colors"; "required": false; }; "zDepth": { "alias": "zDepth"; "required": false; }; "radius": { "alias": "radius"; "required": false; }; "background": { "alias": "background"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class ColorCompactModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ColorCompactModule, never>;

package/coordinates.directive.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class CoordinatesDirective implements OnInit, OnDestroy {
@@ -18,12 +18,11 @@ export declare class CoordinatesDirective implements OnInit, OnDestroy {
     mousemove($event: Event, x: number, y: number, isTouch?: boolean): void;
     mouseup(): void;
     mousedown($event: Event, x: number, y: number, isTouch?: boolean): void;
-    constructor(el: ElementRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     handleChange(x: number, y: number, $event: Event, isTouch: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoordinatesDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CoordinatesDirective, "[ngx-color-coordinates]", never, {}, { "coordinatesChange": "coordinatesChange"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CoordinatesDirective, "[ngx-color-coordinates]", never, {}, { "coordinatesChange": "coordinatesChange"; }, never, never, false, never>;
 }
 export declare class CoordinatesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CoordinatesModule, never>;

package/editable-input.component.d.ts

@@ -36,7 +36,7 @@ export declare class EditableInputComponent implements OnInit, OnChanges, OnDest
     handleMousedown($event: Event): void;
     handleDrag($event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditableInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditableInputComponent, "color-editable-input", never, { "style": "style"; "label": "label"; "value": "value"; "arrowOffset": "arrowOffset"; "dragLabel": "dragLabel"; "dragMax": "dragMax"; "placeholder": "placeholder"; }, { "onChange": "onChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditableInputComponent, "color-editable-input", never, { "style": { "alias": "style"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "arrowOffset": { "alias": "arrowOffset"; "required": false; }; "dragLabel": { "alias": "dragLabel"; "required": false; }; "dragMax": { "alias": "dragMax"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }
 export declare class EditableInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EditableInputModule, never>;

package/{fesm2020 → fesm2022}/ngx-color-alpha.mjs

@@ -6,20 +6,20 @@ import { ColorWrap, toState, AlphaModule, CheckboardModule } from 'ngx-color';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class AlphaPickerComponent extends ColorWrap {
+    /** Pixel value for picker width */
+    width = 316;
+    /** Pixel value for picker height */
+    height = 16;
+    direction = 'horizontal';
+    pointer = {
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        transform: 'translate(-9px, -2px)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+    };
     constructor() {
         super();
-        /** Pixel value for picker width */
-        this.width = 316;
-        /** Pixel value for picker height */
-        this.height = 16;
-        this.direction = 'horizontal';
-        this.pointer = {
-            width: '18px',
-            height: '18px',
-            borderRadius: '50%',
-            transform: 'translate(-9px, -2px)',
-            boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
-        };
     }
     ngOnChanges() {
         if (this.direction === 'vertical') {
@@ -30,21 +30,19 @@ class AlphaPickerComponent extends ColorWrap {
     handlePickerChange({ data, $event }) {
         this.handleChange(data, $event);
     }
-}
-AlphaPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: AlphaPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlphaPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: AlphaPickerComponent, selector: "color-alpha-picker", inputs: { width: "width", height: "height", direction: "direction" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => AlphaPickerComponent),
-            multi: true,
-        },
-        {
-            provide: ColorWrap,
-            useExisting: forwardRef(() => AlphaPickerComponent)
-        }
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <div class="alpha-picker {{ className }}"
-      [style.width.px]="width" [style.height.px]="height">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: AlphaPickerComponent, isStandalone: false, selector: "color-alpha-picker", inputs: { width: "width", height: "height", direction: "direction" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AlphaPickerComponent),
+                multi: true,
+            },
+            {
+                provide: ColorWrap,
+                useExisting: forwardRef(() => AlphaPickerComponent),
+            },
+        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <div class="alpha-picker {{ className }}" [style.width.px]="width" [style.height.px]="height">
       <color-alpha
         [hsl]="hsl"
         [rgb]="rgb"
@@ -54,11 +52,11 @@ AlphaPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
       ></color-alpha>
     </div>
   `, isInline: true, styles: [".alpha-picker{position:relative}.color-alpha{radius:2px}\n"], dependencies: [{ kind: "component", type: i1.AlphaComponent, selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: AlphaPickerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: AlphaPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-alpha-picker', template: `
-    <div class="alpha-picker {{ className }}"
-      [style.width.px]="width" [style.height.px]="height">
+    <div class="alpha-picker {{ className }}" [style.width.px]="width" [style.height.px]="height">
       <color-alpha
         [hsl]="hsl"
         [rgb]="rgb"
@@ -75,10 +73,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                         },
                         {
                             provide: ColorWrap,
-                            useExisting: forwardRef(() => AlphaPickerComponent)
-                        }
-                    ], styles: [".alpha-picker{position:relative}.color-alpha{radius:2px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { width: [{
+                            useExisting: forwardRef(() => AlphaPickerComponent),
+                        },
+                    ], standalone: false, styles: [".alpha-picker{position:relative}.color-alpha{radius:2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { width: [{
                 type: Input
             }], height: [{
                 type: Input
@@ -86,11 +84,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 type: Input
             }] } });
 class ColorAlphaModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorAlphaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: ColorAlphaModule, declarations: [AlphaPickerComponent], imports: [CommonModule, AlphaModule, CheckboardModule], exports: [AlphaPickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorAlphaModule, imports: [CommonModule, AlphaModule, CheckboardModule] });
 }
-ColorAlphaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorAlphaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorAlphaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorAlphaModule, declarations: [AlphaPickerComponent], imports: [CommonModule, AlphaModule, CheckboardModule], exports: [AlphaPickerComponent] });
-ColorAlphaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorAlphaModule, imports: [CommonModule, AlphaModule, CheckboardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorAlphaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ColorAlphaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AlphaPickerComponent],

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-alpha.mjs","sources":["../../src/lib/alpha/alpha-picker.component.ts","../../src/lib/alpha/ngx-color-alpha.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  forwardRef,\n  Input,\n  NgModule,\n  OnChanges,\n} from '@angular/core';\n\nimport { AlphaModule, CheckboardModule, ColorWrap, toState } from 'ngx-color';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-alpha-picker',\n  template: `\n    <div class=\"alpha-picker {{ className }}\" [style.width.px]=\"width\" [style.height.px]=\"height\">\n      <color-alpha\n        [hsl]=\"hsl\"\n        [rgb]=\"rgb\"\n        [pointer]=\"pointer\"\n        [direction]=\"direction\"\n        (onChange)=\"handlePickerChange($event)\"\n      ></color-alpha>\n    </div>\n  `,\n  styles: [\n    `\n      .alpha-picker {\n        position: relative;\n      }\n      .color-alpha {\n        radius: 2px;\n      }\n    `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => AlphaPickerComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => AlphaPickerComponent),\n    },\n  ],\n  standalone: false,\n})\nexport class AlphaPickerComponent extends ColorWrap implements OnChanges {\n  /** Pixel value for picker width */\n  @Input() width: string | number = 316;\n  /** Pixel value for picker height */\n  @Input() height: string | number = 16;\n  @Input() direction: 'horizontal' | 'vertical' = 'horizontal';\n  pointer: { [key: string]: string } = {\n    width: '18px',\n    height: '18px',\n    borderRadius: '50%',\n    transform: 'translate(-9px, -2px)',\n    boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n  };\n\n  constructor() {\n    super();\n  }\n  ngOnChanges() {\n    if (this.direction === 'vertical') {\n      this.pointer.transform = 'translate(-3px, -9px)';\n    }\n    this.setState(toState(this.color, this.oldHue));\n  }\n  handlePickerChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [AlphaPickerComponent],\n  exports: [AlphaPickerComponent],\n  imports: [CommonModule, AlphaModule, CheckboardModule],\n})\nexport class ColorAlphaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-color-block.mjs

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

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

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