## class: `WyNotificationList`, `wy-notification-list`

Displays a list of notifications with tabs and paging.

**Used sub components:**

*   [`<wy-buttons>`](./ui/wy-buttons)
*   [`<wy-button>`](./ui/wy-button)
*   [`<wy-icon>`](./ui/wy-icon)
*   [`<wy-notification-list-item>`](./wy-notification-list-item)
*   [`<wy-empty>`](./wy-empty)
*   [`<wy-progress-circular>`](./ui/wy-progress-circular)
*   [`<wy-presence>`](./ui/wy-presence)
*   [`<wy-avatar>`](./ui/wy-avatar)

### Fields

| Name             | Type                                          | Default | Description                                                     | Inherited From        |
| ---------------- | --------------------------------------------- | ------- | --------------------------------------------------------------- | --------------------- |
| `notificationId` | `number \| undefined`                         |         | Identifier of the notification that should appear selected.     |                       |
| `typeFilter`     | `"" \| "activity" \| "mention" \| "reaction"` | `""`    | Active notification filter.                                     |                       |
| `app`            | `AppType \| undefined`                        |         | The app data.                                                   | WeavySubAppComponent  |
| `apps`           | `AppListType \| undefined`                    |         | Multiple apps data.                                             | WeavySubAppComponent  |
| `link`           | `LinkType \| undefined`                       |         | Any provided link that should be loaded, shown and highlighted. | WeavySubTypeComponent |

### Methods

| Name         | Description                                          | Parameters                                    | Return                       | Inherited From        |
| ------------ | ---------------------------------------------------- | --------------------------------------------- | ---------------------------- | --------------------- |
| `markAsRead` | Mark or unmark a notification as read.               | `notificationId: number, markAsRead: boolean` |                              |                       |
| `whenApp`    | Resolves when app data is available.                 |                                               | `Promise<AppType>`           | WeavySubAppComponent  |
| `whenApps`   | Resolves when multiple app data is available.        |                                               | `Promise<AppListType>`       | WeavySubAppComponent  |
| `whenLink`   | Resolves when a provided link is available.          |                                               | `Promise<LinkType>`          | WeavySubTypeComponent |
| `whenReady`  | Resolves when the component has rendered first time. |                                               | `Promise<WeavySubComponent>` | WeavySubComponent     |

### Events

| Name        | Type                | Description                              | Inherited From    |
| ----------- | ------------------- | ---------------------------------------- | ----------------- |
| `wy-action` | `WyActionEventType` | Emitted when a notification is selected. |                   |
| `ready`     | `CustomEvent`       | When the component has rendered.         | WeavySubComponent |

### Attributes

| Name             | Field          | Inherited From |
| ---------------- | -------------- | -------------- |
| `notificationId` | notificationId |                |
| `typeFilter`     | typeFilter     |                |

### CSS Parts

| Name              | Description                               |
| ----------------- | ----------------------------------------- |
| `wy-pane-toolbar` | Toolbar area containing tabs and actions. |
| `wy-pane-body`    | Body wrapper for the list.                |
| `wy-pane-group`   | Group wrapper inside the pane body.       |
| `wy-pager`        | Pager container.                          |
| `wy-pager-bottom` | Pager modifier for bottom placement.      |

### Slots

| Name      | Description                                       |
| --------- | ------------------------------------------------- |
| `buttons` | Extra buttons to render in the toolbar.           |
| `empty`   | Fallback content when there are no notifications. |

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

### Fields

| Name                        | Privacy | Type                                                               | Default                                                                               | Description | Inherited From        |
| --------------------------- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- | --------------------- |
| `#resolveApp`               | private | `(app: AppType) => void \| undefined`                              |                                                                                       |             | WeavySubAppComponent  |
| `#whenApp`                  | private |                                                                    | `new Promise<AppType>((r) => { this.#resolveApp = r; })`                              |             | WeavySubAppComponent  |
| `#resolveApps`              | private | `(apps: AppListType) => void \| undefined`                         |                                                                                       |             | WeavySubAppComponent  |
| `#whenApps`                 | private |                                                                    | `new Promise<AppListType>((r) => { this.#resolveApps = r; })`                         |             | WeavySubAppComponent  |
| `#resolveContextDataBlobs`  | private | `(blobs: ContextDataBlobsType) => void \| undefined`               |                                                                                       |             | WeavySubTypeComponent |
| `#whenContextDataBlobs`     | private |                                                                    | `new Promise<ContextDataBlobsType>((r) => { this.#resolveContextDataBlobs = r; })`    |             | WeavySubTypeComponent |
| `#resolveComponentFeatures` | private | `(componentFeatures: ComponentFeaturePolicy) => void \| undefined` |                                                                                       |             | WeavySubTypeComponent |
| `#whenComponentFeatures`    | private |                                                                    | `new Promise<ComponentFeaturePolicy>((r) => { this.#resolveComponentFeatures = r; })` |             | WeavySubTypeComponent |
| `#resolveLink`              | private | `(link: LinkType) => void \| undefined`                            |                                                                                       |             | WeavySubTypeComponent |
| `#whenLink`                 | private |                                                                    | `new Promise<LinkType>((r) => { this.#resolveLink = r; })`                            |             | WeavySubTypeComponent |
| `#resolveSettings`          | private | `(settings: WeavyComponentSettingsType) => void \| undefined`      |                                                                                       |             | WeavySubTypeComponent |
| `#whenSettings`             | private |                                                                    | `new Promise<WeavyComponentSettingsType>((r) => { this.#resolveSettings = r; })`      |             | WeavySubTypeComponent |
| `#resolveContextId`         | private | `(contextId: ContextIdType) => void \| undefined`                  |                                                                                       |             | WeavySubComponent     |
| `#whenContextId`            | private |                                                                    | `new Promise<ContextIdType>((r) => { this.#resolveContextId = r; })`                  |             | WeavySubComponent     |
| `#resolveUser`              | private | `(user: UserType) => void \| undefined`                            |                                                                                       |             | WeavySubComponent     |
| `#whenUser`                 | private |                                                                    | `new Promise<UserType>((r) => { this.#resolveUser = r; })`                            |             | WeavySubComponent     |
| `#resolveWeavy`             | private | `(weavy: WeavyType) => void \| undefined`                          |                                                                                       |             | WeavySubComponent     |
| `#whenWeavy`                | private |                                                                    | `new Promise<WeavyType>((r) => { this.#resolveWeavy = r; })`                          |             | WeavySubComponent     |
| `#resolveReady`             | private | `(component: WeavySubComponent) => void \| undefined`              |                                                                                       |             | WeavySubComponent     |
| `#whenReady`                | private |                                                                    | `new Promise<WeavySubComponent>((r) => { this.#resolveReady = r; })`                  |             | WeavySubComponent     |

</details>

<hr/>

## class: `WyNotificationHeader`, `wy-notification-header`

A header with filtering for notifications.

**Used sub components:**

*   [`<wy-buttons>`](./ui/wy-button)
*   [`<wy-button>`](./ui/wy-button)

### Fields

| Name         | Type                                          | Default | Description             | Inherited From |
| ------------ | --------------------------------------------- | ------- | ----------------------- | -------------- |
| `typeFilter` | `"" \| "activity" \| "mention" \| "reaction"` | `""`    | The selected filtering. |                |

### Methods

| Name             | Description               | Parameters                      | Return | Inherited From |
| ---------------- | ------------------------- | ------------------------------- | ------ | -------------- |
| `dispatchFilter` | Trigger \`filter\` event. | `typeFilter: NotificationTypes` |        |                |

### Events

| Name     | Type                          | Description                                 | Inherited From |
| -------- | ----------------------------- | ------------------------------------------- | -------------- |
| `filter` | `NotificationFilterEventType` | Any user selected filter. Can be prevented. |                |

### Attributes

| Name         | Field      | Inherited From |
| ------------ | ---------- | -------------- |
| `typeFilter` | typeFilter |                |

### CSS Parts

| Name              | Description                               |
| ----------------- | ----------------------------------------- |
| `wy-pane-toolbar` | Toolbar area containing tabs and actions. |

### Slots

| Name      | Description                                              |
| --------- | -------------------------------------------------------- |
|           | Content to override the filtering buttons.               |
| `actions` | Additional action buttons next to the filtering buttons. |

<hr/>

## Exports

| Kind                        | Name                     | Declaration          | Module                                 | Package |
| --------------------------- | ------------------------ | -------------------- | -------------------------------------- | ------- |
| `js`                        | `WyNotificationList`     | WyNotificationList   | lib/components/wy-notification-list.ts |         |
| `custom-element-definition` | `wy-notification-list`   | WyNotificationList   | lib/components/wy-notification-list.ts |         |
| `js`                        | `WyNotificationHeader`   | WyNotificationHeader | lib/components/wy-notification-list.ts |         |
| `custom-element-definition` | `wy-notification-header` | WyNotificationHeader | lib/components/wy-notification-list.ts |         |
