1+ /**
2+ * @license
3+ * Copyright 2021 Google LLC
4+ * SPDX-License-Identifier: Apache-2.0
5+ */
6+
7+ // Style preference for leading underscores.
8+ // tslint:disable:strip-private-property-underscore
9+
10+ import '@material/mwc-ripple/mwc-ripple' ;
11+
12+ import { Ripple } from '@material/mwc-ripple/mwc-ripple' ;
13+ import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers' ;
14+ import { html , LitElement , TemplateResult } from 'lit' ;
15+ import { eventOptions , property , queryAsync , state } from 'lit/decorators.js' ;
16+ import { ClassInfo , classMap } from 'lit/directives/class-map.js' ;
17+
18+ /**
19+ * Fab Base class logic and template definition
20+ * @soyCompatible
21+ */
22+ export class FabShared extends LitElement {
23+ static override shadowRootOptions :
24+ ShadowRootInit = { mode : 'open' , delegatesFocus : true } ;
25+
26+ @queryAsync ( 'mwc-ripple' ) ripple ! : Promise < Ripple | null > ;
27+
28+ @property ( { type : Boolean } ) disabled = false ;
29+
30+ @property ( ) icon = '' ;
31+
32+ @property ( ) label = '' ;
33+
34+ @property ( { type : Boolean } ) lowered = false ;
35+
36+ @state ( ) protected shouldRenderRipple = false ;
37+
38+ protected rippleHandlers = new RippleHandlers ( ( ) => {
39+ this . shouldRenderRipple = true ;
40+ return this . ripple ;
41+ } ) ;
42+
43+ /**
44+ * @soyTemplate
45+ * @soyClasses fabClasses: .md3-fab
46+ */
47+ protected override render ( ) : TemplateResult {
48+ const ariaLabel = this . label ? this . label : this . icon ;
49+
50+ /*
51+ * Some internal styling is sensitive to whitespace in this template, take
52+ * care when modifying it.
53+ */
54+ return html `
55+ < button
56+ class ="md3-fab md3-surface ${ classMap ( this . getRootClasses ( ) ) }
57+ ?disabled ="${ this . disabled }
58+ aria-label ="${ ariaLabel }
59+ @mouseenter =${ this . handleRippleMouseEnter }
60+ @mouseleave =${ this . handleRippleMouseLeave }
61+ @focus=${ this . handleRippleFocus }
62+ @blur=${ this . handleRippleBlur }
63+ @mousedown=${ this . handleRippleActivate }
64+ @touchstart=${ this . handleRippleStartPress }
65+ @touchend=${ this . handleRippleDeactivate }
66+ @touchcancel=${ this . handleRippleDeactivate } > <!--
67+ --> ${ this . renderElevationOverlay ( ) } <!--
68+ --> ${ this . renderRipple ( ) } <!--
69+ --> < span class ="material-icons md3-fab__icon "> <!--
70+ --> < slot name ="icon "> ${ this . icon } </ slot > <!--
71+ --> </ span > <!--
72+ --> ${ this . renderLabel ( ) } <!--
73+ --> ${ this . renderTouchTarget ( ) }
74+ </ button > ` ;
75+ }
76+
77+ /** @soyTemplate */
78+ protected getRootClasses ( ) : ClassInfo {
79+ return { 'md3-fab--lowered' : this . lowered } ;
80+ }
81+
82+ /** @soyTemplate */
83+ protected renderIcon ( ) : TemplateResult {
84+ // TODO(b/191914389): reimplement once Wit issue is resolved
85+ return html `` ;
86+ }
87+
88+ /** @soyTemplate */
89+ protected renderTouchTarget ( ) : TemplateResult {
90+ return html `` ;
91+ }
92+
93+ /** @soyTemplate */
94+ protected renderLabel ( ) : TemplateResult {
95+ return html `` ;
96+ }
97+
98+ /** @soyTemplate */
99+ protected renderElevationOverlay ( ) : TemplateResult {
100+ return html `< div class ="md3-elevation-overlay "> </ div > ` ;
101+ }
102+
103+ /** @soyTemplate */
104+ protected renderRipple ( ) : TemplateResult {
105+ return this . shouldRenderRipple ? html `
106+ < mwc-ripple
107+ class ="md3-fab__ripple "
108+ internalUseStateLayerCustomProperties >
109+ </ mwc-ripple > ` :
110+ html `` ;
111+ }
112+
113+ protected handleRippleActivate ( event ?: Event ) {
114+ const onUp = ( ) => {
115+ window . removeEventListener ( 'mouseup' , onUp ) ;
116+
117+ this . handleRippleDeactivate ( ) ;
118+ } ;
119+
120+ window . addEventListener ( 'mouseup' , onUp ) ;
121+ this . handleRippleStartPress ( event ) ;
122+ }
123+
124+ @eventOptions ( { passive : true } )
125+ protected handleRippleStartPress ( event ?: Event ) {
126+ this . rippleHandlers . startPress ( event ) ;
127+ }
128+
129+ protected handleRippleDeactivate ( ) {
130+ this . rippleHandlers . endPress ( ) ;
131+ }
132+
133+ protected handleRippleMouseEnter ( ) {
134+ this . rippleHandlers . startHover ( ) ;
135+ }
136+
137+ protected handleRippleMouseLeave ( ) {
138+ this . rippleHandlers . endHover ( ) ;
139+ }
140+
141+ protected handleRippleFocus ( ) {
142+ this . rippleHandlers . startFocus ( ) ;
143+ }
144+
145+ protected handleRippleBlur ( ) {
146+ this . rippleHandlers . endFocus ( ) ;
147+ }
148+ }
0 commit comments