@skyux/colorpicker 5.5.0 → 5.6.0

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

@@ -1,8 +1,8 @@
-import { Directive, ElementRef, forwardRef, HostListener, Injector, Input, Renderer2, } from '@angular/core';
+import { Directive, ElementRef, HostListener, Injector, Input, Renderer2, forwardRef, } 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 { SkyColorpickerService } from './colorpicker.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./colorpicker.service";
 import * as i2 from "@skyux/i18n";
@@ -164,7 +164,7 @@ export class SkyColorpickerInputDirective {
                 this.skyColorpickerInput.initialColor = value;
             }
             this.skyColorpickerInput.lastAppliedColor = value;
-            let control = this.injector.get(NgControl)
+            const control = this.injector.get(NgControl)
                 .control;
             if (control) {
                 control.setValue(this.modelValue, { emitEvent: false });
@@ -172,7 +172,7 @@ export class SkyColorpickerInputDirective {
         }
     }
     validate(control) {
-        let value = control.value;
+        const value = control.value;
         if (!value) {
             return;
         }
@@ -220,7 +220,7 @@ export class SkyColorpickerInputDirective {
             return color;
         }
         let formatColor;
-        let hsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
+        const hsva = this.service.stringToHsva(color, this.alphaChannel === 'hex8');
         formatColor = this.service.skyColorpickerOut(hsva);
         return formatColor;
     }

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

@@ -1 +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"]}
+{"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  HostListener,\n  Injector,\n  Input,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n  forwardRef,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  FormControl,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  NgControl,\n  Validator,\n} from '@angular/forms';\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { Subscription } from 'rxjs';\n\nimport { SkyColorpickerComponent } from './colorpicker.component';\nimport { SkyColorpickerService } from './colorpicker.service';\nimport { SkyColorpickerHsva } from './types/colorpicker-hsva';\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      const 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    const 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    const 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

@@ -1,5 +1,5 @@
 // spell-checker:ignore Colorpicker
-import { Directive, Input, Output, ElementRef, EventEmitter, HostListener, } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output, } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * @internal
@@ -16,10 +16,10 @@ export class SkyColorpickerSliderDirective {
         };
     }
     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));
+        const height = this.el.nativeElement.offsetHeight;
+        const width = this.el.nativeElement.offsetWidth;
+        const xAxis = Math.max(0, Math.min(this.getX(event), width));
+        const yAxis = Math.max(0, Math.min(this.getY(event), height));
         if (this.xAxis !== undefined && this.yAxis !== undefined) {
             this.newColorContrast.emit({
                 xCoordinate: xAxis / width,

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

@@ -1 +1 @@
-{"version":3,"file":"colorpicker-slider.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker-slider.directive.ts"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"colorpicker-slider.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker-slider.directive.ts"],"names":[],"mappings":"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","sourcesContent":["// spell-checker:ignore Colorpicker\nimport {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  Output,\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    const height = this.el.nativeElement.offsetHeight;\n    const width = this.el.nativeElement.offsetWidth;\n    const xAxis = Math.max(0, Math.min(this.getX(event), width));\n    const 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

@@ -1,5 +1,5 @@
 // spell-checker:ignore Colorpicker
-import { Directive, Input, Output, EventEmitter, HostListener, } from '@angular/core';
+import { Directive, EventEmitter, HostListener, Input, Output, } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * @internal
@@ -9,8 +9,8 @@ export class SkyColorpickerTextDirective {
         this.newColorContrast = new EventEmitter();
     }
     changeInput(event) {
-        let element = event.target;
-        let elementValue = parseFloat(element.value);
+        const element = event.target;
+        const elementValue = parseFloat(element.value);
         if (this.maxRange === undefined) {
             this.newColorContrast.emit({
                 color: element.value,

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

@@ -1 +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"]}
+{"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,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;;AAIvB;;GAEG;AAIH,MAAM,OAAO,2BAA2B;IAHxC;QAKS,qBAAgB,GAAG,IAAI,YAAY,EAA6B,CAAC;KAgCzE;IAvBQ,WAAW,CAAC,KAAY;QAC7B,MAAM,OAAO,GAAqB,KAAK,CAAC,MAA0B,CAAC;QACnE,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC/C,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  EventEmitter,\n  HostListener,\n  Input,\n  Output,\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    const element: HTMLInputElement = event.target as HTMLInputElement;\n    const 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"]}

package/esm2015/lib/modules/colorpicker/colorpicker.component.js

@@ -1,11 +1,11 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Optional, Output, TemplateRef, ViewChild, ViewEncapsulation, } from '@angular/core';
-import { SkyAffixAutoFitContext, SkyAffixService, SkyOverlayService, SkyCoreAdapterService, } from '@skyux/core';
+import { SkyAffixAutoFitContext, SkyAffixService, SkyCoreAdapterService, SkyOverlayService, } from '@skyux/core';
 import { SkyThemeService } from '@skyux/theme';
-import { fromEvent, Subject } from 'rxjs';
+import { Subject, fromEvent } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { SkyColorpickerMessageType } from './types/colorpicker-message-type';
+import { SliderDimension, SliderPosition } from './colorpicker-classes';
 import { SkyColorpickerService } from './colorpicker.service';
-import { SliderPosition, SliderDimension } from './colorpicker-classes';
+import { SkyColorpickerMessageType } from './types/colorpicker-message-type';
 import * as i0 from "@angular/core";
 import * as i1 from "@skyux/core";
 import * as i2 from "./colorpicker.service";
@@ -196,19 +196,19 @@ export class SkyColorpickerComponent {
         this.update();
     }
     set red(change) {
-        let rgba = this.service.hsvaToRgba(this.hsva);
+        const rgba = this.service.hsvaToRgba(this.hsva);
         rgba.red = change.colorValue / change.maxRange;
         this.hsva = this.service.rgbaToHsva(rgba);
         this.update();
     }
     set green(change) {
-        let rgba = this.service.hsvaToRgba(this.hsva);
+        const rgba = this.service.hsvaToRgba(this.hsva);
         rgba.green = change.colorValue / change.maxRange;
         this.hsva = this.service.rgbaToHsva(rgba);
         this.update();
     }
     set blue(change) {
-        let rgba = this.service.hsvaToRgba(this.hsva);
+        const rgba = this.service.hsvaToRgba(this.hsva);
         rgba.blue = change.colorValue / change.maxRange;
         this.hsva = this.service.rgbaToHsva(rgba);
         this.update();
@@ -230,17 +230,17 @@ export class SkyColorpickerComponent {
         this.update();
     }
     update() {
-        let hsla = this.service.hsva2hsla(this.hsva);
-        let dHsla = this.service.denormalizeHSLA(hsla);
-        let rgba = this.service.hsvaToRgba(this.hsva);
-        let dRgba = this.service.denormalizeRGBA(rgba);
-        let hsva = {
+        const hsla = this.service.hsva2hsla(this.hsva);
+        const dHsla = this.service.denormalizeHSLA(hsla);
+        const rgba = this.service.hsvaToRgba(this.hsva);
+        const dRgba = this.service.denormalizeRGBA(rgba);
+        const hsva = {
             hue: this.hsva.hue,
             saturation: 1,
             value: 1,
             alpha: 1,
         };
-        let hueRgba = this.service.denormalizeRGBA(this.service.hsvaToRgba(hsva));
+        const hueRgba = this.service.denormalizeRGBA(this.service.hsvaToRgba(hsva));
         this.hslaText = dHsla;
         this.rgbaText = dRgba;
         this.hexText = this.service.hexText(dRgba, this.alphaChannel === 'hex8');

package/esm2015/lib/modules/colorpicker/colorpicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorpicker.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.component.ts","../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport {\n  SkyAffixAutoFitContext,\n  SkyAffixer,\n  SkyAffixService,\n  SkyOverlayInstance,\n  SkyOverlayService,\n  SkyCoreAdapterService,\n} from '@skyux/core';\n\nimport { SkyThemeService } from '@skyux/theme';\n\nimport { fromEvent, Subject } from 'rxjs';\n\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyColorpickerChangeAxis } from './types/colorpicker-axis';\n\nimport { SkyColorpickerChangeColor } from './types/colorpicker-color';\n\nimport { SkyColorpickerHsla } from './types/colorpicker-hsla';\n\nimport { SkyColorpickerHsva } from './types/colorpicker-hsva';\n\nimport { SkyColorpickerMessage } from './types/colorpicker-message';\n\nimport { SkyColorpickerMessageType } from './types/colorpicker-message-type';\n\nimport { SkyColorpickerOutput } from './types/colorpicker-output';\n\nimport { SkyColorpickerRgba } from './types/colorpicker-rgba';\n\nimport { SkyColorpickerResult } from './types/colorpicker-result';\n\nimport { SkyColorpickerService } from './colorpicker.service';\n\nimport { SliderPosition, SliderDimension } from './colorpicker-classes';\n\nlet componentIdIndex = 0;\n\n/**\n * Provides a SKY UX-themed replacement for the HTML `input` element with `type=\"color\"`.\n * The value that users select is driven through the `ngModel` attribute specified on\n * the `input` element.\n */\n@Component({\n  selector: 'sky-colorpicker',\n  templateUrl: './colorpicker.component.html',\n  styleUrls: ['./colorpicker.component.scss'],\n  providers: [SkyColorpickerService],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyColorpickerComponent implements OnInit, OnDestroy {\n  /**\n   * Specifies the name of the [Font Awesome 4.7](https://fontawesome.com/v4.7/icons/) icon to overlay on top of the picker. Do not specify the `fa fa-` classes.\n   * @internal\n   */\n  @Input()\n  public pickerButtonIcon?: string;\n\n  /**\n   * Specifies the type of icon to display. Specifying `fa` will display a Font Awesome icon, while specifying `skyux` will display an icon from the custom SKY UX icon font. Note that the custom SKY UX icon font is currently in beta.\n   * @internal\n   */\n  @Input()\n  public pickerButtonIconType?: string = 'fa';\n\n  /**\n   * Specifies an ARIA label for the colorpicker. This sets the colorpicker's `aria-label` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility)\n   * when the colorpicker does not include a visible label. If the colorpicker includes a visible label, use `labelledBy` instead.\n   * @default \"Select color value\"\n   */\n  @Input()\n  public label: string;\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that labels the\n   * colorpicker. This sets the colorpicker's `aria-labelledby` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility).\n   * If the colorpicker does not include a visible label, use `label` instead.\n   */\n  @Input()\n  public labelledBy: string;\n\n  /**\n   * Fires when users select a color in the colorpicker.\n   */\n  @Output()\n  public selectedColorChanged = new EventEmitter<SkyColorpickerOutput>();\n\n  /**\n   * Fires when users select **Apply** in the colorpicker to apply a color.\n   */\n  @Output()\n  public selectedColorApplied = new EventEmitter<SkyColorpickerResult>();\n\n  /**\n   * Provides an observable to send commands to the colorpicker. The commands should\n   * respect the `SkyColorPickerMessage` type.\n   */\n  @Input()\n  public messageStream = new Subject<SkyColorpickerMessage>();\n\n  /**\n   * Indicates whether to display a reset button to let users return to the default color.\n   */\n  @Input()\n  public showResetButton = true;\n\n  public set disabled(value: boolean) {\n    this._disabled = value;\n    this.changeDetector.markForCheck();\n  }\n\n  public get disabled(): boolean {\n    return this._disabled;\n  }\n\n  public idIndex: number;\n  public skyColorpickerHexId: string;\n  public skyColorpickerRedId: string;\n  public skyColorpickerGreenId: string;\n  public skyColorpickerBlueId: string;\n  public skyColorpickerAlphaId: string;\n  public alphaChannel: string;\n  public allowTransparency: boolean;\n  public alphaSliderColor: string;\n  public arrowTop: number;\n  public format: number;\n  public hexText: string;\n  public hslaText: SkyColorpickerHsla;\n  public hueSliderColor: string;\n  public outputFormat: string;\n  public presetColors: Array<string>;\n  public returnFormat: string;\n  public rgbaText: SkyColorpickerRgba;\n  public selectedColor: SkyColorpickerOutput;\n  public slider: SliderPosition;\n  public iconColor: string;\n  public initialColor: string;\n  public lastAppliedColor: string;\n  public isPickerVisible: boolean;\n\n  public set backgroundColorForDisplay(value: string) {\n    this._backgroundColorForDisplay = value;\n    if (this.pickerButtonIcon) {\n      this.iconColor = this.getAccessibleIconColor(this.selectedColor);\n    }\n  }\n\n  public get backgroundColorForDisplay(): string {\n    /* istanbul ignore next */\n    return this._backgroundColorForDisplay || '#fff';\n  }\n\n  public colorpickerId: string;\n\n  public isOpen: boolean = false;\n\n  public isVisible: boolean = true;\n\n  public triggerButtonId: string;\n\n  @ViewChild('colorpickerTemplateRef', {\n    read: TemplateRef,\n  })\n  private colorpickerTemplateRef: TemplateRef<any>;\n\n  @ViewChild('triggerButtonRef', {\n    read: ElementRef,\n  })\n  private triggerButtonRef: ElementRef;\n\n  @ViewChild('colorpickerRef', {\n    read: ElementRef,\n  })\n  private set colorpickerRef(value: ElementRef) {\n    if (value) {\n      this._colorpickerRef = value;\n      this.destroyAffixer();\n\n      this.removePickerEventListeners();\n      this.pickerUnsubscribe = new Subject<void>();\n\n      // Ensure the colorpicker has fully rendered before adding the affixer. Added to address a\n      // race condition when running under production conditions.\n      setTimeout(() => {\n        this.createAffixer();\n        this.isPickerVisible = true;\n\n        this.coreAdapter.getFocusableChildrenAndApplyFocus(\n          value,\n          '.sky-colorpicker',\n          false\n        );\n        this.changeDetector.markForCheck();\n      });\n    }\n  }\n\n  private get colorpickerRef(): ElementRef {\n    return this._colorpickerRef;\n  }\n\n  private hsva: SkyColorpickerHsva;\n  private sliderDimMax: SliderDimension;\n  private ngUnsubscribe = new Subject();\n\n  private affixer: SkyAffixer;\n\n  private overlay: SkyOverlayInstance;\n\n  private pickerUnsubscribe: Subject<void>;\n\n  private _backgroundColorForDisplay: string;\n\n  private _colorpickerRef: ElementRef;\n\n  private _disabled: boolean = false;\n\n  constructor(\n    private affixService: SkyAffixService,\n    private changeDetector: ChangeDetectorRef,\n    private coreAdapter: SkyCoreAdapterService,\n    private overlayService: SkyOverlayService,\n    private service: SkyColorpickerService,\n    @Optional() private themeSvc?: SkyThemeService\n  ) {\n    componentIdIndex++;\n\n    this.idIndex = componentIdIndex;\n    this.skyColorpickerRedId = 'sky-colorpicker-red-' + this.idIndex;\n    this.skyColorpickerHexId = 'sky-colorpicker-hex-' + this.idIndex;\n    this.skyColorpickerRedId = 'sky-colorpicker-red-' + this.idIndex;\n    this.skyColorpickerGreenId = 'sky-colorpicker-green-' + this.idIndex;\n    this.skyColorpickerBlueId = 'sky-colorpicker-blue-' + this.idIndex;\n    this.skyColorpickerAlphaId = 'sky-colorpicker-alpha-' + this.idIndex;\n    this.colorpickerId = `sky-colorpicker-${this.idIndex}`;\n    this.triggerButtonId = `sky-colorpicker-button-${this.idIndex}`;\n  }\n\n  public setDialog(\n    instance: any,\n    elementRef: ElementRef,\n    color: any,\n    outputFormat: string,\n    presetColors: Array<string>,\n    alphaChannel: string,\n    allowTransparency: boolean\n  ): void {\n    this.initialColor = color;\n    this.outputFormat = outputFormat;\n    this.presetColors = presetColors;\n    this.alphaChannel = alphaChannel;\n    this.allowTransparency = allowTransparency;\n\n    if (this.outputFormat === 'rgba') {\n      this.format = 1;\n    } else if (this.outputFormat === 'hsla') {\n      this.format = 2;\n    } else {\n      this.format = 0;\n    }\n  }\n\n  public ngOnInit(): void {\n    this.sliderDimMax = new SliderDimension(182, 270, 170, 182);\n    this.slider = new SliderPosition(0, 0, 0, 0);\n    this.messageStream\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((message: SkyColorpickerMessage) => {\n        this.handleIncomingMessages(message);\n      });\n\n    this.addTriggerButtonEventListeners();\n\n    /* istanbul ignore else */\n    if (this.themeSvc) {\n      this.themeSvc.settingsChange\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((themeSettings) => {\n          /* istanbul ignore next */\n          const themeName = themeSettings.currentSettings?.theme?.name;\n\n          // Hue/alpha slider bars have different widths in Modern theme.\n          /* istanbul ignore if */\n          if (themeName === 'modern') {\n            this.sliderDimMax = new SliderDimension(174, 270, 170, 174);\n          } else {\n            this.sliderDimMax = new SliderDimension(182, 270, 170, 182);\n          }\n          this.updateSlider();\n        });\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n    this.removePickerEventListeners();\n    this.destroyAffixer();\n    this.destroyOverlay();\n  }\n\n  public onTriggerButtonClick(): void {\n    this.sendMessage(SkyColorpickerMessageType.Open);\n  }\n\n  public closePicker(): void {\n    this.destroyAffixer();\n    this.destroyOverlay();\n    this.removePickerEventListeners();\n    this.triggerButtonRef.nativeElement.focus();\n    this.isOpen = false;\n  }\n\n  public onApplyColorClick(): void {\n    this.selectedColorChanged.emit(this.selectedColor);\n    this.selectedColorApplied.emit({ color: this.selectedColor });\n    this.lastAppliedColor = this.selectedColor.rgbaText;\n    this.updatePickerValues(this.lastAppliedColor);\n    this.backgroundColorForDisplay = this.selectedColor.rgbaText;\n    this.closePicker();\n  }\n\n  public onCancelClick(): void {\n    // Revert picker values back to previous color.\n    this.updatePickerValues(this.backgroundColorForDisplay);\n    this.closePicker();\n  }\n\n  public onPresetClick(value: string): void {\n    this.updatePickerValues(value);\n  }\n\n  public onResetClick(): void {\n    this.sendMessage(SkyColorpickerMessageType.Reset);\n  }\n\n  public updatePickerValues(value: string): void {\n    const hsva = this.getHsvaValue(value);\n    if (hsva) {\n      this.hsva = hsva;\n      this.update();\n    }\n  }\n\n  public set hue(change: SkyColorpickerChangeAxis) {\n    this.hsva.hue = change.xCoordinate / change.maxRange;\n    this.update();\n  }\n\n  public set red(change: SkyColorpickerChangeColor) {\n    let rgba = this.service.hsvaToRgba(this.hsva);\n    rgba.red = change.colorValue / change.maxRange;\n    this.hsva = this.service.rgbaToHsva(rgba);\n    this.update();\n  }\n\n  public set green(change: SkyColorpickerChangeColor) {\n    let rgba = this.service.hsvaToRgba(this.hsva);\n    rgba.green = change.colorValue / change.maxRange;\n    this.hsva = this.service.rgbaToHsva(rgba);\n    this.update();\n  }\n\n  public set blue(change: SkyColorpickerChangeColor) {\n    let rgba = this.service.hsvaToRgba(this.hsva);\n    rgba.blue = change.colorValue / change.maxRange;\n    this.hsva = this.service.rgbaToHsva(rgba);\n    this.update();\n  }\n\n  public set alphaAxis(change: SkyColorpickerChangeAxis) {\n    this.hsva.alpha = change.xCoordinate / change.maxRange;\n    this.update();\n  }\n\n  public set alphaColor(change: SkyColorpickerChangeColor) {\n    this.hsva.alpha = change.colorValue / change.maxRange;\n    this.update();\n  }\n\n  public set hex(change: SkyColorpickerChangeColor) {\n    this.updatePickerValues(change.color);\n  }\n\n  public set saturationAndLightness(value: SkyColorpickerChangeAxis) {\n    this.hsva.saturation = value.xCoordinate / value.xAxis;\n    this.hsva.value = value.yCoordinate / value.yAxis;\n    this.update();\n  }\n\n  public update(): void {\n    let hsla: SkyColorpickerHsla = this.service.hsva2hsla(this.hsva);\n    let dHsla: SkyColorpickerHsla = this.service.denormalizeHSLA(hsla);\n    let rgba: SkyColorpickerRgba = this.service.hsvaToRgba(this.hsva);\n    let dRgba: SkyColorpickerRgba = this.service.denormalizeRGBA(rgba);\n\n    let hsva: SkyColorpickerHsva = {\n      hue: this.hsva.hue,\n      saturation: 1,\n      value: 1,\n      alpha: 1,\n    };\n\n    let hueRgba = this.service.denormalizeRGBA(this.service.hsvaToRgba(hsva));\n\n    this.hslaText = dHsla;\n    this.rgbaText = dRgba;\n    this.hexText = this.service.hexText(dRgba, this.alphaChannel === 'hex8');\n\n    this.alphaSliderColor = `rgba(${dRgba.red},${dRgba.green},${dRgba.blue},${dRgba.alpha})`;\n    this.hueSliderColor = `rgba(${hueRgba.red},${hueRgba.green},${hueRgba.blue},${rgba.alpha})`;\n\n    if (\n      this.format === 0 &&\n      this.hsva.alpha < 1 &&\n      this.alphaChannel === 'hex6'\n    ) {\n      this.format++;\n    }\n\n    this.service.outputFormat(\n      this.hsva,\n      this.outputFormat,\n      this.alphaChannel === 'hex8'\n    );\n    this.selectedColor = this.service.skyColorpickerOut(this.hsva);\n\n    this.updateSlider();\n  }\n\n  private updateSlider(): void {\n    if (this.hsva && this.sliderDimMax) {\n      this.slider = new SliderPosition(\n        this.hsva.hue * this.sliderDimMax.hue - 8,\n        this.hsva.saturation * this.sliderDimMax.saturation - 8,\n        (1 - this.hsva.value) * this.sliderDimMax.value - 8,\n        this.hsva.alpha * this.sliderDimMax.alpha - 8\n      );\n    }\n  }\n\n  private openPicker(): void {\n    this.isPickerVisible = false;\n    this.removePickerEventListeners();\n    this.destroyOverlay();\n    this.createOverlay();\n    this.isOpen = true;\n  }\n\n  private sendMessage(type: SkyColorpickerMessageType) {\n    this.messageStream.next({ type });\n  }\n\n  private handleIncomingMessages(message: SkyColorpickerMessage) {\n    /* tslint:disable-next-line:switch-default */\n    switch (message.type) {\n      case SkyColorpickerMessageType.Open:\n        if (!this.isOpen) {\n          this.openPicker();\n        }\n        break;\n\n      case SkyColorpickerMessageType.Close:\n        if (this.isOpen) {\n          this.closePicker();\n        }\n        break;\n\n      case SkyColorpickerMessageType.Reset:\n        this.updatePickerValues(this.initialColor);\n        this.backgroundColorForDisplay = this.initialColor;\n        this.selectedColorChanged.emit(this.selectedColor);\n        this.selectedColorApplied.emit({ color: this.selectedColor });\n        break;\n\n      case SkyColorpickerMessageType.ToggleResetButton:\n        this.showResetButton = !this.showResetButton;\n        break;\n    }\n  }\n\n  private createAffixer(): void {\n    const affixer = this.affixService.createAffixer(this.colorpickerRef);\n\n    affixer.placementChange\n      .pipe(takeUntil(this.pickerUnsubscribe))\n      .subscribe((change) => {\n        this.isPickerVisible = change.placement !== null;\n      });\n\n    affixer.affixTo(this.triggerButtonRef.nativeElement, {\n      autoFitContext: SkyAffixAutoFitContext.Viewport,\n      enableAutoFit: true,\n      horizontalAlignment: 'left',\n      isSticky: true,\n      placement: 'below',\n    });\n\n    this.affixer = affixer;\n  }\n\n  private destroyAffixer(): void {\n    /*istanbul ignore else*/\n    if (this.affixer) {\n      this.affixer.destroy();\n      this.affixer = undefined;\n    }\n  }\n\n  private createOverlay(): void {\n    const overlay = this.overlayService.create({\n      enableClose: false,\n      enablePointerEvents: false,\n      enableScroll: true,\n    });\n\n    overlay.attachTemplate(this.colorpickerTemplateRef);\n\n    this.overlay = overlay;\n  }\n\n  private destroyOverlay(): void {\n    /*istanbul ignore else*/\n    if (this.overlay) {\n      this.overlayService.close(this.overlay);\n      this.overlay = undefined;\n    }\n  }\n\n  private addTriggerButtonEventListeners(): void {\n    fromEvent(window.document, 'keydown')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((event: KeyboardEvent) => {\n        const key = event.key?.toLowerCase();\n        /* istanbul ignore else */\n        if (key === 'escape') {\n          this.sendMessage(SkyColorpickerMessageType.Close);\n        }\n      });\n  }\n\n  private removePickerEventListeners(): void {\n    /* istanbul ignore else */\n    if (this.pickerUnsubscribe) {\n      this.pickerUnsubscribe.next();\n      this.pickerUnsubscribe.complete();\n      this.pickerUnsubscribe = undefined;\n    }\n  }\n\n  private getHsvaValue(value: string): SkyColorpickerHsva {\n    let hsva: SkyColorpickerHsva;\n\n    if (this.alphaChannel === 'hex8') {\n      hsva = this.service.stringToHsva(value, true);\n      if (!hsva && !this.hsva) {\n        hsva = this.service.stringToHsva(value, false);\n      }\n    } else {\n      hsva = this.service.stringToHsva(value, false);\n    }\n\n    return hsva;\n  }\n\n  // http://www.w3.org/TR/AERT#color-contrast\n  private getAccessibleIconColor(\n    backgroundColor: SkyColorpickerOutput\n  ): string {\n    const rgb = backgroundColor.rgba;\n    const brightness = Math.round(\n      (rgb.red * 299 + rgb.green * 587 + rgb.blue * 114) / 1000\n    );\n    return brightness > 125 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';\n  }\n}\n","<div\n  class=\"sky-input-group\"\n  [ngClass]=\"{\n    'sky-colorpicker-hidden': !isVisible,\n    'sky-colorpicker-disabled': disabled\n  }\"\n>\n  <div [hidden]=\"true\">\n    <ng-content></ng-content>\n  </div>\n\n  <button\n    aria-haspopup=\"dialog\"\n    class=\"sky-colorpicker-button\"\n    type=\"button\"\n    [attr.aria-controls]=\"isOpen ? colorpickerId : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"\n      label ||\n      (labelledBy\n        ? null\n        : ('skyux_colorpicker_dropdown_button' | skyLibResources))\n    \"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.id]=\"triggerButtonId\"\n    [attr.title]=\"\n      label ||\n      (labelledBy\n        ? null\n        : ('skyux_colorpicker_dropdown_button' | skyLibResources))\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-margin-inline-sm': 'modern'\n    }\"\n    [style.background-color]=\"backgroundColorForDisplay\"\n    (click)=\"onTriggerButtonClick()\"\n    #triggerButtonRef\n  >\n    <sky-icon\n      *ngIf=\"pickerButtonIcon\"\n      class=\"sky-colorpicker-button-icon\"\n      [icon]=\"pickerButtonIcon\"\n      [iconType]=\"pickerButtonIconType\"\n      [size]=\"'1x'\"\n      [style.color]=\"iconColor\"\n    >\n    </sky-icon>\n    <ng-container *skyThemeIf=\"'modern'\">\n      <sky-icon\n        class=\"sky-colorpicker-button-modern-chevron\"\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n        size=\"xs\"\n        [ngClass]=\"{\n          'sky-colorpicker-button-modern-chevron-disabled': disabled\n        }\"\n      >\n      </sky-icon>\n    </ng-container>\n  </button>\n\n  <ng-template #colorpickerTemplateRef>\n    <div\n      class=\"sky-colorpicker-container\"\n      role=\"dialog\"\n      [attr.aria-labelledby]=\"triggerButtonId\"\n      [attr.id]=\"colorpickerId\"\n      [hidden]=\"!isPickerVisible\"\n      [skyThemeClass]=\"{\n        'sky-shadow': 'default',\n        'sky-elevation-4': 'modern'\n      }\"\n      #colorpickerRef\n    >\n      <div class=\"sky-colorpicker\">\n        <div\n          class=\"saturation-lightness\"\n          [color]=\"slider.saturation - slider.value\"\n          [skyColorpickerSlider]\n          [style.background-color]=\"hueSliderColor\"\n          [xAxis]=\"1\"\n          [yAxis]=\"1\"\n          (newColorContrast)=\"saturationAndLightness = $event\"\n        >\n          <div\n            class=\"cursor sky-rounded-circle\"\n            [style.left.px]=\"slider.saturation\"\n            [style.top.px]=\"slider.value\"\n          ></div>\n        </div>\n\n        <div class=\"box\">\n          <div class=\"left\">\n            <div class=\"selected-color-background sky-rounded-circle\"></div>\n            <div\n              class=\"selected-color sky-rounded-circle\"\n              [style.background-color]=\"selectedColor?.rgbaText\"\n            ></div>\n          </div>\n          <div class=\"right\">\n            <div\n              class=\"hue\"\n              [skyColorpickerSlider]\n              [xAxis]=\"1\"\n              (newColorContrast)=\"hue = $event\"\n              #hueSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.hue\"\n              ></div>\n            </div>\n            <div\n              *ngIf=\"this.allowTransparency\"\n              class=\"alpha\"\n              [skyColorpickerSlider]\n              [style.background-color]=\"alphaSliderColor\"\n              [xAxis]=\"1\"\n              (newColorContrast)=\"alphaAxis = $event\"\n              #alphaSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.alpha\"\n              ></div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"rgba-text\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_hex' | skyLibResources\"\n              [attr.for]=\"skyColorpickerHexId\"\n            >\n              {{ 'skyux_colorpicker_hex' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              pattern=\"^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\n              [attr.id]=\"skyColorpickerHexId\"\n              [skyColorpickerText]\n              [value]=\"hexText\"\n              (newColorContrast)=\"hex = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_red' | skyLibResources\"\n              [attr.for]=\"skyColorpickerRedId\"\n            >\n              {{ 'skyux_colorpicker_red' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerRedId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.red\"\n              (newColorContrast)=\"red = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"\n                'skyux_colorpicker_aria_green' | skyLibResources\n              \"\n              [attr.for]=\"skyColorpickerGreenId\"\n            >\n              {{ 'skyux_colorpicker_green' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerGreenId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.green\"\n              (newColorContrast)=\"green = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"\n                'skyux_colorpicker_aria_blue' | skyLibResources\n              \"\n              [attr.for]=\"skyColorpickerBlueId\"\n            >\n              {{ 'skyux_colorpicker_blue' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerBlueId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.blue\"\n              (newColorContrast)=\"blue = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box *ngIf=\"this.allowTransparency\">\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"\n                'skyux_colorpicker_aria_alpha' | skyLibResources\n              \"\n              [attr.for]=\"skyColorpickerAlphaId\"\n            >\n              {{ 'skyux_colorpicker_alpha' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"1\"\n              min=\"0\"\n              pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n              step=\"0.1\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerAlphaId\"\n              [maxRange]=\"1\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.alpha\"\n              (newColorContrast)=\"alphaColor = $event\"\n            />\n          </sky-input-box>\n        </div>\n        <div\n          *ngIf=\"presetColors && presetColors.length\"\n          class=\"sky-colorpicker-preset-color-area\"\n        >\n          <button\n            *ngFor=\"let color of presetColors | slice: 0:12; let i = index\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              ('skyux_colorpicker_preset_color' | skyLibResources) + ' ' + color\n            \"\n            [skyThemeClass]=\"{\n              'sky-preset-color': 'default',\n              'sky-btn sky-btn-link': 'modern'\n            }\"\n            [style.backgroundColor]=\"color\"\n            (click)=\"onPresetClick(color)\"\n          ></button>\n        </div>\n      </div>\n\n      <div\n        class=\"sky-colorpicker-footer\"\n        [skyThemeClass]=\"{\n          'sky-padding-even-large': 'default'\n        }\"\n      >\n        <section class=\"sky-colorpicker-column\">\n          <button\n            class=\"sky-btn sky-btn-primary sky-btn-colorpicker-apply\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_apply' | skyLibResources\"\n            [skyThemeClass]=\"{ 'sky-margin-inline-sm': 'modern' }\"\n            (click)=\"onApplyColorClick()\"\n          >\n            {{ 'skyux_colorpicker_apply' | skyLibResources }}\n          </button>\n          <button\n            class=\"sky-btn sky-btn-link sky-btn-colorpicker-close\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_close' | skyLibResources\"\n            (click)=\"onCancelClick()\"\n          >\n            {{ 'skyux_colorpicker_close' | skyLibResources }}\n          </button>\n        </section>\n      </div>\n    </div>\n  </ng-template>\n  <span\n    *ngIf=\"allowTransparency\"\n    aria-hidden=\"true\"\n    class=\"sky-colorpicker-checkered-background\"\n  >\n  </span>\n\n  <button\n    *ngIf=\"showResetButton\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_colorpicker_reset' | skyLibResources\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-reset-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-colorpicker-reset-button': 'default',\n      'sky-btn sky-btn-icon-borderless sky-colorpicker-reset-button-modern':\n        'modern'\n    }\"\n    (click)=\"onResetClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" size=\"sm\"> </sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" icon=\"trash\" iconType=\"skyux\" size=\"lg\">\n    </sky-icon>\n  </button>\n</div>\n"]}
+{"version":3,"file":"colorpicker.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.component.ts","../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Output,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  SkyAffixAutoFitContext,\n  SkyAffixService,\n  SkyAffixer,\n  SkyCoreAdapterService,\n  SkyOverlayInstance,\n  SkyOverlayService,\n} from '@skyux/core';\nimport { SkyThemeService } from '@skyux/theme';\n\nimport { Subject, fromEvent } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SliderDimension, SliderPosition } from './colorpicker-classes';\nimport { SkyColorpickerService } from './colorpicker.service';\nimport { SkyColorpickerChangeAxis } from './types/colorpicker-axis';\nimport { SkyColorpickerChangeColor } from './types/colorpicker-color';\nimport { SkyColorpickerHsla } from './types/colorpicker-hsla';\nimport { SkyColorpickerHsva } from './types/colorpicker-hsva';\nimport { SkyColorpickerMessage } from './types/colorpicker-message';\nimport { SkyColorpickerMessageType } from './types/colorpicker-message-type';\nimport { SkyColorpickerOutput } from './types/colorpicker-output';\nimport { SkyColorpickerResult } from './types/colorpicker-result';\nimport { SkyColorpickerRgba } from './types/colorpicker-rgba';\n\nlet componentIdIndex = 0;\n\n/**\n * Provides a SKY UX-themed replacement for the HTML `input` element with `type=\"color\"`.\n * The value that users select is driven through the `ngModel` attribute specified on\n * the `input` element.\n */\n@Component({\n  selector: 'sky-colorpicker',\n  templateUrl: './colorpicker.component.html',\n  styleUrls: ['./colorpicker.component.scss'],\n  providers: [SkyColorpickerService],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class SkyColorpickerComponent implements OnInit, OnDestroy {\n  /**\n   * Specifies the name of the [Font Awesome 4.7](https://fontawesome.com/v4.7/icons/) icon to overlay on top of the picker. Do not specify the `fa fa-` classes.\n   * @internal\n   */\n  @Input()\n  public pickerButtonIcon?: string;\n\n  /**\n   * Specifies the type of icon to display. Specifying `fa` will display a Font Awesome icon, while specifying `skyux` will display an icon from the custom SKY UX icon font. Note that the custom SKY UX icon font is currently in beta.\n   * @internal\n   */\n  @Input()\n  public pickerButtonIconType?: string = 'fa';\n\n  /**\n   * Specifies an ARIA label for the colorpicker. This sets the colorpicker's `aria-label` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility)\n   * when the colorpicker does not include a visible label. If the colorpicker includes a visible label, use `labelledBy` instead.\n   * @default \"Select color value\"\n   */\n  @Input()\n  public label: string;\n\n  /**\n   * Specifies the HTML element ID (without the leading `#`) of the element that labels the\n   * colorpicker. This sets the colorpicker's `aria-labelledby` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility).\n   * If the colorpicker does not include a visible label, use `label` instead.\n   */\n  @Input()\n  public labelledBy: string;\n\n  /**\n   * Fires when users select a color in the colorpicker.\n   */\n  @Output()\n  public selectedColorChanged = new EventEmitter<SkyColorpickerOutput>();\n\n  /**\n   * Fires when users select **Apply** in the colorpicker to apply a color.\n   */\n  @Output()\n  public selectedColorApplied = new EventEmitter<SkyColorpickerResult>();\n\n  /**\n   * Provides an observable to send commands to the colorpicker. The commands should\n   * respect the `SkyColorPickerMessage` type.\n   */\n  @Input()\n  public messageStream = new Subject<SkyColorpickerMessage>();\n\n  /**\n   * Indicates whether to display a reset button to let users return to the default color.\n   */\n  @Input()\n  public showResetButton = true;\n\n  public set disabled(value: boolean) {\n    this._disabled = value;\n    this.changeDetector.markForCheck();\n  }\n\n  public get disabled(): boolean {\n    return this._disabled;\n  }\n\n  public idIndex: number;\n  public skyColorpickerHexId: string;\n  public skyColorpickerRedId: string;\n  public skyColorpickerGreenId: string;\n  public skyColorpickerBlueId: string;\n  public skyColorpickerAlphaId: string;\n  public alphaChannel: string;\n  public allowTransparency: boolean;\n  public alphaSliderColor: string;\n  public arrowTop: number;\n  public format: number;\n  public hexText: string;\n  public hslaText: SkyColorpickerHsla;\n  public hueSliderColor: string;\n  public outputFormat: string;\n  public presetColors: Array<string>;\n  public returnFormat: string;\n  public rgbaText: SkyColorpickerRgba;\n  public selectedColor: SkyColorpickerOutput;\n  public slider: SliderPosition;\n  public iconColor: string;\n  public initialColor: string;\n  public lastAppliedColor: string;\n  public isPickerVisible: boolean;\n\n  public set backgroundColorForDisplay(value: string) {\n    this._backgroundColorForDisplay = value;\n    if (this.pickerButtonIcon) {\n      this.iconColor = this.getAccessibleIconColor(this.selectedColor);\n    }\n  }\n\n  public get backgroundColorForDisplay(): string {\n    /* istanbul ignore next */\n    return this._backgroundColorForDisplay || '#fff';\n  }\n\n  public colorpickerId: string;\n\n  public isOpen = false;\n\n  public isVisible = true;\n\n  public triggerButtonId: string;\n\n  @ViewChild('colorpickerTemplateRef', {\n    read: TemplateRef,\n  })\n  private colorpickerTemplateRef: TemplateRef<any>;\n\n  @ViewChild('triggerButtonRef', {\n    read: ElementRef,\n  })\n  private triggerButtonRef: ElementRef;\n\n  @ViewChild('colorpickerRef', {\n    read: ElementRef,\n  })\n  private set colorpickerRef(value: ElementRef) {\n    if (value) {\n      this._colorpickerRef = value;\n      this.destroyAffixer();\n\n      this.removePickerEventListeners();\n      this.pickerUnsubscribe = new Subject<void>();\n\n      // Ensure the colorpicker has fully rendered before adding the affixer. Added to address a\n      // race condition when running under production conditions.\n      setTimeout(() => {\n        this.createAffixer();\n        this.isPickerVisible = true;\n\n        this.coreAdapter.getFocusableChildrenAndApplyFocus(\n          value,\n          '.sky-colorpicker',\n          false\n        );\n        this.changeDetector.markForCheck();\n      });\n    }\n  }\n\n  private get colorpickerRef(): ElementRef {\n    return this._colorpickerRef;\n  }\n\n  private hsva: SkyColorpickerHsva;\n  private sliderDimMax: SliderDimension;\n  private ngUnsubscribe = new Subject();\n\n  private affixer: SkyAffixer;\n\n  private overlay: SkyOverlayInstance;\n\n  private pickerUnsubscribe: Subject<void>;\n\n  private _backgroundColorForDisplay: string;\n\n  private _colorpickerRef: ElementRef;\n\n  private _disabled = false;\n\n  constructor(\n    private affixService: SkyAffixService,\n    private changeDetector: ChangeDetectorRef,\n    private coreAdapter: SkyCoreAdapterService,\n    private overlayService: SkyOverlayService,\n    private service: SkyColorpickerService,\n    @Optional() private themeSvc?: SkyThemeService\n  ) {\n    componentIdIndex++;\n\n    this.idIndex = componentIdIndex;\n    this.skyColorpickerRedId = 'sky-colorpicker-red-' + this.idIndex;\n    this.skyColorpickerHexId = 'sky-colorpicker-hex-' + this.idIndex;\n    this.skyColorpickerRedId = 'sky-colorpicker-red-' + this.idIndex;\n    this.skyColorpickerGreenId = 'sky-colorpicker-green-' + this.idIndex;\n    this.skyColorpickerBlueId = 'sky-colorpicker-blue-' + this.idIndex;\n    this.skyColorpickerAlphaId = 'sky-colorpicker-alpha-' + this.idIndex;\n    this.colorpickerId = `sky-colorpicker-${this.idIndex}`;\n    this.triggerButtonId = `sky-colorpicker-button-${this.idIndex}`;\n  }\n\n  public setDialog(\n    instance: any,\n    elementRef: ElementRef,\n    color: any,\n    outputFormat: string,\n    presetColors: Array<string>,\n    alphaChannel: string,\n    allowTransparency: boolean\n  ): void {\n    this.initialColor = color;\n    this.outputFormat = outputFormat;\n    this.presetColors = presetColors;\n    this.alphaChannel = alphaChannel;\n    this.allowTransparency = allowTransparency;\n\n    if (this.outputFormat === 'rgba') {\n      this.format = 1;\n    } else if (this.outputFormat === 'hsla') {\n      this.format = 2;\n    } else {\n      this.format = 0;\n    }\n  }\n\n  public ngOnInit(): void {\n    this.sliderDimMax = new SliderDimension(182, 270, 170, 182);\n    this.slider = new SliderPosition(0, 0, 0, 0);\n    this.messageStream\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((message: SkyColorpickerMessage) => {\n        this.handleIncomingMessages(message);\n      });\n\n    this.addTriggerButtonEventListeners();\n\n    /* istanbul ignore else */\n    if (this.themeSvc) {\n      this.themeSvc.settingsChange\n        .pipe(takeUntil(this.ngUnsubscribe))\n        .subscribe((themeSettings) => {\n          /* istanbul ignore next */\n          const themeName = themeSettings.currentSettings?.theme?.name;\n\n          // Hue/alpha slider bars have different widths in Modern theme.\n          /* istanbul ignore if */\n          if (themeName === 'modern') {\n            this.sliderDimMax = new SliderDimension(174, 270, 170, 174);\n          } else {\n            this.sliderDimMax = new SliderDimension(182, 270, 170, 182);\n          }\n          this.updateSlider();\n        });\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n    this.removePickerEventListeners();\n    this.destroyAffixer();\n    this.destroyOverlay();\n  }\n\n  public onTriggerButtonClick(): void {\n    this.sendMessage(SkyColorpickerMessageType.Open);\n  }\n\n  public closePicker(): void {\n    this.destroyAffixer();\n    this.destroyOverlay();\n    this.removePickerEventListeners();\n    this.triggerButtonRef.nativeElement.focus();\n    this.isOpen = false;\n  }\n\n  public onApplyColorClick(): void {\n    this.selectedColorChanged.emit(this.selectedColor);\n    this.selectedColorApplied.emit({ color: this.selectedColor });\n    this.lastAppliedColor = this.selectedColor.rgbaText;\n    this.updatePickerValues(this.lastAppliedColor);\n    this.backgroundColorForDisplay = this.selectedColor.rgbaText;\n    this.closePicker();\n  }\n\n  public onCancelClick(): void {\n    // Revert picker values back to previous color.\n    this.updatePickerValues(this.backgroundColorForDisplay);\n    this.closePicker();\n  }\n\n  public onPresetClick(value: string): void {\n    this.updatePickerValues(value);\n  }\n\n  public onResetClick(): void {\n    this.sendMessage(SkyColorpickerMessageType.Reset);\n  }\n\n  public updatePickerValues(value: string): void {\n    const hsva = this.getHsvaValue(value);\n    if (hsva) {\n      this.hsva = hsva;\n      this.update();\n    }\n  }\n\n  public set hue(change: SkyColorpickerChangeAxis) {\n    this.hsva.hue = change.xCoordinate / change.maxRange;\n    this.update();\n  }\n\n  public set red(change: SkyColorpickerChangeColor) {\n    const rgba = this.service.hsvaToRgba(this.hsva);\n    rgba.red = change.colorValue / change.maxRange;\n    this.hsva = this.service.rgbaToHsva(rgba);\n    this.update();\n  }\n\n  public set green(change: SkyColorpickerChangeColor) {\n    const rgba = this.service.hsvaToRgba(this.hsva);\n    rgba.green = change.colorValue / change.maxRange;\n    this.hsva = this.service.rgbaToHsva(rgba);\n    this.update();\n  }\n\n  public set blue(change: SkyColorpickerChangeColor) {\n    const rgba = this.service.hsvaToRgba(this.hsva);\n    rgba.blue = change.colorValue / change.maxRange;\n    this.hsva = this.service.rgbaToHsva(rgba);\n    this.update();\n  }\n\n  public set alphaAxis(change: SkyColorpickerChangeAxis) {\n    this.hsva.alpha = change.xCoordinate / change.maxRange;\n    this.update();\n  }\n\n  public set alphaColor(change: SkyColorpickerChangeColor) {\n    this.hsva.alpha = change.colorValue / change.maxRange;\n    this.update();\n  }\n\n  public set hex(change: SkyColorpickerChangeColor) {\n    this.updatePickerValues(change.color);\n  }\n\n  public set saturationAndLightness(value: SkyColorpickerChangeAxis) {\n    this.hsva.saturation = value.xCoordinate / value.xAxis;\n    this.hsva.value = value.yCoordinate / value.yAxis;\n    this.update();\n  }\n\n  public update(): void {\n    const hsla: SkyColorpickerHsla = this.service.hsva2hsla(this.hsva);\n    const dHsla: SkyColorpickerHsla = this.service.denormalizeHSLA(hsla);\n    const rgba: SkyColorpickerRgba = this.service.hsvaToRgba(this.hsva);\n    const dRgba: SkyColorpickerRgba = this.service.denormalizeRGBA(rgba);\n\n    const hsva: SkyColorpickerHsva = {\n      hue: this.hsva.hue,\n      saturation: 1,\n      value: 1,\n      alpha: 1,\n    };\n\n    const hueRgba = this.service.denormalizeRGBA(this.service.hsvaToRgba(hsva));\n\n    this.hslaText = dHsla;\n    this.rgbaText = dRgba;\n    this.hexText = this.service.hexText(dRgba, this.alphaChannel === 'hex8');\n\n    this.alphaSliderColor = `rgba(${dRgba.red},${dRgba.green},${dRgba.blue},${dRgba.alpha})`;\n    this.hueSliderColor = `rgba(${hueRgba.red},${hueRgba.green},${hueRgba.blue},${rgba.alpha})`;\n\n    if (\n      this.format === 0 &&\n      this.hsva.alpha < 1 &&\n      this.alphaChannel === 'hex6'\n    ) {\n      this.format++;\n    }\n\n    this.service.outputFormat(\n      this.hsva,\n      this.outputFormat,\n      this.alphaChannel === 'hex8'\n    );\n    this.selectedColor = this.service.skyColorpickerOut(this.hsva);\n\n    this.updateSlider();\n  }\n\n  private updateSlider(): void {\n    if (this.hsva && this.sliderDimMax) {\n      this.slider = new SliderPosition(\n        this.hsva.hue * this.sliderDimMax.hue - 8,\n        this.hsva.saturation * this.sliderDimMax.saturation - 8,\n        (1 - this.hsva.value) * this.sliderDimMax.value - 8,\n        this.hsva.alpha * this.sliderDimMax.alpha - 8\n      );\n    }\n  }\n\n  private openPicker(): void {\n    this.isPickerVisible = false;\n    this.removePickerEventListeners();\n    this.destroyOverlay();\n    this.createOverlay();\n    this.isOpen = true;\n  }\n\n  private sendMessage(type: SkyColorpickerMessageType) {\n    this.messageStream.next({ type });\n  }\n\n  private handleIncomingMessages(message: SkyColorpickerMessage) {\n    /* tslint:disable-next-line:switch-default */\n    switch (message.type) {\n      case SkyColorpickerMessageType.Open:\n        if (!this.isOpen) {\n          this.openPicker();\n        }\n        break;\n\n      case SkyColorpickerMessageType.Close:\n        if (this.isOpen) {\n          this.closePicker();\n        }\n        break;\n\n      case SkyColorpickerMessageType.Reset:\n        this.updatePickerValues(this.initialColor);\n        this.backgroundColorForDisplay = this.initialColor;\n        this.selectedColorChanged.emit(this.selectedColor);\n        this.selectedColorApplied.emit({ color: this.selectedColor });\n        break;\n\n      case SkyColorpickerMessageType.ToggleResetButton:\n        this.showResetButton = !this.showResetButton;\n        break;\n    }\n  }\n\n  private createAffixer(): void {\n    const affixer = this.affixService.createAffixer(this.colorpickerRef);\n\n    affixer.placementChange\n      .pipe(takeUntil(this.pickerUnsubscribe))\n      .subscribe((change) => {\n        this.isPickerVisible = change.placement !== null;\n      });\n\n    affixer.affixTo(this.triggerButtonRef.nativeElement, {\n      autoFitContext: SkyAffixAutoFitContext.Viewport,\n      enableAutoFit: true,\n      horizontalAlignment: 'left',\n      isSticky: true,\n      placement: 'below',\n    });\n\n    this.affixer = affixer;\n  }\n\n  private destroyAffixer(): void {\n    /*istanbul ignore else*/\n    if (this.affixer) {\n      this.affixer.destroy();\n      this.affixer = undefined;\n    }\n  }\n\n  private createOverlay(): void {\n    const overlay = this.overlayService.create({\n      enableClose: false,\n      enablePointerEvents: false,\n      enableScroll: true,\n    });\n\n    overlay.attachTemplate(this.colorpickerTemplateRef);\n\n    this.overlay = overlay;\n  }\n\n  private destroyOverlay(): void {\n    /*istanbul ignore else*/\n    if (this.overlay) {\n      this.overlayService.close(this.overlay);\n      this.overlay = undefined;\n    }\n  }\n\n  private addTriggerButtonEventListeners(): void {\n    fromEvent(window.document, 'keydown')\n      .pipe(takeUntil(this.ngUnsubscribe))\n      .subscribe((event: KeyboardEvent) => {\n        const key = event.key?.toLowerCase();\n        /* istanbul ignore else */\n        if (key === 'escape') {\n          this.sendMessage(SkyColorpickerMessageType.Close);\n        }\n      });\n  }\n\n  private removePickerEventListeners(): void {\n    /* istanbul ignore else */\n    if (this.pickerUnsubscribe) {\n      this.pickerUnsubscribe.next();\n      this.pickerUnsubscribe.complete();\n      this.pickerUnsubscribe = undefined;\n    }\n  }\n\n  private getHsvaValue(value: string): SkyColorpickerHsva {\n    let hsva: SkyColorpickerHsva;\n\n    if (this.alphaChannel === 'hex8') {\n      hsva = this.service.stringToHsva(value, true);\n      if (!hsva && !this.hsva) {\n        hsva = this.service.stringToHsva(value, false);\n      }\n    } else {\n      hsva = this.service.stringToHsva(value, false);\n    }\n\n    return hsva;\n  }\n\n  // http://www.w3.org/TR/AERT#color-contrast\n  private getAccessibleIconColor(\n    backgroundColor: SkyColorpickerOutput\n  ): string {\n    const rgb = backgroundColor.rgba;\n    const brightness = Math.round(\n      (rgb.red * 299 + rgb.green * 587 + rgb.blue * 114) / 1000\n    );\n    return brightness > 125 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)';\n  }\n}\n","<div\n  class=\"sky-input-group\"\n  [ngClass]=\"{\n    'sky-colorpicker-hidden': !isVisible,\n    'sky-colorpicker-disabled': disabled\n  }\"\n>\n  <div [hidden]=\"true\">\n    <ng-content></ng-content>\n  </div>\n\n  <button\n    aria-haspopup=\"dialog\"\n    class=\"sky-colorpicker-button\"\n    type=\"button\"\n    [attr.aria-controls]=\"isOpen ? colorpickerId : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-label]=\"\n      label ||\n      (labelledBy\n        ? null\n        : ('skyux_colorpicker_dropdown_button' | skyLibResources))\n    \"\n    [attr.aria-labelledby]=\"labelledBy\"\n    [attr.id]=\"triggerButtonId\"\n    [attr.title]=\"\n      label ||\n      (labelledBy\n        ? null\n        : ('skyux_colorpicker_dropdown_button' | skyLibResources))\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-margin-inline-sm': 'modern'\n    }\"\n    [style.background-color]=\"backgroundColorForDisplay\"\n    (click)=\"onTriggerButtonClick()\"\n    #triggerButtonRef\n  >\n    <sky-icon\n      *ngIf=\"pickerButtonIcon\"\n      class=\"sky-colorpicker-button-icon\"\n      [icon]=\"pickerButtonIcon\"\n      [iconType]=\"pickerButtonIconType\"\n      [size]=\"'1x'\"\n      [style.color]=\"iconColor\"\n    >\n    </sky-icon>\n    <ng-container *skyThemeIf=\"'modern'\">\n      <sky-icon\n        class=\"sky-colorpicker-button-modern-chevron\"\n        icon=\"chevron-down\"\n        iconType=\"skyux\"\n        size=\"xs\"\n        [ngClass]=\"{\n          'sky-colorpicker-button-modern-chevron-disabled': disabled\n        }\"\n      >\n      </sky-icon>\n    </ng-container>\n  </button>\n\n  <ng-template #colorpickerTemplateRef>\n    <div\n      class=\"sky-colorpicker-container\"\n      role=\"dialog\"\n      [attr.aria-labelledby]=\"triggerButtonId\"\n      [attr.id]=\"colorpickerId\"\n      [hidden]=\"!isPickerVisible\"\n      [skyThemeClass]=\"{\n        'sky-shadow': 'default',\n        'sky-elevation-4': 'modern'\n      }\"\n      #colorpickerRef\n    >\n      <div class=\"sky-colorpicker\">\n        <div\n          class=\"saturation-lightness\"\n          [color]=\"slider.saturation - slider.value\"\n          [skyColorpickerSlider]\n          [style.background-color]=\"hueSliderColor\"\n          [xAxis]=\"1\"\n          [yAxis]=\"1\"\n          (newColorContrast)=\"saturationAndLightness = $event\"\n        >\n          <div\n            class=\"cursor sky-rounded-circle\"\n            [style.left.px]=\"slider.saturation\"\n            [style.top.px]=\"slider.value\"\n          ></div>\n        </div>\n\n        <div class=\"box\">\n          <div class=\"left\">\n            <div class=\"selected-color-background sky-rounded-circle\"></div>\n            <div\n              class=\"selected-color sky-rounded-circle\"\n              [style.background-color]=\"selectedColor?.rgbaText\"\n            ></div>\n          </div>\n          <div class=\"right\">\n            <div\n              class=\"hue\"\n              [skyColorpickerSlider]\n              [xAxis]=\"1\"\n              (newColorContrast)=\"hue = $event\"\n              #hueSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.hue\"\n              ></div>\n            </div>\n            <div\n              *ngIf=\"this.allowTransparency\"\n              class=\"alpha\"\n              [skyColorpickerSlider]\n              [style.background-color]=\"alphaSliderColor\"\n              [xAxis]=\"1\"\n              (newColorContrast)=\"alphaAxis = $event\"\n              #alphaSlider\n            >\n              <div\n                class=\"cursor sky-rounded-circle\"\n                [style.left.px]=\"slider.alpha\"\n              ></div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"rgba-text\">\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_hex' | skyLibResources\"\n              [attr.for]=\"skyColorpickerHexId\"\n            >\n              {{ 'skyux_colorpicker_hex' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              pattern=\"^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$\"\n              [attr.id]=\"skyColorpickerHexId\"\n              [skyColorpickerText]\n              [value]=\"hexText\"\n              (newColorContrast)=\"hex = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"'skyux_colorpicker_aria_red' | skyLibResources\"\n              [attr.for]=\"skyColorpickerRedId\"\n            >\n              {{ 'skyux_colorpicker_red' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerRedId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.red\"\n              (newColorContrast)=\"red = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"\n                'skyux_colorpicker_aria_green' | skyLibResources\n              \"\n              [attr.for]=\"skyColorpickerGreenId\"\n            >\n              {{ 'skyux_colorpicker_green' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerGreenId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.green\"\n              (newColorContrast)=\"green = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box>\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"\n                'skyux_colorpicker_aria_blue' | skyLibResources\n              \"\n              [attr.for]=\"skyColorpickerBlueId\"\n            >\n              {{ 'skyux_colorpicker_blue' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"255\"\n              min=\"0\"\n              pattern=\"[0-9]*\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerBlueId\"\n              [maxRange]=\"255\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.blue\"\n              (newColorContrast)=\"blue = $event\"\n            />\n          </sky-input-box>\n          <sky-input-box *ngIf=\"this.allowTransparency\">\n            <label\n              class=\"sky-control-label\"\n              [attr.aria-label]=\"\n                'skyux_colorpicker_aria_alpha' | skyLibResources\n              \"\n              [attr.for]=\"skyColorpickerAlphaId\"\n            >\n              {{ 'skyux_colorpicker_alpha' | skyLibResources }}\n            </label>\n            <input\n              class=\"sky-form-control\"\n              max=\"1\"\n              min=\"0\"\n              pattern=\"[0-9]+([\\.,][0-9]{1,2})?\"\n              step=\"0.1\"\n              type=\"number\"\n              [attr.id]=\"skyColorpickerAlphaId\"\n              [maxRange]=\"1\"\n              [skyColorpickerText]\n              [value]=\"rgbaText?.alpha\"\n              (newColorContrast)=\"alphaColor = $event\"\n            />\n          </sky-input-box>\n        </div>\n        <div\n          *ngIf=\"presetColors && presetColors.length\"\n          class=\"sky-colorpicker-preset-color-area\"\n        >\n          <button\n            *ngFor=\"let color of presetColors | slice: 0:12; let i = index\"\n            type=\"button\"\n            [attr.aria-label]=\"\n              ('skyux_colorpicker_preset_color' | skyLibResources) + ' ' + color\n            \"\n            [skyThemeClass]=\"{\n              'sky-preset-color': 'default',\n              'sky-btn sky-btn-link': 'modern'\n            }\"\n            [style.backgroundColor]=\"color\"\n            (click)=\"onPresetClick(color)\"\n          ></button>\n        </div>\n      </div>\n\n      <div\n        class=\"sky-colorpicker-footer\"\n        [skyThemeClass]=\"{\n          'sky-padding-even-large': 'default'\n        }\"\n      >\n        <section class=\"sky-colorpicker-column\">\n          <button\n            class=\"sky-btn sky-btn-primary sky-btn-colorpicker-apply\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_apply' | skyLibResources\"\n            [skyThemeClass]=\"{ 'sky-margin-inline-sm': 'modern' }\"\n            (click)=\"onApplyColorClick()\"\n          >\n            {{ 'skyux_colorpicker_apply' | skyLibResources }}\n          </button>\n          <button\n            class=\"sky-btn sky-btn-link sky-btn-colorpicker-close\"\n            type=\"button\"\n            [attr.aria-label]=\"'skyux_colorpicker_close' | skyLibResources\"\n            (click)=\"onCancelClick()\"\n          >\n            {{ 'skyux_colorpicker_close' | skyLibResources }}\n          </button>\n        </section>\n      </div>\n    </div>\n  </ng-template>\n  <span\n    *ngIf=\"allowTransparency\"\n    aria-hidden=\"true\"\n    class=\"sky-colorpicker-checkered-background\"\n  >\n  </span>\n\n  <button\n    *ngIf=\"showResetButton\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_colorpicker_reset' | skyLibResources\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-colorpicker-reset-button-disabled': disabled\n    }\"\n    [skyThemeClass]=\"{\n      'sky-colorpicker-reset-button': 'default',\n      'sky-btn sky-btn-icon-borderless sky-colorpicker-reset-button-modern':\n        'modern'\n    }\"\n    (click)=\"onResetClick()\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\" icon=\"times\" size=\"sm\"> </sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\" icon=\"trash\" iconType=\"skyux\" size=\"lg\">\n    </sky-icon>\n  </button>\n</div>\n"]}

package/esm2015/lib/modules/colorpicker/colorpicker.module.js

@@ -6,10 +6,10 @@ import { SkyI18nModule } from '@skyux/i18n';
 import { SkyIconModule } from '@skyux/indicators';
 import { SkyThemeModule } from '@skyux/theme';
 import { SkyColorpickerResourcesModule } from '../shared/sky-colorpicker-resources.module';
-import { SkyColorpickerComponent } from './colorpicker.component';
 import { SkyColorpickerInputDirective } from './colorpicker-input.directive';
 import { SkyColorpickerSliderDirective } from './colorpicker-slider.directive';
 import { SkyColorpickerTextDirective } from './colorpicker-text.directive';
+import { SkyColorpickerComponent } from './colorpicker.component';
 import * as i0 from "@angular/core";
 export class SkyColorpickerModule {
 }

package/esm2015/lib/modules/colorpicker/colorpicker.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorpicker.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAE3F,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAE7E,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;;AAsB3E,MAAM,OAAO,oBAAoB;;kHAApB,oBAAoB;mHAApB,oBAAoB,iBAlB7B,uBAAuB;QACvB,4BAA4B;QAC5B,2BAA2B;QAC3B,6BAA6B,aAG7B,YAAY;QACZ,cAAc;QACd,6BAA6B;QAC7B,aAAa;QACb,aAAa;QACb,iBAAiB;QACjB,gBAAgB;QAChB,cAAc,aAEN,uBAAuB,EAAE,4BAA4B;mHAGpD,oBAAoB,YAbtB;YACP,YAAY;YACZ,cAAc;YACd,6BAA6B;YAC7B,aAAa;YACb,aAAa;YACb,iBAAiB;YACjB,gBAAgB;YAChB,cAAc;SACf;4FAIU,oBAAoB;kBApBhC,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,uBAAuB;wBACvB,4BAA4B;wBAC5B,2BAA2B;wBAC3B,6BAA6B;qBAC9B;oBACD,OAAO,EAAE;wBACP,YAAY;wBACZ,cAAc;wBACd,6BAA6B;wBAC7B,aAAa;wBACb,aAAa;wBACb,iBAAiB;wBACjB,gBAAgB;wBAChB,cAAc;qBACf;oBACD,OAAO,EAAE,CAAC,uBAAuB,EAAE,4BAA4B,CAAC;oBAChE,eAAe,EAAE,CAAC,uBAAuB,CAAC;iBAC3C","sourcesContent":["import { CommonModule } from '@angular/common';\n\nimport { NgModule } from '@angular/core';\n\nimport { SkyAffixModule, SkyOverlayModule } from '@skyux/core';\n\nimport { SkyInputBoxModule } from '@skyux/forms';\n\nimport { SkyI18nModule } from '@skyux/i18n';\n\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyColorpickerResourcesModule } from '../shared/sky-colorpicker-resources.module';\n\nimport { SkyColorpickerComponent } from './colorpicker.component';\n\nimport { SkyColorpickerInputDirective } from './colorpicker-input.directive';\n\nimport { SkyColorpickerSliderDirective } from './colorpicker-slider.directive';\n\nimport { SkyColorpickerTextDirective } from './colorpicker-text.directive';\n\n@NgModule({\n  declarations: [\n    SkyColorpickerComponent,\n    SkyColorpickerInputDirective,\n    SkyColorpickerTextDirective,\n    SkyColorpickerSliderDirective,\n  ],\n  imports: [\n    CommonModule,\n    SkyAffixModule,\n    SkyColorpickerResourcesModule,\n    SkyI18nModule,\n    SkyIconModule,\n    SkyInputBoxModule,\n    SkyOverlayModule,\n    SkyThemeModule,\n  ],\n  exports: [SkyColorpickerComponent, SkyColorpickerInputDirective],\n  entryComponents: [SkyColorpickerComponent],\n})\nexport class SkyColorpickerModule {}\n"]}
+{"version":3,"file":"colorpicker.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/colorpicker/src/lib/modules/colorpicker/colorpicker.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAE3F,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;;AAsBlE,MAAM,OAAO,oBAAoB;;kHAApB,oBAAoB;mHAApB,oBAAoB,iBAlB7B,uBAAuB;QACvB,4BAA4B;QAC5B,2BAA2B;QAC3B,6BAA6B,aAG7B,YAAY;QACZ,cAAc;QACd,6BAA6B;QAC7B,aAAa;QACb,aAAa;QACb,iBAAiB;QACjB,gBAAgB;QAChB,cAAc,aAEN,uBAAuB,EAAE,4BAA4B;mHAGpD,oBAAoB,YAbtB;YACP,YAAY;YACZ,cAAc;YACd,6BAA6B;YAC7B,aAAa;YACb,aAAa;YACb,iBAAiB;YACjB,gBAAgB;YAChB,cAAc;SACf;4FAIU,oBAAoB;kBApBhC,QAAQ;mBAAC;oBACR,YAAY,EAAE;wBACZ,uBAAuB;wBACvB,4BAA4B;wBAC5B,2BAA2B;wBAC3B,6BAA6B;qBAC9B;oBACD,OAAO,EAAE;wBACP,YAAY;wBACZ,cAAc;wBACd,6BAA6B;wBAC7B,aAAa;wBACb,aAAa;wBACb,iBAAiB;wBACjB,gBAAgB;wBAChB,cAAc;qBACf;oBACD,OAAO,EAAE,CAAC,uBAAuB,EAAE,4BAA4B,CAAC;oBAChE,eAAe,EAAE,CAAC,uBAAuB,CAAC;iBAC3C","sourcesContent":["import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAffixModule, SkyOverlayModule } from '@skyux/core';\nimport { SkyInputBoxModule } from '@skyux/forms';\nimport { SkyI18nModule } from '@skyux/i18n';\nimport { SkyIconModule } from '@skyux/indicators';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyColorpickerResourcesModule } from '../shared/sky-colorpicker-resources.module';\n\nimport { SkyColorpickerInputDirective } from './colorpicker-input.directive';\nimport { SkyColorpickerSliderDirective } from './colorpicker-slider.directive';\nimport { SkyColorpickerTextDirective } from './colorpicker-text.directive';\nimport { SkyColorpickerComponent } from './colorpicker.component';\n\n@NgModule({\n  declarations: [\n    SkyColorpickerComponent,\n    SkyColorpickerInputDirective,\n    SkyColorpickerTextDirective,\n    SkyColorpickerSliderDirective,\n  ],\n  imports: [\n    CommonModule,\n    SkyAffixModule,\n    SkyColorpickerResourcesModule,\n    SkyI18nModule,\n    SkyIconModule,\n    SkyInputBoxModule,\n    SkyOverlayModule,\n    SkyThemeModule,\n  ],\n  exports: [SkyColorpickerComponent, SkyColorpickerInputDirective],\n  entryComponents: [SkyColorpickerComponent],\n})\nexport class SkyColorpickerModule {}\n"]}