@tarragon-ui/js 0.10.0 → 0.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/tarragon-ui.js +1057 -1382
  2. package/package.json +8 -6
@@ -1,1389 +1,1064 @@
1
- const k = "tui-", K = `data-${k}`, h = (e) => K + e, S = (e, t) => `[${h(e)}${t ? `="${t}"` : ""}]`, v = "hidden", B = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', R = 1e3;
2
- var m = /* @__PURE__ */ ((e) => (e.Click = "click", e.DoubleClick = "dblclick", e.MouseUp = "mouseup", e.MouseDown = "mousedown", e.ContextMenu = "contextmenu", e.MouseWheel = "mousewheel", e.DOMMouseScroll = "DOMMouseScroll", e.MouseOver = "mouseover", e.MouseOut = "mouseout", e.MouseMove = "mousemove", e.SelectStart = "selectstart", e.SelectEnd = "selectend", e.KeyDown = "keydown", e.KeyPress = "keypress", e.KeyUp = "keyup", e.OrientationChange = "orientationchange", e.TouchStart = "touchstart", e.TouchMove = "touchmove", e.TouchEnd = "touchend", e.TouchCancel = "touchcancel", e.PointerDown = "pointerdown", e.PointerMove = "pointermove", e.PointerUp = "pointerup", e.PointerLeave = "pointerleave", e.PointerCancel = "pointercancel", e.GestureStart = "gesturestart", e.GestureChange = "gesturechange", e.GestureEnd = "gestureend", e.Focus = "focus", e.Blur = "blur", e.Change = "change", e.Reset = "reset", e.Select = "select", e.Submit = "submit", e.FocusIn = "focusin", e.FocusOut = "focusout", e.Load = "load", e.Unload = "unload", e.BeforeUnload = "beforeunload", e.BeforeToggle = "beforetoggle", e.Resize = "resize", e.Move = "move", e.DOMContentLoaded = "DOMContentLoaded", e.ReadyStateChange = "readystatechange", e.Error = "error", e.Abort = "abort", e.Scroll = "scroll", e.Input = "input", e.Toggle = "toggle", e.Close = "close", e))(m || {});
3
- const c = {
4
- AjaxForm: {
5
- Name: `${k}ajax-form`,
6
- Event: { Form: "form" }
7
- },
8
- AjaxHtml: {
9
- Name: `${k}ajax-html`
10
- },
11
- Dropdown: {
12
- Name: `${k}dropdown`
13
- },
14
- ExclusiveCheckbox: {
15
- Name: `${k}exclusive-checkbox`,
16
- Event: { Toggle: "toggle" }
17
- },
18
- SelectAll: { Name: `${k}select-all`, Event: { Toggle: "toggle" } },
19
- SearchFilter: { Name: `${k}search-filter` },
20
- Tabs: { Name: `${k}tabs` },
21
- UntilSelected: { Name: `${k}until-selected` },
22
- ValidateForm: {
23
- Name: `${k}validate-form`,
24
- Event: { Validate: "validate" }
25
- }
1
+ //#region src/constants.ts
2
+ var e = "tui-", t = `data-${e}`, n = (e) => t + e, r = (e, t) => `[${n(e)}${t ? `="${t}"` : ""}]`, i = "hidden", a = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", o = 1e3, s = /* @__PURE__ */ function(e) {
3
+ return e.Click = "click", e.DoubleClick = "dblclick", e.MouseUp = "mouseup", e.MouseDown = "mousedown", e.ContextMenu = "contextmenu", e.MouseWheel = "mousewheel", e.DOMMouseScroll = "DOMMouseScroll", e.MouseOver = "mouseover", e.MouseOut = "mouseout", e.MouseMove = "mousemove", e.SelectStart = "selectstart", e.SelectEnd = "selectend", e.KeyDown = "keydown", e.KeyPress = "keypress", e.KeyUp = "keyup", e.OrientationChange = "orientationchange", e.TouchStart = "touchstart", e.TouchMove = "touchmove", e.TouchEnd = "touchend", e.TouchCancel = "touchcancel", e.PointerDown = "pointerdown", e.PointerMove = "pointermove", e.PointerUp = "pointerup", e.PointerLeave = "pointerleave", e.PointerCancel = "pointercancel", e.GestureStart = "gesturestart", e.GestureChange = "gesturechange", e.GestureEnd = "gestureend", e.Focus = "focus", e.Blur = "blur", e.Change = "change", e.Reset = "reset", e.Select = "select", e.Submit = "submit", e.FocusIn = "focusin", e.FocusOut = "focusout", e.Load = "load", e.Unload = "unload", e.BeforeUnload = "beforeunload", e.BeforeToggle = "beforetoggle", e.Resize = "resize", e.Move = "move", e.DOMContentLoaded = "DOMContentLoaded", e.ReadyStateChange = "readystatechange", e.Error = "error", e.Abort = "abort", e.Scroll = "scroll", e.Input = "input", e.Toggle = "toggle", e.Close = "close", e;
4
+ }({}), c = {
5
+ AjaxForm: {
6
+ Name: `${e}ajax-form`,
7
+ Event: { Form: "form" }
8
+ },
9
+ AjaxHtml: { Name: `${e}ajax-html` },
10
+ Dropdown: { Name: `${e}dropdown` },
11
+ ExclusiveCheckbox: {
12
+ Name: `${e}exclusive-checkbox`,
13
+ Event: { Toggle: "toggle" }
14
+ },
15
+ SelectAll: {
16
+ Name: `${e}select-all`,
17
+ Event: { Toggle: "toggle" }
18
+ },
19
+ SearchFilter: { Name: `${e}search-filter` },
20
+ Tabs: { Name: `${e}tabs` },
21
+ UntilSelected: {
22
+ Name: `${e}until-selected`,
23
+ Event: { Toggle: "toggle" }
24
+ },
25
+ ValidateForm: {
26
+ Name: `${e}validate-form`,
27
+ Event: { Validate: "validate" }
28
+ }
26
29
  };
27
- function A(e, t, s, n = !1) {
28
- const a = new Event(`${e}:${t}`, {
29
- bubbles: !0,
30
- cancelable: n
31
- });
32
- return s.dispatchEvent(a);
30
+ //#endregion
31
+ //#region src/emitEvent.ts
32
+ function l(e, t, n, r = !1) {
33
+ let i = new Event(`${e}:${t}`, {
34
+ bubbles: !0,
35
+ cancelable: r
36
+ });
37
+ return n.dispatchEvent(i);
33
38
  }
34
- const q = "validate-group";
35
- customElements.define(
36
- c.ValidateForm.Name,
37
- class extends HTMLElement {
38
- form = null;
39
- groups = void 0;
40
- connectedCallback() {
41
- if (this.form = this.querySelector("form"), !this.form) {
42
- console.warn("No form was found");
43
- return;
44
- }
45
- this.groups = Array.from(
46
- this.form.querySelectorAll(S(q))
47
- ), this.form.setAttribute("novalidate", ""), this.form.addEventListener("submit", this.onSubmit), this.form.addEventListener("input", this.onInput), this.form.addEventListener("blur", this.onBlur, { capture: !0 }), A(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this), this.setAttribute(h("is-ready"), "");
48
- }
49
- disconnectedCallback() {
50
- this.form && (this.form.removeEventListener("submit", this.onSubmit), this.form.removeEventListener("input", this.onInput), this.form.removeEventListener("blur", this.onBlur, { capture: !0 }));
51
- }
52
- /**
53
- * Handle input events
54
- * @param {Event} event The event object
55
- */
56
- onInput = (e) => {
57
- if (!(e.target instanceof Element)) return;
58
- const t = e.target.closest(S(q)), s = t ?? e.target;
59
- if (t?.setAttribute(h(q), "interacted"), !(!t && s.getAttribute("aria-invalid") !== "true")) {
60
- if (t) {
61
- this.isGroupValid(t);
62
- return;
63
- }
64
- this.isFieldValid(s);
65
- }
66
- };
67
- /**
68
- * Handle blur events
69
- * @param {Event} event The event object
70
- */
71
- onBlur = (e) => {
72
- if (!(e.target instanceof Element)) return;
73
- const t = e.target.closest(`[${q}="interacted"]`);
74
- if (t) {
75
- this.isGroupValid(t);
76
- return;
77
- }
78
- if (!e.target.matches(":user-invalid")) {
79
- this.removeError(e.target);
80
- return;
81
- }
82
- this.showError(e.target);
83
- };
84
- /**
85
- * Handle submit events
86
- * @param {Event} event The event object
87
- */
88
- onSubmit = (e) => {
89
- if (!A(
90
- c.ValidateForm.Name,
91
- c.ValidateForm.Event.Validate,
92
- this,
93
- !0
94
- )) return;
95
- const s = this.checkGroupValidity();
96
- if (this.checkFieldValidity() && s) {
97
- A(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this);
98
- return;
99
- }
100
- e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), this.form?.querySelector(
101
- 'input:invalid, [aria-invalid="true"] :is([type="checkbox"], [type="radio"])'
102
- )?.focus({ focusVisible: !0 }), A(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this);
103
- };
104
- /**
105
- * Check the validity of fields that can be validated with HTMLFormElement.checkValidity().
106
- * Show error messages for fields that are not.
107
- *
108
- * @return {Boolean} If true, all fields are valid
109
- */
110
- checkFieldValidity() {
111
- if (!this.form || this.form.checkValidity()) return !0;
112
- const e = this.form.querySelectorAll(":invalid");
113
- for (const t of e)
114
- t instanceof HTMLElement && this.showError(t);
115
- return !1;
116
- }
117
- /**
118
- * Check if an input is valid and show/remove errors
119
- * @param {Element} field The field to validate
120
- * @return {Boolean} If true, field is valid
121
- */
122
- isFieldValid(e) {
123
- return e.matches(":invalid") ? (this.showError(e), !1) : (this.removeError(e), !0);
124
- }
125
- /**
126
- * Check the validity of all input groups
127
- * @return {Boolean} If true, all groups are valid
128
- */
129
- checkGroupValidity() {
130
- if (!this.groups) return !0;
131
- let e = !0;
132
- for (const t of this.groups)
133
- t instanceof HTMLElement && (this.isGroupValid(t) || (e = !1));
134
- return e;
135
- }
136
- /**
137
- * Check if an input group is valid and show/remove errors
138
- * @param {Element} group The input group
139
- * @return {Boolean} If true, the group is valid
140
- */
141
- isGroupValid(e) {
142
- return e.querySelector("input:checked") ? (this.removeError(e), !0) : (this.showError(e, !0), !1);
143
- }
144
- /**
145
- * Show error message on a field
146
- * @param {Element} field The field or fieldset
147
- * @param {Boolean} isGroup If true, field is a fieldset input group
148
- */
149
- showError(e, t = !1) {
150
- const s = this.getMessage(e, t);
151
- if (!s) return;
152
- e.setAttribute("aria-invalid", "true");
153
- const n = this.querySelector(
154
- S("validation-message-template")
155
- ), a = !!n, l = e.getAttribute("aria-describedby"), u = l ?? `${k}${crypto.randomUUID()}`;
156
- if (l) {
157
- const f = this.form?.querySelector(`#${l}`);
158
- if (f) {
159
- if (a) {
160
- const p = f.querySelector(
161
- S("slot", "form-message")
162
- );
163
- p && (p.textContent = s), f.id = u, e.setAttribute("aria-describedby", u);
164
- return;
165
- }
166
- f.textContent = s, f.id = u, e.setAttribute("aria-describedby", u);
167
- return;
168
- }
169
- }
170
- let g;
171
- if (a) {
172
- g = n.content.cloneNode(!0).firstElementChild, g.id = u;
173
- const p = g.querySelector(
174
- S("slot", "form-message")
175
- );
176
- p && (p.textContent = s);
177
- } else
178
- g = document.createElement("p"), g.textContent = s, g.id = u, g.className = "form-message";
179
- e.setAttribute("aria-describedby", u), t ? e.append(g) : e.after(g);
180
- }
181
- /**
182
- * Get the error message text
183
- * @param {Element} field The field or fieldset
184
- * @param {Boolean} isGroup If true, field is a fieldset input group
185
- * @return {String} The error message
186
- */
187
- getMessage(e, t = !1) {
188
- const s = e.getAttribute(h("validate-message"));
189
- if (s) return s;
190
- if (t) {
191
- const a = this.getAttribute(h("checkbox-group-message")) ?? "Please select at least one option.", l = this.getAttribute(h("radio-group-message")) ?? "Please select an option.";
192
- return e.querySelector('[type="checkbox"]') ? a : l;
193
- }
194
- return "validationMessage" in e ? e.validationMessage : "";
195
- }
196
- /**
197
- * Remove the error message from a field
198
- * @param {Element} field The field or fieldset
199
- */
200
- removeError(e) {
201
- e.removeAttribute("aria-invalid");
202
- const t = e.getAttribute("aria-describedby");
203
- t && this.form?.querySelector(`#${t}`)?.remove();
204
- }
205
- }
206
- );
207
- class C {
208
- static instance = void 0;
209
- baseHeaders = void 0;
210
- constructor(t = {}) {
211
- this.baseHeaders = t;
212
- }
213
- // Singleton pattern with initial configuration.
214
- // Subsequent calls without arguments will return the existing instance.
215
- // If arguments are provided, it reconfigures the existing instance or creates a new one.
216
- static getInstance(t) {
217
- return C.instance ? t && (C.instance.baseHeaders = {
218
- ...C.instance.baseHeaders,
219
- ...t
220
- }) : C.instance = new C(t), C.instance;
221
- }
222
- isMethod(t) {
223
- return ["GET", "PUT", "POST", "PATCH", "DELETE"].includes(t.toUpperCase());
224
- }
225
- buildQueryString(t) {
226
- if (!t) return "";
227
- const s = new URLSearchParams(t).toString();
228
- return s ? `?${s}` : "";
229
- }
230
- buildHeaders(t) {
231
- return {
232
- ...this.baseHeaders,
233
- ...t
234
- };
235
- }
236
- async send(t, s, n) {
237
- try {
238
- const a = s.toUpperCase(), l = this.buildQueryString(n.queryParameters), u = `${t}${l}`, g = {
239
- method: a,
240
- headers: this.buildHeaders(n.headers)
241
- };
242
- a !== "GET" && "data" in n && n.data && (g.body = n.data);
243
- const f = await fetch(u, g);
244
- if (!f.ok) {
245
- const b = {
246
- message: "Request failed",
247
- status: f.status
248
- };
249
- if (f.headers.get("content-type")?.includes("application/json"))
250
- try {
251
- const y = await f.json();
252
- b.message = y.message ?? y.error ?? b.message;
253
- } catch (y) {
254
- b.message = `Failed to parse error JSON: ${b.message}`, b.error = y instanceof Error ? y : new Error(String(y));
255
- }
256
- else {
257
- const y = await f.text();
258
- y && (b.message = `Server responded with an error: ${y.substring(0, 100)}`);
259
- }
260
- return [b, void 0];
261
- }
262
- const p = f.headers.get("content-type");
263
- if (p?.includes("application/json"))
264
- return [void 0, await f.json()];
265
- if (p?.includes("text/html")) {
266
- const b = await f.text();
267
- return [void 0, { type: "html", document: new DOMParser().parseFromString(b, "text/html") }];
268
- } else if (p?.includes("text/plain"))
269
- return [void 0, { type: "json", message: await f.text() }];
270
- return [void 0, { type: "json", message: "Request successful, no content." }];
271
- } catch (a) {
272
- return a instanceof Error ? [{ message: "Network error", error: a }, void 0] : [{ message: "An unknown error occurred" }, void 0];
273
- }
274
- }
275
- get(t, s) {
276
- return this.send(t, "GET", s ?? {});
277
- }
278
- put(t, s) {
279
- return this.send(t, "PUT", s ?? {});
280
- }
281
- post(t, s) {
282
- return this.send(t, "POST", s ?? {});
283
- }
284
- patch(t, s) {
285
- return this.send(t, "PATCH", s ?? {});
286
- }
287
- delete(t, s) {
288
- return this.send(t, "DELETE", s ?? {});
289
- }
39
+ //#endregion
40
+ //#region src/components/validate-form/validate-form.ts
41
+ var u = "validate-group";
42
+ customElements.define(c.ValidateForm.Name, class extends HTMLElement {
43
+ form = null;
44
+ groups = void 0;
45
+ connectedCallback() {
46
+ if (this.form = this.querySelector("form"), !this.form) {
47
+ console.warn("No form was found");
48
+ return;
49
+ }
50
+ this.groups = Array.from(this.form.querySelectorAll(r(u))), this.form.setAttribute("novalidate", ""), this.form.addEventListener("submit", this.onSubmit), this.form.addEventListener("input", this.onInput), this.form.addEventListener("blur", this.onBlur, { capture: !0 }), l(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this), this.setAttribute(n("is-ready"), "");
51
+ }
52
+ disconnectedCallback() {
53
+ this.form && (this.form.removeEventListener("submit", this.onSubmit), this.form.removeEventListener("input", this.onInput), this.form.removeEventListener("blur", this.onBlur, { capture: !0 }));
54
+ }
55
+ onInput = (e) => {
56
+ if (!(e.target instanceof Element)) return;
57
+ let t = e.target.closest(r(u)), i = t ?? e.target;
58
+ if (t?.setAttribute(n(u), "interacted"), !(!t && i.getAttribute("aria-invalid") !== "true")) {
59
+ if (t) {
60
+ this.isGroupValid(t);
61
+ return;
62
+ }
63
+ this.isFieldValid(i);
64
+ }
65
+ };
66
+ onBlur = (e) => {
67
+ if (!(e.target instanceof Element)) return;
68
+ let t = e.target.closest(`[${u}="interacted"]`);
69
+ if (t) {
70
+ this.isGroupValid(t);
71
+ return;
72
+ }
73
+ if (!e.target.matches(":user-invalid")) {
74
+ this.removeError(e.target);
75
+ return;
76
+ }
77
+ this.showError(e.target);
78
+ };
79
+ onSubmit = (e) => {
80
+ if (!l(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this, !0)) return;
81
+ let t = this.checkGroupValidity();
82
+ if (this.checkFieldValidity() && t) {
83
+ l(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this);
84
+ return;
85
+ }
86
+ e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), (this.form?.querySelector("input:invalid, [aria-invalid=\"true\"] :is([type=\"checkbox\"], [type=\"radio\"])"))?.focus({ focusVisible: !0 }), l(c.ValidateForm.Name, c.ValidateForm.Event.Validate, this);
87
+ };
88
+ checkFieldValidity() {
89
+ if (!this.form || this.form.checkValidity()) return !0;
90
+ let e = this.form.querySelectorAll(":invalid");
91
+ for (let t of e) t instanceof HTMLElement && this.showError(t);
92
+ return !1;
93
+ }
94
+ isFieldValid(e) {
95
+ return e.matches(":invalid") ? (this.showError(e), !1) : (this.removeError(e), !0);
96
+ }
97
+ checkGroupValidity() {
98
+ if (!this.groups) return !0;
99
+ let e = !0;
100
+ for (let t of this.groups) t instanceof HTMLElement && (this.isGroupValid(t) || (e = !1));
101
+ return e;
102
+ }
103
+ isGroupValid(e) {
104
+ return e.querySelector("input:checked") ? (this.removeError(e), !0) : (this.showError(e, !0), !1);
105
+ }
106
+ showError(e, t = !1) {
107
+ let n = this.getMessage(e, t);
108
+ if (!n) return;
109
+ e.setAttribute("aria-invalid", "true");
110
+ let i = this.querySelector(r("validation-message-template")), a = !!i, o = e.getAttribute("aria-describedby"), s = o ?? `tui-${crypto.randomUUID()}`;
111
+ if (o) {
112
+ let t = this.form?.querySelector(`#${o}`);
113
+ if (t) {
114
+ if (a) {
115
+ let i = t.querySelector(r("slot", "form-message"));
116
+ i && (i.textContent = n), t.id = s, e.setAttribute("aria-describedby", s);
117
+ return;
118
+ }
119
+ t.textContent = n, t.id = s, e.setAttribute("aria-describedby", s);
120
+ return;
121
+ }
122
+ }
123
+ let c;
124
+ if (a) {
125
+ c = i.content.cloneNode(!0).firstElementChild, c.id = s;
126
+ let e = c.querySelector(r("slot", "form-message"));
127
+ e && (e.textContent = n);
128
+ } else c = document.createElement("p"), c.textContent = n, c.id = s, c.className = "form-message";
129
+ e.setAttribute("aria-describedby", s), t ? e.append(c) : e.after(c);
130
+ }
131
+ getMessage(e, t = !1) {
132
+ let r = e.getAttribute(n("validate-message"));
133
+ if (r) return r;
134
+ if (t) {
135
+ let t = this.getAttribute(n("checkbox-group-message")) ?? "Please select at least one option.", r = this.getAttribute(n("radio-group-message")) ?? "Please select an option.";
136
+ return e.querySelector("[type=\"checkbox\"]") ? t : r;
137
+ }
138
+ return "validationMessage" in e ? e.validationMessage : "";
139
+ }
140
+ removeError(e) {
141
+ e.removeAttribute("aria-invalid");
142
+ let t = e.getAttribute("aria-describedby");
143
+ t && this.form?.querySelector(`#${t}`)?.remove();
144
+ }
145
+ });
146
+ var d = class e {
147
+ static instance = void 0;
148
+ baseHeaders = void 0;
149
+ constructor(e = {}) {
150
+ this.baseHeaders = e;
151
+ }
152
+ static getInstance(t) {
153
+ return e.instance ? t && (e.instance.baseHeaders = {
154
+ ...e.instance.baseHeaders,
155
+ ...t
156
+ }) : e.instance = new e(t), e.instance;
157
+ }
158
+ isMethod(e) {
159
+ return [
160
+ "GET",
161
+ "PUT",
162
+ "POST",
163
+ "PATCH",
164
+ "DELETE"
165
+ ].includes(e.toUpperCase());
166
+ }
167
+ buildQueryString(e) {
168
+ if (!e) return "";
169
+ let t = new URLSearchParams(e).toString();
170
+ return t ? `?${t}` : "";
171
+ }
172
+ buildHeaders(e) {
173
+ return {
174
+ ...this.baseHeaders,
175
+ ...e
176
+ };
177
+ }
178
+ async send(e, t, n) {
179
+ try {
180
+ let r = t.toUpperCase(), i = `${e}${this.buildQueryString(n.queryParameters)}`, a = {
181
+ method: r,
182
+ headers: this.buildHeaders(n.headers)
183
+ };
184
+ r !== "GET" && "data" in n && n.data && (a.body = n.data);
185
+ let o = await fetch(i, a);
186
+ if (!o.ok) {
187
+ let e = {
188
+ message: "Request failed",
189
+ status: o.status
190
+ };
191
+ if (o.headers.get("content-type")?.includes("application/json")) try {
192
+ let t = await o.json();
193
+ e.message = t.message ?? t.error ?? e.message;
194
+ } catch (t) {
195
+ e.message = `Failed to parse error JSON: ${e.message}`, e.error = t instanceof Error ? t : Error(String(t));
196
+ }
197
+ else {
198
+ let t = await o.text();
199
+ t && (e.message = `Server responded with an error: ${t.substring(0, 100)}`);
200
+ }
201
+ return [e, void 0];
202
+ }
203
+ let s = o.headers.get("content-type");
204
+ if (s?.includes("application/json")) return [void 0, await o.json()];
205
+ if (s?.includes("text/html")) {
206
+ let e = await o.text();
207
+ return [void 0, {
208
+ type: "html",
209
+ document: new DOMParser().parseFromString(e, "text/html")
210
+ }];
211
+ } else if (s?.includes("text/plain")) return [void 0, {
212
+ type: "json",
213
+ message: await o.text()
214
+ }];
215
+ return [void 0, {
216
+ type: "json",
217
+ message: "Request successful, no content."
218
+ }];
219
+ } catch (e) {
220
+ return e instanceof Error ? [{
221
+ message: "Network error",
222
+ error: e
223
+ }, void 0] : [{ message: "An unknown error occurred" }, void 0];
224
+ }
225
+ }
226
+ get(e, t) {
227
+ return this.send(e, "GET", t ?? {});
228
+ }
229
+ put(e, t) {
230
+ return this.send(e, "PUT", t ?? {});
231
+ }
232
+ post(e, t) {
233
+ return this.send(e, "POST", t ?? {});
234
+ }
235
+ patch(e, t) {
236
+ return this.send(e, "PATCH", t ?? {});
237
+ }
238
+ delete(e, t) {
239
+ return this.send(e, "DELETE", t ?? {});
240
+ }
241
+ }.getInstance({ "Content-Type": "application/json" }), f = { staleTime: 0 }, p = class e {
242
+ static instance = void 0;
243
+ cache = /* @__PURE__ */ new Map();
244
+ subscriptions = /* @__PURE__ */ new Map();
245
+ refetchIntervals = /* @__PURE__ */ new Map();
246
+ static getInstance() {
247
+ return e.instance ??= new e(), e.instance;
248
+ }
249
+ updateQueryState(e, t, n) {
250
+ let r = this.cache.get(e), i = r ? { ...r } : {
251
+ data: void 0,
252
+ isFetching: !1,
253
+ error: null,
254
+ meta: { ...f }
255
+ };
256
+ n && (i.meta = {
257
+ ...i.meta,
258
+ ...n
259
+ });
260
+ let a = {
261
+ ...i,
262
+ ...t
263
+ };
264
+ a.meta = {
265
+ ...f,
266
+ ...i.meta
267
+ }, this.cache.set(e, a), this.notifySubscribers(e, a), this.manageRefetchInterval(e, a.meta.staleTime);
268
+ }
269
+ notifySubscribers(e, t) {
270
+ this.subscriptions.get(e)?.forEach((e) => {
271
+ e(t);
272
+ });
273
+ }
274
+ manageRefetchInterval(e, t) {
275
+ let n = this.refetchIntervals.get(e);
276
+ if (n && (clearInterval(n), this.refetchIntervals.delete(e)), t && t > 0 && this.subscriptions.has(e) && this.subscriptions.get(e).size > 0) {
277
+ let n = window.setInterval(() => {
278
+ this.invalidateQuery(e);
279
+ }, t);
280
+ this.refetchIntervals.set(e, n);
281
+ }
282
+ }
283
+ subscribe(e, t, n) {
284
+ this.subscriptions.has(e) || this.subscriptions.set(e, /* @__PURE__ */ new Set()), this.subscriptions.get(e).add(t), this.updateQueryState(e, {}, n);
285
+ let r = this.cache.get(e);
286
+ return r && t(r), this.manageRefetchInterval(e, r?.meta.staleTime ?? 0), () => {
287
+ this.subscriptions.get(e)?.delete(t), this.subscriptions.get(e)?.size === 0 && (this.subscriptions.delete(e), this.manageRefetchInterval(e, 0));
288
+ };
289
+ }
290
+ get(e) {
291
+ let t = this.cache.get(e);
292
+ if (t) return t;
293
+ }
294
+ setQueryData(e, t, n) {
295
+ this.updateQueryState(e, {
296
+ data: t,
297
+ error: null,
298
+ isFetching: !1
299
+ }, n);
300
+ }
301
+ async fetchQuery(e, t) {
302
+ let n = this.cache.get(e);
303
+ if (!n || n.isFetching) return;
304
+ this.updateQueryState(e, {
305
+ isFetching: !0,
306
+ error: null
307
+ });
308
+ let [r, i] = await d.get(e);
309
+ if (r) {
310
+ this.updateQueryState(e, {
311
+ error: r.message,
312
+ isFetching: !1
313
+ }, t);
314
+ return;
315
+ }
316
+ this.updateQueryState(e, {
317
+ data: i,
318
+ isFetching: !1,
319
+ error: null
320
+ }, t);
321
+ }
322
+ invalidateQuery(e) {
323
+ let t = this.cache.get(e);
324
+ if (!t) {
325
+ console.warn(`No query exists for key: ${e}`);
326
+ return;
327
+ }
328
+ t.isFetching || this.fetchQuery(e);
329
+ }
330
+ }.getInstance();
331
+ //#endregion
332
+ //#region src/components/ajax-html/ajax-html.ts
333
+ customElements.define(c.AjaxForm.Name, class extends HTMLElement {
334
+ form = null;
335
+ announce = null;
336
+ announceTitle = null;
337
+ spinner = null;
338
+ messageSubmitting = "Submitting...";
339
+ messageSuccess = "Data submitted successfully";
340
+ messageError = "An error occurred";
341
+ actionOnSuccess = "none";
342
+ keepFields = !1;
343
+ queryKeyToInvalidate = null;
344
+ isSubmittingAttribute = "is-submitting";
345
+ connectedCallback() {
346
+ if (this.form = this.querySelector("form"), !this.form) return;
347
+ let e = this.querySelector("[role=\"status\"]");
348
+ e ? (this.announce = e, this.announceTitle = e.querySelector(".alert-title")) : (this.announce = document.createElement("div"), this.announce.setAttribute("role", "status"), this.announceTitle = document.createElement("p"), this.announceTitle.className = "alert-title", this.announce.append(this.announceTitle), this.append(this.announce)), this.messageSubmitting = this.getAttribute(n("message-submitting")) ?? this.messageSubmitting, this.messageSuccess = this.getAttribute(n("message-success")) ?? this.messageSuccess, this.messageError = this.getAttribute(n("message-error")) ?? this.messageError, this.keepFields = this.hasAttribute(n("keep-fields")), this.queryKeyToInvalidate = this.getAttribute(n("query-key"));
349
+ let t = this.getAttribute(n("action-on-success"));
350
+ t === "remove-form" ? this.actionOnSuccess = "remove-form" : t === "remove-message" && (this.actionOnSuccess = "remove-message"), this.spinner = document.createElement("div"), this.spinner.className = "loading", this.spinner.innerHTML = "<div class=\"spinner\"></div>", this.append(this.spinner), this.form.addEventListener("submit", this);
351
+ }
352
+ disconnectedCallback() {
353
+ this.form?.removeEventListener("submit", this);
354
+ }
355
+ async handleEvent(e) {
356
+ e.type === "submit" && await this.handleSubmit(e);
357
+ }
358
+ async handleSubmit(e) {
359
+ if (!this.form || (e.preventDefault(), this.isDisabled())) return;
360
+ this.disable(), this.showStatus(this.messageSubmitting, "pending");
361
+ let { action: t, method: n } = this.form;
362
+ if (!d.isMethod(n)) {
363
+ console.error("Method is not a valid value"), this.showStatus(this.messageError, "error");
364
+ return;
365
+ }
366
+ let r = null;
367
+ this.spinner && (r = this.form.querySelector(":focus"));
368
+ let [i, a] = await d.send(t, n, {
369
+ data: this.serialize(),
370
+ headers: {
371
+ "Content-Type": "application/x-www-form-urlencoded",
372
+ "X-Requested-With": "XMLHttpRequest"
373
+ }
374
+ });
375
+ if (this.enable(), r?.focus(), i) {
376
+ console.error("An error occurred", i), this.showStatus(this.messageError, "error");
377
+ return;
378
+ }
379
+ if (this.actionOnSuccess === "remove-form" && this.form.remove(), this.keepFields || this.reset(), a.type === "html") {
380
+ if (!this.queryKeyToInvalidate) return;
381
+ p.setQueryData(this.queryKeyToInvalidate, a), this.showStatus(this.messageSuccess, "success");
382
+ return;
383
+ }
384
+ if (this.showStatus(a.message ?? this.messageSuccess, "success"), a.redirectUrl) {
385
+ window.location.href = a.redirectUrl;
386
+ return;
387
+ }
388
+ a.queryKey && p.invalidateQuery(a.queryKey), this.queryKeyToInvalidate && p.invalidateQuery(this.queryKeyToInvalidate), l(c.AjaxForm.Name, c.AjaxForm.Event.Form, this);
389
+ }
390
+ disable() {
391
+ this.setAttribute(n(this.isSubmittingAttribute), "");
392
+ }
393
+ enable() {
394
+ this.removeAttribute(n(this.isSubmittingAttribute));
395
+ }
396
+ isDisabled() {
397
+ return this.hasAttribute(n(this.isSubmittingAttribute));
398
+ }
399
+ showStatus(e, t) {
400
+ if (!(!this.announce || !this.announceTitle)) switch (this.announceTitle.textContent = e, this.showStatusIcon(t), t) {
401
+ case "success":
402
+ this.announce.className = "alert success", this.actionOnSuccess === "remove-message" && setTimeout(() => {
403
+ !this.announce || !this.announceTitle || (this.announceTitle.textContent = "", this.announce.className = "", this.showStatusIcon("pending"));
404
+ }, 6 * o);
405
+ break;
406
+ case "error":
407
+ this.announce.className = "alert danger";
408
+ break;
409
+ case "pending":
410
+ this.announce.className = "alert visually-hidden";
411
+ break;
412
+ }
413
+ }
414
+ showStatusIcon(e) {
415
+ if (!this.announce) return;
416
+ let t = this.announce.querySelector(r("announce-success-icon")), n = this.announce.querySelector(r("announce-error-icon"));
417
+ switch (e) {
418
+ case "success":
419
+ t?.removeAttribute(i), n?.setAttribute(i, "");
420
+ break;
421
+ case "error":
422
+ t?.setAttribute(i, ""), n?.removeAttribute(i);
423
+ break;
424
+ case "pending":
425
+ t?.setAttribute(i, ""), n?.setAttribute(i, "");
426
+ break;
427
+ }
428
+ }
429
+ serialize() {
430
+ if (!this.form) return "";
431
+ let e = new FormData(this.form), t = new URLSearchParams();
432
+ for (let [n, r] of e) r instanceof File || t.append(n, r);
433
+ return t.toString();
434
+ }
435
+ reset() {
436
+ this.form && this.form.reset();
437
+ }
438
+ }), customElements.define(c.AjaxHtml.Name, class extends HTMLElement {
439
+ queryKey = null;
440
+ unsubscribe = null;
441
+ initialFetchTriggered = !1;
442
+ intersectionObserver = null;
443
+ staleTime;
444
+ connectedCallback() {
445
+ if (!this.id) {
446
+ console.warn(`${c.AjaxHtml.Name} requires a "id" attribute.`, this);
447
+ return;
448
+ }
449
+ if (this.queryKey = this.getAttribute(n("query-key")), !this.queryKey) {
450
+ console.warn(`${c.AjaxHtml.Name} requires a "query-key" attribute.`, this);
451
+ return;
452
+ }
453
+ this.staleTime = this.hasAttribute(n("stale-time")) ? parseInt(this.getAttribute(n("stale-time")), 10) : void 0, this.unsubscribe = p.subscribe(this.queryKey, (e) => {
454
+ this.renderContent(e);
455
+ }, { staleTime: this.staleTime });
456
+ let e = this.getAttribute(n("load-strategy"));
457
+ if (e) switch (e) {
458
+ case "server-side":
459
+ this.initialFetchTriggered = !0;
460
+ break;
461
+ case "initial":
462
+ this.triggerInitialFetch();
463
+ break;
464
+ case "lazy":
465
+ this.intersectionObserver = new IntersectionObserver(this.handleIntersection, { rootMargin: "0px 0px 100px 0px" }), this.intersectionObserver.observe(this);
466
+ break;
467
+ case "defer":
468
+ document.addEventListener("DOMContentLoaded", this.handleDomContentLoaded, { once: !0 });
469
+ break;
470
+ }
471
+ else this.initialFetchTriggered = !0;
472
+ }
473
+ disconnectedCallback() {
474
+ this.unsubscribe && this.unsubscribe(), document.removeEventListener("DOMContentLoaded", this.handleDomContentLoaded), this.intersectionObserver &&= (this.intersectionObserver.unobserve(this), this.intersectionObserver.disconnect(), null);
475
+ }
476
+ handleDomContentLoaded = () => {
477
+ this.triggerInitialFetch();
478
+ };
479
+ handleIntersection = (e) => {
480
+ e.forEach((e) => {
481
+ e.isIntersecting && (this.triggerInitialFetch(), this.intersectionObserver && this.intersectionObserver.unobserve(this));
482
+ });
483
+ };
484
+ triggerInitialFetch() {
485
+ this.queryKey && (this.initialFetchTriggered || (this.initialFetchTriggered = !0, p.invalidateQuery(this.queryKey)));
486
+ }
487
+ renderContent(e) {
488
+ if (!this.initialFetchTriggered || !e.data || e.data.type !== "html") return;
489
+ let t = e.data.document, n = t.querySelector(`#${this.id}`);
490
+ if (n && n.id === this.id) {
491
+ this.innerHTML = n.innerHTML;
492
+ return;
493
+ }
494
+ if (t.body.innerHTML.trim().length > 0) {
495
+ this.innerHTML = t.body.innerHTML;
496
+ return;
497
+ }
498
+ e.isFetching || (this.innerHTML = "<p>No results found.</p>");
499
+ }
500
+ });
501
+ //#endregion
502
+ //#region src/ready.ts
503
+ function m(e) {
504
+ e.setAttribute(n("state"), "ready");
290
505
  }
291
- const F = C.getInstance({
292
- "Content-Type": "application/json"
293
- }), P = {
294
- staleTime: 0
506
+ //#endregion
507
+ //#region src/components/dropdown/dropdown.ts
508
+ var h = "[popover]", g = (e) => `[popovertarget="${e}"]`, _ = {
509
+ open: "open",
510
+ closed: "closed"
295
511
  };
296
- class L {
297
- static instance = void 0;
298
- cache = /* @__PURE__ */ new Map();
299
- subscriptions = /* @__PURE__ */ new Map();
300
- refetchIntervals = /* @__PURE__ */ new Map();
301
- static getInstance() {
302
- return L.instance ??= new L(), L.instance;
303
- }
304
- // Centralized state update logic
305
- updateQueryState(t, s, n) {
306
- const a = this.cache.get(t), l = a ? { ...a } : {
307
- data: void 0,
308
- isFetching: !1,
309
- error: null,
310
- meta: { ...P }
311
- };
312
- n && (l.meta = { ...l.meta, ...n });
313
- const u = { ...l, ...s };
314
- u.meta = {
315
- ...P,
316
- ...l.meta
317
- }, this.cache.set(t, u), this.notifySubscribers(t, u), this.manageRefetchInterval(t, u.meta.staleTime);
318
- }
319
- notifySubscribers(t, s) {
320
- this.subscriptions.get(t)?.forEach((n) => {
321
- n(s);
322
- });
323
- }
324
- manageRefetchInterval(t, s) {
325
- const n = this.refetchIntervals.get(t);
326
- if (n && (clearInterval(n), this.refetchIntervals.delete(t)), s && s > 0 && this.subscriptions.has(t) && this.subscriptions.get(t).size > 0) {
327
- const a = window.setInterval(() => {
328
- this.invalidateQuery(t);
329
- }, s);
330
- this.refetchIntervals.set(t, a);
331
- }
332
- }
333
- /**
334
- * Subscribes to a query key.
335
- * @param key The query key.
336
- * @param callback The function to call when the query's data or state updates.
337
- * @param options Query options that might affect initial state or refetch behavior.
338
- * @returns An unsubscribe function.
339
- */
340
- subscribe(t, s, n) {
341
- this.subscriptions.has(t) || this.subscriptions.set(t, /* @__PURE__ */ new Set()), this.subscriptions.get(t).add(s), this.updateQueryState(t, {}, n);
342
- const l = this.cache.get(t);
343
- return l && s(l), this.manageRefetchInterval(t, l?.meta.staleTime ?? 0), () => {
344
- this.subscriptions.get(t)?.delete(s), this.subscriptions.get(t)?.size === 0 && (this.subscriptions.delete(t), this.manageRefetchInterval(t, 0));
345
- };
346
- }
347
- /**
348
- * Gets the current state of a query.
349
- * @param key The query key.
350
- * @returns The current QueryResult, or undefined if not initialized.
351
- */
352
- get(t) {
353
- const s = this.cache.get(t);
354
- if (s)
355
- return s;
356
- }
357
- /**
358
- * Sets the data for a query key and notifies subscribers.
359
- * This is used for pushing data without fetching (e.g., from mutations/forms).
360
- * @param key The query key.
361
- * @param data The data to set.
362
- * @param options Options for this query.
363
- */
364
- setQueryData(t, s, n) {
365
- this.updateQueryState(
366
- t,
367
- {
368
- data: s,
369
- error: null,
370
- isFetching: !1
371
- },
372
- n
373
- );
374
- }
375
- /**
376
- * Fetches data for a query key. This is an internal method called by subscribe/invalidate.
377
- * It ensures only one fetch is active at a time for a given key.
378
- */
379
- async fetchQuery(t, s) {
380
- const n = this.cache.get(t);
381
- if (!n || n.isFetching)
382
- return;
383
- this.updateQueryState(t, {
384
- isFetching: !0,
385
- // Always true when a fetch is in progress
386
- error: null
387
- });
388
- const [a, l] = await F.get(t);
389
- if (a) {
390
- this.updateQueryState(
391
- t,
392
- {
393
- error: a.message,
394
- isFetching: !1
395
- },
396
- s
397
- );
398
- return;
399
- }
400
- this.updateQueryState(
401
- t,
402
- {
403
- data: l,
404
- isFetching: !1,
405
- error: null
406
- },
407
- s
408
- );
409
- }
410
- /**
411
- * Invalidates a query, triggering an immediate refetch
412
- * @param key The query key.
413
- */
414
- invalidateQuery(t) {
415
- const s = this.cache.get(t);
416
- if (!s) {
417
- console.warn(`No query exists for key: ${t}`);
418
- return;
419
- }
420
- s.isFetching || this.fetchQuery(t);
421
- }
512
+ //#endregion
513
+ //#region src/components/until-selected/until-selected.ts
514
+ customElements.define(c.Dropdown.Name, class extends HTMLElement {
515
+ popoverElement = null;
516
+ trigger = null;
517
+ focusableElements = [];
518
+ searchString = "";
519
+ searchTimeout = -1;
520
+ connectedCallback() {
521
+ let e = this.querySelector(h);
522
+ if (!e) {
523
+ console.error(`${c.Dropdown.Name} component: Missing element with selector "${h}"`);
524
+ return;
525
+ }
526
+ this.popoverElement = e;
527
+ let t = this.querySelector(g(this.popoverElement.id));
528
+ if (!t) {
529
+ console.error(`${c.Dropdown.Name} component: Missing element with selector "${g(this.popoverElement.id)}"`);
530
+ return;
531
+ }
532
+ this.trigger = t, this.focusableElements = this.getFocusableElementsForTrap(), this.popoverElement.setAttribute(n("state"), _.closed), this.addEventListener(s.KeyDown, this.handleKeydown), this.popoverElement.addEventListener(s.Toggle, this.handleToggle), m(this);
533
+ }
534
+ disconnectedCallback() {
535
+ this.removeEventListener(s.KeyDown, this.handleKeydown), this.popoverElement?.removeEventListener(s.Toggle, this.handleToggle);
536
+ }
537
+ getFocusableElementsForTrap() {
538
+ return this.popoverElement ? [...Array.from(this.popoverElement.querySelectorAll(a))].filter(Boolean) : [];
539
+ }
540
+ handleToggle = (e) => {
541
+ if (e.newState === "open") {
542
+ this.onPopoverOpen();
543
+ return;
544
+ }
545
+ this.onPopoverClose();
546
+ };
547
+ onPopoverOpen() {
548
+ this.popoverElement && this.popoverElement.setAttribute(n("state"), _.open);
549
+ }
550
+ onPopoverClose() {
551
+ this.popoverElement && this.popoverElement.setAttribute(n("state"), _.closed);
552
+ }
553
+ isOpen() {
554
+ return this.popoverElement ? this.popoverElement.getAttribute(n("state")) === _.open : !1;
555
+ }
556
+ handleKeydown = (e) => {
557
+ if (this.isOpen()) {
558
+ this.handleKeyboardWhenOpen(e);
559
+ return;
560
+ }
561
+ this.handleKeyboardWhenClosed(e);
562
+ };
563
+ handleKeyboardWhenClosed = (e) => {
564
+ if (!this.isOpen()) switch (e.key) {
565
+ case "Enter":
566
+ case " ":
567
+ case "ArrowDown":
568
+ e.preventDefault(), this.openPopover(), this.focusOptionByIndex(0);
569
+ break;
570
+ case "ArrowUp":
571
+ e.preventDefault(), this.openPopover(), this.focusOptionByIndex(this.focusableElements.length - 1);
572
+ break;
573
+ default:
574
+ /^[a-zA-Z0-9]$/.test(e.key) && (e.preventDefault(), this.openPopover(), this.handleSearchString(e.key));
575
+ break;
576
+ }
577
+ };
578
+ handleKeyboardWhenOpen = (e) => {
579
+ if (this.isOpen()) switch (e.key) {
580
+ case " ":
581
+ e.preventDefault(), this.triggerAction(e);
582
+ break;
583
+ case "Tab":
584
+ this.closePopover(), e.shiftKey && (e.preventDefault(), this.trigger?.focus());
585
+ break;
586
+ case "ArrowDown":
587
+ e.target && (e.target instanceof HTMLAnchorElement || e.target instanceof HTMLButtonElement) && this.focusOptionByStep(e.target, 1, e);
588
+ break;
589
+ case "ArrowUp":
590
+ e.target && (e.target instanceof HTMLAnchorElement || e.target instanceof HTMLButtonElement) && this.focusOptionByStep(e.target, -1, e);
591
+ break;
592
+ case "Home":
593
+ e.preventDefault(), this.focusOptionByIndex(0);
594
+ break;
595
+ case "End":
596
+ e.preventDefault(), this.focusOptionByIndex(this.focusableElements.length - 1);
597
+ break;
598
+ default:
599
+ /^[a-zA-Z0-9]$/.test(e.key) && (e.preventDefault(), this.handleSearchString(e.key));
600
+ break;
601
+ }
602
+ };
603
+ openPopover = () => {
604
+ this.trigger && (this.isOpen() || this.trigger.click());
605
+ };
606
+ closePopover = () => {
607
+ this.popoverElement && this.isOpen() && this.popoverElement.hidePopover();
608
+ };
609
+ triggerAction = (e) => {
610
+ e.target instanceof HTMLAnchorElement && e.target.click();
611
+ };
612
+ focusOptionByStep = (e, t, n) => {
613
+ let r = this.focusableElements;
614
+ if (!r.length) return;
615
+ let i = e, a = r.indexOf(i);
616
+ if (n.preventDefault(), a === -1) {
617
+ r[0]?.focus();
618
+ return;
619
+ }
620
+ let o = (a + t + r.length) % r.length;
621
+ o >= r.length || o < 0 || r[o]?.focus();
622
+ };
623
+ focusOptionByIndex(e) {
624
+ if (!this.focusableElements.length) return;
625
+ let t = Math.max(0, Math.min(e, this.focusableElements.length - 1));
626
+ this.focusableElements[t]?.focus();
627
+ }
628
+ handleSearchString(e) {
629
+ if (clearTimeout(this.searchTimeout), this.searchString += e.toLowerCase(), !this.focusableElements.length) return;
630
+ let t = this.getActiveOption(), n = this.searchString.length === 1 && t ? this.focusableElements.indexOf(t) + 1 : 0, r = this.findOptionBySearchString(this.focusableElements, n) ?? this.findOptionBySearchString(this.focusableElements, 0);
631
+ r && r.focus(), this.searchTimeout = window.setTimeout(() => {
632
+ this.searchString = "";
633
+ }, 500);
634
+ }
635
+ findOptionBySearchString(e, t) {
636
+ for (let n = 0; n < e.length; n++) {
637
+ let r = (t + n) % e.length;
638
+ if ((e[r]?.textContent.trim().toLowerCase())?.startsWith(this.searchString)) return e[r] ?? null;
639
+ }
640
+ return null;
641
+ }
642
+ getActiveOption() {
643
+ let e = document.activeElement;
644
+ return !e || !(e instanceof HTMLAnchorElement) || !(e instanceof HTMLButtonElement) ? null : this.focusableElements.find((t) => t === e) ?? null;
645
+ }
646
+ }), customElements.define(c.ExclusiveCheckbox.Name, class extends HTMLElement {
647
+ targetName = null;
648
+ exclusiveCheckbox = null;
649
+ checkboxes = null;
650
+ connectedCallback() {
651
+ this.targetName = this.getAttribute(n("target-name")), this.exclusiveCheckbox = this.querySelector("input"), !(!this.targetName || !this.exclusiveCheckbox || !this.parentElement) && (this.checkboxes = [...this.parentElement.querySelectorAll(`[name="${this.targetName}"]`)], this.checkboxes.length !== 0 && this.addEvents());
652
+ }
653
+ disconnectedCallback() {
654
+ if (this.exclusiveCheckbox && this.exclusiveCheckbox.removeEventListener(s.Change, this.handleExclusiveChange), this.checkboxes) for (let e of this.checkboxes) e.removeEventListener(s.Change, this.handleCheckboxChange);
655
+ }
656
+ addEvents() {
657
+ if (!(!this.exclusiveCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
658
+ this.exclusiveCheckbox.addEventListener("change", this.handleExclusiveChange);
659
+ for (let e of this.checkboxes) e.disabled || e.addEventListener(s.Change, this.handleCheckboxChange);
660
+ }
661
+ }
662
+ handleExclusiveChange = () => {
663
+ if (!this.exclusiveCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
664
+ let e = this.exclusiveCheckbox.checked;
665
+ for (let t of this.checkboxes) t.disabled || e && (t.checked = !1);
666
+ this.exclusiveCheckbox.indeterminate = !1, l(c.ExclusiveCheckbox.Name, c.ExclusiveCheckbox.Event.Toggle, this.exclusiveCheckbox);
667
+ };
668
+ handleCheckboxChange = () => {
669
+ if (!this.exclusiveCheckbox || !this.checkboxes || this.checkboxes.length === 0 || !this.exclusiveCheckbox.checked) return;
670
+ let e = this.checkboxes.some((e) => !e.disabled && e.checked);
671
+ this.exclusiveCheckbox.checked = !e, l(c.ExclusiveCheckbox.Name, c.ExclusiveCheckbox.Event.Toggle, this.exclusiveCheckbox);
672
+ };
673
+ }), customElements.define(c.SelectAll.Name, class extends HTMLElement {
674
+ targetName = null;
675
+ selectAllCheckbox = null;
676
+ checkboxes = null;
677
+ checkboxClass = null;
678
+ connectedCallback() {
679
+ this.targetName = this.getAttribute(n("target-name")), this.selectAllCheckbox = this.querySelector("input"), !(!this.targetName || !this.selectAllCheckbox || !this.parentElement) && (this.checkboxes = [...this.parentElement.querySelectorAll(`[name="${this.targetName}"]`)], this.checkboxes.length !== 0 && (this.checkboxClass = this.getAttribute(n("checkbox-class")), m(this), this.addEvents()));
680
+ }
681
+ disconnectedCallback() {
682
+ if (this.selectAllCheckbox && this.selectAllCheckbox.removeEventListener(s.Change, this.handleSelectAllChange), this.checkboxes) for (let e of this.checkboxes) e.removeEventListener(s.Change, this.handleCheckboxChange);
683
+ }
684
+ addEvents() {
685
+ if (!(!this.selectAllCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
686
+ this.selectAllCheckbox.addEventListener("change", this.handleSelectAllChange);
687
+ for (let e of this.checkboxes) e.disabled || (this.checkboxClass && e.parentElement?.classList.add(this.checkboxClass), e.addEventListener(s.Change, this.handleCheckboxChange));
688
+ }
689
+ }
690
+ handleSelectAllChange = () => {
691
+ if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
692
+ let e = this.selectAllCheckbox.checked;
693
+ for (let t of this.checkboxes) t.disabled || (t.checked = e);
694
+ this.selectAllCheckbox.indeterminate = !1, l(c.SelectAll.Name, c.SelectAll.Event.Toggle, this.selectAllCheckbox);
695
+ };
696
+ handleCheckboxChange = () => {
697
+ if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
698
+ let e = this.checkboxes.filter((e) => !e.disabled && e.checked).length, t = e === this.checkboxes.length, n = e === 0;
699
+ this.selectAllCheckbox.indeterminate = !t && !n, this.selectAllCheckbox.checked = t, l(c.SelectAll.Name, c.SelectAll.Event.Toggle, this.selectAllCheckbox);
700
+ };
701
+ }), customElements.define(c.Tabs.Name, class extends HTMLElement {
702
+ tabs = [];
703
+ tabList = null;
704
+ tabPanels = [];
705
+ connectedCallback() {
706
+ if (this.tabList = this.querySelector(".tablist"), this.tabs = Array.from(this.querySelectorAll(".tablist a")), this.tabPanels = this.tabs.map((e) => {
707
+ let t = e.getAttribute("href");
708
+ if (t != null) return document.querySelector(t);
709
+ }).filter((e) => e != null), !this.tabList || this.tabs.length === 0 || this.tabPanels.length === 0) {
710
+ console.error("Tabs component: Missing some of elements .tablist, .tabpanel", this);
711
+ return;
712
+ }
713
+ this.setTabListAttributes(), this.setTabsAttributes(), this.setPanelsAttributes(), this.setEventListeners(), m(this);
714
+ }
715
+ disconnectedCallback() {
716
+ for (let e of this.tabs) e.removeEventListener(s.Click, this.handleTabClick), e.removeEventListener(s.KeyDown, this.onKeyDown);
717
+ }
718
+ setEventListeners() {
719
+ for (let e of this.tabs) e.addEventListener(s.Click, this.handleTabClick), e.addEventListener(s.KeyDown, this.onKeyDown);
720
+ }
721
+ setTabListAttributes() {
722
+ this.tabList && (this.tabList.setAttribute("role", "tablist"), this.tabList.querySelectorAll("li").forEach((e) => {
723
+ e.setAttribute("role", "presentation");
724
+ }));
725
+ }
726
+ setTabsAttributes() {
727
+ let e = this.tabs.some((e) => e.getAttribute("aria-selected") === "true");
728
+ this.tabs.forEach((t, n) => {
729
+ t.setAttribute("role", "tab"), !e && n === 0 && (t.setAttribute("aria-selected", "true"), t.setAttribute("tabindex", "0"), this.tabPanels[n]?.removeAttribute("hidden")), t.getAttribute("aria-selected") !== "true" && (t.setAttribute("aria-selected", "false"), t.setAttribute("tabindex", "-1"), this.tabPanels[n]?.setAttribute("hidden", "")), this.tabPanels[n] && t.setAttribute("aria-controls", this.tabPanels[n].id);
730
+ });
731
+ }
732
+ setPanelsAttributes() {
733
+ this.tabPanels.forEach((e) => {
734
+ e.setAttribute("role", "tabpanel"), e.querySelector("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])") || e.setAttribute("tabindex", "0");
735
+ });
736
+ }
737
+ handleTabClick = (e) => {
738
+ e.preventDefault();
739
+ let t = e.target;
740
+ this.changeTab(t);
741
+ };
742
+ changeTab(e) {
743
+ let t = e.getAttribute("href")?.substring(1), n = this.tabPanels.find((e) => e.id == t);
744
+ this.tabs.forEach((e) => {
745
+ e.setAttribute("aria-selected", "false"), e.setAttribute("tabindex", "-1");
746
+ }), n && (this.tabPanels.forEach((e) => {
747
+ e.setAttribute("hidden", "");
748
+ }), n.removeAttribute("hidden")), e.setAttribute("aria-selected", "true"), e.setAttribute("tabindex", "0"), e.focus();
749
+ }
750
+ moveTab(e) {
751
+ let t = this.tabs.filter((e) => e.getAttribute("aria-disabled") !== "true");
752
+ if (t.length === 0) return;
753
+ let n = t.indexOf(document.activeElement);
754
+ if (n === -1) return;
755
+ let r = t[(n + e + t.length) % t.length];
756
+ r && this.changeTab(r);
757
+ }
758
+ onKeyDown = (e) => {
759
+ if (e.key === "ArrowLeft") {
760
+ this.moveTab(-1);
761
+ return;
762
+ }
763
+ if (e.key === "ArrowRight") {
764
+ this.moveTab(1);
765
+ return;
766
+ }
767
+ if (e.key === "Home") {
768
+ e.preventDefault();
769
+ let t = this.tabs.find((e) => e.getAttribute("aria-disabled") !== "true");
770
+ t && this.changeTab(t);
771
+ return;
772
+ }
773
+ if (e.key === "End") {
774
+ e.preventDefault();
775
+ let t = [...this.tabs].reverse().find((e) => e.getAttribute("aria-disabled") !== "true");
776
+ t && this.changeTab(t);
777
+ return;
778
+ }
779
+ };
780
+ }), customElements.define(c.UntilSelected.Name, class extends HTMLElement {
781
+ target = null;
782
+ targetElement = null;
783
+ focusTargetElement = null;
784
+ events = null;
785
+ showWhen = "checked";
786
+ connectedCallback() {
787
+ if (this.target = this.getAttribute(n("target")), !this.target) return;
788
+ try {
789
+ let e = document.getElementById(this.target);
790
+ if (!(e instanceof HTMLInputElement)) {
791
+ console.warn("Element was not found");
792
+ return;
793
+ }
794
+ this.targetElement = e, this.focusTargetElement = this.targetElement;
795
+ } catch (e) {
796
+ console.warn("Could not select element", e);
797
+ }
798
+ if (!this.targetElement) return;
799
+ let e = this.getAttribute(n("focus-target"));
800
+ if (e) try {
801
+ this.focusTargetElement = document.getElementById(e);
802
+ } catch (e) {
803
+ console.warn("Could not select focus target", e);
804
+ }
805
+ let t = this.getAttribute(n("events"));
806
+ t && (this.events = t.split(",").map((e) => e.trim())), this.showWhen = this.getAttribute(n("show-when")) === "not-checked" ? "not-checked" : "checked";
807
+ let r = this.targetElement.checked;
808
+ this.toggleAttribute(i, this.showWhen === "checked" ? !r : r), m(this), this.addEvents();
809
+ }
810
+ disconnectedCallback() {
811
+ if (document.removeEventListener(`${c.ExclusiveCheckbox.Name}:${c.ExclusiveCheckbox.Event.Toggle}`, this.handleTargetChange), document.removeEventListener(`${c.SelectAll.Name}:${c.ExclusiveCheckbox.Event.Toggle}`, this.handleTargetChange), this.targetElement && this.targetElement.removeEventListener(s.Change, this.handleTargetChange), this.events && this.events.length > 0) for (let e of this.events) document.removeEventListener(e, this.handleTargetChange);
812
+ }
813
+ addEvents() {
814
+ if (document.addEventListener(`${c.ExclusiveCheckbox.Name}:${c.ExclusiveCheckbox.Event.Toggle}`, this.handleTargetChange), document.addEventListener(`${c.SelectAll.Name}:${c.ExclusiveCheckbox.Event.Toggle}`, this.handleTargetChange), this.targetElement && this.targetElement.addEventListener(s.Change, this.handleTargetChange), this.events && this.events.length > 0) for (let e of this.events) document.addEventListener(e, this.handleTargetChange);
815
+ }
816
+ handleTargetChange = () => {
817
+ if (!this.targetElement) return;
818
+ let e = this.showWhen === "checked" ? !this.targetElement.checked : this.targetElement.checked;
819
+ this.toggleAttribute(i, e), e && this.focusTargetElement && this.matches(":focus-within") && this.focusTargetElement.focus();
820
+ };
821
+ });
822
+ //#endregion
823
+ //#region src/debounce.ts
824
+ function v(e, t) {
825
+ let n;
826
+ return function(...r) {
827
+ clearTimeout(n), n = setTimeout(() => {
828
+ e.apply(this, r);
829
+ }, t);
830
+ };
422
831
  }
423
- const M = L.getInstance();
424
- customElements.define(
425
- c.AjaxForm.Name,
426
- class extends HTMLElement {
427
- form = null;
428
- announce = null;
429
- announceTitle = null;
430
- spinner = null;
431
- messageSubmitting = "Submitting...";
432
- messageSuccess = "Data submitted successfully";
433
- messageError = "An error occurred";
434
- actionOnSuccess = "none";
435
- keepFields = !1;
436
- queryKeyToInvalidate = null;
437
- isSubmittingAttribute = "is-submitting";
438
- connectedCallback() {
439
- if (this.form = this.querySelector("form"), !this.form) return;
440
- const e = this.querySelector('[role="status"]');
441
- e ? (this.announce = e, this.announceTitle = e.querySelector(".alert-title")) : (this.announce = document.createElement("div"), this.announce.setAttribute("role", "status"), this.announceTitle = document.createElement("p"), this.announceTitle.className = "alert-title", this.announce.append(this.announceTitle), this.append(this.announce)), this.messageSubmitting = this.getAttribute(h("message-submitting")) ?? this.messageSubmitting, this.messageSuccess = this.getAttribute(h("message-success")) ?? this.messageSuccess, this.messageError = this.getAttribute(h("message-error")) ?? this.messageError, this.keepFields = this.hasAttribute(h("keep-fields")), this.queryKeyToInvalidate = this.getAttribute(h("query-key"));
442
- const t = this.getAttribute(h("action-on-success"));
443
- t === "remove-form" ? this.actionOnSuccess = "remove-form" : t === "remove-message" && (this.actionOnSuccess = "remove-message"), this.spinner = document.createElement("div"), this.spinner.className = "loading", this.spinner.innerHTML = '<div class="spinner"></div>', this.append(this.spinner), this.form.addEventListener("submit", this);
444
- }
445
- disconnectedCallback() {
446
- this.form?.removeEventListener("submit", this);
447
- }
448
- async handleEvent(e) {
449
- e.type === "submit" && await this.handleSubmit(e);
450
- }
451
- async handleSubmit(e) {
452
- if (!this.form || (e.preventDefault(), this.isDisabled())) return;
453
- this.disable(), this.showStatus(this.messageSubmitting, "pending");
454
- const { action: t, method: s } = this.form;
455
- if (!F.isMethod(s)) {
456
- console.error("Method is not a valid value"), this.showStatus(this.messageError, "error");
457
- return;
458
- }
459
- let n = null;
460
- this.spinner && (n = this.form.querySelector(":focus"));
461
- const [a, l] = await F.send(t, s, {
462
- data: this.serialize(),
463
- headers: {
464
- "Content-Type": "application/x-www-form-urlencoded",
465
- "X-Requested-With": "XMLHttpRequest"
466
- }
467
- });
468
- if (this.enable(), n?.focus(), a) {
469
- console.error("An error occurred", a), this.showStatus(this.messageError, "error");
470
- return;
471
- }
472
- if (this.actionOnSuccess === "remove-form" && this.form.remove(), this.keepFields || this.reset(), l.type === "html") {
473
- if (!this.queryKeyToInvalidate) return;
474
- M.setQueryData(this.queryKeyToInvalidate, l), this.showStatus(this.messageSuccess, "success");
475
- return;
476
- }
477
- if (this.showStatus(l.message ?? this.messageSuccess, "success"), l.redirectUrl) {
478
- window.location.href = l.redirectUrl;
479
- return;
480
- }
481
- l.queryKey && M.invalidateQuery(l.queryKey), this.queryKeyToInvalidate && M.invalidateQuery(this.queryKeyToInvalidate), A(c.AjaxForm.Name, c.AjaxForm.Event.Form, this);
482
- }
483
- disable() {
484
- this.setAttribute(h(this.isSubmittingAttribute), "");
485
- }
486
- enable() {
487
- this.removeAttribute(h(this.isSubmittingAttribute));
488
- }
489
- isDisabled() {
490
- return this.hasAttribute(h(this.isSubmittingAttribute));
491
- }
492
- showStatus(e, t) {
493
- if (!(!this.announce || !this.announceTitle))
494
- switch (this.announceTitle.textContent = e, this.showStatusIcon(t), t) {
495
- case "success":
496
- this.announce.className = "alert success", this.actionOnSuccess === "remove-message" && setTimeout(() => {
497
- !this.announce || !this.announceTitle || (this.announceTitle.textContent = "", this.announce.className = "", this.showStatusIcon("pending"));
498
- }, 6 * R);
499
- break;
500
- case "error":
501
- this.announce.className = "alert danger";
502
- break;
503
- case "pending":
504
- this.announce.className = "alert visually-hidden";
505
- break;
506
- }
507
- }
508
- showStatusIcon(e) {
509
- if (!this.announce) return;
510
- const t = this.announce.querySelector(
511
- S("announce-success-icon")
512
- ), s = this.announce.querySelector(
513
- S("announce-error-icon")
514
- );
515
- switch (e) {
516
- case "success":
517
- t?.removeAttribute(v), s?.setAttribute(v, "");
518
- break;
519
- case "error":
520
- t?.setAttribute(v, ""), s?.removeAttribute(v);
521
- break;
522
- case "pending":
523
- t?.setAttribute(v, ""), s?.setAttribute(v, "");
524
- break;
525
- }
526
- }
527
- serialize() {
528
- if (!this.form) return "";
529
- const e = new FormData(this.form), t = new URLSearchParams();
530
- for (const [s, n] of e)
531
- n instanceof File || t.append(s, n);
532
- return t.toString();
533
- }
534
- reset() {
535
- this.form && this.form.reset();
536
- }
537
- }
538
- );
539
- customElements.define(
540
- c.AjaxHtml.Name,
541
- class extends HTMLElement {
542
- queryKey = null;
543
- unsubscribe = null;
544
- initialFetchTriggered = !1;
545
- // To prevent multiple fetch calls
546
- intersectionObserver = null;
547
- staleTime;
548
- connectedCallback() {
549
- if (!this.id) {
550
- console.warn(`${c.AjaxHtml.Name} requires a "id" attribute.`, this);
551
- return;
552
- }
553
- if (this.queryKey = this.getAttribute(h("query-key")), !this.queryKey) {
554
- console.warn(`${c.AjaxHtml.Name} requires a "query-key" attribute.`, this);
555
- return;
556
- }
557
- this.staleTime = this.hasAttribute(h("stale-time")) ? (
558
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
559
- parseInt(this.getAttribute(h("stale-time")), 10)
560
- ) : void 0, this.unsubscribe = M.subscribe(
561
- this.queryKey,
562
- (t) => {
563
- this.renderContent(t);
564
- },
565
- { staleTime: this.staleTime }
566
- );
567
- const e = this.getAttribute(h("load-strategy"));
568
- if (e)
569
- switch (e) {
570
- case "server-side":
571
- this.initialFetchTriggered = !0;
572
- break;
573
- case "initial":
574
- this.triggerInitialFetch();
575
- break;
576
- case "lazy":
577
- this.intersectionObserver = new IntersectionObserver(
578
- this.handleIntersection,
579
- { rootMargin: "0px 0px 100px 0px" }
580
- ), this.intersectionObserver.observe(this);
581
- break;
582
- case "defer":
583
- document.addEventListener("DOMContentLoaded", this.handleDomContentLoaded, {
584
- once: !0
585
- });
586
- break;
587
- }
588
- else
589
- this.initialFetchTriggered = !0;
590
- }
591
- disconnectedCallback() {
592
- this.unsubscribe && this.unsubscribe(), document.removeEventListener("DOMContentLoaded", this.handleDomContentLoaded), this.intersectionObserver && (this.intersectionObserver.unobserve(this), this.intersectionObserver.disconnect(), this.intersectionObserver = null);
593
- }
594
- handleDomContentLoaded = () => {
595
- this.triggerInitialFetch();
596
- };
597
- handleIntersection = (e) => {
598
- e.forEach((t) => {
599
- t.isIntersecting && (this.triggerInitialFetch(), this.intersectionObserver && this.intersectionObserver.unobserve(this));
600
- });
601
- };
602
- triggerInitialFetch() {
603
- this.queryKey && (this.initialFetchTriggered || (this.initialFetchTriggered = !0, M.invalidateQuery(this.queryKey)));
604
- }
605
- renderContent(e) {
606
- if (!this.initialFetchTriggered || !e.data || e.data.type !== "html") return;
607
- const t = e.data.document, s = t.querySelector(`#${this.id}`);
608
- if (s && s.id === this.id) {
609
- this.innerHTML = s.innerHTML;
610
- return;
611
- }
612
- if (t.body.innerHTML.trim().length > 0) {
613
- this.innerHTML = t.body.innerHTML;
614
- return;
615
- }
616
- e.isFetching || (this.innerHTML = "<p>No results found.</p>");
617
- }
618
- }
619
- );
620
- const H = "[popover]", $ = (e) => `[popovertarget="${e}"]`, O = {
621
- open: "open",
622
- closed: "closed"
623
- };
624
- customElements.define(
625
- c.Dropdown.Name,
626
- class extends HTMLElement {
627
- popoverElement = null;
628
- trigger = null;
629
- focusableElements = [];
630
- searchString = "";
631
- searchTimeout = -1;
632
- connectedCallback() {
633
- const e = this.querySelector(H);
634
- if (!e) {
635
- console.error(
636
- `${c.Dropdown.Name} component: Missing element with selector "${H}"`
637
- );
638
- return;
639
- }
640
- this.popoverElement = e;
641
- const t = this.querySelector(
642
- $(this.popoverElement.id)
643
- );
644
- if (!t) {
645
- console.error(
646
- `${c.Dropdown.Name} component: Missing element with selector "${$(this.popoverElement.id)}"`
647
- );
648
- return;
649
- }
650
- this.trigger = t, this.focusableElements = this.getFocusableElementsForTrap(), this.popoverElement.setAttribute(h("state"), O.closed), this.addEventListener(m.KeyDown, this.handleKeydown), this.popoverElement.addEventListener(m.Toggle, this.handleToggle), this.setAttribute(h("state"), "ready");
651
- }
652
- disconnectedCallback() {
653
- this.removeEventListener(m.KeyDown, this.handleKeydown), this.popoverElement?.removeEventListener(m.Toggle, this.handleToggle);
654
- }
655
- getFocusableElementsForTrap() {
656
- return this.popoverElement ? [...Array.from(
657
- this.popoverElement.querySelectorAll(B)
658
- )].filter(Boolean) : [];
659
- }
660
- handleToggle = (e) => {
661
- if (e.newState === "open") {
662
- this.onPopoverOpen();
663
- return;
664
- }
665
- this.onPopoverClose();
666
- };
667
- onPopoverOpen() {
668
- this.popoverElement && this.popoverElement.setAttribute(h("state"), O.open);
669
- }
670
- onPopoverClose() {
671
- this.popoverElement && this.popoverElement.setAttribute(h("state"), O.closed);
672
- }
673
- isOpen() {
674
- return this.popoverElement ? this.popoverElement.getAttribute(h("state")) === O.open : !1;
675
- }
676
- handleKeydown = (e) => {
677
- if (this.isOpen()) {
678
- this.handleKeyboardWhenOpen(e);
679
- return;
680
- }
681
- this.handleKeyboardWhenClosed(e);
682
- };
683
- handleKeyboardWhenClosed = (e) => {
684
- if (!this.isOpen())
685
- switch (e.key) {
686
- case "Enter":
687
- case " ":
688
- case "ArrowDown":
689
- e.preventDefault(), this.openPopover(), this.focusOptionByIndex(0);
690
- break;
691
- case "ArrowUp":
692
- e.preventDefault(), this.openPopover(), this.focusOptionByIndex(this.focusableElements.length - 1);
693
- break;
694
- default:
695
- /^[a-zA-Z0-9]$/.test(e.key) && (e.preventDefault(), this.openPopover(), this.handleSearchString(e.key));
696
- break;
697
- }
698
- };
699
- handleKeyboardWhenOpen = (e) => {
700
- if (this.isOpen())
701
- switch (e.key) {
702
- case " ":
703
- e.preventDefault(), this.triggerAction(e);
704
- break;
705
- case "Tab":
706
- this.closePopover(), e.shiftKey && (e.preventDefault(), this.trigger?.focus());
707
- break;
708
- case "ArrowDown":
709
- e.target && (e.target instanceof HTMLAnchorElement || e.target instanceof HTMLButtonElement) && this.focusOptionByStep(e.target, 1, e);
710
- break;
711
- case "ArrowUp":
712
- e.target && (e.target instanceof HTMLAnchorElement || e.target instanceof HTMLButtonElement) && this.focusOptionByStep(e.target, -1, e);
713
- break;
714
- case "Home":
715
- e.preventDefault(), this.focusOptionByIndex(0);
716
- break;
717
- case "End":
718
- e.preventDefault(), this.focusOptionByIndex(this.focusableElements.length - 1);
719
- break;
720
- default:
721
- /^[a-zA-Z0-9]$/.test(e.key) && (e.preventDefault(), this.handleSearchString(e.key));
722
- break;
723
- }
724
- };
725
- openPopover = () => {
726
- this.trigger && (this.isOpen() || this.trigger.click());
727
- };
728
- closePopover = () => {
729
- this.popoverElement && this.isOpen() && this.popoverElement.hidePopover();
730
- };
731
- triggerAction = (e) => {
732
- e.target instanceof HTMLAnchorElement && e.target.click();
733
- };
734
- focusOptionByStep = (e, t, s) => {
735
- const n = this.focusableElements;
736
- if (!n.length) return;
737
- const a = e, l = n.indexOf(a);
738
- if (s.preventDefault(), l === -1) {
739
- n[0]?.focus();
740
- return;
741
- }
742
- const u = (l + t + n.length) % n.length;
743
- u >= n.length || u < 0 || n[u]?.focus();
744
- };
745
- focusOptionByIndex(e) {
746
- if (!this.focusableElements.length) return;
747
- const t = Math.max(0, Math.min(e, this.focusableElements.length - 1));
748
- this.focusableElements[t]?.focus();
749
- }
750
- handleSearchString(e) {
751
- if (clearTimeout(this.searchTimeout), this.searchString += e.toLowerCase(), !this.focusableElements.length) return;
752
- const t = this.getActiveOption(), s = this.searchString.length === 1 && t ? this.focusableElements.indexOf(t) + 1 : 0, n = this.findOptionBySearchString(this.focusableElements, s) ?? this.findOptionBySearchString(this.focusableElements, 0);
753
- n && n.focus(), this.searchTimeout = window.setTimeout(() => {
754
- this.searchString = "";
755
- }, 500);
756
- }
757
- findOptionBySearchString(e, t) {
758
- for (let s = 0; s < e.length; s++) {
759
- const n = (t + s) % e.length;
760
- if (e[n]?.textContent.trim().toLowerCase()?.startsWith(this.searchString))
761
- return e[n] ?? null;
762
- }
763
- return null;
764
- }
765
- getActiveOption() {
766
- const e = document.activeElement;
767
- return !e || !(e instanceof HTMLAnchorElement) || !(e instanceof HTMLButtonElement) ? null : this.focusableElements.find((t) => t === e) ?? null;
768
- }
769
- }
770
- );
771
- customElements.define(
772
- c.ExclusiveCheckbox.Name,
773
- class extends HTMLElement {
774
- targetName = null;
775
- exclusiveCheckbox = null;
776
- checkboxes = null;
777
- connectedCallback() {
778
- this.targetName = this.getAttribute(h("target-name")), this.exclusiveCheckbox = this.querySelector("input"), !(!this.targetName || !this.exclusiveCheckbox || !this.parentElement) && (this.checkboxes = [
779
- ...this.parentElement.querySelectorAll(
780
- `[name="${this.targetName}"]`
781
- )
782
- ], this.checkboxes.length !== 0 && this.addEvents());
783
- }
784
- disconnectedCallback() {
785
- if (this.exclusiveCheckbox && this.exclusiveCheckbox.removeEventListener(
786
- m.Change,
787
- this.handleExclusiveChange
788
- ), this.checkboxes)
789
- for (const e of this.checkboxes)
790
- e.removeEventListener(m.Change, this.handleCheckboxChange);
791
- }
792
- addEvents() {
793
- if (!(!this.exclusiveCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
794
- this.exclusiveCheckbox.addEventListener("change", this.handleExclusiveChange);
795
- for (const e of this.checkboxes)
796
- e.disabled || e.addEventListener(m.Change, this.handleCheckboxChange);
797
- }
798
- }
799
- handleExclusiveChange = () => {
800
- if (!this.exclusiveCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
801
- const e = this.exclusiveCheckbox.checked;
802
- for (const t of this.checkboxes)
803
- t.disabled || e && (t.checked = !1);
804
- this.exclusiveCheckbox.indeterminate = !1, A(
805
- c.ExclusiveCheckbox.Name,
806
- c.ExclusiveCheckbox.Event.Toggle,
807
- this.exclusiveCheckbox
808
- );
809
- };
810
- handleCheckboxChange = () => {
811
- if (!this.exclusiveCheckbox || !this.checkboxes || this.checkboxes.length === 0 || !this.exclusiveCheckbox.checked) return;
812
- const e = this.checkboxes.some(
813
- (t) => !t.disabled && t.checked
814
- );
815
- this.exclusiveCheckbox.checked = !e, A(
816
- c.ExclusiveCheckbox.Name,
817
- c.ExclusiveCheckbox.Event.Toggle,
818
- this.exclusiveCheckbox
819
- );
820
- };
821
- }
822
- );
823
- customElements.define(
824
- c.SelectAll.Name,
825
- class extends HTMLElement {
826
- targetName = null;
827
- selectAllCheckbox = null;
828
- checkboxes = null;
829
- connectedCallback() {
830
- this.targetName = this.getAttribute(h("target-name")), this.selectAllCheckbox = this.querySelector("input"), !(!this.targetName || !this.selectAllCheckbox || !this.parentElement) && (this.checkboxes = [
831
- ...this.parentElement.querySelectorAll(
832
- `[name="${this.targetName}"]`
833
- )
834
- ], this.checkboxes.length !== 0 && (this.ready(), this.addEvents()));
835
- }
836
- disconnectedCallback() {
837
- if (this.selectAllCheckbox && this.selectAllCheckbox.removeEventListener(
838
- m.Change,
839
- this.handleSelectAllChange
840
- ), this.checkboxes)
841
- for (const e of this.checkboxes)
842
- e.removeEventListener(m.Change, this.handleCheckboxChange);
843
- }
844
- ready() {
845
- this.setAttribute(h("state"), "ready");
846
- }
847
- addEvents() {
848
- if (!(!this.selectAllCheckbox || !this.targetName || !this.parentElement || !this.checkboxes)) {
849
- this.selectAllCheckbox.addEventListener("change", this.handleSelectAllChange);
850
- for (const e of this.checkboxes)
851
- e.disabled || (e.parentElement?.classList.add("padding-inline-start-lg"), e.addEventListener(m.Change, this.handleCheckboxChange));
852
- }
853
- }
854
- handleSelectAllChange = () => {
855
- if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
856
- const e = this.selectAllCheckbox.checked;
857
- for (const t of this.checkboxes)
858
- t.disabled || (t.checked = e);
859
- this.selectAllCheckbox.indeterminate = !1, A(
860
- c.SelectAll.Name,
861
- c.SelectAll.Event.Toggle,
862
- this.selectAllCheckbox
863
- );
864
- };
865
- handleCheckboxChange = () => {
866
- if (!this.selectAllCheckbox || !this.checkboxes || this.checkboxes.length === 0) return;
867
- const e = this.checkboxes.filter(
868
- (a) => !a.disabled && a.checked
869
- ).length, t = this.checkboxes.length, s = e === t, n = e === 0;
870
- this.selectAllCheckbox.indeterminate = !s && !n, this.selectAllCheckbox.checked = s, A(
871
- c.SelectAll.Name,
872
- c.SelectAll.Event.Toggle,
873
- this.selectAllCheckbox
874
- );
875
- };
876
- }
877
- );
878
- customElements.define(
879
- c.Tabs.Name,
880
- class extends HTMLElement {
881
- tabs = [];
882
- tabList = null;
883
- tabPanels = [];
884
- connectedCallback() {
885
- if (this.tabList = this.querySelector(".tablist"), this.tabs = Array.from(this.querySelectorAll(".tablist a")), this.tabPanels = this.tabs.map((e) => {
886
- const t = e.getAttribute("href");
887
- if (t != null)
888
- return document.querySelector(t);
889
- }).filter((e) => e != null), !this.tabList || this.tabs.length === 0 || this.tabPanels.length === 0) {
890
- console.error("Tabs component: Missing some of elements .tablist, .tabpanel", this);
891
- return;
892
- }
893
- this.ready(), this.setTabListAttributes(), this.setTabsAttributes(), this.setPanelsAttributes(), this.setEventListeners();
894
- }
895
- disconnectedCallback() {
896
- for (const e of this.tabs)
897
- e.removeEventListener(m.Click, this.handleTabClick), e.removeEventListener(m.KeyDown, this.onKeyDown);
898
- }
899
- setEventListeners() {
900
- for (const e of this.tabs)
901
- e.addEventListener(m.Click, this.handleTabClick), e.addEventListener(m.KeyDown, this.onKeyDown);
902
- }
903
- ready() {
904
- this.setAttribute(h("state"), "ready");
905
- }
906
- setTabListAttributes() {
907
- if (!this.tabList) return;
908
- this.tabList.setAttribute("role", "tablist"), this.tabList.querySelectorAll("li").forEach((t) => {
909
- t.setAttribute("role", "presentation");
910
- });
911
- }
912
- setTabsAttributes() {
913
- const e = parseInt(this.getAttribute(h("start-index")) ?? "0");
914
- this.tabs.forEach((t, s) => {
915
- t.setAttribute("role", "tab"), s === e ? t.setAttribute("aria-selected", "true") : (t.setAttribute("aria-selected", "false"), t.setAttribute("tabindex", "-1"), this.tabPanels[s]?.setAttribute("hidden", "")), this.tabPanels[s] && t.setAttribute("aria-controls", this.tabPanels[s].id);
916
- });
917
- }
918
- setPanelsAttributes() {
919
- this.tabPanels.forEach((e) => {
920
- e.setAttribute("role", "tabpanel"), e.querySelector(B) || e.setAttribute("tabindex", "0");
921
- });
922
- }
923
- handleTabClick = (e) => {
924
- e.preventDefault();
925
- const t = e.target;
926
- this.changeTab(t);
927
- };
928
- changeTab(e) {
929
- const t = e.getAttribute("href")?.substring(1), s = this.tabPanels.find((n) => n.id == t);
930
- this.tabs.forEach((n) => {
931
- n.setAttribute("aria-selected", "false"), n.setAttribute("tabindex", "-1");
932
- }), s && (this.tabPanels.forEach((n) => {
933
- n.setAttribute("hidden", "");
934
- }), s.removeAttribute("hidden")), e.setAttribute("aria-selected", "true"), e.setAttribute("tabindex", "0"), e.focus();
935
- }
936
- moveTab(e) {
937
- const t = this.tabs.filter(
938
- (l) => l.getAttribute("aria-disabled") !== "true"
939
- );
940
- if (t.length === 0) return;
941
- const s = t.indexOf(document.activeElement);
942
- if (s === -1) return;
943
- const n = (s + e + t.length) % t.length, a = t[n];
944
- a && this.changeTab(a);
945
- }
946
- onKeyDown = (e) => {
947
- if (e.key === "ArrowLeft") {
948
- this.moveTab(-1);
949
- return;
950
- }
951
- if (e.key === "ArrowRight") {
952
- this.moveTab(1);
953
- return;
954
- }
955
- if (e.key === "Home") {
956
- e.preventDefault();
957
- const t = this.tabs.find(
958
- (s) => s.getAttribute("aria-disabled") !== "true"
959
- );
960
- t && this.changeTab(t);
961
- return;
962
- }
963
- if (e.key === "End") {
964
- e.preventDefault();
965
- const t = [...this.tabs].reverse().find((s) => s.getAttribute("aria-disabled") !== "true");
966
- t && this.changeTab(t);
967
- return;
968
- }
969
- };
970
- }
971
- );
972
- customElements.define(
973
- c.UntilSelected.Name,
974
- class extends HTMLElement {
975
- target = null;
976
- targetElement = null;
977
- focusTargetElement = null;
978
- events = null;
979
- showWhen = "checked";
980
- connectedCallback() {
981
- if (this.target = this.getAttribute(h("target")), !this.target) return;
982
- try {
983
- const n = document.getElementById(this.target);
984
- if (!(n instanceof HTMLInputElement)) {
985
- console.warn("Element was not found");
986
- return;
987
- }
988
- this.targetElement = n;
989
- } catch (n) {
990
- console.warn("Could not select element", n);
991
- }
992
- if (!this.targetElement) return;
993
- const e = this.getAttribute(h("focus-target"));
994
- if (e)
995
- try {
996
- this.focusTargetElement = document.getElementById(e);
997
- } catch (n) {
998
- console.warn("Could not select focus target", n);
999
- }
1000
- const t = this.getAttribute(h("events"));
1001
- t && (this.events = t.split(",").map((n) => n.trim())), this.showWhen = this.getAttribute(h("show-when")) === "not-checked" ? "not-checked" : "checked";
1002
- const s = this.targetElement.checked;
1003
- this.toggleAttribute(
1004
- v,
1005
- this.showWhen === "checked" ? !s : s
1006
- ), this.addEvents();
1007
- }
1008
- disconnectedCallback() {
1009
- if (document.removeEventListener(
1010
- `${c.ExclusiveCheckbox.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
1011
- this.handleTargetChange
1012
- ), document.removeEventListener(
1013
- `${c.SelectAll.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
1014
- this.handleTargetChange
1015
- ), this.targetElement && this.targetElement.removeEventListener(m.Change, this.handleTargetChange), this.events && this.events.length > 0)
1016
- for (const e of this.events)
1017
- document.removeEventListener(e, this.handleTargetChange);
1018
- }
1019
- addEvents() {
1020
- if (document.addEventListener(
1021
- `${c.ExclusiveCheckbox.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
1022
- this.handleTargetChange
1023
- ), document.addEventListener(
1024
- `${c.SelectAll.Name}:${c.ExclusiveCheckbox.Event.Toggle}`,
1025
- this.handleTargetChange
1026
- ), this.targetElement && this.targetElement.addEventListener(m.Change, this.handleTargetChange), this.events && this.events.length > 0)
1027
- for (const e of this.events)
1028
- document.addEventListener(e, this.handleTargetChange);
1029
- }
1030
- handleTargetChange = () => {
1031
- if (!this.targetElement) return;
1032
- const e = this.showWhen === "checked" ? !this.targetElement.checked : this.targetElement.checked;
1033
- this.toggleAttribute(v, e), e && this.focusTargetElement && this.matches(":focus-within") && this.focusTargetElement.focus();
1034
- };
1035
- }
1036
- );
1037
- function j(e, t) {
1038
- let s;
1039
- return function(...n) {
1040
- clearTimeout(s), s = setTimeout(() => {
1041
- e.apply(this, n);
1042
- }, t);
1043
- };
1044
- }
1045
- customElements.define(
1046
- c.SearchFilter.Name,
1047
- class extends HTMLElement {
1048
- // TODO Add an aria-live region to announce number of results found
1049
- // TODO handle focus management for accessibility
1050
- inputElement = null;
1051
- searchButton = null;
1052
- collections = [];
1053
- debouncedFilterTargets;
1054
- constructor() {
1055
- super(), this.debouncedFilterTargets = j(this.filterTargets, 300);
1056
- }
1057
- connectedCallback() {
1058
- if (this.inputElement = this.querySelector('input[type="search"]'), this.searchButton = this.querySelector('button[type="submit"]'), !this.inputElement || !this.searchButton) return;
1059
- const e = this.getAttribute(h("collection-selector"));
1060
- if (!e) {
1061
- console.warn(
1062
- `${c.SearchFilter.Name} requires a "collection-selector" attribute.`,
1063
- this
1064
- );
1065
- return;
1066
- }
1067
- const t = this.getAttribute(h("target-selector"));
1068
- if (!t) {
1069
- console.warn(
1070
- `${c.SearchFilter.Name} requires a "target-selector" attribute.`,
1071
- this
1072
- );
1073
- return;
1074
- }
1075
- const s = Array.from(
1076
- document.querySelectorAll(e)
1077
- );
1078
- if (s.length !== 0) {
1079
- for (const n of s) {
1080
- const a = Array.from(
1081
- n.querySelectorAll(t)
1082
- );
1083
- this.collections.push({
1084
- element: n,
1085
- targetElements: a.map((l) => ({
1086
- element: l,
1087
- text: l.textContent.toLocaleLowerCase()
1088
- }))
1089
- });
1090
- }
1091
- this.collections.length !== 0 && (this.inputElement.addEventListener(m.Input, this.debouncedFilterTargets), this.searchButton.addEventListener(m.Click, this.onSearchClick));
1092
- }
1093
- }
1094
- disconnectedCallback() {
1095
- this.inputElement?.removeEventListener(m.Input, this.debouncedFilterTargets), this.searchButton?.removeEventListener(m.Click, this.onSearchClick);
1096
- }
1097
- onSearchClick = (e) => {
1098
- e.preventDefault(), this.filterTargets();
1099
- };
1100
- filterTargets = () => {
1101
- if (!this.inputElement) return;
1102
- const e = this.inputElement.value.toLocaleLowerCase();
1103
- if (!e) {
1104
- for (const t of this.collections) {
1105
- t.element.removeAttribute(v);
1106
- for (const s of t.targetElements)
1107
- s.element.removeAttribute(v);
1108
- }
1109
- return;
1110
- }
1111
- this.collections.forEach((t) => {
1112
- let s = !1;
1113
- for (const n of t.targetElements)
1114
- n.text.includes(e) ? (n.element.removeAttribute(v), s = !0) : n.element.setAttribute(v, "");
1115
- s ? t.element.removeAttribute(v) : t.element.setAttribute(v, "");
1116
- });
1117
- };
1118
- }
1119
- );
1120
- function N() {
1121
- return typeof HTMLButtonElement < "u" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
832
+ //#endregion
833
+ //#region src/components/search-filter/search-filter.ts
834
+ customElements.define(c.SearchFilter.Name, class extends HTMLElement {
835
+ inputElement = null;
836
+ searchButton = null;
837
+ collections = [];
838
+ debouncedFilterTargets;
839
+ constructor() {
840
+ super(), this.debouncedFilterTargets = v(this.filterTargets, 300);
841
+ }
842
+ connectedCallback() {
843
+ if (this.inputElement = this.querySelector("input[type=\"search\"]"), this.searchButton = this.querySelector("button[type=\"submit\"]"), !this.inputElement || !this.searchButton) return;
844
+ let e = this.getAttribute(n("collection-selector"));
845
+ if (!e) {
846
+ console.warn(`${c.SearchFilter.Name} requires a "collection-selector" attribute.`, this);
847
+ return;
848
+ }
849
+ let t = this.getAttribute(n("target-selector"));
850
+ if (!t) {
851
+ console.warn(`${c.SearchFilter.Name} requires a "target-selector" attribute.`, this);
852
+ return;
853
+ }
854
+ let r = Array.from(document.querySelectorAll(e));
855
+ if (r.length !== 0) {
856
+ for (let e of r) {
857
+ let n = Array.from(e.querySelectorAll(t));
858
+ this.collections.push({
859
+ element: e,
860
+ targetElements: n.map((e) => ({
861
+ element: e,
862
+ text: e.textContent.toLocaleLowerCase()
863
+ }))
864
+ });
865
+ }
866
+ this.collections.length !== 0 && (this.inputElement.addEventListener(s.Input, this.debouncedFilterTargets), this.searchButton.addEventListener(s.Click, this.onSearchClick));
867
+ }
868
+ }
869
+ disconnectedCallback() {
870
+ this.inputElement?.removeEventListener(s.Input, this.debouncedFilterTargets), this.searchButton?.removeEventListener(s.Click, this.onSearchClick);
871
+ }
872
+ onSearchClick = (e) => {
873
+ e.preventDefault(), this.filterTargets();
874
+ };
875
+ filterTargets = () => {
876
+ if (!this.inputElement) return;
877
+ let e = this.inputElement.value.toLocaleLowerCase();
878
+ if (!e) {
879
+ for (let e of this.collections) {
880
+ e.element.removeAttribute(i);
881
+ for (let t of e.targetElements) t.element.removeAttribute(i);
882
+ }
883
+ return;
884
+ }
885
+ this.collections.forEach((t) => {
886
+ let n = !1;
887
+ for (let r of t.targetElements) r.text.includes(e) ? (r.element.removeAttribute(i), n = !0) : r.element.setAttribute(i, "");
888
+ n ? t.element.removeAttribute(i) : t.element.setAttribute(i, "");
889
+ });
890
+ };
891
+ });
892
+ //#endregion
893
+ //#region ../../node_modules/.pnpm/invokers-polyfill@1.0.3/node_modules/invokers-polyfill/invoker.js
894
+ function y() {
895
+ return typeof HTMLButtonElement < "u" && "command" in HTMLButtonElement.prototype && "source" in ((globalThis.CommandEvent || {}).prototype || {});
1122
896
  }
1123
- function U() {
1124
- document.addEventListener(
1125
- "invoke",
1126
- (r) => {
1127
- r.type == "invoke" && r.isTrusted && (r.stopImmediatePropagation(), r.preventDefault());
1128
- },
1129
- !0
1130
- ), document.addEventListener(
1131
- "command",
1132
- (r) => {
1133
- r.type == "command" && r.isTrusted && (r.stopImmediatePropagation(), r.preventDefault());
1134
- },
1135
- !0
1136
- );
1137
- function e(r, o, i = !0) {
1138
- Object.defineProperty(r, o, {
1139
- ...Object.getOwnPropertyDescriptor(r, o),
1140
- enumerable: i
1141
- });
1142
- }
1143
- function t(r) {
1144
- return r && typeof r.getRootNode == "function" ? r.getRootNode() : r && r.parentNode ? t(r.parentNode) : r;
1145
- }
1146
- const s = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap();
1147
- class a extends Event {
1148
- constructor(o, i = {}) {
1149
- super(o, i);
1150
- const { source: d, command: E } = i;
1151
- if (d != null && !(d instanceof Element))
1152
- throw new TypeError("source must be an element");
1153
- s.set(this, d || null), n.set(
1154
- this,
1155
- E !== void 0 ? String(E) : ""
1156
- );
1157
- }
1158
- get [Symbol.toStringTag]() {
1159
- return "CommandEvent";
1160
- }
1161
- get source() {
1162
- if (!s.has(this))
1163
- throw new TypeError("illegal invocation");
1164
- const o = s.get(this);
1165
- if (!(o instanceof Element)) return null;
1166
- const i = t(o);
1167
- return i !== t(this.target || document) ? i.host : o;
1168
- }
1169
- get command() {
1170
- if (!n.has(this))
1171
- throw new TypeError("illegal invocation");
1172
- return n.get(this);
1173
- }
1174
- get action() {
1175
- throw new Error(
1176
- "CommandEvent#action was renamed to CommandEvent#command"
1177
- );
1178
- }
1179
- get invoker() {
1180
- throw new Error(
1181
- "CommandEvent#invoker was renamed to CommandEvent#source"
1182
- );
1183
- }
1184
- }
1185
- e(a.prototype, "source"), e(a.prototype, "command");
1186
- class l extends Event {
1187
- constructor(o, i = {}) {
1188
- throw super(o, i), new Error(
1189
- "InvokeEvent has been deprecated, it has been renamed to `CommandEvent`"
1190
- );
1191
- }
1192
- }
1193
- const u = /* @__PURE__ */ new WeakMap();
1194
- function g(r) {
1195
- Object.defineProperties(r.prototype, {
1196
- commandForElement: {
1197
- enumerable: !0,
1198
- configurable: !0,
1199
- set(o) {
1200
- if (this.hasAttribute("invokeaction"))
1201
- throw new TypeError(
1202
- "Element has deprecated `invokeaction` attribute, replace with `command`"
1203
- );
1204
- if (this.hasAttribute("invoketarget"))
1205
- throw new TypeError(
1206
- "Element has deprecated `invoketarget` attribute, replace with `commandfor`"
1207
- );
1208
- if (o === null)
1209
- this.removeAttribute("commandfor"), u.delete(this);
1210
- else if (o instanceof Element) {
1211
- this.setAttribute("commandfor", "");
1212
- const i = t(o);
1213
- t(this) === i || i === this.ownerDocument ? u.set(this, o) : u.delete(this);
1214
- } else
1215
- throw new TypeError("commandForElement must be an element or null");
1216
- },
1217
- get() {
1218
- if (this.localName !== "button")
1219
- return null;
1220
- if (this.hasAttribute("invokeaction") || this.hasAttribute("invoketarget"))
1221
- return console.warn(
1222
- "Element has deprecated `invoketarget` or `invokeaction` attribute, use `commandfor` and `command` instead"
1223
- ), null;
1224
- if (this.disabled)
1225
- return null;
1226
- if (this.form && this.getAttribute("type") !== "button")
1227
- return console.warn(
1228
- "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work"
1229
- ), null;
1230
- const o = u.get(this);
1231
- if (o)
1232
- return o.isConnected ? o : (u.delete(this), null);
1233
- const i = t(this), d = this.getAttribute("commandfor");
1234
- return (i instanceof Document || i instanceof ShadowRoot) && d && i.getElementById(d) || null;
1235
- }
1236
- },
1237
- command: {
1238
- enumerable: !0,
1239
- configurable: !0,
1240
- get() {
1241
- const o = this.getAttribute("command") || "";
1242
- if (o.startsWith("--")) return o;
1243
- const i = o.toLowerCase();
1244
- switch (i) {
1245
- case "show-modal":
1246
- case "request-close":
1247
- case "close":
1248
- case "toggle-popover":
1249
- case "hide-popover":
1250
- case "show-popover":
1251
- return i;
1252
- }
1253
- return "";
1254
- },
1255
- set(o) {
1256
- this.setAttribute("command", o);
1257
- }
1258
- },
1259
- invokeAction: {
1260
- enumerable: !1,
1261
- configurable: !0,
1262
- get() {
1263
- throw new Error(
1264
- "invokeAction is deprecated. It has been renamed to command"
1265
- );
1266
- },
1267
- set(o) {
1268
- throw new Error(
1269
- "invokeAction is deprecated. It has been renamed to command"
1270
- );
1271
- }
1272
- },
1273
- invokeTargetElement: {
1274
- enumerable: !1,
1275
- configurable: !0,
1276
- get() {
1277
- throw new Error(
1278
- "invokeTargetElement is deprecated. It has been renamed to command"
1279
- );
1280
- },
1281
- set(o) {
1282
- throw new Error(
1283
- "invokeTargetElement is deprecated. It has been renamed to command"
1284
- );
1285
- }
1286
- }
1287
- });
1288
- }
1289
- const f = /* @__PURE__ */ new WeakMap();
1290
- Object.defineProperties(HTMLElement.prototype, {
1291
- oncommand: {
1292
- enumerable: !0,
1293
- configurable: !0,
1294
- get() {
1295
- return b.takeRecords(), f.get(this) || null;
1296
- },
1297
- set(r) {
1298
- const o = f.get(this) || null;
1299
- o && this.removeEventListener("command", o), f.set(
1300
- this,
1301
- typeof r == "object" || typeof r == "function" ? r : null
1302
- ), typeof r == "function" && this.addEventListener("command", r);
1303
- }
1304
- }
1305
- });
1306
- function p(r) {
1307
- for (const o of r)
1308
- o.oncommand = new Function("event", o.getAttribute("oncommand"));
1309
- }
1310
- const b = new MutationObserver((r) => {
1311
- for (const o of r) {
1312
- const { target: i } = o;
1313
- o.type === "childList" ? p(i.querySelectorAll("[oncommand]")) : p([i]);
1314
- }
1315
- });
1316
- b.observe(document, {
1317
- subtree: !0,
1318
- childList: !0,
1319
- attributeFilter: ["oncommand"]
1320
- }), p(document.querySelectorAll("[oncommand]"));
1321
- const I = /* @__PURE__ */ new WeakSet();
1322
- function y(r) {
1323
- if (I.has(r) || (I.add(r), r.defaultPrevented) || r.type !== "click") return;
1324
- const o = r.target.closest(
1325
- "button[invoketarget], button[invokeaction], input[invoketarget], input[invokeaction]"
1326
- );
1327
- if (o && (console.warn(
1328
- "Elements with `invoketarget` or `invokeaction` are deprecated and should be renamed to use `commandfor` and `command` respectively"
1329
- ), o.matches("input")))
1330
- throw new Error("Input elements no longer support `commandfor`");
1331
- const i = r.target.closest("button[commandfor], button[command]");
1332
- if (!i) return;
1333
- if (i.form && i.getAttribute("type") !== "button")
1334
- throw r.preventDefault(), new Error(
1335
- "Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work. In order for it to act as a Submit button, it must not have command or commandfor attributes"
1336
- );
1337
- if (i.hasAttribute("command") !== i.hasAttribute("commandfor")) {
1338
- const w = i.hasAttribute("command") ? "command" : "commandfor", T = i.hasAttribute("command") ? "commandfor" : "command";
1339
- throw new Error(
1340
- `Element with ${w} attribute must also have a ${T} attribute to function.`
1341
- );
1342
- }
1343
- if (i.command !== "show-popover" && i.command !== "hide-popover" && i.command !== "toggle-popover" && i.command !== "show-modal" && i.command !== "request-close" && i.command !== "close" && !i.command.startsWith("--")) {
1344
- console.warn(
1345
- `"${i.command}" is not a valid command value. Custom commands must begin with --`
1346
- );
1347
- return;
1348
- }
1349
- const d = i.commandForElement;
1350
- if (!d) return;
1351
- const E = new a("command", {
1352
- command: i.command,
1353
- source: i,
1354
- cancelable: !0
1355
- });
1356
- if (d.dispatchEvent(E), E.defaultPrevented)
1357
- return;
1358
- const x = E.command.toLowerCase();
1359
- if (d.popover) {
1360
- const w = !d.matches(":popover-open");
1361
- w && (x === "toggle-popover" || x === "show-popover") ? d.showPopover({ source: i }) : !w && x === "hide-popover" && d.hidePopover();
1362
- } else if (d.localName === "dialog") {
1363
- const w = !d.hasAttribute("open");
1364
- w && x == "show-modal" ? d.showModal() : !w && x == "close" ? d.close(i.value ? i.value : void 0) : !w && x == "request-close" && (HTMLDialogElement.prototype.requestClose || (HTMLDialogElement.prototype.requestClose = function() {
1365
- const T = new Event("cancel", { cancelable: !0 });
1366
- this.dispatchEvent(T), T.defaultPrevented || this.close();
1367
- }), d.requestClose(i.value ? i.value : void 0));
1368
- }
1369
- }
1370
- function D(r) {
1371
- r.addEventListener("click", y, !0);
1372
- }
1373
- function V(r, o) {
1374
- const i = r.prototype.attachShadow;
1375
- r.prototype.attachShadow = function(E) {
1376
- const x = i.call(this, E);
1377
- return o(x), x;
1378
- };
1379
- const d = r.prototype.attachInternals;
1380
- r.prototype.attachInternals = function() {
1381
- const E = d.call(this);
1382
- return E.shadowRoot && o(E.shadowRoot), E;
1383
- };
1384
- }
1385
- g(HTMLButtonElement), V(HTMLElement, (r) => {
1386
- D(r), b.observe(r, { attributeFilter: ["oncommand"] }), p(r.querySelectorAll("[oncommand]"));
1387
- }), D(document), Object.assign(globalThis, { CommandEvent: a, InvokeEvent: l });
897
+ function b() {
898
+ document.addEventListener("invoke", (e) => {
899
+ e.type == "invoke" && e.isTrusted && (e.stopImmediatePropagation(), e.preventDefault());
900
+ }, !0), document.addEventListener("command", (e) => {
901
+ e.type == "command" && e.isTrusted && (e.stopImmediatePropagation(), e.preventDefault());
902
+ }, !0);
903
+ function e(e, t, n = !0) {
904
+ Object.defineProperty(e, t, {
905
+ ...Object.getOwnPropertyDescriptor(e, t),
906
+ enumerable: n
907
+ });
908
+ }
909
+ function t(e) {
910
+ return e && typeof e.getRootNode == "function" ? e.getRootNode() : e && e.parentNode ? t(e.parentNode) : e;
911
+ }
912
+ let n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap();
913
+ class i extends Event {
914
+ constructor(e, t = {}) {
915
+ super(e, t);
916
+ let { source: i, command: a } = t;
917
+ if (i != null && !(i instanceof Element)) throw TypeError("source must be an element");
918
+ n.set(this, i || null), r.set(this, a === void 0 ? "" : String(a));
919
+ }
920
+ get [Symbol.toStringTag]() {
921
+ return "CommandEvent";
922
+ }
923
+ get source() {
924
+ if (!n.has(this)) throw TypeError("illegal invocation");
925
+ let e = n.get(this);
926
+ if (!(e instanceof Element)) return null;
927
+ let r = t(e);
928
+ return r === t(this.target || document) ? e : r.host;
929
+ }
930
+ get command() {
931
+ if (!r.has(this)) throw TypeError("illegal invocation");
932
+ return r.get(this);
933
+ }
934
+ }
935
+ e(i.prototype, "source"), e(i.prototype, "command");
936
+ let a = /* @__PURE__ */ new WeakMap();
937
+ function o(e) {
938
+ Object.defineProperties(e.prototype, {
939
+ commandForElement: {
940
+ enumerable: !0,
941
+ configurable: !0,
942
+ set(e) {
943
+ if (e === null) this.removeAttribute("commandfor"), a.delete(this);
944
+ else if (e instanceof Element) {
945
+ this.setAttribute("commandfor", "");
946
+ let n = t(e);
947
+ t(this) === n || n === this.ownerDocument ? a.set(this, e) : a.delete(this);
948
+ } else throw TypeError("commandForElement must be an element or null");
949
+ },
950
+ get() {
951
+ if (this.localName !== "button" || this.disabled) return null;
952
+ if (this.form && this.getAttribute("type") !== "button") return console.warn("Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work"), null;
953
+ let e = a.get(this);
954
+ if (e) return e.isConnected ? e : (a.delete(this), null);
955
+ let n = t(this), r = this.getAttribute("commandfor");
956
+ return (n instanceof Document || n instanceof ShadowRoot) && r && n.getElementById(r) || null;
957
+ }
958
+ },
959
+ command: {
960
+ enumerable: !0,
961
+ configurable: !0,
962
+ get() {
963
+ let e = this.getAttribute("command") || "";
964
+ if (e.startsWith("--")) return e;
965
+ let t = e.toLowerCase();
966
+ switch (t) {
967
+ case "show-modal":
968
+ case "request-close":
969
+ case "close":
970
+ case "toggle-popover":
971
+ case "hide-popover":
972
+ case "show-popover": return t;
973
+ }
974
+ return "";
975
+ },
976
+ set(e) {
977
+ this.setAttribute("command", e);
978
+ }
979
+ }
980
+ });
981
+ }
982
+ let s = /* @__PURE__ */ new WeakMap();
983
+ Object.defineProperties(HTMLElement.prototype, { oncommand: {
984
+ enumerable: !0,
985
+ configurable: !0,
986
+ get() {
987
+ return l.takeRecords(), s.get(this) || null;
988
+ },
989
+ set(e) {
990
+ let t = s.get(this) || null;
991
+ t && this.removeEventListener("command", t), s.set(this, typeof e == "object" || typeof e == "function" ? e : null), typeof e == "function" && this.addEventListener("command", e);
992
+ }
993
+ } });
994
+ function c(e) {
995
+ for (let t of e) t.oncommand = Function("event", t.getAttribute("oncommand"));
996
+ }
997
+ let l = new MutationObserver((e) => {
998
+ for (let t of e) {
999
+ let { target: e } = t;
1000
+ t.type === "childList" ? c(e.querySelectorAll("[oncommand]")) : c([e]);
1001
+ }
1002
+ });
1003
+ l.observe(document, {
1004
+ subtree: !0,
1005
+ childList: !0,
1006
+ attributeFilter: ["oncommand"]
1007
+ }), c(document.querySelectorAll("[oncommand]"));
1008
+ let u = /* @__PURE__ */ new WeakSet();
1009
+ function d(e) {
1010
+ if (u.has(e) || (u.add(e), e.defaultPrevented) || e.type !== "click") return;
1011
+ let t = e.composedPath().find((e) => e.matches?.("button[commandfor], button[command]"));
1012
+ if (!t) return;
1013
+ if (t.form && t.getAttribute("type") !== "button") throw e.preventDefault(), Error("Element with `commandFor` is a form participant. It should explicitly set `type=button` in order for `commandFor` to work. In order for it to act as a Submit button, it must not have command or commandfor attributes");
1014
+ if (t.hasAttribute("command") !== t.hasAttribute("commandfor")) {
1015
+ let e = t.hasAttribute("command") ? "command" : "commandfor", n = t.hasAttribute("command") ? "commandfor" : "command";
1016
+ throw Error(`Element with ${e} attribute must also have a ${n} attribute to function.`);
1017
+ }
1018
+ if (t.command !== "show-popover" && t.command !== "hide-popover" && t.command !== "toggle-popover" && t.command !== "show-modal" && t.command !== "request-close" && t.command !== "close" && !t.command.startsWith("--")) {
1019
+ console.warn(`"${t.command}" is not a valid command value. Custom commands must begin with --`);
1020
+ return;
1021
+ }
1022
+ let n = t.commandForElement;
1023
+ if (!n) return;
1024
+ let r = new i("command", {
1025
+ command: t.command,
1026
+ source: t,
1027
+ cancelable: !0
1028
+ });
1029
+ if (n.dispatchEvent(r), r.defaultPrevented) return;
1030
+ let a = r.command.toLowerCase();
1031
+ if (n.popover) {
1032
+ let e = !n.matches(":popover-open");
1033
+ e && (a === "toggle-popover" || a === "show-popover") ? n.showPopover({ source: t }) : !e && a === "hide-popover" && n.hidePopover();
1034
+ } else if (n.localName === "dialog") {
1035
+ let e = !n.hasAttribute("open");
1036
+ e && a == "show-modal" ? n.showModal() : !e && a == "close" ? n.close(t.value ? t.value : void 0) : !e && a == "request-close" && (HTMLDialogElement.prototype.requestClose || (HTMLDialogElement.prototype.requestClose = function() {
1037
+ let e = new Event("cancel", { cancelable: !0 });
1038
+ this.dispatchEvent(e), e.defaultPrevented || this.close();
1039
+ }), n.requestClose(t.value ? t.value : void 0));
1040
+ }
1041
+ }
1042
+ function f(e) {
1043
+ e.addEventListener("click", d, !0);
1044
+ }
1045
+ function p(e, t) {
1046
+ let n = e.prototype.attachShadow;
1047
+ e.prototype.attachShadow = function(e) {
1048
+ let r = n.call(this, e);
1049
+ return t(r), r;
1050
+ };
1051
+ let r = e.prototype.attachInternals;
1052
+ e.prototype.attachInternals = function() {
1053
+ let e = r.call(this);
1054
+ return e.shadowRoot && t(e.shadowRoot), e;
1055
+ };
1056
+ }
1057
+ o(HTMLButtonElement), p(HTMLElement, (e) => {
1058
+ f(e), l.observe(e, { attributeFilter: ["oncommand"] }), c(e.querySelectorAll("[oncommand]"));
1059
+ }), f(document), Object.assign(globalThis, { CommandEvent: i });
1388
1060
  }
1389
- N() || U();
1061
+ //#endregion
1062
+ //#region src/tarragon-ui.ts
1063
+ y() || b();
1064
+ //#endregion