license import '@material/mwc-icon/mwc-icon' ; import '@material/mwc-ripple/mwc-ripple' ; import { AriaHasPopup , ariaProperty } from '@material/mwc-base/aria-property' ; import { Ripple } from '@material/mwc-ripple/mwc-ripple' ; import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers' ; import { html , LitElement , TemplateResult } from 'lit' ; import { eventOptions , property , query , queryAsync , state } from 'lit/decorators.js' ; import { ClassInfo , classMap } from 'lit/directives/class-map.js' ; import { ifDefined } from 'lit/directives/if-defined.js' ; soyCompatible export class ButtonBase extends LitElement { static override shadowRootOptions : ShadowRootInit = { mode : 'open' , delegatesFocus : true } ; soyPrefixAttribute @ ariaProperty @ property ( { type : String , attribute : 'aria-haspopup' } ) override ariaHasPopup ! : AriaHasPopup ; @ property ( { type : Boolean , reflect : true } ) raised = false ; @ property ( { type : Boolean , reflect : true } ) unelevated = false ; @ property ( { type : Boolean , reflect : true } ) outlined = false ; @ property ( { type : Boolean } ) dense = false ; @ property ( { type : Boolean , reflect : true } ) disabled = false ; @ property ( { type : Boolean , attribute : 'trailingicon' } ) trailingIcon = false ; @ property ( { type : Boolean , reflect : true } ) fullwidth = false ; @ property ( { type : String } ) icon = '' ; @ property ( { type : String } ) label = '' ; @ property ( { type : Boolean } ) expandContent = false ; @ query ( '#button' ) buttonElement ! : HTMLElement ; @ queryAsync ( 'mwc-ripple' ) ripple ! : Promise < Ripple | null > ; @ state ( ) protected shouldRenderRipple = false ; protected rippleHandlers = new RippleHandlers ( ( ) => { this . shouldRenderRipple = true ; return this . ripple ; } ) ; soyTemplate protected renderOverlay ( ) { return html `` ; } soyTemplate protected renderRipple ( ) { const filled = this . raised || this . unelevated ; return this . shouldRenderRipple ? html `<mwc-ripple class="ripple" .primary="${ ! filled }" .disabled="${ this . disabled }"></mwc-ripple>` : '' ; } override focus ( ) { const buttonElement = this . buttonElement ; if ( buttonElement ) { this . rippleHandlers . startFocus ( ) ; buttonElement . focus ( ) ; } } override blur ( ) { const buttonElement = this . buttonElement ; if ( buttonElement ) { this . rippleHandlers . endFocus ( ) ; buttonElement . blur ( ) ; } } soyTemplate protected getRenderClasses ( ) { return { 'mdc-button--raised' : this . raised , 'mdc-button--unelevated' : this . unelevated , 'mdc-button--outlined' : this . outlined , 'mdc-button--dense' : this . dense , } ; } soyTemplate soyAttributes soyClasses protected override render ( ) { return html `
      <button
          id="button"
          class="mdc-button ${ classMap ( this . getRenderClasses ( ) ) }"
          ?disabled="${ this . disabled }"
          aria-label="${ this . label || this . icon }"
          aria-haspopup="${ ifDefined ( this . ariaHasPopup ) }"
          @focus="${ this . handleRippleFocus }"
          @blur="${ this . handleRippleBlur }"
          @mousedown="${ this . handleRippleActivate }"
          @mouseenter="${ this . handleRippleMouseEnter }"
          @mouseleave="${ this . handleRippleMouseLeave }"
          @touchstart="${ this . handleRippleActivate }"
          @touchend="${ this . handleRippleDeactivate }"
          @touchcancel="${ this . handleRippleDeactivate }">
        ${ this . renderOverlay ( ) }
        ${ this . renderRipple ( ) }
        <span class="leading-icon">
          <slot name="icon">
            ${ this . icon && ! this . trailingIcon ? this . renderIcon ( ) : '' }
          </slot>
        </span>
        <span class="mdc-button__label">${ this . label }</span>
        <span class="slot-container ${ classMap ( { flex : this . expandContent } ) }">
          <slot></slot>
        </span>
        <span class="trailing-icon">
          <slot name="trailingIcon">
            ${ this . icon && this . trailingIcon ? this . renderIcon ( ) : '' }
          </slot>
        </span>
      </button>` ; } soyTemplate protected renderIcon ( ) { return html `
    <mwc-icon class="mdc-button__icon">
      ${ this . icon }
    </mwc-icon>` ; } @ eventOptions ( { passive : true } ) protected handleRippleActivate ( evt ? ) { const onUp = ( ) => { window . removeEventListener ( 'mouseup' , onUp ) ; this . handleRippleDeactivate ( ) ; } ; window . addEventListener ( 'mouseup' , onUp ) ; this . rippleHandlers . startPress ( evt ) ; } protected handleRippleDeactivate ( ) { this . rippleHandlers . endPress ( ) ; } protected handleRippleMouseEnter ( ) { this . rippleHandlers . startHover ( ) ; } protected handleRippleMouseLeave ( ) { this . rippleHandlers . endHover ( ) ; } protected handleRippleFocus ( ) { this . rippleHandlers . startFocus ( ) ; } protected handleRippleBlur ( ) { this . rippleHandlers . endFocus ( ) ; } }