import { Component , ContentChild , ContentChildren , QueryList } from '@angular/core' ; import { Platform } from '../../platform/platform' ; import { UIEventManager } from '../../gestures/ui-event-manager' ; import { FabButton } from './fab' ; import { FabList } from './fab-list' ; name module description property property property property property property property usage demo see {@link /docs/components#fabs FAB Component Docs} @ Component ( { selector : 'ion-fab' , template : '<ng-content></ng-content>' } ) export class FabContainer { hidden _events : UIEventManager ; hidden _listsActive : boolean = false ; hidden @ ContentChild ( FabButton ) _mainButton : FabButton ; hidden @ ContentChildren ( FabList ) _fabLists : QueryList < FabList > ; constructor ( plt ) { this . _events = new UIEventManager ( plt ) ; } hidden ngAfterContentInit ( ) { const mainButton = this . _mainButton ; if ( ! mainButton || ! mainButton . getNativeElement ( ) ) { console . error ( 'FAB container needs a main <button ion-fab>' ) ; return ; } this . _events . listen ( mainButton . getNativeElement ( ) , 'click' , this . clickHandler . bind ( this ) , { zone : true } ) ; } hidden clickHandler ( ev ) { if ( this . canActivateList ( ev ) ) { this . toggleList ( ) ; } } hidden canActivateList ( ev ) { if ( this . _fabLists . length > 0 && this . _mainButton && ev . target ) { let ele = ev . target . closest ( 'ion-fab>[ion-fab]' ) ; return ( ele && ele === this . _mainButton . getNativeElement ( ) ) ; } return false ; } hidden toggleList ( ) { this . setActiveLists ( ! this . _listsActive ) ; } hidden setActiveLists ( isActive ) { if ( isActive === this . _listsActive ) { return ; } let lists = this . _fabLists . toArray ( ) ; for ( let list of lists ) { list . setVisible ( isActive ) ; } this . _mainButton . setActiveClose ( isActive ) ; this . _listsActive = isActive ; } /**
     * Close an active FAB list container
     */ close ( ) { this . setActiveLists ( false ) ; } hidden ngOnDestroy ( ) { this . _events . destroy ( ) ; } }