const styles = ["purple", "gray", "red", "green", "yellow", "blue"];
class DevToolbarRadioCheckbox extends HTMLElement {
_radioStyle = "purple";
input;
shadowRoot;
get radioStyle() {
return this._radioStyle;
}
set radioStyle(value) {
if (!styles.includes(value)) {
console.error(`Invalid style: ${value}, expected one of ${styles.join(", ")}.`);
return;
}
this._radioStyle = value;
this.updateStyle();
}
static observedAttributes = ["radio-style", "checked", "disabled", "name", "value"];
constructor() {
super();
this.shadowRoot = this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
`;
this.input = document.createElement("input");
this.input.type = "radio";
this.shadowRoot.append(this.input);
}
connectedCallback() {
this.updateInputState();
this.updateStyle();
}
updateStyle() {
const styleElement = this.shadowRoot.querySelector("#selected-style");
if (styleElement) {
styleElement.innerHTML = `
:host {
--unchecked-color: var(--${this._radioStyle}-unchecked);
--checked-color: var(--${this._radioStyle}-checked);
}
`;
}
}
updateInputState() {
this.input.checked = this.hasAttribute("checked");
this.input.disabled = this.hasAttribute("disabled");
this.input.name = this.getAttribute("name") || "";
this.input.value = this.getAttribute("value") || "";
}
attributeChangedCallback() {
if (this.hasAttribute("radio-style")) {
this.radioStyle = this.getAttribute("radio-style");
}
this.updateInputState();
}
}
export {
DevToolbarRadioCheckbox
};