@oslokommune/punkt-elements 19.5.1 → 19.6.0

package/src/components/input-wrapper/input-wrapper.test.ts

@@ -389,6 +389,25 @@ describe('PktInputWrapper', () => {
       document.body.innerHTML = ''
     })
 
+    test('links the error message to the fieldset', async () => {
+      const fieldset = await mountFieldset('hasError errorMessage="Velg ett alternativ"')
+
+      expect(describedByIds(fieldset)).toContain('g-error')
+      expect(document.getElementById('g-error')).toBeInTheDocument()
+    })
+
+    test('links both helptext and error message to the fieldset', async () => {
+      const fieldset = await mountFieldset('helptext="Velg ett" hasError errorMessage="Mangler"')
+
+      expect(describedByIds(fieldset)).toEqual(['g-helptext', 'g-error'])
+    })
+
+    test('does not link an error message when hasError is off', async () => {
+      const fieldset = await mountFieldset('errorMessage="Mangler"')
+
+      expect(fieldset.hasAttribute('aria-describedby')).toBe(false)
+    })
+
     test('links slotted helptext to the fieldset', async () => {
       const fieldset = await mountFieldset('', '<div class="pkt-contents" slot="helptext">Velg ett</div>')
 
@@ -420,6 +439,23 @@ describe('PktInputWrapper', () => {
       expect(describedByIds(fieldset)).toEqual(['g-helptext'])
       expect(document.getElementById('g-helptext')?.textContent).toContain('Velg ett')
     })
+
+    test('only references ids that are rendered', async () => {
+      const fieldset = await mountFieldset('helptext="Velg ett" hasError errorMessage="Mangler"')
+
+      describedByIds(fieldset).forEach((id) => {
+        expect(document.getElementById(id)).toBeInTheDocument()
+      })
+    })
+
+    test('names the fieldset with a hidden legend when useWrapper is off', async () => {
+      const fieldset = await mountFieldset('useWrapper="false"')
+
+      const legend = fieldset.querySelector(':scope > legend')
+      expect(legend).toHaveClass('pkt-sr-only')
+      expect(legend?.textContent?.trim()).toBe('Gruppe')
+      expect(fieldset.querySelector('label')).toBeNull()
+    })
   })
 
   describe('Wrapper functionality', () => {
@@ -597,3 +633,57 @@ describe('PktInputWrapper', () => {
     })
   })
 })
+
+describe('PktInputWrapper options container', () => {
+  const mount = async (attributes: string) => {
+    document.body.innerHTML = `<pkt-input-wrapper forId="g" label="Gruppe" ${attributes}><span class="valg">Valg</span></pkt-input-wrapper>`
+    const wrapper = document.querySelector('pkt-input-wrapper') as CustomElementFor<'pkt-input-wrapper'>
+    await wrapper.updateComplete
+    return wrapper
+  }
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('wraps the options of a fieldset in a vertical options container', async () => {
+    const wrapper = await mount('hasFieldset')
+
+    const options = wrapper.querySelector('.pkt-inputwrapper__options')
+    expect(options).not.toHaveClass('pkt-inputwrapper__options--horizontal')
+    expect(options?.querySelector('.valg')).toBeInTheDocument()
+  })
+
+  test('lays the options out horizontally with layout="horizontal"', async () => {
+    const wrapper = await mount('hasFieldset layout="horizontal"')
+
+    expect(wrapper.querySelector('.pkt-inputwrapper__options')).toHaveClass(
+      'pkt-inputwrapper__options--horizontal',
+    )
+  })
+
+  test('uses the options container for horizontal layout without a fieldset', async () => {
+    const wrapper = await mount('layout="horizontal"')
+
+    expect(wrapper.querySelector('.pkt-inputwrapper__options--horizontal .valg')).toBeInTheDocument()
+  })
+
+  test('keeps the markup unchanged without a fieldset and horizontal layout', async () => {
+    const wrapper = await mount('')
+
+    expect(wrapper.querySelector('.pkt-inputwrapper__options')).toBeNull()
+    expect(wrapper.querySelector('.pkt-contents .valg')).toBeInTheDocument()
+  })
+
+  test('switches layout when the property changes', async () => {
+    const wrapper = await mount('hasFieldset')
+
+    wrapper.layout = 'horizontal'
+    await wrapper.updateComplete
+
+    expect(wrapper.querySelector('.pkt-inputwrapper__options')).toHaveClass(
+      'pkt-inputwrapper__options--horizontal',
+    )
+    expect(wrapper.querySelectorAll('.valg')).toHaveLength(1)
+  })
+})

package/src/components/input-wrapper/input-wrapper.ts

@@ -8,7 +8,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { customElement, property } from 'lit/decorators.js'
 import { ElementProps } from '@/types/typeUtils'
 import { uuidish } from 'shared-utils/utils'
-import { booleanishConverter, type Booleanish } from 'shared-types'
+import { booleanishConverter, type Booleanish, type TLayout } from 'shared-types'
 import { FocusModalityController } from '@/controllers/focus-modality-controller'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/helptext'
@@ -38,6 +38,7 @@ type Props = ElementProps<
   | 'inline'
   | 'ariaDescribedby'
   | 'hasFieldset'
+  | 'layout'
   | 'useWrapper'
   | 'role'
 > &
@@ -71,6 +72,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   @property({ type: Boolean }) inline: boolean = specs.props.inline.default
   @property({ type: String }) ariaDescribedby: string | undefined = undefined
   @property({ type: Boolean }) hasFieldset: boolean = specs.props.hasFieldset.default
+  @property({ type: String }) layout: TLayout = specs.props.layout.default as TLayout
   @property({ type: String, reflect: true }) role: string | null = null
   @property({ type: Boolean, reflect: true, converter: booleanishConverter })
   useWrapper: Booleanish = specs.props.useWrapper.default
@@ -100,11 +102,16 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
     const hasHelptext = !!this.helptext || this.hasSlotContent('helptext')
-    const describedBy = this.ariaDescribedby
-      ? this.ariaDescribedby
-      : hasHelptext
-        ? `${this.forId}-helptext`
-        : nothing
+    const describedByIds = new Set(
+      [
+        this.ariaDescribedby || (hasHelptext ? `${this.forId}-helptext` : ''),
+        this.hasError && this.errorMessage ? `${this.forId}-error` : '',
+      ]
+        .join(' ')
+        .split(' ')
+        .filter(Boolean),
+    )
+    const describedBy = describedByIds.size ? [...describedByIds].join(' ') : nothing
 
     const formStrings = this.pktStrings.get('forms')
 
@@ -145,6 +152,8 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
             >${this.label}${tagElement()}</label
           >`
         }
+      } else if (this.hasFieldset) {
+        return html`<legend class="pkt-sr-only" id="${this.forId}-label">${this.label}</legend>`
       } else {
         return html`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
           ${this.label}
@@ -214,7 +223,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
         ${labelElement()} 
         ${helptextElement()}
         ${this.counterPosition === 'top' ? counterElement() : nothing}
-        <div class="pkt-contents">${slotContent(this)}</div>
+        <div class=${this.optionsClass()}>${slotContent(this)}</div>
         ${this.counterPosition === 'bottom' ? counterElement() : nothing} 
         ${errorElement()}
       `
@@ -231,6 +240,13 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     return wrapperElement()
   }
 
+  private optionsClass(): string {
+    if (!this.hasFieldset && this.layout !== 'horizontal') return 'pkt-contents'
+    return this.layout === 'horizontal'
+      ? 'pkt-inputwrapper__options pkt-inputwrapper__options--horizontal'
+      : 'pkt-inputwrapper__options'
+  }
+
   private toggleDropdown(e: CustomEvent) {
     this.dispatchEvent(
       new CustomEvent('toggleHelpText', {

package/src/components/input-wrapper/wrapper-parity.test.ts

@@ -64,6 +64,15 @@ const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>>
     timepicker: 'teller over feltet er aldri støttet',
     fileupload: 'teller over feltet er aldri støttet',
   },
+  layout: {
+    textinput: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    textarea: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    select: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    combobox: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    datepicker: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    timepicker: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    fileupload: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+  },
   hasFieldset: {
     fileupload: 'ikke støttet',
   },

package/src/components/radiobutton/radiobutton.test.ts

@@ -271,3 +271,29 @@ describe('pkt-radiobutton', () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe('pkt-radiobutton inputSize', () => {
+  const root = async (attributes = '') => {
+    document.body.innerHTML = `<pkt-radiobutton id="s" name="s" label="Valg" ${attributes}></pkt-radiobutton>`
+    const el = document.querySelector('pkt-radiobutton') as HTMLElement & { updateComplete: Promise<unknown> }
+    await el.updateComplete
+    return el.querySelector('.pkt-input-check') as HTMLElement
+  }
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('adds no size class without input-size, so the size is inherited', async () => {
+    expect((await root()).className).toBe('pkt-input-check')
+  })
+
+  test('adds the size class for input-size', async () => {
+    expect(await root('input-size="small"')).toHaveClass('pkt-input-check--small')
+    expect(await root('input-size="xsmall"')).toHaveClass('pkt-input-check--xsmall')
+  })
+
+  test('adds the medium class when medium is set explicitly', async () => {
+    expect(await root('input-size="medium"')).toHaveClass('pkt-input-check--medium')
+  })
+})

package/src/components/radiobutton/radiobutton.ts

@@ -5,6 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { ElementProps } from '@/types/typeUtils'
+import type { TPktInputSize } from 'shared-types'
 
 type Props = ElementProps<
   PktRadioButton,
@@ -27,6 +28,7 @@ export class PktRadioButton extends PktInputElement<Props> {
   @property({ type: Boolean }) hasTile: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
   @property({ type: String, reflect: true }) type: string = 'radio'
+  @property({ type: String, attribute: 'input-size' }) inputSize: TPktInputSize | undefined = undefined
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) optionalTag: boolean = false
   /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
@@ -42,9 +44,6 @@ export class PktRadioButton extends PktInputElement<Props> {
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'defaultChecked') {
-      this._checked = this.defaultChecked
-    }
     if (name === 'checked') {
       this._checked = this.checked === '' || this.checked === 'true' || this.checked === true
     }
@@ -55,7 +54,7 @@ export class PktRadioButton extends PktInputElement<Props> {
     const inputTileClasses = classMap({
       'pkt-input-check__input': true,
       'pkt-input-check__input--tile': this.hasTile,
-      'pkt-input-check__input--tile-disabled': this.disabled && this.hasTile,
+      'pkt-input-check__input--tile-disabled': this.isDisabled && this.hasTile,
     })
 
     const inputCheckBoxClasses = classMap({
@@ -65,7 +64,7 @@ export class PktRadioButton extends PktInputElement<Props> {
 
     const labelClasses = classMap({
       'pkt-input-check__input-label': true,
-      'pkt-input-check__input-label--disabled': this.disabled,
+      'pkt-input-check__input-label--disabled': this.isDisabled,
       'pkt-sr-only': this.hideLabel,
     })
 
@@ -116,13 +115,13 @@ export class PktRadioButton extends PktInputElement<Props> {
     }
 
     return html`
-      <div class="pkt-input-check">
+      <div class="pkt-input-check${this.inputSize ? ` pkt-input-check--${this.inputSize}` : ''}">
         <div class=${inputTileClasses}>
           <input
             id=${this.id + '-internal'}
             class=${inputCheckBoxClasses}
             type="radio"
-            ?disabled=${this.disabled}
+            ?disabled=${this.isDisabled}
             form=""
             name=${this.name + '-internal'}
             ${ref(this.inputRef)}

package/src/components/select/select.ts

@@ -185,7 +185,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
         ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         .size=${this.inputSize}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?hasFieldset=${this.effectiveHasFieldset(false)}
         ?inline=${this.inline}
@@ -216,7 +216,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
             }),
           )}
           aria-labelledby=${ifDefined(this.ariaLabelledby)}
-          ?disabled=${this.disabled}
+          ?disabled=${this.isDisabled}
           id=${this.id + '-input'}
           name=${(this.name || this.id) + '-input'}
           @change=${(e: Event) => {

package/src/components/textarea/textarea.ts

@@ -66,7 +66,7 @@ export class PktTextarea extends PktInputElement<Props> {
       label=${this.label}
       ?counter=${showCounter}
       ?hasFieldset=${this.effectiveHasFieldset(false)}
-      ?disabled=${this.disabled}
+      ?disabled=${this.isDisabled}
       ?hasError=${this.hasError}
       ?inline=${this.inline}
       ?optionalTag=${this.optionalTag}
@@ -110,7 +110,7 @@ export class PktTextarea extends PktInputElement<Props> {
         )}
         rows=${ifDefined(this.rows ?? undefined)}
         cols=${ifDefined(this.cols ?? undefined)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         @input=${(e: InputEvent) => {
           this.value = (e.target as HTMLInputElement).value
           this.onInput()

package/src/components/textinput/textinput.ts

@@ -82,7 +82,7 @@ export class PktTextinput extends PktInputElement<Props> {
         label="${this.label}"
         ?counter=${showCounter}
         ?hasFieldset=${this.effectiveHasFieldset(false)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
@@ -121,7 +121,7 @@ export class PktTextinput extends PktInputElement<Props> {
             ?readonly=${this.readonly}
             size=${this.size || nothing}
             .value=${this.value}
-            ?disabled=${this.disabled}
+            ?disabled=${this.isDisabled}
             aria-invalid=${this.hasError}
             aria-errormessage=${ifDefined(this.hasError ? `${this.id}-input-error` : undefined)}
             aria-describedby=${ifDefined(

package/src/components/timepicker/timepicker.ts

@@ -643,7 +643,7 @@ export class PktTimepicker extends PktInputElement<Props> {
                   .inputSize} pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
                 aria-label=${this.pktStrings.get('timepicker').prevTime}
-                ?disabled=${this.disabled}
+                ?disabled=${this.isDisabled}
                 @click=${() => this._stepTime(-1)}
               >
                 <pkt-icon name="chevron-thin-left"></pkt-icon>
@@ -677,7 +677,7 @@ export class PktTimepicker extends PktInputElement<Props> {
             ? `${this._hours} ${hoursLabel.toLowerCase()}`
             : nothing}
           autocomplete="off"
-          ?disabled=${this.disabled}
+          ?disabled=${this.isDisabled}
           @keydown=${this._handleHoursKeydown}
           @blur=${this._handleHoursBlur}
           @focus=${(e: FocusEvent) => {
@@ -710,7 +710,7 @@ export class PktTimepicker extends PktInputElement<Props> {
             ? `${this._minutes} ${minutesLabel.toLowerCase()}`
             : nothing}
           autocomplete="off"
-          ?disabled=${this.disabled}
+          ?disabled=${this.isDisabled}
           @keydown=${this._handleMinutesKeydown}
           @blur=${this._handleMinutesBlur}
           @focus=${(e: FocusEvent) => {
@@ -736,7 +736,7 @@ export class PktTimepicker extends PktInputElement<Props> {
                 aria-haspopup="listbox"
                 aria-expanded=${this._isOpen ? 'true' : 'false'}
                 aria-controls=${this.id + '-popup'}
-                ?disabled=${this.disabled}
+                ?disabled=${this.isDisabled}
                 @click=${this._togglePopup}
               >
                 <pkt-icon name="clock"></pkt-icon>
@@ -753,7 +753,7 @@ export class PktTimepicker extends PktInputElement<Props> {
                   .inputSize} pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
                 aria-label=${this.pktStrings.get('timepicker').nextTime}
-                ?disabled=${this.disabled}
+                ?disabled=${this.isDisabled}
                 @click=${() => this._stepTime(1)}
               >
                 <pkt-icon name="chevron-thin-right"></pkt-icon>
@@ -774,7 +774,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           max=${ifDefined(this.max ?? undefined)}
           step=${ifDefined(this.step ?? undefined)}
           ?required=${this.required}
-          ?disabled=${this.disabled}
+          ?disabled=${this.isDisabled}
           tabindex="-1"
         />
       </div>
@@ -787,7 +787,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?fullwidth=${this.fullwidth}
         ?hasError=${this.hasError}
         ?hasFieldset=${this.effectiveHasFieldset(false)}

package/dist/checkbox-DIyi1Cya.cjs

@@ -1,40 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./ref-Emu5PNxk.cjs"),r=require("./input-element-Ctkz5fQk.cjs");var i={defaultChecked:!1,indeterminate:!1,hasTile:!1,disabled:!1,hasError:!1,isSwitch:!1,hideLabel:!1,labelPosition:`right`,requiredTag:!1,optionalTag:!1},a=class extends r.t{constructor(...e){super(...e),this.inputRef=n.t(),this.value=``,this.checkHelptext=null,this.defaultChecked=i.defaultChecked,this.hasTile=i.hasTile,this.isSwitch=i.isSwitch,this.labelPosition=i.labelPosition,this.hideLabel=i.hideLabel,this.checked=null,this.indeterminate=i.indeterminate,this.type=`checkbox`,this.tagText=null,this.optionalTag=i.optionalTag,this.requiredTag=i.requiredTag}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,t,n){e===`defaultChecked`&&!this.checked&&(this.checked=this.defaultChecked),e===`checked`&&(this.checked=this.checked===``||this.checked===`true`||this.checked===!0,this.inputRef.value&&(this.inputRef.value.checked=this.checked)),e===`indeterminate`&&(this.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0,this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate)),super.attributeChangedCallback(e,t,n)}firstUpdated(e){this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.firstUpdated(e)}willUpdate(e){super.willUpdate(e),e.has(`defaultChecked`)&&!this.checked&&(this.checked=this.defaultChecked)}updated(e){e.has(`checked`)&&this.inputRef.value&&(this.inputRef.value.checked=this.checked===``||this.checked===`true`||this.checked===!0),e.has(`indeterminate`)&&this.inputRef.value&&(this.inputRef.value.indeterminate=this.indeterminate===``||this.indeterminate===`true`||this.indeterminate===!0),super.updated(e)}render(){let r=t.t({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),i=t.t({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),a=t.t({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition===`left`,"pkt-input-check__input-label--right":this.labelPosition===`right`,"pkt-sr-only":this.hideLabel}),o=`pkt-tag pkt-tag--small pkt-tag--thin-text`,s=this.pktStrings.get(`forms`),c=()=>e._`
-        ${this.tagText?e._`<span class=${o+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
-        ${this.optionalTag?e._`<span class=${o+` pkt-tag--blue-light`}
-                >${this.optionalText??s.optional}</span
-              >`:e.h}
-        ${this.requiredTag?e._`<span class=${o+` pkt-tag--beige`}
-                >${this.requiredText??s.required}</span
-              >`:e.h}
-      `,l=this.id+`-check-label`,u=this.id+`-check-helptext`,d=()=>e._`
-        <label class=${a} for=${this.id+`-internal`}>
-          <span id=${l}>${this.label} ${c()}</span>
-          ${this.checkHelptext?e._`<div id=${u} class="pkt-input-check__input-helptext">
-                  ${this.checkHelptext}
-                </div>`:e.h}
-        </label>
-      `;return e._`
-      <div class="pkt-input-check">
-        <div class=${r}>
-          ${this.labelPosition===`left`?d():e.h}
-          <input
-            id=${this.id+`-internal`}
-            class=${i}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name+`-internal`}
-            ${n.n(this.inputRef)}
-            @change=${this.handleChange}
-            @input=${this.handleInput}
-            @click=${this.handleClick}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch?`switch`:`checkbox`}
-            aria-labelledby=${this.label?l:e.h}
-            aria-describedby=${this.checkHelptext?u:e.h}
-          />
-          ${this.labelPosition===`right`?d():e.h}
-        </div>
-      </div>
-    `}handleInput(e){e.stopImmediatePropagation(),this.onInput()}handleClick(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1}handleChange(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),!1;this.toggleChecked(e)}toggleChecked(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}let t=e.target;if(t&&t.disabled){e.preventDefault(),e.stopImmediatePropagation();return}e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(`:checked`),this.valueChecked(this.checked))}};e.n([e.u({type:String,reflect:!0})],a.prototype,`value`,void 0),e.n([e.u({type:String})],a.prototype,`checkHelptext`,void 0),e.n([e.u({type:Boolean})],a.prototype,`defaultChecked`,void 0),e.n([e.u({type:Boolean})],a.prototype,`hasTile`,void 0),e.n([e.u({type:Boolean})],a.prototype,`isSwitch`,void 0),e.n([e.u({type:String})],a.prototype,`labelPosition`,void 0),e.n([e.u({type:Boolean})],a.prototype,`hideLabel`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`checked`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`indeterminate`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`type`,void 0),e.n([e.u({type:String})],a.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],a.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],a.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],a.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],a.prototype,`requiredText`,void 0);try{e.d(`pkt-checkbox`)(a)}catch{console.warn(`Forsøker å definere <pkt-checkbox>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/input-element-Ctkz5fQk.cjs

@@ -1 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./format-B8meU8Tm.cjs"),n=require("./element-with-slot-D7sTqOr3.cjs"),r=require("./booleanish-BF8l4scU.cjs"),i=require("./utils-63cRpWut.cjs");var a=new WeakMap,o=new WeakMap,s=new WeakMap,c=new WeakMap,l=new WeakMap,u=new WeakMap,d=new WeakMap,f=new WeakMap,p=new WeakMap,m=new WeakMap,h=new WeakMap,g=new WeakMap,_=new WeakMap,v=new WeakMap,y=new WeakMap,b=(e,t,n)=>{e.getAttribute(t)!==n&&e.setAttribute(t,n)},x=(e,t)=>{e.toggleAttribute(`internals-disabled`,t),t?b(e,`aria-disabled`,`true`):e.removeAttribute(`aria-disabled`),e.formDisabledCallback&&e.formDisabledCallback.apply(e,[t])},S=e=>{s.get(e).forEach(e=>{e.remove()}),s.set(e,[])},C=(e,t)=>{let n=document.createElement(`input`);return n.type=`hidden`,n.name=e.getAttribute(`name`),e.after(n),s.get(t).push(n),n},w=(e,t)=>{if(t.length){let n=Array.from(t);n.forEach(t=>t.addEventListener(`click`,e.click.bind(e)));let[r]=n,i=r.id;r.id||=(i=`${r.htmlFor}_Label`,i),b(e,`aria-labelledby`,i)}},T=e=>{let t=Array.from(e.elements).filter(e=>!e.tagName.includes(`-`)&&e.validity).map(e=>e.validity.valid),n=f.get(e)||[],r=Array.from(n).filter(e=>e.isConnected).map(e=>c.get(e).validity.valid),i=[...t,...r].includes(!1);e.toggleAttribute(`internals-invalid`,i),e.toggleAttribute(`internals-valid`,!i)},ee=e=>{T(O(e.target))},E=e=>{T(O(e.target))},te=e=>{let t=[`button[type=submit]`,`input[type=submit]`,`button:not([type])`].map(e=>`${e}:not([disabled])`).map(t=>`${t}:not([form])${e.id?`,${t}[form='${e.id}']`:``}`).join(`,`);e.addEventListener(`click`,n=>{if(n.target.closest(t)){let t=f.get(e);if(e.noValidate)return;t.size&&Array.from(t).reverse().map(e=>c.get(e).reportValidity()).includes(!1)&&n.preventDefault()}})},ne=e=>{let t=f.get(e.target);t&&t.size&&t.forEach(e=>{e.constructor.formAssociated&&e.formResetCallback&&e.formResetCallback.apply(e)})},D=(e,t,n)=>{if(t){let r=f.get(t);if(r)r.add(e);else{let n=new Set;n.add(e),f.set(t,n),te(t),t.addEventListener(`reset`,ne),t.addEventListener(`input`,ee),t.addEventListener(`change`,E)}u.set(t,{ref:e,internals:n}),e.constructor.formAssociated&&e.formAssociatedCallback&&setTimeout(()=>{e.formAssociatedCallback.apply(e,[t])},0),T(t)}},O=e=>{let t=e.parentNode;return t&&t.tagName!==`FORM`&&(t=O(t)),t},k=(e,t,n=DOMException)=>{if(!e.constructor.formAssociated)throw new n(t)},A=(e,t,n)=>{let r=f.get(e);return r&&r.size&&r.forEach(e=>{c.get(e)[n]()||(t=!1)}),t},j=e=>{let t=!1;if(e.constructor.formAssociated){let n=c.get(e);n===void 0&&(e.attachInternals(),n=c.get(e),t=!0);let{labels:r,form:i}=n;w(e,r),D(e,i,n)}return t};function M(){return typeof MutationObserver<`u`}var N={ariaAtomic:`aria-atomic`,ariaAutoComplete:`aria-autocomplete`,ariaBrailleLabel:`aria-braillelabel`,ariaBrailleRoleDescription:`aria-brailleroledescription`,ariaBusy:`aria-busy`,ariaChecked:`aria-checked`,ariaColCount:`aria-colcount`,ariaColIndex:`aria-colindex`,ariaColIndexText:`aria-colindextext`,ariaColSpan:`aria-colspan`,ariaCurrent:`aria-current`,ariaDescription:`aria-description`,ariaDisabled:`aria-disabled`,ariaExpanded:`aria-expanded`,ariaHasPopup:`aria-haspopup`,ariaHidden:`aria-hidden`,ariaInvalid:`aria-invalid`,ariaKeyShortcuts:`aria-keyshortcuts`,ariaLabel:`aria-label`,ariaLevel:`aria-level`,ariaLive:`aria-live`,ariaModal:`aria-modal`,ariaMultiLine:`aria-multiline`,ariaMultiSelectable:`aria-multiselectable`,ariaOrientation:`aria-orientation`,ariaPlaceholder:`aria-placeholder`,ariaPosInSet:`aria-posinset`,ariaPressed:`aria-pressed`,ariaReadOnly:`aria-readonly`,ariaRelevant:`aria-relevant`,ariaRequired:`aria-required`,ariaRoleDescription:`aria-roledescription`,ariaRowCount:`aria-rowcount`,ariaRowIndex:`aria-rowindex`,ariaRowIndexText:`aria-rowindextext`,ariaRowSpan:`aria-rowspan`,ariaSelected:`aria-selected`,ariaSetSize:`aria-setsize`,ariaSort:`aria-sort`,ariaValueMax:`aria-valuemax`,ariaValueMin:`aria-valuemin`,ariaValueNow:`aria-valuenow`,ariaValueText:`aria-valuetext`,role:`role`},P=(e,t)=>{for(let n in N){t[n]=null;let r=null,i=N[n];Object.defineProperty(t,n,{get(){return r},set(n){r=n,e.isConnected?b(e,i,n):m.set(e,t)}})}},re=(e,t)=>{s.set(t,[]),R.observe?.(e,L)};function F(e){let t=c.get(e),{form:n}=t;D(e,n,t),w(e,t.labels)}var I=(e,t=!1)=>{let n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode(e){return c.has(e)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),r=n.nextNode(),i=!t||e.disabled;for(;r;)r.formDisabledCallback&&i&&x(r,e.disabled),r=n.nextNode()},L={attributes:!0,attributeFilter:[`disabled`,`name`]},R=M()?new MutationObserver(e=>{for(let t of e){let e=t.target;if(t.attributeName===`disabled`&&(e.constructor.formAssociated?x(e,e.hasAttribute(`disabled`)):e.localName===`fieldset`&&I(e)),t.attributeName===`name`&&e.constructor.formAssociated){let t=c.get(e),n=p.get(e);t.setFormValue(n)}}}):{};function z(e){e.forEach(e=>{let{addedNodes:t,removedNodes:n}=e,r=Array.from(t),i=Array.from(n);r.forEach(e=>{if(c.has(e)&&e.constructor.formAssociated&&F(e),m.has(e)){let t=m.get(e);Object.keys(N).filter(e=>t[e]!==null).forEach(n=>{b(e,N[n],t[n])}),m.delete(e)}if(y.has(e)){let t=y.get(e);b(e,`internals-valid`,t.validity.valid.toString()),b(e,`internals-invalid`,(!t.validity.valid).toString()),b(e,`aria-invalid`,(!t.validity.valid).toString()),y.delete(e)}if(e.localName===`form`){let t=f.get(e),n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode(e){return c.has(e)&&e.constructor.formAssociated&&!(t&&t.has(e))?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}}),r=n.nextNode();for(;r;)F(r),r=n.nextNode()}e.localName===`fieldset`&&(R.observe?.(e,L),I(e,!0))}),i.forEach(e=>{let t=c.get(e);t&&s.get(t)&&S(t),d.has(e)&&d.get(e).disconnect()})})}function ie(e){e.forEach(e=>{let{removedNodes:t}=e;t.forEach(t=>{let n=_.get(e.target);c.has(t)&&j(t),n.disconnect()})})}var ae=e=>{let t=new MutationObserver(ie);window?.ShadyDOM?.inUse&&e.mode&&e.host&&(e=e.host),t.observe?.(e,{childList:!0}),_.set(e,t)};M()&&new MutationObserver(z);var B={childList:!0,subtree:!0},oe=class{constructor(){this.badInput=!1,this.customError=!1,this.patternMismatch=!1,this.rangeOverflow=!1,this.rangeUnderflow=!1,this.stepMismatch=!1,this.tooLong=!1,this.tooShort=!1,this.typeMismatch=!1,this.valid=!0,this.valueMissing=!1,Object.seal(this)}},se=e=>(e.badInput=!1,e.customError=!1,e.patternMismatch=!1,e.rangeOverflow=!1,e.rangeUnderflow=!1,e.stepMismatch=!1,e.tooLong=!1,e.tooShort=!1,e.typeMismatch=!1,e.valid=!0,e.valueMissing=!1,e),ce=(e,t,n)=>(e.valid=le(t),Object.keys(t).forEach(n=>e[n]=t[n]),n&&T(n),e),le=e=>{let t=!0;for(let n in e)n!==`valid`&&e[n]!==!1&&(t=!1);return t},V=new WeakMap;function H(e,t){e.toggleAttribute(t,!0),e.part&&e.part.add(t)}var U=class extends Set{static get isPolyfilled(){return!0}constructor(e){if(super(),!e||!e.tagName||e.tagName.indexOf(`-`)===-1)throw TypeError(`Illegal constructor`);V.set(this,e)}add(e){if(!/^--/.test(e)||typeof e!=`string`)throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${e} must start with '--'.`);let t=super.add(e),n=V.get(this),r=`state${e}`;return n.isConnected?H(n,r):setTimeout(()=>{H(n,r)}),t}clear(){for(let[e]of this.entries())this.delete(e);super.clear()}delete(e){let t=super.delete(e),n=V.get(this);return n.isConnected?(n.toggleAttribute(`state${e}`,!1),n.part&&n.part.remove(`state${e}`)):setTimeout(()=>{n.toggleAttribute(`state${e}`,!1),n.part&&n.part.remove(`state${e}`)}),t}},ue=function(e,t,n,r,i){if(r===`m`)throw TypeError(`Private method is not writable`);if(r===`a`&&!i)throw TypeError(`Private accessor was defined without a setter`);if(typeof t==`function`?e!==t||!i:!t.has(e))throw TypeError(`Cannot write private member to an object whose class did not declare it`);return r===`a`?i.call(e,n):i?i.value=n:t.set(e,n),n},W=function(e,t,n,r){if(n===`a`&&!r)throw TypeError(`Private accessor was defined without a getter`);if(typeof t==`function`?e!==t||!r:!t.has(e))throw TypeError(`Cannot read private member from an object whose class did not declare it`);return n===`m`?r:n===`a`?r.call(e):r?r.value:t.get(e)},G,de=class{constructor(e){G.set(this,void 0),ue(this,G,e,`f`);for(let t=0;t<e.length;t++){let n=e[t];this[t]=n,n.hasAttribute(`name`)&&(this[n.getAttribute(`name`)]=n)}Object.freeze(this)}get length(){return W(this,G,`f`).length}[(G=new WeakMap,Symbol.iterator)](){return W(this,G,`f`)[Symbol.iterator]()}item(e){return this[e]==null?null:this[e]}namedItem(e){return this[e]==null?null:this[e]}};function fe(){let e=HTMLFormElement.prototype.checkValidity;HTMLFormElement.prototype.checkValidity=n;let t=HTMLFormElement.prototype.reportValidity;HTMLFormElement.prototype.reportValidity=r;function n(...t){let n=e.apply(this,t);return A(this,n,`checkValidity`)}function r(...e){let n=t.apply(this,e);return A(this,n,`reportValidity`)}let{get:i}=Object.getOwnPropertyDescriptor(HTMLFormElement.prototype,`elements`);Object.defineProperty(HTMLFormElement.prototype,"elements",{get(...e){let t=i.call(this,...e),n=Array.from(f.get(this)||[]);return n.length===0?t:new de(Array.from(t).concat(n).sort((e,t)=>e.compareDocumentPosition?e.compareDocumentPosition(t)&2?1:-1:0))}})}var K=class{static get isPolyfilled(){return!0}constructor(e){if(!e||!e.tagName||e.tagName.indexOf(`-`)===-1)throw TypeError(`Illegal constructor`);let t=e.getRootNode(),n=new oe;this.states=new U(e),a.set(this,e),o.set(this,n),c.set(e,this),P(e,this),re(e,this),Object.seal(this),t instanceof DocumentFragment&&ae(t)}checkValidity(){let e=a.get(this);if(k(e,`Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element.`),!this.willValidate)return!0;let t=o.get(this);if(!t.valid){let t=new Event(`invalid`,{bubbles:!1,cancelable:!0,composed:!1});e.dispatchEvent(t)}return t.valid}get form(){let e=a.get(this);k(e,`Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.`);let t;return e.constructor.formAssociated===!0&&(t=O(e)),t}get labels(){let e=a.get(this);k(e,`Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.`);let t=e.getAttribute(`id`),n=e.getRootNode();return n&&t?n.querySelectorAll(`[for="${t}"]`):[]}reportValidity(){let e=a.get(this);if(k(e,`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`),!this.willValidate)return!0;let t=this.checkValidity(),n=g.get(this);if(n&&!e.constructor.formAssociated)throw new DOMException(`Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.`);return!t&&n&&(e.focus(),n.focus()),t}setFormValue(e){let t=a.get(this);if(k(t,`Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`),S(this),e!=null&&!(e instanceof FormData)){if(t.getAttribute(`name`)){let n=C(t,this);n.value=e}}else e!=null&&e instanceof FormData&&Array.from(e).reverse().forEach(([e,n])=>{if(typeof n==`string`){let r=C(t,this);r.name=e,r.value=n}});p.set(t,e)}setValidity(e,t,n){let r=a.get(this);if(k(r,`Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element.`),!e)throw TypeError(`Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.`);g.set(this,n);let i=o.get(this),s={};for(let t in e)s[t]=e[t];Object.keys(s).length===0&&se(i);let c={...i,...s};delete c.valid;let{valid:u}=ce(i,c,this.form);if(!u&&!t)throw new DOMException(`Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.`);l.set(this,u?``:t),r.isConnected?(r.toggleAttribute(`internals-invalid`,!u),r.toggleAttribute(`internals-valid`,u),b(r,`aria-invalid`,`${!u}`)):y.set(r,this)}get shadowRoot(){let e=a.get(this);return h.get(e)||null}get validationMessage(){return k(a.get(this),`Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element.`),l.get(this)}get validity(){return k(a.get(this),`Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element.`),o.get(this)}get willValidate(){let e=a.get(this);return k(e,`Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element.`),!(e.matches(`:disabled`)||e.disabled||e.hasAttribute(`disabled`)||e.hasAttribute(`readonly`))}};function pe(){if(typeof window>`u`||!window.ElementInternals||!HTMLElement.prototype.attachInternals)return!1;class e extends HTMLElement{constructor(){super(),this.internals=this.attachInternals()}}let t=`element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g,``)}`;customElements.define(t,e);let n=new e;return[`shadowRoot`,`form`,`willValidate`,`validity`,`validationMessage`,`labels`,`setFormValue`,`setValidity`,`checkValidity`,`reportValidity`].every(e=>e in n.internals)}var q=!1,J=!1;function Y(e){J||(J=!0,window.CustomStateSet=U,e&&(HTMLElement.prototype.attachInternals=function(...t){let n=e.call(this,t);return n.states=new U(this),n}))}function me(e=!0){let t=!1;if(!q){if(q=!0,typeof window<`u`&&(window.ElementInternals=K),typeof CustomElementRegistry<`u`){let e=CustomElementRegistry.prototype.define;CustomElementRegistry.prototype.define=function(n,r,i){if(r.formAssociated){let e=r.prototype.connectedCallback;r.prototype.connectedCallback=function(){v.has(this)||(v.set(this,!0),this.hasAttribute(`disabled`)&&x(this,!0)),e?.apply(this),t=j(this)}}e.call(this,n,r,i)}}if(typeof HTMLElement<`u`&&(HTMLElement.prototype.attachInternals=function(){if(!this.tagName)return{};if(this.tagName.indexOf(`-`)===-1)throw Error(`Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.`);if(c.has(this)&&!t)throw new DOMException(`DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.`);return new K(this)}),typeof Element<`u`){function n(...t){let n=e.apply(this,t);if(h.set(this,n),M()){let e=new MutationObserver(z);window.ShadyDOM?e.observe(this,B):e.observe(n,B),d.set(this,e)}return n}let e=Element.prototype.attachShadow;Element.prototype.attachShadow=n}M()&&typeof document<`u`&&new MutationObserver(z).observe(document.documentElement,B),typeof HTMLFormElement<`u`&&fe(),(e||typeof window<`u`&&!window.CustomStateSet)&&Y()}}customElements.polyfillWrapFlushCallback||(pe()?typeof window<`u`&&!window.CustomStateSet&&Y(HTMLElement.prototype.attachInternals):me(!1));var X=`on`,Z=`--checked`,Q=`,`,$=class extends n.t{static get formAssociated(){return!0}get form(){let e=this.getAttribute(`form`);if(e!==null){if(!e)return null;let t=this.getRootNode(),n=typeof t.getElementById==`function`?t.getElementById(e):this.ownerDocument?.getElementById(e);return n instanceof HTMLFormElement?n:null}return this.internals?.form??this.closest(`form`)}get ariaDescribedBy(){return this.ariaDescribedby}set ariaDescribedBy(e){this.ariaDescribedby=e}effectiveCounter(e){return this.counter??e}effectiveHasFieldset(e){return this.hasFieldset??e}constructor(){super(),this.defaultValue=null,this.disabled=!1,this.readonly=!1,this.required=!1,this.max=null,this.maxlength=null,this.min=null,this.minlength=null,this.step=null,this.ariaDescribedby=null,this.ariaLabelledby=null,this.name=``,this.pattern=null,this.placeholder=null,this.id=i.n(),this.counter=null,this.hasError=!1,this.inline=!1,this.hasFieldset=null,this.optionalTag=!1,this.requiredTag=!1,this.skipForwardTestid=!1,this.useWrapper=!0,this.fullwidth=!1,this.counterMaxLength=0,this.errorMessage=``,this.helptext=``,this.helptextDropdown=``,this.helptextDropdownButton=null,this.label=null,this.tagText=null,this.inputSize=`medium`,this.dataTestid=``,this.touched=!1,this._initialized=!1,this._didInitDerivedState=!1,this.internals=this.attachInternals()}manageValidity(e){if(!e){console.warn(`manageValidity called without valid input element`);return}let n=this.pktStrings.get(`validation`);this.required&&!this.value?this.internals.setValidity({valueMissing:!0},n.valueMissing,e):e.validity?.typeMismatch||e.validity?.badInput?this.internals.setValidity({typeMismatch:!0},n.typeMismatch,e):e.validity?.patternMismatch?this.internals.setValidity({patternMismatch:!0},n.patternMismatch,e):e.validity?.tooShort||this.minlength&&this.minlength>0&&this.value.length<this.minlength?this.internals.setValidity({tooShort:!0},n.tooShort,e):e.validity?.tooLong||this.maxlength&&this.maxlength>0&&this.value.length>this.maxlength?this.internals.setValidity({tooLong:!0},n.tooLong,e):e.validity?.rangeUnderflow?this.internals.setValidity({rangeUnderflow:!0},this.min?t.t(n.rangeUnderflowMin,{min:this.min.toString()}):n.rangeUnderflow,e):e.validity?.stepMismatch?this.internals.setValidity({stepMismatch:!0},n.typeMismatch,e):e.validity?.rangeOverflow?this.internals.setValidity({rangeOverflow:!0},this.max?t.t(n.rangeOverflowMax,{max:this.max.toString()}):n.rangeOverflow,e):e.validity?.customError?this.internals.setValidity({customError:!0},e.validationMessage,e):this.internals.setValidity({})}setFormValue(e){if(this.internals){if(Array.isArray(e)){let t=new FormData;e.forEach(e=>{t.append(this.name,e)}),this.internals.setFormValue(t)}else this.internals.setFormValue(e)}}radioGroupMembers(){let e=this.getRootNode();if(typeof e.querySelectorAll!=`function`)return[];let t=this.form;return Array.from(e.querySelectorAll(`pkt-radiobutton, input[type="radio"]`)).filter(e=>e!==this&&e.getAttribute(`name`)===this.name&&e.form===t)}coordinateRadioGroup(){!this.name||this.type!==`radio`||this.radioGroupMembers().forEach(e=>{if(e.getAttribute(`value`)===this.value)return;let t=e;t.checked&&(t.checked=!1,t.internals&&(t.internals.setFormValue(null),t.internals.states?.delete(Z)))})}valueChecked(e){if(this.touched){if(this.type===`radio`&&this.coordinateRadioGroup(),typeof e==`string`?(this.checked=e===`true`,this.internals.ariaChecked=String(e===`true`)):typeof e==`boolean`&&(this.checked=e,this.internals.ariaChecked=String(e)),this.checked){let e=(typeof this.value==`string`?this.value:``)||X;this.internals.setFormValue(e),this.internals.states.add(Z)}else this.internals.setFormValue(null),this.internals.states.delete(Z);this.dispatchChangeEvents(this.checked),this.internals.reportValidity()}}valueChanged(e,t){let n=e;if(typeof n==`number`||typeof n==`boolean`)e=String(n);else if(n!=null&&typeof n!=`string`&&!Array.isArray(n)){let e=typeof n==`object`?n?.constructor?.name??`object`:typeof n;console.warn(`${this.localName}: value må være en streng eller et tall, men fikk ${e}. Verdien ignoreres. For dato-/tidsfelt, send en ISO-formatert streng (f.eks. "2026-07-09" eller "13:45").`)}(t!==this.value||t!==this._value)&&(typeof e==`string`?((this.multiple||this.range)&&e.includes(Q)&&(e=e.split(Q)),this.value=e,this._value=Array.isArray(e)?e:[e]):Array.isArray(e)?(this.value=this.multiple||this.range?e:e[0],this._value=e):(this.value=``,this._value=[]),(!this.value||this.value.length===0)&&t&&t.length!==0?this.clearInputValue():this.value&&this.value.toString()!==t?.toString()&&this.onChange(this.value))}dispatchChangeEvents(e){this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`value-change`,{detail:e,bubbles:!0,composed:!0}))}clearInputValue(){let e=this.multiple||this.range?[]:``;this.value=e,this.setFormValue(e),this.dispatchChangeEvents(e)}onFocus(){this.dispatchEvent(new FocusEvent(`focus`,{bubbles:!0,composed:!0}))}onBlur(){this.dispatchEvent(new FocusEvent(`blur`,{bubbles:!0,composed:!0}))}onInput(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0}))}normalizeValue(e){return(this.range||this.multiple)&&typeof e==`string`&&e.includes(Q)?e.split(Q):!this.multiple&&!this.range&&Array.isArray(e)?e[0]||``:e}validate(){this.inputRef?.value&&this.manageValidity(this.inputRef.value),this.inputRefTo?.value&&this.manageValidity(this.inputRefTo.value)}onChange(e){if(this.touched=!0,typeof e!=`string`&&!Array.isArray(e))return;let t=this.normalizeValue(e);this.setFormValue(t),this.validate(),this._initialized&&this.dispatchChangeEvents(t)}formResetCallback(){if(this.touched=!1,this._options&&this._options.length&&this._options.forEach(e=>{`selected`in e&&(e.selected=!1)}),this.checked!==void 0)this.checked=!1,this.internals.ariaChecked=`false`,this.internals.setFormValue(``),this.inputRef?.value&&`checked`in this.inputRef.value&&(this.inputRef.value.checked=!1),this.valueChecked(this.checked);else{this.internals.setFormValue(``);let e=this.defaultValue||(this.multiple||this.range?[]:``);this.value=e,this._value=Array.isArray(e)?e:[e],this.valueChanged(this.value,null)}this.internals.ariaInvalid=`false`}updated(e){super.updated(e),e.has(`dataTestid`)&&this.dataTestid&&this.inputRef.value&&(this.skipForwardTestid?this.hasAttribute(`data-testid`)||this.setAttribute(`data-testid`,this.dataTestid):(this.inputRef.value.dataset.testid=this.dataTestid,this.removeAttribute(`data-testid`)))}willUpdate(e){super.willUpdate(e),!this._didInitDerivedState&&(this._didInitDerivedState=!0,this.defaultChecked&&(this.checked=!0),this.id&&!this.name&&(this.name=this.id),this.value&&this.defaultValue===null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null))}firstUpdated(e){if(super.firstUpdated(e),this.value&&this.defaultValue===null&&(this.defaultValue=this.value),this.defaultValue!==null&&!this.value&&this.valueChanged(this.defaultValue,null),this.defaultChecked&&(this.internals.ariaChecked=`true`),this.required&&(this.internals.ariaRequired=`true`),this.disabled&&(this.internals.ariaDisabled=`true`),this.checked!==void 0){let e=this.checked===``||this.checked===`true`||this.checked===!0;this.internals.ariaChecked=String(e);let t=e?(typeof this.value==`string`?this.value:``)||X:null;this.internals.setFormValue(t)}else this.setFormValue(this.value);this.inputRef&&this.inputRef.value&&(this.inputRef.value.setAttribute(`form`,``),this.manageValidity(this.inputRef.value)),this.inputRefTo&&this.inputRefTo.value&&(this.inputRefTo.value.setAttribute(`form`,``),this.manageValidity(this.inputRefTo.value)),this.updateComplete.then(()=>{this._initialized=!0})}};e.n([e.u({type:Boolean,reflect:!0})],$.prototype,`checked`,void 0),e.n([e.u({type:Boolean})],$.prototype,`defaultChecked`,void 0),e.n([e.u({type:Boolean})],$.prototype,`multiple`,void 0),e.n([e.u({type:Boolean})],$.prototype,`range`,void 0),e.n([e.u({type:String,reflect:!0})],$.prototype,`type`,void 0),e.n([e.u()],$.prototype,`defaultValue`,void 0),e.n([e.u({type:Boolean,reflect:!0})],$.prototype,`disabled`,void 0),e.n([e.u({type:Boolean,reflect:!0})],$.prototype,`readonly`,void 0),e.n([e.u({type:Boolean,reflect:!0})],$.prototype,`required`,void 0),e.n([e.u({reflect:!0,converter:{fromAttribute:e=>e,toAttribute:e=>e?.toString()??null}})],$.prototype,`max`,void 0),e.n([e.u({type:Number,reflect:!0})],$.prototype,`maxlength`,void 0),e.n([e.u({reflect:!0,converter:{fromAttribute:e=>e,toAttribute:e=>e?.toString()??null}})],$.prototype,`min`,void 0),e.n([e.u({type:Number,reflect:!0})],$.prototype,`minlength`,void 0),e.n([e.u({type:Number,reflect:!0})],$.prototype,`step`,void 0),e.n([e.u({type:String,attribute:`aria-describedby`})],$.prototype,`ariaDescribedby`,void 0),e.n([e.u({type:String,attribute:`aria-labelledby`})],$.prototype,`ariaLabelledby`,void 0),e.n([e.u({type:String,reflect:!0})],$.prototype,`name`,void 0),e.n([e.u({type:String,reflect:!0})],$.prototype,`pattern`,void 0),e.n([e.u({type:String,reflect:!0})],$.prototype,`placeholder`,void 0),e.n([e.u({type:String,reflect:!0})],$.prototype,`id`,void 0),e.n([e.u({type:Boolean,converter:r.n})],$.prototype,`counter`,void 0),e.n([e.u({type:Boolean})],$.prototype,`hasError`,void 0),e.n([e.u({type:Boolean})],$.prototype,`inline`,void 0),e.n([e.u({type:Boolean,converter:r.n})],$.prototype,`hasFieldset`,void 0),e.n([e.u({type:Boolean})],$.prototype,`optionalTag`,void 0),e.n([e.u({type:Boolean})],$.prototype,`requiredTag`,void 0),e.n([e.u({type:Boolean})],$.prototype,`skipForwardTestid`,void 0),e.n([e.u({type:Boolean,reflect:!0,converter:r.t})],$.prototype,`useWrapper`,void 0),e.n([e.u({type:Boolean,reflect:!0})],$.prototype,`fullwidth`,void 0),e.n([e.u({type:Number})],$.prototype,`counterMaxLength`,void 0),e.n([e.u({type:String})],$.prototype,`errorMessage`,void 0),e.n([e.u({type:String})],$.prototype,`helptext`,void 0),e.n([e.u({type:String})],$.prototype,`helptextDropdown`,void 0),e.n([e.u({type:String,reflect:!1})],$.prototype,`helptextDropdownButton`,void 0),e.n([e.u({type:String})],$.prototype,`label`,void 0),e.n([e.u({type:String,reflect:!1})],$.prototype,`optionalText`,void 0),e.n([e.u({type:String,reflect:!1})],$.prototype,`requiredText`,void 0),e.n([e.u({type:String,reflect:!1})],$.prototype,`tagText`,void 0),e.n([e.u({type:String,attribute:`input-size`})],$.prototype,`inputSize`,void 0),e.n([e.u({type:String,attribute:`data-testid`})],$.prototype,`dataTestid`,void 0),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return $}});

package/dist/input-wrapper-Cf__-4E-.cjs

@@ -1,59 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./format-B8meU8Tm.cjs"),n=require("./element-with-slot-D7sTqOr3.cjs"),r=require("./booleanish-BF8l4scU.cjs");require("./alert-IaZzEgyI.cjs");const i=require("./icon-Dnv6LtPC.cjs"),a=require("./if-defined-2mkIDgOm.cjs"),o=require("./utils-63cRpWut.cjs");require("./helptext-BCkwSz1m.cjs");const s=require("./focus-modality-controller-C1ocyv2J.cjs");var c=e=>{let t=[];return e.hasHelptext&&t.push(`${e.id}-helptext`),e.hasCounter&&t.push(`${e.id}-counter-status`),e.ariaDescribedby&&t.push(e.ariaDescribedby),t.length?t.join(` `):void 0},l=e=>`${e}-counter-status`,u=(e,t)=>!!t&&t>0&&(e??0)>t,d={name:`pkt-input-wrapper`,react:`PktInputWrapper`,"css-class":`pkt-inputwrapper`,isElement:!0,isPureReact:!0,"dark-mode":!0,events:{toggleHelpText:{description:`Event for å vise eller skjule hjelpetekst i dropdown`}},slots:{default:{description:`Innholdet i input-wrapperen, som kan være et skjemaelement eller en annen komponent`}},props:{forId:{name:`For ID`,description:`Id-en til skjemaelementet som dette wrapper rundt`,type:`string`,required:!0,category:`tech`},label:{name:`Merkelapp`,description:`Merkelapp for skjemaelementet`,type:`string`,required:!0,category:`contents`},helptext:{name:`Hjelpetekst`,description:`Hjelpetekst for skjemaelementet`,type:`string`,category:`contents`},helptextDropdown:{name:`Hjelpetekst i dropdown`,description:`Hjelpetekst som vises i ekspanderende felt`,type:`string`,category:`contents`},helptextDropdownButton:{name:`Tekst i hjelpetekst-knapp`,description:`Tekst som vises i knappen for å vise hjelpetekst i dropdown`,default:`Les mer <span class='pkt-sr-only'>om feltet</span>`,type:`string`,category:`contents`},ariaDescribedby:{name:`aria-describedby`,description:`Id-en til elementet som beskriver skjemaelementet`,type:`string`,category:`accessibility`},counter:{name:`Teller`,description:`Teller for antall tegn i skjemaelementet`,type:`boolean`,default:!1,category:`ui`},counterCurrent:{name:`Tellerverdi`,description:`Tellerens nåværende verdi`,type:`number`,category:`ui`,showIf:{counter:!0}},counterMaxLength:{name:`Maks tegn i teller`,description:`Maks antall tegn som kan skrives i skjemaelementet`,type:`number`,category:`ui`,showIf:{counter:!0}},counterPosition:{name:`Tellerplassering`,description:`Telleren sin plassering i forhold til elementet`,type:[`top`,`bottom`],default:`bottom`,category:`ui`,showIf:{counter:!0}},optionalTag:{name:`Vise valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,type:`boolean`,default:!1,category:`ui`},optionalText:{name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,type:`string`,default:`Valgfritt`,category:`contents`},requiredTag:{name:`Vise påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,type:`boolean`,default:!1,category:`ui`},requiredText:{name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,type:`string`,default:`Må fylles ut`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},hasError:{name:`Feil`,description:`Indikerer at skjemaelementet har en feil`,type:`boolean`,default:!1,category:`ui`},errorMessage:{name:`Feilmelding`,description:`Feilmelding som vises når skjemaelementet har en feil`,type:`string`,category:`contents`},disabled:{name:`Deaktivert`,description:`Indikerer at skjemaelementet er deaktivert`,type:`boolean`,default:!1,category:`tech`},inline:{name:`Inline`,description:`Indikerer at skjemaelementet skal flyte sammen med sidens innhold`,type:`boolean`,default:!1,category:`ui`},hasFieldset:{name:`Er fieldset`,description:`Indikerer at innholdet er et fieldset`,type:`boolean`,default:!1,category:`ui`},useWrapper:{name:`Bruk wrapper`,description:`Indikerer om skjemaelementet skal bruke en wrapper`,type:`boolean`,displayAsFalse:!0,default:!0,category:`ui`},role:{name:`Rolle`,description:`ARIA-rolle på wrapperen. Settes ikke som standard. Bruk hasFieldset for reelle grupper.`,type:`string`,default:null,category:`accessibility`},size:{name:`Størrelse`,description:`Visuell størrelse. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-wrapper-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`}}},f=class extends n.t{constructor(...e){super(...e),this.forId=o.n(),this.label=``,this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=d.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition=`bottom`,this.optionalTag=d.props.optionalTag.default,this.requiredTag=d.props.requiredTag.default,this.tagText=null,this.hasError=d.props.hasError.default,this.errorMessage=``,this.disabled=d.props.disabled.default,this.inline=d.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=d.props.hasFieldset.default,this.role=null,this.useWrapper=d.props.useWrapper.default,this.size=`medium`,this.focusModality=new s.t(this)}updated(e){super.updated(e),this.classList.add(`pkt-inputwrapper`),this.classList.toggle(`pkt-inputwrapper--error`,this.hasError),this.classList.toggle(`pkt-inputwrapper--disabled`,this.disabled),this.classList.toggle(`pkt-inputwrapper--inline`,this.inline),this.classList.toggle(`pkt-inputwrapper--medium`,this.size===`medium`),this.classList.toggle(`pkt-inputwrapper--small`,this.size===`small`),this.classList.toggle(`pkt-inputwrapper--xsmall`,this.size===`xsmall`),this.role?this.setAttribute(`aria-labelledby`,`${this.forId}-label`):this.removeAttribute(`aria-labelledby`)}render(){let r=`pkt-tag pkt-tag--small pkt-tag--thin-text`,o=!!this.helptext||this.hasSlotContent(`helptext`),s=this.ariaDescribedby?this.ariaDescribedby:o?`${this.forId}-helptext`:e.h,c=this.pktStrings.get(`forms`),d=()=>e._`
-        ${this.tagText?e._`<span class=${r+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
-        ${this.optionalTag?e._`<span class=${r+` pkt-tag--blue-light`}
-              >${this.optionalText??c.optional}</span
-            >`:e.h}
-        ${this.requiredTag?e._`<span class=${r+` pkt-tag--beige`}
-              >${this.requiredText??c.required}</span
-            >`:e.h}
-      `,f=()=>this.useWrapper?this.hasFieldset?e._`<legend
-            class="pkt-inputwrapper__legend"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-          >
-            ${this.label} ${d()}
-          </legend>`:e._`<label
-            class="pkt-inputwrapper__label"
-            for="${this.forId}"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-            >${this.label}${d()}</label
-          >`:e._`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
-          ${this.label}
-        </label>`,p=()=>!o&&!this.helptextDropdown?e.h:e._`
-        <pkt-helptext
-          ${n.n(this,{helptext:null})}
-          class="${a.t(this.useWrapper?void 0:`pkt-hide`)}"
-          .forId=${this.forId}
-          .helptext=${this.helptext}
-          .helptextDropdown=${this.helptextDropdown}
-          .helptextDropdownButton=${this.helptextDropdownButton??c.readMore}
-          @toggleHelpText=${e=>{this.toggleDropdown(e)}}
-        ></pkt-helptext>
-      `,m=()=>{if(!this.counter)return e.h;let n=u(this.counterCurrent,this.counterMaxLength);return e._`<div class="pkt-input__counter" aria-hidden="true">
-          ${this.counterError?this.counterError:e.h} ${this.counterCurrent||0}
-          ${this.counterMaxLength?`/${this.counterMaxLength}`:e.h}
-        </div>
-        <div class="pkt-sr-only" id=${l(this.forId)} aria-live="polite">
-          ${n?t.t(this.pktStrings.get(`validation`).counterExceeded,{current:this.counterCurrent??0,max:this.counterMaxLength}):``}
-        </div>`},h=()=>{if(this.hasError&&this.errorMessage){let t=this.size===`medium`?`small`:`xsmall`;return e._`<div class="pkt-inputwrapper__alert-wrapper">
-          <pkt-alert
-            skin="error"
-            .size=${t}
-            .role=${`alert`}
-            id=${`${this.forId}-error`}
-            aria-live="assertive"
-            aria-atomic="true"
-          >
-            ${i.r(this.errorMessage)}
-          </pkt-alert>
-        </div>`}return e.h},g=()=>e._`
-        ${f()} 
-        ${p()}
-        ${this.counterPosition===`top`?m():e.h}
-        <div class="pkt-contents">${n.i(this)}</div>
-        ${this.counterPosition===`bottom`?m():e.h} 
-        ${h()}
-      `;return this.hasFieldset?e._`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${s}">
-            ${g()}
-          </fieldset>`:e._`<div class="pkt-inputwrapper__fieldset">${g()}</div>`}toggleDropdown(e){this.dispatchEvent(new CustomEvent(`toggleHelpText`,{bubbles:!1,detail:{isOpen:e.detail.isOpen}}))}handleLabelClick(){this.dispatchEvent(new CustomEvent(`labelClick`,{bubbles:!0,composed:!0,detail:`label clicked`}))}};e.n([e.u({type:String})],f.prototype,`forId`,void 0),e.n([e.u({type:String})],f.prototype,`label`,void 0),e.n([e.u({type:String})],f.prototype,`helptext`,void 0),e.n([e.u({type:String})],f.prototype,`helptextDropdown`,void 0),e.n([e.u({type:String})],f.prototype,`helptextDropdownButton`,void 0),e.n([e.u({type:Boolean})],f.prototype,`counter`,void 0),e.n([e.u({type:Number})],f.prototype,`counterCurrent`,void 0),e.n([e.u({type:Number})],f.prototype,`counterMaxLength`,void 0),e.n([e.u({type:String})],f.prototype,`counterError`,void 0),e.n([e.u({type:String,reflect:!1})],f.prototype,`counterPosition`,void 0),e.n([e.u({type:Boolean})],f.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],f.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],f.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],f.prototype,`requiredText`,void 0),e.n([e.u({type:String})],f.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],f.prototype,`hasError`,void 0),e.n([e.u({type:String})],f.prototype,`errorMessage`,void 0),e.n([e.u({type:Boolean})],f.prototype,`disabled`,void 0),e.n([e.u({type:Boolean})],f.prototype,`inline`,void 0),e.n([e.u({type:String})],f.prototype,`ariaDescribedby`,void 0),e.n([e.u({type:Boolean})],f.prototype,`hasFieldset`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`role`,void 0),e.n([e.u({type:Boolean,reflect:!0,converter:r.t})],f.prototype,`useWrapper`,void 0),e.n([e.u({type:String,attribute:`input-wrapper-size`})],f.prototype,`size`,void 0);try{e.d(`pkt-input-wrapper`)(f)}catch{console.warn(`Forsøker å definere <pkt-input-wrapper>, men den er allerede definert`)}var p=f;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});