import { Component , ElementRef , EventEmitter , HostListener , Input , OnDestroy , OnInit , Optional , Output , Renderer , ViewEncapsulation } from '@angular/core' ; import { Config } from '../../config/config' ; import { Form , IonicTapInput } from '../../util/form' ; import { Ion } from '../ion' ; import { isBlank , isCheckedProperty , isPresent , isTrueProperty } from '../../util/util' ; import { Item } from '../item/item' ; import { RadioGroup } from './radio-group' ; description usage demo see {@link /docs/components#radio Radio Component Docs} see {@link ../RadioGroup RadioGroup API Docs} @ Component ( { selector : 'ion-radio' , template : '<div class="radio-icon" [class.radio-checked]="_checked"> ' + '<div class="radio-inner"></div> ' + '</div> ' + '<button role="radio" ' + 'type="button" ' + 'ion-button="item-cover" ' + '[id]="id" ' + '[attr.aria-checked]="_checked" ' + '[attr.aria-labelledby]="_labelId" ' + '[attr.aria-disabled]="_disabled" ' + 'class="item-cover"> ' + '</button>' , host : { '[class.radio-disabled]' : '_disabled' } , encapsulation : ViewEncapsulation . None , } ) export class RadioButton extends Ion implements IonicTapInput , OnDestroy , OnInit { internal _checked : boolean = false ; internal _disabled : boolean = false ; internal _labelId : string ; internal _value : any = null ; internal id : string ; input @ Input ( ) set color ( val ) { this . _setColor ( val ) ; if ( this . _item ) { this . _item . _updateColor ( val , 'item-radio' ) ; } } output @ Output ( ) ionSelect : EventEmitter < any > = new EventEmitter ( ) ; constructor ( private _form , config , elementRef , renderer , @ Optional ( ) private _item , @ Optional ( ) private _group ) { super ( config , elementRef , renderer , 'radio' ) ; _form . register ( this ) ; if ( _group ) { this . id = 'rb-' + _group . add ( this ) ; } if ( _item ) { this . id = 'rb-' + _item . registerInput ( 'radio' ) ; this . _labelId = 'lbl-' + _item . id ; this . _item . setElementClass ( 'item-radio' , true ) ; } } input @ Input ( ) get value ( ) : any { return isBlank ( this . _value ) ? this . id : this . _value ; } set value ( val ) { this . _value = val ; } input @ Input ( ) get checked ( ) : boolean { return this . _checked ; } set checked ( val ) { this . _checked = isTrueProperty ( val ) ; if ( this . _item ) { this . _item . setElementClass ( 'item-radio-checked' , this . _checked ) ; } } input @ Input ( ) get disabled ( ) : boolean { return this . _disabled || ( this . _group != null && this . _group . disabled ) ; } set disabled ( val ) { this . _disabled = isTrueProperty ( val ) ; this . _item && this . _item . setElementClass ( 'item-radio-disabled' , this . _disabled ) ; } hidden initFocus ( ) { this . _elementRef . nativeElement . querySelector ( 'button' ) . focus ( ) ; } internal @ HostListener ( 'click' , [ '$event' ] ) _click ( ev ) { console . debug ( 'radio, select' , this . id ) ; ev . preventDefault ( ) ; ev . stopPropagation ( ) ; this . checked = true ; this . ionSelect . emit ( this . value ) ; } internal ngOnInit ( ) { if ( this . _group && isPresent ( this . _group . value ) ) { this . checked = isCheckedProperty ( this . _group . value , this . value ) ; } if ( this . _group && this . _group . disabled ) { this . disabled = this . _group . disabled ; } } internal ngOnDestroy ( ) { this . _form . deregister ( this ) ; this . _group && this . _group . remove ( this ) ; } }