import { Component , ElementRef , Renderer2 , ChangeDetectionStrategy , Input , Output , EventEmitter , OnChanges , SimpleChanges } from '@angular/core' ; import { IHSV , getHexFromHsv , getHsvFromHex } from '../util' ; @ Component ( { selector : 'ngl-colorpicker-custom' , templateUrl : './colorpicker-custom.html' , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class NglColorpickerCustom implements OnChanges { @ Input ( ) readonly hsv : IHSV ; @ Output ( ) hsvChange = new EventEmitter < IHSV > ( ) ; hex : string ; constructor ( private el , private renderer ) { this . renderer . addClass ( this . el . nativeElement , 'slds-color-picker__custom' ) ; } ngOnChanges ( changes ) { if ( changes . hsv ) { this . hex = getHexFromHsv ( this . hsv ) ; } } onHsvChange ( $event ) { this . hsvChange . emit ( $event ) ; } onHexChange ( hex ) { const hsv = getHsvFromHex ( hex ) ; this . hsvChange . emit ( hsv ) ; } }