@oslokommune/punkt-elements 14.5.3 → 15.0.0

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

@@ -1,135 +1,50 @@
-import {
-  fromISOToDate,
-  newDate,
-  isValidDateRange,
-  sortDateStrings,
-  filterSelectableDates,
-} from 'shared-utils/date-utils'
-import { isIOS } from 'shared-utils/device-utils'
+import { fromISOToDate, newDate } from 'shared-utils/date-utils'
 import { Ref } from 'lit/directives/ref.js'
 import { PktCalendar } from '@/components/calendar/calendar'
+import {
+  validateRangeOrder,
+  sortDates,
+  filterDates,
+  getDatepickerInputType,
+  getDatepickerInputClasses,
+  getDatepickerButtonClasses,
+  getRangeLabelClasses,
+  processDateSelection as sharedProcessDateSelection,
+  handleCalendarPosition as sharedHandleCalendarPosition,
+  handleDatepickerKeydown,
+  handleDatepickerButtonKeydown,
+} from 'shared-utils/datepicker-utils'
 
 /**
  * Utility functions for PktDatepicker component
  *
- * This module provides helper functions organized by concern:
- * - valueUtils: Value parsing and validation
- * - inputTypeUtils: Input type detection
- * - formUtils: Form submission and validation
- * - calendarUtils: Calendar interaction and positioning
- * - eventUtils: Event listener creation
- * - cssUtils: CSS class generation
- * - dateProcessingUtils: Date value processing
- * - keyboardUtils: Keyboard navigation handling
+ * This module provides helper functions organized by concern.
+ * Framework-agnostic functions are delegated to shared-utils/datepicker-utils.
+ * Lit-specific functions (using Ref, ElementInternals, PktCalendar) stay here.
  */
 
 /**
  * Value parsing and validation utilities
+ * Delegates to shared-utils/datepicker-utils
  */
 export const valueUtils = {
-  /**
-   * Validates that a range has valid order (start <= end)
-   *
-   * @param values - Array of date strings (ISO format YYYY-MM-DD)
-   * @returns True if range is valid or incomplete, false if end date is before start date
-   *
-   * @example
-   * validateRangeOrder(['2024-01-01', '2024-01-31']) // Returns true
-   * validateRangeOrder(['2024-01-31', '2024-01-01']) // Returns false
-   * validateRangeOrder(['2024-01-01']) // Returns true (incomplete range)
-   */
-  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
-   *
-   * @param dates - Array of date strings in ISO format (YYYY-MM-DD)
-   * @returns New array with dates sorted from earliest to latest
-   *
-   * @example
-   * sortDates(['2024-03-15', '2024-01-10', '2024-02-20'])
-   * // Returns ['2024-01-10', '2024-02-20', '2024-03-15']
-   */
-  sortDates(dates: string[]): string[] {
-    return sortDateStrings(dates)
-  },
-
-  /**
-   * Filters dates to only include selectable ones based on constraints
-   *
-   * Removes dates that:
-   * - Fall outside the min/max range
-   * - Are in the excludedDates array
-   * - Fall on excluded weekdays (0=Sunday, 6=Saturday)
-   *
-   * @param dates - Array of date strings to filter
-   * @param min - Minimum allowed date (ISO format)
-   * @param max - Maximum allowed date (ISO format)
-   * @param excludedDates - Array of specific dates to exclude
-   * @param excludedWeekdays - Array of weekday numbers to exclude ('0'-'6')
-   * @returns Filtered array containing only selectable dates
-   *
-   * @example
-   * filterSelectableDates(
-   *   ['2024-01-01', '2024-01-06', '2024-01-15'],
-   *   '2024-01-05',
-   *   '2024-01-20',
-   *   ['2024-01-15'],
-   *   ['0', '6'] // Exclude weekends
-   * )
-   * // Returns ['2024-01-06'] (after min, not excluded, not a weekend)
-   */
-  filterSelectableDates(
-    dates: string[],
-    min?: string | null,
-    max?: string | null,
-    excludedDates?: string[],
-    excludedWeekdays?: string[],
-  ): string[] {
-    return filterSelectableDates(dates, min, max, excludedDates, excludedWeekdays)
-  },
+  validateRangeOrder,
+  sortDates,
+  filterSelectableDates: filterDates,
 }
 
 /**
  * Input type detection utilities
+ * Delegates to shared-utils/datepicker-utils
  */
 export const inputTypeUtils = {
-  /**
-   * Determines the appropriate input type based on device
-   *
-   * Mobile Safari does not play well with type="date" and custom datepickers,
-   * so we use type="text" on iOS devices to avoid the native date picker
-   * interfering with our custom calendar component.
-   *
-   * @returns 'text' for iOS devices, 'date' for all other devices
-   *
-   * @example
-   * const inputType = getInputType()
-   * // Returns 'text' on iPhone/iPad, 'date' on desktop/Android
-   */
-  getInputType(): string {
-    return isIOS() ? 'text' : 'date'
-  },
+  getInputType: getDatepickerInputType,
 }
 
 /**
- * Form and validation utilities
+ * Form and validation utilities (Lit-specific — uses ElementInternals)
  */
 export const formUtils = {
-  /**
-   * Submits the form that contains the given element
-   *
-   * Uses ElementInternals API to access the associated form and trigger submission.
-   * Requires the element to have attachInternals() called.
-   *
-   * @param element - The form-associated custom element
-   *
-   * @example
-   * submitForm(this) // From within a custom element
-   */
   submitForm(element: HTMLElement): void {
     const form = (element as any).internals?.form as HTMLFormElement
     if (form) {
@@ -137,21 +52,6 @@ export const formUtils = {
     }
   },
 
-  /**
-   * Submits form if available, otherwise executes fallback action
-   *
-   * Useful for Enter key handling where we want to submit the form,
-   * but provide a fallback behavior (like moving focus) if not in a form.
-   *
-   * @param internals - ElementInternals instance with optional form reference
-   * @param fallbackAction - Function to call if no form is available
-   *
-   * @example
-   * submitFormOrFallback(
-   *   this.internals,
-   *   () => this.inputRef.value?.blur()
-   * )
-   */
   submitFormOrFallback(internals: any, fallbackAction: () => void): void {
     const form = internals?.form as HTMLFormElement
     if (form) {
@@ -161,27 +61,6 @@ export const formUtils = {
     }
   },
 
-  /**
-   * Validates a date input and sets validity state
-   *
-   * Checks if the input value falls within the min/max range and
-   * sets appropriate validity flags using the ElementInternals API.
-   *
-   * @param input - The input element to validate
-   * @param internals - ElementInternals instance for setting validity
-   * @param min - Minimum allowed date (ISO format)
-   * @param max - Maximum allowed date (ISO format)
-   * @param strings - Optional localized error messages
-   *
-   * @example
-   * validateDateInput(
-   *   inputElement,
-   *   this.internals,
-   *   '2024-01-01',
-   *   '2024-12-31',
-   *   { forms: { messages: { rangeUnderflow: 'Date too early' } } }
-   * )
-   */
   validateDateInput(
     input: HTMLInputElement,
     internals: any,
@@ -210,28 +89,10 @@ export const formUtils = {
 
 /**
  * Calendar interaction utilities
+ * handleCalendarPosition delegates to shared-utils (with Lit ref unwrapping).
+ * addToSelected stays Lit-specific (uses Ref<PktCalendar>).
  */
 export const calendarUtils = {
-  /**
-   * Adds a date to selected dates if it's valid
-   *
-   * Used for multiple date selection - validates the input date against
-   * min/max constraints before adding it to the calendar's selected dates.
-   * Clears the input field after processing.
-   *
-   * @param event - Input or keyboard event containing the target input
-   * @param calendarRef - Lit ref to the calendar component
-   * @param min - Minimum allowed date (ISO format)
-   * @param max - Maximum allowed date (ISO format)
-   *
-   * @example
-   * addToSelected(
-   *   blurEvent,
-   *   this.calendarRef,
-   *   '2024-01-01',
-   *   '2024-12-31'
-   * )
-   */
   addToSelected(
     event: Event | KeyboardEvent,
     calendarRef: Ref<PktCalendar>,
@@ -257,87 +118,19 @@ export const calendarUtils = {
     target.value = ''
   },
 
-  /**
-   * Handles calendar positioning based on viewport and input position
-   *
-   * Intelligently positions the calendar popup either above or below the input
-   * depending on available viewport space. Accounts for optional counter elements.
-   *
-   * The positioning logic:
-   * 1. By default, positions calendar below the input (top: 100%)
-   * 2. If calendar would overflow viewport bottom AND there's space above, positions above
-   * 3. Accounts for counter height (30px) when hasCounter is true
-   *
-   * @param popupRef - Lit ref to the calendar popup element
-   * @param inputRef - Lit ref to the input element
-   * @param hasCounter - Whether the input has a character counter below it
-   *
-   * @example
-   * handleCalendarPosition(
-   *   this.popupRef,
-   *   this.inputRef,
-   *   this.multiple && this.maxlength !== null
-   * )
-   */
   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
+    sharedHandleCalendarPosition(popupRef.value ?? null, inputRef.value ?? null, hasCounter)
   },
 }
 
 /**
- * Event handling utilities
- *
- * Factory functions for creating event listeners with proper closure over component state.
+ * Event handling utilities (Lit-specific — uses Lit Ref types)
  */
 export const eventUtils = {
-  /**
-   * Creates a document click listener for closing calendar on outside clicks
-   *
-   * Returns a function that closes the calendar when clicking outside the
-   * datepicker component (input, button, or calendar popup).
-   *
-   * @param inputRef - Lit ref to the primary input element
-   * @param inputRefTo - Lit ref to the secondary input (for range picker) or null
-   * @param btnRef - Lit ref to the calendar button
-   * @param getCalendarOpen - Function returning current calendar open state
-   * @param onBlur - Callback to execute on blur
-   * @param hideCalendar - Callback to hide the calendar
-   * @returns Event listener function to attach to document
-   *
-   * @example
-   * const listener = createDocumentClickListener(
-   *   this.inputRef,
-   *   null,
-   *   this.btnRef,
-   *   () => this.calendarOpen,
-   *   () => this.handleBlur(),
-   *   () => this.calendarOpen = false
-   * )
-   * document.addEventListener('click', listener)
-   */
   createDocumentClickListener(
     inputRef: Ref<HTMLInputElement>,
     inputRefTo: Ref<HTMLInputElement> | null,
@@ -362,22 +155,6 @@ export const eventUtils = {
     }
   },
 
-  /**
-   * Creates a document keydown listener for ESC key
-   *
-   * Returns a function that closes the calendar when Escape is pressed.
-   *
-   * @param getCalendarOpen - Function returning current calendar open state
-   * @param hideCalendar - Callback to hide the calendar
-   * @returns Event listener function to attach to document
-   *
-   * @example
-   * const listener = createDocumentKeydownListener(
-   *   () => this.calendarOpen,
-   *   () => this.calendarOpen = false
-   * )
-   * document.addEventListener('keydown', listener)
-   */
   createDocumentKeydownListener(
     getCalendarOpen: () => boolean,
     hideCalendar: () => void,
@@ -389,25 +166,6 @@ export const eventUtils = {
     }
   },
 
-  /**
-   * Handles focus out events for calendar popup
-   *
-   * Closes the calendar when focus leaves the datepicker component entirely.
-   * Used for keyboard navigation accessibility.
-   *
-   * @param event - The focusout event
-   * @param element - The container element to check focus against
-   * @param onBlur - Callback to execute on blur
-   * @param hideCalendar - Callback to hide the calendar
-   *
-   * @example
-   * handleFocusOut(
-   *   event,
-   *   this,
-   *   () => this.handleBlur(),
-   *   () => this.calendarOpen = false
-   * )
-   */
   handleFocusOut(
     event: FocusEvent,
     element: HTMLElement,
@@ -423,139 +181,22 @@ export const eventUtils = {
 
 /**
  * CSS class utilities
- *
- * Functions for generating CSS class objects for use with classMap directive.
+ * Delegates to shared-utils/datepicker-utils
  */
 export const cssUtils = {
-  /**
-   * Generates input classes for datepicker
-   *
-   * @param fullwidth - Whether input should take full width
-   * @param showRangeLabels - Whether range labels are visible
-   * @param multiple - Whether this is a multiple date picker
-   * @param range - Whether this is a range date picker
-   * @param readonly - Whether input is readonly
-   * @param inputType - The input type ('date' or 'text')
-   * @returns Object with class names as keys and boolean values
-   *
-   * @example
-   * const classes = getInputClasses(true, false, false, false, false, 'date')
-   * // Returns { 'pkt-input': true, 'pkt-input--fullwidth': true, ... }
-   */
-  getInputClasses(
-    fullwidth: boolean,
-    showRangeLabels: boolean,
-    multiple: boolean,
-    range: boolean,
-    readonly?: boolean,
-    inputType?: string,
-  ) {
-    return {
-      'pkt-input': true,
-      'pkt-datepicker__input': true,
-      'pkt-input--fullwidth': fullwidth,
-      'pkt-datepicker--hasrangelabels': showRangeLabels,
-      'pkt-datepicker--multiple': multiple,
-      'pkt-datepicker--range': range,
-      'ios-readonly-hack': readonly === false && inputType === 'text',
-    }
-  },
-
-  /**
-   * Generates button classes for calendar button
-   *
-   * @returns Object with class names for the calendar toggle button
-   *
-   * @example
-   * const classes = getButtonClasses()
-   * // Returns { 'pkt-btn': true, 'pkt-btn--icon-only': true, ... }
-   */
-  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
-   *
-   * @param showRangeLabels - Whether range labels should be visible
-   * @returns Object with class names for range label elements
-   *
-   * @example
-   * const classes = getRangeLabelClasses(true)
-   * // Returns { 'pkt-input-prefix': true, 'pkt-hide': false }
-   */
-  getRangeLabelClasses(showRangeLabels: boolean) {
-    return {
-      'pkt-input-prefix': showRangeLabels,
-      'pkt-hide': !showRangeLabels,
-    }
-  },
+  getInputClasses: getDatepickerInputClasses,
+  getButtonClasses: getDatepickerButtonClasses,
+  getRangeLabelClasses,
 }
 
 /**
  * Date value processing utilities
- *
- * Functions for transforming and updating date values between calendar and input elements.
+ * processDateSelection delegates to shared-utils.
+ * updateInputValues and processRangeBlur stay Lit-specific (use Lit Ref).
  */
 export const dateProcessingUtils = {
-  /**
-   * Processes date selection from calendar events
-   *
-   * Converts the calendar's date selection into the appropriate string format
-   * for the input element's value.
-   *
-   * @param detail - Date selection detail from calendar event (string or array)
-   * @param multiple - Whether this is a multiple date picker
-   * @param range - Whether this is a range date picker
-   * @returns Formatted date string (single date or comma-separated dates)
-   *
-   * @example
-   * processDateSelection(['2024-01-15'], false, false) // Returns '2024-01-15'
-   * processDateSelection(['2024-01-15', '2024-01-20'], true, false) // Returns '2024-01-15,2024-01-20'
-   */
-  processDateSelection(detail: any, multiple: boolean, range: boolean): string {
-    if (!multiple && !range) {
-      return detail[0] || ''
-    }
-    if (Array.isArray(detail)) {
-      return detail.join(',')
-    }
-    return detail
-  },
+  processDateSelection: sharedProcessDateSelection,
 
-  /**
-   * Updates input values after calendar selection
-   *
-   * Synchronizes input element values with the calendar's selected dates.
-   * Handles single, range, and multiple date scenarios differently.
-   *
-   * - Single: Updates single input with first date
-   * - Range: Updates two inputs with start and end dates
-   * - Multiple: Does nothing (dates shown as tags, not in input)
-   *
-   * @param inputRef - Lit ref to the primary input element
-   * @param inputRefTo - Lit ref to the secondary input (for range) or null
-   * @param values - Array of selected date strings
-   * @param range - Whether this is a range date picker
-   * @param multiple - Whether this is a multiple date picker
-   * @param manageValidity - Callback to validate the input
-   *
-   * @example
-   * updateInputValues(
-   *   this.inputRef,
-   *   this.inputRefTo,
-   *   ['2024-01-15', '2024-01-20'],
-   *   true, // range
-   *   false,
-   *   (input) => this.dispatchManageValidity(input)
-   * )
-   */
   updateInputValues(
     inputRef: Ref<HTMLInputElement>,
     inputRefTo: Ref<HTMLInputElement> | null,
@@ -577,30 +218,6 @@ export const dateProcessingUtils = {
     }
   },
 
-  /**
-   * Processes blur events for range inputs
-   *
-   * Handles the logic when a range input loses focus:
-   * - If input has value: validates it and updates the calendar to reflect the typed date
-   * - If input is empty but range has start date: clears the entire range
-   *
-   * This ensures the range picker calendar stays synchronized when users type dates directly.
-   *
-   * @param event - The blur event from the input
-   * @param values - Current array of selected dates [start, end]
-   * @param calendarRef - Lit ref to the calendar component
-   * @param clearInputValue - Callback to clear the date selection
-   * @param manageValidity - Callback to validate the input
-   *
-   * @example
-   * processRangeBlur(
-   *   blurEvent,
-   *   ['2024-01-15', '2024-01-20'],
-   *   this.calendarRef,
-   *   () => this.value = [],
-   *   (input) => this.dispatchManageValidity(input)
-   * )
-   */
   processRangeBlur(
     event: Event,
     values: string[],
@@ -613,7 +230,6 @@ export const dateProcessingUtils = {
       manageValidity(target)
       const date = fromISOToDate(target.value)
       if (date) {
-        // Always update the calendar when a valid date is typed
         calendarRef?.value?.handleDateSelect(date)
       }
     } else if (values[0]) {
@@ -624,104 +240,9 @@ export const dateProcessingUtils = {
 
 /**
  * Keyboard navigation utilities
- *
- * Functions for handling keyboard interactions with proper accessibility support.
+ * Delegates to shared-utils/datepicker-utils
  */
 export const keyboardUtils = {
-  /**
-   * Handles common keyboard interactions for datepicker inputs
-   *
-   * Provides consistent keyboard navigation across all datepicker types:
-   * - Space: Opens calendar
-   * - Enter: Submits form, focuses next input, or blurs (priority order)
-   * - Comma: Adds date to selection (multiple) or blurs input
-   *
-   * The handler prioritizes callbacks in the order provided, allowing
-   * different behaviors for single, multiple, and range pickers.
-   *
-   * @param event - The keyboard event
-   * @param toggleCalendar - Callback to toggle calendar visibility
-   * @param submitForm - Optional callback to submit the form (highest priority on Enter)
-   * @param focusNextInput - Optional callback to focus next input (medium priority on Enter)
-   * @param blurInput - Optional callback to blur current input (lowest priority on Enter/Comma)
-   * @param commaHandler - Optional callback for comma key (overrides default blur behavior)
-   *
-   * @example
-   * // Single datepicker: Enter submits form or blurs
-   * handleInputKeydown(
-   *   event,
-   *   (e) => this.toggleCalendar(e),
-   *   () => formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
-   *   undefined,
-   *   () => this.inputRef.value?.blur()
-   * )
-   *
-   * @example
-   * // Range datepicker: Enter moves to next input
-   * handleInputKeydown(
-   *   event,
-   *   (e) => this.toggleCalendar(e),
-   *   () => formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.focus()),
-   *   () => this.inputRefTo.value?.focus(),
-   *   () => this.inputRef.value?.blur()
-   * )
-   */
-  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
-   *
-   * Ensures the calendar button is keyboard accessible by responding
-   * to Enter and Space keys (standard button activation keys).
-   *
-   * @param event - The keyboard event
-   * @param toggleCalendar - Callback to toggle calendar visibility
-   *
-   * @example
-   * handleButtonKeydown(
-   *   event,
-   *   (e) => this.dispatchToggleCalendar(e)
-   * )
-   */
-  handleButtonKeydown(event: KeyboardEvent, toggleCalendar: (e: Event) => void): void {
-    const { key } = event
-    if (key === 'Enter' || key === ' ' || key === 'Space') {
-      event.preventDefault()
-      toggleCalendar(event)
-    }
-  },
+  handleInputKeydown: handleDatepickerKeydown,
+  handleButtonKeydown: handleDatepickerButtonKeydown,
 }