@openui5/sap.ui.integration 1.96.2 → 1.98.0

package/src/sap/ui/integration/cards/NumericHeader.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([
@@ -32,10 +32,10 @@ sap.ui.define([
 	 *
 	 * @class
 	 * Displays general information in the header of the {@link sap.ui.integration.widgets.Card}.
-	 * @extends sap.f.NumericHeader
+	 * @extends sap.f.cards.NumericHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.98.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/cards/ObjectContent.js

@@ -1,12 +1,14 @@
 /*!
 * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
 */
 sap.ui.define([
+	"./BaseContent",
+	"./ObjectContentRenderer",
 	"sap/ui/integration/library",
-	"sap/ui/integration/cards/BaseContent",
 	"sap/m/library",
+	"sap/m/FlexItemData",
 	"sap/m/HBox",
 	"sap/m/VBox",
 	"sap/m/Text",
@@ -14,16 +16,21 @@ sap.ui.define([
 	"sap/m/Avatar",
 	"sap/m/Link",
 	"sap/m/Label",
+	"sap/m/ObjectStatus",
 	"sap/base/Log",
 	"sap/ui/core/ResizeHandler",
 	"sap/ui/layout/AlignedFlowLayout",
 	"sap/ui/dom/units/Rem",
 	"sap/ui/integration/util/BindingHelper",
-	"sap/ui/integration/util/Utils"
+	"sap/ui/integration/util/Utils",
+	"sap/f/cards/NumericIndicators",
+	"sap/f/cards/NumericSideIndicator"
 ], function (
-	library,
 	BaseContent,
+	ObjectContentRenderer,
+	library,
 	mLibrary,
+	FlexItemData,
 	HBox,
 	VBox,
 	Text,
@@ -31,12 +38,15 @@ sap.ui.define([
 	Avatar,
 	Link,
 	Label,
+	ObjectStatus,
 	Log,
 	ResizeHandler,
 	AlignedFlowLayout,
 	Rem,
 	BindingHelper,
-	Utils
+	Utils,
+	NumericIndicators,
+	NumericSideIndicator
 ) {
 	"use strict";
 
@@ -62,35 +72,341 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.integration.cards.BaseContent
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.98.0
 	 *
 	 * @constructor
 	 * @experimental
 	 * @since 1.64
-	 * @see {@link TODO Card}
 	 * @alias sap.ui.integration.cards.ObjectContent
 	 */
 	var ObjectContent = BaseContent.extend("sap.ui.integration.cards.ObjectContent", {
 		metadata: {
 			library: "sap.ui.integration"
 		},
-		renderer: {
-			apiVersion: 2
-		}
+		renderer: ObjectContentRenderer
 	});
 
+	ObjectContent.prototype.exit = function() {
+		BaseContent.prototype.exit.apply(this, arguments);
+
+		if (this._sResizeListenerId) {
+			ResizeHandler.deregister(this._sResizeListenerId);
+			this._sResizeListenerId = "";
+		}
+	};
+
+	ObjectContent.prototype.setConfiguration = function (oConfiguration) {
+		BaseContent.prototype.setConfiguration.apply(this, arguments);
+		oConfiguration = this.getParsedConfiguration();
+
+		if (!oConfiguration) {
+			return this;
+		}
+
+		if (oConfiguration.groups) {
+			this._addGroups(oConfiguration);
+		}
+
+		return this;
+	};
+
 	ObjectContent.prototype._getRootContainer = function () {
-		if (this._bIsBeingDestroyed) {
-			return null;
+		var oRootContainer = this.getAggregation("_content");
+
+		if (!oRootContainer) {
+			oRootContainer = new VBox({
+				renderType: FlexRendertype.Bare
+			});
+			this.setAggregation("_content", oRootContainer);
+			// registration ID used for deregistering the resize handler
+			this._sResizeListenerId = ResizeHandler.register(oRootContainer, this._onResize.bind(this));
+		}
+
+		return oRootContainer;
+	};
+
+	ObjectContent.prototype._addGroups = function (oConfiguration) {
+		var oContainer = this._getRootContainer(),
+			oAFLayout,
+			bNextAFLayout = true,
+			aGroups = oConfiguration.groups || [];
+
+		aGroups.forEach(function (oGroupConfiguration, i) {
+			var oGroup = this._createGroup(oGroupConfiguration);
+
+			if (oGroupConfiguration.alignment === "Stretch") {
+				oGroup.setLayoutData(new FlexItemData({
+					growFactor: 1
+				}));
+
+				if (i === aGroups.length - 1) {
+					oGroup.addStyleClass("sapFCardObjectGroupLastInColumn");
+				}
+
+				oContainer.addItem(oGroup);
+				bNextAFLayout = true;
+			} else {
+				if (bNextAFLayout) {
+					oAFLayout = this._createAFLayout();
+					oContainer.addItem(oAFLayout);
+					bNextAFLayout = false;
+				}
+				oAFLayout.addContent(oGroup);
+			}
+
+		}, this);
+
+		this._oActions.attach({
+			area: ActionArea.Content,
+			actions: oConfiguration.actions,
+			control: this
+		});
+	};
+
+	ObjectContent.prototype._createGroup = function (oGroupConfiguration) {
+		var vVisible;
+
+		if (typeof oGroupConfiguration.visible == "string") {
+			vVisible = !Utils.hasFalsyValueAsString(oGroupConfiguration.visible);
+		} else {
+			vVisible = oGroupConfiguration.visible;
+		}
+
+		var oGroup = new VBox({
+			visible: vVisible,
+			renderType: FlexRendertype.Bare
+		}).addStyleClass("sapFCardObjectGroup");
+
+		if (oGroupConfiguration.title) {
+			oGroup.addItem(new Title({
+				text: oGroupConfiguration.title
+			}).addStyleClass("sapFCardObjectItemTitle"));
+
+			oGroup.addStyleClass("sapFCardObjectGroupWithTitle");
+		}
+
+		oGroupConfiguration.items.forEach(function (oItem) {
+			this._createGroupItems(oItem).forEach(oGroup.addItem, oGroup);
+		}, this);
+
+		return oGroup;
+	};
+
+	ObjectContent.prototype._createGroupItems = function (oItem) {
+		var vLabel = oItem.label,
+			oLabel,
+			vVisible,
+			oControl;
+
+		if (typeof oItem.visible == "string") {
+			vVisible = !Utils.hasFalsyValueAsString(oItem.visible);
+		} else {
+			vVisible = oItem.visible;
+		}
+
+		if (vLabel) {
+			// Checks if the label ends with ":" and if not we just add the ":"
+			vLabel = BindingHelper.formattedProperty(vLabel, function (sValue) {
+				return sValue && sValue[sValue.length - 1] === ":" ? sValue : sValue + ":";
+			});
+			oLabel = new Label({
+				text: vLabel,
+				visible: vVisible
+			}).addStyleClass("sapFCardObjectItemLabel");
+		}
+
+		oControl = this._createItem(oItem, vVisible, oLabel);
+
+		if (oControl) {
+			oControl.addStyleClass("sapFCardObjectItemValue");
+		}
+
+		if (oItem.icon) {
+			var oVbox = new VBox({
+				renderType: FlexRendertype.Bare,
+				items: [
+					oLabel,
+					oControl
+				]
+			});
+			var oHBox = new HBox({
+				visible: vVisible,
+				renderType: FlexRendertype.Bare,
+				items: [
+					this._createGroupItemAvatar(oItem.icon),
+					oVbox
+				]
+			}).addStyleClass("sapFCardObjectItemLabel");
+			return [oHBox];
+		} else {
+			return [oLabel, oControl];
+		}
+	};
+
+	ObjectContent.prototype._createGroupItemAvatar = function (oIconConfiguration) {
+		var vSrc = BindingHelper.formattedProperty(oIconConfiguration.src, function (sValue) {
+			return this._oIconFormatter.formatSrc(sValue);
+		}.bind(this));
+
+		var oAvatar = new Avatar({
+			displaySize: oIconConfiguration.size || AvatarSize.XS,
+			src: vSrc,
+			initials: oIconConfiguration.text,
+			displayShape: oIconConfiguration.shape,
+			tooltip: oIconConfiguration.alt,
+			backgroundColor: oIconConfiguration.backgroundColor || (oIconConfiguration.text ? undefined : AvatarColor.Transparent)
+		}).addStyleClass("sapFCardObjectItemAvatar sapFCardIcon");
+
+		return oAvatar;
+	};
+
+	ObjectContent.prototype._createItem = function (oItem, vVisible, oLabel) {
+		var oControl,
+			vValue = oItem.value,
+			vHref;
+
+		switch (oItem.type) {
+			case "NumericData":
+				oControl = this._createNumericDataItem(oItem);
+				break;
+			case "Status":
+				oControl = this._createStatusItem(oItem, vVisible);
+				break;
+
+			// deprecated types
+			case "link":
+				Log.warning("Usage of Object Group Item property 'type' with value 'link' is deprecated. Use Card Actions for navigation instead.", null, "sap.ui.integration.widgets.Card");
+				oControl = new Link({
+					href: oItem.url || vValue,
+					text: vValue,
+					target: oItem.target || '_blank',
+					visible: BindingHelper.reuse(vVisible)
+				});
+				break;
+			case "email":
+				Log.warning("Usage of Object Group Item property 'type' with value 'email' is deprecated. Use Card Actions for navigation instead.", null, "sap.ui.integration.widgets.Card");
+				var aBindingParts = [];
+				if (oItem.value) {
+					aBindingParts.push(oItem.value);
+				}
+				if (oItem.emailSubject) {
+					aBindingParts.push(oItem.emailSubject);
+				}
+
+				vHref = BindingHelper.formattedProperty(aBindingParts, function (sValue, sEmailSubject) {
+						if (sEmailSubject) {
+							return "mailto:" + sValue + "?subject=" + sEmailSubject;
+						} else {
+							return "mailto:" + sValue;
+						}
+					});
+
+				oControl = new Link({
+					href: vHref,
+					text: vValue,
+					visible: BindingHelper.reuse(vVisible)
+				});
+				break;
+			case "phone":
+				Log.warning("Usage of Object Group Item property 'type' with value 'phone' is deprecated. Use Card Actions for navigation instead.", null, "sap.ui.integration.widgets.Card");
+				vHref = BindingHelper.formattedProperty(vValue, function (sValue) {
+					return "tel:" + sValue;
+				});
+				oControl = new Link({
+					href: vHref,
+					text: vValue,
+					visible: BindingHelper.reuse(vVisible)
+				});
+				break;
+
+			default:
+				oControl = this._createTextItem(oItem, vVisible, oLabel);
+		}
+
+		return oControl;
+	};
+
+	ObjectContent.prototype._createNumericDataItem = function (oItem) {
+		var oVbox = new VBox();
+		var oNumericIndicators = new NumericIndicators({
+			number: oItem.mainIndicator.number,
+			numberSize: oItem.mainIndicator.size,
+			scale: oItem.mainIndicator.unit,
+			trend: oItem.mainIndicator.trend,
+			state: oItem.mainIndicator.state
+		}).addStyleClass("sapUiIntOCNumericIndicators");
+
+		oVbox.addItem(oNumericIndicators);
+
+		if (oItem.sideIndicators) {
+			oItem.sideIndicators.forEach(function (oIndicator) {
+				oNumericIndicators.addSideIndicator(
+					new NumericSideIndicator({
+						title: oIndicator.title,
+						number: oIndicator.number,
+						unit: oIndicator.unit,
+						state: oIndicator.state
+					})
+				);
+			});
 		}
 
-		var oAlignedFlowLayout = this.getAggregation("_content");
-		if (!oAlignedFlowLayout) {
-			oAlignedFlowLayout = new AlignedFlowLayout();
-			this.setAggregation("_content", oAlignedFlowLayout);
+		if (oItem.details) {
+			oVbox.addItem(new Text({
+				text: oItem.details,
+				maxLines: 1
+			}).addStyleClass("sapUiIntOCNumericIndicatorsDetails"));
 		}
-		// registration ID used for deregistering the resize handler
-		this._sResizeListenerId = ResizeHandler.register(oAlignedFlowLayout, this.onAlignedFlowLayoutResize.bind(this));
+
+		return oVbox;
+	};
+
+	ObjectContent.prototype._createStatusItem = function (oItem, vVisible) {
+		var oControl = new ObjectStatus({
+			text: oItem.value,
+			visible: BindingHelper.reuse(vVisible),
+			state: oItem.state
+		});
+
+		return oControl;
+	};
+
+	ObjectContent.prototype._createTextItem = function (oItem, vVisible, oLabel) {
+		var vValue = oItem.value,
+			oControl;
+
+		if (vValue && oItem.actions) {
+			oControl = new Link({
+				text: vValue,
+				visible: BindingHelper.reuse(vVisible)
+			});
+
+			if (oLabel) {
+				oControl.addAriaLabelledBy(oLabel);
+			} else {
+				Log.warning("Missing label for Object group item with actions.", null, "sap.ui.integration.widgets.Card");
+			}
+
+			this._oActions.attach({
+				area: ActionArea.ContentItemDetail,
+				actions: oItem.actions,
+				control: this,
+				actionControl: oControl,
+				enabledPropertyName: "enabled"
+			});
+		} else if (vValue) {
+			oControl = new Text({
+				text: vValue,
+				visible: BindingHelper.reuse(vVisible),
+				maxLines: oItem.maxLines
+			});
+		}
+
+		return oControl;
+	};
+
+	ObjectContent.prototype._createAFLayout = function () {
+		var oAlignedFlowLayout = new AlignedFlowLayout();
 
 		oAlignedFlowLayout.addEventDelegate({
 			"onAfterRendering": function() {
@@ -105,15 +421,26 @@ sap.ui.define([
 		return oAlignedFlowLayout;
 	};
 
-	ObjectContent.prototype.onAlignedFlowLayoutResize = function (oEvent) {
-		if (oEvent && (oEvent.size.width === oEvent.oldSize.width) && !oEvent.control) {
+	ObjectContent.prototype._onResize = function (oEvent) {
+		if (oEvent.size.width === oEvent.oldSize.width) {
 			return;
 		}
 
-		var oControl = oEvent.control,
-			sMinItemWidth = oControl.getMinItemWidth(),
-			iNumberOfGroups = oControl.getContent().length,
-			iMinItemWidth;
+		var aItems = this._getRootContainer().getItems();
+
+		aItems.forEach(function (oItem, i) {
+			if (oItem.isA("sap.ui.layout.AlignedFlowLayout")) {
+				this._onAlignedFlowLayoutResize(oItem, oEvent, i === aItems.length - 1);
+			}
+		}.bind(this));
+	};
+
+	ObjectContent.prototype._onAlignedFlowLayoutResize = function (oAFLayout, oEvent, bLast) {
+		var sMinItemWidth = oAFLayout.getMinItemWidth(),
+			iMinItemWidth,
+			iNumberOfGroups = oAFLayout.getContent().filter(function (oContent) {
+				return oContent.getVisible();
+			}).length;
 
 		// the CSS unit of the minItemWidth control property is in rem
 		if (sMinItemWidth.lastIndexOf("rem") !== -1) {
@@ -131,17 +458,10 @@ sap.ui.define([
 			iColumns = iNumberOfGroups;
 		}
 
-		//Optimization
-		if (this._iColsOld === iColumns) {
-			return;
-		}
-
-		this._iColsOld = iColumns;
-
 		var lastColIndex = iColumns - 1,
 			iRows = Math.ceil(iNumberOfGroups / iColumns);
 
-		oControl.getContent().forEach(function (oItem, iIndex) {
+		oAFLayout.getContent().forEach(function (oItem, iIndex) {
 			// Add spacing on every group
 			oItem.addStyleClass("sapFCardObjectSpaceBetweenGroup");
 
@@ -152,7 +472,7 @@ sap.ui.define([
 			}
 
 			// change bottom padding of the last item in each column
-			if (iIndex + 1 > (iRows - 1) * iColumns) {
+			if (bLast && iIndex + 1 > (iRows - 1) * iColumns) {
 				oItem.addStyleClass("sapFCardObjectGroupLastInColumn");
 			} else {
 				oItem.removeStyleClass("sapFCardObjectGroupLastInColumn");
@@ -160,200 +480,5 @@ sap.ui.define([
 		});
 	};
 
-	ObjectContent.prototype.exit = function() {
-		BaseContent.prototype.exit.apply(this, arguments);
-
-		if (this._sResizeListenerId) {
-			ResizeHandler.deregister(this._sResizeListenerId);
-			this._sResizeListenerId = "";
-		}
-	};
-
-	ObjectContent.prototype.setConfiguration = function (oConfiguration) {
-		BaseContent.prototype.setConfiguration.apply(this, arguments);
-
-		if (!oConfiguration) {
-			return this;
-		}
-
-		if (oConfiguration.groups) {
-			this._addGroups(oConfiguration);
-		}
-
-		return this;
-	};
-
-	ObjectContent.prototype._addGroups = function (oConfiguration) {
-		var oContainer = this._getRootContainer(),
-			aGroups = oConfiguration.groups || [];
-
-		aGroups.forEach(function (oGroup) {
-			var vVisible;
-
-			if (typeof oGroup.visible == "string") {
-				vVisible = !Utils.hasFalsyValueAsString(oGroup.visible);
-			} else {
-				vVisible = oGroup.visible;
-			}
-
-			var oGroupContainer = new VBox({
-				visible: vVisible,
-				renderType: FlexRendertype.Bare
-			}).addStyleClass("sapFCardObjectGroup");
-
-			if (oGroup.title) {
-				oGroupContainer.addItem(new Title({
-					text: oGroup.title
-				}).addStyleClass("sapFCardObjectItemTitle"));
-
-				oGroupContainer.addStyleClass("sapFCardObjectGroupWithTitle");
-			}
-
-			oGroup.items.forEach(function (oItem) {
-
-				var vLabel = oItem.label,
-					vValue = oItem.value,
-					oLabel,
-					vVisible,
-					oControl,
-					vHref,
-					aBindingParts = [];
-
-				if (typeof oItem.visible == "string") {
-					vVisible = !Utils.hasFalsyValueAsString(oItem.visible);
-				} else {
-					vVisible = oItem.visible;
-				}
-
-				if (vLabel) {
-					// Checks if the label ends with ":" and if not we just add the ":"
-					vLabel = BindingHelper.formattedProperty(vLabel, function (sValue) {
-						return sValue && sValue[sValue.length - 1] === ":" ? sValue : sValue + ":";
-					});
-					oLabel = new Label({
-						text: vLabel,
-						visible: vVisible
-					}).addStyleClass("sapFCardObjectItemLabel");
-				}
-
-				if (vValue && oItem.actions) {
-					oControl = new Link({
-						text: vValue,
-						visible: BindingHelper.reuse(vVisible)
-					});
-					this._oActions.attach({
-						area: ActionArea.ContentItemDetail,
-						actions: oItem.actions,
-						control: this,
-						actionControl: oControl,
-						enabledPropertyName: "enabled"
-					});
-				}
-
-				if (vValue && !oItem.actions && oItem.type) {
-					Log.warning("Usage of Object Group Item property 'type' is deprecated. Use Card Actions for navigation.", null, "sap.ui.integration.widgets.Card");
-
-					switch (oItem.type) {
-						case 'link':
-							oControl = new Link({
-								href: oItem.url || vValue,
-								text: vValue,
-								target: oItem.target || '_blank',
-								visible: BindingHelper.reuse(vVisible)
-							});
-							break;
-						case 'email':
-							if (oItem.value) {
-								aBindingParts.push(oItem.value);
-							}
-							if (oItem.emailSubject) {
-								aBindingParts.push(oItem.emailSubject);
-							}
-
-							vHref = BindingHelper.formattedProperty(aBindingParts, function (sValue, sEmailSubject) {
-									if (sEmailSubject) {
-										return "mailto:" + sValue + "?subject=" + sEmailSubject;
-									} else {
-										return "mailto:" + sValue;
-									}
-								});
-
-							oControl = new Link({
-								href: vHref,
-								text: vValue,
-								visible: BindingHelper.reuse(vVisible)
-							});
-							break;
-						case 'phone':
-							vHref = BindingHelper.formattedProperty(vValue, function (sValue) {
-								return "tel:" + sValue;
-							});
-							oControl = new Link({
-								href: vHref,
-								text: vValue,
-								visible: BindingHelper.reuse(vVisible)
-							});
-							break;
-						default:
-					}
-				}
-
-				if (vValue && !oControl) {
-					oControl = new Text({
-						text: vValue,
-						visible: BindingHelper.reuse(vVisible)
-					});
-				}
-
-				if (oControl) {
-					oControl.addStyleClass("sapFCardObjectItemText");
-				}
-
-				if (oItem.icon) {
-					var vSrc = BindingHelper.formattedProperty(oItem.icon.src, function (sValue) {
-						return this._oIconFormatter.formatSrc(sValue);
-					}.bind(this));
-
-					var oAvatar = new Avatar({
-						displaySize: oItem.icon.size || AvatarSize.XS,
-						src: vSrc,
-						initials: oItem.icon.text,
-						displayShape: oItem.icon.shape,
-						tooltip: oItem.icon.alt,
-						backgroundColor: oItem.icon.backgroundColor || (oItem.icon.text ? undefined : AvatarColor.Transparent)
-					}).addStyleClass("sapFCardObjectItemAvatar sapFCardIcon");
-
-					var oVbox = new VBox({
-						renderType: FlexRendertype.Bare,
-						items: [
-							oLabel,
-							oControl
-						]
-					});
-					var oHBox = new HBox({
-						visible: vVisible,
-						renderType: FlexRendertype.Bare,
-						items: [
-							oAvatar,
-							oVbox
-						]
-					}).addStyleClass("sapFCardObjectItemLabel");
-
-					oGroupContainer.addItem(oHBox);
-				} else {
-					oGroupContainer.addItem(oLabel);
-					oGroupContainer.addItem(oControl);
-				}
-			}, this);
-			oContainer.addContent(oGroupContainer);
-		}, this);
-
-		this._oActions.attach({
-			area: ActionArea.Content,
-			actions: oConfiguration.actions,
-			control: this
-		});
-	};
-
 	return ObjectContent;
 });

package/src/sap/ui/integration/cards/ObjectContentRenderer.js

@@ -0,0 +1,28 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define(["./BaseContentRenderer"], function (BaseContentRenderer) {
+	"use strict";
+
+	/**
+	 * ObjectContentRenderer renderer.
+	 * @author SAP SE
+	 * @namespace
+	 */
+	var ObjectContentRenderer = BaseContentRenderer.extend("sap.ui.integration.cards.ObjectContentRenderer", {
+		apiVersion: 2,
+		MIN_OBJECT_CONTENT_HEIGHT: "3rem" // assuming 1 line of text and content padding
+	});
+
+	/**
+	 * @override
+	 */
+	 ObjectContentRenderer.getMinHeight = function (oConfiguration, oContent) {
+		return ObjectContentRenderer.MIN_OBJECT_CONTENT_HEIGHT;
+	};
+
+	return ObjectContentRenderer;
+});