@zohodesk/dot 1.0.0-temp.213 → 1.0.0-temp.30

package/es/avatar/AvatarUser/docs/AvatarUser__default.docs.js

@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarUser from '../AvatarUser';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class AvatarUser__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "small",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xsmall",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      isPaid: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      isPaid: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "small",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xsmall",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      isPortal: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      isPortal: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "8",
+      title: "Twitter",
+      size: "small",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "10",
+      title: "Twitter",
+      size: "xsmall",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      isLocked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      isLocked: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "8",
+      title: "Twitter",
+      size: "small",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      iconName: "ZD-chTwitter",
+      iconSize: "10",
+      title: "Twitter",
+      size: "xsmall",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "medium",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "large",
+      needDelete: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`
+    }, /*#__PURE__*/React.createElement(AvatarUser, {
+      name: "Bharathikannan",
+      size: "xlarge",
+      needDelete: true
+    }))));
+  }
+
+}
+
+if (false) {
+  AvatarUser__default.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -0,0 +1,121 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
+import style from './AvatarWithTeam.module.css';
+export default class AvatarWithTeam extends React.Component {
+  render() {
+    let {
+      name,
+      size,
+      src,
+      teamName,
+      isTeam,
+      needTitle = false,
+      initial,
+      title,
+      palette,
+      textPalette,
+      customTextClass,
+      teamClassName,
+      borderOnActive,
+      customProps
+    } = this.props;
+    let {
+      AvatarWithTeamProps = {},
+      Avatar1Props = {},
+      AvatarTeam1Props = {},
+      Avatar2Props = {},
+      AvatarTeam2Props = {}
+    } = customProps;
+    return /*#__PURE__*/React.createElement("span", _extends({
+      className: `${style.container} `,
+      "data-id": "avatarWithTeamId"
+    }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
+      name: name,
+      src: src,
+      size: size,
+      initial: initial,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      borderOnActive: borderOnActive
+    }, Avatar1Props)) : isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, _extends({
+      name: name,
+      src: src,
+      size: size,
+      needTitle: needTitle,
+      title: needTitle ? title : undefined,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: {
+        customAvatar: customTextClass
+      },
+      borderOnActive: borderOnActive
+    }, AvatarTeam1Props)) : /*#__PURE__*/React.createElement(Avatar, _extends({
+      name: name,
+      src: src,
+      size: size,
+      initial: initial,
+      needTitle: needTitle,
+      palette: palette,
+      textPalette: textPalette,
+      customClass: customTextClass,
+      borderOnActive: borderOnActive
+    }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
+      className: `${style.teamAvatar} ${teamClassName} `,
+      "data-id": "teamNameTestId",
+      "data-title": needTitle ? title : undefined
+    }, /*#__PURE__*/React.createElement(AvatarTeam, _extends({
+      name: teamName,
+      size: "small",
+      palette: palette,
+      textPalette: textPalette,
+      isFilled: true,
+      needTitle: needTitle,
+      customClass: {
+        customAvatar: customTextClass
+      },
+      borderOnActive: borderOnActive
+    }, AvatarTeam2Props))) : null);
+  }
+
+}
+AvatarWithTeam.defaultProps = {
+  size: 'xmedium',
+  isTeam: false,
+  teamClassName: '',
+  borderOnActive: false,
+  customProps: {}
+};
+AvatarWithTeam.propTypes = {
+  customTextClass: PropTypes.string,
+  initial: PropTypes.string,
+  isTeam: PropTypes.bool,
+  name: PropTypes.string,
+  needTitle: PropTypes.bool,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  size: PropTypes.string,
+  src: PropTypes.string,
+  teamClassName: PropTypes.string,
+  teamName: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  title: PropTypes.string,
+  borderOnActive: PropTypes.bool,
+  customProps: PropTypes.shape({
+    AvatarWithTeamProps: PropTypes.object,
+    Avatar1Props: PropTypes.object,
+    AvatarTeam1Props: PropTypes.object,
+    Avatar2Props: PropTypes.object,
+    AvatarTeam2Props: PropTypes.object
+  })
+};
+
+if (false) {
+  AvatarWithTeam.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -0,0 +1,23 @@
+.container {
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  position: relative;
+}
+
+.teamAvatar {
+  position: absolute;
+  bottom: calc(var(--zd_size6) * -1);
+  font-size: 0;
+  padding: var(--zd_size2);
+  border-radius: 50%;
+  transform: scale(0.8);
+  background-color: var(--zdt_avatarteam_default_bg);
+}
+
+[dir=ltr] .teamAvatar {
+  right: calc(var(--zd_size10) * -1);
+}
+
+[dir=rtl] .teamAvatar {
+  left: calc(var(--zd_size10) * -1);
+}

package/es/avatar/AvatarWithTeam/__tests__/AvatarWithTeam.spec.js

@@ -0,0 +1,47 @@
+import expect from 'expect';
+import AvatarWithTeam from '../AvatarWithTeam';
+let defaultProps = {
+  name: "Tested Team",
+  src: null,
+  teamName: null,
+  isTeam: null
+};
+describe('SampleTest', () => {
+  let {
+    renderedDOM,
+    props
+  } = global.setup(AvatarWithTeam, defaultProps);
+  let Avatarid = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'avatarWithTeamId');
+  it(`Check whether Avatar mounted or not`, () => {
+    expect(global.TestUtils.isDOMComponent(Avatarid)).toBeTruthy();
+  });
+  it(`Check children length `, () => {
+    expect(Avatarid.children.length).toBe(1);
+  });
+  let properties = Object.assign({}, defaultProps, {
+    isTeam: true,
+    teamName: "Tested Team",
+    name: "Sangeetha"
+  });
+  it(`Check whether AvatarWithTeam mounted or not`, () => {
+    let {
+      renderedDOM,
+      props
+    } = global.setup(AvatarWithTeam, properties);
+    let AvatarWithTeamId = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'teamNameTestId');
+    expect(global.TestUtils.isDOMComponent(AvatarWithTeamId)).toBeTruthy();
+  });
+  let property = Object.assign({}, defaultProps, {
+    isTeam: true,
+    name: "Tested Team",
+    teamName: null
+  });
+  it(`Check whether AvatarTeam  mounted or not`, () => {
+    let {
+      renderedDOM,
+      props
+    } = global.setup(AvatarWithTeam, property);
+    let AvatarTeamId = global.TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'avatarWithTeamId');
+    expect(global.TestUtils.isDOMComponent(AvatarTeamId)).toBeTruthy();
+  });
+});

package/es/avatar/AvatarWithTeam/docs/AvatarWithTeam__default.docs.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarWithTeam from '../AvatarWithTeam';
+export default class AvatarWithTeam__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarWithTeam, {
+      name: "feedback",
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg",
+      teamName: "BK"
+    }));
+  }
+
+}
+
+if (false) {
+  AvatarWithTeam__default.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

package/es/common/dot_animation.module.css

@@ -0,0 +1,27 @@
+
+[dir=ltr] .rotate{
+  animation-name:  rotate-ltr ;
+}
+[dir=rtl] .rotate{
+  animation-name:  rotate-rtl ;
+}
+
+@keyframes rotate-ltr {
+  from {
+      transform: rotate(0);
+  }
+  
+  to {
+      transform: rotate(360deg);
+  }
+  }
+
+@keyframes rotate-rtl {
+  from {
+      transform: rotate(0);
+  }
+  
+  to {
+      transform: rotate(-360deg);
+  }
+  }

package/es/common/dot_common.module.css

@@ -0,0 +1,4 @@
+.audioImage {
+  background-image: url('../../images/audio_thumbnail.png');
+  background-repeat: no-repeat;
+}

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import style from './SelectDropdown.module.css';
+
+class SelectDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(id, value, index, e) {
+    let {
+      onClick,
+      togglePopup
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+    togglePopup(e, 'bottomRight');
+  }
+
+  handleTogglePopup(e) {
+    let {
+      togglePopup
+    } = this.props;
+    togglePopup(e, 'bottomRight');
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  render() {
+    let {
+      title,
+      selectedText,
+      isPopupOpen,
+      isPopupReady,
+      getTargetRef,
+      getContainerRef,
+      removeClose,
+      suggestions,
+      selectedId,
+      isSearchRequired = false
+    } = this.props;
+    let {
+      idKey,
+      valueKey,
+      options = []
+    } = suggestions;
+    return /*#__PURE__*/React.createElement("span", {
+      ref: getTargetRef,
+      className: style.container,
+      onClick: removeClose
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.departName,
+      onClick: this.handleTogglePopup
+    }, selectedText), /*#__PURE__*/React.createElement("span", {
+      className: style.departIcon,
+      onClick: this.handleTogglePopup
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down1",
+      size: "6"
+    })), /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
+      let {
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+        size: "medium",
+        boxPosition: "bottomRight",
+        isArrow: true,
+        isAnimate: true,
+        right: "-25",
+        isActive: isPopupOpen && isPopupReady,
+        getRef: getContainerRef,
+        isResponsivePadding: true,
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "column",
+        className: `${tabletMode ? '' : style.rulesPopup}`
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: style.rulesDepart
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        text: title
+      })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
+        className: style.searchDepart
+      }, /*#__PURE__*/React.createElement(TextBox, {
+        name: "Test",
+        id: "Test",
+        maxLength: "150",
+        placeHolder: "Search Department"
+      })) : null, /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true
+      }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
+        key: index,
+        autoHover: true,
+        value: obj[valueKey],
+        active: selectedId == obj[idKey],
+        id: obj[idKey],
+        onClick: this.handleClick
+      }))))));
+    }));
+  }
+
+}
+
+SelectDropdown.propTypes = {
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isSearchRequired: PropTypes.bool,
+  onClick: PropTypes.func,
+  removeClose: PropTypes.func,
+  selectedId: PropTypes.string,
+  selectedText: PropTypes.string,
+  suggestions: PropTypes.shape({
+    idKey: PropTypes.string,
+    valueKey: PropTypes.string,
+    options: PropTypes.array
+  }),
+  title: PropTypes.string
+};
+
+if (false) {
+  SelectDropdown.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}
+
+export default Popup(SelectDropdown);

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -0,0 +1,56 @@
+.container {
+  position: relative;
+  line-height: var(--zd_size18);
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size3) var(--zd_size15);
+  cursor: pointer;
+}[dir=ltr] .container {
+  margin-left: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-right: var(--zd_size15);
+}
+.container:hover {
+  background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
+}
+.departName {
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_selectdropdown_departname_text);
+  composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
+}
+.departIcon {
+  color: var(--zdt_selectdropdown_departicon);
+  cursor: pointer;
+}
+[dir=ltr] .departIcon {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .departIcon {
+  margin-right: var(--zd_size5);
+}
+.rulesPopup {
+  max-height: var(--zd_size260);
+  padding: var(--zd_size10) 0;
+}
+
+.rulesDepart {
+  margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5);
+}
+.searchDepart {
+  padding: 0 var(--zd_size20);
+  margin: 0 0 var(--zd_size10) 0;
+}
+
+/*Variables */
+/* select dropdown */
+
+[data-mode='dark'] {
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
+}
+
+[data-mode='default'] {
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
+}

package/es/deprecated/SelectDropdown/docs/SelectDropdown__default.docs.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SelectDropdown from '../SelectDropdown';
+export default class SelectDropdown__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(SelectDropdown, {
+      title: "DropDown",
+      suggestions: {
+        options: [{
+          id: '1',
+          value: 'Zoho desk'
+        }, {
+          id: '2',
+          value: 'Zoho projects'
+        }],
+        idKey: 'id',
+        valueKey: 'value'
+      },
+      selectedText: "Zoho Desk"
+    });
+  }
+
+}
+
+if (false) {
+  SelectDropdown__default.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}

package/es/deprecated/utils/General.js

@@ -0,0 +1,19 @@
+export function formatCurrency(number, symbol) {
+  // format number 1000000 to 1,234,567
+  if (number && number != 0) {
+    let typeOfData = typeof number;
+    let isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
+
+    if (isDecimal) {
+      let val = number.toString().split('.');
+      let arr1 = `${val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
+      let finalVal = `${symbol}${arr1}.${val[1]}`;
+      return finalVal;
+    } else {
+      let value = `${symbol}${number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
+      return value;
+    }
+  }
+
+  return number;
+}