@openui5/sap.ui.layout 1.134.0 → 1.135.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/THIRDPARTY.txt +2 -2
- package/package.json +2 -2
- package/src/sap/ui/layout/.library +1 -1
- package/src/sap/ui/layout/AlignedFlowLayout.js +1 -1
- package/src/sap/ui/layout/AssociativeSplitter.js +1 -1
- package/src/sap/ui/layout/BlockLayout.js +1 -1
- package/src/sap/ui/layout/BlockLayoutCell.js +1 -1
- package/src/sap/ui/layout/BlockLayoutCellData.js +1 -1
- package/src/sap/ui/layout/BlockLayoutRow.js +1 -1
- package/src/sap/ui/layout/DynamicSideContent.js +1 -1
- package/src/sap/ui/layout/FixFlex.js +1 -1
- package/src/sap/ui/layout/Grid.js +1 -1
- package/src/sap/ui/layout/GridData.js +1 -1
- package/src/sap/ui/layout/GridRenderer.js +1 -1
- package/src/sap/ui/layout/HorizontalLayout.js +1 -1
- package/src/sap/ui/layout/PaneContainer.js +1 -1
- package/src/sap/ui/layout/ResponsiveFlowLayout.js +1 -1
- package/src/sap/ui/layout/ResponsiveFlowLayoutData.js +1 -1
- package/src/sap/ui/layout/ResponsiveSplitter.js +1 -1
- package/src/sap/ui/layout/ResponsiveSplitterPage.js +1 -1
- package/src/sap/ui/layout/SplitPane.js +1 -1
- package/src/sap/ui/layout/Splitter.js +1 -1
- package/src/sap/ui/layout/SplitterLayoutData.js +1 -1
- package/src/sap/ui/layout/VerticalLayout.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddFormContainer.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddFormField.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddSimpleFormField.js +1 -1
- package/src/sap/ui/layout/changeHandler/AddSimpleFormGroup.js +1 -1
- package/src/sap/ui/layout/changeHandler/HideSimpleForm.js +1 -1
- package/src/sap/ui/layout/changeHandler/MoveSimpleForm.js +1 -1
- package/src/sap/ui/layout/changeHandler/RenameFormContainer.js +1 -1
- package/src/sap/ui/layout/changeHandler/RenameSimpleForm.js +1 -1
- package/src/sap/ui/layout/changeHandler/UnhideSimpleForm.js +1 -1
- package/src/sap/ui/layout/cssgrid/CSSGrid.js +2 -2
- package/src/sap/ui/layout/cssgrid/GridBasicLayout.js +2 -2
- package/src/sap/ui/layout/cssgrid/GridBoxLayout.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridItemLayoutData.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridLayoutBase.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridLayoutDelegate.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridResponsiveLayout.js +1 -1
- package/src/sap/ui/layout/cssgrid/GridSettings.js +2 -2
- package/src/sap/ui/layout/cssgrid/ResponsiveColumnItemLayoutData.js +1 -1
- package/src/sap/ui/layout/cssgrid/ResponsiveColumnLayout.js +1 -1
- package/src/sap/ui/layout/designtime/messagebundle_fr_CA.properties +1 -1
- package/src/sap/ui/layout/form/ColumnContainerData.js +1 -1
- package/src/sap/ui/layout/form/ColumnElementData.js +1 -1
- package/src/sap/ui/layout/form/ColumnLayout.js +7 -1
- package/src/sap/ui/layout/form/ColumnLayoutRenderer.js +40 -17
- package/src/sap/ui/layout/form/Form.js +4 -2
- package/src/sap/ui/layout/form/FormContainer.js +1 -1
- package/src/sap/ui/layout/form/FormElement.js +1 -1
- package/src/sap/ui/layout/form/FormLayout.js +15 -2
- package/src/sap/ui/layout/form/FormLayoutRenderer.js +35 -22
- package/src/sap/ui/layout/form/FormRenderer.js +3 -18
- package/src/sap/ui/layout/form/GridContainerData.js +1 -1
- package/src/sap/ui/layout/form/GridElementData.js +1 -1
- package/src/sap/ui/layout/form/GridLayout.js +1 -1
- package/src/sap/ui/layout/form/ResponsiveGridLayout.js +2 -2
- package/src/sap/ui/layout/form/ResponsiveLayout.js +2 -2
- package/src/sap/ui/layout/form/SemanticFormElement.js +1 -1
- package/src/sap/ui/layout/form/SimpleForm.js +5 -1
- package/src/sap/ui/layout/form/SimpleFormRenderer.js +3 -1
- package/src/sap/ui/layout/library.js +3 -2
- package/src/sap/ui/layout/themes/base/ColumnLayout.less +5 -4
package/THIRDPARTY.txt
CHANGED
|
@@ -6,7 +6,7 @@ The full text of all referenced licenses is appended at the end of this file.
|
|
|
6
6
|
|
|
7
7
|
Library: sap.m:
|
|
8
8
|
|
|
9
|
-
Component: purify.js, version: 3.
|
|
9
|
+
Component: purify.js, version: 3.2.4
|
|
10
10
|
Copyright: Mario Heiderich
|
|
11
11
|
License: Apache-2.0
|
|
12
12
|
License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
|
|
@@ -462,7 +462,7 @@ License: Apache-2.0
|
|
|
462
462
|
License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
|
|
463
463
|
Contained in: lib/jsdoc/ui5/plugin.js
|
|
464
464
|
|
|
465
|
-
Component: SAP Theming Base Content, version: 11.
|
|
465
|
+
Component: SAP Theming Base Content, version: 11.28.2
|
|
466
466
|
Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
|
|
467
467
|
License: Apache-2.0
|
|
468
468
|
License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openui5/sap.ui.layout",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.135.0",
|
|
4
4
|
"description": "OpenUI5 UI Library sap.ui.layout",
|
|
5
5
|
"author": "SAP SE (https://www.sap.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -14,6 +14,6 @@
|
|
|
14
14
|
"url": "https://github.com/SAP/openui5.git"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@openui5/sap.ui.core": "1.
|
|
17
|
+
"@openui5/sap.ui.core": "1.135.0"
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<copyright>OpenUI5
|
|
7
7
|
* (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
|
|
8
8
|
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
|
|
9
|
-
<version>1.
|
|
9
|
+
<version>1.135.0</version>
|
|
10
10
|
|
|
11
11
|
<documentation>SAPUI5 library with layout controls.</documentation>
|
|
12
12
|
|
|
@@ -96,7 +96,7 @@ sap.ui.define([
|
|
|
96
96
|
* @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout MDN web docs: CSS Grid Layout}
|
|
97
97
|
*
|
|
98
98
|
* @author SAP SE
|
|
99
|
-
* @version 1.
|
|
99
|
+
* @version 1.135.0
|
|
100
100
|
*
|
|
101
101
|
* @extends sap.ui.core.Control
|
|
102
102
|
* @implements sap.ui.layout.cssgrid.IGridConfigurable
|
|
@@ -142,7 +142,7 @@ sap.ui.define([
|
|
|
142
142
|
* Sets the value for the CSS display:grid property {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap MDN web docs: grid-gap}
|
|
143
143
|
* It is a shorthand for gridRowGap and gridColumnGap. If some of them is set, the gridGap value will have less priority and will be overwritten.
|
|
144
144
|
*/
|
|
145
|
-
gridGap: { type: "sap.ui.
|
|
145
|
+
gridGap: { type: "sap.ui.core.CSSGapShortHand", defaultValue: "" },
|
|
146
146
|
|
|
147
147
|
/**
|
|
148
148
|
* Sets the value for the CSS display:grid property {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows MDN web docs: grid-auto-rows}
|
|
@@ -21,7 +21,7 @@ sap.ui.define([
|
|
|
21
21
|
* Applies a sap.ui.layout.cssgrid.GridSettings to a provided DOM element or Control.
|
|
22
22
|
*
|
|
23
23
|
* @author SAP SE
|
|
24
|
-
* @version 1.
|
|
24
|
+
* @version 1.135.0
|
|
25
25
|
*
|
|
26
26
|
* @extends sap.ui.layout.cssgrid.GridLayoutBase
|
|
27
27
|
*
|
|
@@ -58,7 +58,7 @@ sap.ui.define([
|
|
|
58
58
|
/**
|
|
59
59
|
* Sets the value for the CSS display:grid property {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap MDN web docs: grid-gap}
|
|
60
60
|
*/
|
|
61
|
-
gridGap: { type: "sap.ui.
|
|
61
|
+
gridGap: { type: "sap.ui.core.CSSGapShortHand", defaultValue: "" },
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
64
|
* Sets the value for the CSS display:grid property {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows MDN web docs: grid-auto-rows}
|
|
@@ -22,7 +22,7 @@ sap.ui.define([
|
|
|
22
22
|
* Have to possibility to hold multiple sap.ui.layout.cssgrid.GridSettings and apply the currently active GridSettings.
|
|
23
23
|
*
|
|
24
24
|
* @author SAP SE
|
|
25
|
-
* @version 1.
|
|
25
|
+
* @version 1.135.0
|
|
26
26
|
*
|
|
27
27
|
* @extends sap.ui.layout.cssgrid.GridLayoutBase
|
|
28
28
|
*
|
|
@@ -20,7 +20,7 @@ sap.ui.define([
|
|
|
20
20
|
* Holds a set of CSS display:grid properties
|
|
21
21
|
*
|
|
22
22
|
* @author SAP SE
|
|
23
|
-
* @version 1.
|
|
23
|
+
* @version 1.135.0
|
|
24
24
|
*
|
|
25
25
|
* @extends sap.ui.base.ManagedObject
|
|
26
26
|
*
|
|
@@ -57,7 +57,7 @@ sap.ui.define([
|
|
|
57
57
|
/**
|
|
58
58
|
* Sets the value for the CSS display:grid property {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap MDN web docs: grid-gap}
|
|
59
59
|
*/
|
|
60
|
-
gridGap: { type: "sap.ui.
|
|
60
|
+
gridGap: { type: "sap.ui.core.CSSGapShortHand", defaultValue: "" },
|
|
61
61
|
|
|
62
62
|
/**
|
|
63
63
|
* Sets the value for the CSS display:grid property {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows MDN web docs: grid-auto-rows}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
MSG_REMOVING_TOOLBAR=La zone d'en-t\u00EAte de ce groupe contient des \u00E9l\u00E9ments suppl\u00E9mentaires. Si vous
|
|
2
|
+
MSG_REMOVING_TOOLBAR=La zone d'en-t\u00EAte de ce groupe contient des \u00E9l\u00E9ments suppl\u00E9mentaires. Si vous retirez le groupe, ces \u00E9l\u00E9ments seront perdus. Voulez-vous quand m\u00EAme retirer le groupe?
|
|
3
3
|
|
|
4
4
|
GROUP_CONTROL_NAME=Groupe
|
|
5
5
|
GROUP_CONTROL_NAME_PLURAL=Groupes
|
|
@@ -60,7 +60,7 @@ sap.ui.define([
|
|
|
60
60
|
* This control cannot be used stand-alone, it just renders a {@link sap.ui.layout.form.Form Form} control,
|
|
61
61
|
* so it must be assigned to a {@link sap.ui.layout.form.Form Form} control using the <code>layout</code> aggregation.
|
|
62
62
|
* @extends sap.ui.layout.form.FormLayout
|
|
63
|
-
* @version 1.
|
|
63
|
+
* @version 1.135.0
|
|
64
64
|
*
|
|
65
65
|
* @constructor
|
|
66
66
|
* @public
|
|
@@ -697,6 +697,12 @@ sap.ui.define([
|
|
|
697
697
|
|
|
698
698
|
};
|
|
699
699
|
|
|
700
|
+
ColumnLayout.prototype.invalidateEditableChange = function() {
|
|
701
|
+
|
|
702
|
+
return true; // display-mode renders <dl>
|
|
703
|
+
|
|
704
|
+
};
|
|
705
|
+
|
|
700
706
|
return ColumnLayout;
|
|
701
707
|
|
|
702
708
|
});
|
|
@@ -63,6 +63,8 @@ sap.ui.define([
|
|
|
63
63
|
var oToolbar = oContainer.getToolbar();
|
|
64
64
|
var oTitle = oContainer.getTitle();
|
|
65
65
|
var oOptions = oLayout._getContainerSize(oContainer);
|
|
66
|
+
const bEditable = oContainer.getProperty("_editable");
|
|
67
|
+
const sContentNode = bEditable ? "div" : "dl";
|
|
66
68
|
|
|
67
69
|
oContainer._checkProperties();
|
|
68
70
|
|
|
@@ -109,17 +111,31 @@ sap.ui.define([
|
|
|
109
111
|
oRm.attr('title', oContainer.getTooltip_AsString());
|
|
110
112
|
}
|
|
111
113
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
114
|
+
if (bEditable || bExpandable || oToolbar) {
|
|
115
|
+
// in display mode render accessibility attributes on content-node. If expandable or toolbar in disply mode, role "region" is needed to annonce region if focus goes to button or inside toolbar
|
|
116
|
+
const oForm = oContainer.getParent();
|
|
117
|
+
let sRole = "form";
|
|
118
|
+
|
|
119
|
+
if (bEditable && !oLayout.isContainerLabelled(oContainer) && oForm.getFormContainers().length === 1) {
|
|
120
|
+
sRole = ""; // Container has no title and is only one container, no role needed as set on Form-level
|
|
121
|
+
} else if (!bEditable && (bExpandable || oToolbar)) {
|
|
122
|
+
sRole = "region"; // to announce region if Expander is focused or focus moves inside Toolbar
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// In edit mode let every container render role, even without title (expect there is only one container). So screenreader also announces forms structure. (Was not possible for some older layouts.)
|
|
126
|
+
this.writeAccessibilityStateContainer(oRm, oContainer, sRole);
|
|
127
|
+
}
|
|
115
128
|
|
|
116
129
|
oRm.openEnd();
|
|
117
130
|
|
|
118
131
|
this.renderHeader(oRm, oToolbar, oTitle, oContainer._oExpandButton, bExpandable, oLayout._sFormSubTitleSize, oContainer.getId());
|
|
119
132
|
|
|
120
|
-
oRm.openStart(
|
|
121
|
-
.class("sapUiFormCLContainerCont")
|
|
122
|
-
|
|
133
|
+
oRm.openStart(sContentNode, oContainer.getId() + "-content")
|
|
134
|
+
.class("sapUiFormCLContainerCont");
|
|
135
|
+
if (!bEditable && !bExpandable && !oToolbar) {
|
|
136
|
+
this.writeAccessibilityStateContainer(oRm, oContainer, ""); // no role needed on <dl>
|
|
137
|
+
}
|
|
138
|
+
oRm.openEnd();
|
|
123
139
|
|
|
124
140
|
var aElements = oContainer.getVisibleFormElements();
|
|
125
141
|
for (var i = 0; i < aElements.length; i++) {
|
|
@@ -138,8 +154,8 @@ sap.ui.define([
|
|
|
138
154
|
}
|
|
139
155
|
}
|
|
140
156
|
|
|
141
|
-
oRm.close(
|
|
142
|
-
oRm.close("div");
|
|
157
|
+
oRm.close(sContentNode); // Container content
|
|
158
|
+
oRm.close("div"); // Container
|
|
143
159
|
|
|
144
160
|
};
|
|
145
161
|
|
|
@@ -147,6 +163,8 @@ sap.ui.define([
|
|
|
147
163
|
|
|
148
164
|
var oLabel = oElement.getLabelControl();
|
|
149
165
|
var oOptions;
|
|
166
|
+
const bEditable = oElement.getProperty("_editable");
|
|
167
|
+
const sFieldsNode = bEditable ? "div" : "dd";
|
|
150
168
|
|
|
151
169
|
oRm.openStart("div", oElement);
|
|
152
170
|
oRm.class("sapUiFormCLElement");
|
|
@@ -157,7 +175,7 @@ sap.ui.define([
|
|
|
157
175
|
|
|
158
176
|
if (oLabel) {
|
|
159
177
|
oOptions = oLayout._getFieldSize(oLabel);
|
|
160
|
-
_renderLabel(oRm, oLabel, oOptions);
|
|
178
|
+
_renderLabel(oRm, oElement, oLabel, oOptions);
|
|
161
179
|
}
|
|
162
180
|
|
|
163
181
|
var aFields = oElement.getFieldsForRendering();
|
|
@@ -168,7 +186,7 @@ sap.ui.define([
|
|
|
168
186
|
throw new Error(oField + " is not a valid Form content! Only use valid content in " + oLayout);
|
|
169
187
|
}
|
|
170
188
|
oOptions = oLayout._getFieldSize(oField);
|
|
171
|
-
oRm.openStart(
|
|
189
|
+
oRm.openStart(sFieldsNode);
|
|
172
190
|
oRm.class("sapUiFormCLCellsS" + oOptions.S.Size);
|
|
173
191
|
oRm.class("sapUiFormCLCellsL" + oOptions.L.Size);
|
|
174
192
|
if (oOptions.S.Break) {
|
|
@@ -187,7 +205,7 @@ sap.ui.define([
|
|
|
187
205
|
|
|
188
206
|
oRm.renderControl(oField);
|
|
189
207
|
|
|
190
|
-
oRm.close(
|
|
208
|
+
oRm.close(sFieldsNode);
|
|
191
209
|
}
|
|
192
210
|
}
|
|
193
211
|
oRm.close("div");
|
|
@@ -201,6 +219,8 @@ sap.ui.define([
|
|
|
201
219
|
var iColumns = 12;
|
|
202
220
|
var iSizeS = iColumns;
|
|
203
221
|
var iSizeL = iColumns;
|
|
222
|
+
const bEditable = oElement.getProperty("_editable");
|
|
223
|
+
const sFieldsNode = bEditable ? "div" : "dd";
|
|
204
224
|
|
|
205
225
|
oRm.openStart("div", oElement);
|
|
206
226
|
oRm.class("sapUiFormCLElement").class("sapUiFormCLSemanticElement");
|
|
@@ -211,7 +231,7 @@ sap.ui.define([
|
|
|
211
231
|
|
|
212
232
|
if (oLabel) {
|
|
213
233
|
oOptions = oLayout._getFieldSize(oLabel);
|
|
214
|
-
_renderLabel(oRm, oLabel, oOptions);
|
|
234
|
+
_renderLabel(oRm, oElement, oLabel, oOptions);
|
|
215
235
|
if (oOptions.S.Size < iSizeS) {
|
|
216
236
|
iSizeS = iSizeS - oOptions.S.Size;
|
|
217
237
|
}
|
|
@@ -220,7 +240,7 @@ sap.ui.define([
|
|
|
220
240
|
}
|
|
221
241
|
}
|
|
222
242
|
|
|
223
|
-
oRm.openStart(
|
|
243
|
+
oRm.openStart(sFieldsNode);
|
|
224
244
|
oRm.class("sapUiFormCLCellsS" + iSizeS);
|
|
225
245
|
oRm.class("sapUiFormCLCellsL" + iSizeL);
|
|
226
246
|
oRm.openEnd();
|
|
@@ -236,14 +256,17 @@ sap.ui.define([
|
|
|
236
256
|
}
|
|
237
257
|
}
|
|
238
258
|
|
|
239
|
-
oRm.close(
|
|
259
|
+
oRm.close(sFieldsNode);
|
|
240
260
|
oRm.close("div");
|
|
241
261
|
|
|
242
262
|
};
|
|
243
263
|
|
|
244
|
-
function _renderLabel(oRm, oLabel, oOptions) {
|
|
264
|
+
function _renderLabel(oRm, oElement, oLabel, oOptions) {
|
|
265
|
+
|
|
266
|
+
const bEditable = oElement.getProperty("_editable");
|
|
267
|
+
const sLabelNode = bEditable ? "div" : "dt";
|
|
245
268
|
|
|
246
|
-
oRm.openStart(
|
|
269
|
+
oRm.openStart(sLabelNode)
|
|
247
270
|
.class("sapUiFormElementLbl")
|
|
248
271
|
.class("sapUiFormCLCellsS" + oOptions.S.Size)
|
|
249
272
|
.class("sapUiFormCLCellsL" + oOptions.L.Size)
|
|
@@ -251,7 +274,7 @@ sap.ui.define([
|
|
|
251
274
|
|
|
252
275
|
oRm.renderControl(oLabel);
|
|
253
276
|
|
|
254
|
-
oRm.close(
|
|
277
|
+
oRm.close(sLabelNode);
|
|
255
278
|
|
|
256
279
|
}
|
|
257
280
|
|
|
@@ -44,7 +44,7 @@ sap.ui.define([
|
|
|
44
44
|
* @extends sap.ui.core.Control
|
|
45
45
|
*
|
|
46
46
|
* @author SAP SE
|
|
47
|
-
* @version 1.
|
|
47
|
+
* @version 1.135.0
|
|
48
48
|
*
|
|
49
49
|
* @constructor
|
|
50
50
|
* @public
|
|
@@ -199,7 +199,9 @@ sap.ui.define([
|
|
|
199
199
|
|
|
200
200
|
Form.prototype.setEditable = function(bEditable) {
|
|
201
201
|
|
|
202
|
-
this.
|
|
202
|
+
const oLayout = this.getLayout();
|
|
203
|
+
const bSuppressInvalidate = !oLayout?.invalidateEditableChange();
|
|
204
|
+
this.setProperty("editable", bEditable, bSuppressInvalidate);
|
|
203
205
|
|
|
204
206
|
return this;
|
|
205
207
|
|
|
@@ -37,7 +37,7 @@ sap.ui.define([
|
|
|
37
37
|
* @extends sap.ui.core.Control
|
|
38
38
|
*
|
|
39
39
|
* @author SAP SE
|
|
40
|
-
* @version 1.
|
|
40
|
+
* @version 1.135.0
|
|
41
41
|
*
|
|
42
42
|
* @constructor
|
|
43
43
|
* @public
|
|
@@ -1056,7 +1056,7 @@ sap.ui.define([
|
|
|
1056
1056
|
* This is used to determine the role for screenreader support
|
|
1057
1057
|
*
|
|
1058
1058
|
* @param {sap.ui.layout.form.FormContainer} oContainer FormContainer
|
|
1059
|
-
* @return {boolean} <code>true</code> if the
|
|
1059
|
+
* @return {boolean} <code>true</code> if the <code>FormContainer</code> is labelled
|
|
1060
1060
|
* @private
|
|
1061
1061
|
* @since: 1.126.0
|
|
1062
1062
|
*/
|
|
@@ -1066,6 +1066,19 @@ sap.ui.define([
|
|
|
1066
1066
|
|
|
1067
1067
|
};
|
|
1068
1068
|
|
|
1069
|
+
/**
|
|
1070
|
+
* Defines if the rendering of the layout depends on the <code>editable</code> property.
|
|
1071
|
+
*
|
|
1072
|
+
* @return {boolean} <code>true</code> if the switching <code>editable</code> must trigger re-rendering
|
|
1073
|
+
* @private
|
|
1074
|
+
* @since: 1.135.0
|
|
1075
|
+
*/
|
|
1076
|
+
FormLayout.prototype.invalidateEditableChange = function() {
|
|
1077
|
+
|
|
1078
|
+
return false;
|
|
1079
|
+
|
|
1080
|
+
};
|
|
1081
|
+
|
|
1069
1082
|
return FormLayout;
|
|
1070
1083
|
|
|
1071
1084
|
});
|
|
@@ -110,7 +110,7 @@ sap.ui.define([
|
|
|
110
110
|
rm.attr('title', oContainer.getTooltip_AsString());
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
this.writeAccessibilityStateContainer(rm, oContainer,
|
|
113
|
+
this.writeAccessibilityStateContainer(rm, oContainer, oLayout.isContainerLabelled(oContainer) ? "form" : "");
|
|
114
114
|
|
|
115
115
|
rm.openEnd();
|
|
116
116
|
|
|
@@ -200,10 +200,9 @@ sap.ui.define([
|
|
|
200
200
|
const bRenderExpander = bExpander && oExpandButton;
|
|
201
201
|
|
|
202
202
|
if (bRenderExpander) {
|
|
203
|
-
// if expander is
|
|
203
|
+
// if expander is rendered put a DIV around expander and title. (If expander inside title the screenreader announcement is somehow strange.)
|
|
204
204
|
rm.openStart("div", sContentId + "--head");
|
|
205
205
|
rm.class("sapUiFormTitle");
|
|
206
|
-
// rm.class("sapUiFormTitle" + sLevel);
|
|
207
206
|
rm.class("sapUiFormTitleExpandable");
|
|
208
207
|
rm.openEnd();
|
|
209
208
|
rm.renderControl(oExpandButton);
|
|
@@ -286,38 +285,52 @@ sap.ui.define([
|
|
|
286
285
|
|
|
287
286
|
};
|
|
288
287
|
|
|
289
|
-
|
|
288
|
+
/**
|
|
290
289
|
* Writes the accessibility attributes for FormContainers.
|
|
291
|
-
* @param {sap.ui.core.RenderManager} rm
|
|
292
|
-
* @param {sap.ui.layout.form.FormContainer} oContainer
|
|
293
|
-
* @param {
|
|
290
|
+
* @param {sap.ui.core.RenderManager} rm the RenderManager that can be used for writing to the Render-Output-Buffer
|
|
291
|
+
* @param {sap.ui.layout.form.FormContainer} oContainer <code>FormContainer</code> to write accessibility attributes
|
|
292
|
+
* @param {string} sRole if set the given role is rendered, if no role given the DOM node needs no role (e.g. Container has no title)
|
|
294
293
|
*/
|
|
295
|
-
FormLayoutRenderer.writeAccessibilityStateContainer = function(rm, oContainer,
|
|
294
|
+
FormLayoutRenderer.writeAccessibilityStateContainer = function(rm, oContainer, sRole){
|
|
296
295
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
296
|
+
const mAriaProps = {};
|
|
297
|
+
const sTitleID = this.getTitleId(oContainer);
|
|
298
|
+
if (sTitleID) {
|
|
299
|
+
mAriaProps["labelledby"] = {value: sTitleID, append: true};
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
if (sRole) {
|
|
303
|
+
mAriaProps["role"] = sRole;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
rm.accessibilityState(oContainer, mAriaProps);
|
|
307
|
+
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
/**
|
|
311
|
+
* Determines the ID if the title of Form or Container used for aria-labelledby
|
|
312
|
+
* @param {sap.ui.layout.form.Form|sap.ui.layout.form.FormContainer} oContainer <code>Form</code> or <code>FormContainer</code> to determine the ID of it's title
|
|
313
|
+
* @returns {string} title ID
|
|
314
|
+
*/
|
|
315
|
+
FormLayoutRenderer.getTitleId = function(oContainer){
|
|
316
|
+
|
|
317
|
+
const oTitle = oContainer.getTitle();
|
|
318
|
+
const oToolbar = oContainer.getToolbar();
|
|
319
|
+
let sID = "";
|
|
300
320
|
if (oToolbar) {
|
|
301
321
|
if (!oContainer.getAriaLabelledBy() || oContainer.getAriaLabelledBy().length == 0) {
|
|
302
322
|
// no aria-label -> use Title of Toolbar
|
|
303
|
-
|
|
304
|
-
mAriaProps["labelledby"] = {value: sToolbarTitleID, append: true};
|
|
323
|
+
sID = FormHelper.getToolbarTitle(oToolbar); // FormHelper must already be initialized by FormLayout
|
|
305
324
|
}
|
|
306
325
|
} else if (oTitle) {
|
|
307
|
-
var sId = "";
|
|
308
326
|
if (typeof oTitle == "string") {
|
|
309
|
-
|
|
327
|
+
sID = oContainer.getId() + "--title";
|
|
310
328
|
} else {
|
|
311
|
-
|
|
329
|
+
sID = oTitle.getId();
|
|
312
330
|
}
|
|
313
|
-
mAriaProps["labelledby"] = {value: sId, append: true};
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
if (!bNoRole) {
|
|
317
|
-
mAriaProps["role"] = "form";
|
|
318
331
|
}
|
|
319
332
|
|
|
320
|
-
|
|
333
|
+
return sID;
|
|
321
334
|
|
|
322
335
|
};
|
|
323
336
|
|
|
@@ -65,24 +65,9 @@ sap.ui.define([
|
|
|
65
65
|
rm.attr('title', oForm.getTooltip_AsString());
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
if (!oForm.getAriaLabelledBy() || oForm.getAriaLabelledBy().length == 0) {
|
|
72
|
-
// no aria-label -> use Title of Toolbar
|
|
73
|
-
var sToolbarTitleID = FormHelper.getToolbarTitle(oToolbar); // FormHelper must already be initialized by Form
|
|
74
|
-
mAriaProps["labelledby"] = sToolbarTitleID;
|
|
75
|
-
}
|
|
76
|
-
} else if (oTitle) {
|
|
77
|
-
var sId = "";
|
|
78
|
-
if (typeof oTitle == "string") {
|
|
79
|
-
sId = oForm.getId() + "--title";
|
|
80
|
-
} else {
|
|
81
|
-
sId = oTitle.getId();
|
|
82
|
-
}
|
|
83
|
-
mAriaProps["labelledby"] = {value: sId, append: true};
|
|
84
|
-
} else if (oForm._sSuggestedTitleId) {
|
|
85
|
-
mAriaProps["labelledby"] = {value: oForm._sSuggestedTitleId, append: true};
|
|
68
|
+
const sTitleID = oLayout?.getRenderer().getTitleId(oForm) || oForm._sSuggestedTitleId;
|
|
69
|
+
if (sTitleID) {
|
|
70
|
+
mAriaProps["labelledby"] = {value: sTitleID, append: true};
|
|
86
71
|
}
|
|
87
72
|
|
|
88
73
|
rm.accessibilityState(oForm, mAriaProps);
|
|
@@ -55,7 +55,7 @@ sap.ui.define([
|
|
|
55
55
|
*
|
|
56
56
|
* This control cannot be used stand-alone, it just renders a {@link sap.ui.layout.form.Form Form}, so it must be assigned to a {@link sap.ui.layout.form.Form Form} using the <code>layout</code> aggregation.
|
|
57
57
|
* @extends sap.ui.layout.form.FormLayout
|
|
58
|
-
* @version 1.
|
|
58
|
+
* @version 1.135.0
|
|
59
59
|
*
|
|
60
60
|
* @constructor
|
|
61
61
|
* @public
|
|
@@ -289,7 +289,7 @@ sap.ui.define([
|
|
|
289
289
|
oRm.attr('title', sTooltip);
|
|
290
290
|
}
|
|
291
291
|
|
|
292
|
-
oLayout.getRenderer().writeAccessibilityStateContainer(oRm, oContainer,
|
|
292
|
+
oLayout.getRenderer().writeAccessibilityStateContainer(oRm, oContainer, "form"); // if Container-Panel used render always a role
|
|
293
293
|
|
|
294
294
|
oRm.openEnd();
|
|
295
295
|
|
|
@@ -52,7 +52,7 @@ sap.ui.define([
|
|
|
52
52
|
* @extends sap.ui.layout.form.FormLayout
|
|
53
53
|
*
|
|
54
54
|
* @author SAP SE
|
|
55
|
-
* @version 1.
|
|
55
|
+
* @version 1.135.0
|
|
56
56
|
*
|
|
57
57
|
* @constructor
|
|
58
58
|
* @public
|
|
@@ -186,7 +186,7 @@ sap.ui.define([
|
|
|
186
186
|
oRm.attr('title', sTooltip);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
-
oLayout.getRenderer().writeAccessibilityStateContainer(oRm, oContainer,
|
|
189
|
+
oLayout.getRenderer().writeAccessibilityStateContainer(oRm, oContainer, "form"); // if Container-Panel used render always a role
|
|
190
190
|
|
|
191
191
|
oRm.openEnd();
|
|
192
192
|
|
|
@@ -69,7 +69,7 @@ sap.ui.define([
|
|
|
69
69
|
* <b>Note:</b> If a more complex form is needed, use the <code>{@link sap.ui.layout.form.Form Form}</code> control instead.
|
|
70
70
|
*
|
|
71
71
|
* @extends sap.ui.core.Control
|
|
72
|
-
* @version 1.
|
|
72
|
+
* @version 1.135.0
|
|
73
73
|
*
|
|
74
74
|
* @constructor
|
|
75
75
|
* @public
|
|
@@ -1319,6 +1319,10 @@ sap.ui.define([
|
|
|
1319
1319
|
_addLayoutData.call(this);
|
|
1320
1320
|
if (this.getDomRef()) {
|
|
1321
1321
|
_updateLayout.call(this);
|
|
1322
|
+
var oForm = this.getAggregation("form");
|
|
1323
|
+
if (!oForm.getDomRef()) { // Form not rendered right now - invalidate to trigger rendering
|
|
1324
|
+
this.invalidate();
|
|
1325
|
+
}
|
|
1322
1326
|
}
|
|
1323
1327
|
}
|
|
1324
1328
|
|
|
@@ -33,7 +33,9 @@ sap.ui.define([],
|
|
|
33
33
|
.style("width", oControl.getWidth())
|
|
34
34
|
.openEnd(); // div element
|
|
35
35
|
var oForm = oControl.getAggregation("form");
|
|
36
|
-
|
|
36
|
+
if (oForm.getLayout()) { // render Form after Layout is loaded
|
|
37
|
+
oRm.renderControl(oForm);
|
|
38
|
+
}
|
|
37
39
|
oRm.close("div");
|
|
38
40
|
oControl._bChangedByMe = false;
|
|
39
41
|
|
|
@@ -21,14 +21,14 @@ sap.ui.define([
|
|
|
21
21
|
* @namespace
|
|
22
22
|
* @alias sap.ui.layout
|
|
23
23
|
* @author SAP SE
|
|
24
|
-
* @version 1.
|
|
24
|
+
* @version 1.135.0
|
|
25
25
|
* @since 1.15
|
|
26
26
|
* @public
|
|
27
27
|
*/
|
|
28
28
|
var thisLib = Library.init({
|
|
29
29
|
apiVersion: 2,
|
|
30
30
|
name : "sap.ui.layout",
|
|
31
|
-
version: "1.
|
|
31
|
+
version: "1.135.0",
|
|
32
32
|
dependencies: ["sap.ui.core"],
|
|
33
33
|
designtime: "sap/ui/layout/designtime/library.designtime",
|
|
34
34
|
types: [
|
|
@@ -831,6 +831,7 @@ sap.ui.define([
|
|
|
831
831
|
* @since 1.60.0
|
|
832
832
|
* @extends sap.ui.core.CSSSizeShortHand
|
|
833
833
|
* @public
|
|
834
|
+
* @deprecated since 1.135 use {@link sap.ui.core.CSSGapShortHand} instead
|
|
834
835
|
* @namespace
|
|
835
836
|
* @final
|
|
836
837
|
*/
|
|
@@ -161,7 +161,7 @@ html.sap-phone .sapUiFormCL > .sapUiFormCLContent > .sapUiFormCLContainer:not(:l
|
|
|
161
161
|
visibility: hidden;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
.sapUiFormCLElement >
|
|
164
|
+
.sapUiFormCLElement > * {
|
|
165
165
|
float: left;
|
|
166
166
|
padding: 0 0.25rem;
|
|
167
167
|
box-sizing: border-box;
|
|
@@ -241,14 +241,15 @@ html[data-sap-ui-browser^="sf"] .sapUiFormEdit .sapUiFormCLElement {
|
|
|
241
241
|
|
|
242
242
|
/* display mode */
|
|
243
243
|
/* in display only mode add padding to controls as they don't have one */
|
|
244
|
-
.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement >
|
|
244
|
+
.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > *{
|
|
245
245
|
padding-top: 0.25rem;
|
|
246
246
|
padding-bottom: 0.25rem;
|
|
247
247
|
font-size: 1px; /* as browser adds some px to text to meet font-size */
|
|
248
|
+
margin: 0; /* As <dd> would add a margin */
|
|
248
249
|
}
|
|
249
250
|
|
|
250
|
-
.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement >
|
|
251
|
-
.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement >
|
|
251
|
+
.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > * .sapUiIcon:not(.sapMBtnIcon),
|
|
252
|
+
.sapUiForm:not(.sapUiFormEdit) .sapUiFormCLElement > * .sapMCbBg{
|
|
252
253
|
font-size: @sapUiFontSize; /* to set default font size on icons */
|
|
253
254
|
}
|
|
254
255
|
|