@vaadin/notification 24.4.0-alpha8 → 24.4.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/README.md +0 -1
- package/package.json +8 -8
- package/src/vaadin-notification.js +16 -8
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,6 @@ A web component for providing feedback to the user.
|
|
|
5
5
|
[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/notification)
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@vaadin/notification)
|
|
8
|
-
[](https://discord.gg/PHmkCKC)
|
|
9
8
|
|
|
10
9
|
```html
|
|
11
10
|
<vaadin-notification opened position="middle" duration="-1"></vaadin-notification>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/notification",
|
|
3
|
-
"version": "24.4.0-
|
|
3
|
+
"version": "24.4.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/component-base": "24.4.0-
|
|
42
|
-
"@vaadin/lit-renderer": "24.4.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.4.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.4.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.4.0-
|
|
41
|
+
"@vaadin/component-base": "24.4.0-beta1",
|
|
42
|
+
"@vaadin/lit-renderer": "24.4.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.4.0-beta1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.4.0-beta1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.4.0-beta1",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
50
|
-
"@vaadin/button": "24.4.0-
|
|
50
|
+
"@vaadin/button": "24.4.0-beta1",
|
|
51
51
|
"@vaadin/testing-helpers": "^0.6.0",
|
|
52
52
|
"sinon": "^13.0.2"
|
|
53
53
|
},
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "504787f741d677467ae93ca7cd31d84489366a9c"
|
|
59
59
|
}
|
|
@@ -484,16 +484,22 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
|
|
|
484
484
|
}
|
|
485
485
|
}
|
|
486
486
|
|
|
487
|
+
/** @private */
|
|
488
|
+
__cleanUpOpeningClosingState() {
|
|
489
|
+
this._card.removeAttribute('opening');
|
|
490
|
+
this._card.removeAttribute('closing');
|
|
491
|
+
this._card.removeEventListener('animationend', this.__animationEndListener);
|
|
492
|
+
}
|
|
493
|
+
|
|
487
494
|
/** @private */
|
|
488
495
|
_animatedAppendNotificationCard() {
|
|
489
496
|
if (this._card) {
|
|
497
|
+
this.__cleanUpOpeningClosingState();
|
|
498
|
+
|
|
490
499
|
this._card.setAttribute('opening', '');
|
|
491
500
|
this._appendNotificationCard();
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
this._card.removeAttribute('opening');
|
|
495
|
-
};
|
|
496
|
-
this._card.addEventListener('animationend', listener);
|
|
501
|
+
this.__animationEndListener = () => this.__cleanUpOpeningClosingState();
|
|
502
|
+
this._card.addEventListener('animationend', this.__animationEndListener);
|
|
497
503
|
this._didAnimateNotificationAppend = true;
|
|
498
504
|
} else {
|
|
499
505
|
this._didAnimateNotificationAppend = false;
|
|
@@ -538,14 +544,16 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
|
|
|
538
544
|
|
|
539
545
|
/** @private */
|
|
540
546
|
_animatedRemoveNotificationCard() {
|
|
547
|
+
this.__cleanUpOpeningClosingState();
|
|
548
|
+
|
|
541
549
|
this._card.setAttribute('closing', '');
|
|
542
550
|
const name = getComputedStyle(this._card).getPropertyValue('animation-name');
|
|
543
551
|
if (name && name !== 'none') {
|
|
544
|
-
|
|
552
|
+
this.__animationEndListener = () => {
|
|
545
553
|
this._removeNotificationCard();
|
|
546
|
-
this.
|
|
554
|
+
this.__cleanUpOpeningClosingState();
|
|
547
555
|
};
|
|
548
|
-
this._card.addEventListener('animationend',
|
|
556
|
+
this._card.addEventListener('animationend', this.__animationEndListener);
|
|
549
557
|
} else {
|
|
550
558
|
this._removeNotificationCard();
|
|
551
559
|
}
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED