ngx-color 8.0.0 → 8.0.3

package/esm2020/slider/slider-swatches.component.mjs

@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./slider-swatch.component";
+export 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: "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
+        [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"], dependencies: [{ kind: "component", type: i1.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: `
+  <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>
+  `, 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: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLXN3YXRjaGVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2xpZGVyL3NsaWRlci1zd2F0Y2hlcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7OztBQWtFdkIsTUFBTSxPQUFPLHVCQUF1QjtJQTlEcEM7UUFnRVksWUFBTyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0tBV25EO0lBVEMsTUFBTSxDQUFDLENBQVMsRUFBRSxDQUFTO1FBQ3pCLE9BQU8sQ0FDTCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsS0FBSyxDQUFDO1lBQ3hDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUMsQ0FDekMsQ0FBQztJQUNKLENBQUM7SUFDRCxXQUFXLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO1FBQzFCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDdEMsQ0FBQzs7b0hBYlUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsc0pBNUR4Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkNUOzJGQWVVLHVCQUF1QjtrQkE5RG5DLFNBQVM7K0JBQ0UsdUJBQXVCLFlBQ3ZCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0E2Q1QsbUJBWWdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEdBQUc7c0JBQVgsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBIU0wgfSBmcm9tICduZ3gtY29sb3InO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zbGlkZXItc3dhdGNoZXMnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaGVzXCI+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2gtd3JhcFwiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hcbiAgICAgICAgW2hzbF09XCJoc2xcIlxuICAgICAgICBbb2Zmc2V0XT1cIi44MFwiXG4gICAgICAgIFthY3RpdmVdPVwiYWN0aXZlKDAuODAsIDAuNTApXCJcbiAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgIFtmaXJzdF09XCJ0cnVlXCJcbiAgICAgID48L2NvbG9yLXNsaWRlci1zd2F0Y2g+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2gtd3JhcFwiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hcbiAgICAgICAgW2hzbF09XCJoc2xcIlxuICAgICAgICBbb2Zmc2V0XT1cIi42NVwiXG4gICAgICAgIFthY3RpdmVdPVwiYWN0aXZlKDAuNjUsIDAuNTApXCJcbiAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1zbGlkZXItc3dhdGNoPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzbGlkZXItc3dhdGNoLXdyYXBcIj5cbiAgICAgIDxjb2xvci1zbGlkZXItc3dhdGNoXG4gICAgICAgIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgW29mZnNldF09XCIuNTBcIlxuICAgICAgICBbYWN0aXZlXT1cImFjdGl2ZSgwLjUwLCAwLjUwKVwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjM1XCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC4zNSwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNsaWRlci1zd2F0Y2g+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2gtd3JhcFwiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hcbiAgICAgICAgW2hzbF09XCJoc2xcIlxuICAgICAgICBbb2Zmc2V0XT1cIi4yMFwiXG4gICAgICAgIFthY3RpdmVdPVwiYWN0aXZlKDAuMjAsIDAuNTApXCJcbiAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICAgIFtsYXN0XT1cInRydWVcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW2BcbiAgICAuc2xpZGVyLXN3YXRjaGVzIHtcbiAgICAgIG1hcmdpbi10b3A6IDIwcHg7XG4gICAgfVxuICAgIC5zbGlkZXItc3dhdGNoLXdyYXAge1xuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgIHdpZHRoOiAyMCU7XG4gICAgICBwYWRkaW5nLXJpZ2h0OiAxcHg7XG4gICAgICBmbG9hdDogbGVmdDtcbiAgICB9XG4gIGBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlclN3YXRjaGVzQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaHNsITogSFNMO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgb25Td2F0Y2hIb3ZlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGFjdGl2ZShsOiBudW1iZXIsIHM6IG51bWJlcikge1xuICAgIHJldHVybiAoXG4gICAgICBNYXRoLnJvdW5kKHRoaXMuaHNsLmwgKiAxMDApIC8gMTAwID09PSBsICYmXG4gICAgICBNYXRoLnJvdW5kKHRoaXMuaHNsLnMgKiAxMDApIC8gMTAwID09PSBzXG4gICAgKTtcbiAgfVxuICBoYW5kbGVDbGljayh7IGRhdGEsICRldmVudCB9KSB7XG4gICAgdGhpcy5vbkNsaWNrLmVtaXQoeyBkYXRhLCAkZXZlbnQgfSk7XG4gIH1cbn1cbiJdfQ==

package/esm2020/slider/slider.component.mjs

@@ -0,0 +1,102 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, Input, NgModule } from '@angular/core';
+import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
+import { SliderSwatchComponent } from './slider-swatch.component';
+import { SliderSwatchesComponent } from './slider-swatches.component';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-color";
+export 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: "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),
+            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"], 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: `
+  <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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SliderComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ColorWrap,
+                            useExisting: forwardRef(() => SliderComponent),
+                        },
+                    ], styles: [".slider-hue{height:12px;position:relative}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { pointer: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }] } });
+export class ColorSliderModule {
+}
+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: "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: [
+                        SliderComponent,
+                        SliderSwatchComponent,
+                        SliderSwatchesComponent,
+                    ],
+                    exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
+                    imports: [CommonModule, HueModule, SwatchModule],
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc2xpZGVyL3NsaWRlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFaEcsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQy9ELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUF5Q25ELE1BQU0sT0FBTyxlQUFnQixTQUFRLFNBQVM7SUFZNUM7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQVhWLFlBQU8sR0FBMkI7WUFDaEMsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxLQUFLO1lBQ25CLFNBQVMsRUFBRSx1QkFBdUI7WUFDbEMsZUFBZSxFQUFFLG9CQUFvQjtZQUNyQyxTQUFTLEVBQUUsaUNBQWlDO1NBQzdDLENBQUM7UUFDTyxXQUFNLEdBQUcsQ0FBQyxDQUFDO0lBSXBCLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDakMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7NEdBbEJVLGVBQWU7Z0dBQWYsZUFBZSx5RkFaZjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztZQUM5QyxLQUFLLEVBQUUsSUFBSTtTQUNaO1FBQ0Q7WUFDRSxPQUFPLEVBQUUsU0FBUztZQUNsQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztTQUMvQztLQUNGLGlEQW5DUzs7Ozs7Ozs7Ozs7Ozs7R0FjVCx3V0FnREMsdUJBQXVCOzJGQXpCZCxlQUFlO2tCQXZDM0IsU0FBUzsrQkFDRSxjQUFjLFlBQ2Q7Ozs7Ozs7Ozs7Ozs7O0dBY1QsbUJBU2dCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUssYUFDZjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQzs0QkFDOUMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7d0JBQ0Q7NEJBQ0UsT0FBTyxFQUFFLFNBQVM7NEJBQ2xCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLGdCQUFnQixDQUFDO3lCQUMvQztxQkFDRjswRUFJRCxPQUFPO3NCQUROLEtBQUs7Z0JBU0csTUFBTTtzQkFBZCxLQUFLOztBQW9CUixNQUFNLE9BQU8saUJBQWlCOzs4R0FBakIsaUJBQWlCOytHQUFqQixpQkFBaUIsaUJBOUJqQixlQUFlLEVBd0J4QixxQkFBcUI7UUFDckIsdUJBQXVCLGFBR2YsWUFBWSxFQUFFLFNBQVMsRUFBRSxZQUFZLGFBNUJwQyxlQUFlLEVBMkJDLHFCQUFxQixFQUFFLHVCQUF1QjsrR0FHOUQsaUJBQWlCLFlBRmxCLFlBQVksRUFBRSxTQUFTLEVBQUUsWUFBWTsyRkFFcEMsaUJBQWlCO2tCQVQ3QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixlQUFlO3dCQUNmLHFCQUFxQjt3QkFDckIsdUJBQXVCO3FCQUN4QjtvQkFDRCxPQUFPLEVBQUUsQ0FBQyxlQUFlLEVBQUUscUJBQXFCLEVBQUUsdUJBQXVCLENBQUM7b0JBQzFFLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsWUFBWSxDQUFDO2lCQUNqRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ29sb3JXcmFwLCBIdWVNb2R1bGUsIFN3YXRjaE1vZHVsZSB9IGZyb20gJ25neC1jb2xvcic7XG5pbXBvcnQgeyBTbGlkZXJTd2F0Y2hDb21wb25lbnQgfSBmcm9tICcuL3NsaWRlci1zd2F0Y2guY29tcG9uZW50JztcbmltcG9ydCB7IFNsaWRlclN3YXRjaGVzQ29tcG9uZW50IH0gZnJvbSAnLi9zbGlkZXItc3dhdGNoZXMuY29tcG9uZW50JztcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zbGlkZXInLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLWh1ZVwiPlxuICAgICAgPGNvbG9yLWh1ZVxuICAgICAgICBbaHNsXT1cImhzbFwiIFtyYWRpdXNdPVwicmFkaXVzXCIgW3BvaW50ZXJdPVwicG9pbnRlclwiXG4gICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVQaWNrZXJDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1odWU+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2hlc1wiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hlcyBbaHNsXT1cImhzbFwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNsaWRlci1zd2F0Y2hlcz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2xpZGVyLWh1ZSB7XG4gICAgICBoZWlnaHQ6IDEycHg7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2xpZGVyQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogQ29sb3JXcmFwLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2xpZGVyQ29tcG9uZW50KSxcbiAgICB9LFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIEBJbnB1dCgpXG4gIHBvaW50ZXI6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgd2lkdGg6ICcxNHB4JyxcbiAgICBoZWlnaHQ6ICcxNHB4JyxcbiAgICBib3JkZXJSYWRpdXM6ICc2cHgnLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZSgtN3B4LCAtMnB4KScsXG4gICAgYmFja2dyb3VuZENvbG9yOiAncmdiKDI0OCwgMjQ4LCAyNDgpJyxcbiAgICBib3hTaGFkb3c6ICcwIDFweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMzcpJyxcbiAgfTtcbiAgQElucHV0KCkgcmFkaXVzID0gMjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgaGFuZGxlUGlja2VyQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNsaWRlckNvbXBvbmVudCxcbiAgICBTbGlkZXJTd2F0Y2hDb21wb25lbnQsXG4gICAgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQsXG4gIF0sXG4gIGV4cG9ydHM6IFtTbGlkZXJDb21wb25lbnQsIFNsaWRlclN3YXRjaENvbXBvbmVudCwgU2xpZGVyU3dhdGNoZXNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBIdWVNb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yU2xpZGVyTW9kdWxlIHt9XG4iXX0=

package/esm2020/swatch.component.mjs

@@ -40,8 +40,8 @@ export class SwatchComponent {
         this.onClick.emit({ hex, $event });
     }
 }
-SwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SwatchComponent, selector: "color-swatch", inputs: { color: "color", style: "style", focusStyle: "focusStyle", focus: "focus" }, outputs: { onClick: "onClick", onHover: "onHover" }, ngImport: i0, template: `
+SwatchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SwatchComponent, selector: "color-swatch", inputs: { color: "color", style: "style", focusStyle: "focusStyle", focus: "focus" }, outputs: { onClick: "onClick", onHover: "onHover" }, ngImport: i0, template: `
     <div
       class="swatch"
       [ngStyle]="currentStyles()"
@@ -60,7 +60,7 @@ SwatchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
       ></color-checkboard>
     </div>
   `, isInline: true, styles: [".swatch{outline:none;height:100%;width:100%;cursor:pointer;position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.CheckboardComponent, selector: "color-checkboard", inputs: ["white", "size", "grey", "boxShadow", "borderRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SwatchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'color-swatch', template: `
     <div
@@ -96,10 +96,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 export class SwatchModule {
 }
-SwatchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SwatchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: SwatchModule, declarations: [SwatchComponent], imports: [CommonModule, CheckboardModule], exports: [SwatchComponent] });
-SwatchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SwatchModule, imports: [CommonModule, CheckboardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SwatchModule, decorators: [{
+SwatchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SwatchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: SwatchModule, declarations: [SwatchComponent], imports: [CommonModule, CheckboardModule], exports: [SwatchComponent] });
+SwatchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchModule, imports: [CommonModule, CheckboardModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SwatchComponent],

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

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

package/esm2020/swatches/public_api.mjs

@@ -0,0 +1,4 @@
+export { SwatchesColorComponent } from './swatches-color.component';
+export { SwatchesGroupComponent } from './swatches-group.component';
+export { ColorSwatchesModule, SwatchesComponent } from './swatches.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvc3dhdGNoZXMvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7IFN3YXRjaGVzQ29sb3JDb21wb25lbnQgfSBmcm9tICcuL3N3YXRjaGVzLWNvbG9yLmNvbXBvbmVudCc7XG5leHBvcnQgeyBTd2F0Y2hlc0dyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi9zd2F0Y2hlcy1ncm91cC5jb21wb25lbnQnO1xuZXhwb3J0IHsgQ29sb3JTd2F0Y2hlc01vZHVsZSwgU3dhdGNoZXNDb21wb25lbnQgfSBmcm9tICcuL3N3YXRjaGVzLmNvbXBvbmVudCc7XG4iXX0=

package/esm2020/swatches/swatches-color.component.mjs

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { getContrastingColor } from 'ngx-color';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-color";
+export class SwatchesColorComponent {
+    constructor() {
+        this.first = false;
+        this.last = false;
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+        this.getContrastingColor = getContrastingColor;
+        this.colorStyle = {
+            width: '40px',
+            height: '24px',
+            cursor: 'pointer',
+            marginBottom: '1px',
+        };
+        this.focusStyle = {};
+    }
+    ngOnInit() {
+        this.colorStyle.background = this.color;
+        this.focusStyle.boxShadow = `0 0 4px ${this.color}`;
+        if (this.first) {
+            this.colorStyle.borderRadius = '2px 2px 0 0';
+        }
+        if (this.last) {
+            this.colorStyle.borderRadius = '0 0 2px 2px';
+        }
+        if (this.color === '#FFFFFF') {
+            this.colorStyle.boxShadow = 'inset 0 0 0 1px #ddd';
+        }
+    }
+    handleClick($event) {
+        this.onClick.emit({
+            data: {
+                hex: this.color,
+                source: 'hex',
+            },
+            $event,
+        });
+    }
+}
+SwatchesColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchesColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SwatchesColorComponent, selector: "color-swatches-color", inputs: { color: "color", first: "first", last: "last", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <color-swatch
+      [color]="color"
+      [style]="colorStyle"
+      [focusStyle]="focusStyle"
+      [class.first]="first"
+      [class.last]="last"
+      (click)="handleClick($event)"
+      (keydown.enter)="handleClick($event)"
+      (onHover)="onSwatchHover.emit($event)"
+    >
+      <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
+        <svg
+          style="width: 24px; height: 24px;"
+          viewBox="0 0 24 24"
+          [style.fill]="getContrastingColor(color)"
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </div>
+    </color-swatch>
+  `, isInline: true, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}.swatch-check{display:flex;margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SwatchesColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-swatches-color', template: `
+    <color-swatch
+      [color]="color"
+      [style]="colorStyle"
+      [focusStyle]="focusStyle"
+      [class.first]="first"
+      [class.last]="last"
+      (click)="handleClick($event)"
+      (keydown.enter)="handleClick($event)"
+      (onHover)="onSwatchHover.emit($event)"
+    >
+      <div class="swatch-check" *ngIf="active" [class.first]="first" [class.last]="last">
+        <svg
+          style="width: 24px; height: 24px;"
+          viewBox="0 0 24 24"
+          [style.fill]="getContrastingColor(color)"
+        >
+          <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+        </svg>
+      </div>
+    </color-swatch>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}.swatch-check{display:flex;margin-left:8px}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dhdGNoZXMtY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9zd2F0Y2hlcy9zd2F0Y2hlcy1jb2xvci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFDOzs7O0FBMkNoRCxNQUFNLE9BQU8sc0JBQXNCO0lBekNuQztRQTJDVyxVQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ2QsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUVaLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBQ2xDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztRQUNsRCx3QkFBbUIsR0FBRyxtQkFBbUIsQ0FBQztRQUMxQyxlQUFVLEdBQTJCO1lBQ25DLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxNQUFNLEVBQUUsU0FBUztZQUNqQixZQUFZLEVBQUUsS0FBSztTQUNwQixDQUFDO1FBQ0YsZUFBVSxHQUEyQixFQUFFLENBQUM7S0F3QnpDO0lBdEJDLFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3hDLElBQUksQ0FBQyxVQUFVLENBQUMsU0FBUyxHQUFHLFdBQVcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3BELElBQUksSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNkLElBQUksQ0FBQyxVQUFVLENBQUMsWUFBWSxHQUFHLGFBQWEsQ0FBQztTQUM5QztRQUNELElBQUksSUFBSSxDQUFDLElBQUksRUFBRTtZQUNiLElBQUksQ0FBQyxVQUFVLENBQUMsWUFBWSxHQUFHLGFBQWEsQ0FBQztTQUM5QztRQUNELElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxTQUFTLEVBQUU7WUFDNUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxTQUFTLEdBQUcsc0JBQXNCLENBQUM7U0FDcEQ7SUFDSCxDQUFDO0lBQ0QsV0FBVyxDQUFDLE1BQU07UUFDaEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7WUFDaEIsSUFBSSxFQUFFO2dCQUNKLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSztnQkFDZixNQUFNLEVBQUUsS0FBSzthQUNkO1lBQ0QsTUFBTTtTQUNQLENBQUMsQ0FBQztJQUNMLENBQUM7O21IQXJDVSxzQkFBc0I7dUdBQXRCLHNCQUFzQix5TUF2Q3ZCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQlQ7MkZBa0JVLHNCQUFzQjtrQkF6Q2xDLFNBQVM7K0JBQ0Usc0JBQXNCLFlBQ3RCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQlQsbUJBZWdCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDSSxPQUFPO3NCQUFoQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IGdldENvbnRyYXN0aW5nQ29sb3IgfSBmcm9tICduZ3gtY29sb3InO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zd2F0Y2hlcy1jb2xvcicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGNvbG9yLXN3YXRjaFxuICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgIFtzdHlsZV09XCJjb2xvclN0eWxlXCJcbiAgICAgIFtmb2N1c1N0eWxlXT1cImZvY3VzU3R5bGVcIlxuICAgICAgW2NsYXNzLmZpcnN0XT1cImZpcnN0XCJcbiAgICAgIFtjbGFzcy5sYXN0XT1cImxhc3RcIlxuICAgICAgKGNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIlxuICAgICAgKGtleWRvd24uZW50ZXIpPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICAob25Ib3Zlcik9XCJvblN3YXRjaEhvdmVyLmVtaXQoJGV2ZW50KVwiXG4gICAgPlxuICAgICAgPGRpdiBjbGFzcz1cInN3YXRjaC1jaGVja1wiICpuZ0lmPVwiYWN0aXZlXCIgW2NsYXNzLmZpcnN0XT1cImZpcnN0XCIgW2NsYXNzLmxhc3RdPVwibGFzdFwiPlxuICAgICAgICA8c3ZnXG4gICAgICAgICAgc3R5bGU9XCJ3aWR0aDogMjRweDsgaGVpZ2h0OiAyNHB4O1wiXG4gICAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXG4gICAgICAgICAgW3N0eWxlLmZpbGxdPVwiZ2V0Q29udHJhc3RpbmdDb2xvcihjb2xvcilcIlxuICAgICAgICA+XG4gICAgICAgICAgPHBhdGggZD1cIk0yMSw3TDksMTlMMy41LDEzLjVMNC45MSwxMi4wOUw5LDE2LjE3TDE5LjU5LDUuNTlMMjEsN1pcIiAvPlxuICAgICAgICA8L3N2Zz5cbiAgICAgIDwvZGl2PlxuICAgIDwvY29sb3Itc3dhdGNoPlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuc3dhdGNoZXMtZ3JvdXAge1xuICAgICAgICBwYWRkaW5nLWJvdHRvbTogMTBweDtcbiAgICAgICAgd2lkdGg6IDQwcHg7XG4gICAgICAgIGZsb2F0OiBsZWZ0O1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDEwcHg7XG4gICAgICB9XG4gICAgICAuc3dhdGNoLWNoZWNrIHtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IDhweDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFN3YXRjaGVzQ29sb3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBjb2xvciE6IHN0cmluZztcbiAgQElucHV0KCkgZmlyc3QgPSBmYWxzZTtcbiAgQElucHV0KCkgbGFzdCA9IGZhbHNlO1xuICBASW5wdXQoKSBhY3RpdmUhOiBib29sZWFuO1xuICBAT3V0cHV0KCkgb25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBAT3V0cHV0KCkgb25Td2F0Y2hIb3ZlciA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBnZXRDb250cmFzdGluZ0NvbG9yID0gZ2V0Q29udHJhc3RpbmdDb2xvcjtcbiAgY29sb3JTdHlsZTogUmVjb3JkPHN0cmluZywgc3RyaW5nPiA9IHtcbiAgICB3aWR0aDogJzQwcHgnLFxuICAgIGhlaWdodDogJzI0cHgnLFxuICAgIGN1cnNvcjogJ3BvaW50ZXInLFxuICAgIG1hcmdpbkJvdHRvbTogJzFweCcsXG4gIH07XG4gIGZvY3VzU3R5bGU6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7fTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbG9yU3R5bGUuYmFja2dyb3VuZCA9IHRoaXMuY29sb3I7XG4gICAgdGhpcy5mb2N1c1N0eWxlLmJveFNoYWRvdyA9IGAwIDAgNHB4ICR7dGhpcy5jb2xvcn1gO1xuICAgIGlmICh0aGlzLmZpcnN0KSB7XG4gICAgICB0aGlzLmNvbG9yU3R5bGUuYm9yZGVyUmFkaXVzID0gJzJweCAycHggMCAwJztcbiAgICB9XG4gICAgaWYgKHRoaXMubGFzdCkge1xuICAgICAgdGhpcy5jb2xvclN0eWxlLmJvcmRlclJhZGl1cyA9ICcwIDAgMnB4IDJweCc7XG4gICAgfVxuICAgIGlmICh0aGlzLmNvbG9yID09PSAnI0ZGRkZGRicpIHtcbiAgICAgIHRoaXMuY29sb3JTdHlsZS5ib3hTaGFkb3cgPSAnaW5zZXQgMCAwIDAgMXB4ICNkZGQnO1xuICAgIH1cbiAgfVxuICBoYW5kbGVDbGljaygkZXZlbnQpIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7XG4gICAgICBkYXRhOiB7XG4gICAgICAgIGhleDogdGhpcy5jb2xvcixcbiAgICAgICAgc291cmNlOiAnaGV4JyxcbiAgICAgIH0sXG4gICAgICAkZXZlbnQsXG4gICAgfSk7XG4gIH1cbn1cbiJdfQ==

package/esm2020/swatches/swatches-group.component.mjs

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./swatches-color.component";
+export class SwatchesGroupComponent {
+    constructor() {
+        this.onClick = new EventEmitter();
+        this.onSwatchHover = new EventEmitter();
+    }
+}
+SwatchesGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SwatchesGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: SwatchesGroupComponent, selector: "color-swatches-group", inputs: { group: "group", active: "active" }, outputs: { onClick: "onClick", onSwatchHover: "onSwatchHover" }, ngImport: i0, template: `
+    <div class="swatches-group">
+      <color-swatches-color
+        *ngFor="let color of group; let idx = index"
+        [active]="color.toLowerCase() === active"
+        [color]="color"
+        [first]="idx === 0"
+        [last]="idx === group.length - 1"
+        (onClick)="onClick.emit($event)"
+      >
+      </color-swatches-color>
+    </div>
+  `, isInline: true, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SwatchesColorComponent, selector: "color-swatches-color", inputs: ["color", "first", "last", "active"], outputs: ["onClick", "onSwatchHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: SwatchesGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-swatches-group', template: `
+    <div class="swatches-group">
+      <color-swatches-color
+        *ngFor="let color of group; let idx = index"
+        [active]="color.toLowerCase() === active"
+        [color]="color"
+        [first]="idx === 0"
+        [last]="idx === group.length - 1"
+        (onClick)="onClick.emit($event)"
+      >
+      </color-swatches-color>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, styles: [".swatches-group{padding-bottom:10px;width:40px;float:left;margin-right:10px}\n"] }]
+        }], propDecorators: { group: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onSwatchHover: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dhdGNoZXMtZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xpYi9zd2F0Y2hlcy9zd2F0Y2hlcy1ncm91cC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQThCaEcsTUFBTSxPQUFPLHNCQUFzQjtJQTVCbkM7UUErQlksWUFBTyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0tBQ25EOzttSEFMWSxzQkFBc0I7dUdBQXRCLHNCQUFzQiwyS0ExQnZCOzs7Ozs7Ozs7Ozs7R0FZVDsyRkFjVSxzQkFBc0I7a0JBNUJsQyxTQUFTOytCQUNFLHNCQUFzQixZQUN0Qjs7Ozs7Ozs7Ozs7O0dBWVQsbUJBV2dCLHVCQUF1QixDQUFDLE1BQU0sdUJBQzFCLEtBQUs7OEJBR2pCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkFDRyxhQUFhO3NCQUF0QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXN3YXRjaGVzLWdyb3VwJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwic3dhdGNoZXMtZ3JvdXBcIj5cbiAgICAgIDxjb2xvci1zd2F0Y2hlcy1jb2xvclxuICAgICAgICAqbmdGb3I9XCJsZXQgY29sb3Igb2YgZ3JvdXA7IGxldCBpZHggPSBpbmRleFwiXG4gICAgICAgIFthY3RpdmVdPVwiY29sb3IudG9Mb3dlckNhc2UoKSA9PT0gYWN0aXZlXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgW2ZpcnN0XT1cImlkeCA9PT0gMFwiXG4gICAgICAgIFtsYXN0XT1cImlkeCA9PT0gZ3JvdXAubGVuZ3RoIC0gMVwiXG4gICAgICAgIChvbkNsaWNrKT1cIm9uQ2xpY2suZW1pdCgkZXZlbnQpXCJcbiAgICAgID5cbiAgICAgIDwvY29sb3Itc3dhdGNoZXMtY29sb3I+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAgIC5zd2F0Y2hlcy1ncm91cCB7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAxMHB4O1xuICAgICAgICB3aWR0aDogNDBweDtcbiAgICAgICAgZmxvYXQ6IGxlZnQ7XG4gICAgICAgIG1hcmdpbi1yaWdodDogMTBweDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFN3YXRjaGVzR3JvdXBDb21wb25lbnQge1xuICBASW5wdXQoKSBncm91cCE6IHN0cmluZ1tdO1xuICBASW5wdXQoKSBhY3RpdmUhOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG59XG4iXX0=