## class: `WyReactions`, `wy-reactions`

Reaction controls for entities (messages/posts/comments).

**Used sub components:**

*   [`<wy-button>`](./ui/wy-button)
*   [`<wy-icon>`](./ui/wy-icon)
*   [`<wy-avatar>`](./ui/wy-avatar)
*   [`<wy-item>`](./ui/wy-item)
*   [`<wy-overlay>`](./ui/wy-overlay)
*   [`<wy-container>`](./ui/wy-container)
*   [`<wy-reaction-item>`](./wy-reactions)

### Fields

| Name          | Type                                  | Default      | Description                                                     | Inherited From        |
| ------------- | ------------------------------------- | ------------ | --------------------------------------------------------------- | --------------------- |
| `directionX`  | `"left" \| "right"`                   | `"left"`     | Horizontal alignment for the reaction picker.                   |                       |
| `directionY`  | `"up" \| "down"`                      | `"up"`       | Vertical alignment for the reaction picker.                     |                       |
| `small`       | `boolean`                             | `false`      | Renders a compact version of the controls.                      |                       |
| `reactions`   | `ReactableType[] \| undefined`        | `[]`         | Current reactions applied to the host entity.                   |                       |
| `emojis`      | `string`                              | `""`         | Space separated list of emojis available in the picker.         |                       |
| `parentType`  | `"posts" \| "files" \| "apps"`        | `"apps"`     | Parent collection that owns the entity.                         |                       |
| `parentId`    | `number \| undefined`                 |              | Identifier of the parent container.                             |                       |
| `entityType`  | `"messages" \| "posts" \| "comments"` | `"messages"` | Entity type targeted by the reactions.                          |                       |
| `entityId`    | `number`                              |              | Identifier of the reactable entity.                             |                       |
| `line`        | `boolean`                             | `false`      | Displays the picker inline with a line layout.                  |                       |
| `lineReverse` | `boolean`                             | `false`      | Reverses the inline layout order.                               |                       |
| `lineBottom`  | `boolean`                             | `false`      | Positions the inline layout at the bottom edge.                 |                       |
| `lineBelow`   | `boolean`                             | `false`      | Positions the inline layout below the trigger.                  |                       |
| `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        |
| ----------- | ---------------------------------------------------- | ---------- | ---------------------------- | --------------------- |
| `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    |
| ------- | ---------------- | ----------------------------------------- | ----------------- |
| `close` | `CloseEventType` | Emitted when the reaction menu is closed. |                   |
| `ready` | `CustomEvent`    | When the component has rendered.          | WeavySubComponent |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `directionX`  | directionX  |                |
| `directionY`  | directionY  |                |
| `small`       | small       |                |
| `parentType`  | parentType  |                |
| `parentId`    | parentId    |                |
| `entityType`  | entityType  |                |
| `entityId`    | entityId    |                |
| `line`        | line        |                |
| `lineReverse` | lineReverse |                |
| `lineBottom`  | lineBottom  |                |
| `lineBelow`   | lineBelow   |                |

### CSS Parts

| Name                      | Description                      |
| ------------------------- | -------------------------------- |
| `wy-reactions`            | Wrapper for reactions display.   |
| `wy-reaction-menu`        | Reaction menu container.         |
| `wy-reaction-picker`      | Reaction picker area.            |
| `wy-reaction-menu-button` | Button that opens reaction menu. |
| `wy-emoji-icon`           | Emoji icon wrapper.              |
| `wy-reaction-count`       | Count badge for reactions.       |

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

### Fields

| Name                        | Privacy   | Type                                                               | Default                                                                               | Description | Inherited From        |
| --------------------------- | --------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- | --------------------- |
| `exportParts`               | protected |                                                                    | `new ShadowPartsController(this)`                                                     |             |                       |
| `#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: `WyReactionItem`, `wy-reaction-item`

Individual reaction item used inside the reactions sheet.

**Used sub components:**

*   [`<wy-item>`](./ui/wy-item)
*   [`<wy-avatar>`](./ui/wy-avatar)

### Fields

| Name       | Type            | Default | Description | Inherited From |
| ---------- | --------------- | ------- | ----------- | -------------- |
| `reaction` | `ReactableType` |         |             |                |

### CSS Parts

| Name            | Description                        |
| --------------- | ---------------------------------- |
| `wy-emoji-icon` | Emoji shown for the reaction item. |

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

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## Exports

| Kind                        | Name               | Declaration    | Module                         | Package |
| --------------------------- | ------------------ | -------------- | ------------------------------ | ------- |
| `js`                        | `WyReactions`      | WyReactions    | lib/components/wy-reactions.ts |         |
| `custom-element-definition` | `wy-reactions`     | WyReactions    | lib/components/wy-reactions.ts |         |
| `js`                        | `WyReactionItem`   | WyReactionItem | lib/components/wy-reactions.ts |         |
| `custom-element-definition` | `wy-reaction-item` | WyReactionItem | lib/components/wy-reactions.ts |         |
