@openui5/sap.ui.rta 1.112.2 → 1.114.0

package/src/sap/ui/rta/plugin/RTAElementMover.js

@@ -35,7 +35,7 @@ function(
 	 * The RTAElementMover is responsible for the RTA specific adaptation of element movements.
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/plugin/Remove.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * @class The Remove allows trigger remove operations on the overlay
 	 * @extends sap.ui.rta.plugin.Plugin
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.34

package/src/sap/ui/rta/plugin/Rename.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.rta.plugin.Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/plugin/RenameHandler.js

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * Provides Rename handling functionality
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 *
 	 * @constructor
 	 * @private
@@ -65,11 +65,11 @@ sap.ui.define([
 		},
 
 		_setEditableFieldPosition: function() {
-			if (this._$editableField) {
-				this._$editableField.offset({left: this._$oEditableControlDomRef.offset().left});
-				this._$editableField.offset({top: this._$oEditableControlDomRef.offset().top});
+			if (this._oEditableField) {
+				jQuery(this._oEditableField).offset({left: DOMUtil.getOffset(this._oEditableControlDomRef).left});
+				jQuery(this._oEditableField).offset({top: DOMUtil.getOffset(this._oEditableControlDomRef).top});
 				this._oEditedOverlay.setSelected(true);
-				this._$editableField.focus();
+				this._oEditableField.focus();
 			}
 		},
 
@@ -85,22 +85,22 @@ sap.ui.define([
 
 			var oDesignTimeMetadata = this._oEditedOverlay.getDesignTimeMetadata();
 
-			var vEditableControlDomRef = oDesignTimeMetadata.getAssociatedDomRef(oElement, mPropertyBag.domRef);
+			var oEditableControlDomRef = oDesignTimeMetadata.getAssociatedDomRef(oElement, mPropertyBag.domRef);
 
 			// if the Control is currently not visible on the screen, we have to scroll it into view
-			if (!Utils.isElementInViewport(vEditableControlDomRef)) {
-				vEditableControlDomRef.get(0).scrollIntoView();
+			if (!Utils.isElementInViewport(oEditableControlDomRef)) {
+				oEditableControlDomRef.get(0).scrollIntoView();
 			}
 
-			this._$oEditableControlDomRef = jQuery(vEditableControlDomRef); /* Text Control */
+			this._oEditableControlDomRef = oEditableControlDomRef.get(0); /* Text Control */
 			var mMutators = typeof mPropertyBag.getTextMutators === "function"
 				? mPropertyBag.getTextMutators(oElement)
 				: {
 					getText: function () {
-						return this._$oEditableControlDomRef.text();
+						return this._oEditableControlDomRef.textContent;
 					}.bind(this),
 					setText: function (sNewText) {
-						this._$oEditableControlDomRef.text(sNewText);
+						this._oEditableControlDomRef.textContent = sNewText;
 					}.bind(this)
 				};
 			this._fnGetControlText = mMutators.getText;
@@ -109,9 +109,9 @@ sap.ui.define([
 
 			// case where the editable control has it's own overlay
 			var oOverlayForWrapper = OverlayRegistry.getOverlay(
-				vEditableControlDomRef.jquery
-					? vEditableControlDomRef.get(0).id
-					: vEditableControlDomRef.id
+				oEditableControlDomRef.jquery
+					? oEditableControlDomRef.get(0).id
+					: oEditableControlDomRef.id
 			);
 
 			// if the editable control overlay could not be found, then the passed overlay should be considered
@@ -119,11 +119,11 @@ sap.ui.define([
 			if (!oOverlayForWrapper) {
 				oOverlayForWrapper = this._oEditedOverlay;
 				var _oControlForWrapperDomRef = ElementUtil.getDomRef(oElement); /* Main Control */
-				var _oEditableControlParentDomRef = this._$oEditableControlDomRef.parent().get(0); /* Text Control parent */
+				var _oEditableControlParentDomRef = this._oEditableControlDomRef.parentNode; /* Text Control parent */
 				var iControlForWrapperWidth = _oControlForWrapperDomRef ? parseInt(_oControlForWrapperDomRef.offsetWidth) : "NaN"; /* Main Control Width */
 
 				if (!isNaN(iControlForWrapperWidth)) {
-					var iEditableControlWidth = parseInt(this._$oEditableControlDomRef.outerWidth());
+					var iEditableControlWidth = parseInt(this._oEditableControlDomRef.offsetWidth);
 					var iEditableControlParentWidth = parseInt(_oEditableControlParentDomRef.offsetWidth);
 
 					iWidthDifference = iControlForWrapperWidth - iEditableControlWidth;
@@ -136,7 +136,7 @@ sap.ui.define([
 					if (iWidthDifference < 0 && iEditableControlParentWidth) {
 						if (_oEditableControlParentDomRef.id !== _oControlForWrapperDomRef.id
 							&& aVisibleChildren.length === 1
-							&& aVisibleChildren[0].id === this._$oEditableControlDomRef.get(0).id
+							&& aVisibleChildren[0].id === this._oEditableControlDomRef.id
 							&& iControlForWrapperWidth > iEditableControlParentWidth) {
 							iWidthDifference = iControlForWrapperWidth - iEditableControlParentWidth;
 						} else {
@@ -155,65 +155,65 @@ sap.ui.define([
 			var _oEditableFieldDomRef = document.createElement("div");
 			_oEditableFieldDomRef.setAttribute("contentEditable", "true");
 			_oWrapperDomRef.append(_oEditableFieldDomRef);
-			//TODO: replace the private jQuery variable to HTMLElement
-			this._$editableField = jQuery(_oEditableFieldDomRef);
+			this._oEditableField = _oEditableFieldDomRef;
 
 			// if label is empty, set a preliminary dummy text at the control to get an overlay
 			var sCurrentText = this._fnGetControlText();
 			if (sCurrentText === "") {
 				this._fnSetControlText("_?_");
-				this._$editableField.text("");
+				this._oEditableField.textContent = "";
 			} else {
-				this._$editableField.text(sCurrentText);
+				this._oEditableField.textContent = sCurrentText;
 			}
 
 			this.setOldValue(RenameHandler._getCurrentEditableFieldText.call(this));
 
-			DOMUtil.copyComputedStyle(this._$oEditableControlDomRef.get(0), this._$editableField.get(0));
-			this._$editableField.children().remove();
-			this._$editableField.css("visibility", "hidden");
-
-			this._$editableField.css({
-				"-moz-user-modify": "read-write",
-				"-webkit-user-modify": "read-write",
-				"-ms-user-modify": "read-write",
-				"user-modify": "read-write",
-				"user-select": "text",
-				"-webkit-user-select": "text",
-				"text-overflow": "clip",
-				"white-space": "nowrap"
-			});
+			DOMUtil.copyComputedStyle(this._oEditableControlDomRef, this._oEditableField);
+			while (this._oEditableField.lastElementChild) {
+				this._oEditableField.removeChild(this._oEditableField.lastElementChild);
+			}
+
+			this._oEditableField.style.visibility = "hidden";
+			this._oEditableField.style["-moz-user-modify"] = "read-write";
+			this._oEditableField.style["-webkit-user-modify"] = "read-write";
+			this._oEditableField.style["-ms-user-modify"] = "read-write";
+			this._oEditableField.style["user-modify"] = "read-write";
+			this._oEditableField.style.userSelect = "text";
+			this._oEditableField.style["-webkit-user-select"] = "text";
+			this._oEditableField.style.textOverflow = "clip";
+			this._oEditableField.style.whiteSpace = "nowrap";
 
 			//only for renaming variants in edge browser [SPECIAL CASE]
 			if (
 				Device.browser.name === "ed"
 				&& oElement.getMetadata().getName() === "sap.ui.fl.variants.VariantManagement"
 			) {
-				this._$editableField.css({
-					"line-height": "normal"
-				});
+				this._oEditableField.style.lineHeight = "normal";
 			}
 
 			Overlay.getMutationObserver().ignoreOnce({
-				target: this._$oEditableControlDomRef.get(0)
+				target: this._oEditableControlDomRef
 			});
 
-			this._$editableField.one("focus", RenameHandler._onEditableFieldFocus.bind(this));
-
-			this._$editableField.on("blur", RenameHandler._onEditableFieldBlur.bind(this));
-			this._$editableField.on("keydown", RenameHandler._onEditableFieldKeydown.bind(this));
-			this._$editableField.on("dragstart", RenameHandler._stopPropagation.bind(this));
-			this._$editableField.on("drag", RenameHandler._stopPropagation.bind(this));
-			this._$editableField.on("dragend", RenameHandler._stopPropagation.bind(this));
-
-			this._$editableField.on("click", RenameHandler._stopPropagation.bind(this));
-			this._$editableField.on("mousedown", RenameHandler._stopPropagation.bind(this));
-
-			this._$oEditableControlDomRef.css("visibility", "hidden");
-			jQuery(_oWrapperDomRef).offset({left: this._$oEditableControlDomRef.offset().left});
+			this._FocusHandler = RenameHandler._onEditableFieldFocus.bind(this);
+			this._oBlurHandler = RenameHandler._onEditableFieldBlur.bind(this);
+			this._oKeyDownHandler = RenameHandler._onEditableFieldKeydown.bind(this);
+			this._oStopPropagationHandler = RenameHandler._stopPropagation.bind(this);
+
+			this._oEditableField.addEventListener("focus", this._FocusHandler, {once: true});
+			this._oEditableField.addEventListener("blur", this._oBlurHandler);
+			this._oEditableField.addEventListener("keydown", this._oKeyDownHandler);
+			this._oEditableField.addEventListener("dragstart", this._oStopPropagationHandler);
+			this._oEditableField.addEventListener("drag", this._oStopPropagationHandler);
+			this._oEditableField.addEventListener("dragend", this._oStopPropagationHandler);
+			this._oEditableField.addEventListener("click", this._oStopPropagationHandler);
+			this._oEditableField.addEventListener("mousedown", this._oStopPropagationHandler);
+
+			this._oEditableControlDomRef.style.visibility = "hidden";
+			jQuery(_oWrapperDomRef).offset({left: DOMUtil.getOffset(this._oEditableControlDomRef).left});
 			RenameHandler._setEditableFieldPosition.apply(this);
-			this._$editableField.css("visibility", "");
-			this._$editableField.trigger("focus");
+			this._oEditableField.style.visibility = "";
+			this._oEditableField.focus();
 
 			// If scrolling happens during startEdit, the position of the editable field can be wrong
 			// To avoid this, the position is recalculated after the scrollbar synchronization is ready
@@ -226,7 +226,7 @@ sap.ui.define([
 			mPropertyBag.overlay.setSelected(true);
 			sap.ui.getCore().getEventBus().publish("sap.ui.rta", mPropertyBag.pluginMethodName, {
 				overlay: mPropertyBag.overlay,
-				editableField: this._$editableField
+				editableField: this._oEditableField
 			});
 		},
 
@@ -296,22 +296,27 @@ sap.ui.define([
 		_stopEdit: function (bRestoreFocus, sPluginMethodName) {
 			var oOverlay;
 			this.setBusy(false);
+			this._oEditableField.removeEventListener("blur", this._oBlurHandler);
+			this._oEditableField.removeEventListener("focus", this._FocusHandler);
+			this._oEditableField.removeEventListener("keydown", this._oKeyDownHandler);
+			this._oEditableField.removeEventListener("dragstart", this._oStopPropagationHandler);
+			this._oEditableField.removeEventListener("drag", this._oStopPropagationHandler);
+			this._oEditableField.removeEventListener("dragend", this._oStopPropagationHandler);
+			this._oEditableField.removeEventListener("click", this._oStopPropagationHandler);
+			this._oEditableField.removeEventListener("mousedown", this._oStopPropagationHandler);
 
 			// exchange the dummy text at the label with the genuine empty text (see start_edit function)
 			if (this._fnGetControlText() === "_?_") {
 				this._fnSetControlText("");
 			}
 
-			//TODO: check why test gets red when this is replaced by vanilla JS
-			this._oEditedOverlay.$().find(".sapUiRtaEditableField").remove();
 			Overlay.getMutationObserver().ignoreOnce({
-				target: this._$oEditableControlDomRef.get(0)
+				target: this._oEditableControlDomRef
 			});
-			this._$oEditableControlDomRef.css("visibility", "visible");
+			this._oEditableControlDomRef.style.visibility = "visible";
 
 			if (bRestoreFocus) {
 				oOverlay = this._oEditedOverlay;
-
 				oOverlay.setSelected(true);
 				oOverlay.focus();
 			}
@@ -319,8 +324,12 @@ sap.ui.define([
 			this._aOverlaysWithScrollbar.forEach(function(oOverlayWithScrollbar) {
 				oOverlayWithScrollbar.detachScrollSynced(RenameHandler._setEditableFieldPosition, this);
 			}.bind(this));
-			delete this._$editableField;
-			delete this._$oEditableControlDomRef;
+			delete this._oEditableField;
+			var oEditField = this._oEditedOverlay.getDomRef() && this._oEditedOverlay.getDomRef().querySelector(".sapUiRtaEditableField");
+			if (oEditField) {
+				oEditField.remove();
+			}
+			delete this._oEditableControlDomRef;
 			delete this._oEditedOverlay;
 			delete this._bBlurOrKeyDownStarted;
 			delete this._fnGetControlText;
@@ -331,8 +340,8 @@ sap.ui.define([
 			});
 		},
 
-		_onEditableFieldBlur: function () {
-			return RenameHandler._handlePostRename.call(this, false);
+		_onEditableFieldBlur: function (oEvent) {
+			return RenameHandler._handlePostRename.call(this, false, oEvent);
 		},
 
 		_handlePostRename: function (bRestoreFocus, oEvent) {
@@ -415,7 +424,7 @@ sap.ui.define([
 		_getCurrentEditableFieldText: function () {
 			// Rename to empty string should not be possible
 			// to prevent issues with disappearing elements
-			var sText = this._$editableField.text().trim();
+			var sText = this._oEditableField ? this._oEditableField.textContent.trim() : "";
 			return sText === "" ? sEmptyTextKey : sText;
 		},
 
@@ -432,7 +441,7 @@ sap.ui.define([
 		},
 
 		_exit: function() {
-			if (this._$oEditableControlDomRef) {
+			if (this._oEditableControlDomRef) {
 				this.stopEdit(false);
 			}
 		}

package/src/sap/ui/rta/plugin/Resize.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @class
 	 * @extends sap.ui.rta.plugin.Plugin
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.101

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

@@ -30,7 +30,7 @@ function (
 	 * @class The Selection plugin allows you to select or focus overlays with mouse or keyboard and navigate to others.
 	 * @extends sap.ui.rta.plugin.Plugin
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.34

package/src/sap/ui/rta/plugin/Settings.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @class The Settings allows trigger change of settings operations on the overlay
 	 * @extends sap.ui.rta.plugin.Plugin
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.44

package/src/sap/ui/rta/plugin/Split.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @class
 	 * @extends sap.ui.rta.plugin.Plugin
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.46

package/src/sap/ui/rta/plugin/Stretch.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * @extends sap.ui.rta.plugin.Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/plugin/additionalElements/ActionExtractor.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * handled by the AdditionalElements Plugin (Reveal, Add Via Delegate, Add Custom)
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @private
 	 * @since 1.94
 	 * @experimental Since 1.94. This class is experimental and provides only limited functionality. Also the API might be changed in future.
@@ -79,25 +79,6 @@ sap.ui.define([
 			});
 	}
 
-	function checkInvalidAddActions(bSibling, oSourceElementOverlay, oPlugin) {
-		var mParents = AdditionalElementsUtils.getParents(bSibling, oSourceElementOverlay, oPlugin);
-		var oDesignTimeMetadata = mParents.parentOverlay && mParents.parentOverlay.getDesignTimeMetadata();
-		var aAddODataPropertyActions = oDesignTimeMetadata ? oDesignTimeMetadata.getActionDataFromAggregations("addODataProperty", mParents.parent) : [];
-		if (aAddODataPropertyActions.length > 0) {
-			Log.error("Outdated addODataProperty action in designtime metadata in "
-				+ oDesignTimeMetadata.getData().designtimeModule
-				+ " or propagated or via instance specific designtime metadata.");
-		}
-		var aAddActions = oDesignTimeMetadata ? oDesignTimeMetadata.getActionDataFromAggregations("add", mParents.parent) : [];
-		aAddActions.forEach(function(mAddAction) {
-			if (mAddAction["custom"]) {
-				Log.error("Outdated custom add action in designtime metadata in "
-					+ oDesignTimeMetadata.getData().designtimeModule
-					+ " or propagated or via instance specific designtime metadata.");
-			}
-		});
-	}
-
 	function getInvisibleElements (oParentOverlay, sAggregationName, oPlugin) {
 		var oParentElement = oParentOverlay.getElement();
 		if (!oParentElement) {
@@ -337,8 +318,7 @@ sap.ui.define([
 
 		return Promise.all([
 			oRevealActionsPromise,
-			oAddPropertyActionsPromise,
-			checkInvalidAddActions(bSibling, oSourceElementOverlay, oPlugin)
+			oAddPropertyActionsPromise
 		]).then(function(aAllActions) {
 			//join and condense all action data
 			var mAllActions = merge(aAllActions[0], aAllActions[1]);

package/src/sap/ui/rta/plugin/additionalElements/AddElementsDialog.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * @class Context - Dialog for available Fields in Runtime Authoring
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.44

package/src/sap/ui/rta/plugin/additionalElements/AdditionalElementsPlugin.js

@@ -75,7 +75,7 @@ sap.ui.define([
 	 * @class The plugin allows to add additional elements that exist either hidden in the UI or in the OData service
 	 * @extends sap.ui.rta.plugin.Plugin
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.44

package/src/sap/ui/rta/plugin/additionalElements/AdditionalElementsUtils.js

@@ -15,7 +15,7 @@ sap.ui.define([
 	 * Helper object containing methods for the AdditionalElements plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @private
 	 * @since 1.94
 	 * @experimental Since 1.94. This class is experimental and provides only limited functionality. Also the API might be changed in future.

package/src/sap/ui/rta/plugin/additionalElements/CommandBuilder.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * Helper object to build the RTA commands resulting from the AdditionalElements Plugin
 	 *
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @private
 	 * @since 1.94
 	 * @experimental Since 1.94. This class is experimental and provides only limited functionality. Also the API might be changed in future.

package/src/sap/ui/rta/plugin/iframe/AddIFrame.js

@@ -117,7 +117,7 @@ sap.ui.define([
 	 * @class The AddIFrame allows trigger AddIFrame operations on the overlay.
 	 * @extends sap.ui.rta.plugin.BaseCreate
 	 * @author SAP SE
-	 * @version 1.112.2
+	 * @version 1.114.0
 	 * @constructor
 	 * @private
 	 * @since 1.75

package/src/sap/ui/rta/plugin/iframe/AddIFrameDialog.fragment.xml

@@ -4,17 +4,20 @@
 		xmlns:form="sap.ui.layout.form"
 		xmlns:util="sap.ui.fl.util"
 		xmlns:layout="sap.ui.layout">
-	<Dialog id="sapUiRtaAddIFrameDialog"
-			title="{/text/dialogTitle}"
-			verticalScrolling="true"
-			resizable="false"
-			class="sapUiRtaAddIFrameDialog"
-			draggable="true"
-			validationSuccess="onValidationSuccess"
-			validationError="onValidationError"
-			parseError="onValidationError"
-			contentWidth="50rem"
-			contentHeight="44rem">
+	<Dialog
+		id="sapUiRtaAddIFrameDialog"
+		title="{/text/dialogTitle}"
+		verticalScrolling="true"
+		resizable="false"
+		class="sapUiRtaAddIFrameDialog"
+		draggable="true"
+		validationSuccess="onValidationSuccess"
+		validationError="onValidationError"
+		parseError="onValidationError"
+		contentWidth="50rem"
+		contentHeight="44rem"
+		core:require="{ FloatType: 'sap/ui/model/type/Float' }"
+	>
 		<content>
 
 			<layout:VerticalLayout
@@ -61,12 +64,19 @@
 										text="{/text/widthLabel}">
 									</Label>
 									<Input id="sapUiRtaAddIFrameDialog_WidthInput" class="sapUiRtaAddIFrameDialogWidthInput"
-										value="{path: '/frameWidth/value', type: 'sap.ui.model.type.Float', constraints: {minimum: 1}}"
+										value="{path: '/frameWidth/value', type: 'FloatType', constraints: {minimum: 1}}"
 										valueState="{/frameWidth/valueState}"/>
-									<Select id="sapUiRtaAddIFrameDialog_WidthUnit" class="sapUiRtaAddIFrameDialogWidthUnit"
-											ariaLabelledBy="sapUiRtaAddIFrameDialog_WidthUnitLabel" change="onSizeUnitChange"
-											selectedKey="{/frameWidthUnit/value}" items="{/unitsOfMeasure}">
-										<core:Item key="{name}" text="{name}" />
+									<Select
+										id="sapUiRtaAddIFrameDialog_WidthUnit"
+										class="sapUiRtaAddIFrameDialogWidthUnit"
+										ariaLabelledBy="sapUiRtaAddIFrameDialog_WidthUnitLabel"
+										selectedKey="{/frameWidthUnit/value}"
+										items="{/unitsOfWidthMeasure}"
+										showSecondaryValues= "true"
+										columnRatio="1:5"
+										width="auto"
+										maxWidth="400px">
+											<core:ListItem key="{unit}" text="{unit}" additionalText="{descriptionText}"/>
 									</Select>
 								</form:content>
 							</form:SimpleForm>
@@ -80,12 +90,20 @@
 									<Label id="sapUiRtaAddIFrameDialog_HeightLabel" class="sapUiRtaAddIFrameDialogHeightLabel" labelFor="sapUiRtaAddIFrameDialog_HeightInput"
 										text="{/text/heightLabel}"/>
 									<Input id="sapUiRtaAddIFrameDialog_HeightInput" class="sapUiRtaAddIFrameDialogHeightInput"
-										value="{path: '/frameHeight/value', type: 'sap.ui.model.type.Float', constraints: {minimum: 1}}"
+										value="{path: '/frameHeight/value', type: 'FloatType', constraints: {minimum: 1}}"
 										valueState="{/frameHeight/valueState}"/>
-									<Select id="sapUiRtaAddIFrameDialog_HeightUnit" class="sapUiRtaAddIFrameDialogHeightUnit"
-											ariaLabelledBy="sapUiRtaAddIFrameDialog_HeightUnitLabel" change="onSizeUnitChange"
-											selectedKey="{/frameHeightUnit/value}" items="{/unitsOfMeasure}">
-										<core:Item key="{name}" text="{name}" />
+									<Select
+										id="sapUiRtaAddIFrameDialog_HeightUnit"
+										class="sapUiRtaAddIFrameDialogHeightUnit"
+										ariaLabelledBy="sapUiRtaAddIFrameDialog_HeightUnitLabel"
+										selectedKey="{/frameHeightUnit/value}"
+										forceSelection="false"
+										items="{/unitsOfHeightMeasure}"
+										showSecondaryValues= "true"
+										columnRatio="1:5"
+										width="auto"
+										maxWidth="400px">
+											<core:ListItem key="{unit}" text="{= ${unit} === 'vh' ? '%' : ${unit}}" additionalText="{descriptionText}"/>
 									</Select>
 								</form:content>
 							</form:SimpleForm>