@oslokommune/punkt-elements/src/components/datepicker/datepicker-multiple.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { classMap } from 'lit/directives/class-map.js'
import { ifDefined } from 'lit/directives/if-defined.js'
import { ref } from 'lit/directives/ref.js'
import { PktDatepickerBase } from './datepicker-base'
import { keyboardUtils, formUtils } from './datepicker-utils'
import { IDatepickerStrings, defaultSingleStrings } from './datepicker-types'
import { isIOS } from 'shared-utils/device-utils'
import '@/components/icon'

export class PktDatepickerMultiple extends PktDatepickerBase {
  @property({ type: Array })
  value: string[] = []

  @property({ type: Number })
  maxlength?: number

  @property({ type: Object })
  strings: IDatepickerStrings = defaultSingleStrings

  get isInputDisabled(): boolean {
    return (
      this.disabled ||
      (this.maxlength !== undefined &&
        this.maxlength !== null &&
        this.value.length >= this.maxlength)
    )
  }

  private dispatchAddToSelected(e: Event | KeyboardEvent) {
    this.dispatchEvent(
      new CustomEvent('add-to-selected', {
        detail: e,
        bubbles: true,
        composed: true,
      }),
    )
  }

  render() {
    return html`
      <div class="pkt-input__container">
        <input
          class=${classMap(this.inputClasses)}
          .type=${this.inputType}
          id="${this.id}-input"
          min=${ifDefined(this.min)}
          max=${ifDefined(this.max)}
          placeholder=${ifDefined(this.placeholder)}
          ?readonly=${this.isInputReadonly}
          ?disabled=${this.isInputDisabled}
          @click=${(e: MouseEvent) => {
            e.preventDefault()
            this.dispatchToggleCalendar(e)
          }}
          @touchend=${(e: TouchEvent) => {
            e.preventDefault()
            this.dispatchToggleCalendar(e)
          }}
          @blur=${(e: FocusEvent) => {
            this.dispatchBlur(e)
            this.dispatchAddToSelected(e)
          }}
          @input=${(e: Event) => {
            this.dispatchInput(e)
            e.stopImmediatePropagation()
          }}
          @focus=${() => {
            this.dispatchFocus()
            if (isIOS()) {
              this.dispatchToggleCalendar(new Event('focus'))
            }
          }}
          @keydown=${(e: KeyboardEvent) =>
            keyboardUtils.handleInputKeydown(
              e,
              (event) => this.dispatchToggleCalendar(event),
              () =>
                formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
              undefined,
              undefined,
              (event) => this.dispatchAddToSelected(event),
            )}
          @change=${(e: Event) => {
            this.dispatchChange(e)
            e.stopImmediatePropagation()
          }}
          ${ref(this.inputRef)}
        />
        ${this.renderCalendarButton()}
      </div>
    `
  }
}

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