import { Component , ElementRef , Renderer2 , Input , Output , EventEmitter , HostBinding } from '@angular/core' ; import { coerceBooleanProperty } from 'ngx-tethys/util' ; import { helpers } from 'ngx-tethys/util' ; export type ThyLabelType = 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' ; const labelTypeClassesMap = { default : [ 'thy-label' , 'thy-label-default' ] , primary : [ 'thy-label' , 'thy-label-primary' ] , success : [ 'thy-label' , 'thy-label-success' ] , info : [ 'thy-label' , 'thy-label-info' ] , warning : [ 'thy-label' , 'thy-label-warning' ] , danger : [ 'thy-label' , 'thy-label-danger' ] } ; @ Component ( { selector : '[thyLabel]' , templateUrl : './label.component.html' } ) export class ThyLabelComponent { @ HostBinding ( 'class.label-has-hover' ) _thyHasHover = false ; @ HostBinding ( 'class.thy-label--sm' ) _classNameSM = false ; @ HostBinding ( 'class.thy-label--md' ) _classNameDM = false ; @ HostBinding ( 'class.thy-label--lg' ) _classNameLG = false ; @ Input ( ) thyIconPrefix : string ; @ Input ( 'thySize' ) set thySize ( value ) { this . _classNameSM = value === 'sm' ; this . _classNameDM = value === 'md' ; this . _classNameLG = value === 'lg' ; } private nativeElement : HTMLElement ; private _typeClassNames : string [ ] = [ ] ; private _labelClass ? : string ; private _type ? : string ; private _labelType ? : string ; private _icon : string ; public beforeIconName : string ; public beforeIconClass : string [ ] ; public afterIconName : string ; public afterIconClass : string [ ] ; public _color ? : string ; public _backgroundOpacity ? : number = 0.1 ; @ Output ( ) thyOnRemove : EventEmitter < any > = new EventEmitter < any > ( ) ; constructor ( private el , private renderer ) { this . nativeElement = this . el . nativeElement ; } @ Input ( 'thyHasHover' ) set thyHasHover ( value ) { this . _thyHasHover = coerceBooleanProperty ( value ) ; } @ Input ( ) set thyLabel ( value ) { this . _type = value ; this . _setClassesByType ( ) ; } @ Input ( ) set thyLabelColor ( color ) { this . _color = color ; this . _setLabelCustomColor ( ) ; } @ Input ( ) set thyBackgroundOpacity ( opacity ) { if ( opacity && opacity > 0 && this . _backgroundOpacity !== opacity ) { this . _backgroundOpacity = opacity ; this . _setLabelCustomColor ( ) ; } } @ Input ( ) set thyLabelType ( labelType ) { this . _labelType = labelType ; this . _setClassesByType ( ) ; } @ Input ( ) set thyBeforeIcon ( icon ) { this . _icon = icon ; if ( this . _icon ) { if ( this . _icon . includes ( 'wtf' ) ) { const iconPrefix = this . thyIconPrefix || 'wtf' ; this . beforeIconClass = [ iconPrefix , `${ this . _icon }` ] ; } else { this . beforeIconName = `${ this . _icon }` ; } } else { this . beforeIconClass = null ; this . beforeIconName = null ; } } @ Input ( ) set thyAfterIcon ( icon ) { this . _icon = icon ; if ( this . _icon ) { if ( this . _icon . includes ( 'wtf' ) ) { const iconPrefix = this . thyIconPrefix || 'wtf' ; this . afterIconClass = [ iconPrefix , `${ this . _icon }` ] ; } else { this . afterIconName = `${ this . _icon }` ; } } else { this . afterIconClass = null ; this . afterIconName = null ; } } private _setClassesByType ( ) { let classNames = null ; if ( labelTypeClassesMap [ this . _type ] ) { classNames = labelTypeClassesMap [ this . _type ] ; } else { classNames = [ 'thy-label' ] ; classNames . push ( `thy-label-${ this . _type }` ) ; } if ( this . _labelType ) { classNames = [ ... classNames , `thy-label-${ this . _labelType }` ] ; } this . _typeClassNames . forEach ( className => { this . _removeClass ( className ) ; } ) ; this . _typeClassNames = classNames ; this . _typeClassNames . forEach ( className => { this . _addClass ( className ) ; } ) ; } private _setLabelCustomColor ( ) { if ( this . _color ) { if ( this . _type . indexOf ( 'emboss' ) > - 1 ) { if ( this . _type === 'emboss-status' ) { this . el . nativeElement . style . color = '#333' ; } else { this . el . nativeElement . style . color = this . _color ; } this . el . nativeElement . style . backgroundColor = helpers . hexToRgb ( this . _color , this . _backgroundOpacity ) ; } else if ( this . _type . indexOf ( 'outline' ) > - 1 ) { this . el . nativeElement . style . color = this . _color ; this . el . nativeElement . style . borderColor = this . _color ; } else { this . el . nativeElement . style . backgroundColor = this . _color ; } } } private _addClass ( className ) { this . renderer . addClass ( this . nativeElement , className ) ; } private _removeClass ( className ) { this . renderer . removeClass ( this . nativeElement , className ) ; } remove ( ) { this . thyOnRemove . emit ( ) ; } }