@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/dist/combobox-cer7PLSE.js

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

package/dist/listbox-C7NEa9SU.cjs

@@ -1,96 +0,0 @@
-"use strict";const s=require("./element-CMTfByxQ.cjs"),p=require("./state-BNgpvY-A.cjs"),c=require("./if-defined-hKKmbsI8.cjs"),u=require("./repeat-C-FJ2vfy.cjs"),h=require("./class-map-Bokp1SoS.cjs"),d=require("./utils-byXsEz1u.cjs");var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,l=(r,e,t,i)=>{for(var n=i>1?void 0:i?f(e,t):e,o=r.length-1,a;o>=0;o--)(a=r[o])&&(n=(i?a(e,t,n):a(n))||n);return i&&n&&b(e,t,n),n};exports.PktListbox=class extends s.PktElement{constructor(){super(...arguments),this.id=d.uuidish(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=""),this.options.length>0&&this.filterOptions(),this.setAttribute("tabindex","-1"),this.addEventListener("focus",this.focusFirstOrSelectedOption)}updated(e){(e.has("options")||e.has("searchValue"))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,i){(e==="options"||e==="searchValue"||e==="search-value")&&this.filterOptions(),super.attributeChangedCallback(e,t,i)}render(){return s.b`
-      <div
-        class=${h.e({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
-        role="listbox"
-        aria-multiselectable=${c.o(this.isMultiSelect?"true":void 0)}
-        aria-label=${c.o(this.label)}
-      >
-        <div class="pkt-listbox__banners">
-          ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
-          ${this.renderNewOptionBanner()} ${this.renderSearch()}
-        </div>
-        <ul class="pkt-listbox__options" role="presentation">
-          ${this.renderList()}
-        </ul>
-      </div>
-    `}renderCheckboxOrCheckIcon(e,t){return this.isMultiSelect?s.b`
-          <input
-            class="pkt-input-check__input-checkbox"
-            type="checkbox"
-            role="presentation"
-            tabindex="-1"
-            value=${e.value}
-            .checked=${e.selected}
-            aria-labelledby=${this.id+"-option-label-"+t}
-            ?disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
-          />
-        `:e.selected?s.b`<pkt-icon name="check-big"></pkt-icon>`:s.A}renderList(){return s.b`
-      ${u.c(this._filteredOptions,e=>e.value,(e,t)=>s.b`
-          <li
-            @click=${()=>{this.toggleOption(e)}}
-            aria-selected=${e.selected?"true":"false"}
-            @keydown=${this.handleOptionKeydown}
-            class=${h.e({"pkt-listbox__option":!0,"pkt-listbox__option--selected":!!(!this.isMultiSelect&&e.selected),"pkt-listbox__option--checkBox":this.isMultiSelect})}
-            tabindex="${this.disabled||e.disabled?"-1":"0"}"
-            data-index=${t}
-            data-value=${e.value}
-            data-selected=${e.selected?"true":"false"}
-            ?data-disabled=${this.disabled||e.disabled||this.maxIsReached&&!e.selected}
-            role="option"
-            id=${`${this.id}-${t}`}
-          >
-            ${this.renderCheckboxOrCheckIcon(e,t)}
-            <span class="pkt-listbox__option-label" id=${this.id+"-option-label-"+t}>
-              ${e.prefix?s.b`<span class="pkt-listbox__option-prefix">${e.prefix}</span>`:s.A}
-              ${e.label||e.value}
-            </span>
-            ${e.description?s.b`<span class="pkt-listbox__option-description pkt-txt-14-light"
-                  >${e.description}</span
-                >`:s.A}
-          </li>
-        `)}
-    `}renderNewOptionBanner(){return this.allowUserInput&&this.customUserInput?s.b`
-          <div
-            class="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
-            data-type="new-option"
-            data-value=${this.customUserInput}
-            data-selected="false"
-            tabindex="0"
-            @click=${()=>this.toggleOption({value:this.customUserInput||""})}
-            @keydown=${this.handleOptionKeydown}
-          >
-            <pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
-            Legg til “${this.customUserInput}”
-          </div>
-        `:s.A}renderMaximumReachedBanner(){return this._selectedOptions=this.options.filter(e=>e.selected).length,this.isMultiSelect&&this._selectedOptions>0&&this.maxLength>0?s.b`
-          <div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
-            ${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
-          </div>
-        `:s.A}renderUserMessage(){return this.userMessage?s.b`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
-          <pkt-icon
-            class="pkt-listbox__banner-icon"
-            name="exclamation-mark-circle"
-            size="large"
-          ></pkt-icon>
-          ${this.userMessage}
-        </div>`:s.A}renderSearch(){return this.includeSearch?s.b`
-          <div class="pkt-listbox__search">
-            <span class="pkt-listbox__search-icon">
-              <pkt-icon name="magnifying-glass-small" size="large"></pkt-icon>
-            </span>
-            <input
-              class="pkt-txt-16-light"
-              type="text"
-              aria-label="Søk i listen"
-              form=""
-              placeholder=${this.searchPlaceholder||s.strings.forms.search.placeholder}
-              @input=${this.handleSearchInput}
-              @keydown=${this.handleSearchKeydown}
-              .value=${this.searchValue}
-              data-type="searchbox"
-              ?disabled=${this.disabled}
-              ?readonly=${this.disabled}
-              role="searchbox"
-            />
-          </div>
-        `:s.A}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent("search",{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case"Enter":e.preventDefault();break;case"ArrowUp":case"Escape":this.closeOptions(),e.preventDefault();break;case"ArrowDown":case"Tab":this.focusFirstOrSelectedOption();break}}handleOptionKeydown(e){const t=e.currentTarget,i=t.dataset.value,n=t.dataset.type,o=t.dataset.selected==="true";if(!(!this.getOptionElements().length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&n!=="new-option"&&n!=="searchbox"))switch(e.key){case" ":case"Enter":this.toggleOption(t),e.preventDefault();break;case"Backspace":i&&(o?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case"Escape":case"Tab":this.closeOptions();break;case"ArrowDown":e.altKey?this.focusLastOption():n==="searchbox"||n==="new-option"?this.focusFirstOption():this.focusNextOption(t),e.preventDefault();break;case"ArrowUp":if(e.altKey)this.focusFirstOption();else if(t.dataset.index==="0"&&this.includeSearch){const a=this.querySelector('[role="searchbox"]');a&&a.focus()}else if(t.dataset.index==="0"&&this.customUserInput){const a=this.querySelector('[data-type="new-option"]');a&&a.focus()}else this.focusPreviousOption(t);e.preventDefault();break;case"Home":this.focusFirstOption(),e.preventDefault();break;case"End":this.focusLastOption(),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key==="a"&&(this.selectAll(),e.preventDefault()),this.isLetterOrSpace(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault());break}}focusAndScrollIntoView(e){e.scrollIntoView({block:"nearest"}),window.setTimeout(()=>e.focus(),0)}focusNextOption(e){const t=e.nextElementSibling;t&&this.focusAndScrollIntoView(t)}focusPreviousOption(e){const t=e.previousElementSibling;if(e.dataset.index==="0"&&this.includeSearch){const i=this.querySelector('[role="searchbox"]');i&&this.focusAndScrollIntoView(i)}else t&&this.focusAndScrollIntoView(t)}focusFirstOption(){const e=this.getOptionElements()[0];e&&this.focusAndScrollIntoView(e)}focusLastOption(){const e=this.getOptionElements().pop();e&&this.focusAndScrollIntoView(e)}focusFirstOrSelectedOption(){if(this.disabled)return;const e=this.getOptionElements().find(t=>t.dataset.selected==="true");if(this.allowUserInput&&this.customUserInput){const t=this.querySelector('[data-type="new-option"]');this.focusAndScrollIntoView(t)}else if(e)this.focusAndScrollIntoView(e);else if(this.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){const t=this.querySelector('[role="searchbox"]');window.setTimeout(()=>t.focus(),0)}else this.focusFirstOption()}toggleOption(e){const t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;const i=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent("option-toggle",{detail:i,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent("select-all",{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent("close-options",{bubbles:!1}))}filterOptions(){this.searchValue?this._filteredOptions=this.options.filter(e=>{var i;return(e.fulltext||e.label+e.value+(e.prefix||"")).toLowerCase().includes(((i=this.searchValue)==null?void 0:i.toLowerCase())||"")}):this._filteredOptions=[...this.options]}isLetterOrSpace(e){return/^[\p{L} ]$/u.test(e)}handleTypeAhead(e){this.typeAheadString+=e.toLowerCase(),this.typeAheadTimeout&&clearTimeout(this.typeAheadTimeout),this.typeAheadTimeout=window.setTimeout(()=>{this.typeAheadString=""},500);const i=this.getOptionElements().find(n=>{var o;return(o=n.textContent)==null?void 0:o.trim().toLowerCase().startsWith(this.typeAheadString)});i&&this.focusAndScrollIntoView(i)}getOptionElements(){return this._filteredOptions.length?Array.from(this.querySelectorAll('[role="option"]:not([data-disabled])')||[]):[]}};l([s.n({type:String})],exports.PktListbox.prototype,"id",2);l([s.n({type:String})],exports.PktListbox.prototype,"label",2);l([s.n({type:Array})],exports.PktListbox.prototype,"options",2);l([s.n({type:Boolean,reflect:!0})],exports.PktListbox.prototype,"isOpen",2);l([s.n({type:Boolean})],exports.PktListbox.prototype,"disabled",2);l([s.n({type:Boolean})],exports.PktListbox.prototype,"includeSearch",2);l([s.n({type:Boolean})],exports.PktListbox.prototype,"isMultiSelect",2);l([s.n({type:Boolean})],exports.PktListbox.prototype,"allowUserInput",2);l([s.n({type:Boolean})],exports.PktListbox.prototype,"maxIsReached",2);l([s.n({type:String})],exports.PktListbox.prototype,"customUserInput",2);l([s.n({type:String})],exports.PktListbox.prototype,"searchPlaceholder",2);l([s.n({type:String})],exports.PktListbox.prototype,"searchValue",2);l([s.n({type:Number})],exports.PktListbox.prototype,"maxLength",2);l([s.n({type:String})],exports.PktListbox.prototype,"userMessage",2);l([p.r()],exports.PktListbox.prototype,"_filteredOptions",2);exports.PktListbox=l([s.t("pkt-listbox")],exports.PktListbox);