ToggleButton = (
onClick,
offText = "Off",
onText = "On",
initialState = false
) => {
const node = html`<span><button>${
initialState ? onText : offText
}</button></span>`;
node.value = initialState;
const button = node.querySelector("button");
if (!onClick) {
throw new Error("onClick must be provided!");
}
const setValue = (newValue) => {
button.textContent = newValue ? onText : offText;
node.value = newValue;
node.dispatchEvent(new CustomEvent("input"));
};
button.addEventListener("click", function (e) {
const newValue = !node.value;
setValue(newValue);
onClick(newValue, setValue);
});
return node;
}