import { Directive , ElementRef , HostBinding , Input , Renderer } from '@angular/core' ; import { isTrueProperty } from '../../util/util' ; import { Config } from '../../config/config' ; import { Ion } from '../ion' ; name description usage demo see {@link /docs/components#icons Icon Component Docs} @ Directive ( { selector : 'ion-icon' , host : { 'role' : 'img' } } ) export class Icon extends Ion { hidden _iconMode : string ; hidden _isActive : boolean = true ; hidden _name : string = '' ; hidden _ios : string = '' ; hidden _md : string = '' ; hidden _css : string = '' ; constructor ( config , elementRef , renderer ) { super ( config , elementRef , renderer , 'icon' ) ; this . _iconMode = config . get ( 'iconMode' ) ; } hidden ngOnDestroy ( ) { if ( this . _css ) { this . setElementClass ( this . _css , false ) ; } } input @ Input ( ) get name ( ) : string { return this . _name ; } set name ( val ) { if ( ! ( /^md-|^ios-|^logo-/ . test ( val ) ) ) { this . _name = this . _iconMode + '-' + val ; } else { this . _name = val ; } this . update ( ) ; } input @ Input ( ) get ios ( ) : string { return this . _ios ; } set ios ( val ) { this . _ios = val ; this . update ( ) ; } input @ Input ( ) get md ( ) : string { return this . _md ; } set md ( val ) { this . _md = val ; this . update ( ) ; } input @ Input ( ) get isActive ( ) : boolean { return this . _isActive ; } set isActive ( val ) { this . _isActive = isTrueProperty ( val ) ; this . update ( ) ; } hidden @ HostBinding ( 'class.hide' ) _hidden : boolean = false ; hidden update ( ) { let iconName ; if ( this . _ios && this . _iconMode === 'ios' ) { iconName = this . _ios ; } else if ( this . _md && this . _iconMode === 'md' ) { iconName = this . _md ; } else { iconName = this . _name ; } let hidden = this . _hidden = ( iconName === null ) ; if ( hidden ) { return ; } let iconMode = iconName . split ( '-' , 2 ) [ 0 ] ; if ( iconMode === 'ios' && ! this . _isActive && iconName . indexOf ( 'logo-' ) < 0 && iconName . indexOf ( '-outline' ) < 0 ) { iconName += '-outline' ; } let css = 'ion-' + iconName ; if ( this . _css === css ) { return ; } if ( this . _css ) { this . setElementClass ( this . _css , false ) ; } this . _css = css ; this . setElementClass ( css , true ) ; let label = iconName . replace ( 'ios-' , '' ) . replace ( 'md-' , '' ) . replace ( '-' , ' ' ) ; this . setElementAttribute ( 'aria-label' , label ) ; } }