ngx-color 7.0.1 → 7.3.0

package/fesm2015/ngx-color.js

@@ -1,1164 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, ChangeDetectionStrategy, Input, NgModule, Directive, ElementRef, Output, HostListener, EventEmitter } from '@angular/core';
-import { Subject, fromEvent } from 'rxjs';
-import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
-import { TinyColor } from '@ctrl/tinycolor';
-
-const checkboardCache = {};
-function render(c1, c2, size) {
-    if (typeof document === 'undefined') {
-        return null;
-    }
-    const canvas = document.createElement('canvas');
-    canvas.width = size * 2;
-    canvas.height = size * 2;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        return null;
-    } // If no context can be found, return early.
-    ctx.fillStyle = c1;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = c2;
-    ctx.fillRect(0, 0, size, size);
-    ctx.translate(size, size);
-    ctx.fillRect(0, 0, size, size);
-    return canvas.toDataURL();
-}
-function getCheckerboard(c1, c2, size) {
-    const key = `${c1}-${c2}-${size}`;
-    if (checkboardCache[key]) {
-        return checkboardCache[key];
-    }
-    const checkboard = render(c1, c2, size);
-    if (!checkboard) {
-        return null;
-    }
-    checkboardCache[key] = checkboard;
-    return checkboard;
-}
-
-class CheckboardComponent {
-    constructor() {
-        this.white = 'transparent';
-        this.size = 8;
-        this.grey = 'rgba(0,0,0,.08)';
-    }
-    ngOnInit() {
-        const background = getCheckerboard(this.white, this.grey, this.size);
-        this.gridStyles = {
-            borderRadius: this.borderRadius,
-            boxShadow: this.boxShadow,
-            background: `url(${background}) center left`,
-        };
-    }
-}
-CheckboardComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-checkboard',
-                template: `<div class="grid" [ngStyle]="gridStyles"></div>`,
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-  .grid {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    position: absolute;
-  }
-  `]
-            },] }
-];
-CheckboardComponent.propDecorators = {
-    white: [{ type: Input }],
-    size: [{ type: Input }],
-    grey: [{ type: Input }],
-    boxShadow: [{ type: Input }],
-    borderRadius: [{ type: Input }]
-};
-class CheckboardModule {
-}
-CheckboardModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [CheckboardComponent],
-                exports: [CheckboardComponent],
-                imports: [CommonModule],
-            },] }
-];
-
-class CoordinatesDirective {
-    constructor(el) {
-        this.el = el;
-        this.coordinatesChange = new Subject();
-        this.mousechange = new Subject();
-        this.mouseListening = false;
-    }
-    mousemove($event, x, y, isTouch = false) {
-        if (this.mouseListening) {
-            $event.preventDefault();
-            this.mousechange.next({ $event, x, y, isTouch });
-        }
-    }
-    mouseup() {
-        this.mouseListening = false;
-    }
-    mousedown($event, x, y, isTouch = false) {
-        $event.preventDefault();
-        this.mouseListening = true;
-        this.mousechange.next({ $event, x, y, isTouch });
-    }
-    ngOnInit() {
-        this.sub = this.mousechange
-            .pipe(
-        // limit times it is updated for the same area
-        distinctUntilChanged((p, q) => p.x === q.x && p.y === q.y))
-            .subscribe(n => this.handleChange(n.x, n.y, n.$event, n.isTouch));
-    }
-    ngOnDestroy() {
-        this.sub.unsubscribe();
-    }
-    handleChange(x, y, $event, isTouch) {
-        const containerWidth = this.el.nativeElement.clientWidth;
-        const containerHeight = this.el.nativeElement.clientHeight;
-        const left = x -
-            (this.el.nativeElement.getBoundingClientRect().left + window.pageXOffset);
-        let top = y - this.el.nativeElement.getBoundingClientRect().top;
-        if (!isTouch) {
-            top = top - window.pageYOffset;
-        }
-        this.coordinatesChange.next({
-            x,
-            y,
-            top,
-            left,
-            containerWidth,
-            containerHeight,
-            $event,
-        });
-    }
-}
-CoordinatesDirective.decorators = [
-    { type: Directive, args: [{ selector: '[ngx-color-coordinates]' },] }
-];
-CoordinatesDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-CoordinatesDirective.propDecorators = {
-    coordinatesChange: [{ type: Output }],
-    mousemove: [{ type: HostListener, args: ['window:mousemove', ['$event', '$event.pageX', '$event.pageY'],] }, { type: HostListener, args: ['window:touchmove', [
-                    '$event',
-                    '$event.touches[0].clientX',
-                    '$event.touches[0].clientY',
-                    'true',
-                ],] }],
-    mouseup: [{ type: HostListener, args: ['window:mouseup',] }, { type: HostListener, args: ['window:touchend',] }],
-    mousedown: [{ type: HostListener, args: ['mousedown', ['$event', '$event.pageX', '$event.pageY'],] }, { type: HostListener, args: ['touchstart', [
-                    '$event',
-                    '$event.touches[0].clientX',
-                    '$event.touches[0].clientY',
-                    'true',
-                ],] }]
-};
-class CoordinatesModule {
-}
-CoordinatesModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [CoordinatesDirective],
-                exports: [CoordinatesDirective],
-            },] }
-];
-
-class AlphaComponent {
-    constructor() {
-        this.direction = 'horizontal';
-        this.onChange = new EventEmitter();
-    }
-    ngOnChanges() {
-        if (this.direction === 'vertical') {
-            this.pointerLeft = 0;
-            this.pointerTop = this.rgb.a * 100;
-            this.gradient = {
-                background: `linear-gradient(to bottom, rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 0) 0%,
-          rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 1) 100%)`,
-            };
-        }
-        else {
-            this.gradient = {
-                background: `linear-gradient(to right, rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 0) 0%,
-          rgba(${this.rgb.r},${this.rgb.g},${this.rgb.b}, 1) 100%)`,
-            };
-            this.pointerLeft = this.rgb.a * 100;
-        }
-    }
-    handleChange({ top, left, containerHeight, containerWidth, $event }) {
-        let data;
-        if (this.direction === 'vertical') {
-            let a;
-            if (top < 0) {
-                a = 0;
-            }
-            else if (top > containerHeight) {
-                a = 1;
-            }
-            else {
-                a = Math.round(top * 100 / containerHeight) / 100;
-            }
-            if (this.hsl.a !== a) {
-                data = {
-                    h: this.hsl.h,
-                    s: this.hsl.s,
-                    l: this.hsl.l,
-                    a,
-                    source: 'rgb',
-                };
-            }
-        }
-        else {
-            let a;
-            if (left < 0) {
-                a = 0;
-            }
-            else if (left > containerWidth) {
-                a = 1;
-            }
-            else {
-                a = Math.round(left * 100 / containerWidth) / 100;
-            }
-            if (this.hsl.a !== a) {
-                data = {
-                    h: this.hsl.h,
-                    s: this.hsl.s,
-                    l: this.hsl.l,
-                    a,
-                    source: 'rgb',
-                };
-            }
-        }
-        if (!data) {
-            return;
-        }
-        this.onChange.emit({ data, $event });
-    }
-}
-AlphaComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-alpha',
-                template: `
-  <div class="alpha" [style.border-radius]="radius">
-    <div class="alpha-checkboard">
-      <color-checkboard></color-checkboard>
-    </div>
-    <div class="alpha-gradient" [ngStyle]="gradient" [style.box-shadow]="shadow" [style.border-radius]="radius"></div>
-    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="alpha-container color-alpha-{{direction}}">
-      <div class="alpha-pointer" [style.left.%]="pointerLeft" [style.top.%]="pointerTop">
-        <div class="alpha-slider" [ngStyle]="pointer"></div>
-      </div>
-    </div>
-  </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [`
-    .alpha {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .alpha-checkboard {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      overflow: hidden;
-    }
-    .alpha-gradient {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .alpha-container {
-      position: relative;
-      height: 100%;
-      margin: 0 3px;
-    }
-    .alpha-pointer {
-      position: absolute;
-    }
-    .alpha-slider {
-      width: 4px;
-      border-radius: 1px;
-      height: 8px;
-      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
-      background: #fff;
-      margin-top: 1px;
-      transform: translateX(-2px);
-    }
-  `]
-            },] }
-];
-AlphaComponent.propDecorators = {
-    hsl: [{ type: Input }],
-    rgb: [{ type: Input }],
-    pointer: [{ type: Input }],
-    shadow: [{ type: Input }],
-    radius: [{ type: Input }],
-    direction: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-class AlphaModule {
-}
-AlphaModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [AlphaComponent],
-                exports: [AlphaComponent],
-                imports: [CommonModule, CheckboardModule, CoordinatesModule],
-            },] }
-];
-
-function simpleCheckForValidColor(data) {
-    const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
-    let checked = 0;
-    let passed = 0;
-    keysToCheck.forEach(letter => {
-        if (!data[letter]) {
-            return;
-        }
-        checked += 1;
-        if (!isNaN(data[letter])) {
-            passed += 1;
-        }
-        if (letter === 's' || letter === 'l') {
-            const percentPatt = /^\d+%$/;
-            if (percentPatt.test(data[letter])) {
-                passed += 1;
-            }
-        }
-    });
-    return checked === passed ? data : false;
-}
-function toState(data, oldHue, disableAlpha) {
-    const color = data.hex ? new TinyColor(data.hex) : new TinyColor(data);
-    if (disableAlpha) {
-        color.setAlpha(1);
-    }
-    const hsl = color.toHsl();
-    const hsv = color.toHsv();
-    const rgb = color.toRgb();
-    const hex = color.toHex();
-    if (hsl.s === 0) {
-        hsl.h = oldHue || 0;
-        hsv.h = oldHue || 0;
-    }
-    const transparent = hex === '000000' && rgb.a === 0;
-    return {
-        hsl,
-        hex: transparent ? 'transparent' : color.toHexString(),
-        rgb,
-        hsv,
-        oldHue: data.h || oldHue || hsl.h,
-        source: data.source,
-    };
-}
-function isValidHex(hex) {
-    return new TinyColor(hex).isValid;
-}
-function getContrastingColor(data) {
-    if (!data) {
-        return '#fff';
-    }
-    const col = toState(data);
-    if (col.hex === 'transparent') {
-        return 'rgba(0,0,0,0.4)';
-    }
-    const yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
-    return yiq >= 128 ? '#000' : '#fff';
-}
-
-class ColorWrap {
-    constructor() {
-        this.color = {
-            h: 250,
-            s: 0.5,
-            l: 0.2,
-            a: 1,
-        };
-        this.onChange = new EventEmitter();
-        this.onChangeComplete = new EventEmitter();
-        this.onSwatchHover = new EventEmitter();
-    }
-    ngOnInit() {
-        this.changes = this.onChange
-            .pipe(debounceTime(100))
-            .subscribe(x => this.onChangeComplete.emit(x));
-        this.setState(toState(this.color, 0));
-        this.currentColor = this.hex;
-    }
-    ngOnChanges() {
-        this.setState(toState(this.color, this.oldHue));
-    }
-    ngOnDestroy() {
-        this.changes.unsubscribe();
-    }
-    setState(data) {
-        this.oldHue = data.oldHue;
-        this.hsl = data.hsl;
-        this.hsv = data.hsv;
-        this.rgb = data.rgb;
-        this.hex = data.hex;
-        this.source = data.source;
-        this.afterValidChange();
-    }
-    handleChange(data, $event) {
-        const isValidColor = simpleCheckForValidColor(data);
-        if (isValidColor) {
-            const color = toState(data, data.h || this.oldHue, this.disableAlpha);
-            this.setState(color);
-            this.onChange.emit({ color, $event });
-            this.afterValidChange();
-        }
-    }
-    /** hook for components after a complete change */
-    afterValidChange() { }
-    handleSwatchHover(data, $event) {
-        const isValidColor = simpleCheckForValidColor(data);
-        if (isValidColor) {
-            const color = toState(data, data.h || this.oldHue);
-            this.setState(color);
-            this.onSwatchHover.emit({ color, $event });
-        }
-    }
-}
-ColorWrap.decorators = [
-    { type: Component, args: [{
-                // create seletor base for test override property
-                selector: 'color-wrap',
-                template: ``
-            },] }
-];
-ColorWrap.propDecorators = {
-    className: [{ type: Input }],
-    color: [{ type: Input }],
-    onChange: [{ type: Output }],
-    onChangeComplete: [{ type: Output }],
-    onSwatchHover: [{ type: Output }]
-};
-class ColorWrapModule {
-}
-ColorWrapModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ColorWrap],
-                exports: [ColorWrap],
-                imports: [CommonModule],
-            },] }
-];
-
-class EditableInputComponent {
-    constructor() {
-        this.placeholder = '';
-        this.onChange = new EventEmitter();
-        this.focus = false;
-    }
-    ngOnInit() {
-        this.wrapStyle = this.style && this.style.wrap ? this.style.wrap : {};
-        this.inputStyle = this.style && this.style.input ? this.style.input : {};
-        this.labelStyle = this.style && this.style.label ? this.style.label : {};
-        if (this.dragLabel) {
-            this.labelStyle.cursor = 'ew-resize';
-        }
-    }
-    handleFocus($event) {
-        this.focus = true;
-    }
-    handleFocusOut($event) {
-        this.focus = false;
-        this.currentValue = this.blurValue;
-    }
-    handleKeydown($event) {
-        // In case `e.target.value` is a percentage remove the `%` character
-        // and update accordingly with a percentage
-        // https://github.com/casesandberg/react-color/issues/383
-        const stringValue = String($event.target.value);
-        const isPercentage = stringValue.indexOf('%') > -1;
-        const num = Number(stringValue.replace(/%/g, ''));
-        if (isNaN(num)) {
-            return;
-        }
-        const amount = this.arrowOffset || 1;
-        // Up
-        if ($event.keyCode === 38) {
-            if (this.label) {
-                this.onChange.emit({
-                    data: { [this.label]: num + amount },
-                    $event,
-                });
-            }
-            else {
-                this.onChange.emit({ data: num + amount, $event });
-            }
-            if (isPercentage) {
-                this.currentValue = `${num + amount}%`;
-            }
-            else {
-                this.currentValue = num + amount;
-            }
-        }
-        // Down
-        if ($event.keyCode === 40) {
-            if (this.label) {
-                this.onChange.emit({
-                    data: { [this.label]: num - amount },
-                    $event,
-                });
-            }
-            else {
-                this.onChange.emit({ data: num - amount, $event });
-            }
-            if (isPercentage) {
-                this.currentValue = `${num - amount}%`;
-            }
-            else {
-                this.currentValue = num - amount;
-            }
-        }
-    }
-    handleKeyup($event) {
-        if ($event.keyCode === 40 || $event.keyCode === 38) {
-            return;
-        }
-        if (`${this.currentValue}` === $event.target.value) {
-            return;
-        }
-        if (this.label) {
-            this.onChange.emit({
-                data: { [this.label]: $event.target.value },
-                $event,
-            });
-        }
-        else {
-            this.onChange.emit({ data: $event.target.value, $event });
-        }
-    }
-    ngOnChanges() {
-        if (!this.focus) {
-            this.currentValue = String(this.value).toUpperCase();
-            this.blurValue = String(this.value).toUpperCase();
-        }
-        else {
-            this.blurValue = String(this.value).toUpperCase();
-        }
-    }
-    ngOnDestroy() {
-        this.unsubscribe();
-    }
-    subscribe() {
-        this.mousemove = fromEvent(document, 'mousemove').subscribe((ev) => this.handleDrag(ev));
-        this.mouseup = fromEvent(document, 'mouseup').subscribe(() => this.unsubscribe());
-    }
-    unsubscribe() {
-        if (this.mousemove) {
-            this.mousemove.unsubscribe();
-        }
-        if (this.mouseup) {
-            this.mouseup.unsubscribe();
-        }
-    }
-    handleMousedown($event) {
-        if (this.dragLabel) {
-            $event.preventDefault();
-            this.handleDrag($event);
-            this.subscribe();
-        }
-    }
-    handleDrag($event) {
-        if (this.dragLabel) {
-            const newValue = Math.round(this.value + $event.movementX);
-            if (newValue >= 0 && newValue <= this.dragMax) {
-                this.onChange.emit({ data: { [this.label]: newValue }, $event });
-            }
-        }
-    }
-}
-EditableInputComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-editable-input',
-                template: `
-    <div class="wrap" [ngStyle]="wrapStyle">
-      <input
-        [ngStyle]="inputStyle"
-        spellCheck="false"
-        [value]="currentValue"
-        [placeholder]="placeholder"
-        (keydown)="handleKeydown($event)"
-        (keyup)="handleKeyup($event)"
-        (focus)="handleFocus($event)"
-        (focusout)="handleFocusOut($event)"
-        aria-labelledby="colorEditableInputLabel"
-      />
-      <span id="colorEditableInputLabel" *ngIf="label" [ngStyle]="labelStyle" (mousedown)="handleMousedown($event)">
-        {{ label }}
-      </span>
-    </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-      :host {
-        display: flex;
-      }
-      .wrap {
-        position: relative;
-      }
-    `]
-            },] }
-];
-EditableInputComponent.propDecorators = {
-    style: [{ type: Input }],
-    label: [{ type: Input }],
-    value: [{ type: Input }],
-    arrowOffset: [{ type: Input }],
-    dragLabel: [{ type: Input }],
-    dragMax: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-class EditableInputModule {
-}
-EditableInputModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [EditableInputComponent],
-                exports: [EditableInputComponent],
-                imports: [CommonModule],
-            },] }
-];
-
-class HueComponent {
-    constructor() {
-        this.hidePointer = false;
-        this.direction = 'horizontal';
-        this.onChange = new EventEmitter();
-        this.left = '0px';
-        this.top = '';
-    }
-    ngOnChanges() {
-        if (this.direction === 'horizontal') {
-            this.left = `${this.hsl.h * 100 / 360}%`;
-        }
-        else {
-            this.top = `${-(this.hsl.h * 100 / 360) + 100}%`;
-        }
-    }
-    handleChange({ top, left, containerHeight, containerWidth, $event }) {
-        let data;
-        if (this.direction === 'vertical') {
-            let h;
-            if (top < 0) {
-                h = 359;
-            }
-            else if (top > containerHeight) {
-                h = 0;
-            }
-            else {
-                const percent = -(top * 100 / containerHeight) + 100;
-                h = 360 * percent / 100;
-            }
-            if (this.hsl.h !== h) {
-                data = {
-                    h,
-                    s: this.hsl.s,
-                    l: this.hsl.l,
-                    a: this.hsl.a,
-                    source: 'rgb',
-                };
-            }
-        }
-        else {
-            let h;
-            if (left < 0) {
-                h = 0;
-            }
-            else if (left > containerWidth) {
-                h = 359;
-            }
-            else {
-                const percent = left * 100 / containerWidth;
-                h = 360 * percent / 100;
-            }
-            if (this.hsl.h !== h) {
-                data = {
-                    h,
-                    s: this.hsl.s,
-                    l: this.hsl.l,
-                    a: this.hsl.a,
-                    source: 'rgb',
-                };
-            }
-        }
-        if (!data) {
-            return;
-        }
-        this.onChange.emit({ data, $event });
-    }
-}
-HueComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-hue',
-                template: `
-  <div class="color-hue color-hue-{{direction}}" [style.border-radius.px]="radius" [style.box-shadow]="shadow">
-    <div ngx-color-coordinates (coordinatesChange)="handleChange($event)" class="color-hue-container">
-      <div class="color-hue-pointer" [style.left]="left" [style.top]="top" *ngIf="!hidePointer">
-        <div class="color-hue-slider" [ngStyle]="pointer"></div>
-      </div>
-    </div>
-  </div>
-  `,
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-    .color-hue {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .color-hue-container {
-      margin: 0 2px;
-      position: relative;
-      height: 100%;
-    }
-    .color-hue-pointer {
-      position: absolute;
-    }
-    .color-hue-slider {
-      margin-top: 1px;
-      width: 4px;
-      border-radius: 1px;
-      height: 8px;
-      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
-      background: #fff;
-      transform: translateX(-2px);
-    }
-    .color-hue-horizontal {
-      background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0
-        33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-    }
-    .color-hue-vertical {
-      background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
-        #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
-    }
-  `]
-            },] }
-];
-HueComponent.propDecorators = {
-    hsl: [{ type: Input }],
-    pointer: [{ type: Input }],
-    radius: [{ type: Input }],
-    shadow: [{ type: Input }],
-    hidePointer: [{ type: Input }],
-    direction: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-class HueModule {
-}
-HueModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [HueComponent],
-                exports: [HueComponent],
-                imports: [CommonModule, CoordinatesModule],
-            },] }
-];
-
-class RaisedComponent {
-    constructor() {
-        this.zDepth = 1;
-        this.radius = 1;
-        this.background = '#fff';
-    }
-}
-RaisedComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-raised',
-                template: `
-  <div class="raised-wrap">
-    <div class="raised-bg zDepth-{{zDepth}}" [style.background]="background"></div>
-    <div class="raised-content">
-      <ng-content></ng-content>
-    </div>
-  </div>
-  `,
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-    .raised-wrap {
-      position: relative;
-      display: inline-block;
-    }
-    .raised-bg {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-    }
-    .raised-content {
-      position: relative;
-    }
-    .zDepth-0 {
-      box-shadow: none;
-    }
-    .zDepth-1 {
-      box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);
-    }
-    .zDepth-2 {
-      box-shadow: 0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2);
-    }
-    .zDepth-3 {
-      box-shadow: 0 17px 50px rgba(0,0,0,.19), 0 12px 15px rgba(0,0,0,.24);
-    }
-    .zDepth-4 {
-      box-shadow: 0 25px 55px rgba(0,0,0,.21), 0 16px 28px rgba(0,0,0,.22);
-    }
-    .zDepth-5 {
-      box-shadow: 0 40px 77px rgba(0,0,0,.22), 0 27px 24px rgba(0,0,0,.2);
-    }
-  `]
-            },] }
-];
-RaisedComponent.propDecorators = {
-    zDepth: [{ type: Input }],
-    radius: [{ type: Input }],
-    background: [{ type: Input }]
-};
-class RaisedModule {
-}
-RaisedModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [RaisedComponent],
-                exports: [RaisedComponent],
-                imports: [CommonModule],
-            },] }
-];
-
-class SaturationComponent {
-    constructor() {
-        this.onChange = new EventEmitter();
-    }
-    ngOnChanges() {
-        this.background = `hsl(${this.hsl.h}, 100%, 50%)`;
-        this.pointerTop = -(this.hsv.v * 100) + 1 + 100 + '%';
-        this.pointerLeft = this.hsv.s * 100 + '%';
-    }
-    handleChange({ top, left, containerHeight, containerWidth, $event }) {
-        if (left < 0) {
-            left = 0;
-        }
-        else if (left > containerWidth) {
-            left = containerWidth;
-        }
-        else if (top < 0) {
-            top = 0;
-        }
-        else if (top > containerHeight) {
-            top = containerHeight;
-        }
-        const saturation = left / containerWidth;
-        let bright = -(top / containerHeight) + 1;
-        bright = bright > 0 ? bright : 0;
-        bright = bright > 1 ? 1 : bright;
-        const data = {
-            h: this.hsl.h,
-            s: saturation,
-            v: bright,
-            a: this.hsl.a,
-            source: 'hsva',
-        };
-        this.onChange.emit({ data, $event });
-    }
-}
-SaturationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-saturation',
-                template: `
-  <div class="color-saturation" ngx-color-coordinates (coordinatesChange)="handleChange($event)" [style.background]="background">
-    <div class="saturation-white">
-      <div class="saturation-black"></div>
-      <div class="saturation-pointer" [ngStyle]="pointer" [style.top]="pointerTop" [style.left]="pointerLeft">
-        <div class="saturation-circle" [ngStyle]="circle"></div>
-      </div>
-    </div>
-  </div>
-  `,
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-    .saturation-white {
-      background: linear-gradient(to right, #fff, rgba(255,255,255,0));
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .saturation-black {
-      background: linear-gradient(to top, #000, rgba(0,0,0,0));
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .color-saturation {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .saturation-pointer {
-      position: absolute;
-      cursor: default;
-    }
-    .saturation-circle {
-      width: 4px;
-      height: 4px;
-      box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
-      border-radius: 50%;
-      cursor: hand;
-      transform: translate(-2px, -4px);
-    }
-  `]
-            },] }
-];
-SaturationComponent.propDecorators = {
-    hsl: [{ type: Input }],
-    hsv: [{ type: Input }],
-    radius: [{ type: Input }],
-    pointer: [{ type: Input }],
-    circle: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-class SaturationModule {
-}
-SaturationModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SaturationComponent],
-                exports: [SaturationComponent],
-                imports: [CommonModule, CoordinatesModule],
-            },] }
-];
-
-class SwatchComponent {
-    constructor() {
-        this.style = {};
-        this.focusStyle = {};
-        this.onClick = new EventEmitter();
-        this.onHover = new EventEmitter();
-        this.divStyles = {};
-        this.focusStyles = {};
-        this.inFocus = false;
-    }
-    ngOnInit() {
-        this.divStyles = Object.assign({ background: this.color }, this.style);
-    }
-    currentStyles() {
-        this.focusStyles = Object.assign(Object.assign({}, this.divStyles), this.focusStyle);
-        return this.focus || this.inFocus ? this.focusStyles : this.divStyles;
-    }
-    handleFocusOut() {
-        this.inFocus = false;
-    }
-    handleFocus() {
-        this.inFocus = true;
-    }
-    handleHover(hex, $event) {
-        this.onHover.emit({ hex, $event });
-    }
-    handleClick(hex, $event) {
-        this.onClick.emit({ hex, $event });
-    }
-}
-SwatchComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-swatch',
-                template: `
-    <div
-      class="swatch"
-      [ngStyle]="currentStyles()"
-      [attr.title]="color"
-      (click)="handleClick(color, $event)"
-      (keydown.enter)="handleClick(color, $event)"
-      (focus)="handleFocus()"
-      (blur)="handleFocusOut()"
-      (mouseover)="handleHover(color, $event)"
-      tabindex="0"
-    >
-      <ng-content></ng-content>
-      <color-checkboard
-        *ngIf="color === 'transparent'"
-        boxShadow="inset 0 0 0 1px rgba(0,0,0,0.1)"
-      ></color-checkboard>
-    </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [`
-      .swatch {
-        outline: none;
-        height: 100%;
-        width: 100%;
-        cursor: pointer;
-        position: relative;
-      }
-    `]
-            },] }
-];
-SwatchComponent.propDecorators = {
-    color: [{ type: Input }],
-    style: [{ type: Input }],
-    focusStyle: [{ type: Input }],
-    focus: [{ type: Input }],
-    onClick: [{ type: Output }],
-    onHover: [{ type: Output }]
-};
-class SwatchModule {
-}
-SwatchModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [SwatchComponent],
-                exports: [SwatchComponent],
-                imports: [CommonModule, CheckboardModule],
-            },] }
-];
-
-class ShadeComponent {
-    constructor() {
-        this.onChange = new EventEmitter();
-    }
-    ngOnChanges() {
-        this.gradient = {
-            background: `linear-gradient(to right,
-          hsl(${this.hsl.h}, 90%, 55%),
-          #000)`,
-        };
-        const hsv = new TinyColor(this.hsl).toHsv();
-        this.pointerLeft = 100 - (hsv.v * 100);
-    }
-    handleChange({ left, containerWidth, $event }) {
-        let data;
-        let v;
-        if (left < 0) {
-            v = 0;
-        }
-        else if (left > containerWidth) {
-            v = 1;
-        }
-        else {
-            v = Math.round((left * 100) / containerWidth) / 100;
-        }
-        const hsv = new TinyColor(this.hsl).toHsv();
-        if (hsv.v !== v) {
-            data = {
-                h: this.hsl.h,
-                s: 100,
-                v: 1 - v,
-                l: this.hsl.l,
-                a: this.hsl.a,
-                source: 'rgb',
-            };
-        }
-        if (!data) {
-            return;
-        }
-        this.onChange.emit({ data, $event });
-    }
-}
-ShadeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'color-shade',
-                template: `
-    <div class="shade" [style.border-radius]="radius">
-      <div
-        class="shade-gradient"
-        [ngStyle]="gradient"
-        [style.box-shadow]="shadow"
-        [style.border-radius]="radius"
-      ></div>
-      <div
-        ngx-color-coordinates
-        (coordinatesChange)="handleChange($event)"
-        class="shade-container"
-      >
-        <div
-          class="shade-pointer"
-          [style.left.%]="pointerLeft"
-          [style.top.%]="pointerTop"
-        >
-          <div class="shade-slider" [ngStyle]="pointer"></div>
-        </div>
-      </div>
-    </div>
-  `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [`
-    .shade {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .shade-gradient {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-    }
-    .shade-container {
-      position: relative;
-      height: 100%;
-      margin: 0 3px;
-    }
-    .shade-pointer {
-      position: absolute;
-    }
-    .shade-slider {
-      width: 4px;
-      border-radius: 1px;
-      height: 8px;
-      box-shadow: 0 0 2px rgba(0, 0, 0, .6);
-      background: #fff;
-      margin-top: 1px;
-      transform: translateX(-2px);
-    }
-  `]
-            },] }
-];
-ShadeComponent.propDecorators = {
-    hsl: [{ type: Input }],
-    rgb: [{ type: Input }],
-    pointer: [{ type: Input }],
-    shadow: [{ type: Input }],
-    radius: [{ type: Input }],
-    onChange: [{ type: Output }]
-};
-class ShadeModule {
-}
-ShadeModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ShadeComponent],
-                exports: [ShadeComponent],
-                imports: [CommonModule, CoordinatesModule],
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AlphaComponent, AlphaModule, CheckboardComponent, CheckboardModule, ColorWrap, ColorWrapModule, CoordinatesDirective, CoordinatesModule, EditableInputComponent, EditableInputModule, HueComponent, HueModule, RaisedComponent, RaisedModule, SaturationComponent, SaturationModule, ShadeComponent, ShadeModule, SwatchComponent, SwatchModule, getCheckerboard, getContrastingColor, isValidHex, render, simpleCheckForValidColor, toState };
-//# sourceMappingURL=ngx-color.js.map