@oslokommune/punkt-elements/src/components/breadcrumbs/breadcrumbs.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { customElement, property } from 'lit/decorators.js'
import { html, nothing } from 'lit'
import { PktElement } from '@/base-elements/element'

import '@/components/icon'

export interface IBreadcrumbItem {
  text: string
  href: string
}

export interface IPktBreadcrumbs {
  breadcrumbs: IBreadcrumbItem[]
}

export class PktBreadcrumbs extends PktElement implements IPktBreadcrumbs {
  @property({ type: Array }) breadcrumbs: IBreadcrumbItem[] = []

  private handleLinkClick(event: MouseEvent, item: IBreadcrumbItem, index: number) {
    const navigateEvent = new CustomEvent('navigate', {
      detail: { item, index, originalEvent: event },
      bubbles: true,
      composed: true,
      cancelable: true,
    })

    const dispatched = this.dispatchEvent(navigateEvent)

    // dispatchEvent returnerer false når en lytter kaller preventDefault() på navigate-eventet.
    // Vi viderefører dette til den opprinnelige klikk-eventen for å hindre nettleseren i å navigere.
    if (!dispatched) {
      event.preventDefault()
    }
  }

  render() {
    if (!this.breadcrumbs || this.breadcrumbs.length === 0) return nothing

    const backLink = this.breadcrumbs[this.breadcrumbs.length - 2]

    return html`
      <nav class="pkt-breadcrumbs" aria-label="brødsmulemeny">
        <ol class="pkt-breadcrumbs__list pkt-breadcrumbs--desktop">
          ${this.breadcrumbs.map((item, index) =>
            index === this.breadcrumbs.length - 1
              ? html`
                  <li class="pkt-breadcrumbs__item">
                    <span class="pkt-breadcrumbs__label" aria-current="true">
                      <span class="pkt-breadcrumbs__text">${item.text}</span>
                    </span>
                  </li>
                `
              : html`
                  <li class="pkt-breadcrumbs__item">
                    <a
                      class="pkt-link pkt-link--icon-right pkt-breadcrumbs__label pkt-breadcrumbs__link"
                      href=${item.href}
                      @click=${(e: MouseEvent) => this.handleLinkClick(e, item, index)}
                    >
                      <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">${item.text}</span>
                    </a>
                  </li>
                `,
          )}
        </ol>

        ${backLink
          ? html`
              <a
                class="pkt-link pkt-link--icon-left pkt-breadcrumbs--mobile"
                href=${backLink.href}
                @click=${(e: MouseEvent) =>
                  this.handleLinkClick(e, backLink, 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">${backLink.text}</span>
              </a>
            `
          : nothing}
      </nav>
    `
  }
}

export default PktBreadcrumbs

try {
  customElement('pkt-breadcrumbs')(PktBreadcrumbs)
} catch (e) {
  console.warn('Forsøker å definere <pkt-breadcrumbs>, men den er allerede definert')
}