@oslokommune/punkt-elements/dist/breadcrumbs-CpuVqWhF.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { c as e, d as t, l as n, r, s as i, t as a } from "./element-cZ85T_aa.js";
import "./icon-Co72KtgF.js";
//#region src/components/breadcrumbs/breadcrumbs.ts
var o = class extends a {
	constructor(...e) {
		super(...e), this.breadcrumbs = [];
	}
	handleLinkClick(e, t, n) {
		let r = new CustomEvent("navigate", {
			detail: {
				item: t,
				index: n,
				originalEvent: e
			},
			bubbles: !0,
			composed: !0,
			cancelable: !0
		});
		this.dispatchEvent(r) || e.preventDefault();
	}
	render() {
		if (!this.breadcrumbs || this.breadcrumbs.length === 0) return n;
		let e = this.breadcrumbs[this.breadcrumbs.length - 2];
		return t`
      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
        <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
          ${this.breadcrumbs.map((e, n) => n === this.breadcrumbs.length - 1 ? t`
                  <li class="pkt-breadcrumbs__item">
                    <span class="pkt-breadcrumbs__label" aria-current="true">
                      <span class="pkt-breadcrumbs__text">${e.text}</span>
                    </span>
                  </li>
                ` : t`
                  <li class="pkt-breadcrumbs__item">
                    <a
                      class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
                      href=${e.href}
                      @click=${(t) => this.handleLinkClick(t, e, n)}
                    >
                      <pkt-icon
                        class="pkt-icon pkt-breadcrumbs__icon pkt-link__icon"
                        name="chevron-thin-right"
                        aria-hidden="true"
                      ></pkt-icon>
                      <span class="pkt-breadcrumbs__text">${e.text}</span>
                    </a>
                  </li>
                `)}
        </ol>

        ${e ? t`
              <a
                class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
                href=${e.href}
                @click=${(t) => this.handleLinkClick(t, e, this.breadcrumbs.length - 2)}
              >
                <pkt-icon
                  class="pkt-back-link__icon pkt-icon pkt-link__icon"
                  name="chevron-thin-left"
                  aria-hidden="true"
                ></pkt-icon>
                <span class="pkt-breadcrumbs__text">${e.text}</span>
              </a>
            ` : n}
      </nav>
    `;
	}
};
r([i({ type: Array })], o.prototype, "breadcrumbs", void 0);
try {
	e("pkt-breadcrumbs")(o);
} catch {
	console.warn("Forsøker å definere <pkt-breadcrumbs>, men den er allerede definert");
}
//#endregion
export { o as t };