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

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { PktElement } from '@/base-elements/element'
import { html, nothing } from 'lit'
import { createRef, ref, Ref } from 'lit/directives/ref.js'
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
import { classMap } from 'lit/directives/class-map.js'
import { customElement, property, state } from 'lit/decorators.js'
import { uuidish } from '@/utils/stringutils'
import specs from 'componentSpecs/input-wrapper.json'
import '@/components/icon'
import { PktSlotController } from '@/controllers/pkt-slot-controller'

@customElement('pkt-helptext')
export class PktHelptext extends PktElement {
  defaultSlot: Ref<HTMLElement> = createRef()

  constructor() {
    super()
    this.slotController = new PktSlotController(this, this.defaultSlot)
  }

  @property({ type: String, reflect: true })
  forId: string = uuidish()

  @property({ type: String })
  helptext: string = ''

  @property({ type: String })
  helptextDropdown: string = ''

  @property({ type: String })
  helptextDropdownButton: string = specs.props.helptextDropdownButton.default

  @state() isHelpTextOpen: boolean = false

  @state() filledSlots: Set<string | null | undefined> = new Set()

  updateSlots(filledSlots: Set<string | null | undefined>) {
    this.filledSlots = new Set(filledSlots)
  }

  render() {
    const toggleDropdown = () => {
      const isOpen = !this.isHelpTextOpen
      this.isHelpTextOpen = isOpen
      this.dispatchEvent(
        new CustomEvent('toggleHelpText', {
          bubbles: true,
          detail: { isOpen },
        }),
      )
    }

    const helptextClasses = classMap({
      'pkt-inputwrapper__helptext-container': true,
      'pkt-inputwrapper__has-helptext':
        this.helptext || this.helptextDropdown || this.filledSlots.size > 0,
    })

    const helptextDropdown = () => {
      if (this.helptextDropdown) {
        return html`<div class="pkt-inputwrapper__helptext-expandable">
          <button
            class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
            type="button"
            @click=${toggleDropdown}
          >
            <pkt-icon
              class="pkt-btn__icon"
              name="${this.isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}"
            ></pkt-icon>
            <span class="pkt-btn__text">${unsafeHTML(this.helptextDropdownButton)}</span>
          </button>
          <div
            class="${classMap({
              'pkt-inputwrapper__helptext': true,
              'pkt-inputwrapper__helptext-expandable-open': this.isHelpTextOpen,
              'pkt-inputwrapper__helptext-expandable-closed': !this.isHelpTextOpen,
            })}"
          >
            ${unsafeHTML(this.helptextDropdown)}
          </div>
        </div>`
      } else {
        return nothing
      }
    }

    const helptextElement = () => {
      return html`<div class="${helptextClasses}">
        <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
          <div class="pkt-contents" ${ref(this.defaultSlot)} name="helptext"></div>
          ${this.helptext && unsafeHTML(this.helptext)}
        </div>
        ${helptextDropdown()}
      </div>`
    }

    return html`${helptextElement()}`
  }
}