@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

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

@@ -3,6 +3,7 @@ import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
 import { extendObject } from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 
 /** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
 * @description Extension column options that can be specified on each individual grid's column option:
@@ -97,6 +98,10 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 	if (!CellPainter.themeReady) {
 		CellPainter.loadThemeColors().then(this._onThemeLoaded);
 	}
+
+	// Register callback for movement-color-profile attribute changed event
+	ElfUtil.getThemeColors(this._onThemeLoaded);
+
 	// In case of lazy loading
 	// DO something
 };
@@ -320,17 +325,21 @@ ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colInde
 };
 
 /** @public
+* @description To define coloring for columns, conditions or colorText or tickColor need to be specified.
+*   To enable cell blinking the blinking option need to be defined. Coloring options and blinking options
+*   can be applied to a column at the same time. The blinking or coloring abilities will be removed if the correspondent options
+*   are not given. If columnOptions is undefined or null, coloring and blinking will be removed.
 * @param {number} colIndex
-* @param {ConditionalColoringPlugin~ColumnOptions} columnOptions
+* @param {(ConditionalColoringPlugin~ColumnOptions|null)=} columnOptions
 * @example
-* var colDef = {
+* var columnOptions1 = {
 *   "conditions": [{ // Array.<Object> Condition Object Properties
 *     "expression": "[column0] > 0", // string
 *     "backgroundColor": "", // Optional string e.g. #ffffff, black
 *     "color": "" // Optional string e.g. #000000, white
 *   }]
 * };
-* var colDef2 = {
+* var columnOptions2 = {
 *   "field": "string",
 *   "colorText": true // string as Field or boolean for text coloring mode
 * };
@@ -338,19 +347,21 @@ ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colInde
 ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
 	// Save column config state
 	var colData = this._newColumnData(colIndex);
+	var blinkingOptions, field;
 	if(columnOptions) {
-		colData['conditions'] = columnOptions['conditions'];
-		colData['colorText'] = columnOptions['colorText'];
-		colData['tickColor'] = columnOptions['tickColor'];
-		colData['blinking'] = columnOptions['blinking'];
+		colData["conditions"] = columnOptions["conditions"];
+		colData["colorText"] = columnOptions["colorText"];
+		colData["tickColor"] = columnOptions["tickColor"];
+		colData["blinking"] = blinkingOptions = columnOptions["blinking"];
+		field = columnOptions["field"];
 	} else {
-		colData['conditions'] = null;
-		colData['colorText'] = null;
-		colData['tickColor'] = null;
-		colData['blinking'] = null;
+		colData["conditions"] = null;
+		colData["colorText"] = null;
+		colData["tickColor"] = null;
+		colData["blinking"] = null;
 	}
 
-	this.setColumnBlinking(colIndex, columnOptions["blinking"], columnOptions["field"]);
+	this.setColumnBlinking(colIndex, blinkingOptions, field);
 
 	var painter = colData["painter"];
 	var prevColoring = colData["coloring"];
@@ -704,10 +715,14 @@ ConditionalColoringPlugin.prototype.applyColor = function (colIndex, cell, rowDa
 * @param {Object} e
 */
 ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
+	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
+	if(!dataRows) {
+		return; // dataRows could be empty in case of no column is presented
+	}
+
 	var c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
 	var dataRow, insertedId, colData, blinking, bgBlinking, cachedValues, updatePrev;
 	var section = e["section"];
-	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
 	var colCount = section.getColumnCount();
 	var fromR = /** @type{number} */(e["fromRowIndex"]);
 	var toR = /** @type{number} */(e["toRowIndex"]);

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-percent-bar/es6/PercentBar.js

@@ -130,7 +130,7 @@ PercentBarPlugin.prototype.initialize = function (host, options) {
 
   if (!PercentBarPlugin._themeLoaded && !this._themeLoading) {
     this._themeLoading = true;
-    ElfUtil.getThemeColors().then(this._onThemeLoaded);
+    ElfUtil.getThemeColors(this._onThemeLoaded).then(this._onThemeLoaded);
   }
 };
 /** @override */

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