@flexilla/alpine-modal 0.2.0 → 0.3.0

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 +143 -127
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +143 -127
  4. package/dist/module.esm.js +143 -127
  5. package/package.json +3 -3
package/dist/cdn.js CHANGED
@@ -1,120 +1,134 @@
1
1
  (() => {
2
2
  // ../../node_modules/@flexilla/modal/dist/modal.js
3
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));
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);
6
+ var r = (n, t = document.body) => t.querySelector(n);
7
+ var u = (n, t = document.body) => Array.from(t.querySelectorAll(n));
8
8
  var M = ({
9
- newElement: o,
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 A = ({
21
+ element: n,
22
22
  callback: t,
23
23
  type: e,
24
- keysCheck: n
24
+ keysCheck: o
25
25
  }) => {
26
- const a = getComputedStyle(o), i = a.animation;
27
- if (i !== "none" && i !== "" && !n.includes(i)) {
26
+ const a = getComputedStyle(n), s = a.animation;
27
+ if (s !== "none" && s !== "" && !o.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 p = ({ element: n, callback: t }) => {
36
+ A({
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 o = new CustomEvent(t, { detail: e });
45
+ n.dispatchEvent(o);
46
46
  };
47
- function A(o, t, e = "move") {
48
- if (!(o instanceof HTMLElement))
47
+ function g(n) {
48
+ const t = () => {
49
+ document.querySelector(
50
+ "[data-fx-component]:not([data-component-initialized])"
51
+ ) ? requestAnimationFrame(t) : n();
52
+ };
53
+ t();
54
+ }
55
+ function C(n, t, e = "move") {
56
+ if (!(n instanceof HTMLElement))
49
57
  throw new Error("Source element must be an HTMLElement");
50
58
  if (!(t instanceof HTMLElement))
51
59
  throw new Error("Target element must be an HTMLElement");
52
60
  if (!["move", "detachable"].includes(e))
53
61
  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), {
62
+ 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), {
57
65
  append() {
58
- o.parentNode !== t && t.appendChild(o);
66
+ n.parentNode !== t && t.appendChild(n);
59
67
  },
60
68
  remove() {
61
- n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
69
+ o != null && o.parentNode && n.parentNode && o.parentNode.insertBefore(n, o);
62
70
  },
63
71
  restore() {
64
- n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
72
+ o != null && o.parentNode && n.parentNode !== a && o.parentNode.insertBefore(n, o);
65
73
  }
66
- }) : (o.parentNode && t.appendChild(o), {
74
+ }) : (n.parentNode && t.appendChild(n), {
67
75
  append() {
68
- t.contains(o) || t.appendChild(o);
76
+ t.contains(n) || t.appendChild(n);
69
77
  },
70
78
  remove() {
71
- o.parentNode && o.remove();
79
+ n.parentNode && n.remove();
72
80
  },
73
81
  restore() {
74
- n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
82
+ o != null && o.parentNode && !n.parentNode && o.parentNode.insertBefore(n, o);
75
83
  }
76
84
  });
77
85
  }
78
- var E = (o, t, e) => {
86
+ var v = (n, t, e) => {
79
87
  if (!(t instanceof HTMLElement))
80
88
  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);
89
+ 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);
84
92
  };
85
- var C = (o, t, e) => {
86
- if (!o) {
93
+ var L = (n, t, e) => {
94
+ if (!n) {
87
95
  t || (document.body.style.overflowY = "auto");
88
96
  return;
89
97
  }
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");
98
+ 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
99
  };
92
- var v = class {
100
+ var c = class {
93
101
  static initGlobalRegistry() {
94
102
  window.$flexillaInstances || (window.$flexillaInstances = {});
95
103
  }
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);
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);
98
106
  }
99
107
  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
108
+ var o, a;
109
+ return this.initGlobalRegistry(), (a = (o = window.$flexillaInstances[t]) == null ? void 0 : o.find(
110
+ (s) => s.element === e
103
111
  )) == null ? void 0 : a.instance;
104
112
  }
105
113
  static removeInstance(t, e) {
106
114
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
107
- (n) => n.element !== e
115
+ (o) => o.element !== e
108
116
  ));
109
117
  }
118
+ static setup(t) {
119
+ t.setAttribute("data-fx-component", "fx");
120
+ }
121
+ static initialized(t) {
122
+ t.setAttribute("data-component-initialized", "initialized");
123
+ }
110
124
  };
111
- var L = (o) => {
125
+ var x = (n) => {
112
126
  var t;
113
- o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
127
+ n instanceof HTMLElement && ((t = n.parentElement) == null || t.removeChild(n));
114
128
  };
115
- var T = ({ modalContent: o, overlayClassName: t }) => {
129
+ var T = ({ modalContent: n, overlayClassName: t }) => {
116
130
  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;
131
+ return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
118
132
  };
119
133
  var m = class m2 {
120
134
  /**
@@ -123,57 +137,59 @@
123
137
  * @param options - Configuration options for the modal behavior
124
138
  * @param triggerElements - Optional trigger elements or selectors that open the modal
125
139
  */
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();
140
+ constructor(t, e = {}, o) {
141
+ i(this, "modalElement");
142
+ i(this, "modalId");
143
+ i(this, "modalContent");
144
+ i(this, "triggerButtons", []);
145
+ i(this, "overlayElement");
146
+ i(this, "dispatchEventToDocument");
147
+ i(this, "options");
148
+ i(this, "state");
149
+ i(this, "animationEnter");
150
+ i(this, "animationExit");
151
+ i(this, "animateContent");
152
+ i(this, "hasDefaultOverlay");
153
+ i(this, "enableStackedModals");
154
+ i(this, "preventCloseModal");
155
+ i(this, "isKeyDownEventRegistered");
156
+ i(this, "closeButtons");
157
+ i(this, "overlayClassName");
158
+ i(this, "allowBodyScroll");
159
+ i(this, "initAsOpen");
160
+ i(this, "teleporter");
161
+ i(this, "moveElOnInit", () => {
162
+ g(() => {
163
+ this.teleporter.append();
164
+ });
149
165
  });
150
- s(this, "closeAll", (t2) => {
166
+ i(this, "closeAll", (t2) => {
151
167
  if (this.enableStackedModals)
152
168
  return;
153
- const e2 = c("[data-fx-modal][data-state=open]");
154
- for (const n2 of e2) {
155
- const a2 = n2.dataset.modalId;
169
+ const e2 = u("[data-fx-modal][data-state=open]");
170
+ for (const o2 of e2) {
171
+ const a2 = o2.dataset.modalId;
156
172
  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`));
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`));
160
176
  }
161
177
  }
162
178
  });
163
- s(this, "closeModalEsc", (t2) => {
179
+ i(this, "closeModalEsc", (t2) => {
164
180
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
165
181
  });
166
- s(this, "initModal", (t2, e2) => {
182
+ i(this, "initModal", (t2, e2) => {
167
183
  var h;
168
184
  if (!(t2 instanceof HTMLDialogElement))
169
185
  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();
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();
172
188
  });
173
- s(this, "closeModalOnX", (t2) => {
189
+ i(this, "closeModalOnX", (t2) => {
174
190
  t2.preventDefault(), this.hideModal();
175
191
  });
176
- s(this, "addEvents", () => {
192
+ i(this, "addEvents", () => {
177
193
  for (const t2 of this.triggerButtons)
178
194
  t2.addEventListener("click", this.showModal);
179
195
  if (this.closeButtons.length > 0)
@@ -181,97 +197,97 @@
181
197
  t2.addEventListener("click", this.closeModalOnX);
182
198
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
183
199
  });
184
- s(this, "showModal", () => {
185
- var e2, n2, a2, i2, l2;
200
+ i(this, "showModal", () => {
201
+ var e2, o2, a2, s2, l2;
186
202
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
187
203
  if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
188
204
  modalContent: this.modalContent,
189
205
  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 !== "") {
206
+ }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), E(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
191
207
  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({
208
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), v(this.modalElement, this.modalContent, "open"), p({
193
209
  element: this.modalContent,
194
210
  callback: () => {
195
211
  this.modalContent.style.removeProperty("--un-modal-animation");
196
212
  }
197
213
  });
198
214
  } 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();
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();
201
217
  }
202
218
  });
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 });
219
+ 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 });
205
221
  });
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 });
222
+ 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 });
209
225
  });
210
- s(this, "hideModal", () => {
211
- var a2, i2, l2, d2, h;
226
+ i(this, "hideModal", () => {
227
+ var a2, s2, l2, d2, h;
212
228
  let t2 = false;
213
- f(this.modalElement, "before-hide", {
229
+ E(this.modalElement, "before-hide", {
214
230
  modalId: this.modalId,
215
- setExitAction: (u) => {
216
- t2 = u;
231
+ setExitAction: (f) => {
232
+ t2 = f;
217
233
  }
218
234
  });
219
- const e2 = (l2 = (i2 = (a2 = this.options).beforeHide) == null ? void 0 : i2.call(a2)) == null ? void 0 : l2.cancelAction;
235
+ const e2 = (l2 = (s2 = (a2 = this.options).beforeHide) == null ? void 0 : s2.call(a2)) == null ? void 0 : l2.cancelAction;
220
236
  if (t2 || e2)
221
237
  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);
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) {
240
+ const f = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
241
+ this.modalContent.style.setProperty("--un-modal-animation", f);
226
242
  }
227
243
  p({
228
244
  element: this.modalContent,
229
245
  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");
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");
231
247
  }
232
248
  });
233
249
  });
234
- s(this, "cleanup", () => {
250
+ i(this, "cleanup", () => {
235
251
  for (const t2 of this.triggerButtons)
236
252
  t2.removeEventListener("click", this.showModal);
237
253
  if (this.closeButtons.length > 0)
238
254
  for (const t2 of this.closeButtons)
239
255
  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);
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);
241
257
  });
242
- s(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
258
+ i(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
243
259
  t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
244
260
  });
245
261
  const a = typeof t == "string" ? r(t) : t;
246
262
  if (!(a instanceof HTMLDialogElement))
247
263
  throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
248
264
  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;
265
+ const s = c.getInstance("modal", this.modalElement);
266
+ if (s)
267
+ return s;
252
268
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
253
269
  const l = r("[data-modal-content]", a);
254
270
  if (!(l instanceof HTMLElement))
255
271
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
256
- this.modalContent = l;
272
+ c.setup(this.modalElement), this.modalContent = l;
257
273
  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);
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);
259
275
  }
260
276
  initializeTriggers(t, e) {
261
277
  if (!t && e) {
262
- const a = c(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
278
+ const a = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
263
279
  this.triggerButtons = a;
264
280
  return;
265
281
  }
266
282
  if (!t)
267
283
  return;
268
- const n = Array.isArray(t) ? t : [t];
269
- this.triggerButtons = n.map((a) => {
284
+ const o = Array.isArray(t) ? t : [t];
285
+ this.triggerButtons = o.map((a) => {
270
286
  if (typeof a == "string") {
271
- const i = r(a);
272
- if (!(i instanceof HTMLElement))
287
+ const s = r(a);
288
+ if (!(s instanceof HTMLElement))
273
289
  throw new Error(`Trigger element not found: ${a}`);
274
- return i;
290
+ return s;
275
291
  }
276
292
  if (!(a instanceof HTMLElement))
277
293
  throw new Error("Invalid trigger element provided");
@@ -279,14 +295,14 @@
279
295
  });
280
296
  }
281
297
  };
282
- s(m, "autoInit", (t = "[data-fx-modal]") => {
283
- const e = c(t);
284
- for (const n of e)
285
- new m(n);
298
+ i(m, "autoInit", (t = "[data-fx-modal]") => {
299
+ const e = u(t);
300
+ for (const o of e)
301
+ new m(o);
286
302
  }), /**
287
303
  * Creates and initializes a new Modal instance
288
304
  */
289
- s(m, "init", (t, e = {}, n) => new m(t, e, n));
305
+ i(m, "init", (t, e = {}, o) => new m(t, e, o));
290
306
  var y = m;
291
307
 
292
308
  // src/index.js
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 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)});})();