@ui5/webcomponents-fiori 0.0.0-7e7d9ea6f → 0.0.0-81513ce21

package/dist/SideNavigation.js

@@ -1,108 +1,30 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SideNavigation_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import Tree from "@ui5/webcomponents/dist/Tree.js";
 import TreeItem from "@ui5/webcomponents/dist/TreeItem.js";
+import SideNavigationItem from "./SideNavigationItem.js";
+import SideNavigationSubItem from "./SideNavigationSubItem.js";
 import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js";
-import SideNavigationItemPopoverContentTemplate from "./generated/templates/SideNavigationItemPopoverContentTemplate.lit.js";
-
+import SideNavigationPopoverTemplate from "./generated/templates/SideNavigationPopoverTemplate.lit.js";
+import { SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT, SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC, SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC, SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC, SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 import SideNavigationPopoverCss from "./generated/themes/SideNavigationPopover.css.js";
-
-/**
- * @public
- */
-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.
-		 *
-		 * @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 <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component
-		 * for the top-level items, and the <code>ui5-side-navigation-sub-item</code> component for second-level items, nested
-		 * inside the items.
-		 *
-		 * @public
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
-		 * @slot items
-		 */
-		"default": {
-			propertyName: "items",
-			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,
-		},
-
-		/**
-		 * Defines the fixed items at the bottom of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component
-		 * for the fixed items, and optionally the <code>ui5-side-navigation-sub-item</code> component to provide second-level items inside them.
-		 *
-		 * <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,
-			invalidateOnChildChange: 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.
-		 * @allowPreventDefault
-		 * @public
-		 */
-		"selection-change": {
-			detail: {
-				item: {
-					type: HTMLElement,
-				},
-			},
-		},
-	},
-};
-
 /**
  * @class
  *
@@ -140,168 +62,207 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigation
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigation
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation
  * @since 1.0.0-rc.8
- * @appenddocs SideNavigationItem SideNavigationSubItem
+ * @appenddocs sap.ui.webc.fiori.SideNavigationItem sap.ui.webc.fiori.SideNavigationSubItem
  * @public
  */
-class SideNavigation extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get staticAreaStyles() {
-		return [SideNavigationPopoverCss];
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return SideNavigationCss;
-	}
-
-	static get template() {
-		return SideNavigationTemplate;
-	}
-
-	static get staticAreaTemplate() {
-		return SideNavigationItemPopoverContentTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			List,
-			StandardListItem,
-			Tree,
-			TreeItem,
-			ResponsivePopover,
-		];
-	}
-
-	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) {
-		if (!this.fireEvent("selection-change", { item }, true)) {
-			return;
-		}
-
-		this._walk(current => {
-			current.selected = false;
-		});
-		item.selected = true;
-	}
-
-	_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.wholeItemToggleable) {
-			item.fireEvent("click");
-		} else {
-			item.expanded = !item.expanded;
-		}
-
-		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;
-
-		item.fireEvent("click");
-		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.showAt(opener);
-	}
-
-	async closePicker(opener) {
-		const responsivePopover = await this.getPicker();
-		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");
-	}
-
-	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);
-			});
-		});
-	}
-}
-
+let SideNavigation = SideNavigation_1 = class SideNavigation extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._createTreeItem = (item) => {
+            return {
+                item,
+                selected: (item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected,
+            };
+        };
+    }
+    get _items() {
+        return this.items.map(this._createTreeItem);
+    }
+    get _fixedItems() {
+        return this.fixedItems.map(this._createTreeItem);
+    }
+    _setSelectedItem(item) {
+        if (!this.fireEvent("selection-change", { item }, true)) {
+            return;
+        }
+        this._walk(current => {
+            current.selected = false;
+        });
+        item.selected = true;
+    }
+    _buildPopoverContent(item) {
+        this._popoverContents = {
+            mainItem: item,
+            mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected),
+            // add one as the first item is the main item
+            selectedSubItemIndex: item.items.findIndex(subItem => subItem.selected) + 1,
+            subItems: item.items,
+        };
+    }
+    async _onAfterOpen() {
+        // as the tree/list inside the popover is never destroyed,
+        // item navigation index should be managed, because items are
+        // dynamically recreated and tabIndexes are not updated
+        const tree = await this.getPickerTree();
+        const index = this._popoverContents.selectedSubItemIndex;
+        tree.focusItemByIndex(index);
+    }
+    get accSideNavigationPopoverHiddenText() {
+        return SideNavigation_1.i18nBundle.getText(SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT);
+    }
+    get ariaRoleDescNavigationList() {
+        let key = SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC;
+        if (this.collapsed) {
+            key = SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC;
+        }
+        return SideNavigation_1.i18nBundle.getText(key);
+    }
+    get ariaRoleDescNavigationListItem() {
+        let key = SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC;
+        if (this.collapsed) {
+            key = SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC;
+        }
+        return SideNavigation_1.i18nBundle.getText(key);
+    }
+    handleTreeItemClick(e) {
+        const treeItem = e.detail.item;
+        const item = treeItem.associatedItem;
+        if (item instanceof SideNavigationItem && !item.wholeItemToggleable) {
+            item.fireEvent("click");
+        }
+        else if (item instanceof SideNavigationSubItem) {
+            item.fireEvent("click");
+        }
+        else {
+            item.expanded = !item.expanded;
+        }
+        if (item.selected && !this.collapsed) {
+            return;
+        }
+        if (this.collapsed && item instanceof SideNavigationItem && item.items.length) {
+            this._buildPopoverContent(item);
+            let tree = this._itemsTree;
+            if (tree !== e.target) {
+                tree = this._fixedItemsTree;
+            }
+            this.openPicker(tree._getListItemForTreeItem(treeItem));
+        }
+        else if (!item.selected) {
+            this._setSelectedItem(item);
+        }
+    }
+    handleInnerSelectionChange(e) {
+        const item = e.detail.item;
+        const { associatedItem } = item;
+        associatedItem.fireEvent("click");
+        if (associatedItem.selected) {
+            return;
+        }
+        this._setSelectedItem(associatedItem);
+        this.closePicker();
+    }
+    async getPicker() {
+        return (await this.getStaticAreaItemDomRef()).querySelector("[ui5-responsive-popover]");
+    }
+    async openPicker(opener) {
+        const responsivePopover = await this.getPicker();
+        responsivePopover.showAt(opener);
+    }
+    async closePicker() {
+        const responsivePopover = await this.getPicker();
+        responsivePopover.close();
+    }
+    async getPickerTree() {
+        const picker = await this.getPicker();
+        const sideNav = picker.querySelector("[ui5-side-navigation]");
+        return sideNav._itemsTree;
+    }
+    get hasHeader() {
+        return !!this.header.length;
+    }
+    get showHeader() {
+        return this.hasHeader && !this.collapsed;
+    }
+    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);
+            });
+        });
+    }
+    static async onDefine() {
+        [SideNavigation_1.i18nBundle] = await Promise.all([
+            getI18nBundle("@ui5/webcomponents-fiori"),
+            super.onDefine(),
+        ]);
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], SideNavigation.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Object })
+], SideNavigation.prototype, "_popoverContents", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+], SideNavigation.prototype, "items", void 0);
+__decorate([
+    slot()
+], SideNavigation.prototype, "header", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], SideNavigation.prototype, "fixedItems", void 0);
+SideNavigation = SideNavigation_1 = __decorate([
+    customElement({
+        tag: "ui5-side-navigation",
+        fastNavigation: true,
+        renderer: litRender,
+        template: SideNavigationTemplate,
+        staticAreaTemplate: SideNavigationPopoverTemplate,
+        styles: SideNavigationCss,
+        staticAreaStyles: SideNavigationPopoverCss,
+        dependencies: [
+            List,
+            StandardListItem,
+            Tree,
+            TreeItem,
+            ResponsivePopover,
+            SideNavigationItem,
+            SideNavigationSubItem,
+        ],
+    })
+    /**
+     * Fired when the selection has changed via user interaction
+     *
+     * @event sap.ui.webc.fiori.SideNavigation#selection-change
+     * @param {sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem} item the clicked item.
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("selection-change", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+], SideNavigation);
 SideNavigation.define();
-
 export default SideNavigation;
+//# sourceMappingURL=SideNavigation.js.map

package/dist/SideNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../src/SideNavigation.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,iBAAiB,MAAM,8CAA8C,CAAC;AAC7E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAC3E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAE3D,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,sBAAsB,MAAM,qDAAqD,CAAC;AACzF,OAAO,6BAA6B,MAAM,4DAA4D,CAAC;AACvG,OAAO,EACN,mCAAmC,EACnC,6CAA6C,EAC7C,mDAAmD,EACnD,mCAAmC,EACnC,yCAAyC,GACzC,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,iBAAiB,MAAM,0CAA0C,CAAC;AACzE,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAyBvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAiCH,IAAM,cAAc,sBAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAsEC,oBAAe,GAAG,CAAC,IAAwB,EAAmD,EAAE;YAC/F,OAAO;gBACN,IAAI;gBACJ,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,QAAQ;aAC3F,CAAC;QACH,CAAC,CAAA;IA6JF,CAAC;IA1KA,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC7C,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAClD,CAAC;IASD,gBAAgB,CAAC,IAAyB;QACzC,IAAI,CAAC,IAAI,CAAC,SAAS,CAA2C,kBAAkB,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,EAAE;YAClG,OAAO;SACP;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YACpB,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,oBAAoB,CAAC,IAAwB;QAC5C,IAAI,CAAC,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;YAChF,6CAA6C;YAC7C,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC;YAC3E,QAAQ,EAAE,IAAI,CAAC,KAAK;SACpB,CAAC;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QACjB,0DAA0D;QAC1D,6DAA6D;QAC7D,uDAAuD;QACvD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;QACxC,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,kCAAkC;QACrC,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC/E,CAAC;IAED,IAAI,0BAA0B;QAC7B,IAAI,GAAG,GAAG,mCAAmC,CAAC;QAC9C,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,GAAG,GAAG,6CAA6C,CAAC;SACpD;QAED,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,8BAA8B;QACjC,IAAI,GAAG,GAAG,yCAAyC,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS,EAAE;YACnB,GAAG,GAAG,mDAAmD,CAAC;SAC1D;QAED,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED,mBAAmB,CAAC,CAAyC;QAC5D,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC;QAErC,IAAI,IAAI,YAAY,kBAAkB,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YACpE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SACxB;aAAM,IAAI,IAAI,YAAY,qBAAqB,EAAE;YACjD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;SACxB;aAAM;YACN,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QAED,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACrC,OAAO;SACP;QAED,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,YAAY,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAC9E,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;YAEhC,IAAI,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;YAC3B,IAAI,IAAI,KAAK,CAAC,CAAC,MAAc,EAAE;gBAC9B,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC;aAC5B;YAED,IAAI,CAAC,UAAU,CAAC,IAAK,CAAC,uBAAuB,CAAC,QAAQ,CAAE,CAAC,CAAC;SAC1D;aAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;SAC5B;IACF,CAAC;IAED,0BAA0B,CAAC,CAA6D;QACvF,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAEhC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAClC,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC5B,OAAO;SACP;QAED,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,KAAK,CAAC,SAAS;QACd,OAAO,CAAC,MAAM,IAAI,CAAC,uBAAuB,EAAE,CAAE,CAAC,aAAa,CAAoB,0BAA0B,CAAE,CAAC;IAC9G,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,MAAmB;QACnC,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,iBAAiB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,WAAW;QAChB,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,iBAAiB,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,aAAa;QAClB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;QACtC,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAiB,uBAAuB,CAAE,CAAC;QAC/E,OAAO,OAAO,CAAC,UAAW,CAAC;IAC5B,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAC7B,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAC1C,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAO,oBAAoB,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAO,0BAA0B,CAAC,CAAC;IAC1E,CAAC;IAED,KAAK,CAAC,QAAgD;QACrD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC5B,QAAQ,CAAC,OAAO,CAAC,CAAC;YAElB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;gBACtC,QAAQ,CAAC,cAAc,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACjC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAElB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE;gBACtC,QAAQ,CAAC,cAAc,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,CAAC,gBAAc,CAAC,UAAU,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAC/C,aAAa,CAAC,0BAA0B,CAAC;YACzC,KAAK,CAAC,QAAQ,EAAE;SAChB,CAAC,CAAC;IACJ,CAAC;CACD,CAAA;AA9NA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACR;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACsB;AAajD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAC1C;AAelC;IADC,IAAI,EAAE;8CACqB;AAc5B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;kDACpB;AA1DlC,cAAc;IA/BnB,aAAa,CAAC;QACd,GAAG,EAAE,qBAAqB;QAC1B,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,sBAAsB;QAChC,kBAAkB,EAAE,6BAA6B;QACjD,MAAM,EAAE,iBAAiB;QACzB,gBAAgB,EAAE,wBAAwB;QAC1C,YAAY,EAAE;YACb,IAAI;YACJ,gBAAgB;YAChB,IAAI;YACJ,QAAQ;YACR,iBAAiB;YACjB,kBAAkB;YAClB,qBAAqB;SACrB;KACD,CAAC;IACF;;;;;;;OAOG;;IACF,KAAK,CAAC,kBAAkB,EAAE;QAC1B,MAAM,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC3B;KACD,CAAC;GACI,cAAc,CAwOnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport StandardListItem from \"@ui5/webcomponents/dist/StandardListItem.js\";\nimport Tree from \"@ui5/webcomponents/dist/Tree.js\";\nimport TreeItem from \"@ui5/webcomponents/dist/TreeItem.js\";\nimport type { TreeItemClickEventDetail } from \"@ui5/webcomponents/dist/Tree.js\";\nimport SideNavigationItem from \"./SideNavigationItem.js\";\nimport SideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport SideNavigationTemplate from \"./generated/templates/SideNavigationTemplate.lit.js\";\nimport SideNavigationPopoverTemplate from \"./generated/templates/SideNavigationPopoverTemplate.lit.js\";\nimport {\n\tSIDE_NAVIGATION_POPOVER_HIDDEN_TEXT,\n\tSIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC,\n\tSIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC,\n\tSIDE_NAVIGATION_LIST_ARIA_ROLE_DESC,\n\tSIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport SideNavigationCss from \"./generated/themes/SideNavigation.css.js\";\nimport SideNavigationPopoverCss from \"./generated/themes/SideNavigationPopover.css.js\";\n\ntype SideNavigationPopoverContents = {\n\tmainItem: SideNavigationItem,\n\tmainItemSelected: boolean,\n\tselectedSubItemIndex: number,\n\tsubItems: Array<SideNavigationSubItem>,\n};\n\ntype TSideNavigationItem = SideNavigationItem | SideNavigationSubItem;\n\ntype SideNavigationSelectionChangeEventDetail = {\n\titem: TSideNavigationItem;\n};\n\ntype ItemHasAssociatedItemField = {\n\titem: {\n\t\tassociatedItem: TSideNavigationItem\n\t}\n};\n\n// used for the inner side navigation used in the SideNavigationPopoverTemplate\ntype InnerSideNavigationSelectionChangeEventDetail = SideNavigationSelectionChangeEventDetail & ItemHasAssociatedItemField;\ntype InnerTreeClickEventDetail = TreeItemClickEventDetail & ItemHasAssociatedItemField;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>SideNavigation</code> is used as a standard menu in applications.\n * It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n * <ul>\n * <li>The header is meant for displaying user related information - profile data, avatar, etc.</li>\n * <li>The main navigation section is related to the user’s current work context</li>\n * <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>\n * </ul>\n *\n * <h3>Usage</h3>\n *\n * Use the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> components to build your menu.\n * 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.\n * 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.\n *\n * <h3>Keyboard Handling</h3>\n *\n * <h4>Fast Navigation</h4>\n * 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>.\n * In order to use this functionality, you need to import the following module:\n * <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\n * <br><br>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code> (for <code>ui5-side-navigation-item</code>)\n * <br>\n * <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code> (for <code>ui5-side-navigation-sub-item</code>)\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.fiori.SideNavigation\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-side-navigation\n * @since 1.0.0-rc.8\n * @appenddocs sap.ui.webc.fiori.SideNavigationItem sap.ui.webc.fiori.SideNavigationSubItem\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-side-navigation\",\n\tfastNavigation: true,\n\trenderer: litRender,\n\ttemplate: SideNavigationTemplate,\n\tstaticAreaTemplate: SideNavigationPopoverTemplate,\n\tstyles: SideNavigationCss,\n\tstaticAreaStyles: SideNavigationPopoverCss,\n\tdependencies: [\n\t\tList,\n\t\tStandardListItem,\n\t\tTree,\n\t\tTreeItem,\n\t\tResponsivePopover,\n\t\tSideNavigationItem,\n\t\tSideNavigationSubItem,\n\t],\n})\n/**\n * Fired when the selection has changed via user interaction\n *\n * @event sap.ui.webc.fiori.SideNavigation#selection-change\n * @param {sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem} item the clicked item.\n * @allowPreventDefault\n * @public\n */\n@event(\"selection-change\", {\n\tdetail: {\n\t\titem: { type: HTMLElement },\n\t},\n})\nclass SideNavigation extends UI5Element {\n\t/**\n\t * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.\n\t *\n\t * @public\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.fiori.SideNavigation.prototype.collapsed\n\t */\n\t@property({ type: Boolean })\n\tcollapsed!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_popoverContents!: SideNavigationPopoverContents;\n\n\t/**\n\t * Defines the main items of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component\n\t * for the top-level items, and the <code>ui5-side-navigation-sub-item</code> component for second-level items, nested\n\t * inside the items.\n\t *\n\t * @public\n\t * @type {sap.ui.webc.fiori.ISideNavigationItem[]}\n\t * @slot items\n\t * @name sap.ui.webc.fiori.SideNavigation.prototype.default\n\t */\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n\titems!: Array<SideNavigationItem>;\n\n\t/**\n\t * Defines the header of the <code>ui5-side-navigation</code>.\n\t *\n\t * <br><br>\n\t * <b>Note:</b> The header is displayed when the component is expanded - the property <code>collapsed</code> is false;\n\t *\n\t * @public\n\t * @type {HTMLElement[]}\n\t * @since 1.0.0-rc.11\n\t * @slot header\n\t * @name sap.ui.webc.fiori.SideNavigation.prototype.header\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the fixed items at the bottom of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component\n\t * for the fixed items, and optionally the <code>ui5-side-navigation-sub-item</code> component to provide second-level items inside them.\n\t *\n\t * <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)\n\t *\n\t * @public\n\t * @type {sap.ui.webc.fiori.ISideNavigationItem[]}\n\t * @slot fixedItems\n\t * @name sap.ui.webc.fiori.SideNavigation.prototype.fixedItems\n\t */\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true })\n\tfixedItems!: Array<SideNavigationItem>;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tget _items() {\n\t\treturn this.items.map(this._createTreeItem);\n\t}\n\n\tget _fixedItems() {\n\t\treturn this.fixedItems.map(this._createTreeItem);\n\t}\n\n\t_createTreeItem = (item: SideNavigationItem): { item: SideNavigationItem, selected: boolean } => {\n\t\treturn {\n\t\t\titem,\n\t\t\tselected: (item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected,\n\t\t};\n\t}\n\n\t_setSelectedItem(item: TSideNavigationItem) {\n\t\tif (!this.fireEvent<SideNavigationSelectionChangeEventDetail>(\"selection-change\", { item }, true)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._walk(current => {\n\t\t\tcurrent.selected = false;\n\t\t});\n\t\titem.selected = true;\n\t}\n\n\t_buildPopoverContent(item: SideNavigationItem) {\n\t\tthis._popoverContents = {\n\t\t\tmainItem: item,\n\t\t\tmainItemSelected: item.selected && !item.items.some(subItem => subItem.selected),\n\t\t\t// add one as the first item is the main item\n\t\t\tselectedSubItemIndex: item.items.findIndex(subItem => subItem.selected) + 1,\n\t\t\tsubItems: item.items,\n\t\t};\n\t}\n\n\tasync _onAfterOpen() {\n\t\t// as the tree/list inside the popover is never destroyed,\n\t\t// item navigation index should be managed, because items are\n\t\t// dynamically recreated and tabIndexes are not updated\n\t\tconst tree = await this.getPickerTree();\n\t\tconst index = this._popoverContents.selectedSubItemIndex;\n\t\ttree.focusItemByIndex(index);\n\t}\n\n\tget accSideNavigationPopoverHiddenText() {\n\t\treturn SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT);\n\t}\n\n\tget ariaRoleDescNavigationList() {\n\t\tlet key = SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC;\n\t\tif (this.collapsed) {\n\t\t\tkey = SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC;\n\t\t}\n\n\t\treturn SideNavigation.i18nBundle.getText(key);\n\t}\n\n\tget ariaRoleDescNavigationListItem() {\n\t\tlet key = SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC;\n\t\tif (this.collapsed) {\n\t\t\tkey = SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC;\n\t\t}\n\n\t\treturn SideNavigation.i18nBundle.getText(key);\n\t}\n\n\thandleTreeItemClick(e: CustomEvent<InnerTreeClickEventDetail>) {\n\t\tconst treeItem = e.detail.item;\n\t\tconst item = treeItem.associatedItem;\n\n\t\tif (item instanceof SideNavigationItem && !item.wholeItemToggleable) {\n\t\t\titem.fireEvent(\"click\");\n\t\t} else if (item instanceof SideNavigationSubItem) {\n\t\t\titem.fireEvent(\"click\");\n\t\t} else {\n\t\t\titem.expanded = !item.expanded;\n\t\t}\n\n\t\tif (item.selected && !this.collapsed) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.collapsed && item instanceof SideNavigationItem && item.items.length) {\n\t\t\tthis._buildPopoverContent(item);\n\n\t\t\tlet tree = this._itemsTree;\n\t\t\tif (tree !== e.target as Tree) {\n\t\t\t\ttree = this._fixedItemsTree;\n\t\t\t}\n\n\t\t\tthis.openPicker(tree!._getListItemForTreeItem(treeItem)!);\n\t\t} else if (!item.selected) {\n\t\t\tthis._setSelectedItem(item);\n\t\t}\n\t}\n\n\thandleInnerSelectionChange(e: CustomEvent<InnerSideNavigationSelectionChangeEventDetail>) {\n\t\tconst item = e.detail.item;\n\t\tconst { associatedItem } = item;\n\n\t\tassociatedItem.fireEvent(\"click\");\n\t\tif (associatedItem.selected) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._setSelectedItem(associatedItem);\n\t\tthis.closePicker();\n\t}\n\n\tasync getPicker() {\n\t\treturn (await this.getStaticAreaItemDomRef())!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\tasync openPicker(opener: HTMLElement) {\n\t\tconst responsivePopover = await this.getPicker();\n\t\tresponsivePopover.showAt(opener);\n\t}\n\n\tasync closePicker() {\n\t\tconst responsivePopover = await this.getPicker();\n\t\tresponsivePopover.close();\n\t}\n\n\tasync getPickerTree() {\n\t\tconst picker = await this.getPicker();\n\t\tconst sideNav = picker.querySelector<SideNavigation>(\"[ui5-side-navigation]\")!;\n\t\treturn sideNav._itemsTree!;\n\t}\n\n\tget hasHeader() {\n\t\treturn !!this.header.length;\n\t}\n\n\tget showHeader() {\n\t\treturn this.hasHeader && !this.collapsed;\n\t}\n\n\tget _itemsTree() {\n\t\treturn this.getDomRef()!.querySelector<Tree>(\"#ui5-sn-items-tree\");\n\t}\n\n\tget _fixedItemsTree() {\n\t\treturn this.getDomRef()!.querySelector<Tree>(\"#ui5-sn-fixed-items-tree\");\n\t}\n\n\t_walk(callback: (current: TSideNavigationItem) => void) {\n\t\tthis.items.forEach(current => {\n\t\t\tcallback(current);\n\n\t\t\tcurrent.items.forEach(currentSubitem => {\n\t\t\t\tcallback(currentSubitem);\n\t\t\t});\n\t\t});\n\n\t\tthis.fixedItems.forEach(current => {\n\t\t\tcallback(current);\n\n\t\t\tcurrent.items.forEach(currentSubitem => {\n\t\t\t\tcallback(currentSubitem);\n\t\t\t});\n\t\t});\n\t}\n\n\tstatic async onDefine() {\n\t\t[SideNavigation.i18nBundle] = await Promise.all([\n\t\t\tgetI18nBundle(\"@ui5/webcomponents-fiori\"),\n\t\t\tsuper.onDefine(),\n\t\t]);\n\t}\n}\n\nSideNavigation.define();\n\nexport default SideNavigation;\n\nexport type {\n\tSideNavigationSelectionChangeEventDetail,\n};\n"]}

package/dist/SideNavigationItem.d.ts

@@ -0,0 +1,110 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
+import type SideNavigationSubItem from "./SideNavigationSubItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-side-navigation-item</code> is used within <code>ui5-side-navigation</code> only.
+ * Via the <code>ui5-side-navigation-item</code> you control the content of the <code>SideNavigation</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.fiori.SideNavigationItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @tagname ui5-side-navigation-item
+ * @public
+ * @implements sap.ui.webc.fiori.ISideNavigationItem
+ * @since 1.0.0-rc.8
+ */
+declare class SideNavigationItem extends UI5Element {
+    /**
+     * Defines the text of the item.
+     *
+     * @public
+     * @type {string}
+     * @defaultvalue ""
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.text
+     */
+    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
+     * @type {string}
+     * @defaultvalue ""
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.icon
+     */
+    icon: string;
+    /**
+     * Defines if the item is expanded
+     *
+     * @public
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.expanded
+     */
+    expanded: boolean;
+    /**
+     * Defines whether the subitem is selected
+     *
+     * @public
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.selected
+     */
+    selected: boolean;
+    /**
+     * Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present).
+     * If set to true, pressing the whole item will toggle the sub items, and it won't fire the <code>click</code> event.
+     * By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.
+     *
+     * @public
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.wholeItemToggleable
+     * @since 1.0.0-rc.11
+     */
+    wholeItemToggleable: boolean;
+    /**
+     * Defines the tooltip of the component.
+     * @type {string}
+     * @defaultvalue ""
+     * @private
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.title
+     * @since 1.0.0-rc.16
+     */
+    title: string;
+    /**
+     * Defines if the item should be collapsible or not.
+     * It is true, for example, for the items inside the Popover of the Side Navigation
+     * @private
+     * @type {boolean}
+     * @defaultvalue false
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype._fixed
+     * @since 1.10.0
+     */
+    _fixed: boolean;
+    /**
+     * Defines nested items by passing <code>ui5-side-navigation-sub-item</code> to the default slot.
+     *
+     * @type {sap.ui.webc.fiori.ISideNavigationSubItem[]}
+     * @public
+     * @slot items
+     * @name sap.ui.webc.fiori.SideNavigationItem.prototype.default
+     */
+    items: Array<SideNavigationSubItem>;
+    get _tooltip(): string;
+    get _ariaHasPopup(): HasPopup.Tree | undefined;
+}
+export default SideNavigationItem;