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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { PktElementWithSlot } from '@/base-elements/element-with-slot'
import { slotContent } from '@/directives/slot-content'
import { html, nothing } from 'lit'
import { classMap } from 'lit/directives/class-map.js'
import { customElement, property } from 'lit/decorators.js'
import specs from 'componentSpecs/link.json'
import '@/components/icon'

export class PktLink extends PktElementWithSlot {
  /**
   * Element attributes
   */
  @property({ type: String, reflect: true }) href: string = specs.props.href.default
  @property({ type: String, reflect: true }) iconName: string | undefined = undefined
  @property({ type: String, reflect: true }) iconPosition: string | undefined = undefined
  @property({ type: Boolean, reflect: true }) external: boolean = false
  @property({ type: String, reflect: true }) target: string | null = specs.props.target.default

  render() {
    const classes = {
      'pkt-link': true,
      'pkt-link--icon-left':
        (!!this.iconName && this.iconPosition === 'left') ||
        !!(this.iconName && !this.iconPosition),
      'pkt-link--icon-right': !!this.iconName && this.iconPosition === 'right',
      'pkt-link--external': this.external,
    }
    return html`<a
      class=${classMap(classes)}
      href=${this.href}
      .target=${this.target}
      .rel=${this.external ? 'noopener noreferrer' : nothing}
      >${this.iconName
        ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
        : ''} <span>${slotContent(this)}</span></a
    >`
  }
}

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