@refinitiv-ui/efx-grid 6.0.58 → 6.0.60

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

@@ -62,6 +62,10 @@ CellPainter.prototype._conditions = null;
 /** @type {Object}
 * @private
 */
+CellPainter.prototype._effectiveStyles = null;
+/** @type {Object}
+* @private
+*/
 CellPainter.prototype._blinkCondition = null;
 /** @type {!Array}
 * @private
@@ -185,6 +189,7 @@ CellPainter.prototype.reset = function() {
 CellPainter.prototype.resetColoring = function() {
 	// reset coloring type to allow other extensions to be able to set their new mode
 	this._setColoringType(0);
+	this._effectiveStyles = null;
 	this._conditions.length = 0;
 };
 
@@ -284,6 +289,18 @@ CellPainter.prototype._setColoringType = function(enumType) {
 	}
 };
 /** @public
+* @param {Object} mapping Effective styles mapping
+*/
+CellPainter.prototype.setEffectiveStyles = function(mapping) {
+	this._effectiveStyles = mapping;
+};
+/** @public
+* @return {Object}
+*/
+CellPainter.prototype.getEffectiveStyles = function() {
+	return this._effectiveStyles;
+};
+/** @public
 * @param {Array.<CellPainter~Condition>} conditions
 */
 CellPainter.prototype.setConditions = function(conditions) {
@@ -901,9 +918,17 @@ CellPainter.clearCellStyle = function(cell, styles) {
 		elem.classList.remove(elem._coloringCssClass);
 	}
 
-	styles = styles || CellPainter.supportedStyles;
-	for(var i = styles.length; --i >= 0;) {
-		elem.style[styles[i]] = "";  // WARNING: Very slow
+	if(!styles){
+		styles = CellPainter.supportedStyles;
+	}
+	if(Array.isArray(styles)){
+		for(var i = styles.length; --i >= 0;) {
+			elem.style[styles[i]] = "";  // WARNING: Very slow
+		}
+	} else {
+		for(var key in styles) {
+			elem.style[key] = "";  // WARNING: Very slow
+		}
 	}
 };
 /** @private
@@ -1025,26 +1050,29 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 	}
 
 	var styles = this._getStyles(rowData, min, max);
+
+	var elStyle = elem.style;
+
 	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
+		elem.classList.remove(elem._coloringCssClass);
+		elem._coloringCssClass = null;
+	}
 	if (cssClass != null) { // Predefined colors mode
-		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
-			elem.classList.remove(elem._coloringCssClass);
-			elem._coloringCssClass = null;
-		}
 		if (cssClass) {
 			elem.classList.add(cssClass);
 			elem._coloringCssClass = cssClass;
 		}
 	} else {
-		if (elem._coloringCssClass) {
-			elem.classList.remove(elem._coloringCssClass);
-			elem._coloringCssClass = null;
+		if(styles["backgroundColor"]){
+			elStyle.backgroundColor = styles["backgroundColor"];
+		} else if(!this._effectiveStyles || this._effectiveStyles["backgroundColor"]){
+			elStyle.backgroundColor = "";
 		}
-		var ss = CellPainter.bgStyles;
-		var elStyle = elem.style;
-		for (var n = ss.length; --n >= 0;) {
-			var styleName = ss[n];
-			elStyle[styleName] = styles[styleName] || "";
+		if(styles["color"]){
+			elStyle.color = styles["color"];
+		} else if(!this._effectiveStyles || this._effectiveStyles["color"]){
+			elStyle.color = "";
 		}
 	}
 };

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

@@ -38,7 +38,8 @@ ElementObserver._getNewId = function () {
 	return id;
 };
 
-/** @private Observe any element
+/** Observe any element
+* @private
 * @param {Element} elem
 * @param {Function} listener
 * @param {Object=} opt_option
@@ -101,7 +102,8 @@ ElementObserver.addLanguageListener = function(element) {
 	ElementObserver._addObserver(document.documentElement, _onLanguageMutated.bind(null, element));
 };
 
-/** @public Add a listener to a html attribute
+/** Add a listener to a html attribute
+* @public
 * @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

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

@@ -63,7 +63,8 @@ ElementWrapper.prototype.getMousePosition = function(e, retObj) {
 */
 ElementWrapper.prototype.addEventListener = function(type, listener) {
 	ElementWrapper.base(this, "addEventListener", type, listener);
-	if(this._elem["on" + type] != null) { // TODO: This won't work with Custom Element
+	// TODO: This won't work with Custom Element
+	if(this._elem["on" + type] !== undefined) { // eslint-disable-line
 		this._elem.addEventListener(type, listener, false);
 	}
 };
@@ -74,7 +75,7 @@ ElementWrapper.prototype.addEventListener = function(type, listener) {
 */
 ElementWrapper.prototype.removeEventListener = function(type, listener) {
 	ElementWrapper.base(this, "removeEventListener", type, listener);
-	if(this._elem["on" + type] != null) {
+	if(this._elem["on" + type] !== undefined) { // eslint-disable-line
 		this._elem.removeEventListener(type, listener, false);
 	}
 };

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

@@ -259,6 +259,11 @@ GridPlugin.prototype.getColumnIndex = function (colRef) {
 * @return {Array.<number>} column indices
 */
 GridPlugin.prototype.getColumnIndices = function (colRefs) {
+	var api = this.getGridApi();
+	if(api.getColumnIndices) {
+		return api.getColumnIndices(colRefs);
+	}
+
 	// TODO: Unify the below logics
 	if(this._compositeGrid) {
 		var allFields = this._compositeGrid.getColumnFields();

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

@@ -30,9 +30,9 @@ declare class SubTable extends ElementWrapper {
 
     public getAllCells(): (Element)[];
 
-    public getAllRows(): HTMLCollection|null;
+    public getAllRows(): (Element)[];
 
-    public getRows(): HTMLCollection|null;
+    public getRows(): (Element)[];
 
     public getRow(r: number): Element|null;
 
@@ -70,5 +70,7 @@ declare class SubTable extends ElementWrapper {
 
 declare function tdElem(e: Event|null): number;
 
+declare function trElem(colIndex: number, rowIndex?: number|null): number;
+
 export default SubTable;
 export { SubTable };

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

@@ -2,6 +2,18 @@ import { Dom } from "./Dom.js";
 import { Ext } from "./Ext.js";
 import { ElementWrapper } from "./ElementWrapper.js";
 
+/** @private
+* @function
+* @param {Element} parentElem tr element
+* @param {number} count Number of elements to be added
+* @param {string} childTag Tag name of the cells
+*/
+var _addElements = function(parentElem, count, childTag) {
+	for(var i = count; --i >= 0;) {
+		parentElem.appendChild(document.createElement(childTag));
+	}
+};
+
 /** SubTable represents a single tbody, thead, or tfoot element within table element
 * @constructor
 * @extends {ElementWrapper}
@@ -39,6 +51,12 @@ SubTable.prototype._defaultRowHeight = null;
 SubTable.prototype._render;
 
 
+/** @private
+* @return {string} tagName
+*/
+SubTable.prototype._getCellTagName = function() {
+	return this._elem.tagName === "THEAD" ? "TH" : "TD";
+};
 /** @public
 * @ignore
 * @param {number=} opt_count
@@ -49,12 +67,10 @@ SubTable.prototype.addColumns = function(opt_count) {
 
 	this._colCount += opt_count;
 
-	var rows = this.getRows(); // TODO: Must include all suspended rows
+	var cellTag = this._getCellTagName();
+	var rows = this._elem.children; // TODO: Must include all suspended rows
 	for(var r = rows.length; --r >= 0;) {
-		var tr = rows[r];
-		for(var c = 0; c < opt_count; ++c) {
-			tr.insertCell(-1);
-		}
+		_addElements(rows[r], opt_count, cellTag);
 	}
 };
 /** @public
@@ -68,7 +84,7 @@ SubTable.prototype.removeColumns = function(opt_count) {
 	if(opt_count <= 0) { return; }
 
 	this._colCount -= opt_count;
-	var rows = this.getRows(); // TODO: Must include all suspended rows
+	var rows = this._elem.children; // TODO: Must include all suspended rows
 	for(var r = rows.length; --r >= 0;) {
 		Dom.removeChildren(rows[r], opt_count);
 	}
@@ -100,9 +116,7 @@ SubTable.prototype.setColumnCount = function(val) {
 */
 SubTable.prototype.insertRow = function(at) {
 	var row = this._elem.insertRow(at);
-	for(var i = this._colCount; --i >= 0;) {
-		row.insertCell();
-	}
+	_addElements(row, this._colCount, this._getCellTagName());
 	return row;
 };
 
@@ -158,7 +172,7 @@ SubTable.prototype.setDefaultRowHeight = function(val) {
 	this._defaultRowHeight = val;
 	var minHeight = (this._defaultRowHeight != null) ? this._defaultRowHeight + "px" : "";
 
-	this._applyDefaultRowHeight(this.getRows(), minHeight);
+	this._applyDefaultRowHeight(this._elem.children, minHeight);
 };
 
 /** @public
@@ -194,7 +208,7 @@ SubTable.prototype.getCellsInColumn = function(c) {
 	if(c < 0 || c >= this._colCount) {
 		return null;
 	}
-	var rows = this.getRows();
+	var rows = this._elem.children;
 	var rowCount = rows.length;
 	var ary = new Array(rowCount);
 	for(var r = 0; r < rowCount; ++r) {
@@ -209,13 +223,22 @@ SubTable.prototype.getCellsInColumn = function(c) {
 */
 SubTable.prototype.getCellsInRow = function(r) {
 	var tr = this.getRow(r);
-	return (tr) ? tr.cells : null;
+	if(tr) {
+		var cells = tr.cells;
+		var len = cells.length;
+		var ary = new Array(len);
+		for(var i = 0; i < len; ++i) {
+			ary[i] = cells[i];
+		}
+		return ary;
+	}
+	return null;
 };
 /** @public
 * @return {!Array.<Element>} Array of td (HTMLTableCellElement) elements
 */
 SubTable.prototype.getAllCells = function() {
-	var rows = this.getRows();
+	var rows = this._elem.children;
 	var rowCount = rows.length;
 	var colCount = this._colCount;
 	var cellCount = 0;
@@ -229,14 +252,20 @@ SubTable.prototype.getAllCells = function() {
 	return ary;
 };
 /** @public
-* @return {HTMLCollection} Array like collection of tr (HTMLTableRowElement) elements
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
 */
 SubTable.prototype.getAllRows = function() {
-	return this._elem.children;
+	var chdr = this._elem.children;
+	var len = chdr ? chdr.length : 0;
+	var ary = new Array(len);
+	for(var i = 0; i < len; ++i) {
+		ary[i] = chdr[i];
+	}
+	return ary;
 };
 /** @public
 * @function
-* @return {HTMLCollection} Array like collection of tr (HTMLTableRowElement) elements
+* @return {!Array.<Element>} Array of tr (HTMLTableRowElement) elements
 */
 SubTable.prototype.getRows = SubTable.prototype.getAllRows;
 /** @public
@@ -251,7 +280,7 @@ SubTable.prototype.getRow = function(r) {
 * @return {!Array.<Array.<string>>}
 */
 SubTable.prototype.getTextContents = function() {
-	var rows = this.getRows();
+	var rows = this._elem.children;
 	var rowCount = rows.length;
 	var rowContents = new Array(rowCount);
 	for(var r = 0; r < rowCount; ++r) {
@@ -281,7 +310,7 @@ SubTable.prototype.getCellTextContent = function(c, r) {
 * @return {string}
 */
 SubTable.prototype.getColumnTextContent = function(c) { // New-line delimited
-	var rows = this.getRows();
+	var rows = this._elem.children;
 	var rowCount = rows.length;
 	if(c >= 0 && c < this._colCount && rowCount > 0) {
 		var str = rows[0].cells[c].textContent;
@@ -311,7 +340,7 @@ SubTable.prototype.getRowTextContent = function(r) { // Tab delimited
 * @return {string}
 */
 SubTable.prototype.getTableTextContent = function() { // Tab delimited
-	var rowCount = this.getRows().length;
+	var rowCount = this._elem.children.length;
 	if(rowCount > 0) {
 		var str = this.getRowTextContent(0);
 		for(var r = 1; r < rowCount; ++r) {
@@ -326,9 +355,10 @@ SubTable.prototype.getTableTextContent = function() { // Tab delimited
 */
 SubTable.prototype.toString = function() {
 	var str = this.getElement().outerHTML;
+	str = str.replace(/>\s+</g, "><");
 	str = str.replace(/><tr/g, ">\n\t<tr");
 	str = str.replace(/><td/g, ">\n\t\t<td");
-	str = str.replace(/><td/g, ">\n\t\t<th"); // TH can occur in thead
+	str = str.replace(/><th/g, ">\n\t\t<th"); // TH can occur in thead
 	str = str.replace(/><\/tr/g, ">\n\t</tr");
 	var tagName = this.getElement().tagName.toLowerCase();
 	str = str.replace("</" + tagName, "\n</" + tagName);
@@ -340,39 +370,40 @@ SubTable.prototype.toString = function() {
 * @return {number}
 */
 SubTable.prototype.getColumnIndex = function(e) {
-	if(e) {
-		var len, i;
-		var tgt = /** @type{Node} */(e.target);
-		if(this._elem.contains(tgt)) {
-			var tdElem = Dom.closestTagName(tgt, "TD");
-			if(!tdElem) {
-				tdElem = Dom.closestTagName(tgt, "TH");
+	if(!e) {
+		return -1;
+	}
+	var len, i;
+	var tgt = /** @type{Node} */(e.target); // TODO: Support Shadow Root
+	if(this._elem.contains(tgt)) {
+		var tdElem = Dom.closestTagName(tgt, "TD");
+		if(!tdElem) {
+			tdElem = Dom.closestTagName(tgt, "TH");
+		}
+		if(tdElem) {
+			var chdr = tdElem.parentElement.children;
+			len = chdr.length;
+			for(i = 0; i < len; ++i) {
+				if(tdElem === chdr[i]) {
+					return i;
+				}
 			}
-			if(tdElem) {
-				var chdr = tdElem.parentElement.children;
-				len = chdr.length;
+		}
+	} else { // In case of the target is not a child of this element
+		var rows = this._elem.children;
+		var cells = (rows[0]) ? rows[0].cells : null;
+		if(cells) {
+			var pos = Dom.getRelativePosition(e, this._elem);
+			var x = pos["x"];
+			if(x >= 0) {
+				len = cells.length;
 				for(i = 0; i < len; ++i) {
-					if(tdElem === chdr[i]) {
+					x -= cells[i].offsetWidth;
+					if(x < 0) { // Not include the right border
 						return i;
 					}
 				}
 			}
-		} else { // In case of the target is not a child of this element
-			var rows = this.getRows();
-			var cells = (rows[0]) ? rows[0].cells : null;
-			if(cells) {
-				var pos = Dom.getRelativePosition(e, this._elem);
-				var x = pos["x"];
-				if(x >= 0) {
-					len = cells.length;
-					for(i = 0; i < len; ++i) {
-						x -= cells[i].offsetWidth;
-						if(x < 0) { // Not include the right border
-							return i;
-						}
-					}
-				}
-			}
 		}
 	}
 	return -1;
@@ -382,27 +413,36 @@ SubTable.prototype.getColumnIndex = function(e) {
 * @return {number}
 */
 SubTable.prototype.getRowIndex = function(e) {
-	var rows = this.getRows();
-	if(rows && e) {
-		var jLen = rows.length;
-		var tgtElem = e.target; // TODO: Support Shadow Root
-		for(var j = 0; j < jLen; ++j) {
-			var row = rows[j];
-			if(row === tgtElem) {
-				return j;
+	if(!e) {
+		return -1;
+	}
+	var rows = this._elem.children; // This return HTML collection
+	var rowCount = rows ? rows.length : 0;
+	if(!rowCount) {
+		return -1;
+	}
+	var i;
+	var tgt = /** @type{Node} */(e.target); // TODO: Support Shadow Root
+	if(this._elem.contains(tgt)) {
+		var trElem = Dom.closestTagName(tgt, "TR");
+		if(trElem) {
+			for(i = 0; i < rowCount; ++i) {
+				var row = rows[i];
+				if(row === trElem) {
+					return i;
+				}
 			}
 		}
+	}
 
-		// In case of the target is not a child of this element
-		var pos = Dom.getRelativePosition(e, this._elem);
-		var y = pos["y"];
-		if(y >= 0) {
-			var len = rows.length;
-			for(var i = 0; i < len; ++i) {
-				y -= rows[i].offsetHeight;
-				if(y < 0) { // Not include the right border
-					return i;
-				}
+	// In case of the target is not a child of this element
+	var pos = Dom.getRelativePosition(e, this._elem);
+	var y = pos["y"];
+	if(y >= 0) {
+		for(i = 0; i < rowCount; ++i) {
+			y -= rows[i].offsetHeight;
+			if(y < 0) { // Not include the right border
+				return i;
 			}
 		}
 	}
@@ -458,31 +498,69 @@ SubTable.prototype.setCellRenderer = function(func) {
 * @param {string=} opt_elementType
 */
 SubTable.prototype.cloak = function(elem, opt_elementType) {
-	SubTable["base"](this, "cloak", elem, "tr");
-	var rows = elem.getElementsByTagName("TR");
-	this._colCount = rows[0] ? rows[0].children.length : 0;
+	if(elem) {
+		this._elem = elem;
+		var rows = elem.getElementsByTagName("TR");
+		this._colCount = rows[0] ? rows[0].children.length : 0;
+	}
 };
 
 /** @public
-* @param {number} c1
-* @param {number} c2
-* @param {number} r1
-* @param {number} r2
+* @param {number} c1 Starting column index
+* @param {number} c2 Destination column index
+* @param {number} r1 Starting row index
+* @param {number} r2 Destination row index
 * @return {Element} Top left cell element
 */
 SubTable.prototype.spanBlock = function (c1, c2, r1, r2) { // WARNING: It's c c r r
-	var cell = null;
-	for(var c = c2; c >= c1; --c) {
-		for(var r = r2; r >= r1; --r) {
+	var cell = this.getCell(c1, r1);
+	if(!cell) {
+		return null;
+	}
+	if(c2 < c1) {
+		c2 = c1;
+	}
+	if(r2 < r1) {
+		r2 = r1;
+	}
+	var curColSpan = +cell.getAttribute("colspan");
+	var curRowSpan = +cell.getAttribute("rowspan");
+	var c3 = (curColSpan) ? c1 + curColSpan - 1 : c1;
+	var r3 = (curRowSpan) ? r1 + curRowSpan - 1 : r1;
+
+	// TODO: Optimize below logics
+	var c, r;
+	for(c = c3; c >= c1; --c) {
+		for(r = r3; r >= r1; --r) {
+			cell = this.getCell(c, r);
+			if(cell) {
+				cell.style.display = "";
+			}
+		}
+	}
+
+	for(c = c2; c >= c1; --c) {
+		for(r = r2; r >= r1; --r) {
 			cell = this.getCell(c, r);
 			if(cell) {
 				cell.style.display = "none";
 			}
 		}
 	}
-	if(cell) {
-		cell.setAttribute("colspan", (c2 - c1 + 1));
-		cell.setAttribute("rowspan", (r2 - r1 + 1));
+
+	if(cell) { // The last cell from the loop is the top left cell
+		var colSpan = (c2 - c1 + 1);
+		var rowSpan = (r2 - r1 + 1);
+		if(colSpan > 1) {
+			cell.setAttribute("colspan", colSpan);
+		} else {
+			cell.removeAttribute("colspan");
+		}
+		if(colSpan > 1) {
+			cell.setAttribute("rowspan", rowSpan);
+		} else {
+			cell.removeAttribute("rowspan");
+		}
 		cell.style.display = "";
 	}
 	return cell;
@@ -526,7 +604,7 @@ SubTable.parseTableContent = function(tbl) {
 };
 
 /** @private
-* @param {!NodeList<!Element>|Array.<Element>} rows
+* @param {!(NodeList<!Element>|Array.<Element>)} rows
 * @param {string} minHeight
 */
 SubTable.prototype._applyDefaultRowHeight = function(rows, minHeight) {

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

@@ -3,17 +3,32 @@ import { Ext } from "./Ext.js";
 import { ElementWrapper } from "./ElementWrapper.js";
 import { SubTable } from "./SubTable.js";
 
+declare namespace Table {
+
+    type Options = {
+        colCount?: number|null,
+        rowCount?: number|null,
+        cellWidth?: number|null,
+        cellHeight?: number|null,
+        width?: number|null,
+        height?: number|null,
+        header?: number|null,
+        footer?: number|null
+    };
+
+}
+
 declare class Table extends ElementWrapper {
 
-    constructor(elem?: (Element|number)|null, opt_colCount?: (number|any)|null, opt_rowCount?: number|null);
+    constructor(elem?: Element|null, options?: Table.Options|null);
 
     public getTableElement(): Element|null;
 
     public setCRWH(col: number, row: number, width: number, height: number): void;
 
-    public init(options: any): void;
+    public init(options: Table.Options|null): void;
 
-    public addColumns(opt_count?: number|null): (Element)[]|null;
+    public addColumns(count?: number|null): (Element)[]|null;
 
     public removeColumns(opt_count?: number|null): void;
 
@@ -21,9 +36,9 @@ declare class Table extends ElementWrapper {
 
     public setColumnCount(val: number): void;
 
-    public addRows(opt_count?: number|null): (Element)[];
+    public addRows(count?: number|null): (Element)[];
 
-    public removeRows(opt_count?: number|null): void;
+    public removeRows(count?: number|null): void;
 
     public removeAllRows(): void;
 
@@ -43,21 +58,23 @@ declare class Table extends ElementWrapper {
 
     public getAllRows(): (Element)[];
 
+    public getRows(): (Element)[];
+
     public getRow(r: number): Element|null;
 
     public spanBlock(c1: number, c2: number, r1: number, r2: number): Element|null;
 
     public spanHorizontally(r: number, bool: boolean): Element|null;
 
-    public setColMinWidths(val: number|string|(string|number)[]|null, opt_at?: number|null): void;
+    public setColMinWidths(val: number|string|(string|number)[]|null, colIndex?: number|null): void;
 
-    public setColumnWidths(val: number|string|(string|number)[]|null, opt_at?: number|null): void;
+    public setColumnWidths(val: number|string|(string|number)[]|null, colIndex?: number|null): void;
 
-    public setColBackgroundColors(val: string|(string)[]|null, opt_at?: number|null): void;
+    public setColBackgroundColors(val: string|(string)[]|null, colIndex?: number|null): void;
 
-    public setColBGColors(val: string|(string)[]|null, opt_at?: number|null): void;
+    public setColBGColors(val: string|(string)[]|null, colIndex?: number|null): void;
 
-    public setColBorders(val: number|string|(number|string)[]|null, opt_at?: number|null): void;
+    public setColBorders(val: number|string|(number|string)[]|null, colIndex?: number|null): void;
 
     public setSize(width: number, height: number): void;