@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.245

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

@@ -34,19 +34,15 @@
   -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,
@@ -54,18 +50,12 @@
 .readonly .fieldLabel {
   --label_cursor: not-allowed;
 }
-[dir=ltr] .radio {
+.radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-[dir=rtl] .radio {
-  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
-}
-[dir=ltr] .duration {
+.duration {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .duration {
-  margin-left: var(--zd_size15);
-}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -79,8 +69,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  display: inline-block;
   margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
+  display: inline-block;
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -99,13 +89,8 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  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);
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
 }
 /* .infoIcon {
   opacity: 0;
@@ -123,25 +108,15 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  color: var(--zdt_fields_lockicon_icon);
-}
-[dir=ltr] .timeFormat {
   margin-left: var(--zd_size4);
-}
-[dir=rtl] .timeFormat {
-  margin-right: var(--zd_size4);
+  color: var(--zdt_fields_lockicon_icon);
 }
 .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);
@@ -156,28 +131,18 @@
 }
 .labelMandatory:after {
   content: '*';
-  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);
+  color: var(--zdt_fields_lockicon_hover_icon);
 }
 .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);
-}
-[dir=rtl] .ePhiTag {
-  margin-right: var(--zd_size8);
+  height: var(--zd_size18);
+  line-height: var(--zd_size18);
 }

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

@@ -0,0 +1,51 @@
+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",
+      infoText: "infoText",
+      isLocked: true,
+      ePhiData: {
+        ePhiTitle: 'ePhiTitle',
+        ePhiText: 'ePhiText',
+        ePhiStatus: true
+      }
+    });
+  }
+}
+if (false) {
+  MultiSelectField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -0,0 +1,23 @@
+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,61 @@
+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",
+      infoText: "infoText",
+      isLocked: true,
+      ePhiData: {
+        ePhiTitle: 'ePhiTitle',
+        ePhiText: 'ePhiText',
+        ePhiStatus: true
+      }
+    });
+  }
+}
+if (false) {
+  SelectField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

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

@@ -1,28 +1,26 @@
 .tag {
   max-width: 100%;
 }
-[dir=ltr] .moreLess, [dir=ltr] .tag {
+.moreLess,
+.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);
-  width: 100%;
   margin-bottom: var(--zd_size4);
+  width: 100%;
 }
 .viewpopNew {
   max-height: var(--zd_size250);
 }
 .tagDiv {
-  max-height: var(--zd_size160);
   margin-top: var(--zd_size5);
+  max-height: var(--zd_size160);
 }
 .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);
@@ -66,15 +64,10 @@
   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';
 }
@@ -94,13 +87,8 @@
 .custmInp {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInp {
   left: 0;
-}
-[dir=rtl] .custmInp {
-  right: 0;
+  width: 100%;
 }
 .newTagText {
   color: var(--zdt_tagsmultiselect_more_text);

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import TagsMultiSelect from '../TagsMultiSelect';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TagsMultiSelect__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPopupOpen: false
+    };
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.getCustomChildren = this.getCustomChildren.bind(this);
+  }
+  handleTogglePopup() {
+    this.setState({
+      isPopupOpen: !this.state.isPopupOpen
+    });
+  }
+  getCustomChildren() {
+    return /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    });
+  }
+  render() {
+    let {
+      isPopupOpen
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React.createElement(TagsMultiSelect, {
+      addTag: () => {},
+      closeSearch: () => {},
+      deleteTag: () => {},
+      handleChange: () => {},
+      handleKeyUp: () => {},
+      isReadOnly: false,
+      name: "",
+      noMoreData: true,
+      searchList: [],
+      searchTags: () => {},
+      selectSearchIndex: "-1",
+      tagsList: [{
+        name: 'Tag1',
+        tagType: 'MANUAL',
+        id: '5853000007033049'
+      }, {
+        name: 'Tag2',
+        tagType: 'MANUAL',
+        id: '5853000007033069'
+      }],
+      handleTogglePopup: this.handleTogglePopup,
+      isPopupOpen: isPopupOpen,
+      isPopupReady: isPopupOpen,
+      i18nKeys: {
+        newTagText: 'New Tag',
+        emptyTitleText: 'OOPS',
+        emptyDescription: 'No tag available',
+        deleteText: 'Delete tag',
+        lessText: 'Less',
+        moreText: 'More'
+      },
+      getTextBoxChildren: this.getCustomChildren
+    }));
+  }
+}
+if (false) {
+  TagsMultiSelect__default.docs = {
+    componentGroup: 'TagsMultiSelect'
+  };
+}

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

@@ -1,9 +1,6 @@
 .count {
   color: var(--zdt_tagsmultiselectField_count_text);
   font-size: var(--zd_font_size12);
-  word-break: break-word;
-}[dir=ltr] .count {
   margin-left: var(--zd_size4);
-}[dir=rtl] .count {
-  margin-right: var(--zd_size4);
+  word-break: break-word;
 }

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import TagsMultiSelectField from '../TagsMultiSelectField';
+import Icon from '@zohodesk/icons/lib/Icon';
+const TagsMultiSelectField__default = () => {
+  let value = [{
+    name: 'Tag1',
+    tagType: 'MANUAL',
+    id: '5853000007033049'
+  }, {
+    name: 'Tag2',
+    tagType: 'MANUAL',
+    id: '5853000007033069'
+  }, {
+    name: 'Tag3',
+    tagType: 'MANUAL',
+    id: '5853000007033080'
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '20px 20px 0'
+    }
+  }, /*#__PURE__*/React.createElement(TagsMultiSelectField, {
+    ePhiData: {
+      ePhiTitle: 'ehhweh',
+      ePhiText: 'ephi',
+      ePhiStatus: true
+    },
+    fieldProperties: {
+      id: 'tag',
+      name: 'tag',
+      labelName: 'Tags MultiSelect',
+      isReadOnly: false,
+      isDisabled: false,
+      value,
+      options: [],
+      selectedValueCount: '10'
+    },
+    styleProperties: {
+      labelPalette: 'secondary'
+    },
+    i18nKeys: {
+      newTagText: 'New Tag',
+      emptyTitleText: 'OOPS',
+      emptyDescription: 'No tag available',
+      deleteText: 'Delete tag',
+      lessText: 'Less',
+      moreText: 'More'
+    },
+    actions: {
+      onAdd: (tag, event) => {
+        console.log('Add Event=====', tag);
+      },
+      onDelete: (tag, event) => {
+        console.log('Delete Event=====', tag);
+      },
+      onChange: searchValue => {
+        console.log('Value Change Event------>>', searchValue);
+      },
+      onScroll: () => {}
+    },
+    isNewNeeded: true,
+    getTextBoxChildren: () => /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '13px',
+      marginLeft: '5px',
+      color: 'var(--dot_shuttleGrey)'
+    }
+  }, "shift+t")));
+};
+export default TagsMultiSelectField__default;
+if (false) {
+  TagsMultiSelectField__default.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

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

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TextBoxField from '../TextBoxField';
+import { Container } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+export default class TextBoxField__default extends Component {
+  constructor(props) {
+    super(props);
+    this.renderStart = this.renderStart.bind(this);
+    this.renderMiddle = this.renderMiddle.bind(this);
+    this.renderEnd = this.renderEnd.bind(this);
+  }
+  renderStart() {
+    return 'Start';
+  }
+  renderMiddle() {
+    return 'Middle';
+  }
+  renderEnd() {
+    return 'End';
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input"
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px 0 10px',
+        fontFamily: 'var(--zd_semibold)'
+      }
+    }, "Children Option"), /*#__PURE__*/React.createElement(TextBoxField, {
+      labelName: "Contact Name",
+      textBoxSize: "xmedium",
+      textBoxVariant: "primary",
+      validationMessage: "Invalid Input",
+      infoText: "infoText",
+      isLocked: true,
+      ePhiData: {
+        ePhiTitle: 'ePhiTitle',
+        ePhiText: 'ePhiText',
+        ePhiStatus: true
+      },
+      renderLabelProps: {
+        start: this.renderStart,
+        middle: this.renderMiddle,
+        end: this.renderEnd
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    }))));
+  }
+}
+if (false) {
+  TextBoxField__default.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}

package/es/form/fields/TextEditor/TextEditor.js

@@ -153,7 +153,7 @@ export default class TextEditor extends Component {
     let {
       id
     } = this.props;
-    let editorObj = editor[id] ? editor[id] : {};
+    let editorObj = global.editor[id] ? global.editor[id] : {};
     let content = getRichEditorContent(id);
     if (!editorContentValidate(editorObj)) {
       content = '';
@@ -185,8 +185,8 @@ export default class TextEditor extends Component {
       id
     } = this.props;
     global.editor = global.editor || {};
-    if (!editor[id]) {
-      editor[id] = editorObj;
+    if (!global.editor[id]) {
+      global.editor[id] = editorObj;
     }
     const css = 'blockquote {margin:0 0 0 4px; }',
       head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],