@vaadin/vaadin-avatar - npm Package Compare versions

Comparing version 1.0.0-alpha5 to 1.0.0-alpha6

./@types/interfaces.d.ts

@@ -7,1 +7,12 @@ export interface AvatarGroupItem {
 }
+
+export interface AvatarI18n {
+  anonymous: string;
+}
+
+export interface AvatarGroupI18n extends AvatarI18n {
+  activeUsers: {
+    one: string;
+    many: string;
+  };
+}

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-avatar",
-  "version": "1.0.0-alpha5",
+  "version": "1.0.0-alpha6",
   "main": "vaadin-avatar-group.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-avatar-group.d.ts

@@ -53,2 +53,20 @@ /**
   max: number|null|undefined;
+
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * _i18n_ object or just the property you want to modify.
+   *
+   * The object has the following JSON structure and default values:
+   *           {
+   *             // Translation of the anonymous user avatar title.
+   *             anonymous: 'anonymous',
+   *             // Translation of the avatar group accessible label.
+   *             activeUsers: {
+   *               one: 'Currently one active user',
+   *               many: 'Currently {count} active users'
+   *             }
+   *           }
+   */
+  i18n: AvatarGroupI18n;
   ready(): void;
@@ -68,1 +86,3 @@ attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void;
 import {AvatarGroupItem} from '../@types/interfaces';
+
+import {AvatarGroupI18n} from '../@types/interfaces';

src/vaadin-avatar-group.js

@@ -71,5 +71,5 @@ /**
       <template is="dom-repeat" items="[[__computeItems(items.*, max)]]">
-        <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" part="avatar" theme\$="[[theme]]" color-index="[[item.colorIndex]]"></vaadin-avatar>
+        <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" part="avatar" theme\$="[[theme]]" i18n="[[i18n]]" color-index="[[item.colorIndex]]"></vaadin-avatar>
       </template>
-      <vaadin-avatar id="overflow" part="avatar" hidden\$="[[!__maxReached]]" abbr="[[__computeMore(items.length, max)]]" theme\$="[[theme]]" on-click="_onOverflowClick" on-keydown="_onOverflowKeyDown" role="button" aria-haspopup="listbox"></vaadin-avatar>
+      <vaadin-avatar id="overflow" part="avatar" hidden\$="[[!__maxReached]]" abbr="[[__computeMore(items.length, max)]]" theme\$="[[theme]]" on-click="_onOverflowClick" on-keydown="_onOverflowKeyDown" aria-haspopup="listbox"></vaadin-avatar>
     </div>
@@ -81,3 +81,3 @@ <vaadin-avatar-group-overlay id="overlay" opened="{{_opened}}" on-vaadin-overlay-close="_onVaadinOverlayClose">
             <vaadin-item theme="avatar-group-item" role="option">
-              <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" part="avatar" theme\$="[[theme]]" color-index="[[item.colorIndex]]" tabindex="-1" aria-hidden="true"></vaadin-avatar>
+              <vaadin-avatar name="[[item.name]]" abbr="[[item.abbr]]" img="[[item.img]]" i18n="[[i18n]]" part="avatar" theme\$="[[theme]]" color-index="[[item.colorIndex]]" tabindex="-1" aria-hidden="true"></vaadin-avatar>
               [[item.name]]
@@ -97,3 +97,3 @@ </vaadin-item>
   static get version() {
-    return '1.0.0-alpha5';
+    return '1.0.0-alpha6';
   }
@@ -120,2 +120,33 @@
 
+      /**
+       * The object used to localize this component.
+       * To change the default localization, replace the entire
+       * _i18n_ object or just the property you want to modify.
+       *
+       * The object has the following JSON structure and default values:
+          {
+            // Translation of the anonymous user avatar title.
+            anonymous: 'anonymous',
+            // Translation of the avatar group accessible label.
+            activeUsers: {
+              one: 'Currently one active user',
+              many: 'Currently {count} active users'
+            }
+          }
+      * @type {!AvatarGroupI18n}
+      * @default {English/US}
+      */
+      i18n: {
+        type: Object,
+        value: () => {
+          return {
+            anonymous: 'anonymous',
+            activeUsers: {
+              one: 'Currently one active user',
+              many: 'Currently {count} active users'
+            }
+          };
+        }
+      },
+
       /** @private */
@@ -137,3 +168,6 @@ __maxReached: {
   static get observers() {
-    return ['__computeMoreTitle(items.length, max)'];
+    return [
+      '__computeMoreTitle(items.length, max)',
+      '__i18nItemsChanged(i18n.*, items.length)'
+    ];
   }
@@ -241,2 +275,13 @@
   /** @private */
+  __i18nItemsChanged(i18n, items) {
+    const {base} = i18n;
+    if (base && base.activeUsers) {
+      const field = items === 1 ? 'one' : 'many';
+      if (base.activeUsers[field]) {
+        this.setAttribute('aria-label', base.activeUsers[field].replace('{count}', items));
+      }
+    }
+  }
+
+  /** @private */
   __openedChanged(opened, wasOpened) {
@@ -243,0 +288,0 @@ if (opened) {

src/vaadin-avatar.d.ts

@@ -55,2 +55,15 @@ /**
   colorIndex: number|null|undefined;
+
+  /**
+   * The object used to localize this component.
+   * To change the default localization, replace the entire
+   * _i18n_ object or just the property you want to modify.
+   *
+   * The object has the following JSON structure and default values:
+   *           {
+   *             // Translation of the anonymous user avatar title.
+   *             anonymous: 'anonymous'
+   *           }
+   */
+  i18n: AvatarI18n;
   ready(): void;
@@ -67,1 +80,3 @@ }
 export {AvatarElement};
+
+import {AvatarI18n} from '../@types/interfaces';

src/vaadin-avatar.js

@@ -105,7 +105,7 @@ /**
     </style>
-    <img hidden\$="[[!__imgVisible]]" src\$="[[img]]">
-    <svg part="icon" hidden\$="[[!__iconVisible]]" id="avatar-icon" viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet">
+    <img hidden\$="[[!__imgVisible]]" src\$="[[img]]" aria-hidden="true">
+    <svg part="icon" hidden\$="[[!__iconVisible]]" id="avatar-icon" viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
       <text dy=".35em" text-anchor="middle"></text>
     </svg>
-    <svg part="abbr" hidden\$="[[!__abbrVisible]]" id="avatar-abbr" viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet">
+    <svg part="abbr" hidden\$="[[!__abbrVisible]]" id="avatar-abbr" viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
       <text dy=".35em" text-anchor="middle">[[abbr]]</text>
@@ -121,3 +121,3 @@ </svg>
   static get version() {
-    return '1.0.0-alpha5';
+    return '1.0.0-alpha6';
   }
@@ -161,2 +161,24 @@
 
+      /**
+       * The object used to localize this component.
+       * To change the default localization, replace the entire
+       * _i18n_ object or just the property you want to modify.
+       *
+       * The object has the following JSON structure and default values:
+          {
+            // Translation of the anonymous user avatar title.
+            anonymous: 'anonymous'
+          }
+      * @type {!AvatarI18n}
+      * @default {English/US}
+      */
+      i18n: {
+        type: Object,
+        value: () => {
+          return {
+            anonymous: 'anonymous'
+          };
+        }
+      },
+
       /** @private */
@@ -176,2 +198,3 @@ __imgVisible: Boolean,
       '__imgOrAbbrOrNameChanged(img, abbr, name)',
+      '__i18nChanged(i18n.*)'
     ];
@@ -191,5 +214,3 @@ }
 
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'img');
-    }
+    this.setAttribute('role', 'button');
 
@@ -244,6 +265,4 @@ if (!this.hasAttribute('tabindex')) {
 
-    if (img || (abbr && abbr !== this.__generatedAbbr)) {
-      if (abbr) {
-        this.__setTitle(abbr);
-      }
+    if (abbr && abbr !== this.__generatedAbbr) {
+      this.__setTitle(name ? `${name} (${abbr})` : abbr);
       return;
@@ -262,2 +281,13 @@ }
   /** @private */
+  __i18nChanged(i18n) {
+    if (i18n.base && i18n.base.anonymous) {
+      if (this.__oldAnonymous && this.getAttribute('title') === this.__oldAnonymous) {
+        this.__setTitle();
+      }
+
+      this.__oldAnonymous = i18n.base.anonymous;
+    }
+  }
+
+  /** @private */
   __updateVisibility() {
@@ -274,3 +304,3 @@ this.__imgVisible = !!this.img;
     } else {
-      this.setAttribute('title', 'anonymous');
+      this.setAttribute('title', this.i18n.anonymous);
     }
@@ -277,0 +307,0 @@ }

theme/lumo/vaadin-avatar-styles.js

@@ -71,6 +71,2 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       }
-
-      :host([theme~="square"]) {
-        border-radius: var(--lumo-border-radius);
-      }
     </style>
@@ -77,0 +73,0 @@ </template>

No alert changes

Improved metrics

Total package byte prevSize

55500

increased by6.8%

Lines of code

1056

increased by11.28%

No dependency changes