@openui5/sap.f 1.138.0 → 1.140.0

package/src/sap/f/CardBase.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public
@@ -310,11 +310,23 @@ sap.ui.define([
 		return this._ariaText.getId();
 	};
 
+	/**
+	 * @private
+	 * @ui5-restricted sap.f
+	 * @returns {boolean} hook to determine if the card is a tile variant
+	 */
+	CardBase.prototype.isTileDisplayVariant = function () {
+		return false;
+	};
+
 	CardBase.prototype._getAriaDescribedByIds = function () {
 		const bHasCardBadgeCustomData = this._getCardBadgeCustomData().length > 0;
 		const aIds = [];
 
-		aIds.push(this._describedByCardTypeText.getId());
+
+		if (!this.isTileDisplayVariant()) {
+			aIds.push(this._describedByCardTypeText.getId());
+		}
 
 		if (this.isInteractive() && this.isRoleListItem()) {
 			aIds.push(this._describedByInteractiveText.getId());

package/src/sap/f/CardRenderer.js

@@ -33,7 +33,10 @@ sap.ui.define([
 	CardRenderer.render = function (oRm, oCard) {
 		var oHeader = oCard._getHeaderAggregation(),
 			bHeaderTop = oHeader && oCard.getCardHeaderPosition() === HeaderPosition.Top,
-			bHasCardBadgeCustomData = oCard._getCardBadgeCustomData().length > 0;
+			bHasCardBadgeCustomData = oCard._getCardBadgeCustomData().length > 0,
+			oContent = oCard.getCardContent(),
+			bHasContent = !!oContent,
+			bIsInteractive = oCard.isInteractive();
 
 		oRm.openStart("div", oCard);
 		this.renderContainerAttributes(oRm, oCard);
@@ -60,10 +63,19 @@ sap.ui.define([
 		this.renderFooterSection(oRm, oCard);
 
 		oRm.renderControl(oCard._ariaText);
-		oRm.renderControl(oCard._ariaContentText);
 
-		oRm.renderControl(oCard._describedByCardTypeText);
-		oRm.renderControl(oCard._describedByInteractiveText);
+		if (bHasContent) {
+			oRm.renderControl(oCard._ariaContentText);
+		}
+
+		if (!oCard.isTileDisplayVariant()) {
+			oRm.renderControl(oCard._describedByCardTypeText);
+		}
+
+		if (bIsInteractive) {
+			oRm.renderControl(oCard._describedByInteractiveText);
+		}
+
 		if (oCard._invisibleTitle) {
 			oRm.renderControl(oCard._invisibleTitle);
 		}

package/src/sap/f/DynamicPage.js

@@ -118,7 +118,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/DynamicPageAccessibleLandmarkInfo.js

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

package/src/sap/f/DynamicPageHeader.js

@@ -64,7 +64,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.138.0
+		 * @version 1.140.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/DynamicPageTitle.js

@@ -95,7 +95,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public
@@ -212,8 +212,9 @@ sap.ui.define([
 
 				/**
 				 * The <code>DynamicPageTitle</code> actions.
-				 * <br><b>Note:</b> The <code>actions</code> aggregation accepts any UI5 control, but it`s recommended to use controls,
-				 * suitable for {@link sap.m.Toolbar} and {@link sap.m.OverflowToolbar}.
+				 * <br><b>Note:</b> The <code>actions</code> aggregation accepts any UI5 control.
+				 * However, it is best to use buttons or controls that work well inside toolbars, such
+				 * as those typically used with {@link sap.m.Toolbar} and {@link sap.m.OverflowToolbar}.
 				 *
 				 * <b>Note:</b> If the <code>snappedTitleOnMobile</code> aggregation is set, its
 				 * content overrides this aggregation when the control is viewed on a phone mobile

package/src/sap/f/FlexibleColumnLayout.js

@@ -108,7 +108,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.core.Control
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public
@@ -753,9 +753,13 @@ sap.ui.define([
 	 * Connects the keyboard event listeners so resizing via keyboard will be possible
 	 */
 	FlexibleColumnLayout.prototype._enableKeyboardListeners = function() {
-		this.onsaprightmodifiers     = this._keyListeners.increase;
-		this.onsapleftmodifiers      = this._keyListeners.decrease;
+		this.onsaprightmodifiers     = this._keyListeners.increase; //right or down key to increase column width
+		this.onsapdownmodifiers      = this._keyListeners.increase;
+		this.onsapleftmodifiers      = this._keyListeners.decrease; //left or up key to decrease column width
+		this.onsapupmodifiers        = this._keyListeners.decrease;
 		this.onsapright              = this._keyListeners.increaseMore;
+		this.onsapdown               = this._keyListeners.increaseMore;
+		this.onsapup                 = this._keyListeners.decreaseMore;
 		this.onsapleft               = this._keyListeners.decreaseMore;
 		this.onsapend                = this._keyListeners.max;
 		this.onsaphome               = this._keyListeners.min;

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.138.0
+	 * @version 1.140.0
 	 * @since 1.95
 	 *
 	 * @constructor

package/src/sap/f/FlexibleColumnLayoutData.js

@@ -21,7 +21,7 @@ sap.ui.define(["sap/ui/core/LayoutData", "sap/ui/base/ManagedObjectObserver", "s
 		 *
 		 *
 		 * @author SAP SE
-		 * @version 1.138.0
+		 * @version 1.140.0
 		 *
 		 * @extends sap.ui.core.LayoutData
 		 *

package/src/sap/f/FlexibleColumnLayoutDataForDesktop.js

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/LayoutData'],
 		 *
 		 *
 		 * @author SAP SE
-		 * @version 1.138.0
+		 * @version 1.140.0
 		 *
 		 * @extends sap.ui.core.LayoutData
 		 *

package/src/sap/f/FlexibleColumnLayoutDataForTablet.js

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/LayoutData'],
 		 *
 		 *
 		 * @author SAP SE
-		 * @version 1.138.0
+		 * @version 1.140.0
 		 *
 		 * @extends sap.ui.core.LayoutData
 		 *

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.138.0
+	 * @version 1.140.0
 	 * @param {sap.f.FlexibleColumnLayout} oFlexibleColumnLayout
 	 * The <code>sap.f.FlexibleColumnLayout</code> object whose state will be manipulated.
 	 *

package/src/sap/f/GridContainer.js

@@ -163,7 +163,7 @@ sap.ui.define([
 	 * @see {@link sap.f.dnd.GridDropInfo}
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.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.138.0
+		 * @version 1.140.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.138.0
+	 * @version 1.140.0
 	 *
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @see {@link topic:32d4b9c2b981425dbc374d3e9d5d0c2e Grid Controls}
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+	 * @version 1.140.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.138.0
+		 * @version 1.140.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.138.0
+		 * @version 1.140.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/ProductSwitchItem.js

@@ -9,6 +9,10 @@ sap.ui.define([
 	"sap/ui/core/Control",
 	"sap/ui/core/Icon",
 	"sap/ui/core/library",
+	"sap/m/Avatar",
+	"sap/m/AvatarShape",
+	"sap/m/AvatarImageFitType",
+	"sap/m/AvatarColor",
 	"sap/m/Text",
 	"sap/ui/events/KeyCodes",
 	"sap/f/ProductSwitchItemRenderer"
@@ -17,6 +21,10 @@ sap.ui.define([
 		Control,
 		Icon,
 		library,
+		Avatar,
+		AvatarShape,
+		AvatarImageFitType,
+		AvatarColor,
 		Text,
 		KeyCodes,
 		ProductSwitchItemRenderer
@@ -40,7 +48,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.138.0
+		 * @version 1.140.0
 		 *
 		 * @constructor
 		 * @public
@@ -56,6 +64,14 @@ sap.ui.define([
 					 * It can be an icon from the SAP icon font.
 					 */
 					src: { type: "sap.ui.core.URI", defaultValue: null },
+					 /**
+					 * Defines the image to be displayed as graphical element within the <code>ProductSwitchItem</code>.
+					 *
+					 * <b>Note:</b> This property takes precedence over the <code>src</code> property.
+					 *
+					 * @since 1.140
+					 */
+					imageSrc: { type: "sap.ui.core.URI", defaultValue: null },
 					 /**
 					 * Determines the title of the <code>ProductSwitchItem</code>.
 					 */
@@ -81,6 +97,10 @@ sap.ui.define([
 					target: { type: "string", group: "Behavior", defaultValue: null }
 				},
 				aggregations: {
+					/**
+					* Holds the internally created Avatar.
+					*/
+				   _avatar: { type: "sap.m.Avatar", visibility: "hidden", multiple: false },
 					 /**
 					 * Holds the internally created Icon.
 					 */
@@ -121,6 +141,28 @@ sap.ui.define([
 			return this;
 		};
 
+		/**
+		 * Gets content of aggregation _avatar.
+		 * @returns {sap.m.Avatar} The avatar aggregation instance.
+		 * @private
+		 */
+		ProductSwitchItem.prototype._getAvatar = function () {
+			var oAvatar = this.getAggregation("_avatar");
+
+			if (!oAvatar) {
+				oAvatar = new Avatar({
+					displayShape: AvatarShape.Square,
+					src: this.getImageSrc(),
+					imageFitType: AvatarImageFitType.Contain,
+					backgroundColor: AvatarColor.Transparent
+				});
+
+				this.setAggregation("_avatar", oAvatar);
+			}
+
+			return oAvatar;
+		};
+
 		/**
 		 * Gets content of aggregation _icon.
 		 * @returns {sap.ui.core.Icon}

package/src/sap/f/ProductSwitchItemRenderer.js

@@ -12,16 +12,16 @@ sap.ui.define([],
 		};
 
 		ProductSwitchItemRenderer.render = function (oRm, oControl) {
-			var oProductSwith = oControl._getProductSwitch(),
+			var oProductSwitch = oControl._getProductSwitch(),
 				oAccessibilityState = {
 					role: "menuitemradio"
 				},
 				sTooltip = oControl.getTooltip_AsString();
 
-			if (oProductSwith) {
-				oAccessibilityState.setsize = oProductSwith._getItemsCount();
-				oAccessibilityState.posinset = oProductSwith._getItemPosition(oControl);
-				oAccessibilityState.checked = oControl.getId() === oProductSwith.getSelectedItem() ? "true" : "false";
+			if (oProductSwitch) {
+				oAccessibilityState.setsize = oProductSwitch._getItemsCount();
+				oAccessibilityState.posinset = oProductSwitch._getItemPosition(oControl);
+				oAccessibilityState.checked = oControl.getId() === oProductSwitch.getSelectedItem() ? "true" : "false";
 			}
 
 			oRm.openStart("div", oControl);
@@ -36,9 +36,13 @@ sap.ui.define([],
 				oRm.class("sapFPSItemIconPlaceholder");
 				oRm.class("sapUiTinyMarginBottom");
 				oRm.openEnd();
-					if (oControl.getSrc()) {
-						oRm.renderControl(oControl._getIcon());
-					}
+
+				if (oControl.getImageSrc()) {
+					oRm.renderControl(oControl._getAvatar());
+				} else if (oControl.getSrc()) {
+					oRm.renderControl(oControl._getIcon());
+				}
+
 				oRm.close("span");
 				oRm.openStart("div");
 				oRm.class("sapFPSItemTextSection");

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.138.0
+		 * @version 1.140.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/f/ShellBar.js

@@ -58,7 +58,7 @@ function(
 	 * @implements sap.f.IShellBar, sap.m.IBar
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/SidePanel.js

@@ -153,7 +153,7 @@ sap.ui.define([
  	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/SidePanelItem.js

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

package/src/sap/f/cards/BaseHeader.js

@@ -55,7 +55,7 @@ sap.ui.define([
 	 * @abstract
 	 *
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
 	 * @public
@@ -197,8 +197,7 @@ sap.ui.define([
 
 		this._oToolbarDelegate = {
 			onfocusin: this._onToolbarFocusin,
-			onfocusout: this._onToolbarFocusout,
-			onAfterRendering: this._addMarginToHeaderText
+			onfocusout: this._onToolbarFocusout
 		};
 	};
 
@@ -238,8 +237,6 @@ sap.ui.define([
 			oToolbar.addEventDelegate(this._oToolbarDelegate, this);
 		}
 
-		this._addMarginToHeaderText();
-
 		this.getBannerLines()?.forEach((oText) => {
 			this._enhanceText(oText);
 		});
@@ -266,6 +263,14 @@ sap.ui.define([
 		return !!this.getHref();
 	};
 
+	/**
+	 * If the header must have tile accessibility.
+	 * @returns {boolean} True if card related attributes should not be rendered.
+	 */
+	BaseHeader.prototype.isTile = function () {
+		return !!this.getProperty("useTileLayout");
+	};
+
 	BaseHeader.prototype.onkeydown = function (oEvent) {
 
 		if ((oEvent.which === KeyCodes.SPACE || oEvent.which === KeyCodes.ENTER || oEvent.which === KeyCodes.ESCAPE || oEvent.which === KeyCodes.SHIFT)
@@ -300,7 +305,7 @@ sap.ui.define([
 
 	BaseHeader.prototype.ontap = function (oEvent) {
 		if (this.isLink() && oEvent.ctrlKey) {
-			// ctrl + click should open the link in a new tab
+			//Ctrl + click opens the link in a new tab.
 			return;
 		}
 
@@ -337,23 +342,6 @@ sap.ui.define([
 		this.removeStyleClass("sapFCardHeaderToolbarFocused");
 	};
 
-	/**
-	 * Adds margin to the header text, which ensures the text will be visible under the toolbar.
-	 * @private
-	 */
-	BaseHeader.prototype._addMarginToHeaderText = function () {
-		const oToolbar = this.getToolbar();
-		const oHeaderText = this.getDomRef().getElementsByClassName("sapFCardHeaderText")[0];
-
-		if (oHeaderText && oToolbar) {
-			if (oToolbar.getVisible()) {
-				oHeaderText.style.marginInlineEnd = oToolbar.getDomRef().offsetWidth + "px";
-			} else {
-				oHeaderText.style.marginInlineEnd = 0;
-			}
-		}
-	};
-
 	/*
 	 * @override
 	 */
@@ -509,6 +497,11 @@ sap.ui.define([
 	 * @ui5-restricted
 	 */
 	BaseHeader.prototype.getAriaRoleDescription = function () {
+		if (this.isTile()) {
+
+			return null;
+		}
+
 		return this.hasListeners("press") ? this._oRb.getText("ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER") : this._oRb.getText("ARIA_ROLEDESCRIPTION_CARD_HEADER");
 	};