@openui5/sap.ui.rta 1.94.0 → 1.97.0

package/src/sap/ui/rta/themes/base/library.source.less

@@ -16,4 +16,6 @@
 @import "FieldRepository.less";
 @import "Overlay.less";
 @import "MessageBox.less";
-@import "AddIFrame.less";
+@import "AddIFrame.less";
+
+@import "OverlayWithScrollbar.less";

package/src/sap/ui/rta/toolbar/Adaptation.fragment.xml

@@ -99,12 +99,36 @@
 						<OverflowToolbarLayoutData priority="Low" />
 					</toolbar:layoutData>
 				</toolbar:OverflowToolbarButton>
+				<MenuButton
+						id="sapUiRta_toggleChangeVisualizationMenuButton"
+						visible="{= ${controls>/modeSwitcher} === 'visualization'}"
+						text="{visualizationModel>/commandCategoryText}"
+						type="Transparent"
+						tooltip="{i18n>BUT_CHANGEVISUALIZATION_SELECTCHANGES}">
+					<menu>
+						<Menu
+								id="sapUiRta_changesList"
+								items="{visualizationModel>/commandCategories/}"
+								itemSelected=".onCommandCategorySelection"
+								class="sapUiRtaToolbarVisualizationSelection">
+							<MenuItem
+									id="sapUiRta_changesListItem"
+									text="{visualizationModel>title}"
+									key="{visualizationModel>key}"
+									icon="{visualizationModel>icon}"
+									enabled="{= ${visualizationModel>count} > 0}"/>
+						</Menu>
+					</menu>
+					<layoutData>
+						<OverflowToolbarLayoutData priority="NeverOverflow" />
+					</layoutData>
+				</MenuButton>
 				<Button
 						id="sapUiRta_undo"
 						icon="sap-icon://undo"
 						press=".undo"
 						enabled="{controls>/undoEnabled}"
-						visible="{= (${controls>/modeSwitcher} === 'visualization' || ${controls>/modeSwitcher} === 'adaptation')}"
+						visible="{= ${controls>/modeSwitcher} === 'adaptation'}"
 						type="Transparent"
 						tooltip="{i18n>BTN_UNDO}" >
 					<layoutData>
@@ -116,25 +140,13 @@
 						icon="sap-icon://redo"
 						press=".redo"
 						enabled="{controls>/redoEnabled}"
-						visible="{= (${controls>/modeSwitcher} === 'visualization' || ${controls>/modeSwitcher} === 'adaptation')}"
+						visible="{= ${controls>/modeSwitcher} === 'adaptation'}"
 						type="Transparent"
 						tooltip="{i18n>BTN_REDO}" >
 					<layoutData>
 						<OverflowToolbarLayoutData priority="NeverOverflow" />
 					</layoutData>
 				</Button>
-				<toolbar:OverflowToolbarButton
-						id="sapUiRta_toggleChangeVisualizationPopoverButton"
-						icon="sap-icon://show"
-						press=".toggleChangeVisualizationPopover"
-						visible="{= ${controls>/modeSwitcher} === 'visualization'}"
-						type="Transparent"
-						text="{i18n>BTN_CHANGEVISUALIZATION_OVERVIEW_ALL}"
-						tooltip="{i18n>BUT_CHANGEVISUALIZATION_SELECTCHANGES}">
-					<toolbar:layoutData>
-						<OverflowToolbarLayoutData priority="Low" />
-					</toolbar:layoutData>
-				</toolbar:OverflowToolbarButton>
 				<toolbar:OverflowToolbarButton
 						id="sapUiRta_publish"
 						enabled="{controls>/publishEnabled}"

package/src/sap/ui/rta/toolbar/Adaptation.js

@@ -39,7 +39,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Base
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private
@@ -65,7 +65,7 @@ function(
 				activate: {},
 				discardDraft: {},
 				switchVersion: {},
-				toggleChangeVisualizationPopover: {}
+				onCommandCategorySelection: {}
 			}
 		}
 	});
@@ -335,7 +335,7 @@ function(
 				showTranslationPopover: this.showTranslationPopover.bind(this),
 				undo: this.eventHandler.bind(this, "Undo"),
 				redo: this.eventHandler.bind(this, "Redo"),
-				toggleChangeVisualizationPopover: this.eventHandler.bind(this, "ToggleChangeVisualizationPopover"),
+				onCommandCategorySelection: this.eventHandler.bind(this, "OnCommandCategorySelection"),
 				manageApps: onManageAppsPressed.bind(this),
 				appVariantOverview: onOverviewPressed.bind(this),
 				saveAs: onSaveAsPressed.bind(this),

package/src/sap/ui/rta/toolbar/Base.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.m.HBox
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Fiori.js

@@ -32,7 +32,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/FioriLike.js

@@ -20,7 +20,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/OverflowToolbarButton.js

@@ -8,8 +8,7 @@ sap.ui.define([
 	"sap/m/OverflowToolbarButton",
 	"sap/m/ButtonRenderer",
 	"sap/m/Button"
-],
-function(
+], function(
 	SapMOverflowToolbarButton,
 	ButtonRenderer,
 	Button
@@ -24,7 +23,7 @@ function(
 	 * @extends sap.m.OverflowToolbarButton
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private
@@ -71,6 +70,7 @@ function(
 	 * Get the Text if in Overflow-Area or Text in Toolbar is wanted
 	 *
 	 * @private
+	 * @returns {string} Text
 	 */
 	OverflowToolbarButton.prototype._getText = function() {
 		if ((this.getIcon() === "" && this.getVisibleIcon() === "") || this._bInOverflow) {

package/src/sap/ui/rta/toolbar/Personalization.js

@@ -22,7 +22,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Base
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Standalone.js

@@ -20,7 +20,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/translation/Translation.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @class
 	 *
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/util/BindingsExtractor.js

@@ -97,18 +97,18 @@ function(
 	 *
 	 * @param {sap.ui.core.Control} oElement - Starting point of the search
 	 * @param {sap.ui.model.Model} oParentDefaultModel - Model for filtering irrelevant binding paths
-	 * @param {boolean} [bTemplate] - Whether we should consider provided element as a template
+	 * @param {boolean} [vTemplate] - Whether we should consider provided element as a template
 	 * @param {string} [sAggregationName] - if aggregation name is given then only for this aggregation bindings are returned, if not then all aggregations are considered
 	 * @param {sap.ui.core.Control} [oRelevantContainerElement] - if this element is given then only bindings from element related to the relevant container are considered
 	 * @returns {Array} - returns array with all relevant bindings for all properties of the element
 	 *
 	 * @private
 	 */
-	BindingsExtractor.getBindings = function(oElement, oParentDefaultModel, bTemplate, sAggregationName, oRelevantContainerElement) {
+	BindingsExtractor.getBindings = function(oElement, oParentDefaultModel, vTemplate, sAggregationName, oRelevantContainerElement) {
 		var aBindings = [];
 		if (isElementRelatedToRelevantContainer(oElement, oRelevantContainerElement)) {
 			aBindings = (
-				bTemplate
+				vTemplate
 					? getBindingsFromTemplateProperties(oElement)
 					: BindingsExtractor.getBindingsFromProperties(oElement, oParentDefaultModel)
 			);
@@ -116,17 +116,22 @@ function(
 		var aAggregationNames = sAggregationName ? [sAggregationName] : Object.keys(oElement.getMetadata().getAllAggregations());
 
 		aAggregationNames.forEach(function (sAggregationNameInLoop) {
-			aBindings = aBindings.concat(getBindingsForAggregation(oElement, oParentDefaultModel, bTemplate, sAggregationNameInLoop, oRelevantContainerElement));
+			aBindings = aBindings.concat(getBindingsForAggregation(oElement, oParentDefaultModel, vTemplate, sAggregationNameInLoop, oRelevantContainerElement));
 		});
 
 		return aBindings;
 	};
 
-	function getBindingsForAggregation(oElement, oParentDefaultModel, bTemplate, sAggregationName, oRelevantContainerElement) {
+	function getBindingsForAggregation(oElement, oParentDefaultModel, vTemplate, sAggregationName, oRelevantContainerElement) {
 		var aBindings = [];
+		var oTemplate;
+		var bTemplate;
 		// Getting children of the current aggregation and iterating through all of them
 		var oBinding = oElement.getBindingInfo(sAggregationName);
-		var oTemplate = oBinding && oBinding.template;
+		if (vTemplate !== false) {
+			oTemplate = oBinding && oBinding.template;
+			bTemplate = !!vTemplate;
+		}
 		var aElements = oTemplate ? [oTemplate] : ElementUtil.getAggregation(oElement, sAggregationName);
 
 		aElements.forEach(function (oChildElement) {
@@ -137,8 +142,9 @@ function(
 						? getBindingsFromTemplateProperties(oChildElement, oRelevantContainerElement)
 						: BindingsExtractor.getBindingsFromProperties(oChildElement, oParentDefaultModel));
 				}
+				// For children, templates should not be evaluated (because the delegate also does not consider them)
 				aBindings = aBindings.concat(
-					BindingsExtractor.getBindings(oChildElement, oParentDefaultModel, oTemplate || bTemplate, undefined, oRelevantContainerElement)
+					BindingsExtractor.getBindings(oChildElement, oParentDefaultModel, false, undefined, oRelevantContainerElement)
 				);
 			}
 		});

package/src/sap/ui/rta/util/PluginManager.js

@@ -66,7 +66,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PluginManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @constructor
 	 * @private
 	 * @since 1.86
@@ -153,9 +153,7 @@ sap.ui.define([
 			});
 
 			this._mDefaultPlugins["additionalElements"] = new AdditionalElementsPlugin({
-				commandFactory: this._oCommandFactory,
-				analyzer: AdditionalElementsAnalyzer,
-				dialog: new AdditionalElementsDialog()
+				commandFactory: this._oCommandFactory
 			});
 
 			this._mDefaultPlugins["createContainer"] = new CreateContainerPlugin({

package/src/sap/ui/rta/util/PopupManager.js

@@ -4,7 +4,6 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-/* global Map */
 sap.ui.define([
 	"sap/ui/base/ManagedObject",
 	"sap/m/InstanceManager",
@@ -41,7 +40,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PopupManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @constructor
 	 * @private
 	 * @since 1.48
@@ -243,7 +242,7 @@ sap.ui.define([
 
 	/**
 	 * Apply focus events to all open popups and set focus on the first.
-	 * @param {function} fnFocusEvent Function to apply to open popups
+	 * @param {function} fnEvent - Function to apply to open popups
 	 * @private
 	 */
 	PopupManager.prototype._applyPatchesToOpenPopups = function(fnEvent) {
@@ -256,7 +255,7 @@ sap.ui.define([
 
 	/**
 	 * Remove focus events from all open popups.
-	 * @param {function} fnFocusEvent Function to apply to open popups
+	 * @param {function} fnEvent - Function to apply to open popups
 	 * @private
 	 */
 	PopupManager.prototype._removePatchesToOpenPopups = function(fnEvent) {
@@ -337,13 +336,6 @@ sap.ui.define([
 		}
 	};
 
-	/**
-	 * Applies the passed function to the relevant open popups.
-	 *
-	 * @param {function} fnPopupMethod specifies function to be applied
-	 * @param {boolean} bFocus Set to true if the popup is in focus
-	 * @private
-	 */
 	PopupManager.prototype._applyPopupAttributes = function(mPropertyBag) {
 		//check if popups are open
 		var oRelevantPopups = this.getCategorizedOpenPopups();

package/src/sap/ui/rta/util/ServiceEventBus.js

@@ -19,7 +19,7 @@ function(
 	 *
 	 * @extends sap.ui.core.EventBus
 	 * @author SAP SE
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @private
 	 * @since 1.56.0
 	 * @alias sap.ui.rta.util.ServiceEventBus

package/src/sap/ui/rta/util/adaptationStarter.js

@@ -5,7 +5,7 @@
  */
 sap.ui.define([
 	"sap/ui/rta/RuntimeAuthoring",
-	"sap/ui/core/Element",
+	"sap/ui/core/Control",
 	"sap/ui/fl/Utils",
 	"sap/ui/fl/Layer",
 	"sap/ui/fl/write/api/FeaturesAPI",
@@ -13,7 +13,7 @@ sap.ui.define([
 	"sap/base/Log"
 ], function(
 	RuntimeAuthoring,
-	Element,
+	Control,
 	FlexUtils,
 	Layer,
 	FeaturesAPI,
@@ -38,7 +38,7 @@ sap.ui.define([
 	 * Starter util for UI adaptation.
 	 * With this API you are also able to modify the UI adaptation plugins list and or add some event handler functions to be called on start, failed and stop events.
 	 * @param {object} mOptions - Object with properties
-	 * @param {sap.ui.core.Element|sap.ui.core.UIComponent} mOptions.rootControl - Control instance from where UI adaptation should be started
+	 * @param {sap.ui.core.Control|sap.ui.core.UIComponent} mOptions.rootControl - Control instance to get the AppComponent. This then is used to start UI adaptation.
 	 * @param {function} [loadPlugins] - Callback function that enables the modification of the default plugin list of UI adaptation. UI adaptation is passed to this function and it should return a promise
 	 * @param {function} [onStart] - Event handler function called on start event
 	 * @param {function} [onFailed] - Event handler function called on failed event
@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @private
 	 */
 	function adaptationStarter(mOptions, loadPlugins, onStart, onFailed, onStop) {
-		if (!(mOptions.rootControl instanceof Element) && !(mOptions.rootControl instanceof UIComponent)) {
+		if (!(mOptions.rootControl instanceof Control) && !(mOptions.rootControl instanceof UIComponent)) {
 			return Promise.reject(new Error("An invalid root control was passed"));
 		}
 

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicator.js

@@ -10,9 +10,7 @@ sap.ui.define([
 	"sap/ui/core/Control",
 	"sap/m/Text",
 	"sap/ui/core/format/DateFormat",
-	"sap/ui/core/Icon",
 	"sap/ui/events/KeyCodes",
-	"sap/base/strings/capitalize",
 	"sap/ui/rta/util/changeVisualization/categories/getVisualizationCategory",
 	"sap/ui/fl/Utils",
 	"sap/ui/fl/util/resolveBinding"
@@ -22,9 +20,7 @@ sap.ui.define([
 	Control,
 	Text,
 	DateFormat,
-	Icon,
 	KeyCodes,
-	capitalize,
 	getVisualizationCategory,
 	FlUtils,
 	resolveBinding
@@ -39,9 +35,8 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @private
-	 * @ui5-restricted
 	 */
 	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
 		metadata: {
@@ -54,13 +49,6 @@ sap.ui.define([
 					type: "array",
 					defaultValue: []
 				},
-				/**
-				 * Mode of the indicator, "change" or "dependent"
-				 */
-				mode: {
-					type: "string",
-					defaultValue: "change"
-				},
 				/**
 				 * Distance from the left side of the screen in px
 				 */
@@ -96,11 +84,6 @@ sap.ui.define([
 					type: "sap.m.Text",
 					multiple: false,
 					visibility: "hidden"
-				},
-				_icon: {
-					type: "sap.ui.core.Icon",
-					multiple: false,
-					visibility: "hidden"
 				}
 			},
 			events: {
@@ -131,21 +114,12 @@ sap.ui.define([
 			render: function(oRm, oControl) {
 				oRm.openStart("div", oControl);
 				oRm.class("sapUiRtaChangeIndicator");
-				oRm.class("sapUiRtaChangeIndicator" + capitalize(oControl.getMode()));
-				if (
-					oControl.getMode() === "change"
-					&& oControl.getModel()
-					&& oControl.getModel().getData().selectedChange
-				) {
-					// Root selector of dependent selection
-					oRm.class("sapUiRtaChangeIndicatorChangeSolid");
-				}
+				oRm.class("sapUiRtaChangeIndicatorChange");
 				oRm.style("width", oControl._getSize() + "px");
 				oRm.style("height", oControl._getSize() + "px");
 				oRm.openEnd();
 				oRm.openStart("div");
 				oRm.openEnd();
-				oRm.renderControl(oControl.getAggregation("_icon"));
 				oRm.renderControl(oControl.getAggregation("_text"));
 				oRm.close("div");
 				oRm.close("div");
@@ -165,24 +139,6 @@ sap.ui.define([
 			visible: "{= (${changes} || []).length > 1}"
 		}).addStyleClass("sapUiRtaChangeIndicatorText"));
 
-		this.setAggregation("_icon", new Icon({
-			src: "sap-icon://display",
-			visible: {
-				path: "/selectedChange",
-				formatter: function (sSelectedChange) {
-					return !!(
-						sSelectedChange
-						&& this.getChanges().some(function (oChange) {
-							return (
-								oChange.id === sSelectedChange
-								&& oChange.dependent === false
-							);
-						})
-					);
-				}.bind(this)
-			}
-		}).addStyleClass("sapUiRtaChangeIndicatorIcon"));
-
 		this.attachBrowserEvent("click", this._onSelect, this);
 		this.attachBrowserEvent("keydown", this._onKeyDown, this);
 		this.attachBrowserEvent("mouseleave", function() {this._toggleHoverStyleClasses(false); }, this);
@@ -234,27 +190,10 @@ sap.ui.define([
 		this._oDetailModel.setData((aChanges || []).map(this._formatChangesModelItem.bind(this)));
 	};
 
-	ChangeIndicator.prototype.setMode = function (sMode) {
-		this.setProperty("mode", sMode);
-		// Mode might have changed the information displayed for each change
-		this._oDetailModel.setData((this.getChanges() || []).map(this._formatChangesModelItem.bind(this)));
-	};
-
 	ChangeIndicator.prototype._onSelect = function (oEvent) {
 		this.focus();
 		oEvent.stopPropagation();
-		if (
-			this.getModel().getData().selectedChange
-			&& !this.getChanges().some(function (oChange) {
-				return oChange.dependent;
-			})
-		) {
-			this.fireSelectChange({
-				changeId: undefined
-			});
-		} else {
-			this._openDetailPopover();
-		}
+		this._openDetailPopover();
 	};
 
 	ChangeIndicator.prototype._onKeyDown = function(oEvent) {
@@ -291,30 +230,30 @@ sap.ui.define([
 
 		var oOverlay = sap.ui.getCore().byId(this.getOverlayId());
 		var sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
-		var oVisualizationUtil = getVisualizationCategory(mChangeInformation.commandCategory);
-		var sDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel);
+		var oVisualizationUtil = getVisualizationCategory(mChangeInformation.commandName);
+		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel);
 		var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
-		var sMode = this.getMode();
 		var sChangeTitle = mChangeInformation.commandName.charAt(0).toUpperCase() + mChangeInformation.commandName.slice(1);
 		sElementLabel = sElementLabel && "'" + sElementLabel + "'";
 		var sChangeTextKey = (
-			"TXT_CHANGEVISUALIZATION_"
-			+ sMode.toUpperCase() + "_"
+			"TXT_CHANGEVISUALIZATION_CHANGE_"
 			+ mChangeInformation.commandName.toUpperCase()
 		);
-		var sChangeText = sDescription || oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
-		var sDate = DateFormat.getDateTimeInstance().format(new Date(mChangeInformation.change.getCreation()));
-		var bEnableDetailButton = (
-			sMode === "change"
-			&& (mChangeInformation.commandName === "move" || mChangeInformation.commandName === "split")
-		);
+		var sChangeText = oDescription ? oDescription.descriptionText : oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
+		var sCreationDate = mChangeInformation.change.getCreation();
+		var oDate = new Date(sCreationDate);
+		var sFallbackDate = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CREATED_IN_SESSION_DATE");
+		var sFullDate = sCreationDate ? DateFormat.getDateTimeInstance().format(oDate) : sFallbackDate;
+		var sRelativeDate = sCreationDate ? DateFormat.getDateTimeInstance({relative: "true"}).format(oDate) : sFallbackDate;
+		var sDetailButtonText = oDescription && oDescription.buttonText;
 		return {
 			id: mChangeInformation.id,
 			change: mChangeInformation,
 			changeTitle: sChangeTitle,
 			description: sChangeText,
-			date: sDate,
-			enableDetailButton: bEnableDetailButton
+			fullDate: sFullDate,
+			relativeDate: sRelativeDate,
+			detailButtonText: sDetailButtonText
 		};
 	};
 
@@ -342,7 +281,6 @@ sap.ui.define([
 		var sChangeId = this.getChanges().length > 1
 			? oEvent.getSource().getBindingContext("details").getObject().id
 			: this.getChanges()[0].id;
-
 		this.fireSelectChange({
 			changeId: sChangeId
 		});

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorPopover.fragment.xml

@@ -3,15 +3,16 @@
 	xmlns="sap.m"
 	xmlns:l="sap.ui.layout">
 	<Popover
-		title="{= ${details>/}.length > 1 ? ${i18n>TIT_CHANGEVISUALIZATION_CHANGES} : ${details>/0/changeTitle}}"
+		showHeader="false"
 		placement="PreferredTopOrFlip"
 		class="sapUiRtaPopover">
+		<Label visible="false" text="Changes"/>
 		<Table
+			ariaLabelledBy="Changes"
 			items="{details>/}"
 			inset="false"
 			fixedLayout="false"
-			width="auto"
-			visible="{= ${details>/}.length > 1}">
+			width="auto">
 			<columns>
 				<Column
 					width="auto">
@@ -25,50 +26,27 @@
 					width="auto">
 					<Text text="{i18n>TIT_CHANGEVISUALIZATION_DATE}" />
 				</Column>
-				<Column
-					width="auto">
-					<Text text="{i18n>TIT_CHANGEVISUALIZATION_DETAILS}" />
-				</Column>
 			</columns>
 			<items>
 				<ColumnListItem>
 					<cells>
 						<Text
 							text="{details>changeTitle}" />
+						<HBox alignItems="Center">
+							<Text
+								text="{details>description}"/>
+							<Button
+								visible="{= !!${details>detailButtonText}}"
+								text="{details>detailButtonText}"
+								press="._showDependentElements"
+								class="sapUiTinyMarginBegin"/>
+						</HBox>
 						<Text
-							text="{details>description}" />
-						<Text
-							text="{details>date}" />
-						<Button
-							visible="{details>enableDetailButton}"
-							icon="sap-icon://display"
-							press="._showDependentElements"/>
+							text="{details>relativeDate}"
+							tooltip="{details>fullDate}"/>
 					</cells>
 				</ColumnListItem>
 			</items>
 		</Table>
-		<l:VerticalLayout
-			visible="{= ${details>/}.length === 1}">
-			<Text
-				text="{details>/0/description}"
-				class="sapUiTinyMargin"/>
-			<Text
-				text="{details>/0/date}"
-				class="sapUiTinyMargin"/>
-		</l:VerticalLayout>
-		<footer>
-			<FlexBox
-				direction="RowReverse"
-				visible="{= ${details>/}.length === 1}">
-				<items>
-					<Button
-						visible="{details>/0/enableDetailButton}"
-						text="{i18n>TIT_CHANGEVISUALIZATION_DETAILS}"
-						icon="sap-icon://display"
-						press="._showDependentElements"
-						class="sapUiTinyMargin"/>
-				</items>
-			</FlexBox>
-		</footer>
 	</Popover>
 </core:FragmentDefinition>

package/src/sap/ui/rta/util/changeVisualization/ChangeIndicatorRegistry.js

@@ -25,9 +25,8 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry
 	 * @author SAP SE
 	 * @since 1.86.0
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @private
-	 * @ui5-restricted
 	 */
 	var ChangeIndicatorRegistry = ManagedObject.extend("sap.ui.rta.util.changeVisualization.ChangeIndicatorRegistry", {
 		metadata: {