@zohodesk/dot 1.7.21 → 1.7.23

package/es/AudioPlayer/AudioPlayer.module.css

@@ -0,0 +1,146 @@
+.container {
+    height: var(--zd_size30) ;
+    background: var(--zdt_audioplayer_default_bg);
+    border-radius: 4px;
+}
+
+.dragtag {
+    margin: 0 var(--zd_size10) ;
+}
+
+.audioHid {
+    display: none;
+}
+
+.pauseIcon {
+    font-size: var(--zd_font_size13) ;
+}
+
+.iconColor {
+    color: var(--zdt_audioplayer_line_text);
+}
+
+.downloadIcon {
+    font-size: var(--zd_font_size11) ;
+}
+
+[dir=ltr] .timerBox {
+    margin-left: var(--zd_size6) ;
+}
+
+[dir=rtl] .timerBox {
+    margin-right: var(--zd_size6) ;
+}
+
+.rightBox,
+.closeBox {
+    height: 100% ;
+    width: var(--zd_size36) ;
+}
+
+[dir=ltr] .boxLeftRadius {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+[dir=rtl] .boxLeftRadius {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+[dir=ltr] .boxRightRadius {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+[dir=rtl] .boxRightRadius {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.closeBox, .rightBox, .cursor {
+    cursor: pointer;
+}
+
+.downloadBox:hover, .downloadBox:focus, .closeBox:hover, .closeBox:focus {
+    background-color: var(--zdt_audioplayer_input_bg);
+}
+
+.downloadBox:hover .downloadIcon,
+.closeBox:hover .pauseIcon {
+    color: var(--zdt_audioplayer_pauseicon_text);
+}
+
+.line {
+    color: var(--zdt_audioplayer_line_text);
+    font-size: var(--zd_font_size13) ;
+    font-family: var(--zd_semibold);
+}
+
+.disable {
+    pointer-events: none;
+    opacity: 0.4;
+}
+
+/* Audio Range styles */
+
+input::-moz-focus-inner, input::-moz-focus-outer {
+    border: 0;
+}
+
+.audioRangeContainer {
+    position: relative;
+    background-color: var(--zdt_audioplayer_input_bg);
+}
+
+.audioRangeContainer,
+.input,
+.loading {
+    height: var(--zd_size3) ;
+}
+
+.audioRangeContainer, .input, .loading {
+    border-radius: 4px;
+}
+
+.loading {
+    width: 0% ;
+    height: 100% ;
+    position: absolute;
+    pointer-events: none;
+    background-color: var(--zdt_audioplayer_loading_bg);
+}
+
+/* CHROME */
+.input {
+    -webkit-appearance: none;
+    outline: none;
+    background-color: var(--zdt_audioplayer_input_bg);
+    margin: 0 ;
+}
+
+.input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--zd_size7) ;
+    height: var(--zd_size7) ;
+    border-radius: 50%;
+    background-color: var(--zdt_audioplayer_loading_bg);
+}
+
+/* FIREFOX */
+.input::-moz-range-thumb {
+    height: var(--zd_size7) ;
+    width: var(--zd_size7) ;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--zdt_audioplayer_loading_bg);
+    cursor: pointer;
+}
+
+.input::-moz-range-track {
+    height: var(--zd_size3) ;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+/* End of audio range styles */

package/es/AudioPlayer/Timer/Timer.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Timer_propTypes } from "./propTypes/propTypes";
+import { Timer_defaultProps } from "./propTypes/defaultProps";
+import { Container } from '@zohodesk/components/lib/Layout';
+import { addLeadingZeros } from "../utils/utils";
+import style from "./Timer.module.css";
+export default class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.constructTimer = this.constructTimer.bind(this);
+  }
+
+  constructTimer() {
+    let {
+      hour,
+      minute,
+      second,
+      amPm,
+      separator,
+      timerFormat,
+      needCharacter
+    } = this.props;
+    const timeSeparator = separator == 'space' ? ' ' : ':';
+    let timerValue = '';
+    const format = timerFormat.toLowerCase().split(':');
+    hour = addLeadingZeros(hour);
+    minute = addLeadingZeros(minute);
+    second = addLeadingZeros(second);
+
+    if (needCharacter) {
+      hour = `${hour}h`;
+      minute = `${minute}m`;
+      second = `${second}s`;
+    }
+
+    format.map(type => {
+      if (type == 'hh') {
+        timerValue += hour;
+      } else if (type == 'mm') {
+        timerValue += minute;
+      } else if (type == 'ss') {
+        timerValue += second;
+      }
+
+      timerValue += timeSeparator;
+    });
+    timerValue = timerValue.slice(0, -1);
+    amPm && (timerValue = `${timerValue} ${amPm}`);
+    return timerValue;
+  }
+
+  render() {
+    const {
+      dataId
+    } = this.props;
+    const timerValue = this.constructTimer();
+    return /*#__PURE__*/React.createElement(Container, {
+      dataId: dataId,
+      alignBox: "row",
+      className: style.container,
+      flexible: true
+    }, timerValue);
+  }
+
+}
+Timer.defaultProps = Timer_defaultProps;
+Timer.propTypes = Timer_propTypes;

package/es/AudioPlayer/Timer/Timer.module.css

@@ -0,0 +1,5 @@
+.container {
+  font-size: var(--zd_font_size11) ;
+  color: var(--zdt_timer_default_text);
+  text-align: center;
+}

package/es/AudioPlayer/Timer/__tests__/Timer.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Timer from "../Timer";
+const defaultProps = {
+  dataId: 'CBTimer'
+};
+describe('Timer test Cases', () => {
+  // const {props,renderedDOM} = setup(Timer,Object.assign({},defaultProps))
+  // it('Should render Component',()=>{
+  //     const component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM,'CBTimer');
+  //     expect(component.length).toBe(1);
+  // })
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Timer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/AudioPlayer/Timer/__tests__/__snapshots__/Timer.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timer test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container flex cover rowdir"
+    data-id="CBTimer"
+    data-selector-id="container"
+    data-test-id="CBTimer"
+  >
+    undefined:undefined
+  </div>
+</DocumentFragment>
+`;

package/es/AudioPlayer/Timer/propTypes/defaultProps.js

@@ -0,0 +1,4 @@
+export const Timer_defaultProps = {
+  separator: 'colon',
+  timerFormat: 'mm:ss'
+};

package/es/AudioPlayer/Timer/propTypes/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const Timer_propTypes = {
+  dataId: PropTypes.string,
+  amPm: PropTypes.string,
+  hour: PropTypes.string,
+  minute: PropTypes.string,
+  needCharacter: PropTypes.bool,
+  second: PropTypes.string,
+  separator: PropTypes.oneOf(['space', 'colon']),
+  timerFormat: PropTypes.string
+};

package/es/AudioPlayer/__tests__/AudioPlayer.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AudioPlayer from "../AudioPlayer"; // import TestUtils from 'react-dom/test-utils';
+
+const defaultProps = {
+  togglePlayer: jest.fn(),
+  downloadFile: jest.fn(),
+  minute: '02',
+  second: '03',
+  durationInSec: '203',
+  src: "https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+};
+describe('AudioPlayer Test Cases', () => {
+  // const { props,renderedDOM } = setup(
+  //     AudioPlayer,Object.assign({},defaultProps));
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // it('should render component', () => {
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'AudioPlayer');
+  //     expect(component.length).toBe(1);
+  // })
+  // it('should close player onclicking close',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioPlayerClose'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.togglePlayer).toHaveBeenCalled();
+  // })
+  // it('should download audio onclicking download',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioDownload'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.downloadFile).toHaveBeenCalled();
+  // })
+});

package/es/AudioPlayer/__tests__/__snapshots__/AudioPlayer.spec.js.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioPlayer Test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="AudioRange"
+    data-selector-id="container"
+    data-test-id="AudioRange"
+    tabindex="0"
+  >
+    <div
+      class="container flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <audio
+        class="audioHid"
+        controls=""
+        preload="auto"
+      >
+        <source
+          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+          type="audio/mpeg"
+        />
+      </audio>
+      <div
+        class="rightBox downloadBox boxLeftRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_playpause"
+          data-selector-id="container"
+          data-test-id="AudioRange_playpause"
+          data-title="Play"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="timerBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="container flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            00:00:00
+          </div>
+        </div>
+      </div>
+      <div
+        class="dragtag disable grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="audioRangeContainer flex cover coldir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <span
+            class="loading"
+          />
+          <input
+            class="input"
+            data-id="AudioRange"
+            max="0"
+            min="0"
+            step="1"
+            type="range"
+            value="0"
+          />
+        </div>
+      </div>
+      <div
+        class="rightBox downloadBox  shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_download"
+          data-selector-id="container"
+          data-test-id="AudioRange_download"
+          data-title="Download"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="closeBox boxRightRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_close"
+          data-selector-id="container"
+          data-test-id="AudioRange_close"
+          data-title="Close"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/es/AudioPlayer/propTypes/defaultProps.js

@@ -0,0 +1,14 @@
+export const AudioPlayer_defaultProps = {
+  isPlay: false,
+  timerFormat: 'mm:ss',
+  forwardStepInSec: 5,
+  backwardStepInSec: 5,
+  needClose: true,
+  needDownload: true,
+  needMuteIcon: false,
+  i18nKeys: {},
+  dataId: 'AudioPlayer',
+  customClass: '',
+  range: 0,
+  dataId: 'AudioRange'
+};

package/es/AudioPlayer/propTypes/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const AudioPlayer_propTypes = {
+  backwardStepInSec: PropTypes.string,
+  forwardStepInSec: PropTypes.string,
+  getAudioDuration: PropTypes.func,
+  duration: PropTypes.string,
+  id: PropTypes.string,
+  isPlay: PropTypes.bool,
+  needClose: PropTypes.bool,
+  needDownload: PropTypes.bool,
+  needMuteIcon: PropTypes.bool,
+  onAudioLoading: PropTypes.func,
+  onAudioSeeking: PropTypes.func,
+  onClose: PropTypes.func,
+  onDownloading: PropTypes.func,
+  onError: PropTypes.func,
+  onMuteUnmute: PropTypes.func,
+  onPause: PropTypes.func,
+  onPlay: PropTypes.func,
+  src: PropTypes.string,
+  timerFormat: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    playTitle: PropTypes.string,
+    pauseTitle: PropTypes.string,
+    downloadTitle: PropTypes.string,
+    closeTitle: PropTypes.string,
+    muteTitle: PropTypes.string,
+    unmuteTitle: PropTypes.string
+  }),
+  dataId: PropTypes.string,
+  customClass: PropTypes.string,
+  range: PropTypes.number
+};

package/es/AudioPlayer/utils/utils.js

@@ -0,0 +1,24 @@
+export function openInNewTabWithNoopener(url) {
+  let targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
+  const aTag = document.createElement('a');
+  aTag.rel = 'noopener noreferrer';
+  aTag.target = targetnName;
+  aTag.href = url;
+  aTag.click();
+}
+export function addLeadingZeros(number) {
+  let desiredLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '2';
+
+  if (typeof number !== 'undefined') {
+    number = `${number}`;
+    desiredLength = Number(desiredLength);
+
+    if (number.length < desiredLength) {
+      for (let i = desiredLength - number.length; i > 0; i--) {
+        number = `0${number}`;
+      }
+    }
+
+    return number;
+  }
+}

package/es/Hooks/Dragger/useDragger.js

@@ -22,6 +22,12 @@ export default function useDragger(_ref) {
     y: 0
   });
   const draggable = useRef(false);
+  const dragStarted = useRef(false);
+  const initialMouse = useRef({
+    x: 0,
+    y: 0
+  });
+  const DRAG_DISTANCE_THRESHOLD = 4;
   useEffect(() => {
     if (isActive) {
       parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
@@ -48,49 +54,62 @@ export default function useDragger(_ref) {
     e = e || window.event;
     e.preventDefault();
 
-    if (draggable.current) {
-      const left = offset.current.x + e.clientX;
-      const top = offset.current.y + e.clientY;
-      const {
-        x,
-        y
-      } = calculateDragPosition(left, top);
-      draggableEle.current.style.left = x + 'px';
-      draggableEle.current.style.top = y + 'px';
+    if (!draggable.current) {
+      return;
+    }
+
+    if (!dragStarted.current) {
+      const dx = Math.abs(e.clientX - initialMouse.current.x);
+      const dy = Math.abs(e.clientY - initialMouse.current.y);
+
+      if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
+        return;
+      }
+
+      const draggableEleRect = draggableEle.current.getBoundingClientRect();
+      const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
+        left: 0,
+        top: 0
+      };
+      offset.current.x = draggableEleRect.left - e.clientX;
+      offset.current.y = draggableEleRect.top - e.clientY;
+      const relativeRect = {
+        left: draggableEleRect.left - parentEleRect.left,
+        top: draggableEleRect.top - parentEleRect.top
+      };
+      const styleRef = draggableEle.current.style;
+      styleRef.top = `${relativeRect.top}px`;
+      styleRef.left = `${relativeRect.left}px`;
+      styleRef.width = `${draggableEleRect.width}px`;
+      styleRef.position = "fixed";
+      styleRef.bottom = "initial";
+      styleRef.right = "initial";
+      dragStarted.current = true;
     }
+
+    const left = offset.current.x + e.clientX;
+    const top = offset.current.y + e.clientY;
+    const {
+      x,
+      y
+    } = calculateDragPosition(left, top);
+    draggableEle.current.style.left = `${x}px`;
+    draggableEle.current.style.top = `${y}px`;
   }, [calculateDragPosition]);
   const closeDragElement = useCallback(() => {
     document.removeEventListener('mouseup', closeDragElement);
     document.removeEventListener('mousemove', elementDrag);
+    dragStarted.current = false;
+    draggable.current = false;
   }, []);
   const dragMouseDown = useCallback(e => {
     e = e || window.event; // e.preventDefault();
 
-    const draggableEleRect = draggableEle.current.getBoundingClientRect();
-    const style = draggableEle.current.style;
-    const {
-      width
-    } = draggableEleRect;
-    const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
-      left: 0,
-      top: 0
+    initialMouse.current = {
+      x: e.clientX,
+      y: e.clientY
     };
-    const relativeRect = {
-      left: draggableEleRect.left - parentEleRect.left,
-      top: draggableEleRect.top - parentEleRect.top
-    };
-    const {
-      top,
-      left
-    } = relativeRect;
-    style.top = `${top}px`;
-    style.left = `${left}px`;
-    style.width = `${width}px`;
-    style.bottom = 'initial';
-    style.right = 'initial';
-    style.position = 'fixed';
-    offset.current.x = draggableEle.current.offsetLeft - e.clientX;
-    offset.current.y = draggableEle.current.offsetTop - e.clientY;
+    dragStarted.current = false;
     draggable.current = true;
     document.addEventListener('mouseup', closeDragElement);
     document.addEventListener('mousemove', elementDrag);

package/es/dot_layer.module.css

@@ -0,0 +1 @@
+@layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;

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

@@ -5,6 +5,7 @@
   display: inline;
 }
 .icon{
+  /*css:theme-validation:ignore*/
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -6,6 +6,7 @@
   composes: varClass;
   min-height: var(--zd_size54) ;
   position: relative;
+  /*css:theme-validation:ignore*/
   color: var(--zdt_desktopnotification_text);
   background-color: var(--alert_lookup_bg_color);
   border-style: solid;