@refinitiv-ui/efx-grid 6.0.3 → 6.0.4

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -27,6 +27,7 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {Function=} beforeRowCommit=null Handler before all editor in row commit
 * @property {Function=} rowEditorClosed=null Handler after all editors closed
 * @property {boolean=} uiBlocking=false append transparent overlay to block ui interaction
+* @property {Element=} autoSuggest=null Element of ef-autosuggest for handled with input cell
 */
 
 /** @typedef {Object} InCellEditingPlugin~Cache
@@ -66,6 +67,7 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {number} rowIndex
 * @property {string} field
 * @property {Element} inputElement
+* @property {Element} autoSuggest
 * @example
 * var cep = new InCellEditingPlugin();
 * cep.listen("editorOpened", function(e) {
@@ -157,6 +159,8 @@ var InCellEditingPlugin = function InCellEditingPlugin(options) {
   t._createTitleEditor = t._createTitleEditor.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onValueChanged = t._onValueChanged.bind(t);
+  t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
+  t._onAutoSuggestTapStart = t._onAutoSuggestTapStart.bind(t);
   t._hosts = [];
 
   if (options) {
@@ -316,6 +320,11 @@ InCellEditingPlugin.prototype._disablingScroll = false;
 */
 
 InCellEditingPlugin.prototype._uiBlocking = false;
+/** @type {Element}
+* @private
+*/
+
+InCellEditingPlugin.prototype._autoSuggest = null;
 /** @type {string}
 * @private
 */
@@ -385,6 +394,13 @@ InCellEditingPlugin.prototype._createInputElement = function (tag) {
     elem.setAttribute("type", "text");
   }
 
+  if (this._autoSuggest) {
+    this._autoSuggest.addEventListener("tapstart", t._onAutoSuggestTapStart); // TODO: remove this function after elf fixed item-select doesn't fire click events
+
+
+    this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
+  }
+
   elem.addEventListener("keydown", t._onTextKeyDown, false);
   elem.addEventListener("keyup", t._onTextKeyUp, false);
   elem.addEventListener("mousedown", t._stopPropagation, false);
@@ -623,6 +639,10 @@ InCellEditingPlugin.prototype.config = function (options) {
 
   if (pluginOption["uiBlocking"]) {
     t._uiBlocking = true;
+  }
+
+  if (pluginOption["autoSuggest"]) {
+    t._autoSuggest = pluginOption["autoSuggest"];
   } // event callback
 
 
@@ -1205,6 +1225,18 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
 
   if (t._disablingScroll) {
     t._freezeScrolling(host, true);
+  }
+
+  arg["autoSuggest"] = t._autoSuggest;
+
+  if (t._autoSuggest) {
+    if (t._autoSuggest.parentNode !== host.getElement()) {
+      // if we appendChild all time when open editor, events won't work
+      host.getElement().appendChild(t._autoSuggest);
+    }
+
+    t._autoSuggest.attach = inputElement;
+    t._autoSuggest.positionTarget = inputElement; // for re-position of autosuggest
   } // Dispatch an event for user to setup stuff
 
 
@@ -1508,6 +1540,42 @@ InCellEditingPlugin.prototype._onPopupHide = function (e) {
   this.closeRowEditor(false);
 };
 /** @private
+* @param {Object} event
+*/
+
+
+InCellEditingPlugin.prototype._onAutoSuggestTapStart = function (event) {
+  // TODO: Remove this function and use _onAutoSuggestItemSelected instead of this function
+  // This WORKAROUND by use "tapstart" event instead of "item-select" event in ef-autosugest
+  var target = event.target;
+
+  if (target.value) {
+    this.setText(target.value);
+
+    this._commitText(true);
+  }
+};
+/** @private
+* @param {Object} event
+*/
+
+
+InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
+  // TODO: Replace This function instead of _onAutoSuggestTapStart when elf fixed item-select.
+  // Currently, we use tapstart instead of item-select, so it's not support other method of item-select
+  // Currently, this function doesn't execute until item-select event fired from auto-suggest
+  var method = event.detail.method;
+  var value = event.detail.target.value;
+
+  if (method === 'enter' || method === 'click') {
+    if (value) {
+      this.setText(value);
+
+      this._commitText(true);
+    }
+  }
+};
+/** @private
 * @param {Object} e
 */
 
@@ -1540,6 +1608,12 @@ InCellEditingPlugin.prototype._onTextKeyDown = function (e) {
 
 
   if (e.keyCode === 9) {
+    // For check press tab key when user tab on auto suggest list
+    // When user tab on auto suggest, the focus should be in input and data doesn't commit
+    if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+      this._activeInCellCache.inputElement.focus();
+    }
+
     e.preventDefault(); // stop losing focus
   }
 };
@@ -1570,9 +1644,17 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
     var cellInfo = this._activePos;
 
     if (this._initialText !== text) {
-      this._commitText(true);
-
       e.preventDefault(); // TODO: Check if this is needed
+      // Clear auto suggest and doesn't commit when user tab on auto suggest item
+
+      if (this._autoSuggest && this._autoSuggest.suggestions.length > 0) {
+        this._activeInCellCache.inputElement.focus();
+
+        this._autoSuggest.suggestions = [];
+        return; // when use tabToMove with auto suggest, it shouldn't be effect when doesn't commit text
+      } else {
+        this._commitText(true);
+      }
     } else {
       this._commitText(false);
     }
@@ -1958,6 +2040,15 @@ InCellEditingPlugin.prototype.getBalloonPopup = function () {
   // we should receive column index to return balloonPopup in specific column
   return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
 };
+/** Get ef-autosuggest
+* @public
+* @return {Element}
+*/
+
+
+InCellEditingPlugin.prototype.getAutoSuggest = function () {
+  return this._autoSuggest;
+};
 /**
 * @public
 * @param {boolean=} disabled

package/lib/tr-grid-printer/es6/CellWriter.d.ts

@@ -6,15 +6,15 @@ declare class CellWriter extends ElementWrapper {
 
     constructor();
 
-    public getContent(): Node|null;
+    public getContent(): Node|null|null;
 
-    public setContent(content: any, opt_tooltip?: boolean): Element;
+    public setContent(content: any, opt_tooltip?: boolean): Element|null;
 
     public setTooltip(str: string): void;
 
     public setTextContent(str: string): void;
 
-    public addContent(n: any): Element;
+    public addContent(n: any): Element|null;
 
     public setStyle(str: string, val: any): void;
 

package/lib/tr-grid-printer/es6/GridPrinter.d.ts

@@ -17,7 +17,7 @@ declare namespace GridPrinter {
 
     function getPreFlightInfo(grid: any, options?: any): any;
 
-    function createPrintElement(grid: any, options?: any): Element;
+    function createPrintElement(grid: any, options?: any): Element|null;
 
     function print(grid: any): void;
 

package/lib/tr-grid-printer/es6/GridPrinter.js

@@ -113,6 +113,27 @@ var _setColumnAlignment = function (tbl, colIndex, alignment) {
 	}
 };
 
+/** @private
+* @param {*} grid grid element, currently supports atlas-blotter, ef-grid, tr.CompositeGrid, rt.Grid and Core
+* @return {Object} core grid
+*/
+var _getCoreGrid = function (grid) {
+	var core = null;
+	try {
+		if (grid.api) { // ef-grid or atlas-blotter
+			core = grid.api.getCoreGrid();
+		} else if (grid.getCoreGrid) { // tr.CompositeGrid or rt.Grid
+			core = grid.getCoreGrid();
+		} else if (grid.getPlugin) { // coreGrid
+			core = grid;
+		}
+		// TODO: support react/angular wrapper
+	} catch (err) {
+		console.log("Cannot print the given object");
+	}
+	return core;
+};
+
 /** @namespaces
 */
 var GridPrinter = {};
@@ -331,13 +352,15 @@ GridPrinter.getPreFlightInfo = function (grid, options) {
 };
 
 /** @public
-* @param {tr.Grid} grid
+* @param {*} grid grid element, currently supports atlas-blotter, ef-grid, tr.CompositeGrid, rt.Grid and Core
 * @param {Object=} options
 * @return {Element}
 */
 GridPrinter.createPrintElement = function (grid, options) {
 	if (!grid) {
 		grid = GridPrinter._grid;
+	} else {
+		grid = _getCoreGrid(grid);
 	}
 
 	if (!grid) {
@@ -624,23 +647,13 @@ GridPrinter._applyCss = function () {
 };
 
 /** @public
-* @param {tr.Grid} grid
+* @param {*} grid grid element, currently supports atlas-blotter, ef-grid, tr.CompositeGrid, rt.Grid and Core
 */
 GridPrinter.print = function (grid) {
 	var core = null;
 	if (grid) {
 		GridPrinter._applyCss();
-		try {
-			if (grid.api) { // ef-grid or atlas-blotter
-				core = grid.api.getCoreGrid();
-			} else if (grid.getCoreGrid) { // tr.CompositeGrid or rt.Grid
-				core = grid.getCoreGrid();
-			} else if (grid instanceof tr.Grid) {
-				core = grid;
-			}
-		} catch (err) {
-			console.log("Cannot print the given object");
-		}
+		core = _getCoreGrid(grid);
 	}
 
 	if (core) {

package/lib/tr-grid-printer/es6/PrintTrait.d.ts

@@ -29,9 +29,9 @@ declare class PrintTrait {
 
     public fixPaperSize(enabled: boolean): void;
 
-    public getDocumentElement(): Element|null;
+    public getDocumentElement(): Element|null|null;
 
-    public getBodyElement(): Element|null;
+    public getBodyElement(): Element|null|null;
 
 }
 

package/lib/tr-grid-printer/es6/SectionWriter.d.ts

@@ -21,9 +21,9 @@ declare class SectionWriter extends ElementWrapper {
 
     public setRowCount(val: number): void;
 
-    public getCell(colIndex: number, rowIndex: number): CellWriter;
+    public getCell(colIndex: number, rowIndex: number): CellWriter|null;
 
-    public getCellContent(colIndex: number, rowIndex: number): Element|Node|NodeList;
+    public getCellContent(colIndex: number, rowIndex: number): Element|Node|NodeList|null;
 
     public setCellContent(colIndex: number, rowIndex: number, data: string|Element|any|any): void;
 
@@ -47,7 +47,7 @@ declare class SectionWriter extends ElementWrapper {
 
     public isColumnActive(colIndex: number): boolean;
 
-    public getCellElement(colIndex: number, rowIndex: number): Element;
+    public getCellElement(colIndex: number, rowIndex: number): Element|null;
 
 }
 

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -1,8 +1,9 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
-import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 declare namespace RowDraggingPlugin {
 

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -1,8 +1,9 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
-import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 /** @typedef {Object} RowDraggingPlugin~Options
 * @description Available options describing `rowDragging` object specified in grid's option
@@ -79,7 +80,7 @@ var RowDraggingPlugin = function (options) {
 	t._guideline.className = "tr-row-guideline";
 
 	t._dragBox = document.createElement("div");
-	t._dragBox.className = "drag-box";
+	t._dragBox.className = "drag-box-disabled";
 
 	t._dragBoxIcon = document.createElement("ef-icon");
 	t._dragBoxIcon.className = "drag-box-icon";
@@ -185,7 +186,10 @@ RowDraggingPlugin.prototype._dataTransfer = true;
 * @private
 */
 RowDraggingPlugin.prototype._autoScroll = true;
-
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._dragUI = null;
 
 /** Prevent built-in config
 * @public
@@ -235,11 +239,17 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 	host.listen("mousedown", this._onMouseDown);
 	host.listen("touchstart", this._onMouseDown);
 
-	if(RowDraggingPlugin._stylePromise) {
-		RowDraggingPlugin._applyThemeColor(host);
+	this._dragUI = new DragUI({
+		dragBox: this._dragBox,
+		dragBoxIcon: this._dragBoxIcon
+	});
+
+	// Share dragging styles
+	if(DragUI.stylePromise) {
+		DragUI.applyThemeColor(host);
 	} else {
-		RowDraggingPlugin._stylePromise = ElfUtil.getThemeColors();
-		RowDraggingPlugin._stylePromise.then(this._onThemeLoaded);
+		DragUI.stylePromise = ElfUtil.getThemeColors();
+		DragUI.stylePromise.then(this._onThemeLoaded);
 	}
 
 	// In case of lazy loading
@@ -268,100 +278,9 @@ RowDraggingPlugin.prototype.unload = function (host) {
 * @param {Object} colors
 */
 RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
-	if(!RowDraggingPlugin._styles) {
-		var styles = [ // Main Styles without theme
-			".tr-row-guideline", [
-				"position: absolute;",
-				"left: 0;",
-				"top: 0;",
-				"pointer-events: none;",
-				"z-index: 1;",
-				"text-align: center;",
-				"border-top-width: 3px;",
-				"border-top-style: solid;"
-			],
-			".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;"
-			]
-		];
-		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));"
-			]);
-		}
-		RowDraggingPlugin._styles = prettifyCss(styles);
-	}
-
+	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
 	for(var i = this._hosts.length; --i >= 0;) {
-		RowDraggingPlugin._applyThemeColor(this._hosts[i]);
-	}
-};
-/** @private
-* @param {Object} grid core grid instance
-*/
-RowDraggingPlugin._applyThemeColor = function(grid) {
-	if(!grid || grid._rowDraggingStyles) {
-		return;
-	}
-	if(RowDraggingPlugin._styles) {
-		grid._rowDraggingStyles = true; // Prevent loading the same style twice
-		injectCss(RowDraggingPlugin._styles, grid.getElement());
+		DragUI.applyThemeColor(this._hosts[i]);
 	}
 };
 
@@ -378,6 +297,7 @@ RowDraggingPlugin.prototype.config = function (options) {
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
 		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+		this._dragBox.className = "drag-box"; // set disable drag-box
 	} else {
 		this._dragBox.className = "drag-box-disabled"; // set disable drag-box
 	}
@@ -573,7 +493,7 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 		// TODO: Just update curser will not gonna work since cell is pointer-events: none;
 		// we should do something to overwrite pointer-events first
 		// then set cursor move will have an effect
-		grid.getElement().style.cursor = "grabbing";
+		grid.getElement().classList.add("mouse-dragging");
 
 		this._updateGuidePosition();
 
@@ -612,12 +532,17 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 	this._pos = this._hitTest(e); // A new object is created
 
 	this._updateGuidePosition(e);
-	this._renderDragBox(e);
-
 	this._pos.dragBox = this._dragBox; // assign dragBox for user determine valid target
 
 	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
 	this._dispatch("drag", this._pos);
+	if(!this._disabled) {
+		e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
+		var drop = this._dragUI.renderDragBox(e, this._startingGrid);
+		if(!drop) { // can not be drop or not allow to drop or insertion
+			this.cancelDrag();
+		}
+	}
 };
 /** @private
 * @param {Object} e
@@ -649,7 +574,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 	}
 
 	var srcGrid = this._startingGrid || this._hosts[0];
-	srcGrid.getElement().style.cursor = "";
+	srcGrid.getElement().classList.remove("mouse-dragging");
 
 	var destPos = this._pos; // This can be null
 	if(!this._isDragCancelled()) {
@@ -803,45 +728,6 @@ RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
 	}
 };
 
-/** @private
-* @param {!Element|Event|MouseEvent} e
-*/
-RowDraggingPlugin.prototype._renderDragBox = function (e) {
-
-	if(this._disabled) {
-		return;
-	}
-
-	var gridElem = this._startingGrid.getElement();
-	var gridParent = this._startingGrid.getParent().parentNode;
-	var pn = this._dragBox.parentNode;
-	if(!pn) {
-		gridParent.appendChild(this._dragBox);
-	}
-
-	Dom.removeParent(this._dragBoxIcon);
-
-	var dragBoxIcon = this._dragBox.dragBoxIcon;
-	this._dragBoxIcon.style.visibility = "visible";
-	if(dragBoxIcon === "insertion") {
-		this.cancelDrag();
-		this._dragBoxIcon.icon = "add";
-		this._dragBox.appendChild(this._dragBoxIcon);
-	} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
-		this.cancelDrag();
-		this._dragBoxIcon.icon = "void";
-		this._dragBox.appendChild(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";
-};
 /** @private */
 RowDraggingPlugin.prototype._clearCache = function () {
 	if (this._dragPulseId) {

package/lib/tr-grid-row-grouping/es6/RowGrouping.d.ts

@@ -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";
 
 declare namespace RowGroupingPlugin {
 
@@ -26,6 +27,8 @@ declare namespace RowGroupingPlugin {
         autoGroupSorting?: boolean,
         indentSize?: (boolean|number|(number)[]),
         colorTag?: boolean,
+        predefinedColors?: any,
+        groupColors?: any,
         clicked?: ((...params: any[]) => any),
         groupAdded?: ((...params: any[]) => any),
         beforeGroupAdded?: ((...params: any[]) => any),
@@ -75,10 +78,12 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public setGroupSortingLogic(sortFunction: RowGroupingPlugin.GroupSortLogic): void;
 
-    public getGroupSortingLogic(): ((...params: any[]) => any);
+    public getGroupSortingLogic(): ((...params: any[]) => any)|null;
 
     public setPredefinedGroups(predefinedGroups: any[]|(any[])[]): void;
 
+    public setPredefinedColors(predefinedColors: any): void;
+
     public sortGroups(): void;
 
     public updateHeaders(): void;
@@ -93,7 +98,7 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public disableClicking(opt_disabled?: boolean): void;
 
-    public getGroupingStates(): (RowGroupingPlugin.GroupingState)[];
+    public getGroupingStates(): (RowGroupingPlugin.GroupingState)[]|null;
 
     public setGroupingStates(states: (RowGroupingPlugin.GroupingState)[]|string): void;