@oslokommune/punkt-elements 12.31.2 → 12.32.0

package/dist/combobox-DbO6I0GT.js

@@ -0,0 +1,694 @@
+import { x as d, E as $, n as u, a as O } from "./element-G8JoS0Lj.js";
+import { o as f } from "./if-defined-rCqT8Od1.js";
+import { r as c } from "./state-gfUuUqVg.js";
+import { e as v, n as m } from "./ref-cRTOoM4R.js";
+import { e as w } from "./class-map-ChuDQU5C.js";
+import { c as V } from "./repeat-CArTw6-s.js";
+import { P as R } from "./input-element-DM2uSYaW.js";
+import { P as S } from "./pkt-options-controller-CZplGTgu.js";
+import { P as T } from "./pkt-slot-controller-D1DakVrU.js";
+import "./input-wrapper-DQmYzhcy.js";
+import "./icon-BJnwW0eh.js";
+import "./tag-CWx1XsGR.js";
+import "./listbox-DX-Euxdm.js";
+const C = "pkt-combobox", M = !0, A = {
+  name: {
+    type: "string",
+    name: "Navn",
+    description: "Navn som brukes i skjema ved innsending"
+  },
+  id: {
+    type: "string",
+    name: "ID",
+    description: "Unik ID for feltet"
+  },
+  label: {
+    type: "string",
+    name: "Etikett",
+    description: "Tekst som vises over feltet"
+  },
+  placeholder: {
+    name: "Hint",
+    description: "Spesifiserer en kort hint som beskriver forventet verdi av feltet.",
+    type: "string",
+    required: !1
+  },
+  multiple: {
+    type: "boolean",
+    name: "Flervalg",
+    default: !0,
+    description: "Mulighet for å velge flere valg"
+  },
+  typeahead: {
+    type: "boolean",
+    name: "Typeahead",
+    default: !0,
+    description: "Mulighet for automatisk utfylling av feltet fra listen over valg"
+  },
+  includeSearch: {
+    type: "boolean",
+    name: "Inkluder søk",
+    description: "Mulighet for å søke etter valg inni dropdown"
+  },
+  allowUserInput: {
+    type: "boolean",
+    name: "Brukervalgte verdier",
+    description: "Mulighet for å skrive inn egne verdier"
+  },
+  displayValueAs: {
+    type: [
+      "label",
+      "value",
+      "prefixAndValue"
+    ],
+    name: "Visning av valgt verdi",
+    description: "Hvordan valgt verdi vises i feltet",
+    default: "label"
+  },
+  maxlength: {
+    type: "number",
+    name: "Maks lengde",
+    description: "Maks antall valg dersom flervalg er aktivert"
+  },
+  tagPlacement: {
+    type: [
+      "inside",
+      "outside"
+    ],
+    name: "Plassering av tags",
+    description: "Plassering av valgte verdier i feltet ved flervalg",
+    default: "top"
+  },
+  value: {
+    name: "Verdi",
+    type: "string",
+    description: "Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg."
+  },
+  helptext: {
+    type: "string",
+    name: "Hjelpetekst",
+    description: "Hjelpetekst som vises over feltet"
+  },
+  helptextDropdown: {
+    type: "string",
+    name: "Utvidet hjelpetekst",
+    description: "Hjelpetekst som vises over feltet"
+  },
+  helptextDropdownButton: {
+    type: "string",
+    name: "Knappetekst for hjelpetekst",
+    description: "Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",
+    default: "Les mer"
+  },
+  disabled: {
+    type: "boolean",
+    name: "Deaktivert",
+    description: "Feltet er deaktivert"
+  },
+  hasError: {
+    type: "boolean",
+    name: "Feil",
+    description: "Feltet har en feil"
+  },
+  errorMessage: {
+    type: "string",
+    name: "Feilmelding",
+    description: "Tekst som vises under feltet ved feil"
+  },
+  required: {
+    type: "boolean",
+    name: "Påkrevd",
+    description: "Feltet må fylles ut"
+  },
+  requiredTag: {
+    type: "boolean",
+    name: "Påkrevd-merking",
+    description: "Viser en merking som indikerer at feltet er påkrevd"
+  },
+  requiredText: {
+    type: "string",
+    name: "Påkrevd-tekst",
+    description: "Tekst som vises i påkrevd-merkingen"
+  },
+  optionalTag: {
+    type: "boolean",
+    name: "Valgfritt-merking",
+    description: "Viser en merking som indikerer at feltet er valgfritt"
+  },
+  optionalText: {
+    type: "string",
+    name: "Valgfritt-tekst",
+    description: "Tekst som vises i valgfritt-merkingen"
+  },
+  fullwidth: {
+    type: "boolean",
+    name: "Full bredde",
+    description: "Skal feltet ta opp hele bredden?"
+  },
+  options: {
+    name: "Valg",
+    type: "array",
+    description: "Liste over valg som kan velges, om options sendes inn som array med objekter",
+    default: [],
+    previewDefault: [
+      {
+        value: "bfr",
+        label: "Frogner"
+      },
+      {
+        value: "bgo",
+        label: "Gamle Oslo"
+      },
+      {
+        value: "bgr",
+        label: "Grorud"
+      },
+      {
+        value: "bxx",
+        label: "Andre bydeler"
+      }
+    ],
+    items: {
+      type: "object",
+      properties: {
+        value: {
+          type: "string",
+          description: "Verdi som sendes ved valg"
+        },
+        label: {
+          type: "string",
+          description: "Tekst som vises for valget"
+        },
+        prefix: {
+          type: "string",
+          description: "Tekst som vises før valget"
+        },
+        description: {
+          type: "string",
+          description: "Beskrivelse av valget"
+        },
+        disabled: {
+          type: "boolean",
+          description: "Valget er deaktivert"
+        },
+        selected: {
+          type: "boolean",
+          description: "Valget er valgt"
+        },
+        tagSkinColor: {
+          type: [
+            "blue",
+            "blue-dark",
+            "blue-light",
+            "green",
+            "red",
+            "yellow",
+            "beige",
+            "gray",
+            "grey"
+          ],
+          description: "Farge på tag"
+        }
+      },
+      required: [
+        "value"
+      ]
+    }
+  }
+}, F = {
+  name: C,
+  "css-class": "pkt-combobox",
+  isElement: M,
+  props: A
+};
+var P = Object.defineProperty, D = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? D(t, i) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (o = (s ? l(t, i, o) : l(o)) || o);
+  return s && o && P(t, i, o), o;
+};
+let a = class extends R {
+  constructor() {
+    super(), this.helptextSlot = v(), this.value = "", this.options = [], this.allowUserInput = !1, this.typeahead = !1, this.includeSearch = !1, this.searchPlaceholder = "", this.multiple = !1, this.maxlength = null, this.displayValueAs = F.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 = v(), this.arrowRef = v(), this.listboxRef = v(), this.focusRef = v(), this.optionTagRef = v(), this.optionsController = new S(this), this.slotController = new T(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 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) => {
+      t.fulltext = t.value + t.label + (t.prefix || ""), 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.fulltext = s.value + s.label + (s.prefix || "");
+    }), this._search = ""), super.attributeChangedCallback(e, t, 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" ${m(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() : $}
+            ${this.renderInputField()}
+            <div
+              class="pkt-btn pkt-btn--tertiary pkt-combobox__arrow"
+              @click=${this.handleArrowClick}
+              @keydown=${this.handleArrowClick}
+              id="${this.id}-arrow"
+              ${m(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 ${m(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}
+            ${m(this.listboxRef)}
+          ></pkt-listbox>
+        </div>
+
+        ${this.tagPlacement === "outside" && this.multiple ? d`<div class="pkt-combobox__tags-outside">
+              ${this.renderSingleOrMultipleValues()}
+            </div>` : $}
+      </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
+    )}
+              ${m(this.inputRef)}
+            />
+          </div>
+        ` : d`
+          <input
+            type="hidden"
+            id="${this.id}-input"
+            name=${(this.name || this.id) + "-input"}
+            .value=${this._value.join(",")}
+            ${m(this.inputRef)}
+          />
+        `;
+  }
+  renderSingleOrMultipleValues() {
+    const e = !this.multiple, t = this._editingSingleValue ? null : this.renderValueTag(this.findValueInOptions(this._value[0])), i = V(
+      this._value,
+      (s) => s,
+      (s) => {
+        var l;
+        const o = this.findValueInOptions(s), r = (l = this.options.find((h) => h.value === s)) == null ? void 0 : l.tagSkinColor;
+        return d`
+          <pkt-tag
+            skin=${r || "blue-dark"}
+            ?closeTag=${!this.disabled}
+            @close=${() => this.handleTagRemove(s)}
+          >
+            ${this.renderValueTag(o)}
+          </pkt-tag>
+        `;
+      }
+    );
+    return e ? t : i;
+  }
+  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(
+          (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 o;
+              return !s.selected && ((o = s.label) == null ? void 0 : o.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, o, r;
+    if (!this.disabled && ((i = (t = e.relatedTarget) == null ? void 0 : t.closest("pkt-combobox")) == null ? void 0 : i.id) !== this.id && ((o = (s = e.relatedTarget) == null ? void 0 : s.closest("pkt-combobox")) == null ? void 0 : o.id) !== this.id && ((r = e.target) == null ? void 0 : r.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;
+        !this._value.includes(l) && !this._options.find((h) => h.label === l) ? this.allowUserInput ? this.addNewUserValue(l) : this.multiple || this.removeValue(this._value[0]) : this._value.includes(l) || this.setSelected(l), 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 r;
+    const e = ((r = this.inputRef.value) == null ? void 0 : r.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((l) => l.toLowerCase() === t), s = this._options.filter(
+      (l) => {
+        var h;
+        return ((h = l.label) == null ? void 0 : h.toLowerCase().includes(t)) ?? !1;
+      }
+    ), o = s.find(
+      (l) => {
+        var h;
+        return ((h = l.label) == null ? void 0 : h.toLowerCase()) === t || l.value.toLowerCase() === t;
+      }
+    );
+    switch (!0) {
+      case ((s.length === 0 || !o) && 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 y, I;
+    if (this.disabled) return;
+    this.touched = !0, this._userInfoMessage = "", this._addValueText = null;
+    const t = ((y = this.findValueInOptions(e)) == null ? void 0 : y.value) || null, i = this._value.includes(e || t || ""), s = !!t, o = ((I = this._options.find((_) => _.value === e)) == null ? void 0 : I.disabled) || !1, r = !(e != null && e.trim()), l = !this.multiple, h = this.multiple, x = this.isMaxItemsReached();
+    let p = !1, g = !0, b = "", k = "";
+    o || (!s && this.allowUserInput && !r ? (this.addNewUserValue(e), b = "Ny verdi lagt til", p = !h) : !s && !this.allowUserInput ? (l && this._value[0] && this.removeValue(this._value[0]), g = !1, p = !0, b = "Ingen treff i søket") : i ? (this.removeValue(t), p = !0) : r && 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())) : h && !x ? (this.setSelected(t), p = !0) : h && x ? (this._userInfoMessage = "Maks antall valg nådd", g = !1, k = e) : (l && this.removeAllSelected(), this._userInfoMessage = "Ingen gyldig verdi valgt", g = !1, p = !0, k = e), this._isOptionsOpen = p, p || window.setTimeout(() => {
+      var _;
+      (_ = this.focusRef.value) == null || _.focus();
+    }, 0), this._userInfoMessage = b, this._search = k || "", this.resetComboboxInput(g), 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();
+  }
+};
+n([
+  u({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+n([
+  u({ type: Array })
+], a.prototype, "options", 2);
+n([
+  u({ type: Boolean })
+], a.prototype, "allowUserInput", 2);
+n([
+  u({ type: Boolean })
+], a.prototype, "typeahead", 2);
+n([
+  u({ type: Boolean })
+], a.prototype, "includeSearch", 2);
+n([
+  u({ type: String })
+], a.prototype, "searchPlaceholder", 2);
+n([
+  u({ type: Boolean })
+], a.prototype, "multiple", 2);
+n([
+  u({ type: Number })
+], a.prototype, "maxlength", 2);
+n([
+  u({ type: String })
+], a.prototype, "displayValueAs", 2);
+n([
+  u({ type: String })
+], a.prototype, "tagPlacement", 2);
+n([
+  c()
+], a.prototype, "_options", 2);
+n([
+  c()
+], a.prototype, "_isOptionsOpen", 2);
+n([
+  c()
+], a.prototype, "_value", 2);
+n([
+  c()
+], a.prototype, "_userInfoMessage", 2);
+n([
+  c()
+], a.prototype, "_addValueText", 2);
+n([
+  c()
+], a.prototype, "_maxIsReached", 2);
+n([
+  c()
+], a.prototype, "_search", 2);
+n([
+  c()
+], a.prototype, "_inputFocus", 2);
+n([
+  c()
+], a.prototype, "_editingSingleValue", 2);
+a = n([
+  O("pkt-combobox")
+], a);
+export {
+  a as P
+};