pyro/dist/accordion.js

Pyro custom elements

import { i as l, r as m, x as d, t as y } from "./custom-element-CWJsDAat.js";
import { n as i } from "./property-Bf-I6Ep_.js";
import { o as u } from "./unsafe-html-DZSpJPU8.js";
import { C as v } from "./chevron-down-DE1KgYoW.js";
var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (n, e, s, a) => {
  for (var o = a > 1 ? void 0 : a ? g(e, s) : e, p = n.length - 1, c; p >= 0; p--)
    (c = n[p]) && (o = (a ? c(e, s, o) : c(o)) || o);
  return a && o && f(e, s, o), o;
};
let r = class extends m {
  constructor() {
    super(...arguments), this.summary = "", this.content = "", this.open = !1, this["no-flip"] = !1;
  }
  handleClick(n) {
    this.open = !this.open, n.preventDefault(), this.dispatchEvent(
      new CustomEvent("pyro-accordion-click", {
        bubbles: !0
      })
    );
  }
  render() {
    return d`
      <details ?open=${this.open}>
        <summary @click=${this.handleClick}>
          <slot name="summary">
            ${this.summary}
            <slot name="icon" aria-hidden="true">${u(v)}</slot>
          </slot>
        </summary>

        <slot name="content"><span>${this.content}</span></slot>
      </details>
    `;
  }
};
r.styles = l`
    :host {
      display: block;
      box-sizing: border-box;
      color: var(--pyro-accordion-text-color, var(--pyro-text-color));
      background: var(--pyro-accordion-surface-color, var(--pyro-surface-color));
      border: var(--pyro-accordion-border, var(--pyro-border));
      border-radius: var(--pyro-accordion-border-radius, var(--pyro-border-radius));

      --internal-animation-spacing: var(--pyro-accordion-spacing, var(--pyro-spacing));
    }
    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--pyro-accordion-spacing, var(--pyro-spacing));
      cursor: pointer;
      transition: margin 150ms ease-out;
    }
    summary > i {
      margin-left: auto;
      margin-right: var(--pyro-spacing);
      cursor: pointer;
    }

    slot[name='content'] {
      display: block;
      padding: var(--internal-animation-spacing);
      padding-top: 0;
    }
    :host(:not([no-flip])) details[open] slot[name='icon'] > *,
    :host(:not([no-flip])) details[open] ::slotted([slot='icon']) {
      transform: rotate(-180deg);
    }
    details[open] summary {
      margin-bottom: var(--internal-animation-spacing);
    }
  `;
t([
  i()
], r.prototype, "summary", 2);
t([
  i()
], r.prototype, "content", 2);
t([
  i({ type: Boolean, reflect: !0 })
], r.prototype, "open", 2);
t([
  i({ type: Boolean, reflect: !0 })
], r.prototype, "no-flip", 2);
r = t([
  y("pyro-accordion")
], r);
export {
  r as PyroAccordion
};