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

package/es/layout/List/CommentsList/CommentListItemCommon.module.css

@@ -0,0 +1,143 @@
+.private {
+  background-color: var(--zdt_commentList_private_bg);
+  border: 1px solid var(--zdt_commentList_private_border);
+}
+.public {
+  background-color: var(--zdt_commentList_public_bg);
+  border: 1px solid var(--zdt_commentList_public_border);
+}
+.normal {
+  background-color: var(--zdt_commentList_normal_bg);
+  border: 1px solid var(--zdt_conversationList_border);
+}
+.publicIcon :global .path2:before {
+  color: var(--zdt_commentList_publicIcon_border);
+}
+.publicIcon :global .path1:before {
+  color: var(--zdt_commentList_publicIcon_bg);
+}
+.privateIcon :global .path2:before {
+  color: var(--zdt_commentList_privateIcon_border);
+}
+.privateIcon :global .path1:before {
+  color: var(--zdt_commentList_privateIcon_bg);
+}
+[dir=ltr] .avatarWrapper {
+  margin-right: var(--zd_size15);
+}
+[dir=rtl] .avatarWrapper {
+  margin-left: var(--zd_size15);
+}
+.agentName {
+  font-size: var(--zd_font_size14);
+  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_conversationList_agentName_text);
+}
+.agentNameHover:hover {
+  color: var(--zdt_conversationList_agent_text);
+  cursor: pointer;
+}
+.editTxt {
+  font-size: var(--zd_font_size12);
+  color: var(--zdt_conversationList_secondaryText);
+}
+.editAccess {
+  cursor: pointer;
+}
+.editAccess:hover {
+  color: var(--zdt_commentList_edit_hover_text);
+}
+.attachCount {
+  top: calc(var(--zd_size4) * -1);
+  color: var(--zdt_conversationList_attachCount_text);
+  position: relative;
+  font-size: var(--zd_font_size10);
+}
+.contentWrapper {
+  margin-bottom: var(--zd_size12);
+}
+.attachmentWrapper {
+  margin-top: var(--zd_size4);
+}
+
+.thrdPlain {
+  font-size: var(--zd_font_size14);
+  word-break: break-word;
+  composes: oflowx from '~@zohodesk/components/lib/common/common.module.css';
+  color: var(--zdt_conversationList_thread_text);
+}
+.thrdPlain table {
+  word-break: initial;
+}
+.thrdPlainContent {
+  line-height: var(--zd_size20);
+}
+.thrdPlain a {
+  color: var(--zdt_conversationList_primary_text);
+}
+.thrdPlain a:hover {
+  color: var(--zdt_conversationList_primary_hover_text);
+}
+.thrdPlain img[src*='/ImageDisplay'], .thrdPlain img[src*='/inlineImages'], .thrdPlain img[src*='/ViewMailAttachment.do'] {
+  cursor: pointer;
+}
+[dir=ltr] .thrdPlain blockquote {
+  margin: 0 0 0 var(--zd_size4);
+}
+[dir=rtl] .thrdPlain blockquote {
+  margin: 0 var(--zd_size4) 0 0;
+}
+.thrdPlain img {
+  max-width: 100%;
+}
+.whiteBg.thrdPlain a,
+.whiteBg .thrdPlain a {
+  color: var(--zdt_conversationList_agent_text);
+}
+.whiteBg.thrdPlain a:hover, 
+.whiteBg .thrdPlain a:hover {
+  color: var(--zdt_conversationList_agent_hover_text);
+}
+
+/* opposite colors applied in variables to show original theme colors for selection area in inverted threads */
+.invert .thrdPlain ::selection,
+.invert.thrdPlain ::selection,
+.invert .thrdPlain::selection,
+.invert.thrdPlain::selection {
+  color: var(--zdt_inverted_selection_text);
+}
+.invert .thrdPlain ::selection, .invert.thrdPlain ::selection, .invert .thrdPlain::selection, .invert.thrdPlain::selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert .thrdPlain ::-moz-selection,
+.invert.thrdPlain ::-moz-selection,
+.invert .thrdPlain::-moz-selection,
+.invert.thrdPlain::-moz-selection {
+  color: var(--zdt_inverted_selection_text);
+}
+.invert .thrdPlain ::-moz-selection, .invert.thrdPlain ::-moz-selection, .invert .thrdPlain::-moz-selection, .invert.thrdPlain::-moz-selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert .thrdPlain,
+.invert.thrdPlain {
+  filter: invert(1) hue-rotate(180deg);
+}
+/* <img> and <a> elements selection inverted again below. So, to avoid opposite colors in <img> & <a> area original colors variables used below */
+.invert .thrdPlain img::selection,
+.invert.thrdPlain img::selection {
+  color: var(--zdt_selection_text);
+}
+.invert .thrdPlain img::selection, .invert.thrdPlain img::selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert .thrdPlain img::-moz-selection,
+.invert.thrdPlain img::-moz-selection {
+  color: var(--zdt_selection_text);
+}
+.invert .thrdPlain img::-moz-selection, .invert.thrdPlain img::-moz-selection {
+  background-color: var(--zdt_selection_bg);
+}
+.invert img,
+.invert video {
+  filter: invert(1) hue-rotate(180deg);
+}

package/es/layout/List/CommentsList/CommentListItemFromTab.module.css

@@ -0,0 +1,50 @@
+.listWrapper,
+.mobileListWrapper {
+    letter-spacing: 0.2px;
+    transition: var(--zd_transition3)
+}.listWrapper, .mobileListWrapper {
+    padding-top: var(--zd_size12);
+    padding-bottom: var(--zd_size12);
+    margin: var(--zd_size8);
+    border-radius: var(--zd_size4)
+}
+[dir=ltr] .mobileListWrapper {
+    padding-left: var(--zd_size16);
+    padding-right: var(--zd_size16);
+}
+[dir=rtl] .mobileListWrapper {
+    padding-right: var(--zd_size16);
+    padding-left: var(--zd_size16);
+}
+[dir=ltr] .listWrapper {
+    padding-left: var(--zd_size20);
+    padding-right: var(--zd_size12);
+}
+[dir=rtl] .listWrapper {
+    padding-right: var(--zd_size20);
+    padding-left: var(--zd_size12);
+}
+  .lightAgentTxt {
+    font-size: var(--zd_font_size12);
+    color: var(--zdt_conversationList_secondaryText);
+  }
+  [dir=ltr] .lightAgentTxt {
+    margin-left: var(--zd_size4);
+  }
+  [dir=rtl] .lightAgentTxt {
+    margin-right: var(--zd_size4);
+  }
+  .attachIconWrapper {
+    composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  }
+  [dir=ltr] .attachIconWrapper {
+    margin-right: var(--zd_size8);
+    margin-left: var(--zd_size8);
+  }
+  [dir=rtl] .attachIconWrapper {
+    margin-left: var(--zd_size8);
+    margin-right: var(--zd_size8);
+  }
+.time {
+  font-size: var(--zd_size11)
+}

package/es/layout/List/CommentsList/CommentListItemFromTabUI.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import tabStyle from './CommentListItemFromTab.module.css';
+import commonTabStyle from '../common/SubTabListItemTabCommon.module.css';
+import commonCommentStyle from './CommentListItemCommon.module.css';
+export default function CommentListItemFromTabUI(props) {
+  const {
+    isPeekView,
+    isPublic,
+    dataId,
+    getAvatar,
+    getName,
+    getLightAgent,
+    getTag,
+    getTime,
+    getEdit,
+    getAttachmentIcon,
+    getAttachment,
+    getMoreDropdown,
+    getContent,
+    from,
+    hasPrivacyMode,
+    hasEditHistoryPermission,
+    isPopupOpen,
+    isNightMode,
+    onContentWrapperClick,
+    contentWrapperRef,
+    key,
+    id,
+    customList,
+    isMobile,
+    ViewInLightDarkBg,
+    getTheme,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-desk-mode": ViewInLightDarkBg ? 'default' : '',
+    "data-desk-theme": ViewInLightDarkBg ? getTheme : '',
+    className: `${commonTabStyle.wrapper}
+                ${isMobile ? tabStyle.mobileListWrapper : tabStyle.listWrapper}
+                    ${hasPrivacyMode ? isPublic ? commonCommentStyle.public : commonCommentStyle.private : commonCommentStyle.normal}
+                    ${customList}`,
+    "data-id": dataId,
+    key: key,
+    id: id
+  }, children ? children : null, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: getContent || getAttachment ? commonCommentStyle.contentWrapper : ''
+  }, getAvatar ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    className: commonCommentStyle.avatarWrapper
+  }, getAvatar({
+    size: 'xsmall',
+    iconColor: hasPrivacyMode ? isPublic ? commonCommentStyle.publicIcon : commonCommentStyle.privateIcon : ''
+  })) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    "data-a11y-focus": true,
+    onClick: onContentWrapperClick
+  }, getName ? /*#__PURE__*/React.createElement(React.Fragment, null, getName({
+    'is-dot': 'true',
+    className: `${commonCommentStyle.agentName} ${from != 'editHistory' ? commonCommentStyle.agentNameHover : ''} ${commonTabStyle.dotted}`
+  })) : null, getLightAgent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), getLightAgent({
+    'is-dot': 'true',
+    className: `${tabStyle.lightAgentTxt} ${commonTabStyle.dotted}`
+  })) : null)), getAttachmentIcon ? /*#__PURE__*/React.createElement(Box, null, getAttachmentIcon({
+    innerProps: {
+      className: commonCommentStyle.attachCount
+    },
+    wrapperProps: {
+      className: tabStyle.attachIconWrapper
+    }
+  })) : null, getMoreDropdown ? /*#__PURE__*/React.createElement(Box, {
+    className: `${commonTabStyle.posRel} ${!isPopupOpen ? commonTabStyle.floatingWrapper : ''}`
+  }, getMoreDropdown()) : null), /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, getTag ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getTag())) : null, getTime ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: commonTabStyle.dotted
+  }, getTime(isMobile ? {
+    textClass: tabStyle.time
+  } : ''))) : null, getEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonTabStyle.dot
+  }, "."), getEdit({
+    'is-dot': 'true',
+    className: `${commonCommentStyle.editTxt} ${hasEditHistoryPermission ? commonCommentStyle.editAccess : ''} ${commonTabStyle.dotted}`
+  })) : null))), /*#__PURE__*/React.createElement("div", {
+    onClick: onContentWrapperClick,
+    ref: contentWrapperRef
+  }, getContent ? getContent({
+    className: `${isNightMode ? ViewInLightDarkBg ? commonCommentStyle.whiteBg : commonCommentStyle.invert : ''} ${commonCommentStyle.thrdPlain}`
+  }) : null, getAttachment ? getAttachment({
+    customWrapperClass: {
+      className: commonCommentStyle.attachmentWrapper
+    },
+    size: 'small'
+  }) : null));
+}

package/es/layout/List/CommentsList/CommentListItemWeb.module.css

@@ -0,0 +1,45 @@
+.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);
+}
+  .lightAgentTxt {
+    font-size: var(--zd_font_size11);
+    color: var(--zdt_conversationList_secondaryText);
+  }
+  [dir=ltr] .lightAgentTxt {
+    margin-left: var(--zd_size4);
+  }
+  [dir=rtl] .lightAgentTxt {
+    margin-right: var(--zd_size4);
+  }
+  [dir=ltr] .icnBtnSpace {
+    margin-right: var(--zd_size8);
+  }
+  [dir=rtl] .icnBtnSpace {
+    margin-left: var(--zd_size8);
+  }
+  .attachIconWrapper {
+    composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  }

package/es/layout/List/CommentsList/CommentListItemWebUI.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import webStyle from './CommentListItemWeb.module.css';
+import commonWebStyle from '../common/SubTabListItemWebCommon.module.css';
+import commonCommentStyle from './CommentListItemCommon.module.css';
+export default function CommentListItemWebUI(props) {
+  const {
+    isPeekView,
+    isPublic,
+    dataId,
+    getAvatar,
+    getName,
+    getLightAgent,
+    getTag,
+    getTime,
+    getEdit,
+    getAttachmentIcon,
+    getAttachment,
+    getMoreDropdown,
+    getContent,
+    from,
+    hasPrivacyMode,
+    hasEditHistoryPermission,
+    isPopupOpen,
+    isNightMode,
+    ViewInLightDarkBg,
+    onContentWrapperClick,
+    contentWrapperRef,
+    key,
+    id,
+    customList,
+    getTheme,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-desk-mode": ViewInLightDarkBg ? 'default' : '',
+    "data-desk-theme": ViewInLightDarkBg ? getTheme : '',
+    className: `${commonWebStyle.wrapper}
+                ${isPeekView ? webStyle.peekListWrapper : webStyle.listWrapper}
+                    ${hasPrivacyMode ? isPublic ? commonCommentStyle.public : commonCommentStyle.private : commonCommentStyle.normal}
+                    ${customList}`,
+    "data-id": dataId,
+    key: key,
+    id: id,
+    tabIndex: "0",
+    "aria-label": getContent
+  }, children ? children : null, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: getContent || getAttachment ? commonCommentStyle.contentWrapper : ''
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false
+  }, getAvatar ? /*#__PURE__*/React.createElement(Box, {
+    className: commonCommentStyle.avatarWrapper
+  }, getAvatar({
+    size: 'xsmall',
+    iconColor: hasPrivacyMode ? isPublic ? commonCommentStyle.publicIcon : commonCommentStyle.privateIcon : ''
+  })) : null, getName ? /*#__PURE__*/React.createElement(React.Fragment, null, getName({
+    'is-dot': 'true',
+    className: `${commonCommentStyle.agentName} ${from != 'editHistory' ? commonCommentStyle.agentNameHover : ''} ${commonWebStyle.dotted}`
+  })) : null, getLightAgent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonWebStyle.dot
+  }, "."), getLightAgent({
+    'is-dot': 'true',
+    className: `${webStyle.lightAgentTxt} ${commonWebStyle.dotted}`
+  })) : null, getTag ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonWebStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true"
+  }, getTag())) : null, getTime ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonWebStyle.dot
+  }, "."), /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    "is-dot": "true",
+    className: commonWebStyle.dotted
+  }, getTime())) : null, getEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    className: commonWebStyle.dot
+  }, "."), getEdit({
+    'is-dot': 'true',
+    className: `${commonCommentStyle.editTxt} ${hasEditHistoryPermission ? commonCommentStyle.editAccess : ''} ${commonWebStyle.dotted}`
+  })) : null)), getAttachmentIcon ? /*#__PURE__*/React.createElement(Box, null, getAttachmentIcon({
+    innerProps: {
+      className: commonCommentStyle.attachCount
+    },
+    wrapperProps: {
+      className: `${webStyle.attachIconWrapper} ${webStyle.icnBtnSpace}`
+    }
+  })) : null, getMoreDropdown ? /*#__PURE__*/React.createElement(Box, {
+    className: `${commonWebStyle.posRel} ${!isPopupOpen ? commonWebStyle.visibleOnHover : ''}`
+  }, getMoreDropdown()) : null), /*#__PURE__*/React.createElement("div", {
+    onClick: onContentWrapperClick,
+    ref: contentWrapperRef
+  }, getContent ? getContent({
+    className: `${isNightMode ? ViewInLightDarkBg ? commonCommentStyle.whiteBg : commonCommentStyle.invert : ''} ${commonCommentStyle.thrdPlain}`
+  }) : null, getAttachment ? getAttachment({
+    customWrapperClass: {
+      className: commonCommentStyle.attachmentWrapper
+    },
+    size: from == 'editHistory' || from === 'leftPanel' ? 'small' : 'medium'
+  }) : null));
+}