@sapui5/sap.ushell 1.141.3 → 1.142.0

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

@@ -1,462 +0,0 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
-
-/**
- * @file WorkPageBuilder layout helper for breakpoints, theme params, sizeBehavior handling.
- */
-sap.ui.define([
-    "sap/m/library",
-    "sap/ui/core/ResizeHandler",
-    "sap/base/Log",
-    "sap/ui/model/json/JSONModel",
-    "sap/ushell/Config",
-    "sap/ushell/EventHub",
-    "sap/ushell/utils"
-], (
-    mLibrary,
-    ResizeHandler,
-    Log,
-    JSONModel,
-    Config,
-    EventHub,
-    ushellUtils
-) => {
-    "use strict";
-
-    const TileSizeBehavior = mLibrary.TileSizeBehavior;
-
-    /**
-     * Creates a new LayoutHelper, which exposes a model instance, in which the current breakpoint is updated according
-     * to the width of the registered control.
-     * @private
-     */
-    function LayoutHelper () {
-        this._oLayoutModel = new JSONModel({
-            currentBreakpoint: {}
-        });
-    }
-
-    /**
-     * Called if the layout parameters, such as theme change or sizeBehavior change.
-     * Calls the onResize function to trigger a recalculation.
-     *
-     * @private
-     * @since 1.116.0
-     */
-    LayoutHelper.prototype._onLayoutChange = function () {
-        let oDomElement;
-
-        if (!this._oControl) {
-            return;
-        }
-
-        if (this._oControl instanceof Element) {
-            oDomElement = this._oControl;
-        } else {
-            oDomElement = this._oControl.isA("sap.ui.core.Control") ? this._oControl.getDomRef() : null;
-        }
-
-        if (!oDomElement) {
-            return;
-        }
-
-        this.onResize({
-            size: {
-                width: oDomElement.getBoundingClientRect().width
-            }
-        });
-    };
-
-    /**
-     * Registers a ResizeHandler on the given control. Skips if a resizeHandlerId already exists.
-     * When the browser is resized, the current breakpoint config is set to the model.
-     *
-     * @param {sap.ui.core.Control} oControl The control to attach the resize handler to.
-     * @since 1.116.0
-     * @private
-     */
-    LayoutHelper.prototype.register = function (oControl) {
-        if (this._sResizeHandlerId) {
-            Log.warning("A ResizeHandler is already registered. Deregister first.");
-            return;
-        }
-        this._oControl = oControl;
-        this._sResizeHandlerId = ResizeHandler.register(this._oControl, this.onResize.bind(this));
-        Config.on("/core/home/sizeBehavior").do(this._onLayoutChange.bind(this));
-        EventHub.on("themeChanged").do(this._onLayoutChange.bind(this));
-    };
-
-    /**
-     * Returns the layout model.
-     *
-     * @returns {sap.ui.model.json.JSONModel} The model instance.
-     * @private
-     * @since 1.116.0
-     */
-    LayoutHelper.prototype.getModel = function () {
-        return this._oLayoutModel;
-    };
-
-    /**
-     * De-registers the resizeHandler.
-     * @private
-     * @since 1.116.0
-     */
-    LayoutHelper.prototype.deregister = function () {
-        if (this._sResizeHandlerId) {
-            ResizeHandler.deregister(this._sResizeHandlerId);
-            this._sResizeHandlerId = null;
-        }
-    };
-
-    /**
-     * Called when the browser window is resized. Sets the current breakpoint to the model.
-     *
-     * @param {sap.ui.base.Event|{size: {width: int}}} oEvent The resize event, containing the new width.
-     * @private
-     * @since 1.116.0
-     */
-    LayoutHelper.prototype.onResize = async function (oEvent) {
-        if (this.iWidth === oEvent.size.width) {
-            return;
-        }
-        this.iWidth = oEvent.size.width;
-        const oBreakpoint = await this._getBreakpointSettingsForWidth(oEvent.size.width);
-        this._oLayoutModel.setProperty("/currentBreakpoint", oBreakpoint);
-    };
-
-    /**
-     * Returns the breakpoint for the given width.
-     *
-     * @param {int} iWidth The width.
-     * @returns {Promise<BreakpointSetting>} The breakpoint config.
-     * @private
-     * @since 1.116.0
-     */
-    LayoutHelper.prototype._getBreakpointSettingsForWidth = async function (iWidth) {
-        const aBreakpoints = await this._getBreakpointSettings();
-        for (const i in aBreakpoints) {
-            if (iWidth <= aBreakpoints[i].high && iWidth >= aBreakpoints[i].low) {
-                return aBreakpoints[i];
-            }
-        }
-    };
-
-    /**
-     * Returns a .rem value based on the tile gap or width parameter
-     *
-     * @param {string} sValue Tile spacing parameter
-     * @returns {string} Value in .rem
-     * @private
-     * @since 1.116.0
-     */
-    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 {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 {Promise<BreakpointSetting[]>} An array of all existing breakpoints.
-     * @private
-     * @since 1.116.0
-     */
-    LayoutHelper.prototype._getBreakpointSettings = async function () {
-        const sCurrentConfigSizeBehavior = Config.last("/core/home/sizeBehavior");
-        const sSizeBehaviorResponsive = sCurrentConfigSizeBehavior === TileSizeBehavior.Small
-            ? TileSizeBehavior.Small
-            : TileSizeBehavior.Responsive;
-
-        const sSpacingParamResponsive = sCurrentConfigSizeBehavior === TileSizeBehavior.Small
-            ? "_sap_ushell_Tile_SpacingXS"
-            : "_sap_ushell_Tile_Spacing";
-
-        const sTileWidthParamResponsive = sCurrentConfigSizeBehavior === TileSizeBehavior.Small
-            ? "_sap_ushell_Tile_WidthXS"
-            : "_sap_ushell_Tile_Width";
-
-        const 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"]);
-
-        const mGap = {
-            lt: this._formatNumericThemeParam(sSpacing),
-            st: this._formatNumericThemeParam(sSpacingXS)
-        };
-
-        const [sWidth, sWidthXS] = await ushellUtils.getThemingParameters([sTileWidthParamResponsive, "_sap_ushell_Tile_WidthXS"]);
-
-        const mRowSize = {
-            lt: this._formatNumericThemeParam(sWidth),
-            st: this._formatNumericThemeParam(sWidthXS)
-        };
-
-        return [
-            {
-                /**
-                 * Large Tiles, Large Padding, 4 columns max
-                 */
-                high: Infinity,
-                low: 1724,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-lp-4",
-                maxColumnsPerRow: 4,
-                columnMinFlex: mColumnMinFlex["lt-lp"]
-            },
-            {
-                /**
-                 * Large Tiles, Small Padding, 4 columns max
-                 */
-                high: 1723,
-                low: 1660,
-                sizeBehavior: sSizeBehaviorResponsive,
-                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: 1468,
-                sizeBehavior: TileSizeBehavior.Small,
-                gap: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-lp-4",
-                maxColumnsPerRow: 4,
-                columnMinFlex: mColumnMinFlex["st-lp"]
-            },
-            {
-                /**
-                 * Small Tiles, Small Padding, 4 columns max
-                 */
-                high: 1467,
-                low: 1404,
-                sizeBehavior: TileSizeBehavior.Small,
-                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: 1296,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-lp-3",
-                maxColumnsPerRow: 3,
-                columnMinFlex: mColumnMinFlex["lt-lp"]
-            },
-            {
-                /**
-                 * Large Tiles, Small Padding, 3 columns max
-                 */
-                high: 1295,
-                low: 1248,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-sp-3",
-                maxColumnsPerRow: 3,
-                columnMinFlex: mColumnMinFlex["lt-sp"]
-            },
-            {
-                /**
-                 * Small Tiles, Large Padding, 3 columns max
-                 */
-                high: 1247,
-                low: 1104,
-                sizeBehavior: TileSizeBehavior.Small,
-                gap: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-lp-3",
-                maxColumnsPerRow: 3,
-                columnMinFlex: mColumnMinFlex["st-lp"]
-            },
-            {
-                /**
-                 * Small Tiles, Small Padding, 3 columns max
-                 */
-                high: 1103,
-                low: 1056,
-                sizeBehavior: TileSizeBehavior.Small,
-                gap: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-sp-3",
-                maxColumnsPerRow: 3,
-                columnMinFlex: mColumnMinFlex["st-sp"]
-            },
-            {
-                /**
-                 * Large Tiles, Large Padding, 2 columns max
-                 */
-                high: 1055,
-                low: 880,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-lp-2",
-                maxColumnsPerRow: 2,
-                columnMinFlex: mColumnMinFlex["lt-lp"]
-            },
-            {
-                /**
-                 * Large Tiles, Small Padding, 2 columns max
-                 */
-                high: 879,
-                low: 848,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-sp-2",
-                maxColumnsPerRow: 2,
-                columnMinFlex: mColumnMinFlex["lt-sp"]
-            },
-            {
-                /**
-                 * Small Tiles, Large Padding, 2 columns max
-                 */
-                high: 847,
-                low: 752,
-                sizeBehavior: TileSizeBehavior.Small,
-                gap: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-lp-2",
-                maxColumnsPerRow: 2,
-                columnMinFlex: mColumnMinFlex["st-lp"]
-            },
-            {
-                /**
-                 * Small Tiles, Small Padding, 2 columns max
-                 */
-                high: 751,
-                low: 720,
-                sizeBehavior: TileSizeBehavior.Small,
-                gap: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-sp-2",
-                maxColumnsPerRow: 2,
-                columnMinFlex: mColumnMinFlex["st-sp"]
-            },
-            {
-                /**
-                 * Large Tiles, Large Padding, 1 column max
-                 */
-                high: 719,
-                low: 456,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-lp-1",
-                maxColumnsPerRow: 1,
-                columnMinFlex: mColumnMinFlex["lt-lp"]
-            },
-            {
-                /**
-                 * Large Tiles, Small Padding, 1 column max
-                 */
-                high: 455,
-                low: 440,
-                sizeBehavior: sSizeBehaviorResponsive,
-                gap: mGap.lt,
-                rowSize: mRowSize.lt,
-                name: "lt-sp-1",
-                maxColumnsPerRow: 1,
-                columnMinFlex: mColumnMinFlex["lt-sp"]
-            },
-            {
-                /**
-                 * Small Tiles, Large Padding, 1 column max
-                 */
-                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: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-sp-1",
-                maxColumnsPerRow: 1,
-                columnMinFlex: mColumnMinFlex["st-sp"]
-            },
-            {
-                /**
-                 * Small Tiles, Small Padding, 1 column max
-                 */
-                high: 375,
-                low: 0,
-                sizeBehavior: TileSizeBehavior.Small,
-                gap: mGap.st,
-                rowSize: mRowSize.st,
-                name: "st-sp-0",
-                maxColumnsPerRow: 1,
-                columnMinFlex: mColumnMinFlex["st-sp"]
-            }
-        ];
-    };
-
-    return new LayoutHelper();
-});

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

@@ -1,182 +0,0 @@
-// Copyright (c) 2009-2025 SAP SE, All Rights Reserved
-
-sap.ui.define([
-    "sap/ui/core/Control",
-    "sap/ushell/components/workPageBuilder/controls/WorkPageRenderer",
-    "sap/m/IllustratedMessage",
-    "sap/m/Button",
-    "sap/m/library",
-    "sap/ushell/utils",
-    "sap/ushell/ui/launchpad/ExtendedChangeDetection"
-], (
-    Control,
-    Renderer,
-    IllustratedMessage,
-    Button,
-    mobileLibrary,
-    Utils,
-    ExtendedChangeDetection
-) => {
-    "use strict";
-
-    // shortcut for sap.m.IllustratedMessageSize
-    const IllustratedMessageSize = mobileLibrary.IllustratedMessageSize;
-
-    // shortcut for sap.m.IllustratedMessageType
-    const IllustratedMessageType = mobileLibrary.IllustratedMessageType;
-
-    /**
-     * Constructor for a new WorkPage.
-     *
-     * @param {string} [sId] ID for the new control, generated automatically if no ID is given
-     * @param {object} [mSettings] Initial settings for the new control
-     *
-     * @class
-     * The WorkPage represents a collection of WorkPageRows.
-     * @extends sap.ui.core.Control
-     *
-     *
-     * @version 1.141.3
-     *
-     * @private
-     * @experimental
-     * @alias sap.ushell.components.workPageBuilder.controls.WorkPage
-     */
-    const WorkPage = Control.extend("sap.ushell.components.workPageBuilder.controls.WorkPage", /** @lends sap.ushell.components.workPageBuilder.controls.WorkPage.prototype */ {
-        metadata: {
-            library: "sap.ushell",
-            properties: {
-                /**
-                 * Specifies whether the addSection button is visible.
-                 */
-                editMode: { type: "boolean", group: "Misc", defaultValue: false, bindable: true },
-                /**
-                 * Specifies whether the page title is visible.
-                 */
-                showTitle: { type: "boolean", group: "Misc", defaultValue: true, bindable: true },
-                /**
-                 * Title to display on the empty page illustration
-                 */
-                emptyIllustrationTitle: { type: "string", group: "Misc", defaultValue: "", bindable: true },
-                /**
-                 * Message to display on the empty page illustration
-                 */
-                emptyIllustrationMessage: { type: "string", group: "Misc", defaultValue: "", bindable: true },
-                /**
-                 * Message to display on the Add Row button on the empty page illustration
-                 */
-                emptyIllustrationButtonText: { type: "string", group: "Misc", defaultValue: "", bindable: true },
-                /**
-                 * Boolean to indicate if the WorkPage has been loaded yet
-                 */
-                loaded: { type: "boolean", defaultValue: false, bindable: true },
-                /**
-                 * The current breakpoint which will be added to the page attributes
-                 */
-                breakpoint: { type: "string", defaultValue: "lt-lp-4", bindable: true }
-            },
-            defaultAggregation: "rows",
-            aggregations: {
-                /**
-                 * Aggregation of WorkPageRows that are displayed on the WorkPage.
-                 */
-                rows: { type: "sap.ushell.components.workPageBuilder.controls.WorkPageRow", multiple: true, singularName: "row", bindable: true },
-                /**
-                 * The page title control
-                 */
-                title: { type: "sap.ui.core.Control", multiple: false, defaultValue: null, bindable: true },
-                /**
-                 * Private aggregation for the Illustrated Message that is displayed if the WorkPage is empty.
-                 * @private
-                 */
-                _emptyIllustration: { type: "sap.m.IllustratedMessage", multiple: false, visibility: "hidden" }
-
-            },
-            events: {
-                /**
-                 * Fired if the first row is added to the page.
-                 */
-                addFirstRow: {},
-                /**
-                 * Fired after the WorkPage has been rendered.
-                 */
-                afterRendering: {}
-            }
-        },
-        renderer: Renderer
-    });
-
-    /**
-     * Initializes the control.
-     * Extended Change Detection for the rows aggregation.
-     */
-    WorkPage.prototype.init = function () {
-        this._oRowsChangeDetection = new ExtendedChangeDetection("rows", this);
-
-        this.oDelegate = {
-            onAfterRendering: function () {
-                Utils.setPerformanceMark("FLP -- work page after rendering");
-            }
-        };
-
-        this.addDelegate(this.oDelegate);
-
-        Control.prototype.init.apply(this, arguments);
-    };
-
-    /**
-     * Hook to fire afterRendering event.
-     */
-    WorkPage.prototype.onAfterRendering = function () {
-        this.fireEvent("afterRendering");
-    };
-
-    /**
-     * Called if the control is destroyed.
-     * Detaches the listeners.
-     */
-    WorkPage.prototype.exit = function () {
-        this._oRowsChangeDetection.destroy();
-        this.removeDelegate(this.oDelegate);
-
-        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.
- */
-    WorkPage.prototype.getIllustratedMessage = function () {
-        if (!this.getAggregation("_emptyIllustration")) {
-            this.setAggregation("_emptyIllustration", this._createIllustratedMessage());
-        }
-        return this.getAggregation("_emptyIllustration");
-    };
-
-    /**
-     * Creates an IllustratedMessage control with an additional button to add the first row.
-     * This control is displayed if the WorkPage is empty.
-     *
-     * @returns {sap.m.IllustratedMessage} The IllustratedMessage control.
-     * @private
-     */
-    WorkPage.prototype._createIllustratedMessage = function () {
-        return new IllustratedMessage(`${this.getId()}-emptyWorkpageMessage`, {
-            illustrationType: IllustratedMessageType.AddColumn,
-            illustrationSize: IllustratedMessageSize.Small,
-            title: this.getEmptyIllustrationTitle(),
-            description: this.getEmptyIllustrationMessage(),
-            additionalContent: [
-                new Button(`${this.getId()}-addFirstRowButton`, {
-                    text: this.getEmptyIllustrationButtonText(),
-                    press: function () {
-                        this.fireEvent("addFirstRow");
-                    }.bind(this)
-                }).addStyleClass("sapUiTinyMarginBegin sapUiTinyMarginEnd")
-            ],
-            visible: "{/editMode}"
-        });
-    };
-    return WorkPage;
-});