@oslokommune/punkt-elements 12.41.0 → 12.41.1

package/CHANGELOG.md

@@ -5,6 +5,23 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.41.1](https://github.com/oslokommune/punkt/compare/12.41.0...12.41.1) (2025-06-11)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.41.0](https://github.com/oslokommune/punkt/compare/12.40.10...12.41.0) (2025-06-10)
 
 ### ⚠ BREAKING CHANGES

package/dist/combobox-CavDENt-.js

@@ -0,0 +1,514 @@
+import { E as y, x as d, n as r, a as k } from "./element-gAd63VwC.js";
+import { o as f } from "./if-defined-Cj-3Kdsr.js";
+import { r as c } from "./state-BxrO4zNJ.js";
+import { e as _, n as v } from "./ref-DnSbnXsj.js";
+import { e as w } from "./class-map-m7ZCZ49w.js";
+import { c as R } from "./repeat-lUFq9w5d.js";
+import { P as V } from "./input-element-BEvaQK4g.js";
+import { P as C } from "./pkt-options-controller-DepYQBqb.js";
+import { P as A } from "./pkt-slot-controller-DtDaD9q_.js";
+import "./input-wrapper-CDgnd3WJ.js";
+import "./icon-CO1TLSs5.js";
+import "./tag-CX-zbR-7.js";
+import "./listbox-DCWdrjFp.js";
+const S = {
+  displayValueAs: {
+    default: "label"
+  }
+}, T = {
+  props: S
+};
+var M = Object.defineProperty, F = Object.getOwnPropertyDescriptor, o = (t, e, i, s) => {
+  for (var l = s > 1 ? void 0 : s ? F(e, i) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (l = (s ? a(e, i, l) : a(l)) || l);
+  return s && l && M(e, i, l), l;
+};
+let h = class extends V {
+  constructor() {
+    super(), this.helptextSlot = _(), 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 = T.props.displayValueAs.default, this.tagPlacement = null, this._options = [], this._isOptionsOpen = !1, this._value = [], this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._editingSingleValue = !1, this.inputRef = _(), this.arrowRef = _(), this.listboxRef = _(), this.focusRef = _(), this.optionTagRef = _(), this.optionsController = new C(this), this.slotController = new A(this, this.helptextSlot), this.slotController.skipOptions = !0;
+  }
+  // Lifecycle methods
+  connectedCallback() {
+    var t;
+    if (super.connectedCallback(), document && document.body.addEventListener("click", (e) => {
+      this._isOptionsOpen && !this.contains(e.target) && this.handleFocusOut(e);
+    }), this._options = [], this.defaultOptions && this.defaultOptions.length) {
+      const e = ((t = this.options) == null ? void 0 : t.filter((i) => i.userAdded)) || [];
+      this.options = [...e, ...structuredClone(this.defaultOptions)], this._options = [...this.options];
+    }
+    if (this.optionsController.nodes.length) {
+      const e = [];
+      this.optionsController.nodes.forEach((i) => {
+        if (!i.textContent && !i.getAttribute("value")) return null;
+        const s = {
+          value: i.getAttribute("value") || i.textContent || "",
+          label: i.textContent || i.getAttribute("value") || ""
+        };
+        i.getAttribute("data-prefix") && (s.prefix = i.getAttribute("data-prefix") || void 0), i.getAttribute("tagskincolor") && (s.tagSkinColor = i.getAttribute("tagskincolor")), i.getAttribute("description") && (s.description = i.getAttribute("description") || void 0), s.fulltext = s.value + s.label + (s.prefix || ""), e.push(s);
+      }), e.length && (this.options = [...e], this._options = [...e]);
+    }
+  }
+  updated(t) {
+    var e;
+    if (t.has("_value") && this.valueChanged(this._value, t.get("_value")), t.has("value") && (this._value = Array.isArray(this.value) ? this.value : this.value ? this.value.split(",") : [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]]), this.isMaxItemsReached()), t.has("defaultOptions") && this.defaultOptions.length) {
+      const i = ((e = this.options) == null ? void 0 : e.filter((s) => s.userAdded)) || [];
+      this.options = [...i, ...structuredClone(this.defaultOptions)], this._options = [...this.options];
+    }
+    if (t.has("options") && this.options.length) {
+      const s = this._options.filter((l) => l.userAdded).filter(
+        (l) => !this.options.some((n) => n.value === l.value)
+      );
+      this._options = [...s, ...this.options], this._options.forEach((l) => {
+        if (l.value && !l.label && (l.label = l.value), l.selected && !this._value.includes(l.value)) {
+          const n = [...this._value];
+          this._value = [...this._value, l.value], this.valueChanged(this._value, n);
+        }
+        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" && (this._value = Array.isArray(this.value) ? this.value : this.value ? this.value.split(",") : [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]])), t === "options" && (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 methods
+  render() {
+    return d`
+      <pkt-input-wrapper
+        .label=${this.label}
+        .helptext=${this.helptext}
+        .helptextDropdown=${f(this.helptextDropdown)}
+        .helptextDropdownButton=${f(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}
+        ?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" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
+          <div
+            class=${w({
+      "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 ? d`<span class="pkt-combobox__placeholder">${this.placeholder}</span>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : y}
+            ${this.renderInputField()}
+            <div
+              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
+              @click=${this.handleArrowClick}
+              @keydown=${this.handleArrowClick}
+              id="${this.id}-arrow"
+              ${v(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=${w({
+      "pkt-combobox__arrow-icon": !0,
+      "pkt-combobox__arrow-icon--open": this._isOptionsOpen
+    })}
+                name="chevron-thin-down"
+              ></pkt-icon>
+            </div>
+            <div ${v(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></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=${f(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}
+            ${v(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>` : y}
+      </pkt-input-wrapper>
+    `;
+  }
+  renderInputField() {
+    return this.typeahead || this.allowUserInput ? d`
+          <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=${f(this.label)}
+              aria-autocomplete=${this.typeahead ? "both" : "list"}
+              aria-controls="${this.id}-listbox"
+              aria-multiselectable=${f(this.multiple ? "true" : void 0)}
+              aria-activedescendant=${f(
+      this._value[0] && this.findValueInOptions(this._value[0]) ? `${this.id}-listbox-${this.findIndexInOptions(this._value[0])}` : void 0
+    )}
+              ${v(this.inputRef)}
+            />
+          </div>
+        ` : d`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name || this.id) + "-input"}
+            .value=${this._value.join(",")}
+            ${v(this.inputRef)}
+          />
+        `;
+  }
+  renderSingleOrMultipleValues() {
+    const t = !this.multiple, e = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = R(
+      this._value,
+      (s) => s,
+      (s) => {
+        var a;
+        const l = this.findValueInOptions(s), n = (a = this.options.find((u) => u.value === s)) == null ? void 0 : a.tagSkinColor;
+        return d`
+          <pkt-tag
+            skin=${n || "blue-dark"}
+            ?closeTag=${!this.disabled}
+            @close=${() => this.handleTagRemove(s)}
+          >
+            ${this.renderValueTag(l)}
+          </pkt-tag>
+        `;
+      }
+    );
+    return t ? e : i;
+  }
+  renderValueTag(t) {
+    if (!t) return "";
+    switch (this.displayValueAs) {
+      case "prefixAndValue":
+        return d`<span data-focusfix=${this.id}>${t.prefix || ""} ${t.value}</span>`;
+      case "value":
+        return d`<span data-focusfix=${this.id}>${t.value}</span>`;
+      case "label":
+      default:
+        return d`<span data-focusfix=${this.id}>${t.label || t.value}</span>`;
+    }
+  }
+  // Event handlers
+  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 l;
+              return !s.selected && ((l = s.label) == null ? void 0 : l.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, l, n;
+    if (!this.disabled && ((i = (e = t.relatedTarget) == null ? void 0 : e.closest("pkt-combobox")) == null ? void 0 : i.id) !== this.id && ((l = (s = t.relatedTarget) == null ? void 0 : s.closest("pkt-combobox")) == null ? void 0 : l.id) !== this.id && ((n = t.target) == null ? void 0 : n.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 a = this.inputRef.value.value, u = this.findValueInOptions(a);
+        !this._value.includes(a) && !u ? this.allowUserInput ? this.addNewUserValue(a) : 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;
+    this.disabled || (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.handleArrowClick(t));
+  }
+  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 ",":
+      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 n;
+    const t = ((n = this.inputRef.value) == null ? void 0 : n.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((a) => a.toLowerCase() === e), s = this._options.filter(
+      (a) => {
+        var u;
+        return ((u = a.label) == null ? void 0 : u.toLowerCase().includes(e)) ?? !1;
+      }
+    ), l = s.find(
+      (a) => {
+        var u;
+        return ((u = a.label) == null ? void 0 : u.toLowerCase()) === e || a.value.toLowerCase() === e;
+      }
+    );
+    switch (!0) {
+      case ((s.length === 0 || !l) && this.allowUserInput):
+        this._addValueText = t, this._userInfoMessage = "";
+        break;
+      case (s.length === 0 && !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 I, O;
+    if (this.disabled) return;
+    this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
+    const e = ((I = this.findValueInOptions(t)) == null ? void 0 : I.value) || null, i = this._value.includes(t || e || ""), s = !!e, l = ((O = this._options.find((m) => m.value === t)) == null ? void 0 : O.disabled) || !1, n = !(t != null && t.trim()), a = !this.multiple, u = this.multiple, $ = this.isMaxItemsReached();
+    let p = !1, b = !0, g = "", x = "";
+    l || (!s && this.allowUserInput && !n ? (this.addNewUserValue(t), g = "Ny verdi lagt til", p = !u) : !s && !this.allowUserInput ? (a && this._value[0] && this.removeValue(this._value[0]), b = !1, p = !0, g = "Ingen treff i søket") : i ? (this.removeValue(e), p = !0) : n && a ? (this.removeAllSelected(), p = !0) : a ? (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 && !$ ? (this.setSelected(e), p = !0) : u && $ ? (this._userInfoMessage = "Maks antall valg nådd", b = !1, x = t) : (a && this.removeAllSelected(), this._userInfoMessage = "Ingen gyldig verdi valgt", b = !1, p = !0, x = t), this._isOptionsOpen = p, p || window.setTimeout(() => {
+      var m;
+      (m = this.focusRef.value) == null || m.focus();
+    }, 0), this._userInfoMessage = g, this._search = x || "", this.resetComboboxInput(b), 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();
+  }
+};
+o([
+  r({ type: String, reflect: !0 })
+], h.prototype, "value", 2);
+o([
+  r({ type: Array })
+], h.prototype, "options", 2);
+o([
+  r({ type: Array })
+], h.prototype, "defaultOptions", 2);
+o([
+  r({ type: Boolean })
+], h.prototype, "allowUserInput", 2);
+o([
+  r({ type: Boolean })
+], h.prototype, "typeahead", 2);
+o([
+  r({ type: Boolean })
+], h.prototype, "includeSearch", 2);
+o([
+  r({ type: String })
+], h.prototype, "searchPlaceholder", 2);
+o([
+  r({ type: Boolean })
+], h.prototype, "multiple", 2);
+o([
+  r({ type: Number })
+], h.prototype, "maxlength", 2);
+o([
+  r({ type: String })
+], h.prototype, "displayValueAs", 2);
+o([
+  r({ type: String })
+], h.prototype, "tagPlacement", 2);
+o([
+  c()
+], h.prototype, "_options", 2);
+o([
+  c()
+], h.prototype, "_isOptionsOpen", 2);
+o([
+  c()
+], h.prototype, "_value", 2);
+o([
+  c()
+], h.prototype, "_userInfoMessage", 2);
+o([
+  c()
+], h.prototype, "_addValueText", 2);
+o([
+  c()
+], h.prototype, "_maxIsReached", 2);
+o([
+  c()
+], h.prototype, "_search", 2);
+o([
+  c()
+], h.prototype, "_inputFocus", 2);
+o([
+  c()
+], h.prototype, "_editingSingleValue", 2);
+h = o([
+  k("pkt-combobox")
+], h);
+export {
+  h as P
+};

package/dist/{combobox-lds6Lryq.cjs → combobox-DMkMUJfx.cjs}

@@ -1,4 +1,4 @@
-"use strict";const l=require("./element-90YeMNbV.cjs"),c=require("./if-defined-C8eotHpL.cjs"),d=require("./state-D-Recv7U.cjs"),r=require("./ref-B-w1vCo8.cjs"),I=require("./class-map-DWDPOqjO.cjs"),$=require("./repeat-CxQA3AeF.cjs"),w=require("./input-element-CInrWeac.cjs"),O=require("./pkt-options-controller-Ay9ELZTV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./input-wrapper-B_TtkGqo.cjs");require("./icon-B1_BRNqf.cjs");require("./tag-lU4vz70a.cjs");require("./listbox-AjDNhDsQ.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,S=Object.getOwnPropertyDescriptor,a=(b,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,n=b.length-1,u;n>=0;n--)(u=b[n])&&(s=(i?u(e,t,s):u(s))||s);return i&&s&&V(e,t,s),s};exports.PktCombobox=class extends w.PktInputElement{constructor(){super(),this.helptextSlot=r.e(),this.value="",this.options=[],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._isOptionsOpen=!1,this._value=[],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 O.PktOptionsSlotController(this),this.slotController=new y.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){if(super.connectedCallback(),document&&document.body.addEventListener("click",e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.handleFocusOut(e)}),this._options=[],this.optionsController.nodes.length){const e=[];this.optionsController.nodes.forEach(t=>{if(!t.textContent&&!t.getAttribute("value"))return null;const i={value:t.getAttribute("value")||t.textContent||"",label:t.textContent||t.getAttribute("value")||""};t.getAttribute("data-prefix")&&(i.prefix=t.getAttribute("data-prefix")||void 0),t.getAttribute("tagskincolor")&&(i.tagSkinColor=t.getAttribute("tagskincolor")),t.getAttribute("description")&&(i.description=t.getAttribute("description")||void 0),i.fulltext=i.value+i.label+(i.prefix||""),e.push(i)}),e.length&&(this.options=[...e],this._options=[...e])}}updated(e){e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("options")&&this.options.length&&(this._options=this.options,this._options.forEach(t=>{if(t.value&&!t.label&&(t.label=t.value),t.selected&&!this._value.includes(t.value)){const i=[...this._value];this._value=[...this._value,t.value],this.valueChanged(this._value,i)}t.fulltext=t.value+t.label+(t.prefix||""),t.selected=t.selected||this._value.includes(t.value)})),e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(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(e,t,i)}render(){return l.x`
+"use strict";const a=require("./element-90YeMNbV.cjs"),c=require("./if-defined-C8eotHpL.cjs"),d=require("./state-D-Recv7U.cjs"),r=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),I=require("./repeat-CxQA3AeF.cjs"),$=require("./input-element-CInrWeac.cjs"),y=require("./pkt-options-controller-Ay9ELZTV.cjs"),w=require("./pkt-slot-controller-Da-RgXfS.cjs");require("./input-wrapper-B_TtkGqo.cjs");require("./icon-B1_BRNqf.cjs");require("./tag-lU4vz70a.cjs");require("./listbox-AjDNhDsQ.cjs");const C={displayValueAs:{default:"label"}},R={props:C};var V=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(b,e,t,i)=>{for(var s=i>1?void 0:i?S(e,t):e,l=b.length-1,n;l>=0;l--)(n=b[l])&&(s=(i?n(e,t,s):n(s))||s);return i&&s&&V(e,t,s),s};exports.PktCombobox=class extends $.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._isOptionsOpen=!1,this._value=[],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 y.PktOptionsSlotController(this),this.slotController=new w.PktSlotController(this,this.helptextSlot),this.slotController.skipOptions=!0}connectedCallback(){var e;if(super.connectedCallback(),document&&document.body.addEventListener("click",t=>{this._isOptionsOpen&&!this.contains(t.target)&&this.handleFocusOut(t)}),this._options=[],this.defaultOptions&&this.defaultOptions.length){const t=((e=this.options)==null?void 0:e.filter(i=>i.userAdded))||[];this.options=[...t,...structuredClone(this.defaultOptions)],this._options=[...this.options]}if(this.optionsController.nodes.length){const t=[];this.optionsController.nodes.forEach(i=>{if(!i.textContent&&!i.getAttribute("value"))return null;const s={value:i.getAttribute("value")||i.textContent||"",label:i.textContent||i.getAttribute("value")||""};i.getAttribute("data-prefix")&&(s.prefix=i.getAttribute("data-prefix")||void 0),i.getAttribute("tagskincolor")&&(s.tagSkinColor=i.getAttribute("tagskincolor")),i.getAttribute("description")&&(s.description=i.getAttribute("description")||void 0),s.fulltext=s.value+s.label+(s.prefix||""),t.push(s)}),t.length&&(this.options=[...t],this._options=[...t])}}updated(e){var t;if(e.has("_value")&&this.valueChanged(this._value,e.get("_value")),e.has("value")&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]]),this.isMaxItemsReached()),e.has("defaultOptions")&&this.defaultOptions.length){const i=((t=this.options)==null?void 0:t.filter(s=>s.userAdded))||[];this.options=[...i,...structuredClone(this.defaultOptions)],this._options=[...this.options]}if(e.has("options")&&this.options.length){const s=this._options.filter(l=>l.userAdded).filter(l=>!this.options.some(n=>n.value===l.value));this._options=[...s,...this.options],this._options.forEach(l=>{if(l.value&&!l.label&&(l.label=l.value),l.selected&&!this._value.includes(l.value)){const n=[...this._value];this._value=[...this._value,l.value],this.valueChanged(this._value,n)}l.fulltext=l.value+l.label+(l.prefix||""),l.selected=l.selected||this._value.includes(l.value)})}e.has("_search")&&this.dispatchEvent(new CustomEvent("search",{detail:this._search,bubbles:!1})),super.updated(e)}attributeChangedCallback(e,t,i){e==="value"&&(this._value=Array.isArray(this.value)?this.value:this.value?this.value.split(","):[],!this.multiple&&this._value.length>1&&(this._value=[this._value[0]])),e==="options"&&(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(e,t,i)}render(){return a.x`
       <pkt-input-wrapper
         .label=${this.label}
         .helptext=${this.helptext}
@@ -21,11 +21,11 @@
         <div class="pkt-contents" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
         <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
           <div
-            class=${I.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})}
+            class=${O.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?l.x`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():l.E}
+            ${this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement=="outside")&&!this._inputFocus?a.x`<span class="pkt-combobox__placeholder">${this.placeholder}</span>`:this.tagPlacement!=="outside"?this.renderSingleOrMultipleValues():a.E}
             ${this.renderInputField()}
             <div
               class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
@@ -43,7 +43,7 @@
               tabindex="${this.disabled?"-1":"0"}"
             >
               <pkt-icon
-                class=${I.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
+                class=${O.e({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
                 name="chevron-thin-down"
               ></pkt-icon>
             </div>
@@ -72,11 +72,11 @@
           ></pkt-listbox>
         </div>
 
-        ${this.tagPlacement==="outside"&&this.multiple?l.x`<div class="pkt-combobox__tags-outside">
+        ${this.tagPlacement==="outside"&&this.multiple?a.x`<div class="pkt-combobox__tags-outside">
               ${this.renderSingleOrMultipleValues()}
-            </div>`:l.E}
+            </div>`:a.E}
       </pkt-input-wrapper>
-    `}renderInputField(){return this.typeahead||this.allowUserInput?l.x`
+    `}renderInputField(){return this.typeahead||this.allowUserInput?a.x`
           <div class="pkt-combobox__input-div combobox__input">
             <input
               type="text"
@@ -96,7 +96,7 @@
               ${r.n(this.inputRef)}
             />
           </div>
-        `:l.x`
+        `:a.x`
           <input
             type="hidden"
             id="${this.id}-input"
@@ -104,12 +104,12 @@
             .value=${this._value.join(",")}
             ${r.n(this.inputRef)}
           />
-        `}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=$.c(this._value,s=>s,s=>{var o;const n=this.findValueInOptions(s),u=(o=this.options.find(h=>h.value===s))==null?void 0:o.tagSkinColor;return l.x`
+        `}renderSingleOrMultipleValues(){const e=!this.multiple,t=this._editingSingleValue?null:this.renderValueTag(this.findValueInOptions(this._value[0])),i=I.c(this._value,s=>s,s=>{var h;const l=this.findValueInOptions(s),n=(h=this.options.find(u=>u.value===s))==null?void 0:h.tagSkinColor;return a.x`
           <pkt-tag
-            skin=${u||"blue-dark"}
+            skin=${n||"blue-dark"}
             ?closeTag=${!this.disabled}
             @close=${()=>this.handleTagRemove(s)}
           >
-            ${this.renderValueTag(n)}
+            ${this.renderValueTag(l)}
           </pkt-tag>
-        `});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return l.x`<span data-focusfix=${this.id}>${e.prefix||""} ${e.value}</span>`;case"value":return l.x`<span data-focusfix=${this.id}>${e.value}</span>`;case"label":default:return l.x`<span data-focusfix=${this.id}>${e.label||e.value}</span>`}}handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const t=e.target;if(this._search=t.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())}),e.inputType!=="deleteContentBackward"){const i=this._options.filter(s=>{var n;return!s.selected&&((n=s.label)==null?void 0:n.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&&(t.value=s.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const e=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&(e!=null&&e.label)?e.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){var t,i,s,n,u;if(!this.disabled&&((i=(t=e.relatedTarget)==null?void 0:t.closest("pkt-combobox"))==null?void 0:i.id)!==this.id&&((n=(s=e.relatedTarget)==null?void 0:s.closest("pkt-combobox"))==null?void 0:n.id)!==this.id&&((u=e.target)==null?void 0:u.getAttribute("data-focusfix"))!==this.id&&e.relatedTarget!==this.focusRef.value&&e.relatedTarget!==this.inputRef.value&&e.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 o=this.inputRef.value.value,h=this.findValueInOptions(o);!this._value.includes(o)&&!h?this.allowUserInput?this.addNewUserValue(o):this.multiple||this.removeValue(this._value[0]):h&&!this._value.includes(h.value)&&this.setSelected(h.value),this.inputRef.value.value=""}this._isOptionsOpen=!1,this.onBlur()}}handleBlur(){this._inputFocus=!1,this._editingSingleValue=!1,this.onBlur()}handleInputClick(e){var t,i;this.disabled||(e.currentTarget&&e.currentTarget!==this.arrowRef.value&&((t=this.inputRef.value)==null?void 0:t.type)!=="hidden"?(i=this.inputRef.value)==null||i.focus():this.handleArrowClick(e))}handleArrowClick(e){var t,i;this.disabled||e instanceof KeyboardEvent&&e.key&&e.key!=="Enter"&&e.key!==" "&&e.key!=="ArrowDown"||(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(t=this.listboxRef.value)==null||t.focusFirstOrSelectedOption():(i=this.arrowRef.value)==null||i.focus())}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase()}handleInputKeydown(e){var t,i,s;switch(e.key){case",":case"Enter":e.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((t=this.inputRef.value)==null?void 0:t.type)==="hidden"&&this.removeLastValue(e);break;case"Tab":case"ArrowDown":e.shiftKey||((i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption(),e.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(s=this.arrowRef.value)==null||s.focus(),e.preventDefault();break}}handleTagRemove(e){this.removeSelected(e)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var u;const e=((u=this.inputRef.value)==null?void 0:u.value)||this._search||"",t=e.trim().toLowerCase()||"";if(!t){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const i=this._value.find(o=>o.toLowerCase()===t),s=this._options.filter(o=>{var h;return((h=o.label)==null?void 0:h.toLowerCase().includes(t))??!1}),n=s.find(o=>{var h;return((h=o.label)==null?void 0:h.toLowerCase())===t||o.value.toLowerCase()===t});switch(!0){case((s.length===0||!n)&&this.allowUserInput):this._addValueText=e,this._userInfoMessage="";break;case(s.length===0&&!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(e){return this.options.find(t=>t.value===e||t.label===e)||null}findIndexInOptions(e){return this._options.findIndex(t=>t.value===e||t.label===e)}isMaxItemsReached(){const e=this.maxlength!==null&&this._value.length>=this.maxlength;return e?this._maxIsReached=!0:this._maxIsReached=!1,e}toggleValue(e){var g,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const t=((g=this.findValueInOptions(e))==null?void 0:g.value)||null,i=this._value.includes(e||t||""),s=!!t,n=((k=this._options.find(_=>_.value===e))==null?void 0:k.disabled)||!1,u=!(e!=null&&e.trim()),o=!this.multiple,h=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,v="",m="";n||(!s&&this.allowUserInput&&!u?(this.addNewUserValue(e),v="Ny verdi lagt til",p=!h):!s&&!this.allowUserInput?(o&&this._value[0]&&this.removeValue(this._value[0]),f=!1,p=!0,v="Ingen treff i søket"):i?(this.removeValue(t),p=!0):u&&o?(this.removeAllSelected(),p=!0):o?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),p=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):h&&!x?(this.setSelected(t),p=!0):h&&x?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=e):(o&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=e),this._isOptionsOpen=p,p||window.setTimeout(()=>{var _;(_=this.focusRef.value)==null||_.focus()},0),this._userInfoMessage=v,this._search=m||"",this.resetComboboxInput(f),h&&this.isMaxItemsReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,this._options=this._options.map(t=>(t.value===e&&(t.selected=!0),t)),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(i=>i!==e);const t=this.findValueInOptions(e);t?(t.selected=!1,t.userAdded?(this._options=[...this._options.filter(i=>i.value!==e)],this.options=[...this.options.filter(i=>i.value!==e)]):this._options=[...this._options,t]):!e&&!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(e=>e.value),this._options=this._options.map(e=>(e.selected=!0,e)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(e=>(e.selected=!1,e)),this._options=this._options.filter(e=>!e.userAdded),this.requestUpdate()}addValue(){var t;const e=((t=this.inputRef.value)==null?void 0:t.value.trim())||"";this._search=e,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],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(e)){if(this.isMaxItemsReached())return;this._value=[...this._value,e]}const t={value:e,label:e,userAdded:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.setSelected(e),this.requestUpdate()}resetComboboxInput(e=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&e)if(this._search="",this.multiple)this.inputRef.value.value="";else{const t=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&(t!=null&&t.label)?t.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();const t=this._value[this._value.length-1];t&&this.removeSelected(t),this.isMaxItemsReached()}};a([l.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);a([l.n({type:Array})],exports.PktCombobox.prototype,"options",2);a([l.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);a([l.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);a([l.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);a([l.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);a([l.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);a([l.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);a([l.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);a([l.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);a([d.r()],exports.PktCombobox.prototype,"_options",2);a([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);a([d.r()],exports.PktCombobox.prototype,"_value",2);a([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);a([d.r()],exports.PktCombobox.prototype,"_addValueText",2);a([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);a([d.r()],exports.PktCombobox.prototype,"_search",2);a([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);a([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=a([l.t("pkt-combobox")],exports.PktCombobox);
+        `});return e?t:i}renderValueTag(e){if(!e)return"";switch(this.displayValueAs){case"prefixAndValue":return a.x`<span data-focusfix=${this.id}>${e.prefix||""} ${e.value}</span>`;case"value":return a.x`<span data-focusfix=${this.id}>${e.value}</span>`;case"label":default:return a.x`<span data-focusfix=${this.id}>${e.label||e.value}</span>`}}handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)return;this.touched=!0;const t=e.target;if(this._search=t.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())}),e.inputType!=="deleteContentBackward"){const i=this._options.filter(s=>{var l;return!s.selected&&((l=s.label)==null?void 0:l.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&&(t.value=s.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection="backward")}}}else this._options=[...this.options]}handleFocus(){if(!this.disabled){if(!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!=="hidden"){const e=this.findValueInOptions(this._value[0]);this._editingSingleValue=!0,this.inputRef.value.value=this.displayValueAs==="label"&&(e!=null&&e.label)?e.label:this._value[0]}this._inputFocus=!0,this._search="",this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){var t,i,s,l,n;if(!this.disabled&&((i=(t=e.relatedTarget)==null?void 0:t.closest("pkt-combobox"))==null?void 0:i.id)!==this.id&&((l=(s=e.relatedTarget)==null?void 0:s.closest("pkt-combobox"))==null?void 0:l.id)!==this.id&&((n=e.target)==null?void 0:n.getAttribute("data-focusfix"))!==this.id&&e.relatedTarget!==this.focusRef.value&&e.relatedTarget!==this.inputRef.value&&e.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(e){var t,i;this.disabled||(e.currentTarget&&e.currentTarget!==this.arrowRef.value&&((t=this.inputRef.value)==null?void 0:t.type)!=="hidden"?(i=this.inputRef.value)==null||i.focus():this.handleArrowClick(e))}handleArrowClick(e){var t,i;this.disabled||e instanceof KeyboardEvent&&e.key&&e.key!=="Enter"&&e.key!==" "&&e.key!=="ArrowDown"||(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen?(t=this.listboxRef.value)==null||t.focusFirstOrSelectedOption():(i=this.arrowRef.value)==null||i.focus())}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase()}handleInputKeydown(e){var t,i,s;switch(e.key){case",":case"Enter":e.preventDefault(),this.addValue();break;case"Backspace":!this._search&&((t=this.inputRef.value)==null?void 0:t.type)==="hidden"&&this.removeLastValue(e);break;case"Tab":case"ArrowDown":e.shiftKey||((i=this.listboxRef.value)==null||i.focusFirstOrSelectedOption(),e.preventDefault());break;case"Escape":this._isOptionsOpen=!1,(s=this.arrowRef.value)==null||s.focus(),e.preventDefault();break}}handleTagRemove(e){this.removeSelected(e)}blurInput(){this.inputRef.value&&this.inputRef.value.matches(":focus")&&this.inputRef.value.blur()}checkForMatches(){var n;const e=((n=this.inputRef.value)==null?void 0:n.value)||this._search||"",t=e.trim().toLowerCase()||"";if(!t){!this.multiple&&this._value[0]&&this.removeValue(this._value[0]),this.resetComboboxInput(!1);return}const i=this._value.find(h=>h.toLowerCase()===t),s=this._options.filter(h=>{var u;return((u=h.label)==null?void 0:u.toLowerCase().includes(t))??!1}),l=s.find(h=>{var u;return((u=h.label)==null?void 0:u.toLowerCase())===t||h.value.toLowerCase()===t});switch(!0){case((s.length===0||!l)&&this.allowUserInput):this._addValueText=e,this._userInfoMessage="";break;case(s.length===0&&!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(e){return this.options.find(t=>t.value===e||t.label===e)||null}findIndexInOptions(e){return this._options.findIndex(t=>t.value===e||t.label===e)}isMaxItemsReached(){const e=this.maxlength!==null&&this._value.length>=this.maxlength;return e?this._maxIsReached=!0:this._maxIsReached=!1,e}toggleValue(e){var g,k;if(this.disabled)return;this.touched=!0,this._userInfoMessage="",this._addValueText=null;const t=((g=this.findValueInOptions(e))==null?void 0:g.value)||null,i=this._value.includes(e||t||""),s=!!t,l=((k=this._options.find(_=>_.value===e))==null?void 0:k.disabled)||!1,n=!(e!=null&&e.trim()),h=!this.multiple,u=this.multiple,x=this.isMaxItemsReached();let p=!1,f=!0,v="",m="";l||(!s&&this.allowUserInput&&!n?(this.addNewUserValue(e),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(t),p=!0):n&&h?(this.removeAllSelected(),p=!0):h?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),p=!1,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&(this.inputRef.value.value="",this.inputRef.value.blur())):u&&!x?(this.setSelected(t),p=!0):u&&x?(this._userInfoMessage="Maks antall valg nådd",f=!1,m=e):(h&&this.removeAllSelected(),this._userInfoMessage="Ingen gyldig verdi valgt",f=!1,p=!0,m=e),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(e){if(!this._value.includes(e)){if(this.multiple&&this.isMaxItemsReached()){this._userInfoMessage="Maks antall valg nådd";return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,this._options=this._options.map(t=>(t.value===e&&(t.selected=!0),t)),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(i=>i!==e);const t=this.findValueInOptions(e);t?(t.selected=!1,t.userAdded?(this._options=[...this._options.filter(i=>i.value!==e)],this.options=[...this.options.filter(i=>i.value!==e)]):this._options=[...this._options,t]):!e&&!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(e=>e.value),this._options=this._options.map(e=>(e.selected=!0,e)),this.requestUpdate()}}removeAllSelected(){this._value=[],this._options=this._options.map(e=>(e.selected=!1,e)),this._options=this._options.filter(e=>!e.userAdded),this.requestUpdate()}addValue(){var t;const e=((t=this.inputRef.value)==null?void 0:t.value.trim())||"";this._search=e,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],this._isOptionsOpen=!1,this.blurInput();else if(!this.findValueInOptions(e)){if(this.isMaxItemsReached())return;this._value=[...this._value,e]}const t={value:e,label:e,userAdded:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.setSelected(e),this.requestUpdate()}resetComboboxInput(e=!0){if(this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!=="hidden"&&e)if(this._search="",this.multiple)this.inputRef.value.value="";else{const t=this.findValueInOptions(this._value[0]);window.setTimeout(()=>{!this.inputRef.value||this.inputRef.value.type==="hidden"||(this.inputRef.value.value=this.displayValueAs==="label"&&(t!=null&&t.label)?t.label:this._value[0]||"")},0),this._userInfoMessage=""}this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();const t=this._value[this._value.length-1];t&&this.removeSelected(t),this.isMaxItemsReached()}};o([a.n({type:String,reflect:!0})],exports.PktCombobox.prototype,"value",2);o([a.n({type:Array})],exports.PktCombobox.prototype,"options",2);o([a.n({type:Array})],exports.PktCombobox.prototype,"defaultOptions",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"allowUserInput",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"typeahead",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"includeSearch",2);o([a.n({type:String})],exports.PktCombobox.prototype,"searchPlaceholder",2);o([a.n({type:Boolean})],exports.PktCombobox.prototype,"multiple",2);o([a.n({type:Number})],exports.PktCombobox.prototype,"maxlength",2);o([a.n({type:String})],exports.PktCombobox.prototype,"displayValueAs",2);o([a.n({type:String})],exports.PktCombobox.prototype,"tagPlacement",2);o([d.r()],exports.PktCombobox.prototype,"_options",2);o([d.r()],exports.PktCombobox.prototype,"_isOptionsOpen",2);o([d.r()],exports.PktCombobox.prototype,"_value",2);o([d.r()],exports.PktCombobox.prototype,"_userInfoMessage",2);o([d.r()],exports.PktCombobox.prototype,"_addValueText",2);o([d.r()],exports.PktCombobox.prototype,"_maxIsReached",2);o([d.r()],exports.PktCombobox.prototype,"_search",2);o([d.r()],exports.PktCombobox.prototype,"_inputFocus",2);o([d.r()],exports.PktCombobox.prototype,"_editingSingleValue",2);exports.PktCombobox=o([a.t("pkt-combobox")],exports.PktCombobox);

package/dist/index.d.ts

@@ -163,6 +163,7 @@ export declare interface IPktCombobox {
     optionalTag?: boolean;
     optionalText?: string;
     options?: IPktComboboxOption[];
+    defaultOptions?: IPktComboboxOption[];
     placeholder?: string | null;
     requiredTag?: boolean;
     requiredText?: string;
@@ -512,6 +513,7 @@ export declare class PktCombobox extends PktInputElement implements IPktCombobox
     constructor();
     value: string | string[];
     options: IPktComboboxOption[];
+    defaultOptions: IPktComboboxOption[];
     allowUserInput: boolean;
     typeahead: boolean;
     includeSearch: boolean;

package/dist/pkt-combobox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-lds6Lryq.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-DMkMUJfx.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;

package/dist/pkt-combobox.js

@@ -1,4 +1,4 @@
-import { P as o } from "./combobox-Ct7-a2Vy.js";
+import { P as o } from "./combobox-CavDENt-.js";
 const b = o;
 export {
   o as PktCombobox,

package/dist/pkt-index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-lds6Lryq.cjs"),h=require("./consent-D1r9LYda.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./alert-D2PhTV94.cjs"),l=require("./accordionitem-Dz6jwPpb.cjs"),d=require("./backlink-CcAZfB1d.cjs"),b=require("./button-KzBZ-Bff.cjs"),k=require("./calendar-BDeaGBaH.cjs"),m=require("./card-CmdIb2X9.cjs"),g=require("./combobox-DMkMUJfx.cjs"),h=require("./consent-D1r9LYda.cjs"),f=require("./checkbox-CiXWukkL.cjs"),t=require("./element-90YeMNbV.cjs"),y=require("./pkt-slot-controller-Da-RgXfS.cjs"),s=require("./ref-B-w1vCo8.cjs"),O=require("./class-map-DWDPOqjO.cjs"),j=require("./datepicker-DpQV8G6g.cjs"),q=require("./helptext-AqNI_oFG.cjs"),x=require("./heading-CxJ0IqpU.cjs"),C=require("./icon-B1_BRNqf.cjs"),v=require("./input-wrapper-B_TtkGqo.cjs"),S=require("./link-BWJrqWi7.cjs"),$=require("./linkcard-0KLDuaGM.cjs"),L=require("./loader--5h6NKGl.cjs"),_=require("./messagebox-IJOkv427.cjs"),A=require("./modal-CBURcXBd.cjs"),B=require("./progressbar-BrXtjUvh.cjs"),p=require("./radiobutton-x10h-JEh.cjs"),T=require("./tag-lU4vz70a.cjs"),I=require("./textarea-j8kBS-hf.cjs"),M=require("./textinput-kmcj-FlC.cjs"),R=require("./select-BUvu5SFp.cjs");var H=Object.defineProperty,w=Object.getOwnPropertyDescriptor,o=(a,e,r,i)=>{for(var n=i>1?void 0:i?w(e,r):e,u=a.length-1,c;u>=0;u--)(c=a[u])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&H(e,r,n),n};exports.PktComponent=class extends t.PktElement{constructor(){super(),this.string="",this.strings=[],this.darkmode=!1,this._list=[],this.defaultSlot=s.e(),this.namedSlot=s.e(),this.slotController=new y.PktSlotController(this,this.defaultSlot,this.namedSlot)}connectedCallback(){this.strings.length&&this.strings.forEach(e=>{this._list.push(e.toUpperCase())}),super.connectedCallback()}render(){const e={"pkt-component":!0,"pkt-component--has-list":this.strings.length>0,"pkt-darkmode":this.darkmode};return t.x`
       <div class="${O.e(e)}">
         <h1 class="pkt-txt-28">${this.string}</h1>
 

package/dist/pkt-index.js

@@ -5,7 +5,7 @@ import { P as T } from "./button-OLSvT2Im.js";
 import { c as f } from "./calendar-Beno8yU7.js";
 import { P as D } from "./calendar-Beno8yU7.js";
 import { P as G } from "./card-BxHlJq4J.js";
-import { P as K } from "./combobox-Ct7-a2Vy.js";
+import { P as K } from "./combobox-CavDENt-.js";
 import { P as U } from "./consent-a09DlJZT.js";
 import { P as q } from "./checkbox-B67_cfqW.js";
 import { P as k, t as h, x as P, n, a as c } from "./element-gAd63VwC.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.41.0",
+  "version": "12.41.1",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -59,5 +59,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "0fa02d9d211044739d7b86ec9f24f334df782a1d"
+  "gitHead": "6af0ba1d43d2ba724a15b4d37c80ab62a68c8cae"
 }

package/src/components/combobox/combobox.ts

@@ -49,6 +49,7 @@ export interface IPktCombobox {
   optionalTag?: boolean
   optionalText?: string
   options?: IPktComboboxOption[]
+  defaultOptions?: IPktComboboxOption[]
   placeholder?: string | null
   requiredTag?: boolean
   requiredText?: string
@@ -79,6 +80,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
   // Props / Attributes
   @property({ type: String, reflect: true }) value: string | string[] = ''
   @property({ type: Array }) options: IPktComboboxOption[] = []
+  @property({ type: Array }) defaultOptions: IPktComboboxOption[] = []
   @property({ type: Boolean }) allowUserInput: boolean = false
   @property({ type: Boolean }) typeahead: boolean = false
   @property({ type: Boolean }) includeSearch: boolean = false
@@ -118,6 +120,15 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       })
 
     this._options = []
+
+    // Deep clone defaultOptions into options, preserving userAdded options
+    if (this.defaultOptions && this.defaultOptions.length) {
+      const userAdded = this.options?.filter((opt) => opt.userAdded) || []
+      this.options = [...userAdded, ...structuredClone(this.defaultOptions)]
+      this._options = [...this.options]
+    }
+
+    // If options are provided via the options slot, we need to extract them
     if (this.optionsController.nodes.length) {
       const options: IPktComboboxOption[] = []
       this.optionsController.nodes.forEach((node: Element) => {
@@ -156,8 +167,23 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       }
       this.isMaxItemsReached()
     }
+
+    // If defaultOptions changed, update options (preserving userAdded)
+    if (changedProperties.has('defaultOptions') && this.defaultOptions.length) {
+      const userAdded = this.options?.filter((opt) => opt.userAdded) || []
+      this.options = [...userAdded, ...structuredClone(this.defaultOptions)]
+      this._options = [...this.options]
+    }
+
     if (changedProperties.has('options') && this.options.length) {
-      this._options = this.options
+      // If options change, we need to update _options, but we need to preserve userAdded values
+      const userAddedValues = this._options.filter((option) => option.userAdded)
+      // Filter out userAddedValues that are overridden by this.options
+      const filteredUserAdded = userAddedValues.filter(
+        (userOpt) => !this.options.some((opt) => opt.value === userOpt.value),
+      )
+      // Merge, giving precedence to this.options
+      this._options = [...filteredUserAdded, ...this.options]
       this._options.forEach((option) => {
         if (option.value && !option.label) {
           option.label = option.value

package/dist/combobox-Ct7-a2Vy.js

@@ -1,495 +0,0 @@
-import { E as y, x as d, n as r, a as k } from "./element-gAd63VwC.js";
-import { o as f } from "./if-defined-Cj-3Kdsr.js";
-import { r as c } from "./state-BxrO4zNJ.js";
-import { e as _, n as v } from "./ref-DnSbnXsj.js";
-import { e as O } from "./class-map-m7ZCZ49w.js";
-import { c as R } from "./repeat-lUFq9w5d.js";
-import { P as V } from "./input-element-BEvaQK4g.js";
-import { P as C } from "./pkt-options-controller-DepYQBqb.js";
-import { P as S } from "./pkt-slot-controller-DtDaD9q_.js";
-import "./input-wrapper-CDgnd3WJ.js";
-import "./icon-CO1TLSs5.js";
-import "./tag-CX-zbR-7.js";
-import "./listbox-DCWdrjFp.js";
-const T = {
-  displayValueAs: {
-    default: "label"
-  }
-}, A = {
-  props: T
-};
-var M = Object.defineProperty, F = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? F(t, s) : t, u = e.length - 1, l; u >= 0; u--)
-    (l = e[u]) && (n = (i ? l(t, s, n) : l(n)) || n);
-  return i && n && M(t, s, n), n;
-};
-let a = class extends V {
-  constructor() {
-    super(), this.helptextSlot = _(), this.value = "", this.options = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = A.props.displayValueAs.default, this.tagPlacement = null, this._options = [], this._isOptionsOpen = !1, this._value = [], this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._editingSingleValue = !1, this.inputRef = _(), this.arrowRef = _(), this.listboxRef = _(), this.focusRef = _(), this.optionTagRef = _(), this.optionsController = new C(this), this.slotController = new S(this, this.helptextSlot), this.slotController.skipOptions = !0;
-  }
-  // Lifecycle methods
-  connectedCallback() {
-    if (super.connectedCallback(), document && document.body.addEventListener("click", (e) => {
-      this._isOptionsOpen && !this.contains(e.target) && this.handleFocusOut(e);
-    }), this._options = [], this.optionsController.nodes.length) {
-      const e = [];
-      this.optionsController.nodes.forEach((t) => {
-        if (!t.textContent && !t.getAttribute("value")) return null;
-        const s = {
-          value: t.getAttribute("value") || t.textContent || "",
-          label: t.textContent || t.getAttribute("value") || ""
-        };
-        t.getAttribute("data-prefix") && (s.prefix = t.getAttribute("data-prefix") || void 0), t.getAttribute("tagskincolor") && (s.tagSkinColor = t.getAttribute("tagskincolor")), t.getAttribute("description") && (s.description = t.getAttribute("description") || void 0), s.fulltext = s.value + s.label + (s.prefix || ""), e.push(s);
-      }), e.length && (this.options = [...e], this._options = [...e]);
-    }
-  }
-  updated(e) {
-    e.has("_value") && this.valueChanged(this._value, e.get("_value")), e.has("value") && (this._value = Array.isArray(this.value) ? this.value : this.value ? this.value.split(",") : [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]]), this.isMaxItemsReached()), e.has("options") && this.options.length && (this._options = this.options, this._options.forEach((t) => {
-      if (t.value && !t.label && (t.label = t.value), t.selected && !this._value.includes(t.value)) {
-        const s = [...this._value];
-        this._value = [...this._value, t.value], this.valueChanged(this._value, s);
-      }
-      t.fulltext = t.value + t.label + (t.prefix || ""), t.selected = t.selected || this._value.includes(t.value);
-    })), e.has("_search") && this.dispatchEvent(
-      new CustomEvent("search", {
-        detail: this._search,
-        bubbles: !1
-      })
-    ), super.updated(e);
-  }
-  attributeChangedCallback(e, t, s) {
-    e === "value" && (this._value = Array.isArray(this.value) ? this.value : this.value ? this.value.split(",") : [], !this.multiple && this._value.length > 1 && (this._value = [this._value[0]])), e === "options" && (this._options = this.options, this._options.forEach((i) => {
-      i.value && !i.label && (i.label = i.value), i.selected && !this._value.includes(i.value) && (this._value = [...this._value, i.value]), i.fulltext = i.value + i.label + (i.prefix || "");
-    }), this._search = ""), super.attributeChangedCallback(e, t, s);
-  }
-  // Render methods
-  render() {
-    return d`
-      <pkt-input-wrapper
-        .label=${this.label}
-        .helptext=${this.helptext}
-        .helptextDropdown=${f(this.helptextDropdown)}
-        .helptextDropdownButton=${f(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}
-        ?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" ${v(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
-          <div
-            class=${O({
-      "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 ? d`<span class="pkt-combobox__placeholder">${this.placeholder}</span>` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : y}
-            ${this.renderInputField()}
-            <div
-              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
-              @click=${this.handleArrowClick}
-              @keydown=${this.handleArrowClick}
-              id="${this.id}-arrow"
-              ${v(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=${O({
-      "pkt-combobox__arrow-icon": !0,
-      "pkt-combobox__arrow-icon--open": this._isOptionsOpen
-    })}
-                name="chevron-thin-down"
-              ></pkt-icon>
-            </div>
-            <div ${v(this.focusRef)} tabindex="-1" @keydown=${this.handleArrowClick}></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=${f(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}
-            ${v(this.listboxRef)}
-          ></pkt-listbox>
-        </div>
-
-        ${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
-              ${this.renderSingleOrMultipleValues()}
-            </div>` : y}
-      </pkt-input-wrapper>
-    `;
-  }
-  renderInputField() {
-    return this.typeahead || this.allowUserInput ? d`
-          <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=${f(this.label)}
-              aria-autocomplete=${this.typeahead ? "both" : "list"}
-              aria-controls="${this.id}-listbox"
-              aria-multiselectable=${f(this.multiple ? "true" : void 0)}
-              aria-activedescendant=${f(
-      this._value[0] && this.findValueInOptions(this._value[0]) ? `${this.id}-listbox-${this.findIndexInOptions(this._value[0])}` : void 0
-    )}
-              ${v(this.inputRef)}
-            />
-          </div>
-        ` : d`
-          <input
-            type="hidden"
-            id="${this.id}-input"
-            name=${(this.name || this.id) + "-input"}
-            .value=${this._value.join(",")}
-            ${v(this.inputRef)}
-          />
-        `;
-  }
-  renderSingleOrMultipleValues() {
-    const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), s = R(
-      this._value,
-      (i) => i,
-      (i) => {
-        var l;
-        const n = this.findValueInOptions(i), u = (l = this.options.find((o) => o.value === i)) == null ? void 0 : l.tagSkinColor;
-        return d`
-          <pkt-tag
-            skin=${u || "blue-dark"}
-            ?closeTag=${!this.disabled}
-            @close=${() => this.handleTagRemove(i)}
-          >
-            ${this.renderValueTag(n)}
-          </pkt-tag>
-        `;
-      }
-    );
-    return e ? t : s;
-  }
-  renderValueTag(e) {
-    if (!e) return "";
-    switch (this.displayValueAs) {
-      case "prefixAndValue":
-        return d`<span data-focusfix=${this.id}>${e.prefix || ""} ${e.value}</span>`;
-      case "value":
-        return d`<span data-focusfix=${this.id}>${e.value}</span>`;
-      case "label":
-      default:
-        return d`<span data-focusfix=${this.id}>${e.label || e.value}</span>`;
-    }
-  }
-  // Event handlers
-  handleInput(e) {
-    if (e.stopPropagation(), e.stopImmediatePropagation(), this.disabled) return;
-    this.touched = !0;
-    const t = e.target;
-    if (this._search = t.value, this.checkForMatches(), this.typeahead)
-      if (this._search) {
-        if (this._options = this.options.filter(
-          (s) => {
-            var i;
-            return (i = s.fulltext) == null ? void 0 : i.toLowerCase().includes(this._search.toLowerCase());
-          }
-        ), e.inputType !== "deleteContentBackward") {
-          const s = this._options.filter(
-            (i) => {
-              var n;
-              return !i.selected && ((n = i.label) == null ? void 0 : n.toLowerCase().startsWith(this._search.toLowerCase()));
-            }
-          );
-          if (s.length > 0 && this.inputRef.value && this.inputRef.value.type !== "hidden") {
-            const i = s[0];
-            i != null && i.label && (t.value = i.label, window.setTimeout(
-              () => t.setSelectionRange(this._search.length, t.value.length),
-              0
-            ), t.selectionDirection = "backward");
-          }
-        }
-      } else
-        this._options = [...this.options];
-  }
-  handleFocus() {
-    if (!this.disabled) {
-      if (!this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden") {
-        const e = this.findValueInOptions(this._value[0]);
-        this._editingSingleValue = !0, this.inputRef.value.value = this.displayValueAs === "label" && (e != null && e.label) ? e.label : this._value[0];
-      }
-      this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
-    }
-  }
-  handleFocusOut(e) {
-    var t, s, i, n, u;
-    if (!this.disabled && ((s = (t = e.relatedTarget) == null ? void 0 : t.closest("pkt-combobox")) == null ? void 0 : s.id) !== this.id && ((n = (i = e.relatedTarget) == null ? void 0 : i.closest("pkt-combobox")) == null ? void 0 : n.id) !== this.id && ((u = e.target) == null ? void 0 : u.getAttribute("data-focusfix")) !== this.id && e.relatedTarget !== this.focusRef.value && e.relatedTarget !== this.inputRef.value && e.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 l = this.inputRef.value.value, o = this.findValueInOptions(l);
-        !this._value.includes(l) && !o ? this.allowUserInput ? this.addNewUserValue(l) : this.multiple || this.removeValue(this._value[0]) : o && !this._value.includes(o.value) && this.setSelected(o.value), this.inputRef.value.value = "";
-      }
-      this._isOptionsOpen = !1, this.onBlur();
-    }
-  }
-  handleBlur() {
-    this._inputFocus = !1, this._editingSingleValue = !1, this.onBlur();
-  }
-  handleInputClick(e) {
-    var t, s;
-    this.disabled || (e.currentTarget && e.currentTarget !== this.arrowRef.value && ((t = this.inputRef.value) == null ? void 0 : t.type) !== "hidden" ? (s = this.inputRef.value) == null || s.focus() : this.handleArrowClick(e));
-  }
-  handleArrowClick(e) {
-    var t, s;
-    this.disabled || e instanceof KeyboardEvent && e.key && e.key !== "Enter" && e.key !== " " && e.key !== "ArrowDown" || (e.stopImmediatePropagation(), e.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen ? (t = this.listboxRef.value) == null || t.focusFirstOrSelectedOption() : (s = this.arrowRef.value) == null || s.focus());
-  }
-  handleOptionToggled(e) {
-    this.toggleValue(e.detail);
-  }
-  handleSearch(e) {
-    e.stopPropagation(), this._search = e.detail.toLowerCase();
-  }
-  handleInputKeydown(e) {
-    var t, s, i;
-    switch (e.key) {
-      case ",":
-      case "Enter":
-        e.preventDefault(), this.addValue();
-        break;
-      case "Backspace":
-        !this._search && ((t = this.inputRef.value) == null ? void 0 : t.type) === "hidden" && this.removeLastValue(e);
-        break;
-      case "Tab":
-      case "ArrowDown":
-        e.shiftKey || ((s = this.listboxRef.value) == null || s.focusFirstOrSelectedOption(), e.preventDefault());
-        break;
-      case "Escape":
-        this._isOptionsOpen = !1, (i = this.arrowRef.value) == null || i.focus(), e.preventDefault();
-        break;
-    }
-  }
-  handleTagRemove(e) {
-    this.removeSelected(e);
-  }
-  blurInput() {
-    this.inputRef.value && this.inputRef.value.matches(":focus") && this.inputRef.value.blur();
-  }
-  checkForMatches() {
-    var u;
-    const e = ((u = this.inputRef.value) == null ? void 0 : u.value) || this._search || "", t = e.trim().toLowerCase() || "";
-    if (!t) {
-      !this.multiple && this._value[0] && this.removeValue(this._value[0]), this.resetComboboxInput(!1);
-      return;
-    }
-    const s = this._value.find((l) => l.toLowerCase() === t), i = this._options.filter(
-      (l) => {
-        var o;
-        return ((o = l.label) == null ? void 0 : o.toLowerCase().includes(t)) ?? !1;
-      }
-    ), n = i.find(
-      (l) => {
-        var o;
-        return ((o = l.label) == null ? void 0 : o.toLowerCase()) === t || l.value.toLowerCase() === t;
-      }
-    );
-    switch (!0) {
-      case ((i.length === 0 || !n) && this.allowUserInput):
-        this._addValueText = e, this._userInfoMessage = "";
-        break;
-      case (i.length === 0 && !this.allowUserInput):
-        this._addValueText = null, this._userInfoMessage = "Ingen match i søket";
-        break;
-      case !!s:
-        this._addValueText = null, this._userInfoMessage = "Verdien er allerede valgt";
-        break;
-      case i.length > 1:
-        this._addValueText = null, this._userInfoMessage = "";
-        break;
-      default:
-        this._addValueText = null, this._userInfoMessage = "";
-    }
-  }
-  findValueInOptions(e) {
-    return this.options.find((t) => t.value === e || t.label === e) || null;
-  }
-  findIndexInOptions(e) {
-    return this._options.findIndex((t) => t.value === e || t.label === e);
-  }
-  isMaxItemsReached() {
-    const e = this.maxlength !== null && this._value.length >= this.maxlength;
-    return e ? this._maxIsReached = !0 : this._maxIsReached = !1, e;
-  }
-  toggleValue(e) {
-    var I, w;
-    if (this.disabled) return;
-    this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
-    const t = ((I = this.findValueInOptions(e)) == null ? void 0 : I.value) || null, s = this._value.includes(e || t || ""), i = !!t, n = ((w = this._options.find((m) => m.value === e)) == null ? void 0 : w.disabled) || !1, u = !(e != null && e.trim()), l = !this.multiple, o = this.multiple, $ = this.isMaxItemsReached();
-    let p = !1, b = !0, g = "", x = "";
-    n || (!i && this.allowUserInput && !u ? (this.addNewUserValue(e), g = "Ny verdi lagt til", p = !o) : !i && !this.allowUserInput ? (l && this._value[0] && this.removeValue(this._value[0]), b = !1, p = !0, g = "Ingen treff i søket") : s ? (this.removeValue(t), p = !0) : u && l ? (this.removeAllSelected(), p = !0) : l ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(t), p = !1, this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "", this.inputRef.value.blur())) : o && !$ ? (this.setSelected(t), p = !0) : o && $ ? (this._userInfoMessage = "Maks antall valg nådd", b = !1, x = e) : (l && this.removeAllSelected(), this._userInfoMessage = "Ingen gyldig verdi valgt", b = !1, p = !0, x = e), this._isOptionsOpen = p, p || window.setTimeout(() => {
-      var m;
-      (m = this.focusRef.value) == null || m.focus();
-    }, 0), this._userInfoMessage = g, this._search = x || "", this.resetComboboxInput(b), o && this.isMaxItemsReached());
-  }
-  setSelected(e) {
-    if (!this._value.includes(e)) {
-      if (this.multiple && this.isMaxItemsReached()) {
-        this._userInfoMessage = "Maks antall valg nådd";
-        return;
-      }
-      !this.multiple && this.removeAllSelected(), this._value = e ? [...this._value, e] : this._value, this._options = this._options.map((t) => (t.value === e && (t.selected = !0), t)), this.resetComboboxInput(!0);
-    }
-  }
-  removeSelected(e) {
-    if (!e) return;
-    this._value = this._value.filter((s) => s !== e);
-    const t = this.findValueInOptions(e);
-    t ? (t.selected = !1, t.userAdded ? (this._options = [...this._options.filter((s) => s.value !== e)], this.options = [...this.options.filter((s) => s.value !== e)]) : this._options = [...this._options, t]) : !e && !this.multiple && (this._options = this._options.map((s) => (s.selected = !1, s)));
-  }
-  addAllOptions() {
-    if (this.multiple) {
-      if (this.maxlength && this._options.length > this.maxlength) {
-        this._userInfoMessage = "For mange valgt";
-        return;
-      }
-      this._value = this._options.map((e) => e.value), this._options = this._options.map((e) => (e.selected = !0, e)), this.requestUpdate();
-    }
-  }
-  removeAllSelected() {
-    this._value = [], this._options = this._options.map((e) => (e.selected = !1, e)), this._options = this._options.filter((e) => !e.userAdded), this.requestUpdate();
-  }
-  addValue() {
-    var t;
-    const e = ((t = this.inputRef.value) == null ? void 0 : t.value.trim()) || "";
-    this._search = e, 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], this._isOptionsOpen = !1, this.blurInput();
-    else if (!this.findValueInOptions(e)) {
-      if (this.isMaxItemsReached()) return;
-      this._value = [...this._value, e];
-    }
-    const t = { value: e, label: e, userAdded: !0 };
-    this.options = [t, ...this.options], this._options = [t, ...this._options], this.setSelected(e), this.requestUpdate();
-  }
-  resetComboboxInput(e = !0) {
-    if (this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && e)
-      if (this._search = "", this.multiple)
-        this.inputRef.value.value = "";
-      else {
-        const t = this.findValueInOptions(this._value[0]);
-        window.setTimeout(() => {
-          !this.inputRef.value || this.inputRef.value.type === "hidden" || (this.inputRef.value.value = this.displayValueAs === "label" && (t != null && t.label) ? t.label : this._value[0] || "");
-        }, 0), this._userInfoMessage = "";
-      }
-    this._options = [...this.options];
-  }
-  removeLastValue(e) {
-    if (this._value.length === 0) return;
-    e.preventDefault();
-    const t = this._value[this._value.length - 1];
-    t && this.removeSelected(t), this.isMaxItemsReached();
-  }
-};
-h([
-  r({ type: String, reflect: !0 })
-], a.prototype, "value", 2);
-h([
-  r({ type: Array })
-], a.prototype, "options", 2);
-h([
-  r({ type: Boolean })
-], a.prototype, "allowUserInput", 2);
-h([
-  r({ type: Boolean })
-], a.prototype, "typeahead", 2);
-h([
-  r({ type: Boolean })
-], a.prototype, "includeSearch", 2);
-h([
-  r({ type: String })
-], a.prototype, "searchPlaceholder", 2);
-h([
-  r({ type: Boolean })
-], a.prototype, "multiple", 2);
-h([
-  r({ type: Number })
-], a.prototype, "maxlength", 2);
-h([
-  r({ type: String })
-], a.prototype, "displayValueAs", 2);
-h([
-  r({ type: String })
-], a.prototype, "tagPlacement", 2);
-h([
-  c()
-], a.prototype, "_options", 2);
-h([
-  c()
-], a.prototype, "_isOptionsOpen", 2);
-h([
-  c()
-], a.prototype, "_value", 2);
-h([
-  c()
-], a.prototype, "_userInfoMessage", 2);
-h([
-  c()
-], a.prototype, "_addValueText", 2);
-h([
-  c()
-], a.prototype, "_maxIsReached", 2);
-h([
-  c()
-], a.prototype, "_search", 2);
-h([
-  c()
-], a.prototype, "_inputFocus", 2);
-h([
-  c()
-], a.prototype, "_editingSingleValue", 2);
-a = h([
-  k("pkt-combobox")
-], a);
-export {
-  a as P
-};