@oslokommune/punkt-elements 18.6.0 → 18.6.1

package/src/components/datepicker/datepicker.ts

@@ -58,7 +58,6 @@ export class PktDatepicker extends PktInputElement<Props> {
    * Element attributes and properties
    */
   private _valueProperty: string = ''
-  private _valueProcessing = false
   datepickerPopupRef: Ref<PktDatepickerPopup> = createRef()
 
   @property({ type: String, reflect: true })
@@ -68,8 +67,9 @@ export class PktDatepicker extends PktInputElement<Props> {
 
   set value(newValue: string | string[]) {
     const oldValue = this._valueProperty
-    this._valueProperty = Array.isArray(newValue) ? newValue.join(',') : newValue || ''
-    this.valueChanged(this._valueProperty, oldValue)
+    const raw = Array.isArray(newValue) ? newValue.join(',') : newValue || ''
+    if (raw === oldValue) return
+    this._valueProperty = raw
     this.requestUpdate('value', oldValue)
   }
 
@@ -152,45 +152,43 @@ export class PktDatepicker extends PktInputElement<Props> {
   }
 
   valueChanged(newValue: string | null, oldValue: string | null): void {
-    if (this._valueProcessing || newValue === oldValue) return
-    this._valueProcessing = true
-    try {
-      const parsedValue = valueToArray(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 = filteredValue
-
-      const parsedValueString = arrayToCsv(filteredValue)
-      if (this._valueProperty !== parsedValueString) {
-        this._valueProperty = parsedValueString
-      }
-
-      // In range mode, don't dispatch events until both dates are selected
-      if (this.range && filteredValue.length < 2) return
-
-      super.valueChanged(parsedValueString, oldValue)
-    } finally {
-      this._valueProcessing = false
+    if (newValue === oldValue) return
+    this.value = newValue ?? ''
+    this.deriveValue(oldValue)
+  }
+
+  private deriveValue(oldValue: string | null): void {
+    const parsedValue = valueToArray(this._valueProperty)
+
+    // 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._valueProperty = ''
+      super.valueChanged('', oldValue)
+      this._value = []
+      return
     }
+
+    this._valueProperty = arrayToCsv(filteredValue)
+
+    // Én dato er ingen fullført periode. Tom er en fullført endring.
+    if (!(this.range && filteredValue.length === 1)) {
+      super.valueChanged(this._valueProperty, oldValue)
+    }
+
+    // Etter super, som utleder _value fra strengen og gjør '' til [''].
+    this._value = filteredValue
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
@@ -204,30 +202,26 @@ export class PktDatepicker extends PktInputElement<Props> {
     super.attributeChangedCallback(name, _old, value)
   }
 
-  updated(changedProperties: PropertyValues): void {
-    // Re-process value only when multiple/range also changed in the same update cycle,
-    // since attribute initialization may process value before multiple/range are set.
-    // When value is set via JS setter after init, multiple/range are already correct
-    // and the setter's valueChanged() call is sufficient.
-    if (
-      changedProperties.has('value') &&
-      (changedProperties.has('multiple') || changedProperties.has('range'))
-    ) {
-      const newValue = Array.isArray(this.value) ? this.value.join(',') : this.value
+  private static readonly DERIVED_FROM = [
+    'value',
+    'multiple',
+    'range',
+    'min',
+    'max',
+    'excludedates',
+    'excludeweekdays',
+  ]
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties)
+
+    if (PktDatepicker.DERIVED_FROM.some((prop) => changedProperties.has(prop))) {
       const oldValue = changedProperties.get('value')
-      const oldValueStr = Array.isArray(oldValue) ? oldValue.join(',') : oldValue
-      this.valueChanged(newValue, oldValueStr)
-    }
-    if (changedProperties.has('multiple')) {
-      if (this.multiple && !Array.isArray(this._value)) {
-        this._value = valueToArray(this.value)
-      } else if (!this.multiple && Array.isArray(this._value)) {
-        this._value = this._value.filter(Boolean)
-      }
-      if (!this.multiple && !this.range && Array.isArray(this._value)) {
-        this._value = [this._value[0] ?? '']
-      }
+      this.deriveValue(Array.isArray(oldValue) ? oldValue.join(',') : (oldValue ?? null))
     }
+  }
+
+  updated(changedProperties: PropertyValues): void {
     // Ytre boks, samme klasser og rolle som Reacts ytre div
     this.classList.add('pkt-datepicker')
     this.classList.toggle('pkt-datepicker--fullwidth', this.fullwidth)
@@ -311,6 +305,8 @@ export class PktDatepicker extends PktInputElement<Props> {
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
+        .hasError=${this.hasError}
+        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown)}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -348,6 +344,8 @@ export class PktDatepicker extends PktInputElement<Props> {
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
+        .hasError=${this.hasError}
+        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown)}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -434,6 +432,8 @@ export class PktDatepicker extends PktInputElement<Props> {
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
+        .hasError=${this.hasError}
+        .hasHelptext=${Boolean(this.helptext || this.helptextDropdown)}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}