@vaadin/confirm-dialog 24.1.0-alpha7 → 24.1.0-alpha9

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.
Files changed (4) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-confirm-dialog.js +14 -4
  3. package/web-types.json +2 -284
  4. package/web-types.lit.json +2 -129
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/confirm-dialog",
3
- "version": "24.1.0-alpha7",
3
+ "version": "24.1.0-alpha9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,13 +36,13 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/button": "24.1.0-alpha7",
40
- "@vaadin/component-base": "24.1.0-alpha7",
41
- "@vaadin/dialog": "24.1.0-alpha7",
42
- "@vaadin/overlay": "24.1.0-alpha7",
43
- "@vaadin/vaadin-lumo-styles": "24.1.0-alpha7",
44
- "@vaadin/vaadin-material-styles": "24.1.0-alpha7",
45
- "@vaadin/vaadin-themable-mixin": "24.1.0-alpha7"
39
+ "@vaadin/button": "24.1.0-alpha9",
40
+ "@vaadin/component-base": "24.1.0-alpha9",
41
+ "@vaadin/dialog": "24.1.0-alpha9",
42
+ "@vaadin/overlay": "24.1.0-alpha9",
43
+ "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9",
44
+ "@vaadin/vaadin-material-styles": "24.1.0-alpha9",
45
+ "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
53
53
  "web-types.json",
54
54
  "web-types.lit.json"
55
55
  ],
56
- "gitHead": "6711b6ac7b49e2ddc0990c34de9718b58c2d16b3"
56
+ "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
57
57
  }
package/src/vaadin-confirm-dialog.js CHANGED
@@ -5,9 +5,11 @@
5
5
  */
6
6
  import './vaadin-confirm-dialog-overlay.js';
7
7
  import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
8
+ import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
8
9
  import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
9
10
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
10
11
  import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
12
+ import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
11
13
  import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
12
14
 
13
15
  /**
@@ -325,6 +327,7 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
325
327
  this._overlayElement.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
326
328
  this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
327
329
  this._overlayElement.addEventListener('vaadin-overlay-closed', () => this.__onDialogClosed());
330
+ this._overlayElement.setAttribute('role', 'alertdialog');
328
331
 
329
332
  this._headerController = new SlotController(this, 'header', 'h3', {
330
333
  initializer: (node) => {
@@ -338,7 +341,14 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
338
341
  multiple: true,
339
342
  observe: false,
340
343
  initializer: (node) => {
341
- this._messageNodes = [...this._messageNodes, node];
344
+ const wrapper = document.createElement('div');
345
+ wrapper.style.display = 'contents';
346
+ const wrapperId = `confirm-dialog-message-${generateUniqueId()}`;
347
+ wrapper.id = wrapperId;
348
+ wrapper.appendChild(node);
349
+ this.appendChild(wrapper);
350
+ setAriaIDReference(this._overlayElement, 'aria-describedby', { newId: wrapperId });
351
+ this._messageNodes = [...this._messageNodes, wrapper];
342
352
  },
343
353
  });
344
354
  this.addController(this._messageController);
@@ -432,9 +442,9 @@ class ConfirmDialog extends ElementMixin(ThemePropertyMixin(ControllerMixin(Poly
432
442
  /** @private */
433
443
  __updateMessageNodes(nodes, message) {
434
444
  if (nodes && nodes.length > 0) {
435
- const defaultNode = nodes.find((node) => node === this._messageController.defaultNode);
436
- if (defaultNode) {
437
- defaultNode.textContent = message;
445
+ const defaultWrapperNode = nodes.find((node) => node === this._messageController.defaultNode?.parentElement);
446
+ if (defaultWrapperNode) {
447
+ defaultWrapperNode.firstChild.textContent = message;
438
448
  }
439
449
  }
440
450
  }
package/web-types.json CHANGED
@@ -1,293 +1,11 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/confirm-dialog",
4
- "version": "24.1.0-alpha7",
4
+ "version": "24.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
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-alpha7/#/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": "opened",
15
- "description": "True if the overlay is currently displayed.",
16
- "value": {
17
- "type": [
18
- "boolean"
19
- ]
20
- }
21
- },
22
- {
23
- "name": "header",
24
- "description": "Set the confirmation dialog title.",
25
- "value": {
26
- "type": [
27
- "string"
28
- ]
29
- }
30
- },
31
- {
32
- "name": "message",
33
- "description": "Set the message or confirmation question.",
34
- "value": {
35
- "type": [
36
- "string",
37
- "null",
38
- "undefined"
39
- ]
40
- }
41
- },
42
- {
43
- "name": "confirm-text",
44
- "description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
45
- "value": {
46
- "type": [
47
- "string"
48
- ]
49
- }
50
- },
51
- {
52
- "name": "confirm-theme",
53
- "description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
54
- "value": {
55
- "type": [
56
- "string"
57
- ]
58
- }
59
- },
60
- {
61
- "name": "no-close-on-esc",
62
- "description": "Set to true to disable closing dialog on Escape press",
63
- "value": {
64
- "type": [
65
- "boolean"
66
- ]
67
- }
68
- },
69
- {
70
- "name": "reject-button-visible",
71
- "description": "Whether to show reject button or not.",
72
- "value": {
73
- "type": [
74
- "boolean"
75
- ]
76
- }
77
- },
78
- {
79
- "name": "reject-text",
80
- "description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
81
- "value": {
82
- "type": [
83
- "string"
84
- ]
85
- }
86
- },
87
- {
88
- "name": "reject-theme",
89
- "description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
90
- "value": {
91
- "type": [
92
- "string"
93
- ]
94
- }
95
- },
96
- {
97
- "name": "cancel-button-visible",
98
- "description": "Whether to show cancel button or not.",
99
- "value": {
100
- "type": [
101
- "boolean"
102
- ]
103
- }
104
- },
105
- {
106
- "name": "cancel-text",
107
- "description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
108
- "value": {
109
- "type": [
110
- "string"
111
- ]
112
- }
113
- },
114
- {
115
- "name": "cancel-theme",
116
- "description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
117
- "value": {
118
- "type": [
119
- "string"
120
- ]
121
- }
122
- },
123
- {
124
- "name": "overlay-class",
125
- "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
126
- "value": {
127
- "type": [
128
- "string",
129
- "null",
130
- "undefined"
131
- ]
132
- }
133
- },
134
- {
135
- "name": "theme",
136
- "description": "The theme variants to apply to the component.",
137
- "value": {
138
- "type": [
139
- "string",
140
- "null",
141
- "undefined"
142
- ]
143
- }
144
- }
145
- ],
146
- "js": {
147
- "properties": [
148
- {
149
- "name": "opened",
150
- "description": "True if the overlay is currently displayed.",
151
- "value": {
152
- "type": [
153
- "boolean"
154
- ]
155
- }
156
- },
157
- {
158
- "name": "header",
159
- "description": "Set the confirmation dialog title.",
160
- "value": {
161
- "type": [
162
- "string"
163
- ]
164
- }
165
- },
166
- {
167
- "name": "message",
168
- "description": "Set the message or confirmation question.",
169
- "value": {
170
- "type": [
171
- "string",
172
- "null",
173
- "undefined"
174
- ]
175
- }
176
- },
177
- {
178
- "name": "confirmText",
179
- "description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
180
- "value": {
181
- "type": [
182
- "string"
183
- ]
184
- }
185
- },
186
- {
187
- "name": "confirmTheme",
188
- "description": "Theme for a confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
189
- "value": {
190
- "type": [
191
- "string"
192
- ]
193
- }
194
- },
195
- {
196
- "name": "noCloseOnEsc",
197
- "description": "Set to true to disable closing dialog on Escape press",
198
- "value": {
199
- "type": [
200
- "boolean"
201
- ]
202
- }
203
- },
204
- {
205
- "name": "rejectButtonVisible",
206
- "description": "Whether to show reject button or not.",
207
- "value": {
208
- "type": [
209
- "boolean"
210
- ]
211
- }
212
- },
213
- {
214
- "name": "rejectText",
215
- "description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
216
- "value": {
217
- "type": [
218
- "string"
219
- ]
220
- }
221
- },
222
- {
223
- "name": "rejectTheme",
224
- "description": "Theme for a reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
225
- "value": {
226
- "type": [
227
- "string"
228
- ]
229
- }
230
- },
231
- {
232
- "name": "cancelButtonVisible",
233
- "description": "Whether to show cancel button or not.",
234
- "value": {
235
- "type": [
236
- "boolean"
237
- ]
238
- }
239
- },
240
- {
241
- "name": "cancelText",
242
- "description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
243
- "value": {
244
- "type": [
245
- "string"
246
- ]
247
- }
248
- },
249
- {
250
- "name": "cancelTheme",
251
- "description": "Theme for a cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
252
- "value": {
253
- "type": [
254
- "string"
255
- ]
256
- }
257
- },
258
- {
259
- "name": "overlayClass",
260
- "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
261
- "value": {
262
- "type": [
263
- "string",
264
- "null",
265
- "undefined"
266
- ]
267
- }
268
- }
269
- ],
270
- "events": [
271
- {
272
- "name": "cancel",
273
- "description": "cancel\nfired when Cancel button or Escape key was pressed."
274
- },
275
- {
276
- "name": "confirm",
277
- "description": "confirm\nfired when Confirm button was pressed."
278
- },
279
- {
280
- "name": "reject",
281
- "description": "reject\nfired when Reject button was pressed."
282
- },
283
- {
284
- "name": "opened-changed",
285
- "description": "Fired when the `opened` property changes."
286
- }
287
- ]
288
- }
289
- }
290
- ]
8
+ "elements": []
291
9
  }
292
10
  }
293
11
  }
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-alpha7",
4
+ "version": "24.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -13,134 +13,7 @@
13
13
  },
14
14
  "contributions": {
15
15
  "html": {
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-alpha7/#/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": ".header",
52
- "description": "Set the confirmation dialog title.",
53
- "value": {
54
- "kind": "expression"
55
- }
56
- },
57
- {
58
- "name": ".message",
59
- "description": "Set the message or confirmation question.",
60
- "value": {
61
- "kind": "expression"
62
- }
63
- },
64
- {
65
- "name": ".confirmText",
66
- "description": "Text displayed on confirm-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
67
- "value": {
68
- "kind": "expression"
69
- }
70
- },
71
- {
72
- "name": ".confirmTheme",
73
- "description": "Theme for a 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": ".rejectText",
80
- "description": "Text displayed on reject-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
81
- "value": {
82
- "kind": "expression"
83
- }
84
- },
85
- {
86
- "name": ".rejectTheme",
87
- "description": "Theme for a 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": ".cancelText",
94
- "description": "Text displayed on cancel-button.\nThis only affects the default button, custom slotted buttons will not be altered.",
95
- "value": {
96
- "kind": "expression"
97
- }
98
- },
99
- {
100
- "name": ".cancelTheme",
101
- "description": "Theme for a 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": ".overlayClass",
108
- "description": "A space-delimited list of CSS class names\nto set on the underlying overlay element.",
109
- "value": {
110
- "kind": "expression"
111
- }
112
- },
113
- {
114
- "name": "@cancel",
115
- "description": "cancel\nfired when Cancel button or Escape key was pressed.",
116
- "value": {
117
- "kind": "expression"
118
- }
119
- },
120
- {
121
- "name": "@confirm",
122
- "description": "confirm\nfired when Confirm button was pressed.",
123
- "value": {
124
- "kind": "expression"
125
- }
126
- },
127
- {
128
- "name": "@reject",
129
- "description": "reject\nfired when Reject button was pressed.",
130
- "value": {
131
- "kind": "expression"
132
- }
133
- },
134
- {
135
- "name": "@opened-changed",
136
- "description": "Fired when the `opened` property changes.",
137
- "value": {
138
- "kind": "expression"
139
- }
140
- }
141
- ]
142
- }
143
- ]
16
+ "elements": []
144
17
  }
145
18
  }
146
19
  }