import { UpdateHostClassService } from 'ngx-tethys/core' ; import { coerceBooleanProperty } from 'ngx-tethys/util' ; import { ChangeDetectionStrategy , Component , ElementRef , HostBinding , Input , OnInit , ViewEncapsulation } from '@angular/core' ; export type IconShape = '' | 'dashed' | 'solid' ; const sizeClassesMap = { lg : [ 'btn-icon-lg' ] , sm : [ 'btn-icon-sm' ] , xs : [ 'btn-icon-xs' ] } ; const shapeClassesMap = { 'circle-dashed' : [ 'btn-icon-circle' , 'circle-dashed' ] , 'circle-solid' : [ 'btn-icon-circle' , 'circle-solid' ] , 'circle-thick-dashed' : [ 'btn-icon-circle' , 'circle-dashed' , 'border-thick' ] , 'circle-thick-solid' : [ 'btn-icon-circle' , 'circle-solid' , 'border-thick' ] , 'self-icon' : [ 'btn-icon-self-circle' ] } ; const themeClassesMap = { 'danger-weak' : [ 'btn-icon-danger-weak' ] } ; @ Component ( { selector : 'thy-button-icon,[thy-button-icon],[thyButtonIcon]' , templateUrl : './button-icon.component.html' , providers : [ UpdateHostClassService ] , encapsulation : ViewEncapsulation . None , changeDetection : ChangeDetectionStrategy . OnPush } ) export class ThyButtonIconComponent implements OnInit { @ Input ( ) set thySize ( size ) { this . size = size ; this . setClasses ( ) ; } @ Input ( ) set thyIcon ( icon ) { this . setIconClass ( icon ) ; } @ Input ( ) set thyButtonIcon ( icon ) { this . setIconClass ( icon ) ; } @ Input ( ) set thyShape ( value ) { this . shape = value ; this . setClasses ( ) ; } @ Input ( ) set thyLight ( value ) { this . _isLighted = coerceBooleanProperty ( value ) ; } @ Input ( ) set thyActive ( value ) { this . _isActive = coerceBooleanProperty ( value ) ; } @ Input ( ) set thyTheme ( value ) { this . theme = value ; this . setClasses ( ) ; } constructor ( elementRef , private updateHostClassService ) { this . updateHostClassService . initializeElement ( elementRef . nativeElement ) ; } private initialized = false ; private shape : IconShape ; private size : string ; iconPrefix = 'wtf' ; iconClasses : string [ ] ; icon : string ; theme : string ; svgIconName : string ; @ HostBinding ( 'class.btn' ) _isBtn = true ; @ HostBinding ( 'class.btn-icon' ) _isBtnIcon = true ; @ HostBinding ( 'class.btn-icon-light' ) _isLighted = false ; @ HostBinding ( 'class.btn-icon-active' ) _isActive = false ; @ Input ( ) thyColor : string ; private setIconClass ( icon ) { if ( icon ) { if ( icon . includes ( 'wtf' ) ) { const classes = icon . split ( ' ' ) ; if ( classes . length === 1 ) { classes . unshift ( 'wtf' ) ; } this . iconClasses = classes ; this . svgIconName = null ; } else { this . svgIconName = icon ; } } else { this . iconClasses = null ; this . svgIconName = null ; } } private setClasses ( first = false ) { if ( ! first && ! this . initialized ) { return ; } const classes = sizeClassesMap [ this . size ] ? [ ... sizeClassesMap [ this . size ] ] : [ ] ; if ( this . shape && shapeClassesMap [ this . shape ] ) { shapeClassesMap [ this . shape ] . forEach ( ( className ) => { classes . push ( className ) ; } ) ; } if ( this . theme && themeClassesMap [ this . theme ] ) { themeClassesMap [ this . theme ] . forEach ( ( className ) => { classes . push ( className ) ; } ) ; } this . updateHostClassService . updateClass ( classes ) ; } ngOnInit ( ) { this . setClasses ( true ) ; this . initialized = true ; } }