ngx-color 7.0.1 → 7.3.0

package/slider/esm2015/slider-swatches.component.js

@@ -1,84 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
-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.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;
-    }
-  `]
-            },] }
-];
-SliderSwatchesComponent.propDecorators = {
-    hsl: [{ type: Input }],
-    onClick: [{ type: Output }],
-    onSwatchHover: [{ type: Output }]
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLXN3YXRjaGVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zbGlkZXIvc2xpZGVyLXN3YXRjaGVzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQWtFdkIsTUFBTSxPQUFPLHVCQUF1QjtJQTlEcEM7UUFnRVksWUFBTyxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7UUFDbEMsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBV3BELENBQUM7SUFUQyxNQUFNLENBQUMsQ0FBUyxFQUFFLENBQVM7UUFDekIsT0FBTyxDQUNMLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUM7WUFDeEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLEtBQUssQ0FBQyxDQUN6QyxDQUFDO0lBQ0osQ0FBQztJQUNELFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDMUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztJQUN0QyxDQUFDOzs7WUEzRUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSx1QkFBdUI7Z0JBQ2pDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBNkNUO2dCQVlELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO3lCQVpqQjs7Ozs7Ozs7OztHQVVSO2FBR0Y7OztrQkFFRSxLQUFLO3NCQUNMLE1BQU07NEJBQ04sTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEhTTCB9IGZyb20gJ25neC1jb2xvcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NvbG9yLXNsaWRlci1zd2F0Y2hlcycsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJzbGlkZXItc3dhdGNoZXNcIj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjgwXCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC44MCwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgICAgW2ZpcnN0XT1cInRydWVcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjY1XCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC42NSwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNsaWRlci1zd2F0Y2g+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2gtd3JhcFwiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hcbiAgICAgICAgW2hzbF09XCJoc2xcIlxuICAgICAgICBbb2Zmc2V0XT1cIi41MFwiXG4gICAgICAgIFthY3RpdmVdPVwiYWN0aXZlKDAuNTAsIDAuNTApXCJcbiAgICAgICAgKG9uQ2xpY2spPVwiaGFuZGxlQ2xpY2soJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1zbGlkZXItc3dhdGNoPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzbGlkZXItc3dhdGNoLXdyYXBcIj5cbiAgICAgIDxjb2xvci1zbGlkZXItc3dhdGNoXG4gICAgICAgIFtoc2xdPVwiaHNsXCJcbiAgICAgICAgW29mZnNldF09XCIuMzVcIlxuICAgICAgICBbYWN0aXZlXT1cImFjdGl2ZSgwLjM1LCAwLjUwKVwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZUNsaWNrKCRldmVudClcIlxuICAgICAgPjwvY29sb3Itc2xpZGVyLXN3YXRjaD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLXN3YXRjaC13cmFwXCI+XG4gICAgICA8Y29sb3Itc2xpZGVyLXN3YXRjaFxuICAgICAgICBbaHNsXT1cImhzbFwiXG4gICAgICAgIFtvZmZzZXRdPVwiLjIwXCJcbiAgICAgICAgW2FjdGl2ZV09XCJhY3RpdmUoMC4yMCwgMC41MClcIlxuICAgICAgICAob25DbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICAgICAgW2xhc3RdPVwidHJ1ZVwiXG4gICAgICA+PC9jb2xvci1zbGlkZXItc3dhdGNoPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbYFxuICAgIC5zbGlkZXItc3dhdGNoZXMge1xuICAgICAgbWFyZ2luLXRvcDogMjBweDtcbiAgICB9XG4gICAgLnNsaWRlci1zd2F0Y2gtd3JhcCB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgd2lkdGg6IDIwJTtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDFweDtcbiAgICAgIGZsb2F0OiBsZWZ0O1xuICAgIH1cbiAgYF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbn0pXG5leHBvcnQgY2xhc3MgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQge1xuICBASW5wdXQoKSBoc2whOiBIU0w7XG4gIEBPdXRwdXQoKSBvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBPdXRwdXQoKSBvblN3YXRjaEhvdmVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgYWN0aXZlKGw6IG51bWJlciwgczogbnVtYmVyKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIE1hdGgucm91bmQodGhpcy5oc2wubCAqIDEwMCkgLyAxMDAgPT09IGwgJiZcbiAgICAgIE1hdGgucm91bmQodGhpcy5oc2wucyAqIDEwMCkgLyAxMDAgPT09IHNcbiAgICApO1xuICB9XG4gIGhhbmRsZUNsaWNrKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLm9uQ2xpY2suZW1pdCh7IGRhdGEsICRldmVudCB9KTtcbiAgfVxufVxuIl19

package/slider/esm2015/slider.component.js

@@ -1,69 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, NgModule, } from '@angular/core';
-import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
-import { SliderSwatchComponent } from './slider-swatch.component';
-import { SliderSwatchesComponent } from './slider-swatches.component';
-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.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,
-                styles: [`
-    .slider-hue {
-      height: 12px;
-      position: relative;
-    }
-  `]
-            },] }
-];
-SliderComponent.ctorParameters = () => [];
-SliderComponent.propDecorators = {
-    pointer: [{ type: Input }],
-    radius: [{ type: Input }]
-};
-export class ColorSliderModule {
-}
-ColorSliderModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    SliderComponent,
-                    SliderSwatchComponent,
-                    SliderSwatchesComponent,
-                ],
-                exports: [SliderComponent, SliderSwatchComponent, SliderSwatchesComponent],
-                imports: [CommonModule, HueModule, SwatchModule],
-            },] }
-];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zbGlkZXIvc2xpZGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxFQUNMLFFBQVEsR0FDVCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFDL0QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUE4QnRFLE1BQU0sT0FBTyxlQUFnQixTQUFRLFNBQVM7SUFZNUM7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQVhWLFlBQU8sR0FBMkI7WUFDaEMsS0FBSyxFQUFFLE1BQU07WUFDYixNQUFNLEVBQUUsTUFBTTtZQUNkLFlBQVksRUFBRSxLQUFLO1lBQ25CLFNBQVMsRUFBRSx1QkFBdUI7WUFDbEMsZUFBZSxFQUFFLG9CQUFvQjtZQUNyQyxTQUFTLEVBQUUsaUNBQWlDO1NBQzdDLENBQUM7UUFDTyxXQUFNLEdBQUcsQ0FBQyxDQUFDO0lBSXBCLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7UUFDakMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7O1lBOUNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsY0FBYztnQkFDeEIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7OztHQWNUO2dCQVNELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2dCQUMvQyxtQkFBbUIsRUFBRSxLQUFLO3lCQVJ4Qjs7Ozs7R0FLRDthQUlGOzs7O3NCQUVFLEtBQUs7cUJBU0wsS0FBSzs7QUFvQlIsTUFBTSxPQUFPLGlCQUFpQjs7O1lBVDdCLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUU7b0JBQ1osZUFBZTtvQkFDZixxQkFBcUI7b0JBQ3JCLHVCQUF1QjtpQkFDeEI7Z0JBQ0QsT0FBTyxFQUFFLENBQUMsZUFBZSxFQUFFLHFCQUFxQixFQUFFLHVCQUF1QixDQUFDO2dCQUMxRSxPQUFPLEVBQUUsQ0FBQyxZQUFZLEVBQUUsU0FBUyxFQUFFLFlBQVksQ0FBQzthQUNqRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgTmdNb2R1bGUsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDb2xvcldyYXAsIEh1ZU1vZHVsZSwgU3dhdGNoTW9kdWxlIH0gZnJvbSAnbmd4LWNvbG9yJztcbmltcG9ydCB7IFNsaWRlclN3YXRjaENvbXBvbmVudCB9IGZyb20gJy4vc2xpZGVyLXN3YXRjaC5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQgfSBmcm9tICcuL3NsaWRlci1zd2F0Y2hlcy5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjb2xvci1zbGlkZXInLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwic2xpZGVyLXBpY2tlciB7eyBjbGFzc05hbWUgfX1cIj5cbiAgICA8ZGl2IGNsYXNzPVwic2xpZGVyLWh1ZVwiPlxuICAgICAgPGNvbG9yLWh1ZVxuICAgICAgICBbaHNsXT1cImhzbFwiIFtyYWRpdXNdPVwicmFkaXVzXCIgW3BvaW50ZXJdPVwicG9pbnRlclwiXG4gICAgICAgIChvbkNoYW5nZSk9XCJoYW5kbGVQaWNrZXJDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICA+PC9jb2xvci1odWU+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInNsaWRlci1zd2F0Y2hlc1wiPlxuICAgICAgPGNvbG9yLXNsaWRlci1zd2F0Y2hlcyBbaHNsXT1cImhzbFwiXG4gICAgICAgIChvbkNsaWNrKT1cImhhbmRsZVBpY2tlckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgID48L2NvbG9yLXNsaWRlci1zd2F0Y2hlcz5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAuc2xpZGVyLWh1ZSB7XG4gICAgICBoZWlnaHQ6IDEycHg7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgfVxuICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJlc2VydmVXaGl0ZXNwYWNlczogZmFsc2UsXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlckNvbXBvbmVudCBleHRlbmRzIENvbG9yV3JhcCB7XG4gIEBJbnB1dCgpXG4gIHBvaW50ZXI6IFJlY29yZDxzdHJpbmcsIHN0cmluZz4gPSB7XG4gICAgd2lkdGg6ICcxNHB4JyxcbiAgICBoZWlnaHQ6ICcxNHB4JyxcbiAgICBib3JkZXJSYWRpdXM6ICc2cHgnLFxuICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZSgtN3B4LCAtMnB4KScsXG4gICAgYmFja2dyb3VuZENvbG9yOiAncmdiKDI0OCwgMjQ4LCAyNDgpJyxcbiAgICBib3hTaGFkb3c6ICcwIDFweCA0cHggMCByZ2JhKDAsIDAsIDAsIDAuMzcpJyxcbiAgfTtcbiAgQElucHV0KCkgcmFkaXVzID0gMjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbiAgaGFuZGxlUGlja2VyQ2hhbmdlKHsgZGF0YSwgJGV2ZW50IH0pIHtcbiAgICB0aGlzLmhhbmRsZUNoYW5nZShkYXRhLCAkZXZlbnQpO1xuICB9XG59XG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFNsaWRlckNvbXBvbmVudCxcbiAgICBTbGlkZXJTd2F0Y2hDb21wb25lbnQsXG4gICAgU2xpZGVyU3dhdGNoZXNDb21wb25lbnQsXG4gIF0sXG4gIGV4cG9ydHM6IFtTbGlkZXJDb21wb25lbnQsIFNsaWRlclN3YXRjaENvbXBvbmVudCwgU2xpZGVyU3dhdGNoZXNDb21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBIdWVNb2R1bGUsIFN3YXRjaE1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIENvbG9yU2xpZGVyTW9kdWxlIHt9XG4iXX0=

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

@@ -1,221 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
-import { ColorWrap, HueModule, SwatchModule } from 'ngx-color';
-
-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.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>
-  `,
-                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-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;
-    }
-
-  `]
-            },] }
-];
-SliderSwatchComponent.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.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;
-    }
-  `]
-            },] }
-];
-SliderSwatchesComponent.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.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,
-                styles: [`
-    .slider-hue {
-      height: 12px;
-      position: relative;
-    }
-  `]
-            },] }
-];
-SliderComponent.ctorParameters = () => [];
-SliderComponent.propDecorators = {
-    pointer: [{ type: Input }],
-    radius: [{ type: Input }]
-};
-class ColorSliderModule {
-}
-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 as ɵa, SliderSwatchesComponent as ɵb };
-//# sourceMappingURL=ngx-color-slider.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ngx-color-slider.js","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 {\n  ChangeDetectionStrategy,\n  Component,\n  Input,\n  NgModule,\n} from '@angular/core';\n\nimport { ColorWrap, HueModule, SwatchModule } from 'ngx-color';\nimport { SliderSwatchComponent } from './slider-swatch.component';\nimport { SliderSwatchesComponent } from './slider-swatches.component';\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})\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 './slider.component';\n\nexport {SliderSwatchComponent as ɵa} from './slider-swatch.component';\nexport {SliderSwatchesComponent as ɵb} from './slider-swatches.component';"],"names":[],"mappings":"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"}

package/slider/ngx-color-slider.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"SliderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"ngx-color","name":"ColorWrap","line":40,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"color-slider","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  ","styles":["\n    .slider-hue {\n      height: 12px;\n      position: relative;\n    }\n  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":37,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"pointer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"radius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"handlePickerChange":[{"__symbolic":"method"}]}},"ColorSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":61,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"SliderComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"SliderComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":68,"character":12},{"__symbolic":"reference","module":"ngx-color","name":"HueModule","line":68,"character":26},{"__symbolic":"reference","module":"ngx-color","name":"SwatchModule","line":68,"character":37}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"color-slider-swatch","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  ","styles":["\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  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"hsl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"first":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"last":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":51,"character":3}}]}],"ngOnChanges":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"color-slider-swatches","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  ","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  "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":69,"character":19},"member":"OnPush"},"preserveWhitespaces":false}]}],"members":{"hsl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":3}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":3}}]}],"onSwatchHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":3}}]}],"active":[{"__symbolic":"method"}],"handleClick":[{"__symbolic":"method"}]}}},"origins":{"SliderComponent":"./slider.component","ColorSliderModule":"./slider.component","ɵa":"./slider-swatch.component","ɵb":"./slider-swatches.component"},"importAs":"ngx-color/slider"}