mirror of
https://github.com/Feodor2/Mypal68.git
synced 2025-06-18 14:55:44 -04:00
60 lines
1.8 KiB
JavaScript
60 lines
1.8 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 http://mozilla.org/MPL/2.0/. */
|
|
|
|
import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js";
|
|
|
|
/**
|
|
* <labelled-checkbox label="Some label" value="The value"></labelled-checkbox>
|
|
*/
|
|
|
|
export default class LabelledCheckbox extends ObservedPropertiesMixin(
|
|
HTMLElement
|
|
) {
|
|
static get observedAttributes() {
|
|
return ["infoTooltip", "form", "label", "value"];
|
|
}
|
|
constructor() {
|
|
super();
|
|
|
|
this._label = document.createElement("label");
|
|
this._labelSpan = document.createElement("span");
|
|
this._infoTooltip = document.createElement("span");
|
|
this._infoTooltip.className = "info-tooltip";
|
|
this._infoTooltip.setAttribute("tabindex", "0");
|
|
this._infoTooltip.setAttribute("role", "tooltip");
|
|
this._checkbox = document.createElement("input");
|
|
this._checkbox.type = "checkbox";
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.appendChild(this._label);
|
|
this._label.appendChild(this._checkbox);
|
|
this._label.appendChild(this._labelSpan);
|
|
this._label.appendChild(this._infoTooltip);
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
this._labelSpan.textContent = this.label;
|
|
this._infoTooltip.setAttribute("aria-label", this.infoTooltip);
|
|
// We don't use the ObservedPropertiesMixin behaviour because we want to be able to mirror
|
|
// form="" but ObservedPropertiesMixin removes attributes when "".
|
|
if (this.hasAttribute("form")) {
|
|
this._checkbox.setAttribute("form", this.getAttribute("form"));
|
|
} else {
|
|
this._checkbox.removeAttribute("form");
|
|
}
|
|
}
|
|
|
|
get checked() {
|
|
return this._checkbox.checked;
|
|
}
|
|
|
|
set checked(value) {
|
|
return (this._checkbox.checked = value);
|
|
}
|
|
}
|
|
|
|
customElements.define("labelled-checkbox", LabelledCheckbox);
|