import { defineComponent as R, useSlots as V, ref as c, computed as C, watch as F, onBeforeUnmount as K, openBlock as n, createElementBlock as m, withKeys as q, normalizeClass as i, createVNode as z, withModifiers as M, createElementVNode as _, unref as p, renderSlot as h, toDisplayString as P, createCommentVNode as d, createBlock as T, withCtx as D } from "vue";
import { uniqueId as U } from "es-toolkit/compat";
import { FOCUS_ELEMENTS_SELECTOR as W } from "./constants.js";
import { t as H } from "./locale.js";
import G from "./Backdrop.js";
import j from "./Button.js";
import N from "./Icon.js";
import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
var Q = /* @__PURE__ */ ((a) => (a.Narrow = "narrow", a.Medium = "medium", a.Wide = "wide", a))(Q || {}), X = /* @__PURE__ */ ((a) => (a.Center = "center", a.Left = "left", a.Right = "right", a))(X || {});
const Y = ["aria-labelledby"], Z = { class: "flex place-items-center" }, ee = ["id"], te = { class: "stash-modal__footer__actions flex justify-end" }, le = /* @__PURE__ */ R({
  name: "ll-modal",
  __name: "Modal",
  props: {
    hideClose: { type: Boolean, default: !1 },
    open: { type: Boolean, default: !1 },
    isOpen: { type: Boolean, default: !1 },
    modelValue: { type: Boolean, default: !1 },
    size: { default: "medium" },
    scrollable: { type: Boolean, default: !1 },
    contrast: { type: Boolean, default: !1 },
    title: { default: "" },
    disableBodyPadding: { type: Boolean },
    position: { default: "center" },
    hideHeader: { type: Boolean, default: !1 },
    closeButtonColorClass: { default: "text-white/50" },
    preventDismiss: { type: Boolean, default: !1 }
  },
  emits: ["update:open", "update:is-open", "dismiss"],
  setup(a, { emit: A }) {
    const e = a, w = A, b = V(), r = c(), E = c(null), v = c([]), k = c(), B = c(), f = c({ height: "", overflow: "" }), L = U("modal-header-"), O = C(() => !!b.actions || !!b.footer), l = C(() => e.open || e.isOpen), s = C(() => e.position === "left" || e.position === "right");
    let u = !1;
    function g() {
      return document.scrollingElement || document.body;
    }
    F(
      l,
      () => {
        var t;
        if (!(typeof document > "u")) {
          if (S(l.value ? "hide" : "show"), l.value) {
            const o = document.activeElement;
            E.value = o instanceof HTMLElement ? o : null;
          } else
            u && (document.removeEventListener("keydown", x), u = !1), (t = E.value) == null || t.focus();
          l.value && Object.assign(f.value, {
            height: g().style.height,
            overflow: g().style.overflow
          }), Object.assign(g().style, {
            overflow: l.value ? "hidden" : f.value.overflow,
            // Prevents page from scrolling when modal is open
            height: l.value ? "100%" : f.value.height
            // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535
          });
        }
      },
      { immediate: !0 }
    ), K(() => {
      var t;
      typeof document > "u" || (S("show"), Object.assign(g().style, {
        overflow: f.value.overflow,
        height: f.value.height
      }), u && (document.removeEventListener("keydown", x), u = !1), (t = E.value) == null || t.focus());
    });
    function y() {
      e.preventDismiss || (w("update:open", !1), w("update:is-open", !1), w("dismiss"));
    }
    function x(t) {
      var o, $;
      t.key === "Tab" && (t.shiftKey && document.activeElement === k.value ? ((o = B.value) == null || o.focus(), t.preventDefault()) : document.activeElement === B.value && (($ = k.value) == null || $.focus(), t.preventDefault()));
    }
    function I() {
      typeof document > "u" || !r.value || !l.value || (r.value.focus(), v.value = Array.from(r.value.querySelectorAll(W)), k.value = v.value[0], B.value = v.value[v.value.length - 1], u || (document.addEventListener("keydown", x), u = !0));
    }
    F(r, () => {
      !r.value || !l.value || I();
    });
    function S(t) {
      if (typeof document > "u")
        return;
      const o = document.getElementById("launcher");
      !o || !o.parentElement || (o.parentElement.style.display = t === "show" ? "block" : "none");
    }
    return (t, o) => l.value ? (n(), m("div", {
      key: 0,
      ref_key: "rootRef",
      ref: r,
      class: i(["stash-modal fixed inset-0", {
        "invisible z-behind": !l.value,
        "visible z-modal": l.value,
        "lg:flex lg:flex-col lg:items-center lg:justify-center": e.position === "center",
        "overflow-y-auto": !e.scrollable && !s.value,
        "overflow-y-hidden": s.value
      }]),
      "data-test": "ll-modal",
      tabindex: "0",
      onKeydown: q(y, ["esc"])
    }, [
      z(G, {
        class: "stash-modal__backdrop",
        onClick: M(y, ["stop"])
      }),
      _("div", {
        "aria-modal": "true",
        role: "dialog",
        "aria-labelledby": p(L),
        class: i(["stash-modal__dialog relative flex h-screen w-full flex-col lg:shadow-3xl", [
          `stash-modal__dialog--size-${e.size}`,
          `stash-modal__dialog--position-${e.position}`,
          {
            "stash-modal__dialog--is-open": l.value,
            "stash-modal__dialog--is-drawer": s.value,
            "stash-modal__dialog--is-contrast": e.contrast,
            "stash-modal__dialog--is-scrollable": e.scrollable,
            "lg:w-[360px]": e.size === "narrow",
            "lg:w-[648px]": e.size === "medium",
            "lg:w-[960px]": e.size === "wide",
            "lg:my-0 lg:h-auto lg:max-h-[90vh]": e.position === "center",
            // absolute causing this to break when items in bottom of container get focus
            "lg:fixed lg:h-screen": s.value,
            "lg:left-0": e.position === "left",
            "lg:right-0": e.position === "right"
          }
        ]]),
        onClick: o[0] || (o[0] = M(() => {
        }, ["stop"]))
      }, [
        e.hideHeader ? d("", !0) : (n(), m("header", {
          key: 0,
          "data-test": "stash-modal__header",
          class: i(["stash-modal__header grid h-12 place-items-center bg-purple-500", { "lg:rounded-t": !s.value }])
        }, [
          _("div", Z, [
            h(t.$slots, "headerAction")
          ]),
          e.title ? (n(), m("h3", {
            key: 0,
            id: p(L),
            class: "m-0 flex-1 leading-6 text-white"
          }, P(e.title), 9, ee)) : d("", !0),
          e.hideClose ? d("", !0) : (n(), T(j, {
            key: 1,
            icon: "",
            "data-test": "ll-modal-close",
            title: p(H)("ll.closeModal"),
            type: "button",
            onClick: y
          }, {
            default: D(() => [
              z(N, {
                class: "text-white",
                name: "close"
              })
            ]),
            _: 1
          }, 8, ["title"]))
        ], 2)),
        !e.hideClose && e.hideHeader ? (n(), T(j, {
          key: 1,
          class: "absolute right-0 top-0 z-10",
          icon: "",
          "data-test": "ll-modal-close",
          type: "button",
          title: p(H)("ll.closeModal"),
          onClick: y
        }, {
          default: D(() => [
            z(N, {
              class: i(["drop-shadow-md", [e.closeButtonColorClass]]),
              name: "close"
            }, null, 8, ["class"])
          ]),
          _: 1
        }, 8, ["title"])) : d("", !0),
        p(b)["featured-content"] ? (n(), m("div", {
          key: 2,
          class: i(["stash-modal__featured-content relative", {
            "rounded-t": e.hideHeader
          }])
        }, [
          h(t.$slots, "featured-content")
        ], 2)) : d("", !0),
        _("div", {
          class: i(["stash-modal__body flex-1 overflow-y-auto", [
            {
              "p-3 lg:p-6": !e.disableBodyPadding,
              "lg:overflow-y-visible": !e.scrollable && !s.value,
              "lg:rounded-b": !O.value && !s.value,
              "bg-white": !e.contrast,
              "bg-ice-200": e.contrast
            }
          ]]),
          "data-test": "stash-modal__body"
        }, [
          h(t.$slots, "default")
        ], 2),
        O.value ? (n(), m("footer", {
          key: 3,
          class: i(["stash-modal__footer border-t border-ice-500 bg-ice-100 p-3 lg:p-6", { "lg:rounded-b": !s.value }])
        }, [
          h(t.$slots, "footer", {}, () => [
            _("div", te, [
              h(t.$slots, "actions")
            ])
          ])
        ], 2)) : d("", !0)
      ], 10, Y)
    ], 34)) : d("", !0);
  }
}), oe = {}, ae = {
  $style: oe
}, me = /* @__PURE__ */ J(le, [["__cssModules", ae]]);
export {
  X as ModalPosition,
  Q as ModalSize,
  me as default
};
//# sourceMappingURL=Modal.js.map
