import { defineComponent as Y, useSlots as Z, ref as P, useTemplateRef as ee, reactive as oe, computed as d, unref as s, watch as te, watchPostEffect as le, createElementBlock as c, openBlock as r, createElementVNode as p, createCommentVNode as m, normalizeClass as ne, createBlock as v, createVNode as re, withDirectives as se, vModelText as ie, Fragment as b, renderList as C, withModifiers as O, withCtx as y, createTextVNode as S, toDisplayString as h, renderSlot as q } from "vue";
import ae from "../../assets/images/required.svg.js";
import { getErrorMessage as ue } from "../../helpers/error.js";
import { deepEqual as V, deepIncludes as B } from "../../helpers/objects.js";
import { normalizeListOptions as de } from "../../helpers/utils.js";
import ce from "../../utils/DoubleContour.vue2.js";
/* empty css                            */
import pe from "../../utils/DropdownOverlay/DropdownOverlay.vue.js";
import { useLabelNotch as fe } from "../../utils/useLabelNotch.js";
import me from "../DropdownListItem.vue.js";
import I from "../PlChip/PlChip.vue.js";
import ve from "../PlIcon24/PlIcon24.vue.js";
import he from "../PlSvg/PlSvg.vue.js";
import _e from "../PlTooltip/PlTooltip.vue.js";
/* empty css                       */
const we = ["tabindex"], ye = { class: "pl-dropdown-multi__container" }, ge = { class: "pl-dropdown-multi__field" }, ke = ["disabled", "placeholder"], be = {
  key: 0,
  class: "chips-container"
}, Ce = { class: "pl-dropdown-multi__controls" }, Oe = { key: 0 }, Ve = { class: "pl-dropdown-multi__open-chips-container" }, $e = {
  key: 0,
  class: "nothing-found"
}, xe = {
  key: 0,
  class: "pl-dropdown-multi__error"
}, Ae = {
  key: 1,
  class: "pl-dropdown-multi__helper"
}, Ee = {
  name: "PlDropdownMulti"
}, He = /* @__PURE__ */ Y({
  ...Ee,
  props: {
    modelValue: { default: () => [] },
    label: { default: void 0 },
    options: { default: void 0 },
    helper: { default: void 0 },
    error: { default: void 0 },
    placeholder: { default: "..." },
    required: { type: Boolean, default: !1 },
    disabled: { type: Boolean, default: !1 },
    groupPosition: { default: void 0 }
  },
  emits: ["update:modelValue"],
  setup(a, { emit: T }) {
    const z = T, $ = (e) => z("update:modelValue", e), U = Z(), i = a, f = P(), x = P(), _ = ee("overlay"), t = oe({
      search: "",
      activeOption: -1,
      open: !1,
      optionsHeight: 0
    }), w = d(() => Array.isArray(i.modelValue) ? i.modelValue : []), K = d(() => t.open && i.modelValue.length > 0 ? i.placeholder : i.modelValue.length > 0 ? "" : i.placeholder), A = d(() => de(i.options ?? [])), E = d(() => w.value.map((e) => A.value.find((l) => V(l.value, e))).filter((e) => e !== void 0)), g = d(() => {
      const e = s(w), l = s(A);
      return (t.search ? l.filter((o) => {
        const n = t.search.toLowerCase();
        return o.label.toLowerCase().includes(n) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(n) : o.value === t.search;
      }) : [...l]).map((o) => ({
        ...o,
        selected: B(e, o.value)
      }));
    }), L = d(() => i.options === void 0), H = d(() => !i.disabled && L.value), k = d(() => L.value ? !0 : i.disabled), j = d(() => k.value ? void 0 : "0"), G = () => {
      t.activeOption = 0;
    }, M = (e) => {
      var o;
      const l = s(w);
      $(B(l, e) ? l.filter((n) => !V(n, e)) : [...l, e]), t.search = "", (o = f == null ? void 0 : f.value) == null || o.focus();
    }, R = (e) => $(s(w).filter((l) => !V(l, e))), J = () => {
      var e;
      return (e = x.value) == null ? void 0 : e.focus();
    }, Q = () => {
      t.open = !t.open, t.open || (t.search = "");
    }, D = (e) => {
      var o, n, u;
      const l = e.relatedTarget;
      !((o = f.value) != null && o.contains(l)) && !((u = (n = _.value) == null ? void 0 : n.listRef) != null && u.contains(l)) && (t.search = "", t.open = !1);
    }, W = (e) => {
      var F;
      const { open: l, activeOption: o } = t;
      if (!l) {
        e.code === "Enter" && (t.open = !0);
        return;
      }
      e.code === "Escape" && (t.open = !1, (F = f.value) == null || F.focus());
      const n = s(g), { length: u } = n;
      if (!u)
        return;
      ["ArrowDown", "ArrowUp", "Enter"].includes(e.code) && e.preventDefault(), e.code === "Enter" && M(n[o].value);
      const X = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
      t.activeOption = Math.abs(o + X + u) % u, requestAnimationFrame(() => {
        var N;
        return (N = _.value) == null ? void 0 : N.scrollIntoActive();
      });
    };
    return fe(f), te(
      () => i.modelValue,
      () => G(),
      { immediate: !0 }
    ), le(() => {
      var e;
      t.search, t.open && ((e = _.value) == null || e.scrollIntoActive());
    }), (e, l) => (r(), c("div", {
      class: "pl-dropdown-multi__envelope",
      onClick: J
    }, [
      p("div", {
        ref_key: "rootRef",
        ref: f,
        tabindex: j.value,
        class: ne(["pl-dropdown-multi", { open: t.open, error: a.error, disabled: k.value }]),
        onKeydown: W,
        onFocusout: D
      }, [
        p("div", ye, [
          p("div", ge, [
            se(p("input", {
              ref_key: "input",
              ref: x,
              "onUpdate:modelValue": l[0] || (l[0] = (o) => t.search = o),
              type: "text",
              tabindex: "-1",
              disabled: k.value,
              placeholder: K.value,
              spellcheck: "false",
              autocomplete: "chrome-off",
              onFocus: l[1] || (l[1] = (o) => t.open = !0)
            }, null, 40, ke), [
              [ie, t.search]
            ]),
            t.open ? m("", !0) : (r(), c("div", be, [
              (r(!0), c(b, null, C(E.value, (o, n) => (r(), v(s(I), {
                key: n,
                closeable: "",
                small: "",
                onClick: l[2] || (l[2] = O((u) => t.open = !0, ["stop"])),
                onClose: (u) => R(o.value)
              }, {
                default: y(() => [
                  S(h(o.label || o.value), 1)
                ]),
                _: 2
              }, 1032, ["onClose"]))), 128))
            ])),
            p("div", Ce, [
              H.value ? (r(), v(s(ve), {
                key: 0,
                name: "loading"
              })) : m("", !0),
              q(e.$slots, "append"),
              p("div", {
                class: "pl-dropdown-multi__arrow-wrapper",
                onClick: O(Q, ["stop"])
              }, [...l[3] || (l[3] = [
                p("div", { class: "arrow-icon arrow-icon-default" }, null, -1)
              ])])
            ])
          ]),
          a.label ? (r(), c("label", Oe, [
            a.required ? (r(), v(s(he), {
              key: 0,
              uri: s(ae)
            }, null, 8, ["uri"])) : m("", !0),
            p("span", null, h(a.label), 1),
            s(U).tooltip ? (r(), v(s(_e), {
              key: 1,
              class: "info",
              position: "top"
            }, {
              tooltip: y(() => [
                q(e.$slots, "tooltip")
              ]),
              _: 3
            })) : m("", !0)
          ])) : m("", !0),
          t.open ? (r(), v(pe, {
            key: 1,
            ref_key: "overlay",
            ref: _,
            root: f.value,
            class: "pl-dropdown-multi__options",
            gap: 5,
            tabindex: "-1",
            onFocusout: D
          }, {
            default: y(() => [
              p("div", Ve, [
                (r(!0), c(b, null, C(E.value, (o, n) => (r(), v(s(I), {
                  key: n,
                  closeable: "",
                  small: "",
                  onClose: (u) => R(o.value)
                }, {
                  default: y(() => [
                    S(h(o.label || o.value), 1)
                  ]),
                  _: 2
                }, 1032, ["onClose"]))), 128))
              ]),
              (r(!0), c(b, null, C(g.value, (o, n) => (r(), v(me, {
                key: n,
                option: o,
                "text-item": "text",
                "is-selected": o.selected,
                "is-hovered": t.activeOption == n,
                size: "medium",
                "use-checkbox": "",
                onClick: O((u) => M(o.value), ["stop"])
              }, null, 8, ["option", "is-selected", "is-hovered", "onClick"]))), 128)),
              g.value.length ? m("", !0) : (r(), c("div", $e, "Nothing found"))
            ]),
            _: 1
          }, 8, ["root"])) : m("", !0),
          re(ce, {
            class: "pl-dropdown-multi__contour",
            "group-position": a.groupPosition
          }, null, 8, ["group-position"])
        ])
      ], 42, we),
      a.error ? (r(), c("div", xe, h(s(ue)(a.error)), 1)) : a.helper ? (r(), c("div", Ae, h(a.helper), 1)) : m("", !0)
    ]));
  }
});
export {
  He as default
};
//# sourceMappingURL=PlDropdownMulti.vue.js.map
