ngx-color 7.0.1 → 7.3.0

package/slider/fesm2015/ngx-color-slider.mjs

@@ -0,0 +1,331 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from 'ngx-color';
+import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class SliderSwatchComponent {
+    constructor() {
+        this.first = false;
+        this.last = false;
+        this.onClick = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;
+    }
+    handleClick($event) {
+        this.onClick.emit({
+            data: {
+                h: this.hsl.h,
+                s: 0.5,
+                l: this.offset,
+                source: 'hsl',
+            },
+            $event,
+        });
+    }
+}
+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: `
+  <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: [{
+            type: Component,
+            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,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class SliderSwatchesComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+    }
+    active(l, s) {
+        return (Math.round(this.hsl.l * 100) / 100 === l &&
+            Math.round(this.hsl.s * 100) / 100 === s);
+    }
+    handleClick({ data, $event }) {
+        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: `
+  <div class="slider-swatches">
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".80"
+        [active]="active(0.80, 0.50)"
+        (onClick)="handleClick($event)"
+        [first]="true"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".65"
+        [active]="active(0.65, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".50"
+        [active]="active(0.50, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".35"
+        [active]="active(0.35, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".20"
+        [active]="active(0.20, 0.50)"
+        (onClick)="handleClick($event)"
+        [last]="true"
+      ></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: [{
+            type: Component,
+            args: [{
+                    selector: 'color-slider-swatches',
+                    template: `
+  <div class="slider-swatches">
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".80"
+        [active]="active(0.80, 0.50)"
+        (onClick)="handleClick($event)"
+        [first]="true"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".65"
+        [active]="active(0.65, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".50"
+        [active]="active(0.50, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".35"
+        [active]="active(0.35, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".20"
+        [active]="active(0.20, 0.50)"
+        (onClick)="handleClick($event)"
+        [last]="true"
+      ></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,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class SliderComponent extends ColorWrap {
+    constructor() {
+        super();
+        this.pointer = {
+            width: '14px',
+            height: '14px',
+            borderRadius: '6px',
+            transform: 'translate(-7px, -2px)',
+            backgroundColor: 'rgb(248, 248, 248)',
+            boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+        };
+        this.radius = 2;
+    }
+    handlePickerChange({ data, $event }) {
+        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: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SliderComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => SliderComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="slider-picker {{ className }}">
+    <div class="slider-hue">
+      <color-hue
+        [hsl]="hsl" [radius]="radius" [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-hue>
+    </div>
+    <div class="slider-swatches">
+      <color-slider-swatches [hsl]="hsl"
+        (onClick)="handlePickerChange($event)"
+      ></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: [{
+            type: Component,
+            args: [{
+                    selector: 'color-slider',
+                    template: `
+  <div class="slider-picker {{ className }}">
+    <div class="slider-hue">
+      <color-hue
+        [hsl]="hsl" [radius]="radius" [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-hue>
+    </div>
+    <div class="slider-swatches">
+      <color-slider-swatches [hsl]="hsl"
+        (onClick)="handlePickerChange($event)"
+      ></color-slider-swatches>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .slider-hue {
+      height: 12px;
+      position: relative;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => SliderComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pointer: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }] } });
+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,
+        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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SliderComponent,
+                        SliderSwatchComponent,
+                        SliderSwatchesComponent,
+                    ],
+                    exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
+                    imports: [CommonModule, HueModule, SwatchModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorSliderModule, SliderComponent, SliderSwatchComponent, SliderSwatchesComponent };
+//# sourceMappingURL=ngx-color-slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-color-slider.mjs","sources":["../../../../src/lib/components/slider/slider-swatch.component.ts","../../../../src/lib/components/slider/slider-swatches.component.ts","../../../../src/lib/components/slider/slider.component.ts","../../../../src/lib/components/slider/ngx-color-slider.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n  selector: 'color-slider-swatch',\n  template: `\n  <div class=\"slider-swatch\" [style.background]=\"background\"\n    [class.first]=\"first\" [class.last]=\"last\" [class.active]=\"active\"\n    (click)=\"handleClick($event)\"\n  ></div>\n  `,\n  styles: [\n    `\n    .slider-swatch {\n      height: 12px;\n      background: rgb(121, 211, 166);\n      cursor: pointer;\n    }\n    .slider-swatch.active {\n      transform: scaleY(1.8);\n      border-top-right-radius: 3.6px 2px;\n      border-top-left-radius: 3.6px 2px;\n      border-bottom-right-radius: 3.6px 2px;\n      border-bottom-left-radius: 3.6px 2px;\n    }\n    .slider-swatch.first {\n      border-radius: 2px 0px 0px 2px;\n    }\n    .slider-swatch.last {\n      border-radius: 0px 2px 2px 0px;\n    }\n\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SliderSwatchComponent implements OnChanges {\n  @Input() hsl!: HSL;\n  @Input() active!: boolean;\n  @Input() offset!: number;\n  @Input() first = false;\n  @Input() last = false;\n  @Output() onClick = new EventEmitter<any>();\n  background!: string;\n\n  ngOnChanges() {\n    this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;\n  }\n  handleClick($event) {\n    this.onClick.emit({\n      data: {\n        h: this.hsl.h,\n        s: 0.5,\n        l: this.offset,\n        source: 'hsl',\n      },\n      $event,\n    });\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { HSL } from 'ngx-color';\n\n@Component({\n  selector: 'color-slider-swatches',\n  template: `\n  <div class=\"slider-swatches\">\n    <div class=\"slider-swatch-wrap\">\n      <color-slider-swatch\n        [hsl]=\"hsl\"\n        [offset]=\".80\"\n        [active]=\"active(0.80, 0.50)\"\n        (onClick)=\"handleClick($event)\"\n        [first]=\"true\"\n      ></color-slider-swatch>\n    </div>\n    <div class=\"slider-swatch-wrap\">\n      <color-slider-swatch\n        [hsl]=\"hsl\"\n        [offset]=\".65\"\n        [active]=\"active(0.65, 0.50)\"\n        (onClick)=\"handleClick($event)\"\n      ></color-slider-swatch>\n    </div>\n    <div class=\"slider-swatch-wrap\">\n      <color-slider-swatch\n        [hsl]=\"hsl\"\n        [offset]=\".50\"\n        [active]=\"active(0.50, 0.50)\"\n        (onClick)=\"handleClick($event)\"\n      ></color-slider-swatch>\n    </div>\n    <div class=\"slider-swatch-wrap\">\n      <color-slider-swatch\n        [hsl]=\"hsl\"\n        [offset]=\".35\"\n        [active]=\"active(0.35, 0.50)\"\n        (onClick)=\"handleClick($event)\"\n      ></color-slider-swatch>\n    </div>\n    <div class=\"slider-swatch-wrap\">\n      <color-slider-swatch\n        [hsl]=\"hsl\"\n        [offset]=\".20\"\n        [active]=\"active(0.20, 0.50)\"\n        (onClick)=\"handleClick($event)\"\n        [last]=\"true\"\n      ></color-slider-swatch>\n    </div>\n  </div>\n  `,\n  styles: [`\n    .slider-swatches {\n      margin-top: 20px;\n    }\n    .slider-swatch-wrap {\n      box-sizing: border-box;\n      width: 20%;\n      padding-right: 1px;\n      float: left;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n})\nexport class SliderSwatchesComponent {\n  @Input() hsl!: HSL;\n  @Output() onClick = new EventEmitter<any>();\n  @Output() onSwatchHover = new EventEmitter<any>();\n\n  active(l: number, s: number) {\n    return (\n      Math.round(this.hsl.l * 100) / 100 === l &&\n      Math.round(this.hsl.s * 100) / 100 === s\n    );\n  }\n  handleClick({ data, $event }) {\n    this.onClick.emit({ data, $event });\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';\n\nimport { ColorWrap, HueModule, SwatchModule } from 'ngx-color';\nimport { SliderSwatchComponent } from './slider-swatch.component';\nimport { SliderSwatchesComponent } from './slider-swatches.component';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'color-slider',\n  template: `\n  <div class=\"slider-picker {{ className }}\">\n    <div class=\"slider-hue\">\n      <color-hue\n        [hsl]=\"hsl\" [radius]=\"radius\" [pointer]=\"pointer\"\n        (onChange)=\"handlePickerChange($event)\"\n      ></color-hue>\n    </div>\n    <div class=\"slider-swatches\">\n      <color-slider-swatches [hsl]=\"hsl\"\n        (onClick)=\"handlePickerChange($event)\"\n      ></color-slider-swatches>\n    </div>\n  </div>\n  `,\n  styles: [\n    `\n    .slider-hue {\n      height: 12px;\n      position: relative;\n    }\n  `,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  preserveWhitespaces: false,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: ColorWrap,\n      useExisting: forwardRef(() => SliderComponent),\n    },\n  ]\n})\nexport class SliderComponent extends ColorWrap {\n  @Input()\n  pointer: Record<string, string> = {\n    width: '14px',\n    height: '14px',\n    borderRadius: '6px',\n    transform: 'translate(-7px, -2px)',\n    backgroundColor: 'rgb(248, 248, 248)',\n    boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',\n  };\n  @Input() radius = 2;\n\n  constructor() {\n    super();\n  }\n\n  handlePickerChange({ data, $event }) {\n    this.handleChange(data, $event);\n  }\n}\n\n@NgModule({\n  declarations: [\n    SliderComponent,\n    SliderSwatchComponent,\n    SliderSwatchesComponent,\n  ],\n  exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],\n  imports: [CommonModule, HueModule, SwatchModule],\n})\nexport class ColorSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,331 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i1 from 'ngx-color';
+import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class SliderSwatchComponent {
+    constructor() {
+        this.first = false;
+        this.last = false;
+        this.onClick = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.background = `hsl(${this.hsl.h}, 50%, ${this.offset * 100}%)`;
+    }
+    handleClick($event) {
+        this.onClick.emit({
+            data: {
+                h: this.hsl.h,
+                s: 0.5,
+                l: this.offset,
+                source: 'hsl',
+            },
+            $event,
+        });
+    }
+}
+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: `
+  <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: [{
+            type: Component,
+            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,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class SliderSwatchesComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+    }
+    active(l, s) {
+        return (Math.round(this.hsl.l * 100) / 100 === l &&
+            Math.round(this.hsl.s * 100) / 100 === s);
+    }
+    handleClick({ data, $event }) {
+        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: `
+  <div class="slider-swatches">
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".80"
+        [active]="active(0.80, 0.50)"
+        (onClick)="handleClick($event)"
+        [first]="true"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".65"
+        [active]="active(0.65, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".50"
+        [active]="active(0.50, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".35"
+        [active]="active(0.35, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".20"
+        [active]="active(0.20, 0.50)"
+        (onClick)="handleClick($event)"
+        [last]="true"
+      ></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: [{
+            type: Component,
+            args: [{
+                    selector: 'color-slider-swatches',
+                    template: `
+  <div class="slider-swatches">
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".80"
+        [active]="active(0.80, 0.50)"
+        (onClick)="handleClick($event)"
+        [first]="true"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".65"
+        [active]="active(0.65, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".50"
+        [active]="active(0.50, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".35"
+        [active]="active(0.35, 0.50)"
+        (onClick)="handleClick($event)"
+      ></color-slider-swatch>
+    </div>
+    <div class="slider-swatch-wrap">
+      <color-slider-swatch
+        [hsl]="hsl"
+        [offset]=".20"
+        [active]="active(0.20, 0.50)"
+        (onClick)="handleClick($event)"
+        [last]="true"
+      ></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,
+                }]
+        }], propDecorators: { hsl: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+
+class SliderComponent extends ColorWrap {
+    constructor() {
+        super();
+        this.pointer = {
+            width: '14px',
+            height: '14px',
+            borderRadius: '6px',
+            transform: 'translate(-7px, -2px)',
+            backgroundColor: 'rgb(248, 248, 248)',
+            boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)',
+        };
+        this.radius = 2;
+    }
+    handlePickerChange({ data, $event }) {
+        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: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SliderComponent),
+            multi: true,
+        },
+        {
+            provide: ColorWrap,
+            useExisting: forwardRef(() => SliderComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: `
+  <div class="slider-picker {{ className }}">
+    <div class="slider-hue">
+      <color-hue
+        [hsl]="hsl" [radius]="radius" [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-hue>
+    </div>
+    <div class="slider-swatches">
+      <color-slider-swatches [hsl]="hsl"
+        (onClick)="handlePickerChange($event)"
+      ></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: [{
+            type: Component,
+            args: [{
+                    selector: 'color-slider',
+                    template: `
+  <div class="slider-picker {{ className }}">
+    <div class="slider-hue">
+      <color-hue
+        [hsl]="hsl" [radius]="radius" [pointer]="pointer"
+        (onChange)="handlePickerChange($event)"
+      ></color-hue>
+    </div>
+    <div class="slider-swatches">
+      <color-slider-swatches [hsl]="hsl"
+        (onClick)="handlePickerChange($event)"
+      ></color-slider-swatches>
+    </div>
+  </div>
+  `,
+                    styles: [
+                        `
+    .slider-hue {
+      height: 12px;
+      position: relative;
+    }
+  `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    preserveWhitespaces: false,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => SliderComponent),
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pointer: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }] } });
+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,
+        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: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SliderComponent,
+                        SliderSwatchComponent,
+                        SliderSwatchesComponent,
+                    ],
+                    exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
+                    imports: [CommonModule, HueModule, SwatchModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorSliderModule, SliderComponent, SliderSwatchComponent, SliderSwatchesComponent };
+//# sourceMappingURL=ngx-color-slider.mjs.map