@sapui5/sap.ushell 1.117.2 → 1.119.0

package/src/main/js/sap/ushell/components/workPageBuilder/controller/WorkPageBuilder.layout.js

@@ -6,19 +6,19 @@
 sap.ui.define([
     "sap/m/TileSizeBehavior",
     "sap/ui/core/ResizeHandler",
-    "sap/ui/core/theming/Parameters",
     "sap/base/Log",
     "sap/ui/model/json/JSONModel",
     "sap/ushell/Config",
-    "sap/ushell/EventHub"
+    "sap/ushell/EventHub",
+    "sap/ushell/utils"
 ], function (
     TileSizeBehavior,
     ResizeHandler,
-    Parameters,
     Log,
     JSONModel,
     Config,
-    EventHub
+    EventHub,
+    ushellUtils
 ) {
     "use strict";
 
@@ -115,8 +115,12 @@ sap.ui.define([
      * @private
      * @since 1.116.0
      */
-    LayoutHelper.prototype.onResize = function (oEvent) {
-        var oBreakpoint = this._getBreakpointSettingsForWidth(oEvent.size.width);
+    LayoutHelper.prototype.onResize = async function (oEvent) {
+        if (this.iWidth === oEvent.size.width) {
+            return;
+        }
+        this.iWidth = oEvent.size.width;
+        var oBreakpoint = await this._getBreakpointSettingsForWidth(oEvent.size.width);
         this._oLayoutModel.setProperty("/currentBreakpoint", oBreakpoint);
     };
 
@@ -124,12 +128,12 @@ sap.ui.define([
      * Returns the breakpoint for the given width.
      *
      * @param {int} iWidth The width.
-     * @returns {BreakpointSetting} The breakpoint config.
+     * @returns {Promise<BreakpointSetting>} The breakpoint config.
      * @private
      * @since 1.116.0
      */
-    LayoutHelper.prototype._getBreakpointSettingsForWidth = function (iWidth) {
-        var aBreakpoints = this._getBreakpointSettings();
+    LayoutHelper.prototype._getBreakpointSettingsForWidth = async function (iWidth) {
+        var aBreakpoints = await this._getBreakpointSettings();
         for (var i in aBreakpoints) {
             if (iWidth <= aBreakpoints[i].high && iWidth >= aBreakpoints[i].low) {
                 return aBreakpoints[i];
@@ -140,39 +144,61 @@ sap.ui.define([
     /**
      * Returns a .rem value based on the tile gap or width parameter
      *
-     * @param {string} sParam Tile spacing parameter
+     * @param {string} sValue Tile spacing parameter
      * @returns {string} Value in .rem
      * @private
      * @since 1.116.0
      */
-    LayoutHelper.prototype._getNumericThemeParam = function (sParam) {
-        var sValue = Parameters.get(sParam);
+    LayoutHelper.prototype._formatNumericThemeParam = function (sValue) {
         if (sValue && sValue.indexOf(".") === 0) {
             sValue = "0" + sValue;
         }
         return sValue;
     };
 
+    /**
+     * Calculates the minimum flex for the given columnMinWidth, taking into account the width of the first WorkPageRow.
+     *
+     * @param {int} iColumnMinWidthPx The minimum width for the WorkPageColumn in px.
+     * @returns {int} The min flex value.
+     * @private
+     * @since 1.118.0
+     */
+    LayoutHelper.prototype._getWorkPageColumnMinFlex = function (iColumnMinWidthPx) {
+        const oDomRef = this._oControl.getDomRef();
+
+        if (!oDomRef) { return 4; }
+
+        const oRowInnerDomRef = oDomRef.querySelector(".workPageRowInner");
+
+        if (!oRowInnerDomRef) { return 4; }
+        if (oRowInnerDomRef.offsetWidth <= 0) { return 4; }
+
+        return Math.ceil(iColumnMinWidthPx / (oRowInnerDomRef.offsetWidth / 24));
+    };
+
     /**
      * @typedef BreakpointSetting
      *
-     * @property {number} high The highest pixel width for this breakpoint.
-     * @property {number} low The lowest pixel width for this breakpoint.
+     * @property {int} high The highest pixel width for this breakpoint.
+     * @property {int} low The lowest pixel width for this breakpoint.
      * @property {sap.m.TileSizeBehavior} sizeBehavior The sizeBehavior for this breakpoint.
      * @property {string} gap The css value for the grid gap.
      * @property {string} rowSize The css value for the grid rowSize.
      * @property {string} name The shorthand name for the breakpoint.
+     * @property {int} maxColumnsPerRow The maximum amount of columns to show in one row.
+     * @property {int} columnMinFlex The minimum flex for a WorkPageColumn.
      */
 
     /**
      * Returns an array of all existing breakpoint settings.
      * The settings take into account the global config for tile sizeBehavior and the theme parameters for grid gap and tile size.
      *
-     * @returns {BreakpointSetting[]} An array of all existing breakpoints.
+     * @returns {Promise<BreakpointSetting[]>} An array of all existing breakpoints.
      * @private
      * @since 1.116.0
      */
-    LayoutHelper.prototype._getBreakpointSettings = function () {
+    LayoutHelper.prototype._getBreakpointSettings = async function () {
         var sCurrentConfigSizeBehavior = Config.last("/core/home/sizeBehavior");
         var sSizeBehaviorResponsive = sCurrentConfigSizeBehavior === TileSizeBehavior.Small
             ? TileSizeBehavior.Small
@@ -186,181 +212,247 @@ sap.ui.define([
             ? "_sap_ushell_Tile_WidthXS"
             : "_sap_ushell_Tile_Width";
 
+        var mColumnMinFlex = {
+            "lt-lp": this._getWorkPageColumnMinFlex(416),
+            "lt-sp": this._getWorkPageColumnMinFlex(400),
+            "st-lp": this._getWorkPageColumnMinFlex(352),
+            "st-sp": this._getWorkPageColumnMinFlex(336)
+        };
+
+        const [sSpacing, sSpacingXS] = await ushellUtils.getThemingParameters([sSpacingParamResponsive, "_sap_ushell_Tile_SpacingXS"]);
+
+        var mGap = {
+            lt: this._formatNumericThemeParam(sSpacing),
+            st: this._formatNumericThemeParam(sSpacingXS)
+        };
+
+        const [sWidth, sWidthXS] = await ushellUtils.getThemingParameters([sTileWidthParamResponsive, "_sap_ushell_Tile_WidthXS"]);
+
+        var mRowSize = {
+            lt: this._formatNumericThemeParam(sWidth),
+            st: this._formatNumericThemeParam(sWidthXS)
+        };
+
         return [
             {
                 /**
                  * Large Tiles, Large Padding, 4 columns max
                  */
                 high: Infinity,
-                low: 1736,
+                low: 1724,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-lp-4"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-lp-4",
+                maxColumnsPerRow: 4,
+                columnMinFlex: mColumnMinFlex["lt-lp"]
             },
             {
                 /**
                  * Large Tiles, Small Padding, 4 columns max
                  */
-                high: 1735,
+                high: 1723,
                 low: 1660,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-sp-4"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-sp-4",
+                maxColumnsPerRow: 4,
+                columnMinFlex: mColumnMinFlex["lt-sp"]
             },
             {
                 /**
                  * Small Tiles, Large Padding, 4 columns max
                  */
                 high: 1659,
-                low: 1476,
+                low: 1468,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-lp-4"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-lp-4",
+                maxColumnsPerRow: 4,
+                columnMinFlex: mColumnMinFlex["st-lp"]
             },
             {
                 /**
                  * Small Tiles, Small Padding, 4 columns max
                  */
-                high: 1475,
+                high: 1467,
                 low: 1404,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-sp-4"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-sp-4",
+                maxColumnsPerRow: 4,
+                columnMinFlex: mColumnMinFlex["st-sp"]
             },
             {
                 /**
                  * Large Tiles, Large Padding, 3 columns max
                  */
                 high: 1403,
-                low: 1320,
+                low: 1296,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-lp-3"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-lp-3",
+                maxColumnsPerRow: 3,
+                columnMinFlex: mColumnMinFlex["lt-lp"]
             },
             {
                 /**
                  * Large Tiles, Small Padding, 3 columns max
                  */
-                high: 1319,
-                low: 1264,
+                high: 1295,
+                low: 1248,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-sp-3"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-sp-3",
+                maxColumnsPerRow: 3,
+                columnMinFlex: mColumnMinFlex["lt-sp"]
             },
             {
                 /**
                  * Small Tiles, Large Padding, 3 columns max
                  */
-                high: 1263,
-                low: 1128,
+                high: 1247,
+                low: 1104,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-lp-3"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-lp-3",
+                maxColumnsPerRow: 3,
+                columnMinFlex: mColumnMinFlex["st-lp"]
             },
             {
                 /**
                  * Small Tiles, Small Padding, 3 columns max
                  */
-                high: 1127,
-                low: 1068,
+                high: 1103,
+                low: 1056,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-sp-3"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-sp-3",
+                maxColumnsPerRow: 3,
+                columnMinFlex: mColumnMinFlex["st-sp"]
             }, {
                 /**
                  * Large Tiles, Large Padding, 2 columns max
                  */
-                high: 1067,
-                low: 892,
+                high: 1055,
+                low: 880,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-lp-2"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-lp-2",
+                maxColumnsPerRow: 2,
+                columnMinFlex: mColumnMinFlex["lt-lp"]
             },
             {
                 /**
                  * Large Tiles, Small Padding, 2 columns max
                  */
-                high: 891,
-                low: 860,
+                high: 879,
+                low: 848,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-sp-2"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-sp-2",
+                maxColumnsPerRow: 2,
+                columnMinFlex: mColumnMinFlex["lt-sp"]
             },
             {
                 /**
                  * Small Tiles, Large Padding, 2 columns max
                  */
-                high: 859,
-                low: 762,
+                high: 847,
+                low: 752,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-lp-2"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-lp-2",
+                maxColumnsPerRow: 2,
+                columnMinFlex: mColumnMinFlex["st-lp"]
             },
             {
                 /**
                  * Small Tiles, Small Padding, 2 columns max
                  */
-                high: 761,
-                low: 732,
+                high: 751,
+                low: 720,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-sp-2"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-sp-2",
+                maxColumnsPerRow: 2,
+                columnMinFlex: mColumnMinFlex["st-sp"]
             },
             {
                 /**
                  * Large Tiles, Large Padding, 1 column max
                  */
-                high: 731,
-                low: 476,
+                high: 719,
+                low: 456,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-lp-1"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-lp-1",
+                maxColumnsPerRow: 1,
+                columnMinFlex: mColumnMinFlex["lt-lp"]
             },
             {
                 /**
                  * Large Tiles, Small Padding, 1 column max
                  */
-                high: 475,
-                low: 460,
+                high: 455,
+                low: 440,
                 sizeBehavior: sSizeBehaviorResponsive,
-                gap: this._getNumericThemeParam(sSpacingParamResponsive),
-                rowSize: this._getNumericThemeParam(sTileWidthParamResponsive),
-                name: "lt-sp-1"
+                gap: mGap.lt,
+                rowSize: mRowSize.lt,
+                name: "lt-sp-1",
+                maxColumnsPerRow: 1,
+                columnMinFlex: mColumnMinFlex["lt-sp"]
             },
             {
                 /**
                  * Small Tiles, Large Padding, 1 column max
                  */
-                high: 459,
-                low: 396,
+                high: 439,
+                low: 392,
+                sizeBehavior: TileSizeBehavior.Small,
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-lp-1",
+                maxColumnsPerRow: 1,
+                columnMinFlex: mColumnMinFlex["st-lp"]
+            },
+            {
+                /**
+                 * Small Tiles, Small Padding, 1 column max
+                 */
+                high: 391,
+                low: 376,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-lp-1"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-sp-1",
+                maxColumnsPerRow: 1,
+                columnMinFlex: mColumnMinFlex["st-sp"]
             },
             {
                 /**
                  * Small Tiles, Small Padding, 1 column max
                  */
-                high: 395,
+                high: 375,
                 low: 0,
                 sizeBehavior: TileSizeBehavior.Small,
-                gap: this._getNumericThemeParam("_sap_ushell_Tile_SpacingXS"),
-                rowSize: this._getNumericThemeParam("_sap_ushell_Tile_WidthXS"),
-                name: "st-sp-1"
+                gap: mGap.st,
+                rowSize: mRowSize.st,
+                name: "st-sp-0",
+                maxColumnsPerRow: 1,
+                columnMinFlex: mColumnMinFlex["st-sp"]
             }
         ];
     };

package/src/main/js/sap/ushell/components/workPageBuilder/controller/WorkPageHost.js

@@ -2,7 +2,7 @@
 
 /**
  * @file WorkPageHost for WorkPageBuilder
- * @version 1.117.2
+ * @version 1.119.0
  */
 
 sap.ui.define([
@@ -78,7 +78,7 @@ sap.ui.define([
             return oRes;
           });
       }
-      return Promise.resolve();
+      return Host.prototype.fetch.apply(this, arguments);
     };
 
      /**

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPage.js

@@ -32,7 +32,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.117.2
+     * @version 1.119.0
      *
      * @private
      * @experimental
@@ -137,12 +137,12 @@ sap.ui.define([
 
         Control.prototype.exit.apply(this, arguments);
     };
-        /**
-     * Checks if the private aggregation "_emptyIllustration" exists.
-     * If not, the control is created and stored in the aggregation.
-     *
-     * @returns {sap.m.IllustratedMessage} The IllustratedMessage control.
-     */
+    /**
+ * Checks if the private aggregation "_emptyIllustration" exists.
+ * If not, the control is created and stored in the aggregation.
+ *
+ * @returns {sap.m.IllustratedMessage} The IllustratedMessage control.
+ */
     WorkPage.prototype.getIllustratedMessage = function () {
         if (!this.getAggregation("_emptyIllustration")) {
             this.setAggregation("_emptyIllustration", this._createIllustratedMessage());
@@ -158,13 +158,13 @@ sap.ui.define([
      * @private
      */
     WorkPage.prototype._createIllustratedMessage = function () {
-        return new IllustratedMessage({
+        return new IllustratedMessage(`${this.getId()}-emptyWorkpageMessage`, {
             illustrationType: IllustratedMessageType.AddColumn,
             illustrationSize: IllustratedMessageSize.Spot,
             title: this.getEmptyIllustrationTitle(),
             description: this.getEmptyIllustrationMessage(),
             additionalContent: [
-                new Button({
+                new Button(`${this.getId()}-addFirstRowButton`, {
                     text: this.getEmptyIllustrationButtonText(),
                     press: function () {
                         this.fireEvent("addFirstRow");
@@ -174,7 +174,5 @@ sap.ui.define([
             visible: "{/editMode}"
         });
     };
-
-
     return WorkPage;
 });

package/src/main/js/sap/ushell/components/workPageBuilder/controls/WorkPageButton.js

@@ -22,7 +22,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      *
-     * @version 1.117.2
+     * @version 1.119.0
      *
      * @private
      * @experimental
@@ -30,57 +30,57 @@ sap.ui.define([
      */
     var WorkPageButton = Control.extend("sap.ushell.components.workPageBuilder.controls.WorkPageButton",
         /** @lends sap.ushell.components.workPageBuilder.controls.WorkPageButton.prototype */ {
-        metadata: {
-            library: "sap.ushell",
-            properties: {
-                /**
-                 * Icon to be displayed on the button.
-                 */
-                icon: { type: "sap.ui.core.URI", defaultValue: "", bindable: true },
-                /**
-                 * Tooltip to show on button hover.
-                 */
-                tooltip: { type: "string", defaultValue: "", bindable: true }
+            metadata: {
+                library: "sap.ushell",
+                properties: {
+                    /**
+                     * Icon to be displayed on the button.
+                     */
+                    icon: { type: "sap.ui.core.URI", defaultValue: "", bindable: true },
+                    /**
+                     * Tooltip to show on button hover.
+                     */
+                    tooltip: { type: "string", defaultValue: "", bindable: true }
+                },
+                aggregations: {
+                    /**
+                     * Private aggregation to store the icon control.
+                     * @private
+                     */
+                    _icon: { type: "sap.ui.core.Icon", multiple: false, defaultValue: null, visibility: "hidden" }
+                },
+                events: {
+                    /**
+                     * Fired if the button is pressed.
+                     */
+                    press: {}
+                }
             },
-            aggregations: {
-                /**
-                 * Private aggregation to store the icon control.
-                 * @private
-                 */
-                _icon: { type: "sap.ui.core.Icon", multiple: false, defaultValue: null, visibility: "hidden" }
-            },
-            events: {
+            renderer: {
+                apiVersion: 2,
+
                 /**
-                 * Fired if the button is pressed.
+                 * Renders the HTML for the WorkPageButton, using the provided {@link sap.ui.core.RenderManager}.
+                 *
+                 * @param {sap.ui.core.RenderManager} rm The RenderManager.
+                 * @param {sap.ushell.components.workPageBuilder.controls.WorkPageButton} workPageButton The WorkPageButton to be rendered.
                  */
-                press: {}
-            }
-        },
-        renderer: {
-            apiVersion: 2,
+                render: function (rm, workPageButton) {
+                    rm.openStart("button", workPageButton);
+                    rm.class("workPageButton");
+                    rm.attr("title", workPageButton.getTooltip());
+                    rm.openEnd(); // button tag
 
-            /**
-             * Renders the HTML for the WorkPageButton, using the provided {@link sap.ui.core.RenderManager}.
-             *
-             * @param {sap.ui.core.RenderManager} rm The RenderManager.
-             * @param {sap.ushell.components.workPageBuilder.controls.WorkPageButton} workPageButton The WorkPageButton to be rendered.
-             */
-            render: function (rm, workPageButton) {
-                rm.openStart("button", workPageButton);
-                rm.class("sapCepAddButton");
-                rm.attr("title", workPageButton.getTooltip());
-                rm.openEnd(); // button tag
+                    rm.openStart("span");
+                    rm.class("workPageButtonInner");
+                    rm.openEnd(); // span tag
+                    rm.renderControl(workPageButton.getIconControl());
+                    rm.close("span");
 
-                rm.openStart("span");
-                rm.class("sapCepAddButtonInner");
-                rm.openEnd(); // span tag
-                rm.renderControl(workPageButton.getIconControl());
-                rm.close("span");
-
-                rm.close("button");
+                    rm.close("button");
+                }
             }
-        }
-    });
+        });
 
     /**
      * Initialize the control and bind the click listener function.
@@ -126,10 +126,10 @@ sap.ui.define([
      */
     WorkPageButton.prototype.getIconControl = function () {
         if (!this.getAggregation("_icon")) {
-            this.setAggregation("_icon", new Icon({
+            this.setAggregation("_icon", new Icon(`${this.getId()}-icon`, {
                 src: this.getIcon(),
                 tooltip: this.getTooltip()
-            }).addStyleClass("sapCepAddButtonIcon"));
+            }).addStyleClass("workPageButtonIcon"));
         }
         return this.getAggregation("_icon");
     };