feat(ui5-menu): Initial implementation

[NHristov-sap]

This is the initial implementation of and web components that allow creating of a hierarchical menu structure.

// Menu API
       properties:  {
		headerText: {
			type: String,
		},
	slots: {
		         "default": {
			   propertyName: "items",
			   type: HTMLElement,
			    invalidateOnChildChange: true,
		},
	},
	events:
		 "item-click": {
			detail: {
				item: {
					type: Object,
				},
				text: {
					type: String,
				},
			},
		 },
	}
	
	
// MenuItem API
	properties: {
		text: {
			type: String,
		},
		icon: {
			type: String,
		},
		startsSection: {
			type: Boolean,
		},
		disabled: {
			type: Boolean,
		}
	}

[vladitasev]

This whole method is concerning - at first glance it seems that what you need is a static area template, where this sub menu addition is going to happen. You cannot append to the body as it belongs to the app. For all such purposes you must use the static area. Also, you cannot use document.createElement, you must use the .hbs file for creating DOM. Finally, hard-coded ui5-menu is not scoping-friendly - if the user set a scoping suffix such as test, it would be f.e. ui5-menu-test. When you use the .hbs, the compiler will do this automatically. However, this component creates other instances of itself, so I'm not even sure this is going to work.

[NHristov-sap]

I'm not sure it can be done via hbs template. In fact, a new ui5-menu element must be created for each nested submenu.

[vladitasev]

I pushed a small update to address some of the issues:

• created the missing MenuItem.css file that broke the build (it's empty)
• added a div.submenus in the shadow root
• made the _createSubmenus function use this div instead of the body
• used a scoping-friendly API to get the tag of the component

Please let me know if everything works with the proposed changes

[tsanislavgatev]

Can we add someone from List team and an UA colleague for the documentation part?

[vladitasev]

I would suggest not to provide such a function for the time being. First, I'm not sure about the name: if it is called just parent it should probably be a getter, not a method, similarly to how HMLT's native parentElement and parentNode work. Also, I'm not sure why people couldn't use parentElement recursively to traverse the HTML they created themselves. Finally, I think the app has other ways to get such information, if needed - for example if they have two "Save" manu items in different subtrees, they can give them different IDs if they need to know which one in particular was selected by the user.

[NHristov-sap]

Done

[ilhan007]

I found out one bug with the keyboard navigation, when I tried to get back from subitem, using the ArrowLeft key - the focus is lost and the user can't continue using the keyboard:

1. Open sample with sub items
2. Navigate to the 3rd level item with ArrowRight
3. Then, try to go back with ArrowLeft

Screen.Recording.2022-04-14.at.09.43.18.mov

[ilhan007]

it seems it's reproduces only on my side, so I will get back my comment and approve the change