@oslokommune/punkt-elements 13.6.11 → 13.6.15

package/src/components/datepicker/datepicker-multiple.ts

@@ -0,0 +1,202 @@
+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, createRef, ref } from 'lit/directives/ref.js'
+import { PktElement } from '@/base-elements/element'
+import { keyboardUtils, formUtils, deviceDetection, cssUtils } from './datepicker-utils'
+import '@/components/icon'
+
+@customElement('pkt-datepicker-multiple')
+export class PktDatepickerMultiple extends PktElement {
+  @property({ type: Array })
+  value: string[] = []
+
+  @property({ type: String })
+  inputType: string = 'date'
+
+  @property({ type: String })
+  id: string = ''
+
+  @property({ type: String })
+  min?: string
+
+  @property({ type: String })
+  max?: string
+
+  @property({ type: String })
+  placeholder?: string
+
+  @property({ type: Boolean })
+  readonly: boolean = false
+
+  @property({ type: Boolean })
+  disabled: boolean = false
+
+  @property({ type: Number })
+  maxlength?: number
+
+  @property({ type: Object })
+  inputClasses: Record<string, boolean> = {}
+
+  @property({ type: Object })
+  internals?: any
+
+  @property({ type: Object })
+  strings: any = { calendar: { buttonAltText: 'Åpne kalender' } }
+
+  inputRef: Ref<HTMLInputElement> = createRef()
+  btnRef: Ref<HTMLButtonElement> = createRef()
+
+  get inputElement(): HTMLInputElement | undefined {
+    return this.inputRef.value
+  }
+
+  get buttonElement(): HTMLButtonElement | undefined {
+    return this.btnRef.value
+  }
+
+  get isInputReadonly(): boolean {
+    return this.readonly || this.inputType === 'text'
+  }
+
+  get isInputDisabled(): boolean {
+    return (
+      this.disabled ||
+      (this.maxlength !== undefined &&
+        this.maxlength !== null &&
+        this.value.length >= this.maxlength)
+    )
+  }
+
+  private dispatchToggleCalendar(e: Event) {
+    if (this.readonly) return
+
+    this.dispatchEvent(
+      new CustomEvent('toggle-calendar', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchInput(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchFocus() {
+    this.dispatchEvent(
+      new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchBlur(e: FocusEvent) {
+    this.dispatchEvent(
+      new CustomEvent('input-blur', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchChange(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-changed', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchAddToSelected(e: Event | KeyboardEvent) {
+    this.dispatchEvent(
+      new CustomEvent('add-to-selected', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  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 (deviceDetection.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)}
+        />
+        <button
+          class="${classMap(cssUtils.getButtonClasses())}"
+          type="button"
+          @click=${(e: Event) => this.dispatchToggleCalendar(e)}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleButtonKeydown(e, (event) => this.dispatchToggleCalendar(event))}
+          ?disabled=${this.disabled}
+          ${ref(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `
+  }
+}

package/src/components/datepicker/datepicker-popup.test.ts

@@ -0,0 +1,77 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
+
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import './datepicker-popup'
+import '../calendar/calendar'
+
+import { PktDatepickerPopup } from './datepicker-popup'
+import { PktCalendar } from '../calendar/calendar'
+
+export interface IDatepickerPopupTest extends BaseTestConfig {
+  open?: boolean
+}
+
+const createPopupTest = async (config: IDatepickerPopupTest = {}) => {
+  const { container, element } = await createElementTest('pkt-datepicker-popup' as any, config)
+  return { container, popup: element as PktDatepickerPopup }
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDatepickerPopup', () => {
+  test('opens when show() is called', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    popup.show()
+    await popup.updateComplete
+    expect(popup.open).toBe(true)
+  })
+
+  test('closes when clicking outside', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    popup.show()
+    await popup.updateComplete
+    expect(popup.open).toBe(true)
+
+    fireEvent.click(document.body)
+    await popup.updateComplete
+    expect(popup.open).toBe(false)
+  })
+
+  test('closes on Escape key', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    popup.show()
+    await popup.updateComplete
+    expect(popup.open).toBe(true)
+
+    fireEvent.keyDown(popup, { key: 'Escape' })
+    await popup.updateComplete
+    expect(popup.open).toBe(false)
+  })
+
+  test('re-dispatches date-selected from child calendar', async () => {
+    const { popup } = await createPopupTest()
+    await popup.updateComplete
+
+    const handler = vi.fn()
+    popup.addEventListener('date-selected', (e: any) => handler(e))
+
+    const cal = popup.querySelector('pkt-calendar') as PktCalendar | null
+    expect(cal).toBeTruthy()
+    const detail = ['2025-09-17']
+    cal?.dispatchEvent(new CustomEvent('date-selected', { detail, bubbles: true, composed: true }))
+
+    expect(handler).toHaveBeenCalled()
+    const eventArg = handler.mock.calls[0][0]
+    expect(eventArg.detail).toEqual(detail)
+  })
+})

package/src/components/datepicker/datepicker-popup.ts

@@ -0,0 +1,137 @@
+import { html } from 'lit'
+import { PktElement } from '@/base-elements/element'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { ref, createRef, Ref } from 'lit/directives/ref.js'
+
+import { PktCalendar } from '../calendar/calendar'
+import { calendarUtils } from './datepicker-utils'
+
+@customElement('pkt-datepicker-popup')
+export class PktDatepickerPopup extends PktElement {
+  @property({ type: Boolean, reflect: true }) open = false
+  @property({ type: Boolean }) multiple = false
+  @property({ type: Boolean }) range = false
+  @property({ type: Boolean }) weeknumbers = false
+  @property({ type: Boolean }) withcontrols = false
+  @property({ type: Number }) maxMultiple: number | null = null
+  @property({ type: Array }) selected: string[] = []
+  @property({ type: String }) earliest: string | null = null
+  @property({ type: String }) latest: string | null = null
+  @property({ type: Array }) excludedates: string[] = []
+  @property({ type: Array }) excludeweekdays: string[] = []
+  @property({ type: String }) currentmonth: string | null = null
+
+  popupRef: Ref<HTMLElement> = createRef()
+  calendarRef: Ref<HTMLElement> = createRef()
+
+  firstUpdated() {
+    // expose calendarRef for external use
+    this.calRef = this.calendarRef
+
+    document.addEventListener('keydown', this.handleDocumentKeydown)
+    document.addEventListener('click', this.handleDocumentClick)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener('click', this.handleDocumentClick)
+    document.removeEventListener('keydown', this.handleDocumentKeydown)
+  }
+
+  handleDocumentClick = (e: MouseEvent) => {
+    if (!this.open) return
+    const path = e.composedPath() as EventTarget[]
+    const host = this.parentElement as EventTarget | null
+    const popupNode = this.popupRef.value as EventTarget | null
+    if (
+      !path.includes(this) &&
+      !path.includes(popupNode as EventTarget) &&
+      !(host && path.includes(host))
+    ) {
+      this.hide()
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+    }
+  }
+
+  handleDocumentKeydown = (e: KeyboardEvent) => {
+    if (!this.open) return
+    if (e.key === 'Escape') {
+      this.hide()
+      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+    }
+  }
+
+  show() {
+    this.open = true
+    ;(this.calendarRef.value as HTMLElement | null)?.focus()
+  }
+
+  hide() {
+    this.open = false
+  }
+
+  toggle() {
+    this.open ? this.hide() : this.show()
+  }
+
+  contains(node: Node | null) {
+    return !!node && !!(this.popupRef.value as HTMLElement | null)?.contains(node as Node)
+  }
+
+  focusOnCurrentDate() {
+    const cal = this.calendarRef.value as PktCalendar
+    if (cal && typeof cal.focusOnCurrentDate === 'function') cal.focusOnCurrentDate()
+  }
+
+  addToSelected(e: Event, min?: string | null, max?: string | null) {
+    if (typeof calendarUtils.addToSelected === 'function') {
+      return calendarUtils.addToSelected(e, this.calendarRef as any, min, max)
+    }
+    return undefined
+  }
+
+  handleDateSelect(date: Date) {
+    const cal = this.calendarRef.value as PktCalendar
+    if (cal && typeof cal.handleDateSelect === 'function') return cal.handleDateSelect(date)
+    return undefined
+  }
+
+  render() {
+    const classes = { 'pkt-calendar-popup': true, show: this.open, hide: !this.open }
+    return html`
+      <div
+        class="${classMap(classes)}"
+        ${ref(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        <pkt-calendar
+          ${ref(this.calendarRef)}
+          ?multiple=${this.multiple}
+          ?range=${this.range}
+          ?weeknumbers=${this.weeknumbers}
+          ?withcontrols=${this.withcontrols}
+          .maxMultiple=${this.maxMultiple}
+          .selected=${this.selected}
+          .earliest=${this.earliest}
+          .latest=${this.latest}
+          .excludedates=${this.excludedates}
+          .excludeweekdays=${this.excludeweekdays}
+          .currentmonth=${this.currentmonth}
+          @date-selected=${(e: CustomEvent) => {
+            this.selected = e.detail
+            this.dispatchEvent(
+              new CustomEvent('date-selected', { detail: e.detail, bubbles: true, composed: true }),
+            )
+          }}
+          @close=${() => {
+            this.hide()
+            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+          }}
+        ></pkt-calendar>
+      </div>
+    `
+  }
+}

package/src/components/datepicker/datepicker-range.ts

@@ -0,0 +1,281 @@
+import { html, nothing } 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, createRef, ref } from 'lit/directives/ref.js'
+import { PktElement } from '@/base-elements/element'
+import { keyboardUtils, formUtils, deviceDetection, cssUtils } from './datepicker-utils'
+import '@/components/icon'
+
+@customElement('pkt-datepicker-range')
+export class PktDatepickerRange extends PktElement {
+  @property({ type: Array })
+  value: string[] = []
+
+  @property({ type: String })
+  inputType: string = 'date'
+
+  @property({ type: String })
+  id: string = ''
+
+  @property({ type: String })
+  min?: string
+
+  @property({ type: String })
+  max?: string
+
+  @property({ type: String })
+  placeholder?: string
+
+  @property({ type: Boolean })
+  readonly: boolean = false
+
+  @property({ type: Boolean })
+  disabled: boolean = false
+
+  @property({ type: Boolean })
+  showRangeLabels: boolean = false
+
+  @property({ type: Object })
+  inputClasses: Record<string, boolean> = {}
+
+  @property({ type: Object })
+  internals?: any
+
+  @property({ type: Object })
+  strings: any = { generic: { from: 'Fra', to: 'Til' } }
+
+  inputRef: Ref<HTMLInputElement> = createRef()
+  inputRefTo: Ref<HTMLInputElement> = createRef()
+  btnRef: Ref<HTMLButtonElement> = createRef()
+
+  get inputElement(): HTMLInputElement | undefined {
+    return this.inputRef.value
+  }
+
+  get inputElementTo(): HTMLInputElement | undefined {
+    return this.inputRefTo.value
+  }
+
+  get buttonElement(): HTMLButtonElement | undefined {
+    return this.btnRef.value
+  }
+
+  get isInputReadonly(): boolean {
+    return this.readonly || this.inputType === 'text'
+  }
+
+  private dispatchToggleCalendar(e: Event) {
+    if (this.readonly) return
+
+    this.dispatchEvent(
+      new CustomEvent('toggle-calendar', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchInput(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-change', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchFocus() {
+    this.dispatchEvent(
+      new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchBlur(e: FocusEvent) {
+    this.dispatchEvent(
+      new CustomEvent('input-blur', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchChange(e: Event) {
+    this.dispatchEvent(
+      new CustomEvent('input-changed', {
+        detail: e,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private dispatchManageValidity(input: HTMLInputElement) {
+    this.dispatchEvent(
+      new CustomEvent('manage-validity', {
+        detail: input,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    const rangeLabelClasses = cssUtils.getRangeLabelClasses(this.showRangeLabels)
+
+    return html`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels
+          ? html` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `
+          : nothing}
+        <input
+          class=${classMap(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value[0] ?? ''}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () =>
+                  this.inputRefTo.value?.focus(),
+                ),
+              () => this.inputRefTo.value?.focus(),
+              () => this.inputRef.value?.blur(),
+            )}
+          @input=${(e: Event) => {
+            this.dispatchInput(e)
+            e.stopImmediatePropagation()
+          }}
+          @focus=${() => {
+            this.dispatchFocus()
+            if (deviceDetection.isIOS()) {
+              this.dispatchToggleCalendar(new Event('focus'))
+            }
+          }}
+          @blur=${(e: Event) => {
+            this.dispatchEvent(
+              new CustomEvent('range-blur', {
+                detail: {
+                  event: e,
+                  values: this.value,
+                  inputType: 'from',
+                },
+                bubbles: true,
+                composed: true,
+              }),
+            )
+          }}
+          @change=${(e: Event) => {
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRef)}
+        />
+        <div class="${classMap(rangeLabelClasses)}" id="${this.id}-to-label">
+          ${this.strings.generic.to}
+        </div>
+        ${!this.showRangeLabels ? html` <div class="pkt-input-separator">–</div> ` : nothing}
+        <input
+          class=${classMap(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-to"
+          aria-labelledby="${this.id}-to-label"
+          .value=${this.value[1] ?? ''}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${(e: MouseEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @touchend=${(e: TouchEvent) => {
+            e.preventDefault()
+            this.dispatchToggleCalendar(e)
+          }}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleInputKeydown(
+              e,
+              (event) => this.dispatchToggleCalendar(event),
+              () =>
+                formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.blur()),
+              undefined,
+              () => this.inputRefTo.value?.blur(),
+            )}
+          @input=${(e: Event) => {
+            this.dispatchInput(e)
+            e.stopImmediatePropagation()
+          }}
+          @focus=${() => {
+            this.dispatchFocus()
+            if (deviceDetection.isIOS()) {
+              this.dispatchToggleCalendar(new Event('focus'))
+            }
+          }}
+          @blur=${(e: FocusEvent) => {
+            this.dispatchBlur(e)
+            if ((e.target as HTMLInputElement).value) {
+              this.dispatchManageValidity(e.target as HTMLInputElement)
+              this.dispatchEvent(
+                new CustomEvent('validate-date-input', {
+                  detail: e.target as HTMLInputElement,
+                  bubbles: true,
+                  composed: true,
+                }),
+              )
+              this.dispatchEvent(
+                new CustomEvent('handle-date-select', {
+                  detail: (e.target as HTMLInputElement).value,
+                  bubbles: true,
+                  composed: true,
+                }),
+              )
+            }
+          }}
+          @change=${(e: Event) => {
+            this.dispatchChange(e)
+            e.stopImmediatePropagation()
+          }}
+          ${ref(this.inputRefTo)}
+        />
+        <button
+          class="${classMap(cssUtils.getButtonClasses())}"
+          type="button"
+          @click=${(e: Event) => this.dispatchToggleCalendar(e)}
+          @keydown=${(e: KeyboardEvent) =>
+            keyboardUtils.handleButtonKeydown(e, (event) => this.dispatchToggleCalendar(event))}
+          ?disabled=${this.disabled}
+          ${ref(this.btnRef)}
+        >
+          <pkt-icon name="calendar"></pkt-icon>
+          <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+        </button>
+      </div>
+    `
+  }
+}