@microsoft/omnichannel-chat-components 1.1.19 → 1.2.0-main.5ebd4eb
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.
- package/README.md +140 -1
- package/lib/cjs/common/Constants.js +8 -11
- package/lib/cjs/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js +10 -3
- package/lib/cjs/components/callingcontainer/subcomponents/Timer/Timer.js +10 -1
- package/lib/cjs/components/chatbutton/ChatButton.blankAnnouncements.a11y.spec.js +158 -0
- package/lib/cjs/components/chatbutton/ChatButton.browseMode.a11y.spec.js +227 -0
- package/lib/cjs/components/chatbutton/ChatButton.browseMode.unfixed.a11y.spec.js +112 -0
- package/lib/cjs/components/chatbutton/ChatButton.js +52 -16
- package/lib/cjs/components/common/subcomponents/CloseButton.js +1 -3
- package/lib/cjs/components/confirmationpane/ConfirmationPane.js +10 -8
- package/lib/cjs/components/confirmationpane/common/defaultProps/defaultConfirmationPaneControlProps.js +1 -0
- package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js +11 -4
- package/lib/cjs/components/footer/subcomponents/DownloadTranscriptButton.js +1 -3
- package/lib/cjs/components/footer/subcomponents/EmailTranscriptButton.js +1 -3
- package/lib/cjs/components/header/Header.js +16 -4
- package/lib/cjs/components/header/common/defaultStyles/defaultHeaderStyleProps.js +23 -0
- package/lib/cjs/components/header/subcomponents/MinimizeButton.js +1 -3
- package/lib/cjs/components/inputvalidationpane/InputValidationPane.js +34 -14
- package/lib/cjs/components/inputvalidationpane/common/default/defaultProps/defaultInputValidationPaneControlProps.js +1 -0
- package/lib/cjs/components/notificationpane/subcomponents/CloseChatButton.js +1 -3
- package/lib/cjs/components/notificationpane/subcomponents/DismissButton.js +1 -3
- package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js +94 -17
- package/lib/cjs/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultichoiceInputStyles.js +1 -0
- package/lib/cjs/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultilineTextInputStyles.js +1 -0
- package/lib/cjs/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneTextInputStyles.js +1 -0
- package/lib/cjs/package.json +1 -0
- package/lib/cjs/services/EventQueue.js +4 -7
- package/lib/esm/common/Constants.js +1 -1
- package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js +10 -3
- package/lib/esm/components/callingcontainer/subcomponents/Timer/Timer.js +10 -1
- package/lib/esm/components/chatbutton/ChatButton.blankAnnouncements.a11y.spec.js +155 -0
- package/lib/esm/components/chatbutton/ChatButton.browseMode.a11y.spec.js +224 -0
- package/lib/esm/components/chatbutton/ChatButton.browseMode.unfixed.a11y.spec.js +108 -0
- package/lib/esm/components/chatbutton/ChatButton.js +53 -16
- package/lib/esm/components/common/subcomponents/CloseButton.js +1 -3
- package/lib/esm/components/confirmationpane/ConfirmationPane.js +10 -8
- package/lib/esm/components/confirmationpane/common/defaultProps/defaultConfirmationPaneControlProps.js +1 -0
- package/lib/esm/components/footer/subcomponents/AudioNotificationButton.js +11 -4
- package/lib/esm/components/footer/subcomponents/DownloadTranscriptButton.js +1 -3
- package/lib/esm/components/footer/subcomponents/EmailTranscriptButton.js +1 -3
- package/lib/esm/components/header/Header.js +16 -4
- package/lib/esm/components/header/common/defaultStyles/defaultHeaderStyleProps.js +23 -0
- package/lib/esm/components/header/subcomponents/MinimizeButton.js +1 -3
- package/lib/esm/components/inputvalidationpane/InputValidationPane.js +34 -14
- package/lib/esm/components/inputvalidationpane/common/default/defaultProps/defaultInputValidationPaneControlProps.js +1 -0
- package/lib/esm/components/notificationpane/subcomponents/CloseChatButton.js +1 -3
- package/lib/esm/components/notificationpane/subcomponents/DismissButton.js +1 -3
- package/lib/esm/components/prechatsurveypane/PreChatSurveyPane.js +94 -16
- package/lib/esm/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultichoiceInputStyles.js +1 -0
- package/lib/esm/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultilineTextInputStyles.js +1 -0
- package/lib/esm/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneTextInputStyles.js +1 -0
- package/lib/types/common/Constants.d.ts +2 -0
- package/lib/types/components/chatbutton/ChatButton.blankAnnouncements.a11y.spec.d.ts +1 -0
- package/lib/types/components/chatbutton/ChatButton.browseMode.a11y.spec.d.ts +1 -0
- package/lib/types/components/chatbutton/ChatButton.browseMode.unfixed.a11y.spec.d.ts +1 -0
- package/lib/types/components/confirmationpane/interfaces/IConfirmationPaneControlProps.d.ts +1 -0
- package/lib/types/components/header/interfaces/IHeaderStyleProps.d.ts +12 -0
- package/lib/types/components/inputvalidationpane/interfaces/IInputValidationPaneControlProps.d.ts +1 -0
- package/package.json +41 -32
|
@@ -16,7 +16,7 @@ import { defaultConfirmationPaneTitleStyles } from "./common/defaultStyles/defau
|
|
|
16
16
|
import { defaultConfirmationPaneConfirmButtonFocusedStyles } from "./common/defaultStyles/defaultConfirmationPaneConfirmButtonFocusedStyles";
|
|
17
17
|
import { defaultConfirmationPaneCancelButtonFocusedStyles } from "./common/defaultStyles/defaultConfirmationPaneCancelButtonFocusedStyles";
|
|
18
18
|
function ConfirmationPane(props) {
|
|
19
|
-
var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _props$styleProps1, _props$styleProps10, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$styleProps11, _props$controlProps9, _props$controlProps0, _props$componentOverr2, _props$styleProps12, _props$controlProps1, _props$styleProps13, _props$controlProps10, _props$
|
|
19
|
+
var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _props$styleProps1, _props$styleProps10, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$styleProps11, _props$controlProps9, _props$controlProps0, _props$componentOverr2, _props$styleProps12, _props$controlProps1, _props$styleProps13, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$styleProps14, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$componentOverr4, _props$styleProps15, _props$controlProps15, _props$controlProps16;
|
|
20
20
|
const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultConfirmationPaneControlProps.id;
|
|
21
21
|
const handleConfirmClick = useCallback(() => {
|
|
22
22
|
var _props$controlProps2;
|
|
@@ -98,21 +98,23 @@ function ConfirmationPane(props) {
|
|
|
98
98
|
horizontal: true,
|
|
99
99
|
className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 || (_props$styleProps13 = _props$styleProps13.classNames) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.buttonGroupClassName,
|
|
100
100
|
styles: buttonGroupStyles,
|
|
101
|
-
id: elementId + "-buttongroup"
|
|
102
|
-
|
|
101
|
+
id: elementId + "-buttongroup",
|
|
102
|
+
role: "group",
|
|
103
|
+
"aria-label": ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.buttonGroupAriaLabel) || defaultConfirmationPaneControlProps.buttonGroupAriaLabel
|
|
104
|
+
}, !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideConfirmButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.confirmButton) || /*#__PURE__*/React.createElement(PrimaryButton, {
|
|
103
105
|
className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 || (_props$styleProps14 = _props$styleProps14.classNames) === null || _props$styleProps14 === void 0 ? void 0 : _props$styleProps14.confirmButtonClassName,
|
|
104
106
|
styles: confirmButtonStyles,
|
|
105
|
-
text: ((_props$
|
|
107
|
+
text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.confirmButtonText) || defaultConfirmationPaneControlProps.confirmButtonText,
|
|
106
108
|
onClick: handleConfirmClick,
|
|
107
109
|
id: elementId + "-confirmbutton",
|
|
108
|
-
ariaLabel: ((_props$
|
|
109
|
-
})), !((_props$
|
|
110
|
+
ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.confirmButtonAriaLabel) || defaultConfirmationPaneControlProps.confirmButtonAriaLabel
|
|
111
|
+
})), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideCancelButton) && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.cancelButton) || /*#__PURE__*/React.createElement(DefaultButton, {
|
|
110
112
|
className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.classNames) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.cancelButtonClassName,
|
|
111
113
|
styles: cancelButtonStyles,
|
|
112
|
-
text: ((_props$
|
|
114
|
+
text: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.cancelButtonText) || defaultConfirmationPaneControlProps.cancelButtonText,
|
|
113
115
|
onClick: handleCancelClick,
|
|
114
116
|
id: elementId + "-cancelbutton",
|
|
115
|
-
ariaLabel: ((_props$
|
|
117
|
+
ariaLabel: ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.cancelButtonAriaLabel) || defaultConfirmationPaneControlProps.cancelButtonAriaLabel
|
|
116
118
|
})))));
|
|
117
119
|
}
|
|
118
120
|
export default ConfirmationPane;
|
|
@@ -7,6 +7,7 @@ export const defaultConfirmationPaneControlProps = {
|
|
|
7
7
|
titleText: Texts.ConfirmationPaneTitle,
|
|
8
8
|
hideSubtitle: false,
|
|
9
9
|
subtitleText: Texts.ConfirmationPaneSubtitle,
|
|
10
|
+
buttonGroupAriaLabel: AriaLabels.ConfirmationPaneButtonGroup,
|
|
10
11
|
hideConfirmButton: false,
|
|
11
12
|
confirmButtonText: Texts.ConfirmButtonText,
|
|
12
13
|
confirmButtonAriaLabel: AriaLabels.ConfirmationPaneConfirm,
|
|
@@ -1,12 +1,19 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
1
7
|
import { IconButton } from "@fluentui/react";
|
|
2
8
|
import React, { useCallback, useEffect, useState } from "react";
|
|
3
9
|
import { BroadcastService } from "../../../services/BroadcastService";
|
|
4
10
|
import { AriaLabels, ButtonTypes, ElementType, EventNames, IconNames } from "../../../common/Constants";
|
|
5
11
|
function AudioNotificationButton(props) {
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
12
|
+
const disabled = props.disabled;
|
|
13
|
+
const _useState = useState(props.isAudioMuted),
|
|
14
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
15
|
+
muted = _useState2[0],
|
|
16
|
+
setMuted = _useState2[1];
|
|
10
17
|
let iconStyles = {};
|
|
11
18
|
if (props.type === ButtonTypes.Icon) {
|
|
12
19
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -2,9 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { AriaLabels, ElementType, EventNames, IconNames } from "../../../common/Constants";
|
|
3
3
|
import CommandButton from "../../common/commandbutton/CommandButton";
|
|
4
4
|
function DownloadTranscriptButton(props) {
|
|
5
|
-
const
|
|
6
|
-
type
|
|
7
|
-
} = props;
|
|
5
|
+
const type = props.type;
|
|
8
6
|
const customEvent = {
|
|
9
7
|
elementType: ElementType.FooterDownloadTranscriptButton,
|
|
10
8
|
elementId: props === null || props === void 0 ? void 0 : props.id,
|
|
@@ -2,9 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { AriaLabels, ElementType, EventNames, IconNames } from "../../../common/Constants";
|
|
3
3
|
import CommandButton from "../../common/commandbutton/CommandButton";
|
|
4
4
|
function EmailTranscriptButton(props) {
|
|
5
|
-
const
|
|
6
|
-
type
|
|
7
|
-
} = props;
|
|
5
|
+
const type = props.type;
|
|
8
6
|
const customEvent = {
|
|
9
7
|
elementType: ElementType.FooterEmailTranscriptButton,
|
|
10
8
|
elementId: props === null || props === void 0 ? void 0 : props.id,
|
|
@@ -9,7 +9,7 @@ import { defaultHeaderProps } from "./common/defaultProps/defaultHeaderProps";
|
|
|
9
9
|
import { processCustomComponents } from "../../common/utils";
|
|
10
10
|
initializeIcons();
|
|
11
11
|
function Header(props) {
|
|
12
|
-
var _props$controlProps, _defaultHeaderProps$c, _defaultHeaderProps$s, _props$styleProps, _defaultHeaderProps$c2, _props$controlProps2, _defaultHeaderProps$c3, _props$controlProps3, _defaultHeaderProps$c4, _props$controlProps4, _defaultHeaderProps$c5, _props$controlProps5, _defaultHeaderProps$s2, _props$styleProps2, _defaultHeaderProps$s3, _props$styleProps3, _defaultHeaderProps$s4, _props$styleProps4, _defaultHeaderProps$s5, _props$styleProps5, _defaultHeaderProps$s6, _props$styleProps6, _defaultHeaderProps$s7, _props$styleProps7, _defaultHeaderProps$s8, _props$styleProps8, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$controlProps9, _props$componentOverr2, _props$controlProps0, _props$controlProps1, _props$controlProps10, _props$componentOverr3, _props$controlProps11, _props$controlProps12, _props$componentOverr4, _props$controlProps13;
|
|
12
|
+
var _props$controlProps, _defaultHeaderProps$c, _defaultHeaderProps$s, _props$styleProps, _defaultHeaderProps$c2, _props$controlProps2, _defaultHeaderProps$c3, _props$controlProps3, _defaultHeaderProps$c4, _props$controlProps4, _defaultHeaderProps$c5, _props$controlProps5, _defaultHeaderProps$s2, _props$styleProps2, _defaultHeaderProps$s3, _props$styleProps3, _defaultHeaderProps$s4, _props$styleProps4, _defaultHeaderProps$s5, _props$styleProps5, _defaultHeaderProps$s6, _props$styleProps6, _defaultHeaderProps$s7, _props$styleProps7, _defaultHeaderProps$s8, _props$styleProps8, _defaultHeaderProps$s9, _props$styleProps9, _defaultHeaderProps$s0, _props$styleProps0, _defaultHeaderProps$s1, _props$styleProps1, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$controlProps9, _props$componentOverr2, _props$controlProps0, _props$controlProps1, _props$controlProps10, _props$componentOverr3, _props$controlProps11, _props$controlProps12, _props$componentOverr4, _props$controlProps13;
|
|
13
13
|
const headerId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? ((_defaultHeaderProps$c = defaultHeaderProps.controlProps) === null || _defaultHeaderProps$c === void 0 ? void 0 : _defaultHeaderProps$c.id);
|
|
14
14
|
const stackStyles = {
|
|
15
15
|
root: Object.assign({}, (_defaultHeaderProps$s = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s === void 0 ? void 0 : _defaultHeaderProps$s.generalStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
|
|
@@ -31,6 +31,9 @@ function Header(props) {
|
|
|
31
31
|
const minimizeButtonStyles = Object.assign({}, (_defaultHeaderProps$s6 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s6 === void 0 ? void 0 : _defaultHeaderProps$s6.minimizeButtonStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.minimizeButtonStyleProps);
|
|
32
32
|
const minimizeButtonHoverStyles = Object.assign({}, (_defaultHeaderProps$s7 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s7 === void 0 ? void 0 : _defaultHeaderProps$s7.minimizeButtonHoverStyleProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.minimizeButtonHoverStyleProps);
|
|
33
33
|
const headerItemFocusStyles = Object.assign({}, (_defaultHeaderProps$s8 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s8 === void 0 ? void 0 : _defaultHeaderProps$s8.headerItemFocusStyleProps, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.headerItemFocusStyleProps);
|
|
34
|
+
const headerLeftGroupStyles = Object.assign({}, (_defaultHeaderProps$s9 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s9 === void 0 ? void 0 : _defaultHeaderProps$s9.headerLeftGroupStyleProps, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.headerLeftGroupStyleProps);
|
|
35
|
+
const headerLeftGroupInnerContainerStyles = Object.assign({}, (_defaultHeaderProps$s0 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s0 === void 0 ? void 0 : _defaultHeaderProps$s0.headerLeftGroupInnerContainerStyleProps, (_props$styleProps0 = props.styleProps) === null || _props$styleProps0 === void 0 ? void 0 : _props$styleProps0.headerLeftGroupInnerContainerStyleProps);
|
|
36
|
+
const titleContainerStyles = Object.assign({}, (_defaultHeaderProps$s1 = defaultHeaderProps.styleProps) === null || _defaultHeaderProps$s1 === void 0 ? void 0 : _defaultHeaderProps$s1.titleContainerStyleProps, (_props$styleProps1 = props.styleProps) === null || _props$styleProps1 === void 0 ? void 0 : _props$styleProps1.titleContainerStyleProps);
|
|
34
37
|
return /*#__PURE__*/React.createElement(Stack, {
|
|
35
38
|
as: "article",
|
|
36
39
|
id: headerId,
|
|
@@ -42,19 +45,28 @@ function Header(props) {
|
|
|
42
45
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
43
46
|
horizontal: true,
|
|
44
47
|
id: Ids.HeaderLeftGroupId,
|
|
45
|
-
verticalAlign: "center"
|
|
48
|
+
verticalAlign: "center",
|
|
49
|
+
styles: {
|
|
50
|
+
root: headerLeftGroupStyles
|
|
51
|
+
}
|
|
46
52
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
47
53
|
horizontal: true,
|
|
48
|
-
verticalAlign: "center"
|
|
54
|
+
verticalAlign: "center",
|
|
55
|
+
styles: {
|
|
56
|
+
root: headerLeftGroupInnerContainerStyles
|
|
57
|
+
}
|
|
49
58
|
}, processCustomComponents((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 || (_props$controlProps7 = _props$controlProps7.leftGroup) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.children), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideIcon) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.headerIcon) || /*#__PURE__*/React.createElement(Image, {
|
|
50
59
|
id: chatIconProps.id,
|
|
51
60
|
src: chatIconProps.src,
|
|
52
61
|
alt: chatIconProps.alt,
|
|
53
62
|
tabIndex: -1,
|
|
54
63
|
styles: iconImageStyles
|
|
55
|
-
})), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.headerTitle) || /*#__PURE__*/React.createElement("h1",
|
|
64
|
+
})), !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.headerTitle) || /*#__PURE__*/React.createElement("h1", {
|
|
65
|
+
style: titleContainerStyles
|
|
66
|
+
}, /*#__PURE__*/React.createElement(Label, {
|
|
56
67
|
id: titleProps.id,
|
|
57
68
|
tabIndex: -1,
|
|
69
|
+
title: titleProps === null || titleProps === void 0 ? void 0 : titleProps.text,
|
|
58
70
|
styles: titleStyles
|
|
59
71
|
}, titleProps === null || titleProps === void 0 ? void 0 : titleProps.text))))), /*#__PURE__*/React.createElement(Stack, {
|
|
60
72
|
horizontal: true,
|
|
@@ -37,5 +37,28 @@ export const defaultHeaderStyleProps = {
|
|
|
37
37
|
},
|
|
38
38
|
headerItemFocusStyleProps: {
|
|
39
39
|
border: "2px dotted #000"
|
|
40
|
+
},
|
|
41
|
+
headerLeftGroupStyleProps: {
|
|
42
|
+
flex: 1,
|
|
43
|
+
minWidth: 0,
|
|
44
|
+
overflow: "hidden"
|
|
45
|
+
},
|
|
46
|
+
headerLeftGroupInnerContainerStyleProps: {
|
|
47
|
+
minWidth: 0,
|
|
48
|
+
overflow: "hidden",
|
|
49
|
+
flex: 1,
|
|
50
|
+
maxWidth: "100%"
|
|
51
|
+
},
|
|
52
|
+
titleContainerStyleProps: {
|
|
53
|
+
margin: 0,
|
|
54
|
+
minWidth: 0,
|
|
55
|
+
overflow: "hidden",
|
|
56
|
+
flex: 1,
|
|
57
|
+
maxWidth: "100%",
|
|
58
|
+
display: "-webkit-box",
|
|
59
|
+
WebkitLineClamp: 2,
|
|
60
|
+
WebkitBoxOrient: "vertical",
|
|
61
|
+
textOverflow: "ellipsis",
|
|
62
|
+
wordBreak: "break-word"
|
|
40
63
|
}
|
|
41
64
|
};
|
|
@@ -2,9 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { AriaLabels, ElementType, EventNames, IconNames, Texts } from "../../../common/Constants";
|
|
3
3
|
import CommandButton from "../../common/commandbutton/CommandButton";
|
|
4
4
|
function MinimizeButton(props) {
|
|
5
|
-
const
|
|
6
|
-
type
|
|
7
|
-
} = props;
|
|
5
|
+
const type = props.type;
|
|
8
6
|
const customEvent = {
|
|
9
7
|
elementType: ElementType.HeaderMinimizeButton,
|
|
10
8
|
elementId: props === null || props === void 0 ? void 0 : props.id,
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
1
7
|
import { DefaultButton, PrimaryButton } from "@fluentui/react/lib/Button";
|
|
2
8
|
import { Label, Stack, TextField } from "@fluentui/react";
|
|
3
9
|
import React, { useCallback, useEffect, useState } from "react";
|
|
@@ -18,12 +24,24 @@ import { defaultInputValidationPaneSubtitleStyles } from "./common/default/defau
|
|
|
18
24
|
import { defaultInputValidationPaneTitleStyles } from "./common/default/defaultStyles/defaultInputValidationPaneTitleStyles";
|
|
19
25
|
import { generateEventName } from "../../common/utils";
|
|
20
26
|
function InputValidationPane(props) {
|
|
21
|
-
var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps12, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _props$styleProps1, _props$styleProps10, _props$styleProps11, _props$styleProps12, _props$styleProps13, _props$styleProps14, _props$controlProps13, _props$styleProps15, _props$controlProps14, _props$controlProps15, _props$styleProps16, _props$controlProps16, _props$componentOverr, _props$styleProps17, _props$controlProps17, _props$controlProps18, _props$componentOverr2, _props$styleProps18, _props$controlProps19, _props$controlProps20, _props$componentOverr3, _props$styleProps19, _props$controlProps21, _props$controlProps22, _props$controlProps23, _props$componentOverr4, _props$styleProps20, _props$controlProps24, _props$controlProps25, _props$styleProps21, _props$controlProps26, _props$
|
|
27
|
+
var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps12, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _props$styleProps1, _props$styleProps10, _props$styleProps11, _props$styleProps12, _props$styleProps13, _props$styleProps14, _props$controlProps13, _props$styleProps15, _props$controlProps14, _props$controlProps15, _props$styleProps16, _props$controlProps16, _props$componentOverr, _props$styleProps17, _props$controlProps17, _props$controlProps18, _props$componentOverr2, _props$styleProps18, _props$controlProps19, _props$controlProps20, _props$componentOverr3, _props$styleProps19, _props$controlProps21, _props$controlProps22, _props$controlProps23, _props$componentOverr4, _props$styleProps20, _props$controlProps24, _props$controlProps25, _props$styleProps21, _props$controlProps26, _props$controlProps27, _props$componentOverr5, _props$styleProps22, _props$controlProps28, _props$controlProps29, _props$controlProps30, _props$controlProps31, _props$componentOverr6, _props$styleProps23, _props$controlProps32, _props$controlProps33, _props$controlProps34;
|
|
22
28
|
const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultInputValidationPaneControlProps.id;
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
const _useState = useState(""),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
inputValue = _useState2[0],
|
|
32
|
+
setInputValue = _useState2[1];
|
|
33
|
+
const _useState3 = useState(true),
|
|
34
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
35
|
+
isInitialRendering = _useState4[0],
|
|
36
|
+
setIsInitialRendering = _useState4[1];
|
|
37
|
+
const _useState5 = useState(false),
|
|
38
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
39
|
+
isInvalidInput = _useState6[0],
|
|
40
|
+
setIsInvalidInput = _useState6[1];
|
|
41
|
+
const _useState7 = useState(false),
|
|
42
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
43
|
+
isSendButtonEnabled = _useState8[0],
|
|
44
|
+
setIsSendButtonEnabled = _useState8[1];
|
|
27
45
|
const isValidInput = useCallback(() => {
|
|
28
46
|
var _props$controlProps2, _props$controlProps3;
|
|
29
47
|
if (!((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.checkInput)) {
|
|
@@ -213,26 +231,28 @@ function InputValidationPane(props) {
|
|
|
213
231
|
className: (_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 || (_props$styleProps21 = _props$styleProps21.classNames) === null || _props$styleProps21 === void 0 ? void 0 : _props$styleProps21.buttonGroupClassName,
|
|
214
232
|
styles: buttonGroupStyles,
|
|
215
233
|
tabIndex: -1,
|
|
216
|
-
id: elementId + "-buttongroup"
|
|
217
|
-
|
|
234
|
+
id: elementId + "-buttongroup",
|
|
235
|
+
role: "group",
|
|
236
|
+
"aria-label": ((_props$controlProps26 = props.controlProps) === null || _props$controlProps26 === void 0 ? void 0 : _props$controlProps26.buttonGroupAriaLabel) || defaultInputValidationPaneControlProps.buttonGroupAriaLabel
|
|
237
|
+
}, !((_props$controlProps27 = props.controlProps) !== null && _props$controlProps27 !== void 0 && _props$controlProps27.hideSendButton) && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.sendButton) || /*#__PURE__*/React.createElement(PrimaryButton, {
|
|
218
238
|
className: (_props$styleProps22 = props.styleProps) === null || _props$styleProps22 === void 0 || (_props$styleProps22 = _props$styleProps22.classNames) === null || _props$styleProps22 === void 0 ? void 0 : _props$styleProps22.sendButtonClassName,
|
|
219
239
|
styles: sendButtonStyles,
|
|
220
|
-
title: ((_props$
|
|
240
|
+
title: ((_props$controlProps28 = props.controlProps) === null || _props$controlProps28 === void 0 ? void 0 : _props$controlProps28.sendButtonText) || defaultInputValidationPaneControlProps.sendButtonText,
|
|
221
241
|
tabIndex: 0,
|
|
222
242
|
disabled: !isSendButtonEnabled,
|
|
223
|
-
text: ((_props$
|
|
243
|
+
text: ((_props$controlProps29 = props.controlProps) === null || _props$controlProps29 === void 0 ? void 0 : _props$controlProps29.sendButtonText) || defaultInputValidationPaneControlProps.sendButtonText,
|
|
224
244
|
onClick: handleSendClick,
|
|
225
245
|
id: elementId + "-sendbutton",
|
|
226
|
-
ariaLabel: ((_props$
|
|
227
|
-
})), !((_props$
|
|
246
|
+
ariaLabel: ((_props$controlProps30 = props.controlProps) === null || _props$controlProps30 === void 0 ? void 0 : _props$controlProps30.sendButtonAriaLabel) || defaultInputValidationPaneControlProps.sendButtonAriaLabel
|
|
247
|
+
})), !((_props$controlProps31 = props.controlProps) !== null && _props$controlProps31 !== void 0 && _props$controlProps31.hideCancelButton) && (decodeComponentString((_props$componentOverr6 = props.componentOverrides) === null || _props$componentOverr6 === void 0 ? void 0 : _props$componentOverr6.cancelButton) || /*#__PURE__*/React.createElement(DefaultButton, {
|
|
228
248
|
className: (_props$styleProps23 = props.styleProps) === null || _props$styleProps23 === void 0 || (_props$styleProps23 = _props$styleProps23.classNames) === null || _props$styleProps23 === void 0 ? void 0 : _props$styleProps23.cancelButtonClassName,
|
|
229
249
|
styles: cancelButtonStyles,
|
|
230
|
-
title: ((_props$
|
|
250
|
+
title: ((_props$controlProps32 = props.controlProps) === null || _props$controlProps32 === void 0 ? void 0 : _props$controlProps32.cancelButtonText) || defaultInputValidationPaneControlProps.cancelButtonText,
|
|
231
251
|
tabIndex: 0,
|
|
232
|
-
text: ((_props$
|
|
252
|
+
text: ((_props$controlProps33 = props.controlProps) === null || _props$controlProps33 === void 0 ? void 0 : _props$controlProps33.cancelButtonText) || defaultInputValidationPaneControlProps.cancelButtonText,
|
|
233
253
|
onClick: handleCancelClick,
|
|
234
254
|
id: elementId + "-cancelbutton",
|
|
235
|
-
ariaLabel: ((_props$
|
|
255
|
+
ariaLabel: ((_props$controlProps34 = props.controlProps) === null || _props$controlProps34 === void 0 ? void 0 : _props$controlProps34.cancelButtonAriaLabel) || defaultInputValidationPaneControlProps.cancelButtonAriaLabel
|
|
236
256
|
})))));
|
|
237
257
|
}
|
|
238
258
|
export default InputValidationPane;
|
|
@@ -16,6 +16,7 @@ export const defaultInputValidationPaneControlProps = {
|
|
|
16
16
|
inputWithErrorMessageBorderColor: "rgb(164, 38, 44)",
|
|
17
17
|
invalidInputErrorMessageText: Texts.InvalidInputErrorMessageText,
|
|
18
18
|
isButtonGroupHorizontal: true,
|
|
19
|
+
buttonGroupAriaLabel: AriaLabels.InputValidationPaneButtonGroup,
|
|
19
20
|
hideSendButton: false,
|
|
20
21
|
enableSendButton: false,
|
|
21
22
|
sendButtonText: Texts.SaveButtonText,
|
|
@@ -2,9 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { ElementType, EventNames } from "../../../common/Constants";
|
|
3
3
|
import CommandButton from "../../common/commandbutton/CommandButton";
|
|
4
4
|
function CloseChatButton(props) {
|
|
5
|
-
const
|
|
6
|
-
type
|
|
7
|
-
} = props;
|
|
5
|
+
const type = props.type;
|
|
8
6
|
const customEvent = {
|
|
9
7
|
elementType: ElementType.NotificationCloseChatButton,
|
|
10
8
|
elementId: props === null || props === void 0 ? void 0 : props.id,
|
|
@@ -2,9 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { ElementType, EventNames } from "../../../common/Constants";
|
|
3
3
|
import CommandButton from "../../common/commandbutton/CommandButton";
|
|
4
4
|
function DismissButton(props) {
|
|
5
|
-
const
|
|
6
|
-
type
|
|
7
|
-
} = props;
|
|
5
|
+
const type = props.type;
|
|
8
6
|
const customEvent = {
|
|
9
7
|
elementType: ElementType.NotificationDismissButton,
|
|
10
8
|
elementId: props === null || props === void 0 ? void 0 : props.id,
|
|
@@ -8,9 +8,59 @@ import { defaultPreChatSurveyPaneACContainerStyles } from "./common/defaultProps
|
|
|
8
8
|
import { defaultPreChatSurveyPaneControlProps } from "./common/defaultProps/defaultPreChatSurveyPaneControlProps";
|
|
9
9
|
import { defaultPreChatSurveyPaneGeneralStyles } from "./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneGeneralStyles";
|
|
10
10
|
import { defaultPreChatSurveyPaneStyles } from "./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles";
|
|
11
|
+
|
|
12
|
+
// Detect iOS (iPhone/iPad/iPod) including iPadOS 13+ which reports as Mac with touch support.
|
|
13
|
+
// Used to scope iOS-only Safari workarounds; must not match other platforms.
|
|
14
|
+
const isIOSDevice = () => {
|
|
15
|
+
if (typeof navigator === "undefined") {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
const ua = navigator.userAgent || "";
|
|
19
|
+
if (/iPad|iPhone|iPod/.test(ua)) {
|
|
20
|
+
return true;
|
|
21
|
+
}
|
|
22
|
+
return ua.includes("Mac") && typeof document !== "undefined" && "ontouchend" in document;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// iOS-only: AdaptiveCards' ChoiceSetInput value getter treats `selectedIndex > 0` as "user selected"
|
|
26
|
+
// and returns undefined for index 0 (assuming it is always the injected placeholder).
|
|
27
|
+
// On iOS we remove the placeholder to avoid a blank picker row, which shifts the first real
|
|
28
|
+
// option to index 0 — so the original getter wrongly reports undefined and required-field
|
|
29
|
+
// validation fails. Patch the prototype once to accept index >= 0.
|
|
30
|
+
let iosChoiceSetValuePatched = false;
|
|
31
|
+
const patchIOSChoiceSetValueGetter = () => {
|
|
32
|
+
if (iosChoiceSetValuePatched) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
36
|
+
const ChoiceSetInput = AdaptiveCards.ChoiceSetInput;
|
|
37
|
+
if (!ChoiceSetInput || !ChoiceSetInput.prototype) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const descriptor = Object.getOwnPropertyDescriptor(ChoiceSetInput.prototype, "value");
|
|
41
|
+
if (!descriptor || !descriptor.get) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
Object.defineProperty(ChoiceSetInput.prototype, "value", {
|
|
45
|
+
configurable: true,
|
|
46
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
47
|
+
get: function () {
|
|
48
|
+
var _descriptor$get;
|
|
49
|
+
if (!this.isMultiSelect && this._selectElement) {
|
|
50
|
+
return this._selectElement.selectedIndex >= 0 ? this._selectElement.value : undefined;
|
|
51
|
+
}
|
|
52
|
+
return (_descriptor$get = descriptor.get) === null || _descriptor$get === void 0 ? void 0 : _descriptor$get.call(this);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
iosChoiceSetValuePatched = true;
|
|
56
|
+
};
|
|
11
57
|
function PreChatSurveyPane(props) {
|
|
12
|
-
var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0,
|
|
58
|
+
var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _defaultPreChatSurvey, _props$styleProps0, _defaultPreChatSurvey2, _props$styleProps1, _defaultPreChatSurvey3, _props$styleProps10, _defaultPreChatSurvey4, _props$styleProps11, _defaultPreChatSurvey5, _props$styleProps12, _defaultPreChatSurvey6, _props$styleProps13, _defaultPreChatSurvey7, _props$styleProps14, _defaultPreChatSurvey8, _props$styleProps15, _defaultPreChatSurvey9, _props$styleProps16, _defaultPreChatSurvey0, _props$styleProps17, _defaultPreChatSurvey1, _props$styleProps18, _defaultPreChatSurvey10, _props$styleProps19, _defaultPreChatSurvey11, _props$styleProps20, _defaultPreChatSurvey12, _props$styleProps21, _defaultPreChatSurvey13, _props$controlProps6, _props$controlProps7, _props$controlProps8;
|
|
13
59
|
const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultPreChatSurveyPaneControlProps.id;
|
|
60
|
+
const isIOS = isIOSDevice();
|
|
61
|
+
if (isIOS) {
|
|
62
|
+
patchIOSChoiceSetValueGetter();
|
|
63
|
+
}
|
|
14
64
|
let adpativeCardPayload;
|
|
15
65
|
let adaptiveCardHostConfig;
|
|
16
66
|
const containerStyles = {
|
|
@@ -64,6 +114,31 @@ function PreChatSurveyPane(props) {
|
|
|
64
114
|
// Render the card
|
|
65
115
|
const renderedCard = adaptiveCard.render();
|
|
66
116
|
addNoreferrerNoopenerTag(renderedCard);
|
|
117
|
+
|
|
118
|
+
// Fix iOS Safari blank space in <select> dropdowns. iOS-only; other platforms render correctly.
|
|
119
|
+
// The placeholder option that AdaptiveCards injects renders as a blank row in the iOS
|
|
120
|
+
// native picker (CSS display/hidden are ignored on <option>). Removing it from the DOM
|
|
121
|
+
// is the only reliable workaround. After removal, we select the first remaining option
|
|
122
|
+
// and notify AdaptiveCards so required-field validation reads the visible value.
|
|
123
|
+
const applyIOSPrechatFix = container => {
|
|
124
|
+
const selectElements = container.querySelectorAll("select.ac-choiceSetInput-compact");
|
|
125
|
+
selectElements.forEach(select => {
|
|
126
|
+
const firstOption = select.options[0];
|
|
127
|
+
if (firstOption && firstOption.disabled && firstOption.hidden && firstOption.value === "") {
|
|
128
|
+
firstOption.remove();
|
|
129
|
+
if (select.options.length > 0) {
|
|
130
|
+
select.selectedIndex = 0;
|
|
131
|
+
select.value = select.options[0].value;
|
|
132
|
+
select.dispatchEvent(new Event("input", {
|
|
133
|
+
bubbles: true
|
|
134
|
+
}));
|
|
135
|
+
select.dispatchEvent(new Event("change", {
|
|
136
|
+
bubbles: true
|
|
137
|
+
}));
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
};
|
|
67
142
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
|
|
68
143
|
.ac-textBlock {
|
|
69
144
|
font-size: ${(_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 || (_props$styleProps3 = _props$styleProps3.customTextStyleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.fontSize} !important;
|
|
@@ -81,39 +156,39 @@ function PreChatSurveyPane(props) {
|
|
|
81
156
|
margin-bottom: 6px;
|
|
82
157
|
}
|
|
83
158
|
.ac-input.ac-textInput {
|
|
84
|
-
font-size: ${(_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 || (_props$styleProps9 = _props$styleProps9.customTextInputStyleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.fontSize};
|
|
85
|
-
font-family: ${((_props$styleProps0 = props.styleProps) === null || _props$styleProps0 === void 0 || (_props$styleProps0 = _props$styleProps0.customTextInputStyleProps) === null || _props$styleProps0 === void 0 ? void 0 : _props$styleProps0.fontFamily) ?? ((
|
|
86
|
-
height: ${((_props$styleProps1 = props.styleProps) === null || _props$styleProps1 === void 0 || (_props$styleProps1 = _props$styleProps1.customTextInputStyleProps) === null || _props$styleProps1 === void 0 ? void 0 : _props$styleProps1.height) ?? ((
|
|
159
|
+
font-size: ${((_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 || (_props$styleProps9 = _props$styleProps9.customTextInputStyleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.fontSize) ?? ((_defaultPreChatSurvey = defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey === void 0 ? void 0 : _defaultPreChatSurvey.fontSize)};
|
|
160
|
+
font-family: ${((_props$styleProps0 = props.styleProps) === null || _props$styleProps0 === void 0 || (_props$styleProps0 = _props$styleProps0.customTextInputStyleProps) === null || _props$styleProps0 === void 0 ? void 0 : _props$styleProps0.fontFamily) ?? ((_defaultPreChatSurvey2 = defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey2 === void 0 ? void 0 : _defaultPreChatSurvey2.fontFamily)};
|
|
161
|
+
height: ${((_props$styleProps1 = props.styleProps) === null || _props$styleProps1 === void 0 || (_props$styleProps1 = _props$styleProps1.customTextInputStyleProps) === null || _props$styleProps1 === void 0 ? void 0 : _props$styleProps1.height) ?? ((_defaultPreChatSurvey3 = defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey3 === void 0 ? void 0 : _defaultPreChatSurvey3.height)};
|
|
87
162
|
padding: 8px;
|
|
88
163
|
}
|
|
89
164
|
.ac-input.ac-textInput.ac-multiline {
|
|
90
|
-
font-size: ${(_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 || (_props$styleProps10 = _props$styleProps10.customMultilineTextInputStyleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.fontSize};
|
|
91
|
-
font-family: ${((_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 || (_props$styleProps11 = _props$styleProps11.customMultilineTextInputStyleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.fontFamily) ?? ((
|
|
92
|
-
height: ${((_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 || (_props$styleProps12 = _props$styleProps12.customMultilineTextInputStyleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.height) ?? ((
|
|
165
|
+
font-size: ${((_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 || (_props$styleProps10 = _props$styleProps10.customMultilineTextInputStyleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.fontSize) ?? ((_defaultPreChatSurvey4 = defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey4 === void 0 ? void 0 : _defaultPreChatSurvey4.fontSize)};
|
|
166
|
+
font-family: ${((_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 || (_props$styleProps11 = _props$styleProps11.customMultilineTextInputStyleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.fontFamily) ?? ((_defaultPreChatSurvey5 = defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey5 === void 0 ? void 0 : _defaultPreChatSurvey5.fontFamily)};
|
|
167
|
+
height: ${((_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 || (_props$styleProps12 = _props$styleProps12.customMultilineTextInputStyleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.height) ?? ((_defaultPreChatSurvey6 = defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey6 === void 0 ? void 0 : _defaultPreChatSurvey6.height)};
|
|
93
168
|
resize: none;
|
|
94
169
|
}
|
|
95
170
|
.ac-input.ac-multichoiceInput {
|
|
96
|
-
font-size: ${(_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 || (_props$styleProps13 = _props$styleProps13.customMultichoiceInputStyleProps) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.fontSize};
|
|
97
|
-
font-family: ${((_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 || (_props$styleProps14 = _props$styleProps14.customMultichoiceInputStyleProps) === null || _props$styleProps14 === void 0 ? void 0 : _props$styleProps14.fontFamily) ?? ((
|
|
171
|
+
font-size: ${((_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 || (_props$styleProps13 = _props$styleProps13.customMultichoiceInputStyleProps) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.fontSize) ?? ((_defaultPreChatSurvey7 = defaultPreChatSurveyPaneStyles.customMultichoiceInputStyleProps) === null || _defaultPreChatSurvey7 === void 0 ? void 0 : _defaultPreChatSurvey7.fontSize)};
|
|
172
|
+
font-family: ${((_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 || (_props$styleProps14 = _props$styleProps14.customMultichoiceInputStyleProps) === null || _props$styleProps14 === void 0 ? void 0 : _props$styleProps14.fontFamily) ?? ((_defaultPreChatSurvey8 = defaultPreChatSurveyPaneStyles.customMultichoiceInputStyleProps) === null || _defaultPreChatSurvey8 === void 0 ? void 0 : _defaultPreChatSurvey8.fontFamily)};
|
|
98
173
|
padding: 3px;
|
|
99
174
|
padding-top: 7px;
|
|
100
175
|
padding-bottom: 7px;
|
|
101
176
|
}
|
|
102
177
|
.ac-input.ac-toggleInput {
|
|
103
|
-
align-items: ${((_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.customToggleInputStyleProps) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.alignItems) ?? ((
|
|
178
|
+
align-items: ${((_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.customToggleInputStyleProps) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.alignItems) ?? ((_defaultPreChatSurvey9 = defaultPreChatSurveyPaneStyles.customToggleInputStyleProps) === null || _defaultPreChatSurvey9 === void 0 ? void 0 : _defaultPreChatSurvey9.alignItems)} !important;
|
|
104
179
|
}
|
|
105
180
|
.ac-pushButton {
|
|
106
181
|
border: 1px solid #00000000;
|
|
107
182
|
margin: 2px;
|
|
108
|
-
height: ${((_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 || (_props$styleProps16 = _props$styleProps16.customButtonStyleProps) === null || _props$styleProps16 === void 0 ? void 0 : _props$styleProps16.height) ?? ((
|
|
109
|
-
width: ${((_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 || (_props$styleProps17 = _props$styleProps17.customButtonStyleProps) === null || _props$styleProps17 === void 0 ? void 0 : _props$styleProps17.width) ?? ((
|
|
183
|
+
height: ${((_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 || (_props$styleProps16 = _props$styleProps16.customButtonStyleProps) === null || _props$styleProps16 === void 0 ? void 0 : _props$styleProps16.height) ?? ((_defaultPreChatSurvey0 = defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey0 === void 0 ? void 0 : _defaultPreChatSurvey0.height)};
|
|
184
|
+
width: ${((_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 || (_props$styleProps17 = _props$styleProps17.customButtonStyleProps) === null || _props$styleProps17 === void 0 ? void 0 : _props$styleProps17.width) ?? ((_defaultPreChatSurvey1 = defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey1 === void 0 ? void 0 : _defaultPreChatSurvey1.width)};
|
|
110
185
|
border-radius: 5px;
|
|
111
186
|
cursor: pointer;
|
|
112
187
|
font-weight: bold;
|
|
113
|
-
font-size: ${((_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 || (_props$styleProps18 = _props$styleProps18.customButtonStyleProps) === null || _props$styleProps18 === void 0 ? void 0 : _props$styleProps18.fontSize) ?? ((
|
|
114
|
-
font-family: ${((_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 || (_props$styleProps19 = _props$styleProps19.customButtonStyleProps) === null || _props$styleProps19 === void 0 ? void 0 : _props$styleProps19.fontFamily) ?? ((
|
|
115
|
-
color: ${((_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 || (_props$styleProps20 = _props$styleProps20.customButtonStyleProps) === null || _props$styleProps20 === void 0 ? void 0 : _props$styleProps20.color) ?? ((
|
|
116
|
-
background-color: ${((_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 || (_props$styleProps21 = _props$styleProps21.customButtonStyleProps) === null || _props$styleProps21 === void 0 ? void 0 : _props$styleProps21.backgroundColor) ?? ((
|
|
188
|
+
font-size: ${((_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 || (_props$styleProps18 = _props$styleProps18.customButtonStyleProps) === null || _props$styleProps18 === void 0 ? void 0 : _props$styleProps18.fontSize) ?? ((_defaultPreChatSurvey10 = defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey10 === void 0 ? void 0 : _defaultPreChatSurvey10.fontSize)};
|
|
189
|
+
font-family: ${((_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 || (_props$styleProps19 = _props$styleProps19.customButtonStyleProps) === null || _props$styleProps19 === void 0 ? void 0 : _props$styleProps19.fontFamily) ?? ((_defaultPreChatSurvey11 = defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey11 === void 0 ? void 0 : _defaultPreChatSurvey11.fontFamily)};
|
|
190
|
+
color: ${((_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 || (_props$styleProps20 = _props$styleProps20.customButtonStyleProps) === null || _props$styleProps20 === void 0 ? void 0 : _props$styleProps20.color) ?? ((_defaultPreChatSurvey12 = defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey12 === void 0 ? void 0 : _defaultPreChatSurvey12.color)};
|
|
191
|
+
background-color: ${((_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 || (_props$styleProps21 = _props$styleProps21.customButtonStyleProps) === null || _props$styleProps21 === void 0 ? void 0 : _props$styleProps21.backgroundColor) ?? ((_defaultPreChatSurvey13 = defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey13 === void 0 ? void 0 : _defaultPreChatSurvey13.backgroundColor)};
|
|
117
192
|
}`), !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hidePreChatSurveyPane) && /*#__PURE__*/React.createElement(Stack, {
|
|
118
193
|
id: elementId,
|
|
119
194
|
tabIndex: -1,
|
|
@@ -128,6 +203,9 @@ function PreChatSurveyPane(props) {
|
|
|
128
203
|
// Returns React element
|
|
129
204
|
renderedCard && n && n.appendChild(renderedCard);
|
|
130
205
|
n && n.childElementCount > 1 && n.lastChild && n.removeChild(n.lastChild); // Removes duplicates fix
|
|
206
|
+
if (isIOS && n) {
|
|
207
|
+
applyIOSPrechatFix(n);
|
|
208
|
+
}
|
|
131
209
|
}
|
|
132
210
|
}))));
|
|
133
211
|
}
|
|
@@ -150,6 +150,8 @@ export declare const AriaLabels: {
|
|
|
150
150
|
readonly ReconnectChatPaneIcon: "Reconnect Chat Pane Icon";
|
|
151
151
|
readonly ContinueConversation: "Continue conversation";
|
|
152
152
|
readonly StartNewConversation: "Start new conversation";
|
|
153
|
+
readonly InputValidationPaneButtonGroup: "Actions";
|
|
154
|
+
readonly ConfirmationPaneButtonGroup: "Actions";
|
|
153
155
|
};
|
|
154
156
|
export declare const EventNames: {
|
|
155
157
|
new (): {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom/extend-expect";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom/extend-expect";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom/extend-expect";
|
|
@@ -37,4 +37,16 @@ export interface IHeaderStyleProps {
|
|
|
37
37
|
* header item button fucus style props
|
|
38
38
|
*/
|
|
39
39
|
headerItemFocusStyleProps?: IStyle;
|
|
40
|
+
/**
|
|
41
|
+
* header left group container style props
|
|
42
|
+
*/
|
|
43
|
+
headerLeftGroupStyleProps?: IStyle;
|
|
44
|
+
/**
|
|
45
|
+
* header left group inner container style props
|
|
46
|
+
*/
|
|
47
|
+
headerLeftGroupInnerContainerStyleProps?: IStyle;
|
|
48
|
+
/**
|
|
49
|
+
* header title container (h1) style props
|
|
50
|
+
*/
|
|
51
|
+
titleContainerStyleProps?: IStyle;
|
|
40
52
|
}
|
package/lib/types/components/inputvalidationpane/interfaces/IInputValidationPaneControlProps.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export interface IInputValidationPaneControlProps {
|
|
|
15
15
|
inputPlaceHolder?: string;
|
|
16
16
|
invalidInputErrorMessageText?: string;
|
|
17
17
|
isButtonGroupHorizontal?: boolean;
|
|
18
|
+
buttonGroupAriaLabel?: string;
|
|
18
19
|
hideSendButton?: boolean;
|
|
19
20
|
enableSendButton?: boolean;
|
|
20
21
|
sendButtonText?: string;
|