@refinitiv-ui/efx-grid 6.0.28 → 6.0.29

package/lib/core/es6/grid/Core.js

@@ -536,7 +536,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.38";
+	return "5.1.39";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -4979,7 +4979,7 @@ Core.prototype.getColumnField = function (colIndex) {
 	return "";
 };
 /** @public
-* @return {!Array.<string>} Return all column ids from existing column
+* @return {!Array.<string>} Return all column fields from existing columns
 */
 Core.prototype.getColumnFields = function () {
 	var colCount = this.getColumnCount();

package/lib/core/es6/grid/LayoutGrid.js

@@ -1867,6 +1867,7 @@ LayoutGrid.prototype.setRowOffset = function (index) {
 LayoutGrid.prototype.updateLayout = function () {
 	this._calculateViewSize(true); // Column bounds will be updated by trigger from Core
 
+	this._stretchedCells.updateCells();
 	this._updateRightSpaceStyle();
 };
 

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.28" };
+window.EFX_GRID = { version: "6.0.29" };

package/lib/tr-grid-column-stack/es6/ColumnStack.d.ts

@@ -129,6 +129,12 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public moveColumnById(srcCol: number|string|null, destCol?: (number|string)|null): boolean;
 
+    public hideStack(stackId: string): void;
+
+    public showStack(stackId: string): void;
+
+    public isStackHidden(stackId: string): boolean|null|null;
+
 }
 
 export default ColumnStackPlugin;

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

@@ -336,6 +336,7 @@ ColumnStackPlugin.prototype.config = function (options) {
 */
 ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
+	var host = this._host || this._hosts[0];
 
 	var columnOptions = obj["columns"];
 
@@ -351,7 +352,7 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 			for(var i = 0; i < memberIndices.length; i++){
 				var colIndex = memberIndices[i];
 				var colOption = columnOptions[colIndex];
-				if(colOption){
+				if(colOption && host.isColumnVisible(colIndex)){
 					colOption.hidden = colIndex !== activeColIndex;
 				}
 			}
@@ -1871,6 +1872,70 @@ ColumnStackPlugin.prototype.moveColumnById = function(srcCol, destCol) {
 	return dirty;
 };
 
+/** @private
+* @description Set stack visibility to the specific stack
+* @param {string} stackId
+* @param {boolean} visible
+*/
+ColumnStackPlugin.prototype._setStackVisibility = function(stackId, visible) {
+	var stackOption = this._stacks[stackId];
+	if(!stackOption){
+		return;
+	}
+
+	if(stackOption["spreading"] && !stackOption["collapsed"]){
+		var stackRefs = stackOption["stackRefs"];
+		for(var i = 0; i < stackRefs.length; i++){
+			var colIndex = this._getColumnIndex(stackRefs[i]);
+			this._setColumnVisibility(colIndex, visible);
+		}
+	} else {
+		var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+		this._setColumnVisibility(activeColIndex, visible);
+	}
+};
+
+/** @public
+* @description Hide specific stack from grid
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.hideStack = function(stackId) {
+	if(!stackId){
+		return;
+	}
+	this._setStackVisibility(stackId, false);
+};
+
+/** @public
+* @description Show specific stack from grid
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.showStack = function(stackId) {
+	if(!stackId){
+		return;
+	}
+	this._setStackVisibility(stackId, true);
+};
+
+/** @public
+* @description Get hidden status of specific stack
+* @param {string} stackId
+* @return {boolean|null}
+*/
+ColumnStackPlugin.prototype.isStackHidden = function(stackId) {
+	var stackOption = this._stacks[stackId];
+	var host = this._host || this._hosts[0];
+
+	if(!stackOption || !host){
+		return null;
+	}
+
+	var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+	var isVisible = host.isColumnVisible(activeColIndex);
+
+	return !isVisible;
+};
+
 
 
 export default ColumnStackPlugin;

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.d.ts

@@ -1,39 +1,44 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { extendObject } from '../../tr-grid-util/es6/Util.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {extendObject, injectCss, prettifyCss} 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';
 
 declare namespace ConditionalColoringPlugin {
 
+    type Options = {
+        predefinedColors?: any
+    };
+
     type ColumnOptions = {
-        conditions?: (ConditionalColoringPlugin.Condition)[],
-        colorText?: (string|boolean),
-        tickColor?: (string|boolean),
-        blinking?: (ConditionalColoringPlugin.Blinking|boolean),
-        field?: string
+        conditions?: (ConditionalColoringPlugin.Condition)[]|null,
+        colorText?: (string|boolean)|null,
+        tickColor?: (string|boolean)|null,
+        blinking?: (ConditionalColoringPlugin.Blinking|boolean)|null,
+        field?: string|null
     };
 
     type ConditionalColoringOptions = {
-        conditions?: (ConditionalColoringPlugin.Condition)[],
-        colorText?: (string|boolean),
-        tickColor?: (string|boolean),
-        field?: string
+        conditions?: (ConditionalColoringPlugin.Condition)[]|null,
+        colorText?: (string|boolean)|null,
+        tickColor?: (string|boolean)|null,
+        field?: string|null
     };
 
     type Condition = {
-        expression?: (string|((...params: any[]) => any)),
-        backgroundColor?: string,
-        color?: string
+        expression?: (string|((...params: any[]) => any))|null,
+        backgroundColor?: string|null,
+        color?: string|null,
+        cssClass?: string|null
     };
 
     type Blinking = {
-        border?: boolean,
-        field?: string,
-        up?: string,
-        down?: string,
-        level?: (string|boolean)
+        border?: boolean|null,
+        field?: string|null,
+        up?: string|null,
+        down?: string|null,
+        level?: (string|boolean)|null
     };
 
 }
@@ -56,21 +61,23 @@ declare class ConditionalColoringPlugin extends GridPlugin {
 
     public getColumnColoring(colIndex: number, options?: any): ConditionalColoringPlugin.ColumnOptions;
 
-    public setColumnColoring(colIndex: number, columnOptions?: (ConditionalColoringPlugin.ColumnOptions|null)): void;
+    public setColumnColoring(colIndex: number, columnOptions?: (ConditionalColoringPlugin.ColumnOptions|null)|null): void;
 
-    public setConditionalColoring(colIndex: number, coloringOptions?: (ConditionalColoringPlugin.ConditionalColoringOptions|null)): void;
+    public setConditionalColoring(colIndex: number, coloringOptions?: (ConditionalColoringPlugin.ConditionalColoringOptions|null)|null): void;
 
-    public setColumnBlinking(colIndex: number, blinkingOptions?: (boolean|ConditionalColoringPlugin.Blinking), field?: string): void;
+    public setColumnBlinking(colIndex: number, blinkingOptions?: (boolean|ConditionalColoringPlugin.Blinking)|null, field?: string|null): void;
 
     public blinkRow(rowIndex: number, blinkSignal: number, host?: any): void;
 
+    public setPredefinedColors(predefinedColors: any): void;
+
     public getColumnPainter(colIndex: number): CellPainter|null;
 
     public applyColor(colIndex: number, cell: any, rowData?: any): void;
 
     public static cleanUpPrevRows(): void;
 
-    public static setThemeColors(colors: { [key: string]:  string }): void;
+    public static setThemeColors(colors: { [key: string]:  string }|null): void;
 
     public reloadThemeColors(): Promise<any>|null;
 

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

@@ -1,10 +1,15 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { extendObject } from '../../tr-grid-util/es6/Util.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {extendObject, injectCss, prettifyCss} 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~Options
+* @description The options can be specified by `conditionalColoring` property of the main grid's options
+* @property {Object=} predefinedColors Predefined color object map for conditional coloring
+*/
+
 /** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
 * @description Extension column options that can be specified on each individual grid's column option:
 * @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
@@ -27,6 +32,7 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 * @property {(string|Function)=} expression Expression could be `[FIELD_1] > 0`
 * @property {string=} backgroundColor="" CSS color (e.g. #ffffff, black)
 * @property {string=} color CSS="" color (e.g. #000000, white)
+* @property {string=} cssClass cssClass="" Predefined color class name
 */
 
 /** @typedef {(string|boolean|Object)} ConditionalColoringPlugin~Blinking
@@ -79,6 +85,10 @@ Ext.inherits(ConditionalColoringPlugin, GridPlugin);
 * @private
 */
 ConditionalColoringPlugin._cleanUpTimer = 0;
+/** @type {string}
+* @private
+*/
+ConditionalColoringPlugin._controlClass = "predefined-conditional-color";
 
 /** @type {boolean}
 * @private
@@ -89,6 +99,10 @@ ConditionalColoringPlugin.prototype._blinkingEnabled = false; // WORKAROUND: To
 * @private
 */
 ConditionalColoringPlugin.prototype._pendingFields;
+/** @type {Object}
+* @private
+*/
+ConditionalColoringPlugin.prototype._predefinedColors = null;
 
 /** @override
 * @return {string}
@@ -118,6 +132,15 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 
 	hosts.push(host);
 
+	var extOptions = options["conditionalColoring"];
+	if (extOptions) {
+		var predefinedColors = extOptions["predefinedColors"];
+		if (predefinedColors != null && typeof predefinedColors === "object") {
+			this._injectStyles(predefinedColors);
+			host.enableClass(ConditionalColoringPlugin._controlClass);
+		}
+	}
+
 	if(hosts.length === 1) {
 		this.config(options);
 	} else {
@@ -206,6 +229,14 @@ ConditionalColoringPlugin.prototype.config = function (options) {
 ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
 
+	if(this._predefinedColors != null) {
+		var extOptions = obj["conditionalColoring"];
+		if(!extOptions) {
+			extOptions = obj["conditionalColoring"] = {};
+		}
+		extOptions["predefinedColors"] = this._predefinedColors;
+	}
+
 	var columns = obj.columns;
 	if (!columns) {
 		columns = obj.columns = [];
@@ -244,7 +275,8 @@ ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, optio
 			extendObject(exCondition, conditions[n], [
 				"expression",
 				"backgroundColor",
-				"color"
+				"color",
+				"cssClass"
 			]);
 
 			options.conditions.push(exCondition);
@@ -824,6 +856,49 @@ ConditionalColoringPlugin._mergeUpdates = function(e) {
 	return changedRows;
 };
 /** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+ConditionalColoringPlugin.prototype._injectStyles = function(predefinedColors) {
+	var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .tr-lg .cell";
+	var css = [];
+	var ss, styles, value;
+	for (var className in predefinedColors) {
+		css.push(prefix + "." + className);
+		ss = [];
+		styles = predefinedColors[className];
+
+		value = styles["backgroundColor"];
+		if(value) {
+			ss.push("background-color: " + value + ";");
+		}
+
+		value = styles["color"];
+		if(value) {
+			ss.push("color: " + value + ";");
+		}
+
+		css.push(ss);
+	}
+
+	// TODO: support multitable
+	var host = this._hosts[0];
+
+	if(this._styleTag) {
+		this._styleTag.parentNode.removeChild(this._styleTag);
+		this._styleTag = null;
+	}
+	this._styleTag = injectCss(prettifyCss(css), host.getElement());
+	this._predefinedColors = predefinedColors;
+};
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+ConditionalColoringPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._injectStyles(predefinedColors);
+	}
+};
+/** @private
 * @function
 * @return {!FilterBuilder}
 */

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

@@ -83,6 +83,8 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @description Fired after the text editor has been closed and all operations are done. This is useful to clean up left over resource and get result text entered.
 * @type {Object}
 * @property {string=} text Text that user has entered
+* @property {boolean=} groupHeader if the row is header of row, it will be groupHeader
+* @property {Object} suggestionDetail Suggestion detail for auto suggest "item-select" event
 * @property {boolean} cancelled Readonly flag. Indicates whether the commit operation has been cancelled
 * @property {boolean} committed Readonly flag. The opposite of `cancelled` flag
 */
@@ -92,6 +94,8 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @type {Object}
 * @property {string=} text Text that user has entered
 * @property {boolean=} cancel Set to true to cancel the commit operation.
+* @property {boolean=} groupHeader if the row is header of row, it will be groupHeader
+* @property {Object} suggestionDetail Suggestion detail for auto suggest "item-select" event
 * @example
 * var cep = new InCellEditingPlugin();
 * cep.listen("beforeCommit", function(e) {
@@ -1450,15 +1454,20 @@ InCellEditingPlugin.prototype._onPopupHide = function (e) {
 * @param {Object} event
 */
 InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
-  if (event.detail.target) {
-    var method = event.detail.method;
-    var value = event.detail.target.value;
-    if (method === 'enter' || method === 'click') {
-      if (value) {
-        this.setText(value);
-        this._commitText(true);
-      }
-    }
+  var eventDetail = event.detail;
+  if (!eventDetail) {
+    return;
+  }
+  var targetSelected = eventDetail.target;
+  if (!targetSelected) {
+    return;
+  }
+  var suggestionMethod = eventDetail.method;
+  // Need to check the details of the methods, another method like a navigation, reset, clear shouldn't commit text
+  // TODO: We need to handled tab to move. Currently, the property suggestionDetail in 'beforeCommit' event doesn't handlded when we use autosuggest with tab to move.
+  if (suggestionMethod === "click" || suggestionMethod === "enter") {
+    this.setText(targetSelected.value);
+    this._commitText(true, eventDetail.suggestion);
   }
 };
 
@@ -1554,8 +1563,9 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
 /** Commit text from editor to cell.
 * @private
 * @param {boolean} committed
+* @param {Object} suggestionDetail suggestion detail for auto suggest element
 */
-InCellEditingPlugin.prototype._commitText = function (committed) {
+InCellEditingPlugin.prototype._commitText = function (committed, suggestionDetail) {
   var t = this;
   var arg = t._activePos;
   if (!t.isEditing() || !arg) {
@@ -1566,6 +1576,10 @@ InCellEditingPlugin.prototype._commitText = function (committed) {
   var enteredValue = arg["text"] = this.getValue();
   var groupHeader = arg["groupHeader"] || false;
   if (committed) {
+    if (suggestionDetail) {
+      // This property is only available when the user commits text from the 'item-select' event of the auto suggest.
+      arg["suggestionDetail"] = suggestionDetail;
+    }
     if (t.hasListener("beforeCommit")) {
       t._dispatch("beforeCommit", arg);
       committed = !arg["cancel"];

package/lib/tr-grid-util/es6/CellPainter.d.ts

@@ -19,7 +19,8 @@ declare namespace CellPainter {
         fontWeight?: string|null,
         fontStyle?: string|null,
         textAlign?: string|null,
-        textDecoration?: string|null
+        textDecoration?: string|null,
+        cssClass?: string|null
     };
 
     type ThemeColors = {

package/lib/tr-grid-util/es6/CellPainter.js

@@ -18,6 +18,7 @@ import { ElfUtil } from "./ElfUtil.js";
 * @property {string=} fontStyle
 * @property {string=} textAlign
 * @property {string=} textDecoration
+* @property {string=} cssClass Predefined color class name
 */
 
 /** @typedef {Object.<string, string>} CellPainter~ThemeColors
@@ -517,14 +518,21 @@ CellPainter.prototype.renderForPrinting = function(cell, rowData, min, max) {
 		return;
 	}
 	var styles = this._getStyles(rowData, min, max);
-	var c = styles["backgroundColor"];
-	if(c) {
-		cell.style.backgroundColor = c;
-	}
-
-	c = styles["color"];
-	if(c) {
-		cell.style.color = c;
+	var cssClass = styles["cssClass"];
+	if (cssClass) {
+		if (cell._coloringCssClass !== cssClass) {
+			cell.classList.remove(cell._coloringCssClass);
+			cell._coloringCssClass = null;
+		}
+		cell.classList.add(cssClass);
+		cell._coloringCssClass = cssClass;
+	} else {
+		if (cell._coloringCssClass) {
+			cell.classList.remove(cell._coloringCssClass);
+			cell._coloringCssClass = null;
+		}
+		cell.style.backgroundColor = styles["backgroundColor"] || "";
+		cell.style.color = styles["color"] || "";
 	}
 };
 
@@ -650,8 +658,24 @@ CellPainter._cellRestorer = function(scope) {
 		}
 
 		var styles = this._getStyles(rowData, min, max);
-		elem.style.backgroundColor = styles["backgroundColor"] || "";
-		elem.style.color = styles["color"] || "";
+		var cssClass = styles["cssClass"];
+		if (cssClass) {
+			if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
+				elem.classList.remove(elem._coloringCssClass);
+				elem._coloringCssClass = null;
+			}
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
+			elem.style.backgroundColor = "";
+			elem.style.color = "";
+		} else {
+			if (elem._coloringCssClass) {
+				elem.classList.remove(elem._coloringCssClass);
+				elem._coloringCssClass = null;
+			}
+			elem.style.backgroundColor = styles["backgroundColor"] || "";
+			elem.style.color = styles["color"] || "";
+		}
 	}
 };
 
@@ -1000,11 +1024,25 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 	}
 
 	var styles = this._getStyles(rowData, min, max);
-	var ss = CellPainter.bgStyles;
-	var elStyle = elem.style;
-	for (var n = ss.length; --n >= 0;) {
-		var styleName = ss[n];
-		elStyle[styleName] = styles[styleName] || "";
+	var cssClass = styles["cssClass"];
+	if (cssClass) {
+		if (elem._coloringCssClass !== cssClass) {
+			elem.classList.remove(elem._coloringCssClass);
+			elem._coloringCssClass = null;
+		}
+		elem.classList.add(cssClass);
+		elem._coloringCssClass = cssClass;
+	} else {
+		if (elem._coloringCssClass) {
+			elem.classList.remove(elem._coloringCssClass);
+			elem._coloringCssClass = null;
+		}
+		var ss = CellPainter.bgStyles;
+		var elStyle = elem.style;
+		for (var n = ss.length; --n >= 0;) {
+			var styleName = ss[n];
+			elStyle[styleName] = styles[styleName] || "";
+		}
 	}
 };
 

package/lib/types/es6/ColumnStack.d.ts

@@ -129,6 +129,12 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public moveColumnById(srcCol: number|string|null, destCol?: (number|string)|null): boolean;
 
+    public hideStack(stackId: string): void;
+
+    public showStack(stackId: string): void;
+
+    public isStackHidden(stackId: string): boolean|null|null;
+
 }
 
 export default ColumnStackPlugin;

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+import {DataGenerator} from "../tr-grid-util/es6/jet/DataGenerator.js"
+import {MockRTK} from "../tr-grid-util/es6/jet/MockRTK.js"
+export {DataGenerator, MockRTK}

package/lib/utils/index.js

@@ -0,0 +1,3 @@
+import {DataGenerator} from "../tr-grid-util/es6/jet/DataGenerator.js"
+import {MockRTK} from "../tr-grid-util/es6/jet/MockRTK.js"
+export {DataGenerator, MockRTK}

package/lib/versions.json

@@ -1,5 +1,5 @@
 {
-	"tr-grid-util": "1.3.87",
+	"tr-grid-util": "1.3.88",
 	"@grid/column-dragging": "1.0.11",
 	"@grid/row-segmenting": "1.0.23",
 	"@grid/statistics-row": "1.0.13",
@@ -12,13 +12,13 @@
 	"tr-grid-column-grouping": "1.0.46",
 	"tr-grid-column-resizing": "1.0.28",
 	"tr-grid-column-selection": "1.0.26",
-	"tr-grid-column-stack": "1.0.52",
-	"tr-grid-conditional-coloring": "1.0.57",
+	"tr-grid-column-stack": "1.0.53",
+	"tr-grid-conditional-coloring": "1.0.58",
 	"tr-grid-content-wrap": "1.0.19",
 	"tr-grid-contextmenu": "1.0.38",
 	"tr-grid-filter-input": "0.9.31",
 	"tr-grid-heat-map": "1.0.28",
-	"tr-grid-in-cell-editing": "1.0.75",
+	"tr-grid-in-cell-editing": "1.0.77",
 	"tr-grid-pagination": "1.0.24",
 	"tr-grid-percent-bar": "1.0.22",
 	"tr-grid-printer": "1.0.16",

package/package.json

@@ -24,6 +24,9 @@
 			"grid": [
 				"lib/grid/lib/efx-grid.d.ts"
 			],
+			"utils": [
+				"lib/utils/index.d.ts"
+			],
 			"*": [
 				"lib/types/index.d.ts"
 			]
@@ -53,7 +56,8 @@
 		"./extensions": "./lib/index.js",
 		"./window-exporter": "./lib/window-exporter.js",
 		"./grid": "./lib/grid/lib/efx-grid.js",
-		"./formatters/": "./lib/formatters/es6/"
+		"./formatters/": "./lib/formatters/es6/",
+		"./utils": "./lib/utils/index.js"
 	},
 	"peerDependencies": {
 		"@refinitiv-ui/core": "^6.2.0",
@@ -62,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.28"
+	"version": "6.0.29"
 }