@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

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,7 +25,7 @@ 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).
@@ -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
 		 *
@@ -219,7 +221,7 @@ const metadata = {
 		 * &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>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br>
 		 * &lt;/ui5-avatar>
 		 * <br><br>
 		 * <ui5-avatar initials="AB" color-scheme="Accent1">
@@ -237,7 +239,7 @@ const metadata = {
 			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
 		*
@@ -275,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 {
@@ -314,7 +316,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective avatar size.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "S"
 	 * @private
 	 */
@@ -326,7 +328,7 @@ class Avatar extends UI5Element {
 	/**
 	 * Returns the effective background color.
 	 * @readonly
-	 * @type { String }
+	 * @type {string}
 	 * @defaultValue "Accent6"
 	 * @private
 	 */
@@ -344,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;
 		}
 
@@ -370,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 - this.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 - this.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;
 	}
 
 	/**

package/src/Badge.js

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -17,7 +17,7 @@ import badgeCss from "./generated/themes/Badge.css.js";
 const metadata = {
 	tag: "ui5-badge",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */  {
+	properties: /** @lends sap.ui.webc.main.Badge.prototype */  {
 
 		/**
 		 * Defines the color scheme of the component.
@@ -51,7 +51,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Badge.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br><b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
@@ -62,12 +62,13 @@ const metadata = {
 		 */
 		"default": {
 			type: Node,
+			propertyName: "text",
 		},
 
 		/**
 		 * Defines the icon to be displayed in the component.
 		 *
-		 * @type {sap.ui.webcomponents.main.IIcon}
+		 * @type {sap.ui.webc.main.IIcon}
 		 * @slot
 		 * @public
 		 */
@@ -97,8 +98,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Badge
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Badge
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-badge
  * @since 0.12.0
  * @public
@@ -130,7 +131,7 @@ class Badge extends UI5Element {
 	}
 
 	get hasText() {
-		return isDefaultSlotProvided(this);
+		return willShowContent(this.text);
 	}
 
 	get hasIcon() {

package/src/Breadcrumbs.hbs

@@ -6,7 +6,7 @@
 
         <li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" 
             ?hidden="{{_isOverflowEmpty}}">
-            <ui5-link @click="{{_openRespPopover}}"
+            <ui5-link @ui5-click="{{_openRespPopover}}"
                 accessible-role="button"
                 aria-label="{{_dropdownArrowAccessibleNameText}}"
                 aria-haspopup="{{_ariaHasPopup}}">

package/src/Breadcrumbs.js

@@ -42,14 +42,14 @@ const metadata = {
 	tag: "ui5-breadcrumbs",
 	managedSlots: true,
 	languageAware: true,
-	slots: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Defines the component items.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-breadcrumbs-item</code> component to define the desired items.
-		 * @type {sap.ui.webcomponents.main.IBreadcrumbsItem[]}
+		 * @type {sap.ui.webc.main.IBreadcrumbsItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -60,7 +60,7 @@ const metadata = {
 		},
 
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the breadcrumbs.
@@ -69,7 +69,7 @@ const metadata = {
 		 * <b>Note:</b> The <code>Standard</code> breadcrumbs show the current page as the last item in the trail.
 		 * The last item contains only plain text and is not a link.
 		 *
-		 * @type {BreadcrumbsDesign}
+		 * @type {sap.ui.webc.main.types.BreadcrumbsDesign}
 		 * @defaultvalue "Standard"
 		 * @public
 		*/
@@ -92,7 +92,7 @@ const metadata = {
 		 * <li><code>GreaterThan</code></li>
 		 * </ul>
 		 *
-		 * @type {BreadcrumbsSeparatorStyle}
+		 * @type {sap.ui.webc.main.types.BreadcrumbsSeparatorStyle}
 		 * @defaultvalue "Slash"
 		 * @public
 		 */
@@ -104,7 +104,7 @@ const metadata = {
 		/**
 		 * Holds the number of items in the overflow.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 0
 		 * @private
 		 */
@@ -115,13 +115,13 @@ const metadata = {
 		},
 
 	},
-	events: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	events: /** @lends sap.ui.webc.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Fires when a <code>BreadcrumbsItem</code> is clicked.
 		 * <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.main.Breadcrumbs#item-click
+		 * @event sap.ui.webc.main.Breadcrumbs#item-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
 		 * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
@@ -171,8 +171,8 @@ const metadata = {
  * <br>
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Breadcrumbs
- * @extends UI5Element
+ * @alias sap.ui.webc.main.Breadcrumbs
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-breadcrumbs
  * @appenddocs BreadcrumbsItem
  * @public

package/src/BreadcrumbsItem.js

@@ -6,7 +6,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 const metadata = {
 	tag: "ui5-breadcrumbs-item",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.BreadcrumbsItem.prototype */ {
 
 		/**
 		 * Defines the link href.
@@ -55,7 +55,7 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.BreadcrumbsItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br><br>
@@ -69,7 +69,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.BreadcrumbsItem.prototype */ {},
+	events: /** @lends sap.ui.webc.main.BreadcrumbsItem.prototype */ {},
 };
 
 /**
@@ -81,10 +81,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.BreadcrumbsItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.BreadcrumbsItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-breadcrumbs-item
- * @implements sap.ui.webcomponents.main.IBreadcrumbsItem
+ * @implements sap.ui.webc.main.IBreadcrumbsItem
  * @public
  * @since 1.0.0-rc.15
  */

package/src/BusyIndicator.js

@@ -19,9 +19,8 @@ import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
  */
 const metadata = {
 	tag: "ui5-busy-indicator",
-	altTag: "ui5-busyindicator",
 	languageAware: true,
-	slots: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
+	slots: /** @lends sap.ui.webc.main.BusyIndicator.prototype */ {
 
 		/**
 		 * Determines the content over which the component will appear.
@@ -34,7 +33,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
+	properties: /** @lends sap.ui.webc.main.BusyIndicator.prototype */ {
 
 		/**
 		 * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
@@ -59,7 +58,7 @@ const metadata = {
 		 * <li><code>Large</code></li>
 		 * </ul>
 		 *
-		 * @type {BusyIndicatorSize}
+		 * @type {sap.ui.webc.main.types.BusyIndicatorSize}
 		 * @defaultvalue "Medium"
 		 * @public
 		 */
@@ -82,7 +81,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will be visible on the screen.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -138,8 +137,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.BusyIndicator
- * @extends UI5Element
+ * @alias sap.ui.webc.main.BusyIndicator
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-busy-indicator
  * @public
  * @since 0.12.0