@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-918b4fbe7

package/dist/Avatar.js

@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 // Template
@@ -15,19 +14,21 @@ import AvatarCss from "./generated/themes/Avatar.css.js";
 import Icon from "./Icon.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarShape from "./types/AvatarShape.js";
-import AvatarFitType from "./types/AvatarFitType.js";
-import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
+// Icon
+import "@ui5/webcomponents-icons/dist/employee.js";
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-avatar",
 	languageAware: true,
+	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.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
@@ -45,27 +46,17 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the source path to the desired image.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		image: {
-			type: String,
-		},
-
-		/**
-		 * 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> is set, 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>
 		 * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
 		 * <br>
-		 * <pre>&lt;ui5-avatar icon-src="employee"></pre>
+		 * <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
@@ -77,7 +68,7 @@ const metadata = {
 		/**
 		 * Defines the displayed initials.
 		 * <br>
-		 * Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.
+		 * Up to two Latin letters can be displayed as initials.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -88,14 +79,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the shape of the <code>ui5-avatar</code>.
+		 * Defines the shape of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
 		 * <li><code>Circle</code></li>
 		 * <li><code>Square</code></li>
 		 * </ul>
-		 * @type {AvatarShape}
+		 * @type {sap.ui.webcomponents.main.types.AvatarShape}
 		 * @defaultvalue "Circle"
 		 * @public
 		 */
@@ -105,7 +96,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines predefined size of the <code>ui5-avatar</code>.
+		 * Defines predefined size of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -115,7 +106,7 @@ const metadata = {
 		 * <li><code>L</code></li>
 		 * <li><code>XL</code></li>
 		 * </ul>
-		 * @type {AvatarSize}
+		 * @type {sap.ui.webcomponents.main.types.AvatarSize}
 		 * @defaultvalue "S"
 		 * @public
 		 */
@@ -132,23 +123,6 @@ const metadata = {
 			defaultValue: AvatarSize.S,
 		},
 
-		/**
-		 * Defines the fit type of the desired image.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>Cover</code></li>
-		 * <li><code>Contain</code></li>
-		 * </ul>
-		 * @type {AvatarFitType}
-		 * @defaultvalue "Cover"
-		 * @public
-		 */
-		imageFitType: {
-			type: AvatarFitType,
-			defaultValue: AvatarFitType.Cover,
-		},
-
 		/**
 		 * Defines the background color of the desired image.
 		 * <br><br>
@@ -166,25 +140,25 @@ const metadata = {
 		 * <li><code>Accent10</code></li>
 		 * <li><code>Placeholder</code></li>
 		 * </ul>
-		 * @type {AvatarBackgroundColor}
+		 * @type {sap.ui.webcomponents.main.types.AvatarColorScheme}
 		 * @defaultvalue "Accent6"
 		 * @public
 		 */
-		backgroundColor: {
-			type: AvatarBackgroundColor,
-			defaultValue: AvatarBackgroundColor.Accent6,
+		colorScheme: {
+			type: AvatarColorScheme,
+			defaultValue: AvatarColorScheme.Accent6,
 		},
 
 		/**
 		 * @private
 		 */
-		_backgroundColor: {
+		_colorScheme: {
 			type: String,
-			defaultValue: AvatarBackgroundColor.Accent6,
+			defaultValue: AvatarColorScheme.Accent6,
 		},
 
 		/**
-		 * Defines the text alternative of the <code>ui5-avatar</code>.
+		 * Defines the text alternative of the component.
 		 * If not provided a default text alternative will be set, if present.
 		 *
 		 * @type {string}
@@ -196,12 +170,74 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the aria-haspopup value of the component when <code>interactive</code> property is <code>true</code>.
+		 * <br><br>
+		 * @type String
+		 * @since 1.0.0-rc.15
+		 * @protected
+		 */
+		ariaHaspopup: {
+			type: String,
+		},
+
 		_tabIndex: {
 			type: String,
 			noAttribute: true,
 		},
+
+		_hasImage: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+		/**
+		 * Receives the desired <code>&lt;img&gt;</code> tag
+		 *
+		 * <b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
+		 * <br /> <br />
+		 * <code>
+		 *		ui5-avatar:not(:defined) { <br />
+		 *			&nbsp;visibility: hidden; <br />
+		 *		} <br />
+		 * </code>
+		 * @type {HTMLElement}
+		 * @slot image
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		"default": {
+			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 */ {
 		/**
@@ -220,12 +256,21 @@ 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
  * set a custom size.
  *
+ * <br><br>
+ * <h3>Keyboard Handling</h3>
+ *
+ * <ul>
+ * <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li>
+ * <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li>
+ * </ul>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Avatar.js";</code>
@@ -233,18 +278,13 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Avatar
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-avatar
  * @since 1.0.0-rc.6
  * @implements sap.ui.webcomponents.main.IAvatar
  * @public
  */
 class Avatar extends UI5Element {
-	constructor() {
-		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -266,7 +306,7 @@ class Avatar extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Avatar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get tabindex() {
@@ -276,7 +316,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective avatar size.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "S"
 	 * @private
 	 */
@@ -288,19 +328,29 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective background color.
 	 * @readonly
-	 * @type { String }
+	 * @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;
+		return this.getAttribute("_color-scheme") || this._colorScheme;
+	}
+
+	get _role() {
+		return this.interactive ? "button" : undefined;
+	}
+
+	get _ariaHasPopup() {
+		return this._getAriaHasPopup();
 	}
 
 	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;
 		}
 
@@ -312,23 +362,52 @@ class Avatar extends UI5Element {
 			return this.accessibleName;
 		}
 
-		return this.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+		return Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
 	}
 
-	get styles() {
-		return {
-			img: {
-				"background-image": `url("${encodeCSS(this.image)}")`,
-			},
-		};
+	get hasImage() {
+		this._hasImage = !!this.image.length;
+		return this._hasImage;
 	}
 
-	_onclick(event) {
-		if (this.interactive) {
-			// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
-			event.stopPropagation();
-			this.fireEvent("click");
+	onBeforeRendering() {
+		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();
+		this.fireEvent("click");
 	}
 
 	_onkeydown(event) {
@@ -360,6 +439,14 @@ class Avatar extends UI5Element {
 			this.focused = true;
 		}
 	}
+
+	_getAriaHasPopup() {
+		if (!this.interactive || this.ariaHaspopup === "") {
+			return;
+		}
+
+		return this.ariaHaspopup;
+	}
 }
 
 Avatar.define();