1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | import { __decorate } from "tslib";
|
7 |
|
8 |
|
9 | import '@material/mwc-icon/mwc-icon.js';
|
10 | import '@material/mwc-ripple/mwc-ripple.js';
|
11 | import { ariaProperty } from '@material/mwc-base/aria-property.js';
|
12 | import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers.js';
|
13 | import { html, LitElement } from 'lit';
|
14 | import { eventOptions, property, query, queryAsync, state } from 'lit/decorators.js';
|
15 | import { classMap } from 'lit/directives/class-map.js';
|
16 | import { ifDefined } from 'lit/directives/if-defined.js';
|
17 |
|
18 | export class ButtonBase extends LitElement {
|
19 | constructor() {
|
20 | super(...arguments);
|
21 | this.raised = false;
|
22 | this.unelevated = false;
|
23 | this.outlined = false;
|
24 | this.dense = false;
|
25 | this.disabled = false;
|
26 | this.trailingIcon = false;
|
27 | this.fullwidth = false;
|
28 | this.icon = '';
|
29 | this.label = '';
|
30 | this.expandContent = false;
|
31 | this.shouldRenderRipple = false;
|
32 | this.rippleHandlers = new RippleHandlers(() => {
|
33 | this.shouldRenderRipple = true;
|
34 | return this.ripple;
|
35 | });
|
36 | }
|
37 |
|
38 | renderOverlay() {
|
39 | return html ``;
|
40 | }
|
41 |
|
42 | renderRipple() {
|
43 | const filled = this.raised || this.unelevated;
|
44 | return this.shouldRenderRipple ?
|
45 | html `<mwc-ripple class="ripple" .primary="${!filled}" .disabled="${this.disabled}"></mwc-ripple>` :
|
46 | '';
|
47 | }
|
48 | focus() {
|
49 | const buttonElement = this.buttonElement;
|
50 | if (buttonElement) {
|
51 | this.rippleHandlers.startFocus();
|
52 | buttonElement.focus();
|
53 | }
|
54 | }
|
55 | blur() {
|
56 | const buttonElement = this.buttonElement;
|
57 | if (buttonElement) {
|
58 | this.rippleHandlers.endFocus();
|
59 | buttonElement.blur();
|
60 | }
|
61 | }
|
62 |
|
63 | getRenderClasses() {
|
64 | return {
|
65 | 'mdc-button--raised': this.raised,
|
66 | 'mdc-button--unelevated': this.unelevated,
|
67 | 'mdc-button--outlined': this.outlined,
|
68 | 'mdc-button--dense': this.dense,
|
69 | };
|
70 | }
|
71 | |
72 |
|
73 |
|
74 |
|
75 |
|
76 | render() {
|
77 | return html `
|
78 | <button
|
79 | id="button"
|
80 | class="mdc-button ${classMap(this.getRenderClasses())}"
|
81 | ?disabled="${this.disabled}"
|
82 | aria-label="${this.label || this.icon}"
|
83 | aria-haspopup="${ifDefined(this.ariaHasPopup)}"
|
84 | @focus="${this.handleRippleFocus}"
|
85 | @blur="${this.handleRippleBlur}"
|
86 | @mousedown="${this.handleRippleActivate}"
|
87 | @mouseenter="${this.handleRippleMouseEnter}"
|
88 | @mouseleave="${this.handleRippleMouseLeave}"
|
89 | @touchstart="${this.handleRippleActivate}"
|
90 | @touchend="${this.handleRippleDeactivate}"
|
91 | @touchcancel="${this.handleRippleDeactivate}">
|
92 | ${this.renderOverlay()}
|
93 | ${this.renderRipple()}
|
94 | <span class="leading-icon">
|
95 | <slot name="icon">
|
96 | ${this.icon && !this.trailingIcon ? this.renderIcon() : ''}
|
97 | </slot>
|
98 | </span>
|
99 | <span class="mdc-button__label">${this.label}</span>
|
100 | <span class="slot-container ${classMap({
|
101 | flex: this.expandContent
|
102 | })}">
|
103 | <slot></slot>
|
104 | </span>
|
105 | <span class="trailing-icon">
|
106 | <slot name="trailingIcon">
|
107 | ${this.icon && this.trailingIcon ? this.renderIcon() : ''}
|
108 | </slot>
|
109 | </span>
|
110 | </button>`;
|
111 | }
|
112 |
|
113 | renderIcon() {
|
114 | return html `
|
115 | <mwc-icon class="mdc-button__icon">
|
116 | ${this.icon}
|
117 | </mwc-icon>`;
|
118 | }
|
119 | handleRippleActivate(evt) {
|
120 | const onUp = () => {
|
121 | window.removeEventListener('mouseup', onUp);
|
122 | this.handleRippleDeactivate();
|
123 | };
|
124 | window.addEventListener('mouseup', onUp);
|
125 | this.rippleHandlers.startPress(evt);
|
126 | }
|
127 | handleRippleDeactivate() {
|
128 | this.rippleHandlers.endPress();
|
129 | }
|
130 | handleRippleMouseEnter() {
|
131 | this.rippleHandlers.startHover();
|
132 | }
|
133 | handleRippleMouseLeave() {
|
134 | this.rippleHandlers.endHover();
|
135 | }
|
136 | handleRippleFocus() {
|
137 | this.rippleHandlers.startFocus();
|
138 | }
|
139 | handleRippleBlur() {
|
140 | this.rippleHandlers.endFocus();
|
141 | }
|
142 | }
|
143 | ButtonBase.shadowRootOptions = { mode: 'open', delegatesFocus: true };
|
144 | __decorate([
|
145 | ariaProperty,
|
146 | property({ type: String, attribute: 'aria-haspopup' })
|
147 | ], ButtonBase.prototype, "ariaHasPopup", void 0);
|
148 | __decorate([
|
149 | property({ type: Boolean, reflect: true })
|
150 | ], ButtonBase.prototype, "raised", void 0);
|
151 | __decorate([
|
152 | property({ type: Boolean, reflect: true })
|
153 | ], ButtonBase.prototype, "unelevated", void 0);
|
154 | __decorate([
|
155 | property({ type: Boolean, reflect: true })
|
156 | ], ButtonBase.prototype, "outlined", void 0);
|
157 | __decorate([
|
158 | property({ type: Boolean })
|
159 | ], ButtonBase.prototype, "dense", void 0);
|
160 | __decorate([
|
161 | property({ type: Boolean, reflect: true })
|
162 | ], ButtonBase.prototype, "disabled", void 0);
|
163 | __decorate([
|
164 | property({ type: Boolean, attribute: 'trailingicon' })
|
165 | ], ButtonBase.prototype, "trailingIcon", void 0);
|
166 | __decorate([
|
167 | property({ type: Boolean, reflect: true })
|
168 | ], ButtonBase.prototype, "fullwidth", void 0);
|
169 | __decorate([
|
170 | property({ type: String })
|
171 | ], ButtonBase.prototype, "icon", void 0);
|
172 | __decorate([
|
173 | property({ type: String })
|
174 | ], ButtonBase.prototype, "label", void 0);
|
175 | __decorate([
|
176 | property({ type: Boolean })
|
177 | ], ButtonBase.prototype, "expandContent", void 0);
|
178 | __decorate([
|
179 | query('#button')
|
180 | ], ButtonBase.prototype, "buttonElement", void 0);
|
181 | __decorate([
|
182 | queryAsync('mwc-ripple')
|
183 | ], ButtonBase.prototype, "ripple", void 0);
|
184 | __decorate([
|
185 | state()
|
186 | ], ButtonBase.prototype, "shouldRenderRipple", void 0);
|
187 | __decorate([
|
188 | eventOptions({ passive: true })
|
189 | ], ButtonBase.prototype, "handleRippleActivate", null);
|
190 |
|
\ | No newline at end of file |