@justeattakeaway/pie-switch 0.19.0 → 0.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -84
- package/dist/index.d.ts +58 -10
- package/dist/index.js +603 -67
- package/dist/react.d.ts +59 -10
- package/dist/react.js +5 -4
- package/package.json +4 -3
- package/src/defs.ts +15 -3
- package/src/index.ts +117 -20
- package/src/switch.scss +14 -5
package/dist/index.js
CHANGED
|
@@ -1,42 +1,563 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
3
|
-
import { RtlMixin as
|
|
1
|
+
import { LitElement as vt, html as F, nothing as x, unsafeCSS as yt } from "lit";
|
|
2
|
+
import { query as Et, property as k } from "lit/decorators.js";
|
|
3
|
+
import { RtlMixin as kt, validPropertyValues as Mt, defineCustomElement as xt } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-icons-webc/IconCheck";
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
|
|
6
|
+
`, Ft = ["leading", "trailing"], Ct = "change";
|
|
7
|
+
(function() {
|
|
8
|
+
const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), V = {
|
|
9
|
+
ariaAtomic: "aria-atomic",
|
|
10
|
+
ariaAutoComplete: "aria-autocomplete",
|
|
11
|
+
ariaBusy: "aria-busy",
|
|
12
|
+
ariaChecked: "aria-checked",
|
|
13
|
+
ariaColCount: "aria-colcount",
|
|
14
|
+
ariaColIndex: "aria-colindex",
|
|
15
|
+
ariaColIndexText: "aria-colindextext",
|
|
16
|
+
ariaColSpan: "aria-colspan",
|
|
17
|
+
ariaCurrent: "aria-current",
|
|
18
|
+
ariaDisabled: "aria-disabled",
|
|
19
|
+
ariaExpanded: "aria-expanded",
|
|
20
|
+
ariaHasPopup: "aria-haspopup",
|
|
21
|
+
ariaHidden: "aria-hidden",
|
|
22
|
+
ariaInvalid: "aria-invalid",
|
|
23
|
+
ariaKeyShortcuts: "aria-keyshortcuts",
|
|
24
|
+
ariaLabel: "aria-label",
|
|
25
|
+
ariaLevel: "aria-level",
|
|
26
|
+
ariaLive: "aria-live",
|
|
27
|
+
ariaModal: "aria-modal",
|
|
28
|
+
ariaMultiLine: "aria-multiline",
|
|
29
|
+
ariaMultiSelectable: "aria-multiselectable",
|
|
30
|
+
ariaOrientation: "aria-orientation",
|
|
31
|
+
ariaPlaceholder: "aria-placeholder",
|
|
32
|
+
ariaPosInSet: "aria-posinset",
|
|
33
|
+
ariaPressed: "aria-pressed",
|
|
34
|
+
ariaReadOnly: "aria-readonly",
|
|
35
|
+
ariaRelevant: "aria-relevant",
|
|
36
|
+
ariaRequired: "aria-required",
|
|
37
|
+
ariaRoleDescription: "aria-roledescription",
|
|
38
|
+
ariaRowCount: "aria-rowcount",
|
|
39
|
+
ariaRowIndex: "aria-rowindex",
|
|
40
|
+
ariaRowIndexText: "aria-rowindextext",
|
|
41
|
+
ariaRowSpan: "aria-rowspan",
|
|
42
|
+
ariaSelected: "aria-selected",
|
|
43
|
+
ariaSetSize: "aria-setsize",
|
|
44
|
+
ariaSort: "aria-sort",
|
|
45
|
+
ariaValueMax: "aria-valuemax",
|
|
46
|
+
ariaValueMin: "aria-valuemin",
|
|
47
|
+
ariaValueNow: "aria-valuenow",
|
|
48
|
+
ariaValueText: "aria-valuetext",
|
|
49
|
+
role: "role"
|
|
50
|
+
}, at = (i, t) => {
|
|
51
|
+
for (let e in V) {
|
|
52
|
+
t[e] = null;
|
|
53
|
+
let a = null;
|
|
54
|
+
const r = V[e];
|
|
55
|
+
Object.defineProperty(t, e, {
|
|
56
|
+
get() {
|
|
57
|
+
return a;
|
|
58
|
+
},
|
|
59
|
+
set(n) {
|
|
60
|
+
a = n, i.isConnected ? i.setAttribute(r, n) : C.set(i, t);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
function B(i) {
|
|
66
|
+
const t = l.get(i), { form: e } = t;
|
|
67
|
+
J(i, e, t), Y(i, t.labels);
|
|
68
|
+
}
|
|
69
|
+
const U = (i, t = !1) => {
|
|
70
|
+
const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
|
|
71
|
+
acceptNode(n) {
|
|
72
|
+
return l.has(n) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
let a = e.nextNode();
|
|
76
|
+
const r = !t || i.disabled;
|
|
77
|
+
for (; a; )
|
|
78
|
+
a.formDisabledCallback && r && $(a, i.disabled), a = e.nextNode();
|
|
79
|
+
}, K = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = L() ? new MutationObserver((i) => {
|
|
80
|
+
for (const t of i) {
|
|
81
|
+
const e = t.target;
|
|
82
|
+
if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
|
|
83
|
+
const a = l.get(e), r = H.get(e);
|
|
84
|
+
a.setFormValue(r);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}) : {};
|
|
88
|
+
function R(i) {
|
|
89
|
+
i.forEach((t) => {
|
|
90
|
+
const { addedNodes: e, removedNodes: a } = t, r = Array.from(e), n = Array.from(a);
|
|
91
|
+
r.forEach((o) => {
|
|
92
|
+
var u;
|
|
93
|
+
if (l.has(o) && o.constructor.formAssociated && B(o), C.has(o)) {
|
|
94
|
+
const d = C.get(o);
|
|
95
|
+
Object.keys(V).filter((w) => d[w] !== null).forEach((w) => {
|
|
96
|
+
o.setAttribute(V[w], d[w]);
|
|
97
|
+
}), C.delete(o);
|
|
98
|
+
}
|
|
99
|
+
if (I.has(o)) {
|
|
100
|
+
const d = I.get(o);
|
|
101
|
+
o.setAttribute("internals-valid", d.validity.valid.toString()), o.setAttribute("internals-invalid", (!d.validity.valid).toString()), o.setAttribute("aria-invalid", (!d.validity.valid).toString()), I.delete(o);
|
|
102
|
+
}
|
|
103
|
+
if (o.localName === "form") {
|
|
104
|
+
const d = m.get(o), v = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
|
|
105
|
+
acceptNode(O) {
|
|
106
|
+
return l.has(O) && O.constructor.formAssociated && !(d && d.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
let w = v.nextNode();
|
|
110
|
+
for (; w; )
|
|
111
|
+
B(w), w = v.nextNode();
|
|
112
|
+
}
|
|
113
|
+
o.localName === "fieldset" && ((u = M.observe) == null || u.call(M, o, K), U(o, !0));
|
|
114
|
+
}), n.forEach((o) => {
|
|
115
|
+
const u = l.get(o);
|
|
116
|
+
u && s.get(u) && j(u), b.has(o) && b.get(o).disconnect();
|
|
117
|
+
});
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
function rt(i) {
|
|
121
|
+
i.forEach((t) => {
|
|
122
|
+
const { removedNodes: e } = t;
|
|
123
|
+
e.forEach((a) => {
|
|
124
|
+
const r = z.get(t.target);
|
|
125
|
+
l.has(a) && X(a), r.disconnect();
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
const ot = (i) => {
|
|
130
|
+
var e;
|
|
131
|
+
const t = new MutationObserver(rt);
|
|
132
|
+
(e = t.observe) == null || e.call(t, i, { childList: !0 }), z.set(i, t);
|
|
133
|
+
};
|
|
134
|
+
L() && new MutationObserver(R);
|
|
135
|
+
const P = {
|
|
136
|
+
childList: !0,
|
|
137
|
+
subtree: !0
|
|
138
|
+
}, $ = (i, t) => {
|
|
139
|
+
i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
|
|
140
|
+
}, j = (i) => {
|
|
141
|
+
s.get(i).forEach((e) => {
|
|
142
|
+
e.remove();
|
|
143
|
+
}), s.set(i, []);
|
|
144
|
+
}, G = (i, t) => {
|
|
145
|
+
const e = document.createElement("input");
|
|
146
|
+
return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), s.get(t).push(e), e;
|
|
147
|
+
}, st = (i, t) => {
|
|
148
|
+
var e;
|
|
149
|
+
s.set(t, []), (e = M.observe) == null || e.call(M, i, K);
|
|
150
|
+
}, Y = (i, t) => {
|
|
151
|
+
if (t.length) {
|
|
152
|
+
Array.from(t).forEach((a) => a.addEventListener("click", i.click.bind(i)));
|
|
153
|
+
let e = t[0].id;
|
|
154
|
+
t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), i.setAttribute("aria-labelledby", e);
|
|
155
|
+
}
|
|
156
|
+
}, T = (i) => {
|
|
157
|
+
const t = Array.from(i.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), e = m.get(i) || [], a = Array.from(e).filter((n) => n.isConnected).map((n) => l.get(n).validity.valid), r = [...t, ...a].includes(!1);
|
|
158
|
+
i.toggleAttribute("internals-invalid", r), i.toggleAttribute("internals-valid", !r);
|
|
159
|
+
}, nt = (i) => {
|
|
160
|
+
T(S(i.target));
|
|
161
|
+
}, ct = (i) => {
|
|
162
|
+
T(S(i.target));
|
|
163
|
+
}, lt = (i) => {
|
|
164
|
+
const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${i.id ? `,${e}[form='${i.id}']` : ""}`).join(",");
|
|
165
|
+
i.addEventListener("click", (e) => {
|
|
166
|
+
if (e.target.closest(t)) {
|
|
167
|
+
const r = m.get(i);
|
|
168
|
+
if (i.noValidate)
|
|
169
|
+
return;
|
|
170
|
+
r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && e.preventDefault();
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
}, dt = (i) => {
|
|
174
|
+
const t = m.get(i.target);
|
|
175
|
+
t && t.size && t.forEach((e) => {
|
|
176
|
+
e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
|
|
177
|
+
});
|
|
178
|
+
}, J = (i, t, e) => {
|
|
179
|
+
if (t) {
|
|
180
|
+
const a = m.get(t);
|
|
181
|
+
if (a)
|
|
182
|
+
a.add(i);
|
|
183
|
+
else {
|
|
184
|
+
const r = /* @__PURE__ */ new Set();
|
|
185
|
+
r.add(i), m.set(t, r), lt(t), t.addEventListener("reset", dt), t.addEventListener("input", nt), t.addEventListener("change", ct);
|
|
186
|
+
}
|
|
187
|
+
E.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
|
|
188
|
+
i.formAssociatedCallback.apply(i, [t]);
|
|
189
|
+
}, 0), T(t);
|
|
190
|
+
}
|
|
191
|
+
}, S = (i) => {
|
|
192
|
+
let t = i.parentNode;
|
|
193
|
+
return t && t.tagName !== "FORM" && (t = S(t)), t;
|
|
194
|
+
}, g = (i, t, e = DOMException) => {
|
|
195
|
+
if (!i.constructor.formAssociated)
|
|
196
|
+
throw new e(t);
|
|
197
|
+
}, Q = (i, t, e) => {
|
|
198
|
+
const a = m.get(i);
|
|
199
|
+
return a && a.size && a.forEach((r) => {
|
|
200
|
+
l.get(r)[e]() || (t = !1);
|
|
201
|
+
}), t;
|
|
202
|
+
}, X = (i) => {
|
|
203
|
+
if (i.constructor.formAssociated) {
|
|
204
|
+
const t = l.get(i), { labels: e, form: a } = t;
|
|
205
|
+
Y(i, e), J(i, a, t);
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
function L() {
|
|
209
|
+
return typeof MutationObserver < "u";
|
|
210
|
+
}
|
|
211
|
+
class ht {
|
|
212
|
+
constructor() {
|
|
213
|
+
this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
const ut = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = mt(t), Object.keys(t).forEach((a) => i[a] = t[a]), e && T(e), i), mt = (i) => {
|
|
217
|
+
let t = !0;
|
|
218
|
+
for (let e in i)
|
|
219
|
+
e !== "valid" && i[e] !== !1 && (t = !1);
|
|
220
|
+
return t;
|
|
221
|
+
}, _ = /* @__PURE__ */ new WeakMap();
|
|
222
|
+
function Z(i, t) {
|
|
223
|
+
i.toggleAttribute(t, !0), i.part && i.part.add(t);
|
|
224
|
+
}
|
|
225
|
+
class N extends Set {
|
|
226
|
+
static get isPolyfilled() {
|
|
227
|
+
return !0;
|
|
228
|
+
}
|
|
229
|
+
constructor(t) {
|
|
230
|
+
if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
231
|
+
throw new TypeError("Illegal constructor");
|
|
232
|
+
_.set(this, t);
|
|
233
|
+
}
|
|
234
|
+
add(t) {
|
|
235
|
+
if (!/^--/.test(t) || typeof t != "string")
|
|
236
|
+
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
237
|
+
const e = super.add(t), a = _.get(this), r = `state${t}`;
|
|
238
|
+
return a.isConnected ? Z(a, r) : setTimeout(() => {
|
|
239
|
+
Z(a, r);
|
|
240
|
+
}), e;
|
|
241
|
+
}
|
|
242
|
+
clear() {
|
|
243
|
+
for (let [t] of this.entries())
|
|
244
|
+
this.delete(t);
|
|
245
|
+
super.clear();
|
|
246
|
+
}
|
|
247
|
+
delete(t) {
|
|
248
|
+
const e = super.delete(t), a = _.get(this);
|
|
249
|
+
return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
|
|
250
|
+
a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
|
|
251
|
+
}), e;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
function tt(i, t, e, a) {
|
|
255
|
+
if (e === "a" && !a)
|
|
256
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
257
|
+
if (typeof t == "function" ? i !== t || !a : !t.has(i))
|
|
258
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
259
|
+
return e === "m" ? a : e === "a" ? a.call(i) : a ? a.value : t.get(i);
|
|
260
|
+
}
|
|
261
|
+
function ft(i, t, e, a, r) {
|
|
262
|
+
if (a === "m")
|
|
263
|
+
throw new TypeError("Private method is not writable");
|
|
264
|
+
if (a === "a" && !r)
|
|
265
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
266
|
+
if (typeof t == "function" ? i !== t || !r : !t.has(i))
|
|
267
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
268
|
+
return a === "a" ? r.call(i, e) : r ? r.value = e : t.set(i, e), e;
|
|
269
|
+
}
|
|
270
|
+
var A;
|
|
271
|
+
class wt {
|
|
272
|
+
constructor(t) {
|
|
273
|
+
A.set(this, void 0), ft(this, A, t, "f");
|
|
274
|
+
for (let e = 0; e < t.length; e++) {
|
|
275
|
+
let a = t[e];
|
|
276
|
+
this[e] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
|
|
277
|
+
}
|
|
278
|
+
Object.freeze(this);
|
|
279
|
+
}
|
|
280
|
+
get length() {
|
|
281
|
+
return tt(this, A, "f").length;
|
|
282
|
+
}
|
|
283
|
+
[(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
284
|
+
return tt(this, A, "f")[Symbol.iterator]();
|
|
285
|
+
}
|
|
286
|
+
item(t) {
|
|
287
|
+
return this[t] == null ? null : this[t];
|
|
288
|
+
}
|
|
289
|
+
namedItem(t) {
|
|
290
|
+
return this[t] == null ? null : this[t];
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
function bt() {
|
|
294
|
+
const i = HTMLFormElement.prototype.checkValidity;
|
|
295
|
+
HTMLFormElement.prototype.checkValidity = e;
|
|
296
|
+
const t = HTMLFormElement.prototype.reportValidity;
|
|
297
|
+
HTMLFormElement.prototype.reportValidity = a;
|
|
298
|
+
function e(...n) {
|
|
299
|
+
let o = i.apply(this, n);
|
|
300
|
+
return Q(this, o, "checkValidity");
|
|
301
|
+
}
|
|
302
|
+
function a(...n) {
|
|
303
|
+
let o = t.apply(this, n);
|
|
304
|
+
return Q(this, o, "reportValidity");
|
|
305
|
+
}
|
|
306
|
+
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
307
|
+
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
308
|
+
get(...n) {
|
|
309
|
+
const o = r.call(this, ...n), u = Array.from(m.get(this) || []);
|
|
310
|
+
if (u.length === 0)
|
|
311
|
+
return o;
|
|
312
|
+
const d = Array.from(o).concat(u).sort((v, w) => v.compareDocumentPosition ? v.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
|
|
313
|
+
return new wt(d);
|
|
314
|
+
}
|
|
315
|
+
});
|
|
316
|
+
}
|
|
317
|
+
class et {
|
|
318
|
+
static get isPolyfilled() {
|
|
319
|
+
return !0;
|
|
320
|
+
}
|
|
321
|
+
constructor(t) {
|
|
322
|
+
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
323
|
+
throw new TypeError("Illegal constructor");
|
|
324
|
+
const e = t.getRootNode(), a = new ht();
|
|
325
|
+
this.states = new N(t), h.set(this, t), c.set(this, a), l.set(t, this), at(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && ot(e);
|
|
326
|
+
}
|
|
327
|
+
checkValidity() {
|
|
328
|
+
const t = h.get(this);
|
|
329
|
+
if (g(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
330
|
+
return !0;
|
|
331
|
+
const e = c.get(this);
|
|
332
|
+
if (!e.valid) {
|
|
333
|
+
const a = new Event("invalid", {
|
|
334
|
+
bubbles: !1,
|
|
335
|
+
cancelable: !0,
|
|
336
|
+
composed: !1
|
|
337
|
+
});
|
|
338
|
+
t.dispatchEvent(a);
|
|
339
|
+
}
|
|
340
|
+
return e.valid;
|
|
341
|
+
}
|
|
342
|
+
get form() {
|
|
343
|
+
const t = h.get(this);
|
|
344
|
+
g(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
345
|
+
let e;
|
|
346
|
+
return t.constructor.formAssociated === !0 && (e = S(t)), e;
|
|
347
|
+
}
|
|
348
|
+
get labels() {
|
|
349
|
+
const t = h.get(this);
|
|
350
|
+
g(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
351
|
+
const e = t.getAttribute("id"), a = t.getRootNode();
|
|
352
|
+
return a && e ? a.querySelectorAll(`[for="${e}"]`) : [];
|
|
353
|
+
}
|
|
354
|
+
reportValidity() {
|
|
355
|
+
const t = h.get(this);
|
|
356
|
+
if (g(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
357
|
+
return !0;
|
|
358
|
+
const e = this.checkValidity(), a = W.get(this);
|
|
359
|
+
if (a && !t.constructor.formAssociated)
|
|
360
|
+
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
361
|
+
return !e && a && (t.focus(), a.focus()), e;
|
|
362
|
+
}
|
|
363
|
+
setFormValue(t) {
|
|
364
|
+
const e = h.get(this);
|
|
365
|
+
if (g(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), j(this), t != null && !(t instanceof FormData)) {
|
|
366
|
+
if (e.getAttribute("name")) {
|
|
367
|
+
const a = G(e, this);
|
|
368
|
+
a.value = t;
|
|
369
|
+
}
|
|
370
|
+
} else
|
|
371
|
+
t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
|
|
372
|
+
if (typeof r == "string") {
|
|
373
|
+
const n = G(e, this);
|
|
374
|
+
n.name = a, n.value = r;
|
|
375
|
+
}
|
|
376
|
+
});
|
|
377
|
+
H.set(e, t);
|
|
378
|
+
}
|
|
379
|
+
setValidity(t, e, a) {
|
|
380
|
+
const r = h.get(this);
|
|
381
|
+
if (g(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
382
|
+
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
383
|
+
W.set(this, a);
|
|
384
|
+
const n = c.get(this), o = {};
|
|
385
|
+
for (const v in t)
|
|
386
|
+
o[v] = t[v];
|
|
387
|
+
Object.keys(o).length === 0 && ut(n);
|
|
388
|
+
const u = { ...n, ...o };
|
|
389
|
+
delete u.valid;
|
|
390
|
+
const { valid: d } = pt(n, u, this.form);
|
|
391
|
+
if (!d && !e)
|
|
392
|
+
throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
|
|
393
|
+
p.set(this, d ? "" : e), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : I.set(r, this);
|
|
394
|
+
}
|
|
395
|
+
get shadowRoot() {
|
|
396
|
+
const t = h.get(this), e = D.get(t);
|
|
397
|
+
return e || null;
|
|
398
|
+
}
|
|
399
|
+
get validationMessage() {
|
|
400
|
+
const t = h.get(this);
|
|
401
|
+
return g(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), p.get(this);
|
|
402
|
+
}
|
|
403
|
+
get validity() {
|
|
404
|
+
const t = h.get(this);
|
|
405
|
+
return g(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
|
|
406
|
+
}
|
|
407
|
+
get willValidate() {
|
|
408
|
+
const t = h.get(this);
|
|
409
|
+
return g(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
function gt() {
|
|
413
|
+
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
414
|
+
return !1;
|
|
415
|
+
class i extends HTMLElement {
|
|
416
|
+
constructor() {
|
|
417
|
+
super(), this.internals = this.attachInternals();
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
|
|
421
|
+
customElements.define(t, i);
|
|
422
|
+
const e = new i();
|
|
423
|
+
return [
|
|
424
|
+
"shadowRoot",
|
|
425
|
+
"form",
|
|
426
|
+
"willValidate",
|
|
427
|
+
"validity",
|
|
428
|
+
"validationMessage",
|
|
429
|
+
"labels",
|
|
430
|
+
"setFormValue",
|
|
431
|
+
"setValidity",
|
|
432
|
+
"checkValidity",
|
|
433
|
+
"reportValidity"
|
|
434
|
+
].every((a) => a in e.internals);
|
|
435
|
+
}
|
|
436
|
+
if (gt()) {
|
|
437
|
+
if (typeof window < "u" && !window.CustomStateSet) {
|
|
438
|
+
window.CustomStateSet = N;
|
|
439
|
+
const i = HTMLElement.prototype.attachInternals;
|
|
440
|
+
HTMLElement.prototype.attachInternals = function(...t) {
|
|
441
|
+
const e = i.call(this, t);
|
|
442
|
+
return e.states = new N(this), e;
|
|
443
|
+
};
|
|
444
|
+
}
|
|
445
|
+
} else {
|
|
446
|
+
if (typeof window < "u" && (window.ElementInternals = et), typeof CustomElementRegistry < "u") {
|
|
447
|
+
const i = CustomElementRegistry.prototype.define;
|
|
448
|
+
CustomElementRegistry.prototype.define = function(t, e, a) {
|
|
449
|
+
if (e.formAssociated) {
|
|
450
|
+
const r = e.prototype.connectedCallback;
|
|
451
|
+
e.prototype.connectedCallback = function() {
|
|
452
|
+
q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), r != null && r.apply(this), X(this);
|
|
453
|
+
};
|
|
454
|
+
}
|
|
455
|
+
i.call(this, t, e, a);
|
|
456
|
+
};
|
|
457
|
+
}
|
|
458
|
+
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
459
|
+
if (this.tagName) {
|
|
460
|
+
if (this.tagName.indexOf("-") === -1)
|
|
461
|
+
throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
|
|
462
|
+
} else
|
|
463
|
+
return {};
|
|
464
|
+
if (l.has(this))
|
|
465
|
+
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
466
|
+
return new et(this);
|
|
467
|
+
}), typeof Element < "u") {
|
|
468
|
+
let i = function(...e) {
|
|
469
|
+
const a = t.apply(this, e);
|
|
470
|
+
if (D.set(this, a), L()) {
|
|
471
|
+
const r = new MutationObserver(R);
|
|
472
|
+
window.ShadyDOM ? r.observe(this, P) : r.observe(a, P), b.set(this, r);
|
|
473
|
+
}
|
|
474
|
+
return a;
|
|
475
|
+
};
|
|
476
|
+
const t = Element.prototype.attachShadow;
|
|
477
|
+
Element.prototype.attachShadow = i;
|
|
478
|
+
}
|
|
479
|
+
L() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, P), typeof HTMLFormElement < "u" && bt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = N);
|
|
480
|
+
}
|
|
481
|
+
})();
|
|
482
|
+
var It = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, y = (h, c, s, l) => {
|
|
483
|
+
for (var p = l > 1 ? void 0 : l ? Vt(c, s) : c, E = h.length - 1, b; E >= 0; E--)
|
|
484
|
+
(b = h[E]) && (p = (l ? b(c, s, p) : b(p)) || p);
|
|
485
|
+
return l && p && It(c, s, p), p;
|
|
11
486
|
};
|
|
12
|
-
const
|
|
13
|
-
class
|
|
487
|
+
const it = "pie-switch";
|
|
488
|
+
class f extends kt(vt) {
|
|
14
489
|
constructor() {
|
|
15
|
-
super(
|
|
490
|
+
super(), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1, this._internals = this.attachInternals();
|
|
491
|
+
}
|
|
492
|
+
firstUpdated(c) {
|
|
493
|
+
var s;
|
|
494
|
+
super.firstUpdated(c), this.handleFormAssociation(), (s = this.input) == null || s.addEventListener("invalid", (l) => {
|
|
495
|
+
this.dispatchEvent(new Event("invalid", l));
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
updated(c) {
|
|
499
|
+
super.updated(c), this.handleFormAssociation();
|
|
16
500
|
}
|
|
17
501
|
/**
|
|
18
|
-
*
|
|
19
|
-
* You can access this with `event.target.checked` when listening to the `change` event.
|
|
20
|
-
* @returns The value of the property `isChecked`.
|
|
502
|
+
* Ensures that the form value and validation state are in sync with the component.
|
|
21
503
|
*/
|
|
22
|
-
|
|
23
|
-
|
|
504
|
+
handleFormAssociation() {
|
|
505
|
+
!!this._internals.form && !!this.name && !!this.value && (this.disabled ? (this._internals.setFormValue(null), this._internals.setValidity({})) : this.checked ? (this._internals.setFormValue(this.value), this._internals.setValidity({})) : (this._internals.setFormValue(null), this._internals.setValidity(this.validity, this.validationMessage, this.input)));
|
|
24
506
|
}
|
|
25
507
|
/**
|
|
26
508
|
* The onChange function updates the checkbox state and emits an event for consumers.
|
|
27
509
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
28
510
|
*/
|
|
29
|
-
onChange(
|
|
30
|
-
const { checked:
|
|
31
|
-
this.
|
|
32
|
-
const
|
|
33
|
-
|
|
511
|
+
onChange(c) {
|
|
512
|
+
const { checked: s } = c == null ? void 0 : c.currentTarget;
|
|
513
|
+
this.checked = s;
|
|
514
|
+
const l = new CustomEvent(
|
|
515
|
+
Ct,
|
|
34
516
|
{
|
|
35
517
|
bubbles: !0,
|
|
36
518
|
composed: !0
|
|
37
519
|
}
|
|
38
520
|
);
|
|
39
|
-
this.dispatchEvent(
|
|
521
|
+
this.dispatchEvent(l), this.handleFormAssociation();
|
|
522
|
+
}
|
|
523
|
+
/**
|
|
524
|
+
* Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
|
|
525
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
|
|
526
|
+
* @returns boolean
|
|
527
|
+
*/
|
|
528
|
+
checkValidity() {
|
|
529
|
+
return this.input.checkValidity();
|
|
530
|
+
}
|
|
531
|
+
/**
|
|
532
|
+
* If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.
|
|
533
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
|
|
534
|
+
* @returns boolean
|
|
535
|
+
*/
|
|
536
|
+
reportValidity() {
|
|
537
|
+
return this.input.reportValidity();
|
|
538
|
+
}
|
|
539
|
+
/**
|
|
540
|
+
* Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
|
|
541
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
|
|
542
|
+
*/
|
|
543
|
+
setCustomValidity(c) {
|
|
544
|
+
var s;
|
|
545
|
+
(s = this.input) == null || s.setCustomValidity(c), this._internals.setValidity(this.validity, this.validationMessage, this.input);
|
|
546
|
+
}
|
|
547
|
+
/**
|
|
548
|
+
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
549
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
550
|
+
*/
|
|
551
|
+
get validity() {
|
|
552
|
+
return this.input.validity;
|
|
553
|
+
}
|
|
554
|
+
/**
|
|
555
|
+
* (Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).
|
|
556
|
+
* This string is empty if the component is valid.
|
|
557
|
+
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
|
|
558
|
+
*/
|
|
559
|
+
get validationMessage() {
|
|
560
|
+
return this.input.validationMessage;
|
|
40
561
|
}
|
|
41
562
|
/**
|
|
42
563
|
* Renders the label for a switch if provided.
|
|
@@ -45,73 +566,88 @@ class o extends v(w) {
|
|
|
45
566
|
* @private
|
|
46
567
|
*/
|
|
47
568
|
renderSwitchLabel() {
|
|
48
|
-
const { label:
|
|
49
|
-
return
|
|
569
|
+
const { label: c, labelPlacement: s } = this;
|
|
570
|
+
return c ? F`
|
|
50
571
|
<label
|
|
51
572
|
for="switch"
|
|
52
|
-
data-test-id="switch-label-${
|
|
53
|
-
${
|
|
54
|
-
</label>` :
|
|
573
|
+
data-test-id="switch-label-${s}">
|
|
574
|
+
${c}
|
|
575
|
+
</label>` : F``;
|
|
55
576
|
}
|
|
56
577
|
render() {
|
|
57
578
|
const {
|
|
58
|
-
labelPlacement:
|
|
59
|
-
aria:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
579
|
+
labelPlacement: c,
|
|
580
|
+
aria: s,
|
|
581
|
+
checked: l,
|
|
582
|
+
required: p,
|
|
583
|
+
disabled: E,
|
|
584
|
+
isRTL: b
|
|
585
|
+
} = this, m = "switch-description";
|
|
586
|
+
return F`
|
|
65
587
|
<div
|
|
66
588
|
class="c-switch-wrapper"
|
|
67
|
-
?isRTL=${
|
|
68
|
-
?
|
|
69
|
-
${
|
|
589
|
+
?isRTL=${b}
|
|
590
|
+
?disabled=${E}>
|
|
591
|
+
${c === "leading" ? this.renderSwitchLabel() : x}
|
|
70
592
|
<label
|
|
71
593
|
data-test-id="switch-component"
|
|
72
594
|
class="c-switch"
|
|
73
|
-
?
|
|
595
|
+
?checked=${l}>
|
|
74
596
|
<input
|
|
75
597
|
id="switch"
|
|
76
598
|
data-test-id="switch-input"
|
|
77
599
|
role="switch"
|
|
78
600
|
type="checkbox"
|
|
79
601
|
class="c-switch-input"
|
|
80
|
-
.
|
|
81
|
-
.
|
|
602
|
+
.required=${p}
|
|
603
|
+
.checked="${l}"
|
|
604
|
+
.disabled="${E}"
|
|
82
605
|
@change="${this.onChange}"
|
|
83
|
-
aria-label="${(
|
|
84
|
-
aria-describedby="${
|
|
606
|
+
aria-label="${(s == null ? void 0 : s.label) || x}"
|
|
607
|
+
aria-describedby="${s != null && s.describedBy ? m : x}">
|
|
85
608
|
<div class="c-switch-control">
|
|
86
|
-
${
|
|
609
|
+
${l ? F`<icon-check></icon-check>` : x}
|
|
87
610
|
</div>
|
|
88
611
|
</label>
|
|
89
|
-
${
|
|
90
|
-
${
|
|
612
|
+
${s != null && s.describedBy ? F`<div id="${m}" data-test-id="${m}" class="c-switch-description">${s == null ? void 0 : s.describedBy}</div>` : x}
|
|
613
|
+
${c === "trailing" ? this.renderSwitchLabel() : x}
|
|
91
614
|
</div>
|
|
92
615
|
`;
|
|
93
616
|
}
|
|
94
617
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
],
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
f
|
|
618
|
+
f.formAssociated = !0;
|
|
619
|
+
f.styles = yt(At);
|
|
620
|
+
y([
|
|
621
|
+
Et('input[type="checkbox"]')
|
|
622
|
+
], f.prototype, "input", 2);
|
|
623
|
+
y([
|
|
624
|
+
k({ type: String })
|
|
625
|
+
], f.prototype, "label", 2);
|
|
626
|
+
y([
|
|
627
|
+
k({ type: String }),
|
|
628
|
+
Mt(it, Ft, "leading")
|
|
629
|
+
], f.prototype, "labelPlacement", 2);
|
|
630
|
+
y([
|
|
631
|
+
k({ type: Object })
|
|
632
|
+
], f.prototype, "aria", 2);
|
|
633
|
+
y([
|
|
634
|
+
k({ type: Boolean, reflect: !0 })
|
|
635
|
+
], f.prototype, "checked", 2);
|
|
636
|
+
y([
|
|
637
|
+
k({ type: Boolean, reflect: !0 })
|
|
638
|
+
], f.prototype, "required", 2);
|
|
639
|
+
y([
|
|
640
|
+
k({ type: String })
|
|
641
|
+
], f.prototype, "value", 2);
|
|
642
|
+
y([
|
|
643
|
+
k({ type: String })
|
|
644
|
+
], f.prototype, "name", 2);
|
|
645
|
+
y([
|
|
646
|
+
k({ type: Boolean, reflect: !0 })
|
|
647
|
+
], f.prototype, "disabled", 2);
|
|
648
|
+
xt(it, f);
|
|
113
649
|
export {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
650
|
+
Ct as ON_SWITCH_CHANGED_EVENT,
|
|
651
|
+
f as PieSwitch,
|
|
652
|
+
Ft as labelPlacements
|
|
117
653
|
};
|