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

packages/fiori/src/SideNavigationGroup.ts

@@ -0,0 +1,81 @@
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import SideNavigationItemBase from "./SideNavigationItemBase.js";
+import SideNavigationItem from "./SideNavigationItem.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-side-navigation-group</code> is intended to be used inside a <code>ui5-side-navigation-group</code> only.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";</code>
+ *
+ * @constructor
+ * @extends SideNavigationItemBase
+ * @public
+ * @abstract
+ * @since 1.0.0-rc.8
+ */
+@customElement("ui5-side-navigation-group")
+class SideNavigationGroup extends SideNavigationItemBase {
+	/**
+	 * Defines if the item is expanded
+	 *
+	 * @public
+	 * @default false
+	 */
+	@property({ type: Boolean })
+	expanded!: boolean;
+
+	/**
+	 * Defines nested items by passing <code>ui5-side-navigation-item</code> to the default slot.
+	 *
+	 * @public
+	 */
+	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+	items!: Array<SideNavigationItem>;
+
+	get isFixedItem() {
+		return this.slot === "fixedItems";
+	}
+
+	_onkeydown(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.preventDefault();
+		}
+
+		if (isEnter(e)) {
+			this._toggle();
+		}
+	}
+
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			this._toggle();
+		}
+	}
+
+	_onclick() {
+		this._toggle();
+	}
+
+	_onfocusin(e: FocusEvent) {
+		e.stopPropagation();
+
+		// this.sideNavigation?.focusItem(this);
+	}
+
+	_toggle() {
+		this.expanded = !this.expanded;
+	}
+}
+
+SideNavigationGroup.define();
+
+export default SideNavigationGroup;

packages/fiori/src/SideNavigationItemBase.ts

@@ -1,16 +1,9 @@
 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 type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type SideNavigation from "./SideNavigation.js";
 
-/**
- * Fired when the component is activated either with a
- * click/tap or by using the Enter or Space key.
- *
- * @public
- */
-@event("click")
+
 
 /**
  * @class

packages/fiori/src/SideNavigationSelectableItemBase.ts

@@ -1,7 +1,17 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import SideNavigationItemBase from "./SideNavigationItemBase.js";
 
+/**
+ * Fired when the component is activated either with a
+ * click/tap or by using the Enter or Space key.
+ *
+ * @public
+ */
+@event("click")
+
 /**
  * @class
  * A class to serve as a foundation
@@ -13,6 +23,7 @@ import SideNavigationItemBase from "./SideNavigationItemBase.js";
  * @public
  * @since 1.19.0
  */
+@customElement()
 class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	/**
 	 * Defines the icon of the item.
@@ -71,10 +82,6 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	@property()
 	target!: string;
 
-	get _tooltip() {
-		return this.title || this.text;
-	}
-
 	get _href() {
 		return (!this.disabled && this.href) ? this.href : undefined;
 	}