@zohodesk/dot 1.0.0-temp-148 → 1.0.0-temp-150

package/es/ChannelIcon/ChannelIcon.module.css

@@ -13,16 +13,16 @@
 .thread {
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
-  top: calc(var(--zd_size4) * -1);
-  height: var(--zd_size15);
-  width: var(--zd_size15);
+  top: -4px;
+  height: 15px;
+  width: 15px;
   background-color: var(--topIconBg);
 }
 [dir=ltr] .thread {
-  right: calc(var(--zd_size1) * -1);
+  right: -1px;
 }
 [dir=rtl] .thread {
-  left: calc(var(--zd_size1) * -1);
+  left: -1px;
 }
 .threadBorder {
   border: 1px solid var(--topIconBorderColor);
@@ -103,22 +103,22 @@
 .email_incoming,
 .email_missed,
 .email_outgoing {
-  bottom: var(--zd_size2);
+  bottom: 2px;
 }
 
 /* twitter */
 .twitter_incoming,
 .twitter_outgoing,
 .twitter_missed {
-  bottom: var(--zd_size1);
+  bottom: 1px;
 }
 
 /* facebook */
 [dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
-  right: var(--zd_size2);
+  right: 2px;
 }
 [dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2);
+  left: 2px;
 }
 
 /* chat */
@@ -131,33 +131,33 @@
 .chat_outgoing,
 .offline_chat_outgoing,
 .online_chat_outgoing {
-  bottom: var(--zd_size1);
+  bottom: 1px;
 }
 
 /* forums */
 .forums_default {
-  top: var(--zd_size1);
+  top: 1px;
 }
 
 /* feedback */
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: var(--zd_size1);
+  top: 1px;
 }
 [dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
-  right: var(--zd_size1);
+  right: 1px;
 }
 [dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1);
+  left: 1px;
 }
 
 /* draft */
 [dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
-  left: var(--zd_size1);
+  left: 1px;
 }
 [dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1);
+  right: 1px;
 }
 
 /* forward */
@@ -173,7 +173,7 @@
 .web_forward,
 .customerportal_forward,
 .feedback_forward {
-  bottom: var(--zd_size1);
+  bottom: 1px;
 }
 
 /* forwarddraft */
@@ -188,21 +188,21 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  bottom: var(--zd_size1);
+  bottom: 1px;
 }
 [dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
-  left: var(--zd_size1);
+  left: 1px;
 }
 [dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1);
+  right: 1px;
 }
 
 /* facebook_dm */
 [dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
-  right: var(--zd_size2);
+  right: 2px;
 }
 [dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2);
+  left: 2px;
 }
 
 /*Topic Icon colors*/

package/es/Drawer/Drawer.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
 import FreezeLayer from '../FreezeLayer/FreezeLayer';
-import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
 import FormAction from '../FormAction/FormAction';
@@ -167,7 +166,7 @@ export default class Drawer extends React.Component {
       eleRef: this.createRef
     }, /*#__PURE__*/React.createElement(Card, {
       onClick: e => {
-        cancelBubblingEffect(e);
+        e && e.stopPropagation && e.stopPropagation();
         onBodyClick(e);
       }
     }, childrenWithProps));
@@ -179,7 +178,7 @@ export default class Drawer extends React.Component {
     }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
       className: styleByResolutions,
       onClick: e => {
-        cancelBubblingEffect(e);
+        e && e.stopPropagation && e.stopPropagation();
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/Drawer/Drawer.module.css

@@ -63,31 +63,31 @@
 }
 
 .xsmall {
-  width: var(--zd_size360);
+  width: 360px;
 }
 
 .small {
-  width: var(--zd_size410);
+  width: 410px;
 }
 
 .medium {
-  width: var(--zd_size660);
+  width: 660px;
 }
 
 .xmedium {
-  width: var(--zd_size730);
+  width: 730px;
 }
 
 .large {
-  width: var(--zd_size936);
+  width: 936px;
 }
 
 .xlarge {
-  width: var(--zd_size840);
+  width: 840px;
 }
 
 .xxlarge {
-  width: var(--zd_size1142);
+  width: 1142px;
 }
 
 .mbleSize,
@@ -96,95 +96,96 @@
 }
 
 .header {
-  min-height: var(--zd_size50);
+  min-height: 50px;
   background-color: var(--zdt_drawer_header_bg);
   border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .subheader {
-  min-height: var(--zd_size28);
+  min-height: 28px;
 }
 
 .title {
   color: var(--zdt_drawer_title_text);
-  font: var(--zd_font_size16) var(--zd_semibold);
+  font-family: var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  font-size: 16px;
 }
 
 [dir=ltr] .title {
-  padding: 0 var(--zd_size10) 0 0;
+  padding: 0 10px 0 0;
 }
 
 [dir=rtl] .title {
-  padding: 0 0 0 var(--zd_size10);
+  padding: 0 0 0 10px;
 }
 
 [dir=ltr] .smallHeaderPadding {
-  padding-right: var(--zd_size11);
-  padding-left: var(--zd_size30);
+  padding-right: 11px;
+  padding-left: 30px;
 }
 
 [dir=rtl] .smallHeaderPadding {
-  padding-left: var(--zd_size11);
-  padding-right: var(--zd_size30);
+  padding-left: 11px;
+  padding-right: 30px;
 }
 
 [dir=ltr] .smallContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
+  padding-left: 30px;
+  padding-right: 30px;
 }
 
 [dir=rtl] .smallContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
+  padding-right: 30px;
+  padding-left: 30px;
 }
 
 [dir=ltr] .mediumHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size30);
+  padding-right: 15px;
+  padding-left: 30px;
 }
 
 [dir=rtl] .mediumHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size30);
+  padding-left: 15px;
+  padding-right: 30px;
 }
 
 [dir=ltr] .mediumContentPadding {
-  padding-left: var(--zd_size30);
-  padding-right: var(--zd_size30);
+  padding-left: 30px;
+  padding-right: 30px;
 }
 
 [dir=rtl] .mediumContentPadding {
-  padding-right: var(--zd_size30);
-  padding-left: var(--zd_size30);
+  padding-right: 30px;
+  padding-left: 30px;
 }
 
 [dir=ltr] .largeHeaderPadding {
-  padding-right: var(--zd_size15);
-  padding-left: var(--zd_size50);
+  padding-right: 15px;
+  padding-left: 50px;
 }
 
 [dir=rtl] .largeHeaderPadding {
-  padding-left: var(--zd_size15);
-  padding-right: var(--zd_size50);
+  padding-left: 15px;
+  padding-right: 50px;
 }
 
 [dir=ltr] .largeContentPadding {
-  padding-left: var(--zd_size50);
-  padding-right: var(--zd_size50);
+  padding-left: 50px;
+  padding-right: 50px;
 }
 
 [dir=rtl] .largeContentPadding {
-  padding-right: var(--zd_size50);
-  padding-left: var(--zd_size50);
+  padding-right: 50px;
+  padding-left: 50px;
 }
 
 [dir=ltr] .iconWrapper {
-  margin-right: var(--zd_size10);
+  margin-right: 10px;
 }
 
 [dir=rtl] .iconWrapper {
-  margin-left: var(--zd_size10);
+  margin-left: 10px;
 }

package/es/FormAction/FormAction.module.css

@@ -13,64 +13,64 @@
   border-top: solid 1px var(--footerBorder);
 }
 .largeFooter {
-  padding-top: var(--zd_size24);
-  padding-bottom: var(--zd_size24);
+  padding-top: 24px;
+  padding-bottom: 24px;
 }
 .mediumFooter {
-  padding-top: var(--zd_size20);
-  padding-bottom: var(--zd_size20);
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 .smallFooter {
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 [dir=ltr] .largePadding {
-  padding-left: var(--zd_size60);
+  padding-left: 60px;
 }
 
 [dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
+  padding-right: 60px;
 }
 [dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50);
+  padding-left: 50px;
 }
 [dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
+  padding-right: 50px;
 }
 [dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30);
+  padding-left: 30px;
 }
 [dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
+  padding-right: 30px;
 }
 [dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25);
+  padding-left: 25px;
 }
 [dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
+  padding-right: 25px;
 }
 [dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20);
+  padding-left: 20px;
 }
 [dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
+  padding-right: 20px;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15);
+  margin-right: 15px;
 }
 [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
+  margin-left: 15px;
 }
 [dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12);
+  margin-right: 12px;
 }
 [dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
+  margin-left: 12px;
 }
 
 [dir=ltr] .marginRight:last-child {

package/es/FreezeLayer/FreezeLayer.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
@@ -8,6 +8,7 @@ import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import cssJSLogic from './css/cssJSLogic';
 import useFreezeLayer from './useFreezeLayer';
 import style from './css/FreezeLayer.module.css';
+import useDragger from '../Hooks/Dragger/useDragger';
 export default function FreezeLayer(props) {
   let {
     isActive: propsActive,
@@ -24,6 +25,7 @@ export default function FreezeLayer(props) {
     customStyle
   } = props;
   const finalStyle = mergeStyle(style, customStyle);
+  const dragRef = useRef(null);
   const {
     freezeClass
   } = cssJSLogic({
@@ -39,6 +41,16 @@ export default function FreezeLayer(props) {
     isActive: propsActive,
     onClick
   });
+  let refEle = forwardRef || dragRef;
+  useDragger({
+    ParentRef: refEle,
+    boundaryLimit: {
+      top: 0,
+      left: 50,
+      right: 50,
+      bottom: 50
+    }
+  });
   return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: animationName && animationName,
     isActive: isActive,
@@ -49,7 +61,7 @@ export default function FreezeLayer(props) {
     } : {},
     className: freezeClass,
     onClick: handleClick,
-    ref: forwardRef
+    ref: refEle
   }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
     name: childAnimationName,
     isActive: isChildActive,

package/es/Hooks/Dragger/css/Dragger.module.css

@@ -0,0 +1,3 @@
+.dragCursor{
+    cursor: move !important;
+}

package/es/Hooks/Dragger/useDragger.js

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react';
+import { getDotLibraryConfig } from '../../Provider/Config';
+import { elementFinder, DragPosCalc } from './utils/DraggerUtil';
+import style from './css/Dragger.module.css';
+export default function useDragger(_ref) {
+  let {
+    ParentRef,
+    boundaryLimit = getDotLibraryConfig('boundaryLimit')
+  } = _ref;
+  let draggableEle = useRef(null); //To set the Draggable Element
+  let parentEle = useRef(null); // To set the Parent Boundary Element
+  let offset = useRef({
+    x: 0,
+    y: 0
+  }); //To set the x and y Positions
+  let draggable = useRef(false); // To get track of draggable
+
+  useEffect(() => {
+    parentEle.current = ParentRef.current || getDotLibraryConfig('draggerBoundary') || document.body;
+  }, [ParentRef.current]);
+  const elementDrag = e => {
+    e = e || window.event;
+    e.preventDefault();
+    if (draggable.current) {
+      const left = offset.current.x + e.clientX;
+      const top = offset.current.y + e.clientY;
+      if (parentEle.current) {
+        const calcValue = DragPosCalc({
+          x: left,
+          y: top,
+          dragWrapper: parentEle.current,
+          element: draggableEle.current,
+          boundaryLimit
+        });
+        draggableEle.current.style.left = calcValue.x + 'px';
+        draggableEle.current.style.top = calcValue.y + 'px';
+      } else {
+        draggableEle.current.style.left = left + 'px';
+        draggableEle.current.style.top = top + 'px';
+      }
+    }
+  };
+  const closeDragElement = () => {
+    document.removeEventListener('mouseup', closeDragElement);
+    document.removeEventListener('mousemove', elementDrag);
+  };
+  const dragMouseDown = e => {
+    //Initial position
+    requestAnimationFrame(() => {
+      let draggableEleRect = draggableEle.current.getBoundingClientRect();
+      let parentEleRect = parentEle.current.getBoundingClientRect();
+      const relativeRect = {
+        left: draggableEleRect.left - parentEleRect.left,
+        top: draggableEleRect.top - parentEleRect.top
+      };
+      e = e || window.event;
+      e.preventDefault();
+      draggableEle.current.style.top = relativeRect.top + 'px';
+      draggableEle.current.style.left = relativeRect.left + 'px';
+      draggableEle.current.style.width = draggableEleRect.width + 'px';
+      draggableEle.current.style.position = 'fixed';
+      offset.current.x = draggableEle.current.offsetLeft - e.clientX;
+      offset.current.y = draggableEle.current.offsetTop - e.clientY;
+      draggable.current = true;
+      document.addEventListener('mouseup', closeDragElement);
+      document.addEventListener('mousemove', elementDrag);
+    });
+  };
+  useEffect(() => {
+    elementFinder(parentEle.current, '[data-drag-container=true]').then(draggableElement => {
+      draggableEle.current = draggableElement;
+      let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+      // ? draggableEle.current.querySelector("[data-drag-hook=true]")
+      // : draggableEle.current;
+      dragController && dragController.addEventListener('mousedown', dragMouseDown);
+      dragController && dragController.classList.add(style.dragCursor);
+    });
+  }, [parentEle.current]);
+}
+
+//data-drag-container =>  To Mention Draggable Element
+//data-drag-hook =>To Mention Draggable target element

package/es/Hooks/Dragger/utils/DraggerUtil.js

@@ -0,0 +1,66 @@
+export function DragPosCalc(_ref) {
+  let {
+    x,
+    y,
+    element,
+    dragWrapper,
+    boundaryLimit
+  } = _ref;
+  //percent = 50%
+  // const percentobj = { top: 0, left: 10, right: 2, bottom: 90 };
+  let {
+    top,
+    left,
+    right,
+    bottom
+  } = boundaryLimit;
+  const offsetWidth = element ? element.offsetWidth : 0;
+  const offsetHeight = element ? element.offsetHeight : 0;
+  const topOffset = top ? offsetHeight - top : 0;
+  const leftOffset = left ? offsetWidth - left : 0;
+  const rightOffset = right ? offsetWidth - right : 0;
+  const bottomOffset = bottom ? offsetHeight - bottom : 0;
+  if (x < -leftOffset) {
+    //LEFT
+    x = -leftOffset;
+  }
+  if (x > dragWrapper.offsetWidth - element.offsetWidth + rightOffset) {
+    //RIGHT
+    x = dragWrapper.offsetWidth - element.offsetWidth + rightOffset;
+  }
+  if (y < -topOffset) {
+    //TOP
+    y = -topOffset;
+  }
+  if (y > dragWrapper.offsetHeight - element.offsetHeight + bottomOffset) {
+    //BOTTOM
+    y = dragWrapper.offsetHeight - element.offsetHeight + bottomOffset;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+// export const elementFinder = async (Parent, selector) => {
+//   while (Parent && Parent.querySelector(selector) === null) {
+//     await new Promise((resolve) => requestAnimationFrame(resolve));
+//   }
+//   return Parent && Parent.querySelector(selector);
+// };
+
+export const elementFinder = (Parent, selector) => {
+  return new Promise(resolve => {
+    const observer = new MutationObserver(mutations => {
+      const element = Parent.querySelector(selector);
+      if (element) {
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+    observer.observe(Parent, {
+      childList: true,
+      subtree: true
+    });
+  });
+};

package/es/IconButton/IconButton.module.css

@@ -2,8 +2,8 @@
   --iconColor: var(--zdt_iconButton_icon_black);
 }
 .wrapper {
-  height: var(--zd_size28);
-  width: var(--zd_size28);
+  height: 28px;
+  width: 28px;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);

package/es/Image/Image.module.css

@@ -7,5 +7,6 @@
     max-width:100%
 }
 .imgFullSize, .imgMaxFullSize{
+  /*  Variable:Ignore  */
     font-size: 12px
 }

package/es/ImportantNotes/ImportantNotes.module.css

@@ -1,20 +1,20 @@
 .section {
   background: var(--zdt_importantnotes_bg);
-  padding: var(--zd_size5) var(--zd_size10);
+  padding: 5px 10px;
 }
 .title {
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
   line-height: var(--zd_font_size18);
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {
   color: var(--zdt_importantnotes_icon);
   font-size: 0;
-  margin-top: var(--zd_size1);
+  margin-top: 1px;
 }
 [dir=ltr] .icon {
-  margin-right: var(--zd_size5);
+  margin-right: 5px;
 }
 [dir=rtl] .icon {
-  margin-left: var(--zd_size5);
+  margin-left: 5px;
 }

package/es/Loader/Loader.module.css

@@ -10,6 +10,7 @@
 }
 .loader {
   width: 100%;
+  /*  Variable:Ignore  */
   height: 3px;
   background-image: var(--zdt_loader_gradient_bg);
   background-size: 200% auto;