@oslokommune/punkt-elements 20.1.2 → 20.1.3

package/src/components/datepicker/datepicker.ts

@@ -1,11 +1,10 @@
 import { customElement, property, state } from 'lit/decorators.js'
-import { formatISODate, fromISOToDate, parseISODateString } from 'shared-utils/date-utils'
+import { fromISOToDate, parseISODateString } from 'shared-utils/date-utils'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktCalendar } from '@/components/calendar/calendar'
 import { PktInputElement } from '@/base-elements/input-element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import converters from '@/helpers/converters'
-import specs from 'componentSpecs/datepicker.json'
 import '@/components/calendar'
 import '@/components/icon'
 import '@/components/input-wrapper'
@@ -18,20 +17,25 @@ import { forwardSlots } from '@/directives/slot-content'
 import {
   valueUtils,
   inputTypeUtils,
-  calendarUtils,
   cssUtils,
   dateProcessingUtils,
-  formUtils,
 } from './datepicker-utils'
 import { valueToArray, arrayToCsv } from 'shared-utils/value-utils'
-import { sleep } from 'shared-utils/utils'
 import { isIOS } from 'shared-utils/device-utils'
+import { createFocusWithinTracker } from 'shared-utils/forms/focus-within'
+import {
+  completeRangeWithTo,
+  datepickerHasCounter,
+  rangeCalendarSelection,
+  handleCalendarPosition as positionCalendarPopup,
+} from 'shared-utils/datepicker-utils'
 import { PktDatepickerPopup } from './datepicker-popup'
 import { PktDatepickerSingle } from './datepicker-single'
 import { PktDatepickerRange } from './datepicker-range'
 import { PktDatepickerMultiple } from './datepicker-multiple'
 import { ElementProps } from '@/types/typeUtils'
 import type { IPktStringsProps } from 'shared-strings'
+import { DATEPICKER_DEFAULTS, type Booleanish, type IPktDatepickerBase } from 'shared-types'
 
 type Props = ElementProps<
   PktDatepicker,
@@ -53,7 +57,30 @@ type Props = ElementProps<
 > &
   IPktStringsProps<'generic' | 'datepicker' | 'dates' | 'calendar'>
 
-export class PktDatepicker extends PktInputElement<Props> {
+export interface IPktDatepicker extends Omit<
+  IPktDatepickerBase,
+  | 'form'
+  | 'min'
+  | 'max'
+  | 'maxlength'
+  | 'currentmonth'
+  | 'today'
+  | 'ariaDescribedby'
+  | 'helptextDropdownButton'
+  | 'useWrapper'
+> {
+  min?: string | null
+  max?: string | null
+  maxlength?: number | null
+  currentmonth?: string | null
+  today?: string | null
+  ariaDescribedby?: string | null
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
+  helptextDropdownButton?: string | null
+  useWrapper?: Booleanish
+}
+
+export class PktDatepicker extends PktInputElement<Props> implements IPktDatepicker {
   /**
    * Element attributes and properties
    */
@@ -79,19 +106,19 @@ export class PktDatepicker extends PktInputElement<Props> {
   label: string = 'Datovelger'
 
   @property({ type: String })
-  dateformat: string = specs.props.dateformat.default
+  dateformat: string = DATEPICKER_DEFAULTS.dateformat
 
   @property({ type: Boolean, reflect: true })
-  multiple: boolean = specs.props.multiple.default
+  multiple: boolean = DATEPICKER_DEFAULTS.multiple
 
   @property({ type: Number, reflect: true })
   maxlength: number | null = null
 
   @property({ type: Boolean, reflect: true })
-  range: boolean = specs.props.range.default
+  range: boolean = DATEPICKER_DEFAULTS.range
 
   @property({ type: Boolean, attribute: 'show-range-labels' })
-  showRangeLabels: boolean = false
+  showRangeLabels: boolean = DATEPICKER_DEFAULTS.showRangeLabels
 
   @property({ type: String, reflect: true })
   min: string | null = null
@@ -100,10 +127,10 @@ export class PktDatepicker extends PktInputElement<Props> {
   max: string | null = null
 
   @property({ type: Boolean })
-  weeknumbers: boolean = specs.props.weeknumbers.default
+  weeknumbers: boolean = DATEPICKER_DEFAULTS.weeknumbers
 
   @property({ type: Boolean, reflect: true })
-  withcontrols: boolean = specs.props.withcontrols.default
+  withcontrols: boolean = DATEPICKER_DEFAULTS.withcontrols
 
   @property({ converter: converters.csvToArray })
   excludedates: string[] = []
@@ -118,13 +145,17 @@ export class PktDatepicker extends PktInputElement<Props> {
   today: string | null = null
 
   @property({ type: Boolean, reflect: true, attribute: 'calendar-open' })
-  calendarOpen: boolean = false
+  calendarOpen: boolean = DATEPICKER_DEFAULTS.calendarOpen
 
   @property({ type: String })
   timezone: string = 'Europe/Oslo'
 
   @state() inputClasses = {}
 
+  @state() private toWithoutFrom: string | null = null
+
+  @state() private editedRangeFields: [string, string] | null = null
+
   /**
    * Computed properties
    */
@@ -132,6 +163,10 @@ export class PktDatepicker extends PktInputElement<Props> {
     return inputTypeUtils.getInputType()
   }
 
+  get hasCounter(): boolean {
+    return datepickerHasCounter(this.counter, this.multiple, this.maxlength)
+  }
+
   /**
    * Housekeeping / lifecycle methods
    */
@@ -141,10 +176,87 @@ export class PktDatepicker extends PktInputElement<Props> {
     if (this.timezone && this.timezone !== window.pktTz) {
       window.pktTz = this.timezone
     }
+    this.addEventListener('focusin', this.handleFocusIn)
+    this.addEventListener('focusout', this.handleFocusOut)
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
+    this.removeEventListener('focusin', this.handleFocusIn)
+    this.removeEventListener('focusout', this.handleFocusOut)
+    this.focusTracker.reset()
+  }
+
+  private focusTracker = createFocusWithinTracker(
+    (node) => this.contains(node),
+    (type, relatedTarget) => {
+      if (type === 'blur') this.dropToWithoutFrom()
+      this.dispatchEvent(new FocusEvent(type, { bubbles: true, composed: true, relatedTarget }))
+    },
+  )
+
+  private get rangeFieldValues(): string[] {
+    return this._value[0] ? this._value : ['', this.toWithoutFrom ?? '']
+  }
+
+  private lastCalendarSelected: string[] = []
+
+  private get calendarSelected(): string[] {
+    if (!this.range) return this._value
+    const [from, to] = this.editedRangeFields ?? this._value
+    const next = rangeCalendarSelection(from, to)
+    if (arrayToCsv(next) !== arrayToCsv(this.lastCalendarSelected)) this.lastCalendarSelected = next
+    return this.lastCalendarSelected
+  }
+
+  private trackRangeFields() {
+    this.editedRangeFields = [
+      this.currentInputElement?.value ?? '',
+      this.currentInputElementTo?.value ?? '',
+    ]
+  }
+
+  private syncRangeFromFields(e: FocusEvent) {
+    const fromInput = this.currentInputElement
+    const toInput = this.currentInputElementTo
+    if (!fromInput || !toInput) return
+    const from = fromInput.value
+    if (from && toInput.value && from > toInput.value) toInput.value = ''
+    const to = toInput.value
+    this.toWithoutFrom = from ? null : to || null
+    this.editedRangeFields = null
+    if (e.target instanceof HTMLInputElement && e.target.value) this.manageValidity(e.target)
+    this.value = from ? [from, to].filter(Boolean).join(',') : ''
+  }
+
+  private dropToWithoutFrom() {
+    const toInput = this.currentInputElementTo
+    if (this.range && toInput && !this.currentInputElement?.value) toInput.value = ''
+    this.toWithoutFrom = null
+    this.editedRangeFields = null
+  }
+
+  protected formResetCallback(): void {
+    this.toWithoutFrom = null
+    this.editedRangeFields = null
+    super.formResetCallback()
+  }
+
+  protected setFormValue(value: string | string[]): void {
+    super.setFormValue(this.multiple || this.range ? valueToArray(value) : value)
+  }
+
+  private handleFocusIn = (e: FocusEvent) => this.focusTracker.focusin(e.relatedTarget)
+
+  private handleFocusOut = (e: FocusEvent) => this.focusTracker.focusout(e.relatedTarget)
+
+  private focusField() {
+    this.currentInputElement?.focus()
+  }
+
+  private get focusIsInPopup(): boolean {
+    const popup = this.datepickerPopupRef.value?.popupRef.value
+    return !!popup && popup.contains(document.activeElement)
   }
 
   onInput(): void {
@@ -184,7 +296,14 @@ export class PktDatepicker extends PktInputElement<Props> {
     this._valueProperty = arrayToCsv(filteredValue)
 
     // Én dato er ingen fullført periode. Tom er en fullført endring.
-    if (!(this.range && filteredValue.length === 1)) {
+    if (this.range && filteredValue.length === 1) {
+      this.setFormValue(this._valueProperty)
+      if (this.hasUpdated && this._valueProperty !== oldValue) {
+        this.dispatchEvent(
+          new CustomEvent('value-change', { detail: filteredValue, bubbles: true, composed: true }),
+        )
+      }
+    } else {
       super.valueChanged(this._valueProperty, oldValue)
     }
 
@@ -213,6 +332,8 @@ export class PktDatepicker extends PktInputElement<Props> {
     'excludeweekdays',
   ]
 
+  private static readonly POSITIONED_BY = ['calendarOpen', 'counter', 'multiple', 'maxlength']
+
   protected willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties)
 
@@ -230,6 +351,12 @@ export class PktDatepicker extends PktInputElement<Props> {
     this.classList.toggle('pkt-datepicker--small', this.inputSize === 'small')
     this.classList.toggle('pkt-datepicker--xsmall', this.inputSize === 'xsmall')
     super.updated(changedProperties)
+    if (
+      this.calendarOpen &&
+      PktDatepicker.POSITIONED_BY.some((prop) => changedProperties.has(prop))
+    ) {
+      this.positionOpenCalendar()
+    }
   }
 
   /**
@@ -247,7 +374,6 @@ export class PktDatepicker extends PktInputElement<Props> {
     return { value: element } as Ref<HTMLInputElement>
   }
 
-  calRef: Ref<PktCalendar> = createRef()
   popupRef: Ref<HTMLDivElement> = createRef()
 
   // Child component refs
@@ -311,12 +437,6 @@ export class PktDatepicker extends PktInputElement<Props> {
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
-        @input-focus=${() => this.onFocus()}
-        @input-blur=${(e: CustomEvent) => {
-          if (!this.calRef.value?.contains(e.detail.relatedTarget as Node)) {
-            this.onBlur()
-          }
-        }}
         @manage-validity=${(e: CustomEvent) => this.manageValidity(e.detail)}
         @value-change=${(e: CustomEvent) => {
           this.value = e.detail
@@ -332,7 +452,7 @@ export class PktDatepicker extends PktInputElement<Props> {
   renderRangeInput() {
     return html`
       <pkt-datepicker-range
-        .value=${this._value}
+        .value=${this.rangeFieldValues}
         .inputType=${this.inputType}
         .id=${this.id}
         .label=${this.label}
@@ -349,67 +469,12 @@ export class PktDatepicker extends PktInputElement<Props> {
         .hasHelptext=${Boolean(this.helptext || this.helptextDropdown || this.hasSlotContent('helptext'))}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
-        @input-change=${() => this.onInput()}
-        @input-focus=${() => this.onFocus()}
-        @input-blur=${(e: CustomEvent) => {
-          if (!this.calRef.value?.contains(e.detail.relatedTarget as Node)) {
-            this.onBlur()
-          }
-        }}
-        @range-blur=${(e: CustomEvent) => {
-          const inputFrom = this.currentInputElement
-          const inputTo = this.currentInputElementTo
-
-          // Update _value with current input values to sync with calendar
-          if (inputFrom && inputTo) {
-            const fromValue = inputFrom.value
-            const toValue = inputTo.value
-
-            // If from date is after to date, clear the to date
-            if (fromValue && toValue && fromValue > toValue) {
-              inputTo.value = ''
-              this._value = [fromValue]
-              this.value = fromValue
-            } else {
-              const newValues = [fromValue, toValue].filter(Boolean)
-              if (
-                newValues.length > 0 &&
-                (newValues[0] !== this._value[0] || newValues[1] !== this._value[1])
-              ) {
-                this._value = newValues
-                this.value = newValues.join(',')
-              }
-            }
-          }
-
-          dateProcessingUtils.processRangeBlur(
-            e.detail.event,
-            e.detail.values,
-            this.calRef,
-            () => this.clearInputValue(),
-            (input) => this.manageValidity(input),
-          )
+        @input-change=${() => {
+          this.trackRangeFields()
+          this.onInput()
         }}
+        @range-blur=${(e: CustomEvent) => this.syncRangeFromFields(e.detail.event)}
         @manage-validity=${(e: CustomEvent) => this.manageValidity(e.detail)}
-        @validate-date-input=${(e: CustomEvent) => {
-          formUtils.validateDateInput(
-            e.detail,
-            this.internals,
-            this.min,
-            this.max,
-            this.pktStrings.get('validation'),
-          )
-        }}
-        @handle-date-select=${(e: CustomEvent) => {
-          const date = fromISOToDate(e.detail)
-          if (date) {
-            const formattedDate = formatISODate(date)
-            // Only update calendar if the date is different from current values
-            if (this._value[0] !== formattedDate && this._value[1] !== formattedDate) {
-              this.calRef?.value?.handleDateSelect(date)
-            }
-          }
-        }}
         @input-changed=${() => {
           this.touched = true
         }}
@@ -438,12 +503,6 @@ export class PktDatepicker extends PktInputElement<Props> {
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
-        @input-focus=${() => this.onFocus()}
-        @input-blur=${(e: CustomEvent) => {
-          if (!this.calRef.value?.contains(e.detail.relatedTarget as Node)) {
-            this.onBlur()
-          }
-        }}
         @add-to-selected=${(e: CustomEvent) => this.addToSelected(e.detail)}
         @input-changed=${() => {
           this.touched = true
@@ -463,7 +522,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         ?weeknumbers=${this.weeknumbers}
         ?withcontrols=${this.withcontrols}
         .maxMultiple=${this.maxlength}
-        .selected=${this._value}
+        .selected=${this.calendarSelected}
         .earliest=${this.min}
         .latest=${this.max}
         .excludedates=${Array.isArray(this.excludedates)
@@ -473,8 +532,18 @@ export class PktDatepicker extends PktInputElement<Props> {
         .currentmonth=${this.currentmonth ? parseISODateString(this.currentmonth) : null}
         .today=${this.today}
         @date-selected=${(e: CustomEvent) => {
-          this.value = dateProcessingUtils.processDateSelection(e.detail, this.multiple, this.range)
-          this._value = e.detail
+          const selected: string[] = this.range
+            ? completeRangeWithTo(
+                e.detail,
+                this._value[0] ? null : this.toWithoutFrom,
+                valueToArray(this.excludedates),
+                this.excludeweekdays,
+              )
+            : e.detail
+          this.toWithoutFrom = null
+          this.editedRangeFields = null
+          this.value = dateProcessingUtils.processDateSelection(selected, this.multiple, this.range)
+          this._value = selected
           dateProcessingUtils.updateInputValues(
             this.inputRef,
             this.inputRefTo,
@@ -483,9 +552,11 @@ export class PktDatepicker extends PktInputElement<Props> {
             this.multiple,
             (input) => this.manageValidity(input),
           )
+          if (!this.multiple && (!this.range || this._value.length === 2)) this.focusField()
+          if (selected !== e.detail) this.hideCalendar()
         }}
         @close=${() => {
-          this.onBlur()
+          if (this.focusIsInPopup) this.focusField()
           this.hideCalendar()
         }}
         ${ref(this.datepickerPopupRef)}
@@ -510,7 +581,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
-        ?counter=${this.multiple && !!this.maxlength}
+        ?counter=${this.hasCounter}
         .counterCurrent=${this.value ? this._value.length : 0}
         .counterMaxLength=${this.maxlength}
         ?disabled=${this.isDisabled}
@@ -538,13 +609,8 @@ export class PktDatepicker extends PktInputElement<Props> {
               strings=${this.strings}
               id-base=${this.id}
               @date-tag-removed=${(e: CustomEvent) => {
-                const popup = this.datepickerPopupRef.value
                 const date = fromISOToDate(e.detail)
-                if (popup && date && typeof popup.handleDateSelect === 'function') {
-                  popup.handleDateSelect(date)
-                } else {
-                  this.calRef.value?.handleDateSelect(date)
-                }
+                if (date) this.datepickerPopupRef.value?.handleDateSelect(date)
               }}
             ></pkt-date-tags>`
           : nothing}
@@ -565,31 +631,29 @@ export class PktDatepicker extends PktInputElement<Props> {
    */
 
   handleCalendarPosition() {
-    const hasCounter = this.multiple && !!this.maxlength
-    calendarUtils.handleCalendarPosition(this.popupRef, this.inputRef, hasCounter)
+    positionCalendarPopup(
+      this.datepickerPopupRef.value?.popupRef.value ?? null,
+      this.currentInputElement ?? null,
+      this.hasCounter,
+    )
   }
 
-  addToSelected = (e: Event | KeyboardEvent) => {
+  private async positionOpenCalendar() {
     const popup = this.datepickerPopupRef.value
-    if (popup && typeof popup.addToSelected === 'function') {
-      return popup.addToSelected(e, this.min, this.max)
-    }
-    return calendarUtils.addToSelected(e, this.calRef, this.min, this.max)
+    await popup?.updateComplete
+    await (popup?.calendarRef.value as PktCalendar | undefined)?.updateComplete
+    if (this.calendarOpen) this.handleCalendarPosition()
   }
 
+  addToSelected = (e: Event | KeyboardEvent) =>
+    this.datepickerPopupRef.value?.addToSelected(e, this.min, this.max)
+
   public async showCalendar() {
     const popup = this.datepickerPopupRef.value
     this.calendarOpen = true
-    if (popup && typeof popup.show === 'function') {
-      popup.show()
-      if (isIOS()) popup.focusOnCurrentDate()
-      return
-    }
-    await sleep(20)
-    this.handleCalendarPosition()
-    if (isIOS()) {
-      this.calRef.value?.focusOnCurrentDate()
-    }
+    if (!popup) return
+    popup.show()
+    if (isIOS()) popup.focusOnCurrentDate()
   }
 
   public hideCalendar() {

package/src/components/datepicker/index.ts

@@ -4,4 +4,5 @@ import { PktDatepickerRange } from './datepicker-range'
 import { PktDatepickerMultiple } from './datepicker-multiple'
 
 export { PktDatepicker, PktDatepickerSingle, PktDatepickerRange, PktDatepickerMultiple }
+export type { IPktDatepicker } from './datepicker'
 export default PktDatepicker