@flexilla/alpine-offcanvas 0.1.1 → 0.2.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 +164 -114
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +164 -114
  4. package/dist/module.esm.js +164 -114
  5. package/package.json +3 -3
package/dist/cdn.js CHANGED
@@ -1,113 +1,158 @@
1
1
  (() => {
2
2
  // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
3
- var b = Object.defineProperty;
4
- var w = (s, t, e) => t in s ? b(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
5
- var o = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
6
- var m = (s, t = document.body) => t.querySelector(s);
7
- var d = (s, t = document.body) => Array.from(t.querySelectorAll(s));
3
+ var g = Object.defineProperty;
4
+ var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
5
+ var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
6
+ var m = (t, e = document.body) => e.querySelector(t);
7
+ var v = (t, e = document.body) => Array.from(e.querySelectorAll(t));
8
8
  var y = ({
9
- newElement: s,
10
- existingElement: t
9
+ newElement: t,
10
+ existingElement: e
11
11
  }) => {
12
- if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
12
+ if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
13
13
  throw new Error("Both parameters must be valid HTML elements.");
14
- const e = t.parentElement;
15
- if (e)
16
- e.insertBefore(s, t);
14
+ const n = e.parentElement;
15
+ if (n)
16
+ n.insertBefore(t, e);
17
17
  else
18
18
  throw new Error("Existing element must have a parent element.");
19
19
  };
20
20
  var k = ({
21
- element: s,
22
- callback: t,
23
- type: e,
24
- keysCheck: n
21
+ element: t,
22
+ callback: e,
23
+ type: n,
24
+ keysCheck: s
25
25
  }) => {
26
- const a = getComputedStyle(s), i = a.transition;
27
- if (i !== "none" && i !== "" && !n.includes(i)) {
28
- const l = "transitionend", f = () => {
29
- s.removeEventListener(l, f), t();
26
+ const a = getComputedStyle(t), i = a.transition;
27
+ if (i !== "none" && i !== "" && !s.includes(i)) {
28
+ const l = "transitionend", r = () => {
29
+ t.removeEventListener(l, r), e();
30
30
  };
31
- s.addEventListener(l, f, { once: true });
31
+ t.addEventListener(l, r, { once: true });
32
32
  } else
33
- t();
33
+ e();
34
34
  };
35
35
  var O = ({
36
- element: s,
37
- callback: t
36
+ element: t,
37
+ callback: e
38
38
  }) => {
39
39
  k({
40
- element: s,
41
- callback: t,
40
+ element: t,
41
+ callback: e,
42
42
  type: "transition",
43
43
  keysCheck: ["all 0s ease 0s", "all"]
44
44
  });
45
45
  };
46
- var v = (s, t, e) => {
47
- const n = new CustomEvent(t, { detail: e });
48
- s.dispatchEvent(n);
46
+ var h = (t, e, n) => {
47
+ const s = new CustomEvent(e, { detail: n });
48
+ t.dispatchEvent(s);
49
49
  };
50
- var A = (s) => {
51
- var t;
52
- return (t = s.parentElement) == null ? void 0 : t.removeChild(s);
50
+ function A(t) {
51
+ const e = () => {
52
+ document.querySelector(
53
+ "[data-fx-component]:not([data-component-initialized])"
54
+ ) ? requestAnimationFrame(e) : t();
55
+ };
56
+ e();
57
+ }
58
+ function B(t, e, n = "move") {
59
+ if (!(t instanceof HTMLElement))
60
+ throw new Error("Source element must be an HTMLElement");
61
+ if (!(e instanceof HTMLElement))
62
+ throw new Error("Target element must be an HTMLElement");
63
+ if (!["move", "detachable"].includes(n))
64
+ throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);
65
+ let s = document.createComment("teleporter-placeholder");
66
+ const a = t.parentNode;
67
+ return a ? a.insertBefore(s, t) : console.warn("Element has no parent; placeholder not inserted."), n === "move" ? (t.parentNode && e.appendChild(t), {
68
+ append() {
69
+ t.parentNode !== e && e.appendChild(t);
70
+ },
71
+ remove() {
72
+ s != null && s.parentNode && t.parentNode && s.parentNode.insertBefore(t, s);
73
+ },
74
+ restore() {
75
+ s != null && s.parentNode && t.parentNode !== a && s.parentNode.insertBefore(t, s);
76
+ }
77
+ }) : (t.parentNode && e.appendChild(t), {
78
+ append() {
79
+ e.contains(t) || e.appendChild(t);
80
+ },
81
+ remove() {
82
+ t.parentNode && t.remove();
83
+ },
84
+ restore() {
85
+ s != null && s.parentNode && !t.parentNode && s.parentNode.insertBefore(t, s);
86
+ }
87
+ });
88
+ }
89
+ var S = (t) => {
90
+ var e;
91
+ return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
53
92
  };
54
- var p = (s) => {
55
- s.setAttribute("data-state", "invisible"), O({
56
- element: s,
93
+ var C = (t) => {
94
+ t.setAttribute("data-state", "invisible"), O({
95
+ element: t,
57
96
  callback() {
58
- A(s);
97
+ S(t);
59
98
  }
60
99
  });
61
100
  };
62
- var B = (s, t) => {
63
- const e = s;
64
- if (e === "" || !e)
101
+ var x = (t, e) => {
102
+ const n = t;
103
+ if (n === "" || !n)
65
104
  return;
66
- const n = document.createElement("div");
67
- if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "")
105
+ const s = document.createElement("div");
106
+ if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", e), n === "")
68
107
  return;
69
- const a = e.split(" ");
70
- return e !== "" && n.classList.add(...a), n;
108
+ const a = n.split(" ");
109
+ return n !== "" && s.classList.add(...a), s;
71
110
  };
72
- var C = (s, t, e) => {
73
- s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), t || S(e);
111
+ var u = (t, e, n) => {
112
+ t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || L(n);
74
113
  };
75
- var S = (s) => {
76
- document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
114
+ var L = (t) => {
115
+ document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
77
116
  };
78
- var x = (s, t) => {
79
- if (s === t)
117
+ var I = (t, e) => {
118
+ if (t === e)
80
119
  return;
81
- s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
82
- const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
83
- e instanceof HTMLElement && p(e);
120
+ t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
121
+ const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
122
+ n instanceof HTMLElement && C(n);
84
123
  };
85
- var I = (s) => {
86
- const t = d("[data-fx-offcanvas][data-state=open]");
87
- if (!(t.length <= 0))
88
- for (const e of t)
89
- x(e, s);
124
+ var T = (t) => {
125
+ const e = v("[data-fx-offcanvas][data-state=open]");
126
+ if (!(e.length <= 0))
127
+ for (const n of e)
128
+ I(n, t);
90
129
  };
91
- var h = class {
130
+ var d = class {
92
131
  static initGlobalRegistry() {
93
132
  window.$flexillaInstances || (window.$flexillaInstances = {});
94
133
  }
95
- static register(t, e, n) {
96
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
134
+ static register(e, n, s) {
135
+ return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, n) || (window.$flexillaInstances[e].push({ element: n, instance: s }), s);
97
136
  }
98
- static getInstance(t, e) {
99
- var n, a;
100
- return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
101
- (i) => i.element === e
137
+ static getInstance(e, n) {
138
+ var s, a;
139
+ return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[e]) == null ? void 0 : s.find(
140
+ (i) => i.element === n
102
141
  )) == null ? void 0 : a.instance;
103
142
  }
104
- static removeInstance(t, e) {
105
- this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
106
- (n) => n.element !== e
143
+ static removeInstance(e, n) {
144
+ this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
145
+ (s) => s.element !== n
107
146
  ));
108
147
  }
148
+ static setup(e) {
149
+ e.setAttribute("data-fx-component", "fx");
150
+ }
151
+ static initialized(e) {
152
+ e.setAttribute("data-component-initialized", "initialized");
153
+ }
109
154
  };
110
- var c = class c2 {
155
+ var f = class f2 {
111
156
  /**
112
157
  * Creates an instance of Offcanvas.
113
158
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -125,7 +170,7 @@
125
170
  * });
126
171
  * ```
127
172
  */
128
- constructor(t, e = {}) {
173
+ constructor(e, n = {}) {
129
174
  o(this, "offCanvasElement");
130
175
  o(this, "offCanvasTriggers");
131
176
  o(this, "offCanvasCloseBtns");
@@ -133,74 +178,79 @@
133
178
  o(this, "staticBackdrop");
134
179
  o(this, "backdrop");
135
180
  o(this, "options");
136
- o(this, "closeWhenClickOutSide", (t2) => {
137
- const e2 = this.offCanvasElement.getAttribute("data-state") === "open", n2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
138
- e2 && n2 && this.closeOffCanvas();
181
+ o(this, "teleporter");
182
+ o(this, "moveElOnInit", () => {
183
+ A(() => this.teleporter.append());
184
+ });
185
+ o(this, "closeWhenClickOutSide", (e2) => {
186
+ const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
187
+ n2 && s2 && this.closeOffCanvas();
139
188
  });
140
189
  o(this, "closeOffCanvas", () => {
141
- var i2, l2, f2, r2, u;
142
- let t2 = false;
143
- if (v(this.offCanvasElement, "offcanvas-before-hide", {
190
+ var i2, l2, r2, c2, p;
191
+ let e2 = false;
192
+ if (h(this.offCanvasElement, "offcanvas-before-hide", {
144
193
  offcanvasId: this.offCanvasElement.id,
145
- setExitAction: (g) => {
146
- t2 = g;
194
+ setExitAction: (b) => {
195
+ e2 = b;
147
196
  }
148
- }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
197
+ }), ((r2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : r2.cancelAction) || e2)
149
198
  return;
150
- const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
151
- a2 instanceof HTMLElement && p(a2), C(
199
+ const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
200
+ a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
152
201
  this.offCanvasElement,
153
202
  this.allowBodyScroll,
154
203
  "close"
155
- ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
204
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (c2 = this.options).onHide) == null || p.call(c2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
156
205
  });
157
- o(this, "closeWithEsc", (t2) => {
158
- t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
206
+ o(this, "closeWithEsc", (e2) => {
207
+ e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
159
208
  });
160
209
  o(this, "changeState", () => {
161
210
  this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
162
211
  });
163
- o(this, "setOptions", ({ allowBodyscroll: t2 }) => {
164
- t2 !== void 0 && (this.allowBodyScroll = t2);
212
+ o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
213
+ e2 !== void 0 && (this.allowBodyScroll = e2);
165
214
  });
166
- const n = typeof t == "string" ? m(t) : t;
167
- if (!(n instanceof HTMLElement))
215
+ const s = typeof e == "string" ? m(e) : e;
216
+ if (!(s instanceof HTMLElement))
168
217
  throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
169
- const a = h.getInstance("offcanvas", n);
218
+ this.offCanvasElement = s;
219
+ const a = d.getInstance("offcanvas", s);
170
220
  if (a)
171
221
  return a;
172
- this.options = e;
173
- const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
174
- this.offCanvasElement = n, this.setupAttributes(), this.staticBackdrop = i || n.hasAttribute("data-static-backdrop") && n.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || n.hasAttribute("data-allow-body-scroll") && n.dataset.allowBodyScroll !== "false" || false;
175
- const r = this.offCanvasElement.getAttribute("id");
176
- this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.setupOffcanvas(), h.register("offcanvas", this.offCanvasElement, this);
222
+ d.setup(this.offCanvasElement), this.options = n;
223
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: r } = this.options;
224
+ this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
225
+ const c = this.offCanvasElement.getAttribute("id");
226
+ this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, c), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, c, this.offCanvasElement), this.backdrop = r || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.teleporter = B(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
177
227
  }
178
- findOffCanvasElements(t, e, n, a) {
179
- return e ? d(`${t}`, a) : d(`${t}[data-target=${n}]`);
228
+ findOffCanvasElements(e, n, s, a) {
229
+ return n ? v(`${e}`, a) : v(`${e}[data-target=${s}]`);
180
230
  }
181
231
  setupAttributes() {
182
232
  this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
183
233
  }
184
234
  openOffCanvas() {
185
- var n, a, i, l;
186
- (a = (n = this.options).beforeShow) == null || a.call(n), I(this.offCanvasElement), C(
235
+ var s, a, i, l;
236
+ (a = (s = this.options).beforeShow) == null || a.call(s), T(this.offCanvasElement), u(
187
237
  this.offCanvasElement,
188
238
  this.allowBodyScroll,
189
239
  "open"
190
240
  );
191
- const t = this.offCanvasElement.getAttribute("id"), e = B(
241
+ const e = this.offCanvasElement.getAttribute("id"), n = x(
192
242
  this.backdrop,
193
- t
243
+ e
194
244
  );
195
- e instanceof HTMLElement && (y({ newElement: e, existingElement: this.offCanvasElement }), this.staticBackdrop || e.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
245
+ n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
196
246
  }
197
247
  initCloseBtns() {
198
- for (const t of this.offCanvasCloseBtns)
199
- t.addEventListener("click", this.closeOffCanvas);
248
+ for (const e of this.offCanvasCloseBtns)
249
+ e.addEventListener("click", this.closeOffCanvas);
200
250
  }
201
251
  initTriggers() {
202
- for (const t of this.offCanvasTriggers)
203
- t.addEventListener("click", this.changeState);
252
+ for (const e of this.offCanvasTriggers)
253
+ e.addEventListener("click", this.changeState);
204
254
  }
205
255
  setupOffcanvas() {
206
256
  this.initTriggers(), this.initCloseBtns();
@@ -242,17 +292,17 @@
242
292
  * ```
243
293
  */
244
294
  cleanup() {
245
- for (const t of this.offCanvasTriggers)
246
- t.removeEventListener("click", this.changeState);
247
- for (const t of this.offCanvasCloseBtns)
248
- t.removeEventListener("click", this.closeOffCanvas);
249
- document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), h.removeInstance("offcanvas", this.offCanvasElement);
295
+ for (const e of this.offCanvasTriggers)
296
+ e.removeEventListener("click", this.changeState);
297
+ for (const e of this.offCanvasCloseBtns)
298
+ e.removeEventListener("click", this.closeOffCanvas);
299
+ document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
250
300
  }
251
301
  };
252
- o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
253
- const e = d(t);
254
- for (const n of e)
255
- new c(n);
302
+ o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
303
+ const n = v(e);
304
+ for (const s of n)
305
+ new f(s);
256
306
  }), /**
257
307
  * This is an alternative to using the constructor directly.
258
308
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -267,8 +317,8 @@
267
317
  * });
268
318
  * ```
269
319
  */
270
- o(c, "init", (t, e = {}) => new c(t, e));
271
- var E = c;
320
+ o(f, "init", (e, n = {}) => new f(e, n));
321
+ var E = f;
272
322
 
273
323
  // src/index.js
274
324
  function Offcanvas(Alpine) {
package/dist/cdn.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{var I=Object.defineProperty,A=(t,e,n)=>e in t?I(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,o=(t,e,n)=>A(t,typeof e!="symbol"?e+"":e,n),C=(t,e=document.body)=>e.querySelector(t),m=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),S=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=e.parentElement;if(n)n.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},$=({element:t,callback:e,type:n,keysCheck:s})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!s.includes(i)){let l="transitionend",d=()=>{t.removeEventListener(l,d),e()};t.addEventListener(l,d,{once:!0})}else e()},T=({element:t,callback:e})=>{$({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},E=(t,e,n)=>{let s=new CustomEvent(e,{detail:n});t.dispatchEvent(s)},H=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},k=t=>{t.setAttribute("data-state","invisible"),T({element:t,callback(){H(t)}})},M=(t,e)=>{let n=t;if(n===""||!n)return;let s=document.createElement("div");if(s.setAttribute("aria-hidden","true"),s.setAttribute("data-state","visible"),s.setAttribute("data-fx-offcanvas-overlay",""),s.setAttribute("data-offcanvas-el",e),n==="")return;let a=n.split(" ");return n!==""&&s.classList.add(...a),s},y=(t,e,n)=>{t.setAttribute("aria-hidden",n==="open"?"false":"true"),t.setAttribute("data-state",n),e||W(n)},W=t=>{document.body.style.overflow=t==="open"?"hidden":"",document.body.style.overflowY=t==="open"?"hidden":"auto"},G=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let n=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);n instanceof HTMLElement&&k(n)},R=t=>{let e=m("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let n of e)G(n,t)},c=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,n,s){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,n)||(window.$flexillaInstances[e].push({element:n,instance:s}),s)}static getInstance(e,n){var s,a;return this.initGlobalRegistry(),(a=(s=window.$flexillaInstances[e])==null?void 0:s.find(i=>i.element===n))==null?void 0:a.instance}static removeInstance(e,n){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(s=>s.element!==n))}},r=class{constructor(e,n={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"closeWhenClickOutSide",f=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(f.target)&&![...this.offCanvasTriggers].includes(f.target);v&&h&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var f,v,h,b,w;let g=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:x=>{g=x}}),((h=(v=(f=this.options).beforeHide)==null?void 0:v.call(f))==null?void 0:h.cancelAction)||g)return;let B=this.offCanvasElement.getAttribute("id"),u=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${B}]`);u instanceof HTMLElement&&k(u),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),E(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",f=>{f.key==="Escape"&&(f.preventDefault(),this.closeOffCanvas())}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()}),o(this,"setOptions",({allowBodyscroll:f})=>{f!==void 0&&(this.allowBodyScroll=f)});let s=typeof e=="string"?C(e):e;if(!(s instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");let a=c.getInstance("offcanvas",s);if(a)return a;this.options=n;let{staticBackdrop:i,allowBodyScroll:l,backdrop:d}=this.options;this.offCanvasElement=s,this.setupAttributes(),this.staticBackdrop=i||s.hasAttribute("data-static-backdrop")&&s.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||s.hasAttribute("data-allow-body-scroll")&&s.dataset.allowBodyScroll!=="false"||!1;let p=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,p),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,p,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.setupOffcanvas(),c.register("offcanvas",this.offCanvasElement,this)}findOffCanvasElements(e,n,s,a){return n?m(`${e}`,a):m(`${e}[data-target=${s}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,n,s,a;(n=(e=this.options).beforeShow)==null||n.call(e),R(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let i=this.offCanvasElement.getAttribute("id"),l=M(this.backdrop,i);l instanceof HTMLElement&&(S({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(s=this.options).onShow)==null||a.call(s),E(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeOffCanvas)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns()}open(){this.openOffCanvas()}close(){this.closeOffCanvas()}cleanup(){for(let e of this.offCanvasTriggers)e.removeEventListener("click",this.changeState);for(let e of this.offCanvasCloseBtns)e.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),c.removeInstance("offcanvas",this.offCanvasElement)}};o(r,"autoInit",(t="[data-fx-offcanvas]")=>{let e=m(t);for(let n of e)new r(n)}),o(r,"init",(t,e={})=>new r(t,e));var O=r;function q(t){t.directive("offcanvas",(e,{},{cleanup:n})=>{let s=e.getAttribute("id");if(!s){console.error("\u274C id is required but missing on element:",e);return}let a=new O(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[s]=a;let i=()=>a.open(),l=()=>a.close();document.addEventListener(`sheet:${s}:open`,i),document.addEventListener(`sheet:${s}:close`,l),n(()=>{document.removeEventListener(`sheet:${s}:open`,i),document.removeEventListener(`sheet:${s}:close`,l),a.cleanup(),delete t.store("sheets")[s]})}),t.magic("offcanvas",e=>n=>t.store("sheets")?t.store("sheets")[n]?t.store("sheets")[n]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${n}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var L=q;document.addEventListener("alpine:init",()=>{L(window.Alpine)});})();
1
+ (()=>{var I=Object.defineProperty,A=(t,e,s)=>e in t?I(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,o=(t,e,s)=>A(t,typeof e!="symbol"?e+"":e,s),E=(t,e=document.body)=>e.querySelector(t),m=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),S=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let s=e.parentElement;if(s)s.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},T=({element:t,callback:e,type:s,keysCheck:n})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!n.includes(i)){let l="transitionend",d=()=>{t.removeEventListener(l,d),e()};t.addEventListener(l,d,{once:!0})}else e()},$=({element:t,callback:e})=>{T({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},p=(t,e,s)=>{let n=new CustomEvent(e,{detail:s});t.dispatchEvent(n)};function H(t){let e=()=>{document.querySelector("[data-fx-component]:not([data-component-initialized])")?requestAnimationFrame(e):t()};e()}function N(t,e,s="move"){if(!(t instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(e instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(s))throw new Error(`Invalid teleport mode: ${s}. Must be "move" or "detachable".`);let n=document.createComment("teleporter-placeholder"),a=t.parentNode;return a?a.insertBefore(n,t):console.warn("Element has no parent; placeholder not inserted."),s==="move"?(t.parentNode&&e.appendChild(t),{append(){t.parentNode!==e&&e.appendChild(t)},remove(){n!=null&&n.parentNode&&t.parentNode&&n.parentNode.insertBefore(t,n)},restore(){n!=null&&n.parentNode&&t.parentNode!==a&&n.parentNode.insertBefore(t,n)}}):(t.parentNode&&e.appendChild(t),{append(){e.contains(t)||e.appendChild(t)},remove(){t.parentNode&&t.remove()},restore(){n!=null&&n.parentNode&&!t.parentNode&&n.parentNode.insertBefore(t,n)}})}var M=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},k=t=>{t.setAttribute("data-state","invisible"),$({element:t,callback(){M(t)}})},W=(t,e)=>{let s=t;if(s===""||!s)return;let n=document.createElement("div");if(n.setAttribute("aria-hidden","true"),n.setAttribute("data-state","visible"),n.setAttribute("data-fx-offcanvas-overlay",""),n.setAttribute("data-offcanvas-el",e),s==="")return;let a=s.split(" ");return s!==""&&n.classList.add(...a),n},y=(t,e,s)=>{t.setAttribute("aria-hidden",s==="open"?"false":"true"),t.setAttribute("data-state",s),e||z(s)},z=t=>{document.body.style.overflow=t==="open"?"hidden":"",document.body.style.overflowY=t==="open"?"hidden":"auto"},q=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let s=E(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);s instanceof HTMLElement&&k(s)},G=t=>{let e=m("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let s of e)q(s,t)},f=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,n){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:n}),n)}static getInstance(e,s){var n,a;return this.initGlobalRegistry(),(a=(n=window.$flexillaInstances[e])==null?void 0:n.find(i=>i.element===s))==null?void 0:a.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(n=>n.element!==s))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}},c=class{constructor(e,s={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"teleporter"),o(this,"moveElOnInit",()=>{H(()=>this.teleporter.append())}),o(this,"closeWhenClickOutSide",r=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(r.target)&&![...this.offCanvasTriggers].includes(r.target);v&&h&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var r,v,h,b,w;let g=!1;if(p(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:x=>{g=x}}),((h=(v=(r=this.options).beforeHide)==null?void 0:v.call(r))==null?void 0:h.cancelAction)||g)return;let B=this.offCanvasElement.getAttribute("id"),u=E(`[data-fx-offcanvas-overlay][data-offcanvas-el=${B}]`);u instanceof HTMLElement&&k(u),this.offCanvasElement.blur(),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),p(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",r=>{r.key==="Escape"&&(r.preventDefault(),this.closeOffCanvas())}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()}),o(this,"setOptions",({allowBodyscroll:r})=>{r!==void 0&&(this.allowBodyScroll=r)});let n=typeof e=="string"?E(e):e;if(!(n instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");this.offCanvasElement=n;let a=f.getInstance("offcanvas",n);if(a)return a;f.setup(this.offCanvasElement),this.options=s;let{staticBackdrop:i,allowBodyScroll:l,backdrop:d}=this.options;this.setupAttributes(),this.staticBackdrop=i||n.hasAttribute("data-static-backdrop")&&n.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||n.hasAttribute("data-allow-body-scroll")&&n.dataset.allowBodyScroll!=="false"||!1;let C=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,C),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,C,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.teleporter=N(this.offCanvasElement,document.body,"move"),this.setupOffcanvas(),this.moveElOnInit(),f.register("offcanvas",this.offCanvasElement,this),f.initialized(this.offCanvasElement)}findOffCanvasElements(e,s,n,a){return s?m(`${e}`,a):m(`${e}[data-target=${n}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,s,n,a;(s=(e=this.options).beforeShow)==null||s.call(e),G(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let i=this.offCanvasElement.getAttribute("id"),l=W(this.backdrop,i);l instanceof HTMLElement&&(S({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(n=this.options).onShow)==null||a.call(n),p(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeOffCanvas)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns()}open(){this.openOffCanvas()}close(){this.closeOffCanvas()}cleanup(){for(let e of this.offCanvasTriggers)e.removeEventListener("click",this.changeState);for(let e of this.offCanvasCloseBtns)e.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),f.removeInstance("offcanvas",this.offCanvasElement)}};o(c,"autoInit",(t="[data-fx-offcanvas]")=>{let e=m(t);for(let s of e)new c(s)}),o(c,"init",(t,e={})=>new c(t,e));var L=c;function R(t){t.directive("offcanvas",(e,{},{cleanup:s})=>{let n=e.getAttribute("id");if(!n){console.error("\u274C id is required but missing on element:",e);return}let a=new L(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[n]=a;let i=()=>a.open(),l=()=>a.close();document.addEventListener(`sheet:${n}:open`,i),document.addEventListener(`sheet:${n}:close`,l),s(()=>{document.removeEventListener(`sheet:${n}:open`,i),document.removeEventListener(`sheet:${n}:close`,l),a.cleanup(),delete t.store("sheets")[n]})}),t.magic("offcanvas",e=>s=>t.store("sheets")?t.store("sheets")[s]?t.store("sheets")[s]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${s}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var O=R;document.addEventListener("alpine:init",()=>{O(window.Alpine)});})();
package/dist/module.cjs.js CHANGED
@@ -24,114 +24,159 @@ __export(module_exports, {
24
24
  module.exports = __toCommonJS(module_exports);
25
25
 
26
26
  // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
27
- var b = Object.defineProperty;
28
- var w = (s, t, e) => t in s ? b(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
29
- var o = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
30
- var m = (s, t = document.body) => t.querySelector(s);
31
- var d = (s, t = document.body) => Array.from(t.querySelectorAll(s));
27
+ var g = Object.defineProperty;
28
+ var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
29
+ var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
30
+ var m = (t, e = document.body) => e.querySelector(t);
31
+ var v = (t, e = document.body) => Array.from(e.querySelectorAll(t));
32
32
  var y = ({
33
- newElement: s,
34
- existingElement: t
33
+ newElement: t,
34
+ existingElement: e
35
35
  }) => {
36
- if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
36
+ if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
37
37
  throw new Error("Both parameters must be valid HTML elements.");
38
- const e = t.parentElement;
39
- if (e)
40
- e.insertBefore(s, t);
38
+ const n = e.parentElement;
39
+ if (n)
40
+ n.insertBefore(t, e);
41
41
  else
42
42
  throw new Error("Existing element must have a parent element.");
43
43
  };
44
44
  var k = ({
45
- element: s,
46
- callback: t,
47
- type: e,
48
- keysCheck: n
45
+ element: t,
46
+ callback: e,
47
+ type: n,
48
+ keysCheck: s
49
49
  }) => {
50
- const a = getComputedStyle(s), i = a.transition;
51
- if (i !== "none" && i !== "" && !n.includes(i)) {
52
- const l = "transitionend", f = () => {
53
- s.removeEventListener(l, f), t();
50
+ const a = getComputedStyle(t), i = a.transition;
51
+ if (i !== "none" && i !== "" && !s.includes(i)) {
52
+ const l = "transitionend", r = () => {
53
+ t.removeEventListener(l, r), e();
54
54
  };
55
- s.addEventListener(l, f, { once: true });
55
+ t.addEventListener(l, r, { once: true });
56
56
  } else
57
- t();
57
+ e();
58
58
  };
59
59
  var O = ({
60
- element: s,
61
- callback: t
60
+ element: t,
61
+ callback: e
62
62
  }) => {
63
63
  k({
64
- element: s,
65
- callback: t,
64
+ element: t,
65
+ callback: e,
66
66
  type: "transition",
67
67
  keysCheck: ["all 0s ease 0s", "all"]
68
68
  });
69
69
  };
70
- var v = (s, t, e) => {
71
- const n = new CustomEvent(t, { detail: e });
72
- s.dispatchEvent(n);
70
+ var h = (t, e, n) => {
71
+ const s = new CustomEvent(e, { detail: n });
72
+ t.dispatchEvent(s);
73
73
  };
74
- var A = (s) => {
75
- var t;
76
- return (t = s.parentElement) == null ? void 0 : t.removeChild(s);
74
+ function A(t) {
75
+ const e = () => {
76
+ document.querySelector(
77
+ "[data-fx-component]:not([data-component-initialized])"
78
+ ) ? requestAnimationFrame(e) : t();
79
+ };
80
+ e();
81
+ }
82
+ function B(t, e, n = "move") {
83
+ if (!(t instanceof HTMLElement))
84
+ throw new Error("Source element must be an HTMLElement");
85
+ if (!(e instanceof HTMLElement))
86
+ throw new Error("Target element must be an HTMLElement");
87
+ if (!["move", "detachable"].includes(n))
88
+ throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);
89
+ let s = document.createComment("teleporter-placeholder");
90
+ const a = t.parentNode;
91
+ return a ? a.insertBefore(s, t) : console.warn("Element has no parent; placeholder not inserted."), n === "move" ? (t.parentNode && e.appendChild(t), {
92
+ append() {
93
+ t.parentNode !== e && e.appendChild(t);
94
+ },
95
+ remove() {
96
+ s != null && s.parentNode && t.parentNode && s.parentNode.insertBefore(t, s);
97
+ },
98
+ restore() {
99
+ s != null && s.parentNode && t.parentNode !== a && s.parentNode.insertBefore(t, s);
100
+ }
101
+ }) : (t.parentNode && e.appendChild(t), {
102
+ append() {
103
+ e.contains(t) || e.appendChild(t);
104
+ },
105
+ remove() {
106
+ t.parentNode && t.remove();
107
+ },
108
+ restore() {
109
+ s != null && s.parentNode && !t.parentNode && s.parentNode.insertBefore(t, s);
110
+ }
111
+ });
112
+ }
113
+ var S = (t) => {
114
+ var e;
115
+ return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
77
116
  };
78
- var p = (s) => {
79
- s.setAttribute("data-state", "invisible"), O({
80
- element: s,
117
+ var C = (t) => {
118
+ t.setAttribute("data-state", "invisible"), O({
119
+ element: t,
81
120
  callback() {
82
- A(s);
121
+ S(t);
83
122
  }
84
123
  });
85
124
  };
86
- var B = (s, t) => {
87
- const e = s;
88
- if (e === "" || !e)
125
+ var x = (t, e) => {
126
+ const n = t;
127
+ if (n === "" || !n)
89
128
  return;
90
- const n = document.createElement("div");
91
- if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "")
129
+ const s = document.createElement("div");
130
+ if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", e), n === "")
92
131
  return;
93
- const a = e.split(" ");
94
- return e !== "" && n.classList.add(...a), n;
132
+ const a = n.split(" ");
133
+ return n !== "" && s.classList.add(...a), s;
95
134
  };
96
- var C = (s, t, e) => {
97
- s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), t || S(e);
135
+ var u = (t, e, n) => {
136
+ t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || L(n);
98
137
  };
99
- var S = (s) => {
100
- document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
138
+ var L = (t) => {
139
+ document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
101
140
  };
102
- var x = (s, t) => {
103
- if (s === t)
141
+ var I = (t, e) => {
142
+ if (t === e)
104
143
  return;
105
- s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
106
- const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
107
- e instanceof HTMLElement && p(e);
144
+ t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
145
+ const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
146
+ n instanceof HTMLElement && C(n);
108
147
  };
109
- var I = (s) => {
110
- const t = d("[data-fx-offcanvas][data-state=open]");
111
- if (!(t.length <= 0))
112
- for (const e of t)
113
- x(e, s);
148
+ var T = (t) => {
149
+ const e = v("[data-fx-offcanvas][data-state=open]");
150
+ if (!(e.length <= 0))
151
+ for (const n of e)
152
+ I(n, t);
114
153
  };
115
- var h = class {
154
+ var d = class {
116
155
  static initGlobalRegistry() {
117
156
  window.$flexillaInstances || (window.$flexillaInstances = {});
118
157
  }
119
- static register(t, e, n) {
120
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
158
+ static register(e, n, s) {
159
+ return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, n) || (window.$flexillaInstances[e].push({ element: n, instance: s }), s);
121
160
  }
122
- static getInstance(t, e) {
123
- var n, a;
124
- return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
125
- (i) => i.element === e
161
+ static getInstance(e, n) {
162
+ var s, a;
163
+ return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[e]) == null ? void 0 : s.find(
164
+ (i) => i.element === n
126
165
  )) == null ? void 0 : a.instance;
127
166
  }
128
- static removeInstance(t, e) {
129
- this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
130
- (n) => n.element !== e
167
+ static removeInstance(e, n) {
168
+ this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
169
+ (s) => s.element !== n
131
170
  ));
132
171
  }
172
+ static setup(e) {
173
+ e.setAttribute("data-fx-component", "fx");
174
+ }
175
+ static initialized(e) {
176
+ e.setAttribute("data-component-initialized", "initialized");
177
+ }
133
178
  };
134
- var c = class c2 {
179
+ var f = class f2 {
135
180
  /**
136
181
  * Creates an instance of Offcanvas.
137
182
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -149,7 +194,7 @@ var c = class c2 {
149
194
  * });
150
195
  * ```
151
196
  */
152
- constructor(t, e = {}) {
197
+ constructor(e, n = {}) {
153
198
  o(this, "offCanvasElement");
154
199
  o(this, "offCanvasTriggers");
155
200
  o(this, "offCanvasCloseBtns");
@@ -157,74 +202,79 @@ var c = class c2 {
157
202
  o(this, "staticBackdrop");
158
203
  o(this, "backdrop");
159
204
  o(this, "options");
160
- o(this, "closeWhenClickOutSide", (t2) => {
161
- const e2 = this.offCanvasElement.getAttribute("data-state") === "open", n2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
162
- e2 && n2 && this.closeOffCanvas();
205
+ o(this, "teleporter");
206
+ o(this, "moveElOnInit", () => {
207
+ A(() => this.teleporter.append());
208
+ });
209
+ o(this, "closeWhenClickOutSide", (e2) => {
210
+ const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
211
+ n2 && s2 && this.closeOffCanvas();
163
212
  });
164
213
  o(this, "closeOffCanvas", () => {
165
- var i2, l2, f2, r2, u;
166
- let t2 = false;
167
- if (v(this.offCanvasElement, "offcanvas-before-hide", {
214
+ var i2, l2, r2, c2, p;
215
+ let e2 = false;
216
+ if (h(this.offCanvasElement, "offcanvas-before-hide", {
168
217
  offcanvasId: this.offCanvasElement.id,
169
- setExitAction: (g) => {
170
- t2 = g;
218
+ setExitAction: (b) => {
219
+ e2 = b;
171
220
  }
172
- }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
221
+ }), ((r2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : r2.cancelAction) || e2)
173
222
  return;
174
- const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
175
- a2 instanceof HTMLElement && p(a2), C(
223
+ const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
224
+ a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
176
225
  this.offCanvasElement,
177
226
  this.allowBodyScroll,
178
227
  "close"
179
- ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
228
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (c2 = this.options).onHide) == null || p.call(c2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
180
229
  });
181
- o(this, "closeWithEsc", (t2) => {
182
- t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
230
+ o(this, "closeWithEsc", (e2) => {
231
+ e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
183
232
  });
184
233
  o(this, "changeState", () => {
185
234
  this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
186
235
  });
187
- o(this, "setOptions", ({ allowBodyscroll: t2 }) => {
188
- t2 !== void 0 && (this.allowBodyScroll = t2);
236
+ o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
237
+ e2 !== void 0 && (this.allowBodyScroll = e2);
189
238
  });
190
- const n = typeof t == "string" ? m(t) : t;
191
- if (!(n instanceof HTMLElement))
239
+ const s = typeof e == "string" ? m(e) : e;
240
+ if (!(s instanceof HTMLElement))
192
241
  throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
193
- const a = h.getInstance("offcanvas", n);
242
+ this.offCanvasElement = s;
243
+ const a = d.getInstance("offcanvas", s);
194
244
  if (a)
195
245
  return a;
196
- this.options = e;
197
- const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
198
- this.offCanvasElement = n, this.setupAttributes(), this.staticBackdrop = i || n.hasAttribute("data-static-backdrop") && n.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || n.hasAttribute("data-allow-body-scroll") && n.dataset.allowBodyScroll !== "false" || false;
199
- const r = this.offCanvasElement.getAttribute("id");
200
- this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.setupOffcanvas(), h.register("offcanvas", this.offCanvasElement, this);
246
+ d.setup(this.offCanvasElement), this.options = n;
247
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: r } = this.options;
248
+ this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
249
+ const c = this.offCanvasElement.getAttribute("id");
250
+ this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, c), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, c, this.offCanvasElement), this.backdrop = r || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.teleporter = B(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
201
251
  }
202
- findOffCanvasElements(t, e, n, a) {
203
- return e ? d(`${t}`, a) : d(`${t}[data-target=${n}]`);
252
+ findOffCanvasElements(e, n, s, a) {
253
+ return n ? v(`${e}`, a) : v(`${e}[data-target=${s}]`);
204
254
  }
205
255
  setupAttributes() {
206
256
  this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
207
257
  }
208
258
  openOffCanvas() {
209
- var n, a, i, l;
210
- (a = (n = this.options).beforeShow) == null || a.call(n), I(this.offCanvasElement), C(
259
+ var s, a, i, l;
260
+ (a = (s = this.options).beforeShow) == null || a.call(s), T(this.offCanvasElement), u(
211
261
  this.offCanvasElement,
212
262
  this.allowBodyScroll,
213
263
  "open"
214
264
  );
215
- const t = this.offCanvasElement.getAttribute("id"), e = B(
265
+ const e = this.offCanvasElement.getAttribute("id"), n = x(
216
266
  this.backdrop,
217
- t
267
+ e
218
268
  );
219
- e instanceof HTMLElement && (y({ newElement: e, existingElement: this.offCanvasElement }), this.staticBackdrop || e.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
269
+ n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
220
270
  }
221
271
  initCloseBtns() {
222
- for (const t of this.offCanvasCloseBtns)
223
- t.addEventListener("click", this.closeOffCanvas);
272
+ for (const e of this.offCanvasCloseBtns)
273
+ e.addEventListener("click", this.closeOffCanvas);
224
274
  }
225
275
  initTriggers() {
226
- for (const t of this.offCanvasTriggers)
227
- t.addEventListener("click", this.changeState);
276
+ for (const e of this.offCanvasTriggers)
277
+ e.addEventListener("click", this.changeState);
228
278
  }
229
279
  setupOffcanvas() {
230
280
  this.initTriggers(), this.initCloseBtns();
@@ -266,17 +316,17 @@ var c = class c2 {
266
316
  * ```
267
317
  */
268
318
  cleanup() {
269
- for (const t of this.offCanvasTriggers)
270
- t.removeEventListener("click", this.changeState);
271
- for (const t of this.offCanvasCloseBtns)
272
- t.removeEventListener("click", this.closeOffCanvas);
273
- document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), h.removeInstance("offcanvas", this.offCanvasElement);
319
+ for (const e of this.offCanvasTriggers)
320
+ e.removeEventListener("click", this.changeState);
321
+ for (const e of this.offCanvasCloseBtns)
322
+ e.removeEventListener("click", this.closeOffCanvas);
323
+ document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
274
324
  }
275
325
  };
276
- o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
277
- const e = d(t);
278
- for (const n of e)
279
- new c(n);
326
+ o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
327
+ const n = v(e);
328
+ for (const s of n)
329
+ new f(s);
280
330
  }), /**
281
331
  * This is an alternative to using the constructor directly.
282
332
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -291,8 +341,8 @@ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
291
341
  * });
292
342
  * ```
293
343
  */
294
- o(c, "init", (t, e = {}) => new c(t, e));
295
- var E = c;
344
+ o(f, "init", (e, n = {}) => new f(e, n));
345
+ var E = f;
296
346
 
297
347
  // src/index.js
298
348
  function Offcanvas(Alpine) {
package/dist/module.esm.js CHANGED
@@ -1,112 +1,157 @@
1
1
  // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
2
- var b = Object.defineProperty;
3
- var w = (s, t, e) => t in s ? b(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
4
- var o = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
5
- var m = (s, t = document.body) => t.querySelector(s);
6
- var d = (s, t = document.body) => Array.from(t.querySelectorAll(s));
2
+ var g = Object.defineProperty;
3
+ var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
4
+ var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
5
+ var m = (t, e = document.body) => e.querySelector(t);
6
+ var v = (t, e = document.body) => Array.from(e.querySelectorAll(t));
7
7
  var y = ({
8
- newElement: s,
9
- existingElement: t
8
+ newElement: t,
9
+ existingElement: e
10
10
  }) => {
11
- if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
11
+ if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
12
12
  throw new Error("Both parameters must be valid HTML elements.");
13
- const e = t.parentElement;
14
- if (e)
15
- e.insertBefore(s, t);
13
+ const n = e.parentElement;
14
+ if (n)
15
+ n.insertBefore(t, e);
16
16
  else
17
17
  throw new Error("Existing element must have a parent element.");
18
18
  };
19
19
  var k = ({
20
- element: s,
21
- callback: t,
22
- type: e,
23
- keysCheck: n
20
+ element: t,
21
+ callback: e,
22
+ type: n,
23
+ keysCheck: s
24
24
  }) => {
25
- const a = getComputedStyle(s), i = a.transition;
26
- if (i !== "none" && i !== "" && !n.includes(i)) {
27
- const l = "transitionend", f = () => {
28
- s.removeEventListener(l, f), t();
25
+ const a = getComputedStyle(t), i = a.transition;
26
+ if (i !== "none" && i !== "" && !s.includes(i)) {
27
+ const l = "transitionend", r = () => {
28
+ t.removeEventListener(l, r), e();
29
29
  };
30
- s.addEventListener(l, f, { once: true });
30
+ t.addEventListener(l, r, { once: true });
31
31
  } else
32
- t();
32
+ e();
33
33
  };
34
34
  var O = ({
35
- element: s,
36
- callback: t
35
+ element: t,
36
+ callback: e
37
37
  }) => {
38
38
  k({
39
- element: s,
40
- callback: t,
39
+ element: t,
40
+ callback: e,
41
41
  type: "transition",
42
42
  keysCheck: ["all 0s ease 0s", "all"]
43
43
  });
44
44
  };
45
- var v = (s, t, e) => {
46
- const n = new CustomEvent(t, { detail: e });
47
- s.dispatchEvent(n);
45
+ var h = (t, e, n) => {
46
+ const s = new CustomEvent(e, { detail: n });
47
+ t.dispatchEvent(s);
48
48
  };
49
- var A = (s) => {
50
- var t;
51
- return (t = s.parentElement) == null ? void 0 : t.removeChild(s);
49
+ function A(t) {
50
+ const e = () => {
51
+ document.querySelector(
52
+ "[data-fx-component]:not([data-component-initialized])"
53
+ ) ? requestAnimationFrame(e) : t();
54
+ };
55
+ e();
56
+ }
57
+ function B(t, e, n = "move") {
58
+ if (!(t instanceof HTMLElement))
59
+ throw new Error("Source element must be an HTMLElement");
60
+ if (!(e instanceof HTMLElement))
61
+ throw new Error("Target element must be an HTMLElement");
62
+ if (!["move", "detachable"].includes(n))
63
+ throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);
64
+ let s = document.createComment("teleporter-placeholder");
65
+ const a = t.parentNode;
66
+ return a ? a.insertBefore(s, t) : console.warn("Element has no parent; placeholder not inserted."), n === "move" ? (t.parentNode && e.appendChild(t), {
67
+ append() {
68
+ t.parentNode !== e && e.appendChild(t);
69
+ },
70
+ remove() {
71
+ s != null && s.parentNode && t.parentNode && s.parentNode.insertBefore(t, s);
72
+ },
73
+ restore() {
74
+ s != null && s.parentNode && t.parentNode !== a && s.parentNode.insertBefore(t, s);
75
+ }
76
+ }) : (t.parentNode && e.appendChild(t), {
77
+ append() {
78
+ e.contains(t) || e.appendChild(t);
79
+ },
80
+ remove() {
81
+ t.parentNode && t.remove();
82
+ },
83
+ restore() {
84
+ s != null && s.parentNode && !t.parentNode && s.parentNode.insertBefore(t, s);
85
+ }
86
+ });
87
+ }
88
+ var S = (t) => {
89
+ var e;
90
+ return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
52
91
  };
53
- var p = (s) => {
54
- s.setAttribute("data-state", "invisible"), O({
55
- element: s,
92
+ var C = (t) => {
93
+ t.setAttribute("data-state", "invisible"), O({
94
+ element: t,
56
95
  callback() {
57
- A(s);
96
+ S(t);
58
97
  }
59
98
  });
60
99
  };
61
- var B = (s, t) => {
62
- const e = s;
63
- if (e === "" || !e)
100
+ var x = (t, e) => {
101
+ const n = t;
102
+ if (n === "" || !n)
64
103
  return;
65
- const n = document.createElement("div");
66
- if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "")
104
+ const s = document.createElement("div");
105
+ if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", e), n === "")
67
106
  return;
68
- const a = e.split(" ");
69
- return e !== "" && n.classList.add(...a), n;
107
+ const a = n.split(" ");
108
+ return n !== "" && s.classList.add(...a), s;
70
109
  };
71
- var C = (s, t, e) => {
72
- s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), t || S(e);
110
+ var u = (t, e, n) => {
111
+ t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || L(n);
73
112
  };
74
- var S = (s) => {
75
- document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
113
+ var L = (t) => {
114
+ document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
76
115
  };
77
- var x = (s, t) => {
78
- if (s === t)
116
+ var I = (t, e) => {
117
+ if (t === e)
79
118
  return;
80
- s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
81
- const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
82
- e instanceof HTMLElement && p(e);
119
+ t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
120
+ const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
121
+ n instanceof HTMLElement && C(n);
83
122
  };
84
- var I = (s) => {
85
- const t = d("[data-fx-offcanvas][data-state=open]");
86
- if (!(t.length <= 0))
87
- for (const e of t)
88
- x(e, s);
123
+ var T = (t) => {
124
+ const e = v("[data-fx-offcanvas][data-state=open]");
125
+ if (!(e.length <= 0))
126
+ for (const n of e)
127
+ I(n, t);
89
128
  };
90
- var h = class {
129
+ var d = class {
91
130
  static initGlobalRegistry() {
92
131
  window.$flexillaInstances || (window.$flexillaInstances = {});
93
132
  }
94
- static register(t, e, n) {
95
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
133
+ static register(e, n, s) {
134
+ return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, n) || (window.$flexillaInstances[e].push({ element: n, instance: s }), s);
96
135
  }
97
- static getInstance(t, e) {
98
- var n, a;
99
- return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
100
- (i) => i.element === e
136
+ static getInstance(e, n) {
137
+ var s, a;
138
+ return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[e]) == null ? void 0 : s.find(
139
+ (i) => i.element === n
101
140
  )) == null ? void 0 : a.instance;
102
141
  }
103
- static removeInstance(t, e) {
104
- this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
105
- (n) => n.element !== e
142
+ static removeInstance(e, n) {
143
+ this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
144
+ (s) => s.element !== n
106
145
  ));
107
146
  }
147
+ static setup(e) {
148
+ e.setAttribute("data-fx-component", "fx");
149
+ }
150
+ static initialized(e) {
151
+ e.setAttribute("data-component-initialized", "initialized");
152
+ }
108
153
  };
109
- var c = class c2 {
154
+ var f = class f2 {
110
155
  /**
111
156
  * Creates an instance of Offcanvas.
112
157
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -124,7 +169,7 @@ var c = class c2 {
124
169
  * });
125
170
  * ```
126
171
  */
127
- constructor(t, e = {}) {
172
+ constructor(e, n = {}) {
128
173
  o(this, "offCanvasElement");
129
174
  o(this, "offCanvasTriggers");
130
175
  o(this, "offCanvasCloseBtns");
@@ -132,74 +177,79 @@ var c = class c2 {
132
177
  o(this, "staticBackdrop");
133
178
  o(this, "backdrop");
134
179
  o(this, "options");
135
- o(this, "closeWhenClickOutSide", (t2) => {
136
- const e2 = this.offCanvasElement.getAttribute("data-state") === "open", n2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
137
- e2 && n2 && this.closeOffCanvas();
180
+ o(this, "teleporter");
181
+ o(this, "moveElOnInit", () => {
182
+ A(() => this.teleporter.append());
183
+ });
184
+ o(this, "closeWhenClickOutSide", (e2) => {
185
+ const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
186
+ n2 && s2 && this.closeOffCanvas();
138
187
  });
139
188
  o(this, "closeOffCanvas", () => {
140
- var i2, l2, f2, r2, u;
141
- let t2 = false;
142
- if (v(this.offCanvasElement, "offcanvas-before-hide", {
189
+ var i2, l2, r2, c2, p;
190
+ let e2 = false;
191
+ if (h(this.offCanvasElement, "offcanvas-before-hide", {
143
192
  offcanvasId: this.offCanvasElement.id,
144
- setExitAction: (g) => {
145
- t2 = g;
193
+ setExitAction: (b) => {
194
+ e2 = b;
146
195
  }
147
- }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
196
+ }), ((r2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : r2.cancelAction) || e2)
148
197
  return;
149
- const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
150
- a2 instanceof HTMLElement && p(a2), C(
198
+ const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
199
+ a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
151
200
  this.offCanvasElement,
152
201
  this.allowBodyScroll,
153
202
  "close"
154
- ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
203
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (c2 = this.options).onHide) == null || p.call(c2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
155
204
  });
156
- o(this, "closeWithEsc", (t2) => {
157
- t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
205
+ o(this, "closeWithEsc", (e2) => {
206
+ e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
158
207
  });
159
208
  o(this, "changeState", () => {
160
209
  this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
161
210
  });
162
- o(this, "setOptions", ({ allowBodyscroll: t2 }) => {
163
- t2 !== void 0 && (this.allowBodyScroll = t2);
211
+ o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
212
+ e2 !== void 0 && (this.allowBodyScroll = e2);
164
213
  });
165
- const n = typeof t == "string" ? m(t) : t;
166
- if (!(n instanceof HTMLElement))
214
+ const s = typeof e == "string" ? m(e) : e;
215
+ if (!(s instanceof HTMLElement))
167
216
  throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
168
- const a = h.getInstance("offcanvas", n);
217
+ this.offCanvasElement = s;
218
+ const a = d.getInstance("offcanvas", s);
169
219
  if (a)
170
220
  return a;
171
- this.options = e;
172
- const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
173
- this.offCanvasElement = n, this.setupAttributes(), this.staticBackdrop = i || n.hasAttribute("data-static-backdrop") && n.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || n.hasAttribute("data-allow-body-scroll") && n.dataset.allowBodyScroll !== "false" || false;
174
- const r = this.offCanvasElement.getAttribute("id");
175
- this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.setupOffcanvas(), h.register("offcanvas", this.offCanvasElement, this);
221
+ d.setup(this.offCanvasElement), this.options = n;
222
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: r } = this.options;
223
+ this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
224
+ const c = this.offCanvasElement.getAttribute("id");
225
+ this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, c), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, c, this.offCanvasElement), this.backdrop = r || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.teleporter = B(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
176
226
  }
177
- findOffCanvasElements(t, e, n, a) {
178
- return e ? d(`${t}`, a) : d(`${t}[data-target=${n}]`);
227
+ findOffCanvasElements(e, n, s, a) {
228
+ return n ? v(`${e}`, a) : v(`${e}[data-target=${s}]`);
179
229
  }
180
230
  setupAttributes() {
181
231
  this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
182
232
  }
183
233
  openOffCanvas() {
184
- var n, a, i, l;
185
- (a = (n = this.options).beforeShow) == null || a.call(n), I(this.offCanvasElement), C(
234
+ var s, a, i, l;
235
+ (a = (s = this.options).beforeShow) == null || a.call(s), T(this.offCanvasElement), u(
186
236
  this.offCanvasElement,
187
237
  this.allowBodyScroll,
188
238
  "open"
189
239
  );
190
- const t = this.offCanvasElement.getAttribute("id"), e = B(
240
+ const e = this.offCanvasElement.getAttribute("id"), n = x(
191
241
  this.backdrop,
192
- t
242
+ e
193
243
  );
194
- e instanceof HTMLElement && (y({ newElement: e, existingElement: this.offCanvasElement }), this.staticBackdrop || e.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
244
+ n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
195
245
  }
196
246
  initCloseBtns() {
197
- for (const t of this.offCanvasCloseBtns)
198
- t.addEventListener("click", this.closeOffCanvas);
247
+ for (const e of this.offCanvasCloseBtns)
248
+ e.addEventListener("click", this.closeOffCanvas);
199
249
  }
200
250
  initTriggers() {
201
- for (const t of this.offCanvasTriggers)
202
- t.addEventListener("click", this.changeState);
251
+ for (const e of this.offCanvasTriggers)
252
+ e.addEventListener("click", this.changeState);
203
253
  }
204
254
  setupOffcanvas() {
205
255
  this.initTriggers(), this.initCloseBtns();
@@ -241,17 +291,17 @@ var c = class c2 {
241
291
  * ```
242
292
  */
243
293
  cleanup() {
244
- for (const t of this.offCanvasTriggers)
245
- t.removeEventListener("click", this.changeState);
246
- for (const t of this.offCanvasCloseBtns)
247
- t.removeEventListener("click", this.closeOffCanvas);
248
- document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), h.removeInstance("offcanvas", this.offCanvasElement);
294
+ for (const e of this.offCanvasTriggers)
295
+ e.removeEventListener("click", this.changeState);
296
+ for (const e of this.offCanvasCloseBtns)
297
+ e.removeEventListener("click", this.closeOffCanvas);
298
+ document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), d.removeInstance("offcanvas", this.offCanvasElement);
249
299
  }
250
300
  };
251
- o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
252
- const e = d(t);
253
- for (const n of e)
254
- new c(n);
301
+ o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
302
+ const n = v(e);
303
+ for (const s of n)
304
+ new f(s);
255
305
  }), /**
256
306
  * This is an alternative to using the constructor directly.
257
307
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -266,8 +316,8 @@ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
266
316
  * });
267
317
  * ```
268
318
  */
269
- o(c, "init", (t, e = {}) => new c(t, e));
270
- var E = c;
319
+ o(f, "init", (e, n = {}) => new f(e, n));
320
+ var E = f;
271
321
 
272
322
  // src/index.js
273
323
  function Offcanvas(Alpine) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flexilla/alpine-offcanvas",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "AlpineJS plugin for adding offcanvas functionality to your AlpineJS components",
5
5
  "type": "module",
6
6
  "private": false,
@@ -61,7 +61,7 @@
61
61
  ],
62
62
  "dependencies": {
63
63
  "@flexilla/alpine-offcanvas": "^0.0.3",
64
- "@flexilla/offcanvas": "^2.0.14"
64
+ "@flexilla/offcanvas": "^2.1.4"
65
65
  },
66
- "gitHead": "3284d6fd2a712b633d39a42d85792f730e2d7d55"
66
+ "gitHead": "9ac916234e8bb129724224819f3b59420b34081f"
67
67
  }