@oslokommune/punkt-elements 16.26.4 → 16.26.6

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

@@ -540,4 +540,55 @@ describe('PktCombobox', () => {
       expect(valueEl?.textContent?.trim()).toBe('NO no')
     })
   })
+
+  describe('Programmatic value control', () => {
+    test('updates listbox selected state when value is set externally (single)', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test" value="apple"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = getDefaultOptions()
+      await combobox.updateComplete
+
+      combobox.value = 'banana'
+      await combobox.updateComplete
+
+      const options = combobox['_options']
+      expect(options.find((o) => o.value === 'banana')?.selected).toBe(true)
+      expect(options.find((o) => o.value === 'apple')?.selected).toBe(false)
+
+      await openAndWaitForListbox(combobox)
+      const selected = combobox.querySelectorAll('[role="option"][aria-selected="true"]')
+      expect(selected).toHaveLength(1)
+      expect(selected[0].textContent).toContain('Banana')
+    })
+
+    test('updates listbox selected state when value is set externally (multiple)', async () => {
+      const container = await createCombobox(
+        'id="test" name="test" label="Test" multiple value="apple,banana"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = getDefaultOptions()
+      await combobox.updateComplete
+
+      combobox.value = 'cherry,date'
+      await combobox.updateComplete
+
+      const selectedValues = combobox['_options'].filter((o) => o.selected).map((o) => o.value)
+      expect(selectedValues).toEqual(['cherry', 'date'])
+    })
+
+    test('clears listbox selected state when value is cleared externally', async () => {
+      const container = await createCombobox(
+        'id="test" name="test" label="Test" multiple value="apple,banana"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = getDefaultOptions()
+      await combobox.updateComplete
+
+      combobox.value = ''
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual([])
+      expect(combobox['_options'].some((o) => o.selected)).toBe(false)
+    })
+  })
 })

package/src/components/combobox/combobox.ts

@@ -154,6 +154,9 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
       const newInternal = this.parseValue()
       if (newInternal.join(',') !== this._value.join(',')) {
         this._value = newInternal
+        this.options.forEach((o) => (o.selected = newInternal.includes(o.value)))
+        this._options.forEach((o) => (o.selected = newInternal.includes(o.value)))
+        this._options = [...this._options]
       }
       this.updateMaxReached()
       this.syncValueAndDispatch(oldInternal)

package/src/components/fileupload/fileupload-base.ts

@@ -14,6 +14,7 @@ import {
 
 import { PktElement } from '@/base-elements/element'
 import converters from '../../helpers/converters'
+import specs from 'componentSpecs/fileupload.json'
 
 import type {
   FileItem,
@@ -41,6 +42,11 @@ export abstract class PktFileUploadBase
   @property({ type: String }) label: string = ''
   /** Optional help text shown under label. */
   @property({ type: String }) helptext: string = ''
+  /** Expandable help text (dropdown) shown by `pkt-input-wrapper`. */
+  @property({ type: String, attribute: 'helptext-dropdown' }) helptextDropdown: string = ''
+  /** Button label for expandable help text. */
+  @property({ type: String, attribute: 'helptext-dropdown-button' })
+  helptextDropdownButton: string = specs.props.helptextDropdownButton.default
   /** Mark input as required in form strategy. */
   @property({ type: Boolean, reflect: true }) required = false
   /** Allow selecting/dropping multiple files. */
@@ -85,8 +91,16 @@ export abstract class PktFileUploadBase
   @property({ type: String, attribute: 'error-message' }) errorMessage = ''
   /** Show "Valgfritt" tag in the input wrapper. */
   @property({ type: Boolean, attribute: 'optional-tag' }) optionalTag = false
+  /** Label text for the optional tag. */
+  @property({ type: String, attribute: 'optional-text' })
+  optionalText: string = specs.props.optionalText.default
   /** Show "Må fylles ut" tag in the input wrapper. */
   @property({ type: Boolean, attribute: 'required-tag' }) requiredTag = false
+  /** Label text for the required tag. */
+  @property({ type: String, attribute: 'required-text' })
+  requiredText: string = specs.props.requiredText.default
+  /** Extra tag next to the label. */
+  @property({ type: String, attribute: 'tag-text' }) tagText: string | null = null
   /** Trailing characters to keep when middle-truncating long filenames. Set to `0` to disable. */
   @property({ type: Number, attribute: 'truncate-tail' }) truncateTail: number = 4
   /** Controlled mode source of truth. Parent owns file list and updates this prop from events. */

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

@@ -55,6 +55,10 @@ export interface IPktFileUpload {
   name?: string
   label?: string
   helptext?: string
+  /** Expandable help text (dropdown) in input-wrapper. */
+  helptextDropdown?: string
+  /** Button label for expandable help text. */
+  helptextDropdownButton?: string
   required?: boolean
   multiple?: boolean
   disabled?: boolean
@@ -73,8 +77,14 @@ export interface IPktFileUpload {
   errorMessage?: string
   /** Show "Valgfritt" tag in input-wrapper. */
   optionalTag?: boolean
+  /** Label text for the optional tag. */
+  optionalText?: string
   /** Show "Må fylles ut" tag in input-wrapper. */
   requiredTag?: boolean
+  /** Label text for the required tag. */
+  requiredText?: string
+  /** Extra tag next to the label. */
+  tagText?: string | null
   /** Trailing characters to keep when truncating long filenames. */
   truncateTail?: number
   /** Transfer states keyed by `fileId` (custom strategy progress/error/cancel rendering). */

package/src/components/fileupload/fileupload.test.ts

@@ -875,6 +875,41 @@ describe('PktFileUpload', () => {
     expect(requiredWrapper?.requiredTag).toBe(true)
   })
 
+  test('forwards tag texts and expandable helptext to pkt-input-wrapper', async () => {
+    const { fileupload } = await createFileUploadTest({
+      label: 'Vedlegg',
+      optionalTag: true,
+      optionalText: 'Frivillig',
+      tagText: 'Nytt',
+      helptextDropdown: 'Utfyllende informasjon om vedlegg',
+      helptextDropdownButton: 'Vis mer',
+    })
+
+    const wrapper = fileupload.querySelector<
+      HTMLElement & {
+        optionalText?: string
+        tagText?: string | null
+        helptextDropdown?: string
+        helptextDropdownButton?: string
+      }
+    >('pkt-input-wrapper')
+    expect(wrapper?.optionalText).toBe('Frivillig')
+    expect(wrapper?.tagText).toBe('Nytt')
+    expect(wrapper?.helptextDropdown).toBe('Utfyllende informasjon om vedlegg')
+    expect(wrapper?.helptextDropdownButton).toBe('Vis mer')
+    expect(wrapper?.textContent).toContain('Frivillig')
+    expect(wrapper?.textContent).toContain('Nytt')
+
+    const { fileupload: required } = await createFileUploadTest({
+      label: 'Vedlegg',
+      requiredTag: true,
+      requiredText: 'Obligatorisk',
+    })
+    const requiredWrapper = required.querySelector<HTMLElement & { requiredText?: string }>('pkt-input-wrapper')
+    expect(requiredWrapper?.requiredText).toBe('Obligatorisk')
+    expect(requiredWrapper?.textContent).toContain('Obligatorisk')
+  })
+
   test('default id is unique per instance', async () => {
     const { fileupload: first } = await createFileUploadTest()
     const { fileupload: second } = await createFileUploadTest()

package/src/components/fileupload/fileupload.ts

@@ -68,10 +68,15 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
         .forId=${`${this.id}-input`}
         .label=${this.label}
         .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
         ?disabled=${this.disabled}
         ?hasError=${this.hasEffectiveError}
         ?optionalTag=${this.optionalTag}
+        .optionalText=${this.optionalText}
         ?requiredTag=${this.requiredTag}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
         class=${classMap({
           'pkt-fileupload-wrapper': true,
           'pkt-fileupload-wrapper--full-width': this.fullwidth,

package/src/components/select/select.test.ts

@@ -199,18 +199,88 @@ describe('pkt-select', () => {
   test('handles useWrapper false', async () => {
     const { select } = await createSelectTest()
 
-    // Set useWrapper property directly on the element
     select.useWrapper = false
     await select.updateComplete
 
-    // When useWrapper is false, verify the behavior
     expect(select.useWrapper).toBe(false)
 
-    // Confirm that there's a label with class pkt-sr-only in the markup
     const srOnlyLabel = select.querySelector('label.pkt-sr-only')
     expect(srOnlyLabel).toBeInTheDocument()
   })
 
+  test('does not duplicate slotted options when moved in the DOM (issue #3544)', async () => {
+    const zoneA = document.createElement('div')
+    const zoneB = document.createElement('div')
+    document.body.append(zoneA, zoneB)
+
+    zoneA.innerHTML = `
+      <pkt-select label="Kategori" id="reconnect-select">
+        <option value="">Velg…</option>
+        <option value="en">En</option>
+        <option value="to">To</option>
+      </pkt-select>
+    `
+    const select = zoneA.querySelector('pkt-select')!
+    await select.updateComplete
+    expect(select.querySelectorAll('select option')).toHaveLength(3)
+
+    zoneB.appendChild(select)
+    await select.updateComplete
+    expect(select.querySelectorAll('select option')).toHaveLength(3)
+
+    zoneA.appendChild(select)
+    await select.updateComplete
+    expect(select.querySelectorAll('select option')).toHaveLength(3)
+  })
+
+  test('updates rendered option when disabled is toggled on a slotted option', async () => {
+    const wrapper = document.createElement('div')
+    document.body.append(wrapper)
+    wrapper.innerHTML = `
+      <pkt-select label="Frukt" id="toggle-disabled-select">
+        <option value="">Velg…</option>
+        <option value="banan">Banan</option>
+      </pkt-select>
+    `
+    const select = wrapper.querySelector('pkt-select')!
+    await select.updateComplete
+
+    const slotted = select.querySelector(':scope > option[value="banan"]')!
+    const rendered = () => select.querySelector('select option[value="banan"]') as HTMLOptionElement
+
+    expect(rendered().disabled).toBe(false)
+
+    slotted.toggleAttribute('disabled')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await select.updateComplete
+    expect(rendered().disabled).toBe(true)
+
+    slotted.toggleAttribute('disabled')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await select.updateComplete
+    expect(rendered().disabled).toBe(false)
+  })
+
+  test('updates rendered option when the text of a slotted option changes', async () => {
+    const wrapper = document.createElement('div')
+    document.body.append(wrapper)
+    wrapper.innerHTML = `
+      <pkt-select label="Frukt" id="change-label-select">
+        <option value="banan">Banan</option>
+      </pkt-select>
+    `
+    const select = wrapper.querySelector('pkt-select')!
+    await select.updateComplete
+
+    const slotted = select.querySelector(':scope > option[value="banan"]')!
+    slotted.textContent = 'Gul banan'
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await select.updateComplete
+
+    const rendered = select.querySelector('select option[value="banan"]')
+    expect(rendered?.textContent?.trim()).toBe('Gul banan')
+  })
+
   test('meets accessibility standards', async () => {
     const options: TSelectOption[] = [
       { value: '1', label: 'Option 1' },

package/dist/pkt-options-controller-DHKHMyXM.cjs

@@ -1 +0,0 @@
-const e=require("./element-with-slot-BY7Jc-q8.cjs");var t=class{constructor(e){this.nodes=[],this.options=[],this.generation=0,this.host=e,this.host.addController(this),this.nodes=[],this.options=[],this.observer=new MutationObserver(e=>this.handleMutations(e))}hostConnected(){Array.from(this.host.childNodes).forEach(e=>{(e.nodeName===`OPTION`||e.nodeName===`DATA`)&&this.addNode(e)}),this.createOptions(),this.observer.observe(this.host,{childList:!0,subtree:!1,attributes:!0})}hostDisconnected(){this.observer.disconnect()}addNode(e){(e.nodeName===`OPTION`||e.nodeName===`DATA`)&&(e.hasAttribute(`hidden`)&&!e.hasAttribute(`data-skip`)&&e.setAttribute(`data-hidden`,`true`),!e.hasAttribute(`hidden`)&&e.hasAttribute(`data-skip`)&&e.hasAttribute(`data-hidden`)&&e.removeAttribute(`data-hidden`),e.setAttribute(`class`,`pkt-hide`),e.setAttribute(`data-skip`,`true`),e.setAttribute(`hidden`,`true`),this.nodes.push(e))}createOptions(){this.options=this.nodes.map(e=>({value:e.hasAttribute(`value`)?e.getAttribute(`value`)??``:e.textContent??``,label:e.textContent||e.getAttribute(`value`)||``,selected:e.hasAttribute(`selected`),disabled:e.hasAttribute(`disabled`),hidden:e.hasAttribute(`data-hidden`)})),this.generation++,this.host.requestUpdate()}handleMutations(t){let n=!1;t.forEach(t=>{t.type===`childList`&&(t.addedNodes.forEach(t=>{e.r(t)&&(this.addNode(t),n=!0)}),t.removedNodes.forEach(t=>{e.r(t)&&(this.nodes=this.nodes.filter(e=>e!==t),n=!0)})),t.type===`attributes`&&e.r(t.target)&&(this.addNode(t.target),n=!0)}),n&&this.createOptions()}};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});