@openui5/sap.f 1.117.1 → 1.119.0

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

@@ -9,6 +9,7 @@ sap.ui.define([
 	"sap/ui/core/IntervalTrigger",
 	"sap/ui/core/format/DateFormat",
 	"sap/ui/core/date/UniversalDate",
+	"sap/ui/core/library",
 	"sap/m/Text"
 ], function (
 	Control,
@@ -16,6 +17,7 @@ sap.ui.define([
 	IntervalTrigger,
 	DateFormat,
 	UniversalDate,
+	coreLibrary,
 	Text
 ) {
 	"use strict";
@@ -25,6 +27,8 @@ sap.ui.define([
 	 */
 	var DATA_TIMESTAMP_REFRESH_INTERVAL = 60000;
 
+	var TextAlign = coreLibrary.TextAlign;
+
 	/**
 	 * Constructor for a new <code>BaseHeader</code>.
 	 *
@@ -38,7 +42,7 @@ sap.ui.define([
 	 * @abstract
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public
@@ -77,7 +81,13 @@ sap.ui.define([
 				 * Set to false if header shouldn't be focusable.
 				 * @private
 				 */
-				focusable: { type: "boolean", defaultValue: true, visibility: "hidden" }
+				focusable: { type: "boolean", defaultValue: true, visibility: "hidden" },
+
+				/**
+				 * If the header should be rendered as a tile.
+				 * @private
+				 */
+				useTileLayout: { type: "boolean", group: "Appearance", visibility: "hidden" }
 			},
 			aggregations: {
 				/**
@@ -95,7 +105,14 @@ sap.ui.define([
 				/**
 				 * Defines an error which will be displayed in the header.
 				 */
-				_error: { type: "sap.ui.core.Control", multiple: false, visibility: "hidden" }
+				_error: { type: "sap.ui.core.Control", multiple: false, visibility: "hidden" },
+
+				/**
+				 * Show as a banner in the header area. Use for example for system info and application shortcut.
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				bannerLines: { type: "sap.m.Text", group: "Appearance", multiple: true  }
 			}
 		}
 	});
@@ -120,12 +137,19 @@ sap.ui.define([
 	};
 
 	BaseHeader.prototype.onBeforeRendering = function () {
-		var oToolbar = this.getToolbar();
+		var oToolbar = this.getToolbar(),
+			aBannerLines = this.getBannerLines();
 
 		if (oToolbar) {
 			oToolbar.addStyleClass("sapFCardHeaderToolbar");
 			oToolbar.removeEventDelegate(this._oToolbarDelegate, this);
 		}
+
+		if (aBannerLines) {
+			aBannerLines.forEach((oText) => {
+				oText.setTextAlign(TextAlign.End);
+			});
+		}
 	};
 
 	BaseHeader.prototype.onAfterRendering = function () {
@@ -328,6 +352,16 @@ sap.ui.define([
 		return this.hasListeners("press") ? this._oRb.getText("ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER") : this._oRb.getText("ARIA_ROLEDESCRIPTION_CARD_HEADER");
 	};
 
+	/**
+	 * Gets the ids of the banner lines to be used in aria-labelledby
+	 * @returns {string} The ids of the banner lines.
+	 */
+	BaseHeader.prototype._getBannerLinesIds = function () {
+		return this.getBannerLines().map((oBannerLine) => {
+			return oBannerLine.getId();
+		}).join(" ");
+	};
+
 	/**
 	 * Returns if the control is inside a sap.f.GridContainer
 	 *

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

@@ -0,0 +1,68 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides default renderer for control sap.f.cards.NumericHeader
+sap.ui.define([], function () {
+	"use strict";
+
+	var BaseHeaderRenderer = {
+		apiVersion: 2
+	};
+
+	BaseHeaderRenderer.renderAvatar = function (oRm, oHeader) {
+		var oAvatar = oHeader.getAggregation("_avatar"),
+			oBindingInfos = oHeader.mBindingInfos,
+			bIconVisible = oHeader.shouldShowIcon();
+
+		if (bIconVisible && (!oHeader.isPropertyInitial("iconSrc") || !oHeader.isPropertyInitial("iconInitials"))) {
+			oRm.openStart("div")
+				.class("sapFCardHeaderImage")
+				.openEnd();
+
+			if (oBindingInfos.iconSrc && oBindingInfos.iconSrc.binding && !oBindingInfos.iconSrc.binding.getValue()) {
+				oAvatar.addStyleClass("sapFCardHeaderItemBinded");
+			}
+			oRm.renderControl(oAvatar);
+			oRm.renderControl(oHeader._oAriaAvatarText);
+			oRm.close("div");
+		}
+	};
+
+	BaseHeaderRenderer.renderBanner = function(oRm, oHeader) {
+		const aBannerLines = oHeader.getBannerLines() || [];
+		const aVisibleLines = aBannerLines.filter((oText) => {
+			return oText.getVisible();
+		});
+
+		if (!aVisibleLines.length) {
+			return;
+		}
+
+		oRm.openStart("div")
+			.class("sapFCardHeaderBanner")
+			.openEnd();
+
+		oRm.openStart("div")
+			.class("sapFCardHeaderBannerInner")
+			.openEnd();
+
+		aBannerLines.forEach((oBannerLine) => {
+			oRm.openStart("div")
+				.class("sapFCardHeaderBannerLine")
+				.openEnd();
+
+			oRm.renderControl(oBannerLine);
+
+			oRm.close("div");
+		});
+
+		oRm.close("div");
+
+		oRm.close("div");
+	};
+
+	return BaseHeaderRenderer;
+}, /* bExport= */ true);

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

@@ -22,8 +22,10 @@ sap.ui.define([
 ) {
 	"use strict";
 
-	var AvatarShape = mLibrary.AvatarShape;
-	var AvatarColor = mLibrary.AvatarColor;
+	const AvatarShape = mLibrary.AvatarShape;
+	const AvatarColor = mLibrary.AvatarColor;
+	const AvatarImageFitType = mLibrary.AvatarImageFitType;
+	const AvatarSize = mLibrary.AvatarSize;
 
 	/**
 	 * Constructor for a new <code>Header</code>.
@@ -46,7 +48,7 @@ sap.ui.define([
 	 * @implements sap.f.cards.IHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public
@@ -120,7 +122,14 @@ sap.ui.define([
 				 *
 				 * @experimental Since 1.83 this feature is experimental and the API may change.
 				 */
-				iconVisible: { type: "boolean", defaultValue: true }
+				iconVisible: { type: "boolean", defaultValue: true },
+
+				/**
+				 * Defines the size of the icon.
+				 *
+				 * @experimental Since 1.119 this feature is experimental and the API may change.
+				 */
+				iconSize: { type: "sap.m.AvatarSize", defaultValue: AvatarSize.S }
 			},
 			aggregations: {
 
@@ -166,10 +175,8 @@ sap.ui.define([
 	Header.prototype.exit = function () {
 		BaseHeader.prototype.exit.apply(this, arguments);
 
-		if (this._oAriaAvatarText) {
-			this._oAriaAvatarText.destroy();
-			this._oAriaAvatarText = null;
-		}
+		this._oAriaAvatarText.destroy();
+		this._oAriaAvatarText = null;
 	};
 
 	/**
@@ -208,7 +215,9 @@ sap.ui.define([
 	Header.prototype._getAvatar = function () {
 		var oAvatar = this.getAggregation("_avatar");
 		if (!oAvatar) {
-			oAvatar = new Avatar().addStyleClass("sapFCardIcon");
+			oAvatar = new Avatar({
+				imageFitType: AvatarImageFitType.Contain
+			}).addStyleClass("sapFCardIcon");
 			this.setAggregation("_avatar", oAvatar);
 		}
 		return oAvatar;
@@ -229,13 +238,13 @@ sap.ui.define([
 			.setText(this.getSubtitle())
 			.setMaxLines(this.getSubtitleMaxLines());
 
-		var oAvatar = this._getAvatar();
-
-		oAvatar.setDisplayShape(this.getIconDisplayShape());
-		oAvatar.setSrc(this.getIconSrc());
-		oAvatar.setInitials(this.getIconInitials());
-		oAvatar.setTooltip(this.getIconAlt());
-		oAvatar.setBackgroundColor(this.getIconBackgroundColor());
+		this._getAvatar()
+			.setDisplayShape(this.getIconDisplayShape())
+			.setSrc(this.getIconSrc())
+			.setInitials(this.getIconInitials())
+			.setTooltip(this.getIconAlt())
+			.setBackgroundColor(this.getIconBackgroundColor())
+			.setDisplaySize(this.getIconSize());
 	};
 
 	/**
@@ -270,38 +279,31 @@ sap.ui.define([
 	 * @returns {string} IDs of controls
 	 */
 	Header.prototype._getAriaLabelledBy = function () {
-		var sCardTypeId = "",
-			sTitleId = "",
-			sSubtitleId = "",
-			sStatusTextId = "",
-			sAvatarId = "",
-			sIds;
+		const aIds = [];
 
 		if (this.getParent() && this.getParent()._ariaText) {
-			sCardTypeId = this.getParent()._ariaText.getId();
+			aIds.push(this.getParent()._ariaText.getId());
 		}
 
 		if (this.getTitle()) {
-			sTitleId = this._getTitle().getId();
+			aIds.push(this._getTitle().getId());
 		}
 
 		if (this.getSubtitle()) {
-			sSubtitleId = this._getSubtitle().getId();
+			aIds.push(this._getSubtitle().getId());
 		}
 
 		if (this.getStatusText()) {
-			sStatusTextId = this.getId() + "-status";
+			aIds.push(this.getId() + "-status");
 		}
 
 		if (this.getIconSrc() || this.getIconInitials()) {
-			sAvatarId = this.getId() + "-ariaAvatarText";
+			aIds.push(this.getId() + "-ariaAvatarText");
 		}
 
-		sIds = sCardTypeId + " " + sTitleId + " " + sSubtitleId + " " + sStatusTextId + " " + sAvatarId;
+		aIds.push(this._getBannerLinesIds());
 
-		// remove whitespace from both sides
-		// and merge consecutive spaces into one
-		return sIds.replace(/ {2,}/g, ' ').trim();
+		return aIds.filter((sElement) => { return !!sElement; }).join(" ");
 	};
 
 	Header.prototype.isLoading = function () {

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

@@ -4,12 +4,14 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-sap.ui.define([], function () {
+sap.ui.define([
+	"sap/f/cards/BaseHeaderRenderer",
+	"sap/ui/core/Renderer"
+], function (BaseHeaderRenderer, Renderer) {
 	"use strict";
 
-	var HeaderRenderer = {
-		apiVersion: 2
-	};
+	var HeaderRenderer = Renderer.extend(BaseHeaderRenderer);
+	HeaderRenderer.apiVersion = 2;
 
 	/**
 	 * Render a header.
@@ -24,13 +26,12 @@ sap.ui.define([], function () {
 			oTitle = oHeader.getAggregation("_title"),
 			oSubtitle = oHeader.getAggregation("_subtitle"),
 			bHasSubtitle = oHeader.getSubtitle() || oBindingInfos.subtitle,
-			oAvatar = oHeader.getAggregation("_avatar"),
 			oDataTimestamp = oHeader.getAggregation("_dataTimestamp"),
 			bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp,
 			bLoading = oHeader.isLoading(),
 			oError = oHeader.getAggregation("_error"),
 			oToolbar = oHeader.getToolbar(),
-			bIconVisible = oHeader.shouldShowIcon();
+			bUseTileLayout = oHeader.getProperty("useTileLayout");
 
 		oRm.openStart("div", oHeader)
 			.class("sapFCardHeader");
@@ -43,6 +44,10 @@ sap.ui.define([], function () {
 			oRm.class("sapFCardSectionClickable");
 		}
 
+		if (oHeader.getIconSrc() && oHeader.getIconVisible()) {
+			oRm.class("sapFCardHeaderHasIcon");
+		}
+
 		oRm.openEnd();
 
 		oRm.openStart("div")
@@ -71,17 +76,8 @@ sap.ui.define([], function () {
 			return;
 		}
 
-		if (bIconVisible && (!oHeader.isPropertyInitial("iconSrc") || !oHeader.isPropertyInitial("iconInitials"))) {
-			oRm.openStart("div")
-				.class("sapFCardHeaderImage")
-				.openEnd();
-
-			if (oBindingInfos.iconSrc && oBindingInfos.iconSrc.binding && !oBindingInfos.iconSrc.binding.getValue()) {
-				oAvatar.addStyleClass("sapFCardHeaderItemBinded");
-			}
-			oRm.renderControl(oAvatar);
-			oRm.renderControl(oHeader._oAriaAvatarText);
-			oRm.close("div");
+		if (!bUseTileLayout) {
+			BaseHeaderRenderer.renderAvatar(oRm, oHeader);
 		}
 
 		oRm.openStart("div")
@@ -143,6 +139,12 @@ sap.ui.define([], function () {
 
 		oRm.close("div");
 
+		if (bUseTileLayout) {
+			BaseHeaderRenderer.renderAvatar(oRm, oHeader);
+		}
+
+		BaseHeaderRenderer.renderBanner(oRm, oHeader);
+
 		oRm.close("div");
 
 		if (oToolbar) {