@vaadin/message-list 23.2.0 → 23.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "23.2.0",
+  "version": "23.2.1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "^23.2.0",
-    "@vaadin/component-base": "^23.2.0",
-    "@vaadin/vaadin-lumo-styles": "^23.2.0",
-    "@vaadin/vaadin-material-styles": "^23.2.0",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0"
+    "@vaadin/avatar": "~23.2.1",
+    "@vaadin/component-base": "~23.2.1",
+    "@vaadin/vaadin-lumo-styles": "~23.2.1",
+    "@vaadin/vaadin-material-styles": "~23.2.1",
+    "@vaadin/vaadin-themable-mixin": "~23.2.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
+  "gitHead": "a6c314f6927bfd3309fc735eae6c6dc72ab8367a"
 }

package/src/vaadin-message-list.js

@@ -118,6 +118,7 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     return Array.from(this.shadowRoot.querySelectorAll('vaadin-message'));
   }
 
+  /** @private */
   _itemsChanged(newVal, oldVal) {
     const focusedIndex = this._getIndexOfFocusableElement();
     if (newVal && newVal.length) {
@@ -132,6 +133,7 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     }
   }
 
+  /** @private */
   _scrollToLastMessage() {
     if (this.items.length > 0) {
       this.scrollTop = this.scrollHeight - this.clientHeight;
@@ -186,6 +188,7 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     target.focus();
   }
 
+  /** @private */
   _handleFocusEvent(e) {
     const target = e.composedPath().find((node) => node instanceof Message);
     this._setTabIndexesByMessage(target);
@@ -200,12 +203,14 @@ class MessageList extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._setTabIndexesByMessage(message);
   }
 
+  /** @private */
   _setTabIndexesByMessage(message) {
     this._messages.forEach((e) => {
       e.tabIndex = e === message ? 0 : -1;
     });
   }
 
+  /** @private */
   _getIndexOfFocusableElement() {
     const index = this._messages.findIndex((e) => e.tabIndex === 0);
     return index !== -1 ? index : 0;

package/src/vaadin-message.d.ts

@@ -56,6 +56,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * It will be placed in the name part to indicate who has sent the message.
    * It is also used as a tooltip for the avatar.
    * Example: `message.userName = "Jessica Jacobs";`
+   * @attr {string} user-name
    */
   userName: string | null | undefined;
 
@@ -64,6 +65,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * The abbreviation will be passed on to avatar of the message.
    * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
    * Example: `message.userAbbr = "JJ";`
+   * @attr {string} user-abbr
    */
   userAbbr: string | null | undefined;
 
@@ -71,6 +73,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * An URL for a user image.
    * The image will be used in the avatar component to show who has sent the message.
    * Example: `message.userImg = "/static/img/avatar.jpg";`
+   * @attr {string} user-img
    */
   userImg: string | null | undefined;
 
@@ -92,6 +95,7 @@ declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement)
    * ```js
    * message.userColorIndex = 1;
    * ```
+   * @attr {number} user-color-index
    */
   userColorIndex: number | null | undefined;
 }

package/src/vaadin-message.js

@@ -67,6 +67,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * It will be placed in the name part to indicate who has sent the message.
        * It is also used as a tooltip for the avatar.
        * Example: `message.userName = "Jessica Jacobs";`
+       * @attr {string} user-name
        */
       userName: {
         type: String,
@@ -77,6 +78,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * The abbreviation will be passed on to avatar of the message.
        * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
        * Example: `message.userAbbr = "JJ";`
+       * @attr {string} user-abbr
        */
       userAbbr: {
         type: String,
@@ -86,6 +88,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * An URL for a user image.
        * The image will be used in the avatar component to show who has sent the message.
        * Example: `message.userImg = "/static/img/avatar.jpg";`
+       * @attr {string} user-img
        */
       userImg: {
         type: String,
@@ -109,6 +112,7 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * ```js
        * message.userColorIndex = 1;
        * ```
+       * @attr {number} user-color-index
        */
       userColorIndex: {
         type: Number,

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.2.0",
+  "version": "23.2.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-message",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-avatar).",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-avatar).",
           "attributes": [
             {
               "name": "time",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.2.0",
+  "version": "23.2.1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-message",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0/#/elements/vaadin-avatar).",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.2.1/#/elements/vaadin-avatar).",
           "extension": true,
           "attributes": [
             {