feat(ui5-avatar-group): initial implementation (#2524)

Introduce new component in the main package, called AvatarGroup. The component is used to display a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars, such as, project team members or employees. The control allows you to display the avatars in different sizes, depending on your use case.
Supports 2 main types - Group and Individual:
- Group type: The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.
- Individual type: The avatars are displayed side-by-side and each avatar has its own click/tap area.

Fixes: #2409

Author: dobrinyonkov

packages/main/bundle.esm.js

@@ -41,6 +41,7 @@ import "./dist/features/InputElementsFormSupport.js";
 import "./dist/features/InputSuggestions.js";
 
 import Avatar from "./dist/Avatar.js";
+import AvatarGroup from "./dist/AvatarGroup.js";
 import Badge from "./dist/Badge.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";

packages/main/src/Avatar.hbs

@@ -1,4 +1,13 @@
-<div class="ui5-avatar-root">
+<div 
+	class="ui5-avatar-root" 
+	tabindex="{{tabindex}}"
+	data-sap-focus-ref
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+>
 	{{#if image}}
 		<span class="ui5-avatar-img" style="{{styles.img}}" role="img" aria-label="{{accessibleNameText}}"></span>
 	{{else if icon}}

packages/main/src/Avatar.js

@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import encodeCSS from "@ui5/webcomponents-base/dist/util/encodeCSS.js";
 
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
 
@@ -25,6 +26,24 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 
+		/**
+		 * Defines if the avatar is interactive (focusable and pressable)
+		 * @type {boolean}
+		 * @defaultValue false
+		 * @public
+		 */
+		interactive: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the elements is on focus
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines the source path to the desired image.
 		 * @type {string}
@@ -105,6 +124,14 @@ const metadata = {
 			defaultValue: AvatarSize.S,
 		},
 
+		/**
+		 * @private
+		 */
+		_size: {
+			type: String,
+			defaultValue: AvatarSize.S,
+		},
+
 		/**
 		 * Defines the fit type of the desired image.
 		 * <br><br>
@@ -148,6 +175,14 @@ const metadata = {
 			defaultValue: AvatarBackgroundColor.Accent6,
 		},
 
+		/**
+		 * @private
+		 */
+		_backgroundColor: {
+			type: String,
+			defaultValue: AvatarBackgroundColor.Accent6,
+		},
+
 		/**
 		 * Defines the text alternative of the <code>ui5-avatar</code>.
 		 * If not provided a default text alternative will be set, if present.
@@ -160,10 +195,23 @@ const metadata = {
 		accessibleName: {
 			type: String,
 		},
+
+		_tabIndex: {
+			type: String,
+			noAttribute: true,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
 	},
 	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+		/**
+		* Fired on mouseup, space and enter if avatar is interactive
+		*
+		* @event
+		* @private
+		* @since 1.0.0-rc.11
+		*/
+		click: {},
 	},
 };
 
@@ -220,6 +268,34 @@ class Avatar extends UI5Element {
 		await fetchI18nBundle("@ui5/webcomponents");
 	}
 
+	get tabindex() {
+		return this._tabIndex || (this.interactive ? "0" : "-1");
+	}
+
+	/**
+	 * Returns the effective avatar size.
+	 * @readonly
+	 * @type { String }
+	 * @defaultValue "S"
+	 * @private
+	 */
+	get _effectiveSize() {
+		// we read the attribute, because the "size" property will always have a default value
+		return this.getAttribute("size") || this._size;
+	}
+
+	/**
+	 * Returns the effective background color.
+	 * @readonly
+	 * @type { String }
+	 * @defaultValue "Accent6"
+	 * @private
+	 */
+	get _effectiveBackgroundColor() {
+		// we read the attribute, because the "background-color" property will always have a default value
+		return this.getAttribute("background-color") || this._backgroundColor;
+	}
+
 	get validInitials() {
 		const validInitials = /^[a-zA-Z]{1,2}$/;
 
@@ -245,6 +321,37 @@ class Avatar extends UI5Element {
 			},
 		};
 	}
+
+	_onclick(event) {
+		event.isMarked = "avatar";
+		if (this.interactive) {
+			event.preventDefault();
+			// Prevent the native event and fire custom event because otherwise the noConfict event won't be thrown
+			this.fireEvent("click");
+		}
+	}
+
+	_onkeydown(event) {
+		if (this.interactive && isEnter(event)) {
+			this.fireEvent("click");
+		}
+	}
+
+	_onkeyup(event) {
+		if (this.interactive && !event.shiftKey && isSpace(event)) {
+			this.fireEvent("click");
+		}
+	}
+
+	_onfocusout() {
+		this.focused = false;
+	}
+
+	_onfocusin() {
+		if (this.interactive) {
+			this.focused = true;
+		}
+	}
 }
 
 Avatar.define();

packages/main/src/AvatarGroup.hbs

@@ -0,0 +1,17 @@
+<div class="ui5-avatar-group-root">
+	<div 
+		class="ui5-avatar-group-items" 
+		@keyup="{{_onkeyup}}" 
+		@keydown="{{_onkeydown}}" 
+		@focusin="{{_onfocusin}}" 
+		tabindex="{{_groupTabIndex}}"
+		@click="{{_onGroupClick}}"
+		@ui5-click="{{_onUI5Click}}"
+	>
+		<slot></slot>
+
+		<ui5-button ?hidden="{{_overflowBtnHidden}}" tabindex="{{_overflowButtonTabIndex}}" class="ui5-avatar-group-overflow-btn">
+			{{_overflowButtonText}}
+		</ui5-button>
+	</div>
+</div>