@openui5/sap.ui.integration 1.100.0 → 1.101.0

package/src/sap/ui/integration/cards/filters/FilterBarFactory.js

@@ -36,7 +36,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.Object
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/cards/filters/SearchFilter.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.filters.BaseFilter
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/cards/filters/SelectFilter.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @extends sap.ui.integration.cards.filters.BaseFilter
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/controls/ActionsStrip.js

@@ -12,6 +12,7 @@ sap.ui.define([
 	"sap/ui/integration/cards/actions/CardActions",
 	"sap/ui/integration/util/BindingHelper",
 	"sap/m/Button",
+	"sap/ui/integration/controls/LinkWithIcon",
 	"sap/m/OverflowToolbarButton",
 	"sap/m/OverflowToolbar",
 	"sap/m/OverflowToolbarLayoutData",
@@ -24,6 +25,7 @@ sap.ui.define([
 	CardActions,
 	BindingHelper,
 	Button,
+	LinkWithIcon,
 	OverflowToolbarButton,
 	OverflowToolbar,
 	OverflowToolbarLayoutData,
@@ -46,7 +48,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private
@@ -131,44 +133,75 @@ sap.ui.define([
 					group: mConfig.overflowGroup,
 					priority: mConfig.overflowPriority
 				}),
-				oButton;
-
-			if (mConfig.icon) {
-				oButton = new OverflowToolbarButton({
-					icon: mConfig.icon,
-					text: mConfig.text || mConfig.tooltip,
-					tooltip: mConfig.tooltip || mConfig.text,
-					type: mConfig.buttonType,
-					ariaHasPopup: mConfig.ariaHasPopup,
-					visible: mConfig.visible
-				});
-			} else {
-				oButton = new Button({
-					text: mConfig.text,
-					tooltip: mConfig.tooltip,
-					type: mConfig.buttonType,
-					ariaHasPopup: mConfig.ariaHasPopup,
-					visible: mConfig.visible
-				});
+				oControl;
+
+			switch (mConfig.type) {
+				case "Link":
+					oControl = this._createLink(mConfig);
+				break;
+				case "Button":
+				default:
+					oControl = this._createButton(mConfig);
+				break;
 			}
 
-			oButton.setLayoutData(oOverflow);
+			oControl.setLayoutData(oOverflow);
 
 			oActions.attach({
 				area: ActionArea.ActionsStrip,
-				control: oButton,
+				control: oControl,
 				actions: aActions,
 				enabledPropertyName: "enabled"
 			});
 
-			oToolbar.addContent(oButton);
-		});
+			oToolbar.addContent(oControl);
+		}.bind(this));
 
 		if (!bHasSpacer) {
 			oToolbar.insertContent(new ToolbarSpacer(), 0);
 		}
 	};
 
+	ActionsStrip.prototype._createLink = function (mConfig) {
+		var oLink = new LinkWithIcon({
+			icon: mConfig.icon,
+			text: mConfig.text,
+			tooltip: mConfig.tooltip,
+			ariaHasPopup: mConfig.ariaHasPopup,
+			emphasized: mConfig.emphasized,
+			visible: mConfig.visible
+		});
+
+		return oLink;
+	};
+
+	ActionsStrip.prototype._createButton = function (mConfig) {
+		var oButton;
+
+		if (mConfig.icon) {
+			oButton = new OverflowToolbarButton({
+				icon: mConfig.icon,
+				text: mConfig.text || mConfig.tooltip,
+				tooltip: mConfig.tooltip || mConfig.text,
+				type: mConfig.buttonType,
+				ariaHasPopup: mConfig.ariaHasPopup,
+				visible: mConfig.visible
+			});
+
+			return oButton;
+		}
+
+		oButton = new Button({
+			text: mConfig.text,
+			tooltip: mConfig.tooltip,
+			type: mConfig.buttonType,
+			ariaHasPopup: mConfig.ariaHasPopup,
+			visible: mConfig.visible
+		});
+
+		return oButton;
+	};
+
 	ActionsStrip.create = function (oCard, aButtons) {
 		if (!aButtons) {
 			return null;

package/src/sap/ui/integration/controls/ActionsToolbar.js

@@ -76,7 +76,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/controls/LinkWithIcon.js

@@ -0,0 +1,77 @@
+/*!
+* OpenUI5
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+*/
+
+// Provides control sap.ui.integration.controls.ActionsToolbar
+sap.ui.define([
+	"./LinkWithIconRenderer",
+	"sap/ui/integration/library",
+	"sap/m/Link",
+	"sap/ui/core/Icon"
+], function (
+	LinkWithIconRenderer,
+	library,
+	Link,
+	Icon
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new LinkWithIcon.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 *
+	 * @extends sap.m.Link
+	 *
+	 * @author SAP SE
+	 * @version 1.101.0
+	 *
+	 * @constructor
+	 * @private
+	 * @alias sap.ui.integration.controls.LinkWithIcon
+	 */
+	var LinkWithIcon = Link.extend("sap.ui.integration.controls.LinkWithIcon", {
+		metadata: {
+			library: "sap.ui.integration",
+			properties: {
+				/**
+				 * Defines the icon to be displayed as graphical element within the <code>Link</code>.
+				 */
+				icon: {type : "sap.ui.core.URI", group : "Appearance", defaultValue: "" }
+			},
+			aggregations: {
+				_icon: { type: "sap.ui.core.Icon", multiple: false, visibility: "hidden" }
+			}
+		}
+	});
+
+	/**
+	 * Called before the control is rendered.
+	 * @private
+	 */
+	LinkWithIcon.prototype.onBeforeRendering = function () {
+		Link.prototype.onBeforeRendering.apply(this, arguments);
+
+		if (this.getIcon()) {
+			this._getIcon().setSrc(this.getIcon());
+		}
+
+		this.addStyleClass("sapUiIntCardLinkWithIcon");
+	};
+
+	LinkWithIcon.prototype._getIcon = function () {
+		var oIcon = this.getAggregation("_icon");
+		if (!oIcon) {
+			oIcon = new Icon();
+			this.setAggregation("_icon", oIcon);
+		}
+		return oIcon;
+	};
+
+	return LinkWithIcon;
+});

package/src/sap/ui/integration/controls/LinkWithIconRenderer.js

@@ -0,0 +1,38 @@
+/*!
+ * 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([
+	"sap/ui/integration/library",
+	"sap/ui/core/Renderer",
+	"sap/m/LinkRenderer"
+], function(library,
+			Renderer,
+			LinkRenderer) {
+	"use strict";
+
+	/**
+	 * LinkWithIconRenderer renderer.
+	 * @private
+	 */
+	var LinkWithIconRenderer = Renderer.extend(LinkRenderer);
+	LinkWithIconRenderer.apiVersion = 2;
+
+	/**
+	 * @override
+	 */
+	LinkWithIconRenderer.renderText = function(oRm, oControl) {
+		var oIcon = oControl.getAggregation("_icon");
+
+		if (oIcon) {
+			oRm.renderControl(oIcon);
+		}
+
+		LinkRenderer.renderText.apply(this, arguments);
+	};
+
+	return LinkWithIconRenderer;
+
+}, /* bExport= */ true);

package/src/sap/ui/integration/controls/ListContentItem.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @extends sap.m.StandardListItem
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/controls/Microchart.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/controls/MicrochartLegend.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/integration/controls/Paginator.js

@@ -7,19 +7,27 @@
 sap.ui.define([
 	"../library",
 	"sap/m/library",
+	"sap/ui/base/EventProvider",
 	"sap/ui/core/Core",
 	"sap/ui/core/Control",
+	"sap/ui/core/Configuration",
 	'sap/ui/core/Icon',
 	'./PaginatorRenderer'
 ], function (
 	library,
 	mLibrary,
+	EventProvider,
 	Core,
 	Control,
+	Configuration,
 	Icon
 ) {
 	"use strict";
 
+	var sAnimationMode = Core.getConfiguration().getAnimationMode(),
+		bHasAnimations = sAnimationMode !== Configuration.AnimationMode.none && sAnimationMode !== Configuration.AnimationMode.minimal,
+		iServerSideAfterTransitionDelay = 200;
+
 	/**
 	 * Constructor for a new Paginator.
 	 *
@@ -31,7 +39,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @constructor
 	 * @private
@@ -70,6 +78,8 @@ sap.ui.define([
 	};
 
 	Paginator.prototype.init = function() {
+		this._listUpdateFinishedHandler = this._listUpdateFinished.bind(this);
+
 		this.setAggregation("_prevIcon", new Icon({
 			src: "sap-icon://slim-arrow-left",
 			useIconTooltip: false,
@@ -86,26 +96,67 @@ sap.ui.define([
 	};
 
 	Paginator.prototype.exit = function () {
-		var oCard = this.getCard();
+		var oCard = this.getCard(),
+			oContent,
+			oList;
+
+		if (oCard) {
+			if (this._dataChangedHandler) {
+				oCard.detachEvent("_contentDataChange", this._dataChangedHandler);
+			}
 
-		if (oCard && this._dataChangedHandler) {
-			oCard.detachEvent("_contentDataChange", this._dataChangedHandler);
+			oContent = oCard.getCardContent();
+
+			if (oContent) {
+				oList = oContent.getAggregation("_content");
+
+				if (oList && EventProvider.hasListener(oList, "updateFinished", this._listUpdateFinishedHandler)) {
+					oList.detachEvent("updateFinished", this._listUpdateFinishedHandler);
+				}
+			}
 		}
 
+		delete this._listUpdateFinishedHandler;
 		delete this._iPreviousStartIndex;
+		delete this._oClonedContent;
 	};
 
-	Paginator.prototype.dataChanged = function() {
-		var oCardContent = this.getCard().getCardContent();
+	Paginator.prototype.isServerSide = function() {
+		return this.getTotalCount();
+	};
 
-		if (!oCardContent || !oCardContent.isA("sap.ui.integration.cards.BaseContent")) {
+	Paginator.prototype._dataChanged = function() {
+		var oCard = this.getCard(),
+			oContent = oCard.getCardContent(),
+			oList,
+			iTotalCount,
+			bInitialized;
+
+		if (!oContent || !oContent.isA("sap.ui.integration.cards.BaseContent")) {
 			this.setPageCount(0);
 			return;
 		}
 
-		this.setModel(oCardContent.getModel());
+		this.setModel(oContent.getModel());
+
+		oList = oContent.getAggregation("_content");
+		bInitialized = EventProvider.hasListener(oList, "updateFinished", this._listUpdateFinishedHandler);
+
+		if (this._hasAnimation() && !bInitialized) {
+			oList.attachEvent("updateFinished", this._listUpdateFinishedHandler);
+
+			if (this.isServerSide()) {
+				oContent.getAggregation("_loadingProvider")._oContentPlaceholder.addDelegate({
+					onAfterRendering: this.onPlaceholderAfterRendering.bind(this)
+				});
+			}
+		}
+
+		if (bInitialized) {
+			this._clearAnimation(this);
+		}
 
-		var iTotalCount = this.getTotalCount() || oCardContent.getDataLength();
+		iTotalCount = this.getTotalCount() || oContent.getDataLength();
 
 		this.setPageCount(Math.ceil(iTotalCount / this.getPageSize()));
 		this.setPageNumber(Math.min(Math.max(0, this.getPageNumber()), this.getPageCount() - 1));
@@ -116,7 +167,7 @@ sap.ui.define([
 	Paginator.prototype.setCard = function(oCard) {
 		this.setProperty("card", oCard, true);
 
-		this._dataChangedHandler = this.dataChanged.bind(this);
+		this._dataChangedHandler = this._dataChanged.bind(this);
 
 		if (oCard) {
 			oCard.attachEvent("_contentDataChange", this._dataChangedHandler);
@@ -126,48 +177,197 @@ sap.ui.define([
 
 	Paginator.prototype.sliceData = function() {
 		var oCard = this.getCard(),
-			oCardContent,
-			iStartIndex;
+			oContent,
+			iStartIndex,
+			bIsPageChanged;
 
 		if (!oCard) {
 			return;
 		}
 
-		oCardContent = oCard.getCardContent();
+		oContent = oCard.getCardContent();
 		iStartIndex = this.getPageNumber() * this.getPageSize();
+		bIsPageChanged =  this._iPreviousStartIndex !== undefined && this._iPreviousStartIndex !== iStartIndex;
 
-		if (this.getTotalCount()) {
-			if (this._iPreviousStartIndex !== undefined
-				&& this._iPreviousStartIndex !== iStartIndex) {
+		if (bIsPageChanged) {
+			this._prepareAnimation(iStartIndex);
+		}
 
+		if (this.isServerSide()) {
+			if (bIsPageChanged) {
+				// changing the model is triggering data update
+				// so there is no need to call "refreshData" method
 				this.getModel("paginator").setData({
 					skip: iStartIndex,
 					size: this.getPageSize(),
 					pageIndex: this.getPageNumber()
 				});
 
-				oCardContent.refreshData();
+				if (this._hasAnimation()) {
+					oContent.getAggregation("_loadingProvider")._bAwaitPagination = true;
+					oCard.getAggregation("_loadingProvider")._bAwaitPagination = true;
+				}
 			}
 		} else {
-			oCard.getCardContent().sliceData(iStartIndex, iStartIndex + this.getPageSize());
+			oContent.sliceData(iStartIndex, iStartIndex + this.getPageSize());
 		}
 
 		this._iPreviousStartIndex = iStartIndex;
 	};
 
+	Paginator.prototype._prepareAnimation = function (iStartIndex) {
+		if (!this._hasAnimation()) {
+			return;
+		}
+
+		var oContentDomRef = this.getCard().getCardContent().getDomRef(),
+			oContentDomRefCloned = oContentDomRef.cloneNode(true);
+
+		this._bActiveAnimation = true;
+		this._bReverseAnimation = this._iPreviousStartIndex > iStartIndex;
+
+		oContentDomRefCloned.removeAttribute("id");
+
+		oContentDomRefCloned.querySelectorAll("*[id]").forEach(function (oElement) {
+			oElement.removeAttribute("id");
+		});
+
+		oContentDomRefCloned.classList.add("sapFCardContentCloned");
+		if (this._bReverseAnimation) {
+			oContentDomRefCloned.classList.add("sapFCardContentReverseAnim");
+		}
+
+		if (this.isServerSide()) {
+			this._oClonedContent = oContentDomRefCloned;
+		} else {
+			oContentDomRef.classList.add("sapFCardContentOriginal");
+
+			if (this._bReverseAnimation) {
+				oContentDomRef.classList.add("sapFCardContentReverseAnim");
+			}
+
+			oContentDomRef.parentElement.insertBefore(oContentDomRefCloned, oContentDomRef);
+		}
+	};
+
+	Paginator.prototype._clearAnimation = function () {
+		if (!this._hasAnimation()) {
+			return;
+		}
+
+		var oCard = this.getCard(),
+			oContent = oCard.getCardContent(),
+			oContentDomRef = oContent.getDomRef(),
+			oContentDomRefCloned = oContentDomRef.previousSibling,
+			oCardLoadingProvider,
+			oContentLoadingProvider;
+
+		oCardLoadingProvider = oCard.getAggregation("_loadingProvider");
+		oContentLoadingProvider = oContent.getAggregation("_loadingProvider");
+
+		if (oContentLoadingProvider._bAwaitPagination) {
+			oContentLoadingProvider._bAwaitPagination = false;
+			oCardLoadingProvider._bAwaitPagination = false;
+		} else {
+			oContentDomRefCloned.parentNode.removeChild(oContentDomRefCloned);
+
+			oContentDomRef.classList.remove("sapFCardContentOriginal");
+			oContentDomRef.classList.remove("sapFCardContentTransition");
+			oContentDomRef.classList.remove("sapFCardContentReverseAnim");
+
+			oContent.hideLoadingPlaceholders();
+			oCardLoadingProvider.setLoading(false);
+			this._bActiveAnimation = false;
+		}
+	};
+
+	Paginator.prototype._listUpdateFinished = function () {
+		if (!this._bActiveAnimation || this.isServerSide()) {
+			return;
+		}
+
+		var oContent = this.getCard().getCardContent(),
+			oContentDomRef = oContent.getDomRef(),
+			oContentDomRefCloned = oContentDomRef.previousSibling;
+
+		oContentDomRefCloned.addEventListener("transitionend", function () {
+			oContentDomRefCloned.parentNode.removeChild(oContentDomRefCloned);
+
+			oContentDomRef.classList.remove("sapFCardContentOriginal");
+			oContentDomRef.classList.remove("sapFCardContentTransition");
+			oContentDomRef.classList.remove("sapFCardContentReverseAnim");
+
+			this._bActiveAnimation = false;
+		}.bind(this));
+
+		oContentDomRef.classList.add("sapFCardContentTransition");
+		oContentDomRefCloned.classList.add("sapFCardContentTransition");
+	};
+
+	Paginator.prototype.onPlaceholderAfterRendering = function () {
+		if (!this._oClonedContent) {
+			return;
+		}
+
+		var oCard = this.getCard(),
+			oContent = oCard.getCardContent(),
+			oContentDomRef = oContent.getDomRef(),
+			oContentDomRefCloned = this._oClonedContent;
+
+		oContentDomRef.classList.add("sapFCardContentOriginal");
+		oContentDomRef.parentElement.insertBefore(oContentDomRefCloned, oContentDomRef);
+
+		if (this._bReverseAnimation) {
+			oContentDomRef.classList.add("sapFCardContentReverseAnim");
+		}
+
+		this._oClonedContent.addEventListener("transitionend", function () {
+			setTimeout(this._clearAnimation.bind(this), iServerSideAfterTransitionDelay);
+		}.bind(this));
+
+		this._oClonedContent = null;
+
+		setTimeout(function () {
+			oContentDomRefCloned.classList.add("sapFCardContentTransition");
+			oContentDomRef.classList.add("sapFCardContentTransition");
+		}, 30);
+	};
+
 	Paginator.prototype._getNavigationArrow = function (sDirection) {
 		return this.getAggregation("_" + sDirection + "Icon");
 	};
 
+	Paginator.prototype._hasAnimation = function () {
+		return bHasAnimations && this.getCard().getCardContent().isA("sap.ui.integration.cards.ListContent");
+	};
+
 	Paginator.prototype._previous = function () {
+		if (this._bActiveAnimation) {
+			return;
+		}
+
 		this.setPageNumber(Math.max(0, this.getPageNumber() - 1));
 		this.sliceData();
 	};
 
 	Paginator.prototype._next = function () {
+		if (this._bActiveAnimation) {
+			return;
+		}
+
 		this.setPageNumber(Math.min(this.getPageCount() - 1, this.getPageNumber() + 1));
 		this.sliceData();
 	};
 
+	Paginator.prototype.onmousedown = function(oEvent) {
+		var oTarget = oEvent.target,
+			sDataSlide = oTarget.getAttribute("data-slide");
+
+		if (sDataSlide && !oTarget.classList.contains("sapMCrslActive")) {
+			this.setPageNumber(parseInt(sDataSlide) - 1);
+			this.sliceData();
+		}
+	};
+
 	return Paginator;
 });

package/src/sap/ui/integration/controls/PaginatorRenderer.js

@@ -64,6 +64,8 @@ sap.ui.define([
 						label: oResourceBundle.getText("CAROUSEL_POSITION", [i + 1, iPageCount])
 					});
 
+				oRm.attr("data-slide", i + 1);
+
 				if (i === iPageNumber) {
 					oRm.class("sapMCrslActive");
 				}

package/src/sap/ui/integration/designtime/baseEditor/BaseEditor.js

@@ -132,7 +132,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.baseEditor.BaseEditor
 	 * @author SAP SE
 	 * @since 1.70.0
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 * @private
 	 * @experimental since 1.70.0
 	 * @ui5-restricted

package/src/sap/ui/integration/designtime/baseEditor/PropertyEditor.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.baseEditor.PropertyEditor
 	 * @author SAP SE
 	 * @since 1.73.0
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 * @private
 	 * @experimental since 1.73.0
 	 * @ui5-restricted

package/src/sap/ui/integration/designtime/baseEditor/PropertyEditors.js

@@ -67,7 +67,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.baseEditor.PropertyEditors
 	 * @author SAP SE
 	 * @since 1.73.0
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 * @private
 	 * @experimental since 1.73.0
 	 * @ui5-restricted

package/src/sap/ui/integration/designtime/baseEditor/propertyEditor/BasePropertyEditor.js

@@ -52,7 +52,7 @@ sap.ui.define([
 	 * @alias sap.ui.integration.designtime.baseEditor.propertyEditor.BasePropertyEditor
 	 * @author SAP SE
 	 * @since 1.70
-	 * @version 1.100.0
+	 * @version 1.101.0
 	 *
 	 * @private
 	 * @experimental 1.70