@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/dist/types/ToastPlacement.js

@@ -1,91 +1,69 @@
-import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
-
-/**
- * @lends sap.ui.webcomponents.main.types.ToastPlacement.prototype
- * @public
- */
-const ToastPlacements = {
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>TopStart</code> position of its container.
-	 * @public
-	 * @type {TopStart}
-	 */
-	TopStart: "TopStart",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>TopCenter</code> position of its container.
-	 * @public
-	 * @type {TopCenter}
-	 */
-	TopCenter: "TopCenter",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>TopEnd</code> position of its container.
-	 * @public
-	 * @type {TopEnd}
-	 */
-	TopEnd: "TopEnd",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>MiddleStart</code> position of its container.
-	 * @public
-	 * @type {MiddleStart}
-	 */
-	MiddleStart: "MiddleStart",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>MiddleCenter</code> position of its container.
-	 * @public
-	 * @type {MiddleCenter}
-	 */
-	MiddleCenter: "MiddleCenter",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>MiddleEnd</code> position of its container.
-	 * @public
-	 * @type {MiddleEnd}
-	 */
-	MiddleEnd: "MiddleEnd",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>BottomStart</code> position of its container.
-	 * @public
-	 * @type {BottomStart}
-	 */
-	BottomStart: "BottomStart",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>BottomCenter</code> position of its container.
-	 * Default placement (no selection)
-	 * @public
-	 * @type {BottomCenter}
-	 */
-	BottomCenter: "BottomCenter",
-
-	/**
-	 * <code>ui5-toast</code> is placed at the <code>BottomEnd</code> position of its container.
-	 * @public
-	 * @type {BottomEnd}
-	 */
-	BottomEnd: "BottomEnd",
-};
-
 /**
+ * Toast placement.
+ *
  * @class
- * Defines where the <code>ui5-toast</code> will be placed.
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.types.ToastPlacement
- * @public
  * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.ToastPlacement
  */
-class ToastPlacement extends DataType {
-	static isValid(value) {
-		return !!ToastPlacements[value];
-	}
-}
-
-ToastPlacement.generateTypeAccessors(ToastPlacements);
-
+var ToastPlacement;
+(function (ToastPlacement) {
+    /**
+     * Toast is placed at the <code>TopStart</code> position of its container.
+     * @public
+     * @type {TopStart}
+     */
+    ToastPlacement["TopStart"] = "TopStart";
+    /**
+     * Toast is placed at the <code>TopCenter</code> position of its container.
+     * @public
+     * @type {TopCenter}
+     */
+    ToastPlacement["TopCenter"] = "TopCenter";
+    /**
+     * Toast is placed at the <code>TopEnd</code> position of its container.
+     * @public
+     * @type {TopEnd}
+     */
+    ToastPlacement["TopEnd"] = "TopEnd";
+    /**
+     * Toast is placed at the <code>MiddleStart</code> position of its container.
+     * @public
+     * @type {MiddleStart}
+     */
+    ToastPlacement["MiddleStart"] = "MiddleStart";
+    /**
+     * Toast is placed at the <code>MiddleCenter</code> position of its container.
+     * @public
+     * @type {MiddleCenter}
+     */
+    ToastPlacement["MiddleCenter"] = "MiddleCenter";
+    /**
+     * Toast is placed at the <code>MiddleEnd</code> position of its container.
+     * @public
+     * @type {MiddleEnd}
+     */
+    ToastPlacement["MiddleEnd"] = "MiddleEnd";
+    /**
+     * Toast is placed at the <code>BottomStart</code> position of its container.
+     * @public
+     * @type {BottomStart}
+     */
+    ToastPlacement["BottomStart"] = "BottomStart";
+    /**
+     * Toast is placed at the <code>BottomCenter</code> position of its container.
+     * Default placement (no selection)
+     * @public
+     * @type {BottomCenter}
+     */
+    ToastPlacement["BottomCenter"] = "BottomCenter";
+    /**
+     * Toast is placed at the <code>BottomEnd</code> position of its container.
+     * @public
+     * @type {BottomEnd}
+     */
+    ToastPlacement["BottomEnd"] = "BottomEnd";
+})(ToastPlacement || (ToastPlacement = {}));
 export default ToastPlacement;
+//# sourceMappingURL=ToastPlacement.js.map

package/dist/types/ToastPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastPlacement.js","sourceRoot":"","sources":["../../src/types/ToastPlacement.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,IAAK,cAiEJ;AAjED,WAAK,cAAc;IAElB;;;;OAIG;IACH,uCAAqB,CAAA;IAErB;;;;OAIG;IACH,yCAAuB,CAAA;IAEvB;;;;OAIG;IACH,mCAAiB,CAAA;IAEjB;;;;OAIG;IACH,6CAA2B,CAAA;IAE3B;;;;OAIG;IACH,+CAA6B,CAAA;IAE7B;;;;OAIG;IACH,yCAAuB,CAAA;IAEvB;;;;OAIG;IACH,6CAA2B,CAAA;IAE3B;;;;;OAKG;IACH,+CAA6B,CAAA;IAE7B;;;;OAIG;IACH,yCAAuB,CAAA;AACxB,CAAC,EAjEI,cAAc,KAAd,cAAc,QAiElB;AAED,eAAe,cAAc,CAAC"}

package/dist/types/WrappingType.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Different types of wrapping.
+ *
+ * @class
+ * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.WrappingType
+ */
+declare enum WrappingType {
+    /**
+     * The text will be truncated with an ellipsis.
+     * @public
+     * @type {None}
+     */
+    None = "None",
+    /**
+     * The text will wrap. The words will not be broken based on hyphenation.
+     * @public
+     * @type {Normal}
+     */
+    Normal = "Normal"
+}
+export default WrappingType;

package/dist/types/WrappingType.js

@@ -1,41 +1,26 @@
-import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
-
 /**
  * Different types of wrapping.
- * @lends sap.ui.webcomponents.main.types.WrappingType.prototype
- * @public
- */
-const WrappingTypes = {
-	/**
-	 * The text will be truncated with an ellipsis.
-	 * @public
-	 * @type {None}
-	 */
-	None: "None",
-
-	/**
-	 * The text will wrap. The words will not be broken based on hyphenation.
-	 * @public
-	 * @type {Normal}
-	 */
-	Normal: "Normal",
-};
-
-/**
+ *
  * @class
- * Defines how the text of a component will be displayed when there is not enough space.
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.types.WrappingType
- * @public
  * @enum {string}
+ * @public
+ * @author SAP SE
+ * @alias sap.ui.webc.main.types.WrappingType
  */
-class WrappingType extends DataType {
-	static isValid(value) {
-		return !!WrappingTypes[value];
-	}
-}
-
-WrappingType.generateTypeAccessors(WrappingTypes);
-
+var WrappingType;
+(function (WrappingType) {
+    /**
+     * The text will be truncated with an ellipsis.
+     * @public
+     * @type {None}
+     */
+    WrappingType["None"] = "None";
+    /**
+     * The text will wrap. The words will not be broken based on hyphenation.
+     * @public
+     * @type {Normal}
+     */
+    WrappingType["Normal"] = "Normal";
+})(WrappingType || (WrappingType = {}));
 export default WrappingType;
+//# sourceMappingURL=WrappingType.js.map

package/dist/types/WrappingType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrappingType.js","sourceRoot":"","sources":["../../src/types/WrappingType.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,IAAK,YAcJ;AAdD,WAAK,YAAY;IAChB;;;;OAIG;IACH,6BAAa,CAAA;IAEb;;;;OAIG;IACH,iCAAiB,CAAA;AAClB,CAAC,EAdI,YAAY,KAAZ,YAAY,QAchB;AAED,eAAe,YAAY,CAAC"}

package/global.d.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line
+import "@ui5/webcomponents-base/global";
+import { TemplateFunction } from "@ui5/webcomponents-base/src/renderer/executeTemplate.js";
+
+export {};
+
+declare global {
+	module "*.lit.js" {
+		const content: TemplateFunction;
+		export default content;
+	}
+}

package/package-scripts.js

@@ -3,6 +3,7 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 const options = {
 	port: 8080,
 	portStep: 2,
+	typescript: true,
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-ec448881d",
+  "version": "0.0.0-ee3bbe46b",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -8,6 +8,7 @@
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -18,9 +19,10 @@
     "lint": "wc-dev lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "serve": "wc-dev serve",
     "build": "wc-dev build",
     "test": "wc-dev test",
+    "test:suite-1": "wc-dev test-suite-1",
+    "test:suite-2": "wc-dev test-suite-2",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "npm run build"
   },
@@ -40,13 +42,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-ec448881d",
-    "@ui5/webcomponents-icons": "0.0.0-ec448881d",
-    "@ui5/webcomponents-localization": "0.0.0-ec448881d",
-    "@ui5/webcomponents-theming": "0.0.0-ec448881d"
+    "@ui5/webcomponents-base": "0.0.0-ee3bbe46b",
+    "@ui5/webcomponents-icons": "0.0.0-ee3bbe46b",
+    "@ui5/webcomponents-localization": "0.0.0-ee3bbe46b",
+    "@ui5/webcomponents-theming": "0.0.0-ee3bbe46b"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-ec448881d",
-    "chromedriver": "101.0.0"
+    "@ui5/webcomponents-tools": "0.0.0-ee3bbe46b",
+    "chromedriver": "107.0.3"
   }
 }

package/src/Avatar.hbs

@@ -17,4 +17,6 @@
 	{{else if initials}}
 		<span class="ui5-avatar-initials">{{validInitials}}</span>
 	{{/if}}
+
+	<slot name="badge"></slot>
 </div>

package/src/Avatar.js

@@ -16,6 +16,8 @@ import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
 import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
 /**
  * @public
  */
@@ -23,10 +25,10 @@ const metadata = {
 	tag: "ui5-avatar",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Avatar.prototype */ {
 
 		/**
-		 * Defines if the avatar is interactive (focusable and pressable)
+		 * Defines if the avatar is interactive (focusable and pressable).
 		 * @type {boolean}
 		 * @defaultValue false
 		 * @public
@@ -44,9 +46,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the UI5 Icon, that would be displayed.
+		 * Defines the name of the UI5 Icon, that will be displayed.
 		 * <br>
-		 * <b>Note:</b> If <code>image</code> slot is provided, the property would be ignored.
+		 * <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored.
 		 * <br>
 		 * <b>Note:</b> You should import the desired icon first, then use its name as "icon".
 		 * <br><br>
@@ -54,7 +56,7 @@ const metadata = {
 		 * <br>
 		 * <pre>&lt;ui5-avatar icon="employee"></pre>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -66,7 +68,7 @@ const metadata = {
 		/**
 		 * Defines the displayed initials.
 		 * <br>
-		 * Up to two Latin letters can be displayed as initials.
+		 * Up to three Latin letters can be displayed as initials.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -84,7 +86,7 @@ const metadata = {
 		 * <li><code>Circle</code></li>
 		 * <li><code>Square</code></li>
 		 * </ul>
-		 * @type {AvatarShape}
+		 * @type {sap.ui.webc.main.types.AvatarShape}
 		 * @defaultvalue "Circle"
 		 * @public
 		 */
@@ -104,7 +106,7 @@ const metadata = {
 		 * <li><code>L</code></li>
 		 * <li><code>XL</code></li>
 		 * </ul>
-		 * @type {AvatarSize}
+		 * @type {sap.ui.webc.main.types.AvatarSize}
 		 * @defaultvalue "S"
 		 * @public
 		 */
@@ -138,7 +140,7 @@ const metadata = {
 		 * <li><code>Accent10</code></li>
 		 * <li><code>Placeholder</code></li>
 		 * </ul>
-		 * @type {AvatarColorScheme}
+		 * @type {sap.ui.webc.main.types.AvatarColorScheme}
 		 * @defaultvalue "Accent6"
 		 * @public
 		 */
@@ -188,7 +190,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Avatar.prototype */ {
 		/**
 		 * Receives the desired <code>&lt;img&gt;</code> tag
 		 *
@@ -208,8 +210,36 @@ const metadata = {
 			propertyName: "image",
 			type: HTMLElement,
 		},
+		/**
+		 * Defines the optional badge that will be used for visual affordance.
+		 * <b>Note:</b> While the slot allows for custom badges, to achieve
+		 * the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code>
+		 * in the corresponding <code>icon</code> slot, without text nodes.
+		 * <br><br>
+		 * Example:
+		 * <br><br>
+		 * &lt;ui5-avatar><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot="badge"><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot="icon" name="employee">&lt;/ui5-icon><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br>
+		 * &lt;/ui5-avatar>
+		 * <br><br>
+		 * <ui5-avatar initials="AB" color-scheme="Accent1">
+		 * <ui5-badge slot="badge">
+		 * <ui5-icon slot="icon" name="accelerated"></ui5-icon>
+		 * </ui5-badge>
+		 * </ui5-avatar>
+		 *
+		 * @type {HTMLElement}
+		 * @slot badge
+		 * @public
+		 * @since 1.7.0
+		 */
+		badge: {
+			type: HTMLElement,
+		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+	events: /** @lends sap.ui.webc.main.Avatar.prototype */ {
 		/**
 		* Fired on mouseup, space and enter if avatar is interactive
 		*
@@ -226,7 +256,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * An image-like control that has different display options for representing images and icons
+ * An image-like component that has different display options for representing images and icons
  * in different shapes and sizes, depending on the use case.
  *
  * The shape can be circular or square. There are several predefined sizes, as well as an option to
@@ -247,11 +277,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Avatar
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Avatar
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-avatar
  * @since 1.0.0-rc.6
- * @implements sap.ui.webcomponents.main.IAvatar
+ * @implements sap.ui.webc.main.IAvatar
  * @public
  */
 class Avatar extends UI5Element {
@@ -286,7 +316,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective avatar size.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "S"
 	 * @private
 	 */
@@ -298,7 +328,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective background color.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "Accent6"
 	 * @private
 	 */
@@ -316,9 +346,11 @@ class Avatar extends UI5Element {
 	}
 
 	get validInitials() {
-		const validInitials = /^[a-zA-Z]{1,2}$/;
+		// initials should consist of only 1,2 or 3 latin letters
+		const validInitials = /^[a-zA-Z]{1,3}$/,
+			  areInitialsValid = this.initials && validInitials.test(this.initials);
 
-		if (this.initials && validInitials.test(this.initials)) {
+		if (areInitialsValid) {
 			return this.initials;
 		}
 
@@ -342,6 +374,36 @@ class Avatar extends UI5Element {
 		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
 	}
 
+	onAfterRendering() {
+		this._checkInitials();
+	}
+
+	onEnterDOM() {
+		this._checkInitials();
+	}
+
+	_setFallbackIcon() {
+		// if there isn`t icon set in the avatar the default one is shown, when the initials are not valid or are missing
+		this.icon = this.icon || "employee";
+		return this.icon;
+	}
+
+	_checkInitials() {
+		const avatar = this.getDomRef(),
+			avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+		// if there aren`t initalts set - the fallBack icon should be shown
+		if (!this.validInitials) {
+			this._setFallbackIcon();
+		}
+		// if initials` width is bigger than the avatar, an icon should be shown inside the avatar
+		if (this.initials && this.initials.length === 3) {
+			if (avatarInitials && avatarInitials.scrollWidth >= avatar.scrollWidth) {
+				this._setFallbackIcon();
+			}
+		}
+		return this.icon;
+	}
+
 	_onClickHandler(event) {
 		// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
 		event.stopPropagation();

package/src/AvatarGroup.js

@@ -8,6 +8,7 @@ import {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 
 import {
 	AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,
@@ -60,7 +61,7 @@ const offsets = {
 const metadata = {
 	tag: "ui5-avatar-group",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */  {
+	properties: /** @lends sap.ui.webc.main.AvatarGroup.prototype */  {
 
 		/**
 	 	 * Defines the mode of the <code>AvatarGroup</code>.
@@ -70,12 +71,12 @@ const metadata = {
 		 * <li><code>Group</code></li>
 		 * <li><code>Individual</code></li>
 		 * </ul>
-		 * @type {AvatarGroupType}
+		 * @type {sap.ui.webc.main.types.AvatarGroupType}
 		 * @defaultValue "Group"
 		 * @public
 		 */
 		type: {
-			type: String,
+			type: AvatarGroupType,
 			defaultValue: AvatarGroupType.Group,
 		},
 
@@ -103,14 +104,14 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
+	slots: /** @lends sap.ui.webc.main.AvatarGroup.prototype */ {
 		/**
 		 * Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.
 		 * <br><br>
 		 * <b>Note:</b> The UX guidelines recommends using avatars with "Circle" shape.
 		 * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
 		 * as the built-in overflow action has "Circle" shape.
-		 * @type {sap.ui.webcomponents.main.IAvatar[]}
+		 * @type {sap.ui.webc.main.IAvatar[]}
 		 * @slot items
 		 * @public
 		 */
@@ -133,7 +134,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
+	events: /** @lends sap.ui.webc.main.AvatarGroup.prototype */ {
 		/**
 		* Fired when the component is activated either with a
 		* click/tap or by using the Enter or Space key.
@@ -227,8 +228,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.AvatarGroup
- * @extends UI5Element
+ * @alias sap.ui.webc.main.AvatarGroup
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-avatar-group
  * @since 1.0.0-rc.11
  * @public
@@ -277,7 +278,7 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
 	 * @readonly
-	 * @type { HTMLElement[] }
+	 * @type {HTMLElement[]}
 	 * @defaultValue []
 	 * @public
 	 */
@@ -288,7 +289,7 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
 	 * @readonly
-	 * @type { AvatarColorScheme[] }
+	 * @type {sap.ui.webc.main.types.AvatarColorScheme[]}
 	 * @defaultValue []
 	 * @public
 	 */
@@ -376,13 +377,21 @@ class AvatarGroup extends UI5Element {
 		// if in "Group" mode overflow button size is equal to the offset from second item
 		if (this._isGroup) {
 			let item = this.items[1];
+			let ltrEffectiveWidth;
 
 			// in some cases when second avatar is overflowed the offset of the button is the right one
 			if (!item || item.hidden) {
 				item = button;
 			}
 
-			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft;
+			ltrEffectiveWidth = item.offsetLeft;
+
+			if (!isChrome()) {
+				// additional subtractions required for non-Chromium browsers
+				ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;
+			}
+
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : ltrEffectiveWidth;
 		}
 
 		return button.offsetWidth;
@@ -518,6 +527,7 @@ class AvatarGroup extends UI5Element {
 	 */
 	_getWidthToItem(item) {
 		const isRTL = this.effectiveDir === "rtl";
+		let ltrWidthToItem;
 
 		if (isRTL) {
 			// in RTL the total width is equal to difference of the parent container width and
@@ -526,7 +536,15 @@ class AvatarGroup extends UI5Element {
 		}
 
 		// in LTR the width is equal to item.offsetLeft
-		return item.offsetLeft;
+		ltrWidthToItem = item.offsetLeft;
+
+		if (!isChrome()) {
+			// for non-Chromium browsers offsetLeft may differ
+			// to normalize it, the Avatar Group's offset-left is subtracted
+			ltrWidthToItem = item.offsetLeft - this.offsetLeft;
+		}
+
+		return ltrWidthToItem;
 	}
 
 	/**