@flexilla/alpine-modal 0.0.2 → 0.0.4

package/dist/cdn.js

@@ -1,246 +1,301 @@
 (() => {
   // ../../node_modules/@flexilla/modal/dist/modal.js
-  var j = Object.defineProperty;
-  var z = (t, e, n) => e in t ? j(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
-  var c = (t, e, n) => z(t, typeof e != "symbol" ? e + "" : e, n);
-  var O = class {
-    static initGlobalRegistry() {
-      window.$flexillaInstances || (window.$flexillaInstances = {});
-    }
-    static register(e, n, a) {
-      return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, n) || (window.$flexillaInstances[e].push({ element: n, instance: a }), a);
-    }
-    static getInstance(e, n) {
-      var a, d;
-      return this.initGlobalRegistry(), (d = (a = window.$flexillaInstances[e]) == null ? void 0 : a.find(
-        (s) => s.element === n
-      )) == null ? void 0 : d.instance;
-    }
-    static removeInstance(e, n) {
-      this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
-        (a) => a.element !== n
-      ));
-    }
-  };
-  var r = (t, e = document.body) => e.querySelector(t);
-  var H = (t, e = document.body) => Array.from(e.querySelectorAll(t));
-  var J = ({
-    newElement: t,
-    existingElement: e
+  var p = Object.defineProperty;
+  var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
+  var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
+  var r = (o, t = document.body) => t.querySelector(o);
+  var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
+  var M = ({
+    newElement: o,
+    existingElement: t
   }) => {
-    if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
+    if (!(o instanceof HTMLElement) || !(t instanceof HTMLElement))
       throw new Error("Both parameters must be valid HTML elements.");
-    const n = e.parentElement;
-    if (n)
-      n.insertBefore(t, e);
+    const e = t.parentElement;
+    if (e)
+      e.insertBefore(o, t);
     else
       throw new Error("Existing element must have a parent element.");
   };
-  var Q = ({
-    element: t,
-    callback: e,
-    type: n,
-    keysCheck: a
+  var g = ({
+    element: o,
+    callback: t,
+    type: e,
+    keysCheck: n
   }) => {
-    const d = getComputedStyle(t), s = d.animation;
-    if (s !== "none" && s !== "" && !a.includes(s)) {
-      const f = "animationend", u = () => {
-        t.removeEventListener(f, u), e();
+    const a = getComputedStyle(o), i = a.animation;
+    if (i !== "none" && i !== "" && !n.includes(i)) {
+      const l = "animationend", d = () => {
+        o.removeEventListener(l, d), t();
       };
-      t.addEventListener(f, u, { once: true });
+      o.addEventListener(l, d, { once: true });
     } else
-      e();
+      t();
   };
-  var N = ({ element: t, callback: e }) => {
-    Q({
-      element: t,
-      callback: e,
+  var y = ({ element: o, callback: t }) => {
+    g({
+      element: o,
+      callback: t,
       type: "animation",
       keysCheck: ["none 0s ease 0s 1 normal none running"]
     });
   };
-  var B = (t, e, n) => {
-    const a = new CustomEvent(e, { detail: n });
-    t.dispatchEvent(a);
-  };
-  var W = (t) => {
-    var e;
-    t instanceof HTMLElement && ((e = t.parentElement) == null || e.removeChild(t));
+  var f = (o, t, e) => {
+    const n = new CustomEvent(t, { detail: e });
+    o.dispatchEvent(n);
   };
-  var U = ({ modalContent: t, overlayClassName: e }) => {
-    const n = document.createElement("span");
-    return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
-  };
-  var k = (t, e, n) => {
-    if (!(e instanceof HTMLElement))
+  var E = (o, t, e) => {
+    if (!(t instanceof HTMLElement))
       throw new Error("No modal-content found");
-    t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
-    const a = r("[data-modal-overlay]", t);
-    a instanceof HTMLElement && a.setAttribute("data-state", n);
+    o.setAttribute("aria-hidden", e === "open" ? "false" : "true"), o.setAttribute("data-state", e), t.setAttribute("data-state", e);
+    const n = r("[data-modal-overlay]", o);
+    n instanceof HTMLElement && n.setAttribute("data-state", e);
   };
-  var V = (t, e, n) => {
-    if (!t) {
-      e || (document.body.style.overflowY = "auto");
+  var A = (o, t, e) => {
+    if (!o) {
+      t || (document.body.style.overflowY = "auto");
       return;
     }
-    H("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((s) => s !== n).length === 0 && !e && (document.body.style.overflowY = "auto");
+    c("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((i) => i !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
   };
-  var Z = (t, e, n) => {
-    var q;
-    if (!(t instanceof HTMLElement))
-      throw new Error("Modal Element must be a valid element");
-    const { animateContent: a, allowBodyScroll: d, preventCloseModal: s, overlayClass: f, onShow: u, onHide: h, onToggle: m, beforeHide: b, enableStackedModals: g } = n, p = d || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", F = s || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", C = g || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", K = (f == null ? void 0 : f.split(" ")) || ((q = t.dataset.modalOverlay) == null ? void 0 : q.split(" ")) || "";
-    let x = false;
-    t.setAttribute("data-allow-body-scroll", `${p}`);
-    const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
-    let i = null, S = false;
-    if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement))
-      throw new Error("Modal content element not found");
-    const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
-    o.setAttribute("data-state", "close");
-    const R = (l) => {
-      l.key === "Escape" && (l.preventDefault(), F || A());
-    }, X = (l) => {
-      if (C)
-        return;
-      const w = H("[data-fx-modal][data-state=open]");
-      for (const y of w)
-        if (y !== l) {
-          const M = r("[data-modal-overlay]", y);
-          M.setAttribute("data-state", "close");
-          const I = r("[data-modal-content]", y), E = M.getAttribute("data-overlay-nature") === "default";
-          k(y, I, "close"), E || W(M);
-        }
-    }, T = () => {
-      if (t.getAttribute("data-state") !== "open") {
-        if (X(t), i = S ? i : U({
-          modalContent: o,
-          overlayClassName: K
-        }), i == null || i.setAttribute("data-state", "open"), B(t, "modal-open", { modalId: t.id }), a || D !== "") {
-          const w = a ? a.enterAnimation : D;
-          w !== "" && o.style.setProperty("--un-modal-animation", w), k(t, o, "open"), N({
-            element: o,
-            callback: () => {
-              o.style.removeProperty("--un-modal-animation");
-            }
-          });
-        } else
-          k(t, o, "open");
-        p || (document.body.style.overflow = "hidden"), x || (document.addEventListener("keydown", R), x = true), t.focus(), s || i.addEventListener("click", A), u == null || u(), m == null || m({ isHidden: false });
-      }
-    }, A = () => {
-      var E;
-      let l = false;
-      B(t, "before-hide", {
-        modalId: t.id,
-        setExitAction: ($) => {
-          l = $;
-        }
-      });
-      const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
-      if (l || w)
-        return;
-      const y = () => {
-        k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
-      }, M = () => {
-        x && (document.removeEventListener("keydown", R), x = false), t.blur(), h == null || h(), m == null || m({ isHidden: true });
-      }, I = (a == null ? void 0 : a.exitAnimation) && a.exitAnimation !== "" || P !== "";
-      if (i == null || i.setAttribute("data-state", "close"), o.setAttribute("data-state", "close"), I) {
-        const $ = a ? a.exitAnimation || "" : P;
-        o.style.setProperty("--un-modal-animation", $);
-      }
-      N({
-        element: o,
-        callback: () => {
-          I && o.style.removeProperty("--un-modal-animation"), y(), M();
-        }
-      });
-    }, G = (l) => {
-      l.preventDefault(), A();
-    };
-    return { autoInitModal: () => {
-      if (e instanceof HTMLElement && e.addEventListener("click", T), L.length > 0)
-        for (const l of L)
-          l.addEventListener("click", G);
-    }, showModal: T, hideModal: A, isHidden: () => t.dataset.state === "close", cleanup: () => {
-      if (e instanceof HTMLElement && e.removeEventListener("click", T), L.length > 0)
-        for (const l of L)
-          l.removeEventListener("click", G);
-      !s && i instanceof HTMLElement && i.removeEventListener("click", A), O.removeInstance("modal", t);
-    } };
+  var v = class {
+    static initGlobalRegistry() {
+      window.$flexillaInstances || (window.$flexillaInstances = {});
+    }
+    static register(t, e, n) {
+      return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
+    }
+    static getInstance(t, e) {
+      var n, a;
+      return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
+        (i) => i.element === e
+      )) == null ? void 0 : a.instance;
+    }
+    static removeInstance(t, e) {
+      this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
+        (n) => n.element !== e
+      ));
+    }
   };
-  var v = class v2 {
+  var C = (o) => {
+    var t;
+    o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
+  };
+  var x = ({ modalContent: o, overlayClassName: t }) => {
+    const e = document.createElement("span");
+    return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
+  };
+  var m = class m2 {
     /**
      * Creates a new Modal instance
      * @param modal - The modal element or selector string to initialize
      * @param options - Configuration options for the modal behavior
-     * @param triggerElement - Optional trigger element or selector that opens the modal
-     * @throws {Error} When the provided modal element is invalid or cannot be found
+     * @param triggerElements - Optional trigger elements or selectors that open the modal
      */
-    constructor(e, n = {}, a) {
-      c(this, "modalElement");
-      c(this, "showModal");
-      c(this, "hideModal");
-      c(this, "cleanup");
-      c(this, "isHidden");
-      c(this, "options");
-      c(this, "state");
-      const d = typeof e == "string" ? r(e) : e;
-      if (!(d instanceof HTMLElement))
-        throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
-      this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
-      const s = O.getInstance("modal", this.modalElement);
-      if (s)
-        return s;
+    constructor(t, e = {}, n) {
+      s(this, "modalElement");
+      s(this, "modalId");
+      s(this, "modalContent");
+      s(this, "triggerButtons", []);
+      s(this, "overlayElement");
+      s(this, "dispatchEventToDocument");
+      s(this, "options");
+      s(this, "state");
+      s(this, "animationEnter");
+      s(this, "animationExit");
+      s(this, "animateContent");
+      s(this, "hasDefaultOverlay");
+      s(this, "enableStackedModals");
+      s(this, "preventCloseModal");
+      s(this, "isKeyDownEventRegistered");
+      s(this, "closeButtons");
+      s(this, "overlayClassName");
+      s(this, "allowBodyScroll");
+      s(this, "initAsOpen");
+      s(this, "closeAll", (t2) => {
+        if (this.enableStackedModals)
+          return;
+        const e2 = c("[data-fx-modal][data-state=open]");
+        for (const n2 of e2) {
+          const a2 = n2.dataset.modalId;
+          if (a2 !== t2.dataset.modalId) {
+            n2.blur(), r("[data-modal-overlay]", n2).setAttribute("data-state", "close");
+            const l2 = r("[data-modal-content]", n2);
+            E(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
+          }
+        }
+      });
+      s(this, "closeModalEsc", (t2) => {
+        t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
+      });
+      s(this, "initModal", (t2, e2) => {
+        var h;
+        if (!(t2 instanceof HTMLDialogElement))
+          throw new Error("Modal Element must be a valid HTMLDialog Element");
+        const { allowBodyScroll: n2, animateContent: a2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
+        this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || n2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || i2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((h = t2.dataset.modalOverlay) == null ? void 0 : h.split(" ")) || (l2 == null ? void 0 : l2.split(" ")) || "", this.isKeyDownEventRegistered = false, t2.setAttribute("data-allow-body-scroll", `${this.allowBodyScroll}`), this.closeButtons = c("[data-close-modal]", t2), this.hasDefaultOverlay = false, r("[data-modal-overlay]", t2) instanceof HTMLElement && (this.overlayElement = r("[data-modal-overlay]", t2), this.overlayElement.setAttribute("data-overlay-nature", "default"), this.hasDefaultOverlay = true), this.animateContent = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
+      });
+      s(this, "closeModalOnX", (t2) => {
+        t2.preventDefault(), this.hideModal();
+      });
+      s(this, "addEvents", () => {
+        for (const t2 of this.triggerButtons)
+          t2.addEventListener("click", this.showModal);
+        if (this.closeButtons.length > 0)
+          for (const t2 of this.closeButtons)
+            t2.addEventListener("click", this.closeModalOnX);
+        this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
+      });
+      s(this, "showModal", () => {
+        var e2, n2, a2, i2, l2;
+        if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
+          if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
+            modalContent: this.modalContent,
+            overlayClassName: this.overlayClassName
+          }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
+            const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
+            d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
+              element: this.modalContent,
+              callback: () => {
+                this.modalContent.style.removeProperty("--un-modal-animation");
+              }
+            });
+          } else
+            E(this.modalElement, this.modalContent, "open");
+          this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalContent.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (a2 = (n2 = this.options).onShow) == null || a2.call(n2), (l2 = (i2 = this.options).onToggle) == null || l2.call(i2, { isHidden: false }), this.modalElement.showModal();
+        }
+      });
+      s(this, "closeModal", () => {
+        this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), A(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || C(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
+      });
+      s(this, "closeLastAction", () => {
+        var t2, e2, n2, a2;
+        this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (n2 = this.options).onToggle) == null || a2.call(n2, { isHidden: true });
+      });
+      s(this, "hideModal", () => {
+        var a2, i2, l2, d2, h;
+        let t2 = false;
+        f(this.modalElement, "before-hide", {
+          modalId: this.modalId,
+          setExitAction: (u) => {
+            t2 = u;
+          }
+        });
+        const e2 = (l2 = (i2 = (a2 = this.options).beforeHide) == null ? void 0 : i2.call(a2)) == null ? void 0 : l2.cancelAction;
+        if (t2 || e2)
+          return;
+        const n2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
+        if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), n2) {
+          const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
+          this.modalContent.style.setProperty("--un-modal-animation", u);
+        }
+        y({
+          element: this.modalContent,
+          callback: () => {
+            n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
+          }
+        });
+      });
+      s(this, "cleanup", () => {
+        for (const t2 of this.triggerButtons)
+          t2.removeEventListener("click", this.showModal);
+        if (this.closeButtons.length > 0)
+          for (const t2 of this.closeButtons)
+            t2.removeEventListener("click", this.closeModalOnX);
+        !this.preventCloseModal && this.overlayElement instanceof HTMLElement && this.overlayElement.removeEventListener("click", this.hideModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:close`, this.hideModal), v.removeInstance("modal", this.modalElement);
+      });
+      s(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
+        t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
+      });
+      const a = typeof t == "string" ? r(t) : t;
+      if (!(a instanceof HTMLDialogElement))
+        throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
+      this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
+      const i = v.getInstance("modal", this.modalElement);
+      if (i)
+        return i;
       this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
-      const f = d.dataset.modalId, u = (typeof a == "string" ? r(a) : a) || r(`[data-modal-target='${f}']`), { showModal: h, hideModal: m, autoInitModal: b, isHidden: g, cleanup: p } = Z(d, u, this.options);
-      this.state === "open" && h(), b(), this.showModal = h, this.hideModal = m, this.isHidden = g, this.cleanup = p, O.register("modal", this.modalElement, this);
+      const l = r("[data-modal-content]", a);
+      if (!(l instanceof HTMLElement))
+        throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
+      this.modalContent = l;
+      const d = a.dataset.modalId;
+      this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
+    }
+    initializeTriggers(t, e) {
+      if (!t && e) {
+        const a = c(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
+        this.triggerButtons = a;
+        return;
+      }
+      if (!t)
+        return;
+      const n = Array.isArray(t) ? t : [t];
+      this.triggerButtons = n.map((a) => {
+        if (typeof a == "string") {
+          const i = r(a);
+          if (!(i instanceof HTMLElement))
+            throw new Error(`Trigger element not found: ${a}`);
+          return i;
+        }
+        if (!(a instanceof HTMLElement))
+          throw new Error("Invalid trigger element provided");
+        return a;
+      });
     }
   };
-  c(v, "autoInit", (e = "[data-fx-modal]") => {
-    const n = H(e);
-    for (const a of n)
-      new v(a);
+  s(m, "autoInit", (t = "[data-fx-modal]") => {
+    const e = c(t);
+    for (const n of e)
+      new m(n);
   }), /**
   * Creates and initializes a new Modal instance
-  * @param modal - The modal element or selector string
-  * @param options - Configuration options for the modal
-  * @param triggerElement - Optional trigger element or selector
-  * @returns {Modal} A new Modal instance
-  * 
-  * @example
-  * ```typescript
-  * const modal = Modal.init('#myModal', {
-  *   defaultState: 'open',
-  *   allowBodyScroll: true
-  * });
-  * ```
   */
-  c(v, "init", (e, n = {}, a) => new v(e, n, a));
-  var Y = v;
+  s(m, "init", (t, e = {}, n) => new m(t, e, n));
+  var w = m;
 
   // src/index.js
   function Modal(Alpine) {
     Alpine.directive("modal", (el, {}, { cleanup }) => {
       const modalId = el.getAttribute("data-modal-id");
       if (!modalId) {
-        console.error("\u274C data-modal-id is required but missing on element:", el);
+        console.error(
+          "\u274C data-modal-id is required but missing on element:",
+          el
+        );
+        return;
+      }
+      if (!(el instanceof HTMLDialogElement)) {
+        console.error(
+          "\u274C x-modal must be used only on an HTMLDialogElement:",
+          el
+        );
         return;
       }
-      const modalInstance = new Y(el);
+      const content = el.querySelector("[data-modal-content]");
+      if (!content) {
+        console.error(
+          "\u274C data-modal-content Element is required but missing in Modal Element:",
+          el
+        );
+        return;
+      }
+      const modalInstance = new w(el, {
+        dispatchEventToDocument: false
+      });
       if (!Alpine.store("modals")) {
         Alpine.store("modals", {});
       }
       Alpine.store("modals")[modalId] = modalInstance;
-      const openHandler = () => modalInstance.showModal();
-      const closeHandler = () => modalInstance.hideModal();
-      document.addEventListener(`modal:${modalId}:open`, openHandler);
-      document.addEventListener(`modal:${modalId}:close`, closeHandler);
+      const showModal = () => modalInstance.showModal();
+      const hideModal = () => modalInstance.hideModal();
+      document.addEventListener(`modal:${modalId}:open`, showModal);
+      document.addEventListener(`modal:${modalId}:close`, hideModal);
       cleanup(() => {
-        document.removeEventListener(`modal:${modalId}:open`, openHandler);
-        document.removeEventListener(`modal:${modalId}:close`, closeHandler);
         modalInstance.cleanup();
         delete Alpine.store("modals")[modalId];
+        document.removeEventListener(`modal:${modalId}:open`, showModal);
+        document.removeEventListener(`modal:${modalId}:close`, hideModal);
       });
     });
     Alpine.magic("modal", () => (id) => {

package/dist/cdn.min.js

@@ -1 +1 @@
-(()=>{var Q=Object.defineProperty,U=(e,t,a)=>t in e?Q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,m=(e,t,a)=>U(e,typeof t!="symbol"?t+"":t,a),y=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,a,n){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,a)||(window.$flexillaInstances[t].push({element:a,instance:n}),n)}static getInstance(t,a){var n,o;return this.initGlobalRegistry(),(o=(n=window.$flexillaInstances[t])==null?void 0:n.find(i=>i.element===a))==null?void 0:o.instance}static removeInstance(t,a){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(n=>n.element!==a))}},c=(e,t=document.body)=>t.querySelector(e),H=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),V=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let a=t.parentElement;if(a)a.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},W=({element:e,callback:t,type:a,keysCheck:n})=>{let o=getComputedStyle(e),i=o.animation;if(i!=="none"&&i!==""&&!n.includes(i)){let r="animationend",u=()=>{e.removeEventListener(r,u),t()};e.addEventListener(r,u,{once:!0})}else t()},Y=({element:e,callback:t})=>{W({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},G=(e,t,a)=>{let n=new CustomEvent(t,{detail:a});e.dispatchEvent(n)},j=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},X=({modalContent:e,overlayClassName:t})=>{let a=document.createElement("span");return a.setAttribute("aria-hidden","true"),V({newElement:a,existingElement:e}),a.classList.add(...t),a.setAttribute("data-modal-overlay",""),a},I=(e,t,a)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",a==="open"?"false":"true"),e.setAttribute("data-state",a),t.setAttribute("data-state",a);let n=c("[data-modal-overlay]",e);n instanceof HTMLElement&&n.setAttribute("data-state",a)},Z=(e,t,a)=>{if(!e){t||(document.body.style.overflowY="auto");return}H("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(n=>n!==a).length===0&&!t&&(document.body.style.overflowY="auto")},_=(e,t,a)=>{var n;if(!(e instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{animateContent:o,allowBodyScroll:i,preventCloseModal:r,overlayClass:u,onShow:h,onHide:p,onToggle:f,beforeHide:M,enableStackedModals:k}=a,$=i||e.hasAttribute("data-allow-body-scroll")&&e.getAttribute("data-allow-body-scroll")!=="false",J=r||e.hasAttribute("data-prevent-close-modal")&&e.getAttribute("data-prevent-close-modal")!=="false",N=k||e.hasAttribute("data-enable-stacked")&&e.getAttribute("data-enable-stacked")!=="false",K=u?.split(" ")||((n=e.dataset.modalOverlay)==null?void 0:n.split(" "))||"",g=!1;e.setAttribute("data-allow-body-scroll",`${$}`);let s=c("[data-modal-content]",e),L=H("[data-close-modal]",e),d=null,T=!1;if(c("[data-modal-overlay]",e)instanceof HTMLElement&&(d=c("[data-modal-overlay]",e),d.setAttribute("data-overlay-nature","default"),T=!0),!(s instanceof HTMLElement))throw new Error("Modal content element not found");let R=s.dataset.enterAnimation||"",q=s.dataset.exitAnimation||"";s.setAttribute("data-state","close");let B=l=>{l.key==="Escape"&&(l.preventDefault(),J||w())},O=l=>{if(N)return;let A=H("[data-fx-modal][data-state=open]");for(let v of A)if(v!==l){let b=c("[data-modal-overlay]",v);b.setAttribute("data-state","close");let S=c("[data-modal-content]",v),x=b.getAttribute("data-overlay-nature")==="default";I(v,S,"close"),x||j(b)}},C=()=>{if(e.getAttribute("data-state")!=="open"){if(O(e),d=T?d:X({modalContent:s,overlayClassName:K}),d?.setAttribute("data-state","open"),G(e,"modal-open",{modalId:e.id}),o||R!==""){let l=o?o.enterAnimation:R;l!==""&&s.style.setProperty("--un-modal-animation",l),I(e,s,"open"),Y({element:s,callback:()=>{s.style.removeProperty("--un-modal-animation")}})}else I(e,s,"open");$||(document.body.style.overflow="hidden"),g||(document.addEventListener("keydown",B),g=!0),e.focus(),r||d.addEventListener("click",w),h?.(),f?.({isHidden:!1})}},w=()=>{var l;let A=!1;G(e,"before-hide",{modalId:e.id,setExitAction:P=>{A=P}});let v=(l=M?.())==null?void 0:l.cancelAction;if(A||v)return;let b=()=>{I(e,s,"close"),Z(N,$,e),T||j(d),G(e,"modal-close",{modalId:e.id})},S=()=>{g&&(document.removeEventListener("keydown",B),g=!1),e.blur(),p?.(),f?.({isHidden:!0})},x=o?.exitAnimation&&o.exitAnimation!==""||q!=="";if(d?.setAttribute("data-state","close"),s.setAttribute("data-state","close"),x){let P=o?o.exitAnimation||"":q;s.style.setProperty("--un-modal-animation",P)}Y({element:s,callback:()=>{x&&s.style.removeProperty("--un-modal-animation"),b(),S()}})},D=l=>{l.preventDefault(),w()};return{autoInitModal:()=>{if(t instanceof HTMLElement&&t.addEventListener("click",C),L.length>0)for(let l of L)l.addEventListener("click",D)},showModal:C,hideModal:w,isHidden:()=>e.dataset.state==="close",cleanup:()=>{if(t instanceof HTMLElement&&t.removeEventListener("click",C),L.length>0)for(let l of L)l.removeEventListener("click",D);!r&&d instanceof HTMLElement&&d.removeEventListener("click",w),y.removeInstance("modal",e)}}},E=class{constructor(t,a={},n){m(this,"modalElement"),m(this,"showModal"),m(this,"hideModal"),m(this,"cleanup"),m(this,"isHidden"),m(this,"options"),m(this,"state");let o=typeof t=="string"?c(t):t;if(!(o instanceof HTMLElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalElement=o,this.options=a,this.state=a?.defaultState||this.modalElement.dataset.state||"close";let i=y.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let r=o.dataset.modalId,u=(typeof n=="string"?c(n):n)||c(`[data-modal-target='${r}']`),{showModal:h,hideModal:p,autoInitModal:f,isHidden:M,cleanup:k}=_(o,u,this.options);this.state==="open"&&h(),f(),this.showModal=h,this.hideModal=p,this.isHidden=M,this.cleanup=k,y.register("modal",this.modalElement,this)}};m(E,"autoInit",(e="[data-fx-modal]")=>{let t=H(e);for(let a of t)new E(a)}),m(E,"init",(e,t={},a)=>new E(e,t,a));var z=E;function ee(e){e.directive("modal",(t,{},{cleanup:a})=>{let n=t.getAttribute("data-modal-id");if(!n){console.error("\u274C data-modal-id is required but missing on element:",t);return}let o=new z(t);e.store("modals")||e.store("modals",{}),e.store("modals")[n]=o;let i=()=>o.showModal(),r=()=>o.hideModal();document.addEventListener(`modal:${n}:open`,i),document.addEventListener(`modal:${n}:close`,r),a(()=>{document.removeEventListener(`modal:${n}:open`,i),document.removeEventListener(`modal:${n}:close`,r),o.cleanup(),delete e.store("modals")[n]})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var F=ee;document.addEventListener("alpine:init",()=>{F(window.Alpine)});})();
+(()=>{var I=Object.defineProperty,T=(e,t,o)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t,o)=>T(e,typeof t!="symbol"?t+"":t,o),v=(e,t=document.body)=>t.querySelector(e),y=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),D=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let o=t.parentElement;if(o)o.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},k=({element:e,callback:t,type:o,keysCheck:s})=>{let l=getComputedStyle(e),d=l.animation;if(d!=="none"&&d!==""&&!s.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},A=({element:e,callback:t})=>{k({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,o)=>{let s=new CustomEvent(t,{detail:o});e.dispatchEvent(s)},C=(e,t,o)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",o==="open"?"false":"true"),e.setAttribute("data-state",o),t.setAttribute("data-state",o);let s=v("[data-modal-overlay]",e);s instanceof HTMLElement&&s.setAttribute("data-state",o)},$=(e,t,o)=>{if(!e){t||(document.body.style.overflowY="auto");return}y("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(s=>s!==o).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,o,s){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,o)||(window.$flexillaInstances[t].push({element:o,instance:s}),s)}static getInstance(t,o){var s,l;return this.initGlobalRegistry(),(l=(s=window.$flexillaInstances[t])==null?void 0:s.find(d=>d.element===o))==null?void 0:l.instance}static removeInstance(t,o){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(s=>s.element!==o))}},H=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},B=({modalContent:e,overlayClassName:t})=>{let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),D({newElement:o,existingElement:e}),o.classList.add(...t),o.setAttribute("data-modal-overlay",""),o},f=class{constructor(t,o={},s){a(this,"modalElement"),a(this,"modalId"),a(this,"modalContent"),a(this,"triggerButtons",[]),a(this,"overlayElement"),a(this,"dispatchEventToDocument"),a(this,"options"),a(this,"state"),a(this,"animationEnter"),a(this,"animationExit"),a(this,"animateContent"),a(this,"hasDefaultOverlay"),a(this,"enableStackedModals"),a(this,"preventCloseModal"),a(this,"isKeyDownEventRegistered"),a(this,"closeButtons"),a(this,"overlayClassName"),a(this,"allowBodyScroll"),a(this,"initAsOpen"),a(this,"closeAll",n=>{if(this.enableStackedModals)return;let r=y("[data-fx-modal][data-state=open]");for(let i of r){let m=i.dataset.modalId;if(m!==n.dataset.modalId){i.blur(),v("[data-modal-overlay]",i).setAttribute("data-state","close");let h=v("[data-modal-content]",i);C(i,h,"close"),document.dispatchEvent(new CustomEvent(`modal:${m}:close`))}}}),a(this,"closeModalEsc",n=>{n.key==="Escape"&&(n.preventDefault(),this.preventCloseModal||this.hideModal())}),a(this,"initModal",(n,r)=>{var i;if(!(n instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:p,enableStackedModals:b}=r;this.allowBodyScroll=n.hasAttribute("data-allow-body-scroll")&&n.getAttribute("data-allow-body-scroll")!=="false"||m||!1,this.preventCloseModal=n.hasAttribute("data-prevent-close-modal")&&n.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=n.hasAttribute("data-enable-stacked")&&n.getAttribute("data-enable-stacked")!=="false"||b||!1,this.overlayClassName=((i=n.dataset.modalOverlay)==null?void 0:i.split(" "))||p?.split(" ")||"",this.isKeyDownEventRegistered=!1,n.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=y("[data-close-modal]",n),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",n)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",n),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),a(this,"closeModalOnX",n=>{n.preventDefault(),this.hideModal()}),a(this,"addEvents",()=>{for(let n of this.triggerButtons)n.addEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),a(this,"showModal",()=>{var n,r,i,m,h;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:B({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(n=this.overlayElement)==null||n.setAttribute("data-state","open"),g(this.modalElement,"modal-open",{modalId:this.modalId}),this.animateContent||this.animationEnter!==""){let E=this.animateContent?this.animateContent.enterAnimation:this.animationEnter;E&&E!==""&&this.modalContent.style.setProperty("--un-modal-animation",E),C(this.modalElement,this.modalContent,"open"),A({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else C(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalContent.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(i=(r=this.options).onShow)==null||i.call(r),(h=(m=this.options).onToggle)==null||h.call(m,{isHidden:!1}),this.modalElement.showModal()}}),a(this,"closeModal",()=>{this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close"),this.modalElement.blur(),$(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||H(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),a(this,"closeLastAction",()=>{var n,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(n=this.options).onHide)==null||r.call(n),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),a(this,"hideModal",()=>{var n,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let p=(i=(r=(n=this.options).beforeHide)==null?void 0:r.call(n))==null?void 0:i.cancelAction;if(E||p)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((h=this.overlayElement)==null||h.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),b){let M=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",M)}A({element:this.modalContent,callback:()=>{b&&this.modalContent.style.removeProperty("--un-modal-animation"),this.closeModal(),this.closeLastAction(),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.modalElement.close("modal-closed")}})}),a(this,"cleanup",()=>{for(let n of this.triggerButtons)n.removeEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.removeEventListener("click",this.closeModalOnX);!this.preventCloseModal&&this.overlayElement instanceof HTMLElement&&this.overlayElement.removeEventListener("click",this.hideModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:close`,this.hideModal),w.removeInstance("modal",this.modalElement)}),a(this,"setOptions",({state:n,allowBodyscroll:r})=>{n&&(this.state=n),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let l=typeof t=="string"?v(t):t;if(!(l instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=l,this.options=o,this.state=o?.defaultState||this.modalElement.dataset.state||"close";let d=w.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let c=v("[data-modal-content]",l);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=c;let u=l.dataset.modalId;this.modalId=`${u}`,this.initializeTriggers(s,u),this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.initModal(this.modalElement,this.options),this.state==="open"?(this.initAsOpen=!0,this.showModal()):(this.initAsOpen=!1,this.modalElement.blur(),this.modalContent.setAttribute("data-state","close"),this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close")),w.register("modal",this.modalElement,this)}initializeTriggers(t,o){if(!t&&o){let l=y(`[data-modal-target='${o}'], [data-modal-trigger][data-modal-id='${o}']`);this.triggerButtons=l;return}if(!t)return;let s=Array.isArray(t)?t:[t];this.triggerButtons=s.map(l=>{if(typeof l=="string"){let d=v(l);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${l}`);return d}if(!(l instanceof HTMLElement))throw new Error("Invalid trigger element provided");return l})}};a(f,"autoInit",(e="[data-fx-modal]")=>{let t=y(e);for(let o of t)new f(o)}),a(f,"init",(e,t={},o)=>new f(e,t,o));var L=f;function S(e){e.directive("modal",(t,{},{cleanup:o})=>{let s=t.getAttribute("data-modal-id");if(!s){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!(t instanceof HTMLDialogElement)){console.error("\u274C x-modal must be used only on an HTMLDialogElement:",t);return}if(!t.querySelector("[data-modal-content]")){console.error("\u274C data-modal-content Element is required but missing in Modal Element:",t);return}let d=new L(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[s]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${s}:open`,c),document.addEventListener(`modal:${s}:close`,u),o(()=>{d.cleanup(),delete e.store("modals")[s],document.removeEventListener(`modal:${s}:open`,c),document.removeEventListener(`modal:${s}:close`,u)})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var x=S;document.addEventListener("alpine:init",()=>{x(window.Alpine)});})();