@openui5/sap.f 1.127.1 → 1.129.0

package/src/sap/f/FlexibleColumnLayout.js

@@ -108,7 +108,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.core.Control
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public
@@ -650,6 +650,27 @@ sap.ui.define([
 						 */
 						endColumn : {type : "boolean"}
 					}
+				},
+
+				/**
+				 * Fired when user resize columns.
+				 * @since 1.128
+				 */
+				columnsDistributionChange : {
+					parameters : {
+						/**
+						 * The current <code>media</code> - dekstop or tablet.
+						 */
+						media: { type: "string" },
+						/**
+						 * The value of the <code>layout</code> property.
+						 */
+						layout: { type: "string" },
+						/**
+						 * Sizes of all columns in percentages, separated by '/'.
+						 */
+						columnsSizes : {type : "string"}
+					}
 				}
 			}
 		},
@@ -713,20 +734,11 @@ sap.ui.define([
 		this._boundColumnSeparatorMoveEnd = this._onColumnSeparatorMoveEnd.bind(this);
 		this._oLocalStorage = {};
 		this._bNeverRendered = true;
-	};
 
-	FlexibleColumnLayout.prototype._getLocalStorage = function (iMaxColumnsCount) {
-		if (!iMaxColumnsCount) {
-			iMaxColumnsCount = this.getMaxColumnsCount();
-		}
-		var sKey = (iMaxColumnsCount === 3) ? "desktop" : "tablet";
-		if (!this._oLocalStorage[sKey]) {
-			var sPrefix = sKey === 'desktop' ?
-				FlexibleColumnLayout.STORAGE_PREFIX_DESKTOP :
-				FlexibleColumnLayout.STORAGE_PREFIX_TABLET;
-			this._oLocalStorage[sKey] = new Storage(Storage.Type.local, sPrefix);
-		}
-		return this._oLocalStorage[sKey];
+		this._oBeginColumnWidth =  {
+			tablet: 0,
+			desktop: 0
+		};
 	};
 
 	FlexibleColumnLayout.prototype._announceMessage = function (sResourceBundleKey) {
@@ -765,6 +777,7 @@ sap.ui.define([
 
 		if (this._hasAnyColumnPagesRendered() !== bHadAnyColumnPagesRendered) {
 			this._hideShowColumnSeparators();
+			this._updateSeparatorsAriaPositionInfo();
 		}
 	};
 
@@ -1323,6 +1336,12 @@ sap.ui.define([
 		if (oOptions.updateDetailedActiveClasses) {
 			this._addDetailedActiveClasses(sLayout);
 		}
+
+		if (bHasAnimations) {
+			this._attachAfterAllColumnsResizedOnce(this._updateSeparatorsAriaPositionInfo.bind(this));
+		} else {
+			this._updateSeparatorsAriaPositionInfo();
+		}
 	};
 
 	/**
@@ -1675,6 +1694,7 @@ sap.ui.define([
 		this.toggleStyleClass("sapFFLActiveResize", false);
 		this._oMoveInfo.separator.style.visibility = "";
 		this._oMoveInfo.separator.focus();
+		this._updateAriaPositionInfo(this._oMoveInfo.separator);
 		this._ignoreMouse = false;
 		this._ignoreTouch = false;
 		this._oMoveInfo = null;
@@ -2024,14 +2044,32 @@ sap.ui.define([
 	FlexibleColumnLayout.prototype._saveResizedColumWidths = function() {
 		var sNewLayout = this._oMoveInfo.layout,
 			oColumnPercentWidths = this._convertColumnPxWidthToPercent(this._oMoveInfo.columnWidths, sNewLayout),
-			sNewWidthsDistribution = Object.values(oColumnPercentWidths).join("/");
+			sNewWidthsDistribution = Object.values(oColumnPercentWidths).join("/"),
+			sMediaKey;
 
 		if (this._isValidWidthDistributionForLayout(sNewWidthsDistribution, sNewLayout)) {
-			this._getLocalStorage().put(sNewLayout, sNewWidthsDistribution);
-			this._getLocalStorage().put("begin", oColumnPercentWidths.begin);
+			sMediaKey = this._getMediaKey();
+			this.fireColumnsDistributionChange({
+				media: sMediaKey,
+				layout: sNewLayout,
+				columnsSizes: sNewWidthsDistribution
+			});
+
+			this._oBeginColumnWidth[sMediaKey] = oColumnPercentWidths.begin;
 		}
 	};
 
+	FlexibleColumnLayout.prototype._getMediaKey = function (iMaxColumnsCount) {
+		var sKey;
+
+		if (!iMaxColumnsCount) {
+			iMaxColumnsCount = this.getMaxColumnsCount();
+		}
+		sKey = (iMaxColumnsCount === 3) ? "desktop" : "tablet";
+
+		return sKey;
+	};
+
 	FlexibleColumnLayout.prototype._getNextLayoutOnResizeByDrag = function (oColumnWidths,
 		sPreviousLayout, sSeparator, bForwardDirection, bResizeEnd) {
 			function dragged(oOptions) {
@@ -2168,6 +2206,78 @@ sap.ui.define([
 		return oLayoutMatchers[sLayout]();
 	};
 
+	/**
+	 * Obtains the range of the possible possitions along the X-axis of this separator (allowed by the current layout)
+	 * where the start of the axis is the edge of the FlexibleColumnLayout closest to the begin column.
+	 * @param {object} oSeparator the separator HTML element
+	 * @returns {object} the start and end positions
+	 */
+	FlexibleColumnLayout.prototype._getSeparatorMovementRange = function (oSeparator) {
+		var sSeparator = getSeparatorName(oSeparator),
+			sLayout = this.getLayout(),
+			iMaxColumnsForWidth = this.getMaxColumnsCount(),
+			iMaxColumnsForLayoutType = this._getMaxColumnsCountForLayout(sLayout, FlexibleColumnLayout.DESKTOP_BREAKPOINT),
+			bDesktop = iMaxColumnsForWidth === 3,
+			bTablet = iMaxColumnsForWidth === 2,
+			bIsThreeColumnLayout = iMaxColumnsForLayoutType === 3,
+			iTotalSpace = this._iWidth,
+			iSpaceBeforeRange = FlexibleColumnLayout.COLUMN_MIN_WIDTH, // space for the preceding column
+			iSpaceAfterRange = FlexibleColumnLayout.COLUMN_MIN_WIDTH, // space for the suceeding column
+			iRangeLength;
+
+		if (bDesktop && sSeparator === "end") {
+			// (the width of the 'begin' column is fixed, as the user cannot resize it by moving the 'end' separator)
+			iSpaceBeforeRange = this._$columns["begin"].get(0).offsetWidth + FlexibleColumnLayout.COLUMN_MIN_WIDTH; // space for the preceding columns
+			if (sLayout === LT.ThreeColumnsMidExpandedEndHidden) {
+				iSpaceAfterRange = 0; // the 'end' separator is adjacent to the FCL edge, nothing follows it
+			}
+		}
+
+		if (bTablet) {
+			if (sSeparator === "begin" & bIsThreeColumnLayout) {
+				iSpaceBeforeRange = 0; // the 'begin' separator is adjacent to the FCL edge, nothing precedes it
+			}
+			if (sSeparator === "end" && sLayout === LT.ThreeColumnsMidExpandedEndHidden) {
+				iSpaceAfterRange = 0; // the 'end' separator is adjacent to the FCL edge, nothing follows it
+			}
+		}
+
+		// provision space to render the separator itself
+		iSpaceAfterRange += FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH;
+
+		iRangeLength = iTotalSpace - iSpaceBeforeRange - iSpaceAfterRange;
+
+		return {
+			from: iSpaceBeforeRange,
+			to: iSpaceBeforeRange + iRangeLength
+		};
+	};
+
+	FlexibleColumnLayout.prototype._updateAriaPositionInfo = function (oSeparator) {
+		// obtain the range [fromX ... toX] of the possible positions along the X-axis
+		// of this separator (as allowed by the current layout)
+		var oRange = this._getSeparatorMovementRange(oSeparator),
+			iRangeLength = oRange.to - oRange.from,
+			iSeparatorEarliestPossibleX = oRange.from,
+			iSeparatorCurrentX = oSeparator.offsetLeft,
+			iSeparatorAdvanceInsideRange = iSeparatorCurrentX - iSeparatorEarliestPossibleX,
+			 // convert to value inside [0, ..., 100] interval
+			iSeparatorRelativePositionInsideRange = iSeparatorAdvanceInsideRange / iRangeLength * 100,
+			sSeparatorRelativePositionInsideRange = iSeparatorRelativePositionInsideRange.toFixed(2);
+		oSeparator.setAttribute("aria-valuenow", sSeparatorRelativePositionInsideRange);
+	};
+
+	FlexibleColumnLayout.prototype._updateSeparatorsAriaPositionInfo = function () {
+		if (!this._oColumnSeparators) {
+			return;
+		}
+		Object.values(this._oColumnSeparators).forEach(function($separator) {
+			if ($separator.get(0).style.display !== "none") {
+				this._updateAriaPositionInfo($separator.get(0));
+			}
+		}, this);
+	};
+
 	/**
 	 * Obtains the current width of a column
 	 *
@@ -3006,8 +3116,14 @@ sap.ui.define([
 	 * @ui5-restricted sap.f.FlexibleColumnLayoutSemanticHelper
 	 */
 	FlexibleColumnLayout.prototype._getColumnWidthDistributionForLayout = function (sLayout, bAsIntArray, iMaxColumnsCount) {
-		var sColumnWidthDistribution = this._getLocalStorage(iMaxColumnsCount).get(sLayout),
-			iBeginWidth = this._getLocalStorage(iMaxColumnsCount).get("begin"),
+		var oLayoutData = this.getLayoutData(),
+			sMediaKey = this._getMediaKey(iMaxColumnsCount),
+			oLayoutDataPerMedia = oLayoutData?.isA("sap.f.FlexibleColumnLayoutData")
+				&& (sMediaKey === "desktop" ? oLayoutData.getDesktopLayoutData() : oLayoutData.getTabletLayoutData()),
+			sGetterNameLayout = "get" + sLayout,
+			sColumnWidthDistribution = oLayoutDataPerMedia?.[sGetterNameLayout]?.(),
+			bIsValidDistribution = sColumnWidthDistribution && this._isValidWidthDistributionForLayout(sColumnWidthDistribution, sLayout),
+			iBeginWidth = this._oBeginColumnWidth[sMediaKey],
 			vResult,
 			vResultAsArray;
 
@@ -3017,8 +3133,7 @@ sap.ui.define([
 
 			vResult = "0/0/0";
 
-		} else if (iMaxColumnsCount > 1
-			&& sColumnWidthDistribution) {
+		} else if (iMaxColumnsCount > 1 && sColumnWidthDistribution && bIsValidDistribution) {
 			vResult = sColumnWidthDistribution;
 		} else {
 			vResult = this._getDefaultColumnWidthDistributionForLayout(sLayout, iMaxColumnsCount);

package/src/sap/f/FlexibleColumnLayoutAccessibleLandmarkInfo.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 * @since 1.95
 	 *
 	 * @constructor

package/src/sap/f/FlexibleColumnLayoutData.js

@@ -0,0 +1,52 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides element sap.f.FlexibleColumnLayoutData
+sap.ui.define(['sap/ui/core/LayoutData'],
+	function(LayoutData) {
+		"use strict";
+
+		/**
+		 * Constructor for a new <code>sap.f.FlexibleColumnLayoutData</code>.
+		 *
+		 * @param {string} [sId] ID for the new element, generated automatically if no ID is given
+		 * @param {object} [mSettings] Initial settings for the new element.
+		 *
+		 * @class
+		 * Holds layout data for <code>sap.f.FlexibleColumnLayout</code>.
+		 * Allows LayoutData of type <code>sap.f.FlexibleColumnLayoutDataForDesktop</code> or <code>sap.f.FlexibleColumnLayoutFlexibleColumnLayoutDataForTablet</code>
+		 *
+		 *
+		 * @author SAP SE
+		 * @version 1.129.0
+		 *
+		 * @extends sap.ui.core.LayoutData
+		 *
+		 * @since 1.128
+		 * @public
+		 * @constructor
+		 * @alias sap.f.FlexibleColumnLayoutData
+		 */
+		var FlexibleColumnLayoutData = LayoutData.extend("sap.f.FlexibleColumnLayoutData", /** @lends sap.f.FlexibleColumnLayoutData.prototype */ {
+			metadata: {
+
+				library: "sap.f",
+				aggregations: {
+
+					/**
+					 * Allows LayoutData of type <code>sap.f.FlexibleColumnLayoutDataForDesktop</code>
+					 */
+					desktopLayoutData: {type: "sap.f.FlexibleColumnLayoutDataForDesktop", multiple: false, singularName: "desktopLayoutData"},
+					/**
+					 * Allows LayoutData of type <code>sap.f.FlexibleColumnLayoutDataForTablet</code>
+					 */
+					tabletLayoutData: {type: "sap.f.FlexibleColumnLayoutDataForTablet", multiple: false, singularName: "tabletLayoutData"}
+				}
+			}
+		});
+
+		return FlexibleColumnLayoutData;
+	});

package/src/sap/f/FlexibleColumnLayoutDataForDesktop.js

@@ -0,0 +1,72 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides element sap.f.FlexibleColumnLayoutDataForDesktop
+sap.ui.define(['sap/ui/core/LayoutData'],
+	function(LayoutData) {
+		"use strict";
+
+		/**
+		 * Constructor for a new <code>sap.f.FlexibleColumnLayoutDataForDesktop</code>.
+		 *
+		 * @param {string} [sId] ID for the new element, generated automatically if no ID is given
+		 * @param {object} [mSettings] Initial settings for the new element.
+		 *
+		 * @class
+		 * Holds layout data for columns of <code>sap.f.FlexibleColumnLayout</code> on desktop.
+		 *
+		 *
+		 * @author SAP SE
+		 * @version 1.129.0
+		 *
+		 * @extends sap.ui.core.LayoutData
+		 *
+		 * @since 1.128
+		 * @public
+		 * @constructor
+		 * @alias sap.f.FlexibleColumnLayoutDataForDesktop
+		 */
+		var FlexibleColumnLayoutDataForDesktop = LayoutData.extend("sap.f.FlexibleColumnLayoutDataForDesktop", /** @lends sap.f.FlexibleColumnLayoutDataForDesktop.prototype */ {
+			metadata: {
+
+				library: "sap.f",
+				properties: {
+
+					/**
+					 * Columns distribution of TwoColumnsBeginExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					twoColumnsBeginExpanded: {type: "string", group: "Appearance", defaultValue: "67/33/0"},
+
+					/**
+					 * Columns distribution of TwoColumnsMidExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					twoColumnsMidExpanded: {type: "string", group: "Appearance", defaultValue: "33/67/0"},
+
+					/**
+					 * Columns distribution of ThreeColumnsBeginExpandedEndHidden layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsBeginExpandedEndHidden: {type: "string", group: "Appearance", defaultValue: "67/33/0"},
+
+					/**
+					 * Columns distribution of ThreeColumnsEndExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsEndExpanded: {type: "string", group: "Appearance", defaultValue: "25/25/50"},
+
+					/**
+					 * Columns distribution of ThreeColumnsMidExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsMidExpanded: {type: "string", group: "Appearance", defaultValue: "25/50/25"},
+
+					/**
+					 * Columns distribution of ThreeColumnsMidExpandedEndHidden layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsMidExpandedEndHidden: {type: "string", group: "Appearance", defaultValue: "33/67/0"}
+				}
+			}
+		});
+
+		return FlexibleColumnLayoutDataForDesktop;
+	});

package/src/sap/f/FlexibleColumnLayoutDataForTablet.js

@@ -0,0 +1,71 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides element sap.f.FlexibleColumnLayoutDataForTablet
+sap.ui.define(['sap/ui/core/LayoutData'],
+	function(LayoutData) {
+		"use strict";
+
+		/**
+		 * Constructor for a new <code>sap.f.FlexibleColumnLayoutDataForTablet</code>.
+		 *
+		 * @param {string} [sId] ID for the new element, generated automatically if no ID is given
+		 * @param {object} [mSettings] Initial settings for the new element.
+		 *
+		 * @class
+		 * Holds layout data for columns of <code>sap.f.FlexibleColumnLayout</code> on tablet.
+		 *
+		 *
+		 * @author SAP SE
+		 * @version 1.129.0
+		 *
+		 * @extends sap.ui.core.LayoutData
+		 *
+		 * @since 1.128
+		 * @public
+		 * @constructor
+		 * @alias sap.f.FlexibleColumnLayoutDataForTablet
+		 */
+		var FlexibleColumnLayoutDataForTablet = LayoutData.extend("sap.f.FlexibleColumnLayoutDataForTablet", /** @lends sap.f.FlexibleColumnLayoutDataForTablet.prototype */ {
+			metadata: {
+
+				library: "sap.f",
+				properties: {
+					/**
+					 * Columns distribution of TwoColumnsBeginExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					twoColumnsBeginExpanded: {type: "string", group: "Appearance", defaultValue: "67/33/0"},
+
+					/**
+					 * Columns distribution of TwoColumnsMidExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					twoColumnsMidExpanded: {type: "string", group: "Appearance", defaultValue: "33/67/0"},
+
+					/**
+					 * Columns distribution of ThreeColumnsBeginExpandedEndHidden layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsBeginExpandedEndHidden: {type: "string", group: "Appearance", defaultValue: "67/33/0"},
+
+					/**
+					 * Columns distribution of ThreeColumnsEndExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsEndExpanded: {type: "string", group: "Appearance", defaultValue: "0/33/67"},
+
+					/**
+					 * Columns distribution of ThreeColumnsMidExpanded layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsMidExpanded: {type: "string", group: "Appearance", defaultValue: "0/67/33"},
+
+					/**
+					 * Columns distribution of ThreeColumnsMidExpandedEndHidden layout in the format "begin/mid/end", where values are set in percentages.
+					 */
+					threeColumnsMidExpandedEndHidden: {type: "string", group: "Appearance", defaultValue: "33/67/0"}
+				}
+			}
+		});
+
+		return FlexibleColumnLayoutDataForTablet;
+	});

package/src/sap/f/FlexibleColumnLayoutSemanticHelper.js

@@ -49,7 +49,7 @@ sap.ui.define([
 	 *
 	 * For more information, see {@link sap.f.FlexibleColumnLayoutSemanticHelper#getCurrentUIState} and {@link sap.f.FlexibleColumnLayoutSemanticHelper#getNextUIState}
 	 *
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 * @param {sap.f.FlexibleColumnLayout} oFlexibleColumnLayout
 	 * The <code>sap.f.FlexibleColumnLayout</code> object whose state will be manipulated.
 	 *

package/src/sap/f/GridContainer.js

@@ -177,7 +177,7 @@ sap.ui.define([
 	 * @see {@link sap.f.dnd.GridDropInfo}
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @extends sap.ui.core.Control
 	 *

package/src/sap/f/GridContainerItemLayoutData.js

@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/core/LayoutData'],
 		 * @see {@link topic:32d4b9c2b981425dbc374d3e9d5d0c2e Grid Controls}
 		 *
 		 * @author SAP SE
-		 * @version 1.127.1
+		 * @version 1.129.0
 		 *
 		 * @extends sap.ui.core.LayoutData
 		 *

package/src/sap/f/GridContainerSettings.js

@@ -58,14 +58,14 @@ sap.ui.define([
 	 * Can be used to define the sizes of columns and rows for different screen sizes, by using the <code>layout</code> aggregations of <code>sap.f.GridContainer</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @see {@link topic:32d4b9c2b981425dbc374d3e9d5d0c2e Grid Controls}
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @since 1.65
 	 * @public

package/src/sap/f/GridList.js

@@ -93,7 +93,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.127.1
+	 * @version 1.129.0
 	 *
 	 * @extends sap.m.ListBase
 	 * @implements sap.ui.layout.cssgrid.IGridConfigurable

package/src/sap/f/GridListItem.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @since 1.70
 	 * @constructor

package/src/sap/f/IllustratedMessage.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * @extends sap.m.IllustratedMessage
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/Illustration.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.Illustration
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/PlanningCalendarInCardLegend.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/m/PlanningCalendarLegend', "sap/ui/core/Lib", 'sap/ui/unifie
 		 * @extends sap.m.PlanningCalendarLegend
 		 *
 		 * @author SAP SE
-		 * @version 1.127.1
+		 * @version 1.129.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/f/ProductSwitch.js

@@ -34,7 +34,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.127.1
+		 * @version 1.129.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/ProductSwitchItem.js

@@ -40,7 +40,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.127.1
+		 * @version 1.129.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/SearchManager.js

@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/core/Element', 'sap/ui/base/ManagedObjectObserver', './sh
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.127.1
+		 * @version 1.129.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/ShellBar.js

@@ -58,7 +58,7 @@ function(
 	 * @implements sap.f.IShellBar, sap.m.IBar, sap.tnt.IToolHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/SidePanel.js

@@ -151,7 +151,7 @@ sap.ui.define([
  	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public
@@ -468,7 +468,7 @@ sap.ui.define([
 				this.getItems().length && this._fixSidePanelWidth();
 			}
 		} else {
-			if (this.getDomRef().querySelector(".sapFSPMain").scrollTop === 0) {
+			if (this.getDomRef().querySelector(".sapFSPMain").scrollTop === 0 && !this._isSingleItem()) {
 				this.setActionBarExpanded(true);
 			}
 		}
@@ -498,7 +498,8 @@ sap.ui.define([
 			bSideContentExpanded = this._getSideContentExpanded(),
 			bSideExpanded = this.getActionBarExpanded() || bSideContentExpanded,
 			bCtrlOrCmd = oEvent.ctrlKey || oEvent.metaKey,
-			bSplitterFocused = document.activeElement === this.getDomRef().querySelector(".sapFSPSplitterBar");
+			bSplitterFocused = document.activeElement === this.getDomRef().querySelector(".sapFSPSplitterBar"),
+			iDirectionModifier = this.getSidePanelPosition() === SidePanelPosition.Right ? 1 : -1;
 
 		if (bCtrlOrCmd && oEvent.which === KeyCodes.ARROW_LEFT) {
 			oEvent.preventDefault();
@@ -539,10 +540,14 @@ sap.ui.define([
 					this._setSidePanelResizePosition(SIDE_PANEL_POSITION_MIN_WIDTH);
 					break;
 				case KeyCodes.ARROW_LEFT:
+					this._moveSidePanelResizePositionWith(oEvent.shiftKey ? this.getSidePanelResizeLargerStep() * iDirectionModifier : this.getSidePanelResizeStep() * iDirectionModifier);
+					break;
 				case KeyCodes.ARROW_UP:
 					this._moveSidePanelResizePositionWith(oEvent.shiftKey ? this.getSidePanelResizeLargerStep() : this.getSidePanelResizeStep());
 					break;
 				case KeyCodes.ARROW_RIGHT:
+					this._moveSidePanelResizePositionWith(oEvent.shiftKey ? -this.getSidePanelResizeLargerStep() * iDirectionModifier : -this.getSidePanelResizeStep() * iDirectionModifier);
+					break;
 				case KeyCodes.ARROW_DOWN:
 					this._moveSidePanelResizePositionWith(oEvent.shiftKey ? -this.getSidePanelResizeLargerStep() : -this.getSidePanelResizeStep());
 					break;
@@ -1082,13 +1087,18 @@ sap.ui.define([
 	};
 
 	SidePanel.prototype._getSideContentHeaderIcon = function() {
-		var oSelectedItem = this._getSelectedItem();
+		var oSelectedItem = this._getSelectedItem(),
+			sSrc = oSelectedItem && oSelectedItem.getIcon();
+
+		if (!sSrc) {
+			return null;
+		}
 
 		if (!this._contentHeaderIcon) {
 			this._contentHeaderIcon = new Icon();
 		}
 
-		oSelectedItem && this._contentHeaderIcon.setSrc(oSelectedItem.getIcon());
+		oSelectedItem && this._contentHeaderIcon.setSrc(sSrc);
 
 		return this._contentHeaderIcon;
 	};
@@ -1189,7 +1199,7 @@ sap.ui.define([
 			setTimeout(function() {
 				bForward = iTop > this._iLastScrollPosition;
 				bBackward = iTop < this._iLastScrollPosition;
-				this.setActionBarExpanded(!bForward || bBackward);
+				!this._isSingleItem() && this.setActionBarExpanded(!bForward || bBackward);
 				this._iLastScrollPosition = iTop;
 				this.bScrolling = false;
 			}.bind(this), 100);
@@ -1329,6 +1339,10 @@ sap.ui.define([
 			oSide = this.getDomRef().querySelector(".sapFSPSide"),
 			iSidePanelWidth = parseInt(window.getComputedStyle(oSide)['width']);
 
+		if (this.getSidePanelPosition() === SidePanelPosition.Left) {
+			iDeltaX = -iDeltaX;
+		}
+
 		oEvent.preventDefault();
 
 		if (iSidePanelWidth) {

package/src/sap/f/SidePanelItem.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Item
 	 *
 	 * @author SAP SE
-	 * @version 1.127.1
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public