@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,263 @@
+import { injectCss, prettifyCss } from "./Util.js";
+import Dom from "./Dom.js";
+import ElfUtil from "./ElfUtil.js";
+
+/**
+* @constructor
+* @param {Object} options
+*/
+let DragUI = function(options) {
+	this._dragBox = options.dragBox;
+	this._dragBoxIcon = options.dragBoxIcon;
+	this._dragBoxContent = document.createElement("div");
+	this._dragBoxContent.className = "drag-box-content";
+	this._dragBox.appendChild(this._dragBoxContent);
+};
+
+/** @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;
+
+/** Apply the theme colors to the specified grid after DragUI.initStyles
+* @public
+* @param {Object} grid core grid instance
+*/
+DragUI.applyThemeColor = function(grid) {
+	if(!grid || grid._dragUIStyles) {
+		return;
+	}
+
+	if(DragUI._styles) {
+		grid._dragUIStyles = true; // Prevent loading the same style twice
+		injectCss(DragUI._styles, grid.getElement());
+	}
+	// TO_DO : 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.
+};
+
+/** Deprecated in favor of DragUI.initStyles()
+* @public
+* @param {Object} colors
+*/
+DragUI.prototype.onThemeLoaded = function(colors) {
+	DragUI.initStyles(colors);
+};
+
+/** WARNING: This method should be called after the theme has been loaded in order to initialize with the correct colors.
+* @public
+* @function
+* @param {Object=} colors
+*/
+DragUI.initStyles = function(colors) {
+	if(!DragUI._styles) {
+		if(!colors) {
+			colors = ElfUtil.getColors();
+		}
+
+		let ElfVersion = ElfUtil.getElfVersion();
+		let cursor = "grabbing";
+		if (ElfVersion < 3) {
+			cursor = "move";
+		}
+		let 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);",
+				"z-index: 2" // Cover sort indicator
+			],
+			".drag-box-disabled", [
+				"width: 100px;",
+				"left: 0;",
+				"top: 0;",
+				"position: absolute;"
+			],
+			".drag-box-content", [
+				"overflow-x: clip;",
+				"text-overflow: ellipsis;"
+			],
+			".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;",
+				"--grid-title-icon-color: var(--grid-guideline-color);" // v3 fallback
+			],
+			".mouse-dragging *", [ // While dragging cursor should be changing
+				"cursor: " + cursor + " !important;"
+			],
+			".tr-grid .column .cell.drag-indicator", [ // --grid-drag-indicator defualt is "none"
+				"border-top: var(--grid-drag-indicator) !important;",
+				"border-right: var(--grid-drag-indicator) !important;", // need to set !important to overwrite the priority set by the last column which has the none border
+				"border-bottom: var(--grid-drag-indicator);",
+				"border-left: var(--grid-drag-indicator);"
+			],
+			".tr-dragging, .tr-dragging *", [
+				"-webkit-touch-callout: none;",
+				".user-select(none);"
+			],
+			".tr-dragbox", [
+				"background-color: unset;" // v3 fallback
+			]
+		];
+		let guidelineColor = "#ff9933";
+		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;
+	}
+
+	let gridElem = grid.getElement();
+	let dragBoxHost = gridElem;
+	let gridParent = grid.getParent().parentNode;
+	if (gridParent.nodeType === 11) {
+		dragBoxHost = gridParent;
+	}
+
+	let parent = this._dragBox.parentNode;
+	if(!parent) {
+		dragBoxHost.appendChild(this._dragBox);
+	}
+
+	let dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon; // The user-supplied icon
+	this._dragBoxIcon.style.visibility = "visible";
+	parent = this._dragBoxIcon.parentNode;
+	let drop = true;
+	if(dragBoxIcon === "insertion") {
+		drop = false;
+		this._dragBoxIcon.icon = "add";
+		if(!parent) {
+			this._dragBox.appendChild(this._dragBoxIcon);
+		}
+	} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
+		drop = false;
+		this._dragBoxIcon.icon = "void";
+		if(!parent) {
+			this._dragBox.appendChild(this._dragBoxIcon);
+		}
+	} else {
+		Dom.removeParent(this._dragBoxIcon);
+	}
+
+	let gridRect = gridElem.getBoundingClientRect();
+
+	let x = e.clientX - gridRect.left;
+	let 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;
+};
+
+/** @public
+* @param {*} content Element, Node, string, number, or everything else.
+*/
+DragUI.prototype.setContent = function(content) {
+	if (content && content["getElement"]) {
+		content = content["getElement"]();
+	}
+
+	let dragBoxContent = this._dragBoxContent;
+	let currentContent = dragBoxContent._content;
+	if (content !== currentContent) {
+		dragBoxContent._content = content;
+		Dom.setContent(dragBoxContent, content);
+	}
+};
+
+export default DragUI;
+export {DragUI};

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

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

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

@@ -0,0 +1,134 @@
+
+/** @namespace
+*/
+let ElementObserver = {};
+
+/** @private
+* @param {Element} elem
+* @param {MutationRecord} mutation
+*/
+let _onLanguageMutated = function (elem, mutation) {
+	if (mutation.type == "attributes" && mutation.attributeName == "lang") {
+		elem.lang = mutation.target.lang || "en";
+	}
+};
+
+/** @private
+* @param {Function} listener
+* @param {string=} attributeName
+* @param {MutationRecord} mutation
+*/
+let _onAttributeMutated = function (listener, attributeName, mutation) {
+	if (mutation.type === "attributes") {
+		if (attributeName != null) {
+			if (mutation.attributeName === attributeName) {
+				listener(mutation.target.getAttribute(attributeName));
+			}
+		} else {
+			listener(mutation.target);
+		}
+	}
+};
+
+/** @private
+* @return {string}
+*/
+ElementObserver._getNewId = function () {
+	let id = "observer_" + (++ElementObserver._id);
+	return id;
+};
+
+/** Observe any element
+* @private
+* @param {Element} elem
+* @param {Function} listener
+* @param {Object=} opt_option
+*/
+ElementObserver._addObserver = function(elem, listener, opt_option) {
+	let option = opt_option;
+	if (!option) {
+		option = {};
+	}
+	option.attributes = true; //configure it to listen to attribute changes
+
+	ElementObserver._observer.observe(elem, option);
+	ElementObserver._addListener(elem, listener);
+};
+
+/** @private
+* @param {Array.<MutationRecord>} mutations
+*/
+ElementObserver._onMutationCallback = function(mutations) {
+	for (let i = 0; i < mutations.length; i++) {
+		let mutation = mutations[i];
+		let listeners = ElementObserver._listeners[mutation.target._observeId];
+		for (let j = 0; j < listeners.length; j++) {
+			listeners[j](mutation);
+		}
+	}
+};
+
+/** @private
+* @param {Element} elem
+* @param {Function} fn
+*/
+ElementObserver._addListener = function(elem, fn) {
+	let listeners = ElementObserver._listeners;
+	if (!listeners) {
+		listeners = ElementObserver._listeners = {};
+	}
+	if (!elem._observeId) {
+		let id = ElementObserver._getNewId();
+		elem._observeId = id;
+	}
+	if (!listeners[elem._observeId]) { // Always check to support the using of separated ElfUtil module in testing page
+		listeners[elem._observeId] = [];
+	}
+
+	let listener = listeners[elem._observeId];
+	if (listener.indexOf(fn) < 0) {
+		listener.push(fn);
+	}
+};
+
+/** Add a listener to a html lang attribute
+* @public
+* @param {Element} element An element within the DOM tree to watch for changes
+*/
+ElementObserver.addLanguageListener = function(element) {
+	if (!element) { return; }
+
+	element.lang = document.documentElement.lang || "en";
+
+	ElementObserver._addObserver(document.documentElement, _onLanguageMutated.bind(null, element));
+};
+
+/** 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
+*/
+ElementObserver.addAttributeListener = function(element, listener, attributeName) {
+	if (!element || !listener) { return; }
+	ElementObserver._addObserver(element, _onAttributeMutated.bind(null, listener, attributeName));
+};
+
+/**
+* @type {MutationObserver}
+* @private
+*/
+ElementObserver._observer = new MutationObserver(ElementObserver._onMutationCallback);
+/**
+* @type {Obect}
+* @private
+*/
+ElementObserver._listeners = {};
+/**
+* @type {number}
+* @private
+*/
+ElementObserver._id = 0;
+
+export default ElementObserver;
+export { ElementObserver };

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

@@ -0,0 +1,23 @@
+import {Ext} from './Ext.js';
+import {EventDispatcher} from './EventDispatcher.js';
+
+declare class ElementWrapper extends EventDispatcher {
+
+    constructor();
+
+    public getElement(): Element|null;
+
+    public setParent(parent: Node|ElementWrapper|null): void;
+
+    public getBoundingClientRect(): any;
+
+    public getMousePosition(e: Event|null, retObj?: any): any;
+
+    public addEventListener(type: string, listener: ((...params: any[]) => any)|null): void;
+
+    public removeEventListener(type: string, listener: ((...params: any[]) => any)|null): void;
+
+}
+
+export default ElementWrapper;
+export {ElementWrapper};

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

@@ -0,0 +1,84 @@
+import {Ext} from './Ext.js';
+import {EventDispatcher} from './EventDispatcher.js';
+
+/** @constructor
+* @extends {EventDispatcher}
+*/
+let ElementWrapper = function() {};
+Ext.inherits(ElementWrapper, EventDispatcher);
+/** @type {Element}
+* @protected
+* @ignore
+*/
+ElementWrapper.prototype._elem = null;
+
+
+/** @public
+* @return {Element}
+*/
+ElementWrapper.prototype.getElement = function() {
+	return this._elem;
+};
+/** @public
+* @param {Node|ElementWrapper} parent
+*/
+ElementWrapper.prototype.setParent = function(parent) {
+	if(parent) {
+		if(parent["getElement"]) {
+			parent = /** @type{Node} */(parent["getElement"]());
+		}
+		parent.appendChild(this._elem);
+	} else {
+		parent = this._elem.parentNode;
+		if(parent) {
+			parent.removeChild(this._elem);
+		}
+	}
+};
+/** @public
+* @return {!Object}
+*/
+ElementWrapper.prototype.getBoundingClientRect = function() {
+	return this._elem.getBoundingClientRect();
+};
+/** Get mouse position relative to this element
+* @public
+* @param {Event} e MouseEvent should be given
+* @param {Object=} retObj
+* @return {!Object}
+*/
+ElementWrapper.prototype.getMousePosition = function(e, retObj) {
+	if(!retObj) { retObj = {}; }
+	let bounds = this.getBoundingClientRect();
+	retObj["x"] = e.clientX - bounds["left"];
+	retObj["y"] = e.clientY - bounds["top"];
+
+	return /**@type {!Object}*/(retObj);
+};
+
+/** @public
+* @override
+* @param {string} type
+* @param {Function} listener
+*/
+ElementWrapper.prototype.addEventListener = function(type, listener) {
+	ElementWrapper.base(this, "addEventListener", type, listener);
+	// TODO: This won't work with Custom Element
+	if(this._elem["on" + type] !== undefined) { // eslint-disable-line
+		this._elem.addEventListener(type, listener, false);
+	}
+};
+/** @public
+* @override
+* @param {string} type
+* @param {Function} listener
+*/
+ElementWrapper.prototype.removeEventListener = function(type, listener) {
+	ElementWrapper.base(this, "removeEventListener", type, listener);
+	if(this._elem["on" + type] !== undefined) { // eslint-disable-line
+		this._elem.removeEventListener(type, listener, false);
+	}
+};
+
+export default ElementWrapper;
+export {ElementWrapper};

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

@@ -0,0 +1,26 @@
+
+
+declare namespace ElfDate {
+
+    function from(val: any): Date|null;
+
+    function isValid(d: Date|null): boolean;
+
+    function prefixSingleDigit(n: number): string;
+
+    function toYMD(d: string|Date|null): string;
+
+    function setDate(edtp: Element|null, val: any): void;
+
+    function getDate(edtp: Element|null): Date|null;
+
+    function compare(valA: any, valB: any): number;
+
+    function equal(valA: any, valB: any): boolean;
+
+    function extractDate(d: Date|null): (number)[]|null;
+
+}
+
+export default ElfDate;
+export { ElfDate };

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

@@ -0,0 +1,164 @@
+/** @namespace */
+let ElfDate = {};
+
+/** Check ELF version
+* @public
+* @function
+* @param {*} val String, number, array and any other types are acceptable
+* @return {Date} Native Date object or null for Invalid Date
+* @example
+* ElfDate.from(1000);         // Thu Jan 01 1970 07:00:01 GMT+0700 (Indochina Time)
+* ElfDate.from("2000/12/2");  // Sat Dec 02 2000 00:00:00 GMT+0700 (Indochina Time)
+* ElfDate.from("2000-12-02"); // Sat Dec 02 2000 07:00:00 GMT+0700 (Indochina Time)
+* ElfDate.from("2000-12-2");  // Sat Dec 02 2000 00:00:00 GMT+0700 (Indochina Time)
+* ElfDate.from([2000, 11, 2]);// Sat Dec 02 2000 07:00:00 GMT+0700 (Indochina Time)
+* ElfDate.from("2/12/2000");  // Sat Feb 12 2000 00:00:00 GMT+0700 (Indochina Time)
+* ElfDate.from("20/12/2000"); // null
+* ElfDate.from(new Date("Invalid")); // null
+*/
+ElfDate.from = function (val) {
+	if(val) {
+		let d = val;
+		if(typeof val === "string" || typeof val === "number") {
+			d = new Date(val);
+		} else if(Array.isArray(val)) {
+			d = new Date(Date.UTC(val[0] || 0, val[1] || 0, val[2] || 0));
+		}
+		if(ElfDate.isValid(d)) {
+			return d;
+		}
+	}
+	return null;
+};
+
+/** @public
+* @function
+* @param {Date} d Native Date object
+* @return {boolean}
+*/
+ElfDate.isValid = function (d) {
+	if(d && d.getTime) { // Date object must have getTime method
+		let ms = d.getTime(); // millisecond since 1 first january 1970
+		return ms === ms; // Invalid Date will have NaN as its value
+	}
+	return false;
+};
+
+/** @public
+* @function
+* @param {number} n
+* @return {string}
+* @example
+* ElfDate.prefixSingleDigit(9); // "09"
+* ElfDate.prefixSingleDigit(0); // "00"
+* ElfDate.prefixSingleDigit(10); // "10"
+*/
+ElfDate.prefixSingleDigit = function (n) {
+	return (n < 10 && n >= 0) ? "0" + n : "" + n;
+};
+
+/** @type {RegExp}
+* @private
+*/
+ElfDate._ymdRe = /^\d{4}\-d{2}\-\d{2}/; // eslint-disable-line
+
+/** Returns yyyy-MM-dd string format for ef-datetime-picker.
+* @public
+* @function
+* @param {string|Date} d
+* @return {string} Return string for valid date, otherwise empty string
+* @example
+* ElfDate.toYMD(new Date("2000/1/1")); // "2000-01-01"
+* ElfDate.toYMD("2000/1/1"); // "2000-01-01"
+*/
+ElfDate.toYMD = function (d) {
+	if(typeof d === "string") {
+		if(ElfDate._ymdRe.test(d)) {
+			return d; // pass through only if we have yyyy-MM-dd
+		}
+	}
+	let dateObj = ElfDate.from(d);
+	if(dateObj) {
+		return dateObj.getFullYear() + "-" +
+			ElfDate.prefixSingleDigit(dateObj.getMonth() + 1) + "-" +
+			ElfDate.prefixSingleDigit(dateObj.getDate());
+	}
+	return "";
+};
+
+/** @public
+* @function
+* @param {Element} edtp Emerald date-time picker element
+* @param {*} val
+*/
+ElfDate.setDate = function (edtp, val) {
+	if (edtp) {
+		if(edtp.isAttached) { // Only Polymer element has isAttached property
+			edtp.value = ElfDate.from(val);
+		} else {
+			edtp.value = ElfDate.toYMD(val);
+		}
+	}
+};
+/** @public
+* @function
+* @param {Element} edtp Emerald date-time picker element
+* @return {Date} Native Date object
+*/
+ElfDate.getDate = function (edtp) {
+	return (edtp) ? ElfDate.from(edtp.value) : null;
+};
+
+/** @public
+* @function
+* @param {*} valA
+* @param {*} valB
+* @return {number} Return nagative value if A < B, positive value if A > B, and 0 if A === B
+*/
+ElfDate.compare = function (valA, valB) {
+	if(valA !== valB) {
+		valA = ElfDate.from(valA);
+		valB = ElfDate.from(valB);
+		if(valA) {
+			if(valB) {
+				if(valA < valB) {
+					return -1;
+				} else if(valA > valB) {
+					return 1;
+				}
+			} else {
+				return 1;
+			}
+		} else if(valB) {
+			return -1;
+		}
+	}
+	return 0;
+};
+/** @public
+* @function
+* @param {*} valA
+* @param {*} valB
+* @return {boolean} true if the two has the same value
+*/
+ElfDate.equal = function (valA, valB) {
+	return !ElfDate.compare(valA, valB);
+};
+
+/** Extract date part from the given date object to exclude time part and timezone. <br>
+* Use ElfDate.from to convert array back to date object.
+* @public
+* @function
+* @param {Date} d
+* @return {Array.<number>} Array with 3 numbers. Return null for invalid date
+*/
+ElfDate.extractDate = function (d) {
+	if(ElfDate.isValid(d)) {
+		return [d.getFullYear(), d.getMonth(), d.getDate()];
+	}
+	return null;
+};
+
+
+export default ElfDate;
+export { ElfDate };