{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/message-list",
"version": "25.1.4",
"description-markup": "markdown",
"framework": "lit",
"framework-config": {
"enable-when": {
"node-packages": [
"lit"
]
}
},
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-message",
"description": "`` is a Web Component for showing a single message with an author, message and time.\n\n```html\n\n There is no real ending. It's just the place where you stop the story.\n\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,
"attributes": [
{
"name": ".attachments",
"description": "An array of attachment objects to display with the message.\nEach attachment object can have the following properties:\n- `name`: The name of the attachment file\n- `url`: The URL of the attachment\n- `type`: The MIME type of the attachment (e.g., 'image/png', 'application/pdf')\n\nImage attachments (type starting with \"image/\") show a thumbnail preview,\nwhile other attachments show a document icon with the file name.",
"value": {
"kind": "expression"
}
},
{
"name": ".time",
"description": "Time of sending the message. It is rendered as-is to the part='time' slot,\nso the formatting is up to you.",
"value": {
"kind": "expression"
}
},
{
"name": ".userAbbr",
"description": "The abbreviation of the user.\nThe abbreviation will be passed on to avatar of the message.\nIf the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.\nExample: `message.userAbbr = \"JJ\";`",
"value": {
"kind": "expression"
}
},
{
"name": ".userColorIndex",
"description": "A color index to be used to render the color of the avatar.",
"value": {
"kind": "expression"
}
},
{
"name": ".userImg",
"description": "An URL for a user image.\nThe image will be used in the avatar component to show who has sent the message.\nExample: `message.userImg = \"/static/img/avatar.jpg\";`",
"value": {
"kind": "expression"
}
},
{
"name": ".userName",
"description": "The name of the user posting the message.\nIt will be placed in the name part to indicate who has sent the message.\nIt is also used as a tooltip for the avatar.\nExample: `message.userName = \"Jessica Jacobs\";`",
"value": {
"kind": "expression"
}
},
{
"name": "@attachment-click",
"description": "Fired when an attachment is clicked.",
"value": {
"kind": "expression"
}
}
]
},
{
"name": "vaadin-message-list",
"description": "`` is a Web Component for showing an ordered list of messages. The messages are rendered as \n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.1.4/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [``](https://cdn.vaadin.com/vaadin-web-components/25.1.4/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,
"attributes": [
{
"name": "?announceMessages",
"description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.",
"value": {
"kind": "expression"
}
},
{
"name": "?markdown",
"description": "When set to `true`, the message text is parsed as Markdown.",
"value": {
"kind": "expression"
}
},
{
"name": ".items",
"description": "An array of objects which will be rendered as messages.\nThe message objects can have the following properties:\n```js\nArray<{\n text: string,\n time: string,\n userName: string,\n userAbbr: string,\n userImg: string,\n userColorIndex: number,\n className: string,\n theme: string,\n attachments: Array<{\n name: string,\n url: string,\n type: string\n }>\n}>\n```\n\nWhen a message has attachments, they are rendered in the message's shadow DOM.\nImage attachments (type starting with \"image/\") show a thumbnail preview,\nwhile other attachments show a document icon with the file name.\nClicking an attachment dispatches an `attachment-click` event.",
"value": {
"kind": "expression"
}
},
{
"name": "@attachment-click",
"description": "Fired when an attachment is clicked.",
"value": {
"kind": "expression"
}
}
]
}
]
}
}
}