@oslokommune/punkt-elements 14.3.0 → 14.5.2

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/header/header.ts

@@ -88,9 +88,11 @@ export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
 
   private emitDeprecationWarnings() {
     if (this.userMenuFooter !== undefined) {
+      // eslint-disable-next-line no-console -- Deprecation warnings are intentional for library consumers
       console.warn('[PktHeader] userMenuFooter is deprecated. Use userMenu instead.')
     }
     if (this.userOptions !== undefined) {
+      // eslint-disable-next-line no-console -- Deprecation warnings are intentional for library consumers
       console.warn('[PktHeader] userOptions is deprecated. Use userMenu instead.')
     }
   }

package/src/components/index.ts

@@ -8,7 +8,6 @@ export { PktCard } from '@/components/card'
 export { PktCombobox } from './combobox'
 export { PktConsent } from './consent'
 export { PktCheckbox } from '@/components/checkbox'
-export { PktComponent } from '../base-elements/component-template.js'
 export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
 export { PktHeader, PktHeaderService, PktHeaderUserMenu } from '@/components/header'

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`
@@ -160,6 +125,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
   // Support native Select method `showPicker`
   public showPicker() {
     if (this.inputRef.value && 'showPicker' in this.inputRef.value) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- showPicker is not in TypeScript's HTMLSelectElement type yet
       ;(this.inputRef.value as any).showPicker()
     }
   }
@@ -186,6 +152,7 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
       // If no value is set and we have options, set to first option
       if (!this.value && this._options.length > 0) {
+        // eslint-disable-next-line lit/no-property-change-update -- Initial value setup is intentional
         this.value = this._options[0].value
         this.selectedIndex = 0
       }

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 = ''