@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-241

package/README.md

@@ -32,6 +32,20 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-241
+
+- Added unobserve element condition for Tooltip.
+
+# 1.0.0-alpha-240
+
+- DateWidget input selection color variable removed
+- ResponsiveDropBox Implemented for all DropBox
+
+# 1.0.0-alpha-239
+
+- #999 instead of #a8b0bd color value in PureDark mode
+- DateTime, DateWidget => DropBox Fixed position prop support.(positionsOffset , targetOffset ,isRestrictScroll added)
+
 # 1.0.0-alpha-238
 
 - Tooltip optimizaion - container client rect calc is cached and only calc when resized.
@@ -49,9 +63,9 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-235
 
--Tooltip 
-    => data-title-wrap prop added
-    => tooltip calculation based on root or window case added
+-Tooltip
+=> data-title-wrap prop added
+=> tooltip calculation based on root or window case added
 
 # 1.0.0-alpha-234
 
@@ -64,6 +78,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-232
 
 - ListContainer => Mobile Responsive Implemented
+
 # 1.0.0-alpha-231
 
 - DropBox - Position Undefined Issue Solved
@@ -71,7 +86,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-230
 
 - Avatar, AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar, SelectWithIcon, TextBoxIcon => Tooltip undefined case solved
-- Select  , MultiSelect => boxSize prop added
+- Select , MultiSelect => boxSize prop added
 
 # 1.0.0-alpha-229
 
@@ -79,7 +94,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-228
 
-- Button =>  danger, primary loader color issue solved
+- Button => danger, primary loader color issue solved
 
 # 1.0.0-alpha-227
 
@@ -114,7 +129,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-222
 
 - Tabs=> isResponsive condition handled properly
-- Select, MultiSelect => on press tab, choose selected value then move focus to next focuable element flow implemented 
+- Select, MultiSelect => on press tab, choose selected value then move focus to next focuable element flow implemented
 
 # 1.0.0-alpha-221
 

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -327,8 +327,6 @@
 	--zdt_datewidget_enabled_border: var(--dot_inputLineHover);
 	--zdt_datewidget_textboxfocus_border: var(--dot_inputLineFocus);
 	--zdt_datewidget_placeholder_text: var(--dot_inputPlaceholder);
-	--zdt_datewidget_placeholder_selection_text: var(--dot_platinum);
-	--zdt_datewidget_placeholder_selection_bg: #b4d5fe;
 	
 	/* tab */
 	--zdt_tab_default_border: var(--dot_mirror);

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -206,7 +206,7 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--dot_catskillWhite) 0%, var(--dot_hawkesBlue) 33.33%, var(--dot_catskillWhite) 66.66%, var(--dot_catskillWhite) 100%);
+	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
 	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
 	
@@ -327,8 +327,6 @@
 	--zdt_datewidget_enabled_border: var(--dot_inputLineHover);
 	--zdt_datewidget_textboxfocus_border: var(--dot_inputLineFocus);
 	--zdt_datewidget_placeholder_text: var(--dot_inputPlaceholder);
-	--zdt_datewidget_placeholder_selection_text: var(--dot_black);
-	--zdt_datewidget_placeholder_selection_bg: #b4d5fe;
 	
 	/* tab */
 	--zdt_tab_default_border: var(--dot_mirror);

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -39,8 +39,8 @@
 	--zdt_button_primary_hover_border: var(--zdt_cta_alpha_hover_border);
 	--zdt_button_primary_box_shadow: var(--zdt_cta_primary_box_shadow);
 	--zdt_button_plainprimary_hover_text: var(--zdt_cta_primary_hover_text);
-	--zdt_button_secondary_text: var(--dot_cadetblue);
-	--zdt_button_secondary_hover_text: var(--dot_cadetblue);
+	--zdt_button_secondary_text: #999;
+	--zdt_button_secondary_hover_text: #999;
 	--zdt_button_secondary_border: var(--zdt_cta_grey_35_border);
 	--zdt_button_secondary_hover_border: var(--dot_oslogrey);
 	--zdt_button_danger_border: var(--dot_bittersweet);
@@ -60,7 +60,7 @@
 	--zdt_button_successfill_bg: var(--dot_darkmint);
 	--zdt_button_successfill_hover_border: var(--dot_irishgreen);
 	--zdt_button_successfill_hover_bg: var(--dot_irishgreen);
-	--zdt_button_tertiaryfill_bg: var(--dot_cadetblue);
+	--zdt_button_tertiaryfill_bg: #999;
 	--zdt_button_tertiaryfill_hover_bg: var(--dot_oslogrey);
 	--zdt_button_success_default_border: var(--dot_white);
 	--zdt_button_tick_primary_border: var(--zdt_cta_secondary_text);
@@ -92,7 +92,7 @@
 	/* label */
 	--zdt_label_default_text: var(--dot_platinum);
 	--zdt_label_primary_text: var(--dot_oslogrey);
-	--zdt_label_secondary_text: var(--dot_cadetblue);
+	--zdt_label_secondary_text: #999;
 	--zdt_label_danger_text: var(--dot_brightOrange);
 	--zdt_label_mandatory_text: var(--dot_bittersweet);
 	--zdt_label_disable_text: var(--dot_inputDisable);
@@ -131,12 +131,12 @@
 	--zdt_textbox_transparent_border: var(--dot_mirror);
 	--zdt_textbox_effect_hover_border: var(--dot_inputLineHover);
 	--zdt_textbox_effect_focus_border: var(--dot_inputLineFocus);
-	--zdt_textbox_secondary_text: var(--dot_cadetblue);
+	--zdt_textbox_secondary_text: #999;
 	
 	/* dropdown */
 	--zdt_dropdown_default_text: var(--dot_platinum);
 	--zdt_dropdown_default_border: var(--dot_mirror);
-	--zdt_dropdown_default_bg: var(--dot_cadetblue);
+	--zdt_dropdown_default_bg: #999;
 	--zdt_dropdown_darkheading_bg: var(--dot_unknown2);
 	--zdt_dropdown_darkheading_underline_bg: var(--dot_oslogrey);
 	--zdt_dropdown_mirror_bg: var(--dot_mirror);
@@ -242,7 +242,7 @@
 	--zdt_tooltip_default_box_shadow: rgba(0, 0, 0, 0.35);
 	
 	/* select */
-	--zdt_select_emptystate_text: var(--dot_cadetblue);
+	--zdt_select_emptystate_text: #999;
 	--zdt_select_disable_text: var(--dot_inputDisable);
 	
 	/* multiselect */
@@ -254,7 +254,7 @@
 	--zdt_multiselect_default_active_border: var(--dot_inputLineFocus);
 	--zdt_multiselect_transparent_active_border: var(--dot_inputLineFocus);
 	--zdt_multiselect_dark_active_border: var(--dot_stardust);
-	--zdt_multiselect_delete_text: var(--dot_cadetblue);
+	--zdt_multiselect_delete_text: #999;
 	--zdt_multiselect_delete_bg: var(--dot_mirror);
 	--zdt_multiselect_delete_hover_text: var(--dot_platinum);
 	--zdt_multiselect_darkdelete_text: var(--dot_santagrey);
@@ -272,7 +272,7 @@
 	--zdt_advancedmultiselect_default_active_border: var(--dot_inputLineFocus);
 	--zdt_advancedmultiselect_transparent_active_border: var(--dot_inputLineFocus);
 	--zdt_advancedmultiselect_dark_active_border: var(--dot_stardust);
-	--zdt_advancedmultiselect_delete_text: var(--dot_cadetblue);
+	--zdt_advancedmultiselect_delete_text: #999;
 	--zdt_advancedmultiselect_delete_hover_text: var(--dot_platinum);
 	--zdt_advancedmultiselect_delete_bg: var(--dot_mirror);
 	--zdt_advancedmultiselect_box_bg: #212121;
@@ -327,12 +327,10 @@
 	--zdt_datewidget_enabled_border: var(--dot_inputLineHover);
 	--zdt_datewidget_textboxfocus_border: var(--dot_inputLineFocus);
 	--zdt_datewidget_placeholder_text: var(--dot_inputPlaceholder);
-	--zdt_datewidget_placeholder_selection_text: var(--dot_platinum);
-	--zdt_datewidget_placeholder_selection_bg: #b4d5fe;
 	
 	/* tab */
 	--zdt_tab_default_border: var(--dot_mirror);
-	--zdt_tab_alpha_text: var(--dot_cadetblue);
+	--zdt_tab_alpha_text: #999;
 	--zdt_tab_alpha_hover_text: var(--dot_platinum);
 	--zdt_tab_alpha_hover_bg: var(--zdt_cta_grey_10_bg);
 	--zdt_tab_alpha_active_text: var(--zdt_cta_primary_text);

package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css

@@ -28,7 +28,7 @@
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
 	
 	/* avatar */
-	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_border: #999;
 	--zdt_avatar_white_text: var(--dot_white);
 	
 	/* label */
@@ -38,5 +38,5 @@
 	--zdt_textbox_light_text: var(--dot_white);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	--zdt_dropdown_darkheading_text: #999;
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css

@@ -28,7 +28,7 @@
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
 	
 	/* avatar */
-	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_border: #999;
 	--zdt_avatar_white_text: var(--dot_white);
 	
 	/* label */
@@ -38,5 +38,5 @@
 	--zdt_textbox_light_text: var(--dot_white);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	--zdt_dropdown_darkheading_text: #999;
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css

@@ -28,7 +28,7 @@
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
 	
 	/* avatar */
-	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_border: #999;
 	--zdt_avatar_white_text: var(--dot_white);
 	
 	/* label */
@@ -38,5 +38,5 @@
 	--zdt_textbox_light_text: var(--dot_white);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	--zdt_dropdown_darkheading_text: #999;
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css

@@ -28,7 +28,7 @@
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
 	
 	/* avatar */
-	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_border: #999;
 	--zdt_avatar_white_text: var(--dot_white);
 	
 	/* label */
@@ -38,5 +38,5 @@
 	--zdt_textbox_light_text: var(--dot_white);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	--zdt_dropdown_darkheading_text: #999;
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css

@@ -28,7 +28,7 @@
 	--zdt_multiselect_darkdelete_hover_text: var(--dot_platinum);
 	
 	/* avatar */
-	--zdt_avatar_white_border: var(--dot_cadetblue);
+	--zdt_avatar_white_border: #999;
 	--zdt_avatar_white_text: var(--dot_white);
 	
 	/* label */
@@ -38,5 +38,5 @@
 	--zdt_textbox_light_text: var(--dot_white);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: var(--dot_cadetblue);
+	--zdt_dropdown_darkheading_text: #999;
 }

package/docs/external/active-line.js

@@ -0,0 +1,72 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+  var WRAP_CLASS = "CodeMirror-activeline";
+  var BACK_CLASS = "CodeMirror-activeline-background";
+  var GUTT_CLASS = "CodeMirror-activeline-gutter";
+
+  CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) {
+    var prev = old == CodeMirror.Init ? false : old;
+    if (val == prev) return
+    if (prev) {
+      cm.off("beforeSelectionChange", selectionChange);
+      clearActiveLines(cm);
+      delete cm.state.activeLines;
+    }
+    if (val) {
+      cm.state.activeLines = [];
+      updateActiveLines(cm, cm.listSelections());
+      cm.on("beforeSelectionChange", selectionChange);
+    }
+  });
+
+  function clearActiveLines(cm) {
+    for (var i = 0; i < cm.state.activeLines.length; i++) {
+      cm.removeLineClass(cm.state.activeLines[i], "wrap", WRAP_CLASS);
+      cm.removeLineClass(cm.state.activeLines[i], "background", BACK_CLASS);
+      cm.removeLineClass(cm.state.activeLines[i], "gutter", GUTT_CLASS);
+    }
+  }
+
+  function sameArray(a, b) {
+    if (a.length != b.length) return false;
+    for (var i = 0; i < a.length; i++)
+      if (a[i] != b[i]) return false;
+    return true;
+  }
+
+  function updateActiveLines(cm, ranges) {
+    var active = [];
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i];
+      var option = cm.getOption("styleActiveLine");
+      if (typeof option == "object" && option.nonEmpty ? range.anchor.line != range.head.line : !range.empty())
+        continue
+      var line = cm.getLineHandleVisualStart(range.head.line);
+      if (active[active.length - 1] != line) active.push(line);
+    }
+    if (sameArray(cm.state.activeLines, active)) return;
+    cm.operation(function() {
+      clearActiveLines(cm);
+      for (var i = 0; i < active.length; i++) {
+        cm.addLineClass(active[i], "wrap", WRAP_CLASS);
+        cm.addLineClass(active[i], "background", BACK_CLASS);
+        cm.addLineClass(active[i], "gutter", GUTT_CLASS);
+      }
+      cm.state.activeLines = active;
+    });
+  }
+
+  function selectionChange(cm, sel) {
+    updateActiveLines(cm, sel.ranges);
+  }
+});

package/docs/external/autorefresh.js

@@ -0,0 +1,47 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"))
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod)
+  else // Plain browser env
+    mod(CodeMirror)
+})(function(CodeMirror) {
+  "use strict"
+
+  CodeMirror.defineOption("autoRefresh", false, function(cm, val) {
+    if (cm.state.autoRefresh) {
+      stopListening(cm, cm.state.autoRefresh)
+      cm.state.autoRefresh = null
+    }
+    if (val && cm.display.wrapper.offsetHeight == 0)
+      startListening(cm, cm.state.autoRefresh = {delay: val.delay || 250})
+  })
+
+  function startListening(cm, state) {
+    function check() {
+      if (cm.display.wrapper.offsetHeight) {
+        stopListening(cm, state)
+        if (cm.display.lastWrapHeight != cm.display.wrapper.clientHeight)
+          cm.refresh()
+      } else {
+        state.timeout = setTimeout(check, state.delay)
+      }
+    }
+    state.timeout = setTimeout(check, state.delay)
+    state.hurry = function() {
+      clearTimeout(state.timeout)
+      state.timeout = setTimeout(check, 50)
+    }
+    CodeMirror.on(window, "mouseup", state.hurry)
+    CodeMirror.on(window, "keyup", state.hurry)
+  }
+
+  function stopListening(_cm, state) {
+    clearTimeout(state.timeout)
+    CodeMirror.off(window, "mouseup", state.hurry)
+    CodeMirror.off(window, "keyup", state.hurry)
+  }
+});