license 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 { ifDefined } from 'lit/directives/if-defined.js' ; soyCompatible export class IconButtonBase extends LitElement { @ property ( { type : Boolean , reflect : true } ) disabled = false ; @ property ( { type : String } ) icon = '' ; soyPrefixAttribute @ ariaProperty @ property ( { type : String , attribute : 'aria-label' } ) override ariaLabel ! : string ; soyPrefixAttribute @ ariaProperty @ property ( { type : String , attribute : 'aria-haspopup' } ) override ariaHasPopup ! : AriaHasPopup ; @ query ( 'button' ) buttonElement ! : HTMLElement ; @ queryAsync ( 'mwc-ripple' ) ripple ! : Promise < Ripple | null > ; @ state ( ) protected shouldRenderRipple = false ; protected rippleHandlers : RippleHandlers = new RippleHandlers ( ( ) => { this . shouldRenderRipple = true ; return this . ripple ; } ) ; soyTemplate protected renderRipple ( ) { return this . shouldRenderRipple ? html `
            <mwc-ripple
                .disabled="${ this . disabled }"
                unbounded>
            </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 override render ( ) { return html `<button
        class="mdc-icon-button mdc-icon-button--display-flex"
        aria-label="${ this . ariaLabel || this . icon }"
        aria-haspopup="${ ifDefined ( this . ariaHasPopup ) }"
        ?disabled="${ this . disabled }"
        @focus="${ this . handleRippleFocus }"
        @blur="${ this . handleRippleBlur }"
        @mousedown="${ this . handleRippleMouseDown }"
        @mouseenter="${ this . handleRippleMouseEnter }"
        @mouseleave="${ this . handleRippleMouseLeave }"
        @touchstart="${ this . handleRippleTouchStart }"
        @touchend="${ this . handleRippleDeactivate }"
        @touchcancel="${ this . handleRippleDeactivate }"
    >${ this . renderRipple ( ) }
    ${ this . icon ? html `<i class="material-icons">${ this . icon }</i>` : '' }
    <span
      ><slot></slot
    ></span>
  </button>` ; } @ eventOptions ( { passive : true } ) protected handleRippleMouseDown ( event ? ) { const onUp = ( ) => { window . removeEventListener ( 'mouseup' , onUp ) ; this . handleRippleDeactivate ( ) ; } ; window . addEventListener ( 'mouseup' , onUp ) ; this . rippleHandlers . startPress ( event ) ; } @ eventOptions ( { passive : true } ) protected handleRippleTouchStart ( event ? ) { this . rippleHandlers . startPress ( event ) ; } 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 ( ) ; } }