@justeattakeaway/pie-switch 2.0.7 → 2.1.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/custom-elements.json +0 -4
- package/dist/index.d.ts +1 -2
- package/dist/index.js +106 -108
- package/dist/react.d.ts +1 -2
- package/package.json +4 -4
- package/src/index.ts +5 -4
- package/src/switch.scss +6 -11
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
|
4
4
|
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
6
|
import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
|
|
7
|
-
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
7
|
import { TemplateResult } from 'lit-html';
|
|
9
8
|
|
|
10
9
|
declare type AriaProps = {
|
|
@@ -92,7 +91,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
|
|
|
92
91
|
render(): TemplateResult<1>;
|
|
93
92
|
}
|
|
94
93
|
|
|
95
|
-
declare const PieSwitch_base: GenericConstructor<FormControlInterface> &
|
|
94
|
+
declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
|
|
96
95
|
|
|
97
96
|
export declare interface SwitchProps {
|
|
98
97
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { LitElement as Ft, nothing as L, html as N, unsafeCSS as It } from "lit";
|
|
2
|
-
import { property as
|
|
2
|
+
import { property as y, query as dt, state as St } from "lit/decorators.js";
|
|
3
3
|
import { classMap as Vt } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as Tt } from "lit/directives/if-defined.js";
|
|
5
|
-
import { FormControlMixin as Lt,
|
|
5
|
+
import { FormControlMixin as Lt, wrapNativeEvent as Nt, validPropertyValues as Ot, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
7
7
|
const O = class O extends Ft {
|
|
8
8
|
willUpdate() {
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", O.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
O.v = "2.0
|
|
12
|
+
O.v = "2.1.0";
|
|
13
13
|
let q = O;
|
|
14
14
|
(function() {
|
|
15
15
|
(function(n) {
|
|
16
|
-
const l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(),
|
|
16
|
+
const l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), F = {
|
|
17
17
|
ariaAtomic: "aria-atomic",
|
|
18
18
|
ariaAutoComplete: "aria-autocomplete",
|
|
19
19
|
ariaBusy: "aria-busy",
|
|
@@ -65,8 +65,8 @@ let q = O;
|
|
|
65
65
|
get() {
|
|
66
66
|
return a;
|
|
67
67
|
},
|
|
68
|
-
set(
|
|
69
|
-
a =
|
|
68
|
+
set(o) {
|
|
69
|
+
a = o, e.isConnected ? e.setAttribute(r, o) : A.set(e, t);
|
|
70
70
|
}
|
|
71
71
|
});
|
|
72
72
|
}
|
|
@@ -77,18 +77,18 @@ let q = O;
|
|
|
77
77
|
}
|
|
78
78
|
const J = (e, t = !1) => {
|
|
79
79
|
const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
|
|
80
|
-
acceptNode(
|
|
81
|
-
return c.has(
|
|
80
|
+
acceptNode(o) {
|
|
81
|
+
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
84
|
let a = i.nextNode();
|
|
85
85
|
const r = !t || e.disabled;
|
|
86
86
|
for (; a; )
|
|
87
|
-
a.formDisabledCallback && r &&
|
|
87
|
+
a.formDisabledCallback && r && D(a, e.disabled), a = i.nextNode();
|
|
88
88
|
}, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = T() ? new MutationObserver((e) => {
|
|
89
89
|
for (const t of e) {
|
|
90
90
|
const i = t.target;
|
|
91
|
-
if (t.attributeName === "disabled" && (i.constructor.formAssociated ?
|
|
91
|
+
if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
|
|
92
92
|
const a = c.get(i), r = B.get(i);
|
|
93
93
|
a.setFormValue(r);
|
|
94
94
|
}
|
|
@@ -96,33 +96,33 @@ let q = O;
|
|
|
96
96
|
}) : {};
|
|
97
97
|
function _(e) {
|
|
98
98
|
e.forEach((t) => {
|
|
99
|
-
const { addedNodes: i, removedNodes: a } = t, r = Array.from(i),
|
|
100
|
-
r.forEach((
|
|
99
|
+
const { addedNodes: i, removedNodes: a } = t, r = Array.from(i), o = Array.from(a);
|
|
100
|
+
r.forEach((s) => {
|
|
101
101
|
var u;
|
|
102
|
-
if (c.has(
|
|
103
|
-
const d = A.get(
|
|
102
|
+
if (c.has(s) && s.constructor.formAssociated && Y(s), A.has(s)) {
|
|
103
|
+
const d = A.get(s);
|
|
104
104
|
Object.keys(F).filter((b) => d[b] !== null).forEach((b) => {
|
|
105
|
-
|
|
106
|
-
}), A.delete(
|
|
105
|
+
s.setAttribute(F[b], d[b]);
|
|
106
|
+
}), A.delete(s);
|
|
107
107
|
}
|
|
108
|
-
if (C.has(
|
|
109
|
-
const d = C.get(
|
|
110
|
-
|
|
108
|
+
if (C.has(s)) {
|
|
109
|
+
const d = C.get(s);
|
|
110
|
+
s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), C.delete(s);
|
|
111
111
|
}
|
|
112
|
-
if (
|
|
113
|
-
const d =
|
|
112
|
+
if (s.localName === "form") {
|
|
113
|
+
const d = g.get(s), w = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
|
|
114
114
|
acceptNode(z) {
|
|
115
115
|
return c.has(z) && z.constructor.formAssociated && !(d && d.has(z)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
116
116
|
}
|
|
117
117
|
});
|
|
118
|
-
let b =
|
|
118
|
+
let b = w.nextNode();
|
|
119
119
|
for (; b; )
|
|
120
|
-
Y(b), b =
|
|
120
|
+
Y(b), b = w.nextNode();
|
|
121
121
|
}
|
|
122
|
-
|
|
123
|
-
}),
|
|
124
|
-
const u = c.get(
|
|
125
|
-
u && m.get(u) && X(u), P.has(
|
|
122
|
+
s.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, s, Q), J(s, !0));
|
|
123
|
+
}), o.forEach((s) => {
|
|
124
|
+
const u = c.get(s);
|
|
125
|
+
u && m.get(u) && X(u), P.has(s) && P.get(s).disconnect();
|
|
126
126
|
});
|
|
127
127
|
});
|
|
128
128
|
}
|
|
@@ -144,7 +144,7 @@ let q = O;
|
|
|
144
144
|
const $ = {
|
|
145
145
|
childList: !0,
|
|
146
146
|
subtree: !0
|
|
147
|
-
},
|
|
147
|
+
}, D = (e, t) => {
|
|
148
148
|
e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
|
|
149
149
|
}, X = (e) => {
|
|
150
150
|
m.get(e).forEach((i) => {
|
|
@@ -163,48 +163,48 @@ let q = O;
|
|
|
163
163
|
t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
|
|
164
164
|
}
|
|
165
165
|
}, S = (e) => {
|
|
166
|
-
const t = Array.from(e.elements).filter((
|
|
166
|
+
const t = Array.from(e.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = g.get(e) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...t, ...a].includes(!1);
|
|
167
167
|
e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
|
|
168
168
|
}, ft = (e) => {
|
|
169
169
|
S(V(e.target));
|
|
170
170
|
}, bt = (e) => {
|
|
171
171
|
S(V(e.target));
|
|
172
|
-
},
|
|
172
|
+
}, vt = (e) => {
|
|
173
173
|
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(",");
|
|
174
174
|
e.addEventListener("click", (i) => {
|
|
175
175
|
if (i.target.closest(t)) {
|
|
176
|
-
const r =
|
|
176
|
+
const r = g.get(e);
|
|
177
177
|
if (e.noValidate)
|
|
178
178
|
return;
|
|
179
179
|
r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
|
|
180
180
|
}
|
|
181
181
|
});
|
|
182
|
-
},
|
|
183
|
-
const t =
|
|
182
|
+
}, wt = (e) => {
|
|
183
|
+
const t = g.get(e.target);
|
|
184
184
|
t && t.size && t.forEach((i) => {
|
|
185
185
|
i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
|
|
186
186
|
});
|
|
187
187
|
}, et = (e, t, i) => {
|
|
188
188
|
if (t) {
|
|
189
|
-
const a =
|
|
189
|
+
const a = g.get(t);
|
|
190
190
|
if (a)
|
|
191
191
|
a.add(e);
|
|
192
192
|
else {
|
|
193
193
|
const r = /* @__PURE__ */ new Set();
|
|
194
|
-
r.add(e),
|
|
194
|
+
r.add(e), g.set(t, r), vt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", bt);
|
|
195
195
|
}
|
|
196
|
-
|
|
196
|
+
M.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
|
|
197
197
|
e.formAssociatedCallback.apply(e, [t]);
|
|
198
198
|
}, 0), S(t);
|
|
199
199
|
}
|
|
200
200
|
}, V = (e) => {
|
|
201
201
|
let t = e.parentNode;
|
|
202
202
|
return t && t.tagName !== "FORM" && (t = V(t)), t;
|
|
203
|
-
},
|
|
203
|
+
}, v = (e, t, i = DOMException) => {
|
|
204
204
|
if (!e.constructor.formAssociated)
|
|
205
205
|
throw new i(t);
|
|
206
206
|
}, it = (e, t, i) => {
|
|
207
|
-
const a =
|
|
207
|
+
const a = g.get(e);
|
|
208
208
|
return a && a.size && a.forEach((r) => {
|
|
209
209
|
c.get(r)[i]() || (t = !1);
|
|
210
210
|
}), t;
|
|
@@ -227,7 +227,7 @@ let q = O;
|
|
|
227
227
|
for (let i in e)
|
|
228
228
|
i !== "valid" && e[i] !== !1 && (t = !1);
|
|
229
229
|
return t;
|
|
230
|
-
},
|
|
230
|
+
}, R = /* @__PURE__ */ new WeakMap();
|
|
231
231
|
function rt(e, t) {
|
|
232
232
|
e.toggleAttribute(t, !0), e.part && e.part.add(t);
|
|
233
233
|
}
|
|
@@ -238,12 +238,12 @@ let q = O;
|
|
|
238
238
|
constructor(t) {
|
|
239
239
|
if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
240
240
|
throw new TypeError("Illegal constructor");
|
|
241
|
-
|
|
241
|
+
R.set(this, t);
|
|
242
242
|
}
|
|
243
243
|
add(t) {
|
|
244
244
|
if (!/^--/.test(t) || typeof t != "string")
|
|
245
245
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
246
|
-
const i = super.add(t), a =
|
|
246
|
+
const i = super.add(t), a = R.get(this), r = `state${t}`;
|
|
247
247
|
return a.isConnected ? rt(a, r) : setTimeout(() => {
|
|
248
248
|
rt(a, r);
|
|
249
249
|
}), i;
|
|
@@ -254,13 +254,13 @@ let q = O;
|
|
|
254
254
|
super.clear();
|
|
255
255
|
}
|
|
256
256
|
delete(t) {
|
|
257
|
-
const i = super.delete(t), a =
|
|
257
|
+
const i = super.delete(t), a = R.get(this);
|
|
258
258
|
return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
|
|
259
259
|
a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
|
|
260
260
|
}), i;
|
|
261
261
|
}
|
|
262
262
|
}
|
|
263
|
-
function
|
|
263
|
+
function ot(e, t, i, a) {
|
|
264
264
|
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");
|
|
265
265
|
return i === "m" ? a : i === "a" ? a.call(e) : a ? a.value : t.get(e);
|
|
266
266
|
}
|
|
@@ -279,10 +279,10 @@ let q = O;
|
|
|
279
279
|
Object.freeze(this);
|
|
280
280
|
}
|
|
281
281
|
get length() {
|
|
282
|
-
return
|
|
282
|
+
return ot(this, x, "f").length;
|
|
283
283
|
}
|
|
284
284
|
[(x = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
285
|
-
return
|
|
285
|
+
return ot(this, x, "f")[Symbol.iterator]();
|
|
286
286
|
}
|
|
287
287
|
item(t) {
|
|
288
288
|
return this[t] == null ? null : this[t];
|
|
@@ -296,26 +296,26 @@ let q = O;
|
|
|
296
296
|
HTMLFormElement.prototype.checkValidity = i;
|
|
297
297
|
const t = HTMLFormElement.prototype.reportValidity;
|
|
298
298
|
HTMLFormElement.prototype.reportValidity = a;
|
|
299
|
-
function i(...
|
|
300
|
-
let
|
|
301
|
-
return it(this,
|
|
299
|
+
function i(...o) {
|
|
300
|
+
let s = e.apply(this, o);
|
|
301
|
+
return it(this, s, "checkValidity");
|
|
302
302
|
}
|
|
303
|
-
function a(...
|
|
304
|
-
let
|
|
305
|
-
return it(this,
|
|
303
|
+
function a(...o) {
|
|
304
|
+
let s = t.apply(this, o);
|
|
305
|
+
return it(this, s, "reportValidity");
|
|
306
306
|
}
|
|
307
307
|
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
308
308
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
309
|
-
get(...
|
|
310
|
-
const
|
|
309
|
+
get(...o) {
|
|
310
|
+
const s = r.call(this, ...o), u = Array.from(g.get(this) || []);
|
|
311
311
|
if (u.length === 0)
|
|
312
|
-
return
|
|
313
|
-
const d = Array.from(
|
|
312
|
+
return s;
|
|
313
|
+
const d = Array.from(s).concat(u).sort((w, b) => w.compareDocumentPosition ? w.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
|
|
314
314
|
return new xt(d);
|
|
315
315
|
}
|
|
316
316
|
});
|
|
317
317
|
}
|
|
318
|
-
class
|
|
318
|
+
class st {
|
|
319
319
|
static get isPolyfilled() {
|
|
320
320
|
return !0;
|
|
321
321
|
}
|
|
@@ -327,7 +327,7 @@ let q = O;
|
|
|
327
327
|
}
|
|
328
328
|
checkValidity() {
|
|
329
329
|
const t = l.get(this);
|
|
330
|
-
if (
|
|
330
|
+
if (v(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
331
331
|
return !0;
|
|
332
332
|
const i = h.get(this);
|
|
333
333
|
if (!i.valid) {
|
|
@@ -342,19 +342,19 @@ let q = O;
|
|
|
342
342
|
}
|
|
343
343
|
get form() {
|
|
344
344
|
const t = l.get(this);
|
|
345
|
-
|
|
345
|
+
v(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
346
346
|
let i;
|
|
347
347
|
return t.constructor.formAssociated === !0 && (i = V(t)), i;
|
|
348
348
|
}
|
|
349
349
|
get labels() {
|
|
350
350
|
const t = l.get(this);
|
|
351
|
-
|
|
351
|
+
v(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
352
352
|
const i = t.getAttribute("id"), a = t.getRootNode();
|
|
353
353
|
return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
|
|
354
354
|
}
|
|
355
355
|
reportValidity() {
|
|
356
356
|
const t = l.get(this);
|
|
357
|
-
if (
|
|
357
|
+
if (v(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
358
358
|
return !0;
|
|
359
359
|
const i = this.checkValidity(), a = j.get(this);
|
|
360
360
|
if (a && !t.constructor.formAssociated)
|
|
@@ -363,34 +363,34 @@ let q = O;
|
|
|
363
363
|
}
|
|
364
364
|
setFormValue(t) {
|
|
365
365
|
const i = l.get(this);
|
|
366
|
-
if (
|
|
366
|
+
if (v(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), X(this), t != null && !(t instanceof FormData)) {
|
|
367
367
|
if (i.getAttribute("name")) {
|
|
368
368
|
const a = Z(i, this);
|
|
369
369
|
a.value = t;
|
|
370
370
|
}
|
|
371
371
|
} else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([a, r]) => {
|
|
372
372
|
if (typeof r == "string") {
|
|
373
|
-
const
|
|
374
|
-
|
|
373
|
+
const o = Z(i, this);
|
|
374
|
+
o.name = a, o.value = r;
|
|
375
375
|
}
|
|
376
376
|
});
|
|
377
377
|
B.set(i, t);
|
|
378
378
|
}
|
|
379
379
|
setValidity(t, i, a) {
|
|
380
380
|
const r = l.get(this);
|
|
381
|
-
if (
|
|
381
|
+
if (v(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
|
|
382
382
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
383
383
|
j.set(this, a);
|
|
384
|
-
const
|
|
385
|
-
for (const
|
|
386
|
-
|
|
387
|
-
Object.keys(
|
|
388
|
-
const u = Object.assign(Object.assign({},
|
|
384
|
+
const o = h.get(this), s = {};
|
|
385
|
+
for (const w in t)
|
|
386
|
+
s[w] = t[w];
|
|
387
|
+
Object.keys(s).length === 0 && yt(o);
|
|
388
|
+
const u = Object.assign(Object.assign({}, o), s);
|
|
389
389
|
delete u.valid;
|
|
390
|
-
const { valid: d } = Et(
|
|
390
|
+
const { valid: d } = Et(o, u, this.form);
|
|
391
391
|
if (!d && !i)
|
|
392
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
|
-
|
|
393
|
+
E.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : C.set(r, this);
|
|
394
394
|
}
|
|
395
395
|
get shadowRoot() {
|
|
396
396
|
const t = l.get(this), i = U.get(t);
|
|
@@ -398,15 +398,15 @@ let q = O;
|
|
|
398
398
|
}
|
|
399
399
|
get validationMessage() {
|
|
400
400
|
const t = l.get(this);
|
|
401
|
-
return
|
|
401
|
+
return v(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), E.get(this);
|
|
402
402
|
}
|
|
403
403
|
get validity() {
|
|
404
404
|
const t = l.get(this);
|
|
405
|
-
return
|
|
405
|
+
return v(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
|
|
406
406
|
}
|
|
407
407
|
get willValidate() {
|
|
408
408
|
const t = l.get(this);
|
|
409
|
-
return
|
|
409
|
+
return v(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
410
|
}
|
|
411
411
|
}
|
|
412
412
|
function Ct() {
|
|
@@ -442,13 +442,13 @@ let q = O;
|
|
|
442
442
|
}
|
|
443
443
|
function ct(e = !0) {
|
|
444
444
|
if (!nt) {
|
|
445
|
-
if (nt = !0, typeof window < "u" && (window.ElementInternals =
|
|
445
|
+
if (nt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
|
|
446
446
|
const t = CustomElementRegistry.prototype.define;
|
|
447
447
|
CustomElementRegistry.prototype.define = function(i, a, r) {
|
|
448
448
|
if (a.formAssociated) {
|
|
449
|
-
const
|
|
449
|
+
const o = a.prototype.connectedCallback;
|
|
450
450
|
a.prototype.connectedCallback = function() {
|
|
451
|
-
G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") &&
|
|
451
|
+
G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), at(this);
|
|
452
452
|
};
|
|
453
453
|
}
|
|
454
454
|
t.call(this, i, a, r);
|
|
@@ -461,13 +461,13 @@ let q = O;
|
|
|
461
461
|
} else return {};
|
|
462
462
|
if (c.has(this))
|
|
463
463
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
464
|
-
return new
|
|
464
|
+
return new st(this);
|
|
465
465
|
}), typeof Element < "u") {
|
|
466
466
|
let t = function(...a) {
|
|
467
467
|
const r = i.apply(this, a);
|
|
468
468
|
if (U.set(this, r), T()) {
|
|
469
|
-
const
|
|
470
|
-
window.ShadyDOM ?
|
|
469
|
+
const o = new MutationObserver(_);
|
|
470
|
+
window.ShadyDOM ? o.observe(this, $) : o.observe(r, $), P.set(this, o);
|
|
471
471
|
}
|
|
472
472
|
return r;
|
|
473
473
|
};
|
|
@@ -480,22 +480,22 @@ let q = O;
|
|
|
480
480
|
return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : ct(!1)), n.forceCustomStateSetPolyfill = W, n.forceElementInternalsPolyfill = ct, Object.defineProperty(n, "__esModule", { value: !0 }), n;
|
|
481
481
|
})({});
|
|
482
482
|
})();
|
|
483
|
-
const
|
|
483
|
+
const _t = "*,*: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)}.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[checked]{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.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: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;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)}.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)}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}@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)))}", $t = ["leading", "trailing"], Gt = "change", k = {
|
|
484
484
|
checked: !1,
|
|
485
485
|
disabled: !1,
|
|
486
486
|
labelPlacement: "leading",
|
|
487
487
|
required: !1,
|
|
488
488
|
value: "on"
|
|
489
489
|
};
|
|
490
|
-
var Dt = Object.defineProperty,
|
|
491
|
-
for (var c = m > 1 ? void 0 : m ?
|
|
492
|
-
(
|
|
490
|
+
var Dt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, f = (n, l, h, m) => {
|
|
491
|
+
for (var c = m > 1 ? void 0 : m ? Rt(l, h) : l, E = n.length - 1, M; E >= 0; E--)
|
|
492
|
+
(M = n[E]) && (c = (m ? M(l, h, c) : M(c)) || c);
|
|
493
493
|
return m && c && Dt(l, h, c), c;
|
|
494
494
|
};
|
|
495
|
-
const
|
|
496
|
-
let p = class extends Lt(
|
|
495
|
+
const Ht = "pie-switch";
|
|
496
|
+
let p = class extends Lt(q) {
|
|
497
497
|
constructor() {
|
|
498
|
-
super(...arguments), this.labelPlacement =
|
|
498
|
+
super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled, this._isAnimationAllowed = !1;
|
|
499
499
|
}
|
|
500
500
|
firstUpdated() {
|
|
501
501
|
this.handleFormAssociation(), this.input.addEventListener("invalid", (n) => {
|
|
@@ -518,7 +518,7 @@ let p = class extends Lt(Nt(q)) {
|
|
|
518
518
|
handleChange(n) {
|
|
519
519
|
const { checked: l } = n == null ? void 0 : n.currentTarget;
|
|
520
520
|
this.checked = l;
|
|
521
|
-
const h =
|
|
521
|
+
const h = Nt(n);
|
|
522
522
|
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(h), this.handleFormAssociation();
|
|
523
523
|
}
|
|
524
524
|
/**
|
|
@@ -589,16 +589,14 @@ let p = class extends Lt(Nt(q)) {
|
|
|
589
589
|
aria: n,
|
|
590
590
|
checked: l,
|
|
591
591
|
disabled: h,
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
_isAnimationAllowed: g
|
|
592
|
+
required: m,
|
|
593
|
+
_isAnimationAllowed: c
|
|
595
594
|
} = this;
|
|
596
595
|
return N`
|
|
597
596
|
<label
|
|
598
597
|
class="${Vt({
|
|
599
598
|
"c-switch-wrapper": !0,
|
|
600
|
-
"c-switch-wrapper--
|
|
601
|
-
"c-switch-wrapper--allow-animation": g
|
|
599
|
+
"c-switch-wrapper--allow-animation": c
|
|
602
600
|
})}"
|
|
603
601
|
?disabled=${h}>
|
|
604
602
|
${this.renderSwitchLabel("leading")}
|
|
@@ -611,7 +609,7 @@ let p = class extends Lt(Nt(q)) {
|
|
|
611
609
|
role="switch"
|
|
612
610
|
type="checkbox"
|
|
613
611
|
class="c-switch-input"
|
|
614
|
-
.required=${
|
|
612
|
+
.required=${m}
|
|
615
613
|
.checked="${l}"
|
|
616
614
|
.disabled="${h}"
|
|
617
615
|
@change="${this.handleChange}"
|
|
@@ -626,31 +624,31 @@ let p = class extends Lt(Nt(q)) {
|
|
|
626
624
|
</label>`;
|
|
627
625
|
}
|
|
628
626
|
};
|
|
629
|
-
p.styles = It(
|
|
627
|
+
p.styles = It(_t);
|
|
630
628
|
f([
|
|
631
|
-
|
|
629
|
+
y({ type: String })
|
|
632
630
|
], p.prototype, "label", 2);
|
|
633
631
|
f([
|
|
634
|
-
|
|
635
|
-
|
|
632
|
+
y({ type: String }),
|
|
633
|
+
Ot(Ht, $t, k.labelPlacement)
|
|
636
634
|
], p.prototype, "labelPlacement", 2);
|
|
637
635
|
f([
|
|
638
|
-
|
|
636
|
+
y({ type: Object })
|
|
639
637
|
], p.prototype, "aria", 2);
|
|
640
638
|
f([
|
|
641
|
-
|
|
639
|
+
y({ type: Boolean, reflect: !0 })
|
|
642
640
|
], p.prototype, "checked", 2);
|
|
643
641
|
f([
|
|
644
|
-
|
|
642
|
+
y({ type: Boolean, reflect: !0 })
|
|
645
643
|
], p.prototype, "required", 2);
|
|
646
644
|
f([
|
|
647
|
-
|
|
645
|
+
y({ type: String })
|
|
648
646
|
], p.prototype, "value", 2);
|
|
649
647
|
f([
|
|
650
|
-
|
|
648
|
+
y({ type: String, reflect: !0 })
|
|
651
649
|
], p.prototype, "name", 2);
|
|
652
650
|
f([
|
|
653
|
-
|
|
651
|
+
y({ type: Boolean, reflect: !0 })
|
|
654
652
|
], p.prototype, "disabled", 2);
|
|
655
653
|
f([
|
|
656
654
|
dt('input[type="checkbox"]')
|
|
@@ -662,11 +660,11 @@ f([
|
|
|
662
660
|
St()
|
|
663
661
|
], p.prototype, "_isAnimationAllowed", 2);
|
|
664
662
|
p = f([
|
|
665
|
-
|
|
663
|
+
Pt("pie-switch")
|
|
666
664
|
], p);
|
|
667
665
|
export {
|
|
668
|
-
|
|
666
|
+
Gt as ON_SWITCH_CHANGED_EVENT,
|
|
669
667
|
p as PieSwitch,
|
|
670
|
-
|
|
671
|
-
|
|
668
|
+
k as defaultProps,
|
|
669
|
+
$t as labelPlacements
|
|
672
670
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
|
5
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
6
|
import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
|
|
7
7
|
import * as React_2 from 'react';
|
|
8
|
-
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
9
8
|
import { TemplateResult } from 'lit-html';
|
|
10
9
|
|
|
11
10
|
declare type AriaProps = {
|
|
@@ -95,7 +94,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
|
|
|
95
94
|
render(): TemplateResult<1>;
|
|
96
95
|
}
|
|
97
96
|
|
|
98
|
-
declare const PieSwitch_base: GenericConstructor<FormControlInterface> &
|
|
97
|
+
declare const PieSwitch_base: GenericConstructor<FormControlInterface> & typeof PieElement;
|
|
99
98
|
|
|
100
99
|
declare type PieSwitchEvents = {
|
|
101
100
|
onInvalid?: (event: Event) => void;
|
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": "2.0
|
|
4
|
+
"version": "2.1.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -41,13 +41,13 @@
|
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
43
|
"@justeattakeaway/pie-css": "0.19.0",
|
|
44
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
45
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-icons-webc": "1.14.
|
|
50
|
-
"@justeattakeaway/pie-webc-core": "1.
|
|
49
|
+
"@justeattakeaway/pie-icons-webc": "1.14.2",
|
|
50
|
+
"@justeattakeaway/pie-webc-core": "1.1.0",
|
|
51
51
|
"element-internals-polyfill": "1.3.11"
|
|
52
52
|
},
|
|
53
53
|
"volta": {
|
package/src/index.ts
CHANGED
|
@@ -8,8 +8,11 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
8
8
|
import 'element-internals-polyfill';
|
|
9
9
|
|
|
10
10
|
import {
|
|
11
|
-
|
|
11
|
+
validPropertyValues,
|
|
12
|
+
FormControlMixin,
|
|
13
|
+
wrapNativeEvent,
|
|
12
14
|
safeCustomElement,
|
|
15
|
+
type PIEInputElement,
|
|
13
16
|
} from '@justeattakeaway/pie-webc-core';
|
|
14
17
|
import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
|
|
15
18
|
|
|
@@ -26,7 +29,7 @@ const componentSelector = 'pie-switch';
|
|
|
26
29
|
* @event {CustomEvent} change - when the switch checked state is changed.
|
|
27
30
|
*/
|
|
28
31
|
@safeCustomElement('pie-switch')
|
|
29
|
-
export class PieSwitch extends FormControlMixin(
|
|
32
|
+
export class PieSwitch extends FormControlMixin(PieElement) implements SwitchProps, PIEInputElement {
|
|
30
33
|
@property({ type: String })
|
|
31
34
|
public label: SwitchProps['label'];
|
|
32
35
|
|
|
@@ -196,14 +199,12 @@ export class PieSwitch extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
196
199
|
aria,
|
|
197
200
|
checked,
|
|
198
201
|
disabled,
|
|
199
|
-
isRTL,
|
|
200
202
|
required,
|
|
201
203
|
_isAnimationAllowed,
|
|
202
204
|
} = this;
|
|
203
205
|
|
|
204
206
|
const classes = {
|
|
205
207
|
'c-switch-wrapper': true,
|
|
206
|
-
'c-switch-wrapper--rtl': isRTL,
|
|
207
208
|
'c-switch-wrapper--allow-animation': _isAnimationAllowed,
|
|
208
209
|
};
|
|
209
210
|
|
package/src/switch.scss
CHANGED
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
background-color: var(--dt-color-interactive-light);
|
|
96
96
|
padding: var(--switch-padding);
|
|
97
97
|
|
|
98
|
-
.c-switch-wrapper
|
|
98
|
+
.c-switch-wrapper:dir(rtl) & {
|
|
99
99
|
position: absolute;
|
|
100
100
|
left: initial;
|
|
101
101
|
right: 2px;
|
|
@@ -131,11 +131,6 @@
|
|
|
131
131
|
@include p.visually-hidden;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.c-switch-wrapper--rtl {
|
|
135
|
-
.c-switch-input:checked + .c-switch-control {
|
|
136
|
-
transform: translateX(calc(-1 * var(--switch-translation)));
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
134
|
|
|
140
135
|
.c-switch-wrapper--allow-animation {
|
|
141
136
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
@@ -165,10 +160,10 @@
|
|
|
165
160
|
}
|
|
166
161
|
}
|
|
167
162
|
}
|
|
163
|
+
}
|
|
168
164
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
}
|
|
165
|
+
.c-switch-wrapper:dir(rtl) {
|
|
166
|
+
.c-switch-input:checked + .c-switch-control {
|
|
167
|
+
transform: translateX(calc(-1 * var(--switch-translation)));
|
|
173
168
|
}
|
|
174
|
-
}
|
|
169
|
+
}
|