@refinitiv-ui/efx-grid 6.0.157 → 6.0.159

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

@@ -31,7 +31,10 @@ declare namespace ColumnSelectionDialog {
         height?: number|null,
         tags?: (string)[]|null,
         infoTooltip?: string|null,
-        searchPlaceholder?: string|null
+        searchPlaceholder?: string|null,
+        dialogLabel?: string|null,
+        availableItemsLabel?: string|null,
+        visibleItemsLabel?: string|null
     };
 
 }

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

@@ -30,6 +30,9 @@ import { isEmptyObject } from "../../tr-grid-util/es6/Util.js";
  * @property {Array.<string>=} tags=null All available tags for filtering
  * @property {string=} infoTooltip="" If specified, an informational icon will appear on the top with the given text as its tooltip
  * @property {string=} searchPlaceholder="Search" Placeholder text inside the search input.
+ * @property {string=} dialogLabel="" Dialog's title displayed in the title bar of the dialog.
+ * @property {string=} availableItemsLabel="" The title of the available column list on the left pane.
+ * @property {string=} visibleItemsLabel="" The title of the visible column list on the right pane.
 */
 
 /** Insert multiple items to the given array. This is an in-place modification.
@@ -581,6 +584,9 @@ class ColumnSelectionDialog extends BasicElement {
 		this._activeTags = null;
 		this._infoTooltip = "";
 		this._searchPlaceholder = "";
+		this._dialogLabel = "";
+		this._visibleItemsLabel = "";
+		this._availableItemsLabel = "";
 
 		this._allItemMapping = {};
 		this._filterItemMapping = {};
@@ -642,47 +648,48 @@ class ColumnSelectionDialog extends BasicElement {
 					this.data = this.config.data;
 				}
 			}
+			var config = this.config;
 			if(!changedProperties.has("visibleItems")) {
-				var visibleItems = this.config ? this.config.activeItems || this.config.visibleItems : null;
+				var visibleItems = config ? config.activeItems || config.visibleItems : null;
 				if(visibleItems) {
 					this.visibleItems = visibleItems;
 				}
 			}
 
-			if (this.config) {
+			if (config) {
 				// allow config.lang overides default lang
-				if(this.config.lang) {
-					this._lang = ElfUtil.toLangString(this.config.lang);
+				if(config.lang) {
+					this._lang = ElfUtil.toLangString(config.lang);
 				}
 
-				if (this.config.confirm) {
-					this.addEventListener('confirm', this.config.confirm);
+				if (config.confirm) {
+					this.addEventListener('confirm', config.confirm);
 				}
 
-				if (this.config.cancel) {
-					this.addEventListener('cancel', this.config.cancel);
+				if (config.cancel) {
+					this.addEventListener('cancel', config.cancel);
 				}
 
-				if (this.config.descriptionBox != null) {
-					this._descriptionBox = !!this.config.descriptionBox;
+				if (config.descriptionBox != null) {
+					this._descriptionBox = !!config.descriptionBox;
 				}
 
-				if (this.config.collapseAll != null) {
-					this._defaultExpanded = !this.config.collapseAll;
+				if (config.collapseAll != null) {
+					this._defaultExpanded = !config.collapseAll;
 				}
 
-				if (this.config.width != null) {
-					this._width = this.config.width;
+				if (config.width != null) {
+					this._width = config.width;
 				} else {
 					this._width = 0;
 				}
 
-				if (this.config.height != null) {
-					this._height = this.config.height;
+				if (config.height != null) {
+					this._height = config.height;
 				} else {
 					this._height = 0;
 				}
-				var userTags = this.config.tags;
+				var userTags = config.tags;
 				if (userTags != null) {
 					this._activeTags = null; // All existing active tags must be removed
 					if(Array.isArray(userTags) && userTags.length) {
@@ -695,14 +702,18 @@ class ColumnSelectionDialog extends BasicElement {
 						this._tagDefs = null;
 					}
 				}
-				if(this.config.infoTooltip != null) {
-					this._infoTooltip = this.config.infoTooltip ? this.config.infoTooltip : "";
+				if(config.infoTooltip != null) {
+					this._infoTooltip = config.infoTooltip ? config.infoTooltip : "";
 				}
-				if(this.config.searchPlaceholder != null) {
-					this._searchPlaceholder = this.config.searchPlaceholder ? this.config.searchPlaceholder : "";
+				if(config.searchPlaceholder != null) {
+					this._searchPlaceholder = config.searchPlaceholder ? config.searchPlaceholder : "";
 				}
 
-				this._defaultItems = this.config.defaultItems;
+				this._defaultItems = config.defaultItems;
+
+				this._dialogLabel = config.dialogLabel != null ? config.dialogLabel : "";
+				this._availableItemsLabel = config.availableItemsLabel != null ? config.availableItemsLabel : "";
+				this._visibleItemsLabel = config.visibleItemsLabel != null ? config.visibleItemsLabel : "";
 			}
 		}
 
@@ -728,11 +739,11 @@ class ColumnSelectionDialog extends BasicElement {
 
 		/* eslint-disable */
 		return html`
-			<ef-dialog header="${t["Column Selection"]}" id="columnDialog" lang="${lang}">
+			<ef-dialog header="${this._dialogLabel ? this._dialogLabel : t["Column Selection"]}" id="columnDialog" lang="${lang}">
 				<div class="container">
 					<div class="row">
 						<div class="side">
-							<label class="title">${t["Add / Remove Columns"]}
+							<label class="title">${this._availableItemsLabel ? this._availableItemsLabel : t["Add / Remove Columns"]}
 							${this._infoTooltip ? html`<ef-icon icon="info" id="info_icon" title="${this._infoTooltip}"></ef-icon>` : ""}
 							</label>
 						</div>
@@ -743,7 +754,7 @@ class ColumnSelectionDialog extends BasicElement {
 							<ef-search-field aria-label="search for columns" placeholder="${this._searchPlaceholder ? this._searchPlaceholder : t["Search"]}" id="searchInput"></ef-search-field>
 						</div>
 						<div class="side">
-							<label>${t["Show in this order"]}</label>
+							<label>${this._visibleItemsLabel ? this._visibleItemsLabel : t["Show in this order"]}</label>
 						</div>
 					</div>
 					<div class="row" id='listSection'>