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