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

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

@@ -0,0 +1,2034 @@
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { BasicElement, html } from "@refinitiv-ui/core";
+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 { isEmptyObject } from "../../tr-grid-util/es6/Util.js";
+
+/**
+ * @typedef {Object} ColumnSelectionDialog~Config
+ * @property {Array.<Object>} data All possible columns for selection.
+ * @property {Array.<Object>=} visibleItems Column list that is in existing Grid.
+ * @property {Array.<Object>=} defaultItems Column list that is default.
+ * @property {Function=} confirm Confirm event callback.
+ * @property {Function=} cancel Cancel event callback.
+ * @property {number=} excludedColumns Deprecated, Alias wigh excludedLeftColumns.
+ * @property {number=} excludedLeftColumns Number of columns on the left side that should be hidden from Visible Columns.
+ * @property {number=} excludedRightColumns Number of columns on the right side that should be hidden from Visible Columns.
+ * @property {number=} unmovableColumns Depricated, Alias with stationary column option. Number of columns that is unmovable in Visible Columns.
+ * @property {boolean=} descriptionBox Show description box
+ * @property {string=} middleSeparator Field of column which used as middle separator to divide grid into two sides
+ * @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.
+ * @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.
+* @private
+* @function
+* @param {Array} ary
+* @param {number} at
+* @param {Array} items
+* @return {Array} In-place edited array
+* @example
+* insertItems(["a", "b"], 1, ["c", "d"]); // ["a", "c", "d", "b"];
+*/
+const insertItems = function (ary, at, items) {
+	ary.splice.apply(ary, [at, 0].concat(items));
+	return ary;
+};
+/** Returns negative value if a < b, 0 if a === b, and positive value if a > b
+* @private
+* @function
+* @param {number} a
+* @param {number} b
+* @returns {number}
+*/
+const numberComparer = function (a, b) {
+	return a - b;
+};
+/**
+* Checks, if the given numbers have continuous number series
+* @private
+* @function
+* @param {Array.<number>} sortedIndexes
+* @return {boolean}
+*/
+const isContinuous = function(sortedIndexes) {
+	var len = sortedIndexes ? sortedIndexes.length : 0;
+	var val = len ? sortedIndexes[0] : 0;
+	for(var i = 1; i < len; ++i) {
+		var nextVal = sortedIndexes[i];
+		if(val + i !== nextVal) {
+			return false;
+		}
+	}
+	return len > 0;
+};
+/** Checks if the given object has "selected" property
+* @private
+* @function
+* @param {Object} item
+* @return {boolean}
+*/
+const isSelectedItem = function(item) {
+	return (item && item.selected) ? true : false;
+};
+/** Checks if the given object is disabled
+* @private
+* @function
+* @param {Object} item
+* @return {boolean}
+*/
+const isEnabledItem = function (item) {
+	return (item && !item.disabled) ? true : false;
+};
+
+
+/** Recursively search through tree structures of items
+* @private
+* @function
+* @param {!Array} items
+* @param {string|Array.<string>} input User input that has been validated
+* @param {!Function} matchingLogic
+* @return {!Array}
+*/
+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 = _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;
+				results.push(item);
+			}
+		} else if (matchingLogic(item, input)) {
+			results.push(item);
+		}
+	}
+
+	return results;
+};
+
+/** @private
+* @function
+* @param {Object} item
+*/
+const selectItem = function(item) {
+	if(item) {
+		item.selected = true;
+	}
+};
+/** @private
+* @function
+* @param {Object} item
+*/
+const deselectItem = function(item) {
+	if(item) {
+		item.selected = false;
+	}
+};
+
+/**
+* Returns sorted and selected item indexes from the given list
+* @private
+* @function
+* @param {Array} list
+* @param {string} value
+* @param {string} field
+* @return {number}
+*/
+const getItemIndex = function (list, value, field) {
+	var listCount = list.length;
+	for (var i = 0; i < listCount; ++i) {
+		var item = list[i];
+		if (item && item[field] === value) {
+			return i;
+		}
+	}
+	return -1;
+};
+
+/** @private
+* @function
+* @param {Element} elem
+* @return {number}
+*/
+const getDomElementIndex = function(elem) {
+	if(elem) {
+		var p = elem.parentNode;
+		if(p) {
+			var chdr = p.children;
+			var childCount = chdr ? chdr.length : 0;
+			for(var i = 0; i < childCount; ++i) {
+				if(elem === p.children[i]) {
+					return i;
+				}
+			}
+		}
+	}
+	return -1;
+};
+/**
+* Sets scroll to focus on elements
+* @private
+* @function
+* @param {Element} container
+* @param {number} itemIndex
+*/
+const scrollToItem = function(container, itemIndex) {
+	if(!container) {
+		return;
+	}
+
+	var viewHeight = container.clientHeight;
+	var contentHeight = container.scrollHeight;
+
+	if(contentHeight <= viewHeight) {
+		return; // No scrollbar
+	}
+
+	var topView = container.scrollTop;
+	var bottomView = topView + viewHeight;
+
+	var chdr = container.children;
+	var childCount = chdr.length;
+	if(!itemIndex) {
+		itemIndex = 0;
+	} else if(itemIndex < 0 || itemIndex >= childCount) {
+		itemIndex = childCount - 1; // Last item
+	}
+
+	var targetItem = chdr[itemIndex];
+	var itemHeight = targetItem.offsetHeight;
+	// Calculate relative position from item to its parent
+	var topPos = itemIndex * itemHeight; // WARNING: This only works when we have constant height
+	var bottomPos = topPos + itemHeight;
+	if(topPos >= topView && bottomPos <= bottomView) {
+		return; // The item is already in the view
+	}
+
+	var extraSpace = itemHeight * 2; // Add extra space over the target position to make better UX.
+	var targetPos = 0;
+	if(topPos < topView) { // Scroll up
+		targetPos = topPos - extraSpace;
+		if(targetPos < 0) {
+			targetPos = 0;
+		}
+	} else { // Scroll down
+		var maxPos = contentHeight - viewHeight;
+		targetPos = topView + (bottomPos - bottomView) + extraSpace - itemHeight;
+		if(targetPos > maxPos) {
+			targetPos = maxPos;
+		}
+	}
+
+	if(topView !== targetPos) {
+		container.scrollTop = targetPos;
+	}
+};
+
+/**
+* Returns sorted and selected item indexes from the given list
+* @private
+* @function
+* @param {Array} list
+* @return {!Array.<number>}
+*/
+const _getSelectedItemIndexes = function (list) {
+	var listCount = list ? list.length : null;
+	var indexes = [];
+	for (var i = 0; i < listCount; ++i) {
+		if (isSelectedItem(list[i])) {
+			indexes.push(i);
+		}
+	}
+	return indexes;
+};
+
+/** Coral tree item requires label and value. also create nested group
+* @private
+* @param {Object} colObj
+* @param {string} parent parent of this group
+* @param {boolean} defaultExpanded default expand state for tree item
+* @return {Object}
+*/
+const _toCoralTreeItem = function (colObj, parent, defaultExpanded) {
+	var label = colObj.label || colObj.title || colObj.name || colObj.field;
+	var expanded = defaultExpanded;
+	if(colObj.expanded != null){
+		expanded = colObj.expanded;
+	}
+	var currentId;
+	if(parent) {
+		currentId = parent + '/' + label;
+	} else {
+		currentId = label;
+	}
+	if (colObj.items) {
+		return {
+			label: label,
+			rawValue: colObj.id,
+			value: colObj.id,
+			items: colObj.items.map(function (obj) {
+				return _toCoralTreeItem(obj, currentId, defaultExpanded);
+			}),
+			expanded: expanded,
+			isGroup: true
+		};
+	} else {
+		return {
+			label: label,
+			rawValue: colObj.id,
+			strGroup: parent,
+			value: currentId,
+			selected: false,
+			disabled: colObj.disabled == true,
+			stationary: colObj.stationary == true,
+			lowerCase: label.toLowerCase(),
+			tags: _toTagList(colObj.tags)
+		};
+	}
+};
+
+/** Coral item requires label and value. So we need to convert column object to coral item
+* @private
+* @param {Object} item
+* @return {!Object}
+*/
+const _toCoralItem = function(item) {
+	return {
+		label: item.label,
+		value: item.value,
+		selected: false,
+		disabled: item.disabled,
+		stationary: item.stationary,
+		lowerCase: item.label.toLowerCase(),
+		tags: _toTagList(item.tags)
+	};
+};
+/** Valid item must have an id or a field
+* @private
+* @param {Object} item
+* @return {boolean}
+*/
+const _validateItem = function(item) {
+	if (item) {
+		if (item.items) {
+			// group
+			if (!item.id) {
+				var id = item.label || item.title || item.name || item.field;
+				if (id) item.id = 'GROUP_' + id + '_';
+			}
+			if (item.id) {
+				item.items = item.items.filter(_validateItem);
+				return true;
+			}
+		} else {
+			// item
+			if (!item.field) {
+				item.field = item.label || item.value || item.id;
+			}
+			if (item.field) {
+				if (!item.title) {
+					item.title = item.label || item.field;
+				}
+				if (!item.id) {
+					item.id = item.field || item.title;
+				}
+				return true;
+			}
+		}
+	}
+	return false;
+};
+/** is item autogenerated
+* @private
+* @param {Object} item
+* @return {boolean}
+*/
+const _notAutoGeneratedItem = function (item) {
+	if (item.autoGenerated) return false;
+	return true;
+};
+/**
+* @private
+* @param {*} item
+* @return {boolean}
+*/
+const _ensurePositiveNumber = function(item) {
+	var num;
+	if (typeof item === "string") {
+		num = Number(item);
+	} else if (typeof item === "number") {
+		num = item;
+	}
+	if (num < 0 || item == null) {
+		num = 0;
+	}
+	return num;
+};
+/** Filter out any item with duplicate id
+* @private
+* @param {Array} ary
+* @param {Object} idMap
+* @return {Array} Return new array in case of any duplication, otherwise return the same input array
+*/
+const _screenDuplication = function (ary, idMap) {
+	var uniqeList = [];
+	var itemCount = ary ? ary.length : 0;
+	for(var i = 0; i < itemCount; ++i) {
+		var item = ary[i];
+		var itemId = item.id || "";
+		if(itemId && !idMap[itemId]) {
+			uniqeList.push(item);
+			idMap[itemId] = item;
+		}
+	}
+	return uniqeList;
+};
+
+/** create object mapping from array
+* @private
+* @param {Array} items
+* @param {string} fieldTobeKey
+* @param {Object} mappingObj
+* @return {Object} mapping object
+*/
+const _createMapping = function (items, fieldTobeKey, mappingObj) {
+	mappingObj = mappingObj || {};
+	var len = items.length;
+	var item, value, rawValue;
+	for (let i = 0; i < len; i++) {
+		item = items[i];
+		if(item.items) {
+			_createMapping(item.items, fieldTobeKey, mappingObj);
+		}
+		value = item[fieldTobeKey];
+		rawValue = item.rawValue;
+		mappingObj[value] = item;
+		if(fieldTobeKey === 'id') { // When a column is initialized, no extra properties are assigned for retaining value reason
+			continue;
+		}
+		// add mapping rawValue for map current group
+		if(!mappingObj[rawValue]) {
+			mappingObj[rawValue] = Object.assign( {isUnique: true}, item);
+		} else {
+			mappingObj[rawValue].isDuplicate = true;
+		}
+
+		// for map child to parent group
+		if(!mappingObj[rawValue].mappingParents) {
+			mappingObj[rawValue].mappingParents = [];
+		}
+		mappingObj[rawValue].mappingParents.push(value);
+
+	}
+	return mappingObj;
+};
+
+/**
+* @private
+* @param {Array} items
+* @return {number}
+*/
+const _countAutoGenerated = function (items) {
+	var agCount = 0;
+	var c = items.length;
+	for (var i = 0; i < c; i++) {
+		if (items[i].autoGenerated) agCount++;
+	}
+	return agCount;
+};
+
+/**
+* @private
+* @param {Array} items
+* @param {Array} visibleList
+* @return {!Array}
+*/
+const _getVisibleItems = function (items, visibleList) {
+	visibleList = visibleList || [];
+	var c = items.length;
+	for (let i = 0; i < c; i++) {
+		var item = items[i];
+		if (item.items) {
+			// group
+			_getVisibleItems(item.items, visibleList);
+		} else {
+			// item
+			if (item.visible) {
+				visibleList.push(item);
+			}
+		}
+	}
+	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
+ */
+class ColumnSelectionDialog extends BasicElement {
+
+	static get properties() {
+		return {
+			config: {type: Object},
+			data: {type: Object},
+			visibleItems: {type: Array},
+			isShown: { type: Boolean },
+			lang: { type: String, reflect: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this.lang = 'en';
+		this._lang = 'en';
+		this._translation = translation;
+
+		this.isShown = false;
+		this._descriptionBox = false;
+		this._excludedLeftColumns = 0;
+		this._excludedRightColumns = 0;
+		this._unmovableColumns = 0;
+		this._pendingScroll = false;
+		this._focusedElement = null;
+		this._pendingTreeRefresh = false;
+		this._pendingResetSearchInput = false;
+		this._middleSeparator = "";
+		this._defaultExpanded = true;
+		this._width = 0;
+		this._height = 0;
+		this._tagDefs = null;
+		this._activeTags = null;
+		this._infoTooltip = "";
+		this._searchPlaceholder = "";
+		this._dialogLabel = "";
+		this._visibleItemsLabel = "";
+		this._availableItemsLabel = "";
+
+		this._allItemMapping = {};
+		this._filterItemMapping = {};
+		this._initialColumnMap = {};
+		this._allColumnList = []; // For keeping original list
+		this._filteredColumnList = []; // For filtered list
+		this._visibleColumnList = []; // Visible columns that will show in UI
+		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);
+		this._treeExpandedChanged = this._treeExpandedChanged.bind(this);
+		this._removeBtnClicked = this._removeBtnClicked.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);
+		this.hide = this.hide.bind(this);
+		this._onUpItem = this._onUpItem.bind(this);
+		this._onDownItem = this._onDownItem.bind(this);
+		this._handleKeydown = this._handleKeydown.bind(this);
+		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._handleFocusIn = this._handleFocusIn.bind(this);
+		this._handleFocusOut = this._handleFocusOut.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);
+	}
+
+	/**
+	 * @private
+	 * @param {Object} changedProperties
+	 */
+	update(changedProperties) {
+
+		if(changedProperties.has("lang")) {
+			this._lang = ElfUtil.toLangString(this.lang);
+		}
+
+		if(changedProperties.has("config")) {
+			if(!changedProperties.has("data")) {
+				if(Array.isArray(this.config)) {
+					this.data = this.config;
+					this.config = null;
+				} else if(this.config && this.config.data != null) {
+					this.data = this.config.data;
+				}
+			}
+			var config = this.config;
+			if(!changedProperties.has("visibleItems")) {
+				var visibleItems = config ? config.activeItems || config.visibleItems : null;
+				if(visibleItems) {
+					this.visibleItems = visibleItems;
+				}
+			}
+
+			if (config) {
+				// allow config.lang overides default lang
+				if(config.lang) {
+					this._lang = ElfUtil.toLangString(config.lang);
+				}
+
+				if (config.confirm) {
+					this.addEventListener('confirm', config.confirm);
+				}
+
+				if (config.cancel) {
+					this.addEventListener('cancel', config.cancel);
+				}
+
+				if (config.descriptionBox != null) {
+					this._descriptionBox = !!config.descriptionBox;
+				}
+
+				if (config.collapseAll != null) {
+					this._defaultExpanded = !config.collapseAll;
+				}
+
+				if (config.width != null) {
+					this._width = config.width;
+				} else {
+					this._width = 0;
+				}
+
+				if (config.height != null) {
+					this._height = config.height;
+				} else {
+					this._height = 0;
+				}
+				var userTags = 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(config.infoTooltip != null) {
+					this._infoTooltip = config.infoTooltip ? config.infoTooltip : "";
+				}
+				if(config.searchPlaceholder != null) {
+					this._searchPlaceholder = config.searchPlaceholder ? config.searchPlaceholder : "";
+				}
+
+				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 : "";
+			}
+		}
+
+		if(changedProperties.has("config") ||
+			changedProperties.has("data") ||
+			changedProperties.has("visibleItems") ||
+			changedProperties.has("isShown")
+		) {
+			this.isShown && this._initData();
+		}
+
+		super.update(changedProperties);
+	}
+
+	/** A `TemplateResult` that will be used to render the updated internal template
+	 * @private
+	 * @return {*}
+	 */
+	render() {
+		var lang = this._translation[this._lang] ? this._lang : "en";
+		var t = this._translation[lang];
+		var hasNoVisibleItem = !this._visibleColumnList.length;
+
+		/* eslint-disable */
+		return html`
+			<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">${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>
+						<div class="side"></div>
+					</div>
+					<div class="row">
+						<div class="side">
+							<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>${this._visibleItemsLabel ? this._visibleItemsLabel : t["Show in this order"]}</label>
+						</div>
+					</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">
+									<ef-checkbox aria-label="select all columns" id="selectAllCheckbox">${t["Select All"]}</ef-checkbox>
+								</ef-header>
+								<ef-tree aria-label="column list" id="tree" multiple></ef-tree>
+							</div>
+						</div>
+						<div class="side" id="visibleSide">
+							<div id="visibleColumns" aria-label="visible column list">
+								${this._visibleColumnList.map(item => html`
+									<ef-item
+										value="${item.value}"
+										?selected="${item.selected}"
+										class="${item.disabled ? 'disabled' : ''}">
+											${item.label}
+										</ef-item>`
+								)}
+							</div>
+							<div id="ordering_div">
+								<div id="ordering_buttons">
+									<ef-button aria-label="move selected visible columns up" icon="up" @click="${this._onUpItem}" id="upItem">${t["Up"]}</ef-button><!--
+									--><ef-button aria-label="move selected visible columns down" icon="down" @click="${this._onDownItem}" id="downItem">${t["Down"]}</ef-button>
+								</div>
+								<ef-button aria-label="remove selected visible columns" id="removeFromVisibleColumnsBtn" @click="${this._removeBtnClicked}">${t["Remove"]}</ef-button>
+							</div>
+						</div>
+					</div>
+					<div id="descriptionContainer"></div>
+				</div>
+				<div slot="footer">
+					<div part="custom-buttons">
+						${this._defaultItems ? html`<ef-button aria-label="restore default visible columns" id="restore_btn" @click="${this._restoreDefault}" tabindex="0">${t["RESTORE DEFAULT"]}</ef-button>` : ""}
+						${hasNoVisibleItem ? html`<ef-icon icon="warning-circle"></ef-icon>` : ""}
+						${hasNoVisibleItem ? html`<div id="status_div">${t["WARNING_1"]}</div>` : ""}
+					</div>
+					<div part="default-buttons">
+						<ef-button @click="${this._onConfirm}" tabindex="0" cta ?disabled="${hasNoVisibleItem}">${t["OK"]}</ef-button>
+						<ef-button @click="${this._onCancel}" tabindex="0">${t["CANCEL"]}</ef-button>
+					</div>
+				</div>
+			</ef-dialog>
+		`;
+		/* eslint-enable */
+	}
+
+	/**
+	 * @private
+	 * @override
+	 */
+	firstUpdated(changedProperties) {
+		var shadowRoot = this.shadowRoot;
+		this._tree = shadowRoot.getElementById('tree');
+		this._selectAllHeader = shadowRoot.getElementById('selectAllHeader');
+		this._selectAllCheckbox = shadowRoot.getElementById('selectAllCheckbox');
+		this._treeNoResult = shadowRoot.getElementById('treeNoResult');
+		this._searchInput = shadowRoot.getElementById('searchInput');
+		this._removeFromVisibleColumnsBtn = shadowRoot.getElementById('removeFromVisibleColumnsBtn');
+		this._columnDialog = shadowRoot.getElementById('columnDialog');
+		this._upItem = shadowRoot.getElementById('upItem');
+		this._downItem = shadowRoot.getElementById('downItem');
+		this._visibleColumnsContainer = shadowRoot.getElementById('visibleColumns');
+		this._treeContainer = shadowRoot.getElementById('treeContainer');
+		this._descriptionContainer = shadowRoot.getElementById('descriptionContainer');
+		this._tagsDiv = shadowRoot.getElementById('tags_div');
+
+		this._tree.addEventListener('value-changed', this._treeValueChanged);
+		this._tree.addEventListener('expanded-changed', this._treeExpandedChanged);
+		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);
+
+		// Events for menu Items management
+		this._visibleColumnsContainer.addEventListener('keydown', this._handleKeydown);
+		this._visibleColumnsContainer.addEventListener('mouseover', this._handleMouseover);
+		this._visibleColumnsContainer.addEventListener('mouseout', this._handleMouseout);
+		this._visibleColumnsContainer.addEventListener('click', this._handleClick);
+		this._visibleColumnsContainer.addEventListener('dblclick', this._removeBtnClicked);
+		this._visibleColumnsContainer.addEventListener('focusin', this._handleFocusIn);
+		this._visibleColumnsContainer.addEventListener('focusout', this._handleFocusOut);
+
+		// icon custom renderer
+		if(this._descriptionBox) { // TODO: This should not work only for the first time
+			this._treeDefualtRenderer = new DefaultRenderer(this._tree);
+			this._tree.renderer = this._createTreeCustomRender;
+		}
+	}
+
+	/**
+	 * @private
+	 * @override
+	 */
+	updated(changedProperties) {
+		if (changedProperties.has('lang')) {
+			if (this._translation[this._lang]) {
+				this._pendingResetSearchInput = true;
+			}
+		}
+
+		if (changedProperties.has('isShown')) {
+			this._columnDialog.opened = this.isShown;
+			if (!this.isShown) {
+				this.remove();
+			}
+		}
+
+		if (this._pendingResetSearchInput) {
+			this._pendingResetSearchInput = false;
+			this._searchInput.value = '';
+			this._updateSearchResult(this._searchInput.value); // TODO: Use empty string instead. This also trigger requestUpdate again
+		}
+
+		if(this._pendingScroll) {
+			var selectedIndexes = _getSelectedItemIndexes(this._visibleColumnList);
+			if (selectedIndexes.length) {
+				scrollToItem(this._visibleColumnsContainer, selectedIndexes[0]);
+			}
+			this._pendingScroll = false;
+		}
+
+		if (this._pendingTreeRefresh) {
+			this._pendingTreeRefresh = false;
+			this._updateTreeUI();
+		}
+
+		if (this._pendingButtonUpdate) {
+			this._pendingButtonUpdate = false;
+			this._updateControlButton();
+		}
+
+		this._columnDialog.style.height = this._height ? this._height + "px" : "";
+		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);
+			}
+		}
+	}
+
+	/**
+	 * @public
+	 * @param {ColumnSelectionDialog~Config=} options
+	 */
+	init(options) {
+		this.config = options;
+	}
+
+	/** Transform and prepare user data for actual usage
+	* @private
+  * @param {boolean} toDefault=false set visible column to default list
+	*/
+	_initData(toDefault) {
+		// Retrieve user options
+		var allItems, i, j, item, id, key, columnMappingParents;
+		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;
+		} else {
+			// if no data provide
+			// then merge availableItems with visibleItems as allItems
+			var availableItems = config.availableItems || [];
+			allItems = Array.from(availableItems);
+			insertItems(allItems, allItems.length, visibleItems);
+			defaultItems && insertItems(allItems, allItems.length, defaultItems);
+		}
+
+		// Ensure that all user given items are valid
+		if(Array.isArray(allItems)) {
+			allItems = allItems.filter(_validateItem).filter(_notAutoGeneratedItem);
+		} else {
+			allItems = [];
+		}
+
+		if (toDefault && defaultItems) { // case reset to default
+			visibleItems = defaultItems;
+		}
+
+		if(Array.isArray(visibleItems)) {
+			visibleItems = visibleItems.filter(_validateItem);
+		} else {
+			visibleItems = [];
+		}
+
+		// find visible item from allItem and append to visibleItems
+		var visible2 = _getVisibleItems(allItems);
+		insertItems(visibleItems, visibleItems.length, visible2);
+
+		// Remove any duplicate entry by checking duplicate id
+		var idMap = {};
+		visibleItems = _screenDuplication(visibleItems, idMap);
+		var itemCount = visibleItems.length;
+
+		var autoGeneratedColumnCount = _countAutoGenerated(visibleItems);
+		var middleSeparator = config.middleSeparator;
+
+		var excludedLeftColumns = config.excludedLeftColumns;
+		if (excludedLeftColumns == null && config.excludedColumns != null) {
+			excludedLeftColumns = config.excludedColumns; // apply alias
+		}
+		this._excludedLeftColumns = _ensurePositiveNumber(excludedLeftColumns); // auto generated column should always be hidden from UI
+		this._excludedLeftColumns += autoGeneratedColumnCount; // WARNING: If auto-generated is not at most left index, this calculation will be incorrect.
+		this._excludedRightColumns = _ensurePositiveNumber(config.excludedRightColumns);
+		if (this._excludedRightColumns > itemCount - this._excludedLeftColumns) {
+			this._excludedRightColumns = _ensurePositiveNumber(itemCount - this._excludedLeftColumns);
+		}
+
+		this._initialColumnMap = _createMapping(allItems, 'id');
+		this._excludedLeftVisibleColumnList = visibleItems.slice(0, this._excludedLeftColumns);
+		this._excludedRightVisibleColumnList = visibleItems.slice(itemCount - this._excludedRightColumns);
+
+		var stationaryLeftColumnIndex = -1;
+		for(i = allItems.length - 1; i >= 0; i--) {
+			item = allItems[i];
+
+			if(i < stationaryLeftColumnIndex) {
+				item.disabled = true;
+			} else {
+				if(item.stationary || i < config.unmovableColumns) {
+					stationaryLeftColumnIndex = i + 1; // unmoveable count by columns so we need to add 1 to index for backward compatibility
+					item.disabled = true;
+					this._unmovableColumns = _ensurePositiveNumber(stationaryLeftColumnIndex);
+					this._unmovableColumns += autoGeneratedColumnCount - this._excludedLeftColumns;
+				}
+			}
+
+			if(middleSeparator && item.field === middleSeparator){
+				item.disabled = true;
+				this._middleSeparator = middleSeparator;
+			}
+
+		}
+
+		this._allColumnList = [];
+		for(i = 0; i < allItems.length; i++){
+			item = allItems[i];
+			this._allColumnList.push(_toCoralTreeItem(item, null, this._defaultExpanded));
+		}
+		this._allItemMapping = _createMapping(this._allColumnList, 'value');
+
+		this._visibleColumnList = [];
+		for (i = 0; i < itemCount; i++) {
+			id = visibleItems[i].id;
+			item = this._allItemMapping[id];
+			if (!item) continue; // auto generate column will not include in visible list
+			columnMappingParents = item.mappingParents;
+			if(columnMappingParents) {
+				// Select all tree duplicate columns
+				for (j = 0; j < columnMappingParents.length; j++) {
+					key = columnMappingParents[j];
+					this._allItemMapping[key].selected = true; // selected this column
+				}
+			} else {
+				item.selected = true; // selected this column
+			}
+
+			if (i < this._excludedLeftColumns || i >= itemCount - this._excludedRightColumns) {
+				// _excludedLeftColumns and _excludedRightColumns no need to add in _visibleColumnList
+				item.disabled = true;
+			} else {
+				// The value in the tree children is selected when the user passes the visible column in the dialog
+				columnMappingParents = item.mappingParents;
+				if(columnMappingParents) {
+					for (j = 0; j < columnMappingParents.length; j++) {
+						key = columnMappingParents[j];
+						var rawValue = this._allItemMapping[key].rawValue;
+						var coralItem = _toCoralItem(this._allItemMapping[key]);
+
+						if(this._allItemMapping[rawValue].isDuplicate && this._allItemMapping[key].strGroup) {
+							coralItem.label = coralItem.label + ' (' + this._allItemMapping[key].strGroup + ')';
+						}
+						this._visibleColumnList.push(_toCoralItem(coralItem)); // show in coral item
+					}
+				} else {
+					this._visibleColumnList.push(_toCoralItem(item)); // show in coral item
+				}
+			}
+		}
+
+		// clear description text since visibleList changed
+		if (this._descriptionContainer) {
+			this._descriptionContainer.textContent = '';
+		}
+
+		this._pendingTreeRefresh = true;
+		this._pendingButtonUpdate = true;
+		this._pendingResetSearchInput = true;
+	}
+
+	/** Show the dialog
+	 * @public
+	 */
+	show() {
+		if (!this.parentNode) {
+			document.body.appendChild(this);
+		}
+		this.isShown = true; // TODO: This is not a correct way of using isShown property
+	}
+
+	/** Hide the dialog
+	 * @public
+	 */
+	hide() {
+		this.isShown = false; // TODO: This is not a correct way of using isShown property
+	}
+
+	/** Validate item can move to index
+	* @private
+	* @param {number} itemIndex
+ 	* @param {boolean} isUp
+	* @return {boolean}
+	*/
+	_canMove(itemIndex, isUp) {
+		var nextIndex = itemIndex + (isUp ? -1 : 1);
+		var nextElem = this._visibleColumnsContainer.children[nextIndex];
+
+		if (!nextElem) { // no nextIndex then ignore
+			return false;
+		} else if (isSelectedItem(this._visibleColumnsContainer.children[nextIndex])) { // next item is selected then ignore
+			return false;
+		} else if (!this._isMovable(nextIndex)) {
+			return false;
+		}
+
+		return true;
+	}
+	/** Validate item that is movable in visible columns
+	* @private
+	* @param {number} itemIndex
+	* @return {boolean}
+	*/
+	_isMovable(itemIndex) {
+		var obj = this._visibleColumnList[itemIndex];
+		if (!obj) {
+			return false;
+		}
+
+		var colItem = this._allItemMapping[obj.value];
+		var movable = _ensurePositiveNumber(itemIndex) >= this._unmovableColumns;
+		if(this._middleSeparator && colItem.rawValue == this._middleSeparator){
+			movable = false;
+		}
+
+		return movable;
+	}
+
+	/** Get visible middle separator  column index
+	 * @private
+	 * @return {number}
+	 */
+	 _getVisibleSeparatorIndex() {
+		if(!this._middleSeparator){
+			return -1;
+		}
+		var separatorCol = this._allItemMapping[this._middleSeparator];
+		return getItemIndex(this._visibleColumnList, separatorCol.value, "value");
+	}
+
+	/** @private
+	 * @param {number} step if positive highlight will move up, if negative highlight will move down
+	 */
+	_moveFocusedItem(step) {
+		if (!step) {
+			return;
+		}
+
+		var focusedEl = this._focusedElement;
+		if (!focusedEl) {
+			var selectedIndexes = _getSelectedItemIndexes(this._visibleColumnList);
+			if (!selectedIndexes.length) {
+				return;
+			}
+
+			focusedEl = this._visibleColumnsContainer.children[selectedIndexes[0]];
+		}
+
+		var pn = focusedEl.parentNode;
+		if(!pn) {
+			return;
+		}
+
+		var chdr = pn.children;
+		var childCount = chdr.length;
+		var i; // focused element index
+		for(i = 0; i < childCount; ++i) {
+			if(chdr[i] === focusedEl) {
+				break;
+			}
+		}
+
+		i += step;
+		if (i >= 0 && i < childCount) {
+			scrollToItem(pn, i);
+			chdr[i].focus();
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Array} fromIndexes
+	 * @param {string} movementType
+	 */
+	_moveVisibleColumnsElement(fromIndexes, movementType) {
+		fromIndexes = fromIndexes.filter(this._isMovable);
+		const moveCount = fromIndexes ? fromIndexes.length : 0;
+		if(!moveCount) {
+			return;
+		}
+		const list = this._visibleColumnList;
+		const listCount = list.length;
+		if(!listCount) {
+			return;
+		}
+
+		const sortedIndexes = fromIndexes.sort(numberComparer);
+		const isGrouped = isContinuous(sortedIndexes);
+		const isDown = movementType.indexOf('Down') >= 0;
+		const minIndex = sortedIndexes[0];
+		const maxIndex = sortedIndexes[moveCount - 1];
+
+		let targetIndex = isDown ? maxIndex : minIndex;
+
+		if(isGrouped) {
+			if(isDown) {
+				if(movementType === 'Down') {
+					targetIndex = targetIndex < listCount ? targetIndex + 1 : listCount;
+				} else {
+					targetIndex = listCount;
+				}
+			} else {
+				if(movementType === 'Up') {
+					targetIndex = targetIndex > 0 ? targetIndex - 1 : 0;
+				} else {
+					targetIndex = 0;
+				}
+			}
+		}
+
+		if (!this._isMovable(targetIndex)) {
+			return;
+		}
+
+		// Collect selected itmes
+		const items = new Array(moveCount);
+		for(var i = 0; i < moveCount; ++i) {
+			let idx = sortedIndexes[i];
+			let item = list[idx];
+			items[i] = item;
+			list[idx] = null;
+			item.selected = true; // Ensure that selected item has correct state
+		}
+		// Insert items back
+		if (isDown) {
+			insertItems(list, targetIndex + 1, items);
+		} else {
+			insertItems(list, targetIndex, items);
+		}
+
+		this._visibleColumnList = list.filter(Boolean);
+		scrollToItem(this._visibleColumnsContainer, targetIndex);
+		this._pendingButtonUpdate = true;
+
+		this.requestUpdate();
+	}
+
+	_onUpItem() {
+		this._moveVisibleColumnsElement(_getSelectedItemIndexes(this._visibleColumnList), 'Up');
+	}
+
+	_onDownItem() {
+		this._moveVisibleColumnsElement(_getSelectedItemIndexes(this._visibleColumnList), 'Down');
+	}
+
+	/** @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); // 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) {
+		var keyword = value ? value.trim() : "";
+		if(!keyword && !this._activeTags) {
+			this._filteredColumnList = this._allColumnList;
+			this._filterItemMapping = this._allItemMapping;
+		} else {
+			// 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();
+	}
+
+	/**
+	 * @private
+	 */
+	_updateTreeUI() {
+		var isNoResult = this._filteredColumnList.length === 0;
+		this._tree.toggleAttribute('hide', isNoResult);
+		this._selectAllHeader.toggleAttribute('hide', isNoResult);
+		this._treeNoResult.toggleAttribute('hide', !isNoResult); // show no result when search not found
+
+		if (!isNoResult) {
+			this._updateSelectAllStatus();
+			this._tree.data = null;
+			this._tree.data = this._filteredColumnList;
+		}
+	}
+
+	/**
+	 * @private
+	 */
+	_updateSelectAllStatus() {
+		var total = 0;
+		var checked = 0;
+		for (var key in this._filterItemMapping) {
+			var item = this._filterItemMapping[key];
+			if (item.disabled || item.isGroup || item.isUnique) continue;
+
+			total++;
+			item.selected && checked++;
+		}
+
+		if (total === checked) {
+			this._selectAllStatus = "checked";
+		} else if (checked === 0) {
+			this._selectAllStatus = "";
+		} else {
+			this._selectAllStatus = "indeterminate";
+		}
+
+		this._selectAllCheckbox.removeAttribute("indeterminate");
+		this._selectAllCheckbox.removeAttribute("checked");
+		this._selectAllStatus && this._selectAllCheckbox.setAttribute(this._selectAllStatus, "");
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleFocusIn(e) {
+		this._focusedElement = e.target;
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleFocusOut(e) {
+		this._focusedElement = null;
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleKeydown(e) {
+		var handled = false;
+		switch (e.keyCode) {
+		case 40: // down
+			this._moveFocusedItem(1);
+			handled = true;
+			break;
+		case 38: // up
+			this._moveFocusedItem(-1);
+			handled = true;
+			break;
+		case 9: // tab
+			var focusedEl = this._focusedElement;
+			if (focusedEl) {
+				if (e.shiftKey) {
+					if(focusedEl.previousElementSibling) {
+						this._moveFocusedItem(-1);
+						handled = true;
+					}
+				} else {
+					if (focusedEl.nextElementSibling) {
+						this._moveFocusedItem(1);
+						handled = true;
+					}
+				}
+			}
+			break;
+		case 13: // enter
+			if(this._focusedElement) {
+				this._focusedElement.click();
+				handled = true;
+			}
+			break;
+		}
+
+		if(handled) {
+			e.preventDefault();
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleMouseover(e) {
+		var targetElem = e.target;
+		if (targetElem.highlightable) {
+			targetElem.highlighted = true;
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleMouseout(e) {
+		e.target.highlighted = false;
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	_handleSelectAllHeaderClick(e) {
+		this._selectAllCheckbox.click();
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	_handleClick(e) {
+		var selectedElement = e.target; // Target should be ef-item
+
+		this._showDescription(selectedElement.value);
+
+		if (!selectedElement.highlightable) {
+			return;
+		}
+
+		var list = this._visibleColumnList;
+		var selectedIndex = getDomElementIndex(selectedElement);
+
+		if(e.metaKey || e.ctrlKey) {
+			var curSelectedIndexes = _getSelectedItemIndexes(list);
+			var repeatClickAt = curSelectedIndexes.indexOf(selectedIndex);
+			if(repeatClickAt >= 0) {
+				deselectItem(list[selectedIndex]);
+			} else {
+				selectItem(list[selectedIndex]);
+			}
+		} else {
+			list.forEach(deselectItem);
+			selectItem(list[selectedIndex]);
+		}
+
+		this._pendingButtonUpdate = true;
+
+		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 (this._descriptionBox && value) {
+			var item = this._allItemMapping[value];
+			if(item) {
+				var initialColumn = this._initialColumnMap[item.rawValue];
+				if(initialColumn) {
+					this._descriptionContainer.textContent = initialColumn.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
+	 * @private
+	 */
+	_updateControlButton() {
+		this._upItem.disabled = true;
+		this._downItem.disabled = true;
+		this._removeFromVisibleColumnsBtn.disabled = true;
+
+		var selectedIndexes = _getSelectedItemIndexes(this._visibleColumnList);
+
+		// verify - remove button disabled
+		c = selectedIndexes.length;
+		for (i = 0; i < c; i++) {
+			selectedIndex = selectedIndexes[i];
+			if (!this._visibleColumnsContainer.children[selectedIndex].classList.contains('disabled')) {
+				this._removeFromVisibleColumnsBtn.disabled = false;
+				break;
+			}
+		}
+
+		var moveableList = selectedIndexes.filter(this._isMovable);
+		if (moveableList.length === 0) return;
+
+		var i, selectedIndex, c = moveableList.length;
+
+		// verify - down button disabled
+		for (i = c - 1; i >= 0; i--) {
+			selectedIndex = moveableList[i];
+			if (this._canMove(selectedIndex)) {
+				this._downItem.disabled = false;
+				break;
+			}
+		}
+
+		// verify - up button disabled
+		for (i = 0; i < c; i++) {
+			selectedIndex = moveableList[i];
+			if (this._canMove(selectedIndex, true)) {
+				this._upItem.disabled = false;
+				break;
+			}
+		}
+
+		// disabled move button when selection are in different section between separator
+		if(c > 1 && this._middleSeparator){
+			var separatorIndex = this._getVisibleSeparatorIndex();
+			var aboveSeparator = false;
+			var belowSeparator = false;
+
+			for(i = 0; i < c; i++){
+				selectedIndex = moveableList[i];
+				if(selectedIndex < separatorIndex){
+					aboveSeparator = true;
+				} else if(selectedIndex > separatorIndex){
+					belowSeparator = true;
+				}
+				if(aboveSeparator && belowSeparator){
+					this._downItem.disabled = true;
+					this._upItem.disabled = true;
+					break;
+				}
+			}
+		}
+	}
+
+	/**
+	 * remove button click event
+	 * @private
+	 */
+	_removeBtnClicked() {
+		let selectedItems = this._visibleColumnList.filter(isSelectedItem);
+		let movableItems = selectedItems.filter(isEnabledItem);
+		var movableItemsLength = movableItems.length;
+		if(!movableItemsLength) {
+			return;
+		}
+
+		// Deselect any item that is disabled
+		if(movableItemsLength < selectedItems.length) {
+			selectedItems.forEach(deselectItem);
+			movableItems.forEach(selectItem);
+		}
+
+		this._removeFromVisibleColumn(movableItems, true);
+
+		this._pendingTreeRefresh = true;
+
+		this.requestUpdate();
+	}
+
+	/**
+	 * reset all state
+	 * @private
+	 * @param {Event} e
+	 */
+	_restoreDefault(e) {
+		this._initData(true);
+		this.requestUpdate();
+	}
+
+	/**
+	 * Dispatch Event when user confirm changes
+	 * @private
+	 * @param {Event} e
+	 */
+	_onConfirm(e) {
+		var visibleItems = this._visibleColumnList.map(item => {
+			var rawValue = this._allItemMapping[item.value].rawValue;
+			return this._initialColumnMap[rawValue];
+		}); // Return only visible items
+		visibleItems = this._excludedLeftVisibleColumnList.concat(visibleItems).concat(this._excludedRightVisibleColumnList);
+
+		var detail = {
+			data: visibleItems, // deprecated
+			value: visibleItems // Standard
+		};
+
+		const beforeEvent = new CustomEvent('beforeConfirm', {
+			detail: detail
+		});
+		this.dispatchEvent(beforeEvent);
+
+		if (beforeEvent.cancel) { return; }
+
+		const event = new CustomEvent('confirm', {
+			cancelable: true,
+			detail: detail
+		});
+		this.dispatchEvent(event);
+		this.hide();
+	}
+
+	/**
+	 * Dispatch Event when user cancel or close dialog
+	 * @private
+	 * @param {Event} e
+	 */
+	_onCancel() {
+		const event = new CustomEvent('cancel');
+		this.dispatchEvent(event);
+		this.hide();
+	}
+
+	/**
+	* @param {Object} e
+	* @private
+	*/
+	_selectAllCheckedChanged(e) {
+		var selected = e.detail.value;
+		var items = [];
+
+		var highligtedRows = _getSelectedItemIndexes(this._visibleColumnList);
+
+		for (var key in this._filterItemMapping) {
+			var item = this._filterItemMapping[key];
+			if (item.disabled || item.isGroup) continue; // ignore disabled item and groupItem
+
+			if (item.selected !== selected) {
+				items.push(this._filterItemMapping[key]);
+			}
+		}
+
+		if (selected) {
+			this._addToVisibleColumn(items, highligtedRows);
+		} else {
+			this._removeFromVisibleColumn(items);
+		}
+
+		this._pendingTreeRefresh = true;
+		this.requestUpdate();
+	}
+
+	/**
+	 * ef-tree value changed event
+	 * @param {Object} e
+	 * @private
+	 */
+	_treeValueChanged(e) {
+		var selectedMapping = {};
+
+		var c = e.currentTarget.values.length;
+		for (var i = 0; i < c; i++) {
+			var value = e.currentTarget.values[i];
+			selectedMapping[value] = true;
+		}
+
+		var highligtedRows = _getSelectedItemIndexes(this._visibleColumnList);
+
+		// clear all selected item on visible column
+		this._visibleColumnList.forEach(deselectItem);
+
+		// update selected state and update UI
+		var addList = [], removeList = [];
+		for (var key in this._filterItemMapping) {
+			var item = this._filterItemMapping[key];
+			if (!item || item.disabled || item.isGroup) continue; // ignore disabled item and groupItem
+
+			if (item.selected) {
+				if (!selectedMapping[item.value]) {
+					// case item is unselect, then remove item out of visible list
+					removeList.push(item);
+				}
+			} else {
+				if (selectedMapping[item.value]) {
+					// case item is select, then add item to visible list
+					addList.push(item);
+				}
+			}
+		}
+		this._removeFromVisibleColumn(removeList);
+		this._addToVisibleColumn(addList, highligtedRows);
+		this._updateSelectAllStatus();
+		this.requestUpdate();
+	}
+
+	/**
+	* ef-tree expanded changed event handler
+	* @param {Object} e
+	* @private
+	*/
+	_treeExpandedChanged(e) {
+		var groupItem = e.detail.item;
+		var isExpanded = e.detail.value;
+		this._filterItemMapping[groupItem.value].expanded = isExpanded;
+		this._allItemMapping[groupItem.value].expanded = isExpanded;
+	}
+
+	/**
+	* @param {Array} items
+	* @param {Array<number>=} highligtedRows
+	* @private
+	*/
+	_addToVisibleColumn(items, highligtedRows) {
+		var itemCount = items.length;
+		var separatorIndex = this._middleSeparator ? getItemIndex(this._allColumnList, this._middleSeparator, 'rawValue') : -1;
+		var i, j;
+		if (itemCount === 0) return;
+		for (i = 0; i < itemCount; i++) {
+			var visibleSeparatorIndex = this._getVisibleSeparatorIndex();
+			var item = items[i];
+			if(item.isUnique) {
+				continue;
+			}
+			this._allItemMapping[item.value].selected = true;
+			var coralItem = _toCoralItem(item);
+			var rawValue = this._allItemMapping[item.value].rawValue;
+			if(this._allItemMapping[rawValue].isDuplicate && this._allItemMapping[item.value].strGroup) {
+				coralItem.label = coralItem.label + ' (' + this._allItemMapping[item.value].strGroup + ')';
+			}
+			var index = getItemIndex(this._allColumnList, item.value, 'value');
+			coralItem.selected = true;
+			var stationaryCount = this._unmovableColumns;
+			var highligtedRowCount = highligtedRows ? highligtedRows.length : 0;
+			var highligtedIndex;
+			var isInserted = false;
+			if(separatorIndex !== -1 && index < separatorIndex){
+				for(j = 0; j < highligtedRowCount; j++){
+					highligtedIndex = highligtedRows[j];
+					if(highligtedIndex < visibleSeparatorIndex){
+						if(highligtedIndex < stationaryCount){
+							this._visibleColumnList.splice(stationaryCount, 0, coralItem);
+						} else {
+							this._visibleColumnList.splice(highligtedIndex, 0, coralItem);
+						}
+						isInserted = true;
+						break;
+					}
+				}
+				if(!isInserted){
+					this._visibleColumnList.splice(visibleSeparatorIndex, 0, coralItem);
+				}
+			} else {
+				for(j = 0; j < highligtedRowCount; j++){
+					highligtedIndex = highligtedRows[j];
+					if(highligtedIndex > visibleSeparatorIndex){
+						if(highligtedIndex < stationaryCount){
+							this._visibleColumnList.splice(stationaryCount, 0, coralItem);
+						} else {
+							this._visibleColumnList.splice(highligtedIndex, 0, coralItem);
+						}
+						isInserted = true;
+						break;
+					}
+				}
+				if(!isInserted){
+					this._visibleColumnList.push(coralItem);
+				}
+			}
+		}
+		this._pendingScroll = true;
+		this._pendingButtonUpdate = true;
+	}
+
+	/**
+	* @param {Array} items
+	* @private
+	*/
+	_removeFromVisibleColumn(items) {
+		var c = items.length;
+		if (c === 0) return;
+		for (var i = 0; i < c; i++) {
+			var item = items[i];
+			this._allItemMapping[item.value].selected = false;
+			var index = getItemIndex(this._visibleColumnList, item.value, 'value');
+			if (index >= 0) this._visibleColumnList[index] = null;
+		}
+		this._visibleColumnList = this._visibleColumnList.filter(Boolean); // clear null element
+		this._pendingButtonUpdate = true;
+	}
+}
+
+customElement('column-selection-dialog')(ColumnSelectionDialog);
+
+export { ColumnSelectionDialog };
+export default ColumnSelectionDialog;