@lit-material/chip 0.0.3 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -0
- package/custom-elements.json +403 -0
- package/dist/chip-input.d.ts +59 -0
- package/dist/chip-input.d.ts.map +1 -0
- package/dist/chip-input.js +263 -0
- package/dist/chip-input.js.map +1 -0
- package/dist/chip.d.ts +2 -0
- package/dist/chip.d.ts.map +1 -1
- package/dist/chip.js +6 -1
- package/dist/chip.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -59,6 +59,41 @@ action triggers, removable tags), not a value a `<form>` submits, matching how M
|
|
|
59
59
|
itself treats chips. Track a `filter` chip set's selection or an `input` chip list by listening for
|
|
60
60
|
`change`/`remove` rather than reading `FormData`.
|
|
61
61
|
|
|
62
|
+
## `lit-material-chip-input`
|
|
63
|
+
|
|
64
|
+
A field that turns what you type into chips: tags, labels, email addresses, allowed hosts.
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<lit-material-chip-input id="hosts" label="Allowed hosts" placeholder="api.example.com"></lit-material-chip-input>
|
|
68
|
+
<script type="module">
|
|
69
|
+
import "@lit-material/chip";
|
|
70
|
+
const hosts = document.querySelector("#hosts");
|
|
71
|
+
hosts.validator = (v) => (/^[a-z0-9.-]+$/.test(v) ? "" : "Not a host name");
|
|
72
|
+
hosts.addEventListener("change", (e) => console.log(e.detail.values));
|
|
73
|
+
</script>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
| Property | Attribute | Type | Default |
|
|
77
|
+
| ----------------- | ------------------ | --------------------- | ------- |
|
|
78
|
+
| `values` | — | `string[]` | `[]` |
|
|
79
|
+
| `label` | `label` | `string` | `""` |
|
|
80
|
+
| `placeholder` | `placeholder` | `string` | `""` |
|
|
81
|
+
| `supportingText` | `supporting-text` | `string` | `""` |
|
|
82
|
+
| `validator` | — | `(value) => string` | — |
|
|
83
|
+
| `allowDuplicates` | `allow-duplicates` | `boolean` | `false` |
|
|
84
|
+
| `max` | `max` | `number` (0: no limit)| `0` |
|
|
85
|
+
| `disabled` | `disabled` (reflected) | `boolean` | `false` |
|
|
86
|
+
| `invalid` | `invalid` (reflected, read it) | `boolean` | `false` |
|
|
87
|
+
|
|
88
|
+
Enter or a comma adds the typed value; a paste of several values (commas, spaces, new lines) adds
|
|
89
|
+
them all and leaves any refused ones in the field. Backspace in the empty field removes the last
|
|
90
|
+
chip; each chip's remove button is named "Remove <value>". A refused value keeps its text and shows
|
|
91
|
+
why under the field (duplicates, `max`, `validator`). Methods `add(value)` (returns the refusal,
|
|
92
|
+
`""` when added) and `removeAt(index)`; event `change` with `detail: { values }`. Additions and
|
|
93
|
+
removals are announced.
|
|
94
|
+
|
|
95
|
+
`lit-material-chip` also gained `remove-label` (default `"Remove"`), the remove button's name.
|
|
96
|
+
|
|
62
97
|
## License
|
|
63
98
|
|
|
64
99
|
MIT
|
package/custom-elements.json
CHANGED
|
@@ -2,6 +2,382 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/chip-input.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "A field that turns what you type into chips: tags, labels, email\naddresses, allowed hosts. Enter or a comma adds the typed value; pasting\nseveral values separated by commas, spaces or new lines adds them all.\nEach chip has a remove button, and Backspace in the empty field removes\nthe last one.\n\n`validator` refuses a value with a message (shown under the field, the\ntext stays for fixing); duplicates are refused unless `allow-duplicates`.",
|
|
12
|
+
"name": "LitMaterialChipInput",
|
|
13
|
+
"cssParts": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The box holding the chips and the input.",
|
|
16
|
+
"name": "field"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"description": "The text input.",
|
|
20
|
+
"name": "input"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"members": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "field",
|
|
26
|
+
"name": "values",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "string[]"
|
|
29
|
+
},
|
|
30
|
+
"default": "[]",
|
|
31
|
+
"description": "The chips' values."
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"kind": "field",
|
|
35
|
+
"name": "label",
|
|
36
|
+
"type": {
|
|
37
|
+
"text": "string"
|
|
38
|
+
},
|
|
39
|
+
"default": "\"\"",
|
|
40
|
+
"description": "Visible label above the field; also names the input.",
|
|
41
|
+
"attribute": "label"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"kind": "field",
|
|
45
|
+
"name": "placeholder",
|
|
46
|
+
"type": {
|
|
47
|
+
"text": "string"
|
|
48
|
+
},
|
|
49
|
+
"default": "\"\"",
|
|
50
|
+
"attribute": "placeholder"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"kind": "field",
|
|
54
|
+
"name": "supportingText",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "string"
|
|
57
|
+
},
|
|
58
|
+
"default": "\"\"",
|
|
59
|
+
"description": "Help under the field, replaced by an error while there is one.",
|
|
60
|
+
"attribute": "supporting-text"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "field",
|
|
64
|
+
"name": "validator",
|
|
65
|
+
"type": {
|
|
66
|
+
"text": "(value: string) => string | undefined"
|
|
67
|
+
},
|
|
68
|
+
"description": "Refuses a value: return a message, or `\"\"` to accept."
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"kind": "field",
|
|
72
|
+
"name": "allowDuplicates",
|
|
73
|
+
"type": {
|
|
74
|
+
"text": "boolean"
|
|
75
|
+
},
|
|
76
|
+
"default": "false",
|
|
77
|
+
"attribute": "allow-duplicates"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"kind": "field",
|
|
81
|
+
"name": "max",
|
|
82
|
+
"type": {
|
|
83
|
+
"text": "number"
|
|
84
|
+
},
|
|
85
|
+
"default": "0",
|
|
86
|
+
"description": "Most chips allowed; `0` for no limit.",
|
|
87
|
+
"attribute": "max"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"kind": "field",
|
|
91
|
+
"name": "disabled",
|
|
92
|
+
"type": {
|
|
93
|
+
"text": "boolean"
|
|
94
|
+
},
|
|
95
|
+
"default": "false",
|
|
96
|
+
"attribute": "disabled",
|
|
97
|
+
"reflects": true
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"kind": "field",
|
|
101
|
+
"name": "invalid",
|
|
102
|
+
"type": {
|
|
103
|
+
"text": "boolean"
|
|
104
|
+
},
|
|
105
|
+
"default": "false",
|
|
106
|
+
"description": "Set while the typed value was refused; reflected.",
|
|
107
|
+
"attribute": "invalid",
|
|
108
|
+
"reflects": true
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"kind": "field",
|
|
112
|
+
"name": "error",
|
|
113
|
+
"type": {
|
|
114
|
+
"text": "string"
|
|
115
|
+
},
|
|
116
|
+
"privacy": "private",
|
|
117
|
+
"default": "\"\""
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"kind": "field",
|
|
121
|
+
"name": "announcement",
|
|
122
|
+
"type": {
|
|
123
|
+
"text": "string"
|
|
124
|
+
},
|
|
125
|
+
"privacy": "private",
|
|
126
|
+
"default": "\"\""
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"kind": "field",
|
|
130
|
+
"name": "input",
|
|
131
|
+
"type": {
|
|
132
|
+
"text": "HTMLInputElement"
|
|
133
|
+
},
|
|
134
|
+
"privacy": "private",
|
|
135
|
+
"readonly": true
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"kind": "field",
|
|
139
|
+
"name": "uid",
|
|
140
|
+
"privacy": "private",
|
|
141
|
+
"readonly": true,
|
|
142
|
+
"default": "`chip-input-${++nextId}`"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"kind": "method",
|
|
146
|
+
"name": "focus",
|
|
147
|
+
"return": {
|
|
148
|
+
"type": {
|
|
149
|
+
"text": "void"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
"parameters": [
|
|
153
|
+
{
|
|
154
|
+
"name": "options",
|
|
155
|
+
"optional": true,
|
|
156
|
+
"type": {
|
|
157
|
+
"text": "FocusOptions"
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
]
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"kind": "method",
|
|
164
|
+
"name": "add",
|
|
165
|
+
"return": {
|
|
166
|
+
"type": {
|
|
167
|
+
"text": "string"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
"parameters": [
|
|
171
|
+
{
|
|
172
|
+
"name": "raw",
|
|
173
|
+
"type": {
|
|
174
|
+
"text": "string"
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
],
|
|
178
|
+
"description": "Adds `raw` (trimmed); returns the refusal message, `\"\"` on success."
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"kind": "method",
|
|
182
|
+
"name": "removeAt",
|
|
183
|
+
"return": {
|
|
184
|
+
"type": {
|
|
185
|
+
"text": "void"
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
"parameters": [
|
|
189
|
+
{
|
|
190
|
+
"name": "index",
|
|
191
|
+
"type": {
|
|
192
|
+
"text": "number"
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
],
|
|
196
|
+
"description": "Removes the chip at `index`."
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "method",
|
|
200
|
+
"name": "setError",
|
|
201
|
+
"privacy": "private",
|
|
202
|
+
"return": {
|
|
203
|
+
"type": {
|
|
204
|
+
"text": "void"
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
"parameters": [
|
|
208
|
+
{
|
|
209
|
+
"name": "message",
|
|
210
|
+
"type": {
|
|
211
|
+
"text": "string"
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"kind": "method",
|
|
218
|
+
"name": "emit",
|
|
219
|
+
"privacy": "private",
|
|
220
|
+
"return": {
|
|
221
|
+
"type": {
|
|
222
|
+
"text": "void"
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"kind": "method",
|
|
228
|
+
"name": "commitTyped",
|
|
229
|
+
"privacy": "private",
|
|
230
|
+
"return": {
|
|
231
|
+
"type": {
|
|
232
|
+
"text": "void"
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"kind": "method",
|
|
238
|
+
"name": "onKeyDown",
|
|
239
|
+
"privacy": "private",
|
|
240
|
+
"return": {
|
|
241
|
+
"type": {
|
|
242
|
+
"text": "void"
|
|
243
|
+
}
|
|
244
|
+
},
|
|
245
|
+
"parameters": [
|
|
246
|
+
{
|
|
247
|
+
"name": "event",
|
|
248
|
+
"type": {
|
|
249
|
+
"text": "KeyboardEvent"
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
]
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"kind": "method",
|
|
256
|
+
"name": "onPaste",
|
|
257
|
+
"privacy": "private",
|
|
258
|
+
"return": {
|
|
259
|
+
"type": {
|
|
260
|
+
"text": "void"
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
"parameters": [
|
|
264
|
+
{
|
|
265
|
+
"name": "event",
|
|
266
|
+
"type": {
|
|
267
|
+
"text": "ClipboardEvent"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
]
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"kind": "method",
|
|
274
|
+
"name": "onInput",
|
|
275
|
+
"privacy": "private",
|
|
276
|
+
"return": {
|
|
277
|
+
"type": {
|
|
278
|
+
"text": "void"
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
],
|
|
283
|
+
"events": [
|
|
284
|
+
{
|
|
285
|
+
"name": "change",
|
|
286
|
+
"type": {
|
|
287
|
+
"text": "CustomEvent"
|
|
288
|
+
},
|
|
289
|
+
"description": "After a value is added or removed; `detail: { values }`."
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"attributes": [
|
|
293
|
+
{
|
|
294
|
+
"name": "label",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "string"
|
|
297
|
+
},
|
|
298
|
+
"default": "\"\"",
|
|
299
|
+
"description": "Visible label above the field; also names the input.",
|
|
300
|
+
"fieldName": "label"
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "placeholder",
|
|
304
|
+
"type": {
|
|
305
|
+
"text": "string"
|
|
306
|
+
},
|
|
307
|
+
"default": "\"\"",
|
|
308
|
+
"fieldName": "placeholder"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"name": "supporting-text",
|
|
312
|
+
"type": {
|
|
313
|
+
"text": "string"
|
|
314
|
+
},
|
|
315
|
+
"default": "\"\"",
|
|
316
|
+
"description": "Help under the field, replaced by an error while there is one.",
|
|
317
|
+
"fieldName": "supportingText"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"name": "allow-duplicates",
|
|
321
|
+
"type": {
|
|
322
|
+
"text": "boolean"
|
|
323
|
+
},
|
|
324
|
+
"default": "false",
|
|
325
|
+
"fieldName": "allowDuplicates"
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"name": "max",
|
|
329
|
+
"type": {
|
|
330
|
+
"text": "number"
|
|
331
|
+
},
|
|
332
|
+
"default": "0",
|
|
333
|
+
"description": "Most chips allowed; `0` for no limit.",
|
|
334
|
+
"fieldName": "max"
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"name": "disabled",
|
|
338
|
+
"type": {
|
|
339
|
+
"text": "boolean"
|
|
340
|
+
},
|
|
341
|
+
"default": "false",
|
|
342
|
+
"fieldName": "disabled"
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"name": "invalid",
|
|
346
|
+
"type": {
|
|
347
|
+
"text": "boolean"
|
|
348
|
+
},
|
|
349
|
+
"default": "false",
|
|
350
|
+
"description": "Set while the typed value was refused; reflected.",
|
|
351
|
+
"fieldName": "invalid"
|
|
352
|
+
}
|
|
353
|
+
],
|
|
354
|
+
"superclass": {
|
|
355
|
+
"name": "LitElement",
|
|
356
|
+
"package": "lit"
|
|
357
|
+
},
|
|
358
|
+
"tagName": "lit-material-chip-input",
|
|
359
|
+
"customElement": true
|
|
360
|
+
}
|
|
361
|
+
],
|
|
362
|
+
"exports": [
|
|
363
|
+
{
|
|
364
|
+
"kind": "js",
|
|
365
|
+
"name": "LitMaterialChipInput",
|
|
366
|
+
"declaration": {
|
|
367
|
+
"name": "LitMaterialChipInput",
|
|
368
|
+
"module": "src/chip-input.ts"
|
|
369
|
+
}
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"kind": "custom-element-definition",
|
|
373
|
+
"name": "lit-material-chip-input",
|
|
374
|
+
"declaration": {
|
|
375
|
+
"name": "LitMaterialChipInput",
|
|
376
|
+
"module": "src/chip-input.ts"
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
]
|
|
380
|
+
},
|
|
5
381
|
{
|
|
6
382
|
"kind": "javascript-module",
|
|
7
383
|
"path": "src/chip-styles.ts",
|
|
@@ -108,6 +484,16 @@
|
|
|
108
484
|
"default": "false",
|
|
109
485
|
"attribute": "removable"
|
|
110
486
|
},
|
|
487
|
+
{
|
|
488
|
+
"kind": "field",
|
|
489
|
+
"name": "removeLabel",
|
|
490
|
+
"type": {
|
|
491
|
+
"text": "string"
|
|
492
|
+
},
|
|
493
|
+
"default": "\"Remove\"",
|
|
494
|
+
"description": "Accessible name of the remove button, e.g. \"Remove app=web\".",
|
|
495
|
+
"attribute": "remove-label"
|
|
496
|
+
},
|
|
111
497
|
{
|
|
112
498
|
"kind": "field",
|
|
113
499
|
"name": "href",
|
|
@@ -255,6 +641,15 @@
|
|
|
255
641
|
"default": "false",
|
|
256
642
|
"fieldName": "removable"
|
|
257
643
|
},
|
|
644
|
+
{
|
|
645
|
+
"name": "remove-label",
|
|
646
|
+
"type": {
|
|
647
|
+
"text": "string"
|
|
648
|
+
},
|
|
649
|
+
"default": "\"Remove\"",
|
|
650
|
+
"description": "Accessible name of the remove button, e.g. \"Remove app=web\".",
|
|
651
|
+
"fieldName": "removeLabel"
|
|
652
|
+
},
|
|
258
653
|
{
|
|
259
654
|
"name": "href",
|
|
260
655
|
"type": {
|
|
@@ -320,6 +715,14 @@
|
|
|
320
715
|
"name": "ChipVariant",
|
|
321
716
|
"module": "./chip.js"
|
|
322
717
|
}
|
|
718
|
+
},
|
|
719
|
+
{
|
|
720
|
+
"kind": "js",
|
|
721
|
+
"name": "LitMaterialChipInput",
|
|
722
|
+
"declaration": {
|
|
723
|
+
"name": "LitMaterialChipInput",
|
|
724
|
+
"module": "./chip-input.js"
|
|
725
|
+
}
|
|
323
726
|
}
|
|
324
727
|
]
|
|
325
728
|
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "./chip.js";
|
|
3
|
+
/**
|
|
4
|
+
* A field that turns what you type into chips: tags, labels, email
|
|
5
|
+
* addresses, allowed hosts. Enter or a comma adds the typed value; pasting
|
|
6
|
+
* several values separated by commas, spaces or new lines adds them all.
|
|
7
|
+
* Each chip has a remove button, and Backspace in the empty field removes
|
|
8
|
+
* the last one.
|
|
9
|
+
*
|
|
10
|
+
* `validator` refuses a value with a message (shown under the field, the
|
|
11
|
+
* text stays for fixing); duplicates are refused unless `allow-duplicates`.
|
|
12
|
+
*
|
|
13
|
+
* @element lit-material-chip-input
|
|
14
|
+
*
|
|
15
|
+
* @fires change - After a value is added or removed; `detail: { values }`.
|
|
16
|
+
*
|
|
17
|
+
* @csspart field - The box holding the chips and the input.
|
|
18
|
+
* @csspart input - The text input.
|
|
19
|
+
*/
|
|
20
|
+
export declare class LitMaterialChipInput extends LitElement {
|
|
21
|
+
static styles: import("lit").CSSResult;
|
|
22
|
+
/** The chips' values. */
|
|
23
|
+
values: string[];
|
|
24
|
+
/** Visible label above the field; also names the input. */
|
|
25
|
+
label: string;
|
|
26
|
+
placeholder: string;
|
|
27
|
+
/** Help under the field, replaced by an error while there is one. */
|
|
28
|
+
supportingText: string;
|
|
29
|
+
/** Refuses a value: return a message, or `""` to accept. */
|
|
30
|
+
validator?: (value: string) => string;
|
|
31
|
+
allowDuplicates: boolean;
|
|
32
|
+
/** Most chips allowed; `0` for no limit. */
|
|
33
|
+
max: number;
|
|
34
|
+
disabled: boolean;
|
|
35
|
+
/** Set while the typed value was refused; reflected. */
|
|
36
|
+
invalid: boolean;
|
|
37
|
+
private error;
|
|
38
|
+
private announcement;
|
|
39
|
+
private readonly input;
|
|
40
|
+
private readonly uid;
|
|
41
|
+
focus(options?: FocusOptions): void;
|
|
42
|
+
/** Adds `raw` (trimmed); returns the refusal message, `""` on success. */
|
|
43
|
+
add(raw: string): string;
|
|
44
|
+
/** Removes the chip at `index`. */
|
|
45
|
+
removeAt(index: number): void;
|
|
46
|
+
private setError;
|
|
47
|
+
private emit;
|
|
48
|
+
private commitTyped;
|
|
49
|
+
private onKeyDown;
|
|
50
|
+
private onPaste;
|
|
51
|
+
private onInput;
|
|
52
|
+
render(): import("lit").TemplateResult<1>;
|
|
53
|
+
}
|
|
54
|
+
declare global {
|
|
55
|
+
interface HTMLElementTagNameMap {
|
|
56
|
+
"lit-material-chip-input": LitMaterialChipInput;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=chip-input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chip-input.d.ts","sourceRoot":"","sources":["../src/chip-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,WAAW,CAAC;AAInB;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAgEpB;IAEF,yBAAyB;IACO,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtD,2DAA2D;IAC/C,KAAK,SAAM;IAEX,WAAW,SAAM;IAE7B,qEAAqE;IACzB,cAAc,SAAM;IAEhE,4DAA4D;IAC5B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAEV,eAAe,UAAS;IAEpF,4CAA4C;IAChB,GAAG,SAAK;IAEQ,QAAQ,UAAS;IAE7D,wDAAwD;IACZ,OAAO,UAAS;IAEnD,OAAO,CAAC,KAAK,CAAM;IAEnB,OAAO,CAAC,YAAY,CAAM;IAEnB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoB;IAE1D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA4B;IAEvC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI5C,0EAA0E;IAC1E,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAexB,mCAAmC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ7B,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,OAAO;IAIN,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { css, html, LitElement, nothing } from "lit";
|
|
8
|
+
import { customElement, property, query, state } from "lit/decorators.js";
|
|
9
|
+
import { repeat } from "lit/directives/repeat.js";
|
|
10
|
+
import "./chip.js";
|
|
11
|
+
let nextId = 0;
|
|
12
|
+
/**
|
|
13
|
+
* A field that turns what you type into chips: tags, labels, email
|
|
14
|
+
* addresses, allowed hosts. Enter or a comma adds the typed value; pasting
|
|
15
|
+
* several values separated by commas, spaces or new lines adds them all.
|
|
16
|
+
* Each chip has a remove button, and Backspace in the empty field removes
|
|
17
|
+
* the last one.
|
|
18
|
+
*
|
|
19
|
+
* `validator` refuses a value with a message (shown under the field, the
|
|
20
|
+
* text stays for fixing); duplicates are refused unless `allow-duplicates`.
|
|
21
|
+
*
|
|
22
|
+
* @element lit-material-chip-input
|
|
23
|
+
*
|
|
24
|
+
* @fires change - After a value is added or removed; `detail: { values }`.
|
|
25
|
+
*
|
|
26
|
+
* @csspart field - The box holding the chips and the input.
|
|
27
|
+
* @csspart input - The text input.
|
|
28
|
+
*/
|
|
29
|
+
let LitMaterialChipInput = class LitMaterialChipInput extends LitElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
/** The chips' values. */
|
|
33
|
+
this.values = [];
|
|
34
|
+
/** Visible label above the field; also names the input. */
|
|
35
|
+
this.label = "";
|
|
36
|
+
this.placeholder = "";
|
|
37
|
+
/** Help under the field, replaced by an error while there is one. */
|
|
38
|
+
this.supportingText = "";
|
|
39
|
+
this.allowDuplicates = false;
|
|
40
|
+
/** Most chips allowed; `0` for no limit. */
|
|
41
|
+
this.max = 0;
|
|
42
|
+
this.disabled = false;
|
|
43
|
+
/** Set while the typed value was refused; reflected. */
|
|
44
|
+
this.invalid = false;
|
|
45
|
+
this.error = "";
|
|
46
|
+
this.announcement = "";
|
|
47
|
+
this.uid = `chip-input-${++nextId}`;
|
|
48
|
+
}
|
|
49
|
+
static { this.styles = css `
|
|
50
|
+
:host {
|
|
51
|
+
display: block;
|
|
52
|
+
font-family: var(--md-sys-typescale-body-large-font, Roboto, system-ui, sans-serif);
|
|
53
|
+
}
|
|
54
|
+
:host([hidden]) {
|
|
55
|
+
display: none;
|
|
56
|
+
}
|
|
57
|
+
label {
|
|
58
|
+
display: block;
|
|
59
|
+
margin-block-end: 4px;
|
|
60
|
+
color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
|
|
61
|
+
font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
|
|
62
|
+
}
|
|
63
|
+
.field {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-wrap: wrap;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 6px;
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
min-height: 56px;
|
|
70
|
+
padding: 8px 12px;
|
|
71
|
+
border: 1px solid var(--md-sys-color-outline, light-dark(#79747e, #938f99));
|
|
72
|
+
border-radius: var(--md-sys-shape-corner-extra-small, 4px);
|
|
73
|
+
cursor: text;
|
|
74
|
+
}
|
|
75
|
+
.field:focus-within {
|
|
76
|
+
border-color: var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
|
|
77
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
|
|
78
|
+
}
|
|
79
|
+
:host([invalid]) .field {
|
|
80
|
+
border-color: var(--md-sys-color-error, light-dark(#b3261e, #f2b8b5));
|
|
81
|
+
}
|
|
82
|
+
:host([disabled]) .field {
|
|
83
|
+
opacity: 0.38;
|
|
84
|
+
cursor: default;
|
|
85
|
+
}
|
|
86
|
+
input {
|
|
87
|
+
flex: 1;
|
|
88
|
+
min-width: 8ch;
|
|
89
|
+
padding: 4px 0;
|
|
90
|
+
border: 0;
|
|
91
|
+
outline: none;
|
|
92
|
+
background: transparent;
|
|
93
|
+
color: var(--md-sys-color-on-surface, light-dark(#1d1b20, #e6e0e9));
|
|
94
|
+
font: inherit;
|
|
95
|
+
font-size: var(--md-sys-typescale-body-large-size, 1rem);
|
|
96
|
+
}
|
|
97
|
+
.supporting {
|
|
98
|
+
margin: 4px 16px 0;
|
|
99
|
+
color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
|
|
100
|
+
font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
|
|
101
|
+
}
|
|
102
|
+
:host([invalid]) .supporting {
|
|
103
|
+
color: var(--md-sys-color-error, light-dark(#b3261e, #f2b8b5));
|
|
104
|
+
}
|
|
105
|
+
.sr {
|
|
106
|
+
position: absolute;
|
|
107
|
+
width: 1px;
|
|
108
|
+
height: 1px;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
clip-path: inset(50%);
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
}
|
|
113
|
+
`; }
|
|
114
|
+
focus(options) {
|
|
115
|
+
this.input?.focus(options);
|
|
116
|
+
}
|
|
117
|
+
/** Adds `raw` (trimmed); returns the refusal message, `""` on success. */
|
|
118
|
+
add(raw) {
|
|
119
|
+
const value = raw.trim();
|
|
120
|
+
if (!value)
|
|
121
|
+
return "";
|
|
122
|
+
let message = "";
|
|
123
|
+
if (this.max && this.values.length >= this.max)
|
|
124
|
+
message = `At most ${this.max}`;
|
|
125
|
+
else if (!this.allowDuplicates && this.values.includes(value))
|
|
126
|
+
message = `${value} is already added`;
|
|
127
|
+
else
|
|
128
|
+
message = this.validator?.(value) ?? "";
|
|
129
|
+
this.setError(message);
|
|
130
|
+
if (message)
|
|
131
|
+
return message;
|
|
132
|
+
this.values = [...this.values, value];
|
|
133
|
+
this.announcement = `${value} added`;
|
|
134
|
+
this.emit();
|
|
135
|
+
return "";
|
|
136
|
+
}
|
|
137
|
+
/** Removes the chip at `index`. */
|
|
138
|
+
removeAt(index) {
|
|
139
|
+
const value = this.values[index];
|
|
140
|
+
if (value === undefined)
|
|
141
|
+
return;
|
|
142
|
+
this.values = this.values.filter((_, i) => i !== index);
|
|
143
|
+
this.announcement = `${value} removed`;
|
|
144
|
+
this.emit();
|
|
145
|
+
}
|
|
146
|
+
setError(message) {
|
|
147
|
+
this.error = message;
|
|
148
|
+
this.invalid = Boolean(message);
|
|
149
|
+
}
|
|
150
|
+
emit() {
|
|
151
|
+
this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { values: this.values } }));
|
|
152
|
+
}
|
|
153
|
+
commitTyped() {
|
|
154
|
+
if (!this.add(this.input.value))
|
|
155
|
+
this.input.value = "";
|
|
156
|
+
}
|
|
157
|
+
onKeyDown(event) {
|
|
158
|
+
if (event.key === "Enter" || event.key === ",") {
|
|
159
|
+
if (!this.input.value.trim())
|
|
160
|
+
return;
|
|
161
|
+
event.preventDefault();
|
|
162
|
+
this.commitTyped();
|
|
163
|
+
}
|
|
164
|
+
else if (event.key === "Backspace" && this.input.value === "" && this.values.length) {
|
|
165
|
+
event.preventDefault();
|
|
166
|
+
this.removeAt(this.values.length - 1);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
onPaste(event) {
|
|
170
|
+
const text = event.clipboardData?.getData("text/plain") ?? "";
|
|
171
|
+
const parts = text.split(/[\s,;]+/).filter(Boolean);
|
|
172
|
+
if (parts.length < 2)
|
|
173
|
+
return;
|
|
174
|
+
event.preventDefault();
|
|
175
|
+
const refused = parts.filter((part) => this.add(part));
|
|
176
|
+
// Leave what was refused in the field, to fix.
|
|
177
|
+
this.input.value = refused.join(", ");
|
|
178
|
+
if (refused.length)
|
|
179
|
+
this.setError(`${refused.length} not added: ${refused.join(", ")}`);
|
|
180
|
+
}
|
|
181
|
+
onInput() {
|
|
182
|
+
if (this.error)
|
|
183
|
+
this.setError("");
|
|
184
|
+
}
|
|
185
|
+
render() {
|
|
186
|
+
const message = this.error || this.supportingText;
|
|
187
|
+
return html `
|
|
188
|
+
${this.label ? html `<label for=${this.uid}>${this.label}</label>` : nothing}
|
|
189
|
+
<div part="field" class="field" @click=${(e) => e.target === e.currentTarget && this.focus()}>
|
|
190
|
+
${repeat(this.values, (value, i) => `${i}:${value}`, (value, i) => html `<lit-material-chip
|
|
191
|
+
variant="input"
|
|
192
|
+
removable
|
|
193
|
+
remove-label=${`Remove ${value}`}
|
|
194
|
+
?disabled=${this.disabled}
|
|
195
|
+
@remove=${(e) => {
|
|
196
|
+
e.preventDefault();
|
|
197
|
+
this.removeAt(i);
|
|
198
|
+
this.focus();
|
|
199
|
+
}}
|
|
200
|
+
>${value}</lit-material-chip
|
|
201
|
+
>`)}
|
|
202
|
+
<input
|
|
203
|
+
part="input"
|
|
204
|
+
id=${this.uid}
|
|
205
|
+
type="text"
|
|
206
|
+
autocomplete="off"
|
|
207
|
+
spellcheck="false"
|
|
208
|
+
placeholder=${this.values.length ? "" : this.placeholder}
|
|
209
|
+
?disabled=${this.disabled}
|
|
210
|
+
aria-invalid=${this.invalid ? "true" : "false"}
|
|
211
|
+
aria-describedby=${message ? `${this.uid}-msg` : nothing}
|
|
212
|
+
@keydown=${this.onKeyDown}
|
|
213
|
+
@paste=${this.onPaste}
|
|
214
|
+
@input=${this.onInput}
|
|
215
|
+
@blur=${() => this.input.value.trim() && this.commitTyped()}
|
|
216
|
+
/>
|
|
217
|
+
</div>
|
|
218
|
+
${message ? html `<div class="supporting" id="${this.uid}-msg">${message}</div>` : nothing}
|
|
219
|
+
<div class="sr" role="status">${this.announcement}</div>
|
|
220
|
+
`;
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
__decorate([
|
|
224
|
+
property({ attribute: false })
|
|
225
|
+
], LitMaterialChipInput.prototype, "values", void 0);
|
|
226
|
+
__decorate([
|
|
227
|
+
property()
|
|
228
|
+
], LitMaterialChipInput.prototype, "label", void 0);
|
|
229
|
+
__decorate([
|
|
230
|
+
property()
|
|
231
|
+
], LitMaterialChipInput.prototype, "placeholder", void 0);
|
|
232
|
+
__decorate([
|
|
233
|
+
property({ attribute: "supporting-text" })
|
|
234
|
+
], LitMaterialChipInput.prototype, "supportingText", void 0);
|
|
235
|
+
__decorate([
|
|
236
|
+
property({ attribute: false })
|
|
237
|
+
], LitMaterialChipInput.prototype, "validator", void 0);
|
|
238
|
+
__decorate([
|
|
239
|
+
property({ type: Boolean, attribute: "allow-duplicates" })
|
|
240
|
+
], LitMaterialChipInput.prototype, "allowDuplicates", void 0);
|
|
241
|
+
__decorate([
|
|
242
|
+
property({ type: Number })
|
|
243
|
+
], LitMaterialChipInput.prototype, "max", void 0);
|
|
244
|
+
__decorate([
|
|
245
|
+
property({ type: Boolean, reflect: true })
|
|
246
|
+
], LitMaterialChipInput.prototype, "disabled", void 0);
|
|
247
|
+
__decorate([
|
|
248
|
+
property({ type: Boolean, reflect: true })
|
|
249
|
+
], LitMaterialChipInput.prototype, "invalid", void 0);
|
|
250
|
+
__decorate([
|
|
251
|
+
state()
|
|
252
|
+
], LitMaterialChipInput.prototype, "error", void 0);
|
|
253
|
+
__decorate([
|
|
254
|
+
state()
|
|
255
|
+
], LitMaterialChipInput.prototype, "announcement", void 0);
|
|
256
|
+
__decorate([
|
|
257
|
+
query("input")
|
|
258
|
+
], LitMaterialChipInput.prototype, "input", void 0);
|
|
259
|
+
LitMaterialChipInput = __decorate([
|
|
260
|
+
customElement("lit-material-chip-input")
|
|
261
|
+
], LitMaterialChipInput);
|
|
262
|
+
export { LitMaterialChipInput };
|
|
263
|
+
//# sourceMappingURL=chip-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chip-input.js","sourceRoot":"","sources":["../src/chip-input.ts"],"names":[],"mappings":"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"}
|
package/dist/chip.d.ts
CHANGED
|
@@ -31,6 +31,8 @@ export declare class LitMaterialChip extends LitElement {
|
|
|
31
31
|
disabled: boolean;
|
|
32
32
|
elevated: boolean;
|
|
33
33
|
removable: boolean;
|
|
34
|
+
/** Accessible name of the remove button, e.g. "Remove app=web". */
|
|
35
|
+
removeLabel: string;
|
|
34
36
|
/** If set, renders the main action as a link (`<a>`) instead of a `<button>`. */
|
|
35
37
|
href: string;
|
|
36
38
|
target: string;
|
package/dist/chip.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAU;IAEpB,OAAO,EAAE,WAAW,CAAY;IACA,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,SAAS,UAAS;
|
|
1
|
+
{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAU;IAEpB,OAAO,EAAE,WAAW,CAAY;IACA,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,SAAS,UAAS;IAC/C,mEAAmE;IAC1B,WAAW,SAAY;IAEhE,iFAAiF;IACrE,IAAI,SAAM;IACV,MAAM,SAAM;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAc;IAExE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;cAElC,YAAY,IAAI,IAAI;IAM9B,MAAM;IA8Ef,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,iBAAiB;CAQ1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
|
package/dist/chip.js
CHANGED
|
@@ -40,6 +40,8 @@ let LitMaterialChip = class LitMaterialChip extends LitElement {
|
|
|
40
40
|
this.disabled = false;
|
|
41
41
|
this.elevated = false;
|
|
42
42
|
this.removable = false;
|
|
43
|
+
/** Accessible name of the remove button, e.g. "Remove app=web". */
|
|
44
|
+
this.removeLabel = "Remove";
|
|
43
45
|
/** If set, renders the main action as a link (`<a>`) instead of a `<button>`. */
|
|
44
46
|
this.href = "";
|
|
45
47
|
this.target = "";
|
|
@@ -111,7 +113,7 @@ let LitMaterialChip = class LitMaterialChip extends LitElement {
|
|
|
111
113
|
part="remove-button"
|
|
112
114
|
type="button"
|
|
113
115
|
?disabled=${this.disabled}
|
|
114
|
-
aria-label
|
|
116
|
+
aria-label=${this.removeLabel}
|
|
115
117
|
@click=${this.handleRemoveClick}
|
|
116
118
|
>
|
|
117
119
|
<svg class="remove-icon" viewBox="0 0 18 18" aria-hidden="true">
|
|
@@ -164,6 +166,9 @@ __decorate([
|
|
|
164
166
|
__decorate([
|
|
165
167
|
property({ type: Boolean })
|
|
166
168
|
], LitMaterialChip.prototype, "removable", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
property({ attribute: "remove-label" })
|
|
171
|
+
], LitMaterialChip.prototype, "removeLabel", void 0);
|
|
167
172
|
__decorate([
|
|
168
173
|
property()
|
|
169
174
|
], LitMaterialChip.prototype, "href", void 0);
|
package/dist/chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI1C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGO,YAAO,GAAgB,QAAQ,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAChC,cAAS,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../src/chip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI1C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAGO,YAAO,GAAgB,QAAQ,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAChC,cAAS,GAAG,KAAK,CAAC;QAC/C,mEAAmE;QAC1B,gBAAW,GAAG,QAAQ,CAAC;QAEhE,iFAAiF;QACrE,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAG,EAAE,CAAC;QAIP,WAAM,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAiHvD,CAAC;aAjIiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAkBb,YAAY;QAC7B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC;QAC3C,MAAM,aAAa,GAAG,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;QAEhD,MAAM,WAAW,GAAG;YAClB,MAAM;YACN,IAAI,CAAC,OAAO;YACZ,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,MAAM,OAAO,GAAG,aAAa;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;SAIH;YACH,CAAC,CAAC,IAAI,CAAA,wDAAwD,CAAC;QAEjE,MAAM,aAAa,GAAG,IAAI,CAAA;;QAEtB,OAAO;;KAEV,CAAC;QAEF,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI;YACtB,CAAC,CAAC,IAAI,CAAA;;;;mBAIO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;qBACjC,IAAI,CAAC,MAAM,IAAI,OAAO;kBACzB,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO;4BAChD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;qBAC5B,IAAI,CAAC,eAAe;;cAE3B,aAAa;;SAElB;YACH,CAAC,CAAC,IAAI,CAAA;;;;;wBAKY,IAAI,CAAC,QAAQ;2BACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO;qBAChD,IAAI,CAAC,iBAAiB;;cAE7B,aAAa;;SAElB,CAAC;QAEN,OAAO,IAAI,CAAA;mBACI,WAAW;UACpB,MAAM;UACN,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;;4BAKY,IAAI,CAAC,QAAQ;6BACZ,IAAI,CAAC,WAAW;yBACpB,IAAI,CAAC,iBAAiB;;;;;;aAMlC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAiB;QACzC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAChC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACzE,CAAC;QACF,IAAI,OAAO;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC7B,CAAC;;AA9HW;IAAX,QAAQ,EAAE;gDAAiC;AACA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAChC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAmB;AAEN;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;oDAAwB;AAGpD;IAAX,QAAQ,EAAE;6CAAW;AACV;IAAX,QAAQ,EAAE;+CAAa;AAEgB;IAAvC,KAAK,CAAC,cAAc,CAAC;0DAAkD;AAf7D,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAkI3B"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAoB,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAoB,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}
|