@vaadin/notification 24.4.0-dev.4b20a0c55.3 → 24.4.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "24.4.0-dev.4b20a0c55.3",
+  "version": "24.4.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,16 +38,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/lit-renderer": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.4b20a0c55.3",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/lit-renderer": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/button": "24.4.0-dev.4b20a0c55.3",
+    "@vaadin/button": "24.4.0-rc1",
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "41cf17453d7506fb635c088a0425e20b6e82b89b"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

package/src/vaadin-notification.js

@@ -484,16 +484,22 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
     }
   }
 
+  /** @private */
+  __cleanUpOpeningClosingState() {
+    this._card.removeAttribute('opening');
+    this._card.removeAttribute('closing');
+    this._card.removeEventListener('animationend', this.__animationEndListener);
+  }
+
   /** @private */
   _animatedAppendNotificationCard() {
     if (this._card) {
+      this.__cleanUpOpeningClosingState();
+
       this._card.setAttribute('opening', '');
       this._appendNotificationCard();
-      const listener = () => {
-        this._card.removeEventListener('animationend', listener);
-        this._card.removeAttribute('opening');
-      };
-      this._card.addEventListener('animationend', listener);
+      this.__animationEndListener = () => this.__cleanUpOpeningClosingState();
+      this._card.addEventListener('animationend', this.__animationEndListener);
       this._didAnimateNotificationAppend = true;
     } else {
       this._didAnimateNotificationAppend = false;
@@ -538,14 +544,16 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
 
   /** @private */
   _animatedRemoveNotificationCard() {
+    this.__cleanUpOpeningClosingState();
+
     this._card.setAttribute('closing', '');
     const name = getComputedStyle(this._card).getPropertyValue('animation-name');
     if (name && name !== 'none') {
-      const listener = () => {
+      this.__animationEndListener = () => {
         this._removeNotificationCard();
-        this._card.removeEventListener('animationend', listener);
+        this.__cleanUpOpeningClosingState();
       };
-      this._card.addEventListener('animationend', listener);
+      this._card.addEventListener('animationend', this.__animationEndListener);
     } else {
       this._removeNotificationCard();
     }

package/theme/lumo/vaadin-notification-styles.d.ts

@@ -0,0 +1,4 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

package/theme/lumo/vaadin-notification.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-notification-styles.js';
+import '../../src/vaadin-notification.js';

package/theme/material/vaadin-notification-styles.d.ts

@@ -0,0 +1,2 @@
+import '@vaadin/vaadin-material-styles/typography.js';
+import '@vaadin/vaadin-material-styles/shadow.js';

package/theme/material/vaadin-notification.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-notification-styles.js';
+import '../../src/vaadin-notification.js';

package/web-types.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/notification",
+  "version": "24.4.0-rc1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-notification",
+          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
+          "attributes": [
+            {
+              "name": "overlay-class",
+              "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.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "duration",
+              "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
+              "value": {
+                "type": [
+                  "number"
+                ]
+              }
+            },
+            {
+              "name": "opened",
+              "description": "True if the notification is currently displayed.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "position",
+              "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`",
+              "value": {
+                "type": [
+                  "NotificationPosition"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "overlayClass",
+                "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.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "duration",
+                "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
+                "value": {
+                  "type": [
+                    "number"
+                  ]
+                }
+              },
+              {
+                "name": "opened",
+                "description": "True if the notification is currently displayed.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "position",
+                "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`",
+                "value": {
+                  "type": [
+                    "NotificationPosition"
+                  ]
+                }
+              },
+              {
+                "name": "renderer",
+                "description": "Custom function for rendering the content of the notification.\nReceives two arguments:\n\n- `root` The `<vaadin-notification-card>` DOM element. Append\n  your content to it.\n- `notification` The reference to the `<vaadin-notification>` element.",
+                "value": {
+                  "type": [
+                    "NotificationRenderer",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "opened-changed",
+                "description": "Fired when the `opened` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/notification",
+  "version": "24.4.0-rc1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-notification",
+          "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?opened",
+              "description": "True if the notification is currently displayed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".overlayClass",
+              "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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".duration",
+              "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".position",
+              "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`",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".renderer",
+              "description": "Custom function for rendering the content of the notification.\nReceives two arguments:\n\n- `root` The `<vaadin-notification-card>` DOM element. Append\n  your content to it.\n- `notification` The reference to the `<vaadin-notification>` element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@opened-changed",
+              "description": "Fired when the `opened` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}