@openui5/sap.uxap 1.102.2 → 1.104.0

package/.eslintrc.json

@@ -1,14 +1,13 @@
 {
 	"overrides": [
 		/*
-		 * Productive code, sample and unit test code of sap.uxap has been cleaned up.
+		 * Productive code and test code of sap.uxap has been cleaned up.
 		 * No more references to the global jQuery allowed
 		 */
 		{
 			"files": [
 				"src/**/*.js",
-				"test/sap/uxap/demokit/**/*.js",
-				"test/sap/uxap/qunit/**/*.js"
+				"test/**/*.js"
 			],
 			"globals": {
 				"jQuery": "off"

package/.reuse/dep5

@@ -137,6 +137,11 @@ Copyright: jQuery Foundation and other contributors
 License: MIT
 Comment: these files belong to: QUnit 2
 
+Files: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.18.*
+Copyright: jQuery Foundation and other contributors
+License: MIT
+Comment: these files belong to: QUnit 2.18
+
 Files: src/sap.ui.core/src/sap/ui/thirdparty/jquery-compat.js
 Copyright: OpenJS Foundation and other contributors
 License: MIT
@@ -234,6 +239,11 @@ Copyright: 2010-2017, Christian Johansen, christian@cjohansen.no
 License: BSD-3-Clause
 Comment: these files belong to: SinonJS
 
+Files: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-14.0.*
+Copyright: 2010-2022, Christian Johansen, christian@cjohansen.no
+License: BSD-3-Clause
+Comment: these files belong to: SinonJS 14
+
 Files: src/sap.ui.core/src/sap/ui/thirdparty/sinon-qunit.js
 Copyright: 2010-2011, Christian Johansen
 License: BSD-3-Clause
@@ -339,6 +349,13 @@ Copyright:
 License: Apache-2.0 and ISC
 Comment: these files contain content from SAP and node-lru-cache: LRUPersistentCache.js is overall written by SAP, but portions ('Least Recently Used' logic) are taken from the node-lru-cache project (see https://github.com/isaacs/node-lru-cache/blob/v2.7.3/README.md) and modified.
 
+Files: src/sap.ui.core/test/sap/ui/core/qunit/i18n/helper/_timezones.js
+Copyright:
+    2009-2022 SAP SE or an SAP affiliate company and OpenUI5 contributors
+    Arthur David Olson, Paul Eggert and other contributors
+License: Apache-2.0 and LicenseRef-tzdata-PublicDomain
+Comment: these files contain content from SAP and Time Zone Database: _timezones.js is overall written by SAP, but the list of IANA timezone IDs is taken from the Timezone Database
+
 
 # Library: sap.ui.documentation:
 

package/LICENSES/LicenseRef-tzdata-PublicDomain.txt

@@ -0,0 +1,5 @@
+Unless specified below, all files in the tz code and data (including
+this LICENSE file) are in the public domain.
+
+If the files date.c, newstrftime.3, and strftime.c are present, they
+contain material derived from BSD and use the BSD 3-clause license.

package/THIRDPARTY.txt

@@ -76,6 +76,12 @@ License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/qunit-2.*
 
+Component: QUnit 2.18, version: 2.18.0
+Copyright: jQuery Foundation and other contributors
+License: MIT
+License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
+Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/qunit-2.18.*
+
 Component: jQuery-Migrate, version: 3.3.1
 Copyright: OpenJS Foundation and other contributors
 License: MIT
@@ -191,13 +197,19 @@ License: BSD-3-Clause
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/BSD-3-Clause.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/sinon-4.js
 
+Component: SinonJS 14, version: 14.0.0
+Copyright: 2010-2022, Christian Johansen, christian@cjohansen.no
+License: BSD-3-Clause
+License Text: https://github.com/SAP/openui5/blob/master/LICENSES/BSD-3-Clause.txt
+Contained in: src/sap.ui.core/test/sap/ui/core/qunit/thirdparty/sinon-14.0.*
+
 Component: Sinon-qunit, version: 2.0.0
 Copyright: 2010-2011, Christian Johansen
 License: BSD-3-Clause
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/BSD-3-Clause.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/sinon-qunit.js
 
-Component: URI.js, version: 1.19.10
+Component: URI.js, version: 1.19.11
 Copyright: Rodney Rehm
 License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
@@ -315,6 +327,12 @@ License: ISC
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/ISC.txt
 Contained in: src/sap.ui.core/src/sap/ui/core/cache/LRUPersistentCache.js
 
+Component: Time Zone Database, version: 2022a
+Copyright: Arthur David Olson, Paul Eggert and other contributors
+License: LicenseRef-tzdata-PublicDomain
+License Text: https://github.com/SAP/openui5/blob/master/LICENSES/LicenseRef-tzdata-PublicDomain.txt
+Contained in: src/sap.ui.core/test/sap/ui/core/qunit/i18n/helper/_timezones.js
+
 
 Library: sap.ui.documentation:
 
@@ -450,7 +468,7 @@ 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.1.39
+Component: SAP Theming Base Content, version: 11.1.40
 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
@@ -980,6 +998,21 @@ END of license: LicenseRef-JSONinJSPublicDomain
 =================================
 
 
+=================================
+BEGIN of license: LicenseRef-tzdata-PublicDomain
+=================================
+
+Unless specified below, all files in the tz code and data (including
+this LICENSE file) are in the public domain.
+
+If the files date.c, newstrftime.3, and strftime.c are present, they
+contain material derived from BSD and use the BSD 3-clause license.
+
+=================================
+END of license: LicenseRef-tzdata-PublicDomain
+=================================
+
+
 =================================
 BEGIN of license: MIT
 =================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.uxap",
-  "version": "1.102.2",
+  "version": "1.104.0",
   "description": "OpenUI5 UI Library sap.uxap",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,9 +14,9 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.f": "1.102.2",
-    "@openui5/sap.m": "1.102.2",
-    "@openui5/sap.ui.core": "1.102.2",
-    "@openui5/sap.ui.layout": "1.102.2"
+    "@openui5/sap.f": "1.104.0",
+    "@openui5/sap.m": "1.104.0",
+    "@openui5/sap.ui.core": "1.104.0",
+    "@openui5/sap.ui.layout": "1.104.0"
   }
 }

package/src/sap/uxap/.library

@@ -3,7 +3,7 @@
 
 	<name>sap.uxap</name>
 	<vendor>SAP SE</vendor>
-	<version>1.102.2</version>
+	<version>1.104.0</version>
 	<copyright>OpenUI5
  * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>

package/src/sap/uxap/AnchorBar.js

@@ -489,7 +489,7 @@ sap.ui.define([
 	AnchorBar.prototype._applyHierarchicalSelectMode = function () {
 
 		if (this._sHierarchicalSelectMode === AnchorBarRenderer._AnchorBarHierarchicalSelectMode.Icon) {
-			this._bHideScrollContainer = false;
+			this.$().find(".sapUxAPAnchorBarScrollContainer").show();
 
 			this._oSelect.setWidth("auto");
 			this._oSelect.setAutoAdjustWidth(true);
@@ -497,7 +497,7 @@ sap.ui.define([
 			this._computeBarSectionsInfo();
 
 		} else {
-			this._bHideScrollContainer = true;
+			this.$().find(".sapUxAPAnchorBarScrollContainer").hide();
 
 			this._oSelect.setWidth("100%");
 			this._oSelect.setAutoAdjustWidth(false);
@@ -505,8 +505,6 @@ sap.ui.define([
 		}
 
 		this.$().toggleClass("sapUxAPAnchorBarOverflow", this._sHierarchicalSelectMode === AnchorBarRenderer._AnchorBarHierarchicalSelectMode.Icon);
-
-		this.invalidate();
 	};
 
 	AnchorBar.prototype._adjustSize = function (oEvent) {

package/src/sap/uxap/AnchorBarRenderer.js

@@ -27,9 +27,6 @@ sap.ui.define(["sap/m/ToolbarRenderer", "sap/ui/core/Renderer", "sap/m/BarInPage
 				rm.renderControl(oToolbar._getScrollArrowLeft());
 
 				rm.openStart("div", oToolbar.getId() + "-scrollContainer");
-				if (oToolbar._bHideScrollContainer) {
-					rm.style("display", "none");
-				}
 				// ARIA attributes
 				rm.class("sapUxAPAnchorBarScrollContainer")
 					.openEnd();
@@ -40,9 +37,7 @@ sap.ui.define(["sap/m/ToolbarRenderer", "sap/ui/core/Renderer", "sap/m/BarInPage
 					.attr("aria-label", sap.ui.getCore().getLibraryResourceBundle("sap.uxap").getText("ANCHOR_BAR_ARIA_LABEL"))
 					.openEnd();
 
-				if (!oToolbar._bHideScrollContainer) {
-					AnchorBarRenderer.renderBarItems(rm, oToolbar);
-				}
+				AnchorBarRenderer.renderBarItems(rm, oToolbar);
 
 				rm.close("div");
 

package/src/sap/uxap/BlockBaseMetadata.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 *
 	 * @class
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 * @since 1.26
 	 * @alias sap.uxap.BlockBaseMetadata
 	 * @extends sap.ui.core.ElementMetadata

package/src/sap/uxap/ObjectPageAccessibleLandmarkInfo.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/uxap/ObjectPageDynamicHeaderContent.js

@@ -41,7 +41,7 @@ sap.ui.define([
 		 * @implements sap.uxap.IHeaderContent
 		 *
 		 * @author SAP SE
-		 * @version 1.102.2
+		 * @version 1.104.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/uxap/ObjectPageDynamicHeaderTitle.js

@@ -42,7 +42,7 @@ sap.ui.define([
 		 * @implements sap.uxap.IHeaderTitle
 		 *
 		 * @author SAP SE
-		 * @version 1.102.2
+		 * @version 1.104.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/uxap/ObjectPageLayout.js

@@ -21,7 +21,6 @@ sap.ui.define([
 	"./LazyLoading",
 	"./ObjectPageLayoutABHelper",
 	"./ThrottledTaskHelper",
-	"sap/m/ScrollBar",
 	"sap/ui/core/library",
 	"./library",
 	"./ObjectPageLayoutRenderer",
@@ -51,7 +50,6 @@ sap.ui.define([
 	LazyLoading,
 	ABHelper,
 	ThrottledTask,
-	ScrollBar,
 	coreLibrary,
 	library,
 	ObjectPageLayoutRenderer,
@@ -411,9 +409,7 @@ sap.ui.define([
 				/**
 				 * Internal aggregation to hold the reference to the IHeaderContent implementation.
 				 */
-				_headerContent: {type: "sap.uxap.IHeaderContent", multiple: false, visibility: "hidden"},
-
-				_customScrollBar: {type: "sap.ui.core.Control", multiple: false, visibility: "hidden"}
+				_headerContent: {type: "sap.uxap.IHeaderContent", multiple: false, visibility: "hidden"}
 			},
 			events: {
 
@@ -682,6 +678,7 @@ sap.ui.define([
 			bPinnable;
 
 		this._deregisterScreenSizeListener();
+		this._deregisterTitleSizeListener();
 
 		if (this._oLazyLoading) {
 			this._oLazyLoading.destroy();
@@ -907,6 +904,7 @@ sap.ui.define([
 		this._moveHeaderToContentArea();
 		this._scrollTo(0, 0, 0);
 		this._bHeaderExpanded = true;
+		this._adjustHeaderHeights(); // call synchonously (before resize notification) to avoid visual flickering
 		this._updateToggleHeaderVisualIndicators();
 
 		if (this._isHeaderPinnable()) {
@@ -1012,7 +1010,7 @@ sap.ui.define([
 	/**
 	 * Retrieves the list of sections to render initially
 	 * (the list includes the sections to be loaded lazily, as these are empty in the beginning, only their skeleton will be rendered)
-	 * @returns the sections list
+	 * @returns {sap.uxap.ObjectPageSection[]} the sections list
 	 */
 	ObjectPageLayout.prototype._getSectionsToRender = function () {
 		this._adjustSelectedSectionByUXRules();
@@ -1057,7 +1055,7 @@ sap.ui.define([
 	 * (1) the currently <code>selectedSection</code>
 	 * (2) the static configuration for the count of items to preload in <code>sap.uxap._helpers.LazyLoading</code>
 	 *
-	 * @returns the subSections list
+	 * @returns {sap.uxap.ObjectPageSubSection[]} the subSections list
 	 */
 	ObjectPageLayout.prototype._getSectionsToPreloadOnBeforeFirstRendering = function () {
 		var aSectionBases,
@@ -1131,12 +1129,13 @@ sap.ui.define([
 
 		this._bInvalidatedAndNotRerendered = false;
 
-		this._iResizeId = ResizeHandler.register(this, this._onUpdateScreenSize.bind(this));
-
 		this._ensureCorrectParentHeight();
 
 		this._cacheDomElements();
 
+		this._iResizeId = ResizeHandler.register(this, this._onUpdateScreenSize.bind(this));
+		this._iTitleResizeId = ResizeHandler.register(this._$titleArea.get(0), this._adjustTitlePositioning.bind(this));
+
 		if (this._hasDynamicTitle()) {
 			this.addStyleClass("sapUxAPObjectPageHasDynamicTitle");
 		}
@@ -1207,10 +1206,6 @@ sap.ui.define([
 		// (to avoid any scrollbar appearing even for an instance while we snap/unsnap header)
 		this._toggleScrolling(!this._bAllContentFitsContainer);
 
-		if (Device.system.desktop) {
-			this._$opWrapper.on("scroll.OPL", this.onWrapperScroll.bind(this));
-		}
-
 		this._registerOnContentResize();
 
 		this.getHeaderTitle() && this._shiftHeaderTitle();
@@ -1310,6 +1305,7 @@ sap.ui.define([
 		}
 
 		this._deregisterScreenSizeListener();
+		this._deregisterTitleSizeListener();
 
 		if (this._iContentResizeId) {
 			ResizeHandler.deregister(this._iContentResizeId);
@@ -1333,46 +1329,6 @@ sap.ui.define([
 		this._oFirstVisibleSubSection = null;
 	};
 
-	ObjectPageLayout.prototype._getCustomScrollBar = function () {
-
-		if (!this.getAggregation("_customScrollBar")) {
-			var oVSB = new ScrollBar(this.getId() + "-vertSB", {
-				scrollPosition: 0,
-				scroll: this.onCustomScrollerScroll.bind(this),
-				visible: false
-			});
-			this.setAggregation("_customScrollBar", oVSB, true);
-		}
-
-		return this.getAggregation("_customScrollBar");
-	};
-
-	ObjectPageLayout.prototype.onWrapperScroll = function (oEvent) {
-		var iScrollTop = Math.max(oEvent.target.scrollTop, 0);
-
-		if (this._getCustomScrollBar()) {
-			if (this.allowCustomScroll === true) {
-				this.allowCustomScroll = false;
-				return;
-			}
-			this.allowInnerDiv = true;
-
-			this._getCustomScrollBar().setScrollPosition(iScrollTop);
-		}
-	};
-
-	ObjectPageLayout.prototype.onCustomScrollerScroll = function (oEvent) {
-		var iScrollTop = Math.max(this._getCustomScrollBar().getScrollPosition(), 0); // top of the visible page
-
-		if (this.allowInnerDiv === true) {
-			this.allowInnerDiv = false;
-			return;
-		}
-		this.allowCustomScroll = true;
-
-		jQuery(this._$opWrapper).scrollTop(iScrollTop);
-	};
-
 	ObjectPageLayout.prototype.setShowOnlyHighImportance = function (bValue) {
 		var bOldValue = this.getShowOnlyHighImportance();
 
@@ -1420,43 +1376,33 @@ sap.ui.define([
 	};
 
 	/**
-	 * Callback for the end of the scroll triggered from <code>scrollToElement</code>
-	 * of <code>sap.ui.core.delegate.ScrollEnablement</code>.
+	 * Offsets to the required scroll position.
+	 * The offset is the offset of the scroll container from the top of the content container.
 	 *
-	 * Required for Safari and IE11 (where there is no browser automatic scroll adjustment,
-	 * see <code>overflow-anchor</code> CSS property).
-	 *
-	 * The execution of <code>scrollToElement</code> changes the current scroll position,
-	 * so we check if the new scroll position entails subsequent change of the scroll
-	 * container of our page(namely: snapping of the header, which involves removal
-	 * of the anchorBar from the top of the scroll container and placing it
-	 * in the title area above the scroll container instead).
-	 *
-	 * If such a change (namely, removal of the anchorBar from the top of the scroll container)
-	 * should occur, then the content bellow the removed anchorBar will became offset with X pixels,
-	 * where X is the anchorBar height => the element [provided to <code>scrollToElement </code>]
-	 * will be misplaced as a result.
-	 *
-	 * Therefore here we synchronously call the listener to the "scroll" event to check if
-	 * it entails the above snapping and subsequent misplacement => if it entails it,
-	 * then we adjust back the scroll position to correct the misplacement of the scrolled element.
+	 * This is required because <code>sap.ui.code>ScrollEnablement.prototype.scrollToElement</code>
+	 * scrolls the element to the very top of the scroll container, regardless of the scroll container top-padding.
 	 *
 	 * @private
 	 */
 	ObjectPageLayout.prototype._onAfterScrollToElement = function () {
 		var iScrollTop = this._$opWrapper.scrollTop(),
-			bStickyAnchorBarBefore = this._bStickyAnchorBar;
+			bStickyAnchorBarBefore = this._bStickyAnchorBar,
+			iOffset;
 
 		// synchronously call the listener for the "scroll" event, to trigger any pending toggling of the header
 		this._onScroll({ target: { scrollTop: iScrollTop}});
 
-		// if the anchorBar was sticked (removed from the topmost part of the scrollable area) =>
-		// all elements bellow it became offset with X pixels, where X is the anchorBar height =>
-		// the element (target of <code>scrollToElement</code>) was offset respectively =>
-		// adjust the scroll position to ensure the element is back visible (outside scroll overflow)
+		// the <code>this._$contentContainer</code> is offset from the top of the scroll container
+		// with padding, in order to make space for the elements in the title area
+		iOffset = this._$contentContainer.get(0).offsetTop;
+
 		if (this._bStickyAnchorBar && !bStickyAnchorBarBefore && this._$opWrapper.scrollTop() === iScrollTop) {
-			this._$opWrapper.scrollTop(iScrollTop - this.iAnchorBarHeight);
+			// the offset in sticky mode is different from the offset in expanded mode
+			// where the difference is obtained from <code>this._getTitleHeightDelta()</code>
+			iOffset -= this._getTitleHeightDelta();
 		}
+
+		this._$opWrapper.scrollTop(iScrollTop - iOffset);
 	};
 
 	/**
@@ -2201,8 +2147,6 @@ sap.ui.define([
 
 			this._preloadSectionsOnBeforeScroll(oSection);
 
-			this.getHeaderTitle() && this._shiftHeaderTitle();
-
 			iScrollTo += iOffset;
 
 			if (!this._bStickyAnchorBar && this._shouldSnapHeaderOnScroll(iScrollTo)) {
@@ -2289,7 +2233,7 @@ sap.ui.define([
 	 * @param {object} oTargetSection the section
 	 * @private
 	 */
-	ObjectPageLayout.prototype._preloadSectionsOnBeforeScroll = function (oTargetSection) {
+	 ObjectPageLayout.prototype._preloadSectionsOnBeforeScroll = function (oTargetSection) {
 
 		var sId = oTargetSection.getId(),
 			aToLoad;
@@ -2308,22 +2252,28 @@ sap.ui.define([
 				//on desktop we delay the call to have the preload done during the scrolling animation
 				setTimeout(function () {
 					this._connectModelsForSections(aToLoad);
+
+					this._fireSubSectionEnteredViewPortEvent(aToLoad);
 				}.bind(this), 50);
 			} else {
 				//on device, do the preload first then scroll.
 				//doing anything during the scrolling animation may
 				//trouble animation and lazy loading on slow devices.
 				this._connectModelsForSections(aToLoad);
-			}
 
-			aToLoad.forEach(function (subSection) {
-				this.fireEvent("subSectionEnteredViewPort", {
-					subSection: subSection
-				});
-			}, this);
+				this._fireSubSectionEnteredViewPortEvent(aToLoad);
+			}
 		}
 	};
 
+	ObjectPageLayout.prototype._fireSubSectionEnteredViewPortEvent = function (aToLoad) {
+		aToLoad.forEach(function (oSubSection) {
+			this.fireEvent("subSectionEnteredViewPort", {
+				subSection: oSubSection
+			});
+		}, this);
+	};
+
 	/**
 	 * Returns the UI5 ID of the Section that is currently being scrolled.
 	 *
@@ -2632,7 +2582,7 @@ sap.ui.define([
 			});
 		}
 
-		this._updateCustomScrollerHeight(bStickyTitleMode);
+		this._adjustTitlePositioning();
 
 		this._setSectionInfoIsDirty(false);
 
@@ -2678,27 +2628,6 @@ sap.ui.define([
 		return iSectionsContainerHeight + "px";
 	};
 
-	ObjectPageLayout.prototype._updateCustomScrollerHeight = function(bRequiresSnap) {
-
-		if (Device.system.desktop && this.getAggregation("_customScrollBar")) {
-
-			// update content size
-			var iScrollableContentSize = this._computeScrollableContentSize(bRequiresSnap);
-			iScrollableContentSize += this._getStickyAreaHeight(bRequiresSnap);
-			this._getCustomScrollBar().setContentSize(iScrollableContentSize + "px");
-
-
-			// update visibility
-			var bShouldBeVisible = (iScrollableContentSize > Math.ceil(this.iScreenHeight)),
-				bVisibilityChange = (bShouldBeVisible !== this._getCustomScrollBar().getVisible());
-
-			if (bVisibilityChange) {
-				this._getCustomScrollBar().setVisible(bShouldBeVisible);
-				this.getHeaderTitle() && this._shiftHeaderTitle();
-			}
-		}
-	};
-
 	ObjectPageLayout.prototype._computeScrollableContentSize = function(bShouldStick) {
 
 		var iScrollableContentHeight = 0;
@@ -3004,6 +2933,34 @@ sap.ui.define([
 		|| (this._$contentContainer.length && this._$contentContainer.get(0).offsetHeight !== this.iContentHeight);
 	};
 
+	ObjectPageLayout.prototype._adjustTitlePositioning = function (oEvent) {
+		if (!this._$titleArea.length || !this._$opWrapper.length) {
+			return;
+		}
+
+		var oWrapperElement = this._$opWrapper.get(0),
+			oTitleElement = this._$titleArea.get(0),
+			iTitleHeight = oTitleElement.getBoundingClientRect().height,
+			iTitleWidth = oTitleElement.getBoundingClientRect().width;
+
+		// the top area of the scroll container is reserved for showing the title element,
+		// (where the title element is positioned absolutely on top of the scroll container),
+		// therefore
+
+		// (1) add top padding for the area underneath the title element
+		// so that the title does not overlap the content of the scroll container
+		oWrapperElement.style.paddingTop = iTitleHeight + "px";
+
+		// (2) also make the area underneath the title invisible (using clip-path)
+		// to allow usage of *transparent background* of the title element
+		// (otherwise content from the scroll *overflow* will show underneath the transparent title element)
+		oWrapperElement.style.clipPath = 'polygon(0px ' + iTitleHeight + 'px, '
+			+ Math.floor(iTitleWidth) + 'px ' 	+ iTitleHeight + 'px, '
+			+ Math.floor(iTitleWidth) + 'px 0, 100% 0, 100% 100%, 0 100%)';
+
+		this.getHeaderTitle() && this._shiftHeaderTitle();
+	};
+
 	/**
 	 * called when the screen is resize by users. Updates the screen height
 	 * @param oEvent
@@ -3146,7 +3103,7 @@ sap.ui.define([
 		var iReachableScrollTop;
 		iExtraSpaceLength = iExtraSpaceLength || 0;
 
-		iReachableScrollTop = this._oScrollContainerLastState.iScrollableContentLength + iExtraSpaceLength - this._oScrollContainerLastState.iScrollableViewportHeight;
+		iReachableScrollTop = this._oScrollContainerLastState.iScrollableContentLength + iExtraSpaceLength + this._$contentContainer.get(0).offsetTop - this._oScrollContainerLastState.iScrollableViewportHeight;
 		return iReachableScrollTop >= oRequiredScrollTop;
 	};
 
@@ -3172,6 +3129,17 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * removes listener for title-area resize
+	 * @private
+	 */
+	 ObjectPageLayout.prototype._deregisterTitleSizeListener = function () {
+		if (this._iTitleResizeId) {
+			ResizeHandler.deregister(this._iTitleResizeId);
+			this._iTitleResizeId = null;
+		}
+	};
+
 	/**
 	 * called when the user scrolls on the page
 	 * @param oEvent
@@ -3785,6 +3753,7 @@ sap.ui.define([
 			}
 
 			this._adjustHeaderBackgroundSize();
+			this._adjustTitlePositioning();
 
 			Log.info("ObjectPageLayout :: adjustHeaderHeight", "headerTitleHeight: " + this.iHeaderTitleHeight + " - headerTitleStickiedHeight: " + this.iHeaderTitleHeightStickied + " - headerContentHeight: " + this.iHeaderContentHeight);
 		} else {
@@ -3892,6 +3861,7 @@ sap.ui.define([
 	 * Retrieve the current header design that was defined in the headerTitle if available
 	 *
 	 * @private
+	 * @returns {sap.uxap.ObjectPageHeaderDesign}
 	 */
 	ObjectPageLayout.prototype._getHeaderDesign = function () {
 		var oHeader = this.getHeaderTitle(),
@@ -3907,6 +3877,7 @@ sap.ui.define([
 	 * Gets only the visible sections
 	 *
 	 * @private
+	 * @returns {sap.uxap.ObjectPageSection[]}
 	 */
 
 	ObjectPageLayout.prototype._getVisibleSections = function () {
@@ -4066,6 +4037,7 @@ sap.ui.define([
 	 * Lazy loading of the _headerContent aggregation
 	 *
 	 * @private
+	 * @returns {sap.uxap.IHeaderContent}
 	 */
 	ObjectPageLayout.prototype._getHeaderContent = function () {
 		return this.getAggregation("_headerContent");
@@ -4116,7 +4088,8 @@ sap.ui.define([
 	};
 
 	ObjectPageLayout.prototype._hasVerticalScrollBar = function () {
-		return (this._getCustomScrollBar().getVisible() === true);
+		var oWrapperElement = this._$opWrapper.length && this._$opWrapper.get(0);
+		return oWrapperElement && (oWrapperElement.scrollHeight > oWrapperElement.offsetHeight);
 	};
 
 	ObjectPageLayout.prototype._shiftHeaderTitle = function () {
@@ -4124,7 +4097,7 @@ sap.ui.define([
 		var oShiftOffsetParams = this._calculateShiftOffset(),
 			sDirection = oShiftOffsetParams.sStyleAttribute,
 			sPixels = oShiftOffsetParams.iMarginalsOffset;
-		this.$().find(".sapUxAPObjectPageHeaderTitle").css("padding-" + sDirection, sPixels + "px");
+		this.$().find(".sapUxAPObjectPageHeaderTitle").css(sDirection, sPixels + "px");
 	};
 
 	/**

package/src/sap/uxap/ObjectPageLayoutRenderer.js

@@ -26,7 +26,7 @@ sap.ui.define(["sap/ui/Device"],
 			var aSections,
 				oHeader = oControl.getHeaderTitle(),
 				oAnchorBar = null,
-				oRb = sap.uxap.ObjectPageLayout._getLibraryResourceBundle(),
+				oRb = sap.ui.getCore().getLibraryResourceBundle("sap.uxap"),
 				bIsHeaderContentVisible = oControl.getHeaderContent() && oControl.getHeaderContent().length > 0 && oControl.getShowHeaderContent(),
 				bIsTitleInHeaderContent = oControl.getShowTitleInHeaderContent() && oControl.getShowHeaderContent(),
 				bRenderHeaderContent = bIsHeaderContentVisible || bIsTitleInHeaderContent,
@@ -73,11 +73,6 @@ sap.ui.define(["sap/ui/Device"],
 			oRm.accessibilityState(oControl, oControl._formatLandmarkInfo(oLandmarkInfo, "Root"));
 			oRm.openEnd();
 
-			// custom scrollbar
-			if (Device.system.desktop) {
-				oRm.renderControl(oControl._getCustomScrollBar());
-			}
-
 			// Header
 			oRm.openStart(sHeaderTag, oControl.getId() + "-headerTitle");
 			if (!bHeaderRoleSet) {

package/src/sap/uxap/ObjectPageLazyLoader.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/uxap/ObjectPageSectionBase.js

@@ -172,15 +172,12 @@ sap.ui.define([
 	 */
 	ObjectPageSectionBase.prototype.setInvisibleTextLabelValue = function (sValue) {
 		var oAriaLabelledBy = this.getAggregation("ariaLabelledBy"),
-			sSectionText = this.getSectionText(),
 			sLabel = "";
 
-		if (sValue) {
-			sLabel = sValue + " ";
-		}
+		sLabel = sValue || this.getSectionText();
 
 		if (oAriaLabelledBy) {
-			sap.ui.getCore().byId(oAriaLabelledBy.getId()).setText(sLabel + sSectionText);
+			sap.ui.getCore().byId(oAriaLabelledBy.getId()).setText(sLabel);
 		}
 
 		return this;
@@ -193,17 +190,12 @@ sap.ui.define([
 	 */
 	ObjectPageSectionBase.prototype._getAriaLabelledBy = function () {
 		// Each section should be labelled as:
-		// 'titleName Section' - if the section has a title
+		// 'titleName' - if the section has a title
 		// 'Section' - if it does not have a title
 
-		var sLabel = "",
-			sTitle = this._getTitle();
-
-		if (sTitle) {
-			sLabel += sTitle + " ";
-		}
+		var sLabel = "";
 
-		sLabel += this.getSectionText();
+		sLabel = this._getTitle() || this.getSectionText();
 
 		return new InvisibleText({
 			text: sLabel

package/src/sap/uxap/changeHandler/AddIFrameObjectPageLayout.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @constructor
 	 * @alias sap.uxap.changeHandler.AddIFrameObjectPageLayout
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 * @since 1.75
 	 * @experimental Since 1.75
 	 */

package/src/sap/uxap/changeHandler/MoveObjectPageSection.js

@@ -13,7 +13,7 @@ sap.ui.define(["sap/ui/fl/changeHandler/MoveControls", "sap/ui/core/Core", "sap/
 	 * @constructor
 	 * @alias sap.uxap.changeHandler.MoveObjectPageSection
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 * @experimental Since 1.54
 	 */
 

package/src/sap/uxap/changeHandler/RenameObjectPageSection.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @constructor
 	 * @alias sap.uxap.changeHandler.RenameObjectPageSection
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 * @experimental Since 1.50
 	 */
 

package/src/sap/uxap/component/ObjectPageLayoutUXDrivenFactory.controller.js

@@ -10,16 +10,18 @@ sap.ui.define([
 	"sap/ui/base/ManagedObject",
 	"sap/ui/core/mvc/Controller",
 	"sap/base/Log",
-	"sap/base/util/ObjectPath",
-	"sap/ui/thirdparty/jquery"
+	"sap/base/util/each",
+	"sap/base/util/isEmptyObject",
+	"sap/base/util/ObjectPath"
 ], function(
 	BindingMode,
 	Context,
 	ManagedObject,
 	Controller,
 	Log,
-	ObjectPath,
-	jQuery
+	each,
+	isEmptyObject,
+	ObjectPath
 ) {
 	"use strict";
 
@@ -27,16 +29,16 @@ sap.ui.define([
 
 		/**
 		 * injects the header based on configuration
-		 * @param {object} oModel model instanse
+		 * @param {object} oModel model instance
 		 */
 		connectToComponent: function (oModel) {
 
-			var bHasPendingRequest = jQuery.isEmptyObject(oModel.getData());
+			var bHasPendingRequest = isEmptyObject(oModel.getData());
 
 			//ensure a 1 way binding otherwise it cause any block property change to update the entire subSections
 			oModel.setDefaultBindingMode(BindingMode.OneWay);
 
-			var fnHeaderFactory = jQuery.proxy(function () {
+			var fnHeaderFactory = function () {
 
 				if (bHasPendingRequest) {
 					oModel.detachRequestCompleted(fnHeaderFactory);
@@ -56,7 +58,7 @@ sap.ui.define([
 					}
 				}
 
-			}, this);
+			}.bind(this);
 
 			//if data are not there yet, we wait for them
 			if (bHasPendingRequest) {
@@ -82,21 +84,21 @@ sap.ui.define([
 				oControlMetadata = oControlClass.getMetadata();
 
 				//pre-processing: substitute event handler as strings by their function instance
-				jQuery.each(oControlMetadata._mAllEvents, jQuery.proxy(function (sEventName, oEventProperties) {
+				each(oControlMetadata._mAllEvents, function (sEventName, oEventProperties) {
 					if (typeof oControlInfo[sEventName] == "string") {
 						oControlInfo[sEventName] = this.convertEventHandler(oControlInfo[sEventName]);
 					}
-				}, this));
+				}.bind(this));
 
 				//creates the control with control info = create with provided properties
 				oControl = ManagedObject.create(oControlInfo);
 
 				//post-processing: bind properties on the objectPageLayoutMetadata model
-				jQuery.each(oControlMetadata._mAllProperties, jQuery.proxy(function (sPropertyName, oProperty) {
+				each(oControlMetadata._mAllProperties, function (sPropertyName, oProperty) {
 					if (oControlInfo[sPropertyName]) {
 						oControl.bindProperty(sPropertyName, "objectPageLayoutMetadata>" + oBindingContext.getPath() + "/" + sPropertyName);
 					}
-				}, this));
+				});
 			} catch (sError) {
 				Log.error("ObjectPageLayoutFactory :: error in control creation from config: " + sError);
 			}
@@ -114,7 +116,7 @@ sap.ui.define([
 			var fnNameSpace = window, aNameSpaceParts = sStaticHandlerName.split('.');
 
 			try {
-				jQuery.each(aNameSpaceParts, function (iIndex, sNameSpacePart) {
+				each(aNameSpaceParts, function (iIndex, sNameSpacePart) {
 					fnNameSpace = fnNameSpace[sNameSpacePart];
 				});
 			} catch (sError) {

package/src/sap/uxap/designtime/ObjectPageLayout.designtime.js

@@ -195,10 +195,6 @@ function(
 					return ["sections", "_anchorBar", "headerContent"];
 				}
 			}
-		}, {
-			domRef : function(oElement) {
-				return oElement.$("vertSB-sb").get(0);
-			}
 		}],
 		templates: {
 			create: "sap/uxap/designtime/ObjectPageLayout.create.fragment.xml"

package/src/sap/uxap/library.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.uxap
 	 * @author SAP SE
-	 * @version 1.102.2
+	 * @version 1.104.0
 	 * @since 1.36
 	 * @public
 	 */
@@ -68,7 +68,7 @@ sap.ui.define([
 			"sap.uxap.ObjectPageHeaderLayoutData",
 			"sap.uxap.ObjectPageLazyLoader"
 		],
-		version: "1.102.2",
+		version: "1.104.0",
 		extensions: {
 			flChangeHandlers: {
 				"sap.uxap.ObjectPageHeader": "sap/uxap/flexibility/ObjectPageHeader",

package/src/sap/uxap/messagebundle_ko.properties

@@ -1,7 +1,7 @@
 
-SHOW_MORE=\uC790\uC138\uD788 \uD45C\uC2DC
+SHOW_MORE=\uC790\uC138\uD788 \uBCF4\uAE30
 
-SHOW_LESS=\uAC04\uB2E8\uD788 \uD45C\uC2DC
+SHOW_LESS=\uAC04\uB2E8\uD788 \uBCF4\uAE30
 
 ANCHOR_BAR_ARIA_LABEL=\uC575\uCEE4
 
@@ -13,7 +13,7 @@ BREADCRUMB_TRAIL_LABEL=\uD0D0\uC0C9 \uACBD\uB85C \uCD94\uC801
 
 SHOW_ALL=\uBAA8\uB450 \uD45C\uC2DC
 
-HIDE_ALL=\uAC04\uB2E8\uD788 \uD45C\uC2DC
+HIDE_ALL=\uAC04\uB2E8\uD788 \uBCF4\uAE30
 
 SHOW=\uD3BC\uCE58\uAE30
 

package/src/sap/uxap/themes/base/ObjectPageHeader.less

@@ -233,6 +233,15 @@ html[data-sap-ui-browser^=ie] .sapUxAPObjectPageHeaderObjectImageContainerSub >
 	padding-bottom: 0;
 }
 
+.sapUxAPObjectPageHeaderTitle {
+	position: absolute;
+	padding-right: 0px;
+	top: 0;
+	right: 0;
+	left: 0;
+	z-index: 2;
+}
+
 .sapUxAPObjectPageHeaderTitleArrow {
 	vertical-align: top;
 	white-space: nowrap;