@sapui5/sap.suite.ui.commons 1.128.0 → 1.129.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.suite.ui.commons",
-  "version": "1.128.0",
+  "version": "1.129.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.128.0</version>
+	<version>1.129.0</version>
 
 	<documentation>SAP UI library: sap.suite.ui.commons</documentation>
 

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.128.0
+	 * @version 1.129.0
 	 * @since 1.65.0
 	 *
 	 * @constructor

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

@@ -134,7 +134,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -148,7 +148,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.60.0
 	 *
 	 * @constructor

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

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @extends sap.ui.base.ManagedObject
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 * @since 1.56.0
 	 *
 	 * @constructor

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

@@ -28,10 +28,16 @@ sap.ui.define([
 	"sap/base/Log",
 	"./ChartContainerRenderer",
 	"sap/suite/ui/commons/util/FullScreenUtil",
-	"sap/ui/core/Lib"
+	"sap/ui/core/Lib",
+	"sap/ui/core/Element",
+	"sap/m/Popover",
+	"sap/m/Dialog",
+	"sap/m/ResponsivePopover",
+	'sap/m/SelectionDetails'
 ], function (jQuery, library, MobileLibrary, VizLibrary, ManagedObject, Button, OverflowToolbar, OverflowToolbarButton,
 			 SegmentedButton, Title, ToolbarSpacer, Device, Control, CustomData, ResizeHandler, ScrollEnablement, ToggleButton,
-			 OverflowToolbarToggleButton, uid, Log, ChartContainerRenderer, FullScreenUtil, CoreLib) {
+			 OverflowToolbarToggleButton, uid, Log, ChartContainerRenderer, FullScreenUtil, CoreLib, Element, Popover, Dialog,
+			 ResponsivePopover, SelectionDetails) {
 	"use strict";
 
 	// shortcut for sap.m.ButtonType
@@ -52,7 +58,7 @@ sap.ui.define([
 	 * @constructor
 	 * @public
 	 * @alias sap.suite.ui.commons.ChartContainer
-	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 * @ui5-metamodel This control/oDependant also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var ChartContainer = Control.extend("sap.suite.ui.commons.ChartContainer", /** @lends sap.suite.ui.commons.ChartContainer.prototype */ {
 		metadata: {
@@ -127,7 +133,20 @@ sap.ui.define([
 				/**
 				 * Defines the width of the Container.
 				 */
-				width: {type: "sap.ui.core.CSSSize", defaultValue: "100%"}
+				width: {type: "sap.ui.core.CSSSize", defaultValue: "100%"},
+				/**
+				 * If set to <code>true</code>, the chart and the toolbar are going to be displayed in fullscreen using the browser fullscreen APIs.
+				 * In fullscreen mode {@link sap.m.Dialog}, {@link sap.m.Popover}, {@link sap.m.ResponsivePopover} and {@link sap.m.SelectionDetails} can be displayed over the ChartContainer.
+				 * In order to display, the controls are to be added as dependents of the ChartContainer.
+				 * @example <caption>Connecting a Dialog to the ChartContainer control</caption>
+				* <pre>
+				*   oChartContainer.addDependent(new Dialog({
+				*		text: "Display Dialog"
+				*  }));
+				* </pre>
+				 * @since 1.129.0
+				 */
+				enableBrowserFullScreen: {type: "boolean", group: "Misc", defaultValue: false}
 			},
 			defaultAggregation: "content",
 			aggregations: {
@@ -220,6 +239,7 @@ sap.ui.define([
 		this._sResizeListenerId = null;
 		this._bHasApplicationToolbar = false;
 		this._iPlaceholderPosition = 0; // Index of the placeholder inside application toolbar
+		this._bIsFullScreenListenerAdded = false;
 
 		//Resource bundle
 		this._oResBundle = CoreLib.getResourceBundleFor("sap.suite.ui.commons");
@@ -285,6 +305,53 @@ sap.ui.define([
 		this._oChartTitle = new Title();
 	};
 
+	ChartContainer.prototype.addDependent = function (oDependant) {
+		if (this.getEnableBrowserFullScreen()) {
+			var bIsSelectionDetail = false;
+			//After opening the respective oControl, append it to the ChartContainer DOM to display the oControl in full screen mode.
+			var fnAppendControlToChart = function(oControl) {
+				if (this.getFullScreen()) {
+					var $BlockRef = jQuery("#sap-ui-blocklayer-popup");
+					var oControlDomRef = oControl.getDomRef();
+					this.getDomRef().append($BlockRef.get(0));
+					this.getDomRef().append(oControlDomRef);
+				}
+			}.bind(this);
+
+			//Before closing the respective oControl, append it back to the main page DOM
+			var fnAppendControlToDOM = function() {
+				if (this.getFullScreen()) {
+					var $BlockRef = jQuery("#sap-ui-blocklayer-popup");
+					var $StatickRef = jQuery("#sap-ui-static");
+					$StatickRef.append($BlockRef);
+				}
+			}.bind(this);
+
+			//SelectionDetails Popover is present as an aggregation of SelectionDetail, Fetch the Popover to attach the respective Open Event.
+			if ( oDependant instanceof SelectionDetails ) {
+				bIsSelectionDetail = true;
+				var oDependant = oDependant._getPopover();
+			}
+
+			//For Dialog / Popover / ResponsivePopover, attach the afterOpen / beforeClose Event.
+			if (oDependant instanceof Dialog || oDependant instanceof Popover || oDependant instanceof ResponsivePopover) {
+				oDependant.attachEvent("afterOpen", function() {
+					fnAppendControlToChart(oDependant);
+				}.bind(this));
+				oDependant.attachEvent("beforeClose", function() {
+					fnAppendControlToDOM(oDependant);
+				}.bind(this));
+				//Adding SelectionDetail as a dependent of ChartContainer to be skipped, As SelectionDetail is added as a part of ChartContainerContent which is already an aggregation of ChartContainer.
+				if ( !bIsSelectionDetail ) {
+					Element.prototype.addDependent.apply(this, arguments);
+				}
+			} else {
+				//Log Errors in case any other controls are opened as a part of ChartContainer in FullScreen Mode.
+				Log.error("Display of dependant " + oDependant.getMetadata()._sClassName + " not supported within ChartContainer.");
+			}
+		}
+	};
+
 	ChartContainer.prototype.onAfterRendering = function () {
 		this._sResizeListenerId = ResizeHandler.register(this, this._performHeightChanges.bind(this));
 		if (!Device.system.desktop) {
@@ -321,6 +388,15 @@ sap.ui.define([
 								&& this.getToolbar().getContent()[0] instanceof sap.m.Title)) {
 			this.getToolbar().setActive(true);
 		}
+		if (this.getEnableBrowserFullScreen()) {
+			//FullScreenChangeEvent must be added only when the properties showFullScreen and enableBrowserFullScreen are set to true
+			if (!this._bIsFullScreenListenerAdded && this.getShowFullScreen()) {
+				if (!this._oFullScreenUtil) {
+					this._oFullScreenUtil = FullScreenUtil;
+				}
+				this._oFullScreenUtil.attachFullScreenChangeEvent(this);
+			}
+		}
 	};
 
 	ChartContainer.prototype.onBeforeRendering = function () {
@@ -373,7 +449,7 @@ sap.ui.define([
 			this._oFullScreenButton.destroy();
 			this._oFullScreenButton = undefined;
 		}
-		if (this._oFullScreenUtil) {
+		if (!this.getEnableBrowserFullScreen() && this._oFullScreenUtil) {
 			this._oFullScreenUtil.cleanUpFullScreen(this);
 		}
 		if (this._oShowLegendButton) {
@@ -639,13 +715,33 @@ sap.ui.define([
 	/* =========================================================== */
 
 	/**
-	 * Toggles between normal and full screen modes.
+	 * Toggles between normal and fullscreen modes.
 	 *
 	 * @private
 	 */
 	ChartContainer.prototype._toggleFullScreen = function () {
 		var bFullScreen = this.getProperty("fullScreen");
+		this._toggleFullScreenButtonState(bFullScreen);
+		bFullScreen = !bFullScreen;
+		if (!this._oFullScreenUtil) {
+			this._oFullScreenUtil = FullScreenUtil;
+		}
+		if (this.getEnableBrowserFullScreen()) {
+			this._oFullScreenUtil.toggleFullScreenBrowserAPI(this, bFullScreen);
+		} else {
+			this._oFullScreenUtil.toggleFullScreen(this, bFullScreen, this._oFullScreenButton, this._toggleFullScreen);
+		}
+	};
 
+	/**
+	 * Toggles the button state between fullscreen and non fullscreen.
+	 *
+	 * @private
+	 */
+	ChartContainer.prototype._toggleFullScreenButtonState = function () {
+		var bFullScreen = this.getProperty("fullScreen");
+		var oContent;
+		var aContent = this.getAggregation("content");
 		var fnSetFullScreenButton = function (sIcon, sText, pressed) {
 			this._oFullScreenButton.setIcon(sIcon);
 			this._oFullScreenButton.setText(sText);
@@ -653,8 +749,6 @@ sap.ui.define([
 			this._oFullScreenButton.setPressed(pressed);
 		}.bind(this);
 
-		var oContent;
-		var aContent = this.getAggregation("content");
 		if (bFullScreen) {
 			this.setProperty("fullScreen", false, true);
 			fnSetFullScreenButton("sap-icon://full-screen", this._oResBundle.getText("CHARTCONTAINER_FULLSCREEN"), false);
@@ -677,14 +771,7 @@ sap.ui.define([
 				}
 			}
 		}
-
-		bFullScreen = !bFullScreen;
-		if (!this._oFullScreenUtil) {
-			this._oFullScreenUtil = FullScreenUtil;
-		}
-
-		this._oFullScreenUtil.toggleFullScreen(this, bFullScreen, this._oFullScreenButton, this._toggleFullScreen);
-	};
+	}
 
 
 	/**

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

@@ -65,6 +65,22 @@ sap.ui.define([
 	/* =========================================================== */
 	ChartContainerContent.prototype.init = function () {
 		this._oSelectionDetails = new SelectionDetails();
+		this._bIsDependentAdded = false;
+		var oParent = this.getParent();
+		if (oParent instanceof ChartContainer && oParent.getEnableBrowserFullScreen()) {
+			//Attach onBeforeRendering on the SelectionDetails to allow adding of the AfterOpen event on the SelectionDetails Popover via the ChartContainer.
+			this._oSelectionDetails.addEventDelegate({
+				onBeforeRendering : function () {
+					if (this._oSelectionDetails.getAggregation("_popover")) {
+						//Flag is used to allow addDependent to be called only once as onBeforeRendering of the SelectionDetail gets triggered multiple times.
+						if (!this._bIsDependentAdded) {
+							this._bIsDependentAdded = true;
+							oParent.addDependent(this._oSelectionDetails);
+						}
+					}
+				}.bind(this)
+			});
+		}
 		this._oSelectionDetails.registerSelectionDetailsItemFactory(ChartContainerContent._selectionDetailsItemFactory);
 	};
 

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

@@ -118,7 +118,7 @@ sap.ui.define([
 	 * @class
 	 * @public
 	 * @internal
-	 * @version 1.128.0
+	 * @version 1.129.0
 	*/
 	var CloudFilePicker = Dialog.extend("sap.suite.ui.commons.CloudFilePicker", {
 		metadata: {

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

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public
@@ -306,8 +306,8 @@ sap.ui.define([
 		this._iScrollingIndex = 0;
 		this._iLastVisibleIndex = 0;
 
-		$leftScroller.on("click", this._scroll.bind(this, -1));
-		$rightScroller.on("click", this._scroll.bind(this, 1));
+		$leftScroller.off("click").on("click", this._scroll.bind(this, -1));
+		$rightScroller.off("click").on("click", this._scroll.bind(this, 1));
 
 		this._iScrollingIndex <= 0 ? $leftScroller.hide() : $leftScroller.show();
 	};

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

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.128.0
+	 * @version 1.129.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -3510,8 +3510,8 @@ sap.ui.define([
 		}
 
 		var mProperties = {
-			src: sSrc
-		};
+			src: sSrc,
+			};
 
 		var sLeftArrowClass = "sapPFHArrowScrollLeft";
 		var sRightArrowClass = "sapPFHArrowScrollRight";

package/src/sap/suite/ui/commons/collaboration/BaseHelperService.js

@@ -76,7 +76,7 @@ sap.ui.define([
 	/**
      * Enables the Microsoft Teams collaboration functionality by providing a contact quick view with the options to start a message, audio call or video call
      * @param {string} sEmail Provides the email of the contact to be used for the communication using Microsoft Teams
-     * @param {string} oParams Parameter object which contains the information to be shared
+     * @param {object} oParams Parameter object which contains the information to be shared
      * @returns {Promise} Returns promise resolving to an instance of the contact quick view providing the data for the collaboration functionality
      * @public
      */

package/src/sap/suite/ui/commons/collaboration/CollaborationManagerService.js

@@ -0,0 +1,70 @@
+/*!
+ * 
+		SAP UI development toolkit for HTML5 (SAPUI5)
+		(c) Copyright 2009-2015 SAP SE. All rights reserved
+	
+ */
+sap.ui.define([
+    "sap/base/Log",
+    "sap/ui/core/Core",
+    "./BaseHelperService",
+    "sap/ui/Device",
+    "sap/ui/core/Lib",
+    "sap/suite/ui/commons/collaboration/channels/MessageChannel"
+], function (Log, Core, BaseHelperService, Device, Library, MessageChannel) {
+    "use strict";
+
+    /**
+     * Provides the Collaboration options
+     * @namespace
+     * @since 1.125
+     * @alias module:sap/suite/ui/commons/collaboration/CollaborationManagerService
+     * @private
+     * @ui5-restricted
+     * @experimental Since 1.125
+     */
+
+    var CollaborationManagerService = BaseHelperService.extend("sap.suite.ui.commons.collaboration.CollaborationManagerService");
+    var oResourceBundle = Library.getResourceBundleFor("sap.suite.ui.commons");
+    var oLogger = Log.getLogger("sap.suite.ui.commons.collaboration.CollaborationManagerService");
+
+    CollaborationManagerService.prototype.triggerH2HChat = function (sAppTitle, sCurrentURL, sEmailId) {
+		this.publishData({ sAppTitle, sCurrentURL, sEmailId });
+    };
+
+    CollaborationManagerService.prototype.getOptions = function () {
+        var H2hChatPlugins = window["sap-ushell-config"] && window["sap-ushell-config"].bootstrapPlugins && window["sap-ushell-config"].bootstrapPlugins.H2H_CHAT_PLUGIN;
+        if (Device.system.desktop) {
+            if (H2hChatPlugins) {
+                return {
+                    "text": oResourceBundle.getText("COLLABORATION_MANGER") ,
+                    "icon": "sap-icon://collaborate",
+                    "press": this.triggerH2HChat.bind(this),
+                    "fesrStepName": "CM:ShareLink"
+                };
+            } else {
+                oLogger.info("Consumer disable Collaboration Manager option");
+            }
+        } else {
+            oLogger.info("Collaboration Manager is not supported in Phone and Tablet");
+        }
+        return null;
+    };
+
+	/**
+	 * Distributes data from FLP and embedded iframes.
+	 * @param {object} oData - The data to be shared through the channel.
+	 */
+	CollaborationManagerService.prototype.publishData = async function(oData) {
+		try {
+			// Obtain the singleton instance of the MessageChannel
+			const oMessageChannel = await MessageChannel.getInstance();
+			// Send the message
+			oMessageChannel.postMessage(oData);
+		} catch (error) {
+			oLogger.error("Failed to publish data:", error);
+		}
+	};
+
+    return CollaborationManagerService;
+});

package/src/sap/suite/ui/commons/collaboration/ServiceContainer.js

@@ -9,11 +9,11 @@ sap.ui.define([
 	"sap/base/Log",
 	"./BaseHelperService",
 	"./TeamsHelperService",
+	"./CollaborationManagerService",
 	"../windowmessages/CollaborationMessageBroker",
 	"../windowmessages/CollaborationMessageConsumer"
-], function (Log, BaseHelperService, TeamsHelperService, CollaborationMessageBroker, CollaborationMessageConsumer) {
+], function (Log, BaseHelperService, TeamsHelperService, CollaborationManagerService, CollaborationMessageBroker, CollaborationMessageConsumer) {
 	"use strict";
-
 	var oLogger = Log.getLogger("sap.suite.ui.commons.collaboration.ServiceContainer");
 	var oProviderConfiguration;
 	var oServicePromise; // Promise object which will be returned by getServiceAsync method
@@ -25,9 +25,9 @@ sap.ui.define([
 			var oProviderConfig = oProviderConfiguration.oProviderConfig;
 			if (sProvider === "COLLABORATION_MSTEAMS") {
 				oHelperService = new TeamsHelperService(oProviderConfig);
-				oServicePromise = Promise.resolve(oHelperService);
-				return oServicePromise;
 			}
+			oServicePromise = Promise.resolve(oHelperService);
+			return oServicePromise;
 		}
 		oHelperService = new BaseHelperService({});
 		oLogger.info("Collaboration provider is not activated on the tenant");
@@ -64,6 +64,22 @@ sap.ui.define([
 		return fnGetCollaborationType();
 	};
 
+	/**
+	 * 	Method that returns the collaboration service object as 'active' on the system.
+	 * 	Microsoft Teams is supported as a collaboration option and must be enabled using the communication service SAP_COM_0860.
+	 *	The type definition and class are only available internally and are not intended for external consumers.
+	 *	@returns {Promise<{ oTeamsHelperService: module:sap/suite/ui/commons/collaboration/BaseHelperService, oCMHelperService: module:sap/suite/ui/commons/collaboration/BaseHelperService }>} Returns the promise that is resolved to an object containing the helper service and the Collaboration manager service.
+	 * 	@public
+	 */
+	oServiceContainer.getCollaborationServices = async function () {
+		var oService = await oServiceContainer.getServiceAsync();
+		var mCollaborationServices = {
+			"oTeamsHelperService": oService,
+			"oCMHelperService": new CollaborationManagerService()
+		};
+		return Promise.resolve(mCollaborationServices);
+	};
+
 	oServiceContainer.setCollaborationType = function (sProvider, oProviderConfig) {
 		oLogger.info("Collaboration properties are now configured");
 		oProviderConfiguration = {

package/src/sap/suite/ui/commons/collaboration/TeamsHelperService.js

@@ -25,8 +25,10 @@ sap.ui.define([
     "./CollaborationContactInfoHelper",
     "sap/m/library",
     "sap/m/FlexBox",
-    "sap/base/i18n/Localization"
-], function (Log, Core, URLListValidator, CollaborationHelper, BaseHelperService, Element, ContactHelper, Device, CollaborationCardHelper, Fragment, MessageBox, Library, Popover, HBox, VBox, MessageStrip, Button, CollaborationContactInfoHelper, sapMLibrary, FlexBox, Localization) {
+    "sap/base/i18n/Localization",
+    "./CollaborationManagerService",
+    "sap/m/FlexItemData"
+], function (Log, Core, URLListValidator, CollaborationHelper, BaseHelperService, Element, ContactHelper, Device, CollaborationCardHelper, Fragment, MessageBox, Library, Popover, HBox, VBox, MessageStrip, Button, CollaborationContactInfoHelper, sapMLibrary, FlexBox, Localization, CollaborationManagerService, FlexItemData) {
     "use strict";
 
     /**
@@ -533,6 +535,8 @@ sap.ui.define([
     /**
      * Enables collaboration with contacts in teams AD
      * @param {string} sEmail email of the contact to enable the communication
+     * @param {object} oParams subject and body of the email
+     * @returns {Promise} Returns promise which enables the contact options
      * @private
      */
 
@@ -635,7 +639,16 @@ sap.ui.define([
             "icon": "sap-icon://email",
             "key": "COLLABORATION_POPOVER_MAIL"
         });
-        if( aOptions.length === 1 && !isLink) {
+        this.oCollaborationManager = new CollaborationManagerService();
+        var oCMOption = this.oCollaborationManager.getOptions();
+        if(oCMOption) {
+            aOptions.push({
+                "text": oCMOption.text,
+                "icon": oCMOption.icon,
+                "key": "COLLABORATION_POPOVER_CM"
+            });
+        }
+        if(aOptions.length === 1 && !isLink) {
             this._shareData(oData,aOptions[0], isLink);
             return
         }
@@ -680,6 +693,7 @@ sap.ui.define([
             var button = new Button({
                 text:oOption.text,
                 icon:oOption.icon,
+                width: oData.sFormat === "Horizontal" && aOptions.length === 3 ? "120px" : "180px",
                 press: () => {
                     this._shareData(oData, oOption, isLink);
                 }
@@ -687,6 +701,8 @@ sap.ui.define([
 
             if(oOption.key === "COLLABORATION_POPOVER_TEAMS") {
                 button.addStyleClass("sapSuiteUiCollaborationBarMSTeamsButton" + (oData.sFormat ? oData.sFormat : "Horizontal"));
+            } else if(oOption.key === "COLLABORATION_POPOVER_CM"){
+                button.addStyleClass("sapSuiteUiCollaborationBarCMButton" + (oData.sFormat ? oData.sFormat : "Horizontal"));
             } else {
                 button.addStyleClass("sapSuiteUiCollaborationBarEmailButton" + (oData.sFormat ? oData.sFormat : "Horizontal"));
             }
@@ -713,14 +729,15 @@ sap.ui.define([
                     new MessageStrip({
                         text: oResourceBundle.getText("COLLABORATION_POPOVER_MSGSTRIP"),
                         showIcon: true
-                    }).addStyleClass("sapUiTinyMarginBeginEnd"),0);
+                    }).addStyleClass("sapUiTinyMarginBeginEnd").addStyleClass("sapSuiteCollaborationBarMsgStrip"),0);
+                oCopyLinkFlexbox.addStyleClass("sapSuiteUiCollaborationBarMsgStripHBox")
             }
             oCopyLinkFlexbox.addStyleClass("sapUiTinyMarginBeginEnd").addStyleClass("sapUiTinyMarginTopBottom")
             oMainFBox.addItem(oCopyLinkFlexbox);
         }
 
         if (oData.sFormat === "Vertical") {
-            oOptionFBox.setHeight(aOptions.length > 1 ? (aOptions.length * 50 + 50) + "px" : "120px");
+            oOptionFBox.setHeight(aOptions.length > 1 ? (aOptions.length * 50 + 50) + "px" : "80px");
             oOptionFBox.addStyleClass("sapUiSmallMarginBottom").addStyleClass("sapUiTinyMarginEnd");
         } else {
             oOptionFBox.setHeight("110px");
@@ -768,6 +785,8 @@ sap.ui.define([
             }
         } else if (oOption.key === "COLLABORATION_POPOVER_MAIL") {
             sap.m.URLHelper.triggerEmail(null, oData.title && oData.title.trim() !== "" ? oData.title: null, oData.data);
+        } else if (oOption.key === "COLLABORATION_POPOVER_CM") {
+            this.oCollaborationManager.triggerH2HChat(oData.title, oData.data);
         }
     }
 

package/src/sap/suite/ui/commons/collaboration/channels/MessageChannel.js

@@ -0,0 +1,63 @@
+/*!
+* 
+		SAP UI development toolkit for HTML5 (SAPUI5)
+		(c) Copyright 2009-2015 SAP SE. All rights reserved
+	
+* POC
+*/
+sap.ui.define(
+    [
+        "sap/ui/base/Object"
+    ],
+    function (UI5Object) {
+        "use strict";
+
+		var instance;
+        /**
+         * Facilitates communication between message providers and consumers in FLP and embedded iframes.
+         *
+         * @class
+         * @alias sap.ui.commons.channels.MessageChannel
+         * @public
+         * @experimental
+         */
+        var MessageChannel = UI5Object.extend("sap.ui.commons.channels.MessageChannel", {
+            /**
+             * Posts a message containing an object with properties to the parent window.
+             * @param {object} oMessageData - The message to post.
+             * @param {string} sTargetOrigin - The target origin of the message.
+             */
+            postMessage: function (oMessageData, sTargetOrigin) {
+				window.postMessage({...oMessageData, _fromMessageChannel: true}, sTargetOrigin || "*");
+            },
+
+            /**
+             * Subscribes to message events from the parent window.
+             * @param {function} fnCallback - The callback function to execute when a message event occurs.
+             */
+            subscribe: function (fnCallback) {
+                window.parent.addEventListener("message", function (data) {
+                    if (data?._fromMessageChannel && fnCallback instanceof Function) {
+                        return fnCallback(data);
+                    }
+                    return null;
+                });
+            }
+        });
+
+        return {
+            /**
+             * Returns a promise that resolves to the singleton instance of the MessageChannel service.
+             * @returns {Promise<sap.ui.commons.channels.MessageChannel>} A promise that resolves to the MessageChannel instance.
+             * @public
+             * @experimental
+             */
+            getInstance: function () {
+                if (!instance) {
+                    instance = new MessageChannel();
+                }
+                return Promise.resolve(instance);
+            }
+        };
+    }
+);