@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

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

@@ -8,9 +8,9 @@ declare namespace Dom {
 
     function text(textContent?: string, className?: string): Element;
 
-    function appendChild(parentElem: Element, children: Node|any[]): Element;
+    function appendChild(parentElem: Element, children: Node|any[]): Element|null;
 
-    function buildTree(parentElem: Element, children: Node|any[]): Element;
+    function buildTree(parentElem: Element, children: Node|any[]): Element|null;
 
     function setContent(elem: Element, val: any): void;
 
@@ -22,9 +22,9 @@ declare namespace Dom {
 
     function getRelativePosition(A: Element|Event|MouseEvent, B: Element|Event|MouseEvent, retObj?: any): any;
 
-    function closestElement(elem: Element|Node|undefined, classStr: string): Element;
+    function closestElement(elem: Element|Node|undefined, classStr: string): Element|null;
 
-    function closestTagName(elem: Element|Node|undefined, tn: string): Element;
+    function closestTagName(elem: Element|Node|undefined, tn: string): Element|null;
 
 }
 

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/ElementWrapper.d.ts

@@ -5,7 +5,7 @@ declare class ElementWrapper extends EventDispatcher {
 
     constructor();
 
-    public getElement(): Element;
+    public getElement(): Element|null;
 
     public setParent(parent: Node|ElementWrapper): void;
 

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

@@ -2,7 +2,7 @@
 
 declare namespace ElfDate {
 
-    function from(val: any): Date;
+    function from(val: any): Date|null;
 
     function isValid(d: Date): boolean;
 
@@ -12,13 +12,13 @@ declare namespace ElfDate {
 
     function setDate(edtp: Element, val: any): void;
 
-    function getDate(edtp: Element): Date;
+    function getDate(edtp: Element): Date|null;
 
     function compare(valA: any, valB: any): number;
 
     function equal(valA: any, valB: any): boolean;
 
-    function extractDate(d: Date): (number)[];
+    function extractDate(d: Date): (number)[]|null;
 
 }
 

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

@@ -3,9 +3,9 @@ import { Deferred } from "./Deferred.js";
 
 declare namespace ElfUtil {
 
-    const themeReady: Promise<any>;
+    const themeReady: Promise<any>|null;
 
-    const themeColors: { [key: string]:  string };
+    const themeColors: { [key: string]:  string }|null;
 
     function getElfVersion(): number;
 
@@ -21,9 +21,9 @@ declare namespace ElfUtil {
 
     function getIconList(): (string)[];
 
-    function prepareIconPreloading(): (string)[];
+    function prepareIconPreloading(): (string)[]|null;
 
-    function getThemeColors(): Promise<any>;
+    function getThemeColors(): Promise<any>|null;
 
     function getMovementColorProfile(): string;
 

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/EventDispatcher.d.ts

@@ -12,7 +12,7 @@ declare class EventDispatcher {
 
     public hasListener(type: string): boolean;
 
-    public getListener(type: string, idx?: number): ((...params: any[]) => any);
+    public getListener(type: string, idx?: number): ((...params: any[]) => any)|null;
 
     public addListener(obj: any, type: string): void;
 

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.d.ts

@@ -25,7 +25,7 @@ declare class FieldFormatter {
 
     public getField(): string;
 
-    public clone(): FieldFormatter;
+    public clone(): FieldFormatter|null;
 
     public setFormatType(type: string): void;
 

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/FilterBuilder.d.ts

@@ -32,17 +32,17 @@ declare class FilterBuilder {
 
     public addConditions(conditions: FilterBuilder.Conditions): number;
 
-    public getConditions(): FilterBuilder.Conditions;
+    public getConditions(): FilterBuilder.Conditions|null;
 
-    public buildFilter(): ((...params: any[]) => any);
+    public buildFilter(): ((...params: any[]) => any)|null;
 
-    public buildMonitorFilter(filterStr: string, field: string, formatter?: ((...params: any[]) => any), formattedField?: string): ((...params: any[]) => any);
+    public buildMonitorFilter(filterStr: string, field: string, formatter?: ((...params: any[]) => any), formattedField?: string): ((...params: any[]) => any)|null;
 
-    public parse(condition: any, field?: string, formatter?: ((...params: any[]) => any), formattedField?: string, rawDataAccessor?: ((...params: any[]) => any), formattedDataAccessor?: ((...params: any[]) => any)): ((...params: any[]) => any);
+    public parse(condition: any, field?: string, formatter?: ((...params: any[]) => any), formattedField?: string, rawDataAccessor?: ((...params: any[]) => any), formattedDataAccessor?: ((...params: any[]) => any)): ((...params: any[]) => any)|null;
 
 }
 
-declare function buildFilterFromObjectMap(obj: any, field: string, rawDataAccessor?: ((...params: any[]) => any)): ((...params: any[]) => any);
+declare function buildFilterFromObjectMap(obj: any, field: string, rawDataAccessor?: ((...params: any[]) => any)): ((...params: any[]) => any)|null;
 
 export default FilterBuilder;
 export { FilterBuilder, buildFilterFromObjectMap };

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

@@ -20,7 +20,7 @@ declare class GridPlugin extends EventDispatcher {
 
     public unload(host?: any): void;
 
-    public getRelativeGrid(e: Event|Element|any): any;
+    public getRelativeGrid(e: Event|Element|any): any|null;
 
     public setGridWrapper(gridType: string, wrapperInstance: any): void;
 
@@ -30,13 +30,13 @@ declare class GridPlugin extends EventDispatcher {
 
     public getColumnIndex(colId: number|string): number;
 
-    public getColumnIndices(colRefs: (number|string)[]): (number)[];
+    public getColumnIndices(colRefs: (number|string)[]): (number)[]|null;
 
     public getColumnId(colIndex: number|string): string;
 
     public getColumnCount(): number;
 
-    public static requestPlugin(ref: any, pluginRef: any, configObj?: any, compositeGrid?: any, realTimeGrid?: any): Promise<any>;
+    public static requestPlugin(ref: any, pluginRef: any, configObj?: any, compositeGrid?: any, realTimeGrid?: any): Promise<any>|null;
 
 }
 

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/MouseDownTrait.d.ts

@@ -22,7 +22,7 @@ declare class MouseDownTrait extends EventDispatcher {
 
     public enable(opt_bool?: boolean): void;
 
-    public getElement(): Element;
+    public getElement(): Element|null;
 
     public setElement(elem?: Element): void;
 

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

@@ -8,7 +8,7 @@ declare class MultiTableManager {
 
     constructor(gridElem: Element);
 
-    public static synchronizeVScrollbar(vScrollbarHost: Element, hScrollbarHost: Element, gridElems: (Element)[]): Promise<any[]>;
+    public static synchronizeVScrollbar(vScrollbarHost: Element, hScrollbarHost: Element, gridElems: (Element)[]): Promise<any[]>|null;
 
     public setGridConfig(configObj?: any): void;
 
@@ -18,7 +18,9 @@ declare class MultiTableManager {
 
     public setTableCount(num: number): void;
 
-    public getTable(at?: number): Element;
+    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;