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

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

@@ -0,0 +1,46 @@
+import { nestedObjectToArray, rgb2Hex } from "./Util.js";
+import { Deferred } from "./Deferred.js";
+import { ElementObserver } from "./ElementObserver.js";
+
+declare namespace ElfUtil {
+
+    const themeReady: Promise<any>|null;
+
+    const themeColors: { [key: string]:  string }|null;
+
+    function setElfVersion(ver: number): void;
+
+    function getElfVersion(): number;
+
+    function hasComponent(compName: string): number;
+
+    function hasTheme(themeName: string): boolean;
+
+    function getThemeName(optElem?: Element|null): string;
+
+    function isThemeLoaded(): boolean;
+
+    function getColors(): any;
+
+    function isHaloTheme(themeName?: string|null): boolean;
+
+    function isDSTheme(themeName?: string|null): boolean;
+
+    function injectIcons(configObj: any): void;
+
+    function getIconList(): (string)[];
+
+    function prepareIconPreloading(): (string)[]|null;
+
+    function setRTK(rtk: any): void;
+
+    function getMovementColorProfile(): string;
+
+    function reloadThemeColors(): Promise<any>|null;
+
+    function getThemeColors(themeChangedCb?: ((...params: any[]) => any)|null): Promise<any>|null;
+
+}
+
+export default ElfUtil;
+export { ElfUtil };

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

@@ -0,0 +1,637 @@
+import { nestedObjectToArray, rgb2Hex } from "./Util.js";
+import { Deferred } from "./Deferred.js";
+import { ElementObserver } from "./ElementObserver.js";
+
+/** Dialog supporting language (selection dialog, formater dialog and filter dialog)
+* @type {!Object.<string, boolean>}
+* @private
+* @const
+*/
+let LANGUAGE_SUPPORTS = {
+	"en": true,
+	"de": true,
+	"ja": true,
+	"zh": true,
+	"zh-Hant": true
+};
+
+/** @namespace */
+let 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 {string|null}
+* @private
+*/
+ElfUtil._profileName = null;
+/** @type {Array}
+* @private
+*/
+ElfUtil._callbacks = [];
+/** @type {boolean}
+* @private
+*/
+ElfUtil._observed = false;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._pendingResolve = false;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._themeLoaded = 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": "map-layers",
+			"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"];
+
+
+/** Set ELF version for testing purpose
+* @public
+* @function
+* @param {number} ver
+*/
+ElfUtil.setElfVersion = function (ver) {
+	ElfUtil._elfVersion = ver;
+};
+/** Check ELF version
+* @public
+* @function
+* @return {number}
+*/
+ElfUtil.getElfVersion = function () {
+	if (!ElfUtil._elfVersion) {
+		let val = 0;
+		if (window.EFX_GRID) {
+			let version = window.EFX_GRID.version;
+			version = version.split(".");
+			val = +version[0];
+		} else if (window.elf) {
+			if (window.elf.version) {
+				let 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) {
+	let val = ElfUtil._components[compName];
+	if (val == null) {
+		val = 0;
+		let ver = ElfUtil.getElfVersion();
+		if (compName) {
+			let 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";
+	}
+	let 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;
+};
+
+/** This method is using for unit test
+* @public
+* @ignore
+* @function
+* @param {string} themeName
+*/
+ElfUtil.setThemeName = function (themeName) {
+	ElfUtil._themeName = themeName;
+};
+
+/** @public
+* @function
+* @return {boolean}
+*/
+ElfUtil.isThemeLoaded = function () {
+	return ElfUtil._themeLoaded;
+};
+
+/** @public
+* @function
+* @return {Object}
+*/
+ElfUtil.getColors = function() {
+	return ElfUtil.themeColors;
+};
+
+/** 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 || themeName.indexOf("ds") >= 0; // Temporary workaround to make extensions support ds-theme
+	}
+
+	return false;
+};
+
+/** Check the current ELF theme is DS theme
+* @public
+* @function
+* @param {string=} themeName
+* @return {boolean}
+*/
+ElfUtil.isDSTheme = function (themeName) {
+	if(themeName == null) {
+		themeName = ElfUtil.getThemeName();
+	}
+	if(themeName) {
+		return themeName.indexOf("ds") >= 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
+*/
+ElfUtil.injectIcons = function (configObj) {
+	if (typeof configObj !== "object") { return; }
+
+	let theme = ElfUtil.getThemeName();
+	configObj.themeName = theme;
+
+	let ver = ElfUtil.getElfVersion();
+	configObj.elfVersion = ver;
+
+	let 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 () {
+	let iconStruct = ElfUtil._icons[ElfUtil.getThemeName()];
+	return iconStruct ? nestedObjectToArray(iconStruct) : [];
+};
+
+/** @private
+* @function
+*/
+ElfUtil._onIconPreloaded = function() {
+	if(ElfUtil._dummyIcon) {
+		let 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;
+		let iconList = ElfUtil.getIconList();
+		if(iconList.length) {
+			setTimeout(ElfUtil._onIconPreloaded, 10);
+			let 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) {
+	let result = "";
+	let 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) {
+	let elem = optElem || document.body;
+	if (window && elem.nodeType === 1) {
+		let computedStyle = window.getComputedStyle(elem);
+		for(let key in obj) {
+			let varName = obj[key];
+			if (varName && varName.match(/^--/)) {
+				obj[key] = computedStyle.getPropertyValue(varName).replace(/\"/g, ""); // eslint-disable-line
+			}
+		}
+	}
+	return obj || null;
+};
+
+/** @public
+* @param {Object} rtk
+*/
+ElfUtil.setRTK = function(rtk) {
+	if(rtk != null) {
+		ElfUtil._rtk = rtk;
+	}
+};
+
+/** 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");
+};
+
+/** @private
+* @param {Function} cb
+*/
+ElfUtil._addThemeChangedCallback = function(cb) {
+	let callbacks = ElfUtil._callbacks;
+	if(callbacks.indexOf(cb) < 0) {
+		callbacks.push(cb);
+	}
+};
+
+/** @public
+* @return {Promise<Object>} A promise of object of theme colors
+*/
+ElfUtil.reloadThemeColors = function() {
+	if (ElfUtil._deferred && ElfUtil._deferred.isFulfilled()) {
+		ElfUtil._profileName = "";
+		ElfUtil._themeLoaded = false;
+		ElfUtil.themeReady = null;
+		return ElfUtil.getThemeColors();
+	} else {
+		return ElfUtil.themeReady;
+	}
+};
+
+/** 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 or RTK.Settings is available. <br>
+* To re-request/reset theme colors, set ElfUtil.themeReady variable to null
+* @public
+* @param {Function=} themeChangedCb
+* @return {Promise<Object>} A promise of object of theme colors
+*/
+ElfUtil.getThemeColors = function(themeChangedCb) {
+	if(typeof themeChangedCb === "function") {
+		ElfUtil._addThemeChangedCallback(themeChangedCb);
+	}
+
+	if(ElfUtil.themeReady) {
+		return ElfUtil.themeReady;
+	}
+
+	let d = ElfUtil._deferred = new Deferred();
+	ElfUtil.themeReady = d.promise;
+
+	let profileName = ElfUtil.getMovementColorProfile();
+	if(profileName) {
+		if(profileName !== ElfUtil._profileName) {
+			setTimeout(ElfUtil._profileNameRetrieved, 100); // TODO: Find a proper way to ensure that theme is ready
+		} else {
+			ElfUtil._deferred.resolve(ElfUtil.themeColors);
+		}
+	} else {
+		let options = {
+			providerName: "Configuration",
+			settingName: "RDE_USER_CURRENT_TICK_COLOR"
+		};
+
+		let jet = window ? window.JET : null;
+		ElfUtil._themeLoaded = false;
+		if(ElfUtil._rtk && ElfUtil._rtk.Settings) {
+			ElfUtil._rtk.Settings.getAsync(options)
+				.then(ElfUtil._loadingProfileSuccess)
+				.catch(ElfUtil._loadingProfileFailure);
+		} else if(jet && jet.Settings) {
+			try {
+				jet.Settings.read(ElfUtil._loadingProfileSuccess, options);
+			} catch (err) {
+				ElfUtil._loadingProfileFailure();
+			}
+		} else {
+			setTimeout(ElfUtil._profileNameRetrieved, 100); // TODO: Find a proper way to ensure that theme is ready
+		}
+	}
+
+	return d.promise;
+};
+
+/** @private
+* @param {string} profileName
+*/
+let movementColorProfileChanged = function(profileName) {
+	if(profileName !== ElfUtil._profileName) {
+		ElfUtil._retrieveThemeColors(profileName);
+
+		if(ElfUtil._pendingResolve) {
+			ElfUtil._pendingResolve = false;
+			ElfUtil._deferred.resolve(ElfUtil.themeColors);
+		}
+
+		let callbacks = ElfUtil._callbacks;
+		for (let i = 0; i < callbacks.length; i++) {
+			callbacks[i]();
+		}
+	}
+};
+
+/** Get user's color profile from JET or RTK and set it to html tag (document.documentElement)
+* @private
+* @param {string} profileName Returned from JET.Settings or RTK.Settings
+*/
+ElfUtil._loadingProfileSuccess = function(profileName) {
+	if(profileName) {
+		document.documentElement.setAttribute("movement-color-profile", profileName.toLowerCase());
+	}
+
+	if(ElfUtil._observed) { // Let attribute listener does the job
+		ElfUtil._pendingResolve = true;
+	} else {
+		ElfUtil._profileNameRetrieved(profileName);
+	}
+};
+
+/** @private
+*/
+ElfUtil._loadingProfileFailure = function() {
+	ElfUtil._retrieveThemeColors();
+	if(!ElfUtil._observed) {
+		ElfUtil._observed = true;
+		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
+	}
+	ElfUtil._deferred.reject("Failed to get movement color profile from settings.");
+};
+
+/** @private
+*/
+ElfUtil._profileNameRetrieved = function() {
+	let profileName = ElfUtil.getMovementColorProfile();
+	ElfUtil._retrieveThemeColors(profileName);
+	if(!ElfUtil._observed) {
+		ElfUtil._observed = true;
+		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
+	}
+	ElfUtil._deferred.resolve(ElfUtil.themeColors);
+};
+
+/** Get theme colors from document
+* @public
+* @ignore
+* @param {string} profileName Movement color profile name
+*/
+ElfUtil._retrieveThemeColors = function(profileName) {
+	ElfUtil._themeLoaded = true;
+	ElfUtil._profileName = profileName;
+
+	let 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
+	let 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
+	let trElem = tableElem.insertRow(-1);
+	let tdElem = trElem.insertCell(-1);
+
+	document.body.appendChild(tableElem);
+	let trStyles = window.getComputedStyle(trElem);
+	colors["tableBg"] = trStyles.backgroundColor; // Usually equivalent to --color-scheme-tertiary
+
+	let 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"];
+};
+
+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)|null): void;
+
+    public removeEventListener(type: string, handler: ((...params: any[]) => any)|null): void;
+
+    public removeAllEventListeners(): void;
+
+    public hasListener(type: string): boolean;
+
+    public getListener(type: string, idx?: number|null): ((...params: any[]) => any)|null;
+
+    public addListener(obj: any, type: string): void;
+
+    public static preventDefault(e: Event|null): void;
+
+}
+
+declare function preventDefault(e: Event|null): void;
+
+export default EventDispatcher;
+export {EventDispatcher, preventDefault};