1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at htp://mozilla.org/MPL/2.0/. */
import { html, ifDefined } from "../vendor/lit.all.mjs";
import { MozLitElement } from "../lit-utils.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://global/content/elements/moz-label.mjs";
/**
* A simple toggle element that can be used to switch between two states.
*
* @tagname moz-toggle
* @property {boolean} pressed - Whether or not the element is pressed.
* @property {boolean} disabled - Whether or not the element is disabled.
* @property {string} label - The label text.
* @property {string} description - The description text.
* @property {string} ariaLabel
* The aria-label text for cases where there is no visible label.
* @slot support-link - Used to append a moz-support-link to the description.
* @fires toggle
* Custom event indicating that the toggle's pressed state has changed.
*/
export default class MozToggle extends MozLitElement {
static shadowRootOptions = {
...MozLitElement.shadowRootOptions,
delegatesFocus: true,
};
static properties = {
pressed: { type: Boolean, reflect: true },
disabled: { type: Boolean, reflect: true },
label: { type: String },
description: { type: String },
ariaLabel: { type: String, attribute: "aria-label" },
accessKey: { type: String, attribute: "accesskey" },
};
static get queries() {
return {
buttonEl: "#moz-toggle-button",
labelEl: "#moz-toggle-label",
descriptionEl: "#moz-toggle-description",
};
}
constructor() {
super();
this.pressed = false;
this.disabled = false;
}
handleClick() {
this.pressed = !this.pressed;
this.dispatchOnUpdateComplete(
new CustomEvent("toggle", {
bubbles: true,
composed: true,
})
);
}
// Delegate clicks on the host to the input element
click() {
this.buttonEl.click();
}
descriptionTemplate() {
if (this.description) {
return html`
<p
id="moz-toggle-description"
class="description-wrapper text-deemphasized"
part="description"
>
${this.description} ${this.supportLinkTemplate()}
</p>
`;
}
return "";
}
supportLinkTemplate() {
return html` <slot name="support-link"></slot> `;
}
buttonTemplate() {
const { pressed, disabled, description, ariaLabel, handleClick } = this;
return html`
<button
id="moz-toggle-button"
part="button"
type="button"
class="toggle-button"
?disabled=${disabled}
aria-pressed=${pressed}
aria-label=${ifDefined(ariaLabel ?? undefined)}
aria-describedby=${ifDefined(
description ? "moz-toggle-description" : undefined
)}
@click=${handleClick}
></button>
`;
}
render() {
return html`
<link
rel="stylesheet"
href="chrome://global/content/elements/moz-toggle.css"
/>
${this.label
? html`
<label
is="moz-label"
id="moz-toggle-label"
part="label"
for="moz-toggle-button"
accesskey=${ifDefined(this.accessKey)}
>
<span>
${this.label}
${!this.description ? this.supportLinkTemplate() : ""}
</span>
${this.buttonTemplate()}
</label>
`
: this.buttonTemplate()}
${this.descriptionTemplate()}
`;
}
}
customElements.define("moz-toggle", MozToggle);
|
