@justeattakeaway/pie-switch 2.4.2 → 2.5.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 -0
- package/custom-elements.json +34 -13
- package/dist/index.d.ts +14 -8
- package/dist/index.js +250 -231
- package/dist/react.d.ts +14 -8
- package/package.json +2 -2
- package/src/defs.ts +6 -0
- package/src/index.ts +63 -33
- package/src/switch.scss +7 -0
package/dist/index.js
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
|
-
import { LitElement as St, nothing as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { LitElement as St, nothing as N, html as z, unsafeCSS as Vt } from "lit";
|
|
2
|
+
import { unsafeStatic as Tt, html as Lt } from "lit/static-html.js";
|
|
3
|
+
import { property as y, query as q, state as Nt } from "lit/decorators.js";
|
|
4
|
+
import { classMap as Pt } from "lit/directives/class-map.js";
|
|
5
|
+
import { ifDefined as Ot } from "lit/directives/if-defined.js";
|
|
6
|
+
import { live as _t } from "lit/directives/live.js";
|
|
7
|
+
import { FormControlMixin as $t, DelegatesFocusMixin as Dt, wrapNativeEvent as Rt, validPropertyValues as Ht, safeCustomElement as Wt } from "@justeattakeaway/pie-webc-core";
|
|
6
8
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
7
|
-
const
|
|
9
|
+
const P = class P extends St {
|
|
8
10
|
willUpdate() {
|
|
9
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
11
|
+
this.getAttribute("v") || this.setAttribute("v", P.v);
|
|
10
12
|
}
|
|
11
13
|
};
|
|
12
|
-
|
|
13
|
-
let
|
|
14
|
-
var
|
|
15
|
-
function
|
|
16
|
-
return
|
|
17
|
-
(function(
|
|
18
|
-
const
|
|
14
|
+
P.v = "2.5.0";
|
|
15
|
+
let B = P;
|
|
16
|
+
var ht = {}, ut;
|
|
17
|
+
function zt() {
|
|
18
|
+
return ut || (ut = 1, (function() {
|
|
19
|
+
(function(n) {
|
|
20
|
+
const l = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), I = {
|
|
19
21
|
ariaAtomic: "aria-atomic",
|
|
20
22
|
ariaAutoComplete: "aria-autocomplete",
|
|
21
23
|
ariaBusy: "aria-busy",
|
|
@@ -59,10 +61,10 @@ function Rt() {
|
|
|
59
61
|
ariaValueText: "aria-valuetext",
|
|
60
62
|
role: "role"
|
|
61
63
|
}, pt = (e, t) => {
|
|
62
|
-
for (let i in
|
|
64
|
+
for (let i in I) {
|
|
63
65
|
t[i] = null;
|
|
64
66
|
let a = null;
|
|
65
|
-
const r =
|
|
67
|
+
const r = I[i];
|
|
66
68
|
Object.defineProperty(t, i, {
|
|
67
69
|
get() {
|
|
68
70
|
return a;
|
|
@@ -73,11 +75,11 @@ function Rt() {
|
|
|
73
75
|
});
|
|
74
76
|
}
|
|
75
77
|
};
|
|
76
|
-
function
|
|
78
|
+
function Q(e) {
|
|
77
79
|
const t = c.get(e), { form: i } = t;
|
|
78
|
-
|
|
80
|
+
it(e, i, t), et(e, t.labels);
|
|
79
81
|
}
|
|
80
|
-
const
|
|
82
|
+
const X = (e, t = !1) => {
|
|
81
83
|
const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
82
84
|
acceptNode(o) {
|
|
83
85
|
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
@@ -87,44 +89,44 @@ function Rt() {
|
|
|
87
89
|
const r = !t || e.disabled;
|
|
88
90
|
for (; a; )
|
|
89
91
|
a.formDisabledCallback && r && $(a, e.disabled), a = i.nextNode();
|
|
90
|
-
},
|
|
92
|
+
}, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, S = L() ? new MutationObserver((e) => {
|
|
91
93
|
for (const t of e) {
|
|
92
94
|
const i = t.target;
|
|
93
|
-
if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" &&
|
|
94
|
-
const a = c.get(i), r =
|
|
95
|
+
if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && X(i)), t.attributeName === "name" && i.constructor.formAssociated) {
|
|
96
|
+
const a = c.get(i), r = U.get(i);
|
|
95
97
|
a.setFormValue(r);
|
|
96
98
|
}
|
|
97
99
|
}
|
|
98
100
|
}) : {};
|
|
99
|
-
function
|
|
101
|
+
function O(e) {
|
|
100
102
|
e.forEach((t) => {
|
|
101
103
|
const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
|
|
102
104
|
r.forEach((s) => {
|
|
103
|
-
var
|
|
104
|
-
if (c.has(s) && s.constructor.formAssociated &&
|
|
105
|
-
const
|
|
106
|
-
Object.keys(
|
|
107
|
-
s.setAttribute(
|
|
105
|
+
var m;
|
|
106
|
+
if (c.has(s) && s.constructor.formAssociated && Q(s), A.has(s)) {
|
|
107
|
+
const h = A.get(s);
|
|
108
|
+
Object.keys(I).filter((v) => h[v] !== null).forEach((v) => {
|
|
109
|
+
s.setAttribute(I[v], h[v]);
|
|
108
110
|
}), A.delete(s);
|
|
109
111
|
}
|
|
110
|
-
if (
|
|
111
|
-
const
|
|
112
|
-
s.setAttribute("internals-valid",
|
|
112
|
+
if (F.has(s)) {
|
|
113
|
+
const h = F.get(s);
|
|
114
|
+
s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), F.delete(s);
|
|
113
115
|
}
|
|
114
116
|
if (s.localName === "form") {
|
|
115
|
-
const
|
|
116
|
-
acceptNode(
|
|
117
|
-
return c.has(
|
|
117
|
+
const h = b.get(s), g = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
|
|
118
|
+
acceptNode(W) {
|
|
119
|
+
return c.has(W) && W.constructor.formAssociated && !(h && h.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
118
120
|
}
|
|
119
121
|
});
|
|
120
|
-
let
|
|
121
|
-
for (;
|
|
122
|
-
|
|
122
|
+
let v = g.nextNode();
|
|
123
|
+
for (; v; )
|
|
124
|
+
Q(v), v = g.nextNode();
|
|
123
125
|
}
|
|
124
|
-
s.localName === "fieldset" && ((
|
|
126
|
+
s.localName === "fieldset" && ((m = S.observe) === null || m === void 0 || m.call(S, s, Y), X(s, !0));
|
|
125
127
|
}), o.forEach((s) => {
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
+
const m = c.get(s);
|
|
129
|
+
m && u.get(m) && Z(m), x.has(s) && x.get(s).disconnect();
|
|
128
130
|
});
|
|
129
131
|
});
|
|
130
132
|
}
|
|
@@ -132,122 +134,122 @@ function Rt() {
|
|
|
132
134
|
e.forEach((t) => {
|
|
133
135
|
const { removedNodes: i } = t;
|
|
134
136
|
i.forEach((a) => {
|
|
135
|
-
const r =
|
|
136
|
-
c.has(a) &&
|
|
137
|
+
const r = G.get(t.target);
|
|
138
|
+
c.has(a) && rt(a), r.disconnect();
|
|
137
139
|
});
|
|
138
140
|
});
|
|
139
141
|
}
|
|
140
142
|
const ft = (e) => {
|
|
141
143
|
var t, i;
|
|
142
144
|
const a = new MutationObserver(mt);
|
|
143
|
-
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = a.observe) === null || i === void 0 || i.call(a, e, { childList: !0 }),
|
|
145
|
+
!((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = a.observe) === null || i === void 0 || i.call(a, e, { childList: !0 }), G.set(e, a);
|
|
144
146
|
};
|
|
145
|
-
|
|
146
|
-
const
|
|
147
|
+
L() && new MutationObserver(O);
|
|
148
|
+
const _ = {
|
|
147
149
|
childList: !0,
|
|
148
150
|
subtree: !0
|
|
149
151
|
}, $ = (e, t) => {
|
|
150
152
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
151
|
-
},
|
|
152
|
-
|
|
153
|
+
}, Z = (e) => {
|
|
154
|
+
u.get(e).forEach((i) => {
|
|
153
155
|
i.remove();
|
|
154
|
-
}),
|
|
155
|
-
},
|
|
156
|
+
}), u.set(e, []);
|
|
157
|
+
}, tt = (e, t) => {
|
|
156
158
|
const i = document.createElement("input");
|
|
157
|
-
return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i),
|
|
159
|
+
return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), u.get(t).push(i), i;
|
|
158
160
|
}, bt = (e, t) => {
|
|
159
161
|
var i;
|
|
160
|
-
|
|
161
|
-
},
|
|
162
|
+
u.set(t, []), (i = S.observe) === null || i === void 0 || i.call(S, e, Y);
|
|
163
|
+
}, et = (e, t) => {
|
|
162
164
|
if (t.length) {
|
|
163
165
|
Array.from(t).forEach((a) => a.addEventListener("click", e.click.bind(e)));
|
|
164
166
|
let i = t[0].id;
|
|
165
167
|
t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
|
|
166
168
|
}
|
|
167
|
-
},
|
|
168
|
-
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i =
|
|
169
|
+
}, V = (e) => {
|
|
170
|
+
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = b.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...t, ...a].includes(!1);
|
|
169
171
|
e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
|
|
170
172
|
}, vt = (e) => {
|
|
171
|
-
|
|
173
|
+
V(T(e.target));
|
|
172
174
|
}, wt = (e) => {
|
|
173
|
-
|
|
175
|
+
V(T(e.target));
|
|
174
176
|
}, gt = (e) => {
|
|
175
177
|
const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
|
|
176
178
|
e.addEventListener("click", (i) => {
|
|
177
179
|
if (i.target.closest(t)) {
|
|
178
|
-
const r =
|
|
180
|
+
const r = b.get(e);
|
|
179
181
|
if (e.noValidate)
|
|
180
182
|
return;
|
|
181
|
-
r.size && Array.from(r).reverse().map((
|
|
183
|
+
r.size && Array.from(r).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && i.preventDefault();
|
|
182
184
|
}
|
|
183
185
|
});
|
|
184
186
|
}, yt = (e) => {
|
|
185
|
-
const t =
|
|
187
|
+
const t = b.get(e.target);
|
|
186
188
|
t && t.size && t.forEach((i) => {
|
|
187
189
|
i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
|
|
188
190
|
});
|
|
189
|
-
},
|
|
191
|
+
}, it = (e, t, i) => {
|
|
190
192
|
if (t) {
|
|
191
|
-
const a =
|
|
193
|
+
const a = b.get(t);
|
|
192
194
|
if (a)
|
|
193
195
|
a.add(e);
|
|
194
196
|
else {
|
|
195
197
|
const r = /* @__PURE__ */ new Set();
|
|
196
|
-
r.add(e),
|
|
198
|
+
r.add(e), b.set(t, r), gt(t), t.addEventListener("reset", yt), t.addEventListener("input", vt), t.addEventListener("change", wt);
|
|
197
199
|
}
|
|
198
|
-
|
|
200
|
+
E.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
199
201
|
e.formAssociatedCallback.apply(e, [t]);
|
|
200
|
-
}, 0),
|
|
202
|
+
}, 0), V(t);
|
|
201
203
|
}
|
|
202
|
-
},
|
|
204
|
+
}, T = (e) => {
|
|
203
205
|
let t = e.parentNode;
|
|
204
|
-
return t && t.tagName !== "FORM" && (t =
|
|
205
|
-
},
|
|
206
|
+
return t && t.tagName !== "FORM" && (t = T(t)), t;
|
|
207
|
+
}, w = (e, t, i = DOMException) => {
|
|
206
208
|
if (!e.constructor.formAssociated)
|
|
207
209
|
throw new i(t);
|
|
208
|
-
},
|
|
209
|
-
const a =
|
|
210
|
+
}, at = (e, t, i) => {
|
|
211
|
+
const a = b.get(e);
|
|
210
212
|
return a && a.size && a.forEach((r) => {
|
|
211
213
|
c.get(r)[i]() || (t = !1);
|
|
212
214
|
}), t;
|
|
213
|
-
},
|
|
215
|
+
}, rt = (e) => {
|
|
214
216
|
if (e.constructor.formAssociated) {
|
|
215
217
|
const t = c.get(e), { labels: i, form: a } = t;
|
|
216
|
-
|
|
218
|
+
et(e, i), it(e, a, t);
|
|
217
219
|
}
|
|
218
220
|
};
|
|
219
|
-
function
|
|
221
|
+
function L() {
|
|
220
222
|
return typeof MutationObserver < "u";
|
|
221
223
|
}
|
|
222
|
-
class
|
|
224
|
+
class kt {
|
|
223
225
|
constructor() {
|
|
224
226
|
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);
|
|
225
227
|
}
|
|
226
228
|
}
|
|
227
|
-
const
|
|
229
|
+
const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Mt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((a) => e[a] = t[a]), i && V(i), e), xt = (e) => {
|
|
228
230
|
let t = !0;
|
|
229
231
|
for (let i in e)
|
|
230
232
|
i !== "valid" && e[i] !== !1 && (t = !1);
|
|
231
233
|
return t;
|
|
232
|
-
},
|
|
233
|
-
function
|
|
234
|
+
}, D = /* @__PURE__ */ new WeakMap();
|
|
235
|
+
function ot(e, t) {
|
|
234
236
|
e.toggleAttribute(t, !0), e.part && e.part.add(t);
|
|
235
237
|
}
|
|
236
|
-
class
|
|
238
|
+
class R extends Set {
|
|
237
239
|
static get isPolyfilled() {
|
|
238
240
|
return !0;
|
|
239
241
|
}
|
|
240
242
|
constructor(t) {
|
|
241
243
|
if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
242
244
|
throw new TypeError("Illegal constructor");
|
|
243
|
-
|
|
245
|
+
D.set(this, t);
|
|
244
246
|
}
|
|
245
247
|
add(t) {
|
|
246
248
|
if (!/^--/.test(t) || typeof t != "string")
|
|
247
249
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
248
|
-
const i = super.add(t), a =
|
|
249
|
-
return a.isConnected ?
|
|
250
|
-
|
|
250
|
+
const i = super.add(t), a = D.get(this), r = `state${t}`;
|
|
251
|
+
return a.isConnected ? ot(a, r) : setTimeout(() => {
|
|
252
|
+
ot(a, r);
|
|
251
253
|
}), i;
|
|
252
254
|
}
|
|
253
255
|
clear() {
|
|
@@ -256,24 +258,24 @@ function Rt() {
|
|
|
256
258
|
super.clear();
|
|
257
259
|
}
|
|
258
260
|
delete(t) {
|
|
259
|
-
const i = super.delete(t), a =
|
|
261
|
+
const i = super.delete(t), a = D.get(this);
|
|
260
262
|
return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
|
|
261
263
|
a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
|
|
262
264
|
}), i;
|
|
263
265
|
}
|
|
264
266
|
}
|
|
265
|
-
function
|
|
267
|
+
function st(e, t, i, a) {
|
|
266
268
|
if (typeof t == "function" ? e !== t || !a : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
267
269
|
return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
|
|
268
270
|
}
|
|
269
|
-
function
|
|
271
|
+
function Ct(e, t, i, a, r) {
|
|
270
272
|
if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
271
273
|
return t.set(e, i), i;
|
|
272
274
|
}
|
|
273
|
-
var
|
|
274
|
-
class
|
|
275
|
+
var C;
|
|
276
|
+
class At {
|
|
275
277
|
constructor(t) {
|
|
276
|
-
|
|
278
|
+
C.set(this, void 0), Ct(this, C, t);
|
|
277
279
|
for (let i = 0; i < t.length; i++) {
|
|
278
280
|
let a = t[i];
|
|
279
281
|
this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
|
|
@@ -281,10 +283,10 @@ function Rt() {
|
|
|
281
283
|
Object.freeze(this);
|
|
282
284
|
}
|
|
283
285
|
get length() {
|
|
284
|
-
return
|
|
286
|
+
return st(this, C, "f").length;
|
|
285
287
|
}
|
|
286
|
-
[(
|
|
287
|
-
return
|
|
288
|
+
[(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
289
|
+
return st(this, C, "f")[Symbol.iterator]();
|
|
288
290
|
}
|
|
289
291
|
item(t) {
|
|
290
292
|
return this[t] == null ? null : this[t];
|
|
@@ -300,38 +302,38 @@ function Rt() {
|
|
|
300
302
|
HTMLFormElement.prototype.reportValidity = a;
|
|
301
303
|
function i(...o) {
|
|
302
304
|
let s = e.apply(this, o);
|
|
303
|
-
return
|
|
305
|
+
return at(this, s, "checkValidity");
|
|
304
306
|
}
|
|
305
307
|
function a(...o) {
|
|
306
308
|
let s = t.apply(this, o);
|
|
307
|
-
return
|
|
309
|
+
return at(this, s, "reportValidity");
|
|
308
310
|
}
|
|
309
311
|
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
310
312
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
311
313
|
get(...o) {
|
|
312
|
-
const s = r.call(this, ...o),
|
|
313
|
-
if (
|
|
314
|
+
const s = r.call(this, ...o), m = Array.from(b.get(this) || []);
|
|
315
|
+
if (m.length === 0)
|
|
314
316
|
return s;
|
|
315
|
-
const
|
|
316
|
-
return new
|
|
317
|
+
const h = Array.from(s).concat(m).sort((g, v) => g.compareDocumentPosition ? g.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
|
|
318
|
+
return new At(h);
|
|
317
319
|
}
|
|
318
320
|
});
|
|
319
321
|
}
|
|
320
|
-
class
|
|
322
|
+
class nt {
|
|
321
323
|
static get isPolyfilled() {
|
|
322
324
|
return !0;
|
|
323
325
|
}
|
|
324
326
|
constructor(t) {
|
|
325
327
|
if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
326
328
|
throw new TypeError("Illegal constructor");
|
|
327
|
-
const i = t.getRootNode(), a = new
|
|
328
|
-
this.states = new
|
|
329
|
+
const i = t.getRootNode(), a = new kt();
|
|
330
|
+
this.states = new R(t), l.set(this, t), d.set(this, a), c.set(t, this), pt(t, this), bt(t, this), Object.seal(this), i instanceof DocumentFragment && ft(i);
|
|
329
331
|
}
|
|
330
332
|
checkValidity() {
|
|
331
|
-
const t =
|
|
332
|
-
if (
|
|
333
|
+
const t = l.get(this);
|
|
334
|
+
if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
333
335
|
return !0;
|
|
334
|
-
const i =
|
|
336
|
+
const i = d.get(this);
|
|
335
337
|
if (!i.valid) {
|
|
336
338
|
const a = new Event("invalid", {
|
|
337
339
|
bubbles: !1,
|
|
@@ -343,72 +345,72 @@ function Rt() {
|
|
|
343
345
|
return i.valid;
|
|
344
346
|
}
|
|
345
347
|
get form() {
|
|
346
|
-
const t =
|
|
347
|
-
|
|
348
|
+
const t = l.get(this);
|
|
349
|
+
w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
348
350
|
let i;
|
|
349
|
-
return t.constructor.formAssociated === !0 && (i =
|
|
351
|
+
return t.constructor.formAssociated === !0 && (i = T(t)), i;
|
|
350
352
|
}
|
|
351
353
|
get labels() {
|
|
352
|
-
const t =
|
|
353
|
-
|
|
354
|
+
const t = l.get(this);
|
|
355
|
+
w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
354
356
|
const i = t.getAttribute("id"), a = t.getRootNode();
|
|
355
357
|
return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
|
|
356
358
|
}
|
|
357
359
|
reportValidity() {
|
|
358
|
-
const t =
|
|
359
|
-
if (
|
|
360
|
+
const t = l.get(this);
|
|
361
|
+
if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
360
362
|
return !0;
|
|
361
|
-
const i = this.checkValidity(), a =
|
|
363
|
+
const i = this.checkValidity(), a = K.get(this);
|
|
362
364
|
if (a && !t.constructor.formAssociated)
|
|
363
365
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
364
366
|
return !i && a && (t.focus(), a.focus()), i;
|
|
365
367
|
}
|
|
366
368
|
setFormValue(t) {
|
|
367
|
-
const i =
|
|
368
|
-
if (
|
|
369
|
+
const i = l.get(this);
|
|
370
|
+
if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
|
|
369
371
|
if (i.getAttribute("name")) {
|
|
370
|
-
const a =
|
|
372
|
+
const a = tt(i, this);
|
|
371
373
|
a.value = t;
|
|
372
374
|
}
|
|
373
375
|
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
|
|
374
376
|
if (typeof r == "string") {
|
|
375
|
-
const o =
|
|
377
|
+
const o = tt(i, this);
|
|
376
378
|
o.name = a, o.value = r;
|
|
377
379
|
}
|
|
378
380
|
});
|
|
379
|
-
|
|
381
|
+
U.set(i, t);
|
|
380
382
|
}
|
|
381
383
|
setValidity(t, i, a) {
|
|
382
|
-
const r =
|
|
383
|
-
if (
|
|
384
|
+
const r = l.get(this);
|
|
385
|
+
if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
384
386
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
385
|
-
|
|
386
|
-
const o =
|
|
387
|
-
for (const
|
|
388
|
-
s[
|
|
389
|
-
Object.keys(s).length === 0 &&
|
|
390
|
-
const
|
|
391
|
-
delete
|
|
392
|
-
const { valid:
|
|
393
|
-
if (!
|
|
387
|
+
K.set(this, a);
|
|
388
|
+
const o = d.get(this), s = {};
|
|
389
|
+
for (const g in t)
|
|
390
|
+
s[g] = t[g];
|
|
391
|
+
Object.keys(s).length === 0 && Et(o);
|
|
392
|
+
const m = Object.assign(Object.assign({}, o), s);
|
|
393
|
+
delete m.valid;
|
|
394
|
+
const { valid: h } = Mt(o, m, this.form);
|
|
395
|
+
if (!h && !i)
|
|
394
396
|
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.");
|
|
395
|
-
|
|
397
|
+
k.set(this, h ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !h), r.toggleAttribute("internals-valid", h), r.setAttribute("aria-invalid", `${!h}`)) : F.set(r, this);
|
|
396
398
|
}
|
|
397
399
|
get shadowRoot() {
|
|
398
|
-
const t =
|
|
400
|
+
const t = l.get(this), i = j.get(t);
|
|
399
401
|
return i || null;
|
|
400
402
|
}
|
|
401
403
|
get validationMessage() {
|
|
402
|
-
const t =
|
|
403
|
-
return
|
|
404
|
+
const t = l.get(this);
|
|
405
|
+
return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), k.get(this);
|
|
404
406
|
}
|
|
405
407
|
get validity() {
|
|
406
|
-
const t =
|
|
407
|
-
return
|
|
408
|
+
const t = l.get(this);
|
|
409
|
+
return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
|
|
408
410
|
}
|
|
409
411
|
get willValidate() {
|
|
410
|
-
const t =
|
|
411
|
-
return
|
|
412
|
+
const t = l.get(this);
|
|
413
|
+
return w(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"));
|
|
412
414
|
}
|
|
413
415
|
}
|
|
414
416
|
function It() {
|
|
@@ -435,22 +437,22 @@ function Rt() {
|
|
|
435
437
|
"reportValidity"
|
|
436
438
|
].every((a) => a in i.internals);
|
|
437
439
|
}
|
|
438
|
-
let
|
|
439
|
-
function
|
|
440
|
-
|
|
440
|
+
let lt = !1, ct = !1;
|
|
441
|
+
function H(e) {
|
|
442
|
+
ct || (ct = !0, window.CustomStateSet = R, e && (HTMLElement.prototype.attachInternals = function(...t) {
|
|
441
443
|
const i = e.call(this, t);
|
|
442
|
-
return i.states = new
|
|
444
|
+
return i.states = new R(this), i;
|
|
443
445
|
}));
|
|
444
446
|
}
|
|
445
|
-
function
|
|
446
|
-
if (!
|
|
447
|
-
if (
|
|
447
|
+
function dt(e = !0) {
|
|
448
|
+
if (!lt) {
|
|
449
|
+
if (lt = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
|
|
448
450
|
const t = CustomElementRegistry.prototype.define;
|
|
449
451
|
CustomElementRegistry.prototype.define = function(i, a, r) {
|
|
450
452
|
if (a.formAssociated) {
|
|
451
453
|
const o = a.prototype.connectedCallback;
|
|
452
454
|
a.prototype.connectedCallback = function() {
|
|
453
|
-
|
|
455
|
+
J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), rt(this);
|
|
454
456
|
};
|
|
455
457
|
}
|
|
456
458
|
t.call(this, i, a, r);
|
|
@@ -463,59 +465,64 @@ function Rt() {
|
|
|
463
465
|
} else return {};
|
|
464
466
|
if (c.has(this))
|
|
465
467
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
466
|
-
return new
|
|
468
|
+
return new nt(this);
|
|
467
469
|
}), typeof Element < "u") {
|
|
468
470
|
let t = function(...a) {
|
|
469
471
|
const r = i.apply(this, a);
|
|
470
|
-
if (
|
|
471
|
-
const o = new MutationObserver(
|
|
472
|
-
window.ShadyDOM ? o.observe(this,
|
|
472
|
+
if (j.set(this, r), L()) {
|
|
473
|
+
const o = new MutationObserver(O);
|
|
474
|
+
window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), x.set(this, o);
|
|
473
475
|
}
|
|
474
476
|
return r;
|
|
475
477
|
};
|
|
476
478
|
const i = Element.prototype.attachShadow;
|
|
477
479
|
Element.prototype.attachShadow = t;
|
|
478
480
|
}
|
|
479
|
-
|
|
481
|
+
L() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ft(), (e || typeof window < "u" && !window.CustomStateSet) && H();
|
|
480
482
|
}
|
|
481
483
|
}
|
|
482
|
-
return !!customElements.polyfillWrapFlushCallback || (It() ? typeof window < "u" && !window.CustomStateSet &&
|
|
484
|
+
return !!customElements.polyfillWrapFlushCallback || (It() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : dt(!1)), n.forceCustomStateSetPolyfill = H, n.forceElementInternalsPolyfill = dt, Object.defineProperty(n, "__esModule", { value: !0 }), n;
|
|
483
485
|
})({});
|
|
484
|
-
})()),
|
|
486
|
+
})()), ht;
|
|
485
487
|
}
|
|
486
|
-
|
|
487
|
-
const
|
|
488
|
+
zt();
|
|
489
|
+
const Bt = "*,*:after,*:before{box-sizing:inherit}:host{display:block}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);vertical-align:top;font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--int-states-mixin-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(--int-states-mixin-bg-color)}@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--hover-modifier)))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-form))}}.c-switch:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-form))}}.c-switch[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.c-switch[checked]:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.c-switch[checked]:active:not(:disabled,.is-disabled,.is-dismissible),.c-switch[checked].is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}[disabled] .c-switch{--int-states-mixin-bg-color: var(--switch-bg-color--disabled);pointer-events:none}.c-switch:has(.c-switch-input:focus-visible){box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch-input{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-input *{overflow:hidden}.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)}.c-switch-wrapper:dir(rtl) .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-control .c-pieIcon--check{vertical-align:top}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--dt-color-interactive-brand)}.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)}.c-switch-label{color:var(--dt-color-content-default-solid)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-switch-description *{overflow:hidden}.c-switch-wrapper--label-leading{flex-direction:row-reverse}.c-switch-wrapper--label-trailing{flex-direction:row}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:checked+.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}@media(prefers-reduced-motion:no-preference){.c-switch-input:disabled~.c-switch-wrapper--allow-animation .c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper:dir(rtl) .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}", qt = ["leading", "trailing"], ae = "change", M = {
|
|
488
490
|
checked: !1,
|
|
491
|
+
defaultChecked: !1,
|
|
489
492
|
disabled: !1,
|
|
490
493
|
labelPlacement: "leading",
|
|
491
494
|
required: !1,
|
|
492
495
|
value: "on"
|
|
493
496
|
};
|
|
494
|
-
var
|
|
495
|
-
for (var c =
|
|
496
|
-
(
|
|
497
|
-
return
|
|
497
|
+
var Ut = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, f = (n, l, d, u) => {
|
|
498
|
+
for (var c = u > 1 ? void 0 : u ? jt(l, d) : l, k = n.length - 1, E; k >= 0; k--)
|
|
499
|
+
(E = n[k]) && (c = (u ? E(l, d, c) : E(c)) || c);
|
|
500
|
+
return u && c && Ut(l, d, c), c;
|
|
498
501
|
};
|
|
499
|
-
const
|
|
500
|
-
let p = class extends
|
|
502
|
+
const Kt = "pie-switch";
|
|
503
|
+
let p = class extends $t(Dt(B)) {
|
|
501
504
|
constructor() {
|
|
502
|
-
super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled, this._isAnimationAllowed = !1;
|
|
505
|
+
super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.defaultChecked = M.defaultChecked, this.required = M.required, this.value = M.value, this.disabled = M.disabled, this._isAnimationAllowed = !1;
|
|
503
506
|
}
|
|
504
507
|
firstUpdated() {
|
|
505
|
-
this.handleFormAssociation(), this.input.addEventListener("invalid", (
|
|
506
|
-
this.dispatchEvent(new Event("invalid",
|
|
508
|
+
this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
|
|
509
|
+
this.dispatchEvent(new Event("invalid", n));
|
|
507
510
|
});
|
|
508
511
|
}
|
|
509
512
|
connectedCallback() {
|
|
510
513
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
511
|
-
const { signal:
|
|
512
|
-
this.addEventListener("click", (
|
|
513
|
-
|
|
514
|
-
|
|
514
|
+
const { signal: n } = this._abortController;
|
|
515
|
+
this.addEventListener("click", (l) => {
|
|
516
|
+
const [d] = l.composedPath();
|
|
517
|
+
if (this.disabled || d === this.input)
|
|
518
|
+
return;
|
|
519
|
+
const u = !this.label && l.composedPath().includes(this.switchBody);
|
|
520
|
+
(d === this || u) && this.input.click();
|
|
521
|
+
}, { signal: n });
|
|
515
522
|
}
|
|
516
523
|
disconnectedCallback() {
|
|
517
|
-
var
|
|
518
|
-
super.disconnectedCallback(), (
|
|
524
|
+
var n;
|
|
525
|
+
super.disconnectedCallback(), (n = this._abortController) == null || n.abort();
|
|
519
526
|
}
|
|
520
527
|
updated() {
|
|
521
528
|
this.handleFormAssociation();
|
|
@@ -530,11 +537,11 @@ let p = class extends Ot(_t(q)) {
|
|
|
530
537
|
* The handleChange function updates the checkbox state and emits an event for consumers.
|
|
531
538
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
532
539
|
*/
|
|
533
|
-
handleChange(
|
|
534
|
-
const { checked:
|
|
535
|
-
this.checked =
|
|
536
|
-
const
|
|
537
|
-
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(
|
|
540
|
+
handleChange(n) {
|
|
541
|
+
const { checked: l } = n == null ? void 0 : n.currentTarget;
|
|
542
|
+
this.checked = l;
|
|
543
|
+
const d = Rt(n);
|
|
544
|
+
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(d), this.handleFormAssociation();
|
|
538
545
|
}
|
|
539
546
|
/**
|
|
540
547
|
* 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.
|
|
@@ -556,8 +563,19 @@ let p = class extends Ot(_t(q)) {
|
|
|
556
563
|
* Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
|
|
557
564
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
|
|
558
565
|
*/
|
|
559
|
-
setCustomValidity(
|
|
560
|
-
this.input.setCustomValidity(
|
|
566
|
+
setCustomValidity(n) {
|
|
567
|
+
this.input.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
|
|
568
|
+
}
|
|
569
|
+
/**
|
|
570
|
+
* Called when the containing form is reset.
|
|
571
|
+
* Resets checked state back to defaultChecked and emits a change event when needed.
|
|
572
|
+
*/
|
|
573
|
+
formResetCallback() {
|
|
574
|
+
if (this.checked === this.defaultChecked)
|
|
575
|
+
return;
|
|
576
|
+
this.checked = this.defaultChecked;
|
|
577
|
+
const n = new Event("change", { bubbles: !0, composed: !0 });
|
|
578
|
+
this.dispatchEvent(n), this.handleFormAssociation();
|
|
561
579
|
}
|
|
562
580
|
/**
|
|
563
581
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -574,115 +592,116 @@ let p = class extends Ot(_t(q)) {
|
|
|
574
592
|
get validationMessage() {
|
|
575
593
|
return this.input.validationMessage;
|
|
576
594
|
}
|
|
577
|
-
/**
|
|
578
|
-
* If a label is provided, renders it if `labelPlacement` matches the given position.
|
|
579
|
-
* If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
|
|
580
|
-
*
|
|
581
|
-
* @private
|
|
582
|
-
*/
|
|
583
|
-
renderSwitchLabel(l) {
|
|
584
|
-
const { label: n, labelPlacement: h } = this;
|
|
585
|
-
return !n || h !== l ? L : N`
|
|
586
|
-
<span
|
|
587
|
-
aria-hidden="true"
|
|
588
|
-
data-test-id="switch-label-${h}"
|
|
589
|
-
class="c-switch-label">
|
|
590
|
-
${n}
|
|
591
|
-
</span>`;
|
|
592
|
-
}
|
|
593
595
|
renderAriaDescription() {
|
|
594
|
-
var
|
|
595
|
-
return (
|
|
596
|
+
var n;
|
|
597
|
+
return (n = this.aria) != null && n.describedBy ? z`
|
|
596
598
|
<div
|
|
597
599
|
aria-hidden="true"
|
|
598
600
|
id="switch-description"
|
|
599
601
|
data-test-id="switch-description"
|
|
600
602
|
class="c-switch-description">
|
|
601
603
|
${this.aria.describedBy}
|
|
602
|
-
</div>` :
|
|
604
|
+
</div>` : N;
|
|
605
|
+
}
|
|
606
|
+
renderSwitchLabel() {
|
|
607
|
+
const { label: n, labelPlacement: l } = this;
|
|
608
|
+
return n ? z`
|
|
609
|
+
<span
|
|
610
|
+
aria-hidden="true"
|
|
611
|
+
data-test-id="switch-label-${l}"
|
|
612
|
+
class="c-switch-label">
|
|
613
|
+
${n}
|
|
614
|
+
</span>` : N;
|
|
603
615
|
}
|
|
604
616
|
render() {
|
|
605
617
|
const {
|
|
606
|
-
label:
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
<label
|
|
615
|
-
class="${Lt({
|
|
618
|
+
label: n,
|
|
619
|
+
labelPlacement: l,
|
|
620
|
+
aria: d,
|
|
621
|
+
checked: u,
|
|
622
|
+
disabled: c,
|
|
623
|
+
required: k,
|
|
624
|
+
_isAnimationAllowed: E
|
|
625
|
+
} = this, x = {
|
|
616
626
|
"c-switch-wrapper": !0,
|
|
617
|
-
"c-switch-wrapper--allow-animation":
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
627
|
+
"c-switch-wrapper--allow-animation": E,
|
|
628
|
+
[`c-switch-wrapper--label-${l}`]: !0
|
|
629
|
+
}, b = Tt(n ? "label" : "div");
|
|
630
|
+
return Lt`
|
|
631
|
+
<${b}
|
|
632
|
+
class="${Pt(x)}"
|
|
633
|
+
?disabled=${c}>
|
|
621
634
|
<div
|
|
622
635
|
data-test-id="switch-component"
|
|
623
636
|
class="c-switch"
|
|
624
|
-
?checked=${
|
|
637
|
+
?checked=${u}>
|
|
625
638
|
<input
|
|
626
639
|
data-test-id="switch-input"
|
|
627
640
|
role="switch"
|
|
628
641
|
type="checkbox"
|
|
629
642
|
class="c-switch-input"
|
|
630
|
-
.required=${
|
|
631
|
-
.checked="${
|
|
632
|
-
.disabled="${
|
|
643
|
+
.required=${k}
|
|
644
|
+
.checked="${_t(u)}"
|
|
645
|
+
.disabled="${c}"
|
|
633
646
|
@change="${this.handleChange}"
|
|
634
|
-
aria-label="${
|
|
635
|
-
aria-describedby="${
|
|
647
|
+
aria-label="${Ot((d == null ? void 0 : d.label) || n)}"
|
|
648
|
+
aria-describedby="${d != null && d.describedBy ? "switch-description" : N}">
|
|
636
649
|
<div class="c-switch-control">
|
|
637
|
-
${
|
|
650
|
+
${u ? z`<icon-check></icon-check>` : N}
|
|
638
651
|
</div>
|
|
639
652
|
</div>
|
|
640
|
-
${this.renderSwitchLabel(
|
|
653
|
+
${this.renderSwitchLabel()}
|
|
641
654
|
${this.renderAriaDescription()}
|
|
642
|
-
|
|
655
|
+
</${b}>`;
|
|
643
656
|
}
|
|
644
657
|
};
|
|
645
|
-
p.styles = Vt(
|
|
658
|
+
p.styles = Vt(Bt);
|
|
646
659
|
f([
|
|
647
|
-
|
|
660
|
+
y({ type: String })
|
|
648
661
|
], p.prototype, "label", 2);
|
|
649
662
|
f([
|
|
650
|
-
|
|
651
|
-
|
|
663
|
+
y({ type: String }),
|
|
664
|
+
Ht(Kt, qt, M.labelPlacement)
|
|
652
665
|
], p.prototype, "labelPlacement", 2);
|
|
653
666
|
f([
|
|
654
|
-
|
|
667
|
+
y({ type: Object })
|
|
655
668
|
], p.prototype, "aria", 2);
|
|
656
669
|
f([
|
|
657
|
-
|
|
670
|
+
y({ type: Boolean, reflect: !0 })
|
|
658
671
|
], p.prototype, "checked", 2);
|
|
659
672
|
f([
|
|
660
|
-
|
|
673
|
+
y({ type: Boolean, reflect: !0 })
|
|
674
|
+
], p.prototype, "defaultChecked", 2);
|
|
675
|
+
f([
|
|
676
|
+
y({ type: Boolean, reflect: !0 })
|
|
661
677
|
], p.prototype, "required", 2);
|
|
662
678
|
f([
|
|
663
|
-
|
|
679
|
+
y({ type: String })
|
|
664
680
|
], p.prototype, "value", 2);
|
|
665
681
|
f([
|
|
666
|
-
|
|
682
|
+
y({ type: String, reflect: !0 })
|
|
667
683
|
], p.prototype, "name", 2);
|
|
668
684
|
f([
|
|
669
|
-
|
|
685
|
+
y({ type: Boolean, reflect: !0 })
|
|
670
686
|
], p.prototype, "disabled", 2);
|
|
671
687
|
f([
|
|
672
|
-
|
|
688
|
+
q('input[type="checkbox"]')
|
|
673
689
|
], p.prototype, "input", 2);
|
|
674
690
|
f([
|
|
675
|
-
|
|
691
|
+
q(".c-switch")
|
|
692
|
+
], p.prototype, "switchBody", 2);
|
|
693
|
+
f([
|
|
694
|
+
q('label, input[type="checkbox"]')
|
|
676
695
|
], p.prototype, "focusTarget", 2);
|
|
677
696
|
f([
|
|
678
|
-
|
|
697
|
+
Nt()
|
|
679
698
|
], p.prototype, "_isAnimationAllowed", 2);
|
|
680
699
|
p = f([
|
|
681
|
-
|
|
700
|
+
Wt("pie-switch")
|
|
682
701
|
], p);
|
|
683
702
|
export {
|
|
684
|
-
|
|
703
|
+
ae as ON_SWITCH_CHANGED_EVENT,
|
|
685
704
|
p as PieSwitch,
|
|
686
705
|
M as defaultProps,
|
|
687
|
-
|
|
706
|
+
qt as labelPlacements
|
|
688
707
|
};
|