@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

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;
     }

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.d.ts

@@ -3,7 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { Popup } from "../../tr-grid-util/es6/Popup.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { isTouchDevice } from "../../tr-grid-util/es6/Util.js";
+import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
 import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 
@@ -28,7 +28,8 @@ declare namespace InCellEditingPlugin {
         keyUp?: ((...params: any[]) => any),
         beforeRowCommit?: ((...params: any[]) => any),
         rowEditorClosed?: ((...params: any[]) => any),
-        uiBlocking?: boolean
+        uiBlocking?: boolean,
+        autoSuggest?: Element
     };
 
     type Cache = {
@@ -79,7 +80,7 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public isEditing(): boolean;
 
-    public getTextBox(columnIndex?: number, grid?: any): Element;
+    public getTextBox(columnIndex?: number, grid?: any): Element|null;
 
     public getInitialText(): string;
 
@@ -87,7 +88,7 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public _getRowId(rowIndex: number): string;
 
-    public getActiveGrid(): any|null;
+    public getActiveGrid(): any|null|null;
 
     public getActiveColIndex(): number;
 
@@ -119,7 +120,9 @@ declare class InCellEditingPlugin extends GridPlugin {
 
     public commitText(word?: string): void;
 
-    public getBalloonPopup(): Popup|null;
+    public getBalloonPopup(): Popup|null|null;
+
+    public getAutoSuggest(): Element|null;
 
     public setDisablingScroll(disabled?: boolean): boolean;
 

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -3,7 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { Popup } from "../../tr-grid-util/es6/Popup.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { isTouchDevice } from "../../tr-grid-util/es6/Util.js";
+import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
 import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 /** @typedef {Object} InCellEditingPlugin~Options
@@ -27,6 +27,7 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {Function=} beforeRowCommit=null Handler before all editor in row commit
 * @property {Function=} rowEditorClosed=null Handler after all editors closed
 * @property {boolean=} uiBlocking=false append transparent overlay to block ui interaction
+* @property {Element=} autoSuggest=null Element of ef-autosuggest for handled with input cell
 */
 
 /** @typedef {Object} InCellEditingPlugin~Cache
@@ -66,6 +67,7 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {number} rowIndex
 * @property {string} field
 * @property {Element} inputElement
+* @property {Element} autoSuggest
 * @example
 * var cep = new InCellEditingPlugin();
 * cep.listen("editorOpened", function(e) {
@@ -157,6 +159,8 @@ var InCellEditingPlugin = function InCellEditingPlugin(options) {
   t._createTitleEditor = t._createTitleEditor.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onValueChanged = t._onValueChanged.bind(t);
+  t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
+  t._onAutoSuggestTapStart = t._onAutoSuggestTapStart.bind(t);
   t._hosts = [];
 
   if (options) {
@@ -316,6 +320,11 @@ InCellEditingPlugin.prototype._disablingScroll = false;
 */
 
 InCellEditingPlugin.prototype._uiBlocking = false;
+/** @type {Element}
+* @private
+*/
+
+InCellEditingPlugin.prototype._autoSuggest = null;
 /** @type {string}
 * @private
 */
@@ -337,6 +346,11 @@ InCellEditingPlugin.prototype._elfVersion = 0;
 */
 
 InCellEditingPlugin._primaryColor = "";
+/** @type {string}
+* @private
+*/
+
+InCellEditingPlugin._styles = prettifyCss([":host .cell.editing input[type=text]", ["border-style: solid;"]]);
 /** @private
 * @param {Object} colors
 */
@@ -380,6 +394,13 @@ InCellEditingPlugin.prototype._createInputElement = function (tag) {
     elem.setAttribute("type", "text");
   }
 
+  if (this._autoSuggest) {
+    this._autoSuggest.addEventListener("tapstart", t._onAutoSuggestTapStart); // TODO: remove this function after elf fixed item-select doesn't fire click events
+
+
+    this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
+  }
+
   elem.addEventListener("keydown", t._onTextKeyDown, false);
   elem.addEventListener("keyup", t._onTextKeyUp, false);
   elem.addEventListener("mousedown", t._stopPropagation, false);
@@ -532,6 +553,13 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
     InCellEditingPlugin._uiElementTypesMap["number"] = "ef-input";
   }
 
+  if (ElfUtil.isHaloTheme()) {
+    if (!host._inCellEditingStyles) {
+      host._inCellEditingStyles = true;
+      injectCss(InCellEditingPlugin._styles, host.getElement());
+    }
+  }
+
   this.config(options);
 
   if (!InCellEditingPlugin._primaryColor) {
@@ -611,6 +639,10 @@ InCellEditingPlugin.prototype.config = function (options) {
 
   if (pluginOption["uiBlocking"]) {
     t._uiBlocking = true;
+  }
+
+  if (pluginOption["autoSuggest"]) {
+    t._autoSuggest = pluginOption["autoSuggest"];
   } // event callback
 
 
@@ -1193,6 +1225,18 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
 
   if (t._disablingScroll) {
     t._freezeScrolling(host, true);
+  }
+
+  arg["autoSuggest"] = t._autoSuggest;
+
+  if (t._autoSuggest) {
+    if (t._autoSuggest.parentNode !== host.getElement()) {
+      // if we appendChild all time when open editor, events won't work
+      host.getElement().appendChild(t._autoSuggest);
+    }
+
+    t._autoSuggest.attach = inputElement;
+    t._autoSuggest.positionTarget = inputElement; // for re-position of autosuggest
   } // Dispatch an event for user to setup stuff
 
 
@@ -1496,6 +1540,42 @@ InCellEditingPlugin.prototype._onPopupHide = function (e) {
   this.closeRowEditor(false);
 };
 /** @private
+* @param {Object} event
+*/
+
+
+InCellEditingPlugin.prototype._onAutoSuggestTapStart = function (event) {
+  // TODO: Remove this function and use _onAutoSuggestItemSelected instead of this function
+  // This WORKAROUND by use "tapstart" event instead of "item-select" event in ef-autosugest
+  var target = event.target;
+
+  if (target.value) {
+    this.setText(target.value);
+
+    this._commitText(true);
+  }
+};
+/** @private
+* @param {Object} event
+*/
+
+
+InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
+  // TODO: Replace This function instead of _onAutoSuggestTapStart when elf fixed item-select.
+  // Currently, we use tapstart instead of item-select, so it's not support other method of item-select
+  // Currently, this function doesn't execute until item-select event fired from auto-suggest
+  var method = event.detail.method;
+  var value = event.detail.target.value;
+
+  if (method === 'enter' || method === 'click') {
+    if (value) {
+      this.setText(value);
+
+      this._commitText(true);
+    }
+  }
+};
+/** @private
 * @param {Object} e
 */
 
@@ -1528,6 +1608,12 @@ InCellEditingPlugin.prototype._onTextKeyDown = function (e) {
 
 
   if (e.keyCode === 9) {
+    // For check press tab key when user tab on auto suggest list
+    // When user tab on auto suggest, the focus should be in input and data doesn't commit
+    if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+      this._activeInCellCache.inputElement.focus();
+    }
+
     e.preventDefault(); // stop losing focus
   }
 };
@@ -1558,9 +1644,17 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
     var cellInfo = this._activePos;
 
     if (this._initialText !== text) {
-      this._commitText(true);
-
       e.preventDefault(); // TODO: Check if this is needed
+      // Clear auto suggest and doesn't commit when user tab on auto suggest item
+
+      if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+        this._activeInCellCache.inputElement.focus();
+
+        this._autoSuggest.suggestions = [];
+        return; // when use tabToMove with auto suggest, it shouldn't be effect when doesn't commit text
+      } else {
+        this._commitText(true);
+      }
     } else {
       this._commitText(false);
     }
@@ -1946,6 +2040,15 @@ InCellEditingPlugin.prototype.getBalloonPopup = function () {
   // we should receive column index to return balloonPopup in specific column
   return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
 };
+/** Get ef-autosuggest
+* @public
+* @return {Element}
+*/
+
+
+InCellEditingPlugin.prototype.getAutoSuggest = function () {
+  return this._autoSuggest;
+};
 /**
 * @public
 * @param {boolean=} disabled

package/lib/tr-grid-printer/es6/CellWriter.d.ts

@@ -6,15 +6,15 @@ declare class CellWriter extends ElementWrapper {
 
     constructor();
 
-    public getContent(): Node|null;
+    public getContent(): Node|null|null;
 
-    public setContent(content: any, opt_tooltip?: boolean): Element;
+    public setContent(content: any, opt_tooltip?: boolean): Element|null;
 
     public setTooltip(str: string): void;
 
     public setTextContent(str: string): void;
 
-    public addContent(n: any): Element;
+    public addContent(n: any): Element|null;
 
     public setStyle(str: string, val: any): void;
 

package/lib/tr-grid-printer/es6/GridPrinter.d.ts

@@ -17,7 +17,7 @@ declare namespace GridPrinter {
 
     function getPreFlightInfo(grid: any, options?: any): any;
 
-    function createPrintElement(grid: any, options?: any): Element;
+    function createPrintElement(grid: any, options?: any): Element|null;
 
     function print(grid: any): void;
 

package/lib/tr-grid-printer/es6/GridPrinter.js

@@ -113,6 +113,27 @@ var _setColumnAlignment = function (tbl, colIndex, alignment) {
 	}
 };
 
+/** @private
+* @param {*} grid grid element, currently supports atlas-blotter, ef-grid, tr.CompositeGrid, rt.Grid and Core
+* @return {Object} core grid
+*/
+var _getCoreGrid = function (grid) {
+	var core = null;
+	try {
+		if (grid.api) { // ef-grid or atlas-blotter
+			core = grid.api.getCoreGrid();
+		} else if (grid.getCoreGrid) { // tr.CompositeGrid or rt.Grid
+			core = grid.getCoreGrid();
+		} else if (grid.getPlugin) { // coreGrid
+			core = grid;
+		}
+		// TODO: support react/angular wrapper
+	} catch (err) {
+		console.log("Cannot print the given object");
+	}
+	return core;
+};
+
 /** @namespaces
 */
 var GridPrinter = {};
@@ -331,13 +352,15 @@ GridPrinter.getPreFlightInfo = function (grid, options) {
 };
 
 /** @public
-* @param {tr.Grid} grid
+* @param {*} grid grid element, currently supports atlas-blotter, ef-grid, tr.CompositeGrid, rt.Grid and Core
 * @param {Object=} options
 * @return {Element}
 */
 GridPrinter.createPrintElement = function (grid, options) {
 	if (!grid) {
 		grid = GridPrinter._grid;
+	} else {
+		grid = _getCoreGrid(grid);
 	}
 
 	if (!grid) {
@@ -624,23 +647,13 @@ GridPrinter._applyCss = function () {
 };
 
 /** @public
-* @param {tr.Grid} grid
+* @param {*} grid grid element, currently supports atlas-blotter, ef-grid, tr.CompositeGrid, rt.Grid and Core
 */
 GridPrinter.print = function (grid) {
 	var core = null;
 	if (grid) {
 		GridPrinter._applyCss();
-		try {
-			if (grid.api) { // ef-grid or atlas-blotter
-				core = grid.api.getCoreGrid();
-			} else if (grid.getCoreGrid) { // tr.CompositeGrid or rt.Grid
-				core = grid.getCoreGrid();
-			} else if (grid instanceof tr.Grid) {
-				core = grid;
-			}
-		} catch (err) {
-			console.log("Cannot print the given object");
-		}
+		core = _getCoreGrid(grid);
 	}
 
 	if (core) {

package/lib/tr-grid-printer/es6/PrintTrait.d.ts

@@ -29,9 +29,9 @@ declare class PrintTrait {
 
     public fixPaperSize(enabled: boolean): void;
 
-    public getDocumentElement(): Element|null;
+    public getDocumentElement(): Element|null|null;
 
-    public getBodyElement(): Element|null;
+    public getBodyElement(): Element|null|null;
 
 }
 

package/lib/tr-grid-printer/es6/SectionWriter.d.ts

@@ -21,9 +21,9 @@ declare class SectionWriter extends ElementWrapper {
 
     public setRowCount(val: number): void;
 
-    public getCell(colIndex: number, rowIndex: number): CellWriter;
+    public getCell(colIndex: number, rowIndex: number): CellWriter|null;
 
-    public getCellContent(colIndex: number, rowIndex: number): Element|Node|NodeList;
+    public getCellContent(colIndex: number, rowIndex: number): Element|Node|NodeList|null;
 
     public setCellContent(colIndex: number, rowIndex: number, data: string|Element|any|any): void;
 
@@ -47,7 +47,7 @@ declare class SectionWriter extends ElementWrapper {
 
     public isColumnActive(colIndex: number): boolean;
 
-    public getCellElement(colIndex: number, rowIndex: number): Element;
+    public getCellElement(colIndex: number, rowIndex: number): Element|null;
 
 }
 

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -1,8 +1,9 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
-import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 declare namespace RowDraggingPlugin {
 
@@ -25,8 +26,6 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     constructor(options?: RowDraggingPlugin.Options);
 
-    public beforeProcessOption(optionName: string, optionValue: any): any;
-
     public hasMultiTableSupport(): boolean;
 
     public getName(): string;
@@ -45,7 +44,7 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public cancelDrag(): void;
 
-    public getGuideline(): Element;
+    public getGuideline(): Element|null;
 
 }