@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

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

@@ -1,5 +1,6 @@
 import { nestedObjectToArray, rgb2Hex } from "./Util.js";
 import { Deferred } from "./Deferred.js";
+import { ElementObserver } from "./ElementObserver.js";
 
 /** Dialog supporting language (selection dialog, formater dialog and filter dialog)
 * @type {!Object.<string, boolean>}
@@ -63,6 +64,22 @@ ElfUtil._dummyIcon = null;
 * @private
 */
 ElfUtil._iconLoaded = false;
+/** @type {string|null}
+* @private
+*/
+ElfUtil._profileName = null;
+/** @type {Array}
+* @private
+*/
+ElfUtil._callbacks = [];
+/** @type {boolean}
+* @private
+*/
+ElfUtil._observed = false;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._pendingResolve = false;
 
 /** @type {Object.<string, Object>}
 * @private
@@ -78,7 +95,7 @@ ElfUtil._icons = {
 			"sortable": "sort-up-down"
 		},
 		"columnStack": {
-			"stack": "list",
+			"stack": "map-layers",
 			"expand": "right",
 			"collapse": "left"
 		}
@@ -334,57 +351,146 @@ ElfUtil.getCssVariables = function (obj, optElem) {
 	return obj || null;
 };
 
+/** @public
+* @param {Object} rtk
+*/
+ElfUtil.setRTK = function(rtk) {
+	if(rtk != null) {
+		ElfUtil._rtk = rtk;
+	}
+};
+
+/** Get current profile name set on the root html element (document.documentElement)
+* @public
+* @return {string} Current profile name
+*/
+ElfUtil.getMovementColorProfile = function() {
+	return document.documentElement.getAttribute("movement-color-profile");
+};
+
+/** @private
+* @param {Function} cb
+*/
+ElfUtil._addThemeChangedCallback = function(cb) {
+	var callbacks = ElfUtil._callbacks;
+	if(callbacks.indexOf(cb) < 0) {
+		callbacks.push(cb);
+	}
+};
+
 /** Gets current theme colors from the document and returns a promise. <br>
-* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists. <br>
+* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists or RTK is available. <br>
 * To re-request/reset theme colors, set ElfUtil.themeReady variable to null
 * @public
+* @param {Function=} themeChangedCb
 * @return {Promise<Object>} A promise of object of theme colors
 */
-ElfUtil.getThemeColors = function() {
+ElfUtil.getThemeColors = function(themeChangedCb) {
+	if(typeof themeChangedCb === "function") {
+		ElfUtil._addThemeChangedCallback(themeChangedCb);
+	}
+
 	if(ElfUtil.themeReady) {
 		return ElfUtil.themeReady;
 	}
+
 	var d = ElfUtil._deferred = new Deferred();
 	ElfUtil.themeReady = d.promise;
 
-	var jet = window ? window.JET : null;
-	if(jet && jet.Settings) {
-		try {
-			jet.Settings.read(ElfUtil._onColorProfile, {
-				providerName: "Configuration",
-				settingName: "RDE_USER_CURRENT_TICK_COLOR"
-			});
-		} catch (err) {
-			d.reject("Cannot read JET's settings");
+	var profileName = ElfUtil.getMovementColorProfile();
+	if(profileName) {
+		if(profileName !== ElfUtil._profileName) {
+			setTimeout(ElfUtil._profileNameRetrieved, 100); // TODO: Find a proper way to ensure that theme is ready
+		} else {
+			ElfUtil._deferred.resolve(ElfUtil.themeColors);
 		}
 	} else {
-		setTimeout(ElfUtil._retrieveThemeColors, 100); // TODO: Find a proper way to ensure that theme is ready
+		var options = {
+			providerName: "Configuration",
+			settingName: "RDE_USER_CURRENT_TICK_COLOR"
+		};
+
+		var jet = window ? window.JET : null;
+		if(ElfUtil._rtk && ElfUtil._rtk.Settings) {
+			ElfUtil._rtk.Settings.getAsync(options).then(ElfUtil._loadingProfileSuccess, ElfUtil._loadingProfileFailure);
+		} else if(jet && jet.Settings) {
+			try {
+				jet.Settings.read(ElfUtil._loadingProfileSuccess, options);
+			} catch (err) {
+				ElfUtil._loadingProfileFailure();
+			}
+		} else {
+			setTimeout(ElfUtil._profileNameRetrieved, 100); // TODO: Find a proper way to ensure that theme is ready
+		}
 	}
+
 	return d.promise;
 };
 
-/** Get user's color profile from JET and set it to html tag (document.documentElement)
+/** @private
+* @param {string} profileName
+*/
+var movementColorProfileChanged = function(profileName) {
+	if(profileName && profileName !== ElfUtil._profileName) {
+		ElfUtil._retrieveThemeColors(profileName);
+
+		if(ElfUtil._pendingResolve) {
+			ElfUtil._pendingResolve = false;
+			ElfUtil._deferred.resolve(ElfUtil.themeColors);
+		}
+
+		var callbacks = ElfUtil._callbacks;
+		for (var i = 0; i < callbacks.length; i++) {
+			callbacks[i]();
+		}
+	}
+};
+
+/** Get user's color profile from JET or TRK and set it to html tag (document.documentElement)
 * @private
-* @param {string} colorProfile Returned from JET.Settings
+* @param {string} profileName Returned from JET.Settings or RTK.Settings
 */
-ElfUtil._onColorProfile = function (colorProfile) {
-	if(colorProfile) {
-		document.documentElement.setAttribute("movement-color-profile", colorProfile.toLowerCase());
+ElfUtil._loadingProfileSuccess = function(profileName) {
+	if(profileName) {
+		document.documentElement.setAttribute("movement-color-profile", profileName.toLowerCase());
+	}
+
+	if(ElfUtil._observed) { // Let attribute listener does the job
+		ElfUtil._pendingResolve = true;
+	} else {
+		ElfUtil._profileNameRetrieved(profileName);
 	}
-	ElfUtil._retrieveThemeColors();
 };
-/** Get current profile name set on the root html element (document.documentElement)
-* @public
-* @return {string} Current profile name
+
+/** @private
 */
-ElfUtil.getMovementColorProfile = function() {
-	return document.documentElement.getAttribute("movement-color-profile");
+ElfUtil._loadingProfileFailure = function() {
+	if(!ElfUtil._observed) {
+		ElfUtil._observed = true;
+		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
+	}
+	ElfUtil._deferred.reject("Failed to get movement color profile from settings.");
+};
+
+/** @private
+*/
+ElfUtil._profileNameRetrieved = function() {
+	var profileName = ElfUtil.getMovementColorProfile();
+	ElfUtil._retrieveThemeColors(profileName);
+	if(!ElfUtil._observed) {
+		ElfUtil._observed = true;
+		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
+	}
+	ElfUtil._deferred.resolve(ElfUtil.themeColors);
 };
 
 /** Get theme colors from document
 * @private
+* @param {string} profileName Movement color profile name
 */
-ElfUtil._retrieveThemeColors = function() {
+ElfUtil._retrieveThemeColors = function(profileName) {
+	ElfUtil._profileName = profileName;
+
 	var colors = ElfUtil.themeColors = ElfUtil.getCssVariables({
 		"primary": "--color-scheme-primary", // Usually used in headers, and selection
 		"secondary": "--color-scheme-secondary",
@@ -449,10 +555,7 @@ ElfUtil._retrieveThemeColors = function() {
 	colors["baseGrid"] = colors["tableBg"];
 	colors["baseText"] = colors["tableText"];
 	colors["trackColor"] = colors["primary"] || ElfUtil._defaultColors["trackColor"];
-
-	ElfUtil._deferred.resolve(colors);
 };
 
-
 export default ElfUtil;
 export { ElfUtil };

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

@@ -39,10 +39,10 @@ ExpanderIcon._iconName = ""; // static variable
 * @private
 */
 ExpanderIcon._styles = prettifyCss([
-	".tr-grid .expander-disabled .expander", [
+	".tr-grid.expander-disabled .expander", [
 		"cursor: default;"
 	],
-	".tr-grid .folder-disabled .column .cell.folder", [
+	".tr-grid.folder-disabled .cell.folder", [
 		"cursor: default;"
 	],
 	".tr-grid .expander", [

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

@@ -167,7 +167,7 @@ FieldFormatter.prototype.init = function(options) { // deserialize
 	var utc = options["useUTCTime"];
 	if(utc != null || dtf != null) {
 		this.setDateTimeMeta(
-			dtf || "MM/DD/YYYY",
+			dtf,
 			utc,
 			(options["idnSource"]) ? "idn" : "" // IDN Source will send time in second instead of millisecond.
 		);
@@ -188,8 +188,10 @@ FieldFormatter.prototype.getOptions = function(options) { // serialize
 
 	options["field"] = this._field;
 	options["formatType"] = this._userFormatType ? this._userFormatType : this._formatType; // WARNING: Beware of case sensitivity
-	options["dateTimeFormat"] = this._dateTimeFormat;
-	options["useUTCTime"] = (this._timeZone == "GMT");
+	if(toDateTimeType(options["formatType"]) == DATE_TIME){
+		options["dateTimeFormat"] = this._dateTimeFormat;
+		options["useUTCTime"] = (this._timeZone == "GMT");
+	}
 	return options;
 };
 /** @public
@@ -244,7 +246,7 @@ FieldFormatter.prototype.setField = function(field, combinedField, formattedFiel
 * @param {string=} lang
 */
 FieldFormatter.prototype.setDateTimeMeta = function(format, gmtTimeZone, inputSource, lang) {
-	this._dateTimeFormat = format;
+	this._dateTimeFormat = format || "";
 	this._timeZone = (gmtTimeZone !== false) ? "GMT" : "LOCAL";
 	this._idnSource = (inputSource && inputSource.toLowerCase() == "idn") ? "idn" : "";
 	DateTime.setLocale(lang);
@@ -385,7 +387,7 @@ FieldFormatter.prototype._formatDateTime = function(val, rowData) {
 		}
 		val = new Date(sec * 1000); // Convert real-time raw data (second) to millisecond
 	}
-	return this._df(val, this._dateTimeFormat, this._timeZone);
+	return this._df(val, this._dateTimeFormat  || "MM/DD/YYYY", this._timeZone);
 };
 /** @private
 * @param {number|string|Date} val

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

@@ -262,13 +262,17 @@ GridPlugin.prototype.getColumnIndex = function (colId) {
 GridPlugin.prototype.getColumnIndices = function (colRefs) {
 	if(this._compositeGrid) {
 		var allFields = this._compositeGrid.getColumnFields();
+		var columnCount = this._compositeGrid.getColumnCount();
 		var columnIndices = [];
+		var colRef;
 		for (var i = 0; i < colRefs.length; i++) {
-
-			if(typeof colRefs[i] === 'number') { // When user pass index
-				columnIndices.push(colRefs[i]);
+			colRef = colRefs[i];
+			if(typeof colRef === 'number') { // When user pass index
+			  if(colRef >= 0 && colRef < columnCount) {
+			  	columnIndices.push(colRef);
+			  }
 			} else {
-				var columnIndex = allFields.indexOf(colRefs[i]); // Looping check column index of colRefs field
+				var columnIndex = allFields.indexOf(colRef); // Looping check column index of colRefs field
 				if(columnIndex !== -1) {
 					columnIndices.push(columnIndex);
 				}

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

@@ -18,6 +18,8 @@ declare class MultiTableManager {
 
     public setTableCount(num: number): void;
 
+    public wrapTable(rowCount: number): void;
+
     public getTable(at?: number): Element|null;
 
     public insertRow(rowOption?: any, at?: number): void;
@@ -26,6 +28,12 @@ declare class MultiTableManager {
 
     public getRowCount(): number;
 
+    public insertColumn(columnOption: any, idx?: number): void;
+
+    public removeColumn(colRef: any): void;
+
+    public getColumnCount(): number;
+
 }
 
 export default MultiTableManager;

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

@@ -49,6 +49,10 @@ var _newArrayOfObject = function (num) {
 * @param {boolean=} bool
 */
 var _toggleInlineElement = function (elem, bool) {
+	if(!elem || elem.style.display === "none") {
+		return;
+	}
+
 	var s = elem.style;
 	if(bool == null) {
 		bool = s.display !== "inline-block";
@@ -68,7 +72,7 @@ var _toggleInlineElement = function (elem, bool) {
 var MultiTableManager = function (gridElem) {
 	this._onDelayedConfiguration = this._onDelayedConfiguration.bind(this);
 	this._onConfiguration = this._onConfiguration.bind(this);
-	this._onDataChanged = this._onDataChanged.bind(this);
+	this._onWrapCountChanged = this._onWrapCountChanged.bind(this);
 
 	this._tables = [];
 	if(gridElem) {
@@ -102,6 +106,10 @@ MultiTableManager.prototype._emeraldGrid = false;
 * @private
 */
 MultiTableManager.prototype._ready = false;
+/** @type {number}
+* @private
+*/
+MultiTableManager.prototype._wrapSize = 0;
 
 
 /** @public
@@ -196,6 +204,7 @@ MultiTableManager._onVScrollbarSynchronization = function(vScrollbarHost, hScrol
 	for(var i = 0; i < gridLen; ++i) {
 		var gridElem = gridElems[i];
 		var core = gridElem.api.getCoreGrid();
+
 		_toggleInlineElement(gridElem, true);
 		if(i > 0) {
 			mainCore.synchronizeVScrollbar(core);
@@ -234,6 +243,8 @@ MultiTableManager.prototype.setGridConfig = function (configObj) {
 * @param {Object} e
 */
 MultiTableManager.prototype._onDelayedConfiguration = function (e) {
+	this._ready = false;
+	// TODO: Handle the case where config is changed at runtime
 	setTimeout(this._onConfiguration, 10); // Add delay to ensure that scrollbars are synchronized first
 };
 /** @private
@@ -245,15 +256,16 @@ MultiTableManager.prototype._onConfiguration = function () {
 	}
 	this._ready = true;
 
-	this.setTableCount(this._tableCount);
+	if(this._wrapSize) {
+		this._wrapTable(this._wrapSize);
+	} else {
+		this._setTableCount(this._tableCount);
+	}
 };
 
 /** @public
 */
 MultiTableManager.prototype.dispose = function () {
-	// var main = this._tables[0];
-	// main.api.getDataSource().unlisten("dataChanged", this._onDataChanged);
-
 	var len = this._tables.length;
 	for(var i = 0; i < len; ++i) {
 		this._tables[i].dispose();
@@ -272,7 +284,8 @@ MultiTableManager.prototype._cloneConfig = function () {
 	if(this._configObj) {
 		obj = cloneObject(this._configObj);
 		if(Array.isArray(obj.columns)) {
-			obj.columns = this._configObj.columns.slice();
+			var runtimeConfig = this._tables[0].api ? this._tables[0].api.getConfigObject() : this._configObj;
+			obj.columns = runtimeConfig.columns.slice();
 		}
 	}
 	return obj || {};
@@ -282,13 +295,12 @@ MultiTableManager.prototype._cloneConfig = function () {
 * @return {number}
 */
 MultiTableManager.prototype.getTableCount = function() {
-	return this._tableCount;
+	return this._tables.length;
 };
-/**
-* @public
+/** @private
 * @param {number} num Number of tables. Number cannot be less than one.
 */
-MultiTableManager.prototype.setTableCount = function(num) {
+MultiTableManager.prototype._setTableCount = function(num) {
 	this._tableCount = num > 0 ? num : 1;
 
 	if(this._ready) {
@@ -301,30 +313,53 @@ MultiTableManager.prototype.setTableCount = function(num) {
 	}
 };
 /**
+* @public
+* @param {number} num Number of tables. Number cannot be less than one.
+*/
+MultiTableManager.prototype.setTableCount = function(num) {
+	if(this._wrapSize) {
+		this._wrapTable(0);
+	}
+	this._setTableCount(num);
+};
+/**
 * @private
+* @param {number} tableIndex
 * @return {Element}
 */
-MultiTableManager.prototype._addTable = function() {
+MultiTableManager.prototype._addTable = function(tableIndex) {
 	var main = this._tables[0];
 	var parentElem = main.parentNode;
+	var core = main.api.getCoreGrid();
 	var mainDataView = main.api.getDataView();
 	// var mainDataTable = main.api.getDataTable();
+	var stp = core.getPlugin("SortableTitlePlugin");
+	var dtp = core.getPlugin("DragAndDropTitlePlugin");
 
 	var configObj = this._cloneConfig();
 	configObj.extensions = this._generateExtensions();
+
 	delete configObj.staticDataRows;
 	delete configObj.rows;
 	delete configObj.dataModel;
 
-	var rowCount = mainDataView.getRowCount();
-
-	var ary = _newArrayOfObject(rowCount);
-	if(this._emeraldGrid) {
-		configObj.dataModel = {
-			data: ary
-		};
+	if(this._wrapSize) {
+		var wrappedViews = mainDataView.getWrappedViews();
+		configObj.dataView = wrappedViews[tableIndex - 1];
+		configObj.grid = main.api;
 	} else {
-		configObj.rows = ary;
+		configObj["SortableTitle"] = stp;
+		configObj["DragAndDropTitle"] = dtp;
+		var rowCount = mainDataView.getRowCount();
+
+		var ary = _newArrayOfObject(rowCount);
+		if(this._emeraldGrid) {
+			configObj.dataModel = {
+				data: ary
+			};
+		} else {
+			configObj.rows = ary;
+		}
 	}
 
 	var sub = document.createElement(main.tagName);
@@ -347,19 +382,22 @@ MultiTableManager.prototype._addTables = function(num) {
 
 	var main = this._tables[0];
 	_toggleInlineElement(main, true); // TODO: Check if we need to do this every time
+
 	// main.api.setFitContentWidth(true);
 
 	for(var i = 0; i < num; ++i) {
-		var grid = this._addTable();
+		var grid = this._addTable(this._tables.length);
 		this._tables.push(grid);
 	}
 
-	if(main._vScrollbarSynchronization) {
-		MultiTableManager.synchronizeVScrollbar(
-			main.api.getCoreGrid().getVScrollbar().getParent(),
-			main.parentNode,
-			this._tables
-		);
+	if(!this._wrapSize) {
+		if(main._vScrollbarSynchronization) {
+			MultiTableManager.synchronizeVScrollbar(
+				main.api.getCoreGrid().getVScrollbar().getParent(),
+				main.parentNode,
+				this._tables
+			);
+		}
 	}
 };
 /**
@@ -381,20 +419,62 @@ MultiTableManager.prototype._removeTables = function(num) {
 			sub.parentNode.removeChild(sub);
 		}
 	}
-	if(this._tables.length === 1) {
-		// TODO: Reset state
-		this._tables[0].style.display = "";
+	// if(this._tables.length === 1) {
+	// TODO: Reset state
+	// this._tables[0].style.display = ""; // Remove display inline
+	// }
+};
+
+
+/** @private
+* @param {number} rowCount Number of row per table. Set number to zero to turn off wrap mode.
+*/
+MultiTableManager.prototype._wrapTable = function(rowCount) {
+	this._wrapSize = rowCount > 0 ? rowCount : 0;
+
+	if(this._ready) {
+		var main = this._tables[0];
+		if(this._wrapSize) {
+			main.style.display =  "none";
+			main.api.getCoreGrid().getVScrollbar().disable();
+		} else {
+			main.style.display =  "";
+			_toggleInlineElement(main, true);
+			main.api.getCoreGrid().getVScrollbar().disable(false);
+		}
+
+		var dv = main.api.getDataView();
+		dv.listen("wrapCountChanged", this._onWrapCountChanged);
+		dv.wrapView(this._wrapSize);
 	}
 };
 /**
-* @private
+* @public
+* @param {number} rowCount Number of row per table. Set number to zero to turn off wrap mode.
+*/
+MultiTableManager.prototype.wrapTable = function(rowCount) {
+	if(rowCount && this._tableCount > 1) {
+		this._setTableCount(1);
+	}
+	if(!rowCount || rowCount < 0) {
+		rowCount = 0;
+	}
+	if(this._wrapSize !== rowCount) {
+		this._wrapTable(rowCount);
+	}
+};
+/** @private
 * @param {Object} e
 */
-MultiTableManager.prototype._onDataChanged = function(e) {
-
+MultiTableManager.prototype._onWrapCountChanged = function(e) {
+	if(e.prevCount < e.newCount) {
+		this._addTables(e.newCount - e.prevCount);
+	}
+	if(e.newCount < e.prevCount) {
+		this._removeTables(e.prevCount - e.newCount);
+	}
 };
 
-
 /** @public
 * @param {number=} at
 * @return {Element}
@@ -445,23 +525,6 @@ MultiTableManager.prototype._execAll = function(methodName, args) {
 	}
 };
 
-/** @private
-* @param {number} num
-*/
-MultiTableManager.prototype._setRtRowCount = function(num) {
-	var tableCount = this._tables.length;
-	// grid.api.getRowCount();
-	for(var i = 1; i < tableCount; ++i) {
-		var sub = this._tables[i];
-		sub.api.insertRows(_newArrayOfObject(num));
-	}
-};
-/** @private
-* @param {number} num
-*/
-MultiTableManager.prototype._addCsRows = function(num) {
-};
-
 /** @public
 * @param {Object=} rowOption
 * @param {number=} at
@@ -471,10 +534,14 @@ MultiTableManager.prototype.insertRow = function(rowOption, at) {
 		return; // TODO
 	}
 
-	var tableCount = this._tables.length;
-	for(var i = 0; i < tableCount; ++i) {
-		var tbl = this._tables[i];
-		tbl.api.insertRow(rowOption, at);
+	if(this._wrapSize) {
+		this.getTable().api.insertRow(rowOption, at);
+	} else {
+		var tableCount = this._tables.length;
+		for(var i = 0; i < tableCount; ++i) {
+			var tbl = this._tables[i];
+			tbl.api.insertRow(rowOption, at);
+		}
 	}
 };
 /** @public
@@ -488,18 +555,58 @@ MultiTableManager.prototype.removeRow = function(at) {
 		at = this.getRowCount() - 1;
 	}
 
+	if(this._wrapSize) {
+		this.getTable().api.removeRow(at);
+	} else {
+		var tableCount = this._tables.length;
+		for(var i = 0; i < tableCount; ++i) {
+			var tbl = this._tables[i];
+			tbl.api.removeRow(at);
+		}
+	}
+};
+
+/** @public
+* @return {number}
+*/
+MultiTableManager.prototype.getRowCount = function() {
+	return this.getTable().api.getRowCount();
+};
+
+/** @public
+* @param {*} columnOption String will be treated as field, while object is treated as the column options
+* @param {number=} idx
+*/
+MultiTableManager.prototype.insertColumn = function(columnOption, idx) {
+	if(this._emeraldGrid) {
+		return; // TODO
+	}
+
 	var tableCount = this._tables.length;
 	for(var i = 0; i < tableCount; ++i) {
 		var tbl = this._tables[i];
-		tbl.api.removeRow(at);
+		tbl.api.insertColumn(columnOption, idx);
+	}
+};
+/** @public
+* @param {*} colRef Column reference
+*/
+MultiTableManager.prototype.removeColumn = function(colRef) {
+	if(this._emeraldGrid) {
+		return; // TODO
+	}
+	var tableCount = this._tables.length;
+	for(var i = 0; i < tableCount; ++i) {
+		var tbl = this._tables[i];
+		tbl.api.removeColumn(colRef);
 	}
 };
 
 /** @public
 * @return {number}
 */
-MultiTableManager.prototype.getRowCount = function() {
-	return this.getTable().api.getRowCount();
+MultiTableManager.prototype.getColumnCount = function() {
+	return this.getTable().api.getColumnCount();
 };
 
 export default MultiTableManager;

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

@@ -27,6 +27,8 @@ declare class NumberFormatter {
 
     public static padDecimalPartWithZeroes(str: string, precision: number): string;
 
+    public static multiplyByHundred(num: number): number;
+
     public getOptions(options?: any): any;
 
     public format(origVal: number): string;