@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/es/emptystate/EditionPage/EditionPage.css

@@ -19,17 +19,23 @@
 }
 .footer {
   font-size: var(--zd_font_size13);
-  margin: var(--zd_size10) 0 var(--zd_size80) 0;
   position: relative;
   display: inline-block;
+  margin: var(--zd_size10) 0 var(--zd_size80) 0;
 }
 .footer::before {
   content: '';
-  border-top: var(--zd_size1) solid var(--zdt_editionpage_footer_text);
   position: absolute;
+  top: calc(var(--zd_size10) * -1);
+  border-top: var(--zd_size1) solid var(--zdt_editionpage_footer_text);
+}
+[dir=ltr] .footer::before {
   left: calc(var(--zd_size20) * -1);
   right: calc(var(--zd_size20) * -1);
-  top: calc(var(--zd_size10) * -1);
+}
+[dir=rtl] .footer::before {
+  right: calc(var(--zd_size20) * -1);
+  left: calc(var(--zd_size20) * -1);
 }
 .button {
   color: var(--zdt_editionpage_primary_text);

package/es/emptystate/EditionPage/docs/EditionPage__default.docs.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import EditionPage from '../EditionPage';
+export default class EditionPage__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EditionPage, {
+      title: "Access Denied",
+      subtitle: "Your current edition does not support this feature.",
+      dataId: "empty",
+      butttonText: "Upgrade Now",
+      information: "our current edition does not support this feature.",
+      footerText: "asdf"
+    });
+  }
+
+}
+
+if (false) {
+  EditionPage__default.docs = {
+    componentGroup: 'EmptyState'
+  };
+}

package/es/errorstate/EmptyStates.module.css

@@ -1,5 +1,4 @@
-.container,
-.tabletContainer {
+.container, .tabletContainer {
   text-align: center;
   background-color: var(--zdt_emptystate_default_bg);
 }
@@ -14,17 +13,24 @@
 }
 .header {
   min-width: var(--zd_size400);
-  margin: 0 auto;
   display: inline-block;
+  margin: 0 auto;
+}
+[dir=ltr] .header {
   text-align: left;
 }
+[dir=rtl] .header {
+  text-align: right;
+}
 .title,
 .tabletTitle,
 .mobileTitle {
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-  margin-bottom: var(--zd_size5);
   letter-spacing: var(--zd_size1);
 }
+.title, .tabletTitle, .mobileTitle {
+  margin-bottom: var(--zd_size5);
+}
 .title {
   font-size: var(--zd_font_size50);
   line-height: var(--zd_size70);
@@ -52,15 +58,14 @@
 }
 
 .footer {
+  display: inline-block;
   text-align: center;
   margin: 0 auto;
-  display: inline-block;
 }
 .footerWidth {
   min-width: var(--zd_size400);
 }
-.btmText,
-.tabletBtmText {
+.btmText, .tabletBtmText {
   margin-bottom: var(--zd_size10);
 }
 .btmText {
@@ -69,9 +74,7 @@
 .tabletBtmText {
   font-size: var(--zd_font_size12);
 }
-.imageContainer,
-.tabletImageContainer,
-.mobileImageContainer {
+.imageContainer, .tabletImageContainer, .mobileImageContainer {
   margin-bottom: var(--zd_size30);
 }
 .imageContainer {

package/es/errorstate/Inconvenience/Inconvenience.module.css

@@ -1,4 +1,7 @@
 .imageContainer {
   margin-top: calc(var(--zd_size35) * -1);
+}[dir=ltr] .imageContainer {
   margin-left: calc(var(--zd_size30) * -1);
+}[dir=rtl] .imageContainer {
+  margin-right: calc(var(--zd_size30) * -1);
 }

package/es/errorstate/Inconvenience/docs/Inconvenience__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Inconvenience from '../Inconvenience';
+export default class Inconvenience__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(Inconvenience, {
+      subtitle: "Sorry! for the inconvenience.",
+      description: "Please try again later or report this issue ",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  Inconvenience__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/errorstate/LinkText/LinkText.module.css

@@ -1,6 +1,6 @@
 .text {
   color: var(--zdt_linktext_default_text);
   display: inline-block;
-  cursor: pointer;
   font-size: var(--zd_font_size15);
+  cursor: pointer;
 }

package/es/errorstate/LinkText/docs/LinkText__default.docs.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LinkText from '../LinkText';
+export default class LinkText__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(LinkText, {
+      text: "Go to Preference"
+    });
+  }
+
+}
+
+if (false) {
+  LinkText__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/errorstate/NoRequestFound/docs/NoRequestFound__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import NoRequestFound from '../NoRequestFound';
+export default class NoRequestFound__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(NoRequestFound, {
+      btmText: "Please try again later or report this issue ",
+      subtitle: "Sorry! no request found.",
+      description: "Please try again later or report this issue ",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  NoRequestFound__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,8 +1,8 @@
 .headtingText {
   font-family: var(--zd_semibold);
   font-size: var(--zd_font_size50);
-  margin-bottom: var(--zd_size5);
   letter-spacing: var(--zd_size1);
+  margin-bottom: var(--zd_size5);
 }
 .title,
 .headtingText,
@@ -13,9 +13,9 @@
   font-size: var(--zd_font_size30);
 }
 .lastBox {
-  margin: 0 auto;
   line-height: var(--zd_size24);
   font-size: var(--zd_font_size14);
+  margin: 0 auto;
   margin-bottom: var(--zd_size20);
 }
 .lineText {

package/es/errorstate/PermissionPlay/docs/PermissionPlay__default.docs.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PermissionPlay from '../PermissionPlay';
+export default class PermissionPlay__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(PermissionPlay, {
+      title: "Permissions in play",
+      subtitle: "keep intruders at bay!",
+      description: "You do not have the permission(s) required to access this landing page. Please contact your administrator to obtain the permission(s) or set a new landing page",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  PermissionPlay__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/errorstate/RequestUrlNotFound/docs/RequestUrlNotFound__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RequestUrlNotFound from '../RequestUrlNotFound';
+export default class RequestUrlNotFound__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(RequestUrlNotFound, {
+      subtitle: "Sorry! Request URL not found.",
+      description: "Please try again later or report this issue ",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  RequestUrlNotFound__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/errorstate/UnableToProcess/docs/UnableToProcess__default.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UnableToProcess from '../UnableToProcess';
+export default class UnableToProcess__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(UnableToProcess, {
+      subtitle: "Oops! Unable to process the request. ",
+      description: "Please try again later or report this issue ",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  UnableToProcess__default.docs = {
+    componentGroup: 'errorStates'
+  };
+}

package/es/errorstate/UnauthorizedLogin/docs/UnauthorizedLogin__insufficient.docs.js

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

package/es/errorstate/UnauthorizedLogin/docs/UnauthorizedLogin__unauthorizedLogin.docs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import UnauthorizedLogin from '../UnauthorizedLogin';
+export default class UnauthorizedLogin__unauthorizedLogin extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement(UnauthorizedLogin, {
+      subtitle: "Unathorized login! to the portal.",
+      description: "Please try again later or report this issue ",
+      urlText: "Enter your feedback"
+    });
+  }
+
+}
+
+if (false) {
+  UnauthorizedLogin__unauthorizedLogin.docs = {
+    componentGroup: 'errorStates'
+  };
+}

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/CheckBoxField.js

@@ -104,7 +104,7 @@ export default class CheckBoxField extends PureComponent {
       title: lockedInfoText
     }) : null);
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`

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/CurrencyField/CurrencyField.js

@@ -120,7 +120,7 @@ export default class CurrencyField extends PureComponent {
 
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -128,7 +128,7 @@ export default class CurrencyField extends PureComponent {
       text: labelName,
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       htmlFor: uniqueId,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

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

@@ -124,7 +124,7 @@ export default class DateField extends PureComponent {
     } = customProps;
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -134,7 +134,7 @@ export default class DateField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
       onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",

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,28 +34,36 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
-.cbTextPointer {
-  cursor: pointer;
+[dir=ltr] .checkboxText {
+  padding-left: var(--zd_size6);
+}
+[dir=rtl] .checkboxText {
+  padding-right: var(--zd_size6);
 }
-.disabled,
-.readonly {
+.cbTextReadonly {
   cursor: not-allowed;
 }
-.cbTextReadonly,
-.disabled .fieldLabel,
-.readonly .fieldLabel {
-  --label_cursor: not-allowed;
+.cbTextPointer {
+  cursor: pointer;
+}
+.disabled {
+  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
 }
-.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 +77,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 +97,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 +121,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 +154,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/MultiSelectField.js

@@ -136,7 +136,7 @@ export default class MultiSelectField extends PureComponent {
     let isDarkPalette = palette === 'dark';
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
       "data-title": isDisabled ? title : ''
     }, labelName && /*#__PURE__*/React.createElement("div", {
       className: style.labelContainer
@@ -146,7 +146,7 @@ export default class MultiSelectField extends PureComponent {
       size: fieldSize === 'small' ? 'small' : 'medium',
       palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
       ,
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+      customClass: `${isMandatory ? style.labelMandatory : ''}`,
       dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
       htmlFor: uniqueId
     }, LabelProps)), infoText ? /*#__PURE__*/React.createElement(Icon, {

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'
+  };
+}