@webority/ui-elements 0.9.23 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-elements.global.js +84 -84
- package/dist/ui-elements.js +344 -344
- package/package.json +1 -1
package/dist/ui-elements.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
//#region src/
|
|
2
|
-
var e = {
|
|
1
|
+
//#region src/elementBase.js
|
|
2
|
+
var e = typeof HTMLElement > "u" ? class {} : HTMLElement, t = {
|
|
3
3
|
success: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-success-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-success-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_success_clip)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-success-active)\"/>\n<rect x=\"108.758\" y=\"67.5986\" width=\"75.5044\" height=\"49.155\" transform=\"rotate(45 108.758 67.5986)\" fill=\"var(--wui-success)\"/>\n<path d=\"M87.895 96.1046C89.7154 97.9249 89.7154 101.046 87.895 102.866L84.1243 106.637C82.3039 108.457 79.1833 108.457 77.3629 106.637L60.8496 89.9934C59.0293 88.173 59.0293 85.0524 60.8496 83.232L64.6204 79.4613C66.4408 77.6409 69.5614 77.6409 71.3817 79.4613L87.895 96.1046Z\" fill=\"white\"/>\n<path d=\"M102.324 67.3672C104.144 65.5469 107.265 65.5469 109.085 67.3672L112.856 71.138C114.676 72.9583 114.676 76.079 112.856 77.8993L84.2499 106.375C82.4296 108.195 79.3089 108.195 77.4886 106.375L73.7178 102.604C71.8975 100.784 71.8975 97.6633 73.7178 95.8429L102.324 67.3672Z\" fill=\"white\"/>\n</g>\n<defs><clipPath id=\"wui_success_clip\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath></defs>",
|
|
4
4
|
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>",
|
|
5
5
|
warning: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-warning-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-warning-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_warning_clip)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-warning)\"/>\n<path d=\"M93.7812 60.9731L156.173 123.365L113.082 166.456L60 113.5L97 109L93.7812 60.9731Z\" fill=\"var(--wui-warning-active)\"/>\n<path d=\"M116.145 101.611L96.0431 62.7255C94.8912 60.6967 93.0607 59.1479 90.8656 58.3543C88.6768 57.5543 86.2768 57.5607 84.0945 58.3671C83.0001 58.7767 81.9953 59.3655 81.125 60.1079C80.2545 60.8567 79.5122 61.7527 78.9425 62.7703L57.8933 101.554C56.1525 104.594 56.1717 108.331 57.9317 111.358C59.6981 114.392 62.9427 116.248 66.4435 116.242H107.563C111.051 116.248 114.283 114.398 116.049 111.39C116.952 109.854 117.4 108.133 117.4 106.418C117.4 104.76 116.984 103.102 116.145 101.611ZM87.0064 105.714C85.0672 105.714 83.4929 104.146 83.4929 102.207C83.4929 100.267 85.0672 98.6993 87.0064 98.6993C88.9392 98.6993 90.5136 100.267 90.5136 102.207C90.5136 104.146 88.9392 105.714 87.0064 105.714ZM90.9104 78.098L88.0432 95.3266C88.0049 95.8706 87.5504 96.2994 87.0064 96.2994C86.4561 96.2994 86.0016 95.8706 85.9633 95.3266L83.0961 78.098C83.0385 77.8101 83.0065 77.522 83.0065 77.2405C83.0065 76.3125 83.3137 75.4037 83.8833 74.6485C84.6321 73.6629 85.7713 73.0549 87.0064 72.9717C88.2352 73.0549 89.3744 73.6629 90.1232 74.6485C90.872 75.6341 91.16 76.8885 90.9104 78.098Z\" fill=\"white\"/>\n</g>\n<defs><clipPath id=\"wui_warning_clip\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath></defs>",
|
|
6
6
|
info: "<rect width=\"174\" height=\"174\" rx=\"87\" fill=\"var(--wui-info-5)\"/>\n<rect x=\"24\" y=\"24\" width=\"126\" height=\"126\" rx=\"63\" stroke=\"var(--wui-info-20)\" stroke-width=\"16\"/>\n<g clip-path=\"url(#wui_info_clip)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-info)\"/>\n<path d=\"M104.999 67.5L111.454 64L163.495 116.041L115.739 163.797L62.999 111L101.897 104.102L104.999 67.5Z\" fill=\"var(--wui-info-active)\"/>\n<path d=\"M87 121C105.778 121 121 105.778 121 87C121 68.2223 105.778 53 87 53C68.2223 53 53 68.2223 53 87C53 105.778 68.2223 121 87 121Z\" fill=\"white\"/>\n<path d=\"M87 75.542C89.3472 75.542 91.25 73.6392 91.25 71.292C91.25 68.9448 89.3472 67.042 87 67.042C84.6528 67.042 82.75 68.9448 82.75 71.292C82.75 73.6392 84.6528 75.542 87 75.542Z\" fill=\"var(--wui-info-active)\"/>\n<path d=\"M86.9992 106.992C86.0975 106.992 85.2327 106.634 84.5951 105.996C83.9574 105.359 83.5992 104.494 83.5992 103.592V86.592C82.6975 86.592 81.8327 86.2338 81.1951 85.5962C80.5574 84.9585 80.1992 84.0937 80.1992 83.192C80.1992 82.2903 80.5574 81.4255 81.1951 80.7878C81.8327 80.1502 82.6975 79.792 83.5992 79.792H86.9992C87.901 79.792 88.7658 80.1502 89.4034 80.7878C90.041 81.4255 90.3992 82.2903 90.3992 83.192V103.592C90.3992 104.494 90.041 105.359 89.4034 105.996C88.7658 106.634 87.901 106.992 86.9992 106.992Z\" fill=\"var(--wui-info-active)\"/>\n<path d=\"M90.3992 106.992H83.5992C82.6975 106.992 81.8327 106.634 81.1951 105.996C80.5574 105.358 80.1992 104.494 80.1992 103.592C80.1992 102.69 80.5574 101.825 81.1951 101.188C81.8327 100.55 82.6975 100.192 83.5992 100.192H90.3992C91.301 100.192 92.1658 100.55 92.8034 101.188C93.441 101.825 93.7992 102.69 93.7992 103.592C93.7992 104.494 93.441 105.358 92.8034 105.996C92.1658 106.634 91.301 106.992 90.3992 106.992Z\" fill=\"var(--wui-info-active)\"/>\n</g>\n<defs><clipPath id=\"wui_info_clip\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath></defs>",
|
|
7
7
|
delete: "<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_delete_clip0)\">\n<rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"var(--wui-danger)\"/>\n<path d=\"M114.529 67.5672L163.249 116.287L116.354 163.183L67.6336 114.463L100.999 81.0975L64.999 77.5L58.999 69.5L114.529 67.5672Z\" fill=\"var(--wui-danger-active)\"/>\n<path d=\"M103.5 79L100.5 105.5L76 113L69.5 83.5L103.5 79Z\" fill=\"var(--wui-danger)\"/>\n<g clip-path=\"url(#wui_delete_clip1)\">\n<path d=\"M113.652 66.9993C108.895 66.5266 104.139 66.1721 99.3522 65.9061V65.8766L98.7022 62.0357C98.259 59.3175 97.609 55.2402 90.6954 55.2402H82.9545C76.0704 55.2402 75.4204 59.1402 74.9477 62.0061L74.3272 65.788C71.5795 65.9652 68.8318 66.1425 66.084 66.4084L60.0568 66.9993C58.8159 67.1175 57.9295 68.2107 58.0477 69.4221C58.1659 70.6334 59.2295 71.5198 60.4704 71.4016L66.4977 70.8107C81.9795 69.2743 97.5795 69.8652 113.239 71.4311C113.327 71.4311 113.386 71.4311 113.475 71.4311C114.598 71.4311 115.573 70.5743 115.691 69.4221C115.779 68.2107 114.893 67.1175 113.652 66.9993Z\" fill=\"white\"/>\n<path d=\"M108.216 75.5971C107.507 74.8585 106.532 74.4448 105.527 74.4448H68.1816C67.177 74.4448 66.1725 74.8585 65.4929 75.5971C64.8134 76.3357 64.4293 77.3403 64.4884 78.3744L66.3202 108.688C66.6452 113.179 67.0588 118.793 77.3702 118.793H96.3384C106.65 118.793 107.063 113.208 107.388 108.688L109.22 78.4039C109.279 77.3403 108.895 76.3357 108.216 75.5971ZM91.7588 103.99H81.9202C80.7088 103.99 79.7043 102.986 79.7043 101.774C79.7043 100.563 80.7088 99.5585 81.9202 99.5585H91.7588C92.9702 99.5585 93.9747 100.563 93.9747 101.774C93.9747 102.986 92.9702 103.99 91.7588 103.99ZM94.2406 92.1721H79.4679C78.2566 92.1721 77.252 91.1676 77.252 89.9562C77.252 88.7448 78.2566 87.7403 79.4679 87.7403H94.2406C95.452 87.7403 96.4566 88.7448 96.4566 89.9562C96.4566 91.1676 95.452 92.1721 94.2406 92.1721Z\" fill=\"white\"/>\n</g>\n</g>\n<defs><clipPath id=\"wui_delete_clip0\"><rect x=\"32\" y=\"32\" width=\"110\" height=\"110\" rx=\"55\" fill=\"white\"/></clipPath><clipPath id=\"wui_delete_clip1\"><rect width=\"65\" height=\"65\" fill=\"white\" transform=\"translate(54.3535 54.502)\"/></clipPath></defs>"
|
|
8
|
-
},
|
|
8
|
+
}, n = Object.keys(t), r = class extends e {
|
|
9
9
|
static get observedAttributes() {
|
|
10
10
|
return ["tone", "size"];
|
|
11
11
|
}
|
|
@@ -16,48 +16,48 @@ var e = {
|
|
|
16
16
|
this.isConnected && this.render();
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
let
|
|
19
|
+
let e = this.getAttribute("tone"), n = Number.parseInt(this.getAttribute("size"), 10) || 72, r = t[e] || t.info;
|
|
20
20
|
this.innerHTML = `<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`;
|
|
21
21
|
}
|
|
22
|
-
},
|
|
23
|
-
function
|
|
22
|
+
}, i = 4, a = 300, o = 400;
|
|
23
|
+
function s(e, t, n = {}) {
|
|
24
24
|
if (!e || !t) return;
|
|
25
|
-
let
|
|
25
|
+
let r = e.getBoundingClientRect(), s = n.clampHeight ? t.scrollTop : 0;
|
|
26
26
|
n.clampHeight && (t.style.maxHeight = "");
|
|
27
|
-
let c = t.offsetHeight, l = window.innerHeight -
|
|
28
|
-
if (t.classList.toggle("drop-up", u), t.style.position = "fixed", t.style.top = u ? `${Math.max(
|
|
29
|
-
let e = u ?
|
|
27
|
+
let c = t.offsetHeight, l = window.innerHeight - r.bottom, u = l < c + i && r.top > l;
|
|
28
|
+
if (t.classList.toggle("drop-up", u), t.style.position = "fixed", t.style.top = u ? `${Math.max(i, r.top - c - i)}px` : `${r.bottom + i}px`, n.clampHeight) {
|
|
29
|
+
let e = u ? r.top - i * 2 : window.innerHeight - r.bottom - i * 2;
|
|
30
30
|
e < c && (t.style.maxHeight = `${Math.max(e, 0)}px`), t.scrollTop = s;
|
|
31
31
|
}
|
|
32
|
-
n.matchWidth && (
|
|
33
|
-
let d = t.offsetWidth, f = Math.min(
|
|
34
|
-
t.style.left = `${Math.max(
|
|
32
|
+
n.matchWidth && (r.width >= a ? (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(o, window.innerWidth - i * 2)}px`));
|
|
33
|
+
let d = t.offsetWidth, f = Math.min(r.left, window.innerWidth - d - i);
|
|
34
|
+
t.style.left = `${Math.max(i, f)}px`;
|
|
35
35
|
}
|
|
36
|
-
function
|
|
37
|
-
|
|
36
|
+
function c(e, t) {
|
|
37
|
+
l(e), e._reanchor = t, e._reanchorScroll = (n) => {
|
|
38
38
|
n.target instanceof Node && typeof e.contains == "function" && e.contains(n.target) || t();
|
|
39
39
|
}, window.addEventListener("resize", e._reanchor), window.addEventListener("scroll", e._reanchorScroll, !0);
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function l(e) {
|
|
42
42
|
e?._reanchor && (window.removeEventListener("resize", e._reanchor), window.removeEventListener("scroll", e._reanchorScroll, !0), e._reanchor = null, e._reanchorScroll = null);
|
|
43
43
|
}
|
|
44
44
|
//#endregion
|
|
45
45
|
//#region src/formMirror.js
|
|
46
|
-
var
|
|
47
|
-
function
|
|
48
|
-
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${
|
|
46
|
+
var u = "data-wui-mirror";
|
|
47
|
+
function d(e, t) {
|
|
48
|
+
let n = e.getAttribute("name"), r = e.querySelector(`:scope > input[${u}]`);
|
|
49
49
|
if (!n) {
|
|
50
50
|
r?.remove();
|
|
51
51
|
return;
|
|
52
52
|
}
|
|
53
|
-
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(
|
|
53
|
+
r || (r = document.createElement("input"), r.type = "hidden", r.setAttribute(u, ""), e.appendChild(r)), r.name = n, r.value = t == null ? "" : String(t);
|
|
54
54
|
for (let t of [...r.attributes]) t.name.startsWith("data-val") && !e.hasAttribute(t.name) && r.removeAttribute(t.name);
|
|
55
55
|
for (let t of e.attributes) t.name.startsWith("data-val") && r.setAttribute(t.name, t.value);
|
|
56
56
|
r.disabled = e.hasAttribute("disabled");
|
|
57
57
|
}
|
|
58
58
|
//#endregion
|
|
59
59
|
//#region src/iconGlyphs.g.js
|
|
60
|
-
var
|
|
60
|
+
var f = {
|
|
61
61
|
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
62
|
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
63
|
"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>",
|
|
@@ -202,14 +202,14 @@ var d = {
|
|
|
202
202
|
"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>",
|
|
203
203
|
"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>"
|
|
204
204
|
};
|
|
205
|
-
Object.keys(
|
|
206
|
-
function
|
|
207
|
-
let i =
|
|
205
|
+
Object.keys(f);
|
|
206
|
+
function p(e, { size: t = 16, className: n = "", style: r = "" } = {}) {
|
|
207
|
+
let i = f[e];
|
|
208
208
|
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>` : "";
|
|
209
209
|
}
|
|
210
210
|
//#endregion
|
|
211
211
|
//#region src/listboxKeyNav.js
|
|
212
|
-
function
|
|
212
|
+
function m(e) {
|
|
213
213
|
let { getVisibleOptions: t, getActive: n, setActive: r, onEnter: i, onEscape: a, onTypeahead: o, typeaheadMs: s = 500 } = e, c = "", l = null, u = () => {
|
|
214
214
|
clearTimeout(l), l = null, c = "";
|
|
215
215
|
};
|
|
@@ -240,15 +240,15 @@ function p(e) {
|
|
|
240
240
|
}
|
|
241
241
|
//#endregion
|
|
242
242
|
//#region src/optionLabel.js
|
|
243
|
-
var
|
|
243
|
+
var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"), _ = (e) => {
|
|
244
244
|
if (!e) return "";
|
|
245
245
|
let t = String(e).toLowerCase().replace(/[^a-z0-9-]/g, "");
|
|
246
|
-
return t ?
|
|
247
|
-
},
|
|
246
|
+
return t ? p(t) : "";
|
|
247
|
+
}, v = (e) => {
|
|
248
248
|
if (e == null) return "";
|
|
249
|
-
let t = e[
|
|
249
|
+
let t = e[h] ? String(e.label ?? "") : g(e.label), n = _(e.icon);
|
|
250
250
|
return n ? `<span class="wui-opt-label">${n}${t}</span>` : t;
|
|
251
|
-
},
|
|
251
|
+
}, y = class extends e {
|
|
252
252
|
static formAssociated = !0;
|
|
253
253
|
_accessibleName() {
|
|
254
254
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
@@ -307,14 +307,14 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
307
307
|
return this._value;
|
|
308
308
|
}
|
|
309
309
|
set value(e) {
|
|
310
|
-
this._value = e == null ? "" : String(e),
|
|
310
|
+
this._value = e == null ? "" : String(e), d(this, this._value);
|
|
311
311
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
312
|
-
this._label = t ?
|
|
312
|
+
this._label = t ? x(t.label) : "", this._syncInput(), this._renderOptions("");
|
|
313
313
|
}
|
|
314
314
|
set options(e) {
|
|
315
315
|
this._optionsProp = Array.isArray(e) ? e : [];
|
|
316
316
|
let t = this._readOptions().find((e) => String(e.value) === this._value);
|
|
317
|
-
t && (this._label =
|
|
317
|
+
t && (this._label = x(t.label)), this._renderOptions(), this._syncInput();
|
|
318
318
|
}
|
|
319
319
|
get options() {
|
|
320
320
|
return this._readOptions();
|
|
@@ -333,7 +333,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
333
333
|
}
|
|
334
334
|
_matchesKnownOption(e) {
|
|
335
335
|
let t = e.toLowerCase();
|
|
336
|
-
return this._readOptions().some((e) =>
|
|
336
|
+
return this._readOptions().some((e) => x(e.label).toLowerCase() === t || String(e.value ?? "").toLowerCase() === t);
|
|
337
337
|
}
|
|
338
338
|
get _minChars() {
|
|
339
339
|
return Math.max(0, Number(this.getAttribute("min-chars")) || +!!this._remote);
|
|
@@ -351,7 +351,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
351
351
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
352
352
|
label: e.innerHTML,
|
|
353
353
|
icon: e.getAttribute("icon") || void 0,
|
|
354
|
-
[
|
|
354
|
+
[h]: !0,
|
|
355
355
|
selected: e.hasAttribute("selected")
|
|
356
356
|
})));
|
|
357
357
|
}
|
|
@@ -365,17 +365,17 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
365
365
|
let r = `${this.id}-listbox`;
|
|
366
366
|
this._listboxId = r, this.innerHTML = `
|
|
367
367
|
<div class="search-select${n}">
|
|
368
|
-
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${
|
|
369
|
-
<input class="search-select-input search-select-ac-input" placeholder="${
|
|
368
|
+
<div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${b(r)}" aria-label="${b(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}>
|
|
369
|
+
<input class="search-select-input search-select-ac-input" placeholder="${b(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
370
370
|
<span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
|
|
371
|
-
<button type="button" class="search-select-clear" aria-label="Clear" hidden>${
|
|
371
|
+
<button type="button" class="search-select-clear" aria-label="Clear" hidden>${p("x")}</button>
|
|
372
372
|
</div>
|
|
373
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${
|
|
373
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${b(r)}" tabindex="-1" hidden>
|
|
374
374
|
<div class="search-select-options"></div>
|
|
375
375
|
<div class="search-select-empty" hidden>No matches</div>
|
|
376
376
|
<div class="search-select-hint" hidden>Type to search…</div>
|
|
377
377
|
</div>
|
|
378
|
-
</div>`, this._rendered = !0,
|
|
378
|
+
</div>`, this._rendered = !0, d(this, this._value), this._wire(), this._syncInput(), this._renderOptions();
|
|
379
379
|
}
|
|
380
380
|
_refs() {
|
|
381
381
|
return {
|
|
@@ -404,7 +404,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
404
404
|
let t = this._refs();
|
|
405
405
|
if (!t.optionsWrap) return;
|
|
406
406
|
let n = e ?? (t.input ? t.input.value : ""), r = n.trim().toLowerCase(), i = this._readOptions();
|
|
407
|
-
!this._remote && r && (i = i.filter((e) =>
|
|
407
|
+
!this._remote && r && (i = i.filter((e) => x(e.label).toLowerCase().includes(r)));
|
|
408
408
|
let a = n.trim(), o = this._allowCustom && a && !this._matchesKnownOption(a) ? [...i, {
|
|
409
409
|
value: a,
|
|
410
410
|
custom: !0
|
|
@@ -412,11 +412,11 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
412
412
|
t.optionsWrap.innerHTML = o.map((e, t) => {
|
|
413
413
|
let n = `${s}-opt-${t}`;
|
|
414
414
|
if (e.custom) {
|
|
415
|
-
let t = `Add “${
|
|
416
|
-
return `<button type="button" role="option" id="${
|
|
415
|
+
let t = `Add “${g(e.value)}”`;
|
|
416
|
+
return `<button type="button" role="option" id="${b(n)}" class="search-select-option search-select-option-custom" data-value="${b(e.value)}" data-custom="true" aria-selected="false">${t}</button>`;
|
|
417
417
|
}
|
|
418
418
|
let r = String(e.value) === String(this._value);
|
|
419
|
-
return `<button type="button" role="option" id="${
|
|
419
|
+
return `<button type="button" role="option" id="${b(n)}" class="search-select-option${r ? " selected" : ""}" data-value="${b(e.value)}" aria-selected="${r}">${v(e)}</button>`;
|
|
420
420
|
}).join(""), this._active = -1, t.control?.removeAttribute("aria-activedescendant");
|
|
421
421
|
let c = r.length < this._minChars;
|
|
422
422
|
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?.();
|
|
@@ -425,26 +425,26 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
425
425
|
this._teardown();
|
|
426
426
|
let e = this._refs();
|
|
427
427
|
if (!e.control || !e.input) return;
|
|
428
|
-
let t = () =>
|
|
428
|
+
let t = () => s(e.control, e.menu, { matchWidth: !0 }), n = () => this._optionEls().filter((e) => !e.hidden), r = (t) => {
|
|
429
429
|
let r = n();
|
|
430
430
|
this._active = t;
|
|
431
431
|
for (let e of this._optionEls()) e.classList.remove("is-active");
|
|
432
432
|
t >= 0 && r[t] ? (r[t].classList.add("is-active"), r[t].scrollIntoView({ block: "nearest" }), e.control.setAttribute("aria-activedescendant", r[t].id)) : e.control.removeAttribute("aria-activedescendant");
|
|
433
433
|
}, i = () => !e.menu.hidden, a = () => {
|
|
434
434
|
e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
|
|
435
|
-
},
|
|
435
|
+
}, o = () => {
|
|
436
436
|
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();
|
|
437
437
|
}, l = (t) => {
|
|
438
438
|
let n = t.dataset.custom === "true";
|
|
439
|
-
this._value = t.dataset.value, this._label = n ? t.dataset.value :
|
|
439
|
+
this._value = t.dataset.value, this._label = n ? t.dataset.value : x(t.innerHTML), d(this, this._value), e.input.value = this._label, this.dispatchEvent(new CustomEvent("change", {
|
|
440
440
|
bubbles: !0,
|
|
441
441
|
detail: { isCustom: n }
|
|
442
|
-
})),
|
|
443
|
-
},
|
|
444
|
-
this._value = t, this._label = t,
|
|
442
|
+
})), o(), e.input.focus();
|
|
443
|
+
}, u = (t) => {
|
|
444
|
+
this._value = t, this._label = t, d(this, t), e.input.value = t, this.dispatchEvent(new CustomEvent("change", {
|
|
445
445
|
bubbles: !0,
|
|
446
446
|
detail: { isCustom: !0 }
|
|
447
|
-
})),
|
|
447
|
+
})), o();
|
|
448
448
|
}, f = () => {
|
|
449
449
|
let t = e.input.value;
|
|
450
450
|
if (e.clear && (e.clear.hidden = !t), i() || a(), this._remote) {
|
|
@@ -459,7 +459,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
459
459
|
}, this._timer = setTimeout(() => this._fireSearch(t, e), this._debounceMs);
|
|
460
460
|
} else this._renderOptions(t);
|
|
461
461
|
};
|
|
462
|
-
this._navHandler =
|
|
462
|
+
this._navHandler = m({
|
|
463
463
|
getVisibleOptions: n,
|
|
464
464
|
getActive: () => this._active,
|
|
465
465
|
setActive: (e) => r(e),
|
|
@@ -467,14 +467,14 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
467
467
|
if (n[this._active]) l(n[this._active]);
|
|
468
468
|
else if (this._allowCustom) {
|
|
469
469
|
let t = e.input.value.trim();
|
|
470
|
-
t && !this._matchesKnownOption(t) &&
|
|
470
|
+
t && !this._matchesKnownOption(t) && u(t);
|
|
471
471
|
}
|
|
472
472
|
},
|
|
473
473
|
onEscape: () => {
|
|
474
|
-
this._navHandler.clearTypeahead(),
|
|
474
|
+
this._navHandler.clearTypeahead(), o();
|
|
475
475
|
}
|
|
476
476
|
});
|
|
477
|
-
let
|
|
477
|
+
let p = (e) => {
|
|
478
478
|
let t = e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA";
|
|
479
479
|
if (e.key === "ArrowDown") {
|
|
480
480
|
e.preventDefault(), i() || a();
|
|
@@ -488,10 +488,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
488
488
|
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;
|
|
489
489
|
this._navHandler.handler(e);
|
|
490
490
|
};
|
|
491
|
-
e.input.addEventListener("focus", () => a()), e.input.addEventListener("input", f), e.input.addEventListener("keydown",
|
|
491
|
+
e.input.addEventListener("focus", () => a()), e.input.addEventListener("input", f), e.input.addEventListener("keydown", p), e.menu.addEventListener("keydown", p), e.input.addEventListener("blur", (t) => {
|
|
492
492
|
if (!this._allowCustom || t.relatedTarget && this.contains(t.relatedTarget)) return;
|
|
493
493
|
let n = e.input.value.trim();
|
|
494
|
-
!n || n === this._label || this._matchesKnownOption(n) ||
|
|
494
|
+
!n || n === this._label || this._matchesKnownOption(n) || u(n);
|
|
495
495
|
}), e.optionsWrap.addEventListener("click", (e) => {
|
|
496
496
|
let t = e.target.closest(".search-select-option");
|
|
497
497
|
t && l(t);
|
|
@@ -499,11 +499,11 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
499
499
|
let t = e.target.closest(".search-select-option");
|
|
500
500
|
t && r(this._optionEls().indexOf(t));
|
|
501
501
|
}), e.optionsWrap.addEventListener("mouseleave", () => r(-1)), e.clear?.addEventListener("click", () => {
|
|
502
|
-
this._value = "", this._label = "",
|
|
502
|
+
this._value = "", this._label = "", d(this, ""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
|
|
503
503
|
}), this._bindGlobal = () => {
|
|
504
504
|
this._teardown(), this._onDocClick = (e) => {
|
|
505
|
-
i() && !this.contains(e.target) &&
|
|
506
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
505
|
+
i() && !this.contains(e.target) && o();
|
|
506
|
+
}, document.addEventListener("click", this._onDocClick), c(this, () => {
|
|
507
507
|
i() && t();
|
|
508
508
|
});
|
|
509
509
|
}, this._bindGlobal();
|
|
@@ -518,12 +518,12 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
518
518
|
}));
|
|
519
519
|
}
|
|
520
520
|
_teardown() {
|
|
521
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null),
|
|
521
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this), clearTimeout(this._timer), this._navHandler?.teardown();
|
|
522
522
|
}
|
|
523
523
|
disconnectedCallback() {
|
|
524
524
|
this._teardown();
|
|
525
525
|
}
|
|
526
|
-
},
|
|
526
|
+
}, b = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), x = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), S = [
|
|
527
527
|
"January",
|
|
528
528
|
"February",
|
|
529
529
|
"March",
|
|
@@ -536,7 +536,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
536
536
|
"October",
|
|
537
537
|
"November",
|
|
538
538
|
"December"
|
|
539
|
-
],
|
|
539
|
+
], C = [
|
|
540
540
|
"Su",
|
|
541
541
|
"Mo",
|
|
542
542
|
"Tu",
|
|
@@ -544,24 +544,24 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
544
544
|
"Th",
|
|
545
545
|
"Fr",
|
|
546
546
|
"Sa"
|
|
547
|
-
],
|
|
547
|
+
], w = (e) => String(e).padStart(2, "0"), T = (e, t, n) => `${e}-${w(t + 1)}-${w(n)}`, E = (e) => {
|
|
548
548
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
549
549
|
return t ? {
|
|
550
550
|
y: +t[1],
|
|
551
551
|
m: t[2] - 1,
|
|
552
552
|
d: +t[3]
|
|
553
553
|
} : null;
|
|
554
|
-
},
|
|
555
|
-
let t =
|
|
556
|
-
return t ? `${
|
|
557
|
-
},
|
|
554
|
+
}, D = (e) => {
|
|
555
|
+
let t = E(e);
|
|
556
|
+
return t ? `${w(t.d)} ${S[t.m].slice(0, 3)} ${t.y}` : "";
|
|
557
|
+
}, O = (e, t) => new Date(e, t + 1, 0).getDate(), k = (e, t) => {
|
|
558
558
|
for (; t < 0;) t += 12, --e;
|
|
559
559
|
for (; t > 11;) t -= 12, e += 1;
|
|
560
560
|
return {
|
|
561
561
|
y: e,
|
|
562
562
|
m: t
|
|
563
563
|
};
|
|
564
|
-
}, ee = class extends
|
|
564
|
+
}, ee = class extends e {
|
|
565
565
|
static formAssociated = !0;
|
|
566
566
|
static get observedAttributes() {
|
|
567
567
|
return [
|
|
@@ -604,7 +604,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
604
604
|
return this._value;
|
|
605
605
|
}
|
|
606
606
|
set value(e) {
|
|
607
|
-
this._value = e || "",
|
|
607
|
+
this._value = e || "", d(this, this._value), this._syncTrigger();
|
|
608
608
|
}
|
|
609
609
|
_firstDay() {
|
|
610
610
|
let e = Number.parseInt(this.getAttribute("first-day") ?? "", 10);
|
|
@@ -612,29 +612,29 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
612
612
|
}
|
|
613
613
|
render() {
|
|
614
614
|
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
|
|
615
|
-
let e = this.getAttribute("placeholder") || "Enter Date", t =
|
|
615
|
+
let e = this.getAttribute("placeholder") || "Enter Date", t = E(this._value);
|
|
616
616
|
t && (this._viewY = t.y, this._viewM = t.m);
|
|
617
617
|
let n = this.getAttribute("size"), r = n === "sm" ? " input-sm" : n === "lg" ? " input-lg" : "", i = this.getAttribute("aria-label"), a = this.getAttribute("aria-describedby");
|
|
618
618
|
this.innerHTML = `
|
|
619
619
|
<div class="datepicker">
|
|
620
|
-
<button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${
|
|
621
|
-
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ?
|
|
622
|
-
${
|
|
620
|
+
<button type="button" class="input datepicker-trigger${r}${t ? " has-value" : ""}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${i ? ` aria-label="${g(i)}"` : ""}${a ? ` aria-describedby="${g(a)}"` : ""}>
|
|
621
|
+
<span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? D(this._value) : g(e)}</span>
|
|
622
|
+
${p("calendar-dots")}
|
|
623
623
|
</button>
|
|
624
624
|
<div class="datepicker-pop" role="dialog" aria-modal="false" hidden></div>
|
|
625
|
-
</div>`, this._rendered = !0,
|
|
625
|
+
</div>`, this._rendered = !0, d(this, this._value), this._wire();
|
|
626
626
|
}
|
|
627
627
|
_syncFormValue() {
|
|
628
|
-
|
|
628
|
+
d(this, this._value);
|
|
629
629
|
}
|
|
630
630
|
_syncTrigger() {
|
|
631
631
|
let e = this.querySelector(".datepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
632
632
|
if (!t) return;
|
|
633
|
-
let n =
|
|
634
|
-
t.textContent = n ?
|
|
633
|
+
let n = E(this._value);
|
|
634
|
+
t.textContent = n ? D(this._value) : this.getAttribute("placeholder") || "Enter Date", t.classList.toggle("search-select-placeholder", !n), e?.classList.toggle("has-value", !!n);
|
|
635
635
|
}
|
|
636
636
|
_limits() {
|
|
637
|
-
let e =
|
|
637
|
+
let e = E(this.getAttribute("min")), t = E(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;
|
|
638
638
|
return {
|
|
639
639
|
dayDisabled: (e, t, i) => {
|
|
640
640
|
let a = new Date(e, t, i).getTime();
|
|
@@ -642,7 +642,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
642
642
|
},
|
|
643
643
|
monthDisabled: (e, t) => {
|
|
644
644
|
let i = new Date(e, t, 1).getTime();
|
|
645
|
-
return new Date(e, t,
|
|
645
|
+
return new Date(e, t, O(e, t)).getTime() < n || i > r;
|
|
646
646
|
},
|
|
647
647
|
yearDisabled: (e) => {
|
|
648
648
|
let t = new Date(e, 0, 1).getTime();
|
|
@@ -655,29 +655,29 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
655
655
|
e && (this._mode === "months" ? e.innerHTML = this._monthsHtml() : this._mode === "years" ? e.innerHTML = this._yearsHtml() : e.innerHTML = this._daysHtml(), this._focusActive());
|
|
656
656
|
}
|
|
657
657
|
_daysHtml() {
|
|
658
|
-
let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n =
|
|
658
|
+
let e = this._firstDay(), t = (new Date(this._viewY, this._viewM, 1).getDay() - e + 7) % 7, n = O(this._viewY, this._viewM), r = E(this._value), i = /* @__PURE__ */ new Date(), { dayDisabled: a } = this._limits(), o = this._focus || r || {
|
|
659
659
|
y: this._viewY,
|
|
660
660
|
m: this._viewM,
|
|
661
661
|
d: 1
|
|
662
662
|
}, s = (e, t, n, s) => {
|
|
663
|
-
let c =
|
|
663
|
+
let c = T(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);
|
|
664
664
|
return `<button type="button" class="${[
|
|
665
665
|
"datepicker-day",
|
|
666
666
|
s ? "is-outside" : "",
|
|
667
667
|
u ? "is-today" : "",
|
|
668
668
|
l ? "is-selected" : ""
|
|
669
669
|
].filter(Boolean).join(" ")}" data-iso="${c}" role="gridcell" tabindex="${d && !f ? "0" : "-1"}"${l ? " aria-selected=\"true\"" : ""}${f ? " disabled aria-disabled=\"true\"" : ""}>${n}</button>`;
|
|
670
|
-
}, c = "", l =
|
|
670
|
+
}, c = "", l = k(this._viewY, this._viewM - 1), u = O(l.y, l.m);
|
|
671
671
|
for (let e = t - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
672
672
|
for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
|
|
673
|
-
let d =
|
|
674
|
-
for (let e = 1; e <=
|
|
675
|
-
let m =
|
|
673
|
+
let d = k(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
|
|
674
|
+
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
675
|
+
let m = C.map((t, n) => C[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
|
|
676
676
|
return `
|
|
677
677
|
<div class="datepicker-head">
|
|
678
|
-
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${
|
|
679
|
-
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${
|
|
680
|
-
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${
|
|
678
|
+
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${p("chevron-left")}</button>
|
|
679
|
+
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${S[this._viewM]} ${this._viewY}</button>
|
|
680
|
+
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${p("chevron-right")}</button>
|
|
681
681
|
</div>
|
|
682
682
|
<div class="datepicker-weekdays">${m}</div>
|
|
683
683
|
<div class="datepicker-grid${this._slide ? ` ${this._slide}` : ""}" role="grid">${c}</div>
|
|
@@ -687,25 +687,25 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
687
687
|
</div>`;
|
|
688
688
|
}
|
|
689
689
|
_monthsHtml() {
|
|
690
|
-
let e =
|
|
690
|
+
let e = E(this._value), t = /* @__PURE__ */ new Date(), { monthDisabled: n } = this._limits(), r = "";
|
|
691
691
|
for (let i = 0; i < 12; i++) {
|
|
692
692
|
let a = e && e.y === this._viewY && e.m === i, o = t.getFullYear() === this._viewY && t.getMonth() === i, s = n(this._viewY, i), c = [
|
|
693
693
|
"datepicker-cell",
|
|
694
694
|
o ? "is-today" : "",
|
|
695
695
|
a ? "is-selected" : ""
|
|
696
696
|
].filter(Boolean).join(" ");
|
|
697
|
-
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${
|
|
697
|
+
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${S[i].slice(0, 3)}</button>`;
|
|
698
698
|
}
|
|
699
699
|
return `
|
|
700
700
|
<div class="datepicker-head">
|
|
701
|
-
<button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year">${
|
|
701
|
+
<button type="button" class="datepicker-nav-btn" data-nav-year="-1" aria-label="Previous year">${p("chevron-left")}</button>
|
|
702
702
|
<button type="button" class="datepicker-month" data-view="years" aria-label="Choose year">${this._viewY}</button>
|
|
703
|
-
<button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year">${
|
|
703
|
+
<button type="button" class="datepicker-nav-btn" data-nav-year="1" aria-label="Next year">${p("chevron-right")}</button>
|
|
704
704
|
</div>
|
|
705
705
|
<div class="datepicker-cells">${r}</div>`;
|
|
706
706
|
}
|
|
707
707
|
_yearsHtml() {
|
|
708
|
-
let e =
|
|
708
|
+
let e = E(this._value), t = (/* @__PURE__ */ new Date()).getFullYear(), { yearDisabled: n } = this._limits(), r = this._viewY - (this._viewY % 10 + 10) % 10 - 1, i = "";
|
|
709
709
|
for (let a = 0; a < 12; a++) {
|
|
710
710
|
let o = r + a, s = e && e.y === o, c = t === o, l = n(o), u = [
|
|
711
711
|
"datepicker-cell",
|
|
@@ -716,9 +716,9 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
716
716
|
}
|
|
717
717
|
return `
|
|
718
718
|
<div class="datepicker-head">
|
|
719
|
-
<button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade">${
|
|
719
|
+
<button type="button" class="datepicker-nav-btn" data-nav-decade="-1" aria-label="Previous decade">${p("chevron-left")}</button>
|
|
720
720
|
<span class="datepicker-month">${r + 1} – ${r + 10}</span>
|
|
721
|
-
<button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${
|
|
721
|
+
<button type="button" class="datepicker-nav-btn" data-nav-decade="1" aria-label="Next decade">${p("chevron-right")}</button>
|
|
722
722
|
</div>
|
|
723
723
|
<div class="datepicker-cells">${i}</div>`;
|
|
724
724
|
}
|
|
@@ -727,24 +727,24 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
727
727
|
t && e.contains(document.activeElement) && t.focus();
|
|
728
728
|
}
|
|
729
729
|
_position(e, t) {
|
|
730
|
-
|
|
730
|
+
s(e, t, { clampHeight: !0 });
|
|
731
731
|
}
|
|
732
732
|
_setFocus(e, t, n, r) {
|
|
733
|
-
let { y: i, m: a } =
|
|
733
|
+
let { y: i, m: a } = k(e, t);
|
|
734
734
|
this._focus = {
|
|
735
735
|
y: i,
|
|
736
736
|
m: a,
|
|
737
737
|
d: n
|
|
738
738
|
};
|
|
739
739
|
let o = i !== this._viewY || a !== this._viewM;
|
|
740
|
-
this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${
|
|
740
|
+
this._viewY = i, this._viewM = a, this._slide = o && r || "", this._renderView(), this._slide = "", this.querySelector(`.datepicker-day[data-iso="${T(i, a, n)}"]`)?.focus();
|
|
741
741
|
}
|
|
742
742
|
_onKey(e) {
|
|
743
743
|
if (this._mode !== "days") {
|
|
744
744
|
e.key === "Escape" && this._close();
|
|
745
745
|
return;
|
|
746
746
|
}
|
|
747
|
-
let t = this._focus ||
|
|
747
|
+
let t = this._focus || E(this._value) || {
|
|
748
748
|
y: this._viewY,
|
|
749
749
|
m: this._viewM,
|
|
750
750
|
d: 1
|
|
@@ -762,17 +762,17 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
762
762
|
case "End": return n(6 - (new Date(t.y, t.m, t.d).getDay() - this._firstDay() + 7) % 7, "slide-next");
|
|
763
763
|
case "PageUp": {
|
|
764
764
|
e.preventDefault();
|
|
765
|
-
let n =
|
|
766
|
-
return this._setFocus(n.y, n.m, Math.min(t.d,
|
|
765
|
+
let n = k(t.y, t.m - (e.shiftKey ? 12 : 1));
|
|
766
|
+
return this._setFocus(n.y, n.m, Math.min(t.d, O(n.y, n.m)), "slide-prev");
|
|
767
767
|
}
|
|
768
768
|
case "PageDown": {
|
|
769
769
|
e.preventDefault();
|
|
770
|
-
let n =
|
|
771
|
-
return this._setFocus(n.y, n.m, Math.min(t.d,
|
|
770
|
+
let n = k(t.y, t.m + (e.shiftKey ? 12 : 1));
|
|
771
|
+
return this._setFocus(n.y, n.m, Math.min(t.d, O(n.y, n.m)), "slide-next");
|
|
772
772
|
}
|
|
773
773
|
case "Enter":
|
|
774
774
|
case " ":
|
|
775
|
-
e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value =
|
|
775
|
+
e.preventDefault(), this._limits().dayDisabled(t.y, t.m, t.d) || (this.value = T(t.y, t.m, t.d), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close());
|
|
776
776
|
return;
|
|
777
777
|
case "Escape": return this._close();
|
|
778
778
|
default:
|
|
@@ -784,7 +784,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
784
784
|
if (!e || !t) return;
|
|
785
785
|
let r = () => !t.hidden;
|
|
786
786
|
this._open = () => {
|
|
787
|
-
let r = /* @__PURE__ */ new Date(), i =
|
|
787
|
+
let r = /* @__PURE__ */ new Date(), i = E(this._value);
|
|
788
788
|
(i || !this._viewNavigated) && (this._viewY = r.getFullYear(), this._viewM = r.getMonth()), this._mode = "days";
|
|
789
789
|
let a = r.getFullYear() === this._viewY && r.getMonth() === this._viewM, o = i && i.y === this._viewY && i.m === this._viewM;
|
|
790
790
|
this._focus = o ? i : {
|
|
@@ -799,7 +799,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
799
799
|
let t = e.target.closest("[data-nav]");
|
|
800
800
|
if (t) {
|
|
801
801
|
this._viewNavigated = !0, this._slide = Number(t.dataset.nav) < 0 ? "slide-prev" : "slide-next";
|
|
802
|
-
let e =
|
|
802
|
+
let e = k(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
803
803
|
this._viewY = e.y, this._viewM = e.m, this._focus = {
|
|
804
804
|
y: e.y,
|
|
805
805
|
m: e.m,
|
|
@@ -838,7 +838,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
838
838
|
}
|
|
839
839
|
if (e.target.closest("[data-today]")) {
|
|
840
840
|
let e = /* @__PURE__ */ new Date();
|
|
841
|
-
this.value =
|
|
841
|
+
this.value = T(e.getFullYear(), e.getMonth(), e.getDate()), this.dispatchEvent(new Event("change", { bubbles: !0 })), this._close();
|
|
842
842
|
return;
|
|
843
843
|
}
|
|
844
844
|
if (e.target.closest("[data-clear]")) {
|
|
@@ -855,18 +855,18 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
855
855
|
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
856
856
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
857
857
|
r() && e.key === "Escape" && this._close();
|
|
858
|
-
}, document.addEventListener("keydown", this._onDocKey),
|
|
858
|
+
}, document.addEventListener("keydown", this._onDocKey), c(this, () => {
|
|
859
859
|
r() && this._position(e, t);
|
|
860
860
|
});
|
|
861
861
|
}, this._bindGlobal(), this._syncFormValue();
|
|
862
862
|
}
|
|
863
863
|
_teardown() {
|
|
864
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null),
|
|
864
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), l(this);
|
|
865
865
|
}
|
|
866
866
|
disconnectedCallback() {
|
|
867
867
|
this._teardown();
|
|
868
868
|
}
|
|
869
|
-
},
|
|
869
|
+
}, A = class extends e {
|
|
870
870
|
static formAssociated = !0;
|
|
871
871
|
static get observedAttributes() {
|
|
872
872
|
return [
|
|
@@ -925,20 +925,20 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
925
925
|
text: e,
|
|
926
926
|
empty: !0
|
|
927
927
|
} : {
|
|
928
|
-
text: `${
|
|
928
|
+
text: `${D(this._start) || "Start"} – ${D(this._end) || "End"}`,
|
|
929
929
|
empty: !1
|
|
930
930
|
};
|
|
931
931
|
}
|
|
932
932
|
render() {
|
|
933
933
|
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);
|
|
934
|
-
let e =
|
|
934
|
+
let e = E(this._start);
|
|
935
935
|
e && (this._viewY = e.y, this._viewM = e.m);
|
|
936
936
|
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");
|
|
937
937
|
this.innerHTML = `
|
|
938
938
|
<div class="daterange">
|
|
939
|
-
<button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${
|
|
940
|
-
<span data-range-label class="${i ? "search-select-placeholder" : ""}">${
|
|
941
|
-
${
|
|
939
|
+
<button type="button" class="input daterange-trigger${n}${i ? "" : " has-value"}" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
|
|
940
|
+
<span data-range-label class="${i ? "search-select-placeholder" : ""}">${g(r)}</span>
|
|
941
|
+
${p("calendar")}
|
|
942
942
|
</button>
|
|
943
943
|
<div class="daterange-pop" role="dialog" aria-modal="false" hidden></div>
|
|
944
944
|
</div>`, this._rendered = !0, this._syncMirrors(), this._wire();
|
|
@@ -965,24 +965,24 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
965
965
|
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");
|
|
966
966
|
}
|
|
967
967
|
_limits() {
|
|
968
|
-
let e =
|
|
968
|
+
let e = E(this.getAttribute("min")), t = E(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;
|
|
969
969
|
return (e, t, i) => {
|
|
970
970
|
let a = new Date(e, t, i).getTime();
|
|
971
971
|
return a < n || a > r;
|
|
972
972
|
};
|
|
973
973
|
}
|
|
974
974
|
_monthHtml(e, t) {
|
|
975
|
-
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i =
|
|
976
|
-
let i =
|
|
975
|
+
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = O(e, t), a = this._limits(), o = C.map((e, t) => C[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
|
|
976
|
+
let i = T(e, t, n), o = a(e, t, n);
|
|
977
977
|
return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
|
|
978
|
-
}, c = "", l =
|
|
978
|
+
}, c = "", l = k(e, t - 1), u = O(l.y, l.m);
|
|
979
979
|
for (let e = r - 1; e >= 0; e--) c += s(l.y, l.m, u - e, !0);
|
|
980
980
|
for (let n = 1; n <= i; n++) c += s(e, t, n, !1);
|
|
981
|
-
let d =
|
|
981
|
+
let d = k(e, t + 1), f = (7 - (r + i) % 7) % 7;
|
|
982
982
|
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
983
983
|
return `
|
|
984
984
|
<div class="daterange-cal">
|
|
985
|
-
<div class="datepicker-month-label">${
|
|
985
|
+
<div class="datepicker-month-label">${S[t]} ${e}</div>
|
|
986
986
|
<div class="datepicker-weekdays">${o}</div>
|
|
987
987
|
<div class="datepicker-grid" role="grid">${c}</div>
|
|
988
988
|
</div>`;
|
|
@@ -990,11 +990,11 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
990
990
|
_renderView() {
|
|
991
991
|
let e = this.querySelector(".daterange-pop");
|
|
992
992
|
if (!e) return;
|
|
993
|
-
let t =
|
|
993
|
+
let t = k(this._viewY, this._viewM + 1);
|
|
994
994
|
e.innerHTML = `
|
|
995
995
|
<div class="daterange-head">
|
|
996
|
-
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${
|
|
997
|
-
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${
|
|
996
|
+
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${p("chevron-left")}</button>
|
|
997
|
+
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${p("chevron-right")}</button>
|
|
998
998
|
</div>
|
|
999
999
|
<div class="daterange-cals">
|
|
1000
1000
|
${this._monthHtml(this._viewY, this._viewM)}
|
|
@@ -1016,10 +1016,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1016
1016
|
n.classList.toggle("is-range-start", i), n.classList.toggle("is-range-end", a), n.classList.toggle("in-range", o);
|
|
1017
1017
|
}
|
|
1018
1018
|
let i = e.querySelector("[data-range-hint]");
|
|
1019
|
-
i && (i.textContent = this._start ? this._end ? `${
|
|
1019
|
+
i && (i.textContent = this._start ? this._end ? `${D(this._start)} – ${D(this._end)}` : "Pick an end date" : "Pick a start date");
|
|
1020
1020
|
}
|
|
1021
1021
|
_position(e, t) {
|
|
1022
|
-
|
|
1022
|
+
s(e, t, { clampHeight: !0 });
|
|
1023
1023
|
}
|
|
1024
1024
|
_pick(e) {
|
|
1025
1025
|
if (!this._start || this._start && this._end) {
|
|
@@ -1038,7 +1038,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1038
1038
|
if (!e || !t) return;
|
|
1039
1039
|
let r = () => !t.hidden;
|
|
1040
1040
|
this._open = () => {
|
|
1041
|
-
let r =
|
|
1041
|
+
let r = E(this._start);
|
|
1042
1042
|
if (r) this._viewY = r.y, this._viewM = r.m;
|
|
1043
1043
|
else {
|
|
1044
1044
|
let e = /* @__PURE__ */ new Date();
|
|
@@ -1051,7 +1051,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1051
1051
|
this._popClick = !0;
|
|
1052
1052
|
let t = e.target.closest("[data-nav]");
|
|
1053
1053
|
if (t) {
|
|
1054
|
-
let e =
|
|
1054
|
+
let e = k(this._viewY, this._viewM + Number(t.dataset.nav));
|
|
1055
1055
|
this._viewY = e.y, this._viewM = e.m, this._renderView();
|
|
1056
1056
|
return;
|
|
1057
1057
|
}
|
|
@@ -1070,18 +1070,18 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1070
1070
|
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
1071
1071
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
1072
1072
|
r() && e.key === "Escape" && this._close();
|
|
1073
|
-
}, document.addEventListener("keydown", this._onDocKey),
|
|
1073
|
+
}, document.addEventListener("keydown", this._onDocKey), c(this, () => {
|
|
1074
1074
|
r() && this._position(e, t);
|
|
1075
1075
|
});
|
|
1076
1076
|
}, this._bindGlobal(), this._syncMirrors();
|
|
1077
1077
|
}
|
|
1078
1078
|
_teardown() {
|
|
1079
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null),
|
|
1079
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), l(this);
|
|
1080
1080
|
}
|
|
1081
1081
|
disconnectedCallback() {
|
|
1082
1082
|
this._teardown();
|
|
1083
1083
|
}
|
|
1084
|
-
},
|
|
1084
|
+
}, te = class extends e {
|
|
1085
1085
|
static get observedAttributes() {
|
|
1086
1086
|
return [
|
|
1087
1087
|
"static",
|
|
@@ -1102,10 +1102,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1102
1102
|
e === "static" && this.isConnected && this._wire();
|
|
1103
1103
|
}
|
|
1104
1104
|
_maxScale() {
|
|
1105
|
-
return
|
|
1105
|
+
return ne(this.getAttribute("max-scale"), 1.6);
|
|
1106
1106
|
}
|
|
1107
1107
|
_radius() {
|
|
1108
|
-
return
|
|
1108
|
+
return ne(this.getAttribute("radius"), 100);
|
|
1109
1109
|
}
|
|
1110
1110
|
_magnifyEnabled() {
|
|
1111
1111
|
return !(this.hasAttribute("static") || typeof matchMedia == "function" && (matchMedia("(pointer: coarse)").matches || matchMedia("(prefers-reduced-motion: reduce)").matches));
|
|
@@ -1130,10 +1130,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1130
1130
|
_teardown() {
|
|
1131
1131
|
this._pointerMoveListener &&= (this.removeEventListener("pointermove", this._pointerMoveListener), null), this._pointerLeaveListener &&= (this.removeEventListener("pointerleave", this._pointerLeaveListener), null), this._resetMagnification();
|
|
1132
1132
|
}
|
|
1133
|
-
},
|
|
1133
|
+
}, ne = (e, t) => {
|
|
1134
1134
|
let n = Number.parseFloat(e);
|
|
1135
1135
|
return Number.isFinite(n) ? n : t;
|
|
1136
|
-
},
|
|
1136
|
+
}, j = "wui-feedback-submit", M = {
|
|
1137
1137
|
label: "Feedback",
|
|
1138
1138
|
heading: "Share feedback",
|
|
1139
1139
|
placeholder: "What's working, what isn't?",
|
|
@@ -1144,7 +1144,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1144
1144
|
emptyError: "Please write a message before sending.",
|
|
1145
1145
|
failedError: "That didn't send. Please try again.",
|
|
1146
1146
|
thanks: "Thanks — we've got it."
|
|
1147
|
-
},
|
|
1147
|
+
}, re = 1e4, ie = 1600, N = class extends e {
|
|
1148
1148
|
static get observedAttributes() {
|
|
1149
1149
|
return [
|
|
1150
1150
|
"position",
|
|
@@ -1166,19 +1166,19 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1166
1166
|
this.setAttribute("position", String(e ?? "bottom-right"));
|
|
1167
1167
|
}
|
|
1168
1168
|
get label() {
|
|
1169
|
-
return this.getAttribute("label") ||
|
|
1169
|
+
return this.getAttribute("label") || M.label;
|
|
1170
1170
|
}
|
|
1171
1171
|
set label(e) {
|
|
1172
1172
|
this.setAttribute("label", String(e ?? ""));
|
|
1173
1173
|
}
|
|
1174
1174
|
get heading() {
|
|
1175
|
-
return this.getAttribute("heading") ||
|
|
1175
|
+
return this.getAttribute("heading") || M.heading;
|
|
1176
1176
|
}
|
|
1177
1177
|
set heading(e) {
|
|
1178
1178
|
this.setAttribute("heading", String(e ?? ""));
|
|
1179
1179
|
}
|
|
1180
1180
|
get placeholder() {
|
|
1181
|
-
return this.getAttribute("placeholder") ||
|
|
1181
|
+
return this.getAttribute("placeholder") || M.placeholder;
|
|
1182
1182
|
}
|
|
1183
1183
|
set placeholder(e) {
|
|
1184
1184
|
this.setAttribute("placeholder", String(e ?? ""));
|
|
@@ -1193,10 +1193,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1193
1193
|
return this._open === !0;
|
|
1194
1194
|
}
|
|
1195
1195
|
addEventListener(e, t, n) {
|
|
1196
|
-
e ===
|
|
1196
|
+
e === j && (this._submitListeners += 1), super.addEventListener(e, t, n);
|
|
1197
1197
|
}
|
|
1198
1198
|
removeEventListener(e, t, n) {
|
|
1199
|
-
e ===
|
|
1199
|
+
e === j && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
|
|
1200
1200
|
}
|
|
1201
1201
|
connectedCallback() {
|
|
1202
1202
|
this._rendered || this.render();
|
|
@@ -1211,32 +1211,32 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1211
1211
|
let e = this._open === !0, t = this._refs().message?.value ?? "", n = this._refs().email?.value ?? "";
|
|
1212
1212
|
this.innerHTML = `
|
|
1213
1213
|
<button type="button" class="feedback-trigger" aria-expanded="false" aria-haspopup="dialog">
|
|
1214
|
-
<span class="feedback-trigger-icon" aria-hidden="true">${
|
|
1215
|
-
<span class="feedback-trigger-label">${
|
|
1214
|
+
<span class="feedback-trigger-icon" aria-hidden="true">${p("message-square", { size: 18 })}</span>
|
|
1215
|
+
<span class="feedback-trigger-label">${ae(this.label)}</span>
|
|
1216
1216
|
</button>
|
|
1217
|
-
<div class="feedback-panel" role="dialog" aria-label="${
|
|
1217
|
+
<div class="feedback-panel" role="dialog" aria-label="${oe(this.heading)}" hidden>
|
|
1218
1218
|
<div class="feedback-head">
|
|
1219
|
-
<h2 class="feedback-heading">${
|
|
1220
|
-
<button type="button" class="feedback-close" aria-label="Close">${
|
|
1219
|
+
<h2 class="feedback-heading">${ae(this.heading)}</h2>
|
|
1220
|
+
<button type="button" class="feedback-close" aria-label="Close">${p("x", { size: 16 })}</button>
|
|
1221
1221
|
</div>
|
|
1222
1222
|
<div class="feedback-body">
|
|
1223
1223
|
<label class="feedback-field">
|
|
1224
|
-
<span class="feedback-field-label">${
|
|
1225
|
-
<textarea class="feedback-message" rows="4" required placeholder="${
|
|
1224
|
+
<span class="feedback-field-label">${M.messageLabel}</span>
|
|
1225
|
+
<textarea class="feedback-message" rows="4" required placeholder="${oe(this.placeholder)}"></textarea>
|
|
1226
1226
|
</label>
|
|
1227
1227
|
${this.collectEmail ? `<label class="feedback-field">
|
|
1228
|
-
<span class="feedback-field-label">${
|
|
1228
|
+
<span class="feedback-field-label">${M.emailLabel}</span>
|
|
1229
1229
|
<input type="email" class="feedback-email" autocomplete="email" placeholder="you@example.com" />
|
|
1230
1230
|
</label>` : ""}
|
|
1231
1231
|
<p class="feedback-error" role="alert" hidden></p>
|
|
1232
1232
|
</div>
|
|
1233
1233
|
<div class="feedback-actions">
|
|
1234
1234
|
<button type="button" class="feedback-cancel">Cancel</button>
|
|
1235
|
-
<button type="button" class="feedback-submit">${
|
|
1235
|
+
<button type="button" class="feedback-submit">${M.submitLabel}</button>
|
|
1236
1236
|
</div>
|
|
1237
1237
|
<div class="feedback-thanks" hidden>
|
|
1238
|
-
<span class="feedback-thanks-icon" aria-hidden="true">${
|
|
1239
|
-
<span class="feedback-thanks-text">${
|
|
1238
|
+
<span class="feedback-thanks-icon" aria-hidden="true">${p("check-circle", { size: 20 })}</span>
|
|
1239
|
+
<span class="feedback-thanks-text">${M.thanks}</span>
|
|
1240
1240
|
</div>
|
|
1241
1241
|
</div>`, this._rendered = !0, this._wire();
|
|
1242
1242
|
let r = this._refs();
|
|
@@ -1274,18 +1274,18 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1274
1274
|
let { thanks: e, error: t, submit: n, message: r, email: i } = this._refs();
|
|
1275
1275
|
this._setBusy(!1), t && (t.hidden = !0, t.textContent = ""), e && (e.hidden = !1), this.querySelector(".feedback-body")?.setAttribute("hidden", ""), this.querySelector(".feedback-actions")?.setAttribute("hidden", ""), n && (n.disabled = !0), this._thanksTimer = setTimeout(() => {
|
|
1276
1276
|
r && (r.value = ""), i && (i.value = ""), this._reset(), this.close();
|
|
1277
|
-
},
|
|
1277
|
+
}, ie);
|
|
1278
1278
|
}
|
|
1279
1279
|
failed(e) {
|
|
1280
1280
|
this._clearTimers(), this._state = "error", this._setBusy(!1);
|
|
1281
1281
|
let { error: t, message: n } = this._refs();
|
|
1282
|
-
t && (t.textContent = e ||
|
|
1282
|
+
t && (t.textContent = e || M.failedError, t.hidden = !1), n?.focus();
|
|
1283
1283
|
}
|
|
1284
1284
|
_submit() {
|
|
1285
1285
|
if (this._state === "submitting") return;
|
|
1286
1286
|
let { message: e, email: t, error: n } = this._refs(), r = (e?.value ?? "").trim();
|
|
1287
1287
|
if (!r) {
|
|
1288
|
-
n && (n.textContent =
|
|
1288
|
+
n && (n.textContent = M.emptyError, n.hidden = !1), e?.focus();
|
|
1289
1289
|
return;
|
|
1290
1290
|
}
|
|
1291
1291
|
n && (n.hidden = !0, n.textContent = ""), this._state = "submitting", this._setBusy(!0);
|
|
@@ -1295,7 +1295,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1295
1295
|
surface: this.getAttribute("surface") || "",
|
|
1296
1296
|
screen: this.getAttribute("screen") || ""
|
|
1297
1297
|
};
|
|
1298
|
-
if (this.dispatchEvent(new CustomEvent(
|
|
1298
|
+
if (this.dispatchEvent(new CustomEvent(j, {
|
|
1299
1299
|
bubbles: !0,
|
|
1300
1300
|
composed: !0,
|
|
1301
1301
|
detail: i
|
|
@@ -1305,11 +1305,11 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1305
1305
|
}
|
|
1306
1306
|
this._timer = setTimeout(() => {
|
|
1307
1307
|
this._state === "submitting" && this.failed();
|
|
1308
|
-
},
|
|
1308
|
+
}, re);
|
|
1309
1309
|
}
|
|
1310
1310
|
_setBusy(e) {
|
|
1311
1311
|
let { submit: t } = this._refs();
|
|
1312
|
-
t && (t.disabled = e, t.textContent = e ?
|
|
1312
|
+
t && (t.disabled = e, t.textContent = e ? M.sendingLabel : M.submitLabel, this.toggleAttribute("busy", e));
|
|
1313
1313
|
}
|
|
1314
1314
|
_reset() {
|
|
1315
1315
|
this._clearTimers(), this._state = "idle", this._setBusy(!1);
|
|
@@ -1319,7 +1319,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1319
1319
|
_clearTimers() {
|
|
1320
1320
|
this._timer &&= (clearTimeout(this._timer), 0), this._thanksTimer &&= (clearTimeout(this._thanksTimer), 0);
|
|
1321
1321
|
}
|
|
1322
|
-
},
|
|
1322
|
+
}, ae = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), oe = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), se = class extends e {
|
|
1323
1323
|
static formAssociated = !0;
|
|
1324
1324
|
_accessibleName() {
|
|
1325
1325
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
@@ -1378,7 +1378,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1378
1378
|
return this._values.slice();
|
|
1379
1379
|
}
|
|
1380
1380
|
set values(e) {
|
|
1381
|
-
if (this._values = Array.isArray(e) ? e.map(String) : [],
|
|
1381
|
+
if (this._values = Array.isArray(e) ? e.map(String) : [], d(this, this._values.join(",")), this._rendered) {
|
|
1382
1382
|
this._renderControl();
|
|
1383
1383
|
let e = this.querySelector(".search-select-input");
|
|
1384
1384
|
this._renderOptions(e ? e.value : "");
|
|
@@ -1397,7 +1397,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1397
1397
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
1398
1398
|
label: e.innerHTML,
|
|
1399
1399
|
icon: e.getAttribute("icon") || void 0,
|
|
1400
|
-
[
|
|
1400
|
+
[h]: !0,
|
|
1401
1401
|
selected: e.hasAttribute("selected")
|
|
1402
1402
|
})));
|
|
1403
1403
|
}
|
|
@@ -1410,36 +1410,36 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1410
1410
|
}
|
|
1411
1411
|
_labelHtmlFor(e) {
|
|
1412
1412
|
let t = this._readOptions().find((t) => String(t.value) === String(e));
|
|
1413
|
-
return t ?
|
|
1413
|
+
return t ? v(t) : g(e);
|
|
1414
1414
|
}
|
|
1415
1415
|
render() {
|
|
1416
1416
|
this._snapshotDeclared();
|
|
1417
1417
|
let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…", n = this.getAttribute("icon"), r = this.getAttribute("size"), i = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "";
|
|
1418
|
-
|
|
1418
|
+
d(this, this._values.join(",")), this.id ||= `wui-multiselect-${Math.random().toString(36).slice(2, 9)}`;
|
|
1419
1419
|
let a = `${this.id}-listbox`;
|
|
1420
1420
|
this._listboxId = a, this.innerHTML = `
|
|
1421
1421
|
<div class="search-select${i}">
|
|
1422
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${
|
|
1423
|
-
${n ?
|
|
1422
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${P(a)}" aria-label="${P(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
|
|
1423
|
+
${n ? p(n, { className: "search-select-icon" }) : ""}
|
|
1424
1424
|
<div class="ms-chips" data-chips></div>
|
|
1425
|
-
${
|
|
1425
|
+
${p("chevron-down", { className: "search-select-caret" })}
|
|
1426
1426
|
</div>
|
|
1427
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${
|
|
1428
|
-
${e ? `<div class="search-select-search">${
|
|
1427
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${P(a)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
1428
|
+
${e ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${P(t)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
|
|
1429
1429
|
<div class="search-select-options"></div>
|
|
1430
1430
|
<div class="search-select-empty" hidden>No matches</div>
|
|
1431
1431
|
</div>
|
|
1432
|
-
</div>`, this._rendered = !0,
|
|
1432
|
+
</div>`, this._rendered = !0, d(this, this._values.join(",")), this._renderControl(), this._renderOptions(), this._wire();
|
|
1433
1433
|
}
|
|
1434
1434
|
_renderControl() {
|
|
1435
1435
|
let e = this.querySelector("[data-chips]");
|
|
1436
1436
|
if (!e) return;
|
|
1437
1437
|
let t = this.getAttribute("placeholder") || "Select…";
|
|
1438
1438
|
if (!this._values.length) {
|
|
1439
|
-
e.innerHTML = `<span class="search-select-placeholder">${
|
|
1439
|
+
e.innerHTML = `<span class="search-select-placeholder">${g(t)}</span>`;
|
|
1440
1440
|
return;
|
|
1441
1441
|
}
|
|
1442
|
-
e.innerHTML = 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="${
|
|
1442
|
+
e.innerHTML = 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="${P(e)}" aria-label="Remove ${P(F(this._labelFor(e)))}">${p("x")}</button></span>`).join(""), this._collapseChips();
|
|
1443
1443
|
}
|
|
1444
1444
|
_collapseChips() {
|
|
1445
1445
|
let e = this.querySelector("[data-chips]");
|
|
@@ -1463,28 +1463,28 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1463
1463
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
1464
1464
|
if (!t) return;
|
|
1465
1465
|
let r = (e || "").trim().toLowerCase(), i = this._readOptions();
|
|
1466
|
-
r && (i = i.filter((e) =>
|
|
1466
|
+
r && (i = i.filter((e) => F(e.label).toLowerCase().includes(r)));
|
|
1467
1467
|
let a = this._listboxId || `${this.id || "wui-multiselect"}-listbox`;
|
|
1468
1468
|
t.innerHTML = i.map((e, t) => {
|
|
1469
1469
|
let n = this._values.includes(String(e.value));
|
|
1470
|
-
return `<button type="button" role="option" id="${
|
|
1470
|
+
return `<button type="button" role="option" id="${P(`${a}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${P(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
|
|
1471
1471
|
}).join(""), n && (n.hidden = i.length > 0), this._active = -1, this.querySelector(".search-select-control")?.removeAttribute("aria-activedescendant"), this._reanchor?.();
|
|
1472
1472
|
}
|
|
1473
1473
|
_wire() {
|
|
1474
1474
|
this._teardown();
|
|
1475
1475
|
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");
|
|
1476
1476
|
if (!e || !t) return;
|
|
1477
|
-
let a = () => this.hasAttribute("disabled"),
|
|
1478
|
-
let n =
|
|
1477
|
+
let a = () => this.hasAttribute("disabled"), o = () => s(e, t, { matchWidth: !0 }), l = () => [...this.querySelectorAll(".search-select-option")], u = () => l().filter((e) => !e.hidden), f = (t) => {
|
|
1478
|
+
let n = u();
|
|
1479
1479
|
this._active = t;
|
|
1480
1480
|
for (let e of l()) e.classList.remove("is-active");
|
|
1481
1481
|
t >= 0 && n[t] ? (n[t].classList.add("is-active"), n[t].scrollIntoView({ block: "nearest" }), e.setAttribute("aria-activedescendant", n[t].id)) : e.removeAttribute("aria-activedescendant");
|
|
1482
|
-
},
|
|
1483
|
-
a() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"),
|
|
1482
|
+
}, p = () => !t.hidden, h = () => {
|
|
1483
|
+
a() || (t.hidden = !1, e.setAttribute("aria-expanded", "true"), e.classList.add("open"), o(), n && (n.value = "", this._renderOptions(""), n.focus()));
|
|
1484
1484
|
}, g = () => {
|
|
1485
1485
|
t.hidden = !0, e.setAttribute("aria-expanded", "false"), e.classList.remove("open"), f(-1), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
|
|
1486
1486
|
}, _ = () => {
|
|
1487
|
-
|
|
1487
|
+
d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1488
1488
|
}, v = (e) => {
|
|
1489
1489
|
let t = String(e);
|
|
1490
1490
|
this._values.includes(t) ? this._values = this._values.filter((e) => e !== t) : this._values = [...this._values, t], this._renderControl(), this._renderOptions(n ? n.value : ""), _();
|
|
@@ -1498,17 +1498,17 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1498
1498
|
e.stopPropagation(), y(t.dataset.remove);
|
|
1499
1499
|
return;
|
|
1500
1500
|
}
|
|
1501
|
-
|
|
1501
|
+
p() ? g() : h();
|
|
1502
1502
|
}), i.addEventListener("click", (e) => {
|
|
1503
1503
|
let t = e.target.closest(".search-select-option");
|
|
1504
1504
|
t && (v(t.dataset.value), n?.focus());
|
|
1505
1505
|
}), i.addEventListener("mousemove", (e) => {
|
|
1506
1506
|
let t = e.target.closest(".search-select-option");
|
|
1507
|
-
t && f(
|
|
1507
|
+
t && f(u().indexOf(t));
|
|
1508
1508
|
}), i.addEventListener("mouseleave", () => f(-1)), n?.addEventListener("input", () => {
|
|
1509
1509
|
this._renderOptions(n.value), r && (r.hidden = !n.value), f(-1);
|
|
1510
|
-
}), this._navHandler =
|
|
1511
|
-
getVisibleOptions:
|
|
1510
|
+
}), this._navHandler = m({
|
|
1511
|
+
getVisibleOptions: u,
|
|
1512
1512
|
getActive: () => this._active,
|
|
1513
1513
|
setActive: (e) => f(e),
|
|
1514
1514
|
onEnter: (e) => {
|
|
@@ -1528,26 +1528,26 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1528
1528
|
n?.addEventListener("keydown", b), r?.addEventListener("click", () => {
|
|
1529
1529
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
1530
1530
|
}), e.addEventListener("keydown", (e) => {
|
|
1531
|
-
if (
|
|
1531
|
+
if (p()) {
|
|
1532
1532
|
b(e);
|
|
1533
1533
|
return;
|
|
1534
1534
|
}
|
|
1535
1535
|
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
|
|
1536
1536
|
}), this._bindGlobal = () => {
|
|
1537
1537
|
this._teardown(), !this._ro && typeof ResizeObserver < "u" && (this._ro = new ResizeObserver(() => this._collapseChips()), this._ro.observe(this)), this._onDocClick = (e) => {
|
|
1538
|
-
|
|
1539
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
1540
|
-
|
|
1538
|
+
p() && !this.contains(e.target) && g();
|
|
1539
|
+
}, document.addEventListener("click", this._onDocClick), c(this, () => {
|
|
1540
|
+
p() && o();
|
|
1541
1541
|
});
|
|
1542
1542
|
}, this._bindGlobal();
|
|
1543
1543
|
}
|
|
1544
1544
|
_teardown() {
|
|
1545
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null),
|
|
1545
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this), this._navHandler?.teardown();
|
|
1546
1546
|
}
|
|
1547
1547
|
disconnectedCallback() {
|
|
1548
1548
|
this._teardown(), this._ro?.disconnect(), this._ro = null;
|
|
1549
1549
|
}
|
|
1550
|
-
},
|
|
1550
|
+
}, P = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), F = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), ce = /[^0-9]/g, le = /[^0-9a-zA-Z]/g, ue = class extends e {
|
|
1551
1551
|
static formAssociated = !0;
|
|
1552
1552
|
static get observedAttributes() {
|
|
1553
1553
|
return [
|
|
@@ -1575,10 +1575,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1575
1575
|
return this._value ?? "";
|
|
1576
1576
|
}
|
|
1577
1577
|
set value(e) {
|
|
1578
|
-
this._value = this._clean(e),
|
|
1578
|
+
this._value = this._clean(e), d(this, this._value), this._paint();
|
|
1579
1579
|
}
|
|
1580
1580
|
_clean(e) {
|
|
1581
|
-
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ?
|
|
1581
|
+
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? le : ce, "").slice(0, this.length);
|
|
1582
1582
|
}
|
|
1583
1583
|
constructor() {
|
|
1584
1584
|
super();
|
|
@@ -1592,10 +1592,10 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1592
1592
|
this._rendered ? this._onSelectionChange && document.addEventListener("selectionchange", this._onSelectionChange) : (this._defaultCaptured ||= (this._defaultValue = this._value, !0), this.render());
|
|
1593
1593
|
}
|
|
1594
1594
|
formResetCallback() {
|
|
1595
|
-
this._value = this._defaultValue || "",
|
|
1595
|
+
this._value = this._defaultValue || "", d(this, this._value), this._paint();
|
|
1596
1596
|
}
|
|
1597
1597
|
attributeChangedCallback(e, t, n) {
|
|
1598
|
-
this._rendered && (e === "value" ? (this._value = this._clean(n),
|
|
1598
|
+
this._rendered && (e === "value" ? (this._value = this._clean(n), d(this, this._value), this._paint()) : this.render());
|
|
1599
1599
|
}
|
|
1600
1600
|
render() {
|
|
1601
1601
|
this._value = this._clean(this.getAttribute("value") ?? this._value);
|
|
@@ -1613,7 +1613,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1613
1613
|
spellcheck="false"
|
|
1614
1614
|
${n ? "disabled" : ""} />
|
|
1615
1615
|
<div class="otp-slots" aria-hidden="true">${r}</div>
|
|
1616
|
-
</div>`, this._rendered = !0,
|
|
1616
|
+
</div>`, this._rendered = !0, d(this, this._value), this._wire(), this._paint();
|
|
1617
1617
|
}
|
|
1618
1618
|
_refs() {
|
|
1619
1619
|
return {
|
|
@@ -1635,7 +1635,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1635
1635
|
if (!e) return;
|
|
1636
1636
|
let t = (e) => {
|
|
1637
1637
|
let t = this._clean(e), n = t !== this._value;
|
|
1638
|
-
this._value = t,
|
|
1638
|
+
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", {
|
|
1639
1639
|
bubbles: !0,
|
|
1640
1640
|
detail: t
|
|
1641
1641
|
}));
|
|
@@ -1669,7 +1669,7 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
1669
1669
|
disconnectedCallback() {
|
|
1670
1670
|
this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
|
|
1671
1671
|
}
|
|
1672
|
-
},
|
|
1672
|
+
}, de = [
|
|
1673
1673
|
[
|
|
1674
1674
|
"AF",
|
|
1675
1675
|
"Afghanistan",
|
|
@@ -2895,65 +2895,65 @@ var m = Symbol("wui.trustedHtml"), h = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
2895
2895
|
"Zimbabwe",
|
|
2896
2896
|
"263"
|
|
2897
2897
|
]
|
|
2898
|
-
],
|
|
2898
|
+
], I = (e) => (de.find((t) => t[0] === e) || [
|
|
2899
2899
|
"",
|
|
2900
2900
|
"",
|
|
2901
2901
|
""
|
|
2902
|
-
])[2],
|
|
2903
|
-
function
|
|
2904
|
-
return
|
|
2902
|
+
])[2], L = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, R = null, z = null;
|
|
2903
|
+
function fe() {
|
|
2904
|
+
return R ? Promise.resolve(R) : (z ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (R = {
|
|
2905
2905
|
AsYouType: e.AsYouType,
|
|
2906
2906
|
getExampleNumber: e.getExampleNumber,
|
|
2907
2907
|
isValidPhoneNumber: e.isValidPhoneNumber,
|
|
2908
2908
|
parsePhoneNumber: e.parsePhoneNumber,
|
|
2909
2909
|
examples: t.default || t
|
|
2910
|
-
},
|
|
2910
|
+
}, R)).catch(() => null), z);
|
|
2911
2911
|
}
|
|
2912
|
-
function
|
|
2913
|
-
if (!
|
|
2912
|
+
function B(e, t) {
|
|
2913
|
+
if (!R || !t) return t;
|
|
2914
2914
|
try {
|
|
2915
|
-
return new
|
|
2915
|
+
return new R.AsYouType(e).input(t);
|
|
2916
2916
|
} catch {
|
|
2917
2917
|
return t;
|
|
2918
2918
|
}
|
|
2919
2919
|
}
|
|
2920
|
-
function
|
|
2920
|
+
function pe(e, t) {
|
|
2921
2921
|
if (t <= 0) return 0;
|
|
2922
2922
|
let n = 0;
|
|
2923
2923
|
for (let r = 0; r < e.length; r++) if (/[0-9]/.test(e[r]) && (n += 1, n === t)) return r + 1;
|
|
2924
2924
|
return e.length;
|
|
2925
2925
|
}
|
|
2926
|
-
function
|
|
2927
|
-
if (!
|
|
2926
|
+
function V(e) {
|
|
2927
|
+
if (!R) return null;
|
|
2928
2928
|
try {
|
|
2929
|
-
return
|
|
2929
|
+
return R.getExampleNumber(e, R.examples)?.formatNational() || null;
|
|
2930
2930
|
} catch {
|
|
2931
2931
|
return null;
|
|
2932
2932
|
}
|
|
2933
2933
|
}
|
|
2934
|
-
function
|
|
2935
|
-
if (!
|
|
2934
|
+
function H(e) {
|
|
2935
|
+
if (!R || !e) return null;
|
|
2936
2936
|
try {
|
|
2937
|
-
if (!
|
|
2938
|
-
let t =
|
|
2937
|
+
if (!R.isValidPhoneNumber(e)) return !1;
|
|
2938
|
+
let t = R.parsePhoneNumber(e)?.getType?.();
|
|
2939
2939
|
return t === void 0 || t === "MOBILE" || t === "FIXED_LINE_OR_MOBILE";
|
|
2940
2940
|
} catch {
|
|
2941
2941
|
return null;
|
|
2942
2942
|
}
|
|
2943
2943
|
}
|
|
2944
|
-
function
|
|
2945
|
-
if (!
|
|
2944
|
+
function me(e) {
|
|
2945
|
+
if (!R) return null;
|
|
2946
2946
|
try {
|
|
2947
|
-
let t =
|
|
2947
|
+
let t = R.getExampleNumber(e, R.examples);
|
|
2948
2948
|
return t?.nationalNumber ? t.nationalNumber.length : null;
|
|
2949
2949
|
} catch {
|
|
2950
2950
|
return null;
|
|
2951
2951
|
}
|
|
2952
2952
|
}
|
|
2953
|
-
function
|
|
2954
|
-
if (!
|
|
2953
|
+
function he(e) {
|
|
2954
|
+
if (!R || !e?.trim().startsWith("+")) return null;
|
|
2955
2955
|
try {
|
|
2956
|
-
let t = new
|
|
2956
|
+
let t = new R.AsYouType();
|
|
2957
2957
|
t.input(e.trim());
|
|
2958
2958
|
let n = t.getCountry();
|
|
2959
2959
|
return n ? {
|
|
@@ -2964,7 +2964,7 @@ function V(e) {
|
|
|
2964
2964
|
return null;
|
|
2965
2965
|
}
|
|
2966
2966
|
}
|
|
2967
|
-
var
|
|
2967
|
+
var ge = class extends e {
|
|
2968
2968
|
static formAssociated = !0;
|
|
2969
2969
|
static get observedAttributes() {
|
|
2970
2970
|
return [
|
|
@@ -3011,19 +3011,19 @@ var H = class extends HTMLElement {
|
|
|
3011
3011
|
this.value = this._defaultValue || "";
|
|
3012
3012
|
}
|
|
3013
3013
|
get value() {
|
|
3014
|
-
return this._national ? `+${
|
|
3014
|
+
return this._national ? `+${I(this._country)}${this._national}` : "";
|
|
3015
3015
|
}
|
|
3016
3016
|
set value(e) {
|
|
3017
|
-
let t = String(e ?? "").trim(), n =
|
|
3017
|
+
let t = String(e ?? "").trim(), n = he(t);
|
|
3018
3018
|
if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
|
|
3019
3019
|
else if (t.startsWith("+")) {
|
|
3020
|
-
let e = t.replace(/[^0-9]/g, ""), n = String(
|
|
3020
|
+
let e = t.replace(/[^0-9]/g, ""), n = String(I(this._country));
|
|
3021
3021
|
n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
|
|
3022
3022
|
} else this._national = t.replace(/[^0-9]/g, "");
|
|
3023
3023
|
n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
|
|
3024
3024
|
}
|
|
3025
3025
|
_syncMirror() {
|
|
3026
|
-
|
|
3026
|
+
d(this, this.value);
|
|
3027
3027
|
}
|
|
3028
3028
|
_emitInput() {
|
|
3029
3029
|
this.dispatchEvent(new Event("input", { bubbles: !0 }));
|
|
@@ -3033,27 +3033,27 @@ var H = class extends HTMLElement {
|
|
|
3033
3033
|
}
|
|
3034
3034
|
render() {
|
|
3035
3035
|
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._country = this.getAttribute("country") || this._country;
|
|
3036
|
-
let e = this.getAttribute("placeholder") ||
|
|
3036
|
+
let e = this.getAttribute("placeholder") || V(this._country) || "Enter phone number";
|
|
3037
3037
|
this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
|
|
3038
3038
|
let t = `${this.id}-listbox`;
|
|
3039
3039
|
this._listboxId = t;
|
|
3040
|
-
let n =
|
|
3040
|
+
let n = de.map(([e, n, r], i) => `<button type="button" role="option" id="${U(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${L(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
|
|
3041
3041
|
this.innerHTML = `
|
|
3042
3042
|
<div class="phone-input-wrap">
|
|
3043
3043
|
<div class="phone-country-adornment">
|
|
3044
3044
|
<button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${U(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
3045
|
-
<span class="${
|
|
3046
|
-
${
|
|
3047
|
-
<span class="phone-dial" data-dial>+${
|
|
3045
|
+
<span class="${L(this._country)}" data-flag aria-hidden="true"></span>
|
|
3046
|
+
${p("chevron-down", { className: "phone-chevron" })}
|
|
3047
|
+
<span class="phone-dial" data-dial>+${I(this._country)}</span>
|
|
3048
3048
|
</button>
|
|
3049
3049
|
<div class="country-dropdown-menu" role="listbox" id="${U(t)}" tabindex="-1" hidden>
|
|
3050
|
-
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${
|
|
3050
|
+
<div class="dropdown-search-wrapper"><span class="dropdown-search-icon">${p("search")}</span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" aria-controls="${U(t)}" aria-autocomplete="list" /></div>
|
|
3051
3051
|
<div class="country-list-scroll">${n}<div class="country-empty" hidden>No countries found</div></div>
|
|
3052
3052
|
</div>
|
|
3053
3053
|
</div>
|
|
3054
|
-
<input type="tel" class="input" placeholder="${U(e)}" value="${U(
|
|
3054
|
+
<input type="tel" class="input" placeholder="${U(e)}" value="${U(B(this._country, this._national))}"${this.getAttribute("aria-label") ? ` aria-label="${U(this.getAttribute("aria-label"))}"` : ""}${this.getAttribute("aria-describedby") ? ` aria-describedby="${U(this.getAttribute("aria-describedby"))}"` : ""}${this.hasAttribute("required") ? " required aria-required=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""} />
|
|
3055
3055
|
</div>
|
|
3056
|
-
<div class="field-error" data-phone-error hidden></div>`, this._rendered = !0,
|
|
3056
|
+
<div class="field-error" data-phone-error hidden></div>`, this._rendered = !0, d(this, this.value), this._wire();
|
|
3057
3057
|
}
|
|
3058
3058
|
_itemEls() {
|
|
3059
3059
|
return [...this.querySelectorAll(".country-dropdown-item")];
|
|
@@ -3063,9 +3063,9 @@ var H = class extends HTMLElement {
|
|
|
3063
3063
|
}
|
|
3064
3064
|
_wire() {
|
|
3065
3065
|
this._teardown();
|
|
3066
|
-
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"),
|
|
3066
|
+
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]"), u = this.querySelector("[data-flag]"), d = this.querySelector("[data-dial]");
|
|
3067
3067
|
if (!e || !n) return;
|
|
3068
|
-
let f = () => !n.hidden, p = () =>
|
|
3068
|
+
let f = () => !n.hidden, p = () => s(t || e, n), m = (e) => {
|
|
3069
3069
|
let t = this._visibleItems();
|
|
3070
3070
|
this._active = e;
|
|
3071
3071
|
for (let e of this._itemEls()) e.classList.remove("is-active");
|
|
@@ -3082,12 +3082,12 @@ var H = class extends HTMLElement {
|
|
|
3082
3082
|
}
|
|
3083
3083
|
a && (a.hidden = n > 0);
|
|
3084
3084
|
}, v = (e) => {
|
|
3085
|
-
this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className =
|
|
3085
|
+
this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className = L(e)), d && (d.textContent = `+${I(e)}`);
|
|
3086
3086
|
for (let t of this._itemEls()) {
|
|
3087
3087
|
let n = t.dataset.iso === e;
|
|
3088
3088
|
t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
|
|
3089
3089
|
}
|
|
3090
|
-
!this.getAttribute("placeholder") &&
|
|
3090
|
+
!this.getAttribute("placeholder") && o && (o.placeholder = V(e) || "Enter phone number"), o && this._national && (o.value = B(e, this._national)), g(), this._syncMirror(), this._emitChange(), o?.focus();
|
|
3091
3091
|
}, y = (t) => {
|
|
3092
3092
|
let n = this._visibleItems();
|
|
3093
3093
|
if (t.key === "ArrowDown") {
|
|
@@ -3119,42 +3119,42 @@ var H = class extends HTMLElement {
|
|
|
3119
3119
|
t && m(this._visibleItems().indexOf(t));
|
|
3120
3120
|
}), i.addEventListener("mouseleave", () => m(-1)), n.addEventListener("keydown", y);
|
|
3121
3121
|
let b = this.querySelector("[data-phone-error]"), x = (e) => {
|
|
3122
|
-
if (
|
|
3122
|
+
if (o.classList.toggle("is-invalid", e), e ? o.setAttribute("aria-invalid", "true") : o.removeAttribute("aria-invalid"), b) {
|
|
3123
3123
|
if (e) {
|
|
3124
|
-
let e =
|
|
3124
|
+
let e = V(this._country);
|
|
3125
3125
|
b.textContent = e ? `Enter a valid phone number, e.g. ${e}` : "Enter a valid phone number";
|
|
3126
3126
|
}
|
|
3127
3127
|
b.hidden = !e;
|
|
3128
3128
|
}
|
|
3129
3129
|
};
|
|
3130
|
-
|
|
3130
|
+
o.addEventListener("input", (e) => {
|
|
3131
3131
|
e.stopPropagation();
|
|
3132
|
-
let t =
|
|
3132
|
+
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 = me(this._country);
|
|
3133
3133
|
i && r.length > i && (r = r.slice(0, i)), this._national = r;
|
|
3134
|
-
let a =
|
|
3135
|
-
if (
|
|
3136
|
-
|
|
3137
|
-
let e =
|
|
3138
|
-
|
|
3134
|
+
let a = B(this._country, this._national);
|
|
3135
|
+
if (o.value !== a) {
|
|
3136
|
+
o.value = a;
|
|
3137
|
+
let e = pe(a, Math.min(n, r.length));
|
|
3138
|
+
o.setSelectionRange(e, e);
|
|
3139
3139
|
}
|
|
3140
|
-
this._syncMirror(), this._emitInput(),
|
|
3141
|
-
}),
|
|
3142
|
-
x(this._national.length > 0 &&
|
|
3143
|
-
}),
|
|
3144
|
-
let t =
|
|
3145
|
-
t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ?
|
|
3140
|
+
this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || H(this.value) === !0) && x(!1);
|
|
3141
|
+
}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
|
|
3142
|
+
x(this._national.length > 0 && H(this.value) === !1), this.value !== this._committedValue && this._emitChange();
|
|
3143
|
+
}), o.addEventListener("paste", (e) => {
|
|
3144
|
+
let t = he(e.clipboardData?.getData("text"));
|
|
3145
|
+
t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = B(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
|
|
3146
3146
|
}), this._bindGlobal = () => {
|
|
3147
3147
|
this._teardownGlobals?.(), this._onDocClick = (e) => {
|
|
3148
3148
|
f() && !this.contains(e.target) && g();
|
|
3149
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
3149
|
+
}, document.addEventListener("click", this._onDocClick), c(this, () => {
|
|
3150
3150
|
f() && p();
|
|
3151
3151
|
});
|
|
3152
3152
|
}, this._teardownGlobals = () => {
|
|
3153
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null),
|
|
3154
|
-
}, this._bindGlobal(),
|
|
3155
|
-
if (!(!e || !
|
|
3156
|
-
let e =
|
|
3157
|
-
e && (
|
|
3153
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this);
|
|
3154
|
+
}, this._bindGlobal(), fe().then((e) => {
|
|
3155
|
+
if (!(!e || !o.isConnected) && (this._national && (o.value = B(this._country, this._national)), !this.getAttribute("placeholder"))) {
|
|
3156
|
+
let e = V(this._country);
|
|
3157
|
+
e && (o.placeholder = e);
|
|
3158
3158
|
}
|
|
3159
3159
|
}), this._syncMirror();
|
|
3160
3160
|
}
|
|
@@ -3164,7 +3164,7 @@ var H = class extends HTMLElement {
|
|
|
3164
3164
|
disconnectedCallback() {
|
|
3165
3165
|
this._teardown();
|
|
3166
3166
|
}
|
|
3167
|
-
}, U = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"),
|
|
3167
|
+
}, U = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), _e = class extends e {
|
|
3168
3168
|
static formAssociated = !0;
|
|
3169
3169
|
static get observedAttributes() {
|
|
3170
3170
|
return [
|
|
@@ -3223,7 +3223,7 @@ var H = class extends HTMLElement {
|
|
|
3223
3223
|
return this._value;
|
|
3224
3224
|
}
|
|
3225
3225
|
set value(e) {
|
|
3226
|
-
this._value = e == null ? "" : String(e),
|
|
3226
|
+
this._value = e == null ? "" : String(e), d(this, this._value), this._syncSelected(), this._syncReset();
|
|
3227
3227
|
}
|
|
3228
3228
|
set options(e) {
|
|
3229
3229
|
this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
|
|
@@ -3238,7 +3238,7 @@ var H = class extends HTMLElement {
|
|
|
3238
3238
|
value: e.getAttribute("value") ?? e.textContent.trim(),
|
|
3239
3239
|
label: e.innerHTML,
|
|
3240
3240
|
icon: e.getAttribute("icon") || void 0,
|
|
3241
|
-
[
|
|
3241
|
+
[h]: !0,
|
|
3242
3242
|
selected: e.hasAttribute("selected")
|
|
3243
3243
|
})));
|
|
3244
3244
|
}
|
|
@@ -3248,27 +3248,27 @@ var H = class extends HTMLElement {
|
|
|
3248
3248
|
render() {
|
|
3249
3249
|
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || ""), this._snapshotDeclared();
|
|
3250
3250
|
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);
|
|
3251
|
-
l && (this._value = String(l.value)),
|
|
3252
|
-
let
|
|
3253
|
-
this._listboxId =
|
|
3254
|
-
let
|
|
3251
|
+
l && (this._value = String(l.value)), d(this, this._value), this.id ||= `wui-select-${Math.random().toString(36).slice(2, 9)}`;
|
|
3252
|
+
let u = `${this.id}-listbox`;
|
|
3253
|
+
this._listboxId = u;
|
|
3254
|
+
let f = e.map((e, t) => {
|
|
3255
3255
|
let n = String(e.value) === String(this._value);
|
|
3256
|
-
return `<button type="button" role="option" id="${W(`${
|
|
3256
|
+
return `<button type="button" role="option" id="${W(`${u}-opt-${t}`)}" class="search-select-option${n ? " selected" : ""}" data-value="${W(e.value)}" aria-selected="${n}">${v(e)}</button>`;
|
|
3257
3257
|
}).join("");
|
|
3258
3258
|
this.innerHTML = `
|
|
3259
3259
|
<div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${i}">
|
|
3260
|
-
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(
|
|
3261
|
-
${a ?
|
|
3262
|
-
${o ? `<span class="search-select-prefix">${
|
|
3263
|
-
<span class="${l ? "" : "search-select-placeholder"}" data-label>${l ?
|
|
3264
|
-
${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${
|
|
3265
|
-
${
|
|
3260
|
+
<button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${W(u)}" aria-label="${W(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
3261
|
+
${a ? p(a, { className: "search-select-icon" }) : ""}
|
|
3262
|
+
${o ? `<span class="search-select-prefix">${g(o)}</span>` : ""}
|
|
3263
|
+
<span class="${l ? "" : "search-select-placeholder"}" data-label>${l ? v(l) : g(s)}</span>
|
|
3264
|
+
${n ? `<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${p("x")}</span>` : ""}
|
|
3265
|
+
${p("chevron-down", { className: "search-select-caret" })}
|
|
3266
3266
|
</button>
|
|
3267
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(
|
|
3268
|
-
${t ? `<div class="search-select-search">${
|
|
3269
|
-
<div class="search-select-options">${
|
|
3267
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${W(u)}" tabindex="-1" hidden>
|
|
3268
|
+
${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${W(c)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
|
|
3269
|
+
<div class="search-select-options">${f}<div class="search-select-empty" hidden>No matches</div></div>
|
|
3270
3270
|
</div>
|
|
3271
|
-
</div>`, this._rendered = !0,
|
|
3271
|
+
</div>`, this._rendered = !0, d(this, this._value), this._wire(), this._syncReset();
|
|
3272
3272
|
}
|
|
3273
3273
|
_refs() {
|
|
3274
3274
|
return {
|
|
@@ -3294,7 +3294,7 @@ var H = class extends HTMLElement {
|
|
|
3294
3294
|
let t = e.dataset.value === String(this._value);
|
|
3295
3295
|
e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
|
|
3296
3296
|
}
|
|
3297
|
-
e && (e.innerHTML = t ?
|
|
3297
|
+
e && (e.innerHTML = t ? v(t) : g(this.getAttribute("placeholder") || "Select..."), e.classList.toggle("search-select-placeholder", !t));
|
|
3298
3298
|
}
|
|
3299
3299
|
_syncReset() {
|
|
3300
3300
|
let { reset: e } = this._refs();
|
|
@@ -3307,8 +3307,8 @@ var H = class extends HTMLElement {
|
|
|
3307
3307
|
let t = () => {
|
|
3308
3308
|
if (this.hasAttribute("compact")) {
|
|
3309
3309
|
let t = e.control.getBoundingClientRect();
|
|
3310
|
-
e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px",
|
|
3311
|
-
} else
|
|
3310
|
+
e.menu.style.width = "max-content", e.menu.style.minWidth = `${t.width}px`, e.menu.style.maxWidth = "280px", s(e.control, e.menu);
|
|
3311
|
+
} else s(e.control, e.menu, { matchWidth: !0 });
|
|
3312
3312
|
}, n = (t) => {
|
|
3313
3313
|
let n = this._visible();
|
|
3314
3314
|
this._active = t;
|
|
@@ -3323,12 +3323,12 @@ var H = class extends HTMLElement {
|
|
|
3323
3323
|
e.empty && (e.empty.hidden = i > 0), e.clear && (e.clear.hidden = !r), e.menu.hidden || t();
|
|
3324
3324
|
}, i = () => !e.menu.hidden, a = () => {
|
|
3325
3325
|
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")));
|
|
3326
|
-
},
|
|
3326
|
+
}, o = () => {
|
|
3327
3327
|
e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), n(-1);
|
|
3328
3328
|
}, l = (t) => {
|
|
3329
|
-
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })),
|
|
3329
|
+
this.value = t.dataset.value, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.control.focus();
|
|
3330
3330
|
};
|
|
3331
|
-
this._navHandler =
|
|
3331
|
+
this._navHandler = m({
|
|
3332
3332
|
getVisibleOptions: () => this._visible(),
|
|
3333
3333
|
getActive: () => this._active,
|
|
3334
3334
|
setActive: (e) => n(e),
|
|
@@ -3336,11 +3336,11 @@ var H = class extends HTMLElement {
|
|
|
3336
3336
|
e && l(e);
|
|
3337
3337
|
},
|
|
3338
3338
|
onEscape: () => {
|
|
3339
|
-
this._navHandler.clearTypeahead(),
|
|
3339
|
+
this._navHandler.clearTypeahead(), o(), e.control.focus();
|
|
3340
3340
|
}
|
|
3341
3341
|
}), e.reset?.addEventListener("click", (t) => {
|
|
3342
3342
|
t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
|
|
3343
|
-
}), e.control.addEventListener("click", () => i() ?
|
|
3343
|
+
}), e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
|
|
3344
3344
|
if (i()) {
|
|
3345
3345
|
this._navHandler.handler(e);
|
|
3346
3346
|
return;
|
|
@@ -3358,19 +3358,19 @@ var H = class extends HTMLElement {
|
|
|
3358
3358
|
e.search.value = "", r(""), e.search.focus();
|
|
3359
3359
|
}), e.menu.addEventListener("keydown", this._navHandler.handler), this._bindGlobal = () => {
|
|
3360
3360
|
this._teardown(), this._onDocClick = (e) => {
|
|
3361
|
-
i() && !this.contains(e.target) &&
|
|
3362
|
-
}, document.addEventListener("click", this._onDocClick),
|
|
3361
|
+
i() && !this.contains(e.target) && o();
|
|
3362
|
+
}, document.addEventListener("click", this._onDocClick), c(this, () => {
|
|
3363
3363
|
i() && t();
|
|
3364
3364
|
});
|
|
3365
3365
|
}, this._bindGlobal();
|
|
3366
3366
|
}
|
|
3367
3367
|
_teardown() {
|
|
3368
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null),
|
|
3368
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this), this._navHandler?.teardown();
|
|
3369
3369
|
}
|
|
3370
3370
|
disconnectedCallback() {
|
|
3371
3371
|
this._teardown();
|
|
3372
3372
|
}
|
|
3373
|
-
}, W = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"),
|
|
3373
|
+
}, W = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), ve = class extends e {
|
|
3374
3374
|
static formAssociated = !0;
|
|
3375
3375
|
static get observedAttributes() {
|
|
3376
3376
|
return [
|
|
@@ -3512,7 +3512,7 @@ var H = class extends HTMLElement {
|
|
|
3512
3512
|
aria-valuenow="${this._value}"
|
|
3513
3513
|
aria-valuetext="${this._formatValue(this._value)}"
|
|
3514
3514
|
${a ? "disabled" : ""}
|
|
3515
|
-
aria-label="${
|
|
3515
|
+
aria-label="${ye(this.getAttribute("aria-label") || "Value")}"
|
|
3516
3516
|
></button>
|
|
3517
3517
|
`}
|
|
3518
3518
|
${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>` : ""}
|
|
@@ -3545,7 +3545,7 @@ var H = class extends HTMLElement {
|
|
|
3545
3545
|
this._isRange() ? this._syncRangeMirrors() : this._syncSingleMirror();
|
|
3546
3546
|
}
|
|
3547
3547
|
_syncSingleMirror() {
|
|
3548
|
-
this.getAttribute("name") &&
|
|
3548
|
+
this.getAttribute("name") && d(this, String(this._value));
|
|
3549
3549
|
}
|
|
3550
3550
|
_syncRangeMirrors() {
|
|
3551
3551
|
let e = this.getAttribute("start-name") || this.getAttribute("name"), t = this.getAttribute("end-name");
|
|
@@ -3615,7 +3615,7 @@ var H = class extends HTMLElement {
|
|
|
3615
3615
|
}, G = (e, t) => {
|
|
3616
3616
|
let n = Number.parseFloat(e);
|
|
3617
3617
|
return Number.isFinite(n) ? n : t;
|
|
3618
|
-
},
|
|
3618
|
+
}, ye = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), be = class extends e {
|
|
3619
3619
|
static formAssociated = !0;
|
|
3620
3620
|
_accessibleName() {
|
|
3621
3621
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
|
|
@@ -3681,17 +3681,17 @@ var H = class extends HTMLElement {
|
|
|
3681
3681
|
return this._values.slice();
|
|
3682
3682
|
}
|
|
3683
3683
|
set values(e) {
|
|
3684
|
-
this._values = Array.isArray(e) ? e.map(String) : [],
|
|
3684
|
+
this._values = Array.isArray(e) ? e.map(String) : [], d(this, this._values.join(",")), this._rendered && this._renderControl();
|
|
3685
3685
|
}
|
|
3686
3686
|
render() {
|
|
3687
3687
|
let e = this.getAttribute("size"), t = e === "sm" ? " search-select-sm" : e === "lg" ? " search-select-lg" : "";
|
|
3688
|
-
|
|
3688
|
+
d(this, this._values.join(",")), this.innerHTML = `
|
|
3689
3689
|
<div class="search-select${t}">
|
|
3690
3690
|
<div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
|
|
3691
3691
|
<input type="text" class="ms-input" data-input aria-label="${K(this._accessibleName())}" placeholder="${K(this.getAttribute("placeholder") || "Add…")}" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""}/>
|
|
3692
3692
|
<div class="ms-chips" data-chips></div>
|
|
3693
3693
|
</div>
|
|
3694
|
-
</div>`, this._rendered = !0,
|
|
3694
|
+
</div>`, this._rendered = !0, d(this, this._values.join(",")), this._renderControl(), this._wire();
|
|
3695
3695
|
}
|
|
3696
3696
|
_renderControl() {
|
|
3697
3697
|
let e = this.querySelector("[data-chips]");
|
|
@@ -3700,7 +3700,7 @@ var H = class extends HTMLElement {
|
|
|
3700
3700
|
e.innerHTML = "";
|
|
3701
3701
|
return;
|
|
3702
3702
|
}
|
|
3703
|
-
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${
|
|
3703
|
+
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="${K(e)}" aria-label="Remove ${K(e)}">${p("x")}</button></span>`).join("");
|
|
3704
3704
|
}
|
|
3705
3705
|
}
|
|
3706
3706
|
_wire() {
|
|
@@ -3710,7 +3710,7 @@ var H = class extends HTMLElement {
|
|
|
3710
3710
|
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 = /* @__PURE__ */ new Set();
|
|
3711
3711
|
for (let e of r) e === "enter" ? o.add("Enter") : e === "comma" ? o.add(",") : e === "space" ? o.add(" ") : e === "tab" && o.add("Tab");
|
|
3712
3712
|
let s = () => {
|
|
3713
|
-
|
|
3713
|
+
d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
3714
3714
|
}, c = (e) => {
|
|
3715
3715
|
let t = e.trim();
|
|
3716
3716
|
if (!t || i && this._values.length >= parseInt(i, 10)) return;
|
|
@@ -3718,7 +3718,7 @@ var H = class extends HTMLElement {
|
|
|
3718
3718
|
(!this._values.some((e) => a ? e === t : e.toLowerCase() === n) || a) && (this._values.push(t), this._renderControl(), s());
|
|
3719
3719
|
}, l = (e) => {
|
|
3720
3720
|
this._values = this._values.filter((t) => t !== e), this._renderControl(), s();
|
|
3721
|
-
},
|
|
3721
|
+
}, u = (e) => {
|
|
3722
3722
|
if (e.key === "Enter" && o.has("Enter")) {
|
|
3723
3723
|
e.preventDefault(), c(t.value), t.value = "";
|
|
3724
3724
|
return;
|
|
@@ -3759,7 +3759,7 @@ var H = class extends HTMLElement {
|
|
|
3759
3759
|
return;
|
|
3760
3760
|
}
|
|
3761
3761
|
t.focus();
|
|
3762
|
-
}, this._onInputKey =
|
|
3762
|
+
}, this._onInputKey = u, this._onInputPaste = f, e.addEventListener("click", this._onControlClick), t.addEventListener("keydown", this._onInputKey), t.addEventListener("paste", this._onInputPaste), this._onDocClick = (e) => {
|
|
3763
3763
|
this.contains(e.target) || t.blur();
|
|
3764
3764
|
}, document.addEventListener("click", this._onDocClick);
|
|
3765
3765
|
}
|
|
@@ -3771,7 +3771,7 @@ var H = class extends HTMLElement {
|
|
|
3771
3771
|
disconnectedCallback() {
|
|
3772
3772
|
this._teardown();
|
|
3773
3773
|
}
|
|
3774
|
-
},
|
|
3774
|
+
}, xe = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), K = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), q = (e) => String(e).padStart(2, "0"), Se = (e, t) => `${q(e)}:${q(t)}`, J = (e) => {
|
|
3775
3775
|
let t = /^(\d{2}):(\d{2})$/.exec(e || "");
|
|
3776
3776
|
return t ? {
|
|
3777
3777
|
h: +t[1],
|
|
@@ -3779,10 +3779,10 @@ var H = class extends HTMLElement {
|
|
|
3779
3779
|
} : null;
|
|
3780
3780
|
}, Y = (e, t = "24") => {
|
|
3781
3781
|
if (!e) return "";
|
|
3782
|
-
if (t === "24") return
|
|
3782
|
+
if (t === "24") return Se(e.h, e.m);
|
|
3783
3783
|
let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
|
|
3784
3784
|
return `${n}:${q(e.m)} ${r}`;
|
|
3785
|
-
},
|
|
3785
|
+
}, Ce = class extends e {
|
|
3786
3786
|
static formAssociated = !0;
|
|
3787
3787
|
static get observedAttributes() {
|
|
3788
3788
|
return [
|
|
@@ -3825,22 +3825,22 @@ var H = class extends HTMLElement {
|
|
|
3825
3825
|
return this._value;
|
|
3826
3826
|
}
|
|
3827
3827
|
set value(e) {
|
|
3828
|
-
this._value = e || "",
|
|
3828
|
+
this._value = e || "", d(this, this._value), this._syncTrigger();
|
|
3829
3829
|
}
|
|
3830
3830
|
render() {
|
|
3831
3831
|
this._defaultValue === void 0 && (this._defaultValue = this.getAttribute("value") || "", this._value = this._defaultValue || this._value);
|
|
3832
3832
|
let e = this.getAttribute("placeholder") || "Select time", t = J(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");
|
|
3833
3833
|
this.innerHTML = `
|
|
3834
3834
|
<div class="timepicker">
|
|
3835
|
-
<button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${
|
|
3836
|
-
<span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? Y(t, n) :
|
|
3837
|
-
${
|
|
3835
|
+
<button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
|
|
3836
|
+
<span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? Y(t, n) : g(e)}</span>
|
|
3837
|
+
${p("clock")}
|
|
3838
3838
|
</button>
|
|
3839
3839
|
<div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
|
|
3840
|
-
</div>`, this._rendered = !0,
|
|
3840
|
+
</div>`, this._rendered = !0, d(this, this._value), this._wire();
|
|
3841
3841
|
}
|
|
3842
3842
|
_syncFormValue() {
|
|
3843
|
-
|
|
3843
|
+
d(this, this._value);
|
|
3844
3844
|
}
|
|
3845
3845
|
_syncTrigger() {
|
|
3846
3846
|
let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
@@ -3867,7 +3867,7 @@ var H = class extends HTMLElement {
|
|
|
3867
3867
|
if (!e) return;
|
|
3868
3868
|
let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = J(this._value), i = this._focus, a = "";
|
|
3869
3869
|
for (let e = 0; e < n.length; e++) {
|
|
3870
|
-
let o = n[e], s =
|
|
3870
|
+
let o = n[e], s = Se(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
|
|
3871
3871
|
a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${Y(o, t)}</button>`;
|
|
3872
3872
|
}
|
|
3873
3873
|
e.innerHTML = a, this._focusActive();
|
|
@@ -3877,7 +3877,7 @@ var H = class extends HTMLElement {
|
|
|
3877
3877
|
t && !e.hidden && t.focus();
|
|
3878
3878
|
}
|
|
3879
3879
|
_position(e, t) {
|
|
3880
|
-
|
|
3880
|
+
s(e, t);
|
|
3881
3881
|
}
|
|
3882
3882
|
_onKey(e) {
|
|
3883
3883
|
let t = [...this.querySelector(".timepicker-pop").querySelectorAll(".timepicker-option")];
|
|
@@ -3955,18 +3955,18 @@ var H = class extends HTMLElement {
|
|
|
3955
3955
|
this._popClick = !1, r() && !t && !this.contains(e.target) && this._close();
|
|
3956
3956
|
}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
|
|
3957
3957
|
r() && e.key === "Escape" && this._close();
|
|
3958
|
-
}, document.addEventListener("keydown", this._onDocKey),
|
|
3958
|
+
}, document.addEventListener("keydown", this._onDocKey), c(this, () => {
|
|
3959
3959
|
r() && this._position(e, t);
|
|
3960
3960
|
});
|
|
3961
3961
|
}, this._bindGlobal(), this._syncFormValue();
|
|
3962
3962
|
}
|
|
3963
3963
|
_teardown() {
|
|
3964
|
-
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null),
|
|
3964
|
+
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), this._onDocKey &&= (document.removeEventListener("keydown", this._onDocKey), null), l(this), clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null, this._typeahead = "";
|
|
3965
3965
|
}
|
|
3966
3966
|
disconnectedCallback() {
|
|
3967
3967
|
this._teardown();
|
|
3968
3968
|
}
|
|
3969
|
-
},
|
|
3969
|
+
}, we = "wui-wizard-step", Te = class extends e {
|
|
3970
3970
|
static get observedAttributes() {
|
|
3971
3971
|
return [
|
|
3972
3972
|
"active",
|
|
@@ -4000,7 +4000,7 @@ var H = class extends HTMLElement {
|
|
|
4000
4000
|
this._beforeNext = typeof e == "function" ? e : null;
|
|
4001
4001
|
}
|
|
4002
4002
|
get _steps() {
|
|
4003
|
-
return [...this.querySelectorAll(`:scope > ${
|
|
4003
|
+
return [...this.querySelectorAll(`:scope > ${we}`)];
|
|
4004
4004
|
}
|
|
4005
4005
|
refresh() {
|
|
4006
4006
|
this._rendered && this._renderChrome();
|
|
@@ -4058,14 +4058,14 @@ var H = class extends HTMLElement {
|
|
|
4058
4058
|
let i = this.hasAttribute("non-linear");
|
|
4059
4059
|
return e.map((e, r) => {
|
|
4060
4060
|
let a = this._stepStatus(e, r), o = e.getAttribute("label") || "", s = e.getAttribute("description") || "", c = e.getAttribute("icon") || "", l = r + 1, u;
|
|
4061
|
-
u = a === "done" ?
|
|
4062
|
-
let d = a === "pending" ? "step" : `step ${a}`,
|
|
4063
|
-
return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${X(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${X(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${X(o)}</span>${h}`, m ? `<button type="button" class="${d}" data-step="${r}"${
|
|
4061
|
+
u = a === "done" ? p("check") : a === "error" ? p("alert-triangle") : a === "skipped" ? p("minus") : c ? p(c) : String(l);
|
|
4062
|
+
let d = a === "pending" ? "step" : `step ${a}`, f = a === "active" ? " aria-current=\"step\"" : "", m = i || r < this._active, h = s ? `<span class="step-desc">${X(s)}</span>` : "", g;
|
|
4063
|
+
return g = t ? `<span class="step-circle">${u}</span><span class="step-text"><span class="step-index">Step ${l}</span><span class="step-label">${X(o)}</span>${h}</span>` : n ? `<span class="step-circle">${u}</span><span class="step-index">Step ${l}</span><span class="step-label">${X(o)}</span>${h}` : `<span class="step-circle">${u}</span><span class="step-label">${X(o)}</span>${h}`, m ? `<button type="button" class="${d}" data-step="${r}"${f}>${g}</button>` : `<div class="${d}"${f}>${g}</div>`;
|
|
4064
4064
|
}).join("");
|
|
4065
4065
|
}
|
|
4066
4066
|
_footerHtml(e) {
|
|
4067
4067
|
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";
|
|
4068
|
-
return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${
|
|
4068
|
+
return `${t > 0 ? `<button type="button" class="btn btn-secondary" data-nav="back"${r}>${p("arrow-left", { className: "me-2" })}${X(a)}</button>` : "<span></span>"}<span class="wizard-footer-actions">${i && t < n ? `<button type="button" class="btn btn-subtle" data-nav="skip"${r}>${X(s)}</button>` : ""}${t < n ? `<button type="button" class="btn btn-primary" data-nav="next"${r}>${X(o)}${p("arrow-right", { className: "ms-2" })}</button>` : `<button type="button" class="btn btn-primary" data-nav="finish"${r}>${X(c)}</button>`}</span>`;
|
|
4069
4069
|
}
|
|
4070
4070
|
_wire() {
|
|
4071
4071
|
this._teardown(), this._onHeaderClick = (e) => {
|
|
@@ -4133,7 +4133,7 @@ var H = class extends HTMLElement {
|
|
|
4133
4133
|
_reflectActive(e) {
|
|
4134
4134
|
this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
|
|
4135
4135
|
}
|
|
4136
|
-
}, X = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"),
|
|
4136
|
+
}, X = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), Ee = class extends e {
|
|
4137
4137
|
static get observedAttributes() {
|
|
4138
4138
|
return [
|
|
4139
4139
|
"label",
|
|
@@ -4147,8 +4147,8 @@ var H = class extends HTMLElement {
|
|
|
4147
4147
|
let e = this.closest("wui-wizard");
|
|
4148
4148
|
e && typeof e.refresh == "function" && e.refresh();
|
|
4149
4149
|
}
|
|
4150
|
-
},
|
|
4151
|
-
async function
|
|
4150
|
+
}, De = 2e3;
|
|
4151
|
+
async function Oe(e) {
|
|
4152
4152
|
try {
|
|
4153
4153
|
if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
|
|
4154
4154
|
} catch {}
|
|
@@ -4163,14 +4163,14 @@ async function De(e) {
|
|
|
4163
4163
|
}
|
|
4164
4164
|
//#endregion
|
|
4165
4165
|
//#region src/fileValidation.js
|
|
4166
|
-
var
|
|
4166
|
+
var ke = "image/png,image/jpeg,image/webp", Ae = 5, je = {
|
|
4167
4167
|
"image/png": [".png"],
|
|
4168
4168
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
4169
4169
|
"image/webp": [".webp"],
|
|
4170
4170
|
"image/gif": [".gif"],
|
|
4171
4171
|
"image/svg+xml": [".svg"],
|
|
4172
4172
|
"application/pdf": [".pdf"]
|
|
4173
|
-
},
|
|
4173
|
+
}, Me = {
|
|
4174
4174
|
"image/png": "PNG",
|
|
4175
4175
|
"image/jpeg": "JPG",
|
|
4176
4176
|
"image/webp": "WEBP",
|
|
@@ -4184,7 +4184,7 @@ var Oe = "image/png,image/jpeg,image/webp", ke = 5, Ae = {
|
|
|
4184
4184
|
".gif": "GIF",
|
|
4185
4185
|
".svg": "SVG",
|
|
4186
4186
|
".pdf": "PDF"
|
|
4187
|
-
}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean),
|
|
4187
|
+
}, Z = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), Ne = [
|
|
4188
4188
|
".png",
|
|
4189
4189
|
".jpg",
|
|
4190
4190
|
".jpeg",
|
|
@@ -4195,35 +4195,35 @@ var Oe = "image/png,image/jpeg,image/webp", ke = 5, Ae = {
|
|
|
4195
4195
|
".avif",
|
|
4196
4196
|
".heic"
|
|
4197
4197
|
];
|
|
4198
|
-
function
|
|
4198
|
+
function Pe(e) {
|
|
4199
4199
|
if (!e) return !1;
|
|
4200
4200
|
let t = typeof e == "object" && e.type ? String(e.type).toLowerCase() : "";
|
|
4201
4201
|
if (t) return t.startsWith("image/");
|
|
4202
4202
|
let n = typeof e == "string" ? e : e.name || e.url || "", r = String(n).toLowerCase();
|
|
4203
|
-
return
|
|
4203
|
+
return Ne.some((e) => r.endsWith(e));
|
|
4204
4204
|
}
|
|
4205
|
-
function
|
|
4205
|
+
function Fe(e) {
|
|
4206
4206
|
let t = Z(e);
|
|
4207
|
-
return t.length ? t.every((e) => e.startsWith(".") ?
|
|
4207
|
+
return t.length ? t.every((e) => e.startsWith(".") ? Ne.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
|
|
4208
4208
|
}
|
|
4209
|
-
function
|
|
4209
|
+
function Ie(e) {
|
|
4210
4210
|
let t = [];
|
|
4211
4211
|
for (let n of Z(e)) {
|
|
4212
|
-
let e =
|
|
4212
|
+
let e = Me[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
4213
4213
|
t.includes(e) || t.push(e);
|
|
4214
4214
|
}
|
|
4215
4215
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
4216
4216
|
}
|
|
4217
|
-
function
|
|
4217
|
+
function Le(e, t) {
|
|
4218
4218
|
let n = Z(t);
|
|
4219
4219
|
if (!n.length) return !0;
|
|
4220
4220
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
4221
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
4221
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (je[e] || []).some((e) => i.endsWith(e)));
|
|
4222
4222
|
}
|
|
4223
|
-
function
|
|
4223
|
+
function Re(e, t = {}) {
|
|
4224
4224
|
if (!e) return null;
|
|
4225
|
-
let n = t.accept === void 0 ?
|
|
4226
|
-
return
|
|
4225
|
+
let n = t.accept === void 0 ? ke : t.accept, r = t.maxSizeMb || 5;
|
|
4226
|
+
return Le(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${Ie(n)} file.`;
|
|
4227
4227
|
}
|
|
4228
4228
|
//#endregion
|
|
4229
4229
|
//#region src/passwordRules.js
|
|
@@ -4234,15 +4234,15 @@ var Q = {
|
|
|
4234
4234
|
digit: !0,
|
|
4235
4235
|
special: !0,
|
|
4236
4236
|
uniqueChars: 0
|
|
4237
|
-
},
|
|
4238
|
-
function
|
|
4237
|
+
}, ze = "Password Requirements";
|
|
4238
|
+
function Be(e) {
|
|
4239
4239
|
return e === !0 || e == null ? { ...Q } : {
|
|
4240
4240
|
...Q,
|
|
4241
4241
|
...e
|
|
4242
4242
|
};
|
|
4243
4243
|
}
|
|
4244
|
-
function
|
|
4245
|
-
let t =
|
|
4244
|
+
function Ve(e) {
|
|
4245
|
+
let t = Be(e), n = [];
|
|
4246
4246
|
if (t.minLength > 0 && n.push({
|
|
4247
4247
|
key: "length",
|
|
4248
4248
|
label: `At least ${t.minLength} characters long`,
|
|
@@ -4273,25 +4273,25 @@ function Be(e) {
|
|
|
4273
4273
|
}
|
|
4274
4274
|
return n;
|
|
4275
4275
|
}
|
|
4276
|
-
function
|
|
4276
|
+
function He(e, t) {
|
|
4277
4277
|
let n = e == null ? "" : String(e);
|
|
4278
|
-
return
|
|
4278
|
+
return Ve(t).map((e) => ({
|
|
4279
4279
|
key: e.key,
|
|
4280
4280
|
label: e.label,
|
|
4281
4281
|
met: e.test(n)
|
|
4282
4282
|
}));
|
|
4283
4283
|
}
|
|
4284
|
-
function
|
|
4285
|
-
return
|
|
4284
|
+
function Ue(e, t) {
|
|
4285
|
+
return He(e, t).every((e) => e.met);
|
|
4286
4286
|
}
|
|
4287
4287
|
//#endregion
|
|
4288
4288
|
//#region src/index.js
|
|
4289
4289
|
var $ = (e, t) => {
|
|
4290
4290
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
4291
4291
|
};
|
|
4292
|
-
function
|
|
4293
|
-
$("wui-select",
|
|
4292
|
+
function We() {
|
|
4293
|
+
$("wui-select", _e), $("wui-phone", ge), $("wui-datepicker", ee), $("wui-date-range", A), $("wui-dock", te), $("wui-feedback", N), $("wui-slider", ve), $("wui-timepicker", Ce), $("wui-autocomplete", y), $("wui-multiselect", se), $("wui-taginput", be), $("wui-otp", ue), $("wui-status-icon", r), $("wui-wizard-step", Ee), $("wui-wizard", Te);
|
|
4294
4294
|
}
|
|
4295
|
-
|
|
4295
|
+
We();
|
|
4296
4296
|
//#endregion
|
|
4297
|
-
export {
|
|
4297
|
+
export { De as COPY_FEEDBACK_MS, ke as DEFAULT_IMAGE_ACCEPT, Ae as DEFAULT_MAX_SIZE_MB, Q as DEFAULT_PASSWORD_RULES, ze as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, ee as WuiDatePicker, A as WuiDateRange, te as WuiDock, N as WuiFeedback, se as WuiMultiSelect, ue as WuiOtp, ge as WuiPhone, _e as WuiSelect, ve as WuiSlider, r as WuiStatusIcon, be as WuiTagInput, Ce as WuiTimePicker, Te as WuiWizard, Ee as WuiWizardStep, Ie as acceptLabel, Ve as buildPasswordRules, Oe as copyTextToClipboard, We as defineWeborityElements, He as evaluatePassword, p as glyphSvg, Pe as isImageFile, Fe as isImageOnlyAccept, Le as matchesAccept, Ue as passwordSatisfies, Re as validateFile };
|