@zohodesk/dot 1.0.0-temp-187.14 → 1.0.0-temp-200.5

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,12 +48,8 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys,
-      customProps
+      i18nKeys
     } = this.props;
-    const {
-      ToggleDropDownProps = {}
-    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
@@ -88,8 +84,7 @@ class DepartmentDropDown extends Component {
       getNextOptions: getNextOptions,
       isNextOptions: isNextOptions,
       onSearch: onSearch,
-      needSearchFetching: needSearchFetching,
-      ...ToggleDropDownProps
+      needSearchFetching: needSearchFetching
     });
   }
 

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,6 +3,5 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {},
-  customProps: {}
+  i18nKeys: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,8 +20,5 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
-  }),
-  customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/status/StatusListItem/StatusListItem.module.css

@@ -36,8 +36,9 @@
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue {
-  composes: lineClamp from '~@zohodesk/components/lib/common/common.module.css';
+.multiLineValue{
+  word-break: break-word;
+  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -45,6 +46,7 @@
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
+
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
@@ -88,9 +90,8 @@
 }
 /* Status Type */
 .statusType {
-  height: 1em ;
-  width: 1em ;
-  font-size: var(--zd_font_size8) ;
+  width: var(--zd_size8) ;
+  height: var(--zd_size8) ;
   border-radius: 50%;
 }
 [dir=ltr] .statusType {

package/es/utils/General.js

@@ -43,4 +43,26 @@ export function formatPhoneUrl(phone) {
 
   return phone;
 }
-export const DUMMY_OBJECT = Object.freeze({});
+export const DUMMY_OBJECT = Object.freeze({});
+export function getBrowserWithVersion() {
+  const userAgent = navigator.userAgent;
+  let tempMatch;
+  let browserMatch = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (userAgent.toLowerCase().indexOf('edge') !== -1) {
+    return userAgent.substring(userAgent.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(browserMatch[1])) {
+    tempMatch = /\brv[ :]+(\d+(\.\d+)?)/g.exec(userAgent) || [];
+    return `IE ${tempMatch[1] || ''}`;
+  }
+
+  browserMatch = browserMatch[2] ? [browserMatch[1], browserMatch[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tempMatch = userAgent.match(/version\/([\.\d]+)/i)) !== null) {
+    browserMatch[2] = tempMatch[1];
+  }
+
+  return browserMatch.join(' ');
+}

package/lib/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top:0 
+  top: 0 
 }
 
 [dir=ltr] .disableLayer {
-  left:0 
+  left: 0 
 }
 
 [dir=rtl] .disableLayer {
-  right:0 
+  right: 0 
 }
 
 .attachmentHover {
@@ -66,6 +66,10 @@
   height: var(--zd_size40) ;
 }
 
+.attachleft {
+  padding: var(--zd_size3) ;
+}
+
 [dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }

package/lib/AttachmentViewer/Attachment.js

@@ -3,15 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getAttachmentIconDetails = getAttachmentIconDetails;
 exports.getExtensionFromFileName = getExtensionFromFileName;
 exports.isAudioFile = isAudioFile;
 exports.isBrowserSupportedFile = isBrowserSupportedFile;
+exports.isDocsFile = isDocsFile;
+exports.isEmailFile = isEmailFile;
+exports.isImageFile = isImageFile;
+exports.isPdfFile = isPdfFile;
+exports.isPresentationFile = isPresentationFile;
+exports.isSheetFile = isSheetFile;
+exports.isVideoFile = isVideoFile;
+
+var _General = require("../utils/General");
+
 var UNASSIGNED = 'Unassigned';
 var BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
 
-function isAudioFile(fileName) {
-  var extension = getExtensionFromFileName(fileName);
-  return /mp3|wav|ogg/i.test(extension);
+function isAudioFile(extension) {
+  return /mp3|wav|ogg|oga|m4a|weba|opus|m4b|webma|aac/i.test(extension);
+}
+
+function isVideoFile(extension) {
+  return /mp4|webm|ogg/i.test(extension);
+}
+
+function isPdfFile(extension) {
+  return /pdf/i.test(extension);
+}
+
+function isDocsFile(extension) {
+  return /docx|doc|docm|rtf|odt|dot|dotm|dotx|pages/i.test(extension);
+}
+
+function isSheetFile(extension) {
+  return /xlsx|numbers/i.test(extension);
+}
+
+function isPresentationFile(extension) {
+  return /pptx|ppt|pps|ppsx|key/i.test(extension);
+}
+
+function isEmailFile(extension) {
+  return /eml|msg/i.test(extension);
+}
+
+function isImageFile(extension) {
+  return /jpeg|jpg|png|gif|bmp|ico/i.test(extension);
 }
 
 function getExtensionFromFileName(fileName) {
@@ -25,4 +63,189 @@ function getExtensionFromFileName(fileName) {
 function isBrowserSupportedFile(fileName) {
   var extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
+}
+
+function getAttachmentIconDetails(fileName, size) {
+  var extension = getExtensionFromFileName(fileName);
+  var browserName = (0, _General.getBrowserWithVersion)().toLowerCase() || '';
+  var OSName = navigator.platform.toLowerCase() || '';
+
+  switch (extension) {
+    case 'jpeg':
+    case 'jpg':
+    case 'png':
+    case 'apng':
+    case 'gif':
+    case 'bmp':
+    case 'tiff':
+    case 'tif':
+    case 'ico':
+    case 'svg':
+    case 'heic':
+    case 'webp':
+      return {
+        iconName: 'ZD-EF-fileImage',
+        iconSize: size
+      };
+
+    case 'txt':
+      return {
+        iconName: 'ZD-GN-fileDoc',
+        iconSize: size
+      };
+
+    case 'pdf':
+      return {
+        iconName: 'ZD-EF-filePdf',
+        iconSize: size
+      };
+
+    case 'html':
+    case 'htm':
+    case 'xhtml':
+      if (browserName.indexOf('chrome') !== -1 || browserName.indexOf('safari') !== -1) {
+        return {
+          iconName: 'ZD-EF-fileXml',
+          iconSize: size
+        };
+      } else if (browserName.indexOf('ie') !== -1 || browserName.indexOf('edge') !== -1) {
+        return {
+          iconName: 'ZD-EF-explorer',
+          iconSize: size
+        };
+      }
+
+      return {
+        iconName: 'ZD-EF-firebox',
+        iconSize: size
+      };
+
+    case 'ppt':
+    case 'pps':
+    case 'odp':
+    case 'sxi':
+    case 'pptx':
+    case 'ppsx':
+    case 'pot':
+    case 'potx':
+    case 'key':
+      return {
+        iconName: 'ZD-GN-filePpt',
+        iconSize: size
+      };
+
+    case 'rar':
+    case 'jar':
+    case 'zip':
+      return {
+        iconName: 'ZD-EF-fileZip',
+        iconSize: size
+      };
+
+    case 'doc':
+    case 'docx':
+    case 'sxw':
+    case 'odt':
+    case 'docm':
+    case 'dot':
+    case 'dotm':
+    case 'dotx':
+    case 'rtf':
+    case 'pages':
+      if (OSName.indexOf('mac') !== -1 || OSName.indexOf('linux') !== -1) {
+        return {
+          iconName: 'ZD-EF-fileOffice',
+          iconSize: size
+        };
+      }
+
+      return {
+        iconName: 'ZD-EF-fileWord',
+        iconSize: size
+      };
+
+    case 'xml':
+      return {
+        iconName: 'ZD-EF-fileXml',
+        iconSize: size
+      };
+
+    case 'xls':
+    case 'xlsx':
+    case 'xlsm':
+    case 'xlsb':
+    case 'sxc':
+    case 'ods':
+    case 'csv':
+    case 'tsv':
+    case 'numbers':
+      return {
+        iconName: 'ZD-GN-fileSheet',
+        iconSize: size
+      };
+
+    case 'ics':
+      return {
+        iconName: 'ZD-TK-event',
+        iconSize: size
+      };
+
+    case 'exe':
+      return {
+        iconName: 'ZD-EF-exe',
+        iconSize: size
+      };
+
+    case 'sh':
+    case 'bin':
+      return {
+        iconName: 'ZD-EF-linux',
+        iconSize: size
+      };
+
+    case 'css':
+      return {
+        iconName: 'ZD-EF-clrCss',
+        iconSize: size
+      };
+
+    case 'mp3':
+    case 'wav':
+    case 'wma':
+    case 'aac':
+    case 'm4r':
+    case 'ogg':
+    case 'opus':
+      return {
+        iconName: 'ZD-EF-fileMp3',
+        iconSize: size
+      };
+
+    case 'mp4':
+    case 'mkv':
+    case 'mov':
+    case 'mpeg':
+    case 'flv':
+    case 'wmv':
+    case 'avi':
+    case 'webm':
+    case 'ogv':
+      return {
+        iconName: 'ZD-EF-fileMp4',
+        iconSize: size
+      };
+
+    case 'eml':
+    case 'msg':
+      return {
+        iconName: 'ZD-GN-fileMail',
+        iconSize: size
+      };
+
+    default:
+      return {
+        iconName: 'ZD-GN-fileUnknown',
+        iconSize: size
+      };
+  }
 }

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -21,8 +21,12 @@ var _Avatar = _interopRequireDefault(require("@zohodesk/components/lib/Avatar/Av
 
 var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
 
+var _Typography = _interopRequireDefault(require("@zohodesk/components/lib/Typography/Typography"));
+
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
+var _Button = _interopRequireDefault(require("@zohodesk/components/es/Button/Button"));
+
 var _AttachmentImage = _interopRequireDefault(require("./AttachmentImage"));
 
 var _Link = _interopRequireDefault(require("../Link/Link"));
@@ -35,11 +39,9 @@ var _Attachment = require("./Attachment");
 
 var _General = require("../utils/General");
 
-var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
-
 var _utils = require("./utils");
 
-var _audio_thumbnail = _interopRequireDefault(require("../../images/audio_thumbnail.png"));
+var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -117,6 +119,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _this.getUpdateDataList = _this.getUpdateDataList.bind(_assertThisInitialized(_this));
     _this.zoomMaintain = _this.zoomMaintain.bind(_assertThisInitialized(_this));
     _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
+    _this.getPreviewIconData = _this.getPreviewIconData.bind(_assertThisInitialized(_this));
+    _this.renderIframe = _this.renderIframe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -167,9 +171,11 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var selectedAttachmentViewUrl = selectedAttachment.viewUrl;
       var selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
       var selectedAttachmentName = selectedAttachment.name;
+      var selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
       (0, _utils.checkFileSourcesValidation)({
         fileName: selectedAttachmentName,
-        viewURL: selectedAttachmentViewUrl
+        viewURL: selectedAttachmentViewUrl,
+        previewUrl: selectedAttachmentPreviewUrl
       }).then(function (fileSourceValidation) {
         var isViewURLValid = fileSourceValidation.isViewURLValid,
             canZoom = fileSourceValidation.canZoom;
@@ -332,6 +338,32 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }])
       };
     }
+  }, {
+    key: "getPreviewIconData",
+    value: function getPreviewIconData(name, size, dataId) {
+      // const fileDetails = getAttachmentIconDetails(name, size);
+      var fileUnknown = {
+        iconName: 'ZD-GN-fileUnknown',
+        iconSize: '40'
+      };
+      var fileDetails = name ? (0, _Attachment.getAttachmentIconDetails)(name, size) : fileUnknown;
+      var iconName = fileDetails.iconName,
+          iconSize = fileDetails.iconSize;
+      return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        iconClass: _AttachmentViewerModule["default"].prevFooterIcon,
+        name: iconName,
+        size: iconSize,
+        "data-id": dataId
+      });
+    }
+  }, {
+    key: "renderIframe",
+    value: function renderIframe(iframeSrc) {
+      return /*#__PURE__*/_react["default"].createElement("iframe", _extends({
+        src: iframeSrc,
+        className: _AttachmentViewerModule["default"].previewFrame
+      }, this.props.customProps.iframeProps));
+    }
   }, {
     key: "imgPreviewView",
     value: function imgPreviewView() {
@@ -345,7 +377,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           isPreviewAttachmentValid = _this$state3.isPreviewAttachmentValid;
       var _this$props = this.props,
           maintainZoom = _this$props.maintainZoom,
-          dataId = _this$props.dataId;
+          dataId = _this$props.dataId,
+          i18nKeys = _this$props.i18nKeys,
+          renderUnSupportedElement = _this$props.renderUnSupportedElement;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -383,16 +417,25 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             _data$customClass = data.customClass,
             customClass = _data$customClass === void 0 ? {} : _data$customClass,
             _data$customProps = data.customProps,
-            customProps = _data$customProps === void 0 ? {} : _data$customProps;
+            customProps = _data$customProps === void 0 ? {} : _data$customProps,
+            previewurl = data.previewurl,
+            type = data.type;
         var _customProps$audioPro = customProps.audioProps,
             audioProps = _customProps$audioPro === void 0 ? {} : _customProps$audioPro,
             _customProps$imagePro = customProps.imageProps,
-            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro;
+            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro,
+            _customProps$videoPro = customProps.videoProps,
+            videoProps = _customProps$videoPro === void 0 ? {} : _customProps$videoPro,
+            _customProps$iframePr = customProps.iframeProps,
+            iframeProps = _customProps$iframePr === void 0 ? {} : _customProps$iframePr;
         var _customClass$customIm = customClass.customImageClass,
             customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
             _customClass$customCh = customClass.customChildrenClass,
             customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
         var retainZoom = canZoom && selectedIndex == i && maintainZoom;
+        var frameOrigin = (0, _utils.getFrameOrigin)();
+        var iframeSrc = "".concat(previewurl, "&frameorigin=").concat(frameOrigin);
+        var extension = (0, _Attachment.getExtensionFromFileName)(name);
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           className: _AttachmentViewerModule["default"].imgBox,
           id: "imgBox".concat(i),
@@ -403,29 +446,49 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _AttachmentViewerModule["default"].imgRef,
           id: "imgPreviewRef".concat(i)
-        }, (0, _Attachment.isAudioFile)(name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", _extends({
-          autoPlay: true,
+        }, selectedIndex == i && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (0, _Attachment.isAudioFile)(extension) ? /*#__PURE__*/_react["default"].createElement("audio", _extends({
+          controls: true,
+          className: _AttachmentViewerModule["default"].zoomIn,
+          "data-id": "".concat(dataId, "_audioPreview"),
+          "data-test-id": "".concat(dataId, "_audioPreview")
+        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+          src: previewurl,
+          type: "audio/".concat(extension)
+        })) : (0, _Attachment.isVideoFile)(extension) ? /*#__PURE__*/_react["default"].createElement("video", _extends({
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_videoPreview"),
           "data-test-id": "".concat(dataId, "_videoPreview")
-        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+        }, videoProps), /*#__PURE__*/_react["default"].createElement("source", {
           src: viewUrl,
-          type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(name))
-        })) : null : /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          type: "video/".concat(extension)
+        })) : (0, _Attachment.isImageFile)(extension) ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
           customClass: {
-            customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, "\n                    ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
+            customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, " ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
             customChildrenClass: customChildrenClass
           },
           src: viewUrl,
           onClick: isPreviewAttachmentValid ? isZoomed ? _this5.zoomOut.bind(_this5, i) : function (e) {
-            _this5.zoomIn(e, i, true);
+            return _this5.zoomIn(e, i, true);
           } : undefined,
           alt: name,
           dataId: dataId,
           id: "img".concat(i),
           isCover: false
-        }, imageProps), children)));
+        }, imageProps), children) : type === "document" && previewurl != null ? _this5.renderIframe(iframeSrc) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: _AttachmentViewerModule["default"].previewNone
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: _AttachmentViewerModule["default"].fileTypeImg
+        }, _this5.getPreviewIconData(name, '70')), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          $ui_size: "20",
+          $ui_weight: "semibold"
+        }, i18nKeys.previewUnsupportedText), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          href: data.href,
+          className: _AttachmentViewerModule["default"].downloadLink
+        }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          palette: "primaryFilled",
+          text: i18nKeys.downloadText
+        }))))));
       });
     }
   }, {
@@ -451,7 +514,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
-      var selectedImgUrl = selectedAttachment.viewUrl;
+      var selectedImgUrl = selectedAttachment.previewurl || selectedAttachment.viewUrl;
       var downloadUrl = selectedAttachment.downloadUrl;
       var authorHref;
       var authorName;
@@ -666,10 +729,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
               _customClass$customCh2 = customClass.customChildrenClass,
               customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
-          thumbnail = (0, _Attachment.isAudioFile)(name) ? thumbnail || _audio_thumbnail["default"] : thumbnail; //fallback thumbnail for audio
-
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : ''),
+            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : '', " ").concat((0, _Attachment.isImageFile)(name) || thumbnail ? '' : _AttachmentViewerModule["default"].previewIconDiv),
             key: index,
             onClick: _this6.changeSelectedIndex.bind(_this6, index),
             eleRef: function eleRef(el) {
@@ -677,7 +738,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             },
             dataId: "attachPreviewList",
             "data-title": name
-          }, /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          }, (0, _Attachment.isImageFile)(name) || thumbnail ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
             src: thumbnail || viewUrl,
             size: "small",
             alt: name,
@@ -686,7 +747,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
             },
             dataId: dataId
-          }, customProps), children));
+          }, customProps), children) : _this6.getPreviewIconData(name, '40'));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
           onClick: _this6.togglePViewList,

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: 1.6;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -230,14 +230,10 @@
     transform: rotateX(0deg);
 }
 
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
-    background-size: 100% 100%;
-}
-
-.isAudio .image {
-    opacity: 0;
+.previewFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
 }
 
 .video {
@@ -362,4 +358,54 @@
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin-bottom: var(--zd_size30) ;
+}
+
+.previewNone {
+    color: var(--zdt_attachmentviewer_title_text);
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    display: inline-block;
+    padding-top: var(--zd_size15) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon,
+.prevIcon {
+    color: var(--zdt_attachmentviewer_title_text);
+}
+
+.prevFooterIcon, .prevIcon {
+    padding: var(--zd_size2) ;
+    margin: auto ;
+}
+
+.prevFooterIcon::before, .prevIcon::before {
+    background-color: var(--dot_mirror);
+}
+
+[dir=ltr] .prevIcon::before {
+    border-radius: 10px 30px 10px 10px;
+}
+
+[dir=rtl] .prevIcon::before {
+    border-radius: 30px 10px 10px 10px;
+}
+
+[dir=ltr] .prevFooterIcon::before {
+    border-radius: 5px 17px 5px 5px
+}
+
+[dir=rtl] .prevFooterIcon::before {
+    border-radius: 17px 5px 5px 5px
 }