## class: `WyComment`, `wy-comment`

Displays or edits a comment.

**Used sub components**

*   [`<wy-avatar>`](./ui/wy-avatar)
*   [`<wy-button>`](./ui/wy-button)
*   [`<wy-dropdown>`](./ui/wy-dropdown)
*   [`<wy-icon>`](./ui/wy-icon)
*   [`<wy-item>`](./ui/wy-item)
*   [`<wy-image-grid>`](./ui/wy-image-grid)
*   [`<wy-skeleton>`](./ui/wy-skeleton)
*   [`<wy-annotation-list>`](./wy-annotation)
*   [`<wy-attachment-list>`](./wy-attachment)
*   [`<wy-embed>`](./wy-embed)
*   [`<wy-meeting-card>`](./wy-meeting-card)
*   [`<wy-poll>`](./wy-poll)
*   [`<wy-preview>`](./wy-preview)
*   [`<wy-reactions>`](./wy-reactions)

### Fields

| Name       | Type                           | Default  | Description                                                                                                                               | Inherited From        |
| ---------- | ------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `comment`  | `CommentType`                  |          | The comment data.                                                                                                                         |                       |
| `parentId` | `number`                       |          | The parent entity id the comment belongs to.&#xA;&#xA;Set this to ensure actions (edit/trash/restore) operate against the correct parent. |                       |
| `location` | `"posts" \| "files" \| "apps"` | `"apps"` | The place where the comment is located.                                                                                                   |                       |
| `reveal`   | `boolean`                      | `false`  | Whether to use a reveal transition when showing the comment.                                                                              |                       |
| `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    |
| ------------------ | ------------------------- | ---------------------------------------------- | ----------------- |
| `vote`             | `PollVoteEventType`       | Emitted when a poll option is voted            |                   |
| `trash`            | `CommentTrashEventType`   | Emitted when the comment is trashed            |                   |
| `restore`          | `CommentRestoreEventType` | Emitted when the comment is restored           |                   |
| `wy-preview-open`  | `WyPreviewOpenEventType`  | Fired when a preview overlay is about to open. |                   |
| `wy-preview-close` | `WyPreviewCloseEventType` | Fired when a preview overlay is closed.        |                   |
| `ready`            | `CustomEvent`             | When the component has rendered.               | WeavySubComponent |

### Attributes

| Name       | Field    | Inherited From |
| ---------- | -------- | -------------- |
| `parentId` | parentId |                |
| `reveal`   | reveal   |                |

### CSS Parts

| Name                  | Description                                                             |
| --------------------- | ----------------------------------------------------------------------- |
| `wy-highlight`        | When the comment component should be briefly highlighted                |
| `wy-comment`          | Root comment container                                                  |
| `wy-comment-reveal`   | When a comment has reveal transition                                    |
| `wy-comment-skeleton` | When the comment should render as a skeleton during optimistic updates. |
| `wy-comment-header`   | Header area (avatar, title, actions)                                    |
| `wy-comment-body`     | Body wrapper for comment content.                                       |
| `wy-comment-title`    | The title section of the comment body.                                  |
| `wy-comment-images`   | Images section.                                                         |
| `wy-comment-footer`   | Section for reactions, attachments and annotations.                     |
| `wy-trashed`          | When comment is trashed.                                                |
| `wy-content`          | HTML content area                                                       |
| `wy-meta`             | Meta section.                                                           |

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

### Fields

| Name                        | Privacy | Type                                                               | Default                                                                               | Description | Inherited From        |
| --------------------------- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- | --------------------- |
| `previewAttachmentsRef`     | private | `Ref<WyPreview>`                                                   |                                                                                       |             |                       |
| `highlightRef`              | private | `Ref<HTMLElement>`                                                 |                                                                                       |             |                       |
| `dispatchUserAction`        | private |                                                                    |                                                                                       |             |                       |
| `#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/>

## Exports

| Kind                        | Name         | Declaration | Module                       | Package |
| --------------------------- | ------------ | ----------- | ---------------------------- | ------- |
| `js`                        | `WyComment`  | WyComment   | lib/components/wy-comment.ts |         |
| `custom-element-definition` | `wy-comment` | WyComment   | lib/components/wy-comment.ts |         |
