@zohodesk/dot 1.0.0-temp-138 → 1.0.0-temp.139

package/lib/layout/List/ThreadsList/ThreadListItemFromTabUI.js

@@ -0,0 +1,283 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ThreadListItemFromTabUI;
+var _react = _interopRequireDefault(require("react"));
+var _Layout = require("@zohodesk/components/es/Layout");
+var _VelocityAnimation = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimation/VelocityAnimation"));
+var _ThreadListItemFromTabModule = _interopRequireDefault(require("./ThreadListItemFromTab.module.css"));
+var _SubTabListItemTabCommonModule = _interopRequireDefault(require("../common/SubTabListItemTabCommon.module.css"));
+var _twoToneIconColorModule = _interopRequireDefault(require("../common/twoToneIconColor.module.css"));
+var _ThreadListItemCommonModule = _interopRequireDefault(require("./ThreadListItemCommon.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ThreadListItemFromTabUI(props) {
+  var getAvatar = props.getAvatar,
+    getName = props.getName,
+    getSentiment = props.getSentiment,
+    getDraft = props.getDraft,
+    getTag = props.getTag,
+    getResponseDeleted = props.getResponseDeleted,
+    getDraftWithTime = props.getDraftWithTime,
+    getReadStatus = props.getReadStatus,
+    getBestAnswer = props.getBestAnswer,
+    getViaChannel = props.getViaChannel,
+    getViaCustomChannel = props.getViaCustomChannel,
+    getRecipentsIcon = props.getRecipentsIcon,
+    getKeyWords = props.getKeyWords,
+    getRatingImg = props.getRatingImg,
+    getChannelInfo = props.getChannelInfo,
+    getAttachmentIcon = props.getAttachmentIcon,
+    getMoreDropdown = props.getMoreDropdown,
+    getRecipents = props.getRecipents,
+    getAudioMsg = props.getAudioMsg,
+    getTruncateOption = props.getTruncateOption,
+    getQuotedOption = props.getQuotedOption,
+    getQuotedContent = props.getQuotedContent,
+    getVisitorOption = props.getVisitorOption,
+    getVisitorInfo = props.getVisitorInfo,
+    getSummary = props.getSummary,
+    getContent = props.getContent,
+    getAttachment = props.getAttachment,
+    isPeekView = props.isPeekView,
+    isPopupOpen = props.isPopupOpen,
+    isNightMode = props.isNightMode,
+    dataId = props.dataId,
+    id = props.id,
+    onThreadClick = props.onThreadClick,
+    threadRef = props.threadRef,
+    onContainerCLick = props.onContainerCLick,
+    containerRef = props.containerRef,
+    customList = props.customList,
+    authorType = props.authorType,
+    isRecipients = props.isRecipients,
+    channel = props.channel,
+    showVisitor = props.showVisitor,
+    needToShowContent = props.needToShowContent,
+    hasTelephonyAudio = props.hasTelephonyAudio,
+    isThreadOpened = props.isThreadOpened,
+    showQuotedContent = props.showQuotedContent,
+    getReadReceiptsLookup = props.getReadReceiptsLookup,
+    isMobile = props.isMobile,
+    needReadStatus = props.needReadStatus,
+    getImScrollComp = props.getImScrollComp,
+    ViewInLightDarkBg = props.ViewInLightDarkBg,
+    getTheme = props.getTheme,
+    children = props.children;
+  var invertClass = isNightMode ? ViewInLightDarkBg ? _ThreadListItemCommonModule["default"].whiteBg : _ThreadListItemCommonModule["default"].invert : '';
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    "data-desk-mode": ViewInLightDarkBg ? 'default' : '',
+    "data-desk-theme": ViewInLightDarkBg ? getTheme : '',
+    className: "".concat(_SubTabListItemTabCommonModule["default"].wrapper, "\n                ").concat(isMobile ? _ThreadListItemFromTabModule["default"].mobileListWrapper : _ThreadListItemFromTabModule["default"].listWrapper, "\n                    ").concat(_ThreadListItemCommonModule["default"].normal, "\n                    ").concat(!isThreadOpened ? _ThreadListItemCommonModule["default"].threadShrink : '', "\n                    ").concat(customList),
+    "data-id": dataId,
+    key: id,
+    id: id,
+    ref: threadRef,
+    "data-a11y-focus": !isThreadOpened
+  }, children ? children : null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, getAvatar ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _ThreadListItemCommonModule["default"].avatarWrapper
+  }, getAvatar({
+    size: 'medium'
+  })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    dataId: "secThreadPanel",
+    onClick: onThreadClick,
+    className: _SubTabListItemTabCommonModule["default"].pointer
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: "".concat(_SubTabListItemTabCommonModule["default"].pointer, " ").concat(_ThreadListItemCommonModule["default"].icnBtnSpace)
+  }, getName ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, getName({
+    'is-dot': 'true',
+    className: "".concat(_ThreadListItemCommonModule["default"].agentName, " ").concat(authorType === 'AGENT' ? _ThreadListItemCommonModule["default"].agentNameHover : '', " ").concat(_SubTabListItemTabCommonModule["default"].dotted)
+  })) : null, getSentiment ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getSentiment({
+    iconSize: '9'
+  }))) : null, getBestAnswer ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "Best Answer",
+    className: "".concat(_ThreadListItemCommonModule["default"].bestAns, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }, getBestAnswer())) : null, getViaChannel ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: _ThreadListItemCommonModule["default"].forumText
+  }, getViaChannel({
+    className: "".concat(_ThreadListItemCommonModule["default"].primaryText, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }))) : null, getViaCustomChannel ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: _ThreadListItemCommonModule["default"].forumText
+  }, getViaCustomChannel({
+    className: "".concat(_ThreadListItemCommonModule["default"].primaryText, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }))) : null)), getRatingImg ? getRatingImg({
+    className: "".concat(_ThreadListItemCommonModule["default"].ratingImage, " ").concat(_ThreadListItemCommonModule["default"].icnBtnSpace)
+  }) : null, getChannelInfo ? getChannelInfo({
+    iconClass: "".concat(_ThreadListItemFromTabModule["default"].chnlIcn, " ").concat(_twoToneIconColorModule["default"].primary)
+  }) : null, getAttachmentIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getAttachmentIcon({
+    innerProps: {
+      className: _ThreadListItemCommonModule["default"].attachCount
+    },
+    wrapperProps: {
+      className: " ".concat(_ThreadListItemCommonModule["default"].attachIconWrapper, " ").concat(_ThreadListItemCommonModule["default"].icnBtnSpace)
+    }
+  })) : null, getMoreDropdown ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemTabCommonModule["default"].posRel, " ")
+  }, getMoreDropdown()) : null), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    dataId: "secThreadPanel",
+    onClick: onThreadClick,
+    className: _SubTabListItemTabCommonModule["default"].pointer
+  }, getTag ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "privateThread"
+  }, getTag())) : null, getDraft ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "draftThread",
+    className: "".concat(_ThreadListItemCommonModule["default"].draftText, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }, getDraft())) : null, getResponseDeleted ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: "".concat(_ThreadListItemCommonModule["default"].forumText, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }, getResponseDeleted())) : null, getDraftWithTime ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getDraftWithTime({
+    className: _ThreadListItemCommonModule["default"].time
+  }))) : null, needReadStatus ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getReadStatus({
+    readAllClass: {
+      iconClass: _ThreadListItemCommonModule["default"].readByAll
+    },
+    readToClass: {
+      iconClass: _ThreadListItemCommonModule["default"].read
+    },
+    deliveredClass: {
+      iconClass: _ThreadListItemCommonModule["default"].delivered
+    },
+    failedClass: {
+      iconClass: _ThreadListItemCommonModule["default"].failed
+    }
+  }))) : null, getRecipentsIcon ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemTabCommonModule["default"].dot)
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "is-dot": "true"
+  }, getRecipentsIcon({
+    className: "".concat(_ThreadListItemCommonModule["default"].recipientsCont, " ").concat(!isRecipients ? _ThreadListItemCommonModule["default"].recipientsHide : '')
+  }))) : null, getKeyWords ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemTabCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "is-dot": "true"
+  }, getKeyWords())) : null, getImScrollComp ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemTabCommonModule["default"].dot, " ").concat(_SubTabListItemTabCommonModule["default"].visibleOnHover)
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "is-dot": "true",
+    className: _SubTabListItemTabCommonModule["default"].visibleOnHover
+  }, getImScrollComp({
+    downArrow: {
+      iconClass: "".concat(_ThreadListItemCommonModule["default"].navigationArrow, " ").concat(_ThreadListItemCommonModule["default"].upArrow)
+    },
+    upArrow: {
+      iconClass: _ThreadListItemCommonModule["default"].navigationArrow
+    }
+  }))) : null))), getRecipents ? getRecipents() : null, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: onContainerCLick,
+    ref: containerRef,
+    className: _ThreadListItemCommonModule["default"].subjectWrapper
+  }, getAudioMsg ? getAudioMsg() : null, /*#__PURE__*/_react["default"].createElement(_VelocityAnimation["default"], {
+    name: "slideDown",
+    isActive: needToShowContent && !hasTelephonyAudio
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    "data-id": "content",
+    className: invertClass
+  }, getContent ? getContent({
+    className: _ThreadListItemCommonModule["default"].thrdPlain
+  }) : null, getTruncateOption ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _ThreadListItemCommonModule["default"].cntntOvrLd
+  }, getTruncateOption({
+    textProps: {
+      className: _ThreadListItemCommonModule["default"].cntntOvrLdSpn
+    },
+    linkProps: {
+      className: _ThreadListItemCommonModule["default"].cntOvrLdLnk
+    }
+  })) : null, getQuotedOption ? getQuotedOption({
+    textProps: {
+      className: _ThreadListItemCommonModule["default"].response
+    },
+    iconProps: {
+      iconClass: "".concat(_ThreadListItemCommonModule["default"].quotedIcon, " ").concat(showQuotedContent ? _ThreadListItemCommonModule["default"].isOpened : '')
+    }
+  }) : null, getQuotedContent ? getQuotedContent({
+    className: "".concat(_ThreadListItemCommonModule["default"].thrdPlain, " ").concat(channel === 'FEEDBACK' ? _ThreadListItemCommonModule["default"].quote : '')
+  }) : null, getVisitorOption ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _ThreadListItemCommonModule["default"].visitorInfo
+  }, getVisitorOption({
+    wrapperProps: {
+      className: !showVisitor ? _ThreadListItemCommonModule["default"].showVisitor : ''
+    },
+    innerProps: {
+      className: _ThreadListItemCommonModule["default"].hideVisitor
+    }
+  })) : null, getVisitorInfo ? getVisitorInfo({
+    className: "".concat(invertClass, " ").concat(_ThreadListItemCommonModule["default"].thrdPlain, " ").concat(_ThreadListItemCommonModule["default"].thrdPlainContent)
+  }) : null)), getSummary ? getSummary({
+    className: "".concat(invertClass, " ").concat(_ThreadListItemCommonModule["default"].thrdPlain, " ").concat(_ThreadListItemCommonModule["default"].thrdPlainContent, " ").concat(needToShowContent ? '' : _ThreadListItemCommonModule["default"].metaText)
+  }) : null, getAttachment ? getAttachment({
+    customWrapperProps: {
+      className: _ThreadListItemCommonModule["default"].attachmentWrapper
+    },
+    customAttahmentProps: {
+      size: 'medium'
+    }
+  }) : null), getReadReceiptsLookup ? getReadReceiptsLookup({
+    readAllClass: {
+      iconClass: _ThreadListItemCommonModule["default"].readByAll
+    },
+    readToClass: {
+      iconClass: _ThreadListItemCommonModule["default"].read
+    },
+    deliveredClass: {
+      iconClass: _ThreadListItemCommonModule["default"].delivered
+    },
+    failedClass: {
+      iconClass: _ThreadListItemCommonModule["default"].failed
+    }
+  }) : null);
+}

package/lib/layout/List/ThreadsList/ThreadListItemWeb.module.css

@@ -0,0 +1,35 @@
+.listWrapper,
+.peekListWrapper {
+    letter-spacing: 0.2px;
+    transition: var(--zd_transition3)
+}.listWrapper, .peekListWrapper {
+    padding-top: var(--zd_size15);
+    padding-bottom: var(--zd_size9);
+    margin: var(--zd_size6);
+    border-radius: var(--zd_size4)
+}
+[dir=ltr] .peekListWrapper {
+    padding-left: var(--zd_size35);
+    padding-right: var(--zd_size23);
+}
+[dir=rtl] .peekListWrapper {
+    padding-right: var(--zd_size35);
+    padding-left: var(--zd_size23);
+}
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size58);
+    padding-right: var(--zd_size23);
+}
+[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size58);
+    padding-left: var(--zd_size23);
+}
+.chnlIcn {
+  display: block
+}
+[dir=ltr] .chnlIcn {
+    margin-right: var(--zd_size14)
+}
+[dir=rtl] .chnlIcn {
+  margin-left: var(--zd_size14)
+}

package/lib/layout/List/ThreadsList/ThreadListItemWebUI.js

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ThreadListItemWebUI;
+var _react = _interopRequireDefault(require("react"));
+var _Layout = require("@zohodesk/components/es/Layout");
+var _VelocityAnimation = _interopRequireDefault(require("@zohodesk/components/es/VelocityAnimation/VelocityAnimation/VelocityAnimation"));
+var _ThreadListItemWebModule = _interopRequireDefault(require("./ThreadListItemWeb.module.css"));
+var _SubTabListItemWebCommonModule = _interopRequireDefault(require("../common/SubTabListItemWebCommon.module.css"));
+var _twoToneIconColorModule = _interopRequireDefault(require("../common/twoToneIconColor.module.css"));
+var _ThreadListItemCommonModule = _interopRequireDefault(require("./ThreadListItemCommon.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function ThreadListItemWebUI(props) {
+  var getAvatar = props.getAvatar,
+    getName = props.getName,
+    getSentiment = props.getSentiment,
+    getDraft = props.getDraft,
+    getTag = props.getTag,
+    getResponseDeleted = props.getResponseDeleted,
+    getDraftWithTime = props.getDraftWithTime,
+    getReadStatus = props.getReadStatus,
+    getBestAnswer = props.getBestAnswer,
+    getViaChannel = props.getViaChannel,
+    getViaCustomChannel = props.getViaCustomChannel,
+    getRecipentsIcon = props.getRecipentsIcon,
+    getKeyWords = props.getKeyWords,
+    getRatingImg = props.getRatingImg,
+    getChannelInfo = props.getChannelInfo,
+    getAttachmentIcon = props.getAttachmentIcon,
+    getMoreDropdown = props.getMoreDropdown,
+    getRecipents = props.getRecipents,
+    getAudioMsg = props.getAudioMsg,
+    getTruncateOption = props.getTruncateOption,
+    getQuotedOption = props.getQuotedOption,
+    getQuotedContent = props.getQuotedContent,
+    getVisitorOption = props.getVisitorOption,
+    getVisitorInfo = props.getVisitorInfo,
+    getSummary = props.getSummary,
+    getContent = props.getContent,
+    getAttachment = props.getAttachment,
+    isPeekView = props.isPeekView,
+    isPopupOpen = props.isPopupOpen,
+    isNightMode = props.isNightMode,
+    dataId = props.dataId,
+    id = props.id,
+    onThreadClick = props.onThreadClick,
+    threadRef = props.threadRef,
+    onContainerCLick = props.onContainerCLick,
+    containerRef = props.containerRef,
+    customList = props.customList,
+    authorType = props.authorType,
+    isRecipients = props.isRecipients,
+    channel = props.channel,
+    showVisitor = props.showVisitor,
+    needToShowContent = props.needToShowContent,
+    hasTelephonyAudio = props.hasTelephonyAudio,
+    isThreadOpened = props.isThreadOpened,
+    showQuotedContent = props.showQuotedContent,
+    getReadReceiptsLookup = props.getReadReceiptsLookup,
+    needReadStatus = props.needReadStatus,
+    ViewInLightDarkBg = props.ViewInLightDarkBg,
+    getImScrollComp = props.getImScrollComp,
+    getTheme = props.getTheme,
+    children = props.children;
+  var invertClass = isNightMode ? ViewInLightDarkBg ? _ThreadListItemCommonModule["default"].whiteBg : _ThreadListItemCommonModule["default"].invert : '';
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    "data-desk-mode": ViewInLightDarkBg ? 'default' : '',
+    "data-desk-theme": ViewInLightDarkBg ? getTheme : '',
+    className: "".concat(_SubTabListItemWebCommonModule["default"].wrapper, "\n                ").concat(isPeekView ? _ThreadListItemWebModule["default"].peekListWrapper : _ThreadListItemWebModule["default"].listWrapper, "\n                    ").concat(_ThreadListItemCommonModule["default"].normal, "\n                    ").concat(!isThreadOpened ? _ThreadListItemCommonModule["default"].threadShrink : '', "\n                    ").concat(customList),
+    "data-id": dataId,
+    key: id,
+    id: id,
+    ref: threadRef,
+    "data-a11y-focus": !isThreadOpened,
+    tabIndex: "0",
+    "aria-label": getContent
+  }, children ? children : null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    dataId: "secThreadPanel",
+    onClick: onThreadClick,
+    className: "".concat(_ThreadListItemCommonModule["default"].icnBtnSpace, " ").concat(_SubTabListItemWebCommonModule["default"].pointer)
+  }, getAvatar ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _ThreadListItemCommonModule["default"].avatarWrapper
+  }, getAvatar({
+    size: 'xsmall'
+  })) : null, getName ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, getName({
+    'is-dot': 'true',
+    className: "".concat(_ThreadListItemCommonModule["default"].agentName, " ").concat(authorType === 'AGENT' ? _ThreadListItemCommonModule["default"].agentNameHover : '', " ").concat(_SubTabListItemWebCommonModule["default"].dotted)
+  })) : null, getSentiment ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getSentiment({
+    iconSize: '9'
+  }))) : null, getDraft ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "draftThread",
+    className: "".concat(_ThreadListItemCommonModule["default"].draftText, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }, getDraft())) : null, getTag ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "privateThread"
+  }, getTag())) : null, getResponseDeleted ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: "".concat(_ThreadListItemCommonModule["default"].forumText, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }, getResponseDeleted())) : null, getDraftWithTime ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getDraftWithTime({
+    className: _ThreadListItemCommonModule["default"].time
+  }))) : null, needReadStatus ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getReadStatus({
+    readAllClass: {
+      iconClass: _ThreadListItemCommonModule["default"].readByAll
+    },
+    readToClass: {
+      iconClass: _ThreadListItemCommonModule["default"].read
+    },
+    deliveredClass: {
+      iconClass: _ThreadListItemCommonModule["default"].delivered
+    },
+    failedClass: {
+      iconClass: _ThreadListItemCommonModule["default"].failed
+    }
+  }))) : null, getBestAnswer ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    dataId: "Best Answer",
+    className: "".concat(_ThreadListItemCommonModule["default"].bestAns, " ").concat(_ThreadListItemCommonModule["default"].dotted)
+  }, getBestAnswer())) : null, getViaChannel ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: _ThreadListItemCommonModule["default"].forumText
+  }, getViaChannel({
+    className: _ThreadListItemCommonModule["default"].primaryText
+  }))) : null, getViaCustomChannel ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _SubTabListItemWebCommonModule["default"].dot
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: _ThreadListItemCommonModule["default"].forumText
+  }, getViaCustomChannel({
+    className: _ThreadListItemCommonModule["default"].primaryText
+  }))) : null, getRecipentsIcon ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemWebCommonModule["default"].dot, " ").concat(_SubTabListItemWebCommonModule["default"].visibleOnHover)
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "is-dot": "true"
+  }, getRecipentsIcon({
+    className: "".concat(_ThreadListItemCommonModule["default"].recipientsCont, " ").concat(_SubTabListItemWebCommonModule["default"].visibleOnHover, " ").concat(!isRecipients ? _ThreadListItemCommonModule["default"].recipientsHide : '')
+  }))) : null, getKeyWords ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemWebCommonModule["default"].dot, " ").concat(_SubTabListItemWebCommonModule["default"].visibleOnHover)
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "is-dot": "true",
+    className: _SubTabListItemWebCommonModule["default"].visibleOnHover
+  }, getKeyWords())) : null, getImScrollComp ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemWebCommonModule["default"].dot, " ").concat(_SubTabListItemWebCommonModule["default"].visibleOnHover)
+  }, "."), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "is-dot": "true",
+    className: _SubTabListItemWebCommonModule["default"].visibleOnHover
+  }, getImScrollComp({
+    downArrow: {
+      iconClass: "".concat(_ThreadListItemCommonModule["default"].navigationArrow, " ").concat(_ThreadListItemCommonModule["default"].upArrow)
+    },
+    upArrow: {
+      iconClass: _ThreadListItemCommonModule["default"].navigationArrow
+    }
+  }))) : null)), getRatingImg ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getRatingImg({
+    className: "".concat(_ThreadListItemCommonModule["default"].ratingImage, " ").concat(_ThreadListItemCommonModule["default"].icnBtnSpace, " ").concat(_SubTabListItemWebCommonModule["default"].visibleOnHover)
+  })) : null, getChannelInfo ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getChannelInfo({
+    iconClass: "".concat(_ThreadListItemWebModule["default"].chnlIcn, " ").concat(_twoToneIconColorModule["default"].primary)
+  })) : null, getAttachmentIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getAttachmentIcon({
+    innerProps: {
+      className: _ThreadListItemCommonModule["default"].attachCount
+    },
+    wrapperProps: {
+      className: "".concat(_ThreadListItemCommonModule["default"].attachIconWrapper, " ").concat(_ThreadListItemCommonModule["default"].icnBtnSpace)
+    }
+  })) : null, getMoreDropdown ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(_SubTabListItemWebCommonModule["default"].posRel, " ").concat(!isPopupOpen ? _SubTabListItemWebCommonModule["default"].visibleOnHover : '')
+  }, getMoreDropdown()) : null), getRecipents ? getRecipents() : null, /*#__PURE__*/_react["default"].createElement("div", {
+    onClick: onContainerCLick,
+    ref: containerRef,
+    className: _ThreadListItemCommonModule["default"].subjectWrapper
+  }, getAudioMsg ? getAudioMsg() : null, /*#__PURE__*/_react["default"].createElement(_VelocityAnimation["default"], {
+    name: "slideDown",
+    isActive: needToShowContent && !hasTelephonyAudio
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    "data-id": "content",
+    className: invertClass
+  }, getContent ? getContent({
+    className: _ThreadListItemCommonModule["default"].thrdPlain
+  }) : null, getTruncateOption ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _ThreadListItemCommonModule["default"].cntntOvrLd
+  }, getTruncateOption({
+    textProps: {
+      className: _ThreadListItemCommonModule["default"].cntntOvrLdSpn
+    },
+    linkProps: {
+      className: _ThreadListItemCommonModule["default"].cntOvrLdLnk
+    }
+  })) : null, getQuotedOption ? getQuotedOption({
+    textProps: {
+      className: _ThreadListItemCommonModule["default"].response
+    },
+    iconProps: {
+      iconClass: "".concat(_ThreadListItemCommonModule["default"].quotedIcon, " ").concat(showQuotedContent ? _ThreadListItemCommonModule["default"].isOpened : '')
+    }
+  }) : null, getQuotedContent ? getQuotedContent({
+    className: "".concat(_ThreadListItemCommonModule["default"].thrdPlain, " ").concat(channel === 'FEEDBACK' ? _ThreadListItemCommonModule["default"].quote : '')
+  }) : null, getVisitorOption ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _ThreadListItemCommonModule["default"].visitorInfo
+  }, getVisitorOption({
+    wrapperProps: {
+      className: !showVisitor ? _ThreadListItemCommonModule["default"].showVisitor : ''
+    },
+    innerProps: {
+      className: _ThreadListItemCommonModule["default"].hideVisitor
+    }
+  })) : null, getVisitorInfo ? getVisitorInfo({
+    className: "".concat(invertClass, " ").concat(_ThreadListItemCommonModule["default"].thrdPlain, " ").concat(_ThreadListItemCommonModule["default"].thrdPlainContent)
+  }) : null)), getSummary ? getSummary({
+    className: "".concat(invertClass, " ").concat(_ThreadListItemCommonModule["default"].thrdPlain, " ").concat(_ThreadListItemCommonModule["default"].thrdPlainContent, " ").concat(needToShowContent ? '' : _ThreadListItemCommonModule["default"].metaText)
+  }) : null, getAttachment ? getAttachment({
+    customWrapperProps: {
+      className: _ThreadListItemCommonModule["default"].attachmentWrapper
+    },
+    customAttahmentProps: {
+      size: 'medium'
+    }
+  }) : null), getReadReceiptsLookup ? getReadReceiptsLookup({
+    readAllClass: {
+      iconClass: _ThreadListItemCommonModule["default"].readByAll
+    },
+    readToClass: {
+      iconClass: _ThreadListItemCommonModule["default"].read
+    },
+    deliveredClass: {
+      iconClass: _ThreadListItemCommonModule["default"].delivered
+    },
+    failedClass: {
+      iconClass: _ThreadListItemCommonModule["default"].failed
+    }
+  }) : null);
+}

package/lib/layout/List/common/SubTabListItemTabCommon.module.css

@@ -0,0 +1,59 @@
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size20);
+    padding-right: var(--zd_size15);
+}[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size20);
+    padding-left: var(--zd_size15);
+}
+
+[dir=ltr] .avatarWrapper {
+    margin-right: var(--zd_size15);
+}
+
+[dir=rtl] .avatarWrapper {
+    margin-left: var(--zd_size15);
+}
+
+.secondaryWrapper {
+    line-height: var(--zd_size18);
+    margin-top: var(--zd_size2);
+}
+
+.notAccessible {
+    cursor: not-allowed
+}
+
+.dot {
+    color: var(--zdt_dot_text);
+    font-size: var(--zd_font_size16);
+    line-height: 0;
+    display: none;
+    transform: perspective(1px);
+    margin: 0 var(--zd_size6)
+}
+
+[is-dot='true']+.dot {
+    display: block
+}
+
+.posRel {
+    position: relative;
+}
+
+.dotted {
+    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.visibleOnHover {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.wrapper:hover .visibleOnHover {
+    opacity: 1;
+    visibility: visible;
+}
+
+.secondaryItem {
+    max-width: var(--zd_size132)
+}