@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/dist/Avatar.js

@@ -26,7 +26,7 @@ const metadata = {
 	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
@@ -44,9 +44,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 +54,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
@@ -200,7 +200,7 @@ const metadata = {
 		 *		} <br />
 		 * </code>
 		 * @type {HTMLElement}
-		 * @slot
+		 * @slot image
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -208,6 +208,34 @@ 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 */ {
 		/**
@@ -226,7 +254,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

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,
@@ -329,9 +330,9 @@ class AvatarGroup extends UI5Element {
 		return this._isGroup ? this._getAriaHasPopup() : undefined;
 	}
 
-	get _overflowButtonAccInfo() {
+	get _overflowButtonAccAttributes() {
 		return {
-			ariaHaspopup: this._isGroup ? undefined : this._getAriaHasPopup(),
+			hasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),
 		};
 	}
 
@@ -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 isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 
 // Template
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -48,13 +49,6 @@ const metadata = {
 		_iconOnly: {
 			type: Boolean,
 		},
-
-		/**
-		 * Defines whether the component is pressed.
-		 */
-		active: {
-			type: Boolean,
-		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -135,16 +129,8 @@ class Badge extends UI5Element {
 		this._iconOnly = this.iconOnly;
 	}
 
-	_onmousedown() {
-		this.active = true;
-	}
-
-	_onmouseup() {
-		this.active = false;
-	}
-
 	get hasText() {
-		return !!this.textContent.trim().length;
+		return isDefaultSlotProvided(this);
 	}
 
 	get hasIcon() {

package/dist/Breadcrumbs.js

@@ -14,6 +14,7 @@ import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
 import BreadcrumbsSeparatorStyle from "./types/BreadcrumbsSeparatorStyle.js";
 import BreadcrumbsItem from "./BreadcrumbsItem.js";
 import {
+	BREADCRUMB_ITEM_POS,
 	BREADCRUMBS_ARIA_LABEL,
 	BREADCRUMBS_OVERFLOW_ARIA_LABEL,
 	BREADCRUMBS_CANCEL_BUTTON,
@@ -24,6 +25,7 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 
 // Templates
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
@@ -58,7 +60,7 @@ const metadata = {
 		},
 
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the breadcrumbs.
@@ -113,18 +115,28 @@ const metadata = {
 		},
 
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Breadcrumbs.prototype */ {
+	events: /** @lends sap.ui.webcomponents.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
+		 * @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 },
 			},
 		},
 	},
@@ -387,13 +399,17 @@ class Breadcrumbs extends UI5Element {
 		const link = event.target,
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-link` === link.id);
-		this.fireEvent("item-click", { item });
+
+		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) {
@@ -401,9 +417,10 @@ class Breadcrumbs extends UI5Element {
 			items = this.getSlottedNodes("items"),
 			item = items.find(x => `${x._id}-li` === listItem.id);
 
-		window.open(item.href, item.target || "_self", "noopener,noreferrer");
-		this.responsivePopover.close();
-		this.fireEvent("item-click", { item });
+		if (this.fireEvent("item-click", { item }, true)) {
+			window.open(item.href, item.target || "_self", "noopener,noreferrer");
+			this.responsivePopover.close();
+		}
 	}
 
 	async _respPopover() {
@@ -446,10 +463,34 @@ class Breadcrumbs extends UI5Element {
 		});
 	}
 
+	_getItemPositionText(position, size) {
+		return Breadcrumbs.i18nBundle.getText(BREADCRUMB_ITEM_POS, position, size);
+	}
+
+	_getItemAccessibleName(item, position, size) {
+		const positionText = this._getItemPositionText(position, size);
+
+		// innerText is needed as it is no longer read out when label is set
+		let text = "";
+		if (item.accessibleName) {
+			text = `${item.textContent.trim()} ${item.accessibleName} ${positionText}`;
+		} else {
+			text = `${item.textContent.trim()} ${positionText}`;
+		}
+
+		return text;
+	}
+
 	getCurrentLocationLabelWrapper() {
 		return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location > span");
 	}
 
+	get _visibleItems() {
+		return this.getSlottedNodes("items")
+			.slice(this._overflowSize)
+			.filter(i => this._isItemVisible(i));
+	}
+
 	get _endsWithCurrentLocationLabel() {
 		return this.design === BreadcrumbsDesign.Standard;
 	}
@@ -466,7 +507,7 @@ class Breadcrumbs extends UI5Element {
 	}
 
 	get _currentLocationLabel() {
-		return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location ui5-label");
+		return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location [ui5-label]");
 	}
 
 	get _isDropdownArrowFocused() {
@@ -493,7 +534,7 @@ class Breadcrumbs extends UI5Element {
 	 * @private
 	 */
 	get _dropdownArrowLink() {
-		return this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link");
+		return this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link]");
 	}
 
 	/**
@@ -510,20 +551,45 @@ class Breadcrumbs extends UI5Element {
 	 * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
 	 */
 	get _linksData() {
-		const items = this.getSlottedNodes("items").slice(this._overflowSize);
+		const items = this._visibleItems;
+		const itemsCount = items.length; // get size before removing of current location
 
 		if (this._endsWithCurrentLocationLabel) {
 			items.pop();
 		}
 
-		return items.filter(item => this._isItemVisible(item));
+		return items
+			.map((item, index) => {
+				item._accessibleNameText = this._getItemAccessibleName(item, index + 1, itemsCount);
+				return item;
+			});
+	}
+
+	/**
+	 * Getter for accessible name of the current location. Includes the position of the current location and the size of the breadcrumbs
+	 */
+	get _currentLocationAccName() {
+		const items = this._visibleItems;
+
+		const positionText = this._getItemPositionText(items.length, items.length);
+		const lastItem = items[items.length - 1];
+
+		if (!lastItem) {
+			return positionText;
+		}
+
+		if (lastItem.accessibleName) {
+			return `${lastItem.textContent.trim()} ${lastItem.accessibleName} ${positionText}`;
+		}
+
+		return `${lastItem.textContent.trim()} ${positionText}`;
 	}
 
 	/**
 	 * Getter for the list of links corresponding to the abstract breadcrumb items
 	 */
 	get _links() {
-		return Array.from(this.shadowRoot.querySelectorAll(".ui5-breadcrumbs-link-wrapper ui5-link"));
+		return Array.from(this.shadowRoot.querySelectorAll(".ui5-breadcrumbs-link-wrapper [ui5-link]"));
 	}
 
 	get _isOverflowEmpty() {
@@ -562,6 +628,7 @@ class Breadcrumbs extends UI5Element {
 			List,
 			StandardListItem,
 			Icon,
+			Button,
 		];
 	}
 

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.webcomponents.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
@@ -77,7 +77,7 @@ 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

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";
@@ -39,7 +38,7 @@ const metadata = {
 
 		/**
 		 * Defines text to be displayed below the component. It can be used to inform the user of the current operation.
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @defaultvalue ""
 		 * @since 1.0.0-rc.7
@@ -123,7 +122,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>
@@ -207,7 +206,6 @@ class BusyIndicator extends UI5Element {
 		return {
 			root: {
 				"ui5-busy-indicator-root": true,
-				"ui5-busy-indicator-root--ie": isIE(),
 			},
 		};
 	}