@webority/ui-elements 0.13.1 → 0.13.4
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 +44 -73
- package/dist/ui-elements.js +177 -363
- package/package.json +1 -1
package/dist/ui-elements.js
CHANGED
|
@@ -715,7 +715,7 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
715
715
|
max-width: none;
|
|
716
716
|
}
|
|
717
717
|
}
|
|
718
|
-
`, w = "wui-consent-save",
|
|
718
|
+
`, w = "wui-consent-save", T = "[data-consent-settings]", E = {
|
|
719
719
|
heading: "Cookies on this site",
|
|
720
720
|
description: "We use cookies to understand how the site is used and to measure our campaigns. You can change your choice at any time.",
|
|
721
721
|
policyLabel: "Cookie policy",
|
|
@@ -731,11 +731,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
731
731
|
rejectLabel: "Reject all",
|
|
732
732
|
acceptLabel: "Accept all",
|
|
733
733
|
saveLabel: "Save preferences"
|
|
734
|
-
},
|
|
734
|
+
}, te = [
|
|
735
735
|
"analytics",
|
|
736
736
|
"functional",
|
|
737
737
|
"marketing"
|
|
738
|
-
],
|
|
738
|
+
], ne = 0, re = class extends e {
|
|
739
739
|
static get observedAttributes() {
|
|
740
740
|
return [
|
|
741
741
|
"heading",
|
|
@@ -748,12 +748,12 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
748
748
|
];
|
|
749
749
|
}
|
|
750
750
|
constructor() {
|
|
751
|
-
super(),
|
|
751
|
+
super(), ne += 1, this._uid = `wui-consent-${ne}`, this._preferences = {
|
|
752
752
|
analytics: !1,
|
|
753
753
|
functional: !1,
|
|
754
754
|
marketing: !1
|
|
755
755
|
}, this._settings = !1, this._onDocumentClick = (e) => {
|
|
756
|
-
e.target instanceof Element && e.target.closest(
|
|
756
|
+
e.target instanceof Element && e.target.closest(T) && (e.preventDefault(), this.open({
|
|
757
757
|
settings: !0,
|
|
758
758
|
focus: !0
|
|
759
759
|
}));
|
|
@@ -772,13 +772,13 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
772
772
|
this.toggleAttribute("standalone", e === !0 || e === "" || e === "true");
|
|
773
773
|
}
|
|
774
774
|
get heading() {
|
|
775
|
-
return this.getAttribute("heading") ||
|
|
775
|
+
return this.getAttribute("heading") || E.heading;
|
|
776
776
|
}
|
|
777
777
|
set heading(e) {
|
|
778
778
|
this.setAttribute("heading", String(e ?? ""));
|
|
779
779
|
}
|
|
780
780
|
get description() {
|
|
781
|
-
return this.getAttribute("description") ||
|
|
781
|
+
return this.getAttribute("description") || E.description;
|
|
782
782
|
}
|
|
783
783
|
set description(e) {
|
|
784
784
|
this.setAttribute("description", String(e ?? ""));
|
|
@@ -790,25 +790,25 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
790
790
|
this.setAttribute("policy-href", String(e ?? ""));
|
|
791
791
|
}
|
|
792
792
|
get policyLabel() {
|
|
793
|
-
return this.getAttribute("policy-label") ||
|
|
793
|
+
return this.getAttribute("policy-label") || E.policyLabel;
|
|
794
794
|
}
|
|
795
795
|
set policyLabel(e) {
|
|
796
796
|
this.setAttribute("policy-label", String(e ?? ""));
|
|
797
797
|
}
|
|
798
798
|
get analyticsDescription() {
|
|
799
|
-
return this.getAttribute("analytics-description") ||
|
|
799
|
+
return this.getAttribute("analytics-description") || E.analyticsDescription;
|
|
800
800
|
}
|
|
801
801
|
set analyticsDescription(e) {
|
|
802
802
|
this.setAttribute("analytics-description", String(e ?? ""));
|
|
803
803
|
}
|
|
804
804
|
get functionalDescription() {
|
|
805
|
-
return this.getAttribute("functional-description") ||
|
|
805
|
+
return this.getAttribute("functional-description") || E.functionalDescription;
|
|
806
806
|
}
|
|
807
807
|
set functionalDescription(e) {
|
|
808
808
|
this.setAttribute("functional-description", String(e ?? ""));
|
|
809
809
|
}
|
|
810
810
|
get marketingDescription() {
|
|
811
|
-
return this.getAttribute("marketing-description") ||
|
|
811
|
+
return this.getAttribute("marketing-description") || E.marketingDescription;
|
|
812
812
|
}
|
|
813
813
|
set marketingDescription(e) {
|
|
814
814
|
this.setAttribute("marketing-description", String(e ?? ""));
|
|
@@ -836,22 +836,22 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
836
836
|
this._rendered && this.render();
|
|
837
837
|
}
|
|
838
838
|
render() {
|
|
839
|
-
let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${
|
|
839
|
+
let e = this.isOpen, t = this._uid, n = this.policyHref ? ` <a class="wui-consent-banner-policy" href="${ie(this.policyHref)}">${O(this.policyLabel)}</a>` : "", r = this._root();
|
|
840
840
|
r.innerHTML = `${r === this ? "" : `<style>${ee}</style>`}
|
|
841
841
|
<div class="wui-consent-banner-panel" role="dialog" aria-labelledby="${t}-heading" aria-describedby="${t}-description" hidden>
|
|
842
|
-
<h2 class="wui-consent-banner-heading" id="${t}-heading">${
|
|
843
|
-
<p class="wui-consent-banner-description" id="${t}-description">${
|
|
842
|
+
<h2 class="wui-consent-banner-heading" id="${t}-heading">${O(this.heading)}</h2>
|
|
843
|
+
<p class="wui-consent-banner-description" id="${t}-description">${O(this.description)}${n}</p>
|
|
844
844
|
<div class="wui-consent-banner-settings" hidden>
|
|
845
|
-
${
|
|
846
|
-
${
|
|
847
|
-
${
|
|
848
|
-
${
|
|
845
|
+
${D(t, "essential", E.essentialLabel, E.essentialDescription, !0)}
|
|
846
|
+
${D(t, "analytics", E.analyticsLabel, this.analyticsDescription, !1)}
|
|
847
|
+
${D(t, "functional", E.functionalLabel, this.functionalDescription, !1)}
|
|
848
|
+
${D(t, "marketing", E.marketingLabel, this.marketingDescription, !1)}
|
|
849
849
|
</div>
|
|
850
850
|
<div class="wui-consent-banner-actions">
|
|
851
|
-
<button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${
|
|
852
|
-
<button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${
|
|
853
|
-
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${
|
|
854
|
-
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${
|
|
851
|
+
<button type="button" class="btn btn-sm btn-link wui-consent-banner-settings-toggle" aria-expanded="false">${E.settingsLabel}</button>
|
|
852
|
+
<button type="button" class="btn btn-sm btn-outline-secondary wui-consent-banner-reject">${E.rejectLabel}</button>
|
|
853
|
+
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-accept">${E.acceptLabel}</button>
|
|
854
|
+
<button type="button" class="btn btn-sm btn-primary wui-consent-banner-save" hidden>${E.saveLabel}</button>
|
|
855
855
|
</div>
|
|
856
856
|
</div>`, this._rendered = !0, this._wire(), this._applyPreferences(), this._showSettings(this._settings), e && (this._panel().hidden = !1);
|
|
857
857
|
}
|
|
@@ -889,11 +889,11 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
889
889
|
}
|
|
890
890
|
_switchValues() {
|
|
891
891
|
let e = {};
|
|
892
|
-
for (let t of
|
|
892
|
+
for (let t of te) e[t] = this._root().querySelector(`input[data-category="${t}"]`)?.checked === !0;
|
|
893
893
|
return e;
|
|
894
894
|
}
|
|
895
895
|
_applyPreferences() {
|
|
896
|
-
for (let e of
|
|
896
|
+
for (let e of te) {
|
|
897
897
|
let t = this._root().querySelector(`input[data-category="${e}"]`);
|
|
898
898
|
t && (t.checked = this._preferences[e]);
|
|
899
899
|
}
|
|
@@ -911,17 +911,17 @@ var h = Symbol("wui.trustedHtml"), g = (e) => String(e ?? "").replace(/&/g, "&am
|
|
|
911
911
|
}
|
|
912
912
|
}
|
|
913
913
|
};
|
|
914
|
-
function
|
|
914
|
+
function D(e, t, n, r, i) {
|
|
915
915
|
let a = `${e}-${t}`;
|
|
916
916
|
return `<div class="wui-consent-banner-category">
|
|
917
917
|
<div class="form-check form-switch">
|
|
918
918
|
<input class="form-check-input" type="checkbox" role="switch" id="${a}" data-category="${t}"${i ? " checked disabled" : ""} />
|
|
919
|
-
<label class="form-check-label" for="${a}">${
|
|
919
|
+
<label class="form-check-label" for="${a}">${O(n)}</label>
|
|
920
920
|
</div>
|
|
921
|
-
<p class="wui-consent-banner-category-description">${
|
|
921
|
+
<p class="wui-consent-banner-category-description">${O(r)}</p>
|
|
922
922
|
</div>`;
|
|
923
923
|
}
|
|
924
|
-
var
|
|
924
|
+
var O = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), ie = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), k = [
|
|
925
925
|
"January",
|
|
926
926
|
"February",
|
|
927
927
|
"March",
|
|
@@ -934,7 +934,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
934
934
|
"October",
|
|
935
935
|
"November",
|
|
936
936
|
"December"
|
|
937
|
-
],
|
|
937
|
+
], A = [
|
|
938
938
|
"Su",
|
|
939
939
|
"Mo",
|
|
940
940
|
"Tu",
|
|
@@ -942,7 +942,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
942
942
|
"Th",
|
|
943
943
|
"Fr",
|
|
944
944
|
"Sa"
|
|
945
|
-
],
|
|
945
|
+
], ae = (e) => String(e).padStart(2, "0"), j = (e, t, n) => `${e}-${ae(t + 1)}-${ae(n)}`, M = (e) => {
|
|
946
946
|
let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
|
|
947
947
|
return t ? {
|
|
948
948
|
y: +t[1],
|
|
@@ -951,7 +951,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
951
951
|
} : null;
|
|
952
952
|
}, N = (e) => {
|
|
953
953
|
let t = M(e);
|
|
954
|
-
return t ? `${
|
|
954
|
+
return t ? `${ae(t.d)} ${k[t.m].slice(0, 3)} ${t.y}` : "";
|
|
955
955
|
}, P = (e, t) => new Date(e, t + 1, 0).getDate(), F = (e, t) => {
|
|
956
956
|
for (; t < 0;) t += 12, --e;
|
|
957
957
|
for (; t > 11;) t -= 12, e += 1;
|
|
@@ -1079,11 +1079,11 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
1079
1079
|
for (let e = 1; e <= n; e++) c += s(this._viewY, this._viewM, e, !1);
|
|
1080
1080
|
let d = F(this._viewY, this._viewM + 1), f = (7 - (t + n) % 7) % 7;
|
|
1081
1081
|
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
1082
|
-
let m =
|
|
1082
|
+
let m = A.map((t, n) => A[(n + e) % 7]).map((e) => `<span>${e}</span>`).join("");
|
|
1083
1083
|
return `
|
|
1084
1084
|
<div class="datepicker-head">
|
|
1085
1085
|
<button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month">${p("chevron-left")}</button>
|
|
1086
|
-
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${
|
|
1086
|
+
<button type="button" class="datepicker-month" data-view="months" aria-label="Choose month and year">${k[this._viewM]} ${this._viewY}</button>
|
|
1087
1087
|
<button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month">${p("chevron-right")}</button>
|
|
1088
1088
|
</div>
|
|
1089
1089
|
<div class="datepicker-weekdays">${m}</div>
|
|
@@ -1101,7 +1101,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
1101
1101
|
o ? "is-today" : "",
|
|
1102
1102
|
a ? "is-selected" : ""
|
|
1103
1103
|
].filter(Boolean).join(" ");
|
|
1104
|
-
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${
|
|
1104
|
+
r += `<button type="button" class="${c}" data-month="${i}"${s ? " disabled" : ""}>${k[i].slice(0, 3)}</button>`;
|
|
1105
1105
|
}
|
|
1106
1106
|
return `
|
|
1107
1107
|
<div class="datepicker-head">
|
|
@@ -1388,7 +1388,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
1388
1388
|
};
|
|
1389
1389
|
}
|
|
1390
1390
|
_monthHtml(e, t) {
|
|
1391
|
-
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = P(e, t), a = this._limits(), o =
|
|
1391
|
+
let n = this._firstDay(), r = (new Date(e, t, 1).getDay() - n + 7) % 7, i = P(e, t), a = this._limits(), o = A.map((e, t) => A[(t + n) % 7]).map((e) => `<span>${e}</span>`).join(""), s = (e, t, n, r) => {
|
|
1392
1392
|
let i = j(e, t, n), o = a(e, t, n);
|
|
1393
1393
|
return `<button type="button" class="${["datepicker-day", r ? "is-outside" : ""].filter(Boolean).join(" ")}" data-iso="${i}"${o ? " disabled" : ""}>${n}</button>`;
|
|
1394
1394
|
}, c = "", l = F(e, t - 1), u = P(l.y, l.m);
|
|
@@ -1398,7 +1398,7 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
1398
1398
|
for (let e = 1; e <= f; e++) c += s(d.y, d.m, e, !0);
|
|
1399
1399
|
return `
|
|
1400
1400
|
<div class="daterange-cal">
|
|
1401
|
-
<div class="datepicker-month-label">${
|
|
1401
|
+
<div class="datepicker-month-label">${k[t]} ${e}</div>
|
|
1402
1402
|
<div class="datepicker-weekdays">${o}</div>
|
|
1403
1403
|
<div class="datepicker-grid" role="grid">${c}</div>
|
|
1404
1404
|
</div>`;
|
|
@@ -1549,209 +1549,23 @@ var D = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").repl
|
|
|
1549
1549
|
}, le = (e, t) => {
|
|
1550
1550
|
let n = Number.parseFloat(e);
|
|
1551
1551
|
return Number.isFinite(n) ? n : t;
|
|
1552
|
-
}, ue =
|
|
1553
|
-
label: "Feedback",
|
|
1554
|
-
heading: "Share feedback",
|
|
1555
|
-
placeholder: "What's working, what isn't?",
|
|
1556
|
-
emailLabel: "Email (optional)",
|
|
1557
|
-
submitLabel: "Send feedback",
|
|
1558
|
-
sendingLabel: "Sending…",
|
|
1559
|
-
messageLabel: "Your message",
|
|
1560
|
-
emptyError: "Please write a message before sending.",
|
|
1561
|
-
failedError: "That didn't send. Please try again.",
|
|
1562
|
-
thanks: "Thanks — we've got it."
|
|
1563
|
-
}, de = 1e4, fe = 1600, pe = class extends e {
|
|
1564
|
-
static get observedAttributes() {
|
|
1565
|
-
return [
|
|
1566
|
-
"position",
|
|
1567
|
-
"label",
|
|
1568
|
-
"heading",
|
|
1569
|
-
"placeholder",
|
|
1570
|
-
"collect-email",
|
|
1571
|
-
"surface",
|
|
1572
|
-
"screen"
|
|
1573
|
-
];
|
|
1574
|
-
}
|
|
1575
|
-
constructor() {
|
|
1576
|
-
super(), this._state = "idle", this._submitListeners = 0, this._timer = 0, this._thanksTimer = 0;
|
|
1577
|
-
}
|
|
1578
|
-
get position() {
|
|
1579
|
-
return this.getAttribute("position") === "bottom-left" ? "bottom-left" : "bottom-right";
|
|
1580
|
-
}
|
|
1581
|
-
set position(e) {
|
|
1582
|
-
this.setAttribute("position", String(e ?? "bottom-right"));
|
|
1583
|
-
}
|
|
1584
|
-
get label() {
|
|
1585
|
-
return this.getAttribute("label") || I.label;
|
|
1586
|
-
}
|
|
1587
|
-
set label(e) {
|
|
1588
|
-
this.setAttribute("label", String(e ?? ""));
|
|
1589
|
-
}
|
|
1590
|
-
get heading() {
|
|
1591
|
-
return this.getAttribute("heading") || I.heading;
|
|
1592
|
-
}
|
|
1593
|
-
set heading(e) {
|
|
1594
|
-
this.setAttribute("heading", String(e ?? ""));
|
|
1595
|
-
}
|
|
1596
|
-
get placeholder() {
|
|
1597
|
-
return this.getAttribute("placeholder") || I.placeholder;
|
|
1598
|
-
}
|
|
1599
|
-
set placeholder(e) {
|
|
1600
|
-
this.setAttribute("placeholder", String(e ?? ""));
|
|
1601
|
-
}
|
|
1602
|
-
get collectEmail() {
|
|
1603
|
-
return this.hasAttribute("collect-email");
|
|
1604
|
-
}
|
|
1605
|
-
set collectEmail(e) {
|
|
1606
|
-
e ? this.setAttribute("collect-email", "") : this.removeAttribute("collect-email");
|
|
1607
|
-
}
|
|
1608
|
-
get isOpen() {
|
|
1609
|
-
return this._open === !0;
|
|
1610
|
-
}
|
|
1611
|
-
addEventListener(e, t, n) {
|
|
1612
|
-
e === ue && (this._submitListeners += 1), super.addEventListener(e, t, n);
|
|
1613
|
-
}
|
|
1614
|
-
removeEventListener(e, t, n) {
|
|
1615
|
-
e === ue && this._submitListeners > 0 && --this._submitListeners, super.removeEventListener(e, t, n);
|
|
1616
|
-
}
|
|
1617
|
-
connectedCallback() {
|
|
1618
|
-
this._rendered || this.render();
|
|
1619
|
-
}
|
|
1620
|
-
disconnectedCallback() {
|
|
1621
|
-
this._clearTimers();
|
|
1622
|
-
}
|
|
1623
|
-
attributeChangedCallback(e, t, n) {
|
|
1624
|
-
this._rendered && e !== "position" && this.render();
|
|
1625
|
-
}
|
|
1626
|
-
render() {
|
|
1627
|
-
let e = this._open === !0, t = this._refs().message?.value ?? "", n = this._refs().email?.value ?? "";
|
|
1628
|
-
this.innerHTML = `
|
|
1629
|
-
<button type="button" class="feedback-trigger" aria-expanded="false" aria-haspopup="dialog">
|
|
1630
|
-
<span class="feedback-trigger-icon" aria-hidden="true">${p("message-square", { size: 18 })}</span>
|
|
1631
|
-
<span class="feedback-trigger-label">${me(this.label)}</span>
|
|
1632
|
-
</button>
|
|
1633
|
-
<div class="feedback-panel" role="dialog" aria-label="${he(this.heading)}" hidden>
|
|
1634
|
-
<div class="feedback-head">
|
|
1635
|
-
<h2 class="feedback-heading">${me(this.heading)}</h2>
|
|
1636
|
-
<button type="button" class="feedback-close" aria-label="Close">${p("x", { size: 16 })}</button>
|
|
1637
|
-
</div>
|
|
1638
|
-
<div class="feedback-body">
|
|
1639
|
-
<label class="feedback-field">
|
|
1640
|
-
<span class="feedback-field-label">${I.messageLabel}</span>
|
|
1641
|
-
<textarea class="feedback-message" rows="4" required placeholder="${he(this.placeholder)}"></textarea>
|
|
1642
|
-
</label>
|
|
1643
|
-
${this.collectEmail ? `<label class="feedback-field">
|
|
1644
|
-
<span class="feedback-field-label">${I.emailLabel}</span>
|
|
1645
|
-
<input type="email" class="feedback-email" autocomplete="email" placeholder="you@example.com" />
|
|
1646
|
-
</label>` : ""}
|
|
1647
|
-
<p class="feedback-error" role="alert" hidden></p>
|
|
1648
|
-
</div>
|
|
1649
|
-
<div class="feedback-actions">
|
|
1650
|
-
<button type="button" class="feedback-cancel">Cancel</button>
|
|
1651
|
-
<button type="button" class="feedback-submit">${I.submitLabel}</button>
|
|
1652
|
-
</div>
|
|
1653
|
-
<div class="feedback-thanks" hidden>
|
|
1654
|
-
<span class="feedback-thanks-icon" aria-hidden="true">${p("check-circle", { size: 20 })}</span>
|
|
1655
|
-
<span class="feedback-thanks-text">${I.thanks}</span>
|
|
1656
|
-
</div>
|
|
1657
|
-
</div>`, this._rendered = !0, this._wire();
|
|
1658
|
-
let r = this._refs();
|
|
1659
|
-
r.message && (r.message.value = t), r.email && (r.email.value = n), e && this.open({ focus: !1 });
|
|
1660
|
-
}
|
|
1661
|
-
_refs() {
|
|
1662
|
-
return {
|
|
1663
|
-
trigger: this.querySelector(".feedback-trigger"),
|
|
1664
|
-
panel: this.querySelector(".feedback-panel"),
|
|
1665
|
-
close: this.querySelector(".feedback-close"),
|
|
1666
|
-
cancel: this.querySelector(".feedback-cancel"),
|
|
1667
|
-
submit: this.querySelector(".feedback-submit"),
|
|
1668
|
-
message: this.querySelector(".feedback-message"),
|
|
1669
|
-
email: this.querySelector(".feedback-email"),
|
|
1670
|
-
error: this.querySelector(".feedback-error"),
|
|
1671
|
-
thanks: this.querySelector(".feedback-thanks")
|
|
1672
|
-
};
|
|
1673
|
-
}
|
|
1674
|
-
_wire() {
|
|
1675
|
-
let { trigger: e, close: t, cancel: n, submit: r } = this._refs();
|
|
1676
|
-
e?.addEventListener("click", () => this.isOpen ? this.close() : this.open()), t?.addEventListener("click", () => this.close()), n?.addEventListener("click", () => this.close()), r?.addEventListener("click", () => this._submit()), this._onKeyDown || (this._onKeyDown = (e) => {
|
|
1677
|
-
e.key === "Escape" && this.isOpen && (e.stopPropagation(), this.close());
|
|
1678
|
-
}, this.addEventListener("keydown", this._onKeyDown));
|
|
1679
|
-
}
|
|
1680
|
-
open({ focus: e = !0 } = {}) {
|
|
1681
|
-
let { panel: t, trigger: n, message: r } = this._refs();
|
|
1682
|
-
t && (this._open = !0, t.hidden = !1, this.setAttribute("open", ""), n?.setAttribute("aria-expanded", "true"), e && r?.focus());
|
|
1683
|
-
}
|
|
1684
|
-
close() {
|
|
1685
|
-
let { panel: e, trigger: t } = this._refs();
|
|
1686
|
-
e && (this._open = !1, e.hidden = !0, this.removeAttribute("open"), t?.setAttribute("aria-expanded", "false"), t?.focus());
|
|
1687
|
-
}
|
|
1688
|
-
submitted() {
|
|
1689
|
-
this._clearTimers(), this._state = "done";
|
|
1690
|
-
let { thanks: e, error: t, submit: n, message: r, email: i } = this._refs();
|
|
1691
|
-
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(() => {
|
|
1692
|
-
r && (r.value = ""), i && (i.value = ""), this._reset(), this.close();
|
|
1693
|
-
}, fe);
|
|
1694
|
-
}
|
|
1695
|
-
failed(e) {
|
|
1696
|
-
this._clearTimers(), this._state = "error", this._setBusy(!1);
|
|
1697
|
-
let { error: t, message: n } = this._refs();
|
|
1698
|
-
t && (t.textContent = e || I.failedError, t.hidden = !1), n?.focus();
|
|
1699
|
-
}
|
|
1700
|
-
_submit() {
|
|
1701
|
-
if (this._state === "submitting") return;
|
|
1702
|
-
let { message: e, email: t, error: n } = this._refs(), r = (e?.value ?? "").trim();
|
|
1703
|
-
if (!r) {
|
|
1704
|
-
n && (n.textContent = I.emptyError, n.hidden = !1), e?.focus();
|
|
1705
|
-
return;
|
|
1706
|
-
}
|
|
1707
|
-
n && (n.hidden = !0, n.textContent = ""), this._state = "submitting", this._setBusy(!0);
|
|
1708
|
-
let i = {
|
|
1709
|
-
message: r,
|
|
1710
|
-
email: (t?.value ?? "").trim(),
|
|
1711
|
-
surface: this.getAttribute("surface") || "",
|
|
1712
|
-
screen: this.getAttribute("screen") || ""
|
|
1713
|
-
};
|
|
1714
|
-
if (this.dispatchEvent(new CustomEvent(ue, {
|
|
1715
|
-
bubbles: !0,
|
|
1716
|
-
composed: !0,
|
|
1717
|
-
detail: i
|
|
1718
|
-
})), this._submitListeners === 0) {
|
|
1719
|
-
this._reset();
|
|
1720
|
-
return;
|
|
1721
|
-
}
|
|
1722
|
-
this._timer = setTimeout(() => {
|
|
1723
|
-
this._state === "submitting" && this.failed();
|
|
1724
|
-
}, de);
|
|
1725
|
-
}
|
|
1726
|
-
_setBusy(e) {
|
|
1727
|
-
let { submit: t } = this._refs();
|
|
1728
|
-
t && (t.disabled = e, t.textContent = e ? I.sendingLabel : I.submitLabel, this.toggleAttribute("busy", e));
|
|
1729
|
-
}
|
|
1730
|
-
_reset() {
|
|
1731
|
-
this._clearTimers(), this._state = "idle", this._setBusy(!1);
|
|
1732
|
-
let { thanks: e, submit: t } = this._refs();
|
|
1733
|
-
e && (e.hidden = !0), this.querySelector(".feedback-body")?.removeAttribute("hidden"), this.querySelector(".feedback-actions")?.removeAttribute("hidden"), t && (t.disabled = !1);
|
|
1734
|
-
}
|
|
1735
|
-
_clearTimers() {
|
|
1736
|
-
this._timer &&= (clearTimeout(this._timer), 0), this._thanksTimer &&= (clearTimeout(this._thanksTimer), 0);
|
|
1737
|
-
}
|
|
1738
|
-
}, me = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), he = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), ge = {
|
|
1552
|
+
}, ue = {
|
|
1739
1553
|
enter: "Enter",
|
|
1740
1554
|
comma: ",",
|
|
1741
1555
|
space: " ",
|
|
1742
1556
|
tab: "Tab"
|
|
1743
|
-
},
|
|
1557
|
+
}, de = {
|
|
1744
1558
|
enter: "\n",
|
|
1745
1559
|
comma: ",",
|
|
1746
1560
|
space: " ",
|
|
1747
1561
|
tab: " "
|
|
1748
|
-
},
|
|
1749
|
-
function
|
|
1562
|
+
}, fe = (e) => ue[e], pe = (e) => de[e];
|
|
1563
|
+
function me(e, t) {
|
|
1750
1564
|
let n = [String(e ?? "")];
|
|
1751
1565
|
for (let e of t) n = n.flatMap((t) => t.split(e));
|
|
1752
1566
|
return n.map((e) => e.trim()).filter(Boolean);
|
|
1753
1567
|
}
|
|
1754
|
-
var
|
|
1568
|
+
var I = (e, t) => t.some((t) => String(e ?? "").includes(t)), he = class extends e {
|
|
1755
1569
|
static formAssociated = !0;
|
|
1756
1570
|
_accessibleName() {
|
|
1757
1571
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
|
|
@@ -1851,7 +1665,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
1851
1665
|
[h]: !0,
|
|
1852
1666
|
selected: e.hasAttribute("selected")
|
|
1853
1667
|
};
|
|
1854
|
-
for (let [n, r] of
|
|
1668
|
+
for (let [n, r] of ge) {
|
|
1855
1669
|
let i = e.getAttribute(n);
|
|
1856
1670
|
i && (t[r] = i);
|
|
1857
1671
|
}
|
|
@@ -1882,23 +1696,23 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
1882
1696
|
<div class="search-select${a}">
|
|
1883
1697
|
<div class="input search-select-control search-select-multi"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : ""}>
|
|
1884
1698
|
${r ? p(r, { className: "search-select-icon" }) : ""}
|
|
1885
|
-
<div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${
|
|
1699
|
+
<div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}" aria-describedby="${z(e)}" autocomplete="off"${s ? " disabled" : ""} /></div>
|
|
1886
1700
|
${p("chevron-down", { className: "search-select-caret" })}
|
|
1887
1701
|
</div>
|
|
1888
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${
|
|
1702
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
1889
1703
|
<div class="search-select-options"></div>
|
|
1890
1704
|
</div>
|
|
1891
1705
|
</div>
|
|
1892
|
-
<div class="field-error wui-ms-custom-error" id="${
|
|
1706
|
+
<div class="field-error wui-ms-custom-error" id="${z(e)}" aria-live="polite" hidden></div>`;
|
|
1893
1707
|
} else this.innerHTML = `
|
|
1894
1708
|
<div class="search-select${a}">
|
|
1895
|
-
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${
|
|
1709
|
+
<div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${z(o)}" aria-label="${z(this._accessibleName())}"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${s ? " aria-disabled=\"true\"" : " tabindex=\"0\""}>
|
|
1896
1710
|
${r ? p(r, { className: "search-select-icon" }) : ""}
|
|
1897
1711
|
<div class="ms-chips" data-chips></div>
|
|
1898
1712
|
${p("chevron-down", { className: "search-select-caret" })}
|
|
1899
1713
|
</div>
|
|
1900
|
-
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${
|
|
1901
|
-
${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${
|
|
1714
|
+
<div class="search-select-menu search-select-menu-fixed" role="listbox" id="${z(o)}" aria-multiselectable="true" tabindex="-1" hidden>
|
|
1715
|
+
${t ? `<div class="search-select-search">${p("search")}<input class="search-select-input" placeholder="${z(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${p("x")}</button></div>` : ""}
|
|
1902
1716
|
<div class="search-select-options"></div>
|
|
1903
1717
|
<div class="search-select-empty" hidden>No matches</div>
|
|
1904
1718
|
</div>
|
|
@@ -1908,7 +1722,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
1908
1722
|
_renderControl() {
|
|
1909
1723
|
let e = this.querySelector("[data-chips]");
|
|
1910
1724
|
if (!e) return;
|
|
1911
|
-
let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${
|
|
1725
|
+
let t = this.getAttribute("placeholder") || "Select…", n = this._allowCustom ? e.querySelector("[data-input]") : null, r = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${z(e)}" aria-label="Remove ${z(B(this._labelFor(e)))}">${p("x")}</button></span>`).join("");
|
|
1912
1726
|
if (n) {
|
|
1913
1727
|
for (let t of [...e.querySelectorAll(":scope > .chip")]) t.remove();
|
|
1914
1728
|
n.insertAdjacentHTML("beforebegin", r), n.placeholder = this._values.length ? "" : t, this._collapseChips();
|
|
@@ -1939,11 +1753,11 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
1939
1753
|
i.textContent = `+${t.length - o}`;
|
|
1940
1754
|
}
|
|
1941
1755
|
_matches(e, t) {
|
|
1942
|
-
return
|
|
1756
|
+
return B(e.label).toLowerCase().includes(t) || String(e.description ?? "").toLowerCase().includes(t);
|
|
1943
1757
|
}
|
|
1944
1758
|
_optionNamed(e) {
|
|
1945
1759
|
let t = e.trim().toLowerCase();
|
|
1946
|
-
return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t ||
|
|
1760
|
+
return this._readOptions().find((e) => String(e.value ?? "").toLowerCase() === t || B(e.label).trim().toLowerCase() === t);
|
|
1947
1761
|
}
|
|
1948
1762
|
_renderOptions(e) {
|
|
1949
1763
|
let t = this.querySelector(".search-select-options"), n = this.querySelector(".search-select-empty");
|
|
@@ -1952,9 +1766,9 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
1952
1766
|
i && (a = a.filter((e) => this._matches(e, i)));
|
|
1953
1767
|
let o = this._listboxId || `${this.id || "wui-multiselect"}-listbox`, s = this._allowCustom && r && !this._optionNamed(r), c = a.map((e, t) => {
|
|
1954
1768
|
let n = this._values.includes(String(e.value)), r = `${o}-opt-${t}`;
|
|
1955
|
-
return
|
|
1769
|
+
return _e(e) ? be(e, r, n) : `<button type="button" role="option" id="${z(r)}" class="search-select-option${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${p("check")}</span></button>`;
|
|
1956
1770
|
});
|
|
1957
|
-
s && c.push(`<button type="button" role="option" id="${
|
|
1771
|
+
s && c.push(`<button type="button" role="option" id="${z(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${z(r)}" data-custom="true" aria-selected="false">Add “${g(r)}”</button>`), t.innerHTML = c.join(""), n && (n.hidden = a.length > 0), this._active = -1, this._combobox()?.removeAttribute("aria-activedescendant"), this._allowCustom && this._syncCustomMenu?.(), this._reanchor?.();
|
|
1958
1772
|
}
|
|
1959
1773
|
_combobox() {
|
|
1960
1774
|
return this._allowCustom ? this.querySelector("[data-input]") : this.querySelector(".search-select-control");
|
|
@@ -1967,7 +1781,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
1967
1781
|
_customRefusal(e) {
|
|
1968
1782
|
let t = this.getAttribute("custom-invalid-message") || "Enter a valid value.", n = this.getAttribute("custom-pattern");
|
|
1969
1783
|
if (n) {
|
|
1970
|
-
let r =
|
|
1784
|
+
let r = xe(n);
|
|
1971
1785
|
if (r && !r.test(e)) return t;
|
|
1972
1786
|
}
|
|
1973
1787
|
let r = this._validateCustom;
|
|
@@ -2027,13 +1841,13 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2027
1841
|
}, ee = (e) => {
|
|
2028
1842
|
this._values = this._values.filter((t) => t !== String(e)), this._renderControl(), this._renderOptions(this._query()), S();
|
|
2029
1843
|
}, w = (e, { quiet: t = !1 } = {}) => {
|
|
2030
|
-
let n = this._values.length, r =
|
|
1844
|
+
let n = this._values.length, r = I(e, L) ? me(e, L) : [e], i = [], a = "";
|
|
2031
1845
|
for (let e of r) {
|
|
2032
1846
|
let t = this._commitTyped(e);
|
|
2033
1847
|
t && (i.push(e.trim()), a ||= t);
|
|
2034
1848
|
}
|
|
2035
1849
|
t && i.length || (o.value = i.join(", "), this._setCustomError(a), this._values.length !== n && (this._renderControl(), S()), this._renderOptions(o.value));
|
|
2036
|
-
},
|
|
1850
|
+
}, T = (e) => {
|
|
2037
1851
|
if (!(!e || e.getAttribute("aria-disabled") === "true")) {
|
|
2038
1852
|
if (e.dataset.custom === "true") {
|
|
2039
1853
|
w(e.dataset.value);
|
|
@@ -2057,7 +1871,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2057
1871
|
v() ? x() : b();
|
|
2058
1872
|
}), i.addEventListener("click", (e) => {
|
|
2059
1873
|
let t = e.target.closest(".search-select-option");
|
|
2060
|
-
t && (
|
|
1874
|
+
t && (T(t), (o || n)?.focus());
|
|
2061
1875
|
}), i.addEventListener("mousemove", (e) => {
|
|
2062
1876
|
let t = e.target.closest(".search-select-option");
|
|
2063
1877
|
t && g(h().indexOf(t));
|
|
@@ -2070,13 +1884,13 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2070
1884
|
getActive: () => this._active,
|
|
2071
1885
|
setActive: (e) => g(e),
|
|
2072
1886
|
onEnter: (e) => {
|
|
2073
|
-
e ?
|
|
1887
|
+
e ? T(e) : o?.value.trim() && w(o.value);
|
|
2074
1888
|
},
|
|
2075
1889
|
onEscape: () => {
|
|
2076
1890
|
this._navHandler.clearTypeahead(), x(), o || e.focus();
|
|
2077
1891
|
}
|
|
2078
1892
|
});
|
|
2079
|
-
let
|
|
1893
|
+
let E = (e) => {
|
|
2080
1894
|
let t = o || n;
|
|
2081
1895
|
if (e.key === "Backspace" && !t?.value && this._values.length) {
|
|
2082
1896
|
ee(this._values[this._values.length - 1]);
|
|
@@ -2084,7 +1898,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2084
1898
|
}
|
|
2085
1899
|
this._navHandler.handler(e);
|
|
2086
1900
|
};
|
|
2087
|
-
if (n?.addEventListener("keydown",
|
|
1901
|
+
if (n?.addEventListener("keydown", E), r?.addEventListener("click", () => {
|
|
2088
1902
|
n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
|
|
2089
1903
|
}), o) {
|
|
2090
1904
|
let t = (e) => {
|
|
@@ -2102,16 +1916,16 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2102
1916
|
this._navHandler.handler(e);
|
|
2103
1917
|
return;
|
|
2104
1918
|
}
|
|
2105
|
-
(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(),
|
|
1919
|
+
(e.key === "ArrowDown" || e.key === "ArrowUp") && !v() && b(), E(e);
|
|
2106
1920
|
}), o.addEventListener("paste", (e) => {
|
|
2107
1921
|
let t = e.clipboardData?.getData("text/plain") ?? "";
|
|
2108
|
-
|
|
1922
|
+
I(t, L) && (e.preventDefault(), w(`${o.value}${t}`));
|
|
2109
1923
|
}), o.addEventListener("blur", (e) => {
|
|
2110
1924
|
e.relatedTarget && this.contains(e.relatedTarget) || (o.value.trim() && w(o.value, { quiet: !0 }), x());
|
|
2111
1925
|
});
|
|
2112
1926
|
} else e.addEventListener("keydown", (e) => {
|
|
2113
1927
|
if (v()) {
|
|
2114
|
-
|
|
1928
|
+
E(e);
|
|
2115
1929
|
return;
|
|
2116
1930
|
}
|
|
2117
1931
|
(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), b());
|
|
@@ -2130,35 +1944,35 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2130
1944
|
disconnectedCallback() {
|
|
2131
1945
|
this._teardown(), this._ro?.disconnect(), this._ro = null;
|
|
2132
1946
|
}
|
|
2133
|
-
},
|
|
1947
|
+
}, L = [
|
|
2134
1948
|
",",
|
|
2135
1949
|
";",
|
|
2136
1950
|
"\n",
|
|
2137
1951
|
" "
|
|
2138
|
-
],
|
|
1952
|
+
], ge = [
|
|
2139
1953
|
["description", "description"],
|
|
2140
1954
|
["avatar", "avatar"],
|
|
2141
1955
|
["initials", "initials"],
|
|
2142
1956
|
["disabled-hint", "disabledHint"]
|
|
2143
|
-
],
|
|
1957
|
+
], _e = (e) => !!(e.description || e.avatar || e.initials || e.disabled || e.disabledHint), ve = (e) => {
|
|
2144
1958
|
let t = String(e ?? "").trim();
|
|
2145
1959
|
return /^(https?:)?\/\//i.test(t) || /^\/(?!\/)/.test(t) || /^data:image\/(png|jpe?g|gif|webp|avif);/i.test(t) ? t : "";
|
|
2146
|
-
},
|
|
2147
|
-
let t =
|
|
2148
|
-
return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${
|
|
2149
|
-
},
|
|
1960
|
+
}, ye = (e) => {
|
|
1961
|
+
let t = ve(e.avatar);
|
|
1962
|
+
return !t && !e.initials ? "" : `<span class="avatar wui-opt-avatar" aria-hidden="true"><span class="avatar-face">${g(e.initials ?? "")}</span>${t ? `<img class="avatar-img" src="${z(t)}" alt="" />` : ""}</span>`;
|
|
1963
|
+
}, be = (e, t, n) => {
|
|
2150
1964
|
let r = !!e.disabled, i = e.description ? `<span class="wui-opt-desc">${g(e.description)}</span>` : "", a = e.disabledHint && r ? `<span class="wui-opt-hint">${g(e.disabledHint)}</span>` : "";
|
|
2151
|
-
return `<button type="button" role="option" id="${
|
|
2152
|
-
},
|
|
2153
|
-
if (
|
|
1965
|
+
return `<button type="button" role="option" id="${z(t)}" class="search-select-option wui-opt-rich${n ? " selected" : ""}" data-value="${z(e.value)}" aria-selected="${n}"${r ? " aria-disabled=\"true\"" : ""}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${i}</span>${a}${ye(e)}<span class="ms-check">${p("check")}</span></button>`;
|
|
1966
|
+
}, R = /* @__PURE__ */ new Map(), xe = (e) => {
|
|
1967
|
+
if (R.has(e)) return R.get(e);
|
|
2154
1968
|
let t = null;
|
|
2155
1969
|
try {
|
|
2156
1970
|
t = RegExp(`^(?:${e})$`, "u");
|
|
2157
1971
|
} catch {
|
|
2158
1972
|
console.warn(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`);
|
|
2159
1973
|
}
|
|
2160
|
-
return
|
|
2161
|
-
},
|
|
1974
|
+
return R.set(e, t), t;
|
|
1975
|
+
}, z = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), B = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), Se = /[^0-9]/g, Ce = /[^0-9a-zA-Z]/g, we = class extends e {
|
|
2162
1976
|
static formAssociated = !0;
|
|
2163
1977
|
static get observedAttributes() {
|
|
2164
1978
|
return [
|
|
@@ -2189,7 +2003,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2189
2003
|
this._value = this._clean(e), d(this, this._value), this._paint();
|
|
2190
2004
|
}
|
|
2191
2005
|
_clean(e) {
|
|
2192
|
-
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ?
|
|
2006
|
+
return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? Ce : Se, "").slice(0, this.length);
|
|
2193
2007
|
}
|
|
2194
2008
|
constructor() {
|
|
2195
2009
|
super();
|
|
@@ -2280,7 +2094,7 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
2280
2094
|
disconnectedCallback() {
|
|
2281
2095
|
this._onSelectionChange && document.removeEventListener("selectionchange", this._onSelectionChange);
|
|
2282
2096
|
}
|
|
2283
|
-
},
|
|
2097
|
+
}, V = [
|
|
2284
2098
|
[
|
|
2285
2099
|
"AF",
|
|
2286
2100
|
"Afghanistan",
|
|
@@ -3506,11 +3320,11 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
3506
3320
|
"Zimbabwe",
|
|
3507
3321
|
"263"
|
|
3508
3322
|
]
|
|
3509
|
-
],
|
|
3323
|
+
], H = (e) => (V.find((t) => t[0] === e) || [
|
|
3510
3324
|
"",
|
|
3511
3325
|
"",
|
|
3512
3326
|
""
|
|
3513
|
-
])[2],
|
|
3327
|
+
])[2], Te = {
|
|
3514
3328
|
AD: ["Europe/Andorra"],
|
|
3515
3329
|
AE: ["Asia/Dubai"],
|
|
3516
3330
|
AF: ["Asia/Kabul"],
|
|
@@ -3912,13 +3726,13 @@ var L = (e, t) => t.some((t) => String(e ?? "").includes(t)), xe = class extends
|
|
|
3912
3726
|
ZA: ["Africa/Johannesburg"],
|
|
3913
3727
|
ZM: ["Africa/Lusaka"],
|
|
3914
3728
|
ZW: ["Africa/Harare"]
|
|
3915
|
-
},
|
|
3916
|
-
for (let [e, t] of Object.entries(
|
|
3917
|
-
function
|
|
3918
|
-
let t =
|
|
3919
|
-
return t &&
|
|
3729
|
+
}, Ee = new Set(V.map(([e]) => e)), De = /* @__PURE__ */ new Map();
|
|
3730
|
+
for (let [e, t] of Object.entries(Te)) for (let n of t) De.set(n, e);
|
|
3731
|
+
function Oe(e) {
|
|
3732
|
+
let t = De.get(e);
|
|
3733
|
+
return t && Ee.has(t) ? t : null;
|
|
3920
3734
|
}
|
|
3921
|
-
function
|
|
3735
|
+
function ke(e) {
|
|
3922
3736
|
if (!e) return null;
|
|
3923
3737
|
let t;
|
|
3924
3738
|
try {
|
|
@@ -3926,9 +3740,9 @@ function Fe(e) {
|
|
|
3926
3740
|
} catch {
|
|
3927
3741
|
return null;
|
|
3928
3742
|
}
|
|
3929
|
-
return t &&
|
|
3743
|
+
return t && Ee.has(t) ? t : null;
|
|
3930
3744
|
}
|
|
3931
|
-
function
|
|
3745
|
+
function Ae() {
|
|
3932
3746
|
let e;
|
|
3933
3747
|
try {
|
|
3934
3748
|
e = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
@@ -3936,33 +3750,33 @@ function Ie() {
|
|
|
3936
3750
|
e = void 0;
|
|
3937
3751
|
}
|
|
3938
3752
|
let t = typeof navigator > "u" ? void 0 : navigator.language;
|
|
3939
|
-
return
|
|
3753
|
+
return Oe(e) || ke(t) || "IN";
|
|
3940
3754
|
}
|
|
3941
3755
|
//#endregion
|
|
3942
3756
|
//#region src/WuiPhone.js
|
|
3943
|
-
var
|
|
3944
|
-
function
|
|
3945
|
-
return W ? Promise.resolve(W) : (
|
|
3757
|
+
var U = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, W = null, je = null;
|
|
3758
|
+
function Me() {
|
|
3759
|
+
return W ? Promise.resolve(W) : (je ||= Promise.all([import("./max-BDKx469G.js"), import("./examples.mobile.json-BMXTGiGC.js")]).then(([e, t]) => (W = {
|
|
3946
3760
|
AsYouType: e.AsYouType,
|
|
3947
3761
|
getExampleNumber: e.getExampleNumber,
|
|
3948
3762
|
isValidPhoneNumber: e.isValidPhoneNumber,
|
|
3949
3763
|
parsePhoneNumber: e.parsePhoneNumber,
|
|
3950
3764
|
examples: t.default || t
|
|
3951
|
-
}, W)).catch(() => null),
|
|
3765
|
+
}, W)).catch(() => null), je);
|
|
3952
3766
|
}
|
|
3953
|
-
function
|
|
3954
|
-
let n = `+${
|
|
3767
|
+
function Ne(e, t) {
|
|
3768
|
+
let n = `+${H(e)}`;
|
|
3955
3769
|
return t?.startsWith(n) ? t.slice(n.length).trimStart() : null;
|
|
3956
3770
|
}
|
|
3957
3771
|
function G(e, t) {
|
|
3958
3772
|
if (!W || !t) return t;
|
|
3959
3773
|
try {
|
|
3960
|
-
return
|
|
3774
|
+
return Ne(e, new W.AsYouType(e).input(`+${H(e)}${t}`)) || t;
|
|
3961
3775
|
} catch {
|
|
3962
3776
|
return t;
|
|
3963
3777
|
}
|
|
3964
3778
|
}
|
|
3965
|
-
function
|
|
3779
|
+
function Pe(e, t) {
|
|
3966
3780
|
if (t <= 0) return 0;
|
|
3967
3781
|
let n = 0;
|
|
3968
3782
|
for (let r = 0; r < e.length; r++) if (/[0-9]/.test(e[r]) && (n += 1, n === t)) return r + 1;
|
|
@@ -3971,12 +3785,12 @@ function Ve(e, t) {
|
|
|
3971
3785
|
function K(e) {
|
|
3972
3786
|
if (!W) return null;
|
|
3973
3787
|
try {
|
|
3974
|
-
return
|
|
3788
|
+
return Ne(e, W.getExampleNumber(e, W.examples)?.formatInternational()) || null;
|
|
3975
3789
|
} catch {
|
|
3976
3790
|
return null;
|
|
3977
3791
|
}
|
|
3978
3792
|
}
|
|
3979
|
-
function
|
|
3793
|
+
function Fe(e) {
|
|
3980
3794
|
if (!W || !e) return null;
|
|
3981
3795
|
try {
|
|
3982
3796
|
if (!W.isValidPhoneNumber(e)) return !1;
|
|
@@ -3986,7 +3800,7 @@ function He(e) {
|
|
|
3986
3800
|
return null;
|
|
3987
3801
|
}
|
|
3988
3802
|
}
|
|
3989
|
-
function
|
|
3803
|
+
function Ie(e) {
|
|
3990
3804
|
if (!W) return null;
|
|
3991
3805
|
try {
|
|
3992
3806
|
let t = W.getExampleNumber(e, W.examples);
|
|
@@ -3995,7 +3809,7 @@ function Ue(e) {
|
|
|
3995
3809
|
return null;
|
|
3996
3810
|
}
|
|
3997
3811
|
}
|
|
3998
|
-
function
|
|
3812
|
+
function Le(e, t, n) {
|
|
3999
3813
|
try {
|
|
4000
3814
|
let r = W.parsePhoneNumber(t, e), i = r?.nationalNumber;
|
|
4001
3815
|
return !i || r.country !== e || i.length > n || !t.endsWith(i) ? null : i;
|
|
@@ -4003,7 +3817,7 @@ function We(e, t, n) {
|
|
|
4003
3817
|
return null;
|
|
4004
3818
|
}
|
|
4005
3819
|
}
|
|
4006
|
-
function
|
|
3820
|
+
function Re(e) {
|
|
4007
3821
|
if (!W || !e?.trim().startsWith("+")) return null;
|
|
4008
3822
|
try {
|
|
4009
3823
|
let t = new W.AsYouType();
|
|
@@ -4017,7 +3831,7 @@ function Ge(e) {
|
|
|
4017
3831
|
return null;
|
|
4018
3832
|
}
|
|
4019
3833
|
}
|
|
4020
|
-
var
|
|
3834
|
+
var ze = class extends e {
|
|
4021
3835
|
static formAssociated = !0;
|
|
4022
3836
|
static get observedAttributes() {
|
|
4023
3837
|
return [
|
|
@@ -4037,7 +3851,7 @@ var Ke = class extends e {
|
|
|
4037
3851
|
} catch {
|
|
4038
3852
|
this._internals = null;
|
|
4039
3853
|
}
|
|
4040
|
-
this._defaultCountry =
|
|
3854
|
+
this._defaultCountry = Ae(), this._country = this._defaultCountry, this._national = "", this._active = -1, this._committedValue = "";
|
|
4041
3855
|
}
|
|
4042
3856
|
connectedCallback() {
|
|
4043
3857
|
if (!this._rendered) {
|
|
@@ -4064,13 +3878,13 @@ var Ke = class extends e {
|
|
|
4064
3878
|
this.value = this._defaultValue || "";
|
|
4065
3879
|
}
|
|
4066
3880
|
get value() {
|
|
4067
|
-
return this._national ? `+${
|
|
3881
|
+
return this._national ? `+${H(this._country)}${this._national}` : "";
|
|
4068
3882
|
}
|
|
4069
3883
|
set value(e) {
|
|
4070
|
-
let t = String(e ?? "").trim(), n =
|
|
3884
|
+
let t = String(e ?? "").trim(), n = Re(t);
|
|
4071
3885
|
if (n) this._country = n.country, this._national = n.national.replace(/[^0-9]/g, "");
|
|
4072
3886
|
else if (t.startsWith("+")) {
|
|
4073
|
-
let e = t.replace(/[^0-9]/g, ""), n = String(
|
|
3887
|
+
let e = t.replace(/[^0-9]/g, ""), n = String(H(this._country));
|
|
4074
3888
|
n && e.startsWith(n) && (e = e.slice(n.length)), this._national = e;
|
|
4075
3889
|
} else this._national = t.replace(/[^0-9]/g, "");
|
|
4076
3890
|
n && this.getAttribute("country") !== this._country ? this.setAttribute("country", this._country) : this._rendered && this.render(), this._committedValue = this.value, this._syncMirror();
|
|
@@ -4090,14 +3904,14 @@ var Ke = class extends e {
|
|
|
4090
3904
|
this.id ||= `wui-phone-${Math.random().toString(36).slice(2, 9)}`;
|
|
4091
3905
|
let t = `${this.id}-listbox`;
|
|
4092
3906
|
this._listboxId = t;
|
|
4093
|
-
let n =
|
|
3907
|
+
let n = V.map(([e, n, r], i) => `<button type="button" role="option" id="${q(`${t}-opt-${i}`)}" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}" aria-selected="${e === this._country}"><span class="${U(e)}" aria-hidden="true"></span><span class="country-name-text">${n}<span class="country-code-text">+${r}</span></span></button>`).join("");
|
|
4094
3908
|
this.innerHTML = `
|
|
4095
3909
|
<div class="phone-input-wrap">
|
|
4096
3910
|
<div class="phone-country-adornment">
|
|
4097
3911
|
<button type="button" class="country-toggle" aria-label="Choose country" aria-haspopup="listbox" aria-expanded="false" aria-controls="${q(t)}"${this.hasAttribute("disabled") ? " disabled" : ""}>
|
|
4098
|
-
<span class="${
|
|
3912
|
+
<span class="${U(this._country)}" data-flag aria-hidden="true"></span>
|
|
4099
3913
|
${p("chevron-down", { className: "phone-chevron" })}
|
|
4100
|
-
<span class="phone-dial" data-dial>+${
|
|
3914
|
+
<span class="phone-dial" data-dial>+${H(this._country)}</span>
|
|
4101
3915
|
</button>
|
|
4102
3916
|
<div class="country-dropdown-menu" role="listbox" id="${q(t)}" tabindex="-1" hidden>
|
|
4103
3917
|
<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="${q(t)}" aria-autocomplete="list" /></div>
|
|
@@ -4135,7 +3949,7 @@ var Ke = class extends e {
|
|
|
4135
3949
|
}
|
|
4136
3950
|
a && (a.hidden = n > 0);
|
|
4137
3951
|
}, v = (e) => {
|
|
4138
|
-
this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className =
|
|
3952
|
+
this._country = e, this.getAttribute("country") !== e && (this._suppressCountryRender = !0, this.setAttribute("country", e), this._suppressCountryRender = !1), u && (u.className = U(e)), d && (d.textContent = `+${H(e)}`);
|
|
4139
3953
|
for (let t of this._itemEls()) {
|
|
4140
3954
|
let n = t.dataset.iso === e;
|
|
4141
3955
|
t.classList.toggle("selected", n), t.setAttribute("aria-selected", String(n));
|
|
@@ -4182,23 +3996,23 @@ var Ke = class extends e {
|
|
|
4182
3996
|
};
|
|
4183
3997
|
o.addEventListener("input", (e) => {
|
|
4184
3998
|
e.stopPropagation();
|
|
4185
|
-
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 =
|
|
3999
|
+
let t = o.selectionStart ?? o.value.length, n = o.value.slice(0, t).replace(/[^0-9]/g, "").length, r = o.value.replace(/[^0-9]/g, ""), i = Ie(this._country);
|
|
4186
4000
|
if (i && r.length > i) {
|
|
4187
|
-
let e =
|
|
4001
|
+
let e = Le(this._country, r, i);
|
|
4188
4002
|
e ? (n = Math.max(0, n - (r.length - e.length)), r = e) : r = r.slice(0, i);
|
|
4189
4003
|
}
|
|
4190
4004
|
this._national = r;
|
|
4191
4005
|
let a = G(this._country, this._national);
|
|
4192
4006
|
if (o.value !== a) {
|
|
4193
4007
|
o.value = a;
|
|
4194
|
-
let e =
|
|
4008
|
+
let e = Pe(a, Math.min(n, r.length));
|
|
4195
4009
|
o.setSelectionRange(e, e);
|
|
4196
4010
|
}
|
|
4197
|
-
this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national ||
|
|
4011
|
+
this._syncMirror(), this._emitInput(), o.classList.contains("is-invalid") && (!this._national || Fe(this.value) === !0) && x(!1);
|
|
4198
4012
|
}), o.addEventListener("change", (e) => e.stopPropagation()), o.addEventListener("blur", () => {
|
|
4199
|
-
x(this._national.length > 0 &&
|
|
4013
|
+
x(this._national.length > 0 && Fe(this.value) === !1), this.value !== this._committedValue && this._emitChange();
|
|
4200
4014
|
}), o.addEventListener("paste", (e) => {
|
|
4201
|
-
let t =
|
|
4015
|
+
let t = Re(e.clipboardData?.getData("text"));
|
|
4202
4016
|
t && (e.preventDefault(), this._national = t.national.replace(/[^0-9]/g, ""), t.country === this._country ? o.value = G(this._country, this._national) : this.setAttribute("country", t.country), this._syncMirror(), this._emitInput(), this._emitChange(), this.querySelector("input[type=tel]")?.focus());
|
|
4203
4017
|
}), this._bindGlobal = () => {
|
|
4204
4018
|
this._teardownGlobals?.(), this._onDocClick = (e) => {
|
|
@@ -4208,7 +4022,7 @@ var Ke = class extends e {
|
|
|
4208
4022
|
});
|
|
4209
4023
|
}, this._teardownGlobals = () => {
|
|
4210
4024
|
this._onDocClick &&= (document.removeEventListener("click", this._onDocClick), null), l(this);
|
|
4211
|
-
}, this._bindGlobal(),
|
|
4025
|
+
}, this._bindGlobal(), Me().then((e) => {
|
|
4212
4026
|
if (!(!e || !o.isConnected) && (this._national && (o.value = G(this._country, this._national)), !this.getAttribute("placeholder"))) {
|
|
4213
4027
|
let e = K(this._country);
|
|
4214
4028
|
e && (o.placeholder = e);
|
|
@@ -4221,7 +4035,7 @@ var Ke = class extends e {
|
|
|
4221
4035
|
disconnectedCallback() {
|
|
4222
4036
|
this._teardown();
|
|
4223
4037
|
}
|
|
4224
|
-
}, q = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"),
|
|
4038
|
+
}, q = (e) => String(e ?? "").replace(/"/g, """).replace(/</g, "<"), Be = class extends e {
|
|
4225
4039
|
static formAssociated = !0;
|
|
4226
4040
|
static get observedAttributes() {
|
|
4227
4041
|
return [
|
|
@@ -4427,7 +4241,7 @@ var Ke = class extends e {
|
|
|
4427
4241
|
disconnectedCallback() {
|
|
4428
4242
|
this._teardown();
|
|
4429
4243
|
}
|
|
4430
|
-
}, J = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"),
|
|
4244
|
+
}, J = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), Ve = class extends e {
|
|
4431
4245
|
static formAssociated = !0;
|
|
4432
4246
|
static get observedAttributes() {
|
|
4433
4247
|
return [
|
|
@@ -4572,7 +4386,7 @@ var Ke = class extends e {
|
|
|
4572
4386
|
aria-valuenow="${this._value}"
|
|
4573
4387
|
aria-valuetext="${this._formatValue(this._value)}"
|
|
4574
4388
|
${a ? "disabled" : ""}
|
|
4575
|
-
aria-label="${
|
|
4389
|
+
aria-label="${He(this.getAttribute("aria-label") || "Value")}"
|
|
4576
4390
|
></button>
|
|
4577
4391
|
`}
|
|
4578
4392
|
${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>` : ""}
|
|
@@ -4633,7 +4447,7 @@ var Ke = class extends e {
|
|
|
4633
4447
|
this._pointerDownListener = (e) => {
|
|
4634
4448
|
if (this.hasAttribute("disabled")) return;
|
|
4635
4449
|
let t = e.target.closest(".slider-thumb");
|
|
4636
|
-
t && (e.preventDefault(), this._isDragging = !0, this._dragThumb = t.getAttribute("data-thumb"), document.addEventListener("pointermove", this._pointerMoveListener), document.addEventListener("pointerup", this._pointerUpListener));
|
|
4450
|
+
t && (e.preventDefault(), this._isDragging = !0, this._dragThumb = t.getAttribute("data-thumb"), document.addEventListener("pointermove", this._pointerMoveListener), document.addEventListener("pointerup", this._pointerUpListener), document.addEventListener("pointercancel", this._pointerUpListener));
|
|
4637
4451
|
}, this._pointerMoveListener = (e) => {
|
|
4638
4452
|
if (!this._isDragging) return;
|
|
4639
4453
|
e.preventDefault();
|
|
@@ -4653,7 +4467,7 @@ var Ke = class extends e {
|
|
|
4653
4467
|
} }));
|
|
4654
4468
|
}
|
|
4655
4469
|
}, this._pointerUpListener = () => {
|
|
4656
|
-
this._isDragging && (this._isDragging = !1, this._dragThumb = null, document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
|
|
4470
|
+
this._isDragging && (this._isDragging = !1, this._dragThumb = null, document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), document.removeEventListener("pointercancel", this._pointerUpListener), this._syncMirrors(), this.dispatchEvent(new Event("change", { bubbles: !0 })));
|
|
4657
4471
|
}, this._thumbKeyListener = (e) => {
|
|
4658
4472
|
let t = e.currentTarget;
|
|
4659
4473
|
if (this.hasAttribute("disabled")) return;
|
|
@@ -4669,7 +4483,7 @@ var Ke = class extends e {
|
|
|
4669
4483
|
}
|
|
4670
4484
|
_teardown() {
|
|
4671
4485
|
for (let e of this.querySelectorAll(".slider-thumb")) e.removeEventListener("pointerdown", this._pointerDownListener), e.removeEventListener("keydown", this._thumbKeyListener);
|
|
4672
|
-
document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), this._isDragging = !1, this._dragThumb = null, this.querySelector(".slider-track")?.removeEventListener("click", this._trackClickListener);
|
|
4486
|
+
document.removeEventListener("pointermove", this._pointerMoveListener), document.removeEventListener("pointerup", this._pointerUpListener), document.removeEventListener("pointercancel", this._pointerUpListener), this._isDragging = !1, this._dragThumb = null, this.querySelector(".slider-track")?.removeEventListener("click", this._trackClickListener);
|
|
4673
4487
|
}
|
|
4674
4488
|
disconnectedCallback() {
|
|
4675
4489
|
this._teardown();
|
|
@@ -4677,7 +4491,7 @@ var Ke = class extends e {
|
|
|
4677
4491
|
}, Y = (e, t) => {
|
|
4678
4492
|
let n = Number.parseFloat(e);
|
|
4679
4493
|
return Number.isFinite(n) ? n : t;
|
|
4680
|
-
},
|
|
4494
|
+
}, He = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), Ue = class extends e {
|
|
4681
4495
|
static formAssociated = !0;
|
|
4682
4496
|
_accessibleName() {
|
|
4683
4497
|
return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Add tags";
|
|
@@ -4762,14 +4576,14 @@ var Ke = class extends e {
|
|
|
4762
4576
|
e.innerHTML = "";
|
|
4763
4577
|
return;
|
|
4764
4578
|
}
|
|
4765
|
-
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${
|
|
4579
|
+
e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${We(e)}</span><button type="button" class="chip-remove" data-remove="${X(e)}" aria-label="Remove ${X(e)}">${p("x")}</button></span>`).join("");
|
|
4766
4580
|
}
|
|
4767
4581
|
}
|
|
4768
4582
|
_wire() {
|
|
4769
4583
|
this._teardown();
|
|
4770
4584
|
let e = this.querySelector(".search-select-control"), t = this.querySelector("[data-input]");
|
|
4771
4585
|
if (!e || !t) return;
|
|
4772
|
-
let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(
|
|
4586
|
+
let n = () => this.hasAttribute("disabled"), r = (this.getAttribute("separators") || "enter,comma").split(",").map((e) => e.trim()), i = this.getAttribute("max-tags"), a = this.hasAttribute("allow-duplicates"), o = new Set(r.map(fe).filter(Boolean)), s = () => {
|
|
4773
4587
|
d(this, this._values.join(",")), this.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
4774
4588
|
}, c = (e) => {
|
|
4775
4589
|
let t = e.trim();
|
|
@@ -4801,9 +4615,9 @@ var Ke = class extends e {
|
|
|
4801
4615
|
e.preventDefault();
|
|
4802
4616
|
let n = e.clipboardData.getData("text/plain"), a = [];
|
|
4803
4617
|
for (let e of r) {
|
|
4804
|
-
let t =
|
|
4805
|
-
if (
|
|
4806
|
-
a.push(...
|
|
4618
|
+
let t = pe(e) ?? e;
|
|
4619
|
+
if (I(n, [t])) {
|
|
4620
|
+
a.push(...me(n, [t]));
|
|
4807
4621
|
break;
|
|
4808
4622
|
}
|
|
4809
4623
|
}
|
|
@@ -4831,18 +4645,18 @@ var Ke = class extends e {
|
|
|
4831
4645
|
disconnectedCallback() {
|
|
4832
4646
|
this._teardown();
|
|
4833
4647
|
}
|
|
4834
|
-
},
|
|
4648
|
+
}, We = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), X = (e) => String(e ?? "").replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<"), Ge = (e) => String(e).padStart(2, "0"), Ke = (e, t) => `${Ge(e)}:${Ge(t)}`, Z = (e) => {
|
|
4835
4649
|
let t = /^(\d{2}):(\d{2})$/.exec(e || "");
|
|
4836
4650
|
return t ? {
|
|
4837
4651
|
h: +t[1],
|
|
4838
4652
|
m: +t[2]
|
|
4839
4653
|
} : null;
|
|
4840
|
-
},
|
|
4654
|
+
}, qe = (e, t = "24") => {
|
|
4841
4655
|
if (!e) return "";
|
|
4842
|
-
if (t === "24") return
|
|
4656
|
+
if (t === "24") return Ke(e.h, e.m);
|
|
4843
4657
|
let n = e.h % 12 || 12, r = e.h >= 12 ? "PM" : "AM";
|
|
4844
|
-
return `${n}:${
|
|
4845
|
-
},
|
|
4658
|
+
return `${n}:${Ge(e.m)} ${r}`;
|
|
4659
|
+
}, Je = class extends e {
|
|
4846
4660
|
static formAssociated = !0;
|
|
4847
4661
|
static get observedAttributes() {
|
|
4848
4662
|
return [
|
|
@@ -4902,7 +4716,7 @@ var Ke = class extends e {
|
|
|
4902
4716
|
this.innerHTML = `
|
|
4903
4717
|
<div class="timepicker">
|
|
4904
4718
|
<button type="button" class="input timepicker-trigger${i}${t ? " has-value" : ""}" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("aria-invalid") ? " aria-invalid=\"true\"" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${a ? ` aria-label="${g(a)}"` : ""}${o ? ` aria-describedby="${g(o)}"` : ""}>
|
|
4905
|
-
<span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ?
|
|
4719
|
+
<span data-trigger-label class="${t ? "" : "timepicker-placeholder"}">${t ? qe(t, n) : g(e)}</span>
|
|
4906
4720
|
${p("clock")}
|
|
4907
4721
|
</button>
|
|
4908
4722
|
<div class="timepicker-pop" role="listbox" tabindex="-1" hidden></div>
|
|
@@ -4915,7 +4729,7 @@ var Ke = class extends e {
|
|
|
4915
4729
|
let e = this.querySelector(".timepicker-trigger"), t = this.querySelector("[data-trigger-label]");
|
|
4916
4730
|
if (!t) return;
|
|
4917
4731
|
let n = Z(this._value), r = this.getAttribute("format") || "24";
|
|
4918
|
-
t.textContent = n ?
|
|
4732
|
+
t.textContent = n ? qe(n, r) : this.getAttribute("placeholder") || "Select time", t.classList.toggle("timepicker-placeholder", !n), e?.classList.toggle("has-value", !!n);
|
|
4919
4733
|
}
|
|
4920
4734
|
_buildTimes() {
|
|
4921
4735
|
let e = Math.max(1, parseInt(this.getAttribute("step") || "30", 10)), t = this.getAttribute("min") || "00:00", n = this.getAttribute("max") || "23:59", r = Z(t) || {
|
|
@@ -4936,8 +4750,8 @@ var Ke = class extends e {
|
|
|
4936
4750
|
if (!e) return;
|
|
4937
4751
|
let t = this.getAttribute("format") || "24", n = this._buildTimes(), r = Z(this._value), i = this._focus, a = "";
|
|
4938
4752
|
for (let e = 0; e < n.length; e++) {
|
|
4939
|
-
let o = n[e], s =
|
|
4940
|
-
a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${
|
|
4753
|
+
let o = n[e], s = Ke(o.h, o.m), c = r && r.h === o.h && r.m === o.m;
|
|
4754
|
+
a += `<button type="button" class="timepicker-option${c ? " is-selected" : ""}" data-hm="${s}" role="option" tabindex="${i === e ? "0" : "-1"}"${c ? " aria-selected=\"true\"" : ""}>${qe(o, t)}</button>`;
|
|
4941
4755
|
}
|
|
4942
4756
|
e.innerHTML = a, this._focusActive();
|
|
4943
4757
|
}
|
|
@@ -5035,7 +4849,7 @@ var Ke = class extends e {
|
|
|
5035
4849
|
disconnectedCallback() {
|
|
5036
4850
|
this._teardown();
|
|
5037
4851
|
}
|
|
5038
|
-
},
|
|
4852
|
+
}, Ye = "wui-wizard-step", Xe = class extends e {
|
|
5039
4853
|
static get observedAttributes() {
|
|
5040
4854
|
return [
|
|
5041
4855
|
"active",
|
|
@@ -5069,7 +4883,7 @@ var Ke = class extends e {
|
|
|
5069
4883
|
this._beforeNext = typeof e == "function" ? e : null;
|
|
5070
4884
|
}
|
|
5071
4885
|
get _steps() {
|
|
5072
|
-
return [...this.querySelectorAll(`:scope > ${
|
|
4886
|
+
return [...this.querySelectorAll(`:scope > ${Ye}`)];
|
|
5073
4887
|
}
|
|
5074
4888
|
refresh() {
|
|
5075
4889
|
this._rendered && this._renderChrome();
|
|
@@ -5108,7 +4922,7 @@ var Ke = class extends e {
|
|
|
5108
4922
|
}
|
|
5109
4923
|
_reconcileSteps() {
|
|
5110
4924
|
let e = this._steps, t = this._known;
|
|
5111
|
-
if (this._known = e,
|
|
4925
|
+
if (this._known = e, Ze(e, t)) return e;
|
|
5112
4926
|
let n = (n) => new Set([...n].map((n) => e.indexOf(t[n])).filter((e) => e >= 0));
|
|
5113
4927
|
this._skipped = n(this._skipped), this._invalid = n(this._invalid);
|
|
5114
4928
|
let r = t[this._active];
|
|
@@ -5128,7 +4942,7 @@ var Ke = class extends e {
|
|
|
5128
4942
|
_onStepsMutated() {
|
|
5129
4943
|
if (!this._rendered) return;
|
|
5130
4944
|
let e = this._steps;
|
|
5131
|
-
(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) &&
|
|
4945
|
+
(!e.length || this._header.nextElementSibling === e[0] && this._footer.previousElementSibling === e[e.length - 1]) && Ze(e, this._known) || (this._renderChrome(), this._observer?.takeRecords());
|
|
5132
4946
|
}
|
|
5133
4947
|
_syncPanels(e) {
|
|
5134
4948
|
e.forEach((e, t) => {
|
|
@@ -5232,7 +5046,7 @@ var Ke = class extends e {
|
|
|
5232
5046
|
_reflectActive(e) {
|
|
5233
5047
|
this._reflecting = !0, this.setAttribute("active", String(e)), this._reflecting = !1;
|
|
5234
5048
|
}
|
|
5235
|
-
},
|
|
5049
|
+
}, Ze = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), Q = (e) => String(e ?? "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"), Qe = class extends e {
|
|
5236
5050
|
static get observedAttributes() {
|
|
5237
5051
|
return [
|
|
5238
5052
|
"label",
|
|
@@ -5246,8 +5060,8 @@ var Ke = class extends e {
|
|
|
5246
5060
|
let e = this.closest("wui-wizard");
|
|
5247
5061
|
e && typeof e.refresh == "function" && e.refresh();
|
|
5248
5062
|
}
|
|
5249
|
-
},
|
|
5250
|
-
async function
|
|
5063
|
+
}, $e = 2e3;
|
|
5064
|
+
async function et(e) {
|
|
5251
5065
|
try {
|
|
5252
5066
|
if (navigator.clipboard?.writeText) return await navigator.clipboard.writeText(e), !0;
|
|
5253
5067
|
} catch {}
|
|
@@ -5262,14 +5076,14 @@ async function st(e) {
|
|
|
5262
5076
|
}
|
|
5263
5077
|
//#endregion
|
|
5264
5078
|
//#region src/fileValidation.js
|
|
5265
|
-
var
|
|
5079
|
+
var tt = "image/png,image/jpeg,image/webp", nt = 5, rt = {
|
|
5266
5080
|
"image/png": [".png"],
|
|
5267
5081
|
"image/jpeg": [".jpg", ".jpeg"],
|
|
5268
5082
|
"image/webp": [".webp"],
|
|
5269
5083
|
"image/gif": [".gif"],
|
|
5270
5084
|
"image/svg+xml": [".svg"],
|
|
5271
5085
|
"application/pdf": [".pdf"]
|
|
5272
|
-
},
|
|
5086
|
+
}, it = {
|
|
5273
5087
|
"image/png": "PNG",
|
|
5274
5088
|
"image/jpeg": "JPG",
|
|
5275
5089
|
"image/webp": "WEBP",
|
|
@@ -5283,7 +5097,7 @@ var ct = "image/png,image/jpeg,image/webp", lt = 5, ut = {
|
|
|
5283
5097
|
".gif": "GIF",
|
|
5284
5098
|
".svg": "SVG",
|
|
5285
5099
|
".pdf": "PDF"
|
|
5286
|
-
},
|
|
5100
|
+
}, at = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), ot = [
|
|
5287
5101
|
".png",
|
|
5288
5102
|
".jpg",
|
|
5289
5103
|
".jpeg",
|
|
@@ -5294,54 +5108,54 @@ var ct = "image/png,image/jpeg,image/webp", lt = 5, ut = {
|
|
|
5294
5108
|
".avif",
|
|
5295
5109
|
".heic"
|
|
5296
5110
|
];
|
|
5297
|
-
function
|
|
5111
|
+
function st(e) {
|
|
5298
5112
|
if (!e) return !1;
|
|
5299
5113
|
let t = typeof e == "object" && e.type ? String(e.type).toLowerCase() : "";
|
|
5300
5114
|
if (t) return t.startsWith("image/");
|
|
5301
5115
|
let n = typeof e == "string" ? e : e.name || e.url || "", r = String(n).toLowerCase();
|
|
5302
|
-
return
|
|
5116
|
+
return ot.some((e) => r.endsWith(e));
|
|
5303
5117
|
}
|
|
5304
|
-
function
|
|
5305
|
-
let t =
|
|
5306
|
-
return t.length ? t.every((e) => e.startsWith(".") ?
|
|
5118
|
+
function ct(e) {
|
|
5119
|
+
let t = at(e);
|
|
5120
|
+
return t.length ? t.every((e) => e.startsWith(".") ? ot.includes(e) : e === "image/*" || e.startsWith("image/")) : !1;
|
|
5307
5121
|
}
|
|
5308
|
-
function
|
|
5122
|
+
function lt(e) {
|
|
5309
5123
|
let t = [];
|
|
5310
|
-
for (let n of
|
|
5311
|
-
let e =
|
|
5124
|
+
for (let n of at(e)) {
|
|
5125
|
+
let e = it[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
|
|
5312
5126
|
t.includes(e) || t.push(e);
|
|
5313
5127
|
}
|
|
5314
5128
|
return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
|
|
5315
5129
|
}
|
|
5316
|
-
function
|
|
5317
|
-
let n =
|
|
5130
|
+
function ut(e, t) {
|
|
5131
|
+
let n = at(t);
|
|
5318
5132
|
if (!n.length) return !0;
|
|
5319
5133
|
let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
|
|
5320
|
-
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (
|
|
5134
|
+
return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (rt[e] || []).some((e) => i.endsWith(e)));
|
|
5321
5135
|
}
|
|
5322
|
-
function
|
|
5136
|
+
function dt(e, t = {}) {
|
|
5323
5137
|
if (!e) return null;
|
|
5324
|
-
let n = t.accept === void 0 ?
|
|
5325
|
-
return
|
|
5138
|
+
let n = t.accept === void 0 ? tt : t.accept, r = t.maxSizeMb || 5;
|
|
5139
|
+
return ut(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${lt(n)} file.`;
|
|
5326
5140
|
}
|
|
5327
5141
|
//#endregion
|
|
5328
5142
|
//#region src/passwordRules.js
|
|
5329
|
-
var
|
|
5143
|
+
var ft = {
|
|
5330
5144
|
minLength: 8,
|
|
5331
5145
|
uppercase: !0,
|
|
5332
5146
|
lowercase: !0,
|
|
5333
5147
|
digit: !0,
|
|
5334
5148
|
special: !0,
|
|
5335
5149
|
uniqueChars: 0
|
|
5336
|
-
},
|
|
5337
|
-
function
|
|
5338
|
-
return e === !0 || e == null ? { ...
|
|
5339
|
-
...
|
|
5150
|
+
}, pt = "Password Requirements";
|
|
5151
|
+
function mt(e) {
|
|
5152
|
+
return e === !0 || e == null ? { ...ft } : {
|
|
5153
|
+
...ft,
|
|
5340
5154
|
...e
|
|
5341
5155
|
};
|
|
5342
5156
|
}
|
|
5343
|
-
function
|
|
5344
|
-
let t =
|
|
5157
|
+
function ht(e) {
|
|
5158
|
+
let t = mt(e), n = [];
|
|
5345
5159
|
if (t.minLength > 0 && n.push({
|
|
5346
5160
|
key: "length",
|
|
5347
5161
|
label: `At least ${t.minLength} characters long`,
|
|
@@ -5372,25 +5186,25 @@ function St(e) {
|
|
|
5372
5186
|
}
|
|
5373
5187
|
return n;
|
|
5374
5188
|
}
|
|
5375
|
-
function
|
|
5189
|
+
function gt(e, t) {
|
|
5376
5190
|
let n = e == null ? "" : String(e);
|
|
5377
|
-
return
|
|
5191
|
+
return ht(t).map((e) => ({
|
|
5378
5192
|
key: e.key,
|
|
5379
5193
|
label: e.label,
|
|
5380
5194
|
met: e.test(n)
|
|
5381
5195
|
}));
|
|
5382
5196
|
}
|
|
5383
|
-
function
|
|
5384
|
-
return
|
|
5197
|
+
function _t(e, t) {
|
|
5198
|
+
return gt(e, t).every((e) => e.met);
|
|
5385
5199
|
}
|
|
5386
5200
|
//#endregion
|
|
5387
5201
|
//#region src/index.js
|
|
5388
5202
|
var $ = (e, t) => {
|
|
5389
5203
|
typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
|
|
5390
5204
|
};
|
|
5391
|
-
function
|
|
5392
|
-
$("wui-select",
|
|
5205
|
+
function vt() {
|
|
5206
|
+
$("wui-select", Be), $("wui-phone", ze), $("wui-datepicker", oe), $("wui-date-range", se), $("wui-dock", ce), $("wui-consent-banner", re), $("wui-slider", Ve), $("wui-timepicker", Je), $("wui-autocomplete", y), $("wui-multiselect", he), $("wui-taginput", Ue), $("wui-otp", we), $("wui-status-icon", r), $("wui-wizard-step", Qe), $("wui-wizard", Xe);
|
|
5393
5207
|
}
|
|
5394
|
-
|
|
5208
|
+
vt();
|
|
5395
5209
|
//#endregion
|
|
5396
|
-
export {
|
|
5210
|
+
export { $e as COPY_FEEDBACK_MS, tt as DEFAULT_IMAGE_ACCEPT, nt as DEFAULT_MAX_SIZE_MB, ft as DEFAULT_PASSWORD_RULES, pt as DEFAULT_REQUIREMENTS_TITLE, n as STATUS_TONES, y as WuiAutocomplete, re as WuiConsentBanner, oe as WuiDatePicker, se as WuiDateRange, ce as WuiDock, he as WuiMultiSelect, we as WuiOtp, ze as WuiPhone, Be as WuiSelect, Ve as WuiSlider, r as WuiStatusIcon, Ue as WuiTagInput, Je as WuiTimePicker, Xe as WuiWizard, Qe as WuiWizardStep, lt as acceptLabel, ht as buildPasswordRules, et as copyTextToClipboard, vt as defineWeborityElements, gt as evaluatePassword, p as glyphSvg, st as isImageFile, ct as isImageOnlyAccept, ut as matchesAccept, _t as passwordSatisfies, dt as validateFile };
|