@openui5/sap.ui.layout 1.102.1 → 1.103.0

package/package.json

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

package/src/sap/ui/layout/.library

@@ -6,7 +6,7 @@
   <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>
-  <version>1.102.1</version>
+  <version>1.103.0</version>
 
   <documentation>SAPUI5 library with layout controls.</documentation>
 

package/src/sap/ui/layout/AlignedFlowLayout.js

@@ -40,7 +40,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/ui/layout/AssociativeSplitter.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.ui.layout.Splitter
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/layout/BlockLayout.js

@@ -38,8 +38,9 @@ sap.ui.define([
 		 * </ul>
 		 * Background colors are attached directly to the blocks of the layout.
 		 *
-		 * <b>Note:</b> With version 1.48 colors can be set for each individual {@link sap.ui.layout.BlockLayoutCell cell}. There are 11 pre-defined color sets, each with 4 different shades for the Belize theme and 6 different shades for the Fiori 3 theme.
-		 * The main colors of the sets can be changed in Theme Designer. To change the background of a particular cell, set <code>backgroundColorSet</code> (main color)
+		 * <b>Note:</b> With version 1.48 colors can be set for each individual {@link sap.ui.layout.BlockLayoutCell cell}.
+		 * There are 11 pre-defined color sets, each with 4 different shades for the SAP Belize theme and 6 different shades for the Quartz and Horizon themes.
+		 * To change the background of a particular cell, set <code>backgroundColorSet</code> (main color)
 		 * and <code>backgroundColorShade</code> (shade).
 		 *
 		 * <b>Note:</b> Usage of disabled, emphasized or subtle links as titles is not recommended. Dark background designs, for example Accent, are not fully supported with regards to Accessibility when used with links as titles.
@@ -62,7 +63,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/ui/layout/BlockLayoutCell.js

@@ -27,7 +27,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.0
 		 *
 		 * @constructor
 		 * @public
@@ -74,14 +74,12 @@ sap.ui.define([
 					width: {type: "int", group: "Appearance", defaultValue: 0},
 					/**
 					 * The Background color set from which the background color will be selected.
-					 * By using background colors from the predefined sets your colors could later be customized from the Theme Designer.
 					 * <b>Note:</b> backgroundColorSet should be used only in combination with backgroundColorShade.
 					 * @since 1.48
 					 */
 					backgroundColorSet: {type: "sap.ui.layout.BlockLayoutCellColorSet", group: "Appearance"},
 					/**
 					 * The index of the background color in the color set from which the color will be selected.
-					 * By using background colors from the predefined sets your colors could later be customized from the Theme Designer.
 					 * <b>Note:</b> backgroundColorShade should be used only in combination with backgroundColorSet.
 					 * @since 1.48
 					 */

package/src/sap/ui/layout/BlockLayoutCellData.js

@@ -18,7 +18,7 @@ sap.ui.define(['sap/ui/core/LayoutData', './library'],
 	 * @class
 	 * Holds layout data for the BlockLayoutCells contents.
 	 * @extends sap.ui.core.LayoutData
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @constructor
 	 * @public
 	 * @since 1.50.0

package/src/sap/ui/layout/BlockLayoutRow.js

@@ -32,7 +32,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/ui/layout/DynamicSideContent.js

@@ -94,7 +94,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/ui/layout/FixFlex.js

@@ -52,7 +52,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/Grid.js

@@ -59,7 +59,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -351,14 +351,14 @@ sap.ui.define([
 
 			if (!oLayoutData) {
 				return undefined;
-			} else if (oLayoutData instanceof sap.ui.layout.GridData) {
+			} else if (oLayoutData.isA("sap.ui.layout.GridData")) {
 				return oLayoutData;
 			} else if (oLayoutData.isA("sap.ui.core.VariantLayoutData")) {
 				// multiple LayoutData available - search here
 				var aLayoutData = oLayoutData.getMultipleLayoutData();
 				for ( var i = 0; i < aLayoutData.length; i++) {
 					var oLayoutData2 = aLayoutData[i];
-					if (oLayoutData2 instanceof sap.ui.layout.GridData) {
+					if (oLayoutData2 && oLayoutData2.isA("sap.ui.layout.GridData")) {
 						return oLayoutData2;
 					}
 				}

package/src/sap/ui/layout/GridData.js

@@ -28,7 +28,7 @@ sap.ui.define(['sap/ui/core/LayoutData', './library', "sap/base/Log"],
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/GridRenderer.js

@@ -15,7 +15,7 @@ sap.ui.define(["sap/ui/Device", "sap/ui/layout/library"],
 	/**
 	 * @author SAP SE
 	 * @version
-	 * 1.102.1
+	 * 1.103.0
 	 * @namespace
 	 */
 	var GridRenderer = {

package/src/sap/ui/layout/HorizontalLayout.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/Control', './library', "./HorizontalLayoutRenderer"]
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/PaneContainer.js

@@ -24,7 +24,7 @@ sap.ui.define(['./library', 'sap/ui/core/Element', './AssociativeSplitter', 'sap
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -103,7 +103,7 @@ sap.ui.define(['./library', 'sap/ui/core/Element', './AssociativeSplitter', 'sap
 
 	PaneContainer.prototype._getPanesInInterval = function (iFrom) {
 		return this.getPanes().filter(function(oPane) {
-			return oPane instanceof sap.ui.layout.SplitPane && oPane._isInInterval(iFrom);
+			return oPane && oPane.isA("sap.ui.layout.SplitPane") && oPane._isInInterval(iFrom);
 		});
 	};
 

package/src/sap/ui/layout/ResponsiveFlowLayout.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -720,7 +720,7 @@ sap.ui.define([
 		 * The difference with the function rect() in sap/ui/dom/jquery/rect.js is that the height and width are cut to the
 		 * 1st digit after the decimal separator and this is consistent across all browsers.
 		 * @param {object} oElement The jQuery collection to check
-		 * @returns {object} Object with properties top, left, width and height or null if no such element
+		 * @returns {object|null} Object with properties top, left, width and height or null if no such element
 		 * @private
 		 */
 		ResponsiveFlowLayout.prototype._getElementRect = function (oElement) {

package/src/sap/ui/layout/ResponsiveFlowLayoutData.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/LayoutData', './library', "sap/base/Log"],
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/ResponsiveSplitter.js

@@ -70,7 +70,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/ResponsiveSplitterPage.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/layout/ResponsiveSplitterUtilities.js

@@ -20,7 +20,7 @@ sap.ui.define([], function() {
 		aPanes = oPaneContainer.getPanes();
 		for (var i = 0; i < aPanes.length; i++) {
 			oPane = aPanes[i];
-			if (oPane instanceof sap.ui.layout.SplitPane) {
+			if (oPane && oPane.isA("sap.ui.layout.SplitPane")) {
 				fnCallback(oPane);
 			} else {
 				RSUtil.visitPanes(oPane, fnCallback);

package/src/sap/ui/layout/SplitPane.js

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

package/src/sap/ui/layout/Splitter.js

@@ -68,7 +68,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/SplitterLayoutData.js

@@ -24,7 +24,7 @@ sap.ui.define(['sap/ui/core/LayoutData', './library'],
 	 * (The CSS value "auto" is used internally to recalculate the size of the content
 	 * dynamically and is not directly set as style property.)
 	 * @extends sap.ui.core.LayoutData
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/VerticalLayout.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/changeHandler/AddFormContainer.js

@@ -21,7 +21,7 @@ sap.ui.define([
 		* Change handler for adding a form group.
 		* @alias sap.ui.layout.changeHandler.AddFormContainer
 		* @author SAP SE
-		* @version 1.102.1
+		* @version 1.103.0
 		* @experimental Since 1.48.0
 		*/
 	var AddGroup = { };

package/src/sap/ui/layout/changeHandler/AddFormField.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 *
 	 * @author SAP SE
 	 *
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @experimental Since 1.50.0 This class is experimental and provides only limited functionality. Also the API might be
 	 *               changed in future.

package/src/sap/ui/layout/changeHandler/AddSimpleFormField.js

@@ -91,7 +91,7 @@ sap.ui.define([
 	 *
 	 * @author SAP SE
 	 *
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @experimental Since 1.49.0 This class is experimental and provides only limited functionality. Also the API might be
 	 *               changed in future.

package/src/sap/ui/layout/changeHandler/AddSimpleFormGroup.js

@@ -19,7 +19,7 @@ sap.ui.define([
 		* Change handler for adding a simple form group.
 		* @alias sap.ui.layout.changeHandler.AddSimpleFormGroup
 		* @author SAP SE
-		* @version 1.102.1
+		* @version 1.103.0
 		* @experimental Since 1.27.0
 		*/
 	var AddSimpleFormGroup = {};

package/src/sap/ui/layout/changeHandler/HideSimpleForm.js

@@ -17,7 +17,7 @@ sap.ui.define([
 	 * Change handler for hiding of a control.
 	 * @alias sap.ui.fl.changeHandler.HideControl
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @experimental Since 1.27.0
 	 */
 	var HideForm = { };

package/src/sap/ui/layout/changeHandler/MoveSimpleForm.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 *
 	 * @alias sap.ui.layout.changeHandler.MoveSimpleForm
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @experimental Since 1.34.0
 	 */
 	var MoveSimpleForm = {};
@@ -463,16 +463,33 @@ sap.ui.define([
 	};
 
 	MoveSimpleForm.getChangeVisualizationInfo = function(oChange, oAppComponent) {
+		var oSourceParentContainer;
+		var oTargetParentContainer;
 		var oMovedElement = oChange.getContent().movedElements[0];
 		var oGroupSelector = oMovedElement.source.groupSelector;
 		var oAffectedControlSelector = JsControlTreeModifier.bySelector(oMovedElement.elementSelector, oAppComponent).getParent().getId();
+		if (oChange.getChangeType() === MoveSimpleForm.CHANGE_TYPE_MOVE_FIELD) {
+			var mPropertyBag = {
+				modifier: JsControlTreeModifier,
+				appComponent: oAppComponent
+			};
+			oSourceParentContainer = oChange.getDependentControl("sourceParent", mPropertyBag).getParent().getId();
+			oTargetParentContainer = oChange.getDependentControl("targetParent", mPropertyBag).getParent().getId();
+			oGroupSelector = {
+				id: oSourceParentContainer
+			};
+		}
 		return {
 			affectedControls: [oAffectedControlSelector],
 			dependentControls: [
 				oGroupSelector && oGroupSelector.id
 					? oGroupSelector
 					: oChange.getContent().targetSelector
-			]
+			],
+			payload: {
+				sourceParentContainer: oSourceParentContainer,
+				targetParentContainer: oTargetParentContainer
+			}
 		};
 	};
 

package/src/sap/ui/layout/changeHandler/RenameFormContainer.js

@@ -18,7 +18,7 @@ sap.ui.define([
 	 *
 	 * @alias sap.ui.layout.changeHandler.RenameFormContainer
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @since 1.48
 	 * @private
 	 * @experimental Since 1.48. This class is experimental and provides only limited functionality. Also the API might be changed in future.

package/src/sap/ui/layout/changeHandler/RenameSimpleForm.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 *
 	 * @alias sap.ui.layout.changeHandler.RenameForm
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @since 1.40
 	 * @private
 	 * @experimental Since 1.40. This class is experimental and provides only limited functionality. Also the API might be changed in future.

package/src/sap/ui/layout/changeHandler/UnhideSimpleForm.js

@@ -13,7 +13,7 @@ sap.ui.define([
 	 * Change handler for hiding of a control.
 	 * @alias sap.ui.fl.changeHandler.HideControl
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @experimental Since 1.27.0
 	 */
 	var UnhideForm = { };

package/src/sap/ui/layout/cssgrid/CSSGrid.js

@@ -96,7 +96,7 @@ sap.ui.define([
 	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout MDN web docs: CSS Grid Layout}
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.core.Control
 	 * @implements sap.ui.layout.cssgrid.IGridConfigurable

package/src/sap/ui/layout/cssgrid/GridBasicLayout.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * Applies a sap.ui.layout.cssgrid.GridSettings to a provided DOM element or Control.
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.layout.cssgrid.GridLayoutBase
 	 *

package/src/sap/ui/layout/cssgrid/GridBoxLayout.js

@@ -48,7 +48,7 @@ sap.ui.define([
 	 * Applies a sap.ui.layout.cssgrid.GridSettings to a provided DOM element or Control.
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.layout.cssgrid.GridLayoutBase
 	 *

package/src/sap/ui/layout/cssgrid/GridItemLayoutData.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * Holds layout data for a grid item.
 	 *
 	 * @extends sap.ui.core.LayoutData
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/cssgrid/GridLayoutBase.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * Applies a sap.ui.layout.cssgrid.GridSettings to a provided DOM element or Control.
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.base.ManagedObject
 	 *
@@ -201,9 +201,10 @@ sap.ui.define([
 	};
 
 	/**
-	 * Should return sap.ui.layout.cssgrid.GridSettings - The active GridSettings
-	 * Must be implemented by child classes
+	 * Should return the active GridSettings.
+	 * Must be implemented by child classes.
 	 * @abstract
+	 * @returns {sap.ui.layout.cssgrid.GridSettings}
 	 * @public
 	 */
 	GridLayoutBase.prototype.getActiveGridSettings = function () {

package/src/sap/ui/layout/cssgrid/GridLayoutDelegate.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.base.Object
 	 *
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @alias sap.ui.layout.cssgrid.GridLayoutDelegate
 	 * @public
 	 */

package/src/sap/ui/layout/cssgrid/GridResponsiveLayout.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * Have to possibility to hold multiple sap.ui.layout.cssgrid.GridSettings and apply the currently active GridSettings.
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.layout.cssgrid.GridLayoutBase
 	 *

package/src/sap/ui/layout/cssgrid/GridSettings.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * Holds a set of CSS display:grid properties
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.base.ManagedObject
 	 *

package/src/sap/ui/layout/cssgrid/ResponsiveColumnItemLayoutData.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * Holds layout data for an item inside a responsive column layout.
 	 *
 	 * @extends sap.ui.core.LayoutData
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @since 1.72
 	 * @constructor

package/src/sap/ui/layout/cssgrid/ResponsiveColumnLayout.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	 * Grid row's height is dynamically determined by the height of the highest grid element on this row.
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @extends sap.ui.layout.cssgrid.GridLayoutBase
 	 *

package/src/sap/ui/layout/designtime/form/FormContainer.designtime.js

@@ -33,7 +33,7 @@ sap.ui.define([
 		var oForm = fnFindForm(oFormContainer);
 		if (oForm &&
 			oForm.getLayout() &&
-			oForm.getLayout().getMetadata().getName() === "sap.ui.layout.form.GridLayout") {
+			oForm.getLayout().isA("sap.ui.layout.form.GridLayout")) {
 			return false;
 		}
 		return true;

package/src/sap/ui/layout/form/ColumnContainerData.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/ColumnElementData.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/ColumnLayout.js

@@ -60,7 +60,7 @@ sap.ui.define([
 	 * This control cannot be used stand-alone, it just renders a <code>Form</code> control,
 	 * so it must be assigned to a <code>Form</code> control using the <code>layout</code> aggregation.
 	 * @extends sap.ui.layout.form.FormLayout
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/Form.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -246,7 +246,7 @@ sap.ui.define([
 	 * If the <code>FormContainer</code> has a DOM representation this function returns it,
 	 * independent from the ID of this DOM element
 	 * @param {sap.ui.layout.form.FormContainer} oContainer <code>FormContainer</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	Form.prototype.getContainerRenderedDomRef = function(oContainer) {
@@ -265,7 +265,7 @@ sap.ui.define([
 	 * If the <code>FormElement</code> has a DOM representation this function returns it,
 	 * independent from the ID of this DOM element
 	 * @param {sap.ui.layout.form.FormElement} oElement <code>FormElement</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	Form.prototype.getElementRenderedDomRef = function(oElement) {

package/src/sap/ui/layout/form/FormContainer.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -241,7 +241,7 @@ sap.ui.define([
 	 * As Elements must not have a DOM reference it is not sure if one exists
 	 * If the FormContainer has a DOM representation this function returns it,
 	 * independent from the ID of this DOM element
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	FormContainer.prototype.getRenderedDomRef = function(){
@@ -262,7 +262,7 @@ sap.ui.define([
 	 * If the FormElement has a DOM representation this function returns it,
 	 * independent from the ID of this DOM element
 	 * @param {sap.ui.layout.form.FormElement} oElement FormElement
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	FormContainer.prototype.getElementRenderedDomRef = function(oElement){

package/src/sap/ui/layout/form/FormElement.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -290,7 +290,7 @@ sap.ui.define([
 	 * As Elements must not have a DOM reference it is not sure if one exists
 	 * If the FormElement has a DOM representation this function returns it,
 	 * independent from the ID of this DOM element
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	FormElement.prototype.getRenderedDomRef = function(){

package/src/sap/ui/layout/form/FormLayout.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -895,7 +895,7 @@ sap.ui.define([
 	 * As Elements must not have a DOM reference it is not sure if one exists
 	 * In this basic <code>FormLayout</code> each <code>FormContainer</code> has its own DOM.
 	 * @param {sap.ui.layout.form.FormContainer} oContainer <code>FormContainer</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	FormLayout.prototype.getContainerRenderedDomRef = function(oContainer) {

package/src/sap/ui/layout/form/GridContainerData.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/GridElementData.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.LayoutData
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/GridLayout.js

@@ -28,7 +28,7 @@ sap.ui.define(['sap/ui/layout/library', './FormLayout', './GridLayoutRenderer'],
 	 * @extends sap.ui.layout.form.FormLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -202,7 +202,7 @@ sap.ui.define(['sap/ui/layout/library', './FormLayout', './GridLayoutRenderer'],
 	 * In <code>GridLayout</code> a <code>FormContainer</code> can't have a surrounding DOM element,
 	 * so it always returns null
 	 * @param {sap.ui.layout.form.FormContainer} oContainer <code>FormContainer</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	GridLayout.prototype.getContainerRenderedDomRef = function(oContainer) {

package/src/sap/ui/layout/form/ResponsiveGridLayout.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 *
 	 * This control cannot be used stand-alone, it just renders a <code>Form</code>, so it must be assigned to a <code>Form</code> using the <code>layout</code> aggregation.
 	 * @extends sap.ui.layout.form.FormLayout
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -415,7 +415,7 @@ sap.ui.define([
 	 * In this case, the panel's DOM reference is returned, otherwise the DOM reference
 	 * of the <code>Grid</code> rendering the container's content.
 	 * @param {sap.ui.layout.form.FormContainer} oContainer <code>FormContainer</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	ResponsiveGridLayout.prototype.getContainerRenderedDomRef = function(oContainer) {
@@ -443,7 +443,7 @@ sap.ui.define([
 	 * In this Layout a <code>FormElement</code> has no DOM representation,
 	 * so null will always be returned
 	 * @param {sap.ui.layout.form.FormElement} oElement <code>FormElement</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	ResponsiveGridLayout.prototype.getElementRenderedDomRef = function(oElement) {

package/src/sap/ui/layout/form/ResponsiveLayout.js

@@ -50,7 +50,7 @@ sap.ui.define([
 	 * @extends sap.ui.layout.form.FormLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public
@@ -312,7 +312,7 @@ sap.ui.define([
 	 * In this case, the panel's DOM reference is returned, otherwise the DOM reference
 	 * of the <code>ResponsiveFlowLayout</code> rendering the container's content.
 	 * @param {sap.ui.layout.form.FormContainer} oContainer <code>FormContainer</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	ResponsiveLayout.prototype.getContainerRenderedDomRef = function(oContainer) {
@@ -340,7 +340,7 @@ sap.ui.define([
 	 * In this Layout each <code>FormElement</code> is represented by an own ResponsiveFlowLayout.
 	 * So the DOM of this <code>ResponsiveFlowLayout</code> is returned
 	 * @param {sap.ui.layout.form.FormElement} oElement <code>FormElement</code>
-	 * @return {Element} The Element's DOM representation or null
+	 * @return {Element|null} The Element's DOM representation or null
 	 * @private
 	 */
 	ResponsiveLayout.prototype.getElementRenderedDomRef = function(oElement) {

package/src/sap/ui/layout/form/SemanticFormElement.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.ui.layout.form.FormElement
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/form/SimpleForm.js

@@ -67,7 +67,7 @@ sap.ui.define([
 	 * <b>Note:</b> If a more complex form is needed, use the <code>{@link sap.ui.layout.form.Form Form}</code> control instead.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/layout/library.js

@@ -20,13 +20,13 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.layout
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.0
 	 * @since 1.15
 	 * @public
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name : "sap.ui.layout",
-		version: "1.102.1",
+		version: "1.103.0",
 		dependencies: ["sap.ui.core"],
 		designtime: "sap/ui/layout/designtime/library.designtime",
 		types: [
@@ -494,13 +494,13 @@ sap.ui.define([
 			 */
 			ShadeD: "ShadeD",
 			/**
-			 * Shade E - available only for Fiori 3 theme
+			 * Shade E - available only for SAP Quartz and Horizon themes
 			 *
 			 * @public
 			 */
 			ShadeE: "ShadeE",
 			/**
-			 * Shade F - available only for Fiori 3 theme
+			 * Shade F - available only for SAP Quartz and Horizon themes
 			 *
 			 * @public
 			 */

package/src/sap/ui/layout/themes/base/BlockLayout.less

@@ -8,11 +8,13 @@
 @_sap_ui_layout_BlockLayout_BackgroundDashboardMargin: 0.25rem;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin: 0.5rem;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardAfterScrollbarMargin: 0.375rem;
-
-@_sap_ui_layout_BlockLayout_LinkTextShadow: @sapUiShadowText;
-
 @_sap_ui_layout_BlockLayout_BackgroundDashboardColor: @sapUiContentForegroundTextColor;
 @_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius: 0;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow: @sapUiShadowLevel0;
+@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset: 0;
+
+@_sap_ui_layout_BlockLayout_LinkTextShadow: @sapUiShadowText;
+@_sap_ui_layout_BlockLayout_CellTextColor: @sapUiContentForegroundTextColor;
 
 .setCellsColorDoubles (@evenCell, @oddCell) {
 	// Match every even cell
@@ -36,7 +38,7 @@
 	font-family: @sapUiFontFamily;
 	font-weight: normal;
 	font-size: 0.875rem;
-	color: @sapUiContentForegroundTextColor;
+	color: @_sap_ui_layout_BlockLayout_CellTextColor;
 	padding: 1rem;
 
 	> .sapUiIcon {
@@ -129,11 +131,15 @@
 	.sapUiBlockLayoutCell {
 		font-weight: normal;
 		color: @_sap_ui_layout_BlockLayout_BackgroundDashboardColor;
+
+		// use padding and negative margin to display box-shadow outside of the cell, because it has overflow: hidden
+		padding: @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset;
+		margin: -@_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadowOffset;
 	}
 
 	.sapUiBlockCellContent {
 		background-color: @sapUiGroupContentBackground;
-		box-shadow: @sapUiShadowLevel0;
+		box-shadow: @_sap_ui_layout_BlockLayout_BackgroundDashboardCellShadow;
 		margin: @_sap_ui_layout_BlockLayout_BackgroundDashboardMargin;
 		border-radius: @_sap_ui_layout_BlockLayout_BackgroundDashboardBorderRadius;
 	}
@@ -146,19 +152,44 @@
 	}
 
 	&:not(.sapUiBlockLayoutSizeS) {
-		.sapUiBlockLayoutCell:first-of-type .sapUiBlockCellContent {
-			margin-left: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust first cell in a row with 0.5rem on the left
+		.sapUiBlockLayoutCell:first-of-type {
+			margin-left: 0;
+			padding-left: 0;
+
+			.sapUiBlockCellContent {
+				margin-left: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust first cell in a row with 0.5rem on the left
+			}
 		}
-		.sapUiBlockLayoutCell:last-of-type .sapUiBlockCellContent {
-			margin-right: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust last cell in a row with 0.5rem on the right
+
+		.sapUiBlockLayoutCell:last-of-type {
+			margin-right: 0;
+			padding-right: 0;
+
+			.sapUiBlockCellContent {
+				margin-right: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust last cell in a row with 0.5rem on the right
+			}
 		}
 
-		.sapUiBlockLayoutRow:first-of-type .sapUiBlockCellContent {
-			margin-top: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust spacing at the top for all cells in the first row
+		.sapUiBlockLayoutRow:first-of-type {
+			.sapUiBlockLayoutCell {
+				margin-top: 0;
+				padding-top: 0;
+			}
+
+			.sapUiBlockCellContent {
+				margin-top: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust spacing at the top for all cells in the first row
+			}	
 		}
 
-		.sapUiBlockLayoutRow:last-of-type .sapUiBlockCellContent {
-			margin-bottom: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust spacing at the bottom for all cells in the last row
+		.sapUiBlockLayoutRow:last-of-type {
+			.sapUiBlockLayoutCell {
+				margin-bottom: 0;
+				padding-bottom: 0;
+			}
+
+			.sapUiBlockCellContent {
+				margin-bottom: @_sap_ui_layout_BlockLayout_BackgroundDashboardEdgeChildMargin; // Adjust spacing at the bottom for all cells in the last row
+			}
 		}
 	}
 
@@ -170,12 +201,26 @@
 			margin-right: 0.5rem;
 		}
 
-		.sapUiBlockLayoutRow:first-of-type .sapUiBlockLayoutCell:first-of-type .sapUiBlockCellContent {
-			margin-top: 0.5rem; // Add 0.5rem spacing for the first cell in the first row
+		.sapUiBlockLayoutRow:first-of-type {
+			.sapUiBlockLayoutCell {
+				margin-top: 0;
+				padding-top: 0;
+
+				&:first-of-type .sapUiBlockCellContent {
+					margin-top: 0.5rem; // Add 0.5rem spacing for the first cell in the first row
+				}
+			}
 		}
 
-		.sapUiBlockLayoutRow:last-of-type .sapUiBlockLayoutCell:last-of-type .sapUiBlockCellContent {
-			margin-bottom: 0.5rem; // Add 0.5rem spacing for the last cell in the last row
+		.sapUiBlockLayoutRow:last-of-type {
+			.sapUiBlockLayoutCell {
+				margin-bottom: 0;
+				padding-bottom: 0;
+	
+				&:last-of-type .sapUiBlockCellContent {
+					margin-bottom: 0.5rem; // Add 0.5rem spacing for the last cell in the last row
+				}
+			}
 		}
 	}
 }

package/src/sap/ui/layout/themes/base/BlockLayoutCell.less

@@ -6,8 +6,6 @@
 @_sap_ui_layout_BlockLayoutCell_background: transparent;
 
 .sapUiBlockLayoutCell {
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
 	overflow: hidden;
 }

package/src/sap/ui/layout/themes/base/BlockLayoutRow.less

@@ -4,15 +4,12 @@
 /* ============================================= */
 
 .sapUiBlockScrollingRow {
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
-	-webkit-flex-wrap: nowrap;
 	flex-wrap: nowrap;
-	overflow: auto;
+	overflow-x: auto;
+	overflow-y: hidden;
 
 	.sapUiBlockScrollableCell {
-		-webkit-flex-shrink: 0;
 		flex-shrink: 0;
 		width: 40%;
 	}