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

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

@@ -0,0 +1,77 @@
+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.js

@@ -36,7 +36,8 @@ const TagsMultiSelectField = props => {
     getTextBoxChildren,
     children,
     ePhiData,
-    customProps
+    customProps,
+    clickableTag
   } = props;
   const {
     LabelProps = {},
@@ -232,7 +233,9 @@ const TagsMultiSelectField = props => {
     htmlId: htmlId,
     getTextBoxChildren: getTextBoxChildren,
     className: containerClass
-  }, TagsMultiSelectProps)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+  }, TagsMultiSelectProps, {
+    clickableTag: clickableTag
+  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
     text: validationMessage,
     palette: validationPalette,
     type: errorType,
@@ -252,7 +255,8 @@ TagsMultiSelectField.propTypes = {
     value: PropTypes.string,
     selectedValueCount: PropTypes.string,
     validationMessage: PropTypes.string,
-    options: PropTypes.array
+    options: PropTypes.array,
+    clickableTag: PropTypes.bool
   }),
   styleProperties: PropTypes.shape({
     labelSize: PropTypes.string,

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

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

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

@@ -0,0 +1,82 @@
+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,45 @@
+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);
+  }
+
+  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"
+    }, /*#__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'
+  };
+}