@botonic/react 0.20.1-alpha.1 → 0.20.1

package/lib/webchat/components/emoji-picker.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OpenedEmojiPicker = exports.EmojiPicker = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _emojiPickerReact = _interopRequireDefault(require("emoji-picker-react"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _emojiButton = _interopRequireDefault(require("../../assets/emojiButton.svg"));
+
+var _constants = require("../../constants");
+
+var _hooks = require("../hooks");
+
+var _common = require("./common");
+
+var _templateObject;
+
+var EmojiPicker = function EmojiPicker(props) {
+  return /*#__PURE__*/_react["default"].createElement(_common.IconContainer, {
+    role: _constants.ROLES.EMOJI_PICKER_ICON
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: props.onClick
+  }, /*#__PURE__*/_react["default"].createElement(_common.Icon, {
+    src: _emojiButton["default"]
+  })));
+};
+
+exports.EmojiPicker = EmojiPicker;
+
+var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  right: 3px;\n  top: -324px;\n"])));
+
+var OpenedEmojiPicker = function OpenedEmojiPicker(props) {
+  var _useComponentVisible = (0, _hooks.useComponentVisible)(true, props.onClick),
+      ref = _useComponentVisible.ref,
+      isComponentVisible = _useComponentVisible.isComponentVisible;
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref
+  }, isComponentVisible && /*#__PURE__*/_react["default"].createElement(Container, {
+    role: _constants.ROLES.EMOJI_PICKER
+  }, /*#__PURE__*/_react["default"].createElement(_emojiPickerReact["default"], {
+    onEmojiClick: props.onEmojiClick,
+    disableAutoFocus: true
+  })));
+};
+
+exports.OpenedEmojiPicker = OpenedEmojiPicker;
+//# sourceMappingURL=emoji-picker.js.map

package/lib/webchat/components/emoji-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/components/emoji-picker.jsx"],"names":["EmojiPicker","props","ROLES","EMOJI_PICKER_ICON","onClick","LogoEmoji","Container","styled","div","OpenedEmojiPicker","ref","isComponentVisible","EMOJI_PICKER","onEmojiClick"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAAAC,KAAK;AAAA,sBAC9B,gCAAC,qBAAD;AAAe,IAAA,IAAI,EAAEC,iBAAMC;AAA3B,kBACE;AAAK,IAAA,OAAO,EAAEF,KAAK,CAACG;AAApB,kBACE,gCAAC,YAAD;AAAM,IAAA,GAAG,EAAEC;AAAX,IADF,CADF,CAD8B;AAAA,CAAzB;;;;AAQP,IAAMC,SAAS,GAAGC,6BAAOC,GAAV,8LAAf;;AAQO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAAR,KAAK,EAAI;AACxC,6BAAoC,gCAAoB,IAApB,EAA0BA,KAAK,CAACG,OAAhC,CAApC;AAAA,MAAQM,GAAR,wBAAQA,GAAR;AAAA,MAAaC,kBAAb,wBAAaA,kBAAb;;AACA,sBACE;AAAK,IAAA,GAAG,EAAED;AAAV,KACGC,kBAAkB,iBACjB,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAET,iBAAMU;AAAvB,kBACE,gCAAC,4BAAD;AAAQ,IAAA,YAAY,EAAEX,KAAK,CAACY,YAA5B;AAA0C,IAAA,gBAAgB,EAAE;AAA5D,IADF,CAFJ,CADF;AASD,CAXM","sourcesContent":["import Picker from 'emoji-picker-react'\nimport React from 'react'\nimport styled from 'styled-components'\n\nimport LogoEmoji from '../../assets/emojiButton.svg'\nimport { ROLES } from '../../constants'\nimport { useComponentVisible } from '../hooks'\nimport { Icon, IconContainer } from './common'\n\nexport const EmojiPicker = props => (\n  <IconContainer role={ROLES.EMOJI_PICKER_ICON}>\n    <div onClick={props.onClick}>\n      <Icon src={LogoEmoji} />\n    </div>\n  </IconContainer>\n)\n\nconst Container = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  right: 3px;\n  top: -324px;\n`\n\nexport const OpenedEmojiPicker = props => {\n  const { ref, isComponentVisible } = useComponentVisible(true, props.onClick)\n  return (\n    <div ref={ref}>\n      {isComponentVisible && (\n        <Container role={ROLES.EMOJI_PICKER}>\n          <Picker onEmojiClick={props.onEmojiClick} disableAutoFocus={true} />\n        </Container>\n      )}\n    </div>\n  )\n}\n"],"file":"emoji-picker.js"}

package/lib/webchat/components/persistent-menu.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.PersistentMenu = exports.OpenedPersistentMenu = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _menuButton = _interopRequireDefault(require("../../assets/menuButton.svg"));
+
+var _button = require("../../components/button");
+
+var _constants = require("../../constants");
+
+var _contexts = require("../../contexts");
+
+var _hooks = require("../hooks");
+
+var _common = require("./common");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var ButtonsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  bottom: 0;\n  text-align: center;\n"])));
+
+var OpenedPersistentMenu = function OpenedPersistentMenu(_ref) {
+  var onClick = _ref.onClick,
+      options = _ref.options,
+      borderRadius = _ref.borderRadius;
+
+  var _useComponentVisible = (0, _hooks.useComponentVisible)(true, onClick),
+      ref = _useComponentVisible.ref,
+      isComponentVisible = _useComponentVisible.isComponentVisible;
+
+  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
+      getThemeProperty = _useContext.getThemeProperty;
+
+  var CustomPersistentMenu = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu, undefined);
+  var closeLabel = 'Cancel';
+
+  try {
+    closeLabel = options.filter(function (opt) {
+      return opt.closeLabel !== undefined;
+    })[0].closeLabel;
+  } catch (e) {}
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref,
+    role: _constants.ROLES.PERSISTENT_MENU
+  }, isComponentVisible && CustomPersistentMenu ? /*#__PURE__*/_react["default"].createElement(CustomPersistentMenu, {
+    onClick: onClick,
+    options: options
+  }) : /*#__PURE__*/_react["default"].createElement(ButtonsContainer, null, Object.values(options).map(function (e, i) {
+    return e.label && /*#__PURE__*/_react["default"].createElement(_button.Button, {
+      onClick: onClick,
+      url: e.url,
+      target: e.target,
+      webview: e.webview,
+      payload: e.payload,
+      key: i
+    }, e.label);
+  }), /*#__PURE__*/_react["default"].createElement(_button.Button, {
+    onClick: onClick,
+    bottomRadius: borderRadius
+  }, closeLabel)));
+};
+
+exports.OpenedPersistentMenu = OpenedPersistentMenu;
+
+var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 18px;\n"])));
+
+var PersistentMenu = function PersistentMenu(props) {
+  return /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    role: _constants.ROLES.PERSISTENT_MENU_ICON,
+    onClick: props.onClick
+  }, /*#__PURE__*/_react["default"].createElement(_common.Icon, {
+    src: _menuButton["default"]
+  }));
+};
+
+exports.PersistentMenu = PersistentMenu;
+var _default = OpenedPersistentMenu;
+exports["default"] = _default;
+//# sourceMappingURL=persistent-menu.js.map

package/lib/webchat/components/persistent-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/components/persistent-menu.jsx"],"names":["ButtonsContainer","styled","div","OpenedPersistentMenu","onClick","options","borderRadius","ref","isComponentVisible","WebchatContext","getThemeProperty","CustomPersistentMenu","WEBCHAT","CUSTOM_PROPERTIES","customPersistentMenu","undefined","closeLabel","filter","opt","e","ROLES","PERSISTENT_MENU","Object","values","map","i","label","url","target","webview","payload","IconContainer","PersistentMenu","props","PERSISTENT_MENU_ICON","LogoMenu"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,6BAAOC,GAAV,mLAAtB;;AAQO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAwC;AAAA,MAArCC,OAAqC,QAArCA,OAAqC;AAAA,MAA5BC,OAA4B,QAA5BA,OAA4B;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;;AAC1E,6BAAoC,gCAAoB,IAApB,EAA0BF,OAA1B,CAApC;AAAA,MAAQG,GAAR,wBAAQA,GAAR;AAAA,MAAaC,kBAAb,wBAAaA,kBAAb;;AACA,oBAA6B,uBAAWC,wBAAX,CAA7B;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAMC,oBAAoB,GAAGD,gBAAgB,CAC3CE,mBAAQC,iBAAR,CAA0BC,oBADiB,EAE3CC,SAF2C,CAA7C;AAIA,MAAIC,UAAU,GAAG,QAAjB;;AACA,MAAI;AACFA,IAAAA,UAAU,GAAGX,OAAO,CAACY,MAAR,CAAe,UAAAC,GAAG;AAAA,aAAIA,GAAG,CAACF,UAAJ,KAAmBD,SAAvB;AAAA,KAAlB,EAAoD,CAApD,EACVC,UADH;AAED,GAHD,CAGE,OAAOG,CAAP,EAAU,CAAE;;AACd,sBACE;AAAK,IAAA,GAAG,EAAEZ,GAAV;AAAe,IAAA,IAAI,EAAEa,iBAAMC;AAA3B,KACGb,kBAAkB,IAAIG,oBAAtB,gBACC,gCAAC,oBAAD;AAAsB,IAAA,OAAO,EAAEP,OAA/B;AAAwC,IAAA,OAAO,EAAEC;AAAjD,IADD,gBAGC,gCAAC,gBAAD,QACGiB,MAAM,CAACC,MAAP,CAAclB,OAAd,EAAuBmB,GAAvB,CAA2B,UAACL,CAAD,EAAIM,CAAJ,EAAU;AACpC,WACEN,CAAC,CAACO,KAAF,iBACE,gCAAC,cAAD;AACE,MAAA,OAAO,EAAEtB,OADX;AAEE,MAAA,GAAG,EAAEe,CAAC,CAACQ,GAFT;AAGE,MAAA,MAAM,EAAER,CAAC,CAACS,MAHZ;AAIE,MAAA,OAAO,EAAET,CAAC,CAACU,OAJb;AAKE,MAAA,OAAO,EAAEV,CAAC,CAACW,OALb;AAME,MAAA,GAAG,EAAEL;AANP,OAQGN,CAAC,CAACO,KARL,CAFJ;AAcD,GAfA,CADH,eAiBE,gCAAC,cAAD;AAAQ,IAAA,OAAO,EAAEtB,OAAjB;AAA0B,IAAA,YAAY,EAAEE;AAAxC,KACGU,UADH,CAjBF,CAJJ,CADF;AA6BD,CAzCM;;;;AA2CP,IAAMe,aAAa,GAAG9B,6BAAOC,GAAV,0KAAnB;;AAOO,IAAM8B,cAAc,GAAG,SAAjBA,cAAiB,CAAAC,KAAK;AAAA,sBACjC,gCAAC,aAAD;AAAe,IAAA,IAAI,EAAEb,iBAAMc,oBAA3B;AAAiD,IAAA,OAAO,EAAED,KAAK,CAAC7B;AAAhE,kBACE,gCAAC,YAAD;AAAM,IAAA,GAAG,EAAE+B;AAAX,IADF,CADiC;AAAA,CAA5B;;;eAMQhC,oB","sourcesContent":["import React, { useContext } from 'react'\nimport styled from 'styled-components'\n\nimport LogoMenu from '../../assets/menuButton.svg'\nimport { Button } from '../../components/button'\nimport { ROLES, WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../contexts'\nimport { useComponentVisible } from '../hooks'\nimport { Icon } from './common'\n\nconst ButtonsContainer = styled.div`\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  bottom: 0;\n  text-align: center;\n`\n\nexport const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {\n  const { ref, isComponentVisible } = useComponentVisible(true, onClick)\n  const { getThemeProperty } = useContext(WebchatContext)\n  const CustomPersistentMenu = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu,\n    undefined\n  )\n  let closeLabel = 'Cancel'\n  try {\n    closeLabel = options.filter(opt => opt.closeLabel !== undefined)[0]\n      .closeLabel\n  } catch (e) {}\n  return (\n    <div ref={ref} role={ROLES.PERSISTENT_MENU}>\n      {isComponentVisible && CustomPersistentMenu ? (\n        <CustomPersistentMenu onClick={onClick} options={options} />\n      ) : (\n        <ButtonsContainer>\n          {Object.values(options).map((e, i) => {\n            return (\n              e.label && (\n                <Button\n                  onClick={onClick}\n                  url={e.url}\n                  target={e.target}\n                  webview={e.webview}\n                  payload={e.payload}\n                  key={i}\n                >\n                  {e.label}\n                </Button>\n              )\n            )\n          })}\n          <Button onClick={onClick} bottomRadius={borderRadius}>\n            {closeLabel}\n          </Button>\n        </ButtonsContainer>\n      )}\n    </div>\n  )\n}\n\nconst IconContainer = styled.div`\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 18px;\n`\n\nexport const PersistentMenu = props => (\n  <IconContainer role={ROLES.PERSISTENT_MENU_ICON} onClick={props.onClick}>\n    <Icon src={LogoMenu} />\n  </IconContainer>\n)\n\nexport default OpenedPersistentMenu\n"],"file":"persistent-menu.js"}

package/lib/webchat/components/send-button.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SendButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sendButton = _interopRequireDefault(require("../../assets/send-button.svg"));
+
+var _constants = require("../../constants");
+
+var _common = require("./common");
+
+var SendButton = function SendButton() {
+  return /*#__PURE__*/_react["default"].createElement(_common.IconContainer, {
+    role: _constants.ROLES.SEND_BUTTON_ICON
+  }, /*#__PURE__*/_react["default"].createElement(_common.Icon, {
+    src: _sendButton["default"]
+  }));
+};
+
+exports.SendButton = SendButton;
+//# sourceMappingURL=send-button.js.map

package/lib/webchat/components/send-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/components/send-button.jsx"],"names":["SendButton","ROLES","SEND_BUTTON_ICON","SendButtonIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa;AAAA,sBACxB,gCAAC,qBAAD;AAAe,IAAA,IAAI,EAAEC,iBAAMC;AAA3B,kBACE,gCAAC,YAAD;AAAM,IAAA,GAAG,EAAEC;AAAX,IADF,CADwB;AAAA,CAAnB","sourcesContent":["import React from 'react'\n\nimport SendButtonIcon from '../../assets/send-button.svg'\nimport { ROLES } from '../../constants'\nimport { Icon, IconContainer } from './common'\n\nexport const SendButton = () => (\n  <IconContainer role={ROLES.SEND_BUTTON_ICON}>\n    <Icon src={SendButtonIcon} />\n  </IconContainer>\n)\n"],"file":"send-button.js"}

package/lib/webchat/components/styled-scrollbar.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledScrollbar = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+require("simplebar/dist/simplebar.css");
+
+require("./styled-scrollbar.scss");
+
+var _simplebarReact = _interopRequireDefault(require("simplebar-react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _constants = require("../../constants");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var StyledScrollbar = (0, _styledComponents["default"])(_simplebarReact["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  & .simplebar-scrollbar::before {\n    background-color: ", ";\n    background-image: ", ";\n    border-radius: ", ";\n  }\n  & .simplebar-track .simplebar-scrollbar.simplebar-visible::before {\n    opacity: ", ";\n  }\n  & .simplebar-track {\n    background-color: ", ";\n    background-image: ", ";\n    border-radius: ", ";\n  }\n"])), function (props) {
+  return props.ismessagescontainer && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      overflow-x: hidden;\n    "])));
+}, function (_ref) {
+  var scrollbar = _ref.scrollbar;
+  return scrollbar && scrollbar.thumb && scrollbar.thumb.color ? scrollbar.thumb.color : "".concat(_constants.COLORS.GRAY);
+}, function (_ref2) {
+  var scrollbar = _ref2.scrollbar;
+  return scrollbar && scrollbar.thumb && scrollbar.thumb.bgcolor ? scrollbar.thumb.bgcolor : "".concat(_constants.COLORS.GRAY);
+}, function (_ref3) {
+  var scrollbar = _ref3.scrollbar;
+  return scrollbar && scrollbar.thumb && scrollbar.thumb.border ? scrollbar.thumb.border : '20px';
+}, function (_ref4) {
+  var scrollbar = _ref4.scrollbar;
+  return scrollbar && !scrollbar.enable ? '0' : scrollbar && scrollbar.thumb && scrollbar.thumb.opacity ? scrollbar.thumb.opacity : '0.75';
+}, function (_ref5) {
+  var scrollbar = _ref5.scrollbar;
+  return scrollbar && scrollbar.track && scrollbar.track.color && !(scrollbar && !scrollbar.enable) ? scrollbar.track.color : _constants.COLORS.TRANSPARENT;
+}, function (_ref6) {
+  var scrollbar = _ref6.scrollbar;
+  return scrollbar && scrollbar.track && scrollbar.track.bgcolor && !(scrollbar && !scrollbar.enable) ? scrollbar.track.bgcolor : _constants.COLORS.TRANSPARENT;
+}, function (_ref7) {
+  var scrollbar = _ref7.scrollbar;
+  return scrollbar && scrollbar.track && scrollbar.track.border ? scrollbar.track.border : '20px';
+});
+exports.StyledScrollbar = StyledScrollbar;
+//# sourceMappingURL=styled-scrollbar.js.map

package/lib/webchat/components/styled-scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/components/styled-scrollbar.jsx"],"names":["StyledScrollbar","SimpleBar","props","ismessagescontainer","css","scrollbar","thumb","color","COLORS","GRAY","bgcolor","border","enable","opacity","track","TRANSPARENT"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;;;;;;;AAEO,IAAMA,eAAe,GAAG,kCAAOC,0BAAP,CAAH,+aACxB,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,mBAAN,QACAC,qBADA,wMADK;AAAA,CADmB,EAUJ;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,SAClBA,SAAS,IAAIA,SAAS,CAACC,KAAvB,IAAgCD,SAAS,CAACC,KAAV,CAAgBC,KAAhD,GACIF,SAAS,CAACC,KAAV,CAAgBC,KADpB,aAEOC,kBAAOC,IAFd,CADkB;AAAA,CAVI,EAcJ;AAAA,MAAGJ,SAAH,SAAGA,SAAH;AAAA,SAClBA,SAAS,IAAIA,SAAS,CAACC,KAAvB,IAAgCD,SAAS,CAACC,KAAV,CAAgBI,OAAhD,GACIL,SAAS,CAACC,KAAV,CAAgBI,OADpB,aAEOF,kBAAOC,IAFd,CADkB;AAAA,CAdI,EAkBP;AAAA,MAAGJ,SAAH,SAAGA,SAAH;AAAA,SACfA,SAAS,IAAIA,SAAS,CAACC,KAAvB,IAAgCD,SAAS,CAACC,KAAV,CAAgBK,MAAhD,GACIN,SAAS,CAACC,KAAV,CAAgBK,MADpB,GAEI,MAHW;AAAA,CAlBO,EAwBb;AAAA,MAAGN,SAAH,SAAGA,SAAH;AAAA,SACTA,SAAS,IAAI,CAACA,SAAS,CAACO,MAAxB,GACI,GADJ,GAEIP,SAAS,IAAIA,SAAS,CAACC,KAAvB,IAAgCD,SAAS,CAACC,KAAV,CAAgBO,OAAhD,GACAR,SAAS,CAACC,KAAV,CAAgBO,OADhB,GAEA,MALK;AAAA,CAxBa,EAgCJ;AAAA,MAAGR,SAAH,SAAGA,SAAH;AAAA,SAClBA,SAAS,IACTA,SAAS,CAACS,KADV,IAEAT,SAAS,CAACS,KAAV,CAAgBP,KAFhB,IAGA,EAAEF,SAAS,IAAI,CAACA,SAAS,CAACO,MAA1B,CAHA,GAIIP,SAAS,CAACS,KAAV,CAAgBP,KAJpB,GAKIC,kBAAOO,WANO;AAAA,CAhCI,EAuCJ;AAAA,MAAGV,SAAH,SAAGA,SAAH;AAAA,SAClBA,SAAS,IACTA,SAAS,CAACS,KADV,IAEAT,SAAS,CAACS,KAAV,CAAgBJ,OAFhB,IAGA,EAAEL,SAAS,IAAI,CAACA,SAAS,CAACO,MAA1B,CAHA,GAIIP,SAAS,CAACS,KAAV,CAAgBJ,OAJpB,GAKIF,kBAAOO,WANO;AAAA,CAvCI,EA8CP;AAAA,MAAGV,SAAH,SAAGA,SAAH;AAAA,SACfA,SAAS,IAAIA,SAAS,CAACS,KAAvB,IAAgCT,SAAS,CAACS,KAAV,CAAgBH,MAAhD,GACIN,SAAS,CAACS,KAAV,CAAgBH,MADpB,GAEI,MAHW;AAAA,CA9CO,CAArB","sourcesContent":["import 'simplebar/dist/simplebar.css'\nimport './styled-scrollbar.scss'\n\nimport SimpleBar from 'simplebar-react'\nimport styled, { css } from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\nexport const StyledScrollbar = styled(SimpleBar)`\n  ${props =>\n    props.ismessagescontainer &&\n    css`\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      overflow-x: hidden;\n    `}\n  & .simplebar-scrollbar::before {\n    background-color: ${({ scrollbar }) =>\n      scrollbar && scrollbar.thumb && scrollbar.thumb.color\n        ? scrollbar.thumb.color\n        : `${COLORS.GRAY}`};\n    background-image: ${({ scrollbar }) =>\n      scrollbar && scrollbar.thumb && scrollbar.thumb.bgcolor\n        ? scrollbar.thumb.bgcolor\n        : `${COLORS.GRAY}`};\n    border-radius: ${({ scrollbar }) =>\n      scrollbar && scrollbar.thumb && scrollbar.thumb.border\n        ? scrollbar.thumb.border\n        : '20px'};\n  }\n  & .simplebar-track .simplebar-scrollbar.simplebar-visible::before {\n    opacity: ${({ scrollbar }) =>\n      scrollbar && !scrollbar.enable\n        ? '0'\n        : scrollbar && scrollbar.thumb && scrollbar.thumb.opacity\n        ? scrollbar.thumb.opacity\n        : '0.75'};\n  }\n  & .simplebar-track {\n    background-color: ${({ scrollbar }) =>\n      scrollbar &&\n      scrollbar.track &&\n      scrollbar.track.color &&\n      !(scrollbar && !scrollbar.enable)\n        ? scrollbar.track.color\n        : COLORS.TRANSPARENT};\n    background-image: ${({ scrollbar }) =>\n      scrollbar &&\n      scrollbar.track &&\n      scrollbar.track.bgcolor &&\n      !(scrollbar && !scrollbar.enable)\n        ? scrollbar.track.bgcolor\n        : COLORS.TRANSPARENT};\n    border-radius: ${({ scrollbar }) =>\n      scrollbar && scrollbar.track && scrollbar.track.border\n        ? scrollbar.track.border\n        : '20px'};\n  }\n`\n"],"file":"styled-scrollbar.js"}

package/lib/webchat/components/styled-scrollbar.scss

@@ -0,0 +1,12 @@
+#botonic-scrollable-content
+  > div.simplebar-wrapper
+  > div.simplebar-mask
+  > div
+  > div {
+  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  -webkit-overflow-scrolling: touch;
+  ::-webkit-scrollbar {
+    // https://github.com/Grsmto/simplebar/issues/445#issuecomment-586902814
+    display: none;
+  }
+}

package/lib/webchat/components/typing-indicator.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypingIndicator = void 0;
+
+require("./typing-indicator.scss");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("../../constants");
+
+var TypingIndicator = function TypingIndicator(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    role: _constants.ROLES.TYPING_INDICATOR,
+    className: "typing-indicator",
+    style: {
+      backgroundColor: _constants.COLORS.SEASHELL_WHITE
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null), /*#__PURE__*/_react["default"].createElement("span", null), /*#__PURE__*/_react["default"].createElement("span", null));
+};
+
+exports.TypingIndicator = TypingIndicator;
+//# sourceMappingURL=typing-indicator.js.map

package/lib/webchat/components/typing-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/components/typing-indicator.jsx"],"names":["TypingIndicator","props","ROLES","TYPING_INDICATOR","backgroundColor","COLORS","SEASHELL_WHITE"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEA;;AAEO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAAAC,KAAK;AAAA,sBAClC;AACE,IAAA,IAAI,EAAEC,iBAAMC,gBADd;AAEE,IAAA,SAAS,EAAC,kBAFZ;AAGE,IAAA,KAAK,EAAE;AAAEC,MAAAA,eAAe,EAAEC,kBAAOC;AAA1B;AAHT,kBAKE,6CALF,eAME,6CANF,eAOE,6CAPF,CADkC;AAAA,CAA7B","sourcesContent":["import './typing-indicator.scss'\n\nimport React from 'react'\n\nimport { COLORS, ROLES } from '../../constants'\n\nexport const TypingIndicator = props => (\n  <div\n    role={ROLES.TYPING_INDICATOR}\n    className='typing-indicator'\n    style={{ backgroundColor: COLORS.SEASHELL_WHITE }}\n  >\n    <span />\n    <span />\n    <span />\n  </div>\n)\n"],"file":"typing-indicator.js"}

package/lib/webchat/components/typing-indicator.scss

@@ -0,0 +1,38 @@
+.typing-indicator {
+  will-change: transform;
+  width: 44px;
+  line-height: 0px;
+  border-radius: 20px;
+  padding: 8px 2px 8px;
+  text-align: center;
+  display: block;
+  margin: 8px;
+  position: relative;
+  animation: 2s bulge infinite ease-out;
+  span {
+    height: 6px;
+    width: 6px;
+    margin: 0 1px;
+    background-color: #9e9ea1;
+    display: inline-block;
+    border-radius: 50%;
+    opacity: 0.4;
+    @for $i from 1 through 3 {
+      &:nth-of-type(#{$i}) {
+        animation: 1s blink infinite ($i * 0.3333s);
+      }
+    }
+  }
+}
+
+@keyframes blink {
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes bulge {
+  50% {
+    transform: scale(1.05);
+  }
+}

package/lib/webchat/devices/device-adapter.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeviceAdapter = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _dom = require("../../util/dom");
+
+var _ = require(".");
+
+var _scrollbarController = require("./scrollbar-controller");
+
+var _webchatResizer = require("./webchat-resizer");
+
+var DeviceAdapter = /*#__PURE__*/function () {
+  function DeviceAdapter() {
+    (0, _classCallCheck2["default"])(this, DeviceAdapter);
+    this.currentDevice = this.getCurrentDevice();
+  }
+
+  (0, _createClass2["default"])(DeviceAdapter, [{
+    key: "init",
+    value: function init(host) {
+      this.webchatResizer = new _webchatResizer.WebchatResizer(this.currentDevice, host);
+      this.scrollbarController = new _scrollbarController.ScrollbarController(this.currentDevice, host);
+      this.scrollbarController.handleScrollEvents();
+    }
+  }, {
+    key: "getCurrentDevice",
+    value: function getCurrentDevice() {
+      // navigator.platform deprecated. Ref: (https://erikmartinjordan.com/navigator-platform-deprecated-alternative)
+      if (navigator.userAgentData) return navigator.userAgentData.platform;
+      return navigator.platform;
+    }
+  }, {
+    key: "onFocus",
+    value: function onFocus(host) {
+      var _this = this;
+
+      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) {
+        (0, _dom.scrollToBottom)({
+          host: host,
+          timeout: 800
+        });
+        return;
+      }
+
+      setTimeout(function () {
+        // Place onFocus logic to be run the last on the queue of asynchronous events to give enough time to init method to be called. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#zero_delays
+        _this.webchatResizer.onFocus(function () {
+          return _this.scrollbarController.handleOnTouchMoveEvents();
+        });
+      }, 0);
+    }
+  }, {
+    key: "onBlur",
+    value: function onBlur() {
+      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
+      this.webchatResizer.onBlur();
+      this.scrollbarController.handleOnTouchMoveEvents();
+    }
+  }, {
+    key: "fontSize",
+    value: function fontSize() {
+      var defaultFontSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 14;
+      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return defaultFontSize; // Disabling auto-zoom on input (iPhone devices): https://stackoverflow.com/a/25614477, https://stackoverflow.com/a/6394497
+
+      return 'initial';
+    }
+  }]);
+  return DeviceAdapter;
+}();
+
+exports.DeviceAdapter = DeviceAdapter;
+//# sourceMappingURL=device-adapter.js.map

package/lib/webchat/devices/device-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/devices/device-adapter.js"],"names":["DeviceAdapter","currentDevice","getCurrentDevice","host","webchatResizer","WebchatResizer","scrollbarController","ScrollbarController","handleScrollEvents","navigator","userAgentData","platform","DEVICES","MOBILE","IPHONE","timeout","setTimeout","onFocus","handleOnTouchMoveEvents","onBlur","defaultFontSize"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;IAEaA,a;AACX,2BAAc;AAAA;AACZ,SAAKC,aAAL,GAAqB,KAAKC,gBAAL,EAArB;AACD;;;;WAED,cAAKC,IAAL,EAAW;AACT,WAAKC,cAAL,GAAsB,IAAIC,8BAAJ,CAAmB,KAAKJ,aAAxB,EAAuCE,IAAvC,CAAtB;AACA,WAAKG,mBAAL,GAA2B,IAAIC,wCAAJ,CAAwB,KAAKN,aAA7B,EAA4CE,IAA5C,CAA3B;AACA,WAAKG,mBAAL,CAAyBE,kBAAzB;AACD;;;WAED,4BAAmB;AACjB;AACA,UAAIC,SAAS,CAACC,aAAd,EAA6B,OAAOD,SAAS,CAACC,aAAV,CAAwBC,QAA/B;AAC7B,aAAOF,SAAS,CAACE,QAAjB;AACD;;;WAED,iBAAQR,IAAR,EAAc;AAAA;;AACZ,UAAI,KAAKF,aAAL,KAAuBW,UAAQC,MAAR,CAAeC,MAA1C,EAAkD;AAChD,iCAAe;AAAEX,UAAAA,IAAI,EAAJA,IAAF;AAAQY,UAAAA,OAAO,EAAE;AAAjB,SAAf;AACA;AACD;;AACDC,MAAAA,UAAU,CAAC,YAAM;AACf;AACA,QAAA,KAAI,CAACZ,cAAL,CAAoBa,OAApB,CAA4B;AAAA,iBAC1B,KAAI,CAACX,mBAAL,CAAyBY,uBAAzB,EAD0B;AAAA,SAA5B;AAGD,OALS,EAKP,CALO,CAAV;AAMD;;;WAED,kBAAS;AACP,UAAI,KAAKjB,aAAL,KAAuBW,UAAQC,MAAR,CAAeC,MAA1C,EAAkD;AAClD,WAAKV,cAAL,CAAoBe,MAApB;AACA,WAAKb,mBAAL,CAAyBY,uBAAzB;AACD;;;WAED,oBAA+B;AAAA,UAAtBE,eAAsB,uEAAJ,EAAI;AAC7B,UAAI,KAAKnB,aAAL,KAAuBW,UAAQC,MAAR,CAAeC,MAA1C,EAAkD,OAAOM,eAAP,CADrB,CAE7B;;AACA,aAAO,SAAP;AACD","sourcesContent":["import { scrollToBottom } from '../../util/dom'\nimport { DEVICES } from '.'\nimport { ScrollbarController } from './scrollbar-controller'\nimport { WebchatResizer } from './webchat-resizer'\n\nexport class DeviceAdapter {\n  constructor() {\n    this.currentDevice = this.getCurrentDevice()\n  }\n\n  init(host) {\n    this.webchatResizer = new WebchatResizer(this.currentDevice, host)\n    this.scrollbarController = new ScrollbarController(this.currentDevice, host)\n    this.scrollbarController.handleScrollEvents()\n  }\n\n  getCurrentDevice() {\n    // navigator.platform deprecated. Ref: (https://erikmartinjordan.com/navigator-platform-deprecated-alternative)\n    if (navigator.userAgentData) return navigator.userAgentData.platform\n    return navigator.platform\n  }\n\n  onFocus(host) {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) {\n      scrollToBottom({ host, timeout: 800 })\n      return\n    }\n    setTimeout(() => {\n      // Place onFocus logic to be run the last on the queue of asynchronous events to give enough time to init method to be called. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#zero_delays\n      this.webchatResizer.onFocus(() =>\n        this.scrollbarController.handleOnTouchMoveEvents()\n      )\n    }, 0)\n  }\n\n  onBlur() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    this.webchatResizer.onBlur()\n    this.scrollbarController.handleOnTouchMoveEvents()\n  }\n\n  fontSize(defaultFontSize = 14) {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return defaultFontSize\n    // Disabling auto-zoom on input (iPhone devices): https://stackoverflow.com/a/25614477, https://stackoverflow.com/a/6394497\n    return 'initial'\n  }\n}\n"],"file":"device-adapter.js"}

package/lib/webchat/devices/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMobileDevice = exports.isDevice = exports.DEVICES = void 0;
+var DEVICES = Object.freeze({
+  MOBILE: {
+    IPHONE: 'iPhone',
+    ANDROID: 'Android',
+    WEBOS: 'webOS',
+    BLACKBERRY: 'BlackBerry',
+    WINDOWS_PHONE: 'Windows Phone'
+  }
+});
+exports.DEVICES = DEVICES;
+
+var isDevice = function isDevice(deviceName) {
+  // https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today
+  return !!navigator.platform && navigator.platform.toLowerCase().includes(deviceName.toLowerCase());
+};
+
+exports.isDevice = isDevice;
+
+var isMobileDevice = function isMobileDevice() {
+  return Object.values(DEVICES.MOBILE).some(function (deviceName) {
+    return isDevice(deviceName);
+  });
+};
+
+exports.isMobileDevice = isMobileDevice;
+//# sourceMappingURL=index.js.map

package/lib/webchat/devices/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/devices/index.js"],"names":["DEVICES","Object","freeze","MOBILE","IPHONE","ANDROID","WEBOS","BLACKBERRY","WINDOWS_PHONE","isDevice","deviceName","navigator","platform","toLowerCase","includes","isMobileDevice","values","some"],"mappings":";;;;;;AAAO,IAAMA,OAAO,GAAGC,MAAM,CAACC,MAAP,CAAc;AACnCC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAE,QADF;AAENC,IAAAA,OAAO,EAAE,SAFH;AAGNC,IAAAA,KAAK,EAAE,OAHD;AAINC,IAAAA,UAAU,EAAE,YAJN;AAKNC,IAAAA,aAAa,EAAE;AALT;AAD2B,CAAd,CAAhB;;;AAUA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAAAC,UAAU,EAAI;AACpC;AACA,SACE,CAAC,CAACC,SAAS,CAACC,QAAZ,IACAD,SAAS,CAACC,QAAV,CAAmBC,WAAnB,GAAiCC,QAAjC,CAA0CJ,UAAU,CAACG,WAAX,EAA1C,CAFF;AAID,CANM;;;;AAQA,IAAME,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAClC,SAAOd,MAAM,CAACe,MAAP,CAAchB,OAAO,CAACG,MAAtB,EAA8Bc,IAA9B,CAAmC,UAAAP,UAAU;AAAA,WAAID,QAAQ,CAACC,UAAD,CAAZ;AAAA,GAA7C,CAAP;AACD,CAFM","sourcesContent":["export const DEVICES = Object.freeze({\n  MOBILE: {\n    IPHONE: 'iPhone',\n    ANDROID: 'Android',\n    WEBOS: 'webOS',\n    BLACKBERRY: 'BlackBerry',\n    WINDOWS_PHONE: 'Windows Phone',\n  },\n})\n\nexport const isDevice = deviceName => {\n  // https://stackoverflow.com/questions/19877924/what-is-the-list-of-possible-values-for-navigator-platform-as-of-today\n  return (\n    !!navigator.platform &&\n    navigator.platform.toLowerCase().includes(deviceName.toLowerCase())\n  )\n}\n\nexport const isMobileDevice = () => {\n  return Object.values(DEVICES.MOBILE).some(deviceName => isDevice(deviceName))\n}\n"],"file":"index.js"}

package/lib/webchat/devices/scrollbar-controller.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollbarController = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _dom = require("../../util/dom");
+
+var _ = require(".");
+
+var debounced = function debounced(delay, fn) {
+  var timerId;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    timerId = setTimeout(function () {
+      fn.apply(void 0, args);
+      timerId = null;
+    }, delay);
+  };
+};
+
+var stopAtScrollLimit = function stopAtScrollLimit(element) {
+  if (element.scrollTop === 0) element.scrollTop = 1;
+  if (element.scrollHeight - element.scrollTop === element.clientHeight) element.scrollTop -= 1;
+};
+
+var ScrollbarController = /*#__PURE__*/function () {
+  function ScrollbarController(currentDevice, host) {
+    (0, _classCallCheck2["default"])(this, ScrollbarController);
+    this.currentDevice = currentDevice;
+    this.webchat = (0, _dom.getWebchatElement)(host);
+  }
+
+  (0, _createClass2["default"])(ScrollbarController, [{
+    key: "handleScrollEvents",
+    value: function handleScrollEvents() {
+      var _this = this;
+
+      /*
+        It handles scroll events for Mobile/Desktop.
+        "ontouchmove" is the phone equivalent for "onmouseover"
+      */
+      if ((0, _.isMobileDevice)()) {
+        if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
+        this.limitScrollBoundaries();
+
+        this.webchat.ontouchstart = function (e) {
+          _this.handleOnTouchMoveEvents(e);
+        };
+
+        this.webchat.ontouchmove = function (e) {
+          _this.handleOnTouchMoveEvents(e);
+        };
+      } else {
+        this.webchat.onmouseover = function (e) {
+          return _this.handleOnMouseOverEvents(e);
+        };
+      }
+    }
+  }, {
+    key: "hasScrollbar",
+    value: function hasScrollbar() {
+      var scrollableArea = (0, _dom.getScrollableArea)(this.webchat);
+      var isScrollable = scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0;
+      return isScrollable;
+    }
+  }, {
+    key: "handleOnMouseOverEvents",
+    value: function handleOnMouseOverEvents(e) {
+      var target = e.currentTarget;
+
+      while (target) {
+        this.toggleOnMouseWheelEvents();
+        target = target.parentNode;
+      }
+    }
+  }, {
+    key: "toggleOnMouseWheelEvents",
+    value: function toggleOnMouseWheelEvents() {
+      var scrollableContent = (0, _dom.getScrollableContent)(this.webchat);
+
+      if (this.hasScrollbar()) {
+        scrollableContent.onmousewheel = {};
+        return;
+      }
+
+      scrollableContent.onmousewheel = function (e) {
+        return e.preventDefault();
+      };
+    }
+  }, {
+    key: "handleOnTouchMoveEvents",
+    value: function handleOnTouchMoveEvents(e) {
+      this.toggleOnTouchMoveEvents();
+    }
+  }, {
+    key: "toggleOnTouchMoveEvents",
+    value: function toggleOnTouchMoveEvents() {
+      if (this.hasScrollbar()) {
+        this.webchat.ontouchmove = {};
+        this.webchat.ontouchstart = {};
+        return;
+      }
+
+      this.webchat.ontouchmove = function (e) {
+        return e.preventDefault();
+      };
+    }
+  }, {
+    key: "limitScrollBoundaries",
+    value: function limitScrollBoundaries() {
+      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
+      /*
+        It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,
+        as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
+      */
+
+      var frame = (0, _dom.getScrollableArea)(this.webchat).visible;
+      var dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
+
+      if (frame) {
+        if (window.addEventListener) {
+          frame.addEventListener('scroll', function () {
+            return dStopAtScrollLimit(frame);
+          }, true);
+        } else if (window.attachEvent) {
+          frame.attachEvent('scroll', function () {
+            return dStopAtScrollLimit(frame);
+          });
+        }
+      }
+    }
+  }]);
+  return ScrollbarController;
+}();
+
+exports.ScrollbarController = ScrollbarController;
+//# sourceMappingURL=scrollbar-controller.js.map