@microsoft/omnichannel-chat-components 0.1.0-main.353ecff → 0.1.0-main.5063558

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/lib/cjs/common/Constants.js +1 -5
  2. package/lib/cjs/components/chatbutton/ChatButton.js +23 -22
  3. package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +2 -1
  4. package/lib/cjs/components/common/commandbutton/CommandButton.js +4 -1
  5. package/lib/cjs/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
  6. package/lib/cjs/index.js +6 -0
  7. package/lib/cjs/services/BroadcastService.js +31 -7
  8. package/lib/esm/common/Constants.js +0 -3
  9. package/lib/esm/components/chatbutton/ChatButton.js +23 -22
  10. package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +2 -1
  11. package/lib/esm/components/common/commandbutton/CommandButton.js +4 -1
  12. package/lib/esm/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
  13. package/lib/esm/index.js +1 -0
  14. package/lib/esm/services/BroadcastService.js +29 -7
  15. package/lib/types/common/Constants.d.ts +0 -1
  16. package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts +1 -0
  17. package/lib/types/index.d.ts +1 -0
  18. package/lib/types/services/BroadcastService.d.ts +1 -0
  19. package/package.json +1 -1
package/lib/cjs/common/Constants.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Regex = exports.KeyCodes = exports.HiddenTextStyles = exports.ElementType = exports.BROADCAST_CHANNEL_NAME = exports.AccessibilityBrightnessRatio = void 0;
6
+ exports.Regex = exports.KeyCodes = exports.HiddenTextStyles = exports.ElementType = exports.AccessibilityBrightnessRatio = void 0;
7
7
 
8
8
  var _class, _class2;
9
9
 
@@ -11,11 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
11
11
 
12
12
  /* CSS Constants */
13
13
  const AccessibilityBrightnessRatio = 1.2;
14
- /* App constants*/
15
-
16
14
  exports.AccessibilityBrightnessRatio = AccessibilityBrightnessRatio;
17
- const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
18
- exports.BROADCAST_CHANNEL_NAME = BROADCAST_CHANNEL_NAME;
19
15
  const HiddenTextStyles = {
20
16
  position: "absolute",
21
17
  height: "1px",
package/lib/cjs/components/chatbutton/ChatButton.js CHANGED
@@ -42,16 +42,17 @@ function NotificationBubble(props, parentId) {
42
42
  const unreadMessageCount = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.unreadMessageCount) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.unreadMessageCount);
43
43
 
44
44
  if (unreadMessageCount !== "0") {
45
- var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl, _props$controlProps2;
45
+ var _props$componentOverr, _props$controlProps2, _props$controlProps3, _props$styleProps2, _props$styleProps2$cl, _props$controlProps4, _props$controlProps5;
46
46
 
47
47
  return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
48
- role: "alert",
48
+ "aria-live": "polite",
49
49
  styles: notificationBubbleStyles,
50
+ "aria-label": (_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.ariaLabelUnreadMessageString ? (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.ariaLabelUnreadMessageString : _defaultChatButtonControlProps.defaultChatButtonControlProps.ariaLabelUnreadMessageString,
50
51
  className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : (_props$styleProps2$cl = _props$styleProps2.classNames) === null || _props$styleProps2$cl === void 0 ? void 0 : _props$styleProps2$cl.notificationBubbleClassName,
51
52
  id: parentId + "-notification-bubble"
52
53
  }, unreadMessageCount, /*#__PURE__*/_react2.default.createElement("span", {
53
54
  style: _Constants.HiddenTextStyles
54
- }, (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.unreadMessageString));
55
+ }, (_props$controlProps4 = props.controlProps) !== null && _props$controlProps4 !== void 0 && _props$controlProps4.unreadMessageString ? (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.unreadMessageString : _defaultChatButtonControlProps.defaultChatButtonControlProps.unreadMessageString));
55
56
  }
56
57
 
57
58
  return null;
@@ -71,7 +72,7 @@ function IconContainer(props, parentId) {
71
72
  }
72
73
 
73
74
  function TextContainer(props, parentId) {
74
- var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
75
+ var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
75
76
 
76
77
  const textContainerStyles = {
77
78
  root: Object.assign({}, _defaultChatButtonTextContainerStyles.defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
@@ -82,12 +83,12 @@ function TextContainer(props, parentId) {
82
83
  const subtitleStyles = {
83
84
  root: Object.assign({}, _defaultChatButtonSubTitleStyles.defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
84
85
  };
85
- const hideChatTitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatTitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTitle);
86
- const hideChatSubtitle = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.hideChatSubtitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatSubtitle);
87
- const titleDir = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
88
- const titleText = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
89
- const subtitleDir = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
90
- const subtitleText = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
86
+ const hideChatTitle = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.hideChatTitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTitle);
87
+ const hideChatSubtitle = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.hideChatSubtitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatSubtitle);
88
+ const titleDir = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
89
+ const titleText = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
90
+ const subtitleDir = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
91
+ const subtitleText = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
91
92
  return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
92
93
  styles: textContainerStyles,
93
94
  className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.textContainerClassName,
@@ -108,23 +109,23 @@ function TextContainer(props, parentId) {
108
109
  }
109
110
 
110
111
  function ChatButton(props) {
111
- var _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$styleProps11;
112
-
113
- const elementId = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.id) ?? "lcw-components-chat-button";
114
- const defaultAriaLabel = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.ariaLabel) ?? "live chat button";
115
- const defaultRole = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
116
- const containersDir = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
117
- const hideChatButton = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
118
- const hideChatIcon = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
119
- const hideChatTextContainer = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
120
- const hideNotificationBubble = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
112
+ var _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$controlProps17, _props$controlProps18, _props$controlProps19, _props$styleProps11;
113
+
114
+ const elementId = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.id) ?? "lcw-components-chat-button";
115
+ const defaultAriaLabel = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.ariaLabel) ?? "live chat button";
116
+ const defaultRole = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
117
+ const containersDir = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
118
+ const hideChatButton = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
119
+ const hideChatIcon = ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
120
+ const hideChatTextContainer = ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
121
+ const hideNotificationBubble = ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
121
122
  const chatButtonGroupStyles = {
122
123
  root: Object.assign({}, _defaultChatButtonGeneralStyles.defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
123
124
  };
124
125
  const handleInitiateChatClick = (0, _react2.useCallback)(() => {
125
- var _props$controlProps17;
126
+ var _props$controlProps20;
126
127
 
127
- if ((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.onClick) {
128
+ if ((_props$controlProps20 = props.controlProps) !== null && _props$controlProps20 !== void 0 && _props$controlProps20.onClick) {
128
129
  const customEvent = {
129
130
  elementType: _Constants.ElementType.ChatButton,
130
131
  elementId: elementId,
package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js CHANGED
@@ -22,6 +22,7 @@ const defaultChatButtonControlProps = {
22
22
  hideChatTitle: false,
23
23
  hideNotificationBubble: true,
24
24
  unreadMessageString: "new messages",
25
- largeUnreadMessageString: "99+"
25
+ largeUnreadMessageString: "99+",
26
+ ariaLabelUnreadMessageString: "you have new messages"
26
27
  };
27
28
  exports.defaultChatButtonControlProps = defaultChatButtonControlProps;
package/lib/cjs/components/common/commandbutton/CommandButton.js CHANGED
@@ -22,7 +22,10 @@ function CommandButton(props) {
22
22
  const iconProp = props.imageIconProps ? {
23
23
  imageProps: props.imageIconProps
24
24
  } : {
25
- iconName: props.iconName
25
+ iconName: props.iconName,
26
+ styles: {
27
+ root: props.styles
28
+ }
26
29
  };
27
30
  const buttonStyles = {
28
31
  root: props.styles,
package/lib/cjs/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js CHANGED
@@ -7,7 +7,7 @@ exports.defaultLoadingPaneIconStyles = void 0;
7
7
  const defaultLoadingPaneIconStyles = {
8
8
  borderRadius: "50%",
9
9
  backgroundColor: "#F1F1F1",
10
- boxShadow: "0px 0px 0.5px 7px #3F75AB",
10
+ boxShadow: "0px 0px 0.5px 7px rgba(196, 196, 196, 0.15)",
11
11
  width: "86px",
12
12
  height: "86px",
13
13
  margin: "0px 0px 20px 0px",
package/lib/cjs/index.js CHANGED
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "BroadcastService", {
27
27
  return _BroadcastService.BroadcastService;
28
28
  }
29
29
  });
30
+ Object.defineProperty(exports, "BroadcastServiceInitialize", {
31
+ enumerable: true,
32
+ get: function () {
33
+ return _BroadcastService.BroadcastServiceInitialize;
34
+ }
35
+ });
30
36
  Object.defineProperty(exports, "CallAcceptButtonBase64", {
31
37
  enumerable: true,
32
38
  get: function () {
package/lib/cjs/services/BroadcastService.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.BroadcastService = void 0;
6
+ exports.BroadcastServiceInitialize = exports.BroadcastService = void 0;
7
7
 
8
8
  var _rxjs = require("rxjs");
9
9
 
@@ -11,16 +11,40 @@ var _operators = require("rxjs/operators");
11
11
 
12
12
  var _broadcastChannel = require("broadcast-channel");
13
13
 
14
- var _Constants = require("../common/Constants");
14
+ const newMessage = new _rxjs.Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
15
 
16
- const newMessage = new _rxjs.Subject();
17
- const pubChannel = new _broadcastChannel.BroadcastChannel(_Constants.BROADCAST_CHANNEL_NAME);
18
- const subChannel = new _broadcastChannel.BroadcastChannel(_Constants.BROADCAST_CHANNEL_NAME); // eslint-disable-next-line @typescript-eslint/no-explicit-any
16
+ const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
17
 
20
- subChannel.onmessage = message => {
21
- newMessage.next(message);
18
+ const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
+
20
+ let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
+
22
+ let subChannel;
23
+
24
+ const BroadcastServiceInitialize = channelName => {
25
+ if (broadcastServicePubList[channelName]) {
26
+ pubChannel = broadcastServicePubList[channelName];
27
+ } else {
28
+ const newPubChannel = new _broadcastChannel.BroadcastChannel(channelName);
29
+ broadcastServicePubList[channelName] = newPubChannel;
30
+ pubChannel = newPubChannel;
31
+ }
32
+
33
+ if (broadcastServiceSubList[channelName]) {
34
+ subChannel = broadcastServiceSubList[channelName];
35
+ } else {
36
+ const newSubChannel = new _broadcastChannel.BroadcastChannel(channelName);
37
+ broadcastServiceSubList[channelName] = newSubChannel;
38
+ subChannel = newSubChannel;
39
+ } // eslint-disable-next-line @typescript-eslint/no-explicit-any
40
+
41
+
42
+ subChannel.onmessage = message => {
43
+ newMessage.next(message);
44
+ };
22
45
  };
23
46
 
47
+ exports.BroadcastServiceInitialize = BroadcastServiceInitialize;
24
48
  const BroadcastService = {
25
49
  //broadcast a message
26
50
  postMessage: message => {
package/lib/esm/common/Constants.js CHANGED
@@ -4,9 +4,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
4
4
 
5
5
  /* CSS Constants */
6
6
  export const AccessibilityBrightnessRatio = 1.2;
7
- /* App constants*/
8
-
9
- export const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
10
7
  export const HiddenTextStyles = {
11
8
  position: "absolute",
12
9
  height: "1px",
package/lib/esm/components/chatbutton/ChatButton.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Icon, Label, Stack } from "@fluentui/react";
2
2
  import React, { useCallback } from "react";
3
3
  import { BroadcastService } from "../../services/BroadcastService";
4
- import { ElementType, KeyCodes, HiddenTextStyles } from "../../common/Constants";
4
+ import { ElementType, HiddenTextStyles, KeyCodes } from "../../common/Constants";
5
5
  import { decodeComponentString } from "../../common/decodeComponentString";
6
6
  import { defaultChatButtonControlProps } from "./common/defaultProps/defaultChatButtonControlProps";
7
7
  import { defaultChatButtonGeneralStyles } from "./common/defaultStyles/defaultChatButtonGeneralStyles";
@@ -20,16 +20,17 @@ function NotificationBubble(props, parentId) {
20
20
  const unreadMessageCount = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.unreadMessageCount) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.unreadMessageCount);
21
21
 
22
22
  if (unreadMessageCount !== "0") {
23
- var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl, _props$controlProps2;
23
+ var _props$componentOverr, _props$controlProps2, _props$controlProps3, _props$styleProps2, _props$styleProps2$cl, _props$controlProps4, _props$controlProps5;
24
24
 
25
25
  return decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/React.createElement(Stack, {
26
- role: "alert",
26
+ "aria-live": "polite",
27
27
  styles: notificationBubbleStyles,
28
+ "aria-label": (_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.ariaLabelUnreadMessageString ? (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.ariaLabelUnreadMessageString : defaultChatButtonControlProps.ariaLabelUnreadMessageString,
28
29
  className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : (_props$styleProps2$cl = _props$styleProps2.classNames) === null || _props$styleProps2$cl === void 0 ? void 0 : _props$styleProps2$cl.notificationBubbleClassName,
29
30
  id: parentId + "-notification-bubble"
30
31
  }, unreadMessageCount, /*#__PURE__*/React.createElement("span", {
31
32
  style: HiddenTextStyles
32
- }, (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.unreadMessageString));
33
+ }, (_props$controlProps4 = props.controlProps) !== null && _props$controlProps4 !== void 0 && _props$controlProps4.unreadMessageString ? (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.unreadMessageString : defaultChatButtonControlProps.unreadMessageString));
33
34
  }
34
35
 
35
36
  return null;
@@ -49,7 +50,7 @@ function IconContainer(props, parentId) {
49
50
  }
50
51
 
51
52
  function TextContainer(props, parentId) {
52
- var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
53
+ var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
53
54
 
54
55
  const textContainerStyles = {
55
56
  root: Object.assign({}, defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
@@ -60,12 +61,12 @@ function TextContainer(props, parentId) {
60
61
  const subtitleStyles = {
61
62
  root: Object.assign({}, defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
62
63
  };
63
- const hideChatTitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatTitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTitle);
64
- const hideChatSubtitle = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.hideChatSubtitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatSubtitle);
65
- const titleDir = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
66
- const titleText = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.titleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.titleText);
67
- const subtitleDir = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
68
- const subtitleText = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.subtitleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.subtitleText);
64
+ const hideChatTitle = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.hideChatTitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTitle);
65
+ const hideChatSubtitle = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.hideChatSubtitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatSubtitle);
66
+ const titleDir = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
67
+ const titleText = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.titleText);
68
+ const subtitleDir = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
69
+ const subtitleText = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.subtitleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.subtitleText);
69
70
  return decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/React.createElement(Stack, {
70
71
  styles: textContainerStyles,
71
72
  className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.textContainerClassName,
@@ -86,23 +87,23 @@ function TextContainer(props, parentId) {
86
87
  }
87
88
 
88
89
  function ChatButton(props) {
89
- var _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$styleProps11;
90
+ var _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$controlProps17, _props$controlProps18, _props$controlProps19, _props$styleProps11;
90
91
 
91
- const elementId = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.id) ?? "lcw-components-chat-button";
92
- const defaultAriaLabel = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.ariaLabel) ?? "live chat button";
93
- const defaultRole = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.role) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.role);
94
- const containersDir = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
95
- const hideChatButton = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatButton) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatButton);
96
- const hideChatIcon = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatIcon) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatIcon);
97
- const hideChatTextContainer = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideChatTextContainer) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTextContainer);
98
- const hideNotificationBubble = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideNotificationBubble) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideNotificationBubble);
92
+ const elementId = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.id) ?? "lcw-components-chat-button";
93
+ const defaultAriaLabel = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.ariaLabel) ?? "live chat button";
94
+ const defaultRole = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.role) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.role);
95
+ const containersDir = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
96
+ const hideChatButton = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideChatButton) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatButton);
97
+ const hideChatIcon = ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.hideChatIcon) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatIcon);
98
+ const hideChatTextContainer = ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.hideChatTextContainer) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTextContainer);
99
+ const hideNotificationBubble = ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.hideNotificationBubble) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideNotificationBubble);
99
100
  const chatButtonGroupStyles = {
100
101
  root: Object.assign({}, defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
101
102
  };
102
103
  const handleInitiateChatClick = useCallback(() => {
103
- var _props$controlProps17;
104
+ var _props$controlProps20;
104
105
 
105
- if ((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.onClick) {
106
+ if ((_props$controlProps20 = props.controlProps) !== null && _props$controlProps20 !== void 0 && _props$controlProps20.onClick) {
106
107
  const customEvent = {
107
108
  elementType: ElementType.ChatButton,
108
109
  elementId: elementId,
package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js CHANGED
@@ -16,5 +16,6 @@ export const defaultChatButtonControlProps = {
16
16
  hideChatTitle: false,
17
17
  hideNotificationBubble: true,
18
18
  unreadMessageString: "new messages",
19
- largeUnreadMessageString: "99+"
19
+ largeUnreadMessageString: "99+",
20
+ ariaLabelUnreadMessageString: "you have new messages"
20
21
  };
package/lib/esm/components/common/commandbutton/CommandButton.js CHANGED
@@ -8,7 +8,10 @@ function CommandButton(props) {
8
8
  const iconProp = props.imageIconProps ? {
9
9
  imageProps: props.imageIconProps
10
10
  } : {
11
- iconName: props.iconName
11
+ iconName: props.iconName,
12
+ styles: {
13
+ root: props.styles
14
+ }
12
15
  };
13
16
  const buttonStyles = {
14
17
  root: props.styles,
package/lib/esm/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export const defaultLoadingPaneIconStyles = {
2
2
  borderRadius: "50%",
3
3
  backgroundColor: "#F1F1F1",
4
- boxShadow: "0px 0px 0.5px 7px #3F75AB",
4
+ boxShadow: "0px 0px 0.5px 7px rgba(196, 196, 196, 0.15)",
5
5
  width: "86px",
6
6
  height: "86px",
7
7
  margin: "0px 0px 20px 0px",
package/lib/esm/index.js CHANGED
@@ -12,6 +12,7 @@ export { default as PostChatSurveyPane } from "./components/postchatsurveypane/P
12
12
  export { encodeComponentString } from "./common/encodeComponentString";
13
13
  export { decodeComponentString } from "./common/decodeComponentString";
14
14
  export { BroadcastService } from "./services/BroadcastService";
15
+ export { BroadcastServiceInitialize } from "./services/BroadcastService";
15
16
  export { ElementType } from "./common/Constants";
16
17
  export { default as CallingContainer } from "./components/callingcontainer/CallingContainer";
17
18
  export { default as CurrentCall } from "./components/callingcontainer/subcomponents/CurrentCall/CurrentCall";
package/lib/esm/services/BroadcastService.js CHANGED
@@ -1,15 +1,37 @@
1
1
  import { Subject } from "rxjs";
2
2
  import { filter } from "rxjs/operators";
3
3
  import { BroadcastChannel } from "broadcast-channel";
4
- import { BROADCAST_CHANNEL_NAME } from "../common/Constants";
5
- const newMessage = new Subject();
6
- const pubChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
7
- const subChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME); // eslint-disable-next-line @typescript-eslint/no-explicit-any
4
+ const newMessage = new Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
8
5
 
9
- subChannel.onmessage = message => {
10
- newMessage.next(message);
11
- };
6
+ const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
7
+
8
+ const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
9
+
10
+ let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
11
+
12
+ let subChannel;
13
+ export const BroadcastServiceInitialize = channelName => {
14
+ if (broadcastServicePubList[channelName]) {
15
+ pubChannel = broadcastServicePubList[channelName];
16
+ } else {
17
+ const newPubChannel = new BroadcastChannel(channelName);
18
+ broadcastServicePubList[channelName] = newPubChannel;
19
+ pubChannel = newPubChannel;
20
+ }
21
+
22
+ if (broadcastServiceSubList[channelName]) {
23
+ subChannel = broadcastServiceSubList[channelName];
24
+ } else {
25
+ const newSubChannel = new BroadcastChannel(channelName);
26
+ broadcastServiceSubList[channelName] = newSubChannel;
27
+ subChannel = newSubChannel;
28
+ } // eslint-disable-next-line @typescript-eslint/no-explicit-any
12
29
 
30
+
31
+ subChannel.onmessage = message => {
32
+ newMessage.next(message);
33
+ };
34
+ };
13
35
  export const BroadcastService = {
14
36
  //broadcast a message
15
37
  postMessage: message => {
package/lib/types/common/Constants.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  export declare const AccessibilityBrightnessRatio = 1.2;
3
- export declare const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
4
3
  export declare const HiddenTextStyles: React.CSSProperties;
5
4
  export declare const KeyCodes: {
6
5
  new (): {};
package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts CHANGED
@@ -15,4 +15,5 @@ export interface IChatButtonControlProps {
15
15
  hideNotificationBubble?: boolean;
16
16
  unreadMessageString?: string;
17
17
  largeUnreadMessageString?: string;
18
+ ariaLabelUnreadMessageString?: string;
18
19
  }
package/lib/types/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export { default as PostChatSurveyPane } from "./components/postchatsurveypane/P
12
12
  export { encodeComponentString } from "./common/encodeComponentString";
13
13
  export { decodeComponentString } from "./common/decodeComponentString";
14
14
  export { BroadcastService } from "./services/BroadcastService";
15
+ export { BroadcastServiceInitialize } from "./services/BroadcastService";
15
16
  export { ElementType } from "./common/Constants";
16
17
  export { default as CallingContainer } from "./components/callingcontainer/CallingContainer";
17
18
  export { default as CurrentCall } from "./components/callingcontainer/subcomponents/CurrentCall/CurrentCall";
package/lib/types/services/BroadcastService.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Subject } from "rxjs";
2
2
  import { ICustomEvent } from "../interfaces/ICustomEvent";
3
+ export declare const BroadcastServiceInitialize: (channelName: string) => void;
3
4
  export declare const BroadcastService: {
4
5
  postMessage: (message: ICustomEvent) => void;
5
6
  getMessage: (message: ICustomEvent) => import("rxjs").Observable<ICustomEvent>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "0.1.0-main.353ecff",
3
+ "version": "0.1.0-main.5063558",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",