license import '@material/mwc-tab' ; import '@material/mwc-tab-scroller' ; import { BaseElement } from '@material/mwc-base/base-element' ; import { observer } from '@material/mwc-base/observer' ; import { Tab } from '@material/mwc-tab' ; import { TabScroller } from '@material/mwc-tab-scroller' ; import { TabBase } from '@material/mwc-tab/mwc-tab-base' ; import { MDCTabBarAdapter } from '@material/tab-bar/adapter' ; import MDCTabBarFoundation from '@material/tab-bar/foundation' ; import { MDCTabInteractionEvent } from '@material/tab/types' ; import { html } from 'lit' ; import { property , query } from 'lit/decorators.js' ; export class TabBarBase extends BaseElement { protected mdcFoundation ! : MDCTabBarFoundation ; protected readonly mdcFoundationClass = MDCTabBarFoundation ; @ query ( '.mdc-tab-bar' ) protected mdcRoot ! : HTMLElement ; @ query ( 'mwc-tab-scroller' ) protected scrollerElement ! : TabScroller ; @ query ( 'slot' ) protected tabsSlot ! : HTMLElement ; @ observer ( async function ( this ) { await this . updateComplete ; if ( this . activeIndex !== this . _previousActiveIndex ) { this . mdcFoundation . activateTab ( this . activeIndex ) ; } } ) @ property ( { type : Number } ) activeIndex = 0 ; protected _previousActiveIndex = - 1 ; protected _handleTabInteraction ( e ) { this . mdcFoundation . handleTabInteraction ( e ) ; } protected _handleKeydown ( e ) { this . mdcFoundation . handleKeyDown ( e ) ; } protected override render ( ) { return html `
      <div class="mdc-tab-bar" role="tablist"
          @MDCTab:interacted="${ this . _handleTabInteraction }"
          @keydown="${ this . _handleKeydown }">
        <mwc-tab-scroller><slot></slot></mwc-tab-scroller>
      </div>
      ` ; } protected _getTabs ( ) { return ( this . tabsSlot as HTMLSlotElement ) . assignedNodes ( { flatten : true } ) . filter ( ( e ) => e instanceof TabBase ) as Tab [ ] ; } protected _getTab ( index ) { return this . _getTabs ( ) [ index ] ; } protected createAdapter ( ) { return { scrollTo : ( scrollX ) => this . scrollerElement . scrollToPosition ( scrollX ) , incrementScroll : ( scrollXIncrement ) => this . scrollerElement . incrementScrollPosition ( scrollXIncrement ) , getScrollPosition : ( ) => this . scrollerElement . getScrollPosition ( ) , getScrollContentWidth : ( ) => this . scrollerElement . getScrollContentWidth ( ) , getOffsetWidth : ( ) => this . mdcRoot . offsetWidth , isRTL : ( ) => window . getComputedStyle ( this . mdcRoot ) . getPropertyValue ( 'direction' ) === 'rtl' , setActiveTab : ( index ) => this . mdcFoundation . activateTab ( index ) , activateTabAtIndex : ( index , clientRect ) => { const tab = this . _getTab ( index ) ; if ( tab !== undefined ) { tab . activate ( clientRect ) ; } this . _previousActiveIndex = index ; } , deactivateTabAtIndex : ( index ) => { const tab = this . _getTab ( index ) ; if ( tab !== undefined ) { tab . deactivate ( ) ; } } , focusTabAtIndex : ( index ) => { const tab = this . _getTab ( index ) ; if ( tab !== undefined ) { tab . focus ( ) ; } } , getTabIndicatorClientRectAtIndex : ( index ) => { const tab = this . _getTab ( index ) ; return tab !== undefined ? tab . computeIndicatorClientRect ( ) : new DOMRect ( ) ; } , getTabDimensionsAtIndex : ( index ) => { const tab = this . _getTab ( index ) ; return tab !== undefined ? tab . computeDimensions ( ) : { rootLeft : 0 , rootRight : 0 , contentLeft : 0 , contentRight : 0 } ; } , getPreviousActiveTabIndex : ( ) => { return this . _previousActiveIndex ; } , getFocusedTabIndex : ( ) => { const tabElements = this . _getTabs ( ) ; const activeElement = ( this . getRootNode ( ) as ShadowRoot ) . activeElement as Tab ; return tabElements . indexOf ( activeElement ) ; } , getIndexOfTabById : ( id ) => { const tabElements = this . _getTabs ( ) ; for ( let i = 0 ; i < tabElements . length ; i ++ ) { if ( tabElements [ i ] . id === id ) { return i ; } } return - 1 ; } , getTabListLength : ( ) => this . _getTabs ( ) . length , notifyTabActivated : ( index ) => { this . activeIndex = index ; this . dispatchEvent ( new CustomEvent ( MDCTabBarFoundation . strings . TAB_ACTIVATED_EVENT , { detail : { index } , bubbles : true , cancelable : true } ) ) ; } , } ; } protected override firstUpdated ( ) { } protected override async getUpdateComplete ( ) { const result = await super . getUpdateComplete ( ) ; await this . scrollerElement . updateComplete ; if ( this . mdcFoundation === undefined ) { this . createFoundation ( ) ; } return result ; } scrollIndexIntoView ( index ) { this . mdcFoundation . scrollIntoView ( index ) ; } }