@openui5/sap.ui.integration 1.136.3 → 1.139.0

package/src/sap/ui/integration/ActionDefinition.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/integration/Designtime.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/integration/Extension.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/integration/Host.js

@@ -30,7 +30,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.136.3
+		 * @version 1.139.0
 		 *
 		 * @constructor
 		 * @public

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

@@ -35,7 +35,7 @@ sap.ui.define([
 		 * @extends sap.ui.integration.cards.BaseContent
 		 *
 		 * @author SAP SE
-		 * @version 1.136.3
+		 * @version 1.139.0
 		 *
 		 * @constructor
 		 * @private

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

@@ -92,7 +92,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseContent
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -187,8 +187,8 @@ sap.ui.define([
 				this.hideNoDataMessage();
 			} else {
 				this.showNoDataMessage({
-					illustrationType: IllustratedMessageType.NoEntries,
-					title: this.getCardInstance().getTranslatedText("CARD_NO_ITEMS_ERROR_LISTS")
+					illustrationType: IllustratedMessageType.NoData,
+					title: Library.getResourceBundleFor("sap.ui.integration").getText("CARD_NO_ITEMS_ERROR_LISTS")
 				});
 			}
 		}

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

@@ -11,7 +11,9 @@ sap.ui.define([
 	"sap/ui/integration/util/BindingResolver",
 	"sap/m/IllustratedMessageType",
 	"sap/base/Log",
+	"sap/ui/core/Lib",
 	"sap/base/util/deepClone",
+	"sap/base/util/deepEqual",
 	"sap/ui/integration/util/AnalyticsCloudHelper"
 ], function (
 	AnalyticsCloudContentRenderer,
@@ -20,11 +22,15 @@ sap.ui.define([
 	BindingResolver,
 	IllustratedMessageType,
 	Log,
+	Library,
 	deepClone,
+	deepEqual,
 	AnalyticsCloudHelper
 ) {
 	"use strict";
 
+	const oResourceBundle = Library.getResourceBundleFor("sap.ui.integration");
+
 	/**
 	 * Constructor for a new <code>AnalyticsCloudContent</code>.
 	 *
@@ -37,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseContent
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -150,6 +156,14 @@ sap.ui.define([
 		const vInterpretation = oConfig?.interpretation;
 		const oOptions = this._getOptions(oConfig);
 
+		// Check if the configuration has changed
+		// during rendering the sac widget.
+		if (deepEqual(this._oLastConfig, oConfig)) {
+			return;
+		}
+
+		this._oLastConfig = oConfig;
+
 		if (oWidget) {
 			sap.sac.api.widget.renderWidget(
 				sContainerId,
@@ -246,6 +260,11 @@ sap.ui.define([
 	 * Sets the widget info from sap.sac.api.widget.getWidgetInfo to card's model widgetInfo
 	 */
 	AnalyticsCloudContent.prototype._updateWidgetInfo = async function () {
+		// clear the last config after the widget is rendered
+		// sо that it can be re-rendered with new configuration,
+		// if the configuration is changed.
+		this._oLastConfig = null;
+
 		const oCard = this.getCardInstance();
 		const sContainerId = this._oWidgetContainer.getId();
 
@@ -266,14 +285,12 @@ sap.ui.define([
 	 * @param {string} sError The error message to log.
 	 */
 	AnalyticsCloudContent.prototype._showError = function (sError) {
-		const oCard = this.getCardInstance();
-
 		Log.error(sError, this);
 
 		this.handleError({
-			illustrationType: IllustratedMessageType.ErrorScreen,
-			title: oCard.getTranslatedText("CARD_ERROR_ANALYTICS_CLOUD_TITLE"),
-			description: oCard.getTranslatedText("CARD_ERROR_ANALYTICS_CLOUD_DESCRIPTION")
+			illustrationType: IllustratedMessageType.UnableToLoad,
+			title: oResourceBundle.getText("CARD_ERROR_ANALYTICS_CLOUD_TITLE"),
+			description: oResourceBundle.getText("CARD_ERROR_ANALYTICS_CLOUD_DESCRIPTION")
 		});
 	};
 

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

@@ -76,7 +76,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -305,6 +305,14 @@ sap.ui.define([
 	 */
 	BaseContent.prototype.applyConfiguration = function () { };
 
+	/**
+	 * Called when card is opened inside a dialog as a result of Pagination or Show More action.
+	 * To be implemented by subclasses.
+	 * @virtual
+	 * @protected
+	 */
+	BaseContent.prototype.onOpenInDialog = function () { };
+
 	BaseContent.prototype.setLoadDependenciesPromise = function (oPromise) {
 		this._pLoadDependencies = oPromise;
 		this.awaitEvent("_loadDependencies");

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

@@ -10,6 +10,7 @@ sap.ui.define([
 	"sap/ui/integration/util/BindingResolver",
 	"sap/m/IllustratedMessageType",
 	"sap/ui/integration/library",
+	"sap/ui/core/Lib",
 	"sap/base/Log"
 ], function (
 	BaseContent,
@@ -17,6 +18,7 @@ sap.ui.define([
 	BindingResolver,
 	IllustratedMessageType,
 	library,
+	Library,
 	Log
 ) {
 	"use strict";
@@ -33,7 +35,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseContent
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -77,7 +79,7 @@ sap.ui.define([
 		} else {
 			this.showNoDataMessage({
 				illustrationType: IllustratedMessageType.NoEntries,
-				title: this.getCardInstance().getTranslatedText("CARD_NO_ITEMS_ERROR_LISTS")
+				title: Library.getResourceBundleFor("sap.ui.integration").getText("CARD_NO_ITEMS_ERROR_LISTS")
 			});
 		}
 

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

@@ -79,7 +79,7 @@ sap.ui.define([
 		 * @extends sap.ui.integration.cards.BaseContent
 		 *
 		 * @author SAP SE
-		 * @version 1.136.3
+		 * @version 1.139.0
 		 *
 		 * @constructor
 		 * @private

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

@@ -10,14 +10,16 @@ sap.ui.define([
 	"sap/ui/integration/library",
 	"sap/m/IllustratedMessageType",
 	"sap/ui/core/ComponentContainer",
-	"sap/ui/core/ComponentHooks"
+	"sap/ui/core/ComponentHooks",
+	"sap/ui/core/Lib"
 ], function (
 	BaseContent,
 	ComponentContentRenderer,
 	library,
 	IllustratedMessageType,
 	ComponentContainer,
-	ComponentHooks
+	ComponentHooks,
+	Library
 ) {
 	"use strict";
 
@@ -37,7 +39,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseContent
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @experimental
 	 * @constructor
@@ -116,8 +118,8 @@ sap.ui.define([
 			componentFailed: () => {
 				this.fireEvent("_actionContentReady");
 				this.handleError({
-					illustrationType: IllustratedMessageType.ErrorScreen,
-					title: oCard.getTranslatedText("CARD_DATA_LOAD_ERROR"),
+					illustrationType: IllustratedMessageType.UnableToLoad,
+					title: Library.getResourceBundleFor("sap.ui.integration").getText("CARD_DATA_LOAD_ERROR"),
 					description: "Card content failed to create component"
 				});
 			}

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @ui5-restricted

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

@@ -15,6 +15,7 @@ sap.ui.define([
 	"sap/ui/integration/util/BindingResolver",
 	"sap/ui/integration/util/LoadingProvider",
 	"sap/ui/integration/util/Utils",
+	"sap/ui/integration/util/subtitleToSubTitle",
 	"sap/ui/integration/formatters/IconFormatter"
 ], function (
 	Element,
@@ -28,6 +29,7 @@ sap.ui.define([
 	BindingResolver,
 	LoadingProvider,
 	Utils,
+	subtitleToSubTitle,
 	IconFormatter
 ) {
 	"use strict";
@@ -46,7 +48,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.Header
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -81,8 +83,8 @@ sap.ui.define([
 		var mSettings = {
 			title: mConfiguration.title,
 			titleMaxLines: mConfiguration.titleMaxLines,
-			subtitle: mConfiguration.subTitle,
-			subtitleMaxLines: mConfiguration.subTitleMaxLines,
+			subtitle: mConfiguration.subtitle || mConfiguration.subTitle,
+			subtitleMaxLines: mConfiguration.subtitleMaxLines || mConfiguration.subTitleMaxLines,
 			dataTimestamp: mConfiguration.dataTimestamp,
 			visible: mConfiguration.visible,
 			wrappingType: mConfiguration.wrappingType
@@ -257,6 +259,8 @@ sap.ui.define([
 			oConfiguration.icon.src = this._oIconFormatter.formatSrc(BindingResolver.resolveValue(oConfiguration.icon.src, this));
 		}
 
+		subtitleToSubTitle(oConfiguration);
+
 		return oConfiguration;
 	};
 

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

@@ -69,7 +69,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.BaseListContent
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -346,7 +346,7 @@ sap.ui.define([
 		}
 
 		if (mItem.attributes) {
-			mItem.attributes.forEach(function (attr) {
+			mItem.attributes.forEach((attr) => {
 				oObjectStatus = new ObjectStatus({
 					text: attr.value,
 					state: attr.state,
@@ -357,6 +357,13 @@ sap.ui.define([
 					inverted: attr.inverted
 				});
 
+				this._oActions.attach({
+					area: ActionArea.ContentItem,
+					actions: attr.actions,
+					control: oObjectStatus,
+					enabledPropertyName: "active"
+				});
+
 				mSettings.attributes.push(oObjectStatus);
 			});
 		}
@@ -385,6 +392,14 @@ sap.ui.define([
 			disabledPropertyValue: ListType.Inactive
 		});
 
+		this._oActions.attach({
+			area: ActionArea.ContentItem,
+			actions: mItem?.info?.actions,
+			control: this._oItemTemplate,
+			enabledPropertyName: "infoActive",
+			eventName: "infoPress"
+		});
+
 		var oGroup = oConfiguration.group;
 
 		if (oGroup) {

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

@@ -5,6 +5,7 @@
  */
 sap.ui.define([
 	"sap/base/util/extend",
+	"sap/base/util/merge",
 	"sap/f/cards/NumericHeader",
 	"sap/f/cards/NumericHeaderRenderer",
 	"sap/f/cards/NumericSideIndicator",
@@ -15,9 +16,11 @@ sap.ui.define([
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/integration/util/BindingResolver",
 	"sap/ui/integration/util/LoadingProvider",
+	"sap/ui/integration/util/subtitleToSubTitle",
 	"sap/ui/integration/controls/Microchart"
 ], function (
 	extend,
+	merge,
 	FNumericHeader,
 	FNumericHeaderRenderer,
 	NumericSideIndicator,
@@ -28,6 +31,7 @@ sap.ui.define([
 	JSONModel,
 	BindingResolver,
 	LoadingProvider,
+	subtitleToSubTitle,
 	Microchart
 ) {
 	"use strict";
@@ -46,7 +50,7 @@ sap.ui.define([
 	 * @extends sap.f.cards.NumericHeader
 	 *
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @private
@@ -81,8 +85,8 @@ sap.ui.define([
 		var mSettings = {
 			title: mConfiguration.title,
 			titleMaxLines: mConfiguration.titleMaxLines,
-			subtitle: mConfiguration.subTitle,
-			subtitleMaxLines: mConfiguration.subTitleMaxLines,
+			subtitle: mConfiguration.subtitle || mConfiguration.subTitle,
+			subtitleMaxLines: mConfiguration.subtitleMaxLines || mConfiguration.subTitleMaxLines,
 			dataTimestamp: mConfiguration.dataTimestamp,
 			visible: mConfiguration.visible,
 			wrappingType: mConfiguration.wrappingType
@@ -169,6 +173,8 @@ sap.ui.define([
 			}
 		}
 
+		oHeader._oConfiguration = mConfiguration;
+
 		return oHeader;
 	};
 
@@ -255,7 +261,6 @@ sap.ui.define([
 		}.bind(this)));
 	};
 
-
 	NumericHeader.prototype.setServiceManager = function (oServiceManager) {
 		this._oServiceManager = oServiceManager;
 		return this;
@@ -266,6 +271,17 @@ sap.ui.define([
 		return this;
 	};
 
+	/**
+	 * @returns {object} Header configuration with static values.
+	 */
+	NumericHeader.prototype.getStaticConfiguration = function () {
+		const oConfiguration = merge({}, this._oConfiguration);
+
+		subtitleToSubTitle(oConfiguration);
+
+		return oConfiguration;
+	};
+
 	/**
 	 * Sets a data settings to the header.
 	 *

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

@@ -6,6 +6,7 @@
 sap.ui.define([
 	"./BaseContent",
 	"./ObjectContentRenderer",
+	"sap/ui/core/Lib",
 	"sap/ui/integration/library",
 	"sap/m/library",
 	"sap/m/IllustratedMessageType",
@@ -36,6 +37,7 @@ sap.ui.define([
 	"sap/ui/integration/util/Form",
 	"sap/ui/integration/util/DateRangeHelper",
 	"sap/ui/integration/util/Duration",
+	"sap/ui/integration/util/subtitleToSubTitle",
 	"sap/ui/integration/controls/ImageWithOverlay",
 	"sap/f/AvatarGroup",
 	"sap/f/AvatarGroupItem",
@@ -49,6 +51,7 @@ sap.ui.define([
 ], function (
 	BaseContent,
 	ObjectContentRenderer,
+	Library,
 	library,
 	mLibrary,
 	IllustratedMessageType,
@@ -79,6 +82,7 @@ sap.ui.define([
 	Form,
 	DateRangeHelper,
 	Duration,
+	subtitleToSubTitle,
 	ImageWithOverlay,
 	AvatarGroup,
 	AvatarGroupItem,
@@ -127,7 +131,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.integration.cards.BaseContent
 	 * @author SAP SE
-	 * @version 1.136.3
+	 * @version 1.139.0
 	 *
 	 * @constructor
 	 * @since 1.64
@@ -143,6 +147,23 @@ sap.ui.define([
 		renderer: ObjectContentRenderer
 	});
 
+	ObjectContent.prototype.onAfterRendering = function () {
+		BaseContent.prototype.onAfterRendering.apply(this, arguments);
+
+		const oRootContainer = this._getRootContainer();
+
+		if (oRootContainer.getDomRef()) {
+			const iWidth = oRootContainer.getDomRef().offsetWidth;
+			const aItems = oRootContainer.getItems();
+
+			aItems.forEach((oItem, i) => {
+				if (oItem.isA("sap.ui.layout.AlignedFlowLayout")) {
+					this._resizeAlignedFlowLayout(oItem, iWidth, i === aItems.length - 1);
+				}
+			});
+		}
+	};
+
 	ObjectContent.prototype.exit = function () {
 		BaseContent.prototype.exit.apply(this, arguments);
 
@@ -170,7 +191,7 @@ sap.ui.define([
 		} else {
 			this.showNoDataMessage({
 				illustrationType: IllustratedMessageType.NoData,
-				title: this.getCardInstance().getTranslatedText("CARD_NO_ITEMS_ERROR_CHART")
+				title: Library.getResourceBundleFor("sap.ui.integration").getText("CARD_NO_ITEMS_ERROR_CHART")
 			});
 		}
 
@@ -248,6 +269,10 @@ sap.ui.define([
 							if (oItem.src) {
 								oItem.src = this._oIconFormatter.formatSrc(oItem.src);
 							}
+
+							if (oItem.type === "Image" && oItem.overlay) {
+								subtitleToSubTitle(oItem.overlay);
+							}
 						}.bind(this));
 					}
 				}.bind(this));
@@ -263,8 +288,7 @@ sap.ui.define([
 
 				if (oGroup.items) {
 					oGroup.items.forEach(function (oItem) {
-						var oResolvedGroupItem = this._resolveGroupItem(oItem, oItem.path, sObjectContentPath);
-						aResolvedGroupItems.push(oResolvedGroupItem);
+						aResolvedGroupItems.push(this._resolveGroupItem(oItem, sObjectContentPath));
 					}.bind(this));
 				}
 
@@ -275,10 +299,10 @@ sap.ui.define([
 		return oConfiguration;
 	};
 
-	ObjectContent.prototype._resolveGroupItem = function (oItem, sItemPath, sObjectContentPath) {
+	ObjectContent.prototype._resolveGroupItem = function (oItem, sObjectContentPath) {
 		var oResolvedGroupItem = merge({}, oItem),
-			aResolvedItems = [],
-			sFullPath = sObjectContentPath + sItemPath,
+			sItemPath = oItem.path || "/",
+			oTemplate = oItem.template,
 			bIsFormInput = ["TextArea", "Input", "ComboBox", "Duration", "DateRange"].includes(oItem.type),
 			bHasItemsToResolve = ["ButtonGroup", "IconGroup"].includes(oItem.type);
 
@@ -289,28 +313,27 @@ sap.ui.define([
 		if (oItem.type === "ComboBox") {
 			if (oItem.item) {
 				bHasItemsToResolve = true;
-				sFullPath = sObjectContentPath + oItem.item.path.substring(1);
-				oItem.template = oItem.item.template;
+				sItemPath = oItem.item.path;
+				oTemplate = oItem.item.template;
 				delete oResolvedGroupItem.item;
 			} else {
 				bHasItemsToResolve = false;
 			}
 		}
 
-		if (bHasItemsToResolve) {
-			var oTemplate = oItem.template,
-				aData = this.getModel().getProperty(sFullPath);
+		if (oItem.type === "Image" && oResolvedGroupItem.overlay) {
+			subtitleToSubTitle(oResolvedGroupItem.overlay);
+		}
 
-			aData.forEach(function (oItemData, iIndex) {
-				var oResolvedItem = BindingResolver.resolveValue(oTemplate, this, sFullPath + "/" + iIndex + "/");
+		if (bHasItemsToResolve) {
+			const aResolvedItems = BindingResolver.resolveListBinding(sItemPath, sObjectContentPath, oTemplate, this);
 
+			aResolvedItems.forEach(function (oResolvedItem) {
 				if (oResolvedItem.icon && oResolvedItem.icon.src) {
 					oResolvedItem.icon.src = this._oIconFormatter.formatSrc(oResolvedItem.icon.src);
 				} else if (oResolvedItem.icon && typeof oResolvedItem.icon === "string") {
 					oResolvedItem.icon = this._oIconFormatter.formatSrc(oResolvedItem.icon);
 				}
-
-				aResolvedItems.push(oResolvedItem);
 			}.bind(this));
 
 			oResolvedGroupItem.items = aResolvedItems;
@@ -505,7 +528,7 @@ sap.ui.define([
 				oControl = this._createNumericDataItem(oItem, vVisible);
 				break;
 			case "Status":
-				oControl = ObjectStatusFactory.createStatusItem(oItem);
+				oControl = this._createStatusItem(oItem);
 				break;
 			case "IconGroup":
 				oControl = this._createIconGroupItem(oItem, vVisible);
@@ -628,6 +651,19 @@ sap.ui.define([
 		return oVbox;
 	};
 
+	ObjectContent.prototype._createStatusItem = function (oItem) {
+		const oStatus = ObjectStatusFactory.createStatusItem(oItem);
+
+		this._oActions.attach({
+			area: ActionArea.ContentItemDetail,
+			actions: oItem.actions,
+			control: oStatus,
+			enabledPropertyName: "active"
+		});
+
+		return oStatus;
+	};
+
 	ObjectContent.prototype._createTextItem = function (oItem, vVisible, oLabel) {
 		var vValue = oItem.value,
 			vTooltip = oItem.tooltip,
@@ -920,7 +956,7 @@ sap.ui.define([
 				tooltip: oItem.tooltip,
 				supertitle:  oItem.overlay.supertitle,
 				title: oItem.overlay.title,
-				subTitle: oItem.overlay.subTitle,
+				subtitle: oItem.overlay.subtitle || oItem.overlay.subTitle,
 				verticalPosition: oItem.overlay.verticalPosition,
 				horizontalPosition: oItem.overlay.horizontalPosition,
 				textColor: oItem.overlay.textColor,
@@ -1005,16 +1041,10 @@ sap.ui.define([
 			return;
 		}
 
-		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));
+		this.invalidate();
 	};
 
-	ObjectContent.prototype._onAlignedFlowLayoutResize = function (oAFLayout, oEvent, bLast) {
+	ObjectContent.prototype._resizeAlignedFlowLayout = function (oAFLayout, iWidth, bLast) {
 		var sMinItemWidth = oAFLayout.getMinItemWidth(),
 			iMinItemWidth,
 			iNumberOfGroups = oAFLayout.getContent().filter(function (oContent) {
@@ -1029,7 +1059,7 @@ sap.ui.define([
 			iMinItemWidth = parseFloat(sMinItemWidth);
 		}
 
-		var iColumns = Math.floor(oEvent.size.width / iMinItemWidth);
+		var iColumns = Math.floor(iWidth / iMinItemWidth);
 
 		// This check is to catch the case when the width of the card is bigger and
 		// can have more columns than groups