## class: `WyNotificationBadge`, `wy-notification-badge`

Weavy notification badge component that renders a realtime badge for the number of unread notifications.
The badge fits well into a button or similar.
Weavy automatically creates notifications for reactions, mentions and other activities.

The badge can optionally be provided with an app `uid` or a `typeFilter` to only display the unread count of a given app or a given notification type, such as *mention*, *reaction* or *activity*.

When the `unread` count property changes, the component fires a `"wy-unread"` event with the updated count.
You can listen to the event to use the unread count for something else, and you can also turn off the component rendering by setting the `badge` property to `"none"`.

\*\* Component layout \*\*

The badge displays as an inline badge, matching normal text per default.
It has a filled background with rounded edge.
The size and font-size is relative to the current font-size where it's placed, defaulting to `0.75em` for the badge `font-size` and `0.3333em` of the badge *font-size* for the `padding`.
The badge is only displayed when there is an unread count of 1 or higher.

> When placing the badge in a `<button>` element, note that buttons initially have a `font-size` of `13.3333px` instead of inheriting font-size from it's parents.

Setting the `badge` property to `"compact"` reduces the padding and size to occupy less visual space.
It can also be set to `"dot"` to remove the text, only indicating that there is unread notifications without any count.

The `badgePosition` property can be changed from `"inline"` to `"top-right"` or any other corner,
to give it absolute positioning over the top-right corner.
The absolute positioning is relative to the closest parent element with set CSS `position`, for instance `relative` positioning.

**Used sub components:**

*   [`<wy-badge>`](./components/ui/wy-badge)

### Examples

<figure class="example"><figcaption>Inline notification badge in a text</figcaption>

Display a badge that shows unread count and tracks notifications for the authenticated user.

```html
<div>Notifications <wy-notification-badge></wy-notification-badge></div>
```

</figure>

<figure class="example"><figcaption>Filtered notification badge</figcaption>

Only displays the count for *reactions* that originated from the `"test-chat"` app component.

```html
<wy-notification-badge uid="test-chat" typeFilter="reaction"></wy-notification-badge>
```

</figure>

<figure class="example"><figcaption>Compact cornered notification badge</figcaption>

Displays a *compact* badge in the top-right corner of a button with adjusted font-size.
Note that the badge position is relative to its closest positioned ancestor element, therefore we need to set CSS `position` on the button.

```html
<button style="position: relative; font-size: 1rem;">
<span>Notifications</span>
<wy-notification-badge badge="compact" badgePosition="top-right"></wy-notification-badge>
</button>
```

</figure>

### Fields

| Name             | Type                                                                       | Default            | Description                                                                                                                                             | Inherited From     |
| ---------------- | -------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `badge`          | `"count" \| "compact" \| "dot" \| "none"`                                  | `"count"`          | Display size of the badge.                                                                                                                              |                    |
| `badgePosition`  | `"inline" \| "top-right" \| "bottom-right" \| "bottom-left" \| "top-left"` | `"inline"`         | Positioning of the badge.                                                                                                                               |                    |
| `typeFilter`     | `"" \| "activity" \| "mention" \| "reaction"`                              | `""`               | Notification type filter used when tracking unread notifications.                                                                                       |                    |
| `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-app`    | `WyAppEventType`    | Fired whenever the app property changes.              |                |
| `wy-unread` | `WyUnreadEventType` | Fired when the number of unread notifications change. |                |
| `ready`     | `CustomEvent`       | When the component has rendered.                      | WeavyComponent |

### Attributes

| Name             | Field          | Inherited From     |
| ---------------- | -------------- | ------------------ |
| `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 |

<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`                        | `WyNotificationBadge`   | WyNotificationBadge | lib/wy-notification-badge.ts |         |
| `custom-element-definition` | `wy-notification-badge` | WyNotificationBadge | lib/wy-notification-badge.ts |         |
