@vaadin/confirm-dialog 24.2.0-alpha4 → 24.2.0-dev.538d07bdf
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-dev.538d07bdf",
|
|
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-dev.538d07bdf",
|
|
40
|
+
"@vaadin/component-base": "24.2.0-dev.538d07bdf",
|
|
41
|
+
"@vaadin/dialog": "24.2.0-dev.538d07bdf",
|
|
42
|
+
"@vaadin/overlay": "24.2.0-dev.538d07bdf",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.2.0-dev.538d07bdf",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.2.0-dev.538d07bdf",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.2.0-dev.538d07bdf"
|
|
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.4.
|
|
49
|
+
"@vaadin/a11y-base": "24.2.0-dev.538d07bdf",
|
|
50
|
+
"@vaadin/testing-helpers": "^0.4.3",
|
|
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": "86c2fd5f37cf1240af98f7c7d752518c8d701db2"
|
|
58
58
|
}
|
|
@@ -3,91 +3,82 @@
|
|
|
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
|
-
{ moduleId: 'vaadin-confirm-dialog-overlay-styles' },
|
|
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
|
+
/* Make buttons clickable */
|
|
28
|
+
[part='footer'] > * {
|
|
29
|
+
pointer-events: all;
|
|
30
|
+
}
|
|
44
31
|
`;
|
|
45
32
|
|
|
33
|
+
registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, confirmDialogOverlay], {
|
|
34
|
+
moduleId: 'vaadin-confirm-dialog-overlay-styles',
|
|
35
|
+
});
|
|
36
|
+
|
|
46
37
|
/**
|
|
47
|
-
* An
|
|
48
|
-
*
|
|
38
|
+
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
39
|
+
*
|
|
40
|
+
* @extends HTMLElement
|
|
41
|
+
* @mixes DirMixin
|
|
42
|
+
* @mixes OverlayMixin
|
|
43
|
+
* @mixes ThemableMixin
|
|
49
44
|
* @private
|
|
50
45
|
*/
|
|
51
|
-
class ConfirmDialogOverlay extends
|
|
46
|
+
class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
|
|
52
47
|
static get is() {
|
|
53
48
|
return 'vaadin-confirm-dialog-overlay';
|
|
54
49
|
}
|
|
55
50
|
|
|
56
51
|
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;
|
|
52
|
+
return html`
|
|
53
|
+
<div part="backdrop" id="backdrop" hidden$="[[!withBackdrop]]"></div>
|
|
54
|
+
<div part="overlay" id="overlay" tabindex="0">
|
|
55
|
+
<section id="resizerContainer" class="resizer-container">
|
|
56
|
+
<header part="header"><slot name="header"></slot></header>
|
|
57
|
+
<div part="content" id="content">
|
|
58
|
+
<div part="message"><slot></slot></div>
|
|
59
|
+
</div>
|
|
60
|
+
<footer part="footer" role="toolbar">
|
|
61
|
+
<div part="cancel-button">
|
|
62
|
+
<slot name="cancel-button"></slot>
|
|
63
|
+
</div>
|
|
64
|
+
<div part="reject-button">
|
|
65
|
+
<slot name="reject-button"></slot>
|
|
66
|
+
</div>
|
|
67
|
+
<div part="confirm-button">
|
|
68
|
+
<slot name="confirm-button"></slot>
|
|
69
|
+
</div>
|
|
70
|
+
</footer>
|
|
71
|
+
</section>
|
|
72
|
+
</div>
|
|
73
|
+
`;
|
|
83
74
|
}
|
|
84
75
|
|
|
85
76
|
/**
|
|
86
77
|
* @protected
|
|
87
78
|
* @override
|
|
88
79
|
*/
|
|
89
|
-
|
|
90
|
-
super.
|
|
80
|
+
ready() {
|
|
81
|
+
super.ready();
|
|
91
82
|
|
|
92
83
|
// ConfirmDialog has header and footer but does not use renderers
|
|
93
84
|
this.setAttribute('has-header', '');
|
|
@@ -98,18 +89,14 @@ class ConfirmDialogOverlay extends DialogOverlay {
|
|
|
98
89
|
customElements.define(ConfirmDialogOverlay.is, ConfirmDialogOverlay);
|
|
99
90
|
|
|
100
91
|
/**
|
|
101
|
-
* An
|
|
102
|
-
* Not intended to be used separately.
|
|
92
|
+
* An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
|
|
103
93
|
* @private
|
|
104
94
|
*/
|
|
105
|
-
class ConfirmDialogDialog extends
|
|
95
|
+
class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))) {
|
|
106
96
|
static get is() {
|
|
107
97
|
return 'vaadin-confirm-dialog-dialog';
|
|
108
98
|
}
|
|
109
99
|
|
|
110
|
-
/**
|
|
111
|
-
* Override template to provide custom overlay tag name.
|
|
112
|
-
*/
|
|
113
100
|
static get template() {
|
|
114
101
|
return html`
|
|
115
102
|
<style>
|
|
@@ -120,6 +107,7 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
120
107
|
|
|
121
108
|
<vaadin-confirm-dialog-overlay
|
|
122
109
|
id="overlay"
|
|
110
|
+
opened="[[opened]]"
|
|
123
111
|
on-opened-changed="_onOverlayOpened"
|
|
124
112
|
on-mousedown="_bringOverlayToFront"
|
|
125
113
|
on-touchstart="_bringOverlayToFront"
|
|
@@ -127,6 +115,7 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
127
115
|
modeless="[[modeless]]"
|
|
128
116
|
with-backdrop="[[!modeless]]"
|
|
129
117
|
resizable$="[[resizable]]"
|
|
118
|
+
aria-label$="[[ariaLabel]]"
|
|
130
119
|
restore-focus-on-close
|
|
131
120
|
focus-trap
|
|
132
121
|
></vaadin-confirm-dialog-overlay>
|
|
@@ -135,6 +124,16 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
135
124
|
|
|
136
125
|
static get properties() {
|
|
137
126
|
return {
|
|
127
|
+
/**
|
|
128
|
+
* Set the `aria-label` attribute for assistive technologies like
|
|
129
|
+
* screen readers. An empty string value for this property (the
|
|
130
|
+
* default) means that the `aria-label` attribute is not present.
|
|
131
|
+
*/
|
|
132
|
+
ariaLabel: {
|
|
133
|
+
type: String,
|
|
134
|
+
value: '',
|
|
135
|
+
},
|
|
136
|
+
|
|
138
137
|
/**
|
|
139
138
|
* Height to be set on the overlay content.
|
|
140
139
|
*/
|
|
@@ -148,11 +147,6 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
148
147
|
contentWidth: {
|
|
149
148
|
type: String,
|
|
150
149
|
},
|
|
151
|
-
|
|
152
|
-
/** @private */
|
|
153
|
-
_overlayElement: {
|
|
154
|
-
type: Object,
|
|
155
|
-
},
|
|
156
150
|
};
|
|
157
151
|
}
|
|
158
152
|
|
|
@@ -163,13 +157,6 @@ class ConfirmDialogDialog extends Dialog {
|
|
|
163
157
|
];
|
|
164
158
|
}
|
|
165
159
|
|
|
166
|
-
/** @protected */
|
|
167
|
-
ready() {
|
|
168
|
-
super.ready();
|
|
169
|
-
|
|
170
|
-
this._overlayElement = this.$.overlay;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
160
|
/** @private */
|
|
174
161
|
__updateDimension(overlay, dimension, value) {
|
|
175
162
|
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
DELETED
|
@@ -1,315 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.2.0-alpha4",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"contributions": {
|
|
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.2.0-alpha4/#/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
|
-
"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
|
-
]
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
}
|
package/web-types.lit.json
DELETED
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
-
"name": "@vaadin/confirm-dialog",
|
|
4
|
-
"version": "24.2.0-alpha4",
|
|
5
|
-
"description-markup": "markdown",
|
|
6
|
-
"framework": "lit",
|
|
7
|
-
"framework-config": {
|
|
8
|
-
"enable-when": {
|
|
9
|
-
"node-packages": [
|
|
10
|
-
"lit"
|
|
11
|
-
]
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"contributions": {
|
|
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.2.0-alpha4/#/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
|
-
"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
|
-
]
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|