## class: `WyNotificationButton`, `wy-notification-button`

Weavy notification button component to render a button complete with a realtime badge for the number of unread notifications. When clicking the button, it opens a built in overlay displaying the full list of notifications.

Weavy automatically creates notifications for reactions, mentions and other activities.

The notifications can be clicked or marked as read or unread. 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, back to where the originating Weavy component is placed.

The notification button component can optionally be tailored to only show notifications for a specific app or notifications of a specific type, such as *mentions* or *reactions*.
When setting a predefined notification type, it removes the possibility for the user to filter the list by type in the UI.

> Complement this with the [`<wy-notification-toasts>`](./wy-notification-toasts) component to also get realtime *in-app notifications* or *browser notifications*.

**Component Layout**

The button is displayed as a clickable icon that acts as a button.
The default size of the button is the icon size `1.5rem`/`24px` together with the set `--wy-padding` (which defaults to `0.5rem`/`8px`) on every side of the icon, which makes a total of `2.5rem`/`40px` per default.

The openable notification list renders in an overlay in the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer).
That means that the notification list 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-button>`](./ui/wy-button)
*   [`<wy-container>`](./ui/wy-container)
*   [`<wy-icon>`](./ui/wy-icon)
*   [`<wy-overlay>`](./ui/wy-overlay)
*   [`<wy-notification-header>`](./wy-notification-list)
*   [`<wy-notification-list>`](./wy-notification-list)
*   [`<wy-badge>`](./ui/wy-badge)
*   [`<wy-dropdown>`](./ui/wy-dropdown)
*   [`<wy-dropdown-item>`](./ui/wy-dropdown)
*   [`<wy-empty>`](./wy-empty)

### Examples

<figure class="example"><figcaption>Notification button with notification list overlay</figcaption>

Display notification button with a badge that tracks notifications for the authenticated user and can open an overlay with a notification list on click.

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

</figure>

<figure class="example"><figcaption>Filter notifications by app</figcaption>

Display notifications for the authenticated user that originated from app with the specified `uid`. Also, show a dot instead of a count when there are unread notifications.

```html
<wy-notification-button uid="test-chat" badge="dot"></wy-notification-button>
```

</figure>

<figure class="example"><figcaption>Styling the badge</figcaption>

Changes the styles of the badge in the notification button.  Set the background color of the `wy-badge` CSS shadow part.

```css
wy-notification-button::part(wy-badge) {
background-color: violet;
}
```

</figure>

### Fields

| Name             | Type                                                                       | Default            | Description                                                                                                                                             | Inherited From     |
| ---------------- | -------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `overlay`        | `"modal" \| "sheet" \| "drawer" \| "full" \| "none"`                       | `"sheet"`          | Overlay appearance used for the notification list.                                                                                                      |                    |
| `list`           |                                                                            |                    |                                                                                                                                                         |                    |
| `badge`          | `"count" \| "compact" \| "dot" \| "none"`                                  | `"compact"`        | Notification badge appearance variant.                                                                                                                  |                    |
| `badgePosition`  | `"inline" \| "top-right" \| "bottom-right" \| "bottom-left" \| "top-left"` | `"top-right"`      | Set the position of the badge. \`"inline"\` means no positioning.                                                                                       |                    |
| `typeFilter`     | `"" \| "activity" \| "mention" \| "reaction"`                              | `""`               | Notification type filter. No filter (\`""\`) will allow the user to filter.                                                                             |                    |
| `unread`         | `number`                                                                   |                    | Current unread notification count.                                                                                                                      |                    |
| `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    |
| --------------- |   | -------------------- | ------------------------- | ----------------- |
| `markAllAsRead` | Marks all tracked notifications as read.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |                      |                           |                   |
| `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-action` | `WyActionEventType` | Emitted when a notification is selected.              |                |
| `wy-app`    | `WyAppEventType`    | Fired whenever the app property changes.              |                |
| `wy-link`   | `WyLinkEventType`   | Fired when a notification is clicked.                 |                |
| `wy-unread` | `WyUnreadEventType` | Fired when the number of unread notifications change. |                |
| `ready`     | `CustomEvent`       | When the component has rendered.                      | WeavyComponent |

### Attributes

| Name             | Field          | Inherited From     |
| ---------------- | -------------- | ------------------ |
| `overlay`        | overlay        |                    |
| `list`           | list           |                    |
| `badge`          | badge          |                    |
| `badgePosition`  | badgePosition  |                    |
| `typeFilter`     | typeFilter     |                    |
| `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 |

### Slots

| Name      | Description                                              |
| --------- | -------------------------------------------------------- |
| `actions` | Slot for action buttons in the notification list header. |
| `title`   | Slot for title in the notification list header.          |

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

### Fields

| Name                         | Privacy   | Type                                                               | Default                                                                                                                   | Description                                                                                       | Inherited From     |
| ---------------------------- | --------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------ |
| `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`                        | `WyNotificationButton`   | WyNotificationButton | lib/wy-notification-button.ts |         |
| `custom-element-definition` | `wy-notification-button` | WyNotificationButton | lib/wy-notification-button.ts |         |
