@flexilla/alpine-modal 0.0.3 → 0.1.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 (8) hide show
  1. package/README.md +68 -4
  2. package/dist/cdn.js +136 -114
  3. package/dist/cdn.min.js +1 -1
  4. package/dist/module.cjs.js +136 -114
  5. package/dist/module.esm.js +136 -114
  6. package/package.json +5 -3
  7. package/src/index.d.ts +7 -0
  8. package/src/index.js +9 -15
package/README.md CHANGED
@@ -1,9 +1,17 @@
1
1
  <h1 align="center">Alpine Modal</h1>
2
2
 
3
3
  <p align="center">
4
- A port of Flexilla Modal for <a href="https://alpinejs.dev">Alpine.js</a>
4
+ A powerful and flexible modal dialog component for <a href="https://alpinejs.dev">Alpine.js</a>, powered by Flexilla
5
5
  </p>
6
6
 
7
+ ## Overview
8
+
9
+ Alpine Modal is a lightweight wrapper around Flexilla's modal component, providing seamless integration with Alpine.js. It offers:
10
+
11
+ - 🎯 Simple integration with Alpine.js directives
12
+ - 🎨 Highly customizable styling and animations
13
+ - 🔒 Accessibility features built-in
14
+ - 🛠 Event-driven API for programmatic control
7
15
 
8
16
  ## Installation
9
17
 
@@ -12,7 +20,7 @@
12
20
  Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
13
21
 
14
22
  ```html
15
-
23
+ <script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-modal@latest/dist/cdn.min.js" defer></script>
16
24
  ```
17
25
 
18
26
  ### NPM
@@ -32,12 +40,68 @@ Alpine.plugin(PluginModal);
32
40
  Alpine.start();
33
41
  ```
34
42
 
35
- ## Usage
43
+ ## Usage
36
44
 
37
- ```html
45
+ ### Basic Example
38
46
 
47
+ ```html
48
+ <button data-modal-target="modal-default"
49
+ class="bg-neutral-800 text-white px-4 py-2 rounded-lg text-sm w-max">
50
+ Open Modal
51
+ </button>
52
+
53
+ <dialog x-data data-fx-modal x-modal data-modal-id="modal-default"
54
+ data-modal-overlay="inset-0 fixed bg-gray-800/20 ease-linear duration-300 transition-all data-[state=close]:opacity-0 data-[state=close]:invisible"
55
+ class="inset-0 w-screen h-screen justify-center items-start hidden data-[state=open]:flex p-4 fixed top-0 left-0 bg-transparent">
56
+ <div data-modal-content
57
+ class="bg-white rounded-lg overflow-hidden w-full max-w-2xl flex flex-col ease-linear transition-all duration-300 absolute top-4 z-[500]">
58
+ <div class="border-b border-b-gray-100 dark:border-b-gray-900 p-4 flex justify-between items-center">
59
+ <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
60
+ Modal Title
61
+ </h2>
62
+ <button aria-label="close modal" data-close-modal
63
+ class="text-gray-700 dark:text-gray-300 rounded-full p-2 border border-gray-200 dark:border-gray-800 duration-200 hover:bg-gray-100 dark:hover:bg-gray-900">
64
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
65
+ <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
66
+ </svg>
67
+ </button>
68
+ </div>
69
+ <div class="px-4 py-6">
70
+ <!-- Your modal content here -->
71
+ </div>
72
+ <div class="border-t border-t-gray-100 dark:border-t-gray-900 p-4 flex items-center gap-x-3">
73
+ <button class="rounded px-4 h-8 flex items-center bg-blue-600 text-white duration-300 hover:bg-opacity-80">
74
+ Save
75
+ </button>
76
+ <button data-close-modal
77
+ class="rounded px-4 h-8 flex items-center border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300 duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
78
+ Cancel
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </dialog>
39
83
  ```
40
84
 
85
+ ### Key Features
86
+
87
+ 1. **Required Attributes**:
88
+ - `x-modal`: The main directive
89
+ - `data-modal-id`: Unique identifier for the modal
90
+ - `data-modal-content`: Marks the modal content container
91
+ - `data-close-modal`: Marks close trigger elements
92
+
93
+ 2. **Styling**:
94
+ - Uses data attributes for state-based styling
95
+ - Fully customizable with utility classes
96
+ - Smooth transitions and animations
97
+
98
+ 3. **Accessibility**:
99
+ - Uses native `<dialog>` element
100
+ - Proper ARIA attributes
101
+ - Keyboard navigation support
102
+
103
+ For complete documentation and advanced customization options, visit the [Flexilla Modal documentation](https://flexilla-docs.vercel.app/docs/components/modal).
104
+
41
105
  ## License
42
106
 
43
107
  Copyright (c) 2025 Johnkat MJ and contributors.
package/dist/cdn.js CHANGED
@@ -1,11 +1,11 @@
1
1
  (() => {
2
2
  // ../../node_modules/@flexilla/modal/dist/modal.js
3
- var C = Object.defineProperty;
4
- var x = (o, t, e) => t in o ? C(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
5
- var a = (o, t, e) => x(o, typeof t != "symbol" ? t + "" : t, e);
3
+ var p = Object.defineProperty;
4
+ var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
5
+ var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
6
6
  var r = (o, t = document.body) => t.querySelector(o);
7
- var u = (o, t = document.body) => Array.from(t.querySelectorAll(o));
8
- var I = ({
7
+ var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
8
+ var M = ({
9
9
  newElement: o,
10
10
  existingElement: t
11
11
  }) => {
@@ -17,13 +17,13 @@
17
17
  else
18
18
  throw new Error("Existing element must have a parent element.");
19
19
  };
20
- var L = ({
20
+ var g = ({
21
21
  element: o,
22
22
  callback: t,
23
23
  type: e,
24
24
  keysCheck: n
25
25
  }) => {
26
- const s = getComputedStyle(o), i = s.animation;
26
+ const a = getComputedStyle(o), i = a.animation;
27
27
  if (i !== "none" && i !== "" && !n.includes(i)) {
28
28
  const l = "animationend", d = () => {
29
29
  o.removeEventListener(l, d), t();
@@ -32,33 +32,33 @@
32
32
  } else
33
33
  t();
34
34
  };
35
- var g = ({ element: o, callback: t }) => {
36
- L({
35
+ var y = ({ element: o, callback: t }) => {
36
+ g({
37
37
  element: o,
38
38
  callback: t,
39
39
  type: "animation",
40
40
  keysCheck: ["none 0s ease 0s 1 normal none running"]
41
41
  });
42
42
  };
43
- var v = (o, t, e) => {
43
+ var f = (o, t, e) => {
44
44
  const n = new CustomEvent(t, { detail: e });
45
45
  o.dispatchEvent(n);
46
46
  };
47
- var f = (o, t, e) => {
47
+ var E = (o, t, e) => {
48
48
  if (!(t instanceof HTMLElement))
49
49
  throw new Error("No modal-content found");
50
50
  o.setAttribute("aria-hidden", e === "open" ? "false" : "true"), o.setAttribute("data-state", e), t.setAttribute("data-state", e);
51
51
  const n = r("[data-modal-overlay]", o);
52
52
  n instanceof HTMLElement && n.setAttribute("data-state", e);
53
53
  };
54
- var B = (o, t, e) => {
54
+ var A = (o, t, e) => {
55
55
  if (!o) {
56
56
  t || (document.body.style.overflowY = "auto");
57
57
  return;
58
58
  }
59
- u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((i) => i !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
59
+ c("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((i) => i !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
60
60
  };
61
- var E = class {
61
+ var v = class {
62
62
  static initGlobalRegistry() {
63
63
  window.$flexillaInstances || (window.$flexillaInstances = {});
64
64
  }
@@ -66,10 +66,10 @@
66
66
  return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
67
67
  }
68
68
  static getInstance(t, e) {
69
- var n, s;
70
- return this.initGlobalRegistry(), (s = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
69
+ var n, a;
70
+ return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
71
71
  (i) => i.element === e
72
- )) == null ? void 0 : s.instance;
72
+ )) == null ? void 0 : a.instance;
73
73
  }
74
74
  static removeInstance(t, e) {
75
75
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
@@ -77,154 +77,182 @@
77
77
  ));
78
78
  }
79
79
  };
80
- var k = (o) => {
80
+ var C = (o) => {
81
81
  var t;
82
82
  o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
83
83
  };
84
- var T = ({ modalContent: o, overlayClassName: t }) => {
84
+ var x = ({ modalContent: o, overlayClassName: t }) => {
85
85
  const e = document.createElement("span");
86
- return e.setAttribute("aria-hidden", "true"), I({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
86
+ return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
87
87
  };
88
- var h = class h2 {
88
+ var m = class m2 {
89
89
  /**
90
90
  * Creates a new Modal instance
91
91
  * @param modal - The modal element or selector string to initialize
92
92
  * @param options - Configuration options for the modal behavior
93
- * @param triggerElement - Optional trigger element or selector that opens the modal
93
+ * @param triggerElements - Optional trigger elements or selectors that open the modal
94
94
  */
95
95
  constructor(t, e = {}, n) {
96
- a(this, "modalElement");
97
- a(this, "modalId");
98
- a(this, "modalContent");
99
- a(this, "triggerButton");
100
- a(this, "overlayElement");
101
- a(this, "dispatchEventToDocument");
102
- a(this, "options");
103
- a(this, "state");
104
- a(this, "animationEnter");
105
- a(this, "animationExit");
106
- a(this, "animateContent");
107
- a(this, "hasDefaultOverlay");
108
- a(this, "enableStackedModals");
109
- a(this, "preventCloseModal");
110
- a(this, "isKeyDownEventRegistered");
111
- a(this, "closeButtons");
112
- a(this, "overlayClassName");
113
- a(this, "allowBodyScroll");
114
- a(this, "initAsOpen");
115
- a(this, "closeAll", (t2) => {
96
+ s(this, "modalElement");
97
+ s(this, "modalId");
98
+ s(this, "modalContent");
99
+ s(this, "triggerButtons", []);
100
+ s(this, "overlayElement");
101
+ s(this, "dispatchEventToDocument");
102
+ s(this, "options");
103
+ s(this, "state");
104
+ s(this, "animationEnter");
105
+ s(this, "animationExit");
106
+ s(this, "animateContent");
107
+ s(this, "hasDefaultOverlay");
108
+ s(this, "enableStackedModals");
109
+ s(this, "preventCloseModal");
110
+ s(this, "isKeyDownEventRegistered");
111
+ s(this, "closeButtons");
112
+ s(this, "overlayClassName");
113
+ s(this, "allowBodyScroll");
114
+ s(this, "initAsOpen");
115
+ s(this, "closeAll", (t2) => {
116
116
  if (this.enableStackedModals)
117
117
  return;
118
- const e2 = u("[data-fx-modal][data-state=open]");
118
+ const e2 = c("[data-fx-modal][data-state=open]");
119
119
  for (const n2 of e2) {
120
- const s2 = n2.dataset.modalId;
121
- if (s2 !== t2.dataset.modalId) {
120
+ const a2 = n2.dataset.modalId;
121
+ if (a2 !== t2.dataset.modalId) {
122
122
  n2.blur(), r("[data-modal-overlay]", n2).setAttribute("data-state", "close");
123
123
  const l2 = r("[data-modal-content]", n2);
124
- f(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${s2}:close`));
124
+ E(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
125
125
  }
126
126
  }
127
127
  });
128
- a(this, "closeModalEsc", (t2) => {
128
+ s(this, "closeModalEsc", (t2) => {
129
129
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
130
130
  });
131
- a(this, "initModal", (t2, e2) => {
132
- var m2;
133
- if (!(t2 instanceof HTMLElement))
134
- throw new Error("Modal Element must be a valid element");
135
- const { allowBodyScroll: n2, animateContent: s2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
136
- this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || n2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || i2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((m2 = t2.dataset.modalOverlay) == null ? void 0 : m2.split(" ")) || (l2 == null ? void 0 : l2.split(" ")) || "", this.isKeyDownEventRegistered = false, t2.setAttribute("data-allow-body-scroll", `${this.allowBodyScroll}`), this.closeButtons = u("[data-close-modal]", t2), this.hasDefaultOverlay = false, r("[data-modal-overlay]", t2) instanceof HTMLElement && (this.overlayElement = r("[data-modal-overlay]", t2), this.overlayElement.setAttribute("data-overlay-nature", "default"), this.hasDefaultOverlay = true), this.animateContent = s2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.modalContent.setAttribute("data-state", "close");
131
+ s(this, "initModal", (t2, e2) => {
132
+ var h;
133
+ if (!(t2 instanceof HTMLDialogElement))
134
+ throw new Error("Modal Element must be a valid HTMLDialog Element");
135
+ const { allowBodyScroll: n2, animateContent: a2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
136
+ this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || n2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || i2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((h = t2.dataset.modalOverlay) == null ? void 0 : h.split(" ")) || (l2 == null ? void 0 : l2.split(" ")) || "", this.isKeyDownEventRegistered = false, t2.setAttribute("data-allow-body-scroll", `${this.allowBodyScroll}`), this.closeButtons = c("[data-close-modal]", t2), this.hasDefaultOverlay = false, r("[data-modal-overlay]", t2) instanceof HTMLElement && (this.overlayElement = r("[data-modal-overlay]", t2), this.overlayElement.setAttribute("data-overlay-nature", "default"), this.hasDefaultOverlay = true), this.animateContent = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
137
137
  });
138
- a(this, "closeModalOnX", (t2) => {
138
+ s(this, "closeModalOnX", (t2) => {
139
139
  t2.preventDefault(), this.hideModal();
140
140
  });
141
- a(this, "addEvents", () => {
142
- if (this.triggerButton instanceof HTMLElement && this.triggerButton.addEventListener("click", this.showModal), this.closeButtons.length > 0)
141
+ s(this, "addEvents", () => {
142
+ for (const t2 of this.triggerButtons)
143
+ t2.addEventListener("click", this.showModal);
144
+ if (this.closeButtons.length > 0)
143
145
  for (const t2 of this.closeButtons)
144
146
  t2.addEventListener("click", this.closeModalOnX);
145
147
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
146
148
  });
147
- a(this, "showModal", () => {
148
- var e2, n2, s2, i2, l2;
149
+ s(this, "showModal", () => {
150
+ var e2, n2, a2, i2, l2;
149
151
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
150
- if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
152
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
151
153
  modalContent: this.modalContent,
152
154
  overlayClassName: this.overlayClassName
153
- }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), v(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
155
+ }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
154
156
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
155
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), f(this.modalElement, this.modalContent, "open"), g({
157
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
156
158
  element: this.modalContent,
157
159
  callback: () => {
158
160
  this.modalContent.style.removeProperty("--un-modal-animation");
159
161
  }
160
162
  });
161
163
  } else
162
- f(this.modalElement, this.modalContent, "open");
163
- this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalElement.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (s2 = (n2 = this.options).onShow) == null || s2.call(n2), (l2 = (i2 = this.options).onToggle) == null || l2.call(i2, { isHidden: false });
164
+ E(this.modalElement, this.modalContent, "open");
165
+ this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalContent.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (a2 = (n2 = this.options).onShow) == null || a2.call(n2), (l2 = (i2 = this.options).onToggle) == null || l2.call(i2, { isHidden: false }), this.modalElement.showModal();
164
166
  }
165
167
  });
166
- a(this, "hideModal", () => {
167
- var l2, d2, m2, y, w;
168
+ s(this, "closeModal", () => {
169
+ this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), A(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || C(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
170
+ });
171
+ s(this, "closeLastAction", () => {
172
+ var t2, e2, n2, a2;
173
+ this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (n2 = this.options).onToggle) == null || a2.call(n2, { isHidden: true });
174
+ });
175
+ s(this, "hideModal", () => {
176
+ var a2, i2, l2, d2, h;
168
177
  let t2 = false;
169
- v(this.modalElement, "before-hide", {
178
+ f(this.modalElement, "before-hide", {
170
179
  modalId: this.modalId,
171
- setExitAction: (c) => {
172
- t2 = c;
180
+ setExitAction: (u) => {
181
+ t2 = u;
173
182
  }
174
183
  });
175
- const e2 = (m2 = (d2 = (l2 = this.options).beforeHide) == null ? void 0 : d2.call(l2)) == null ? void 0 : m2.cancelAction;
184
+ const e2 = (l2 = (i2 = (a2 = this.options).beforeHide) == null ? void 0 : i2.call(a2)) == null ? void 0 : l2.cancelAction;
176
185
  if (t2 || e2)
177
186
  return;
178
- const n2 = () => {
179
- f(this.modalElement, this.modalContent, "close"), B(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || k(this.overlayElement), v(this.modalElement, "modal-close", { modalId: this.modalElement.id });
180
- }, s2 = () => {
181
- var c, p, b, M;
182
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (p = (c = this.options).onHide) == null || p.call(c), (M = (b = this.options).onToggle) == null || M.call(b, { isHidden: true });
183
- }, i2 = ((y = this.animateContent) == null ? void 0 : y.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
184
- if ((w = this.overlayElement) == null || w.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), i2) {
185
- const c = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
186
- this.modalContent.style.setProperty("--un-modal-animation", c);
187
+ const n2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
188
+ if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), n2) {
189
+ const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
190
+ this.modalContent.style.setProperty("--un-modal-animation", u);
187
191
  }
188
- g({
192
+ y({
189
193
  element: this.modalContent,
190
194
  callback: () => {
191
- i2 && this.modalContent.style.removeProperty("--un-modal-animation"), n2(), s2();
195
+ n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
192
196
  }
193
197
  });
194
198
  });
195
- a(this, "cleanup", () => {
196
- if (this.triggerButton instanceof HTMLElement && this.triggerButton.removeEventListener("click", this.showModal), this.closeButtons.length > 0)
199
+ s(this, "cleanup", () => {
200
+ for (const t2 of this.triggerButtons)
201
+ t2.removeEventListener("click", this.showModal);
202
+ if (this.closeButtons.length > 0)
197
203
  for (const t2 of this.closeButtons)
198
204
  t2.removeEventListener("click", this.closeModalOnX);
199
- !this.preventCloseModal && this.overlayElement instanceof HTMLElement && this.overlayElement.removeEventListener("click", this.hideModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:close`, this.hideModal), E.removeInstance("modal", this.modalElement);
205
+ !this.preventCloseModal && this.overlayElement instanceof HTMLElement && this.overlayElement.removeEventListener("click", this.hideModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:close`, this.hideModal), v.removeInstance("modal", this.modalElement);
206
+ });
207
+ s(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
208
+ t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
200
209
  });
201
- const s = typeof t == "string" ? r(t) : t;
202
- if (!(s instanceof HTMLElement))
203
- throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
204
- this.modalElement = s, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
205
- const i = E.getInstance("modal", this.modalElement);
210
+ const a = typeof t == "string" ? r(t) : t;
211
+ if (!(a instanceof HTMLDialogElement))
212
+ throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
213
+ this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
214
+ const i = v.getInstance("modal", this.modalElement);
206
215
  if (i)
207
216
  return i;
208
217
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
209
- const l = r("[data-modal-content]", s);
218
+ const l = r("[data-modal-content]", a);
210
219
  if (!(l instanceof HTMLElement))
211
220
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
212
221
  this.modalContent = l;
213
- const d = s.dataset.modalId;
214
- this.modalId = `${d}`;
215
- const m = (typeof n == "string" ? r(n) : n) || r(`[data-modal-target='${d}']`);
216
- this.triggerButton = m, this.initModal(this.modalElement, this.options), this.addEvents(), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : this.initAsOpen = false, this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, E.register("modal", this.modalElement, this);
222
+ const d = a.dataset.modalId;
223
+ this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
224
+ }
225
+ initializeTriggers(t, e) {
226
+ if (!t && e) {
227
+ const a = c(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
228
+ this.triggerButtons = a;
229
+ return;
230
+ }
231
+ if (!t)
232
+ return;
233
+ const n = Array.isArray(t) ? t : [t];
234
+ this.triggerButtons = n.map((a) => {
235
+ if (typeof a == "string") {
236
+ const i = r(a);
237
+ if (!(i instanceof HTMLElement))
238
+ throw new Error(`Trigger element not found: ${a}`);
239
+ return i;
240
+ }
241
+ if (!(a instanceof HTMLElement))
242
+ throw new Error("Invalid trigger element provided");
243
+ return a;
244
+ });
217
245
  }
218
246
  };
219
- a(h, "autoInit", (t = "[data-fx-modal]") => {
220
- const e = u(t);
247
+ s(m, "autoInit", (t = "[data-fx-modal]") => {
248
+ const e = c(t);
221
249
  for (const n of e)
222
- new h(n);
250
+ new m(n);
223
251
  }), /**
224
252
  * Creates and initializes a new Modal instance
225
253
  */
226
- a(h, "init", (t, e = {}, n) => new h(t, e, n));
227
- var A = h;
254
+ s(m, "init", (t, e = {}, n) => new m(t, e, n));
255
+ var w = m;
228
256
 
229
257
  // src/index.js
230
258
  function Modal(Alpine) {
@@ -237,6 +265,13 @@
237
265
  );
238
266
  return;
239
267
  }
268
+ if (!(el instanceof HTMLDialogElement)) {
269
+ console.error(
270
+ "\u274C x-modal must be used only on an HTMLDialogElement:",
271
+ el
272
+ );
273
+ return;
274
+ }
240
275
  const content = el.querySelector("[data-modal-content]");
241
276
  if (!content) {
242
277
  console.error(
@@ -245,33 +280,20 @@
245
280
  );
246
281
  return;
247
282
  }
248
- const trigger = document.querySelector(
249
- `[data-modal-trigger][data-modal-id="${modalId}"]`
250
- );
251
- const modalInstance = new A(el, {
283
+ const modalInstance = new w(el, {
252
284
  dispatchEventToDocument: false
253
285
  });
254
286
  if (!Alpine.store("modals")) {
255
287
  Alpine.store("modals", {});
256
288
  }
257
289
  Alpine.store("modals")[modalId] = modalInstance;
258
- const showModal = () => {
259
- modalInstance.showModal();
260
- };
261
- const hideModal = () => {
262
- modalInstance.hideModal();
263
- };
290
+ const showModal = () => modalInstance.showModal();
291
+ const hideModal = () => modalInstance.hideModal();
264
292
  document.addEventListener(`modal:${modalId}:open`, showModal);
265
293
  document.addEventListener(`modal:${modalId}:close`, hideModal);
266
- if (trigger instanceof HTMLElement) {
267
- trigger.addEventListener("click", showModal);
268
- }
269
294
  cleanup(() => {
270
295
  modalInstance.cleanup();
271
296
  delete Alpine.store("modals")[modalId];
272
- if (trigger instanceof HTMLElement) {
273
- trigger.removeEventListener("click", showModal);
274
- }
275
297
  document.removeEventListener(`modal:${modalId}:open`, showModal);
276
298
  document.removeEventListener(`modal:${modalId}:close`, hideModal);
277
299
  });
package/dist/cdn.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{var H=Object.defineProperty,S=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,s=(e,t,n)=>S(e,typeof t!="symbol"?t+"":t,n),v=(e,t=document.body)=>t.querySelector(e),g=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),O=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=t.parentElement;if(n)n.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},R=({element:e,callback:t,type:n,keysCheck:o})=>{let d=getComputedStyle(e),i=d.animation;if(i!=="none"&&i!==""&&!o.includes(i)){let r="animationend",m=()=>{e.removeEventListener(r,m),t()};e.addEventListener(r,m,{once:!0})}else t()},T=({element:e,callback:t})=>{R({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},L=(e,t,n)=>{let o=new CustomEvent(t,{detail:n});e.dispatchEvent(o)},b=(e,t,n)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",n==="open"?"false":"true"),e.setAttribute("data-state",n),t.setAttribute("data-state",n);let o=v("[data-modal-overlay]",e);o instanceof HTMLElement&&o.setAttribute("data-state",n)},N=(e,t,n)=>{if(!e){t||(document.body.style.overflowY="auto");return}g("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(o=>o!==n).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,n,o){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,n)||(window.$flexillaInstances[t].push({element:n,instance:o}),o)}static getInstance(t,n){var o,d;return this.initGlobalRegistry(),(d=(o=window.$flexillaInstances[t])==null?void 0:o.find(i=>i.element===n))==null?void 0:d.instance}static removeInstance(t,n){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(o=>o.element!==n))}},P=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},q=({modalContent:e,overlayClassName:t})=>{let n=document.createElement("span");return n.setAttribute("aria-hidden","true"),O({newElement:n,existingElement:e}),n.classList.add(...t),n.setAttribute("data-modal-overlay",""),n},y=class{constructor(t,n={},o){s(this,"modalElement"),s(this,"modalId"),s(this,"modalContent"),s(this,"triggerButton"),s(this,"overlayElement"),s(this,"dispatchEventToDocument"),s(this,"options"),s(this,"state"),s(this,"animationEnter"),s(this,"animationExit"),s(this,"animateContent"),s(this,"hasDefaultOverlay"),s(this,"enableStackedModals"),s(this,"preventCloseModal"),s(this,"isKeyDownEventRegistered"),s(this,"closeButtons"),s(this,"overlayClassName"),s(this,"allowBodyScroll"),s(this,"initAsOpen"),s(this,"closeAll",a=>{if(this.enableStackedModals)return;let h=g("[data-fx-modal][data-state=open]");for(let l of h){let c=l.dataset.modalId;if(c!==a.dataset.modalId){l.blur(),v("[data-modal-overlay]",l).setAttribute("data-state","close");let u=v("[data-modal-content]",l);b(l,u,"close"),document.dispatchEvent(new CustomEvent(`modal:${c}:close`))}}}),s(this,"closeModalEsc",a=>{a.key==="Escape"&&(a.preventDefault(),this.preventCloseModal||this.hideModal())}),s(this,"initModal",(a,h)=>{var l;if(!(a instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{allowBodyScroll:c,animateContent:u,preventCloseModal:E,overlayClass:M,enableStackedModals:C}=h;this.allowBodyScroll=a.hasAttribute("data-allow-body-scroll")&&a.getAttribute("data-allow-body-scroll")!=="false"||c||!1,this.preventCloseModal=a.hasAttribute("data-prevent-close-modal")&&a.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=a.hasAttribute("data-enable-stacked")&&a.getAttribute("data-enable-stacked")!=="false"||C||!1,this.overlayClassName=((l=a.dataset.modalOverlay)==null?void 0:l.split(" "))||M?.split(" ")||"",this.isKeyDownEventRegistered=!1,a.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=g("[data-close-modal]",a),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",a)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",a),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=u,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.modalContent.setAttribute("data-state","close")}),s(this,"closeModalOnX",a=>{a.preventDefault(),this.hideModal()}),s(this,"addEvents",()=>{if(this.triggerButton instanceof HTMLElement&&this.triggerButton.addEventListener("click",this.showModal),this.closeButtons.length>0)for(let a of this.closeButtons)a.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),s(this,"showModal",()=>{var a,h,l,c,u;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:q({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(a=this.overlayElement)==null||a.setAttribute("data-state","open"),L(this.modalElement,"modal-open",{modalId:this.modalId}),this.animateContent||this.animationEnter!==""){let E=this.animateContent?this.animateContent.enterAnimation:this.animationEnter;E&&E!==""&&this.modalContent.style.setProperty("--un-modal-animation",E),b(this.modalElement,this.modalContent,"open"),T({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else b(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalElement.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(l=(h=this.options).onShow)==null||l.call(h),(u=(c=this.options).onToggle)==null||u.call(c,{isHidden:!1})}}),s(this,"hideModal",()=>{var a,h,l,c,u;let E=!1;L(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:f=>{E=f}});let M=(l=(h=(a=this.options).beforeHide)==null?void 0:h.call(a))==null?void 0:l.cancelAction;if(E||M)return;let C=()=>{b(this.modalElement,this.modalContent,"close"),N(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||P(this.overlayElement),L(this.modalElement,"modal-close",{modalId:this.modalElement.id})},B=()=>{var f,I,x,k;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(I=(f=this.options).onHide)==null||I.call(f),(k=(x=this.options).onToggle)==null||k.call(x,{isHidden:!0})},A=((c=this.animateContent)==null?void 0:c.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((u=this.overlayElement)==null||u.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),A){let f=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",f)}T({element:this.modalContent,callback:()=>{A&&this.modalContent.style.removeProperty("--un-modal-animation"),C(),B()}})}),s(this,"cleanup",()=>{if(this.triggerButton instanceof HTMLElement&&this.triggerButton.removeEventListener("click",this.showModal),this.closeButtons.length>0)for(let a of this.closeButtons)a.removeEventListener("click",this.closeModalOnX);!this.preventCloseModal&&this.overlayElement instanceof HTMLElement&&this.overlayElement.removeEventListener("click",this.hideModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:close`,this.hideModal),w.removeInstance("modal",this.modalElement)});let d=typeof t=="string"?v(t):t;if(!(d instanceof HTMLElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalElement=d,this.options=n,this.state=n?.defaultState||this.modalElement.dataset.state||"close";let i=w.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let r=v("[data-modal-content]",d);if(!(r instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=r;let m=d.dataset.modalId;this.modalId=`${m}`;let p=(typeof o=="string"?v(o):o)||v(`[data-modal-target='${m}']`);this.triggerButton=p,this.initModal(this.modalElement,this.options),this.addEvents(),this.state==="open"?(this.initAsOpen=!0,this.showModal()):this.initAsOpen=!1,this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,w.register("modal",this.modalElement,this)}};s(y,"autoInit",(e="[data-fx-modal]")=>{let t=g(e);for(let n of t)new y(n)}),s(y,"init",(e,t={},n)=>new y(e,t,n));var $=y;function K(e){e.directive("modal",(t,{},{cleanup:n})=>{let o=t.getAttribute("data-modal-id");if(!o){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!t.querySelector("[data-modal-content]")){console.error("\u274C data-modal-content Element is required but missing in Modal Element:",t);return}let i=document.querySelector(`[data-modal-trigger][data-modal-id="${o}"]`),r=new $(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[o]=r;let m=()=>{r.showModal()},p=()=>{r.hideModal()};document.addEventListener(`modal:${o}:open`,m),document.addEventListener(`modal:${o}:close`,p),i instanceof HTMLElement&&i.addEventListener("click",m),n(()=>{r.cleanup(),delete e.store("modals")[o],i instanceof HTMLElement&&i.removeEventListener("click",m),document.removeEventListener(`modal:${o}:open`,m),document.removeEventListener(`modal:${o}:close`,p)})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var D=K;document.addEventListener("alpine:init",()=>{D(window.Alpine)});})();
1
+ (()=>{var I=Object.defineProperty,T=(e,t,o)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t,o)=>T(e,typeof t!="symbol"?t+"":t,o),v=(e,t=document.body)=>t.querySelector(e),y=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),D=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let o=t.parentElement;if(o)o.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},k=({element:e,callback:t,type:o,keysCheck:s})=>{let l=getComputedStyle(e),d=l.animation;if(d!=="none"&&d!==""&&!s.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},A=({element:e,callback:t})=>{k({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,o)=>{let s=new CustomEvent(t,{detail:o});e.dispatchEvent(s)},C=(e,t,o)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",o==="open"?"false":"true"),e.setAttribute("data-state",o),t.setAttribute("data-state",o);let s=v("[data-modal-overlay]",e);s instanceof HTMLElement&&s.setAttribute("data-state",o)},$=(e,t,o)=>{if(!e){t||(document.body.style.overflowY="auto");return}y("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(s=>s!==o).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,o,s){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,o)||(window.$flexillaInstances[t].push({element:o,instance:s}),s)}static getInstance(t,o){var s,l;return this.initGlobalRegistry(),(l=(s=window.$flexillaInstances[t])==null?void 0:s.find(d=>d.element===o))==null?void 0:l.instance}static removeInstance(t,o){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(s=>s.element!==o))}},H=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},B=({modalContent:e,overlayClassName:t})=>{let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),D({newElement:o,existingElement:e}),o.classList.add(...t),o.setAttribute("data-modal-overlay",""),o},f=class{constructor(t,o={},s){a(this,"modalElement"),a(this,"modalId"),a(this,"modalContent"),a(this,"triggerButtons",[]),a(this,"overlayElement"),a(this,"dispatchEventToDocument"),a(this,"options"),a(this,"state"),a(this,"animationEnter"),a(this,"animationExit"),a(this,"animateContent"),a(this,"hasDefaultOverlay"),a(this,"enableStackedModals"),a(this,"preventCloseModal"),a(this,"isKeyDownEventRegistered"),a(this,"closeButtons"),a(this,"overlayClassName"),a(this,"allowBodyScroll"),a(this,"initAsOpen"),a(this,"closeAll",n=>{if(this.enableStackedModals)return;let r=y("[data-fx-modal][data-state=open]");for(let i of r){let m=i.dataset.modalId;if(m!==n.dataset.modalId){i.blur(),v("[data-modal-overlay]",i).setAttribute("data-state","close");let h=v("[data-modal-content]",i);C(i,h,"close"),document.dispatchEvent(new CustomEvent(`modal:${m}:close`))}}}),a(this,"closeModalEsc",n=>{n.key==="Escape"&&(n.preventDefault(),this.preventCloseModal||this.hideModal())}),a(this,"initModal",(n,r)=>{var i;if(!(n instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:p,enableStackedModals:b}=r;this.allowBodyScroll=n.hasAttribute("data-allow-body-scroll")&&n.getAttribute("data-allow-body-scroll")!=="false"||m||!1,this.preventCloseModal=n.hasAttribute("data-prevent-close-modal")&&n.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=n.hasAttribute("data-enable-stacked")&&n.getAttribute("data-enable-stacked")!=="false"||b||!1,this.overlayClassName=((i=n.dataset.modalOverlay)==null?void 0:i.split(" "))||p?.split(" ")||"",this.isKeyDownEventRegistered=!1,n.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=y("[data-close-modal]",n),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",n)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",n),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),a(this,"closeModalOnX",n=>{n.preventDefault(),this.hideModal()}),a(this,"addEvents",()=>{for(let n of this.triggerButtons)n.addEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),a(this,"showModal",()=>{var n,r,i,m,h;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:B({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(n=this.overlayElement)==null||n.setAttribute("data-state","open"),g(this.modalElement,"modal-open",{modalId:this.modalId}),this.animateContent||this.animationEnter!==""){let E=this.animateContent?this.animateContent.enterAnimation:this.animationEnter;E&&E!==""&&this.modalContent.style.setProperty("--un-modal-animation",E),C(this.modalElement,this.modalContent,"open"),A({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else C(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalContent.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(i=(r=this.options).onShow)==null||i.call(r),(h=(m=this.options).onToggle)==null||h.call(m,{isHidden:!1}),this.modalElement.showModal()}}),a(this,"closeModal",()=>{this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close"),this.modalElement.blur(),$(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||H(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),a(this,"closeLastAction",()=>{var n,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(n=this.options).onHide)==null||r.call(n),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),a(this,"hideModal",()=>{var n,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let p=(i=(r=(n=this.options).beforeHide)==null?void 0:r.call(n))==null?void 0:i.cancelAction;if(E||p)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((h=this.overlayElement)==null||h.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),b){let M=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",M)}A({element:this.modalContent,callback:()=>{b&&this.modalContent.style.removeProperty("--un-modal-animation"),this.closeModal(),this.closeLastAction(),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.modalElement.close("modal-closed")}})}),a(this,"cleanup",()=>{for(let n of this.triggerButtons)n.removeEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.removeEventListener("click",this.closeModalOnX);!this.preventCloseModal&&this.overlayElement instanceof HTMLElement&&this.overlayElement.removeEventListener("click",this.hideModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.removeEventListener(`modal:${this.modalId}:close`,this.hideModal),w.removeInstance("modal",this.modalElement)}),a(this,"setOptions",({state:n,allowBodyscroll:r})=>{n&&(this.state=n),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let l=typeof t=="string"?v(t):t;if(!(l instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=l,this.options=o,this.state=o?.defaultState||this.modalElement.dataset.state||"close";let d=w.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let c=v("[data-modal-content]",l);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=c;let u=l.dataset.modalId;this.modalId=`${u}`,this.initializeTriggers(s,u),this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.initModal(this.modalElement,this.options),this.state==="open"?(this.initAsOpen=!0,this.showModal()):(this.initAsOpen=!1,this.modalElement.blur(),this.modalContent.setAttribute("data-state","close"),this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close")),w.register("modal",this.modalElement,this)}initializeTriggers(t,o){if(!t&&o){let l=y(`[data-modal-target='${o}'], [data-modal-trigger][data-modal-id='${o}']`);this.triggerButtons=l;return}if(!t)return;let s=Array.isArray(t)?t:[t];this.triggerButtons=s.map(l=>{if(typeof l=="string"){let d=v(l);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${l}`);return d}if(!(l instanceof HTMLElement))throw new Error("Invalid trigger element provided");return l})}};a(f,"autoInit",(e="[data-fx-modal]")=>{let t=y(e);for(let o of t)new f(o)}),a(f,"init",(e,t={},o)=>new f(e,t,o));var L=f;function S(e){e.directive("modal",(t,{},{cleanup:o})=>{let s=t.getAttribute("data-modal-id");if(!s){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!(t instanceof HTMLDialogElement)){console.error("\u274C x-modal must be used only on an HTMLDialogElement:",t);return}if(!t.querySelector("[data-modal-content]")){console.error("\u274C data-modal-content Element is required but missing in Modal Element:",t);return}let d=new L(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[s]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${s}:open`,c),document.addEventListener(`modal:${s}:close`,u),o(()=>{d.cleanup(),delete e.store("modals")[s],document.removeEventListener(`modal:${s}:open`,c),document.removeEventListener(`modal:${s}:close`,u)})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var x=S;document.addEventListener("alpine:init",()=>{x(window.Alpine)});})();