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

package/es/setup/table/Table/docs/Table__default.docs.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import Table from '../Table';
+import TableHead from '../../TableHead/TableHead';
+import TableData from '../../TableData/TableData';
+import TableBody from '../../TableBody/TableBody';
+import TableRow from '../../TableRow/TableRow';
+import Text from '../../Text/Text';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import hoverCss from '../../TableData/Tablehover.module.css';
+export default class Table__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.over = this.over.bind(this);
+    this.out = this.out.bind(this);
+  }
+  over() {
+    console.log('over');
+  }
+  out() {
+    console.log('out');
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header3"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "heading",
+      text: "header4"
+    }))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableRow, {
+      onMouseEnter: this.over,
+      onMouseLeave: this.out
+    }, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: "true"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: `Not Verified - `
+    })), /*#__PURE__*/React.createElement(Box, {
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` Verify`,
+      type: "primary"
+    })))), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    }))), /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: {
+        'margin-left': '4px'
+      },
+      text: "-"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    }))), /*#__PURE__*/React.createElement(TableRow, {
+      className: `${hoverCss.container}`
+    }, /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data1"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Text, {
+      type: "semiBold",
+      text: "Data2"
+    })), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150"
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      shrink: "true"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "verified"
+    })), /*#__PURE__*/React.createElement(Box, {
+      shrink: "true",
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` - `
+    })), /*#__PURE__*/React.createElement(Box, {
+      className: hoverCss.opac0,
+      style: {
+        'margin-left': '4px'
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: ` Details`,
+      palette: "primary"
+    })))), /*#__PURE__*/React.createElement(TableData, {
+      flexible: true,
+      shrink: true,
+      type: "size150",
+      align: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Data4"
+    })))));
+  }
+}
+if (false) {
+  Table__default.docs = {
+    componentGroup: 'Table',
+    folderName: 'Setup'
+  };
+}

package/es/setup/table/TableData/SetupTableData.module.css

@@ -1,7 +1,5 @@
-[dir=ltr] .container {
+.container {
   padding-left: var(--zd_size20);
-}[dir=rtl] .container {
-  padding-right: var(--zd_size20);
 }
 .size70 {
   flex-basis: var(--zd_size70);
@@ -30,15 +28,9 @@
 .center {
   text-align: center;
 }
-[dir=ltr] .left {
+.left {
   text-align: left;
 }
-[dir=rtl] .left {
+.right {
   text-align: right;
 }
-[dir=ltr] .right {
-  text-align: right;
-}
-[dir=rtl] .right {
-  text-align: left;
-}

package/es/setup/table/TableHead/SetupTableHead.module.css

@@ -1,11 +1,7 @@
 .container {
   border-bottom: 1px solid var(--zdt_setuptablehead_border);
-}[dir=ltr] .container {
   padding-right: var(--zd_size40);
   padding-left: var(--zd_size40);
-}[dir=rtl] .container {
-  padding-left: var(--zd_size40);
-  padding-right: var(--zd_size40);
 }
 .subContainer {
   height: var(--zd_size40);

package/es/setup/table/TableRow/SetupTableRow.module.css

@@ -1,13 +1,9 @@
 .container {
   position: relative;
-  height: var(--zd_size52);
-  border-bottom: 1px solid var(--zdt_setuptablerow_border);
-}[dir=ltr] .container {
   margin-right: var(--zd_size40);
   margin-left: var(--zd_size40);
-}[dir=rtl] .container {
-  margin-left: var(--zd_size40);
-  margin-right: var(--zd_size40);
+  border-bottom: 1px solid var(--zdt_setuptablerow_border);
+  height: var(--zd_size52);
 }
 .container:hover {
   background-color: var( --zdt_setuptablerow_hover_bg);

package/es/setup/table/Text/docs/Text__default.docs.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Text from '../Text';
+export default class Text__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "Default Text"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "bold",
+      type: "bold",
+      url: "#",
+      palette: "primary"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "semiBold",
+      type: "semiBold",
+      palette: "primary",
+      url: "#"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "link Regular",
+      palette: "primary",
+      url: "#"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      text: "Medium Text",
+      size: "medium",
+      onClick: "dummy()"
+    })));
+  }
+}
+if (false) {
+  Text__default.docs = {
+    componentGroup: 'Text',
+    folderName: 'Setup'
+  };
+}

package/es/svg/docs/SVG__default.docs.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PlusIcon from '../PlusIcon';
+import SnippetIcon from '../SnippetIcon';
+import TemplateIcon from '../TemplateIcon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+export default class SVG__default extends React.Component {
+  render() {
+    let boxStyle = {
+      minWidth: '15%',
+      border: '1px solid #dcdcdc',
+      padding: '5px',
+      margin: '5px'
+    };
+    let textStyle = {
+      textAlign: 'center',
+      padding: '10px 0',
+      background: ' #f9f9f9',
+      marginTop: '10px',
+      color: '#000'
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "both",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement(PlusIcon, null), /*#__PURE__*/React.createElement("div", {
+      style: textStyle
+    }, "PlusIcon")), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement(SnippetIcon, null), /*#__PURE__*/React.createElement("div", {
+      style: textStyle
+    }, "SnippetIcon")), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: boxStyle
+    }, /*#__PURE__*/React.createElement(TemplateIcon, null), /*#__PURE__*/React.createElement("div", {
+      style: textStyle
+    }, "TemplateIcon"))));
+  }
+}
+if (false) {
+  SVG__default.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/es/utils/Common.js

@@ -0,0 +1,24 @@
+export function findScrollEnd(element) {
+  let {
+    scrollHeight,
+    scrollTop,
+    offsetHeight,
+    clientHeight
+  } = element || {};
+  let isElementScrollable = scrollHeight > clientHeight;
+
+  if (isElementScrollable) {
+    if (scrollHeight <= Math.ceil(scrollTop + offsetHeight)) {
+      return true;
+    }
+  } else {
+    throw 'Is scroll not present in this element';
+  }
+
+  return false;
+}
+export function stopBubbling(event) {
+  event.preventDefault();
+  event.stopPropagation && event.stopPropagation();
+  event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+}

package/es/utils/editorUtils.js

@@ -65,7 +65,7 @@ export function triggerKeyup(elem) {
 // editor
 
 export function getRichEditorContent(key) {
-  let richTextEditor = editor[key];
+  let richTextEditor = global.editor[key];
   if (richTextEditor != undefined) {
     let content = richTextEditor.getContent();
     content = content.trim();

package/es/version2/AlertClose/AlertClose.module.css

@@ -1,9 +1,9 @@
 .close {
   width: var(--zd_size25);
   height: var(--zd_size25);
-  color: var(--zdt_commonalert_close_icon);
   border-radius: var(--zd_size4);
   cursor: pointer;
+  color: var(--zdt_commonalert_close_icon);
 }
 
 .closeIcon {

package/es/version2/AlertClose/docs/AlertClose__default.docs.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AlertClose from '../AlertClose';
+export default class AlertClose__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let style = {
+      margin: '10px'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "Light"), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      type: "light"
+    })), /*#__PURE__*/React.createElement("h2", null, "Info"), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      type: "info"
+    })), /*#__PURE__*/React.createElement("h2", null, "Success"), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      type: "success"
+    })), /*#__PURE__*/React.createElement("h2", null, "Danger"), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      type: "danger"
+    })), /*#__PURE__*/React.createElement("h2", null, "Warning"), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      type: "warning"
+    })), /*#__PURE__*/React.createElement("h2", null, "Error"), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(AlertClose, {
+      type: "error"
+    })));
+  }
+}
+if (false) {
+  AlertClose__default.docs = {
+    componentGroup: 'AlertClose',
+    folderName: 'Alert'
+  };
+}

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -11,38 +11,25 @@
   top: 0;
   z-index: 1000;
   /*Hook for editor alert*/
-  pointer-events: none;
-  text-align: center;
-}
-[dir=ltr] .message {
   right: 0;
+  text-align: center;
   left: 0;
-}
-[dir=rtl] .message {
-  left: 0;
-  right: 0;
+  pointer-events: none;
 }
 
 .container {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
   position: relative;
   pointer-events: initial;
-  color: var(--globalnotification_text_color);
-  max-width: var(--zd_size490);
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   box-shadow: 0 4px 20px var(--globalnotification_box_shadow);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   background-color: var(--globalnotification_bg_color);
   border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 1px 1px 1px;
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
+  color: var(--globalnotification_text_color);
+  max-width: var(--zd_size490);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 
 .icon {
@@ -51,15 +38,8 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto 0;
-}
-
-[dir=ltr] .icon {
   left: var(--zd_size18);
-}
-
-[dir=rtl] .icon {
-  right: var(--zd_size18);
+  margin: auto 0;
 }
 
 .success {
@@ -96,30 +76,15 @@
   font-size: var(--zd_font_size14);
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
-}
-
-[dir=ltr] .text {
   text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
+  line-height: var(--zd_size20);
 }
 
 .close {
   position: absolute;
   top: 0;
   bottom: 0;
-  height: var(--zd_size25);
-}
-
-[dir=ltr] .close {
   right: var(--zd_size12);
   margin: auto 0 auto var(--zd_size25);
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12);
-  margin: auto var(--zd_size25) auto 0;
+  height: var(--zd_size25);
 }

package/es/version2/GlobalNotification/docs/GlobalNotification__default.docs.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import GlobalNotification from '../GlobalNotification';
+import { GlobalNotificationUI } from '../GlobalNotification';
+export default class GlobalNotification__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let style = {
+      position: 'relative',
+      height: '150px',
+      overflow: 'hidden'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotificationUI, {
+      message: "You have started following this Ticket",
+      showMessage: true,
+      hideMessage: () => {},
+      closeTitle: "Custom Close Title",
+      onClose: () => {
+        alert('click');
+      }
+    })), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      message: "You have started following this Ticket",
+      showMessage: true,
+      hideMessage: () => {},
+      i18nKeys: {
+        closeTitle: 'Custom Close Title'
+      }
+    })), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      type: "success",
+      message: "You have started following this Ticket",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      type: "danger",
+      message: "You an integrate with either zoho cliq slack at a time. Please disable the integration with slack and try again.",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      type: "error",
+      message: "Somthing error in this Requests",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      type: "warning",
+      message: "No tickets found in this department",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      type: "info",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(GlobalNotification, {
+      type: "info",
+      message: "The status has been successfully updated <h1>asdf</h1>",
+      showMessage: true,
+      hideMessage: () => {},
+      htmlText: '<h1>H1</h1>'
+    })));
+  }
+}
+if (false) {
+  GlobalNotification__default.docs = {
+    componentGroup: 'GlobalNotification',
+    folderName: 'Alert'
+  };
+}