@refinitiv-ui/efx-grid 6.0.3 → 6.0.4

package/lib/tr-grid-row-grouping/es6/RowGrouping.js

@@ -3,6 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { ExpanderIcon } from "../../tr-grid-util/es6/ExpanderIcon.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /** @typedef {Object} RowGroupingPlugin~Options
 * @description The options can be specified by `rowGrouping` property of the main grid's options
@@ -23,6 +24,8 @@ import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
 * @property {boolean=} autoGroupSorting=false If enabled, group sorting will be performed after each `groupAdded` event
 * @property {(boolean|number|Array.<number>)=} indentSize Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
 * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
+* @property {Object=} predefinedColors Predefined color object map for color tag
+* @property {Object=} groupColors The object map of group ID and predefined color.
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
 * @property {Function=} groupAdded=null Event handler
 * @property {Function=} beforeGroupAdded=null Event handler
@@ -264,6 +267,22 @@ RowGroupingPlugin.prototype._rowPainter = null;
 * @private
 */
 RowGroupingPlugin.prototype._colorTag = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._predefinedColors = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._groupColors = null;
+/** @type {string}
+* @private
+*/
+RowGroupingPlugin._controlClass = "predefined-color-tag";
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._styleTag = null;
 
 /** @type {Function}
 * @private
@@ -391,6 +410,12 @@ RowGroupingPlugin.prototype.initialize = function (host, options) {
 
 	var enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
 	RowPainter.disableColorTag(host, enabled === false);
+
+	if (this._predefinedColors != null) {
+		this._injectStyles(this._predefinedColors);
+		host.enableClass(RowGroupingPlugin._controlClass);
+	}
+
 	RowPainter.applyGroupingStyles(host);
 
 	this._applyGrouping(); // TODO: Support run-time theme loading
@@ -528,17 +553,27 @@ RowGroupingPlugin.prototype.config = function (options) {
 		if (this.hasListener("groupFooterBinding")) {
 			this._footerRows = 1;
 		}
-		this._rowPainter = new RowPainter({
-			clickableCell: this._clickableCell,
-			headerSpanning: this._headerSpanning,
-			footerSpanning: this._footerSpanning,
-			onCellClicked: this._onCellClicked
-		});
+
 		if (option.colorTag != null) {
 			this._colorTag = option.colorTag;
 		}
+
+		if (option.groupColors != null && typeof option.groupColors === "object") {
+			this._groupColors = option.groupColors;
+		}
+
+		if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
+			this._predefinedColors = option.predefinedColors;
+		}
 	}
 
+	this._rowPainter = new RowPainter({
+		clickableCell: this._clickableCell,
+		headerSpanning: this._headerSpanning,
+		footerSpanning: this._footerSpanning,
+		onCellClicked: this._onCellClicked
+	});
+
 	if (this._fixedDisplayColumn < 0) {
 		var checkboxColumnIndex = this._findCheckboxColumnIndexFromConfig(options.columns);
 		if (checkboxColumnIndex >= 0) { // has checkbox column
@@ -620,10 +655,15 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._indentSizes) {
 		extOptions.indentSize = this._indentSizes;
 	}
-
 	if(this._colorTag != null) {
 		extOptions.colorTag = this._colorTag;
 	}
+	if(this._groupColors != null) {
+		extOptions.groupColors = this._groupColors;
+	}
+	if(this._predefinedColors != null) {
+		extOptions.predefinedColors = this._predefinedColors;
+	}
 
 	return obj;
 };
@@ -699,6 +739,32 @@ RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
 	return config;
 };
 
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
+	var prefix = ".tr-grid." + RowGroupingPlugin._controlClass + " .tr-lg .cell";
+	var css = [];
+	var value;
+	for (var className in predefinedColors) {
+		css.push(prefix + "." + className + "::before");
+		value = predefinedColors[className]["backgroundColor"];
+		if (value) {
+			css.push(["background-color: " + value + ";"]);
+		}
+	}
+
+	var host = this._hosts[0];
+
+	if (this._styleTag) {
+		if (this._styleTag.parentNode) {
+			this._styleTag.parentNode.removeChild(this._styleTag);
+		}
+		this._styleTag = null;
+	}
+	this._styleTag = injectCss(prettifyCss(css), host.getElement());
+};
+
 /** @private
 * @param {Object} e
 */
@@ -918,6 +984,16 @@ RowGroupingPlugin.prototype.setPredefinedGroups = function (predefinedGroups) {
 	}
 };
 
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._injectStyles(predefinedColors);
+	}
+};
+
 /** Trigger group sorting logic -- re-sort the existing groups. This will not continuously apply to each data update.
 * @public
 */
@@ -1217,6 +1293,8 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			if(needCal) {
 				currentGroup = dataSource.getGroup(rowId); // Slow
 				curGroupLevel = currentGroup.getGroupLevel();
+			} else if(!currentGroup) {
+				currentGroup = dataSource.getGroup(rowId); // Slow
 			}
 
 			if (contentHeaderGroup || nonGroupListener) {
@@ -1275,6 +1353,18 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 
 		arg.indentSize = indentSize;
 
+		if (this._groupColors) {
+			// TODO: Need better method to find the first level parent's group id
+			var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
+			if (curGroupLevel > 1) {
+				for (var i = curGroupLevel; i > 1; i--) {
+					rootGroup = rootGroup.getDataSource();
+				}
+			}
+			var groupId = rootGroup.getGroupId();
+			arg.colorTagClass = this._groupColors[groupId];
+		}
+
 		if (groupView) {
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);

package/lib/tr-grid-row-selection/es6/RowSelection.js

@@ -611,6 +611,9 @@ RowSelectionPlugin.prototype._onClick = function (e) {
 		}
 		this._dispatchSelectionChanged(e);
 	}
+	if(this._activeGrid != null){
+		this._activeGrid.focus();
+	}
 };
 /** @private
 * @description Left click will cause single row selection <br>
@@ -1009,6 +1012,10 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 
 	if (!this._anchorSection) { return; }
 
+	if(this._activeGrid != null){
+		this._activeGrid.focus();
+	}
+
 	var shiftKey = e.shiftKey;
 	var next = 0;
 	var rowLimit = this._anchorSection.getRowCount() - 1;
@@ -1322,6 +1329,9 @@ RowSelectionPlugin.prototype._gotoGrid = function (gridIndex) {
 	var sectionIndex = this._anchorSection.getIndex();
 	this.clearSelectedRows(); // Clear all current grid's selections
 	this.selectSingleRow(anchorRow, sectionIndex, this._hosts[gridIndex]); // go to the next grid at the first column
+	if(this._activeGrid != null){
+		this._activeGrid.focus();
+	}
 };
 
 /** @private

package/lib/tr-grid-textformatting/es6/TextFormatting.d.ts

@@ -65,7 +65,7 @@ declare class TextFormattingPlugin extends GridPlugin {
 
     public getColumnFormatOptions(colIndex: number, options?: any): any;
 
-    public getFormatter(colIndex: number): FieldFormatter;
+    public getFormatter(colIndex: number): FieldFormatter|null;
 
     public formatText(colIndex: number, obj: any): string;
 

package/lib/tr-grid-textformatting/es6/TextFormatting.js

@@ -122,6 +122,18 @@ TextFormattingPlugin.prototype.initialize = function (host, options) {
     this.config(options);
   }
 };
+/** @override
+*/
+
+
+TextFormattingPlugin.prototype._afterInit = function () {
+  // WOWRKAROUND : In test-resource and tr-grid-util, avoid using static variables. duplicating DateTime
+  var rtGrid = this._realTimeGrid;
+
+  if (rtGrid && rtGrid.setDateTimeUtil) {
+    rtGrid.setDateTimeUtil(DateTime);
+  }
+};
 /** @public
 * @param {Object} host core grid instance
 */

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

@@ -0,0 +1,16 @@
+import { injectCss, prettifyCss } from "./Util.js";
+import Dom from "./Dom.js";
+import ElfUtil from "./ElfUtil.js";
+
+declare class DragUI {
+
+    constructor(options: any);
+
+    public static applyThemeColor(grid: any): void;
+
+    public onThemeLoaded(colors: any): void;
+
+}
+
+export default DragUI;
+export {DragUI};

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

@@ -0,0 +1,214 @@
+import { injectCss, prettifyCss } from "./Util.js";
+import Dom from "./Dom.js";
+import ElfUtil from "./ElfUtil.js";
+
+/**
+* @constructor
+* @param {Object} options
+*/
+var DragUI = function(options) {
+	this._dragBox = options.dragBox;
+	this._dragBoxIcon = options.dragBoxIcon;
+
+};
+
+/** @type {string}
+* @private
+*/
+DragUI._styles = ""; // Static variable
+/** @type {Element}
+* @private
+*/
+DragUI.prototype._guideline = null;
+/** @type {Element}
+* @private
+*/
+DragUI.prototype._dragBox = null;
+/** @type {Element}
+* @private
+*/
+DragUI.prototype._dragBoxIcon = null;
+/** Core grid instance
+* @type {Object}
+* @private
+*/
+DragUI.prototype._grid = null;
+
+/** @public
+* @param {Object} grid core grid instance
+*/
+DragUI.applyThemeColor = function(grid) {
+	// This call after onThemeLoaded from extensions initialize
+
+	if(!grid || grid._dragUIStyles) {
+		return;
+	}
+
+	if(DragUI._styles) {
+		grid._dragUIStyles = true; // Prevent loading the same style twice
+		injectCss(DragUI._styles, grid.getElement());
+	} else {
+		// TODO : Handle if can not load DragUI._styles try to set new DragUI._styles
+		// Warning: This process have to use ElfUtil.getThemeColors() that async process for Backward compatability.
+		// When use async process, then it can be load theme multiple times.
+
+	}
+};
+
+/** @public
+* @param {Object} colors
+*/
+DragUI.prototype.onThemeLoaded = function(colors) {
+	if(!DragUI._styles) {
+		var styles = [ // Main Styles without theme
+			".tr-row-guideline", [ // Backward compatability of row dragging
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"text-align: center;",
+				"border-top-width: 3px;",
+				"border-top-style: solid;"
+			],
+			".guideline", [
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"text-align: center;",
+				"border-top-style: solid;",
+				"width: 3px;",
+				"border-top-color: var(--grid-title-icon-color);",
+				"color: var(--grid-title-icon-color);",
+				"background-color: var(--grid-title-icon-color);"
+			],
+			".drag-box", [
+				"position: absolute;",
+				"left: 0;",
+				"top: 0;",
+				"pointer-events: none;",
+				"background-color: var(--grid-dragbox-bgcolor);",
+				"border: solid 1px var(--grid-title-sort-icon-color);",
+				"width: 134px;",
+				"height: 29px;",
+				"line-height: 29px;",
+				"white-space: nowrap;",
+				"overflow-x: clip;",
+				"text-overflow: ellipsis;",
+				"padding: 0 7px 0 7px;",
+				"box-shadow: 0 0 8px var(--grid-dragbox-bordercolor);"
+			],
+			".drag-box-disabled", [
+				"width: 100px;",
+				"left: 0;",
+				"top: 0;",
+				"position: absolute;"
+			],
+			".drag-box-icon", [
+				"top: -4px;",
+				"left: 12px;",
+				"padding: 2px;",
+				"border-radius: 100%;",
+				"font-size: 11px;",
+				"position: absolute;"
+			],
+			".drag-box-icon[icon='void']", [
+				"background-color:var(--grid-void-icon-bgcolor);",
+				"color:var(--grid-void-icon-color);"
+			],
+			".drag-box-icon[icon='add']", [
+				"background-color:var(--grid-insertion-icon-bgcolor);",
+				"color:var(--grid-insertion-icon-color);"
+			],
+			":host", [
+				"--grid-dragbox-bgcolor: #ffffff;", // If the value cannot be found, default to halo-light
+				"--grid-insertion-icon-bgcolor: #39c46e;",
+				"--grid-insertion-icon-color: #1A1A1A;",
+				"--grid-void-icon-bgcolor: #F5475B;",
+				"--grid-void-icon-color: #FFFFFF;"
+			],
+			".mouse-dragging .cell:hover", [ // for change mouse cursor when hover header while dragging
+				"cursor: grabbing !important;"
+			],
+			":host .column .cell.drag-indicator", [
+				"border: var(--grid-drag-indicator);" // defualt is "none"
+			],
+			".tr-dragging, .tr-dragging *", [
+				"-webkit-touch-callout: none;",
+				".user-select(none);"
+			]
+		];
+		var guidelineColor = "#ff9933";
+		var ElfVersion = ElfUtil.getElfVersion();
+		if(colors.primary) {
+			guidelineColor = colors.primary;
+		}
+		guidelineColor += ";";
+
+		styles.push(".tr-row-guideline", [
+			"border-top-color: " + guidelineColor,
+			"color: " + guidelineColor
+		]);
+
+		if(ElfVersion < 3) { // Backward compatability
+			styles.push(".pearl .tr-row-guideline, *[theme=pearl] .tr-row-guideline", [
+				"border-top-color: #ee7600;",
+				"color: #ee7600;",
+				"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));"
+			]);
+		}
+		DragUI._styles = prettifyCss(styles);
+	}
+};
+
+/** @private
+* @param {!Element|Event|MouseEvent} e
+* @param {Object} grid
+* @returns {boolean}=true means dragBox can be drop
+*/
+DragUI.prototype.renderDragBox = function (e, grid) {
+	if(!grid) {
+		return false;
+	}
+
+	var gridElem = grid.getElement();
+	var gridParent = grid.getParent().parentNode;
+	var pn = this._dragBox.parentNode;
+	if(!pn) {
+		gridParent.appendChild(this._dragBox);
+	}
+
+	var iconParent = this._dragBoxIcon.parentNode;
+
+	var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon;
+	this._dragBoxIcon.style.visibility = "visible";
+	var drop = true;
+	if(dragBoxIcon === "insertion") {
+		drop = false;
+		this._dragBoxIcon.icon = "add";
+		if(!iconParent) {
+			this._dragBox.appendChild(this._dragBoxIcon);
+		}
+	} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
+		drop = false;
+		this._dragBoxIcon.icon = "void";
+		if(!iconParent) {
+			this._dragBox.appendChild(this._dragBoxIcon);
+		}
+	} else {
+		Dom.removeParent(this._dragBoxIcon);
+	}
+
+	var gridRect = gridElem.getBoundingClientRect();
+
+	var x = e.clientX - gridRect.left;
+	var y = e.pageY - gridRect.top;
+
+	// space for mouse cursor
+	this._dragBox.style.left = x - 5 + "px";
+	this._dragBox.style.top = y + 8  + "px";
+	return drop;
+};
+
+export default DragUI;
+export {DragUI};

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

@@ -4,6 +4,8 @@ declare namespace ElementObserver {
 
     function addLanguageListener(element: Element): void;
 
+    function addAttributeListener(element: Element, listener: ((...params: any[]) => any), attributeName?: string): void;
+
 }
 
 export default ElementObserver;

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

@@ -13,6 +13,23 @@ var _onLanguageMutated = function (elem, mutation) {
 	}
 };
 
+/** @private
+* @param {Function} listener
+* @param {string=} attributeName
+* @param {MutationRecord} mutation
+*/
+var _onAttributeMutated = function (listener, attributeName, mutation) {
+	if (mutation.type === "attributes") {
+		if (attributeName != null) {
+			if (mutation.attributeName === attributeName) {
+				listener(mutation);
+			}
+		} else {
+			listener(mutation);
+		}
+	}
+};
+
 /** @private
 * @return {string}
 */
@@ -71,7 +88,7 @@ ElementObserver._addListener = function(elem, fn) {
 };
 
 /** @public Add a listener to a html lang attribute
-* @param {Element} element A target element to listen to
+* @param {Element} element An element within the DOM tree to watch for changes
 */
 ElementObserver.addLanguageListener = function(element) {
 	if (!element) { return; }
@@ -81,6 +98,16 @@ ElementObserver.addLanguageListener = function(element) {
 	ElementObserver._addObserver(document.documentElement, _onLanguageMutated.bind(null, element));
 };
 
+/** @public Add a listener to a html attribute
+* @param {Element} element An element within the DOM tree to watch for changes
+* @param {Function} listener A function which will be called on each attribute change
+* @param {string=} attributeName If not specified, listener will be called on every attribute change
+*/
+ElementObserver.addAttributeListener = function(element, listener, attributeName) {
+	if (!element || !listener) { return; }
+	ElementObserver._addObserver(element, _onAttributeMutated.bind(null, listener, attributeName));
+};
+
 /**
 * @type {MutationObserver}
 * @private

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

@@ -78,7 +78,7 @@ ElfUtil._icons = {
 			"sortable": "sort-up-down"
 		},
 		"columnStack": {
-			"stack": "list",
+			"stack": "map-layers",
 			"expand": "right",
 			"collapse": "left"
 		}

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