@openui5/sap.f 1.117.1 → 1.119.0

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

@@ -6,16 +6,34 @@
 sap.ui.define([
 	"./BaseHeader",
 	"./NumericIndicators",
+	"sap/base/Log",
+	"sap/m/library",
 	"sap/m/Text",
-	"sap/f/cards/NumericHeaderRenderer"
+	"sap/m/ObjectStatus",
+	"sap/f/cards/NumericHeaderRenderer",
+	"sap/ui/core/library",
+	"sap/m/Avatar",
+	"sap/ui/core/InvisibleText"
 ], function (
 	BaseHeader,
 	NumericIndicators,
+	Log,
+	mLibrary,
 	Text,
-	NumericHeaderRenderer
+	ObjectStatus,
+	NumericHeaderRenderer,
+	coreLibrary,
+	Avatar,
+	InvisibleText
 ) {
 	"use strict";
 
+	const ValueState = coreLibrary.ValueState;
+	const AvatarShape = mLibrary.AvatarShape;
+	const AvatarColor = mLibrary.AvatarColor;
+	const AvatarImageFitType = mLibrary.AvatarImageFitType;
+	const AvatarSize = mLibrary.AvatarSize;
+
 	/**
 	 * Constructor for a new <code>NumericHeader</code>.
 	 *
@@ -39,7 +57,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.BaseHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public
@@ -79,6 +97,58 @@ sap.ui.define([
 				 */
 				statusText: { type: "string", defaultValue: "" },
 
+				/**
+				 * Defines the shape of the icon.
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				iconDisplayShape: { type: "sap.m.AvatarShape", defaultValue: AvatarShape.Circle },
+
+				/**
+				 * Defines the icon source.
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				iconSrc: { type: "sap.ui.core.URI", defaultValue: "" },
+
+				/**
+				 * Defines the initials of the icon.
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				iconInitials: { type: "string", defaultValue: "" },
+
+				/**
+				 * Defines an alt text for the avatar or icon.
+				 *
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				iconAlt: { type: "string", defaultValue: "" },
+
+				/**
+				 * Defines a background color for the avatar or icon.
+				 *
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				iconBackgroundColor: { type: "sap.m.AvatarColor", defaultValue: AvatarColor.Transparent },
+
+				/**
+				 * Defines whether the card icon is visible.
+				 *
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				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 },
+
 				/**
 				 * General unit of measurement for the header. Displayed as side information to the subtitle.
 				 */
@@ -90,6 +160,11 @@ sap.ui.define([
 				 */
 				number: { "type": "string", group : "Data" },
 
+				/**
+				 * The size of the of the main indicator. Possible values are "S" and "L".
+				 */
+				numberSize: { "type": "string", group : "Appearance", defaultValue: "L" },
+
 				/**
 				 * Whether the main numeric indicator is visible or not
 				 * @since 1.109
@@ -120,6 +195,13 @@ sap.ui.define([
 				 */
 				details: { "type": "string", group: "Appearance" },
 
+				/**
+				 * The semantic color which represents the state of the details text.
+				 * @experimental Since 1.118. For usage only by Work Zone.
+				 * @since 1.118
+				 */
+				detailsState: { type : "sap.ui.core.ValueState", group: "Appearance", defaultValue: ValueState.None },
+
 				/**
 				 * Limits the number of lines for the details.
 				 * @experimental since 1.101
@@ -130,7 +212,6 @@ sap.ui.define([
 				 * The alignment of the side indicators.
 				 */
 				sideIndicatorsAlignment: { "type": "sap.f.cards.NumericHeaderSideIndicatorsAlignment", group: "Appearance", defaultValue : "Begin" }
-
 			},
 			aggregations: {
 
@@ -156,6 +237,11 @@ sap.ui.define([
 				 */
 				_subtitle: { type: "sap.m.Text", multiple: false, visibility: "hidden" },
 
+				/**
+				* Defines the inner avatar control.
+				*/
+				_avatar: { type: "sap.m.Avatar", multiple: false, visibility: "hidden" },
+
 				/**
 				 * Shows unit of measurement next to subtitle
 				 */
@@ -164,7 +250,7 @@ sap.ui.define([
 				/**
 				 * Display details
 				 */
-				_details: { type: "sap.m.Text", multiple: false, visibility: "hidden" },
+				_details: { type: "sap.ui.core.Control", multiple: false, visibility: "hidden" },
 
 				/**
 				 * Displays the main and side indicators
@@ -190,10 +276,16 @@ 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;
 	};
 
 	/**
@@ -212,12 +304,32 @@ sap.ui.define([
 			.setMaxLines(this.getSubtitleMaxLines());
 
 		this._getUnitOfMeasurement().setText(this.getUnitOfMeasurement());
-		this._getDetails()
-			.setText(this.getDetails())
-			.setMaxLines(this.getDetailsMaxLines());
+
+		this._getAvatar()
+			.setDisplayShape(this.getIconDisplayShape())
+			.setSrc(this.getIconSrc())
+			.setInitials(this.getIconInitials())
+			.setTooltip(this.getIconAlt())
+			.setBackgroundColor(this.getIconBackgroundColor())
+			.setDisplaySize(this.getIconSize());
+
+		if (!this.isPropertyInitial("detailsState") && !this.isPropertyInitial("detailsMaxLines")) {
+			Log.error("Both details state and details max lines can not be used at the same time. Max lines setting will be ignored.");
+		}
+
+		if (!this.isPropertyInitial("detailsState")) {
+			this._createDetails(true)
+				.setText(this.getDetails())
+				.setState(this.getDetailsState());
+		} else {
+			this._createDetails()
+				.setText(this.getDetails())
+				.setMaxLines(this.getDetailsMaxLines());
+		}
 
 		this._getNumericIndicators()
 			.setNumber(this.getNumber())
+			.setNumberSize(this.getNumberSize())
 			.setScale(this.getScale())
 			.setTrend(this.getTrend())
 			.setState(this.getState())
@@ -225,6 +337,13 @@ sap.ui.define([
 			.setNumberVisible(this.getNumberVisible());
 	};
 
+	/**
+	 * @protected
+	 * @returns {boolean} If the icon should be shown.
+	 */
+	NumericHeader.prototype.shouldShowIcon = function () {
+		return this.getIconVisible();
+	};
 
 	/**
 	 * This method is a hook for the RenderManager that gets called
@@ -285,6 +404,22 @@ sap.ui.define([
 		return oControl;
 	};
 
+	/**
+	 * Lazily creates an avatar control and returns it.
+	 * @private
+	 * @returns {sap.m.Avatar} The inner avatar aggregation
+	 */
+	NumericHeader.prototype._getAvatar = function () {
+		var oAvatar = this.getAggregation("_avatar");
+		if (!oAvatar) {
+			oAvatar = new Avatar({
+				imageFitType: AvatarImageFitType.Contain
+			}).addStyleClass("sapFCardIcon");
+			this.setAggregation("_avatar", oAvatar);
+		}
+		return oAvatar;
+	};
+
 	/**
 	 * Lazily create a unit of measurement and return it.
 	 *
@@ -306,24 +441,53 @@ sap.ui.define([
 	};
 
 	/**
-	 * Lazily create details and return it.
-	 *
+	 * Create details and return it.
 	 * @private
-	 * @return {sap.m.Text} The details aggregation
+	 * @param {boolean} bUseObjectStatus If set to true the details will be sap.m.ObjectStatus
+	 * @return {sap.m.Text|sap.m.ObjectStatus} The details aggregation
 	 */
-	NumericHeader.prototype._getDetails = function () {
+	NumericHeader.prototype._createDetails = function (bUseObjectStatus) {
 		var oControl = this.getAggregation("_details");
 
-		if (!oControl) {
-			oControl = new Text({
-				id: this.getId() + "-details"
-			});
-			this.setAggregation("_details", oControl);
+		if (oControl?.isA("sap.m.Text") && bUseObjectStatus) {
+			oControl.destroy();
+		} else if (oControl) {
+			return oControl;
+		}
+
+		var oSettings = {
+			id: this._getDetailsId()
+		};
+
+		if (bUseObjectStatus) {
+			oControl = new ObjectStatus(oSettings);
+		} else {
+			oControl = new Text(oSettings);
 		}
 
+		this.setAggregation("_details", oControl);
+
 		return oControl;
 	};
 
+	/**
+	 * Gets the control create for showing details.
+	 * @private
+	 * @return {sap.m.Text|sap.m.ObjectStatus} The details aggregation
+	 */
+	NumericHeader.prototype._getDetails = function () {
+		return this.getAggregation("_details");
+	};
+
+	/**
+	 * Gets the id for details control.
+	 * @private
+	 * @return {string} The id for details control.
+	 */
+	NumericHeader.prototype._getDetailsId = function () {
+		return this.getId() + "-details";
+	};
+
 	/**
 	 * Lazily create numeric content and return it.
 	 *
@@ -348,45 +512,43 @@ sap.ui.define([
 	 * @returns {string} IDs of controls
 	 */
 	NumericHeader.prototype._getAriaLabelledBy = function () {
-		var sCardTypeId = "",
-			sTitleId = "",
-			sSubtitleId = "",
-			sStatusTextId = "",
-			sUnitOfMeasureId = this._getUnitOfMeasurement().getId(),
-			sMainIndicatorId = "",
-			sSideIndicatorsIds = this._getSideIndicatorIds(),
-			sDetailsId = "",
-			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.getDetails()) {
-			sDetailsId = this._getDetails().getId();
+		aIds.push(this._getUnitOfMeasurement().getId());
+
+		if (this.getIconSrc() || this.getIconInitials()) {
+			aIds.push(this.getId() + "-ariaAvatarText");
 		}
 
 		if (this.getNumber() || this.getScale()) {
-			sMainIndicatorId = this._getNumericIndicators()._getMainIndicator().getId();
+			aIds.push(this._getNumericIndicators()._getMainIndicator().getId());
+		}
+
+		aIds.push(this._getSideIndicatorIds());
+
+		if (this.getDetails()) {
+			aIds.push(this._getDetailsId());
 		}
 
-		sIds = sCardTypeId + " " + sTitleId + " " + sSubtitleId + " " + sStatusTextId + " " + sUnitOfMeasureId + " " + sMainIndicatorId + " " + sSideIndicatorsIds + " " + sDetailsId;
+		aIds.push(this._getBannerLinesIds());
 
-		// remove whitespace from both sides
-		// and merge the consecutive spaces into one
-		return sIds.replace(/ {2,}/g, ' ').trim();
+		return aIds.filter((sElement) => { return !!sElement; }).join(" ");
 	};
 
 	/**

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

@@ -4,13 +4,14 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-// Provides default renderer for control sap.f.cards.NumericHeader
-sap.ui.define([], function () {
+sap.ui.define([
+	"sap/f/cards/BaseHeaderRenderer",
+	"sap/ui/core/Renderer"
+], function (BaseHeaderRenderer, Renderer) {
 	"use strict";
 
-	var NumericHeaderRenderer = {
-		apiVersion: 2
-	};
+	var NumericHeaderRenderer = Renderer.extend(BaseHeaderRenderer);
+	NumericHeaderRenderer.apiVersion = 2;
 
 	/**
 	 * Render a numeric header.
@@ -34,6 +35,14 @@ sap.ui.define([], function () {
 			oRm.class("sapFCardSectionClickable");
 		}
 
+		if (oNumericHeader.getIconSrc() && oNumericHeader.getIconVisible()) {
+			oRm.class("sapFCardHeaderHasIcon");
+		}
+
+		if (oNumericHeader.getNumber() && oNumericHeader.getNumberVisible()) {
+			oRm.class("sapFCardHeaderHasNumber");
+		}
+
 		oRm.openEnd();
 
 		oRm.openStart("div")
@@ -58,8 +67,9 @@ sap.ui.define([], function () {
 			oRm.renderControl(oError);
 		} else {
 			NumericHeaderRenderer.renderHeaderText(oRm, oNumericHeader);
-			NumericHeaderRenderer.renderIndicators(oRm, oNumericHeader);
+			NumericHeaderRenderer.renderAvatarAndIndicatorsLine(oRm, oNumericHeader);
 			NumericHeaderRenderer.renderDetails(oRm, oNumericHeader);
+			BaseHeaderRenderer.renderBanner(oRm, oNumericHeader);
 		}
 
 		oRm.close("div");
@@ -180,6 +190,23 @@ sap.ui.define([], function () {
 		}
 	};
 
+	/**
+	 * Render avatar, main indicator and side indicators if any.
+	 *
+	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
+	 * @param {sap.f.cards.NumericHeader} oNH An object representation of the control that should be rendered
+	 */
+	NumericHeaderRenderer.renderAvatarAndIndicatorsLine = function(oRm, oNH) {
+		oRm.openStart("div")
+			.class("sapFCardAvatarAndIndicatorsLine")
+			.openEnd();
+
+		BaseHeaderRenderer.renderAvatar(oRm, oNH);
+		NumericHeaderRenderer.renderIndicators(oRm, oNH);
+
+		oRm.close("div");
+	};
+
 	/**
 	 * Render main indicator and side indicators if any.
 	 *

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

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/f/cards/loading/AnalyticalPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/CalendarPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.loading.ListPlaceholder
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/GenericPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/ListPlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/ListPlaceholderRenderer.js

@@ -77,7 +77,6 @@ sap.ui.define(["sap/ui/core/Renderer", "./PlaceholderBaseRenderer"], function(Re
 	};
 
 	ListPlaceholderRenderer.renderContent = function(oControl, oRm) {
-
 		var iMinItems = oControl.getMinItems(),
 			oItem = oControl.getItem();
 
@@ -98,7 +97,7 @@ sap.ui.define(["sap/ui/core/Renderer", "./PlaceholderBaseRenderer"], function(Re
 			oRm.openStart("div")
 				.class("sapFCardListPlaceholderRows")
 				.openEnd();
-			//debugger
+
 			if (oItem) {
 				this.renderTitleAndDescription(oRm, oItem);
 				this.renderAttributes(oRm, oItem);

package/src/sap/f/cards/loading/ObjectPlaceholder.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/PlaceholderBase.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/TablePlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/cards/loading/TimelinePlaceholder.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/f/changeHandler/MoveDynamicPageTitleActions.js

@@ -16,7 +16,7 @@ sap.ui.define([
 		 *
 		 * @alias sap.f.changeHandler.MoveDynamicPageTitleActions
 		 * @author SAP SE
-		 * @version 1.117.1
+		 * @version 1.119.0
 		 * @experimental Since 1.52
 		 */
 		var MoveActions = { };

package/src/sap/f/delegate/GridContainerItemNavigation.js

@@ -10,7 +10,7 @@ sap.ui.define([
 	"sap/ui/dom/containsOrEquals",
 	"sap/ui/thirdparty/jquery",
 	"sap/ui/dom/jquery/Selectors" // provides jQuery custom selector ":sapTabbable"
-], function (
+], function(
 	Element,
 	ItemNavigation,
 	GridItemNavigation,
@@ -41,7 +41,7 @@ sap.ui.define([
 	 *
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @extends sap.f.delegate.GridItemNavigation
 	 *
@@ -50,16 +50,16 @@ sap.ui.define([
 	 * @alias sap.f.delegate.GridContainerItemNavigation
 	 */
 	var GridContainerItemNavigation = GridItemNavigation.extend("sap.f.delegate.GridContainerItemNavigation", /** @lends sap.f.delegate.GridContainerItemNavigation.prototype */ {
-		constructor: function () {
+		constructor: function() {
 			GridItemNavigation.apply(this, arguments);
 
 			this.attachEvent(ItemNavigation.Events.FocusLeave, this._onFocusLeave, this);
 		}
 	});
 
-	GridContainerItemNavigation.prototype._onFocusLeave = function (oEvent) {
+	GridContainerItemNavigation.prototype._onFocusLeave = function(oEvent) {
 		var currentFocused = this.getFocusedDomRef();
-		this.getItemDomRefs().forEach(function (item, index) {
+		this.getItemDomRefs().forEach(function(item, index) {
 			if (currentFocused === item) {
 				var nextFocusableIndex = index++;
 				this.setFocusedIndex(nextFocusableIndex);
@@ -100,13 +100,13 @@ sap.ui.define([
 		var $AllTabbables = $LastFocused.find(":sapTabbable");
 
 		// leave only real tabbable elements in the tab chain, GridContainer and List types have dummy areas
-		$AllTabbables.map(function (index, element) {
-			if (element.className.indexOf("DummyArea") === -1) {
+		$AllTabbables.map(function(index, element) {
+			if (element.className.indexOf("DummyArea") === -1 && element.className.indexOf("sapMListUl") === -1) {
 				Tabbables.push(element);
 			}
 		});
 
-		var focusableIndex = Tabbables.length  - 1;
+		var focusableIndex = Tabbables.length - 1;
 		if (focusableIndex === -1 ||
 			(Element.closestTo(Tabbables[focusableIndex]) && Element.closestTo(Tabbables[focusableIndex]).getId() === oEvent.target.id)) {
 			this._lastFocusedElement = oEvent.target;

package/src/sap/f/delegate/GridItemNavigation.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 *
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @extends sap.ui.core.delegate.ItemNavigation
 	 *

package/src/sap/f/dnd/GridDragOver.js

@@ -18,7 +18,7 @@ sap.ui.define([
 	 * Handles dragging of a control over a given grid container.
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @extends sap.ui.base.Object
 	 *

package/src/sap/f/dnd/GridDropInfo.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.dnd.DropInfo
 	 *
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 *
 	 * @public
 	 * @experimental Since 1.68 This class is experimental. The API may change.

package/src/sap/f/library.js

@@ -36,13 +36,13 @@ sap.ui.define(["sap/ui/base/DataType",
 	 * @namespace
 	 * @alias sap.f
 	 * @author SAP SE
-	 * @version 1.117.1
+	 * @version 1.119.0
 	 * @since 1.44
 	 * @public
 	 */
 	var thisLib = sap.ui.getCore().initLibrary({
 		name : "sap.f",
-		version: "1.117.1",
+		version: "1.119.0",
 		dependencies : ["sap.ui.core", "sap.m", "sap.ui.layout"],
 		designtime: "sap/f/designtime/library.designtime",
 		interfaces: [