@oslokommune/punkt-elements 14.3.0 → 14.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "14.3.0",
+  "version": "14.4.0",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -79,5 +79,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "892df7abaa2e9e117dc32b0c44c77592c80233cb"
+  "gitHead": "60b409e10bc60371f696d76a84ce6e0d25cb225a"
 }

package/src/components/checkbox/checkbox.ts

@@ -23,7 +23,7 @@ type Props = ElementProps<
 
 @customElement('pkt-checkbox')
 export class PktCheckbox extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLInputElement> = createRef()
+  inputRef: Ref<HTMLInputElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''
   @property({ type: String }) checkHelptext: string | null = null

package/src/components/combobox/combobox.ts

@@ -93,8 +93,8 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
 
   // State
   @state() _options: IPktComboboxOption[] = []
+  @state() _value: string[] = [] // Internal value representation
   @state() private _isOptionsOpen = false
-  @state() private _value: string[] = []
   @state() private _userInfoMessage: string = ''
   @state() private _addValueText: string | null = null
   @state() private _maxIsReached: boolean = false
@@ -130,7 +130,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
     }
 
     // If options are provided via the options slot, we need to extract them
-    if (this.optionsController.nodes.length) {
+    if (this.optionsController?.nodes && this.optionsController.nodes.length) {
       const options: IPktComboboxOption[] = []
       this.optionsController.nodes.forEach((node: Element) => {
         if (!node.textContent && !node.getAttribute('value')) return null

package/src/components/datepicker/datepicker-utils.test.ts

@@ -13,31 +13,6 @@ import { createRef } from 'lit/directives/ref.js'
 
 describe('datepicker-utils', () => {
   describe('valueUtils', () => {
-    describe('normalizeNameForMultiple', () => {
-      it('should return null when name is null', () => {
-        expect(valueUtils.normalizeNameForMultiple(null, false, false)).toBe(null)
-        expect(valueUtils.normalizeNameForMultiple(null, true, false)).toBe(null)
-        expect(valueUtils.normalizeNameForMultiple(null, false, true)).toBe(null)
-      })
-
-      it('should add [] suffix for multiple inputs without []', () => {
-        expect(valueUtils.normalizeNameForMultiple('dates', true, false)).toBe('dates[]')
-      })
-
-      it('should add [] suffix for range inputs without []', () => {
-        expect(valueUtils.normalizeNameForMultiple('daterange', false, true)).toBe('daterange[]')
-      })
-
-      it('should not add [] suffix when already present', () => {
-        expect(valueUtils.normalizeNameForMultiple('dates[]', true, false)).toBe('dates[]')
-        expect(valueUtils.normalizeNameForMultiple('range[]', false, true)).toBe('range[]')
-      })
-
-      it('should not modify name for single inputs', () => {
-        expect(valueUtils.normalizeNameForMultiple('singledate', false, false)).toBe('singledate')
-      })
-    })
-
     describe('validateRangeOrder', () => {
       it('should return true for incomplete ranges', () => {
         expect(valueUtils.validateRangeOrder([])).toBe(true)

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

@@ -27,34 +27,6 @@ import { PktCalendar } from '@/components/calendar/calendar'
  * Value parsing and validation utilities
  */
 export const valueUtils = {
-  /**
-   * Ensures name attribute ends with [] for multiple/range inputs
-   *
-   * For form submission to work correctly with multiple values,
-   * the input name must end with [] to indicate it's an array.
-   *
-   * @param name - The original name attribute value
-   * @param isMultiple - Whether this is a multiple-date picker
-   * @param isRange - Whether this is a range date picker
-   * @returns The normalized name with [] suffix if needed, or null if name is null
-   *
-   * @example
-   * normalizeNameForMultiple('dates', true, false) // Returns 'dates[]'
-   * normalizeNameForMultiple('dates[]', true, false) // Returns 'dates[]' (no change)
-   * normalizeNameForMultiple('date', false, false) // Returns 'date' (no change)
-   */
-  normalizeNameForMultiple(
-    name: string | null,
-    isMultiple: boolean,
-    isRange: boolean,
-  ): string | null {
-    if (!name) return null
-    if ((isMultiple || isRange) && !name.endsWith('[]')) {
-      return name + '[]'
-    }
-    return name
-  },
-
   /**
    * Validates that a range has valid order (start <= end)
    *

package/src/components/datepicker/datepicker.ts

@@ -142,8 +142,6 @@ export class PktDatepicker extends PktInputElement<Props> {
     if (this.timezone && this.timezone !== window.pktTz) {
       window.pktTz = this.timezone
     }
-    this.name =
-      valueUtils.normalizeNameForMultiple(this.name, this.multiple, this.range) || this.name
   }
 
   disconnectedCallback(): void {
@@ -211,10 +209,6 @@ export class PktDatepicker extends PktInputElement<Props> {
       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 (this.multiple && !Array.isArray(this._value)) {
         this._value = valueToArray(this.value)

package/src/components/radiobutton/radiobutton.ts

@@ -20,7 +20,7 @@ type Props = ElementProps<
 
 @customElement('pkt-radiobutton')
 export class PktRadioButton extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLInputElement> = createRef()
+  inputRef: Ref<HTMLInputElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''
   @property({ type: String }) checkHelptext: string | null = null

package/src/components/select/select.ts

@@ -1,8 +1,8 @@
 import { html, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, property } from 'lit/decorators.js'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { PktInputElement } from '@/base-elements/input-element'
+import { PktOptionsInputElement } from '@/base-elements/options-input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
 import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import '@/components/input-wrapper'
@@ -39,31 +39,15 @@ declare global {
 }
 
 @customElement('pkt-select')
-export class PktSelect extends PktInputElement implements IPktSelect {
-  private inputRef: Ref<HTMLSelectElement> = createRef()
+export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> implements IPktSelect {
+  inputRef: Ref<HTMLSelectElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
-  @property({ type: Array, attribute: 'options' }) private _optionsProp: TSelectOption[] = []
   @property({ type: String }) value: string = ''
 
-  @state() _options: TSelectOption[] = []
-
   public selectedIndex: number | null = -1
   public selectedOptions: HTMLCollectionOf<HTMLOptionElement> | undefined = undefined
 
-  // Getter and setter for options to expose the actual parsed options
-  public get options(): TSelectOption[] {
-    return this._options.map((option) => ({
-      ...option,
-      selected: option.value === this.value,
-    }))
-  }
-
-  public set options(value: TSelectOption[]) {
-    this._optionsProp = value
-    this.requestUpdate('_optionsProp', this._options)
-  }
-
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
@@ -74,34 +58,15 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   connectedCallback(): void {
     super.connectedCallback()
 
-    const optionsReceivedFromProps = this._optionsProp.length > 0
-    const checkIfOptionNodesInSlot =
-      this.optionsController.nodes.length && this.optionsController.nodes.length > 0
+    // Parse options from props or slots
+    this.parseOptions()
 
-    if (!optionsReceivedFromProps && checkIfOptionNodesInSlot) {
-      this.optionsController.nodes.forEach((node: Element) => {
-        const option: TSelectOption = {
-          value: node.hasAttribute('value')
-            ? (node.getAttribute('value') ?? '')
-            : (node.textContent ?? ''),
-          label: node.textContent || node.getAttribute('value') || '',
-          disabled: node.hasAttribute('disabled'),
-          selected: node.hasAttribute('selected'),
-          hidden: node.hasAttribute('data-hidden'),
-        }
-        if (node.getAttribute('selected') && !this.value) {
-          this.value = option.value
-        }
-        this._options.push(option)
-      })
-    } else {
-      this._options = this._optionsProp
-      this._options.forEach((option) => {
-        if (option.selected && !this.value) {
-          this.value = option.value
-        }
-      })
-    }
+    // Set initial value from selected option
+    this._options.forEach((option) => {
+      if (option.selected && !this.value) {
+        this.value = option.value
+      }
+    })
   }
 
   // Support native Select method `add`

package/src/components/textarea/textarea.ts

@@ -15,7 +15,7 @@ type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows'>
 
 @customElement('pkt-textarea')
 export class PktTextarea extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''

package/src/components/textinput/textinput.ts

@@ -24,7 +24,7 @@ type Props = ElementProps<
 
 @customElement('pkt-textinput')
 export class PktTextinput extends PktInputElement<Props> {
-  private inputRef: Ref<HTMLTextAreaElement> = createRef()
+  inputRef: Ref<HTMLTextAreaElement> = createRef()
   private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: String, reflect: true }) value: string = ''