@vaadin/notification

{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "vaadin-notification.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "module": "src/vaadin-notification.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-notification-mixin.js", "declarations": [ { "kind": "mixin", "description": "A mixin providing common notification container functionality.", "name": "NotificationContainerMixin", "members": [ { "kind": "method", "name": "bringToFront", "description": "Move the notification container to the top of the stack." }, { "kind": "field", "name": "opened", "privacy": "public", "type": { "text": "boolean" }, "description": "True when the container is opened", "attribute": "opened" } ], "attributes": [ { "name": "opened", "type": { "text": "boolean" }, "description": "True when the container is opened", "fieldName": "opened" } ], "parameters": [ { "name": "superClass" } ] }, { "kind": "mixin", "description": "A mixin providing common notification functionality.", "name": "NotificationMixin", "members": [ { "kind": "field", "name": "assertive", "privacy": "public", "type": { "text": "boolean" }, "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.", "attribute": "assertive" }, { "kind": "method", "name": "close", "description": "Closes the notification." }, { "kind": "field", "name": "duration", "privacy": "public", "type": { "text": "number" }, "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.", "attribute": "duration" }, { "kind": "method", "name": "open", "description": "Opens the notification." }, { "kind": "field", "name": "opened", "privacy": "public", "type": { "text": "boolean" }, "description": "True if the notification is currently displayed.", "attribute": "opened" }, { "kind": "field", "name": "overlayClass", "privacy": "public", "type": { "text": "string" }, "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.", "attribute": "overlay-class", "inheritedFrom": { "name": "OverlayClassMixin", "package": "@vaadin/component-base/src/overlay-class-mixin.js" } }, { "kind": "field", "name": "position", "privacy": "public", "type": { "text": "string" }, "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`", "attribute": "position" }, { "kind": "field", "name": "renderer", "privacy": "public", "type": { "text": "!NotificationRenderer | undefined" }, "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.", "attribute": "renderer" }, { "kind": "method", "name": "requestContentUpdate", "description": "Requests an update for the content of the notification.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested." }, { "kind": "method", "name": "show", "static": true, "parameters": [ { "name": "contents", "description": "the contents to show, either as a string or a Lit template." }, { "name": "options", "description": "optional options for customizing the notification." } ], "description": "Shows a notification with the given content.\nBy default, positions the notification at `bottom-start` and uses a 5 second duration.\nAn options object can be passed to configure the notification.\nThe options object has the following structure:\n\n```ts\n{\n assertive?: boolean\n position?: string\n duration?: number\n theme?: string\n}\n```\n\nSee the individual documentation for:\n- [`assertive`](#/elements/vaadin-notification#property-assertive)\n- [`position`](#/elements/vaadin-notification#property-position)\n- [`duration`](#/elements/vaadin-notification#property-duration)" } ], "events": [ { "name": "closed", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "assertive", "type": { "text": "boolean" }, "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.", "fieldName": "assertive" }, { "name": "duration", "type": { "text": "number" }, "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.", "fieldName": "duration" }, { "name": "opened", "type": { "text": "boolean" }, "description": "True if the notification is currently displayed.", "fieldName": "opened" }, { "name": "overlay-class", "type": { "text": "string" }, "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.", "fieldName": "overlayClass", "inheritedFrom": { "name": "OverlayClassMixin", "package": "@vaadin/component-base/src/overlay-class-mixin.js" } }, { "name": "position", "type": { "text": "string" }, "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`", "fieldName": "position" }, { "name": "renderer", "type": { "text": "!NotificationRenderer | undefined" }, "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.", "fieldName": "renderer" } ], "mixins": [ { "name": "ThemePropertyMixin", "package": "@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js" }, { "name": "OverlayClassMixin", "package": "@vaadin/component-base/src/overlay-class-mixin.js" } ], "parameters": [ { "name": "superClass" } ] } ], "exports": [ { "kind": "js", "name": "NotificationContainerMixin", "declaration": { "name": "NotificationContainerMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "js", "name": "NotificationMixin", "declaration": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-notification.js", "declarations": [ { "kind": "class", "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>`.", "name": "Notification", "members": [ { "kind": "field", "name": "assertive", "privacy": "public", "type": { "text": "boolean" }, "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.", "attribute": "assertive", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "method", "name": "close", "description": "Closes the notification.", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "field", "name": "duration", "privacy": "public", "type": { "text": "number" }, "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.", "attribute": "duration", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "method", "name": "open", "description": "Opens the notification.", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "field", "name": "opened", "privacy": "public", "type": { "text": "boolean" }, "description": "True if the notification is currently displayed.", "attribute": "opened", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "field", "name": "overlayClass", "privacy": "public", "type": { "text": "string" }, "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.", "attribute": "overlay-class", "inheritedFrom": { "name": "OverlayClassMixin", "package": "@vaadin/component-base/src/overlay-class-mixin.js" } }, { "kind": "field", "name": "position", "privacy": "public", "type": { "text": "string" }, "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`", "attribute": "position", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "field", "name": "renderer", "privacy": "public", "type": { "text": "!NotificationRenderer | undefined" }, "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.", "attribute": "renderer", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "method", "name": "requestContentUpdate", "description": "Requests an update for the content of the notification.\nWhile performing the update, it invokes the renderer passed in the `renderer` property.\n\nIt is not guaranteed that the update happens immediately (synchronously) after it is requested.", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "kind": "method", "name": "show", "static": true, "parameters": [ { "name": "contents", "description": "the contents to show, either as a string or a Lit template." }, { "name": "options", "description": "optional options for customizing the notification." } ], "description": "Shows a notification with the given content.\nBy default, positions the notification at `bottom-start` and uses a 5 second duration.\nAn options object can be passed to configure the notification.\nThe options object has the following structure:\n\n```ts\n{\n assertive?: boolean\n position?: string\n duration?: number\n theme?: string\n}\n```\n\nSee the individual documentation for:\n- [`assertive`](#/elements/vaadin-notification#property-assertive)\n- [`position`](#/elements/vaadin-notification#property-position)\n- [`duration`](#/elements/vaadin-notification#property-duration)", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } } ], "events": [ { "name": "closed", "type": { "text": "CustomEvent" }, "description": "Fired when the notification is closed.", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "type": { "text": "CustomEvent" }, "description": "Fired when the `opened` property changes.", "name": "opened-changed" } ], "mixins": [ { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" }, { "name": "ElementMixin", "package": "@vaadin/component-base/src/element-mixin.js" }, { "name": "ThemableMixin", "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js" }, { "name": "PolylitMixin", "package": "@vaadin/component-base/src/polylit-mixin.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "vaadin-notification", "customElement": true, "attributes": [ { "name": "assertive", "type": { "text": "boolean" }, "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.", "fieldName": "assertive", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "name": "duration", "type": { "text": "number" }, "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.", "fieldName": "duration", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "name": "opened", "type": { "text": "boolean" }, "description": "True if the notification is currently displayed.", "fieldName": "opened", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "name": "overlay-class", "type": { "text": "string" }, "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.", "fieldName": "overlayClass", "inheritedFrom": { "name": "OverlayClassMixin", "package": "@vaadin/component-base/src/overlay-class-mixin.js" } }, { "name": "position", "type": { "text": "string" }, "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`", "fieldName": "position", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } }, { "name": "renderer", "type": { "text": "!NotificationRenderer | undefined" }, "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.", "fieldName": "renderer", "inheritedFrom": { "name": "NotificationMixin", "module": "src/vaadin-notification-mixin.js" } } ] } ], "exports": [ { "kind": "js", "name": "Notification", "declaration": { "name": "Notification", "module": "src/vaadin-notification.js" } } ] } ] }