@oslokommune/punkt-elements 14.5.4 → 15.0.0

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

@@ -1,9 +1,10 @@
-import { html } from 'lit'
+import { html, nothing, PropertyValues } from 'lit'
 import { PktElement } from '@/base-elements/element'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ref, createRef, Ref } from 'lit/directives/ref.js'
 
+import { formatISODate, newDate } from 'shared-utils/date-utils'
 import { PktCalendar } from '../calendar/calendar'
 import { calendarUtils } from './datepicker-utils'
 
@@ -21,6 +22,9 @@ export class PktDatepickerPopup extends PktElement {
   @property({ type: Array }) excludedates: string[] = []
   @property({ type: Array }) excludeweekdays: string[] = []
   @property({ type: String }) currentmonth: string | null = null
+  @property({ type: String }) today: string | null = null
+
+  @state() private _hasBeenOpened = false
 
   popupRef: Ref<HTMLElement> = createRef()
   calendarRef: Ref<HTMLElement> = createRef()
@@ -28,9 +32,21 @@ export class PktDatepickerPopup extends PktElement {
   firstUpdated() {
     // expose calendarRef for external use
     this.calRef = this.calendarRef
+  }
 
-    document.addEventListener('keydown', this.handleDocumentKeydown)
-    document.addEventListener('click', this.handleDocumentClick)
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties)
+
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this._hasBeenOpened = true
+        document.addEventListener('keydown', this.handleDocumentKeydown)
+        document.addEventListener('click', this.handleDocumentClick)
+      } else {
+        document.removeEventListener('click', this.handleDocumentClick)
+        document.removeEventListener('keydown', this.handleDocumentKeydown)
+      }
+    }
   }
 
   disconnectedCallback() {
@@ -85,15 +101,39 @@ export class PktDatepickerPopup extends PktElement {
   }
 
   addToSelected(e: Event, min?: string | null, max?: string | null) {
-    if (typeof calendarUtils.addToSelected === 'function') {
+    const cal = this.calendarRef.value as PktCalendar
+    if (cal && typeof calendarUtils.addToSelected === 'function') {
       return calendarUtils.addToSelected(e, this.calendarRef as any, min, max)
     }
-    return undefined
+
+    // Calendar not rendered yet — handle add directly
+    const target = e.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)) {
+      this.handleDateSelect(date)
+    }
+    target.value = ''
   }
 
   handleDateSelect(date: Date) {
     const cal = this.calendarRef.value as PktCalendar
     if (cal && typeof cal.handleDateSelect === 'function') return cal.handleDateSelect(date)
+
+    // Calendar not rendered yet — handle selection toggle directly
+    const dateStr = formatISODate(date)
+    const index = this.selected.indexOf(dateStr)
+    const newSelected = index >= 0
+      ? this.selected.filter((d) => d !== dateStr)
+      : [...this.selected, dateStr]
+    this.selected = newSelected
+    this.dispatchEvent(
+      new CustomEvent('date-selected', { detail: newSelected, bubbles: true, composed: true }),
+    )
     return undefined
   }
 
@@ -107,30 +147,33 @@ export class PktDatepickerPopup extends PktElement {
         ?hidden=${!this.open}
         aria-hidden="${!this.open}"
       >
-        <pkt-calendar
-          ${ref(this.calendarRef)}
-          ?multiple=${this.multiple}
-          ?range=${this.range}
-          ?weeknumbers=${this.weeknumbers}
-          ?withcontrols=${this.withcontrols}
-          .maxMultiple=${this.maxMultiple}
-          .selected=${this.selected}
-          .earliest=${this.earliest}
-          .latest=${this.latest}
-          .excludedates=${this.excludedates}
-          .excludeweekdays=${this.excludeweekdays}
-          .currentmonth=${this.currentmonth}
-          @date-selected=${(e: CustomEvent) => {
-            this.selected = e.detail
-            this.dispatchEvent(
-              new CustomEvent('date-selected', { detail: e.detail, bubbles: true, composed: true }),
-            )
-          }}
-          @close=${() => {
-            this.hide()
-            this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
-          }}
-        ></pkt-calendar>
+        ${this.open || this._hasBeenOpened
+          ? html`<pkt-calendar
+              ${ref(this.calendarRef)}
+              ?multiple=${this.multiple}
+              ?range=${this.range}
+              ?weeknumbers=${this.weeknumbers}
+              ?withcontrols=${this.withcontrols}
+              .maxMultiple=${this.maxMultiple}
+              .selected=${this.selected}
+              .earliest=${this.earliest}
+              .latest=${this.latest}
+              .excludedates=${this.excludedates}
+              .excludeweekdays=${this.excludeweekdays}
+              .currentmonth=${this.currentmonth}
+              .today=${this.today}
+              @date-selected=${(e: CustomEvent) => {
+                this.selected = e.detail
+                this.dispatchEvent(
+                  new CustomEvent('date-selected', { detail: e.detail, bubbles: true, composed: true }),
+                )
+              }}
+              @close=${() => {
+                this.hide()
+                this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+              }}
+            ></pkt-calendar>`
+          : nothing}
       </div>
     `
   }

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

@@ -14,6 +14,9 @@ export class PktDatepickerRange extends PktDatepickerBase {
   @property({ type: Array })
   value: string[] = []
 
+  @property({ type: String })
+  label: string = ''
+
   @property({ type: Boolean })
   showRangeLabels: boolean = false
 
@@ -38,6 +41,7 @@ export class PktDatepickerRange extends PktDatepickerBase {
           class=${classMap(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
+          aria-label="${this.label} ${this.strings.generic?.from ?? 'Fra'}"
           .value=${this.value[0] ?? ''}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
@@ -101,7 +105,7 @@ export class PktDatepickerRange extends PktDatepickerBase {
           class=${classMap(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-to"
-          aria-labelledby="${this.id}-to-label"
+          aria-label="${this.label} ${this.strings.generic?.to ?? 'Til'}"
           .value=${this.value[1] ?? ''}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}

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

@@ -1,56 +1,6 @@
 /**
- * Type definitions for the datepicker component family
+ * Type definitions for the datepicker component family.
+ * Re-exports from shared-types for backward compatibility.
  */
-
-/**
- * Internationalization strings for the datepicker components
- */
-export interface IDatepickerStrings {
-  /** Calendar-related strings */
-  calendar?: {
-    /** Alt text for calendar button */
-    buttonAltText?: string
-  }
-  /** Generic UI strings (used in range datepicker) */
-  generic?: {
-    /** Label for range start input */
-    from?: string
-    /** Label for range end input */
-    to?: string
-  }
-  /** Form validation messages */
-  forms?: {
-    messages?: {
-      /** Error message when date is before minimum */
-      rangeUnderflow?: string
-      /** Error message when date is after maximum */
-      rangeOverflow?: string
-      /** Error message for invalid date format */
-      badInput?: string
-      /** Error message when required field is empty */
-      valueMissing?: string
-    }
-  }
-  /** Date-related strings */
-  dates?: {
-    /** Month label */
-    month?: string
-    /** Year label */
-    year?: string
-  }
-}
-
-/**
- * Default strings for single/multiple datepicker
- */
-export const defaultSingleStrings: IDatepickerStrings = {
-  calendar: { buttonAltText: 'Åpne kalender' },
-}
-
-/**
- * Default strings for range datepicker
- */
-export const defaultRangeStrings: IDatepickerStrings = {
-  calendar: { buttonAltText: 'Åpne kalender' },
-  generic: { from: 'Fra', to: 'Til' },
-}
+export type { IDatepickerStrings } from 'shared-types/datepicker'
+export { defaultSingleStrings, defaultRangeStrings } from 'shared-types/datepicker'