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