@justeattakeaway/pie-switch 0.22.2 → 0.23.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 +357 -0
- package/dist/index.d.ts +3 -6
- package/dist/index.js +36 -37
- package/dist/react.d.ts +3 -6
- package/package.json +12 -5
- package/src/index.ts +4 -13
- package/src/react.ts +17 -0
|
@@ -0,0 +1,357 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/defs.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "variable",
|
|
11
|
+
"name": "labelPlacements",
|
|
12
|
+
"type": {
|
|
13
|
+
"text": "['leading', 'trailing']"
|
|
14
|
+
},
|
|
15
|
+
"default": "['leading', 'trailing']"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"kind": "variable",
|
|
19
|
+
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
20
|
+
"type": {
|
|
21
|
+
"text": "string"
|
|
22
|
+
},
|
|
23
|
+
"default": "'change'",
|
|
24
|
+
"description": "Event name for when the switch checked state is changed."
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
"exports": [
|
|
28
|
+
{
|
|
29
|
+
"kind": "js",
|
|
30
|
+
"name": "labelPlacements",
|
|
31
|
+
"declaration": {
|
|
32
|
+
"name": "labelPlacements",
|
|
33
|
+
"module": "src/defs.js"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"kind": "js",
|
|
38
|
+
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
39
|
+
"declaration": {
|
|
40
|
+
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
41
|
+
"module": "src/defs.js"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"kind": "javascript-module",
|
|
48
|
+
"path": "src/index.js",
|
|
49
|
+
"declarations": [
|
|
50
|
+
{
|
|
51
|
+
"kind": "class",
|
|
52
|
+
"description": "",
|
|
53
|
+
"name": "PieSwitch",
|
|
54
|
+
"members": [
|
|
55
|
+
{
|
|
56
|
+
"kind": "field",
|
|
57
|
+
"name": "input",
|
|
58
|
+
"type": {
|
|
59
|
+
"text": "HTMLInputElement | undefined"
|
|
60
|
+
},
|
|
61
|
+
"privacy": "private"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"kind": "field",
|
|
65
|
+
"name": "label",
|
|
66
|
+
"type": {
|
|
67
|
+
"text": "string | undefined"
|
|
68
|
+
},
|
|
69
|
+
"privacy": "public",
|
|
70
|
+
"attribute": "label"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"kind": "field",
|
|
74
|
+
"name": "labelPlacement",
|
|
75
|
+
"type": {
|
|
76
|
+
"text": "SwitchProps['labelPlacement']"
|
|
77
|
+
},
|
|
78
|
+
"privacy": "public",
|
|
79
|
+
"default": "'leading'",
|
|
80
|
+
"attribute": "labelPlacement"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"kind": "field",
|
|
84
|
+
"name": "aria",
|
|
85
|
+
"type": {
|
|
86
|
+
"text": "AriaProps"
|
|
87
|
+
},
|
|
88
|
+
"privacy": "public",
|
|
89
|
+
"attribute": "aria"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "field",
|
|
93
|
+
"name": "checked",
|
|
94
|
+
"type": {
|
|
95
|
+
"text": "boolean"
|
|
96
|
+
},
|
|
97
|
+
"privacy": "public",
|
|
98
|
+
"default": "false",
|
|
99
|
+
"attribute": "checked",
|
|
100
|
+
"reflects": true
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"kind": "field",
|
|
104
|
+
"name": "required",
|
|
105
|
+
"type": {
|
|
106
|
+
"text": "boolean"
|
|
107
|
+
},
|
|
108
|
+
"privacy": "public",
|
|
109
|
+
"default": "false",
|
|
110
|
+
"attribute": "required",
|
|
111
|
+
"reflects": true
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"kind": "field",
|
|
115
|
+
"name": "value",
|
|
116
|
+
"type": {
|
|
117
|
+
"text": "string"
|
|
118
|
+
},
|
|
119
|
+
"privacy": "public",
|
|
120
|
+
"default": "'on'",
|
|
121
|
+
"attribute": "value"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"kind": "field",
|
|
125
|
+
"name": "name",
|
|
126
|
+
"type": {
|
|
127
|
+
"text": "string | undefined"
|
|
128
|
+
},
|
|
129
|
+
"privacy": "public",
|
|
130
|
+
"attribute": "name"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"kind": "field",
|
|
134
|
+
"name": "disabled",
|
|
135
|
+
"type": {
|
|
136
|
+
"text": "boolean"
|
|
137
|
+
},
|
|
138
|
+
"privacy": "public",
|
|
139
|
+
"default": "false",
|
|
140
|
+
"attribute": "disabled",
|
|
141
|
+
"reflects": true
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"kind": "method",
|
|
145
|
+
"name": "handleFormAssociation",
|
|
146
|
+
"privacy": "private",
|
|
147
|
+
"return": {
|
|
148
|
+
"type": {
|
|
149
|
+
"text": "void"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
"description": "Ensures that the form value and validation state are in sync with the component."
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "method",
|
|
156
|
+
"name": "onChange",
|
|
157
|
+
"parameters": [
|
|
158
|
+
{
|
|
159
|
+
"name": "event",
|
|
160
|
+
"type": {
|
|
161
|
+
"text": "Event"
|
|
162
|
+
},
|
|
163
|
+
"description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`."
|
|
164
|
+
}
|
|
165
|
+
],
|
|
166
|
+
"description": "The onChange function updates the checkbox state and emits an event for consumers."
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"kind": "method",
|
|
170
|
+
"name": "checkValidity",
|
|
171
|
+
"privacy": "public",
|
|
172
|
+
"return": {
|
|
173
|
+
"type": {
|
|
174
|
+
"text": ""
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
"description": "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.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity"
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"kind": "method",
|
|
181
|
+
"name": "reportValidity",
|
|
182
|
+
"privacy": "public",
|
|
183
|
+
"return": {
|
|
184
|
+
"type": {
|
|
185
|
+
"text": ""
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
"description": "If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"kind": "method",
|
|
192
|
+
"name": "setCustomValidity",
|
|
193
|
+
"privacy": "public",
|
|
194
|
+
"return": {
|
|
195
|
+
"type": {
|
|
196
|
+
"text": "void"
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
"parameters": [
|
|
200
|
+
{
|
|
201
|
+
"name": "message",
|
|
202
|
+
"type": {
|
|
203
|
+
"text": "string"
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
],
|
|
207
|
+
"description": "Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity"
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "field",
|
|
211
|
+
"name": "validity",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "ValidityState"
|
|
214
|
+
},
|
|
215
|
+
"privacy": "public",
|
|
216
|
+
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
|
|
217
|
+
"readonly": true
|
|
218
|
+
},
|
|
219
|
+
{
|
|
220
|
+
"kind": "field",
|
|
221
|
+
"name": "validationMessage",
|
|
222
|
+
"type": {
|
|
223
|
+
"text": "string"
|
|
224
|
+
},
|
|
225
|
+
"privacy": "public",
|
|
226
|
+
"description": "(Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).\nThis string is empty if the component is valid.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage",
|
|
227
|
+
"readonly": true
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
"kind": "method",
|
|
231
|
+
"name": "renderSwitchLabel",
|
|
232
|
+
"privacy": "private",
|
|
233
|
+
"return": {
|
|
234
|
+
"type": {
|
|
235
|
+
"text": "TemplateResult"
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
"description": "Renders the label for a switch if provided.\nif invalid value is passed, nothing gets rendered"
|
|
239
|
+
}
|
|
240
|
+
],
|
|
241
|
+
"events": [
|
|
242
|
+
{
|
|
243
|
+
"name": "invalid",
|
|
244
|
+
"type": {
|
|
245
|
+
"text": "Event"
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"type": {
|
|
250
|
+
"text": "CustomEvent"
|
|
251
|
+
},
|
|
252
|
+
"description": "when the switch checked state is changed.",
|
|
253
|
+
"name": "change"
|
|
254
|
+
}
|
|
255
|
+
],
|
|
256
|
+
"attributes": [
|
|
257
|
+
{
|
|
258
|
+
"name": "label",
|
|
259
|
+
"type": {
|
|
260
|
+
"text": "string | undefined"
|
|
261
|
+
},
|
|
262
|
+
"fieldName": "label"
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"name": "labelPlacement",
|
|
266
|
+
"type": {
|
|
267
|
+
"text": "SwitchProps['labelPlacement']"
|
|
268
|
+
},
|
|
269
|
+
"default": "'leading'",
|
|
270
|
+
"fieldName": "labelPlacement"
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"name": "aria",
|
|
274
|
+
"type": {
|
|
275
|
+
"text": "AriaProps"
|
|
276
|
+
},
|
|
277
|
+
"fieldName": "aria"
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
"name": "checked",
|
|
281
|
+
"type": {
|
|
282
|
+
"text": "boolean"
|
|
283
|
+
},
|
|
284
|
+
"default": "false",
|
|
285
|
+
"fieldName": "checked"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "required",
|
|
289
|
+
"type": {
|
|
290
|
+
"text": "boolean"
|
|
291
|
+
},
|
|
292
|
+
"default": "false",
|
|
293
|
+
"fieldName": "required"
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"name": "value",
|
|
297
|
+
"type": {
|
|
298
|
+
"text": "string"
|
|
299
|
+
},
|
|
300
|
+
"default": "'on'",
|
|
301
|
+
"fieldName": "value"
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
"name": "name",
|
|
305
|
+
"type": {
|
|
306
|
+
"text": "string | undefined"
|
|
307
|
+
},
|
|
308
|
+
"fieldName": "name"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "disabled",
|
|
312
|
+
"type": {
|
|
313
|
+
"text": "boolean"
|
|
314
|
+
},
|
|
315
|
+
"default": "false",
|
|
316
|
+
"fieldName": "disabled"
|
|
317
|
+
}
|
|
318
|
+
],
|
|
319
|
+
"mixins": [
|
|
320
|
+
{
|
|
321
|
+
"name": "FormControlMixin",
|
|
322
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
"name": "RtlMixin",
|
|
326
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
327
|
+
}
|
|
328
|
+
],
|
|
329
|
+
"superclass": {
|
|
330
|
+
"name": "LitElement",
|
|
331
|
+
"package": "lit"
|
|
332
|
+
},
|
|
333
|
+
"tagName": "pie-switch",
|
|
334
|
+
"customElement": true
|
|
335
|
+
}
|
|
336
|
+
],
|
|
337
|
+
"exports": [
|
|
338
|
+
{
|
|
339
|
+
"kind": "js",
|
|
340
|
+
"name": "*",
|
|
341
|
+
"declaration": {
|
|
342
|
+
"name": "*",
|
|
343
|
+
"package": "./defs"
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"kind": "js",
|
|
348
|
+
"name": "PieSwitch",
|
|
349
|
+
"declaration": {
|
|
350
|
+
"name": "PieSwitch",
|
|
351
|
+
"module": "src/index.js"
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
]
|
|
355
|
+
}
|
|
356
|
+
]
|
|
357
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
|
+
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
2
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
3
4
|
import type { LitElement } from 'lit';
|
|
4
5
|
import type { PropertyValues } from 'lit';
|
|
6
|
+
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
5
7
|
import type { TemplateResult } from 'lit';
|
|
6
8
|
|
|
7
9
|
export declare type AriaProps = {
|
|
@@ -25,10 +27,7 @@ export declare const ON_SWITCH_CHANGED_EVENT = "change";
|
|
|
25
27
|
* @event {CustomEvent} change - when the switch checked state is changed.
|
|
26
28
|
*/
|
|
27
29
|
export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
|
|
28
|
-
static formAssociated: boolean;
|
|
29
|
-
private readonly _internals;
|
|
30
30
|
private input?;
|
|
31
|
-
constructor();
|
|
32
31
|
protected firstUpdated(_changedProperties: PropertyValues<this>): void;
|
|
33
32
|
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
34
33
|
label?: string;
|
|
@@ -87,9 +86,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
|
|
|
87
86
|
render(): TemplateResult<1>;
|
|
88
87
|
}
|
|
89
88
|
|
|
90
|
-
declare const PieSwitch_base: GenericConstructor<
|
|
91
|
-
isRTL: boolean;
|
|
92
|
-
}> & typeof LitElement;
|
|
89
|
+
declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
|
|
93
90
|
|
|
94
91
|
export declare interface SwitchProps {
|
|
95
92
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as vt, html as
|
|
1
|
+
import { LitElement as vt, html as C, nothing as x, unsafeCSS as yt } from "lit";
|
|
2
2
|
import { query as Et, property as k } from "lit/decorators.js";
|
|
3
|
-
import {
|
|
3
|
+
import { FormControlMixin as kt, RtlMixin as Mt, validPropertyValues as xt, defineCustomElement as Ft } from "@justeattakeaway/pie-webc-core";
|
|
4
4
|
import "@justeattakeaway/pie-icons-webc/IconCheck";
|
|
5
|
-
const
|
|
6
|
-
`,
|
|
5
|
+
const Ct = `*,*:before,*:after{box-sizing:border-box;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
|
+
`, At = ["leading", "trailing"], It = "change";
|
|
7
7
|
(function() {
|
|
8
|
-
const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(),
|
|
8
|
+
const h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), V = {
|
|
9
9
|
ariaAtomic: "aria-atomic",
|
|
10
10
|
ariaAutoComplete: "aria-autocomplete",
|
|
11
11
|
ariaBusy: "aria-busy",
|
|
@@ -57,7 +57,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
57
57
|
return a;
|
|
58
58
|
},
|
|
59
59
|
set(n) {
|
|
60
|
-
a = n, i.isConnected ? i.setAttribute(r, n) :
|
|
60
|
+
a = n, i.isConnected ? i.setAttribute(r, n) : A.set(i, t);
|
|
61
61
|
}
|
|
62
62
|
});
|
|
63
63
|
}
|
|
@@ -90,11 +90,11 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
90
90
|
const { addedNodes: e, removedNodes: a } = t, r = Array.from(e), n = Array.from(a);
|
|
91
91
|
r.forEach((o) => {
|
|
92
92
|
var u;
|
|
93
|
-
if (l.has(o) && o.constructor.formAssociated && B(o),
|
|
94
|
-
const d =
|
|
93
|
+
if (l.has(o) && o.constructor.formAssociated && B(o), A.has(o)) {
|
|
94
|
+
const d = A.get(o);
|
|
95
95
|
Object.keys(V).filter((w) => d[w] !== null).forEach((w) => {
|
|
96
96
|
o.setAttribute(V[w], d[w]);
|
|
97
|
-
}),
|
|
97
|
+
}), A.delete(o);
|
|
98
98
|
}
|
|
99
99
|
if (I.has(o)) {
|
|
100
100
|
const d = I.get(o);
|
|
@@ -102,8 +102,8 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
102
102
|
}
|
|
103
103
|
if (o.localName === "form") {
|
|
104
104
|
const d = m.get(o), v = document.createTreeWalker(o, NodeFilter.SHOW_ELEMENT, {
|
|
105
|
-
acceptNode(
|
|
106
|
-
return l.has(
|
|
105
|
+
acceptNode(_) {
|
|
106
|
+
return l.has(_) && _.constructor.formAssociated && !(d && d.has(_)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
107
107
|
}
|
|
108
108
|
});
|
|
109
109
|
let w = v.nextNode();
|
|
@@ -218,7 +218,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
218
218
|
for (let e in i)
|
|
219
219
|
e !== "valid" && i[e] !== !1 && (t = !1);
|
|
220
220
|
return t;
|
|
221
|
-
},
|
|
221
|
+
}, O = /* @__PURE__ */ new WeakMap();
|
|
222
222
|
function Z(i, t) {
|
|
223
223
|
i.toggleAttribute(t, !0), i.part && i.part.add(t);
|
|
224
224
|
}
|
|
@@ -229,12 +229,12 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
229
229
|
constructor(t) {
|
|
230
230
|
if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
|
|
231
231
|
throw new TypeError("Illegal constructor");
|
|
232
|
-
|
|
232
|
+
O.set(this, t);
|
|
233
233
|
}
|
|
234
234
|
add(t) {
|
|
235
235
|
if (!/^--/.test(t) || typeof t != "string")
|
|
236
236
|
throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
|
|
237
|
-
const e = super.add(t), a =
|
|
237
|
+
const e = super.add(t), a = O.get(this), r = `state${t}`;
|
|
238
238
|
return a.isConnected ? Z(a, r) : setTimeout(() => {
|
|
239
239
|
Z(a, r);
|
|
240
240
|
}), e;
|
|
@@ -245,7 +245,7 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
245
245
|
super.clear();
|
|
246
246
|
}
|
|
247
247
|
delete(t) {
|
|
248
|
-
const e = super.delete(t), a =
|
|
248
|
+
const e = super.delete(t), a = O.get(this);
|
|
249
249
|
return a.isConnected ? (a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`)) : setTimeout(() => {
|
|
250
250
|
a.toggleAttribute(`state${t}`, !1), a.part && a.part.remove(`state${t}`);
|
|
251
251
|
}), e;
|
|
@@ -267,10 +267,10 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
267
267
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
268
268
|
return a === "a" ? r.call(i, e) : r ? r.value = e : t.set(i, e), e;
|
|
269
269
|
}
|
|
270
|
-
var
|
|
270
|
+
var F;
|
|
271
271
|
class wt {
|
|
272
272
|
constructor(t) {
|
|
273
|
-
|
|
273
|
+
F.set(this, void 0), ft(this, F, t, "f");
|
|
274
274
|
for (let e = 0; e < t.length; e++) {
|
|
275
275
|
let a = t[e];
|
|
276
276
|
this[e] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
|
|
@@ -278,10 +278,10 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
278
278
|
Object.freeze(this);
|
|
279
279
|
}
|
|
280
280
|
get length() {
|
|
281
|
-
return tt(this,
|
|
281
|
+
return tt(this, F, "f").length;
|
|
282
282
|
}
|
|
283
|
-
[(
|
|
284
|
-
return tt(this,
|
|
283
|
+
[(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
|
|
284
|
+
return tt(this, F, "f")[Symbol.iterator]();
|
|
285
285
|
}
|
|
286
286
|
item(t) {
|
|
287
287
|
return this[t] == null ? null : this[t];
|
|
@@ -479,15 +479,15 @@ const At = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wr
|
|
|
479
479
|
L() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, P), typeof HTMLFormElement < "u" && bt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = N);
|
|
480
480
|
}
|
|
481
481
|
})();
|
|
482
|
-
var
|
|
483
|
-
for (var p = l > 1 ? void 0 : l ?
|
|
482
|
+
var Vt = Object.defineProperty, Tt = Object.getOwnPropertyDescriptor, y = (h, c, s, l) => {
|
|
483
|
+
for (var p = l > 1 ? void 0 : l ? Tt(c, s) : c, E = h.length - 1, b; E >= 0; E--)
|
|
484
484
|
(b = h[E]) && (p = (l ? b(c, s, p) : b(p)) || p);
|
|
485
|
-
return l && p &&
|
|
485
|
+
return l && p && Vt(c, s, p), p;
|
|
486
486
|
};
|
|
487
487
|
const it = "pie-switch";
|
|
488
|
-
class f extends kt(vt) {
|
|
488
|
+
class f extends kt(Mt(vt)) {
|
|
489
489
|
constructor() {
|
|
490
|
-
super(), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1
|
|
490
|
+
super(...arguments), this.labelPlacement = "leading", this.checked = !1, this.required = !1, this.value = "on", this.disabled = !1;
|
|
491
491
|
}
|
|
492
492
|
firstUpdated(c) {
|
|
493
493
|
var s;
|
|
@@ -512,7 +512,7 @@ class f extends kt(vt) {
|
|
|
512
512
|
const { checked: s } = c == null ? void 0 : c.currentTarget;
|
|
513
513
|
this.checked = s;
|
|
514
514
|
const l = new CustomEvent(
|
|
515
|
-
|
|
515
|
+
It,
|
|
516
516
|
{
|
|
517
517
|
bubbles: !0,
|
|
518
518
|
composed: !0
|
|
@@ -567,12 +567,12 @@ class f extends kt(vt) {
|
|
|
567
567
|
*/
|
|
568
568
|
renderSwitchLabel() {
|
|
569
569
|
const { label: c, labelPlacement: s } = this;
|
|
570
|
-
return c ?
|
|
570
|
+
return c ? C`
|
|
571
571
|
<label
|
|
572
572
|
for="switch"
|
|
573
573
|
data-test-id="switch-label-${s}">
|
|
574
574
|
${c}
|
|
575
|
-
</label>` :
|
|
575
|
+
</label>` : C``;
|
|
576
576
|
}
|
|
577
577
|
render() {
|
|
578
578
|
const {
|
|
@@ -583,7 +583,7 @@ class f extends kt(vt) {
|
|
|
583
583
|
disabled: E,
|
|
584
584
|
isRTL: b
|
|
585
585
|
} = this, m = "switch-description";
|
|
586
|
-
return
|
|
586
|
+
return C`
|
|
587
587
|
<div
|
|
588
588
|
class="c-switch-wrapper"
|
|
589
589
|
?isRTL=${b}
|
|
@@ -606,17 +606,16 @@ class f extends kt(vt) {
|
|
|
606
606
|
aria-label="${(s == null ? void 0 : s.label) || x}"
|
|
607
607
|
aria-describedby="${s != null && s.describedBy ? m : x}">
|
|
608
608
|
<div class="c-switch-control">
|
|
609
|
-
${l ?
|
|
609
|
+
${l ? C`<icon-check></icon-check>` : x}
|
|
610
610
|
</div>
|
|
611
611
|
</label>
|
|
612
|
-
${s != null && s.describedBy ?
|
|
612
|
+
${s != null && s.describedBy ? C`<div id="${m}" data-test-id="${m}" class="c-switch-description">${s == null ? void 0 : s.describedBy}</div>` : x}
|
|
613
613
|
${c === "trailing" ? this.renderSwitchLabel() : x}
|
|
614
614
|
</div>
|
|
615
615
|
`;
|
|
616
616
|
}
|
|
617
617
|
}
|
|
618
|
-
f.
|
|
619
|
-
f.styles = yt(At);
|
|
618
|
+
f.styles = yt(Ct);
|
|
620
619
|
y([
|
|
621
620
|
Et('input[type="checkbox"]')
|
|
622
621
|
], f.prototype, "input", 2);
|
|
@@ -625,7 +624,7 @@ y([
|
|
|
625
624
|
], f.prototype, "label", 2);
|
|
626
625
|
y([
|
|
627
626
|
k({ type: String }),
|
|
628
|
-
|
|
627
|
+
xt(it, At, "leading")
|
|
629
628
|
], f.prototype, "labelPlacement", 2);
|
|
630
629
|
y([
|
|
631
630
|
k({ type: Object })
|
|
@@ -645,9 +644,9 @@ y([
|
|
|
645
644
|
y([
|
|
646
645
|
k({ type: Boolean, reflect: !0 })
|
|
647
646
|
], f.prototype, "disabled", 2);
|
|
648
|
-
|
|
647
|
+
Ft(it, f);
|
|
649
648
|
export {
|
|
650
|
-
|
|
649
|
+
It as ON_SWITCH_CHANGED_EVENT,
|
|
651
650
|
f as PieSwitch,
|
|
652
|
-
|
|
651
|
+
At as labelPlacements
|
|
653
652
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { EventName } from '@lit/react';
|
|
3
|
+
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
3
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
5
|
import type { LitElement } from 'lit';
|
|
5
6
|
import type { PropertyValues } from 'lit';
|
|
6
7
|
import type { ReactWebComponent } from '@lit/react';
|
|
8
|
+
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
9
|
import type { TemplateResult } from 'lit';
|
|
8
10
|
|
|
9
11
|
export declare type AriaProps = {
|
|
@@ -32,10 +34,7 @@ export declare const PieSwitch: ReactWebComponent<PieSwitch_2, {
|
|
|
32
34
|
* @event {CustomEvent} change - when the switch checked state is changed.
|
|
33
35
|
*/
|
|
34
36
|
declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
|
|
35
|
-
static formAssociated: boolean;
|
|
36
|
-
private readonly _internals;
|
|
37
37
|
private input?;
|
|
38
|
-
constructor();
|
|
39
38
|
protected firstUpdated(_changedProperties: PropertyValues<this>): void;
|
|
40
39
|
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
41
40
|
label?: string;
|
|
@@ -94,9 +93,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
|
|
|
94
93
|
render(): TemplateResult<1>;
|
|
95
94
|
}
|
|
96
95
|
|
|
97
|
-
declare const PieSwitch_base: GenericConstructor<
|
|
98
|
-
isRTL: boolean;
|
|
99
|
-
}> & typeof LitElement;
|
|
96
|
+
declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
|
|
100
97
|
|
|
101
98
|
export declare interface SwitchProps {
|
|
102
99
|
/**
|
package/package.json
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-switch",
|
|
3
3
|
"description": "PIE Design System Switch built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.23.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
+
"custom-elements.json",
|
|
10
11
|
"src",
|
|
11
12
|
"dist",
|
|
12
13
|
"**/*.d.ts"
|
|
13
14
|
],
|
|
14
15
|
"scripts": {
|
|
15
|
-
"build": "
|
|
16
|
+
"build": "run -T vite build",
|
|
17
|
+
"build:react-wrapper": "npx build-react-wrapper",
|
|
18
|
+
"create:manifest": "yarn cem analyze --litelement",
|
|
16
19
|
"lint:scripts": "run -T eslint .",
|
|
17
20
|
"lint:scripts:fix": "yarn lint:scripts --fix",
|
|
18
21
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
@@ -28,16 +31,20 @@
|
|
|
28
31
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
32
|
"license": "Apache-2.0",
|
|
30
33
|
"devDependencies": {
|
|
31
|
-
"@
|
|
34
|
+
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
35
|
+
"@justeattakeaway/pie-components-config": "0.8.0",
|
|
36
|
+
"cem-plugin-module-file-extensions": "0.0.5"
|
|
32
37
|
},
|
|
33
38
|
"dependencies": {
|
|
34
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
35
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
39
|
+
"@justeattakeaway/pie-icons-webc": "0.17.0",
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.16.0",
|
|
41
|
+
"@justeattakeaway/pie-wrapper-react": "0.12.0",
|
|
36
42
|
"element-internals-polyfill": "1.3.9"
|
|
37
43
|
},
|
|
38
44
|
"volta": {
|
|
39
45
|
"extends": "../../../package.json"
|
|
40
46
|
},
|
|
47
|
+
"customElements": "custom-elements.json",
|
|
41
48
|
"sideEffects": [
|
|
42
49
|
"dist/*.js"
|
|
43
50
|
]
|
package/src/index.ts
CHANGED
|
@@ -2,7 +2,9 @@ import {
|
|
|
2
2
|
LitElement, html, unsafeCSS, nothing, TemplateResult, PropertyValues,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property, query } from 'lit/decorators.js';
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin,
|
|
7
|
+
} from '@justeattakeaway/pie-webc-core';
|
|
6
8
|
import styles from './switch.scss?inline';
|
|
7
9
|
import {
|
|
8
10
|
SwitchProps, ON_SWITCH_CHANGED_EVENT, AriaProps, labelPlacements,
|
|
@@ -19,21 +21,10 @@ const componentSelector = 'pie-switch';
|
|
|
19
21
|
* @tagname pie-switch
|
|
20
22
|
* @event {CustomEvent} change - when the switch checked state is changed.
|
|
21
23
|
*/
|
|
22
|
-
|
|
23
|
-
export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
24
|
-
// TODO - we may want to consider making the element internals code reusable for other form controls.
|
|
25
|
-
static formAssociated = true;
|
|
26
|
-
|
|
27
|
-
private readonly _internals: ElementInternals;
|
|
28
|
-
|
|
24
|
+
export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements SwitchProps {
|
|
29
25
|
@query('input[type="checkbox"]')
|
|
30
26
|
private input?: HTMLInputElement;
|
|
31
27
|
|
|
32
|
-
constructor () {
|
|
33
|
-
super();
|
|
34
|
-
this._internals = this.attachInternals();
|
|
35
|
-
}
|
|
36
|
-
|
|
37
28
|
protected firstUpdated (_changedProperties: PropertyValues<this>): void {
|
|
38
29
|
super.firstUpdated(_changedProperties);
|
|
39
30
|
|
package/src/react.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { createComponent, EventName } from '@lit/react';
|
|
4
|
+
import { PieSwitch as PieSwitchReact } from './index';
|
|
5
|
+
|
|
6
|
+
export * from './defs';
|
|
7
|
+
|
|
8
|
+
export const PieSwitch = createComponent({
|
|
9
|
+
displayName: 'PieSwitch',
|
|
10
|
+
elementClass: PieSwitchReact,
|
|
11
|
+
react: React,
|
|
12
|
+
tagName: 'pie-switch',
|
|
13
|
+
events: {
|
|
14
|
+
onInvalid: 'invalid' as EventName<Event>,
|
|
15
|
+
onChange: 'change' as EventName<CustomEvent>, // when the switch checked state is changed.
|
|
16
|
+
},
|
|
17
|
+
});
|