license import { addHasRemoveClass , BaseElement } from '@material/mwc-base/base-element' ; import { supportsPassiveEventListener } from '@material/mwc-base/utils' ; import { MDCTopAppBarAdapter } from '@material/top-app-bar/adapter' ; import { strings } from '@material/top-app-bar/constants' ; import MDCTopAppBarBaseFoundation from '@material/top-app-bar/foundation' ; import { html } from 'lit' ; import { property , query } from 'lit/decorators.js' ; import { classMap } from 'lit/directives/class-map.js' ; export const passiveEventOptionsIfSupported = supportsPassiveEventListener ? { passive : true } : undefined ; interface ClassInfo { [ key ] : boolean ; } export abstract class TopAppBarBaseBase extends BaseElement { protected abstract override mdcFoundation : MDCTopAppBarBaseFoundation ; protected abstract override mdcFoundationClass : typeof MDCTopAppBarBaseFoundation ; @ query ( '.mdc-top-app-bar' ) protected mdcRoot ! : HTMLElement ; @ query ( 'slot[name="actionItems"]' ) protected _actionItemsSlot ! : HTMLElement ; protected _scrollTarget ! : HTMLElement | Window ; @ property ( { type : Boolean } ) centerTitle = false ; @ property ( { type : Object } ) get scrollTarget ( ) { return this . _scrollTarget || window ; } set scrollTarget ( value ) { this . unregisterScrollListener ( ) ; const old = this . scrollTarget ; this . _scrollTarget = value ; this . updateRootPosition ( ) ; this . requestUpdate ( 'scrollTarget' , old ) ; this . registerScrollListener ( ) ; } protected updateRootPosition ( ) { if ( this . mdcRoot ) { const windowScroller = this . scrollTarget === window ; this . mdcRoot . style . position = windowScroller ? '' : 'absolute' ; } } /**
     * classMap map for classes on the bar
     */ protected abstract barClasses ( ) ; /**
     * classMap map for classes on the content slot
     */ protected abstract contentClasses ( ) ; protected override render ( ) { let title = html `<span class="mdc-top-app-bar__title"><slot name="title"></slot></span>` ; if ( this . centerTitle ) { title = html `<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-center">${ title }</section>` ; } return html `
      <header class="mdc-top-app-bar ${ classMap ( this . barClasses ( ) ) }">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start" id="navigation">
          <slot name="navigationIcon"
            @click=${ this . handleNavigationClick }></slot>
          ${ this . centerTitle ? null : title }
        </section>
        ${ this . centerTitle ? title : null }
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" id="actions" role="toolbar">
          <slot name="actionItems"></slot>
        </section>
      </div>
    </header>
    <div class="${ classMap ( this . contentClasses ( ) ) }">
      <slot></slot>
    </div>
    ` ; } protected createAdapter ( ) { return { ... addHasRemoveClass ( this . mdcRoot ) , setStyle : ( property , value ) => this . mdcRoot . style . setProperty ( property , value ) , getTopAppBarHeight : ( ) => this . mdcRoot . clientHeight , notifyNavigationIconClicked : ( ) => { this . dispatchEvent ( new Event ( strings . NAVIGATION_EVENT , { bubbles : true , cancelable : true } ) ) ; } , getViewportScrollY : ( ) => this . scrollTarget instanceof Window ? this . scrollTarget . pageYOffset : this . scrollTarget . scrollTop , getTotalActionItems : ( ) => ( this . _actionItemsSlot as HTMLSlotElement ) . assignedNodes ( { flatten : true } ) . length , } ; } protected handleTargetScroll = ( ) => { this . mdcFoundation . handleTargetScroll ( ) ; } ; protected handleNavigationClick = ( ) => { this . mdcFoundation . handleNavigationClick ( ) ; } ; protected registerListeners ( ) { this . registerScrollListener ( ) ; } protected unregisterListeners ( ) { this . unregisterScrollListener ( ) ; } protected registerScrollListener ( ) { this . scrollTarget . addEventListener ( 'scroll' , this . handleTargetScroll , passiveEventOptionsIfSupported ) ; } protected unregisterScrollListener ( ) { this . scrollTarget . removeEventListener ( 'scroll' , this . handleTargetScroll ) ; } protected override firstUpdated ( ) { super . firstUpdated ( ) ; this . updateRootPosition ( ) ; this . registerListeners ( ) ; } override disconnectedCallback ( ) { super . disconnectedCallback ( ) ; this . unregisterListeners ( ) ; } }