@microsoft/omnichannel-chat-components 0.1.0-main.ea06308

package/lib/cjs/components/prechatsurveypane/common/presetThreeProps/presetThreeStyles/presetThreePreChatSurveyPaneGeneralStyles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetThreePreChatSurveyPaneGeneralStyles = void 0;
+const presetThreePreChatSurveyPaneGeneralStyles = {
+  borderStyle: "solid",
+  borderWidth: "4px",
+  backgroundColor: "#6A1E7A",
+  maxWidth: "280px",
+  maxHeight: "420px",
+  position: "absolute",
+  left: "15%",
+  top: "20%",
+  overflowY: "auto"
+};
+exports.presetThreePreChatSurveyPaneGeneralStyles = presetThreePreChatSurveyPaneGeneralStyles;

package/lib/cjs/components/prechatsurveypane/common/presetThreeProps/presetThreeStyles/presetThreePreChatSurveyPaneStyles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetThreePreChatSurveyPaneStyles = void 0;
+
+var _presetThreePreChatSurveyPaneACContainerStyles = require("./presetThreePreChatSurveyPaneACContainerStyles");
+
+var _presetThreePreChatSurveyPaneButtonStyles = require("./presetThreePreChatSurveyPaneButtonStyles");
+
+var _presetThreePreChatSurveyPaneGeneralStyles = require("./presetThreePreChatSurveyPaneGeneralStyles");
+
+const presetThreePreChatSurveyPaneStyles = {
+  generalStyleProps: _presetThreePreChatSurveyPaneGeneralStyles.presetThreePreChatSurveyPaneGeneralStyles,
+  customButtonStyleProps: _presetThreePreChatSurveyPaneButtonStyles.presetThreePreChatSurveyPaneButtonStyles,
+  adaptiveCardContainerStyleProps: _presetThreePreChatSurveyPaneACContainerStyles.presetThreePreChatSurveyPaneACContainerStyles
+};
+exports.presetThreePreChatSurveyPaneStyles = presetThreePreChatSurveyPaneStyles;

package/lib/cjs/components/prechatsurveypane/common/presetTwoProps/presetTwoPreChatSurveyPaneControlProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetTwoPreChatSurveyPaneControlProps = void 0;
+const presetTwoPreChatSurveyPaneControlProps = {
+  id: "oc-lcw-prechatsurveypane-preset2",
+  dir: "auto",
+  hidePreChatSurveyPane: false,
+  adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
+  payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"TextBlock\",\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true,\"color\":\"attention\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"Name\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.ChoiceSet\",\"id\":\"965cc6dc-c6bf-4496-9006-38d686de965a\",\"label\":\"What option do you want?\",\"style\":\"expanded\",\"isMultiSelect\":false,\"value\":\"1\",\"choices\":[{\"title\":\"One\",\"value\":\"1\"},{\"title\":\"Two\",\"value\":\"2\"},{\"title\":\"Three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onSubmit: function (values) {
+    console.log("on submit");
+  }
+};
+exports.presetTwoPreChatSurveyPaneControlProps = presetTwoPreChatSurveyPaneControlProps;

package/lib/cjs/components/prechatsurveypane/common/presetTwoProps/presetTwoPreChatSurveyPaneProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetTwoPreChatSurveyPaneProps = void 0;
+
+var _defaultPreChatSurveyPaneStyles = require("../defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles");
+
+var _presetTwoPreChatSurveyPaneControlProps = require("./presetTwoPreChatSurveyPaneControlProps");
+
+const presetTwoPreChatSurveyPaneProps = {
+  controlProps: _presetTwoPreChatSurveyPaneControlProps.presetTwoPreChatSurveyPaneControlProps,
+  styleProps: _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles
+};
+exports.presetTwoPreChatSurveyPaneProps = presetTwoPreChatSurveyPaneProps;

package/lib/cjs/components/prechatsurveypane/interfaces/IPreChatSurveyPaneButtonStyles.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/prechatsurveypane/interfaces/IPreChatSurveyPaneControlProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/prechatsurveypane/interfaces/IPreChatSurveyPaneProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/prechatsurveypane/interfaces/IPreChatSurveyPaneStyleProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/proactivechatpane/ProactiveChatPane.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@fluentui/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _BroadcastService = require("../../services/BroadcastService");
+
+var _Button = require("@fluentui/react/lib/Button");
+
+var _Constants = require("../../common/Constants");
+
+var _decodeComponentString = require("../../common/decodeComponentString");
+
+var _defaultProactiveChatPaneBodyContainerStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneBodyContainerStyles");
+
+var _defaultProactiveChatPaneBodyTitleStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneBodyTitleStyles");
+
+var _defaultProactiveChatPaneCloseButtonHoveredStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneCloseButtonHoveredStyles");
+
+var _defaultProactiveChatPaneCloseButtonStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles");
+
+var _defaultProactiveChatPaneControlProps = require("./common/default/defaultProps/defaultProactiveChatPaneControlProps");
+
+var _defaultProactiveChatPaneGeneralStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneGeneralStyles");
+
+var _defaultProactiveChatPaneHeaderContainerStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneHeaderContainerStyles");
+
+var _defaultProactiveChatPaneStartButtonHoveredStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneStartButtonHoveredStyles");
+
+var _defaultProactiveChatPaneStartButtonStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneStartButtonStyles");
+
+var _defaultProactiveChatPaneSubtitleStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneSubtitleStyles");
+
+var _defaultProactiveChatPaneTextContainerStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneTextContainerStyles");
+
+var _defaultProactiveChatPaneTitleStyles = require("./common/default/defaultStyles/defaultProactiveChatPaneTitleStyles");
+
+var _utils = require("../../common/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ProactiveChatPane(props) {
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$controlProps6, _props$styleProps12, _props$styleProps12$c, _props$controlProps7, _props$controlProps8, _props$styleProps13, _props$styleProps13$c, _props$styleProps14, _props$styleProps14$c, _props$controlProps9, _props$componentOverr, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$controlProps11, _props$componentOverr2, _props$styleProps16, _props$styleProps16$c, _props$controlProps12, _props$controlProps13, _props$componentOverr3, _props$styleProps17, _props$styleProps17$c, _props$controlProps14, _props$controlProps15, _props$styleProps18, _props$styleProps18$c, _props$controlProps16, _props$componentOverr4, _props$styleProps19, _props$styleProps19$c, _props$controlProps17, _props$controlProps18, _props$componentOverr5, _props$styleProps20, _props$styleProps20$c, _props$controlProps19, _props$controlProps20;
+
+  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.id;
+
+  const close = (controlId, suffix) => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onClose) {
+      var _props$controlProps3;
+
+      const performance = window.performance;
+      const startTime = performance.now();
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onClose();
+      const endTime = performance.now();
+      const payload = {
+        elapsedTimeInMilliseconds: endTime - startTime
+      };
+      const eventName = (0, _utils.generateEventName)(controlId, "on", suffix);
+      const customEvent = {
+        eventName: eventName + " - Proactive Chat Rejected",
+        payload: payload
+      };
+
+      _BroadcastService.BroadcastService.postMessage(customEvent);
+    }
+  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  const handleEscKeyDown = (0, _react2.useCallback)(e => {
+    if (e.code === _Constants.KeyCodes.ESCAPE) {
+      close(elementId, "KeyDown");
+    }
+  }, []);
+  const handleCloseClick = (0, _react2.useCallback)(() => {
+    close(elementId + "-closebutton", "Click");
+  }, []);
+  const handleStartClick = (0, _react2.useCallback)(() => {
+    var _props$controlProps4;
+
+    if ((_props$controlProps4 = props.controlProps) !== null && _props$controlProps4 !== void 0 && _props$controlProps4.onStart) {
+      var _props$controlProps5;
+
+      const onClickEventName = (0, _utils.generateEventName)(elementId + "-startbutton", "on", "Click");
+      const onClickEvent = {
+        eventName: onClickEventName + " - Proactive Chat Accepted"
+      };
+
+      _BroadcastService.BroadcastService.postMessage(onClickEvent);
+
+      (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onStart();
+    }
+  }, []);
+  const containerStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneGeneralStyles.defaultProactiveChatPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
+  };
+  const headerContainerStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneHeaderContainerStyles.defaultProactiveChatPaneHeaderContainerStyles, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.headerContainerStyleProps)
+  };
+  const textContainerStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneTextContainerStyles.defaultProactiveChatPaneTextContainerStyles, (_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.textContainerStyleProps)
+  };
+  const titleStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneTitleStyles.defaultProactiveChatPaneTitleStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.titleStyleProps)
+  };
+  const subtitleStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneSubtitleStyles.defaultProactiveChatPaneSubtitleStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.subtitleStyleProps)
+  };
+  const closeButtonStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneCloseButtonStyles.defaultProactiveChatPaneCloseButtonStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonStyleProps),
+    rootHovered: Object.assign({}, _defaultProactiveChatPaneCloseButtonHoveredStyles.defaultProactiveChatPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps)
+  };
+  const bodyContainerStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneBodyContainerStyles.defaultProactiveChatPaneBodyContainerStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.bodyContainerStyleProps)
+  };
+  const bodyTitleStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneBodyTitleStyles.defaultProactiveChatPaneBodyTitleStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.bodyTitleStyleProps)
+  };
+  const startButtonStyles = {
+    root: Object.assign({}, _defaultProactiveChatPaneStartButtonStyles.defaultProactiveChatPaneStartButtonStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.startButtonStyleProps),
+    rootHovered: Object.assign({}, _defaultProactiveChatPaneStartButtonHoveredStyles.defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.startButtonHoveredStyleProps)
+  };
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideProactiveChatPane) && /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+    className: (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : (_props$styleProps12$c = _props$styleProps12.classNames) === null || _props$styleProps12$c === void 0 ? void 0 : _props$styleProps12$c.containerClassName,
+    id: elementId,
+    tabIndex: -1,
+    onKeyDown: handleEscKeyDown,
+    dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.dir,
+    "aria-label": ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.proactiveChatPaneAriaLabel) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.proactiveChatPaneAriaLabel,
+    styles: containerStyles
+  }, /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+    horizontal: true,
+    className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.headerContainerClassName,
+    styles: headerContainerStyles,
+    tabIndex: -1,
+    id: elementId + "-headercontainer"
+  }, /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+    className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.textContainerClassName,
+    styles: textContainerStyles,
+    tabIndex: -1,
+    id: elementId + "-textcontainer"
+  }, !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+    className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.titleClassName,
+    styles: titleStyles,
+    tabIndex: -1,
+    id: elementId + "-title"
+  }, ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.titleText) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.titleText)), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideSubtitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.subtitle) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+    className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.subtitleClassName,
+    styles: subtitleStyles,
+    tabIndex: -1,
+    id: elementId + "-subtitle"
+  }, ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.subtitleText) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.subtitleText))), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideCloseButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
+    className: (_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 ? void 0 : (_props$styleProps17$c = _props$styleProps17.classNames) === null || _props$styleProps17$c === void 0 ? void 0 : _props$styleProps17$c.closeButtonClassName,
+    styles: closeButtonStyles,
+    tabIndex: 0,
+    onClick: handleCloseClick,
+    id: elementId + "-closebutton",
+    "aria-label": ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.closeButtonAriaLabel) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.closeButtonAriaLabel
+  }))), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+    horizontal: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.isBodyContainerHorizantal) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.isBodyContainerHorizantal,
+    className: (_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 ? void 0 : (_props$styleProps18$c = _props$styleProps18.classNames) === null || _props$styleProps18$c === void 0 ? void 0 : _props$styleProps18$c.bodyContainerClassName,
+    styles: bodyContainerStyles,
+    tabIndex: -1,
+    id: elementId + "-bodycontainer"
+  }, !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hideBodyTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.bodyTitle) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+    className: (_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 ? void 0 : (_props$styleProps19$c = _props$styleProps19.classNames) === null || _props$styleProps19$c === void 0 ? void 0 : _props$styleProps19$c.bodyTitleClassName,
+    styles: bodyTitleStyles,
+    tabIndex: -1,
+    id: elementId + "-bodytitle"
+  }, ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.bodyTitleText) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.bodyTitleText)), !((_props$controlProps18 = props.controlProps) !== null && _props$controlProps18 !== void 0 && _props$controlProps18.hideStartButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.startButton) || /*#__PURE__*/_react2.default.createElement(_Button.DefaultButton, {
+    className: (_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 ? void 0 : (_props$styleProps20$c = _props$styleProps20.classNames) === null || _props$styleProps20$c === void 0 ? void 0 : _props$styleProps20$c.startButtonClassName,
+    styles: startButtonStyles,
+    tabIndex: 0,
+    text: ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.startButtonText) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.startButtonText,
+    onClick: handleStartClick,
+    id: elementId + "-startbutton",
+    "aria-label": ((_props$controlProps20 = props.controlProps) === null || _props$controlProps20 === void 0 ? void 0 : _props$controlProps20.startButtonAriaLabel) || _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps.startButtonAriaLabel
+  })))));
+}
+
+var _default = ProactiveChatPane;
+exports.default = _default;

package/lib/cjs/components/proactivechatpane/common/default/defaultProps/defaultProactiveChatPaneControlProps.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneControlProps = void 0;
+const defaultProactiveChatPaneControlProps = {
+  id: "oc-lcw-proactivechat",
+  dir: "ltr",
+  hideProactiveChatPane: false,
+  proactiveChatPaneAriaLabel: "Proactive Chat Pane",
+  hideTitle: false,
+  titleText: "Welcome to",
+  hideSubtitle: false,
+  subtitleText: "Live chat support!",
+  hideCloseButton: false,
+  closeButtonAriaLabel: "Close Button",
+  isBodyContainerHorizantal: false,
+  hideBodyTitle: false,
+  bodyTitleText: "Hi! Have any questions? I am here to help.",
+  hideStartButton: false,
+  startButtonText: "Chat Now",
+  startButtonAriaLabel: "Chat Now",
+  onClose: function () {
+    console.log("on close");
+  },
+  onStart: function () {
+    console.log("on start");
+  }
+};
+exports.defaultProactiveChatPaneControlProps = defaultProactiveChatPaneControlProps;

package/lib/cjs/components/proactivechatpane/common/default/defaultProps/defaultProactiveChatPaneProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneProps = void 0;
+
+var _defaultProactiveChatPaneStyles = require("../defaultStyles/defaultProactiveChatPaneStyles");
+
+var _defaultProactiveChatPaneControlProps = require("./defaultProactiveChatPaneControlProps");
+
+const defaultProactiveChatPaneProps = {
+  controlProps: _defaultProactiveChatPaneControlProps.defaultProactiveChatPaneControlProps,
+  styleProps: _defaultProactiveChatPaneStyles.defaultProactiveChatPaneStyles
+};
+exports.defaultProactiveChatPaneProps = defaultProactiveChatPaneProps;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneBodyContainerStyles.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneBodyContainerStyles = void 0;
+const defaultProactiveChatPaneBodyContainerStyles = {};
+exports.defaultProactiveChatPaneBodyContainerStyles = defaultProactiveChatPaneBodyContainerStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneBodyTitleStyles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneBodyTitleStyles = void 0;
+const defaultProactiveChatPaneBodyTitleStyles = {
+  color: "rgb(0, 0, 0)",
+  display: "inline-block",
+  fontFamily: "'Segoe UI', Arial, sans-serif",
+  fontSize: "14px",
+  lineHeight: "19px",
+  padding: "16px",
+  overflow: "hidden",
+  wordBreak: "break-word"
+};
+exports.defaultProactiveChatPaneBodyTitleStyles = defaultProactiveChatPaneBodyTitleStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneCloseButtonHoveredStyles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneCloseButtonHoveredStyles = void 0;
+const defaultProactiveChatPaneCloseButtonHoveredStyles = {
+  backgroundColor: "",
+  color: ""
+};
+exports.defaultProactiveChatPaneCloseButtonHoveredStyles = defaultProactiveChatPaneCloseButtonHoveredStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneCloseButtonStyles = void 0;
+
+var _closeChatButton = _interopRequireDefault(require("../../../../../assets/imgs/closeChatButton.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultProactiveChatPaneCloseButtonStyles = {
+  backgroundImage: "url(" + _closeChatButton.default + ")",
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  color: "#605e5c",
+  cursor: "pointer",
+  height: "14px",
+  lineHeight: "14px",
+  textAlign: "center",
+  width: "14px",
+  zIndex: "inherit"
+};
+exports.defaultProactiveChatPaneCloseButtonStyles = defaultProactiveChatPaneCloseButtonStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneGeneralStyles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneGeneralStyles = void 0;
+const defaultProactiveChatPaneGeneralStyles = {
+  backgroundColor: "rgb(255, 255, 255)",
+  borderRadius: "8px",
+  boxShadow: "0 0 4px rgb(102 102 102 / 50%)",
+  bottom: "0",
+  height: "auto",
+  margin: "3px",
+  minHeight: "133px",
+  position: "absolute",
+  right: "0",
+  width: "245px",
+  zIndex: "9999"
+};
+exports.defaultProactiveChatPaneGeneralStyles = defaultProactiveChatPaneGeneralStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneHeaderContainerStyles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneHeaderContainerStyles = void 0;
+
+var _Proactive_banner = _interopRequireDefault(require("../../../../../assets/imgs/Proactive_banner.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultProactiveChatPaneHeaderContainerStyles = {
+  backgroundColor: "rgb(49, 95, 162)",
+  backgroundImage: "url(" + _Proactive_banner.default + ")",
+  backgroundPosition: "initial",
+  backgroundRepeat: "no-repeat",
+  borderTopLeftRadius: "inherit",
+  borderTopRightRadius: "inherit",
+  height: "90px",
+  padding: "10px 16px 10px 16px"
+};
+exports.defaultProactiveChatPaneHeaderContainerStyles = defaultProactiveChatPaneHeaderContainerStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneStartButtonHoveredStyles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneStartButtonHoveredStyles = void 0;
+const defaultProactiveChatPaneStartButtonHoveredStyles = {
+  backgroundColor: "",
+  color: ""
+};
+exports.defaultProactiveChatPaneStartButtonHoveredStyles = defaultProactiveChatPaneStartButtonHoveredStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneStartButtonStyles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneStartButtonStyles = void 0;
+const defaultProactiveChatPaneStartButtonStyles = {
+  backgroundColor: "rgb(49, 95, 162)",
+  borderRadius: "40px",
+  color: "rgb(255, 255, 255)",
+  cursor: "pointer",
+  fontFamily: "'Segoe UI', Arial, sans-serif",
+  margin: "20px 16px 20px 16px",
+  padding: "6px 23px 6px 23px",
+  width: "50%",
+  zIndex: "inherit"
+};
+exports.defaultProactiveChatPaneStartButtonStyles = defaultProactiveChatPaneStartButtonStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneStyles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneStyles = void 0;
+
+var _defaultProactiveChatPaneSubtitleStyles = require("./defaultProactiveChatPaneSubtitleStyles");
+
+var _defaultProactiveChatPaneBodyContainerStyles = require("./defaultProactiveChatPaneBodyContainerStyles");
+
+var _defaultProactiveChatPaneBodyTitleStyles = require("./defaultProactiveChatPaneBodyTitleStyles");
+
+var _defaultProactiveChatPaneGeneralStyles = require("./defaultProactiveChatPaneGeneralStyles");
+
+var _defaultProactiveChatPaneTitleStyles = require("./defaultProactiveChatPaneTitleStyles");
+
+var _defaultProactiveChatPaneCloseButtonStyles = require("./defaultProactiveChatPaneCloseButtonStyles");
+
+var _defaultProactiveChatPaneHeaderContainerStyles = require("./defaultProactiveChatPaneHeaderContainerStyles");
+
+var _defaultProactiveChatPaneTextContainerStyles = require("./defaultProactiveChatPaneTextContainerStyles");
+
+var _defaultProactiveChatPaneStartButtonStyles = require("./defaultProactiveChatPaneStartButtonStyles");
+
+var _defaultProactiveChatPaneStartButtonHoveredStyles = require("./defaultProactiveChatPaneStartButtonHoveredStyles");
+
+var _defaultProactiveChatPaneCloseButtonHoveredStyles = require("./defaultProactiveChatPaneCloseButtonHoveredStyles");
+
+const defaultProactiveChatPaneStyles = {
+  generalStyleProps: _defaultProactiveChatPaneGeneralStyles.defaultProactiveChatPaneGeneralStyles,
+  headerContainerStyleProps: _defaultProactiveChatPaneHeaderContainerStyles.defaultProactiveChatPaneHeaderContainerStyles,
+  textContainerStyleProps: _defaultProactiveChatPaneTextContainerStyles.defaultProactiveChatPaneTextContainerStyles,
+  titleStyleProps: _defaultProactiveChatPaneTitleStyles.defaultProactiveChatPaneTitleStyles,
+  subtitleStyleProps: _defaultProactiveChatPaneSubtitleStyles.defaultProactiveChatPaneSubtitleStyles,
+  closeButtonStyleProps: _defaultProactiveChatPaneCloseButtonStyles.defaultProactiveChatPaneCloseButtonStyles,
+  closeButtonHoveredStyleProps: _defaultProactiveChatPaneCloseButtonHoveredStyles.defaultProactiveChatPaneCloseButtonHoveredStyles,
+  bodyContainerStyleProps: _defaultProactiveChatPaneBodyContainerStyles.defaultProactiveChatPaneBodyContainerStyles,
+  bodyTitleStyleProps: _defaultProactiveChatPaneBodyTitleStyles.defaultProactiveChatPaneBodyTitleStyles,
+  startButtonStyleProps: _defaultProactiveChatPaneStartButtonStyles.defaultProactiveChatPaneStartButtonStyles,
+  startButtonHoveredStyleProps: _defaultProactiveChatPaneStartButtonHoveredStyles.defaultProactiveChatPaneStartButtonHoveredStyles
+};
+exports.defaultProactiveChatPaneStyles = defaultProactiveChatPaneStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneSubtitleStyles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneSubtitleStyles = void 0;
+const defaultProactiveChatPaneSubtitleStyles = {
+  color: "rgb(255, 255, 255)",
+  fontFamily: "'Segoe UI', Arial, sans-serif",
+  fontSize: "18px",
+  fontWeight: "600"
+};
+exports.defaultProactiveChatPaneSubtitleStyles = defaultProactiveChatPaneSubtitleStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneTextContainerStyles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneTextContainerStyles = void 0;
+const defaultProactiveChatPaneTextContainerStyles = {
+  color: "rgb(255, 255, 255)",
+  fontFamily: "'Segoe UI', Arial, sans-serif",
+  fontSize: "14px",
+  fontStyle: "normal",
+  fontWeight: "400",
+  lineHeight: "19px",
+  width: "95%"
+};
+exports.defaultProactiveChatPaneTextContainerStyles = defaultProactiveChatPaneTextContainerStyles;

package/lib/cjs/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneTitleStyles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProactiveChatPaneTitleStyles = void 0;
+const defaultProactiveChatPaneTitleStyles = {
+  color: "rgb(255, 255, 255)",
+  fontFamily: "'Segoe UI', Arial, sans-serif"
+};
+exports.defaultProactiveChatPaneTitleStyles = defaultProactiveChatPaneTitleStyles;

package/lib/cjs/components/proactivechatpane/common/presetOne/presetOneProps/presetOneProactiveChatPaneControlProps.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetOneProactiveChatPaneControlProps = void 0;
+const presetOneProactiveChatPaneControlProps = {
+  id: "oclcw-incomingproactivechat",
+  dir: "ltr",
+  hideProactiveChatPane: false,
+  proactiveChatPaneAriaLabel: "Proactive Chat Pane",
+  hideTitle: false,
+  titleText: "Welcome to",
+  hideSubtitle: false,
+  subtitleText: "Live chat support!",
+  hideCloseButton: false,
+  closeButtonAriaLabel: "Close Button",
+  isBodyContainerHorizantal: true,
+  hideBodyTitle: false,
+  bodyTitleText: "Hi! Have any questions? I am here to help.",
+  hideStartButton: false,
+  startButtonText: "Chat Now",
+  startButtonAriaLabel: "Chat Now",
+  onClose: function () {
+    console.log("on close");
+  },
+  onStart: function () {
+    console.log("on start");
+  }
+};
+exports.presetOneProactiveChatPaneControlProps = presetOneProactiveChatPaneControlProps;

package/lib/cjs/components/proactivechatpane/common/presetOne/presetOneProps/presetOneProactiveChatPaneProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetOneProactiveChatPaneProps = void 0;
+
+var _presetOneProactiveChatPaneStyles = require("../presetOneStyles/presetOneProactiveChatPaneStyles");
+
+var _presetOneProactiveChatPaneControlProps = require("./presetOneProactiveChatPaneControlProps");
+
+const presetOneProactiveChatPaneProps = {
+  controlProps: _presetOneProactiveChatPaneControlProps.presetOneProactiveChatPaneControlProps,
+  styleProps: _presetOneProactiveChatPaneStyles.presetOneProactiveChatPaneStyles
+};
+exports.presetOneProactiveChatPaneProps = presetOneProactiveChatPaneProps;

package/lib/cjs/components/proactivechatpane/common/presetOne/presetOneStyles/presetOneProactiveChatPaneBodyTitleStyles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.presetOneProactiveChatPaneBodyTitleStyles = void 0;
+const presetOneProactiveChatPaneBodyTitleStyles = {
+  alignItems: "center",
+  display: "flex",
+  textAlign: "center"
+};
+exports.presetOneProactiveChatPaneBodyTitleStyles = presetOneProactiveChatPaneBodyTitleStyles;