import { defineComponent as R, ref as r, useCssModule as U, watch as _, onMounted as V, onBeforeUnmount as W, computed as Y, withDirectives as E, openBlock as y, createElementBlock as D, renderSlot as b, createElementVNode as S, normalizeClass as M, createTextVNode as F, toDisplayString as j, createVNode as A, createBlock as G, Transition as H, withCtx as J, normalizeStyle as Q, unref as B, vShow as X, nextTick as $ } from "vue";
import { KEY_CODES as v } from "./constants.js";
import Z from "./directives/clickoutside.js";
import ee from "./utils/calculateElementOverflow.js";
import { getOwnerDomContext as L, getMountPoint as te } from "./utils/helpers.js";
import O from "./Icon.js";
import { _ as le } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const oe = ["aria-expanded"], ae = {
  key: 0,
  class: "flex items-center font-medium text-blue-500 hover:text-blue-700"
}, ne = /* @__PURE__ */ R({
  name: "ll-dropdown",
  __name: "Dropdown",
  props: {
    align: { default: "right" },
    label: { default: "" },
    closeManually: { type: Boolean, default: !1 },
    offset: { default: () => ({}) },
    reattach: { type: Boolean, default: !0 },
    contentClass: { default: "" },
    fluidContent: { type: Boolean, default: !1 }
  },
  emits: ["toggle", "dismiss"],
  setup(c, { expose: T, emit: N }) {
    const a = c, w = N, t = r(null), d = r(null), m = [], s = r(m), i = r(-1), l = r(!1), h = r({}), z = U();
    _(l, (e) => {
      e || (i.value = -1), w("toggle", e);
    }), _(i, (e, o) => {
      e in s.value && s.value[e].classList.add("bg-ice-200"), o in s.value && s.value[o].classList.remove("bg-ice-200");
    }), V(() => {
      var e, o, n;
      if (a.reattach) {
        const { ownerDoc: g } = L(d.value), f = te(g);
        t.value && f.appendChild(t.value);
      }
      (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? m : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? m, window.addEventListener("resize", () => u());
    }), W(() => {
      var e, o;
      window.removeEventListener("resize", () => u()), (o = (e = t == null ? void 0 : t.value) == null ? void 0 : e.parentNode) == null || o.removeChild(t.value);
    });
    function u(e) {
      var n;
      if (a.closeManually && ((n = t.value) != null && n.contains(e == null ? void 0 : e.target) || t.value === (e == null ? void 0 : e.target)))
        return;
      const o = l.value;
      l.value = !1, o && w("dismiss");
    }
    async function p() {
      var e;
      l.value ? l.value = !1 : (l.value = !0, await q(), (e = t.value) == null || e.focus());
    }
    function P(e) {
      if (e.keyCode === v.ESCAPE)
        u();
      else if (e.keyCode === v.DOWN && i.value < s.value.length - 1 && l.value)
        i.value++;
      else if (e.keyCode === v.UP && i.value > -1 && l.value)
        i.value--;
      else if (e.keyCode === v.ENTER && i.value !== -1 && l.value)
        s[i.value].click();
      else
        return;
      e.preventDefault();
    }
    function I() {
      var e;
      (e = t.value) == null || e.style.setProperty("--offset", "0");
    }
    async function q() {
      var x, k;
      await $();
      const { ownerDoc: e, ownerWin: o } = L(d.value), n = ((x = d.value) == null ? void 0 : x.getBoundingClientRect()) || {}, g = n.top + n.height, f = {
        x: 0,
        y: 0,
        ...a.offset
      };
      a.reattach && (h.value = {
        left: a.align === "left" ? `${Math.round(n.left) + f.x}px` : void 0,
        right: a.align === "right" ? `${e.documentElement.clientWidth - Math.round(n.right) + f.x}px` : void 0,
        top: `${o.scrollY + g + f.y}px`
      }, await $());
      const C = ee(t == null ? void 0 : t.value);
      if (C) {
        const K = a.align === "left" ? "-" : "";
        (k = t.value) == null || k.style.setProperty("--offset", `${K}${C.value}`);
      }
    }
    return T({
      isActive: Y(() => l.value),
      toggle: p,
      dismiss: u
    }), (e, o) => E((y(), D("div", {
      ref_key: "dropdownRef",
      ref: d,
      class: "relative inline-block",
      "data-test": "ll-dropdown",
      onKeydown: P
    }, [
      b(e.$slots, "toggle", {
        isActive: l.value,
        toggle: p
      }, () => [
        S("button", {
          "data-test": "button|toggle",
          "aria-expanded": l.value,
          class: M([c.label ? "outline-hidden min-w-auto" : "rounded p-3"]),
          onClick: p
        }, [
          c.label ? (y(), D("span", ae, [
            F(j(c.label) + " ", 1),
            A(O, { name: "caret-down" })
          ])) : (y(), G(O, {
            key: 1,
            name: "ellipsis"
          }))
        ], 10, oe)
      ]),
      A(H, {
        name: "fade",
        onAfterLeave: I
      }, {
        default: J(() => [
          E(S("div", {
            ref_key: "contentRef",
            ref: t,
            "data-test": "ll-dropdown-content",
            class: M([
              B(z).content,
              c.contentClass,
              {
                "left-0 after:left-6": a.align === "left",
                "right-0": a.align === "right",
                "max-w-[360px]": !a.fluidContent
              }
            ]),
            style: Q(h.value)
          }, [
            b(e.$slots, "default", {
              dismiss: u,
              isActive: l.value
            })
          ], 6), [
            [X, l.value]
          ])
        ]),
        _: 3
      })
    ], 32)), [
      [B(Z), u]
    ]);
  }
}), se = "_content_Yfitz", ie = {
  content: se
}, ue = {
  $style: ie
}, ge = /* @__PURE__ */ le(ne, [["__cssModules", ue]]);
export {
  ge as default
};
//# sourceMappingURL=Dropdown.js.map
