@oslokommune/punkt-elements 13.6.5 → 13.6.7

package/src/components/datepicker/datepicker.ts

@@ -1,7 +1,7 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { formatISODate, fromISOToDate, newDate, parseISODateString } from '@/utils/dateutils'
+import { formatISODate, fromISOToDate, parseISODateString } from '@/utils/dateutils'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktCalendar } from '@/components/calendar/calendar'
 import { PktInputElement } from '@/base-elements/input-element'
@@ -13,14 +13,26 @@ import '@/components/icon'
 import '@/components/input-wrapper'
 import './date-tags'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+import { keyboardUtils } from './datepicker-utils'
+import {
+  sleep,
+  deviceDetection,
+  valueUtils,
+  inputTypeUtils,
+  calendarUtils,
+  eventUtils,
+  cssUtils,
+  dateProcessingUtils,
+  formUtils,
+} from './datepicker-utils'
 @customElement('pkt-datepicker')
 export class PktDatepicker extends PktInputElement {
   /**
    * Element attributes and properties
    */
   private _valueProperty: string = ''
+  private documentClickListener?: (e: MouseEvent) => void
+  private documentKeydownListener?: (e: KeyboardEvent) => void
 
   @property({ type: String, reflect: true })
   get value(): string {
@@ -85,6 +97,13 @@ export class PktDatepicker extends PktInputElement {
   @state() inputClasses = {}
   @state() buttonClasses = {}
 
+  /**
+   * Computed properties
+   */
+  get inputType(): string {
+    return inputTypeUtils.getInputType()
+  }
+
   /**
    * Housekeeping / lifecycle methods
    */
@@ -94,98 +113,71 @@ export class PktDatepicker extends PktInputElement {
     this.slotController = new PktSlotController(this, this.helptextSlot)
   }
 
-  async connectedCallback() {
+  connectedCallback() {
     super.connectedCallback()
-
-    const ua = navigator.userAgent
-    const isIOS = /iP(hone|od|ad)/.test(ua)
-
-    this.inputType = isIOS ? 'text' : 'date'
-
-    document &&
-      document.body.addEventListener('click', (e: MouseEvent) => {
-        if (
-          this.inputRef?.value &&
-          this.btnRef?.value &&
-          !this.inputRef.value.contains(e.target as Node) &&
-          !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target as Node)) &&
-          !this.btnRef.value.contains(e.target as Node) &&
-          !(e.target as Element).closest('.pkt-calendar-popup') &&
-          this.calendarOpen
-        ) {
-          this.onBlur()
-          this.hideCalendar()
-        }
-      })
-
-    document &&
-      document.body.addEventListener('keydown', (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && this.calendarOpen) {
-          this.hideCalendar()
-        }
-      })
-
-    if (this.value) {
-      this._value = Array.isArray(this.value)
-        ? this.value.filter(Boolean)
-        : this.value.split(',').filter(Boolean)
-    }
-    this.min = this.min || specs.props.min.default
-    this.max = this.max || specs.props.max.default
-
-    if (typeof this.excludedates === 'string') {
-      this.excludedates = (this.excludedates as unknown as string).split(',')
-    }
-
-    if (typeof this.excludeweekdays === 'string') {
-      this.excludeweekdays = (this.excludeweekdays as unknown as string).split(',')
-    }
-
-    if ((this.multiple || this.range) && this.name && !this.name.endsWith('[]')) {
-      this.name = this.name + '[]'
-    }
-
-    if (this.calendarOpen) {
-      await sleep(20)
-      this.handleCalendarPosition()
+    if (this.timezone && this.timezone !== window.pktTz) {
+      window.pktTz = this.timezone
     }
+    this.name =
+      valueUtils.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name
+    this.documentClickListener = eventUtils.createDocumentClickListener(
+      this.inputRef,
+      this.inputRefTo,
+      this.btnRef,
+      () => this.calendarOpen,
+      this.onBlur.bind(this),
+      this.hideCalendar.bind(this),
+    )
+    this.documentKeydownListener = eventUtils.createDocumentKeydownListener(
+      () => this.calendarOpen,
+      this.hideCalendar.bind(this),
+    )
+    document.addEventListener('click', this.documentClickListener)
+    document.addEventListener('keydown', this.documentKeydownListener)
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
-    document &&
-      document.body.removeEventListener('click', (e: MouseEvent) => {
-        if (
-          this.inputRef?.value &&
-          this.btnRef?.value &&
-          !this.inputRef.value.contains(e.target as Node) &&
-          !this.btnRef.value.contains(e.target as Node)
-        ) {
-          this.hideCalendar()
-        }
-      })
+    if (this.documentClickListener) {
+      document.removeEventListener('click', this.documentClickListener)
+    }
+    if (this.documentKeydownListener) {
+      document.removeEventListener('keydown', this.documentKeydownListener)
+    }
   }
 
   onInput(): void {
-    // Trigger input event for form validation
     this.dispatchEvent(new Event('input', { bubbles: true }))
   }
 
   valueChanged(newValue: string | null, oldValue: string | null): void {
     if (newValue === oldValue) return
 
-    let parsedValue: string[] = []
-    if (newValue) {
-      if (typeof newValue === 'string') {
-        parsedValue = newValue.split(',').filter(Boolean)
-      } else {
-        parsedValue = String(newValue).split(',').filter(Boolean)
-      }
+    const parsedValue = valueUtils.parseValue(newValue)
+
+    // For multiple dates, filter out invalid ones to prevent accumulating bad dates
+    // For single/range dates, preserve user input for validation feedback
+    const filteredValue =
+      this.multiple && parsedValue.length > 1
+        ? valueUtils.filterSelectableDates(
+            parsedValue,
+            this.min,
+            this.max,
+            this.excludedates,
+            this.excludeweekdays,
+          )
+        : parsedValue
+
+    if (this.range && !valueUtils.validateRangeOrder(filteredValue)) {
+      this._value = []
+      this._valueProperty = ''
+      super.valueChanged('', oldValue)
+      return
     }
 
-    this._value = parsedValue
+    this._value = filteredValue
 
-    const parsedValueString = parsedValue.join(',')
+    const parsedValueString = valueUtils.formatValue(filteredValue)
     if (this._valueProperty !== parsedValueString) {
       this._valueProperty = parsedValueString
     }
@@ -199,11 +191,11 @@ export class PktDatepicker extends PktInputElement {
     }
 
     if (name === 'excludedates' && typeof this.excludedates === 'string') {
-      this.excludedates = value?.split(',') ?? []
+      this.excludedates = valueUtils.normalizeStringArray(value || '')
     }
 
     if (name === 'excludeweekdays' && typeof this.excludeweekdays === 'string') {
-      this.excludeweekdays = value?.split(',') ?? []
+      this.excludeweekdays = valueUtils.normalizeStringArray(value || '')
     }
     super.attributeChangedCallback(name, _old, value)
   }
@@ -215,19 +207,16 @@ export class PktDatepicker extends PktInputElement {
       const oldValueStr = Array.isArray(oldValue) ? oldValue.join(',') : oldValue
       this.valueChanged(newValue, oldValueStr)
     }
+    if (changedProperties.has('multiple') || changedProperties.has('range')) {
+      this.name =
+        valueUtils.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name
+    }
     if (changedProperties.has('multiple')) {
-      // If multiple is now true, ensure _value is an array of non-empty strings
       if (this.multiple && !Array.isArray(this._value)) {
-        this._value =
-          typeof this.value === 'string'
-            ? this.value
-              ? this.value.split(',').filter(Boolean)
-              : []
-            : []
+        this._value = valueUtils.parseValue(this.value)
       } else if (!this.multiple && Array.isArray(this._value)) {
         this._value = this._value.filter(Boolean)
       }
-      // If multiple is now false, ensure _value is a single value (but not for range datepickers)
       if (!this.multiple && !this.range && Array.isArray(this._value)) {
         this._value = [this._value[0] ?? '']
       }
@@ -267,30 +256,22 @@ export class PktDatepicker extends PktInputElement {
           this.showCalendar()
         }}
         ?disabled=${this.disabled}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',') {
-            this.inputRef.value?.blur()
-          }
-          if (e.key === 'Space' || e.key === ' ') {
-            e.preventDefault()
-            this.toggleCalendar(e)
-          }
-          if (e.key === 'Enter') {
-            const form = this.internals.form as HTMLFormElement
-            if (form) {
-              form.requestSubmit()
-            } else {
-              this.inputRef.value?.blur()
-            }
-          }
-        }}
+        @keydown=${(e: KeyboardEvent) =>
+          keyboardUtils.handleInputKeydown(
+            // event, toggleCalendar, submitForm, focusNext, blur, comma
+            e,
+            (event) => this.toggleCalendar(event),
+            () => formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
+            undefined,
+            () => this.inputRef.value?.blur(),
+          )}
         @input=${(e: Event) => {
           this.onInput()
           e.stopImmediatePropagation()
         }}
         @focus=${() => {
           this.onFocus()
-          if (this.isMobileSafari) {
+          if (deviceDetection.isMobileSafari()) {
             this.showCalendar()
           }
         }}
@@ -311,10 +292,7 @@ export class PktDatepicker extends PktInputElement {
   }
 
   renderRangeInput() {
-    const rangeLabelClasses = {
-      'pkt-input-prefix': this.showRangeLabels,
-      'pkt-hide': !this.showRangeLabels,
-    }
+    const rangeLabelClasses = cssUtils.getRangeLabelClasses(this.showRangeLabels)
     return html`
       ${this.showRangeLabels
         ? html` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `
@@ -333,46 +311,34 @@ export class PktDatepicker extends PktInputElement {
           e.preventDefault()
           this.showCalendar()
         }}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',') {
-            this.inputRef.value?.blur()
-          }
-          if (e.key === 'Space' || e.key === ' ') {
-            e.preventDefault()
-            this.toggleCalendar(e)
-          }
-          if (e.key === 'Enter') {
-            const form = this.internals.form as HTMLFormElement
-            if (form) {
-              form.requestSubmit()
-            } else {
-              this.inputRefTo.value?.focus()
-            }
-          }
-        }}
+        @keydown=${(e: KeyboardEvent) =>
+          keyboardUtils.handleInputKeydown(
+            // event, toggleCalendar, submitForm, focusNext, blur, comma
+            e,
+            (event) => this.toggleCalendar(event),
+            () =>
+              formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.focus()),
+            () => this.inputRefTo.value?.focus(),
+            () => this.inputRef.value?.blur(),
+          )}
         @input=${(e: Event) => {
           this.onInput()
           e.stopImmediatePropagation()
         }}
         @focus=${() => {
           this.onFocus()
-          if (this.isMobileSafari) {
+          if (deviceDetection.isMobileSafari()) {
             this.showCalendar()
           }
         }}
         @blur=${(e: Event) => {
-          if ((e.target as HTMLInputElement).value) {
-            this.manageValidity(e.target as HTMLInputElement)
-            const date = fromISOToDate((e.target as HTMLInputElement).value)
-            if (date) {
-              if (this._value[0] !== (e.target as HTMLInputElement).value && this._value[1]) {
-                this.clearInputValue()
-                this.calRef?.value?.handleDateSelect(date)
-              }
-            }
-          } else if (this._value[0]) {
-            this.clearInputValue()
-          }
+          dateProcessingUtils.processRangeBlur(
+            e,
+            this._value,
+            this.calRef,
+            () => this.clearInputValue(),
+            (input) => this.manageValidity(input),
+          )
         }}
         @change=${(e: Event) => {
           e.stopImmediatePropagation()
@@ -398,30 +364,23 @@ export class PktDatepicker extends PktInputElement {
           e.preventDefault()
           this.showCalendar()
         }}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',') {
-            this.inputRefTo.value?.blur()
-          }
-          if (e.key === 'Space' || e.key === ' ') {
-            e.preventDefault()
-            this.toggleCalendar(e)
-          }
-          if (e.key === 'Enter') {
-            const form = this.internals.form as HTMLFormElement
-            if (form) {
-              form.requestSubmit()
-            } else {
-              this.inputRefTo.value?.blur()
-            }
-          }
-        }}
+        @keydown=${(e: KeyboardEvent) =>
+          keyboardUtils.handleInputKeydown(
+            // event, toggleCalendar, submitForm, focusNext, blur, comma
+            e,
+            (event) => this.toggleCalendar(event),
+            () =>
+              formUtils.submitFormOrFallback(this.internals, () => this.inputRefTo.value?.blur()),
+            undefined,
+            () => this.inputRefTo.value?.blur(),
+          )}
         @input=${(e: Event) => {
           this.onInput()
           e.stopImmediatePropagation()
         }}
         @focus=${() => {
           this.onFocus()
-          if (this.isMobileSafari) {
+          if (deviceDetection.isMobileSafari()) {
             this.showCalendar()
           }
         }}
@@ -431,20 +390,13 @@ export class PktDatepicker extends PktInputElement {
           }
           if ((e.target as HTMLInputElement).value) {
             this.manageValidity(e.target as HTMLInputElement)
-            const val = (e.target as HTMLInputElement).value
-            if (this.min && this.min > val) {
-              this.internals.setValidity(
-                { rangeUnderflow: true },
-                this.strings.forms.messages.rangeUnderflow,
-                e.target as HTMLInputElement,
-              )
-            } else if (this.max && this.max < val) {
-              this.internals.setValidity(
-                { rangeOverflow: true },
-                this.strings.forms.messages.rangeOverflow,
-                e.target as HTMLInputElement,
-              )
-            }
+            formUtils.validateDateInput(
+              e.target as HTMLInputElement,
+              this.internals,
+              this.min,
+              this.max,
+              this.strings,
+            )
             const date = fromISOToDate((e.target as HTMLInputElement).value)
             if (date) {
               if (this._value[1] !== formatISODate(date)) {
@@ -489,28 +441,20 @@ export class PktDatepicker extends PktInputElement {
         }}
         @focus=${() => {
           this.onFocus()
-          if (this.isMobileSafari) {
+          if (deviceDetection.isMobileSafari()) {
             this.showCalendar()
           }
         }}
-        @keydown=${(e: KeyboardEvent) => {
-          if (e.key === ',') {
-            e.preventDefault()
-            this.addToSelected(e)
-          }
-          if (e.key === 'Space' || e.key === ' ') {
-            e.preventDefault()
-            this.toggleCalendar(e)
-          }
-          if (e.key === 'Enter') {
-            const form = this.internals.form as HTMLFormElement
-            if (form) {
-              form.requestSubmit()
-            } else {
-              this.inputRef.value?.blur()
-            }
-          }
-        }}
+        @keydown=${(e: KeyboardEvent) =>
+          keyboardUtils.handleInputKeydown(
+            // event, toggleCalendar, submitForm, focusNext, blur, comma
+            e,
+            (event) => this.toggleCalendar(event),
+            () => formUtils.submitFormOrFallback(this.internals, () => this.inputRef.value?.blur()),
+            undefined,
+            undefined,
+            (event) => this.addToSelected(event),
+          )}
         @change=${(e: Event) => {
           this.touched = true
           e.stopImmediatePropagation()
@@ -545,26 +489,16 @@ export class PktDatepicker extends PktInputElement {
         .excludeweekdays=${this.excludeweekdays}
         .currentmonth=${this.currentmonth ? parseISODateString(this.currentmonth) : null}
         @date-selected=${(e: CustomEvent) => {
-          this.value =
-            !this.multiple && !this.range
-              ? e.detail[0]
-              : Array.isArray(e.detail)
-                ? e.detail.join(',')
-                : e.detail
+          this.value = dateProcessingUtils.processDateSelection(e.detail, this.multiple, this.range)
           this._value = e.detail
-          if (this.inputRef.value) {
-            if (this.range && this.inputRefTo.value) {
-              this.inputRef.value.value = this._value[0] ?? ''
-              this.inputRefTo.value.value = this._value[1] ?? ''
-              // Update validity state after programmatic value change
-              this.manageValidity(this.inputRef.value)
-              this.manageValidity(this.inputRefTo.value)
-            } else if (!this.multiple) {
-              this.inputRef.value.value = this._value.length ? this._value[0] : ''
-              // Update validity state after programmatic value change
-              this.manageValidity(this.inputRef.value)
-            }
-          }
+          dateProcessingUtils.updateInputValues(
+            this.inputRef,
+            this.inputRefTo,
+            this._value,
+            this.range,
+            this.multiple,
+            (input) => this.manageValidity(input),
+          )
         }}
         @close=${() => {
           this.onBlur()
@@ -576,22 +510,13 @@ export class PktDatepicker extends PktInputElement {
   }
 
   render() {
-    this.inputClasses = {
-      'pkt-input': true,
-      'pkt-datepicker__input': true,
-      'pkt-input--fullwidth': this.fullwidth,
-      'pkt-datepicker--hasrangelabels': this.showRangeLabels,
-      'pkt-datepicker--multiple': this.multiple,
-      'pkt-datepicker--range': this.range,
-    }
-
-    this.buttonClasses = {
-      'pkt-input-icon': true,
-      'pkt-btn': true,
-      'pkt-btn--icon-only': true,
-      'pkt-btn--tertiary': true,
-      'pkt-datepicker__calendar-button': true,
-    }
+    this.inputClasses = cssUtils.getInputClasses(
+      this.fullwidth,
+      this.showRangeLabels,
+      this.multiple,
+      this.range,
+    )
+    this.buttonClasses = cssUtils.getButtonClasses()
 
     return html`
       <pkt-input-wrapper
@@ -645,12 +570,8 @@ export class PktDatepicker extends PktInputElement {
               class="${classMap(this.buttonClasses)}"
               type="button"
               @click=${this.toggleCalendar}
-              @keydown=${(e: KeyboardEvent) => {
-                if (e.key === 'Enter' || e.key === ' ' || e.key === 'Space') {
-                  e.preventDefault()
-                  this.toggleCalendar(e)
-                }
-              }}
+              @keydown=${(e: KeyboardEvent) =>
+                keyboardUtils.handleButtonKeydown(e, (event) => this.toggleCalendar(event))}
               ?disabled=${this.disabled}
               ${ref(this.btnRef)}
             >
@@ -669,58 +590,23 @@ export class PktDatepicker extends PktInputElement {
    */
 
   handleCalendarPosition() {
-    if (this.popupRef.value && this.inputRef.value) {
-      const counter = this.multiple && !!this.maxlength
-
-      const inputRect =
-        this.inputRef.value.parentElement?.getBoundingClientRect() ||
-        this.inputRef.value.getBoundingClientRect()
-
-      const inputHeight = counter ? inputRect.height + 30 : inputRect.height
-      const popupHeight = this.popupRef.value.getBoundingClientRect().height
-
-      let top = counter ? 'calc(100% - 30px)' : '100%'
-      if (
-        inputRect &&
-        inputRect.top + popupHeight > window.innerHeight &&
-        inputRect.top - popupHeight > 0
-      ) {
-        top = `calc(100% - ${inputHeight}px - ${popupHeight}px)`
-      }
-      this.popupRef.value.style.top = top
-    }
+    const hasCounter = this.multiple && !!this.maxlength
+    calendarUtils.handleCalendarPosition(this.popupRef, this.inputRef, hasCounter)
   }
 
   addToSelected = (e: Event | KeyboardEvent) => {
-    const target = e.target as HTMLInputElement
-    if (!target.value) return
-    const minAsDate = this.min ? newDate(this.min as string) : null
-    const maxAsDate = this.max ? newDate(this.max as string) : null
-    const date = newDate(target.value.split(',')[0])
-    if (
-      date &&
-      !isNaN(date.getTime()) &&
-      (!minAsDate || date >= minAsDate) &&
-      (!maxAsDate || date <= maxAsDate) &&
-      this.calRef.value
-    ) {
-      this.calRef.value.handleDateSelect(date)
-    }
-    target.value = ''
+    calendarUtils.addToSelected(e, this.calRef, this.min, this.max)
   }
 
   private handleFocusOut(e: FocusEvent) {
-    if (!this.contains(e.target as Node)) {
-      this.onBlur()
-      this.hideCalendar()
-    }
+    eventUtils.handleFocusOut(e, this, this.onBlur.bind(this), this.hideCalendar.bind(this))
   }
 
   public async showCalendar() {
     this.calendarOpen = true
     await sleep(20)
     this.handleCalendarPosition()
-    if (this.isMobileSafari) {
+    if (deviceDetection.isMobileSafari()) {
       this.calRef.value?.focusOnCurrentDate()
     }
   }