import { MdcComponent } from '@aurelia-mdc-web/base' ; import { MDCTabIndicatorFoundation , MDCTabIndicatorAdapter , MDCFadingTabIndicatorFoundation , MDCSlidingTabIndicatorFoundation } from '@material/tab-indicator' ; import { bindable } from 'aurelia-typed-observable-plugin' ; import { inject , useView , customElement } from 'aurelia-framework' ; import { PLATFORM } from 'aurelia-pal' ; @ inject ( Element ) @ useView ( PLATFORM . moduleName ( './mdc-tab-indicator.html' ) ) @ customElement ( 'mdc-tab-indicator' ) export class MdcTabIndicator extends MdcComponent < MDCTabIndicatorFoundation > { private content_ : HTMLElement ; @ bindable . booleanAttr fade : boolean ; @ bindable . booleanAttr active : boolean ; @ bindable icon : string ; computeContentClientRect ( ) { return this . foundation ! . computeContentClientRect ( ) ; } getDefaultFoundation ( ) { const adapter = { addClass : ( className ) => this . root . classList . add ( className ) , removeClass : ( className ) => this . root . classList . remove ( className ) , computeContentClientRect : ( ) => this . content_ . getBoundingClientRect ( ) , setContentStyleProperty : ( prop , value ) => this . content_ . style . setProperty ( prop , value ) , } ; if ( this . root . classList . contains ( MDCTabIndicatorFoundation . cssClasses . FADE ) ) { return new MDCFadingTabIndicatorFoundation ( adapter ) ; } return new MDCSlidingTabIndicatorFoundation ( adapter ) ; } activate ( previousIndicatorClientRect ? ) { this . foundation ?. activate ( previousIndicatorClientRect ) ; } deactivate ( ) { this . foundation ?. deactivate ( ) ; } }