license import { matches } from '@material/dom/ponyfill' ; import { addHasRemoveClass , BaseElement } from '@material/mwc-base/base-element' ; import { MDCTabScrollerAdapter } from '@material/tab-scroller/adapter' ; import MDCTabScrollerFoundation from '@material/tab-scroller/foundation' ; import { html } from 'lit' ; import { eventOptions , query } from 'lit/decorators.js' ; export class TabScrollerBase extends BaseElement { protected mdcFoundation ! : MDCTabScrollerFoundation ; protected mdcFoundationClass = MDCTabScrollerFoundation ; @ query ( '.mdc-tab-scroller' ) protected mdcRoot ! : HTMLElement ; @ query ( '.mdc-tab-scroller__scroll-area' ) protected scrollAreaElement ! : HTMLElement ; @ query ( '.mdc-tab-scroller__scroll-content' ) protected scrollContentElement ! : HTMLElement ; @ eventOptions ( { passive : true } ) protected _handleInteraction ( ) { this . mdcFoundation . handleInteraction ( ) ; } protected _handleTransitionEnd ( e ) { this . mdcFoundation . handleTransitionEnd ( e ) ; } protected _scrollbarHeight = - 1 ; protected override render ( ) { return html `
      <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area"
            @wheel="${ this . _handleInteraction }"
            @touchstart="${ this . _handleInteraction }"
            @pointerdown="${ this . _handleInteraction }"
            @mousedown="${ this . _handleInteraction }"
            @keydown="${ this . _handleInteraction }"
            @transitionend="${ this . _handleTransitionEnd }">
          <div class="mdc-tab-scroller__scroll-content"><slot></slot></div>
        </div>
      </div>
      ` ; } protected createAdapter ( ) { return { ... addHasRemoveClass ( this . mdcRoot ) , eventTargetMatchesSelector : ( evtTarget , selector ) => matches ( evtTarget as Element , selector ) , addScrollAreaClass : ( className ) => this . scrollAreaElement . classList . add ( className ) , setScrollAreaStyleProperty : ( prop , value ) => this . scrollAreaElement . style . setProperty ( prop , value ) , setScrollContentStyleProperty : ( prop , value ) => this . scrollContentElement . style . setProperty ( prop , value ) , getScrollContentStyleValue : ( propName ) => window . getComputedStyle ( this . scrollContentElement ) . getPropertyValue ( propName ) , setScrollAreaScrollLeft : ( scrollX ) => this . scrollAreaElement . scrollLeft = scrollX , getScrollAreaScrollLeft : ( ) => this . scrollAreaElement . scrollLeft , getScrollContentOffsetWidth : ( ) => this . scrollContentElement . offsetWidth , getScrollAreaOffsetWidth : ( ) => this . scrollAreaElement . offsetWidth , computeScrollAreaClientRect : ( ) => this . scrollAreaElement . getBoundingClientRect ( ) , computeScrollContentClientRect : ( ) => this . scrollContentElement . getBoundingClientRect ( ) , computeHorizontalScrollbarHeight : ( ) => { if ( this . _scrollbarHeight === - 1 ) { this . scrollAreaElement . style . overflowX = 'scroll' ; this . _scrollbarHeight = this . scrollAreaElement . offsetHeight - this . scrollAreaElement . clientHeight ; this . scrollAreaElement . style . overflowX = '' ; } return this . _scrollbarHeight ; } , } ; } return { number } getScrollPosition ( ) { return this . mdcFoundation . getScrollPosition ( ) ; } return { number } getScrollContentWidth ( ) { return this . scrollContentElement . offsetWidth ; } param { number } scrollXIncrement incrementScrollPosition ( scrollXIncrement ) { this . mdcFoundation . incrementScroll ( scrollXIncrement ) ; } param { number } scrollX scrollToPosition ( scrollX ) { this . mdcFoundation . scrollTo ( scrollX ) ; } }