@sapui5/sap.suite.ui.commons 1.119.0 → 1.120.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.suite.ui.commons",
-  "version": "1.119.0",
+  "version": "1.120.0",
   "description": "SAPUI5 Library sap.suite.ui.commons",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/suite/ui/commons/.library

@@ -7,7 +7,7 @@
 		SAP UI development toolkit for HTML5 (SAPUI5)
 		(c) Copyright 2009-2015 SAP SE. All rights reserved
 	</copyright>
-	<version>1.119.0</version>
+	<version>1.120.0</version>
 
 	<documentation>SAP UI library: sap.suite.ui.commons</documentation>
 

package/src/sap/suite/ui/commons/App.js

@@ -0,0 +1,24 @@
+sap.ui.define([
+    "sap/suite/ui/commons/BaseApp"
+], function (
+    BaseApp
+) {
+    "use strict";
+
+    var App = BaseApp.extend("sap.suite.ui.commons.App", {
+        metadata : {
+            properties : {
+                icon: { type: "string", group: "Misc", defaultValue: '' },
+                url: { type: "string", group: "Misc", defaultValue: '' }
+            }
+        },
+        events:{}
+    });
+
+    App.prototype.launchApp = async (oEvent, sTargetURL,sTitle) => {
+        const oSpaceContentService = await sap.ushell.Container.getServiceAsync("SpaceContent");
+        oSpaceContentService.launchTileTarget(sTargetURL, sTitle);
+    };
+
+    return App;
+});

package/src/sap/suite/ui/commons/AppsContainer.js

@@ -0,0 +1,30 @@
+sap.ui.define([
+    "sap/suite/ui/commons/BaseContainer",
+    "./library"
+], function (
+    BaseContainer,
+    library
+) {
+    "use strict";
+
+    var LayoutType = library.LayoutType;
+
+    var AppsContainer = BaseContainer.extend("sap.suite.ui.commons.AppsContainer", {
+        metadata:{
+            properties : {
+                layout: { type: "sap.suite.ui.commons.LayoutType", group: "Misc", visibility: "hidden" }
+            }
+        },
+        renderer: {
+            apiVersion: 2
+        }
+    });
+
+    AppsContainer.prototype.init = function () {
+        this.setLayout(LayoutType.SideBySide);
+        this.setTitle(this.getResourceBundle().getText("appsTitle"));
+        BaseContainer.prototype.init.apply(this, arguments);
+    };
+
+    return AppsContainer;
+});

package/src/sap/suite/ui/commons/AriaProperties.js

@@ -19,7 +19,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.119.0
+	 * @version 1.120.0
 	 * @since 1.65.0
 	 *
 	 * @constructor

package/src/sap/suite/ui/commons/BaseApp.js

@@ -0,0 +1,24 @@
+sap.ui.define([
+    "sap/ui/core/Element"
+], function (
+    Element
+) {
+    "use strict";
+
+    var BaseApp = Element.extend("sap.suite.ui.commons.BaseApp", {
+        metadata : {
+            properties : {
+                title: { type: "string", group: "Misc", defaultValue: '' },
+                bgColor: { type: "string", group: "Misc", defaultValue: '' }
+            },
+            events: {
+                press: {}
+            },
+            aggregations: {
+                menuButtons: {type: "sap.suite.ui.commons.MenuButton", multiple: true, singularName: "menuButton"}
+            }
+        }
+    });
+
+    return BaseApp;
+});

package/src/sap/suite/ui/commons/BaseAppPanel.js

@@ -0,0 +1,104 @@
+sap.ui.define([
+    "sap/suite/ui/commons/BasePanel",
+    "sap/m/GenericTile",
+    "sap/m/HBox",
+    "sap/m/VBox",
+    "sap/m/IllustratedMessage",
+    "sap/ui/core/theming/Parameters",
+    "sap/ushell/utils/WindowUtils"
+], function (
+    BasePanel,
+    GenericTile,
+    HBox,
+    VBox,
+    IllustratedMessage,
+    Parameters,
+    WindowUtils
+) {
+    "use strict";
+
+    var BaseAppPanel = BasePanel.extend("sap.suite.ui.commons.BaseAppPanel", {
+        metadata : {
+            properties : {},
+            defaultAggregation: "apps",
+            aggregations: {
+                apps: {type: "sap.suite.ui.commons.App", singularName: "app", multiple: true}
+            }
+        }
+    });
+
+    BaseAppPanel.prototype.getDefaultAppColor = function () {
+        const sLegendName = "sapLegendColor9";
+        return {
+            key: sLegendName,
+            value: Parameters.get({
+                name: sLegendName
+            }),
+            assigned: false
+        };
+    };
+
+    BaseAppPanel.prototype.setInnerControls = function(){
+        let aApps = this.getApps() || [];
+        if (!this._oWrapper) {
+            aApps = (aApps).map((app) => {
+                return new GenericTile({
+                    id: `${app.getId()}--tile`,
+                    scope: "ActionMore",
+                    state: "Loaded",
+                    mode:"IconMode",
+                    sizeBehavior: "Small",
+                    header: app.getTitle(),
+                    tileBadge: app.getNumber?.(),
+                    //subheader: "",
+                    backgroundColor: app.getBgColor() || this.getDefaultAppColor()?.key,
+                    tileIcon: app?.getIcon?.(),
+                    url: WindowUtils.getLeanURL(app.getUrl()),
+                    frameType: "TwoByHalf",
+                    renderOnThemeChange: true,
+                    dropAreaOffset:  4,
+                    press: (e) => app.launchApp(e, app.getUrl(), app.getTitle())
+                }).addStyleClass("sapUiTinyMargin");
+            });
+            let oControl;
+            if (aApps.length) {
+                oControl = new HBox({
+                    wrap: "Wrap",
+                    backgroundDesign: "Solid",
+                    items: [...aApps]
+                });
+            } else {
+                const oIllustratedMessage = new IllustratedMessage({
+                    illustrationSize: "Spot",
+                    illustrationType: "sapIllus-AddColumn",
+                    title: this.getResourceBundle().getText("noAppsTitle"),
+                    description: this.getNoDataText()
+                });
+                oControl = new VBox({
+                    wrap: "Wrap",
+                    backgroundDesign: "Solid",
+                    items: [oIllustratedMessage]
+                });
+            }
+            this._oWrapper = oControl;
+        }
+        this.addContent(this._oWrapper);
+    };
+
+    BaseAppPanel.prototype._ProcessAppArray = function (aApps) {
+        return aApps.filter(function (app) {
+            return app.appType === "Application";
+        }).map(function(aApp){
+            aApp.orgAppId = aApp.appId;
+            aApp.appId = aApp.url;
+            aApp.leanURL = WindowUtils.getLeanURL(aApp.url);
+            return aApp;
+        });
+    };
+
+    BaseAppPanel.prototype.init = function () {
+        BasePanel.prototype.init.apply(this, arguments);
+    };
+
+    return BaseAppPanel;
+});

package/src/sap/suite/ui/commons/BaseContainer.js

@@ -0,0 +1,402 @@
+sap.ui.define([
+    "sap/ui/core/Control",
+    "./library",
+    "sap/m/IconTabBar",
+    "sap/m/IconTabFilter",
+    "sap/m/Title",
+    "sap/m/HBox",
+    "sap/m/FlexBox",
+    "sap/m/Button",
+    "sap/ui/core/CustomData",
+    "sap/ui/core/Lib"
+], function (
+    Control,
+    library,
+    IconTabBar,
+    IconTabFilter,
+    Title,
+    HBox,
+    FlexBox,
+    Button,
+    CustomData,
+    CoreLib
+) {
+    "use strict";
+
+    const LayoutType = library.LayoutType;
+
+    const BaseContainer = Control.extend("sap.suite.ui.commons.BaseContainer", {
+        metadata : {
+            properties : {
+                title: { type: "string", group: "Misc", defaultValue: '' },
+                layout: { type: "sap.suite.ui.commons.LayoutType", group: "Misc", defaultValue: LayoutType.SideBySide },
+                selectedKey: { type: "string", group: "Misc", defaultValue: '' }
+            },
+            defaultAggregation: "content",
+            aggregations: {
+                content: { type: "sap.suite.ui.commons.BasePanel", singularName: "content", multiple: true },
+                actionButtons: { type: "sap.m.Button", multiple: true, singularName: "actionButton", visibility: "hidden" },
+                menuButtons: { type: "sap.suite.ui.commons.MenuButton", multiple: true, singularName: "menuButton", visibility: "hidden" }
+            }
+        }
+    });
+
+    /**
+     * Get library resource bundle
+     *
+     * @returns {Object} library resource bundle
+     */
+    BaseContainer.prototype.getResourceBundle = function () {
+        this._resBundle = this._resBundle || CoreLib.getResourceBundleFor("sap.suite.ui.commons");
+        return this._resBundle;
+    };
+
+    /**
+     * Init lifecycle method
+     *
+     */
+    BaseContainer.prototype.init = function () {
+        this._createHeaderIfRequired(this);
+    };
+
+    /**
+     * Returns container header
+     *
+     * @returns {Object} container header
+     */
+    BaseContainer.prototype.getHeader = function () {
+        return this._controlMap.get(`${this.getId()}-header`);
+    };
+
+    /**
+     * Create inner control for storing content from panel
+     *
+     */
+    BaseContainer.prototype._createInnerControl = function () {
+        const layout = this.getLayout();
+
+        if (layout === LayoutType.Horizontal || layout === LayoutType.Vertical) {
+            if (!this._wrapper) {
+                this._wrapper = new FlexBox(`${this.getId()}-wrapper`, {
+                    width: "100%",
+                    renderType: "Bare"
+                }).addStyleClass("sapUiBaseWrapper");
+                this._wrapper.setParent(this);
+            }
+            this._wrapper.setDirection(layout === LayoutType.Horizontal ? "Row" : "Column");
+        } else if (!this._iconTabBar) {
+            this._iconTabBar = new IconTabBar(`${this.getId()}-iconTabBar`, {
+                expandable: false,
+                backgroundDesign: "Transparent",
+                headerMode: "Inline",
+                headerBackgroundDesign: "Transparent",
+                select: this.onPanelSelect.bind(this)
+            });
+            this._iconTabBar.setParent(this);
+        }
+    };
+
+    /**
+     * Returns inner control corresponding to the specified layout
+     *
+     * @returns {Object} inner control based on the layout
+     */
+    BaseContainer.prototype.getInnerControl = function () {
+        return this.getLayout() === LayoutType.SideBySide ? this._iconTabBar : this._wrapper;
+    };
+
+    /**
+     * Adds corresponding control to panel. The control would be added to the
+     * corresponding target inner control based on the layout.
+     *
+     * @param {Object} panel - panel to which control must be added
+     * @param {Object} control - control to be added
+     */
+    BaseContainer.prototype.addToPanel = function (panel, control) {
+        if (this.getLayout() === LayoutType.SideBySide) {
+            this._fetchTabFilter(panel)?.addContent(control);
+        } else {
+            this._controlMap.get(`${panel.getId()}-wrapper`)?.addItem(control);
+        }
+    };
+
+    /**
+     * Creates and returns IconTabBarFilter for the specified panel to be placed
+     * in the IconTabBar inner control in case of SideBySide layout
+     *
+     * @param {Object} panel - panel whose icon tab filter must be fetched
+     * @returns {Object} IconTabBarFilter for the specified panel
+     */
+    BaseContainer.prototype._fetchTabFilter = function (panel) {
+        const id = `${panel.getId()}-tabFilter`;
+        this._controlMap = this._controlMap || new Map();
+
+        if (!this._controlMap.get(id)) {
+            const iconTabFilter = new IconTabFilter(id, {
+                key: panel.getKey(),
+                text: panel.getTitle()
+            });
+            iconTabFilter.addCustomData(
+                new CustomData({
+                    key: "sap-ui-fastnavgroup",
+                    value: "true",
+                    writeToDom: true
+                })
+            );
+            this._controlMap.set(id, iconTabFilter);
+        }
+
+        //Add panel content to the created filter
+        panel.getContent()?.forEach((oContent) => this._controlMap.get(id).addContent(oContent));
+
+        return this._controlMap.get(id);
+    };
+
+     /**
+     * Creates and returns a button for the corresponding header ActionButton
+     * or MenuButton elements
+     *
+     * @param {Object} headerButton - ActionButton or MenuButton element
+     * @returns {Object} Button instance created for the header element
+     */
+    BaseContainer.prototype._fetchHeaderButton = function (headerButton) {
+        const id = headerButton.getId();
+        this._controlMap = this._controlMap || new Map();
+
+        if (!this._controlMap.get(id)) {
+            this._controlMap.set(id, new Button(`${id}-btn`, {
+                type: "Transparent",
+                press: (oEvent) => headerButton.firePress({ button: oEvent.getSource() })
+            }));
+        }
+
+        //Update button details
+        const button = this._controlMap.get(id);
+        button.setText(headerButton.getText());
+        button.setIcon(headerButton.getIcon());
+
+        return button;
+    };
+
+    /**
+     * Returns the selected panel in the IconTabBar inner control in
+     * case of SideBySide layout
+     *
+     * @returns {Object} selected panel
+     */
+    BaseContainer.prototype.getSelectedPanel = function () {
+        const panel = this.getContent()?.find((panel) => panel.getKey() === this.getSelectedKey()) || this.getContent()?.[0];
+        this.setProperty("selectedKey", panel?.getKey(), true);
+
+        return panel;
+    };
+
+    BaseContainer.prototype.setTitle = function (sTitle) {
+        //suppress invalidate to prevent container re-rendering. re-render only the concerned element
+        this.setProperty("title", sTitle, true);
+        this._controlMap?.get(`${this.getId()}-header-title`).setText(sTitle);
+        return this;
+    };
+
+    /**
+     * onBeforeRendering lifecycle method
+     *
+     */
+    BaseContainer.prototype.onBeforeRendering = function () {
+        //create layout-specific inner control
+        this._createInnerControl();
+
+        //fetch and update container header
+        this.updateContainerHeader();
+
+        //add content from all panels to inner control
+        this._addAllPanelContent();
+    };
+
+    /**
+     * Update container header information
+     */
+    BaseContainer.prototype.updateContainerHeader = function () {
+        //clear container header elements
+        this._controlMap.get(this.getId() + "-header-contentLeft").removeAllItems();
+        this._controlMap.get(this.getId() + "-header-contentRight").removeAllItems();
+
+        //update container header elements
+        this._updateHeader(this);
+    };
+
+    /**
+     * Returns header of the specified panel after updating it
+     *
+     * @param {Object} panel - panel to be updated
+     * @returns {Object} header associated with the panel
+     */
+    BaseContainer.prototype.updateAndFetchPanelHeader = function (panel) {
+        const header = this._createHeaderIfRequired(panel);
+        const isTitleVisible = panel.getTitle()?.trim().length > 0;
+
+        //update panel header elements
+        this._updateHeader(panel);
+
+        //add header styling only if any of the header elements are visible
+        header.toggleStyleClass("sapUiPanelHeader", isTitleVisible || panel.getAggregation("menuButtons")?.length > 0 || panel.getAggregation("actionButtons")?.length > 0);
+
+        return header;
+    };
+
+    /**
+     * Updates header information of a specified container or a panel
+     *
+     * @param {Object} control - can be container or panel
+     */
+    BaseContainer.prototype._updateHeader = function (control) {
+        const isSideBySideLayout = this.getLayout() === LayoutType.SideBySide;
+        const isContainer = control.isA("sap.suite.ui.commons.BaseContainer");
+
+        //Update Title
+        this._controlMap.get(control.getId() + "-header-title").setText(control.getTitle());
+        this._controlMap.get(control.getId() + "-header-title").setVisible(control.getTitle()?.trim().length > 0);
+
+        //Update Menu Buttons
+        (isContainer && isSideBySideLayout ? this.getSelectedPanel() : control)
+            .getAggregation("menuButtons")
+            ?.forEach((oMenuButton) => this._controlMap.get(control.getId() + "-header-contentLeft").addItem(this._fetchHeaderButton(oMenuButton)));
+
+        //Update Action Buttons
+        (isContainer && isSideBySideLayout ? this.getSelectedPanel() : control)
+            .getAggregation("actionButtons")
+            ?.forEach((oActionButton) => this._controlMap.get(control.getId() + "-header-contentRight").addItem(this._fetchHeaderButton(oActionButton)));
+    };
+
+    /**
+     * Creates and returns a wrapper for containing the specified panel
+     * content in case of Horizontal and Vertical layout
+     *
+     * @param {Object} panel - panel for which wrapper has to created
+     * @returns {Object} wrapper container for the given panel
+     */
+    BaseContainer.prototype._fetchPanelContentWrapper = function (panel) {
+        const id = `${panel.getId()}-contentWrapper`;
+        this._controlMap = this._controlMap || new Map();
+
+        if (!this._controlMap.get(id)) {
+            this._controlMap.set(id, new FlexBox(id, {
+                width: panel.getWidth(),
+                height: panel.getHeight(),
+                direction: "Column",
+                renderType: "Bare"
+            }));
+        }
+
+        //Add header as the first item in case of Horizontal and Vertical layout
+        this._controlMap.get(id).addItem(this.updateAndFetchPanelHeader(panel));
+        panel.getContent()?.forEach((oContent) => this._controlMap.get(id).addItem(oContent));
+
+        return this._controlMap.get(id);
+    };
+
+    /**
+     * Add content from all panels to the layout-specific inner control
+     *
+     */
+    BaseContainer.prototype._addAllPanelContent = function () {
+        const aPanels = this.getContent();
+
+        if (this.getLayout() === LayoutType.SideBySide) {
+            this._iconTabBar.removeAllItems();
+            aPanels?.forEach((panel) => this._iconTabBar.addItem(this._fetchTabFilter(panel)));
+            this._iconTabBar.setSelectedKey(this.getSelectedKey());
+        } else {
+            this._wrapper.removeAllItems();
+            aPanels?.forEach((panel) => this._wrapper.addItem(this._fetchPanelContentWrapper(panel)));
+        }
+    };
+
+    /**
+     * Creates and returns header for both container as well as panels
+     *
+     * @param {Object} control - can be a container or a panel
+     * @returns {Object} header for the given container or panel
+     */
+    BaseContainer.prototype._createHeaderIfRequired = function (control) {
+        const controlId = control.getId();
+        const id = `${controlId}-header`;
+        const isPanel = control.isA("sap.suite.ui.commons.BasePanel");
+        this._controlMap = this._controlMap || new Map();
+
+        if (!this._controlMap.get(id)) {
+            //create header elements
+            this._controlMap.set(`${controlId}-header-title`, new Title(`${controlId}-title`, { titleStyle: isPanel ? "H6" : "H4" }));
+            this._controlMap.set(`${controlId}-header-contentLeft`, new HBox(`${controlId}-contentLeft`, { renderType: "Bare" }).addStyleClass("sapUiSectionContentArea"));
+            this._controlMap.set(`${controlId}-header-contentRight`, new HBox(`${controlId}-contentRight`, { renderType: "Bare" }).addStyleClass("sapUiSectionContentArea"));
+            this._controlMap.set(`${controlId}-header-content`, new HBox(`${controlId}-content`, {
+                width: "100%",
+                justifyContent: "SpaceBetween",
+                renderType: "Bare",
+                items: [
+                    this._controlMap.get(`${controlId}-header-contentLeft`),
+                    this._controlMap.get(`${controlId}-header-contentRight`)
+                ]
+            }).addStyleClass("sapUiTinyMarginBegin"));
+
+            //create header container
+            this._controlMap.set(id, new HBox(`${controlId}-header`,{
+                alignItems: "Center",
+                items: [
+                    this._controlMap.get(`${controlId}-header-title`),
+                    this._controlMap.get(`${controlId}-header-content`)
+                ]
+            }));
+            this._controlMap.get(id).setParent(this);
+        }
+
+        //add control-specific styling
+        this._controlMap.get(id).addStyleClass(isPanel ? "sapUiPanelHeader" : "sapUiContainerHeader");
+
+        return this._controlMap.get(id);
+    };
+
+    /**
+     * Handler for selection of panel in SideBySide layout
+     *
+     * @param {Object} event - event object
+     */
+    BaseContainer.prototype.onPanelSelect = function (event) {
+        //suppress invalidation to prevent container re-rendering. render the specific header element instead
+        this.setProperty("selectedKey", event.getSource().getSelectedKey(), true);
+        this.updateContainerHeader();
+    };
+
+    BaseContainer.prototype.getActionButtons = function () {
+        this._aActionButtons = this._aActionButtons || this.getAggregation("actionButtons");
+        return this._aActionButtons;
+    };
+
+    /**
+     * Updates the count information of IconTabFilter of IconTabBar inner control
+     * in case of SideBySide layout
+     *
+     * @param {Object} panel - associated panel
+     * @param {string} count - updated count
+     */
+    BaseContainer.prototype.setPanelCount = function (panel, count) {
+        if (this.getLayout() === LayoutType.SideBySide) {
+            this._fetchTabFilter(panel).setCount(count);
+        }
+    };
+
+    /**
+     * Removes a panel from the container and removes it from the
+     * corresponding inner control
+     *
+     * @param {Object} panel - panel to be removed
+     */
+    BaseContainer.prototype.removeContent = function (panel) {
+        if (this.getSelectedKey() && this.getSelectedKey() === panel.getKey()) {
+            this.setProperty("selectedKey", undefined, true);
+        }
+        this.removeAggregation("content", panel);
+    };
+
+    return BaseContainer;
+});

package/src/sap/suite/ui/commons/BaseContainerRenderer.js

@@ -0,0 +1,34 @@
+sap.ui.define([
+    "./library"
+], function (
+    library
+) {
+    "use strict";
+
+    var LayoutType = library.LayoutType;
+
+    return {
+        apiVersion: 2,
+        render: function (oRm, oControl) {
+            oRm.openStart("div", oControl).class("sapUiBaseContainer");
+
+            //Apply Layout based style classes
+            if (oControl.getLayout() === LayoutType.SideBySide) {
+                oRm.class("sapUiSideBySide");
+            } else if (oControl.getLayout() === LayoutType.Horizontal) {
+                oRm.class("sapUiHorizontal");
+            } else {
+                oRm.class("sapUiVertical");
+            }
+
+            oRm.openEnd();
+            this.renderContent(oRm, oControl);
+            oRm.close("div");
+        },
+
+        renderContent: function (oRm, oControl) {
+            oRm.renderControl(oControl.getHeader());
+            oRm.renderControl(oControl.getInnerControl());
+        }
+    };
+});