@refinitiv-ui/efx-grid 6.0.1 → 6.0.2

package/lib/tr-grid-column-selection/es6/ColumnSelection.js

@@ -3,6 +3,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @event ColumnSelectionPlugin#selectionChanged
 * @description Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
 */
@@ -12,6 +14,8 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 * @property {boolean=} singleSelection=false If enabled, user can have one selection at any moment
 * @property {boolean=} clickToggle=false If enabled, click at the already selected column will deselect it
 * @property {Function=} selectionChanged=null selectionChanged event handler
+* @property {Function=} menuClicked=null Event Handler when user clicks on menu icon.
+* @property {string=} menuPosition="outside" show icon in column grid that have style outside and non-outside
 */
 
 /** @typedef {Object} ColumnSelectionPlugin~ColumnOptions
@@ -31,6 +35,9 @@ var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
   t._onKeyDown = t._onKeyDown.bind(t);
   t._onColumnRemoved = t._onColumnRemoved.bind(t);
   t._onReselection = t._onReselection.bind(t);
+  t._onThemeLoaded = t._onThemeLoaded.bind(t);
+  t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
+  t._updateMenuIcon = t._updateMenuIcon.bind(t);
   t._hosts = [];
 
   if (options) {
@@ -81,7 +88,27 @@ ColumnSelectionPlugin.prototype._timerId = 0;
 * @private
 */
 
+ColumnSelectionPlugin.prototype._timerMenuId = 0;
+/** @type {number}
+* @private
+*/
+
 ColumnSelectionPlugin.prototype._pendingSelection = -1;
+/** @type {Function}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._onMenuClicked = null;
+/** @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._menuButton = null;
+/** @type {string}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._menuPosition = "outside";
 /** @public
 * @return {string}
 */
@@ -115,7 +142,51 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
   host.listen("mousedown", this._onMouseDown);
   host.listen("keydown", this._onKeyDown);
   host.listen("columnRemoved", this._onColumnRemoved);
+  host.listen("columnPositionChanged", this._onColumnPositionChanged);
   this.config(options);
+
+  if (this._onMenuClicked) {
+    // use styles menu icon only when want to use icon menu
+    if (ColumnSelectionPlugin._stylePromise) {
+      ColumnSelectionPlugin._applyThemeColor(host);
+    } else {
+      ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
+
+      ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded);
+    }
+  }
+};
+/** @private
+* @param {Object} colors
+*/
+
+
+ColumnSelectionPlugin.prototype._onThemeLoaded = function (colors) {
+  if (!ColumnSelectionPlugin._styles) {
+    var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
+    ]];
+    ColumnSelectionPlugin._styles = prettifyCss(styles);
+  }
+
+  for (var i = this._hosts.length; --i >= 0;) {
+    ColumnSelectionPlugin._applyThemeColor(this._hosts[i]);
+  }
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+
+
+ColumnSelectionPlugin._applyThemeColor = function (grid) {
+  if (!grid || grid._columnSelectionStyles) {
+    return;
+  }
+
+  if (ColumnSelectionPlugin._styles) {
+    grid._columnSelectionStyles = true; // Prevent loading the same style twice
+
+    injectCss(ColumnSelectionPlugin._styles, grid.getParent());
+  }
 };
 /** @public
 * @param {Object=} host core grid object
@@ -133,6 +204,7 @@ ColumnSelectionPlugin.prototype.unload = function (host) {
   host.unlisten("mousedown", this._onMouseDown);
   host.unlisten("keydown", this._onKeyDown);
   host.unlisten("columnRemoved", this._onColumnRemoved);
+  host.unlisten("columnPositionChanged", this._onColumnPositionChanged);
 
   this._hosts.splice(at, 1);
 
@@ -140,6 +212,7 @@ ColumnSelectionPlugin.prototype.unload = function (host) {
     if (this._timerId) {
       clearTimeout(this._timerId);
       this._timerId = 0;
+      this._timerMenuId = 0;
     }
   }
 
@@ -171,6 +244,18 @@ ColumnSelectionPlugin.prototype.config = function (options) {
         this._clickToggleMode = true;
       }
 
+      val = pluginOptions["menuClicked"];
+
+      if (val) {
+        this._onMenuClicked = val;
+      }
+
+      val = pluginOptions["menuPosition"];
+
+      if (val) {
+        this._menuPosition = val;
+      }
+
       this.addListener(pluginOptions, "selectionChanged");
     }
   } else if (pluginOptions != null) {
@@ -378,9 +463,11 @@ ColumnSelectionPlugin.prototype.setSelectedColumn = function (colIndex, opt_sele
   var len = this._hosts.length;
 
   for (var i = 0; i < len; ++i) {
-    this._hosts[i].enableColumnClass(colIndex, "selected-column", selection);
+    this._hosts[i].selectColumn(colIndex, selection);
   }
 
+  this._updateMenuIcon();
+
   return true;
 };
 /** Select the specified column on an active grid, and clear all other column selections
@@ -428,6 +515,127 @@ ColumnSelectionPlugin.prototype.selectRange = function (anchorIndex, len, opt_gr
 ColumnSelectionPlugin.prototype.selectAllColumns = function () {
   this.selectRange(0, this.getColumnCount());
 };
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnPositionChanged = function (e) {
+  if (this._timerMenuId) {
+    return;
+  }
+
+  if (e.sender && e.sender === this._activeGrid) {
+    this._clearMenuIcon(); // Clear icon before re-renderer
+
+
+    this._timerMenuId = setTimeout(this._updateMenuIcon, 800);
+  }
+};
+/** @private
+* @return {boolean} return true if icon added
+*/
+
+
+ColumnSelectionPlugin.prototype._updateMenuIcon = function () {
+  this._timerMenuId = 0;
+
+  if (!this._onMenuClicked) {
+    // When not set to onMenuClicked, the icon is not displayed
+    return false;
+  }
+
+  var startColIndex = this.getFirstSelectedColumn();
+  var host = this._activeGrid;
+
+  if (startColIndex < 0 || !host) {
+    this._clearMenuIcon();
+
+    return false;
+  }
+
+  var parentEl = host.getParent().parentNode;
+  var endColIndex = this.getLastSelectedColumn();
+  var rectPos = host.getColumnRect(startColIndex, endColIndex);
+
+  if (rectPos.width <= 0 || rectPos.left > rectPos.gridWidth) {
+    // hide icon when selection left or right not show.
+    this._clearMenuIcon();
+
+    return false;
+  }
+
+  if (!this._menuButton) {
+    this._menuButton = document.createElement("div");
+
+    this._menuButton.classList.add("column-selection-menu");
+
+    if (this._menuPosition !== "outside") {
+      this._menuButton.classList.add("column-selection-menu-inside"); // currently not support runtime change
+
+    }
+
+    var coralItem = document.createElement("ef-icon");
+    coralItem.icon = "most-detail";
+
+    this._menuButton.appendChild(coralItem);
+
+    this._menuButton.addEventListener("click", this._onMenuClicked);
+  }
+
+  parentEl.appendChild(this._menuButton);
+  var c;
+  var iconSize = 28; // calculate actual view when have pinned right
+
+  var pinnedLeftCount = rectPos.leftPinnedIndex;
+  var pinnedLeftSize = 0;
+
+  for (c = 0; c <= pinnedLeftCount; c++) {
+    // include index 0 from leftPinnedIndex
+    pinnedLeftSize = pinnedLeftSize + host.getColumnWidth(c);
+  }
+
+  var rightPx = rectPos.left + rectPos.width;
+  var leftOffset = rightPx;
+  var topOffset = rectPos.top;
+
+  if (this._menuPosition !== "outside") {
+    iconSize = 24; // edit size icon and re-calculate
+
+    this._menuButton.classList.add("column-selection-menu-inside");
+
+    var actualView = rightPx + iconSize;
+    var endRightPosition = rectPos.scrollViewSize + pinnedLeftSize; // rectPos.scrollViewSize doesn't including pinned left size
+
+    if (actualView >= endRightPosition) {
+      // case swap top right to left side column, when can't add menu in right side (overflow right)
+      leftOffset = rectPos.left - iconSize;
+
+      if (leftOffset < 0) {
+        // only case select all row in inside mode
+        leftOffset = rectPos.gridWidth - iconSize;
+      }
+    }
+  } else {
+    // TODO : support in another mode currently have "outside" and "inside"
+    if (rightPx >= rectPos.gridWidth) {
+      leftOffset = rectPos.gridWidth; // Menu move to the right size if inside mode when overflow grid
+    }
+  }
+
+  this._menuButton.style.left = leftOffset + "px"; // Menu icon position in top right
+
+  this._menuButton.style.top = topOffset + "px";
+  return true;
+};
+/** @private */
+
+
+ColumnSelectionPlugin.prototype._clearMenuIcon = function () {
+  if (this._menuButton && this._menuButton.parentNode) {
+    this._menuButton.parentNode.removeChild(this._menuButton);
+  }
+};
 /** @public */
 
 
@@ -438,13 +646,15 @@ ColumnSelectionPlugin.prototype.clearAllSelections = function () {
     for (var c = this.getColumnCount(); --c >= 0;) {
       if (this.isSelectedColumn(c)) {
         for (var i = 0; i < tableCount; ++i) {
-          this._hosts[i].enableColumnClass(c, "selected-column", false);
+          this._hosts[i].selectColumn(c, false);
         }
       }
     }
 
     this._hasSelection = false;
     this._activeGrid = this._hosts[0] || null; // Maintain selectability even if there is no selection
+
+    this._clearMenuIcon();
   }
 };
 /** Alias to clearAllSelections() method
@@ -492,7 +702,7 @@ ColumnSelectionPlugin.prototype.deselectAll = ColumnSelectionPlugin.prototype.cl
 
 ColumnSelectionPlugin.prototype.isSelectedColumn = function (colIndex) {
   if (this._activeGrid) {
-    return this._activeGrid.hasColumnClass(colIndex, "selected-column");
+    return this._activeGrid.isSelectedColumn(colIndex);
   }
 
   return false;
@@ -670,7 +880,13 @@ ColumnSelectionPlugin.prototype._onColumnRemoved = function (e) {
       this._hasSelection = false;
 
       if (this._pendingSelection < 0) {
-        this._pendingSelection = e.colIndex;
+        var colIndex = e.colIndex;
+
+        if (colIndex >= this.getColumnCount()) {
+          colIndex = this.getColumnCount() - 1;
+        }
+
+        this._pendingSelection = colIndex;
       }
 
       this._timerId = setTimeout(this._onReselection, 10);
@@ -688,6 +904,12 @@ ColumnSelectionPlugin.prototype._onReselection = function (e) {
   this._timerId = 0;
   this.setSelectedColumn(this._pendingSelection, true);
   this._pendingSelection = -1;
+
+  if (!this._activeGrid) {
+    this._activeGrid = this._hosts[0];
+  }
+
+  this._activeGrid.focus();
 };
 /** @private
 * @param {KeyboardEvent} e

package/lib/tr-grid-column-stack/es6/ColumnStack.js

@@ -779,6 +779,9 @@ ColumnStackPlugin.prototype.stackColumns = function(colIndices, stackId, options
 * @return {boolean} true if the stack has been modified
 */
 ColumnStackPlugin.prototype.setStack = function(colRefs) {
+	if(!this._initializedGrid) {
+		return false;
+	}
 	colRefs = this.getColumnIndices(colRefs);
 	if(colRefs.length <= 1) { // When the array is empty or contains only one element, all stacking is removed
 		return this.removeAllStacks();

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -363,6 +363,7 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 		if(colorOptions.condColoring) {
 			painter.setConditions(colorOptions.condColoring.conditions);
 		} else if(colorOptions.colorText) {
+			painter.resetColoring(); //Clear conditions before add new color
 			painter.addColorTextWithTheme(colorOptions.colorText.field);
 		}
 

package/lib/tr-grid-filter-input/es6/FilterInput.d.ts

@@ -16,11 +16,13 @@ declare namespace FilterInputPlugin {
         disabled?: boolean,
         placeholder?: string,
         type?: string,
-        entries?: any[]
+        entries?: any[],
+        trigger?: string
     };
 
     type Options = {
-        inputCreated?: ((...params: any[]) => any)
+        inputCreated?: ((...params: any[]) => any),
+        trigger?: string
     };
 
 }

package/lib/tr-grid-filter-input/es6/FilterInput.js

@@ -16,11 +16,13 @@ import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
 * @property {string=} placeholder="" Placeholder text inside the input
 * @property {string=} type="text" Type of UI. Available types are "number", "select", "dropdown", "date"
 * @property {Array=} entries Entries of dropdown filters when type is "select"
+* @property {string=} trigger="keyup" Available types of trigger are `false | ""` (no trigger) , `"keyup"` (default) , `"enter"` (on enter key *only available for text type)
 */
 
 /** @typedef {Object} FilterInputPlugin~Options
 * @description FilterInputPlugin options available in main grid configuration under `filterInput` property
 * @property {Function=} inputCreated=null Handler executed after filter input is created
+* @property {string=} trigger="keyup" Available types of trigger are `false | ""` (no trigger) , `"keyup"` (default) , `"enter"` (on enter key *only available for text type)
 */
 
 /** @callback {Function} FilterInputPlugin~FilterLogic
@@ -102,6 +104,11 @@ FilterInputPlugin.prototype._uiTimer = 0;
 */
 
 FilterInputPlugin.prototype._freezeInputValue = false;
+/** @type {string|boolean}
+* @private
+*/
+
+FilterInputPlugin.prototype._inputTrigger = "keyup";
 /** @public
 * @return {string}
 */
@@ -204,7 +211,15 @@ FilterInputPlugin.prototype.config = function (options) {
 
   this._gridConfig = options; // For loading dependency
 
-  this.addListener(options["filterInput"], "inputCreated");
+  var filterInputOptions = options["filterInput"];
+  this.addListener(filterInputOptions, "inputCreated");
+
+  if (filterInputOptions) {
+    if (filterInputOptions["trigger"] != null) {
+      this._inputTrigger = filterInputOptions["trigger"];
+    }
+  }
+
   var columns = options["columns"];
   var len = columns ? columns.length : 0;
 
@@ -259,6 +274,10 @@ FilterInputPlugin.prototype.getConfigObject = function (out_obj) {
     if (opt.entries != null) {
       filterInput.entries = opt.entries;
     }
+
+    if (opt.trigger != null) {
+      filterInput.trigger = opt.trigger;
+    }
   }
 
   return obj;
@@ -384,7 +403,7 @@ FilterInputPlugin.prototype._onDateChanged = function (e) {
   if (host) {
     var pos = host.getRelativePosition(e);
     var colIndex = pos.colIndex;
-    var dateObj = ElfDate.getDate(e.detail); // TODO: Date object should be used for filtering instead of string
+    var dateObj = ElfDate.getDate(e.detail) || e.target.value; // TODO: Date object should be used for filtering instead of string
 
     var dateStr = dateObj ? dateObj.toDateString().substr(4) : "";
     this.filterColumn(colIndex, dateStr);
@@ -456,6 +475,7 @@ FilterInputPlugin._uiMap = {
 
 FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
   var elemType = colOpt.type;
+  var elemTrigger = colOpt.trigger != null ? colOpt.trigger : this._inputTrigger;
   var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
 
   if (uiTag == "ef-input") {
@@ -485,32 +505,69 @@ FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
   switch (uiTag) {
     case "ef-input":
       elem.setAttribute("type", "number");
-      elem.addEventListener("value-changed", this._onInputChanged, false);
+
+      if (elemTrigger != false && elemTrigger != "") {
+        elem.addEventListener("value-changed", this._onInputChanged, false);
+      }
+
       break;
 
     case "ef-number-field":
-      elem.addEventListener("value-changed", this._onInputChanged, false);
+      if (elemTrigger != false && elemTrigger != "") {
+        elem.addEventListener("value-changed", this._onInputChanged, false);
+      }
+
       break;
 
     case "ef-select":
       elem.data = CoralItems.create(colOpt.entries);
-      elem.addEventListener("value-changed", this._onInputChanged, false);
       elem.addEventListener("opened-changed", this._onOpenedChanged, false);
+
+      if (elemTrigger != false && elemTrigger != "") {
+        elem.addEventListener("value-changed", this._onInputChanged, false);
+      }
+
       break;
 
     case "ef-datetime-picker":
-      elem.addEventListener("value-changed", this._onDateChanged, false);
+      if (elemTrigger != false && elemTrigger != "") {
+        elem.addEventListener("value-changed", this._onDateChanged, false);
+      }
+
       break;
 
     case "ef-search-field":
-      elem.addEventListener("search", this._onInputChanged, false);
-      elem.addEventListener("value-changed", this._onInputChanged, false);
+      if (elemTrigger != false && elemTrigger != "") {
+        if (elemTrigger == "enter") {
+          var plugin = this;
+          elem.addEventListener("keyup", function (e) {
+            if (e.key == "Enter") {
+              plugin._onInputChanged(e);
+            }
+          }, false);
+        } else {
+          elem.addEventListener("value-changed", this._onInputChanged, false);
+        }
+      }
+
       break;
 
     default:
       elem.setAttribute("type", "search");
-      elem.addEventListener("search", this._onInputChanged, false);
-      elem.addEventListener("keyup", this._onInputChanged, false);
+
+      if (elemTrigger != false && elemTrigger != "") {
+        if (elemTrigger == "enter") {
+          var fip = this;
+          elem.addEventListener("keyup", function (e) {
+            if (e.key == "Enter") {
+              fip._onInputChanged(e);
+            }
+          }, false);
+        } else {
+          elem.addEventListener("keyup", this._onInputChanged, false);
+        }
+      }
+
       break;
   }
 
@@ -594,6 +651,12 @@ FilterInputPlugin.prototype._retrieveColumnOption = function (colIndex, colDef)
         });
         option["entries"] = entries;
       }
+
+      var trigger = filterOption["trigger"];
+
+      if (typeof trigger == "string" || trigger == false) {
+        option["trigger"] = trigger;
+      }
     } else {
       option["disabled"] = true;
     }