@oslokommune/punkt-elements/dist/accordion-CU2tJ5vn.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { a as e, c as t, d as n, r, s as i } from "./element-cZ85T_aa.js";
import { t as a } from "./class-map-C8HuhNzZ.js";
import { n as o, t as s } from "./element-with-slot-4J2o3SeU.js";
import { t as c } from "./if-defined-Cjj8qN-Z.js";
import { n as l, t as u } from "./ref-RS8Uv6uC.js";
//#region src/components/accordion/accordion.ts
var d = class extends e {
	constructor(...e) {
		super(...e), this.ariaLabelledBy = "", this.compact = !1, this.skin = "borderless", this.name = "";
	}
	updated(e) {
		e.has("skin") && this.requestUpdate(), e.has("name") && this.updateAccordionItemNames();
	}
	updateAccordionItemNames() {
		if (this.name) {
			let e = this.renderRoot?.querySelector("slot");
			e && e.assignedElements().forEach((e) => {
				e.tagName.toLowerCase() === "pkt-accordion-item" && (e.hasAttribute("name") || e.setAttribute("name", this.name));
			});
		}
	}
	firstUpdated() {
		let e = this.renderRoot?.querySelector("slot");
		e && e.addEventListener("slotchange", () => {
			this.updateAccordionItemNames();
		});
	}
	render() {
		return n`
      <div
        part="container"
        class=${a({
			"pkt-accordion": !0,
			"pkt-accordion--compact": this.compact,
			[`pkt-accordion--${this.skin}`]: this.skin
		})}
        data-testid="pkt-accordion"
        aria-labelledby=${this.ariaLabelledBy}
      >
        <slot></slot>
      </div>
    `;
	}
};
r([i({
	type: String,
	reflect: !0,
	attribute: "aria-labelledby"
})], d.prototype, "ariaLabelledBy", void 0), r([i({
	type: Boolean,
	reflect: !0,
	attribute: "compact"
})], d.prototype, "compact", void 0), r([i({
	type: String,
	reflect: !0,
	attribute: "skin"
})], d.prototype, "skin", void 0), r([i({
	type: String,
	reflect: !0,
	attribute: "name"
})], d.prototype, "name", void 0);
try {
	t("pkt-accordion")(d);
} catch {
	console.warn("Forsøker å definere <pkt-accordion>, men den er allerede definert");
}
//#endregion
//#region src/components/accordion/accordionitem.ts
var f = class extends s {
	constructor() {
		super(), this.defaultOpen = !1, this.title = "", this.skin = void 0, this.compact = !1, this.isOpen = !1, this.name = void 0, this.accordionItemRef = u();
	}
	firstUpdated(e) {
		this.defaultOpen && (this.isOpen = !0);
	}
	render() {
		let e = {
			"pkt-accordion-item": !0,
			"pkt-accordion-item--compact": this.compact,
			[`pkt-accordion-item--${this.skin}`]: !!this.skin
		}, t = this.skin === "plus-minus";
		return n`
      <details
        class=${a(e)}
        id=${this.id}
        ?open=${this.isOpen}
        ${l(this.accordionItemRef)}
        name=${c(this.name)}
      >
        <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
          ${this.title}
          ${t ? n`
                <pkt-icon
                  name="plus-sign"
                  class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
                  aria-hidden="true"
                ></pkt-icon>
                <pkt-icon
                  name="minus-sign"
                  class="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
                  aria-hidden="true"
                ></pkt-icon>
              ` : n`
                <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">${o(this)}</div>
        </div>
      </details>
    `;
	}
};
r([i({ type: Boolean })], f.prototype, "defaultOpen", void 0), r([i({ type: String })], f.prototype, "title", void 0), r([i({
	type: String,
	reflect: !0
})], f.prototype, "skin", void 0), r([i({
	type: Boolean,
	reflect: !0
})], f.prototype, "compact", void 0), r([i({
	type: Boolean,
	reflect: !0
})], f.prototype, "isOpen", void 0), r([i({
	type: String,
	reflect: !0
})], f.prototype, "name", void 0);
try {
	t("pkt-accordion-item")(f);
} catch {
	console.warn("Forsøker å definere <pkt-accordion-item>, men den er allerede definert");
}
//#endregion
//#region src/components/accordion/index.ts
var p = d;
//#endregion
export { f as n, d as r, p as t };