@vaadin/notification 25.2.0-alpha11 → 25.2.0-alpha13
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/custom-elements.json
CHANGED
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
"declarations": [
|
|
264
264
|
{
|
|
265
265
|
"kind": "class",
|
|
266
|
-
"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
|
|
266
|
+
"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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-notification-background` |\n| `--vaadin-notification-border-color` |\n| `--vaadin-notification-border-radius` |\n| `--vaadin-notification-border-width` |\n| `--vaadin-notification-container-gap` |\n| `--vaadin-notification-padding` |\n| `--vaadin-notification-shadow` |\n| `--vaadin-notification-viewport-inset` |\n| `--vaadin-notification-width` |\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>`.",
|
|
267
267
|
"name": "Notification",
|
|
268
268
|
"members": [
|
|
269
269
|
{
|
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-alpha13",
|
|
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-alpha13",
|
|
41
|
+
"@vaadin/lit-renderer": "25.2.0-alpha13",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha13",
|
|
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-alpha13",
|
|
47
|
+
"@vaadin/button": "25.2.0-alpha13",
|
|
48
|
+
"@vaadin/chai-plugins": "25.2.0-alpha13",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha13",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha13",
|
|
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": "a1052aee053529ffcef1a1e9be2c855ed3e98cb2"
|
|
60
60
|
}
|
|
@@ -84,10 +84,24 @@ declare class NotificationCard extends ThemableMixin(HTMLElement) {}
|
|
|
84
84
|
* The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
|
|
85
85
|
*
|
|
86
86
|
* Part name | Description
|
|
87
|
-
*
|
|
87
|
+
* ----------|----------------
|
|
88
88
|
* `overlay` | The notification container
|
|
89
89
|
* `content` | The content of the notification
|
|
90
90
|
*
|
|
91
|
+
* The following custom CSS properties are available for styling:
|
|
92
|
+
*
|
|
93
|
+
* Custom CSS property |
|
|
94
|
+
* :-----------------------------------------|
|
|
95
|
+
* | `--vaadin-notification-background` |
|
|
96
|
+
* | `--vaadin-notification-border-color` |
|
|
97
|
+
* | `--vaadin-notification-border-radius` |
|
|
98
|
+
* | `--vaadin-notification-border-width` |
|
|
99
|
+
* | `--vaadin-notification-container-gap` |
|
|
100
|
+
* | `--vaadin-notification-padding` |
|
|
101
|
+
* | `--vaadin-notification-shadow` |
|
|
102
|
+
* | `--vaadin-notification-viewport-inset` |
|
|
103
|
+
* | `--vaadin-notification-width` |
|
|
104
|
+
*
|
|
91
105
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
92
106
|
*
|
|
93
107
|
* Note: the `theme` attribute value set on `<vaadin-notification>` is
|
|
@@ -121,10 +121,24 @@ class NotificationCard extends ThemableMixin(PolylitMixin(LumoInjectionMixin(Lit
|
|
|
121
121
|
* The following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:
|
|
122
122
|
*
|
|
123
123
|
* Part name | Description
|
|
124
|
-
*
|
|
124
|
+
* ----------|----------------
|
|
125
125
|
* `overlay` | The notification container
|
|
126
126
|
* `content` | The content of the notification
|
|
127
127
|
*
|
|
128
|
+
* The following custom CSS properties are available for styling:
|
|
129
|
+
*
|
|
130
|
+
* Custom CSS property |
|
|
131
|
+
* :-----------------------------------------|
|
|
132
|
+
* | `--vaadin-notification-background` |
|
|
133
|
+
* | `--vaadin-notification-border-color` |
|
|
134
|
+
* | `--vaadin-notification-border-radius` |
|
|
135
|
+
* | `--vaadin-notification-border-width` |
|
|
136
|
+
* | `--vaadin-notification-container-gap` |
|
|
137
|
+
* | `--vaadin-notification-padding` |
|
|
138
|
+
* | `--vaadin-notification-shadow` |
|
|
139
|
+
* | `--vaadin-notification-viewport-inset` |
|
|
140
|
+
* | `--vaadin-notification-width` |
|
|
141
|
+
*
|
|
128
142
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
129
143
|
*
|
|
130
144
|
* Note: the `theme` attribute value set on `<vaadin-notification>` is
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
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-alpha13",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-notification",
|
|
11
|
-
"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
|
|
11
|
+
"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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-notification-background` |\n| `--vaadin-notification-border-color` |\n| `--vaadin-notification-border-radius` |\n| `--vaadin-notification-border-width` |\n| `--vaadin-notification-container-gap` |\n| `--vaadin-notification-padding` |\n| `--vaadin-notification-shadow` |\n| `--vaadin-notification-viewport-inset` |\n| `--vaadin-notification-width` |\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>`.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "assertive",
|
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-alpha13",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-notification",
|
|
19
|
-
"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
|
|
19
|
+
"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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:-----------------------------------------|\n| `--vaadin-notification-background` |\n| `--vaadin-notification-border-color` |\n| `--vaadin-notification-border-radius` |\n| `--vaadin-notification-border-width` |\n| `--vaadin-notification-container-gap` |\n| `--vaadin-notification-padding` |\n| `--vaadin-notification-shadow` |\n| `--vaadin-notification-viewport-inset` |\n| `--vaadin-notification-width` |\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>`.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|