ngx-color 7.3.3 → 8.0.2

package/fesm2015/ngx-color-sketch.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
-import * as i1 from 'ngx-color';
+import * as i2 from 'ngx-color';
 import { isValidHex, ColorWrap, AlphaModule, CheckboardModule, EditableInputModule, HueModule, SaturationModule, SwatchModule } from 'ngx-color';
 import { TinyColor } from '@ctrl/tinycolor';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -91,8 +91,8 @@ class SketchFieldsComponent {
         }
     }
 }
-SketchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SketchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SketchFieldsComponent, selector: "color-sketch-fields", inputs: { hsl: "hsl", rgb: "rgb", hex: "hex", disableAlpha: "disableAlpha" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+SketchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SketchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SketchFieldsComponent, selector: "color-sketch-fields", inputs: { hsl: "hsl", rgb: "rgb", hex: "hex", disableAlpha: "disableAlpha" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
   <div class="sketch-fields">
     <div class="sketch-double">
       <color-editable-input
@@ -143,12 +143,10 @@ SketchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       ></color-editable-input>
     </div>
   </div>
-  `, isInline: true, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single{flex:1 1 0%;padding-left:6px}.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"], components: [{ type: i1.EditableInputComponent, selector: "color-editable-input", inputs: ["style", "label", "value", "arrowOffset", "dragLabel", "dragMax", "placeholder"], outputs: ["onChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchFieldsComponent, decorators: [{
+  `, isInline: true, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single,.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: "14.1.2", ngImport: i0, type: SketchFieldsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'color-sketch-fields',
-                    template: `
+            args: [{ selector: 'color-sketch-fields', template: `
   <div class="sketch-fields">
     <div class="sketch-double">
       <color-editable-input
@@ -199,39 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
       ></color-editable-input>
     </div>
   </div>
-  `,
-                    styles: [
-                        `
-    .sketch-fields {
-      display: flex;
-      padding-top: 4px;
-    }
-    .sketch-double {
-      -webkit-box-flex: 2;
-      flex: 2 1 0%;
-    }
-    .sketch-single {
-      flex: 1 1 0%;
-      padding-left: 6px;
-    }
-    .sketch-alpha {
-      -webkit-box-flex: 1;
-      flex: 1 1 0%;
-      padding-left: 6px;
-    }
-    :host-context([dir=rtl]) .sketch-single {
-      padding-right: 6px;
-      padding-left: 0;
-    }
-    :host-context([dir=rtl]) .sketch-alpha {
-      padding-right: 6px;
-      padding-left: 0;
-    }
-  `,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".sketch-fields{display:flex;padding-top:4px}.sketch-double{flex:2 1 0%}.sketch-single,.sketch-alpha{flex:1 1 0%;padding-left:6px}:host-context([dir=rtl]) .sketch-single{padding-right:6px;padding-left:0}:host-context([dir=rtl]) .sketch-alpha{padding-right:6px;padding-left:0}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], rgb: [{
@@ -269,8 +235,8 @@ class SketchPresetColorsComponent {
         };
     }
 }
-SketchPresetColorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchPresetColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SketchPresetColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SketchPresetColorsComponent, selector: "color-sketch-preset-colors", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+SketchPresetColorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchPresetColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SketchPresetColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SketchPresetColorsComponent, selector: "color-sketch-preset-colors", inputs: { colors: "colors" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
   <div class="sketch-swatches">
     <div class="sketch-wrap" *ngFor="let c of colors">
       <color-swatch
@@ -283,12 +249,10 @@ SketchPresetColorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
       ></color-swatch>
     </div>
   </div>
-  `, isInline: true, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"], components: [{ type: i1.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchPresetColorsComponent, decorators: [{
+  `, isInline: true, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SwatchComponent, selector: "color-swatch", inputs: ["color", "style", "focusStyle", "focus"], outputs: ["onClick", "onHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchPresetColorsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'color-sketch-preset-colors',
-                    template: `
+            args: [{ selector: 'color-sketch-preset-colors', template: `
   <div class="sketch-swatches">
     <div class="sketch-wrap" *ngFor="let c of colors">
       <color-swatch
@@ -301,35 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
       ></color-swatch>
     </div>
   </div>
-  `,
-                    styles: [
-                        `
-    .sketch-swatches {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-      margin: 0px -10px;
-      padding: 10px 0px 0px 10px;
-      border-top: 1px solid rgb(238, 238, 238);
-    }
-    .sketch-wrap {
-      width: 16px;
-      height: 16px;
-      margin: 0px 10px 10px 0px;
-    }
-    :host-context([dir=rtl]) .sketch-swatches {
-      padding-right: 10px;
-      padding-left: 0;
-    }
-    :host-context([dir=rtl]) .sketch-wrap {
-      margin-left: 10px;
-      margin-right: 0;
-    }
-  `,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".sketch-swatches{position:relative;display:flex;flex-wrap:wrap;margin:0 -10px;padding:10px 0 0 10px;border-top:1px solid rgb(238,238,238)}.sketch-wrap{width:16px;height:16px;margin:0 10px 10px 0}:host-context([dir=rtl]) .sketch-swatches{padding-right:10px;padding-left:0}:host-context([dir=rtl]) .sketch-wrap{margin-left:10px;margin-right:0}\n"] }]
         }], propDecorators: { colors: [{
                 type: Input
             }], onClick: [{
@@ -381,8 +317,8 @@ class SketchComponent extends ColorWrap {
         }
     }
 }
-SketchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SketchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SketchComponent, selector: "color-sketch", inputs: { disableAlpha: "disableAlpha", presetColors: "presetColors", width: "width" }, providers: [
+SketchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SketchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SketchComponent, selector: "color-sketch", inputs: { disableAlpha: "disableAlpha", presetColors: "presetColors", width: "width" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SketchComponent),
@@ -434,12 +370,10 @@ SketchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
       ></color-sketch-preset-colors>
     </div>
   </div>
-  `, isInline: true, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container{display:block}.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"], components: [{ type: i0.forwardRef(function () { return i1.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return i1.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { type: i0.forwardRef(function () { return SketchFieldsComponent; }), selector: "color-sketch-fields", inputs: ["hsl", "rgb", "hex", "disableAlpha"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return SketchPresetColorsComponent; }), selector: "color-sketch-preset-colors", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], directives: [{ type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SketchComponent, decorators: [{
+  `, isInline: true, styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i2.AlphaComponent; }), selector: "color-alpha", inputs: ["hsl", "rgb", "pointer", "shadow", "radius", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.CheckboardComponent; }), selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }, { kind: "component", type: i0.forwardRef(function () { return i2.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return i2.SaturationComponent; }), selector: "color-saturation", inputs: ["hsl", "hsv", "radius", "pointer", "circle"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return SketchFieldsComponent; }), selector: "color-sketch-fields", inputs: ["hsl", "rgb", "hex", "disableAlpha"], outputs: ["onChange"] }, { kind: "component", type: i0.forwardRef(function () { return SketchPresetColorsComponent; }), selector: "color-sketch-preset-colors", inputs: ["colors"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SketchComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'color-sketch',
-                    template: `
+            args: [{ selector: 'color-sketch', template: `
   <div class="sketch-picker {{ className }}" [style.width]="width">
     <div class="sketch-saturation">
       <color-saturation [hsl]="hsl" [hsv]="hsv"
@@ -481,73 +415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
       ></color-sketch-preset-colors>
     </div>
   </div>
-  `,
-                    styles: [
-                        `
-    .sketch-picker {
-      padding: 10px 10px 3px;
-      box-sizing: initial;
-      background: #fff;
-      border-radius: 4px;
-      box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);
-    }
-    .sketch-saturation {
-      width: 100%;
-      padding-bottom: 75%;
-      position: relative;
-      overflow: hidden;
-    }
-    .sketch-fields-container {
-      display: block;
-    }
-    .sketch-swatches-container {
-      display: block;
-    }
-    .sketch-controls {
-      display: flex;
-    }
-    .sketch-sliders {
-      padding: 4px 0px;
-      -webkit-box-flex: 1;
-      flex: 1 1 0%;
-    }
-    .sketch-hue {
-      position: relative;
-      height: 10px;
-      overflow: hidden;
-    }
-    .sketch-alpha {
-      position: relative;
-      height: 10px;
-      margin-top: 4px;
-      overflow: hidden;
-    }
-    .sketch-color {
-      width: 24px;
-      height: 24px;
-      position: relative;
-      margin-top: 4px;
-      margin-left: 4px;
-      border-radius: 3px;
-    }
-    .sketch-active {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;
-    }
-    :host-context([dir=rtl]) .sketch-color {
-      margin-right: 4px;
-      margin-left: 0;
-    }
-  `,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                    providers: [
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SketchComponent),
@@ -557,8 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                             provide: ColorWrap,
                             useExisting: forwardRef(() => SketchComponent),
                         },
-                    ]
-                }]
+                    ], styles: [".sketch-picker{padding:10px 10px 3px;box-sizing:initial;background:#fff;border-radius:4px;box-shadow:0 0 0 1px #00000026,0 8px 16px #00000026}.sketch-saturation{width:100%;padding-bottom:75%;position:relative;overflow:hidden}.sketch-fields-container,.sketch-swatches-container{display:block}.sketch-controls{display:flex}.sketch-sliders{padding:4px 0;flex:1 1 0%}.sketch-hue{position:relative;height:10px;overflow:hidden}.sketch-alpha{position:relative;height:10px;margin-top:4px;overflow:hidden}.sketch-color{width:24px;height:24px;position:relative;margin-top:4px;margin-left:4px;border-radius:3px}.sketch-active{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px;box-shadow:#00000026 0 0 0 1px inset,#00000040 0 0 4px inset}:host-context([dir=rtl]) .sketch-color{margin-right:4px;margin-left:0}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { disableAlpha: [{
                 type: Input
             }], presetColors: [{
@@ -568,8 +435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
             }] } });
 class ColorSketchModule {
 }
-ColorSketchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorSketchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, declarations: [SketchComponent, SketchFieldsComponent,
+ColorSketchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorSketchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, declarations: [SketchComponent, SketchFieldsComponent,
         SketchPresetColorsComponent], imports: [CommonModule,
         AlphaModule,
         CheckboardModule,
@@ -578,16 +445,14 @@ ColorSketchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         SaturationModule,
         SwatchModule], exports: [SketchComponent, SketchFieldsComponent,
         SketchPresetColorsComponent] });
-ColorSketchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, imports: [[
-            CommonModule,
-            AlphaModule,
-            CheckboardModule,
-            EditableInputModule,
-            HueModule,
-            SaturationModule,
-            SwatchModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSketchModule, decorators: [{
+ColorSketchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, imports: [CommonModule,
+        AlphaModule,
+        CheckboardModule,
+        EditableInputModule,
+        HueModule,
+        SaturationModule,
+        SwatchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSketchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/fesm2015/ngx-color-sketch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-color-sketch.mjs","sources":["../../src/lib/sketch/sketch-fields.component.ts","../../src/lib/sketch/sketch-preset-colors.component.ts","../../src/lib/sketch/sketch.component.ts","../../src/lib/sketch/ngx-color-sketch.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n  selector: 'color-sketch-fields',\n  template: `\n  <div class=\"sketch-fields\">\n    <div class=\"sketch-double\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"hex\"\n        [value]=\"hex.replace('#', '')\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"r\"\n        [value]=\"rgb.r\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"g\"\n        [value]=\"rgb.g\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"b\"\n        [value]=\"rgb.b\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"a\"\n        [value]=\"round(rgb.a * 100)\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"100\"\n      ></color-editable-input>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-fields {\n      display: flex;\n      padding-top: 4px;\n    }\n    .sketch-double {\n      -webkit-box-flex: 2;\n      flex: 2 1 0%;\n    }\n    .sketch-single {\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    .sketch-alpha {\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    :host-context([dir=rtl]) .sketch-single {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-alpha {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchFieldsComponent {\n  @Input() hsl!: HSLA;\n  @Input() rgb!: RGBA;\n  @Input() hex!: string;\n  @Input() disableAlpha = false;\n  @Output() onChange = new EventEmitter<any>();\n  input: {[key: string]: string} = {\n    width: '100%',\n    padding: '4px 10% 3px',\n    border: 'none',\n    boxSizing: 'border-box',\n    boxShadow: 'inset 0 0 0 1px #ccc',\n    fontSize: '11px',\n  };\n  label: {[key: string]: string} = {\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '11px',\n    color: '#222',\n    paddingTop: '3px',\n    paddingBottom: '4px',\n    textTransform: 'capitalize',\n  };\n\n  round(value) {\n    return Math.round(value);\n  }\n  handleChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        const color = new TinyColor(data.hex);\n        this.onChange.emit({\n          data: {\n            hex: this.disableAlpha || data.hex.length <= 6 ? color.toHex() : color.toHex8(),\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else if (data.r || data.g || data.b) {\n      this.onChange.emit({\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    } else if (data.a) {\n      if (data.a < 0) {\n        data.a = 0;\n      } else if (data.a > 100) {\n        data.a = 100;\n      }\n      data.a /= 100;\n\n      if (this.disableAlpha) {\n        data.a = 1;\n      }\n\n      this.onChange.emit({\n        data: {\n          h: this.hsl.h,\n          s: this.hsl.s,\n          l: this.hsl.l,\n          a: Math.round(data.a * 100) / 100,\n          source: 'rgb',\n        },\n        $event,\n      });\n    } else if (data.h || data.s || data.l) {\n      this.onChange.emit({\n        data: {\n          h: data.h || this.hsl.h,\n          s: Number((data.s && data.s) || this.hsl.s),\n          l: Number((data.l && data.l) || this.hsl.l),\n          source: 'hsl',\n        },\n        $event,\n      });\n    }\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { Shape } from 'ngx-color';\n\n@Component({\n  selector: 'color-sketch-preset-colors',\n  template: `\n  <div class=\"sketch-swatches\">\n    <div class=\"sketch-wrap\" *ngFor=\"let c of colors\">\n      <color-swatch\n        [color]=\"normalizeValue(c).color\"\n        [style]=\"swatchStyle\"\n        [focusStyle]=\"focusStyle(c)\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n        class=\"swatch\"\n      ></color-swatch>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-swatches {\n      position: relative;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0px -10px;\n      padding: 10px 0px 0px 10px;\n      border-top: 1px solid rgb(238, 238, 238);\n    }\n    .sketch-wrap {\n      width: 16px;\n      height: 16px;\n      margin: 0px 10px 10px 0px;\n    }\n    :host-context([dir=rtl]) .sketch-swatches {\n      padding-right: 10px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-wrap {\n      margin-left: 10px;\n      margin-right: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchPresetColorsComponent {\n  @Input() colors!: string[];\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  swatchStyle = {\n    borderRadius: '3px',\n    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',\n  };\n\n  handleClick({ hex, $event }) {\n    this.onClick.emit({ hex, $event });\n  }\n  normalizeValue(val: string | Shape) {\n    if (typeof val === 'string') {\n      return { color: val };\n    }\n    return val;\n  }\n  focusStyle(val: string | Shape) {\n    const c = this.normalizeValue(val);\n    return {\n      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n    };\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n  AlphaModule,\n  CheckboardModule,\n  ColorWrap,\n  EditableInputModule,\n  HueModule,\n  isValidHex,\n  SaturationModule,\n  SwatchModule,\n} from 'ngx-color';\nimport { SketchFieldsComponent } from './sketch-fields.component';\nimport { SketchPresetColorsComponent } from './sketch-preset-colors.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-sketch',\n  template: `\n  <div class=\"sketch-picker {{ className }}\" [style.width]=\"width\">\n    <div class=\"sketch-saturation\">\n      <color-saturation [hsl]=\"hsl\" [hsv]=\"hsv\"\n        (onChange)=\"handleValueChange($event)\"\n      >\n      </color-saturation>\n    </div>\n    <div class=\"sketch-controls\">\n      <div class=\"sketch-sliders\">\n        <div class=\"sketch-hue\">\n          <color-hue [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-hue>\n        </div>\n        <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n          <color-alpha\n            [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-alpha>\n        </div>\n      </div>\n      <div class=\"sketch-color\">\n        <color-checkboard></color-checkboard>\n        <div class=\"sketch-active\" [style.background]=\"activeBackground\"></div>\n      </div>\n    </div>\n    <div class=\"sketch-fields-container\">\n      <color-sketch-fields\n        [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n        [disableAlpha]=\"disableAlpha\"\n        (onChange)=\"handleValueChange($event)\"\n      ></color-sketch-fields>\n    </div>\n    <div class=\"sketch-swatches-container\" *ngIf=\"presetColors && presetColors.length\">\n      <color-sketch-preset-colors\n        [colors]=\"presetColors\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onSwatchHover)=\"onSwatchHover.emit($event)\"\n      ></color-sketch-preset-colors>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-picker {\n      padding: 10px 10px 3px;\n      box-sizing: initial;\n      background: #fff;\n      border-radius: 4px;\n      box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n    }\n    .sketch-saturation {\n      width: 100%;\n      padding-bottom: 75%;\n      position: relative;\n      overflow: hidden;\n    }\n    .sketch-fields-container {\n      display: block;\n    }\n    .sketch-swatches-container {\n      display: block;\n    }\n    .sketch-controls {\n      display: flex;\n    }\n    .sketch-sliders {\n      padding: 4px 0px;\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n    }\n    .sketch-hue {\n      position: relative;\n      height: 10px;\n      overflow: hidden;\n    }\n    .sketch-alpha {\n      position: relative;\n      height: 10px;\n      margin-top: 4px;\n      overflow: hidden;\n    }\n    .sketch-color {\n      width: 24px;\n      height: 24px;\n      position: relative;\n      margin-top: 4px;\n      margin-left: 4px;\n      border-radius: 3px;\n    }\n    .sketch-active {\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      bottom: 0px;\n      left: 0px;\n      border-radius: 2px;\n      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;\n    }\n    :host-context([dir=rtl]) .sketch-color {\n      margin-right: 4px;\n      margin-left: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SketchComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => SketchComponent),\n    },\n  ]\n})\nexport class SketchComponent extends ColorWrap {\n  /** Remove alpha slider and options from picker */\n  @Input() disableAlpha = false;\n  /** Hex strings for default colors at bottom of picker */\n  @Input() presetColors = [\n    '#D0021B',\n    '#F5A623',\n    '#F8E71C',\n    '#8B572A',\n    '#7ED321',\n    '#417505',\n    '#BD10E0',\n    '#9013FE',\n    '#4A90E2',\n    '#50E3C2',\n    '#B8E986',\n    '#000000',\n    '#4A4A4A',\n    '#9B9B9B',\n    '#FFFFFF',\n  ];\n  /** Width of picker */\n  @Input() width = 200;\n  activeBackground!: string;\n  constructor() {\n    super();\n  }\n  afterValidChange() {\n    const alpha = this.disableAlpha ? 1 : this.rgb.a;\n    this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\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: [\n    SketchComponent,\n    SketchFieldsComponent,\n    SketchPresetColorsComponent,\n  ],\n  exports: [\n    SketchComponent,\n    SketchFieldsComponent,\n    SketchPresetColorsComponent,\n  ],\n  imports: [\n    CommonModule,\n    AlphaModule,\n    CheckboardModule,\n    EditableInputModule,\n    HueModule,\n    SaturationModule,\n    SwatchModule,\n  ],\n})\nexport class ColorSketchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-color-sketch.mjs","sources":["../../src/lib/sketch/sketch-fields.component.ts","../../src/lib/sketch/sketch-preset-colors.component.ts","../../src/lib/sketch/sketch.component.ts","../../src/lib/sketch/ngx-color-sketch.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { isValidHex, HSLA, RGBA } from 'ngx-color';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n@Component({\n  selector: 'color-sketch-fields',\n  template: `\n  <div class=\"sketch-fields\">\n    <div class=\"sketch-double\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"hex\"\n        [value]=\"hex.replace('#', '')\"\n        (onChange)=\"handleChange($event)\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"r\"\n        [value]=\"rgb.r\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"g\"\n        [value]=\"rgb.g\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-single\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"b\"\n        [value]=\"rgb.b\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"255\"\n      ></color-editable-input>\n    </div>\n    <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n      <color-editable-input\n        [style]=\"{ input: input, label: label }\"\n        label=\"a\"\n        [value]=\"round(rgb.a * 100)\"\n        (onChange)=\"handleChange($event)\"\n        [dragLabel]=\"true\"\n        [dragMax]=\"100\"\n      ></color-editable-input>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-fields {\n      display: flex;\n      padding-top: 4px;\n    }\n    .sketch-double {\n      -webkit-box-flex: 2;\n      flex: 2 1 0%;\n    }\n    .sketch-single {\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    .sketch-alpha {\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n      padding-left: 6px;\n    }\n    :host-context([dir=rtl]) .sketch-single {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-alpha {\n      padding-right: 6px;\n      padding-left: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchFieldsComponent {\n  @Input() hsl!: HSLA;\n  @Input() rgb!: RGBA;\n  @Input() hex!: string;\n  @Input() disableAlpha = false;\n  @Output() onChange = new EventEmitter<any>();\n  input: {[key: string]: string} = {\n    width: '100%',\n    padding: '4px 10% 3px',\n    border: 'none',\n    boxSizing: 'border-box',\n    boxShadow: 'inset 0 0 0 1px #ccc',\n    fontSize: '11px',\n  };\n  label: {[key: string]: string} = {\n    display: 'block',\n    textAlign: 'center',\n    fontSize: '11px',\n    color: '#222',\n    paddingTop: '3px',\n    paddingBottom: '4px',\n    textTransform: 'capitalize',\n  };\n\n  round(value) {\n    return Math.round(value);\n  }\n  handleChange({ data, $event }) {\n    if (data.hex) {\n      if (isValidHex(data.hex)) {\n        const color = new TinyColor(data.hex);\n        this.onChange.emit({\n          data: {\n            hex: this.disableAlpha || data.hex.length <= 6 ? color.toHex() : color.toHex8(),\n            source: 'hex',\n          },\n          $event,\n        });\n      }\n    } else if (data.r || data.g || data.b) {\n      this.onChange.emit({\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    } else if (data.a) {\n      if (data.a < 0) {\n        data.a = 0;\n      } else if (data.a > 100) {\n        data.a = 100;\n      }\n      data.a /= 100;\n\n      if (this.disableAlpha) {\n        data.a = 1;\n      }\n\n      this.onChange.emit({\n        data: {\n          h: this.hsl.h,\n          s: this.hsl.s,\n          l: this.hsl.l,\n          a: Math.round(data.a * 100) / 100,\n          source: 'rgb',\n        },\n        $event,\n      });\n    } else if (data.h || data.s || data.l) {\n      this.onChange.emit({\n        data: {\n          h: data.h || this.hsl.h,\n          s: Number((data.s && data.s) || this.hsl.s),\n          l: Number((data.l && data.l) || this.hsl.l),\n          source: 'hsl',\n        },\n        $event,\n      });\n    }\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { Shape } from 'ngx-color';\n\n@Component({\n  selector: 'color-sketch-preset-colors',\n  template: `\n  <div class=\"sketch-swatches\">\n    <div class=\"sketch-wrap\" *ngFor=\"let c of colors\">\n      <color-swatch\n        [color]=\"normalizeValue(c).color\"\n        [style]=\"swatchStyle\"\n        [focusStyle]=\"focusStyle(c)\"\n        (onClick)=\"handleClick($event)\"\n        (onHover)=\"onSwatchHover.emit($event)\"\n        class=\"swatch\"\n      ></color-swatch>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-swatches {\n      position: relative;\n      display: flex;\n      flex-wrap: wrap;\n      margin: 0px -10px;\n      padding: 10px 0px 0px 10px;\n      border-top: 1px solid rgb(238, 238, 238);\n    }\n    .sketch-wrap {\n      width: 16px;\n      height: 16px;\n      margin: 0px 10px 10px 0px;\n    }\n    :host-context([dir=rtl]) .sketch-swatches {\n      padding-right: 10px;\n      padding-left: 0;\n    }\n    :host-context([dir=rtl]) .sketch-wrap {\n      margin-left: 10px;\n      margin-right: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SketchPresetColorsComponent {\n  @Input() colors!: string[];\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n  swatchStyle = {\n    borderRadius: '3px',\n    boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)',\n  };\n\n  handleClick({ hex, $event }) {\n    this.onClick.emit({ hex, $event });\n  }\n  normalizeValue(val: string | Shape) {\n    if (typeof val === 'string') {\n      return { color: val };\n    }\n    return val;\n  }\n  focusStyle(val: string | Shape) {\n    const c = this.normalizeValue(val);\n    return {\n      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${c.color}`,\n    };\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport {\n  AlphaModule,\n  CheckboardModule,\n  ColorWrap,\n  EditableInputModule,\n  HueModule,\n  isValidHex,\n  SaturationModule,\n  SwatchModule,\n} from 'ngx-color';\nimport { SketchFieldsComponent } from './sketch-fields.component';\nimport { SketchPresetColorsComponent } from './sketch-preset-colors.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-sketch',\n  template: `\n  <div class=\"sketch-picker {{ className }}\" [style.width]=\"width\">\n    <div class=\"sketch-saturation\">\n      <color-saturation [hsl]=\"hsl\" [hsv]=\"hsv\"\n        (onChange)=\"handleValueChange($event)\"\n      >\n      </color-saturation>\n    </div>\n    <div class=\"sketch-controls\">\n      <div class=\"sketch-sliders\">\n        <div class=\"sketch-hue\">\n          <color-hue [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-hue>\n        </div>\n        <div class=\"sketch-alpha\" *ngIf=\"disableAlpha === false\">\n          <color-alpha\n            [radius]=\"2\" [rgb]=\"rgb\" [hsl]=\"hsl\"\n            (onChange)=\"handleValueChange($event)\"\n          ></color-alpha>\n        </div>\n      </div>\n      <div class=\"sketch-color\">\n        <color-checkboard></color-checkboard>\n        <div class=\"sketch-active\" [style.background]=\"activeBackground\"></div>\n      </div>\n    </div>\n    <div class=\"sketch-fields-container\">\n      <color-sketch-fields\n        [rgb]=\"rgb\" [hsl]=\"hsl\" [hex]=\"hex\"\n        [disableAlpha]=\"disableAlpha\"\n        (onChange)=\"handleValueChange($event)\"\n      ></color-sketch-fields>\n    </div>\n    <div class=\"sketch-swatches-container\" *ngIf=\"presetColors && presetColors.length\">\n      <color-sketch-preset-colors\n        [colors]=\"presetColors\"\n        (onClick)=\"handleBlockChange($event)\"\n        (onSwatchHover)=\"onSwatchHover.emit($event)\"\n      ></color-sketch-preset-colors>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .sketch-picker {\n      padding: 10px 10px 3px;\n      box-sizing: initial;\n      background: #fff;\n      border-radius: 4px;\n      box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);\n    }\n    .sketch-saturation {\n      width: 100%;\n      padding-bottom: 75%;\n      position: relative;\n      overflow: hidden;\n    }\n    .sketch-fields-container {\n      display: block;\n    }\n    .sketch-swatches-container {\n      display: block;\n    }\n    .sketch-controls {\n      display: flex;\n    }\n    .sketch-sliders {\n      padding: 4px 0px;\n      -webkit-box-flex: 1;\n      flex: 1 1 0%;\n    }\n    .sketch-hue {\n      position: relative;\n      height: 10px;\n      overflow: hidden;\n    }\n    .sketch-alpha {\n      position: relative;\n      height: 10px;\n      margin-top: 4px;\n      overflow: hidden;\n    }\n    .sketch-color {\n      width: 24px;\n      height: 24px;\n      position: relative;\n      margin-top: 4px;\n      margin-left: 4px;\n      border-radius: 3px;\n    }\n    .sketch-active {\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      bottom: 0px;\n      left: 0px;\n      border-radius: 2px;\n      box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 0px 4px inset;\n    }\n    :host-context([dir=rtl]) .sketch-color {\n      margin-right: 4px;\n      margin-left: 0;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SketchComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => SketchComponent),\n    },\n  ]\n})\nexport class SketchComponent extends ColorWrap {\n  /** Remove alpha slider and options from picker */\n  @Input() disableAlpha = false;\n  /** Hex strings for default colors at bottom of picker */\n  @Input() presetColors = [\n    '#D0021B',\n    '#F5A623',\n    '#F8E71C',\n    '#8B572A',\n    '#7ED321',\n    '#417505',\n    '#BD10E0',\n    '#9013FE',\n    '#4A90E2',\n    '#50E3C2',\n    '#B8E986',\n    '#000000',\n    '#4A4A4A',\n    '#9B9B9B',\n    '#FFFFFF',\n  ];\n  /** Width of picker */\n  @Input() width = 200;\n  activeBackground!: string;\n  constructor() {\n    super();\n  }\n  afterValidChange() {\n    const alpha = this.disableAlpha ? 1 : this.rgb.a;\n    this.activeBackground = `rgba(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b}, ${alpha})`;\n  }\n  handleValueChange({ data, $event }) {\n    this.handleChange(data, $event);\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: [\n    SketchComponent,\n    SketchFieldsComponent,\n    SketchPresetColorsComponent,\n  ],\n  exports: [\n    SketchComponent,\n    SketchFieldsComponent,\n    SketchPresetColorsComponent,\n  ],\n  imports: [\n    CommonModule,\n    AlphaModule,\n    CheckboardModule,\n    EditableInputModule,\n    HueModule,\n    SaturationModule,\n    SwatchModule,\n  ],\n})\nexport class ColorSketchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/ngx-color-slider.mjs

@@ -26,49 +26,21 @@ class SliderSwatchComponent {
         });
     }
 }
-SliderSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: { hsl: "hsl", active: "active", offset: "offset", first: "first", last: "last" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
+SliderSwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderSwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: { hsl: "hsl", active: "active", offset: "offset", first: "first", last: "last" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
   <div class="slider-swatch" [style.background]="background"
     [class.first]="first" [class.last]="last" [class.active]="active"
     (click)="handleClick($event)"
   ></div>
   `, isInline: true, styles: [".slider-swatch{height:12px;background:rgb(121,211,166);cursor:pointer}.slider-swatch.active{transform:scaleY(1.8);border-radius:3.6px/2px}.slider-swatch.first{border-radius:2px 0 0 2px}.slider-swatch.last{border-radius:0 2px 2px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderSwatchComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'color-slider-swatch',
-                    template: `
+            args: [{ selector: 'color-slider-swatch', template: `
   <div class="slider-swatch" [style.background]="background"
     [class.first]="first" [class.last]="last" [class.active]="active"
     (click)="handleClick($event)"
   ></div>
-  `,
-                    styles: [
-                        `
-    .slider-swatch {
-      height: 12px;
-      background: rgb(121, 211, 166);
-      cursor: pointer;
-    }
-    .slider-swatch.active {
-      transform: scaleY(1.8);
-      border-top-right-radius: 3.6px 2px;
-      border-top-left-radius: 3.6px 2px;
-      border-bottom-right-radius: 3.6px 2px;
-      border-bottom-left-radius: 3.6px 2px;
-    }
-    .slider-swatch.first {
-      border-radius: 2px 0px 0px 2px;
-    }
-    .slider-swatch.last {
-      border-radius: 0px 2px 2px 0px;
-    }
-
-  `,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".slider-swatch{height:12px;background:rgb(121,211,166);cursor:pointer}.slider-swatch.active{transform:scaleY(1.8);border-radius:3.6px/2px}.slider-swatch.first{border-radius:2px 0 0 2px}.slider-swatch.last{border-radius:0 2px 2px 0}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], active: [{
@@ -96,8 +68,8 @@ class SliderSwatchesComponent {
         this.onClick.emit({ data, $event });
     }
 }
-SliderSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderSwatchesComponent, selector: "color-slider-swatches", inputs: { hsl: "hsl" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+SliderSwatchesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SliderSwatchesComponent, selector: "color-slider-swatches", inputs: { hsl: "hsl" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
   <div class="slider-swatches">
     <div class="slider-swatch-wrap">
       <color-slider-swatch
@@ -142,12 +114,10 @@ SliderSwatchesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
       ></color-slider-swatch>
     </div>
   </div>
-  `, isInline: true, styles: [".slider-swatches{margin-top:20px}.slider-swatch-wrap{box-sizing:border-box;width:20%;padding-right:1px;float:left}\n"], components: [{ type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: ["hsl", "active", "offset", "first", "last"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderSwatchesComponent, decorators: [{
+  `, isInline: true, styles: [".slider-swatches{margin-top:20px}.slider-swatch-wrap{box-sizing:border-box;width:20%;padding-right:1px;float:left}\n"], dependencies: [{ kind: "component", type: SliderSwatchComponent, selector: "color-slider-swatch", inputs: ["hsl", "active", "offset", "first", "last"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderSwatchesComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'color-slider-swatches',
-                    template: `
+            args: [{ selector: 'color-slider-swatches', template: `
   <div class="slider-swatches">
     <div class="slider-swatch-wrap">
       <color-slider-swatch
@@ -192,21 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
       ></color-slider-swatch>
     </div>
   </div>
-  `,
-                    styles: [`
-    .slider-swatches {
-      margin-top: 20px;
-    }
-    .slider-swatch-wrap {
-      box-sizing: border-box;
-      width: 20%;
-      padding-right: 1px;
-      float: left;
-    }
-  `],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".slider-swatches{margin-top:20px}.slider-swatch-wrap{box-sizing:border-box;width:20%;padding-right:1px;float:left}\n"] }]
         }], propDecorators: { hsl: [{
                 type: Input
             }], onClick: [{
@@ -232,8 +188,8 @@ class SliderComponent extends ColorWrap {
         this.handleChange(data, $event);
     }
 }
-SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SliderComponent, selector: "color-slider", inputs: { pointer: "pointer", radius: "radius" }, providers: [
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SliderComponent, selector: "color-slider", inputs: { pointer: "pointer", radius: "radius" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SliderComponent),
@@ -257,12 +213,10 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
       ></color-slider-swatches>
     </div>
   </div>
-  `, isInline: true, styles: [".slider-hue{height:12px;position:relative}\n"], components: [{ type: i0.forwardRef(function () { return i1.HueComponent; }), selector: "color-hue", inputs: ["hsl", "pointer", "radius", "shadow", "hidePointer", "direction"], outputs: ["onChange"] }, { type: i0.forwardRef(function () { return SliderSwatchesComponent; }), selector: "color-slider-swatches", inputs: ["hsl"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SliderComponent, decorators: [{
+  `, isInline: true, styles: [".slider-hue{height:12px;position:relative}\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 SliderSwatchesComponent; }), selector: "color-slider-swatches", inputs: ["hsl"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'color-slider',
-                    template: `
+            args: [{ selector: 'color-slider', template: `
   <div class="slider-picker {{ className }}">
     <div class="slider-hue">
       <color-hue
@@ -276,18 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
       ></color-slider-swatches>
     </div>
   </div>
-  `,
-                    styles: [
-                        `
-    .slider-hue {
-      height: 12px;
-      position: relative;
-    }
-  `,
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    preserveWhitespaces: false,
-                    providers: [
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SliderComponent),
@@ -297,8 +240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
                             provide: ColorWrap,
                             useExisting: forwardRef(() => SliderComponent),
                         },
-                    ]
-                }]
+                    ], styles: [".slider-hue{height:12px;position:relative}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { pointer: [{
                 type: Input
             }], radius: [{
@@ -306,11 +248,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
             }] } });
 class ColorSliderModule {
 }
-ColorSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ColorSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, declarations: [SliderComponent, SliderSwatchComponent,
+ColorSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ColorSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: ColorSliderModule, declarations: [SliderComponent, SliderSwatchComponent,
         SliderSwatchesComponent], imports: [CommonModule, HueModule, SwatchModule], exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent] });
-ColorSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, imports: [[CommonModule, HueModule, SwatchModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ColorSliderModule, decorators: [{
+ColorSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSliderModule, imports: [CommonModule, HueModule, SwatchModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: ColorSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [