@vaadin/confirm-dialog 24.1.0-alpha9 → 24.1.0-beta2
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/package.json +10 -9
- package/src/vaadin-confirm-dialog-overlay.js +1 -0
- package/src/vaadin-confirm-dialog.d.ts +13 -0
- package/src/vaadin-confirm-dialog.js +30 -1
- package/web-types.json +306 -2
- package/web-types.lit.json +136 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "24.1.0-
|
|
3
|
+
"version": "24.1.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,16 +36,17 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/button": "24.1.0-
|
|
40
|
-
"@vaadin/component-base": "24.1.0-
|
|
41
|
-
"@vaadin/dialog": "24.1.0-
|
|
42
|
-
"@vaadin/overlay": "24.1.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.1.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.1.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.1.0-
|
|
39
|
+
"@vaadin/button": "24.1.0-beta2",
|
|
40
|
+
"@vaadin/component-base": "24.1.0-beta2",
|
|
41
|
+
"@vaadin/dialog": "24.1.0-beta2",
|
|
42
|
+
"@vaadin/overlay": "24.1.0-beta2",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-beta2",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.1.0-beta2",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-beta2"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
|
+
"@vaadin/a11y-base": "24.1.0-beta2",
|
|
49
50
|
"@vaadin/testing-helpers": "^0.4.0",
|
|
50
51
|
"sinon": "^13.0.2"
|
|
51
52
|
},
|
|
@@ -53,5 +54,5 @@
|
|
|
53
54
|
"web-types.json",
|
|
54
55
|
"web-types.lit.json"
|
|
55
56
|
],
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "83536fcc7d6661a593b2713cb99a8cb74f2fd868"
|
|
57
58
|
}
|
|
@@ -73,6 +73,19 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
|
|
|
73
73
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
74
74
|
*/
|
|
75
75
|
declare class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement))) {
|
|
76
|
+
/**
|
|
77
|
+
* Sets the `aria-describedby` attribute of the overlay element.
|
|
78
|
+
*
|
|
79
|
+
* By default, all elements inside the message area are linked
|
|
80
|
+
* through the `aria-describedby` attribute. However, there are
|
|
81
|
+
* cases where this can confuse screen reader users (e.g. the dialog
|
|
82
|
+
* may present a password confirmation form). For these cases,
|
|
83
|
+
* it's better to associate only the elements that will help describe
|
|
84
|
+
* the confirmation dialog through this API.
|
|
85
|
+
* @attr {string} accessible-description-ref
|
|
86
|
+
*/
|
|
87
|
+
accessibleDescriptionRef: string | null | undefined;
|
|
88
|
+
|
|
76
89
|
/**
|
|
77
90
|
* True if the overlay is currently displayed.
|
|
78
91
|
*/
|
|
@@ -103,6 +103,19 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
103
103
|
|
|
104
104
|
static get properties() {
|
|
105
105
|
return {
|
|
106
|
+
/**
|
|
107
|
+
* Sets the `aria-describedby` attribute of the overlay element.
|
|
108
|
+
*
|
|
109
|
+
* By default, all elements inside the message area are linked
|
|
110
|
+
* through the `aria-describedby` attribute. However, there are
|
|
111
|
+
* cases where this can confuse screen reader users (e.g. the dialog
|
|
112
|
+
* may present a password confirmation form). For these cases,
|
|
113
|
+
* it's better to associate only the elements that will help describe
|
|
114
|
+
* the confirmation dialog through this API.
|
|
115
|
+
*/
|
|
116
|
+
accessibleDescriptionRef: {
|
|
117
|
+
type: String,
|
|
118
|
+
},
|
|
106
119
|
/**
|
|
107
120
|
* True if the overlay is currently displayed.
|
|
108
121
|
* @type {boolean}
|
|
@@ -304,6 +317,7 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
304
317
|
'__updateHeaderNode(_headerNode, header)',
|
|
305
318
|
'__updateMessageNodes(_messageNodes, message)',
|
|
306
319
|
'__updateRejectButton(_rejectButton, rejectText, rejectTheme, rejectButtonVisible)',
|
|
320
|
+
'__accessibleDescriptionRefChanged(_overlayElement, accessibleDescriptionRef)',
|
|
307
321
|
];
|
|
308
322
|
}
|
|
309
323
|
|
|
@@ -376,6 +390,19 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
376
390
|
this.addController(this._confirmController);
|
|
377
391
|
}
|
|
378
392
|
|
|
393
|
+
/** @private */
|
|
394
|
+
__accessibleDescriptionRefChanged(_overlayElement, accessibleDescriptionRef) {
|
|
395
|
+
if (!_overlayElement || (!accessibleDescriptionRef && !this.__oldAccessibleDescriptionRef)) {
|
|
396
|
+
return;
|
|
397
|
+
}
|
|
398
|
+
setAriaIDReference(this._overlayElement, 'aria-describedby', {
|
|
399
|
+
newId: accessibleDescriptionRef,
|
|
400
|
+
oldId: this.__oldAccessibleDescriptionRef,
|
|
401
|
+
fromUser: true,
|
|
402
|
+
});
|
|
403
|
+
this.__oldAccessibleDescriptionRef = accessibleDescriptionRef;
|
|
404
|
+
}
|
|
405
|
+
|
|
379
406
|
/** @private */
|
|
380
407
|
__onDialogOpened() {
|
|
381
408
|
const overlay = this._overlayElement;
|
|
@@ -442,7 +469,9 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
|
|
|
442
469
|
/** @private */
|
|
443
470
|
__updateMessageNodes(nodes, message) {
|
|
444
471
|
if (nodes && nodes.length > 0) {
|
|
445
|
-
const defaultWrapperNode = nodes.find(
|
|
472
|
+
const defaultWrapperNode = nodes.find(
|
|
473
|
+
(node) => this._messageController.defaultNode && node === this._messageController.defaultNode.parentElement,
|
|
474
|
+
);
|
|
446
475
|
if (defaultWrapperNode) {
|
|
447
476
|
defaultWrapperNode.firstChild.textContent = message;
|
|
448
477
|
}
|
package/web-types.json
CHANGED
|
@@ -1,11 +1,315 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.1.0-
|
|
4
|
+
"version": "24.1.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
|
-
"elements": [
|
|
8
|
+
"elements": [
|
|
9
|
+
{
|
|
10
|
+
"name": "vaadin-confirm-dialog",
|
|
11
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-beta2/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
|
|
12
|
+
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "opened",
|
|
26
|
+
"description": "True if the overlay is currently displayed.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"boolean"
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "header",
|
|
35
|
+
"description": "Set the confirmation dialog title.",
|
|
36
|
+
"value": {
|
|
37
|
+
"type": [
|
|
38
|
+
"string"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "message",
|
|
44
|
+
"description": "Set the message or confirmation question.",
|
|
45
|
+
"value": {
|
|
46
|
+
"type": [
|
|
47
|
+
"string",
|
|
48
|
+
"null",
|
|
49
|
+
"undefined"
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "confirm-text",
|
|
55
|
+
"description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
56
|
+
"value": {
|
|
57
|
+
"type": [
|
|
58
|
+
"string"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "confirm-theme",
|
|
64
|
+
"description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
65
|
+
"value": {
|
|
66
|
+
"type": [
|
|
67
|
+
"string"
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "no-close-on-esc",
|
|
73
|
+
"description": "Set to true to disable closing dialog on Escape press",
|
|
74
|
+
"value": {
|
|
75
|
+
"type": [
|
|
76
|
+
"boolean"
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "reject-button-visible",
|
|
82
|
+
"description": "Whether to show reject button or not.",
|
|
83
|
+
"value": {
|
|
84
|
+
"type": [
|
|
85
|
+
"boolean"
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "reject-text",
|
|
91
|
+
"description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
92
|
+
"value": {
|
|
93
|
+
"type": [
|
|
94
|
+
"string"
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"name": "reject-theme",
|
|
100
|
+
"description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
101
|
+
"value": {
|
|
102
|
+
"type": [
|
|
103
|
+
"string"
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "cancel-button-visible",
|
|
109
|
+
"description": "Whether to show cancel button or not.",
|
|
110
|
+
"value": {
|
|
111
|
+
"type": [
|
|
112
|
+
"boolean"
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"name": "cancel-text",
|
|
118
|
+
"description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
119
|
+
"value": {
|
|
120
|
+
"type": [
|
|
121
|
+
"string"
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"name": "cancel-theme",
|
|
127
|
+
"description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
128
|
+
"value": {
|
|
129
|
+
"type": [
|
|
130
|
+
"string"
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": "overlay-class",
|
|
136
|
+
"description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
|
|
137
|
+
"value": {
|
|
138
|
+
"type": [
|
|
139
|
+
"string",
|
|
140
|
+
"null",
|
|
141
|
+
"undefined"
|
|
142
|
+
]
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"name": "theme",
|
|
147
|
+
"description": "The theme variants to apply to the component.",
|
|
148
|
+
"value": {
|
|
149
|
+
"type": [
|
|
150
|
+
"string",
|
|
151
|
+
"null",
|
|
152
|
+
"undefined"
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
],
|
|
157
|
+
"js": {
|
|
158
|
+
"properties": [
|
|
159
|
+
{
|
|
160
|
+
"name": "accessibleDescriptionRef",
|
|
161
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
|
|
162
|
+
"value": {
|
|
163
|
+
"type": [
|
|
164
|
+
"string",
|
|
165
|
+
"null",
|
|
166
|
+
"undefined"
|
|
167
|
+
]
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"name": "opened",
|
|
172
|
+
"description": "True if the overlay is currently displayed.",
|
|
173
|
+
"value": {
|
|
174
|
+
"type": [
|
|
175
|
+
"boolean"
|
|
176
|
+
]
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "header",
|
|
181
|
+
"description": "Set the confirmation dialog title.",
|
|
182
|
+
"value": {
|
|
183
|
+
"type": [
|
|
184
|
+
"string"
|
|
185
|
+
]
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"name": "message",
|
|
190
|
+
"description": "Set the message or confirmation question.",
|
|
191
|
+
"value": {
|
|
192
|
+
"type": [
|
|
193
|
+
"string",
|
|
194
|
+
"null",
|
|
195
|
+
"undefined"
|
|
196
|
+
]
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"name": "confirmText",
|
|
201
|
+
"description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
202
|
+
"value": {
|
|
203
|
+
"type": [
|
|
204
|
+
"string"
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
},
|
|
208
|
+
{
|
|
209
|
+
"name": "confirmTheme",
|
|
210
|
+
"description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
211
|
+
"value": {
|
|
212
|
+
"type": [
|
|
213
|
+
"string"
|
|
214
|
+
]
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"name": "noCloseOnEsc",
|
|
219
|
+
"description": "Set to true to disable closing dialog on Escape press",
|
|
220
|
+
"value": {
|
|
221
|
+
"type": [
|
|
222
|
+
"boolean"
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"name": "rejectButtonVisible",
|
|
228
|
+
"description": "Whether to show reject button or not.",
|
|
229
|
+
"value": {
|
|
230
|
+
"type": [
|
|
231
|
+
"boolean"
|
|
232
|
+
]
|
|
233
|
+
}
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"name": "rejectText",
|
|
237
|
+
"description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
238
|
+
"value": {
|
|
239
|
+
"type": [
|
|
240
|
+
"string"
|
|
241
|
+
]
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
{
|
|
245
|
+
"name": "rejectTheme",
|
|
246
|
+
"description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
247
|
+
"value": {
|
|
248
|
+
"type": [
|
|
249
|
+
"string"
|
|
250
|
+
]
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "cancelButtonVisible",
|
|
255
|
+
"description": "Whether to show cancel button or not.",
|
|
256
|
+
"value": {
|
|
257
|
+
"type": [
|
|
258
|
+
"boolean"
|
|
259
|
+
]
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"name": "cancelText",
|
|
264
|
+
"description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
265
|
+
"value": {
|
|
266
|
+
"type": [
|
|
267
|
+
"string"
|
|
268
|
+
]
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"name": "cancelTheme",
|
|
273
|
+
"description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
274
|
+
"value": {
|
|
275
|
+
"type": [
|
|
276
|
+
"string"
|
|
277
|
+
]
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
{
|
|
281
|
+
"name": "overlayClass",
|
|
282
|
+
"description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
|
|
283
|
+
"value": {
|
|
284
|
+
"type": [
|
|
285
|
+
"string",
|
|
286
|
+
"null",
|
|
287
|
+
"undefined"
|
|
288
|
+
]
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"events": [
|
|
293
|
+
{
|
|
294
|
+
"name": "cancel",
|
|
295
|
+
"description": "cancel\nfired when Cancel button or Escape key was pressed."
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
"name": "confirm",
|
|
299
|
+
"description": "confirm\nfired when Confirm button was pressed."
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"name": "reject",
|
|
303
|
+
"description": "reject\nfired when Reject button was pressed."
|
|
304
|
+
},
|
|
305
|
+
{
|
|
306
|
+
"name": "opened-changed",
|
|
307
|
+
"description": "Fired when the `opened` property changes."
|
|
308
|
+
}
|
|
309
|
+
]
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
]
|
|
9
313
|
}
|
|
10
314
|
}
|
|
11
315
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.1.0-
|
|
4
|
+
"version": "24.1.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -13,7 +13,141 @@
|
|
|
13
13
|
},
|
|
14
14
|
"contributions": {
|
|
15
15
|
"html": {
|
|
16
|
-
"elements": [
|
|
16
|
+
"elements": [
|
|
17
|
+
{
|
|
18
|
+
"name": "vaadin-confirm-dialog",
|
|
19
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.1.0-beta2/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
|
|
20
|
+
"extension": true,
|
|
21
|
+
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": "?opened",
|
|
24
|
+
"description": "True if the overlay is currently displayed.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?noCloseOnEsc",
|
|
31
|
+
"description": "Set to true to disable closing dialog on Escape press",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?rejectButtonVisible",
|
|
38
|
+
"description": "Whether to show reject button or not.",
|
|
39
|
+
"value": {
|
|
40
|
+
"kind": "expression"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?cancelButtonVisible",
|
|
45
|
+
"description": "Whether to show cancel button or not.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"name": ".accessibleDescriptionRef",
|
|
52
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area are linked\nthrough the `aria-describedby` attribute. However, there are\ncases where this can confuse screen reader users (e.g. the dialog\nmay present a password confirmation form). For these cases,\nit's better to associate only the elements that will help describe\nthe confirmation dialog through this API.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".header",
|
|
59
|
+
"description": "Set the confirmation dialog title.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".message",
|
|
66
|
+
"description": "Set the message or confirmation question.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".confirmText",
|
|
73
|
+
"description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": ".confirmTheme",
|
|
80
|
+
"description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
81
|
+
"value": {
|
|
82
|
+
"kind": "expression"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": ".rejectText",
|
|
87
|
+
"description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": ".rejectTheme",
|
|
94
|
+
"description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
95
|
+
"value": {
|
|
96
|
+
"kind": "expression"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": ".cancelText",
|
|
101
|
+
"description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
102
|
+
"value": {
|
|
103
|
+
"kind": "expression"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": ".cancelTheme",
|
|
108
|
+
"description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
|
|
109
|
+
"value": {
|
|
110
|
+
"kind": "expression"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": ".overlayClass",
|
|
115
|
+
"description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
|
|
116
|
+
"value": {
|
|
117
|
+
"kind": "expression"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": "@cancel",
|
|
122
|
+
"description": "cancel\nfired when Cancel button or Escape key was pressed.",
|
|
123
|
+
"value": {
|
|
124
|
+
"kind": "expression"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "@confirm",
|
|
129
|
+
"description": "confirm\nfired when Confirm button was pressed.",
|
|
130
|
+
"value": {
|
|
131
|
+
"kind": "expression"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": "@reject",
|
|
136
|
+
"description": "reject\nfired when Reject button was pressed.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "@opened-changed",
|
|
143
|
+
"description": "Fired when the `opened` property changes.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
]
|
|
17
151
|
}
|
|
18
152
|
}
|
|
19
153
|
}
|