@oslokommune/punkt-elements 18.9.3 → 18.9.7

package/src/components/header/header-service.test.ts

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom'
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { resetPktStrings, setPktStrings } from 'shared-strings'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './header-service'
@@ -142,6 +143,59 @@ describe('pkt-header-service', () => {
       expect(logoLink).toBeTruthy()
       expect(logoLink?.getAttribute('href')).toBe('https://www.oslo.kommune.no')
     })
+
+    it('renders logo without a link when logo-link is empty', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'logo-link': '',
+      })
+      const logo = element.querySelector('.pkt-header-service__logo')
+      expect(logo).toBeTruthy()
+      expect(logo?.querySelector('a')).toBeNull()
+      expect(logo?.getAttribute('role')).toBe('img')
+      expect(logo?.getAttribute('aria-label')).toBe('Oslo kommune')
+    })
+  })
+
+  describe('strings', () => {
+    afterEach(() => resetPktStrings())
+
+    it('labels the logo link from the string catalogue', async () => {
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      const logoLink = element.querySelector('.pkt-header-service__logo a')
+      expect(logoLink?.getAttribute('aria-label')).toBe('Til Oslo kommunes hovednettsted')
+    })
+
+    it('uses the overridden logo label', async () => {
+      setPktStrings({ header: { logoLabel: 'To the front page', logoAlt: 'City of Oslo' } })
+      const { element } = await createHeaderServiceTest({ 'service-name': 'Svc' })
+      expect(element.querySelector('.pkt-header-service__logo a')?.getAttribute('aria-label')).toBe(
+        'To the front page',
+      )
+
+      const { element: withoutLink } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'logo-link': '',
+      })
+      expect(
+        withoutLink.querySelector('.pkt-header-service__logo')?.getAttribute('aria-label'),
+      ).toBe('City of Oslo')
+    })
+
+    it('passes the strings property on to the user menu', async () => {
+      const { element } = await createHeaderServiceTest({
+        'service-name': 'Svc',
+        'opened-menu': 'user',
+      })
+      element.user = { name: 'Aksel' }
+      element.strings = { header: { loggedInAs: 'Innlogget som' } }
+      await element.updateComplete
+
+      const userMenu = element.querySelector('pkt-header-user-menu')
+      expect(userMenu?.querySelector('.pkt-user-menu__label')?.textContent?.trim()).toBe(
+        'Innlogget som',
+      )
+    })
   })
 
   describe('serviceLink and service-click event', () => {

package/src/components/header/header-service.ts

@@ -53,7 +53,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
     'hide'
   @property({ type: String, attribute: 'slot-menu-variant' })
   slotMenuVariant: TSlotMenuVariant = 'icon-only'
-  @property({ type: String, attribute: 'slot-menu-text' }) slotMenuText = 'Meny'
+  @property({ type: String, attribute: 'slot-menu-text' }) slotMenuText?: string
 
   @property({ type: Boolean, attribute: 'hide-logo', converter: booleanishConverter })
   hideLogo: Booleanish = false
@@ -345,9 +345,21 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
       <pkt-icon name="oslologo" aria-hidden="true" path=${this.logoPath}></pkt-icon>
     `
 
+    if (!this.logoLink) {
+      return html`
+        <span class="pkt-header-service__logo" role="img" aria-label=${this.headerStrings.logoAlt}>
+          ${logoIcon}
+        </span>
+      `
+    }
+
     return html`
       <span class="pkt-header-service__logo">
-        <a href=${this.logoLink} aria-label="Tilbake til forside" @click=${this.handleLogoClick}>
+        <a
+          href=${this.logoLink}
+          aria-label=${this.headerStrings.logoLabel}
+          @click=${this.handleLogoClick}
+        >
           ${logoIcon}
         </a>
       </span>
@@ -429,7 +441,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
                 aria-controls="mobile-slot-menu"
                 aria-label=${this.headerStrings.openMenu}
               >
-                ${this.slotMenuText}
+                ${this.slotMenuText ?? this.headerStrings.menu}
               </pkt-button>
             `
           : nothing}
@@ -437,7 +449,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
           class=${slotContentClasses}
           id="mobile-slot-menu"
           role=${this.isTablet ? 'group' : nothing}
-          aria-label=${this.isTablet ? 'Meny' : nothing}
+          aria-label=${this.isTablet ? this.headerStrings.menu : nothing}
           @click=${this.handleSlotContentClick}
           ${ref(this.slotContentRef)}
         >
@@ -551,13 +563,14 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
           secondIconName=${this.openMenu === 'user' ? 'chevron-thin-up' : 'chevron-thin-down'}
           @click=${() => this.handleMenuToggle('user')}
         >
-          <span class="pkt-sr-only">Brukermeny: </span>
+          <span class="pkt-sr-only">${this.headerStrings.userMenuButton} </span>
           <span translate="no">${this.representing?.name || this.user.name}</span>
         </pkt-button>
         ${this.openMenu === 'user' && this.user
           ? html`
               <div class=${userMenuClasses}>
                 <pkt-header-user-menu
+                  .strings=${this.strings}
                   .user=${this.user}
                   formatted-last-logged-in=${this.formattedLastLoggedIn || nothing}
                   .representing=${this.representing}
@@ -610,7 +623,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
                       iconName="exit"
                       @click=${this.handleLogout}
                     >
-                      Logg ut
+                      ${this.headerStrings.logOut}
                     </pkt-button>
                   `
                 : nothing}
@@ -628,7 +641,7 @@ export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements
                       iconName="exit"
                       @click=${this.handleLogout}
                     >
-                      Logg ut
+                      ${this.headerStrings.logOut}
                     </pkt-button>
                   `
                 : nothing}

package/src/components/header/header-user-menu.ts

@@ -11,6 +11,7 @@ import {
   Booleanish,
   booleanishConverter,
 } from './types'
+import { formatString } from 'shared-strings'
 
 import '@/components/icon'
 import '@/components/link'
@@ -115,20 +116,21 @@ export class PktHeaderUserMenu
 
   render() {
     const internalMenuItems = this.userMenu?.map(convertUserMenuItem)
+    const strings = this.pktStrings.get('header')
 
     return html`
-      <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
+      <nav class="pkt-user-menu" aria-label=${strings.userMenuLabel}>
         <ul class="pkt-user-menu__list">
           <!-- User section -->
           ${this.user
             ? html`
                 <li class="pkt-user-menu__item">
-                  <div class="pkt-user-menu__label">Pålogget som</div>
+                  <div class="pkt-user-menu__label">${strings.loggedInAs}</div>
                   <div class="pkt-user-menu__name" translate="no">${this.user.name}</div>
                   ${this.formattedLastLoggedIn
                     ? html`
                         <div class="pkt-user-menu__last-logged-in">
-                          Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
+                          ${strings.lastLoggedIn} <time>${this.formattedLastLoggedIn}</time>
                         </div>
                       `
                     : nothing}
@@ -147,11 +149,11 @@ export class PktHeaderUserMenu
           ${this.representing
             ? html`
                 <li class="pkt-user-menu__item">
-                  <div class="pkt-user-menu__label">Representerer</div>
+                  <div class="pkt-user-menu__label">${strings.representing}</div>
                   <div class="pkt-user-menu__name" translate="no">${this.representing.name}</div>
                   ${this.representing.orgNumber
                     ? html`<div class="pkt-user-menu__org-number">
-                        Org.nr. ${this.representing.orgNumber}
+                        ${formatString(strings.orgNumber, { number: this.representing.orgNumber })}
                       </div>`
                     : nothing}
                   ${this.canChangeRepresentation
@@ -159,7 +161,7 @@ export class PktHeaderUserMenu
                         <ul class="pkt-user-menu__sublist mt-size-16">
                           <li class="pkt-user-menu__subitem">
                             ${this.renderLinkOrButton({
-                              title: 'Endre organisasjon',
+                              title: strings.changeRepresentation,
                               iconName: 'cogwheel',
                               onClick: () => this.handleChangeRepresentation(),
                             })}
@@ -178,7 +180,7 @@ export class PktHeaderUserMenu
                   <ul class="pkt-user-menu__sublist">
                     <li class="pkt-user-menu__subitem">
                       ${this.renderLinkOrButton({
-                        title: 'Endre organisasjon',
+                        title: strings.changeRepresentation,
                         iconName: 'cogwheel',
                         onClick: () => this.handleChangeRepresentation(),
                       })}
@@ -193,7 +195,7 @@ export class PktHeaderUserMenu
             ? html`
                 <li class="pkt-user-menu__item">
                   ${this.renderLinkOrButton({
-                    title: 'Logg ut',
+                    title: strings.logOut,
                     iconName: 'exit',
                     onClick: () => this.handleLogout(),
                   })}

package/src/components/header/types.ts

@@ -55,7 +55,7 @@ export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
 export interface IPktHeader extends IPktStringsProps<'header'> {
   /** Hide the Oslo logo */
   hideLogo?: Booleanish
-  /** Logo link URL */
+  /** Logo link URL. Set to an empty string to render the logo without a link */
   logoLink?: string
   /** Override CDN path for the logo */
   logoPath?: string
@@ -110,7 +110,8 @@ export interface IPktHeader extends IPktStringsProps<'header'> {
  * signal.
  */
 export interface IPktHeaderGlobal
-  extends Omit<
+  extends
+    Omit<
       ISharedPktHeaderGlobal,
       'showSearch' | 'showContact' | 'canChangeRepresentation' | 'userMenu'
     >,

package/src/components/helptext/helptext-association.test.ts

@@ -0,0 +1,108 @@
+import '@testing-library/jest-dom'
+import '@/components/textinput'
+import '@/components/textarea'
+import '@/components/select'
+import '@/components/combobox'
+import '@/components/datepicker'
+import '@/components/timepicker'
+import '@/components/fileupload'
+
+/**
+ * The helptext must describe the control itself. `aria-describedby` on a label or
+ * on a wrapping element does not reach the field. See issue #3343.
+ */
+
+const CONTROL = 'input:not([type="hidden"]):not([hidden]), textarea, select, [role="combobox"]'
+
+const mount = async (tag: string, attrs = '') => {
+  document.body.innerHTML = `<${tag} id="felt" name="felt" label="Etikett" helptext="Hjelpetekst" ${attrs}></${tag}>`
+  await customElements.whenDefined(tag)
+  const host = document.querySelector(tag) as HTMLElement & { updateComplete: Promise<unknown> }
+  await host.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await host.updateComplete
+  return host
+}
+
+const cases: Array<[string, string]> = [
+  ['pkt-textinput', ''],
+  ['pkt-textarea', ''],
+  ['pkt-select', ''],
+  ['pkt-datepicker', ''],
+  ['pkt-fileupload', ''],
+  ['pkt-combobox', ''],
+  ['pkt-combobox', 'allow-user-input'],
+  ['pkt-combobox', 'typeahead'],
+]
+
+describe('helptext association', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test.each(cases)('%s %s describes its control with the helptext', async (tag, attrs) => {
+    const host = await mount(tag, attrs)
+
+    const helptext = host.querySelector('.pkt-inputwrapper__helptext')
+    expect(helptext?.id).toBeTruthy()
+
+    const control = host.querySelector(CONTROL)
+    expect(control).not.toBeNull()
+    expect(control?.getAttribute('aria-describedby')?.split(' ')).toContain(helptext?.id)
+  })
+
+  test('pkt-timepicker describes both spinbuttons with the helptext', async () => {
+    const host = await mount('pkt-timepicker')
+
+    const helptext = host.querySelector('.pkt-inputwrapper__helptext')
+    expect(helptext?.id).toBeTruthy()
+
+    const spinbuttons = host.querySelectorAll('[role="spinbutton"]')
+    expect(spinbuttons).toHaveLength(2)
+    spinbuttons.forEach((spinbutton) => {
+      expect(spinbutton.getAttribute('aria-describedby')?.split(' ')).toContain(helptext?.id)
+    })
+  })
+
+  test('pkt-fileupload renders and links the helptext without a label', async () => {
+    document.body.innerHTML = `<pkt-fileupload id="felt" name="felt" helptext="Hjelpetekst"></pkt-fileupload>`
+    await customElements.whenDefined('pkt-fileupload')
+    const host = document.querySelector('pkt-fileupload') as HTMLElement & {
+      updateComplete: Promise<unknown>
+    }
+    await host.updateComplete
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    await host.updateComplete
+
+    const helptext = host.querySelector('.pkt-inputwrapper__helptext')
+    expect(helptext?.textContent).toContain('Hjelpetekst')
+
+    const input = host.querySelector('input[type="file"]')
+    expect(input?.getAttribute('aria-describedby')?.split(' ')).toContain(helptext?.id)
+    expect(input?.getAttribute('aria-label')).toBe('Velg fil')
+  })
+
+  test('no label carries the description', async () => {
+    for (const [tag, attrs] of cases) {
+      const host = await mount(tag, attrs)
+      const labels = host.querySelectorAll('label[aria-describedby], legend[aria-describedby]')
+      expect(labels).toHaveLength(0)
+    }
+  })
+
+  test('nothing points at an element that is not rendered', async () => {
+    for (const [tag, attrs] of [...cases, ['pkt-timepicker', ''] as [string, string]]) {
+      const host = await mount(tag, attrs)
+      host.querySelectorAll('[aria-describedby]').forEach((el) => {
+        el.getAttribute('aria-describedby')
+          ?.split(' ')
+          .filter(Boolean)
+          .forEach((id) => {
+            expect(`${tag} ${attrs} -> ${document.getElementById(id) ? 'finnes' : 'mangler'}`).toBe(
+              `${tag} ${attrs} -> finnes`,
+            )
+          })
+      })
+    }
+  })
+})

package/src/components/timepicker/timepicker.ts

@@ -13,6 +13,7 @@ import { stepTime } from 'shared-utils/timepicker/stepper'
 import '@/components/icon'
 import '@/components/input-wrapper'
 import { TPktInputSize } from 'shared-types/size'
+import { describedByIds } from 'shared-utils/forms/described-by'
 
 type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'> &
   IPktStringsProps<'timepicker'>
@@ -145,6 +146,14 @@ export class PktTimepicker extends PktInputElement<Props> {
   private _minutesFirstDigit: number = -1
   private _hasFocus: boolean = false
 
+  private _describedBy(): string | undefined {
+    return describedByIds({
+      id: `${this.id}-hours`,
+      hasHelptext: !!this.helptext,
+      ariaDescribedby: this.ariaDescribedby,
+    })
+  }
+
   private _setAriaInvalid(invalid: boolean): void {
     if (!this.touched && invalid) return
     const hours = this.hoursInputRef.value
@@ -660,6 +669,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           role="spinbutton"
           aria-invalid=${this.hasError ? 'true' : nothing}
           aria-errormessage=${this.hasError ? `${this.id}-hours-error` : nothing}
+          aria-describedby=${ifDefined(this._describedBy())}
           aria-valuemin="0"
           aria-valuemax="23"
           aria-valuenow=${this._hours !== '' ? this._hours : nothing}
@@ -692,6 +702,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           role="spinbutton"
           aria-invalid=${this.hasError ? 'true' : nothing}
           aria-errormessage=${this.hasError ? `${this.id}-hours-error` : nothing}
+          aria-describedby=${ifDefined(this._describedBy())}
           aria-valuemin="0"
           aria-valuemax="59"
           aria-valuenow=${this._minutes !== '' ? this._minutes : nothing}

package/dist/combobox-B9Qo7hbt.cjs

@@ -1,137 +0,0 @@
-const e=require("./element-D_mCyFeX.cjs"),t=require("./class-map-DupQbnhE.cjs"),n=require("./if-defined-BbUZeoaQ.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-C66Jck5e.cjs");require("./icon-BzxBkRyE.cjs");const a=require("./ref-AuNEkS5a.cjs");require("./tag-CGlxtBOH.cjs");const o=require("./repeat-B3ksuY2F.cjs"),s=require("./listbox-kV4OO1Qa.cjs"),c=require("./input-element-PN5nWd1A.cjs"),l=require("./pkt-options-controller-DXAAVcBJ.cjs");require("./input-wrapper-D64Qn-QH.cjs");var u=(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}},d=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=s.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}},f=(e,t,n,r,i)=>e.trim().toLowerCase()?{...s.c(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},p=(e,t,n)=>{let r=s.i(t,e);return n===`label`&&r?.label?r.label:e},m={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)}},h={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=s.r(n),t.push(n)}),t}},g={cloneOptions(e){return Array.isArray(e)?e.map(e=>({...e})):[]},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=s.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t,n){return[...t.filter(e=>e?.userAdded&&n.includes(e.value)).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},_={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`},form:{name:`Skjema`,description:`ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet`,type:`string`,required:!1,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:{attribute:`helptextdropdown`,type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{attribute:`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:{attribute:`haserror`,type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{attribute:`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:{attribute:`requiredtag`,type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{attribute:`requiredtext`,type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{attribute:`optionaltag`,type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{attribute:`optionaltext`,type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{attribute:`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`},inline:{name:`Inline`,type:`boolean`,required:!1,default:!1,description:`Angir om feltet skal flyte med teksten`,category:`ui`},useWrapper:{attribute:`usewrapper`,name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},hasFieldset:{attribute:`hasfieldset`,name:`Bruk fieldset`,type:`boolean`,required:!1,default:null,description:`Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.`,category:`ui`},counter:{name:`Teller`,type:`boolean`,required:!1,default:null,description:`Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.`,category:`ui`},defaultValue:{attribute:`defaultvalue`,type:`string | string[]`,name:`Standardverdi`,description:`Verdien feltet får ved oppstart og ved nullstilling av skjemaet`,category:`functionality`}},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`}}},v=class extends c.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=null,this.multiple=!1,this.maxlength=null,this.displayValueAs=_.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._messageValue=null,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._skipInputTab=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=a.t(),this.triggerRef=a.t(),this.listboxRef=a.t(),this._pendingDispatchFrom=null,this.optionsController=new l.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()}focusAfterCommit(){this._skipInputTab=!0;let e=this.inputRef.value;e&&e.type!==`hidden`&&e.setAttribute(`tabindex`,`-1`),this.triggerRef.value?.focus()}restoreInputTab(){this._skipInputTab=!1}parseValue(){return this.parseToValues(this.value)}parseToValues(e){return Array.isArray(e)?this.multiple?e:e.length>0?[e[0]]:[]:e&&this.multiple?e.split(`,`):e?[e]:[]}updateMaxReached(){this._maxIsReached=s.l(this._value.length,this.maxlength)}syncPublicValue(){let e=this.multiple?this._value.join(`,`):this._value[0]||``;e!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this.value=e)}dispatchValueChange(e){let t=this._value;if(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.u({type:String,reflect:!0})],v.prototype,`value`,void 0),e.n([e.u({type:Array})],v.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],v.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],v.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],v.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],v.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],v.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],v.prototype,`multiple`,void 0),e.n([e.u({type:Number})],v.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],v.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],v.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],v.prototype,`isOpen`,void 0),e.n([e.l()],v.prototype,`_options`,void 0),e.n([e.l()],v.prototype,`_value`,void 0),e.n([e.l()],v.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],v.prototype,`_userInfoMessage`,void 0),e.n([e.l()],v.prototype,`_messageValue`,void 0),e.n([e.l()],v.prototype,`_addValueText`,void 0),e.n([e.l()],v.prototype,`_maxIsReached`,void 0),e.n([e.l()],v.prototype,`_search`,void 0),e.n([e.l()],v.prototype,`_inputFocus`,void 0),e.n([e.l()],v.prototype,`_skipInputTab`,void 0);var y=class extends v{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=s.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(),o=!this.multiple,c=this.multiple,l=s.l(this._value.length,this.maxlength),u=!1,d=!0,f=``,m=null,h=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!r&&!this.allowUserInput?(o&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,o&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&o?(this.removeAllSelected(),u=!0):o?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1,f=`valueSelected`,m=this._hasTextInput?p(t||``,this.options,this.displayValueAs):s.s(s.i(this.options,t),this.displayValueAs)):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,h=e):(o&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,h=e),this._isOptionsOpen=u,u||window.setTimeout(()=>{this.focusAfterCommit()},0),this._search=h||``,this.resetComboboxInput(d),this._userInfoMessage=f,this._messageValue=m,c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&s.l(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,m.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=s.i(this.options,e);t&&(m.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=`tooManySelected`;return}this._value=this._options.map(e=>e.value),m.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],m.markAllDeselected(this._options),this._options=m.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=`alreadySelected`;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(!s.i(this.options,e)){if(s.l(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,window.setTimeout(()=>{this.focusAfterCommit()},0)),this.requestUpdate()}refreshOptionsFromValue(){let e=g.cloneOptions(this.options);e.forEach(e=>e.selected=this._value.includes(e.value)),this._options=g.syncOptionsWithValues(e,this._value).options}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]?p(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this.refreshOptionsFromValue()}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},b=class extends y{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}=s.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.refreshOptionsFromValue()}}handleFocus(){if(!this.disabled){if(this._skipInputTab=!1,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=p(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this.refreshOptionsFromValue(),this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleCloseOptions(){this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),this.focusTrigger()}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.classList?.contains(`pkt-combobox__value`)||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=s.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}=d(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)}}!this.multiple&&this._value[0]?this.inputRef.value.value=p(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]))}}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=u(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}}}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()}}checkForMatches(){let e=f(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}},x=class extends b{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=g.cloneOptions(this.options)}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=h.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=h.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}if(super.willUpdate(e),e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen),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=g.cloneOptions(this.options)}let t=e.has(`value`),n=e.has(`_value`);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=[...this._options]),this._pendingDispatchFrom??=e}else n&&(this._pendingDispatchFrom??=e.get(`_value`)??[]);if(e.has(`defaultValue`)&&this.defaultValue!=null&&!this._value.length){let e=this.parseToValues(this.defaultValue);e.length&&(this._pendingDispatchFrom??=[...this._value],this._value=e,this._options.forEach(t=>t.selected=e.includes(t.value)),this._options=[...this._options])}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=g.mergeWithUserAdded(g.cloneOptions(this.options),t,this._value);this._options=n,n.length>this.options.length&&(this.options=n);let r=g.syncOptionsWithValues(this._options,this._value);this._options=r.options,r.newValues.length>this._value.length&&(this._pendingDispatchFrom??=[...this._value],this._value=r.newValues)}(t||n||e.has(`options`)||e.has(`defaultValue`))&&this.updateMaxReached(),this._pendingDispatchFrom&&this.syncPublicValue()}updated(e){if(this._pendingDispatchFrom){let e=this._pendingDispatchFrom;this._pendingDispatchFrom=null,this.dispatchValueChange(e)}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=!this.multiple&&this._value[0]?p(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}this.classList.add(`pkt-combobox-component`),this.classList.toggle(`pkt-combobox-component--fullwidth`,!!this.fullwidth),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=g.cloneOptions(this.options);let e=g.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._`
-      <pkt-input-wrapper
-        .strings=${this.strings}
-        .size=${this.inputSize}
-        .label=${this.label}
-        .helptext=${this.helptext}
-        .helptextDropdown=${n.t(this.helptextDropdown)}
-        .helptextDropdownButton=${n.t(this.helptextDropdownButton)}
-        ?fullwidth=${this.fullwidth}
-        ?counter=${this.effectiveCounter(!!this.multiple&&this.maxlength!=null)}
-        .counterCurrent=${this._value.length}
-        .counterMaxLength=${this.maxlength??0}
-        ?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.effectiveHasFieldset(!this._hasTextInput)}
-        class="pkt-combobox__wrapper"
-        @labelClick=${this.handleInputClick}
-      >
-        <div class="pkt-contents" slot="helptext">${i.r(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=${n.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
-            role=${n.t(this._hasTextInput?void 0:`combobox`)}
-            aria-expanded=${n.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
-            aria-controls=${n.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
-            aria-haspopup=${n.t(this._hasTextInput?void 0:`listbox`)}
-            aria-labelledby=${n.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
-            aria-activedescendant=${n.t(!this._hasTextInput&&this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
-            aria-description=${n.t(this._selectionDescription||void 0)}
-            tabindex=${this._hasTextInput||this.disabled?`-1`:`0`}
-            @click=${this.handleInputClick}
-            @keydown=${this._hasTextInput?e.h:this.handleSelectOnlyKeydown}
-            @blur=${this.restoreInputTab}
-            ${a.n(this.triggerRef)}
-          >
-            ${!this._hasTextInput&&this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement==`outside`)&&!this._inputFocus?e._`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
-                    >${this.placeholder}</span
-                  >`:this.tagPlacement===`outside`?e.h: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||``}"
-            ?disabled=${this.disabled}
-            ?include-search=${this.includeSearch}
-            ?is-multi-select=${this.multiple}
-            ?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
-            ?max-is-reached=${this._maxIsReached}
-            .customUserInput=${n.t(this._addValueText)}
-            .userMessage=${this._userInfoMessage?r.t(this.pktStrings.get(`combobox`)[this._userInfoMessage],{value:this._messageValue??``}):``}
-            @search=${this.handleSearch}
-            @option-toggle=${this.handleOptionToggled}
-            @select-all=${this.addAllOptions}
-            @close-options=${this.handleCloseOptions}
-            @tab-close=${()=>this.closeAndProcessInput()}
-            .searchValue=${this._search||null}
-            .maxLength=${this.maxlength||0}
-            ${a.n(this.listboxRef)}
-          ></pkt-listbox>
-        </div>
-
-        ${this.tagPlacement===`outside`&&this.multiple?e._`<div class="pkt-combobox__tags-outside">
-                ${this.renderSingleOrMultipleValues()}
-              </div>`:e.h}
-      </pkt-input-wrapper>
-    `}renderInputField(){return this.typeahead||this.allowUserInput?e._`
-          <div class="pkt-combobox__input-div combobox__input">
-            <input
-              type="text"
-              id="${this.id}-input"
-              name=${(this.name||this.id)+`-input`}
-              placeholder=${n.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
-              @input=${this.handleInput}
-              @change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
-              tabindex=${n.t(this._skipInputTab?`-1`:void 0)}
-              @keydown=${this.handleInputKeydown}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-              autocomplete="off"
-              role="combobox"
-              aria-expanded=${this._isOptionsOpen?`true`:`false`}
-              aria-label=${n.t(this.label)}
-              aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
-              aria-controls="${this.id}-listbox"
-              aria-activedescendant=${n.t(this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
-              aria-description=${n.t(this._selectionDescription||void 0)}
-              ${a.n(this.inputRef)}
-            />
-          </div>
-        `:e._`
-          <input
-            type="hidden"
-            id="${this.id}-input"
-            name=${(this.name||this.id)+`-input`}
-            .value=${this._value.join(`,`)}
-            ${a.n(this.inputRef)}
-          />
-        `}renderSingleOrMultipleValues(){if(!this.multiple&&this._hasTextInput)return e.h;let t=!this.multiple,n=this.renderValueTag(s.i(this.options,this._value[0])),r=this.tagPlacement===`outside`,i=e._`
-      <ul role="list" class="pkt-combobox__tag-list">
-        ${o.t(this._value,e=>e,(t,n)=>{let i=s.i(this.options,t),a=i?.tagSkinColor;return e._`
-              <li
-                role="listitem"
-                @click=${r?e.h:e=>e.stopPropagation()}
-                @mousedown=${r?e.h:e=>e.preventDefault()}
-              >
-                <pkt-tag
-                  skin=${a||`blue-dark`}
-                  ?closeTag=${!this.disabled}
-                  .buttonTabindex=${r?void 0:-1}
-                  @close=${()=>this.handleTagRemove(t)}
-                  @keydown=${r?e.h:e=>this.handleTagKeydown(e,n)}
-                >
-                  ${this.renderValueTag(i)}
-                </pkt-tag>
-              </li>
-            `})}
-      </ul>
-    `;return!t&&this._value.length===0?e.h:t?n:i}renderValueTag(t){if(!t)return``;switch(this.displayValueAs){case`prefixAndValue`:return e._`<span class="pkt-combobox__value">${t.prefix||``} ${t.value}</span>`;case`value`:return e._`<span class="pkt-combobox__value">${t.value}</span>`;default:return e._`<span class="pkt-combobox__value">${t.label||t.value}</span>`}}};try{e.d(`pkt-combobox`)(x)}catch{console.warn(`Forsøker å definere <pkt-combobox>, men den er allerede definert`)}var S=x;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return S}});

package/dist/if-defined-BbUZeoaQ.cjs

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