@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

package/lib/column-dragging/es6/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColumnDragging";

package/lib/column-dragging/es6/index.js

@@ -0,0 +1 @@
+export * from "./ColumnDragging";

package/lib/column-format-dialog/lib/column-format-dialog.d.ts

@@ -1,4 +1,5 @@
 import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { JSXInterface } from "../../tr-grid-util/es6/jsx";
 import {
 	BasicElement,
 	html
@@ -60,5 +61,16 @@ declare class ColumnFormatDialog extends BasicElement {
 
 }
 
+declare global {
+	interface HTMLElementTagNameMap {
+		"column-format-dialog": ColumnFormatDialog;
+	}
+	namespace JSX {
+		interface IntrinsicElements {
+			"column-format-dialog": ColumnFormatDialog | JSXInterface.HTMLAttributes;
+		}
+	}
+}
+
 export { ColumnFormatDialog };
-export default ColumnFormatDialog;
+export default ColumnFormatDialog;

package/lib/column-selection-dialog/lib/column-selection-dialog.d.ts

@@ -1,12 +1,14 @@
 import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { JSXInterface } from "../../tr-grid-util/es6/jsx";
 import { BasicElement, html } from "@refinitiv-ui/core";
 import "@refinitiv-ui/elements/button";
-import "@refinitiv-ui/elements/tree";
+import { TreeRenderer } from "@refinitiv-ui/elements/tree";
 import "@refinitiv-ui/elements/dialog";
 import "@refinitiv-ui/elements/search-field";
 import translation from "./locale/translation.js";
 import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionDialog {
 
@@ -37,5 +39,16 @@ declare class ColumnSelectionDialog extends BasicElement {
 
 }
 
+declare global {
+	interface HTMLElementTagNameMap {
+		"column-selection-dialog": ColumnSelectionDialog;
+	}
+	namespace JSX {
+		interface IntrinsicElements {
+			"column-selection-dialog": ColumnSelectionDialog | JSXInterface.HTMLAttributes;
+		}
+	}
+}
+
 export { ColumnSelectionDialog };
-export default ColumnSelectionDialog;
+export default ColumnSelectionDialog;

package/lib/column-selection-dialog/lib/column-selection-dialog.js

@@ -1,12 +1,13 @@
 import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
 import { BasicElement, html } from "@refinitiv-ui/core";
 import "@refinitiv-ui/elements/button";
-import "@refinitiv-ui/elements/tree";
+import { TreeRenderer } from "@refinitiv-ui/elements/tree";
 import "@refinitiv-ui/elements/dialog";
 import "@refinitiv-ui/elements/search-field";
 import translation from "./locale/translation.js";
 import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /**
  * @typedef {Object} ColumnSelectionDialog~Config
@@ -499,6 +500,7 @@ class ColumnSelectionDialog extends BasicElement {
 		this._excludedLeftVisibleColumnList = []; // Visible left columns that is currently excluded from UI (eg. auto-generated column)
 		this._excludedRightVisibleColumnList = []; // Visible right columns that is currently excluded from UI
 		this._selectAllStatus = "";
+		this._treeDefualtRenderer = {};
 
 		this._isMovable = this._isMovable.bind(this);
 		this._treeValueChanged = this._treeValueChanged.bind(this);
@@ -515,7 +517,11 @@ class ColumnSelectionDialog extends BasicElement {
 		this._handleMouseover = this._handleMouseover.bind(this);
 		this._handleMouseout = this._handleMouseout.bind(this);
 		this._handleSelectAllHeaderClick = this._handleSelectAllHeaderClick.bind(this);
+		this._handleInfoIconClicked = this._handleInfoIconClicked.bind(this);
+		this._handleInfoIconMouseover = this._handleInfoIconMouseover.bind(this);
+		this._handleInfoIconMouseout = this._handleInfoIconMouseout.bind(this);
 		this._handleClick = this._handleClick.bind(this);
+		this._createTreeCustomRender = this._createTreeCustomRender.bind(this);
 		this._selectAllCheckedChanged = this._selectAllCheckedChanged.bind(this);
 		ElementObserver.addLanguageListener(this);
 	}
@@ -683,6 +689,52 @@ class ColumnSelectionDialog extends BasicElement {
 		this._visibleColumnsContainer.addEventListener('mouseout', this._handleMouseout);
 		this._visibleColumnsContainer.addEventListener('click', this._handleClick);
 		this._visibleColumnsContainer.addEventListener('dblclick', this._removeBtnClicked);
+
+		// icon custom renderer
+		if(this._descriptionBox) {
+			this._treeDefualtRenderer = new DefaultRenderer(this._tree);
+			this._tree.renderer = this._createTreeCustomRender;
+		}
+
+		// apply style for info icon
+		if(!this._styles) {
+			var styles = [
+				"ef-tree-item", [
+					"position: relative;"
+				],
+				".item", [
+					"display: flex;",
+					"justify-content: space-between;"
+				],
+				".div-icon", [
+					"position: absolute;",
+					"right: 0;",
+					"top: 0;",
+					"width: 24px;",
+					"height: 100%;",
+					"text-align: center;"
+				],
+				".info-icon", [
+					"display: block;",
+					"font-size: 18px;",
+					"height: 100%;",
+					"display: none"
+				],
+				"ef-tree-item:hover .item .info-icon", [ // hover item will show icon
+					"display: inline-block;",
+					"color: #ffffff;" // icon-color white both dark and light theme
+				],
+				"ef-tree-item .item .div-icon:hover", [ // hover icon will change icon background
+					"background-color: var(--color-scheme-primary);"
+				],
+				".bg-highligted", [ // effect ef-tree-item, when _handleInfoIconMouseover icon (disable highlighted background color)
+					"background-color: var(--color-scheme-tertiary);",
+					"color: var(--color-scheme-complementary);" // font text
+				]
+			];
+			this._styles = prettifyCss(styles);
+			injectCss(this._styles, this); // inject in column selection dialog dialog
+		}
 	}
 
 	/**
@@ -1188,10 +1240,7 @@ class ColumnSelectionDialog extends BasicElement {
 	_handleClick(e) {
 		var selectedElement = e.target; // Target should be ef-item
 
-		// click to display description
-		if (this._descriptionBox && this._initialColumnMap[selectedElement.value]) {
-			this._descriptionContainer.textContent = this._initialColumnMap[selectedElement.value].description;
-		}
+		this._showDescription(selectedElement.value);
 
 		if (!selectedElement.highlightable) {
 			return;
@@ -1219,6 +1268,98 @@ class ColumnSelectionDialog extends BasicElement {
 		this.requestUpdate();
 	}
 
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	 _handleInfoIconClicked(e) {
+		var targetElem = e.currentTarget;
+		var divItem = targetElem.parentNode;
+		var treeItem = divItem.parentNode;
+		var value = treeItem.item.value;
+		this._showDescription(value);
+		e.stopPropagation();
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	 _handleInfoIconMouseover(e) {
+		var targetElem = e.currentTarget;
+		var divItem = targetElem.parentNode;
+		var treeItem = divItem.parentNode;
+		if(treeItem.highlighted) {
+			treeItem.classList.add("bg-highligted");
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	 _handleInfoIconMouseout(e) {
+		var targetElem = e.currentTarget;
+		var divItem = targetElem.parentNode;
+		var treeItem = divItem.parentNode;
+		if(treeItem.highlighted) {
+			treeItem.classList.remove("bg-highligted");
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {string} value of mapping item for show description
+	 */
+	_showDescription(value) {
+		if(!value) {
+			return;
+		}
+		var rawValue = this._allItemMapping[value].rawValue; // restore rawValue for access initial value
+		if (this._descriptionBox && this._initialColumnMap[rawValue]) {
+			this._descriptionContainer.textContent = this._initialColumnMap[rawValue].description;
+		}
+	}
+
+	/**
+	* @private
+	* @param {object} item ef-tree-item element
+	* @param {object} composer data collection composer for elf API wrapper
+	* @param {object} element
+	* @return {Object} custom renderer element
+	*/
+	_createTreeCustomRender(item, composer, element) {
+		// Use default renderer to create/recycle element
+		element = this._treeDefualtRenderer(item, composer, element);
+		var isParent = composer.isItemParent(item);
+		var rawValue = item.rawValue;
+		if (!isParent && this._initialColumnMap[rawValue].description) {
+			var treeLabel = element._treeLabel;
+			if (!treeLabel) {
+				var div = document.createElement("div");
+				treeLabel = document.createElement("div");
+				element._treeLabel = treeLabel;
+				var iconEl = document.createElement("ef-icon");
+				var divIcon = document.createElement("div");
+				div.classList.add("item");
+				treeLabel.classList.add("tree-label");
+				iconEl.classList.add("info-icon");
+				iconEl.icon = "info";
+				divIcon.classList.add("div-icon");
+				divIcon.appendChild(iconEl);
+				divIcon.addEventListener("tap", this._handleInfoIconClicked );
+				divIcon.addEventListener("mouseover", this._handleInfoIconMouseover);
+				divIcon.addEventListener("mouseout", this._handleInfoIconMouseout);
+				div.appendChild(treeLabel);
+				div.appendChild(divIcon);
+				element.appendChild(div);
+			} else {
+				treeLabel = element.querySelector(".tree-label");
+			}
+			treeLabel.textContent = item.label;
+		}
+		return element;
+	}
 
 	/**
 	 * update up and down button