@progressive-development/pd-content/dist/pd-collapse-group/PdCollapseGroup.js

Progressive Development content components.

import { LitElement, css, html } from 'lit';

class PdCollapseGroup extends LitElement {
  constructor() {
    super(...arguments);
    /**
     * Enthält alle zugewiesenen <pd-collapse>-Elemente
     */
    this._assignedCollapses = /* @__PURE__ */ new Map();
    this._onRegister = (e) => {
      const { name, collapse } = e.detail;
      console.debug("###### _onRegister collapse", name);
      this._assignedCollapses.set(name, collapse);
      e.stopPropagation();
    };
    this._onUnRegister = (e) => {
      const { name } = e.detail;
      console.debug("###### _onUnRegister collapse", name);
      this._assignedCollapses.delete(name);
      e.stopPropagation();
    };
    this._onUnRegisterBound = this._onUnRegister.bind(this);
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
      }
      .container {
        display: flex;
        flex-direction: column;
        gap: var(--pd-collapse-group-gap, 0.5rem);
      }
    `
    ];
  }
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener(
      "pd-collapse-register",
      this._onRegister
    );
    this.addEventListener(
      "pd-collapse-toggle",
      this._onToggle
    );
    document.addEventListener(
      "pd-collapse-unregister",
      this._onUnRegisterBound
    );
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener(
      "pd-collapse-register",
      this._onRegister
    );
    this.removeEventListener(
      "pd-collapse-toogle",
      this._onToggle
    );
    document.removeEventListener(
      "pd-collapse-unregister",
      this._onUnRegisterBound
    );
  }
  render() {
    return html`
      <div class="container" part="container">
        <slot></slot>
      </div>
    `;
  }
  _onToggle(e) {
    if (e.detail.active === true) {
      this._deactivateOtherCollapses(e.detail.name);
    }
    e.stopPropagation();
  }
  _deactivateOtherCollapses(targetKey) {
    this._assignedCollapses.forEach((collapse, key) => {
      if (key !== targetKey) {
        collapse.active = false;
      }
    });
  }
}

export { PdCollapseGroup };