@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/src/components/listbox/listbox.ts

@@ -5,8 +5,23 @@ import strings from '@/translations/no.json'
 import { PktElement } from '@/base-elements/element'
 import { repeat } from 'lit/directives/repeat.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { IPktComboboxOption } from '@/components/combobox/combobox'
+import type { IPktComboboxOption } from 'shared-types/combobox'
 import { uuidish } from 'shared-utils/utils'
+import { filterOptionsBySearch } from 'shared-utils/combobox/option-utils'
+import {
+  isLetterOrSpace,
+  createTypeaheadHandler,
+  findTypeaheadOptionMatch,
+} from 'shared-utils/combobox/typeahead'
+import {
+  focusAndScrollIntoView,
+  getOptionElements,
+  focusNextOption as navFocusNext,
+  focusPreviousOption as navFocusPrev,
+  focusFirstOption as navFocusFirst,
+  focusLastOption as navFocusLast,
+  focusFirstOrSelectedOption as navFocusFirstOrSelected,
+} from 'shared-utils/combobox/keyboard-navigation'
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -34,19 +49,21 @@ export class PktListbox extends PktElement implements IPktListbox {
   @property({ type: String }) id: string = uuidish()
   @property({ type: String }) label: string | null = null
   @property({ type: Array }) options: IPktComboboxOption[] = []
-  @property({ type: Boolean, reflect: true }) isOpen: boolean = false
+  @property({ type: Boolean, reflect: true, attribute: 'is-open' }) isOpen: boolean = false
   @property({ type: Boolean }) disabled: boolean = false
-  @property({ type: Boolean }) includeSearch: boolean = false
-  @property({ type: Boolean }) isMultiSelect: boolean = false
-  @property({ type: Boolean }) allowUserInput: boolean = false
-  @property({ type: Boolean }) maxIsReached: boolean = false
-  @property({ type: String }) customUserInput: string | null = null
-  @property({ type: String }) searchPlaceholder: string | null = null
-  @property({ type: String }) searchValue: string | null = null
-  @property({ type: Number }) maxLength: number = 0
-  @property({ type: String }) userMessage: string | null = null
+  @property({ type: Boolean, attribute: 'include-search' }) includeSearch: boolean = false
+  @property({ type: Boolean, attribute: 'is-multi-select' }) isMultiSelect: boolean = false
+  @property({ type: Boolean, attribute: 'allow-user-input' }) allowUserInput: boolean = false
+  @property({ type: Boolean, attribute: 'max-is-reached' }) maxIsReached: boolean = false
+  @property({ type: String, attribute: 'custom-user-input' }) customUserInput: string | null = null
+  @property({ type: String, attribute: 'search-placeholder' }) searchPlaceholder: string | null =
+    null
+  @property({ type: String, attribute: 'search-value' }) searchValue: string | null = null
+  @property({ type: Number, attribute: 'max-length' }) maxLength: number = 0
+  @property({ type: String, attribute: 'user-message' }) userMessage: string | null = null
 
   private _selectedOptions: number = 0
+  private typeahead = createTypeaheadHandler()
 
   @state() private _filteredOptions: IPktComboboxOption[] = []
 
@@ -63,6 +80,11 @@ export class PktListbox extends PktElement implements IPktListbox {
     this.addEventListener('focus', this.focusFirstOrSelectedOption)
   }
 
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.typeahead.reset()
+  }
+
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has('options') || changedProperties.has('searchValue')) {
       this.filterOptions()
@@ -71,13 +93,17 @@ export class PktListbox extends PktElement implements IPktListbox {
   }
 
   attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
-    if (name === 'options' || name === 'searchValue' || name === 'search-value') {
+    if (name === 'options' || name === 'search-value') {
       this.filterOptions()
     }
     super.attributeChangedCallback(name, _old, value)
   }
 
   // Render methods
+  private get _hasOptions(): boolean {
+    return this._filteredOptions.length > 0 || this.options.length > 0
+  }
+
   render() {
     return html`
       <div
@@ -86,22 +112,25 @@ export class PktListbox extends PktElement implements IPktListbox {
           'pkt-listbox__open': this.isOpen,
           'pkt-txt-16-light': true,
         })}
-        role="listbox"
-        aria-multiselectable=${ifDefined(this.isMultiSelect ? 'true' : undefined)}
-        aria-label=${ifDefined(this.label)}
+        role=${ifDefined(this._hasOptions ? 'listbox' : undefined)}
+        aria-multiselectable=${ifDefined(
+          this._hasOptions && this.isMultiSelect ? 'true' : undefined,
+        )}
+        aria-label=${ifDefined(this._hasOptions ? (this.label ?? undefined) : undefined)}
       >
         <div class="pkt-listbox__banners">
-          ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
-          ${this.renderNewOptionBanner()} ${this.renderSearch()}
+          ${this.renderSearch()} ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
+          ${this.renderEmptyMessage()} ${this.renderNewOptionBanner()}
         </div>
         <ul class="pkt-listbox__options" role="presentation">
           ${this.renderList()}
         </ul>
       </div>
+      <div aria-live="polite" class="pkt-visually-hidden">${this.userMessage}</div>
     `
   }
 
-  renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number) {
+  private renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number) {
     return this.isMultiSelect
       ? html`
           <input
@@ -120,7 +149,17 @@ export class PktListbox extends PktElement implements IPktListbox {
         : nothing
   }
 
-  renderList() {
+  private renderEmptyMessage() {
+    if (this.options.length > 0 || this._filteredOptions.length > 0 || this.userMessage) {
+      return nothing
+    }
+    return html`<div class="pkt-listbox__banner pkt-listbox__banner--empty">
+      <pkt-icon class="pkt-listbox__banner-icon" name="exclamation-mark-circle" size="large"></pkt-icon>
+      Tom liste
+    </div>`
+  }
+
+  private renderList() {
     return html`
       ${repeat(
         this._filteredOptions,
@@ -144,6 +183,11 @@ export class PktListbox extends PktElement implements IPktListbox {
             ?data-disabled=${this.disabled ||
             option.disabled ||
             (this.maxIsReached && !option.selected)}
+            aria-disabled=${this.disabled ||
+            option.disabled ||
+            (this.maxIsReached && !option.selected)
+              ? 'true'
+              : 'false'}
             role="option"
             id=${`${this.id}-${index}`}
           >
@@ -165,7 +209,7 @@ export class PktListbox extends PktElement implements IPktListbox {
     `
   }
 
-  renderNewOptionBanner() {
+  private renderNewOptionBanner() {
     return this.allowUserInput && this.customUserInput
       ? html`
           <div
@@ -181,13 +225,13 @@ export class PktListbox extends PktElement implements IPktListbox {
             @keydown=${this.handleOptionKeydown}
           >
             <pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
-            Legg til “${this.customUserInput}”
+            Legg til "${this.customUserInput}"
           </div>
         `
       : nothing
   }
 
-  renderMaximumReachedBanner() {
+  private renderMaximumReachedBanner() {
     this._selectedOptions = this.options.filter((option) => option.selected).length
 
     return this.isMultiSelect && this._selectedOptions > 0 && this.maxLength > 0
@@ -199,7 +243,7 @@ export class PktListbox extends PktElement implements IPktListbox {
       : nothing
   }
 
-  renderUserMessage() {
+  private renderUserMessage() {
     return this.userMessage
       ? html`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
           <pkt-icon
@@ -212,7 +256,7 @@ export class PktListbox extends PktElement implements IPktListbox {
       : nothing
   }
 
-  renderSearch() {
+  private renderSearch() {
     return this.includeSearch
       ? html`
           <div class="pkt-listbox__search">
@@ -239,7 +283,7 @@ export class PktListbox extends PktElement implements IPktListbox {
   }
 
   // Event handlers
-  handleSearchInput(e: InputEvent) {
+  private handleSearchInput(e: InputEvent) {
     this.searchValue = (e.target as HTMLInputElement).value
     this.dispatchEvent(
       new CustomEvent('search', {
@@ -249,7 +293,7 @@ export class PktListbox extends PktElement implements IPktListbox {
     )
   }
 
-  handleSearchKeydown(e: KeyboardEvent) {
+  private handleSearchKeydown(e: KeyboardEvent) {
     switch (e.key) {
       case 'Enter':
         e.preventDefault()
@@ -260,20 +304,22 @@ export class PktListbox extends PktElement implements IPktListbox {
         e.preventDefault()
         break
       case 'ArrowDown':
-      case 'Tab':
         this.focusFirstOrSelectedOption()
         break
+      case 'Tab':
+        this.tabClose()
+        break
     }
   }
 
-  handleOptionKeydown(e: KeyboardEvent) {
+  private handleOptionKeydown(e: KeyboardEvent) {
     const target = e.currentTarget as HTMLElement
     const value = target.dataset.value
     const itemType = target.dataset.type
     const isValueSelected = target.dataset.selected === 'true'
 
     if (
-      !this.getOptionElements().length &&
+      !getOptionElements(this).length &&
       (!this.customUserInput || (!this.allowUserInput && this.customUserInput)) &&
       itemType !== 'new-option' &&
       itemType !== 'searchbox'
@@ -300,18 +346,22 @@ export class PktListbox extends PktElement implements IPktListbox {
         break
 
       case 'Escape':
-      case 'Tab':
         this.closeOptions()
+        e.preventDefault()
+        break
+      case 'Tab':
+        // Don't preventDefault — let Tab move focus naturally
+        this.tabClose()
         break
 
       case 'ArrowDown':
         if (e.altKey) {
-          this.focusLastOption()
+          navFocusLast(this)
         } else {
           if (itemType === 'searchbox' || itemType === 'new-option') {
-            this.focusFirstOption()
+            navFocusFirst(this)
           } else {
-            this.focusNextOption(target)
+            navFocusNext(target)
           }
         }
         e.preventDefault()
@@ -319,7 +369,7 @@ export class PktListbox extends PktElement implements IPktListbox {
 
       case 'ArrowUp':
         if (e.altKey) {
-          this.focusFirstOption()
+          navFocusFirst(this)
         } else {
           if (target.dataset.index === '0' && this.includeSearch) {
             const searchInput = this.querySelector('[role="searchbox"]') as HTMLElement
@@ -328,19 +378,19 @@ export class PktListbox extends PktElement implements IPktListbox {
             const newOption = this.querySelector('[data-type="new-option"]') as HTMLElement
             newOption && newOption.focus()
           } else {
-            this.focusPreviousOption(target)
+            navFocusPrev(target, this, this.includeSearch)
           }
         }
         e.preventDefault()
         break
 
       case 'Home':
-        this.focusFirstOption()
+        navFocusFirst(this)
         e.preventDefault()
         break
 
       case 'End':
-        this.focusLastOption()
+        navFocusLast(this)
         e.preventDefault()
         break
 
@@ -349,7 +399,7 @@ export class PktListbox extends PktElement implements IPktListbox {
           this.selectAll()
           e.preventDefault()
         }
-        if (this.isLetterOrSpace(e.key)) {
+        if (isLetterOrSpace(e.key)) {
           this.handleTypeAhead(e.key)
           e.preventDefault()
         }
@@ -357,57 +407,18 @@ export class PktListbox extends PktElement implements IPktListbox {
     }
   }
 
-  // Focus management methods
-  focusAndScrollIntoView(el: HTMLElement) {
-    el.scrollIntoView({ block: 'nearest' })
-    window.setTimeout(() => el.focus(), 0)
-  }
-
-  focusNextOption(target: HTMLElement) {
-    const nextOption = target.nextElementSibling as HTMLElement
-    nextOption && this.focusAndScrollIntoView(nextOption)
-  }
-
-  focusPreviousOption(target: HTMLElement) {
-    const previousOption = target.previousElementSibling as HTMLElement
-    if (target.dataset.index === '0' && this.includeSearch) {
-      const searchInput = this.querySelector('[role="searchbox"]') as HTMLElement
-      searchInput && this.focusAndScrollIntoView(searchInput)
-    } else if (previousOption) {
-      this.focusAndScrollIntoView(previousOption)
-    }
-  }
-
-  focusFirstOption() {
-    const firstOption = this.getOptionElements()[0]
-    firstOption && this.focusAndScrollIntoView(firstOption)
-  }
-
-  focusLastOption() {
-    const lastOption = this.getOptionElements().pop()
-    lastOption && this.focusAndScrollIntoView(lastOption)
-  }
-
+  // Focus management methods (delegates to shared utils)
   focusFirstOrSelectedOption() {
-    if (this.disabled) return
-    const selectedOption = this.getOptionElements().find(
-      (option) => option.dataset.selected === 'true',
-    )
-    if (this.allowUserInput && this.customUserInput) {
-      const newOption = this.querySelector('[data-type="new-option"]') as HTMLElement
-      this.focusAndScrollIntoView(newOption)
-    } else if (selectedOption) {
-      this.focusAndScrollIntoView(selectedOption)
-    } else if (this.includeSearch && !(document.activeElement instanceof HTMLInputElement)) {
-      const searchInput = this.querySelector('[role="searchbox"]') as HTMLElement
-      window.setTimeout(() => searchInput.focus(), 0)
-    } else {
-      this.focusFirstOption()
-    }
+    navFocusFirstOrSelected(this, {
+      disabled: this.disabled,
+      allowUserInput: this.allowUserInput,
+      customUserInput: this.customUserInput,
+      includeSearch: this.includeSearch,
+    })
   }
 
   // Event dispatching methods
-  toggleOption(option: IPktComboboxOption | HTMLElement) {
+  private toggleOption(option: IPktComboboxOption | HTMLElement) {
     const optionDisabled = option instanceof HTMLElement ? option.dataset.disabled : option.disabled
     if (this.disabled || optionDisabled) return
     const value = option instanceof HTMLElement ? option.dataset.value : option.value
@@ -419,57 +430,29 @@ export class PktListbox extends PktElement implements IPktListbox {
     )
   }
 
-  selectAll() {
+  private selectAll() {
     this.dispatchEvent(new CustomEvent('select-all', { bubbles: false }))
   }
 
-  closeOptions() {
+  private closeOptions() {
     this.dispatchEvent(new CustomEvent('close-options', { bubbles: false }))
   }
 
-  // Filtering and typeahead methods
-
-  filterOptions() {
-    if (this.searchValue) {
-      this._filteredOptions = this.options.filter((option) => {
-        const fulltext = option.fulltext || option.label + option.value + (option.prefix || '')
-        return fulltext.toLowerCase().includes(this.searchValue?.toLowerCase() || '')
-      })
-    } else {
-      this._filteredOptions = [...this.options]
-    }
+  private tabClose() {
+    this.dispatchEvent(new CustomEvent('tab-close', { bubbles: false }))
   }
 
-  isLetterOrSpace(char: string): boolean {
-    return /^[\p{L} ]$/u.test(char)
-  }
-
-  handleTypeAhead(char: string) {
-    this.typeAheadString += char.toLowerCase()
-
-    if (this.typeAheadTimeout) {
-      clearTimeout(this.typeAheadTimeout)
-    }
-
-    this.typeAheadTimeout = window.setTimeout(() => {
-      this.typeAheadString = ''
-    }, 500)
-
-    const options = this.getOptionElements()
-    const match = options.find((option) =>
-      option.textContent?.trim().toLowerCase().startsWith(this.typeAheadString),
-    )
-
-    match && this.focusAndScrollIntoView(match)
+  // Filtering and typeahead methods
+  filterOptions() {
+    this._filteredOptions = filterOptionsBySearch(this.options, this.searchValue)
   }
 
-  // DOM helper methods
-  getOptionElements() {
-    if (!this._filteredOptions.length) {
-      return []
+  private handleTypeAhead(char: string) {
+    const searchString = this.typeahead.append(char)
+    const options = getOptionElements(this)
+    const matchIndex = findTypeaheadOptionMatch(options, searchString)
+    if (matchIndex >= 0) {
+      focusAndScrollIntoView(options[matchIndex])
     }
-    return Array.from(
-      this.querySelectorAll('[role="option"]:not([data-disabled])') || [],
-    ) as HTMLElement[]
   }
 }

package/src/components/tag/tag.ts

@@ -56,6 +56,8 @@ export class PktTag extends PktElement<IPktTag> implements IPktTag {
   @property({ type: String, reflect: true }) iconName: string | undefined = undefined
   @property({ type: String }) type: TTagType = specs.props.type.default as TTagType
   @property({ type: String }) ariaLabel: string | null = null
+  @property({ type: Number, attribute: 'button-tabindex' }) buttonTabindex: number | undefined =
+    undefined
 
   /**
    * Element state
@@ -116,6 +118,7 @@ export class PktTag extends PktElement<IPktTag> implements IPktTag {
         <button
           class=${classMap(btnClasses)}
           type=${this.type}
+          tabindex=${ifDefined(this.buttonTabindex)}
           @click=${this.close}
           aria-label=${ifDefined(this.ariaLabel || undefined)}
           aria-description=${ifDefined(this._ariaDescription || undefined)}

package/dist/combobox-C5YcNVSZ.cjs

@@ -1,128 +0,0 @@
-"use strict";const o=require("./element-CMTfByxQ.cjs"),c=require("./if-defined-hKKmbsI8.cjs"),d=require("./state-BNgpvY-A.cjs"),r=require("./ref-CxLwrCxt.cjs"),y=require("./class-map-Bokp1SoS.cjs"),O=require("./repeat-C-FJ2vfy.cjs"),I=require("./input-element-DM0tY799.cjs"),$=require("./pkt-options-controller-BnTmkl3g.cjs"),w=require("./pkt-slot-controller-D4nKlom5.cjs");require("./input-wrapper-JU4D2TGu.cjs");require("./icon-Dj0oZZSa.cjs");require("./tag-BnT5onW2.cjs");require("./listbox-C7NEa9SU.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(b,t,e,i)=>{for(var s=i>1?void 0:i?A(t,e):t,a=b.length-1,l;a>=0;a--)(l=b[a])&&(s=(i?l(t,e,s):l(s))||s);return i&&s&&V(t,e,s),s};exports.PktCombobox=class extends I.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),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=R.props.displayValueAs.default,this.tagPlacement=null,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage="",this._addValueText=null,this._maxIsReached=!1,this._search="",this._inputFocus=!1,this._editingSingleValue=!1,this.inputRef=r.e(),this.arrowRef=r.e(),this.listboxRef=r.e(),this.focusRef=r.e(),this.optionTagRef=r.e(),this.optionsController=new $.PktOptionsSlotController(this),this.slotController=new w.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){var t,e;if(super.connectedCallback(),document&&document.body.addEventListener("click",i=>{this._isOptionsOpen&&!this.contains(i.target)&&this.handleFocusOut(i)}),this._options=[],this.defaultOptions&&this.defaultOptions.length){const i=((t=this.options)==null?void 0:t.filter(s=>s.userAdded))||[];this.options=[...i,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if((e=this.optionsController)!=null&&e.nodes&&this.optionsController.nodes.length){const i=[];this.optionsController.nodes.forEach(s=>{if(!s.textContent&&!s.getAttribute("value"))return null;const a={value:s.getAttribute("value")||s.textContent||"",label:s.textContent||s.getAttribute("value")||""};s.getAttribute("data-prefix")&&(a.prefix=s.getAttribute("data-prefix")||void 0),s.getAttribute("tagskincolor")&&(a.tagSkinColor=s.getAttribute("tagskincolor")),s.getAttribute("description")&&(a.description=s.getAttribute("description")||void 0),a.fulltext=a.value+a.label+(a.prefix||""),i.push(a)}),i.length&&(this.options=[...i],this._options=[...i])}}updated(t){if(t.has("_value")&&this.valueChanged(this._value,t.get("_value")),t.has("value")&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),t.has("defaultOptions")&&this.defaultOptions.length){const e=(Array.isArray(this.options)?this.options:[]).filter(i=>i.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=Array.isArray(this.options)?[...this.options]:[]}if(t.has("options")){const s=(t.get("options")||this._options||[]).filter(l=>l&&l.userAdded).filter(l=>!(Array.isArray(this.options)?this.options:[]).some(h=>h.value===l.value)),a=[...s,...this.options];this._options=a,s.length>0&&(this.options=a),this._options.forEach(l=>{if(l.value&&!l.label&&(l.label=l.value),l.selected&&!this._value.includes(l.value)){const h=[...this._value];this._value=[...this._value,l.value],this.valueChanged(this._value,h)}l.fulltext=l.value+l.label+(l.prefix||""),l.selected=l.selected||this._value.includes(l.value)})}t.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(t)}attributeChangedCallback(t,e,i){t==="value"&&(Array.isArray(this.value)?this._value=this.value:this.value&&this.multiple?this._value=this.value.split(","):this.value?this._value=[this.value]:this._value=[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),t==="options"&&(this._options=Array.isArray(this.options)?[...this.options]:[],this._options.forEach(s=>{s.value&&!s.label&&(s.label=s.value),s.selected&&!this._value.includes(s.value)&&(this._value=[...this._value,s.value]),s.fulltext=s.value+s.label+(s.prefix||"")}),this._search=""),super.attributeChangedCallback(t,e,i)}render(){return o.b`
-      <pkt-input-wrapper
-        .label=${this.label}
-        .helptext=${this.helptext}
-        .helptextDropdown=${c.o(this.helptextDropdown)}
-        .helptextDropdownButton=${c.o(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.allowUserInput||this.typeahead?this.id+"-input":this.id+"-arrow"}
-        class="pkt-combobox__wrapper"
-        @labelClick=${this.handleInputClick}
-      >
-        <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
-          <div
-            class=${y.e({"pkt-combobox__input":!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})}
-            tabindex="-1"
-            @click=${this.handleInputClick}
-          >
-            ${this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement=="outside")&&!this._inputFocus?o.b`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
-                  >${this.placeholder}</span
-                >`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():o.A}
-            ${this.renderInputField()}
-            <div
-              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
-              @click=${this.handleArrowClick}
-              @keydown=${this.handleArrowClick}
-              id="${this.id}-arrow"
-              ${r.n(this.arrowRef)}
-              aria-expanded=${this._isOptionsOpen}
-              aria-controls="${this.id}-listbox"
-              aria-haspopup="listbox"
-              aria-label="Åpne liste"
-              ?disabled=${this.disabled}
-              ?data-disabled=${this.disabled}
-              role="button"
-              tabindex="${this.disabled?"-1":"0"}"
-            >
-              <pkt-icon
-                class=${y.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
-                name="chevron-thin-down"
-              ></pkt-icon>
-            </div>
-            <div
-              ${r.n(this.focusRef)}
-              tabindex="-1"
-              @keydown=${this.handleArrowClick}
-              class="pkt-contents"
-            ></div>
-          </div>
-
-          <pkt-listbox
-            id="${this.id}-listbox"
-            .options=${this._options}
-            .isOpen=${this._isOptionsOpen}
-            .searchPlaceholder=${this.searchPlaceholder}
-            .label="Liste: ${this.label||""}"
-            ?includeSearch=${this.includeSearch}
-            ?isMultiSelect=${this.multiple}
-            ?allowUserInput=${this.allowUserInput&&!this._maxIsReached}
-            ?maxIsReached=${this._maxIsReached}
-            .customUserInput=${c.o(this._addValueText)}
-            .userMessage=${this._userInfoMessage}
-            @search=${this.handleSearch}
-            @option-toggle=${this.handleOptionToggled}
-            @select-all=${this.addAllOptions}
-            @close-options=${()=>this._isOptionsOpen=!1}
-            .searchValue=${this._search||null}
-            .maxLength=${this.maxlength||0}
-            ${r.n(this.listboxRef)}
-          ></pkt-listbox>
-        </div>
-
-        ${this.tagPlacement==="outside"&&this.multiple?o.b`<div class="pkt-combobox__tags-outside">
-              ${this.renderSingleOrMultipleValues()}
-            </div>`:o.A}
-      </pkt-input-wrapper>
-    `}renderInputField(){return this.typeahead||this.allowUserInput?o.b`
-          <div class="pkt-combobox__input-div combobox__input">
-            <input
-              type="text"
-              id="${this.id}-input"
-              name=${(this.name||this.id)+"-input"}
-              @input=${this.handleInput}
-              @keydown=${this.handleInputKeydown}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-              autocomplete="off"
-              role="combobox"
-              aria-label=${c.o(this.label)}
-              aria-autocomplete=${this.typeahead?"both":"list"}
-              aria-controls="${this.id}-listbox"
-              aria-activedescendant=${c.o(this._value[0]&&this.findValueInOptions(this._value[0])?`${this.id}-listbox-${this.findIndexInOptions(this._value[0])}`:void 0)}
-              ${r.n(this.inputRef)}
-            />
-          </div>
-        `:o.b`
-          <input
-            type="hidden"
-            id="${this.id}-input"
-            name=${(this.name||this.id)+"-input"}
-            .value=${this._value.join(",")}
-            ${r.n(this.inputRef)}
-          />
-        `}renderSingleOrMultipleValues(){const t=!this.multiple,e=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=O.c(this._value,s=>s,s=>{var h;const a=this.findValueInOptions(s),l=(h=this.options.find(u=>u.value===s))==null?void 0:h.tagSkinColor;return o.b`
-          <pkt-tag
-            skin=${l||"blue-dark"}
-            ?closeTag=${!this.disabled}
-            @close=${()=>this.handleTagRemove(s)}
-          >
-            ${this.renderValueTag(a)}
-          </pkt-tag>
-        `});return t?e:i}renderValueTag(t){if(!t)return"";switch(this.displayValueAs){case"prefixAndValue":return o.b`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.prefix||""} ${t.value}</span
-        >`;case"value":return o.b`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.value}</span
-        >`;case"label":default:return o.b`<span class="pkt-combobox__value" data-focusfix=${this.id}
-          >${t.label||t.value}</span
-        >`}}handleInput(t){if(t.stopPropagation(),t.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const e=t.target;if(this._search=e.value,this.checkForMatches(),this.typeahead)if(this._search){if(this._options=this.options.filter(i=>{var s;return(s=i.fulltext)==null?void 0:s.toLowerCase().includes(this._search.toLowerCase())}),t.inputType!=="deleteContentBackward"){const i=this._options.filter(s=>{var a;return!s.selected&&((a=s.label)==null?void 0:a.toLowerCase().startsWith(this._search.toLowerCase()))});if(i.length>0&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const s=i[0];s!=null&&s.label&&(e.value=s.label,window.setTimeout(()=>e.setSelectionRange(this._search.length,e.value.length),0),e.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const t=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&(t!=null&&t.label)?t.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(t){var e,i,s,a,l;if(!this.disabled&&((i=(e=t.relatedTarget)==null?void 0:e.closest("pkt-combobox"))==null?void 0:i.id)!==this.id&&((a=(s=t.relatedTarget)==null?void 0:s.closest("pkt-combobox"))==null?void 0:a.id)!==this.id&&((l=t.target)==null?void 0:l.getAttribute("data-focusfix"))!==this.id&&t.relatedTarget!==this.focusRef.value&&t.relatedTarget!==this.inputRef.value&&t.relatedTarget!==this.arrowRef.value&&this._isOptionsOpen){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage="",this._search="",this.inputRef.value&&this.inputRef.value.type!=="hidden"&&this.inputRef.value.value!==""){const h=this.inputRef.value.value,u=this.findValueInOptions(h);!this._value.includes(h)&&!u?this.allowUserInput?this.addNewUserValue(h):this.multiple||this.removeValue(this._value[0]):u&&!this._value.includes(u.value)&&this.setSelected(u.value),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(t){var e,i;if(this.disabled){t.preventDefault(),t.stopImmediatePropagation();return}t.currentTarget&&t.currentTarget!==this.arrowRef.value&&((e=this.inputRef.value)==null?void 0:e.type)!=="hidden"?((i=this.inputRef.value)==null||i.focus(),this.requestUpdate()):this.handleArrowClick(t)}handlePlaceholderClick(t){this.disabled||(t.stopPropagation(),this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()))}handleArrowClick(t){var e,i;this.disabled||t instanceof KeyboardEvent&&t.key&&t.key!=="Enter"&&t.key!==" "&&t.key!=="ArrowDown"||(t.stopImmediatePropagation(),t.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(e=this.listboxRef.value)==null||e.focusFirstOrSelectedOption():(i=this.arrowRef.value)==null||i.focus())}handleOptionToggled(t){this.toggleValue(t.detail)}handleSearch(t){t.stopPropagation(),this._search=t.detail.toLowerCase()}handleInputKeydown(t){var e,i,s;switch(t.key){case",":this.multiple&&(t.preventDefault(),this.addValue());break;case"Enter":t.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((e=this.inputRef.value)==null?void 0:e.type)==="hidden"&&this.removeLastValue(t);break;case"Tab":case"ArrowDown":t.shiftKey||((i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption(),t.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(s=this.arrowRef.value)==null||s.focus(),t.preventDefault();break}}handleTagRemove(t){this.removeSelected(t)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var l;const t=((l=this.inputRef.value)==null?void 0:l.value)||this._search||"",e=t.trim().toLowerCase()||"";if(!e){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const i=this._value.find(h=>h.toLowerCase()===e),s=this._options.filter(h=>{var u;return((u=h.label)==null?void 0:u.toLowerCase().includes(e))??!1}),a=s.find(h=>{var u;return((u=h.label)==null?void 0:u.toLowerCase())===e||h.value.toLowerCase()===e});switch(!0){case((s.length===0||!a)&&this.allowUserInput):this._addValueText=t,this._userInfoMessage="";break;case(s.length===0&&!this._options.length&&!this.allowUserInput):this._addValueText=null,this._userInfoMessage="Ingen match i søket";break;case!!i:this._addValueText=null,this._userInfoMessage="Verdien er allerede valgt";break;case s.length>1:this._addValueText=null,this._userInfoMessage="";break;default:this._addValueText=null,this._userInfoMessage=""}}findValueInOptions(t){return this.options.find(e=>e.value===t||e.label===t)||null}findIndexInOptions(t){return this._options.findIndex(e=>e.value===t||e.label===t)}isMaxItemsReached(){const t=this.maxlength!==null&&this._value.length>=this.maxlength;return t?this._maxIsReached=!0:this._maxIsReached=!1,t}toggleValue(t){var x,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const e=((x=this.findValueInOptions(t))==null?void 0:x.value)||null,i=this._value.includes(t||e||""),s=!!e,a=((k=this._options.find(_=>_.value===t))==null?void 0:k.disabled)||!1,l=!(t!=null&&t.trim()),h=!this.multiple,u=this.multiple,g=this.isMaxItemsReached();let p=!1,f=!0,v="",m="";a||(!s&&this.allowUserInput&&!l?(this.addNewUserValue(t),v="Ny verdi lagt til",p=!u):!s&&!this.allowUserInput?(h&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,v="Ingen treff i søket"):i?(this.removeValue(e),p=!0):l&&h?(this.removeAllSelected(),p=!0):h?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(e),p=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):u&&!g?(this.setSelected(e),p=!0):u&&g?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=t):(h&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=t),this._isOptionsOpen=p,p||window.setTimeout(()=>{var _;(_=this.focusRef.value)==null||_.focus()},0),this._userInfoMessage=v,this._search=m||"",this.resetComboboxInput(f),u&&this.isMaxItemsReached())}setSelected(t){if(!this._value.includes(t)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=t?[...this._value,t]:this._value,this._options=this._options.map(e=>(e.value===t&&(e.selected=!0),e)),this.resetComboboxInput(!0)}}removeSelected(t){if(!t)return;this._value=this._value.filter(i=>i!==t);const e=this.findValueInOptions(t);e?(e.selected=!1,e.userAdded?(this._options=[...this._options.filter(i=>i.value!==t)],this.options=[...this.options.filter(i=>i.value!==t)]):this._options=[...this._options,e]):!t&&!this.multiple&&(this._options=this._options.map(i=>(i.selected=!1,i)))}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage="For mange valgt";return}this._value=this._options.map(t=>t.value),this._options=this._options.map(t=>(t.selected=!0,t)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(t=>(t.selected=!1,t)),this._options=this._options.filter(t=>!t.userAdded),this.requestUpdate()}addValue(){var e;const t=((e=this.inputRef.value)==null?void 0:e.value.trim())||"";this._search=t,this.toggleValue(t)}removeValue(t){this._value=this.multiple?this._value.filter(e=>e!==t):[],this.removeSelected(t)}addNewUserValue(t){if(!t||t.trim()==="")return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[t],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(t)){if(this.isMaxItemsReached())return;this._value=[...this._value,t]}const e={value:t,label:t,userAdded:!0};this.options=[e,...this.options],this._options=[e,...this._options],this.setSelected(t),this.requestUpdate()}resetComboboxInput(t=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&t)if(this._search="",this.multiple)this.inputRef.value.value="";else{const e=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&(e!=null&&e.label)?e.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(t){if(this._value.length===0)return;t.preventDefault();const e=this._value[this._value.length-1];e&&this.removeSelected(e),this.isMaxItemsReached()}};n([o.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);n([o.n({type:Array})],exports.PktCombobox.prototype,"options",2);n([o.n({type:Array})],exports.PktCombobox.prototype,"defaultOptions",2);n([o.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);n([o.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);n([o.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);n([o.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);n([o.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);n([o.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);n([o.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);n([o.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);n([d.r()],exports.PktCombobox.prototype,"_options",2);n([d.r()],exports.PktCombobox.prototype,"_value",2);n([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);n([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);n([d.r()],exports.PktCombobox.prototype,"_addValueText",2);n([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);n([d.r()],exports.PktCombobox.prototype,"_search",2);n([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);n([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=n([o.t("pkt-combobox")],exports.PktCombobox);