@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/ShellBarItem.js

@@ -1,9 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
-// Template
-import ShellBarItemTemplate from "./generated/templates/ShellBarItemTemplate.lit.js";
-
 /**
  * @public
  */
@@ -40,26 +37,19 @@ const metadata = {
 		count: {
 			type: String,
 		},
-
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		stableDomRef: {
-			type: String,
-		},
 	},
 
 	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBarItem#item-click
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @event sap.ui.webcomponents.fiori.ShellBarItem#click
+		 * @allowPreventDefault
+		 * @param {HTMLElement} targetRef DOM ref of the clicked element
 		 * @public
+		 * @native
 		 */
-		"item-click": {
+		"click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -79,6 +69,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.fiori.ShellBarItem
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-shellbar-item
+ * @implements sap.ui.webcomponents.fiori.IShellBarItem
  * @public
  */
 class ShellBarItem extends UI5Element {
@@ -90,8 +81,8 @@ class ShellBarItem extends UI5Element {
 		return litRender;
 	}
 
-	static get template() {
-		return ShellBarItemTemplate;
+	get stableDomRef() {
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

package/src/ShellBarPopover.hbs

@@ -1,9 +1,10 @@
 <ui5-popover class="ui5-shellbar-menu-popover"
+	hide-arrow
 	placement-type="Bottom"
 	@ui5-before-open={{_menuPopoverBeforeOpen}}
 	@ui5-after-close={{_menuPopoverAfterClose}}
 >
-	<ui5-list separators="None" mode="SingleSelect" @ui5-item-press={{_menuItemPress}}>
+	<ui5-list separators="None" mode="SingleSelect" @ui5-selection-change={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
 			{{ this }}
 		{{/each}}
@@ -13,11 +14,11 @@
 <ui5-popover class="ui5-shellbar-overflow-popover"
 	placement-type="Bottom"
 	horizontal-align="{{popoverHorizontalAlign}}"
-	no-arrow
+	hide-arrow
 	@ui5-before-open={{_overflowPopoverBeforeOpen}}
 	@ui5-after-close={{_overflowPopoverAfterClose}}
 >
-	<ui5-list separators="None" @ui5-item-press="{{_actionList.itemPress}}">
+	<ui5-list separators="None" @ui5-item-click="{{_handleActionListClick}}">
 		{{#each _hiddenIcons}}
 			<ui5-li
 				data-ui5-external-action-item-id="{{this.refItemid}}"

package/src/SideNavigation.hbs

@@ -4,6 +4,7 @@
 	{{#if items.length}}
 		<ui5-tree
 			id="ui5-sn-items-tree"
+			class="ui5-sn-items-tree"
 			mode="None"
 			?_minimal="{{collapsed}}"
 			_toggle-button-end
@@ -14,6 +15,7 @@
 					icon="{{this.item.icon}}"
 					.associatedItem="{{this.item}}"
 					text="{{this.item.text}}"
+					title="{{this.item._tooltip}}"
 					?has-children="{{this.item.items.length}}"
 					?expanded="{{this.item.expanded}}"
 					?selected="{{this.selected}}"
@@ -23,6 +25,7 @@
 							<ui5-tree-item
 								.associatedItem="{{this}}"
 								text="{{this.text}}"
+								title="{{this._tooltip}}"
 								icon="{{this.icon}}"
 								?selected="{{this.selected}}"
 							>
@@ -37,7 +40,7 @@
 	<div class="ui5-sn-spacer"></div>
 
 	{{#if fixedItems.length}}
-	   <div>
+		<div>
 			<div class="ui5-sn-bottom-content-border">
 				<span></span>
 			</div>
@@ -53,6 +56,7 @@
 						icon="{{this.item.icon}}"
 						.associatedItem="{{this.item}}"
 						text="{{this.item.text}}"
+						title="{{this.item._tooltip}}"
 						?has-children="{{this.item.items.length}}"
 						?expanded="{{this.item.expanded}}"
 						?selected="{{this.selected}}"
@@ -62,6 +66,7 @@
 								<ui5-tree-item
 									.associatedItem="{{this}}"
 									text="{{this.text}}"
+									title="{{this._tooltip}}"
 									?selected="{{this.selected}}"
 								>
 								</ui5-tree-item>
@@ -70,12 +75,16 @@
 					</ui5-tree-item>
 				{{/each}}
 			</ui5-tree>
-	   </div>
+		</div>
 	{{/if}}
 
 	{{> footer }}
 </div>
 
-{{#*inline header}}{{/inline}}
+{{#*inline header}}
+	{{#if showHeader}}
+		<slot name="header"></slot>
+	{{/if}}
+{{/inline}}
 
 {{#*inline footer}}{{/inline}}

package/src/SideNavigation.js

@@ -10,6 +10,7 @@ import SideNavigationItemPopoverContentTemplate from "./generated/templates/Side
 
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
+import SideNavigationPopoverCss from "./generated/themes/SideNavigationPopover.css.js";
 
 /**
  * @public
@@ -17,6 +18,7 @@ import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 const metadata = {
 	tag: "ui5-side-navigation",
 	managedSlots: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.
@@ -43,11 +45,27 @@ const metadata = {
 		 * inside the items.
 		 *
 		 * @public
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
+		 * @slot items
 		 */
 		"default": {
 			propertyName: "items",
-			invalidateParent: true,
+			invalidateOnChildChange: true,
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the header of the <code>ui5-side-navigation</code>.
+		 *
+		 * <br><br>
+		 * <b>Note:</b> The header is displayed when the component is expanded - the property <code>collapsed</code> is false;
+		 *
+		 * @public
+		 * @type {HTMLElement[]}
+		 * @since 1.0.0-rc.11
+		 * @slot
+		 */
+		header: {
 			type: HTMLElement,
 		},
 
@@ -58,11 +76,12 @@ const metadata = {
 		 * <b>Note:</b> In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
 		 *
 		 * @public
+		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
 		 * @slot
 		 */
 		fixedItems: {
 			type: HTMLElement,
-			invalidateParent: true,
+			invalidateOnChildChange: true,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
@@ -71,11 +90,14 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.fiori.SideNavigation#selection-change
 		 * @param {HTMLElement} item the clicked item.
+		 * @allowPreventDefault
 		 * @public
 		 */
 		"selection-change": {
-			item: {
-				type: HTMLElement,
+			detail: {
+				item: {
+					type: HTMLElement,
+				},
 			},
 		},
 	},
@@ -87,19 +109,30 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  *
  * The <code>SideNavigation</code> is used as a standard menu in applications.
- * It consists of two containers: the main navigation section (top-aligned) and the secondary section (bottom-aligned).
- * Usually the main navigation section is related to the user’s current work context,
- * whereas the secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).
-
+ * It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).
+ * <ul>
+ * <li>The header is meant for displaying user related information - profile data, avatar, etc.</li>
+ * <li>The main navigation section is related to the user’s current work context</li>
+ * <li>The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on). </li>
+ * </ul>
+ *
  * <h3>Usage</h3>
  *
  * Use the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> components to build your menu.
  * The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.
  * You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
  *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents-fiori/dist/SideNavigation.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/SideNavigation.js";</code>
  * <br>
  * <code>import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code> (for <code>ui5-side-navigation-item</code>)
  * <br>
@@ -119,6 +152,10 @@ class SideNavigation extends UI5Element {
 		return metadata;
 	}
 
+	static get staticAreaStyles() {
+		return [SideNavigationPopoverCss];
+	}
+
 	static get render() {
 		return litRender;
 	}
@@ -162,12 +199,14 @@ class SideNavigation extends UI5Element {
 	}
 
 	_setSelectedItem(item) {
+		if (!this.fireEvent("selection-change", { item }, true)) {
+			return;
+		}
+
 		this._walk(current => {
 			current.selected = false;
 		});
 		item.selected = true;
-
-		this.fireEvent("selection-change", { item });
 	}
 
 	_buildPopoverContent(item) {
@@ -205,6 +244,7 @@ class SideNavigation extends UI5Element {
 		const listItem = event.detail.item;
 		const item = listItem.associatedItem;
 
+		item.fireEvent("click");
 		if (item.selected) {
 			return;
 		}
@@ -219,7 +259,7 @@ class SideNavigation extends UI5Element {
 
 	async openPicker(opener) {
 		const responsivePopover = await this.getPicker();
-		responsivePopover.open(opener);
+		responsivePopover.showAt(opener);
 	}
 
 	async closePicker(opener) {
@@ -227,6 +267,14 @@ class SideNavigation extends UI5Element {
 		responsivePopover.close();
 	}
 
+	get hasHeader() {
+		return !!this.header.length;
+	}
+
+	get showHeader() {
+		return this.hasHeader && !this.collapsed;
+	}
+
 	get _itemsTree() {
 		return this.getDomRef().querySelector("#ui5-sn-items-tree");
 	}

package/src/SideNavigationItem.js

@@ -68,30 +68,33 @@ const metadata = {
 		wholeItemToggleable: {
 			type: Boolean,
 		},
-	},
 
-	events: {
 		/**
-		 * @public
-		 * @event
-		 * @since 1.0.0-rc.9
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
 		 */
-		click: {
-
+		 title: {
+			type: String,
 		},
 	},
 
+	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	},
+
 	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * If you wish to nest menus, you can pass inner menu items to the default slot.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.fiori.ISideNavigationSubItem[]}
 		 * @public
-		 * @slot
+		 * @slot items
 		 */
 		"default": {
 			propertyName: "items",
-			invalidateParent: true,
+			invalidateOnChildChange: true,
 			type: HTMLElement,
 		},
 	},
@@ -107,7 +110,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -116,11 +119,16 @@ const metadata = {
  * @tagname ui5-side-navigation-item
  * @public
  * @since 1.0.0-rc.8
+ * @implements sap.ui.webcomponents.fiori.ISideNavigationItem
  */
 class SideNavigationItem extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get _tooltip() {
+		return this.title || this.text;
+	}
 }
 
 SideNavigationItem.define();

package/src/SideNavigationItemPopoverContent.hbs

@@ -1,20 +1,23 @@
 <ui5-responsive-popover
 	vertical-align="Top"
+	class="ui5-side-navigation-popover"
 >
-    <ui5-list
-	    mode="None"
-        @ui5-item-click="{{handleListItemClick}}"
-    >
-	    <ui5-li
-		    ?selected="{{_popoverContent.mainItemSelected}}"
-		    .associatedItem="{{_popoverContent.mainItem}}"
-	    >{{_popoverContent.mainItem.text}}</ui5-li>
+	<ui5-list
+		mode="None"
+		@ui5-item-click="{{handleListItemClick}}"
+	>
+		<ui5-li
+			title="{{_popoverContent.mainItem._tooltip}}"
+			?selected="{{_popoverContent.mainItemSelected}}"
+			.associatedItem="{{_popoverContent.mainItem}}"
+		>{{_popoverContent.mainItem.text}}</ui5-li>
 
-        {{#each _popoverContent.subItems}}
-            <ui5-li
-	            ?selected="{{this.selected}}"
-                .associatedItem="{{this}}"
-            >{{this.text}}</ui5-li>
-        {{/each}}
-    </ui5-list>
+		{{#each _popoverContent.subItems}}
+			<ui5-li
+				title="{{this._tooltip}}"
+				?selected="{{this.selected}}"
+				.associatedItem="{{this}}"
+			>{{this.text}}</ui5-li>
+		{{/each}}
+	</ui5-list>
 </ui5-responsive-popover>

package/src/SideNavigationSubItem.js

@@ -42,18 +42,21 @@ const metadata = {
 		icon: {
 			type: String,
 		},
-	},
 
-	events: {
 		/**
-		 * @public
-		 * @event
-		 * @since 1.0.0-rc.9
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
 		 */
-		click: {
-
+		title: {
+			type: String,
 		},
 	},
+
+	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
+	},
 };
 
 /**
@@ -65,7 +68,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -74,11 +77,16 @@ const metadata = {
  * @tagname ui5-side-navigation-sub-item
  * @public
  * @since 1.0.0-rc.8
+ * @implements sap.ui.webcomponents.fiori.ISideNavigationSubItem
  */
 class SideNavigationSubItem extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get _tooltip() {
+		return this.title || this.text;
+	}
 }
 
 SideNavigationSubItem.define();

package/src/SortItem.js

@@ -0,0 +1,68 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-sort-item",
+	properties: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines if the component is selected.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		selected: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
+		//
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-sort-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/SortItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.SortItem
+ * @extends UI5Element
+ * @since 1.0.0-rc.16
+ * @tagname ui5-sort-item
+ * @implements sap.ui.webcomponents.fiori.ISortItem
+ * @public
+ */
+class SortItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+SortItem.define();
+
+export default SortItem;

package/src/Timeline.hbs

@@ -1,9 +1,14 @@
-<div class="ui5-timeline-root">
-	<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{ariaLabel}}">
-		{{#each items}}
-			<li class="ui5-timeline-list-item" style="list-style-type: none;">
-				<slot name="{{this._individualSlot}}"></slot>
-			</li>
-		{{/each}}
-	</ul>
+<div class="ui5-timeline-root"
+	@focusin={{_onfocusin}}
+	@keydown={{_onkeydown}}>
+
+	<div class="ui5-timeline-scroll-container">
+		<ul class="ui5-timeline-list" aria-live="polite" aria-label="{{ariaLabel}}">
+			{{#each items}}
+				<li class="ui5-timeline-list-item">
+					<slot name="{{this._individualSlot}}"></slot>
+				</li>
+			{{/each}}
+		</ul>
+	</div>
 </div>