@vaadin/avatar 24.7.0-alpha8 → 24.7.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,17 +38,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha8",
-    "@vaadin/component-base": "24.7.0-alpha8",
-    "@vaadin/tooltip": "24.7.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha8",
+    "@vaadin/a11y-base": "24.7.0-beta1",
+    "@vaadin/component-base": "24.7.0-beta1",
+    "@vaadin/tooltip": "24.7.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.7.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha8",
-    "@vaadin/test-runner-commands": "24.7.0-alpha8",
+    "@vaadin/chai-plugins": "24.7.0-beta1",
+    "@vaadin/test-runner-commands": "24.7.0-beta1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -56,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d015035192480fcc8cc9df5d00a950f177b83c32"
+  "gitHead": "4043c518ef9b915cde612d2907ddc9bd10e5af17"
 }

package/src/vaadin-avatar-mixin.d.ts

@@ -5,17 +5,18 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 
-export interface AvatarI18n {
+export type AvatarI18n = PartialI18n<{
   anonymous: string;
-}
+}>;
 
 /**
  * A mixin providing common avatar functionality.
  */
 export declare function AvatarMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<AvatarMixinClass> & Constructor<FocusMixinClass> & T;
+): Constructor<AvatarMixinClass> & Constructor<I18nMixinClass<AvatarI18n>> & Constructor<FocusMixinClass> & T;
 
 export declare class AvatarMixinClass {
   /**
@@ -42,12 +43,11 @@ export declare class AvatarMixinClass {
   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 used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   *
    * ```
    * {
    *   // Translation of the anonymous user avatar tooltip.

package/src/vaadin-avatar-mixin.js

@@ -4,6 +4,11 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
+
+const DEFAULT_I18N = {
+  anonymous: 'anonymous',
+};
 
 /**
  * A mixin providing common avatar functionality.
@@ -12,7 +17,7 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
  * @mixes FocusMixin
  */
 export const AvatarMixin = (superClass) =>
-  class AvatarMixinClass extends FocusMixin(superClass) {
+  class AvatarMixinClass extends I18nMixin(DEFAULT_I18N, FocusMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -51,32 +56,6 @@ export const AvatarMixin = (superClass) =>
           observer: '__colorIndexChanged',
         },
 
-        /**
-         * 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 tooltip.
-         *   anonymous: 'anonymous'
-         * }
-         * ```
-         *
-         * @type {!AvatarI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value: () => {
-            return {
-              anonymous: 'anonymous',
-            };
-          },
-        },
-
         /**
          * When true, the avatar has tooltip shown on hover and focus.
          * The tooltip text is based on the `name` and `abbr` properties.
@@ -106,11 +85,33 @@ export const AvatarMixin = (superClass) =>
     static get observers() {
       return [
         '__imgOrAbbrOrNameChanged(img, abbr, name)',
-        '__i18nChanged(i18n)',
+        '__i18nChanged(__effectiveI18n)',
         '__tooltipChanged(__tooltipNode, name, abbr)',
       ];
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following JSON structure and default values:
+     * ```
+     * {
+     *   // Translation of the anonymous user avatar tooltip.
+     *   anonymous: 'anonymous'
+     * }
+     * ```
+     * @return {!AvatarI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -212,13 +213,13 @@ export const AvatarMixin = (superClass) =>
     }
 
     /** @private */
-    __i18nChanged(i18n) {
-      if (i18n && i18n.anonymous) {
+    __i18nChanged(effectiveI18n) {
+      if (effectiveI18n && effectiveI18n.anonymous) {
         if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
           this.__setTooltip();
         }
 
-        this.__oldAnonymous = i18n.anonymous;
+        this.__oldAnonymous = effectiveI18n.anonymous;
       }
     }
 
@@ -233,7 +234,7 @@ export const AvatarMixin = (superClass) =>
     __setTooltip(tooltip) {
       const tooltipNode = this.__tooltipNode;
       if (tooltipNode) {
-        tooltipNode.text = tooltip || this.i18n.anonymous;
+        tooltipNode.text = tooltip || this.__effectiveI18n.anonymous;
       }
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -79,6 +79,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
+                "value": {
+                  "type": [
+                    "AvatarI18n"
+                  ]
+                }
+              },
               {
                 "name": "img",
                 "description": "The path to the image",
@@ -123,15 +132,6 @@
                   ]
                 }
               },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
-                "value": {
-                  "type": [
-                    "AvatarI18n"
-                  ]
-                }
-              },
               {
                 "name": "withTooltip",
                 "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -26,6 +26,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".img",
               "description": "The path to the image",
@@ -53,13 +60,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         }