@skyux/colorpicker 5.1.2 → 5.5.0

package/esm2015/lib/modules/colorpicker/colorpicker-input.directive.js

@@ -0,0 +1,264 @@
+import { Directive, ElementRef, forwardRef, HostListener, Injector, Input, Renderer2, } from '@angular/core';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, } from '@angular/forms';
+import { SkyLibResourcesService } from '@skyux/i18n';
+import { SkyColorpickerService } from './colorpicker.service';
+import { SkyColorpickerComponent } from './colorpicker.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./colorpicker.service";
+import * as i2 from "@skyux/i18n";
+// tslint:disable:no-forward-ref no-use-before-declare
+const SKY_COLORPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => SkyColorpickerInputDirective),
+    multi: true,
+};
+const SKY_COLORPICKER_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => SkyColorpickerInputDirective),
+    multi: true,
+};
+// tslint:enable
+const SKY_COLORPICKER_DEFAULT_COLOR = '#FFFFFF';
+/**
+ * Creates the colorpicker element and dropdown.
+ */
+export class SkyColorpickerInputDirective {
+    constructor(elementRef, renderer, service, resourcesService, injector) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.service = service;
+        this.resourcesService = resourcesService;
+        this.injector = injector;
+        /**
+         * This property is deprecated and does not affect the colorpicker.
+         * We recommend against using it.
+         * @deprecated
+         * @default "rgba"
+         */
+        this.returnFormat = 'rgba';
+        /**
+         * Specifies the format to use for the color when the colorpicker uses a native input
+         * element such as a standard text input or a button. This property accepts `rgba`, `hex`,
+         * or `hsla`, but we do not recommend using it because users never see or use its value.
+         * Instead, if you need to access this format value, see the demo for an example.
+         *@default "rgba"
+         */
+        this.outputFormat = 'rgba';
+        /**
+         * Specifies an array of colors to load as preset choices. The colorpicker displays the
+         * colors in a series of 12 boxes for users to select.
+         */
+        this.presetColors = ['#333', '#888', '#EFEFEF', '#FFF'];
+        /**
+         * Specifies the type of transparency to use in the transparency slider.
+         *@default "hex6"
+         */
+        this.alphaChannel = 'hex6';
+        /**
+         * Indicates whether to display a transparency slider for users to select transparency
+         * levels.
+         */
+        this.allowTransparency = true;
+        /*istanbul ignore next */
+        this._onChange = (_) => { };
+        /*istanbul ignore next */
+        this._onTouched = () => { };
+        this._validatorChange = () => { };
+    }
+    /**
+     * Specifies an initial color to load in the colorpicker. Use a reactive or
+     * template-driven form to set this value. This property is deprecated. As an alternative,
+     * we recommend the `formControlName` property on reactive forms or `ngModel` on
+     * template-driven forms. See the demo for examples.
+     * @deprecated
+     */
+    set initialColor(value) {
+        /* istanbul ignore else */
+        if (!this._initialColor && !this.modelValue) {
+            this.writeValue(value);
+        }
+        this._initialColor = value;
+    }
+    get initialColor() {
+        return this._initialColor || SKY_COLORPICKER_DEFAULT_COLOR;
+    }
+    changeInput(event) {
+        const value = event.target.value;
+        this.skyColorpickerInput.updatePickerValues(value);
+        this.skyColorpickerInput.backgroundColorForDisplay = value;
+    }
+    onChange(event) {
+        const newValue = event.target.value;
+        this.modelValue = this.formatter(newValue);
+        this._validatorChange();
+        this._onChange(this.modelValue);
+        this.writeModelValue(this.modelValue);
+    }
+    /* istanbul ignore next */
+    onBlur() {
+        /*istanbul ignore next */
+        this._onTouched();
+    }
+    ngOnInit() {
+        const element = this.elementRef.nativeElement;
+        this.renderer.addClass(element, 'sky-form-control');
+        this.skyColorpickerInput.initialColor = this.initialColor;
+        this.skyColorpickerInput.returnFormat = this.returnFormat;
+        this.pickerChangedSubscription =
+            this.skyColorpickerInput.selectedColorChanged.subscribe((newColor) => {
+                /* istanbul ignore else */
+                if (newColor) {
+                    this.modelValue = this.formatter(newColor);
+                    this.writeModelValue(this.modelValue);
+                }
+                this._onChange(newColor);
+            });
+        this.skyColorpickerInput.updatePickerValues(this.initialColor);
+        /* Sanity check */
+        /* istanbul ignore else */
+        if (!this._disabled) {
+            this.skyColorpickerInput.backgroundColorForDisplay = this.initialColor;
+        }
+        /// Set aria-label as default, if not set
+        if (!element.getAttribute('aria-label')) {
+            this.renderer.setAttribute(element, 'aria-label', this.getString('skyux_colorpicker_input_default_label'));
+        }
+        const typeAttr = element.getAttribute('type');
+        if (typeAttr && typeAttr === 'hidden') {
+            this.skyColorpickerInput.isVisible = false;
+        }
+        else {
+            this.skyColorpickerInput.isVisible = true;
+        }
+        element.setAttribute('readonly', 'true');
+        this.renderer.addClass(element, 'sky-colorpicker-input');
+    }
+    ngOnDestroy() {
+        this.pickerChangedSubscription.unsubscribe();
+    }
+    setColorPickerDefaults() {
+        this.skyColorpickerInput.setDialog(this, this.elementRef, this.initialColor, this.outputFormat, this.presetColors, this.alphaChannel, this.allowTransparency);
+    }
+    ngOnChanges() {
+        this._validatorChange();
+        this.skyColorpickerInput.returnFormat = this.returnFormat;
+        this.setColorPickerDefaults();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorChange = fn;
+    }
+    writeValue(value) {
+        if (this.skyColorpickerInput &&
+            value &&
+            value !== this.skyColorpickerInput.lastAppliedColor) {
+            this.modelValue = this.formatter(value);
+            this.writeModelValue(this.modelValue);
+            if (!this._initialColor) {
+                this._initialColor = value;
+                this.skyColorpickerInput.initialColor = value;
+            }
+            this.skyColorpickerInput.lastAppliedColor = value;
+            let control = this.injector.get(NgControl)
+                .control;
+            if (control) {
+                control.setValue(this.modelValue, { emitEvent: false });
+            }
+        }
+    }
+    validate(control) {
+        let value = control.value;
+        if (!value) {
+            return;
+        }
+        // Validation
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        this.skyColorpickerInput.disabled = isDisabled;
+        if (this._disabled) {
+            this.skyColorpickerInput.backgroundColorForDisplay = '#fff';
+        }
+        else {
+            this.skyColorpickerInput.backgroundColorForDisplay = this.modelValue.hex;
+        }
+    }
+    writeModelValue(model) {
+        const setElementValue = model.rgbaText;
+        const element = this.elementRef.nativeElement;
+        let output;
+        // tslint:disable-next-line:switch-default
+        switch (this.outputFormat) {
+            case 'rgba':
+                output = model.rgbaText;
+                break;
+            case 'hsla':
+                output = model.hslaText;
+                break;
+            case 'cmyk':
+                output = model.cmykText;
+                break;
+            case 'hex':
+                output = model.hex;
+                break;
+        }
+        this.skyColorpickerInput.updatePickerValues(output);
+        this.skyColorpickerInput.backgroundColorForDisplay = output;
+        this.renderer.setStyle(element, 'background-color', setElementValue);
+        this.renderer.setProperty(element, 'value', output);
+    }
+    formatter(color) {
+        if (color && typeof color !== 'string') {
+            return color;
+        }
+        let formatColor;
+        let hsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
+        formatColor = this.service.skyColorpickerOut(hsva);
+        return formatColor;
+    }
+    getString(key) {
+        // TODO: Need to implement the async `getString` method in a breaking change.
+        return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
+    }
+}
+SkyColorpickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColorpickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.SkyColorpickerService }, { token: i2.SkyLibResourcesService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+SkyColorpickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerInputDirective, selector: "[skyColorpickerInput]", inputs: { skyColorpickerInput: "skyColorpickerInput", initialColor: "initialColor", returnFormat: "returnFormat", outputFormat: "outputFormat", presetColors: "presetColors", alphaChannel: "alphaChannel", allowTransparency: "allowTransparency" }, host: { listeners: { "input": "changeInput($event)", "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColorpickerInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyColorpickerInput]',
+                    providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.SkyColorpickerService }, { type: i2.SkyLibResourcesService }, { type: i0.Injector }]; }, propDecorators: { skyColorpickerInput: [{
+                type: Input
+            }], initialColor: [{
+                type: Input
+            }], returnFormat: [{
+                type: Input
+            }], outputFormat: [{
+                type: Input
+            }], presetColors: [{
+                type: Input
+            }], alphaChannel: [{
+                type: Input
+            }], allowTransparency: [{
+                type: Input
+            }], changeInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+//# sourceMappingURL=colorpicker-input.directive.js.map

package/esm2015/lib/modules/colorpicker/colorpicker-input.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker-input.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker-input.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Directive,\n  ElementRef,\n  forwardRef,\n  HostListener,\n  Injector,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\n\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  Validator,\n  NgControl,\n  FormControl,\n} from '@angular/forms';\n\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { Subscription } from 'rxjs';\n\nimport { SkyColorpickerService } from './colorpicker.service';\n\nimport { SkyColorpickerComponent } from './colorpicker.component';\n\nimport { SkyColorpickerHsva } from './types/colorpicker-hsva';\n\nimport { SkyColorpickerOutput } from './types/colorpicker-output';\n\n// tslint:disable:no-forward-ref no-use-before-declare\nconst SKY_COLORPICKER_VALUE_ACCESSOR = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => SkyColorpickerInputDirective),\n  multi: true,\n};\n\nconst SKY_COLORPICKER_VALIDATOR = {\n  provide: NG_VALIDATORS,\n  useExisting: forwardRef(() => SkyColorpickerInputDirective),\n  multi: true,\n};\n// tslint:enable\nconst SKY_COLORPICKER_DEFAULT_COLOR = '#FFFFFF';\n\n/**\n * Creates the colorpicker element and dropdown.\n */\n@Directive({\n  selector: '[skyColorpickerInput]',\n  providers: [SKY_COLORPICKER_VALUE_ACCESSOR, SKY_COLORPICKER_VALIDATOR],\n})\nexport class SkyColorpickerInputDirective\n  implements OnInit, OnChanges, ControlValueAccessor, Validator, OnDestroy\n{\n  public pickerChangedSubscription: Subscription;\n\n  /**\n   * Creates the colorpicker element and dropdown. Place this attribute on an `input` element\n   * or `button` element, wrap the element in a `sky-colorpicker` component, and set the attribute\n   * to the instance of the `sky-colorpicker` component.\n   * @required\n   */\n  @Input()\n  public skyColorpickerInput: SkyColorpickerComponent;\n\n  /**\n   * Specifies an initial color to load in the colorpicker. Use a reactive or\n   * template-driven form to set this value. This property is deprecated. As an alternative,\n   * we recommend the `formControlName` property on reactive forms or `ngModel` on\n   * template-driven forms. See the demo for examples.\n   * @deprecated\n   */\n  @Input()\n  public set initialColor(value: string) {\n    /* istanbul ignore else */\n    if (!this._initialColor && !this.modelValue) {\n      this.writeValue(value);\n    }\n    this._initialColor = value;\n  }\n\n  public get initialColor(): string {\n    return this._initialColor || SKY_COLORPICKER_DEFAULT_COLOR;\n  }\n\n  /**\n   * This property is deprecated and does not affect the colorpicker.\n   * We recommend against using it.\n   * @deprecated\n   * @default \"rgba\"\n   */\n  @Input()\n  public returnFormat = 'rgba';\n\n  /**\n   * Specifies the format to use for the color when the colorpicker uses a native input\n   * element such as a standard text input or a button. This property accepts `rgba`, `hex`,\n   * or `hsla`, but we do not recommend using it because users never see or use its value.\n   * Instead, if you need to access this format value, see the demo for an example.\n   *@default \"rgba\"\n   */\n  @Input()\n  public outputFormat = 'rgba';\n\n  /**\n   * Specifies an array of colors to load as preset choices. The colorpicker displays the\n   * colors in a series of 12 boxes for users to select.\n   */\n  @Input()\n  public presetColors = ['#333', '#888', '#EFEFEF', '#FFF'];\n\n  /**\n   * Specifies the type of transparency to use in the transparency slider.\n   *@default \"hex6\"\n   */\n  @Input()\n  public alphaChannel = 'hex6';\n\n  /**\n   * Indicates whether to display a transparency slider for users to select transparency\n   * levels.\n   */\n  @Input()\n  public allowTransparency = true;\n\n  private _disabled: boolean;\n  private _initialColor: string;\n  private modelValue: SkyColorpickerOutput;\n\n  constructor(\n    private elementRef: ElementRef,\n    private renderer: Renderer2,\n    private service: SkyColorpickerService,\n    private resourcesService: SkyLibResourcesService,\n    private injector: Injector\n  ) {}\n\n  @HostListener('input', ['$event'])\n  public changeInput(event: any) {\n    const value = event.target.value;\n    this.skyColorpickerInput.updatePickerValues(value);\n    this.skyColorpickerInput.backgroundColorForDisplay = value;\n  }\n\n  @HostListener('change', ['$event'])\n  public onChange(event: any) {\n    const newValue = event.target.value;\n    this.modelValue = this.formatter(newValue);\n    this._validatorChange();\n    this._onChange(this.modelValue);\n    this.writeModelValue(this.modelValue);\n  }\n\n  /* istanbul ignore next */\n  @HostListener('blur')\n  public onBlur() {\n    /*istanbul ignore next */\n    this._onTouched();\n  }\n\n  public ngOnInit() {\n    const element = this.elementRef.nativeElement;\n\n    this.renderer.addClass(element, 'sky-form-control');\n    this.skyColorpickerInput.initialColor = this.initialColor;\n    this.skyColorpickerInput.returnFormat = this.returnFormat;\n\n    this.pickerChangedSubscription =\n      this.skyColorpickerInput.selectedColorChanged.subscribe(\n        (newColor: SkyColorpickerOutput) => {\n          /* istanbul ignore else */\n          if (newColor) {\n            this.modelValue = this.formatter(newColor);\n            this.writeModelValue(this.modelValue);\n          }\n          this._onChange(newColor);\n        }\n      );\n\n    this.skyColorpickerInput.updatePickerValues(this.initialColor);\n\n    /* Sanity check */\n    /* istanbul ignore else */\n    if (!this._disabled) {\n      this.skyColorpickerInput.backgroundColorForDisplay = this.initialColor;\n    }\n\n    /// Set aria-label as default, if not set\n    if (!element.getAttribute('aria-label')) {\n      this.renderer.setAttribute(\n        element,\n        'aria-label',\n        this.getString('skyux_colorpicker_input_default_label')\n      );\n    }\n\n    const typeAttr = element.getAttribute('type');\n    if (typeAttr && typeAttr === 'hidden') {\n      this.skyColorpickerInput.isVisible = false;\n    } else {\n      this.skyColorpickerInput.isVisible = true;\n    }\n\n    element.setAttribute('readonly', 'true');\n    this.renderer.addClass(element, 'sky-colorpicker-input');\n  }\n\n  public ngOnDestroy() {\n    this.pickerChangedSubscription.unsubscribe();\n  }\n\n  public setColorPickerDefaults() {\n    this.skyColorpickerInput.setDialog(\n      this,\n      this.elementRef,\n      this.initialColor,\n      this.outputFormat,\n      this.presetColors,\n      this.alphaChannel,\n      this.allowTransparency\n    );\n  }\n\n  public ngOnChanges(): void {\n    this._validatorChange();\n    this.skyColorpickerInput.returnFormat = this.returnFormat;\n    this.setColorPickerDefaults();\n  }\n\n  public registerOnChange(fn: (value: any) => any): void {\n    this._onChange = fn;\n  }\n  public registerOnTouched(fn: () => any): void {\n    this._onTouched = fn;\n  }\n  public registerOnValidatorChange(fn: () => void): void {\n    this._validatorChange = fn;\n  }\n\n  public writeValue(value: any) {\n    if (\n      this.skyColorpickerInput &&\n      value &&\n      value !== this.skyColorpickerInput.lastAppliedColor\n    ) {\n      this.modelValue = this.formatter(value);\n      this.writeModelValue(this.modelValue);\n\n      if (!this._initialColor) {\n        this._initialColor = value;\n        this.skyColorpickerInput.initialColor = value;\n      }\n      this.skyColorpickerInput.lastAppliedColor = value;\n      let control: FormControl = this.injector.get<NgControl>(NgControl)\n        .control as FormControl;\n      if (control) {\n        control.setValue(this.modelValue, { emitEvent: false });\n      }\n    }\n  }\n\n  public validate(control: AbstractControl): { [key: string]: any } {\n    let value = control.value;\n    if (!value) {\n      return;\n    }\n    // Validation\n  }\n\n  /**\n   * Implemented as part of ControlValueAccessor.\n   */\n  public setDisabledState(isDisabled: boolean): void {\n    this._disabled = isDisabled;\n    this.skyColorpickerInput.disabled = isDisabled;\n    if (this._disabled) {\n      this.skyColorpickerInput.backgroundColorForDisplay = '#fff';\n    } else {\n      this.skyColorpickerInput.backgroundColorForDisplay = this.modelValue.hex;\n    }\n  }\n\n  private writeModelValue(model: SkyColorpickerOutput) {\n    const setElementValue = model.rgbaText;\n    const element = this.elementRef.nativeElement;\n\n    let output: string;\n    // tslint:disable-next-line:switch-default\n    switch (this.outputFormat) {\n      case 'rgba':\n        output = model.rgbaText;\n        break;\n\n      case 'hsla':\n        output = model.hslaText;\n        break;\n\n      case 'cmyk':\n        output = model.cmykText;\n        break;\n\n      case 'hex':\n        output = model.hex;\n        break;\n    }\n\n    this.skyColorpickerInput.updatePickerValues(output);\n    this.skyColorpickerInput.backgroundColorForDisplay = output;\n\n    this.renderer.setStyle(element, 'background-color', setElementValue);\n    this.renderer.setProperty(element, 'value', output);\n  }\n\n  private formatter(color: any) {\n    if (color && typeof color !== 'string') {\n      return color;\n    }\n\n    let formatColor: SkyColorpickerOutput;\n    let hsva: SkyColorpickerHsva = this.service.stringToHsva(\n      color,\n      this.alphaChannel === 'hex8'\n    );\n\n    formatColor = this.service.skyColorpickerOut(hsva);\n\n    return formatColor;\n  }\n\n  private getString(key: string): string {\n    // TODO: Need to implement the async `getString` method in a breaking change.\n    return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);\n  }\n\n  /*istanbul ignore next */\n  private _onChange = (_: any) => {};\n  /*istanbul ignore next */\n  private _onTouched = () => {};\n  private _validatorChange = () => {};\n}\n"]}

package/esm2015/lib/modules/colorpicker/colorpicker-slider.directive.js

@@ -0,0 +1,98 @@
+// spell-checker:ignore Colorpicker
+import { Directive, Input, Output, ElementRef, EventEmitter, HostListener, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export class SkyColorpickerSliderDirective {
+    constructor(el) {
+        this.el = el;
+        this.newColorContrast = new EventEmitter();
+        this.listenerMove = (event) => {
+            this.move(event);
+        };
+        this.listenerStop = () => {
+            this.stop();
+        };
+    }
+    setCursor(event) {
+        let height = this.el.nativeElement.offsetHeight;
+        let width = this.el.nativeElement.offsetWidth;
+        let xAxis = Math.max(0, Math.min(this.getX(event), width));
+        let yAxis = Math.max(0, Math.min(this.getY(event), height));
+        if (this.xAxis !== undefined && this.yAxis !== undefined) {
+            this.newColorContrast.emit({
+                xCoordinate: xAxis / width,
+                yCoordinate: 1 - yAxis / height,
+                xAxis: this.xAxis,
+                yAxis: this.yAxis,
+            });
+        }
+        else {
+            this.newColorContrast.emit({
+                xCoordinate: xAxis / width,
+                maxRange: this.xAxis,
+            });
+        }
+        /* // No vertical bars
+         if (this.xAxis === undefined && this.yAxis !== undefined) {
+              this.newColorContrast.emit({ yCoordinate: yAxis / height, maxRange: this.yAxis });
+        } */
+    }
+    move(event) {
+        event.preventDefault();
+        this.setCursor(event);
+    }
+    start(event) {
+        this.setCursor(event);
+        document.addEventListener('mousemove', this.listenerMove);
+        document.addEventListener('touchmove', this.listenerMove);
+        document.addEventListener('mouseup', this.listenerStop);
+        document.addEventListener('touchend', this.listenerStop);
+    }
+    stop() {
+        document.removeEventListener('mousemove', this.listenerMove);
+        document.removeEventListener('touchmove', this.listenerMove);
+        document.removeEventListener('mouseup', this.listenerStop);
+        document.removeEventListener('touchend', this.listenerStop);
+    }
+    getX(event) {
+        /* Ignoring event.touches as tests are not run on a touch device. */
+        /* istanbul ignore next */
+        return ((event.pageX !== undefined ? event.pageX : event.touches[0].pageX) -
+            this.el.nativeElement.getBoundingClientRect().left -
+            window.pageXOffset);
+    }
+    getY(event) {
+        /* Ignoring event.touches as tests are not run on a touch device. */
+        /* istanbul ignore next */
+        return ((event.pageY !== undefined ? event.pageY : event.touches[0].pageY) -
+            this.el.nativeElement.getBoundingClientRect().top -
+            window.pageYOffset);
+    }
+}
+SkyColorpickerSliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColorpickerSliderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SkyColorpickerSliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerSliderDirective, selector: "[skyColorpickerSlider]", inputs: { skyColorpickerSlider: "skyColorpickerSlider", color: "color", xAxis: "xAxis", yAxis: "yAxis" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "touchstart": "start($event)", "mousedown": "start($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColorpickerSliderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyColorpickerSlider]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { newColorContrast: [{
+                type: Output
+            }], skyColorpickerSlider: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], xAxis: [{
+                type: Input
+            }], yAxis: [{
+                type: Input
+            }], start: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+//# sourceMappingURL=colorpicker-slider.directive.js.map

package/esm2015/lib/modules/colorpicker/colorpicker-slider.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker-slider.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker-slider.directive.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,UAAU,EACV,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC;;AAIvB;;GAEG;AAIH,MAAM,OAAO,6BAA6B;IAexC,YAAoB,EAAc;QAAd,OAAE,GAAF,EAAE,CAAY;QAb3B,qBAAgB,GAAG,IAAI,YAAY,EAA4B,CAAC;QAcrE,IAAI,CAAC,YAAY,GAAG,CAAC,KAAU,EAAE,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,CAAC;QACF,IAAI,CAAC,YAAY,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC;IACJ,CAAC;IAEM,SAAS,CAAC,KAAU;QACzB,IAAI,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC;QAChD,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;QAC9C,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;QAC3D,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;QAC5D,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YACxD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,WAAW,EAAE,KAAK,GAAG,KAAK;gBAC1B,WAAW,EAAE,CAAC,GAAG,KAAK,GAAG,MAAM;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;aACU,CAAC,CAAC;SAChC;aAAM;YACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,WAAW,EAAE,KAAK,GAAG,KAAK;gBAC1B,QAAQ,EAAE,IAAI,CAAC,KAAK;aACO,CAAC,CAAC;SAChC;QACD;;;YAGI;IACN,CAAC;IAEM,IAAI,CAAC,KAAU;QACpB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAGM,KAAK,CAAC,KAAiB;QAC5B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACtB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3D,CAAC;IAEM,IAAI;QACT,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9D,CAAC;IAEM,IAAI,CAAC,KAAU;QACpB,oEAAoE;QACpE,0BAA0B;QAC1B,OAAO,CACL,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAClE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,IAAI;YAClD,MAAM,CAAC,WAAW,CACnB,CAAC;IACJ,CAAC;IACM,IAAI,CAAC,KAAU;QACpB,oEAAoE;QACpE,0BAA0B;QAC1B,OAAO,CACL,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAClE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG;YACjD,MAAM,CAAC,WAAW,CACnB,CAAC;IACJ,CAAC;;2HAtFU,6BAA6B;+GAA7B,6BAA6B;4FAA7B,6BAA6B;kBAHzC,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;iBACnC;iGAGQ,gBAAgB;sBADtB,MAAM;gBAGA,oBAAoB;sBAD1B,KAAK;gBAGC,KAAK;sBADX,KAAK;gBAGC,KAAK;sBADX,KAAK;gBAGC,KAAK;sBADX,KAAK;gBA6CC,KAAK;sBAFX,YAAY;uBAAC,YAAY,EAAE,CAAC,QAAQ,CAAC;;sBACrC,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["// spell-checker:ignore Colorpicker\nimport {\n  Directive,\n  Input,\n  Output,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n} from '@angular/core';\n\nimport { SkyColorpickerChangeAxis } from './types/colorpicker-axis';\n\n/**\n * @internal\n */\n@Directive({\n  selector: '[skyColorpickerSlider]',\n})\nexport class SkyColorpickerSliderDirective {\n  @Output()\n  public newColorContrast = new EventEmitter<SkyColorpickerChangeAxis>();\n  @Input()\n  public skyColorpickerSlider: string;\n  @Input()\n  public color: string;\n  @Input()\n  public xAxis: number;\n  @Input()\n  public yAxis: number;\n\n  private listenerMove: any;\n  private listenerStop: any;\n\n  constructor(private el: ElementRef) {\n    this.listenerMove = (event: any) => {\n      this.move(event);\n    };\n    this.listenerStop = () => {\n      this.stop();\n    };\n  }\n\n  public setCursor(event: any) {\n    let height = this.el.nativeElement.offsetHeight;\n    let width = this.el.nativeElement.offsetWidth;\n    let xAxis = Math.max(0, Math.min(this.getX(event), width));\n    let yAxis = Math.max(0, Math.min(this.getY(event), height));\n    if (this.xAxis !== undefined && this.yAxis !== undefined) {\n      this.newColorContrast.emit({\n        xCoordinate: xAxis / width,\n        yCoordinate: 1 - yAxis / height,\n        xAxis: this.xAxis,\n        yAxis: this.yAxis,\n      } as SkyColorpickerChangeAxis);\n    } else {\n      this.newColorContrast.emit({\n        xCoordinate: xAxis / width,\n        maxRange: this.xAxis,\n      } as SkyColorpickerChangeAxis);\n    }\n    /* // No vertical bars\n     if (this.xAxis === undefined && this.yAxis !== undefined) {\n          this.newColorContrast.emit({ yCoordinate: yAxis / height, maxRange: this.yAxis });\n    } */\n  }\n\n  public move(event: any) {\n    event.preventDefault();\n    this.setCursor(event);\n  }\n  @HostListener('touchstart', ['$event'])\n  @HostListener('mousedown', ['$event'])\n  public start(event: MouseEvent) {\n    this.setCursor(event);\n    document.addEventListener('mousemove', this.listenerMove);\n    document.addEventListener('touchmove', this.listenerMove);\n    document.addEventListener('mouseup', this.listenerStop);\n    document.addEventListener('touchend', this.listenerStop);\n  }\n\n  public stop() {\n    document.removeEventListener('mousemove', this.listenerMove);\n    document.removeEventListener('touchmove', this.listenerMove);\n    document.removeEventListener('mouseup', this.listenerStop);\n    document.removeEventListener('touchend', this.listenerStop);\n  }\n\n  public getX(event: any): number {\n    /* Ignoring event.touches as tests are not run on a touch device. */\n    /* istanbul ignore next */\n    return (\n      (event.pageX !== undefined ? event.pageX : event.touches[0].pageX) -\n      this.el.nativeElement.getBoundingClientRect().left -\n      window.pageXOffset\n    );\n  }\n  public getY(event: any): number {\n    /* Ignoring event.touches as tests are not run on a touch device. */\n    /* istanbul ignore next */\n    return (\n      (event.pageY !== undefined ? event.pageY : event.touches[0].pageY) -\n      this.el.nativeElement.getBoundingClientRect().top -\n      window.pageYOffset\n    );\n  }\n}\n"]}

package/esm2015/lib/modules/colorpicker/colorpicker-text.directive.js

@@ -0,0 +1,51 @@
+// spell-checker:ignore Colorpicker
+import { Directive, Input, Output, EventEmitter, HostListener, } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export class SkyColorpickerTextDirective {
+    constructor() {
+        this.newColorContrast = new EventEmitter();
+    }
+    changeInput(event) {
+        let element = event.target;
+        let elementValue = parseFloat(element.value);
+        if (this.maxRange === undefined) {
+            this.newColorContrast.emit({
+                color: element.value,
+                colorValue: undefined,
+                maxRange: undefined,
+            });
+        }
+        if (!isNaN(elementValue) &&
+            elementValue >= 0 &&
+            elementValue <= this.maxRange) {
+            this.newColorContrast.emit({
+                color: this.color,
+                colorValue: elementValue,
+                maxRange: this.maxRange,
+            });
+        }
+    }
+}
+SkyColorpickerTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColorpickerTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+SkyColorpickerTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SkyColorpickerTextDirective, selector: "[skyColorpickerText]", inputs: { skyColorpickerText: "skyColorpickerText", color: "color", maxRange: "maxRange" }, outputs: { newColorContrast: "newColorContrast" }, host: { listeners: { "input": "changeInput($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyColorpickerTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyColorpickerText]',
+                }]
+        }], propDecorators: { newColorContrast: [{
+                type: Output
+            }], skyColorpickerText: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], maxRange: [{
+                type: Input
+            }], changeInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+//# sourceMappingURL=colorpicker-text.directive.js.map

package/esm2015/lib/modules/colorpicker/colorpicker-text.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker-text.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker-text.directive.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC;;AAIvB;;GAEG;AAIH,MAAM,OAAO,2BAA2B;IAHxC;QAKS,qBAAgB,GAAG,IAAI,YAAY,EAA6B,CAAC;KAgCzE;IAvBQ,WAAW,CAAC,KAAY;QAC7B,IAAI,OAAO,GAAuC,KAAK,CAAC,MAAM,CAAC;QAC/D,IAAI,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC7C,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;YAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,UAAU,EAAE,SAAS;gBACrB,QAAQ,EAAE,SAAS;aACS,CAAC,CAAC;SACjC;QAED,IACE,CAAC,KAAK,CAAC,YAAY,CAAC;YACpB,YAAY,IAAI,CAAC;YACjB,YAAY,IAAI,IAAI,CAAC,QAAQ,EAC7B;YACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,YAAY;gBACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACK,CAAC,CAAC;SACjC;IACH,CAAC;;yHAjCU,2BAA2B;6GAA3B,2BAA2B;4FAA3B,2BAA2B;kBAHvC,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;iBACjC;8BAGQ,gBAAgB;sBADtB,MAAM;gBAGA,kBAAkB;sBADxB,KAAK;gBAGC,KAAK;sBADX,KAAK;gBAGC,QAAQ;sBADd,KAAK;gBAIC,WAAW;sBADjB,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC","sourcesContent":["// spell-checker:ignore Colorpicker\nimport {\n  Directive,\n  Input,\n  Output,\n  EventEmitter,\n  HostListener,\n} from '@angular/core';\n\nimport { SkyColorpickerChangeColor } from './types/colorpicker-color';\n\n/**\n * @internal\n */\n@Directive({\n  selector: '[skyColorpickerText]',\n})\nexport class SkyColorpickerTextDirective {\n  @Output()\n  public newColorContrast = new EventEmitter<SkyColorpickerChangeColor>();\n  @Input()\n  public skyColorpickerText: any;\n  @Input()\n  public color: string;\n  @Input()\n  public maxRange: number;\n\n  @HostListener('input', ['$event'])\n  public changeInput(event: Event) {\n    let element: HTMLInputElement = <HTMLInputElement>event.target;\n    let elementValue = parseFloat(element.value);\n    if (this.maxRange === undefined) {\n      this.newColorContrast.emit({\n        color: element.value,\n        colorValue: undefined,\n        maxRange: undefined,\n      } as SkyColorpickerChangeColor);\n    }\n\n    if (\n      !isNaN(elementValue) &&\n      elementValue >= 0 &&\n      elementValue <= this.maxRange\n    ) {\n      this.newColorContrast.emit({\n        color: this.color,\n        colorValue: elementValue,\n        maxRange: this.maxRange,\n      } as SkyColorpickerChangeColor);\n    }\n  }\n}\n"]}