@openui5/sap.tnt 1.115.1 → 1.116.0

package/.reuse/dep5

@@ -457,11 +457,6 @@ Comment: these files belong to: UI5 Web Components
 
 # Outside of Libraries:
 
-Files: src/testsuite-utils/src/main/resources/META-INF/less/less.js
-Copyright: 2009-2014, Alexis Sellier <self@cloudhead.net>
-License: Apache-2.0
-Comment: these files belong to: LESS
-
 Files: lib/jsdoc/ui5/plugin.js
 Copyright:
     2009-2023 SAP SE or an SAP affiliate company and OpenUI5 contributors

package/THIRDPARTY.txt

@@ -460,19 +460,13 @@ Contained in: src/sap.ui.webc.main/src/sap/ui/webc/main/thirdparty/*.*
 
 Outside of Libraries:
 
-Component: LESS, version: 1.6.3
-Copyright: 2009-2014, Alexis Sellier <self@cloudhead.net>
-License: Apache-2.0
-License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
-Contained in: src/testsuite-utils/src/main/resources/META-INF/less/less.js
-
 Component: JSDoc 3, version: 3.6.7
 Copyright: 2011-present Michael Mathews micmath@gmail.com and the contributors to JSDoc
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.3.0
+Component: SAP Theming Base Content, version: 11.4.2
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.tnt",
-  "version": "1.115.1",
+  "version": "1.116.0",
   "description": "OpenUI5 UI Library sap.tnt",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.115.1",
-    "@openui5/sap.ui.core": "1.115.1"
+    "@openui5/sap.m": "1.116.0",
+    "@openui5/sap.ui.core": "1.116.0"
   }
 }

package/src/sap/tnt/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.115.1</version>
+  <version>1.116.0</version>
 
   <documentation>SAPUI5 library with responsive controls.</documentation>
 

package/src/sap/tnt/InfoLabel.js

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.115.1
+	 * @version 1.116.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/tnt/NavigationList.js

@@ -8,23 +8,35 @@
 sap.ui.define([
 	"sap/ui/thirdparty/jquery",
 	'./library',
+	'sap/ui/core/Core',
 	'sap/ui/core/Element',
 	'sap/ui/core/Control',
+	'sap/ui/core/ResizeHandler',
+	'sap/ui/core/Popup',
 	'sap/m/Popover',
 	'sap/ui/core/delegate/ItemNavigation',
 	'sap/ui/core/InvisibleText',
+	"./NavigationListItem",
 	"./NavigationListRenderer",
+	"sap/m/Menu",
+	"sap/m/MenuItem",
 	"sap/base/Log"
 ],
 	function(
 		jQuery,
 		library,
+		Core,
 		Element,
 		Control,
+		ResizeHandler,
+		Popup,
 		Popover,
 		ItemNavigation,
 		InvisibleText,
+		NavigationListItem,
 		NavigationListRenderer,
+		Menu,
+		MenuItem,
 		Log
 	) {
 		"use strict";
@@ -41,7 +53,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.115.1
+		 * @version 1.116.0
 		 *
 		 * @constructor
 		 * @public
@@ -73,7 +85,12 @@ sap.ui.define([
 					/**
 					 * The items displayed in the list.
 					 */
-					items: {type: "sap.tnt.NavigationListItem", multiple: true, singularName: "item"}
+					items: {type: "sap.tnt.NavigationListItem", multiple: true, singularName: "item"},
+
+					/**
+					 * The overflow item.
+					 */
+					_overflowItem: {type: "sap.tnt.NavigationListItem", multiple: false, visibility: "hidden"}
 				},
 				associations: {
 					/**
@@ -132,6 +149,7 @@ sap.ui.define([
 		 * Called before the control is rendered.
 		 */
 		NavigationList.prototype.onBeforeRendering = function () {
+			this._deregisterResizeHandler();
 
 			// make sure the initial selected item (if any) is correct
 			var selectedKey = this.getSelectedKey();
@@ -144,6 +162,198 @@ sap.ui.define([
 		NavigationList.prototype.onAfterRendering = function () {
 			this._itemNavigation.setRootDomRef(this.getDomRef());
 			this._itemNavigation.setItemDomRefs(this._getDomRefs());
+
+			if (this.getExpanded()) {
+				return;
+			}
+
+			// clear the vertical scroll when collapsed
+			this.getDomRef().scrollTop = 0;
+			this._resizeListenerId = ResizeHandler.register(this.getDomRef().parentNode, this._resize.bind(this));
+
+			if (Core.isThemeApplied()) {
+				this._updateOverflowItems();
+			} else {
+				Core.attachThemeChanged(this._handleThemeLoad, this);
+			}
+		};
+
+		NavigationList.prototype._deregisterResizeHandler = function () {
+			if (this._resizeListenerId) {
+				ResizeHandler.deregister(this._resizeListenerId);
+				this._resizeListenerId = null;
+			}
+		};
+
+		NavigationList.prototype._handleThemeLoad = function () {
+			this._updateOverflowItems();
+			Core.detachThemeChanged(this._handleThemeLoad, this);
+		};
+
+		NavigationList.prototype._resize = function () {
+			this._updateOverflowItems();
+		};
+
+		NavigationList.prototype._updateOverflowItems = function () {
+			var domRef = this.getDomRef(),
+				computedStyle,
+				items,
+				overflowItem,
+				selectedItem,
+				listHeight,
+				itemsHeight = 0;
+
+			if (this.getExpanded() || !domRef) {
+				return;
+			}
+
+			items = domRef.querySelectorAll("li:not(.sapTnTNavLIOverflow)");
+			overflowItem = domRef.querySelector(".sapTnTNavLIOverflow");
+
+			if (!overflowItem) {
+				return;
+			}
+
+			overflowItem.classList.add("sapTnTNavLIHiddenItem");
+
+			items.forEach(function (item) {
+				item.classList.remove("sapTnTNavLIHiddenItem");
+				itemsHeight += item.offsetHeight;
+			});
+
+			computedStyle = window.getComputedStyle(domRef);
+			listHeight = domRef.offsetHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
+
+			if (listHeight >= itemsHeight) {
+				return;
+			}
+
+			overflowItem.classList.remove("sapTnTNavLIHiddenItem");
+			itemsHeight = overflowItem.offsetHeight;
+
+			selectedItem = domRef.querySelector(".sapTntNavLIItemSelected");
+			if (selectedItem) {
+				selectedItem = selectedItem.parentNode;
+				itemsHeight += selectedItem.offsetHeight;
+				computedStyle = window.getComputedStyle(selectedItem);
+				itemsHeight += parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+			}
+
+			items.forEach(function (item) {
+				if (item === selectedItem) {
+					return;
+				}
+
+				itemsHeight += item.offsetHeight;
+				computedStyle = window.getComputedStyle(item);
+				itemsHeight += parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+
+				if (itemsHeight >= listHeight) {
+					item.classList.add("sapTnTNavLIHiddenItem");
+				}
+			});
+		};
+
+		NavigationList.prototype._getOverflowItem = function () {
+			var overflowItem = this.getAggregation("_overflowItem");
+			if (!overflowItem) {
+				overflowItem = new NavigationListItem({
+					text: Core.getLibraryResourceBundle("sap.tnt").getText("NAVIGATION_LIST_NAVIGATION_OVERFLOW"),
+					icon: "sap-icon://overflow",
+					selectable: false,
+					select: this._overflowPress.bind(this)
+				});
+
+				overflowItem._isOverflow = true;
+
+				this.setAggregation("_overflowItem", overflowItem);
+			}
+
+			return overflowItem;
+		};
+
+		NavigationList.prototype._overflowPress = function (event) {
+			var menu = this._createOverflowMenu();
+			menu.openBy(event.getSource(), false, Popup.Dock.EndCenter);
+		};
+
+		NavigationList.prototype._createOverflowMenu = function () {
+			var menu = new Menu({
+				items: this._createNavigationMenuItems(),
+				itemSelected: function (event) {
+					var selectedItem = event.getParameter("item"),
+						selectedItemDomRef;
+
+					this._selectItem({
+						item: selectedItem._navItem
+					});
+
+					selectedItemDomRef = this.getDomRef().querySelector(".sapTntNavLIItemSelected");
+
+					if (selectedItemDomRef) {
+						selectedItemDomRef.parentNode.focus();
+					}
+
+					menu.close();
+					menu.destroy();
+				}.bind(this)
+			});
+
+			menu.addStyleClass("sapTntNavLIMenu");
+
+			// override this method, so we can have a selection
+			// on a menu item with subitems
+			menu._handleMenuItemSelect = function(oEvent) {
+				var oUnfdItem = oEvent.getParameter("item"),
+					oMenuItem;
+
+				if (!oUnfdItem) {
+					return;
+				}
+
+				oMenuItem = this._findMenuItemByUnfdMenuItem(oUnfdItem);
+
+				if (oMenuItem) {
+					this.fireItemSelected({item: oMenuItem});
+				}
+			}.bind(menu);
+
+			this.addDependent(menu);
+
+			return menu;
+		};
+
+		NavigationList.prototype._createNavigationMenuItems = function () {
+			var items = this.getItems(),
+				menuItems = [];
+
+			items.forEach(function (item) {
+				if (!item.getVisible() || !item.getDomRef().classList.contains("sapTnTNavLIHiddenItem")) {
+					return;
+				}
+
+				var menuItem = new MenuItem({
+					icon: item.getIcon(),
+					text: item.getText(),
+					enabled: item.getEnabled()
+				});
+				menuItem._navItem = item;
+
+				item.getItems().forEach(function (subItem) {
+					var subMenuItem = new MenuItem({
+						icon: subItem.getIcon(),
+						text: subItem.getText(),
+						enabled: subItem.getEnabled()
+					});
+					subMenuItem._navItem = subItem;
+
+					menuItem.addItem(subMenuItem);
+				});
+
+				menuItems.push(menuItem);
+			});
+
+			return menuItems;
 		};
 
 		NavigationList.prototype._updateNavItems = function () {
@@ -155,10 +365,10 @@ sap.ui.define([
 		 * @private
 		 */
 		NavigationList.prototype._getDomRefs = function () {
-
 			var domRefs = [],
 				items = this.getItems(),
-				isExpanded = this.getExpanded();
+				isExpanded = this.getExpanded(),
+				overflowItemDomRef = this.getAggregation("_overflowItem").getDomRef();
 
 			for (var i = 0; i < items.length; i++) {
 				if (isExpanded) {
@@ -168,6 +378,10 @@ sap.ui.define([
 				}
 			}
 
+			if (!isExpanded && overflowItemDomRef) {
+				domRefs.push(overflowItemDomRef);
+			}
+
 			return domRefs;
 		};
 
@@ -212,6 +426,8 @@ sap.ui.define([
 			if (this._popover) {
 				this._popover.destroy();
 			}
+
+			this._deregisterResizeHandler();
 		};
 
 		/**
@@ -307,6 +523,9 @@ sap.ui.define([
 			if (typeof selectedItem !== 'string' && !isNavigationListItem) {
 				Log.warning('Type of selectedItem association should be string or instance of sap.tnt.NavigationListItem. New value was not set.');
 				this.setAssociation('selectedItem', null, true);
+
+				this._updateOverflowItems();
+
 				return this;
 			}
 
@@ -324,6 +543,9 @@ sap.ui.define([
 			if (navigationListItem) {
 				navigationListItem._select();
 				this._selectedItem = navigationListItem;
+
+				this._updateOverflowItems();
+
 				return this;
 			}
 

package/src/sap/tnt/NavigationListItem.js

@@ -6,11 +6,11 @@
 
 // Provides control sap.tnt.NavigationListItem.
 sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap/ui/core/Item", 'sap/ui/core/Icon',
-		'./NavigationList', 'sap/ui/core/InvisibleText', 'sap/ui/core/Renderer', 'sap/ui/core/IconPool', "sap/ui/events/KeyCodes", "sap/ui/core/library",
+		'sap/ui/core/InvisibleText', 'sap/ui/core/Renderer', 'sap/ui/core/IconPool', "sap/ui/events/KeyCodes", "sap/ui/core/library",
 		// jQuery Plugin "addAriaLabelledBy"
 		"sap/ui/util/openWindow", "sap/ui/util/defaultLinkTypes", "sap/ui/dom/jquery/Aria"],
 	function(jQuery, library, Core, Item, Icon,
-			 NavigationList, InvisibleText, Renderer, IconPool, KeyCodes, coreLibrary, openWindow, defaultLinkTypes) {
+			 InvisibleText, Renderer, IconPool, KeyCodes, coreLibrary, openWindow, defaultLinkTypes) {
 		"use strict";
 
 
@@ -32,7 +32,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 		 * @extends sap.ui.core.Item
 		 *
 		 * @author SAP SE
-		 * @version 1.115.1
+		 * @version 1.116.0
 		 *
 		 * @constructor
 		 * @public
@@ -64,6 +64,15 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 					 */
 					visible : {type : "boolean", group : "Appearance", defaultValue : true},
 
+					/**
+					 * Specifies if the item can be selected.
+					 *
+					 * @since 1.116
+					 * @experimental Since 1.116. Disclaimer: this property is in a beta state
+					 * - incompatible API changes may be done before its official public release.
+					 */
+					selectable : {type : "boolean", group : "Behavior", defaultValue : true},
+
 					/**
 					 * 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>select</code> event should be registered.
@@ -244,7 +253,6 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 		 * @private
 		 */
 		NavigationListItem.prototype.createPopupList = function () {
-
 			var newSubItems = [],
 				list = this.getNavigationList(),
 				selectedItem = list.getSelectedItem(),
@@ -263,6 +271,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 						text: subItem.getText(),
 						textDirection: subItem.getTextDirection(),
 						enabled: subItem.getEnabled(),
+						selectable: subItem.getSelectable(),
 						href: subItem.getHref(),
 						target: subItem.getTarget(),
 						tooltip: subItem.getTooltip()
@@ -280,6 +289,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 			var newGroup = new NavigationListItem({
 				expanded: true,
 				hasExpander: false,
+				selectable: this.getSelectable(),
 				key: this.getId(),
 				text: this.getText(),
 				enabled: this.getEnabled(),
@@ -290,7 +300,9 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 				items: newSubItems
 			});
 
-			var navList = new NavigationList({
+			var navigationListClass = list.getMetadata().getClass().prototype.constructor;
+
+			var navList = new navigationListClass({
 				itemSelect: this.onPopupItemSelect.bind(this),
 				items: [
 					newGroup
@@ -335,7 +347,9 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 
 			this.fireSelect(params);
 
-			navList._selectItem(params);
+			if (this.getSelectable()) {
+				navList._selectItem(params);
+			}
 
 			this._openUrl();
 		};
@@ -533,11 +547,11 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 				text = this.getText(),
 				href = this.getHref(),
 				target = this.getTarget(),
+				selectable = this.getSelectable(),
 				tooltip,
 				ariaProps = {
 					level: '1',
 					role: 'treeitem',
-					selected: false,
 					roledescription: this._resourceBundleTNTLib.getText("NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE_ITEM")
 				},
 				expanderVisible = this.getItems().length > 0 && this.getHasExpander();
@@ -551,10 +565,13 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 			rm.class("sapTntNavLIItem");
 			rm.class("sapTntNavLIGroup");
 
-			if (control._selectedItem === this) {
-				ariaProps.selected = true;
-
-				rm.class("sapTntNavLIItemSelected");
+			if (selectable) {
+				if (control._selectedItem === this) {
+					ariaProps.selected = true;
+					rm.class("sapTntNavLIItemSelected");
+				} else {
+					ariaProps.selected = false;
+				}
 			}
 
 			if (!this.getEnabled()) {
@@ -639,9 +656,9 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 				expanded = this.getExpanded(),
 				isListExpanded = this._isListExpanded(),
 				tooltip,
+				selectable = this.getSelectable(),
 				ariaProps = {
-					role: 'menuitemradio',
-					checked: false,
+					role: selectable ? 'menuitemradio' : 'menuitem',
 					roledescription: this._resourceBundleTNTLib.getText("NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_MENUITEM")
 				};
 
@@ -666,8 +683,15 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 					ariaProps.haspopup = "tree";
 				}
 
-				if (control._selectedItem === this) {
-					ariaProps.checked = true;
+				if (this._isOverflow) {
+					rm.class("sapTnTNavLIOverflow");
+					rm.class("sapTnTNavLIHiddenItem");
+					rm.attr("tabindex", "-1");
+					ariaProps.haspopup = "menu";
+				}
+
+				if (selectable) {
+					ariaProps.checked = control._selectedItem === this;
 				}
 
 				// ARIA
@@ -710,14 +734,13 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 		 * @private
 		 */
 		NavigationListItem.prototype.renderSecondLevelNavItem = function (rm, control) {
-
 			var group = this.getParent(),
 				href = this.getHref(),
 				target = this.getTarget(),
+				selectable = this.getSelectable(),
 				ariaProps = {
 					role: 'treeitem',
 					level: '2',
-					selected: false,
 					roledescription: this._resourceBundleTNTLib.getText("NAVIGATION_LIST_ITEM_ROLE_DESCRIPTION_TREE_ITEM")
 				};
 
@@ -725,10 +748,13 @@ sap.ui.define(["sap/ui/thirdparty/jquery", "./library", 'sap/ui/core/Core', "sap
 			rm.class("sapTntNavLIItem");
 			rm.class("sapTntNavLIGroupItem");
 
-			if (control._selectedItem === this) {
-				ariaProps.selected = true;
-
-				rm.class("sapTntNavLIItemSelected");
+			if (selectable) {
+				if (control._selectedItem === this) {
+					ariaProps.selected = true;
+					rm.class("sapTntNavLIItemSelected");
+				} else {
+					ariaProps.selected = false;
+				}
 			}
 
 			if (!this.getEnabled() || !group.getEnabled()) {

package/src/sap/tnt/NavigationListRenderer.js

@@ -33,7 +33,8 @@ sap.ui.define([
 			groups = control.getItems(),
 			expanded = control.getExpanded(),
 			visibleGroups = [],
-			hasGroupWithIcon = false;
+			hasGroupWithIcon = false,
+			overflowItem = control._getOverflowItem();
 
 		//Checking which groups should render
 		groups.forEach(function (group) {
@@ -81,6 +82,9 @@ sap.ui.define([
 			group.render(rm, control);
 		});
 
+		if (!expanded) {
+			overflowItem.render(rm, control);
+		}
 
 		rm.close("ul");
 	};