feat(ui5-side-navigation): add navigation groups

packages/fiori/src/SideNavigation.ts

@@ -26,7 +26,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/circle-task-2.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import type SideNavigationItemBase from "./SideNavigationItemBase.js";
+import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
 import SideNavigationItem from "./SideNavigationItem.js";
 import SideNavigationSubItem from "./SideNavigationSubItem.js";
 import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js";
@@ -51,20 +51,20 @@ type SideNavigationPopoverContents = {
 };
 
 type SideNavigationSelectionChangeEventDetail = {
-	item: SideNavigationItemBase;
+	item: SideNavigationSelectableItemBase;
 };
 
 // used for the inner side navigation used in the SideNavigationPopoverTemplate
 type PopupClickEventDetail = {
 	target: {
-		associatedItem: SideNavigationItemBase
+		associatedItem: SideNavigationSelectableItemBase
 	}
 };
 
 // used for the inner side navigation used in the SideNavigationPopoverTemplate
 type NavigationMenuClickEventDetail = {
 	item: {
-		associatedItem: SideNavigationItemBase
+		associatedItem: SideNavigationSelectableItemBase
 	}
 };
 
@@ -128,7 +128,7 @@ type NavigationMenuClickEventDetail = {
 /**
  * Fired when the selection has changed via user interaction
  *
- * @param {SideNavigationItemBase} item the clicked item.
+ * @param {SideNavigationSelectableItemBase} item the clicked item.
  * @allowPreventDefault
  * @public
  */
@@ -416,7 +416,7 @@ class SideNavigation extends UI5Element {
 		return result;
 	}
 
-	focusItem(item: SideNavigationItemBase) {
+	focusItem(item: SideNavigationSelectableItemBase) {
 		if (item.isFixedItem) {
 			this._fixedItemNavigation.setCurrentItem(item);
 		} else {
@@ -527,7 +527,7 @@ class SideNavigation extends UI5Element {
 		});
 	}
 
-	_findFocusedItem(items: Array<SideNavigationItem>) : SideNavigationItemBase | undefined {
+	_findFocusedItem(items: Array<SideNavigationItem>) : SideNavigationSelectableItemBase | undefined {
 		let focusedItem;
 
 		if (this.collapsed) {
@@ -539,8 +539,8 @@ class SideNavigation extends UI5Element {
 		return focusedItem;
 	}
 
-	_getWithNestedItems(items: Array<SideNavigationItem>, expandedOnly = false): Array<SideNavigationItemBase> {
-		let result = new Array<SideNavigationItemBase>();
+	_getWithNestedItems(items: Array<SideNavigationItem>, expandedOnly = false): Array<SideNavigationSelectableItemBase> {
+		let result = new Array<SideNavigationSelectableItemBase>();
 
 		items.forEach(item => {
 			result.push(item);
@@ -553,7 +553,7 @@ class SideNavigation extends UI5Element {
 		return result;
 	}
 
-	_findSelectedItem(items: Array<SideNavigationItem>) : SideNavigationItemBase | undefined {
+	_findSelectedItem(items: Array<SideNavigationItem>) : SideNavigationSelectableItemBase | undefined {
 		let selectedItem;
 
 		if (this.collapsed) {
@@ -565,7 +565,7 @@ class SideNavigation extends UI5Element {
 		return selectedItem;
 	}
 
-	_handleItemClick(e: KeyboardEvent | PointerEvent, item: SideNavigationItemBase) {
+	_handleItemClick(e: KeyboardEvent | PointerEvent, item: SideNavigationSelectableItemBase) {
 		if (item.selected && !this.collapsed) {
 			item.fireEvent("click");
 			return;
@@ -609,7 +609,7 @@ class SideNavigation extends UI5Element {
 		return result;
 	}
 
-	_selectItem(item: SideNavigationItemBase) {
+	_selectItem(item: SideNavigationSelectableItemBase) {
 		if (item.disabled) {
 			return;
 		}

packages/fiori/src/SideNavigationItem.ts

@@ -2,7 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
-import SideNavigationItemBase from "./SideNavigationItemBase.js";
+import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
 import type SideNavigation from "./SideNavigation.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 
@@ -19,13 +19,13 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js";
  * <code>import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
  *
  * @constructor
- * @extends SideNavigationItemBase
+ * @extends SideNavigationSelectableItemBase
  * @abstract
  * @public
  * @since 1.0.0-rc.8
  */
 @customElement("ui5-side-navigation-item")
-class SideNavigationItem extends SideNavigationItemBase {
+class SideNavigationItem extends SideNavigationSelectableItemBase {
 	/**
 	 * Defines if the item is expanded
 	 *

packages/fiori/src/SideNavigationItemBase.ts

@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type SideNavigation from "./SideNavigation.js";
 
@@ -34,63 +33,6 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 	@property()
 	text!: string;
 
-	/**
-	 * Defines the icon of the item.
-	 * <br><br>
-	 *
-	 * The SAP-icons font provides numerous options.
-	 * <br>
-	 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
-	 * @public
-	 * @default ""
-	 */
-	@property()
-	icon!: string;
-
-	/**
-	 * Defines whether the item is selected
-	 *
-	 * @public
-	 * @default false
-	 */
-	@property({ type: Boolean })
-	selected!: boolean;
-
-	/**
-	 * Defines the link target URI. Supports standard hyperlink behavior.
-	 * If a JavaScript action should be triggered,
-	 * this should not be set, but instead an event handler
-	 * for the <code>click</code> event should be registered.
-	 *
-	 * @public
-	 * @default ""
-	 * @since 1.19.0
-	 */
-	@property()
-	href!: string;
-
-	/**
-	 * Defines the component target.
-	 * <br><br>
-	 * <b>Notes:</b>
-	 *
-	 * <ul>
-	 * <li><code>_self</code></li>
-	 * <li><code>_top</code></li>
-	 * <li><code>_blank</code></li>
-	 * <li><code>_parent</code></li>
-	 * <li><code>_search</code></li>
-	 * </ul>
-	 *
-	 * <b>This property must only be used when the <code>href</code> property is set.</b>
-	 *
-	 * @public
-	 * @default ""
-	 * @since 1.19.0
-	 */
-	@property()
-	target!: string;
-
 	/**
 	 * Defines whether the component is disabled.
 	 * A disabled component can't be pressed or
@@ -119,44 +61,20 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 		return this.title || this.text;
 	}
 
-	get _href() {
-		return (!this.disabled && this.href) ? this.href : undefined;
-	}
-
-	get _target() {
-		return (!this.disabled && this.target) ? this.target : undefined;
-	}
-
-	get _selected() {
-		return this.selected;
-	}
-
 	get classesArray() {
 		const classes = [];
 
 		if (this.disabled) {
 			classes.push("ui5-sn-item-disabled");
 		}
 
-		if (this._selected) {
-			classes.push("ui5-sn-item-selected");
-		}
-
 		return classes;
 	}
 
 	get _classes() {
 		return this.classesArray.join(" ");
 	}
 
-	get _ariaCurrent() {
-		if (!this.selected) {
-			return undefined;
-		}
-
-		return "page";
-	}
-
 	get _effectiveTabIndex() {
 		if (this.disabled) {
 			return undefined;
@@ -181,39 +99,9 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 		return this.sideNavigation?.shadowRoot!.querySelector(`#${this._id}`) as HTMLElement;
 	}
 
-	_onkeydown(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			e.preventDefault();
-		}
-
-		if (isEnter(e)) {
-			this._activate(e);
-		}
-	}
-
-	_onkeyup(e: KeyboardEvent) {
-		if (isSpace(e)) {
-			this._activate(e);
-		}
-	}
-
-	_onclick(e: PointerEvent) {
-		this._activate(e);
-	}
-
 	get isFixedItem() {
 		return true;
 	}
-
-	_onfocusin(e: FocusEvent) {
-		e.stopPropagation();
-
-		this.sideNavigation?.focusItem(this);
-	}
-
-	_activate(e: KeyboardEvent | PointerEvent) {
-		this.sideNavigation?._handleItemClick(e, this);
-	}
 }
 
 export default SideNavigationItemBase;