feat(ui5-user-menu): introduce new component

packages/fiori/README.md

@@ -31,6 +31,9 @@ such as a common header (ShellBar).
 | Timeline Item                             | `ui5-timeline-item`            | comes with `ui5-timeline`                                             |
 | Upload Collection                         | `ui5-upload-collection`        | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`         |
 | Upload Collection Item                    | `ui5-upload-collection-item`   | `import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";`     |
+| User Menu                                 | `ui5-user-menu`                | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";`                 |
+| User Menu Account                         | `ui5-user-menu-account`        | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";`          |
+| User Menu Item                            | `ui5-user-menu-item`           | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";`             |
 | View Settings Dialog                      | `ui5-view-settings-dialog`     | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";`       |
 | View Settings Dialog - Sort Item          | `ui5-sort-item`                | `import "@ui5/webcomponents-fiori/dist/SortItem.js";`                 |
 | View Settings Dialog - Filter Item        | `ui5-filter-item`              | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";`               |

packages/fiori/src/UserMenu.hbs

@@ -0,0 +1,91 @@
+<ui5-responsive-popover
+		id="{{_id}}-user-menu-rp"
+		class="ui5-pm-rp"
+		tabindex="-1"
+		placement="Bottom"
+		vertical-align="Bottom"
+		horizontal-align="End"
+		@ui5-close={{_handlePopoverAfterClose}}
+		prevent-initial-focus
+		accessible-name={{accessibleNameText}}
+		.open={{open}}
+		.opener={{opener}}
+>
+	{{#if _selectedAccount}}
+		<div class="ui5-pm-selected-account" slot="header">
+			<ui5-avatar size="L" @click="{{_handleAvatarClick}}" .initials="{{_selectedAccount._initials}}" fallback-icon="person-placeholder">
+				{{#if _selectedAccount.avatar}}
+					<img src={{_selectedAccount.avatar}}/>
+				{{/if}}
+				<ui5-tag slot="badge" wrapping-type="None" design="Set1" color-scheme="7" title="{{_editAvatarTooltip}}">
+					<ui5-icon slot="icon" name="edit"></ui5-icon>
+				</ui5-tag>
+			</ui5-avatar>
+			{{#if _selectedAccount.titleText}}
+				<ui5-title>{{_selectedAccount.titleText}}</ui5-title>
+			{{/if}}
+			{{#if _selectedAccount.additionalText}}
+				<ui5-text>{{_selectedAccount.additionalText}}</ui5-text>
+			{{/if}}
+			{{#if _selectedAccount.description}}
+				<ui5-text>{{_selectedAccount.description}}</ui5-text>
+			{{/if}}
+
+			{{#if showManageAccount}}
+				<ui5-button icon="user-settings" class="ui5-pm-manage-account-btn" @click="{{_handleManageAccountClick}}">{{_manageAccountButtonText}}</ui5-button>
+			{{/if}}
+		</div>
+	{{/if}}
+
+	{{#if showOtherAccounts}}
+		<ui5-panel collapsed class="ui5-pm-other-accounts">
+			<div slot="header" class="ui5-user-menu-account-header">
+				<ui5-title slot="header" level="H4">{{_otherAccountsButtonText}} ({{_otherAccounts.length}})</ui5-title>
+				<ui5-button slot="header" design="Transparent" icon="add-employee" @click="{{_handleAddAccountClick}}" tooltip="{{_addAccountTooltip}}"/>
+			</div>
+			{{#if _otherAccounts.length}}
+			<ui5-list @ui5-item-click="{{_handleAccountSwitch}}">
+				{{#each _otherAccounts}}
+					<ui5-li-custom .associatedAccount="{{this}}">
+						<div class="ui5-pm-other-accounts-content">
+							<ui5-avatar slot="image" size="S" .initials="{{_initials}}" fallback-icon="person-placeholder">
+								{{#if avatar}}
+									<img src={{avatar}}/>
+								{{/if}}
+							</ui5-avatar>
+							<div>
+							{{#if titleText}}
+								<ui5-title>{{titleText}}</ui5-title>
+							{{/if}}
+							{{#if additionalText}}
+								<ui5-label>{{additionalText}}</ui5-label>
+							{{/if}}
+							{{#if description}}
+								<ui5-label>{{description}}</ui5-label>
+							{{/if}}
+							</div>
+						</div>
+					</ui5-li-custom>
+				{{/each}}
+			</ui5-list>
+			{{/if}}
+		</ui5-panel>
+	{{/if}}
+
+	{{#if menuItems.length}}
+		<ui5-list
+			class="ui5-user-menu-list"
+			selection-mode="None" 
+			separators="None" 
+			accessible-role="Menu"
+			@ui5-item-click={{_handleMenuItemClick}}
+			@ui5-close-menu={{_handleMenuItemClose}}
+			>
+			<slot></slot>
+		</ui5-list>
+	{{/if}}
+
+	<div slot="footer" class="ui5-pm-footer">
+		<ui5-button design="Transparent" icon="log" @click="{{_handleSignOutClick}}">{{_signOutButtonText}}</ui5-button>
+	</div>
+</ui5-responsive-popover>