@oslokommune/punkt-elements/src/components/accordion/accordionitem.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, PropertyValues } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { createRef, Ref, ref } from 'lit/directives/ref.js'
import { TPktAccordionSkin } from './accordion'
import { classMap } from 'lit/directives/class-map.js'
import { ifDefined } from 'lit/directives/if-defined.js'

/**
 * @param toggleProps
 *
 * @description Send in an "isOpen" boolean and "onToggleClick" function
 * to override the automatic toggling
 */

export interface IPktAccordionItem {
  defaultOpen?: boolean
  id: string
  title: string
  skin?: TPktAccordionSkin
  compact?: boolean
  isOpen?: boolean
  name?: string | undefined
}

export class PktAccordionItem extends PktElementWithSlot implements IPktAccordionItem {
  @property({ type: Boolean }) defaultOpen: boolean = false
  @property({ type: String }) title: string = ''
  @property({ type: String, reflect: true }) skin: TPktAccordionSkin | undefined = undefined
  @property({ type: Boolean, reflect: true }) compact: boolean = false
  @property({ type: Boolean, reflect: true }) isOpen: boolean = false
  @property({ type: String, reflect: true }) name: string | undefined = undefined

  accordionItemRef: Ref<HTMLDivElement> = createRef()

  constructor() {
    super()
  }

  protected firstUpdated(_changedProperties: PropertyValues): void {
    if (this.defaultOpen) {
      this.isOpen = true
    }
  }

  render() {
    const accordionItemClass = {
      'pkt-accordion-item': true,
      'pkt-accordion-item--compact': this.compact,
      [`pkt-accordion-item--${this.skin}`]: !!this.skin,
    }

    const isPlusMinus = this.skin === 'plus-minus'

    return html`
      <details
        class=${classMap(accordionItemClass)}
        id=${this.id}
        ?open=${this.isOpen}
        ${ref(this.accordionItemRef)}
        name=${ifDefined(this.name)}
      >
        <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
          ${this.title}
          ${isPlusMinus
            ? html`
                <pkt-icon
                  name="plus-sign"
                  class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
                  aria-hidden="true"
                ></pkt-icon>
                <pkt-icon
                  name="minus-sign"
                  class="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
                  aria-hidden="true"
                ></pkt-icon>
              `
            : html`
                <pkt-icon
                  name="chevron-thin-down"
                  class="pkt-accordion-item__icon"
                  aria-hidden="true"
                ></pkt-icon>
              `}
        </summary>
        <div
          class="pkt-accordion-item__content"
          id="pkt-accordion-item__content-${this.id}"
          role="region"
        >
          <div class="pkt-accordion-item__content-inner">${slotContent(this)}</div>
        </div>
      </details>
    `
  }
}

export default PktAccordionItem

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