@oslokommune/punkt-elements/src/components/datepicker/datepicker-single.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'

export class PktDatepickerSingle extends PktDatepickerBase {
  @property({ type: String })
  value: string = ''

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

  private dispatchManageValidity(input: HTMLInputElement) {
    this.dispatchEvent(
      new CustomEvent('manage-validity', {
        detail: input,
        bubbles: true,
        composed: true,
      }),
    )
  }

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

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