@refinitiv-ui/efx-grid 6.0.55 → 6.0.57

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

@@ -5,10 +5,12 @@ import "@refinitiv-ui/elements/button";
 import { TreeRenderer as DefaultRenderer } from "@refinitiv-ui/elements/tree";
 import "@refinitiv-ui/elements/dialog";
 import "@refinitiv-ui/elements/search-field";
+import "@refinitiv-ui/elements/pill";
+import "@refinitiv-ui/elements/item";
 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";
+import { injectCss, prettifyCss, isEmptyObject } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionDialog {
 
@@ -26,7 +28,10 @@ declare namespace ColumnSelectionDialog {
         middleSeparator?: string|null,
         collapseAll?: boolean|null,
         width?: number|null,
-        height?: number|null
+        height?: number|null,
+        tags?: (string)[]|null,
+        infoTooltip?: string|null,
+        searchPlaceholder?: string|null
     };
 
 }

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

@@ -4,10 +4,12 @@ import "@refinitiv-ui/elements/button";
 import { TreeRenderer as DefaultRenderer } from "@refinitiv-ui/elements/tree";
 import "@refinitiv-ui/elements/dialog";
 import "@refinitiv-ui/elements/search-field";
+import "@refinitiv-ui/elements/pill";
+import "@refinitiv-ui/elements/item";
 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";
+import { injectCss, prettifyCss, isEmptyObject } from "../../tr-grid-util/es6/Util.js";
 
 /**
  * @typedef {Object} ColumnSelectionDialog~Config
@@ -25,6 +27,9 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
  * @property {boolean=} collapseAll=false Default collapse property applies to all groups
  * @property {number=} width Specify width of the dialog, with the minimum width of 490px
  * @property {number=} height Specify height of the dialog
+ * @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.
 */
 
 /** Insert multiple items to the given array. This is an in-place modification.
@@ -88,37 +93,35 @@ const isEnabledItem = function (item) {
 	return (item && !item.disabled) ? true : false;
 };
 
-/** search item label contain specific text
+
+/** Recursively search through tree structures of items
 * @private
 * @function
-* @param {Array} items
-* @param {string} keyword keyword in lower case
-* @return {Array}
+* @param {!Array} items
+* @param {string|Array.<string>} input User input that has been validated
+* @param {!Function} matchingLogic
+* @return {!Array}
 */
-const filterSearch = function (items, keyword) {
-	var c = items.length;
-	if (c === 0 || !keyword) return items;
-
-	var filtered = [];
-	for (var i = 0; i < c; i++) {
+const _recursivelySearch = function (items, input, matchingLogic) {
+	var results = [];
+	var itemCount = items ? items.length : 0;
+	for (var i = 0; i < itemCount; i++) {
 		var item = items[i];
 		if (item.items) {
-			var result = filterSearch(item.items, keyword);
+			var result = _recursivelySearch(item.items, input, matchingLogic);
 			if (result.length > 0) {
 				item = Object.assign({}, item); // for header - clone new object to prevent mutate original
 				item.items = result;
-				filtered.push(item);
+				results.push(item);
 			}
-		} else if (item.label.toLowerCase().includes(keyword)) {
-			filtered.push(item);
+		} else if (matchingLogic(item, input)) {
+			results.push(item);
 		}
 	}
 
-	return filtered;
+	return results;
 };
 
-
-
 /** @private
 * @function
 * @param {Object} item
@@ -293,7 +296,9 @@ const _toCoralTreeItem = function (colObj, parent, defaultExpanded) {
 			value: currentId,
 			selected: false,
 			disabled: colObj.disabled == true,
-			stationary: colObj.stationary == true
+			stationary: colObj.stationary == true,
+			lowerCase: label.toLowerCase(),
+			tags: _toTagList(colObj.tags)
 		};
 	}
 };
@@ -301,7 +306,7 @@ const _toCoralTreeItem = function (colObj, parent, defaultExpanded) {
 /** Coral item requires label and value. So we need to convert column object to coral item
 * @private
 * @param {Object} item
-* @return {Object}
+* @return {!Object}
 */
 const _toCoralItem = function(item) {
 	return {
@@ -309,7 +314,9 @@ const _toCoralItem = function(item) {
 		value: item.value,
 		selected: false,
 		disabled: item.disabled,
-		stationary: item.stationary
+		stationary: item.stationary,
+		lowerCase: item.label.toLowerCase(),
+		tags: _toTagList(item.tags)
 	};
 };
 /** Valid item must have an id or a field
@@ -450,7 +457,7 @@ const _countAutoGenerated = function (items) {
 * @private
 * @param {Array} items
 * @param {Array} visibleList
-* @return {Array}
+* @return {!Array}
 */
 const _getVisibleItems = function (items, visibleList) {
 	visibleList = visibleList || [];
@@ -470,6 +477,71 @@ const _getVisibleItems = function (items, visibleList) {
 	return visibleList;
 };
 
+/** Tag value will be used for searching and matching
+* @private
+* @param {string} tag
+* @param {number} idx
+* @return {!Object}
+*/
+const _toTagDefinition = function(tag, idx) {
+	var tagKeyword = tag.toLowerCase(); // For searching and filtering
+
+	var tagPill = document.createElement("ef-pill");
+	tagPill._keyword = tagKeyword;
+	tagPill._tagIndex = idx;
+
+	tagPill.textContent = tag;
+	tagPill.setAttribute("clears", "");
+
+	return {
+		label: tag,
+		value: tagKeyword,
+		element: tagPill
+	};
+};
+/**
+* @private
+* @param {string} str
+* @return {!Object}
+*/
+const _toLowerCase = function(str) {
+	return str ? str.toLowerCase() : "";
+};
+/** Tag value will be used for searching and matching
+* @private
+* @param {string|Array} tag
+* @return {Array.<string>}
+*/
+const _toTagList = function(tag) {
+	if(tag) {
+		if(Array.isArray(tag)) {
+			return tag.map(_toLowerCase);
+		} else {
+			if(typeof tag !== "string") {
+				tag = tag + "";
+			}
+			return [tag.toLowerCase()];
+		}
+	}
+	return null;
+};
+/** @type {Object.<number, number>}
+* @private
+*/
+const NON_CHAR_KEYS = {
+	9: 1, // TAB
+	13: 1, // ENTER
+	16: 1, // SHIFT
+	17: 1, // CTRL
+	18: 1, // ALT
+	35: 1, // END
+	36: 1, // HOME
+	37: 1, // LEFT
+	38: 1, // UP
+	39: 1, // RIGHT
+	40: 1 // DOWN
+};
+
 /**
  * @class
  * @public
@@ -502,9 +574,13 @@ class ColumnSelectionDialog extends BasicElement {
 		this._pendingTreeRefresh = false;
 		this._pendingResetSearchInput = false;
 		this._middleSeparator = "";
+		this._defaultExpanded = true;
 		this._width = 0;
 		this._height = 0;
-		this._defaultExpanded = true;
+		this._tagDefs = null;
+		this._activeTags = null;
+		this._infoTooltip = "";
+		this._searchPlaceholder = "";
 
 		this._allItemMapping = {};
 		this._filterItemMapping = {};
@@ -521,7 +597,8 @@ class ColumnSelectionDialog extends BasicElement {
 		this._treeValueChanged = this._treeValueChanged.bind(this);
 		this._treeExpandedChanged = this._treeExpandedChanged.bind(this);
 		this._removeBtnClicked = this._removeBtnClicked.bind(this);
-		this._onSearchInputChanged = this._onSearchInputChanged.bind(this);
+		this._onSearchInputKeyDown = this._onSearchInputKeyDown.bind(this);
+		this._onSearchInputKeyUp = this._onSearchInputKeyUp.bind(this);
 		this._restoreDefault = this._restoreDefault.bind(this);
 		this._onConfirm = this._onConfirm.bind(this);
 		this._onCancel = this._onCancel.bind(this);
@@ -538,6 +615,9 @@ class ColumnSelectionDialog extends BasicElement {
 		this._handleClick = this._handleClick.bind(this);
 		this._createTreeCustomRender = this._createTreeCustomRender.bind(this);
 		this._selectAllCheckedChanged = this._selectAllCheckedChanged.bind(this);
+
+		this._advancedMatching = this._advancedMatching.bind(this);
+		this._onClearingTagPill = this._onClearingTagPill.bind(this);
 		ElementObserver.addLanguageListener(this);
 	}
 
@@ -600,6 +680,25 @@ class ColumnSelectionDialog extends BasicElement {
 				} else {
 					this._height = 0;
 				}
+				var userTags = this.config.tags;
+				if (userTags != null) {
+					this._activeTags = null; // All existing active tags must be removed
+					if(Array.isArray(userTags) && userTags.length) {
+						this._tagDefs = userTags.map(_toTagDefinition);
+						var tagCount = this._tagDefs.length;
+						for(var i = 0; i < tagCount; ++i) {
+							this._tagDefs[i].element.addEventListener("clear", this._onClearingTagPill);
+						}
+					} else {
+						this._tagDefs = null;
+					}
+				}
+				if(this.config.infoTooltip != null) {
+					this._infoTooltip = this.config.infoTooltip ? this.config.infoTooltip : "";
+				}
+				if(this.config.searchPlaceholder != null) {
+					this._searchPlaceholder = this.config.searchPlaceholder ? this.config.searchPlaceholder : "";
+				}
 
 				this._defaultItems = this.config.defaultItems;
 			}
@@ -630,15 +729,14 @@ class ColumnSelectionDialog extends BasicElement {
 				<div class="container">
 					<div class="row">
 						<div class="side">
-							<label class="title">${t["Add / Remove Columns"]}</label>
-						</div>
-						<div class="side">
-							</---to keep layout--->
+							<label class="title">${t["Add / Remove Columns"]}
+							<ef-icon icon="info" id="info_icon" title="${this._infoTooltip}"></ef-icon></label>
 						</div>
+						<div class="side"></div>
 					</div>
 					<div class="row">
 						<div class="side">
-							<ef-search-field placeholder="${t["Search"]}" id="searchInput"></ef-search-field>
+							<ef-search-field placeholder="${this._searchPlaceholder ? this._searchPlaceholder : t["Search"]}" id="searchInput"></ef-search-field>
 						</div>
 						<div class="side">
 							<label>${t["Show in this order"]}</label>
@@ -646,6 +744,7 @@ class ColumnSelectionDialog extends BasicElement {
 					</div>
 					<div class="row" id='listSection'>
 						<div class="side" id="allColumnsSide">
+							<div id="tags_div"></div>
 							<div id="allColumns">
 								<ef-item id="treeNoResult" class="no-results" label="${t["No results found"]}"></ef-item>
 								<ef-header level="1" id="selectAllHeader">
@@ -705,13 +804,16 @@ class ColumnSelectionDialog extends BasicElement {
 		this._columnDialog = shadowRoot.getElementById('columnDialog');
 		this._upItem = shadowRoot.getElementById('upItem');
 		this._downItem = shadowRoot.getElementById('downItem');
-		this._visibleColumnsContainer = this.shadowRoot.getElementById('visibleColumns');
-		this._treeContainer = this.shadowRoot.getElementById('treeContainer');
-		this._descriptionContainer = this.shadowRoot.getElementById('descriptionContainer');
+		this._visibleColumnsContainer = shadowRoot.getElementById('visibleColumns');
+		this._treeContainer = shadowRoot.getElementById('treeContainer');
+		this._descriptionContainer = shadowRoot.getElementById('descriptionContainer');
+		this._tagsDiv = shadowRoot.getElementById('tags_div');
+		this._infoIcon = shadowRoot.getElementById('info_icon');
 
 		this._tree.addEventListener('value-changed', this._treeValueChanged);
 		this._tree.addEventListener('expanded-changed', this._treeExpandedChanged);
-		this._searchInput.addEventListener('keyup', this._onSearchInputChanged);
+		this._searchInput.addEventListener('keydown', this._onSearchInputKeyDown);
+		this._searchInput.addEventListener('keyup', this._onSearchInputKeyUp);
 		this._columnDialog.addEventListener('cancel', this._onCancel);
 		this._selectAllCheckbox.addEventListener('checked-changed', this._selectAllCheckedChanged);
 		this._selectAllHeader.addEventListener('click', this._handleSelectAllHeaderClick);
@@ -791,7 +893,7 @@ class ColumnSelectionDialog extends BasicElement {
 		if (this._pendingResetSearchInput) {
 			this._pendingResetSearchInput = false;
 			this._searchInput.value = '';
-			this._updateSearchResult(this._searchInput.value);
+			this._updateSearchResult(this._searchInput.value); // TODO: Use empty string instead. This also trigger requestUpdate again
 		}
 
 		if(this._pendingScroll) {
@@ -816,6 +918,34 @@ class ColumnSelectionDialog extends BasicElement {
 		this._columnDialog.style.width = this._width  ? this._width + "px" : "";
 
 		this._descriptionContainer.toggleAttribute('hide', !this._descriptionBox);
+
+		var activeTags = this._activeTags;
+		if(activeTags) {
+			var tagDefs = this._tagDefs;
+			var tagCount = tagDefs.length;
+			var tagDef;
+			for(var i = 0; i < tagCount; ++i) {
+				tagDef = tagDefs[i];
+				if(!activeTags[tagDef.value]) {
+					var pn = tagDef.element.parentNode;
+					if(pn){
+						pn.removeChild(tagDef.element);
+					}
+				}
+			}
+			for(var tagKeyword in activeTags) {
+				tagDef = tagDefs[activeTags[tagKeyword]];
+				if(tagDef) {
+					this._tagsDiv.appendChild(tagDef.element);
+				}
+			}
+		} else {
+			while(this._tagsDiv.lastChild) {
+				this._tagsDiv.removeChild(this._tagsDiv.lastChild);
+			}
+		}
+
+		this._infoIcon.style.display = this._infoTooltip ? "" : "none";
 	}
 
 	/**
@@ -836,6 +966,7 @@ class ColumnSelectionDialog extends BasicElement {
 		var config = this.config || {};
 		var visibleItems = this.visibleItems;
 		var defaultItems = this._defaultItems;
+		this._activeTags = null; // Data has been changed, so all existing active tags must be removed
 
 		if (this.data) {
 			allItems = this.data;
@@ -1170,34 +1301,199 @@ class ColumnSelectionDialog extends BasicElement {
 		this._moveVisibleColumnsElement(_getSelectedItemIndexes(this._visibleColumnList), 'Down');
 	}
 
-	/**
-	 * Set filtering result to "searchResult" element
-	 * @private
-	 * @param {object} e - event object
-	 */
-	_onSearchInputChanged(e) {
+	/** @private
+	* @param {Event} e
+	*/
+	_onSearchInputKeyDown(e) {
+		var keyCode = e.keyCode;
+		if(keyCode !== 9) { // Tab key
+			return;
+		}
+		if(!this._tagDefs) {
+			return;
+		}
+		// Advanced search mode
+		e.stopPropagation();
+		e.preventDefault();
+		var str = e.currentTarget.value;
+		str = str.trim().toLowerCase();
+		var tagCount = this._tagDefs.length;
+		for(var i = 0; i < tagCount; ++i) {
+			var tagDef = this._tagDefs[i];
+			var tagKeyword = tagDef.value;
+			if(tagKeyword.indexOf(str) >= 0) {
+				if(this._addTagPill(tagKeyword, i)) {
+					this._searchInput.value = "";
+					this._updateSearchResult("");
+					break;
+				}
+			}
+		}
+	}
+	/** @private
+	* @param {Event} e
+	*/
+	_onSearchInputKeyUp(e) {
+		var keyCode = e.keyCode;
+		if(NON_CHAR_KEYS[keyCode]) {
+			// No search should be changed by any of these key codes (e.g., enter, esc, tab, shift, ctrl, arrow keys)
+			return;
+		}
+
 		var firstItem = this._searchInput.data && this._searchInput.data[0];
 		if (firstItem) {
-			this._searchInput.scrollToItem(firstItem);
+			this._searchInput.scrollToItem(firstItem); // Scroll to top
 		}
+
 		this._updateSearchResult(e.target.value);
 	}
 
+	/** @private
+	* @param {string} tagKeyword String for searching and filtering
+	* @param {number|string} id For refering back to tag definitions
+	* @return {boolean} Returns true if there is any change
+	*/
+	_addTagPill(tagKeyword, id) {
+		if(this._activeTags) {
+			if(this._activeTags[tagKeyword]) {
+				return false;
+			}
+		} else {
+			this._activeTags = {};
+		}
+		this._activeTags[tagKeyword] = id != null ? id + "" : "-1";
+		return true;
+	}
+	/** @private
+	* @param {string} tagKeyword
+	* @return {boolean} Returns true if there is any change
+	*/
+	_removeTagPill(tagKeyword) {
+		if(!this._activeTags) {
+			return false;
+		}
+		if(!this._activeTags[tagKeyword]) {
+			return false;
+		}
+
+		delete this._activeTags[tagKeyword];
+		if(isEmptyObject(this._activeTags)) {
+			this._activeTags = null;
+		}
+		return true;
+	}
+	/** @private
+	* @return {boolean} Returns true if there is any change
+	*/
+	_removeAllTagPills() {
+		if(!this._activeTags) {
+			return false;
+		}
+		this._activeTags = null;
+		return true;
+	}
+	/** @private
+	* @param {Event} e
+	*/
+	_onClearingTagPill(e) {
+		var tagPill = e.currentTarget;
+		if(this._removeTagPill(tagPill._keyword)) {
+			this._updateSearchResult();
+		}
+	}
+
+	/** @private
+	* @function
+	* @param {Object} item
+	* @param {string} keyword
+	* @return {boolean}
+	*/
+	_simpleMatching(item, keyword) {
+		if(item.lowerCase) {
+			return item.lowerCase.includes(keyword);
+		} else {
+			return false;
+		}
+	}
+	/** @private
+	* @function
+	* @param {Object} item
+	* @param {Array.<string>} keywords
+	* @return {boolean}
+	*/
+	_advancedMatching(item, keywords) {
+		if(this._activeTags) {
+			var tags = item.tags;
+			var tagCount = tags ? tags.length : 0;
+			var tagMatched = false;
+			for(var i = 0; i < tagCount; ++i) {
+				if(this._activeTags[tags[i]]) {
+					tagMatched = true;
+					break;
+				}
+			}
+
+			if(!tagMatched) {
+				return false;
+			}
+		}
+
+		var lowerCase = item.lowerCase;
+		if(!lowerCase) {
+			return false;
+		}
+
+		var wordCount = keywords.length;
+		for(var j = 0; j < wordCount; ++j) {
+			if(!lowerCase.includes(keywords[j])) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	/** Search through tree structures of items
+	* @private
+	* @function
+	* @param {Array} items
+	* @param {string} keyword Keyword
+	* @return {Array}
+	*/
+	_filterSearch(items, keyword) {
+		if(!keyword && !this._activeTags) {
+			return items;
+		}
+		var itemCount = items.length;
+		if(!itemCount) {
+			return items;
+		}
+
+		keyword = keyword.toLowerCase();
+		if(this._tagDefs) {
+			var keywords = keyword.split(/ +/);
+			return _recursivelySearch(items, keywords, this._advancedMatching);
+		}
+
+		return _recursivelySearch(items, keyword, this._simpleMatching);
+	}
+
 	/**
 	 * @private
 	 * @param {string} value - search query
 	 */
 	_updateSearchResult(value) {
-		if(!value) {
+		var keyword = value ? value.trim() : "";
+		if(!keyword && !this._activeTags) {
 			this._filteredColumnList = this._allColumnList;
 			this._filterItemMapping = this._allItemMapping;
 		} else {
-			this._filteredColumnList = filterSearch(this._allColumnList, value.toLocaleLowerCase());
+			// TODO: Avoid filter for the same active keyword
+			this._filteredColumnList = this._filterSearch(this._allColumnList, keyword);
 			this._filterItemMapping = _createMapping(this._filteredColumnList, 'value');
 		}
 
+		// TODO: Avoid unnecessary update
 		this._pendingTreeRefresh = true;
-
 		this.requestUpdate();
 	}
 

package/lib/column-selection-dialog/lib/locale/translation-de.js

@@ -16,4 +16,4 @@ var translationDe = {
 	"CANCEL": "ABBRECHEN"
 };
 
-export default translationDe;
+export default translationDe;

package/lib/column-selection-dialog/lib/locale/translation-en.js

@@ -16,4 +16,4 @@ var translationEn = {
 	"CANCEL": "CANCEL"
 };
 
-export default translationEn;
+export default translationEn;

package/lib/column-selection-dialog/lib/locale/translation-ja.js

@@ -16,4 +16,4 @@ var translationJa = {
 	"CANCEL": "キャンセル"
 };
 
-export default translationJa;
+export default translationJa;

package/lib/column-selection-dialog/lib/locale/translation-zh-hant.js

@@ -16,4 +16,4 @@ var translationZhHant = {
 	"CANCEL": "取消"
 };
 
-export default translationZhHant;
+export default translationZhHant;

package/lib/column-selection-dialog/lib/locale/translation-zh.js

@@ -16,4 +16,4 @@ var translationZh = {
 	"CANCEL": "取消"
 };
 
-export default translationZh;
+export default translationZh;

package/lib/column-selection-dialog/themes/base.less

@@ -105,6 +105,16 @@
 		height: 100%;
 		overflow: hidden;
 	}
+	
+	#info_icon {
+		vertical-align: top;
+		font-size: 14px;
+	}
+	
+	#tags_div > * {
+		margin-right: 5px;
+		margin-bottom: 10px;
+	}
 
 	#allColumns {
 		overflow: hidden;

package/lib/column-selection-dialog/themes/elemental/dark/column-selection-dialog.js

@@ -1,4 +1,4 @@
 import "./imports/native-elements.js";
 
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'column-selection-dialog', styles: ':host{background:#535de8;display:inline-block;height:0;width:0}:host *{margin:0}:host [hide]{display:none}:host div{box-sizing:border-box}:host ef-item.disabled{color:rgba(184,189,199,.5)}:host ef-item[focused] ef-checkbox{color:#b7bcc6}:host ef-item::part(center){white-space:normal}:host .title{line-height:14px}:host ef-dialog{width:700px;height:500px;min-width:490px}:host ef-tree{width:100%}:host ef-tree-item{min-width:100%}:host .container{height:100%;display:flex;flex-direction:column}:host .row{display:flex}:host .row+.row{margin-top:10px}:host .side{width:50%;max-width:50%;display:flex;flex-direction:column;vertical-align:top;overflow:hidden;align-self:center;padding-left:5px;padding-right:5px;justify-content:center}:host .side:first-child{padding-left:0}:host .side:last-child{padding-right:0}:host #listSection{height:100%;overflow:hidden}:host #allColumns{overflow:hidden;border:1px solid #3e444f;display:flex;flex-direction:column;flex-grow:1}:host #allColumnsSide,:host #visibleSide{height:100%}:host #visibleColumns{flex-grow:1;overflow-y:auto;border:1px solid #3e444f}:host #searchInput{width:100%}:host .no-results{pointer-events:none;text-align:center;margin-top:10px}:host #orderChangePanel{display:flex;text-align:center;margin-top:10px;justify-content:space-between}:host #orderChangePanel>*+*{margin-left:10px}:host #moveButtons>*+:not(:first-child){margin-left:10px}:host #descriptionContainer{margin-top:10px;min-height:60px;overflow-y:auto;border:1px solid #3e444f;font-size:12px;line-height:18px;box-sizing:border-box;padding:3px 10px}:host #selectAllHeader{min-height:28px;text-transform:none;cursor:pointer}:host #selectAllHeader #selectAllCheckbox{pointer-events:none}:host [slot=footer]{display:flex;justify-content:space-between}:host [slot=footer]>div{display:inline-flex;align-items:center;height:40px;padding-left:15px;padding-right:15px}:host [slot=footer]>div ef-button{text-transform:uppercase;margin-top:0;margin-bottom:0}:host [slot=footer]>div ef-button+ef-button{margin-left:15px}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}' }}))
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'column-selection-dialog', styles: ':host{background:#535de8;display:inline-block;height:0;width:0}:host *{margin:0}:host [hide]{display:none}:host div{box-sizing:border-box}:host ef-item.disabled{color:rgba(184,189,199,.5)}:host ef-item[focused] ef-checkbox{color:#b7bcc6}:host ef-item::part(center){white-space:normal}:host .title{line-height:14px}:host ef-dialog{width:700px;height:500px;min-width:490px}:host ef-tree{width:100%}:host ef-tree-item{min-width:100%}:host .container{height:100%;display:flex;flex-direction:column}:host .row{display:flex}:host .row+.row{margin-top:10px}:host .side{width:50%;max-width:50%;display:flex;flex-direction:column;vertical-align:top;overflow:hidden;align-self:center;padding-left:5px;padding-right:5px;justify-content:center}:host .side:first-child{padding-left:0}:host .side:last-child{padding-right:0}:host #listSection{height:100%;overflow:hidden}:host #info_icon{vertical-align:top;font-size:14px}:host #tags_div>*{margin-right:5px;margin-bottom:10px}:host #allColumns{overflow:hidden;border:1px solid #3e444f;display:flex;flex-direction:column;flex-grow:1}:host #allColumnsSide,:host #visibleSide{height:100%}:host #visibleColumns{flex-grow:1;overflow-y:auto;border:1px solid #3e444f}:host #searchInput{width:100%}:host .no-results{pointer-events:none;text-align:center;margin-top:10px}:host #orderChangePanel{display:flex;text-align:center;margin-top:10px;justify-content:space-between}:host #orderChangePanel>*+*{margin-left:10px}:host #moveButtons>*+:not(:first-child){margin-left:10px}:host #descriptionContainer{margin-top:10px;min-height:60px;overflow-y:auto;border:1px solid #3e444f;font-size:12px;line-height:18px;box-sizing:border-box;padding:3px 10px}:host #selectAllHeader{min-height:28px;text-transform:none;cursor:pointer}:host #selectAllHeader #selectAllCheckbox{pointer-events:none}:host [slot=footer]{display:flex;justify-content:space-between}:host [slot=footer]>div{display:inline-flex;align-items:center;height:40px;padding-left:15px;padding-right:15px}:host [slot=footer]>div ef-button{text-transform:uppercase;margin-top:0;margin-bottom:0}:host [slot=footer]>div ef-button+ef-button{margin-left:15px}::-webkit-scrollbar{width:15px;height:15px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #21242a;height:15px;width:15px;display:block}::-webkit-scrollbar-thumb{background:#3e444f;border-radius:8px;border:2px solid #21242a}::-webkit-scrollbar-thumb:hover{background:#b7bcc6}::-webkit-scrollbar-thumb:active{background:#707a8e}::-webkit-scrollbar-track{background:#21242a}::-webkit-scrollbar-corner{background:#21242a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 8.5px,11px 7.5px,10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 4.5px,5px 5.5px,4px 6.5px,3px 7.5px,2px 8.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:12px 4.5px,11px 5.5px,10px 6.5px,9px 7.5px,8px 8.5px,7px 9.5px,6px 8.5px,5px 7.5px,4px 6.5px,3px 5.5px,2px 4.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:8.5px 12px,7.5px 11px,6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,4.5px 6px,5.5px 5px,6.5px 4px,7.5px 3px,8.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f),linear-gradient(#3e444f,#3e444f);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6),linear-gradient(#b7bcc6,#b7bcc6);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e),linear-gradient(#707a8e,#707a8e);background-position:4.5px 12px,5.5px 11px,6.5px 10px,7.5px 9px,8.5px 8px,9.5px 7px,8.5px 6px,7.5px 5px,6.5px 4px,5.5px 3px,4.5px 2px}' }}))