@flexilla/alpine-modal 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cdn.js +136 -114
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +136 -114
  4. package/dist/module.esm.js +136 -114
  5. package/package.json +3 -3
  6. package/src/index.js +9 -15
package/dist/cdn.js CHANGED
@@ -1,11 +1,11 @@
1
1
  (() => {
2
2
  // ../../node_modules/@flexilla/modal/dist/modal.js
3
- var C = Object.defineProperty;
4
- var x = (o, t, e) => t in o ? C(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
5
- var a = (o, t, e) => x(o, typeof t != "symbol" ? t + "" : t, e);
3
+ var p = Object.defineProperty;
4
+ var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
5
+ var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
6
6
  var r = (o, t = document.body) => t.querySelector(o);
7
- var u = (o, t = document.body) => Array.from(t.querySelectorAll(o));
8
- var I = ({
7
+ var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
8
+ var M = ({
9
9
  newElement: o,
10
10
  existingElement: t
11
11
  }) => {
@@ -17,13 +17,13 @@
17
17
  else
18
18
  throw new Error("Existing element must have a parent element.");
19
19
  };
20
- var L = ({
20
+ var g = ({
21
21
  element: o,
22
22
  callback: t,
23
23
  type: e,
24
24
  keysCheck: n
25
25
  }) => {
26
- const s = getComputedStyle(o), i = s.animation;
26
+ const a = getComputedStyle(o), i = a.animation;
27
27
  if (i !== "none" && i !== "" && !n.includes(i)) {
28
28
  const l = "animationend", d = () => {
29
29
  o.removeEventListener(l, d), t();
@@ -32,33 +32,33 @@
32
32
  } else
33
33
  t();
34
34
  };
35
- var g = ({ element: o, callback: t }) => {
36
- L({
35
+ var y = ({ element: o, callback: t }) => {
36
+ g({
37
37
  element: o,
38
38
  callback: t,
39
39
  type: "animation",
40
40
  keysCheck: ["none 0s ease 0s 1 normal none running"]
41
41
  });
42
42
  };
43
- var v = (o, t, e) => {
43
+ var f = (o, t, e) => {
44
44
  const n = new CustomEvent(t, { detail: e });
45
45
  o.dispatchEvent(n);
46
46
  };
47
- var f = (o, t, e) => {
47
+ var E = (o, t, e) => {
48
48
  if (!(t instanceof HTMLElement))
49
49
  throw new Error("No modal-content found");
50
50
  o.setAttribute("aria-hidden", e === "open" ? "false" : "true"), o.setAttribute("data-state", e), t.setAttribute("data-state", e);
51
51
  const n = r("[data-modal-overlay]", o);
52
52
  n instanceof HTMLElement && n.setAttribute("data-state", e);
53
53
  };
54
- var B = (o, t, e) => {
54
+ var A = (o, t, e) => {
55
55
  if (!o) {
56
56
  t || (document.body.style.overflowY = "auto");
57
57
  return;
58
58
  }
59
- u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((i) => i !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
59
+ 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");
60
60
  };
61
- var E = class {
61
+ var v = class {
62
62
  static initGlobalRegistry() {
63
63
  window.$flexillaInstances || (window.$flexillaInstances = {});
64
64
  }
@@ -66,10 +66,10 @@
66
66
  return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
67
67
  }
68
68
  static getInstance(t, e) {
69
- var n, s;
70
- return this.initGlobalRegistry(), (s = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
69
+ var n, a;
70
+ return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
71
71
  (i) => i.element === e
72
- )) == null ? void 0 : s.instance;
72
+ )) == null ? void 0 : a.instance;
73
73
  }
74
74
  static removeInstance(t, e) {
75
75
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
@@ -77,154 +77,182 @@
77
77
  ));
78
78
  }
79
79
  };
80
- var k = (o) => {
80
+ var C = (o) => {
81
81
  var t;
82
82
  o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
83
83
  };
84
- var T = ({ modalContent: o, overlayClassName: t }) => {
84
+ var x = ({ modalContent: o, overlayClassName: t }) => {
85
85
  const e = document.createElement("span");
86
- return e.setAttribute("aria-hidden", "true"), I({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
86
+ return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
87
87
  };
88
- var h = class h2 {
88
+ var m = class m2 {
89
89
  /**
90
90
  * Creates a new Modal instance
91
91
  * @param modal - The modal element or selector string to initialize
92
92
  * @param options - Configuration options for the modal behavior
93
- * @param triggerElement - Optional trigger element or selector that opens the modal
93
+ * @param triggerElements - Optional trigger elements or selectors that open the modal
94
94
  */
95
95
  constructor(t, e = {}, n) {
96
- a(this, "modalElement");
97
- a(this, "modalId");
98
- a(this, "modalContent");
99
- a(this, "triggerButton");
100
- a(this, "overlayElement");
101
- a(this, "dispatchEventToDocument");
102
- a(this, "options");
103
- a(this, "state");
104
- a(this, "animationEnter");
105
- a(this, "animationExit");
106
- a(this, "animateContent");
107
- a(this, "hasDefaultOverlay");
108
- a(this, "enableStackedModals");
109
- a(this, "preventCloseModal");
110
- a(this, "isKeyDownEventRegistered");
111
- a(this, "closeButtons");
112
- a(this, "overlayClassName");
113
- a(this, "allowBodyScroll");
114
- a(this, "initAsOpen");
115
- a(this, "closeAll", (t2) => {
96
+ s(this, "modalElement");
97
+ s(this, "modalId");
98
+ s(this, "modalContent");
99
+ s(this, "triggerButtons", []);
100
+ s(this, "overlayElement");
101
+ s(this, "dispatchEventToDocument");
102
+ s(this, "options");
103
+ s(this, "state");
104
+ s(this, "animationEnter");
105
+ s(this, "animationExit");
106
+ s(this, "animateContent");
107
+ s(this, "hasDefaultOverlay");
108
+ s(this, "enableStackedModals");
109
+ s(this, "preventCloseModal");
110
+ s(this, "isKeyDownEventRegistered");
111
+ s(this, "closeButtons");
112
+ s(this, "overlayClassName");
113
+ s(this, "allowBodyScroll");
114
+ s(this, "initAsOpen");
115
+ s(this, "closeAll", (t2) => {
116
116
  if (this.enableStackedModals)
117
117
  return;
118
- const e2 = u("[data-fx-modal][data-state=open]");
118
+ const e2 = c("[data-fx-modal][data-state=open]");
119
119
  for (const n2 of e2) {
120
- const s2 = n2.dataset.modalId;
121
- if (s2 !== t2.dataset.modalId) {
120
+ const a2 = n2.dataset.modalId;
121
+ if (a2 !== t2.dataset.modalId) {
122
122
  n2.blur(), r("[data-modal-overlay]", n2).setAttribute("data-state", "close");
123
123
  const l2 = r("[data-modal-content]", n2);
124
- f(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${s2}:close`));
124
+ E(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
125
125
  }
126
126
  }
127
127
  });
128
- a(this, "closeModalEsc", (t2) => {
128
+ s(this, "closeModalEsc", (t2) => {
129
129
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
130
130
  });
131
- a(this, "initModal", (t2, e2) => {
132
- var m2;
133
- if (!(t2 instanceof HTMLElement))
134
- throw new Error("Modal Element must be a valid element");
135
- const { allowBodyScroll: n2, animateContent: s2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
136
- 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 = ((m2 = t2.dataset.modalOverlay) == null ? void 0 : m2.split(" ")) || (l2 == null ? void 0 : l2.split(" ")) || "", this.isKeyDownEventRegistered = false, t2.setAttribute("data-allow-body-scroll", `${this.allowBodyScroll}`), this.closeButtons = u("[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 = s2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.modalContent.setAttribute("data-state", "close");
131
+ s(this, "initModal", (t2, e2) => {
132
+ var h;
133
+ if (!(t2 instanceof HTMLDialogElement))
134
+ throw new Error("Modal Element must be a valid HTMLDialog Element");
135
+ const { allowBodyScroll: n2, animateContent: a2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
136
+ 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();
137
137
  });
138
- a(this, "closeModalOnX", (t2) => {
138
+ s(this, "closeModalOnX", (t2) => {
139
139
  t2.preventDefault(), this.hideModal();
140
140
  });
141
- a(this, "addEvents", () => {
142
- if (this.triggerButton instanceof HTMLElement && this.triggerButton.addEventListener("click", this.showModal), this.closeButtons.length > 0)
141
+ s(this, "addEvents", () => {
142
+ for (const t2 of this.triggerButtons)
143
+ t2.addEventListener("click", this.showModal);
144
+ if (this.closeButtons.length > 0)
143
145
  for (const t2 of this.closeButtons)
144
146
  t2.addEventListener("click", this.closeModalOnX);
145
147
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
146
148
  });
147
- a(this, "showModal", () => {
148
- var e2, n2, s2, i2, l2;
149
+ s(this, "showModal", () => {
150
+ var e2, n2, a2, i2, l2;
149
151
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
150
- if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
152
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
151
153
  modalContent: this.modalContent,
152
154
  overlayClassName: this.overlayClassName
153
- }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), v(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
155
+ }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
154
156
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
155
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), f(this.modalElement, this.modalContent, "open"), g({
157
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
156
158
  element: this.modalContent,
157
159
  callback: () => {
158
160
  this.modalContent.style.removeProperty("--un-modal-animation");
159
161
  }
160
162
  });
161
163
  } else
162
- f(this.modalElement, this.modalContent, "open");
163
- this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalElement.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (s2 = (n2 = this.options).onShow) == null || s2.call(n2), (l2 = (i2 = this.options).onToggle) == null || l2.call(i2, { isHidden: false });
164
+ E(this.modalElement, this.modalContent, "open");
165
+ 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();
164
166
  }
165
167
  });
166
- a(this, "hideModal", () => {
167
- var l2, d2, m2, y, w;
168
+ s(this, "closeModal", () => {
169
+ 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 });
170
+ });
171
+ s(this, "closeLastAction", () => {
172
+ var t2, e2, n2, a2;
173
+ 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 });
174
+ });
175
+ s(this, "hideModal", () => {
176
+ var a2, i2, l2, d2, h;
168
177
  let t2 = false;
169
- v(this.modalElement, "before-hide", {
178
+ f(this.modalElement, "before-hide", {
170
179
  modalId: this.modalId,
171
- setExitAction: (c) => {
172
- t2 = c;
180
+ setExitAction: (u) => {
181
+ t2 = u;
173
182
  }
174
183
  });
175
- const e2 = (m2 = (d2 = (l2 = this.options).beforeHide) == null ? void 0 : d2.call(l2)) == null ? void 0 : m2.cancelAction;
184
+ const e2 = (l2 = (i2 = (a2 = this.options).beforeHide) == null ? void 0 : i2.call(a2)) == null ? void 0 : l2.cancelAction;
176
185
  if (t2 || e2)
177
186
  return;
178
- const n2 = () => {
179
- f(this.modalElement, this.modalContent, "close"), B(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || k(this.overlayElement), v(this.modalElement, "modal-close", { modalId: this.modalElement.id });
180
- }, s2 = () => {
181
- var c, p, b, M;
182
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (p = (c = this.options).onHide) == null || p.call(c), (M = (b = this.options).onToggle) == null || M.call(b, { isHidden: true });
183
- }, i2 = ((y = this.animateContent) == null ? void 0 : y.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
184
- if ((w = this.overlayElement) == null || w.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), i2) {
185
- const c = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
186
- this.modalContent.style.setProperty("--un-modal-animation", c);
187
+ const n2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
188
+ if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), n2) {
189
+ const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
190
+ this.modalContent.style.setProperty("--un-modal-animation", u);
187
191
  }
188
- g({
192
+ y({
189
193
  element: this.modalContent,
190
194
  callback: () => {
191
- i2 && this.modalContent.style.removeProperty("--un-modal-animation"), n2(), s2();
195
+ n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
192
196
  }
193
197
  });
194
198
  });
195
- a(this, "cleanup", () => {
196
- if (this.triggerButton instanceof HTMLElement && this.triggerButton.removeEventListener("click", this.showModal), this.closeButtons.length > 0)
199
+ s(this, "cleanup", () => {
200
+ for (const t2 of this.triggerButtons)
201
+ t2.removeEventListener("click", this.showModal);
202
+ if (this.closeButtons.length > 0)
197
203
  for (const t2 of this.closeButtons)
198
204
  t2.removeEventListener("click", this.closeModalOnX);
199
- !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), E.removeInstance("modal", this.modalElement);
205
+ !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);
206
+ });
207
+ s(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
208
+ t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
200
209
  });
201
- const s = typeof t == "string" ? r(t) : t;
202
- if (!(s instanceof HTMLElement))
203
- throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
204
- this.modalElement = s, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
205
- const i = E.getInstance("modal", this.modalElement);
210
+ const a = typeof t == "string" ? r(t) : t;
211
+ if (!(a instanceof HTMLDialogElement))
212
+ throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
213
+ this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
214
+ const i = v.getInstance("modal", this.modalElement);
206
215
  if (i)
207
216
  return i;
208
217
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
209
- const l = r("[data-modal-content]", s);
218
+ const l = r("[data-modal-content]", a);
210
219
  if (!(l instanceof HTMLElement))
211
220
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
212
221
  this.modalContent = l;
213
- const d = s.dataset.modalId;
214
- this.modalId = `${d}`;
215
- const m = (typeof n == "string" ? r(n) : n) || r(`[data-modal-target='${d}']`);
216
- this.triggerButton = m, this.initModal(this.modalElement, this.options), this.addEvents(), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : this.initAsOpen = false, this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, E.register("modal", this.modalElement, this);
222
+ const d = a.dataset.modalId;
223
+ 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);
224
+ }
225
+ initializeTriggers(t, e) {
226
+ if (!t && e) {
227
+ const a = c(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
228
+ this.triggerButtons = a;
229
+ return;
230
+ }
231
+ if (!t)
232
+ return;
233
+ const n = Array.isArray(t) ? t : [t];
234
+ this.triggerButtons = n.map((a) => {
235
+ if (typeof a == "string") {
236
+ const i = r(a);
237
+ if (!(i instanceof HTMLElement))
238
+ throw new Error(`Trigger element not found: ${a}`);
239
+ return i;
240
+ }
241
+ if (!(a instanceof HTMLElement))
242
+ throw new Error("Invalid trigger element provided");
243
+ return a;
244
+ });
217
245
  }
218
246
  };
219
- a(h, "autoInit", (t = "[data-fx-modal]") => {
220
- const e = u(t);
247
+ s(m, "autoInit", (t = "[data-fx-modal]") => {
248
+ const e = c(t);
221
249
  for (const n of e)
222
- new h(n);
250
+ new m(n);
223
251
  }), /**
224
252
  * Creates and initializes a new Modal instance
225
253
  */
226
- a(h, "init", (t, e = {}, n) => new h(t, e, n));
227
- var A = h;
254
+ s(m, "init", (t, e = {}, n) => new m(t, e, n));
255
+ var w = m;
228
256
 
229
257
  // src/index.js
230
258
  function Modal(Alpine) {
@@ -237,6 +265,13 @@
237
265
  );
238
266
  return;
239
267
  }
268
+ if (!(el instanceof HTMLDialogElement)) {
269
+ console.error(
270
+ "\u274C x-modal must be used only on an HTMLDialogElement:",
271
+ el
272
+ );
273
+ return;
274
+ }
240
275
  const content = el.querySelector("[data-modal-content]");
241
276
  if (!content) {
242
277
  console.error(
@@ -245,33 +280,20 @@
245
280
  );
246
281
  return;
247
282
  }
248
- const trigger = document.querySelector(
249
- `[data-modal-trigger][data-modal-id="${modalId}"]`
250
- );
251
- const modalInstance = new A(el, {
283
+ const modalInstance = new w(el, {
252
284
  dispatchEventToDocument: false
253
285
  });
254
286
  if (!Alpine.store("modals")) {
255
287
  Alpine.store("modals", {});
256
288
  }
257
289
  Alpine.store("modals")[modalId] = modalInstance;
258
- const showModal = () => {
259
- modalInstance.showModal();
260
- };
261
- const hideModal = () => {
262
- modalInstance.hideModal();
263
- };
290
+ const showModal = () => modalInstance.showModal();
291
+ const hideModal = () => modalInstance.hideModal();
264
292
  document.addEventListener(`modal:${modalId}:open`, showModal);
265
293
  document.addEventListener(`modal:${modalId}:close`, hideModal);
266
- if (trigger instanceof HTMLElement) {
267
- trigger.addEventListener("click", showModal);
268
- }
269
294
  cleanup(() => {
270
295
  modalInstance.cleanup();
271
296
  delete Alpine.store("modals")[modalId];
272
- if (trigger instanceof HTMLElement) {
273
- trigger.removeEventListener("click", showModal);
274
- }
275
297
  document.removeEventListener(`modal:${modalId}:open`, showModal);
276
298
  document.removeEventListener(`modal:${modalId}:close`, hideModal);
277
299
  });
package/dist/cdn.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{var H=Object.defineProperty,S=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,s=(e,t,n)=>S(e,typeof t!="symbol"?t+"":t,n),v=(e,t=document.body)=>t.querySelector(e),g=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),O=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=t.parentElement;if(n)n.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},R=({element:e,callback:t,type:n,keysCheck:o})=>{let d=getComputedStyle(e),i=d.animation;if(i!=="none"&&i!==""&&!o.includes(i)){let r="animationend",m=()=>{e.removeEventListener(r,m),t()};e.addEventListener(r,m,{once:!0})}else t()},T=({element:e,callback:t})=>{R({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},L=(e,t,n)=>{let o=new CustomEvent(t,{detail:n});e.dispatchEvent(o)},b=(e,t,n)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",n==="open"?"false":"true"),e.setAttribute("data-state",n),t.setAttribute("data-state",n);let o=v("[data-modal-overlay]",e);o instanceof HTMLElement&&o.setAttribute("data-state",n)},N=(e,t,n)=>{if(!e){t||(document.body.style.overflowY="auto");return}g("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(o=>o!==n).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,n,o){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,n)||(window.$flexillaInstances[t].push({element:n,instance:o}),o)}static getInstance(t,n){var o,d;return this.initGlobalRegistry(),(d=(o=window.$flexillaInstances[t])==null?void 0:o.find(i=>i.element===n))==null?void 0:d.instance}static removeInstance(t,n){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(o=>o.element!==n))}},P=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},q=({modalContent:e,overlayClassName:t})=>{let n=document.createElement("span");return n.setAttribute("aria-hidden","true"),O({newElement:n,existingElement:e}),n.classList.add(...t),n.setAttribute("data-modal-overlay",""),n},y=class{constructor(t,n={},o){s(this,"modalElement"),s(this,"modalId"),s(this,"modalContent"),s(this,"triggerButton"),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",a=>{if(this.enableStackedModals)return;let h=g("[data-fx-modal][data-state=open]");for(let l of h){let c=l.dataset.modalId;if(c!==a.dataset.modalId){l.blur(),v("[data-modal-overlay]",l).setAttribute("data-state","close");let u=v("[data-modal-content]",l);b(l,u,"close"),document.dispatchEvent(new CustomEvent(`modal:${c}:close`))}}}),s(this,"closeModalEsc",a=>{a.key==="Escape"&&(a.preventDefault(),this.preventCloseModal||this.hideModal())}),s(this,"initModal",(a,h)=>{var l;if(!(a instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{allowBodyScroll:c,animateContent:u,preventCloseModal:E,overlayClass:M,enableStackedModals:C}=h;this.allowBodyScroll=a.hasAttribute("data-allow-body-scroll")&&a.getAttribute("data-allow-body-scroll")!=="false"||c||!1,this.preventCloseModal=a.hasAttribute("data-prevent-close-modal")&&a.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=a.hasAttribute("data-enable-stacked")&&a.getAttribute("data-enable-stacked")!=="false"||C||!1,this.overlayClassName=((l=a.dataset.modalOverlay)==null?void 0:l.split(" "))||M?.split(" ")||"",this.isKeyDownEventRegistered=!1,a.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=g("[data-close-modal]",a),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",a)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",a),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=u,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.modalContent.setAttribute("data-state","close")}),s(this,"closeModalOnX",a=>{a.preventDefault(),this.hideModal()}),s(this,"addEvents",()=>{if(this.triggerButton instanceof HTMLElement&&this.triggerButton.addEventListener("click",this.showModal),this.closeButtons.length>0)for(let a of this.closeButtons)a.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 a,h,l,c,u;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:q({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(a=this.overlayElement)==null||a.setAttribute("data-state","open"),L(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),b(this.modalElement,this.modalContent,"open"),T({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else b(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalElement.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(l=(h=this.options).onShow)==null||l.call(h),(u=(c=this.options).onToggle)==null||u.call(c,{isHidden:!1})}}),s(this,"hideModal",()=>{var a,h,l,c,u;let E=!1;L(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:f=>{E=f}});let M=(l=(h=(a=this.options).beforeHide)==null?void 0:h.call(a))==null?void 0:l.cancelAction;if(E||M)return;let C=()=>{b(this.modalElement,this.modalContent,"close"),N(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||P(this.overlayElement),L(this.modalElement,"modal-close",{modalId:this.modalElement.id})},B=()=>{var f,I,x,k;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(I=(f=this.options).onHide)==null||I.call(f),(k=(x=this.options).onToggle)==null||k.call(x,{isHidden:!0})},A=((c=this.animateContent)==null?void 0:c.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((u=this.overlayElement)==null||u.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),A){let f=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",f)}T({element:this.modalContent,callback:()=>{A&&this.modalContent.style.removeProperty("--un-modal-animation"),C(),B()}})}),s(this,"cleanup",()=>{if(this.triggerButton instanceof HTMLElement&&this.triggerButton.removeEventListener("click",this.showModal),this.closeButtons.length>0)for(let a of this.closeButtons)a.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)});let d=typeof t=="string"?v(t):t;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?.defaultState||this.modalElement.dataset.state||"close";let i=w.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let r=v("[data-modal-content]",d);if(!(r instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=r;let m=d.dataset.modalId;this.modalId=`${m}`;let p=(typeof o=="string"?v(o):o)||v(`[data-modal-target='${m}']`);this.triggerButton=p,this.initModal(this.modalElement,this.options),this.addEvents(),this.state==="open"?(this.initAsOpen=!0,this.showModal()):this.initAsOpen=!1,this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,w.register("modal",this.modalElement,this)}};s(y,"autoInit",(e="[data-fx-modal]")=>{let t=g(e);for(let n of t)new y(n)}),s(y,"init",(e,t={},n)=>new y(e,t,n));var $=y;function K(e){e.directive("modal",(t,{},{cleanup:n})=>{let o=t.getAttribute("data-modal-id");if(!o){console.error("\u274C data-modal-id is required but missing on element:",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 i=document.querySelector(`[data-modal-trigger][data-modal-id="${o}"]`),r=new $(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[o]=r;let m=()=>{r.showModal()},p=()=>{r.hideModal()};document.addEventListener(`modal:${o}:open`,m),document.addEventListener(`modal:${o}:close`,p),i instanceof HTMLElement&&i.addEventListener("click",m),n(()=>{r.cleanup(),delete e.store("modals")[o],i instanceof HTMLElement&&i.removeEventListener("click",m),document.removeEventListener(`modal:${o}:open`,m),document.removeEventListener(`modal:${o}:close`,p)})}),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 D=K;document.addEventListener("alpine:init",()=>{D(window.Alpine)});})();
1
+ (()=>{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)});})();