license import '@material/mwc-ripple/mwc-ripple' ; import { 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 { classMap } from 'lit/directives/class-map.js' ; import { ifDefined } from 'lit/directives/if-defined.js' ; soyCompatible export class IconButtonToggleBase extends LitElement { @ query ( '.mdc-icon-button' ) protected mdcRoot ! : HTMLElement ; soyPrefixAttribute @ ariaProperty @ property ( { type : String , attribute : 'aria-label' } ) override ariaLabel ! : string ; @ property ( { type : Boolean , reflect : true } ) disabled = false ; @ property ( { type : String } ) onIcon = '' ; @ property ( { type : String } ) offIcon = '' ; @ property ( { type : String } ) ariaLabelOn ! : string ; @ property ( { type : String } ) ariaLabelOff ! : string ; @ property ( { type : Boolean , reflect : true } ) on = false ; @ queryAsync ( 'mwc-ripple' ) ripple ! : Promise < Ripple | null > ; @ state ( ) protected shouldRenderRipple = false ; protected rippleHandlers : RippleHandlers = new RippleHandlers ( ( ) => { this . shouldRenderRipple = true ; return this . ripple ; } ) ; protected handleClick ( ) { this . on = ! this . on ; this . dispatchEvent ( new CustomEvent ( 'icon-button-toggle-change' , { detail : { isOn : this . on } , bubbles : true } ) ) ; } override click ( ) { this . mdcRoot . focus ( ) ; this . mdcRoot . click ( ) ; } override focus ( ) { this . rippleHandlers . startFocus ( ) ; this . mdcRoot . focus ( ) ; } override blur ( ) { this . rippleHandlers . endFocus ( ) ; this . mdcRoot . blur ( ) ; } soyTemplate protected renderRipple ( ) { return this . shouldRenderRipple ? html `
            <mwc-ripple
                .disabled="${ this . disabled }"
                unbounded>
            </mwc-ripple>` : '' ; } soyTemplate protected override render ( ) { classMap const classes = { 'mdc-icon-button--on' : this . on , } ; const hasToggledAriaLabel = this . ariaLabelOn !== undefined && this . ariaLabelOff !== undefined ; const ariaPressedValue = hasToggledAriaLabel ? undefined : this . on ; const ariaLabelValue = hasToggledAriaLabel ? ( this . on ? this . ariaLabelOn : this . ariaLabelOff ) : this . ariaLabel ; return html `<button
          class="mdc-icon-button mdc-icon-button--display-flex ${ classMap ( classes ) }"
          aria-pressed="${ ifDefined ( ariaPressedValue ) }"
          aria-label="${ ifDefined ( ariaLabelValue ) }"
          @click="${ this . handleClick }"
          ?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 ( ) }
        <span class="mdc-icon-button__icon"
          ><slot name="offIcon"
            ><i class="material-icons">${ this . offIcon }</i
          ></slot
        ></span>
        <span class="mdc-icon-button__icon mdc-icon-button__icon--on"
          ><slot name="onIcon"
            ><i class="material-icons">${ this . onIcon }</i
          ></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 ( ) ; } }