@flexilla/alpine-popover 0.0.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.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024-2025 Unoforge
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,45 @@
1
+ <h1 align="center">Alpine Offcanvas</h1>
2
+
3
+ <p align="center">
4
+ Simple Interactif Offcanvas Directive for <a href="https://alpinejs.dev">Alpine.js</a>
5
+ </p>
6
+
7
+
8
+ ## Installation
9
+
10
+ ### CDN
11
+
12
+ Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
13
+
14
+ ```html
15
+
16
+ ```
17
+
18
+ ### NPM
19
+
20
+ ```shell
21
+ npm install @flexilla/alpine-offcanvas
22
+ ```
23
+
24
+ Add the `x-offcanvas` directive to your project by importing the package **before** starting Alpine.
25
+
26
+ ```js
27
+ import Alpine from 'alpinejs';
28
+ import PluginOffcanvas from '@flexilla/alpine-offcanvas';
29
+
30
+ Alpine.plugin(PluginOffcanvas);
31
+
32
+ Alpine.start();
33
+ ```
34
+
35
+ ## Usage
36
+
37
+ ```html
38
+
39
+ ```
40
+
41
+ ## License
42
+
43
+ Copyright (c) 2025 Johnkat MJ and contributors.
44
+
45
+ Licensed under the MIT license, see [LICENSE](LICENSE) for details.
package/dist/cdn.js ADDED
@@ -0,0 +1,443 @@
1
+ (() => {
2
+ // ../../node_modules/@flexilla/popover/dist/popover.js
3
+ var K = Object.defineProperty;
4
+ var U = (i, e, t) => e in i ? K(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
5
+ var p = (i, e, t) => U(i, typeof e != "symbol" ? e + "" : e, t);
6
+ var A = (i, e = document.body) => e.querySelector(i);
7
+ var j = (i, e = document.body) => Array.from(e.querySelectorAll(i));
8
+ var M = (i, e, t) => {
9
+ const s = new CustomEvent(e, { detail: t });
10
+ i.dispatchEvent(s);
11
+ };
12
+ var q = Object.defineProperty;
13
+ var B = (i, e, t) => e in i ? q(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
14
+ var a = (i, e, t) => B(i, typeof e != "symbol" ? e + "" : e, t);
15
+ var J = "bottom";
16
+ var N = ({ reference: i, popper: e }) => {
17
+ const t = e.getBoundingClientRect(), s = i.getBoundingClientRect();
18
+ return {
19
+ popperHeight: t.height,
20
+ popperWidth: t.width,
21
+ refHeight: s.height,
22
+ refWidth: s.width,
23
+ refLeft: s.left,
24
+ refTop: s.top,
25
+ refRight: s.right
26
+ };
27
+ };
28
+ var Q = Object.defineProperty;
29
+ var V = (i, e, t) => e in i ? Q(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
30
+ var h = (i, e, t) => V(i, typeof e != "symbol" ? e + "" : e, t);
31
+ var X = (i, e, t, s) => {
32
+ const o = t, n = s - (t + e);
33
+ return o >= (i - e) / 2 && n >= (i - e) / 2;
34
+ };
35
+ var Y = (i, e, t, s) => (i - e) / 2 <= t && t + i / 2 + e / 2 <= s;
36
+ var Z = (i, e, t, s, o) => t > o - s ? e() ? window.innerHeight - o : t - o : i() ? 0 : t + s;
37
+ var _ = (i, e, t, s) => i <= s && t - i <= e;
38
+ var ee = (i, e, t, s) => t <= s && -i <= e;
39
+ var te = (i, e, t, s, o, n) => {
40
+ const r = o - t - n, l = t - s, d = t + n - s + (o - t - n), c = r >= 0 ? o - s : l >= 0 ? t - s : t;
41
+ return i() ? 0 : e() ? d : c;
42
+ };
43
+ var se = (i, e, t, s) => i <= t && e - i - s >= i;
44
+ var ie = (i, e) => i >= e;
45
+ var ne = ({
46
+ placement: i,
47
+ refWidth: e,
48
+ refTop: t,
49
+ refLeft: s,
50
+ refHeight: o,
51
+ popperWidth: n,
52
+ popperHeight: r,
53
+ windowHeight: l,
54
+ windowWidth: d,
55
+ offsetDistance: c
56
+ }) => {
57
+ const m = d - s - e, v = s, D = l - t - o, C = t, u = () => Z(
58
+ () => ee(t, o, r, l),
59
+ () => _(t, o, r, l),
60
+ t,
61
+ o,
62
+ r
63
+ ), E = () => te(
64
+ () => se(s, d, n, e),
65
+ () => ie(s, n),
66
+ s,
67
+ n,
68
+ d,
69
+ e
70
+ ), k = () => X(n, e, s, d) ? s + e / 2 - n / 2 : E(), H = () => Y(r, o, t, l) ? t + o / 2 - r / 2 : u(), T = () => s + n <= d ? s : E(), y = () => s + e - n >= 0 ? s + e - n : E(), b = () => t + r <= l ? t : u(), G = () => t + o - r >= 0 ? t + o - r : u();
71
+ let g = 0, f = 0;
72
+ const S = t - r - c, O = t + o + c, I = s - n - c, L = s + e + c, W = C >= r + c, F = D >= r + c, R = v >= n + c, $ = m >= n + c;
73
+ switch (i.startsWith("top") ? f = W ? S : F ? O : Math.max(S, O) : i.startsWith("bottom") ? f = F ? O : W ? S : Math.max(S, O) : i.startsWith("left") ? g = R ? I : $ ? L : Math.max(I, L) : i.startsWith("right") && (g = $ ? L : R ? I : Math.max(I, L)), i) {
74
+ case "bottom":
75
+ case "bottom-middle":
76
+ case "top":
77
+ case "top-middle":
78
+ g = k();
79
+ break;
80
+ case "left":
81
+ case "left-middle":
82
+ case "right":
83
+ case "right-middle":
84
+ f = H();
85
+ break;
86
+ case "bottom-start":
87
+ case "top-start":
88
+ g = T();
89
+ break;
90
+ case "bottom-end":
91
+ case "top-end":
92
+ g = y();
93
+ break;
94
+ case "left-start":
95
+ case "right-start":
96
+ f = b();
97
+ break;
98
+ case "left-end":
99
+ case "right-end":
100
+ f = G();
101
+ break;
102
+ }
103
+ return { x: g, y: f };
104
+ };
105
+ var oe = class {
106
+ /**
107
+ * Flexilla Popper
108
+ * @param reference
109
+ * @param popper
110
+ * @param options
111
+ */
112
+ constructor(e, t, s = {}) {
113
+ h(this, "reference"), h(this, "popper"), h(this, "offsetDistance"), h(this, "placement"), h(this, "disableOnResize"), h(this, "disableOnScroll"), h(this, "onUpdate"), h(this, "isWindowEventsRegistered"), h(this, "validateElements", () => {
114
+ if (!(this.reference instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Reference Element");
115
+ if (!(this.popper instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Popper");
116
+ if (typeof this.offsetDistance != "number") throw new Error("OffsetDistance must be a number");
117
+ }), h(this, "setPopperStyleProperty", (m, v) => {
118
+ this.popper.style.setProperty("--fx-popper-placement-x", `${m}px`), this.popper.style.setProperty("--fx-popper-placement-y", `${v}px`);
119
+ }), h(this, "setInitialStyles", () => {
120
+ this.popper.style.setProperty("--fx-popper-placement-x", ""), this.popper.style.setProperty("--fx-popper-placement-y", "");
121
+ }), h(this, "initPlacement", () => {
122
+ var m;
123
+ this.validateElements(), this.setInitialStyles();
124
+ const v = window.innerWidth, D = window.innerHeight, { popperHeight: C, popperWidth: u, refHeight: E, refWidth: k, refLeft: H, refTop: T } = N({ reference: this.reference, popper: this.popper }), { x: y, y: b } = ne(
125
+ {
126
+ placement: this.placement,
127
+ refWidth: k,
128
+ refTop: T,
129
+ refLeft: H,
130
+ popperWidth: u,
131
+ refHeight: E,
132
+ popperHeight: C,
133
+ windowHeight: D,
134
+ windowWidth: v,
135
+ offsetDistance: this.offsetDistance
136
+ }
137
+ );
138
+ this.setPopperStyleProperty(y, b), (m = this.onUpdate) == null || m.call(this, { x: y, y: b, placement: this.placement });
139
+ }), h(this, "removeWindowEvents", () => {
140
+ this.isWindowEventsRegistered && (!this.disableOnResize && window.removeEventListener("resize", this.updatePosition), !this.disableOnScroll && window.removeEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = false);
141
+ }), h(this, "attachWindowEvent", () => {
142
+ this.isWindowEventsRegistered && this.removeWindowEvents(), this.disableOnResize || window.addEventListener("resize", this.updatePosition), this.disableOnScroll || window.addEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = true;
143
+ }), h(this, "resetPosition", () => {
144
+ this.setInitialStyles();
145
+ }), h(this, "updatePosition", () => {
146
+ this.initPlacement(), this.attachWindowEvent();
147
+ }), h(this, "cleanupEvents", () => {
148
+ this.setInitialStyles(), this.removeWindowEvents();
149
+ });
150
+ const {
151
+ offsetDistance: o = 10,
152
+ placement: n = J,
153
+ eventEffect: r = {},
154
+ onUpdate: l
155
+ } = s;
156
+ if (!(e instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Reference Element");
157
+ if (!(t instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Popper");
158
+ if (s.offsetDistance && typeof s.offsetDistance != "number") throw new Error("OffsetDistance must be a number");
159
+ const { disableOnResize: d, disableOnScroll: c } = r;
160
+ this.isWindowEventsRegistered = false, this.reference = e, this.popper = t, this.offsetDistance = o, this.placement = n, this.disableOnResize = d || false, this.disableOnScroll = c || false, this.onUpdate = l;
161
+ }
162
+ setOptions({ placement: e, offsetDistance: t }) {
163
+ this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
164
+ }
165
+ };
166
+ var re = (i, e = document.body) => e.querySelector(i);
167
+ var z = (i, e) => {
168
+ for (const [t, s] of Object.entries(e))
169
+ i.setAttribute(t, s);
170
+ };
171
+ var ae = ({
172
+ element: i,
173
+ callback: e,
174
+ type: t,
175
+ keysCheck: s
176
+ }) => {
177
+ const o = getComputedStyle(i), n = o.transition;
178
+ if (n !== "none" && n !== "" && !s.includes(n)) {
179
+ const r = "transitionend", l = () => {
180
+ i.removeEventListener(r, l), e();
181
+ };
182
+ i.addEventListener(r, l, { once: true });
183
+ } else
184
+ e();
185
+ };
186
+ var le = ({
187
+ element: i,
188
+ callback: e
189
+ }) => {
190
+ ae({
191
+ element: i,
192
+ callback: e,
193
+ type: "transition",
194
+ keysCheck: ["all 0s ease 0s", "all"]
195
+ });
196
+ };
197
+ var w = ({ state: i, trigger: e, popper: t }) => {
198
+ z(t, {
199
+ "data-state": i
200
+ }), z(e, {
201
+ "aria-expanded": `${i}`
202
+ });
203
+ };
204
+ var he = class {
205
+ /**
206
+ * Creates an instance of CreateOverlay
207
+ * @param {Object} params - The initialization parameters
208
+ * @param {string | HTMLElement} params.trigger - The trigger element selector or HTMLElement
209
+ * @param {string | HTMLElement} params.content - The content element selector or HTMLElement
210
+ * @param {OverlayOptions} [params.options] - Configuration options for the overlay
211
+ * @throws {Error} When trigger or content elements are invalid
212
+ */
213
+ constructor({ trigger: e, content: t, options: s = {} }) {
214
+ a(this, "triggerElement"), a(this, "contentElement"), a(this, "triggerStrategy"), a(this, "placement"), a(this, "offsetDistance"), a(this, "preventFromCloseOutside"), a(this, "preventFromCloseInside"), a(this, "options"), a(this, "defaultState"), a(this, "popper"), a(this, "eventEffect"), a(this, "getElement", (n) => typeof n == "string" ? re(n) : n instanceof HTMLElement ? n : void 0), a(this, "handleDocumentClick", (n) => {
215
+ this.contentElement.getAttribute("data-state") === "open" && (!this.triggerElement.contains(n.target) && !this.preventFromCloseInside && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(n.target) && !this.contentElement.contains(n.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(n.target) && !this.contentElement.contains(n.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(n.target) && this.contentElement.contains(n.target) && !this.preventFromCloseInside && this.hide());
216
+ }), a(this, "handleKeyDown", (n) => {
217
+ n.preventDefault(), this.triggerStrategy !== "hover" && n.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
218
+ }), a(this, "toggleStateOnClick", () => {
219
+ (this.contentElement.dataset.state || "close") === "close" ? (this.show(), this.triggerStrategy === "hover" && this.addEventOnMouseEnter()) : this.hide();
220
+ }), a(this, "hideOnMouseLeaseTrigger", () => {
221
+ setTimeout(() => {
222
+ this.contentElement.matches(":hover") || this.hide();
223
+ }, 150);
224
+ }), a(this, "hideOnMouseLeave", () => {
225
+ setTimeout(() => {
226
+ this.triggerElement.matches(":hover") || this.hide();
227
+ }, 150);
228
+ }), a(this, "addEventOnMouseEnter", () => {
229
+ this.triggerElement.addEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.addEventListener("mouseleave", this.hideOnMouseLeave);
230
+ }), a(this, "showOnMouseEnter", () => {
231
+ this.show(), this.addEventOnMouseEnter();
232
+ }), a(this, "setShowOptions", ({ placement: n, offsetDistance: r }) => {
233
+ var l, d, c, m;
234
+ this.popper.setOptions({
235
+ placement: n,
236
+ offsetDistance: r
237
+ }), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (d = (l = this.options).beforeShow) == null || d.call(l), w({
238
+ state: "open",
239
+ popper: this.contentElement,
240
+ trigger: this.triggerElement
241
+ }), this.onToggleState(false), (m = (c = this.options).onShow) == null || m.call(c);
242
+ }), a(this, "setPopperOptions", ({ placement: n, offsetDistance: r }) => {
243
+ this.popper.setOptions({
244
+ placement: n,
245
+ offsetDistance: r
246
+ });
247
+ }), a(this, "cleanup", () => {
248
+ this.triggerElement.removeEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.removeEventListener("mouseenter", this.showOnMouseEnter);
249
+ });
250
+ var o;
251
+ if (this.contentElement = this.getElement(t), this.triggerElement = this.getElement(e), !(this.triggerElement instanceof HTMLElement)) throw new Error("Trigger element must be a valid HTML element");
252
+ if (!(this.contentElement instanceof HTMLElement)) throw new Error("Content element must be a valid HTML element");
253
+ this.options = s, this.triggerStrategy = this.options.triggerStrategy || "click", this.placement = this.options.placement || "bottom", this.offsetDistance = this.options.offsetDistance || 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.options.preventCloseFromInside || false, this.defaultState = this.options.defaultState || "close", this.eventEffect = (o = this.options.popper) == null ? void 0 : o.eventEffect, this.popper = new oe(
254
+ this.triggerElement,
255
+ this.contentElement,
256
+ {
257
+ placement: this.placement,
258
+ offsetDistance: this.offsetDistance,
259
+ eventEffect: this.eventEffect
260
+ }
261
+ ), this.initInstance();
262
+ }
263
+ onToggleState(e) {
264
+ var t, s;
265
+ (s = (t = this.options).onToggle) == null || s.call(t, { isHidden: e });
266
+ }
267
+ /**
268
+ * Shows the overlay
269
+ * Positions the overlay, adds event listeners, and triggers related callbacks
270
+ */
271
+ show() {
272
+ var e, t, s, o;
273
+ this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), w({
274
+ state: "open",
275
+ popper: this.contentElement,
276
+ trigger: this.triggerElement
277
+ }), this.onToggleState(false), (o = (s = this.options).onShow) == null || o.call(s);
278
+ }
279
+ /**
280
+ * Hides the overlay
281
+ * Removes event listeners and triggers related callbacks
282
+ */
283
+ hide() {
284
+ var e, t;
285
+ (t = (e = this.options).beforeHide) == null || t.call(e), w({
286
+ state: "close",
287
+ popper: this.contentElement,
288
+ trigger: this.triggerElement
289
+ }), this.triggerStrategy === "click" && document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.triggerStrategy === "hover" && (this.triggerElement.removeEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.removeEventListener("mouseleave", this.hideOnMouseLeave)), le({
290
+ element: this.contentElement,
291
+ callback: () => {
292
+ var s, o;
293
+ this.onToggleState(true), this.popper.cleanupEvents(), (o = (s = this.options).onHide) == null || o.call(s);
294
+ }
295
+ });
296
+ }
297
+ initInstance() {
298
+ w({
299
+ state: this.defaultState,
300
+ popper: this.contentElement,
301
+ trigger: this.triggerElement
302
+ }), this.defaultState === "open" ? this.show() : w({
303
+ state: "close",
304
+ popper: this.contentElement,
305
+ trigger: this.triggerElement
306
+ }), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
307
+ }
308
+ };
309
+ var x = class {
310
+ static initGlobalRegistry() {
311
+ window.$flexillaInstances || (window.$flexillaInstances = {});
312
+ }
313
+ static register(e, t, s) {
314
+ return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: s }), s);
315
+ }
316
+ static getInstance(e, t) {
317
+ var s, o;
318
+ return this.initGlobalRegistry(), (o = (s = window.$flexillaInstances[e]) == null ? void 0 : s.find(
319
+ (n) => n.element === t
320
+ )) == null ? void 0 : o.instance;
321
+ }
322
+ static removeInstance(e, t) {
323
+ this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
324
+ (s) => s.element !== t
325
+ ));
326
+ }
327
+ };
328
+ var P = class _P {
329
+ /**
330
+ * Creates a new Popover instance.
331
+ * @param {string | HTMLElement} popoverEl - The popover content element or its selector.
332
+ * @param {PopoverOptions} [options={}] - Configuration options for the popover.
333
+ * @example
334
+ * // Create a popover with default options
335
+ * const popover = new Popover('#my-popover');
336
+ *
337
+ * // Create a popover with custom options
338
+ * const popover = new Popover('#my-popover', {
339
+ * placement: 'top',
340
+ * triggerStrategy: 'hover',
341
+ * offsetDistance: 10
342
+ * });
343
+ */
344
+ constructor(e, t = {}) {
345
+ p(this, "triggerElement");
346
+ p(this, "contentElement");
347
+ p(this, "options");
348
+ p(this, "PopoverInstance");
349
+ p(this, "triggerStrategy");
350
+ p(this, "placement");
351
+ p(this, "offsetDistance");
352
+ p(this, "preventFromCloseOutside");
353
+ p(this, "preventFromCloseInside");
354
+ p(this, "defaultState");
355
+ p(this, "setShowOptions", ({ placement: e2, offsetDistance: t2 }) => {
356
+ this.PopoverInstance.setShowOptions({ placement: e2, offsetDistance: t2 });
357
+ });
358
+ p(this, "show", () => {
359
+ this.PopoverInstance.show(), M(this.contentElement, "popover-show", {
360
+ isHidden: false
361
+ });
362
+ });
363
+ p(this, "hide", () => {
364
+ this.PopoverInstance.hide(), M(this.contentElement, "popover-hide", {
365
+ isHidden: true
366
+ });
367
+ });
368
+ p(this, "cleanup", () => {
369
+ this.PopoverInstance.cleanup(), x.removeInstance("popover", this.contentElement);
370
+ });
371
+ const s = typeof e == "string" ? A(e) : e;
372
+ this.contentElement = s;
373
+ const o = x.getInstance("popover", this.contentElement);
374
+ if (o)
375
+ return o;
376
+ this.triggerElement = A(`[data-popover-trigger][data-popover-id=${s.getAttribute("id")}]`), this.options = t, this.triggerStrategy = this.options.triggerStrategy || s.dataset.triggerStrategy || "click", this.placement = this.options.placement || s.dataset.placement || "bottom-middle", this.offsetDistance = this.options.offsetDistance || parseInt(`${s.dataset.offsetDistance}`) | 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || s.hasAttribute("data-prevent-close-outside") || false, this.preventFromCloseInside = this.options.preventCloseFromInside || s.hasAttribute("data-prevent-close-inside") || false, this.defaultState = this.options.defaultState || s.dataset.defaultState || "close", this.PopoverInstance = new he({
377
+ trigger: this.triggerElement,
378
+ content: this.contentElement,
379
+ options: {
380
+ placement: this.placement,
381
+ offsetDistance: this.offsetDistance,
382
+ triggerStrategy: this.triggerStrategy,
383
+ preventFromCloseOutside: this.preventFromCloseOutside,
384
+ preventCloseFromInside: this.preventFromCloseInside,
385
+ defaultState: this.defaultState,
386
+ onShow: this.options.onShow,
387
+ onHide: this.options.onHide,
388
+ onToggle: ({ isHidden: n }) => {
389
+ var r, l;
390
+ (l = (r = this.options).onToggle) == null || l.call(r, { isHidden: n }), M(this.contentElement, "popover-toggle", {
391
+ isHidden: n
392
+ });
393
+ },
394
+ popper: this.options.popper
395
+ }
396
+ }), x.register("popover", this.contentElement, this);
397
+ }
398
+ /**
399
+ * Creates a new Popover instance with the specified options.
400
+ * @param {string | HTMLElement} popoverEl - The popover content element or its selector.
401
+ * @param {PopoverOptions} [options] - Configuration options for the popover.
402
+ * @returns {Popover} A new Popover instance.
403
+ * @example
404
+ * const popover = Popover.init('#my-popover', {
405
+ * placement: 'bottom',
406
+ * triggerStrategy: 'click'
407
+ * });
408
+ */
409
+ static init(e, t) {
410
+ return new _P(e, t);
411
+ }
412
+ /**
413
+ * Automatically initializes all popover elements matching the specified selector.
414
+ * @param {string} [selector='[data-fx-popover]'] - The selector to find popover elements.
415
+ * @example
416
+ * // Initialize all popovers with default selector
417
+ * Popover.autoInit();
418
+ *
419
+ * // Initialize popovers with custom selector
420
+ * Popover.autoInit('.custom-popover');
421
+ */
422
+ static autoInit(e = "[data-fx-popover]") {
423
+ const t = j(e);
424
+ for (const s of t) new _P(s);
425
+ }
426
+ };
427
+
428
+ // src/index.js
429
+ function Popover(Alpine) {
430
+ Alpine.directive("popover", (el, {}, { cleanup }) => {
431
+ const popover_ = new P(el);
432
+ cleanup(() => {
433
+ popover_.cleanup();
434
+ });
435
+ });
436
+ }
437
+ var src_default = Popover;
438
+
439
+ // builds/cdn.js
440
+ document.addEventListener("alpine:init", () => {
441
+ src_default(window.Alpine);
442
+ });
443
+ })();
@@ -0,0 +1 @@
1
+ (()=>{var q=Object.defineProperty,B=(s,e,t)=>e in s?q(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,c=(s,e,t)=>B(s,typeof e!="symbol"?e+"":e,t),j=(s,e=document.body)=>e.querySelector(s),J=(s,e=document.body)=>Array.from(e.querySelectorAll(s)),x=(s,e,t)=>{let i=new CustomEvent(e,{detail:t});s.dispatchEvent(i)},N=Object.defineProperty,Q=(s,e,t)=>e in s?N(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,a=(s,e,t)=>Q(s,typeof e!="symbol"?e+"":e,t),V="bottom",X=({reference:s,popper:e})=>{let t=e.getBoundingClientRect(),i=s.getBoundingClientRect();return{popperHeight:t.height,popperWidth:t.width,refHeight:i.height,refWidth:i.width,refLeft:i.left,refTop:i.top,refRight:i.right}},Y=Object.defineProperty,Z=(s,e,t)=>e in s?Y(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,h=(s,e,t)=>Z(s,typeof e!="symbol"?e+"":e,t),_=(s,e,t,i)=>{let o=t,n=i-(t+e);return o>=(s-e)/2&&n>=(s-e)/2},ee=(s,e,t,i)=>(s-e)/2<=t&&t+s/2+e/2<=i,te=(s,e,t,i,o)=>t>o-i?e()?window.innerHeight-o:t-o:s()?0:t+i,ie=(s,e,t,i)=>s<=i&&t-s<=e,se=(s,e,t,i)=>t<=i&&-s<=e,ne=(s,e,t,i,o,n)=>{let r=o-t-n,l=t-i,d=t+n-i+(o-t-n),p=r>=0?o-i:l>=0?t-i:t;return s()?0:e()?d:p},oe=(s,e,t,i)=>s<=t&&e-s-i>=s,re=(s,e)=>s>=e,ae=({placement:s,refWidth:e,refTop:t,refLeft:i,refHeight:o,popperWidth:n,popperHeight:r,windowHeight:l,windowWidth:d,offsetDistance:p})=>{let m=d-i-e,v=i,H=l-t-o,k=t,E=()=>te(()=>se(t,o,r,l),()=>ie(t,o,r,l),t,o,r),u=()=>ne(()=>oe(i,d,n,e),()=>re(i,n),i,n,d,e),P=()=>_(n,e,i,d)?i+e/2-n/2:u(),T=()=>ee(r,o,t,l)?t+o/2-r/2:E(),M=()=>i+n<=d?i:u(),b=()=>i+e-n>=0?i+e-n:u(),S=()=>t+r<=l?t:E(),U=()=>t+o-r>=0?t+o-r:E(),g=0,f=0,O=t-r-p,L=t+o+p,I=i-n-p,D=i+e+p,R=k>=r+p,$=H>=r+p,A=v>=n+p,z=m>=n+p;switch(s.startsWith("top")?f=R?O:$?L:Math.max(O,L):s.startsWith("bottom")?f=$?L:R?O:Math.max(O,L):s.startsWith("left")?g=A?I:z?D:Math.max(I,D):s.startsWith("right")&&(g=z?D:A?I:Math.max(I,D)),s){case"bottom":case"bottom-middle":case"top":case"top-middle":g=P();break;case"left":case"left-middle":case"right":case"right-middle":f=T();break;case"bottom-start":case"top-start":g=M();break;case"bottom-end":case"top-end":g=b();break;case"left-start":case"right-start":f=S();break;case"left-end":case"right-end":f=U();break}return{x:g,y:f}},W=class{constructor(e,t,i={}){h(this,"reference"),h(this,"popper"),h(this,"offsetDistance"),h(this,"placement"),h(this,"disableOnResize"),h(this,"disableOnScroll"),h(this,"onUpdate"),h(this,"isWindowEventsRegistered"),h(this,"validateElements",()=>{if(!(this.reference instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(this.popper instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(typeof this.offsetDistance!="number")throw new Error("OffsetDistance must be a number")}),h(this,"setPopperStyleProperty",(m,v)=>{this.popper.style.setProperty("--fx-popper-placement-x",`${m}px`),this.popper.style.setProperty("--fx-popper-placement-y",`${v}px`)}),h(this,"setInitialStyles",()=>{this.popper.style.setProperty("--fx-popper-placement-x",""),this.popper.style.setProperty("--fx-popper-placement-y","")}),h(this,"initPlacement",()=>{var m;this.validateElements(),this.setInitialStyles();let v=window.innerWidth,H=window.innerHeight,{popperHeight:k,popperWidth:E,refHeight:u,refWidth:P,refLeft:T,refTop:M}=X({reference:this.reference,popper:this.popper}),{x:b,y:S}=ae({placement:this.placement,refWidth:P,refTop:M,refLeft:T,popperWidth:E,refHeight:u,popperHeight:k,windowHeight:H,windowWidth:v,offsetDistance:this.offsetDistance});this.setPopperStyleProperty(b,S),(m=this.onUpdate)==null||m.call(this,{x:b,y:S,placement:this.placement})}),h(this,"removeWindowEvents",()=>{this.isWindowEventsRegistered&&(!this.disableOnResize&&window.removeEventListener("resize",this.updatePosition),!this.disableOnScroll&&window.removeEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!1)}),h(this,"attachWindowEvent",()=>{this.isWindowEventsRegistered&&this.removeWindowEvents(),this.disableOnResize||window.addEventListener("resize",this.updatePosition),this.disableOnScroll||window.addEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!0}),h(this,"resetPosition",()=>{this.setInitialStyles()}),h(this,"updatePosition",()=>{this.initPlacement(),this.attachWindowEvent()}),h(this,"cleanupEvents",()=>{this.setInitialStyles(),this.removeWindowEvents()});let{offsetDistance:o=10,placement:n=V,eventEffect:r={},onUpdate:l}=i;if(!(e instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(t instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(i.offsetDistance&&typeof i.offsetDistance!="number")throw new Error("OffsetDistance must be a number");let{disableOnResize:d,disableOnScroll:p}=r;this.isWindowEventsRegistered=!1,this.reference=e,this.popper=t,this.offsetDistance=o,this.placement=n,this.disableOnResize=d||!1,this.disableOnScroll=p||!1,this.onUpdate=l}setOptions({placement:e,offsetDistance:t}){this.placement=e,this.offsetDistance=t||this.offsetDistance,this.initPlacement(),this.attachWindowEvent()}},le=(s,e=document.body)=>e.querySelector(s),G=(s,e)=>{for(let[t,i]of Object.entries(e))s.setAttribute(t,i)},he=({element:s,callback:e,type:t,keysCheck:i})=>{let o=getComputedStyle(s),n=o.transition;if(n!=="none"&&n!==""&&!i.includes(n)){let r="transitionend",l=()=>{s.removeEventListener(r,l),e()};s.addEventListener(r,l,{once:!0})}else e()},pe=({element:s,callback:e})=>{he({element:s,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},w=({state:s,trigger:e,popper:t})=>{G(t,{"data-state":s}),G(e,{"aria-expanded":`${s}`})},F=class{constructor({trigger:e,content:t,options:i={}}){a(this,"triggerElement"),a(this,"contentElement"),a(this,"triggerStrategy"),a(this,"placement"),a(this,"offsetDistance"),a(this,"preventFromCloseOutside"),a(this,"preventFromCloseInside"),a(this,"options"),a(this,"defaultState"),a(this,"popper"),a(this,"eventEffect"),a(this,"getElement",n=>typeof n=="string"?le(n):n instanceof HTMLElement?n:void 0),a(this,"handleDocumentClick",n=>{this.contentElement.getAttribute("data-state")==="open"&&(!this.triggerElement.contains(n.target)&&!this.preventFromCloseInside&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(n.target)&&!this.contentElement.contains(n.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(n.target)&&!this.contentElement.contains(n.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(n.target)&&this.contentElement.contains(n.target)&&!this.preventFromCloseInside&&this.hide())}),a(this,"handleKeyDown",n=>{n.preventDefault(),this.triggerStrategy!=="hover"&&n.key==="Escape"&&this.contentElement.getAttribute("data-state")==="open"&&(this.preventFromCloseOutside||this.hide())}),a(this,"toggleStateOnClick",()=>{(this.contentElement.dataset.state||"close")==="close"?(this.show(),this.triggerStrategy==="hover"&&this.addEventOnMouseEnter()):this.hide()}),a(this,"hideOnMouseLeaseTrigger",()=>{setTimeout(()=>{this.contentElement.matches(":hover")||this.hide()},150)}),a(this,"hideOnMouseLeave",()=>{setTimeout(()=>{this.triggerElement.matches(":hover")||this.hide()},150)}),a(this,"addEventOnMouseEnter",()=>{this.triggerElement.addEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.addEventListener("mouseleave",this.hideOnMouseLeave)}),a(this,"showOnMouseEnter",()=>{this.show(),this.addEventOnMouseEnter()}),a(this,"setShowOptions",({placement:n,offsetDistance:r})=>{var l,d,p,m;this.popper.setOptions({placement:n,offsetDistance:r}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(d=(l=this.options).beforeShow)==null||d.call(l),w({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(m=(p=this.options).onShow)==null||m.call(p)}),a(this,"setPopperOptions",({placement:n,offsetDistance:r})=>{this.popper.setOptions({placement:n,offsetDistance:r})}),a(this,"cleanup",()=>{this.triggerElement.removeEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.removeEventListener("mouseenter",this.showOnMouseEnter)});var o;if(this.contentElement=this.getElement(t),this.triggerElement=this.getElement(e),!(this.triggerElement instanceof HTMLElement))throw new Error("Trigger element must be a valid HTML element");if(!(this.contentElement instanceof HTMLElement))throw new Error("Content element must be a valid HTML element");this.options=i,this.triggerStrategy=this.options.triggerStrategy||"click",this.placement=this.options.placement||"bottom",this.offsetDistance=this.options.offsetDistance||6,this.preventFromCloseOutside=this.options.preventFromCloseOutside||!1,this.preventFromCloseInside=this.options.preventCloseFromInside||!1,this.defaultState=this.options.defaultState||"close",this.eventEffect=(o=this.options.popper)==null?void 0:o.eventEffect,this.popper=new W(this.triggerElement,this.contentElement,{placement:this.placement,offsetDistance:this.offsetDistance,eventEffect:this.eventEffect}),this.initInstance()}onToggleState(e){var t,i;(i=(t=this.options).onToggle)==null||i.call(t,{isHidden:e})}show(){var e,t,i,o;this.popper.updatePosition(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(t=(e=this.options).beforeShow)==null||t.call(e),w({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(o=(i=this.options).onShow)==null||o.call(i)}hide(){var e,t;(t=(e=this.options).beforeHide)==null||t.call(e),w({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerStrategy==="click"&&document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeyDown),this.triggerStrategy==="hover"&&(this.triggerElement.removeEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.removeEventListener("mouseleave",this.hideOnMouseLeave)),pe({element:this.contentElement,callback:()=>{var i,o;this.onToggleState(!0),this.popper.cleanupEvents(),(o=(i=this.options).onHide)==null||o.call(i)}})}initInstance(){w({state:this.defaultState,popper:this.contentElement,trigger:this.triggerElement}),this.defaultState==="open"?this.show():w({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}},y=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,t,i){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,t)||(window.$flexillaInstances[e].push({element:t,instance:i}),i)}static getInstance(e,t){var i,o;return this.initGlobalRegistry(),(o=(i=window.$flexillaInstances[e])==null?void 0:i.find(n=>n.element===t))==null?void 0:o.instance}static removeInstance(e,t){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(i=>i.element!==t))}},C=class s{constructor(e,t={}){c(this,"triggerElement"),c(this,"contentElement"),c(this,"options"),c(this,"PopoverInstance"),c(this,"triggerStrategy"),c(this,"placement"),c(this,"offsetDistance"),c(this,"preventFromCloseOutside"),c(this,"preventFromCloseInside"),c(this,"defaultState"),c(this,"setShowOptions",({placement:n,offsetDistance:r})=>{this.PopoverInstance.setShowOptions({placement:n,offsetDistance:r})}),c(this,"show",()=>{this.PopoverInstance.show(),x(this.contentElement,"popover-show",{isHidden:!1})}),c(this,"hide",()=>{this.PopoverInstance.hide(),x(this.contentElement,"popover-hide",{isHidden:!0})}),c(this,"cleanup",()=>{this.PopoverInstance.cleanup(),y.removeInstance("popover",this.contentElement)});let i=typeof e=="string"?j(e):e;this.contentElement=i;let o=y.getInstance("popover",this.contentElement);if(o)return o;this.triggerElement=j(`[data-popover-trigger][data-popover-id=${i.getAttribute("id")}]`),this.options=t,this.triggerStrategy=this.options.triggerStrategy||i.dataset.triggerStrategy||"click",this.placement=this.options.placement||i.dataset.placement||"bottom-middle",this.offsetDistance=this.options.offsetDistance||parseInt(`${i.dataset.offsetDistance}`)|6,this.preventFromCloseOutside=this.options.preventFromCloseOutside||i.hasAttribute("data-prevent-close-outside")||!1,this.preventFromCloseInside=this.options.preventCloseFromInside||i.hasAttribute("data-prevent-close-inside")||!1,this.defaultState=this.options.defaultState||i.dataset.defaultState||"close",this.PopoverInstance=new F({trigger:this.triggerElement,content:this.contentElement,options:{placement:this.placement,offsetDistance:this.offsetDistance,triggerStrategy:this.triggerStrategy,preventFromCloseOutside:this.preventFromCloseOutside,preventCloseFromInside:this.preventFromCloseInside,defaultState:this.defaultState,onShow:this.options.onShow,onHide:this.options.onHide,onToggle:({isHidden:n})=>{var r,l;(l=(r=this.options).onToggle)==null||l.call(r,{isHidden:n}),x(this.contentElement,"popover-toggle",{isHidden:n})},popper:this.options.popper}}),y.register("popover",this.contentElement,this)}static init(e,t){return new s(e,t)}static autoInit(e="[data-fx-popover]"){let t=J(e);for(let i of t)new s(i)}};function ce(s){s.directive("popover",(e,{},{cleanup:t})=>{let i=new C(e);t(()=>{i.cleanup()})})}var K=ce;document.addEventListener("alpine:init",()=>{K(window.Alpine)});})();