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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

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

import '@/components/icon'

export interface IPktBackLink {
  href?: string
  text?: string
  ariaLabel?: string
}

export class PktBackLink extends PktElement<IPktBackLink> implements IPktBackLink {
  // Properties

  @property({ type: String }) href: string = ''
  @property({ type: String }) text: string = 'Forsiden'
  @property({ type: String }) ariaLabel: string = ''

  // Lifecycle

  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
    if (name === 'arialabel') {
      this.removeAttribute('arialabel')
    }
    if (name === 'href') {
      this.removeAttribute('href')
    }
    if (name === 'text') {
      this.removeAttribute('text')
    }
    super.attributeChangedCallback(name, oldValue, newValue)
  }

  render() {
    return html`<nav
      class="pkt-back-link"
      aria-label=${this.ariaLabel || 'Gå tilbake til forrige side'}
    >
      <a href=${ifDefined(this.href || '/')} class="pkt-link pkt-link--icon-left"
        ><pkt-icon
          class="pkt-back-link__icon pkt-icon pkt-link__icon"
          name="chevron-thin-left"
          aria-hidden="true"
        ></pkt-icon
        ><span class="pkt-back-link__text">${this.text}</span></a
      >
    </nav>`
  }
}

export default PktBackLink

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