@oslokommune/punkt-elements 17.0.8 → 17.1.0

package/src/components/textarea/textarea.ts

@@ -10,8 +10,9 @@ import { slotContent } from '@/directives/slot-content'
 import '@/components/input-wrapper'
 import '@/components/icon'
 import { ElementProps } from '@/types/typeUtils'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
-type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows'>
+type Props = ElementProps<PktTextarea, 'autocomplete' | 'rows' | 'cols'>
 
 export class PktTextarea extends PktInputElement<Props> {
   inputRef: Ref<HTMLTextAreaElement> = createRef()
@@ -19,11 +20,11 @@ export class PktTextarea extends PktInputElement<Props> {
   @property({ type: String, reflect: true }) value: string = ''
   @property({ type: String }) autocomplete: string = 'off'
   @property({ type: Number }) rows: number | null = null
+  @property({ type: Number }) cols: number | null = null
 
   @state() counterCurrent = 0
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    // Only sync the counter here.
     if (name === 'value' && this.value !== _old) {
       this.counterCurrent = value ? value.length : 0
     }
@@ -32,6 +33,7 @@ export class PktTextarea extends PktInputElement<Props> {
 
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties)
+    this.classList.add('pkt-textinput', 'pkt-textarea')
     if (changedProperties.has('value')) {
       this.counterCurrent = this.value?.length || 0
       this.valueChanged(this.value, changedProperties.get('value'))
@@ -42,21 +44,20 @@ export class PktTextarea extends PktInputElement<Props> {
   }
 
   render() {
+    const showCounter = this.effectiveCounter(this.counterMaxLength > 0)
     const inputClasses = classMap({
       'pkt-input': true,
       [`pkt-input--${this.inputSize}`]: true,
       'pkt-input--fullwidth': this.fullwidth,
       'pkt-input--counter-error':
-        this.counter &&
-        this.counterMaxLength &&
-        this.value.length &&
-        this.value.length > this.counterMaxLength,
+        showCounter && this.counterMaxLength > 0 && this.value.length > this.counterMaxLength,
     })
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`<pkt-input-wrapper
       label=${this.label}
-      ?counter=${this.counter}
+      ?counter=${showCounter}
+      ?hasFieldset=${this.effectiveHasFieldset(false)}
       ?disabled=${this.disabled}
       ?hasError=${this.hasError}
       ?inline=${this.inline}
@@ -64,8 +65,8 @@ export class PktTextarea extends PktInputElement<Props> {
       ?required=${this.required}
       ?requiredTag=${this.requiredTag}
       useWrapper=${this.useWrapper}
-      .ariaDescribedBy=${this.ariaDescribedBy}
-      .counterCurrent=${this.counterCurrent}
+      .ariaDescribedby=${this.ariaDescribedby}
+      .counterCurrent=${this.value?.length ?? 0}
       .counterMaxLength=${this.counterMaxLength}
       .errorMessage=${this.errorMessage}
       .forId="${this.id + '-input'}"
@@ -76,7 +77,6 @@ export class PktTextarea extends PktInputElement<Props> {
       .requiredText=${this.requiredText}
       .tagText=${this.tagText}
       .size=${this.inputSize}
-      class="pkt-textarea"
     >
       <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       <textarea
@@ -92,8 +92,17 @@ export class PktTextarea extends PktInputElement<Props> {
         autocomplete=${this.autocomplete}
         aria-labelledby=${labelledBy}
         aria-invalid=${this.hasError}
-        aria-errormessage=${`${this.id}-error`}
+        aria-errormessage=${ifDefined(this.hasError ? `${this.id}-input-error` : undefined)}
+        aria-describedby=${ifDefined(
+          describedByIds({
+            id: this.id + '-input',
+            hasHelptext: !!this.helptext,
+            hasCounter: showCounter,
+            ariaDescribedby: this.ariaDescribedby,
+          }),
+        )}
         rows=${ifDefined(this.rows ?? undefined)}
+        cols=${ifDefined(this.cols ?? undefined)}
         ?disabled=${this.disabled}
         @input=${(e: InputEvent) => {
           this.value = (e.target as HTMLInputElement).value

package/src/components/textinput/textinput.test.ts

@@ -33,8 +33,8 @@ export interface TextinputTestConfig extends BaseTestConfig {
   fullwidth?: boolean
   counter?: boolean
   inline?: boolean
-  ariaLabelledby?: string | null
-  ariaDescribedBy?: string | null
+  'aria-labelledby'?: string | null
+  'aria-describedby'?: string | null
 }
 
 // Use shared framework
@@ -387,15 +387,15 @@ describe('PktTextinput', () => {
   describe('Accessibility', () => {
     test('passes through accessibility attributes', async () => {
       const { textinput } = await createTextinputTest({
-        ariaLabelledby: 'external-label',
-        ariaDescribedBy: 'external-description',
+        'aria-labelledby': 'external-label',
+        'aria-describedby': 'external-description',
       })
 
       const inputElement = textinput.querySelector('input')
       expect(inputElement?.getAttribute('aria-labelledby')).toBe('external-label')
 
-      // ariaDescribedBy is passed as property to input-wrapper
-      expect(textinput.ariaDescribedBy).toBe('external-description')
+      // ariaDescribedby videresendes som property til input-wrapper
+      expect(textinput.ariaDescribedby).toBe('external-description')
     })
 
     test('textinput is accessible', async () => {

package/src/components/textinput/textinput.ts

@@ -9,6 +9,7 @@ import { slotContent } from '@/directives/slot-content'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
 type Props = ElementProps<
   PktTextinput,
@@ -37,7 +38,6 @@ export class PktTextinput extends PktInputElement<Props> {
   @state() counterCurrent = 0
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    // Only sync the counter here.
     if (name === 'value' && this.value !== _old) {
       this.counterCurrent = value ? value.length : 0
     }
@@ -46,6 +46,7 @@ export class PktTextinput extends PktInputElement<Props> {
 
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties)
+    this.classList.add('pkt-textinput')
     if (changedProperties.has('value')) {
       this.counterCurrent = this.value?.length || 0
       this.valueChanged(this.value, changedProperties.get('value'))
@@ -58,32 +59,30 @@ export class PktTextinput extends PktInputElement<Props> {
   render() {
     const shouldShowSearchIcon =
       this.type === 'search' && !this.iconNameRight && !this.omitSearchIcon
+    const showCounter = this.effectiveCounter(this.counterMaxLength > 0)
     const inputClasses = classMap({
       'pkt-input': true,
       [`pkt-input--${this.inputSize}`]: true,
       'pkt-input--fullwidth': this.fullwidth,
       'pkt-input--counter-error':
-        this.counter &&
-        this.counterMaxLength &&
-        this.value.length &&
-        this.value.length > this.counterMaxLength,
+        showCounter && this.counterMaxLength > 0 && this.value.length > this.counterMaxLength,
     })
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`
       <pkt-input-wrapper
         label="${this.label}"
-        ?counter=${this.counter}
+        ?counter=${showCounter}
+        ?hasFieldset=${this.effectiveHasFieldset(false)}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}
-        ?hasFieldset=${this.hasFieldset}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
         ?required=${this.required}
         ?requiredTag=${this.requiredTag}
         useWrapper=${this.useWrapper}
-        .ariaDescribedBy=${this.ariaDescribedBy}
-        .counterCurrent=${this.counterCurrent}
+        .ariaDescribedby=${this.ariaDescribedby}
+        .counterCurrent=${this.value?.length ?? 0}
         .counterMaxLength=${this.counterMaxLength}
         .errorMessage=${this.errorMessage}
         .forId="${this.id + '-input'}"
@@ -94,7 +93,6 @@ export class PktTextinput extends PktInputElement<Props> {
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
         .size=${this.inputSize}
-        class="pkt-textinput"
       >
         <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         <div class=${`pkt-input__container pkt-input__container--${this.inputSize}`}>
@@ -118,7 +116,15 @@ export class PktTextinput extends PktInputElement<Props> {
             .value=${this.value}
             ?disabled=${this.disabled}
             aria-invalid=${this.hasError}
-            aria-errormessage=${`${this.id}-error`}
+            aria-errormessage=${ifDefined(this.hasError ? `${this.id}-input-error` : undefined)}
+            aria-describedby=${ifDefined(
+              describedByIds({
+                id: this.id + '-input',
+                hasHelptext: !!this.helptext,
+                hasCounter: showCounter,
+                ariaDescribedby: this.ariaDescribedby,
+              }),
+            )}
             @input=${(e: InputEvent) => {
               this.value = (e.target as HTMLInputElement).value
               this.onInput()

package/src/components/timepicker/timepicker.ts

@@ -151,6 +151,7 @@ export class PktTimepicker extends PktInputElement<Props> {
       hours?.setAttribute('aria-invalid', 'true')
       minutes?.setAttribute('aria-invalid', 'true')
     } else {
+      if (this.hasError) return
       hours?.removeAttribute('aria-invalid')
       minutes?.removeAttribute('aria-invalid')
     }
@@ -199,13 +200,13 @@ export class PktTimepicker extends PktInputElement<Props> {
 
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties)
+    this.classList.add('pkt-timepicker')
     this.classList.toggle('pkt-timepicker--stepper', this.stepArrows)
     this.classList.toggle('pkt-timepicker--fullwidth', this.fullwidth)
     this.classList.toggle('pkt-timepicker--medium', this.inputSize === 'medium')
     this.classList.toggle('pkt-timepicker--small', this.inputSize === 'small')
     this.classList.toggle('pkt-timepicker--xsmall', this.inputSize === 'xsmall')
     if (changedProperties.has('step') && this.step !== null && !this._isValidStep(this.step)) {
-      // eslint-disable-next-line no-console
       console.warn(
         `pkt-timepicker: step="${this.step}" er ikke en gyldig verdi. Step må være et multiplum av 60 (hele minutter) eller nøyaktig 3600 (hel time).`,
       )
@@ -627,7 +628,8 @@ export class PktTimepicker extends PktInputElement<Props> {
         ${this.stepArrows
           ? html`
               <button
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button pkt-timepicker__button--prev"
+                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this
+                  .inputSize} pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
                 aria-label=${this.strings.timepicker?.prevTime ?? 'Forrige tidspunkt'}
                 ?disabled=${this.disabled}
@@ -655,6 +657,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           aria-label=${hoursAriaLabel}
           role="spinbutton"
           aria-invalid=${this.hasError ? 'true' : nothing}
+          aria-errormessage=${this.hasError ? `${this.id}-hours-error` : nothing}
           aria-valuemin="0"
           aria-valuemax="23"
           aria-valuenow=${this._hours !== '' ? this._hours : nothing}
@@ -686,6 +689,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           aria-label=${minutesAriaLabel}
           role="spinbutton"
           aria-invalid=${this.hasError ? 'true' : nothing}
+          aria-errormessage=${this.hasError ? `${this.id}-hours-error` : nothing}
           aria-valuemin="0"
           aria-valuemax="59"
           aria-valuenow=${this._minutes !== '' ? this._minutes : nothing}
@@ -712,7 +716,8 @@ export class PktTimepicker extends PktInputElement<Props> {
           ? html`
               <button
                 ${ref(this.buttonRef)}
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button"
+                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this
+                  .inputSize} pkt-timepicker__button"
                 type="button"
                 aria-label=${this.strings.timepicker?.openPicker ?? 'Åpne tidspunkt-velger'}
                 aria-haspopup="listbox"
@@ -731,7 +736,8 @@ export class PktTimepicker extends PktInputElement<Props> {
         ${this.stepArrows
           ? html`
               <button
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button pkt-timepicker__button--next"
+                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this
+                  .inputSize} pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
                 aria-label=${this.strings.timepicker?.nextTime ?? 'Neste tidspunkt'}
                 ?disabled=${this.disabled}
@@ -769,12 +775,13 @@ export class PktTimepicker extends PktInputElement<Props> {
         ?disabled=${this.disabled}
         ?fullwidth=${this.fullwidth}
         ?hasError=${this.hasError}
+        ?hasFieldset=${this.effectiveHasFieldset(false)}
         ?inline=${this.inline}
         ?optionalTag=${this.optionalTag}
         ?required=${this.required}
         ?requiredTag=${this.requiredTag}
         useWrapper=${this.useWrapper}
-        .ariaDescribedBy=${this.ariaDescribedBy}
+        .ariaDescribedby=${this.ariaDescribedby}
         .errorMessage=${this.errorMessage}
         .forId="${this.id + '-hours'}"
         .helptext=${this.helptext}

package/dist/booleanish-B9Kf0nES.cjs

@@ -1 +0,0 @@
-var e={fromAttribute(e){return e==null?!1:e===``||e===`true`||e===!0?!0:e===`false`||e===!1?!1:!!e},toAttribute(e){return e?`true`:`false`}};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return e}});

package/dist/combobox-IBOASGmG.cjs

@@ -1,136 +0,0 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./icon-B8PVq2O6.cjs");const r=require("./if-defined-DrwbxQOj.cjs"),i=require("./ref-DO7TzO4O.cjs");require("./tag-XE-VRxT2.cjs");const a=require("./repeat-DRnLAg0O.cjs"),o=require("./listbox-89wMuQVK.cjs"),s=require("./input-element-B0qLbEdF.cjs"),c=require("./pkt-options-controller-CPrfqepu.cjs");require("./input-wrapper-DPkkiG7S.cjs");var l=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},u=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=o.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},d=(e,t,n,r,i)=>e.trim().toLowerCase()?{...o.s(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},f=(e,t,n)=>{let r=o.i(t,e);return n===`label`&&r?.label?r.label:e},p={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},m={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=o.r(n),t.push(n)}),t}},h={syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=o.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t){return[...t.filter(e=>e?.userAdded&&e.selected).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},g={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},id:{type:`string`,name:`ID`,description:`Unik ID for feltet`,category:`tech`},label:{type:`string`,name:`Etikett/label`,description:`Tekst som vises over feltet`,category:`contents`},placeholder:{name:`Hint`,description:`Spesifiserer en kort hint som beskriver forventet verdi av feltet.`,type:`string`,category:`contents`,required:!1},multiple:{type:`boolean`,name:`Flervalg`,default:!1,description:`Mulighet for å velge flere valg`,category:`functionality`},tagPlacement:{attribute:`tag-placement`,type:[`inside`,`outside`],name:`Plassering av tags i flervalg`,description:`Plassering av valgte verdier i feltet ved flervalg`,category:`functionality`,showIf:{multiple:!0}},maxlength:{type:`number`,name:`Maks antall i flervalg`,description:`Maks antall valg dersom flervalg er aktivert`,category:`functionality`,showIf:{multiple:!0}},typeahead:{type:`boolean`,name:`Typeahead`,default:!1,description:`Mulighet for automatisk utfylling av feltet fra listen over valg`,category:`functionality`},includeSearch:{attribute:`include-search`,type:`boolean`,name:`Inkluder søk`,description:`Mulighet for å søke etter valg inni dropdown`,category:`functionality`},allowUserInput:{attribute:`allow-user-input`,type:`boolean`,name:`Brukervalgte verdier`,description:`Mulighet for å skrive inn egne verdier`,category:`functionality`},searchPlaceholder:{attribute:`search-placeholder`,type:`string`,name:`Søke-plassholder`,description:`Plassholdertekst for søkefeltet i dropdown`,category:`contents`,showIf:{includeSearch:!0}},displayValueAs:{attribute:`display-value-as`,type:[`label`,`value`,`prefixAndValue`],name:`Visning av valgt verdi`,description:`Hvordan valgt verdi vises i feltet`,default:`label`,category:`ui`},inputSize:{name:`Størrelse`,description:`Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`},value:{name:`Verdi`,type:`string`,description:`Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.`,category:`tech`},helptext:{type:`string`,name:`Hjelpetekst`,description:`Hjelpetekst som vises over feltet`,category:`contents`},helptextDropdown:{type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{type:`string`,name:`Knappetekst for hjelpetekst`,description:`Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst`,category:`contents`,default:`Les mer`},disabled:{type:`boolean`,name:`Deaktivert`,description:`Feltet er deaktivert`,category:`tech`},hasError:{type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{type:`string`,name:`Feilmelding`,description:`Tekst som vises under feltet ved feil`,category:`contents`},required:{type:`boolean`,name:`Påkrevd`,description:`Feltet må fylles ut`,category:`tech`},requiredTag:{type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},fullwidth:{type:`boolean`,name:`Full bredde`,description:`Skal feltet ta opp hele bredden?`,category:`ui`},defaultOptions:{attribute:`default-options`,name:`Initielle valg (default options)`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)`,type:`array`,default:[],previewDefault:[{value:`bfr`,label:`Frogner`},{value:`bgo`,label:`Gamle Oslo`},{value:`bgr`,label:`Grorud`},{value:`bxx`,label:`Andre bydeler`}],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},options:{name:`Valg`,type:`array`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter`,default:[],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`}},events:{change:{type:`Event`,description:`Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.`},"value-change":{type:`CustomEvent`,description:`Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>.`},search:{type:`CustomEvent`,description:`Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`}}},_=class extends s.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=``,this.multiple=!1,this.maxlength=null,this.displayValueAs=g.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._internalValueSync=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=i.t(),this.triggerRef=i.t(),this.listboxRef=i.t(),this.optionsController=new c.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}parseValue(){return Array.isArray(this.value)?this.multiple?this.value:this.value.length>0?[this.value[0]]:[]:this.value&&this.multiple?this.value.split(`,`):this.value?[this.value]:[]}updateMaxReached(){this._maxIsReached=o.c(this._value.length,this.maxlength)}syncValueAndDispatch(e){let t=this._value,n=this.multiple?t.join(`,`):t[0]||``;if(n!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this._internalValueSync=!0,this.value=n),e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.o({type:String,reflect:!0})],_.prototype,`value`,void 0),e.n([e.o({type:Array})],_.prototype,`options`,void 0),e.n([e.o({type:Array,attribute:`default-options`})],_.prototype,`defaultOptions`,void 0),e.n([e.o({type:Boolean,attribute:`allow-user-input`})],_.prototype,`allowUserInput`,void 0),e.n([e.o({type:Boolean})],_.prototype,`typeahead`,void 0),e.n([e.o({type:Boolean,attribute:`include-search`})],_.prototype,`includeSearch`,void 0),e.n([e.o({type:String,attribute:`search-placeholder`})],_.prototype,`searchPlaceholder`,void 0),e.n([e.o({type:Boolean})],_.prototype,`multiple`,void 0),e.n([e.o({type:Number})],_.prototype,`maxlength`,void 0),e.n([e.o({type:String,attribute:`display-value-as`})],_.prototype,`displayValueAs`,void 0),e.n([e.o({type:String,attribute:`tag-placement`})],_.prototype,`tagPlacement`,void 0),e.n([e.o({type:Boolean,attribute:`open`})],_.prototype,`isOpen`,void 0),e.n([e.a()],_.prototype,`_options`,void 0),e.n([e.a()],_.prototype,`_value`,void 0),e.n([e.a()],_.prototype,`_isOptionsOpen`,void 0),e.n([e.a()],_.prototype,`_userInfoMessage`,void 0),e.n([e.a()],_.prototype,`_addValueText`,void 0),e.n([e.a()],_.prototype,`_maxIsReached`,void 0),e.n([e.a()],_.prototype,`_search`,void 0),e.n([e.a()],_.prototype,`_inputFocus`,void 0);var v=class extends _{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=o.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),s=!this.multiple,c=this.multiple,l=o.c(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`Ny verdi lagt til`,u=c):!r&&!this.allowUserInput?(s&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`Ingen treff i søket`):n?(this.removeValue(t),u=!0,s&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&s?(this.removeAllSelected(),u=!0):s?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`Maks antall valg nådd`,d=!1,p=e):(s&&this.removeAllSelected(),f=`Ingen gyldig verdi valgt`,d=!1,u=!0,p=e),this._isOptionsOpen=u,u||(s&&this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this._userInfoMessage=f,this._search=p||``,this.resetComboboxInput(d),c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&o.c(this._value.length,this.maxlength)){this._userInfoMessage=`Maks antall valg nådd`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,p.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=o.i(this.options,e);t&&(p.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)||(this._options=[...this._options,t]))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`For mange valgt`;return}this._value=this._options.map(e=>e.value),p.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],p.markAllDeselected(this._options),this._options=p.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`Verdien er allerede valgt`;return}this.toggleValue(e)}removeValue(e){this._value=this.multiple?this._value.filter(t=>t!==e):[],this.removeSelected(e)}addNewUserValue(e){if(!e||e.trim()===``)return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[e];else if(!o.i(this.options,e)){if(o.c(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this.requestUpdate()}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},y=class extends v{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead)if(this._search){let{filtered:n,suggestion:r}=o.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection=`backward`)}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(this._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.getAttribute(`data-focusfix`)===this.id||t===this.inputRef.value||t===this.triggerRef.value||this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple)if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=o.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}else if(e!==``){let{action:t,value:n}=u(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n);break}}!this.multiple&&this._value[0]?this.inputRef.value.value=f(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.disabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.disabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]));break}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=l(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1;break}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n();break}}checkForMatches(){let e=d(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},b=class extends y{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=m.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=m.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}super.willUpdate(e)}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}updated(e){e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen);let t=e.has(`value`),n=e.has(`_value`);if(t&&this._internalValueSync)this._internalValueSync=!1,n&&this.syncValueAndDispatch(e.get(`_value`));else if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t,this.options.forEach(e=>e.selected=t.includes(e.value)),this._options.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this.updateMaxReached(),this.syncValueAndDispatch(e)}else n&&this.syncValueAndDispatch(e.get(`_value`));if(e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=h.mergeWithUserAdded(this.options,t);this._options=n,n.length>this.options.length&&(this.options=n);let r=h.syncOptionsWithValues(this._options,this._value);if(this._options=r.options,r.newValues.length>this._value.length){let e=[...this._value];this._value=r.newValues,this.syncValueAndDispatch(e)}}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&!this.multiple&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this._value[0]?f(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=Array.isArray(this.options)?[...this.options]:[];let e=h.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e.p`
-      <pkt-input-wrapper
-        .size=${this.inputSize}
-        .label=${this.label}
-        .helptext=${this.helptext}
-        .helptextDropdown=${r.t(this.helptextDropdown)}
-        .helptextDropdownButton=${r.t(this.helptextDropdownButton)}
-        ?fullwidth=${this.fullwidth}
-        ?hasError=${this.hasError}
-        ?inline=${this.inline}
-        ?disabled=${this.disabled}
-        .errorMessage=${this.errorMessage}
-        ?optionalTag=${this.optionalTag}
-        .optionalText=${this.optionalText}
-        ?requiredTag=${this.requiredTag}
-        .requiredText=${this.requiredText}
-        .tagText=${this.tagText}
-        useWrapper=${this.useWrapper}
-        .forId=${this._hasTextInput?this.id+`-input`:this.id+`-combobox`}
-        ?hasFieldset=${!this._hasTextInput}
-        class="pkt-combobox__wrapper"
-        @labelClick=${this.handleInputClick}
-      >
-        <div class="pkt-contents" slot="helptext">${n.n(this,`helptext`)}</div>
-        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
-          <div
-            class=${t.t({"pkt-combobox__input":!0,[`pkt-combobox__input--${this.inputSize}`]:!0,"pkt-combobox__input--fullwidth":this.fullwidth,"pkt-combobox__input--open":this._isOptionsOpen,"pkt-combobox__input--error":this.hasError,"pkt-combobox__input--disabled":this.disabled})}
-            id=${r.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
-            role=${r.t(this._hasTextInput?void 0:`combobox`)}
-            aria-expanded=${r.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
-            aria-controls=${r.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
-            aria-haspopup=${r.t(this._hasTextInput?void 0:`listbox`)}
-            aria-labelledby=${r.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
-            aria-activedescendant=${r.t(!this._hasTextInput&&this._value[0]&&o.i(this.options,this._value[0])?`${this.id}-listbox-${o.a(this._options,this._value[0])}`:void 0)}
-            aria-description=${r.t(this._selectionDescription||void 0)}
-            tabindex=${this._hasTextInput||this.disabled?`-1`:`0`}
-            @click=${this.handleInputClick}
-            @keydown=${this._hasTextInput?e.d:this.handleSelectOnlyKeydown}
-            ${i.n(this.triggerRef)}
-          >
-            ${!this._hasTextInput&&this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement==`outside`)&&!this._inputFocus?e.p`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
-                  >${this.placeholder}</span
-                >`:this.tagPlacement===`outside`?e.d:this.renderSingleOrMultipleValues()}
-            ${this.renderInputField()}
-            <pkt-icon
-              class=${t.t({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
-              name="chevron-thin-down"
-              aria-hidden="true"
-            ></pkt-icon>
-          </div>
-
-          <pkt-listbox
-            id="${this.id}-listbox"
-            .options=${this._options}
-            .isOpen=${this._isOptionsOpen}
-            .searchPlaceholder=${this.searchPlaceholder}
-            .label="Liste: ${this.label||``}"
-            ?include-search=${this.includeSearch}
-            ?is-multi-select=${this.multiple}
-            ?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
-            ?max-is-reached=${this._maxIsReached}
-            .customUserInput=${r.t(this._addValueText)}
-            .userMessage=${this._userInfoMessage}
-            @search=${this.handleSearch}
-            @option-toggle=${this.handleOptionToggled}
-            @select-all=${this.addAllOptions}
-            @close-options=${()=>this._isOptionsOpen=!1}
-            @tab-close=${()=>this.closeAndProcessInput()}
-            .searchValue=${this._search||null}
-            .maxLength=${this.maxlength||0}
-            ${i.n(this.listboxRef)}
-          ></pkt-listbox>
-        </div>
-
-        ${this.tagPlacement===`outside`&&this.multiple?e.p`<div class="pkt-combobox__tags-outside">
-              ${this.renderSingleOrMultipleValues()}
-            </div>`:e.d}
-      </pkt-input-wrapper>
-    `}renderInputField(){return this.typeahead||this.allowUserInput?e.p`
-          <div class="pkt-combobox__input-div combobox__input">
-            <input
-              type="text"
-              id="${this.id}-input"
-              name=${(this.name||this.id)+`-input`}
-              placeholder=${r.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
-              @input=${this.handleInput}
-              @change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
-              @keydown=${this.handleInputKeydown}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-              autocomplete="off"
-              role="combobox"
-              aria-expanded=${this._isOptionsOpen?`true`:`false`}
-              aria-label=${r.t(this.label)}
-              aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
-              aria-controls="${this.id}-listbox"
-              aria-activedescendant=${r.t(this._value[0]&&o.i(this.options,this._value[0])?`${this.id}-listbox-${o.a(this._options,this._value[0])}`:void 0)}
-              aria-description=${r.t(this._selectionDescription||void 0)}
-              ${i.n(this.inputRef)}
-            />
-          </div>
-        `:e.p`
-          <input
-            type="hidden"
-            id="${this.id}-input"
-            name=${(this.name||this.id)+`-input`}
-            .value=${this._value.join(`,`)}
-            ${i.n(this.inputRef)}
-          />
-        `}renderSingleOrMultipleValues(){if(!this.multiple&&this._hasTextInput)return e.d;let t=!this.multiple,n=this.renderValueTag(o.i(this.options,this._value[0])),r=this.tagPlacement===`outside`,i=e.p`
-      <ul role="list" class="pkt-combobox__tag-list">
-        ${a.t(this._value,e=>e,(t,n)=>{let i=o.i(this.options,t),a=i?.tagSkinColor;return e.p`
-              <li
-                role="listitem"
-                @click=${r?e.d:e=>e.stopPropagation()}
-                @mousedown=${r?e.d:e=>e.preventDefault()}
-              >
-                <pkt-tag
-                  skin=${a||`blue-dark`}
-                  ?closeTag=${!this.disabled}
-                  .buttonTabindex=${r?void 0:-1}
-                  @close=${()=>this.handleTagRemove(t)}
-                  @keydown=${r?e.d:e=>this.handleTagKeydown(e,n)}
-                >
-                  ${this.renderValueTag(i)}
-                </pkt-tag>
-              </li>
-            `})}
-      </ul>
-    `;return t?n:i}renderValueTag(t){if(!t)return``;switch(this.displayValueAs){case`prefixAndValue`:return e.p`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.prefix||``} ${t.value}</span
-        >`;case`value`:return e.p`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.value}</span
-        >`;default:return e.p`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.label||t.value}</span
-        >`}}};try{e.s(`pkt-combobox`)(b)}catch{console.warn(`Forsøker å definere <pkt-combobox>, men den er allerede definert`)}var x=b;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});

package/dist/if-defined-DrwbxQOj.cjs

@@ -1 +0,0 @@
-const e=require("./element-DJzurxgt.cjs");var t=t=>t??e.d;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});

package/dist/input-wrapper-DPkkiG7S.cjs

@@ -1,57 +0,0 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs");require("./alert-CkUnbPdA.cjs");const r=require("./icon-B8PVq2O6.cjs"),i=require("./if-defined-DrwbxQOj.cjs"),a=require("./utils-63cRpWut.cjs"),o=require("./booleanish-B9Kf0nES.cjs"),s=require("./input-wrapper-wh3fWIhk.cjs");require("./helptext-Cq5rNaAC.cjs");const c=require("./focus-modality-controller-C1ocyv2J.cjs");var l=class extends n.t{constructor(...e){super(...e),this.forId=a.n(),this.label=``,this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=s.t.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition=`bottom`,this.optionalTag=s.t.props.optionalTag.default,this.optionalText=s.t.props.optionalText.default,this.requiredTag=s.t.props.requiredTag.default,this.requiredText=s.t.props.requiredText.default,this.tagText=null,this.hasError=s.t.props.hasError.default,this.errorMessage=``,this.disabled=s.t.props.disabled.default,this.inline=s.t.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=s.t.props.hasFieldset.default,this.role=`group`,this.useWrapper=s.t.props.useWrapper.default,this.size=`medium`,this.focusModality=new c.t(this,`.pkt-inputwrapper`)}updated(e){super.updated(e)}render(){let a={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline,"pkt-inputwrapper--small":this.size===`small`,"pkt-inputwrapper--xsmall":this.size===`xsmall`},o=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:e.d,c=()=>e.p`
-        ${this.tagText?e.p`<span class=${`pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--gray`}>${this.tagText}</span>`:e.d}
-        ${this.optionalTag?e.p`<span class=${`pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--blue-light`}>${this.optionalText}</span>`:e.d}
-        ${this.requiredTag?e.p`<span class=${`pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige`}>${this.requiredText}</span>`:e.d}
-      `,l=()=>this.useWrapper?this.hasFieldset?e.p`<legend
-            class="pkt-inputwrapper__legend"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-          >
-            ${this.label} ${c()}
-          </legend>`:e.p`<label
-            class="pkt-inputwrapper__label"
-            for="${this.forId}"
-            aria-describedby="${o}"
-            id="${this.forId}-label"
-            @click=${this.handleLabelClick}
-            >${this.label}${c()}</label
-          >`:e.p`<label
-          for="${this.forId}"
-          class="pkt-sr-only"
-          aria-describedby="${o}"
-          id="${this.forId}-label"
-        >
-          ${this.label}
-        </label>`,u=()=>e.p`
-        <pkt-helptext
-          class="${i.t(this.useWrapper?void 0:`pkt-hide`)}"
-          .forId=${this.forId}
-          .helptext=${this.helptext}
-          .helptextDropdown=${this.helptextDropdown}
-          .helptextDropdownButton=${this.helptextDropdownButton||s.t.props.helptextDropdownButton.default}
-          @toggleHelpText=${e=>{this.toggleDropdown(e)}}
-          >${n.n(this,`helptext`)}</pkt-helptext
-        >
-      `,d=()=>this.counter?e.p`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
-          ${this.counterError?this.counterError:e.d} ${this.counterCurrent||0}
-          ${this.counterMaxLength?`/${this.counterMaxLength}`:e.d}
-        </div>`:e.d,f=()=>this.hasError&&this.errorMessage?e.p`<div class="pkt-inputwrapper__alert-wrapper">
-          <pkt-alert
-            skin="error"
-            .size=${this.size===`medium`?`small`:`xsmall`}
-            id=${`${this.forId}-error`}
-            aria-live="assertive"
-            aria-atomic="true"
-          >
-            ${r.r(this.errorMessage)}
-          </pkt-alert>
-        </div>`:e.d,p=()=>e.p`
-        ${l()} 
-        ${u()}
-        ${this.counterPosition===`top`?d():e.d}
-        <div class="pkt-contents">${n.n(this)}</div>
-        ${this.counterPosition===`bottom`?d():e.d} 
-        ${f()}
-      `;return e.p`<div class=${t.t(a)}>${this.hasFieldset?e.p`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${o}">
-            ${p()}
-          </fieldset>`:e.p`<div class="pkt-inputwrapper__fieldset">${p()}</div>`}</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.o({type:String})],l.prototype,`forId`,void 0),e.n([e.o({type:String})],l.prototype,`label`,void 0),e.n([e.o({type:String})],l.prototype,`helptext`,void 0),e.n([e.o({type:String})],l.prototype,`helptextDropdown`,void 0),e.n([e.o({type:String})],l.prototype,`helptextDropdownButton`,void 0),e.n([e.o({type:Boolean})],l.prototype,`counter`,void 0),e.n([e.o({type:Number})],l.prototype,`counterCurrent`,void 0),e.n([e.o({type:Number})],l.prototype,`counterMaxLength`,void 0),e.n([e.o({type:String})],l.prototype,`counterError`,void 0),e.n([e.o({type:String,reflect:!1})],l.prototype,`counterPosition`,void 0),e.n([e.o({type:Boolean})],l.prototype,`optionalTag`,void 0),e.n([e.o({type:String})],l.prototype,`optionalText`,void 0),e.n([e.o({type:Boolean})],l.prototype,`requiredTag`,void 0),e.n([e.o({type:String})],l.prototype,`requiredText`,void 0),e.n([e.o({type:String})],l.prototype,`tagText`,void 0),e.n([e.o({type:Boolean})],l.prototype,`hasError`,void 0),e.n([e.o({type:String})],l.prototype,`errorMessage`,void 0),e.n([e.o({type:Boolean})],l.prototype,`disabled`,void 0),e.n([e.o({type:Boolean})],l.prototype,`inline`,void 0),e.n([e.o({type:String})],l.prototype,`ariaDescribedby`,void 0),e.n([e.o({type:Boolean})],l.prototype,`hasFieldset`,void 0),e.n([e.o({type:String,reflect:!0})],l.prototype,`role`,void 0),e.n([e.o({type:Boolean,reflect:!0,converter:o.t})],l.prototype,`useWrapper`,void 0),e.n([e.o({type:String,attribute:`input-wrapper-size`})],l.prototype,`size`,void 0);try{e.s(`pkt-input-wrapper`)(l)}catch{console.warn(`Forsøker å definere <pkt-input-wrapper>, men den er allerede definert`)}var u=l;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return u}});