@zohodesk/dot 1.0.0-temp-89 → 1.0.0-temp.888

package/es/setup/table/TableData/SetupTableData.module.css

@@ -1,7 +1,5 @@
-[dir=ltr] .container {
+.container {
   padding-left: var(--zd_size20);
-}[dir=rtl] .container {
-  padding-right: var(--zd_size20);
 }
 .size70 {
   flex-basis: var(--zd_size70);
@@ -30,15 +28,9 @@
 .center {
   text-align: center;
 }
-[dir=ltr] .left {
+.left {
   text-align: left;
 }
-[dir=rtl] .left {
+.right {
   text-align: right;
 }
-[dir=ltr] .right {
-  text-align: right;
-}
-[dir=rtl] .right {
-  text-align: left;
-}

package/es/setup/table/TableHead/SetupTableHead.module.css

@@ -1,11 +1,7 @@
 .container {
   border-bottom: 1px solid var(--zdt_setuptablehead_border);
-}[dir=ltr] .container {
   padding-right: var(--zd_size40);
   padding-left: var(--zd_size40);
-}[dir=rtl] .container {
-  padding-left: var(--zd_size40);
-  padding-right: var(--zd_size40);
 }
 .subContainer {
   height: var(--zd_size40);

package/es/setup/table/TableRow/SetupTableRow.module.css

@@ -1,13 +1,9 @@
 .container {
   position: relative;
-  height: var(--zd_size52);
-  border-bottom: 1px solid var(--zdt_setuptablerow_border);
-}[dir=ltr] .container {
   margin-right: var(--zd_size40);
   margin-left: var(--zd_size40);
-}[dir=rtl] .container {
-  margin-left: var(--zd_size40);
-  margin-right: var(--zd_size40);
+  border-bottom: 1px solid var(--zdt_setuptablerow_border);
+  height: var(--zd_size52);
 }
 .container:hover {
   background-color: var( --zdt_setuptablerow_hover_bg);

package/es/utils/KeyboardApi.js

@@ -0,0 +1,294 @@
+//$Id$
+let isShortCutEnabled;
+let showShortcut = {};
+let shortcutdatas = {};
+let additionalKey = {};
+let _SpecialKeyMaps = {
+  8: 'backspace',
+  9: 'tab',
+  13: 'enter',
+  16: 'shift',
+  17: 'ctrl',
+  18: 'alt',
+  //20: 'capslock',
+  27: 'esc',
+  32: 'space',
+  //33: 'pageup',
+  //34: 'pagedown',
+  //35: 'end',
+  //36: 'home',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  46: 'del',
+  91: 'meta',
+  93: 'meta',
+  224: 'meta',
+  43: 'plus',
+  //   +
+  61: 'plus',
+  //  = , in firefox
+  63: 'ques',
+  // ?
+  187: 'plus',
+  //  =
+  191: 'slash' //   /
+
+};
+export function Shortcut(target) {
+  _addEvent(target, 'keypress', keycallback);
+
+  _addEvent(target, 'keydown', keycallback);
+
+  _addEvent(target, 'keyup', keycallback);
+}
+
+Shortcut.setState = function (isEnabled) {
+  isShortCutEnabled = isEnabled;
+};
+
+Shortcut.addAll = function (keysObj, props) {
+  showShortcut = props.showShortcut;
+  isShortCutEnabled && keysObj.map((keyOptions, index) => {
+    Shortcut.add(keyOptions.keyCombo, keyOptions.keyCallback(props), keyOptions.keyAction, keyOptions.displayLabel || []);
+    return;
+  });
+};
+/**
+ * @param keycombo = 'z' or 'z+e' or 'shift+a' etc..
+ * @param callback = any function
+ * @param action = keypress or keydown or keyup
+ */
+
+
+Shortcut.bulkAdd = function (shortcutArray) {
+  showShortcut && shortcutArray.map(shortcutObj => {
+    Shortcut.add(shortcutObj.keyCombo, shortcutObj.keyCallback, shortcutObj.keyAction, shortcutObj.displayLabel || []);
+  });
+};
+
+Shortcut.add = function (keycombo, cpFunc, action, displayLabel) {
+  if (!keycombo || !isShortCutEnabled) {
+    return;
+  }
+
+  let tempjson = {};
+
+  if (cpFunc === undefined) {
+    cpFunc = function (keycode, keyOptions, e) {
+      _defaultCallBack(keycode, keyOptions);
+    };
+  } else {
+    let oldfunc = cpFunc;
+
+    cpFunc = function (keycode, keyOptions, ev) {
+      oldfunc(keycode, ev);
+    };
+  }
+
+  tempjson.key = keycombo.toLowerCase();
+  tempjson.displayLabel = displayLabel;
+  tempjson.keyOptions = cpFunc;
+  tempjson.action = action || 'keypress';
+  shortcutdatas[keycombo.toLowerCase()] = tempjson;
+};
+/*Shortcut.prototype.remove = function(){
+
+};*/
+
+
+Shortcut.removeAll = function () {
+  shortcutdatas = {};
+};
+
+Shortcut.show = function () {
+  return Object.assign({}, shortcutdatas);
+};
+
+Shortcut.remove = function (keyCombo) {
+  keyCombo = Array.isArray(keyCombo) ? keyCombo : [keyCombo];
+  keyCombo.map(key => {
+    delete shortcutdatas[key];
+  });
+};
+
+Shortcut.init = function (doc) {
+  let documentshortcut = Shortcut(doc);
+
+  for (let method in documentshortcut) {
+    if (method.charAt(0) !== '_') {
+      Shortcut[method] = function (method) {
+        return function () {
+          return documentshortcut[method](...arguments);
+        };
+      }(method);
+    }
+  }
+};
+
+function _addEvent(object, type, callback) {
+  if (object.addEventListener) {
+    object.addEventListener(type, callback, false);
+    return;
+  }
+
+  object.attachEvent(`on${type}`, callback);
+}
+
+export function keycallback(e) {
+  if (!isShortCutEnabled) {
+    return;
+  }
+
+  let keyaction = e.type;
+
+  let keycode = _convertToKeyCharacter(e);
+
+  if (e.metaKey) {
+    return;
+  }
+
+  _bindNeedData(e, keyaction);
+
+  if ('esc' !== keycode) {
+    if (_shortRestrictionPlaces(e)) {
+      //return if type any text in input tag or texta area
+      return;
+    }
+  }
+
+  keycode = _eventModifiers(e) + keycode;
+  let keycodedata = shortcutdatas[keycode];
+
+  if (keycodedata) {
+    e.preventDefault();
+  }
+
+  if (keycodedata && keyaction === keycodedata.action && keycodedata.keyOptions) {
+    keycodedata.keyOptions && keycodedata.keyOptions(keycode, keycodedata.keyOptions, e);
+    showShortcut({
+      type: 'SHORTCUT_SHOW',
+      displayLabel: keycodedata.displayLabel
+    });
+  }
+}
+
+function _eventModifiers(e) {
+  if (e.shiftKey === true && e.metaKey === true) {
+    return 'command+shift+';
+  }
+
+  if (e.shiftKey === true && e.ctrlKey === true) {
+    return 'ctrl+shift+';
+  }
+
+  if (e.altKey === true && e.ctrlKey === true) {
+    return 'alt+ctrl+';
+  }
+
+  if (e.ctrlKey === true) {
+    return 'ctrl+';
+  }
+
+  if (e.metaKey === true) {
+    return 'command+';
+  }
+
+  if (e.shiftKey === true) {
+    return 'shift+';
+  }
+
+  if (additionalKey.zpress === true) {
+    return 'z+';
+  } else if (additionalKey.apress === true) {
+    return 'a+';
+  } else if (additionalKey.cpress === true) {
+    return 'c+';
+  } else if (additionalKey.dpress === true) {
+    return 'd+';
+  } else if (additionalKey.fpress === true) {
+    return 'f+';
+  } else if (additionalKey.kpress === true) {
+    return 'k+';
+  } else if (additionalKey.ppress === true) {
+    return 'p+';
+  } else if (additionalKey.rpress === true) {
+    return 'r+';
+  } else if (additionalKey.tpress === true) {
+    return 't+';
+  } else if (additionalKey.epress === true) {
+    return 'e+';
+  } else if (additionalKey.lpress === true) {
+    return 'l+';
+  }
+
+  return '';
+}
+
+function _bindNeedData(e, keyaction) {
+  let keyName = String.fromCharCode(e.keyCode).toLowerCase();
+
+  if (['z', 'a', 'c', 'd', 'f', 'k', 'p', 'r', 't', 'l', 'e'].indexOf(keyName) !== -1) {
+    let extraName = `${keyName}press`;
+
+    if (keyaction === 'keydown') {
+      additionalKey = !additionalKey[extraName] ? Object.assign({}, additionalKey, {
+        [extraName]: true
+      }) : additionalKey;
+      additionalKey[extraName] = true;
+    } else if (keyaction === 'keyup') {
+      additionalKey = !additionalKey[extraName] ? Object.assign({}, additionalKey, {
+        [extraName]: false
+      }) : additionalKey;
+      additionalKey[extraName] = false;
+    }
+  }
+}
+
+function _convertToKeyCharacter(e) {
+  let keyCode = e.keyCode || e.charCode;
+  let keyName = String.fromCharCode(keyCode).toLowerCase();
+  keyName = _SpecialKeyMaps.hasOwnProperty(keyCode) ? _SpecialKeyMaps[keyCode] : keyName;
+  return keyName;
+}
+
+function _defaultCallBack(keycombo, keyOptions) {
+  /*var keyElement = jQuery("[data-shortcut-key='" + keycombo + "']");
+  if (keyOptions.callbackflow !== undefined) {
+    keycombo = keyOptions.callbackflow.split(',');
+    var click = function(i, combo) {
+      setTimeout(function() {
+        jQuery("[data-shortcut-key='" + combo + "']").trigger('click');
+      }, i * 200);
+    };
+    for (var i = 0; i < keycombo.length; i++) {
+      var clickFunc = click.bind(this, i);
+      clickFunc(keycombo[i]);
+      highLightKeys(keycombo[i]);
+    }
+    return;
+  }
+  if (keyElement.length === 1) {
+    keyElement.trigger('click');
+    highLightKeys(keycombo);
+    return;
+  }*/
+}
+
+function _shortRestrictionPlaces(e) {
+  let _target = e.target;
+  let {
+    tagName
+  } = _target;
+  let keyCode = e.keyCode || e.charCode;
+  let isContentEditable = _target.contentEditable === 'true';
+
+  if (['TEXTAREA', 'INPUT', 'SELECT'].indexOf(tagName) !== -1 || //!SupportUI.CurrentUser.getKBStatus() ||
+  //restrict_keyUI() ||
+  keyCode >= 112 && keyCode <= 123 || isContentEditable) {
+    return true;
+  }
+
+  return false;
+}

package/es/version2/AlertClose/AlertClose.module.css

@@ -1,9 +1,9 @@
 .close {
   width: var(--zd_size25);
   height: var(--zd_size25);
-  color: var(--zdt_commonalert_close_icon);
   border-radius: var(--zd_size4);
   cursor: pointer;
+  color: var(--zdt_commonalert_close_icon);
 }
 
 .closeIcon {

package/es/version2/GlobalNotification/GlobalNotification.module.css

@@ -11,38 +11,25 @@
   top: 0;
   z-index: 1000;
   /*Hook for editor alert*/
-  pointer-events: none;
-  text-align: center;
-}
-[dir=ltr] .message {
   right: 0;
+  text-align: center;
   left: 0;
-}
-[dir=rtl] .message {
-  left: 0;
-  right: 0;
+  pointer-events: none;
 }
 
 .container {
+  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
   position: relative;
   pointer-events: initial;
-  color: var(--globalnotification_text_color);
-  max-width: var(--zd_size490);
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   box-shadow: 0 4px 20px var(--globalnotification_box_shadow);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
   background-color: var(--globalnotification_bg_color);
   border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 1px 1px 1px;
-}
-
-[dir=ltr] .container {
-  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
-}
-
-[dir=rtl] .container {
-  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
+  color: var(--globalnotification_text_color);
+  max-width: var(--zd_size490);
+  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
 }
 
 .icon {
@@ -51,15 +38,8 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto 0;
-}
-
-[dir=ltr] .icon {
   left: var(--zd_size18);
-}
-
-[dir=rtl] .icon {
-  right: var(--zd_size18);
+  margin: auto 0;
 }
 
 .success {
@@ -96,30 +76,15 @@
   font-size: var(--zd_font_size14);
   font-family: var(--zd_semibold);
   composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-  line-height: var(--zd_size20);
-}
-
-[dir=ltr] .text {
   text-align: left;
-}
-
-[dir=rtl] .text {
-  text-align: right;
+  line-height: var(--zd_size20);
 }
 
 .close {
   position: absolute;
   top: 0;
   bottom: 0;
-  height: var(--zd_size25);
-}
-
-[dir=ltr] .close {
   right: var(--zd_size12);
   margin: auto 0 auto var(--zd_size25);
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12);
-  margin: auto var(--zd_size25) auto 0;
+  height: var(--zd_size25);
 }

package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css

@@ -11,13 +11,8 @@
 }
 .headerLayout {
   min-height: var(--zd_size54);
-}
-[dir=ltr] .headerLayout {
   padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
 }
-[dir=rtl] .headerLayout {
-  padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
-}
 
 .success {
   --commonalert_border_color: var(--zdt_commonalert_success_border);
@@ -39,14 +34,10 @@
   --commonalert_border_color: var(--zdt_commonalert_warning_border);
 }
 
-[dir=ltr] .extraSmall {
+.extraSmall {
   padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
 }
 
-[dir=rtl] .extraSmall {
-  padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
-}
-
 .iconContainer {
   height: var(--zd_size51);
   width: var(--zd_size51);
@@ -54,6 +45,7 @@
 
 .title {
   color: var(--zdt_alertlookupnew_text);
+  margin: 0 var(--zd_size5) 0 var(--zd_size10);
   font-size: var(--zd_font_size18);
   line-height: var(--zd_size22);
   font-family: var(--zd_bold);
@@ -61,14 +53,6 @@
   vertical-align: middle;
 }
 
-[dir=ltr] .title {
-  margin: 0 var(--zd_size5) 0 var(--zd_size10);
-}
-
-[dir=rtl] .title {
-  margin: 0 var(--zd_size10) 0 var(--zd_size5);
-}
-
 .iconStyle {
   display: block;
 }
@@ -76,12 +60,5 @@
 .close {
   position: absolute;
   top: var(--zd_size12);
-}
-
-[dir=ltr] .close {
   right: var(--zd_size12);
-}
-
-[dir=rtl] .close {
-  left: var(--zd_size12);
 }

package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css

@@ -3,21 +3,17 @@
 }
 
 .innerSection {
+  padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
   color: var(--zdt_alertlookupnew_text);
   font-size: var(--zd_font_size14);
   line-height: var(--zd_size18);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
-  padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
 }
 
-[dir=ltr] .buttonGap {
+.buttonGap {
   margin: 0 0 0 var(--zd_size12);
 }
 
-[dir=rtl] .buttonGap {
-  margin: 0 var(--zd_size12) 0 0;
-}
-
 .confirmMsgText {
   margin-top: var(--zd_size20);
 }
@@ -27,8 +23,8 @@
 }
 
 .footer {
-  overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  overflow: hidden;
 }
 .horizontalScroll, .verticalScroll, .bothScroll {
   height: 100%;

package/es/version2/lookup/alertLookupCommonNew.module.css

@@ -2,16 +2,9 @@
 
 .noteContainer {
     padding: var(--zd_size4) var(--zd_size30) 0;
-}
-
-[dir=ltr] .noteContainer {
     border-left: solid 1px var(--zdt_alertlookup_border);
 }
 
-[dir=rtl] .noteContainer {
-    border-right: solid 1px var(--zdt_alertlookup_border);
-}
-
 .noteTitle {
     font-size: var(--zd_font_size13);
     font-family: var(--zd_semibold);
@@ -27,7 +20,7 @@
     font-size: var(--zd_font_size12);
     /* line-height: var(--zd_size14); */
     color: var(--zdt_alertlookuop_text);
+    margin-bottom: var(--zd_size15);
     list-style-type: disc;
     line-height: initial;
-    margin-bottom: var(--zd_size15);
 }

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

@@ -1,22 +1,17 @@
 .parentElement {
-  position: relative;
   margin-bottom: var(--zd_size7);
+  position: relative;
 }
 .container {
+  background-color: var(--zdt_desktopnotification_bg);
   color: var(--zdt_desktopnotification_text);
   transition: all var(--zd_transition4);
   position: relative;
+  transform-origin: right center;
   max-height: 100%;
-  pointer-events: auto;
-  background-color: var(--zdt_desktopnotification_bg);
   box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-}
-[dir=ltr] .container {
-  transform-origin: right center;
-}
-[dir=rtl] .container {
-  transform-origin: left center;
+  pointer-events: auto;
 }
 .globalNotify {
   max-width: var(--zd_size490);
@@ -32,17 +27,11 @@
 /* Animation Style */
 .closeAnimation {
   max-height: 0;
-  transition: all var(--zd_transition3) 0.4s;
   margin-bottom: 0;
+  transition: all var(--zd_transition3) 0.4s;
 }
 .animation {
   composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
-}
-[dir=ltr] .animation {
-  animation-duration: var(--zd_transition4);
-  -webkit-animation-duration: var(--zd_transition4);
-}
-[dir=rtl] .animation {
   animation-duration: var(--zd_transition4);
   -webkit-animation-duration: var(--zd_transition4);
 }
@@ -51,8 +40,8 @@
   composes: animation;
 }
 .leftnoanimate {
-  opacity: 1;
   transform: translateX(0) scale(1);
+  opacity: 1;
 }
 .rightanimate {
   composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -61,20 +50,15 @@
 }
 /* Container Style */
 .message {
+  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
+  border-top: 1px solid var(--zd_smoke1);
+  cursor: pointer;
   position: relative;
   color: var(--zd_smoke18);
   font-size: var(--zd_font_size11);
   composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
   height: var(--zd_size33);
   transition: padding var(--zd_transition3), height var(--zd_transition3);
-  border-top: 1px solid var(--zd_smoke1);
-  cursor: pointer;
-}
-[dir=ltr] .message {
-  padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
-}
-[dir=rtl] .message {
-  padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
 }
 .message:hover {
   background: var(--zd_alabaster);
@@ -101,6 +85,6 @@
   margin-top: var(--zd_size20);
 }
 .footer {
-  overflow: hidden;
   border-radius: 0 0 var(--zd_size10) var(--zd_size10);
+  overflow: hidden;
 }