import { defineComponent as te, useSlots as ne, ref as V, reactive as le, computed as s, unref as u, watch as F, watchPostEffect as re, createElementBlock as a, openBlock as l, createElementVNode as p, createCommentVNode as c, normalizeClass as b, createVNode as M, withDirectives as ie, vModelText as ae, withCtx as N, createTextVNode as se, toDisplayString as m, createBlock as h, renderSlot as P, withModifiers as w, Fragment as de, renderList as ce } from "vue";
/* empty css                        */
import { tap as ue, tapIf as pe } from "../../helpers/functions.js";
import fe from "../PlTooltip/PlTooltip.vue.js";
import ve from "../../utils/DoubleContour.vue2.js";
/* empty css                            */
import { useLabelNotch as me } from "../../utils/useLabelNotch.js";
import { scrollIntoView as he } from "../../helpers/dom.js";
import { deepEqual as C } from "../../helpers/objects.js";
import we from "../DropdownListItem.vue.js";
import ke from "../LongText.vue.js";
/* empty css               */
import _e from "../PlIcon16/PlIcon16.vue.js";
import ye from "../PlIcon24/PlIcon24.vue.js";
import { normalizeListOptions as Ie } from "../../helpers/utils.js";
import { getErrorMessage as ge } from "../../helpers/error.js";
import xe from "../PlSvg/PlSvg.vue.js";
import Ve from "../../assets/images/required.svg.js";
const be = { class: "ui-dropdown__envelope" }, Ce = ["tabindex"], Ee = { class: "ui-dropdown__container" }, Le = { class: "ui-dropdown__field" }, Se = ["disabled", "placeholder"], $e = { class: "ui-dropdown__controls" }, Ae = { key: 0 }, Oe = {
  key: 0,
  class: "nothing-found"
}, De = {
  key: 0,
  class: "ui-dropdown__error"
}, ze = {
  key: 1,
  class: "ui-dropdown__helper"
}, Be = {
  key: 2,
  class: "ui-dropdown__helper"
}, Fe = {
  name: "PlDropdown"
}, oo = /* @__PURE__ */ te({
  ...Fe,
  props: {
    modelValue: {},
    label: { default: "" },
    options: { default: void 0 },
    helper: { default: void 0 },
    loadingOptionsHelper: { default: void 0 },
    error: { default: void 0 },
    placeholder: { default: "..." },
    clearable: { type: Boolean, default: !1 },
    required: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    arrowIcon: { default: void 0 },
    arrowIconLarge: { default: void 0 },
    optionSize: { default: "small" }
  },
  emits: ["update:modelValue"],
  setup(r, { emit: q }) {
    const E = q, n = r, T = ne(), d = V(), L = V(), y = V(), t = le({
      search: "",
      activeIndex: -1,
      open: !1
    }), H = () => ue(
      f.value.findIndex((e) => C(e.value, n.modelValue)),
      (e) => e < 0 ? 0 : e
    ), R = () => t.activeIndex = H(), k = s(() => n.options === void 0), I = s(() => k.value ? !0 : n.disabled), S = s(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), $ = s(() => {
      if (!k.value) {
        if (n.error)
          return ge(n.error);
        if (n.modelValue !== void 0 && S.value === -1)
          return "The selected value is not one of the options";
      }
    }), A = s(
      () => Ie(n.options ?? []).map((e, o) => ({
        ...e,
        index: o,
        isSelected: o === S.value,
        isActive: o === t.activeIndex
      }))
    ), O = s(() => {
      const o = u(A).find((i) => C(i.value, n.modelValue));
      return (o == null ? void 0 : o.label) || n.modelValue;
    }), U = s(() => !t.open && n.modelValue ? "" : n.modelValue ? String(O.value) : n.placeholder), K = s(() => n.modelValue !== void 0 && n.modelValue !== null), f = s(() => {
      const e = A.value;
      return t.search ? e.filter((o) => {
        const i = t.search.toLowerCase();
        return o.label.toLowerCase().includes(i) || o.description && o.description.toLowerCase().includes(i) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(i) : o.value === t.search;
      }) : e;
    }), j = s(() => I.value ? void 0 : "0"), D = (e) => {
      var o;
      E("update:modelValue", e), t.search = "", t.open = !1, (o = d == null ? void 0 : d.value) == null || o.focus();
    }, G = () => E("update:modelValue", void 0), J = () => {
      var e;
      return (e = y.value) == null ? void 0 : e.focus();
    }, g = () => t.open = !t.open, Q = () => t.open = !0, W = (e) => {
      var o;
      (o = d == null ? void 0 : d.value) != null && o.contains(e.relatedTarget) || (t.search = "", t.open = !1);
    }, X = () => {
      const e = L.value;
      e && pe(e.querySelector(".hovered-item"), (o) => {
        he(e, o);
      });
    }, Y = (e) => {
      var z, B;
      if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
        e.preventDefault();
      else
        return;
      const { open: o, activeIndex: i } = t;
      if (!o) {
        e.code === "Enter" && (t.open = !0);
        return;
      }
      e.code === "Escape" && (t.open = !1, (z = d.value) == null || z.focus());
      const v = u(f), { length: _ } = v;
      if (!_)
        return;
      e.code === "Enter" && D((B = v.find((x) => x.index === i)) == null ? void 0 : B.value);
      const Z = v.findIndex((x) => x.index === i) ?? -1, ee = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, oe = Math.abs(Z + ee + _) % _;
      t.activeIndex = f.value[oe].index ?? -1;
    };
    return me(d), F(() => n.modelValue, R, { immediate: !0 }), F(
      () => t.open,
      (e) => {
        var o;
        return e ? (o = y.value) == null ? void 0 : o.focus() : "";
      }
    ), re(() => {
      t.search, t.activeIndex >= 0 && t.open && X();
    }), (e, o) => (l(), a("div", be, [
      p("div", {
        ref_key: "root",
        ref: d,
        tabindex: j.value,
        class: b(["ui-dropdown", { open: t.open, error: r.error, disabled: I.value }]),
        onKeydown: Y,
        onFocusout: W
      }, [
        p("div", Ee, [
          p("div", Le, [
            ie(p("input", {
              ref_key: "input",
              ref: y,
              "onUpdate:modelValue": o[0] || (o[0] = (i) => t.search = i),
              type: "text",
              tabindex: "-1",
              disabled: I.value,
              placeholder: U.value,
              spellcheck: "false",
              autocomplete: "chrome-off",
              onFocus: Q
            }, null, 40, Se), [
              [ae, t.search]
            ]),
            t.open ? c("", !0) : (l(), a("div", {
              key: 0,
              onClick: J
            }, [
              M(ke, { class: "input-value" }, {
                default: N(() => [
                  se(m(O.value), 1)
                ]),
                _: 1
              })
            ])),
            p("div", $e, [
              k.value ? (l(), h(u(ye), {
                key: 0,
                name: "loading"
              })) : c("", !0),
              r.clearable && K.value ? (l(), h(u(_e), {
                key: 1,
                class: "clear",
                name: "delete-clear",
                onClick: w(G, ["stop"])
              })) : c("", !0),
              P(e.$slots, "append"),
              r.arrowIconLarge ? (l(), a("div", {
                key: 2,
                class: b(["arrow-icon", [`icon-24 ${r.arrowIconLarge}`]]),
                onClick: w(g, ["stop"])
              }, null, 2)) : r.arrowIcon ? (l(), a("div", {
                key: 3,
                class: b(["arrow-icon", [`icon-16 ${r.arrowIcon}`]]),
                onClick: w(g, ["stop"])
              }, null, 2)) : (l(), a("div", {
                key: 4,
                class: "arrow-icon arrow-icon-default",
                onClick: w(g, ["stop"])
              }))
            ])
          ]),
          r.label ? (l(), a("label", Ae, [
            r.required ? (l(), h(u(xe), {
              key: 0,
              uri: u(Ve)
            }, null, 8, ["uri"])) : c("", !0),
            p("span", null, m(r.label), 1),
            u(T).tooltip ? (l(), h(u(fe), {
              key: 1,
              class: "info",
              position: "top"
            }, {
              tooltip: N(() => [
                P(e.$slots, "tooltip")
              ]),
              _: 3
            })) : c("", !0)
          ])) : c("", !0),
          t.open ? (l(), a("div", {
            key: 1,
            ref_key: "list",
            ref: L,
            class: "ui-dropdown__options"
          }, [
            (l(!0), a(de, null, ce(f.value, (i, v) => (l(), h(we, {
              key: v,
              option: i,
              "is-selected": i.isSelected,
              "is-hovered": i.isActive,
              size: r.optionSize,
              onClick: w((_) => D(i.value), ["stop"])
            }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
            f.value.length ? c("", !0) : (l(), a("div", Oe, "Nothing found"))
          ], 512)) : c("", !0),
          M(ve, { class: "ui-dropdown__contour" })
        ])
      ], 42, Ce),
      $.value ? (l(), a("div", De, m($.value), 1)) : k.value && r.loadingOptionsHelper ? (l(), a("div", ze, m(r.loadingOptionsHelper), 1)) : r.helper ? (l(), a("div", Be, m(r.helper), 1)) : c("", !0)
    ]));
  }
});
export {
  oo as default
};
//# sourceMappingURL=PlDropdownLegacy.vue.js.map
