@vaadin/avatar-group 24.0.0-alpha1 → 24.0.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/item": "24.0.0-alpha1",
-    "@vaadin/list-box": "24.0.0-alpha1",
-    "@vaadin/overlay": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/avatar": "24.0.0-alpha3",
+    "@vaadin/component-base": "24.0.0-alpha3",
+    "@vaadin/item": "24.0.0-alpha3",
+    "@vaadin/list-box": "24.0.0-alpha3",
+    "@vaadin/overlay": "24.0.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha3",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha3",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "7a013a3c5a56abd61dd4f7773c6ec77c3541bdf2"
 }

package/src/vaadin-avatar-group.js

@@ -9,7 +9,8 @@ import '@vaadin/list-box/src/vaadin-list-box.js';
 import './vaadin-avatar-group-overlay.js';
 import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html as legacyHtml, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, render } from 'lit';
 import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -65,7 +66,7 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
  */
 class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
-    return html`
+    return legacyHtml`
       <style>
         :host {
           display: block;
@@ -268,7 +269,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
       '__itemsChanged(items.splices, items.*)',
       '__i18nItemsChanged(i18n.*, items.length)',
       '__updateAvatarsTheme(_overflow, _avatars, _theme)',
-      '__updateAvatars(items.*, __itemsInView, maxItemsVisible)',
+      '__updateAvatars(items.*, __itemsInView, maxItemsVisible, _overflow, i18n)',
       '__updateOverflowAbbr(_overflow, items.length, __itemsInView, maxItemsVisible)',
       '__updateOverflowHidden(_overflow, items.length, __itemsInView, __maxReached)',
       '__updateOverflowTooltip(_overflowTooltip, items.length, __itemsInView, maxItemsVisible)',
@@ -279,11 +280,8 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
   ready() {
     super.ready();
 
-    this._overflowController = new SlotController(
-      this,
-      'overflow',
-      () => document.createElement('vaadin-avatar'),
-      (_, overflow) => {
+    this._overflowController = new SlotController(this, 'overflow', 'vaadin-avatar', {
+      initializer: (overflow) => {
         overflow.setAttribute('aria-haspopup', 'listbox');
         overflow.setAttribute('aria-expanded', 'false');
         overflow.addEventListener('click', (e) => this._onOverflowClick(e));
@@ -296,7 +294,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
         this._overflow = overflow;
         this._overflowTooltip = tooltip;
       },
-    );
+    });
     this.addController(this._overflowController);
 
     this.$.overlay.renderer = this.__overlayRenderer.bind(this);
@@ -343,21 +341,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
     });
   }
 
-  /** @private */
-  __createAvatar(item) {
-    const avatar = document.createElement('vaadin-avatar');
-    avatar.name = item.name;
-    avatar.abbr = item.abbr;
-    avatar.img = item.img;
-    avatar.colorIndex = item.colorIndex;
-
-    avatar.withTooltip = true;
-    avatar.i18n = this.i18n;
-    avatar._item = item;
-
-    return avatar;
-  }
-
   /** @private */
   __createItemElement(item) {
     const itemElement = document.createElement('vaadin-item');
@@ -431,41 +414,40 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(ControllerMixin
   }
 
   /** @private */
-  __updateAvatars(arr, itemsInView, maxItemsVisible) {
-    const items = arr.base || [];
-    const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
-
-    const newItems = limit ? items.slice(0, limit) : items;
-    const oldItems = this.__oldAvatarItems || [];
+  __renderAvatars(items) {
+    render(
+      html`
+        ${items.map(
+          (item) =>
+            html`
+              <vaadin-avatar
+                .name="${item.name}"
+                .abbr="${item.abbr}"
+                .img="${item.img}"
+                .colorIndex="${item.colorIndex}"
+                .i18n="${this.i18n}"
+                with-tooltip
+              ></vaadin-avatar>
+            `,
+        )}
+      `,
+      this,
+      { renderBefore: this._overflow },
+    );
+  }
 
-    if (newItems.length || oldItems.length) {
-      const removed = oldItems.filter((item) => !newItems.includes(item));
-      const added = [...newItems];
+  /** @private */
+  __updateAvatars(arr, itemsInView, maxItemsVisible, overflow) {
+    if (!overflow) {
+      return;
+    }
 
-      this._avatars.forEach((avatar) => {
-        const item = avatar._item;
-        if (removed.includes(item)) {
-          avatar.remove();
-        } else if (added.includes(item)) {
-          added.splice(added.indexOf(item), 1);
-        }
-      });
+    const items = arr.base || [];
+    const limit = this.__getLimit(items.length, itemsInView, maxItemsVisible);
 
-      this.__addAvatars(added, newItems);
-    }
+    this.__renderAvatars(limit ? items.slice(0, limit) : items);
 
     this._avatars = [...this.querySelectorAll('vaadin-avatar')];
-    this.__oldAvatarItems = newItems;
-  }
-
-  /** @private */
-  __addAvatars(itemsToAdd, allItems) {
-    itemsToAdd.forEach((item) => {
-      const avatar = this.__createAvatar(item);
-      const nextItem = allItems[allItems.indexOf(item) + 1];
-      const nextAvatar = this._avatars.find((el) => el._item === nextItem);
-      this.insertBefore(avatar, nextAvatar || this._overflow);
-    });
   }
 
   /** @private */

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-avatar-group",
-          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-overlay).",
+          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-overlay).",
           "attributes": [
             {
               "name": "max-items-visible",
@@ -37,7 +37,7 @@
             "properties": [
               {
                 "name": "items",
-                "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
+                "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
                 "value": {
                   "type": [
                     "Array.<AvatarGroupItem>",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar-group",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha3",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,12 +16,12 @@
       "elements": [
         {
           "name": "vaadin-avatar-group",
-          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-overlay).",
+          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n\nSee the [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar) documentation for the available\nstate attributes and stylable shadow parts of avatar elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {
               "name": ".items",
-              "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
+              "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha3/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
               "value": {
                 "kind": "expression"
               }