@justeattakeaway/pie-switch 0.22.2 → 0.24.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 +363 -0
- package/dist/index.d.ts +5 -8
- package/dist/index.js +31 -38
- package/dist/react.d.ts +14 -14
- package/dist/react.js +6 -6
- package/package.json +12 -5
- package/src/defs-react.ts +3 -0
- package/src/defs.ts +2 -2
- package/src/index.ts +6 -21
- package/src/react.ts +26 -0
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/defs-react.js",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": []
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"kind": "javascript-module",
|
|
13
|
+
"path": "src/defs.js",
|
|
14
|
+
"declarations": [
|
|
15
|
+
{
|
|
16
|
+
"kind": "variable",
|
|
17
|
+
"name": "labelPlacements",
|
|
18
|
+
"type": {
|
|
19
|
+
"text": "['leading', 'trailing']"
|
|
20
|
+
},
|
|
21
|
+
"default": "['leading', 'trailing']"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "variable",
|
|
25
|
+
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
26
|
+
"type": {
|
|
27
|
+
"text": "string"
|
|
28
|
+
},
|
|
29
|
+
"default": "'change'",
|
|
30
|
+
"description": "Event name for when the switch checked state is changed."
|
|
31
|
+
}
|
|
32
|
+
],
|
|
33
|
+
"exports": [
|
|
34
|
+
{
|
|
35
|
+
"kind": "js",
|
|
36
|
+
"name": "labelPlacements",
|
|
37
|
+
"declaration": {
|
|
38
|
+
"name": "labelPlacements",
|
|
39
|
+
"module": "src/defs.js"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"kind": "js",
|
|
44
|
+
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
45
|
+
"declaration": {
|
|
46
|
+
"name": "ON_SWITCH_CHANGED_EVENT",
|
|
47
|
+
"module": "src/defs.js"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"kind": "javascript-module",
|
|
54
|
+
"path": "src/index.js",
|
|
55
|
+
"declarations": [
|
|
56
|
+
{
|
|
57
|
+
"kind": "class",
|
|
58
|
+
"description": "",
|
|
59
|
+
"name": "PieSwitch",
|
|
60
|
+
"members": [
|
|
61
|
+
{
|
|
62
|
+
"kind": "field",
|
|
63
|
+
"name": "input",
|
|
64
|
+
"type": {
|
|
65
|
+
"text": "HTMLInputElement | undefined"
|
|
66
|
+
},
|
|
67
|
+
"privacy": "private"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"kind": "field",
|
|
71
|
+
"name": "label",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "string | undefined"
|
|
74
|
+
},
|
|
75
|
+
"privacy": "public",
|
|
76
|
+
"attribute": "label"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"kind": "field",
|
|
80
|
+
"name": "labelPlacement",
|
|
81
|
+
"type": {
|
|
82
|
+
"text": "SwitchProps['labelPlacement']"
|
|
83
|
+
},
|
|
84
|
+
"privacy": "public",
|
|
85
|
+
"default": "'leading'",
|
|
86
|
+
"attribute": "labelPlacement"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"kind": "field",
|
|
90
|
+
"name": "aria",
|
|
91
|
+
"type": {
|
|
92
|
+
"text": "AriaProps"
|
|
93
|
+
},
|
|
94
|
+
"privacy": "public",
|
|
95
|
+
"attribute": "aria"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"kind": "field",
|
|
99
|
+
"name": "checked",
|
|
100
|
+
"type": {
|
|
101
|
+
"text": "boolean"
|
|
102
|
+
},
|
|
103
|
+
"privacy": "public",
|
|
104
|
+
"default": "false",
|
|
105
|
+
"attribute": "checked",
|
|
106
|
+
"reflects": true
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "field",
|
|
110
|
+
"name": "required",
|
|
111
|
+
"type": {
|
|
112
|
+
"text": "boolean"
|
|
113
|
+
},
|
|
114
|
+
"privacy": "public",
|
|
115
|
+
"default": "false",
|
|
116
|
+
"attribute": "required",
|
|
117
|
+
"reflects": true
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"kind": "field",
|
|
121
|
+
"name": "value",
|
|
122
|
+
"type": {
|
|
123
|
+
"text": "string"
|
|
124
|
+
},
|
|
125
|
+
"privacy": "public",
|
|
126
|
+
"default": "'on'",
|
|
127
|
+
"attribute": "value"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"kind": "field",
|
|
131
|
+
"name": "name",
|
|
132
|
+
"type": {
|
|
133
|
+
"text": "string | undefined"
|
|
134
|
+
},
|
|
135
|
+
"privacy": "public",
|
|
136
|
+
"attribute": "name"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"kind": "field",
|
|
140
|
+
"name": "disabled",
|
|
141
|
+
"type": {
|
|
142
|
+
"text": "boolean"
|
|
143
|
+
},
|
|
144
|
+
"privacy": "public",
|
|
145
|
+
"default": "false",
|
|
146
|
+
"attribute": "disabled",
|
|
147
|
+
"reflects": true
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
"kind": "method",
|
|
151
|
+
"name": "handleFormAssociation",
|
|
152
|
+
"privacy": "private",
|
|
153
|
+
"return": {
|
|
154
|
+
"type": {
|
|
155
|
+
"text": "void"
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
"description": "Ensures that the form value and validation state are in sync with the component."
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"kind": "method",
|
|
162
|
+
"name": "onChange",
|
|
163
|
+
"parameters": [
|
|
164
|
+
{
|
|
165
|
+
"name": "event",
|
|
166
|
+
"type": {
|
|
167
|
+
"text": "Event"
|
|
168
|
+
},
|
|
169
|
+
"description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`."
|
|
170
|
+
}
|
|
171
|
+
],
|
|
172
|
+
"description": "The onChange function updates the checkbox state and emits an event for consumers."
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"kind": "method",
|
|
176
|
+
"name": "checkValidity",
|
|
177
|
+
"privacy": "public",
|
|
178
|
+
"return": {
|
|
179
|
+
"type": {
|
|
180
|
+
"text": ""
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"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"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"kind": "method",
|
|
187
|
+
"name": "reportValidity",
|
|
188
|
+
"privacy": "public",
|
|
189
|
+
"return": {
|
|
190
|
+
"type": {
|
|
191
|
+
"text": ""
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
"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"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "method",
|
|
198
|
+
"name": "setCustomValidity",
|
|
199
|
+
"privacy": "public",
|
|
200
|
+
"return": {
|
|
201
|
+
"type": {
|
|
202
|
+
"text": "void"
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
"parameters": [
|
|
206
|
+
{
|
|
207
|
+
"name": "message",
|
|
208
|
+
"type": {
|
|
209
|
+
"text": "string"
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
],
|
|
213
|
+
"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"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"kind": "field",
|
|
217
|
+
"name": "validity",
|
|
218
|
+
"type": {
|
|
219
|
+
"text": "ValidityState"
|
|
220
|
+
},
|
|
221
|
+
"privacy": "public",
|
|
222
|
+
"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",
|
|
223
|
+
"readonly": true
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"kind": "field",
|
|
227
|
+
"name": "validationMessage",
|
|
228
|
+
"type": {
|
|
229
|
+
"text": "string"
|
|
230
|
+
},
|
|
231
|
+
"privacy": "public",
|
|
232
|
+
"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",
|
|
233
|
+
"readonly": true
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"kind": "method",
|
|
237
|
+
"name": "renderSwitchLabel",
|
|
238
|
+
"privacy": "private",
|
|
239
|
+
"return": {
|
|
240
|
+
"type": {
|
|
241
|
+
"text": "TemplateResult"
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
"description": "Renders the label for a switch if provided.\nif invalid value is passed, nothing gets rendered"
|
|
245
|
+
}
|
|
246
|
+
],
|
|
247
|
+
"events": [
|
|
248
|
+
{
|
|
249
|
+
"name": "invalid",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "Event"
|
|
252
|
+
}
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"type": {
|
|
256
|
+
"text": "CustomEvent"
|
|
257
|
+
},
|
|
258
|
+
"description": "when the switch checked state is changed.",
|
|
259
|
+
"name": "change"
|
|
260
|
+
}
|
|
261
|
+
],
|
|
262
|
+
"attributes": [
|
|
263
|
+
{
|
|
264
|
+
"name": "label",
|
|
265
|
+
"type": {
|
|
266
|
+
"text": "string | undefined"
|
|
267
|
+
},
|
|
268
|
+
"fieldName": "label"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "labelPlacement",
|
|
272
|
+
"type": {
|
|
273
|
+
"text": "SwitchProps['labelPlacement']"
|
|
274
|
+
},
|
|
275
|
+
"default": "'leading'",
|
|
276
|
+
"fieldName": "labelPlacement"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "aria",
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "AriaProps"
|
|
282
|
+
},
|
|
283
|
+
"fieldName": "aria"
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"name": "checked",
|
|
287
|
+
"type": {
|
|
288
|
+
"text": "boolean"
|
|
289
|
+
},
|
|
290
|
+
"default": "false",
|
|
291
|
+
"fieldName": "checked"
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
"name": "required",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "boolean"
|
|
297
|
+
},
|
|
298
|
+
"default": "false",
|
|
299
|
+
"fieldName": "required"
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"name": "value",
|
|
303
|
+
"type": {
|
|
304
|
+
"text": "string"
|
|
305
|
+
},
|
|
306
|
+
"default": "'on'",
|
|
307
|
+
"fieldName": "value"
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"name": "name",
|
|
311
|
+
"type": {
|
|
312
|
+
"text": "string | undefined"
|
|
313
|
+
},
|
|
314
|
+
"fieldName": "name"
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"name": "disabled",
|
|
318
|
+
"type": {
|
|
319
|
+
"text": "boolean"
|
|
320
|
+
},
|
|
321
|
+
"default": "false",
|
|
322
|
+
"fieldName": "disabled"
|
|
323
|
+
}
|
|
324
|
+
],
|
|
325
|
+
"mixins": [
|
|
326
|
+
{
|
|
327
|
+
"name": "FormControlMixin",
|
|
328
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": "RtlMixin",
|
|
332
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
333
|
+
}
|
|
334
|
+
],
|
|
335
|
+
"superclass": {
|
|
336
|
+
"name": "LitElement",
|
|
337
|
+
"package": "lit"
|
|
338
|
+
},
|
|
339
|
+
"tagName": "pie-switch",
|
|
340
|
+
"customElement": true
|
|
341
|
+
}
|
|
342
|
+
],
|
|
343
|
+
"exports": [
|
|
344
|
+
{
|
|
345
|
+
"kind": "js",
|
|
346
|
+
"name": "*",
|
|
347
|
+
"declaration": {
|
|
348
|
+
"name": "*",
|
|
349
|
+
"package": "./defs"
|
|
350
|
+
}
|
|
351
|
+
},
|
|
352
|
+
{
|
|
353
|
+
"kind": "js",
|
|
354
|
+
"name": "PieSwitch",
|
|
355
|
+
"declaration": {
|
|
356
|
+
"name": "PieSwitch",
|
|
357
|
+
"module": "src/index.js"
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
]
|
|
361
|
+
}
|
|
362
|
+
]
|
|
363
|
+
}
|
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
|
/**
|
|
@@ -103,7 +100,7 @@ export declare interface SwitchProps {
|
|
|
103
100
|
/**
|
|
104
101
|
* Same as the HTML required attribute - indicates whether the switch must be turned or not
|
|
105
102
|
*/
|
|
106
|
-
required
|
|
103
|
+
required?: boolean;
|
|
107
104
|
/**
|
|
108
105
|
* Same as the HTML disabled attribute - indicates whether the switch is disabled or not
|
|
109
106
|
*/
|
|
@@ -123,7 +120,7 @@ export declare interface SwitchProps {
|
|
|
123
120
|
/**
|
|
124
121
|
* Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
|
|
125
122
|
*/
|
|
126
|
-
value
|
|
123
|
+
value?: string;
|
|
127
124
|
}
|
|
128
125
|
|
|
129
126
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { LitElement as vt, html as
|
|
1
|
+
import { LitElement as vt, html as A, 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, wrapNativeEvent as xt, validPropertyValues as Ft, defineCustomElement as At } 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
|
+
`, It = ["leading", "trailing"], Pt = "change";
|
|
7
7
|
(function() {
|
|
8
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(), C = /* @__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",
|
|
@@ -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;
|
|
@@ -511,13 +511,7 @@ class f extends kt(vt) {
|
|
|
511
511
|
onChange(c) {
|
|
512
512
|
const { checked: s } = c == null ? void 0 : c.currentTarget;
|
|
513
513
|
this.checked = s;
|
|
514
|
-
const l =
|
|
515
|
-
Ct,
|
|
516
|
-
{
|
|
517
|
-
bubbles: !0,
|
|
518
|
-
composed: !0
|
|
519
|
-
}
|
|
520
|
-
);
|
|
514
|
+
const l = xt(c);
|
|
521
515
|
this.dispatchEvent(l), this.handleFormAssociation();
|
|
522
516
|
}
|
|
523
517
|
/**
|
|
@@ -567,12 +561,12 @@ class f extends kt(vt) {
|
|
|
567
561
|
*/
|
|
568
562
|
renderSwitchLabel() {
|
|
569
563
|
const { label: c, labelPlacement: s } = this;
|
|
570
|
-
return c ?
|
|
564
|
+
return c ? A`
|
|
571
565
|
<label
|
|
572
566
|
for="switch"
|
|
573
567
|
data-test-id="switch-label-${s}">
|
|
574
568
|
${c}
|
|
575
|
-
</label>` :
|
|
569
|
+
</label>` : A``;
|
|
576
570
|
}
|
|
577
571
|
render() {
|
|
578
572
|
const {
|
|
@@ -583,7 +577,7 @@ class f extends kt(vt) {
|
|
|
583
577
|
disabled: E,
|
|
584
578
|
isRTL: b
|
|
585
579
|
} = this, m = "switch-description";
|
|
586
|
-
return
|
|
580
|
+
return A`
|
|
587
581
|
<div
|
|
588
582
|
class="c-switch-wrapper"
|
|
589
583
|
?isRTL=${b}
|
|
@@ -606,17 +600,16 @@ class f extends kt(vt) {
|
|
|
606
600
|
aria-label="${(s == null ? void 0 : s.label) || x}"
|
|
607
601
|
aria-describedby="${s != null && s.describedBy ? m : x}">
|
|
608
602
|
<div class="c-switch-control">
|
|
609
|
-
${l ?
|
|
603
|
+
${l ? A`<icon-check></icon-check>` : x}
|
|
610
604
|
</div>
|
|
611
605
|
</label>
|
|
612
|
-
${s != null && s.describedBy ?
|
|
606
|
+
${s != null && s.describedBy ? A`<div id="${m}" data-test-id="${m}" class="c-switch-description">${s == null ? void 0 : s.describedBy}</div>` : x}
|
|
613
607
|
${c === "trailing" ? this.renderSwitchLabel() : x}
|
|
614
608
|
</div>
|
|
615
609
|
`;
|
|
616
610
|
}
|
|
617
611
|
}
|
|
618
|
-
f.
|
|
619
|
-
f.styles = yt(At);
|
|
612
|
+
f.styles = yt(Ct);
|
|
620
613
|
y([
|
|
621
614
|
Et('input[type="checkbox"]')
|
|
622
615
|
], f.prototype, "input", 2);
|
|
@@ -625,7 +618,7 @@ y([
|
|
|
625
618
|
], f.prototype, "label", 2);
|
|
626
619
|
y([
|
|
627
620
|
k({ type: String }),
|
|
628
|
-
|
|
621
|
+
Ft(it, It, "leading")
|
|
629
622
|
], f.prototype, "labelPlacement", 2);
|
|
630
623
|
y([
|
|
631
624
|
k({ type: Object })
|
|
@@ -645,9 +638,9 @@ y([
|
|
|
645
638
|
y([
|
|
646
639
|
k({ type: Boolean, reflect: !0 })
|
|
647
640
|
], f.prototype, "disabled", 2);
|
|
648
|
-
|
|
641
|
+
At(it, f);
|
|
649
642
|
export {
|
|
650
|
-
|
|
643
|
+
Pt as ON_SWITCH_CHANGED_EVENT,
|
|
651
644
|
f as PieSwitch,
|
|
652
|
-
|
|
645
|
+
It as labelPlacements
|
|
653
646
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
|
-
import type {
|
|
2
|
+
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
3
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import type { LitElement } from 'lit';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
|
-
import
|
|
6
|
+
import * as React_2 from 'react';
|
|
7
|
+
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
8
|
import type { TemplateResult } from 'lit';
|
|
8
9
|
|
|
9
10
|
export declare type AriaProps = {
|
|
@@ -22,20 +23,14 @@ export declare const labelPlacements: readonly ["leading", "trailing"];
|
|
|
22
23
|
*/
|
|
23
24
|
export declare const ON_SWITCH_CHANGED_EVENT = "change";
|
|
24
25
|
|
|
25
|
-
export declare const PieSwitch:
|
|
26
|
-
onInvalid: EventName<Event>;
|
|
27
|
-
onChange: EventName<CustomEvent<any>>;
|
|
28
|
-
}>;
|
|
26
|
+
export declare const PieSwitch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<PieSwitch_2> & PieSwitchEvents & ReactBaseType>;
|
|
29
27
|
|
|
30
28
|
/**
|
|
31
29
|
* @tagname pie-switch
|
|
32
30
|
* @event {CustomEvent} change - when the switch checked state is changed.
|
|
33
31
|
*/
|
|
34
32
|
declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
|
|
35
|
-
static formAssociated: boolean;
|
|
36
|
-
private readonly _internals;
|
|
37
33
|
private input?;
|
|
38
|
-
constructor();
|
|
39
34
|
protected firstUpdated(_changedProperties: PropertyValues<this>): void;
|
|
40
35
|
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
41
36
|
label?: string;
|
|
@@ -94,9 +89,14 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
|
|
|
94
89
|
render(): TemplateResult<1>;
|
|
95
90
|
}
|
|
96
91
|
|
|
97
|
-
declare const PieSwitch_base: GenericConstructor<
|
|
98
|
-
|
|
99
|
-
|
|
92
|
+
declare const PieSwitch_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
|
|
93
|
+
|
|
94
|
+
declare type PieSwitchEvents = {
|
|
95
|
+
onInvalid?: (event: Event<any>) => void;
|
|
96
|
+
onChange?: (event: CustomEvent<any>) => void;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
100
100
|
|
|
101
101
|
export declare interface SwitchProps {
|
|
102
102
|
/**
|
|
@@ -110,7 +110,7 @@ export declare interface SwitchProps {
|
|
|
110
110
|
/**
|
|
111
111
|
* Same as the HTML required attribute - indicates whether the switch must be turned or not
|
|
112
112
|
*/
|
|
113
|
-
required
|
|
113
|
+
required?: boolean;
|
|
114
114
|
/**
|
|
115
115
|
* Same as the HTML disabled attribute - indicates whether the switch is disabled or not
|
|
116
116
|
*/
|
|
@@ -130,7 +130,7 @@ export declare interface SwitchProps {
|
|
|
130
130
|
/**
|
|
131
131
|
* Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
|
|
132
132
|
*/
|
|
133
|
-
value
|
|
133
|
+
value?: string;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
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
|
|
4
|
+
import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as P } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "@justeattakeaway/pie-webc-core";
|
|
8
8
|
import "@justeattakeaway/pie-icons-webc/IconCheck";
|
|
9
|
-
const
|
|
9
|
+
const o = t({
|
|
10
10
|
displayName: "PieSwitch",
|
|
11
11
|
elementClass: i,
|
|
12
12
|
react: e,
|
|
@@ -16,9 +16,9 @@ const c = t({
|
|
|
16
16
|
onChange: "change"
|
|
17
17
|
// when the switch checked state is changed.
|
|
18
18
|
}
|
|
19
|
-
});
|
|
19
|
+
}), s = o;
|
|
20
20
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
w as ON_SWITCH_CHANGED_EVENT,
|
|
22
|
+
s as PieSwitch,
|
|
23
|
+
P as labelPlacements
|
|
24
24
|
};
|
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.24.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.9.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.1",
|
|
40
|
+
"@justeattakeaway/pie-webc-core": "0.17.0",
|
|
41
|
+
"@justeattakeaway/pie-wrapper-react": "0.13.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/defs.ts
CHANGED
|
@@ -19,7 +19,7 @@ export interface SwitchProps {
|
|
|
19
19
|
/**
|
|
20
20
|
* Same as the HTML required attribute - indicates whether the switch must be turned or not
|
|
21
21
|
*/
|
|
22
|
-
required
|
|
22
|
+
required?: boolean;
|
|
23
23
|
/**
|
|
24
24
|
* Same as the HTML disabled attribute - indicates whether the switch is disabled or not
|
|
25
25
|
*/
|
|
@@ -39,7 +39,7 @@ export interface SwitchProps {
|
|
|
39
39
|
/**
|
|
40
40
|
* Same as the HTML value attribute - indicates the value of the switch (for use with forms). Defaults to 'on'.
|
|
41
41
|
*/
|
|
42
|
-
value
|
|
42
|
+
value?: string;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/**
|
package/src/index.ts
CHANGED
|
@@ -2,10 +2,12 @@ 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, wrapNativeEvent,
|
|
7
|
+
} from '@justeattakeaway/pie-webc-core';
|
|
6
8
|
import styles from './switch.scss?inline';
|
|
7
9
|
import {
|
|
8
|
-
SwitchProps,
|
|
10
|
+
SwitchProps, AriaProps, labelPlacements,
|
|
9
11
|
} from './defs';
|
|
10
12
|
import 'element-internals-polyfill';
|
|
11
13
|
import '@justeattakeaway/pie-icons-webc/IconCheck';
|
|
@@ -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
|
|
|
@@ -103,13 +94,7 @@ export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
|
|
|
103
94
|
onChange (event: Event) {
|
|
104
95
|
const { checked } = event?.currentTarget as HTMLInputElement;
|
|
105
96
|
this.checked = checked;
|
|
106
|
-
const changedEvent =
|
|
107
|
-
ON_SWITCH_CHANGED_EVENT,
|
|
108
|
-
{
|
|
109
|
-
bubbles: true,
|
|
110
|
-
composed: true,
|
|
111
|
-
},
|
|
112
|
-
);
|
|
97
|
+
const changedEvent = wrapNativeEvent(event);
|
|
113
98
|
|
|
114
99
|
this.dispatchEvent(changedEvent);
|
|
115
100
|
this.handleFormAssociation();
|
package/src/react.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent, EventName } from '@lit/react';
|
|
3
|
+
import { PieSwitch as PieSwitchLit } from './index';
|
|
4
|
+
import { SwitchProps } from './defs';
|
|
5
|
+
|
|
6
|
+
export * from './defs';
|
|
7
|
+
|
|
8
|
+
const PieSwitchReact = createComponent({
|
|
9
|
+
displayName: 'PieSwitch',
|
|
10
|
+
elementClass: PieSwitchLit,
|
|
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
|
+
});
|
|
18
|
+
|
|
19
|
+
type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>
|
|
20
|
+
|
|
21
|
+
type PieSwitchEvents = {
|
|
22
|
+
onInvalid?: (event: Event<any>) => void;
|
|
23
|
+
onChange?: (event: CustomEvent<any>) => void;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const PieSwitch = PieSwitchReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SwitchProps> & React.RefAttributes<PieSwitchLit> & PieSwitchEvents & ReactBaseType>;
|