@microsoft/omnichannel-chat-components 0.1.0-main.423d0ce → 0.1.0-main.7a911ca

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 (11) hide show
  1. package/lib/cjs/common/Constants.js +10 -1
  2. package/lib/cjs/components/chatbutton/ChatButton.js +26 -23
  3. package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +3 -1
  4. package/lib/cjs/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
  5. package/lib/esm/common/Constants.js +8 -0
  6. package/lib/esm/components/chatbutton/ChatButton.js +26 -23
  7. package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +3 -1
  8. package/lib/esm/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
  9. package/lib/types/common/Constants.d.ts +2 -0
  10. package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts +2 -0
  11. 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.ElementType = exports.BROADCAST_CHANNEL_NAME = exports.AccessibilityBrightnessRatio = void 0;
6
+ exports.Regex = exports.KeyCodes = exports.HiddenTextStyles = exports.ElementType = exports.BROADCAST_CHANNEL_NAME = exports.AccessibilityBrightnessRatio = void 0;
7
7
 
8
8
  var _class, _class2;
9
9
 
@@ -16,6 +16,15 @@ const AccessibilityBrightnessRatio = 1.2;
16
16
  exports.AccessibilityBrightnessRatio = AccessibilityBrightnessRatio;
17
17
  const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
18
18
  exports.BROADCAST_CHANNEL_NAME = BROADCAST_CHANNEL_NAME;
19
+ const HiddenTextStyles = {
20
+ position: "absolute",
21
+ height: "1px",
22
+ width: "1px",
23
+ overflow: "hidden",
24
+ clip: "rect(1px, 1px, 1px, 1px)",
25
+ whiteSpace: "nowrap"
26
+ };
27
+ exports.HiddenTextStyles = HiddenTextStyles;
19
28
  const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _defineProperty(_class, "SPACE", "Space"), _defineProperty(_class, "DeclineCallHotKey", "D"), _defineProperty(_class, "AcceptAudioCallHotKey", "S"), _defineProperty(_class, "AcceptVideoCallHotKey", "A"), _defineProperty(_class, "ToggleMicHotKey", "M"), _defineProperty(_class, "ToggleCameraHotKey", "O"), _class);
20
29
  exports.KeyCodes = KeyCodes;
21
30
  const Regex = (_class2 = class Regex {}, _defineProperty(_class2, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _defineProperty(_class2, "URLRegex", /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi), _class2);
package/lib/cjs/components/chatbutton/ChatButton.js CHANGED
@@ -42,13 +42,16 @@ 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;
45
+ var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl, _props$controlProps2;
46
46
 
47
- return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
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
49
  styles: notificationBubbleStyles,
49
50
  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,
50
51
  id: parentId + "-notification-bubble"
51
- }, unreadMessageCount);
52
+ }, unreadMessageCount, /*#__PURE__*/_react2.default.createElement("span", {
53
+ style: _Constants.HiddenTextStyles
54
+ }, (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.unreadMessageString));
52
55
  }
53
56
 
54
57
  return null;
@@ -68,7 +71,7 @@ function IconContainer(props, parentId) {
68
71
  }
69
72
 
70
73
  function TextContainer(props, parentId) {
71
- var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps2, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
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;
72
75
 
73
76
  const textContainerStyles = {
74
77
  root: Object.assign({}, _defaultChatButtonTextContainerStyles.defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
@@ -79,12 +82,12 @@ function TextContainer(props, parentId) {
79
82
  const subtitleStyles = {
80
83
  root: Object.assign({}, _defaultChatButtonSubTitleStyles.defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
81
84
  };
82
- const hideChatTitle = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.hideChatTitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTitle);
83
- const hideChatSubtitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatSubtitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatSubtitle);
84
- const titleDir = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
85
- const titleText = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
86
- const subtitleDir = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
87
- const subtitleText = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
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);
88
91
  return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
89
92
  styles: textContainerStyles,
90
93
  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,
@@ -105,23 +108,23 @@ function TextContainer(props, parentId) {
105
108
  }
106
109
 
107
110
  function ChatButton(props) {
108
- var _props$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$styleProps11;
109
-
110
- const elementId = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.id) ?? "lcw-components-chat-button";
111
- const defaultAriaLabel = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.ariaLabel) ?? "live chat button";
112
- const defaultRole = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
113
- const containersDir = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
114
- const hideChatButton = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
115
- const hideChatIcon = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
116
- const hideChatTextContainer = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
117
- const hideNotificationBubble = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
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);
118
121
  const chatButtonGroupStyles = {
119
122
  root: Object.assign({}, _defaultChatButtonGeneralStyles.defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
120
123
  };
121
124
  const handleInitiateChatClick = (0, _react2.useCallback)(() => {
122
- var _props$controlProps16;
125
+ var _props$controlProps17;
123
126
 
124
- if ((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.onClick) {
127
+ if ((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.onClick) {
125
128
  const customEvent = {
126
129
  elementType: _Constants.ElementType.ChatButton,
127
130
  elementId: elementId,
@@ -150,7 +153,7 @@ function ChatButton(props) {
150
153
  onClick: handleInitiateChatClick,
151
154
  onKeyDown: handleInputKeyDown,
152
155
  "aria-label": defaultAriaLabel
153
- }, !hideChatIcon && IconContainer(props, elementId), !hideChatTextContainer && TextContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId)));
156
+ }, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
154
157
  }
155
158
 
156
159
  var _default = ChatButton;
package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js CHANGED
@@ -20,6 +20,8 @@ const defaultChatButtonControlProps = {
20
20
  hideChatTextContainer: false,
21
21
  hideChatSubtitle: false,
22
22
  hideChatTitle: false,
23
- hideNotificationBubble: true
23
+ hideNotificationBubble: true,
24
+ unreadMessageString: "new messages",
25
+ largeUnreadMessageString: "99+"
24
26
  };
25
27
  exports.defaultChatButtonControlProps = defaultChatButtonControlProps;
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/esm/common/Constants.js CHANGED
@@ -7,6 +7,14 @@ export const AccessibilityBrightnessRatio = 1.2;
7
7
  /* App constants*/
8
8
 
9
9
  export const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
10
+ export const HiddenTextStyles = {
11
+ position: "absolute",
12
+ height: "1px",
13
+ width: "1px",
14
+ overflow: "hidden",
15
+ clip: "rect(1px, 1px, 1px, 1px)",
16
+ whiteSpace: "nowrap"
17
+ };
10
18
  export const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _defineProperty(_class, "SPACE", "Space"), _defineProperty(_class, "DeclineCallHotKey", "D"), _defineProperty(_class, "AcceptAudioCallHotKey", "S"), _defineProperty(_class, "AcceptVideoCallHotKey", "A"), _defineProperty(_class, "ToggleMicHotKey", "M"), _defineProperty(_class, "ToggleCameraHotKey", "O"), _class);
11
19
  export const Regex = (_class2 = class Regex {}, _defineProperty(_class2, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _defineProperty(_class2, "URLRegex", /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi), _class2);
12
20
  export let ElementType;
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 } 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,13 +20,16 @@ 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;
23
+ var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl, _props$controlProps2;
24
24
 
25
- return decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/React.createElement(Label, {
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
27
  styles: notificationBubbleStyles,
27
28
  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,
28
29
  id: parentId + "-notification-bubble"
29
- }, unreadMessageCount);
30
+ }, unreadMessageCount, /*#__PURE__*/React.createElement("span", {
31
+ style: HiddenTextStyles
32
+ }, (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.unreadMessageString));
30
33
  }
31
34
 
32
35
  return null;
@@ -46,7 +49,7 @@ function IconContainer(props, parentId) {
46
49
  }
47
50
 
48
51
  function TextContainer(props, parentId) {
49
- var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps2, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
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;
50
53
 
51
54
  const textContainerStyles = {
52
55
  root: Object.assign({}, defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
@@ -57,12 +60,12 @@ function TextContainer(props, parentId) {
57
60
  const subtitleStyles = {
58
61
  root: Object.assign({}, defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
59
62
  };
60
- const hideChatTitle = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.hideChatTitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTitle);
61
- const hideChatSubtitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatSubtitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatSubtitle);
62
- const titleDir = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
63
- const titleText = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.titleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.titleText);
64
- const subtitleDir = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
65
- const subtitleText = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.subtitleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.subtitleText);
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);
66
69
  return decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/React.createElement(Stack, {
67
70
  styles: textContainerStyles,
68
71
  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,
@@ -83,23 +86,23 @@ function TextContainer(props, parentId) {
83
86
  }
84
87
 
85
88
  function ChatButton(props) {
86
- var _props$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$styleProps11;
89
+ var _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$styleProps11;
87
90
 
88
- const elementId = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.id) ?? "lcw-components-chat-button";
89
- const defaultAriaLabel = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.ariaLabel) ?? "live chat button";
90
- const defaultRole = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.role) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.role);
91
- const containersDir = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
92
- const hideChatButton = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.hideChatButton) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatButton);
93
- const hideChatIcon = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatIcon) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatIcon);
94
- const hideChatTextContainer = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatTextContainer) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTextContainer);
95
- const hideNotificationBubble = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideNotificationBubble) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideNotificationBubble);
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);
96
99
  const chatButtonGroupStyles = {
97
100
  root: Object.assign({}, defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
98
101
  };
99
102
  const handleInitiateChatClick = useCallback(() => {
100
- var _props$controlProps16;
103
+ var _props$controlProps17;
101
104
 
102
- if ((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.onClick) {
105
+ if ((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.onClick) {
103
106
  const customEvent = {
104
107
  elementType: ElementType.ChatButton,
105
108
  elementId: elementId,
@@ -126,7 +129,7 @@ function ChatButton(props) {
126
129
  onClick: handleInitiateChatClick,
127
130
  onKeyDown: handleInputKeyDown,
128
131
  "aria-label": defaultAriaLabel
129
- }, !hideChatIcon && IconContainer(props, elementId), !hideChatTextContainer && TextContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId)));
132
+ }, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
130
133
  }
131
134
 
132
135
  export default ChatButton;
package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js CHANGED
@@ -14,5 +14,7 @@ export const defaultChatButtonControlProps = {
14
14
  hideChatTextContainer: false,
15
15
  hideChatSubtitle: false,
16
16
  hideChatTitle: false,
17
- hideNotificationBubble: true
17
+ hideNotificationBubble: true,
18
+ unreadMessageString: "new messages",
19
+ largeUnreadMessageString: "99+"
18
20
  };
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/types/common/Constants.d.ts CHANGED
@@ -1,5 +1,7 @@
1
+ /// <reference types="react" />
1
2
  export declare const AccessibilityBrightnessRatio = 1.2;
2
3
  export declare const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
4
+ export declare const HiddenTextStyles: React.CSSProperties;
3
5
  export declare const KeyCodes: {
4
6
  new (): {};
5
7
  readonly ENTER: "Enter";
package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts CHANGED
@@ -13,4 +13,6 @@ export interface IChatButtonControlProps {
13
13
  hideChatSubtitle?: boolean;
14
14
  hideChatTitle?: boolean;
15
15
  hideNotificationBubble?: boolean;
16
+ unreadMessageString?: string;
17
+ largeUnreadMessageString?: string;
16
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "0.1.0-main.423d0ce",
3
+ "version": "0.1.0-main.7a911ca",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",