@justeattakeaway/pie-switch 0.29.5 → 0.29.7
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 +3 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +269 -268
- package/dist/react.d.ts +2 -2
- package/package.json +2 -2
- package/src/index.ts +3 -3
package/custom-elements.json
CHANGED
|
@@ -166,7 +166,8 @@
|
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"kind": "method",
|
|
169
|
-
"name": "
|
|
169
|
+
"name": "handleChange",
|
|
170
|
+
"privacy": "private",
|
|
170
171
|
"parameters": [
|
|
171
172
|
{
|
|
172
173
|
"name": "event",
|
|
@@ -176,7 +177,7 @@
|
|
|
176
177
|
"description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`."
|
|
177
178
|
}
|
|
178
179
|
],
|
|
179
|
-
"description": "The
|
|
180
|
+
"description": "The handleChange function updates the checkbox state and emits an event for consumers."
|
|
180
181
|
},
|
|
181
182
|
{
|
|
182
183
|
"kind": "method",
|
package/dist/index.d.ts
CHANGED
|
@@ -51,10 +51,10 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
|
|
|
51
51
|
*/
|
|
52
52
|
private handleFormAssociation;
|
|
53
53
|
/**
|
|
54
|
-
* The
|
|
54
|
+
* The handleChange function updates the checkbox state and emits an event for consumers.
|
|
55
55
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
56
56
|
*/
|
|
57
|
-
|
|
57
|
+
private handleChange;
|
|
58
58
|
/**
|
|
59
59
|
* Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
|
|
60
60
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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
7
|
labelPlacement: "leading",
|
|
8
8
|
checked: !1,
|
|
9
9
|
required: !1,
|
|
@@ -11,8 +11,8 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
11
11
|
disabled: !1
|
|
12
12
|
};
|
|
13
13
|
(function() {
|
|
14
|
-
(function(
|
|
15
|
-
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 = {
|
|
16
16
|
ariaAtomic: "aria-atomic",
|
|
17
17
|
ariaAutoComplete: "aria-autocomplete",
|
|
18
18
|
ariaBusy: "aria-busy",
|
|
@@ -22,6 +22,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
22
22
|
ariaColIndexText: "aria-colindextext",
|
|
23
23
|
ariaColSpan: "aria-colspan",
|
|
24
24
|
ariaCurrent: "aria-current",
|
|
25
|
+
ariaDescription: "aria-description",
|
|
25
26
|
ariaDisabled: "aria-disabled",
|
|
26
27
|
ariaExpanded: "aria-expanded",
|
|
27
28
|
ariaHasPopup: "aria-haspopup",
|
|
@@ -54,261 +55,261 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
54
55
|
ariaValueNow: "aria-valuenow",
|
|
55
56
|
ariaValueText: "aria-valuetext",
|
|
56
57
|
role: "role"
|
|
57
|
-
},
|
|
58
|
-
for (let i in
|
|
59
|
-
|
|
58
|
+
}, de = (t, e) => {
|
|
59
|
+
for (let i in T) {
|
|
60
|
+
e[i] = null;
|
|
60
61
|
let a = null;
|
|
61
|
-
const r =
|
|
62
|
-
Object.defineProperty(
|
|
62
|
+
const r = T[i];
|
|
63
|
+
Object.defineProperty(e, i, {
|
|
63
64
|
get() {
|
|
64
65
|
return a;
|
|
65
66
|
},
|
|
66
67
|
set(o) {
|
|
67
|
-
a = o,
|
|
68
|
+
a = o, t.isConnected ? t.setAttribute(r, o) : I.set(t, e);
|
|
68
69
|
}
|
|
69
70
|
});
|
|
70
71
|
}
|
|
71
72
|
};
|
|
72
|
-
function
|
|
73
|
-
const
|
|
74
|
-
Z(
|
|
73
|
+
function K(t) {
|
|
74
|
+
const e = c.get(t), { form: i } = e;
|
|
75
|
+
Z(t, i, e), X(t, e.labels);
|
|
75
76
|
}
|
|
76
|
-
const G = (
|
|
77
|
-
const i = document.createTreeWalker(
|
|
77
|
+
const G = (t, e = !1) => {
|
|
78
|
+
const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
|
|
78
79
|
acceptNode(o) {
|
|
79
|
-
return
|
|
80
|
+
return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
80
81
|
}
|
|
81
82
|
});
|
|
82
83
|
let a = i.nextNode();
|
|
83
|
-
const r = !
|
|
84
|
+
const r = !e || t.disabled;
|
|
84
85
|
for (; a; )
|
|
85
|
-
a.formDisabledCallback && r &&
|
|
86
|
-
}, Y = { attributes: !0, attributeFilter: ["disabled", "name"] },
|
|
87
|
-
for (const
|
|
88
|
-
const i =
|
|
89
|
-
if (
|
|
90
|
-
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);
|
|
91
92
|
a.setFormValue(r);
|
|
92
93
|
}
|
|
93
94
|
}
|
|
94
95
|
}) : {};
|
|
95
|
-
function
|
|
96
|
-
|
|
97
|
-
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);
|
|
98
99
|
r.forEach((s) => {
|
|
99
100
|
var u;
|
|
100
|
-
if (
|
|
101
|
-
const d =
|
|
102
|
-
Object.keys(
|
|
103
|
-
s.setAttribute(
|
|
104
|
-
}),
|
|
101
|
+
if (c.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
|
|
102
|
+
const d = I.get(s);
|
|
103
|
+
Object.keys(T).filter((f) => d[f] !== null).forEach((f) => {
|
|
104
|
+
s.setAttribute(T[f], d[f]);
|
|
105
|
+
}), I.delete(s);
|
|
105
106
|
}
|
|
106
|
-
if (
|
|
107
|
-
const d =
|
|
108
|
-
s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()),
|
|
107
|
+
if (S.has(s)) {
|
|
108
|
+
const d = S.get(s);
|
|
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);
|
|
109
110
|
}
|
|
110
111
|
if (s.localName === "form") {
|
|
111
|
-
const d = y.get(s),
|
|
112
|
+
const d = y.get(s), v = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
|
|
112
113
|
acceptNode(W) {
|
|
113
|
-
return
|
|
114
|
+
return c.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
114
115
|
}
|
|
115
116
|
});
|
|
116
|
-
let f =
|
|
117
|
+
let f = v.nextNode();
|
|
117
118
|
for (; f; )
|
|
118
|
-
|
|
119
|
+
K(f), f = v.nextNode();
|
|
119
120
|
}
|
|
120
|
-
s.localName === "fieldset" && ((u =
|
|
121
|
+
s.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, s, Y), G(s, !0));
|
|
121
122
|
}), o.forEach((s) => {
|
|
122
|
-
const u =
|
|
123
|
+
const u = c.get(s);
|
|
123
124
|
u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
|
|
124
125
|
});
|
|
125
126
|
});
|
|
126
127
|
}
|
|
127
|
-
function
|
|
128
|
-
|
|
129
|
-
const { removedNodes: i } =
|
|
128
|
+
function he(t) {
|
|
129
|
+
t.forEach((e) => {
|
|
130
|
+
const { removedNodes: i } = e;
|
|
130
131
|
i.forEach((a) => {
|
|
131
|
-
const r = U.get(
|
|
132
|
-
|
|
132
|
+
const r = U.get(e.target);
|
|
133
|
+
c.has(a) && te(a), r.disconnect();
|
|
133
134
|
});
|
|
134
135
|
});
|
|
135
136
|
}
|
|
136
|
-
const
|
|
137
|
-
var
|
|
138
|
-
const
|
|
139
|
-
(
|
|
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);
|
|
140
141
|
};
|
|
141
|
-
|
|
142
|
-
const
|
|
142
|
+
P() && new MutationObserver(O);
|
|
143
|
+
const _ = {
|
|
143
144
|
childList: !0,
|
|
144
145
|
subtree: !0
|
|
145
|
-
},
|
|
146
|
-
|
|
147
|
-
}, J = (
|
|
148
|
-
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) => {
|
|
149
150
|
i.remove();
|
|
150
|
-
}), h.set(
|
|
151
|
-
}, Q = (
|
|
151
|
+
}), h.set(t, []);
|
|
152
|
+
}, Q = (t, e) => {
|
|
152
153
|
const i = document.createElement("input");
|
|
153
|
-
return i.type = "hidden", i.name =
|
|
154
|
-
},
|
|
154
|
+
return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
|
|
155
|
+
}, pe = (t, e) => {
|
|
155
156
|
var i;
|
|
156
|
-
h.set(
|
|
157
|
-
}, X = (
|
|
158
|
-
if (
|
|
159
|
-
Array.from(
|
|
160
|
-
let i =
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
}, L = (
|
|
164
|
-
const
|
|
165
|
-
|
|
166
|
-
},
|
|
167
|
-
L(
|
|
168
|
-
},
|
|
169
|
-
L(
|
|
170
|
-
},
|
|
171
|
-
const
|
|
172
|
-
|
|
173
|
-
if (i.target.closest(
|
|
174
|
-
const r = y.get(
|
|
175
|
-
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)
|
|
176
177
|
return;
|
|
177
|
-
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();
|
|
178
179
|
}
|
|
179
180
|
});
|
|
180
|
-
},
|
|
181
|
-
const
|
|
182
|
-
|
|
181
|
+
}, be = (t) => {
|
|
182
|
+
const e = y.get(t.target);
|
|
183
|
+
e && e.size && e.forEach((i) => {
|
|
183
184
|
i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
|
|
184
185
|
});
|
|
185
|
-
}, Z = (
|
|
186
|
-
if (
|
|
187
|
-
const a = y.get(
|
|
186
|
+
}, Z = (t, e, i) => {
|
|
187
|
+
if (e) {
|
|
188
|
+
const a = y.get(e);
|
|
188
189
|
if (a)
|
|
189
|
-
a.add(
|
|
190
|
+
a.add(t);
|
|
190
191
|
else {
|
|
191
192
|
const r = /* @__PURE__ */ new Set();
|
|
192
|
-
r.add(
|
|
193
|
+
r.add(t), y.set(e, r), we(e), e.addEventListener("reset", be), e.addEventListener("input", fe), e.addEventListener("change", me);
|
|
193
194
|
}
|
|
194
|
-
k.set(
|
|
195
|
-
|
|
196
|
-
}, 0), L(
|
|
197
|
-
}
|
|
198
|
-
},
|
|
199
|
-
let
|
|
200
|
-
return
|
|
201
|
-
}, b = (
|
|
202
|
-
if (!
|
|
203
|
-
throw new i(
|
|
204
|
-
},
|
|
205
|
-
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);
|
|
206
207
|
return a && a.size && a.forEach((r) => {
|
|
207
|
-
|
|
208
|
-
}),
|
|
209
|
-
},
|
|
210
|
-
if (
|
|
211
|
-
const
|
|
212
|
-
X(
|
|
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);
|
|
213
214
|
}
|
|
214
215
|
};
|
|
215
|
-
function
|
|
216
|
+
function P() {
|
|
216
217
|
return typeof MutationObserver < "u";
|
|
217
218
|
}
|
|
218
|
-
class
|
|
219
|
+
class ve {
|
|
219
220
|
constructor() {
|
|
220
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);
|
|
221
222
|
}
|
|
222
223
|
}
|
|
223
|
-
const
|
|
224
|
-
let
|
|
225
|
-
for (let i in
|
|
226
|
-
i !== "valid" &&
|
|
227
|
-
return
|
|
228
|
-
},
|
|
229
|
-
function
|
|
230
|
-
|
|
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);
|
|
231
232
|
}
|
|
232
|
-
class
|
|
233
|
+
class D extends Set {
|
|
233
234
|
static get isPolyfilled() {
|
|
234
235
|
return !0;
|
|
235
236
|
}
|
|
236
|
-
constructor(
|
|
237
|
-
if (super(), !
|
|
237
|
+
constructor(e) {
|
|
238
|
+
if (super(), !e || !e.tagName || e.tagName.indexOf("-") === -1)
|
|
238
239
|
throw new TypeError("Illegal constructor");
|
|
239
|
-
|
|
240
|
-
}
|
|
241
|
-
add(
|
|
242
|
-
if (!/^--/.test(
|
|
243
|
-
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${
|
|
244
|
-
const i = super.add(
|
|
245
|
-
return a.isConnected ?
|
|
246
|
-
|
|
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);
|
|
247
248
|
}), i;
|
|
248
249
|
}
|
|
249
250
|
clear() {
|
|
250
|
-
for (let [
|
|
251
|
-
this.delete(
|
|
251
|
+
for (let [e] of this.entries())
|
|
252
|
+
this.delete(e);
|
|
252
253
|
super.clear();
|
|
253
254
|
}
|
|
254
|
-
delete(
|
|
255
|
-
const i = super.delete(
|
|
256
|
-
return a.isConnected ? (a.toggleAttribute(`state${
|
|
257
|
-
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}`);
|
|
258
259
|
}), i;
|
|
259
260
|
}
|
|
260
261
|
}
|
|
261
|
-
function
|
|
262
|
+
function ae(t, e, i, a) {
|
|
262
263
|
if (i === "a" && !a)
|
|
263
264
|
throw new TypeError("Private accessor was defined without a getter");
|
|
264
|
-
if (typeof
|
|
265
|
+
if (typeof e == "function" ? t !== e || !a : !e.has(t))
|
|
265
266
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
266
|
-
return i === "m" ? a : i === "a" ? a.call(
|
|
267
|
+
return i === "m" ? a : i === "a" ? a.call(t) : a ? a.value : e.get(t);
|
|
267
268
|
}
|
|
268
|
-
function
|
|
269
|
+
function ke(t, e, i, a, r) {
|
|
269
270
|
if (a === "m")
|
|
270
271
|
throw new TypeError("Private method is not writable");
|
|
271
272
|
if (a === "a" && !r)
|
|
272
273
|
throw new TypeError("Private accessor was defined without a setter");
|
|
273
|
-
if (typeof
|
|
274
|
+
if (typeof e == "function" ? t !== e || !r : !e.has(t))
|
|
274
275
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
275
|
-
return a === "a" ? r.call(
|
|
276
|
+
return a === "a" ? r.call(t, i) : r ? r.value = i : e.set(t, i), i;
|
|
276
277
|
}
|
|
277
|
-
var
|
|
278
|
-
class
|
|
279
|
-
constructor(
|
|
280
|
-
|
|
281
|
-
for (let i = 0; i <
|
|
282
|
-
let a =
|
|
278
|
+
var F;
|
|
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];
|
|
283
284
|
this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
|
|
284
285
|
}
|
|
285
286
|
Object.freeze(this);
|
|
286
287
|
}
|
|
287
288
|
get length() {
|
|
288
|
-
return
|
|
289
|
+
return ae(this, F, "f").length;
|
|
289
290
|
}
|
|
290
|
-
[(
|
|
291
|
-
return
|
|
291
|
+
[(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
292
|
+
return ae(this, F, "f")[Symbol.iterator]();
|
|
292
293
|
}
|
|
293
|
-
item(
|
|
294
|
-
return this[
|
|
294
|
+
item(e) {
|
|
295
|
+
return this[e] == null ? null : this[e];
|
|
295
296
|
}
|
|
296
|
-
namedItem(
|
|
297
|
-
return this[
|
|
297
|
+
namedItem(e) {
|
|
298
|
+
return this[e] == null ? null : this[e];
|
|
298
299
|
}
|
|
299
300
|
}
|
|
300
|
-
function
|
|
301
|
-
const
|
|
301
|
+
function Ce() {
|
|
302
|
+
const t = HTMLFormElement.prototype.checkValidity;
|
|
302
303
|
HTMLFormElement.prototype.checkValidity = i;
|
|
303
|
-
const
|
|
304
|
+
const e = HTMLFormElement.prototype.reportValidity;
|
|
304
305
|
HTMLFormElement.prototype.reportValidity = a;
|
|
305
306
|
function i(...o) {
|
|
306
|
-
let s =
|
|
307
|
-
return
|
|
307
|
+
let s = t.apply(this, o);
|
|
308
|
+
return ee(this, s, "checkValidity");
|
|
308
309
|
}
|
|
309
310
|
function a(...o) {
|
|
310
|
-
let s =
|
|
311
|
-
return
|
|
311
|
+
let s = e.apply(this, o);
|
|
312
|
+
return ee(this, s, "reportValidity");
|
|
312
313
|
}
|
|
313
314
|
const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
|
|
314
315
|
Object.defineProperty(HTMLFormElement.prototype, "elements", {
|
|
@@ -316,117 +317,117 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
316
317
|
const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
|
|
317
318
|
if (u.length === 0)
|
|
318
319
|
return s;
|
|
319
|
-
const d = Array.from(s).concat(u).sort((
|
|
320
|
-
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);
|
|
321
322
|
}
|
|
322
323
|
});
|
|
323
324
|
}
|
|
324
|
-
class
|
|
325
|
+
class re {
|
|
325
326
|
static get isPolyfilled() {
|
|
326
327
|
return !0;
|
|
327
328
|
}
|
|
328
|
-
constructor(
|
|
329
|
-
if (!
|
|
329
|
+
constructor(e) {
|
|
330
|
+
if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
|
|
330
331
|
throw new TypeError("Illegal constructor");
|
|
331
|
-
const i =
|
|
332
|
-
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);
|
|
333
334
|
}
|
|
334
335
|
checkValidity() {
|
|
335
|
-
const
|
|
336
|
-
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)
|
|
337
338
|
return !0;
|
|
338
|
-
const i =
|
|
339
|
+
const i = l.get(this);
|
|
339
340
|
if (!i.valid) {
|
|
340
341
|
const a = new Event("invalid", {
|
|
341
342
|
bubbles: !1,
|
|
342
343
|
cancelable: !0,
|
|
343
344
|
composed: !1
|
|
344
345
|
});
|
|
345
|
-
|
|
346
|
+
e.dispatchEvent(a);
|
|
346
347
|
}
|
|
347
348
|
return i.valid;
|
|
348
349
|
}
|
|
349
350
|
get form() {
|
|
350
|
-
const
|
|
351
|
-
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.");
|
|
352
353
|
let i;
|
|
353
|
-
return
|
|
354
|
+
return e.constructor.formAssociated === !0 && (i = N(e)), i;
|
|
354
355
|
}
|
|
355
356
|
get labels() {
|
|
356
|
-
const
|
|
357
|
-
b(
|
|
358
|
-
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();
|
|
359
360
|
return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
|
|
360
361
|
}
|
|
361
362
|
reportValidity() {
|
|
362
|
-
const
|
|
363
|
-
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)
|
|
364
365
|
return !0;
|
|
365
366
|
const i = this.checkValidity(), a = B.get(this);
|
|
366
|
-
if (a && !
|
|
367
|
+
if (a && !e.constructor.formAssociated)
|
|
367
368
|
throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
|
|
368
|
-
return !i && a && (
|
|
369
|
+
return !i && a && (e.focus(), a.focus()), i;
|
|
369
370
|
}
|
|
370
|
-
setFormValue(
|
|
371
|
+
setFormValue(e) {
|
|
371
372
|
const i = n.get(this);
|
|
372
|
-
if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this),
|
|
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)) {
|
|
373
374
|
if (i.getAttribute("name")) {
|
|
374
375
|
const a = Q(i, this);
|
|
375
|
-
a.value =
|
|
376
|
+
a.value = e;
|
|
376
377
|
}
|
|
377
378
|
} else
|
|
378
|
-
|
|
379
|
+
e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
|
|
379
380
|
if (typeof r == "string") {
|
|
380
381
|
const o = Q(i, this);
|
|
381
382
|
o.name = a, o.value = r;
|
|
382
383
|
}
|
|
383
384
|
});
|
|
384
|
-
z.set(i,
|
|
385
|
+
z.set(i, e);
|
|
385
386
|
}
|
|
386
|
-
setValidity(
|
|
387
|
+
setValidity(e, i, a) {
|
|
387
388
|
const r = n.get(this);
|
|
388
|
-
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)
|
|
389
390
|
throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
|
|
390
391
|
B.set(this, a);
|
|
391
|
-
const o =
|
|
392
|
-
for (const
|
|
393
|
-
s[
|
|
394
|
-
Object.keys(s).length === 0 &&
|
|
395
|
-
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);
|
|
396
397
|
delete u.valid;
|
|
397
|
-
const { valid: d } =
|
|
398
|
+
const { valid: d } = ye(o, u, this.form);
|
|
398
399
|
if (!d && !i)
|
|
399
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.");
|
|
400
|
-
w.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) :
|
|
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);
|
|
401
402
|
}
|
|
402
403
|
get shadowRoot() {
|
|
403
|
-
const
|
|
404
|
+
const e = n.get(this), i = q.get(e);
|
|
404
405
|
return i || null;
|
|
405
406
|
}
|
|
406
407
|
get validationMessage() {
|
|
407
|
-
const
|
|
408
|
-
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);
|
|
409
410
|
}
|
|
410
411
|
get validity() {
|
|
411
|
-
const
|
|
412
|
-
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);
|
|
413
414
|
}
|
|
414
415
|
get willValidate() {
|
|
415
|
-
const
|
|
416
|
-
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"));
|
|
417
418
|
}
|
|
418
419
|
}
|
|
419
|
-
function
|
|
420
|
+
function xe() {
|
|
420
421
|
if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
|
|
421
422
|
return !1;
|
|
422
|
-
class
|
|
423
|
+
class t extends HTMLElement {
|
|
423
424
|
constructor() {
|
|
424
425
|
super(), this.internals = this.attachInternals();
|
|
425
426
|
}
|
|
426
427
|
}
|
|
427
|
-
const
|
|
428
|
-
customElements.define(
|
|
429
|
-
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();
|
|
430
431
|
return [
|
|
431
432
|
"shadowRoot",
|
|
432
433
|
"form",
|
|
@@ -440,25 +441,25 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
440
441
|
"reportValidity"
|
|
441
442
|
].every((a) => a in i.internals);
|
|
442
443
|
}
|
|
443
|
-
let
|
|
444
|
-
function
|
|
445
|
-
|
|
446
|
-
const i =
|
|
447
|
-
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;
|
|
448
449
|
}));
|
|
449
450
|
}
|
|
450
|
-
function
|
|
451
|
-
if (!
|
|
452
|
-
if (
|
|
453
|
-
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;
|
|
454
455
|
CustomElementRegistry.prototype.define = function(i, a, r) {
|
|
455
456
|
if (a.formAssociated) {
|
|
456
457
|
const o = a.prototype.connectedCallback;
|
|
457
458
|
a.prototype.connectedCallback = function() {
|
|
458
|
-
|
|
459
|
+
j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), o != null && o.apply(this), te(this);
|
|
459
460
|
};
|
|
460
461
|
}
|
|
461
|
-
|
|
462
|
+
e.call(this, i, a, r);
|
|
462
463
|
};
|
|
463
464
|
}
|
|
464
465
|
if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
|
|
@@ -467,40 +468,40 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
|
|
|
467
468
|
throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
|
|
468
469
|
} else
|
|
469
470
|
return {};
|
|
470
|
-
if (
|
|
471
|
+
if (c.has(this))
|
|
471
472
|
throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
|
|
472
|
-
return new
|
|
473
|
+
return new re(this);
|
|
473
474
|
}), typeof Element < "u") {
|
|
474
|
-
let
|
|
475
|
+
let e = function(...a) {
|
|
475
476
|
const r = i.apply(this, a);
|
|
476
|
-
if (q.set(this, r),
|
|
477
|
-
const o = new MutationObserver(
|
|
478
|
-
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);
|
|
479
480
|
}
|
|
480
481
|
return r;
|
|
481
482
|
};
|
|
482
483
|
const i = Element.prototype.attachShadow;
|
|
483
|
-
Element.prototype.attachShadow =
|
|
484
|
+
Element.prototype.attachShadow = e;
|
|
484
485
|
}
|
|
485
|
-
|
|
486
|
+
P() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
|
|
486
487
|
}
|
|
487
488
|
}
|
|
488
|
-
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;
|
|
489
490
|
})({});
|
|
490
491
|
})();
|
|
491
|
-
var
|
|
492
|
-
for (var
|
|
493
|
-
(k =
|
|
494
|
-
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;
|
|
495
496
|
};
|
|
496
|
-
const
|
|
497
|
-
class p extends
|
|
497
|
+
const ce = "pie-switch";
|
|
498
|
+
class p extends Ie(Se(Fe)) {
|
|
498
499
|
constructor() {
|
|
499
|
-
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;
|
|
500
501
|
}
|
|
501
502
|
firstUpdated(n) {
|
|
502
|
-
var
|
|
503
|
-
super.firstUpdated(n), this.handleFormAssociation(), (
|
|
503
|
+
var l;
|
|
504
|
+
super.firstUpdated(n), this.handleFormAssociation(), (l = this.input) == null || l.addEventListener("invalid", (h) => {
|
|
504
505
|
this.dispatchEvent(new Event("invalid", h));
|
|
505
506
|
});
|
|
506
507
|
}
|
|
@@ -514,13 +515,13 @@ class p extends It(St(Ft)) {
|
|
|
514
515
|
!!this._internals.form && !!this.name && !!this.value && (this.disabled ? (this._internals.setFormValue(null), this._internals.setValidity({})) : this.checked ? (this._internals.setFormValue(this.value), this._internals.setValidity({})) : (this._internals.setFormValue(null), this._internals.setValidity(this.validity, this.validationMessage, this.input)));
|
|
515
516
|
}
|
|
516
517
|
/**
|
|
517
|
-
* The
|
|
518
|
+
* The handleChange function updates the checkbox state and emits an event for consumers.
|
|
518
519
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
519
520
|
*/
|
|
520
|
-
|
|
521
|
-
const { checked:
|
|
522
|
-
this.checked =
|
|
523
|
-
const h =
|
|
521
|
+
handleChange(n) {
|
|
522
|
+
const { checked: l } = n == null ? void 0 : n.currentTarget;
|
|
523
|
+
this.checked = l;
|
|
524
|
+
const h = Te(n);
|
|
524
525
|
this.dispatchEvent(h), this.handleFormAssociation();
|
|
525
526
|
}
|
|
526
527
|
/**
|
|
@@ -544,8 +545,8 @@ class p extends It(St(Ft)) {
|
|
|
544
545
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
|
|
545
546
|
*/
|
|
546
547
|
setCustomValidity(n) {
|
|
547
|
-
var
|
|
548
|
-
(
|
|
548
|
+
var l;
|
|
549
|
+
(l = this.input) == null || l.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
|
|
549
550
|
}
|
|
550
551
|
/**
|
|
551
552
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -569,27 +570,27 @@ class p extends It(St(Ft)) {
|
|
|
569
570
|
* @private
|
|
570
571
|
*/
|
|
571
572
|
renderSwitchLabel() {
|
|
572
|
-
const { label: n, labelPlacement:
|
|
573
|
-
return n ?
|
|
574
|
-
<span data-test-id="switch-label-${
|
|
573
|
+
const { label: n, labelPlacement: l } = this;
|
|
574
|
+
return n ? A`
|
|
575
|
+
<span data-test-id="switch-label-${l}">
|
|
575
576
|
${n}
|
|
576
|
-
</span>` :
|
|
577
|
+
</span>` : A``;
|
|
577
578
|
}
|
|
578
579
|
render() {
|
|
579
580
|
const {
|
|
580
581
|
labelPlacement: n,
|
|
581
|
-
aria:
|
|
582
|
+
aria: l,
|
|
582
583
|
checked: h,
|
|
583
|
-
required:
|
|
584
|
+
required: c,
|
|
584
585
|
disabled: w,
|
|
585
586
|
isRTL: k
|
|
586
587
|
} = this, M = "switch-description";
|
|
587
|
-
return
|
|
588
|
+
return A`
|
|
588
589
|
<label
|
|
589
590
|
class="c-switch-wrapper"
|
|
590
591
|
?isRTL=${k}
|
|
591
592
|
?disabled=${w}>
|
|
592
|
-
${n === "leading" ? this.renderSwitchLabel() :
|
|
593
|
+
${n === "leading" ? this.renderSwitchLabel() : C}
|
|
593
594
|
<div
|
|
594
595
|
data-test-id="switch-component"
|
|
595
596
|
class="c-switch"
|
|
@@ -599,32 +600,32 @@ class p extends It(St(Ft)) {
|
|
|
599
600
|
role="switch"
|
|
600
601
|
type="checkbox"
|
|
601
602
|
class="c-switch-input"
|
|
602
|
-
.required=${
|
|
603
|
+
.required=${c}
|
|
603
604
|
.checked="${h}"
|
|
604
605
|
.disabled="${w}"
|
|
605
|
-
@change="${this.
|
|
606
|
-
aria-label="${(
|
|
607
|
-
aria-describedby="${
|
|
606
|
+
@change="${this.handleChange}"
|
|
607
|
+
aria-label="${(l == null ? void 0 : l.label) || C}"
|
|
608
|
+
aria-describedby="${l != null && l.describedBy ? M : C}">
|
|
608
609
|
<div class="c-switch-control">
|
|
609
|
-
${h ?
|
|
610
|
+
${h ? A`<icon-check></icon-check>` : C}
|
|
610
611
|
</div>
|
|
611
612
|
</div>
|
|
612
|
-
${n === "trailing" ? this.renderSwitchLabel() :
|
|
613
|
-
${
|
|
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}
|
|
614
615
|
</label>
|
|
615
616
|
`;
|
|
616
617
|
}
|
|
617
618
|
}
|
|
618
|
-
p.styles =
|
|
619
|
+
p.styles = Ae(Ne);
|
|
619
620
|
m([
|
|
620
|
-
|
|
621
|
+
le('input[type="checkbox"]')
|
|
621
622
|
], p.prototype, "input", 2);
|
|
622
623
|
m([
|
|
623
624
|
E({ type: String })
|
|
624
625
|
], p.prototype, "label", 2);
|
|
625
626
|
m([
|
|
626
627
|
E({ type: String }),
|
|
627
|
-
|
|
628
|
+
Ve(ce, Pe, x.labelPlacement)
|
|
628
629
|
], p.prototype, "labelPlacement", 2);
|
|
629
630
|
m([
|
|
630
631
|
E({ type: Object })
|
|
@@ -645,12 +646,12 @@ m([
|
|
|
645
646
|
E({ type: Boolean, reflect: !0 })
|
|
646
647
|
], p.prototype, "disabled", 2);
|
|
647
648
|
m([
|
|
648
|
-
|
|
649
|
+
le("label")
|
|
649
650
|
], p.prototype, "focusTarget", 2);
|
|
650
|
-
|
|
651
|
+
Le(ce, p);
|
|
651
652
|
export {
|
|
652
|
-
|
|
653
|
+
ze as ON_SWITCH_CHANGED_EVENT,
|
|
653
654
|
p as PieSwitch,
|
|
654
|
-
|
|
655
|
-
|
|
655
|
+
x as defaultProps,
|
|
656
|
+
Pe as labelPlacements
|
|
656
657
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -54,10 +54,10 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
|
|
|
54
54
|
*/
|
|
55
55
|
private handleFormAssociation;
|
|
56
56
|
/**
|
|
57
|
-
* The
|
|
57
|
+
* The handleChange function updates the checkbox state and emits an event for consumers.
|
|
58
58
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
59
59
|
*/
|
|
60
|
-
|
|
60
|
+
private handleChange;
|
|
61
61
|
/**
|
|
62
62
|
* Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.
|
|
63
63
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
|
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.7",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@justeattakeaway/pie-icons-webc": "0.24.0",
|
|
44
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/index.ts
CHANGED
|
@@ -91,10 +91,10 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
/**
|
|
94
|
-
* The
|
|
94
|
+
* The handleChange function updates the checkbox state and emits an event for consumers.
|
|
95
95
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
96
96
|
*/
|
|
97
|
-
|
|
97
|
+
private handleChange (event: Event) {
|
|
98
98
|
const { checked } = event?.currentTarget as HTMLInputElement;
|
|
99
99
|
this.checked = checked;
|
|
100
100
|
const changedEvent = wrapNativeEvent(event);
|
|
@@ -196,7 +196,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
196
196
|
.required=${required}
|
|
197
197
|
.checked="${checked}"
|
|
198
198
|
.disabled="${disabled}"
|
|
199
|
-
@change="${this.
|
|
199
|
+
@change="${this.handleChange}"
|
|
200
200
|
aria-label="${aria?.label || nothing}"
|
|
201
201
|
aria-describedby="${aria?.describedBy ? switchId : nothing}">
|
|
202
202
|
<div class="c-switch-control">
|