## class: `WyNotificationToasts`, `wy-notification-toasts`

Weavy notification toast component to show overlay toasts in realtime when notifications are received. It shows in-app rendered notifications, native [browser notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) or just provide notification events without rendering.

When in-app notifications are used, each notification is displayed with an avatar, a title, and additional summary/details with formatted text.
When clicked the notification fires a `"wy-link"` event with information about the originating Weavy component for the notification.
This can be used to [handle navigation](https://www.weavy.com/docs/learn/notifications) in the app, and navigate back to where the originating Weavy component is placed.

**Component Layout**

When used with *in-app* notifications, the notifications renders as overlays in the lower right corner of the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer).
That means that the component does not occupy any visual layout space where it's placed in the DOM, it only renders in the top layer.

You can add additional styling using *CSS Custom Properties* and *CSS Shadow Parts* and further customization using *slots*.

**Used sub components:**

*   [`<wy-toasts>`](./components/ui/wy-toast)
*   [`<wy-toast>`](./components/ui/wy-toast)
*   [`<wy-notification-list-item>`](./components/wy-notification-list-item)

### Examples

<figure class="example"><figcaption>In-app notifications</figcaption>

Display rich html notification toasts on your page.

```html
<wy-notification-toasts></wy-notification-toasts>
```

</figure>

<figure class="example"><figcaption>Browser notifications</figcaption>

Display notifications using the native browser notification API.

```html
<wy-notification-toasts appearance="native"></wy-notification-toasts>
```

</figure>

### Fields

| Name                    | Type                                          | Default            | Description                                                                                                                                                            | Inherited From     |
| ----------------------- | --------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `typeFilter`            | `"" \| "activity" \| "mention" \| "reaction"` | `""`               | Notification types to display.                                                                                                                                         |                    |
| `appearance`            | `"internal" \| "native" \| "none"`            | `"internal"`       | Notification delivery mode.&#xA;&#xA;- \`internal\` renders in-app toasts.&#xA;- \`native\` uses browser notifications.&#xA;- \`none\` only emits notification events. |                    |
| `requestUserPermission` | `boolean`                                     | `false`            | Require user consent before showing internal notifications. Native notifications always prompt automatically.                                                          |                    |
| `duration`              | `number`                                      |                    | Duration in milliseconds for internal toast visibility.                                                                                                                |                    |
| `app`                   | `AppType \| undefined`                        |                    | The current app data.                                                                                                                                                  | WeavyAppComponent  |
| `apps`                  | `AppListType \| undefined`                    |                    | A list of data for all the apps specified by the \`uid\` property.                                                                                                     | WeavyAppComponent  |
| `link`                  | `LinkType \| undefined`                       |                    | Any provided link that should be loaded, shown and highlighted.                                                                                                        | WeavyTypeComponent |
| `generateUid`           | `string \| null \| undefined`                 |                    | Sets the uid property to a single uid with automatically appended user and agent name (where applicable).                                                              | WeavyAppComponent  |
| `uid`                   |                                               |                    | One or multiple unique app identifiers or app id:s. When a single uid is provided, the app gets automatically created on the server upon first request.                | WeavyAppComponent  |
| `uids`                  |                                               |                    | An array of parsed uids from the \`uid\` property.                                                                                                                     | WeavyAppComponent  |
| `currentUid`            | `string \| number \| null \| undefined`       | `undefined`        | The currently selected app uid when multiple \`uid\` is provided. Defaults to the first uid from the \`uid\` property.                                                 | WeavyAppComponent  |
| `name`                  | `string \| undefined`                         |                    | Optional display name for the app (used in notifications etc.)                                                                                                         | WeavyAppComponent  |
| `features`              | `string \| undefined`                         |                    | Config for enabling/disabling specific features in the weavy component.&#xA;Prefix a feature with minus to disable it.                                                 | WeavyTypeComponent |
| `agent`                 | `string \| undefined`                         |                    | The configured uid of the agent for the weavy component.                                                                                                               | WeavyTypeComponent |
| `contextualData`        | `string \| undefined`                         |                    | Contextual data for agents to reference. Provide descriptive data for optimal results.&#xA;&#xA;### Examples                                                           | WeavyTypeComponent |
| `annotations`           | `AnnotationsAppearanceType`                   | `"buttons-inline"` | Appearance of annotations.                                                                                                                                             | WeavyTypeComponent |
| `enterToSend`           | `EnterToSend`                                 | `"auto"`           | Enter-to-send keymap in the editor. \`"modifier"\` is \`Enter\` combined with \`Ctrl\` or \`Cmd\`.                                                                     | WeavyTypeComponent |
| `reactions`             | `string`                                      | `"😍 😎 😉 😜 👍"` | A space separated string of available reaction emojis in unicode.                                                                                                      | WeavyTypeComponent |
| `weavy`                 | `WeavyType \| undefined`                      |                    | The consumed weavy context.                                                                                                                                            | WeavyComponent     |
| `contextId`             | `ContextIdType`                               |                    | Contextual guid that is unique for the client context.                                                                                                                 | WeavyComponent     |
| `user`                  | `UserType \| undefined`                       |                    | The current user.                                                                                                                                                      | WeavyComponent     |

### Methods

| Name                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Parameters                                    | Return                    | Inherited From    |
| -------------------- |   | --------------------------------------------- | ------------------------- | ----------------- |
| `hasUserPermission`  | Checks if the user has granted permission for desktop notifications. A request will be made if permission has not yet been granted.                                                                                                                                                                                                                                                                                                                                                                                                                       |                                               |                           |                   |
| `clearNotifications` | Clears queued internal toast notifications.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |                                               |                           |                   |
| `markAsRead`         | Marks a notification as read or unread.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `notificationId: number, markAsRead: boolean` |                           |                   |
| `reset`              | Sets the component to it's initial state and resets the app state.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                               |                           | WeavyAppComponent |
| `subscribe`          | Subscribes or unsubscribes to notification updates from the app. Check \`.app.is\_subscribed\` to see current state.&#xA;&#xA;### Examples&#xA;&#xA;\<figure class="example">\<figcaption>Toggle app subscription\</figcaption>&#xA;&#xA;\`\`\`js&#xA;// Wait for app data&#xA;await myWeavyComponent.whenApp();&#xA;&#xA;// Get current app subscription state&#xA;const isSubscribed = myWeavyComponent.app.is\_subscribed;&#xA;&#xA;// Toggle the app subscription state&#xA;myWeavyComponent.subscribe(!isSubscribed);&#xA;\`\`\`&#xA;&#xA;\</figure> | `subscribe: boolean`                          | `Promise<void>`           | WeavyAppComponent |
| `whenApp`            | Resolves when app data is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                               | `Promise<AppType>`        | WeavyAppComponent |
| `whenApps`           | Resolves when multiple apps is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                                               | `Promise<AppType[]>`      | WeavyAppComponent |
| `whenUser`           | Resolves when current user data is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                                               | `Promise<UserType>`       | WeavyComponent    |
| `whenWeavy`          | Resolves when a weavy context is available.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |                                               | `Promise<WeavyType>`      | WeavyComponent    |
| `whenReady`          | Resolves when the component has rendered first time.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                               | `Promise<WeavyComponent>` | WeavyComponent    |

### Events

| Name              | Type                      | Description                                | Inherited From |
| ----------------- | ------------------------- | ------------------------------------------ | -------------- |
| `wy-link`         | `WyLinkEventType`         | Fired when a notification is clicked.      |                |
| `wy-notification` | `WyNotificationEventType` | Fired when a notification should be shown. |                |
| `ready`           | `CustomEvent`             | When the component has rendered.           | WeavyComponent |

### Attributes

| Name                    | Field                 | Inherited From     |
| ----------------------- | --------------------- | ------------------ |
| `typeFilter`            | typeFilter            |                    |
| `appearance`            | appearance            |                    |
| `requestUserPermission` | requestUserPermission |                    |
| `duration`              | duration              |                    |
| `link`                  | link                  | WeavyTypeComponent |
| `generateUid`           | generateUid           | WeavyAppComponent  |
| `uid`                   | uid                   | WeavyAppComponent  |
| `currentUid`            | currentUid            | WeavyAppComponent  |
| `name`                  | name                  | WeavyAppComponent  |
| `features`              | features              | WeavyTypeComponent |
| `agent`                 | agent                 | WeavyTypeComponent |
| `contextualData`        | contextualData        | WeavyTypeComponent |
| `annotations`           | annotations           | WeavyTypeComponent |
| `enterToSend`           | enterToSend           | WeavyTypeComponent |
| `reactions`             | reactions             | WeavyTypeComponent |

<details><summary>Private API</summary>

### Fields

| Name                         | Privacy   | Type                                                               | Default                                                                                                                   | Description                                                                                       | Inherited From     |
| ---------------------------- | --------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
| `#unsubscribeToRealtime`     | private   | `() => void \| undefined`                                          |                                                                                                                           |                                                                                                   |                    |
| `appType`                    | protected | `AppTypeGuid \| UnknownAppType`                                    | `UnknownApp`                                                                                                              | The appType is always "unknown" for optional apps, since the app will be fetched from the server. | WeavyAppComponent  |
| `#uid`                       | private   | `string \| number \| null \| undefined`                            |                                                                                                                           |                                                                                                   | WeavyAppComponent  |
| `#uids`                      | private   | `Array<string \| number>`                                          | `[]`                                                                                                                      |                                                                                                   | WeavyAppComponent  |
| `_initialAppName`            | private   | `string \| undefined`                                              |                                                                                                                           |                                                                                                   | WeavyAppComponent  |
| `_appName`                   | private   | `string \| undefined`                                              |                                                                                                                           |                                                                                                   | WeavyAppComponent  |
| `appSubscribeMutation`       | private   |                                                                    | `new MutationController< void, Error, MutateAppSubscribeProps, MutateAppSubscribeContextType >(this)`                     |                                                                                                   | WeavyAppComponent  |
| `#resolveApp`                | private   | `(app: AppType) => void \| undefined`                              |                                                                                                                           |                                                                                                   | WeavyAppComponent  |
| `#whenApp`                   | private   |                                                                    | `new Promise<AppType>((r) => { this.#resolveApp = r; })`                                                                  |                                                                                                   | WeavyAppComponent  |
| `#resolveApps`               | private   | `(apps: AppListType) => void \| undefined`                         |                                                                                                                           |                                                                                                   | WeavyAppComponent  |
| `#whenApps`                  | private   |                                                                    | `new Promise<AppListType>((r) => { this.#resolveApps = r; })`                                                             |                                                                                                   | WeavyAppComponent  |
| `#appQuery`                  | private   |                                                                    | `new QueryController<AppType>(this)`                                                                                      |                                                                                                   | WeavyAppComponent  |
| `#multipleAppsQueryMap`      | private   |                                                                    | `new Map<string \| number, QueryController<AppType>>()`                                                                   |                                                                                                   | WeavyAppComponent  |
| `#appsQuery`                 | private   |                                                                    |                                                                                                                           |                                                                                                   | WeavyAppComponent  |
| `visibilityElement`          | protected | `Element \| undefined`                                             |                                                                                                                           | Element to match visibility on.                                                                   | WeavyTypeComponent |
| `componentTypes`             | protected | `AppTypeGuid[]`                                                    |                                                                                                                           | Any app types handled by the component.                                                           | WeavyTypeComponent |
| `#data`                      | private   | `ContextDataType[] \| undefined`                                   |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#annotations`               | private   | `WeavyComponentSettingProps["annotations"] \| undefined`           |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#enterToSend`               | private   | `EnterToSend \| undefined`                                         |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#reactions`                 | private   | `WeavyComponentSettingProps["reactions"] \| undefined`             |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#resolveContextDataBlobs`   | private   | `(blobs: ContextDataBlobsType) => void \| undefined`               |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#whenContextDataBlobs`      | private   |                                                                    | `new Promise<ContextDataBlobsType>((r) => { this.#resolveContextDataBlobs = r; })`                                        |                                                                                                   | WeavyTypeComponent |
| `#resolveComponentFeatures`  | private   | `(componentFeatures: ComponentFeaturePolicy) => void \| undefined` |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#whenComponentFeatures`     | private   |                                                                    | `new Promise<ComponentFeaturePolicy>((r) => { this.#resolveComponentFeatures = r; })`                                     |                                                                                                   | WeavyTypeComponent |
| `#resolveLink`               | private   | `(link: LinkType) => void \| undefined`                            |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#whenLink`                  | private   |                                                                    | `new Promise<LinkType>((r) => { this.#resolveLink = r; })`                                                                |                                                                                                   | WeavyTypeComponent |
| `#resolveSettings`           | private   | `(settings: WeavyComponentSettingsType) => void \| undefined`      |                                                                                                                           |                                                                                                   | WeavyTypeComponent |
| `#whenSettings`              | private   |                                                                    | `new Promise<WeavyComponentSettingsType>((r) => { this.#resolveSettings = r; })`                                          |                                                                                                   | WeavyTypeComponent |
| `#contextDataRefs`           | private   | `Map<ContextDataType, DataRefType>`                                | `new Map()`                                                                                                               |                                                                                                   | WeavyTypeComponent |
| `#uploadContextDataMutation` | private   |                                                                    | `new MutationController<BlobType, Error, MutateFileProps, FileMutationContextType>(this)`                                 |                                                                                                   | WeavyTypeComponent |
| `#mutatingContextData`       | private   |                                                                    | `new MutationStateController< BlobType \| FileType \| EmbedType, Error, MutateFileProps, FileMutationContextType >(this)` |                                                                                                   | WeavyTypeComponent |
| `#resolveContextId`          | private   | `(contextId: ContextIdType) => void \| undefined`                  |                                                                                                                           |                                                                                                   | WeavyComponent     |
| `#whenContextId`             | private   |                                                                    | `new Promise<ContextIdType>((r) => { this.#resolveContextId = r; })`                                                      |                                                                                                   | WeavyComponent     |
| `#resolveUser`               | private   | `(user: UserType) => void \| undefined`                            |                                                                                                                           |                                                                                                   | WeavyComponent     |
| `#whenUser`                  | private   |                                                                    | `new Promise<UserType>((r) => { this.#resolveUser = r; })`                                                                |                                                                                                   | WeavyComponent     |
| `#resolveWeavy`              | private   | `(weavy: WeavyType) => void \| undefined`                          |                                                                                                                           |                                                                                                   | WeavyComponent     |
| `#whenWeavy`                 | private   |                                                                    | `new Promise<WeavyType>((r) => { this.#resolveWeavy = r; })`                                                              |                                                                                                   | WeavyComponent     |
| `#resolveReady`              | private   | `(component: WeavyComponent) => void \| undefined`                 |                                                                                                                           |                                                                                                   | WeavyComponent     |
| `#whenReady`                 | private   |                                                                    | `new Promise<WeavyComponent>((r) => { this.#resolveReady = r; })`                                                         |                                                                                                   | WeavyComponent     |
| `#userQuery`                 | private   |                                                                    | `new QueryController<UserType>(this)`                                                                                     |                                                                                                   | WeavyComponent     |

</details>

<hr/>

## Exports

| Kind                        | Name                     | Declaration          | Module                        | Package |
| --------------------------- | ------------------------ | -------------------- | ----------------------------- | ------- |
| `js`                        | `WyNotificationToasts`   | WyNotificationToasts | lib/wy-notification-toasts.ts |         |
| `custom-element-definition` | `wy-notification-toasts` | WyNotificationToasts | lib/wy-notification-toasts.ts |         |
