@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/Menu.hbs

@@ -7,7 +7,10 @@
 	hide-arrow
 	allow-target-overlap
 	?sub-menu={{_isSubMenu}}
-	@before-close={{_beforePopoverClose}}
+	@ui5-before-open={{_beforePopoverOpen}}
+	@ui5-after-open={{_afterPopoverOpen}}
+	@ui5-before-close={{_beforePopoverClose}}
+	@ui5-after-close={{_afterPopoverClose}}
 >
 {{#if isPhone}}
 	<div
@@ -56,8 +59,10 @@
 				.associatedItem="{{this.item}}"
 				class="ui5-menu-item"
 				id="{{../_id}}-menu-item-{{@index}}"
-				icon="{{this.item.icon}}"
+				.icon="{{this.item.icon}}"
+				accessible-name={{this.item.ariaLabelledByText}}
 				accessible-role="menuitem"
+				.additionalText="{{this.item._additionalText}}"
 				._ariaHasPopup={{this.ariaHasPopup}}
 				?disabled={{this.item.disabled}}
 				?starts-section={{this.item.startsSection}}

package/src/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,
@@ -33,7 +34,7 @@ import staticAreaMenuCss from "./generated/themes/Menu.css.js";
  */
 const metadata = {
 	tag: "ui5-menu",
-	properties: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Menu.prototype */ {
 		/**
 		 * Defines the header text of the menu (displayed on mobile).
 		 * @type {string}
@@ -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}
@@ -115,13 +139,13 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
+	slots: /** @lends sap.ui.webc.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.IMenuItem[]}
+		 * @type {sap.ui.webc.main.IMenuItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -131,16 +155,16 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
+	events: /** @lends sap.ui.webc.main.Menu.prototype */ {
 		/**
 		 * Fired when an item is being clicked.
 		 *
-		 * @event sap.ui.webcomponents.main.Menu#item-click
+		 * @event sap.ui.webc.main.Menu#item-click
 		 * @param {object} item The currently clicked menu item.
 		 * @param {string} text The text of the currently clicked menu item.
 		 * @public
 		 */
-		 "item-click": {
+		"item-click": {
 			detail: {
 				item: {
 					type: Object,
@@ -149,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.webc.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.webc.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.webc.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.webc.main.Menu#after-close
+		 * @since 1.10.0
+		 */
+		"after-close": {},
 	},
 };
 
@@ -180,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
+ * @alias sap.ui.webc.main.Menu
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-menu
  * @appenddocs MenuItem
  * @since 1.3.0
@@ -275,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
@@ -318,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();
 
@@ -397,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);
@@ -434,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);
@@ -495,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();

package/src/MenuItem.js

@@ -5,11 +5,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  */
 const metadata = {
 	tag: "ui5-menu-item",
-	properties: /** @lends sap.ui.webcomponents.main.MenuItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MenuItem.prototype */ {
 		/**
 		 * Defines the text of the tree item.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultValue ""
 		 * @public
 		 */
@@ -17,12 +17,24 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the menu item.
+		 * <b>Note:</b> The additional text would not be displayed if the item has a submenu.
+		 *
+		 * @type {string}
+		 * @public
+		 * @since 1.8.0
+		 */
+		additionalText: {
+			type: String,
+		},
+
 		/**
 		 * Defines the icon to be displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 <b>* Example:</b>
-		 * 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 ""
@@ -56,7 +68,19 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have children items.
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.7.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Indicates whether any of the element siblings have children items.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -66,7 +90,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have icon.
+		 * Indicates whether any of the element siblings have icon.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -95,11 +119,11 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.MenuItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MenuItem.prototype */ {
 		/**
 		 * Defines the items of this component.
 		 *
-		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
+		 * @type {sap.ui.webc.main.IMenuItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -127,14 +151,14 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/MenuItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/MenuItem.js";</code>
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MenuItem
- * @extends UI5Element
+ * @alias sap.ui.webc.main.MenuItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-menu-item
- * @implements sap.ui.webcomponents.main.IMenuItem
+ * @implements sap.ui.webc.main.IMenuItem
  * @since 1.3.0
  * @public
  */
@@ -154,6 +178,14 @@ class MenuItem extends UI5Element {
 	get subMenuOpened() {
 		return !!Object.keys(this._subMenu).length;
 	}
+
+	get _additionalText() {
+		return this.hasChildren ? "" : this.additionalText;
+	}
+
+	get ariaLabelledByText() {
+		return `${this.text} ${this.accessibleName}`.trim();
+	}
 }
 
 MenuItem.define();

package/src/MessageStrip.js

@@ -27,10 +27,9 @@ import messageStripCss from "./generated/themes/MessageStrip.css.js";
  */
 const metadata = {
 	tag: "ui5-message-strip",
-	altTag: "ui5-messagestrip",
 	languageAware: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+	properties: /** @lends sap.ui.webc.main.MessageStrip.prototype */ {
 
 		/**
 		 * Defines the component type.
@@ -38,7 +37,7 @@ const metadata = {
 		 * <b>Note:</b> Available options are <code>"Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
 		 * and <code>"Warning"</code>.
 		 *
-		 * @type {MessageStripDesign}
+		 * @type {sap.ui.webc.main.types.MessageStripDesign}
 		 * @defaultvalue "Information"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -73,7 +72,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+	slots: /** @lends sap.ui.webc.main.MessageStrip.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br><br>
@@ -94,9 +93,9 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 *
-		 * 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 {sap.ui.webcomponents.main.IIcon}
+		 * @type {sap.ui.webc.main.IIcon}
 		 * @slot
 		 * @public
 		 */
@@ -104,7 +103,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+	events: /** @lends sap.ui.webc.main.MessageStrip.prototype */ {
 
 		/**
 		 * Fired when the close button is pressed either with a
@@ -146,8 +145,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.MessageStrip
- * @extends UI5Element
+ * @alias sap.ui.webc.main.MessageStrip
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-message-strip
  * @public
  * @since 0.9.0

package/src/MonthPicker.hbs

@@ -1,6 +1,7 @@
 <div
 	class="ui5-mp-root"
 	role="grid"
+	aria-roledescription="{{roleDescription}}"
 	aria-readonly="false"
 	aria-multiselectable="false"
 	@keydown={{_onkeydown}}