@synergy-design-system/components/dist/chunks/chunk.LVMHT5WF.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  accordion_styles_default
} from "./chunk.WNUZ6LH4.js";
import {
  enableDefaultSettings
} from "./chunk.HYFCK7MM.js";
import {
  watch
} from "./chunk.BVZQ6QSY.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3THJTCRO.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.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.LVMHT5WF.js.map