@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,163 @@
+/** @namespace */
+var 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-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) {
+		var 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
+		var 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
+		}
+	}
+	var 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 };

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

@@ -0,0 +1,33 @@
+import { nestedObjectToArray, rgb2Hex } from "./Util.js";
+import { Deferred } from "./Deferred.js";
+
+declare namespace ElfUtil {
+
+    const themeReady: Promise<any>;
+
+    const themeColors: { [key: string]:  string };
+
+    function getElfVersion(): number;
+
+    function hasComponent(compName: string): number;
+
+    function hasTheme(themeName: string): boolean;
+
+    function getThemeName(optElem?: Element): string;
+
+    function isHaloTheme(themeName?: string): boolean;
+
+    function injectIcons(configObj: any, optElem?: Element): void;
+
+    function getIconList(): (string)[];
+
+    function prepareIconPreloading(): (string)[];
+
+    function getThemeColors(): Promise<any>;
+
+    function getMovementColorProfile(): string;
+
+}
+
+export default ElfUtil;
+export { ElfUtil };

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

@@ -0,0 +1,458 @@
+import { nestedObjectToArray, rgb2Hex } from "./Util.js";
+import { Deferred } from "./Deferred.js";
+
+/** Dialog supporting language (selection dialog, formater dialog and filter dialog)
+* @type {!Object.<string, boolean>}
+* @private
+* @const
+*/
+var LANGUAGE_SUPPORTS = {
+	"en": true,
+	"de": true,
+	"ja": true,
+	"zh": true,
+	"zh-Hant": true
+};
+
+/** @namespace */
+var ElfUtil = {};
+/** @type {Deferred}
+* @private
+*/
+ElfUtil._deferred = null;
+/** @type {Promise<Object>}
+* @public
+*/
+ElfUtil.themeReady = null;
+/** Default theme colors from Solar Charcoal + American color profile
+* @type {!Object.<string, string>}
+* @private
+* @const
+*/
+ElfUtil._defaultColors = {
+	"up": "#39C46E",
+	"down": "#F5475B",
+	"level": "#C2C2C2",
+	"tickUp": "#39C46E",
+	"tickDown": "#F5475B",
+	"baseGrid": "#1A1A1C", // For CellPainter. In Solar Pearl, the value would be #FFFFFF
+	"baseText": "#C2C2C2", // For CellPainter. In Solar Pearl, the value would be #505050
+	"trackColor": "#FF9933" // For PercentBar.
+};
+/** @type {Object.<string, string>}
+* @public
+*/
+ElfUtil.themeColors = ElfUtil._defaultColors;
+/** @type {Object.<string, number>}
+* @private
+*/
+ElfUtil._components = {};
+/** @type {string}
+* @private
+*/
+ElfUtil._themeName = "";
+/** @type {number}
+* @private
+*/
+ElfUtil._elfVersion = 0;
+/** @type {Element}
+* @private
+*/
+ElfUtil._dummyIcon = null;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._iconLoaded = false;
+
+/** @type {Object.<string, Object>}
+* @private
+*/
+ElfUtil._icons = {
+	"elf-theme-halo": {
+		"rowGrouping": {
+			"expander": "down" // also used in rt-grid
+		},
+		"sorting": {
+			"ascending": "hollow-arrow-up",
+			"descending": "hollow-arrow-down",
+			"sortable": "sort-up-down"
+		},
+		"columnStack": {
+			"stack": "list",
+			"expand": "right",
+			"collapse": "left"
+		}
+	},
+	"elf-theme-solar": {
+		"columnStack": {
+			"stack": "list",
+			"expand": "right",
+			"collapse": "left"
+		}
+	}
+};
+// Elf v5 was change theme name to halo-theme and solar-theme
+ElfUtil._icons["halo-theme"] = ElfUtil._icons["elf-theme-halo"];
+ElfUtil._icons["solar-theme"] = ElfUtil._icons["elf-theme-solar"];
+
+/** Check ELF version
+* @public
+* @function
+* @return {number}
+*/
+ElfUtil.getElfVersion = function () {
+	if (!ElfUtil._elfVersion) {
+		var val = 0;
+		if (window.EFX_GRID) {
+			var version = window.EFX_GRID.version;
+			version = version.split(".");
+			val = +version[0];
+		} else if (window.elf) {
+			if (window.elf.version) {
+				var ver = window.elf.version.match(/\d/); // example version code: 4.0.1
+				if (ver && ver[0]) {
+					val = parseInt(ver[0], 10);
+				}
+			} else {
+				if (window.elf.customElements) {
+					val = 3;
+				} else if (window.customElements) {
+					val = 4;
+				}
+			}
+		} else if (window.Polymer) {
+			val = 1;
+		}
+		ElfUtil._elfVersion = val;
+	}
+
+	return ElfUtil._elfVersion;
+};
+
+/** Check if ELF component is available for usage. Returns version number of the available component.
+* @public
+* @function
+* @param {string} compName
+* @return {number}
+* @example
+* ElfUtil.hasComponent("ef-button"); // 1 or 3
+* ElfUtil.hasComponent("unknown-button"); // 0
+*/
+ElfUtil.hasComponent = function (compName) {
+	var val = ElfUtil._components[compName];
+	if (val == null) {
+		val = 0;
+		var ver = ElfUtil.getElfVersion();
+		if (compName) {
+			var elem;
+			if (ver === 1) {
+				elem = document.createElement(compName);
+				if (elem.is === compName) {
+					val = ver;
+				}
+			} else if (ver > 1) {
+				if (
+					window.customElements && window.customElements.get(compName) // Elf v3 v4
+					|| document.createElement(compName).constructor !== HTMLElement // In case doesn't polyfill elf
+				) {
+					val = ver;
+				}
+			}
+			ElfUtil._components[compName] = val; // TODO: Add safeguard for retriving version before ELF
+		}
+	}
+	return val;
+};
+
+
+/** Convert language code (ISO 639-1) and country code (ISO 3166-1 alpha-2) format to ISO 639-1
+* @param {string} lang string of language code or country code
+* @returns {string} language code after convert to ISO 639-1 (2 character) or empty string
+* @example
+* ElfUtil.toLangString("ja-JP"); // convert to "ja"
+*/
+ElfUtil.toLangString = function (lang) {
+	if(!lang) return "";
+	lang = lang.toLowerCase();
+	if(lang === "zh-hant") {
+		return "zh-Hant";
+	}
+	var mainLang = lang.replace(/-.*/, "");
+	if(LANGUAGE_SUPPORTS[mainLang]){
+		return mainLang;
+	}
+	return "";
+};
+
+/** Check if ELF theme is available for usage. Returns true if theme is available.
+* @public
+* @function
+* @param {string} themeName
+* @return {boolean}
+* @example
+* ElfUtil.hasTheme("elf-theme-solar"); // true or false
+*/
+ElfUtil.hasTheme = function (themeName) {
+	return themeName === ElfUtil.getThemeName();
+};
+
+/** Check the current ELF theme. If not available, return empty string.
+* @public
+* @function
+* @param {Element=} optElem Deprecated param: Function will always use <html> instead
+* @return {string}
+*/
+ElfUtil.getThemeName = function (optElem) {
+	if (!ElfUtil._themeName) {
+		// get theme name directly from element <html> --> document.documentElement
+		ElfUtil._themeName = ElfUtil.getCssVariable("--theme-name", document.documentElement);
+	}
+
+	return ElfUtil._themeName;
+};
+
+/** Check the current ELF theme is Halo theme
+* @public
+* @function
+* @param {string=} themeName
+* @return {boolean}
+*/
+ElfUtil.isHaloTheme = function (themeName) {
+	if(themeName == null) {
+		themeName = ElfUtil.getThemeName();
+	}
+	if(themeName) {
+		return themeName.indexOf("halo") >= 0;
+	}
+
+	return false;
+};
+
+/** Inject appropriate icon list (based on theme and ELF version) to the given object.
+* @public
+* @function
+* @param {Object} configObj Object to mutate
+* @param {Element=} optElem Deprecated param: will no longer use anymore
+*/
+ElfUtil.injectIcons = function (configObj, optElem) {
+	if (typeof configObj !== "object") { return; }
+
+	var theme = ElfUtil.getThemeName();
+	configObj.themeName = theme;
+
+	var ver = ElfUtil.getElfVersion();
+	configObj.elfVersion = ver;
+
+	var icons = ElfUtil._icons[theme];
+	if (icons) {
+		configObj.icons = icons;
+	}
+};
+
+/** Get icons array list
+* @public
+* @function
+* @returns {!Array.<string>} Always return a list of icons for the existing theme
+*/
+ElfUtil.getIconList = function () {
+	var iconStruct = ElfUtil._icons[ElfUtil.getThemeName()];
+	return iconStruct ? nestedObjectToArray(iconStruct) : [];
+};
+
+/** @private
+* @function
+*/
+ElfUtil._onIconPreloaded = function() {
+	if(ElfUtil._dummyIcon) {
+		var pn = ElfUtil._dummyIcon.parentNode;
+		if(pn) {
+			pn.removeChild(ElfUtil._dummyIcon);
+		}
+		ElfUtil._dummyIcon = null;
+	}
+};
+/** Prepare and get icons array list. This method ensures that preloading can be executed only once.
+* @public
+* @function
+* @returns {Array.<string>} Return null if there is no icon to be preloaded. Otherwise, a list of icons is returned.
+*/
+ElfUtil.prepareIconPreloading = function() {
+	if(!ElfUtil._iconLoaded) {
+		ElfUtil._iconLoaded = true;
+		var iconList = ElfUtil.getIconList();
+		if(iconList.length) {
+			setTimeout(ElfUtil._onIconPreloaded, 10);
+			var dummyIcon = ElfUtil._dummyIcon = document.createElement("ef-icon");
+			dummyIcon.style.transform = "scale(0)";
+			document.body.appendChild(dummyIcon);
+			return iconList;
+		}
+	}
+	return null;
+};
+
+/** Gets any defined css variables by name/key
+* @param {string} varName css variable names (with leading --)
+* @param {Element=} optElem target element, fallback to document body
+* @returns {string} CSS variable
+* @example
+* ElfUtil.getCssVariable("--valid-name");
+* ElfUtil.getCssVariable("--valid-name", spanElement);
+*/
+ElfUtil.getCssVariable = function (varName, optElem) {
+	var result = "";
+	var elem = optElem || document.body;
+	if (window && typeof varName === "string" && elem.nodeType === 1) {
+		if (varName.match(/^--/)) {
+			result = window.getComputedStyle(elem).getPropertyValue(varName);
+			result = result.replace(/[\"\']/g, "");
+		}
+	}
+	return result;
+};
+/** Gets multiple CSS variables from an object map for better performance
+* @param {Object.<string, string>} obj Key can be anything, while value is the CSS variable name
+* @param {Element=} optElem target element, fallback to document body
+* @returns {Object} Returns the same given object
+* @example
+* ElfUtil.getCssVariables({
+*   "name1": "--var1",
+*   "name2": "--var2"
+* }, spanElement); // Css varriable names will be replaced with their value
+*/
+ElfUtil.getCssVariables = function (obj, optElem) {
+	var elem = optElem || document.body;
+	if (window && elem.nodeType === 1) {
+		var computedStyle = window.getComputedStyle(elem);
+		for(var key in obj) {
+			var varName = obj[key];
+			if (varName && varName.match(/^--/)) {
+				obj[key] = computedStyle.getPropertyValue(varName).replace(/\"/g, ""); // eslint-disable-line
+			}
+		}
+	}
+	return obj || null;
+};
+
+/** Gets current theme colors from the document and returns a promise. <br>
+* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists. <br>
+* To re-request/reset theme colors, set ElfUtil.themeReady variable to null
+* @public
+* @return {Promise<Object>} A promise of object of theme colors
+*/
+ElfUtil.getThemeColors = function() {
+	if(ElfUtil.themeReady) {
+		return ElfUtil.themeReady;
+	}
+	var d = ElfUtil._deferred = new Deferred();
+	ElfUtil.themeReady = d.promise;
+
+	var jet = window ? window.JET : null;
+	if(jet && jet.Settings) {
+		try {
+			jet.Settings.read(ElfUtil._onColorProfile, {
+				providerName: "Configuration",
+				settingName: "RDE_USER_CURRENT_TICK_COLOR"
+			});
+		} catch (err) {
+			d.reject("Cannot read JET's settings");
+		}
+	} else {
+		setTimeout(ElfUtil._retrieveThemeColors, 100); // TODO: Find a proper way to ensure that theme is ready
+	}
+	return d.promise;
+};
+
+/** Get user's color profile from JET and set it to html tag (document.documentElement)
+* @private
+* @param {string} colorProfile Returned from JET.Settings
+*/
+ElfUtil._onColorProfile = function (colorProfile) {
+	if(colorProfile) {
+		document.documentElement.setAttribute("movement-color-profile", colorProfile.toLowerCase());
+	}
+	ElfUtil._retrieveThemeColors();
+};
+/** Get current profile name set on the root html element (document.documentElement)
+* @public
+* @return {string} Current profile name
+*/
+ElfUtil.getMovementColorProfile = function() {
+	return document.documentElement.getAttribute("movement-color-profile");
+};
+
+/** Get theme colors from document
+* @private
+*/
+ElfUtil._retrieveThemeColors = function() {
+	var colors = ElfUtil.themeColors = ElfUtil.getCssVariables({
+		"primary": "--color-scheme-primary", // Usually used in headers, and selection
+		"secondary": "--color-scheme-secondary",
+		"tertiary": "--color-scheme-tertiary", // Usually black or white
+		"complementary": "--color-scheme-complementary", // Usually black or white
+		"up": "--color-scheme-positive",
+		"down": "--color-scheme-negative",
+		"level": "--color-scheme-neutral",
+		"tickUp": "--color-scheme-tickup",
+		"tickDown": "--color-scheme-tickdown"
+	});
+	if(!colors["up"]) {
+		colors["up"] = ElfUtil._defaultColors["up"];
+		colors["down"] = ElfUtil._defaultColors["down"];
+		colors["level"] = ElfUtil._defaultColors["level"];
+		colors["tickUp"] = ElfUtil._defaultColors["tickUp"];
+		colors["tickDown"] = ElfUtil._defaultColors["tickDown"];
+	}
+
+	// To be consistent with Elf theme variables
+	colors["positive"] = colors["up"];
+	colors["negative"] = colors["down"];
+	colors["neutral"] = colors["level"];
+
+	// Retrieve table styles to be used in grid and extensions
+	var tableElem = document.createElement("table");
+	tableElem.style.visibility = "hidden";
+	tableElem.style.position = "fixed";
+	tableElem.style.left = "0"; // Activate fixed position
+	tableElem.style.top = "0";
+	tableElem.style.width = "0"; // Prevent creating scrollbar
+	var trElem = tableElem.insertRow(-1);
+	var tdElem = trElem.insertCell(-1);
+
+	document.body.appendChild(tableElem);
+	var trStyles = window.getComputedStyle(trElem);
+	colors["tableBg"] = trStyles.backgroundColor; // Usually equivalent to --color-scheme-tertiary
+
+	var tdStyles = window.getComputedStyle(tdElem);
+	colors["tableText"] = tdStyles.color; // Usually equivalent to --color-scheme-neutral
+	colors["tableBorder"] = tdStyles.borderColor;
+	if(colors["tableText"] === colors["tableBorder"]) {
+		// trElem.className = "pearl";
+		tdElem.className = "tr-lg";
+		tdStyles = window.getComputedStyle(tdElem);
+		colors["tableBg"] = tdStyles.backgroundColor;
+		colors["tableText"] = tdStyles.color;
+		colors["tableBorder"] = tdStyles.borderColor; // In Solar Pearl, the value would be #DADDE0
+		if(colors["tableText"] === colors["tableBorder"]) { // Last fallback for non ELF coloring
+			colors["tableBg"] = ElfUtil._defaultColors["baseGrid"];
+			colors["tableText"] = ElfUtil._defaultColors["baseText"];
+			colors["tableBorder"] = "";
+		}
+	}
+	// WARNING: Computed styles return rgb/rgba color format instead of hex format
+	colors["tableBg"] = rgb2Hex(colors["tableBg"]);
+	colors["tableText"] = rgb2Hex(colors["tableText"]);
+	colors["tableBorder"] = rgb2Hex(colors["tableBorder"]);
+	document.body.removeChild(tableElem);
+
+	// For CellPainter backward compatability
+	colors["baseGrid"] = colors["tableBg"];
+	colors["baseText"] = colors["tableText"];
+	colors["trackColor"] = colors["primary"] || ElfUtil._defaultColors["trackColor"];
+
+	ElfUtil._deferred.resolve(colors);
+};
+
+
+export default ElfUtil;
+export { ElfUtil };

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

@@ -0,0 +1,26 @@
+
+
+declare class EventDispatcher {
+
+    constructor();
+
+    public addEventListener(type: string, handler: ((...params: any[]) => any)): void;
+
+    public removeEventListener(type: string, handler: ((...params: any[]) => any)): void;
+
+    public removeAllEventListeners(): void;
+
+    public hasListener(type: string): boolean;
+
+    public getListener(type: string, idx?: number): ((...params: any[]) => any);
+
+    public addListener(obj: any, type: string): void;
+
+    public static preventDefault(e: Event): void;
+
+}
+
+declare function preventDefault(e: Event): void;
+
+export default EventDispatcher;
+export {EventDispatcher, preventDefault};