@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/dist/combobox-CoO8T-F-.js

@@ -0,0 +1,818 @@
+import { n as r, A as m, b as c, t as M } from "./element-CV9utnHJ.js";
+import { o as u } from "./if-defined-rXcLNTzN.js";
+import { e as y, n as b } from "./ref-Dma3n3i8.js";
+import { e as w } from "./class-map-3ADKve8g.js";
+import { c as P } from "./repeat-DnlRNf63.js";
+import { f, g as B, b as U, i as k, a as E, c as R } from "./listbox-OdkIn9_A.js";
+import { r as v } from "./state-l4hGZdFJ.js";
+import { P as q } from "./input-element-BGNbdzy2.js";
+import { P as N } from "./pkt-options-controller-Z-bPox7n.js";
+import { P as L } from "./pkt-slot-controller-D7CrjM52.js";
+import "./input-wrapper-CaUY90qz.js";
+import "./icon-D0IQAVwS.js";
+import "./tag-DZPqFiem.js";
+const j = (i, t, e) => {
+  switch (i) {
+    case ",":
+      return e ? "addValue" : null;
+    case "Enter":
+      return "addValue";
+    case "Tab":
+    case "ArrowDown":
+      return t ? null : "focusListbox";
+    case "Escape":
+      return "closeOptions";
+    default:
+      return null;
+  }
+}, K = (i, t, e, s, l) => {
+  if (!i) return { action: "none", value: null };
+  const a = f(e, i);
+  return !t.includes(i) && !a ? s ? { action: "addUserValue", value: i } : l ? { action: "none", value: null } : { action: "removeValue", value: t[0] } : a && !t.includes(a.value) ? { action: "selectOption", value: a.value } : { action: "none", value: null };
+}, W = (i, t, e, s, l) => i.trim().toLowerCase() ? {
+  ...B(i, t, e, s),
+  shouldRemoveValue: !1,
+  shouldResetInput: !1
+} : {
+  addValueText: null,
+  userInfoMessage: "",
+  shouldRemoveValue: !l && !!t[0],
+  shouldResetInput: !0
+}, $ = (i, t, e) => {
+  const s = f(t, i);
+  return e === "label" && (s != null && s.label) ? s.label : i;
+}, x = {
+  markOptionSelected(i, t) {
+    if (t) {
+      for (const e of i)
+        if (e.value === t) {
+          e.selected = !0;
+          break;
+        }
+    }
+  },
+  markOptionDeselected(i, t) {
+    if (t) {
+      for (const e of i)
+        if (e.value === t) {
+          e.selected = !1;
+          break;
+        }
+    }
+  },
+  markAllSelected(i) {
+    for (const t of i)
+      t.selected = !0;
+  },
+  markAllDeselected(i) {
+    for (const t of i)
+      t.selected = !1;
+  },
+  removeUserAddedOptions(i) {
+    return i.filter((t) => !t.userAdded);
+  }
+}, C = {
+  parseOptionsFromSlot(i) {
+    const t = [];
+    return i.forEach((e) => {
+      if (!e.textContent && !e.getAttribute("value")) return;
+      const s = {
+        value: e.getAttribute("value") || e.textContent || "",
+        label: e.textContent || e.getAttribute("value") || ""
+      };
+      e.getAttribute("data-prefix") && (s.prefix = e.getAttribute("data-prefix") || void 0), e.getAttribute("tagskincolor") && (s.tagSkinColor = e.getAttribute("tagskincolor")), e.getAttribute("description") && (s.description = e.getAttribute("description") || void 0), s.fulltext = U(s), t.push(s);
+    }), t;
+  }
+}, A = {
+  /**
+   * Ensures options have labels and fulltext set.
+   * Also syncs selected state with current values.
+   *
+   * IMPORTANT: Mutates options in place to preserve referential identity
+   * between this._options and this.options in the Lit component.
+   */
+  syncOptionsWithValues(i, t) {
+    const e = [...t];
+    return i.forEach((s) => {
+      s.value && !s.label && (s.label = s.value), s.selected && !e.includes(s.value) && e.push(s.value), s.fulltext = U(s), s.selected = s.selected || e.includes(s.value);
+    }), { options: i, newValues: e };
+  },
+  /**
+   * Merges user-added options with new options, preserving user additions.
+   */
+  mergeWithUserAdded(i, t) {
+    return [...t.filter((l) => (l == null ? void 0 : l.userAdded) && l.selected).filter(
+      (l) => !(Array.isArray(i) ? i : []).some((a) => a.value === l.value)
+    ), ...i];
+  }
+}, G = { displayValueAs: { default: "label" } }, J = {
+  props: G
+};
+var H = Object.defineProperty, h = (i, t, e, s) => {
+  for (var l = void 0, a = i.length - 1, o; a >= 0; a--)
+    (o = i[a]) && (l = o(t, e, l) || l);
+  return l && H(t, e, l), l;
+};
+class n extends q {
+  constructor() {
+    super(), this.helptextSlot = y(), 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 = J.props.displayValueAs.default, this.tagPlacement = null, this.isOpen = !1, this._options = [], this._value = [], this._isOptionsOpen = !1, this._userInfoMessage = "", this._addValueText = null, this._maxIsReached = !1, this._search = "", this._inputFocus = !1, this._internalValueSync = !1, this._optionsFromSlot = !1, this._lastSlotGeneration = 0, this._suppressNextOpen = !1, this.inputRef = y(), this.triggerRef = y(), this.listboxRef = y(), this.optionsController = new N(this), this.slotController = new L(this, this.helptextSlot), this.slotController.skipOptions = !0;
+  }
+  get _hasTextInput() {
+    return this.typeahead || this.allowUserInput;
+  }
+  get _selectionDescription() {
+    if (!(!this.multiple || this._value.length === 0))
+      return `${this._value.length} valgt`;
+  }
+  /**
+   * Focuses the appropriate trigger element after closing the listbox.
+   * Select-only: the combobox input div. Editable: the text input.
+   */
+  focusTrigger() {
+    var t, e;
+    this._hasTextInput ? (t = this.inputRef.value) == null || t.focus() : (e = this.triggerRef.value) == null || e.focus();
+  }
+  /**
+   * Parses the value prop into an internal string array.
+   */
+  parseValue() {
+    return Array.isArray(this.value) ? this.multiple ? this.value : this.value.length > 0 ? [this.value[0]] : [] : this.value && this.multiple ? this.value.split(",") : this.value ? [this.value] : [];
+  }
+  /**
+   * Updates the _maxIsReached state flag.
+   */
+  updateMaxReached() {
+    this._maxIsReached = k(this._value.length, this.maxlength);
+  }
+  /**
+   * Syncs the public value property from internal _value state and dispatches
+   * events if the value content changed. Always sets this.value as a string
+   * to prevent array→string reflect cascades.
+   */
+  syncValueAndDispatch(t) {
+    const e = this._value, s = this.multiple ? e.join(",") : e[0] || "", l = Array.isArray(this.value) ? this.value.join(",") : String(this.value || "");
+    if (s !== l && (this._internalValueSync = !0, this.value = s), (t == null ? void 0 : t.join(",")) !== e.join(",")) {
+      const a = this.multiple ? [...e] : e[0] || "";
+      this.onChange(a);
+    } else e.length === 0 && t && t.length > 0 && this.clearInputValue();
+  }
+  /**
+   * Override onChange to skip the base class touched guard.
+   * The base class returns early on the first call (setting touched = true but not
+   * dispatching events). Combobox needs consistent event dispatch regardless of
+   * touched state.
+   */
+  onChange(t) {
+    this.touched = !0, super.onChange(t);
+  }
+  /**
+   * No-op override of the base class valueChanged.
+   * The base class version sets both this.value AND this._value, which creates
+   * an infinite _value → valueChanged → value → parseValue → _value loop.
+   * Combobox handles value sync and event dispatch in syncValueAndDispatch() instead.
+   */
+  valueChanged() {
+  }
+}
+h([
+  r({ type: String, reflect: !0 })
+], n.prototype, "value");
+h([
+  r({ type: Array })
+], n.prototype, "options");
+h([
+  r({ type: Array, attribute: "default-options" })
+], n.prototype, "defaultOptions");
+h([
+  r({ type: Boolean, attribute: "allow-user-input" })
+], n.prototype, "allowUserInput");
+h([
+  r({ type: Boolean })
+], n.prototype, "typeahead");
+h([
+  r({ type: Boolean, attribute: "include-search" })
+], n.prototype, "includeSearch");
+h([
+  r({ type: String, attribute: "search-placeholder" })
+], n.prototype, "searchPlaceholder");
+h([
+  r({ type: Boolean })
+], n.prototype, "multiple");
+h([
+  r({ type: Number })
+], n.prototype, "maxlength");
+h([
+  r({ type: String, attribute: "display-value-as" })
+], n.prototype, "displayValueAs");
+h([
+  r({ type: String, attribute: "tag-placement" })
+], n.prototype, "tagPlacement");
+h([
+  r({ type: Boolean, attribute: "open" })
+], n.prototype, "isOpen");
+h([
+  v()
+], n.prototype, "_options");
+h([
+  v()
+], n.prototype, "_value");
+h([
+  v()
+], n.prototype, "_isOptionsOpen");
+h([
+  v()
+], n.prototype, "_userInfoMessage");
+h([
+  v()
+], n.prototype, "_addValueText");
+h([
+  v()
+], n.prototype, "_maxIsReached");
+h([
+  v()
+], n.prototype, "_search");
+h([
+  v()
+], n.prototype, "_inputFocus");
+class z extends n {
+  toggleValue(t) {
+    var T, S;
+    if (this.disabled) return;
+    this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
+    const e = ((T = f(this.options, t)) == null ? void 0 : T.value) || null, s = this._value.includes(t || e || ""), l = !!e, a = ((S = this._options.find((D) => D.value === t)) == null ? void 0 : S.disabled) || !1, o = !(t != null && t.trim()), p = !this.multiple, d = this.multiple, V = k(this._value.length, this.maxlength);
+    let _ = !1, O = !0, g = "", I = "";
+    a || (!l && this.allowUserInput && !o ? (this.addNewUserValue(t), g = "Ny verdi lagt til", _ = d) : !l && !this.allowUserInput ? (p && this._value[0] && this.removeValue(this._value[0]), O = !1, _ = !0, g = "Ingen treff i søket") : s ? (this.removeValue(e), _ = !0, p && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = "")) : o && p ? (this.removeAllSelected(), _ = !0) : p ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(e), _ = !1) : d && !V ? (this.setSelected(e), _ = !0) : d && V ? (g = "Maks antall valg nådd", O = !1, I = t) : (p && this.removeAllSelected(), g = "Ingen gyldig verdi valgt", O = !1, _ = !0, I = t), this._isOptionsOpen = _, _ || (p && this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
+      this.focusTrigger();
+    }, 0)), this._userInfoMessage = g, this._search = I || "", this.resetComboboxInput(O), d && this.updateMaxReached());
+  }
+  setSelected(t) {
+    if (!this._value.includes(t)) {
+      if (this.multiple && k(this._value.length, this.maxlength)) {
+        this._userInfoMessage = "Maks antall valg nådd";
+        return;
+      }
+      !this.multiple && this.removeAllSelected(), this._value = t ? [...this._value, t] : this._value, x.markOptionSelected(this._options, t), this.resetComboboxInput(!0);
+    }
+  }
+  removeSelected(t) {
+    if (!t) return;
+    this._value = this._value.filter((s) => s !== t);
+    const e = f(this.options, t);
+    e && (x.markOptionDeselected(this.options, t), e.userAdded ? (this._options = [...this._options.filter((s) => s.value !== t)], this.options = [...this.options.filter((s) => s.value !== t)]) : this._options.some((s) => s.value === t) || (this._options = [...this._options, e]));
+  }
+  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), x.markAllSelected(this._options), this.requestUpdate();
+    }
+  }
+  removeAllSelected() {
+    this._value = [], x.markAllDeselected(this._options), this._options = x.removeUserAddedOptions(this._options), this.requestUpdate();
+  }
+  addValue() {
+    var e;
+    const t = ((e = this.inputRef.value) == null ? void 0 : e.value.trim()) || "";
+    if (this._search = t, t && this._value.includes(t)) {
+      this.resetComboboxInput(!0), this._userInfoMessage = "Verdien er allerede valgt";
+      return;
+    }
+    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];
+    else if (!f(this.options, t)) {
+      if (k(this._value.length, this.maxlength)) return;
+      this._value = [...this._value, t];
+    }
+    const e = { value: t, label: t, userAdded: !0, selected: !0 };
+    this.options = [e, ...this.options], this._options = [e, ...this._options], this.resetComboboxInput(!0), this.multiple || (this._isOptionsOpen = !1, this._hasTextInput && (this._suppressNextOpen = !0), window.setTimeout(() => {
+      this.focusTrigger();
+    }, 0)), this.requestUpdate();
+  }
+  resetComboboxInput(t = !0) {
+    this._addValueText = null, this.inputRef.value && this.inputRef.value.type !== "hidden" && t && (this._search = "", this.multiple ? this.inputRef.value.value = "" : (this.inputRef.value.value = this._value[0] ? $(this._value[0], this.options, this.displayValueAs) : "", 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.updateMaxReached();
+  }
+}
+class Q extends z {
+  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) {
+        const { filtered: s, suggestion: l } = E(this.options, this._search);
+        this._options = s, t.inputType !== "deleteContentBackward" && (l != null && l.label) && this.inputRef.value && this.inputRef.value.type !== "hidden" && (e.value = l.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._suppressNextOpen) {
+        this._suppressNextOpen = !1, this._inputFocus = !0, this.requestUpdate();
+        return;
+      }
+      !this.multiple && this._value[0] && this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = $(
+        this._value[0],
+        this.options,
+        this.displayValueAs
+      )), this._inputFocus = !0, this._search = "", this._options = [...this.options], this._isOptionsOpen = !0, this.onFocus(), this.requestUpdate();
+    }
+  }
+  handleFocusOut(t) {
+    var l, a;
+    if (this.disabled || !this._isOptionsOpen) return;
+    const e = t.relatedTarget;
+    ((l = e == null ? void 0 : e.closest("pkt-combobox")) == null ? void 0 : l.id) === this.id || ((a = t.target) == null ? void 0 : a.getAttribute("data-focusfix")) === this.id || e === this.inputRef.value || e === this.triggerRef.value || this.closeAndProcessInput();
+  }
+  /**
+   * Shared close logic used by both focusout and outside-click handlers.
+   * Processes any pending input value, then closes the dropdown.
+   */
+  closeAndProcessInput() {
+    if (this._inputFocus = !1, this._addValueText = null, this._userInfoMessage = "", this._search = "", this.inputRef.value && this.inputRef.value.type !== "hidden") {
+      const t = this.inputRef.value.value;
+      if (this.multiple) {
+        if (t !== "") {
+          const { action: e, value: s } = K(
+            t,
+            this._value,
+            this.options,
+            this.allowUserInput,
+            this.multiple
+          );
+          switch (e) {
+            case "addUserValue":
+              this.addNewUserValue(s);
+              break;
+            case "selectOption":
+              this.setSelected(s);
+              break;
+            case "removeValue":
+              this.removeValue(s);
+              break;
+          }
+        }
+      } else if (!t)
+        this._value[0] && this.removeSelected(this._value[0]);
+      else {
+        const e = f(this.options, t);
+        e && e.value !== this._value[0] ? (this._value[0] && this.removeSelected(this._value[0]), this.setSelected(e.value)) : !e && this.allowUserInput && (this._value[0] && this.removeSelected(this._value[0]), this.addNewUserValue(t));
+      }
+      !this.multiple && this._value[0] ? this.inputRef.value.value = $(
+        this._value[0],
+        this.options,
+        this.displayValueAs
+      ) : this.inputRef.value.value = "";
+    }
+    this._isOptionsOpen = !1, this.onBlur();
+  }
+  handleBlur() {
+    this._inputFocus = !1, this.onBlur();
+  }
+  handleInputClick(t) {
+    var e, s;
+    if (this.disabled) {
+      t.preventDefault(), t.stopImmediatePropagation();
+      return;
+    }
+    this._hasTextInput ? ((e = this.inputRef.value) == null || e.focus(), this.requestUpdate()) : (t.stopImmediatePropagation(), t.preventDefault(), this._isOptionsOpen = !this._isOptionsOpen, this._isOptionsOpen && ((s = this.listboxRef.value) == null || s.focusFirstOrSelectedOption()));
+  }
+  handlePlaceholderClick(t) {
+    this.disabled || (t.stopPropagation(), this._hasTextInput && this.inputRef.value ? (this.inputRef.value.focus(), this._inputFocus = !0, this.requestUpdate()) : (this._isOptionsOpen = !this._isOptionsOpen, this.requestUpdate()));
+  }
+  handleSelectOnlyKeydown(t) {
+    var e, s;
+    if (!this.disabled)
+      switch (t.key) {
+        case "Enter":
+        case " ":
+        case "ArrowDown":
+        case "ArrowUp":
+          t.preventDefault(), this._isOptionsOpen ? this._isOptionsOpen = !1 : (this._isOptionsOpen = !0, (e = this.listboxRef.value) == null || e.focusFirstOrSelectedOption());
+          break;
+        case "Escape":
+          this._isOptionsOpen && (t.preventDefault(), this._isOptionsOpen = !1);
+          break;
+        case "Home":
+        case "End":
+          t.preventDefault(), this._isOptionsOpen || (this._isOptionsOpen = !0), (s = this.listboxRef.value) == null || s.focusFirstOrSelectedOption();
+          break;
+        case "ArrowLeft":
+          this.multiple && this._value.length > 0 && (t.preventDefault(), this.focusTag(this._value.length - 1));
+          break;
+        case "Backspace":
+        case "Delete":
+          this.multiple && this._value.length > 0 && (t.preventDefault(), this.removeSelected(this._value[this._value.length - 1]));
+          break;
+      }
+  }
+  handleOptionToggled(t) {
+    this.toggleValue(t.detail);
+  }
+  handleSearch(t) {
+    t.stopPropagation(), this._search = t.detail.toLowerCase(), this.checkForMatches();
+  }
+  handleInputKeydown(t) {
+    var s, l, a;
+    if (t.key === "Backspace") {
+      const o = !((s = this.inputRef.value) != null && s.value);
+      !this._search && o && this.multiple && this._value.length > 0 && this.removeLastValue(t);
+      return;
+    }
+    if (t.key === "ArrowLeft" && this.multiple && this._value.length > 0) {
+      const o = this.inputRef.value;
+      if (o && o.selectionStart === 0 && !o.value) {
+        t.preventDefault(), this.focusTag(this._value.length - 1);
+        return;
+      }
+    }
+    const e = j(t.key, t.shiftKey, this.multiple);
+    if (e && !(t.key === "Tab" && !this._isOptionsOpen)) {
+      if (e === "focusListbox" && t.key === "Tab" && !((l = this.listboxRef.value) == null ? void 0 : l.querySelector(
+        '[role="option"]:not([data-disabled]), [data-type="new-option"]'
+      ))) {
+        this.closeAndProcessInput();
+        return;
+      }
+      switch (t.preventDefault(), e) {
+        case "addValue":
+          this.addValue();
+          break;
+        case "focusListbox":
+          (a = this.listboxRef.value) == null || a.focusFirstOrSelectedOption();
+          break;
+        case "closeOptions":
+          this._isOptionsOpen = !1;
+          break;
+      }
+    }
+  }
+  handleTagRemove(t) {
+    this.removeSelected(t), this._hasTextInput && this.inputRef.value && (this._inputFocus = !0, this.inputRef.value.focus(), this.requestUpdate());
+  }
+  getInsideTags() {
+    return Array.from(
+      this.querySelectorAll(".pkt-combobox__input .pkt-combobox__tag-list pkt-tag")
+    );
+  }
+  focusTag(t) {
+    var l;
+    const e = this.getInsideTags();
+    e.forEach((a, o) => {
+      a.buttonTabindex = o === t ? 0 : -1;
+    });
+    const s = (l = e[t]) == null ? void 0 : l.querySelector("button");
+    s == null || s.focus();
+  }
+  resetTagTabindices() {
+    this.getInsideTags().forEach((e) => {
+      e.buttonTabindex = -1;
+    });
+  }
+  handleTagKeydown(t, e) {
+    t.stopPropagation();
+    const s = () => {
+      var l;
+      this.resetTagTabindices(), this._hasTextInput && this.inputRef.value ? this.inputRef.value.focus() : (l = this.triggerRef.value) == null || l.focus();
+    };
+    switch (t.key) {
+      case "ArrowLeft":
+        t.preventDefault(), e > 0 && this.focusTag(e - 1);
+        break;
+      case "ArrowRight":
+        t.preventDefault(), e < this._value.length - 1 ? this.focusTag(e + 1) : s();
+        break;
+      case "Backspace":
+      case "Delete":
+        t.preventDefault();
+        {
+          const l = this._value[e], a = e >= this._value.length - 1 ? e - 1 : e;
+          this.removeSelected(l), a >= 0 ? (this.requestUpdate(), this.updateComplete.then(() => this.focusTag(a))) : s();
+        }
+        break;
+      case "Tab":
+        this.resetTagTabindices();
+        break;
+      case "Escape":
+        t.preventDefault(), s();
+        break;
+    }
+  }
+  checkForMatches() {
+    var s;
+    const t = ((s = this.inputRef.value) == null ? void 0 : s.value) || this._search || "", e = W(
+      t,
+      this._value,
+      this.options,
+      this.allowUserInput,
+      this.multiple
+    );
+    if (e.shouldRemoveValue && this.removeValue(this._value[0]), e.shouldResetInput) {
+      this.resetComboboxInput(!1);
+      return;
+    }
+    this._addValueText = e.addValueText, this._userInfoMessage = e.userInfoMessage;
+  }
+}
+var X = Object.getOwnPropertyDescriptor, Y = (i, t, e, s) => {
+  for (var l = s > 1 ? void 0 : s ? X(t, e) : t, a = i.length - 1, o; a >= 0; a--)
+    (o = i[a]) && (l = o(l) || l);
+  return l;
+};
+let F = class extends Q {
+  constructor() {
+    super(...arguments), this.handleBodyClick = (i) => {
+      this._isOptionsOpen && !this.contains(i.target) && this.closeAndProcessInput();
+    };
+  }
+  // Lifecycle methods
+  connectedCallback() {
+    var i, t;
+    if (super.connectedCallback(), document == null || document.body.addEventListener("click", this.handleBodyClick), this._options = [], this.defaultOptions && this.defaultOptions.length) {
+      const e = ((i = this.options) == null ? void 0 : i.filter((s) => s.userAdded)) || [];
+      this.options = [...e, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
+    }
+    if ((t = this.optionsController) != null && t.nodes && this.optionsController.nodes.length) {
+      const e = C.parseOptionsFromSlot(this.optionsController.nodes);
+      e.length && (this.options = [...e], this._options = [...e], this._optionsFromSlot = !0, this._lastSlotGeneration = this.optionsController.generation);
+    }
+  }
+  willUpdate(i) {
+    if (this._optionsFromSlot && this.optionsController) {
+      const t = this.optionsController.generation;
+      if (t !== this._lastSlotGeneration) {
+        this._lastSlotGeneration = t;
+        const e = C.parseOptionsFromSlot(this.optionsController.nodes), s = this._options.filter((l) => l.userAdded);
+        this.options = [...s, ...e];
+      }
+    }
+    super.willUpdate(i);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document == null || document.body.removeEventListener("click", this.handleBodyClick);
+  }
+  firstUpdated(i) {
+    this.defaultValue !== null && !this.value && (this.value = this.defaultValue), super.firstUpdated(i);
+  }
+  updated(i) {
+    i.has("isOpen") && (this._isOptionsOpen = this.isOpen);
+    const t = i.has("value"), e = i.has("_value");
+    if (t && this._internalValueSync)
+      this._internalValueSync = !1, e && this.syncValueAndDispatch(i.get("_value"));
+    else if (t) {
+      const l = [...this._value], a = this.parseValue();
+      a.join(",") !== this._value.join(",") && (this._value = a), this.updateMaxReached(), this.syncValueAndDispatch(l);
+    } else e && this.syncValueAndDispatch(i.get("_value"));
+    if (i.has("defaultOptions") && this.defaultOptions.length) {
+      const l = (Array.isArray(this.options) ? this.options : []).filter((a) => a.userAdded) || [];
+      this.options = [...l, ...JSON.parse(JSON.stringify(this.defaultOptions))], this._options = Array.isArray(this.options) ? [...this.options] : [];
+    }
+    if (i.has("options")) {
+      const l = i.get("options") || this._options || [], a = A.mergeWithUserAdded(this.options, l);
+      this._options = a, a.length > this.options.length && (this.options = a);
+      const o = A.syncOptionsWithValues(this._options, this._value);
+      if (this._options = o.options, o.newValues.length > this._value.length) {
+        const p = [...this._value];
+        this._value = o.newValues, this.syncValueAndDispatch(p);
+      }
+    }
+    if (i.has("_search") && this.dispatchEvent(
+      new CustomEvent("search", {
+        detail: this._search,
+        bubbles: !1
+      })
+    ), !this._isOptionsOpen && !this.multiple && this._hasTextInput && this.inputRef.value && this.inputRef.value.type !== "hidden") {
+      const l = this._value[0] ? $(this._value[0], this.options, this.displayValueAs) : "";
+      this.inputRef.value.value !== l && (this.inputRef.value.value = l);
+    }
+    super.updated(i);
+  }
+  /**
+   * Override form reset to properly restore combobox state.
+   * The base class deselects all options and sets value/defaultValue, but
+   * combobox needs to re-sync _options with the restored values and clean up
+   * user-added options and UI state.
+   */
+  formResetCallback() {
+    this.touched = !1;
+    const i = this.defaultValue || (this.multiple, "");
+    this.value = i, this._value = this.parseValue(), this._options = this._options.filter((t) => !t.userAdded).map((t) => ({ ...t, selected: this._value.includes(t.value) })), this.options = this.options.filter((t) => !t.userAdded).map((t) => ({ ...t, selected: this._value.includes(t.value) })), this._search = "", this._isOptionsOpen = !1, this._userInfoMessage = "", this._addValueText = null, this._inputFocus = !1, this.updateMaxReached(), this.inputRef.value && this.inputRef.value.type !== "hidden" && (this.inputRef.value.value = ""), this.internals.setFormValue(""), this.internals.ariaInvalid = "false", this.requestUpdate();
+  }
+  attributeChangedCallback(i, t, e) {
+    if (i === "options") {
+      this._options = Array.isArray(this.options) ? [...this.options] : [];
+      const s = A.syncOptionsWithValues(this._options, this._value);
+      this._options = s.options, s.newValues.length > this._value.length && (this._value = s.newValues), this._search = "";
+    }
+    super.attributeChangedCallback(i, t, e);
+  }
+  // Render methods
+  render() {
+    return c`
+      <pkt-input-wrapper
+        .label=${this.label}
+        .helptext=${this.helptext}
+        .helptextDropdown=${u(this.helptextDropdown)}
+        .helptextDropdownButton=${u(this.helptextDropdownButton)}
+        ?fullwidth=${this.fullwidth}
+        ?hasError=${this.hasError}
+        ?inline=${this.inline}
+        ?disabled=${this.disabled}
+        .errorMessage=${this.errorMessage}
+        ?optionalTag=${this.optionalTag}
+        .optionalText=${this.optionalText}
+        ?requiredTag=${this.requiredTag}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        useWrapper=${this.useWrapper}
+        .forId=${this._hasTextInput ? this.id + "-input" : this.id + "-combobox"}
+        ?hasFieldset=${!this._hasTextInput}
+        class="pkt-combobox__wrapper"
+        @labelClick=${this.handleInputClick}
+      >
+        <div class="pkt-contents" ${b(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
+    })}
+            id=${u(this._hasTextInput ? void 0 : `${this.id}-combobox`)}
+            role=${u(this._hasTextInput ? void 0 : "combobox")}
+            aria-expanded=${u(
+      this._hasTextInput ? void 0 : this._isOptionsOpen ? "true" : "false"
+    )}
+            aria-controls=${u(this._hasTextInput ? void 0 : `${this.id}-listbox`)}
+            aria-haspopup=${u(this._hasTextInput ? void 0 : "listbox")}
+            aria-labelledby=${u(
+      this._hasTextInput ? void 0 : `${this.id}-combobox-label`
+    )}
+            aria-activedescendant=${u(
+      !this._hasTextInput && this._value[0] && f(this.options, this._value[0]) ? `${this.id}-listbox-${R(this._options, this._value[0])}` : void 0
+    )}
+            aria-description=${u(this._selectionDescription || void 0)}
+            tabindex=${this._hasTextInput || this.disabled ? "-1" : "0"}
+            @click=${this.handleInputClick}
+            @keydown=${this._hasTextInput ? m : this.handleSelectOnlyKeydown}
+            ${b(this.triggerRef)}
+          >
+            ${!this._hasTextInput && this.placeholder && (!this._value.length || this.multiple && this.tagPlacement == "outside") && !this._inputFocus ? c`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
+                  >${this.placeholder}</span
+                >` : this.tagPlacement !== "outside" ? this.renderSingleOrMultipleValues() : m}
+            ${this.renderInputField()}
+            <pkt-icon
+              class=${w({
+      "pkt-combobox__arrow-icon": !0,
+      "pkt-combobox__arrow-icon--open": this._isOptionsOpen
+    })}
+              name="chevron-thin-down"
+              aria-hidden="true"
+            ></pkt-icon>
+          </div>
+
+          <pkt-listbox
+            id="${this.id}-listbox"
+            .options=${this._options}
+            .isOpen=${this._isOptionsOpen}
+            .searchPlaceholder=${this.searchPlaceholder}
+            .label="Liste: ${this.label || ""}"
+            ?include-search=${this.includeSearch}
+            ?is-multi-select=${this.multiple}
+            ?allow-user-input=${this.allowUserInput && !this._maxIsReached}
+            ?max-is-reached=${this._maxIsReached}
+            .customUserInput=${u(this._addValueText)}
+            .userMessage=${this._userInfoMessage}
+            @search=${this.handleSearch}
+            @option-toggle=${this.handleOptionToggled}
+            @select-all=${this.addAllOptions}
+            @close-options=${() => this._isOptionsOpen = !1}
+            @tab-close=${() => this.closeAndProcessInput()}
+            .searchValue=${this._search || null}
+            .maxLength=${this.maxlength || 0}
+            ${b(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement === "outside" && this.multiple ? c`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>` : m}
+      </pkt-input-wrapper>
+    `;
+  }
+  renderInputField() {
+    return this.typeahead || this.allowUserInput ? c`
+          <div class="pkt-combobox__input-div combobox__input">
+            <input
+              type="text"
+              id="${this.id}-input"
+              name=${(this.name || this.id) + "-input"}
+              placeholder=${u(
+      !this._value.length || this.multiple && this.tagPlacement === "outside" ? this.placeholder : void 0
+    )}
+              @input=${this.handleInput}
+              @change=${(i) => {
+      i.stopPropagation(), i.stopImmediatePropagation();
+    }}
+              @keydown=${this.handleInputKeydown}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+              autocomplete="off"
+              role="combobox"
+              aria-expanded=${this._isOptionsOpen ? "true" : "false"}
+              aria-label=${u(this.label)}
+              aria-autocomplete=${this.typeahead ? "both" : this.allowUserInput ? "list" : "none"}
+              aria-controls="${this.id}-listbox"
+              aria-activedescendant=${u(
+      this._value[0] && f(this.options, this._value[0]) ? `${this.id}-listbox-${R(this._options, this._value[0])}` : void 0
+    )}
+              aria-description=${u(this._selectionDescription || void 0)}
+              ${b(this.inputRef)}
+            />
+          </div>
+        ` : c`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name || this.id) + "-input"}
+            .value=${this._value.join(",")}
+            ${b(this.inputRef)}
+          />
+        `;
+  }
+  renderSingleOrMultipleValues() {
+    if (!this.multiple && this._hasTextInput) return m;
+    const i = !this.multiple, t = this.renderValueTag(f(this.options, this._value[0])), e = this.tagPlacement === "outside", s = c`
+      <ul role="list" class="pkt-combobox__tag-list">
+        ${P(
+      this._value,
+      (l) => l,
+      (l, a) => {
+        const o = f(this.options, l), p = o == null ? void 0 : o.tagSkinColor;
+        return c`
+              <li
+                role="listitem"
+                @click=${e ? m : (d) => d.stopPropagation()}
+                @mousedown=${e ? m : (d) => d.preventDefault()}
+              >
+                <pkt-tag
+                  skin=${p || "blue-dark"}
+                  ?closeTag=${!this.disabled}
+                  .buttonTabindex=${e ? void 0 : -1}
+                  @close=${() => this.handleTagRemove(l)}
+                  @keydown=${e ? m : (d) => this.handleTagKeydown(d, a)}
+                >
+                  ${this.renderValueTag(o)}
+                </pkt-tag>
+              </li>
+            `;
+      }
+    )}
+      </ul>
+    `;
+    return i ? t : s;
+  }
+  renderValueTag(i) {
+    if (!i) return "";
+    switch (this.displayValueAs) {
+      case "prefixAndValue":
+        return c`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${i.prefix || ""} ${i.value}</span
+        >`;
+      case "value":
+        return c`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${i.value}</span
+        >`;
+      case "label":
+      default:
+        return c`<span class="pkt-combobox__value" data-focusfix=${this.id}
+          >${i.label || i.value}</span
+        >`;
+    }
+  }
+};
+F = Y([
+  M("pkt-combobox")
+], F);
+export {
+  F as P
+};