{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "vaadin-message.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "module": "src/vaadin-message.js" } } ] }, { "kind": "javascript-module", "path": "vaadin-message-list.js", "declarations": [], "exports": [ { "kind": "js", "name": "*", "declaration": { "name": "*", "module": "src/vaadin-message-list.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-message-list-mixin.js", "declarations": [ { "kind": "mixin", "description": "", "name": "MessageListMixin", "members": [ { "kind": "field", "name": "announceMessages", "privacy": "public", "type": { "text": "boolean" }, "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.", "attribute": "announce-messages" }, { "kind": "field", "name": "items", "privacy": "public", "type": { "text": "array" }, "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.", "attribute": "items" }, { "kind": "field", "name": "markdown", "privacy": "public", "type": { "text": "boolean" }, "description": "When set to `true`, the message text is parsed as Markdown.", "attribute": "markdown" } ], "events": [ { "name": "attachment-click", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "announce-messages", "type": { "text": "boolean" }, "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.", "fieldName": "announceMessages" }, { "name": "items", "type": { "text": "array" }, "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.", "fieldName": "items" }, { "name": "markdown", "type": { "text": "boolean" }, "description": "When set to `true`, the message text is parsed as Markdown.", "fieldName": "markdown" } ], "mixins": [ { "name": "KeyboardDirectionMixin", "package": "@vaadin/a11y-base/src/keyboard-direction-mixin.js" } ], "parameters": [ { "name": "superClass" } ] } ], "exports": [ { "kind": "js", "name": "MessageListMixin", "declaration": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-message-list.js", "declarations": [ { "kind": "class", "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`](#/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 [``](#/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.", "name": "MessageList", "members": [ { "kind": "field", "name": "announceMessages", "privacy": "public", "type": { "text": "boolean" }, "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.", "attribute": "announce-messages", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } }, { "kind": "field", "name": "items", "privacy": "public", "type": { "text": "array" }, "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.", "attribute": "items", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } }, { "kind": "field", "name": "markdown", "privacy": "public", "type": { "text": "boolean" }, "description": "When set to `true`, the message text is parsed as Markdown.", "attribute": "markdown", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } } ], "events": [ { "name": "attachment-click", "type": { "text": "CustomEvent" }, "description": "Fired when an attachment is clicked.", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } } ], "mixins": [ { "name": "SlotStylesMixin", "package": "@vaadin/component-base/src/slot-styles-mixin.js" }, { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" }, { "name": "ElementMixin", "package": "@vaadin/component-base/src/element-mixin.js" }, { "name": "ThemableMixin", "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js" }, { "name": "PolylitMixin", "package": "@vaadin/component-base/src/polylit-mixin.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "vaadin-message-list", "customElement": true, "attributes": [ { "name": "announce-messages", "type": { "text": "boolean" }, "description": "When set to `true`, new messages are announced to assistive technologies using ARIA live regions.", "fieldName": "announceMessages", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } }, { "name": "items", "type": { "text": "array" }, "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.", "fieldName": "items", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } }, { "name": "markdown", "type": { "text": "boolean" }, "description": "When set to `true`, the message text is parsed as Markdown.", "fieldName": "markdown", "inheritedFrom": { "name": "MessageListMixin", "module": "src/vaadin-message-list-mixin.js" } } ] } ], "exports": [ { "kind": "js", "name": "MessageList", "declaration": { "name": "MessageList", "module": "src/vaadin-message-list.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-message-mixin.js", "declarations": [ { "kind": "mixin", "description": "", "name": "MessageMixin", "members": [ { "kind": "field", "name": "attachments", "privacy": "public", "type": { "text": "Array<{name?: string, url?: string, type?: string}>" }, "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.", "attribute": "attachments" }, { "kind": "field", "name": "time", "privacy": "public", "type": { "text": "string" }, "description": "Time of sending the message. It is rendered as-is to the part='time' slot,\nso the formatting is up to you.", "attribute": "time" }, { "kind": "field", "name": "userAbbr", "privacy": "public", "type": { "text": "string" }, "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\";`", "attribute": "user-abbr" }, { "kind": "field", "name": "userColorIndex", "privacy": "public", "type": { "text": "number" }, "description": "A color index to be used to render the color of the avatar.", "attribute": "user-color-index" }, { "kind": "field", "name": "userImg", "privacy": "public", "type": { "text": "string" }, "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\";`", "attribute": "user-img" }, { "kind": "field", "name": "userName", "privacy": "public", "type": { "text": "string" }, "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\";`", "attribute": "user-name" } ], "events": [ { "name": "attachment-click", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "time", "type": { "text": "string" }, "description": "Time of sending the message. It is rendered as-is to the part='time' slot,\nso the formatting is up to you.", "fieldName": "time" }, { "name": "user-abbr", "type": { "text": "string" }, "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\";`", "fieldName": "userAbbr" }, { "name": "user-color-index", "type": { "text": "number" }, "description": "A color index to be used to render the color of the avatar.", "fieldName": "userColorIndex" }, { "name": "user-img", "type": { "text": "string" }, "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\";`", "fieldName": "userImg" }, { "name": "user-name", "type": { "text": "string" }, "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\";`", "fieldName": "userName" } ], "mixins": [ { "name": "FocusMixin", "package": "@vaadin/a11y-base/src/focus-mixin.js" } ], "parameters": [ { "name": "superClass" } ] } ], "exports": [ { "kind": "js", "name": "MessageMixin", "declaration": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } } ] }, { "kind": "javascript-module", "path": "src/vaadin-message.js", "declarations": [ { "kind": "class", "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.", "name": "Message", "members": [ { "kind": "field", "name": "attachments", "privacy": "public", "type": { "text": "Array<{name?: string, url?: string, type?: string}>" }, "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.", "attribute": "attachments", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "kind": "field", "name": "time", "privacy": "public", "type": { "text": "string" }, "description": "Time of sending the message. It is rendered as-is to the part='time' slot,\nso the formatting is up to you.", "attribute": "time", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "kind": "field", "name": "userAbbr", "privacy": "public", "type": { "text": "string" }, "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\";`", "attribute": "user-abbr", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "kind": "field", "name": "userColorIndex", "privacy": "public", "type": { "text": "number" }, "description": "A color index to be used to render the color of the avatar.", "attribute": "user-color-index", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "kind": "field", "name": "userImg", "privacy": "public", "type": { "text": "string" }, "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\";`", "attribute": "user-img", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "kind": "field", "name": "userName", "privacy": "public", "type": { "text": "string" }, "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\";`", "attribute": "user-name", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } } ], "events": [ { "name": "attachment-click", "type": { "text": "CustomEvent" }, "description": "Fired when an attachment is clicked.", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } } ], "mixins": [ { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" }, { "name": "ElementMixin", "package": "@vaadin/component-base/src/element-mixin.js" }, { "name": "ThemableMixin", "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js" }, { "name": "PolylitMixin", "package": "@vaadin/component-base/src/polylit-mixin.js" }, { "name": "LumoInjectionMixin", "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "vaadin-message", "customElement": true, "attributes": [ { "name": "time", "type": { "text": "string" }, "description": "Time of sending the message. It is rendered as-is to the part='time' slot,\nso the formatting is up to you.", "fieldName": "time", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "name": "user-abbr", "type": { "text": "string" }, "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\";`", "fieldName": "userAbbr", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "name": "user-color-index", "type": { "text": "number" }, "description": "A color index to be used to render the color of the avatar.", "fieldName": "userColorIndex", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "name": "user-img", "type": { "text": "string" }, "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\";`", "fieldName": "userImg", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } }, { "name": "user-name", "type": { "text": "string" }, "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\";`", "fieldName": "userName", "inheritedFrom": { "name": "MessageMixin", "module": "src/vaadin-message-mixin.js" } } ] } ], "exports": [ { "kind": "js", "name": "Message", "declaration": { "name": "Message", "module": "src/vaadin-message.js" } } ] } ] }