@oslokommune/punkt-elements/src/components/accordion/accordionitem.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { PktElement } from '@/base-elements/element'
import { PktSlotController } from '@/controllers/pkt-slot-controller'
import { html } 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'

/**
 * @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 | React.ReactNode
  skin?: TPktAccordionSkin
  compact?: boolean
  isOpen?: boolean
}

@customElement('pkt-accordion-item')
export class PktAccordionItem extends PktElement 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 = this.defaultOpen

  accordionItemRef: Ref<HTMLDivElement> = createRef()
  defaultSlot: Ref<HTMLElement> = createRef()

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

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

    return html`
      <details
        class=${classMap(accordionItemClass)}
        id=${this.id}
        ?open=${this.isOpen}
        ${ref(this.accordionItemRef)}
      >
        <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
          ${this.title}
          <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" ${ref(this.defaultSlot)}></div>
        </div>
      </details>
    `
  }
}

export default PktAccordionItem