@refinitiv-ui/efx-grid 6.0.5 → 6.0.6

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

@@ -15,6 +15,7 @@ import { Dom } from './Dom.js';
 * @property {Element=} contentElement=null Content element that will be moved out of document and added as a child of popup element
 * @property {Popup=} popupChild=null Popup instance that will be hidden when its parent is hidden
 * @property {boolean=} uiBlocking=false To attach overlay to block user from interact with ui behind popup
+* @property {boolean=} hideOnScroll=true If disabled, popup will not be hidden when scrolling
 */
 
 /** @typedef {string} Popup~Positioning
@@ -216,6 +217,10 @@ Popup.prototype._gap = 0;
 * @private
 */
 Popup.prototype._uiBlocking = false;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._hideOnScroll = true;
 
 /** @public */
 Popup.prototype.dispose = function () {
@@ -294,6 +299,10 @@ Popup.prototype.init = function (options) {
 		this.addPopupChild(options["popupChild"]);
 	}
 
+	if (options["hideOnScroll"] == false) {
+		this._hideOnScroll = false;
+	}
+
 	this.addListener(options, "show");
 	this.addListener(options, "hide");
 	this.addListener(options, "shown");
@@ -570,6 +579,15 @@ Popup.prototype.disableAutoClipping = function (opt_disabled) {
 		this._autoClipping = autoClipping;
 	}
 };
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Popup.prototype.disableHideOnScroll = function (opt_disabled) {
+	var hideOnScroll = (opt_disabled === false);
+	if (this._hideOnScroll !== hideOnScroll) {
+		this._hideOnScroll = hideOnScroll;
+	}
+};
 
 
 /** @public
@@ -746,7 +764,7 @@ Popup.prototype._onResize = function () {
 */
 Popup.prototype._onScroll = function (e) {
 	// only hide if target is not child of popup and e.target not the popup itself.
-	if (!this.contains(e.target)) {
+	if (!this.contains(e.target) && this._hideOnScroll) {
 		this.hide();
 	}
 };

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

@@ -5,23 +5,23 @@ import {ElfUtil} from './ElfUtil.js';
 
 declare class RangeBar {
 
-    constructor(elem?: Element, options?: any);
+    constructor(elem?: Element|null, options?: any);
 
     public static readonly defaults: any;
 
-    public setValue(lowVal?: number, lastVal?: number, highVal?: number): void;
+    public setValue(lowVal?: number|null, lastVal?: number|null, highVal?: number|null): void;
 
-    public hide(bool?: boolean): void;
+    public hide(bool?: boolean|null): void;
 
     public isHidden(): boolean;
 
-    public enableTooltip(enabled?: boolean): void;
+    public enableTooltip(enabled?: boolean|null): void;
 
     public setStyles(obj?: any): void;
 
     public getPercent(): number;
 
-    public setPercent(percent?: number): void;
+    public setPercent(percent?: number|null): void;
 
     public isPercentNaN(): boolean;
 

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

@@ -2,17 +2,17 @@
 
 declare class RequestQueue {
 
-    constructor(reqBuilder: ((...params: any[]) => any), reqLimit?: number, timeLimit?: number);
+    constructor(reqBuilder: ((...params: any[]) => any)|null, reqLimit?: number|null, timeLimit?: number|null);
 
     public reset(): void;
 
     public dispose(): void;
 
-    public setConcurrentLimit(concurrentLimit?: number): void;
+    public setConcurrentLimit(concurrentLimit?: number|null): void;
 
-    public setFrequencyLimit(reqLimit?: number, timeLimit?: number): void;
+    public setFrequencyLimit(reqLimit?: number|null, timeLimit?: number|null): void;
 
-    public setRequestBuilder(reqBuilder: ((...params: any[]) => any)): void;
+    public setRequestBuilder(reqBuilder: ((...params: any[]) => any)|null): void;
 
     public add(obj: any): void;
 

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

@@ -2,19 +2,52 @@ import { injectCss, prettifyCss } from "./Util.js";
 import { ExpanderIcon } from "./ExpanderIcon.js";
 import { Icon } from "./Icon.js";
 
+declare namespace RowPainter {
+
+    type Options = {
+        clickableCell: boolean,
+        headerSpanning?: boolean|null,
+        footerSpanning?: boolean|null,
+        onCellClicked?: ((...params: any[]) => any)|null,
+        headerMenuClicked?: ((...params: any[]) => any)|null,
+        segmentMode?: boolean|null
+    };
+
+    type RenderingOptions = {
+        colIndex: number,
+        rowIndex: number,
+        cell: any,
+        section: any,
+        footerRow?: boolean|null,
+        checkboxColumnIndex: number,
+        collapsed?: boolean|null,
+        hiddenArrow?: boolean|null,
+        groupId?: string|null,
+        groupLevel?: number|null,
+        nonGroupRow?: boolean|null,
+        colorTagClass?: string|null,
+        indentSize?: number|null
+    };
+
+}
+
 declare class RowPainter {
 
-    constructor(options: any);
+    constructor(options?: RowPainter.Options|null);
 
     public static applyGroupingStyles(grid: any): void;
 
-    public static disableColorTag(grid: any, disabled?: boolean): void;
+    public static disableColorTag(grid: any, disabled?: boolean|null): void;
 
-    public static enableHeaderMenu(grid: any, enabled?: boolean): void;
+    public static enableHeaderMenu(grid: any, enabled?: boolean|null): void;
+
+    public config(options?: RowPainter.Options|null): void;
 
     public removeHeaderStyle(section: any, columnIndex: number, rowIndex: number): void;
 
-    public applyHeaderStyle(e: any): void;
+    public removeAllStyles(section: any, columnIndex: number, rowIndex: number): void;
+
+    public applyHeaderStyle(e: RowPainter.RenderingOptions|null): void;
 
     public applyContentAsHeaderStyle(e: any, collapsed: boolean): void;
 

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

@@ -2,56 +2,102 @@ import { injectCss, prettifyCss } from "./Util.js";
 import { ExpanderIcon } from "./ExpanderIcon.js";
 import { Icon } from "./Icon.js";
 
+/** @typedef {Object} RowPainter~Options
+* @property {boolean} clickableCell
+* @property {boolean=} headerSpanning
+* @property {boolean=} footerSpanning
+* @property {Function=} onCellClicked
+* @property {Function=} headerMenuClicked
+* @property {boolean=} segmentMode
+*/
+
+/** @typedef {Object} RowPainter~RenderingOptions
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {*} cell Cell instance
+* @property {*} section Section instance
+* @property {boolean=} footerRow
+* @property {number} checkboxColumnIndex Exception index for clearing content
+* @property {boolean=} collapsed
+* @property {boolean=} hiddenArrow
+* @property {string=} groupId Text for default content
+* @property {number=} groupLevel
+* @property {boolean=} nonGroupRow
+* @property {string=} colorTagClass CSS class for custom coloring
+* @property {number=} indentSize
+*/
+
 /**
 * @constructor
-* @param {Object} options
+* @param {RowPainter~Options=} options
 */
 var RowPainter = function(options) {
-	this._clickableCell = options.clickableCell;
-	this._headerSpanning = options.headerSpanning;
-	this._footerSpanning = options.footerSpanning;
-	this._onCellClicked = options.onCellClicked;
-	this._headerMenuClicked = options.headerMenuClicked;
 	this._menuIconClicked = this._menuIconClicked.bind(this);
-	this._segmentMode = options.segmentMode;
+
+	this.config(options);
 };
 
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._clickableCell = false;
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._headerSpanning = false;
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._footerSpanning = false;
+/** @type {boolean}
+* @private
+*/
+RowPainter.prototype._segmentMode = false;
+
+/** @type {Function}
+* @private
+*/
+RowPainter.prototype._onCellClicked = null;
+/** @type {Function}
+* @private
+*/
+RowPainter.prototype._headerMenuClicked = null;
+
+
 /** @type {string}
 * @private
 */
 RowPainter._styles = prettifyCss([
-	".cell.folder", [
-		"text-align: left;"
-	],
-	".cell.folder:not(.closed), .cell.folder.main-group", [
+	".cell.folder.tr-stretched.main-group, .cell.folder.tr-stretched:not(.closed)", [
 		"font-weight: 600;"
 	],
 	".color-tag::before", [
 		"content: '';",
 		"display: block;",
 		"position: absolute;",
+		"left: -1px;",
+		"top: -1px;",
 		"width: 2px;",
-		"height: 100%;",
-		"left: 0;",
+		"height: calc(100% + 2px);",
 		"background-color: var(--grid-expanded-tag-bg-color);"
 	],
 	".color-tag.main-group::before", [
 		"top: 2px;",
 		"width: 4px;",
-		"height: calc(100% - 2px);"
+		"height: calc(100% - 1px);"
 	],
 	".color-tag.main-group.closed::before", [
 		"top: 2px;",
 		"width: 4px;",
-		"height: calc(100% - 5px);",
+		"height: calc(100% - 3px);",
 		"background-color: var(--grid-tag-bg-color);"
 	],
+	".color-tag.main-group.closed:hover::before", [
+		"background-color: var(--grid-expanded-tag-bg-color);"
+	],
 	".color-tag-disabled .color-tag::before", [
 		"content: unset;"
 	],
-	".cell.highlighted-row.color-tag::before", [
-		"background-color: var(--grid-expanded-tag-bg-color);"
-	],
 	".tr-grid .cell .floating-panel .menu-icon", [
 		"display: none;"
 	],
@@ -64,6 +110,10 @@ RowPainter._styles = prettifyCss([
 	".folder .menu-icon:hover", [
 		"color: var(--grid-row-menu-icon-hover-color);"
 	],
+	".tr-lg .cell.group-member", [
+		// "background-color: var(TODO);",
+		"border-top-style: dashed;"
+	],
 	":host", [
 		"--grid-tag-bg-color: #333333;",
 		"--grid-expanded-tag-bg-color: #4D4D4D;",
@@ -125,20 +175,30 @@ RowPainter.enableHeaderMenu = function(grid, enabled) {
 	}
 };
 
-/** @private
-* @param {Object} section ILayoutGrid
-* @param {number} fromColumnIndex
-* @param {number} toColumnIndex
-* @param {number} rowIndex
-* @param {number} checkboxColumnIndex
+/** @public
+* @param {RowPainter~Options=} options
 */
-RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toColumnIndex, rowIndex, checkboxColumnIndex) {
-	if(!this._segmentMode) {
-		for (var c = fromColumnIndex; c <= toColumnIndex; ++c) {
-			if (section.isColumnVisible(c) && c !== checkboxColumnIndex) {
-				section.getCell(c, rowIndex, false).setContent("");
-			}
-		}
+RowPainter.prototype.config = function(options) {
+	if(!options) {
+		return;
+	}
+	if(options.clickableCell != null) {
+		this._clickableCell = options.clickableCell ? true : false;
+	}
+	if(options.headerSpanning != null) {
+		this._headerSpanning = options.headerSpanning ? true : false;
+	}
+	if(options.footerSpanning != null) {
+		this._footerSpanning = options.footerSpanning ? true : false;
+	}
+	if(options.segmentMode != null) {
+		this._segmentMode = options.segmentMode ? true : false;
+	}
+	if(options.onCellClicked != null) { // TODO: Accept null value for clearing listener at runtime
+		this._onCellClicked = options.onCellClicked;
+	}
+	if(options.headerMenuClicked != null) {
+		this._headerMenuClicked = options.headerMenuClicked;
 	}
 };
 
@@ -148,39 +208,68 @@ RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toCo
 * @param {number} rowIndex
 */
 RowPainter.prototype.removeHeaderStyle = function(section, columnIndex, rowIndex) {
+	section.enableRowClass(rowIndex, "group-member", false); // TODO: Slow
 	section.enableRowClass(rowIndex, "header", false); // TODO: Slow
-	section.enableRowClass(rowIndex, "folder", false); // TODO: Slow
+
 	var cell = section.unstretchCell(columnIndex, rowIndex);
-	this._removeHeaderStyle(cell);
+	RowPainter._removeHeaderStyle(cell);
 	cell = section.getCell(columnIndex, rowIndex, false);
-	this._removeHeaderStyle(cell);
+	RowPainter._removeHeaderStyle(cell);
 };
 
+/** @public
+* @param {Object} section ILayoutGrid
+* @param {number} columnIndex
+* @param {number} rowIndex
+*/
+RowPainter.prototype.removeAllStyles = function(section, columnIndex, rowIndex) {
+	section.enableRowClass(rowIndex, "group-member", false); // TODO: Slow
+	section.enableRowClass(rowIndex, "header", false); // TODO: Slow
+
+	var cell = section.unstretchCell(columnIndex, rowIndex);
+	if(!RowPainter._removeHeaderStyle(cell)) {
+		RowPainter._removeContentStyle(cell);
+	}
+	cell = section.getCell(columnIndex, rowIndex, false);
+	if(!RowPainter._removeHeaderStyle(cell)) {
+		RowPainter._removeContentStyle(cell);
+	}
+};
 /** @private
 * @param {Object} cell Cell container
+* @return {boolean} Returns true if group header styles are removed
 */
-RowPainter.prototype._removeHeaderStyle = function(cell) {
-	if(!cell) {
-		return;
-	}
-
-	RowPainter._applyColorTagClass(cell, "");
+RowPainter._removeHeaderStyle = function(cell) {
+	if(cell) {
+		RowPainter._applyColorTagClass(cell, "");
 
-	if(cell._groupHeaderStyle) {
-		cell._groupHeaderStyle = false;
-		cell.removeClass("folder");
-		cell.removeClass("closed");
-		cell.removeClass("content-header");
+		if(cell._groupHeaderStyle) {
+			cell._groupHeaderStyle = false;
+			cell.removeClass("header");
+			cell.removeClass("folder");
+			cell.removeClass("closed");
+			cell.removeClass("content-header");
+			cell.removeClass("main-group");
+			RowPainter._removeContentStyle(cell);
+			cell.removeIcon();
+			cell.unlisten("click", this._onCellClicked);
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @param {Object} cell Cell container
+*/
+RowPainter._removeContentStyle = function(cell) {
+	if(cell) {
 		cell.removeClass("color-tag");
-		cell.removeClass("main-group");
 		cell.setStyle("paddingLeft", "");
-		cell.removeIcon();
-		cell.unlisten("click", this._onCellClicked);
 	}
 };
 
 /** @public
-* @param {Object} e
+* @param {RowPainter~RenderingOptions} e
 */
 RowPainter.prototype.applyHeaderStyle = function(e) {
 	var mainCol = e.colIndex;
@@ -188,58 +277,87 @@ RowPainter.prototype.applyHeaderStyle = function(e) {
 	var section = e.section;
 	var colCount = section.getColumnCount();
 	var footerRow = e.footerRow;
-	var stretching = footerRow ? this._footerSpanning : this._headerSpanning;
 	var checkboxColumnIndex = e.checkboxColumnIndex;
 	var cell = e.cell;
 
+	var stretching;
+	if(e.spanning != null) {
+		stretching = e.spanning;
+	} else {
+		stretching = footerRow ? this._footerSpanning : this._headerSpanning;
+	}
+
+	section.enableRowClass(e.rowIndex, "group-member", false);
 	if (stretching) {
 		cell = e.cell = section.stretchCell(mainCol, r, stretching, true); // No left stretching. Header background is covered by folder class
+
+		// Remove content from cells that are on left side of the stretched cell
+		this._clearCellContent(section, 0, mainCol, r, checkboxColumnIndex);
 	} else {
 		section.unstretchCell(mainCol, r);
 		section.enableRowClass(r, "header", true);
-		section.enableRowClass(r, "closed", e.collapsed ? true : false);
-		// Remove content from cell that appear on right side of mainCol
-		this._clearCellContent(section, mainCol + 1, colCount - 1, r, checkboxColumnIndex);
+		// Remove all content from the header row for rebinding
+		this._clearCellContent(section, 0, colCount, r, checkboxColumnIndex);
 	}
 	cell._groupHeaderStyle = true;
 
-	// Remove content from cell that appear on left side of mainCol
-	this._clearCellContent(section, 0, mainCol - 1, r, checkboxColumnIndex);
-
 	// Footer rows and some specific group levels contains no expander (arrow)
 	var newIcon = ExpanderIcon.renderOn(cell, e.hiddenArrow);
 	if (newIcon) {
 		newIcon.getElement().addEventListener("click", this._onCellClicked);
 	}
 
-	if (!footerRow) {
+	if (footerRow) {
+		if(stretching) {
+			cell.setContent("");
+		}
+		// TODO: Render color tag for footer rows
+	} else {
+		cell.enableClass("main-group", e.groupLevel === 1); // For color tag of root group header
+		cell.enableClass("closed", e.collapsed ? true : false);
+		cell.enableClass("header");
+		cell.enableClass("folder");
 		if (stretching) {
-			cell.addClass("folder"); // Stretched cell is in the cover-layer
-		} else {
-			section.enableRowClass(r, "folder", true); // Required by the fallback arrow from the CSS rules. TODO: Change this
+			if (this._headerMenuClicked) {
+				if (!cell._menuIcon) {
+					var icon = cell._menuIcon = Icon.create("more", "menu-icon");
+					icon.addEventListener("click", this._menuIconClicked);
+				}
+				cell.insertFloatingIcon(cell._menuIcon);
+			}
 		}
+
 		if (this._clickableCell) {
-			cell.listen("click", this._onCellClicked);
-		}
-		if (e.groupId) {
-			cell.setContent(e.groupId);
+			cell.listen("click", this._onCellClicked); // WARNING: content row share this same listener with this header cell
 		}
-		cell.enableClass("main-group", e.groupLevel === 1);
-		if (this._headerMenuClicked && stretching) {
-			if (!cell._menuIcon) {
-				var icon = cell._menuIcon = Icon.create("more", "menu-icon");
-				icon.addEventListener("click", this._menuIconClicked);
-			}
-			cell.insertFloatingIcon(cell._menuIcon);
+		if (!this._segmentMode) {
+			cell.setContent(e.groupId || "");
 		}
-	} else {
-		cell.setContent("");
 	}
-	cell.enableClass("closed", e.collapsed ? true : false);
 	cell.enableClass("color-tag", true);
 	RowPainter._applyColorTagClass(cell, e.colorTagClass);
 	cell.setStyle("paddingLeft", (e.indentSize > 0) ? e.indentSize + "px" : "");
 };
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} fromColumnIndex Inclusive
+* @param {number} toColumnIndex Exclusive
+* @param {number} rowIndex
+* @param {number} checkboxColumnIndex
+*/
+RowPainter.prototype._clearCellContent = function(section, fromColumnIndex, toColumnIndex, rowIndex, checkboxColumnIndex) {
+	if(this._segmentMode) {
+		return; // A group separator row has its own data row and does not need to be cleared
+	}
+	for (var c = fromColumnIndex; c < toColumnIndex; ++c) {
+		if (c !== checkboxColumnIndex) {
+			var cell = section.getCell(c, rowIndex, false);
+			if(cell) {
+				cell.setContent("");
+			}
+		}
+	}
+};
 
 /** @public
 * @param {Object} e
@@ -256,7 +374,6 @@ RowPainter.prototype.applyContentAsHeaderStyle = function (e) {
 		newIcon.getElement().addEventListener("click", this._onCellClicked);
 	}
 };
-
 /** @public
 * @param {Object} e
 */
@@ -264,8 +381,14 @@ RowPainter.prototype.applyRowStyle = function(e) {
 	var cell = e.cell;
 	var indentSize = e.indentSize;
 	cell.setStyle("paddingLeft", (indentSize > 0) ? indentSize + "px" : "");
-	cell.enableClass("color-tag", e.nonGroupRow ? false : true);
+	cell.enableClass("color-tag", !e.nonGroupRow);
+
 	RowPainter._applyColorTagClass(cell, e.colorTagClass);
+
+	var section = e.section;
+	if(section) {
+		section.enableRowClass(e.rowIndex, "group-member", !e.nonGroupRow);
+	}
 };
 
 /** @private

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

@@ -4,19 +4,19 @@ import { ElementWrapper } from "./ElementWrapper.js";
 
 declare class SubTable extends ElementWrapper {
 
-    constructor(opt_elem?: (Element|string));
+    constructor(opt_elem?: (Element|string)|null);
 
-    public insertRow(at?: number): Element|null;
+    public insertRow(at?: number|null): Element|null;
 
-    public addRows(count?: number): (Element)[];
+    public addRows(count?: number|null): (Element)[];
 
-    public removeRows(count?: number): void;
+    public removeRows(count?: number|null): void;
 
     public removeAllRows(): void;
 
     public setRowCount(val: number): void;
 
-    public setDefaultRowHeight(val?: (number|null)): void;
+    public setDefaultRowHeight(val?: (number|null)|null): void;
 
     public getColumnCount(): number;
 
@@ -48,27 +48,27 @@ declare class SubTable extends ElementWrapper {
 
     public toString(): string;
 
-    public getColumnIndex(e: Event): number;
+    public getColumnIndex(e: Event|null): number;
 
-    public getRowIndex(e: Event): number;
+    public getRowIndex(e: Event|null): number;
 
-    public getColumnLeft(colIndex: number, rowIndex?: number): number;
+    public getColumnLeft(colIndex: number, rowIndex?: number|null): number;
 
-    public getRowTop(rowRef: number|Element): number;
+    public getRowTop(rowRef: number|Element|null): number;
 
-    public getCellPosition(cell: Element, ret_obj?: any): any;
+    public getCellPosition(cell: Element|null, ret_obj?: any): any;
 
-    public setCellRenderer(func: ((...params: any[]) => any)): void;
+    public setCellRenderer(func: ((...params: any[]) => any)|null): void;
 
-    public cloak(elem: Element, opt_elementType?: string): void;
+    public cloak(elem: Element|null, opt_elementType?: string|null): void;
 
     public spanBlock(c1: number, c2: number, r1: number, r2: number): Element|null;
 
-    public static parseTableContent(tbl: Element): (string)[][]|null;
+    public static parseTableContent(tbl: Element|null): (string)[][]|null;
 
 }
 
-declare function tdElem(e: Event): number;
+declare function tdElem(e: Event|null): number;
 
 export default SubTable;
 export { SubTable };