@vaadin/notification 25.2.0-alpha1 → 25.2.0-alpha11
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 +10 -10
- package/src/vaadin-notification-mixin.js +5 -17
- package/src/vaadin-notification.js +0 -12
- package/web-types.json +11 -31
- package/web-types.lit.json +5 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/notification",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/component-base": "25.2.0-
|
|
41
|
-
"@vaadin/lit-renderer": "25.2.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
40
|
+
"@vaadin/component-base": "25.2.0-alpha11",
|
|
41
|
+
"@vaadin/lit-renderer": "25.2.0-alpha11",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha11",
|
|
43
43
|
"lit": "^3.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/aura": "25.2.0-
|
|
47
|
-
"@vaadin/button": "25.2.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
46
|
+
"@vaadin/aura": "25.2.0-alpha11",
|
|
47
|
+
"@vaadin/button": "25.2.0-alpha11",
|
|
48
|
+
"@vaadin/chai-plugins": "25.2.0-alpha11",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha11",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha11",
|
|
52
52
|
"sinon": "^21.0.2"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "fdc37e932709f95491a027aeb2090911cb7528c6"
|
|
60
60
|
}
|
|
@@ -11,8 +11,6 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
|
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* A mixin providing common notification container functionality.
|
|
14
|
-
*
|
|
15
|
-
* @polymerMixin
|
|
16
14
|
*/
|
|
17
15
|
export const NotificationContainerMixin = (superClass) =>
|
|
18
16
|
class extends superClass {
|
|
@@ -94,7 +92,7 @@ export const NotificationContainerMixin = (superClass) =>
|
|
|
94
92
|
// Notifications are a separate overlay mechanism from vaadin-overlay, and
|
|
95
93
|
// interacting with them should not close modal overlays
|
|
96
94
|
const sourceEvent = event.detail.sourceEvent;
|
|
97
|
-
const isFromNotification = sourceEvent
|
|
95
|
+
const isFromNotification = sourceEvent?.composedPath().indexOf(this) >= 0;
|
|
98
96
|
if (isFromNotification) {
|
|
99
97
|
event.preventDefault();
|
|
100
98
|
}
|
|
@@ -103,10 +101,6 @@ export const NotificationContainerMixin = (superClass) =>
|
|
|
103
101
|
|
|
104
102
|
/**
|
|
105
103
|
* A mixin providing common notification functionality.
|
|
106
|
-
*
|
|
107
|
-
* @polymerMixin
|
|
108
|
-
* @mixes OverlayClassMixin
|
|
109
|
-
* @mixes ThemePropertyMixin
|
|
110
104
|
*/
|
|
111
105
|
export const NotificationMixin = (superClass) =>
|
|
112
106
|
class extends ThemePropertyMixin(OverlayClassMixin(superClass)) {
|
|
@@ -216,16 +210,16 @@ export const NotificationMixin = (superClass) =>
|
|
|
216
210
|
if (options && Number.isFinite(options.duration)) {
|
|
217
211
|
notification.duration = options.duration;
|
|
218
212
|
}
|
|
219
|
-
if (options
|
|
213
|
+
if (options?.position) {
|
|
220
214
|
notification.position = options.position;
|
|
221
215
|
}
|
|
222
|
-
if (options
|
|
216
|
+
if (options?.assertive) {
|
|
223
217
|
notification.assertive = options.assertive;
|
|
224
218
|
}
|
|
225
|
-
if (options
|
|
219
|
+
if (options?.theme) {
|
|
226
220
|
notification.setAttribute('theme', options.theme);
|
|
227
221
|
}
|
|
228
|
-
if (options
|
|
222
|
+
if (options?.className) {
|
|
229
223
|
notification.overlayClass = options.className;
|
|
230
224
|
}
|
|
231
225
|
notification.renderer = renderer;
|
|
@@ -443,10 +437,4 @@ export const NotificationMixin = (superClass) =>
|
|
|
443
437
|
}
|
|
444
438
|
}
|
|
445
439
|
}
|
|
446
|
-
|
|
447
|
-
/**
|
|
448
|
-
* Fired when the notification is closed.
|
|
449
|
-
*
|
|
450
|
-
* @event closed
|
|
451
|
-
*/
|
|
452
440
|
};
|
|
@@ -19,9 +19,6 @@ import { NotificationContainerMixin, NotificationMixin } from './vaadin-notifica
|
|
|
19
19
|
*
|
|
20
20
|
* @customElement vaadin-notification-container
|
|
21
21
|
* @extends HTMLElement
|
|
22
|
-
* @mixes NotificationContainerMixin
|
|
23
|
-
* @mixes ElementMixin
|
|
24
|
-
* @mixes ThemableMixin
|
|
25
22
|
* @private
|
|
26
23
|
*/
|
|
27
24
|
class NotificationContainer extends NotificationContainerMixin(
|
|
@@ -60,7 +57,6 @@ class NotificationContainer extends NotificationContainerMixin(
|
|
|
60
57
|
*
|
|
61
58
|
* @customElement vaadin-notification-card
|
|
62
59
|
* @extends HTMLElement
|
|
63
|
-
* @mixes ThemableMixin
|
|
64
60
|
* @private
|
|
65
61
|
*/
|
|
66
62
|
class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
|
|
@@ -139,8 +135,6 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
|
|
|
139
135
|
*
|
|
140
136
|
* @customElement vaadin-notification
|
|
141
137
|
* @extends HTMLElement
|
|
142
|
-
* @mixes NotificationMixin
|
|
143
|
-
* @mixes ElementMixin
|
|
144
138
|
*/
|
|
145
139
|
class Notification extends NotificationMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
146
140
|
static get is() {
|
|
@@ -164,12 +158,6 @@ class Notification extends NotificationMixin(ElementMixin(ThemableMixin(PolylitM
|
|
|
164
158
|
></vaadin-notification-card>
|
|
165
159
|
`;
|
|
166
160
|
}
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Fired when the notification is closed.
|
|
170
|
-
*
|
|
171
|
-
* @event closed
|
|
172
|
-
*/
|
|
173
161
|
}
|
|
174
162
|
|
|
175
163
|
defineCustomElement(NotificationContainer);
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/notification",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"boolean"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"boolean"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -26,9 +24,7 @@
|
|
|
26
24
|
"description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"number"
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
27
|
+
"number"
|
|
32
28
|
]
|
|
33
29
|
}
|
|
34
30
|
},
|
|
@@ -37,9 +33,7 @@
|
|
|
37
33
|
"description": "True if the notification is currently displayed.",
|
|
38
34
|
"value": {
|
|
39
35
|
"type": [
|
|
40
|
-
"boolean"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
36
|
+
"boolean"
|
|
43
37
|
]
|
|
44
38
|
}
|
|
45
39
|
},
|
|
@@ -48,9 +42,7 @@
|
|
|
48
42
|
"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.",
|
|
49
43
|
"value": {
|
|
50
44
|
"type": [
|
|
51
|
-
"string"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
45
|
+
"string"
|
|
54
46
|
]
|
|
55
47
|
}
|
|
56
48
|
},
|
|
@@ -59,9 +51,7 @@
|
|
|
59
51
|
"description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
|
|
60
52
|
"value": {
|
|
61
53
|
"type": [
|
|
62
|
-
"string"
|
|
63
|
-
"null",
|
|
64
|
-
"undefined"
|
|
54
|
+
"string"
|
|
65
55
|
]
|
|
66
56
|
}
|
|
67
57
|
},
|
|
@@ -84,9 +74,7 @@
|
|
|
84
74
|
"description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
|
|
85
75
|
"value": {
|
|
86
76
|
"type": [
|
|
87
|
-
"boolean"
|
|
88
|
-
"null",
|
|
89
|
-
"undefined"
|
|
77
|
+
"boolean"
|
|
90
78
|
]
|
|
91
79
|
}
|
|
92
80
|
},
|
|
@@ -95,9 +83,7 @@
|
|
|
95
83
|
"description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
|
|
96
84
|
"value": {
|
|
97
85
|
"type": [
|
|
98
|
-
"number"
|
|
99
|
-
"null",
|
|
100
|
-
"undefined"
|
|
86
|
+
"number"
|
|
101
87
|
]
|
|
102
88
|
}
|
|
103
89
|
},
|
|
@@ -106,9 +92,7 @@
|
|
|
106
92
|
"description": "True if the notification is currently displayed.",
|
|
107
93
|
"value": {
|
|
108
94
|
"type": [
|
|
109
|
-
"boolean"
|
|
110
|
-
"null",
|
|
111
|
-
"undefined"
|
|
95
|
+
"boolean"
|
|
112
96
|
]
|
|
113
97
|
}
|
|
114
98
|
},
|
|
@@ -117,9 +101,7 @@
|
|
|
117
101
|
"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.",
|
|
118
102
|
"value": {
|
|
119
103
|
"type": [
|
|
120
|
-
"string"
|
|
121
|
-
"null",
|
|
122
|
-
"undefined"
|
|
104
|
+
"string"
|
|
123
105
|
]
|
|
124
106
|
}
|
|
125
107
|
},
|
|
@@ -128,9 +110,7 @@
|
|
|
128
110
|
"description": "Alignment of the notification in the viewport\nValid values are `top-stretch|top-start|top-center|top-end|middle|bottom-start|bottom-center|bottom-end|bottom-stretch`",
|
|
129
111
|
"value": {
|
|
130
112
|
"type": [
|
|
131
|
-
"string"
|
|
132
|
-
"null",
|
|
133
|
-
"undefined"
|
|
113
|
+
"string"
|
|
134
114
|
]
|
|
135
115
|
}
|
|
136
116
|
},
|
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/notification",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".duration",
|
|
31
|
+
"description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"description": "
|
|
37
|
+
"name": "?opened",
|
|
38
|
+
"description": "True if the notification is currently displayed.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|