@zohodesk/dot 1.0.0-temp-213 → 1.0.0-temp-214

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -87,15 +88,12 @@ export default class CheckBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      infoText: infoText,
-      customClass: `${!isDirectCol ? style.checkboxText : ''} ${!isDirectCol ? style[`lineClamp_${lineClamp}`] : ''} ${isReadOnly || isDisabled ? style.cbTextReadonly : style.cbTextPointer} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      title: labelName,
+      isRequired: isMandatory,
+      isInlineField: true,
+      customStyle: labelCustomClass,
+      testId: id,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       onClick: !removeEvent ? this.handleLabelClick : null,
-      variant: isDirectCol ? 'default' : 'primary',
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }));
     return /*#__PURE__*/React.createElement("div", {

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -129,11 +130,10 @@ export default class CurrencyField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/form/fields/DateField/DateField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import DateWidget from '@zohodesk/components/lib/DateTime/DateWidget';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -133,14 +134,12 @@ export default class DateField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
       htmlFor: getAriaId,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: labelName
+      testId: labelName,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, isLocked && lockedValueText ? /*#__PURE__*/React.createElement("div", {

package/es/form/fields/Fields.module.css

@@ -7,6 +7,9 @@
   position: relative;
   min-height: var(--zd_size25) ;
 }
+.fieldMargin_large {
+  margin-top: var(--zd_size10) ;
+}
 .fieldMargin_medium {
   margin-top: var(--zd_size5) ;
 }

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -145,13 +146,11 @@ export default class MultiSelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+      isRequired: isMandatory // customStyle={style.fieldLabel}
       ,
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId,
+      testId: id,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement(MultiSelect, {
       options: options,

package/es/form/fields/RadioField/RadioField.js

@@ -121,7 +121,7 @@ export default class RadioField extends PureComponent {
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     }), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+      className: `${style.fieldContainer} ${isBoxStyle ? style.radiosWrapper : ''} ${labelName ? isBoxStyle ? style.fieldMargin_large : style.fieldMargin_medium : ''} ${style.radioContainer}`
     }, options.map((option, index) => {
       let {
         text,

package/es/form/fields/SelectField/SelectField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Select from '@zohodesk/components/lib/Select/Select';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -115,13 +116,11 @@ export default class SelectField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps,
-      id: uniqueId
+      testId: uniqueId,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
     }, /*#__PURE__*/React.createElement(Select, {

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Box } from '@zohodesk/components/lib/Layout';
-import Label from '@zohodesk/components/lib/Label/Label';
+import { Box } from '@zohodesk/components/lib/Layout'; // import Label from '@zohodesk/components/lib/Label/Label';
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import TagsMultiSelect from "../TagsMultiSelect/TagsMultiSelect";
@@ -206,13 +207,10 @@ const TagsMultiSelectField = props => {
     }
   }, /*#__PURE__*/React.createElement(Label, {
     text: labelName,
-    title: labelName,
-    id: id,
-    size: labelSize,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${fieldStyle.fieldLabel} ${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
-    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    isRequired: isMandatory,
     htmlFor: htmlId,
+    testId: id,
+    customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
     ...LabelProps
   }), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
     dataId: `${dataId}_tagCount`,

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -103,13 +104,12 @@ export default class TextBoxField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
+      testId: labelName,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      ...LabelProps,
-      id: labelName
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {

package/es/form/fields/TextareaField/TextareaField.js

@@ -3,8 +3,9 @@ import React, { PureComponent } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
+// import Label from '@zohodesk/components/lib/Label/Label';
 
-import Label from '@zohodesk/components/lib/Label/Label';
+import Label from '@zohodesk/components/es/v1/Label/Label';
 import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
 import ValidationMessage from "../ValidationMessage/ValidationMessage";
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
@@ -131,12 +132,11 @@ export default class TextareaField extends PureComponent {
       renderProps: renderLabelProps
     }, /*#__PURE__*/React.createElement(Label, {
       text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      isRequired: isMandatory,
+      customStyle: labelCustomClass,
+      testId: id,
       htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+      customId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       ...LabelProps
     })), /*#__PURE__*/React.createElement("div", {
       className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

package/es/lookup/Lookup/Lookup.js

@@ -56,6 +56,7 @@ export default class Lookup extends Component {
       needFocusScope,
       customProps,
       isMinHeight,
+      containerClass,
       lookupClass
     } = this.props;
     const {
@@ -93,7 +94,7 @@ export default class Lookup extends Component {
     }, /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
-      className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`
+      className: `${isMinHeight ? style.wrapper : style.coverwrap} ${style.containerWidth} ${containerClass}`
     }, children));
     return /*#__PURE__*/React.createElement(FreezeLayer, {
       align: "horizontal",

package/es/lookup/Lookup/Lookup.module.css

@@ -19,6 +19,10 @@
   margin: auto ;
 }
 
+.containerWidth {
+  width: 100% ;
+}
+
 /* Size */
 .smallSize {
   max-width: var(--zd_size470) ;
@@ -35,10 +39,11 @@
 .largeSize {
   max-width: 70% ;
 }
+
 .xlargeSize {
   max-width: 80% ;
 }
 
 .fullSize {
   max-width: 90% ;
-}
+}

package/es/lookup/Lookup/props/propTypes.js

@@ -20,5 +20,6 @@ export const propTypes = {
   onClick: PropTypes.func,
   onClose: PropTypes.func,
   isMinHeight: PropTypes.bool,
+  containerClass: PropTypes.string,
   lookupClass: PropTypes.string
 };

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,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getAttachmentIconDetails = getAttachmentIconDetails;
 exports.getExtensionFromFileName = getExtensionFromFileName;
 exports.isAudioFile = isAudioFile;
 exports.isBrowserSupportedFile = isBrowserSupportedFile;
-var UNASSIGNED = 'Unassigned';
+
+var _General = require("../utils/General");
+
+var _utils = require("./utils");
+
+// const UNASSIGNED = 'Unassigned';
 var BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
 
 function isAudioFile(fileName) {
@@ -25,4 +31,106 @@ function getExtensionFromFileName(fileName) {
 function isBrowserSupportedFile(fileName) {
   var extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
+}
+
+function getAttachmentIconDetails(fileName) {
+  var extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
+
+  if (!extension) {
+    return 'ZD-GN-fileUnknown';
+  }
+
+  var image = _utils.SUPPORTED_FILE_EXTENSIONS.image,
+      doc = _utils.SUPPORTED_FILE_EXTENSIONS.doc,
+      pdf = _utils.SUPPORTED_FILE_EXTENSIONS.pdf,
+      html = _utils.SUPPORTED_FILE_EXTENSIONS.html,
+      ppt = _utils.SUPPORTED_FILE_EXTENSIONS.ppt,
+      zip = _utils.SUPPORTED_FILE_EXTENSIONS.zip,
+      word = _utils.SUPPORTED_FILE_EXTENSIONS.word,
+      xml = _utils.SUPPORTED_FILE_EXTENSIONS.xml,
+      sheet = _utils.SUPPORTED_FILE_EXTENSIONS.sheet,
+      audio = _utils.SUPPORTED_FILE_EXTENSIONS.audio,
+      video = _utils.SUPPORTED_FILE_EXTENSIONS.video,
+      mail = _utils.SUPPORTED_FILE_EXTENSIONS.mail,
+      linux = _utils.SUPPORTED_FILE_EXTENSIONS.linux,
+      css = _utils.SUPPORTED_FILE_EXTENSIONS.css,
+      exe = _utils.SUPPORTED_FILE_EXTENSIONS.exe,
+      event = _utils.SUPPORTED_FILE_EXTENSIONS.event;
+
+  if (image.includes(extension)) {
+    return 'ZD-EF-fileImage';
+  }
+
+  if (doc.includes(extension)) {
+    return 'ZD-GN-fileDoc';
+  }
+
+  if (pdf.includes(extension)) {
+    return 'ZD-EF-filePdf';
+  }
+
+  if (ppt.includes(extension)) {
+    return 'ZD-GN-filePpt';
+  }
+
+  if (zip.includes(extension)) {
+    return 'ZD-EF-fileZip';
+  }
+
+  if (word.includes(extension)) {
+    var OSName = (navigator.platform || '').toLowerCase();
+    return OSName.includes('mac') || OSName.includes('linux') ? 'ZD-EF-fileOffice' : 'ZD-EF-fileWord';
+  }
+
+  if (xml.includes(extension)) {
+    return 'ZD-EF-fileXml';
+  }
+
+  if (sheet.includes(extension)) {
+    return 'ZD-GN-fileSheet';
+  }
+
+  if (audio.includes(extension)) {
+    return 'ZD-EF-fileMp3';
+  }
+
+  if (video.includes(extension)) {
+    return 'ZD-EF-fileMp4';
+  }
+
+  if (mail.includes(extension)) {
+    return 'ZD-GN-fileMail';
+  }
+
+  if (linux.includes(extension)) {
+    return 'ZD-EF-linux';
+  }
+
+  if (css.includes(extension)) {
+    return 'ZD-EF-clrCss';
+  }
+
+  if (exe.includes(extension)) {
+    return 'ZD-EF-exe';
+  }
+
+  if (event.includes(extension)) {
+    return 'ZD-TK-event';
+  }
+
+  if (html.includes(extension)) {
+    var browser = ((0, _General.getBrowserWithVersion)() || '').toLowerCase();
+
+    if (browser.includes('chrome') || browser.includes('safari')) {
+      return 'ZD-EF-fileXml';
+    }
+
+    if (browser.includes('ie') || browser.includes('edge')) {
+      return 'ZD-EF-explorer';
+    }
+
+    return 'ZD-EF-firebox';
+  }
+
+  return 'ZD-GN-fileUnknown';
 }