@vaadin/vaadin-notification - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-notification",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "vaadin-notification.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-notification.js

@@ -266,3 +266,3 @@ /**
   static get version() {
-    return '1.2.0';
+    return '1.2.1';
   }
@@ -362,2 +362,4 @@
     this._oldTemplate = template;
+
+    const rendererChanged = this._oldRenderer !== renderer;
     this._oldRenderer = renderer;
@@ -368,7 +370,12 @@
 
-      while (this._card.firstChild) {
-        this._card.removeChild(this._card.firstChild);
+      if (rendererChanged) {
+        while (this._card.firstChild) {
+          this._card.removeChild(this._card.firstChild);
+        }
       }
 
       if (opened) {
+        if (!this._didAnimateNotificationAppend) {
+          this._animatedAppendNotificationCard();
+        }
         this.render();
@@ -474,9 +481,14 @@ }
   _animatedAppendNotificationCard() {
-    this._card.setAttribute('opening', '');
-    this._appendNotificationCard();
-    const listener = () => {
-      this._card.removeEventListener('animationend', listener);
-      this._card.removeAttribute('opening');
-    };
-    this._card.addEventListener('animationend', listener);
+    if (this._card) {
+      this._card.setAttribute('opening', '');
+      this._appendNotificationCard();
+      const listener = () => {
+        this._card.removeEventListener('animationend', listener);
+        this._card.removeAttribute('opening');
+      };
+      this._card.addEventListener('animationend', listener);
+      this._didAnimateNotificationAppend = true;
+    } else {
+      this._didAnimateNotificationAppend = false;
+    }
   }
@@ -483,0 +495,0 @@

theme/lumo/vaadin-notification-styles.js

@@ -5,5 +5,5 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-notification-card" theme-for="vaadin-notification-card">
+const $_documentContainer = html`<dom-module id="lumo-notification-card" theme-for="vaadin-notification-card">
   <template>
@@ -10,0 +10,0 @@ <style>

theme/material/vaadin-notification-styles.js

 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
-const $_documentContainer = document.createElement('template');
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 
-$_documentContainer.innerHTML = `<dom-module id="material-notification-container" theme-for="vaadin-notification-container">
+const $_documentContainer = html`<dom-module id="material-notification-container" theme-for="vaadin-notification-container">
   <template>
@@ -8,0 +8,0 @@ <style>

No alert changes

Improved metrics

Total package byte prevSize

40573

increased by0.91%

Lines of code

744

increased by1.5%

No dependency changes