@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/dist/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/dist/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;
 	}
 
 	/**

package/dist/Badge.js

@@ -1,6 +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 willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -16,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.
@@ -50,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.
@@ -61,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
 		 */
@@ -96,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
@@ -129,7 +131,7 @@ class Badge extends UI5Element {
 	}
 
 	get hasText() {
-		return !!this.textContent.trim().length;
+		return willShowContent(this.text);
 	}
 
 	get hasIcon() {

package/dist/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,20 +115,28 @@ 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.
+		 * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+		 * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+		 * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 		 * @public
 		 */
 		"item-click": {
 			detail: {
 				item: { type: HTMLElement },
+				altKey: { type: Boolean	},
+				ctrlKey: { type: Boolean },
+				metaKey: { type: Boolean },
+				shiftKey: { type: Boolean },
 			},
 		},
 	},
@@ -163,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
@@ -391,15 +399,17 @@ class Breadcrumbs extends UI5Element {
 		const link = event.target,
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-link` === link.id);
-		if (!this.fireEvent("item-click", { item }, true)) {
+
+		if (!this.fireEvent("item-click", { item, ...event.detail }, true)) {
 			event.preventDefault();
 		}
 	}
 
-	_onLabelPress() {
+	_onLabelPress(event) {
 		const items = this.getSlottedNodes("items"),
 			item = items[items.length - 1];
-		this.fireEvent("item-click", { item });
+
+		this.fireEvent("item-click", { item, ...event.detail });
 	}
 
 	_onOverflowListItemSelect(event) {

package/dist/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.
@@ -45,7 +45,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the item.
+		 * Defines the accessible ARIA name of the item.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -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 */ {},
 };
 
 /**
@@ -77,14 +77,14 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcumbs</code>.
+ * The <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcrumbs</code>.
  *
  * @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/dist/BusyIndicator.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -20,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.
@@ -35,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.
@@ -60,7 +58,7 @@ const metadata = {
 		 * <li><code>Large</code></li>
 		 * </ul>
 		 *
-		 * @type {BusyIndicatorSize}
+		 * @type {sap.ui.webc.main.types.BusyIndicatorSize}
 		 * @defaultvalue "Medium"
 		 * @public
 		 */
@@ -83,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
 		 */
@@ -123,7 +121,7 @@ const metadata = {
  * <h4>When to use:</h4>
  * <ul>
  * <li>The user needs to be able to cancel the operation.</li>
- * <li>Only part of the application or a particular control is affected.</li>
+ * <li>Only part of the application or a particular component is affected.</li>
  * </ul>
  *
  * <h4>When not to use:</h4>
@@ -139,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
@@ -207,7 +205,6 @@ class BusyIndicator extends UI5Element {
 		return {
 			root: {
 				"ui5-busy-indicator-root": true,
-				"ui5-busy-indicator-root--ie": isIE(),
 			},
 		};
 	}