@openui5/sap.ui.rta 1.93.3 → 1.96.1

package/src/sap/ui/rta/service/Outline.js

@@ -42,7 +42,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.56
 	 * @since 1.56
-	 * @version 1.93.3
+	 * @version 1.96.1
 	 * @private
 	 * @ui5-restricted
 	*/
@@ -217,12 +217,28 @@ sap.ui.define([
 			//get necessary properties from overlay
 			var oData = this._getNodeProperties(oOverlay, oParentOverlay) || {};
 
+			var aChildren = oOverlay.getChildren();
 			//find aggregation binding template overlays
-			var aChildren = (
+			var aAggregationTemplateOverlays = (
 				oOverlay.getAggregationBindingTemplateOverlays
 				&& oOverlay.getAggregationBindingTemplateOverlays()
 			) || [];
-			aChildren = aChildren.concat(oOverlay.getChildren());
+
+			//for binding template overlays, do not include children of the
+			//corresponding aggregations on the outline (e.g. items)
+			if (aAggregationTemplateOverlays.length > 0) {
+				var aExcludedAggregations = [];
+				aChildren = aAggregationTemplateOverlays.reduce(function(aCollectedChildren, oAggregationTemplateOverlay) {
+					aExcludedAggregations.push(oAggregationTemplateOverlay.getAggregationName());
+					return oAggregationTemplateOverlay.getChildren().concat(aCollectedChildren);
+				}, aChildren)
+				.filter(function(oChild) {
+					if (oChild.getAggregationName && aExcludedAggregations.indexOf(oChild.getAggregationName()) > -1) {
+						return false;
+					}
+					return true;
+				});
+			}
 
 			//check if the tree should be traversed deeper and children overlays are present
 			if ((!bValidDepth || (bValidDepth && iDepth > 0))
@@ -247,6 +263,92 @@ sap.ui.define([
 			return cleanupData(oData);
 		};
 
+		function isAggregationBindingTemplate(oOverlay, oParentAggregationOverlay, sParentAggregationName) {
+			var oParentElementOverlay = oOverlay.getParentElementOverlay();
+			return oParentElementOverlay
+				&& sParentAggregationName
+				&& oParentElementOverlay.getAggregationOverlay(sParentAggregationName, "AggregationBindingTemplateOverlays") === oParentAggregationOverlay;
+		}
+
+		function getNumberOfTemplateChildrenOverlays(oParentAggregationOverlay, sParentAggregationName) {
+			return oParentAggregationOverlay.getParent().getAggregationOverlay(sParentAggregationName).getChildren().length;
+		}
+
+		function getElementOverlayData(oOverlay, oElement, oDtMetadata) {
+			var oData = {
+				editable: oOverlay.getEditable(),
+				bIsView: oOverlay.getElement() instanceof View
+			};
+			if (typeof oOverlay.isVisible() === "boolean") {
+				oData.visible = oOverlay.isVisible();
+			}
+			var oParentAggregationOverlay = oOverlay.getParent() && oOverlay.getParentAggregationOverlay();
+			var sParentAggregationName = (oParentAggregationOverlay && oParentAggregationOverlay.getAggregationName()) || "";
+			var sDtNameSuffix = "";
+			// Aggregation Binding Template
+			if (isAggregationBindingTemplate(oOverlay, oParentAggregationOverlay, sParentAggregationName)) {
+				var iNoOfChildren = getNumberOfTemplateChildrenOverlays(oParentAggregationOverlay, sParentAggregationName);
+				sDtNameSuffix = " [" + iNoOfChildren + "]";
+				oData.type = "aggregationBindingTemplate";
+				oData.icon = "sap-icon://attachment-text-file";
+			} else {
+				oData.type = "element";
+			}
+
+			var oDtName = oDtMetadata.getName(oElement);
+			if (oDtName && oDtName.singular) {
+				oData.name = (oDtName && oDtName.singular) + sDtNameSuffix;
+			}
+			return oData;
+		}
+
+		function getAggregationOverlayData(oOverlay, oParentOverlay, oElement) {
+			var sAggregationName = oOverlay.getAggregationName();
+			var oData = {
+				technicalName: oOverlay.getAggregationName(),
+				editable: false,
+				type: "aggregation",
+				bIsView: oOverlay.getElement() instanceof View
+			};
+			if (oParentOverlay.getAggregation(sAggregationName)) {
+				var oAggregationDescription = oParentOverlay.getDesignTimeMetadata().getAggregationDescription(sAggregationName, oElement);
+				if (oAggregationDescription.singular) {
+					oData.name = oAggregationDescription.singular;
+				}
+			}
+			if (oParentOverlay.getAggregationBindingTemplateOverlays().length) {
+				oData.icon = "sap-icon://card";
+			}
+			return oData;
+		}
+
+		function getDefaultData(oElement, oDtMetadata) {
+			var oData = {
+				id: oElement.getId(),
+				technicalName: oElement.getMetadata().getName(),
+				editable: false,
+				type: null
+			};
+
+			var sDefaultIcon = getDefaultIcon(oDtMetadata);
+			if (sDefaultIcon) {
+				oData.icon = sDefaultIcon;
+			}
+			var sInstanceName = oDtMetadata.getLabel(oElement);
+			if (sInstanceName && sInstanceName !== oData.id) {
+				oData.instanceName = sInstanceName;
+			}
+			return oData;
+		}
+
+		function getDefaultIcon(oDtMetadata) {
+			var oDtMetadataData = oDtMetadata.getData();
+			return oDtMetadataData.palette
+				&& oDtMetadataData.palette.icons
+				&& oDtMetadataData.palette.icons.svg
+				|| undefined;
+		}
+
 		/**
 		 * Collects the necessary data for a node without the <code>childNodes</code>.
 		 *
@@ -254,70 +356,15 @@ sap.ui.define([
 		 * @param {sap.ui.dt.Overlay} [oParentOverlay] - Parent overlay (if present) for the passed overlay
 		 * @returns {object} Data containing applicable properties
 		 */
-		oOutline._getNodeProperties = function (oOverlay, oParentOverlay) {
-			var oDtName;
-			var sAggregationName;
-			var sType;
-			var bVisible;
-			var bIsEditable = false; //default for aggregation overlays
+		 oOutline._getNodeProperties = function (oOverlay, oParentOverlay) {
 			var oElement = oOverlay.getElement();
-			var sId = oElement.getId();
-			var sElementClass = oElement.getMetadata().getName();
 			var oDtMetadata = oOverlay.getDesignTimeMetadata();
-			var oDtMetadataData = oDtMetadata.getData();
-			var sInstanceName = oDtMetadata.getLabel(oElement);
-			var sIconType = (
-				oDtMetadataData.palette
-				&& oDtMetadataData.palette.icons
-				&& oDtMetadataData.palette.icons.svg
-				|| undefined
-			);
+			var oData = getDefaultData(oElement, oDtMetadata);
 
-			var bIsView;
 			if (oOverlay instanceof ElementOverlay) {
-				sType = "element";
-				bIsEditable = oOverlay.getEditable();
-				oDtName = oDtMetadata.getName(oElement);
-				bVisible = oOverlay.isVisible();
-				bIsView = oOverlay.getElement() instanceof View;
-				var oParentElementOverlay = oOverlay.getParentElementOverlay();
-				var oParentAggregationOverlay = oOverlay.getParent() && oOverlay.getParentAggregationOverlay();
-				var sParentAggregationName = (oParentAggregationOverlay && oParentAggregationOverlay.getAggregationName()) || "";
-				if (
-					oParentElementOverlay
-					&& sParentAggregationName
-					&& oParentElementOverlay.getAggregationOverlay(sParentAggregationName, "AggregationBindingTemplateOverlays") === oParentAggregationOverlay
-				) {
-					sIconType = "sap-icon://card";
-					oDtName.singular = "TEMPLATE-" + oDtName.singular;
-				}
-			} else {
-				sType = "aggregation";
-				sAggregationName = oOverlay.getAggregationName();
-				oDtName = oParentOverlay.getAggregation(sAggregationName)
-					? oParentOverlay.getDesignTimeMetadata().getAggregationDescription(sAggregationName, oElement)
-					: undefined;
-				if (oParentOverlay.getAggregationBindingTemplateOverlays().length) {
-					sIconType = "sap-icon://card";
-				}
+				return Object.assign(oData, getElementOverlayData(oOverlay, oElement, oDtMetadata));
 			}
-
-			//add all mandatory info to data
-			var oData = Object.assign(
-				{
-					id: sId,
-					technicalName: sAggregationName || sElementClass,
-					editable: bIsEditable,
-					type: sType //either "element" or "aggregation"
-				},
-				sInstanceName !== sId && sInstanceName !== undefined && { instanceName: sInstanceName }, // element's id should not be set as instanceName
-				oDtName && oDtName.singular && { name: oDtName.singular }, // designTime metadata name.singular
-				sIconType !== undefined && { icon: sIconType }, // designTime metadata icon type
-				typeof bVisible === "boolean" && { visible: bVisible }, // visible
-				bIsView && { bIsView: bIsView }
-			);
-
-			return oData;
+			return Object.assign(oData, getAggregationOverlayData(oOverlay, oParentOverlay, oElement));
 		};
 
 		/**

package/src/sap/ui/rta/service/Property.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.93.3
+	 * @version 1.96.1
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/service/Selection.js

@@ -15,7 +15,7 @@ sap.ui.define(function () {
 	 * @author SAP SE
 	 * @experimental Since 1.58
 	 * @since 1.58
-	 * @version 1.93.3
+	 * @version 1.96.1
 	 * @private
 	 * @ui5-restricted
 	*/

package/src/sap/ui/rta/themes/base/ChangeVisualization.less

@@ -90,6 +90,22 @@
 	color: @_sap_ui_rta_ChangeVisualization_DependentIndicatorColorSolid;
 }
 
+.sapUiRtaChangeIndicatorHovered {
+	-webkit-transition: background 0.1s cubic-bezier(1,.01,1,0);
+	-moz-transition: background 0.1s cubic-bezier(1,.01,1,0);
+	-o-transition: background 0.1s cubic-bezier(1,.01,1,0);
+	transition: background 0.1s cubic-bezier(1,.01,1,0);
+
+	&:after {
+		content: " ";
+		border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder!important; //1px
+		transition: box-shadow .25s;
+		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+		outline: 0.0625rem solid @_sap_ui_rta_Overlay_Border!important; //1px
+		outline-offset: -0.0625rem; //1px
+	}
+}
+
 .sapUiRtaMode {
 	.sapUiRtaPopover {
 		.sapUiRtaChangesList {

package/src/sap/ui/rta/themes/base/Overlay.less

@@ -113,68 +113,11 @@
 			}
 		}
 	}
-
-	.sapUiRtaOverlayHover {
-		-webkit-transition: background 0.1s cubic-bezier(1,.01,1,0);
-		-moz-transition: background 0.1s cubic-bezier(1,.01,1,0);
-		-o-transition: background 0.1s cubic-bezier(1,.01,1,0);
-		transition: background 0.1s cubic-bezier(1,.01,1,0);
-
-		&:after {
-			content: " ";
-			border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder; //1px
-			transition: box-shadow .25s;
-			box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
-			outline: 0.0625rem solid @_sap_ui_rta_Overlay_Border; //1px
-			outline-offset: -0.0625rem; //1px
-		}
-	}
-
 	.sapUiDtOverlaySelected {
-		transition: box-shadow .25s;
-		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
-		&.sapUiDtOverlayWithScrollBar:after {
-			bottom: 0;
-			right: 0;
-			top: 0;
-			left: 0;
-			// IE doesn't support width/height: 'initial'.// TODO remove after the end of support for Internet Explorer
-			// With the property 'auto' the same effect is achieved.
-			// When initial is supported, auto is ignored.
-			width: auto;
-			width: initial;
-			height: auto;
-			height: initial;
-		}
-
 		&:after {
-			outline: 0.125rem solid @_sap_ui_rta_Overlay_Border; //2px
-			border:	none
-		}
-
-		&.sapUiRtaErrorBg:after {
-			outline: 0.125rem solid @_sap_ui_rta_Overlay_ErrorBorder; //2px
-			outline-offset: -0.125rem; //2px
+			outline: none;
 			border:	none
 		}
-
-		&.sapUiDtOverlayFocusable {
-			&:focus {
-				&:before {
-					top: 0.125rem; //2px
-					left: 0.125rem; //2px
-					bottom: 0.125rem; //2px
-					right: 0.125rem; //2px
-					// IE doesn't support width/height: 'initial'.// TODO remove after the end of support for Internet Explorer
-					// With the property 'auto' the same effect is achieved.
-					// When initial is supported, auto is ignored.
-					width: auto;
-					width: initial;
-					height: auto;
-					height: initial;
-				}
-			}
-		}
 	}
 
 	.sapUiDtOverlayTargetZone {
@@ -253,6 +196,64 @@
 	}
 }
 
+.sapUiRta:not(.sapUiRtaVisualizationMode) {
+	.sapUiRtaOverlayHover {
+		-webkit-transition: background 0.1s cubic-bezier(1,.01,1,0);
+		-moz-transition: background 0.1s cubic-bezier(1,.01,1,0);
+		-o-transition: background 0.1s cubic-bezier(1,.01,1,0);
+		transition: background 0.1s cubic-bezier(1,.01,1,0);
+
+		&:after {
+			content: " ";
+			border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder; //1px
+			transition: box-shadow .25s;
+			box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+			outline: 0.0625rem solid @_sap_ui_rta_Overlay_Border; //1px
+			outline-offset: -0.0625rem; //1px
+		}
+	}
+	.sapUiDtOverlaySelected {
+		transition: box-shadow .25s;
+		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
+		&.sapUiDtOverlayWithScrollBar:after {
+			bottom: 0;
+			right: 0;
+			top: 0;
+			left: 0;
+			width: initial;
+			height: initial;
+		}
+
+		&:after {
+			outline: 0.125rem solid @_sap_ui_rta_Overlay_Border; //2px
+			border:	none
+		}
+
+		&.sapUiRtaErrorBg:after {
+			outline: 0.125rem solid @_sap_ui_rta_Overlay_ErrorBorder; //2px
+			outline-offset: -0.125rem; //2px
+			border:	none
+		}
+
+		&.sapUiDtOverlayFocusable {
+			&:focus {
+				&:before {
+					top: 0.125rem; //2px
+					left: 0.125rem; //2px
+					bottom: 0.125rem; //2px
+					right: 0.125rem; //2px
+					// IE doesn't support width/height: 'initial'.// TODO remove after the end of support for Internet Explorer
+					// With the property 'auto' the same effect is achieved.
+					// When initial is supported, auto is ignored.
+					width: auto;
+					width: initial;
+					height: auto;
+					height: initial;
+				}
+			}
+		}
+	}
+}
 .sapUiRtaMode #shell-shapes {
 	display: none;
 }

package/src/sap/ui/rta/{assets/InPageStyles.css → themes/base/OverlayWithScrollbar.less}

@@ -1,34 +1,36 @@
-/**
-	Content of this file inserts automatically into the page when RTA starts
- */
+@_sap_ui_rta_OverlayWithScrollbar_scrollWidth: var(--sap-ui-rta-scrollbar-scrollWidth);
+@_sap_ui_rta_OverlayWithScrollbar_scrollWidthPlusTwo: var(--sap-ui-rta-scrollbar-scrollWidthPlusTwo);
 
 .sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:after {
-	right: %scrollWidth%;
+	inset-inline-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidth !important;
 }
 
 .sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:after {
-	bottom: %scrollWidth%;
+	inset-block-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidth !important;
 }
 
 .sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:focus:before {
-	right: calc(%scrollWidth% + 2px);
+	inset-inline-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidthPlusTwo !important;
 }
+
 .sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:focus:before {
-	bottom: calc(%scrollWidth% + 2px);
+	inset-block-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidthPlusTwo !important;
 }
 
 .sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:focus:before {
-	right: calc(%scrollWidth% + 2px);
+	inset-inline-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidthPlusTwo !important;
 }
+
 .sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:focus:before {
-	bottom: calc(%scrollWidth% + 2px);
+	inset-block-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidthPlusTwo !important;
 }
 
 .sapUiRta .sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:focus:before,
 .sapUiRta .sapUiRtaOverlayHover.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:after {
-	bottom: %scrollWidth%;
+	inset-block-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidth !important;
 }
+
 .sapUiRta .sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:focus:before,
 .sapUiRta .sapUiRtaOverlayHover.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:after {
-	right: %scrollWidth%;
-}
+	inset-inline-end: @_sap_ui_rta_OverlayWithScrollbar_scrollWidth !important;
+}

package/src/sap/ui/rta/themes/base/Toolbar.base.less

@@ -4,6 +4,8 @@
 @_sap_ui_rta_Toolbar_Base_SegBBtnHoverBG: lighten(@sapSelectedColor,32%); //#c2e2f9
 @_sap_ui_rta_Toolbar_Base_TextColor: @sapUiWhite; //#fff
 @_sap_ui_rta_Toolbar_Base_BaseColor: darken(desaturate(@sapChart_OrderedColor_1, 48%), 14%); //#435060
+@_sap_ui_rta_Toolbar_Base_BorderColor: @sapUiMediumBG;
+@_sap_ui_rta_Toolbar_Base_BtnHoverColor: @sapUiButtonHoverTextColor;
 
 .sapUiRtaMode {
 
@@ -28,10 +30,16 @@
 
 		.sapMBtnTransparent,
 		:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon,
-		:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon {
+		:not(.sapMBtnDisabled) .sapMBtnGhost > .sapMBtnIcon,
+		:not(.sapMBtnDisabled) .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
 			color: @_sap_ui_rta_Toolbar_Base_TextColor;
 		}
 
+		:not(.sapMBtnDisabled) .sapMMenuBtn:hover.sapMMenuBtnRegular .sapMBtnInner::after {
+			color: @_sap_ui_rta_Toolbar_Base_BtnHoverColor;
+		}
+
+
 		.sapMSegB > .sapMSegBBtn .sapMSegBBtnInner {
 			background-color: @_sap_ui_rta_Toolbar_Base_BaseColor;
 			color: @_sap_ui_rta_Toolbar_Base_TextColor;
@@ -110,6 +118,9 @@
 			}
 		}
 	}
+	.sapUiRtaToolbarVisualizationSelection li:first-child {
+		border-bottom: 1px solid @_sap_ui_rta_Toolbar_Base_BorderColor;
+	}
 }
 .sapUiSizeCozy {
 	.sapUiRtaToolbar {

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/themes/sap_hcb/Overlay.less

@@ -7,7 +7,7 @@
 @_sap_ui_rta_Overlay_Border : @sapUiDragAndDropActiveBorderColor;
 
 
-.sapUiRta {
+.sapUiRta:not(.sapUiRtaVisualizationMode) {
 	.sapUiDtOverlay {
 		&:focus {
 			outline: none;
@@ -31,5 +31,4 @@
 			border-width: 2px;
 		}
 	}
-
-}
+}