@zohodesk/components 1.0.0-temp-46 → 1.0.0-temp-49

package/es/common/docStyle.module.css

@@ -1,11 +1,11 @@
 .cboth::after {
   content: '.';
-  clear: both;
   display: block;
   font-size: 0;
   height: 0;
   line-height: 0;
   visibility: hidden;
+  clear: both;
 }
 
 .m10 {
@@ -16,10 +16,14 @@
   margin: 50px;
 }
 
-.pl10 {
+[dir=ltr] .pl10 {
   padding-left: 10px;
 }
 
+[dir=rtl] .pl10 {
+  padding-right: 10px;
+}
+
 .p10 {
   padding: 10px;
 }
@@ -61,10 +65,14 @@
   margin-bottom: 20px;
 }
 
-.mr20 {
+[dir=ltr] .mr20 {
   margin-right: 20px;
 }
 
+[dir=rtl] .mr20 {
+  margin-left: 20px;
+}
+
 .w60 {
   width: 60%;
 }
@@ -90,22 +98,25 @@
 }
 
 .dark {
-  background-color: var(--dot_black);
   composes: p10;
+  background-color: var(--dot_black);
 }
 
 .table {
-  border: 1px solid var(--zd_smoke84);
-  border-radius: 3px;
   composes: p10;
   composes: cboth;
+  border: 1px solid var(--zd_smoke84);
+  border-radius: 3px;
 }
 
-.table .w60,
-.table .w40 {
+[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
   float: left;
 }
 
+[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
+  float: right;
+}
+
 .tableheading {
   composes: blue;
   background:var(--zd_smoke1);
@@ -117,10 +128,10 @@
   composes: p10;
   composes: m10;
   width: 200px;
-  border: 1px solid var(--zd_smoke83);
-  border-radius: 3px;
   composes: tcenter;
   font-weight: bold;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
 }
 
 .palette .palettecard {
@@ -136,10 +147,10 @@
 
 .fontlist {
   composes: tcenter;
-  border: 1px solid var(--zd_smoke83);
-  border-radius: 3px;
   composes: p10;
   composes: m10;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
 }
 
 .fontlist span {
@@ -148,9 +159,9 @@
 }
 
 .cover {
-  border: 1px solid var(--zd_smoke1);
   composes: p10;
   composes: m10;
+  border: 1px solid var(--zd_smoke1);
   border-radius: 5px;
 }
 
@@ -194,8 +205,7 @@
   background-color: #e2e4e6;
   padding: 5px;
 }
-.content,
-.trow {
+.content, .trow {
   padding: 5px;
 }
 .trow {
@@ -205,14 +215,19 @@
   background-color: #f6f6f6;
 }
 .colorvalue {
+  font-size: 13px;
+  color: #000;
   background-color: #e2e4e6;
   padding: 3px;
-  margin-right: 3px;
   border-radius: 5px;
-  font-size: 13px;
-  color: #000;
   cursor: pointer;
 }
+[dir=ltr] .colorvalue {
+  margin-right: 3px;
+}
+[dir=rtl] .colorvalue {
+  margin-left: 3px;
+}
 .rect {
   width: 40px;
   height: 40px;
@@ -228,20 +243,25 @@
   flex-direction: column;
   border: 1px dotted #ccc;
   padding: 4px 6px;
+}
+[dir=ltr] .nestedDiv {
   margin-right: 5px;
 }
+[dir=rtl] .nestedDiv {
+  margin-left: 5px;
+}
 .para {
   font-size: 13px;
   margin-bottom: 5px;
 }
 
 [data-mode='default'] {
-  background: #fff;
   color: #000;
+  background: #fff;
 }
 [data-mode='dark'] {
-  background: #232B38;
   color: #E2E4E6;
+  background: #232B38;
 }
 
 .baseHue {
@@ -255,8 +275,13 @@
   --avatar_bg_color: hsl(var(--hue), 100%, 90%);
   --avatar_border_color: hsl(var(--hue), 100%, 60%);
   --avatar_text_color: hsl(var(--hue), 100%, 40%);
+}
+[dir=ltr] .customAvatar {
   --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
 }
+[dir=rtl] .customAvatar {
+  --avatar_border_radius: 12px 0;
+}
 .customAvatar:hover {
   --avatar_border_width: 2px;
   --avatar_bg_color: hsl(var(--hue), 100%, 85%);
@@ -391,10 +416,15 @@
 .customDropbox {
   composes: baseHue;
   --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
 }
+[dir=ltr] .customDropbox {
+  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
+}
+[dir=rtl] .customDropbox {
+  --dropbox_border_radius: 0 30px;
+}
 .customDropbox:hover {
   --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
   --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
@@ -598,24 +628,39 @@
 }
 .flagRibbon {
   composes: ribbon;
+}
+[dir=ltr] .flagRibbon {
   --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
   --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
 }
+[dir=rtl] .flagRibbon {
+  --ribbon_padding: 10px 20px;
+  --ribbon_flag_border_width: 20px 0 20px 10px;
+}
 .tagRibbon {
   composes: ribbon;
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-color: hsl(var(--hue), 100%, 50%);
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
   height: 56px;
   --ribbon_tag_before_width: 40px;
   --ribbon_tag_before_height: 40px;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
   --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
   --ribbon_tag_before_left: -20px;
   --ribbon_tag_before_top: 6px;
   --ribbon_tag_before_border_radius: 0;
+  border-color: hsl(var(--hue), 100%, 50%);
+}
+[dir=ltr] .tagRibbon {
+  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
+  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
+  margin-left: 30px;
+  padding: 18px 30px/*rtl: 18px 30px*/;
+  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
+}
+[dir=rtl] .tagRibbon {
+  border-width: 2px 0 2px 2px;
+  border-radius: 6px 0 0 6px;
+  margin-right: 30px;
+  padding: 18px 30px;
+  --ribbon_tag_before_border_width: 2px 2px 0 0;
 }
 .boxRibbon {
   composes: ribbon;
@@ -650,10 +695,10 @@
 /* custom textboxicon css */
 .customTboxwrap {
   composes: baseHue;
-  background-color: hsl(var(--hue), 100%, 90%);
-  margin: 5px 0;
   --textboxicon_icon_margin: 4px 10px;
   --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
+  background-color: hsl(var(--hue), 100%, 90%);
+  margin: 5px 0;
 }
 .customTbox {
   --textbox_text_color: hsl(var(--hue), 100%, 50%);
@@ -680,6 +725,8 @@
 .tBoxIconRead,
 .tBoxIconDisable {
   composes: baseHue;
+}
+.tBoxIconRead, .tBoxIconDisable {
   background-color: hsl(var(--hue), 100%, 90%);
   margin: 5px 0;
 }
@@ -693,11 +740,11 @@
 /* custom textarea css */
 .customTextarea {
   composes: baseHue;
-  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 50%);
   --textarea_text_color: hsl(var(--hue), 100%, 50%);
   --textarea_padding: 2px 10px;
+  background-color: hsl(var(--hue), 100%, 97%);
 }
 .customTextarea:hover {
   --textarea_border_color: hsl(var(--hue), 100%, 40%);
@@ -707,9 +754,9 @@
 }
 .disabledTarea {
   composes: baseHue;
-  background-color: hsl(var(--hue), 100%, 97%);
   --textarea_border_width: 1px;
   --textarea_border_color: hsl(var(--hue), 100%, 80%);
   --textarea_text_color: hsl(var(--hue), 100%, 80%);
   --textarea_padding: 2px 10px;
+  background-color: hsl(var(--hue), 100%, 97%);
 }

package/es/common/transition.module.css

@@ -1,6 +1,7 @@
 .zoomInEnter,
 .zoomInLeave.zoomInLeaveActive {
   opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
   transform: perspective(1px) scale(1.5) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -8,6 +9,8 @@
 .zoomInEnter.zoomInEnterActive,
 .zoomInLeave {
   opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
   transform: perspective(1px) scale(1) translateZ(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -15,15 +18,20 @@
 
 .scaleInEnter,
 .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
   opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 .scaleInEnter.scaleInEnterActive,
 .scaleInLeave {
-  transform: scale(1);
   opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -31,6 +39,9 @@
 .fadeInEnter,
 .fadeInLeave.fadeInLeaveActive {
   opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -38,6 +49,9 @@
 .fadeInEnter.fadeInEnterActive,
 .fadeInLeave {
   opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
@@ -45,14 +59,27 @@
 .slideLeftEnter,
 .slideLeftLeave.slideLeftLeaveActive {
   opacity: 0;
-  transform: translateX(110%);
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
 .slideLeftEnter.slideLeftEnterActive,
 .slideLeftLeave {
   opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
   transform: translateX(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -61,6 +88,9 @@
 .slideDownEnter,
 .slideDownLeave.slideDownLeaveActive {
   opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
   transform: translateY(-100%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -69,6 +99,9 @@
 .slideDownEnter.slideDownEnterActive,
 .slideDownLeave {
   opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
   transform: translateY(0%);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -77,14 +110,27 @@
 .skewInEnter,
 .skewInLeave.skewInLeaveActive {
   opacity: 0;
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
   transition-duration: var(--zd_transition3);
   transition-property: all;
 }
 
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
 .skewInEnter.skewInEnterActive,
 .skewInLeave {
   opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
   transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
   transition-duration: var(--zd_transition3);
   transition-property: all;
@@ -98,9 +144,3 @@
 .defaultLeave {
   display: block;
 }
-
-.noneEnter,
-.noneEnter.noneEnterActive,
-.noneLeave,
-.noneLeave.noneLeaveActive {
-}

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
 .buttonReset {
-  border: inherit;
   outline: 0;
-  background-color: inherit;
   font: inherit;
-  padding: 0;
   color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0;
   text-align: inherit;
 }

package/es/utils/Common.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace";
 //$Id$//
 import viewPort from '../Popup/viewPort';
 const {
@@ -39,11 +38,14 @@ export function encodeForHtml(str) {
 
   return str;
 }
-export function getListOfDetails(Obj = {}, fn) {
+export function getListOfDetails() {
+  let Obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let fn = arguments.length > 1 ? arguments[1] : undefined;
   const ids = Object.keys(Obj) || [];
   return ids.map(id => fn(Obj[id]));
 }
-export function capitalize(value = '') {
+export function capitalize() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let newValue = '';
 
   for (let i = 0; i < value.length; i++) {
@@ -56,12 +58,18 @@ export function capitalize(value = '') {
 
   return newValue;
 }
-export function bind(...handlers) {
+export function bind() {
+  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
+    handlers[_key] = arguments[_key];
+  }
+
   handlers.forEach(handler => {
     this[handler] = this[handler].bind(this);
   });
 }
-export function getFullName(firstName = '', lastName = '') {
+export function getFullName() {
+  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let fullName = '';
 
   if (firstName !== null && firstName !== '') {
@@ -74,7 +82,8 @@ export function getFullName(firstName = '', lastName = '') {
 
   return fullName;
 }
-export function getStringifiedOutputForJson(input = {}) {
+export function getStringifiedOutputForJson() {
+  let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const keys = Object.keys(input);
   const modifiedInput = keys.reduce((curr, next) => {
     const values = input[next] || [];
@@ -110,14 +119,19 @@ export function filterValue(obj, val) {
   });
   return result;
 }
-export function merge(oldObj = {}, newObj) {
+export function merge() {
+  let oldObj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let newObj = arguments.length > 1 ? arguments[1] : undefined;
   const copyOfOld = Object.assign({}, oldObj);
   return Object.keys(newObj).reduce((res, key) => {
     res[key] = Object.assign({}, res[key] || {}, newObj[key]);
     return res;
   }, copyOfOld);
 }
-export function formatValue(values = [], valueField = 'id', textField = 'name') {
+export function formatValue() {
+  let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let valueField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  let textField = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'name';
   return values && values.map(value => {
     let formattedValue = value;
 
@@ -141,7 +155,8 @@ export function bytesToSize(bytes) {
   const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
   return `${Math.round(bytes / Math.pow(1024, i), 2)} ${sizes[i]}`;
 }
-export function getMemSize(bytes, size = !0) {
+export function getMemSize(bytes) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
   const thresh = size ? 1000 : 1024;
 
   if (Math.abs(bytes) < thresh) {
@@ -274,7 +289,11 @@ export const debounce = function (func, wait) {
   };
 };
 let timerId;
-export const throttle = (func, wait, ...args) => {
+export const throttle = function (func, wait) {
+  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    args[_key2 - 2] = arguments[_key2];
+  }
+
   if (timerId) {
     return;
   }
@@ -344,6 +363,7 @@ export function getElementSpace(elementRef) {
     availableInsideSpace: availableInsideSpace
   };
 }
-export function getSearchString(charachers = '') {
+export function getSearchString() {
+  let charachers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return (charachers || '').toString().toLowerCase(); //.replace(/\s+/g, '');
 }

package/es/utils/datetime/common.js

@@ -1,10 +1,11 @@
-import "core-js/modules/es.string.replace";
 let dateFormat = {
   dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
   timeNames: ['a', 'p', 'am', 'pm', 'A', 'P', 'AM', 'PM']
 };
-export function pad(n, width = 1, z) {
+export function pad(n) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  let z = arguments.length > 2 ? arguments[2] : undefined;
   z = z || '0';
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -76,7 +77,9 @@ export function replaceI18NValuesWithRegex(i18nStr, values) {
 export function unescapeUnicode(str) {
   return str.replace(/\\u([a-fA-F0-9]{4})/g, (g, m1) => String.fromCharCode(parseInt(m1, 16)));
 }
-export function getValues(params = [], diff) {
+export function getValues() {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let diff = arguments.length > 1 ? arguments[1] : undefined;
   return params.map(param => diff[param]);
 }
 export function getI18NValue(i18n) {

package/es/utils/dropDownUtils.js

@@ -377,11 +377,12 @@ export const makeGetOptionIdChange = () => createSelector([getOptions, getValueF
     return changedOptions;
   }, newOptions);
 });
-export const filterSelectedOptions = ({
-  selectedOptions = dummyArray,
-  propSelectedOptions = dummyArray,
-  disabledOptions = dummyArray
-} = {}) => {
+export const filterSelectedOptions = function () {
+  let {
+    selectedOptions = dummyArray,
+    propSelectedOptions = dummyArray,
+    disabledOptions = dummyArray
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   // eslint-disable-next-line no-param-reassign
   selectedOptions = selectedOptions || dummyArray; // eslint-disable-next-line no-param-reassign
 
@@ -405,4 +406,42 @@ export const filterSelectedOptions = ({
   return {
     newSelectedOptions: [...oldValidSelectedOptions, ...newlyAddedOptions]
   };
-};
+};
+export const makeGetIsShowClearIcon = () => createSelector([getSelectedOptionsSel, getDisabledOptions], (selectedOptions, disabledOptions) => {
+  let countForShowClear = 2;
+  let enabledOptionsLength = 0;
+  let isShowClearIcon = selectedOptions.length >= countForShowClear;
+
+  if (disabledOptions.length) {
+    let isHaveEnabledOptions = false;
+    let isAllDisabled = disabledOptions.length === selectedOptions.length;
+
+    if (!isAllDisabled) {
+      isHaveEnabledOptions = selectedOptions.some(option => {
+        let {
+          isDisabled = false
+        } = option || {};
+
+        if (!isDisabled) {
+          enabledOptionsLength += 1;
+
+          if (enabledOptionsLength === countForShowClear) {
+            return true;
+          }
+
+          return false;
+        }
+
+        return false;
+      });
+    }
+
+    return {
+      isShowClearIcon: isAllDisabled ? !isAllDisabled : isHaveEnabledOptions
+    };
+  }
+
+  return {
+    isShowClearIcon
+  };
+});

package/es/utils/getInitial.js

@@ -1,4 +1,6 @@
-export function getInitial(firstName = '', lastName = '') {
+export function getInitial() {
+  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let initial = '';
 
   if (firstName) {