@openui5/sap.ui.layout 1.92.0 → 1.95.0

package/src/sap/ui/layout/form/GridLayout.js

@@ -28,7 +28,7 @@ sap.ui.define(['sap/ui/layout/library', './FormLayout', './GridLayoutRenderer'],
 	 * @extends sap.ui.layout.form.FormLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -227,7 +227,7 @@ sap.ui.define(['sap/ui/layout/library', './FormLayout', './GridLayoutRenderer'],
 			var oContainerData = this.getLayoutDataForElement(oContainer, "sap.ui.layout.form.GridContainerData");
 
 			if ((bSingleColumn || !oContainerData || !oContainerData.getHalfGrid()) && !this.getRenderer().checkFullSizeElement(this, oElement) ) {
-				return (oElement.getId() ? window.document.getElementById(oElement.getId()) : null);
+				return oElement.getDomRef();
 			}
 		}
 

package/src/sap/ui/layout/form/ResponsiveGridLayout.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 *
 	 * This control cannot be used stand-alone, it just renders a <code>Form</code>, so it must be assigned to a <code>Form</code> using the <code>layout</code> aggregation.
 	 * @extends sap.ui.layout.form.FormLayout
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -928,12 +928,7 @@ sap.ui.define([
 			var oLayout = this.__myParentLayout;
 			if (!oLayout._mainGrid || !oLayout._mainGrid.__bIsUsed ) {
 				// no main grid used -> only 1 container
-				var aContainers = oLayout.getParent().getVisibleFormContainers();
-				var oFirstContainer;
-				for (var i = 0; i < aContainers.length; i++) {
-					oFirstContainer = aContainers[i];
-					break;
-				}
+				var oFirstContainer = oLayout.getParent().getVisibleFormContainers()[0];
 				if (!oFirstContainer || !oLayout.mContainers[oFirstContainer.getId()] || oFirstContainer.getId() != this.__myParentContainerId) {
 					// Form seems to be invalidated (container changed) but rerendering still not done
 					// -> ignore resize, it will be rerendered soon

package/src/sap/ui/layout/form/ResponsiveLayout.js

@@ -50,11 +50,12 @@ sap.ui.define([
 	 * @extends sap.ui.layout.form.FormLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
 	 * @since 1.16.0
+	 * @deprecated As of version 1.93, replaced by {@link sap.ui.layout.form.ColumnLayout ColumnLayout}
 	 * @alias sap.ui.layout.form.ResponsiveLayout
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */

package/src/sap/ui/layout/form/SemanticFormElement.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.ui.layout.form.FormElement
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -186,9 +186,11 @@ sap.ui.define([
 			var aDelemiters = this.getAggregation("_delimiters", []);
 			for (var i = 0; i < aFields.length; i++) {
 				var oField = aFields[i];
-				aFieldsForRendering.push(oField);
-				if (i < aFields.length - 1 && aDelemiters[i]) {
-					aFieldsForRendering.push(aDelemiters[i]);
+				if (oField.getVisible()) {
+					if (aFieldsForRendering.length > 0 && aDelemiters[i - 1]) {
+						aFieldsForRendering.push(aDelemiters[i - 1]);
+					}
+					aFieldsForRendering.push(oField);
 				}
 			}
 		} else {
@@ -252,19 +254,17 @@ sap.ui.define([
 			if (!oField.isA("sap.ui.core.IFormContent") || !oField.isA("sap.ui.core.ISemanticFormContent")) {
 				throw new Error(oField + " is not valid Form content. " + this); // only support allowed Fields
 			}
+			var aProperties = ["visible"];
 			if (oField.getFormValueProperty) {
-				this._oObserver.observe(oField, {
-					properties: [oField.getFormValueProperty()]
-				});
+					aProperties.push(oField.getFormValueProperty());
 			} else if (oField.getMetadata().getProperty("value")) {
-				this._oObserver.observe(oField, {
-					properties: ["value"]
-				});
+				aProperties.push("value");
 			} else if (oField.getMetadata().getProperty("text")) {
-				this._oObserver.observe(oField, {
-					properties: ["text"]
-				});
+				aProperties.push("text");
 			}
+			this._oObserver.observe(oField, {
+				properties: aProperties
+			});
 		} else {
 			// unobserve is done in FormElement
 			var oLayoutData = oField.getLayoutData();
@@ -280,6 +280,8 @@ sap.ui.define([
 			_updateControlsForDisplay.call(this, true);
 		}
 
+		_updateLabelText.call(this); // to hide labels of invisible Field
+
 	}
 
 	function _delimiterChanged(sDelimiter) {
@@ -319,6 +321,14 @@ sap.ui.define([
 			if (!this.getProperty("_editable")) {
 				_updateDisplayText.call(this, false);
 			}
+		} else if (oChanges.name === "visible") {
+			if (this.getProperty("_editable")) {
+				_updateControlsForEdit.call(this);
+			} else {
+				_updateControlsForDisplay.call(this, true);
+			}
+			_updateLabelText.call(this); // to hide labels of invisible Field
+			this.invalidate(); // to force rerendering
 		}
 
 	}
@@ -397,21 +407,23 @@ sap.ui.define([
 
 			for (var i = 0; i < aFields.length; i++) {
 				var oField = aFields[i];
-				var sProperyName = oField.getFormValueProperty ? oField.getFormValueProperty() : null;
-				var vText;
-				if (oField.getFormFormattedValue) {
-					vText = oField.getFormFormattedValue();
-					if (vText instanceof Promise) {
-						bAsync = true;
+				if (oField.getVisible()) {
+					var sProperyName = oField.getFormValueProperty ? oField.getFormValueProperty() : null;
+					var vText;
+					if (oField.getFormFormattedValue) {
+						vText = oField.getFormFormattedValue();
+						if (vText instanceof Promise) {
+							bAsync = true;
+						}
+					} else if (sProperyName) {
+						vText = oField.getProperty(sProperyName);
+					} else if (oField.getMetadata().getProperty("value")) {
+						vText = oField.getValue();
+					} else if (oField.getMetadata().getProperty("text")) {
+						vText = oField.getText();
 					}
-				} else if (sProperyName) {
-					vText = oField.getProperty(sProperyName);
-				} else if (oField.getMetadata().getProperty("value")) {
-					vText = oField.getValue();
-				} else if (oField.getMetadata().getProperty("text")) {
-					vText = oField.getText();
+					aTexts.push(vText);
 				}
-				aTexts.push(vText);
 			}
 
 			oDisplay._bNoForceUpdate = true; // prevent double update, as setText might trigger re-rendering
@@ -451,13 +463,16 @@ sap.ui.define([
 		if (!this.getLabel()) {
 			// only use if no Label is set on FormElement level
 			var aFieldLabels = this.getFieldLabels();
+			var aFields = this.getFields();
 			var aTexts = [];
 			for (var i = 0; i < aFieldLabels.length; i++) {
-				var oFieldLabel = aFieldLabels[i];
-				if (typeof oFieldLabel === "string") {
-					aTexts.push(oFieldLabel);
-				} else {
-					aTexts.push(oFieldLabel.getText());
+				if (aFields[i] && aFields[i].getVisible()) { // if Field not already assigned update if assigned
+					var oFieldLabel = aFieldLabels[i];
+					if (typeof oFieldLabel === "string") {
+						aTexts.push(oFieldLabel);
+					} else {
+						aTexts.push(oFieldLabel.getText());
+					}
 				}
 			}
 
@@ -471,7 +486,9 @@ sap.ui.define([
 	// the used Layout can be unknown. But latest on rendering it is known, so there the LayoutData can be set latest.
 	function _updateLayoutData() {
 
-		var aFields = this.getFields();
+		var aFields = this.getFields().filter(function(oField) {
+			return oField.getVisible();
+		});
 		var aDelemiters = this.getAggregation("_delimiters", []);
 		var oFormContainer = this.getParent();
 		var oForm = oFormContainer && oFormContainer.getParent();

package/src/sap/ui/layout/form/SimpleForm.js

@@ -67,7 +67,7 @@ sap.ui.define([
 	 * <b>Note:</b> If a more complex form is needed, use the <code>{@link sap.ui.layout.form.Form Form}</code> control instead.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -135,6 +135,8 @@ sap.ui.define([
 			 * as its responsiveness uses the space available in the best way possible.
 			 *
 			 * <b>Note</b> If possible, set the <code>layout</code> before adding content to prevent calculations for the default layout.
+			 *
+			 * <b>Note</b> The <code>ResponsiveLayout</code> has been deprecated and must no longer be used. For compatibility reasons the default could not be changed.
 			 */
 			layout : {type : "sap.ui.layout.form.SimpleFormLayout", group : "Misc", defaultValue : SimpleFormLayout.ResponsiveLayout},
 
@@ -309,19 +311,19 @@ sap.ui.define([
 			 * <li>Add a <code>Label</code> control to start a new row (<code>{@link sap.ui.layout.form.FormElement FormElement}</code>).</li>
 			 * <li>Add controls as input fields, text fields or other as needed.</li>
 			 * <li>Use <code>LayoutData</code> to influence the layout for special cases in the single controls.
-			 * For example, if a <code>ResponsiveLayout</code> is used as a layout,
-			 * the form content is weighted using weight 3 for the labels and weight 5 for the fields part.
-			 * By default the label column is 192 pixels wide.
-			 * If your input controls should influence their width, you can add <code>sap.ui.layout.ResponsiveFlowLayoutData</code>
+			 * For example, if a <code>ColumnLayout</code> is used as a layout,
+			 * the form content is weighted using 4 cells for the labels and 8 cells for the field part, for large size.
+			 * If there is only little space, the labels are above the fields and each field uses 12 cells.
+			 * If your input controls should influence their width, you can add <code>sap.ui.layout.ColumnElementData</code>
 			 * to them via <code>setLayoutData</code> method.
-			 * Ensure that the sum of the weights in the <code>ResponsiveFlowLayoutData</code> is not more than 5,
+			 * Ensure that the sum of the weights in the <code>ColumnElementData</code> is not more than 12,
 			 * as this is the total width of the input control part of each form row.</li>
 			 * </ul>
-			 * Example for a row where the <code>Input</code> weight 4 and the second <code>Input</code> weight 1 (using <code>ResponsiveLayout</code>):
+			 * Example for a row where the <code>Input</code> uses 6 cells and the second <code>Input</code> uses 2 cells (using <code>ColumnElementData</code>):
 			 * <pre>
 			 * new sap.m.Label({text:"Label"});
-			 * new sap.m.Input({value:"Weight 4", layoutData: new sap.ui.layout.ResponsiveFlowLayoutData({weight:4})}),
-			 * new sap.m.Input({value:"Weight 1", layoutData: new sap.ui.layout.ResponsiveFlowLayoutData({weight:1})}),
+			 * new sap.m.Input({value:"6 cells", layoutData: new sap.ui.layout.ColumnElementData({cellsLarge: 6, cellsSmall: 8})}),
+			 * new sap.m.Input({value:"2 cells", layoutData: new sap.ui.layout.ColumnElementData({cellsLarge: 2, cellsSmall: 4})}),
 			 * </pre>
 			 *
 			 * For example, if a <code>ResponsiveGridLayout</code> is used as a layout, there are 12 cells in one row.

package/src/sap/ui/layout/library.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * @namespace
 	 * @name sap.ui.layout
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 * @since 1.15
 	 * @public
 	 */
@@ -28,7 +28,7 @@ sap.ui.define([
 	// delegate further initialization of this library to the Core
 	sap.ui.getCore().initLibrary({
 		name : "sap.ui.layout",
-		version: "1.92.0",
+		version: "1.95.0",
 		dependencies: ["sap.ui.core"],
 		designtime: "sap/ui/layout/designtime/library.designtime",
 		types: [
@@ -544,6 +544,7 @@ sap.ui.define([
 		/**
 		 * Uses the <code>ResponsiveLayout</code> layout to render the <code>SimpleForm</code> control
 		 * @public
+		 * @deprecated As of version 1.93, replaced by {@link sap.ui.layout.form.SimpleFormLayout.ColumnLayout ColumnLayout}
 		 */
 		ResponsiveLayout : "ResponsiveLayout",
 

package/src/sap/ui/layout/messagebundle_el.properties

@@ -2,7 +2,7 @@
 FORM_EXPAND=\u0395\u03C0\u03AD\u03BA\u03C4\u03B1\u03C3\u03B7
 FORM_COLLAPSE=\u03A3\u03CD\u03BC\u03C0\u03C4\u03C5\u03BE\u03B7
 
-SPLITTER_MOVE=\u03A0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03C4\u03B1 \u03BA\u03BB\u03B5\u03B9\u03B4\u03B9\u03AC \u0392\u0395\u039B\u039F\u03A5\u03A3 \u03B3\u03B9\u03B1 \u03BC\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7
+SPLITTER_MOVE=\u03A0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03C4\u03B1 \u03C0\u03BB\u03AE\u03BA\u03C4\u03C1\u03B1 \u0392\u0395\u039B\u039F\u03A5\u03A3 \u03B3\u03B9\u03B1 \u03BC\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7
 
 SIDE_CONTENT_LABEL=\u03A0\u03C1\u03CC\u03C3\u03B8\u03B5\u03C4\u03B1 \u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1
 

package/src/sap/ui/layout/cssgrid/GridBoxLayoutStyleHelper.js

@@ -1,62 +0,0 @@
-/*!
- * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
- * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
- */
-
-sap.ui.define([], function() {
-	"use strict";
-
-	/**
-	 * Handles dynamic style changes of items when sap.ui.layout.cssgrid.GridBoxLayout is used.
-	 *
-	 * @author SAP SE
-	 * @version 1.92.0
-	 *
-	 * @private
-	 * @constructor
-	 */
-	var GridBoxLayoutStyleHelper = {};
-	GridBoxLayoutStyleHelper._mInstanceStyles = {};
-
-	/**
-	 * Creates a CSS style to override the height of all items.
-	 *
-	 * @param {string} sId The id of the control.
-	 * @param {number} iMaxHeight The height to set.
-	 */
-	GridBoxLayoutStyleHelper.setItemHeight = function (sId, iMaxHeight) {
-		var sClassStyle = "#" + sId + ".sapUiLayoutCSSGridBoxLayoutFlattenHeight ul " + // container
-							".sapMLIB:not(.sapMGHLI),.sapUiDnDGridIndicator" +			// children
-							"{ height: " + iMaxHeight + "px; }"; 						// styles
-
-		if (this._mInstanceStyles[sId] !== sClassStyle) {
-			this._mInstanceStyles[sId] = sClassStyle;
-			this._reapplyStyles();
-		}
-	};
-
-	GridBoxLayoutStyleHelper._getStyleHelper = function () {
-		var oHelper = document.getElementById("sapUiLayoutCSSGridGridBoxLayoutStyleHelper");
-		if (!oHelper) {
-			oHelper = document.createElement("style");
-			oHelper.id = "sapUiLayoutCSSGridGridBoxLayoutStyleHelper";
-			document.head.appendChild(oHelper);
-		}
-
-		return oHelper;
-	};
-
-	GridBoxLayoutStyleHelper._reapplyStyles = function () {
-		var sStyle = "",
-			oHelper = this._getStyleHelper();
-
-		for (var sKey in this._mInstanceStyles) {
-			sStyle += this._mInstanceStyles[sKey] + "\n";
-		}
-
-		oHelper.innerHTML = sStyle;
-	};
-
-	return GridBoxLayoutStyleHelper;
-});