@vaadin/confirm-dialog 24.8.4 → 25.0.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/README.md +0 -23
- package/package.json +15 -16
- package/src/{vaadin-confirm-dialog-overlay-styles.d.ts → styles/vaadin-confirm-dialog-overlay-base-styles.d.ts} +1 -1
- package/src/styles/vaadin-confirm-dialog-overlay-base-styles.js +44 -0
- package/src/styles/vaadin-confirm-dialog-overlay-core-styles.d.ts +8 -0
- package/src/styles/vaadin-confirm-dialog-overlay-core-styles.js +31 -0
- package/src/vaadin-confirm-dialog-mixin.d.ts +5 -11
- package/src/vaadin-confirm-dialog-mixin.js +65 -93
- package/src/vaadin-confirm-dialog-overlay.js +44 -54
- package/src/vaadin-confirm-dialog.d.ts +6 -10
- package/src/vaadin-confirm-dialog.js +54 -39
- package/theme/lumo/vaadin-confirm-dialog-styles.js +5 -3
- package/web-types.json +70 -26
- package/web-types.lit.json +24 -10
- package/src/vaadin-confirm-dialog-base-mixin.d.ts +0 -29
- package/src/vaadin-confirm-dialog-base-mixin.js +0 -71
- package/src/vaadin-confirm-dialog-overlay-styles.js +0 -31
- package/src/vaadin-lit-confirm-dialog-overlay.js +0 -122
- package/src/vaadin-lit-confirm-dialog.js +0 -78
- package/theme/lumo/vaadin-lit-confirm-dialog.d.ts +0 -3
- package/theme/lumo/vaadin-lit-confirm-dialog.js +0 -3
- package/theme/material/vaadin-confirm-dialog-styles.d.ts +0 -1
- package/theme/material/vaadin-confirm-dialog-styles.js +0 -41
- package/theme/material/vaadin-confirm-dialog.d.ts +0 -3
- package/theme/material/vaadin-confirm-dialog.js +0 -3
- package/theme/material/vaadin-lit-confirm-dialog.d.ts +0 -3
- package/theme/material/vaadin-lit-confirm-dialog.js +0 -3
- package/vaadin-lit-confirm-dialog.d.ts +0 -1
- package/vaadin-lit-confirm-dialog.js +0 -2
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
7
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
9
8
|
import { type ConfirmDialogEventMap, ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
|
|
@@ -13,7 +12,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
|
|
|
13
12
|
/**
|
|
14
13
|
* `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
|
|
15
14
|
*
|
|
16
|
-
* ```
|
|
15
|
+
* ```html
|
|
17
16
|
* <vaadin-confirm-dialog cancel-button-visible>
|
|
18
17
|
* There are unsaved changes. Do you really want to leave?
|
|
19
18
|
* </vaadin-confirm-dialog>
|
|
@@ -21,14 +20,13 @@ export * from './vaadin-confirm-dialog-mixin.js';
|
|
|
21
20
|
*
|
|
22
21
|
* ### Styling
|
|
23
22
|
*
|
|
24
|
-
* The
|
|
25
|
-
* component and use its shadow parts for styling.
|
|
26
|
-
* See [`<vaadin-overlay>`](#/elements/vaadin-overlay) for the overlay styling documentation.
|
|
27
|
-
*
|
|
28
|
-
* In addition to `<vaadin-overlay>` parts, the following parts are available for theming:
|
|
23
|
+
* The following shadow DOM parts are available for styling:
|
|
29
24
|
*
|
|
30
25
|
* Part name | Description
|
|
31
26
|
* -----------------|-------------------------------------------
|
|
27
|
+
* `backdrop` | Backdrop of the overlay
|
|
28
|
+
* `overlay` | The overlay container
|
|
29
|
+
* `content` | The overlay content
|
|
32
30
|
* `header` | The header element wrapper
|
|
33
31
|
* `message` | The message element wrapper
|
|
34
32
|
* `footer` | The footer element that wraps the buttons
|
|
@@ -37,8 +35,6 @@ export * from './vaadin-confirm-dialog-mixin.js';
|
|
|
37
35
|
* `reject-button` | The "Reject" button wrapper
|
|
38
36
|
*
|
|
39
37
|
* Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.
|
|
40
|
-
* Also, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the
|
|
41
|
-
* `<vaadin-confirm-dialog-overlay>` component.
|
|
42
38
|
*
|
|
43
39
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
44
40
|
*
|
|
@@ -59,7 +55,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
|
|
|
59
55
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
60
56
|
* @fires {CustomEvent} closed - Fired when the confirm dialog is closed.
|
|
61
57
|
*/
|
|
62
|
-
declare class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(
|
|
58
|
+
declare class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(HTMLElement))) {
|
|
63
59
|
addEventListener<K extends keyof ConfirmDialogEventMap>(
|
|
64
60
|
type: K,
|
|
65
61
|
listener: (this: ConfirmDialog, ev: ConfirmDialogEventMap[K]) => void,
|
|
@@ -5,17 +5,18 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/button/src/vaadin-button.js';
|
|
7
7
|
import './vaadin-confirm-dialog-overlay.js';
|
|
8
|
-
import { html,
|
|
9
|
-
import {
|
|
8
|
+
import { css, html, LitElement } from 'lit';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
10
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
13
|
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
|
|
13
14
|
import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* `<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.
|
|
17
18
|
*
|
|
18
|
-
* ```
|
|
19
|
+
* ```html
|
|
19
20
|
* <vaadin-confirm-dialog cancel-button-visible>
|
|
20
21
|
* There are unsaved changes. Do you really want to leave?
|
|
21
22
|
* </vaadin-confirm-dialog>
|
|
@@ -23,14 +24,13 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
|
|
|
23
24
|
*
|
|
24
25
|
* ### Styling
|
|
25
26
|
*
|
|
26
|
-
* The
|
|
27
|
-
* component and use its shadow parts for styling.
|
|
28
|
-
* See [`<vaadin-overlay>`](#/elements/vaadin-overlay) for the overlay styling documentation.
|
|
29
|
-
*
|
|
30
|
-
* In addition to `<vaadin-overlay>` parts, the following parts are available for theming:
|
|
27
|
+
* The following shadow DOM parts are available for styling:
|
|
31
28
|
*
|
|
32
29
|
* Part name | Description
|
|
33
30
|
* -----------------|-------------------------------------------
|
|
31
|
+
* `backdrop` | Backdrop of the overlay
|
|
32
|
+
* `overlay` | The overlay container
|
|
33
|
+
* `content` | The overlay content
|
|
34
34
|
* `header` | The header element wrapper
|
|
35
35
|
* `message` | The message element wrapper
|
|
36
36
|
* `footer` | The footer element that wraps the buttons
|
|
@@ -39,8 +39,6 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
|
|
|
39
39
|
* `reject-button` | The "Reject" button wrapper
|
|
40
40
|
*
|
|
41
41
|
* Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.
|
|
42
|
-
* Also, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the
|
|
43
|
-
* `<vaadin-confirm-dialog-overlay>` component.
|
|
44
42
|
*
|
|
45
43
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
46
44
|
*
|
|
@@ -64,44 +62,61 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
|
|
|
64
62
|
* @customElement
|
|
65
63
|
* @extends HTMLElement
|
|
66
64
|
* @mixes ConfirmDialogMixin
|
|
67
|
-
* @mixes ControllerMixin
|
|
68
65
|
* @mixes ElementMixin
|
|
69
66
|
* @mixes ThemePropertyMixin
|
|
70
67
|
*/
|
|
71
|
-
class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(
|
|
72
|
-
static get
|
|
73
|
-
return
|
|
74
|
-
|
|
75
|
-
:host,
|
|
76
|
-
[hidden] {
|
|
77
|
-
display: none !important;
|
|
78
|
-
}
|
|
79
|
-
</style>
|
|
68
|
+
class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
|
|
69
|
+
static get is() {
|
|
70
|
+
return 'vaadin-confirm-dialog';
|
|
71
|
+
}
|
|
80
72
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
no-close-on-esc="[[noCloseOnEsc]]"
|
|
89
|
-
content-height="[[_contentHeight]]"
|
|
90
|
-
content-width="[[_contentWidth]]"
|
|
91
|
-
></vaadin-confirm-dialog-dialog>
|
|
73
|
+
static get styles() {
|
|
74
|
+
return css`
|
|
75
|
+
:host([opened]),
|
|
76
|
+
:host([opening]),
|
|
77
|
+
:host([closing]) {
|
|
78
|
+
display: contents !important;
|
|
79
|
+
}
|
|
92
80
|
|
|
93
|
-
|
|
94
|
-
|
|
81
|
+
:host,
|
|
82
|
+
:host([hidden]) {
|
|
83
|
+
display: none !important;
|
|
84
|
+
}
|
|
85
|
+
`;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/** @protected */
|
|
89
|
+
render() {
|
|
90
|
+
return html`
|
|
91
|
+
<vaadin-confirm-dialog-overlay
|
|
92
|
+
id="overlay"
|
|
93
|
+
.owner="${this}"
|
|
94
|
+
.opened="${this.opened}"
|
|
95
|
+
theme="${ifDefined(this._theme)}"
|
|
96
|
+
.cancelButtonVisible="${this.cancelButtonVisible}"
|
|
97
|
+
.rejectButtonVisible="${this.rejectButtonVisible}"
|
|
98
|
+
with-backdrop
|
|
99
|
+
restore-focus-on-close
|
|
100
|
+
focus-trap
|
|
101
|
+
exportparts="backdrop, overlay, header, content, message, footer, cancel-button, confirm-button, reject-button"
|
|
102
|
+
@opened-changed="${this._onOpenedChanged}"
|
|
103
|
+
@vaadin-overlay-open="${this.__onDialogOpened}"
|
|
104
|
+
@vaadin-overlay-closed="${this.__onDialogClosed}"
|
|
105
|
+
@vaadin-overlay-outside-click="${this._onOverlayOutsideClick}"
|
|
106
|
+
@vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
|
|
107
|
+
>
|
|
108
|
+
<slot name="header" slot="header"></slot>
|
|
95
109
|
<slot></slot>
|
|
96
|
-
<slot name="cancel-button"></slot>
|
|
97
|
-
<slot name="reject-button"></slot>
|
|
98
|
-
<slot name="confirm-button"></slot>
|
|
99
|
-
</
|
|
110
|
+
<slot name="cancel-button" slot="cancel-button"></slot>
|
|
111
|
+
<slot name="reject-button" slot="reject-button"></slot>
|
|
112
|
+
<slot name="confirm-button" slot="confirm-button"></slot>
|
|
113
|
+
</vaadin-confirm-dialog-overlay>
|
|
100
114
|
`;
|
|
101
115
|
}
|
|
102
116
|
|
|
103
|
-
|
|
104
|
-
|
|
117
|
+
/** @private */
|
|
118
|
+
_onOpenedChanged(event) {
|
|
119
|
+
this.opened = event.detail.value;
|
|
105
120
|
}
|
|
106
121
|
|
|
107
122
|
/**
|
|
@@ -10,10 +10,12 @@ registerStyles(
|
|
|
10
10
|
overlay,
|
|
11
11
|
dialogOverlay,
|
|
12
12
|
css`
|
|
13
|
-
[part='header']
|
|
14
|
-
margin-top: 0 !important;
|
|
15
|
-
margin-bottom: 0 !important;
|
|
13
|
+
[part='header'] {
|
|
16
14
|
margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
|
|
15
|
+
font-weight: 600;
|
|
16
|
+
line-height: var(--lumo-line-height-xs);
|
|
17
|
+
font-size: var(--lumo-font-size-xl);
|
|
18
|
+
color: var(--lumo-header-text-color);
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
[part='message'] {
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,51 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "25.0.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
|
|
11
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```html\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 following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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.\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
|
+
{
|
|
14
|
+
"name": "width",
|
|
15
|
+
"description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string",
|
|
19
|
+
"null",
|
|
20
|
+
"undefined"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"name": "height",
|
|
26
|
+
"description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
27
|
+
"value": {
|
|
28
|
+
"type": [
|
|
29
|
+
"string",
|
|
30
|
+
"null",
|
|
31
|
+
"undefined"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "overlay-class",
|
|
37
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
38
|
+
"value": {
|
|
39
|
+
"type": [
|
|
40
|
+
"string",
|
|
41
|
+
"null",
|
|
42
|
+
"undefined"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
13
46
|
{
|
|
14
47
|
"name": "accessible-description-ref",
|
|
15
|
-
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area
|
|
48
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` 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
49
|
"value": {
|
|
17
50
|
"type": [
|
|
18
51
|
"string",
|
|
@@ -131,17 +164,6 @@
|
|
|
131
164
|
]
|
|
132
165
|
}
|
|
133
166
|
},
|
|
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
167
|
{
|
|
146
168
|
"name": "theme",
|
|
147
169
|
"description": "The theme variants to apply to the component.",
|
|
@@ -156,9 +178,42 @@
|
|
|
156
178
|
],
|
|
157
179
|
"js": {
|
|
158
180
|
"properties": [
|
|
181
|
+
{
|
|
182
|
+
"name": "width",
|
|
183
|
+
"description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
184
|
+
"value": {
|
|
185
|
+
"type": [
|
|
186
|
+
"string",
|
|
187
|
+
"null",
|
|
188
|
+
"undefined"
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"name": "height",
|
|
194
|
+
"description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
195
|
+
"value": {
|
|
196
|
+
"type": [
|
|
197
|
+
"string",
|
|
198
|
+
"null",
|
|
199
|
+
"undefined"
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
"name": "overlayClass",
|
|
205
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
206
|
+
"value": {
|
|
207
|
+
"type": [
|
|
208
|
+
"string",
|
|
209
|
+
"null",
|
|
210
|
+
"undefined"
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
},
|
|
159
214
|
{
|
|
160
215
|
"name": "accessibleDescriptionRef",
|
|
161
|
-
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area
|
|
216
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` 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
217
|
"value": {
|
|
163
218
|
"type": [
|
|
164
219
|
"string",
|
|
@@ -276,17 +331,6 @@
|
|
|
276
331
|
"string"
|
|
277
332
|
]
|
|
278
333
|
}
|
|
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
334
|
}
|
|
291
335
|
],
|
|
292
336
|
"events": [
|
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": "
|
|
4
|
+
"version": "25.0.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
|
|
19
|
+
"description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```html\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 following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------------------------------------\n`backdrop` | Backdrop of the overlay\n`overlay` | The overlay container\n`content` | The overlay content\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.\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
|
{
|
|
@@ -47,9 +47,30 @@
|
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
|
+
{
|
|
51
|
+
"name": ".width",
|
|
52
|
+
"description": "Set the width of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
53
|
+
"value": {
|
|
54
|
+
"kind": "expression"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".height",
|
|
59
|
+
"description": "Set the height of the overlay.\nIf a unitless number is provided, pixels are assumed.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": ".overlayClass",
|
|
66
|
+
"description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
50
71
|
{
|
|
51
72
|
"name": ".accessibleDescriptionRef",
|
|
52
|
-
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, all elements inside the message area
|
|
73
|
+
"description": "Sets the `aria-describedby` attribute of the overlay element.\n\nBy default, the text contents of all elements inside the message area\nare combined into the `aria-description` 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
74
|
"value": {
|
|
54
75
|
"kind": "expression"
|
|
55
76
|
}
|
|
@@ -110,13 +131,6 @@
|
|
|
110
131
|
"kind": "expression"
|
|
111
132
|
}
|
|
112
133
|
},
|
|
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
134
|
{
|
|
121
135
|
"name": "@closed",
|
|
122
136
|
"description": "Fired when the confirm dialog is closed.",
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
-
|
|
8
|
-
export declare function ConfirmDialogBaseMixin<T extends Constructor<HTMLElement>>(
|
|
9
|
-
base: T,
|
|
10
|
-
): Constructor<ConfirmDialogBaseMixinClass> & T;
|
|
11
|
-
|
|
12
|
-
export declare class ConfirmDialogBaseMixinClass {
|
|
13
|
-
/**
|
|
14
|
-
* Set the `aria-label` attribute for assistive technologies like
|
|
15
|
-
* screen readers. An empty string value for this property (the
|
|
16
|
-
* default) means that the `aria-label` attribute is not present.
|
|
17
|
-
*/
|
|
18
|
-
ariaLabel: string;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Height to be set on the overlay content.
|
|
22
|
-
*/
|
|
23
|
-
contentHeight: string;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Width to be set on the overlay content.
|
|
27
|
-
*/
|
|
28
|
-
contentWidth: string;
|
|
29
|
-
}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* @polymerMixin
|
|
9
|
-
*/
|
|
10
|
-
export const ConfirmDialogBaseMixin = (superClass) =>
|
|
11
|
-
class ConfirmDialogBaseMixinClass extends superClass {
|
|
12
|
-
static get properties() {
|
|
13
|
-
return {
|
|
14
|
-
/**
|
|
15
|
-
* Set the `aria-label` attribute for assistive technologies like
|
|
16
|
-
* screen readers. An empty string value for this property (the
|
|
17
|
-
* default) means that the `aria-label` attribute is not present.
|
|
18
|
-
*/
|
|
19
|
-
ariaLabel: {
|
|
20
|
-
type: String,
|
|
21
|
-
value: '',
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Height to be set on the overlay content.
|
|
26
|
-
*/
|
|
27
|
-
contentHeight: {
|
|
28
|
-
type: String,
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Width to be set on the overlay content.
|
|
33
|
-
*/
|
|
34
|
-
contentWidth: {
|
|
35
|
-
type: String,
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
static get observers() {
|
|
41
|
-
return [
|
|
42
|
-
'__updateContentHeight(contentHeight, _overlayElement)',
|
|
43
|
-
'__updateContentWidth(contentWidth, _overlayElement)',
|
|
44
|
-
];
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/** @private */
|
|
48
|
-
__updateDimension(overlay, dimension, value) {
|
|
49
|
-
const prop = `--_vaadin-confirm-dialog-content-${dimension}`;
|
|
50
|
-
|
|
51
|
-
if (value) {
|
|
52
|
-
overlay.style.setProperty(prop, value);
|
|
53
|
-
} else {
|
|
54
|
-
overlay.style.removeProperty(prop);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/** @private */
|
|
59
|
-
__updateContentHeight(height, overlay) {
|
|
60
|
-
if (overlay) {
|
|
61
|
-
this.__updateDimension(overlay, 'height', height);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/** @private */
|
|
66
|
-
__updateContentWidth(width, overlay) {
|
|
67
|
-
if (overlay) {
|
|
68
|
-
this.__updateDimension(overlay, 'width', width);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const confirmDialogOverlay = css`
|
|
9
|
-
:host {
|
|
10
|
-
--_vaadin-confirm-dialog-content-width: auto;
|
|
11
|
-
--_vaadin-confirm-dialog-content-height: auto;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
[part='overlay'] {
|
|
15
|
-
width: var(--_vaadin-confirm-dialog-content-width);
|
|
16
|
-
height: var(--_vaadin-confirm-dialog-content-height);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
#resizerContainer {
|
|
20
|
-
height: 100%;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
::slotted([slot='header']) {
|
|
24
|
-
pointer-events: auto;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/* Make buttons clickable */
|
|
28
|
-
[part='footer'] > * {
|
|
29
|
-
pointer-events: all;
|
|
30
|
-
}
|
|
31
|
-
`;
|