forked from mirrors/gecko-dev
0397a3f6d8
lit is a library for building Web Components. It is released under the BSD 3-Clause license. Website: https://lit.dev/ GitHub: https://github.com/lit/lit/ Differential Revision: https://phabricator.services.mozilla.com/D159765
88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
/* 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";
|
|
|
|
export default class MozToggle extends MozLitElement {
|
|
static LOCAL_NAME = "moz-toggle";
|
|
|
|
static properties = {
|
|
checked: { type: Boolean, reflect: true },
|
|
disabled: { type: Boolean, reflect: true },
|
|
label: { type: String },
|
|
description: { type: String },
|
|
ariaLabel: { type: String, attribute: "aria-label" },
|
|
};
|
|
|
|
static get queries() {
|
|
return {
|
|
inputEl: "#moz-toggle-input",
|
|
labelEl: "#moz-toggle-label",
|
|
descriptionEl: "#moz-toggle-description",
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.checked = false;
|
|
this.disabled = false;
|
|
}
|
|
|
|
handleChange() {
|
|
this.checked = this.inputEl.checked;
|
|
this.dispatchEvent(
|
|
new Event("change", {
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
}
|
|
|
|
labelTemplate() {
|
|
if (this.label) {
|
|
return html`
|
|
<label id="moz-toggle-label" part="label" for="moz-toggle-input">
|
|
${this.label}
|
|
</label>
|
|
`;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
descriptionTemplate() {
|
|
if (this.description) {
|
|
return html`
|
|
<p id="moz-toggle-description" part="description">
|
|
${this.description}
|
|
</p>
|
|
`;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
render() {
|
|
const { checked, disabled, description, ariaLabel, handleChange } = this;
|
|
return html`
|
|
<link rel="stylesheet" href=${this.constructor.stylesheetUrl} />
|
|
${this.labelTemplate()} ${this.descriptionTemplate()}
|
|
<input
|
|
id="moz-toggle-input"
|
|
part="input"
|
|
type="checkbox"
|
|
role="switch"
|
|
class="toggle-button"
|
|
.checked=${checked}
|
|
?disabled=${disabled}
|
|
aria-checked=${checked}
|
|
aria-label=${ifDefined(ariaLabel ?? undefined)}
|
|
aria-describedby=${ifDefined(
|
|
description ? "moz-toggle-description" : undefined
|
|
)}
|
|
@change=${handleChange}
|
|
/>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define("moz-toggle", MozToggle);
|