@zohoim/chat-components 1.1.2-beta.7 → 1.1.3-beta.1

package/lib/EmojisList/EmojisList.js

@@ -0,0 +1,143 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = EmojisList;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Emoji = _interopRequireDefault(require("../Emoji/Emoji"));
+
+var _EmojisEmptyState = _interopRequireDefault(require("../EmojisEmptyState/EmojisEmptyState"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useEmojisList2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/EmojisList/useEmojisList"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _EmojisListModule = _interopRequireDefault(require("./css/EmojisList.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function EmojisList(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      searchString = props.searchString,
+      isShowGroupBasedList = props.isShowGroupBasedList,
+      onChangeGroup = props.onChangeGroup,
+      getMethods = props.getMethods,
+      onSelect = props.onSelect,
+      selectedGroup = props.selectedGroup,
+      rowType = props.rowType,
+      propsEmojisList = props.emojisList,
+      renderEmpty = props.renderEmpty,
+      isShowOnlyContent = props.isShowOnlyContent;
+  var _customProps$emojiPro = customProps.emojiProps,
+      emojiProps = _customProps$emojiPro === void 0 ? _emptyConstants.dummyObject : _customProps$emojiPro,
+      _customProps$emojisEm = customProps.emojisEmptyStateProps,
+      emojisEmptyStateProps = _customProps$emojisEm === void 0 ? _emptyConstants.dummyObject : _customProps$emojisEm;
+
+  var _useEmojisList = (0, _useEmojisList2["default"])({
+    emojisList: propsEmojisList,
+    searchString: searchString,
+    isShowGroupBasedList: isShowGroupBasedList,
+    onChangeGroup: onChangeGroup,
+    getMethods: getMethods,
+    selectedGroup: selectedGroup,
+    isShowOnlyContent: isShowOnlyContent
+  }),
+      emojisList = _useEmojisList.emojisList,
+      setGroupRefs = _useEmojisList.setGroupRefs,
+      listContainerRef = _useEmojisList.setContainerRef,
+      isAllEmpty = _useEmojisList.isAllEmpty,
+      isGroupEmpty = _useEmojisList.isGroupEmpty,
+      isRenderEmptyState = _useEmojisList.isRenderEmptyState,
+      isRenderElement = _useEmojisList.isRenderElement;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_EmojisListModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    rowType: rowType,
+    isShowGroupBasedList: isShowGroupBasedList,
+    isShowOnlyContent: isShowOnlyContent,
+    isEmpty: isAllEmpty
+  }, newStyle),
+      emojisListClass = _cssJSLogic.emojisListClass,
+      groupClass = _cssJSLogic.groupClass;
+
+  var renderGroup = (0, _react.useCallback)(function (_ref) {
+    var groupName = _ref.groupName,
+        emojis = _ref.emojis;
+    var isEmptyGroup = isGroupEmpty[groupName];
+    return !isEmptyGroup ? /*#__PURE__*/_react["default"].createElement("div", {
+      key: groupName,
+      ref: function ref(el) {
+        setGroupRefs(el, groupName);
+      },
+      className: groupClass
+    }, isShowGroupBasedList ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: newStyle.groupName
+    }, groupName) : null, Object.keys(emojis).map(function (emojiName) {
+      var emoji = emojis[emojiName];
+      var id = "emoji_".concat(emojiName);
+      return /*#__PURE__*/_react["default"].createElement(_Emoji["default"], _extends({
+        key: id,
+        emoji: emoji,
+        emojiName: emojiName,
+        onSelect: onSelect
+      }, emojiProps));
+    })) : null;
+  }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
+  var renderDefaultEmptyState = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_EmojisEmptyState["default"], emojisEmptyStateProps);
+  }, [emojisEmptyStateProps]);
+  var renderEmptyState = (0, _react.useCallback)(function () {
+    /* Render EmptyState */
+    if (isRenderEmptyState) {
+      var emptyState = (0, _renderHandler["default"])(renderEmpty || renderDefaultEmptyState)();
+
+      if (emptyState) {
+        return emptyState;
+      }
+
+      return null;
+    }
+
+    return null;
+  }, [renderEmpty, renderDefaultEmptyState, isRenderEmptyState]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRenderElement ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: listContainerRef,
+    className: emojisListClass
+  }, !isAllEmpty ? Object.keys(emojisList).map(function (groupName) {
+    var emojis = emojisList[groupName];
+    return renderGroup({
+      groupName: groupName,
+      emojis: emojis
+    });
+  }) : renderEmptyState()) : null);
+}
+
+EmojisList.propTypes = _propTypes["default"];
+EmojisList.defaultProps = _defaultProps["default"];
+EmojisList.displayName = 'EmojisList';

package/lib/EmojisList/css/EmojisList.module.css

@@ -0,0 +1,50 @@
+.varClass {
+  --emoji-groupName-size: 13px;
+  --emoji-singleList-size: 32px;
+  --emoji-multipleList-size: 300px;
+}
+
+.emojisList {
+  composes: varClass;
+  transition: 0.2s ease;
+  flex-direction: row;
+  flex-shrink: 0;
+  width: 100% ;
+  word-wrap: break-word;
+  font-size: 0 ;
+}
+
+.emojisListHide {
+  display: none;
+}
+
+.emojisListSingle {
+  height: var(--emoji-singleList-size);
+  white-space: nowrap;
+  overflow-x: auto;
+}
+
+.emojisListMultiple {
+  height: var(--emoji-multipleList-size);
+  overflow-y: auto;
+}
+
+.groupName {
+  width: 100% ;
+  font-size: var(--emoji-groupName-size);
+  text-transform: capitalize;
+  color: var(--imlib_chat_components_emojiPopup_titleColor);
+  padding: var(--zd_size8) var(--zd_size10) ;
+  margin-bottom: var(--zd_size5) ;
+}
+
+.groupContainer {
+  font-size: 0 ;
+}
+.groupSeperate {
+  display: inline-block;
+}
+
+.groupAll {
+  display: inline;
+}

package/lib/EmojisList/css/cssJSLogic.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _compileClassNames3 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var _compileClassNames, _compileClassNames2;
+
+  var rowType = props.rowType,
+      isShowGroupBasedList = props.isShowGroupBasedList,
+      isShowOnlyContent = props.isShowOnlyContent,
+      isEmpty = props.isEmpty;
+  var emojisListClass = (0, _compileClassNames3["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, style.emojisList, true), _defineProperty(_compileClassNames, style.emojisListSingle, rowType === 'single'), _defineProperty(_compileClassNames, style.emojisListMultiple, rowType === 'multiple'), _defineProperty(_compileClassNames, style.emojisListHide, isShowOnlyContent ? isEmpty : false), _compileClassNames));
+  var groupClass = (0, _compileClassNames3["default"])((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.groupContainer, true), _defineProperty(_compileClassNames2, style.groupSeperate, !!isShowGroupBasedList), _defineProperty(_compileClassNames2, style.groupAll, !isShowGroupBasedList), _compileClassNames2));
+  return {
+    emojisListClass: emojisListClass,
+    groupClass: groupClass
+  };
+}

package/lib/EmojisList/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmojisList", {
+  enumerable: true,
+  get: function get() {
+    return _EmojisList["default"];
+  }
+});
+
+var _EmojisList = _interopRequireDefault(require("./EmojisList"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/EmojisList/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+/** ** Constants *** */
+var emojisListDefaultProps = {
+  customStyle: _constants.dummyObject,
+  customProps: _constants.dummyObject,
+  rowType: 'multiple',
+  isShowGroupBasedList: true,
+  isShowOnlyContent: false
+};
+var _default = emojisListDefaultProps;
+exports["default"] = _default;

package/lib/EmojisList/props/propTypes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var emojisListPropTypes = {
+  emojisList: _propTypes["default"].object.isRequired,
+  customProps: _propTypes["default"].shape({
+    emojiProps: _propTypes["default"].object,
+    emojisEmptyStateProps: _propTypes["default"].object
+  }),
+  customStyle: _propTypes["default"].object,
+  getMethods: _propTypes["default"].func,
+  isShowGroupBasedList: _propTypes["default"].bool,
+  isShowOnlyContent: _propTypes["default"].bool,
+  onChangeGroup: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  renderEmpty: _propTypes["default"].func,
+  rowType: _propTypes["default"].oneOf(['single', 'multiple']),
+  searchString: _propTypes["default"].string,
+  selectedGroup: _propTypes["default"].string
+};
+var _default = emojisListPropTypes;
+exports["default"] = _default;

package/lib/Fonts/puviFont.module.css

@@ -0,0 +1,62 @@
+/* $Id$ */
+
+@font-face {
+  font-family: 'ZohoPuviLight';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Light.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
+  
+@font-face {
+  font-family: 'ZohoPuviRegular';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
+  
+@font-face {
+  font-family: 'ZohoPuviSemiBold';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Semibold.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
+  
+@font-face {
+  font-family: 'ZohoPuviBold';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Bold.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: bold;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
+  
+@font-face {
+  font-family: 'ZohoPuviExtBd';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Extrabold.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
+  
+@font-face {
+  font-family: 'ZohoPuviMedium';
+  src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Medium.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-display: swap;
+}
+  

package/lib/ImageBubble/ImageBubble.js

@@ -0,0 +1,98 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ImageBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useAttachmentBubble2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/AttachmentBubble/useAttachmentBubble"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _ImageBubbleModule = _interopRequireDefault(require("./css/ImageBubble.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _LazyLoadImage = _interopRequireDefault(require("../LazyLoadImage/LazyLoadImage"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+
+/** ** Components *** */
+
+/** ** Methods *** */
+function ImageBubble(props) {
+  var customStyle = props.customStyle,
+      imageDetails = props.imageDetails,
+      isFailed = props.isFailed,
+      isSending = props.isSending,
+      propOnClick = props.onClick;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_ImageBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed,
+    isSending: isSending
+  }, newStyle),
+      imageBubbleClass = _cssJSLogic.imageBubbleClass;
+
+  var imageStyle = (0, _react.useMemo)(function () {
+    return {
+      lazyLoadImage: newStyle.image
+    };
+  }, [newStyle.image]);
+  var blurImageStyle = (0, _react.useMemo)(function () {
+    return {
+      lazyLoadImage: newStyle.blurImage
+    };
+  }, [newStyle.blurImage]);
+
+  var _useAttachmentBubble = (0, _useAttachmentBubble2["default"])({
+    attachmentDetails: imageDetails,
+    onClick: propOnClick
+  }),
+      src = _useAttachmentBubble.attachmentURL,
+      alternate = _useAttachmentBubble.fileName,
+      onClick = _useAttachmentBubble.onClick;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
+    className: imageBubbleClass,
+    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement(_LazyLoadImage["default"], {
+    alternate: alternate,
+    customStyle: blurImageStyle,
+    src: src
+  }), /*#__PURE__*/_react["default"].createElement(_LazyLoadImage["default"], {
+    alternate: alternate,
+    customStyle: imageStyle,
+    src: src
+  }));
+}
+
+ImageBubble.propTypes = _propTypes["default"];
+ImageBubble.defaultProps = _defaultProps["default"];
+ImageBubble.displayName = 'ImageBubble';

package/lib/ImageBubble/css/ImageBubble.module.css

@@ -0,0 +1,63 @@
+.varClass {
+  --imageBubble-wrapper_height: 200px;
+  --imageBubble-wrapper_width: 23.75rem;
+  --imageBubble-wrapper_max_width: 100%;
+  --imageBubble-blur_img_width: 100%;
+  --imageBubble-blur_img_height: 100%;
+  /* --imageBubble-blur_img_blurpx: 90px; */
+  --imageBubble-img_max_width: 100%;
+  --imageBubble-img_max_height: 100%;
+}
+
+.imageBubbleWrapper {
+  composes: varClass;
+  width: var(--imageBubble-wrapper_width) !important;
+  max-width: var(--imageBubble-wrapper_max_width);
+  height: var(--imageBubble-wrapper_height) !important;
+  color: var(--imlib_chat_components_imageBubble_alt_text_color);
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--imlib_chat_components_imageBubble_bg_color);
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_imageBubble_border_color);
+}
+
+.failedImageBubble {
+  color: var(--imlib_chat_components_imageBubble_alt_text_color_failed);
+  background-color: var(--imlib_chat_components_imageBubble_bg_color_failed);
+  border-color: var(--imlib_chat_components_imageBubble_border_color_failed);
+}
+
+.blurImage {
+  object-fit: cover;
+  -webkit-filter: blur(90px);
+  filter: blur(90px);
+  position: absolute;
+  top: 0 ;
+  bottom: 0 ;
+  width: var(--imageBubble-blur_img_width);
+  height: var(--imageBubble-blur_img_height);
+}
+
+[dir=ltr] .blurImage {
+  right: 0 ;
+  left: 0 ;
+}
+
+[dir=rtl] .blurImage {
+  left: 0 ;
+  right: 0 ;
+}
+
+.image {
+  max-width: var(--imageBubble-img_max_width);
+  max-height: var(--imageBubble-img_max_height);
+  object-fit: contain;
+  position: relative;
+}
+
+.sendingImageBubble {
+  opacity: 0.1;
+  cursor: default;
+}

package/lib/ImageBubble/css/cssJSLogic.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var _compileClassNames;
+
+  var isFailed = props.isFailed,
+      isSending = props.isSending;
+  var imageBubbleClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.imageBubbleWrapper, true), _defineProperty(_compileClassNames, style.failedImageBubble, isFailed), _defineProperty(_compileClassNames, style.sendingImageBubble, isSending), _compileClassNames));
+  return {
+    imageBubbleClass: imageBubbleClass
+  };
+}

package/lib/ImageBubble/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImageBubble", {
+  enumerable: true,
+  get: function get() {
+    return _ImageBubble["default"];
+  }
+});
+
+var _ImageBubble = _interopRequireDefault(require("./ImageBubble"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/ImageBubble/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var imageBubbleDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = imageBubbleDefaultProps;
+exports["default"] = _default;

package/lib/ImageBubble/props/propTypes.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var imageBubblePropTypes = {
+  imageDetails: _propTypes["default"].shape({
+    url: _propTypes["default"].string.isRequired,
+    name: _propTypes["default"].string
+  }).isRequired,
+  customStyle: _propTypes["default"].object,
+  isFailed: _propTypes["default"].bool,
+  isSending: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func
+};
+var _default = imageBubblePropTypes;
+exports["default"] = _default;

package/lib/LazyLoadImage/LazyLoadImage.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = LazyLoadImage;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useLazyLoadImage2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/ImageBubble/useLazyLoadImage"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _LazyLoadImageModule = _interopRequireDefault(require("./css/LazyLoadImage.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+function LazyLoadImage(props) {
+  var customStyle = props.customStyle,
+      src = props.src,
+      alternate = props.alternate;
+
+  var _useLazyLoadImage = (0, _useLazyLoadImage2["default"])({
+    src: src
+  }),
+      imageElementRef = _useLazyLoadImage.imageElementRef;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_LazyLoadImageModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement("img", {
+    ref: imageElementRef,
+    alt: alternate,
+    className: "lazy ".concat(newStyle.lazyLoadImage || ''),
+    "data-src": src,
+    "data-srcset": src,
+    src: ""
+  });
+}
+
+LazyLoadImage.propTypes = _propTypes["default"];
+LazyLoadImage.defaultProps = _defaultProps["default"];
+LazyLoadImage.displayName = 'LazyLoadImage';

package/lib/LazyLoadImage/css/LazyLoadImage.module.css

@@ -0,0 +1,5 @@
+.lazyLoadImage {
+  /* height: 100%;
+  width: 100%; */
+  /* Use this class name for css customisation */
+}

package/lib/LazyLoadImage/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LazyLoadImage", {
+  enumerable: true,
+  get: function get() {
+    return _LazyLoadImage["default"];
+  }
+});
+
+var _LazyLoadImage = _interopRequireDefault(require("./LazyLoadImage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }