import { Component , EventEmitter , forwardRef , Input , Output , ViewEncapsulation } from '@angular/core' ; import { fuseAnimations } from '@fuse/animations' ; import { MatColors } from '@fuse/mat-colors' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => FuseMaterialColorPickerComponent ) , multi : true } ; @ Component ( { selector : 'fuse-material-color-picker' , templateUrl : './material-color-picker.component.html' , styleUrls : [ './material-color-picker.component.scss' ] , animations : fuseAnimations , encapsulation : ViewEncapsulation . None , providers : [ FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR ] } ) export class FuseMaterialColorPickerComponent implements ControlValueAccessor { colors : any ; hues : string [ ] ; view : string ; selectedColor : any ; selectedPalette : string ; selectedHue : string ; @ Output ( ) colorChanged : EventEmitter < any > ; private _color : string ; private _modelChange : ( value : any ) => void ; private _modelTouched : ( value : any ) => void ; /**
     * Constructor
     */ constructor ( ) { this . colorChanged = new EventEmitter ( ) ; this . colors = MatColors . all ; this . hues = [ '50' , '100' , '200' , '300' , '400' , '500' , '600' , '700' , '800' , '900' , 'A100' , 'A200' , 'A400' , 'A700' ] ; this . selectedHue = '500' ; this . view = 'palettes' ; this . _color = '' ; this . _modelChange = ( ) => { } ; this . _modelTouched = ( ) => { } ; } param value @ Input ( ) set color ( value ) { if ( ! value || value === '' || this . _color === value ) { return ; } const colorParts = value . split ( '-' ) ; this . selectedHue = colorParts [ colorParts . length - 1 ] ; colorParts . pop ( ) ; this . selectedPalette = colorParts . join ( '-' ) ; this . _color = value ; } get color ( ) : string { return this . _color ; } param fn registerOnChange ( fn ) { this . _modelChange = fn ; } param fn registerOnTouched ( fn ) { this . _modelTouched = fn ; } param color writeValue ( color ) { if ( ! color ) { return ; } this . color = color ; this . updateSelectedColor ( ) ; } param event param palette selectPalette ( event , palette ) { event . stopPropagation ( ) ; this . view = 'hues' ; this . selectedPalette = palette ; this . updateSelectedColor ( ) ; } param event param hue selectHue ( event , hue ) { event . stopPropagation ( ) ; this . selectedHue = hue ; this . updateSelectedColor ( ) ; } param event removeColor ( event ) { event . stopPropagation ( ) ; this . view = 'palettes' ; this . selectedPalette = '' ; this . selectedHue = '' ; this . updateSelectedColor ( ) ; } /**
     * Update selected color
     */ updateSelectedColor ( ) { if ( this . selectedColor && this . selectedColor . palette === this . selectedPalette && this . selectedColor . hue === this . selectedHue ) { return ; } this . selectedColor = { palette : this . selectedPalette , hue : this . selectedHue , class : this . selectedPalette + '-' + this . selectedHue , bg : this . selectedPalette === '' ? '' : MatColors . getColor ( this . selectedPalette ) [ this . selectedHue ] , fg : this . selectedPalette === '' ? '' : MatColors . getColor ( this . selectedPalette ) . contrast [ this . selectedHue ] } ; this . colorChanged . emit ( this . selectedColor ) ; this . _modelTouched ( this . selectedColor . class ) ; this . _modelChange ( this . selectedColor . class ) ; } param event goToPalettesView ( event ) { event . stopPropagation ( ) ; this . view = 'palettes' ; } /**
     * On menu open
     */ onMenuOpen ( ) { if ( this . selectedPalette === '' ) { this . view = 'palettes' ; } else { this . view = 'hues' ; } } }