@webority/ui-elements 0.13.5 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-elements.global.js +123 -159
- package/dist/ui-elements.js +1682 -1644
- package/package.json +1 -1
package/dist/ui-elements.js
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
//#region src/elementBase.js
|
|
2
2
|
var e = typeof HTMLElement > "u" ? class {} : HTMLElement, t = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}, n =
|
|
3
|
+
delete: "data:image/webp;base64,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",
|
|
4
|
+
info: "data:image/webp;base64,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",
|
|
5
|
+
primary: "data:image/webp;base64,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",
|
|
6
|
+
success: "data:image/webp;base64,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",
|
|
7
|
+
warning: "data:image/webp;base64,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"
|
|
8
|
+
}, n = { error: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-danger-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-danger-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_error_clip0)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-danger)\"/>\n<rect x=\"110.758\" y=\"62\" width=\"75.5044\" height=\"69.9535\" transform=\"rotate(45 110.758 62)\" fill=\"var(--wui-danger-active)\"/>\n<g clip-path=\"url(#wui_error_clip1)\">\n<path d=\"M95.9285 87.0037L112.943 69.9887C114.823 68.1087 114.823 65.0608 112.943 63.1838L110.675 60.9155C108.795 59.0349 105.747 59.0349 103.87 60.9155L86.8552 77.9298L69.8403 60.9119C67.9603 59.032 64.9124 59.032 63.0353 60.9119L60.7635 63.1802C58.8835 65.0608 58.8835 68.1087 60.7635 69.9858L77.7814 87.0037L60.767 104.018C58.8865 105.899 58.8865 108.947 60.767 110.824L63.0353 113.092C64.9153 114.972 67.9632 114.972 69.8403 113.092L86.8552 96.0769L103.87 113.092C105.75 114.972 108.798 114.972 110.675 113.092L112.943 110.824C114.823 108.943 114.823 105.895 112.943 104.018L95.9285 87.0037Z\" fill=\"white\"/>\n</g>\n</g>\n<defs><clipPath id=\"wui_error_clip0\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath><clipPath id=\"wui_error_clip1\"><rect width=\"55\" height=\"55\" fill=\"white\" transform=\"translate(59.3535 59.502)\"/></clipPath></defs>" }, r = [
|
|
9
|
+
"success",
|
|
10
|
+
"error",
|
|
11
|
+
"warning",
|
|
12
|
+
"info",
|
|
13
|
+
"delete",
|
|
14
|
+
"primary"
|
|
15
|
+
], i = class extends e {
|
|
9
16
|
static get observedAttributes() {
|
|
10
17
|
return ["tone", "size"];
|
|
11
18
|
}
|
|
@@ -16,48 +23,53 @@ var e = typeof HTMLElement > "u" ? class {} : HTMLElement, t = {
|
|
|
16
23
|
this.isConnected && this.render();
|
|
17
24
|
}
|
|
18
25
|
render() {
|
|
19
|
-
let e = this.getAttribute("tone"),
|
|
20
|
-
|
|
26
|
+
let e = this.getAttribute("tone"), r = Number.parseInt(this.getAttribute("size"), 10) || 72, i = n[e];
|
|
27
|
+
if (i) {
|
|
28
|
+
this.innerHTML = `<svg width="${r}" height="${r}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${i}</svg>`;
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
let a = t[e] || t.info;
|
|
32
|
+
this.innerHTML = `<img src="${a}" width="${r}" height="${r}" alt="" aria-hidden="true" draggable="false" />`;
|
|
21
33
|
}
|
|
22
|
-
},
|
|
23
|
-
function
|
|
34
|
+
}, a = 4, o = 300, s = 400;
|
|
35
|
+
function c(e, t, n = {}) {
|
|
24
36
|
if (!e || !t) return;
|
|
25
|
-
let r = e.getBoundingClientRect(),
|
|
37
|
+
let r = e.getBoundingClientRect(), i = n.clampHeight ? t.scrollTop : 0;
|
|
26
38
|
n.clampHeight && (t.style.maxHeight = "");
|
|
27
|
-
let c = t.offsetHeight, l = window.innerHeight - r.bottom, u = l < c +
|
|
28
|
-
if (t.classList.toggle("drop-up", u), t.style.position = "fixed", t.style.top = u ? `${Math.max(
|
|
29
|
-
let e = u ? r.top -
|
|
30
|
-
e < c && (t.style.maxHeight = `${Math.max(e, 0)}px`), t.scrollTop =
|
|
31
|
-
}
|
|
32
|
-
n.matchWidth && (r.width >=
|
|
33
|
-
let d = t.offsetWidth, f = Math.min(r.left, window.innerWidth - d -
|
|
34
|
-
t.style.left = `${Math.max(
|
|
39
|
+
let c = t.offsetHeight, l = window.innerHeight - r.bottom, u = l < c + a && r.top > l;
|
|
40
|
+
if (t.classList.toggle("drop-up", u), t.style.position = "fixed", t.style.top = u ? `${Math.max(a, r.top - c - a)}px` : `${r.bottom + a}px`, n.clampHeight) {
|
|
41
|
+
let e = u ? r.top - a * 2 : window.innerHeight - r.bottom - a * 2;
|
|
42
|
+
e < c && (t.style.maxHeight = `${Math.max(e, 0)}px`), t.scrollTop = i;
|
|
43
|
+
}
|
|
44
|
+
n.matchWidth && (r.width >= o ? (t.style.minWidth = `${r.width}px`, t.style.width = `${r.width}px`, t.style.maxWidth = `${r.width}px`) : (t.style.minWidth = `${r.width}px`, t.style.width = "max-content", t.style.maxWidth = `${Math.min(s, window.innerWidth - a * 2)}px`));
|
|
45
|
+
let d = t.offsetWidth, f = Math.min(r.left, window.innerWidth - d - a);
|
|
46
|
+
t.style.left = `${Math.max(a, f)}px`;
|
|
35
47
|
}
|
|
36
|
-
function
|
|
37
|
-
|
|
48
|
+
function l(e, t) {
|
|
49
|
+
u(e), e._reanchor = t, e._reanchorScroll = (n) => {
|
|
38
50
|
n.target instanceof Node && typeof e.contains == "function" && e.contains(n.target) || t();
|
|
39
51
|
}, window.addEventListener("resize", e._reanchor), window.addEventListener("scroll", e._reanchorScroll, !0);
|
|
40
52
|
}
|
|
41
|
-
function
|
|
53
|
+
function u(e) {
|
|
42
54
|
e?._reanchor && (window.removeEventListener("resize", e._reanchor), window.removeEventListener("scroll", e._reanchorScroll, !0), e._reanchor = null, e._reanchorScroll = null);
|
|
43
55
|
}
|
|
44
56
|
//#endregion
|
|
45
57
|
//#region src/formMirror.js
|
|
46
|
-
var
|
|
47
|
-
function
|
|
48
|
-
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${
|
|
58
|
+
var d = "data-wui-mirror";
|
|
59
|
+
function f(e, t) {
|
|
60
|
+
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${d}]`);
|
|
49
61
|
if (!n) {
|
|
50
62
|
r?.remove();
|
|
51
63
|
return;
|
|
52
64
|
}
|
|
53
|
-
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(
|
|
65
|
+
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(d, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
|
|
54
66
|
for (let t of [...r.attributes]) t.name.startsWith("data-val") && !e.hasAttribute(t.name) && r.removeAttribute(t.name);
|
|
55
67
|
for (let t of e.attributes) t.name.startsWith("data-val") && r.setAttribute(t.name, t.value);
|
|
56
68
|
r.disabled = e.hasAttribute("disabled");
|
|
57
69
|
}
|
|
58
70
|
//#endregion
|
|
59
71
|
//#region src/iconGlyphs.g.js
|
|
60
|
-
var
|
|
72
|
+
var p = {
|
|
61
73
|
activity: "<path d=\"M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"m7.33 14.49 2.38-3.09c.34-.44.97-.52 1.41-.18l1.83 1.44c.44.34 1.07.26 1.41-.17l2.31-2.98\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
|
|
62
74
|
alarm: "<path d=\"M2 22h20M12 6a9 9 0 0 0-9 9v7h18v-7a9 9 0 0 0-9-9ZM12 2v1M4 4l1 1M20 4l-1 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
|
|
63
75
|
"alert-circle": "<path d=\"M12 7.75V13M21.08 8.58v6.84c0 1.12-.6 2.16-1.57 2.73l-5.94 3.43c-.97.56-2.17.56-3.15 0l-5.94-3.43a3.15 3.15 0 0 1-1.57-2.73V8.58c0-1.12.6-2.16 1.57-2.73l5.94-3.43c.97-.56 2.17-.56 3.15 0l5.94 3.43c.97.57 1.57 1.6 1.57 2.73Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M12 16.2v.1\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
|
|
@@ -206,14 +218,14 @@ var f = {
|
|
|
206
218
|
"zoom-in": "<path d=\"M11 20a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM8.5 11h5M11 13.5v-5M18.93 20.69c.53 1.6 1.74 1.76 2.67.36.85-1.28.29-2.33-1.25-2.33-1.14-.01-1.78.88-1.42 1.97Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
|
|
207
219
|
"zoom-out": "<path d=\"M9 11.7h5M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>"
|
|
208
220
|
};
|
|
209
|
-
Object.keys(
|
|
210
|
-
function
|
|
211
|
-
let i =
|
|
221
|
+
Object.keys(p);
|
|
222
|
+
function m(e, { size: t = 16, className: n = "", style: r = "" } = {}) {
|
|
223
|
+
let i = p[e];
|
|
212
224
|
return i ? `<svg class="${n ? `wui-icon ${n}` : "wui-icon"}" data-icon="${e}" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" aria-hidden="true" style="vertical-align:-.125em${r ? `;${r}` : ""}">${i}</svg>` : "";
|
|
213
225
|
}
|
|
214
226
|
//#endregion
|
|
215
227
|
//#region src/listboxKeyNav.js
|
|
216
|
-
function
|
|
228
|
+
function h(e) {
|
|
217
229
|
let { getVisibleOptions: t, getActive: n, setActive: r, onEnter: i, onEscape: a, onTypeahead: o, typeaheadMs: s = 500 } = e, c = "", l = null, u = () => {
|
|
218
230
|
clearTimeout(l), l = null, c = "";
|
|
219
231
|
};
|
|
@@ -244,15 +256,18 @@ function m(e) {
|
|
|
244
256
|
}
|
|
245
257
|
//#endregion
|
|
246
258
|
//#region src/optionLabel.js
|
|
247
|
-
var
|
|
259
|
+
var g = Symbol("wui.trustedHtml"), _ = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"), v = (e) => {
|
|
248
260
|
if (!e) return "";
|
|
249
261
|
let t = String(e).toLowerCase().replace(/[^a-z0-9-]/g, "");
|
|
250
|
-
return t ?
|
|
251
|
-
},
|
|
262
|
+
return t ? m(t) : "";
|
|
263
|
+
}, y = (e) => `wui-flag wui-flag-${e}`, b = (e) => {
|
|
264
|
+
let t = String(e ?? "").toLowerCase();
|
|
265
|
+
return /^[a-z]{2}$/.test(t) ? `<span class="${y(t)}" aria-hidden="true"></span>` : "";
|
|
266
|
+
}, x = (e) => {
|
|
252
267
|
if (e == null) return "";
|
|
253
|
-
let t = e[
|
|
268
|
+
let t = e[g] ? String(e.label ?? "") : _(e.label), n = b(e.flag) + v(e.icon);
|
|
254
269
|
return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
|
|
255
|
-
},
|
|
270
|
+
}, S = class extends e {
|
|
256
271
|
static formAssociated = !0;
|
|
257
272
|
_accessibleName() {
|
|
258
273
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
@@ -311,14 +326,14 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
311
326
|
return this._value;
|
|
312
327
|
}
|
|
313
328
|
set value(e) {
|
|
314
|
-
this._value = e == null ? "" : String(e),
|
|
329
|
+
this._value = e == null ? "" : String(e), f(this, this._value);
|
|
315
330
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
316
|
-
this._label = t ?
|
|
331
|
+
this._label = t ? w(t.label) : "", this._syncInput(), this._renderOptions("");
|
|
317
332
|
}
|
|
318
333
|
set options(e) {
|
|
319
334
|
this._optionsProp = Array.isArray(e) ? e : [];
|
|
320
335
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
321
|
-
t && (this._label =
|
|
336
|
+
t && (this._label = w(t.label)), this._renderOptions(), this._syncInput();
|
|
322
337
|
}
|
|
323
338
|
get options() {
|
|
324
339
|
return this._readOptions();
|
|
@@ -337,7 +352,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
337
352
|
}
|
|
338
353
|
_matchesKnownOption(e) {
|
|
339
354
|
let t = e.toLowerCase();
|
|
340
|
-
return this._readOptions().some((e) =>
|
|
355
|
+
return this._readOptions().some((e) => w(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
|
|
341
356
|
}
|
|
342
357
|
get _minChars() {
|
|
343
358
|
return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
|
|
@@ -355,7 +370,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
355
370
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
356
371
|
label: e.innerHTML,
|
|
357
372
|
icon: e.getAttribute("icon") || void 0,
|
|
358
|
-
[
|
|
373
|
+
[g]: !0,
|
|
359
374
|
selected: e.hasAttribute("selected")
|
|
360
375
|
})));
|
|
361
376
|
}
|
|
@@ -369,17 +384,17 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
369
384
|
let r = `${this.id}-listbox`;
|
|
370
385
|
this._listboxId = r, this.innerHTML = `
|
|
371
386
|
<div class="search-select${n}">
|
|
372
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${
|
|
373
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
387
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${C(r)}" aria-label="${C(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}>
|
|
388
|
+
<input class="search-select-input search-select-ac-input" placeholder="${C(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
374
389
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
375
|
-
<button type="button" class="search-select-clear" aria-label="Clear" hidden>${
|
|
390
|
+
<button type="button" class="search-select-clear" aria-label="Clear" hidden>${m("x")}</button>
|
|
376
391
|
</div>
|
|
377
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${
|
|
392
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${C(r)}" tabindex="-1" hidden>
|
|
378
393
|
<div class="search-select-options"></div>
|
|
379
394
|
<div class="search-select-empty" hidden>No matches</div>
|
|
380
395
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
381
396
|
</div>
|
|
382
|
-
</div>`, this._rendered = !0,
|
|
397
|
+
</div>`, this._rendered = !0, f(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
|
|
383
398
|
}
|
|
384
399
|
_refs() {
|
|
385
400
|
return {
|
|
@@ -408,7 +423,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
408
423
|
let t = this._refs();
|
|
409
424
|
if (!t.optionsWrap) return;
|
|
410
425
|
let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
|
|
411
|
-
!this._remote && r && (i = i.filter((e) =>
|
|
426
|
+
!this._remote && r && (i = i.filter((e) => w(e.label).toLowerCase().includes(r)));
|
|
412
427
|
let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
|
|
413
428
|
value: a,
|
|
414
429
|
custom: !0
|
|
@@ -416,11 +431,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
416
431
|
t.optionsWrap.innerHTML = o.map((e, t) => {
|
|
417
432
|
let n = `${s}-opt-${t}`;
|
|
418
433
|
if (e.custom) {
|
|
419
|
-
let t = `Add “${
|
|
420
|
-
return `<button type="button" role="option" id="${
|
|
434
|
+
let t = `Add “${_(e.value)}”`;
|
|
435
|
+
return `<button type="button" role="option" id="${C(n)}" class="search-select-option search-select-option-custom" data-value="${C(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
|
|
421
436
|
}
|
|
422
437
|
let r = String(e.value) === String(this._value);
|
|
423
|
-
return `<button type="button" role="option" id="${
|
|
438
|
+
return `<button type="button" role="option" id="${C(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${C(e.value)}" aria-selected="${r}">${x(e)}</button>`;
|
|
424
439
|
}).join(""), this._active = -1, t.control?.removeAttribute("aria-activedescendant");
|
|
425
440
|
let c = r.length < this._minChars;
|
|
426
441
|
t.hint && (t.hint.hidden = !(this._remote && c && !i.length)), t.empty && (t.empty.hidden = this._loading || o.length > 0 || this._remote && c), this._reanchor?.();
|
|
@@ -429,7 +444,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
429
444
|
this._teardown();
|
|
430
445
|
let e = this._refs();
|
|
431
446
|
if (!e.control || !e.input) return;
|
|
432
|
-
let t = () =>
|
|
447
|
+
let t = () => c(e.control, e.menu, { matchWidth: !0 }), n = () => this._optionEls().filter((e) => !e.hidden), r = (t) => {
|
|
433
448
|
let r = n();
|
|
434
449
|
this._active = t;
|
|
435
450
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
@@ -438,18 +453,18 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
438
453
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
439
454
|
}, o = () => {
|
|
440
455
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "", this._syncInput();
|
|
441
|
-
},
|
|
456
|
+
}, s = (t) => {
|
|
442
457
|
let n = t.dataset.custom === "true";
|
|
443
|
-
this._value = t.dataset.value, this._label = n ? t.dataset.value :
|
|
458
|
+
this._value = t.dataset.value, this._label = n ? t.dataset.value : w(t.innerHTML), f(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
|
|
444
459
|
bubbles: !0,
|
|
445
460
|
detail: { isCustom: n }
|
|
446
461
|
})), o(), e.input.focus();
|
|
447
462
|
}, u = (t) => {
|
|
448
|
-
this._value = t, this._label = t,
|
|
463
|
+
this._value = t, this._label = t, f(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
|
|
449
464
|
bubbles: !0,
|
|
450
465
|
detail: { isCustom: !0 }
|
|
451
466
|
})), o();
|
|
452
|
-
},
|
|
467
|
+
}, d = () => {
|
|
453
468
|
let t = e.input.value;
|
|
454
469
|
if (e.clear && (e.clear.hidden = !t), i() || a(), this._remote) {
|
|
455
470
|
if (this._renderOptions(t), clearTimeout(this._timer), t.trim().length < this._minChars) {
|
|
@@ -463,12 +478,12 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
463
478
|
}, this._timer = setTimeout(() => this._fireSearch(t, e), this._debounceMs);
|
|
464
479
|
} else this._renderOptions(t);
|
|
465
480
|
};
|
|
466
|
-
this._navHandler =
|
|
481
|
+
this._navHandler = h({
|
|
467
482
|
getVisibleOptions: n,
|
|
468
483
|
getActive: () => this._active,
|
|
469
484
|
setActive: (e) => r(e),
|
|
470
485
|
onEnter: (t, n) => {
|
|
471
|
-
if (n[this._active])
|
|
486
|
+
if (n[this._active]) s(n[this._active]);
|
|
472
487
|
else if (this._allowCustom) {
|
|
473
488
|
let t = e.input.value.trim();
|
|
474
489
|
t && !this._matchesKnownOption(t) && u(t);
|
|
@@ -492,22 +507,22 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
492
507
|
else if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey || !i() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA") && (!i() || e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA")) return;
|
|
493
508
|
this._navHandler.handler(e);
|
|
494
509
|
};
|
|
495
|
-
e.input.addEventListener("focus", () => a()), e.input.addEventListener("input",
|
|
510
|
+
e.input.addEventListener("focus", () => a()), e.input.addEventListener("input", d), e.input.addEventListener("keydown", p), e.menu.addEventListener("keydown", p), e.input.addEventListener("blur", (t) => {
|
|
496
511
|
if (!this._allowCustom || t.relatedTarget && this.contains(t.relatedTarget)) return;
|
|
497
512
|
let n = e.input.value.trim();
|
|
498
513
|
!n || n === this._label || this._matchesKnownOption(n) || u(n);
|
|
499
514
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
500
515
|
let t = e.target.closest(".search-select-option");
|
|
501
|
-
t &&
|
|
516
|
+
t && s(t);
|
|
502
517
|
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
503
518
|
let t = e.target.closest(".search-select-option");
|
|
504
519
|
t && r(this._optionEls().indexOf(t));
|
|
505
520
|
}), e.optionsWrap.addEventListener("mouseleave", () => r(-1)), e.clear?.addEventListener("click", () => {
|
|
506
|
-
this._value = "", this._label = "",
|
|
521
|
+
this._value = "", this._label = "", f(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
|
|
507
522
|
}), this._bindGlobal = () => {
|
|
508
523
|
this._teardown(), this._onDocClick = (e) => {
|
|
509
524
|
i() && !this.contains(e.target) && o();
|
|
510
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
525
|
+
}, document.addEventListener("click", this._onDocClick), l(this, () => {
|
|
511
526
|
i() && t();
|
|
512
527
|
});
|
|
513
528
|
}, this._bindGlobal();
|
|
@@ -522,12 +537,12 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
522
537
|
}));
|
|
523
538
|
}
|
|
524
539
|
_teardown() {
|
|
525
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null),
|
|
540
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this), clearTimeout(this._timer), this._navHandler?.teardown();
|
|
526
541
|
}
|
|
527
542
|
disconnectedCallback() {
|
|
528
543
|
this._teardown();
|
|
529
544
|
}
|
|
530
|
-
},
|
|
545
|
+
}, C = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), w = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), T = {
|
|
531
546
|
"--color-primary": "#4F46E5",
|
|
532
547
|
"--color-primary-hover": "#4338CA",
|
|
533
548
|
"--color-text": "#071437",
|
|
@@ -537,21 +552,21 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
537
552
|
"--wui-radius-lg": "14px",
|
|
538
553
|
"--wui-shadow-overlay-lg": "0 24px 60px -16px rgba(7, 20, 55, 0.28)",
|
|
539
554
|
"--wui-z-fixed": "1030"
|
|
540
|
-
},
|
|
555
|
+
}, E = (e) => `var(${e}, ${T[e]})`, D = `
|
|
541
556
|
:host {
|
|
542
557
|
all: initial;
|
|
543
558
|
position: fixed;
|
|
544
559
|
bottom: 20px;
|
|
545
560
|
left: 20px;
|
|
546
561
|
right: auto;
|
|
547
|
-
z-index: ${
|
|
562
|
+
z-index: ${E("--wui-z-fixed")};
|
|
548
563
|
display: block;
|
|
549
564
|
width: 420px;
|
|
550
565
|
max-width: calc(100vw - 40px);
|
|
551
566
|
font-family: inherit;
|
|
552
567
|
font-size: 16px;
|
|
553
568
|
line-height: 1.5;
|
|
554
|
-
color: ${
|
|
569
|
+
color: ${E("--color-text")};
|
|
555
570
|
}
|
|
556
571
|
:host([position="bottom-right"]) {
|
|
557
572
|
right: 20px;
|
|
@@ -569,10 +584,10 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
569
584
|
|
|
570
585
|
.wui-consent-banner-panel {
|
|
571
586
|
padding: 20px;
|
|
572
|
-
background: ${
|
|
573
|
-
border: 1px solid ${
|
|
574
|
-
border-radius: ${
|
|
575
|
-
box-shadow: ${
|
|
587
|
+
background: ${E("--color-surface")};
|
|
588
|
+
border: 1px solid ${E("--color-border")};
|
|
589
|
+
border-radius: ${E("--wui-radius-lg")};
|
|
590
|
+
box-shadow: ${E("--wui-shadow-overlay-lg")};
|
|
576
591
|
text-align: start;
|
|
577
592
|
pointer-events: auto;
|
|
578
593
|
}
|
|
@@ -581,16 +596,16 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
581
596
|
font-size: 18px;
|
|
582
597
|
font-weight: 600;
|
|
583
598
|
line-height: 1.3;
|
|
584
|
-
color: ${
|
|
599
|
+
color: ${E("--color-text")};
|
|
585
600
|
}
|
|
586
601
|
.wui-consent-banner-description {
|
|
587
602
|
margin: 0 0 16px;
|
|
588
603
|
font-size: 14px;
|
|
589
604
|
line-height: 1.5;
|
|
590
|
-
color: ${
|
|
605
|
+
color: ${E("--color-text-muted")};
|
|
591
606
|
}
|
|
592
607
|
.wui-consent-banner-policy {
|
|
593
|
-
color: ${
|
|
608
|
+
color: ${E("--color-primary")};
|
|
594
609
|
font-weight: 500;
|
|
595
610
|
}
|
|
596
611
|
|
|
@@ -601,15 +616,15 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
601
616
|
margin: 0 0 16px;
|
|
602
617
|
padding: 12px 0;
|
|
603
618
|
overflow-y: auto;
|
|
604
|
-
border-top: 1px solid ${
|
|
605
|
-
border-bottom: 1px solid ${
|
|
619
|
+
border-top: 1px solid ${E("--color-border")};
|
|
620
|
+
border-bottom: 1px solid ${E("--color-border")};
|
|
606
621
|
}
|
|
607
622
|
.wui-consent-banner-category-description {
|
|
608
623
|
margin: 2px 0 0;
|
|
609
624
|
padding-inline-start: 2.5em;
|
|
610
625
|
font-size: 12px;
|
|
611
626
|
line-height: 1.4;
|
|
612
|
-
color: ${
|
|
627
|
+
color: ${E("--color-text-muted")};
|
|
613
628
|
}
|
|
614
629
|
|
|
615
630
|
.form-check {
|
|
@@ -627,20 +642,20 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
627
642
|
margin: 0;
|
|
628
643
|
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
629
644
|
border-radius: 2em;
|
|
630
|
-
background: ${
|
|
645
|
+
background: ${E("--color-surface")} radial-gradient(circle, rgba(0, 0, 0, 0.25) 0.35em, transparent 0.4em) left / 1em 1em no-repeat;
|
|
631
646
|
cursor: pointer;
|
|
632
647
|
transition: background-position 0.15s ease-in-out;
|
|
633
648
|
}
|
|
634
649
|
.form-check-input:checked {
|
|
635
|
-
border-color: ${
|
|
636
|
-
background: ${
|
|
650
|
+
border-color: ${E("--color-primary")};
|
|
651
|
+
background: ${E("--color-primary")} radial-gradient(circle, #fff 0.35em, transparent 0.4em) right / 1em 1em no-repeat;
|
|
637
652
|
}
|
|
638
653
|
.form-check-input:disabled {
|
|
639
654
|
opacity: 0.5;
|
|
640
655
|
cursor: default;
|
|
641
656
|
}
|
|
642
657
|
.form-check-input:focus-visible {
|
|
643
|
-
outline: 2px solid ${
|
|
658
|
+
outline: 2px solid ${E("--color-primary")};
|
|
644
659
|
outline-offset: 2px;
|
|
645
660
|
}
|
|
646
661
|
.form-check-label {
|
|
@@ -669,33 +684,33 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
669
684
|
cursor: pointer;
|
|
670
685
|
}
|
|
671
686
|
.btn:focus-visible {
|
|
672
|
-
outline: 2px solid ${
|
|
687
|
+
outline: 2px solid ${E("--color-primary")};
|
|
673
688
|
outline-offset: 2px;
|
|
674
689
|
}
|
|
675
690
|
.btn-primary {
|
|
676
|
-
background: ${
|
|
677
|
-
border-color: ${
|
|
691
|
+
background: ${E("--color-primary")};
|
|
692
|
+
border-color: ${E("--color-primary")};
|
|
678
693
|
color: #fff;
|
|
679
694
|
}
|
|
680
695
|
.btn-primary:hover {
|
|
681
|
-
background: ${
|
|
682
|
-
border-color: ${
|
|
696
|
+
background: ${E("--color-primary-hover")};
|
|
697
|
+
border-color: ${E("--color-primary-hover")};
|
|
683
698
|
}
|
|
684
699
|
.btn-outline-secondary {
|
|
685
|
-
border-color: ${
|
|
686
|
-
color: ${
|
|
700
|
+
border-color: ${E("--color-text-muted")};
|
|
701
|
+
color: ${E("--color-text-muted")};
|
|
687
702
|
}
|
|
688
703
|
.btn-outline-secondary:hover {
|
|
689
|
-
background: ${
|
|
704
|
+
background: ${E("--color-text-muted")};
|
|
690
705
|
color: #fff;
|
|
691
706
|
}
|
|
692
707
|
.btn-link {
|
|
693
708
|
font-weight: 400;
|
|
694
|
-
color: ${
|
|
709
|
+
color: ${E("--color-primary")};
|
|
695
710
|
text-decoration: underline;
|
|
696
711
|
}
|
|
697
712
|
.btn-link:hover {
|
|
698
|
-
color: ${
|
|
713
|
+
color: ${E("--color-primary-hover")};
|
|
699
714
|
}
|
|
700
715
|
.wui-consent-banner-settings-toggle {
|
|
701
716
|
margin-inline-end: auto;
|
|
@@ -715,7 +730,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
715
730
|
max-width: none;
|
|
716
731
|
}
|
|
717
732
|
}
|
|
718
|
-
`,
|
|
733
|
+
`, ee = "wui-consent-save", te = "[data-consent-settings]", O = {
|
|
719
734
|
heading: "Cookies on this site",
|
|
720
735
|
description: "We use cookies to understand how the site is used and to measure our campaigns. You can change your choice at any time.",
|
|
721
736
|
policyLabel: "Cookie policy",
|
|
@@ -731,11 +746,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
731
746
|
rejectLabel: "Reject all",
|
|
732
747
|
acceptLabel: "Accept all",
|
|
733
748
|
saveLabel: "Save preferences"
|
|
734
|
-
},
|
|
749
|
+
}, ne = [
|
|
735
750
|
"analytics",
|
|
736
751
|
"functional",
|
|
737
752
|
"marketing"
|
|
738
|
-
],
|
|
753
|
+
], re = 0, ie = class extends e {
|
|
739
754
|
static get observedAttributes() {
|
|
740
755
|
return [
|
|
741
756
|
"heading",
|
|
@@ -748,12 +763,12 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
748
763
|
];
|
|
749
764
|
}
|
|
750
765
|
constructor() {
|
|
751
|
-
super(),
|
|
766
|
+
super(), re += 1, this._uid = `wui-consent-${re}`, this._preferences = {
|
|
752
767
|
analytics: !1,
|
|
753
768
|
functional: !1,
|
|
754
769
|
marketing: !1
|
|
755
770
|
}, this._settings = !1, this._onDocumentClick = (e) => {
|
|
756
|
-
e.target instanceof Element && e.target.closest(
|
|
771
|
+
e.target instanceof Element && e.target.closest(te) && (e.preventDefault(), this.open({
|
|
757
772
|
settings: !0,
|
|
758
773
|
focus: !0
|
|
759
774
|
}));
|
|
@@ -772,13 +787,13 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
772
787
|
this.toggleAttribute("standalone", e === !0 || e === "" || e === "true");
|
|
773
788
|
}
|
|
774
789
|
get heading() {
|
|
775
|
-
return this.getAttribute("heading") ||
|
|
790
|
+
return this.getAttribute("heading") || O.heading;
|
|
776
791
|
}
|
|
777
792
|
set heading(e) {
|
|
778
793
|
this.setAttribute("heading", String(e ?? ""));
|
|
779
794
|
}
|
|
780
795
|
get description() {
|
|
781
|
-
return this.getAttribute("description") ||
|
|
796
|
+
return this.getAttribute("description") || O.description;
|
|
782
797
|
}
|
|
783
798
|
set description(e) {
|
|
784
799
|
this.setAttribute("description", String(e ?? ""));
|
|
@@ -790,25 +805,25 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
790
805
|
this.setAttribute("policy-href", String(e ?? ""));
|
|
791
806
|
}
|
|
792
807
|
get policyLabel() {
|
|
793
|
-
return this.getAttribute("policy-label") ||
|
|
808
|
+
return this.getAttribute("policy-label") || O.policyLabel;
|
|
794
809
|
}
|
|
795
810
|
set policyLabel(e) {
|
|
796
811
|
this.setAttribute("policy-label", String(e ?? ""));
|
|
797
812
|
}
|
|
798
813
|
get analyticsDescription() {
|
|
799
|
-
return this.getAttribute("analytics-description") ||
|
|
814
|
+
return this.getAttribute("analytics-description") || O.analyticsDescription;
|
|
800
815
|
}
|
|
801
816
|
set analyticsDescription(e) {
|
|
802
817
|
this.setAttribute("analytics-description", String(e ?? ""));
|
|
803
818
|
}
|
|
804
819
|
get functionalDescription() {
|
|
805
|
-
return this.getAttribute("functional-description") ||
|
|
820
|
+
return this.getAttribute("functional-description") || O.functionalDescription;
|
|
806
821
|
}
|
|
807
822
|
set functionalDescription(e) {
|
|
808
823
|
this.setAttribute("functional-description", String(e ?? ""));
|
|
809
824
|
}
|
|
810
825
|
get marketingDescription() {
|
|
811
|
-
return this.getAttribute("marketing-description") ||
|
|
826
|
+
return this.getAttribute("marketing-description") || O.marketingDescription;
|
|
812
827
|
}
|
|
813
828
|
set marketingDescription(e) {
|
|
814
829
|
this.setAttribute("marketing-description", String(e ?? ""));
|
|
@@ -836,22 +851,22 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
836
851
|
this._rendered && this.render();
|
|
837
852
|
}
|
|
838
853
|
render() {
|
|
839
|
-
let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${
|
|
840
|
-
r.innerHTML = `${r === this ? "" : `<style>${
|
|
854
|
+
let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${ae(this.policyHref)}">${A(this.policyLabel)}</a>` : "", r = this._root();
|
|
855
|
+
r.innerHTML = `${r === this ? "" : `<style>${D}</style>`}
|
|
841
856
|
<div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden>
|
|
842
|
-
<h2 class="wui-consent-banner-heading" id="${t}-heading">${
|
|
843
|
-
<p class="wui-consent-banner-description" id="${t}-description">${
|
|
857
|
+
<h2 class="wui-consent-banner-heading" id="${t}-heading">${A(this.heading)}</h2>
|
|
858
|
+
<p class="wui-consent-banner-description" id="${t}-description">${A(this.description)}${n}</p>
|
|
844
859
|
<div class="wui-consent-banner-settings" hidden>
|
|
845
|
-
${
|
|
846
|
-
${
|
|
847
|
-
${
|
|
848
|
-
${
|
|
860
|
+
${k(t, "essential", O.essentialLabel, O.essentialDescription, !0)}
|
|
861
|
+
${k(t, "analytics", O.analyticsLabel, this.analyticsDescription, !1)}
|
|
862
|
+
${k(t, "functional", O.functionalLabel, this.functionalDescription, !1)}
|
|
863
|
+
${k(t, "marketing", O.marketingLabel, this.marketingDescription, !1)}
|
|
849
864
|
</div>
|
|
850
865
|
<div class="wui-consent-banner-actions">
|
|
851
|
-
<button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${
|
|
852
|
-
<button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${
|
|
853
|
-
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${
|
|
854
|
-
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${
|
|
866
|
+
<button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${O.settingsLabel}</button>
|
|
867
|
+
<button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${O.rejectLabel}</button>
|
|
868
|
+
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${O.acceptLabel}</button>
|
|
869
|
+
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${O.saveLabel}</button>
|
|
855
870
|
</div>
|
|
856
871
|
</div>`, this._rendered = !0, this._wire(), this._applyPreferences(), this._showSettings(this._settings), e && (this._panel().hidden = !1);
|
|
857
872
|
}
|
|
@@ -881,7 +896,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
881
896
|
})), e.querySelector(".wui-consent-banner-save")?.addEventListener("click", () => this._save(this._switchValues())), e.querySelector(".wui-consent-banner-settings-toggle")?.addEventListener("click", () => this._showSettings(!this._settings));
|
|
882
897
|
}
|
|
883
898
|
_save(e) {
|
|
884
|
-
this._preferences = { ...e }, this.dispatchEvent(new CustomEvent(
|
|
899
|
+
this._preferences = { ...e }, this.dispatchEvent(new CustomEvent(ee, {
|
|
885
900
|
bubbles: !0,
|
|
886
901
|
composed: !0,
|
|
887
902
|
detail: { ...e }
|
|
@@ -889,11 +904,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
889
904
|
}
|
|
890
905
|
_switchValues() {
|
|
891
906
|
let e = {};
|
|
892
|
-
for (let t of
|
|
907
|
+
for (let t of ne) e[t] = this._root().querySelector(`input[data-category="${t}"]`)?.checked === !0;
|
|
893
908
|
return e;
|
|
894
909
|
}
|
|
895
910
|
_applyPreferences() {
|
|
896
|
-
for (let e of
|
|
911
|
+
for (let e of ne) {
|
|
897
912
|
let t = this._root().querySelector(`input[data-category="${e}"]`);
|
|
898
913
|
t && (t.checked = this._preferences[e]);
|
|
899
914
|
}
|
|
@@ -911,1190 +926,17 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
911
926
|
}
|
|
912
927
|
}
|
|
913
928
|
};
|
|
914
|
-
function
|
|
929
|
+
function k(e, t, n, r, i) {
|
|
915
930
|
let a = `${e}-${t}`;
|
|
916
931
|
return `<div class="wui-consent-banner-category">
|
|
917
932
|
<div class="form-check form-switch">
|
|
918
933
|
<input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i ? " checked disabled" : ""} />
|
|
919
|
-
<label class="form-check-label" for="${a}">${
|
|
934
|
+
<label class="form-check-label" for="${a}">${A(n)}</label>
|
|
920
935
|
</div>
|
|
921
|
-
<p class="wui-consent-banner-category-description">${
|
|
936
|
+
<p class="wui-consent-banner-category-description">${A(r)}</p>
|
|
922
937
|
</div>`;
|
|
923
938
|
}
|
|
924
|
-
var
|
|
925
|
-
"January",
|
|
926
|
-
"February",
|
|
927
|
-
"March",
|
|
928
|
-
"April",
|
|
929
|
-
"May",
|
|
930
|
-
"June",
|
|
931
|
-
"July",
|
|
932
|
-
"August",
|
|
933
|
-
"September",
|
|
934
|
-
"October",
|
|
935
|
-
"November",
|
|
936
|
-
"December"
|
|
937
|
-
], A = [
|
|
938
|
-
"Su",
|
|
939
|
-
"Mo",
|
|
940
|
-
"Tu",
|
|
941
|
-
"We",
|
|
942
|
-
"Th",
|
|
943
|
-
"Fr",
|
|
944
|
-
"Sa"
|
|
945
|
-
], ae = (e) => String(e).padStart(2, "0"), j = (e, t, n) => `${e}-${ae(t + 1)}-${ae(n)}`, M = (e) => {
|
|
946
|
-
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
947
|
-
return t ? {
|
|
948
|
-
y: +t[1],
|
|
949
|
-
m: t[2] - 1,
|
|
950
|
-
d: +t[3]
|
|
951
|
-
} : null;
|
|
952
|
-
}, N = (e) => {
|
|
953
|
-
let t = M(e);
|
|
954
|
-
return t ? `${ae(t.d)} ${k[t.m].slice(0, 3)} ${t.y}` : "";
|
|
955
|
-
}, P = (e, t) => new Date(e, t + 1, 0).getDate(), F = (e, t) => {
|
|
956
|
-
for (; t < 0;) t += 12, --e;
|
|
957
|
-
for (; t > 11;) t -= 12, e += 1;
|
|
958
|
-
return {
|
|
959
|
-
y: e,
|
|
960
|
-
m: t
|
|
961
|
-
};
|
|
962
|
-
}, oe = class extends e {
|
|
963
|
-
static formAssociated = !0;
|
|
964
|
-
static get observedAttributes() {
|
|
965
|
-
return [
|
|
966
|
-
"value",
|
|
967
|
-
"min",
|
|
968
|
-
"max",
|
|
969
|
-
"placeholder",
|
|
970
|
-
"disabled",
|
|
971
|
-
"first-day",
|
|
972
|
-
"size",
|
|
973
|
-
"aria-label",
|
|
974
|
-
"aria-describedby",
|
|
975
|
-
"aria-invalid"
|
|
976
|
-
];
|
|
977
|
-
}
|
|
978
|
-
constructor() {
|
|
979
|
-
super();
|
|
980
|
-
try {
|
|
981
|
-
this._internals = this.attachInternals();
|
|
982
|
-
} catch {
|
|
983
|
-
this._internals = null;
|
|
984
|
-
}
|
|
985
|
-
this._value = "";
|
|
986
|
-
let e = new Date(2e3, 0, 1);
|
|
987
|
-
this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
|
|
988
|
-
}
|
|
989
|
-
connectedCallback() {
|
|
990
|
-
if (!this._rendered) {
|
|
991
|
-
this.render();
|
|
992
|
-
return;
|
|
993
|
-
}
|
|
994
|
-
this._bindGlobal?.();
|
|
995
|
-
}
|
|
996
|
-
attributeChangedCallback(e, t, n) {
|
|
997
|
-
if (e === "aria-invalid") {
|
|
998
|
-
this._syncInvalid();
|
|
999
|
-
return;
|
|
1000
|
-
}
|
|
1001
|
-
this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
|
|
1002
|
-
}
|
|
1003
|
-
_syncInvalid() {
|
|
1004
|
-
let e = this.querySelector(".datepicker-trigger");
|
|
1005
|
-
e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
1006
|
-
}
|
|
1007
|
-
formResetCallback() {
|
|
1008
|
-
this.value = this._defaultValue || "";
|
|
1009
|
-
}
|
|
1010
|
-
get value() {
|
|
1011
|
-
return this._value;
|
|
1012
|
-
}
|
|
1013
|
-
set value(e) {
|
|
1014
|
-
this._value = e || "", d(this, this._value), this._syncTrigger();
|
|
1015
|
-
}
|
|
1016
|
-
_firstDay() {
|
|
1017
|
-
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
1018
|
-
return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
|
|
1019
|
-
}
|
|
1020
|
-
render() {
|
|
1021
|
-
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
|
|
1022
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t = M(this._value);
|
|
1023
|
-
t && (this._viewY = t.y, this._viewM = t.m);
|
|
1024
|
-
let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
|
|
1025
|
-
this.innerHTML = `
|
|
1026
|
-
<div class="datepicker">
|
|
1027
|
-
<button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${g(i)}"` : ""}${a ? ` aria-describedby="${g(a)}"` : ""}>
|
|
1028
|
-
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? N(this._value) : g(e)}</span>
|
|
1029
|
-
${p("calendar-dots")}
|
|
1030
|
-
</button>
|
|
1031
|
-
<div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
|
|
1032
|
-
</div>`, this._rendered = !0, d(this, this._value), this._wire();
|
|
1033
|
-
}
|
|
1034
|
-
_syncFormValue() {
|
|
1035
|
-
d(this, this._value);
|
|
1036
|
-
}
|
|
1037
|
-
_syncTrigger() {
|
|
1038
|
-
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
1039
|
-
if (!t) return;
|
|
1040
|
-
let n = M(this._value);
|
|
1041
|
-
t.textContent = n ? N(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
|
|
1042
|
-
}
|
|
1043
|
-
_limits() {
|
|
1044
|
-
let e = M(this.getAttribute("min")), t = M(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
|
|
1045
|
-
return {
|
|
1046
|
-
dayDisabled: (e, t, i) => {
|
|
1047
|
-
let a = new Date(e, t, i).getTime();
|
|
1048
|
-
return a < n || a > r;
|
|
1049
|
-
},
|
|
1050
|
-
monthDisabled: (e, t) => {
|
|
1051
|
-
let i = new Date(e, t, 1).getTime();
|
|
1052
|
-
return new Date(e, t, P(e, t)).getTime() < n || i > r;
|
|
1053
|
-
},
|
|
1054
|
-
yearDisabled: (e) => {
|
|
1055
|
-
let t = new Date(e, 0, 1).getTime();
|
|
1056
|
-
return new Date(e, 11, 31).getTime() < n || t > r;
|
|
1057
|
-
}
|
|
1058
|
-
};
|
|
1059
|
-
}
|
|
1060
|
-
_renderView() {
|
|
1061
|
-
let e = this.querySelector(".datepicker-pop");
|
|
1062
|
-
e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
|
|
1063
|
-
}
|
|
1064
|
-
_daysHtml() {
|
|
1065
|
-
let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = P(this._viewY, this._viewM), r = M(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
|
|
1066
|
-
y: this._viewY,
|
|
1067
|
-
m: this._viewM,
|
|
1068
|
-
d: 1
|
|
1069
|
-
}, s = (e, t, n, s) => {
|
|
1070
|
-
let c = j(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
|
|
1071
|
-
return `<button type="button" class="${[
|
|
1072
|
-
"datepicker-day",
|
|
1073
|
-
s ? "is-outside" : "",
|
|
1074
|
-
u ? "is-today" : "",
|
|
1075
|
-
l ? "is-selected" : ""
|
|
1076
|
-
].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
|
|
1077
|
-
}, c = "", l = F(this._viewY, this._viewM - 1), u = P(l.y, l.m);
|
|
1078
|
-
for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
1079
|
-
for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
|
|
1080
|
-
let d = F(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
|
|
1081
|
-
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
1082
|
-
let m = A.map((t, n) => A[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
|
|
1083
|
-
return `
|
|
1084
|
-
<div class="datepicker-head">
|
|
1085
|
-
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${p("chevron-left")}</button>
|
|
1086
|
-
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${k[this._viewM]} ${this._viewY}</button>
|
|
1087
|
-
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${p("chevron-right")}</button>
|
|
1088
|
-
</div>
|
|
1089
|
-
<div class="datepicker-weekdays">${m}</div>
|
|
1090
|
-
<div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${c}</div>
|
|
1091
|
-
<div class="datepicker-foot">
|
|
1092
|
-
<button type="button" class="datepicker-link" data-today>Today</button>
|
|
1093
|
-
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
1094
|
-
</div>`;
|
|
1095
|
-
}
|
|
1096
|
-
_monthsHtml() {
|
|
1097
|
-
let e = M(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
|
|
1098
|
-
for (let i = 0; i < 12; i++) {
|
|
1099
|
-
let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
|
|
1100
|
-
"datepicker-cell",
|
|
1101
|
-
o ? "is-today" : "",
|
|
1102
|
-
a ? "is-selected" : ""
|
|
1103
|
-
].filter(Boolean).join(" ");
|
|
1104
|
-
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${k[i].slice(0, 3)}</button>`;
|
|
1105
|
-
}
|
|
1106
|
-
return `
|
|
1107
|
-
<div class="datepicker-head">
|
|
1108
|
-
<button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year">${p("chevron-left")}</button>
|
|
1109
|
-
<button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
|
|
1110
|
-
<button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year">${p("chevron-right")}</button>
|
|
1111
|
-
</div>
|
|
1112
|
-
<div class="datepicker-cells">${r}</div>`;
|
|
1113
|
-
}
|
|
1114
|
-
_yearsHtml() {
|
|
1115
|
-
let e = M(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
|
|
1116
|
-
for (let a = 0; a < 12; a++) {
|
|
1117
|
-
let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
|
|
1118
|
-
"datepicker-cell",
|
|
1119
|
-
c ? "is-today" : "",
|
|
1120
|
-
s ? "is-selected" : ""
|
|
1121
|
-
].filter(Boolean).join(" ");
|
|
1122
|
-
i += `<button type="button" class="${u}" data-year="${o}"${l ? " disabled" : ""}>${o}</button>`;
|
|
1123
|
-
}
|
|
1124
|
-
return `
|
|
1125
|
-
<div class="datepicker-head">
|
|
1126
|
-
<button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade">${p("chevron-left")}</button>
|
|
1127
|
-
<span class="datepicker-month">${r + 1} – ${r + 10}</span>
|
|
1128
|
-
<button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${p("chevron-right")}</button>
|
|
1129
|
-
</div>
|
|
1130
|
-
<div class="datepicker-cells">${i}</div>`;
|
|
1131
|
-
}
|
|
1132
|
-
_focusActive() {
|
|
1133
|
-
let e = this.querySelector(".datepicker-pop"), t = e?.querySelector("[tabindex=\"0\"]") || e?.querySelector(".is-selected") || e?.querySelector(".datepicker-day:not(:disabled), .datepicker-cell:not(:disabled)");
|
|
1134
|
-
t && e.contains(document.activeElement) && t.focus();
|
|
1135
|
-
}
|
|
1136
|
-
_position(e, t) {
|
|
1137
|
-
s(e, t, { clampHeight: !0 });
|
|
1138
|
-
}
|
|
1139
|
-
_setFocus(e, t, n, r) {
|
|
1140
|
-
let { y: i, m: a } = F(e, t);
|
|
1141
|
-
this._focus = {
|
|
1142
|
-
y: i,
|
|
1143
|
-
m: a,
|
|
1144
|
-
d: n
|
|
1145
|
-
};
|
|
1146
|
-
let o = i !== this._viewY || a !== this._viewM;
|
|
1147
|
-
this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${j(i, a, n)}"]`)?.focus();
|
|
1148
|
-
}
|
|
1149
|
-
_onKey(e) {
|
|
1150
|
-
if (this._mode !== "days") {
|
|
1151
|
-
e.key === "Escape" && this._close();
|
|
1152
|
-
return;
|
|
1153
|
-
}
|
|
1154
|
-
let t = this._focus || M(this._value) || {
|
|
1155
|
-
y: this._viewY,
|
|
1156
|
-
m: this._viewM,
|
|
1157
|
-
d: 1
|
|
1158
|
-
}, n = (n, r) => {
|
|
1159
|
-
e.preventDefault();
|
|
1160
|
-
let i = new Date(t.y, t.m, t.d + n);
|
|
1161
|
-
this._setFocus(i.getFullYear(), i.getMonth(), i.getDate(), r);
|
|
1162
|
-
};
|
|
1163
|
-
switch (e.key) {
|
|
1164
|
-
case "ArrowLeft": return n(-1, "slide-prev");
|
|
1165
|
-
case "ArrowRight": return n(1, "slide-next");
|
|
1166
|
-
case "ArrowUp": return n(-7, "slide-prev");
|
|
1167
|
-
case "ArrowDown": return n(7, "slide-next");
|
|
1168
|
-
case "Home": return n(-((new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7), "slide-prev");
|
|
1169
|
-
case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
|
|
1170
|
-
case "PageUp": {
|
|
1171
|
-
e.preventDefault();
|
|
1172
|
-
let n = F(t.y, t.m - (e.shiftKey ? 12 : 1));
|
|
1173
|
-
return this._setFocus(n.y, n.m, Math.min(t.d, P(n.y, n.m)), "slide-prev");
|
|
1174
|
-
}
|
|
1175
|
-
case "PageDown": {
|
|
1176
|
-
e.preventDefault();
|
|
1177
|
-
let n = F(t.y, t.m + (e.shiftKey ? 12 : 1));
|
|
1178
|
-
return this._setFocus(n.y, n.m, Math.min(t.d, P(n.y, n.m)), "slide-next");
|
|
1179
|
-
}
|
|
1180
|
-
case "Enter":
|
|
1181
|
-
case " ":
|
|
1182
|
-
e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = j(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
|
|
1183
|
-
return;
|
|
1184
|
-
case "Escape": return this._close();
|
|
1185
|
-
default:
|
|
1186
|
-
}
|
|
1187
|
-
}
|
|
1188
|
-
_wire() {
|
|
1189
|
-
this._teardown();
|
|
1190
|
-
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop"), n = this.querySelector(".datepicker");
|
|
1191
|
-
if (!e || !t) return;
|
|
1192
|
-
let r = () => !t.hidden;
|
|
1193
|
-
this._open = () => {
|
|
1194
|
-
let r = /* @__PURE__ */ new Date(), i = M(this._value);
|
|
1195
|
-
(i || !this._viewNavigated) && (this._viewY = r.getFullYear(), this._viewM = r.getMonth()), this._mode = "days";
|
|
1196
|
-
let a = r.getFullYear() === this._viewY && r.getMonth() === this._viewM, o = i && i.y === this._viewY && i.m === this._viewM;
|
|
1197
|
-
this._focus = o ? i : {
|
|
1198
|
-
y: this._viewY,
|
|
1199
|
-
m: this._viewM,
|
|
1200
|
-
d: a ? r.getDate() : 1
|
|
1201
|
-
}, this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true"), t.querySelector("[tabindex=\"0\"]")?.focus();
|
|
1202
|
-
}, this._close = () => {
|
|
1203
|
-
t.hidden = !0, n?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), e.focus();
|
|
1204
|
-
}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
|
|
1205
|
-
this._popClick = !0;
|
|
1206
|
-
let t = e.target.closest("[data-nav]");
|
|
1207
|
-
if (t) {
|
|
1208
|
-
this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
|
|
1209
|
-
let e = F(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
1210
|
-
this._viewY = e.y, this._viewM = e.m, this._focus = {
|
|
1211
|
-
y: e.y,
|
|
1212
|
-
m: e.m,
|
|
1213
|
-
d: 1
|
|
1214
|
-
}, this._renderView(), this._slide = "";
|
|
1215
|
-
return;
|
|
1216
|
-
}
|
|
1217
|
-
let n = e.target.closest("[data-nav-year]");
|
|
1218
|
-
if (n) {
|
|
1219
|
-
this._viewY += Number(n.dataset.navYear), this._renderView();
|
|
1220
|
-
return;
|
|
1221
|
-
}
|
|
1222
|
-
let r = e.target.closest("[data-nav-decade]");
|
|
1223
|
-
if (r) {
|
|
1224
|
-
this._viewY += Number(r.dataset.navDecade) * 10, this._renderView();
|
|
1225
|
-
return;
|
|
1226
|
-
}
|
|
1227
|
-
let i = e.target.closest("[data-view]");
|
|
1228
|
-
if (i) {
|
|
1229
|
-
this._mode = i.dataset.view, this._renderView();
|
|
1230
|
-
return;
|
|
1231
|
-
}
|
|
1232
|
-
let a = e.target.closest("[data-month]");
|
|
1233
|
-
if (a && !a.disabled) {
|
|
1234
|
-
this._viewNavigated = !0, this._viewM = Number(a.dataset.month), this._mode = "days", this._focus = {
|
|
1235
|
-
y: this._viewY,
|
|
1236
|
-
m: this._viewM,
|
|
1237
|
-
d: 1
|
|
1238
|
-
}, this._renderView();
|
|
1239
|
-
return;
|
|
1240
|
-
}
|
|
1241
|
-
let o = e.target.closest("[data-year]");
|
|
1242
|
-
if (o && !o.disabled) {
|
|
1243
|
-
this._viewNavigated = !0, this._viewY = Number(o.dataset.year), this._mode = "months", this._renderView();
|
|
1244
|
-
return;
|
|
1245
|
-
}
|
|
1246
|
-
if (e.target.closest("[data-today]")) {
|
|
1247
|
-
let e = /* @__PURE__ */ new Date();
|
|
1248
|
-
this.value = j(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
1249
|
-
return;
|
|
1250
|
-
}
|
|
1251
|
-
if (e.target.closest("[data-clear]")) {
|
|
1252
|
-
this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
1253
|
-
return;
|
|
1254
|
-
}
|
|
1255
|
-
let s = e.target.closest(".datepicker-day[data-iso]");
|
|
1256
|
-
s && !s.disabled && (this.value = s.dataset.iso, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
|
|
1257
|
-
}), this._onKeyBound = (e) => {
|
|
1258
|
-
r() && this._onKey(e);
|
|
1259
|
-
}, t.addEventListener("keydown", this._onKeyBound), this._bindGlobal = () => {
|
|
1260
|
-
this._teardown(), this._onDocClick = (e) => {
|
|
1261
|
-
let t = this._popClick;
|
|
1262
|
-
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
1263
|
-
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
1264
|
-
r() && e.key === "Escape" && this._close();
|
|
1265
|
-
}, document.addEventListener("keydown", this._onDocKey), c(this, () => {
|
|
1266
|
-
r() && this._position(e, t);
|
|
1267
|
-
});
|
|
1268
|
-
}, this._bindGlobal(), this._syncFormValue();
|
|
1269
|
-
}
|
|
1270
|
-
_teardown() {
|
|
1271
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), l(this);
|
|
1272
|
-
}
|
|
1273
|
-
disconnectedCallback() {
|
|
1274
|
-
this._teardown();
|
|
1275
|
-
}
|
|
1276
|
-
}, se = class extends e {
|
|
1277
|
-
static formAssociated = !0;
|
|
1278
|
-
static get observedAttributes() {
|
|
1279
|
-
return [
|
|
1280
|
-
"start",
|
|
1281
|
-
"end",
|
|
1282
|
-
"min",
|
|
1283
|
-
"max",
|
|
1284
|
-
"placeholder",
|
|
1285
|
-
"disabled",
|
|
1286
|
-
"first-day",
|
|
1287
|
-
"size",
|
|
1288
|
-
"aria-label",
|
|
1289
|
-
"aria-describedby",
|
|
1290
|
-
"name",
|
|
1291
|
-
"start-name",
|
|
1292
|
-
"end-name",
|
|
1293
|
-
"aria-invalid"
|
|
1294
|
-
];
|
|
1295
|
-
}
|
|
1296
|
-
constructor() {
|
|
1297
|
-
super();
|
|
1298
|
-
try {
|
|
1299
|
-
this._internals = this.attachInternals();
|
|
1300
|
-
} catch {
|
|
1301
|
-
this._internals = null;
|
|
1302
|
-
}
|
|
1303
|
-
this._start = "", this._end = "", this._hover = "";
|
|
1304
|
-
let e = new Date(2e3, 0, 1);
|
|
1305
|
-
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
1306
|
-
}
|
|
1307
|
-
connectedCallback() {
|
|
1308
|
-
if (!this._rendered) {
|
|
1309
|
-
this.render();
|
|
1310
|
-
return;
|
|
1311
|
-
}
|
|
1312
|
-
this._bindGlobal?.();
|
|
1313
|
-
}
|
|
1314
|
-
attributeChangedCallback(e, t, n) {
|
|
1315
|
-
if (e === "aria-invalid") {
|
|
1316
|
-
this._syncInvalid();
|
|
1317
|
-
return;
|
|
1318
|
-
}
|
|
1319
|
-
this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
|
|
1320
|
-
}
|
|
1321
|
-
_syncInvalid() {
|
|
1322
|
-
let e = this.querySelector(".daterange-trigger");
|
|
1323
|
-
e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
1324
|
-
}
|
|
1325
|
-
get value() {
|
|
1326
|
-
return {
|
|
1327
|
-
start: this._start,
|
|
1328
|
-
end: this._end
|
|
1329
|
-
};
|
|
1330
|
-
}
|
|
1331
|
-
set value(e) {
|
|
1332
|
-
this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors();
|
|
1333
|
-
}
|
|
1334
|
-
_firstDay() {
|
|
1335
|
-
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
1336
|
-
return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
|
|
1337
|
-
}
|
|
1338
|
-
_label() {
|
|
1339
|
-
let e = this.getAttribute("placeholder") || "Start – End";
|
|
1340
|
-
return !this._start && !this._end ? {
|
|
1341
|
-
text: e,
|
|
1342
|
-
empty: !0
|
|
1343
|
-
} : {
|
|
1344
|
-
text: `${N(this._start) || "Start"} – ${N(this._end) || "End"}`,
|
|
1345
|
-
empty: !1
|
|
1346
|
-
};
|
|
1347
|
-
}
|
|
1348
|
-
render() {
|
|
1349
|
-
this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || "", this._start = this._defaultStart || this._start, this._end = this._defaultEnd || this._end);
|
|
1350
|
-
let e = M(this._start);
|
|
1351
|
-
e && (this._viewY = e.y, this._viewM = e.m);
|
|
1352
|
-
let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label(), a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
|
|
1353
|
-
this.innerHTML = `
|
|
1354
|
-
<div class="daterange">
|
|
1355
|
-
<button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
|
|
1356
|
-
<span data-range-label class="${i ? "search-select-placeholder" : ""}">${g(r)}</span>
|
|
1357
|
-
${p("calendar")}
|
|
1358
|
-
</button>
|
|
1359
|
-
<div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
|
|
1360
|
-
</div>`, this._rendered = !0, this._syncMirrors(), this._wire();
|
|
1361
|
-
}
|
|
1362
|
-
formResetCallback() {
|
|
1363
|
-
this.value = {
|
|
1364
|
-
start: this._defaultStart || "",
|
|
1365
|
-
end: this._defaultEnd || ""
|
|
1366
|
-
};
|
|
1367
|
-
}
|
|
1368
|
-
_syncTrigger() {
|
|
1369
|
-
let e = this.querySelector(".daterange-trigger"), t = this.querySelector("[data-range-label]");
|
|
1370
|
-
if (!t) return;
|
|
1371
|
-
let { text: n, empty: r } = this._label();
|
|
1372
|
-
t.textContent = n, t.classList.toggle("search-select-placeholder", r), e?.classList.toggle("has-value", !r);
|
|
1373
|
-
}
|
|
1374
|
-
_syncMirrors() {
|
|
1375
|
-
let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
|
|
1376
|
-
this._mirror("start", e, this._start), this._mirror("end", t, this._end);
|
|
1377
|
-
}
|
|
1378
|
-
_mirror(e, t, n) {
|
|
1379
|
-
if (!t) return;
|
|
1380
|
-
let r = this.querySelector(`input[type="hidden"][data-range-mirror="${e}"]`);
|
|
1381
|
-
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "", r.disabled = this.hasAttribute("disabled");
|
|
1382
|
-
}
|
|
1383
|
-
_limits() {
|
|
1384
|
-
let e = M(this.getAttribute("min")), t = M(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
|
|
1385
|
-
return (e, t, i) => {
|
|
1386
|
-
let a = new Date(e, t, i).getTime();
|
|
1387
|
-
return a < n || a > r;
|
|
1388
|
-
};
|
|
1389
|
-
}
|
|
1390
|
-
_monthHtml(e, t) {
|
|
1391
|
-
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = P(e, t), a = this._limits(), o = A.map((e, t) => A[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
|
|
1392
|
-
let i = j(e, t, n), o = a(e, t, n);
|
|
1393
|
-
return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
|
|
1394
|
-
}, c = "", l = F(e, t - 1), u = P(l.y, l.m);
|
|
1395
|
-
for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
1396
|
-
for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
|
|
1397
|
-
let d = F(e, t + 1), f = (7 - (r + i) % 7) % 7;
|
|
1398
|
-
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
1399
|
-
return `
|
|
1400
|
-
<div class="daterange-cal">
|
|
1401
|
-
<div class="datepicker-month-label">${k[t]} ${e}</div>
|
|
1402
|
-
<div class="datepicker-weekdays">${o}</div>
|
|
1403
|
-
<div class="datepicker-grid" role="grid">${c}</div>
|
|
1404
|
-
</div>`;
|
|
1405
|
-
}
|
|
1406
|
-
_renderView() {
|
|
1407
|
-
let e = this.querySelector(".daterange-pop");
|
|
1408
|
-
if (!e) return;
|
|
1409
|
-
let t = F(this._viewY, this._viewM + 1);
|
|
1410
|
-
e.innerHTML = `
|
|
1411
|
-
<div class="daterange-head">
|
|
1412
|
-
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${p("chevron-left")}</button>
|
|
1413
|
-
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${p("chevron-right")}</button>
|
|
1414
|
-
</div>
|
|
1415
|
-
<div class="daterange-cals">
|
|
1416
|
-
${this._monthHtml(this._viewY, this._viewM)}
|
|
1417
|
-
${this._monthHtml(t.y, t.m)}
|
|
1418
|
-
</div>
|
|
1419
|
-
<div class="datepicker-foot">
|
|
1420
|
-
<span class="daterange-hint" data-range-hint></span>
|
|
1421
|
-
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
1422
|
-
</div>`, this._paint();
|
|
1423
|
-
}
|
|
1424
|
-
_paint() {
|
|
1425
|
-
let e = this.querySelector(".daterange-pop");
|
|
1426
|
-
if (!e) return;
|
|
1427
|
-
let t = this._start ? new Date(this._start).getTime() : null, n = this._end;
|
|
1428
|
-
t && !this._end && this._hover && new Date(this._hover).getTime() >= t && (n = this._hover);
|
|
1429
|
-
let r = n ? new Date(n).getTime() : null;
|
|
1430
|
-
for (let n of e.querySelectorAll(".datepicker-day[data-iso]")) {
|
|
1431
|
-
let e = new Date(n.dataset.iso).getTime(), i = t != null && e === t, a = r != null && e === r, o = t != null && r != null && e > t && e < r;
|
|
1432
|
-
n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
|
|
1433
|
-
}
|
|
1434
|
-
let i = e.querySelector("[data-range-hint]");
|
|
1435
|
-
i && (i.textContent = this._start ? this._end ? `${N(this._start)} – ${N(this._end)}` : "Pick an end date" : "Pick a start date");
|
|
1436
|
-
}
|
|
1437
|
-
_position(e, t) {
|
|
1438
|
-
s(e, t, { clampHeight: !0 });
|
|
1439
|
-
}
|
|
1440
|
-
_pick(e) {
|
|
1441
|
-
if (!this._start || this._start && this._end) {
|
|
1442
|
-
this._start = e, this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._paint();
|
|
1443
|
-
return;
|
|
1444
|
-
}
|
|
1445
|
-
if (new Date(e).getTime() < new Date(this._start).getTime()) {
|
|
1446
|
-
this._start = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1447
|
-
return;
|
|
1448
|
-
}
|
|
1449
|
-
this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
1450
|
-
}
|
|
1451
|
-
_wire() {
|
|
1452
|
-
this._teardown();
|
|
1453
|
-
let e = this.querySelector(".daterange-trigger"), t = this.querySelector(".daterange-pop"), n = this.querySelector(".daterange");
|
|
1454
|
-
if (!e || !t) return;
|
|
1455
|
-
let r = () => !t.hidden;
|
|
1456
|
-
this._open = () => {
|
|
1457
|
-
let r = M(this._start);
|
|
1458
|
-
if (r) this._viewY = r.y, this._viewM = r.m;
|
|
1459
|
-
else {
|
|
1460
|
-
let e = /* @__PURE__ */ new Date();
|
|
1461
|
-
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
1462
|
-
}
|
|
1463
|
-
this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true");
|
|
1464
|
-
}, this._close = () => {
|
|
1465
|
-
t.hidden = !0, this._hover = "", n?.classList.remove("open"), e.setAttribute("aria-expanded", "false");
|
|
1466
|
-
}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
|
|
1467
|
-
this._popClick = !0;
|
|
1468
|
-
let t = e.target.closest("[data-nav]");
|
|
1469
|
-
if (t) {
|
|
1470
|
-
let e = F(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
1471
|
-
this._viewY = e.y, this._viewM = e.m, this._renderView();
|
|
1472
|
-
return;
|
|
1473
|
-
}
|
|
1474
|
-
if (e.target.closest("[data-clear]")) {
|
|
1475
|
-
this._start = "", this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._renderView(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1476
|
-
return;
|
|
1477
|
-
}
|
|
1478
|
-
let n = e.target.closest(".datepicker-day[data-iso]");
|
|
1479
|
-
n && !n.disabled && this._pick(n.dataset.iso);
|
|
1480
|
-
}), t.addEventListener("mouseover", (e) => {
|
|
1481
|
-
let t = e.target.closest(".datepicker-day[data-iso]");
|
|
1482
|
-
t && this._start && !this._end && (this._hover = t.dataset.iso, this._paint());
|
|
1483
|
-
}), this._bindGlobal = () => {
|
|
1484
|
-
this._teardown(), this._onDocClick = (e) => {
|
|
1485
|
-
let t = this._popClick;
|
|
1486
|
-
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
1487
|
-
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
1488
|
-
r() && e.key === "Escape" && this._close();
|
|
1489
|
-
}, document.addEventListener("keydown", this._onDocKey), c(this, () => {
|
|
1490
|
-
r() && this._position(e, t);
|
|
1491
|
-
});
|
|
1492
|
-
}, this._bindGlobal(), this._syncMirrors();
|
|
1493
|
-
}
|
|
1494
|
-
_teardown() {
|
|
1495
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), l(this);
|
|
1496
|
-
}
|
|
1497
|
-
disconnectedCallback() {
|
|
1498
|
-
this._teardown();
|
|
1499
|
-
}
|
|
1500
|
-
}, ce = class extends e {
|
|
1501
|
-
static get observedAttributes() {
|
|
1502
|
-
return [
|
|
1503
|
-
"static",
|
|
1504
|
-
"max-scale",
|
|
1505
|
-
"radius"
|
|
1506
|
-
];
|
|
1507
|
-
}
|
|
1508
|
-
constructor() {
|
|
1509
|
-
super(), this._pointerMoveListener = null, this._pointerLeaveListener = null, this._frame = 0, this._pointerX = 0;
|
|
1510
|
-
}
|
|
1511
|
-
connectedCallback() {
|
|
1512
|
-
this._wire();
|
|
1513
|
-
}
|
|
1514
|
-
disconnectedCallback() {
|
|
1515
|
-
this._teardown();
|
|
1516
|
-
}
|
|
1517
|
-
attributeChangedCallback(e, t, n) {
|
|
1518
|
-
e === "static" && this.isConnected && this._wire();
|
|
1519
|
-
}
|
|
1520
|
-
_maxScale() {
|
|
1521
|
-
return le(this.getAttribute("max-scale"), 1.6);
|
|
1522
|
-
}
|
|
1523
|
-
_radius() {
|
|
1524
|
-
return le(this.getAttribute("radius"), 100);
|
|
1525
|
-
}
|
|
1526
|
-
_magnifyEnabled() {
|
|
1527
|
-
return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
|
|
1528
|
-
}
|
|
1529
|
-
_applyMagnification() {
|
|
1530
|
-
this._frame = 0;
|
|
1531
|
-
let e = this._maxScale(), t = this._radius();
|
|
1532
|
-
for (let n of this.querySelectorAll(".dock-item")) {
|
|
1533
|
-
let r = n.getBoundingClientRect(), i = Math.abs(this._pointerX - (r.left + r.width / 2)), a = Math.max(0, 1 - i / t), o = 1 + (e - 1) * a;
|
|
1534
|
-
n.style.setProperty("--wui-dock-mag", o.toFixed(3));
|
|
1535
|
-
}
|
|
1536
|
-
}
|
|
1537
|
-
_resetMagnification() {
|
|
1538
|
-
this._frame &&= (cancelAnimationFrame(this._frame), 0);
|
|
1539
|
-
for (let e of this.querySelectorAll(".dock-item")) e.style.removeProperty("--wui-dock-mag");
|
|
1540
|
-
}
|
|
1541
|
-
_wire() {
|
|
1542
|
-
this._teardown(), this._magnifyEnabled() && (this._pointerMoveListener = (e) => {
|
|
1543
|
-
this._pointerX = e.clientX, this._frame ||= requestAnimationFrame(() => this._applyMagnification());
|
|
1544
|
-
}, this._pointerLeaveListener = () => this._resetMagnification(), this.addEventListener("pointermove", this._pointerMoveListener), this.addEventListener("pointerleave", this._pointerLeaveListener));
|
|
1545
|
-
}
|
|
1546
|
-
_teardown() {
|
|
1547
|
-
this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
|
|
1548
|
-
}
|
|
1549
|
-
}, le = (e, t) => {
|
|
1550
|
-
let n = Number.parseFloat(e);
|
|
1551
|
-
return Number.isFinite(n) ? n : t;
|
|
1552
|
-
}, ue = {
|
|
1553
|
-
enter: "Enter",
|
|
1554
|
-
comma: ",",
|
|
1555
|
-
space: " ",
|
|
1556
|
-
tab: "Tab"
|
|
1557
|
-
}, de = {
|
|
1558
|
-
enter: "\n",
|
|
1559
|
-
comma: ",",
|
|
1560
|
-
space: " ",
|
|
1561
|
-
tab: " "
|
|
1562
|
-
}, fe = (e) => ue[e], pe = (e) => de[e];
|
|
1563
|
-
function me(e, t) {
|
|
1564
|
-
let n = [String(e ?? "")];
|
|
1565
|
-
for (let e of t) n = n.flatMap((t) => t.split(e));
|
|
1566
|
-
return n.map((e) => e.trim()).filter(Boolean);
|
|
1567
|
-
}
|
|
1568
|
-
var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), he = class extends e {
|
|
1569
|
-
static formAssociated = !0;
|
|
1570
|
-
_accessibleName() {
|
|
1571
|
-
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
1572
|
-
}
|
|
1573
|
-
static get observedAttributes() {
|
|
1574
|
-
return [
|
|
1575
|
-
"placeholder",
|
|
1576
|
-
"search-placeholder",
|
|
1577
|
-
"searchable",
|
|
1578
|
-
"disabled",
|
|
1579
|
-
"icon",
|
|
1580
|
-
"size",
|
|
1581
|
-
"collapse-chips",
|
|
1582
|
-
"aria-label",
|
|
1583
|
-
"aria-invalid",
|
|
1584
|
-
"allow-custom",
|
|
1585
|
-
"custom-pattern",
|
|
1586
|
-
"custom-invalid-message"
|
|
1587
|
-
];
|
|
1588
|
-
}
|
|
1589
|
-
constructor() {
|
|
1590
|
-
super(), this._values = [], this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null, this._customError = "";
|
|
1591
|
-
try {
|
|
1592
|
-
this._internals = this.attachInternals();
|
|
1593
|
-
} catch {
|
|
1594
|
-
this._internals = null;
|
|
1595
|
-
}
|
|
1596
|
-
}
|
|
1597
|
-
connectedCallback() {
|
|
1598
|
-
if (!this._rendered) {
|
|
1599
|
-
if (!this._valuesInit && !this._optionsProp && !this._values.length) {
|
|
1600
|
-
let e = this.getAttribute("value");
|
|
1601
|
-
if (e != null && e !== "") this._values = e.split(",").map((e) => e.trim()).filter(Boolean);
|
|
1602
|
-
else {
|
|
1603
|
-
let e = [...this.querySelectorAll(":scope > wui-option[selected]")].map((e) => e.getAttribute("value") ?? e.textContent.trim());
|
|
1604
|
-
e.length && (this._values = e.map(String));
|
|
1605
|
-
}
|
|
1606
|
-
}
|
|
1607
|
-
this._valuesInit = !0, this._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
|
|
1608
|
-
return;
|
|
1609
|
-
}
|
|
1610
|
-
this._bindGlobal?.();
|
|
1611
|
-
}
|
|
1612
|
-
formResetCallback() {
|
|
1613
|
-
this.values = (this._defaultValues || []).slice();
|
|
1614
|
-
let e = this.querySelector("[data-input]");
|
|
1615
|
-
e && (e.value = ""), this._setCustomError("");
|
|
1616
|
-
}
|
|
1617
|
-
attributeChangedCallback(e) {
|
|
1618
|
-
if (e === "aria-invalid") {
|
|
1619
|
-
this._syncInvalid();
|
|
1620
|
-
return;
|
|
1621
|
-
}
|
|
1622
|
-
e === "custom-pattern" || e === "custom-invalid-message" || this._rendered && this.render();
|
|
1623
|
-
}
|
|
1624
|
-
_syncInvalid() {
|
|
1625
|
-
let e = this.querySelector(".search-select-control");
|
|
1626
|
-
e && (this.hasAttribute("aria-invalid") || this._customError ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
1627
|
-
}
|
|
1628
|
-
get values() {
|
|
1629
|
-
return this._values.slice();
|
|
1630
|
-
}
|
|
1631
|
-
set values(e) {
|
|
1632
|
-
this._values = Array.isArray(e) ? e.map(String) : [], d(this, this._values.join(",")), this._rendered && (this._renderControl(), this._renderOptions(this._query()));
|
|
1633
|
-
}
|
|
1634
|
-
set options(e) {
|
|
1635
|
-
if (this._optionsProp = Array.isArray(e) ? e : null, this._rendered && this._allowCustom) {
|
|
1636
|
-
this._renderControl(), this._renderOptions(this._query());
|
|
1637
|
-
return;
|
|
1638
|
-
}
|
|
1639
|
-
this.isConnected && this.render();
|
|
1640
|
-
}
|
|
1641
|
-
get options() {
|
|
1642
|
-
return this._readOptions();
|
|
1643
|
-
}
|
|
1644
|
-
get validateCustom() {
|
|
1645
|
-
return this._validateCustom ?? null;
|
|
1646
|
-
}
|
|
1647
|
-
set validateCustom(e) {
|
|
1648
|
-
this._validateCustom = typeof e == "function" ? e : null;
|
|
1649
|
-
}
|
|
1650
|
-
get _allowCustom() {
|
|
1651
|
-
return this.hasAttribute("allow-custom");
|
|
1652
|
-
}
|
|
1653
|
-
_query() {
|
|
1654
|
-
let e = this.querySelector(this._allowCustom ? "[data-input]" : ".search-select-input");
|
|
1655
|
-
return e ? e.value : "";
|
|
1656
|
-
}
|
|
1657
|
-
_snapshotDeclared() {
|
|
1658
|
-
if (this._declared) return;
|
|
1659
|
-
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
1660
|
-
e.length && (this._declared = e.map((e) => {
|
|
1661
|
-
let t = {
|
|
1662
|
-
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1663
|
-
label: e.innerHTML,
|
|
1664
|
-
icon: e.getAttribute("icon") || void 0,
|
|
1665
|
-
[h]: !0,
|
|
1666
|
-
selected: e.hasAttribute("selected")
|
|
1667
|
-
};
|
|
1668
|
-
for (let [n, r] of ge) {
|
|
1669
|
-
let i = e.getAttribute(n);
|
|
1670
|
-
i && (t[r] = i);
|
|
1671
|
-
}
|
|
1672
|
-
return e.hasAttribute("disabled") && (t.disabled = !0), t;
|
|
1673
|
-
}));
|
|
1674
|
-
}
|
|
1675
|
-
_readOptions() {
|
|
1676
|
-
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
1677
|
-
}
|
|
1678
|
-
_labelFor(e) {
|
|
1679
|
-
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
1680
|
-
return t ? t.label : e;
|
|
1681
|
-
}
|
|
1682
|
-
_labelHtmlFor(e) {
|
|
1683
|
-
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
1684
|
-
return t ? v(t) : g(e);
|
|
1685
|
-
}
|
|
1686
|
-
render() {
|
|
1687
|
-
this._snapshotDeclared();
|
|
1688
|
-
let e = this._allowCustom, t = this.hasAttribute("searchable") && !e, n = this.getAttribute("search-placeholder") || "Search…", r = this.getAttribute("icon"), i = this.getAttribute("size"), a = i === "sm" ? " search-select-sm" : i === "lg" ? " search-select-lg" : "";
|
|
1689
|
-
d(this, this._values.join(",")), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
|
|
1690
|
-
let o = `${this.id}-listbox`;
|
|
1691
|
-
this._listboxId = o;
|
|
1692
|
-
let s = this.hasAttribute("disabled");
|
|
1693
|
-
if (e) {
|
|
1694
|
-
let e = `${this.id}-custom-error`;
|
|
1695
|
-
this.innerHTML = `
|
|
1696
|
-
<div class="search-select${a}">
|
|
1697
|
-
<div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : ""}>
|
|
1698
|
-
${r ? p(r, { className: "search-select-icon" }) : ""}
|
|
1699
|
-
<div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}" aria-describedby="${z(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
|
|
1700
|
-
${p("chevron-down", { className: "search-select-caret" })}
|
|
1701
|
-
</div>
|
|
1702
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
1703
|
-
<div class="search-select-options"></div>
|
|
1704
|
-
</div>
|
|
1705
|
-
</div>
|
|
1706
|
-
<div class="field-error wui-ms-custom-error" id="${z(e)}" aria-live="polite" hidden></div>`;
|
|
1707
|
-
} else this.innerHTML = `
|
|
1708
|
-
<div class="search-select${a}">
|
|
1709
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
|
|
1710
|
-
${r ? p(r, { className: "search-select-icon" }) : ""}
|
|
1711
|
-
<div class="ms-chips" data-chips></div>
|
|
1712
|
-
${p("chevron-down", { className: "search-select-caret" })}
|
|
1713
|
-
</div>
|
|
1714
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
1715
|
-
${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${z(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
|
|
1716
|
-
<div class="search-select-options"></div>
|
|
1717
|
-
<div class="search-select-empty" hidden>No matches</div>
|
|
1718
|
-
</div>
|
|
1719
|
-
</div>`;
|
|
1720
|
-
this._rendered = !0, this._customError = "", d(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
1721
|
-
}
|
|
1722
|
-
_renderControl() {
|
|
1723
|
-
let e = this.querySelector("[data-chips]");
|
|
1724
|
-
if (!e) return;
|
|
1725
|
-
let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${z(e)}" aria-label="Remove ${z(B(this._labelFor(e)))}">${p("x")}</button></span>`).join("");
|
|
1726
|
-
if (n) {
|
|
1727
|
-
for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
|
|
1728
|
-
n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
|
|
1729
|
-
return;
|
|
1730
|
-
}
|
|
1731
|
-
if (!this._values.length) {
|
|
1732
|
-
e.innerHTML = `<span class="search-select-placeholder">${g(t)}</span>`;
|
|
1733
|
-
return;
|
|
1734
|
-
}
|
|
1735
|
-
e.innerHTML = r, this._collapseChips();
|
|
1736
|
-
}
|
|
1737
|
-
_collapseChips() {
|
|
1738
|
-
let e = this.querySelector("[data-chips]");
|
|
1739
|
-
if (!e || !this.hasAttribute("collapse-chips") || !this._values.length) return;
|
|
1740
|
-
e.querySelector(".chip-more")?.remove();
|
|
1741
|
-
let t = [...e.querySelectorAll(":scope > .chip:not(.chip-more)")];
|
|
1742
|
-
for (let e of t) e.style.display = "";
|
|
1743
|
-
if (!t.length) return;
|
|
1744
|
-
let n = e.clientWidth, r = (e) => e.offsetLeft + e.offsetWidth;
|
|
1745
|
-
if (r(t[t.length - 1]) <= n) return;
|
|
1746
|
-
let i = document.createElement("span");
|
|
1747
|
-
i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, t[t.length - 1].after(i);
|
|
1748
|
-
let a = i.offsetWidth + 6, o = 0;
|
|
1749
|
-
for (let e of t) if (r(e) <= n - a) o += 1;
|
|
1750
|
-
else break;
|
|
1751
|
-
o < 1 && (o = 1);
|
|
1752
|
-
for (let e = o; e < t.length; e += 1) t[e].style.display = "none";
|
|
1753
|
-
i.textContent = `+${t.length - o}`;
|
|
1754
|
-
}
|
|
1755
|
-
_matches(e, t) {
|
|
1756
|
-
return B(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
|
|
1757
|
-
}
|
|
1758
|
-
_optionNamed(e) {
|
|
1759
|
-
let t = e.trim().toLowerCase();
|
|
1760
|
-
return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || B(e.label).trim().toLowerCase() === t);
|
|
1761
|
-
}
|
|
1762
|
-
_renderOptions(e) {
|
|
1763
|
-
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
1764
|
-
if (!t) return;
|
|
1765
|
-
let r = (e || "").trim(), i = r.toLowerCase(), a = this._readOptions();
|
|
1766
|
-
i && (a = a.filter((e) => this._matches(e, i)));
|
|
1767
|
-
let o = this._listboxId || `${this.id || "wui-multiselect"}-listbox`, s = this._allowCustom && r && !this._optionNamed(r), c = a.map((e, t) => {
|
|
1768
|
-
let n = this._values.includes(String(e.value)), r = `${o}-opt-${t}`;
|
|
1769
|
-
return _e(e) ? be(e, r, n) : `<button type="button" role="option" id="${z(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
|
|
1770
|
-
});
|
|
1771
|
-
s && c.push(`<button type="button" role="option" id="${z(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${z(r)}" data-custom="true" aria-selected="false">Add “${g(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
|
|
1772
|
-
}
|
|
1773
|
-
_combobox() {
|
|
1774
|
-
return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
|
|
1775
|
-
}
|
|
1776
|
-
_setCustomError(e) {
|
|
1777
|
-
this._customError = e || "";
|
|
1778
|
-
let t = this.querySelector(".wui-ms-custom-error"), n = this.querySelector("[data-input]");
|
|
1779
|
-
t && (t.textContent = this._customError, t.hidden = !this._customError), n && (this._customError ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid")), this._syncInvalid();
|
|
1780
|
-
}
|
|
1781
|
-
_customRefusal(e) {
|
|
1782
|
-
let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
|
|
1783
|
-
if (n) {
|
|
1784
|
-
let r = xe(n);
|
|
1785
|
-
if (r && !r.test(e)) return t;
|
|
1786
|
-
}
|
|
1787
|
-
let r = this._validateCustom;
|
|
1788
|
-
if (r) {
|
|
1789
|
-
let n = r(e);
|
|
1790
|
-
return n === !0 ? "" : typeof n == "string" && n ? n : t;
|
|
1791
|
-
}
|
|
1792
|
-
return "";
|
|
1793
|
-
}
|
|
1794
|
-
_commitTyped(e) {
|
|
1795
|
-
let t = e.trim().replace(/,+$/, "").trim();
|
|
1796
|
-
if (!t) return "";
|
|
1797
|
-
let n = this._optionNamed(t), r;
|
|
1798
|
-
if (n) {
|
|
1799
|
-
if (n.disabled) return n.disabledHint || this.getAttribute("custom-invalid-message") || "That option is not available.";
|
|
1800
|
-
r = String(n.value);
|
|
1801
|
-
} else {
|
|
1802
|
-
let e = this._customRefusal(t);
|
|
1803
|
-
if (e) return e;
|
|
1804
|
-
r = t;
|
|
1805
|
-
}
|
|
1806
|
-
let i = r.toLowerCase();
|
|
1807
|
-
return this._values.some((e) => e.toLowerCase() === i) || (this._values = [...this._values, r]), "";
|
|
1808
|
-
}
|
|
1809
|
-
_wire() {
|
|
1810
|
-
this._teardown();
|
|
1811
|
-
let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), i = this.querySelector(".search-select-options"), a = this._allowCustom, o = a ? this.querySelector("[data-input]") : null, l = o || e;
|
|
1812
|
-
if (!e || !t) return;
|
|
1813
|
-
let u = () => this.hasAttribute("disabled"), f = () => s(e, t, { matchWidth: !0 }), p = () => [...this.querySelectorAll(".search-select-option")], h = () => p().filter((e) => !e.hidden), g = (e) => {
|
|
1814
|
-
let t = h();
|
|
1815
|
-
this._active = e;
|
|
1816
|
-
for (let e of p()) e.classList.remove("is-active");
|
|
1817
|
-
e >= 0 && t[e] ? (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }), l.setAttribute("aria-activedescendant", t[e].id)) : l.removeAttribute("aria-activedescendant");
|
|
1818
|
-
}, _ = !1, v = () => a ? _ : !t.hidden, y = () => {
|
|
1819
|
-
let n = _ && p().length > 0, r = t.hidden;
|
|
1820
|
-
t.hidden = !n, l.setAttribute("aria-expanded", String(n)), e.classList.toggle("open", n), n && r && f();
|
|
1821
|
-
};
|
|
1822
|
-
this._syncCustomMenu = a ? y : null;
|
|
1823
|
-
let b = () => {
|
|
1824
|
-
if (!u()) {
|
|
1825
|
-
if (a) {
|
|
1826
|
-
_ = !0, y();
|
|
1827
|
-
return;
|
|
1828
|
-
}
|
|
1829
|
-
t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), f(), n && (n.value = "", this._renderOptions(""), n.focus());
|
|
1830
|
-
}
|
|
1831
|
-
}, x = () => {
|
|
1832
|
-
a ? (_ = !1, y()) : (t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open")), g(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
|
|
1833
|
-
}, S = () => {
|
|
1834
|
-
d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1835
|
-
}, C = (e) => {
|
|
1836
|
-
let t = String(e);
|
|
1837
|
-
if (this._values.includes(t)) this._values = this._values.filter((e) => e !== t);
|
|
1838
|
-
else if (a && this._values.some((e) => e.toLowerCase() === t.toLowerCase())) return;
|
|
1839
|
-
else this._values = [...this._values, t];
|
|
1840
|
-
this._renderControl(), this._renderOptions(this._query()), S();
|
|
1841
|
-
}, ee = (e) => {
|
|
1842
|
-
this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), S();
|
|
1843
|
-
}, w = (e, { quiet: t = !1 } = {}) => {
|
|
1844
|
-
let n = this._values.length, r = I(e, L) ? me(e, L) : [e], i = [], a = "";
|
|
1845
|
-
for (let e of r) {
|
|
1846
|
-
let t = this._commitTyped(e);
|
|
1847
|
-
t && (i.push(e.trim()), a ||= t);
|
|
1848
|
-
}
|
|
1849
|
-
t && i.length || (o.value = i.join(", "), this._setCustomError(a), this._values.length !== n && (this._renderControl(), S()), this._renderOptions(o.value));
|
|
1850
|
-
}, T = (e) => {
|
|
1851
|
-
if (!(!e || e.getAttribute("aria-disabled") === "true")) {
|
|
1852
|
-
if (e.dataset.custom === "true") {
|
|
1853
|
-
w(e.dataset.value);
|
|
1854
|
-
return;
|
|
1855
|
-
}
|
|
1856
|
-
C(e.dataset.value), o?.value && (o.value = "", this._setCustomError(""), this._renderOptions(""));
|
|
1857
|
-
}
|
|
1858
|
-
};
|
|
1859
|
-
e.addEventListener("click", (e) => {
|
|
1860
|
-
if (u()) return;
|
|
1861
|
-
let t = e.target.closest("[data-remove]");
|
|
1862
|
-
if (t) {
|
|
1863
|
-
e.stopPropagation(), ee(t.dataset.remove), o?.focus();
|
|
1864
|
-
return;
|
|
1865
|
-
}
|
|
1866
|
-
if (o) {
|
|
1867
|
-
let t = v();
|
|
1868
|
-
e.target !== o && o.focus(), e.target === o || !t ? b() : x();
|
|
1869
|
-
return;
|
|
1870
|
-
}
|
|
1871
|
-
v() ? x() : b();
|
|
1872
|
-
}), i.addEventListener("click", (e) => {
|
|
1873
|
-
let t = e.target.closest(".search-select-option");
|
|
1874
|
-
t && (T(t), (o || n)?.focus());
|
|
1875
|
-
}), i.addEventListener("mousemove", (e) => {
|
|
1876
|
-
let t = e.target.closest(".search-select-option");
|
|
1877
|
-
t && g(h().indexOf(t));
|
|
1878
|
-
}), i.addEventListener("mouseleave", () => g(-1)), i.addEventListener("error", (e) => {
|
|
1879
|
-
e.target?.classList?.contains("avatar-img") && e.target.remove();
|
|
1880
|
-
}, !0), n?.addEventListener("input", () => {
|
|
1881
|
-
this._renderOptions(n.value), r && (r.hidden = !n.value), g(-1);
|
|
1882
|
-
}), this._navHandler = m({
|
|
1883
|
-
getVisibleOptions: h,
|
|
1884
|
-
getActive: () => this._active,
|
|
1885
|
-
setActive: (e) => g(e),
|
|
1886
|
-
onEnter: (e) => {
|
|
1887
|
-
e ? T(e) : o?.value.trim() && w(o.value);
|
|
1888
|
-
},
|
|
1889
|
-
onEscape: () => {
|
|
1890
|
-
this._navHandler.clearTypeahead(), x(), o || e.focus();
|
|
1891
|
-
}
|
|
1892
|
-
});
|
|
1893
|
-
let E = (e) => {
|
|
1894
|
-
let t = o || n;
|
|
1895
|
-
if (e.key === "Backspace" && !t?.value && this._values.length) {
|
|
1896
|
-
ee(this._values[this._values.length - 1]);
|
|
1897
|
-
return;
|
|
1898
|
-
}
|
|
1899
|
-
this._navHandler.handler(e);
|
|
1900
|
-
};
|
|
1901
|
-
if (n?.addEventListener("keydown", E), r?.addEventListener("click", () => {
|
|
1902
|
-
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
1903
|
-
}), o) {
|
|
1904
|
-
let t = (e) => {
|
|
1905
|
-
e.target !== o && e.preventDefault();
|
|
1906
|
-
};
|
|
1907
|
-
i.addEventListener("mousedown", t), e.addEventListener("mousedown", t), o.addEventListener("focus", () => b()), o.addEventListener("input", () => {
|
|
1908
|
-
this._customError && this._setCustomError(""), this._renderOptions(o.value), b();
|
|
1909
|
-
}), o.addEventListener("keydown", (e) => {
|
|
1910
|
-
if (e.key === "," && o.value.trim()) {
|
|
1911
|
-
e.preventDefault(), w(o.value);
|
|
1912
|
-
return;
|
|
1913
|
-
}
|
|
1914
|
-
if (e.key === "Enter") {
|
|
1915
|
-
if (this._active < 0 && !o.value.trim()) return;
|
|
1916
|
-
this._navHandler.handler(e);
|
|
1917
|
-
return;
|
|
1918
|
-
}
|
|
1919
|
-
(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), E(e);
|
|
1920
|
-
}), o.addEventListener("paste", (e) => {
|
|
1921
|
-
let t = e.clipboardData?.getData("text/plain") ?? "";
|
|
1922
|
-
I(t, L) && (e.preventDefault(), w(`${o.value}${t}`));
|
|
1923
|
-
}), o.addEventListener("blur", (e) => {
|
|
1924
|
-
e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && w(o.value, { quiet: !0 }), x());
|
|
1925
|
-
});
|
|
1926
|
-
} else e.addEventListener("keydown", (e) => {
|
|
1927
|
-
if (v()) {
|
|
1928
|
-
E(e);
|
|
1929
|
-
return;
|
|
1930
|
-
}
|
|
1931
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
|
|
1932
|
-
});
|
|
1933
|
-
this._bindGlobal = () => {
|
|
1934
|
-
this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
|
|
1935
|
-
v() && !this.contains(e.target) && x();
|
|
1936
|
-
}, document.addEventListener("click", this._onDocClick), c(this, () => {
|
|
1937
|
-
v() && f();
|
|
1938
|
-
});
|
|
1939
|
-
}, this._bindGlobal();
|
|
1940
|
-
}
|
|
1941
|
-
_teardown() {
|
|
1942
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this), this._navHandler?.teardown();
|
|
1943
|
-
}
|
|
1944
|
-
disconnectedCallback() {
|
|
1945
|
-
this._teardown(), this._ro?.disconnect(), this._ro = null;
|
|
1946
|
-
}
|
|
1947
|
-
}, L = [
|
|
1948
|
-
",",
|
|
1949
|
-
";",
|
|
1950
|
-
"\n",
|
|
1951
|
-
" "
|
|
1952
|
-
], ge = [
|
|
1953
|
-
["description", "description"],
|
|
1954
|
-
["avatar", "avatar"],
|
|
1955
|
-
["initials", "initials"],
|
|
1956
|
-
["disabled-hint", "disabledHint"]
|
|
1957
|
-
], _e = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), ve = (e) => {
|
|
1958
|
-
let t = String(e ?? "").trim();
|
|
1959
|
-
return /^(https?:)?\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t) ? t : "";
|
|
1960
|
-
}, ye = (e) => {
|
|
1961
|
-
let t = ve(e.avatar);
|
|
1962
|
-
return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${z(t)}" alt="" />` : ""}</span>`;
|
|
1963
|
-
}, be = (e, t, n) => {
|
|
1964
|
-
let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${g(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${g(e.disabledHint)}</span>` : "";
|
|
1965
|
-
return `<button type="button" role="option" id="${z(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${i}</span>${a}${ye(e)}<span class="ms-check">${p("check")}</span></button>`;
|
|
1966
|
-
}, R = /* @__PURE__ */ new Map(), xe = (e) => {
|
|
1967
|
-
if (R.has(e)) return R.get(e);
|
|
1968
|
-
let t = null;
|
|
1969
|
-
try {
|
|
1970
|
-
t = RegExp(`^(?:${e})$`, "u");
|
|
1971
|
-
} catch {
|
|
1972
|
-
console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`);
|
|
1973
|
-
}
|
|
1974
|
-
return R.set(e, t), t;
|
|
1975
|
-
}, z = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), B = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Se = /[^0-9]/g, Ce = /[^0-9a-zA-Z]/g, we = class extends e {
|
|
1976
|
-
static formAssociated = !0;
|
|
1977
|
-
static get observedAttributes() {
|
|
1978
|
-
return [
|
|
1979
|
-
"value",
|
|
1980
|
-
"length",
|
|
1981
|
-
"mode",
|
|
1982
|
-
"disabled",
|
|
1983
|
-
"aria-label"
|
|
1984
|
-
];
|
|
1985
|
-
}
|
|
1986
|
-
get length() {
|
|
1987
|
-
let e = Number.parseInt(this.getAttribute("length") ?? "6", 10);
|
|
1988
|
-
return Number.isFinite(e) && e > 0 ? e : 6;
|
|
1989
|
-
}
|
|
1990
|
-
set length(e) {
|
|
1991
|
-
this.setAttribute("length", String(e));
|
|
1992
|
-
}
|
|
1993
|
-
get mode() {
|
|
1994
|
-
return this.getAttribute("mode") === "alphanumeric" ? "alphanumeric" : "numeric";
|
|
1995
|
-
}
|
|
1996
|
-
set mode(e) {
|
|
1997
|
-
this.setAttribute("mode", String(e ?? "numeric"));
|
|
1998
|
-
}
|
|
1999
|
-
get value() {
|
|
2000
|
-
return this._value ?? "";
|
|
2001
|
-
}
|
|
2002
|
-
set value(e) {
|
|
2003
|
-
this._value = this._clean(e), d(this, this._value), this._paint();
|
|
2004
|
-
}
|
|
2005
|
-
_clean(e) {
|
|
2006
|
-
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Ce : Se, "").slice(0, this.length);
|
|
2007
|
-
}
|
|
2008
|
-
constructor() {
|
|
2009
|
-
super();
|
|
2010
|
-
try {
|
|
2011
|
-
this._internals = this.attachInternals();
|
|
2012
|
-
} catch {
|
|
2013
|
-
this._internals = null;
|
|
2014
|
-
}
|
|
2015
|
-
}
|
|
2016
|
-
connectedCallback() {
|
|
2017
|
-
this._rendered ? this._onSelectionChange && document.addEventListener("selectionchange", this._onSelectionChange) : (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
|
|
2018
|
-
}
|
|
2019
|
-
formResetCallback() {
|
|
2020
|
-
this._value = this._defaultValue || "", d(this, this._value), this._paint();
|
|
2021
|
-
}
|
|
2022
|
-
attributeChangedCallback(e, t, n) {
|
|
2023
|
-
this._rendered && (e === "value" ? (this._value = this._clean(n), d(this, this._value), this._paint()) : this.render());
|
|
2024
|
-
}
|
|
2025
|
-
render() {
|
|
2026
|
-
this._value = this._clean(this.getAttribute("value") ?? this._value);
|
|
2027
|
-
let e = this.length, t = this.mode === "numeric", n = this.hasAttribute("disabled"), r = Array.from({ length: e }, () => "<span class=\"otp-slot\" aria-hidden=\"true\"></span>").join(""), i = this.getAttribute("aria-label"), a = i ? ` aria-label="${i.replace(/"/g, """)}"` : "";
|
|
2028
|
-
this.innerHTML = `
|
|
2029
|
-
<div class="otp">
|
|
2030
|
-
<input
|
|
2031
|
-
class="otp-field"
|
|
2032
|
-
type="text"
|
|
2033
|
-
autocomplete="one-time-code"
|
|
2034
|
-
inputmode="${t ? "numeric" : "text"}"
|
|
2035
|
-
${t ? "pattern=\"[0-9]*\"" : ""}${a}
|
|
2036
|
-
autocapitalize="off"
|
|
2037
|
-
autocorrect="off"
|
|
2038
|
-
spellcheck="false"
|
|
2039
|
-
${n ? "disabled" : ""} />
|
|
2040
|
-
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
2041
|
-
</div>`, this._rendered = !0, d(this, this._value), this._wire(), this._paint();
|
|
2042
|
-
}
|
|
2043
|
-
_refs() {
|
|
2044
|
-
return {
|
|
2045
|
-
input: this.querySelector(".otp-field"),
|
|
2046
|
-
slots: [...this.querySelectorAll(".otp-slot")]
|
|
2047
|
-
};
|
|
2048
|
-
}
|
|
2049
|
-
_paint() {
|
|
2050
|
-
let { input: e, slots: t } = this._refs();
|
|
2051
|
-
if (!e || !t.length) return;
|
|
2052
|
-
e.value !== this._value && (e.value = this._value);
|
|
2053
|
-
let n = e.selectionStart ?? this._value.length, r = Math.min(n, t.length - 1), i = document.activeElement === e;
|
|
2054
|
-
t.forEach((e, t) => {
|
|
2055
|
-
e.textContent = this._value[t] ?? "", e.classList.toggle("filled", !!this._value[t]), e.classList.toggle("active", i && t === r);
|
|
2056
|
-
});
|
|
2057
|
-
}
|
|
2058
|
-
_wire() {
|
|
2059
|
-
let { input: e } = this._refs();
|
|
2060
|
-
if (!e) return;
|
|
2061
|
-
let t = (e) => {
|
|
2062
|
-
let t = this._clean(e), n = t !== this._value;
|
|
2063
|
-
this._value = t, d(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
|
|
2064
|
-
bubbles: !0,
|
|
2065
|
-
detail: t
|
|
2066
|
-
}));
|
|
2067
|
-
};
|
|
2068
|
-
e.addEventListener("input", () => {
|
|
2069
|
-
let n = e.value;
|
|
2070
|
-
if (this._value.length === this.length && n.length > this._value.length && n.startsWith(this._value)) {
|
|
2071
|
-
let e = this._clean(n.slice(this._value.length));
|
|
2072
|
-
if (e) {
|
|
2073
|
-
t(e);
|
|
2074
|
-
return;
|
|
2075
|
-
}
|
|
2076
|
-
}
|
|
2077
|
-
t(n);
|
|
2078
|
-
}), e.addEventListener("paste", (e) => {
|
|
2079
|
-
let n = e.clipboardData?.getData("text");
|
|
2080
|
-
n != null && (e.preventDefault(), t(n));
|
|
2081
|
-
});
|
|
2082
|
-
for (let t of [
|
|
2083
|
-
"keyup",
|
|
2084
|
-
"click",
|
|
2085
|
-
"blur",
|
|
2086
|
-
"select"
|
|
2087
|
-
]) e.addEventListener(t, () => this._paint());
|
|
2088
|
-
e.addEventListener("focus", () => {
|
|
2089
|
-
this._value.length === this.length && e.select(), this._paint();
|
|
2090
|
-
}), this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange), this._onSelectionChange = () => {
|
|
2091
|
-
document.activeElement === e && this._paint();
|
|
2092
|
-
}, document.addEventListener("selectionchange", this._onSelectionChange);
|
|
2093
|
-
}
|
|
2094
|
-
disconnectedCallback() {
|
|
2095
|
-
this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
|
|
2096
|
-
}
|
|
2097
|
-
}, V = [
|
|
939
|
+
var A = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), ae = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), j = [
|
|
2098
940
|
[
|
|
2099
941
|
"AF",
|
|
2100
942
|
"Afghanistan",
|
|
@@ -3320,11 +2162,1413 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), he = class extends
|
|
|
3320
2162
|
"Zimbabwe",
|
|
3321
2163
|
"263"
|
|
3322
2164
|
]
|
|
3323
|
-
],
|
|
2165
|
+
], M = (e) => (j.find((t) => t[0] === e) || [
|
|
3324
2166
|
"",
|
|
3325
2167
|
"",
|
|
3326
2168
|
""
|
|
3327
|
-
])[2],
|
|
2169
|
+
])[2], N = class extends e {
|
|
2170
|
+
static formAssociated = !0;
|
|
2171
|
+
static get observedAttributes() {
|
|
2172
|
+
return [
|
|
2173
|
+
"value",
|
|
2174
|
+
"placeholder",
|
|
2175
|
+
"search-placeholder",
|
|
2176
|
+
"searchable",
|
|
2177
|
+
"disabled",
|
|
2178
|
+
"compact",
|
|
2179
|
+
"size",
|
|
2180
|
+
"clearable",
|
|
2181
|
+
"icon",
|
|
2182
|
+
"prefix",
|
|
2183
|
+
"aria-label",
|
|
2184
|
+
"aria-invalid"
|
|
2185
|
+
];
|
|
2186
|
+
}
|
|
2187
|
+
_accessibleName() {
|
|
2188
|
+
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
2189
|
+
}
|
|
2190
|
+
constructor() {
|
|
2191
|
+
super();
|
|
2192
|
+
try {
|
|
2193
|
+
this._internals = this.attachInternals();
|
|
2194
|
+
} catch {
|
|
2195
|
+
this._internals = null;
|
|
2196
|
+
}
|
|
2197
|
+
this._value = "", this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null;
|
|
2198
|
+
}
|
|
2199
|
+
connectedCallback() {
|
|
2200
|
+
if (!this._rendered) {
|
|
2201
|
+
this.render();
|
|
2202
|
+
return;
|
|
2203
|
+
}
|
|
2204
|
+
this._bindGlobal?.();
|
|
2205
|
+
}
|
|
2206
|
+
attributeChangedCallback(e, t, n) {
|
|
2207
|
+
if (e === "value") {
|
|
2208
|
+
this.value = n;
|
|
2209
|
+
return;
|
|
2210
|
+
}
|
|
2211
|
+
if (e === "aria-invalid") {
|
|
2212
|
+
this._syncInvalid();
|
|
2213
|
+
return;
|
|
2214
|
+
}
|
|
2215
|
+
this._rendered && this.render();
|
|
2216
|
+
}
|
|
2217
|
+
_syncInvalid() {
|
|
2218
|
+
let e = this.querySelector(".search-select-control");
|
|
2219
|
+
e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
2220
|
+
}
|
|
2221
|
+
formResetCallback() {
|
|
2222
|
+
this.value = this._defaultValue || "";
|
|
2223
|
+
}
|
|
2224
|
+
get value() {
|
|
2225
|
+
return this._value;
|
|
2226
|
+
}
|
|
2227
|
+
set value(e) {
|
|
2228
|
+
this._value = e == null ? "" : String(e), f(this, this._value), this._syncSelected(), this._syncReset();
|
|
2229
|
+
}
|
|
2230
|
+
set options(e) {
|
|
2231
|
+
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
2232
|
+
}
|
|
2233
|
+
get options() {
|
|
2234
|
+
return this._readOptions();
|
|
2235
|
+
}
|
|
2236
|
+
_snapshotDeclared() {
|
|
2237
|
+
if (this._declared) return;
|
|
2238
|
+
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
2239
|
+
e.length && (this._declared = e.map((e) => ({
|
|
2240
|
+
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
2241
|
+
label: e.innerHTML,
|
|
2242
|
+
icon: e.getAttribute("icon") || void 0,
|
|
2243
|
+
[g]: !0,
|
|
2244
|
+
selected: e.hasAttribute("selected")
|
|
2245
|
+
})));
|
|
2246
|
+
}
|
|
2247
|
+
_readOptions() {
|
|
2248
|
+
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
2249
|
+
}
|
|
2250
|
+
render() {
|
|
2251
|
+
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._snapshotDeclared();
|
|
2252
|
+
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", c = this.getAttribute("search-placeholder") || "Search...", l = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
|
|
2253
|
+
l && (this._value = String(l.value)), f(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
|
|
2254
|
+
let u = `${this.id}-listbox`;
|
|
2255
|
+
this._listboxId = u;
|
|
2256
|
+
let d = e.map((e, t) => {
|
|
2257
|
+
let n = String(e.value) === String(this._value);
|
|
2258
|
+
return `<button type="button" role="option" id="${P(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${P(e.value)}" aria-selected="${n}">${x(e)}</button>`;
|
|
2259
|
+
}).join("");
|
|
2260
|
+
this.innerHTML = `
|
|
2261
|
+
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
|
|
2262
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${P(u)}" aria-label="${P(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
2263
|
+
${a ? m(a, { className: "search-select-icon" }) : ""}
|
|
2264
|
+
${o ? `<span class="search-select-prefix">${_(o)}</span>` : ""}
|
|
2265
|
+
<span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? x(l) : _(s)}</span>
|
|
2266
|
+
${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${m("x")}</span>` : ""}
|
|
2267
|
+
${m("chevron-down", { className: "search-select-caret" })}
|
|
2268
|
+
</button>
|
|
2269
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${P(u)}" tabindex="-1" hidden>
|
|
2270
|
+
${t ? `<div class="search-select-search">${m("search")}<input class="search-select-input" placeholder="${P(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${m("x")}</button></div>` : ""}
|
|
2271
|
+
<div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
|
|
2272
|
+
</div>
|
|
2273
|
+
</div>`, this._rendered = !0, f(this, this._value), this._wire(), this._syncReset();
|
|
2274
|
+
}
|
|
2275
|
+
_refs() {
|
|
2276
|
+
return {
|
|
2277
|
+
control: this.querySelector(".search-select-control"),
|
|
2278
|
+
menu: this.querySelector(".search-select-menu"),
|
|
2279
|
+
label: this.querySelector("[data-label]"),
|
|
2280
|
+
reset: this.querySelector(".search-select-reset"),
|
|
2281
|
+
search: this.querySelector(".search-select-input"),
|
|
2282
|
+
clear: this.querySelector(".search-select-clear"),
|
|
2283
|
+
empty: this.querySelector(".search-select-empty"),
|
|
2284
|
+
optionsWrap: this.querySelector(".search-select-options")
|
|
2285
|
+
};
|
|
2286
|
+
}
|
|
2287
|
+
_optionEls() {
|
|
2288
|
+
return [...this.querySelectorAll(".search-select-option")];
|
|
2289
|
+
}
|
|
2290
|
+
_visible() {
|
|
2291
|
+
return this._optionEls().filter((e) => !e.hidden);
|
|
2292
|
+
}
|
|
2293
|
+
_syncSelected() {
|
|
2294
|
+
let { label: e } = this._refs(), t = this._readOptions().find((e) => String(e.value) === String(this._value));
|
|
2295
|
+
for (let e of this._optionEls()) {
|
|
2296
|
+
let t = e.dataset.value === String(this._value);
|
|
2297
|
+
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
2298
|
+
}
|
|
2299
|
+
e && (e.innerHTML = t ? x(t) : _(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
|
|
2300
|
+
}
|
|
2301
|
+
_syncReset() {
|
|
2302
|
+
let { reset: e } = this._refs();
|
|
2303
|
+
e && (e.hidden = !(this.hasAttribute("clearable") && this._value !== "" && !this.hasAttribute("disabled")));
|
|
2304
|
+
}
|
|
2305
|
+
_wire() {
|
|
2306
|
+
this._teardown();
|
|
2307
|
+
let e = this._refs();
|
|
2308
|
+
if (!e.control || !e.menu) return;
|
|
2309
|
+
let t = () => {
|
|
2310
|
+
if (this.hasAttribute("compact")) {
|
|
2311
|
+
let t = e.control.getBoundingClientRect();
|
|
2312
|
+
e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px", c(e.control, e.menu);
|
|
2313
|
+
} else c(e.control, e.menu, { matchWidth: !0 });
|
|
2314
|
+
}, n = (t) => {
|
|
2315
|
+
let n = this._visible();
|
|
2316
|
+
this._active = t;
|
|
2317
|
+
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
2318
|
+
t >= 0 && n[t] ? (n[t].classList.add("is-active"), n[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", n[t].id)) : e.control.removeAttribute("aria-activedescendant");
|
|
2319
|
+
}, r = (n) => {
|
|
2320
|
+
let r = n.trim().toLowerCase(), i = 0;
|
|
2321
|
+
for (let e of this._optionEls()) {
|
|
2322
|
+
let t = !r || e.textContent.toLowerCase().includes(r);
|
|
2323
|
+
e.hidden = !t, t && (i += 1);
|
|
2324
|
+
}
|
|
2325
|
+
e.empty && (e.empty.hidden = i > 0), e.clear && (e.clear.hidden = !r), e.menu.hidden || t();
|
|
2326
|
+
}, i = () => !e.menu.hidden, a = () => {
|
|
2327
|
+
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), e.search && (e.search.value = "", r(""), e.search.focus()), n(this._optionEls().findIndex((e) => e.classList.contains("selected")));
|
|
2328
|
+
}, o = () => {
|
|
2329
|
+
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
|
|
2330
|
+
}, s = (t) => {
|
|
2331
|
+
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.control.focus();
|
|
2332
|
+
};
|
|
2333
|
+
this._navHandler = h({
|
|
2334
|
+
getVisibleOptions: () => this._visible(),
|
|
2335
|
+
getActive: () => this._active,
|
|
2336
|
+
setActive: (e) => n(e),
|
|
2337
|
+
onEnter: (e) => {
|
|
2338
|
+
e && s(e);
|
|
2339
|
+
},
|
|
2340
|
+
onEscape: () => {
|
|
2341
|
+
this._navHandler.clearTypeahead(), o(), e.control.focus();
|
|
2342
|
+
}
|
|
2343
|
+
}), e.reset?.addEventListener("click", (t) => {
|
|
2344
|
+
t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
|
|
2345
|
+
}), e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
|
|
2346
|
+
if (i()) {
|
|
2347
|
+
this._navHandler.handler(e);
|
|
2348
|
+
return;
|
|
2349
|
+
}
|
|
2350
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
|
|
2351
|
+
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
2352
|
+
let t = e.target.closest(".search-select-option");
|
|
2353
|
+
t && s(t);
|
|
2354
|
+
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
2355
|
+
let t = e.target.closest(".search-select-option");
|
|
2356
|
+
t && n(this._visible().indexOf(t));
|
|
2357
|
+
}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
|
|
2358
|
+
r(e.search.value), n(-1);
|
|
2359
|
+
}), e.clear?.addEventListener("click", () => {
|
|
2360
|
+
e.search.value = "", r(""), e.search.focus();
|
|
2361
|
+
}), e.menu.addEventListener("keydown", this._navHandler.handler), this._bindGlobal = () => {
|
|
2362
|
+
this._teardown(), this._onDocClick = (e) => {
|
|
2363
|
+
i() && !this.contains(e.target) && o();
|
|
2364
|
+
}, document.addEventListener("click", this._onDocClick), l(this, () => {
|
|
2365
|
+
i() && t();
|
|
2366
|
+
});
|
|
2367
|
+
}, this._bindGlobal();
|
|
2368
|
+
}
|
|
2369
|
+
_teardown() {
|
|
2370
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this), this._navHandler?.teardown();
|
|
2371
|
+
}
|
|
2372
|
+
disconnectedCallback() {
|
|
2373
|
+
this._teardown();
|
|
2374
|
+
}
|
|
2375
|
+
}, P = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), oe = (e) => {
|
|
2376
|
+
if (e == null) return null;
|
|
2377
|
+
let t = String(e).split(",").map((e) => e.trim().toUpperCase()).filter(Boolean);
|
|
2378
|
+
return t.length ? new Set(t) : null;
|
|
2379
|
+
}, se = (e) => {
|
|
2380
|
+
let t = oe(e);
|
|
2381
|
+
return j.filter(([e]) => !t || t.has(e)).map(([e, t]) => ({
|
|
2382
|
+
value: e,
|
|
2383
|
+
label: t,
|
|
2384
|
+
flag: e
|
|
2385
|
+
}));
|
|
2386
|
+
}, ce = class extends N {
|
|
2387
|
+
static get observedAttributes() {
|
|
2388
|
+
return [...N.observedAttributes, "countries"];
|
|
2389
|
+
}
|
|
2390
|
+
_readOptions() {
|
|
2391
|
+
let e = this.getAttribute("countries");
|
|
2392
|
+
return this._countryCache?.attr !== e && (this._countryCache = {
|
|
2393
|
+
attr: e,
|
|
2394
|
+
options: se(e)
|
|
2395
|
+
}), this._countryCache.options;
|
|
2396
|
+
}
|
|
2397
|
+
}, F = [
|
|
2398
|
+
"January",
|
|
2399
|
+
"February",
|
|
2400
|
+
"March",
|
|
2401
|
+
"April",
|
|
2402
|
+
"May",
|
|
2403
|
+
"June",
|
|
2404
|
+
"July",
|
|
2405
|
+
"August",
|
|
2406
|
+
"September",
|
|
2407
|
+
"October",
|
|
2408
|
+
"November",
|
|
2409
|
+
"December"
|
|
2410
|
+
], I = [
|
|
2411
|
+
"Su",
|
|
2412
|
+
"Mo",
|
|
2413
|
+
"Tu",
|
|
2414
|
+
"We",
|
|
2415
|
+
"Th",
|
|
2416
|
+
"Fr",
|
|
2417
|
+
"Sa"
|
|
2418
|
+
], L = (e) => String(e).padStart(2, "0"), R = (e, t, n) => `${e}-${L(t + 1)}-${L(n)}`, z = (e) => {
|
|
2419
|
+
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
2420
|
+
return t ? {
|
|
2421
|
+
y: +t[1],
|
|
2422
|
+
m: t[2] - 1,
|
|
2423
|
+
d: +t[3]
|
|
2424
|
+
} : null;
|
|
2425
|
+
}, B = (e) => {
|
|
2426
|
+
let t = z(e);
|
|
2427
|
+
return t ? `${L(t.d)} ${F[t.m].slice(0, 3)} ${t.y}` : "";
|
|
2428
|
+
}, V = (e, t) => new Date(e, t + 1, 0).getDate(), H = (e, t) => {
|
|
2429
|
+
for (; t < 0;) t += 12, --e;
|
|
2430
|
+
for (; t > 11;) t -= 12, e += 1;
|
|
2431
|
+
return {
|
|
2432
|
+
y: e,
|
|
2433
|
+
m: t
|
|
2434
|
+
};
|
|
2435
|
+
}, le = class extends e {
|
|
2436
|
+
static formAssociated = !0;
|
|
2437
|
+
static get observedAttributes() {
|
|
2438
|
+
return [
|
|
2439
|
+
"value",
|
|
2440
|
+
"min",
|
|
2441
|
+
"max",
|
|
2442
|
+
"placeholder",
|
|
2443
|
+
"disabled",
|
|
2444
|
+
"first-day",
|
|
2445
|
+
"size",
|
|
2446
|
+
"aria-label",
|
|
2447
|
+
"aria-describedby",
|
|
2448
|
+
"aria-invalid"
|
|
2449
|
+
];
|
|
2450
|
+
}
|
|
2451
|
+
constructor() {
|
|
2452
|
+
super();
|
|
2453
|
+
try {
|
|
2454
|
+
this._internals = this.attachInternals();
|
|
2455
|
+
} catch {
|
|
2456
|
+
this._internals = null;
|
|
2457
|
+
}
|
|
2458
|
+
this._value = "";
|
|
2459
|
+
let e = new Date(2e3, 0, 1);
|
|
2460
|
+
this._viewY = e.getFullYear(), this._viewM = e.getMonth(), this._mode = "days", this._focus = null, this._slide = "";
|
|
2461
|
+
}
|
|
2462
|
+
connectedCallback() {
|
|
2463
|
+
if (!this._rendered) {
|
|
2464
|
+
this.render();
|
|
2465
|
+
return;
|
|
2466
|
+
}
|
|
2467
|
+
this._bindGlobal?.();
|
|
2468
|
+
}
|
|
2469
|
+
attributeChangedCallback(e, t, n) {
|
|
2470
|
+
if (e === "aria-invalid") {
|
|
2471
|
+
this._syncInvalid();
|
|
2472
|
+
return;
|
|
2473
|
+
}
|
|
2474
|
+
this._rendered && (e === "value" ? (this._value = n || "", this._syncFormValue(), this._syncTrigger()) : e === "first-day" ? this.querySelector(".datepicker-pop")?.hidden || this._renderView() : this.render());
|
|
2475
|
+
}
|
|
2476
|
+
_syncInvalid() {
|
|
2477
|
+
let e = this.querySelector(".datepicker-trigger");
|
|
2478
|
+
e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
2479
|
+
}
|
|
2480
|
+
formResetCallback() {
|
|
2481
|
+
this.value = this._defaultValue || "";
|
|
2482
|
+
}
|
|
2483
|
+
get value() {
|
|
2484
|
+
return this._value;
|
|
2485
|
+
}
|
|
2486
|
+
set value(e) {
|
|
2487
|
+
this._value = e || "", f(this, this._value), this._syncTrigger();
|
|
2488
|
+
}
|
|
2489
|
+
_firstDay() {
|
|
2490
|
+
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
2491
|
+
return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
|
|
2492
|
+
}
|
|
2493
|
+
render() {
|
|
2494
|
+
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
|
|
2495
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = z(this._value);
|
|
2496
|
+
t && (this._viewY = t.y, this._viewM = t.m);
|
|
2497
|
+
let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
|
|
2498
|
+
this.innerHTML = `
|
|
2499
|
+
<div class="datepicker">
|
|
2500
|
+
<button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${_(i)}"` : ""}${a ? ` aria-describedby="${_(a)}"` : ""}>
|
|
2501
|
+
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? B(this._value) : _(e)}</span>
|
|
2502
|
+
${m("calendar-dots")}
|
|
2503
|
+
</button>
|
|
2504
|
+
<div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
|
|
2505
|
+
</div>`, this._rendered = !0, f(this, this._value), this._wire();
|
|
2506
|
+
}
|
|
2507
|
+
_syncFormValue() {
|
|
2508
|
+
f(this, this._value);
|
|
2509
|
+
}
|
|
2510
|
+
_syncTrigger() {
|
|
2511
|
+
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
2512
|
+
if (!t) return;
|
|
2513
|
+
let n = z(this._value);
|
|
2514
|
+
t.textContent = n ? B(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
|
|
2515
|
+
}
|
|
2516
|
+
_limits() {
|
|
2517
|
+
let e = z(this.getAttribute("min")), t = z(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
|
|
2518
|
+
return {
|
|
2519
|
+
dayDisabled: (e, t, i) => {
|
|
2520
|
+
let a = new Date(e, t, i).getTime();
|
|
2521
|
+
return a < n || a > r;
|
|
2522
|
+
},
|
|
2523
|
+
monthDisabled: (e, t) => {
|
|
2524
|
+
let i = new Date(e, t, 1).getTime();
|
|
2525
|
+
return new Date(e, t, V(e, t)).getTime() < n || i > r;
|
|
2526
|
+
},
|
|
2527
|
+
yearDisabled: (e) => {
|
|
2528
|
+
let t = new Date(e, 0, 1).getTime();
|
|
2529
|
+
return new Date(e, 11, 31).getTime() < n || t > r;
|
|
2530
|
+
}
|
|
2531
|
+
};
|
|
2532
|
+
}
|
|
2533
|
+
_renderView() {
|
|
2534
|
+
let e = this.querySelector(".datepicker-pop");
|
|
2535
|
+
e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
|
|
2536
|
+
}
|
|
2537
|
+
_daysHtml() {
|
|
2538
|
+
let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = V(this._viewY, this._viewM), r = z(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
|
|
2539
|
+
y: this._viewY,
|
|
2540
|
+
m: this._viewM,
|
|
2541
|
+
d: 1
|
|
2542
|
+
}, s = (e, t, n, s) => {
|
|
2543
|
+
let c = R(e, t, n), l = r && r.y === e && r.m === t && r.d === n, u = i.getFullYear() === e && i.getMonth() === t && i.getDate() === n, d = o.y === e && o.m === t && o.d === n, f = a(e, t, n);
|
|
2544
|
+
return `<button type="button" class="${[
|
|
2545
|
+
"datepicker-day",
|
|
2546
|
+
s ? "is-outside" : "",
|
|
2547
|
+
u ? "is-today" : "",
|
|
2548
|
+
l ? "is-selected" : ""
|
|
2549
|
+
].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
|
|
2550
|
+
}, c = "", l = H(this._viewY, this._viewM - 1), u = V(l.y, l.m);
|
|
2551
|
+
for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
2552
|
+
for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
|
|
2553
|
+
let d = H(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
|
|
2554
|
+
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
2555
|
+
let p = a(i.getFullYear(), i.getMonth(), i.getDate()), h = I.map((t, n) => I[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
|
|
2556
|
+
return `
|
|
2557
|
+
<div class="datepicker-head">
|
|
2558
|
+
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${m("chevron-left")}</button>
|
|
2559
|
+
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${F[this._viewM]} ${this._viewY}</button>
|
|
2560
|
+
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${m("chevron-right")}</button>
|
|
2561
|
+
</div>
|
|
2562
|
+
<div class="datepicker-weekdays">${h}</div>
|
|
2563
|
+
<div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${c}</div>
|
|
2564
|
+
<div class="datepicker-foot">
|
|
2565
|
+
<button type="button" class="datepicker-link" data-today${p ? " disabled" : ""}>Today</button>
|
|
2566
|
+
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
2567
|
+
</div>`;
|
|
2568
|
+
}
|
|
2569
|
+
_monthsHtml() {
|
|
2570
|
+
let e = z(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
|
|
2571
|
+
for (let i = 0; i < 12; i++) {
|
|
2572
|
+
let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
|
|
2573
|
+
"datepicker-cell",
|
|
2574
|
+
o ? "is-today" : "",
|
|
2575
|
+
a ? "is-selected" : ""
|
|
2576
|
+
].filter(Boolean).join(" ");
|
|
2577
|
+
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${F[i].slice(0, 3)}</button>`;
|
|
2578
|
+
}
|
|
2579
|
+
return `
|
|
2580
|
+
<div class="datepicker-head">
|
|
2581
|
+
<button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year">${m("chevron-left")}</button>
|
|
2582
|
+
<button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
|
|
2583
|
+
<button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year">${m("chevron-right")}</button>
|
|
2584
|
+
</div>
|
|
2585
|
+
<div class="datepicker-cells">${r}</div>`;
|
|
2586
|
+
}
|
|
2587
|
+
_yearsHtml() {
|
|
2588
|
+
let e = z(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
|
|
2589
|
+
for (let a = 0; a < 12; a++) {
|
|
2590
|
+
let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
|
|
2591
|
+
"datepicker-cell",
|
|
2592
|
+
c ? "is-today" : "",
|
|
2593
|
+
s ? "is-selected" : ""
|
|
2594
|
+
].filter(Boolean).join(" ");
|
|
2595
|
+
i += `<button type="button" class="${u}" data-year="${o}"${l ? " disabled" : ""}>${o}</button>`;
|
|
2596
|
+
}
|
|
2597
|
+
return `
|
|
2598
|
+
<div class="datepicker-head">
|
|
2599
|
+
<button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade">${m("chevron-left")}</button>
|
|
2600
|
+
<span class="datepicker-month">${r + 1} – ${r + 10}</span>
|
|
2601
|
+
<button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${m("chevron-right")}</button>
|
|
2602
|
+
</div>
|
|
2603
|
+
<div class="datepicker-cells">${i}</div>`;
|
|
2604
|
+
}
|
|
2605
|
+
_focusActive() {
|
|
2606
|
+
let e = this.querySelector(".datepicker-pop"), t = e?.querySelector("[tabindex=\"0\"]") || e?.querySelector(".is-selected") || e?.querySelector(".datepicker-day:not(:disabled), .datepicker-cell:not(:disabled)");
|
|
2607
|
+
t && e.contains(document.activeElement) && t.focus();
|
|
2608
|
+
}
|
|
2609
|
+
_position(e, t) {
|
|
2610
|
+
c(e, t, { clampHeight: !0 });
|
|
2611
|
+
}
|
|
2612
|
+
_setFocus(e, t, n, r) {
|
|
2613
|
+
let { y: i, m: a } = H(e, t);
|
|
2614
|
+
this._focus = {
|
|
2615
|
+
y: i,
|
|
2616
|
+
m: a,
|
|
2617
|
+
d: n
|
|
2618
|
+
};
|
|
2619
|
+
let o = i !== this._viewY || a !== this._viewM;
|
|
2620
|
+
this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${R(i, a, n)}"]`)?.focus();
|
|
2621
|
+
}
|
|
2622
|
+
_onKey(e) {
|
|
2623
|
+
if (this._mode !== "days") {
|
|
2624
|
+
e.key === "Escape" && this._close();
|
|
2625
|
+
return;
|
|
2626
|
+
}
|
|
2627
|
+
let t = this._focus || z(this._value) || {
|
|
2628
|
+
y: this._viewY,
|
|
2629
|
+
m: this._viewM,
|
|
2630
|
+
d: 1
|
|
2631
|
+
}, n = (n, r) => {
|
|
2632
|
+
e.preventDefault();
|
|
2633
|
+
let i = new Date(t.y, t.m, t.d + n);
|
|
2634
|
+
this._setFocus(i.getFullYear(), i.getMonth(), i.getDate(), r);
|
|
2635
|
+
};
|
|
2636
|
+
switch (e.key) {
|
|
2637
|
+
case "ArrowLeft": return n(-1, "slide-prev");
|
|
2638
|
+
case "ArrowRight": return n(1, "slide-next");
|
|
2639
|
+
case "ArrowUp": return n(-7, "slide-prev");
|
|
2640
|
+
case "ArrowDown": return n(7, "slide-next");
|
|
2641
|
+
case "Home": return n(-((new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7), "slide-prev");
|
|
2642
|
+
case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
|
|
2643
|
+
case "PageUp": {
|
|
2644
|
+
e.preventDefault();
|
|
2645
|
+
let n = H(t.y, t.m - (e.shiftKey ? 12 : 1));
|
|
2646
|
+
return this._setFocus(n.y, n.m, Math.min(t.d, V(n.y, n.m)), "slide-prev");
|
|
2647
|
+
}
|
|
2648
|
+
case "PageDown": {
|
|
2649
|
+
e.preventDefault();
|
|
2650
|
+
let n = H(t.y, t.m + (e.shiftKey ? 12 : 1));
|
|
2651
|
+
return this._setFocus(n.y, n.m, Math.min(t.d, V(n.y, n.m)), "slide-next");
|
|
2652
|
+
}
|
|
2653
|
+
case "Enter":
|
|
2654
|
+
case " ":
|
|
2655
|
+
e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = R(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
|
|
2656
|
+
return;
|
|
2657
|
+
case "Escape": return this._close();
|
|
2658
|
+
default:
|
|
2659
|
+
}
|
|
2660
|
+
}
|
|
2661
|
+
_wire() {
|
|
2662
|
+
this._teardown();
|
|
2663
|
+
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector(".datepicker-pop"), n = this.querySelector(".datepicker");
|
|
2664
|
+
if (!e || !t) return;
|
|
2665
|
+
let r = () => !t.hidden;
|
|
2666
|
+
this._open = () => {
|
|
2667
|
+
let r = /* @__PURE__ */ new Date(), i = z(this._value);
|
|
2668
|
+
(i || !this._viewNavigated) && (this._viewY = r.getFullYear(), this._viewM = r.getMonth()), this._mode = "days";
|
|
2669
|
+
let a = r.getFullYear() === this._viewY && r.getMonth() === this._viewM, o = i && i.y === this._viewY && i.m === this._viewM;
|
|
2670
|
+
this._focus = o ? i : {
|
|
2671
|
+
y: this._viewY,
|
|
2672
|
+
m: this._viewM,
|
|
2673
|
+
d: a ? r.getDate() : 1
|
|
2674
|
+
}, this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true"), t.querySelector("[tabindex=\"0\"]")?.focus();
|
|
2675
|
+
}, this._close = () => {
|
|
2676
|
+
t.hidden = !0, n?.classList.remove("open"), e.setAttribute("aria-expanded", "false"), e.focus();
|
|
2677
|
+
}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
|
|
2678
|
+
this._popClick = !0;
|
|
2679
|
+
let t = e.target.closest("[data-nav]");
|
|
2680
|
+
if (t) {
|
|
2681
|
+
this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
|
|
2682
|
+
let e = H(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
2683
|
+
this._viewY = e.y, this._viewM = e.m, this._focus = {
|
|
2684
|
+
y: e.y,
|
|
2685
|
+
m: e.m,
|
|
2686
|
+
d: 1
|
|
2687
|
+
}, this._renderView(), this._slide = "";
|
|
2688
|
+
return;
|
|
2689
|
+
}
|
|
2690
|
+
let n = e.target.closest("[data-nav-year]");
|
|
2691
|
+
if (n) {
|
|
2692
|
+
this._viewY += Number(n.dataset.navYear), this._renderView();
|
|
2693
|
+
return;
|
|
2694
|
+
}
|
|
2695
|
+
let r = e.target.closest("[data-nav-decade]");
|
|
2696
|
+
if (r) {
|
|
2697
|
+
this._viewY += Number(r.dataset.navDecade) * 10, this._renderView();
|
|
2698
|
+
return;
|
|
2699
|
+
}
|
|
2700
|
+
let i = e.target.closest("[data-view]");
|
|
2701
|
+
if (i) {
|
|
2702
|
+
this._mode = i.dataset.view, this._renderView();
|
|
2703
|
+
return;
|
|
2704
|
+
}
|
|
2705
|
+
let a = e.target.closest("[data-month]");
|
|
2706
|
+
if (a && !a.disabled) {
|
|
2707
|
+
this._viewNavigated = !0, this._viewM = Number(a.dataset.month), this._mode = "days", this._focus = {
|
|
2708
|
+
y: this._viewY,
|
|
2709
|
+
m: this._viewM,
|
|
2710
|
+
d: 1
|
|
2711
|
+
}, this._renderView();
|
|
2712
|
+
return;
|
|
2713
|
+
}
|
|
2714
|
+
let o = e.target.closest("[data-year]");
|
|
2715
|
+
if (o && !o.disabled) {
|
|
2716
|
+
this._viewNavigated = !0, this._viewY = Number(o.dataset.year), this._mode = "months", this._renderView();
|
|
2717
|
+
return;
|
|
2718
|
+
}
|
|
2719
|
+
if (e.target.closest("[data-today]")) {
|
|
2720
|
+
let e = /* @__PURE__ */ new Date();
|
|
2721
|
+
if (this._limits().dayDisabled(e.getFullYear(), e.getMonth(), e.getDate())) return;
|
|
2722
|
+
this.value = R(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
2723
|
+
return;
|
|
2724
|
+
}
|
|
2725
|
+
if (e.target.closest("[data-clear]")) {
|
|
2726
|
+
this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
2727
|
+
return;
|
|
2728
|
+
}
|
|
2729
|
+
let s = e.target.closest(".datepicker-day[data-iso]");
|
|
2730
|
+
s && !s.disabled && (this.value = s.dataset.iso, this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
|
|
2731
|
+
}), this._onKeyBound = (e) => {
|
|
2732
|
+
r() && this._onKey(e);
|
|
2733
|
+
}, t.addEventListener("keydown", this._onKeyBound), this._bindGlobal = () => {
|
|
2734
|
+
this._teardown(), this._onDocClick = (e) => {
|
|
2735
|
+
let t = this._popClick;
|
|
2736
|
+
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
2737
|
+
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
2738
|
+
r() && e.key === "Escape" && this._close();
|
|
2739
|
+
}, document.addEventListener("keydown", this._onDocKey), l(this, () => {
|
|
2740
|
+
r() && this._position(e, t);
|
|
2741
|
+
});
|
|
2742
|
+
}, this._bindGlobal(), this._syncFormValue();
|
|
2743
|
+
}
|
|
2744
|
+
_teardown() {
|
|
2745
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), u(this);
|
|
2746
|
+
}
|
|
2747
|
+
disconnectedCallback() {
|
|
2748
|
+
this._teardown();
|
|
2749
|
+
}
|
|
2750
|
+
}, ue = class extends e {
|
|
2751
|
+
static formAssociated = !0;
|
|
2752
|
+
static get observedAttributes() {
|
|
2753
|
+
return [
|
|
2754
|
+
"start",
|
|
2755
|
+
"end",
|
|
2756
|
+
"min",
|
|
2757
|
+
"max",
|
|
2758
|
+
"placeholder",
|
|
2759
|
+
"disabled",
|
|
2760
|
+
"first-day",
|
|
2761
|
+
"size",
|
|
2762
|
+
"aria-label",
|
|
2763
|
+
"aria-describedby",
|
|
2764
|
+
"name",
|
|
2765
|
+
"start-name",
|
|
2766
|
+
"end-name",
|
|
2767
|
+
"aria-invalid"
|
|
2768
|
+
];
|
|
2769
|
+
}
|
|
2770
|
+
constructor() {
|
|
2771
|
+
super();
|
|
2772
|
+
try {
|
|
2773
|
+
this._internals = this.attachInternals();
|
|
2774
|
+
} catch {
|
|
2775
|
+
this._internals = null;
|
|
2776
|
+
}
|
|
2777
|
+
this._start = "", this._end = "", this._hover = "";
|
|
2778
|
+
let e = new Date(2e3, 0, 1);
|
|
2779
|
+
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
2780
|
+
}
|
|
2781
|
+
connectedCallback() {
|
|
2782
|
+
if (!this._rendered) {
|
|
2783
|
+
this.render();
|
|
2784
|
+
return;
|
|
2785
|
+
}
|
|
2786
|
+
this._bindGlobal?.();
|
|
2787
|
+
}
|
|
2788
|
+
attributeChangedCallback(e, t, n) {
|
|
2789
|
+
if (e === "aria-invalid") {
|
|
2790
|
+
this._syncInvalid();
|
|
2791
|
+
return;
|
|
2792
|
+
}
|
|
2793
|
+
this._rendered && (e === "start" || e === "end" ? (this._start = this.getAttribute("start") || "", this._end = this.getAttribute("end") || "", this._syncTrigger(), this._syncMirrors()) : this.render());
|
|
2794
|
+
}
|
|
2795
|
+
_syncInvalid() {
|
|
2796
|
+
let e = this.querySelector(".daterange-trigger");
|
|
2797
|
+
e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
2798
|
+
}
|
|
2799
|
+
get value() {
|
|
2800
|
+
return {
|
|
2801
|
+
start: this._start,
|
|
2802
|
+
end: this._end
|
|
2803
|
+
};
|
|
2804
|
+
}
|
|
2805
|
+
set value(e) {
|
|
2806
|
+
this._start = e?.start || "", this._end = e?.end || "", this._syncTrigger(), this._syncMirrors();
|
|
2807
|
+
}
|
|
2808
|
+
_firstDay() {
|
|
2809
|
+
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
2810
|
+
return Number.isInteger(e) && e >= 0 && e <= 6 ? e : 0;
|
|
2811
|
+
}
|
|
2812
|
+
_label() {
|
|
2813
|
+
let e = this.getAttribute("placeholder") || "Start – End";
|
|
2814
|
+
return !this._start && !this._end ? {
|
|
2815
|
+
text: e,
|
|
2816
|
+
empty: !0
|
|
2817
|
+
} : {
|
|
2818
|
+
text: `${B(this._start) || "Start"} – ${B(this._end) || "End"}`,
|
|
2819
|
+
empty: !1
|
|
2820
|
+
};
|
|
2821
|
+
}
|
|
2822
|
+
render() {
|
|
2823
|
+
this._defaultStart === void 0 && (this._defaultStart = this.getAttribute("start") || "", this._defaultEnd = this.getAttribute("end") || "", this._start = this._defaultStart || this._start, this._end = this._defaultEnd || this._end);
|
|
2824
|
+
let e = z(this._start);
|
|
2825
|
+
e && (this._viewY = e.y, this._viewM = e.m);
|
|
2826
|
+
let t = this.getAttribute("size"), n = t === "sm" ? " input-sm" : t === "lg" ? " input-lg" : "", { text: r, empty: i } = this._label(), a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
|
|
2827
|
+
this.innerHTML = `
|
|
2828
|
+
<div class="daterange">
|
|
2829
|
+
<button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${_(a)}"` : ""}${o ? ` aria-describedby="${_(o)}"` : ""}>
|
|
2830
|
+
<span data-range-label class="${i ? "search-select-placeholder" : ""}">${_(r)}</span>
|
|
2831
|
+
${m("calendar")}
|
|
2832
|
+
</button>
|
|
2833
|
+
<div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
|
|
2834
|
+
</div>`, this._rendered = !0, this._syncMirrors(), this._wire();
|
|
2835
|
+
}
|
|
2836
|
+
formResetCallback() {
|
|
2837
|
+
this.value = {
|
|
2838
|
+
start: this._defaultStart || "",
|
|
2839
|
+
end: this._defaultEnd || ""
|
|
2840
|
+
};
|
|
2841
|
+
}
|
|
2842
|
+
_syncTrigger() {
|
|
2843
|
+
let e = this.querySelector(".daterange-trigger"), t = this.querySelector("[data-range-label]");
|
|
2844
|
+
if (!t) return;
|
|
2845
|
+
let { text: n, empty: r } = this._label();
|
|
2846
|
+
t.textContent = n, t.classList.toggle("search-select-placeholder", r), e?.classList.toggle("has-value", !r);
|
|
2847
|
+
}
|
|
2848
|
+
_syncMirrors() {
|
|
2849
|
+
let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
|
|
2850
|
+
this._mirror("start", e, this._start), this._mirror("end", t, this._end);
|
|
2851
|
+
}
|
|
2852
|
+
_mirror(e, t, n) {
|
|
2853
|
+
if (!t) return;
|
|
2854
|
+
let r = this.querySelector(`input[type="hidden"][data-range-mirror="${e}"]`);
|
|
2855
|
+
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute("data-range-mirror", e), this.appendChild(r)), r.name = t, r.value = n || "", r.disabled = this.hasAttribute("disabled");
|
|
2856
|
+
}
|
|
2857
|
+
_limits() {
|
|
2858
|
+
let e = z(this.getAttribute("min")), t = z(this.getAttribute("max")), n = e ? new Date(e.y, e.m, e.d).getTime() : -Infinity, r = t ? new Date(t.y, t.m, t.d).getTime() : Infinity;
|
|
2859
|
+
return (e, t, i) => {
|
|
2860
|
+
let a = new Date(e, t, i).getTime();
|
|
2861
|
+
return a < n || a > r;
|
|
2862
|
+
};
|
|
2863
|
+
}
|
|
2864
|
+
_monthHtml(e, t) {
|
|
2865
|
+
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = V(e, t), a = this._limits(), o = I.map((e, t) => I[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
|
|
2866
|
+
let i = R(e, t, n), o = a(e, t, n);
|
|
2867
|
+
return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
|
|
2868
|
+
}, c = "", l = H(e, t - 1), u = V(l.y, l.m);
|
|
2869
|
+
for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
2870
|
+
for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
|
|
2871
|
+
let d = H(e, t + 1), f = (7 - (r + i) % 7) % 7;
|
|
2872
|
+
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
2873
|
+
return `
|
|
2874
|
+
<div class="daterange-cal">
|
|
2875
|
+
<div class="datepicker-month-label">${F[t]} ${e}</div>
|
|
2876
|
+
<div class="datepicker-weekdays">${o}</div>
|
|
2877
|
+
<div class="datepicker-grid" role="grid">${c}</div>
|
|
2878
|
+
</div>`;
|
|
2879
|
+
}
|
|
2880
|
+
_renderView() {
|
|
2881
|
+
let e = this.querySelector(".daterange-pop");
|
|
2882
|
+
if (!e) return;
|
|
2883
|
+
let t = H(this._viewY, this._viewM + 1);
|
|
2884
|
+
e.innerHTML = `
|
|
2885
|
+
<div class="daterange-head">
|
|
2886
|
+
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${m("chevron-left")}</button>
|
|
2887
|
+
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${m("chevron-right")}</button>
|
|
2888
|
+
</div>
|
|
2889
|
+
<div class="daterange-cals">
|
|
2890
|
+
${this._monthHtml(this._viewY, this._viewM)}
|
|
2891
|
+
${this._monthHtml(t.y, t.m)}
|
|
2892
|
+
</div>
|
|
2893
|
+
<div class="datepicker-foot">
|
|
2894
|
+
<span class="daterange-hint" data-range-hint></span>
|
|
2895
|
+
<button type="button" class="datepicker-link" data-clear>Clear</button>
|
|
2896
|
+
</div>`, this._paint();
|
|
2897
|
+
}
|
|
2898
|
+
_paint() {
|
|
2899
|
+
let e = this.querySelector(".daterange-pop");
|
|
2900
|
+
if (!e) return;
|
|
2901
|
+
let t = this._start ? new Date(this._start).getTime() : null, n = this._end;
|
|
2902
|
+
t && !this._end && this._hover && new Date(this._hover).getTime() >= t && (n = this._hover);
|
|
2903
|
+
let r = n ? new Date(n).getTime() : null;
|
|
2904
|
+
for (let n of e.querySelectorAll(".datepicker-day[data-iso]")) {
|
|
2905
|
+
let e = new Date(n.dataset.iso).getTime(), i = t != null && e === t, a = r != null && e === r, o = t != null && r != null && e > t && e < r;
|
|
2906
|
+
n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
|
|
2907
|
+
}
|
|
2908
|
+
let i = e.querySelector("[data-range-hint]");
|
|
2909
|
+
i && (i.textContent = this._start ? this._end ? `${B(this._start)} – ${B(this._end)}` : "Pick an end date" : "Pick a start date");
|
|
2910
|
+
}
|
|
2911
|
+
_position(e, t) {
|
|
2912
|
+
c(e, t, { clampHeight: !0 });
|
|
2913
|
+
}
|
|
2914
|
+
_pick(e) {
|
|
2915
|
+
if (!this._start || this._start && this._end) {
|
|
2916
|
+
this._start = e, this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._paint();
|
|
2917
|
+
return;
|
|
2918
|
+
}
|
|
2919
|
+
if (new Date(e).getTime() < new Date(this._start).getTime()) {
|
|
2920
|
+
this._start = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
2921
|
+
return;
|
|
2922
|
+
}
|
|
2923
|
+
this._end = e, this._syncTrigger(), this._syncMirrors(), this._paint(), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
2924
|
+
}
|
|
2925
|
+
_wire() {
|
|
2926
|
+
this._teardown();
|
|
2927
|
+
let e = this.querySelector(".daterange-trigger"), t = this.querySelector(".daterange-pop"), n = this.querySelector(".daterange");
|
|
2928
|
+
if (!e || !t) return;
|
|
2929
|
+
let r = () => !t.hidden;
|
|
2930
|
+
this._open = () => {
|
|
2931
|
+
let r = z(this._start);
|
|
2932
|
+
if (r) this._viewY = r.y, this._viewM = r.m;
|
|
2933
|
+
else {
|
|
2934
|
+
let e = /* @__PURE__ */ new Date();
|
|
2935
|
+
this._viewY = e.getFullYear(), this._viewM = e.getMonth();
|
|
2936
|
+
}
|
|
2937
|
+
this._renderView(), t.hidden = !1, n?.classList.add("open"), this._position(e, t), e.setAttribute("aria-expanded", "true");
|
|
2938
|
+
}, this._close = () => {
|
|
2939
|
+
t.hidden = !0, this._hover = "", n?.classList.remove("open"), e.setAttribute("aria-expanded", "false");
|
|
2940
|
+
}, e.addEventListener("click", () => r() ? this._close() : this._open()), t.addEventListener("click", (e) => {
|
|
2941
|
+
this._popClick = !0;
|
|
2942
|
+
let t = e.target.closest("[data-nav]");
|
|
2943
|
+
if (t) {
|
|
2944
|
+
let e = H(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
2945
|
+
this._viewY = e.y, this._viewM = e.m, this._renderView();
|
|
2946
|
+
return;
|
|
2947
|
+
}
|
|
2948
|
+
if (e.target.closest("[data-clear]")) {
|
|
2949
|
+
this._start = "", this._end = "", this._hover = "", this._syncTrigger(), this._syncMirrors(), this._renderView(), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
2950
|
+
return;
|
|
2951
|
+
}
|
|
2952
|
+
let n = e.target.closest(".datepicker-day[data-iso]");
|
|
2953
|
+
n && !n.disabled && this._pick(n.dataset.iso);
|
|
2954
|
+
}), t.addEventListener("mouseover", (e) => {
|
|
2955
|
+
let t = e.target.closest(".datepicker-day[data-iso]");
|
|
2956
|
+
t && this._start && !this._end && (this._hover = t.dataset.iso, this._paint());
|
|
2957
|
+
}), this._bindGlobal = () => {
|
|
2958
|
+
this._teardown(), this._onDocClick = (e) => {
|
|
2959
|
+
let t = this._popClick;
|
|
2960
|
+
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
2961
|
+
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
2962
|
+
r() && e.key === "Escape" && this._close();
|
|
2963
|
+
}, document.addEventListener("keydown", this._onDocKey), l(this, () => {
|
|
2964
|
+
r() && this._position(e, t);
|
|
2965
|
+
});
|
|
2966
|
+
}, this._bindGlobal(), this._syncMirrors();
|
|
2967
|
+
}
|
|
2968
|
+
_teardown() {
|
|
2969
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), u(this);
|
|
2970
|
+
}
|
|
2971
|
+
disconnectedCallback() {
|
|
2972
|
+
this._teardown();
|
|
2973
|
+
}
|
|
2974
|
+
}, de = class extends e {
|
|
2975
|
+
static get observedAttributes() {
|
|
2976
|
+
return [
|
|
2977
|
+
"static",
|
|
2978
|
+
"max-scale",
|
|
2979
|
+
"radius"
|
|
2980
|
+
];
|
|
2981
|
+
}
|
|
2982
|
+
constructor() {
|
|
2983
|
+
super(), this._pointerMoveListener = null, this._pointerLeaveListener = null, this._frame = 0, this._pointerX = 0;
|
|
2984
|
+
}
|
|
2985
|
+
connectedCallback() {
|
|
2986
|
+
this._wire();
|
|
2987
|
+
}
|
|
2988
|
+
disconnectedCallback() {
|
|
2989
|
+
this._teardown();
|
|
2990
|
+
}
|
|
2991
|
+
attributeChangedCallback(e, t, n) {
|
|
2992
|
+
e === "static" && this.isConnected && this._wire();
|
|
2993
|
+
}
|
|
2994
|
+
_maxScale() {
|
|
2995
|
+
return fe(this.getAttribute("max-scale"), 1.6);
|
|
2996
|
+
}
|
|
2997
|
+
_radius() {
|
|
2998
|
+
return fe(this.getAttribute("radius"), 100);
|
|
2999
|
+
}
|
|
3000
|
+
_magnifyEnabled() {
|
|
3001
|
+
return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
|
|
3002
|
+
}
|
|
3003
|
+
_applyMagnification() {
|
|
3004
|
+
this._frame = 0;
|
|
3005
|
+
let e = this._maxScale(), t = this._radius();
|
|
3006
|
+
for (let n of this.querySelectorAll(".dock-item")) {
|
|
3007
|
+
let r = n.getBoundingClientRect(), i = Math.abs(this._pointerX - (r.left + r.width / 2)), a = Math.max(0, 1 - i / t), o = 1 + (e - 1) * a;
|
|
3008
|
+
n.style.setProperty("--wui-dock-mag", o.toFixed(3));
|
|
3009
|
+
}
|
|
3010
|
+
}
|
|
3011
|
+
_resetMagnification() {
|
|
3012
|
+
this._frame &&= (cancelAnimationFrame(this._frame), 0);
|
|
3013
|
+
for (let e of this.querySelectorAll(".dock-item")) e.style.removeProperty("--wui-dock-mag");
|
|
3014
|
+
}
|
|
3015
|
+
_wire() {
|
|
3016
|
+
this._teardown(), this._magnifyEnabled() && (this._pointerMoveListener = (e) => {
|
|
3017
|
+
this._pointerX = e.clientX, this._frame ||= requestAnimationFrame(() => this._applyMagnification());
|
|
3018
|
+
}, this._pointerLeaveListener = () => this._resetMagnification(), this.addEventListener("pointermove", this._pointerMoveListener), this.addEventListener("pointerleave", this._pointerLeaveListener));
|
|
3019
|
+
}
|
|
3020
|
+
_teardown() {
|
|
3021
|
+
this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
|
|
3022
|
+
}
|
|
3023
|
+
}, fe = (e, t) => {
|
|
3024
|
+
let n = Number.parseFloat(e);
|
|
3025
|
+
return Number.isFinite(n) ? n : t;
|
|
3026
|
+
}, pe = {
|
|
3027
|
+
enter: "Enter",
|
|
3028
|
+
comma: ",",
|
|
3029
|
+
space: " ",
|
|
3030
|
+
tab: "Tab"
|
|
3031
|
+
}, me = {
|
|
3032
|
+
enter: "\n",
|
|
3033
|
+
comma: ",",
|
|
3034
|
+
space: " ",
|
|
3035
|
+
tab: " "
|
|
3036
|
+
}, he = (e) => pe[e], ge = (e) => me[e];
|
|
3037
|
+
function _e(e, t) {
|
|
3038
|
+
let n = [String(e ?? "")];
|
|
3039
|
+
for (let e of t) n = n.flatMap((t) => t.split(e));
|
|
3040
|
+
return n.map((e) => e.trim()).filter(Boolean);
|
|
3041
|
+
}
|
|
3042
|
+
var U = (e, t) => t.some((t) => String(e ?? "").includes(t)), ve = class extends e {
|
|
3043
|
+
static formAssociated = !0;
|
|
3044
|
+
_accessibleName() {
|
|
3045
|
+
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
3046
|
+
}
|
|
3047
|
+
static get observedAttributes() {
|
|
3048
|
+
return [
|
|
3049
|
+
"placeholder",
|
|
3050
|
+
"search-placeholder",
|
|
3051
|
+
"searchable",
|
|
3052
|
+
"disabled",
|
|
3053
|
+
"icon",
|
|
3054
|
+
"size",
|
|
3055
|
+
"collapse-chips",
|
|
3056
|
+
"aria-label",
|
|
3057
|
+
"aria-invalid",
|
|
3058
|
+
"allow-custom",
|
|
3059
|
+
"custom-pattern",
|
|
3060
|
+
"custom-invalid-message"
|
|
3061
|
+
];
|
|
3062
|
+
}
|
|
3063
|
+
constructor() {
|
|
3064
|
+
super(), this._values = [], this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null, this._customError = "";
|
|
3065
|
+
try {
|
|
3066
|
+
this._internals = this.attachInternals();
|
|
3067
|
+
} catch {
|
|
3068
|
+
this._internals = null;
|
|
3069
|
+
}
|
|
3070
|
+
}
|
|
3071
|
+
connectedCallback() {
|
|
3072
|
+
if (!this._rendered) {
|
|
3073
|
+
if (!this._valuesInit && !this._optionsProp && !this._values.length) {
|
|
3074
|
+
let e = this.getAttribute("value");
|
|
3075
|
+
if (e != null && e !== "") this._values = e.split(",").map((e) => e.trim()).filter(Boolean);
|
|
3076
|
+
else {
|
|
3077
|
+
let e = [...this.querySelectorAll(":scope > wui-option[selected]")].map((e) => e.getAttribute("value") ?? e.textContent.trim());
|
|
3078
|
+
e.length && (this._values = e.map(String));
|
|
3079
|
+
}
|
|
3080
|
+
}
|
|
3081
|
+
this._valuesInit = !0, this._defaultCaptured ||= (this._defaultValues = this._values.slice(), !0), this.render();
|
|
3082
|
+
return;
|
|
3083
|
+
}
|
|
3084
|
+
this._bindGlobal?.();
|
|
3085
|
+
}
|
|
3086
|
+
formResetCallback() {
|
|
3087
|
+
this.values = (this._defaultValues || []).slice();
|
|
3088
|
+
let e = this.querySelector("[data-input]");
|
|
3089
|
+
e && (e.value = ""), this._setCustomError("");
|
|
3090
|
+
}
|
|
3091
|
+
attributeChangedCallback(e) {
|
|
3092
|
+
if (e === "aria-invalid") {
|
|
3093
|
+
this._syncInvalid();
|
|
3094
|
+
return;
|
|
3095
|
+
}
|
|
3096
|
+
e === "custom-pattern" || e === "custom-invalid-message" || this._rendered && this.render();
|
|
3097
|
+
}
|
|
3098
|
+
_syncInvalid() {
|
|
3099
|
+
let e = this.querySelector(".search-select-control");
|
|
3100
|
+
e && (this.hasAttribute("aria-invalid") || this._customError ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
3101
|
+
}
|
|
3102
|
+
get values() {
|
|
3103
|
+
return this._values.slice();
|
|
3104
|
+
}
|
|
3105
|
+
set values(e) {
|
|
3106
|
+
this._values = Array.isArray(e) ? e.map(String) : [], f(this, this._values.join(",")), this._rendered && (this._renderControl(), this._renderOptions(this._query()));
|
|
3107
|
+
}
|
|
3108
|
+
set options(e) {
|
|
3109
|
+
if (this._optionsProp = Array.isArray(e) ? e : null, this._rendered && this._allowCustom) {
|
|
3110
|
+
this._renderControl(), this._renderOptions(this._query());
|
|
3111
|
+
return;
|
|
3112
|
+
}
|
|
3113
|
+
this.isConnected && this.render();
|
|
3114
|
+
}
|
|
3115
|
+
get options() {
|
|
3116
|
+
return this._readOptions();
|
|
3117
|
+
}
|
|
3118
|
+
get validateCustom() {
|
|
3119
|
+
return this._validateCustom ?? null;
|
|
3120
|
+
}
|
|
3121
|
+
set validateCustom(e) {
|
|
3122
|
+
this._validateCustom = typeof e == "function" ? e : null;
|
|
3123
|
+
}
|
|
3124
|
+
get _allowCustom() {
|
|
3125
|
+
return this.hasAttribute("allow-custom");
|
|
3126
|
+
}
|
|
3127
|
+
_query() {
|
|
3128
|
+
let e = this.querySelector(this._allowCustom ? "[data-input]" : ".search-select-input");
|
|
3129
|
+
return e ? e.value : "";
|
|
3130
|
+
}
|
|
3131
|
+
_snapshotDeclared() {
|
|
3132
|
+
if (this._declared) return;
|
|
3133
|
+
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
3134
|
+
e.length && (this._declared = e.map((e) => {
|
|
3135
|
+
let t = {
|
|
3136
|
+
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
3137
|
+
label: e.innerHTML,
|
|
3138
|
+
icon: e.getAttribute("icon") || void 0,
|
|
3139
|
+
[g]: !0,
|
|
3140
|
+
selected: e.hasAttribute("selected")
|
|
3141
|
+
};
|
|
3142
|
+
for (let [n, r] of be) {
|
|
3143
|
+
let i = e.getAttribute(n);
|
|
3144
|
+
i && (t[r] = i);
|
|
3145
|
+
}
|
|
3146
|
+
return e.hasAttribute("disabled") && (t.disabled = !0), t;
|
|
3147
|
+
}));
|
|
3148
|
+
}
|
|
3149
|
+
_readOptions() {
|
|
3150
|
+
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
3151
|
+
}
|
|
3152
|
+
_labelFor(e) {
|
|
3153
|
+
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
3154
|
+
return t ? t.label : e;
|
|
3155
|
+
}
|
|
3156
|
+
_labelHtmlFor(e) {
|
|
3157
|
+
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
3158
|
+
return t ? x(t) : _(e);
|
|
3159
|
+
}
|
|
3160
|
+
render() {
|
|
3161
|
+
this._snapshotDeclared();
|
|
3162
|
+
let e = this._allowCustom, t = this.hasAttribute("searchable") && !e, n = this.getAttribute("search-placeholder") || "Search…", r = this.getAttribute("icon"), i = this.getAttribute("size"), a = i === "sm" ? " search-select-sm" : i === "lg" ? " search-select-lg" : "";
|
|
3163
|
+
f(this, this._values.join(",")), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
|
|
3164
|
+
let o = `${this.id}-listbox`;
|
|
3165
|
+
this._listboxId = o;
|
|
3166
|
+
let s = this.hasAttribute("disabled");
|
|
3167
|
+
if (e) {
|
|
3168
|
+
let e = `${this.id}-custom-error`;
|
|
3169
|
+
this.innerHTML = `
|
|
3170
|
+
<div class="search-select${a}">
|
|
3171
|
+
<div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : ""}>
|
|
3172
|
+
${r ? m(r, { className: "search-select-icon" }) : ""}
|
|
3173
|
+
<div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(o)}" aria-label="${W(this._accessibleName())}" aria-describedby="${W(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
|
|
3174
|
+
${m("chevron-down", { className: "search-select-caret" })}
|
|
3175
|
+
</div>
|
|
3176
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(o)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
3177
|
+
<div class="search-select-options"></div>
|
|
3178
|
+
</div>
|
|
3179
|
+
</div>
|
|
3180
|
+
<div class="field-error wui-ms-custom-error" id="${W(e)}" aria-live="polite" hidden></div>`;
|
|
3181
|
+
} else this.innerHTML = `
|
|
3182
|
+
<div class="search-select${a}">
|
|
3183
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(o)}" aria-label="${W(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
|
|
3184
|
+
${r ? m(r, { className: "search-select-icon" }) : ""}
|
|
3185
|
+
<div class="ms-chips" data-chips></div>
|
|
3186
|
+
${m("chevron-down", { className: "search-select-caret" })}
|
|
3187
|
+
</div>
|
|
3188
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(o)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
3189
|
+
${t ? `<div class="search-select-search">${m("search")}<input class="search-select-input" placeholder="${W(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${m("x")}</button></div>` : ""}
|
|
3190
|
+
<div class="search-select-options"></div>
|
|
3191
|
+
<div class="search-select-empty" hidden>No matches</div>
|
|
3192
|
+
</div>
|
|
3193
|
+
</div>`;
|
|
3194
|
+
this._rendered = !0, this._customError = "", f(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
3195
|
+
}
|
|
3196
|
+
_renderControl() {
|
|
3197
|
+
let e = this.querySelector("[data-chips]");
|
|
3198
|
+
if (!e) return;
|
|
3199
|
+
let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${W(e)}" aria-label="Remove ${W(De(this._labelFor(e)))}">${m("x")}</button></span>`).join("");
|
|
3200
|
+
if (n) {
|
|
3201
|
+
for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
|
|
3202
|
+
n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
|
|
3203
|
+
return;
|
|
3204
|
+
}
|
|
3205
|
+
if (!this._values.length) {
|
|
3206
|
+
e.innerHTML = `<span class="search-select-placeholder">${_(t)}</span>`;
|
|
3207
|
+
return;
|
|
3208
|
+
}
|
|
3209
|
+
e.innerHTML = r, this._collapseChips();
|
|
3210
|
+
}
|
|
3211
|
+
_collapseChips() {
|
|
3212
|
+
let e = this.querySelector("[data-chips]");
|
|
3213
|
+
if (!e || !this.hasAttribute("collapse-chips") || !this._values.length) return;
|
|
3214
|
+
e.querySelector(".chip-more")?.remove();
|
|
3215
|
+
let t = [...e.querySelectorAll(":scope > .chip:not(.chip-more)")];
|
|
3216
|
+
for (let e of t) e.style.display = "";
|
|
3217
|
+
if (!t.length) return;
|
|
3218
|
+
let n = e.clientWidth, r = (e) => e.offsetLeft + e.offsetWidth;
|
|
3219
|
+
if (r(t[t.length - 1]) <= n) return;
|
|
3220
|
+
let i = document.createElement("span");
|
|
3221
|
+
i.className = "chip chip-sm chip-more", i.textContent = `+${t.length}`, t[t.length - 1].after(i);
|
|
3222
|
+
let a = i.offsetWidth + 6, o = 0;
|
|
3223
|
+
for (let e of t) if (r(e) <= n - a) o += 1;
|
|
3224
|
+
else break;
|
|
3225
|
+
o < 1 && (o = 1);
|
|
3226
|
+
for (let e = o; e < t.length; e += 1) t[e].style.display = "none";
|
|
3227
|
+
i.textContent = `+${t.length - o}`;
|
|
3228
|
+
}
|
|
3229
|
+
_matches(e, t) {
|
|
3230
|
+
return De(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
|
|
3231
|
+
}
|
|
3232
|
+
_optionNamed(e) {
|
|
3233
|
+
let t = e.trim().toLowerCase();
|
|
3234
|
+
return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || De(e.label).trim().toLowerCase() === t);
|
|
3235
|
+
}
|
|
3236
|
+
_renderOptions(e) {
|
|
3237
|
+
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
3238
|
+
if (!t) return;
|
|
3239
|
+
let r = (e || "").trim(), i = r.toLowerCase(), a = this._readOptions();
|
|
3240
|
+
i && (a = a.filter((e) => this._matches(e, i)));
|
|
3241
|
+
let o = this._listboxId || `${this.id || "wui-multiselect"}-listbox`, s = this._allowCustom && r && !this._optionNamed(r), c = a.map((e, t) => {
|
|
3242
|
+
let n = this._values.includes(String(e.value)), r = `${o}-opt-${t}`;
|
|
3243
|
+
return xe(e) ? we(e, r, n) : `<button type="button" role="option" id="${W(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${x(e)}</span><span class="ms-check">${m("check")}</span></button>`;
|
|
3244
|
+
});
|
|
3245
|
+
s && c.push(`<button type="button" role="option" id="${W(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${W(r)}" data-custom="true" aria-selected="false">Add “${_(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
|
|
3246
|
+
}
|
|
3247
|
+
_combobox() {
|
|
3248
|
+
return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
|
|
3249
|
+
}
|
|
3250
|
+
_setCustomError(e) {
|
|
3251
|
+
this._customError = e || "";
|
|
3252
|
+
let t = this.querySelector(".wui-ms-custom-error"), n = this.querySelector("[data-input]");
|
|
3253
|
+
t && (t.textContent = this._customError, t.hidden = !this._customError), n && (this._customError ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid")), this._syncInvalid();
|
|
3254
|
+
}
|
|
3255
|
+
_customRefusal(e) {
|
|
3256
|
+
let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
|
|
3257
|
+
if (n) {
|
|
3258
|
+
let r = Ee(n);
|
|
3259
|
+
if (r && !r.test(e)) return t;
|
|
3260
|
+
}
|
|
3261
|
+
let r = this._validateCustom;
|
|
3262
|
+
if (r) {
|
|
3263
|
+
let n = r(e);
|
|
3264
|
+
return n === !0 ? "" : typeof n == "string" && n ? n : t;
|
|
3265
|
+
}
|
|
3266
|
+
return "";
|
|
3267
|
+
}
|
|
3268
|
+
_commitTyped(e) {
|
|
3269
|
+
let t = e.trim().replace(/,+$/, "").trim();
|
|
3270
|
+
if (!t) return "";
|
|
3271
|
+
let n = this._optionNamed(t), r;
|
|
3272
|
+
if (n) {
|
|
3273
|
+
if (n.disabled) return n.disabledHint || this.getAttribute("custom-invalid-message") || "That option is not available.";
|
|
3274
|
+
r = String(n.value);
|
|
3275
|
+
} else {
|
|
3276
|
+
let e = this._customRefusal(t);
|
|
3277
|
+
if (e) return e;
|
|
3278
|
+
r = t;
|
|
3279
|
+
}
|
|
3280
|
+
let i = r.toLowerCase();
|
|
3281
|
+
return this._values.some((e) => e.toLowerCase() === i) || (this._values = [...this._values, r]), "";
|
|
3282
|
+
}
|
|
3283
|
+
_wire() {
|
|
3284
|
+
this._teardown();
|
|
3285
|
+
let e = this.querySelector(".search-select-control"), t = this.querySelector(".search-select-menu"), n = this.querySelector(".search-select-input"), r = this.querySelector(".search-select-clear"), i = this.querySelector(".search-select-options"), a = this._allowCustom, o = a ? this.querySelector("[data-input]") : null, s = o || e;
|
|
3286
|
+
if (!e || !t) return;
|
|
3287
|
+
let u = () => this.hasAttribute("disabled"), d = () => c(e, t, { matchWidth: !0 }), p = () => [...this.querySelectorAll(".search-select-option")], m = () => p().filter((e) => !e.hidden), g = (e) => {
|
|
3288
|
+
let t = m();
|
|
3289
|
+
this._active = e;
|
|
3290
|
+
for (let e of p()) e.classList.remove("is-active");
|
|
3291
|
+
e >= 0 && t[e] ? (t[e].classList.add("is-active"), t[e].scrollIntoView({ block: "nearest" }), s.setAttribute("aria-activedescendant", t[e].id)) : s.removeAttribute("aria-activedescendant");
|
|
3292
|
+
}, _ = !1, v = () => a ? _ : !t.hidden, y = () => {
|
|
3293
|
+
let n = _ && p().length > 0, r = t.hidden;
|
|
3294
|
+
t.hidden = !n, s.setAttribute("aria-expanded", String(n)), e.classList.toggle("open", n), n && r && d();
|
|
3295
|
+
};
|
|
3296
|
+
this._syncCustomMenu = a ? y : null;
|
|
3297
|
+
let b = () => {
|
|
3298
|
+
if (!u()) {
|
|
3299
|
+
if (a) {
|
|
3300
|
+
_ = !0, y();
|
|
3301
|
+
return;
|
|
3302
|
+
}
|
|
3303
|
+
t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), d(), n && (n.value = "", this._renderOptions(""), n.focus());
|
|
3304
|
+
}
|
|
3305
|
+
}, x = () => {
|
|
3306
|
+
a ? (_ = !1, y()) : (t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open")), g(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
|
|
3307
|
+
}, S = () => {
|
|
3308
|
+
f(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
3309
|
+
}, C = (e) => {
|
|
3310
|
+
let t = String(e);
|
|
3311
|
+
if (this._values.includes(t)) this._values = this._values.filter((e) => e !== t);
|
|
3312
|
+
else if (a && this._values.some((e) => e.toLowerCase() === t.toLowerCase())) return;
|
|
3313
|
+
else this._values = [...this._values, t];
|
|
3314
|
+
this._renderControl(), this._renderOptions(this._query()), S();
|
|
3315
|
+
}, w = (e) => {
|
|
3316
|
+
this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), S();
|
|
3317
|
+
}, T = (e, { quiet: t = !1 } = {}) => {
|
|
3318
|
+
let n = this._values.length, r = U(e, ye) ? _e(e, ye) : [e], i = [], a = "";
|
|
3319
|
+
for (let e of r) {
|
|
3320
|
+
let t = this._commitTyped(e);
|
|
3321
|
+
t && (i.push(e.trim()), a ||= t);
|
|
3322
|
+
}
|
|
3323
|
+
t && i.length || (o.value = i.join(", "), this._setCustomError(a), this._values.length !== n && (this._renderControl(), S()), this._renderOptions(o.value));
|
|
3324
|
+
}, E = (e) => {
|
|
3325
|
+
if (!(!e || e.getAttribute("aria-disabled") === "true")) {
|
|
3326
|
+
if (e.dataset.custom === "true") {
|
|
3327
|
+
T(e.dataset.value);
|
|
3328
|
+
return;
|
|
3329
|
+
}
|
|
3330
|
+
C(e.dataset.value), o?.value && (o.value = "", this._setCustomError(""), this._renderOptions(""));
|
|
3331
|
+
}
|
|
3332
|
+
};
|
|
3333
|
+
e.addEventListener("click", (e) => {
|
|
3334
|
+
if (u()) return;
|
|
3335
|
+
let t = e.target.closest("[data-remove]");
|
|
3336
|
+
if (t) {
|
|
3337
|
+
e.stopPropagation(), w(t.dataset.remove), o?.focus();
|
|
3338
|
+
return;
|
|
3339
|
+
}
|
|
3340
|
+
if (o) {
|
|
3341
|
+
let t = v();
|
|
3342
|
+
e.target !== o && o.focus(), e.target === o || !t ? b() : x();
|
|
3343
|
+
return;
|
|
3344
|
+
}
|
|
3345
|
+
v() ? x() : b();
|
|
3346
|
+
}), i.addEventListener("click", (e) => {
|
|
3347
|
+
let t = e.target.closest(".search-select-option");
|
|
3348
|
+
t && (E(t), (o || n)?.focus());
|
|
3349
|
+
}), i.addEventListener("mousemove", (e) => {
|
|
3350
|
+
let t = e.target.closest(".search-select-option");
|
|
3351
|
+
t && g(m().indexOf(t));
|
|
3352
|
+
}), i.addEventListener("mouseleave", () => g(-1)), i.addEventListener("error", (e) => {
|
|
3353
|
+
e.target?.classList?.contains("avatar-img") && e.target.remove();
|
|
3354
|
+
}, !0), n?.addEventListener("input", () => {
|
|
3355
|
+
this._renderOptions(n.value), r && (r.hidden = !n.value), g(-1);
|
|
3356
|
+
}), this._navHandler = h({
|
|
3357
|
+
getVisibleOptions: m,
|
|
3358
|
+
getActive: () => this._active,
|
|
3359
|
+
setActive: (e) => g(e),
|
|
3360
|
+
onEnter: (e) => {
|
|
3361
|
+
e ? E(e) : o?.value.trim() && T(o.value);
|
|
3362
|
+
},
|
|
3363
|
+
onEscape: () => {
|
|
3364
|
+
this._navHandler.clearTypeahead(), x(), o || e.focus();
|
|
3365
|
+
}
|
|
3366
|
+
});
|
|
3367
|
+
let D = (e) => {
|
|
3368
|
+
let t = o || n;
|
|
3369
|
+
if (e.key === "Backspace" && !t?.value && this._values.length) {
|
|
3370
|
+
w(this._values[this._values.length - 1]);
|
|
3371
|
+
return;
|
|
3372
|
+
}
|
|
3373
|
+
this._navHandler.handler(e);
|
|
3374
|
+
};
|
|
3375
|
+
if (n?.addEventListener("keydown", D), r?.addEventListener("click", () => {
|
|
3376
|
+
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
3377
|
+
}), o) {
|
|
3378
|
+
let t = (e) => {
|
|
3379
|
+
e.target !== o && e.preventDefault();
|
|
3380
|
+
};
|
|
3381
|
+
i.addEventListener("mousedown", t), e.addEventListener("mousedown", t), o.addEventListener("focus", () => b()), o.addEventListener("input", () => {
|
|
3382
|
+
this._customError && this._setCustomError(""), this._renderOptions(o.value), b();
|
|
3383
|
+
}), o.addEventListener("keydown", (e) => {
|
|
3384
|
+
if (e.key === "," && o.value.trim()) {
|
|
3385
|
+
e.preventDefault(), T(o.value);
|
|
3386
|
+
return;
|
|
3387
|
+
}
|
|
3388
|
+
if (e.key === "Enter") {
|
|
3389
|
+
if (this._active < 0 && !o.value.trim()) return;
|
|
3390
|
+
this._navHandler.handler(e);
|
|
3391
|
+
return;
|
|
3392
|
+
}
|
|
3393
|
+
(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), D(e);
|
|
3394
|
+
}), o.addEventListener("paste", (e) => {
|
|
3395
|
+
let t = e.clipboardData?.getData("text/plain") ?? "";
|
|
3396
|
+
U(t, ye) && (e.preventDefault(), T(`${o.value}${t}`));
|
|
3397
|
+
}), o.addEventListener("blur", (e) => {
|
|
3398
|
+
e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && T(o.value, { quiet: !0 }), x());
|
|
3399
|
+
});
|
|
3400
|
+
} else e.addEventListener("keydown", (e) => {
|
|
3401
|
+
if (v()) {
|
|
3402
|
+
D(e);
|
|
3403
|
+
return;
|
|
3404
|
+
}
|
|
3405
|
+
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
|
|
3406
|
+
});
|
|
3407
|
+
this._bindGlobal = () => {
|
|
3408
|
+
this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
|
|
3409
|
+
v() && !this.contains(e.target) && x();
|
|
3410
|
+
}, document.addEventListener("click", this._onDocClick), l(this, () => {
|
|
3411
|
+
v() && d();
|
|
3412
|
+
});
|
|
3413
|
+
}, this._bindGlobal();
|
|
3414
|
+
}
|
|
3415
|
+
_teardown() {
|
|
3416
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this), this._navHandler?.teardown();
|
|
3417
|
+
}
|
|
3418
|
+
disconnectedCallback() {
|
|
3419
|
+
this._teardown(), this._ro?.disconnect(), this._ro = null;
|
|
3420
|
+
}
|
|
3421
|
+
}, ye = [
|
|
3422
|
+
",",
|
|
3423
|
+
";",
|
|
3424
|
+
"\n",
|
|
3425
|
+
" "
|
|
3426
|
+
], be = [
|
|
3427
|
+
["description", "description"],
|
|
3428
|
+
["avatar", "avatar"],
|
|
3429
|
+
["initials", "initials"],
|
|
3430
|
+
["disabled-hint", "disabledHint"]
|
|
3431
|
+
], xe = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), Se = (e) => {
|
|
3432
|
+
let t = String(e ?? "").trim();
|
|
3433
|
+
return /^(https?:)?\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t) ? t : "";
|
|
3434
|
+
}, Ce = (e) => {
|
|
3435
|
+
let t = Se(e.avatar);
|
|
3436
|
+
return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${_(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${W(t)}" alt="" />` : ""}</span>`;
|
|
3437
|
+
}, we = (e, t, n) => {
|
|
3438
|
+
let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${_(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${_(e.disabledHint)}</span>` : "";
|
|
3439
|
+
return `<button type="button" role="option" id="${W(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${x(e)}</span>${i}</span>${a}${Ce(e)}<span class="ms-check">${m("check")}</span></button>`;
|
|
3440
|
+
}, Te = /* @__PURE__ */ new Map(), Ee = (e) => {
|
|
3441
|
+
if (Te.has(e)) return Te.get(e);
|
|
3442
|
+
let t = null;
|
|
3443
|
+
try {
|
|
3444
|
+
t = RegExp(`^(?:${e})$`, "u");
|
|
3445
|
+
} catch {
|
|
3446
|
+
console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`);
|
|
3447
|
+
}
|
|
3448
|
+
return Te.set(e, t), t;
|
|
3449
|
+
}, W = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), De = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Oe = /[^0-9]/g, ke = /[^0-9a-zA-Z]/g, Ae = class extends e {
|
|
3450
|
+
static formAssociated = !0;
|
|
3451
|
+
static get observedAttributes() {
|
|
3452
|
+
return [
|
|
3453
|
+
"value",
|
|
3454
|
+
"length",
|
|
3455
|
+
"mode",
|
|
3456
|
+
"disabled",
|
|
3457
|
+
"aria-label"
|
|
3458
|
+
];
|
|
3459
|
+
}
|
|
3460
|
+
get length() {
|
|
3461
|
+
let e = Number.parseInt(this.getAttribute("length") ?? "6", 10);
|
|
3462
|
+
return Number.isFinite(e) && e > 0 ? e : 6;
|
|
3463
|
+
}
|
|
3464
|
+
set length(e) {
|
|
3465
|
+
this.setAttribute("length", String(e));
|
|
3466
|
+
}
|
|
3467
|
+
get mode() {
|
|
3468
|
+
return this.getAttribute("mode") === "alphanumeric" ? "alphanumeric" : "numeric";
|
|
3469
|
+
}
|
|
3470
|
+
set mode(e) {
|
|
3471
|
+
this.setAttribute("mode", String(e ?? "numeric"));
|
|
3472
|
+
}
|
|
3473
|
+
get value() {
|
|
3474
|
+
return this._value ?? "";
|
|
3475
|
+
}
|
|
3476
|
+
set value(e) {
|
|
3477
|
+
this._value = this._clean(e), f(this, this._value), this._paint();
|
|
3478
|
+
}
|
|
3479
|
+
_clean(e) {
|
|
3480
|
+
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? ke : Oe, "").slice(0, this.length);
|
|
3481
|
+
}
|
|
3482
|
+
constructor() {
|
|
3483
|
+
super();
|
|
3484
|
+
try {
|
|
3485
|
+
this._internals = this.attachInternals();
|
|
3486
|
+
} catch {
|
|
3487
|
+
this._internals = null;
|
|
3488
|
+
}
|
|
3489
|
+
}
|
|
3490
|
+
connectedCallback() {
|
|
3491
|
+
this._rendered ? this._onSelectionChange && document.addEventListener("selectionchange", this._onSelectionChange) : (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
|
|
3492
|
+
}
|
|
3493
|
+
formResetCallback() {
|
|
3494
|
+
this._value = this._defaultValue || "", f(this, this._value), this._paint();
|
|
3495
|
+
}
|
|
3496
|
+
attributeChangedCallback(e, t, n) {
|
|
3497
|
+
this._rendered && (e === "value" ? (this._value = this._clean(n), f(this, this._value), this._paint()) : this.render());
|
|
3498
|
+
}
|
|
3499
|
+
render() {
|
|
3500
|
+
this._value = this._clean(this.getAttribute("value") ?? this._value);
|
|
3501
|
+
let e = this.length, t = this.mode === "numeric", n = this.hasAttribute("disabled"), r = Array.from({ length: e }, () => "<span class=\"otp-slot\" aria-hidden=\"true\"></span>").join(""), i = this.getAttribute("aria-label"), a = i ? ` aria-label="${i.replace(/"/g, """)}"` : "";
|
|
3502
|
+
this.innerHTML = `
|
|
3503
|
+
<div class="otp">
|
|
3504
|
+
<input
|
|
3505
|
+
class="otp-field"
|
|
3506
|
+
type="text"
|
|
3507
|
+
autocomplete="one-time-code"
|
|
3508
|
+
inputmode="${t ? "numeric" : "text"}"
|
|
3509
|
+
${t ? "pattern=\"[0-9]*\"" : ""}${a}
|
|
3510
|
+
autocapitalize="off"
|
|
3511
|
+
autocorrect="off"
|
|
3512
|
+
spellcheck="false"
|
|
3513
|
+
${n ? "disabled" : ""} />
|
|
3514
|
+
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
3515
|
+
</div>`, this._rendered = !0, f(this, this._value), this._wire(), this._paint();
|
|
3516
|
+
}
|
|
3517
|
+
_refs() {
|
|
3518
|
+
return {
|
|
3519
|
+
input: this.querySelector(".otp-field"),
|
|
3520
|
+
slots: [...this.querySelectorAll(".otp-slot")]
|
|
3521
|
+
};
|
|
3522
|
+
}
|
|
3523
|
+
_paint() {
|
|
3524
|
+
let { input: e, slots: t } = this._refs();
|
|
3525
|
+
if (!e || !t.length) return;
|
|
3526
|
+
e.value !== this._value && (e.value = this._value);
|
|
3527
|
+
let n = e.selectionStart ?? this._value.length, r = Math.min(n, t.length - 1), i = document.activeElement === e;
|
|
3528
|
+
t.forEach((e, t) => {
|
|
3529
|
+
e.textContent = this._value[t] ?? "", e.classList.toggle("filled", !!this._value[t]), e.classList.toggle("active", i && t === r);
|
|
3530
|
+
});
|
|
3531
|
+
}
|
|
3532
|
+
_wire() {
|
|
3533
|
+
let { input: e } = this._refs();
|
|
3534
|
+
if (!e) return;
|
|
3535
|
+
let t = (e) => {
|
|
3536
|
+
let t = this._clean(e), n = t !== this._value;
|
|
3537
|
+
this._value = t, f(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
|
|
3538
|
+
bubbles: !0,
|
|
3539
|
+
detail: t
|
|
3540
|
+
}));
|
|
3541
|
+
};
|
|
3542
|
+
e.addEventListener("input", () => {
|
|
3543
|
+
let n = e.value;
|
|
3544
|
+
if (this._value.length === this.length && n.length > this._value.length && n.startsWith(this._value)) {
|
|
3545
|
+
let e = this._clean(n.slice(this._value.length));
|
|
3546
|
+
if (e) {
|
|
3547
|
+
t(e);
|
|
3548
|
+
return;
|
|
3549
|
+
}
|
|
3550
|
+
}
|
|
3551
|
+
t(n);
|
|
3552
|
+
}), e.addEventListener("paste", (e) => {
|
|
3553
|
+
let n = e.clipboardData?.getData("text");
|
|
3554
|
+
n != null && (e.preventDefault(), t(n));
|
|
3555
|
+
});
|
|
3556
|
+
for (let t of [
|
|
3557
|
+
"keyup",
|
|
3558
|
+
"click",
|
|
3559
|
+
"blur",
|
|
3560
|
+
"select"
|
|
3561
|
+
]) e.addEventListener(t, () => this._paint());
|
|
3562
|
+
e.addEventListener("focus", () => {
|
|
3563
|
+
this._value.length === this.length && e.select(), this._paint();
|
|
3564
|
+
}), this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange), this._onSelectionChange = () => {
|
|
3565
|
+
document.activeElement === e && this._paint();
|
|
3566
|
+
}, document.addEventListener("selectionchange", this._onSelectionChange);
|
|
3567
|
+
}
|
|
3568
|
+
disconnectedCallback() {
|
|
3569
|
+
this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
|
|
3570
|
+
}
|
|
3571
|
+
}, je = {
|
|
3328
3572
|
AD: ["Europe/Andorra"],
|
|
3329
3573
|
AE: ["Asia/Dubai"],
|
|
3330
3574
|
AF: ["Asia/Kabul"],
|
|
@@ -3726,13 +3970,13 @@ var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), he = class extends
|
|
|
3726
3970
|
ZA: ["Africa/Johannesburg"],
|
|
3727
3971
|
ZM: ["Africa/Lusaka"],
|
|
3728
3972
|
ZW: ["Africa/Harare"]
|
|
3729
|
-
},
|
|
3730
|
-
for (let [e, t] of Object.entries(
|
|
3731
|
-
function
|
|
3732
|
-
let t =
|
|
3733
|
-
return t &&
|
|
3973
|
+
}, Me = new Set(j.map(([e]) => e)), Ne = /* @__PURE__ */ new Map();
|
|
3974
|
+
for (let [e, t] of Object.entries(je)) for (let n of t) Ne.set(n, e);
|
|
3975
|
+
function Pe(e) {
|
|
3976
|
+
let t = Ne.get(e);
|
|
3977
|
+
return t && Me.has(t) ? t : null;
|
|
3734
3978
|
}
|
|
3735
|
-
function
|
|
3979
|
+
function Fe(e) {
|
|
3736
3980
|
if (!e) return null;
|
|
3737
3981
|
let t;
|
|
3738
3982
|
try {
|
|
@@ -3740,9 +3984,9 @@ function ke(e) {
|
|
|
3740
3984
|
} catch {
|
|
3741
3985
|
return null;
|
|
3742
3986
|
}
|
|
3743
|
-
return t &&
|
|
3987
|
+
return t && Me.has(t) ? t : null;
|
|
3744
3988
|
}
|
|
3745
|
-
function
|
|
3989
|
+
function Ie() {
|
|
3746
3990
|
let e;
|
|
3747
3991
|
try {
|
|
3748
3992
|
e = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
@@ -3750,77 +3994,77 @@ function Ae() {
|
|
|
3750
3994
|
e = void 0;
|
|
3751
3995
|
}
|
|
3752
3996
|
let t = typeof navigator > "u" ? void 0 : navigator.language;
|
|
3753
|
-
return
|
|
3997
|
+
return Pe(e) || Fe(t) || "IN";
|
|
3754
3998
|
}
|
|
3755
3999
|
//#endregion
|
|
3756
4000
|
//#region src/WuiPhone.js
|
|
3757
|
-
var
|
|
3758
|
-
function
|
|
3759
|
-
return
|
|
4001
|
+
var Le = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, G = null, Re = null;
|
|
4002
|
+
function ze() {
|
|
4003
|
+
return G ? Promise.resolve(G) : (Re ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (G = {
|
|
3760
4004
|
AsYouType: e.AsYouType,
|
|
3761
4005
|
getExampleNumber: e.getExampleNumber,
|
|
3762
4006
|
isValidPhoneNumber: e.isValidPhoneNumber,
|
|
3763
4007
|
parsePhoneNumber: e.parsePhoneNumber,
|
|
3764
4008
|
examples: t.default || t
|
|
3765
|
-
},
|
|
4009
|
+
}, G)).catch(() => null), Re);
|
|
3766
4010
|
}
|
|
3767
|
-
function
|
|
3768
|
-
let n = `+${
|
|
4011
|
+
function Be(e, t) {
|
|
4012
|
+
let n = `+${M(e)}`;
|
|
3769
4013
|
return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
|
|
3770
4014
|
}
|
|
3771
|
-
function
|
|
3772
|
-
if (!
|
|
4015
|
+
function K(e, t) {
|
|
4016
|
+
if (!G || !t) return t;
|
|
3773
4017
|
try {
|
|
3774
|
-
return
|
|
4018
|
+
return Be(e, new G.AsYouType(e).input(`+${M(e)}${t}`)) || t;
|
|
3775
4019
|
} catch {
|
|
3776
4020
|
return t;
|
|
3777
4021
|
}
|
|
3778
4022
|
}
|
|
3779
|
-
function
|
|
4023
|
+
function Ve(e, t) {
|
|
3780
4024
|
if (t <= 0) return 0;
|
|
3781
4025
|
let n = 0;
|
|
3782
4026
|
for (let r = 0; r < e.length; r++) if (/[0-9]/.test(e[r]) && (n += 1, n === t)) return r + 1;
|
|
3783
4027
|
return e.length;
|
|
3784
4028
|
}
|
|
3785
|
-
function
|
|
3786
|
-
if (!
|
|
4029
|
+
function q(e) {
|
|
4030
|
+
if (!G) return null;
|
|
3787
4031
|
try {
|
|
3788
|
-
return
|
|
4032
|
+
return Be(e, G.getExampleNumber(e, G.examples)?.formatInternational()) || null;
|
|
3789
4033
|
} catch {
|
|
3790
4034
|
return null;
|
|
3791
4035
|
}
|
|
3792
4036
|
}
|
|
3793
|
-
function
|
|
3794
|
-
if (!
|
|
4037
|
+
function He(e) {
|
|
4038
|
+
if (!G || !e) return null;
|
|
3795
4039
|
try {
|
|
3796
|
-
if (!
|
|
3797
|
-
let t =
|
|
4040
|
+
if (!G.isValidPhoneNumber(e)) return !1;
|
|
4041
|
+
let t = G.parsePhoneNumber(e)?.getType?.();
|
|
3798
4042
|
return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
|
|
3799
4043
|
} catch {
|
|
3800
4044
|
return null;
|
|
3801
4045
|
}
|
|
3802
4046
|
}
|
|
3803
|
-
function
|
|
3804
|
-
if (!
|
|
4047
|
+
function Ue(e) {
|
|
4048
|
+
if (!G) return null;
|
|
3805
4049
|
try {
|
|
3806
|
-
let t =
|
|
4050
|
+
let t = G.getExampleNumber(e, G.examples);
|
|
3807
4051
|
return t?.nationalNumber ? t.nationalNumber.length : null;
|
|
3808
4052
|
} catch {
|
|
3809
4053
|
return null;
|
|
3810
4054
|
}
|
|
3811
4055
|
}
|
|
3812
|
-
function
|
|
4056
|
+
function We(e, t, n) {
|
|
3813
4057
|
try {
|
|
3814
|
-
let r =
|
|
4058
|
+
let r = G.parsePhoneNumber(t, e), i = r?.nationalNumber;
|
|
3815
4059
|
return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
|
|
3816
4060
|
} catch {
|
|
3817
4061
|
return null;
|
|
3818
4062
|
}
|
|
3819
4063
|
}
|
|
3820
|
-
function
|
|
3821
|
-
if (!
|
|
4064
|
+
function Ge(e) {
|
|
4065
|
+
if (!G || !e?.trim().startsWith("+")) return null;
|
|
3822
4066
|
try {
|
|
3823
|
-
let t = new
|
|
4067
|
+
let t = new G.AsYouType();
|
|
3824
4068
|
t.input(e.trim());
|
|
3825
4069
|
let n = t.getCountry();
|
|
3826
4070
|
return n ? {
|
|
@@ -3831,7 +4075,7 @@ function Re(e) {
|
|
|
3831
4075
|
return null;
|
|
3832
4076
|
}
|
|
3833
4077
|
}
|
|
3834
|
-
var
|
|
4078
|
+
var Ke = class extends e {
|
|
3835
4079
|
static formAssociated = !0;
|
|
3836
4080
|
static get observedAttributes() {
|
|
3837
4081
|
return [
|
|
@@ -3851,7 +4095,7 @@ var ze = class extends e {
|
|
|
3851
4095
|
} catch {
|
|
3852
4096
|
this._internals = null;
|
|
3853
4097
|
}
|
|
3854
|
-
this._defaultCountry =
|
|
4098
|
+
this._defaultCountry = Ie(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
|
|
3855
4099
|
}
|
|
3856
4100
|
connectedCallback() {
|
|
3857
4101
|
if (!this._rendered) {
|
|
@@ -3878,19 +4122,19 @@ var ze = class extends e {
|
|
|
3878
4122
|
this.value = this._defaultValue || "";
|
|
3879
4123
|
}
|
|
3880
4124
|
get value() {
|
|
3881
|
-
return this._national ? `+${
|
|
4125
|
+
return this._national ? `+${M(this._country)}${this._national}` : "";
|
|
3882
4126
|
}
|
|
3883
4127
|
set value(e) {
|
|
3884
|
-
let t = String(e ?? "").trim(), n =
|
|
4128
|
+
let t = String(e ?? "").trim(), n = Ge(t);
|
|
3885
4129
|
if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
|
|
3886
4130
|
else if (t.startsWith("+")) {
|
|
3887
|
-
let e = t.replace(/[^0-9]/g, ""), n = String(
|
|
4131
|
+
let e = t.replace(/[^0-9]/g, ""), n = String(M(this._country));
|
|
3888
4132
|
n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
|
|
3889
4133
|
} else this._national = t.replace(/[^0-9]/g, "");
|
|
3890
4134
|
n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
|
|
3891
4135
|
}
|
|
3892
4136
|
_syncMirror() {
|
|
3893
|
-
|
|
4137
|
+
f(this, this.value);
|
|
3894
4138
|
}
|
|
3895
4139
|
_emitInput() {
|
|
3896
4140
|
this.dispatchEvent(new Event("input", { bubbles: !0 }));
|
|
@@ -3900,27 +4144,27 @@ var ze = class extends e {
|
|
|
3900
4144
|
}
|
|
3901
4145
|
render() {
|
|
3902
4146
|
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._country = this.getAttribute("country") || this._country;
|
|
3903
|
-
let e = this.getAttribute("placeholder") ||
|
|
4147
|
+
let e = this.getAttribute("placeholder") || q(this._country) || "Enter phone number";
|
|
3904
4148
|
this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
|
|
3905
4149
|
let t = `${this.id}-listbox`;
|
|
3906
4150
|
this._listboxId = t;
|
|
3907
|
-
let n =
|
|
4151
|
+
let n = j.map(([e, n, r], i) => `<button type="button" role="option" id="${J(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${Le(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
|
|
3908
4152
|
this.innerHTML = `
|
|
3909
4153
|
<div class="phone-input-wrap">
|
|
3910
4154
|
<div class="phone-country-adornment">
|
|
3911
|
-
<button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${
|
|
3912
|
-
<span class="${
|
|
3913
|
-
${
|
|
3914
|
-
<span class="phone-dial" data-dial>+${
|
|
4155
|
+
<button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${J(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
4156
|
+
<span class="${Le(this._country)}" data-flag aria-hidden="true"></span>
|
|
4157
|
+
${m("chevron-down", { className: "phone-chevron" })}
|
|
4158
|
+
<span class="phone-dial" data-dial>+${M(this._country)}</span>
|
|
3915
4159
|
</button>
|
|
3916
|
-
<div class="country-dropdown-menu" role="listbox" id="${
|
|
3917
|
-
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${
|
|
4160
|
+
<div class="country-dropdown-menu" role="listbox" id="${J(t)}" tabindex="-1" hidden>
|
|
4161
|
+
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${m("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${J(t)}" aria-autocomplete="list" /></div>
|
|
3918
4162
|
<div class="country-list-scroll">${n}<div class="country-empty" hidden>No countries found</div></div>
|
|
3919
4163
|
</div>
|
|
3920
4164
|
</div>
|
|
3921
|
-
<input type="tel" class="input" placeholder="${
|
|
4165
|
+
<input type="tel" class="input" placeholder="${J(e)}" value="${J(K(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${J(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${J(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
3922
4166
|
</div>
|
|
3923
|
-
<div class="field-error" data-phone-error hidden></div>`, this._rendered = !0,
|
|
4167
|
+
<div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, f(this, this.value), this._wire();
|
|
3924
4168
|
}
|
|
3925
4169
|
_itemEls() {
|
|
3926
4170
|
return [...this.querySelectorAll(".country-dropdown-item")];
|
|
@@ -3930,9 +4174,9 @@ var ze = class extends e {
|
|
|
3930
4174
|
}
|
|
3931
4175
|
_wire() {
|
|
3932
4176
|
this._teardown();
|
|
3933
|
-
let e = this.querySelector(".country-toggle"), t = this.querySelector(".phone-input-wrap"), n = this.querySelector(".country-dropdown-menu"), r = this.querySelector(".dropdown-search-input"), i = this.querySelector(".country-list-scroll"), a = this.querySelector(".country-empty"), o = this.querySelector("input[type=tel]"),
|
|
4177
|
+
let e = this.querySelector(".country-toggle"), t = this.querySelector(".phone-input-wrap"), n = this.querySelector(".country-dropdown-menu"), r = this.querySelector(".dropdown-search-input"), i = this.querySelector(".country-list-scroll"), a = this.querySelector(".country-empty"), o = this.querySelector("input[type=tel]"), s = this.querySelector("[data-flag]"), d = this.querySelector("[data-dial]");
|
|
3934
4178
|
if (!e || !n) return;
|
|
3935
|
-
let f = () => !n.hidden, p = () =>
|
|
4179
|
+
let f = () => !n.hidden, p = () => c(t || e, n), m = (e) => {
|
|
3936
4180
|
let t = this._visibleItems();
|
|
3937
4181
|
this._active = e;
|
|
3938
4182
|
for (let e of this._itemEls()) e.classList.remove("is-active");
|
|
@@ -3949,12 +4193,12 @@ var ze = class extends e {
|
|
|
3949
4193
|
}
|
|
3950
4194
|
a && (a.hidden = n > 0);
|
|
3951
4195
|
}, v = (e) => {
|
|
3952
|
-
this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1),
|
|
4196
|
+
this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), s && (s.className = Le(e)), d && (d.textContent = `+${M(e)}`);
|
|
3953
4197
|
for (let t of this._itemEls()) {
|
|
3954
4198
|
let n = t.dataset.iso === e;
|
|
3955
4199
|
t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
|
|
3956
4200
|
}
|
|
3957
|
-
!this.getAttribute("placeholder") && o && (o.placeholder =
|
|
4201
|
+
!this.getAttribute("placeholder") && o && (o.placeholder = q(e) || "Enter phone number"), o && this._national && (o.value = K(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
|
|
3958
4202
|
}, y = (t) => {
|
|
3959
4203
|
let n = this._visibleItems();
|
|
3960
4204
|
if (t.key === "ArrowDown") {
|
|
@@ -3988,7 +4232,7 @@ var ze = class extends e {
|
|
|
3988
4232
|
let b = this.querySelector("[data-phone-error]"), x = (e) => {
|
|
3989
4233
|
if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), b) {
|
|
3990
4234
|
if (e) {
|
|
3991
|
-
let e =
|
|
4235
|
+
let e = q(this._country);
|
|
3992
4236
|
b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
|
|
3993
4237
|
}
|
|
3994
4238
|
b.hidden = !e;
|
|
@@ -3996,35 +4240,35 @@ var ze = class extends e {
|
|
|
3996
4240
|
};
|
|
3997
4241
|
o.addEventListener("input", (e) => {
|
|
3998
4242
|
e.stopPropagation();
|
|
3999
|
-
let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i =
|
|
4243
|
+
let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i = Ue(this._country);
|
|
4000
4244
|
if (i && r.length > i) {
|
|
4001
|
-
let e =
|
|
4245
|
+
let e = We(this._country, r, i);
|
|
4002
4246
|
e ? (n = Math.max(0, n - (r.length - e.length)), r = e) : r = r.slice(0, i);
|
|
4003
4247
|
}
|
|
4004
4248
|
this._national = r;
|
|
4005
|
-
let a =
|
|
4249
|
+
let a = K(this._country, this._national);
|
|
4006
4250
|
if (o.value !== a) {
|
|
4007
4251
|
o.value = a;
|
|
4008
|
-
let e =
|
|
4252
|
+
let e = Ve(a, Math.min(n, r.length));
|
|
4009
4253
|
o.setSelectionRange(e, e);
|
|
4010
4254
|
}
|
|
4011
|
-
this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national ||
|
|
4255
|
+
this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || He(this.value) === !0) && x(!1);
|
|
4012
4256
|
}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
|
|
4013
|
-
x(this._national.length > 0 &&
|
|
4257
|
+
x(this._national.length > 0 && He(this.value) === !1), this.value !== this._committedValue && this._emitChange();
|
|
4014
4258
|
}), o.addEventListener("paste", (e) => {
|
|
4015
|
-
let t =
|
|
4016
|
-
t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value =
|
|
4259
|
+
let t = Ge(e.clipboardData?.getData("text"));
|
|
4260
|
+
t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = K(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
|
|
4017
4261
|
}), this._bindGlobal = () => {
|
|
4018
4262
|
this._teardownGlobals?.(), this._onDocClick = (e) => {
|
|
4019
4263
|
f() && !this.contains(e.target) && g();
|
|
4020
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
4264
|
+
}, document.addEventListener("click", this._onDocClick), l(this, () => {
|
|
4021
4265
|
f() && p();
|
|
4022
4266
|
});
|
|
4023
4267
|
}, this._teardownGlobals = () => {
|
|
4024
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null),
|
|
4025
|
-
}, this._bindGlobal(),
|
|
4026
|
-
if (!(!e || !o.isConnected) && (this._national && (o.value =
|
|
4027
|
-
let e =
|
|
4268
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), u(this);
|
|
4269
|
+
}, this._bindGlobal(), ze().then((e) => {
|
|
4270
|
+
if (!(!e || !o.isConnected) && (this._national && (o.value = K(this._country, this._national)), !this.getAttribute("placeholder"))) {
|
|
4271
|
+
let e = q(this._country);
|
|
4028
4272
|
e && (o.placeholder = e);
|
|
4029
4273
|
}
|
|
4030
4274
|
}), this._syncMirror();
|
|
@@ -4035,213 +4279,7 @@ var ze = class extends e {
|
|
|
4035
4279
|
disconnectedCallback() {
|
|
4036
4280
|
this._teardown();
|
|
4037
4281
|
}
|
|
4038
|
-
},
|
|
4039
|
-
static formAssociated = !0;
|
|
4040
|
-
static get observedAttributes() {
|
|
4041
|
-
return [
|
|
4042
|
-
"value",
|
|
4043
|
-
"placeholder",
|
|
4044
|
-
"search-placeholder",
|
|
4045
|
-
"searchable",
|
|
4046
|
-
"disabled",
|
|
4047
|
-
"compact",
|
|
4048
|
-
"size",
|
|
4049
|
-
"clearable",
|
|
4050
|
-
"icon",
|
|
4051
|
-
"prefix",
|
|
4052
|
-
"aria-label",
|
|
4053
|
-
"aria-invalid"
|
|
4054
|
-
];
|
|
4055
|
-
}
|
|
4056
|
-
_accessibleName() {
|
|
4057
|
-
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
4058
|
-
}
|
|
4059
|
-
constructor() {
|
|
4060
|
-
super();
|
|
4061
|
-
try {
|
|
4062
|
-
this._internals = this.attachInternals();
|
|
4063
|
-
} catch {
|
|
4064
|
-
this._internals = null;
|
|
4065
|
-
}
|
|
4066
|
-
this._value = "", this._optionsProp = null, this._active = -1, this._typeahead = "", this._typeaheadTimer = null;
|
|
4067
|
-
}
|
|
4068
|
-
connectedCallback() {
|
|
4069
|
-
if (!this._rendered) {
|
|
4070
|
-
this.render();
|
|
4071
|
-
return;
|
|
4072
|
-
}
|
|
4073
|
-
this._bindGlobal?.();
|
|
4074
|
-
}
|
|
4075
|
-
attributeChangedCallback(e, t, n) {
|
|
4076
|
-
if (e === "value") {
|
|
4077
|
-
this.value = n;
|
|
4078
|
-
return;
|
|
4079
|
-
}
|
|
4080
|
-
if (e === "aria-invalid") {
|
|
4081
|
-
this._syncInvalid();
|
|
4082
|
-
return;
|
|
4083
|
-
}
|
|
4084
|
-
this._rendered && this.render();
|
|
4085
|
-
}
|
|
4086
|
-
_syncInvalid() {
|
|
4087
|
-
let e = this.querySelector(".search-select-control");
|
|
4088
|
-
e && (this.hasAttribute("aria-invalid") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"));
|
|
4089
|
-
}
|
|
4090
|
-
formResetCallback() {
|
|
4091
|
-
this.value = this._defaultValue || "";
|
|
4092
|
-
}
|
|
4093
|
-
get value() {
|
|
4094
|
-
return this._value;
|
|
4095
|
-
}
|
|
4096
|
-
set value(e) {
|
|
4097
|
-
this._value = e == null ? "" : String(e), d(this, this._value), this._syncSelected(), this._syncReset();
|
|
4098
|
-
}
|
|
4099
|
-
set options(e) {
|
|
4100
|
-
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
4101
|
-
}
|
|
4102
|
-
get options() {
|
|
4103
|
-
return this._readOptions();
|
|
4104
|
-
}
|
|
4105
|
-
_snapshotDeclared() {
|
|
4106
|
-
if (this._declared) return;
|
|
4107
|
-
let e = [...this.querySelectorAll(":scope > wui-option")];
|
|
4108
|
-
e.length && (this._declared = e.map((e) => ({
|
|
4109
|
-
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
4110
|
-
label: e.innerHTML,
|
|
4111
|
-
icon: e.getAttribute("icon") || void 0,
|
|
4112
|
-
[h]: !0,
|
|
4113
|
-
selected: e.hasAttribute("selected")
|
|
4114
|
-
})));
|
|
4115
|
-
}
|
|
4116
|
-
_readOptions() {
|
|
4117
|
-
return this._optionsProp ? this._optionsProp : (this._snapshotDeclared(), this._declared || []);
|
|
4118
|
-
}
|
|
4119
|
-
render() {
|
|
4120
|
-
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._snapshotDeclared();
|
|
4121
|
-
let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", a = this.getAttribute("icon"), o = this.getAttribute("prefix"), s = this.getAttribute("placeholder") || "Select...", c = this.getAttribute("search-placeholder") || "Search...", l = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
|
|
4122
|
-
l && (this._value = String(l.value)), d(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
|
|
4123
|
-
let u = `${this.id}-listbox`;
|
|
4124
|
-
this._listboxId = u;
|
|
4125
|
-
let f = e.map((e, t) => {
|
|
4126
|
-
let n = String(e.value) === String(this._value);
|
|
4127
|
-
return `<button type="button" role="option" id="${J(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${J(e.value)}" aria-selected="${n}">${v(e)}</button>`;
|
|
4128
|
-
}).join("");
|
|
4129
|
-
this.innerHTML = `
|
|
4130
|
-
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
|
|
4131
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${J(u)}" aria-label="${J(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
4132
|
-
${a ? p(a, { className: "search-select-icon" }) : ""}
|
|
4133
|
-
${o ? `<span class="search-select-prefix">${g(o)}</span>` : ""}
|
|
4134
|
-
<span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? v(l) : g(s)}</span>
|
|
4135
|
-
${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${p("x")}</span>` : ""}
|
|
4136
|
-
${p("chevron-down", { className: "search-select-caret" })}
|
|
4137
|
-
</button>
|
|
4138
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${J(u)}" tabindex="-1" hidden>
|
|
4139
|
-
${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${J(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
|
|
4140
|
-
<div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
|
|
4141
|
-
</div>
|
|
4142
|
-
</div>`, this._rendered = !0, d(this, this._value), this._wire(), this._syncReset();
|
|
4143
|
-
}
|
|
4144
|
-
_refs() {
|
|
4145
|
-
return {
|
|
4146
|
-
control: this.querySelector(".search-select-control"),
|
|
4147
|
-
menu: this.querySelector(".search-select-menu"),
|
|
4148
|
-
label: this.querySelector("[data-label]"),
|
|
4149
|
-
reset: this.querySelector(".search-select-reset"),
|
|
4150
|
-
search: this.querySelector(".search-select-input"),
|
|
4151
|
-
clear: this.querySelector(".search-select-clear"),
|
|
4152
|
-
empty: this.querySelector(".search-select-empty"),
|
|
4153
|
-
optionsWrap: this.querySelector(".search-select-options")
|
|
4154
|
-
};
|
|
4155
|
-
}
|
|
4156
|
-
_optionEls() {
|
|
4157
|
-
return [...this.querySelectorAll(".search-select-option")];
|
|
4158
|
-
}
|
|
4159
|
-
_visible() {
|
|
4160
|
-
return this._optionEls().filter((e) => !e.hidden);
|
|
4161
|
-
}
|
|
4162
|
-
_syncSelected() {
|
|
4163
|
-
let { label: e } = this._refs(), t = this._readOptions().find((e) => String(e.value) === String(this._value));
|
|
4164
|
-
for (let e of this._optionEls()) {
|
|
4165
|
-
let t = e.dataset.value === String(this._value);
|
|
4166
|
-
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
4167
|
-
}
|
|
4168
|
-
e && (e.innerHTML = t ? v(t) : g(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
|
|
4169
|
-
}
|
|
4170
|
-
_syncReset() {
|
|
4171
|
-
let { reset: e } = this._refs();
|
|
4172
|
-
e && (e.hidden = !(this.hasAttribute("clearable") && this._value !== "" && !this.hasAttribute("disabled")));
|
|
4173
|
-
}
|
|
4174
|
-
_wire() {
|
|
4175
|
-
this._teardown();
|
|
4176
|
-
let e = this._refs();
|
|
4177
|
-
if (!e.control || !e.menu) return;
|
|
4178
|
-
let t = () => {
|
|
4179
|
-
if (this.hasAttribute("compact")) {
|
|
4180
|
-
let t = e.control.getBoundingClientRect();
|
|
4181
|
-
e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px", s(e.control, e.menu);
|
|
4182
|
-
} else s(e.control, e.menu, { matchWidth: !0 });
|
|
4183
|
-
}, n = (t) => {
|
|
4184
|
-
let n = this._visible();
|
|
4185
|
-
this._active = t;
|
|
4186
|
-
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
4187
|
-
t >= 0 && n[t] ? (n[t].classList.add("is-active"), n[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", n[t].id)) : e.control.removeAttribute("aria-activedescendant");
|
|
4188
|
-
}, r = (n) => {
|
|
4189
|
-
let r = n.trim().toLowerCase(), i = 0;
|
|
4190
|
-
for (let e of this._optionEls()) {
|
|
4191
|
-
let t = !r || e.textContent.toLowerCase().includes(r);
|
|
4192
|
-
e.hidden = !t, t && (i += 1);
|
|
4193
|
-
}
|
|
4194
|
-
e.empty && (e.empty.hidden = i > 0), e.clear && (e.clear.hidden = !r), e.menu.hidden || t();
|
|
4195
|
-
}, i = () => !e.menu.hidden, a = () => {
|
|
4196
|
-
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), e.search && (e.search.value = "", r(""), e.search.focus()), n(this._optionEls().findIndex((e) => e.classList.contains("selected")));
|
|
4197
|
-
}, o = () => {
|
|
4198
|
-
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
|
|
4199
|
-
}, l = (t) => {
|
|
4200
|
-
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.control.focus();
|
|
4201
|
-
};
|
|
4202
|
-
this._navHandler = m({
|
|
4203
|
-
getVisibleOptions: () => this._visible(),
|
|
4204
|
-
getActive: () => this._active,
|
|
4205
|
-
setActive: (e) => n(e),
|
|
4206
|
-
onEnter: (e) => {
|
|
4207
|
-
e && l(e);
|
|
4208
|
-
},
|
|
4209
|
-
onEscape: () => {
|
|
4210
|
-
this._navHandler.clearTypeahead(), o(), e.control.focus();
|
|
4211
|
-
}
|
|
4212
|
-
}), e.reset?.addEventListener("click", (t) => {
|
|
4213
|
-
t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
|
|
4214
|
-
}), e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
|
|
4215
|
-
if (i()) {
|
|
4216
|
-
this._navHandler.handler(e);
|
|
4217
|
-
return;
|
|
4218
|
-
}
|
|
4219
|
-
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
|
|
4220
|
-
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
4221
|
-
let t = e.target.closest(".search-select-option");
|
|
4222
|
-
t && l(t);
|
|
4223
|
-
}), e.optionsWrap.addEventListener("mousemove", (e) => {
|
|
4224
|
-
let t = e.target.closest(".search-select-option");
|
|
4225
|
-
t && n(this._visible().indexOf(t));
|
|
4226
|
-
}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
|
|
4227
|
-
r(e.search.value), n(-1);
|
|
4228
|
-
}), e.clear?.addEventListener("click", () => {
|
|
4229
|
-
e.search.value = "", r(""), e.search.focus();
|
|
4230
|
-
}), e.menu.addEventListener("keydown", this._navHandler.handler), this._bindGlobal = () => {
|
|
4231
|
-
this._teardown(), this._onDocClick = (e) => {
|
|
4232
|
-
i() && !this.contains(e.target) && o();
|
|
4233
|
-
}, document.addEventListener("click", this._onDocClick), c(this, () => {
|
|
4234
|
-
i() && t();
|
|
4235
|
-
});
|
|
4236
|
-
}, this._bindGlobal();
|
|
4237
|
-
}
|
|
4238
|
-
_teardown() {
|
|
4239
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this), this._navHandler?.teardown();
|
|
4240
|
-
}
|
|
4241
|
-
disconnectedCallback() {
|
|
4242
|
-
this._teardown();
|
|
4243
|
-
}
|
|
4244
|
-
}, J = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), Ve = class extends e {
|
|
4282
|
+
}, J = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), qe = class extends e {
|
|
4245
4283
|
static formAssociated = !0;
|
|
4246
4284
|
static get observedAttributes() {
|
|
4247
4285
|
return [
|
|
@@ -4386,7 +4424,7 @@ var ze = class extends e {
|
|
|
4386
4424
|
aria-valuenow="${this._value}"
|
|
4387
4425
|
aria-valuetext="${this._formatValue(this._value)}"
|
|
4388
4426
|
${a ? "disabled" : ""}
|
|
4389
|
-
aria-label="${
|
|
4427
|
+
aria-label="${Je(this.getAttribute("aria-label") || "Value")}"
|
|
4390
4428
|
></button>
|
|
4391
4429
|
`}
|
|
4392
4430
|
${this.hasAttribute("show-value") ? n ? `<span class="slider-value">${this._formatValue(this._start)} – ${this._formatValue(this._end)}</span>` : `<span class="slider-value">${this._formatValue(this._value)}</span>` : ""}
|
|
@@ -4421,7 +4459,7 @@ var ze = class extends e {
|
|
|
4421
4459
|
this._isRange() ? this._syncRangeMirrors() : this._syncSingleMirror();
|
|
4422
4460
|
}
|
|
4423
4461
|
_syncSingleMirror() {
|
|
4424
|
-
this.getAttribute("name") &&
|
|
4462
|
+
this.getAttribute("name") && f(this, String(this._value));
|
|
4425
4463
|
}
|
|
4426
4464
|
_syncRangeMirrors() {
|
|
4427
4465
|
let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
|
|
@@ -4491,7 +4529,7 @@ var ze = class extends e {
|
|
|
4491
4529
|
}, Y = (e, t) => {
|
|
4492
4530
|
let n = Number.parseFloat(e);
|
|
4493
4531
|
return Number.isFinite(n) ? n : t;
|
|
4494
|
-
},
|
|
4532
|
+
}, Je = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), Ye = class extends e {
|
|
4495
4533
|
static formAssociated = !0;
|
|
4496
4534
|
_accessibleName() {
|
|
4497
4535
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
|
|
@@ -4557,17 +4595,17 @@ var ze = class extends e {
|
|
|
4557
4595
|
return this._values.slice();
|
|
4558
4596
|
}
|
|
4559
4597
|
set values(e) {
|
|
4560
|
-
this._values = Array.isArray(e) ? e.map(String) : [],
|
|
4598
|
+
this._values = Array.isArray(e) ? e.map(String) : [], f(this, this._values.join(",")), this._rendered && this._renderControl();
|
|
4561
4599
|
}
|
|
4562
4600
|
render() {
|
|
4563
4601
|
let e = this.getAttribute("size"), t = e === "sm" ? " search-select-sm" : e === "lg" ? " search-select-lg" : "";
|
|
4564
|
-
|
|
4602
|
+
f(this, this._values.join(",")), this.innerHTML = `
|
|
4565
4603
|
<div class="search-select${t}">
|
|
4566
4604
|
<div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
4567
4605
|
<input type="text" class="ms-input" data-input aria-label="${X(this._accessibleName())}" placeholder="${X(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
|
|
4568
4606
|
<div class="ms-chips" data-chips></div>
|
|
4569
4607
|
</div>
|
|
4570
|
-
</div>`, this._rendered = !0,
|
|
4608
|
+
</div>`, this._rendered = !0, f(this, this._values.join(",")), this._renderControl(), this._wire();
|
|
4571
4609
|
}
|
|
4572
4610
|
_renderControl() {
|
|
4573
4611
|
let e = this.querySelector("[data-chips]");
|
|
@@ -4576,15 +4614,15 @@ var ze = class extends e {
|
|
|
4576
4614
|
e.innerHTML = "";
|
|
4577
4615
|
return;
|
|
4578
4616
|
}
|
|
4579
|
-
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${
|
|
4617
|
+
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${Xe(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${m("x")}</button></span>`).join("");
|
|
4580
4618
|
}
|
|
4581
4619
|
}
|
|
4582
4620
|
_wire() {
|
|
4583
4621
|
this._teardown();
|
|
4584
4622
|
let e = this.querySelector(".search-select-control"), t = this.querySelector("[data-input]");
|
|
4585
4623
|
if (!e || !t) return;
|
|
4586
|
-
let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(
|
|
4587
|
-
|
|
4624
|
+
let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(he).filter(Boolean)), s = () => {
|
|
4625
|
+
f(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
4588
4626
|
}, c = (e) => {
|
|
4589
4627
|
let t = e.trim();
|
|
4590
4628
|
if (!t || i && this._values.length >= parseInt(i, 10)) return;
|
|
@@ -4611,13 +4649,13 @@ var ze = class extends e {
|
|
|
4611
4649
|
return;
|
|
4612
4650
|
}
|
|
4613
4651
|
e.key === "Backspace" && !t.value && this._values.length && (e.preventDefault(), l(this._values[this._values.length - 1])), e.key === "Escape" && (t.value = "");
|
|
4614
|
-
},
|
|
4652
|
+
}, d = (e) => {
|
|
4615
4653
|
e.preventDefault();
|
|
4616
4654
|
let n = e.clipboardData.getData("text/plain"), a = [];
|
|
4617
4655
|
for (let e of r) {
|
|
4618
|
-
let t =
|
|
4619
|
-
if (
|
|
4620
|
-
a.push(...
|
|
4656
|
+
let t = ge(e) ?? e;
|
|
4657
|
+
if (U(n, [t])) {
|
|
4658
|
+
a.push(..._e(n, [t]));
|
|
4621
4659
|
break;
|
|
4622
4660
|
}
|
|
4623
4661
|
}
|
|
@@ -4633,7 +4671,7 @@ var ze = class extends e {
|
|
|
4633
4671
|
return;
|
|
4634
4672
|
}
|
|
4635
4673
|
t.focus();
|
|
4636
|
-
}, this._onInputKey = u, this._onInputPaste =
|
|
4674
|
+
}, this._onInputKey = u, this._onInputPaste = d, e.addEventListener("click", this._onControlClick), t.addEventListener("keydown", this._onInputKey), t.addEventListener("paste", this._onInputPaste), this._onDocClick = (e) => {
|
|
4637
4675
|
this.contains(e.target) || t.blur();
|
|
4638
4676
|
}, document.addEventListener("click", this._onDocClick);
|
|
4639
4677
|
}
|
|
@@ -4645,18 +4683,18 @@ var ze = class extends e {
|
|
|
4645
4683
|
disconnectedCallback() {
|
|
4646
4684
|
this._teardown();
|
|
4647
4685
|
}
|
|
4648
|
-
},
|
|
4686
|
+
}, Xe = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), X = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), Ze = (e) => String(e).padStart(2, "0"), Qe = (e, t) => `${Ze(e)}:${Ze(t)}`, Z = (e) => {
|
|
4649
4687
|
let t = /^(\d{2}):(\d{2})$/.exec(e || "");
|
|
4650
4688
|
return t ? {
|
|
4651
4689
|
h: +t[1],
|
|
4652
4690
|
m: +t[2]
|
|
4653
4691
|
} : null;
|
|
4654
|
-
},
|
|
4692
|
+
}, $e = (e, t = "24") => {
|
|
4655
4693
|
if (!e) return "";
|
|
4656
|
-
if (t === "24") return
|
|
4694
|
+
if (t === "24") return Qe(e.h, e.m);
|
|
4657
4695
|
let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
|
|
4658
|
-
return `${n}:${
|
|
4659
|
-
},
|
|
4696
|
+
return `${n}:${Ze(e.m)} ${r}`;
|
|
4697
|
+
}, et = class extends e {
|
|
4660
4698
|
static formAssociated = !0;
|
|
4661
4699
|
static get observedAttributes() {
|
|
4662
4700
|
return [
|
|
@@ -4708,28 +4746,28 @@ var ze = class extends e {
|
|
|
4708
4746
|
return this._value;
|
|
4709
4747
|
}
|
|
4710
4748
|
set value(e) {
|
|
4711
|
-
this._value = e || "",
|
|
4749
|
+
this._value = e || "", f(this, this._value), this._syncTrigger();
|
|
4712
4750
|
}
|
|
4713
4751
|
render() {
|
|
4714
4752
|
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
|
|
4715
4753
|
let e = this.getAttribute("placeholder") || "Select time", t = Z(this._value), n = this.getAttribute("format") || "24", r = this.getAttribute("size"), i = r === "sm" ? " input-sm" : r === "lg" ? " input-lg" : "", a = this.getAttribute("aria-label"), o = this.getAttribute("aria-describedby");
|
|
4716
4754
|
this.innerHTML = `
|
|
4717
4755
|
<div class="timepicker">
|
|
4718
|
-
<button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${
|
|
4719
|
-
<span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ?
|
|
4720
|
-
${
|
|
4756
|
+
<button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${_(a)}"` : ""}${o ? ` aria-describedby="${_(o)}"` : ""}>
|
|
4757
|
+
<span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? $e(t, n) : _(e)}</span>
|
|
4758
|
+
${m("clock")}
|
|
4721
4759
|
</button>
|
|
4722
4760
|
<div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
|
|
4723
|
-
</div>`, this._rendered = !0,
|
|
4761
|
+
</div>`, this._rendered = !0, f(this, this._value), this._wire();
|
|
4724
4762
|
}
|
|
4725
4763
|
_syncFormValue() {
|
|
4726
|
-
|
|
4764
|
+
f(this, this._value);
|
|
4727
4765
|
}
|
|
4728
4766
|
_syncTrigger() {
|
|
4729
4767
|
let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
4730
4768
|
if (!t) return;
|
|
4731
4769
|
let n = Z(this._value), r = this.getAttribute("format") || "24";
|
|
4732
|
-
t.textContent = n ?
|
|
4770
|
+
t.textContent = n ? $e(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
|
|
4733
4771
|
}
|
|
4734
4772
|
_buildTimes() {
|
|
4735
4773
|
let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = Z(t) || {
|
|
@@ -4750,8 +4788,8 @@ var ze = class extends e {
|
|
|
4750
4788
|
if (!e) return;
|
|
4751
4789
|
let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Z(this._value), i = this._focus, a = "";
|
|
4752
4790
|
for (let e = 0; e < n.length; e++) {
|
|
4753
|
-
let o = n[e], s =
|
|
4754
|
-
a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${
|
|
4791
|
+
let o = n[e], s = Qe(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
|
|
4792
|
+
a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${$e(o, t)}</button>`;
|
|
4755
4793
|
}
|
|
4756
4794
|
e.innerHTML = a, this._focusActive();
|
|
4757
4795
|
}
|
|
@@ -4760,7 +4798,7 @@ var ze = class extends e {
|
|
|
4760
4798
|
t && !e.hidden && t.focus();
|
|
4761
4799
|
}
|
|
4762
4800
|
_position(e, t) {
|
|
4763
|
-
|
|
4801
|
+
c(e, t);
|
|
4764
4802
|
}
|
|
4765
4803
|
_onKey(e) {
|
|
4766
4804
|
let t = [...this.querySelector(".timepicker-pop").querySelectorAll(".timepicker-option")];
|
|
@@ -4838,18 +4876,18 @@ var ze = class extends e {
|
|
|
4838
4876
|
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
4839
4877
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
4840
4878
|
r() && e.key === "Escape" && this._close();
|
|
4841
|
-
}, document.addEventListener("keydown", this._onDocKey),
|
|
4879
|
+
}, document.addEventListener("keydown", this._onDocKey), l(this, () => {
|
|
4842
4880
|
r() && this._position(e, t);
|
|
4843
4881
|
});
|
|
4844
4882
|
}, this._bindGlobal(), this._syncFormValue();
|
|
4845
4883
|
}
|
|
4846
4884
|
_teardown() {
|
|
4847
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null),
|
|
4885
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), u(this), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
|
|
4848
4886
|
}
|
|
4849
4887
|
disconnectedCallback() {
|
|
4850
4888
|
this._teardown();
|
|
4851
4889
|
}
|
|
4852
|
-
},
|
|
4890
|
+
}, tt = "wui-wizard-step", nt = class extends e {
|
|
4853
4891
|
static get observedAttributes() {
|
|
4854
4892
|
return [
|
|
4855
4893
|
"active",
|
|
@@ -4883,7 +4921,7 @@ var ze = class extends e {
|
|
|
4883
4921
|
this._beforeNext = typeof e == "function" ? e : null;
|
|
4884
4922
|
}
|
|
4885
4923
|
get _steps() {
|
|
4886
|
-
return [...this.querySelectorAll(`:scope > ${
|
|
4924
|
+
return [...this.querySelectorAll(`:scope > ${tt}`)];
|
|
4887
4925
|
}
|
|
4888
4926
|
refresh() {
|
|
4889
4927
|
this._rendered && this._renderChrome();
|
|
@@ -4922,7 +4960,7 @@ var ze = class extends e {
|
|
|
4922
4960
|
}
|
|
4923
4961
|
_reconcileSteps() {
|
|
4924
4962
|
let e = this._steps, t = this._known;
|
|
4925
|
-
if (this._known = e,
|
|
4963
|
+
if (this._known = e, rt(e, t)) return e;
|
|
4926
4964
|
let n = (n) => new Set([...n].map((n) => e.indexOf(t[n])).filter((e) => e >= 0));
|
|
4927
4965
|
this._skipped = n(this._skipped), this._invalid = n(this._invalid);
|
|
4928
4966
|
let r = t[this._active];
|
|
@@ -4942,7 +4980,7 @@ var ze = class extends e {
|
|
|
4942
4980
|
_onStepsMutated() {
|
|
4943
4981
|
if (!this._rendered) return;
|
|
4944
4982
|
let e = this._steps;
|
|
4945
|
-
(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) &&
|
|
4983
|
+
(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && rt(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
|
|
4946
4984
|
}
|
|
4947
4985
|
_syncPanels(e) {
|
|
4948
4986
|
e.forEach((e, t) => {
|
|
@@ -4965,14 +5003,14 @@ var ze = class extends e {
|
|
|
4965
5003
|
let i = this.hasAttribute("non-linear");
|
|
4966
5004
|
return e.map((e, r) => {
|
|
4967
5005
|
let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
|
|
4968
|
-
u = a === "done" ?
|
|
4969
|
-
let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "",
|
|
4970
|
-
return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${h}`,
|
|
5006
|
+
u = a === "done" ? m("check") : a === "error" ? m("alert-triangle") : a === "skipped" ? m("minus") : c ? m(c) : String(l);
|
|
5007
|
+
let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", p = i || r < this._active, h = s ? `<span class="step-desc">${Q(s)}</span>` : "", g;
|
|
5008
|
+
return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${Q(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${Q(o)}</span>${h}`, p ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
|
|
4971
5009
|
}).join("");
|
|
4972
5010
|
}
|
|
4973
5011
|
_footerHtml(e) {
|
|
4974
5012
|
let t = this._active, n = e.length - 1, r = this.hasAttribute("disabled") ? " disabled" : "", i = e[t]?.hasAttribute("optional") || this.hasAttribute("skippable"), a = this.getAttribute("back-label") || "Back", o = this.getAttribute("next-label") || "Next", s = this.getAttribute("skip-label") || "Skip", c = this.getAttribute("finish-label") || "Finish";
|
|
4975
|
-
return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${
|
|
5013
|
+
return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${m("arrow-left", { className: "me-2" })}${Q(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${Q(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${Q(o)}${m("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${Q(c)}</button>`}</span>`;
|
|
4976
5014
|
}
|
|
4977
5015
|
_wire() {
|
|
4978
5016
|
this._teardown(), this._onHeaderClick = (e) => {
|
|
@@ -5046,7 +5084,7 @@ var ze = class extends e {
|
|
|
5046
5084
|
_reflectActive(e) {
|
|
5047
5085
|
this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
|
|
5048
5086
|
}
|
|
5049
|
-
},
|
|
5087
|
+
}, rt = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Q = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), it = class extends e {
|
|
5050
5088
|
static get observedAttributes() {
|
|
5051
5089
|
return [
|
|
5052
5090
|
"label",
|
|
@@ -5060,8 +5098,8 @@ var ze = class extends e {
|
|
|
5060
5098
|
let e = this.closest("wui-wizard");
|
|
5061
5099
|
e && typeof e.refresh == "function" && e.refresh();
|
|
5062
5100
|
}
|
|
5063
|
-
},
|
|
5064
|
-
async function
|
|
5101
|
+
}, at = 2e3;
|
|
5102
|
+
async function ot(e) {
|
|
5065
5103
|
try {
|
|
5066
5104
|
if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
|
|
5067
5105
|
} catch {}
|
|
@@ -5076,14 +5114,14 @@ async function et(e) {
|
|
|
5076
5114
|
}
|
|
5077
5115
|
//#endregion
|
|
5078
5116
|
//#region src/fileValidation.js
|
|
5079
|
-
var
|
|
5117
|
+
var st = "image/png,image/jpeg,image/webp", ct = 5, lt = {
|
|
5080
5118
|
"image/png": [".png"],
|
|
5081
5119
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
5082
5120
|
"image/webp": [".webp"],
|
|
5083
5121
|
"image/gif": [".gif"],
|
|
5084
5122
|
"image/svg+xml": [".svg"],
|
|
5085
5123
|
"application/pdf": [".pdf"]
|
|
5086
|
-
},
|
|
5124
|
+
}, ut = {
|
|
5087
5125
|
"image/png": "PNG",
|
|
5088
5126
|
"image/jpeg": "JPG",
|
|
5089
5127
|
"image/webp": "WEBP",
|
|
@@ -5097,7 +5135,7 @@ var tt = "image/png,image/jpeg,image/webp", nt = 5, rt = {
|
|
|
5097
5135
|
".gif": "GIF",
|
|
5098
5136
|
".svg": "SVG",
|
|
5099
5137
|
".pdf": "PDF"
|
|
5100
|
-
},
|
|
5138
|
+
}, dt = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ft = [
|
|
5101
5139
|
".png",
|
|
5102
5140
|
".jpg",
|
|
5103
5141
|
".jpeg",
|
|
@@ -5108,54 +5146,54 @@ var tt = "image/png,image/jpeg,image/webp", nt = 5, rt = {
|
|
|
5108
5146
|
".avif",
|
|
5109
5147
|
".heic"
|
|
5110
5148
|
];
|
|
5111
|
-
function
|
|
5149
|
+
function pt(e) {
|
|
5112
5150
|
if (!e) return !1;
|
|
5113
5151
|
let t = typeof e == "object" && e.type ? String(e.type).toLowerCase() : "";
|
|
5114
5152
|
if (t) return t.startsWith("image/");
|
|
5115
5153
|
let n = typeof e == "string" ? e : e.name || e.url || "", r = String(n).toLowerCase();
|
|
5116
|
-
return
|
|
5154
|
+
return ft.some((e) => r.endsWith(e));
|
|
5117
5155
|
}
|
|
5118
|
-
function
|
|
5119
|
-
let t =
|
|
5120
|
-
return t.length ? t.every((e) => e.startsWith(".") ?
|
|
5156
|
+
function mt(e) {
|
|
5157
|
+
let t = dt(e);
|
|
5158
|
+
return t.length ? t.every((e) => e.startsWith(".") ? ft.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
|
|
5121
5159
|
}
|
|
5122
|
-
function
|
|
5160
|
+
function ht(e) {
|
|
5123
5161
|
let t = [];
|
|
5124
|
-
for (let n of
|
|
5125
|
-
let e =
|
|
5162
|
+
for (let n of dt(e)) {
|
|
5163
|
+
let e = ut[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
5126
5164
|
t.includes(e) || t.push(e);
|
|
5127
5165
|
}
|
|
5128
5166
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
5129
5167
|
}
|
|
5130
|
-
function
|
|
5131
|
-
let n =
|
|
5168
|
+
function gt(e, t) {
|
|
5169
|
+
let n = dt(t);
|
|
5132
5170
|
if (!n.length) return !0;
|
|
5133
5171
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
5134
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
5172
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (lt[e] || []).some((e) => i.endsWith(e)));
|
|
5135
5173
|
}
|
|
5136
|
-
function
|
|
5174
|
+
function _t(e, t = {}) {
|
|
5137
5175
|
if (!e) return null;
|
|
5138
|
-
let n = t.accept === void 0 ?
|
|
5139
|
-
return
|
|
5176
|
+
let n = t.accept === void 0 ? st : t.accept, r = t.maxSizeMb === void 0 ? 5 : t.maxSizeMb;
|
|
5177
|
+
return gt(e, n) ? r > 0 && e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${ht(n)} file.`;
|
|
5140
5178
|
}
|
|
5141
5179
|
//#endregion
|
|
5142
5180
|
//#region src/passwordRules.js
|
|
5143
|
-
var
|
|
5181
|
+
var vt = {
|
|
5144
5182
|
minLength: 8,
|
|
5145
5183
|
uppercase: !0,
|
|
5146
5184
|
lowercase: !0,
|
|
5147
5185
|
digit: !0,
|
|
5148
5186
|
special: !0,
|
|
5149
5187
|
uniqueChars: 0
|
|
5150
|
-
},
|
|
5151
|
-
function
|
|
5152
|
-
return e === !0 || e == null ? { ...
|
|
5153
|
-
...
|
|
5188
|
+
}, yt = "Password Requirements";
|
|
5189
|
+
function bt(e) {
|
|
5190
|
+
return e === !0 || e == null ? { ...vt } : {
|
|
5191
|
+
...vt,
|
|
5154
5192
|
...e
|
|
5155
5193
|
};
|
|
5156
5194
|
}
|
|
5157
|
-
function
|
|
5158
|
-
let t =
|
|
5195
|
+
function xt(e) {
|
|
5196
|
+
let t = bt(e), n = [];
|
|
5159
5197
|
if (t.minLength > 0 && n.push({
|
|
5160
5198
|
key: "length",
|
|
5161
5199
|
label: `At least ${t.minLength} characters long`,
|
|
@@ -5186,25 +5224,25 @@ function ht(e) {
|
|
|
5186
5224
|
}
|
|
5187
5225
|
return n;
|
|
5188
5226
|
}
|
|
5189
|
-
function
|
|
5227
|
+
function St(e, t) {
|
|
5190
5228
|
let n = e == null ? "" : String(e);
|
|
5191
|
-
return
|
|
5229
|
+
return xt(t).map((e) => ({
|
|
5192
5230
|
key: e.key,
|
|
5193
5231
|
label: e.label,
|
|
5194
5232
|
met: e.test(n)
|
|
5195
5233
|
}));
|
|
5196
5234
|
}
|
|
5197
|
-
function
|
|
5198
|
-
return
|
|
5235
|
+
function Ct(e, t) {
|
|
5236
|
+
return St(e, t).every((e) => e.met);
|
|
5199
5237
|
}
|
|
5200
5238
|
//#endregion
|
|
5201
5239
|
//#region src/index.js
|
|
5202
5240
|
var $ = (e, t) => {
|
|
5203
5241
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
5204
5242
|
};
|
|
5205
|
-
function
|
|
5206
|
-
$("wui-select",
|
|
5243
|
+
function wt() {
|
|
5244
|
+
$("wui-select", N), $("wui-country-select", ce), $("wui-phone", Ke), $("wui-datepicker", le), $("wui-date-range", ue), $("wui-dock", de), $("wui-consent-banner", ie), $("wui-slider", qe), $("wui-timepicker", et), $("wui-autocomplete", S), $("wui-multiselect", ve), $("wui-taginput", Ye), $("wui-otp", Ae), $("wui-status-icon", i), $("wui-wizard-step", it), $("wui-wizard", nt);
|
|
5207
5245
|
}
|
|
5208
|
-
|
|
5246
|
+
wt();
|
|
5209
5247
|
//#endregion
|
|
5210
|
-
export {
|
|
5248
|
+
export { at as COPY_FEEDBACK_MS, st as DEFAULT_IMAGE_ACCEPT, ct as DEFAULT_MAX_SIZE_MB, vt as DEFAULT_PASSWORD_RULES, yt as DEFAULT_REQUIREMENTS_TITLE, r as STATUS_TONES, S as WuiAutocomplete, ie as WuiConsentBanner, ce as WuiCountrySelect, le as WuiDatePicker, ue as WuiDateRange, de as WuiDock, ve as WuiMultiSelect, Ae as WuiOtp, Ke as WuiPhone, N as WuiSelect, qe as WuiSlider, i as WuiStatusIcon, Ye as WuiTagInput, et as WuiTimePicker, nt as WuiWizard, it as WuiWizardStep, ht as acceptLabel, xt as buildPasswordRules, ot as copyTextToClipboard, wt as defineWeborityElements, St as evaluatePassword, m as glyphSvg, pt as isImageFile, mt as isImageOnlyAccept, gt as matchesAccept, Ct as passwordSatisfies, _t as validateFile };
|