@zohodesk/dot 1.0.0-beta.225 → 1.0.0-beta.229

package/es/errorstate/WillBack/WillBack.module.css

@@ -16,9 +16,7 @@
 .header {
   min-width: var(--zd_size450);
 }
-.imageContainer,
-.tabletImageContainer,
-.mobileImageContainer {
+.imageContainer, .tabletImageContainer, .mobileImageContainer {
   margin-top: calc(var(--zd_size70) * -1);
   margin-bottom: var(--zd_size30);
 }

package/es/errorstate/WillBack/docs/WillBack__default.docs.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import WillBack from '../WillBack';
+export default class WillBack__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(WillBack, {
+      highlightText: "Privileges ",
+      midText: "to perform this operation.. ",
+      description: "Please try again later or report this issue ",
+      title: " Insufficient",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  WillBack__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

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

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import CheckBoxField from '../CheckBoxField';
+export default class CheckBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckBoxField, {
+      labelName: "CheckBox",
+      id: "checkbox",
+      validationMessage: "Invalid Input"
+    }), /*#__PURE__*/React.createElement(CheckBoxField, {
+      labelName: "CheckBox",
+      id: "checkbox",
+      validationMessage: "Invalid Input",
+      isDisabled: true,
+      title: "Invalid Permission"
+    }));
+  }
+
+}
+
+if (false) {
+  CheckBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import DateField from '../DateField';
+export default class DateField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(DateField, {
+      labelName: "Date and Time",
+      id: "sample",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  DateField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -34,15 +34,19 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
+[dir=ltr] .checkboxText {
+  padding-left: var(--zd_size6);
+}
+[dir=rtl] .checkboxText {
+  padding-right: var(--zd_size6);
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled,
-.readonly {
+.disabled, .readonly {
   cursor: not-allowed;
 }
 .cbTextReadonly,
@@ -50,12 +54,18 @@
 .readonly .fieldLabel {
   --label_cursor: not-allowed;
 }
-.radio {
+[dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-.duration {
+[dir=rtl] .radio {
+  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
+}
+[dir=ltr] .duration {
   margin-right: var(--zd_size15);
 }
+[dir=rtl] .duration {
+  margin-left: var(--zd_size15);
+}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -69,8 +79,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   display: inline-block;
+  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -89,9 +99,14 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  margin-left: var(--zd_size5);
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
+  margin-right: var(--zd_size5);
+}
 /* .infoIcon {
   opacity: 0;
   visibility: hidden;
@@ -108,15 +123,25 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  margin-left: var(--zd_size4);
   color: var(--zdt_fields_lockicon_icon);
 }
+[dir=ltr] .timeFormat {
+  margin-left: var(--zd_size4);
+}
+[dir=rtl] .timeFormat {
+  margin-right: var(--zd_size4);
+}
 .newTab {
-  margin-left: var(--zd_size6);
-  cursor: pointer;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0;
   display: none;
+  cursor: pointer;
+}
+[dir=ltr] .newTab {
+  margin-left: var(--zd_size6);
+}
+[dir=rtl] .newTab {
+  margin-right: var(--zd_size6);
 }
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
@@ -131,18 +156,28 @@
 }
 .labelMandatory:after {
   content: '*';
-  padding-left: var(--zd_size2);
   color: var(--zdt_fields_lockicon_hover_icon);
 }
+[dir=ltr] .labelMandatory:after {
+  padding-left: var(--zd_size2);
+}
+[dir=rtl] .labelMandatory:after {
+  padding-right: var(--zd_size2);
+}
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
+  font-size: var(--zd_font_size12);
+  height: var(--zd_size18);
+  line-height: var(--zd_size18);
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
-  font-size: var(--zd_font_size12);
   padding: 0 var(--zd_size5);
   border-radius: var(--zd_size3);
+}
+[dir=ltr] .ePhiTag {
   margin-left: var(--zd_size8);
-  height: var(--zd_size18);
-  line-height: var(--zd_size18);
+}
+[dir=rtl] .ePhiTag {
+  margin-right: var(--zd_size8);
 }

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

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import MultiSelectField from '../MultiSelectField';
+export default class MultiSelectField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedOptions: ['Antro J']
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(fieldId, options) {
+    console.log(options, '===>>');
+    this.setState({
+      selectedOptions: options
+    });
+  }
+
+  render() {
+    let {
+      selectedOptions
+    } = this.state;
+    let options = ['Antro J', 'Rahul JR', 'Karthiban NS', 'Sudalai MS', 'Arunkumar Selvam S'];
+    return /*#__PURE__*/React.createElement(MultiSelectField, {
+      labelName: "MultiSelect",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      isAnimate: true,
+      emptyMessage: "No more Results",
+      searchBoxSize: "xmedium",
+      textBoxSize: "xmedium",
+      animationStyle: "bounce",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  MultiSelectField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/PhoneField/docs/PhoneField__default.docs.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import PhoneField from '../PhoneField';
+export default class PhoneField__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(PhoneField, {
+      labelName: "Phone",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      value: "98999999999",
+      isTelephony: true
+    });
+  }
+
+}
+
+if (false) {
+  PhoneField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SelectField from '../SelectField';
+export default class SelectField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(fieldId, value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let option = [{
+      text: 'None',
+      id: '1'
+    }, {
+      text: 'Low',
+      id: '2'
+    }, {
+      text: 'Medium',
+      id: '3'
+    }, {
+      text: 'High',
+      id: '4'
+    }];
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement(SelectField, {
+      labelName: "Priority",
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      animationStyle: "bounce",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      searchBoxSize: "xmedium",
+      validationMessage: "Invalid Input"
+    });
+  }
+
+}
+
+if (false) {
+  SelectField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Tag from '@zohodesk/components/lib/Tag/Tag';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
 import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
 import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
 import Loader from '@zohodesk/svg/lib/svg/Loader';
 import DropDownSeparator from '@zohodesk/components/lib/DropDown/DropDownSeparator';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { findScrollEnd, stopBubbling } from '../../../utils/Common';
 import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
 import style from './TagsMultiSelect.module.css';
@@ -97,6 +98,17 @@ export default class TagsMultiSelect extends React.Component {
     this.containerRef = ele;
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   render() {
     let {
       searchList,
@@ -125,7 +137,8 @@ export default class TagsMultiSelect extends React.Component {
       getTextBoxChildren,
       htmlId,
       boxSize,
-      onSelectTag
+      onSelectTag,
+      clickableTag
     } = this.props;
     let {
       showAll
@@ -158,7 +171,7 @@ export default class TagsMultiSelect extends React.Component {
         text: name,
         onRemove: isReadOnly ? null : deleteTag.bind(this, name),
         closeTitle: i18nKeys.deleteText,
-        palette: tagType === 'SYSTEM' ? 'primary' : 'default',
+        palette: clickableTag ? 'defaultLink' : tagType === 'SYSTEM' ? 'primary' : 'default',
         isReadOnly: isReadOnly,
         onSelectTag: onSelectTag ? onSelectTag : undefined
       })) : null;
@@ -169,7 +182,7 @@ export default class TagsMultiSelect extends React.Component {
     }, showAll ? `${i18nKeys.lessText}` : `+${tagsList.length - chipNeedToShow} ${i18nKeys.moreText}`) : null) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       adjust: true,
-      shrnik: true,
+      shrink: true,
       className: style.inputWrapper
     }, /*#__PURE__*/React.createElement("span", {
       className: style.custmSpan
@@ -190,67 +203,80 @@ export default class TagsMultiSelect extends React.Component {
       },
       size: "xsmall",
       inputRef: this.textInputRef
-    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
-      isAnimate: true,
-      isActive: isPopupReady,
-      isArrow: false,
-      getRef: getContainerRef,
-      isBoxPaddingNeed: true,
-      size: boxSize,
-      boxPosition: boxPosition,
-      isPadding: false,
-      customClass: {
-        customDropBoxWrap: style.dropdown
-      },
-      dataId: `${dataId}_dropbox`
-    }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      className: style.viewpopNew
-    }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
-      scroll: "vertical",
-      className: style.viewpopNew,
-      onScroll: this.onScroll,
-      eleRef: this.getContainerRef
-    }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, searchList.map((item, index) => {
+    }, getTextBoxChildren ? getTextBoxChildren() : null))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
       let {
-        name,
-        isNew
-      } = item;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
-        key: index,
-        index: index,
-        autoHover: true,
-        value: isNew ? '' : name,
-        title: isNew ? '' : name,
-        onClick: addTag.bind(this, item),
-        needTick: true,
-        highlight: selectSearchIndex === index,
-        getRef: this.getSelectedItemRef,
-        isDisabled: listDisabled
-      }, isNew ? /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row",
-        align: "vertical"
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        isAnimate: true,
+        isActive: isPopupReady,
+        isArrow: false,
+        getRef: getContainerRef,
+        isBoxPaddingNeed: true,
+        size: boxSize,
+        boxPosition: boxPosition,
+        isPadding: false,
+        customClass: {
+          customDropBoxWrap: style.dropdown
+        },
+        dataId: `${dataId}_dropbox`,
+        isResponsivePadding: true,
+        alignBox: "row"
       }, /*#__PURE__*/React.createElement(Box, {
-        className: style.newTagLabel
-      }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
-        shrink: true,
-        "data-title": name,
-        className: `${style.dotted} ${style.newTagText} `,
-        dataId: `${dataId}_new_tag_text`
-      }, name)) : null));
-    })) : /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      dataId: `${dataId}_empty`
-    }, /*#__PURE__*/React.createElement(Container, {
-      className: style.searchEmpty
-    }, /*#__PURE__*/React.createElement(CommonEmptyState, {
-      title: i18nKeys.emptyTitleText,
-      description: i18nKeys.emptyDescription,
-      size: "small",
-      getEmptyState: this.emptySearchSVG
-    })))))) : null);
+        flexible: true
+      }, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: `${tabletMode ? '' : style.viewpopNew}`
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+        scroll: "vertical",
+        className: `${tabletMode ? '' : style.viewpopNew}`,
+        onScroll: this.onScroll,
+        eleRef: this.getContainerRef
+      }, searchList.length ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true
+      }, searchList.map((item, index) => {
+        let {
+          name,
+          isNew
+        } = item;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
+          key: index,
+          index: index,
+          autoHover: true,
+          value: isNew ? '' : name,
+          title: isNew ? '' : name,
+          onClick: addTag.bind(this, item),
+          needTick: true,
+          highlight: selectSearchIndex === index,
+          getRef: this.getSelectedItemRef,
+          isDisabled: listDisabled
+        }, isNew ? /*#__PURE__*/React.createElement(Container, {
+          alignBox: "row",
+          align: "vertical"
+        }, /*#__PURE__*/React.createElement(Box, {
+          className: style.newTagLabel
+        }, i18nKeys.newTagText, ":"), /*#__PURE__*/React.createElement(Box, {
+          shrink: true,
+          "data-title": name,
+          className: `${style.dotted} ${style.newTagText} `,
+          dataId: `${dataId}_new_tag_text`
+        }, name)) : null));
+      })) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        dataId: `${dataId}_empty`
+      }, /*#__PURE__*/React.createElement(Container, {
+        className: style.searchEmpty
+      }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+        title: i18nKeys.emptyTitleText,
+        description: i18nKeys.emptyDescription,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      })))))));
+    }) : null);
   }
 
 }
@@ -293,7 +319,8 @@ TagsMultiSelect.propTypes = {
   getTextBoxChildren: PropTypes.func,
   htmlId: PropTypes.string,
   boxSize: PropTypes.string,
-  onSelectTag: PropTypes.func
+  onSelectTag: PropTypes.func,
+  clickableTag: PropTypes.bool
 };
 TagsMultiSelect.defaultProps = {
   className: '',
@@ -302,7 +329,8 @@ TagsMultiSelect.defaultProps = {
   borderColor: 'default',
   needBorder: true,
   dataId: '',
-  boxSize: 'default'
+  boxSize: 'default',
+  clickableTag: false
 };
 
 if (false) {

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

@@ -1,26 +1,28 @@
 .tag {
   max-width: 100%;
 }
-.moreLess,
-.tag {
+[dir=ltr] .moreLess, [dir=ltr] .tag {
   margin: 0 var(--zd_size6) var(--zd_size6) 0;
 }
+[dir=rtl] .moreLess, [dir=rtl] .tag {
+  margin: 0 0 var(--zd_size6) var(--zd_size6);
+}
 .input {
   height: var(--zd_size20);
-  margin-bottom: var(--zd_size4);
   width: 100%;
+  margin-bottom: var(--zd_size4);
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  margin-top: var(--zd_size5);
   max-height: var(--zd_size160);
+  margin-top: var(--zd_size5);
 }
 .hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
@@ -64,10 +66,15 @@
   font-size: 0;
 }
 .newTagLabel {
-  margin-right: var(--zd_size5);
   color: var(--zdt_tagsmultiselect_labelt_text);
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .newTagLabel {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .newTagLabel {
+  margin-left: var(--zd_size5);
+}
 .dotted {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
@@ -87,9 +94,14 @@
 .custmInp {
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
 }
+[dir=ltr] .custmInp {
+  left: 0;
+}
+[dir=rtl] .custmInp {
+  right: 0;
+}
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);
 }