@oslokommune/punkt-elements 13.4.2 → 13.5.1

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

@@ -0,0 +1,286 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+
+import './datepicker'
+import '../calendar/calendar'
+import { PktDatepicker } from './datepicker'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-datepicker')
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create datepicker markup
+const createDatepicker = async (datepickerProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-datepicker ${datepickerProps}></pkt-datepicker>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDatepicker', () => {
+  describe('Multiple date selection', () => {
+    test('displays multiple selected dates as tags', async () => {
+      const multipleDates = '2024-06-15,2024-06-20,2024-06-25'
+      const container = await createDatepicker(`value="${multipleDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBe(3)
+    })
+
+    test('allows adding dates through calendar in multiple mode', async () => {
+      const container = await createDatepicker('multiple')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      // Select a date
+      const availableDate = datepicker.querySelector('[data-date]:not([data-disabled="disabled"])')
+      if (availableDate) {
+        fireEvent.click(availableDate)
+        await datepicker.updateComplete
+
+        // Should add tag
+        const tags = datepicker.querySelectorAll('pkt-tag')
+        expect(tags.length).toBe(1)
+      }
+    })
+
+    test('removes dates when clicking tag close button', async () => {
+      const multipleDates = '2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${multipleDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const closeButtons = datepicker.querySelectorAll('pkt-tag .pkt-tag__close-btn')
+      expect(closeButtons.length).toBe(2)
+
+      // Click first close button
+      fireEvent.click(closeButtons[0])
+      await datepicker.updateComplete
+
+      const remainingTags = datepicker.querySelectorAll('pkt-tag')
+      expect(remainingTags.length).toBe(1)
+    })
+
+    test('respects maxlength in multiple mode', async () => {
+      const container = await createDatepicker('multiple maxlength="2"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar and try to select more than maxlength dates
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const availableDates = datepicker.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Select 3 dates
+      fireEvent.click(availableDates[0])
+      await datepicker.updateComplete
+      fireEvent.click(availableDates[1])
+      await datepicker.updateComplete
+      fireEvent.click(availableDates[2])
+      await datepicker.updateComplete
+
+      // Should only have maxlength tags
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBeLessThanOrEqual(2)
+    })
+
+    test('sorts multiple dates chronologically', async () => {
+      const unsortedDates = '2024-06-25,2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${unsortedDates}" 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.textContent?.trim())
+
+      // Should be sorted chronologically
+      expect(tagTexts[0]).toContain('15')
+      expect(tagTexts[1]).toContain('20')
+      expect(tagTexts[2]).toContain('25')
+    })
+  })
+
+  describe('Range selection', () => {
+    test('displays range labels when showRangeLabels is true', async () => {
+      const rangeValue = '2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${rangeValue}" range showRangeLabels`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.showRangeLabels).toBe(true)
+
+      const rangeLabels = datepicker.querySelectorAll('.pkt-input-prefix')
+      expect(rangeLabels.length).toBeGreaterThan(0)
+    })
+
+    test('populates both input fields when initialized with range value', async () => {
+      const rangeValue = '2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${rangeValue}" range`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const inputs = datepicker.querySelectorAll('input')
+      expect(inputs.length).toBe(2)
+
+      // Check that both input fields are populated
+      expect(inputs[0].value).toBe('2024-06-15')
+      expect(inputs[1].value).toBe('2024-06-20')
+
+      // Check internal state
+      expect(datepicker._value).toEqual(['2024-06-15', '2024-06-20'])
+      expect(datepicker.value).toBe('2024-06-15,2024-06-20')
+    })
+
+    test('dispatches value-change event with array for range and multiple datepickers', async () => {
+      // Test range datepicker
+      const rangeContainer = await createDatepicker('range')
+      const rangeDatepicker = rangeContainer.querySelector('pkt-datepicker') as PktDatepicker
+      await rangeDatepicker.updateComplete
+
+      let valueChangeEvent: CustomEvent | null = null
+      rangeDatepicker.addEventListener('value-change', (e: Event) => {
+        valueChangeEvent = e as CustomEvent
+      })
+
+      // Set a range value programmatically
+      rangeDatepicker.value = '2024-06-15,2024-06-20'
+      await rangeDatepicker.updateComplete
+
+      expect(valueChangeEvent).toBeTruthy()
+      expect(valueChangeEvent!.detail).toEqual(['2024-06-15', '2024-06-20'])
+
+      // Test multiple datepicker
+      const multipleContainer = await createDatepicker('multiple')
+      const multipleDatepicker = multipleContainer.querySelector('pkt-datepicker') as PktDatepicker
+      await multipleDatepicker.updateComplete
+
+      valueChangeEvent = null
+      multipleDatepicker.addEventListener('value-change', (e: Event) => {
+        valueChangeEvent = e as CustomEvent
+      })
+
+      // Set multiple values programmatically
+      multipleDatepicker.value = '2024-06-15,2024-06-20,2024-06-25'
+      await multipleDatepicker.updateComplete
+
+      expect(valueChangeEvent).toBeTruthy()
+      expect(valueChangeEvent!.detail).toEqual(['2024-06-15', '2024-06-20', '2024-06-25'])
+
+      // Test single datepicker
+      const singleContainer = await createDatepicker('')
+      const singleDatepicker = singleContainer.querySelector('pkt-datepicker') as PktDatepicker
+      await singleDatepicker.updateComplete
+
+      valueChangeEvent = null
+      singleDatepicker.addEventListener('value-change', (e: Event) => {
+        valueChangeEvent = e as CustomEvent
+      })
+
+      // Set single value programmatically
+      singleDatepicker.value = '2024-06-15'
+      await singleDatepicker.updateComplete
+
+      expect(valueChangeEvent).toBeTruthy()
+      expect(valueChangeEvent!.detail).toBe('2024-06-15')
+    })
+
+    test('handles range selection through calendar', async () => {
+      const container = await createDatepicker('range')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const availableDates = datepicker.querySelectorAll(
+        '[data-date]:not([data-disabled="disabled"])',
+      )
+
+      // Select start date
+      if (availableDates.length > 5) {
+        fireEvent.click(availableDates[5])
+        await datepicker.updateComplete
+
+        // Select end date
+        if (availableDates.length > 10) {
+          fireEvent.click(availableDates[10])
+          await datepicker.updateComplete
+
+          // Should have range value
+          expect(datepicker.value).toContain(',')
+          const values = (datepicker.value as string).split(',')
+          expect(values.length).toBe(2)
+        }
+      }
+    })
+
+    test('validates range order', async () => {
+      const invalidRange = '2024-06-20,2024-06-15' // End before start
+      const container = await createDatepicker(`value="${invalidRange}" range`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should handle invalid range gracefully
+      expect(datepicker).toBeInTheDocument()
+    })
+
+    test('shows range preview on hover', async () => {
+      const container = await createDatepicker('range')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const availableDates = datepicker.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Select start date
+      fireEvent.click(availableDates[5])
+      await datepicker.updateComplete
+
+      // Hover over potential end date
+      fireEvent.mouseOver(availableDates[10])
+      await datepicker.updateComplete
+
+      // Should show hover preview
+      const hoverRanges = datepicker.querySelectorAll('.pkt-calendar__date--in-range-hover')
+      expect(hoverRanges.length).toBeGreaterThan(0)
+    })
+  })
+})

package/src/components/datepicker/datepicker.ts

@@ -1,7 +1,13 @@
 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, fromISOtoLocal, newDate } from '@/utils/dateutils'
+import {
+  formatISODate,
+  fromISOToDate,
+  fromISOtoLocal,
+  newDate,
+  parseISODateString,
+} from '@/utils/dateutils'
 import { html, nothing, PropertyValues } from 'lit'
 import { PktCalendar } from '@/components/calendar/calendar'
 import { PktInputElement } from '@/base-elements/input-element'
@@ -21,15 +27,22 @@ export class PktDatepicker extends PktInputElement {
   /**
    * Element attributes and properties
    */
+  private _valueProperty: string = ''
+
   @property({ type: String, reflect: true })
-  value: string | string[] = ''
+  get value(): string {
+    return this._valueProperty
+  }
+
+  set value(newValue: string | string[]) {
+    const oldValue = this._valueProperty
+    this._valueProperty = Array.isArray(newValue) ? newValue.join(',') : newValue || ''
+    this.valueChanged(this._valueProperty, oldValue)
+    this.requestUpdate('value', oldValue)
+  }
 
   @property({ type: Array })
-  _value: string[] = this.value
-    ? !Array.isArray(this.value)
-      ? this.value.split(',')
-      : this.value
-    : []
+  _value: string[] = []
 
   @property({ type: String, reflect: true })
   label: string = 'Datovelger'
@@ -112,8 +125,17 @@ export class PktDatepicker extends PktInputElement {
         }
       })
 
-    if (this.value.length && this._value.length === 0) {
-      this._value = !Array.isArray(this.value) ? this.value.split(',') : this.value
+    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
@@ -151,10 +173,55 @@ export class PktDatepicker extends PktInputElement {
       })
   }
 
+  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) {
+      let validatedValue: string[] = []
+
+      if (newValue) {
+        // Handle case where newValue might be a string or need conversion
+        if (typeof newValue === 'string') {
+          validatedValue = newValue.split(',').filter(Boolean)
+        } else {
+          // If not a string, convert to string first
+          validatedValue = String(newValue).split(',').filter(Boolean)
+        }
+      }
+
+      // Validate dates against min/max boundaries
+      if (this.min || this.max) {
+        const minDate = this.min ? new Date(this.min) : null
+        const maxDate = this.max ? new Date(this.max) : null
+
+        validatedValue = validatedValue.filter((dateStr) => {
+          const date = new Date(dateStr)
+          if (isNaN(date.getTime())) return false
+          if (minDate && date < minDate) return false
+          if (maxDate && date > maxDate) return false
+          return true
+        })
+      }
+
+      this._value = validatedValue
+
+      // Update the public value property to reflect validated value
+      const validatedValueString = validatedValue.join(',')
+      if (this._valueProperty !== validatedValueString) {
+        this._valueProperty = validatedValueString
+      }
+
+      // Call base class valueChanged to handle events properly
+      super.valueChanged(validatedValueString, oldValue)
+    }
+  }
+
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'value') {
-      if (this.range && value?.split(',').length === 1) return
-      if (this.value !== _old) this.valueChanged(value, _old)
+    if (name === 'value' && this.value !== _old) {
+      this.valueChanged(value, _old)
     }
 
     if (name === 'excludedates' && typeof this.excludedates === 'string') {
@@ -168,6 +235,12 @@ export class PktDatepicker extends PktInputElement {
   }
 
   updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has('value')) {
+      const newValue = Array.isArray(this.value) ? this.value.join(',') : this.value
+      const oldValue = changedProperties.get('value')
+      const oldValueStr = Array.isArray(oldValue) ? oldValue.join(',') : oldValue
+      this.valueChanged(newValue, oldValueStr)
+    }
     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)) {
@@ -180,8 +253,8 @@ export class PktDatepicker extends PktInputElement {
       } 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
-      if (!this.multiple && Array.isArray(this._value)) {
+      // 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] ?? '']
       }
     }
@@ -212,6 +285,9 @@ export class PktDatepicker extends PktInputElement {
         .value=${this._value[0] ?? ''}
         min=${ifDefined(this.min)}
         max=${ifDefined(this.max)}
+        placeholder=${ifDefined(this.placeholder)}
+        ?readonly=${this.readonly}
+        aria-describedby="${this.id}-helptext"
         @click=${(e: MouseEvent) => {
           e.preventDefault()
           this.showCalendar()
@@ -276,6 +352,8 @@ export class PktDatepicker extends PktInputElement {
         .value=${this._value[0] ?? ''}
         min=${ifDefined(this.min)}
         max=${ifDefined(this.max)}
+        placeholder=${ifDefined(this.placeholder)}
+        ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
@@ -339,6 +417,8 @@ export class PktDatepicker extends PktInputElement {
         .value=${this._value[1] ?? ''}
         min=${ifDefined(this.min)}
         max=${ifDefined(this.max)}
+        placeholder=${ifDefined(this.placeholder)}
+        ?readonly=${this.readonly}
         ?disabled=${this.disabled}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
@@ -409,7 +489,6 @@ export class PktDatepicker extends PktInputElement {
   }
 
   renderMultipleInput() {
-    console.log('range', this.range, 'multiple', this.multiple)
     return html`
       <input
         class=${classMap(this.inputClasses)}
@@ -417,6 +496,8 @@ export class PktDatepicker extends PktInputElement {
         id="${this.id}-input"
         min=${ifDefined(this.min)}
         max=${ifDefined(this.max)}
+        placeholder=${ifDefined(this.placeholder)}
+        ?readonly=${this.readonly}
         ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
         @click=${(e: MouseEvent) => {
           e.preventDefault()
@@ -470,7 +551,7 @@ export class PktDatepicker extends PktInputElement {
       <div class="pkt-datepicker__tags" aria-live="polite">
         ${!!this._value[0]
           ? repeat(
-              (this._value ?? []).filter(Boolean),
+              (this._value ?? []).filter(Boolean).sort(),
               (date) => date,
               (date) => html`
                 <pkt-tag
@@ -513,16 +594,26 @@ export class PktDatepicker extends PktInputElement {
           ? this.excludedates
           : (this.excludedates as string).split(',')}
         .excludeweekdays=${this.excludeweekdays}
-        .currentmonth=${this.currentmonth ? newDate(this.currentmonth) : null}
+        .currentmonth=${this.currentmonth ? parseISODateString(this.currentmonth) : null}
         @date-selected=${(e: CustomEvent) => {
-          this.value = !this.multiple && !this.range ? e.detail[0] : e.detail
+          this.value =
+            !this.multiple && !this.range
+              ? e.detail[0]
+              : Array.isArray(e.detail)
+                ? e.detail.join(',')
+                : e.detail
           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)
             }
           }
         }}
@@ -536,7 +627,6 @@ export class PktDatepicker extends PktInputElement {
   }
 
   render() {
-    console.log('multiple', this.multiple, 'value', this.value, '_value', this._value)
     this.inputClasses = {
       'pkt-input': true,
       'pkt-datepicker__input': true,
@@ -551,6 +641,7 @@ export class PktDatepicker extends PktInputElement {
       'pkt-btn': true,
       'pkt-btn--icon-only': true,
       'pkt-btn--tertiary': true,
+      'pkt-datepicker__calendar-button': true,
     }
 
     return html`
@@ -595,6 +686,12 @@ 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)
+                }
+              }}
               ?disabled=${this.disabled}
               ${ref(this.btnRef)}
             >
@@ -677,4 +774,9 @@ export class PktDatepicker extends PktInputElement {
     e.preventDefault()
     this.calendarOpen ? this.hideCalendar() : this.showCalendar()
   }
+
+  public clearInputValue() {
+    this._value = []
+    this.value = ''
+  }
 }