@zohodesk/dot 1.0.0-beta.209 → 1.0.0-beta.211

package/es/Message/Message.module.css

@@ -1,103 +0,0 @@
-.message {
-  position: absolute;
-  top: 0;
-  z-index: 1000;
-  /*Hook for editor alert*/
-  pointer-events: none;
-  text-align: center;
-}[dir=ltr] .message {
-  right: 0;
-  left: 0;
-}[dir=rtl] .message {
-  left: 0;
-  right: 0;
-}
-
-.container {
-  position: relative;
-  display: inline-block;
-  pointer-events: initial;
-  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
-  border-radius: 0 0 5px 5px;
-  background: var(--zdt_message_default_bg);
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10);
-}
-
-.text {
-  max-width: var(--zd_size480);
-  display: inline-block;
-  word-break: break-word;
-  font-size: var(--zd_font_size14);
-  vertical-align: middle;
-}
-
-[dir=ltr] .text {
-  text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
-}
-
-.icon {
-  position: absolute;
-  top: 0;
-  width: var(--zd_size40);
-  display: inline-block;
-  height: 100%;
-}
-
-[dir=ltr] .icon {
-  left: 0;
-  border-bottom-left-radius: 5px;
-}
-
-[dir=rtl] .icon {
-  right: 0;
-  border-bottom-right-radius: 5px;
-}
-
-.success {
-  composes: icon;
-  background: var(--zdt_message_success_bg);
-}
-
-.alert {
-  composes: icon;
-  background: var(--zdt_message_alert_bg);
-}
-
-.info {
-  composes: icon;
-  background: var(--zdt_message_info_bg);
-}
-
-.tickIcn {
-  color: var(--zdt_message_tickicon);
-  font-size: var(--zd_font_size16);
-  position: absolute;
-  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.close {
-  color: var(--zdt_message_close_text);
-  font-size: var(--zd_font_size16);
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-[dir=ltr] .close {
-  margin-left: var(--zd_size10);
-}
-
-[dir=rtl] .close {
-  margin-right: var(--zd_size10);
-}

package/es/MessageBanner/MessageBanner.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from '../Link/Link';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './MessageBanner.module.css';
-export default class MessageBanner extends React.Component {
-  render() {
-    let {
-      type,
-      message,
-      onClose,
-      href,
-      onClick,
-      urlText,
-      palette,
-      customClass,
-      dataId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
-      className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
-      alignBox: "row",
-      isCover: false,
-      dataId: dataId
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.content,
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.message,
-      adjust: true,
-      shrink: true,
-      "data-title": message
-    }, message), href && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
-      href: href,
-      onClick: onClick,
-      className: style.link,
-      target: "_blank"
-    }, urlText)))), onClose ? /*#__PURE__*/React.createElement(Box, {
-      className: style.close,
-      onClick: onClose
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-closee",
-      size: "35"
-    }))) : null);
-  }
-
-}
-MessageBanner.defaultProps = {
-  type: 'primary',
-  palette: 'default',
-  customClass: '',
-  dataId: 'MessageBanner'
-};
-MessageBanner.propTypes = {
-  customClass: PropTypes.string,
-  href: PropTypes.string,
-  message: PropTypes.string,
-  onClick: PropTypes.func,
-  onClose: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'blue', 'white']),
-  type: PropTypes.oneOf(['primary', 'secondary']),
-  urlText: PropTypes.string,
-  dataId: PropTypes.string
-};
-
-if (false) {
-  MessageBanner.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/es/MessageBanner/MessageBanner.module.css

@@ -1,46 +0,0 @@
-.type_secondary {
-  max-width: var(--zd_size468);
-  border-radius: 3px;
-  margin: 0 auto;
-}
-.message {
-  color: var(--zdt_messagebanner_text);
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  padding: var(--zd_size10) 0;
-}
-[dir=ltr] .message {
-  margin-left: var(--zd_size10);
-}
-[dir=rtl] .message {
-  margin-right: var(--zd_size10);
-}
-.link {
-  color: var(--zdt_messagebanner_link_text);
-}
-[dir=ltr] .link {
-  margin-left: var(--zd_size5);
-}
-[dir=rtl] .link {
-  margin-right: var(--zd_size5);
-}
-.message,.link{font-size:  var(--zd_font_size14);}
-.close {
-  color: var(--zdt_messagebanner_close_text);
-  cursor: pointer;
-}
-.type_primary .close:hover {
-  background: var(--zdt_messagebanner_close_hover_bg);
-}
-.close:hover {
-  color: var(--zdt_messagebanner_close_hover_text);
-}
-
-.palette_default {
-  background: var(--zdt_messagebanner_default_bg);
-}
-.palette_blue {
-  background: var(--zdt_messagebanner_blue_bg);
-}
-.palette_white {
-  background: var(--zdt_messagebanner_white_text);
-}

package/es/NewStar/NewStar.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { Container } from '@zohodesk/components/lib/Layout';
-import style from './NewStar.module.css';
-export default class NewStar extends React.Component {
-  render() {
-    let {
-      palette,
-      customClass,
-      position
-    } = this.props;
-    let alignPosition = {
-      topRight: {
-        className: style.topRight,
-        align: 'right',
-        alignBox: 'row',
-        reverse: 'wrap'
-      },
-      topLeft: {
-        className: style.topLeft,
-        align: 'left',
-        alignBox: 'row',
-        reverse: 'wrap'
-      },
-      bottomLeft: {
-        className: style.bottomLeft,
-        align: 'left',
-        alignBox: 'column-reverse',
-        reverse: 'wrap'
-      },
-      bottomRight: {
-        className: style.bottomRight,
-        align: 'right',
-        alignBox: 'column',
-        reverse: 'wrap-reverse'
-      }
-    };
-    return /*#__PURE__*/React.createElement(Container, {
-      alignBox: alignPosition[position].alignBox,
-      isCover: false,
-      className: `${style.star} ${alignPosition[position].className} ${customClass}`,
-      wrap: alignPosition[position].reverse,
-      align: alignPosition[position].align
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-snippetStar",
-      iconClass: `${style[palette]} ${style.starOne}`,
-      size: "10"
-    }), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-snippetStar",
-      iconClass: `${style[palette]} ${style.starTwo}`,
-      size: "10"
-    }), /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-snippetStar",
-      iconClass: `${style[palette]} ${style.starThree}`,
-      size: "10"
-    }));
-  }
-
-}
-NewStar.propTypes = {
-  customClass: PropTypes.string,
-  palette: PropTypes.oneOf(['green', 'blue', 'yellow']),
-  position: PropTypes.oneOf(['topRight', 'topLeft', 'bottomRight', 'bottomLeft'])
-};
-NewStar.defaultProps = {
-  customClass: '',
-  position: 'topRight'
-};
-
-if (false) {
-  NewStar.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/es/NewStar/NewStar.module.css

@@ -1,110 +0,0 @@
-.star {
-  position: absolute;
-
-  height: var(--zd_size20);
-  width: var(--zd_size21);
-}
-.topLeft {
-  top: 0;
-}
-[dir=ltr] .topLeft {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-[dir=rtl] .topLeft {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-.topRight {
-  top: 0;
-}
-[dir=ltr] .topRight {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-[dir=rtl] .topRight {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-.bottomLeft {
-  bottom: 0;
-}
-[dir=ltr] .bottomLeft {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=rtl] .bottomLeft {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-.bottomRight {
-  bottom: 0;
-}
-[dir=ltr] .bottomRight {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-[dir=rtl] .bottomRight {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=ltr] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-[dir=rtl] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-.green::before {
-  color: var(--zdt_newstar_green_text);
-}
-.yellow::before {
-  color: var(--zdt_newstar_yellow_text);
-}
-.blue::before {
-  color: var(--zdt_newstar_blue_text);
-}
-.starOne {
-  composes: stars;
-}
-.starTwo {
-  composes: stars;
-}
-[dir=ltr] .starTwo {
-  animation-delay: 0.5s;
-}
-[dir=rtl] .starTwo {
-  animation-delay: 0.5s;
-}
-.starThree {
-  composes: stars;
-}
-[dir=ltr] .starThree {
-  animation-delay: 1s;
-}
-[dir=rtl] .starThree {
-  animation-delay: 1s;
-}
-
-@keyframes twinkle {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}
-
-@keyframes star-scale {
-  0% {
-    transform: perspective(1px) scale(0.7);
-  }
-  50% {
-    transform: perspective(1px) scale(1, 1);
-  }
-  100% {
-    transform: perspective(1px) scale(0.7);
-  }
-}

package/es/PlusIcon/PlusIcon.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './PlusIcon.module.css';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
-export default class PlusIcon extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      dataId,
-      iconName,
-      iconClass,
-      iconSize,
-      size,
-      onClick,
-      title,
-      customClass
-    } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
-      className: style.container,
-      onClick: onClick,
-      "data-id": dataId,
-      "data-title": title
-    }, /*#__PURE__*/React.createElement(AvatarIcon, {
-      name: iconName,
-      iconClass: `${iconClass} ${style.icon}`,
-      iconSize: iconSize,
-      size: size,
-      className: `${customClass} ${style.plusIcon}`
-    }));
-  }
-
-}
-PlusIcon.defaultProps = {
-  size: 'xmedium',
-  iconName: 'ZD-plus',
-  iconSize: '16',
-  dataId: 'addreqNowbutton',
-  iconClass: '',
-  customClass: ''
-};
-PlusIcon.propTypes = {
-  dataId: PropTypes.string,
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  onClick: PropTypes.func,
-  size: PropTypes.string,
-  title: PropTypes.string,
-  customClass: PropTypes.string
-};
-
-if (false) {
-  PlusIcon.docs = {
-    componentGroup: 'Common',
-    folderName: 'Ticket DetailView'
-  };
-}

package/es/PlusIcon/PlusIcon.module.css

@@ -1,16 +0,0 @@
-.container {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-  border-radius: 50%;
-  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
-  cursor: pointer;
-  background-color: var(--zdt_plusicon_bg);
-}
-.plusIcon {
-  border: 1px solid var(--zdt_plusicon_border);
-}
-.icon {
-  color: var(--zdt_plusicon_text);
-}
-.plusIcon:hover {
-  border-color: var(--zdt_plusicon_hover_border);
-}

package/es/Provider.js

@@ -1,205 +0,0 @@
-import React from 'react';
-import { I18NProvider } from '@zohodesk/i18n';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
-import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit';
-import datetime from '@zohodesk/datetimejs';
-import i18n from './i18n';
-/* component pkg - default mode & themes */
-
-import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
-/* component pkg - dark mode & themes */
-
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
-/* svg pkg - default mode & themes */
-
-import '@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css';
-/* svg pkg - dark mode & themes */
-
-import '@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css';
-import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
-import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import Switch from '@zohodesk/components/lib/Switch/Switch';
-/* dot pkg - default mode & themes */
-
-import '../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
-import '../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css';
-import '../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
-import '../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css';
-import '../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
-import '../assets/Appearance/default/mode/dotDefaultMode.module.css';
-/* dot pkg - dark mode & themes */
-
-import '../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
-import '../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css';
-import '../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
-import '../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css';
-import '../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
-import '../assets/Appearance/dark/mode/dotDarkMode.module.css';
-datetime.tz.set({
-  timezone: 'Asia/Kolkata',
-  _packed: '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
-  _default: 'Asia/Kolkata'
-});
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    setGlobalIdPrefix('ZD');
-    setInitialZIndex('10');
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-    this.switchMode = this.switchMode.bind(this);
-    this.setTheme = this.setTheme.bind(this);
-  }
-
-  switchMode() {
-    let appearanceName = this.state.appearanceName;
-
-    if (appearanceName == 'default') {
-      this.setState({
-        appearanceName: 'dark'
-      });
-    } else {
-      this.setState({
-        appearanceName: 'default'
-      });
-    }
-  }
-
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-
-  render() {
-    let {
-      appearanceName,
-      themeName
-    } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-    return /*#__PURE__*/React.createElement(I18NProvider, {
-      i18n: i18n,
-      timeZone: "Asia/Kolkata",
-      datePattern: '',
-      dateTimeFormat: '',
-      timeFormat: '',
-      direction: 'ltr'
-    }, /*#__PURE__*/React.createElement(LibraryContext.Provider, {
-      value: {
-        isReducedMotion: false,
-        direction: 'ltr'
-      }
-    }, /*#__PURE__*/React.createElement(AppContainer, {
-      customProps: {
-        ExtraProps: {
-          'data-mode': appearanceName,
-          'data-theme': themeName
-        }
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: 'fixed',
-        bottom: '0',
-        backgroundColor: '#272727',
-        padding: '10px',
-        borderRadius: '15px 15px 0 0',
-        minWidth: '100px',
-        textAlign: 'center',
-        left: '50%',
-        transform: 'translate(-50%)',
-        boxShadow: '0 0 3px #000',
-        fontSize: '12px',
-        zIndex: '1000',
-        display: 'flex',
-        alignItems: 'center'
-      }
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Switch, {
-      id: "switchMode",
-      text: "Light/Night Mode",
-      labelSize: "small",
-      onChange: this.switchMode,
-      checked: appearanceName == 'dark'
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Blue Theme",
-      style: themeClass,
-      onClick: () => this.setTheme('blue')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Green Theme",
-      style: Object.assign({}, themeClass, green),
-      onClick: () => this.setTheme('green')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Red Theme",
-      style: Object.assign({}, themeClass, red),
-      onClick: () => this.setTheme('red')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Orange Theme",
-      style: Object.assign({}, themeClass, orange),
-      onClick: () => this.setTheme('orange')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Yellow Theme",
-      style: Object.assign({}, themeClass, yellow),
-      onClick: () => this.setTheme('yellow')
-    }))))));
-  }
-
-}