@oslokommune/punkt-elements/dist/accordionitem-C9FI-NXW.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { i as k, x as u, n as s, a as f, P as _ } from "./element-CgEWt74-.js";
import { e as y } from "./class-map-BpTj9gtz.js";
import { P as v } from "./pkt-slot-controller-BPGj-LC5.js";
import { e as m, n as h } from "./ref-BBYSqgeW.js";
var $ = Object.defineProperty, P = Object.getOwnPropertyDescriptor, d = (e, o, c, i) => {
  for (var t = i > 1 ? void 0 : i ? P(o, c) : o, a = e.length - 1, n; a >= 0; a--)
    (n = e[a]) && (t = (i ? n(o, c, t) : n(t)) || t);
  return i && t && $(o, c, t), t;
};
let p = class extends k {
  constructor() {
    super(...arguments), this.ariaLabelledBy = "", this.compact = !1, this.skin = "borderless";
  }
  updated(e) {
    e.has("skin") && this.requestUpdate();
  }
  render() {
    const e = {
      "pkt-accordion": !0,
      "pkt-accordion--compact": this.compact,
      [`pkt-accordion--${this.skin}`]: this.skin
    };
    return u`
      <div
        part="container"
        class=${y(e)}
        data-testid="pkt-accordion"
        aria-labelledby=${this.ariaLabelledBy}
      >
        <slot></slot>
      </div>
    `;
  }
};
d([
  s({ type: String, reflect: !0, attribute: "aria-labelledby" })
], p.prototype, "ariaLabelledBy", 2);
d([
  s({ type: Boolean, reflect: !0, attribute: "compact" })
], p.prototype, "compact", 2);
d([
  s({ type: String, reflect: !0, attribute: "skin" })
], p.prototype, "skin", 2);
p = d([
  f("pkt-accordion")
], p);
const C = p;
var b = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, o, c, i) => {
  for (var t = i > 1 ? void 0 : i ? O(o, c) : o, a = e.length - 1, n; a >= 0; a--)
    (n = e[a]) && (t = (i ? n(o, c, t) : n(t)) || t);
  return i && t && b(o, c, t), t;
};
let r = class extends _ {
  constructor() {
    super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = this.defaultOpen, this.accordionItemRef = m(), this.defaultSlot = m(), this.slotController = new v(this, this.defaultSlot);
  }
  render() {
    const e = {
      "pkt-accordion-item": !0,
      "pkt-accordion-item--compact": this.compact,
      [`pkt-accordion-item--${this.skin}`]: !!this.skin
    };
    return u`
      <details
        class=${y(e)}
        id=${this.id}
        ?open=${this.isOpen}
        ${h(this.accordionItemRef)}
      >
        <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
          ${this.title}
          <pkt-icon
            name="chevron-thin-down"
            class="pkt-accordion-item__icon"
            aria-hidden="true"
          ></pkt-icon>
        </summary>
        <div
          class="pkt-accordion-item__content"
          id="pkt-accordion-item__content-${this.id}"
          role="region"
        >
          <div class="pkt-accordion-item__content-inner" ${h(this.defaultSlot)}></div>
        </div>
      </details>
    `;
  }
};
l([
  s({ type: Boolean })
], r.prototype, "defaultOpen", 2);
l([
  s({ type: String })
], r.prototype, "title", 2);
l([
  s({ type: String, reflect: !0 })
], r.prototype, "skin", 2);
l([
  s({ type: Boolean, reflect: !0 })
], r.prototype, "compact", 2);
l([
  s({ type: Boolean, reflect: !0 })
], r.prototype, "isOpen", 2);
r = l([
  f("pkt-accordion-item")
], r);
const I = r;
export {
  C as P,
  I as a
};