diff --git a/packages/base/src/UI5Element.js b/packages/base/src/UI5Element.js
index 982d5ee544d2..8b3fa47edb9d 100644
--- a/packages/base/src/UI5Element.js
+++ b/packages/base/src/UI5Element.js
@@ -493,6 +493,10 @@ class UI5Element extends HTMLElement {
* @private
*/
_invalidate() {
+ if (this._shouldInvalidateParent) {
+ this.parentNode._invalidate();
+ }
+
if (!this._upToDate) {
// console.log("already invalidated", this, ...arguments);
return;
@@ -502,10 +506,6 @@ class UI5Element extends HTMLElement {
this._upToDate = false;
// console.log("INVAL", this, ...arguments);
RenderScheduler.renderDeferred(this);
-
- if (this._shouldInvalidateParent) {
- this.parentNode._invalidate();
- }
}
}
diff --git a/packages/fiori/bundle.esm.js b/packages/fiori/bundle.esm.js
index 22a617506423..e1258153f5f6 100644
--- a/packages/fiori/bundle.esm.js
+++ b/packages/fiori/bundle.esm.js
@@ -10,6 +10,9 @@ import "./dist/features/CoPilotAnimation.js";
import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js";
import ProductSwitch from "./dist/ProductSwitch.js";
import ProductSwitchItem from "./dist/ProductSwitchItem.js";
+import SideNavigation from "./dist/SideNavigation.js";
+import SideNavigationItem from "./dist/SideNavigationItem.js";
+import SideNavigationSubItem from "./dist/SideNavigationSubItem.js";
import ShellBar from "./dist/ShellBar.js";
import ShellBarItem from "./dist/ShellBarItem.js";
import UploadCollection from "./dist/UploadCollection.js";
diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
new file mode 100644
index 000000000000..369306befcd2
--- /dev/null
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -0,0 +1,80 @@
+
+ {{> header }}
+
+ {{#if items.length}}
+
+ {{#each _items}}
+
+ {{#unless ../collapsed}}
+ {{#each this.item.items}}
+
+
+ {{/each}}
+ {{/unless}}
+
+ {{/each}}
+
+ {{/if}}
+
+
+
+ {{#if fixedItems.length}}
+
+
+
+
+
+ {{#each _fixedItems}}
+
+ {{#unless ../collapsed}}
+ {{#each this.item.items}}
+
+
+ {{/each}}
+ {{/unless}}
+
+ {{/each}}
+
+
+ {{/if}}
+
+ {{> footer }}
+
ui5-side-navigation is expanded or collapsed.
+ *
+ * @public
+ * @type {boolean}
+ * @defaultvalue false
+ */
+ collapsed: {
+ type: Boolean,
+ },
+
+ /**
+ * @private
+ */
+ _popoverContent: {
+ type: Object,
+ },
+ },
+ slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+ /**
+ * Defines the main items of the ui5-side-navigation. Use the ui5-side-navigation-item component
+ * for the top-level items, and the ui5-side-navigation-subitem component for second-level items, nested
+ * inside the items.
+ *
+ * @public
+ * @slot
+ */
+ "default": {
+ propertyName: "items",
+ invalidateParent: true,
+ type: HTMLElement,
+ },
+
+ /**
+ * Defines the fixed items at the bottom of the ui5-side-navigation. Use the ui5-side-navigation-item component
+ * for the fixed items, and optionally the ui5-side-navigation-subitem component to provide second-level items inside them.
+ *
+ * Note: In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
+ *
+ * @public
+ * @slot
+ */
+ fixedItems: {
+ type: HTMLElement,
+ invalidateParent: true,
+ },
+ },
+ events: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+ /**
+ * Fired when the selection has changed via user interaction
+ *
+ * @event sap.ui.webcomponents.fiori.SideNavigation#selection-change
+ * @param {HTMLElement} item the clicked item.
+ * @public
+ */
+ "selection-change": {
+ item: {
+ type: HTMLElement,
+ },
+ },
+ },
+};
+
+/**
+ * @class
+ *
+ *
+ *
+ *
+ * Usage
+ *
+ * ui5-side-navigation is used as a standard menu in applications. In order to add menu items use ui5-side-navigation-items.
+ *
+ * For the ui5-side-navigation
+ * ES6 Module Import
+ *
+ * import @ui5/webcomponents/dist/SideNavigation.js";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.SideNavigation
+ * @extends UI5Element
+ * @tagname ui5-side-navigation
+ * @since 1.0.0-rc.8
+ * @appenddocs SideNavigationItem
+ * @public
+ */
+class SideNavigation extends UI5Element {
+ static get metadata() {
+ return metadata;
+ }
+
+ static get render() {
+ return litRender;
+ }
+
+ static get styles() {
+ return SideNavigationCss;
+ }
+
+ static get template() {
+ return SideNavigationTemplate;
+ }
+
+ static get staticAreaTemplate() {
+ return SideNavigationItemPopoverContentTemplate;
+ }
+
+ static async onDefine() {
+ await Promise.all([
+ Tree.define(),
+ ResponsivePopover.define(),
+ ]);
+ }
+
+ onBeforeRendering() {
+ this._items = this.items.map(item => {
+ return {
+ item,
+ selected: ((item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected),
+ };
+ });
+
+ this._fixedItems = this.fixedItems.map(item => {
+ return {
+ item,
+ selected: ((item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected),
+ };
+ });
+ }
+
+ _setSelectedItem(item) {
+ this._walk(current => {
+ current.selected = false;
+ });
+ item.selected = true;
+
+ this.fireEvent("selection-change", { item });
+ }
+
+ _buildPopoverContent(item) {
+ this._popoverContent = {
+ mainItem: item,
+ mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected),
+ subItems: item.items,
+ };
+ }
+
+ handleTreeItemClick(event) {
+ const treeItem = event.detail.item;
+ const item = treeItem.associatedItem;
+
+ if (item.selected && !this.collapsed) {
+ return;
+ }
+
+ if (this.collapsed && item.items.length) {
+ this._buildPopoverContent(item);
+ const currentTree = this._itemsTree === event.target ? this._itemsTree : this._fixedItemsTree;
+ this.openPicker(currentTree._getListItemForTreeItem(treeItem));
+ } else {
+ this._setSelectedItem(item);
+ }
+ }
+
+ handleListItemClick(event) {
+ const listItem = event.detail.item;
+ const item = listItem.associatedItem;
+
+ if (item.selected) {
+ return;
+ }
+
+ this._setSelectedItem(item);
+ this.closePicker();
+ }
+
+ async getPicker() {
+ return (await this.getStaticAreaItemDomRef()).querySelector("ui5-responsive-popover");
+ }
+
+ async openPicker(opener) {
+ const responsivePopover = await this.getPicker();
+ responsivePopover.open(opener);
+ }
+
+ async closePicker(opener) {
+ const responsivePopover = await this.getPicker();
+ responsivePopover.close();
+ }
+
+ get _itemsTree() {
+ return this.getDomRef().querySelector("#ui5-sn-items-tree");
+ }
+
+ get _fixedItemsTree() {
+ return this.getDomRef().querySelector("#ui5-sn-fixed-items-tree");
+ }
+
+ _walk(callback) {
+ this.items.forEach(current => {
+ callback(current);
+
+ current.items.forEach(currentSubitem => {
+ callback(currentSubitem);
+ });
+ });
+
+ this.fixedItems.forEach(current => {
+ callback(current);
+
+ current.items.forEach(currentSubitem => {
+ callback(currentSubitem);
+ });
+ });
+ }
+}
+
+SideNavigation.define();
+
+export default SideNavigation;
diff --git a/packages/fiori/src/SideNavigationItem.js b/packages/fiori/src/SideNavigationItem.js
new file mode 100644
index 000000000000..2dbc27bbaa66
--- /dev/null
+++ b/packages/fiori/src/SideNavigationItem.js
@@ -0,0 +1,100 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+ tag: "ui5-side-navigation-item",
+ managedSlots: true,
+ properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+ /**
+ * Defines the text of the item.
+ *
+ * @public
+ * @type {string}
+ * @defaultvalue ""
+ */
+ text: {
+ type: String,
+ },
+
+ /**
+ * Defines the icon of the item.
+ *
+ * @public
+ * @type {string}
+ * @defaultvalue ""
+ */
+ icon: {
+ type: String,
+ },
+
+ /**
+ * Defines if the item is expanded
+ *
+ * @public
+ * @type {boolean}
+ * @defaultvalue false
+ */
+ expanded: {
+ type: Boolean,
+ },
+
+ /**
+ * Defines whether the subitem is selected
+ *
+ * @public
+ * @type {boolean}
+ * @defaultvalue false
+ */
+ selected: {
+ type: Boolean,
+ },
+ },
+ 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[]}
+ * @public
+ * @slot
+ */
+ "default": {
+ propertyName: "items",
+ invalidateParent: true,
+ type: HTMLElement,
+ },
+ },
+};
+
+/**
+ * @class
+ *
+ *
+ *
+ *
+ * Usage
+ *
+ * ui5-side-navigation-item is used within ui5-side-navigation only. Via the ui5-side-navigation-item you control the content of the side navigation.
+ * For the ui5-side-navigation-item
+ * ES6 Module Import
+ *
+ * import @ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.SideNavigationItem
+ * @extends UI5Element
+ * @tagname ui5-side-navigation-item
+ * @public
+ * @since 1.0.0-rc.8
+ */
+class SideNavigationItem extends UI5Element {
+ static get metadata() {
+ return metadata;
+ }
+}
+
+SideNavigationItem.define();
+
+export default SideNavigationItem;
diff --git a/packages/fiori/src/SideNavigationItemPopoverContent.hbs b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
new file mode 100644
index 000000000000..73681f97db9f
--- /dev/null
+++ b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
@@ -0,0 +1,20 @@
+
+
+ {{_popoverContent.mainItem.text}}
+
+ {{#each _popoverContent.subItems}}
+ {{this.text}}
+ {{/each}}
+
+
diff --git a/packages/fiori/src/SideNavigationSubItem.js b/packages/fiori/src/SideNavigationSubItem.js
new file mode 100644
index 000000000000..aa27f9a69d57
--- /dev/null
+++ b/packages/fiori/src/SideNavigationSubItem.js
@@ -0,0 +1,64 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+ tag: "ui5-side-navigation-sub-item",
+ properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
+ /**
+ * Defines the text of the item.
+ *
+ * @public
+ * @type {string}
+ * @defaultvalue ""
+ */
+ text: {
+ type: String,
+ },
+
+ /**
+ * Defines whether the subitem is selected
+ *
+ * @public
+ * @type {boolean}
+ * @defaultvalue false
+ */
+ selected: {
+ type: Boolean,
+ },
+ },
+};
+
+/**
+ * @class
+ *
+ *
+ *
+ *
+ * Usage
+ *
+ * The ui5-side-navigation-sub-item is intended to be used inside a ui5-side-navigation-item only.
+ *
+ * For the ui5-side-navigation-sub-item
+ * ES6 Module Import
+ *
+ * import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.SideNavigationSubItem
+ * @extends UI5Element
+ * @tagname ui5-side-navigation-sub-item
+ * @public
+ * @since 1.0.0-rc.8
+ */
+class SideNavigationSubItem extends UI5Element {
+ static get metadata() {
+ return metadata;
+ }
+}
+
+SideNavigationSubItem.define();
+
+export default SideNavigationSubItem;
diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css
new file mode 100644
index 000000000000..66e9173010e2
--- /dev/null
+++ b/packages/fiori/src/themes/SideNavigation.css
@@ -0,0 +1,39 @@
+:host(:not([hidden])) {
+ display: inline-block;
+ width: 15rem;
+ height: 100%;
+ border-right: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
+ transition: width .25s;
+ --_ui5-tree-toggle-box-width: 1rem;
+}
+
+:host([collapsed]) {
+ width: 3rem;
+}
+
+.ui5-sn-bottom-content-border {
+ width: 100%;
+ padding: 0 0.5rem;
+ margin: 0.25rem 0;
+ display: flex;
+ justify-content: center;
+ box-sizing: border-box;
+}
+
+.ui5-sn-bottom-content-border > span {
+ width: 90%;
+ height: .125rem;
+ background: var(--sapList_GroupHeaderBorderColor);
+}
+
+.ui5-sn-root {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: var( --sapList_Background);
+}
+
+.ui5-sn-spacer {
+ flex: auto;
+ min-height: 3rem;
+}
diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html
new file mode 100644
index 000000000000..7414f5f1a7b9
--- /dev/null
+++ b/packages/fiori/test/pages/SideNavigation.html
@@ -0,0 +1,89 @@
+
+
+
+
+
+ Side Navigation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/fiori/test/samples/SideNavigation.sample.html b/packages/fiori/test/samples/SideNavigation.sample.html
new file mode 100644
index 000000000000..eb3904e85b05
--- /dev/null
+++ b/packages/fiori/test/samples/SideNavigation.sample.html
@@ -0,0 +1,77 @@
+
+
+@ui5/webcomponents
+
+<ui5-side-navigation>
+
+
+ Side Navigation in Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <![CDATA[
+<ui5-shellbar
+primary-title="UI5 Web Components"
+secondary-title="The Best Run SAP"
+show-co-pilot
+>
+ <ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
+</ui5-shellbar>
+
+<ui5-side-navigation>
+ <ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
+ <ui5-side-navigation-item text="People" expanded icon="group">
+ <ui5-side-navigation-sub-item text="From My Team" icon="employee-approvals"></ui5-side-navigation-sub-item>
+ <ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
+ </ui5-side-navigation-item>
+ <ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
+ <ui5-side-navigation-item text="Events" icon="calendar">
+ <ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
+ <ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
+ </ui5-side-navigation-item>
+
+ <ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>
+ <ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
+</ui5-side-navigation>
+
+<script>
+ const sideNavigation = document.querySelector("ui5-side-navigation");
+ document.querySelector("#startButton").addEventListener("click", event => sideNavigation.collapsed = !sideNavigation.collapsed);
+</script>
+ ]]>
+
+
+
+
+
diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
new file mode 100644
index 000000000000..b233495b8c85
--- /dev/null
+++ b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -0,0 +1,43 @@
+
+const assert = require("chai").assert;
+
+describe("Component Behavior", () => {
+ browser.url("http://localhost:8081/test-resources/pages/SideNavigation.html");
+
+ describe("Main functionality", () => {
+ it("Tests selection-change event", () => {
+ const input = browser.$("#counter");
+ const sideNavigation = browser.$("ui5-side-navigation");
+ let items = sideNavigation.shadow$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree");
+ const fixedItems = sideNavigation.shadow$$("ui5-tree")[1].shadow$("ui5-list").$$("ui5-li-tree");
+
+ items[0].click();
+ items[3].click();
+
+ assert.strictEqual(input.getProperty("value"), "2", "Event is fired");
+
+ fixedItems[0].click();
+
+ assert.strictEqual(input.getProperty("value"), "3", "Event is fired");
+
+ sideNavigation.setAttribute("collapsed", "true");
+ items = sideNavigation.shadow$("ui5-tree").shadow$("ui5-list").$$("ui5-li-tree");
+
+ items[0].click();
+
+ assert.strictEqual(input.getProperty("value"), "4", "Event is fired");
+
+ items[1].click();
+
+ assert.strictEqual(input.getProperty("value"), "4", "Event is not fired");
+
+ const staticAreaItemClassName = browser.getStaticAreaItemClassName("#sn1");
+ const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ items = popover.$("ui5-list").$$("ui5-li");
+
+ items[1].click();
+
+ assert.strictEqual(input.getProperty("value"), "5", "Event is fired");
+ })
+ });
+});
\ No newline at end of file
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
index f484adfe3828..0a944def6270 100644
--- a/packages/main/src/Tree.hbs
+++ b/packages/main/src/Tree.hbs
@@ -14,6 +14,8 @@
type="Active"
level="{{this.level}}"
icon="{{this.treeItem.icon}}"
+ ?_toggle-button-end="{{../_toggleButtonEnd}}"
+ ?_minimal="{{../_minimal}}"
.treeItem="{{this.treeItem}}"
.expanded="{{this.treeItem.expanded}}"
.selected="{{this.treeItem.selected}}"
diff --git a/packages/main/src/Tree.js b/packages/main/src/Tree.js
index fb068004f1aa..f2c9f5939f68 100644
--- a/packages/main/src/Tree.js
+++ b/packages/main/src/Tree.js
@@ -77,6 +77,26 @@ const metadata = {
type: Object,
multiple: true,
},
+
+ /**
+ * Shows the toggle button at the end, rather than at the beginning of the items
+ *
+ * @protected
+ * @since 1.0.0-rc.8
+ */
+ _toggleButtonEnd: {
+ type: Boolean,
+ },
+
+ /**
+ * Represents the tree in a very minimal state - icons only with no text and no toggle buttons
+ *
+ * @protected
+ * @since 1.0.0-rc.8
+ */
+ _minimal: {
+ type: Boolean,
+ },
},
managedSlots: true,
slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
@@ -318,6 +338,16 @@ class Tree extends UI5Element {
});
}
+ /**
+ * Returns the corresponding list item for a given tree item
+ *
+ * @param item The tree item
+ * @protected
+ */
+ _getListItemForTreeItem(item) {
+ return this.list.items.find(listItem => listItem.treeItem === item);
+ }
+
/**
* Perform Depth-First-Search walk on the tree and run a callback on each node
*
diff --git a/packages/main/src/TreeListItem.hbs b/packages/main/src/TreeListItem.hbs
index 7c6eb29b5148..878dff275cf3 100644
--- a/packages/main/src/TreeListItem.hbs
+++ b/packages/main/src/TreeListItem.hbs
@@ -2,7 +2,7 @@
{{#*inline "listItemPreContent"}}
- {{#if showToggleButton}}
+ {{#if _showToggleButtonBeginning}}