import { MdcComponent , MdcFocusTrap } from '@aurelia-mdc-web/base' ; import { CloseReason , events , MDCBannerAdapter , MDCBannerCloseEventDetail , MDCBannerFoundation } from '@material/banner' ; import { inject } from 'aurelia-dependency-injection' ; import { PLATFORM } from 'aurelia-pal' ; import { customElement , useView } from 'aurelia-templating' ; import { bindable } from 'aurelia-typed-observable-plugin' ; events . CLOSED = events . CLOSED . toLowerCase ( ) ; events . CLOSING = events . CLOSING . toLowerCase ( ) ; events . OPENED = events . OPENED . toLowerCase ( ) ; events . OPENING = events . OPENING . toLowerCase ( ) ; selector @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-banner.html' ) ) @ customElement ( 'mdc-banner' ) export class MdcBanner extends MdcComponent < MDCBannerFoundation > { private contentEl : HTMLElement ; private mdcFocusTrap : MdcFocusTrap ; @ bindable . booleanAttr fixed : boolean ; @ bindable . booleanAttr centered : boolean ; @ bindable icon : string ; @ bindable primaryAction : string ; @ bindable secondaryAction : string ; handlePrimaryActionClick ( ) { this . foundation ?. handlePrimaryActionClick ( ) ; } handleSecondaryActionClick ( ) { this . foundation ?. handleSecondaryActionClick ( ) ; } /**
     * Opens the banner and fires events.OPENING to indicate the beginning of its
     * opening animation and then events.OPENED once the animation finishes.
     */ open ( ) { this . foundation ?. open ( ) ; } param reason close ( reason ) { this . foundation ?. close ( reason ) ; } getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => { this . root . classList . add ( className ) ; } , getContentHeight : ( ) => { return this . contentEl . offsetHeight ; } , notifyClosed : ( reason ) => { this . emit < MDCBannerCloseEventDetail > ( events . CLOSED , { reason } ) ; } , notifyClosing : ( reason ) => { this . emit < MDCBannerCloseEventDetail > ( events . CLOSING , { reason } ) ; } , notifyOpened : ( ) => { this . emit ( events . OPENED , { } ) ; } , notifyOpening : ( ) => { this . emit ( events . OPENING , { } ) ; } , releaseFocus : ( ) => { this . mdcFocusTrap ?. releaseFocus ( ) ; } , removeClass : ( className ) => { this . root . classList . remove ( className ) ; } , setStyleProperty : ( propertyName , value ) => { this . root . style . setProperty ( propertyName , value ) ; } , trapFocus : ( ) => { this . mdcFocusTrap ?. trapFocus ( ) ; } , } ; return new MDCBannerFoundation ( adapter ) ; } }