@openui5/sap.ui.integration 1.125.0 → 1.126.0

package/src/sap/ui/integration/util/DisplayVariants.js

@@ -0,0 +1,132 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	"sap/ui/integration/library",
+	"sap/ui/base/Object",
+	"sap/ui/model/json/JSONModel"
+], function (
+	library,
+	BaseObject,
+	JSONModel
+) {
+	"use strict";
+
+	const iStandardTile = 16 * 11;
+
+	const mWidthRanges = {
+		tiny: [20, 1 * iStandardTile],
+		narrow: [1 * iStandardTile, 2 * iStandardTile],
+		regular: [2 * iStandardTile, 4 * iStandardTile],
+		wide: [4 * iStandardTile, 6 * iStandardTile],
+		extraWide: [6 * iStandardTile, 10000]
+	};
+
+	const CardDisplayVariant = library.CardDisplayVariant;
+
+	/**
+	 * Constructor for a new <code>DisplayVariants</code>.
+	 *
+	 * @class
+	 * Processes and resolves destinations configuration.
+	 *
+	 * @extends sap.ui.base.Object
+	 *
+	 * @author SAP SE
+	 * @version 1.126.0
+	 *
+	 * @constructor
+	 * @param {sap.ui.integration.widgets.Card} oCard The card.
+	 * @private
+	 * @alias sap.ui.integration.util.DisplayVariants
+	 */
+	const DisplayVariants = BaseObject.extend("sap.ui.integration.util.DisplayVariants", {
+		metadata: {
+			library: "sap.ui.integration"
+		},
+		constructor: function (oCard) {
+			BaseObject.call(this);
+			this._oCard = oCard;
+
+			oCard.addEventDelegate({
+				onAfterRendering: this._observeWidth
+			}, this);
+		}
+	});
+
+	DisplayVariants.prototype.destroy = function () {
+		BaseObject.prototype.destroy.apply(this, arguments);
+
+		this._oWidthObserver = null;
+	};
+
+	DisplayVariants.prototype.updateSizeModel = function (iWidth) {
+		const oCard = this._oCard;
+		if (!oCard.getDomRef()) {
+			return;
+		}
+		const oSizeModel = oCard.getModel("size");
+		const sDisplayVariant = oCard.getDisplayVariant();
+		iWidth = iWidth || oCard.getDomRef().offsetWidth;
+		const mSize = {
+			tiny: true,
+			narrow: DisplayVariants.determineSize("narrow", iWidth),
+			regular: DisplayVariants.determineSize("regular", iWidth),
+			wide: DisplayVariants.determineSize("wide", iWidth),
+			extraWide: DisplayVariants.determineSize("extraWide", iWidth),
+			compactHeader: sDisplayVariant === CardDisplayVariant.CompactHeader,
+			smallHeader: sDisplayVariant === CardDisplayVariant.SmallHeader,
+			standardHeader: sDisplayVariant === CardDisplayVariant.StandardHeader,
+			small: sDisplayVariant === CardDisplayVariant.Small,
+			standard: sDisplayVariant === CardDisplayVariant.Standard,
+			large: sDisplayVariant === CardDisplayVariant.Large,
+			variant: sDisplayVariant
+		};
+		oSizeModel.setData(mSize);
+	};
+
+	DisplayVariants.prototype.getInitialSizeModel = function () {
+		return new JSONModel({
+			tiny: true,
+			narrow: true,
+			regular: true,
+			wide: false,
+			extraWide: false,
+			compactHeader: false,
+			smallHeader: false,
+			standardHeader: false,
+			small: false,
+			standard: true,
+			large: false,
+			variant: CardDisplayVariant.Standard
+		});
+	};
+
+	DisplayVariants.prototype._observeWidth = function () {
+		const oCardDomRef = this._oCard.getDomRef();
+		if (!oCardDomRef) {
+			return;
+		}
+		if (this._oWidthObserver) {
+			this._oWidthObserver.unobserve(oCardDomRef);
+		}
+		this._oWidthObserver = new ResizeObserver((aEntries) => {
+			const oEntry = aEntries[0];
+			const iWidth = oEntry.contentRect.width;
+			this.updateSizeModel(iWidth);
+		});
+		this._oWidthObserver.observe(oCardDomRef);
+	};
+
+	DisplayVariants.determineSize = function(sSize, iWidth) {
+		if (iWidth >= mWidthRanges[sSize][0]) {
+			return true;
+		}
+		return false;
+	};
+
+	return DisplayVariants;
+});

package/src/sap/ui/integration/util/ErrorHandler.js

@@ -35,7 +35,7 @@ sap.ui.define([
 	 * Utility class for handling errors in the cards.
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @private
 	 * @ui5-restricted

package/src/sap/ui/integration/util/ExtensionDataProvider.js

@@ -17,7 +17,7 @@ sap.ui.define(["sap/ui/integration/util/DataProvider"], function (DataProvider)
 	 * @extends sap.ui.integration.util.DataProvider
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/util/Form.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * Utility class for handling forms in the cards.
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @private
 	 * @ui5-restricted

package/src/sap/ui/integration/util/HeaderFactory.js

@@ -50,7 +50,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.util.BaseFactory
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private
@@ -76,6 +76,10 @@ sap.ui.define([
 			oToolbar = this._createCloseButton(mConfiguration);
 		}
 
+		if (oCard.isCompactHeader()) {
+			mConfiguration.type = "";
+		}
+
 		switch (mConfiguration.type) {
 			case "Numeric":
 				oHeader = new NumericHeader(sId, mConfiguration, oToolbar, oCard._oIconFormatter);
@@ -102,7 +106,9 @@ sap.ui.define([
 		oHeader._setDataConfiguration(mConfiguration.data);
 
 		if (oCard.isTileDisplayVariant()) {
-			this._setTileDefaults(oHeader, mConfiguration);
+			this._setTileDisplayDefaults(oHeader, mConfiguration);
+		} else if (oCard.isHeaderDisplayVariant()) {
+			this._setHeaderDisplayDefaults(oHeader, mConfiguration);
 		}
 
 		var oActions = new CardActions({
@@ -146,7 +152,7 @@ sap.ui.define([
 		return oButton;
 	};
 
-	HeaderFactory.prototype._setTileDefaults = function (oHeader, mConfiguration) {
+	HeaderFactory.prototype._setTileDisplayDefaults = function (oHeader, mConfiguration) {
 		oHeader.setProperty("useTileLayout", true);
 		oHeader.setProperty("useTooltips", true);
 
@@ -188,5 +194,42 @@ sap.ui.define([
 		}
 	};
 
+	HeaderFactory.prototype._setHeaderDisplayDefaults = function (oHeader, mConfiguration) {
+		const oCard = this._oCard;
+		oHeader.setProperty("useTooltips", true);
+
+		if (oCard.isCompactHeader()) {
+			oHeader.setProperty("useTooltips", true);
+			oHeader.setIconSize("XS");
+			oHeader.setTitleMaxLines(1);
+			oHeader.setSubtitleMaxLines(1);
+			oHeader.setStatusVisible(false);
+			return;
+		}
+
+		const bIsSmall = oCard.isSmallHeader();
+
+		if (!mConfiguration.titleMaxLines) {
+			oHeader.setTitleMaxLines(bIsSmall ? 1 : 2);
+		}
+
+		if (bIsSmall) {
+			if (oHeader.isA("sap.f.cards.NumericHeader")) {
+				oHeader.setIconSize("XS");
+				oHeader.setNumberSize("S");
+			}
+
+			if (!mConfiguration.subtitleMaxLines) {
+				oHeader.setSubtitleMaxLines(1);
+			}
+		}
+
+		if (oHeader.isA("sap.f.cards.NumericHeader")) {
+			oHeader.getSideIndicators().forEach((oSideIndicator) => {
+				oSideIndicator.setProperty("useTooltips", true);
+			});
+		}
+	};
+
 	return HeaderFactory;
 });

package/src/sap/ui/integration/util/JSONBindingHelper.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * Helper class for working with bindings for json objects.
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @private
 	 * @ui5-restricted sap.ui.integration, shell-toolkit

package/src/sap/ui/integration/util/LoadingProvider.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/util/Manifest.js

@@ -68,7 +68,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/util/OAuth3LOHelper.js

@@ -18,7 +18,7 @@ sap.ui.define([], function () {
 	 * Utility class helping with OAuth 3LO flow handling.
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @private
 	 * @alias sap.ui.integration.util.OAuth3LOHelper

package/src/sap/ui/integration/util/RequestDataProvider.js

@@ -72,7 +72,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.util.DataProvider
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/util/ServiceDataProvider.js

@@ -17,7 +17,7 @@ sap.ui.define(["sap/ui/integration/util/DataProvider"], function (DataProvider)
 	 * @extends sap.ui.integration.util.DataProvider
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/util/ServiceManager.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.EventProvider
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @param {Object} mServiceFactoryReferences A map with service descriptions.

package/src/sap/ui/integration/util/SkeletonCard.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.widgets.Card
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/util/Utils.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * Utility class helping with JSON strings and formatters.
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @private
 	 * @alias sap.ui.integration.util.Utils

package/src/sap/ui/integration/util/Validators.js

@@ -11,7 +11,7 @@ sap.ui.define([], function () {
 	 * Utility class helping with input validations.
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 *
 	 * @private
 	 * @alias sap.ui.integration.util.Validators

package/src/sap/ui/integration/widgets/Card.js

@@ -39,7 +39,8 @@ sap.ui.define([
 	"sap/m/IllustratedMessageType",
 	"sap/ui/integration/util/Utils",
 	"sap/ui/integration/util/ParameterMap",
-	"sap/ui/integration/util/Measurement"
+	"sap/ui/integration/util/Measurement",
+	"sap/ui/integration/util/DisplayVariants"
 ], function(
 	CardRenderer,
 	Footer,
@@ -76,7 +77,8 @@ sap.ui.define([
 	IllustratedMessageType,
 	Utils,
 	ParameterMap,
-	Measurement
+	Measurement,
+	DisplayVariants
 ) {
 	"use strict";
 
@@ -176,7 +178,7 @@ sap.ui.define([
 	 * @extends sap.f.CardBase
 	 *
 	 * @author SAP SE
-	 * @version 1.125.0
+	 * @version 1.126.0
 	 * @public
 	 * @constructor
 	 * @see {@link topic:5b46b03f024542ba802d99d67bc1a3f4 Cards}
@@ -278,7 +280,8 @@ sap.ui.define([
 				 * @since 1.76
 				 */
 				manifestChanges: {
-					type: "object[]"
+					type: "object[]",
+					defaultValue: []
 				},
 
 				/**
@@ -507,7 +510,7 @@ sap.ui.define([
 				/**
 				 * The opener card.
 				 * @private
-				 * @ui5-restricted
+				 * @ui5-private
 				 */
 				openerReference: { visibility: "hidden" }
 			}
@@ -526,6 +529,7 @@ sap.ui.define([
 
 		this._oIntegrationRb = Library.getResourceBundleFor("sap.ui.integration");
 		this._iModelSizeLimit = DEFAULT_MODEL_SIZE_LIMIT;
+		this._oDisplayVariants = new DisplayVariants(this);
 		this._initModels();
 		this._oContentFactory = new ContentFactory(this);
 		this._oCardObserver = new CardObserver(this);
@@ -545,7 +549,8 @@ sap.ui.define([
 		 * @experimental since 1.79
 		 * @public
 		 * @author SAP SE
-		 * @version 1.125.0
+		 * @version 1.126.0
+		 * @borrows sap.ui.integration.widgets.Card#getId as getId
 		 * @borrows sap.ui.integration.widgets.Card#getDomRef as getDomRef
 		 * @borrows sap.ui.integration.widgets.Card#setVisible as setVisible
 		 * @borrows sap.ui.integration.widgets.Card#getParameters as getParameters
@@ -579,6 +584,7 @@ sap.ui.define([
 		 * @borrows sap.ui.integration.widgets.Card#getBlockingMessage as getBlockingMessage
 		 */
 		this._oLimitedInterface = new Interface(this, [
+			"getId",
 			"getDomRef",
 			"setVisible",
 			"getParameters",
@@ -655,6 +661,12 @@ sap.ui.define([
 				init: () => this.setModel(new ResourceModel({
 					bundle: this._oIntegrationRb
 				}), "i18n")
+			},
+			size: {
+				init: () => this.setModel(this._oDisplayVariants.getInitialSizeModel(), "size")
+			},
+			widgetInfo: {
+				init: () => this.setModel(new JSONModel(), "widgetInfo")
 			}
 		};
 
@@ -725,7 +737,6 @@ sap.ui.define([
 		if (this._getActualDataMode() !== CardDataMode.Active) {
 			return;
 		}
-
 		this.startManifestProcessing();
 	};
 
@@ -1317,6 +1328,7 @@ sap.ui.define([
 		this._destroyManifest();
 		this._oCardObserver.destroy();
 		this._oCardObserver = null;
+		this._oDisplayVariants = null;
 		this._oContentFactory = null;
 		this._oIntegrationRb = null;
 		this._aActiveLoadingProviders = null;
@@ -2035,10 +2047,14 @@ sap.ui.define([
 	};
 
 	Card.prototype._applyFooterManifestSettings = function () {
-		var oFooter = this.createFooter();
 
 		this.destroyAggregation("_footer");
 
+		if (this._shouldIgnoreFooter()) {
+			return;
+		}
+		var oFooter = this.createFooter();
+
 		if (oFooter) {
 			this.setAggregation("_footer", oFooter);
 		}
@@ -2119,6 +2135,38 @@ sap.ui.define([
 		return aTileVariants.indexOf(this.getDisplayVariant()) > -1;
 	};
 
+	/**
+	 * @private
+	 * @ui5-restricted sap.ui.integration
+	 * @returns {boolean} If the card is rendered as a compactheader variant
+	 */
+	Card.prototype.isCompactHeader = function () {
+		return this.getDisplayVariant() === CardDisplayVariant.CompactHeader;
+	};
+
+	/**
+	 * @private
+	 * @ui5-restricted sap.ui.integration
+	 * @returns {boolean} If the card is rendered as a smallheader variant
+	 */
+	Card.prototype.isSmallHeader = function () {
+		return this.getDisplayVariant() === CardDisplayVariant.SmallHeader;
+	};
+
+	/**
+	 * @private
+	 * @ui5-restricted sap.ui.integration
+	 * @returns {boolean} If the card is rendered as a tile variant
+	 */
+	Card.prototype.isHeaderDisplayVariant = function () {
+		const aHeaderVariants = [
+			CardDisplayVariant.SmallHeader,
+			CardDisplayVariant.StandardHeader,
+			CardDisplayVariant.CompactHeader
+		];
+		return aHeaderVariants.indexOf(this.getDisplayVariant()) > -1;
+	};
+
 	/**
 	 * Checks if this is a Component Card. Manifest must be loaded for that check.
 	 * @private
@@ -2141,9 +2189,21 @@ sap.ui.define([
 		}
 
 		const bIsTile = this.isTileDisplayVariant();
+		const bIsHeader = this.isHeaderDisplayVariant();
 		const bHasNoContent = !this._oCardManifest.get(MANIFEST_PATHS.CONTENT);
 
-		return bIsTile || bHasNoContent;
+		return bIsTile || bHasNoContent || bIsHeader;
+	};
+
+	/**
+	 * Checks if the content section should be ignored.
+	 * @private
+	 * @returns {boolean} True if the content section should be ignored.
+	 */
+	Card.prototype._shouldIgnoreFooter = function () {
+		const bIsTile = this.isTileDisplayVariant();
+		const bIsHeader = this.isHeaderDisplayVariant();
+		return bIsTile || bIsHeader;
 	};
 
 	Card.prototype.createHeader = function () {
@@ -3087,5 +3147,17 @@ sap.ui.define([
 		return sDataMode;
 	};
 
+	/**
+	 * Sets the display variant and informs the size model.
+	 * @param {sap.ui.integration.DisplayVariant} sValue The new display variant.
+	 * @param {boolean} bSuppressInvalidate Whether to suppress invalidation.
+	 * @return {sap.ui.integration.widgets.Card} Pointer to the control instance to allow method chaining.
+	 */
+	Card.prototype.setDisplayVariant = function (sValue, bSuppressInvalidate) {
+		this.setProperty("displayVariant", sValue, bSuppressInvalidate);
+		this._oDisplayVariants.updateSizeModel();
+		return this;
+	};
+
 	return Card;
 });