@sapui5/sap.ushell 1.116.0 → 1.117.0

package/src/main/js/sap/ushell/ui/launchpad/Section.js

@@ -3,54 +3,97 @@
 /**
  * @fileOverview Provides control sap.ushell.ui.launchpad.Section
  *
- * @version 1.116.0
+ * @version 1.117.0
  */
 sap.ui.define([
     "sap/base/Log",
     "sap/base/util/deepClone",
+    "sap/f/dnd/GridDropInfo",
+    "sap/f/GridContainer",
     "sap/f/GridContainerItemLayoutData",
+    "sap/f/GridContainerSettings",
+    "sap/m/Button",
+    "sap/m/Input",
+    "sap/m/Label",
     "sap/m/library",
+    "sap/m/Text",
+    "sap/m/Title",
+    "sap/m/ToolbarSpacer",
+    "sap/m/OverflowToolbar",
+    "sap/m/OverflowToolbarLayoutData",
+    "sap/ui/core/Control",
     "sap/ui/core/Core",
+    "sap/ui/core/CustomData",
+    "sap/ui/core/dnd/DragInfo",
+    "sap/ui/core/dnd/DropInfo",
     "sap/ui/core/InvisibleMessage",
     "sap/ui/core/library",
-    "sap/ui/core/XMLComposite",
     "sap/ui/events/KeyCodes",
     "sap/ui/model/Filter",
     "sap/ushell/resources",
     "sap/ushell/ui/launchpad/ExtendedChangeDetection",
     "sap/ushell/library",
-    "sap/f/dnd/GridDropInfo",
-    "sap/f/GridContainer",
     "sap/ushell/ui/launchpad/section/CompactArea",
-    "sap/ui/core/Element"
+    "sap/ui/core/Element",
+    "sap/ushell/ui/launchpad/SectionRenderer"
 ], function (
     Log,
     deepClone,
+    GridDropInfo,
+    GridContainer,
     GridContainerItemLayoutData,
+    GridContainerSettings,
+    Button,
+    Input,
+    Label,
     mobileLibrary,
+    Text,
+    Title,
+    ToolbarSpacer,
+    OverflowToolbar,
+    OverflowToolbarLayoutData,
+    Control,
     Core,
+    CustomData,
+    DragInfo,
+    DropInfo,
     InvisibleMessage,
     coreLibrary,
-    XMLComposite,
     KeyCodes,
     Filter,
     resources,
     ExtendedChangeDetection,
     ushellLibrary,
-    // XMLComposite dependencies
-    GridDropInfo,
-    GridContainer,
     CompactArea,
-    Element
+    Element,
+    SectionRenderer
 ) {
     "use strict";
 
+    // shortcut for sap.m.ButtonType
+    var ButtonType = mobileLibrary.ButtonType;
+
+    // shortcut for sap.m.OverflowToolbarPriority
+    var OverflowToolbarPriority = mobileLibrary.OverflowToolbarPriority;
+
     // shortcut for sap.m.TileSizeBehavior
     var TileSizeBehavior = mobileLibrary.TileSizeBehavior;
 
+    // shortcut for sap.ui.core.dnd.DropLayout
+    var DropLayout = coreLibrary.dnd.DropLayout;
+
+    // shortcut for sap.ui.core.dnd.DropPosition
+    var DropPosition = coreLibrary.dnd.DropPosition;
+
     // shortcut for sap.ui.core.InvisibleMessageMode
     var InvisibleMessageMode = coreLibrary.InvisibleMessageMode;
 
+    // shortcut for sap.ui.core.TextAlign
+    var TextAlign = coreLibrary.TextAlign;
+
+    // shortcut for sap.ui.core.TitleLevel
+    var TitleLevel = coreLibrary.TitleLevel;
+
     // shortcut for sap.ushell.DisplayFormat
     var DisplayFormat = ushellLibrary.DisplayFormat;
 
@@ -117,22 +160,17 @@ sap.ui.define([
      * @extends sap.ui.core.XMLComposite
      *
      * @author SAP SE
-     * @version 1.116.0
+     * @version 1.117.0
      *
      * @private
      * @alias sap.ushell.ui.launchpad.Section
      * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
      */
-    var Section = XMLComposite.extend("sap.ushell.ui.launchpad.Section", /** @lends sap.ushell.ui.launchpad.Section.prototype */ {
+    var Section = Control.extend("sap.ushell.ui.launchpad.Section", /** @lends sap.ushell.ui.launchpad.Section.prototype */ {
         metadata: {
             library: "sap.ushell",
             properties: {
 
-                /**
-                 * Specifies if the section should display in the edit mode.
-                 */
-                editable: { type: "boolean", group: "Misc", defaultValue: false },
-
                 /**
                  * Specifies the data-help-id attribute of the Section.
                  * If left empty, the attribute is not rendered.
@@ -151,6 +189,11 @@ sap.ui.define([
                  */
                 default: { type: "boolean", group: "Misc", defaultValue: false },
 
+                /**
+                 * Specifies if the section should display in the edit mode.
+                 */
+                editable: { type: "boolean", group: "Misc", defaultValue: false },
+
                 /**
                  * Specifies if the 'Add Visualization' button should be shown during editing of the section. (See editable property)
                  * The 'Add Visualization' button triggers the add event when it is pressed.
@@ -191,6 +234,26 @@ sap.ui.define([
                  */
                 enableVisualizationReordering: { type: "boolean", group: "Behavior", defaultValue: false },
 
+                /**
+                 * Specifies the default value for the grid container's gap property for different screen sizes
+                 */
+                gridContainerGap: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
+                gridContainerGapXS: { type: "string", group: "Appearance", defaultValue: "0.475rem" },
+                gridContainerGapS: { type: "string", group: "Appearance", defaultValue: "0.475rem" },
+                gridContainerGapM: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
+                gridContainerGapL: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
+                gridContainerGapXL: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
+
+                /**
+                 * Specifies the default value for the row size for different screen sizes
+                 */
+                gridContainerRowSize: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
+                gridContainerRowSizeXS: { type: "string", group: "Appearance", defaultValue: "4.375rem" },
+                gridContainerRowSizeS: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
+                gridContainerRowSizeM: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
+                gridContainerRowSizeL: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
+                gridContainerRowSizeXL: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
+
                 /**
                  * This text is displayed when the control contains no visualizations.
                  */
@@ -219,35 +282,7 @@ sap.ui.define([
                 /**
                  * Specifies the sizeBehavior of the grid.
                  */
-                sizeBehavior: { type: "sap.m.TileSizeBehavior", group: "Misc", defaultValue: TileSizeBehavior.Responsive },
-
-                 /**
-                 * Specifies the default value for the grid container's gap property for different screen sizes
-                 */
-                gridContainerGap: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
-                gridContainerGapXS: { type: "string", group: "Appearance", defaultValue: "0.475rem" },
-                gridContainerGapS: { type: "string", group: "Appearance", defaultValue: "0.475rem" },
-                gridContainerGapM: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
-                gridContainerGapL: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
-                gridContainerGapXL: { type: "string", group: "Appearance", defaultValue: "0.5rem" },
-
-                /**
-                 * Specifies the default value for the row size for different screen sizes
-                 */
-                gridContainerRowSize: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
-                gridContainerRowSizeXS: { type: "string", group: "Appearance", defaultValue: "4.375rem" },
-                gridContainerRowSizeS: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
-                gridContainerRowSizeM: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
-                gridContainerRowSizeL: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
-                gridContainerRowSizeXL: { type: "string", group: "Appearance", defaultValue: "5.25rem" },
-
-                /**
-                 * Specifies whether a drag operation with the mouse is happening.
-                 * This property is "bound" to the document dragstart / dragend event during initialization.
-                 * It should not be used in other places.
-                 * @private
-                 */
-                _duringDrag: { type: "boolean", group: "Behavior", defaultValue: false }
+                sizeBehavior: { type: "sap.m.TileSizeBehavior", group: "Misc", defaultValue: TileSizeBehavior.Responsive }
             },
             defaultAggregation: "visualizations",
             aggregations: {
@@ -271,7 +306,7 @@ sap.ui.define([
                     type: "sap.ui.core.Control",
                     multiple: true,
                     forwarding: {
-                        idSuffix: "--defaultArea",
+                        idSuffix: "-defaultArea",
                         aggregation: "items",
                         forwardBinding: false
                     },
@@ -285,7 +320,7 @@ sap.ui.define([
                     type: "sap.ui.core.Control",
                     multiple: true,
                     forwarding: {
-                        idSuffix: "--flatArea",
+                        idSuffix: "-flatArea",
                         aggregation: "items",
                         forwardBinding: false
                     },
@@ -299,11 +334,41 @@ sap.ui.define([
                     type: "sap.ui.core.Control",
                     multiple: true,
                     forwarding: {
-                        idSuffix: "--compactArea",
+                        idSuffix: "-compactArea",
                         aggregation: "items",
                         forwardBinding: false
                     },
                     dnd: true
+                },
+                _title: {
+                    type: "sap.m.Title",
+                    multiple: false,
+                    hidden: true
+                },
+                _header: {
+                    type: "sap.m.OverflowToolbar",
+                    multiple: false,
+                    hidden: true
+                },
+                _noVisualizationsText: {
+                    type: "sap.m.Text",
+                    multiple: false,
+                    hidden: true
+                },
+                _defaultArea: {
+                    type: "sap.f.GridContainer",
+                    multiple: false,
+                    hidden: true
+                },
+                _flatArea: {
+                    type: "sap.f.GridContainer",
+                    multiple: false,
+                    hidden: true
+                },
+                _compactArea: {
+                    type: "sap.ushell.ui.launchpad.section.CompactArea",
+                    multiple: false,
+                    hidden: true
                 }
             },
             events: {
@@ -404,6 +469,7 @@ sap.ui.define([
                 }
             }
         },
+        renderer: SectionRenderer,
         resourceModel: resources.i18nModel
     });
 
@@ -481,17 +547,17 @@ sap.ui.define([
 
             var oDefaultBinding = deepClone(oBindingInfo);
             oDefaultBinding.filters = getDefaultAreaFilter();
-            XMLComposite.prototype.bindAggregation.call(this, "defaultItems", oDefaultBinding);
+            Control.prototype.bindAggregation.call(this, "defaultItems", oDefaultBinding);
 
             var oFlatBinding = deepClone(oBindingInfo);
             oFlatBinding.filters = getFlatAreaFilter();
-            XMLComposite.prototype.bindAggregation.call(this, "flatItems", oFlatBinding);
+            Control.prototype.bindAggregation.call(this, "flatItems", oFlatBinding);
 
             var oLinkBinding = deepClone(oBindingInfo);
             oLinkBinding.filters = getCompactAreaFilter();
-            XMLComposite.prototype.bindAggregation.call(this, "compactItems", oLinkBinding);
+            Control.prototype.bindAggregation.call(this, "compactItems", oLinkBinding);
         } else {
-            XMLComposite.prototype.bindAggregation.call(this, sAggregationName, oBindingInfo);
+            Control.prototype.bindAggregation.call(this, sAggregationName, oBindingInfo);
         }
         return this;
     };
@@ -615,76 +681,43 @@ sap.ui.define([
 
     // Toggle the container visibility in case there are no visualizations in the section.
     Section.prototype.handleEmptyContentAreas = function () {
-        var bDefaultAreaHasItems = !!this.getDefaultItems().length,
-            bFlatAreaHasItems = !!this.getFlatItems().length,
-            bCompactAreaHasItems = !!this.getCompactItems().length,
-            bSectionEmpty = !bDefaultAreaHasItems && !bCompactAreaHasItems && !bFlatAreaHasItems;
-
-        this.oVBox.toggleStyleClass("sapUshellSectionNoVisualizations", bSectionEmpty);
-        this.oDefaultArea.toggleStyleClass("sapUshellSectionDefaultArea", bDefaultAreaHasItems);
-        this.oFlatArea.toggleStyleClass("sapUshellSectionFlatArea", bFlatAreaHasItems);
-
-        var oVBoxDomRef = this.oVBox.getDomRef && this.oVBox.getDomRef();
-        if (oVBoxDomRef && this.getEditable() && this.getShowNoVisualizationsText() && bSectionEmpty) {
-            oVBoxDomRef.setAttribute("aria-describedBy", this.byId("noVisualizationsText").getId());
-        } else if (oVBoxDomRef) {
-            oVBoxDomRef.removeAttribute("aria-describedBy");
+        var bDefaultAreaHasItems = !!this.getDefaultItems().length;
+        var bFlatAreaHasItems = !!this.getFlatItems().length;
+        var bCompactAreaHasItems = !!this.getCompactItems().length;
+        var bSectionEmpty = !bDefaultAreaHasItems && !bCompactAreaHasItems && !bFlatAreaHasItems;
+
+        this.toggleStyleClass("sapUshellSectionNoVisualizations", bSectionEmpty);
+        this.getAggregation("_defaultArea").toggleStyleClass("sapUshellSectionDefaultArea", bDefaultAreaHasItems);
+        this.getAggregation("_flatArea").toggleStyleClass("sapUshellSectionFlatArea", bFlatAreaHasItems);
+
+        var oDomRef = this.getDomRef();
+        if (oDomRef) {
+            if (this.getEditable() && this.getShowNoVisualizationsText() && bSectionEmpty) {
+                oDomRef.setAttribute("aria-describedBy", this.getAggregation("_noVisualizationsText").getId());
+            } else {
+                oDomRef.removeAttribute("aria-describedBy");
+            }
         }
     };
 
-
     Section.prototype.init = function () {
-        this.oVBox = this.byId("content");
-        this.oDefaultArea = this.byId("defaultArea");
-        this.oFlatArea = this.byId("flatArea");
-        this.oCompactArea = this.byId("compactArea");
-        this.oNoVisualizationsText = this.byId("noVisualizationsText");
-
-        this.oCompactArea.setVisible(true);
-
-        // TODO: clarify aria description for the links section.
-
-        var fnAdjustAriaLabelToTitleChange = function () {
-            var oVBoxDomRef = this.oVBox.getDomRef();
-            if (oVBoxDomRef) {
-                var sAriaLabel;
-                if (this.getTitle().trim()) {
-                    sAriaLabel = resources.i18n.getText("Section.Description", this.getTitle());
-                } else {
-                    sAriaLabel = resources.i18n.getText("Section.Description.EmptySectionTitle");
-                }
-                oVBoxDomRef.setAttribute("aria-label", sAriaLabel);
-            }
-        }.bind(this);
+        this.setAggregation("_title", new Title({
+            text: this.getTitle(),
+            level: TitleLevel.H3,
+            visible: !this.getEditable() && this.getShowSection()
+        }).addStyleClass("sapUshellSectionTitle sapContrastPlus"));
 
-        this.oVBox.addEventDelegate({
-            onBeforeRendering: function () {
-                this.byId("title-edit").detachChange(fnAdjustAriaLabelToTitleChange);
-            }.bind(this),
-            onAfterRendering: function () {
-                var oVBoxDomRef = this.oVBox.getDomRef();
-                if (this.getEditable()) {
-                    oVBoxDomRef.setAttribute("tabindex", "0");
-                }
-                fnAdjustAriaLabelToTitleChange();
-                oVBoxDomRef.setAttribute("role", "group");
-                this.byId("title-edit").attachChange(fnAdjustAriaLabelToTitleChange);
-            }.bind(this)
-        });
+        this._initHeaderAggregation();
 
-        this.oDefaultArea.addEventDelegate({
-            onAfterRendering: this.handleEmptyContentAreas.bind(this)
-        });
-        this.oFlatArea.addEventDelegate({
-            onAfterRendering: this.handleEmptyContentAreas.bind(this)
-        });
-        this.oCompactArea.addEventDelegate({
-            onAfterRendering: this.handleEmptyContentAreas.bind(this)
-        });
+        this.setAggregation("_noVisualizationsText", new Text({
+            text: this.getNoVisualizationsText(),
+            textAlign: TextAlign.Center,
+            visible: this.getEditable() && this.getShowNoVisualizationsText()
+        }).addStyleClass("sapUshellSectionNoVisualizationsText"));
 
-        this.oDefaultArea.attachBorderReached(this.onBorderReached.bind(this));
-        this.oFlatArea.attachBorderReached(this.onBorderReached.bind(this));
-        this.oCompactArea.attachBorderReached(this.onBorderReached.bind(this));
+        this._initGridContainerAggregation(); // defaultArea
+        this._initGridContainerAggregation(true); // flatArea
+        this._initCompactAreaAggregation(true); // compactArea
 
 
         this._oInvisibleMessageInstance = InvisibleMessage.getInstance();
@@ -695,76 +728,585 @@ sap.ui.define([
 
         // mouse DnD uses implicit Conversion
         this._fnGlobalDragStart = function () {
-            this.setProperty("_duringDrag", true);
+            var aFlatAreaDragDropConfig = this.getAggregation("_flatArea").getDragDropConfig();
+            var aCompactAreaDragDropConfig = this.getAggregation("_compactArea").getDragDropConfig();
+            aFlatAreaDragDropConfig[0].setGroupName("Section");
+            aFlatAreaDragDropConfig[1].setGroupName("Section");
+            aCompactAreaDragDropConfig[0].setGroupName("Section");
+            aCompactAreaDragDropConfig[1].setGroupName("Section");
+            aCompactAreaDragDropConfig[2].setGroupName("Section");
         }.bind(this);
 
         this._fnGlobalDragEnd = function () {
-            this.setProperty("_duringDrag", false);
+            var aFlatAreaDragDropConfig = this.getAggregation("_flatArea").getDragDropConfig();
+            var aCompactAreaDragDropConfig = this.getAggregation("_compactArea").getDragDropConfig();
+            aFlatAreaDragDropConfig[0].setGroupName("FlatArea");
+            aFlatAreaDragDropConfig[1].setGroupName("FlatArea");
+            aCompactAreaDragDropConfig[0].setGroupName("CompactArea");
+            aCompactAreaDragDropConfig[1].setGroupName("CompactArea");
+            aCompactAreaDragDropConfig[2].setGroupName("CompactArea");
         }.bind(this);
 
         document.addEventListener("dragstart", this._fnGlobalDragStart, false);
         document.addEventListener("dragend", this._fnGlobalDragEnd, false);
     };
 
-    Section.prototype.destroy = function () {
-        XMLComposite.prototype.destroy.apply(this, arguments);
-        this._oDefaultItemsChangeDetection.destroy();
-        this._oFlatItemsChangeDetection.destroy();
-        this._oCompactItemsChangeDetection.destroy();
+    Section.prototype._initHeaderAggregation = function () {
+        var sTitle = this.getTitle();
+        var bDefault = this.getDefault();
+
+        var oInput = new Input({
+            maxLength: 100,
+            placeholder: resources.i18n.getText("Section.TitlePlaceholder"),
+            value: sTitle,
+            valueLiveUpdate: true,
+            visible: !bDefault,
+            change: function (oEvent) {
+                this.setTitle(oEvent.getParameter("value"));
+                this.fireTitleChange();
+            }.bind(this),
+            layoutData: new OverflowToolbarLayoutData({
+                priority: OverflowToolbarPriority.NeverOverflow,
+                shrinkable: true,
+                minWidth: "10rem",
+                maxWidth: "40rem"
+            })
+        });
 
-        document.removeEventListener("dragstart", this._fnGlobalDragStart, false);
-        document.removeEventListener("dragend", this._fnGlobalDragEnd, false);
+        this.setAggregation("_header", new OverflowToolbar({
+            content: [
+                new Text({
+                    text: sTitle,
+                    visible: bDefault,
+                    layoutData: new OverflowToolbarLayoutData({
+                        priority: OverflowToolbarPriority.NeverOverflow
+                    })
+                }),
+                new Label({
+                    text: resources.i18n.getText("Section.Label.Title"),
+                    labelFor: oInput.getId(),
+                    showColon: true,
+                    visible: !bDefault,
+                    layoutData: new OverflowToolbarLayoutData({
+                        priority: OverflowToolbarPriority.NeverOverflow
+                    })
+                }),
+                oInput,
+                new ToolbarSpacer(),
+                new Button({
+                    text: resources.i18n.getText("Section.Button.AddVisualization"),
+                    type: ButtonType.Transparent,
+                    press: this.fireAdd.bind(this, { section: this }),
+                    visible: this.getEnableAddButton() && !bDefault
+                }),
+                new Button({
+                    text: this.getShowSection() ? resources.i18n.getText("Section.Button.Hide") : resources.i18n.getText("Section.Button.Show"),
+                    type: ButtonType.Transparent,
+                    press: function () {
+                        var bValue = !this.getShowSection();
+                        // temporary work around until sap.m.Button announces a label change to the user.
+                        var oMResources = Core.getLibraryResourceBundle("sap.m");
+                        this._oInvisibleMessageInstance.announce([
+                            resources.i18n.getText(bValue ? "Section.nowBeingShown" : "Section.nowBeingHidden"),
+                            resources.i18n.getText("Section.ButtonLabelChanged"),
+                            resources.i18n.getText(bValue ? "Section.Button.Hide" : "Section.Button.Show"),
+                            oMResources.getText("ACC_CTR_TYPE_BUTTON")
+                        ].join(" "), InvisibleMessageMode.Polite);
+
+                        this.setShowSection(bValue);
+                        this.fireSectionVisibilityChange({ visible: bValue });
+                    }.bind(this),
+                    visible: this.getEnableShowHideButton() && !bDefault
+                }),
+                new Button({
+                    text: resources.i18n.getText("Section.Button.Reset"),
+                    type: ButtonType.Transparent,
+                    press: this.fireReset.bind(this),
+                    visible: this.getEnableResetButton() && !bDefault
+                }),
+                new Button({
+                    text: resources.i18n.getText("Section.Button.Delete"),
+                    type: ButtonType.Transparent,
+                    press: this.fireDelete.bind(this),
+                    visible: this.getEnableDeleteButton() && !bDefault
+                })
+            ],
+            visible: this.getEditable()
+        }).addStyleClass("sapUshellSectionHeader"));
+    };
 
-        if (this.oCompactItemsNavigation) {
-            this.oCompactArea.removeDelegate(this.oCompactItemsNavigation);
-            this.oCompactItemsNavigation.destroy();
-            this.oCompactItemsNavigation = null;
+    Section.prototype._initGridContainerAggregation = function (bFlatArea) {
+        var oGridContainer = new GridContainer({
+            id: this.getId() + (bFlatArea ? "-flatArea" : "-defaultArea"),
+            containerQuery: this.getEnableGridContainerQuery(),
+            minHeight: "0",
+            visible: this.getEditable() || this.getShowSection(),
+            customData: [
+                new CustomData({
+                    key: "default",
+                    value: this.getDefault()
+                }),
+                new CustomData({
+                    key: "area",
+                    value: bFlatArea ? DisplayFormat.Flat : DisplayFormat.Standard
+                })
+            ],
+            layout: new GridContainerSettings({
+                rowSize: this.getGridContainerRowSize(),
+                columnSize: this.getGridContainerRowSize(),
+                gap: this.getGridContainerGap()
+            }),
+            layoutXS: new GridContainerSettings({
+                columns: 0,
+                rowSize: this.getGridContainerRowSizeXS(),
+                columnSize: this.getGridContainerRowSizeXS(),
+                gap: this.getGridContainerGapXS()
+            }),
+            layoutS: new GridContainerSettings({
+                columns: 0,
+                rowSize: this.getGridContainerRowSizeS(),
+                columnSize: this.getGridContainerRowSizeS(),
+                gap: this.getGridContainerGapS()
+            }),
+            layoutM: new GridContainerSettings({
+                columns: 0,
+                rowSize: this.getGridContainerRowSizeM(),
+                columnSize: this.getGridContainerRowSizeM(),
+                gap: this.getGridContainerGapM()
+            }),
+            layoutL: new GridContainerSettings({
+                columns: 0,
+                rowSize: this.getGridContainerRowSizeL(),
+                columnSize: this.getGridContainerRowSizeL(),
+                gap: this.getGridContainerGapL()
+            }),
+            layoutXL: new GridContainerSettings({
+                columns: 0,
+                rowSize: this.getGridContainerRowSizeXL(),
+                columnSize: this.getGridContainerRowSizeXL(),
+                gap: this.getGridContainerGapXL()
+            }),
+            dragDropConfig: [
+                new DragInfo({
+                    enabled: this.getEnableVisualizationReordering(),
+                    groupName: bFlatArea ? "flatArea" : "Section",
+                    sourceAggregation: "items"
+                }),
+                new GridDropInfo({
+                    enabled: this.getEnableVisualizationReordering(),
+                    groupName: bFlatArea ? "flatArea" : "Section",
+                    dropLayout: DropLayout.Horizontal,
+                    dropPosition: DropPosition.Between,
+                    targetAggregation: "items",
+                    dropIndicatorSize: bFlatArea ? this._getFlatDropIndicatorSize.bind(this) : this._getDefaultDropIndicatorSize.bind(this),
+                    dragEnter: this._onDragEnter.bind(this),
+                    drop: this._reorderVisualizations.bind(this)
+                })
+            ]
+        }).addStyleClass("sapUshellSectionGridContainer");
+
+        if (this.getEnableGridBreakpoints()) {
+            var bSmallSize = this.getSizeBehavior() === "Small";
+
+            oGridContainer.getLayoutXS().setColumns(4);
+            oGridContainer.getLayoutS().setColumns(4);
+            oGridContainer.getLayoutM().setColumns(6);
+            oGridContainer.getLayoutL().setColumns(bSmallSize ? 12 : 10);
+            oGridContainer.getLayoutXL().setColumns(bSmallSize ? 16 : 14);
         }
-        if (this._oInvisibleMessageInstance) {
-            this._oInvisibleMessageInstance.destroy();
-        }
-        XMLComposite.prototype.destroy.apply(this, arguments);
+
+        oGridContainer.addEventDelegate({
+            onAfterRendering: this.handleEmptyContentAreas.bind(this)
+        });
+        oGridContainer.attachBorderReached(this.onBorderReached.bind(this));
+
+        this.setAggregation(bFlatArea ? "_flatArea" : "_defaultArea", oGridContainer);
+    };
+
+    Section.prototype._initCompactAreaAggregation = function () {
+        var oCompactArea = new CompactArea({
+            id: this.getId() + "-compactArea",
+            enableLinkReordering: this.getEnableVisualizationReordering(),
+            itemDrop: this._reorderVisualizations.bind(this),
+            customData: [
+                new CustomData({
+                    key: "default",
+                    value: this.getDefault()
+                }),
+                new CustomData({
+                    key: "area",
+                    value: DisplayFormat.Compact
+                })
+            ],
+            dragDropConfig: [
+                new DragInfo({
+                    enabled: this.getEnableVisualizationReordering(),
+                    groupName: "CompactArea",
+                    sourceAggregation: "items"
+                }),
+                new DropInfo({
+                    enabled: this.getEnableVisualizationReordering(),
+                    groupName: "CompactArea",
+                    dropLayout: DropLayout.Horizontal,
+                    dropPosition: DropPosition.Between,
+                    targetAggregation: "items",
+                    dragEnter: this._onDragEnter.bind(this),
+                    drop: this._reorderVisualizations.bind(this)
+                }),
+                new DropInfo({
+                    enabled: this.getEnableVisualizationReordering(),
+                    groupName: "CompactArea",
+                    dragEnter: this._onDragEnter.bind(this),
+                    drop: this._reorderVisualizations.bind(this)
+                })
+            ]
+        }).addStyleClass("sapUshellSectionGridContainer");
+        oCompactArea.addEventDelegate({
+            onAfterRendering: this.handleEmptyContentAreas.bind(this)
+        });
+        oCompactArea.attachBorderReached(this.onBorderReached.bind(this));
+        this.setAggregation("_compactArea", oCompactArea);
+    };
+
+    Section.prototype.setDefault = function (value) {
+        this.setProperty("default", value, true);
+        var aHeaderContent = this.getAggregation("_header").getContent();
+        aHeaderContent[0].setVisible(value);
+        aHeaderContent[1].setVisible(!value);
+        aHeaderContent[2].setVisible(!value);
+        aHeaderContent[4].setVisible(this.getEnableAddButton() && !value);
+        aHeaderContent[5].setVisible(this.getEnableShowHideButton() && !value);
+        aHeaderContent[6].setVisible(this.getEnableResetButton() && !value);
+        aHeaderContent[7].setVisible(this.getEnableDeleteButton() && !value);
+        this.getAggregation("_defaultArea").getCustomData()[0].setValue(value);
+        this.getAggregation("_flatArea").getCustomData()[0].setValue(value);
+        this.getAggregation("_compactArea").getCustomData()[0].setValue(value);
+        return this;
     };
 
     Section.prototype.setEditable = function (value) {
         if (value === undefined || this.getEditable() === value) {
             return this;
         }
-            this.setProperty("editable", !!value, true);
-            this.oVBox.toggleStyleClass("sapUshellSectionEdit", !!value);
-            return this;
 
+        this.setProperty("editable", value, true);
+        this.toggleStyleClass("sapUshellSectionEdit", value);
+        this.getAggregation("_title").setVisible(!value && this.getShowSection());
+        this.getAggregation("_header").setVisible(value);
+        this.getAggregation("_noVisualizationsText").setVisible(value && this.getShowNoVisualizationsText());
+        this.getAggregation("_defaultArea").setVisible(value || this.getShowSection());
+        this.getAggregation("_flatArea").setVisible(value || this.getShowSection());
+        this.getAggregation("_compactArea").setVisible(value || this.getShowSection());
+
+        var oDomRef = this.getDomRef();
+        if (oDomRef) {
+            if (value) {
+                oDomRef.setAttribute("tabindex", "0");
+                if (this.getShowNoVisualizationsText()) {
+                    oDomRef.setAttribute("aria-describedBy", this.getAggregation("_noVisualizationsText").getId());
+                } else {
+                    oDomRef.removeAttribute("aria-describedBy");
+                }
+            } else {
+                oDomRef.removeAttribute("tabindex");
+            }
+        }
+        return this;
     };
 
-    /**
-     * Is called when the "Show Section" Switch is changed.
-     *
-     * @param {boolean} value Whether the section should be shown or not.
-     * @private
-     */
-    Section.prototype._showHidePressed = function (value) {
-        // temporary work around until sap.m.Button announces a label change to the user.
-        var oMResources = Core.getLibraryResourceBundle("sap.m");
-        this._oInvisibleMessageInstance.announce([
-            resources.i18n.getText(value ? "Section.nowBeingShown" : "Section.nowBeingHidden"),
-            resources.i18n.getText("Section.ButtonLabelChanged"),
-            resources.i18n.getText(value ? "Section.Button.Hide" : "Section.Button.Show"),
-            oMResources.getText("ACC_CTR_TYPE_BUTTON")
-        ].join(" "), InvisibleMessageMode.Polite);
-
-        this.setShowSection(value);
+    Section.prototype.setEnableAddButton = function (value) {
+        this.setProperty("enableAddButton", value, true);
+        this.getAggregation("_header").getContent()[4].setVisible(value && !this.getDefault());
+        return this;
+    };
+
+    Section.prototype.setEnableDeleteButton = function (value) {
+        this.setProperty("enableDeleteButton", value, true);
+        this.getAggregation("_header").getContent()[7].setVisible(value && !this.getDefault());
+        return this;
+    };
+
+    Section.prototype.setEnableGridBreakpoints = function (value) {
+        this.setProperty("enableGridBreakpoints", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        if (value) {
+            var bSmallSize = this.getSizeBehavior() === "Small";
+
+            oDefaultArea.getLayoutXS().setColumns(4);
+            oDefaultArea.getLayoutS().setColumns(4);
+            oDefaultArea.getLayoutM().setColumns(6);
+            oDefaultArea.getLayoutL().setColumns(bSmallSize ? 12 : 10);
+            oDefaultArea.getLayoutXL().setColumns(bSmallSize ? 16 : 14);
+            oFlatArea.getLayoutXS().setColumns(4);
+            oFlatArea.getLayoutS().setColumns(4);
+            oFlatArea.getLayoutM().setColumns(6);
+            oFlatArea.getLayoutL().setColumns(bSmallSize ? 12 : 10);
+            oFlatArea.getLayoutXL().setColumns(bSmallSize ? 16 : 14);
+        } else {
+            oDefaultArea.getLayoutXS().setColumns(0);
+            oDefaultArea.getLayoutS().setColumns(0);
+            oDefaultArea.getLayoutM().setColumns(0);
+            oDefaultArea.getLayoutL().setColumns(0);
+            oDefaultArea.getLayoutXL().setColumns(0);
+            oFlatArea.getLayoutXS().setColumns(0);
+            oFlatArea.getLayoutS().setColumns(0);
+            oFlatArea.getLayoutM().setColumns(0);
+            oFlatArea.getLayoutL().setColumns(0);
+            oFlatArea.getLayoutXL().setColumns(0);
+        }
+
+        return this;
+    };
+
+    Section.prototype.setEnableGridContainerQuery = function (value) {
+        this.setProperty("enableGridContainerQuery", value, true);
+        this.getAggregation("_defaultArea").setContainerQuery(value);
+        this.getAggregation("_flatArea").setContainerQuery(value);
+        return this;
+    };
+
+    Section.prototype.setEnableResetButton = function (value) {
+        this.setProperty("enableResetButton", value, true);
+        this.getAggregation("_header").getContent()[6].setVisible(value && !this.getDefault());
+        return this;
+    };
+
+    Section.prototype.setEnableShowHideButton = function (value) {
+        this.setProperty("enableShowHideButton", value, true);
+        this.getAggregation("_header").getContent()[5].setVisible(value && !this.getDefault());
+        return this;
+    };
+
+    Section.prototype.setEnableVisualizationReordering = function (value) {
+        this.setProperty("enableVisualizationReordering", value, true);
+        var oCompactArea = this.getAggregation("_compactArea");
+        var aDefaultAreaDragDropConfig = this.getAggregation("_defaultArea").getDragDropConfig();
+        var aFlatAreaDragDropConfig = this.getAggregation("_flatArea").getDragDropConfig();
+        var aCompactAreaDragDropConfig = oCompactArea.getDragDropConfig();
+
+        oCompactArea.setEnableLinkReordering(value);
+        aDefaultAreaDragDropConfig[0].setEnabled(value);
+        aDefaultAreaDragDropConfig[1].setEnabled(value);
+        aFlatAreaDragDropConfig[0].setEnabled(value);
+        aFlatAreaDragDropConfig[1].setEnabled(value);
+        aCompactAreaDragDropConfig[0].setEnabled(value);
+        aCompactAreaDragDropConfig[1].setEnabled(value);
+        aCompactAreaDragDropConfig[2].setEnabled(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerGap = function (value) {
+        this.setProperty("gridContainerGap", value, true);
+        this.getAggregation("_defaultArea").getLayout().setGap(value);
+        this.getAggregation("_flatArea").getLayout().setGap(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerGapXS = function (value) {
+        this.setProperty("gridContainerGapXS", value, true);
+        this.getAggregation("_defaultArea").getLayoutXS().setGap(value);
+        this.getAggregation("_flatArea").getLayoutXS().setGap(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerGapS = function (value) {
+        this.setProperty("gridContainerGapS", value, true);
+        this.getAggregation("_defaultArea").getLayoutS().setGap(value);
+        this.getAggregation("_flatArea").getLayoutS().setGap(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerGapM = function (value) {
+        this.setProperty("gridContainerGapM", value, true);
+        this.getAggregation("_defaultArea").getLayoutM().setGap(value);
+        this.getAggregation("_flatArea").getLayoutM().setGap(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerGapL = function (value) {
+        this.setProperty("gridContainerGapL", value, true);
+        this.getAggregation("_defaultArea").getLayoutL().setGap(value);
+        this.getAggregation("_flatArea").getLayoutL().setGap(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerGapXL = function (value) {
+        this.setProperty("gridContainerGapXL", value, true);
+        this.getAggregation("_defaultArea").getLayoutXL().setGap(value);
+        this.getAggregation("_flatArea").getLayoutXL().setGap(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerRowSize = function (value) {
+        this.setProperty("gridContainerRowSize", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        oDefaultArea.getLayout().setRowSize(value);
+        oDefaultArea.getLayout().setColumnSize(value);
+        oFlatArea.getLayout().setRowSize(value);
+        oFlatArea.getLayout().setColumnSize(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerRowSizeXS = function (value) {
+        this.setProperty("gridContainerRowSizeXS", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        oDefaultArea.getLayoutXS().setRowSize(value);
+        oDefaultArea.getLayoutXS().setColumnSize(value);
+        oFlatArea.getLayoutXS().setRowSize(value);
+        oFlatArea.getLayoutXS().setColumnSize(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerRowSizeS = function (value) {
+        this.setProperty("gridContainerRowSizeS", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        oDefaultArea.getLayoutS().setRowSize(value);
+        oDefaultArea.getLayoutS().setColumnSize(value);
+        oFlatArea.getLayoutS().setRowSize(value);
+        oFlatArea.getLayoutS().setColumnSize(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerRowSizeM = function (value) {
+        this.setProperty("gridContainerRowSizeM", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        oDefaultArea.getLayoutM().setRowSize(value);
+        oDefaultArea.getLayoutM().setColumnSize(value);
+        oFlatArea.getLayoutM().setRowSize(value);
+        oFlatArea.getLayoutM().setColumnSize(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerRowSizeL = function (value) {
+        this.setProperty("gridContainerRowSizeL", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        oDefaultArea.getLayoutL().setRowSize(value);
+        oDefaultArea.getLayoutL().setColumnSize(value);
+        oFlatArea.getLayoutL().setRowSize(value);
+        oFlatArea.getLayoutL().setColumnSize(value);
+        return this;
+    };
+
+    Section.prototype.setGridContainerRowSizeXL = function (value) {
+        this.setProperty("gridContainerRowSizeXL", value, true);
+        var oDefaultArea = this.getAggregation("_defaultArea");
+        var oFlatArea = this.getAggregation("_flatArea");
+
+        oDefaultArea.getLayoutXL().setRowSize(value);
+        oDefaultArea.getLayoutXL().setColumnSize(value);
+        oFlatArea.getLayoutXL().setRowSize(value);
+        oFlatArea.getLayoutXL().setColumnSize(value);
+        return this;
+    };
+
+    Section.prototype.setNoVisualizationsText = function (value) {
+        this.setProperty("noVisualizationsText", value, true);
+        this.getAggregation("_noVisualizationsText").setText(value);
+        return this;
+    };
+
+    Section.prototype.setTitle = function (value) {
+        this.setProperty("title", value, true);
+        this.getAggregation("_title").setText(value);
+        this.getAggregation("_header").getContent()[0].setText(value);
+        this.getAggregation("_header").getContent()[2].setValue(value);
+
+        var oDomRef = this.getDomRef();
+        if (oDomRef) {
+            oDomRef.setAttribute("aria-label", this.getAriaLabel());
+        }
+        return this;
+    };
+
+    Section.prototype.setShowNoVisualizationsText = function (value) {
+        this.setProperty("showNoVisualizationsText", value, true);
+        this.getAggregation("_noVisualizationsText").setVisible(this.getEditable() && value);
+        var oDomRef = this.getDomRef();
+        if (oDomRef) {
+            if (this.getEditable() && value) {
+                oDomRef.setAttribute("aria-describedBy", this.getAggregation("_noVisualizationsText").getId());
+            } else {
+                oDomRef.removeAttribute("aria-describedBy");
+            }
+        }
+        return this;
     };
 
-    // The function toggles section visibility and creates a corresponding accessibility announcement
     Section.prototype.setShowSection = function (value) {
         if (value === undefined || this.getShowSection() === value) {
             return this;
         }
-            this.setProperty("showSection", value, true);
-            this.oVBox.toggleStyleClass("sapUshellSectionHidden", !value);
-            this.fireSectionVisibilityChange({ visible: value });
-            return this;
 
+        this.setProperty("showSection", value, true);
+        this.toggleStyleClass("sapUshellSectionHidden", !value);
+        this.getAggregation("_title").setVisible(!this.getEditable() && value);
+        this.getAggregation("_defaultArea").setVisible(this.getEditable() || value);
+        this.getAggregation("_flatArea").setVisible(this.getEditable() || value);
+        this.getAggregation("_compactArea").setVisible(this.getEditable() || value);
+        this.getAggregation("_header").getContent()[5].setText(value ? resources.i18n.getText("Section.Button.Hide") : resources.i18n.getText("Section.Button.Show"));
+        return this;
+    };
+
+    Section.prototype.setSizeBehavior = function (value) {
+        this.setProperty("sizeBehavior", value, true);
+        if (this.getEnableGridBreakpoints()) {
+            var oDefaultArea = this.getAggregation("_defaultArea");
+            var oFlatArea = this.getAggregation("_flatArea");
+
+            oDefaultArea.getLayoutL().setColumns(value ? 12 : 10);
+            oDefaultArea.getLayoutXL().setColumns(value ? 16 : 14);
+            oFlatArea.getLayoutL().setColumns(value ? 12 : 10);
+            oFlatArea.getLayoutXL().setColumns(value ? 16 : 14);
+        }
+        return this;
+    };
+
+    Section.prototype.destroy = function () {
+        Control.prototype.destroy.apply(this, arguments);
+        this._oDefaultItemsChangeDetection.destroy();
+        this._oFlatItemsChangeDetection.destroy();
+        this._oCompactItemsChangeDetection.destroy();
+
+        document.removeEventListener("dragstart", this._fnGlobalDragStart, false);
+        document.removeEventListener("dragend", this._fnGlobalDragEnd, false);
+
+        if (this._oInvisibleMessageInstance) {
+            this._oInvisibleMessageInstance.destroy();
+        }
+    };
+
+    /**
+     * Generates the localized aria label string for the section.
+     *
+     * @returns {string} the localized aria label containing the title of the section.
+     */
+    Section.prototype.getAriaLabel = function () {
+        var sTitle = this.getTitle() && this.getTitle().trim();
+        if (sTitle) {
+            return resources.i18n.getText("Section.Description", sTitle);
+        }
+        return resources.i18n.getText("Section.Description.EmptySectionTitle");
+    };
+
+    /**
+     * @returns {sap.m.Input} the title input from the section header.
+     *
+     * @since 1.117.0
+     */
+    Section.prototype.getTitleInput = function () {
+        return this.getAggregation("_header").getContent()[2];
     };
 
     /**
@@ -856,7 +1398,7 @@ sap.ui.define([
         if (sAggregationName === "defaultItems" || sAggregationName === "flatItems") {
             this._addVisualizationLayoutData(oObject);
         }
-        XMLComposite.prototype.addAggregation.apply(this, arguments);
+        Control.prototype.addAggregation.apply(this, arguments);
         this.handleEmptyContentAreas();
         return this;
     };
@@ -865,11 +1407,30 @@ sap.ui.define([
         if (sAggregationName === "defaultItems" || sAggregationName === "flatItems") {
             this._addVisualizationLayoutData(oObject, sAggregationName);
         }
-        XMLComposite.prototype.insertAggregation.apply(this, arguments);
+        Control.prototype.insertAggregation.apply(this, arguments);
         this.handleEmptyContentAreas();
         return this;
     };
 
+    /**
+     * Does a lookup on the internal aggregations and searches for a proper dom ref to focus
+     *
+     * @returns {HTMLElement} the dom ref to focus
+     * @private
+     */
+    Section.prototype.getFocusDomRef = function () {
+        if (this.getEditable()) {
+            return this.getDomRef();
+        }
+        if (this.getDefaultItems().length) {
+            return this.getAggregation("_defaultArea").getFocusDomRef();
+        }
+        if (this.getFlatItems().length) {
+            return this.getAggregation("_flatArea").getFocusDomRef();
+        }
+        return this.getAggregation("_compactArea").getFocusDomRef();
+    };
+
     /**
      * Returns the LayoutData for the given item.
      *
@@ -999,7 +1560,7 @@ sap.ui.define([
     /**
      * Returns the visual position of a visualization in a section. It is not the same as the order in the model.
      *
-     * @param {object | integer} viz Visualization control that belongs to a section or its index in the model.
+     * @param {object | int} viz Visualization control that belongs to a section or its index in the model.
      * @returns {object} Position of the visualization ({index, area},
      * where index is relative position of a visualization in the area and
      * area is either "default" for normal tiles, "flat" for flat and flat wide tiles and "compact" for links)
@@ -1009,21 +1570,21 @@ sap.ui.define([
         if (isFinite(viz)) {
             viz = this.getVisualizations()[viz];
         }
-        var index = this.oDefaultArea.getItems().indexOf(viz);
+        var index = this.getAggregation("_defaultArea").getItems().indexOf(viz);
         if (index >= 0) {
             return {
                 index: index,
                 area: DisplayFormat.Standard
             };
         }
-        index = this.oFlatArea.getItems().indexOf(viz);
+        index = this.getAggregation("_flatArea").getItems().indexOf(viz);
         if (index >= 0) {
             return {
                 index: index,
                 area: DisplayFormat.Flat
             };
         }
-        index = this.oCompactArea.getItems().indexOf(viz);
+        index = this.getAggregation("_compactArea").getItems().indexOf(viz);
         if (index >= 0) {
             return {
                 index: index,
@@ -1042,16 +1603,16 @@ sap.ui.define([
      * default items come first, then the flat area items and then the compact area items.
      * If the last focused item is removed from the default area, the fist item in the compact area is focused.
      *
-     * @param {object | integer} pos Position of the visualization to focus ({index, area} or index)
+     * @param {object | int} pos Position of the visualization to focus ({index, area} or index)
      * @private
      */
     Section.prototype._focusItem = function (pos) {
         window.setTimeout(function () {
             var area = pos && pos.area ? pos.area : DisplayFormat.Standard;
             var index = pos && pos.index ? pos.index : pos;
-            var nDefaultItems = this.oDefaultArea.getItems().length;
-            var nFlatItems = this.oFlatArea.getItems().length;
-            var nCompactItems = this.oCompactArea.getItems().length;
+            var nDefaultItems = this.getAggregation("_defaultArea").getItems().length;
+            var nFlatItems = this.getAggregation("_flatArea").getItems().length;
+            var nCompactItems = this.getAggregation("_compactArea").getItems().length;
 
             // checks
             if (isNaN(index) || index < 0) { // focus the first item by default
@@ -1081,16 +1642,16 @@ sap.ui.define([
                     if (index >= nFlatItems) { // focus the last item
                         index = nFlatItems - 1;
                     }
-                    this.oFlatArea.focusItem(index);
+                    this.getAggregation("_flatArea").focusItem(index);
                     break;
                 case DisplayFormat.Compact:
-                    this.oCompactArea.focusItem(index);
+                    this.getAggregation("_compactArea").focusItem(index);
                     break;
                 default: // "default area"
                     if (index >= nDefaultItems) { // focus the last item
                         index = nDefaultItems - 1;
                     }
-                    this.oDefaultArea.focusItem(index);
+                    this.getAggregation("_defaultArea").focusItem(index);
                     break;
             }
         }.bind(this), 0);