@vaadin/confirm-dialog 24.2.0-alpha1 → 24.2.0-alpha10
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "24.2.0-
|
|
3
|
+
"version": "24.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/button": "24.2.0-
|
|
40
|
-
"@vaadin/component-base": "24.2.0-
|
|
41
|
-
"@vaadin/dialog": "24.2.0-
|
|
42
|
-
"@vaadin/overlay": "24.2.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.2.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.2.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.2.0-
|
|
39
|
+
"@vaadin/button": "24.2.0-alpha10",
|
|
40
|
+
"@vaadin/component-base": "24.2.0-alpha10",
|
|
41
|
+
"@vaadin/dialog": "24.2.0-alpha10",
|
|
42
|
+
"@vaadin/overlay": "24.2.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.2.0-alpha10",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha10"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@esm-bundle/chai": "^4.3.4",
|
|
49
|
-
"@vaadin/a11y-base": "24.2.0-
|
|
50
|
-
"@vaadin/testing-helpers": "^0.
|
|
49
|
+
"@vaadin/a11y-base": "24.2.0-alpha10",
|
|
50
|
+
"@vaadin/testing-helpers": "^0.5.0",
|
|
51
51
|
"sinon": "^13.0.2"
|
|
52
52
|
},
|
|
53
53
|
"web-types": [
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
|
|
58
58
|
}
|
|
@@ -3,91 +3,86 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2023 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html } from '@polymer/polymer/
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
+
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
8
|
+
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
9
|
+
import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
|
|
10
|
+
import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
|
|
11
|
+
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
12
|
+
import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
|
|
13
|
+
import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
+
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
15
|
+
|
|
16
|
+
const confirmDialogOverlay = css`
|
|
17
|
+
:host {
|
|
18
|
+
--_vaadin-confirm-dialog-content-width: auto;
|
|
19
|
+
--_vaadin-confirm-dialog-content-height: auto;
|
|
20
|
+
}
|
|
18
21
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
[part='overlay'] {
|
|
23
|
+
width: var(--_vaadin-confirm-dialog-content-width);
|
|
24
|
+
height: var(--_vaadin-confirm-dialog-content-height);
|
|
25
|
+
}
|
|
23
26
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
let memoizedTemplate;
|
|
33
|
-
|
|
34
|
-
const footerTemplate = html`
|
|
35
|
-
<div part="cancel-button">
|
|
36
|
-
<slot name="cancel-button"></slot>
|
|
37
|
-
</div>
|
|
38
|
-
<div part="reject-button">
|
|
39
|
-
<slot name="reject-button"></slot>
|
|
40
|
-
</div>
|
|
41
|
-
<div part="confirm-button">
|
|
42
|
-
<slot name="confirm-button"></slot>
|
|
43
|
-
</div>
|
|
27
|
+
::slotted([slot='header']) {
|
|
28
|
+
pointer-events: auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Make buttons clickable */
|
|
32
|
+
[part='footer'] > * {
|
|
33
|
+
pointer-events: all;
|
|
34
|
+
}
|
|
44
35
|
`;
|
|
45
36
|
|
|
37
|
+
registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, confirmDialogOverlay], {
|
|
38
|
+
moduleId: 'vaadin-confirm-dialog-overlay-styles',
|
|
39
|
+
});
|
|
40
|
+
|
|
46
41
|
/**
|
|
47
|
-
* An
|
|
48
|
-
*
|
|
42
|
+
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
43
|
+
*
|
|
44
|
+
* @extends HTMLElement
|
|
45
|
+
* @mixes DirMixin
|
|
46
|
+
* @mixes OverlayMixin
|
|
47
|
+
* @mixes ThemableMixin
|
|
49
48
|
* @private
|
|
50
49
|
*/
|
|
51
|
-
class ConfirmDialogOverlay extends
|
|
50
|
+
class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
|
|
52
51
|
static get is() {
|
|
53
52
|
return 'vaadin-confirm-dialog-overlay';
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
static get template() {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
footerPart.removeChild(footerSlot);
|
|
80
|
-
footerPart.appendChild(footerTemplate.content.cloneNode(true));
|
|
81
|
-
}
|
|
82
|
-
return memoizedTemplate;
|
|
56
|
+
return html`
|
|
57
|
+
<div part="backdrop" id="backdrop" hidden$="[[!withBackdrop]]"></div>
|
|
58
|
+
<div part="overlay" id="overlay" tabindex="0">
|
|
59
|
+
<section id="resizerContainer" class="resizer-container">
|
|
60
|
+
<header part="header"><slot name="header"></slot></header>
|
|
61
|
+
<div part="content" id="content">
|
|
62
|
+
<div part="message"><slot></slot></div>
|
|
63
|
+
</div>
|
|
64
|
+
<footer part="footer" role="toolbar">
|
|
65
|
+
<div part="cancel-button">
|
|
66
|
+
<slot name="cancel-button"></slot>
|
|
67
|
+
</div>
|
|
68
|
+
<div part="reject-button">
|
|
69
|
+
<slot name="reject-button"></slot>
|
|
70
|
+
</div>
|
|
71
|
+
<div part="confirm-button">
|
|
72
|
+
<slot name="confirm-button"></slot>
|
|
73
|
+
</div>
|
|
74
|
+
</footer>
|
|
75
|
+
</section>
|
|
76
|
+
</div>
|
|
77
|
+
`;
|
|
83
78
|
}
|
|
84
79
|
|
|
85
80
|
/**
|
|
86
81
|
* @protected
|
|
87
82
|
* @override
|
|
88
83
|
*/
|
|
89
|
-
|
|
90
|
-
super.
|
|
84
|
+
ready() {
|
|
85
|
+
super.ready();
|
|
91
86
|
|
|
92
87
|
// ConfirmDialog has header and footer but does not use renderers
|
|
93
88
|
this.setAttribute('has-header', '');
|
|
@@ -98,18 +93,14 @@ class ConfirmDialogOverlay extends DialogOverlay {
|
|
|
98
93
|
customElements.define(ConfirmDialogOverlay.is, ConfirmDialogOverlay);
|
|
99
94
|
|
|
100
95
|
/**
|
|
101
|
-
* An
|
|
102
|
-
* Not intended to be used separately.
|
|
96
|
+
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
103
97
|
* @private
|
|
104
98
|
*/
|
|
105
|
-
class ConfirmDialogDialog extends
|
|
99
|
+
class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
|
|
106
100
|
static get is() {
|
|
107
101
|
return 'vaadin-confirm-dialog-dialog';
|
|
108
102
|
}
|
|
109
103
|
|
|
110
|
-
/**
|
|
111
|
-
* Override template to provide custom overlay tag name.
|
|
112
|
-
*/
|
|
113
104
|
static get template() {
|
|
114
105
|
return html`
|
|
115
106
|
<style>
|
|
@@ -120,6 +111,7 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
120
111
|
|
|
121
112
|
<vaadin-confirm-dialog-overlay
|
|
122
113
|
id="overlay"
|
|
114
|
+
opened="[[opened]]"
|
|
123
115
|
on-opened-changed="_onOverlayOpened"
|
|
124
116
|
on-mousedown="_bringOverlayToFront"
|
|
125
117
|
on-touchstart="_bringOverlayToFront"
|
|
@@ -127,6 +119,7 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
127
119
|
modeless="[[modeless]]"
|
|
128
120
|
with-backdrop="[[!modeless]]"
|
|
129
121
|
resizable$="[[resizable]]"
|
|
122
|
+
aria-label$="[[ariaLabel]]"
|
|
130
123
|
restore-focus-on-close
|
|
131
124
|
focus-trap
|
|
132
125
|
></vaadin-confirm-dialog-overlay>
|
|
@@ -135,6 +128,16 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
135
128
|
|
|
136
129
|
static get properties() {
|
|
137
130
|
return {
|
|
131
|
+
/**
|
|
132
|
+
* Set the `aria-label` attribute for assistive technologies like
|
|
133
|
+
* screen readers. An empty string value for this property (the
|
|
134
|
+
* default) means that the `aria-label` attribute is not present.
|
|
135
|
+
*/
|
|
136
|
+
ariaLabel: {
|
|
137
|
+
type: String,
|
|
138
|
+
value: '',
|
|
139
|
+
},
|
|
140
|
+
|
|
138
141
|
/**
|
|
139
142
|
* Height to be set on the overlay content.
|
|
140
143
|
*/
|
|
@@ -148,11 +151,6 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
148
151
|
contentWidth: {
|
|
149
152
|
type: String,
|
|
150
153
|
},
|
|
151
|
-
|
|
152
|
-
/** @private */
|
|
153
|
-
_overlayElement: {
|
|
154
|
-
type: Object,
|
|
155
|
-
},
|
|
156
154
|
};
|
|
157
155
|
}
|
|
158
156
|
|
|
@@ -163,13 +161,6 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
163
161
|
];
|
|
164
162
|
}
|
|
165
163
|
|
|
166
|
-
/** @protected */
|
|
167
|
-
ready() {
|
|
168
|
-
super.ready();
|
|
169
|
-
|
|
170
|
-
this._overlayElement = this.$.overlay;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
164
|
/** @private */
|
|
174
165
|
__updateDimension(overlay, dimension, value) {
|
|
175
166
|
const prop = `--_vaadin-confirm-dialog-content-${dimension}`;
|
|
@@ -1,44 +1,50 @@
|
|
|
1
1
|
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
2
|
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
3
|
+
import { dialogOverlay } from '@vaadin/dialog/theme/lumo/vaadin-dialog-styles.js';
|
|
4
|
+
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
3
5
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
6
|
|
|
5
7
|
registerStyles(
|
|
6
8
|
'vaadin-confirm-dialog-overlay',
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
min-width: 100%;
|
|
17
|
-
max-width: 100%;
|
|
18
|
-
}
|
|
9
|
+
[
|
|
10
|
+
overlay,
|
|
11
|
+
dialogOverlay,
|
|
12
|
+
css`
|
|
13
|
+
[part='header'] ::slotted(h3) {
|
|
14
|
+
margin-top: 0 !important;
|
|
15
|
+
margin-bottom: 0 !important;
|
|
16
|
+
margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
|
|
17
|
+
}
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
[part='message'] {
|
|
20
|
+
width: 25em;
|
|
21
|
+
min-width: 100%;
|
|
22
|
+
max-width: 100%;
|
|
23
|
+
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
::slotted([slot$='button'][theme~='tertiary']) {
|
|
26
|
+
padding-left: var(--lumo-space-s);
|
|
27
|
+
padding-right: var(--lumo-space-s);
|
|
28
|
+
}
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
flex-direction: column-reverse;
|
|
32
|
-
align-items: stretch;
|
|
33
|
-
padding: var(--lumo-space-s) var(--lumo-space-l);
|
|
34
|
-
gap: var(--lumo-space-s);
|
|
30
|
+
[part='cancel-button'] {
|
|
31
|
+
flex-grow: 1;
|
|
35
32
|
}
|
|
36
33
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
@media (max-width: 360px) {
|
|
35
|
+
[part='footer'] {
|
|
36
|
+
flex-direction: column-reverse;
|
|
37
|
+
align-items: stretch;
|
|
38
|
+
padding: var(--lumo-space-s) var(--lumo-space-l);
|
|
39
|
+
gap: var(--lumo-space-s);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
::slotted([slot$='button']) {
|
|
43
|
+
width: 100%;
|
|
44
|
+
margin: 0;
|
|
45
|
+
}
|
|
40
46
|
}
|
|
41
|
-
|
|
42
|
-
|
|
47
|
+
`,
|
|
48
|
+
],
|
|
43
49
|
{ moduleId: 'lumo-confirm-dialog-overlay' },
|
|
44
50
|
);
|
|
@@ -1,35 +1,41 @@
|
|
|
1
|
+
import { dialogOverlay } from '@vaadin/dialog/theme/material/vaadin-dialog-styles.js';
|
|
2
|
+
import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
|
|
1
3
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
2
4
|
|
|
3
5
|
registerStyles(
|
|
4
6
|
'vaadin-confirm-dialog-overlay',
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
[
|
|
8
|
+
overlay,
|
|
9
|
+
dialogOverlay,
|
|
10
|
+
css`
|
|
11
|
+
[part='overlay'] {
|
|
12
|
+
max-width: 100%;
|
|
13
|
+
min-width: 0;
|
|
14
|
+
}
|
|
10
15
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
[part='content'] {
|
|
17
|
+
min-width: 0;
|
|
18
|
+
}
|
|
14
19
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
[part='header'] ::slotted(h3) {
|
|
21
|
+
margin-top: 0 !important;
|
|
22
|
+
margin-bottom: 0 !important;
|
|
23
|
+
margin-inline-start: 8px;
|
|
24
|
+
}
|
|
20
25
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
[part='message'] {
|
|
27
|
+
width: 25em;
|
|
28
|
+
max-width: 100%;
|
|
29
|
+
margin-inline-end: 24px;
|
|
30
|
+
}
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
@media (max-width: 360px) {
|
|
33
|
+
[part='footer'] {
|
|
34
|
+
flex-direction: column-reverse;
|
|
35
|
+
align-items: flex-end;
|
|
36
|
+
}
|
|
31
37
|
}
|
|
32
|
-
|
|
33
|
-
|
|
38
|
+
`,
|
|
39
|
+
],
|
|
34
40
|
{ moduleId: 'material-confirm-dialog-overlay' },
|
|
35
41
|
);
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.2.0-
|
|
4
|
+
"version": "24.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
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.2.0-
|
|
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.2.0-alpha10/#/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/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
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "accessible-description-ref",
|
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.2.0-
|
|
4
|
+
"version": "24.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
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.2.0-
|
|
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.2.0-alpha10/#/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/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
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|