@progressive-development/pd-content/dist/pd-collapse/PdCollapse.js

Progressive Development content components.

import { LitElement, css, html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { pdIcons } from '@progressive-development/pd-icon';
import '@progressive-development/pd-icon/pd-icon';

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class PdCollapse extends LitElement {
  constructor() {
    super(...arguments);
    this.icon = pdIcons.ICON_TOGGLE_COLLAPSE;
    this.startOpen = false;
    this._active = false;
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
        width: 100%;
        position: relative;
        overflow: visible;
      }

      .trigger {
        position: relative;
        z-index: 2;

        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0.5rem;
        cursor: pointer;

        font-family: var(--pd-default-font-title-family);
        font-size: var(--pd-collapse-header-font-size, 1rem);
        font-weight: bold;
        color: var(--pd-collapse-font-col, var(--pd-default-bg-col));
        background: var(--pd-collapse-bg-col, var(--pd-default-col));
        border-radius: var(--pd-border-radius) var(--pd-border-radius) 0 0;

        transition-property: box-shadow, background;
        transition: 0.2s ease-in;
      }

      .trigger pd-icon {
        --pd-icon-col-active: var(--pd-default-dark-col);
        /*
        --pd-icon-col-hover: var(--pd-default-dark-col);
        --pd-icon-col-active-hover: var(--pd-default-dark-col);
        */
      }

      .trigger:hover {
        background: var(--pd-collapse-hover-col, var(--pd-default-dark-col));
      }

      .trigger.closed {
        border-radius: var(--pd-border-radius);
      }

      ::slotted(.header) {
        display: flex;
        align-items: center;
      }

      .content {
        position: relative;
        z-index: 1;

        height: 0;
        visibility: hidden;
        overflow: hidden;
        opacity: 0;
        box-sizing: border-box;
        padding: 0.5em;

        border: 2px solid var(--pd-default-light-col);
        background: var(--pd-collapse-content-bg-col, var(--pd-default-bg-col));
        border-radius: 0 0 var(--pd-border-radius) var(--pd-border-radius);

        will-change: transform, opacity;
        transform: translate3d(0, -1.5em, 0);
        pointer-events: none;

        transform-origin: top;
        transition:
          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.3s ease,
          visibility 0s linear 0.3s; /* sichtbar wird später deaktiviert */
      }

      .content.open {
        height: auto;
        visibility: visible;
        overflow: visible;
        overflow-y: auto;
        opacity: 1;

        transform: translate3d(0, 0, 0);
        pointer-events: auto;

        transition:
          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.3s ease,
          visibility 0s linear 0s; /* sichtbar wird sofort gesetzt */
      }
    `
    ];
  }
  firstUpdated() {
    this._registerAtContainer();
  }
  disconnectedCallback() {
    this._unRegisterAtContainer();
    super.disconnectedCallback();
  }
  willUpdate(changedProps) {
    if (changedProps.has("startOpen")) {
      this._active = this.startOpen;
    }
  }
  render() {
    return html`
      <div
        class="trigger ${this._active ? "open" : "closed"}"
        @click=${this._onClick}
      >
        <slot name="header"></slot>
        <pd-icon
          icon=${this.icon}
          ?activeIcon=${this.active}
          class="small primary"
        ></pd-icon>
      </div>
      <div class="content ${this._active ? "open" : "closed"}">
        <slot name="content"></slot>
      </div>
    `;
  }
  /**
   * Öffnet den Collapse-Bereich
   */
  set active(activeVal) {
    const oldActive = this._active;
    this._active = activeVal;
    if (oldActive !== activeVal) {
      this.dispatchEvent(
        new CustomEvent("pd-collapse-toggle", {
          bubbles: true,
          composed: true,
          detail: {
            active: this._active,
            name: this.id || this._getInternalId()
          }
        })
      );
    }
  }
  get active() {
    return this._active;
  }
  _onClick() {
    this.active = !this._active;
  }
  _registerAtContainer() {
    this.dispatchEvent(
      new CustomEvent("pd-collapse-register", {
        detail: {
          name: this.id || this._getInternalId(),
          collapse: this
        },
        bubbles: true,
        composed: true
      })
    );
  }
  _unRegisterAtContainer() {
    document.dispatchEvent(
      new CustomEvent("pd-collapse-unregister", {
        detail: {
          name: this.id || this._getInternalId()
        },
        bubbles: true,
        composed: true
      })
    );
  }
  _getInternalId() {
    if (!this._internalId) {
      this._internalId = `id${(/* @__PURE__ */ new Date()).getMilliseconds()}_${Math.random()}`;
    }
    return this._internalId;
  }
}
__decorateClass([
  property({ type: String })
], PdCollapse.prototype, "icon");
__decorateClass([
  property({ type: Boolean })
], PdCollapse.prototype, "startOpen");
__decorateClass([
  state()
], PdCollapse.prototype, "_active");

export { PdCollapse };