import { settings } from "../settings.js"; const sizes = ["small", "medium", "large"]; const styles = ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"]; const borderRadii = ["normal", "rounded"]; class DevToolbarButton extends HTMLElement { _size = "small"; _buttonStyle = "purple"; _buttonBorderRadius = "normal"; get size() { return this._size; } set size(value) { if (!sizes.includes(value)) { settings.logger.error( `Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.` ); return; } this._size = value; this.updateStyle(); } get buttonStyle() { return this._buttonStyle; } set buttonStyle(value) { if (!styles.includes(value)) { settings.logger.error( `Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.` ); return; } this._buttonStyle = value; this.updateStyle(); } get buttonBorderRadius() { return this._buttonBorderRadius; } set buttonBorderRadius(value) { if (!borderRadii.includes(value)) { settings.logger.error( `Invalid border-radius: ${value}, expected one of ${borderRadii.join(", ")}, got ${value}.` ); return; } this._buttonBorderRadius = value; this.updateStyle(); } static observedAttributes = ["button-style", "size", "button-border-radius"]; shadowRoot; constructor() { super(); this.shadowRoot = this.attachShadow({ mode: "open" }); this.shadowRoot.innerHTML = ` `; } connectedCallback() { this.updateStyle(); } updateStyle() { const style = this.shadowRoot.querySelector("#selected-style"); if (style) { style.innerHTML = ` button { --background: var(--${this.buttonStyle}-background); --border: var(--${this.buttonStyle}-border); --font-size: var(--${this.size}-font-size); --text-color: var(--${this.buttonStyle}-text); ${this.buttonBorderRadius === "normal" ? "--padding: var(--" + this.size + "-padding);" : "--padding: var(--" + this.size + "-rounded-padding);"} --border-radius: var(--${this.buttonBorderRadius}-border-radius); }`; } } attributeChangedCallback() { if (this.hasAttribute("size")) this.size = this.getAttribute("size"); if (this.hasAttribute("button-style")) this.buttonStyle = this.getAttribute("button-style"); } } export { DevToolbarButton };