@openui5/sap.f 1.132.1 → 1.134.0

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

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @abstract
 	 *
 	 * @author SAP SE
-	 * @version 1.132.1
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public
@@ -187,7 +187,8 @@ sap.ui.define([
 
 		this._oToolbarDelegate = {
 			onfocusin: this._onToolbarFocusin,
-			onfocusout: this._onToolbarFocusout
+			onfocusout: this._onToolbarFocusout,
+			onAfterRendering: this._addMarginToHeaderText
 		};
 	};
 
@@ -227,6 +228,8 @@ sap.ui.define([
 			oToolbar.addEventDelegate(this._oToolbarDelegate, this);
 		}
 
+		this._addMarginToHeaderText();
+
 		this.getBannerLines()?.forEach((oText) => {
 			this._enhanceText(oText);
 		});
@@ -283,7 +286,7 @@ sap.ui.define([
 	};
 
 	BaseHeader.prototype._handleTap = function (oEvent) {
-		if (!this.isInteractive() || this._isInsideToolbar(oEvent.target)) {
+		if (!oEvent.target.closest(".sapFCardSectionClickable") || !this.isInteractive() || this._isInsideToolbar(oEvent.target)) {
 			return;
 		}
 
@@ -312,6 +315,23 @@ 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
 	 */
@@ -480,27 +500,21 @@ sap.ui.define([
 		}).join(" ");
 	};
 
-	/**
-	 * Returns if the control is inside a sap.f.GridContainer
-	 *
-	 * @private
-	 */
-	BaseHeader.prototype._isInsideGridContainer = function() {
-		var oParent = this.getParent();
-		if (!oParent) {
-			return false;
-		}
+	BaseHeader.prototype.isInteractive = function() {
+		return this.hasListeners("press");
+	};
 
-		oParent = oParent.getParent();
-		if (!oParent) {
+	BaseHeader.prototype.isFocusable = function() {
+		if (!this.getProperty("focusable")) {
 			return false;
 		}
 
-		return oParent.isA("sap.f.GridContainer");
-	};
+		const oParent = this.getParent();
+		if (oParent && oParent.isA("sap.f.CardBase") && oParent.isRoleListItem()) {
+			return this.isInteractive();
+		}
 
-	BaseHeader.prototype.isInteractive = function() {
-		return this.hasListeners("press");
+		return true;
 	};
 
 	BaseHeader.prototype._isInsideToolbar = function(oElement) {
@@ -510,7 +524,8 @@ sap.ui.define([
 	};
 
 	/**
-	 * When the option <code>useTooltips</code> is set to <code>true</code> - enhances the given text with a tooltip if the text is truncated.
+	 * When the option <code>useTooltips</code> is set to <code>true</code>,
+	 * a tooltip is added to the text in case it gets truncated.
 	 * @private
 	 * @param {sap.m.Text} oText The text control.
 	 */

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

@@ -8,10 +8,209 @@
 sap.ui.define([], function () {
 	"use strict";
 
-	var BaseHeaderRenderer = {
+	const BaseHeaderRenderer = {
 		apiVersion: 2
 	};
 
+	BaseHeaderRenderer.render = function (oRm, oHeader) {
+		const oToolbar = oHeader.getToolbar();
+		const oError = oHeader.getAggregation("_error");
+		const bHasNumericPart = this.hasNumericPart(oHeader);
+
+		oRm.openStart("div", oHeader)
+			.class("sapFCardHeader");
+
+		this.renderHeaderAttributes(oRm, oHeader);
+
+		if (oHeader.isLoading()) {
+			oRm.class("sapFCardHeaderLoading");
+		}
+
+		if (oHeader.getIconSrc() && oHeader.getIconVisible()) {
+			oRm.class("sapFCardHeaderHasIcon");
+		}
+
+		if (oToolbar?.getVisible()) {
+			oRm.class("sapFCardHeaderHasToolbar");
+		}
+
+		if (!bHasNumericPart) {
+			oRm.class("sapFCardHeaderMainPartOnly");
+		}
+
+		oRm.openEnd();
+
+		this.renderMainPart(oRm, oHeader);
+
+		if (bHasNumericPart && !oError) {
+			this.renderNumericPart(oRm, oHeader);
+		}
+
+		if (oToolbar && !oError) {
+			this._renderToolbar(oRm, oToolbar);
+		}
+
+		oRm.close("div");
+	};
+
+	BaseHeaderRenderer.renderHeaderAttributes = function (oRm, oHeader) { };
+
+	BaseHeaderRenderer.renderMainPart = function (oRm, oHeader) {
+		const bUseTileLayout = oHeader.getProperty("useTileLayout");
+		const bRenderAsLink = oHeader.isLink();
+		const oError = oHeader.getAggregation("_error");
+
+		if (bRenderAsLink) {
+			oRm.openStart("a", oHeader.getId() + "-focusable");
+			this._renderLinkAttributes(oRm, oHeader);
+		} else {
+			oRm.openStart("div", oHeader.getId() + "-focusable");
+		}
+
+		oRm.class("sapFCardHeaderMainPart")
+			.class("sapFCardHeaderFocusable");
+
+		if (oHeader.isFocusable()) {
+			oRm.attr("tabindex", "0");
+		} else if (bRenderAsLink) {
+			oRm.attr("tabindex", "-1");
+		}
+
+		if (oHeader.isInteractive()) {
+			oRm.class("sapFCardSectionClickable");
+		}
+
+		if (!this.hasNumericPart(oHeader)) {
+			oRm.class("sapFCardHeaderLastPart");
+		}
+
+		oRm.accessibilityState({
+			labelledby: { value: oHeader._getAriaLabelledBy(), append: true },
+			role: oHeader.getFocusableElementAriaRole(),
+			roledescription: oHeader.getAriaRoleDescription()
+		});
+
+		oRm.openEnd();
+
+		if (oError) {
+			oRm.renderControl(oError);
+		} else {
+			if (bUseTileLayout) {
+				this.renderMainContentInTileLayout(oRm, oHeader);
+			} else {
+				this.renderMainContent(oRm, oHeader);
+			}
+
+			this._renderBanner(oRm, oHeader);
+		}
+
+		if (bRenderAsLink) {
+			oRm.close("a");
+		} else {
+			oRm.close("div");
+		}
+	};
+
+	BaseHeaderRenderer.hasNumericPart = function (oHeader) {
+		return false;
+	};
+
+	BaseHeaderRenderer.renderNumericPart = function (oRm, oHeader) { };
+
+	BaseHeaderRenderer.renderMainContent = function (oRm, oHeader) {
+		this.renderAvatar(oRm, oHeader);
+
+		oRm.openStart("div")
+			.class("sapFCardHeaderText")
+			.openEnd();
+
+		this.renderMainPartFirstLine(oRm, oHeader);
+		this.renderMainPartSecondLine(oRm, oHeader);
+
+		oRm.close("div");
+	};
+
+	BaseHeaderRenderer.renderMainContentInTileLayout = function (oRm, oHeader) {
+		oRm.openStart("div")
+			.class("sapFCardHeaderText")
+			.openEnd();
+
+		this.renderMainPartFirstLine(oRm, oHeader);
+		this.renderMainPartSecondLine(oRm, oHeader);
+
+		oRm.close("div");
+
+		this.renderAvatar(oRm, oHeader);
+	};
+
+	BaseHeaderRenderer.renderMainPartFirstLine = function (oRm, oHeader) {
+		const oTitle = oHeader.getAggregation("_title");
+		const oBindingInfos = oHeader.mBindingInfos;
+		const sStatus = oHeader.getStatusText();
+		const sId = oHeader.getId();
+
+		if (oTitle || oBindingInfos.title) {
+			oRm.openStart("div")
+				.class("sapFCardHeaderTextFirstLine")
+				.openEnd();
+
+			if (oBindingInfos.title) {
+				oTitle.addStyleClass("sapFCardHeaderItemBinded");
+			}
+
+			oRm.renderControl(oTitle);
+
+			if (sStatus && oHeader.getStatusVisible()) {
+				oRm.openStart("span", sId + "-status")
+					.class("sapFCardStatus");
+
+				if (oBindingInfos.statusText) {
+					oRm.class("sapFCardHeaderItemBinded");
+				}
+
+				oRm.openEnd()
+					.text(sStatus)
+					.close("span");
+			}
+
+			oRm.close("div"); // sapFCardHeaderTextFirstLine
+		}
+	};
+
+	BaseHeaderRenderer.renderMainPartSecondLine = function (oRm, oHeader) {
+		const oBindingInfos = oHeader.mBindingInfos;
+		const bHasSubtitle = oHeader.getSubtitle() || oBindingInfos.subtitle;
+		const oDataTimestamp = oHeader.getAggregation("_dataTimestamp");
+		const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
+		const oSubtitle = oHeader.getAggregation("_subtitle");
+
+		if (bHasSubtitle || bHasDataTimestamp) {
+			oRm.openStart("div")
+				.class("sapFCardHeaderTextSecondLine");
+
+			if (bHasDataTimestamp) {
+				oRm.class("sapFCardHeaderLineIncludesDataTimestamp");
+			}
+
+			oRm.openEnd();
+
+			if (bHasSubtitle) {
+
+				if (oBindingInfos.subtitle) {
+					oSubtitle.addStyleClass("sapFCardHeaderItemBinded");
+				}
+
+				oRm.renderControl(oSubtitle);
+			}
+
+			if (bHasDataTimestamp) {
+				oRm.renderControl(oDataTimestamp);
+			}
+
+			oRm.close("div"); //closes sapFCardHeaderTextSecondLine
+		}
+	};
+
 	BaseHeaderRenderer.renderAvatar = function (oRm, oHeader) {
 		var oAvatar = oHeader.getAggregation("_avatar"),
 			oBindingInfos = oHeader.mBindingInfos,
@@ -31,7 +230,7 @@ sap.ui.define([], function () {
 		}
 	};
 
-	BaseHeaderRenderer.renderBanner = function(oRm, oHeader) {
+	BaseHeaderRenderer._renderBanner = function(oRm, oHeader) {
 		const aBannerLines = oHeader.getBannerLines() || [];
 		const aVisibleLines = aBannerLines.filter((oText) => {
 			return oText.getVisible();
@@ -69,7 +268,7 @@ sap.ui.define([], function () {
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {sap.f.cards.Header} oHeader An object representation of the control that should be rendered
 	 */
-	BaseHeaderRenderer.linkAttributes = function(oRm, oHeader) {
+	BaseHeaderRenderer._renderLinkAttributes = function(oRm, oHeader) {
 		oRm.attr("href", oHeader.getHref())
 			.attr("rel", "noopener noreferrer");
 
@@ -82,5 +281,15 @@ sap.ui.define([], function () {
 		oRm.attr("draggable", "false");
 	};
 
+	BaseHeaderRenderer._renderToolbar = function (oRm, oToolbar) {
+		oRm.openStart("div")
+			.class("sapFCardHeaderToolbarCont")
+			.openEnd();
+
+		oRm.renderControl(oToolbar);
+
+		oRm.close("div");
+	};
+
 	return BaseHeaderRenderer;
 }, /* bExport= */ true);

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

@@ -48,7 +48,7 @@ sap.ui.define([
 	 * @implements sap.f.cards.IHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.132.1
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public
@@ -167,16 +167,10 @@ sap.ui.define([
 		BaseHeader.prototype.init.apply(this, arguments);
 
 		this.data("sap-ui-fastnavgroup", "true", true); // Define group for F6 handling
-
-		this._oAriaAvatarText = new InvisibleText({id: this.getId() + "-ariaAvatarText"});
-		this._oAriaAvatarText.setText(this._oRb.getText("ARIA_HEADER_AVATAR_TEXT"));
 	};
 
 	Header.prototype.exit = function () {
 		BaseHeader.prototype.exit.apply(this, arguments);
-
-		this._oAriaAvatarText.destroy();
-		this._oAriaAvatarText = null;
 	};
 
 	/**
@@ -307,7 +301,7 @@ sap.ui.define([
 		}
 
 		if (this.getIconSrc() || this.getIconInitials()) {
-			aIds.push(this.getId() + "-ariaAvatarText");
+			aIds.push(this._getAvatar().getId());
 		}
 
 		aIds.push(this._getBannerLinesIds());

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

@@ -13,166 +13,5 @@ sap.ui.define([
 	var HeaderRenderer = Renderer.extend(BaseHeaderRenderer);
 	HeaderRenderer.apiVersion = 2;
 
-	/**
-	 * Render a header.
-	 *
-	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
-	 * @param {sap.f.cards.Header} oHeader An object representation of the control that should be rendered
-	 */
-	HeaderRenderer.render = function (oRm, oHeader) {
-		var sId = oHeader.getId(),
-			oBindingInfos = oHeader.mBindingInfos,
-			sStatus = oHeader.getStatusText(),
-			oTitle = oHeader.getAggregation("_title"),
-			oSubtitle = oHeader.getAggregation("_subtitle"),
-			bHasSubtitle = oHeader.getSubtitle() || oBindingInfos.subtitle,
-			oDataTimestamp = oHeader.getAggregation("_dataTimestamp"),
-			bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp,
-			bLoading = oHeader.isLoading(),
-			oError = oHeader.getAggregation("_error"),
-			oToolbar = oHeader.getToolbar(),
-			bUseTileLayout = oHeader.getProperty("useTileLayout"),
-			bRenderAsLink = oHeader.isLink();
-
-		oRm.openStart("div", oHeader)
-			.class("sapFCardHeader");
-
-		if (bLoading) {
-			oRm.class("sapFCardHeaderLoading");
-		}
-
-		if (oHeader.isInteractive()) {
-			oRm.class("sapFCardSectionClickable");
-		}
-
-		if (oHeader.getIconSrc() && oHeader.getIconVisible()) {
-			oRm.class("sapFCardHeaderHasIcon");
-		}
-
-		if (oToolbar?.getVisible()) {
-			oRm.class("sapFCardHeaderHasToolbar");
-		}
-
-		oRm.openEnd();
-
-		if (bRenderAsLink) {
-			oRm.openStart("a");
-			BaseHeaderRenderer.linkAttributes(oRm, oHeader);
-		} else {
-			oRm.openStart("div");
-		}
-
-		oRm.attr("id", sId + "-focusable")
-			.class("sapFCardHeaderWrapper");
-
-		if (oHeader.getProperty("focusable") && !oHeader._isInsideGridContainer()) {
-			oRm.attr("tabindex", "0");
-		}
-
-		if (!oHeader._isInsideGridContainer()) {
-			oRm.accessibilityState({
-				labelledby: {value: oHeader._getAriaLabelledBy(), append: true},
-				role: oHeader.getFocusableElementAriaRole(),
-				roledescription: oHeader.getAriaRoleDescription()
-			});
-		}
-
-		oRm.openEnd();
-
-		if (oError) {
-			oRm.renderControl(oError);
-
-			oRm.close("div");
-			oRm.close("div");
-			return;
-		}
-
-		if (!bUseTileLayout) {
-			BaseHeaderRenderer.renderAvatar(oRm, oHeader);
-		}
-
-		oRm.openStart("div")
-			.class("sapFCardHeaderText")
-			.openEnd();
-
-		if (oHeader.getTitle() || oBindingInfos.title) {
-			oRm.openStart("div")
-				.class("sapFCardHeaderTextFirstLine")
-				.openEnd();
-
-			if (oBindingInfos.title) {
-				oTitle.addStyleClass("sapFCardHeaderItemBinded");
-			}
-
-			oRm.renderControl(oTitle);
-
-			if (sStatus && oHeader.getStatusVisible()) {
-				oRm.openStart("span", sId + "-status")
-					.class("sapFCardStatus");
-
-				if (oBindingInfos.statusText) {
-					oRm.class("sapFCardHeaderItemBinded");
-				}
-
-				oRm.openEnd()
-					.text(sStatus)
-					.close("span");
-			}
-
-			oRm.close("div");
-
-			if (bHasSubtitle || bHasDataTimestamp) {
-				oRm.openStart("div")
-					.class("sapFCardHeaderTextSecondLine");
-
-				if (bHasDataTimestamp) {
-					oRm.class("sapFCardHeaderLineIncludesDataTimestamp");
-				}
-
-				oRm.openEnd();
-
-				if (bHasSubtitle) {
-
-					if (oBindingInfos.subtitle) {
-						oSubtitle.addStyleClass("sapFCardHeaderItemBinded");
-					}
-
-					oRm.renderControl(oSubtitle);
-				}
-
-				if (bHasDataTimestamp) {
-					oRm.renderControl(oDataTimestamp);
-				}
-
-				oRm.close("div"); //closes sapFCardHeaderTextSecondLine
-			}
-		}
-
-		oRm.close("div");
-
-		if (bUseTileLayout) {
-			BaseHeaderRenderer.renderAvatar(oRm, oHeader);
-		}
-
-		BaseHeaderRenderer.renderBanner(oRm, oHeader);
-
-		if (bRenderAsLink) {
-			oRm.close("a");
-		} else {
-			oRm.close("div");
-		}
-
-		if (oToolbar) {
-			oRm.openStart("div")
-				.class("sapFCardHeaderToolbarCont")
-				.openEnd();
-			oRm.renderControl(oToolbar);
-
-			oRm.close("div");
-		}
-
-		oRm.close("div");
-	};
-
 	return HeaderRenderer;
 }, /* bExport= */ true);

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

@@ -58,7 +58,7 @@ sap.ui.define([
 	 * @implements sap.f.cards.IHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.132.1
+	 * @version 1.134.0
 	 *
 	 * @constructor
 	 * @public
@@ -286,16 +286,10 @@ sap.ui.define([
 		BaseHeader.prototype.init.apply(this, arguments);
 
 		this.data("sap-ui-fastnavgroup", "true", true); // Define group for F6 handling
-
-		this._oAriaAvatarText = new InvisibleText({id: this.getId() + "-ariaAvatarText"});
-		this._oAriaAvatarText.setText(this._oRb.getText("ARIA_HEADER_AVATAR_TEXT"));
 	};
 
 	NumericHeader.prototype.exit = function () {
 		BaseHeader.prototype.exit.apply(this, arguments);
-
-		this._oAriaAvatarText.destroy();
-		this._oAriaAvatarText = null;
 	};
 
 	/**
@@ -401,7 +395,7 @@ sap.ui.define([
 				id: this.getId() + "-title",
 				wrapping: true,
 				maxLines: this.getTitleMaxLines()
-			});
+			}).addStyleClass("sapFCardTitle");
 
 			this.setAggregation("_title", oControl);
 		}
@@ -540,7 +534,7 @@ sap.ui.define([
 		aIds.push(this._getUnitOfMeasurement().getId());
 
 		if (this.getIconSrc() || this.getIconInitials()) {
-			aIds.push(this.getId() + "-ariaAvatarText");
+			aIds.push(this._getAvatar().getId());
 		}
 
 		if (this.getNumber() || this.getScale()) {