Revision control
Copy as Markdown
Other Tools
/* 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
/**
* A toggleable row that shows/hides row content.
*
* Template ID: #calendarDialogToggleableRowTemplate
*
* @tagname calendar-dialog-toggleable-row
* @slot icon - The icon image for the row
* @slot label - The label for the row.
* @slot content - Body content for the row. Displayed when `checked` is set.
* @attribute {boolean} [checked] - Observed state for the checkbox.
*/
export class CalendarDialogToggleableRow extends HTMLElement {
static observedAttributes = ["checked"];
/**
* The toggleable checkbox for changing the display state of the content.
*
* @type {HTMLInputElement}
*/
#toggle;
connectedCallback() {
if (this.shadowRoot) {
return;
}
const shadowRoot = this.attachShadow({ mode: "open" });
const style = document.createElement("link");
style.rel = "stylesheet";
style.href =
const template = document.getElementById(
"calendarDialogToggleableRowTemplate"
);
shadowRoot.append(style, template.content.cloneNode(true));
this.#toggle = shadowRoot.querySelector(".toggle-checkbox");
this.#toggle.addEventListener("change", this);
this.#syncState();
}
attributeChangedCallback() {
this.#syncState();
}
handleEvent(event) {
if (event.type === "change") {
this.toggleAttribute("checked", this.#toggle.checked);
}
}
/**
* Synchronizes checkbox and `aria-expanded` state.
*/
#syncState() {
if (!this.#toggle) {
return;
}
const checked = this.hasAttribute("checked");
this.#toggle.checked = checked;
this.#toggle.setAttribute("aria-expanded", String(checked));
}
}
customElements.define(
"calendar-dialog-toggleable-row",
CalendarDialogToggleableRow
);