import { Attribute , ChangeDetectionStrategy , Component , ElementRef , Input , Renderer , ViewEncapsulation } from '@angular/core' ; import { Config } from '../../config/config' ; import { Ion } from '../ion' ; import { isTrueProperty } from '../../util/util' ; name module description usage advanced Component demo see {@link /docs/components#buttons Button Component Docs} see {@link /docs/components#fabs FabButton Docs} see {@link ../../fab/FabButton FabButton API Docs} see {@link ../../fab/FabContainer FabContainer API Docs} @ Component ( { selector : '[ion-button]' , template : '<span class="button-inner">' + '<ng-content></ng-content>' + '</span>' + '<div class="button-effect"></div>' , changeDetection : ChangeDetectionStrategy . OnPush , encapsulation : ViewEncapsulation . None , } ) export class Button extends Ion { hidden _role : string = 'button' ; hidden _size : string ; hidden _style : string = 'default' ; hidden _shape : string ; hidden _display : string ; hidden _decorator : string ; hidden _init : boolean ; input @ Input ( ) set large ( val ) { this . _attr ( '_size' , 'large' , val ) ; } input @ Input ( ) set small ( val ) { this . _attr ( '_size' , 'small' , val ) ; } input @ Input ( ) set default ( val ) { this . _attr ( '_size' , 'default' , val ) ; } input @ Input ( ) set outline ( val ) { this . _attr ( '_style' , 'outline' , val ) ; } input @ Input ( ) set clear ( val ) { this . _attr ( '_style' , 'clear' , val ) ; } input @ Input ( ) set solid ( val ) { this . _attr ( '_style' , 'solid' , val ) ; } input @ Input ( ) set round ( val ) { this . _attr ( '_shape' , 'round' , val ) ; } input @ Input ( ) set block ( val ) { this . _attr ( '_display' , 'block' , val ) ; } input @ Input ( ) set full ( val ) { this . _attr ( '_display' , 'full' , val ) ; } input @ Input ( ) set strong ( val ) { this . _attr ( '_decorator' , 'strong' , val ) ; } input @ Input ( ) set mode ( val ) { this . _assignCss ( false ) ; this . _mode = val ; this . _assignCss ( true ) ; } hidden _attr ( type , attrName , attrValue ) { if ( type === '_style' ) { this . _updateColor ( this . _color , false ) ; } this . _setClass ( ( < any > this ) [ type ] , false ) ; if ( isTrueProperty ( attrValue ) ) { ( < any > this ) [ type ] = attrName ; this . _setClass ( attrName , true ) ; } else { ( < any > this ) [ type ] = ( type === '_style' ? 'default' : null ) ; this . _setClass ( ( < any > this ) [ type ] , true ) ; } if ( type === '_style' ) { this . _updateColor ( this . _color , true ) ; } } input @ Input ( ) set color ( val ) { this . _updateColor ( this . _color , false ) ; this . _updateColor ( val , true ) ; this . _color = val ; } constructor ( @ Attribute ( 'ion-button' ) ionButton , config , elementRef , renderer ) { super ( config , elementRef , renderer ) ; this . _mode = config . get ( 'mode' ) ; if ( config . get ( 'hoverCSS' ) === false ) { this . setElementClass ( 'disable-hover' , true ) ; } if ( ionButton . trim ( ) . length > 0 ) { this . setRole ( ionButton ) ; } } hidden ngAfterContentInit ( ) { this . _init = true ; this . _assignCss ( true ) ; } hidden setRole ( val ) { this . _assignCss ( false ) ; this . _role = val ; this . _assignCss ( true ) ; } hidden _assignCss ( assignCssClass ) { let role = this . _role ; if ( role ) { this . setElementClass ( role , assignCssClass ) ; this . setElementClass ( `${ role }-${ this . _mode }` , assignCssClass ) ; this . _setClass ( this . _style , assignCssClass ) ; this . _setClass ( this . _shape , assignCssClass ) ; this . _setClass ( this . _display , assignCssClass ) ; this . _setClass ( this . _size , assignCssClass ) ; this . _setClass ( this . _decorator , assignCssClass ) ; this . _updateColor ( this . _color , assignCssClass ) ; } } hidden _setClass ( type , assignCssClass ) { if ( type && this . _init ) { type = type . toLocaleLowerCase ( ) ; this . setElementClass ( `${ this . _role }-${ type }` , assignCssClass ) ; this . setElementClass ( `${ this . _role }-${ type }-${ this . _mode }` , assignCssClass ) ; } } hidden _updateColor ( color , isAdd ) { if ( color && this . _init ) { let className = this . _role ; let style = this . _style ; style = ( this . _role !== 'bar-button' && style === 'solid' ? 'default' : style ) ; className += ( style !== null && style !== '' && style !== 'default' ? '-' + style . toLowerCase ( ) : '' ) ; if ( color !== null && color !== '' ) { this . setElementClass ( `${ className }-${ this . _mode }-${ color }` , isAdd ) ; } } } }