@oslokommune/punkt-elements 13.6.5 → 13.6.7

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

@@ -0,0 +1,475 @@
+import {
+  fromISOToDate,
+  newDate,
+  isValidDateRange,
+  sortDateStrings,
+  filterSelectableDates,
+} from '@/utils/dateutils'
+import { Ref } from 'lit/directives/ref.js'
+import { PktCalendar } from '@/components/calendar/calendar'
+
+/**
+ * Utility functions for PktDatepicker
+ */
+
+/**
+ * Sleep utility function for async delays
+ */
+export const sleep = (ms: number): Promise<void> =>
+  new Promise((resolve) => setTimeout(resolve, ms))
+
+/**
+ * Device detection utilities
+ */
+export const deviceDetection = {
+  /**
+   * Detects if the current device is iOS (iPhone, iPad, iPod)
+   */
+  isIOS(): boolean {
+    const ua = navigator.userAgent
+    return /iP(hone|od|ad)/.test(ua)
+  },
+
+  /**
+   * Detects if the current device is Mobile Safari
+   */
+  isMobileSafari(): boolean {
+    const ua = navigator.userAgent
+    return /iP(hone|od|ad)/.test(ua) && /Safari/.test(ua) && !/CriOS|FxiOS/.test(ua)
+  },
+}
+
+/**
+ * Value parsing and validation utilities
+ */
+export const valueUtils = {
+  /**
+   * Parses a value (string or string array) into an array of strings
+   */
+  parseValue(value: string | string[] | null | undefined): string[] {
+    if (!value) return []
+    if (Array.isArray(value)) {
+      return value.filter(Boolean)
+    }
+    if (typeof value === 'string') {
+      return value.split(',').filter(Boolean)
+    }
+    return String(value).split(',').filter(Boolean)
+  },
+
+  /**
+   * Converts array of dates to comma-separated string
+   */
+  formatValue(values: string[]): string {
+    return values.join(',')
+  },
+
+  /**
+   * Ensures name attribute ends with [] for multiple/range inputs
+   */
+  normalizeNameForMultiple(
+    name: string | null,
+    isMultiple: boolean,
+    isRange: boolean,
+  ): string | null {
+    if (!name) return null
+    if ((isMultiple || isRange) && !name.endsWith('[]')) {
+      return name + '[]'
+    }
+    return name
+  },
+
+  /**
+   * Converts string arrays to proper arrays if they come as strings
+   */
+  normalizeStringArray(value: string | string[]): string[] {
+    if (typeof value === 'string') {
+      return value.split(',').filter(Boolean)
+    }
+    return Array.isArray(value) ? value : []
+  },
+
+  /**
+   * Validates that a range has valid order (start <= end)
+   */
+  validateRangeOrder(values: string[]): boolean {
+    if (!values || values.length !== 2) return true // Not a complete range
+    return isValidDateRange(values[0], values[1])
+  },
+
+  /**
+   * Sorts date strings chronologically
+   */
+  sortDates(dates: string[]): string[] {
+    return sortDateStrings(dates)
+  },
+
+  /**
+   * Filters dates to only include selectable ones based on constraints
+   */
+  filterSelectableDates(
+    dates: string[],
+    min?: string | null,
+    max?: string | null,
+    excludedDates?: string[],
+    excludedWeekdays?: string[],
+  ): string[] {
+    return filterSelectableDates(dates, min, max, excludedDates, excludedWeekdays)
+  },
+}
+
+/**
+ * Input type detection utilities
+ */
+export const inputTypeUtils = {
+  /**
+   * Determines the appropriate input type based on device
+   * Mobile Safari does not play well with type="date" amd custom datepickers
+   */
+  getInputType(): string {
+    return deviceDetection.isIOS() ? 'text' : 'date'
+  },
+}
+
+/**
+ * Form and validation utilities
+ */
+export const formUtils = {
+  /**
+   * Submits the form that contains the given element
+   */
+  submitForm(element: HTMLElement): void {
+    const form = (element as any).internals?.form as HTMLFormElement
+    if (form) {
+      form.requestSubmit()
+    }
+  },
+
+  /**
+   * Submits form if available, otherwise executes fallback action
+   */
+  submitFormOrFallback(internals: any, fallbackAction: () => void): void {
+    const form = internals?.form as HTMLFormElement
+    if (form) {
+      form.requestSubmit()
+    } else {
+      fallbackAction()
+    }
+  },
+
+  /**
+   * Validates a date input and sets validity state
+   */
+  validateDateInput(
+    input: HTMLInputElement,
+    internals: any,
+    min?: string | null,
+    max?: string | null,
+    strings?: any,
+  ): void {
+    const value = input.value
+    if (!value) return
+
+    if (min && min > value) {
+      internals.setValidity(
+        { rangeUnderflow: true },
+        strings?.forms?.messages?.rangeUnderflow || 'Value is below minimum',
+        input,
+      )
+    } else if (max && max < value) {
+      internals.setValidity(
+        { rangeOverflow: true },
+        strings?.forms?.messages?.rangeOverflow || 'Value is above maximum',
+        input,
+      )
+    }
+  },
+}
+
+/**
+ * Calendar interaction utilities
+ */
+export const calendarUtils = {
+  /**
+   * Adds a date to selected dates if it's valid
+   */
+  addToSelected(
+    event: Event | KeyboardEvent,
+    calendarRef: Ref<PktCalendar>,
+    min?: string | null,
+    max?: string | null,
+  ): void {
+    const target = event.target as HTMLInputElement
+    if (!target.value) return
+
+    const minAsDate = min ? newDate(min) : null
+    const maxAsDate = max ? newDate(max) : null
+    const date = newDate(target.value.split(',')[0])
+
+    if (
+      date &&
+      !isNaN(date.getTime()) &&
+      (!minAsDate || date >= minAsDate) &&
+      (!maxAsDate || date <= maxAsDate) &&
+      calendarRef.value
+    ) {
+      calendarRef.value.handleDateSelect(date)
+    }
+    target.value = ''
+  },
+
+  /**
+   * Handles calendar positioning based on viewport and input position
+   */
+  handleCalendarPosition(
+    popupRef: Ref<HTMLDivElement>,
+    inputRef: Ref<HTMLInputElement>,
+    hasCounter: boolean = false,
+  ): void {
+    if (!popupRef.value || !inputRef.value) return
+
+    const inputRect =
+      inputRef.value.parentElement?.getBoundingClientRect() ||
+      inputRef.value.getBoundingClientRect()
+
+    const inputHeight = hasCounter ? inputRect.height + 30 : inputRect.height
+    const popupHeight = popupRef.value.getBoundingClientRect().height
+
+    let top = hasCounter ? 'calc(100% - 30px)' : '100%'
+
+    if (
+      inputRect &&
+      inputRect.top + popupHeight > window.innerHeight &&
+      inputRect.top - popupHeight > 0
+    ) {
+      top = `calc(100% - ${inputHeight}px - ${popupHeight}px)`
+    }
+
+    popupRef.value.style.top = top
+  },
+}
+
+/**
+ * Event handling utilities
+ */
+export const eventUtils = {
+  /**
+   * Creates a document click listener for closing calendar
+   */
+  createDocumentClickListener(
+    inputRef: Ref<HTMLInputElement>,
+    inputRefTo: Ref<HTMLInputElement> | null,
+    btnRef: Ref<HTMLButtonElement>,
+    getCalendarOpen: () => boolean,
+    onBlur: () => void,
+    hideCalendar: () => void,
+  ): (e: MouseEvent) => void {
+    return (e: MouseEvent) => {
+      if (
+        inputRef?.value &&
+        btnRef?.value &&
+        !inputRef.value.contains(e.target as Node) &&
+        !(inputRefTo?.value && inputRefTo.value.contains(e.target as Node)) &&
+        !btnRef.value.contains(e.target as Node) &&
+        !(e.target as Element).closest('.pkt-calendar-popup') &&
+        getCalendarOpen()
+      ) {
+        onBlur()
+        hideCalendar()
+      }
+    }
+  },
+
+  /**
+   * Creates a document keydown listener for ESC key
+   */
+  createDocumentKeydownListener(
+    getCalendarOpen: () => boolean,
+    hideCalendar: () => void,
+  ): (e: KeyboardEvent) => void {
+    return (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && getCalendarOpen()) {
+        hideCalendar()
+      }
+    }
+  },
+
+  /**
+   * Handles focus out events for calendar popup
+   */
+  handleFocusOut(
+    event: FocusEvent,
+    element: HTMLElement,
+    onBlur: () => void,
+    hideCalendar: () => void,
+  ): void {
+    if (!element.contains(event.target as Node)) {
+      onBlur()
+      hideCalendar()
+    }
+  },
+}
+
+/**
+ * CSS class utilities
+ */
+export const cssUtils = {
+  /**
+   * Generates input classes for datepicker
+   */
+  getInputClasses(fullwidth: boolean, showRangeLabels: boolean, multiple: boolean, range: boolean) {
+    return {
+      'pkt-input': true,
+      'pkt-datepicker__input': true,
+      'pkt-input--fullwidth': fullwidth,
+      'pkt-datepicker--hasrangelabels': showRangeLabels,
+      'pkt-datepicker--multiple': multiple,
+      'pkt-datepicker--range': range,
+    }
+  },
+
+  /**
+   * Generates button classes for datepicker
+   */
+  getButtonClasses() {
+    return {
+      'pkt-input-icon': true,
+      'pkt-btn': true,
+      'pkt-btn--icon-only': true,
+      'pkt-btn--tertiary': true,
+      'pkt-datepicker__calendar-button': true,
+    }
+  },
+
+  /**
+   * Generates range label classes
+   */
+  getRangeLabelClasses(showRangeLabels: boolean) {
+    return {
+      'pkt-input-prefix': showRangeLabels,
+      'pkt-hide': !showRangeLabels,
+    }
+  },
+}
+
+/**
+ * Date value processing utilities
+ */
+export const dateProcessingUtils = {
+  /**
+   * Handles date selection from calendar events
+   */
+  processDateSelection(detail: any, multiple: boolean, range: boolean): string {
+    if (!multiple && !range) {
+      return detail[0] || ''
+    }
+    if (Array.isArray(detail)) {
+      return detail.join(',')
+    }
+    return detail
+  },
+
+  /**
+   * Updates input values after calendar selection
+   */
+  updateInputValues(
+    inputRef: Ref<HTMLInputElement>,
+    inputRefTo: Ref<HTMLInputElement> | null,
+    values: string[],
+    range: boolean,
+    multiple: boolean,
+    manageValidity: (input: HTMLInputElement) => void,
+  ): void {
+    if (!inputRef.value) return
+
+    if (range && inputRefTo?.value) {
+      inputRef.value.value = values[0] ?? ''
+      inputRefTo.value.value = values[1] ?? ''
+      manageValidity(inputRef.value)
+      manageValidity(inputRefTo.value)
+    } else if (!multiple) {
+      inputRef.value.value = values.length ? values[0] : ''
+      manageValidity(inputRef.value)
+    }
+  },
+
+  /**
+   * Processes blur events for range inputs
+   */
+  processRangeBlur(
+    event: Event,
+    values: string[],
+    calendarRef: Ref<PktCalendar>,
+    clearInputValue: () => void,
+    manageValidity: (input: HTMLInputElement) => void,
+  ): void {
+    const target = event.target as HTMLInputElement
+    if (target.value) {
+      manageValidity(target)
+      const date = fromISOToDate(target.value)
+      if (date) {
+        if (values[0] !== target.value && values[1]) {
+          clearInputValue()
+          calendarRef?.value?.handleDateSelect(date)
+        }
+      }
+    } else if (values[0]) {
+      clearInputValue()
+    }
+  },
+}
+
+/**
+ * Keyboard navigation utilities
+ */
+export const keyboardUtils = {
+  /**
+   * Handles common keyboard interactions for datepicker inputs
+   */
+  handleInputKeydown(
+    event: KeyboardEvent,
+    toggleCalendar: (e: Event) => void,
+    submitForm?: () => void,
+    focusNextInput?: () => void,
+    blurInput?: () => void,
+    commaHandler?: (e: KeyboardEvent) => void,
+  ): void {
+    const { key } = event
+
+    if (key === ',') {
+      event.preventDefault()
+      if (commaHandler) {
+        commaHandler(event)
+      } else if (blurInput) {
+        blurInput()
+      }
+    }
+
+    if (key === 'Space' || key === ' ') {
+      event.preventDefault()
+      toggleCalendar(event)
+    }
+
+    if (key === 'Enter') {
+      event.preventDefault()
+      if (submitForm) {
+        submitForm()
+      } else if (focusNextInput) {
+        focusNextInput()
+      } else if (blurInput) {
+        blurInput()
+      }
+    }
+  },
+
+  /**
+   * Handles keyboard interactions for calendar button
+   */
+  handleButtonKeydown(event: KeyboardEvent, toggleCalendar: (e: Event) => void): void {
+    const { key } = event
+    if (key === 'Enter' || key === ' ' || key === 'Space') {
+      event.preventDefault()
+      toggleCalendar(event)
+    }
+  },
+}

package/src/components/datepicker/datepicker.selection.test.ts

@@ -123,6 +123,26 @@ describe('PktDatepicker', () => {
       expect(tagTexts[1]).toContain('20')
       expect(tagTexts[2]).toContain('25')
     })
+
+    test('sorts multiple dates chronologically across months and years', async () => {
+      // Test dates that would fail with simple string sorting
+      const complexUnsortedDates = '2024-12-01,2023-01-15,2024-01-01,2023-12-31'
+      const container = await createDatepicker(`value="${complexUnsortedDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      const tagTexts = Array.from(tags).map((tag) =>
+        tag.querySelector('time')?.getAttribute('datetime'),
+      )
+
+      // Should be sorted chronologically: 2023-01-15, 2023-12-31, 2024-01-01, 2024-12-01
+      expect(tagTexts[0]).toBe('2023-01-15')
+      expect(tagTexts[1]).toBe('2023-12-31')
+      expect(tagTexts[2]).toBe('2024-01-01')
+      expect(tagTexts[3]).toBe('2024-12-01')
+    })
   })
 
   describe('Range selection', () => {
@@ -251,8 +271,49 @@ describe('PktDatepicker', () => {
       const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
       await datepicker.updateComplete
 
-      // Should handle invalid range gracefully
+      // Should reject invalid range and clear the value
+      expect(datepicker.value).toBe('')
+      expect(datepicker._value).toEqual([])
+
+      // Component should still render without errors
       expect(datepicker).toBeInTheDocument()
+
+      // Test with valid range should work
+      datepicker.value = '2024-06-15,2024-06-20'
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe('2024-06-15,2024-06-20')
+      expect(datepicker._value).toEqual(['2024-06-15', '2024-06-20'])
+    })
+
+    test('handles range validation edge cases', async () => {
+      const container = await createDatepicker('range')
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Same start and end date should be valid
+      datepicker.value = '2024-06-15,2024-06-15'
+      await datepicker.updateComplete
+      expect(datepicker.value).toBe('2024-06-15,2024-06-15')
+
+      // Single date should be valid (incomplete range)
+      datepicker.value = '2024-06-15'
+      await datepicker.updateComplete
+      expect(datepicker.value).toBe('2024-06-15')
+
+      // Empty value should be valid
+      datepicker.value = ''
+      await datepicker.updateComplete
+      expect(datepicker.value).toBe('')
+
+      // Multiple invalid attempts should be consistently rejected
+      datepicker.value = '2024-06-25,2024-06-10'
+      await datepicker.updateComplete
+      expect(datepicker.value).toBe('')
+
+      datepicker.value = '2024-12-31,2024-01-01'
+      await datepicker.updateComplete
+      expect(datepicker.value).toBe('')
     })
 
     test('shows range preview on hover', async () => {