@lit-material/confirm 0.0.0-stage → 0.0.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/LICENSE +21 -0
- package/README.md +88 -2
- package/custom-elements.json +338 -0
- package/dist/confirm-dialog.d.ts +60 -0
- package/dist/confirm-dialog.d.ts.map +1 -0
- package/dist/confirm-dialog.js +176 -0
- package/dist/confirm-dialog.js.map +1 -0
- package/dist/confirm.d.ts +22 -0
- package/dist/confirm.d.ts.map +1 -0
- package/dist/confirm.js +29 -0
- package/dist/confirm.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -0
- package/package.json +64 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 bohdaq
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,89 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @lit-material/confirm
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A confirmation dialog for actions that need a second look: `await confirm({ ... })`, with a
|
|
4
|
+
destructive style and an optional type-the-name-to-confirm field. Built with
|
|
5
|
+
[Lit](https://lit.dev/) on [`@lit-material/dialog`](../dialog). Part of
|
|
6
|
+
[lit-material](https://github.com/bohdaq/lit-material).
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```sh
|
|
11
|
+
npm install @lit-material/confirm @lit-material/tokens
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
import { confirm } from "@lit-material/confirm";
|
|
18
|
+
|
|
19
|
+
if (await confirm({ headline: "Purge the cache?", message: "Entries are refetched on demand.", confirmLabel: "Purge" })) {
|
|
20
|
+
await purge();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const ok = await confirm({
|
|
24
|
+
headline: "Delete project web?",
|
|
25
|
+
message: "Its VMs, disks and addresses are deleted too. This can't be undone.",
|
|
26
|
+
confirmLabel: "Delete",
|
|
27
|
+
destructive: true,
|
|
28
|
+
requireText: "web",
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
`confirm()` creates a `lit-material-confirm-dialog`, attaches it to `document.body` (or
|
|
33
|
+
`container`), awaits it and removes it. To keep one in your markup instead:
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<lit-material-confirm-dialog id="purge" headline="Purge the cache?" confirm-label="Purge">
|
|
37
|
+
Entries are refetched on demand.
|
|
38
|
+
</lit-material-confirm-dialog>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import "@lit-material/confirm";
|
|
42
|
+
const confirmed = await document.querySelector("#purge").show();
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## API
|
|
47
|
+
|
|
48
|
+
### `confirm(options): Promise<boolean>`
|
|
49
|
+
|
|
50
|
+
| Option | Type | Default |
|
|
51
|
+
| ------ | ---- | ------- |
|
|
52
|
+
| `headline` | `string` | required |
|
|
53
|
+
| `message` | `string` | `""` |
|
|
54
|
+
| `confirmLabel` | `string` | `"Confirm"` |
|
|
55
|
+
| `cancelLabel` | `string` | `"Cancel"` |
|
|
56
|
+
| `destructive` | `boolean` | `false` |
|
|
57
|
+
| `requireText` | `string` | `""` (no field) |
|
|
58
|
+
| `container` | `HTMLElement` | `document.body` |
|
|
59
|
+
|
|
60
|
+
### `lit-material-confirm-dialog`
|
|
61
|
+
|
|
62
|
+
| Property | Attribute | Type | Default |
|
|
63
|
+
| -------- | --------- | ---- | ------- |
|
|
64
|
+
| `headline` | `headline` | `string` | `""` |
|
|
65
|
+
| `message` | `message` | `string` | `""` |
|
|
66
|
+
| `confirmLabel` | `confirm-label` | `string` | `"Confirm"` |
|
|
67
|
+
| `cancelLabel` | `cancel-label` | `string` | `"Cancel"` |
|
|
68
|
+
| `destructive` | `destructive` | `boolean` | `false` |
|
|
69
|
+
| `requireText` | `require-text` | `string` | `""` |
|
|
70
|
+
| `open` | `open` | `boolean` | `false` |
|
|
71
|
+
| `returnValue` | — | `"confirm" \| "cancel" \| ""` | `""` |
|
|
72
|
+
|
|
73
|
+
| Method | |
|
|
74
|
+
| ------ | - |
|
|
75
|
+
| `show(): Promise<boolean>` | Opens it; resolves `true` on confirm, `false` on Cancel, Escape or a backdrop click. |
|
|
76
|
+
| `close(confirmed = false)` | Closes it as if the visitor picked that. |
|
|
77
|
+
|
|
78
|
+
The default slot replaces `message`. Fires `close` once after it closes.
|
|
79
|
+
|
|
80
|
+
## Behavior
|
|
81
|
+
|
|
82
|
+
Cancel gets focus when it opens, so a stray Enter doesn't confirm. With `require-text`, the field
|
|
83
|
+
gets focus instead, the confirm button stays disabled until the text matches exactly, and Enter
|
|
84
|
+
confirms once it does; the field is cleared every time it opens. `destructive` paints the confirm
|
|
85
|
+
button in `--md-sys-color-error`.
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
MIT
|
|
@@ -0,0 +1,338 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/confirm-dialog.ts",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "A confirmation dialog: a headline, a message, Cancel and a confirm button,\nbuilt on `lit-material-dialog`. `show()` resolves `true` when the visitor\nconfirms and `false` on Cancel, Escape or a backdrop click.\n\n`destructive` paints the confirm button in the error colour. Set\n`require-text` (say, the resource's name) and the confirm button stays\ndisabled until the visitor types it exactly — for deletes that can't be\nundone. Enter in that field confirms once it matches.\n\nFor one-off prompts, `confirm({ ... })` from this package creates one of\nthese, awaits it and removes it.",
|
|
12
|
+
"name": "LitMaterialConfirmDialog",
|
|
13
|
+
"slots": [
|
|
14
|
+
{
|
|
15
|
+
"description": "The message; overrides `message`.",
|
|
16
|
+
"name": ""
|
|
17
|
+
}
|
|
18
|
+
],
|
|
19
|
+
"members": [
|
|
20
|
+
{
|
|
21
|
+
"kind": "field",
|
|
22
|
+
"name": "headline",
|
|
23
|
+
"type": {
|
|
24
|
+
"text": "string"
|
|
25
|
+
},
|
|
26
|
+
"default": "\"\"",
|
|
27
|
+
"description": "The question, e.g. \"Delete project web?\".",
|
|
28
|
+
"attribute": "headline"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"kind": "field",
|
|
32
|
+
"name": "message",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"default": "\"\"",
|
|
37
|
+
"description": "Supporting text under the headline.",
|
|
38
|
+
"attribute": "message"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"kind": "field",
|
|
42
|
+
"name": "confirmLabel",
|
|
43
|
+
"type": {
|
|
44
|
+
"text": "string"
|
|
45
|
+
},
|
|
46
|
+
"default": "\"Confirm\"",
|
|
47
|
+
"description": "The confirm button's label.",
|
|
48
|
+
"attribute": "confirm-label"
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"kind": "field",
|
|
52
|
+
"name": "cancelLabel",
|
|
53
|
+
"type": {
|
|
54
|
+
"text": "string"
|
|
55
|
+
},
|
|
56
|
+
"default": "\"Cancel\"",
|
|
57
|
+
"description": "The cancel button's label.",
|
|
58
|
+
"attribute": "cancel-label"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"kind": "field",
|
|
62
|
+
"name": "destructive",
|
|
63
|
+
"type": {
|
|
64
|
+
"text": "boolean"
|
|
65
|
+
},
|
|
66
|
+
"default": "false",
|
|
67
|
+
"description": "Paint the confirm button in the error colour.",
|
|
68
|
+
"attribute": "destructive"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"kind": "field",
|
|
72
|
+
"name": "requireText",
|
|
73
|
+
"type": {
|
|
74
|
+
"text": "string"
|
|
75
|
+
},
|
|
76
|
+
"default": "\"\"",
|
|
77
|
+
"description": "Text the visitor must type before confirming (empty: no field).",
|
|
78
|
+
"attribute": "require-text"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"kind": "field",
|
|
82
|
+
"name": "open",
|
|
83
|
+
"type": {
|
|
84
|
+
"text": "boolean"
|
|
85
|
+
},
|
|
86
|
+
"default": "false",
|
|
87
|
+
"description": "Whether the dialog is open.",
|
|
88
|
+
"attribute": "open",
|
|
89
|
+
"reflects": true
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "field",
|
|
93
|
+
"name": "returnValue",
|
|
94
|
+
"type": {
|
|
95
|
+
"text": "string"
|
|
96
|
+
},
|
|
97
|
+
"default": "\"\"",
|
|
98
|
+
"description": "`\"confirm\"` or `\"cancel\"` once closed."
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"kind": "field",
|
|
102
|
+
"name": "typed",
|
|
103
|
+
"type": {
|
|
104
|
+
"text": "string"
|
|
105
|
+
},
|
|
106
|
+
"privacy": "private",
|
|
107
|
+
"default": "\"\""
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"kind": "field",
|
|
111
|
+
"name": "dialog",
|
|
112
|
+
"type": {
|
|
113
|
+
"text": "LitMaterialDialog | undefined"
|
|
114
|
+
},
|
|
115
|
+
"privacy": "private",
|
|
116
|
+
"readonly": true
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"kind": "field",
|
|
120
|
+
"name": "resolve",
|
|
121
|
+
"type": {
|
|
122
|
+
"text": "(confirmed: boolean) => void | undefined"
|
|
123
|
+
},
|
|
124
|
+
"privacy": "private"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"kind": "field",
|
|
128
|
+
"name": "textMatches",
|
|
129
|
+
"type": {
|
|
130
|
+
"text": "boolean"
|
|
131
|
+
},
|
|
132
|
+
"privacy": "private",
|
|
133
|
+
"readonly": true
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "method",
|
|
137
|
+
"name": "show",
|
|
138
|
+
"return": {
|
|
139
|
+
"type": {
|
|
140
|
+
"text": "Promise<boolean>"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
"description": "Opens the dialog; resolves `true` on confirm, `false` otherwise."
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"kind": "method",
|
|
147
|
+
"name": "close",
|
|
148
|
+
"return": {
|
|
149
|
+
"type": {
|
|
150
|
+
"text": "void"
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
"parameters": [
|
|
154
|
+
{
|
|
155
|
+
"name": "confirmed",
|
|
156
|
+
"default": "false"
|
|
157
|
+
}
|
|
158
|
+
],
|
|
159
|
+
"description": "Closes it as if the visitor picked `confirmed`."
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"kind": "field",
|
|
163
|
+
"name": "onSubmit",
|
|
164
|
+
"privacy": "private",
|
|
165
|
+
"readonly": true
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"kind": "field",
|
|
169
|
+
"name": "onDialogClose",
|
|
170
|
+
"privacy": "private",
|
|
171
|
+
"readonly": true
|
|
172
|
+
}
|
|
173
|
+
],
|
|
174
|
+
"events": [
|
|
175
|
+
{
|
|
176
|
+
"description": "After it closes; `returnValue` is `\"confirm\"` or `\"cancel\"`.",
|
|
177
|
+
"name": "close"
|
|
178
|
+
}
|
|
179
|
+
],
|
|
180
|
+
"attributes": [
|
|
181
|
+
{
|
|
182
|
+
"name": "headline",
|
|
183
|
+
"type": {
|
|
184
|
+
"text": "string"
|
|
185
|
+
},
|
|
186
|
+
"default": "\"\"",
|
|
187
|
+
"description": "The question, e.g. \"Delete project web?\".",
|
|
188
|
+
"fieldName": "headline"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "message",
|
|
192
|
+
"type": {
|
|
193
|
+
"text": "string"
|
|
194
|
+
},
|
|
195
|
+
"default": "\"\"",
|
|
196
|
+
"description": "Supporting text under the headline.",
|
|
197
|
+
"fieldName": "message"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"name": "confirm-label",
|
|
201
|
+
"type": {
|
|
202
|
+
"text": "string"
|
|
203
|
+
},
|
|
204
|
+
"default": "\"Confirm\"",
|
|
205
|
+
"description": "The confirm button's label.",
|
|
206
|
+
"fieldName": "confirmLabel"
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"name": "cancel-label",
|
|
210
|
+
"type": {
|
|
211
|
+
"text": "string"
|
|
212
|
+
},
|
|
213
|
+
"default": "\"Cancel\"",
|
|
214
|
+
"description": "The cancel button's label.",
|
|
215
|
+
"fieldName": "cancelLabel"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "destructive",
|
|
219
|
+
"type": {
|
|
220
|
+
"text": "boolean"
|
|
221
|
+
},
|
|
222
|
+
"default": "false",
|
|
223
|
+
"description": "Paint the confirm button in the error colour.",
|
|
224
|
+
"fieldName": "destructive"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "require-text",
|
|
228
|
+
"type": {
|
|
229
|
+
"text": "string"
|
|
230
|
+
},
|
|
231
|
+
"default": "\"\"",
|
|
232
|
+
"description": "Text the visitor must type before confirming (empty: no field).",
|
|
233
|
+
"fieldName": "requireText"
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"name": "open",
|
|
237
|
+
"type": {
|
|
238
|
+
"text": "boolean"
|
|
239
|
+
},
|
|
240
|
+
"default": "false",
|
|
241
|
+
"description": "Whether the dialog is open.",
|
|
242
|
+
"fieldName": "open"
|
|
243
|
+
}
|
|
244
|
+
],
|
|
245
|
+
"superclass": {
|
|
246
|
+
"name": "LitElement",
|
|
247
|
+
"package": "lit"
|
|
248
|
+
},
|
|
249
|
+
"tagName": "lit-material-confirm-dialog",
|
|
250
|
+
"customElement": true
|
|
251
|
+
}
|
|
252
|
+
],
|
|
253
|
+
"exports": [
|
|
254
|
+
{
|
|
255
|
+
"kind": "js",
|
|
256
|
+
"name": "LitMaterialConfirmDialog",
|
|
257
|
+
"declaration": {
|
|
258
|
+
"name": "LitMaterialConfirmDialog",
|
|
259
|
+
"module": "src/confirm-dialog.ts"
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"kind": "custom-element-definition",
|
|
264
|
+
"name": "lit-material-confirm-dialog",
|
|
265
|
+
"declaration": {
|
|
266
|
+
"name": "LitMaterialConfirmDialog",
|
|
267
|
+
"module": "src/confirm-dialog.ts"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
]
|
|
271
|
+
},
|
|
272
|
+
{
|
|
273
|
+
"kind": "javascript-module",
|
|
274
|
+
"path": "src/confirm.ts",
|
|
275
|
+
"declarations": [
|
|
276
|
+
{
|
|
277
|
+
"kind": "function",
|
|
278
|
+
"name": "confirm",
|
|
279
|
+
"return": {
|
|
280
|
+
"type": {
|
|
281
|
+
"text": "Promise<boolean>"
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
"parameters": [
|
|
285
|
+
{
|
|
286
|
+
"name": "options",
|
|
287
|
+
"type": {
|
|
288
|
+
"text": "ConfirmOptions"
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"description": "Asks a yes/no question in a `lit-material-confirm-dialog` and resolves\n`true` if the visitor confirms. The dialog is created for the call and\nremoved afterwards.\n\n```js\nif (await confirm({ headline: \"Delete project web?\", destructive: true, requireText: \"web\", confirmLabel: \"Delete\" })) { … }\n```"
|
|
293
|
+
}
|
|
294
|
+
],
|
|
295
|
+
"exports": [
|
|
296
|
+
{
|
|
297
|
+
"kind": "js",
|
|
298
|
+
"name": "confirm",
|
|
299
|
+
"declaration": {
|
|
300
|
+
"name": "confirm",
|
|
301
|
+
"module": "src/confirm.ts"
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
]
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
"kind": "javascript-module",
|
|
308
|
+
"path": "src/index.ts",
|
|
309
|
+
"declarations": [],
|
|
310
|
+
"exports": [
|
|
311
|
+
{
|
|
312
|
+
"kind": "js",
|
|
313
|
+
"name": "LitMaterialConfirmDialog",
|
|
314
|
+
"declaration": {
|
|
315
|
+
"name": "LitMaterialConfirmDialog",
|
|
316
|
+
"module": "./confirm-dialog.js"
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"kind": "js",
|
|
321
|
+
"name": "confirm",
|
|
322
|
+
"declaration": {
|
|
323
|
+
"name": "confirm",
|
|
324
|
+
"module": "./confirm.js"
|
|
325
|
+
}
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
"kind": "js",
|
|
329
|
+
"name": "ConfirmOptions",
|
|
330
|
+
"declaration": {
|
|
331
|
+
"name": "ConfirmOptions",
|
|
332
|
+
"module": "./confirm.js"
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
]
|
|
338
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "@lit-material/button";
|
|
3
|
+
import "@lit-material/dialog";
|
|
4
|
+
import "@lit-material/text-field";
|
|
5
|
+
/**
|
|
6
|
+
* A confirmation dialog: a headline, a message, Cancel and a confirm button,
|
|
7
|
+
* built on `lit-material-dialog`. `show()` resolves `true` when the visitor
|
|
8
|
+
* confirms and `false` on Cancel, Escape or a backdrop click.
|
|
9
|
+
*
|
|
10
|
+
* `destructive` paints the confirm button in the error colour. Set
|
|
11
|
+
* `require-text` (say, the resource's name) and the confirm button stays
|
|
12
|
+
* disabled until the visitor types it exactly — for deletes that can't be
|
|
13
|
+
* undone. Enter in that field confirms once it matches.
|
|
14
|
+
*
|
|
15
|
+
* For one-off prompts, `confirm({ ... })` from this package creates one of
|
|
16
|
+
* these, awaits it and removes it.
|
|
17
|
+
*
|
|
18
|
+
* @element lit-material-confirm-dialog
|
|
19
|
+
*
|
|
20
|
+
* @slot - The message; overrides `message`.
|
|
21
|
+
*
|
|
22
|
+
* @fires close - After it closes; `returnValue` is `"confirm"` or `"cancel"`.
|
|
23
|
+
*/
|
|
24
|
+
export declare class LitMaterialConfirmDialog extends LitElement {
|
|
25
|
+
static styles: import("lit").CSSResult;
|
|
26
|
+
/** The question, e.g. "Delete project web?". */
|
|
27
|
+
headline: string;
|
|
28
|
+
/** Supporting text under the headline. */
|
|
29
|
+
message: string;
|
|
30
|
+
/** The confirm button's label. */
|
|
31
|
+
confirmLabel: string;
|
|
32
|
+
/** The cancel button's label. */
|
|
33
|
+
cancelLabel: string;
|
|
34
|
+
/** Paint the confirm button in the error colour. */
|
|
35
|
+
destructive: boolean;
|
|
36
|
+
/** Text the visitor must type before confirming (empty: no field). */
|
|
37
|
+
requireText: string;
|
|
38
|
+
/** Whether the dialog is open. */
|
|
39
|
+
open: boolean;
|
|
40
|
+
/** `"confirm"` or `"cancel"` once closed. */
|
|
41
|
+
returnValue: string;
|
|
42
|
+
private typed;
|
|
43
|
+
private readonly dialog?;
|
|
44
|
+
private resolve?;
|
|
45
|
+
private get textMatches();
|
|
46
|
+
/** Opens the dialog; resolves `true` on confirm, `false` otherwise. */
|
|
47
|
+
show(): Promise<boolean>;
|
|
48
|
+
/** Closes it as if the visitor picked `confirmed`. */
|
|
49
|
+
close(confirmed?: boolean): void;
|
|
50
|
+
protected updated(changed: Map<string, unknown>): Promise<void>;
|
|
51
|
+
private readonly onSubmit;
|
|
52
|
+
private readonly onDialogClose;
|
|
53
|
+
render(): import("lit").TemplateResult<1>;
|
|
54
|
+
}
|
|
55
|
+
declare global {
|
|
56
|
+
interface HTMLElementTagNameMap {
|
|
57
|
+
"lit-material-confirm-dialog": LitMaterialConfirmDialog;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=confirm-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAErD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAGlC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAoBpB;IAEF,gDAAgD;IACpC,QAAQ,SAAM;IAE1B,0CAA0C;IAC9B,OAAO,SAAM;IAEzB,kCAAkC;IACQ,YAAY,SAAa;IAEnE,iCAAiC;IACQ,WAAW,SAAY;IAEhE,oDAAoD;IACvB,WAAW,UAAS;IAEjD,sEAAsE;IAC7B,WAAW,SAAM;IAE1D,kCAAkC;IACU,IAAI,UAAS;IAEzD,6CAA6C;IACpC,WAAW,SAAM;IAEjB,OAAO,CAAC,KAAK,CAAM;IAEE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAoB;IAE1E,OAAO,CAAC,OAAO,CAAC,CAA+B;IAE/C,OAAO,KAAK,WAAW,GAEtB;IAED,uEAAuE;IACvE,IAAI,IAAI,OAAO,CAAC,OAAO,CAAC;IAQxB,sDAAsD;IACtD,KAAK,CAAC,SAAS,UAAQ,GAAG,IAAI;cAKL,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAW9E,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAGvB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAS5B;IAEO,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}
|
|
@@ -0,0 +1,176 @@
|
|
|
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 "@lit-material/button";
|
|
10
|
+
import "@lit-material/dialog";
|
|
11
|
+
import "@lit-material/text-field";
|
|
12
|
+
/**
|
|
13
|
+
* A confirmation dialog: a headline, a message, Cancel and a confirm button,
|
|
14
|
+
* built on `lit-material-dialog`. `show()` resolves `true` when the visitor
|
|
15
|
+
* confirms and `false` on Cancel, Escape or a backdrop click.
|
|
16
|
+
*
|
|
17
|
+
* `destructive` paints the confirm button in the error colour. Set
|
|
18
|
+
* `require-text` (say, the resource's name) and the confirm button stays
|
|
19
|
+
* disabled until the visitor types it exactly — for deletes that can't be
|
|
20
|
+
* undone. Enter in that field confirms once it matches.
|
|
21
|
+
*
|
|
22
|
+
* For one-off prompts, `confirm({ ... })` from this package creates one of
|
|
23
|
+
* these, awaits it and removes it.
|
|
24
|
+
*
|
|
25
|
+
* @element lit-material-confirm-dialog
|
|
26
|
+
*
|
|
27
|
+
* @slot - The message; overrides `message`.
|
|
28
|
+
*
|
|
29
|
+
* @fires close - After it closes; `returnValue` is `"confirm"` or `"cancel"`.
|
|
30
|
+
*/
|
|
31
|
+
let LitMaterialConfirmDialog = class LitMaterialConfirmDialog extends LitElement {
|
|
32
|
+
constructor() {
|
|
33
|
+
super(...arguments);
|
|
34
|
+
/** The question, e.g. "Delete project web?". */
|
|
35
|
+
this.headline = "";
|
|
36
|
+
/** Supporting text under the headline. */
|
|
37
|
+
this.message = "";
|
|
38
|
+
/** The confirm button's label. */
|
|
39
|
+
this.confirmLabel = "Confirm";
|
|
40
|
+
/** The cancel button's label. */
|
|
41
|
+
this.cancelLabel = "Cancel";
|
|
42
|
+
/** Paint the confirm button in the error colour. */
|
|
43
|
+
this.destructive = false;
|
|
44
|
+
/** Text the visitor must type before confirming (empty: no field). */
|
|
45
|
+
this.requireText = "";
|
|
46
|
+
/** Whether the dialog is open. */
|
|
47
|
+
this.open = false;
|
|
48
|
+
/** `"confirm"` or `"cancel"` once closed. */
|
|
49
|
+
this.returnValue = "";
|
|
50
|
+
this.typed = "";
|
|
51
|
+
this.onSubmit = (event) => {
|
|
52
|
+
event.preventDefault();
|
|
53
|
+
if (this.textMatches)
|
|
54
|
+
this.close(true);
|
|
55
|
+
};
|
|
56
|
+
this.onDialogClose = (event) => {
|
|
57
|
+
// Ours replaces the inner dialog's.
|
|
58
|
+
event.stopPropagation();
|
|
59
|
+
if (!this.returnValue)
|
|
60
|
+
this.returnValue = "cancel";
|
|
61
|
+
this.open = false;
|
|
62
|
+
const resolve = this.resolve;
|
|
63
|
+
this.resolve = undefined;
|
|
64
|
+
resolve?.(this.returnValue === "confirm");
|
|
65
|
+
this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
static { this.styles = css `
|
|
69
|
+
:host {
|
|
70
|
+
display: contents;
|
|
71
|
+
}
|
|
72
|
+
form {
|
|
73
|
+
display: grid;
|
|
74
|
+
gap: 16px;
|
|
75
|
+
}
|
|
76
|
+
p {
|
|
77
|
+
margin: 0;
|
|
78
|
+
}
|
|
79
|
+
.destructive {
|
|
80
|
+
--md-sys-color-primary: var(--md-sys-color-error, light-dark(#b3261e, #f2b8b5));
|
|
81
|
+
--md-sys-color-on-primary: var(--md-sys-color-on-error, light-dark(#ffffff, #601410));
|
|
82
|
+
}
|
|
83
|
+
.actions {
|
|
84
|
+
display: flex;
|
|
85
|
+
justify-content: flex-end;
|
|
86
|
+
gap: 8px;
|
|
87
|
+
}
|
|
88
|
+
`; }
|
|
89
|
+
get textMatches() {
|
|
90
|
+
return this.requireText === "" || this.typed === this.requireText;
|
|
91
|
+
}
|
|
92
|
+
/** Opens the dialog; resolves `true` on confirm, `false` otherwise. */
|
|
93
|
+
show() {
|
|
94
|
+
this.resolve?.(false);
|
|
95
|
+
this.typed = "";
|
|
96
|
+
this.returnValue = "";
|
|
97
|
+
this.open = true;
|
|
98
|
+
return new Promise((resolve) => (this.resolve = resolve));
|
|
99
|
+
}
|
|
100
|
+
/** Closes it as if the visitor picked `confirmed`. */
|
|
101
|
+
close(confirmed = false) {
|
|
102
|
+
this.returnValue = confirmed ? "confirm" : "cancel";
|
|
103
|
+
this.open = false;
|
|
104
|
+
}
|
|
105
|
+
async updated(changed) {
|
|
106
|
+
if (!changed.has("open"))
|
|
107
|
+
return;
|
|
108
|
+
if (this.open) {
|
|
109
|
+
await this.dialog?.updateComplete;
|
|
110
|
+
// The safe choice gets focus, so a stray Enter doesn't confirm; with a
|
|
111
|
+
// type-to-confirm field, the field does.
|
|
112
|
+
const target = this.renderRoot.querySelector(this.requireText ? "lit-material-text-field" : ".cancel");
|
|
113
|
+
target?.focus();
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
render() {
|
|
117
|
+
return html `
|
|
118
|
+
<lit-material-dialog .open=${this.open} @close=${this.onDialogClose} @cancel=${(e) => e.stopPropagation()}>
|
|
119
|
+
<span slot="headline">${this.headline}</span>
|
|
120
|
+
<form @submit=${this.onSubmit}>
|
|
121
|
+
<slot>${this.message ? html `<p>${this.message}</p>` : nothing}</slot>
|
|
122
|
+
${this.requireText
|
|
123
|
+
? html `<lit-material-text-field
|
|
124
|
+
variant="outlined"
|
|
125
|
+
label=${`Type ${this.requireText} to confirm`}
|
|
126
|
+
autocomplete="off"
|
|
127
|
+
.value=${this.typed}
|
|
128
|
+
@input=${(e) => (this.typed = e.target.value)}
|
|
129
|
+
></lit-material-text-field>`
|
|
130
|
+
: nothing}
|
|
131
|
+
<div class="actions">
|
|
132
|
+
<lit-material-button class="cancel" variant="text" @click=${() => this.close(false)}>${this.cancelLabel}</lit-material-button>
|
|
133
|
+
<lit-material-button class=${this.destructive ? "confirm destructive" : "confirm"} type="submit" ?disabled=${!this.textMatches}
|
|
134
|
+
>${this.confirmLabel}</lit-material-button
|
|
135
|
+
>
|
|
136
|
+
</div>
|
|
137
|
+
</form>
|
|
138
|
+
</lit-material-dialog>
|
|
139
|
+
`;
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
__decorate([
|
|
143
|
+
property()
|
|
144
|
+
], LitMaterialConfirmDialog.prototype, "headline", void 0);
|
|
145
|
+
__decorate([
|
|
146
|
+
property()
|
|
147
|
+
], LitMaterialConfirmDialog.prototype, "message", void 0);
|
|
148
|
+
__decorate([
|
|
149
|
+
property({ attribute: "confirm-label" })
|
|
150
|
+
], LitMaterialConfirmDialog.prototype, "confirmLabel", void 0);
|
|
151
|
+
__decorate([
|
|
152
|
+
property({ attribute: "cancel-label" })
|
|
153
|
+
], LitMaterialConfirmDialog.prototype, "cancelLabel", void 0);
|
|
154
|
+
__decorate([
|
|
155
|
+
property({ type: Boolean })
|
|
156
|
+
], LitMaterialConfirmDialog.prototype, "destructive", void 0);
|
|
157
|
+
__decorate([
|
|
158
|
+
property({ attribute: "require-text" })
|
|
159
|
+
], LitMaterialConfirmDialog.prototype, "requireText", void 0);
|
|
160
|
+
__decorate([
|
|
161
|
+
property({ type: Boolean, reflect: true })
|
|
162
|
+
], LitMaterialConfirmDialog.prototype, "open", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
state()
|
|
165
|
+
], LitMaterialConfirmDialog.prototype, "returnValue", void 0);
|
|
166
|
+
__decorate([
|
|
167
|
+
state()
|
|
168
|
+
], LitMaterialConfirmDialog.prototype, "typed", void 0);
|
|
169
|
+
__decorate([
|
|
170
|
+
query("lit-material-dialog")
|
|
171
|
+
], LitMaterialConfirmDialog.prototype, "dialog", void 0);
|
|
172
|
+
LitMaterialConfirmDialog = __decorate([
|
|
173
|
+
customElement("lit-material-confirm-dialog")
|
|
174
|
+
], LitMaterialConfirmDialog);
|
|
175
|
+
export { LitMaterialConfirmDialog };
|
|
176
|
+
//# sourceMappingURL=confirm-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export interface ConfirmOptions {
|
|
2
|
+
headline: string;
|
|
3
|
+
message?: string;
|
|
4
|
+
confirmLabel?: string;
|
|
5
|
+
cancelLabel?: string;
|
|
6
|
+
destructive?: boolean;
|
|
7
|
+
/** Text the visitor must type before confirming. */
|
|
8
|
+
requireText?: string;
|
|
9
|
+
/** Where the dialog is attached while open (default `document.body`). */
|
|
10
|
+
container?: HTMLElement;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Asks a yes/no question in a `lit-material-confirm-dialog` and resolves
|
|
14
|
+
* `true` if the visitor confirms. The dialog is created for the call and
|
|
15
|
+
* removed afterwards.
|
|
16
|
+
*
|
|
17
|
+
* ```js
|
|
18
|
+
* if (await confirm({ headline: "Delete project web?", destructive: true, requireText: "web", confirmLabel: "Delete" })) { … }
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function confirm(options: ConfirmOptions): Promise<boolean>;
|
|
22
|
+
//# sourceMappingURL=confirm.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm.d.ts","sourceRoot":"","sources":["../src/confirm.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,wBAAsB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,CAcvE"}
|
package/dist/confirm.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { LitMaterialConfirmDialog } from "./confirm-dialog.js";
|
|
2
|
+
/**
|
|
3
|
+
* Asks a yes/no question in a `lit-material-confirm-dialog` and resolves
|
|
4
|
+
* `true` if the visitor confirms. The dialog is created for the call and
|
|
5
|
+
* removed afterwards.
|
|
6
|
+
*
|
|
7
|
+
* ```js
|
|
8
|
+
* if (await confirm({ headline: "Delete project web?", destructive: true, requireText: "web", confirmLabel: "Delete" })) { … }
|
|
9
|
+
* ```
|
|
10
|
+
*/
|
|
11
|
+
export async function confirm(options) {
|
|
12
|
+
const el = new LitMaterialConfirmDialog();
|
|
13
|
+
el.headline = options.headline;
|
|
14
|
+
el.message = options.message ?? "";
|
|
15
|
+
if (options.confirmLabel)
|
|
16
|
+
el.confirmLabel = options.confirmLabel;
|
|
17
|
+
if (options.cancelLabel)
|
|
18
|
+
el.cancelLabel = options.cancelLabel;
|
|
19
|
+
el.destructive = options.destructive ?? false;
|
|
20
|
+
el.requireText = options.requireText ?? "";
|
|
21
|
+
(options.container ?? document.body).append(el);
|
|
22
|
+
try {
|
|
23
|
+
return await el.show();
|
|
24
|
+
}
|
|
25
|
+
finally {
|
|
26
|
+
el.remove();
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=confirm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm.js","sourceRoot":"","sources":["../src/confirm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAc/D;;;;;;;;GAQG;AACH,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,OAAuB;IACnD,MAAM,EAAE,GAAG,IAAI,wBAAwB,EAAE,CAAC;IAC1C,EAAE,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IAC/B,EAAE,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;IACnC,IAAI,OAAO,CAAC,YAAY;QAAE,EAAE,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;IACjE,IAAI,OAAO,CAAC,WAAW;QAAE,EAAE,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC9D,EAAE,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,KAAK,CAAC;IAC9C,EAAE,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC;IAC3C,CAAC,OAAO,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAChD,IAAI,CAAC;QACH,OAAO,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;YAAS,CAAC;QACT,EAAE,CAAC,MAAM,EAAE,CAAC;IACd,CAAC;AACH,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,67 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lit-material/confirm",
|
|
3
|
-
"version": "0.0.0
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"description": "Confirmation dialog for lit-material: await confirm({...}) for destructive actions, with an optional type-the-name-to-confirm field.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": {
|
|
7
|
+
"name": "bohdaq",
|
|
8
|
+
"email": "bohdaq@gmail.com",
|
|
9
|
+
"url": "https://github.com/bohdaq"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/bohdaq/lit-material#readme",
|
|
12
|
+
"bugs": "https://github.com/bohdaq/lit-material/issues",
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+ssh://git@github.com/bohdaq/lit-material.git",
|
|
16
|
+
"directory": "packages/confirm"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"lit",
|
|
20
|
+
"web-components",
|
|
21
|
+
"lit-material",
|
|
22
|
+
"material-design",
|
|
23
|
+
"material-design-3",
|
|
24
|
+
"confirm",
|
|
25
|
+
"dialog"
|
|
26
|
+
],
|
|
27
|
+
"type": "module",
|
|
28
|
+
"main": "./dist/index.js",
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"exports": {
|
|
31
|
+
".": {
|
|
32
|
+
"types": "./dist/index.d.ts",
|
|
33
|
+
"default": "./dist/index.js"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"files": [
|
|
37
|
+
"dist",
|
|
38
|
+
"custom-elements.json"
|
|
39
|
+
],
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"lit": "^3.2.0",
|
|
45
|
+
"@lit-material/text-field": "0.1.1",
|
|
46
|
+
"@lit-material/tokens": "0.0.1",
|
|
47
|
+
"@lit-material/button": "0.1.0",
|
|
48
|
+
"@lit-material/dialog": "0.0.2"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@lit-labs/ssr": "^3.3.1",
|
|
52
|
+
"@open-wc/testing": "^4.0.0",
|
|
53
|
+
"@web/dev-server-esbuild": "^1.0.0",
|
|
54
|
+
"@web/test-runner": "^0.19.0",
|
|
55
|
+
"@web/test-runner-commands": "^0.9.0",
|
|
56
|
+
"@web/test-runner-playwright": "^0.11.0",
|
|
57
|
+
"tsx": "^4.19.0",
|
|
58
|
+
"typescript": "^5.7.0"
|
|
59
|
+
},
|
|
60
|
+
"customElements": "custom-elements.json",
|
|
61
|
+
"scripts": {
|
|
62
|
+
"build": "tsc -p tsconfig.json",
|
|
63
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
64
|
+
"test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts",
|
|
65
|
+
"analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
|
|
66
|
+
}
|
|
6
67
|
}
|