@justeattakeaway/pie-switch 0.29.4 → 0.29.6
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 +16 -34
- package/dist/index.d.ts +5 -0
- package/dist/index.js +261 -253
- package/dist/react.d.ts +5 -0
- package/dist/react.js +4 -3
- package/package.json +4 -4
- package/src/defs.ts +11 -0
- package/src/index.ts +7 -7
package/custom-elements.json
CHANGED
|
@@ -28,6 +28,14 @@
|
|
|
28
28
|
},
|
|
29
29
|
"default": "'change'",
|
|
30
30
|
"description": "Event name for when the switch checked state is changed."
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"kind": "variable",
|
|
34
|
+
"name": "defaultProps",
|
|
35
|
+
"type": {
|
|
36
|
+
"text": "DefaultProps"
|
|
37
|
+
},
|
|
38
|
+
"default": "{\n labelPlacement: 'leading',\n checked: false,\n required: false,\n value: 'on',\n disabled: false,\n}"
|
|
31
39
|
}
|
|
32
40
|
],
|
|
33
41
|
"exports": [
|
|
@@ -46,6 +54,14 @@
|
|
|
46
54
|
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
47
55
|
"module": "src/defs.js"
|
|
48
56
|
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"kind": "js",
|
|
60
|
+
"name": "defaultProps",
|
|
61
|
+
"declaration": {
|
|
62
|
+
"name": "defaultProps",
|
|
63
|
+
"module": "src/defs.js"
|
|
64
|
+
}
|
|
49
65
|
}
|
|
50
66
|
]
|
|
51
67
|
},
|
|
@@ -82,7 +98,6 @@
|
|
|
82
98
|
"text": "SwitchProps['labelPlacement']"
|
|
83
99
|
},
|
|
84
100
|
"privacy": "public",
|
|
85
|
-
"default": "'leading'",
|
|
86
101
|
"attribute": "labelPlacement"
|
|
87
102
|
},
|
|
88
103
|
{
|
|
@@ -97,33 +112,21 @@
|
|
|
97
112
|
{
|
|
98
113
|
"kind": "field",
|
|
99
114
|
"name": "checked",
|
|
100
|
-
"type": {
|
|
101
|
-
"text": "boolean"
|
|
102
|
-
},
|
|
103
115
|
"privacy": "public",
|
|
104
|
-
"default": "false",
|
|
105
116
|
"attribute": "checked",
|
|
106
117
|
"reflects": true
|
|
107
118
|
},
|
|
108
119
|
{
|
|
109
120
|
"kind": "field",
|
|
110
121
|
"name": "required",
|
|
111
|
-
"type": {
|
|
112
|
-
"text": "boolean"
|
|
113
|
-
},
|
|
114
122
|
"privacy": "public",
|
|
115
|
-
"default": "false",
|
|
116
123
|
"attribute": "required",
|
|
117
124
|
"reflects": true
|
|
118
125
|
},
|
|
119
126
|
{
|
|
120
127
|
"kind": "field",
|
|
121
128
|
"name": "value",
|
|
122
|
-
"type": {
|
|
123
|
-
"text": "string"
|
|
124
|
-
},
|
|
125
129
|
"privacy": "public",
|
|
126
|
-
"default": "'on'",
|
|
127
130
|
"attribute": "value"
|
|
128
131
|
},
|
|
129
132
|
{
|
|
@@ -138,11 +141,7 @@
|
|
|
138
141
|
{
|
|
139
142
|
"kind": "field",
|
|
140
143
|
"name": "disabled",
|
|
141
|
-
"type": {
|
|
142
|
-
"text": "boolean"
|
|
143
|
-
},
|
|
144
144
|
"privacy": "public",
|
|
145
|
-
"default": "false",
|
|
146
145
|
"attribute": "disabled",
|
|
147
146
|
"reflects": true
|
|
148
147
|
},
|
|
@@ -280,7 +279,6 @@
|
|
|
280
279
|
"type": {
|
|
281
280
|
"text": "SwitchProps['labelPlacement']"
|
|
282
281
|
},
|
|
283
|
-
"default": "'leading'",
|
|
284
282
|
"fieldName": "labelPlacement"
|
|
285
283
|
},
|
|
286
284
|
{
|
|
@@ -292,26 +290,14 @@
|
|
|
292
290
|
},
|
|
293
291
|
{
|
|
294
292
|
"name": "checked",
|
|
295
|
-
"type": {
|
|
296
|
-
"text": "boolean"
|
|
297
|
-
},
|
|
298
|
-
"default": "false",
|
|
299
293
|
"fieldName": "checked"
|
|
300
294
|
},
|
|
301
295
|
{
|
|
302
296
|
"name": "required",
|
|
303
|
-
"type": {
|
|
304
|
-
"text": "boolean"
|
|
305
|
-
},
|
|
306
|
-
"default": "false",
|
|
307
297
|
"fieldName": "required"
|
|
308
298
|
},
|
|
309
299
|
{
|
|
310
300
|
"name": "value",
|
|
311
|
-
"type": {
|
|
312
|
-
"text": "string"
|
|
313
|
-
},
|
|
314
|
-
"default": "'on'",
|
|
315
301
|
"fieldName": "value"
|
|
316
302
|
},
|
|
317
303
|
{
|
|
@@ -323,10 +309,6 @@
|
|
|
323
309
|
},
|
|
324
310
|
{
|
|
325
311
|
"name": "disabled",
|
|
326
|
-
"type": {
|
|
327
|
-
"text": "boolean"
|
|
328
|
-
},
|
|
329
|
-
"default": "false",
|
|
330
312
|
"fieldName": "disabled"
|
|
331
313
|
}
|
|
332
314
|
],
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
|
|
1
2
|
import type { CSSResult } from 'lit';
|
|
2
3
|
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
3
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
@@ -12,6 +13,10 @@ export declare type AriaProps = {
|
|
|
12
13
|
describedBy?: string;
|
|
13
14
|
};
|
|
14
15
|
|
|
16
|
+
export declare type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
|
|
17
|
+
|
|
18
|
+
export declare const defaultProps: DefaultProps;
|
|
19
|
+
|
|
15
20
|
export declare type LabelPlacement = typeof labelPlacements[number];
|
|
16
21
|
|
|
17
22
|
export declare const labelPlacements: readonly ["leading", "trailing"];
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { query as
|
|
3
|
-
import { FormControlMixin as
|
|
1
|
+
import { LitElement as Fe, html as A, nothing as C, unsafeCSS as Ae } from "lit";
|
|
2
|
+
import { query as le, property as E } from "lit/decorators.js";
|
|
3
|
+
import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Te, validPropertyValues as Ve, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
5
|
+
const Ne = `*,*: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{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
|
|
6
|
+
`, Pe = ["leading", "trailing"], ze = "change", x = {
|
|
7
|
+
labelPlacement: "leading",
|
|
8
|
+
checked: !1,
|
|
9
|
+
required: !1,
|
|
10
|
+
value: "on",
|
|
11
|
+
disabled: !1
|
|
12
|
+
};
|
|
7
13
|
(function() {
|
|
8
|
-
(function(
|
|
9
|
-
const n = /* @__PURE__ */ new WeakMap(),
|
|
14
|
+
(function(g) {
|
|
15
|
+
const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), T = {
|
|
10
16
|
ariaAtomic: "aria-atomic",
|
|
11
17
|
ariaAutoComplete: "aria-autocomplete",
|
|
12
18
|
ariaBusy: "aria-busy",
|
|
@@ -16,6 +22,7 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
16
22
|
ariaColIndexText: "aria-colindextext",
|
|
17
23
|
ariaColSpan: "aria-colspan",
|
|
18
24
|
ariaCurrent: "aria-current",
|
|
25
|
+
ariaDescription: "aria-description",
|
|
19
26
|
ariaDisabled: "aria-disabled",
|
|
20
27
|
ariaExpanded: "aria-expanded",
|
|
21
28
|
ariaHasPopup: "aria-haspopup",
|
|
@@ -48,50 +55,50 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
48
55
|
ariaValueNow: "aria-valuenow",
|
|
49
56
|
ariaValueText: "aria-valuetext",
|
|
50
57
|
role: "role"
|
|
51
|
-
},
|
|
58
|
+
}, de = (t, e) => {
|
|
52
59
|
for (let i in T) {
|
|
53
|
-
|
|
60
|
+
e[i] = null;
|
|
54
61
|
let a = null;
|
|
55
62
|
const r = T[i];
|
|
56
|
-
Object.defineProperty(
|
|
63
|
+
Object.defineProperty(e, i, {
|
|
57
64
|
get() {
|
|
58
65
|
return a;
|
|
59
66
|
},
|
|
60
67
|
set(o) {
|
|
61
|
-
a = o,
|
|
68
|
+
a = o, t.isConnected ? t.setAttribute(r, o) : I.set(t, e);
|
|
62
69
|
}
|
|
63
70
|
});
|
|
64
71
|
}
|
|
65
72
|
};
|
|
66
|
-
function K(
|
|
67
|
-
const
|
|
68
|
-
|
|
73
|
+
function K(t) {
|
|
74
|
+
const e = c.get(t), { form: i } = e;
|
|
75
|
+
Z(t, i, e), X(t, e.labels);
|
|
69
76
|
}
|
|
70
|
-
const
|
|
71
|
-
const i = document.createTreeWalker(
|
|
77
|
+
const G = (t, e = !1) => {
|
|
78
|
+
const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
|
|
72
79
|
acceptNode(o) {
|
|
73
|
-
return
|
|
80
|
+
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
74
81
|
}
|
|
75
82
|
});
|
|
76
83
|
let a = i.nextNode();
|
|
77
|
-
const r = !
|
|
84
|
+
const r = !e || t.disabled;
|
|
78
85
|
for (; a; )
|
|
79
|
-
a.formDisabledCallback && r &&
|
|
80
|
-
},
|
|
81
|
-
for (const
|
|
82
|
-
const i =
|
|
83
|
-
if (
|
|
84
|
-
const a =
|
|
86
|
+
a.formDisabledCallback && r && R(a, t.disabled), a = i.nextNode();
|
|
87
|
+
}, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = P() ? new MutationObserver((t) => {
|
|
88
|
+
for (const e of t) {
|
|
89
|
+
const i = e.target;
|
|
90
|
+
if (e.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
|
|
91
|
+
const a = c.get(i), r = z.get(i);
|
|
85
92
|
a.setFormValue(r);
|
|
86
93
|
}
|
|
87
94
|
}
|
|
88
95
|
}) : {};
|
|
89
|
-
function
|
|
90
|
-
|
|
91
|
-
const { addedNodes: i, removedNodes: a } =
|
|
96
|
+
function O(t) {
|
|
97
|
+
t.forEach((e) => {
|
|
98
|
+
const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), o = Array.from(a);
|
|
92
99
|
r.forEach((s) => {
|
|
93
100
|
var u;
|
|
94
|
-
if (
|
|
101
|
+
if (c.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
|
|
95
102
|
const d = I.get(s);
|
|
96
103
|
Object.keys(T).filter((f) => d[f] !== null).forEach((f) => {
|
|
97
104
|
s.setAttribute(T[f], d[f]);
|
|
@@ -102,207 +109,207 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
102
109
|
s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(s);
|
|
103
110
|
}
|
|
104
111
|
if (s.localName === "form") {
|
|
105
|
-
const d = y.get(s),
|
|
106
|
-
acceptNode(
|
|
107
|
-
return
|
|
112
|
+
const d = y.get(s), v = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
|
|
113
|
+
acceptNode(W) {
|
|
114
|
+
return c.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
108
115
|
}
|
|
109
116
|
});
|
|
110
|
-
let f =
|
|
117
|
+
let f = v.nextNode();
|
|
111
118
|
for (; f; )
|
|
112
|
-
K(f), f =
|
|
119
|
+
K(f), f = v.nextNode();
|
|
113
120
|
}
|
|
114
|
-
s.localName === "fieldset" && ((u =
|
|
121
|
+
s.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, s, Y), G(s, !0));
|
|
115
122
|
}), o.forEach((s) => {
|
|
116
|
-
const u =
|
|
117
|
-
u && h.get(u) &&
|
|
123
|
+
const u = c.get(s);
|
|
124
|
+
u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
|
|
118
125
|
});
|
|
119
126
|
});
|
|
120
127
|
}
|
|
121
|
-
function
|
|
122
|
-
|
|
123
|
-
const { removedNodes: i } =
|
|
128
|
+
function he(t) {
|
|
129
|
+
t.forEach((e) => {
|
|
130
|
+
const { removedNodes: i } = e;
|
|
124
131
|
i.forEach((a) => {
|
|
125
|
-
const r =
|
|
126
|
-
|
|
132
|
+
const r = U.get(e.target);
|
|
133
|
+
c.has(a) && te(a), r.disconnect();
|
|
127
134
|
});
|
|
128
135
|
});
|
|
129
136
|
}
|
|
130
|
-
const
|
|
131
|
-
var
|
|
132
|
-
const
|
|
133
|
-
(
|
|
137
|
+
const ue = (t) => {
|
|
138
|
+
var e, i;
|
|
139
|
+
const a = new MutationObserver(he);
|
|
140
|
+
!((e = window == null ? void 0 : window.ShadyDOM) === null || e === void 0) && e.inUse && t.mode && t.host && (t = t.host), (i = a.observe) === null || i === void 0 || i.call(a, t, { childList: !0 }), U.set(t, a);
|
|
134
141
|
};
|
|
135
|
-
|
|
136
|
-
const
|
|
142
|
+
P() && new MutationObserver(O);
|
|
143
|
+
const _ = {
|
|
137
144
|
childList: !0,
|
|
138
145
|
subtree: !0
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
},
|
|
142
|
-
h.get(
|
|
146
|
+
}, R = (t, e) => {
|
|
147
|
+
t.toggleAttribute("internals-disabled", e), e ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"), t.formDisabledCallback && t.formDisabledCallback.apply(t, [e]);
|
|
148
|
+
}, J = (t) => {
|
|
149
|
+
h.get(t).forEach((i) => {
|
|
143
150
|
i.remove();
|
|
144
|
-
}), h.set(
|
|
145
|
-
},
|
|
151
|
+
}), h.set(t, []);
|
|
152
|
+
}, Q = (t, e) => {
|
|
146
153
|
const i = document.createElement("input");
|
|
147
|
-
return i.type = "hidden", i.name =
|
|
148
|
-
},
|
|
154
|
+
return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
|
|
155
|
+
}, pe = (t, e) => {
|
|
149
156
|
var i;
|
|
150
|
-
h.set(
|
|
151
|
-
},
|
|
152
|
-
if (
|
|
153
|
-
Array.from(
|
|
154
|
-
let i =
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
const
|
|
159
|
-
|
|
160
|
-
},
|
|
161
|
-
|
|
162
|
-
},
|
|
163
|
-
|
|
164
|
-
},
|
|
165
|
-
const
|
|
166
|
-
|
|
167
|
-
if (i.target.closest(
|
|
168
|
-
const r = y.get(
|
|
169
|
-
if (
|
|
157
|
+
h.set(e, []), (i = V.observe) === null || i === void 0 || i.call(V, t, Y);
|
|
158
|
+
}, X = (t, e) => {
|
|
159
|
+
if (e.length) {
|
|
160
|
+
Array.from(e).forEach((a) => a.addEventListener("click", t.click.bind(t)));
|
|
161
|
+
let i = e[0].id;
|
|
162
|
+
e[0].id || (i = `${e[0].htmlFor}_Label`, e[0].id = i), t.setAttribute("aria-labelledby", i);
|
|
163
|
+
}
|
|
164
|
+
}, L = (t) => {
|
|
165
|
+
const e = Array.from(t.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = y.get(t) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...e, ...a].includes(!1);
|
|
166
|
+
t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
|
|
167
|
+
}, fe = (t) => {
|
|
168
|
+
L(N(t.target));
|
|
169
|
+
}, me = (t) => {
|
|
170
|
+
L(N(t.target));
|
|
171
|
+
}, we = (t) => {
|
|
172
|
+
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(",");
|
|
173
|
+
t.addEventListener("click", (i) => {
|
|
174
|
+
if (i.target.closest(e)) {
|
|
175
|
+
const r = y.get(t);
|
|
176
|
+
if (t.noValidate)
|
|
170
177
|
return;
|
|
171
|
-
r.size && Array.from(r).reverse().map((u) =>
|
|
178
|
+
r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
|
|
172
179
|
}
|
|
173
180
|
});
|
|
174
|
-
},
|
|
175
|
-
const
|
|
176
|
-
|
|
181
|
+
}, be = (t) => {
|
|
182
|
+
const e = y.get(t.target);
|
|
183
|
+
e && e.size && e.forEach((i) => {
|
|
177
184
|
i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
|
|
178
185
|
});
|
|
179
|
-
},
|
|
180
|
-
if (
|
|
181
|
-
const a = y.get(
|
|
186
|
+
}, Z = (t, e, i) => {
|
|
187
|
+
if (e) {
|
|
188
|
+
const a = y.get(e);
|
|
182
189
|
if (a)
|
|
183
|
-
a.add(
|
|
190
|
+
a.add(t);
|
|
184
191
|
else {
|
|
185
192
|
const r = /* @__PURE__ */ new Set();
|
|
186
|
-
r.add(
|
|
193
|
+
r.add(t), y.set(e, r), we(e), e.addEventListener("reset", be), e.addEventListener("input", fe), e.addEventListener("change", me);
|
|
187
194
|
}
|
|
188
|
-
k.set(
|
|
189
|
-
|
|
190
|
-
}, 0),
|
|
191
|
-
}
|
|
192
|
-
},
|
|
193
|
-
let
|
|
194
|
-
return
|
|
195
|
-
}, b = (
|
|
196
|
-
if (!
|
|
197
|
-
throw new i(
|
|
198
|
-
},
|
|
199
|
-
const a = y.get(
|
|
195
|
+
k.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
|
|
196
|
+
t.formAssociatedCallback.apply(t, [e]);
|
|
197
|
+
}, 0), L(e);
|
|
198
|
+
}
|
|
199
|
+
}, N = (t) => {
|
|
200
|
+
let e = t.parentNode;
|
|
201
|
+
return e && e.tagName !== "FORM" && (e = N(e)), e;
|
|
202
|
+
}, b = (t, e, i = DOMException) => {
|
|
203
|
+
if (!t.constructor.formAssociated)
|
|
204
|
+
throw new i(e);
|
|
205
|
+
}, ee = (t, e, i) => {
|
|
206
|
+
const a = y.get(t);
|
|
200
207
|
return a && a.size && a.forEach((r) => {
|
|
201
|
-
|
|
202
|
-
}),
|
|
203
|
-
},
|
|
204
|
-
if (
|
|
205
|
-
const
|
|
206
|
-
|
|
208
|
+
c.get(r)[i]() || (e = !1);
|
|
209
|
+
}), e;
|
|
210
|
+
}, te = (t) => {
|
|
211
|
+
if (t.constructor.formAssociated) {
|
|
212
|
+
const e = c.get(t), { labels: i, form: a } = e;
|
|
213
|
+
X(t, i), Z(t, a, e);
|
|
207
214
|
}
|
|
208
215
|
};
|
|
209
|
-
function
|
|
216
|
+
function P() {
|
|
210
217
|
return typeof MutationObserver < "u";
|
|
211
218
|
}
|
|
212
|
-
class
|
|
219
|
+
class ve {
|
|
213
220
|
constructor() {
|
|
214
221
|
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);
|
|
215
222
|
}
|
|
216
223
|
}
|
|
217
|
-
const
|
|
218
|
-
let
|
|
219
|
-
for (let i in
|
|
220
|
-
i !== "valid" &&
|
|
221
|
-
return
|
|
222
|
-
},
|
|
223
|
-
function
|
|
224
|
-
|
|
224
|
+
const ge = (t) => (t.badInput = !1, t.customError = !1, t.patternMismatch = !1, t.rangeOverflow = !1, t.rangeUnderflow = !1, t.stepMismatch = !1, t.tooLong = !1, t.tooShort = !1, t.typeMismatch = !1, t.valid = !0, t.valueMissing = !1, t), ye = (t, e, i) => (t.valid = Ee(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && L(i), t), Ee = (t) => {
|
|
225
|
+
let e = !0;
|
|
226
|
+
for (let i in t)
|
|
227
|
+
i !== "valid" && t[i] !== !1 && (e = !1);
|
|
228
|
+
return e;
|
|
229
|
+
}, $ = /* @__PURE__ */ new WeakMap();
|
|
230
|
+
function ie(t, e) {
|
|
231
|
+
t.toggleAttribute(e, !0), t.part && t.part.add(e);
|
|
225
232
|
}
|
|
226
|
-
class
|
|
233
|
+
class D extends Set {
|
|
227
234
|
static get isPolyfilled() {
|
|
228
235
|
return !0;
|
|
229
236
|
}
|
|
230
|
-
constructor(
|
|
231
|
-
if (super(), !
|
|
237
|
+
constructor(e) {
|
|
238
|
+
if (super(), !e || !e.tagName || e.tagName.indexOf("-") === -1)
|
|
232
239
|
throw new TypeError("Illegal constructor");
|
|
233
|
-
|
|
234
|
-
}
|
|
235
|
-
add(
|
|
236
|
-
if (!/^--/.test(
|
|
237
|
-
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${
|
|
238
|
-
const i = super.add(
|
|
239
|
-
return a.isConnected ?
|
|
240
|
-
|
|
240
|
+
$.set(this, e);
|
|
241
|
+
}
|
|
242
|
+
add(e) {
|
|
243
|
+
if (!/^--/.test(e) || typeof e != "string")
|
|
244
|
+
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${e} must start with '--'.`);
|
|
245
|
+
const i = super.add(e), a = $.get(this), r = `state${e}`;
|
|
246
|
+
return a.isConnected ? ie(a, r) : setTimeout(() => {
|
|
247
|
+
ie(a, r);
|
|
241
248
|
}), i;
|
|
242
249
|
}
|
|
243
250
|
clear() {
|
|
244
|
-
for (let [
|
|
245
|
-
this.delete(
|
|
251
|
+
for (let [e] of this.entries())
|
|
252
|
+
this.delete(e);
|
|
246
253
|
super.clear();
|
|
247
254
|
}
|
|
248
|
-
delete(
|
|
249
|
-
const i = super.delete(
|
|
250
|
-
return a.isConnected ? (a.toggleAttribute(`state${
|
|
251
|
-
a.toggleAttribute(`state${
|
|
255
|
+
delete(e) {
|
|
256
|
+
const i = super.delete(e), a = $.get(this);
|
|
257
|
+
return a.isConnected ? (a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`)) : setTimeout(() => {
|
|
258
|
+
a.toggleAttribute(`state${e}`, !1), a.part && a.part.remove(`state${e}`);
|
|
252
259
|
}), i;
|
|
253
260
|
}
|
|
254
261
|
}
|
|
255
|
-
function
|
|
262
|
+
function ae(t, e, i, a) {
|
|
256
263
|
if (i === "a" && !a)
|
|
257
264
|
throw new TypeError("Private accessor was defined without a getter");
|
|
258
|
-
if (typeof
|
|
265
|
+
if (typeof e == "function" ? t !== e || !a : !e.has(t))
|
|
259
266
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
260
|
-
return i === "m" ? a : i === "a" ? a.call(
|
|
267
|
+
return i === "m" ? a : i === "a" ? a.call(t) : a ? a.value : e.get(t);
|
|
261
268
|
}
|
|
262
|
-
function
|
|
269
|
+
function ke(t, e, i, a, r) {
|
|
263
270
|
if (a === "m")
|
|
264
271
|
throw new TypeError("Private method is not writable");
|
|
265
272
|
if (a === "a" && !r)
|
|
266
273
|
throw new TypeError("Private accessor was defined without a setter");
|
|
267
|
-
if (typeof
|
|
274
|
+
if (typeof e == "function" ? t !== e || !r : !e.has(t))
|
|
268
275
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
269
|
-
return a === "a" ? r.call(
|
|
276
|
+
return a === "a" ? r.call(t, i) : r ? r.value = i : e.set(t, i), i;
|
|
270
277
|
}
|
|
271
278
|
var F;
|
|
272
|
-
class
|
|
273
|
-
constructor(
|
|
274
|
-
F.set(this, void 0),
|
|
275
|
-
for (let i = 0; i <
|
|
276
|
-
let a =
|
|
279
|
+
class Me {
|
|
280
|
+
constructor(e) {
|
|
281
|
+
F.set(this, void 0), ke(this, F, e, "f");
|
|
282
|
+
for (let i = 0; i < e.length; i++) {
|
|
283
|
+
let a = e[i];
|
|
277
284
|
this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
|
|
278
285
|
}
|
|
279
286
|
Object.freeze(this);
|
|
280
287
|
}
|
|
281
288
|
get length() {
|
|
282
|
-
return
|
|
289
|
+
return ae(this, F, "f").length;
|
|
283
290
|
}
|
|
284
291
|
[(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
285
|
-
return
|
|
292
|
+
return ae(this, F, "f")[Symbol.iterator]();
|
|
286
293
|
}
|
|
287
|
-
item(
|
|
288
|
-
return this[
|
|
294
|
+
item(e) {
|
|
295
|
+
return this[e] == null ? null : this[e];
|
|
289
296
|
}
|
|
290
|
-
namedItem(
|
|
291
|
-
return this[
|
|
297
|
+
namedItem(e) {
|
|
298
|
+
return this[e] == null ? null : this[e];
|
|
292
299
|
}
|
|
293
300
|
}
|
|
294
|
-
function
|
|
295
|
-
const
|
|
301
|
+
function Ce() {
|
|
302
|
+
const t = HTMLFormElement.prototype.checkValidity;
|
|
296
303
|
HTMLFormElement.prototype.checkValidity = i;
|
|
297
|
-
const
|
|
304
|
+
const e = HTMLFormElement.prototype.reportValidity;
|
|
298
305
|
HTMLFormElement.prototype.reportValidity = a;
|
|
299
306
|
function i(...o) {
|
|
300
|
-
let s =
|
|
301
|
-
return
|
|
307
|
+
let s = t.apply(this, o);
|
|
308
|
+
return ee(this, s, "checkValidity");
|
|
302
309
|
}
|
|
303
310
|
function a(...o) {
|
|
304
|
-
let s =
|
|
305
|
-
return
|
|
311
|
+
let s = e.apply(this, o);
|
|
312
|
+
return ee(this, s, "reportValidity");
|
|
306
313
|
}
|
|
307
314
|
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
308
315
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
@@ -310,117 +317,117 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
310
317
|
const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
|
|
311
318
|
if (u.length === 0)
|
|
312
319
|
return s;
|
|
313
|
-
const d = Array.from(s).concat(u).sort((
|
|
314
|
-
return new
|
|
320
|
+
const d = Array.from(s).concat(u).sort((v, f) => v.compareDocumentPosition ? v.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
|
|
321
|
+
return new Me(d);
|
|
315
322
|
}
|
|
316
323
|
});
|
|
317
324
|
}
|
|
318
|
-
class
|
|
325
|
+
class re {
|
|
319
326
|
static get isPolyfilled() {
|
|
320
327
|
return !0;
|
|
321
328
|
}
|
|
322
|
-
constructor(
|
|
323
|
-
if (!
|
|
329
|
+
constructor(e) {
|
|
330
|
+
if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
|
|
324
331
|
throw new TypeError("Illegal constructor");
|
|
325
|
-
const i =
|
|
326
|
-
this.states = new
|
|
332
|
+
const i = e.getRootNode(), a = new ve();
|
|
333
|
+
this.states = new D(e), n.set(this, e), l.set(this, a), c.set(e, this), de(e, this), pe(e, this), Object.seal(this), i instanceof DocumentFragment && ue(i);
|
|
327
334
|
}
|
|
328
335
|
checkValidity() {
|
|
329
|
-
const
|
|
330
|
-
if (b(
|
|
336
|
+
const e = n.get(this);
|
|
337
|
+
if (b(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
331
338
|
return !0;
|
|
332
|
-
const i =
|
|
339
|
+
const i = l.get(this);
|
|
333
340
|
if (!i.valid) {
|
|
334
341
|
const a = new Event("invalid", {
|
|
335
342
|
bubbles: !1,
|
|
336
343
|
cancelable: !0,
|
|
337
344
|
composed: !1
|
|
338
345
|
});
|
|
339
|
-
|
|
346
|
+
e.dispatchEvent(a);
|
|
340
347
|
}
|
|
341
348
|
return i.valid;
|
|
342
349
|
}
|
|
343
350
|
get form() {
|
|
344
|
-
const
|
|
345
|
-
b(
|
|
351
|
+
const e = n.get(this);
|
|
352
|
+
b(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
346
353
|
let i;
|
|
347
|
-
return
|
|
354
|
+
return e.constructor.formAssociated === !0 && (i = N(e)), i;
|
|
348
355
|
}
|
|
349
356
|
get labels() {
|
|
350
|
-
const
|
|
351
|
-
b(
|
|
352
|
-
const i =
|
|
357
|
+
const e = n.get(this);
|
|
358
|
+
b(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
|
|
359
|
+
const i = e.getAttribute("id"), a = e.getRootNode();
|
|
353
360
|
return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
|
|
354
361
|
}
|
|
355
362
|
reportValidity() {
|
|
356
|
-
const
|
|
357
|
-
if (b(
|
|
363
|
+
const e = n.get(this);
|
|
364
|
+
if (b(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
|
|
358
365
|
return !0;
|
|
359
366
|
const i = this.checkValidity(), a = B.get(this);
|
|
360
|
-
if (a && !
|
|
367
|
+
if (a && !e.constructor.formAssociated)
|
|
361
368
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
362
|
-
return !i && a && (
|
|
369
|
+
return !i && a && (e.focus(), a.focus()), i;
|
|
363
370
|
}
|
|
364
|
-
setFormValue(
|
|
371
|
+
setFormValue(e) {
|
|
365
372
|
const i = n.get(this);
|
|
366
|
-
if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."),
|
|
373
|
+
if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), e != null && !(e instanceof FormData)) {
|
|
367
374
|
if (i.getAttribute("name")) {
|
|
368
|
-
const a =
|
|
369
|
-
a.value =
|
|
375
|
+
const a = Q(i, this);
|
|
376
|
+
a.value = e;
|
|
370
377
|
}
|
|
371
378
|
} else
|
|
372
|
-
|
|
379
|
+
e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
|
|
373
380
|
if (typeof r == "string") {
|
|
374
|
-
const o =
|
|
381
|
+
const o = Q(i, this);
|
|
375
382
|
o.name = a, o.value = r;
|
|
376
383
|
}
|
|
377
384
|
});
|
|
378
|
-
|
|
385
|
+
z.set(i, e);
|
|
379
386
|
}
|
|
380
|
-
setValidity(
|
|
387
|
+
setValidity(e, i, a) {
|
|
381
388
|
const r = n.get(this);
|
|
382
|
-
if (b(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !
|
|
389
|
+
if (b(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
|
|
383
390
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
384
391
|
B.set(this, a);
|
|
385
|
-
const o =
|
|
386
|
-
for (const
|
|
387
|
-
s[
|
|
388
|
-
Object.keys(s).length === 0 &&
|
|
389
|
-
const u = {
|
|
392
|
+
const o = l.get(this), s = {};
|
|
393
|
+
for (const v in e)
|
|
394
|
+
s[v] = e[v];
|
|
395
|
+
Object.keys(s).length === 0 && ge(o);
|
|
396
|
+
const u = Object.assign(Object.assign({}, o), s);
|
|
390
397
|
delete u.valid;
|
|
391
|
-
const { valid: d } =
|
|
398
|
+
const { valid: d } = ye(o, u, this.form);
|
|
392
399
|
if (!d && !i)
|
|
393
400
|
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.");
|
|
394
401
|
w.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : S.set(r, this);
|
|
395
402
|
}
|
|
396
403
|
get shadowRoot() {
|
|
397
|
-
const
|
|
404
|
+
const e = n.get(this), i = q.get(e);
|
|
398
405
|
return i || null;
|
|
399
406
|
}
|
|
400
407
|
get validationMessage() {
|
|
401
|
-
const
|
|
402
|
-
return b(
|
|
408
|
+
const e = n.get(this);
|
|
409
|
+
return b(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), w.get(this);
|
|
403
410
|
}
|
|
404
411
|
get validity() {
|
|
405
|
-
const
|
|
406
|
-
return b(
|
|
412
|
+
const e = n.get(this);
|
|
413
|
+
return b(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), l.get(this);
|
|
407
414
|
}
|
|
408
415
|
get willValidate() {
|
|
409
|
-
const
|
|
410
|
-
return b(
|
|
416
|
+
const e = n.get(this);
|
|
417
|
+
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"));
|
|
411
418
|
}
|
|
412
419
|
}
|
|
413
|
-
function
|
|
420
|
+
function xe() {
|
|
414
421
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
415
422
|
return !1;
|
|
416
|
-
class
|
|
423
|
+
class t extends HTMLElement {
|
|
417
424
|
constructor() {
|
|
418
425
|
super(), this.internals = this.attachInternals();
|
|
419
426
|
}
|
|
420
427
|
}
|
|
421
|
-
const
|
|
422
|
-
customElements.define(
|
|
423
|
-
const i = new
|
|
428
|
+
const e = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
|
|
429
|
+
customElements.define(e, t);
|
|
430
|
+
const i = new t();
|
|
424
431
|
return [
|
|
425
432
|
"shadowRoot",
|
|
426
433
|
"form",
|
|
@@ -434,25 +441,25 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
434
441
|
"reportValidity"
|
|
435
442
|
].every((a) => a in i.internals);
|
|
436
443
|
}
|
|
437
|
-
let
|
|
438
|
-
function H(
|
|
439
|
-
|
|
440
|
-
const i =
|
|
441
|
-
return i.states = new
|
|
444
|
+
let oe = !1, se = !1;
|
|
445
|
+
function H(t) {
|
|
446
|
+
se || (se = !0, window.CustomStateSet = D, t && (HTMLElement.prototype.attachInternals = function(...e) {
|
|
447
|
+
const i = t.call(this, e);
|
|
448
|
+
return i.states = new D(this), i;
|
|
442
449
|
}));
|
|
443
450
|
}
|
|
444
|
-
function
|
|
445
|
-
if (!
|
|
446
|
-
if (
|
|
447
|
-
const
|
|
451
|
+
function ne(t = !0) {
|
|
452
|
+
if (!oe) {
|
|
453
|
+
if (oe = !0, typeof window < "u" && (window.ElementInternals = re), typeof CustomElementRegistry < "u") {
|
|
454
|
+
const e = CustomElementRegistry.prototype.define;
|
|
448
455
|
CustomElementRegistry.prototype.define = function(i, a, r) {
|
|
449
456
|
if (a.formAssociated) {
|
|
450
457
|
const o = a.prototype.connectedCallback;
|
|
451
458
|
a.prototype.connectedCallback = function() {
|
|
452
|
-
|
|
459
|
+
j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), o != null && o.apply(this), te(this);
|
|
453
460
|
};
|
|
454
461
|
}
|
|
455
|
-
|
|
462
|
+
e.call(this, i, a, r);
|
|
456
463
|
};
|
|
457
464
|
}
|
|
458
465
|
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
@@ -461,40 +468,40 @@ const Lt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
461
468
|
throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
|
|
462
469
|
} else
|
|
463
470
|
return {};
|
|
464
|
-
if (
|
|
471
|
+
if (c.has(this))
|
|
465
472
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
466
|
-
return new
|
|
473
|
+
return new re(this);
|
|
467
474
|
}), typeof Element < "u") {
|
|
468
|
-
let
|
|
475
|
+
let e = function(...a) {
|
|
469
476
|
const r = i.apply(this, a);
|
|
470
|
-
if (
|
|
471
|
-
const o = new MutationObserver(
|
|
472
|
-
window.ShadyDOM ? o.observe(this,
|
|
477
|
+
if (q.set(this, r), P()) {
|
|
478
|
+
const o = new MutationObserver(O);
|
|
479
|
+
window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), M.set(this, o);
|
|
473
480
|
}
|
|
474
481
|
return r;
|
|
475
482
|
};
|
|
476
483
|
const i = Element.prototype.attachShadow;
|
|
477
|
-
Element.prototype.attachShadow =
|
|
484
|
+
Element.prototype.attachShadow = e;
|
|
478
485
|
}
|
|
479
|
-
|
|
486
|
+
P() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
|
|
480
487
|
}
|
|
481
488
|
}
|
|
482
|
-
return !!customElements.polyfillWrapFlushCallback || (
|
|
489
|
+
return !!customElements.polyfillWrapFlushCallback || (xe() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ne(!1)), g.forceCustomStateSetPolyfill = H, g.forceElementInternalsPolyfill = ne, Object.defineProperty(g, "__esModule", { value: !0 }), g;
|
|
483
490
|
})({});
|
|
484
491
|
})();
|
|
485
|
-
var
|
|
486
|
-
for (var
|
|
487
|
-
(k =
|
|
488
|
-
return h &&
|
|
492
|
+
var Oe = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, m = (g, n, l, h) => {
|
|
493
|
+
for (var c = h > 1 ? void 0 : h ? _e(n, l) : n, w = g.length - 1, k; w >= 0; w--)
|
|
494
|
+
(k = g[w]) && (c = (h ? k(n, l, c) : k(c)) || c);
|
|
495
|
+
return h && c && Oe(n, l, c), c;
|
|
489
496
|
};
|
|
490
|
-
const
|
|
491
|
-
class p extends
|
|
497
|
+
const ce = "pie-switch";
|
|
498
|
+
class p extends Ie(Se(Fe)) {
|
|
492
499
|
constructor() {
|
|
493
|
-
super(...arguments), this.labelPlacement =
|
|
500
|
+
super(...arguments), this.labelPlacement = x.labelPlacement, this.checked = x.checked, this.required = x.required, this.value = x.value, this.disabled = x.disabled;
|
|
494
501
|
}
|
|
495
502
|
firstUpdated(n) {
|
|
496
|
-
var
|
|
497
|
-
super.firstUpdated(n), this.handleFormAssociation(), (
|
|
503
|
+
var l;
|
|
504
|
+
super.firstUpdated(n), this.handleFormAssociation(), (l = this.input) == null || l.addEventListener("invalid", (h) => {
|
|
498
505
|
this.dispatchEvent(new Event("invalid", h));
|
|
499
506
|
});
|
|
500
507
|
}
|
|
@@ -512,9 +519,9 @@ class p extends At(It(xt)) {
|
|
|
512
519
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
513
520
|
*/
|
|
514
521
|
onChange(n) {
|
|
515
|
-
const { checked:
|
|
516
|
-
this.checked =
|
|
517
|
-
const h =
|
|
522
|
+
const { checked: l } = n == null ? void 0 : n.currentTarget;
|
|
523
|
+
this.checked = l;
|
|
524
|
+
const h = Te(n);
|
|
518
525
|
this.dispatchEvent(h), this.handleFormAssociation();
|
|
519
526
|
}
|
|
520
527
|
/**
|
|
@@ -538,8 +545,8 @@ class p extends At(It(xt)) {
|
|
|
538
545
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
|
|
539
546
|
*/
|
|
540
547
|
setCustomValidity(n) {
|
|
541
|
-
var
|
|
542
|
-
(
|
|
548
|
+
var l;
|
|
549
|
+
(l = this.input) == null || l.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
|
|
543
550
|
}
|
|
544
551
|
/**
|
|
545
552
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -563,18 +570,18 @@ class p extends At(It(xt)) {
|
|
|
563
570
|
* @private
|
|
564
571
|
*/
|
|
565
572
|
renderSwitchLabel() {
|
|
566
|
-
const { label: n, labelPlacement:
|
|
573
|
+
const { label: n, labelPlacement: l } = this;
|
|
567
574
|
return n ? A`
|
|
568
|
-
<span data-test-id="switch-label-${
|
|
575
|
+
<span data-test-id="switch-label-${l}">
|
|
569
576
|
${n}
|
|
570
577
|
</span>` : A``;
|
|
571
578
|
}
|
|
572
579
|
render() {
|
|
573
580
|
const {
|
|
574
581
|
labelPlacement: n,
|
|
575
|
-
aria:
|
|
582
|
+
aria: l,
|
|
576
583
|
checked: h,
|
|
577
|
-
required:
|
|
584
|
+
required: c,
|
|
578
585
|
disabled: w,
|
|
579
586
|
isRTL: k
|
|
580
587
|
} = this, M = "switch-description";
|
|
@@ -583,7 +590,7 @@ class p extends At(It(xt)) {
|
|
|
583
590
|
class="c-switch-wrapper"
|
|
584
591
|
?isRTL=${k}
|
|
585
592
|
?disabled=${w}>
|
|
586
|
-
${n === "leading" ? this.renderSwitchLabel() :
|
|
593
|
+
${n === "leading" ? this.renderSwitchLabel() : C}
|
|
587
594
|
<div
|
|
588
595
|
data-test-id="switch-component"
|
|
589
596
|
class="c-switch"
|
|
@@ -593,32 +600,32 @@ class p extends At(It(xt)) {
|
|
|
593
600
|
role="switch"
|
|
594
601
|
type="checkbox"
|
|
595
602
|
class="c-switch-input"
|
|
596
|
-
.required=${
|
|
603
|
+
.required=${c}
|
|
597
604
|
.checked="${h}"
|
|
598
605
|
.disabled="${w}"
|
|
599
606
|
@change="${this.onChange}"
|
|
600
|
-
aria-label="${(
|
|
601
|
-
aria-describedby="${
|
|
607
|
+
aria-label="${(l == null ? void 0 : l.label) || C}"
|
|
608
|
+
aria-describedby="${l != null && l.describedBy ? M : C}">
|
|
602
609
|
<div class="c-switch-control">
|
|
603
|
-
${h ? A`<icon-check></icon-check>` :
|
|
610
|
+
${h ? A`<icon-check></icon-check>` : C}
|
|
604
611
|
</div>
|
|
605
612
|
</div>
|
|
606
|
-
${n === "trailing" ? this.renderSwitchLabel() :
|
|
607
|
-
${
|
|
613
|
+
${n === "trailing" ? this.renderSwitchLabel() : C}
|
|
614
|
+
${l != null && l.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${l == null ? void 0 : l.describedBy}</div>` : C}
|
|
608
615
|
</label>
|
|
609
616
|
`;
|
|
610
617
|
}
|
|
611
618
|
}
|
|
612
|
-
p.styles =
|
|
619
|
+
p.styles = Ae(Ne);
|
|
613
620
|
m([
|
|
614
|
-
|
|
621
|
+
le('input[type="checkbox"]')
|
|
615
622
|
], p.prototype, "input", 2);
|
|
616
623
|
m([
|
|
617
624
|
E({ type: String })
|
|
618
625
|
], p.prototype, "label", 2);
|
|
619
626
|
m([
|
|
620
627
|
E({ type: String }),
|
|
621
|
-
|
|
628
|
+
Ve(ce, Pe, x.labelPlacement)
|
|
622
629
|
], p.prototype, "labelPlacement", 2);
|
|
623
630
|
m([
|
|
624
631
|
E({ type: Object })
|
|
@@ -639,11 +646,12 @@ m([
|
|
|
639
646
|
E({ type: Boolean, reflect: !0 })
|
|
640
647
|
], p.prototype, "disabled", 2);
|
|
641
648
|
m([
|
|
642
|
-
|
|
649
|
+
le("label")
|
|
643
650
|
], p.prototype, "focusTarget", 2);
|
|
644
|
-
|
|
651
|
+
Le(ce, p);
|
|
645
652
|
export {
|
|
646
|
-
|
|
653
|
+
ze as ON_SWITCH_CHANGED_EVENT,
|
|
647
654
|
p as PieSwitch,
|
|
648
|
-
|
|
655
|
+
x as defaultProps,
|
|
656
|
+
Pe as labelPlacements
|
|
649
657
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
|
|
1
2
|
import type { CSSResult } from 'lit';
|
|
2
3
|
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
3
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
@@ -13,6 +14,10 @@ export declare type AriaProps = {
|
|
|
13
14
|
describedBy?: string;
|
|
14
15
|
};
|
|
15
16
|
|
|
17
|
+
export declare type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
|
|
18
|
+
|
|
19
|
+
export declare const defaultProps: DefaultProps;
|
|
20
|
+
|
|
16
21
|
export declare type LabelPlacement = typeof labelPlacements[number];
|
|
17
22
|
|
|
18
23
|
export declare const labelPlacements: readonly ["leading", "trailing"];
|
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { createComponent as t } from "@lit/react";
|
|
3
3
|
import { PieSwitch as i } from "./index.js";
|
|
4
|
-
import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as
|
|
4
|
+
import { ON_SWITCH_CHANGED_EVENT as P, defaultProps as w, labelPlacements as S } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "@justeattakeaway/pie-webc-core";
|
|
@@ -18,7 +18,8 @@ const o = t({
|
|
|
18
18
|
}
|
|
19
19
|
}), s = o;
|
|
20
20
|
export {
|
|
21
|
-
|
|
21
|
+
P as ON_SWITCH_CHANGED_EVENT,
|
|
22
22
|
s as PieSwitch,
|
|
23
|
-
|
|
23
|
+
w as defaultProps,
|
|
24
|
+
S as labelPlacements
|
|
24
25
|
};
|
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": "0.29.
|
|
4
|
+
"version": "0.29.6",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
44
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
43
|
+
"@justeattakeaway/pie-icons-webc": "0.24.0",
|
|
44
|
+
"@justeattakeaway/pie-webc-core": "0.23.0",
|
|
45
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.0",
|
|
46
|
-
"element-internals-polyfill": "1.3.
|
|
46
|
+
"element-internals-polyfill": "1.3.11"
|
|
47
47
|
},
|
|
48
48
|
"volta": {
|
|
49
49
|
"extends": "../../../package.json"
|
package/src/defs.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
|
|
2
|
+
|
|
1
3
|
export const labelPlacements = ['leading', 'trailing'] as const;
|
|
2
4
|
|
|
3
5
|
export type LabelPlacement = typeof labelPlacements[number];
|
|
@@ -48,3 +50,12 @@ export interface SwitchProps {
|
|
|
48
50
|
* @constant
|
|
49
51
|
*/
|
|
50
52
|
export const ON_SWITCH_CHANGED_EVENT = 'change';
|
|
53
|
+
|
|
54
|
+
export type DefaultProps = ComponentDefaultPropsGeneric<SwitchProps, 'labelPlacement' | 'checked' | 'required' | 'value' | 'disabled'>;
|
|
55
|
+
export const defaultProps: DefaultProps = {
|
|
56
|
+
labelPlacement: 'leading',
|
|
57
|
+
checked: false,
|
|
58
|
+
required: false,
|
|
59
|
+
value: 'on',
|
|
60
|
+
disabled: false,
|
|
61
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from '@justeattakeaway/pie-webc-core';
|
|
8
8
|
import styles from './switch.scss?inline';
|
|
9
9
|
import {
|
|
10
|
-
SwitchProps, AriaProps, labelPlacements,
|
|
10
|
+
SwitchProps, AriaProps, labelPlacements, defaultProps,
|
|
11
11
|
} from './defs';
|
|
12
12
|
import 'element-internals-polyfill';
|
|
13
13
|
import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
|
|
@@ -45,26 +45,26 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
45
45
|
public label?: string;
|
|
46
46
|
|
|
47
47
|
@property({ type: String })
|
|
48
|
-
@validPropertyValues(componentSelector, labelPlacements,
|
|
49
|
-
public labelPlacement: SwitchProps['labelPlacement'] =
|
|
48
|
+
@validPropertyValues(componentSelector, labelPlacements, defaultProps.labelPlacement)
|
|
49
|
+
public labelPlacement: SwitchProps['labelPlacement'] = defaultProps.labelPlacement;
|
|
50
50
|
|
|
51
51
|
@property({ type: Object })
|
|
52
52
|
public aria!: AriaProps;
|
|
53
53
|
|
|
54
54
|
@property({ type: Boolean, reflect: true })
|
|
55
|
-
public checked =
|
|
55
|
+
public checked = defaultProps.checked;
|
|
56
56
|
|
|
57
57
|
@property({ type: Boolean, reflect: true })
|
|
58
|
-
public required =
|
|
58
|
+
public required = defaultProps.required;
|
|
59
59
|
|
|
60
60
|
@property({ type: String })
|
|
61
|
-
public value =
|
|
61
|
+
public value = defaultProps.value;
|
|
62
62
|
|
|
63
63
|
@property({ type: String })
|
|
64
64
|
public name?: string;
|
|
65
65
|
|
|
66
66
|
@property({ type: Boolean, reflect: true })
|
|
67
|
-
public disabled =
|
|
67
|
+
public disabled = defaultProps.disabled;
|
|
68
68
|
|
|
69
69
|
@query('label')
|
|
70
70
|
public focusTarget!: HTMLElement;
|