@vaadin/avatar-group 23.1.0-alpha3 → 23.1.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "23.1.0-alpha3",
+  "version": "23.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,19 +35,19 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "23.1.0-alpha3",
-    "@vaadin/component-base": "23.1.0-alpha3",
-    "@vaadin/item": "23.1.0-alpha3",
-    "@vaadin/list-box": "23.1.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
+    "@vaadin/avatar": "23.1.0-beta2",
+    "@vaadin/component-base": "23.1.0-beta2",
+    "@vaadin/item": "23.1.0-beta2",
+    "@vaadin/list-box": "23.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "23.1.0-beta2",
+    "@vaadin/vaadin-overlay": "23.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
+  "gitHead": "f11f9245a0b5e6bf912725a501c27c24b74e7c8d"
 }

package/src/vaadin-avatar-group-overlay.js

@@ -18,7 +18,7 @@ registerStyles(
       justify-content: flex-end;
     }
   `,
-  { moduleId: 'vaadin-avatar-group-overlay-styles' }
+  { moduleId: 'vaadin-avatar-group-overlay-styles' },
 );
 
 /**

package/src/vaadin-avatar-group.js

@@ -190,7 +190,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
        * @type {!Array<!AvatarGroupItem> | undefined}
        */
       items: {
-        type: Array
+        type: Array,
       },
 
       /**
@@ -199,7 +199,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
        * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
        */
       maxItemsVisible: {
-        type: Number
+        type: Number,
       },
 
       /**
@@ -238,32 +238,32 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
             anonymous: 'anonymous',
             activeUsers: {
               one: 'Currently one active user',
-              many: 'Currently {count} active users'
+              many: 'Currently {count} active users',
             },
             joined: '{user} joined',
-            left: '{user} left'
+            left: '{user} left',
           };
-        }
+        },
       },
 
       /** @private */
       __maxReached: {
         type: Boolean,
-        computed: '__computeMaxReached(items.length, maxItemsVisible)'
+        computed: '__computeMaxReached(items.length, maxItemsVisible)',
       },
 
       /** @private */
       __itemsInView: {
         type: Number,
-        value: null
+        value: null,
       },
 
       /** @private */
       _opened: {
         type: Boolean,
         observer: '__openedChanged',
-        value: false
-      }
+        value: false,
+      },
     };
   }
 
@@ -271,7 +271,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     return [
       '__computeMoreTitle(items.length, __itemsInView, maxItemsVisible)',
       '__itemsChanged(items.splices, items.*)',
-      '__i18nItemsChanged(i18n.*, items.length)'
+      '__i18nItemsChanged(i18n.*, items.length)',
     ];
   }
 
@@ -352,7 +352,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
 
   /** @private */
   _onVaadinOverlayClose(e) {
-    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().indexOf(this) !== -1) {
+    if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().includes(this)) {
       e.preventDefault();
     }
   }
@@ -399,14 +399,14 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
         result.push(item.name || item.abbr || 'anonymous');
       }
     }
-    // override generated title attribute
+    // Override generated title attribute
     this.$.overflow.setAttribute('title', result.join('\n'));
   }
 
   /** @private */
   __getLimit(items, itemsInView, maxItemsVisible) {
     let limit = null;
-    // handle max set to 0 or 1
+    // Handle max set to 0 or 1
     const adjustedMax = this.__getMax(maxItemsVisible);
     if (maxItemsVisible != null && adjustedMax < items) {
       limit = adjustedMax - 1;
@@ -428,13 +428,13 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     this.$.items.render();
     this.__setItemsInView();
 
-    // mutation using group.splice('items')
+    // Mutation using group.splice('items')
     if (splices && Array.isArray(splices.indexSplices)) {
       splices.indexSplices.forEach((mutation) => {
         this.__announceItemsChange(items, mutation);
       });
     } else if (Array.isArray(items) && Array.isArray(this.__oldItems)) {
-      // mutation using group.set('items')
+      // Mutation using group.set('items')
       const diff = calculateSplices(items, this.__oldItems);
       diff.forEach((mutation) => {
         this.__announceItemsChange(items, mutation);
@@ -507,26 +507,26 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     const avatars = this._avatars;
     const items = this.items;
 
-    // always show at least two avatars
+    // Always show at least two avatars
     if (!items || !avatars || avatars.length < 3) {
       return;
     }
 
     let result = this.__calculateAvatarsFitWidth();
 
-    // only show overlay if two or more avatars don't fit
+    // Only show overlay if two or more avatars don't fit
     if (result === items.length - 1) {
       result = items.length;
     }
 
-    // close overlay if all avatars become visible
+    // Close overlay if all avatars become visible
     if (result >= items.length && this._opened) {
       this.$.overlay.close();
       // FIXME: hack to avoid jump before closing
       this.$.overlay._flushAnimation('closing');
     }
 
-    // reserve space for overflow avatar
+    // Reserve space for overflow avatar
     this.__itemsInView = result;
   }
 
@@ -538,14 +538,14 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
 
     const avatars = this._avatars;
 
-    // assume all the avatars have the same width
+    // Assume all the avatars have the same width
     const avatarWidth = avatars[0].clientWidth;
 
-    // take negative margin into account
+    // Take negative margin into account
     const { marginLeft, marginRight } = getComputedStyle(avatars[1]);
 
     const offset =
-      this.getAttribute('dir') == 'rtl'
+      this.getAttribute('dir') === 'rtl'
         ? parseInt(marginRight, 0) - parseInt(marginLeft, 0)
         : parseInt(marginLeft, 0) - parseInt(marginRight, 0);
 
@@ -564,19 +564,19 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     const isRtl = this.getAttribute('dir') === 'rtl';
 
     if (isRtl) {
-      this._overlayElement.style.right = document.documentElement.clientWidth - btnRect.right + 'px';
+      this._overlayElement.style.right = `${document.documentElement.clientWidth - btnRect.right}px`;
     } else {
-      this._overlayElement.style.left = btnRect.left + 'px';
+      this._overlayElement.style.left = `${btnRect.left}px`;
     }
 
     if (bottomAlign) {
       this._overlayElement.setAttribute('bottom-aligned', '');
       this._overlayElement.style.removeProperty('top');
-      this._overlayElement.style.bottom = viewportHeight - btnRect.top + 'px';
+      this._overlayElement.style.bottom = `${viewportHeight - btnRect.top}px`;
     } else {
       this._overlayElement.removeAttribute('bottom-aligned');
       this._overlayElement.style.removeProperty('bottom');
-      this._overlayElement.style.top = btnRect.bottom + 'px';
+      this._overlayElement.style.top = `${btnRect.bottom}px`;
     }
   }
 }

package/theme/lumo/vaadin-avatar-group-styles.js

@@ -44,7 +44,7 @@ registerStyles(
       --vaadin-avatar-size: var(--lumo-size-xs);
     }
   `,
-  { moduleId: 'lumo-avatar-group' }
+  { moduleId: 'lumo-avatar-group' },
 );
 
 const avatarGroupOverlay = css`
@@ -59,7 +59,7 @@ const avatarGroupOverlay = css`
 `;
 
 registerStyles('vaadin-avatar-group-overlay', [overlay, menuOverlayCore, avatarGroupOverlay], {
-  moduleId: 'lumo-avatar-group-overlay'
+  moduleId: 'lumo-avatar-group-overlay',
 });
 
 registerStyles(
@@ -75,7 +75,7 @@ registerStyles(
       padding-left: var(--lumo-space-m);
     }
   `,
-  { moduleId: 'lumo-avatar-group-list-box' }
+  { moduleId: 'lumo-avatar-group-list-box' },
 );
 
 registerStyles(
@@ -99,5 +99,5 @@ registerStyles(
       margin-left: var(--lumo-space-s);
     }
   `,
-  { moduleId: 'lumo-avatar-group-item' }
+  { moduleId: 'lumo-avatar-group-item' },
 );

package/theme/material/vaadin-avatar-group-styles.js

@@ -9,7 +9,7 @@ const avatarGroupOverlay = css`
 `;
 
 registerStyles('vaadin-avatar-group-overlay', [menuOverlay, avatarGroupOverlay], {
-  moduleId: 'material-avatar-group-overlay'
+  moduleId: 'material-avatar-group-overlay',
 });
 
 registerStyles(
@@ -25,7 +25,7 @@ registerStyles(
       padding-left: 24px;
     }
   `,
-  { moduleId: 'material-avatar-group-list-box' }
+  { moduleId: 'material-avatar-group-list-box' },
 );
 
 registerStyles(
@@ -48,5 +48,5 @@ registerStyles(
       margin-left: 8px;
     }
   `,
-  { moduleId: 'material-avatar-group-item' }
+  { moduleId: 'material-avatar-group-item' },
 );