@vaadin/confirm-dialog 25.0.0-alpha9 → 25.0.0-beta1
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 +12 -15
- package/src/styles/vaadin-confirm-dialog-overlay-base-styles.js +1 -6
- package/src/vaadin-confirm-dialog-mixin.d.ts +3 -4
- package/src/vaadin-confirm-dialog-mixin.js +5 -5
- package/src/vaadin-confirm-dialog-overlay.js +18 -20
- package/src/vaadin-confirm-dialog.js +7 -1
- package/vaadin-confirm-dialog.js +1 -1
- package/web-types.json +9 -31
- package/web-types.lit.json +5 -12
- package/src/styles/vaadin-confirm-dialog-overlay-core-styles.d.ts +0 -8
- package/src/styles/vaadin-confirm-dialog-overlay-core-styles.js +0 -31
- package/theme/lumo/vaadin-confirm-dialog-styles.d.ts +0 -2
- package/theme/lumo/vaadin-confirm-dialog-styles.js +0 -52
- package/theme/lumo/vaadin-confirm-dialog.d.ts +0 -3
- package/theme/lumo/vaadin-confirm-dialog.js +0 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/confirm-dialog",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/styles/*-base-styles.d.ts",
|
|
25
|
-
"!src/styles/*-base-styles.js",
|
|
26
|
-
"theme",
|
|
27
24
|
"vaadin-*.d.ts",
|
|
28
25
|
"vaadin-*.js",
|
|
29
26
|
"web-types.json",
|
|
@@ -37,24 +34,24 @@
|
|
|
37
34
|
],
|
|
38
35
|
"dependencies": {
|
|
39
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/button": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/dialog": "25.0.0-
|
|
43
|
-
"@vaadin/overlay": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
37
|
+
"@vaadin/button": "25.0.0-beta1",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-beta1",
|
|
39
|
+
"@vaadin/dialog": "25.0.0-beta1",
|
|
40
|
+
"@vaadin/overlay": "25.0.0-beta1",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
|
|
46
42
|
"lit": "^3.0.0"
|
|
47
43
|
},
|
|
48
44
|
"devDependencies": {
|
|
49
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
50
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
51
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
45
|
+
"@vaadin/a11y-base": "25.0.0-beta1",
|
|
46
|
+
"@vaadin/chai-plugins": "25.0.0-beta1",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.0.0-beta1",
|
|
52
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
53
|
-
"
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
|
|
50
|
+
"sinon": "^21.0.0"
|
|
54
51
|
},
|
|
55
52
|
"web-types": [
|
|
56
53
|
"web-types.json",
|
|
57
54
|
"web-types.lit.json"
|
|
58
55
|
],
|
|
59
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
|
|
60
57
|
}
|
|
@@ -20,7 +20,7 @@ const confirmDialogOverlay = css`
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
[part='header'] {
|
|
23
|
-
color: var(--vaadin-dialog-title-color, var(--vaadin-color));
|
|
23
|
+
color: var(--vaadin-dialog-title-color, var(--vaadin-text-color));
|
|
24
24
|
font-weight: var(--vaadin-dialog-title-font-weight, 600);
|
|
25
25
|
font-size: var(--vaadin-dialog-title-font-size, 1em);
|
|
26
26
|
line-height: var(--vaadin-dialog-title-line-height, inherit);
|
|
@@ -34,11 +34,6 @@ const confirmDialogOverlay = css`
|
|
|
34
34
|
[part='content'] {
|
|
35
35
|
flex: 1;
|
|
36
36
|
}
|
|
37
|
-
|
|
38
|
-
/* TODO remove this wrapper element */
|
|
39
|
-
#resizerContainer {
|
|
40
|
-
display: contents;
|
|
41
|
-
}
|
|
42
37
|
`;
|
|
43
38
|
|
|
44
39
|
export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
-
import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
8
7
|
import type { DialogSizeMixinClass } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
|
|
9
8
|
|
|
10
9
|
/*
|
|
@@ -33,11 +32,11 @@ export type ConfirmDialogEventMap = ConfirmDialogCustomEventMap & HTMLElementEve
|
|
|
33
32
|
|
|
34
33
|
export declare function ConfirmDialogMixin<T extends Constructor<HTMLElement>>(
|
|
35
34
|
base: T,
|
|
36
|
-
): Constructor<ConfirmDialogMixinClass> & Constructor<DialogSizeMixinClass> &
|
|
35
|
+
): Constructor<ConfirmDialogMixinClass> & Constructor<DialogSizeMixinClass> & T;
|
|
37
36
|
|
|
38
37
|
export declare class ConfirmDialogMixinClass {
|
|
39
38
|
/**
|
|
40
|
-
* Sets the `aria-describedby` attribute of the
|
|
39
|
+
* Sets the `aria-describedby` attribute of the dialog.
|
|
41
40
|
*
|
|
42
41
|
* By default, the text contents of all elements inside the message area
|
|
43
42
|
* are combined into the `aria-description` attribute. However, there are
|
|
@@ -50,7 +49,7 @@ export declare class ConfirmDialogMixinClass {
|
|
|
50
49
|
accessibleDescriptionRef: string | null | undefined;
|
|
51
50
|
|
|
52
51
|
/**
|
|
53
|
-
* True if the
|
|
52
|
+
* True if the dialog is visible and available for interaction.
|
|
54
53
|
*/
|
|
55
54
|
opened: boolean;
|
|
56
55
|
|
|
@@ -4,21 +4,19 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { setAriaIDReference } from '@vaadin/a11y-base/src/aria-id-reference.js';
|
|
7
|
-
import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
8
7
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
9
8
|
import { DialogSizeMixin } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
|
|
10
9
|
|
|
11
10
|
/**
|
|
12
11
|
* @polymerMixin
|
|
13
12
|
* @mixes DialogSizeMixin
|
|
14
|
-
* @mixes OverlayClassMixin
|
|
15
13
|
*/
|
|
16
14
|
export const ConfirmDialogMixin = (superClass) =>
|
|
17
|
-
class ConfirmDialogMixinClass extends
|
|
15
|
+
class ConfirmDialogMixinClass extends DialogSizeMixin(superClass) {
|
|
18
16
|
static get properties() {
|
|
19
17
|
return {
|
|
20
18
|
/**
|
|
21
|
-
* Sets the `aria-describedby` attribute of the
|
|
19
|
+
* Sets the `aria-describedby` attribute of the dialog.
|
|
22
20
|
*
|
|
23
21
|
* By default, the text contents of all elements inside the message area
|
|
24
22
|
* are combined into the `aria-description` attribute. However, there are
|
|
@@ -32,7 +30,7 @@ export const ConfirmDialogMixin = (superClass) =>
|
|
|
32
30
|
},
|
|
33
31
|
|
|
34
32
|
/**
|
|
35
|
-
* True if the
|
|
33
|
+
* True if the dialog is visible and available for interaction.
|
|
36
34
|
* @type {boolean}
|
|
37
35
|
*/
|
|
38
36
|
opened: {
|
|
@@ -248,6 +246,8 @@ export const ConfirmDialogMixin = (superClass) =>
|
|
|
248
246
|
super.ready();
|
|
249
247
|
|
|
250
248
|
this.role = 'alertdialog';
|
|
249
|
+
this.setAttribute('aria-modal', 'true');
|
|
250
|
+
this.setAttribute('tabindex', '0');
|
|
251
251
|
|
|
252
252
|
this._headerController = new SlotController(this, 'header', 'h3', {
|
|
253
253
|
initializer: (node) => {
|
|
@@ -10,7 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
|
10
10
|
import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
|
|
11
11
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
12
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-
|
|
13
|
+
import { confirmDialogOverlayStyles } from './styles/vaadin-confirm-dialog-overlay-base-styles.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
@@ -49,24 +49,22 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
|
|
|
49
49
|
render() {
|
|
50
50
|
return html`
|
|
51
51
|
<div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
|
|
52
|
-
<div part="overlay" id="overlay"
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
<div part="
|
|
56
|
-
|
|
52
|
+
<div part="overlay" id="overlay">
|
|
53
|
+
<header part="header"><slot name="header"></slot></header>
|
|
54
|
+
<div part="content" id="content">
|
|
55
|
+
<div part="message"><slot></slot></div>
|
|
56
|
+
</div>
|
|
57
|
+
<footer part="footer" role="toolbar">
|
|
58
|
+
<div part="cancel-button" ?hidden="${!this.cancelButtonVisible}">
|
|
59
|
+
<slot name="cancel-button"></slot>
|
|
57
60
|
</div>
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<div part="confirm-button">
|
|
66
|
-
<slot name="confirm-button"></slot>
|
|
67
|
-
</div>
|
|
68
|
-
</footer>
|
|
69
|
-
</section>
|
|
61
|
+
<div part="reject-button" ?hidden="${!this.rejectButtonVisible}">
|
|
62
|
+
<slot name="reject-button"></slot>
|
|
63
|
+
</div>
|
|
64
|
+
<div part="confirm-button">
|
|
65
|
+
<slot name="confirm-button"></slot>
|
|
66
|
+
</div>
|
|
67
|
+
</footer>
|
|
70
68
|
</div>
|
|
71
69
|
`;
|
|
72
70
|
}
|
|
@@ -93,11 +91,11 @@ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMi
|
|
|
93
91
|
}
|
|
94
92
|
|
|
95
93
|
/**
|
|
96
|
-
* Override method from OverlayFocusMixin to use owner as
|
|
94
|
+
* Override method from OverlayFocusMixin to use owner as focus trap root
|
|
97
95
|
* @protected
|
|
98
96
|
* @override
|
|
99
97
|
*/
|
|
100
|
-
get
|
|
98
|
+
get _focusTrapRoot() {
|
|
101
99
|
return this.owner;
|
|
102
100
|
}
|
|
103
101
|
}
|
|
@@ -75,13 +75,19 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
|
|
|
75
75
|
:host([opened]),
|
|
76
76
|
:host([opening]),
|
|
77
77
|
:host([closing]) {
|
|
78
|
-
display:
|
|
78
|
+
display: block !important;
|
|
79
|
+
position: absolute;
|
|
80
|
+
outline: none;
|
|
79
81
|
}
|
|
80
82
|
|
|
81
83
|
:host,
|
|
82
84
|
:host([hidden]) {
|
|
83
85
|
display: none !important;
|
|
84
86
|
}
|
|
87
|
+
|
|
88
|
+
:host(:focus-visible) ::part(overlay) {
|
|
89
|
+
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
|
|
90
|
+
}
|
|
85
91
|
`;
|
|
86
92
|
}
|
|
87
93
|
|
package/vaadin-confirm-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-confirm-dialog.js';
|
|
2
2
|
export * from './src/vaadin-confirm-dialog.js';
|
package/web-types.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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "width",
|
|
15
|
-
"description": "Set the width of the
|
|
15
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -23,18 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"name": "height",
|
|
26
|
-
"description": "Set the height of the
|
|
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.",
|
|
26
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
38
27
|
"value": {
|
|
39
28
|
"type": [
|
|
40
29
|
"string",
|
|
@@ -45,7 +34,7 @@
|
|
|
45
34
|
},
|
|
46
35
|
{
|
|
47
36
|
"name": "accessible-description-ref",
|
|
48
|
-
"description": "Sets the `aria-describedby` attribute of the
|
|
37
|
+
"description": "Sets the `aria-describedby` attribute of the dialog.\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.",
|
|
49
38
|
"value": {
|
|
50
39
|
"type": [
|
|
51
40
|
"string",
|
|
@@ -56,7 +45,7 @@
|
|
|
56
45
|
},
|
|
57
46
|
{
|
|
58
47
|
"name": "opened",
|
|
59
|
-
"description": "True if the
|
|
48
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
60
49
|
"value": {
|
|
61
50
|
"type": [
|
|
62
51
|
"boolean"
|
|
@@ -180,7 +169,7 @@
|
|
|
180
169
|
"properties": [
|
|
181
170
|
{
|
|
182
171
|
"name": "width",
|
|
183
|
-
"description": "Set the width of the
|
|
172
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
184
173
|
"value": {
|
|
185
174
|
"type": [
|
|
186
175
|
"string",
|
|
@@ -191,18 +180,7 @@
|
|
|
191
180
|
},
|
|
192
181
|
{
|
|
193
182
|
"name": "height",
|
|
194
|
-
"description": "Set the height of the
|
|
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.",
|
|
183
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
206
184
|
"value": {
|
|
207
185
|
"type": [
|
|
208
186
|
"string",
|
|
@@ -213,7 +191,7 @@
|
|
|
213
191
|
},
|
|
214
192
|
{
|
|
215
193
|
"name": "accessibleDescriptionRef",
|
|
216
|
-
"description": "Sets the `aria-describedby` attribute of the
|
|
194
|
+
"description": "Sets the `aria-describedby` attribute of the dialog.\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.",
|
|
217
195
|
"value": {
|
|
218
196
|
"type": [
|
|
219
197
|
"string",
|
|
@@ -224,7 +202,7 @@
|
|
|
224
202
|
},
|
|
225
203
|
{
|
|
226
204
|
"name": "opened",
|
|
227
|
-
"description": "True if the
|
|
205
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
228
206
|
"value": {
|
|
229
207
|
"type": [
|
|
230
208
|
"boolean"
|
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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": "?opened",
|
|
24
|
-
"description": "True if the
|
|
24
|
+
"description": "True if the dialog is visible and available for interaction.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
@@ -49,28 +49,21 @@
|
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
51
|
"name": ".width",
|
|
52
|
-
"description": "Set the width of the
|
|
52
|
+
"description": "Set the width of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
53
53
|
"value": {
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
"name": ".height",
|
|
59
|
-
"description": "Set the height of the
|
|
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.",
|
|
59
|
+
"description": "Set the height of the dialog.\nIf a unitless number is provided, pixels are assumed.",
|
|
67
60
|
"value": {
|
|
68
61
|
"kind": "expression"
|
|
69
62
|
}
|
|
70
63
|
},
|
|
71
64
|
{
|
|
72
65
|
"name": ".accessibleDescriptionRef",
|
|
73
|
-
"description": "Sets the `aria-describedby` attribute of the
|
|
66
|
+
"description": "Sets the `aria-describedby` attribute of the dialog.\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.",
|
|
74
67
|
"value": {
|
|
75
68
|
"kind": "expression"
|
|
76
69
|
}
|
|
@@ -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
|
-
import { dialogOverlayBase } from '@vaadin/dialog/src/styles/vaadin-dialog-overlay-core-styles.js';
|
|
8
|
-
import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
|
|
9
|
-
|
|
10
|
-
const confirmDialogOverlay = css`
|
|
11
|
-
#resizerContainer {
|
|
12
|
-
height: 100%;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
[part='header'] {
|
|
16
|
-
pointer-events: auto;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
::slotted([slot='header']) {
|
|
20
|
-
display: contents !important;
|
|
21
|
-
font: inherit !important;
|
|
22
|
-
color: inherit !important;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
/* Make buttons clickable */
|
|
26
|
-
[part='footer'] > * {
|
|
27
|
-
pointer-events: all;
|
|
28
|
-
}
|
|
29
|
-
`;
|
|
30
|
-
|
|
31
|
-
export const confirmDialogOverlayStyles = [overlayStyles, dialogOverlayBase, confirmDialogOverlay];
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
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';
|
|
5
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
6
|
-
|
|
7
|
-
registerStyles(
|
|
8
|
-
'vaadin-confirm-dialog-overlay',
|
|
9
|
-
[
|
|
10
|
-
overlay,
|
|
11
|
-
dialogOverlay,
|
|
12
|
-
css`
|
|
13
|
-
[part='header'] {
|
|
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);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
[part='message'] {
|
|
22
|
-
width: 25em;
|
|
23
|
-
min-width: 100%;
|
|
24
|
-
max-width: 100%;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
::slotted([slot$='button'][theme~='tertiary']) {
|
|
28
|
-
padding-left: var(--lumo-space-s);
|
|
29
|
-
padding-right: var(--lumo-space-s);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
[part='cancel-button'] {
|
|
33
|
-
flex-grow: 1;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@media (max-width: 360px) {
|
|
37
|
-
[part='footer'] {
|
|
38
|
-
flex-direction: column-reverse;
|
|
39
|
-
align-items: stretch;
|
|
40
|
-
padding: var(--lumo-space-s) var(--lumo-space-l);
|
|
41
|
-
gap: var(--lumo-space-s);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
::slotted([slot$='button']) {
|
|
45
|
-
width: 100%;
|
|
46
|
-
margin: 0;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
`,
|
|
50
|
-
],
|
|
51
|
-
{ moduleId: 'lumo-confirm-dialog-overlay' },
|
|
52
|
-
);
|