@justeattakeaway/pie-switch 1.1.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +103 -103
- package/package.json +3 -3
- package/src/switch.scss +9 -24
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { FormControlMixin as Te, RtlMixin as Le, wrapNativeEvent as Ne, validPro
|
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
7
7
|
(function() {
|
|
8
8
|
(function(E) {
|
|
9
|
-
const o = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(),
|
|
9
|
+
const o = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = {
|
|
10
10
|
ariaAtomic: "aria-atomic",
|
|
11
11
|
ariaAutoComplete: "aria-autocomplete",
|
|
12
12
|
ariaBusy: "aria-busy",
|
|
@@ -58,8 +58,8 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
58
58
|
get() {
|
|
59
59
|
return a;
|
|
60
60
|
},
|
|
61
|
-
set(
|
|
62
|
-
a =
|
|
61
|
+
set(s) {
|
|
62
|
+
a = s, t.isConnected ? t.setAttribute(r, s) : C.set(t, e);
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
}
|
|
@@ -70,8 +70,8 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
70
70
|
}
|
|
71
71
|
const Y = (t, e = !1) => {
|
|
72
72
|
const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
|
|
73
|
-
acceptNode(
|
|
74
|
-
return l.has(
|
|
73
|
+
acceptNode(s) {
|
|
74
|
+
return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
77
|
let a = i.nextNode();
|
|
@@ -89,33 +89,33 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
89
89
|
}) : {};
|
|
90
90
|
function P(t) {
|
|
91
91
|
t.forEach((e) => {
|
|
92
|
-
const { addedNodes: i, removedNodes: a } = e, r = Array.from(i),
|
|
93
|
-
r.forEach((
|
|
92
|
+
const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), s = Array.from(a);
|
|
93
|
+
r.forEach((n) => {
|
|
94
94
|
var h;
|
|
95
|
-
if (l.has(
|
|
96
|
-
const c =
|
|
97
|
-
Object.keys(F).filter((
|
|
98
|
-
|
|
99
|
-
}),
|
|
95
|
+
if (l.has(n) && n.constructor.formAssociated && G(n), C.has(n)) {
|
|
96
|
+
const c = C.get(n);
|
|
97
|
+
Object.keys(F).filter((m) => c[m] !== null).forEach((m) => {
|
|
98
|
+
n.setAttribute(F[m], c[m]);
|
|
99
|
+
}), C.delete(n);
|
|
100
100
|
}
|
|
101
|
-
if (
|
|
102
|
-
const c =
|
|
103
|
-
|
|
101
|
+
if (A.has(n)) {
|
|
102
|
+
const c = A.get(n);
|
|
103
|
+
n.setAttribute("internals-valid", c.validity.valid.toString()), n.setAttribute("internals-invalid", (!c.validity.valid).toString()), n.setAttribute("aria-invalid", (!c.validity.valid).toString()), A.delete(n);
|
|
104
104
|
}
|
|
105
|
-
if (
|
|
106
|
-
const c =
|
|
105
|
+
if (n.localName === "form") {
|
|
106
|
+
const c = g.get(n), v = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
|
|
107
107
|
acceptNode(W) {
|
|
108
108
|
return l.has(W) && W.constructor.formAssociated && !(c && c.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
|
-
let
|
|
112
|
-
for (;
|
|
113
|
-
G(
|
|
111
|
+
let m = v.nextNode();
|
|
112
|
+
for (; m; )
|
|
113
|
+
G(m), m = v.nextNode();
|
|
114
114
|
}
|
|
115
|
-
|
|
116
|
-
}),
|
|
117
|
-
const h = l.get(
|
|
118
|
-
h && u.get(h) && Q(h), O.has(
|
|
115
|
+
n.localName === "fieldset" && ((h = I.observe) === null || h === void 0 || h.call(I, n, J), Y(n, !0));
|
|
116
|
+
}), s.forEach((n) => {
|
|
117
|
+
const h = l.get(n);
|
|
118
|
+
h && u.get(h) && Q(h), O.has(n) && O.get(n).disconnect();
|
|
119
119
|
});
|
|
120
120
|
});
|
|
121
121
|
}
|
|
@@ -146,7 +146,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
146
146
|
}, X = (t, e) => {
|
|
147
147
|
const i = document.createElement("input");
|
|
148
148
|
return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), u.get(e).push(i), i;
|
|
149
|
-
},
|
|
149
|
+
}, me = (t, e) => {
|
|
150
150
|
var i;
|
|
151
151
|
u.set(e, []), (i = I.observe) === null || i === void 0 || i.call(I, t, J);
|
|
152
152
|
}, Z = (t, e) => {
|
|
@@ -156,35 +156,35 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
156
156
|
e[0].id || (i = `${e[0].htmlFor}_Label`, e[0].id = i), t.setAttribute("aria-labelledby", i);
|
|
157
157
|
}
|
|
158
158
|
}, V = (t) => {
|
|
159
|
-
const e = Array.from(t.elements).filter((
|
|
159
|
+
const e = Array.from(t.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(t) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), r = [...e, ...a].includes(!1);
|
|
160
160
|
t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
|
|
161
|
-
},
|
|
162
|
-
V(S(t.target));
|
|
163
|
-
}, we = (t) => {
|
|
161
|
+
}, fe = (t) => {
|
|
164
162
|
V(S(t.target));
|
|
165
163
|
}, be = (t) => {
|
|
164
|
+
V(S(t.target));
|
|
165
|
+
}, ve = (t) => {
|
|
166
166
|
const e = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${t.id ? `,${i}[form='${t.id}']` : ""}`).join(",");
|
|
167
167
|
t.addEventListener("click", (i) => {
|
|
168
168
|
if (i.target.closest(e)) {
|
|
169
|
-
const r =
|
|
169
|
+
const r = g.get(t);
|
|
170
170
|
if (t.noValidate)
|
|
171
171
|
return;
|
|
172
172
|
r.size && Array.from(r).reverse().map((h) => l.get(h).reportValidity()).includes(!1) && i.preventDefault();
|
|
173
173
|
}
|
|
174
174
|
});
|
|
175
|
-
},
|
|
176
|
-
const e =
|
|
175
|
+
}, we = (t) => {
|
|
176
|
+
const e = g.get(t.target);
|
|
177
177
|
e && e.size && e.forEach((i) => {
|
|
178
178
|
i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
|
|
179
179
|
});
|
|
180
180
|
}, ee = (t, e, i) => {
|
|
181
181
|
if (e) {
|
|
182
|
-
const a =
|
|
182
|
+
const a = g.get(e);
|
|
183
183
|
if (a)
|
|
184
184
|
a.add(t);
|
|
185
185
|
else {
|
|
186
186
|
const r = /* @__PURE__ */ new Set();
|
|
187
|
-
r.add(t),
|
|
187
|
+
r.add(t), g.set(e, r), ve(e), e.addEventListener("reset", we), e.addEventListener("input", fe), e.addEventListener("change", be);
|
|
188
188
|
}
|
|
189
189
|
M.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
|
|
190
190
|
t.formAssociatedCallback.apply(t, [e]);
|
|
@@ -193,11 +193,11 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
193
193
|
}, S = (t) => {
|
|
194
194
|
let e = t.parentNode;
|
|
195
195
|
return e && e.tagName !== "FORM" && (e = S(e)), e;
|
|
196
|
-
},
|
|
196
|
+
}, b = (t, e, i = DOMException) => {
|
|
197
197
|
if (!t.constructor.formAssociated)
|
|
198
198
|
throw new i(e);
|
|
199
199
|
}, te = (t, e, i) => {
|
|
200
|
-
const a =
|
|
200
|
+
const a = g.get(t);
|
|
201
201
|
return a && a.size && a.forEach((r) => {
|
|
202
202
|
l.get(r)[i]() || (e = !1);
|
|
203
203
|
}), e;
|
|
@@ -210,7 +210,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
210
210
|
function T() {
|
|
211
211
|
return typeof MutationObserver < "u";
|
|
212
212
|
}
|
|
213
|
-
class
|
|
213
|
+
class ge {
|
|
214
214
|
constructor() {
|
|
215
215
|
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);
|
|
216
216
|
}
|
|
@@ -262,10 +262,10 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
262
262
|
if (typeof e == "function" ? t !== e || !0 : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
263
263
|
return e.set(t, i), i;
|
|
264
264
|
}
|
|
265
|
-
var
|
|
266
|
-
class
|
|
265
|
+
var x;
|
|
266
|
+
class xe {
|
|
267
267
|
constructor(e) {
|
|
268
|
-
|
|
268
|
+
x.set(this, void 0), Me(this, x, e);
|
|
269
269
|
for (let i = 0; i < e.length; i++) {
|
|
270
270
|
let a = e[i];
|
|
271
271
|
this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
|
|
@@ -273,10 +273,10 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
273
273
|
Object.freeze(this);
|
|
274
274
|
}
|
|
275
275
|
get length() {
|
|
276
|
-
return re(this,
|
|
276
|
+
return re(this, x, "f").length;
|
|
277
277
|
}
|
|
278
|
-
[(
|
|
279
|
-
return re(this,
|
|
278
|
+
[(x = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
279
|
+
return re(this, x, "f")[Symbol.iterator]();
|
|
280
280
|
}
|
|
281
281
|
item(e) {
|
|
282
282
|
return this[e] == null ? null : this[e];
|
|
@@ -285,43 +285,43 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
285
285
|
return this[e] == null ? null : this[e];
|
|
286
286
|
}
|
|
287
287
|
}
|
|
288
|
-
function
|
|
288
|
+
function Ce() {
|
|
289
289
|
const t = HTMLFormElement.prototype.checkValidity;
|
|
290
290
|
HTMLFormElement.prototype.checkValidity = i;
|
|
291
291
|
const e = HTMLFormElement.prototype.reportValidity;
|
|
292
292
|
HTMLFormElement.prototype.reportValidity = a;
|
|
293
|
-
function i(...
|
|
294
|
-
let
|
|
295
|
-
return te(this,
|
|
293
|
+
function i(...s) {
|
|
294
|
+
let n = t.apply(this, s);
|
|
295
|
+
return te(this, n, "checkValidity");
|
|
296
296
|
}
|
|
297
|
-
function a(...
|
|
298
|
-
let
|
|
299
|
-
return te(this,
|
|
297
|
+
function a(...s) {
|
|
298
|
+
let n = e.apply(this, s);
|
|
299
|
+
return te(this, n, "reportValidity");
|
|
300
300
|
}
|
|
301
301
|
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
302
302
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
303
|
-
get(...
|
|
304
|
-
const
|
|
303
|
+
get(...s) {
|
|
304
|
+
const n = r.call(this, ...s), h = Array.from(g.get(this) || []);
|
|
305
305
|
if (h.length === 0)
|
|
306
|
-
return
|
|
307
|
-
const c = Array.from(
|
|
308
|
-
return new
|
|
306
|
+
return n;
|
|
307
|
+
const c = Array.from(n).concat(h).sort((v, m) => v.compareDocumentPosition ? v.compareDocumentPosition(m) & 2 ? 1 : -1 : 0);
|
|
308
|
+
return new xe(c);
|
|
309
309
|
}
|
|
310
310
|
});
|
|
311
311
|
}
|
|
312
|
-
class
|
|
312
|
+
class se {
|
|
313
313
|
static get isPolyfilled() {
|
|
314
314
|
return !0;
|
|
315
315
|
}
|
|
316
316
|
constructor(e) {
|
|
317
317
|
if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
|
|
318
318
|
throw new TypeError("Illegal constructor");
|
|
319
|
-
const i = e.getRootNode(), a = new
|
|
320
|
-
this.states = new D(e), o.set(this, e), d.set(this, a), l.set(e, this), he(e, this),
|
|
319
|
+
const i = e.getRootNode(), a = new ge();
|
|
320
|
+
this.states = new D(e), o.set(this, e), d.set(this, a), l.set(e, this), he(e, this), me(e, this), Object.seal(this), i instanceof DocumentFragment && pe(i);
|
|
321
321
|
}
|
|
322
322
|
checkValidity() {
|
|
323
323
|
const e = o.get(this);
|
|
324
|
-
if (
|
|
324
|
+
if (b(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
325
325
|
return !0;
|
|
326
326
|
const i = d.get(this);
|
|
327
327
|
if (!i.valid) {
|
|
@@ -336,19 +336,19 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
336
336
|
}
|
|
337
337
|
get form() {
|
|
338
338
|
const e = o.get(this);
|
|
339
|
-
|
|
339
|
+
b(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
340
340
|
let i;
|
|
341
341
|
return e.constructor.formAssociated === !0 && (i = S(e)), i;
|
|
342
342
|
}
|
|
343
343
|
get labels() {
|
|
344
344
|
const e = o.get(this);
|
|
345
|
-
|
|
345
|
+
b(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
346
346
|
const i = e.getAttribute("id"), a = e.getRootNode();
|
|
347
347
|
return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
|
|
348
348
|
}
|
|
349
349
|
reportValidity() {
|
|
350
350
|
const e = o.get(this);
|
|
351
|
-
if (
|
|
351
|
+
if (b(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
352
352
|
return !0;
|
|
353
353
|
const i = this.checkValidity(), a = U.get(this);
|
|
354
354
|
if (a && !e.constructor.formAssociated)
|
|
@@ -357,34 +357,34 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
357
357
|
}
|
|
358
358
|
setFormValue(e) {
|
|
359
359
|
const i = o.get(this);
|
|
360
|
-
if (
|
|
360
|
+
if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Q(this), e != null && !(e instanceof FormData)) {
|
|
361
361
|
if (i.getAttribute("name")) {
|
|
362
362
|
const a = X(i, this);
|
|
363
363
|
a.value = e;
|
|
364
364
|
}
|
|
365
365
|
} else e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
|
|
366
366
|
if (typeof r == "string") {
|
|
367
|
-
const
|
|
368
|
-
|
|
367
|
+
const s = X(i, this);
|
|
368
|
+
s.name = a, s.value = r;
|
|
369
369
|
}
|
|
370
370
|
});
|
|
371
371
|
q.set(i, e);
|
|
372
372
|
}
|
|
373
373
|
setValidity(e, i, a) {
|
|
374
374
|
const r = o.get(this);
|
|
375
|
-
if (
|
|
375
|
+
if (b(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
|
|
376
376
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
377
377
|
U.set(this, a);
|
|
378
|
-
const
|
|
379
|
-
for (const
|
|
380
|
-
|
|
381
|
-
Object.keys(
|
|
382
|
-
const h = Object.assign(Object.assign({},
|
|
378
|
+
const s = d.get(this), n = {};
|
|
379
|
+
for (const v in e)
|
|
380
|
+
n[v] = e[v];
|
|
381
|
+
Object.keys(n).length === 0 && ye(s);
|
|
382
|
+
const h = Object.assign(Object.assign({}, s), n);
|
|
383
383
|
delete h.valid;
|
|
384
|
-
const { valid: c } = Ee(
|
|
384
|
+
const { valid: c } = Ee(s, h, this.form);
|
|
385
385
|
if (!c && !i)
|
|
386
386
|
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.");
|
|
387
|
-
|
|
387
|
+
w.set(this, c ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !c), r.toggleAttribute("internals-valid", c), r.setAttribute("aria-invalid", `${!c}`)) : A.set(r, this);
|
|
388
388
|
}
|
|
389
389
|
get shadowRoot() {
|
|
390
390
|
const e = o.get(this), i = B.get(e);
|
|
@@ -392,18 +392,18 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
392
392
|
}
|
|
393
393
|
get validationMessage() {
|
|
394
394
|
const e = o.get(this);
|
|
395
|
-
return
|
|
395
|
+
return b(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), w.get(this);
|
|
396
396
|
}
|
|
397
397
|
get validity() {
|
|
398
398
|
const e = o.get(this);
|
|
399
|
-
return
|
|
399
|
+
return b(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
|
|
400
400
|
}
|
|
401
401
|
get willValidate() {
|
|
402
402
|
const e = o.get(this);
|
|
403
|
-
return
|
|
403
|
+
return b(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
|
|
404
404
|
}
|
|
405
405
|
}
|
|
406
|
-
function
|
|
406
|
+
function Ae() {
|
|
407
407
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
408
408
|
return !1;
|
|
409
409
|
class t extends HTMLElement {
|
|
@@ -427,22 +427,22 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
427
427
|
"reportValidity"
|
|
428
428
|
].every((a) => a in i.internals);
|
|
429
429
|
}
|
|
430
|
-
let oe = !1,
|
|
430
|
+
let oe = !1, ne = !1;
|
|
431
431
|
function H(t) {
|
|
432
|
-
|
|
432
|
+
ne || (ne = !0, window.CustomStateSet = D, t && (HTMLElement.prototype.attachInternals = function(...e) {
|
|
433
433
|
const i = t.call(this, e);
|
|
434
434
|
return i.states = new D(this), i;
|
|
435
435
|
}));
|
|
436
436
|
}
|
|
437
437
|
function le(t = !0) {
|
|
438
438
|
if (!oe) {
|
|
439
|
-
if (oe = !0, typeof window < "u" && (window.ElementInternals =
|
|
439
|
+
if (oe = !0, typeof window < "u" && (window.ElementInternals = se), typeof CustomElementRegistry < "u") {
|
|
440
440
|
const e = CustomElementRegistry.prototype.define;
|
|
441
441
|
CustomElementRegistry.prototype.define = function(i, a, r) {
|
|
442
442
|
if (a.formAssociated) {
|
|
443
|
-
const
|
|
443
|
+
const s = a.prototype.connectedCallback;
|
|
444
444
|
a.prototype.connectedCallback = function() {
|
|
445
|
-
K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)),
|
|
445
|
+
K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), ie(this);
|
|
446
446
|
};
|
|
447
447
|
}
|
|
448
448
|
e.call(this, i, a, r);
|
|
@@ -455,35 +455,35 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
|
455
455
|
} else return {};
|
|
456
456
|
if (l.has(this))
|
|
457
457
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
458
|
-
return new
|
|
458
|
+
return new se(this);
|
|
459
459
|
}), typeof Element < "u") {
|
|
460
460
|
let e = function(...a) {
|
|
461
461
|
const r = i.apply(this, a);
|
|
462
462
|
if (B.set(this, r), T()) {
|
|
463
|
-
const
|
|
464
|
-
window.ShadyDOM ?
|
|
463
|
+
const s = new MutationObserver(P);
|
|
464
|
+
window.ShadyDOM ? s.observe(this, _) : s.observe(r, _), O.set(this, s);
|
|
465
465
|
}
|
|
466
466
|
return r;
|
|
467
467
|
};
|
|
468
468
|
const i = Element.prototype.attachShadow;
|
|
469
469
|
Element.prototype.attachShadow = e;
|
|
470
470
|
}
|
|
471
|
-
T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" &&
|
|
471
|
+
T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
|
|
472
472
|
}
|
|
473
473
|
}
|
|
474
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
474
|
+
return !!customElements.polyfillWrapFlushCallback || (Ae() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : le(!1)), E.forceCustomStateSetPolyfill = H, E.forceElementInternalsPolyfill = le, Object.defineProperty(E, "__esModule", { value: !0 }), E;
|
|
475
475
|
})({});
|
|
476
476
|
})();
|
|
477
|
-
const _e = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{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{--
|
|
477
|
+
const _e = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{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{--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 (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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: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[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.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)){.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-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-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.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(--dt-color-interactive-brand)}@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-label{color:var(--dt-color-content-default)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}", $e = ["leading", "trailing"], je = "change", k = {
|
|
478
478
|
checked: !1,
|
|
479
479
|
disabled: !1,
|
|
480
480
|
labelPlacement: "leading",
|
|
481
481
|
required: !1,
|
|
482
482
|
value: "on"
|
|
483
483
|
};
|
|
484
|
-
var Re = Object.defineProperty,
|
|
485
|
-
for (var l = void 0,
|
|
486
|
-
(M = E[
|
|
484
|
+
var Re = Object.defineProperty, f = (E, o, d, u) => {
|
|
485
|
+
for (var l = void 0, w = E.length - 1, M; w >= 0; w--)
|
|
486
|
+
(M = E[w]) && (l = M(o, d, l) || l);
|
|
487
487
|
return l && Re(o, d, l), l;
|
|
488
488
|
};
|
|
489
489
|
const de = "pie-switch", z = class z extends Te(Le(Fe)) {
|
|
@@ -583,7 +583,7 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
|
|
|
583
583
|
checked: d,
|
|
584
584
|
disabled: u,
|
|
585
585
|
isRTL: l,
|
|
586
|
-
required:
|
|
586
|
+
required: w
|
|
587
587
|
} = this;
|
|
588
588
|
return N`
|
|
589
589
|
<label
|
|
@@ -602,7 +602,7 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
|
|
|
602
602
|
role="switch"
|
|
603
603
|
type="checkbox"
|
|
604
604
|
class="c-switch-input"
|
|
605
|
-
.required=${
|
|
605
|
+
.required=${w}
|
|
606
606
|
.checked="${d}"
|
|
607
607
|
.disabled="${u}"
|
|
608
608
|
@change="${this.handleChange}"
|
|
@@ -619,35 +619,35 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
|
|
|
619
619
|
};
|
|
620
620
|
z.styles = Ie(_e);
|
|
621
621
|
let p = z;
|
|
622
|
-
|
|
622
|
+
f([
|
|
623
623
|
y({ type: String })
|
|
624
624
|
], p.prototype, "label");
|
|
625
|
-
|
|
625
|
+
f([
|
|
626
626
|
y({ type: String }),
|
|
627
627
|
Oe(de, $e, k.labelPlacement)
|
|
628
628
|
], p.prototype, "labelPlacement");
|
|
629
|
-
|
|
629
|
+
f([
|
|
630
630
|
y({ type: Object })
|
|
631
631
|
], p.prototype, "aria");
|
|
632
|
-
|
|
632
|
+
f([
|
|
633
633
|
y({ type: Boolean, reflect: !0 })
|
|
634
634
|
], p.prototype, "checked");
|
|
635
|
-
|
|
635
|
+
f([
|
|
636
636
|
y({ type: Boolean, reflect: !0 })
|
|
637
637
|
], p.prototype, "required");
|
|
638
|
-
|
|
638
|
+
f([
|
|
639
639
|
y({ type: String })
|
|
640
640
|
], p.prototype, "value");
|
|
641
|
-
|
|
641
|
+
f([
|
|
642
642
|
y({ type: String })
|
|
643
643
|
], p.prototype, "name");
|
|
644
|
-
|
|
644
|
+
f([
|
|
645
645
|
y({ type: Boolean, reflect: !0 })
|
|
646
646
|
], p.prototype, "disabled");
|
|
647
|
-
|
|
647
|
+
f([
|
|
648
648
|
ce('input[type="checkbox"]')
|
|
649
649
|
], p.prototype, "input");
|
|
650
|
-
|
|
650
|
+
f([
|
|
651
651
|
ce("label")
|
|
652
652
|
], p.prototype, "focusTarget");
|
|
653
653
|
Pe(de, p);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-switch",
|
|
3
3
|
"description": "PIE Design System Switch built using Web Components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
36
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
37
|
-
"@justeattakeaway/pie-css": "0.
|
|
37
|
+
"@justeattakeaway/pie-css": "0.15.0",
|
|
38
38
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
41
|
+
"@justeattakeaway/pie-icons-webc": "1.5.0",
|
|
42
42
|
"@justeattakeaway/pie-webc-core": "0.24.2",
|
|
43
43
|
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
44
44
|
"element-internals-polyfill": "1.3.11"
|
package/src/switch.scss
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.c-switch {
|
|
28
|
-
--
|
|
28
|
+
--int-states-mixin-bg-color: var(--dt-color-interactive-form);
|
|
29
29
|
--switch-bg-color--checked: var(--dt-color-interactive-brand);
|
|
30
30
|
--switch-bg-color--disabled: var(--dt-color-disabled-01);
|
|
31
31
|
--switch-width: 48px;
|
|
@@ -42,43 +42,28 @@
|
|
|
42
42
|
flex-shrink: 0;
|
|
43
43
|
padding: var(--switch-padding);
|
|
44
44
|
border-radius: var(--switch-radius);
|
|
45
|
-
background-color: var(--
|
|
45
|
+
background-color: var(--int-states-mixin-bg-color);
|
|
46
46
|
|
|
47
47
|
@include switch-transition(background-color);
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
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)));
|
|
51
|
-
}
|
|
49
|
+
@include p.interactive-states('--dt-color-interactive-form');
|
|
52
50
|
|
|
53
51
|
&:focus,
|
|
54
52
|
&:focus-within {
|
|
55
53
|
@include p.focus;
|
|
56
54
|
}
|
|
57
55
|
|
|
58
|
-
&:active {
|
|
59
|
-
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)));
|
|
60
|
-
}
|
|
61
|
-
|
|
62
56
|
&[checked] {
|
|
63
|
-
|
|
64
|
-
background-color: var(--switch-bg-color--checked);
|
|
65
|
-
|
|
66
|
-
&:hover {
|
|
67
|
-
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)));
|
|
68
|
-
}
|
|
57
|
+
--int-states-mixin-bg-color: var(--dt-color-interactive-brand);
|
|
69
58
|
|
|
70
|
-
|
|
71
|
-
&:focus-within {
|
|
72
|
-
background-color: var(--switch-bg-color--checked);
|
|
73
|
-
}
|
|
59
|
+
@include switch-transition(background-color);
|
|
74
60
|
|
|
75
|
-
|
|
76
|
-
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)));
|
|
77
|
-
}
|
|
61
|
+
@include p.interactive-states('--dt-color-interactive-brand');
|
|
78
62
|
}
|
|
79
63
|
|
|
80
64
|
[disabled] & {
|
|
81
|
-
|
|
65
|
+
--int-states-mixin-bg-color: var(--switch-bg-color--disabled);
|
|
66
|
+
|
|
82
67
|
pointer-events: none;
|
|
83
68
|
}
|
|
84
69
|
}
|
|
@@ -123,7 +108,7 @@
|
|
|
123
108
|
|
|
124
109
|
.c-pieIcon--check {
|
|
125
110
|
@include switch-transition(color);
|
|
126
|
-
color: var(--
|
|
111
|
+
color: var(--dt-color-interactive-brand);
|
|
127
112
|
}
|
|
128
113
|
}
|
|
129
114
|
|