@microsoft/omnichannel-chat-components 0.1.0-main.7a911ca → 0.1.0-main.99bac9c

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 (43) hide show
  1. package/lib/cjs/common/Constants.js +2 -6
  2. package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js +1 -1
  3. package/lib/cjs/components/callingcontainer/subcomponents/IncomingCall/IncomingCall.js +1 -1
  4. package/lib/cjs/components/chatbutton/ChatButton.js +23 -22
  5. package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +2 -1
  6. package/lib/cjs/components/common/commandbutton/CommandButton.js +22 -2
  7. package/lib/cjs/components/{header → common}/subcomponents/CloseButton.js +4 -3
  8. package/lib/cjs/components/footer/Footer.js +1 -1
  9. package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js +24 -4
  10. package/lib/cjs/components/header/Header.js +2 -2
  11. package/lib/cjs/components/proactivechatpane/ProactiveChatPane.js +36 -35
  12. package/lib/cjs/components/proactivechatpane/common/default/defaultProps/defaultProactiveChatPaneControlProps.js +5 -1
  13. package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles.js +2 -13
  14. package/lib/cjs/components/proactivechatpane/common/presetOne/presetOneProps/presetOneProactiveChatPaneControlProps.js +5 -1
  15. package/lib/cjs/components/proactivechatpane/common/presetThree/presetThreeProps/presetThreeProactiveChatPaneControlProps.js +5 -1
  16. package/lib/cjs/index.js +6 -0
  17. package/lib/cjs/services/BroadcastService.js +36 -8
  18. package/lib/esm/common/Constants.js +1 -4
  19. package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js +1 -1
  20. package/lib/esm/components/callingcontainer/subcomponents/IncomingCall/IncomingCall.js +1 -1
  21. package/lib/esm/components/chatbutton/ChatButton.js +22 -21
  22. package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +2 -1
  23. package/lib/esm/components/common/commandbutton/CommandButton.js +22 -2
  24. package/lib/esm/components/{header → common}/subcomponents/CloseButton.js +4 -3
  25. package/lib/esm/components/footer/Footer.js +1 -1
  26. package/lib/esm/components/footer/subcomponents/AudioNotificationButton.js +24 -4
  27. package/lib/esm/components/header/Header.js +2 -2
  28. package/lib/esm/components/proactivechatpane/ProactiveChatPane.js +33 -34
  29. package/lib/esm/components/proactivechatpane/common/default/defaultProps/defaultProactiveChatPaneControlProps.js +5 -1
  30. package/lib/esm/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles.js +2 -11
  31. package/lib/esm/components/proactivechatpane/common/presetOne/presetOneProps/presetOneProactiveChatPaneControlProps.js +5 -1
  32. package/lib/esm/components/proactivechatpane/common/presetThree/presetThreeProps/presetThreeProactiveChatPaneControlProps.js +5 -1
  33. package/lib/esm/index.js +1 -0
  34. package/lib/esm/services/BroadcastService.js +34 -8
  35. package/lib/types/common/Constants.d.ts +1 -2
  36. package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts +1 -0
  37. package/lib/types/components/common/interfaces/ICommandButtonControlProps.d.ts +1 -0
  38. package/lib/types/components/common/interfaces/ICommandButtonProps.d.ts +1 -0
  39. package/lib/types/components/{header → common}/subcomponents/CloseButton.d.ts +1 -1
  40. package/lib/types/components/proactivechatpane/interfaces/IProactiveChatPaneControlProps.d.ts +2 -1
  41. package/lib/types/index.d.ts +1 -0
  42. package/lib/types/services/BroadcastService.d.ts +1 -0
  43. package/package.json +2 -2
@@ -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,20 +11,48 @@ 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 => {
27
- pubChannel.postMessage(message);
51
+ /**
52
+ * Omit copying methods to prevent 'DataCloneError' in older browsers when passing an object with functions
53
+ * This exception occurs when an object can't be clone with the 'structured clone algorithm' (used by postMessage)
54
+ */
55
+ pubChannel.postMessage(JSON.parse(JSON.stringify(message)));
28
56
  },
29
57
  getMessage: message => {
30
58
  return newMessage.pipe((0, _operators.filter)(msg => msg.elementId == message.elementId && msg.elementType == message.elementType && msg.eventName == message.eventName));
@@ -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",
@@ -21,7 +18,7 @@ export let ElementType;
21
18
 
22
19
  (function (ElementType) {
23
20
  ElementType["ChatButton"] = "ChatButton";
24
- ElementType["HeaderCloseButton"] = "HeaderCloseButton";
21
+ ElementType["CloseButton"] = "CloseButton";
25
22
  ElementType["HeaderMinimizeButton"] = "HeaderMinimizeButton";
26
23
  ElementType["FooterDownloadTranscriptButton"] = "FooterDownloadTranscriptButton";
27
24
  ElementType["FooterEmailTranscriptButton"] = "FooterEmailTranscriptButton";
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import * as React from "react";
4
4
  import { IconButton, Stack } from "@fluentui/react";
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import * as React from "react";
4
4
  import { Label, Stack } from "@fluentui/react";
@@ -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,
@@ -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
  };
@@ -4,6 +4,8 @@ import { BroadcastService } from "../../../services/BroadcastService";
4
4
  import { ElementType } from "../../../common/Constants";
5
5
 
6
6
  function CommandButton(props) {
7
+ var _props$styles, _props$styles2, _props$styles3, _props$hoverStyles, _props$focusStyles;
8
+
7
9
  //imageIconProps > iconName
8
10
  const iconProp = props.imageIconProps ? {
9
11
  imageProps: props.imageIconProps
@@ -11,7 +13,25 @@ function CommandButton(props) {
11
13
  iconName: props.iconName
12
14
  };
13
15
  const buttonStyles = {
14
- root: props.styles,
16
+ icon: props.styles,
17
+ root: {
18
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
+ width: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width,
20
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
+ height: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height,
22
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
23
+ backgroundColor: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.backgroundColor,
24
+ selectors: {
25
+ ":hover .ms-Button-icon": {
26
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
27
+ color: props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.color
28
+ },
29
+ ":active .ms-Button-icon": {
30
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
31
+ color: props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.color
32
+ }
33
+ }
34
+ },
15
35
  rootHovered: props.hoverStyles,
16
36
  rootFocused: props.focusStyles,
17
37
  rootPressed: props.hoverStyles
@@ -38,7 +58,7 @@ function CommandButton(props) {
38
58
  }), props.type === "icon" && /*#__PURE__*/React.createElement(IconButton, {
39
59
  id: props.id,
40
60
  iconProps: iconProp,
41
- title: props.ariaLabel,
61
+ title: props.hideButtonTitle ? undefined : props.ariaLabel,
42
62
  ariaLabel: props.ariaLabel,
43
63
  disabled: props.disabled,
44
64
  styles: buttonStyles,
@@ -1,13 +1,13 @@
1
1
  import React from "react";
2
2
  import { ElementType } from "../../../common/Constants";
3
- import CommandButton from "../../common/commandbutton/CommandButton";
3
+ import CommandButton from "../commandbutton/CommandButton";
4
4
 
5
5
  function CloseButton(props) {
6
6
  const {
7
7
  type
8
8
  } = props;
9
9
  const customEvent = {
10
- elementType: ElementType.HeaderCloseButton,
10
+ elementType: ElementType.CloseButton,
11
11
  elementId: props === null || props === void 0 ? void 0 : props.id,
12
12
  eventName: "OnClick"
13
13
  };
@@ -23,7 +23,8 @@ function CloseButton(props) {
23
23
  onClick: props.onClick,
24
24
  ariaLabel: props.ariaLabel ?? "Close",
25
25
  className: props.className,
26
- customEvent: customEvent
26
+ customEvent: customEvent,
27
+ hideButtonTitle: props.hideButtonTitle
27
28
  });
28
29
  }
29
30
 
@@ -1,4 +1,4 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import * as React from "react";
4
4
  import { Stack, initializeIcons } from "@fluentui/react";
@@ -4,15 +4,35 @@ import { BroadcastService } from "../../../services/BroadcastService";
4
4
  import { ElementType } from "../../../common/Constants";
5
5
 
6
6
  function AudioNotificationButton(props) {
7
+ var _props$styles, _props$styles2, _props$styles3, _props$hoverStyles, _props$focusStyles;
8
+
7
9
  const {
8
10
  disabled
9
11
  } = props;
10
12
  const [muted, setMuted] = useState(props.isAudioMuted);
11
13
  const iconButtonStyles = {
12
- root: props === null || props === void 0 ? void 0 : props.styles,
13
- rootHovered: props === null || props === void 0 ? void 0 : props.hoverStyles,
14
- rootFocused: props === null || props === void 0 ? void 0 : props.focusStyles,
15
- rootPressed: props === null || props === void 0 ? void 0 : props.hoverStyles
14
+ icon: props.styles,
15
+ root: {
16
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
17
+ width: props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width,
18
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
+ height: props === null || props === void 0 ? void 0 : (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height,
20
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
+ backgroundColor: props === null || props === void 0 ? void 0 : (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.backgroundColor,
22
+ selectors: {
23
+ ":hover .ms-Button-icon": {
24
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
+ color: props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.color
26
+ },
27
+ ":active .ms-Button-icon": {
28
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
29
+ color: props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.color
30
+ }
31
+ }
32
+ },
33
+ rootHovered: props.hoverStyles,
34
+ rootFocused: props.focusStyles,
35
+ rootPressed: props.hoverStyles
16
36
  }; //imageIconProps > iconName
17
37
 
18
38
  const volume0Icon = props.imageToggleIconProps ? {
@@ -1,8 +1,8 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
3
  import * as React from "react";
4
4
  import { Image, Label, Stack, initializeIcons } from "@fluentui/react";
5
- import CloseButton from "./subcomponents/CloseButton";
5
+ import CloseButton from "../common/subcomponents/CloseButton";
6
6
  import MinimizeButton from "./subcomponents/MinimizeButton";
7
7
  import { decodeComponentString } from "../../common/decodeComponentString";
8
8
  import { defaultHeaderProps } from "./common/defaultProps/defaultHeaderProps";
@@ -1,13 +1,14 @@
1
- import { IconButton, Label, Stack } from "@fluentui/react";
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ import { Label, Stack } from "@fluentui/react";
2
4
  import React, { useCallback } from "react";
3
5
  import { BroadcastService } from "../../services/BroadcastService";
4
6
  import { DefaultButton } from "@fluentui/react/lib/Button";
7
+ import CloseButton from "../common/subcomponents/CloseButton";
5
8
  import { KeyCodes } from "../../common/Constants";
6
9
  import { decodeComponentString } from "../../common/decodeComponentString";
7
10
  import { defaultProactiveChatPaneBodyContainerStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneBodyContainerStyles";
8
11
  import { defaultProactiveChatPaneBodyTitleStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneBodyTitleStyles";
9
- import { defaultProactiveChatPaneCloseButtonHoveredStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneCloseButtonHoveredStyles";
10
- import { defaultProactiveChatPaneCloseButtonStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles";
11
12
  import { defaultProactiveChatPaneControlProps } from "./common/default/defaultProps/defaultProactiveChatPaneControlProps";
12
13
  import { defaultProactiveChatPaneGeneralStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneGeneralStyles";
13
14
  import { defaultProactiveChatPaneHeaderContainerStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneHeaderContainerStyles";
@@ -17,9 +18,10 @@ import { defaultProactiveChatPaneSubtitleStyles } from "./common/default/default
17
18
  import { defaultProactiveChatPaneTextContainerStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneTextContainerStyles";
18
19
  import { defaultProactiveChatPaneTitleStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneTitleStyles";
19
20
  import { generateEventName } from "../../common/utils";
21
+ import { defaultProactiveChatPaneProps } from "./common/default/defaultProps/defaultProactiveChatPaneProps";
20
22
 
21
23
  function ProactiveChatPane(props) {
22
- var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$styleProps12, _props$styleProps13, _props$controlProps6, _props$styleProps14, _props$styleProps14$c, _props$controlProps7, _props$controlProps8, _props$styleProps15, _props$styleProps15$c, _props$styleProps16, _props$styleProps16$c, _props$controlProps9, _props$componentOverr, _props$styleProps17, _props$styleProps17$c, _props$controlProps10, _props$controlProps11, _props$componentOverr2, _props$styleProps18, _props$styleProps18$c, _props$controlProps12, _props$controlProps13, _props$componentOverr3, _props$styleProps19, _props$styleProps19$c, _props$controlProps14, _props$controlProps15, _props$styleProps20, _props$styleProps20$c, _props$controlProps16, _props$componentOverr4, _props$styleProps21, _props$styleProps21$c, _props$controlProps17, _props$controlProps18, _props$componentOverr5, _props$styleProps22, _props$styleProps22$c, _props$controlProps19, _props$controlProps20;
24
+ var _props$controlProps, _defaultProactiveChat, _props$controlProps6, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _defaultProactiveChat2, _props$styleProps6, _defaultProactiveChat3, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$styleProps12, _props$controlProps7, _props$styleProps13, _props$styleProps13$c, _props$controlProps8, _props$controlProps9, _props$styleProps14, _props$styleProps14$c, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$componentOverr, _props$styleProps16, _props$styleProps16$c, _props$controlProps11, _props$controlProps12, _props$componentOverr2, _props$styleProps17, _props$styleProps17$c, _props$controlProps13, _props$controlProps14, _props$componentOverr3, _props$styleProps18, _props$styleProps18$c, _props$controlProps15, _props$styleProps19, _props$styleProps19$c, _props$controlProps16, _props$componentOverr4, _props$styleProps20, _props$styleProps20$c, _props$controlProps17, _props$controlProps18, _props$componentOverr5, _props$styleProps21, _props$styleProps21$c, _props$controlProps19, _props$controlProps20;
23
25
 
24
26
  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultProactiveChatPaneControlProps.id;
25
27
 
@@ -68,6 +70,7 @@ function ProactiveChatPane(props) {
68
70
  (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onStart();
69
71
  }
70
72
  }, []);
73
+ const closeButtonProps = Object.assign({}, (_defaultProactiveChat = defaultProactiveChatPaneProps.controlProps) === null || _defaultProactiveChat === void 0 ? void 0 : _defaultProactiveChat.closeButtonProps, (_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.closeButtonProps);
71
74
  const containerStyles = {
72
75
  root: Object.assign({}, defaultProactiveChatPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
73
76
  };
@@ -83,71 +86,67 @@ function ProactiveChatPane(props) {
83
86
  const subtitleStyles = {
84
87
  root: Object.assign({}, defaultProactiveChatPaneSubtitleStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.subtitleStyleProps)
85
88
  };
86
- const closeButtonStyles = {
87
- root: Object.assign({}, defaultProactiveChatPaneCloseButtonStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonStyleProps),
88
- rootHovered: Object.assign({}, defaultProactiveChatPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps),
89
- rootPressed: Object.assign({}, defaultProactiveChatPaneCloseButtonHoveredStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.closeButtonHoveredStyleProps)
90
- };
89
+ const closeButtonStyles = Object.assign({}, (_defaultProactiveChat2 = defaultProactiveChatPaneProps.styleProps) === null || _defaultProactiveChat2 === void 0 ? void 0 : _defaultProactiveChat2.closeButtonStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonStyleProps);
90
+ const closeButtonHoverStyles = Object.assign({}, (_defaultProactiveChat3 = defaultProactiveChatPaneProps.styleProps) === null || _defaultProactiveChat3 === void 0 ? void 0 : _defaultProactiveChat3.closeButtonHoveredStyleProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps);
91
91
  const bodyContainerStyles = {
92
- root: Object.assign({}, defaultProactiveChatPaneBodyContainerStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.bodyContainerStyleProps)
92
+ root: Object.assign({}, defaultProactiveChatPaneBodyContainerStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.bodyContainerStyleProps)
93
93
  };
94
94
  const bodyTitleStyles = {
95
- root: Object.assign({}, defaultProactiveChatPaneBodyTitleStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.bodyTitleStyleProps)
95
+ root: Object.assign({}, defaultProactiveChatPaneBodyTitleStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.bodyTitleStyleProps)
96
96
  };
97
97
  const startButtonStyles = {
98
- root: Object.assign({}, defaultProactiveChatPaneStartButtonStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.startButtonStyleProps),
99
- rootHovered: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.startButtonHoveredStyleProps),
100
- rootPressed: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.startButtonHoveredStyleProps)
98
+ root: Object.assign({}, defaultProactiveChatPaneStartButtonStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.startButtonStyleProps),
99
+ rootHovered: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.startButtonHoveredStyleProps),
100
+ rootPressed: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.startButtonHoveredStyleProps)
101
101
  };
102
- return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideProactiveChatPane) && /*#__PURE__*/React.createElement(Stack, {
103
- className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.containerClassName,
102
+ return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps7 = props.controlProps) !== null && _props$controlProps7 !== void 0 && _props$controlProps7.hideProactiveChatPane) && /*#__PURE__*/React.createElement(Stack, {
103
+ className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.containerClassName,
104
104
  id: elementId,
105
105
  tabIndex: -1,
106
106
  onKeyDown: handleEscKeyDown,
107
- dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || defaultProactiveChatPaneControlProps.dir,
108
- "aria-label": ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.proactiveChatPaneAriaLabel) || defaultProactiveChatPaneControlProps.proactiveChatPaneAriaLabel,
107
+ dir: ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) || defaultProactiveChatPaneControlProps.dir,
108
+ "aria-label": ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.proactiveChatPaneAriaLabel) || defaultProactiveChatPaneControlProps.proactiveChatPaneAriaLabel,
109
109
  styles: containerStyles
110
110
  }, /*#__PURE__*/React.createElement(Stack, {
111
111
  horizontal: true,
112
- className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.headerContainerClassName,
112
+ className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.headerContainerClassName,
113
113
  styles: headerContainerStyles,
114
114
  tabIndex: -1,
115
115
  id: elementId + "-headercontainer"
116
116
  }, /*#__PURE__*/React.createElement(Stack, {
117
- className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.textContainerClassName,
117
+ className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.textContainerClassName,
118
118
  styles: textContainerStyles,
119
119
  tabIndex: -1,
120
120
  id: elementId + "-textcontainer"
121
- }, !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.title) || /*#__PURE__*/React.createElement(Label, {
122
- className: (_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 ? void 0 : (_props$styleProps17$c = _props$styleProps17.classNames) === null || _props$styleProps17$c === void 0 ? void 0 : _props$styleProps17$c.titleClassName,
121
+ }, !((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideTitle) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.title) || /*#__PURE__*/React.createElement(Label, {
122
+ className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.titleClassName,
123
123
  styles: titleStyles,
124
124
  tabIndex: -1,
125
125
  id: elementId + "-title"
126
- }, ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.titleText) || defaultProactiveChatPaneControlProps.titleText)), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideSubtitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.subtitle) || /*#__PURE__*/React.createElement(Label, {
127
- className: (_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 ? void 0 : (_props$styleProps18$c = _props$styleProps18.classNames) === null || _props$styleProps18$c === void 0 ? void 0 : _props$styleProps18$c.subtitleClassName,
126
+ }, ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.titleText) || defaultProactiveChatPaneControlProps.titleText)), !((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.hideSubtitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.subtitle) || /*#__PURE__*/React.createElement(Label, {
127
+ className: (_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 ? void 0 : (_props$styleProps17$c = _props$styleProps17.classNames) === null || _props$styleProps17$c === void 0 ? void 0 : _props$styleProps17$c.subtitleClassName,
128
128
  styles: subtitleStyles,
129
129
  tabIndex: -1,
130
130
  id: elementId + "-subtitle"
131
- }, ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.subtitleText) || defaultProactiveChatPaneControlProps.subtitleText))), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideCloseButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(IconButton, {
132
- className: (_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 ? void 0 : (_props$styleProps19$c = _props$styleProps19.classNames) === null || _props$styleProps19$c === void 0 ? void 0 : _props$styleProps19$c.closeButtonClassName,
133
- styles: closeButtonStyles,
134
- tabIndex: 0,
131
+ }, ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.subtitleText) || defaultProactiveChatPaneControlProps.subtitleText))), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideCloseButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(CloseButton, _extends({}, closeButtonProps, {
132
+ className: (_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 ? void 0 : (_props$styleProps18$c = _props$styleProps18.classNames) === null || _props$styleProps18$c === void 0 ? void 0 : _props$styleProps18$c.closeButtonClassName,
135
133
  onClick: handleCloseClick,
136
- id: elementId + "-closebutton",
137
- "aria-label": ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.closeButtonAriaLabel) || defaultProactiveChatPaneControlProps.closeButtonAriaLabel
138
- }))), /*#__PURE__*/React.createElement(Stack, {
134
+ styles: closeButtonStyles,
135
+ hoverStyles: closeButtonHoverStyles,
136
+ id: elementId + "-closebutton"
137
+ })))), /*#__PURE__*/React.createElement(Stack, {
139
138
  horizontal: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.isBodyContainerHorizantal) || defaultProactiveChatPaneControlProps.isBodyContainerHorizantal,
140
- className: (_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 ? void 0 : (_props$styleProps20$c = _props$styleProps20.classNames) === null || _props$styleProps20$c === void 0 ? void 0 : _props$styleProps20$c.bodyContainerClassName,
139
+ className: (_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 ? void 0 : (_props$styleProps19$c = _props$styleProps19.classNames) === null || _props$styleProps19$c === void 0 ? void 0 : _props$styleProps19$c.bodyContainerClassName,
141
140
  styles: bodyContainerStyles,
142
141
  tabIndex: -1,
143
142
  id: elementId + "-bodycontainer"
144
143
  }, !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hideBodyTitle) && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.bodyTitle) || /*#__PURE__*/React.createElement(Label, {
145
- className: (_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 ? void 0 : (_props$styleProps21$c = _props$styleProps21.classNames) === null || _props$styleProps21$c === void 0 ? void 0 : _props$styleProps21$c.bodyTitleClassName,
144
+ className: (_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 ? void 0 : (_props$styleProps20$c = _props$styleProps20.classNames) === null || _props$styleProps20$c === void 0 ? void 0 : _props$styleProps20$c.bodyTitleClassName,
146
145
  styles: bodyTitleStyles,
147
146
  tabIndex: -1,
148
147
  id: elementId + "-bodytitle"
149
148
  }, ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.bodyTitleText) || defaultProactiveChatPaneControlProps.bodyTitleText)), !((_props$controlProps18 = props.controlProps) !== null && _props$controlProps18 !== void 0 && _props$controlProps18.hideStartButton) && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.startButton) || /*#__PURE__*/React.createElement(DefaultButton, {
150
- className: (_props$styleProps22 = props.styleProps) === null || _props$styleProps22 === void 0 ? void 0 : (_props$styleProps22$c = _props$styleProps22.classNames) === null || _props$styleProps22$c === void 0 ? void 0 : _props$styleProps22$c.startButtonClassName,
149
+ className: (_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 ? void 0 : (_props$styleProps21$c = _props$styleProps21.classNames) === null || _props$styleProps21$c === void 0 ? void 0 : _props$styleProps21$c.startButtonClassName,
151
150
  styles: startButtonStyles,
152
151
  tabIndex: 0,
153
152
  text: ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.startButtonText) || defaultProactiveChatPaneControlProps.startButtonText,
@@ -8,7 +8,11 @@ export const defaultProactiveChatPaneControlProps = {
8
8
  hideSubtitle: false,
9
9
  subtitleText: "Live chat support!",
10
10
  hideCloseButton: false,
11
- closeButtonAriaLabel: "Close Button",
11
+ closeButtonProps: {
12
+ type: "icon",
13
+ iconName: "ChromeClose",
14
+ hideButtonTitle: true
15
+ },
12
16
  isBodyContainerHorizantal: false,
13
17
  hideBodyTitle: false,
14
18
  bodyTitleText: "Hi! Have any questions? I am here to help.",
@@ -1,13 +1,4 @@
1
- import { CloseChatButtonIconBase64 } from "../../../../../assets/Icons";
2
1
  export const defaultProactiveChatPaneCloseButtonStyles = {
3
- backgroundImage: `url(${CloseChatButtonIconBase64})`,
4
- backgroundPosition: "center",
5
- backgroundRepeat: "no-repeat",
6
- color: "#605e5c",
7
- cursor: "pointer",
8
- height: "14px",
9
- lineHeight: "14px",
10
- textAlign: "center",
11
- width: "14px",
12
- zIndex: "inherit"
2
+ color: "white",
3
+ fontSize: "12px"
13
4
  };
@@ -8,7 +8,11 @@ export const presetOneProactiveChatPaneControlProps = {
8
8
  hideSubtitle: false,
9
9
  subtitleText: "Live chat support!",
10
10
  hideCloseButton: false,
11
- closeButtonAriaLabel: "Close Button",
11
+ closeButtonProps: {
12
+ type: "icon",
13
+ iconName: "ChromeClose",
14
+ hideButtonTitle: true
15
+ },
12
16
  isBodyContainerHorizantal: true,
13
17
  hideBodyTitle: false,
14
18
  bodyTitleText: "Hi! Have any questions? I am here to help.",
@@ -8,7 +8,11 @@ export const presetThreeProactiveChatPaneControlProps = {
8
8
  hideSubtitle: false,
9
9
  subtitleText: "Live chat support!",
10
10
  hideCloseButton: false,
11
- closeButtonAriaLabel: "Close Button",
11
+ closeButtonProps: {
12
+ type: "icon",
13
+ iconName: "ChromeClose",
14
+ hideButtonTitle: true
15
+ },
12
16
  isBodyContainerHorizantal: false,
13
17
  hideBodyTitle: false,
14
18
  bodyTitleText: "Hi! Have any questions? I am here to help.",
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";