import { ElementRef , HostBinding , Input } from '@angular/core' ; import { ColorTheme } from '../style' ; export const BUTTON_HOST_ATTRIBUTES = [ 'gd-button' , 'gd-icon-button' , 'gd-flat-button' , ] ; export const BUTTON_HOST_ATTRIBUTE_CLASS_NAME_MAP = { 'gd-button' : 'Button' , 'gd-icon-button' : 'IconButton' , 'gd-flat-button' : 'FlatButton' , } ; export type ButtonIconContainsPosition = 'left' | 'right' | null ; export abstract class ButtonBase < T extends HTMLElement > { protected constructor ( protected elementRef ) { for ( const attr of BUTTON_HOST_ATTRIBUTES ) { if ( this . hasHostAttributes ( attr ) ) { this . hostElement . classList . add ( BUTTON_HOST_ATTRIBUTE_CLASS_NAME_MAP [ attr ] ) ; } } this . color = 'normal' ; } protected _color : ColorTheme ; @ Input ( ) get color ( ) : ColorTheme { return this . _color ; } set color ( color ) { this . updateColorClassName ( color ) ; } /** Whether if show spinner. */ @ Input ( ) showSpinner : boolean = false ; /** Whether if focus hidden. */ @ Input ( ) focusHidden : boolean = false ; /** Icon contains position. */ @ Input ( ) iconContains : ButtonIconContainsPosition = null ; /** Whether if button is big size. */ @ Input ( ) bigSize : boolean = false ; @ HostBinding ( 'class.Button--showSpinner' ) private get showSpinnerClass ( ) { return this . showSpinner ; } @ HostBinding ( 'class.Button--focusHidden' ) private get focusHiddenClass ( ) { return this . focusHidden ; } @ HostBinding ( 'class.Button--iconContains-left' ) private get iconContainsLeftClass ( ) { return this . iconContains === 'left' ; } @ HostBinding ( 'class.Button--iconContains-right' ) private get iconContainsRightClass ( ) { return this . iconContains === 'right' ; } @ HostBinding ( 'class.Button--size-big' ) private get bigSizeClass ( ) { return this . bigSize ; } get hostElement ( ) : T { return this . elementRef . nativeElement ; } protected updateColorClassName ( color ) { const hostEl = this . hostElement ; if ( this . _color ) { const previousColorClassName = `Button--color-${ this . _color }` ; if ( hostEl . classList . contains ( previousColorClassName ) ) { hostEl . classList . remove ( previousColorClassName ) ; } } const nextClassName = `Button--color-${ color }` ; hostEl . classList . add ( nextClassName ) ; this . _color = color ; } private hasHostAttributes ( ... attributes ) { return attributes . some ( attribute => this . hostElement . hasAttribute ( attribute ) ) ; } }