@flexilla/alpine-modal 0.3.0 → 0.3.1

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 (5) hide show
  1. package/dist/cdn.js +95 -81
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +95 -81
  4. package/dist/module.esm.js +95 -81
  5. package/package.json +3 -3
package/dist/cdn.js CHANGED
@@ -1,11 +1,11 @@
1
1
  (() => {
2
2
  // ../../node_modules/@flexilla/modal/dist/modal.js
3
- var w = Object.defineProperty;
4
- var b = (n, t, e) => t in n ? w(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
5
- var i = (n, t, e) => b(n, typeof t != "symbol" ? t + "" : t, e);
3
+ var M = Object.defineProperty;
4
+ var A = (n, t, e) => t in n ? M(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
5
+ var i = (n, t, e) => A(n, typeof t != "symbol" ? t + "" : t, e);
6
6
  var r = (n, t = document.body) => t.querySelector(n);
7
7
  var u = (n, t = document.body) => Array.from(t.querySelectorAll(n));
8
- var M = ({
8
+ var g = ({
9
9
  newElement: n,
10
10
  existingElement: t
11
11
  }) => {
@@ -17,14 +17,14 @@
17
17
  else
18
18
  throw new Error("Existing element must have a parent element.");
19
19
  };
20
- var A = ({
20
+ var C = ({
21
21
  element: n,
22
22
  callback: t,
23
23
  type: e,
24
- keysCheck: o
24
+ keysCheck: a
25
25
  }) => {
26
- const a = getComputedStyle(n), s = a.animation;
27
- if (s !== "none" && s !== "" && !o.includes(s)) {
26
+ const o = getComputedStyle(n), s = o.animation;
27
+ if (s !== "none" && s !== "" && !a.includes(s)) {
28
28
  const l = "animationend", d = () => {
29
29
  n.removeEventListener(l, d), t();
30
30
  };
@@ -32,8 +32,8 @@
32
32
  } else
33
33
  t();
34
34
  };
35
- var p = ({ element: n, callback: t }) => {
36
- A({
35
+ var y = ({ element: n, callback: t }) => {
36
+ C({
37
37
  element: n,
38
38
  callback: t,
39
39
  type: "animation",
@@ -41,10 +41,10 @@
41
41
  });
42
42
  };
43
43
  var E = (n, t, e) => {
44
- const o = new CustomEvent(t, { detail: e });
45
- n.dispatchEvent(o);
44
+ const a = new CustomEvent(t, { detail: e });
45
+ n.dispatchEvent(a);
46
46
  };
47
- function g(n) {
47
+ function x(n) {
48
48
  const t = () => {
49
49
  document.querySelector(
50
50
  "[data-fx-component]:not([data-component-initialized])"
@@ -52,26 +52,40 @@
52
52
  };
53
53
  t();
54
54
  }
55
- function C(n, t, e = "move") {
55
+ var w = "data-fx-teleport-root";
56
+ var v = "data-fx-teleported";
57
+ var L = {
58
+ append: () => {
59
+ },
60
+ remove: () => {
61
+ },
62
+ restore: () => {
63
+ }
64
+ };
65
+ function T(n, t, e = "move") {
66
+ var a;
56
67
  if (!(n instanceof HTMLElement))
57
68
  throw new Error("Source element must be an HTMLElement");
58
69
  if (!(t instanceof HTMLElement))
59
70
  throw new Error("Target element must be an HTMLElement");
60
71
  if (!["move", "detachable"].includes(e))
61
72
  throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
73
+ if ((a = n.parentElement) != null && a.closest(`[${w}]`))
74
+ return L;
75
+ n.setAttribute(w, "");
62
76
  let o = document.createComment("teleporter-placeholder");
63
- const a = n.parentNode;
64
- return a ? a.insertBefore(o, n) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (n.parentNode && t.appendChild(n), {
77
+ const s = n.parentNode;
78
+ return s && s.insertBefore(o, n), e === "move" ? (n.parentNode && (t.appendChild(n), n.setAttribute(v, "")), {
65
79
  append() {
66
- n.parentNode !== t && t.appendChild(n);
80
+ n.parentNode !== t && (t.appendChild(n), n.setAttribute(v, ""));
67
81
  },
68
82
  remove() {
69
83
  o != null && o.parentNode && n.parentNode && o.parentNode.insertBefore(n, o);
70
84
  },
71
85
  restore() {
72
- o != null && o.parentNode && n.parentNode !== a && o.parentNode.insertBefore(n, o);
86
+ o != null && o.parentNode && n.parentNode !== s && o.parentNode.insertBefore(n, o);
73
87
  }
74
- }) : (n.parentNode && t.appendChild(n), {
88
+ }) : (n.parentNode && (t.appendChild(n), n.setAttribute(v, "")), {
75
89
  append() {
76
90
  t.contains(n) || t.appendChild(n);
77
91
  },
@@ -83,36 +97,36 @@
83
97
  }
84
98
  });
85
99
  }
86
- var v = (n, t, e) => {
100
+ var p = (n, t, e) => {
87
101
  if (!(t instanceof HTMLElement))
88
102
  throw new Error("No modal-content found");
89
103
  n.setAttribute("aria-hidden", e === "open" ? "false" : "true"), n.setAttribute("data-state", e), t.setAttribute("data-state", e);
90
- const o = r("[data-modal-overlay]", n);
91
- o instanceof HTMLElement && o.setAttribute("data-state", e);
104
+ const a = r("[data-modal-overlay]", n);
105
+ a instanceof HTMLElement && a.setAttribute("data-state", e);
92
106
  };
93
- var L = (n, t, e) => {
107
+ var I = (n, t, e) => {
94
108
  if (!n) {
95
109
  t || (document.body.style.overflowY = "auto");
96
110
  return;
97
111
  }
98
112
  u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((s) => s !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
99
113
  };
100
- var c = class {
114
+ var h = class {
101
115
  static initGlobalRegistry() {
102
116
  window.$flexillaInstances || (window.$flexillaInstances = {});
103
117
  }
104
- static register(t, e, o) {
105
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: o }), o);
118
+ static register(t, e, a) {
119
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: a }), a);
106
120
  }
107
121
  static getInstance(t, e) {
108
- var o, a;
109
- return this.initGlobalRegistry(), (a = (o = window.$flexillaInstances[t]) == null ? void 0 : o.find(
122
+ var a, o;
123
+ return this.initGlobalRegistry(), (o = (a = window.$flexillaInstances[t]) == null ? void 0 : a.find(
110
124
  (s) => s.element === e
111
- )) == null ? void 0 : a.instance;
125
+ )) == null ? void 0 : o.instance;
112
126
  }
113
127
  static removeInstance(t, e) {
114
128
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
115
- (o) => o.element !== e
129
+ (a) => a.element !== e
116
130
  ));
117
131
  }
118
132
  static setup(t) {
@@ -122,13 +136,13 @@
122
136
  t.setAttribute("data-component-initialized", "initialized");
123
137
  }
124
138
  };
125
- var x = (n) => {
139
+ var B = (n) => {
126
140
  var t;
127
141
  n instanceof HTMLElement && ((t = n.parentElement) == null || t.removeChild(n));
128
142
  };
129
- var T = ({ modalContent: n, overlayClassName: t }) => {
143
+ var H = ({ modalContent: n, overlayClassName: t }) => {
130
144
  const e = document.createElement("span");
131
- return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
145
+ return e.setAttribute("aria-hidden", "true"), g({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
132
146
  };
133
147
  var m = class m2 {
134
148
  /**
@@ -137,7 +151,7 @@
137
151
  * @param options - Configuration options for the modal behavior
138
152
  * @param triggerElements - Optional trigger elements or selectors that open the modal
139
153
  */
140
- constructor(t, e = {}, o) {
154
+ constructor(t, e = {}, a) {
141
155
  i(this, "modalElement");
142
156
  i(this, "modalId");
143
157
  i(this, "modalContent");
@@ -159,7 +173,7 @@
159
173
  i(this, "initAsOpen");
160
174
  i(this, "teleporter");
161
175
  i(this, "moveElOnInit", () => {
162
- g(() => {
176
+ x(() => {
163
177
  this.teleporter.append();
164
178
  });
165
179
  });
@@ -167,12 +181,12 @@
167
181
  if (this.enableStackedModals)
168
182
  return;
169
183
  const e2 = u("[data-fx-modal][data-state=open]");
170
- for (const o2 of e2) {
171
- const a2 = o2.dataset.modalId;
172
- if (a2 !== t2.dataset.modalId) {
173
- o2.blur(), r("[data-modal-overlay]", o2).setAttribute("data-state", "close");
174
- const l2 = r("[data-modal-content]", o2);
175
- v(o2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
184
+ for (const a2 of e2) {
185
+ const o2 = a2.dataset.modalId;
186
+ if (o2 !== t2.dataset.modalId) {
187
+ a2.blur(), r("[data-modal-overlay]", a2).setAttribute("data-state", "close");
188
+ const l2 = r("[data-modal-content]", a2);
189
+ p(a2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${o2}:close`));
176
190
  }
177
191
  }
178
192
  });
@@ -180,11 +194,11 @@
180
194
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
181
195
  });
182
196
  i(this, "initModal", (t2, e2) => {
183
- var h;
197
+ var c;
184
198
  if (!(t2 instanceof HTMLDialogElement))
185
199
  throw new Error("Modal Element must be a valid HTMLDialog Element");
186
- const { allowBodyScroll: o2, animateContent: a2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
187
- this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || o2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || 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 = 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 = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
200
+ const { allowBodyScroll: a2, animateContent: o2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
201
+ this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || a2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((c = t2.dataset.modalOverlay) == null ? void 0 : c.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 = o2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
188
202
  });
189
203
  i(this, "closeModalOnX", (t2) => {
190
204
  t2.preventDefault(), this.hideModal();
@@ -198,33 +212,33 @@
198
212
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
199
213
  });
200
214
  i(this, "showModal", () => {
201
- var e2, o2, a2, s2, l2;
215
+ var e2, a2, o2, s2, l2;
202
216
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
203
- if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
217
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : H({
204
218
  modalContent: this.modalContent,
205
219
  overlayClassName: this.overlayClassName
206
220
  }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), E(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
207
221
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
208
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), v(this.modalElement, this.modalContent, "open"), p({
222
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), p(this.modalElement, this.modalContent, "open"), y({
209
223
  element: this.modalContent,
210
224
  callback: () => {
211
225
  this.modalContent.style.removeProperty("--un-modal-animation");
212
226
  }
213
227
  });
214
228
  } else
215
- v(this.modalElement, this.modalContent, "open");
216
- 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 = (o2 = this.options).onShow) == null || a2.call(o2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
229
+ p(this.modalElement, this.modalContent, "open");
230
+ 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), (o2 = (a2 = this.options).onShow) == null || o2.call(a2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
217
231
  }
218
232
  });
219
233
  i(this, "closeModal", () => {
220
- this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), L(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || x(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
234
+ this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), I(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || B(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
221
235
  });
222
236
  i(this, "closeLastAction", () => {
223
- var t2, e2, o2, a2;
224
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (o2 = this.options).onToggle) == null || a2.call(o2, { isHidden: true });
237
+ var t2, e2, a2, o2;
238
+ this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (o2 = (a2 = this.options).onToggle) == null || o2.call(a2, { isHidden: true });
225
239
  });
226
240
  i(this, "hideModal", () => {
227
- var a2, s2, l2, d2, h;
241
+ var o2, s2, l2, d2, c;
228
242
  let t2 = false;
229
243
  E(this.modalElement, "before-hide", {
230
244
  modalId: this.modalId,
@@ -232,18 +246,18 @@
232
246
  t2 = f;
233
247
  }
234
248
  });
235
- const e2 = (l2 = (s2 = (a2 = this.options).beforeHide) == null ? void 0 : s2.call(a2)) == null ? void 0 : l2.cancelAction;
249
+ const e2 = (l2 = (s2 = (o2 = this.options).beforeHide) == null ? void 0 : s2.call(o2)) == null ? void 0 : l2.cancelAction;
236
250
  if (t2 || e2)
237
251
  return;
238
- const o2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
239
- if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), o2) {
252
+ const a2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
253
+ if ((c = this.overlayElement) == null || c.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), a2) {
240
254
  const f = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
241
255
  this.modalContent.style.setProperty("--un-modal-animation", f);
242
256
  }
243
- p({
257
+ y({
244
258
  element: this.modalContent,
245
259
  callback: () => {
246
- o2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
260
+ a2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
247
261
  }
248
262
  });
249
263
  });
@@ -253,57 +267,57 @@
253
267
  if (this.closeButtons.length > 0)
254
268
  for (const t2 of this.closeButtons)
255
269
  t2.removeEventListener("click", this.closeModalOnX);
256
- !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), c.removeInstance("modal", this.modalElement);
270
+ !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), h.removeInstance("modal", this.modalElement);
257
271
  });
258
272
  i(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
259
273
  t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
260
274
  });
261
- const a = typeof t == "string" ? r(t) : t;
262
- if (!(a instanceof HTMLDialogElement))
275
+ const o = typeof t == "string" ? r(t) : t;
276
+ if (!(o instanceof HTMLDialogElement))
263
277
  throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
264
- this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
265
- const s = c.getInstance("modal", this.modalElement);
278
+ this.modalElement = o, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
279
+ const s = h.getInstance("modal", this.modalElement);
266
280
  if (s)
267
281
  return s;
268
282
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
269
- const l = r("[data-modal-content]", a);
283
+ const l = r("[data-modal-content]", o);
270
284
  if (!(l instanceof HTMLElement))
271
285
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
272
- c.setup(this.modalElement), this.modalContent = l;
273
- const d = a.dataset.modalId;
274
- this.modalId = `${d}`, this.teleporter = C(this.modalElement, document.body, "move"), this.initializeTriggers(o, 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")), this.moveElOnInit(), c.register("modal", this.modalElement, this), c.initialized(this.modalElement);
286
+ h.setup(this.modalElement), this.modalContent = l;
287
+ const d = o.dataset.modalId;
288
+ this.modalId = `${d}`, this.teleporter = T(this.modalElement, document.body, "move"), this.initializeTriggers(a, 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")), this.moveElOnInit(), h.register("modal", this.modalElement, this), h.initialized(this.modalElement);
275
289
  }
276
290
  initializeTriggers(t, e) {
277
291
  if (!t && e) {
278
- const a = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
279
- this.triggerButtons = a;
292
+ const o = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
293
+ this.triggerButtons = o;
280
294
  return;
281
295
  }
282
296
  if (!t)
283
297
  return;
284
- const o = Array.isArray(t) ? t : [t];
285
- this.triggerButtons = o.map((a) => {
286
- if (typeof a == "string") {
287
- const s = r(a);
298
+ const a = Array.isArray(t) ? t : [t];
299
+ this.triggerButtons = a.map((o) => {
300
+ if (typeof o == "string") {
301
+ const s = r(o);
288
302
  if (!(s instanceof HTMLElement))
289
- throw new Error(`Trigger element not found: ${a}`);
303
+ throw new Error(`Trigger element not found: ${o}`);
290
304
  return s;
291
305
  }
292
- if (!(a instanceof HTMLElement))
306
+ if (!(o instanceof HTMLElement))
293
307
  throw new Error("Invalid trigger element provided");
294
- return a;
308
+ return o;
295
309
  });
296
310
  }
297
311
  };
298
312
  i(m, "autoInit", (t = "[data-fx-modal]") => {
299
313
  const e = u(t);
300
- for (const o of e)
301
- new m(o);
314
+ for (const a of e)
315
+ new m(a);
302
316
  }), /**
303
317
  * Creates and initializes a new Modal instance
304
318
  */
305
- i(m, "init", (t, e = {}, o) => new m(t, e, o));
306
- var y = m;
319
+ i(m, "init", (t, e = {}, a) => new m(t, e, a));
320
+ var b = m;
307
321
 
308
322
  // src/index.js
309
323
  function Modal(Alpine) {
@@ -331,7 +345,7 @@
331
345
  );
332
346
  return;
333
347
  }
334
- const modalInstance = new y(el, {
348
+ const modalInstance = new b(el, {
335
349
  dispatchEventToDocument: false
336
350
  });
337
351
  if (!Alpine.store("modals")) {
package/dist/cdn.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{var x=Object.defineProperty,I=(e,t,o)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,l=(e,t,o)=>I(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.")},H=({element:e,callback:t,type:o,keysCheck:n})=>{let s=getComputedStyle(e),d=s.animation;if(d!=="none"&&d!==""&&!n.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},A=({element:e,callback:t})=>{H({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,o)=>{let n=new CustomEvent(t,{detail:o});e.dispatchEvent(n)};function k(e){let t=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(t):e()};t()}function B(e,t,o="move"){if(!(e instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(t instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(o))throw new Error(`Invalid teleport mode: ${o}. Must be "move" or "detachable".`);let n=document.createComment("teleporter-placeholder"),s=e.parentNode;return s?s.insertBefore(n,e):console.warn("Element has no parent; placeholder not inserted."),o==="move"?(e.parentNode&&t.appendChild(e),{append(){e.parentNode!==t&&t.appendChild(e)},remove(){n!=null&&n.parentNode&&e.parentNode&&n.parentNode.insertBefore(e,n)},restore(){n!=null&&n.parentNode&&e.parentNode!==s&&n.parentNode.insertBefore(e,n)}}):(e.parentNode&&t.appendChild(e),{append(){t.contains(e)||t.appendChild(e)},remove(){e.parentNode&&e.remove()},restore(){n!=null&&n.parentNode&&!e.parentNode&&n.parentNode.insertBefore(e,n)}})}var 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 n=v("[data-modal-overlay]",e);n instanceof HTMLElement&&n.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(n=>n!==o).length===0&&!t&&(document.body.style.overflowY="auto")},f=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,o,n){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,o)||(window.$flexillaInstances[t].push({element:o,instance:n}),n)}static getInstance(t,o){var n,s;return this.initGlobalRegistry(),(s=(n=window.$flexillaInstances[t])==null?void 0:n.find(d=>d.element===o))==null?void 0:s.instance}static removeInstance(t,o){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(n=>n.element!==o))}static setup(t){t.setAttribute("data-fx-component","fx")}static initialized(t){t.setAttribute("data-component-initialized","initialized")}},N=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},S=({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},p=class{constructor(t,o={},n){l(this,"modalElement"),l(this,"modalId"),l(this,"modalContent"),l(this,"triggerButtons",[]),l(this,"overlayElement"),l(this,"dispatchEventToDocument"),l(this,"options"),l(this,"state"),l(this,"animationEnter"),l(this,"animationExit"),l(this,"animateContent"),l(this,"hasDefaultOverlay"),l(this,"enableStackedModals"),l(this,"preventCloseModal"),l(this,"isKeyDownEventRegistered"),l(this,"closeButtons"),l(this,"overlayClassName"),l(this,"allowBodyScroll"),l(this,"initAsOpen"),l(this,"teleporter"),l(this,"moveElOnInit",()=>{k(()=>{this.teleporter.append()})}),l(this,"closeAll",a=>{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!==a.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`))}}}),l(this,"closeModalEsc",a=>{a.key==="Escape"&&(a.preventDefault(),this.preventCloseModal||this.hideModal())}),l(this,"initModal",(a,r)=>{var i;if(!(a instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:w,enableStackedModals:b}=r;this.allowBodyScroll=a.hasAttribute("data-allow-body-scroll")&&a.getAttribute("data-allow-body-scroll")!=="false"||m||!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"||b||!1,this.overlayClassName=((i=a.dataset.modalOverlay)==null?void 0:i.split(" "))||w?.split(" ")||"",this.isKeyDownEventRegistered=!1,a.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=y("[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=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),l(this,"closeModalOnX",a=>{a.preventDefault(),this.hideModal()}),l(this,"addEvents",()=>{for(let a of this.triggerButtons)a.addEventListener("click",this.showModal);if(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)}),l(this,"showModal",()=>{var a,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:S({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(a=this.overlayElement)==null||a.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()}}),l(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||N(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),l(this,"closeLastAction",()=>{var a,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(a=this.options).onHide)==null||r.call(a),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),l(this,"hideModal",()=>{var a,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let w=(i=(r=(a=this.options).beforeHide)==null?void 0:r.call(a))==null?void 0:i.cancelAction;if(E||w)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")}})}),l(this,"cleanup",()=>{for(let a of this.triggerButtons)a.removeEventListener("click",this.showModal);if(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),f.removeInstance("modal",this.modalElement)}),l(this,"setOptions",({state:a,allowBodyscroll:r})=>{a&&(this.state=a),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let s=typeof t=="string"?v(t):t;if(!(s instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=s,this.options=o,this.state=o?.defaultState||this.modalElement.dataset.state||"close";let d=f.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]",s);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");f.setup(this.modalElement),this.modalContent=c;let u=s.dataset.modalId;this.modalId=`${u}`,this.teleporter=B(this.modalElement,document.body,"move"),this.initializeTriggers(n,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")),this.moveElOnInit(),f.register("modal",this.modalElement,this),f.initialized(this.modalElement)}initializeTriggers(t,o){if(!t&&o){let s=y(`[data-modal-target='${o}'], [data-modal-trigger][data-modal-id='${o}']`);this.triggerButtons=s;return}if(!t)return;let n=Array.isArray(t)?t:[t];this.triggerButtons=n.map(s=>{if(typeof s=="string"){let d=v(s);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${s}`);return d}if(!(s instanceof HTMLElement))throw new Error("Invalid trigger element provided");return s})}};l(p,"autoInit",(e="[data-fx-modal]")=>{let t=y(e);for(let o of t)new p(o)}),l(p,"init",(e,t={},o)=>new p(e,t,o));var L=p;function O(e){e.directive("modal",(t,{},{cleanup:o})=>{let n=t.getAttribute("data-modal-id");if(!n){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")[n]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${n}:open`,c),document.addEventListener(`modal:${n}:close`,u),o(()=>{d.cleanup(),delete e.store("modals")[n],document.removeEventListener(`modal:${n}:open`,c),document.removeEventListener(`modal:${n}: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 T=O;document.addEventListener("alpine:init",()=>{T(window.Alpine)});})();
1
+ (()=>{var D=Object.defineProperty,H=(e,t,o)=>t in e?D(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t,o)=>H(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)),B=({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.")},$=({element:e,callback:t,type:o,keysCheck:s})=>{let l=getComputedStyle(e),i=l.animation;if(i!=="none"&&i!==""&&!s.includes(i)){let h="animationend",u=()=>{e.removeEventListener(h,u),t()};e.addEventListener(h,u,{once:!0})}else t()},L=({element:e,callback:t})=>{$({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)};function k(e){let t=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(t):e()};t()}var x="data-fx-teleport-root",C="data-fx-teleported",N={append:()=>{},remove:()=>{},restore:()=>{}};function S(e,t,o="move"){var s;if(!(e instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(t instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(o))throw new Error(`Invalid teleport mode: ${o}. Must be "move" or "detachable".`);if((s=e.parentElement)!=null&&s.closest(`[${x}]`))return N;e.setAttribute(x,"");let l=document.createComment("teleporter-placeholder"),i=e.parentNode;return i&&i.insertBefore(l,e),o==="move"?(e.parentNode&&(t.appendChild(e),e.setAttribute(C,"")),{append(){e.parentNode!==t&&(t.appendChild(e),e.setAttribute(C,""))},remove(){l!=null&&l.parentNode&&e.parentNode&&l.parentNode.insertBefore(e,l)},restore(){l!=null&&l.parentNode&&e.parentNode!==i&&l.parentNode.insertBefore(e,l)}}):(e.parentNode&&(t.appendChild(e),e.setAttribute(C,"")),{append(){t.contains(e)||t.appendChild(e)},remove(){e.parentNode&&e.remove()},restore(){l!=null&&l.parentNode&&!e.parentNode&&l.parentNode.insertBefore(e,l)}})}var A=(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)},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")},f=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(i=>i.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))}static setup(t){t.setAttribute("data-fx-component","fx")}static initialized(t){t.setAttribute("data-component-initialized","initialized")}},R=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},z=({modalContent:e,overlayClassName:t})=>{let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),B({newElement:o,existingElement:e}),o.classList.add(...t),o.setAttribute("data-modal-overlay",""),o},p=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,"teleporter"),a(this,"moveElOnInit",()=>{k(()=>{this.teleporter.append()})}),a(this,"closeAll",n=>{if(this.enableStackedModals)return;let r=y("[data-fx-modal][data-state=open]");for(let d of r){let m=d.dataset.modalId;if(m!==n.dataset.modalId){d.blur(),v("[data-modal-overlay]",d).setAttribute("data-state","close");let c=v("[data-modal-content]",d);A(d,c,"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 d;if(!(n instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:c,preventCloseModal:E,overlayClass:w,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=((d=n.dataset.modalOverlay)==null?void 0:d.split(" "))||w?.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=c,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,d,m,c;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:z({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),A(this.modalElement,this.modalContent,"open"),L({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else A(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),(d=(r=this.options).onShow)==null||d.call(r),(c=(m=this.options).onToggle)==null||c.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(),O(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||R(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),a(this,"closeLastAction",()=>{var n,r,d,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(n=this.options).onHide)==null||r.call(n),(m=(d=this.options).onToggle)==null||m.call(d,{isHidden:!0})}),a(this,"hideModal",()=>{var n,r,d,m,c;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let w=(d=(r=(n=this.options).beforeHide)==null?void 0:r.call(n))==null?void 0:d.cancelAction;if(E||w)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((c=this.overlayElement)==null||c.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)}L({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),f.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 i=f.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let h=v("[data-modal-content]",l);if(!(h instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");f.setup(this.modalElement),this.modalContent=h;let u=l.dataset.modalId;this.modalId=`${u}`,this.teleporter=S(this.modalElement,document.body,"move"),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")),this.moveElOnInit(),f.register("modal",this.modalElement,this),f.initialized(this.modalElement)}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 i=v(l);if(!(i instanceof HTMLElement))throw new Error(`Trigger element not found: ${l}`);return i}if(!(l instanceof HTMLElement))throw new Error("Invalid trigger element provided");return l})}};a(p,"autoInit",(e="[data-fx-modal]")=>{let t=y(e);for(let o of t)new p(o)}),a(p,"init",(e,t={},o)=>new p(e,t,o));var T=p;function q(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 i=new T(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[s]=i;let h=()=>i.showModal(),u=()=>i.hideModal();document.addEventListener(`modal:${s}:open`,h),document.addEventListener(`modal:${s}:close`,u),o(()=>{i.cleanup(),delete e.store("modals")[s],document.removeEventListener(`modal:${s}:open`,h),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 I=q;document.addEventListener("alpine:init",()=>{I(window.Alpine)});})();
package/dist/module.cjs.js CHANGED
@@ -24,12 +24,12 @@ __export(module_exports, {
24
24
  module.exports = __toCommonJS(module_exports);
25
25
 
26
26
  // ../../node_modules/@flexilla/modal/dist/modal.js
27
- var w = Object.defineProperty;
28
- var b = (n, t, e) => t in n ? w(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
29
- var i = (n, t, e) => b(n, typeof t != "symbol" ? t + "" : t, e);
27
+ var M = Object.defineProperty;
28
+ var A = (n, t, e) => t in n ? M(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
29
+ var i = (n, t, e) => A(n, typeof t != "symbol" ? t + "" : t, e);
30
30
  var r = (n, t = document.body) => t.querySelector(n);
31
31
  var u = (n, t = document.body) => Array.from(t.querySelectorAll(n));
32
- var M = ({
32
+ var g = ({
33
33
  newElement: n,
34
34
  existingElement: t
35
35
  }) => {
@@ -41,14 +41,14 @@ var M = ({
41
41
  else
42
42
  throw new Error("Existing element must have a parent element.");
43
43
  };
44
- var A = ({
44
+ var C = ({
45
45
  element: n,
46
46
  callback: t,
47
47
  type: e,
48
- keysCheck: o
48
+ keysCheck: a
49
49
  }) => {
50
- const a = getComputedStyle(n), s = a.animation;
51
- if (s !== "none" && s !== "" && !o.includes(s)) {
50
+ const o = getComputedStyle(n), s = o.animation;
51
+ if (s !== "none" && s !== "" && !a.includes(s)) {
52
52
  const l = "animationend", d = () => {
53
53
  n.removeEventListener(l, d), t();
54
54
  };
@@ -56,8 +56,8 @@ var A = ({
56
56
  } else
57
57
  t();
58
58
  };
59
- var p = ({ element: n, callback: t }) => {
60
- A({
59
+ var y = ({ element: n, callback: t }) => {
60
+ C({
61
61
  element: n,
62
62
  callback: t,
63
63
  type: "animation",
@@ -65,10 +65,10 @@ var p = ({ element: n, callback: t }) => {
65
65
  });
66
66
  };
67
67
  var E = (n, t, e) => {
68
- const o = new CustomEvent(t, { detail: e });
69
- n.dispatchEvent(o);
68
+ const a = new CustomEvent(t, { detail: e });
69
+ n.dispatchEvent(a);
70
70
  };
71
- function g(n) {
71
+ function x(n) {
72
72
  const t = () => {
73
73
  document.querySelector(
74
74
  "[data-fx-component]:not([data-component-initialized])"
@@ -76,26 +76,40 @@ function g(n) {
76
76
  };
77
77
  t();
78
78
  }
79
- function C(n, t, e = "move") {
79
+ var w = "data-fx-teleport-root";
80
+ var v = "data-fx-teleported";
81
+ var L = {
82
+ append: () => {
83
+ },
84
+ remove: () => {
85
+ },
86
+ restore: () => {
87
+ }
88
+ };
89
+ function T(n, t, e = "move") {
90
+ var a;
80
91
  if (!(n instanceof HTMLElement))
81
92
  throw new Error("Source element must be an HTMLElement");
82
93
  if (!(t instanceof HTMLElement))
83
94
  throw new Error("Target element must be an HTMLElement");
84
95
  if (!["move", "detachable"].includes(e))
85
96
  throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
97
+ if ((a = n.parentElement) != null && a.closest(`[${w}]`))
98
+ return L;
99
+ n.setAttribute(w, "");
86
100
  let o = document.createComment("teleporter-placeholder");
87
- const a = n.parentNode;
88
- return a ? a.insertBefore(o, n) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (n.parentNode && t.appendChild(n), {
101
+ const s = n.parentNode;
102
+ return s && s.insertBefore(o, n), e === "move" ? (n.parentNode && (t.appendChild(n), n.setAttribute(v, "")), {
89
103
  append() {
90
- n.parentNode !== t && t.appendChild(n);
104
+ n.parentNode !== t && (t.appendChild(n), n.setAttribute(v, ""));
91
105
  },
92
106
  remove() {
93
107
  o != null && o.parentNode && n.parentNode && o.parentNode.insertBefore(n, o);
94
108
  },
95
109
  restore() {
96
- o != null && o.parentNode && n.parentNode !== a && o.parentNode.insertBefore(n, o);
110
+ o != null && o.parentNode && n.parentNode !== s && o.parentNode.insertBefore(n, o);
97
111
  }
98
- }) : (n.parentNode && t.appendChild(n), {
112
+ }) : (n.parentNode && (t.appendChild(n), n.setAttribute(v, "")), {
99
113
  append() {
100
114
  t.contains(n) || t.appendChild(n);
101
115
  },
@@ -107,36 +121,36 @@ function C(n, t, e = "move") {
107
121
  }
108
122
  });
109
123
  }
110
- var v = (n, t, e) => {
124
+ var p = (n, t, e) => {
111
125
  if (!(t instanceof HTMLElement))
112
126
  throw new Error("No modal-content found");
113
127
  n.setAttribute("aria-hidden", e === "open" ? "false" : "true"), n.setAttribute("data-state", e), t.setAttribute("data-state", e);
114
- const o = r("[data-modal-overlay]", n);
115
- o instanceof HTMLElement && o.setAttribute("data-state", e);
128
+ const a = r("[data-modal-overlay]", n);
129
+ a instanceof HTMLElement && a.setAttribute("data-state", e);
116
130
  };
117
- var L = (n, t, e) => {
131
+ var I = (n, t, e) => {
118
132
  if (!n) {
119
133
  t || (document.body.style.overflowY = "auto");
120
134
  return;
121
135
  }
122
136
  u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((s) => s !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
123
137
  };
124
- var c = class {
138
+ var h = class {
125
139
  static initGlobalRegistry() {
126
140
  window.$flexillaInstances || (window.$flexillaInstances = {});
127
141
  }
128
- static register(t, e, o) {
129
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: o }), o);
142
+ static register(t, e, a) {
143
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: a }), a);
130
144
  }
131
145
  static getInstance(t, e) {
132
- var o, a;
133
- return this.initGlobalRegistry(), (a = (o = window.$flexillaInstances[t]) == null ? void 0 : o.find(
146
+ var a, o;
147
+ return this.initGlobalRegistry(), (o = (a = window.$flexillaInstances[t]) == null ? void 0 : a.find(
134
148
  (s) => s.element === e
135
- )) == null ? void 0 : a.instance;
149
+ )) == null ? void 0 : o.instance;
136
150
  }
137
151
  static removeInstance(t, e) {
138
152
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
139
- (o) => o.element !== e
153
+ (a) => a.element !== e
140
154
  ));
141
155
  }
142
156
  static setup(t) {
@@ -146,13 +160,13 @@ var c = class {
146
160
  t.setAttribute("data-component-initialized", "initialized");
147
161
  }
148
162
  };
149
- var x = (n) => {
163
+ var B = (n) => {
150
164
  var t;
151
165
  n instanceof HTMLElement && ((t = n.parentElement) == null || t.removeChild(n));
152
166
  };
153
- var T = ({ modalContent: n, overlayClassName: t }) => {
167
+ var H = ({ modalContent: n, overlayClassName: t }) => {
154
168
  const e = document.createElement("span");
155
- return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
169
+ return e.setAttribute("aria-hidden", "true"), g({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
156
170
  };
157
171
  var m = class m2 {
158
172
  /**
@@ -161,7 +175,7 @@ var m = class m2 {
161
175
  * @param options - Configuration options for the modal behavior
162
176
  * @param triggerElements - Optional trigger elements or selectors that open the modal
163
177
  */
164
- constructor(t, e = {}, o) {
178
+ constructor(t, e = {}, a) {
165
179
  i(this, "modalElement");
166
180
  i(this, "modalId");
167
181
  i(this, "modalContent");
@@ -183,7 +197,7 @@ var m = class m2 {
183
197
  i(this, "initAsOpen");
184
198
  i(this, "teleporter");
185
199
  i(this, "moveElOnInit", () => {
186
- g(() => {
200
+ x(() => {
187
201
  this.teleporter.append();
188
202
  });
189
203
  });
@@ -191,12 +205,12 @@ var m = class m2 {
191
205
  if (this.enableStackedModals)
192
206
  return;
193
207
  const e2 = u("[data-fx-modal][data-state=open]");
194
- for (const o2 of e2) {
195
- const a2 = o2.dataset.modalId;
196
- if (a2 !== t2.dataset.modalId) {
197
- o2.blur(), r("[data-modal-overlay]", o2).setAttribute("data-state", "close");
198
- const l2 = r("[data-modal-content]", o2);
199
- v(o2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
208
+ for (const a2 of e2) {
209
+ const o2 = a2.dataset.modalId;
210
+ if (o2 !== t2.dataset.modalId) {
211
+ a2.blur(), r("[data-modal-overlay]", a2).setAttribute("data-state", "close");
212
+ const l2 = r("[data-modal-content]", a2);
213
+ p(a2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${o2}:close`));
200
214
  }
201
215
  }
202
216
  });
@@ -204,11 +218,11 @@ var m = class m2 {
204
218
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
205
219
  });
206
220
  i(this, "initModal", (t2, e2) => {
207
- var h;
221
+ var c;
208
222
  if (!(t2 instanceof HTMLDialogElement))
209
223
  throw new Error("Modal Element must be a valid HTMLDialog Element");
210
- const { allowBodyScroll: o2, animateContent: a2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
211
- this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || o2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || 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 = 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 = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
224
+ const { allowBodyScroll: a2, animateContent: o2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
225
+ this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || a2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((c = t2.dataset.modalOverlay) == null ? void 0 : c.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 = o2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
212
226
  });
213
227
  i(this, "closeModalOnX", (t2) => {
214
228
  t2.preventDefault(), this.hideModal();
@@ -222,33 +236,33 @@ var m = class m2 {
222
236
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
223
237
  });
224
238
  i(this, "showModal", () => {
225
- var e2, o2, a2, s2, l2;
239
+ var e2, a2, o2, s2, l2;
226
240
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
227
- if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
241
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : H({
228
242
  modalContent: this.modalContent,
229
243
  overlayClassName: this.overlayClassName
230
244
  }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), E(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
231
245
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
232
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), v(this.modalElement, this.modalContent, "open"), p({
246
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), p(this.modalElement, this.modalContent, "open"), y({
233
247
  element: this.modalContent,
234
248
  callback: () => {
235
249
  this.modalContent.style.removeProperty("--un-modal-animation");
236
250
  }
237
251
  });
238
252
  } else
239
- v(this.modalElement, this.modalContent, "open");
240
- 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 = (o2 = this.options).onShow) == null || a2.call(o2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
253
+ p(this.modalElement, this.modalContent, "open");
254
+ 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), (o2 = (a2 = this.options).onShow) == null || o2.call(a2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
241
255
  }
242
256
  });
243
257
  i(this, "closeModal", () => {
244
- this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), L(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || x(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
258
+ this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), I(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || B(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
245
259
  });
246
260
  i(this, "closeLastAction", () => {
247
- var t2, e2, o2, a2;
248
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (o2 = this.options).onToggle) == null || a2.call(o2, { isHidden: true });
261
+ var t2, e2, a2, o2;
262
+ this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (o2 = (a2 = this.options).onToggle) == null || o2.call(a2, { isHidden: true });
249
263
  });
250
264
  i(this, "hideModal", () => {
251
- var a2, s2, l2, d2, h;
265
+ var o2, s2, l2, d2, c;
252
266
  let t2 = false;
253
267
  E(this.modalElement, "before-hide", {
254
268
  modalId: this.modalId,
@@ -256,18 +270,18 @@ var m = class m2 {
256
270
  t2 = f;
257
271
  }
258
272
  });
259
- const e2 = (l2 = (s2 = (a2 = this.options).beforeHide) == null ? void 0 : s2.call(a2)) == null ? void 0 : l2.cancelAction;
273
+ const e2 = (l2 = (s2 = (o2 = this.options).beforeHide) == null ? void 0 : s2.call(o2)) == null ? void 0 : l2.cancelAction;
260
274
  if (t2 || e2)
261
275
  return;
262
- const o2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
263
- if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), o2) {
276
+ const a2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
277
+ if ((c = this.overlayElement) == null || c.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), a2) {
264
278
  const f = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
265
279
  this.modalContent.style.setProperty("--un-modal-animation", f);
266
280
  }
267
- p({
281
+ y({
268
282
  element: this.modalContent,
269
283
  callback: () => {
270
- o2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
284
+ a2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
271
285
  }
272
286
  });
273
287
  });
@@ -277,57 +291,57 @@ var m = class m2 {
277
291
  if (this.closeButtons.length > 0)
278
292
  for (const t2 of this.closeButtons)
279
293
  t2.removeEventListener("click", this.closeModalOnX);
280
- !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), c.removeInstance("modal", this.modalElement);
294
+ !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), h.removeInstance("modal", this.modalElement);
281
295
  });
282
296
  i(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
283
297
  t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
284
298
  });
285
- const a = typeof t == "string" ? r(t) : t;
286
- if (!(a instanceof HTMLDialogElement))
299
+ const o = typeof t == "string" ? r(t) : t;
300
+ if (!(o instanceof HTMLDialogElement))
287
301
  throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
288
- this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
289
- const s = c.getInstance("modal", this.modalElement);
302
+ this.modalElement = o, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
303
+ const s = h.getInstance("modal", this.modalElement);
290
304
  if (s)
291
305
  return s;
292
306
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
293
- const l = r("[data-modal-content]", a);
307
+ const l = r("[data-modal-content]", o);
294
308
  if (!(l instanceof HTMLElement))
295
309
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
296
- c.setup(this.modalElement), this.modalContent = l;
297
- const d = a.dataset.modalId;
298
- this.modalId = `${d}`, this.teleporter = C(this.modalElement, document.body, "move"), this.initializeTriggers(o, 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")), this.moveElOnInit(), c.register("modal", this.modalElement, this), c.initialized(this.modalElement);
310
+ h.setup(this.modalElement), this.modalContent = l;
311
+ const d = o.dataset.modalId;
312
+ this.modalId = `${d}`, this.teleporter = T(this.modalElement, document.body, "move"), this.initializeTriggers(a, 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")), this.moveElOnInit(), h.register("modal", this.modalElement, this), h.initialized(this.modalElement);
299
313
  }
300
314
  initializeTriggers(t, e) {
301
315
  if (!t && e) {
302
- const a = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
303
- this.triggerButtons = a;
316
+ const o = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
317
+ this.triggerButtons = o;
304
318
  return;
305
319
  }
306
320
  if (!t)
307
321
  return;
308
- const o = Array.isArray(t) ? t : [t];
309
- this.triggerButtons = o.map((a) => {
310
- if (typeof a == "string") {
311
- const s = r(a);
322
+ const a = Array.isArray(t) ? t : [t];
323
+ this.triggerButtons = a.map((o) => {
324
+ if (typeof o == "string") {
325
+ const s = r(o);
312
326
  if (!(s instanceof HTMLElement))
313
- throw new Error(`Trigger element not found: ${a}`);
327
+ throw new Error(`Trigger element not found: ${o}`);
314
328
  return s;
315
329
  }
316
- if (!(a instanceof HTMLElement))
330
+ if (!(o instanceof HTMLElement))
317
331
  throw new Error("Invalid trigger element provided");
318
- return a;
332
+ return o;
319
333
  });
320
334
  }
321
335
  };
322
336
  i(m, "autoInit", (t = "[data-fx-modal]") => {
323
337
  const e = u(t);
324
- for (const o of e)
325
- new m(o);
338
+ for (const a of e)
339
+ new m(a);
326
340
  }), /**
327
341
  * Creates and initializes a new Modal instance
328
342
  */
329
- i(m, "init", (t, e = {}, o) => new m(t, e, o));
330
- var y = m;
343
+ i(m, "init", (t, e = {}, a) => new m(t, e, a));
344
+ var b = m;
331
345
 
332
346
  // src/index.js
333
347
  function Modal(Alpine) {
@@ -355,7 +369,7 @@ function Modal(Alpine) {
355
369
  );
356
370
  return;
357
371
  }
358
- const modalInstance = new y(el, {
372
+ const modalInstance = new b(el, {
359
373
  dispatchEventToDocument: false
360
374
  });
361
375
  if (!Alpine.store("modals")) {
package/dist/module.esm.js CHANGED
@@ -1,10 +1,10 @@
1
1
  // ../../node_modules/@flexilla/modal/dist/modal.js
2
- var w = Object.defineProperty;
3
- var b = (n, t, e) => t in n ? w(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
4
- var i = (n, t, e) => b(n, typeof t != "symbol" ? t + "" : t, e);
2
+ var M = Object.defineProperty;
3
+ var A = (n, t, e) => t in n ? M(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
4
+ var i = (n, t, e) => A(n, typeof t != "symbol" ? t + "" : t, e);
5
5
  var r = (n, t = document.body) => t.querySelector(n);
6
6
  var u = (n, t = document.body) => Array.from(t.querySelectorAll(n));
7
- var M = ({
7
+ var g = ({
8
8
  newElement: n,
9
9
  existingElement: t
10
10
  }) => {
@@ -16,14 +16,14 @@ var M = ({
16
16
  else
17
17
  throw new Error("Existing element must have a parent element.");
18
18
  };
19
- var A = ({
19
+ var C = ({
20
20
  element: n,
21
21
  callback: t,
22
22
  type: e,
23
- keysCheck: o
23
+ keysCheck: a
24
24
  }) => {
25
- const a = getComputedStyle(n), s = a.animation;
26
- if (s !== "none" && s !== "" && !o.includes(s)) {
25
+ const o = getComputedStyle(n), s = o.animation;
26
+ if (s !== "none" && s !== "" && !a.includes(s)) {
27
27
  const l = "animationend", d = () => {
28
28
  n.removeEventListener(l, d), t();
29
29
  };
@@ -31,8 +31,8 @@ var A = ({
31
31
  } else
32
32
  t();
33
33
  };
34
- var p = ({ element: n, callback: t }) => {
35
- A({
34
+ var y = ({ element: n, callback: t }) => {
35
+ C({
36
36
  element: n,
37
37
  callback: t,
38
38
  type: "animation",
@@ -40,10 +40,10 @@ var p = ({ element: n, callback: t }) => {
40
40
  });
41
41
  };
42
42
  var E = (n, t, e) => {
43
- const o = new CustomEvent(t, { detail: e });
44
- n.dispatchEvent(o);
43
+ const a = new CustomEvent(t, { detail: e });
44
+ n.dispatchEvent(a);
45
45
  };
46
- function g(n) {
46
+ function x(n) {
47
47
  const t = () => {
48
48
  document.querySelector(
49
49
  "[data-fx-component]:not([data-component-initialized])"
@@ -51,26 +51,40 @@ function g(n) {
51
51
  };
52
52
  t();
53
53
  }
54
- function C(n, t, e = "move") {
54
+ var w = "data-fx-teleport-root";
55
+ var v = "data-fx-teleported";
56
+ var L = {
57
+ append: () => {
58
+ },
59
+ remove: () => {
60
+ },
61
+ restore: () => {
62
+ }
63
+ };
64
+ function T(n, t, e = "move") {
65
+ var a;
55
66
  if (!(n instanceof HTMLElement))
56
67
  throw new Error("Source element must be an HTMLElement");
57
68
  if (!(t instanceof HTMLElement))
58
69
  throw new Error("Target element must be an HTMLElement");
59
70
  if (!["move", "detachable"].includes(e))
60
71
  throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
72
+ if ((a = n.parentElement) != null && a.closest(`[${w}]`))
73
+ return L;
74
+ n.setAttribute(w, "");
61
75
  let o = document.createComment("teleporter-placeholder");
62
- const a = n.parentNode;
63
- return a ? a.insertBefore(o, n) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (n.parentNode && t.appendChild(n), {
76
+ const s = n.parentNode;
77
+ return s && s.insertBefore(o, n), e === "move" ? (n.parentNode && (t.appendChild(n), n.setAttribute(v, "")), {
64
78
  append() {
65
- n.parentNode !== t && t.appendChild(n);
79
+ n.parentNode !== t && (t.appendChild(n), n.setAttribute(v, ""));
66
80
  },
67
81
  remove() {
68
82
  o != null && o.parentNode && n.parentNode && o.parentNode.insertBefore(n, o);
69
83
  },
70
84
  restore() {
71
- o != null && o.parentNode && n.parentNode !== a && o.parentNode.insertBefore(n, o);
85
+ o != null && o.parentNode && n.parentNode !== s && o.parentNode.insertBefore(n, o);
72
86
  }
73
- }) : (n.parentNode && t.appendChild(n), {
87
+ }) : (n.parentNode && (t.appendChild(n), n.setAttribute(v, "")), {
74
88
  append() {
75
89
  t.contains(n) || t.appendChild(n);
76
90
  },
@@ -82,36 +96,36 @@ function C(n, t, e = "move") {
82
96
  }
83
97
  });
84
98
  }
85
- var v = (n, t, e) => {
99
+ var p = (n, t, e) => {
86
100
  if (!(t instanceof HTMLElement))
87
101
  throw new Error("No modal-content found");
88
102
  n.setAttribute("aria-hidden", e === "open" ? "false" : "true"), n.setAttribute("data-state", e), t.setAttribute("data-state", e);
89
- const o = r("[data-modal-overlay]", n);
90
- o instanceof HTMLElement && o.setAttribute("data-state", e);
103
+ const a = r("[data-modal-overlay]", n);
104
+ a instanceof HTMLElement && a.setAttribute("data-state", e);
91
105
  };
92
- var L = (n, t, e) => {
106
+ var I = (n, t, e) => {
93
107
  if (!n) {
94
108
  t || (document.body.style.overflowY = "auto");
95
109
  return;
96
110
  }
97
111
  u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((s) => s !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
98
112
  };
99
- var c = class {
113
+ var h = class {
100
114
  static initGlobalRegistry() {
101
115
  window.$flexillaInstances || (window.$flexillaInstances = {});
102
116
  }
103
- static register(t, e, o) {
104
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: o }), o);
117
+ static register(t, e, a) {
118
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: a }), a);
105
119
  }
106
120
  static getInstance(t, e) {
107
- var o, a;
108
- return this.initGlobalRegistry(), (a = (o = window.$flexillaInstances[t]) == null ? void 0 : o.find(
121
+ var a, o;
122
+ return this.initGlobalRegistry(), (o = (a = window.$flexillaInstances[t]) == null ? void 0 : a.find(
109
123
  (s) => s.element === e
110
- )) == null ? void 0 : a.instance;
124
+ )) == null ? void 0 : o.instance;
111
125
  }
112
126
  static removeInstance(t, e) {
113
127
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
114
- (o) => o.element !== e
128
+ (a) => a.element !== e
115
129
  ));
116
130
  }
117
131
  static setup(t) {
@@ -121,13 +135,13 @@ var c = class {
121
135
  t.setAttribute("data-component-initialized", "initialized");
122
136
  }
123
137
  };
124
- var x = (n) => {
138
+ var B = (n) => {
125
139
  var t;
126
140
  n instanceof HTMLElement && ((t = n.parentElement) == null || t.removeChild(n));
127
141
  };
128
- var T = ({ modalContent: n, overlayClassName: t }) => {
142
+ var H = ({ modalContent: n, overlayClassName: t }) => {
129
143
  const e = document.createElement("span");
130
- return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
144
+ return e.setAttribute("aria-hidden", "true"), g({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
131
145
  };
132
146
  var m = class m2 {
133
147
  /**
@@ -136,7 +150,7 @@ var m = class m2 {
136
150
  * @param options - Configuration options for the modal behavior
137
151
  * @param triggerElements - Optional trigger elements or selectors that open the modal
138
152
  */
139
- constructor(t, e = {}, o) {
153
+ constructor(t, e = {}, a) {
140
154
  i(this, "modalElement");
141
155
  i(this, "modalId");
142
156
  i(this, "modalContent");
@@ -158,7 +172,7 @@ var m = class m2 {
158
172
  i(this, "initAsOpen");
159
173
  i(this, "teleporter");
160
174
  i(this, "moveElOnInit", () => {
161
- g(() => {
175
+ x(() => {
162
176
  this.teleporter.append();
163
177
  });
164
178
  });
@@ -166,12 +180,12 @@ var m = class m2 {
166
180
  if (this.enableStackedModals)
167
181
  return;
168
182
  const e2 = u("[data-fx-modal][data-state=open]");
169
- for (const o2 of e2) {
170
- const a2 = o2.dataset.modalId;
171
- if (a2 !== t2.dataset.modalId) {
172
- o2.blur(), r("[data-modal-overlay]", o2).setAttribute("data-state", "close");
173
- const l2 = r("[data-modal-content]", o2);
174
- v(o2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
183
+ for (const a2 of e2) {
184
+ const o2 = a2.dataset.modalId;
185
+ if (o2 !== t2.dataset.modalId) {
186
+ a2.blur(), r("[data-modal-overlay]", a2).setAttribute("data-state", "close");
187
+ const l2 = r("[data-modal-content]", a2);
188
+ p(a2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${o2}:close`));
175
189
  }
176
190
  }
177
191
  });
@@ -179,11 +193,11 @@ var m = class m2 {
179
193
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
180
194
  });
181
195
  i(this, "initModal", (t2, e2) => {
182
- var h;
196
+ var c;
183
197
  if (!(t2 instanceof HTMLDialogElement))
184
198
  throw new Error("Modal Element must be a valid HTMLDialog Element");
185
- const { allowBodyScroll: o2, animateContent: a2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
186
- this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || o2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || 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 = 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 = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
199
+ const { allowBodyScroll: a2, animateContent: o2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
200
+ this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || a2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((c = t2.dataset.modalOverlay) == null ? void 0 : c.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 = o2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
187
201
  });
188
202
  i(this, "closeModalOnX", (t2) => {
189
203
  t2.preventDefault(), this.hideModal();
@@ -197,33 +211,33 @@ var m = class m2 {
197
211
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
198
212
  });
199
213
  i(this, "showModal", () => {
200
- var e2, o2, a2, s2, l2;
214
+ var e2, a2, o2, s2, l2;
201
215
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
202
- if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
216
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : H({
203
217
  modalContent: this.modalContent,
204
218
  overlayClassName: this.overlayClassName
205
219
  }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), E(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
206
220
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
207
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), v(this.modalElement, this.modalContent, "open"), p({
221
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), p(this.modalElement, this.modalContent, "open"), y({
208
222
  element: this.modalContent,
209
223
  callback: () => {
210
224
  this.modalContent.style.removeProperty("--un-modal-animation");
211
225
  }
212
226
  });
213
227
  } else
214
- v(this.modalElement, this.modalContent, "open");
215
- 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 = (o2 = this.options).onShow) == null || a2.call(o2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
228
+ p(this.modalElement, this.modalContent, "open");
229
+ 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), (o2 = (a2 = this.options).onShow) == null || o2.call(a2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
216
230
  }
217
231
  });
218
232
  i(this, "closeModal", () => {
219
- this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), L(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || x(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
233
+ this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), I(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || B(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
220
234
  });
221
235
  i(this, "closeLastAction", () => {
222
- var t2, e2, o2, a2;
223
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (o2 = this.options).onToggle) == null || a2.call(o2, { isHidden: true });
236
+ var t2, e2, a2, o2;
237
+ this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (o2 = (a2 = this.options).onToggle) == null || o2.call(a2, { isHidden: true });
224
238
  });
225
239
  i(this, "hideModal", () => {
226
- var a2, s2, l2, d2, h;
240
+ var o2, s2, l2, d2, c;
227
241
  let t2 = false;
228
242
  E(this.modalElement, "before-hide", {
229
243
  modalId: this.modalId,
@@ -231,18 +245,18 @@ var m = class m2 {
231
245
  t2 = f;
232
246
  }
233
247
  });
234
- const e2 = (l2 = (s2 = (a2 = this.options).beforeHide) == null ? void 0 : s2.call(a2)) == null ? void 0 : l2.cancelAction;
248
+ const e2 = (l2 = (s2 = (o2 = this.options).beforeHide) == null ? void 0 : s2.call(o2)) == null ? void 0 : l2.cancelAction;
235
249
  if (t2 || e2)
236
250
  return;
237
- const o2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
238
- if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), o2) {
251
+ const a2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
252
+ if ((c = this.overlayElement) == null || c.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), a2) {
239
253
  const f = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
240
254
  this.modalContent.style.setProperty("--un-modal-animation", f);
241
255
  }
242
- p({
256
+ y({
243
257
  element: this.modalContent,
244
258
  callback: () => {
245
- o2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
259
+ a2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
246
260
  }
247
261
  });
248
262
  });
@@ -252,57 +266,57 @@ var m = class m2 {
252
266
  if (this.closeButtons.length > 0)
253
267
  for (const t2 of this.closeButtons)
254
268
  t2.removeEventListener("click", this.closeModalOnX);
255
- !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), c.removeInstance("modal", this.modalElement);
269
+ !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), h.removeInstance("modal", this.modalElement);
256
270
  });
257
271
  i(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
258
272
  t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
259
273
  });
260
- const a = typeof t == "string" ? r(t) : t;
261
- if (!(a instanceof HTMLDialogElement))
274
+ const o = typeof t == "string" ? r(t) : t;
275
+ if (!(o instanceof HTMLDialogElement))
262
276
  throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
263
- this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
264
- const s = c.getInstance("modal", this.modalElement);
277
+ this.modalElement = o, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
278
+ const s = h.getInstance("modal", this.modalElement);
265
279
  if (s)
266
280
  return s;
267
281
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
268
- const l = r("[data-modal-content]", a);
282
+ const l = r("[data-modal-content]", o);
269
283
  if (!(l instanceof HTMLElement))
270
284
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
271
- c.setup(this.modalElement), this.modalContent = l;
272
- const d = a.dataset.modalId;
273
- this.modalId = `${d}`, this.teleporter = C(this.modalElement, document.body, "move"), this.initializeTriggers(o, 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")), this.moveElOnInit(), c.register("modal", this.modalElement, this), c.initialized(this.modalElement);
285
+ h.setup(this.modalElement), this.modalContent = l;
286
+ const d = o.dataset.modalId;
287
+ this.modalId = `${d}`, this.teleporter = T(this.modalElement, document.body, "move"), this.initializeTriggers(a, 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")), this.moveElOnInit(), h.register("modal", this.modalElement, this), h.initialized(this.modalElement);
274
288
  }
275
289
  initializeTriggers(t, e) {
276
290
  if (!t && e) {
277
- const a = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
278
- this.triggerButtons = a;
291
+ const o = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
292
+ this.triggerButtons = o;
279
293
  return;
280
294
  }
281
295
  if (!t)
282
296
  return;
283
- const o = Array.isArray(t) ? t : [t];
284
- this.triggerButtons = o.map((a) => {
285
- if (typeof a == "string") {
286
- const s = r(a);
297
+ const a = Array.isArray(t) ? t : [t];
298
+ this.triggerButtons = a.map((o) => {
299
+ if (typeof o == "string") {
300
+ const s = r(o);
287
301
  if (!(s instanceof HTMLElement))
288
- throw new Error(`Trigger element not found: ${a}`);
302
+ throw new Error(`Trigger element not found: ${o}`);
289
303
  return s;
290
304
  }
291
- if (!(a instanceof HTMLElement))
305
+ if (!(o instanceof HTMLElement))
292
306
  throw new Error("Invalid trigger element provided");
293
- return a;
307
+ return o;
294
308
  });
295
309
  }
296
310
  };
297
311
  i(m, "autoInit", (t = "[data-fx-modal]") => {
298
312
  const e = u(t);
299
- for (const o of e)
300
- new m(o);
313
+ for (const a of e)
314
+ new m(a);
301
315
  }), /**
302
316
  * Creates and initializes a new Modal instance
303
317
  */
304
- i(m, "init", (t, e = {}, o) => new m(t, e, o));
305
- var y = m;
318
+ i(m, "init", (t, e = {}, a) => new m(t, e, a));
319
+ var b = m;
306
320
 
307
321
  // src/index.js
308
322
  function Modal(Alpine) {
@@ -330,7 +344,7 @@ function Modal(Alpine) {
330
344
  );
331
345
  return;
332
346
  }
333
- const modalInstance = new y(el, {
347
+ const modalInstance = new b(el, {
334
348
  dispatchEventToDocument: false
335
349
  });
336
350
  if (!Alpine.store("modals")) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flexilla/alpine-modal",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
5
5
  "type": "module",
6
6
  "private": false,
@@ -66,7 +66,7 @@
66
66
  "Dissmiss"
67
67
  ],
68
68
  "dependencies": {
69
- "@flexilla/modal": "^2.3.4"
69
+ "@flexilla/modal": "^2.3.5"
70
70
  },
71
- "gitHead": "9ac916234e8bb129724224819f3b59420b34081f"
71
+ "gitHead": "ae2c044692676906202ec6d8bb7a61a553c3bf74"
72
72
  }