UNPKG

@synergy-design-system/components

Version:
115 lines (112 loc) 3.06 kB
import { accordion_styles_default } from "./chunk.WNUZ6LH4.js"; import { enableDefaultSettings } from "./chunk.WYMKPLYK.js"; import { watch } from "./chunk.UR2E7Y2Q.js"; import { component_styles_default } from "./chunk.2NT3B5WJ.js"; import { SynergyElement } from "./chunk.L2IYPRPF.js"; import { __decorateClass } from "./chunk.VK2FVWOF.js"; // src/components/accordion/accordion.component.ts import { html } from "lit"; import { property, queryAssignedElements } from "lit/decorators.js"; import { classMap } from "lit/directives/class-map.js"; var SynAccordion = class extends SynergyElement { constructor() { super(...arguments); this.closeOthers = false; this.contained = false; this.size = "medium"; this.handleAccordionShow = (event) => { if (this.closeOthers) { this.detailsInDefaultSlot.forEach((detailsElement) => { if (detailsElement === event.target) { return; } if (detailsElement.parentNode !== event.target.parentNode) { return; } detailsElement.removeAttribute("open"); }); } }; } adjustDetailsSize() { this.detailsInDefaultSlot.forEach((detail) => { detail.setAttribute("size", this.size); }); } adjustDetailsContained() { this.detailsInDefaultSlot.forEach((detail) => { detail.contained = this.contained; }); } handleSizeChange() { this.adjustDetailsSize(); } handleContainedChange() { this.adjustDetailsContained(); } connectedCallback() { super.connectedCallback(); this.addEventListener("syn-show", this.handleAccordionShow); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener("syn-show", this.handleAccordionShow); } handleSlotChange() { this.adjustDetailsSize(); this.adjustDetailsContained(); } render() { return html` <div part="base" class=${classMap({ accordion: true, "accordion--contained": this.contained })}> <slot @slotchange=${this.handleSlotChange}></slot> </div> `; } }; SynAccordion.styles = [ component_styles_default, accordion_styles_default ]; __decorateClass([ queryAssignedElements({ selector: "syn-details" }) ], SynAccordion.prototype, "detailsInDefaultSlot", 2); __decorateClass([ property({ attribute: "close-others", type: Boolean }) ], SynAccordion.prototype, "closeOthers", 2); __decorateClass([ property({ reflect: true, type: Boolean }) ], SynAccordion.prototype, "contained", 2); __decorateClass([ property({ reflect: true }) ], SynAccordion.prototype, "size", 2); __decorateClass([ watch("size", { waitUntilFirstUpdate: true }) ], SynAccordion.prototype, "handleSizeChange", 1); __decorateClass([ watch("contained", { waitUntilFirstUpdate: true }) ], SynAccordion.prototype, "handleContainedChange", 1); SynAccordion = __decorateClass([ enableDefaultSettings("SynAccordion") ], SynAccordion); export { SynAccordion }; //# sourceMappingURL=chunk.UC5KV27Y.js.map