@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,1410 @@
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { BasicElement, html } from "@refinitiv-ui/core";
+import "@refinitiv-ui/elements/button";
+import "@refinitiv-ui/elements/tree";
+import "@refinitiv-ui/elements/dialog";
+import "@refinitiv-ui/elements/search-field";
+import translation from "./locale/translation.js";
+import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+
+/**
+ * @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 Number of columns that is unmovable in Visible Columns.
+ * @property {boolean=} descriptionBox Show description box
+*/
+
+/** 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;
+};
+
+/** search item label contain specific text
+* @private
+* @function
+* @param {Array} items
+* @param {string} keyword keyword in lower case
+* @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++) {
+		var item = items[i];
+		if (item.items) {
+			var result = filterSearch(item.items, keyword);
+			if (result.length > 0) {
+				item = Object.assign({}, item); // for header - clone new object to prevent mutate original
+				item.items = result;
+				filtered.push(item);
+			}
+		} else if (item.label.toLowerCase().includes(keyword)) {
+			filtered.push(item);
+		}
+	}
+
+	return filtered;
+};
+
+
+
+/** @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
+* @return {Object}
+*/
+const _toCoralTreeItem = function (colObj) {
+	var label = colObj.label || colObj.title || colObj.name || colObj.field;
+	if (colObj.items) {
+		return {
+			label: label,
+			value: colObj.id,
+			items: colObj.items.map(_toCoralTreeItem),
+			expanded: true,
+			isGroup: true
+		};
+	} else {
+		return {
+			label: label,
+			value: colObj.id,
+			selected: false,
+			disabled: colObj.disabled == true
+		};
+	}
+};
+
+/** 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
+	};
+};
+/** 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.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 c = items.length;
+	for (var i = 0; i < c; i++) {
+		var item = items[i];
+		if (item.items) { // group
+			_createMapping(item.items, fieldTobeKey, mappingObj);
+		}
+
+		var value = item[fieldTobeKey];
+		mappingObj[value] = item;
+	}
+	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;
+};
+
+/**
+ * @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._highlightedElem = null; // There can only one highlighted elem
+		this._pendingTreeRefresh = false;
+		this._pendingResetSearchInput = false;
+
+		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._isMovable = this._isMovable.bind(this);
+		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._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._handleClick = this._handleClick.bind(this);
+		this._selectAllCheckedChanged = this._selectAllCheckedChanged.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;
+				}
+			}
+			if(!changedProperties.has("visibleItems")) {
+				var visibleItems = this.config ? this.config.activeItems || this.config.visibleItems : null;
+				if(visibleItems) {
+					this.visibleItems = visibleItems;
+				}
+			}
+
+			if (this.config) {
+				// allow config.lang overides default lang
+				if(this.config.lang) {
+					this._lang = ElfUtil.toLangString(this.config.lang);
+				}
+
+				if (this.config.confirm) {
+					this.addEventListener('confirm', this.config.confirm);
+				}
+
+				if (this.config.cancel) {
+					this.addEventListener('cancel', this.config.cancel);
+				}
+
+				if (this.config.descriptionBox != null) {
+					this._descriptionBox = !!this.config.descriptionBox;
+				}
+
+				this._defaultItems = this.config.defaultItems;
+			}
+		}
+
+		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];
+
+		/* eslint-disable */
+		return html`
+			<ef-dialog header="${t["Column Selection"]}" id="columnDialog" lang="${lang}">
+				<div class="container">
+					<div class="row">
+						<div class="side">
+							<label class="title">${t["Add / Remove Columns"]}</label>
+						</div>
+						<div class="side">
+							</---to keep layout--->
+						</div>
+					</div>
+					<div class="row">
+						<div class="side">
+							<ef-search-field placeholder="${t["Search"]}" id="searchInput"></ef-search-field>
+						</div>
+						<div class="side">
+							<label>${t["Show in this order"]}</label>
+						</div>
+					</div>
+					<div class="row" id='listSection'>
+						<div class="side">
+							<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 id="selectAllCheckbox">${t["Select All"]}</ef-checkbox>
+								</ef-header>
+								<ef-tree id="tree" multiple></ef-tree>
+							</div>
+						</div>
+						<div class="side" id="visibleSide">
+							<div id="visibleColumns">
+								${this._visibleColumnList.map(item => html`
+									<ef-item
+										value="${item.value}"
+										?selected="${item.selected}"
+										class="${item.disabled ? 'disabled' : ''}">
+											${item.label}
+										</ef-item>`
+								)}
+							</div>
+							<div id="orderChangePanel">
+								<ef-button icon="up" @click="${this._onUpItem}" id="upItem">${t["Up"]}</ef-button>
+								<ef-button icon="down" @click="${this._onDownItem}" id="downItem">${t["Down"]}</ef-button>
+								<ef-button id="removeFromVisibleColumnsBtn" @click="${this._removeBtnClicked}">${t["Remove"]}</ef-button>
+							</div>
+						</div>
+					</div>
+					<div id="descriptionContainer"></div>
+				</div>
+				<div slot="footer">
+					<div part="custom-buttons" class="footer-left">
+						${this._defaultItems ? html`<ef-button @click="${this._restoreDefault}" tabindex="0">${t["RESTORE DEFAULT"]}</ef-button>` : ''}
+					</div>
+					<div part="default-buttons">
+						<ef-button @click="${this._onConfirm}" tabindex="0" cta>${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 = this.shadowRoot.getElementById('visibleColumns');
+		this._treeContainer = this.shadowRoot.getElementById('treeContainer');
+		this._descriptionContainer = this.shadowRoot.getElementById('descriptionContainer');
+
+		this._tree.addEventListener('value-changed', this._treeValueChanged);
+		this._tree.addEventListener('expanded-changed', this._treeExpandedChanged);
+		this._searchInput.addEventListener('keyup', this._onSearchInputChanged);
+		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);
+	}
+
+	/**
+	 * @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);
+		}
+
+		if(this._pendingScroll) {
+			this._visibleColumnsContainer.scrollTop = this._visibleColumnsContainer.scrollHeight;
+			this._pendingScroll = false;
+		}
+
+		if (this._pendingTreeRefresh) {
+			this._pendingTreeRefresh = false;
+			this._updateTreeUI();
+		}
+
+		if (this._pendingButtonUpdate) {
+			this._pendingButtonUpdate = false;
+			this._updateControlButton();
+		}
+
+		this._descriptionContainer.toggleAttribute('hide', !this._descriptionBox);
+	}
+
+	/**
+	 * @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, item;
+		var config = this.config || {};
+		var visibleItems = this.visibleItems;
+		var defaultItems = this._defaultItems;
+
+		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 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._unmovableColumns = _ensurePositiveNumber(config.unmovableColumns);
+		this._unmovableColumns += autoGeneratedColumnCount - this._excludedLeftColumns;
+
+		this._initialColumnMap = _createMapping(allItems, 'id');
+		this._excludedLeftVisibleColumnList = visibleItems.slice(0, this._excludedLeftColumns);
+		this._excludedRightVisibleColumnList = visibleItems.slice(itemCount - this._excludedRightColumns);
+
+		this._allColumnList = allItems.map(_toCoralTreeItem);
+		this._allItemMapping = _createMapping(this._allColumnList, 'value');
+
+		this._visibleColumnList = [];
+		for (i = 0; i < itemCount; i++) {
+			var id = visibleItems[i].id;
+			item = this._allItemMapping[id];
+			if (!item) continue; // auto generate column will not include in visible list
+
+			item.selected = true;
+
+			if (i < this._excludedLeftColumns || i >= itemCount - this._excludedRightColumns) {
+				// _excludedLeftColumns and _excludedRightColumns no need to add in _visibleColumnList
+				item.disabled = true;
+			} else {
+				this._visibleColumnList.push(_toCoralItem(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;
+		}
+
+		return _ensurePositiveNumber(itemIndex) >= this._unmovableColumns;
+	}
+
+	/** This will also remove focused state set by ef-item
+	 * @private
+	 */
+	_unhighlightItems() {
+		if(this._highlightedElem) { // There can be only one highlighted Item
+			this._highlightedElem.highlighted = false;
+			this._highlightedElem.removeAttribute('focused'); // WORKAROUND: Focused and highlighted have the same styles in Halo themes
+			this._highlightedElem = null;
+		}
+	}
+
+	/** @private
+	 * @param {number} step if positive highlight will move up, if negative highlight will move down
+	 */
+	_moveHighlightedItems(step) {
+		if (!step) {
+			return;
+		}
+
+		if (!this._highlightedElem) {
+			var selectedIndexes = _getSelectedItemIndexes(this._visibleColumnList);
+			if (!selectedIndexes.length) {
+				return;
+			}
+
+			this._highlightedElem = this._visibleColumnsContainer.children[selectedIndexes[0]];
+			this._highlightedElem.highlighted = true;
+		}
+
+		var pn = this._highlightedElem.parentNode;
+		if(!pn) {
+			return;
+		}
+
+		var chdr = pn.children;
+		var childCount = chdr.length;
+		var i; // highlighted index
+		for(i = 0; i < childCount; ++i) {
+			if(chdr[i] === this._highlightedElem) {
+				break;
+			}
+		}
+		if(i >= childCount) {
+			return;
+		}
+
+		i += step;
+		if (i >= 0 && i < childCount) {
+			this._unhighlightItems();
+			this._highlightedElem = chdr[i];
+			this._highlightedElem.highlighted = true;
+			scrollToItem(pn, i);
+		}
+	}
+
+	/**
+	 * @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');
+	}
+
+	/**
+	 * Set filtering result to "searchResult" element
+	 * @private
+	 * @param {object} e - event object
+	 */
+	_onSearchInputChanged(e) {
+		var firstItem = this._searchInput.data && this._searchInput.data[0];
+		if (firstItem) {
+			this._searchInput.scrollToItem(firstItem);
+		}
+		this._updateSearchResult(e.target.value);
+	}
+
+	/**
+	 * @private
+	 * @param {string} value - search query
+	 */
+	_updateSearchResult(value) {
+		if(!value) {
+			this._filteredColumnList = this._allColumnList;
+			this._filterItemMapping = this._allItemMapping;
+		} else {
+			this._filteredColumnList = filterSearch(this._allColumnList, value.toLocaleLowerCase());
+			this._filterItemMapping = _createMapping(this._filteredColumnList, 'value');
+		}
+
+		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) continue; // ignore disabled item and groupItem
+
+			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
+	 */
+	_handleKeydown(e) {
+		var handled = false;
+		switch (e.keyCode) {
+		case 40: // down
+		case 9: // tab
+			this._moveHighlightedItems(1);
+			handled = true;
+			break;
+		case 38: // up
+			this._moveHighlightedItems(-1);
+			handled = true;
+			break;
+		case 13: // enter
+			if(this._highlightedElem) {
+				this._highlightedElem.click();
+				handled = true;
+			}
+			break;
+		}
+
+		if(handled) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleMouseover(e) {
+		var targetElem = e.target;
+		if (targetElem.highlightable) {
+			if (this._highlightedElem) {
+				if(this._highlightedElem === targetElem) {
+					return;
+				}
+				this._highlightedElem.highlighted = false;
+			}
+			this._highlightedElem = targetElem;
+			this._highlightedElem.highlighted = true;
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleMouseout(e) {
+		var targetElem = e.target;
+		if (targetElem === this._highlightedElem) {
+			targetElem.highlighted = false;
+			this._highlightedElem = null;
+		}
+	}
+
+	/**
+	 * @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
+
+		// click to display description
+		if (this._descriptionBox && this._initialColumnMap[selectedElement.value]) {
+			this._descriptionContainer.textContent = this._initialColumnMap[selectedElement.value].description;
+		}
+
+		if (!selectedElement.highlightable) {
+			return;
+		}
+
+		var list = null;
+		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();
+	}
+
+
+	/**
+	 * 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;
+			}
+		}
+	}
+
+	/**
+	 * 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 => {
+			return this._initialColumnMap[item.value];
+		}); // 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 = [];
+		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);
+		} 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;
+		}
+
+		// 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);
+		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
+	* @private
+	*/
+	_addToVisibleColumn(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 = true;
+			var coralItem = _toCoralItem(item);
+			coralItem.selected = true;
+			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._unhighlightItems();
+		this._pendingButtonUpdate = true;
+	}
+}
+
+customElement('column-selection-dialog')(ColumnSelectionDialog);
+
+export { ColumnSelectionDialog };
+export default ColumnSelectionDialog;