license import { MDCComponent } from '@material/base/component' ; import { SpecificEventListener } from '@material/base/types' ; import { MDCRipple , MDCRippleFactory } from '@material/ripple/component' ; import { MDCRippleFoundation } from '@material/ripple/foundation' ; import { MDCRippleCapableSurface } from '@material/ripple/types' ; import { MDCTabIndicator , MDCTabIndicatorFactory } from '@material/tab-indicator/component' ; import { MDCTabAdapter } from './adapter' ; import { MDCTabFoundation } from './foundation' ; import { MDCTabDimensions , MDCTabInteractionEventDetail } from './types' ; export type MDCTabFactory = ( el : Element , foundation ? : MDCTabFoundation ) => MDCTab ; export class MDCTab extends MDCComponent < MDCTabFoundation > implements MDCRippleCapableSurface { static override attachTo ( root ) { return new MDCTab ( root ) ; } id ! : string ; private ripple ! : MDCRipple ; private tabIndicator ! : MDCTabIndicator ; private content ! : HTMLElement ; private handleClick ! : SpecificEventListener < 'click' > ; override initialize ( rippleFactory = ( el , foundation ) => new MDCRipple ( el , foundation ) , tabIndicatorFactory = ( el ) => new MDCTabIndicator ( el ) ) { this . id = this . root . id ; const rippleFoundation = new MDCRippleFoundation ( MDCRipple . createAdapter ( this ) ) ; this . ripple = rippleFactory ( this . root , rippleFoundation ) ; const tabIndicatorElement = this . root . querySelector ( MDCTabFoundation . strings . TAB_INDICATOR_SELECTOR ) ! ; this . tabIndicator = tabIndicatorFactory ( tabIndicatorElement ) ; this . content = this . root . querySelector < HTMLElement > ( MDCTabFoundation . strings . CONTENT_SELECTOR ) ! ; } override initialSyncWithDOM ( ) { this . handleClick = ( ) => { this . foundation . handleClick ( ) ; } ; this . listen ( 'click' , this . handleClick ) ; } override destroy ( ) { this . unlisten ( 'click' , this . handleClick ) ; this . ripple . destroy ( ) ; super . destroy ( ) ; } override getDefaultFoundation ( ) { const adapter = { setAttr : ( attr , value ) => this . root . setAttribute ( attr , value ) , addClass : ( className ) => this . root . classList . add ( className ) , removeClass : ( className ) => this . root . classList . remove ( className ) , hasClass : ( className ) => this . root . classList . contains ( className ) , activateIndicator : ( previousIndicatorClientRect ) => { this . tabIndicator . activate ( previousIndicatorClientRect ) ; } , deactivateIndicator : ( ) => { this . tabIndicator . deactivate ( ) ; } , notifyInteracted : ( ) => this . emit < MDCTabInteractionEventDetail > ( MDCTabFoundation . strings . INTERACTED_EVENT , { tabId : this . id } , true ) , getOffsetLeft : ( ) => ( this . root as HTMLElement ) . offsetLeft , getOffsetWidth : ( ) => ( this . root as HTMLElement ) . offsetWidth , getContentOffsetLeft : ( ) => this . content . offsetLeft , getContentOffsetWidth : ( ) => this . content . offsetWidth , focus : ( ) => ( this . root as HTMLElement ) . focus ( ) , } ; return new MDCTabFoundation ( adapter ) ; } /**
     * Getter for the active state of the tab
     */ get active ( ) : boolean { return this . foundation . isActive ( ) ; } set focusOnActivate ( focusOnActivate ) { this . foundation . setFocusOnActivate ( focusOnActivate ) ; } /**
     * Activates the tab
     */ activate ( computeIndicatorClientRect ? ) { this . foundation . activate ( computeIndicatorClientRect ) ; } /**
     * Deactivates the tab
     */ deactivate ( ) { this . foundation . deactivate ( ) ; } /**
     * Returns the indicator's client rect
     */ computeIndicatorClientRect ( ) { return this . tabIndicator . computeContentClientRect ( ) ; } computeDimensions ( ) { return this . foundation . computeDimensions ( ) ; } /**
     * Focuses the tab
     */ focus ( ) { ( this . root as HTMLElement ) . focus ( ) ; } }