@oslokommune/punkt-elements/dist/select-CsgDatCa.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { x as p, n as c, a as v } from "./element-CgEWt74-.js";
import { r as f } from "./state-Bo2bck5_.js";
import { e as u, n as d } from "./ref-BBYSqgeW.js";
import { o } from "./if-defined-CmuO4Vz9.js";
import { P as b } from "./input-element-NnrDmp4r.js";
import { P as $ } from "./pkt-options-controller-CZO1nxZ8.js";
import { P as x } from "./pkt-slot-controller-BPGj-LC5.js";
import "./input-wrapper-Dr__Sxql.js";
var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, s, i) => {
  for (var l = i > 1 ? void 0 : i ? g(e, s) : e, a = t.length - 1, r; a >= 0; a--)
    (r = t[a]) && (l = (i ? r(e, s, l) : r(l)) || l);
  return i && l && m(e, s, l), l;
};
let h = class extends b {
  constructor() {
    super(), this.inputRef = u(), this.helptextSlot = u(), this.options = [], this.value = "", this._options = [], this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new $(this), this.slotController = new x(this, this.helptextSlot), this.slotController.skipOptions = !0;
  }
  // Used for initilization
  connectedCallback() {
    super.connectedCallback();
    const t = this.options.length > 0, e = this.optionsController.nodes.length && this.optionsController.nodes.length > 0;
    !t && e ? this.optionsController.nodes.forEach((s) => {
      const i = {
        value: s.hasAttribute("value") ? s.getAttribute("value") ?? "" : s.textContent ?? "",
        label: s.textContent || s.getAttribute("value") || "",
        disabled: s.hasAttribute("disabled"),
        hidden: s.hasAttribute("data-hidden")
      };
      s.getAttribute("selected") && !this.value && (this.value = i.value), this._options.push(i);
    }) : (this._options = this.options, this._options.forEach((s) => {
      s.selected && !this.value && (this.value = s.value);
    }));
  }
  // Support native Select method `add`
  add(t, e) {
    var s, i, l;
    (s = this.inputRef.value) == null || s.add(t, e), this._options.push({
      value: t.value || t.text,
      label: t.text || t.value,
      selected: t.selected,
      disabled: t.disabled
    }), t.selected && (this.value = t.value || t.text, this.selectedIndex = this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex), this.selectedOptions = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions), this.requestUpdate();
  }
  // Support native Select method `remove`
  remove(t) {
    var e, s;
    typeof t == "number" && (this.selectedIndex === t && (this.value = ((e = this._options[0]) == null ? void 0 : e.value) || ""), (s = this.inputRef.value) == null || s.remove(t));
  }
  // Support native Select method `item`
  item(t) {
    var e;
    return (e = this.inputRef.value) == null ? void 0 : e.item(t);
  }
  // Support native Select method `namedItem`
  namedItem(t) {
    var e;
    return (e = this.inputRef.value) == null ? void 0 : e.namedItem(t);
  }
  // Support native Select method `showPicker`
  showPicker() {
    var t;
    (t = this.inputRef.value) == null || t.showPicker();
  }
  attributeChangedCallback(t, e, s) {
    var i, l;
    t === "options" && (this._options = s ? JSON.parse(s) : []), t === "value" && this.value !== e && (this.selectedIndex = this.touched ? this.returnNumberOrNull((i = this.inputRef.value) == null ? void 0 : i.selectedIndex) : this.options.findIndex((a) => a.value === s), this.selectedOptions = (l = this.inputRef.value) == null ? void 0 : l.selectedOptions, this.valueChanged(s, e)), super.attributeChangedCallback(t, e, s);
  }
  update(t) {
    var e, s;
    super.update(t), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((e = this.inputRef.value) == null ? void 0 : e.selectedIndex) : this.options.findIndex((i) => i.value === this.value), this.selectedOptions = (s = this.inputRef.value) == null ? void 0 : s.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
  }
  firstUpdated(t) {
    var e;
    super.firstUpdated(t), this.options.length && (this._options = this.options), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((s) => s.value === this.value), this.selectedOptions = (e = this.inputRef.value) == null ? void 0 : e.selectedOptions;
  }
  render() {
    const t = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
    return p`
      <pkt-input-wrapper
        ?counter=${this.counter}
        ?disabled=${this.disabled}
        ?hasError=${this.hasError}
        ?hasFieldset=${this.hasFieldset}
        ?inline=${this.inline}
        ?optionalTag=${this.optionalTag}
        ?requiredTag=${this.requiredTag}
        ?useWrapper=${this.useWrapper}
        ariaDescribedBy=${o(this.ariaDescribedBy)}
        class="pkt-select"
        errorMessage=${o(this.errorMessage)}
        forId=${this.id + "-input"}
        helptext=${o(this.helptext)}
        helptextDropdown=${o(this.helptextDropdown)}
        helptextDropdownButton=${o(this.helptextDropdownButton)}
        label=${o(this.label)}
        optionalText=${o(this.optionalText)}
        requiredText=${o(this.requiredText)}
        tagText=${o(this.tagText)}
      >
        <select
          class=${t}
          aria-invalid=${this.hasError}
          aria-errormessage=${`${this.id}-error`}
          aria-labelledby=${o(this.ariaLabelledby)}
          ?disabled=${this.disabled}
          id=${this.id + "-input"}
          name=${(this.name || this.id) + "-input"}
          value=${this.value}
          @change=${(e) => {
      this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
    }}
          @input=${(e) => {
      this.onInput(), e.stopImmediatePropagation();
    }}
          @focus=${(e) => {
      this.onFocus(), e.stopImmediatePropagation();
    }}
          @blur=${(e) => {
      this.onBlur(), e.stopImmediatePropagation();
    }}
          ${d(this.inputRef)}
        >
          ${this._options.length > 0 && this._options.map(
      (e) => p`<option
                value=${e.value}
                ?selected=${this.value == e.value || e.selected}
                ?disabled=${e.disabled}
                ?hidden=${e.hidden}
              >
                ${e.label}
              </option>`
    )}
        </select>
        <div class="pkt-contents" ${d(this.helptextSlot)} name="helptext" slot="helptext"></div>
      </pkt-input-wrapper>
    `;
  }
  returnNumberOrNull(t) {
    return t == null || isNaN(t) ? null : t;
  }
};
n([
  c({ type: Array })
], h.prototype, "options", 2);
n([
  c({ type: String })
], h.prototype, "value", 2);
n([
  f()
], h.prototype, "_options", 2);
h = n([
  v("pkt-select")
], h);
export {
  h as P
};