import { Component , ElementRef , Renderer2 , ChangeDetectionStrategy , ChangeDetectorRef , forwardRef , Input , TemplateRef , Optional , Inject } from '@angular/core' ; import { NG_VALUE_ACCESSOR , ControlValueAccessor } from '@angular/forms' ; import { IHSV , getHsvFromHex , getHexFromHsv , isValidHex } from './util' ; import { uniqueId } from '../util/util' ; import { InputBoolean } from '../util/convert' ; import { NGL_COLORPICKER_CONFIG , NglColorpickerConfig } from './config' ; const NGL_COLORPICKER_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => NglColorpicker ) , multi : true } ; @ Component ( { selector : 'ngl-colorpicker' , templateUrl : './colorpicker.html' , changeDetection : ChangeDetectionStrategy . OnPush , providers : [ NGL_COLORPICKER_VALUE_ACCESSOR ] , } ) export class NglColorpicker implements ControlValueAccessor { /**
     * An input label as for a form.
     */ @ Input ( ) label = 'Choose Color' ; /**
     * Placeholder of input box.
     */ @ Input ( ) placeholder = '' ; /**
     * Text for cancel button on popover.
     */ @ Input ( ) cancelButtonLabel = 'Cancel' ; /**
     * Text for submit button of popover.
     */ @ Input ( ) submitButtonLabel = 'Done' ; /**
     * Highlights the input as a required field (does not perform any validation).
     */ @ Input ( ) @ InputBoolean ( ) required = false ; /**
     * A tooltip that is displayed next to the label.
     */ @ Input ( ) fieldLevelHelpTooltip : string | TemplateRef < any > ; /**
     * Error message when hex color input is invalid.
     */ @ Input ( ) invalidColorLabel : string | TemplateRef < any > = 'Please ensure value is correct' ; /**
     * Text for swatch tab of popover.
     */ @ Input ( ) swatchTabLabel = 'Default' ; /**
     * Text for custom tab of popover.
     */ @ Input ( ) customTabLabel = 'Custom' ; /**
     * Hex color values which are used to set the options of the swatch tab of the colorpicker popover.
     */ @ Input ( ) swatchColors : string [ ] ; /**
     * Whether to make the hex color input readonly.
     */ @ Input ( ) @ InputBoolean ( ) readonlyInput = false ; /**
     * Determines which tab is visible when popover opens.
     */ @ Input ( ) defaultSelectedTab : 'swatches' | 'custom' = 'swatches' ; /**
     * Configures to show both or which one of the color selection interfaces.
     */ @ Input ( ) variant : 'base' | 'swatches' | 'custom' ; color : string ; uid = uniqueId ( 'colorpicker' ) ; open : boolean ; disabled : boolean ; hexCurrent = '#FFF' ; hsvCurrent = getHsvFromHex ( this . hexCurrent ) ; constructor ( @ Optional ( ) @ Inject ( NGL_COLORPICKER_CONFIG ) defaultConfig , private el , private renderer , private cd ) { this . renderer . addClass ( this . el . nativeElement , 'slds-color-picker' ) ; const config = { ... new NglColorpickerConfig ( ) , ... defaultConfig } ; this . swatchColors = config . swatchColors ; this . variant = config . variant ; } onChange = ( _ ) => { } ; onTouched = ( ) => { } ; writeValue ( value ) { this . color = value || '' ; if ( isValidHex ( value ) ) { this . hexCurrent = value ; this . hsvCurrent = getHsvFromHex ( value ) ; } this . cd . detectChanges ( ) ; } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } setDisabledState ( isDisabled ) { this . disabled = isDisabled ; } onSwatchSelection ( hex ) { this . hsvCurrent = getHsvFromHex ( hex ) ; this . hexCurrent = hex ; } onCustomSelection ( hsv ) { this . hsvCurrent = hsv ; this . hexCurrent = getHexFromHsv ( hsv ) ; } openChange ( open ) { this . open = open ; } cancel ( ) { this . open = false ; } done ( ) { this . open = false ; if ( this . hexCurrent !== this . color ) { this . color = this . hexCurrent ; this . onChange ( this . color ) ; } } canApply ( ) { return isValidHex ( this . hexCurrent ) ; } onInput ( hex ) { this . color = hex ; if ( isValidHex ( hex ) ) { this . onSwatchSelection ( hex ) ; this . onChange ( hex ) ; } else { this . onChange ( null ) ; } } get isValidInput ( ) { return ! this . color || isValidHex ( this . color ) ; } }