@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/List.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import {
@@ -14,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -27,6 +27,7 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 
 // Styles
 import listCss from "./generated/themes/List.css.js";
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 
 // Texts
 import {
@@ -76,7 +77,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Defines the component header text.
@@ -119,7 +120,7 @@ const metadata = {
 		 * <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>,
 		 * <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>.
 		 *
-		 * @type {ListMode}
+		 * @type {sap.ui.webcomponents.main.types.ListMode}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -150,7 +151,7 @@ const metadata = {
 		 * item doesn't have a bottom separator.</li>
 		 * </ul>
 		 *
-		 * @type {ListSeparators}
+		 * @type {sap.ui.webcomponents.main.types.ListSeparators}
 		 * @defaultvalue "All"
 		 * @public
 		 */
@@ -176,7 +177,7 @@ const metadata = {
 		 *
 		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * on IE the component will fallback to <code>growing="Button"</code>.
-		 * @type {ListGrowingMode}
+		 * @type {sap.ui.webcomponents.main.types.ListGrowingMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.13
 		 * @public
@@ -201,7 +202,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -248,6 +249,19 @@ const metadata = {
 			defaultValue: "list",
 		},
 
+		/**
+		 * Defines the description for the accessible role of the component.
+		 * @protected
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @since 1.10.0
+		 */
+		 accessibleRoleDescription: {
+			type: String,
+			defaultValue: undefined,
+			noAttribute: true,
+		},
+
 		/**
 		 * Defines if the entire list is in view port.
 		 * @private
@@ -264,7 +278,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Fired when an item is activated, unless the item's <code>type</code> property
@@ -284,7 +298,7 @@ const metadata = {
 		/**
 		 * Fired when the <code>Close</code> button of any item is clicked
 		 * <br><br>
-		 * <b>Note:</b> This event is applicable to <code>ui5-li-notification</code> items only,
+		 * <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
 		 * not to be confused with <code>item-delete</code>.
 		 *
 		 * @event sap.ui.webcomponents.main.List#item-close
@@ -301,7 +315,7 @@ const metadata = {
 		/**
 		 * Fired when the <code>Toggle</code> button of any item is clicked.
 		 * <br><br>
-		 * <b>Note:</b> This event is applicable to <code>ui5-li-notification-group</code> items only.
+		 * <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
 		 *
 		 * @event sap.ui.webcomponents.main.List#item-toggle
 		 * @param {HTMLElement} item the toggled item.
@@ -343,6 +357,7 @@ const metadata = {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement }, // protected, holds the event target item
 				selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
 			},
 		},
@@ -422,7 +437,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.List
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-list
  * @appenddocs StandardListItem CustomListItem GroupHeaderListItem
  * @public
@@ -441,7 +456,7 @@ class List extends UI5Element {
 	}
 
 	static get styles() {
-		return listCss;
+		return [browserScrollbarCSS, listCss];
 	}
 
 	static async onDefine() {
@@ -597,15 +612,10 @@ class List extends UI5Element {
 	}
 
 	get growsOnScroll() {
-		return this.growing === ListGrowingMode.Scroll && !isIE();
+		return this.growing === ListGrowingMode.Scroll;
 	}
 
 	get growsWithButton() {
-		if (isIE()) {
-			// On IE fallback to "More" button, even if growing of type "Scroll" is set.
-			return this.grows;
-		}
-
 		return this.growing === ListGrowingMode.Button;
 	}
 
@@ -614,7 +624,7 @@ class List extends UI5Element {
 	}
 
 	get busyIndPosition() {
-		if (isIE() || !this.grows) {
+		if (!this.grows) {
 			return "absolute";
 		}
 
@@ -629,6 +639,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items
@@ -697,6 +716,7 @@ class List extends UI5Element {
 				selectedItems: this.getSelectedItems(),
 				previouslySelectedItems,
 				selectionComponentPressed: event.detail.selectionComponentPressed,
+				targetItem: event.detail.item,
 				key: event.detail.key,
 			});
 		}
@@ -893,6 +913,8 @@ class List extends UI5Element {
 	onItemFocused(event) {
 		const target = event.target;
 
+		event.stopPropagation();
+
 		this._itemNavigation.setCurrentItem(target);
 		this.fireEvent("item-focused", { item: target });
 
@@ -942,7 +964,7 @@ class List extends UI5Element {
 	onForwardBefore(event) {
 		this.setPreviouslyFocusedItem(event.target);
 		this.focusBeforeElement();
-		event.stopImmediatePropagation();
+		event.stopPropagation();
 	}
 
 	onForwardAfter(event) {
@@ -954,6 +976,8 @@ class List extends UI5Element {
 			this.focusGrowingButton();
 			event.preventDefault();
 		}
+
+		event.stopPropagation();
 	}
 
 	focusBeforeElement() {

package/dist/ListItem.js

@@ -1,3 +1,4 @@
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/edit.js";
@@ -18,22 +19,26 @@ import {
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
+import HasPopup from "./types/HasPopup.js";
+
+// Icons
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
 /**
  * @public
  */
 const metadata = {
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ListItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 
 		/**
 		 * Defines the visual indication and behavior of the list items.
-		 * Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>.
+		 * Available options are <code>Active</code> (by default), <code>Inactive</code>, <code>Detail</code> and <code>Navigation</code>.
 		 * <br><br>
-		 * <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover,
+		 * <b>Note:</b> When set to <code>Active</code> or <code>Navigation</code>, the item will provide visual response upon press and hover,
 		 * while with type <code>Inactive</code> and <code>Detail</code> - will not.
 		 *
-		 * @type {ListItemType}
+		 * @type {sap.ui.webcomponents.main.types.ListItemType}
 		 * @defaultvalue "Active"
 		 * @public
 		*/
@@ -87,6 +92,19 @@ const metadata = {
 			defaultValue: "listitem",
 		},
 
+		/**
+		 * Defines the description for the accessible role of the component.
+		 * @protected
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @since 1.10.0
+		 */
+		 accessibleRoleDescription: {
+			type: String,
+			defaultValue: undefined,
+			noAttribute: true,
+		},
+
 		/**
 		 * Used to define the role of the list item.
 		 *
@@ -105,11 +123,32 @@ const metadata = {
 			defaultValue: ListMode.None,
 		},
 
-		_ariaHasPopup: {
-			type: String,
+		/**
+		 * Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.
+		 * @type {sap.ui.webcomponents.main.types.HasPopup}
+		 * @since 1.10.0
+		 * @private
+		 */
+		ariaHaspopup: {
+			type: HasPopup,
 			noAttribute: true,
 		},
 
+		/**
+		 * The navigated state of the list item.
+		 * If set to <code>true</code>, a navigation indicator is displayed at the end of the list item.
+		 *
+		 * @public
+		 * @type {boolean}
+		 * @since 1.10.0
+		 */
+		navigated: {
+			type: Boolean,
+		},
+
+		_level: {
+			type: Integer,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 		/**
@@ -123,6 +162,23 @@ const metadata = {
 		_focused: {},
 		"_selection-requested": {},
 	},
+	managedSlots: true,
+	slots: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
+
+		/**
+		 * Defines the delete button, displayed in "Delete" mode.
+		 * <b>Note:</b> While the slot allows custom buttons, to match
+		 * design guidelines, please use the <code>ui5-button</code> component.
+		 * <b>Note:</b> When the slot is not present, a built-in delete button will be displayed.
+		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @since 1.9.0
+		 * @slot
+		 * @public
+		 */
+		deleteButton: {
+			type: HTMLElement,
+		},
+	},
 };
 
 /**
@@ -133,7 +189,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ListItem
- * @extends ListItemBase
+ * @extends sap.ui.webcomponents.main.ListItemBase
  * @public
  */
 class ListItem extends ListItemBase {
@@ -168,16 +224,18 @@ class ListItem extends ListItemBase {
 			}
 		};
 
+		const handleTouchStartEvent = event => {
+			this._onmousedown(event);
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				this._onmousedown(event);
-			},
+			handleEvent: handleTouchStartEvent,
 			passive: true,
 		};
 	}
 
 	onBeforeRendering(...params) {
-		this.actionable = (this.type === ListItemType.Active) && (this._mode !== ListMode.Delete);
+		this.actionable = (this.type === ListItemType.Active || this.type === ListItemType.Navigation) && (this._mode !== ListMode.Delete);
 	}
 
 	onEnterDOM() {
@@ -195,13 +253,14 @@ class ListItem extends ListItemBase {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		const itemActive = this.type === ListItemType.Active;
+		const itemActive = this.type === ListItemType.Active,
+			  itemNavigated = this.typeNavigation;
 
 		if (isSpace(event)) {
 			event.preventDefault();
 		}
 
-		if ((isSpace(event) || isEnter(event)) && itemActive) {
+		if ((isSpace(event) || isEnter(event)) && (itemActive || itemNavigated)) {
 			this.activate();
 		}
 
@@ -275,7 +334,7 @@ class ListItem extends ListItemBase {
 	}
 
 	activate() {
-		if (this.type === ListItemType.Active) {
+		if (this.type === ListItemType.Active || this.type === ListItemType.Navigation) {
 			this.active = true;
 		}
 	}
@@ -293,6 +352,7 @@ class ListItem extends ListItemBase {
 			return;
 		}
 
+		event.preventDefault();
 		this.fireEvent("_press", { item: this, selected: this.selected, key: event.key });
 	}
 
@@ -344,6 +404,10 @@ class ListItem extends ListItemBase {
 		return this.type === ListItemType.Detail;
 	}
 
+	get typeNavigation() {
+		return this.type === ListItemType.Navigation;
+	}
+
 	get typeActive() {
 		return this.type === ListItemType.Active;
 	}
@@ -374,15 +438,29 @@ class ListItem extends ListItemBase {
 		return ListItem.i18nBundle.getText(DELETE);
 	}
 
+	get hasDeleteButtonSlot() {
+		return !!this.deleteButton.length;
+	}
+
+	get _accessibleNameRef() {
+		if (this.accessibleName) {
+			// accessibleName is set - return labels excluding content
+			return `${this._id}-invisibleText`;
+		}
+
+		// accessibleName is not set - return _accInfo.listItemAriaLabel including content
+		return `${this._id}-content ${this._id}-invisibleText`;
+	}
+
 	get _accInfo() {
 		return {
 			role: this.accessibleRole || this.role,
 			ariaExpanded: undefined,
-			ariaLevel: undefined,
+			ariaLevel: this._level || undefined,
 			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
 			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			ariaSelectedText: this.ariaSelectedText,
-			ariaHaspopup: this._ariaHasPopup || undefined,
+			ariaHaspopup: this.ariaHaspopup || undefined,
 		};
 	}
 

package/dist/ListItemBase.js

@@ -10,7 +10,7 @@ import styles from "./generated/themes/ListItemBase.css.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.ListItemBase.prototype */  {
 
 		/**
 		 * Defines the selected state of the <code>ListItem</code>.
@@ -57,7 +57,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.ListItemBase.prototype */  {
+	events: /** @lends sap.ui.webcomponents.main.ListItemBase.prototype */  {
 		_focused: {},
 		"_forward-after": {},
 		"_forward-before": {},
@@ -72,7 +72,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ListItemBase
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @public
  */
 class ListItemBase extends UI5Element {

package/dist/Menu.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import {
 	isLeft,
 	isRight,
@@ -44,6 +45,29 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Indicates if the menu is open
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.10.0
+		 */
+		open: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the ID or DOM Reference of the element that the menu is shown at
+		 * @public
+		 * @type {DOMReference}
+		 * @defaultvalue ""
+		 * @since 1.10.0
+		 */
+		opener: {
+			type: DOMReference,
+			defaultValue: "",
+		},
+
 		/**
 		 * Defines if the menu is sub-menu (not first-level).
 		 * @type {boolean}
@@ -118,8 +142,10 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
 		/**
 		 * Defines the items of this component.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.MenuItem[]}
+		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -138,7 +164,7 @@ const metadata = {
 		 * @param {string} text The text of the currently clicked menu item.
 		 * @public
 		 */
-		 "item-click": {
+		"item-click": {
 			detail: {
 				item: {
 					type: Object,
@@ -147,7 +173,50 @@ const metadata = {
 					type: String,
 				},
 			},
-		 },
+		},
+
+		/**
+		 * Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. <b>This event does not bubble.</b>
+		 *
+		 * @public
+		 * @event sap.ui.webcomponents.main.Menu#before-open
+		 * @allowPreventDefault
+		 * @since 1.10.0
+		 */
+		"before-open": {},
+
+		/**
+		 * Fired after the menu is opened. <b>This event does not bubble.</b>
+		 *
+		 * @public
+		 * @event sap.ui.webcomponents.main.Menu#after-open
+		 * @since 1.10.0
+		 */
+		"after-open": {},
+
+		/**
+		 * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. <b>This event does not bubble.</b>
+		 *
+		 * @public
+		 * @event sap.ui.webcomponents.main.Menu#before-close
+		 * @allowPreventDefault
+		 * @param {boolean} escPressed Indicates that <code>ESC</code> key has triggered the event.
+		 * @since 1.10.0
+		 */
+		"before-close": {
+			detail: {
+				escPressed: { type: Boolean },
+			},
+		},
+
+		/**
+		 * Fired after the menu is closed. <b>This event does not bubble.</b>
+		 *
+		 * @public
+		 * @event sap.ui.webcomponents.main.Menu#after-close
+		 * @since 1.10.0
+		 */
+		"after-close": {},
 	},
 };
 
@@ -178,12 +247,12 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/Menu.js";</code>
+ * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Menu
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-menu
  * @appenddocs MenuItem
  * @since 1.3.0
@@ -273,6 +342,22 @@ class Menu extends UI5Element {
 		});
 	}
 
+	onAfterRendering() {
+		if (!this.opener) {
+			return;
+		}
+		if (this.open) {
+			const rootNode = this.getRootNode();
+			const opener = this.opener instanceof HTMLElement ? this.opener : rootNode && rootNode.getElementById(this.opener);
+
+			if (opener) {
+				this.showAt(opener);
+			}
+		} else {
+			this.close();
+		}
+	}
+
 	/**
 	 * Shows the Menu near the opener element.
 	 * @param {HTMLElement} opener the element that the popover is shown at
@@ -316,13 +401,6 @@ class Menu extends UI5Element {
 		return this._popover;
 	}
 
-	_beforePopoverClose() {
-		if (Object.keys(this._openedSubMenuItem).length) {
-			this._openedSubMenuItem._preventSubMenuClose = false;
-			this._closeItemSubMenu(this._openedSubMenuItem);
-		}
-	}
-
 	_navigateBack() {
 		const parentMenuItem = this._parentItemsStack.pop();
 
@@ -395,11 +473,11 @@ class Menu extends UI5Element {
 	}
 
 	_prepareSubMenuDesktopTablet(item, opener, actionId) {
-		if (actionId !== this._subMenuOpenerId || item.hasChildren) {
+		if (actionId !== this._subMenuOpenerId || (item && item.hasChildren)) {
 			// close opened sub-menu if there is any opened
 			this._closeItemSubMenu(this._openedSubMenuItem, true);
 		}
-		if (item.hasChildren) {
+		if (item && item.hasChildren) {
 			// create new sub-menu
 			this._createSubMenu(item, actionId);
 			this._openItemSubMenu(item, opener, actionId);
@@ -432,7 +510,7 @@ class Menu extends UI5Element {
 			// respect mouseover only on desktop
 			const item = event.target.associatedItem;
 
-			if (item.hasChildren && item._subMenu) {
+			if (item && item.hasChildren && item._subMenu) {
 				// try to close the sub-menu
 				item._preventSubMenuClose = false;
 				this._closeItemSubMenu(item);
@@ -493,6 +571,40 @@ class Menu extends UI5Element {
 			this._prepareSubMenuDesktopTablet(item, opener, actionId);
 		}
 	}
+
+	_beforePopoverOpen(event) {
+		const prevented = !this.fireEvent("before-open", {}, true, false);
+
+		if (prevented) {
+			this.open = false;
+			event.preventDefault();
+		}
+	}
+
+	_afterPopoverOpen() {
+		this.open = true;
+		this.fireEvent("after-open");
+	}
+
+	_beforePopoverClose(event) {
+		const prevented = !this.fireEvent("before-close", { escPressed: event.detail.escPressed	}, true, false);
+
+		if (prevented) {
+			this.open = true;
+			event.preventDefault();
+			return;
+		}
+
+		if (Object.keys(this._openedSubMenuItem).length) {
+			this._openedSubMenuItem._preventSubMenuClose = false;
+			this._closeItemSubMenu(this._openedSubMenuItem);
+		}
+	}
+
+	_afterPopoverClose() {
+		this.open = false;
+		this.fireEvent("after-close");
+	}
 }
 
 Menu.define();