nve-designsystem 3.1.0 → 3.3.0

package/components/nve-combobox/nve-combobox.component.js

@@ -1,351 +1,194 @@
-import u from "./nve-combobox.styles.js";
-import { a as d, x as h } from "../../chunks/lit-element.js";
-import { e as f, n as b } from "../../chunks/ref.js";
-import { o as v } from "../../chunks/unsafe-html.js";
-import { n as r, t as y } from "../../chunks/property.js";
-import { r as p } from "../../chunks/state.js";
-import "../nve-popup/nve-popup.component.js";
-import "../nve-input/nve-input.component.js";
-import "../nve-menu/nve-menu.component.js";
-import "../nve-option/nve-option.component.js";
+import { a as e, t } from "../../chunks/lit.js";
+import { a as n, o as r, s as i, t as a } from "../../chunks/decorate.js";
+import { t as o } from "../../chunks/unsafe-html.js";
+import { n as s, t as c } from "../../chunks/ref.js";
 import "../nve-icon/nve-icon.component.js";
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, i, l) => {
-  for (var a = l > 1 ? void 0 : l ? g(t, i) : t, n = e.length - 1, c; n >= 0; n--)
-    (c = e[n]) && (a = (l ? c(t, i, a) : c(a)) || a);
-  return l && a && m(t, i, a), a;
-};
-let s = class extends d {
-  /**
-   * Oppretter en ny instans av NveCombobox.
-   */
-  constructor() {
-    super(), this.helpText = void 0, this.requiredLabel = "*Obligatorisk", this.errorMessage = "-!ERROR!-", this.options = [], this.max = 1 / 0, this.min = void 0, this.disabled = !1, this.filled = !1, this.required = !1, this.size = "medium", this.testId = void 0, this.listWithSearchHits = [], this.displaySearchResult = !1, this.selectedOptions = [], this.inputValue = "", this.isPopupActive = !1, this.error = !1, this.prefixInputRef = f(), this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
-  }
-  /**
-   * Kalles første gang komponenten er rendret.
-   * Setter selectedOptions basert på options med selected=true.
-   */
-  firstUpdated() {
-    this.selectedOptions = this.options.filter((e) => e?.selected);
-  }
-  /**
-   * Legger til event listener for å håndtere klikk utenfor komponenten.
-   */
-  connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.boundHandleOutsideClick, !0), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this));
-  }
-  /**
-   * Fjerner event listener når komponenten fjernes fra DOM.
-   */
-  disconnectedCallback() {
-    document.removeEventListener("click", this.boundHandleOutsideClick, !0), this.closest("form")?.removeEventListener("submit", this.handleSubmit.bind(this)), super.disconnectedCallback();
-  }
-  /**
-   * Håndterer klikk utenfor komponenten for å lukke popupen.
-   * @param event MouseEvent
-   */
-  handleOutsideClick(e) {
-    !this.shadowRoot?.contains(e.target) && !this.contains(e.target) && this.isPopupActive && (this.setPopupActive(!1), this.listWithSearchHits = [], this.inputValue = "", this.displaySearchResult = !1);
-  }
-  /**
-   * Sender et custom event med de valgte alternativene.
-   * @param options Valgte alternativer som skal sendes med eventet
-   * @event value Returnerer de valgte alternativene
-   */
-  emitValueEvent(e) {
-    this.dispatchEvent(
-      new CustomEvent("value", {
-        bubbles: !0,
-        cancelable: !1,
-        composed: !0,
-        detail: {
-          value: e
-        }
-      })
-    );
-  }
-  /**
-   * Sender et custom event som indikerer valideringsfeil.
-   * @event invalid Indikerer at validering har feilet
-   */
-  emitInvalidEvent() {
-    this.dispatchEvent(
-      new CustomEvent("invalid", {
-        bubbles: !0,
-        cancelable: !1,
-        composed: !0
-      })
-    );
-  }
-  /**
-   * Setter fokus på input feltet som er inne i prefix slotten
-   * og oppdaterer listen med søketreff.
-   * @returns {void}
-   */
-  handleFocus() {
-    this.displaySearchResult = !1, this.focusPrefixInputField(), this.handleInput(), this.setPopupActive(!0);
-  }
-  /**
-   * Setter fokus på input feltet som er inne i prefix slotten
-   * og åpner popupen.
-   * @returns {void}
-   */
-  handleClick() {
-    this.focusPrefixInputField(), this.setPopupActive(!0);
-  }
-  /**
-   * Toggle for å aktivere eller deaktivere popupen.
-   * @param event Event
-   * @returns {void}
-   */
-  togglePopupActive(e) {
-    e.stopPropagation(), this.setPopupActive(!this.isPopupActive);
-  }
-  handleSubmit(e) {
-    e.preventDefault(), this.checkValidity();
-  }
-  checkValidity() {
-    const e = this.selectedOptions.length, t = this.min !== void 0 ? this.min : 0;
-    e >= t && e <= this.max ? this.resetValidation() : this.makeInvalid();
-  }
-  makeInvalid() {
-    this.errorMessage = this.errorMessage, this.error = !0, this.emitInvalidEvent(), this.toggleValidationAttributes(!1);
-  }
-  resetValidation() {
-    this.error = !1, this.toggleValidationAttributes(!0);
-  }
-  toggleValidationAttributes(e) {
-    this.toggleAttribute("data-valid", e), this.toggleAttribute("data-user-valid", e), this.toggleAttribute("data-invalid", !e), this.toggleAttribute("data-user-invalid", !e);
-  }
-  /**
-   * Håndterer input i søkefeltet og oppdaterer søkeresultater.
-   * @returns {void}
-   */
-  handleInput() {
-    const e = this.prefixInputRef.value;
-    if (e && e.value) {
-      this.inputValue = e.value;
-      const t = this.searchForOptions(e.value);
-      this.updateListWithSearchHits(t);
-    } else
-      this.displaySearchResult = !1;
-  }
-  /**
-   * Håndterer tastaturnavigasjon i inputfeltet, ikke popupen.
-   * @param event KeyboardEvent
-   * @returns {void}
-   */
-  handleKeyboardNavigationInput(e) {
-    if (!this.disabled)
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault(), this.setPopupActive(!0), this.shadowRoot?.querySelector("nve-option")?.focus();
-          return;
-        case "ArrowUp":
-          e.preventDefault(), this.setPopupActive(!0);
-          const t = this.shadowRoot?.querySelectorAll("nve-option");
-          t && setTimeout(() => {
-            t[t.length - 1].focus();
-          }, 0);
-          return;
-        case "Escape":
-          !this.isPopupActive && this.inputValue.length > 0 && (this.inputValue = ""), this.setPopupActive(!1);
-          return;
-        case "Enter":
-        case "Space":
-          this.setPopupActive(!this.isPopupActive);
-          return;
-        case "Backspace":
-          this.inputValue === "" && this.focusLastTag();
-          return;
-        default:
-          this.isAPrintableCharacterPressed(e) && this.focusPrefixInputField();
-      }
-  }
-  /**
-   * Håndterer tastaturnavigasjon i popupen, ikke inputfeltet. selectOptionKeyDown håndterer enter  .
-   * @param event KeyboardEvent
-   * @returns {void}
-   */
-  handleKeyboardNavigationListBox(e) {
-    if (!this.disabled)
-      switch (e.key) {
-        case "Escape":
-          this.setPopupActive(!1);
-          return;
-        case "ArrowUp":
-        case "ArrowDown":
-          this.focusNextOption(e.key), e.preventDefault();
-          return;
-        case "ArrowRight":
-        case "ArrowLeft":
-        case "BackSpace":
-          this.focusPrefixInputField();
-          return;
-        default:
-          this.isAPrintableCharacterPressed(e) && this.focusPrefixInputField();
-      }
-  }
-  /**
-   * Oppdaterer listen med søkeresultater og viser popupen.
-   * @param options Liste med søkeresultater
-   * @returns {void}
-   */
-  updateListWithSearchHits(e) {
-    this.listWithSearchHits = [...e], this.displaySearchResult = !0, this.setPopupActive(!0);
-  }
-  /**
-   * Søker etter alternativer som matcher søketeksten.
-   * @param searchString Søketekst
-   * @returns {Option[]} Liste med alternativer som matcher søket
-   */
-  searchForOptions(e) {
-    const t = e.toLowerCase();
-    return this.options.filter((i) => i.label.toLowerCase().includes(t)).sort((i, l) => {
-      const a = i.label.toLowerCase().startsWith(t), n = l.label.toLowerCase().startsWith(t);
-      return a && !n ? -1 : !a && n ? 1 : 0;
-    });
-  }
-  /**
-   * Velger et alternativ.
-   * @param option Alternativet som skal velges
-   * @returns {void}
-   */
-  selectOption(e) {
-    if (this.disabled || this.isMaxNumberOfOptionsSelected()) return;
-    const t = [...this.options], i = t.findIndex((l) => l.value === e.value);
-    i !== -1 && (t[i].selected = !0, this.selectedOptions.push(e), this.options = t, this.inputValue = "", this.displaySearchResult = !1, this.setPopupActive(!1), this.focusPrefixInputField(), this.emitValueEvent(this.selectedOptions));
-  }
-  /**
-   * Velger et alternativ med tastatur.
-   * @param option Alternativet som skal velges
-   * @param event KeyboardEvent
-   * @returns {void}
-   */
-  selectOptionKeyDown(e, t) {
-    t.key === "Enter" && this.selectOption(e);
-  }
-  /**
-   * Fjerner et valgt alternativ.
-   * @param option Alternativet som skal fjernes
-   * @returns {void}
-   */
-  unSelectOption(e) {
-    if (this.disabled) return;
-    const t = [...this.options], i = [...this.selectedOptions], l = t.findIndex((n) => n.value === e.value), a = i.findIndex(
-      (n) => n.value === e.value
-    );
-    l !== -1 && (t[l].selected = !1), a !== -1 && i.splice(a, 1), this.selectedOptions = i, this.options = t, this.emitValueEvent(i);
-  }
-  /**
-   * Fjerner ett valgt alternativ med tastatur.
-   * @param option Alternativet som skal fjernes
-   * @param event KeyboardEvent
-   * @returns {void}
-   */
-  unSelectOptionKeyDown(e, t) {
-    if (t.key === "Enter") {
-      this.unSelectOption(e);
-      return;
-    }
-  }
-  /**
-   * Fjerner en tag med tastatur.
-   * @param option Alternativet som skal fjernes
-   * @param event KeyboardEvent
-   * @returns {void}
-   */
-  unSelectOptionKeyDownTag(e, t) {
-    if (!(t instanceof KeyboardEvent && t.key !== "Backspace") && (this.unSelectOption(e), this.selectedOptions.length === 0)) {
-      this.focusPrefixInputField();
-      return;
-    }
-  }
-  /**
-   * Setter popupens aktive tilstand.
-   * @param active true for å åpne popup, false for å lukke
-   */
-  setPopupActive(e) {
-    this.isPopupActive === e || this.disabled || (this.isPopupActive = e, this.shadowRoot?.querySelector(".open-icon")?.classList?.toggle("active"));
-  }
-  /**
-   *  Basert på om brukeren presser ArrowDown eller ArrowUp, fokuser på riktig element
-   *  @param option Event.key string ArrowDown || ArrowUp
-   */
-  focusNextOption(e) {
-    const t = Array.from(this.shadowRoot?.querySelectorAll("nve-option") || []), i = t.findIndex((a) => a === this.shadowRoot?.activeElement);
-    let l = i;
-    e === "ArrowDown" ? i < t.length - 1 && (l = i + 1) : e === "ArrowUp" && i > 0 && (l = i - 1), t[l] && t[l].focus();
-  }
-  /**
-   * Focuserer den siste sl-taggen i prefix slotten
-   */
-  focusLastTag() {
-    const e = Array.from(this.shadowRoot?.querySelectorAll("sl-tag") || []), t = e[e.length - 1];
-    t && t.focus();
-  }
-  /**
-   * Toggle valg av alternativ i søkeresultatlisten.
-   * @param option Alternativet som skal toggles
-   * @param index Indeks i søkeresultatlisten
-   * @returns {void}
-   */
-  toggleOptionInListWithSearchHits(e, t) {
-    if (this.disabled || this.shouldDisplayOptionAsDisabled(e)) return;
-    const i = [...this.listWithSearchHits], l = i[t].selected;
-    i[t].selected = !i[t].selected, this.listWithSearchHits = i, l === !0 ? this.unSelectOption(e) : this.selectOption(e);
-  }
-  /**
-   * Toggle valg av alternativ i søkeresultatlisten med tastatur (kun Enter).
-   * @param option Alternativet som skal toggles
-   * @param index i søkeresultatlisten
-   * @param event KeyboardEvent
-   * @returns {void}
-   */
-  toggleOptionInListWithSearchHitsKeyDown(e, t, i) {
-    i instanceof KeyboardEvent && i.key !== "Enter" || this.toggleOptionInListWithSearchHits(e, t);
-  }
-  /**
-   * Legger til utheving av søketreff i label.
-   * @param label Label til alternativet
-   * @returns {TemplateResult} HTML med uthevet søketreff
-   * 
-   */
-  addHighlightingToSearchResult(e) {
-    const t = e.replace(new RegExp(this.inputValue, "i"), (i) => `<b>${i}</b>`);
-    return h` ${v(t)} `;
-  }
-  /**
-   * Sjekker om maksimalt antall alternativer er valgt.
-   */
-  isMaxNumberOfOptionsSelected() {
-    return this.selectedOptions.length === this.max;
-  }
-  /**
-   *  Sjekker om et alternativ skal vises som deaktivert.
-   *  Hvis disabled er true, vises alle alternativer som deaktivert.
-   *  Hvis maksimalt antall alternativer er valgt, vises alle alternativer som ikke er valgt som deaktivert.
-   */
-  shouldDisplayOptionAsDisabled(e) {
-    return this.disabled ? !0 : this.isMaxNumberOfOptionsSelected() ? !e?.selected : !1;
-  }
-  /**
-   *  Sjekker om en bokstav er trykket på tastaturet.
-   *  @param event KeyboardEvent
-   *  @returns {boolean} true hvis en bokstav er trykket
-   */
-  isAPrintableCharacterPressed(e) {
-    return e.code.startsWith("Key");
-  }
-  /**
-   * Setter fokus på prefix input ref
-   * @returns {void}
-   */
-  focusPrefixInputField() {
-    this.prefixInputRef.value?.focus();
-  }
-  render() {
-    return h`
+import l from "./nve-combobox.styles.js";
+import "../../chunks/nve-popup.component.js";
+import "../../chunks/nve-input.component.js";
+import "../../chunks/nve-menu.component.js";
+import "../../chunks/nve-option.component.js";
+//#region src/components/nve-combobox/nve-combobox.component.ts
+var u = class extends t {
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.helpText = void 0, this.requiredLabel = "*Obligatorisk", this.errorMessage = "-!ERROR!-", this.options = [], this.max = Infinity, this.min = void 0, this.disabled = !1, this.filled = !1, this.required = !1, this.size = "medium", this.testId = void 0, this.listWithSearchHits = [], this.displaySearchResult = !1, this.selectedOptions = [], this.inputValue = "", this.isPopupActive = !1, this.error = !1, this.prefixInputRef = c(), this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+	}
+	firstUpdated() {
+		this.selectedOptions = this.options.filter((e) => e?.selected);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this.boundHandleOutsideClick, !0), this.closest("form")?.addEventListener("submit", this.handleSubmit.bind(this));
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this.boundHandleOutsideClick, !0), this.closest("form")?.removeEventListener("submit", this.handleSubmit.bind(this)), super.disconnectedCallback();
+	}
+	handleOutsideClick(e) {
+		!this.shadowRoot?.contains(e.target) && !this.contains(e.target) && this.isPopupActive && (this.setPopupActive(!1), this.listWithSearchHits = [], this.inputValue = "", this.displaySearchResult = !1);
+	}
+	emitValueEvent(e) {
+		this.dispatchEvent(new CustomEvent("value", {
+			bubbles: !0,
+			cancelable: !1,
+			composed: !0,
+			detail: { value: e }
+		}));
+	}
+	emitInvalidEvent() {
+		this.dispatchEvent(new CustomEvent("invalid", {
+			bubbles: !0,
+			cancelable: !1,
+			composed: !0
+		}));
+	}
+	handleFocus() {
+		this.displaySearchResult = !1, this.focusPrefixInputField(), this.handleInput(), this.setPopupActive(!0);
+	}
+	handleClick() {
+		this.focusPrefixInputField(), this.setPopupActive(!0);
+	}
+	togglePopupActive(e) {
+		e.stopPropagation(), this.setPopupActive(!this.isPopupActive);
+	}
+	handleSubmit(e) {
+		e.preventDefault(), this.checkValidity();
+	}
+	checkValidity() {
+		let e = this.selectedOptions.length;
+		e >= (this.min === void 0 ? 0 : this.min) && e <= this.max ? this.resetValidation() : this.makeInvalid();
+	}
+	makeInvalid() {
+		this.errorMessage = this.errorMessage, this.error = !0, this.emitInvalidEvent(), this.toggleValidationAttributes(!1);
+	}
+	resetValidation() {
+		this.error = !1, this.toggleValidationAttributes(!0);
+	}
+	toggleValidationAttributes(e) {
+		this.toggleAttribute("data-valid", e), this.toggleAttribute("data-user-valid", e), this.toggleAttribute("data-invalid", !e), this.toggleAttribute("data-user-invalid", !e);
+	}
+	handleInput() {
+		let e = this.prefixInputRef.value;
+		if (e && e.value) {
+			this.inputValue = e.value;
+			let t = this.searchForOptions(e.value);
+			this.updateListWithSearchHits(t);
+		} else this.displaySearchResult = !1;
+	}
+	handleKeyboardNavigationInput(e) {
+		if (!this.disabled) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), this.setPopupActive(!0), this.shadowRoot?.querySelector("nve-option")?.focus();
+				return;
+			case "ArrowUp":
+				e.preventDefault(), this.setPopupActive(!0);
+				let t = this.shadowRoot?.querySelectorAll("nve-option");
+				t && setTimeout(() => {
+					t[t.length - 1].focus();
+				}, 0);
+				return;
+			case "Escape":
+				!this.isPopupActive && this.inputValue.length > 0 && (this.inputValue = ""), this.setPopupActive(!1);
+				return;
+			case "Enter":
+			case "Space":
+				this.setPopupActive(!this.isPopupActive);
+				return;
+			case "Backspace":
+				this.inputValue === "" && this.focusLastTag();
+				return;
+			default: this.isAPrintableCharacterPressed(e) && this.focusPrefixInputField();
+		}
+	}
+	handleKeyboardNavigationListBox(e) {
+		if (!this.disabled) switch (e.key) {
+			case "Escape":
+				this.setPopupActive(!1);
+				return;
+			case "ArrowUp":
+			case "ArrowDown":
+				this.focusNextOption(e.key), e.preventDefault();
+				return;
+			case "ArrowRight":
+			case "ArrowLeft":
+			case "BackSpace":
+				this.focusPrefixInputField();
+				return;
+			default: this.isAPrintableCharacterPressed(e) && this.focusPrefixInputField();
+		}
+	}
+	updateListWithSearchHits(e) {
+		this.listWithSearchHits = [...e], this.displaySearchResult = !0, this.setPopupActive(!0);
+	}
+	searchForOptions(e) {
+		let t = e.toLowerCase();
+		return this.options.filter((e) => e.label.toLowerCase().includes(t)).sort((e, n) => {
+			let r = e.label.toLowerCase().startsWith(t), i = n.label.toLowerCase().startsWith(t);
+			return r && !i ? -1 : !r && i ? 1 : 0;
+		});
+	}
+	selectOption(e) {
+		if (this.disabled || this.isMaxNumberOfOptionsSelected()) return;
+		let t = [...this.options], n = t.findIndex((t) => t.value === e.value);
+		n !== -1 && (t[n].selected = !0, this.selectedOptions.push(e), this.options = t, this.inputValue = "", this.displaySearchResult = !1, this.setPopupActive(!1), this.focusPrefixInputField(), this.emitValueEvent(this.selectedOptions));
+	}
+	selectOptionKeyDown(e, t) {
+		t.key === "Enter" && this.selectOption(e);
+	}
+	unSelectOption(e) {
+		if (this.disabled) return;
+		let t = [...this.options], n = [...this.selectedOptions], r = t.findIndex((t) => t.value === e.value), i = n.findIndex((t) => t.value === e.value);
+		r !== -1 && (t[r].selected = !1), i !== -1 && n.splice(i, 1), this.selectedOptions = n, this.options = t, this.emitValueEvent(n);
+	}
+	unSelectOptionKeyDown(e, t) {
+		if (t.key === "Enter") {
+			this.unSelectOption(e);
+			return;
+		}
+	}
+	unSelectOptionKeyDownTag(e, t) {
+		if (!(t instanceof KeyboardEvent && t.key !== "Backspace") && (this.unSelectOption(e), this.selectedOptions.length === 0)) {
+			this.focusPrefixInputField();
+			return;
+		}
+	}
+	setPopupActive(e) {
+		this.isPopupActive === e || this.disabled || (this.isPopupActive = e, this.shadowRoot?.querySelector(".open-icon")?.classList?.toggle("active"));
+	}
+	focusNextOption(e) {
+		let t = Array.from(this.shadowRoot?.querySelectorAll("nve-option") || []), n = t.findIndex((e) => e === this.shadowRoot?.activeElement), r = n;
+		e === "ArrowDown" ? n < t.length - 1 && (r = n + 1) : e === "ArrowUp" && n > 0 && (r = n - 1), t[r] && t[r].focus();
+	}
+	focusLastTag() {
+		let e = Array.from(this.shadowRoot?.querySelectorAll("sl-tag") || []), t = e[e.length - 1];
+		t && t.focus();
+	}
+	toggleOptionInListWithSearchHits(e, t) {
+		if (this.disabled || this.shouldDisplayOptionAsDisabled(e)) return;
+		let n = [...this.listWithSearchHits], r = n[t].selected;
+		n[t].selected = !n[t].selected, this.listWithSearchHits = n, r === !0 ? this.unSelectOption(e) : this.selectOption(e);
+	}
+	toggleOptionInListWithSearchHitsKeyDown(e, t, n) {
+		n instanceof KeyboardEvent && n.key !== "Enter" || this.toggleOptionInListWithSearchHits(e, t);
+	}
+	addHighlightingToSearchResult(t) {
+		return e` ${o(t.replace(new RegExp(this.inputValue, "i"), (e) => `<b>${e}</b>`))} `;
+	}
+	isMaxNumberOfOptionsSelected() {
+		return this.selectedOptions.length === this.max;
+	}
+	shouldDisplayOptionAsDisabled(e) {
+		return this.disabled ? !0 : this.isMaxNumberOfOptionsSelected() ? !e?.selected : !1;
+	}
+	isAPrintableCharacterPressed(e) {
+		return e.code.startsWith("Key");
+	}
+	focusPrefixInputField() {
+		this.prefixInputRef.value?.focus();
+	}
+	render() {
+		return e`
       <nve-popup placement="bottom" sync="width" .active="${this.isPopupActive}" distance="8">
         <nve-input
           tabindex="0"
@@ -365,7 +208,7 @@ let s = class extends d {
           ?filled=${this.filled}
           ?required=${this.required}
         >
-          ${this.selectedOptions.map((e) => h`
+          ${this.selectedOptions.map((t) => e`
               <sl-tag
                 size="${this.size}"
                 variant="neutral"
@@ -373,11 +216,11 @@ let s = class extends d {
                 slot="prefix"
                 saturation="default"
                 variant="neutral"
-                @sl-remove="${() => this.unSelectOption(e)}"
-                @keydown="${(t) => this.unSelectOptionKeyDownTag(e, t)}"
+                @sl-remove="${() => this.unSelectOption(t)}"
+                @keydown="${(e) => this.unSelectOptionKeyDownTag(t, e)}"
                 .removable=${!this.disabled}
               >
-                ${e.label}
+                ${t.label}
               </sl-tag>
             `)}
 
@@ -390,10 +233,10 @@ let s = class extends d {
             ?filled=${this.filled}
             ?disabled=${this.disabled}
             .value="${this.inputValue}"
-            ${b(this.prefixInputRef)}
+            ${s(this.prefixInputRef)}
           />
 
-          ${h`
+          ${e`
             <span class="open-icon-wrapper" slot="suffix">
               <nve-icon
                 class="open-icon ${this.disabled && "disabled"}"
@@ -404,12 +247,12 @@ let s = class extends d {
               ></nve-icon>
             </span>
           `}
-          ${this.error && h`
+          ${this.error && e`
             <nve-icon slot="suffix" size="small" name="error" style="font-size: 1.5rem; color: #cc0000"> </nve-icon>
           `}
         </nve-input>
 
-        ${this.error && this.errorMessage ? h`<span slot="anchor" class="text--error">${this.errorMessage}</span>` : this.helpText && h`<span slot="anchor" class="text-help">${this.helpText}</span>`}
+        ${this.error && this.errorMessage ? e`<span slot="anchor" class="text--error">${this.errorMessage}</span>` : this.helpText && e`<span slot="anchor" class="text-help">${this.helpText}</span>`}
 
         <div
           id="listbox"
@@ -423,100 +266,39 @@ let s = class extends d {
           ?disabled=${this.disabled}
           ?filled=${this.filled}
         >
-          ${this.displaySearchResult === !0 ? this.listWithSearchHits.length > 0 ? this.listWithSearchHits.map(
-      (e, t) => h`
+          ${this.displaySearchResult === !0 ? this.listWithSearchHits.length > 0 ? this.listWithSearchHits.map((t, n) => e`
                     <nve-option
                       tabindex="-1"
-                      @keydown="${(i) => this.toggleOptionInListWithSearchHitsKeyDown(e, t, i)}"
-                      @click="${() => this.toggleOptionInListWithSearchHits(e, t)}"
-                      value="${e.value}"
-                      ?disabled=${this.shouldDisplayOptionAsDisabled(e)}
-                      .selected="${e.selected}"
+                      @keydown="${(e) => this.toggleOptionInListWithSearchHitsKeyDown(t, n, e)}"
+                      @click="${() => this.toggleOptionInListWithSearchHits(t, n)}"
+                      value="${t.value}"
+                      ?disabled=${this.shouldDisplayOptionAsDisabled(t)}
+                      .selected="${t.selected}"
                     >
-                        ${this.addHighlightingToSearchResult(e.label)}
+                        ${this.addHighlightingToSearchResult(t.label)}
                     </nve-option>
-                  `
-    ) : h` <nve-option disabled>Ingen resultater</nve-option> ` : ""}
-          ${this.displaySearchResult === !1 ? this.options.map(
-      (e) => h`
+                  `) : e` <nve-option disabled>Ingen resultater</nve-option> ` : ""}
+          ${this.displaySearchResult === !1 ? this.options.map((t) => e`
                   <nve-option
                     tabindex="-1"
-                    value="${e.value}"
-                    @keydown="${(t) => e.selected ? this.unSelectOptionKeyDown(e, t) : this.selectOptionKeyDown(e, t)}"
-                    @click="${() => e.selected ? this.unSelectOption(e) : this.selectOption(e)}"
-                    ?disabled=${this.shouldDisplayOptionAsDisabled(e)}
-                    .selected="${e.selected}"
+                    value="${t.value}"
+                    @keydown="${(e) => t.selected ? this.unSelectOptionKeyDown(t, e) : this.selectOptionKeyDown(t, e)}"
+                    @click="${() => t.selected ? this.unSelectOption(t) : this.selectOption(t)}"
+                    ?disabled=${this.shouldDisplayOptionAsDisabled(t)}
+                    .selected="${t.selected}"
                   >
-                      ${e.label}
+                      ${t.label}
                   </nve-option>
-                `
-    ) : ""}
+                `) : ""}
         </div>
       </nve-popup>
     `;
-  }
-};
-s.styles = [u];
-o([
-  r()
-], s.prototype, "label", 2);
-o([
-  r()
-], s.prototype, "placeholder", 2);
-o([
-  r()
-], s.prototype, "helpText", 2);
-o([
-  r()
-], s.prototype, "requiredLabel", 2);
-o([
-  r()
-], s.prototype, "errorMessage", 2);
-o([
-  r({ type: Array })
-], s.prototype, "options", 2);
-o([
-  r({ type: Number })
-], s.prototype, "max", 2);
-o([
-  r({ type: String })
-], s.prototype, "min", 2);
-o([
-  r({ type: Boolean })
-], s.prototype, "disabled", 2);
-o([
-  r({ type: Boolean })
-], s.prototype, "filled", 2);
-o([
-  r({ type: Boolean })
-], s.prototype, "required", 2);
-o([
-  r({ type: String, reflect: !0 })
-], s.prototype, "size", 2);
-o([
-  r({ type: String })
-], s.prototype, "testId", 2);
-o([
-  p()
-], s.prototype, "listWithSearchHits", 2);
-o([
-  p()
-], s.prototype, "displaySearchResult", 2);
-o([
-  p()
-], s.prototype, "selectedOptions", 2);
-o([
-  p()
-], s.prototype, "inputValue", 2);
-o([
-  p()
-], s.prototype, "isPopupActive", 2);
-o([
-  p()
-], s.prototype, "error", 2);
-s = o([
-  y("nve-combobox")
-], s);
-export {
-  s as default
+	}
 };
+a([r()], u.prototype, "label", void 0), a([r()], u.prototype, "placeholder", void 0), a([r()], u.prototype, "helpText", void 0), a([r()], u.prototype, "requiredLabel", void 0), a([r()], u.prototype, "errorMessage", void 0), a([r({ type: Array })], u.prototype, "options", void 0), a([r({ type: Number })], u.prototype, "max", void 0), a([r({ type: String })], u.prototype, "min", void 0), a([r({ type: Boolean })], u.prototype, "disabled", void 0), a([r({ type: Boolean })], u.prototype, "filled", void 0), a([r({ type: Boolean })], u.prototype, "required", void 0), a([r({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), a([r({ type: String })], u.prototype, "testId", void 0), a([n()], u.prototype, "listWithSearchHits", void 0), a([n()], u.prototype, "displaySearchResult", void 0), a([n()], u.prototype, "selectedOptions", void 0), a([n()], u.prototype, "inputValue", void 0), a([n()], u.prototype, "isPopupActive", void 0), a([n()], u.prototype, "error", void 0), u = a([i("nve-combobox")], u);
+var d = u;
+//#endregion
+export { d as default };