@ui5/webcomponents 0.0.0-453158269 → 0.0.0-49cef2d02

package/dist/Menu.js

@@ -1,156 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Menu_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import {
-	isLeft,
-	isRight,
-	isEnter,
-} from "@ui5/webcomponents-base/dist/Keys.js";
-import {
-	isPhone,
-	isTablet,
-	isDesktop,
-} from "@ui5/webcomponents-base/dist/Device.js";
-import {
-	getI18nBundle,
-} from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
+import { isLeft, isRight, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isPhone, isTablet, isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+// @ts-ignore
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
 import staticAreaMenuTemplate from "./generated/templates/MenuTemplate.lit.js";
-import {
-	MENU_BACK_BUTTON_ARIA_LABEL,
-	MENU_CLOSE_BUTTON_ARIA_LABEL,
-} from "./generated/i18n/i18n-defaults.js";
-
+import { MENU_BACK_BUTTON_ARIA_LABEL, MENU_CLOSE_BUTTON_ARIA_LABEL,
+// @ts-ignore
+ } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import staticAreaMenuCss from "./generated/themes/Menu.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-menu",
-	properties: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
-		/**
-		 * Defines the header text of the menu (displayed on mobile).
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		 headerText: {
-			type: String,
-		},
-
-		/**
-		 * Defines if the menu is sub-menu (not first-level).
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @private
-		 */
-		_isSubMenu: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		/**
-		 * Stores parent menu item (if there is such).
-		 * @type {object}
-		 * @private
-		 */
-		 _parentMenuItem: {
-			type: Object,
-		},
-
-		/**
-		 * Stores menu item that have sub-menu opened.
-		 * @type {object}
-		 * @private
-		 */
-		 _openedSubMenuItem: {
-			type: Object,
-		},
-
-		/**
-		 * Stores id of a list item that opened sub-menu.
-		 * @type {string}
-		 * @private
-		 */
-		 _subMenuOpenerId: {
-			type: String,
-		},
-
-		/**
-		 * Defines the currently available menu items.
-		 * (in case of non-phone devices these are the items of the menu,
-		 * but for phone devices the items of the currently opened sub-menu
-		 * will be populated here)
-		 * @type {array}
-		 * @private
-		 */
-		 _currentItems: {
-			type: Object,
-			multiple: true,
-		},
-
-		/**
-		 * Stores a list of parent menu items for each sub-menu (on phone).
-		 * @type {array}
-		 * @private
-		 */
-		 _parentItemsStack: {
-			type: Object,
-			multiple: true,
-		},
-
-		/**
-		 * Stores a responsive popover when it is opened.
-		 * @type {object}
-		 * @private
-		 */
-		_popover: {
-			type: Object,
-		},
-	},
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
-		/**
-		 * Defines the items of this component.
-		 *
-		 * @type {sap.ui.webcomponents.main.IMenuItem[]}
-		 * @slot items
-		 * @public
-		 */
-		 "default": {
-			propertyName: "items",
-			type: HTMLElement,
-			invalidateOnChildChange: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.Menu.prototype */ {
-		/**
-		 * Fired when an item is being clicked.
-		 *
-		 * @event sap.ui.webcomponents.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": {
-			detail: {
-				item: {
-					type: Object,
-				},
-				text: {
-					type: String,
-				},
-			},
-		 },
-	},
-};
-
 /**
  * @class
  *
@@ -178,323 +55,420 @@ 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
  * @public
  */
-class Menu extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get staticAreaStyles() {
-		return staticAreaMenuCss;
-	}
-
-	static get staticAreaTemplate() {
-		return staticAreaMenuTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			ResponsivePopover,
-			Button,
-			List,
-			StandardListItem,
-			Icon,
-		];
-	}
-
-	static async onDefine() {
-		Menu.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-
-	get itemsWithChildren() {
-		return !!this._currentItems.filter(item => item.item.items.length).length;
-	}
-
-	get itemsWithIcon() {
-		return !!this._currentItems.filter(item => item.item.icon !== "").length;
-	}
-
-	get isRtl() {
-		return this.effectiveDir === "rtl";
-	}
-
-	get placementType() {
-		const placement = this.isRtl ? "Left" : "Right";
-		return this._isSubMenu ? placement : "Bottom";
-	}
-
-	get verticalAlign() {
-		return this._isSubMenu ? "Top" : "Bottom";
-	}
-
-	get labelBack() {
-		return Menu.i18nBundle.getText(MENU_BACK_BUTTON_ARIA_LABEL);
-	}
-
-	get labelClose() {
-		return Menu.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);
-	}
-
-	get isPhone() {
-		return isPhone();
-	}
-
-	get isSubMenuOpened() {
-		return !!this._parentMenuItem;
-	}
-
-	get menuHeaderTextPhone() {
-		return this.isSubMenuOpened ? this._parentMenuItem.text : this.headerText;
-	}
-
-	onBeforeRendering() {
-		!isPhone() && this._prepareCurrentItems(this.items);
-
-		const itemsWithChildren = this.itemsWithChildren;
-		const itemsWithIcon = this.itemsWithIcon;
-
-		this._currentItems.forEach(item => {
-			item.item._siblingsWithChildren = itemsWithChildren;
-			item.item._siblingsWithIcon = itemsWithIcon;
-		});
-	}
-
-	/**
-	 * Shows the Menu near the opener element.
-	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @public
-	 */
-	async showAt(opener) {
-		if (isPhone()) {
-			this._prepareCurrentItems(this.items);
-			this._parentItemsStack = [];
-		}
-		if (!this._isSubMenu) {
-			this._parentMenuItem = undefined;
-		}
-		await this._getPopover();
-		this._popover.initialFocus = "";
-		for (let index = 0; index < this._currentItems.length; index++) {
-			if (!this._currentItems[index].item.disabled) {
-				this._popover.initialFocus = `${this._id}-menu-item-${index}`;
-				break;
-			}
-		}
-		this._popover.showAt(opener);
-	}
-
-	/**
-	 * Closes the Menu.
-	 * @public
-	 */
-	close() {
-		if (Object.keys(this._popover).length) {
-			if (isPhone()) {
-				this._parentItemsStack = [];
-			}
-			this._popover.close();
-			this._popover.resetFocus();
-		}
-	}
-
-	async _getPopover() {
-		this._popover = (await this.getStaticAreaItemDomRef()).querySelector("[ui5-responsive-popover]");
-		return this._popover;
-	}
-
-	_beforePopoverClose() {
-		if (Object.keys(this._openedSubMenuItem).length) {
-			this._openedSubMenuItem._preventSubMenuClose = false;
-			this._closeItemSubMenu(this._openedSubMenuItem);
-		}
-	}
-
-	_navigateBack() {
-		const parentMenuItem = this._parentItemsStack.pop();
-
-		this.focus();
-		if (parentMenuItem) {
-			this._prepareCurrentItems(parentMenuItem.parentElement.items);
-			this._parentMenuItem = this._parentItemsStack.length ? this._parentItemsStack[this._parentItemsStack.length - 1] : undefined;
-		}
-	}
-
-	_prepareCurrentItems(items) {
-		this._currentItems = items.map((item, index) => {
-			return {
-				item,
-				position: index + 1,
-				ariaHasPopup: item.hasChildren ? "menu" : undefined,
-			};
-		});
-	}
-
-	_createSubMenu(item, openerId) {
-		const subMenu = document.createElement(this.constructor.getMetadata().getTag());
-		const fragment = document.createDocumentFragment();
-
-		subMenu._isSubMenu = true;
-		subMenu.setAttribute("id", `submenu-${openerId}`);
-		subMenu._parentMenuItem = item;
-		const subItems = item.children;
-		let clonedItem,
-			idx;
-		for (idx = 0; idx < subItems.length; idx++) {
-			clonedItem = subItems[idx].cloneNode(true);
-			fragment.appendChild(clonedItem);
-		}
-		subMenu.appendChild(fragment);
-		this.staticAreaItem.shadowRoot.querySelector(".ui5-menu-submenus").appendChild(subMenu);
-		item._subMenu = subMenu;
-	}
-
-	_openItemSubMenu(item, opener, actionId) {
-		item._subMenu.showAt(opener);
-		item._preventSubMenuClose = true;
-		this._openedSubMenuItem = item;
-		this._subMenuOpenerId = actionId;
-	}
-
-	_closeItemSubMenu(item, forceClose) {
-		if (Object.keys(item).length) {
-			if (forceClose) {
-				item._preventSubMenuClose = false;
-				this._closeSubMenuPopover(item._subMenu, true);
-			} else {
-				setTimeout(() => this._closeSubMenuPopover(item._subMenu), 0);
-			}
-		}
-	}
-
-	_closeSubMenuPopover(subMenu, forceClose) {
-		if (subMenu && Object.keys(subMenu).length) {
-			const parentItem = subMenu._parentMenuItem;
-
-			if (forceClose || !parentItem._preventSubMenuClose) {
-				subMenu.close();
-				subMenu.remove();
-				parentItem._subMenu = {};
-				this._openedSubMenuItem = {};
-				this._subMenuOpenerId = "";
-			}
-		}
-	}
-
-	_prepareSubMenuDesktopTablet(item, opener, actionId) {
-		if (actionId !== this._subMenuOpenerId || item.hasChildren) {
-			// close opened sub-menu if there is any opened
-			this._closeItemSubMenu(this._openedSubMenuItem, true);
-		}
-		if (item.hasChildren) {
-			// create new sub-menu
-			this._createSubMenu(item, actionId);
-			this._openItemSubMenu(item, opener, actionId);
-		}
-		if (this._parentMenuItem) {
-			this._parentMenuItem._preventSubMenuClose = true;
-		}
-	}
-
-	_prepareSubMenuPhone(item) {
-		this._prepareCurrentItems(item.items);
-		this._parentMenuItem = item;
-		this._parentItemsStack.push(item);
-	}
-
-	_itemMouseOver(event) {
-		if (isDesktop()) {
-			// respect mouseover only on desktop
-			const opener = event.target;
-			const item = opener.associatedItem;
-			const hoverId = opener.getAttribute("id");
-
-			opener.focus();
-			this._prepareSubMenuDesktopTablet(item, opener, hoverId);
-		}
-	}
-
-	_itemMouseOut(event) {
-		if (isDesktop()) {
-			// respect mouseover only on desktop
-			const item = event.target.associatedItem;
-
-			if (item.hasChildren && item._subMenu) {
-				// try to close the sub-menu
-				item._preventSubMenuClose = false;
-				this._closeItemSubMenu(item);
-			}
-		}
-	}
-
-	_itemKeyDown(event) {
-		const isMenuClose = this.isRtl ? isRight(event) : isLeft(event);
-		const isMenuOpen = this.isRtl ? isLeft(event) : isRight(event);
-
-		if (isEnter(event)) {
-			event.preventDefault();
-		}
-		if (isMenuOpen) {
-			const opener = event.target;
-			const item = opener.associatedItem;
-			const hoverId = opener.getAttribute("id");
-
-			item.hasChildren && this._prepareSubMenuDesktopTablet(item, opener, hoverId);
-		} else if (isMenuClose && this._isSubMenu && this._parentMenuItem) {
-			this._parentMenuItem.parentElement._closeItemSubMenu(this._parentMenuItem, true);
-		}
-	}
-
-	_itemClick(event) {
-		const opener = event.detail.item;
-		const item = opener.associatedItem;
-		const actionId = opener.getAttribute("id");
-
-		if (!item.hasChildren) {
-			// click on an item that doesn't have sub-items fires an "item-click" event
-			if (!this._isSubMenu) {
-				if (isPhone()) {
-					this._parentMenuItem = undefined;
-				}
-				// fire event if the click is on top-level menu item
-				this.fireEvent("item-click", {
-					"item": item,
-					"text": item.text,
-				});
-				this._popover.close();
-			} else {
-				// find top-level menu and redirect event to it
-				let parentMenu = item.parentElement;
-				while (parentMenu._parentMenuItem) {
-					parentMenu._parentMenuItem._preventSubMenuClose = false;
-					this._closeItemSubMenu(parentMenu._parentMenuItem);
-					parentMenu = parentMenu._parentMenuItem.parentElement;
-				}
-				parentMenu._itemClick(event);
-			}
-		} else if (isPhone()) {
-			// prepares and opens sub-menu on phone
-			this._prepareSubMenuPhone(item);
-		} else if (isTablet()) {
-			// prepares and opens sub-menu on tablet
-			this._prepareSubMenuDesktopTablet(item, opener, actionId);
-		}
-	}
-}
-
+let Menu = Menu_1 = class Menu extends UI5Element {
+    static get render() {
+        return litRender;
+    }
+    static get staticAreaStyles() {
+        return staticAreaMenuCss;
+    }
+    static get staticAreaTemplate() {
+        return staticAreaMenuTemplate;
+    }
+    static get dependencies() {
+        return [
+            ResponsivePopover,
+            Button,
+            List,
+            StandardListItem,
+            Icon,
+        ];
+    }
+    static async onDefine() {
+        Menu_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    get itemsWithChildren() {
+        return !!this._currentItems.filter(item => item.item.items.length).length;
+    }
+    get itemsWithIcon() {
+        return !!this._currentItems.filter(item => item.item.icon !== "").length;
+    }
+    get isRtl() {
+        return this.effectiveDir === "rtl";
+    }
+    get placementType() {
+        const placement = this.isRtl ? "Left" : "Right";
+        return this._isSubMenu ? placement : "Bottom";
+    }
+    get verticalAlign() {
+        return this._isSubMenu ? "Top" : "Bottom";
+    }
+    get labelBack() {
+        return Menu_1.i18nBundle.getText(MENU_BACK_BUTTON_ARIA_LABEL);
+    }
+    get labelClose() {
+        return Menu_1.i18nBundle.getText(MENU_CLOSE_BUTTON_ARIA_LABEL);
+    }
+    get isPhone() {
+        return isPhone();
+    }
+    get isSubMenuOpened() {
+        return !!this._parentMenuItem;
+    }
+    get menuHeaderTextPhone() {
+        return this._parentMenuItem ? this._parentMenuItem.text : this.headerText;
+    }
+    onBeforeRendering() {
+        !isPhone() && this._prepareCurrentItems(this.items);
+        const itemsWithChildren = this.itemsWithChildren;
+        const itemsWithIcon = this.itemsWithIcon;
+        this._currentItems.forEach(item => {
+            item.item._siblingsWithChildren = itemsWithChildren;
+            item.item._siblingsWithIcon = itemsWithIcon;
+        });
+    }
+    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
+     * @public
+     */
+    async showAt(opener) {
+        if (isPhone()) {
+            this._prepareCurrentItems(this.items);
+            this._parentItemsStack = [];
+        }
+        if (!this._isSubMenu) {
+            this._parentMenuItem = undefined;
+        }
+        const popover = await this._createPopover();
+        popover.initialFocus = "";
+        for (let index = 0; index < this._currentItems.length; index++) {
+            if (!this._currentItems[index].item.disabled) {
+                popover.initialFocus = `${this._id}-menu-item-${index}`;
+                break;
+            }
+        }
+        popover.showAt(opener);
+    }
+    /**
+     * Closes the Menu.
+     * @public
+     */
+    close() {
+        if (this._popover) {
+            if (isPhone()) {
+                this._parentItemsStack = [];
+            }
+            this._popover.close();
+            this._popover.resetFocus();
+        }
+    }
+    async _createPopover() {
+        const staticAreaItemDomRef = await this.getStaticAreaItemDomRef();
+        this._popover = staticAreaItemDomRef.querySelector("[ui5-responsive-popover]");
+        return this._popover;
+    }
+    _navigateBack() {
+        const parentMenuItem = this._parentItemsStack.pop();
+        this.focus();
+        if (parentMenuItem) {
+            const parentMenuItemParent = parentMenuItem.parentElement;
+            this._prepareCurrentItems(parentMenuItemParent.items);
+            this._parentMenuItem = this._parentItemsStack.length ? this._parentItemsStack[this._parentItemsStack.length - 1] : undefined;
+        }
+    }
+    _prepareCurrentItems(items) {
+        this._currentItems = items.map((item, index) => {
+            return {
+                item,
+                position: index + 1,
+                ariaHasPopup: item.hasChildren ? "menu" : undefined,
+            };
+        });
+    }
+    _createSubMenu(item, openerId) {
+        const ctor = this.constructor;
+        const subMenu = document.createElement(ctor.getMetadata().getTag());
+        const fragment = document.createDocumentFragment();
+        subMenu._isSubMenu = true;
+        subMenu.setAttribute("id", `submenu-${openerId}`);
+        subMenu._parentMenuItem = item;
+        const subItems = item.children;
+        let clonedItem, idx;
+        for (idx = 0; idx < subItems.length; idx++) {
+            clonedItem = subItems[idx].cloneNode(true);
+            fragment.appendChild(clonedItem);
+        }
+        subMenu.appendChild(fragment);
+        this.staticAreaItem.shadowRoot.querySelector(".ui5-menu-submenus").appendChild(subMenu);
+        item._subMenu = subMenu;
+    }
+    _openItemSubMenu(item, opener, actionId) {
+        item._subMenu.showAt(opener);
+        item._preventSubMenuClose = true;
+        this._openedSubMenuItem = item;
+        this._subMenuOpenerId = actionId;
+    }
+    _closeItemSubMenu(item, forceClose = false) {
+        if (item) {
+            if (forceClose) {
+                item._preventSubMenuClose = false;
+                this._closeSubMenuPopover(item._subMenu, true);
+            }
+            else {
+                setTimeout(() => this._closeSubMenuPopover(item._subMenu), 0);
+            }
+        }
+    }
+    _closeSubMenuPopover(subMenu, forceClose = false) {
+        if (subMenu) {
+            const parentItem = subMenu._parentMenuItem;
+            if (forceClose || !parentItem._preventSubMenuClose) {
+                subMenu.close();
+                subMenu.remove();
+                parentItem._subMenu = undefined;
+                this._openedSubMenuItem = undefined;
+                this._subMenuOpenerId = "";
+            }
+        }
+    }
+    _prepareSubMenuDesktopTablet(item, opener, actionId) {
+        if (actionId !== this._subMenuOpenerId || (item && item.hasChildren)) {
+            // close opened sub-menu if there is any opened
+            this._closeItemSubMenu(this._openedSubMenuItem, true);
+        }
+        if (item && item.hasChildren) {
+            // create new sub-menu
+            this._createSubMenu(item, actionId);
+            this._openItemSubMenu(item, opener, actionId);
+        }
+        if (this._parentMenuItem) {
+            this._parentMenuItem._preventSubMenuClose = true;
+        }
+    }
+    _prepareSubMenuPhone(item) {
+        this._prepareCurrentItems(item.items);
+        this._parentMenuItem = item;
+        this._parentItemsStack.push(item);
+    }
+    _itemMouseOver(e) {
+        if (isDesktop()) {
+            // respect mouseover only on desktop
+            const opener = e.target;
+            const item = opener.associatedItem;
+            const hoverId = opener.getAttribute("id");
+            opener.focus();
+            this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+        }
+    }
+    _itemMouseOut(e) {
+        if (isDesktop()) {
+            // respect mouseover only on desktop
+            const opener = e.target;
+            const item = opener.associatedItem;
+            if (item && item.hasChildren && item._subMenu) {
+                // try to close the sub-menu
+                item._preventSubMenuClose = false;
+                this._closeItemSubMenu(item);
+            }
+        }
+    }
+    _itemKeyDown(e) {
+        const isMenuClose = this.isRtl ? isRight(e) : isLeft(e);
+        const isMenuOpen = this.isRtl ? isLeft(e) : isRight(e);
+        if (isEnter(e)) {
+            e.preventDefault();
+        }
+        if (isMenuOpen) {
+            const opener = e.target;
+            const item = opener.associatedItem;
+            const hoverId = opener.getAttribute("id");
+            item.hasChildren && this._prepareSubMenuDesktopTablet(item, opener, hoverId);
+        }
+        else if (isMenuClose && this._isSubMenu && this._parentMenuItem) {
+            const parentMenuItemParent = this._parentMenuItem.parentElement;
+            parentMenuItemParent._closeItemSubMenu(this._parentMenuItem, true);
+        }
+    }
+    _itemClick(e) {
+        const opener = e.detail.item;
+        const item = opener.associatedItem;
+        const actionId = opener.getAttribute("id");
+        if (!item.hasChildren) {
+            // click on an item that doesn't have sub-items fires an "item-click" event
+            if (!this._isSubMenu) {
+                if (isPhone()) {
+                    this._parentMenuItem = undefined;
+                }
+                // fire event if the click is on top-level menu item
+                this.fireEvent("item-click", {
+                    "item": item,
+                    "text": item.text,
+                });
+                this._popover.close();
+            }
+            else {
+                // find top-level menu and redirect event to it
+                let parentMenu = item.parentElement;
+                while (parentMenu._parentMenuItem) {
+                    parentMenu._parentMenuItem._preventSubMenuClose = false;
+                    this._closeItemSubMenu(parentMenu._parentMenuItem);
+                    parentMenu = parentMenu._parentMenuItem.parentElement;
+                }
+                parentMenu._itemClick(e);
+            }
+        }
+        else if (isPhone()) {
+            // prepares and opens sub-menu on phone
+            this._prepareSubMenuPhone(item);
+        }
+        else if (isTablet()) {
+            // prepares and opens sub-menu on tablet
+            this._prepareSubMenuDesktopTablet(item, opener, actionId);
+        }
+    }
+    _beforePopoverOpen(e) {
+        const prevented = !this.fireEvent("before-open", {}, true, false);
+        if (prevented) {
+            this.open = false;
+            e.preventDefault();
+        }
+    }
+    _afterPopoverOpen() {
+        this.open = true;
+        this.fireEvent("after-open");
+    }
+    _beforePopoverClose(e) {
+        const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, false);
+        if (prevented) {
+            this.open = true;
+            e.preventDefault();
+            return;
+        }
+        if (this._openedSubMenuItem) {
+            this._openedSubMenuItem._preventSubMenuClose = false;
+            this._closeItemSubMenu(this._openedSubMenuItem);
+        }
+    }
+    _afterPopoverClose() {
+        this.open = false;
+        this.fireEvent("after-close");
+    }
+};
+__decorate([
+    property()
+], Menu.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Boolean })
+], Menu.prototype, "open", void 0);
+__decorate([
+    property({ validator: DOMReference, defaultValue: "" })
+], Menu.prototype, "opener", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Menu.prototype, "_isSubMenu", void 0);
+__decorate([
+    property()
+], Menu.prototype, "_subMenuOpenerId", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], Menu.prototype, "_currentItems", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], Menu.prototype, "_parentItemsStack", void 0);
+__decorate([
+    property({ type: Object, defaultValue: undefined })
+], Menu.prototype, "_popover", void 0);
+__decorate([
+    property({ type: Object, defaultValue: undefined })
+], Menu.prototype, "_parentMenuItem", void 0);
+__decorate([
+    property({ type: Object, defaultValue: undefined })
+], Menu.prototype, "_openedSubMenuItem", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+], Menu.prototype, "items", void 0);
+Menu = Menu_1 = __decorate([
+    customElement("ui5-menu")
+    /**
+     * Fired when an item is being clicked.
+     *
+     * @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
+     */
+    ,
+    event("item-click", {
+        detail: {
+            item: {
+                type: Object,
+            },
+            text: {
+                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
+     */
+    ,
+    event("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
+     */
+    ,
+    event("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
+     */
+    ,
+    event("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
+     */
+    ,
+    event("after-close")
+], Menu);
 Menu.define();
-
 export default Menu;
+//# sourceMappingURL=Menu.js.map