@refinitiv-ui/efx-grid 6.0.40 → 6.0.42

package/lib/core/dist/core.js

@@ -1,644 +1,6 @@
 /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
-
-/***/ 869:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Qr": () => (/* binding */ isEmptyObject),
-/* harmony export */   "kI": () => (/* binding */ cloneObject)
-/* harmony export */ });
-/* unused harmony exports Util, extendObject, deepEqual, arrayToObject, extendProperty, extendArrayProperty, parseCondition, prettifyCss, getShadowRoot, injectCss, isIE, isMac, isTouchDevice, nestedObjectToArray, rgb2Hex, prepareTSVContent */
-/** @namespace */
-var Util = {};
-
-/** This is a shorthand for fetch() API by POST method and with json body <br>
-* WARNING: fetch is not supported in IE (including IE11)
-* @public
-* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
-* @function
-* @param {string} url
-* @param {Object|string} obj
-* @return {!Promise<Response>}
-*/
-Util.post = function(url, obj) { // Not supported in IE
-	return Util._post(url, obj).then(Util.toJSON);
-};
-/** Request a server response from server as text by POST method <br>
-* WARNING: fetch is not supported in IE (including IE11)
-* @public
-* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
-* @function
-* @param {string} url
-* @param {Object|string} obj
-* @return {!Promise<Response>}
-*/
-Util.requestText = function(url, obj) { // Not supported in IE
-	return Util._post(url, obj, "text/plain").then(Util.toText);
-};
-/** Request a server response from server by POST method and with url-encoded body <br>
-* WARNING: fetch is not supported in IE (including IE11)
-* @public
-* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
-* @function
-* @param {string} url
-* @param {string} obj
-* @return {!Promise<Response>}
-*/
-Util.requestByUrlEncoded = function(url, obj) { // Not supported in IE
-	return Util._post(url, obj, "application/x-www-form-urlencoded").then(Util.toJSON);
-};
-
-/** @public
-* @function
-* @param {Response} resp
-* @return {!Promise<Object>}
-*/
-Util.toJSON = function (resp) {
-	if(Util._logError(resp)) {
-		return Promise.reject(resp);
-	}
-	return resp.json();
-};
-/** @public
-* @function
-* @param {Response} resp
-* @return {!Promise<string>}
-*/
-Util.toText = function (resp) {
-	if(Util._logError(resp)) {
-		return Promise.reject(resp);
-	}
-	return resp.text();
-};
-
-/** @private
-* @see {@link https://en.wikipedia.org/wiki/List_of_HTTP_status_codes}
-* @function
-* @param {Response} resp
-* @return {boolean}
-*/
-Util._logError = function(resp) {
-	if(resp && resp.status >= 300) {
-		console.log("Response " + resp.status + ": " + resp.statusText);
-		return true;
-	}
-	return false;
-};
-/** @private
-* @function
-* @param {string} url
-* @param {Object|string} obj
-* @param {string=} contentType
-* @return {!Promise<Response>}
-*/
-Util._post = function(url, obj, contentType) {
-	var options = {
-		method: obj ? "POST" : "GET",
-		headers: { "Content-Type": contentType || "application/json" }
-	};
-	if(obj) {
-		options.body = typeof obj === "string" ? obj : JSON.stringify(obj);
-	}
-
-	return fetch(url, options);
-};
-
-/** WARNING: Only one level of property tree is affected (i.e. no recursive or nested operation). <br>
-* Property with undefined or null value will not have an impact on the object. <br>
-* Existing properties will be overridden.
-* @public
-* @function
-* @param {Object} obj Object that is extended (new properties will be added to this object)
-* @param {Object=} extender Master object (no modification will be made on the extender)
-* @param {Array.<string>=} limiters Specify property to be extended
-* @return {Object}
-*/
-var extendObject = function (obj, extender, limiters) {
-	if(!obj) { // null undefined NaN empty string and 0
-		return null;
-	}
-	if(!extender || obj === extender) {
-		return obj;
-	}
-
-	var key;
-	if(limiters) {
-		var len = limiters.length;
-		for(var i = 0; i < len; ++i) {
-			key = limiters[i];
-			if(key) {
-				extendProperty(obj, extender, key);
-			}
-		}
-	} else {
-		for(key in extender) {
-			extendProperty(obj, extender, key);
-		}
-	}
-	return obj;
-};
-/** WARNING: Only one level of property tree is affected (i.e. no recursive or nested operation). <br>
-* Property with undefined or null value will not be cloned.
-* @public
-* @function
-* @param {Object} obj
-* @param {Array.<string>=} limiters
-* @return {Object}
-*/
-var cloneObject = function (obj, limiters) {
-	return extendObject({}, obj, limiters);
-};
-
-/** Check empty object
-* @public
-* @function
-* @param {Object} obj
-* @return {boolean}=true, if the obj is empty
-*/
-var isEmptyObject = function (obj) {
-	for (var key in obj) {
-		return false;
-	}
-	return true;
-};
-
-/** @public
-* @param {Array=} data
-* @param {Array.<string>=} fields In case of the given data is an array, this param will be used for mapping index to field
-* @return {Object|null}
-*/
-var arrayToObject = function(data, fields) {
-	if(!Array.isArray(data)) {
-		return data;
-	} else if(!fields) {
-		return null;
-	}
-	var ary = data;
-	data = {};
-	var len = ary.length;
-	for(var i = 0; i < len; ++i) {
-		var field = fields[i];
-		// eslint-disable-next-line no-undefined
-		if(field && ary[i] !== undefined) {
-			data[field] = ary[i];
-		}
-	}
-	return data;
-};
-/** Replace the specified property with the value from the extender. If the value is an array, the value will be added to the array instead of replacement
-* @public
-* @function
-* @param {Object} obj
-* @param {Object} extender
-* @param {string} propName
-* @example
-* extendProperty({a: 0}, {a: 1}, "a"); // {a: 1}
-* extendProperty({a: 0}, {b: 1}, "b"); // {a: 0, b: 1}
-* extendProperty({a: [0]}, {a: 1}, "a"); // {a: [0, 1]}
-* extendProperty({a: [0]}, {a: [1, 2]}, "a"); // {a: [0, 1, 2]}
-*/
-var extendProperty = function (obj, extender, propName) {
-	var val = extender[propName];
-	if(val != null) {
-		var objVal = obj[propName];
-		if(Array.isArray(objVal)) {
-			obj[propName] = objVal.concat(val);
-		} else if(Array.isArray(val) && objVal) {
-			obj[propName] = val.concat(objVal); // TODO: Preserve the order
-		} else {
-			obj[propName] = val; // WARNING: Overriding existing data
-		}
-	}
-};
-
-
-/** Compare the values of obj1 and obj2. if they are the same object or have the same value, the result will be true. Otherwise, it will return false.
-* @public
-* @param {*} obj1
-* @param {*} obj2
-* @return {boolean}
-*/
-var deepEqual = function (obj1, obj2) {
-
-	if(obj1 === obj2) {
-		return true;
-	}
-
-	if (typeof obj1 !== typeof obj2) {
-		return false;
-	}
-
-	if (typeof obj1 === "object") {
-
-		// We need to split array and object for performance reason
-		if(Array.isArray(obj1)) {
-			if(obj1.length !== obj2.length) {
-				return false;
-			}
-
-			for (var i = 0; i < obj1.length; i++) {
-				if (!deepEqual(obj1[i], obj2[i])) { // The array may not be a match if the elements are not sorted, so it will not be considered equal if there is a mismatch.
-					return false;
-				}
-			}
-
-		} else {
-
-			if (Object.keys(obj1).length !== Object.keys(obj2).length) {
-				return false;
-			}
-
-			for (var key in obj1) {
-				if (!deepEqual(obj1[key], obj2[key])) {
-					return false;
-				}
-			}
-		}
-
-
-		return true;
-	}
-
-	return false;
-
-};
-/** Array.push() is much faster than Array.concat(). The downside is the parameters must be an array, whereas concat() has no such requirement. <br>
-* This method excels in extending known array property in an object.
-* @public
-* @function
-* @param {Object} obj
-* @param {string} propName
-* @param {*} ary
-* @return {Array} Returns the result of the extended array
-* @see {@link https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki}
-* @example
-* var obj = {};
-* extendArrayProperty(obj, "prop1", 1); // [1]
-* extendArrayProperty(obj, "prop1", 2); // [1, 2]
-* extendArrayProperty(obj, "prop1", [3, 4]); // [1, 2, 3, 4]
-* obj.prop2 = 5;
-* extendArrayProperty(obj, "prop2", 6); // [5, 6]
-* extendArrayProperty(obj, "prop2", [7]); // [5, 6, 7]
-* extendArrayProperty(obj, "prop2", null); // null
-*/
-var extendArrayProperty = function (obj, propName, ary) {
-	var objAry = null;
-	if(ary) {
-		var objVal = obj[propName];
-		if(objVal) {
-			if(Array.isArray(objVal)) {
-				objAry = objVal;
-			} else {
-				objAry = obj[propName] = [objVal];
-			}
-		} else {
-			objAry = obj[propName] = [];
-		}
-		// objAry is guaranteed to be an array at this point
-
-		if(Array.isArray(ary)) {
-			if(ary.length) {
-				if(ary.length > 1) {
-					Array.prototype.push.apply(objAry, ary);
-				} else {
-					objAry.push(ary[0]);
-				}
-			}
-		} else {
-			objAry.push(ary);
-		}
-	}
-	return objAry;
-};
-
-
-/** Regex for matching the field token E.g. '[CF_BID]'
-* @type {!RegExp}
-* @private
-* @const
-*/
-var _bracketExp = (/* unused pure expression or super */ null && (new RegExp(/\[[^\[]*\]/g))); // eslint-disable-line no-useless-escape
-/** @public
-* @function
-* @param {string|Function} expression
-* @return {Function}
-* @example
-* var fn = parseCondition("[CF_BID] >= 10 && [CF_BID] <= 100");
-* window.console.log(fn(25));
-*/
-var parseCondition = function(expression) {
-	if(!expression) {
-		return null;
-	}
-	if(typeof expression !== "string") {
-		return (typeof expression == "function") ? /** @type {Function} */(expression) : null;
-	}
-
-	var brackets = expression.match(_bracketExp); // Retrieving field tokens (anything in between brackets)
-	var map = {}; // For checking duplication
-	var fields = [];
-	var len = brackets ? brackets.length : 0;
-	for(var i = len; --i >= 0;) {
-		var field = brackets[i];
-		if(!map[field]) {
-			map[field] = "f[" + fields.length + "]"; // Create mapping of field token to array with index E.g. { "[CF_BID]": "f[0]" }
-			fields.push(field.substring(1, field.length - 1)); // Strip '[' and ']' of field token to get field name
-		}
-	}
-
-	// Replace the field tokens with rowData of array with index E.g. [CF_BID] ==> rowData[f[0]]
-	expression = expression.replace(_bracketExp, function(match) {
-		return "rowData[" + map[match] + "]";
-	});
-	var finalExp = "(function(f, rowData) { return (" + expression + "); })";
-
-	var fn = null;
-	try {
-		fn = eval(finalExp);
-		fn = fn.bind(null, fields); // Bind fields for matching field name
-	} catch(err) {
-		console.log(err.message);
-	}
-	return (fn) ? fn : null;
-};
-
-
-/** @private
-* @param {string|Array.<string>} item
-* @return {string}
-*/
-var _encloseBracket = function(item) {
-	return Array.isArray(item) ? "{\n" + item.join("\n") + "\n}" : item;
-};
-/** @private
-* @param {string} str
-* @return {string}
-*/
-var _indentBracketContent = function(str){
-	return str.replace(/\n+/g, "\n\t").replace(/\n\t}$/, "\n}");
-};
-/** @public
-* @param {string|Array} css
-* @return {string} prettified CSS string
-* @example
-* prettifyCss(["div", [
-*   "color: red;",
-*   "padding: 20px;"
-* ],
-* ".class", [
-*   "margin: 0;"
-* ]
-* ]);
-*/
-var prettifyCss = function(css) {
-	if(css) {
-		var cssStr = "";
-		if (Array.isArray(css)) {
-			var ary = css.map(_encloseBracket);
-			cssStr = ary.join("\n").replace(/{\s*{/g, "{").replace(/\s+{/g, " {");
-		} else {
-			cssStr = (typeof css === "string") ? css : css + "";
-		}
-
-		if(cssStr) {
-			return cssStr.replace(/{[\w\W]*?}/g, _indentBracketContent);
-		}
-	}
-	return "";
-};
-/** Get shadow root of the given element regardless of whether the element is in the DOM or not. The immediate shadow root parent is returned in case of nested shadow roots. Any other case return null.
-* @public
-* @param {Element} elem
-* @return {DocumentFragment}
-*/
-var getShadowRoot = function(elem) {
-	if(elem) {
-		var rootNode;
-		if(elem.shadowRoot) {
-			rootNode = elem.shadowRoot;
-		} else if(elem.getRootNode) {
-			rootNode = elem.getRootNode();
-		}
-		if(rootNode) { // getRootNode does not supported in IE. It should be implemented by the polyfills
-			if(rootNode !== document) { // element that is in the DOM and not in the shadow has document as its root node
-				if(rootNode !== elem) { // element that is NOT in the DOM and not in the shadow has itself as its root node
-					return rootNode;
-				}
-			}
-		}
-	}
-	return null;
-};
-/** Attach style tag to the proper document (in case of element inside a shadow root)
-* @public
-* @param {string} cssStr Valid CSS string (e.g. "div {color: red;}")
-* @param {Element=} targetContext Element that needs the CSS
-* @return {Element} New style tag
-*/
-var injectCss = function(cssStr, targetContext) {
-	if(!cssStr) {
-		return null;
-	}
-
-	var styleTag = document.createElement("style");
-	styleTag.textContent = "\n" + cssStr + "\n";
-
-	var styleHost = getShadowRoot(targetContext);
-	var isInShadow = true;
-	if(!styleHost) {
-		isInShadow = false;
-		styleHost = document.head;
-	}
-
-	// Find a place to insert the style tag
-	var beforeElem;
-	if(isInShadow) {
-		if(styleHost.children && styleHost.children.length) {
-			beforeElem = styleHost.children[0];
-		}
-	}
-	if(beforeElem) {
-		styleHost.insertBefore(styleTag, beforeElem);
-	} else {
-		styleHost.appendChild(styleTag);
-	}
-	return styleTag;
-};
-
-/** return true if browser is IE or Edge
-* @public
-* @return {boolean}
-*/
-var isIE = function () {
-	var ua = window.navigator.userAgent;
-	return (ua.indexOf('MSIE ') > 0) || (ua.indexOf('Trident/') > 0) || (ua.indexOf('Edge/') > 0);
-};
-
-/** return true if device is mac
-* @public
-* @return {boolean}
-*/
-var isMac = function () {
-	return /Mac/.test(navigator.platform);
-};
-
-/** Return true if device is mac
-* @public
-* @return {boolean}
-*/
-var isTouchDevice = function () {
-	if ((navigator["maxTouchPoints"] && navigator["maxTouchPoints"] < 256) ||
-		(navigator["msMaxTouchPoints"] && navigator["msMaxTouchPoints"] < 256)) {
-		return true;
-	}
-	return false;
-};
-
-/** parse nested object in to array
-* @public
-* @param {Object} obj
-* @param {Array=} ary
-* @return {Array}
-*/
-var nestedObjectToArray = function (obj, ary) {
-	if (!ary) {
-		ary = [];
-	}
-	for (var key in obj) {
-		var element = obj[key];
-		if ('object' === typeof element) {
-			nestedObjectToArray(element, ary);
-		} else {
-			ary.push(element);
-		}
-	}
-	return ary;
-};
-
-/** Convert CSS rgb or rgba formats to CSS hex color string (# prefix)
-* @public
-* @param {string} rgbCode
-* @return {string}
-* @example
-* rgb2Hex("rgb(255, 255, 0)"); // "#FFFF00"
-* rgb2Hex("rgba(255, 255, 0, 1)"); // "#FFFF00"
-* rgb2Hex("255 255.0"); // "#FFFF00"
-* rgb2Hex("#FFFF00"); // "#FFFF00"
-* rgb2Hex("#1a1a1a"); // "#1a1a1a"
-* rgb2Hex("2552550"); // "2552550"
-* rgb2Hex("invalid"); // "invalid"
-* rgb2Hex(null); // ""
-*/
-var rgb2Hex = function (rgbCode) {
-	if(!rgbCode || typeof rgbCode !== "string") {
-		return "";
-	}
-	if(rgbCode.charAt(0) === "#") {
-		return rgbCode;
-	}
-	var rgb = rgbCode.match(/\d+/g);
-	if(!rgb || rgb.length < 3) {
-		return rgbCode;
-	}
-
-	var hex = "#";
-	for(var i = 0; i < 3; i++) {
-		var num = +rgb[i];
-		if(!(num >= 16)) { // Handle NaN case
-			hex += "0";
-		}
-		hex += (num) ? num.toString(16).toUpperCase() : "0";
-	}
-	return hex;
-};
-
-/** transform data to tab seperated value
-* @public
-* @param {*} data
-* @return {string}
-*/
-var prepareTSVContent = function (data) {
-	if (data == null) {
-		return "";
-	}
-
-	var content = (typeof data === 'string') ? data : data.toString();
-
-	if (!content.length) { return ""; }
-
-	// Replace any new line and tab
-	if (content.indexOf("\n") >= 0) {
-		content = content.replace(/[\r\n]/g, " ");
-	}
-
-	if (content.indexOf("\t") >= 0) {
-		content = content.replace(/\t/g, " ");
-	}
-
-	// Trim front and back spaces
-	if (content.charAt(0) === " " || content.charAt(content.length - 1) === " ") {
-		content = content.trim();
-	}
-
-	return content;
-};
-
-/* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = ((/* unused pure expression or super */ null && (Util)));
-
-
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/************************************************************************/
 var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-(() => {
 
 // UNUSED EXPORTS: Cell, CellFloatingPanel, CellSpan, CellSpans, Column, ColumnStats, Conflator, Core, DataCache, DataTable, DataView, ElementFrameWork, ElementWrapper, EventDispatcher, HScrollbar, ILayoutGrid, LayoutGrid, Reverter, Scrollbar, SectionSettings, SelectionList, SortableTitlePlugin, TrackLayout, VScrollbar, VirtualizedLayoutGrid, Virtualizer, default
 
@@ -647,23 +9,46 @@ var __webpack_exports__ = {};
 * @namespace
 */
 var Util = {};
+
+// TODO: move to tr-grid-util
+
 /** @const
 * @type {boolean}
 */
-Util.isIE = Util.isIE || (function () {
+Util.isIE = (function () {
 	var ua = window.navigator.userAgent;
 	return (ua.indexOf('MSIE ') > 0) || (ua.indexOf('Trident/') > 0) || (ua.indexOf('Edge/') > 0);
 }());
 /** @const
 * @type {boolean}
 */
-Util.isTouchDevice = Util.isTouchDevice || (function () {
+Util.isTouchDevice = (function () {
 	if ((navigator["maxTouchPoints"] && navigator["maxTouchPoints"] < 256) ||
 		(navigator["msMaxTouchPoints"] && navigator["msMaxTouchPoints"] < 256)) {
 		return true;
 	}
 	return false;
 }());
+/** @const
+* @type {boolean}
+*/
+Util.isSafari = (function () {
+	var rejectedExpression = /Chrome|Android|CriOS|FxiOS|EdgiOS/i;
+	var safariExpression = /Safari/i;
+	var agent = navigator.userAgent;
+	if (rejectedExpression.test(agent)) {
+		return false;
+	}
+	return safariExpression.test(agent);
+}());
+
+/** @public
+ * @type {boolean}
+ */
+Util.isMobile = (function () {
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}());
+
 /** Retrieve an element from Novakit control or any object that has "getElement" method.
 * @public
 * @ignore
@@ -1009,13 +394,6 @@ Util._preventDefault = function (e) {
 	e.stopPropagation();
 };
 
-/** @public
- * @type {boolean}
- */
-Util.isMobile = Util.isMobile || (function () {
-	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}());
-
 /* harmony default export */ const util = (Util);
 
 
@@ -11229,236 +10607,761 @@ LayoutGrid.prototype._dispatchRowHeightChangedEvent = function (from, to) {
 	if (from >= to) {
 		return;
 	}
-
-	var e = {};
-
-	e["rowIndex"] = from;
-	e["changeLength"] = to - from;
-	this._dispatch("rowHeightChanged", e);
+
+	var e = {};
+
+	e["rowIndex"] = from;
+	e["changeLength"] = to - from;
+	this._dispatch("rowHeightChanged", e);
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {CellSpan} cellSpan
+ */
+LayoutGrid.prototype._updateCellSpanSize = function (indexX, indexY, cellSpan) {
+	var cell = this._getCell(indexX, indexY);
+
+	if (cell == null) {
+		return;
+	}
+
+	if (cellSpan && cellSpan.colSpan > 1) {
+		cell.setWidth(this.getCellWidth(indexX, indexY));
+		this._columns[indexX].disableDeactivation(); // HACK: If a cell has column span, the column cannot be virtualized
+	} else {
+		cell.setWidth(-1);
+	}
+
+	if (cellSpan && cellSpan.rowSpan > 1) {
+		cell.setHeight(this.getCellHeight(indexX, indexY)); /////
+	} else {
+		var height = this._trackY.isAtDefaultSize(indexY) ? -1 : this._trackY.getLaneSize(indexY);
+
+		cell.setHeight(height);
+	}
+};
+
+/**
+ * @private
+ * @param {Array.<CellSpan>} cellSpans
+ */
+LayoutGrid.prototype._updateCellSpanLayout = function (cellSpans) {
+	if (cellSpans == null) { return; }
+
+	for (var i = cellSpans.length; --i >= 0; ) {
+		var cellSpan = cellSpans[i];
+
+		this._updateCellSpanSize(cellSpan.indexX, cellSpan.indexY, cellSpan);
+	}
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {!CellSpan} cellSpan
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpan = function (indexX, indexY, cellSpan, adding) {
+	this._updateCellSpanSize(indexX, indexY, adding ? cellSpan : null);
+	this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, adding);
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {number} colSpan
+ * @param {number} rowSpan
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpanClass = function (indexX, indexY, colSpan, rowSpan, adding) {
+	var column;
+
+	for (var c = 0; c < colSpan; ++c) {
+		column = this._columns[indexX + c];
+
+		if (!column) {
+			break;
+		}
+
+		column.collapseCells(indexY, rowSpan, adding, (c === 0), (c > 0));
+	}
+
+	var cell = this._getCell(indexX, indexY);
+
+	if (cell) {
+		cell._colSpan = (adding) ? colSpan : 1;
+		cell._rowSpan = (adding) ? rowSpan : 1; // For quick rendering
+	}
+};
+
+/**
+ * @private
+ * @param {Array.<CellSpan>} cellSpans
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
+	if (cellSpans == null) { return; }
+
+	for (var i = cellSpans.length; --i >= 0; ) {
+		var cellSpan = cellSpans[i];
+
+		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, adding);
+	}
+};
+
+/**
+ * @private
+ * @param {Object} e
+ */
+LayoutGrid.prototype._onMouseMove = function (e) {
+	var target = e["target"];
+
+	var cellElement = util.closestElement(target, "cell");
+	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
+	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
+		var colElement = util.closestElement(target, "column");
+		colIndex =	this.getColumnIndex(colElement);
+	}
+	var rowIndex = this.getCellIndex(colIndex, cellElement);
+
+	this.setRowHighlight(rowIndex);
+};
+
+/**
+ * @private
+ * @param {Object} e
+ */
+LayoutGrid.prototype._onMouseOut = function (e) {
+	var rel = e.relatedTarget;
+
+	if (rel) {
+		var thisElem = this._element;
+
+		while (rel.parentNode !== null) {
+			rel = rel.parentNode;
+
+			if (rel === thisElem) {
+				return;
+			}
+		}
+	}
+
+	this.setRowHighlight(-1);
+};
+
+/**
+ * @private
+ * @param {number} rowIndex
+ */
+LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
+	var selected = this._selectionList.getSelection(rowIndex);
+	this._enableStretchCellClass(rowIndex, "selected-row", selected);
+	this.enableRowClass(rowIndex, "selected-row", selected);
+};
+
+/** @private
+* @param {number} rowIndex
+*/
+LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
+	this._enableStretchCellClass(rowIndex, "selected-row", true);
+	this.enableRowClass(rowIndex, "selected-row", true);
+};
+
+/**
+ * @private
+ * @param {number} rowIndex
+ */
+LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
+	this._enableStretchCellClass(rowIndex, "selected-row", false);
+	this.enableRowClass(rowIndex, "selected-row", false);
+};
+
+/**
+ * @public
+ * @ignore
+ */
+LayoutGrid.prototype._onEnterDocument = function () {
+	if (!this._initialized && this.getParent()) {
+		for (var c = 0; c < this._colCount; ++c) {
+			this._columns[c].enableAutoStyleUpdating();
+		}
+
+		this._syncLayoutToColumns(0);
+		this._initialized = true;
+	}
+};
+
+/** @public
+* @ignore
+* @param {*} ctx
+*/
+LayoutGrid.prototype._setContext = function(ctx) {
+	this._ctx = ctx;
+};
+
+/** @public
+* @ignore
+* @return {*} ctx
+*/
+LayoutGrid.prototype._getContext = function () {
+	return this._ctx;
+};
+
+/** This is a WORKAROUND to fix Internet Explorer couldn't render top 50% with translateX -50% correctly
+ * @private
+*/
+LayoutGrid.prototype._resetTransformIETimer = function () {
+	if (util.isIE) {
+		if(!this._transformIETimer) {
+			this.enableClass("reset-transform");
+			this._transformIETimer = setTimeout(this._onResetTransformIE, 20);
+		}
+	}
+};
+/** @private
+*/
+LayoutGrid.prototype._onResetTransformIE = function () {
+	this._transformIETimer = 0;
+	this.enableClass("reset-transform", false);
+};
+
+LayoutGrid._proto = LayoutGrid.prototype;
+
+/* harmony default export */ const grid_LayoutGrid = (LayoutGrid);
+
+
+;// CONCATENATED MODULE: ./node_modules/tr-grid-util/es6/Util.js
+/** @namespace */
+var Util_Util = {};
+
+/** This is a shorthand for fetch() API by POST method and with json body <br>
+* WARNING: fetch is not supported in IE (including IE11)
+* @public
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
+* @function
+* @param {string} url
+* @param {Object|string} obj
+* @return {!Promise<Response>}
+*/
+Util_Util.post = function(url, obj) { // Not supported in IE
+	return Util_Util._post(url, obj).then(Util_Util.toJSON);
+};
+/** Request a server response from server as text by POST method <br>
+* WARNING: fetch is not supported in IE (including IE11)
+* @public
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
+* @function
+* @param {string} url
+* @param {Object|string} obj
+* @return {!Promise<Response>}
+*/
+Util_Util.requestText = function(url, obj) { // Not supported in IE
+	return Util_Util._post(url, obj, "text/plain").then(Util_Util.toText);
+};
+/** Request a server response from server by POST method and with url-encoded body <br>
+* WARNING: fetch is not supported in IE (including IE11)
+* @public
+* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch}
+* @function
+* @param {string} url
+* @param {string} obj
+* @return {!Promise<Response>}
+*/
+Util_Util.requestByUrlEncoded = function(url, obj) { // Not supported in IE
+	return Util_Util._post(url, obj, "application/x-www-form-urlencoded").then(Util_Util.toJSON);
+};
+
+/** @public
+* @function
+* @param {Response} resp
+* @return {!Promise<Object>}
+*/
+Util_Util.toJSON = function (resp) {
+	if(Util_Util._logError(resp)) {
+		return Promise.reject(resp);
+	}
+	return resp.json();
+};
+/** @public
+* @function
+* @param {Response} resp
+* @return {!Promise<string>}
+*/
+Util_Util.toText = function (resp) {
+	if(Util_Util._logError(resp)) {
+		return Promise.reject(resp);
+	}
+	return resp.text();
+};
+
+/** @private
+* @see {@link https://en.wikipedia.org/wiki/List_of_HTTP_status_codes}
+* @function
+* @param {Response} resp
+* @return {boolean}
+*/
+Util_Util._logError = function(resp) {
+	if(resp && resp.status >= 300) {
+		console.log("Response " + resp.status + ": " + resp.statusText);
+		return true;
+	}
+	return false;
+};
+/** @private
+* @function
+* @param {string} url
+* @param {Object|string} obj
+* @param {string=} contentType
+* @return {!Promise<Response>}
+*/
+Util_Util._post = function(url, obj, contentType) {
+	var options = {
+		method: obj ? "POST" : "GET",
+		headers: { "Content-Type": contentType || "application/json" }
+	};
+	if(obj) {
+		options.body = typeof obj === "string" ? obj : JSON.stringify(obj);
+	}
+
+	return fetch(url, options);
+};
+
+/** WARNING: Only one level of property tree is affected (i.e. no recursive or nested operation). <br>
+* Property with undefined or null value will not have an impact on the object. <br>
+* Existing properties will be overridden.
+* @public
+* @function
+* @param {Object} obj Object that is extended (new properties will be added to this object)
+* @param {Object=} extender Master object (no modification will be made on the extender)
+* @param {Array.<string>=} limiters Specify property to be extended
+* @return {Object}
+*/
+var extendObject = function (obj, extender, limiters) {
+	if(!obj) { // null undefined NaN empty string and 0
+		return null;
+	}
+	if(!extender || obj === extender) {
+		return obj;
+	}
+
+	var key;
+	if(limiters) {
+		var len = limiters.length;
+		for(var i = 0; i < len; ++i) {
+			key = limiters[i];
+			if(key) {
+				extendProperty(obj, extender, key);
+			}
+		}
+	} else {
+		for(key in extender) {
+			extendProperty(obj, extender, key);
+		}
+	}
+	return obj;
+};
+/** WARNING: Only one level of property tree is affected (i.e. no recursive or nested operation). <br>
+* Property with undefined or null value will not be cloned.
+* @public
+* @function
+* @param {Object} obj
+* @param {Array.<string>=} limiters
+* @return {Object}
+*/
+var cloneObject = function (obj, limiters) {
+	return extendObject({}, obj, limiters);
+};
+
+/** Check empty object
+* @public
+* @function
+* @param {Object} obj
+* @return {boolean}=true, if the obj is empty
+*/
+var isEmptyObject = function (obj) {
+	for (var key in obj) {
+		return false;
+	}
+	return true;
+};
+
+/** @public
+* @param {Array=} data
+* @param {Array.<string>=} fields In case of the given data is an array, this param will be used for mapping index to field
+* @return {Object|null}
+*/
+var arrayToObject = function(data, fields) {
+	if(!Array.isArray(data)) {
+		return data;
+	} else if(!fields) {
+		return null;
+	}
+	var ary = data;
+	data = {};
+	var len = ary.length;
+	for(var i = 0; i < len; ++i) {
+		var field = fields[i];
+		// eslint-disable-next-line no-undefined
+		if(field && ary[i] !== undefined) {
+			data[field] = ary[i];
+		}
+	}
+	return data;
+};
+/** Replace the specified property with the value from the extender. If the value is an array, the value will be added to the array instead of replacement
+* @public
+* @function
+* @param {Object} obj
+* @param {Object} extender
+* @param {string} propName
+* @example
+* extendProperty({a: 0}, {a: 1}, "a"); // {a: 1}
+* extendProperty({a: 0}, {b: 1}, "b"); // {a: 0, b: 1}
+* extendProperty({a: [0]}, {a: 1}, "a"); // {a: [0, 1]}
+* extendProperty({a: [0]}, {a: [1, 2]}, "a"); // {a: [0, 1, 2]}
+*/
+var extendProperty = function (obj, extender, propName) {
+	var val = extender[propName];
+	if(val != null) {
+		var objVal = obj[propName];
+		if(Array.isArray(objVal)) {
+			obj[propName] = objVal.concat(val);
+		} else if(Array.isArray(val) && objVal) {
+			obj[propName] = val.concat(objVal); // TODO: Preserve the order
+		} else {
+			obj[propName] = val; // WARNING: Overriding existing data
+		}
+	}
 };
 
-/**
- * @private
- * @param {number} indexX
- * @param {number} indexY
- * @param {CellSpan} cellSpan
- */
-LayoutGrid.prototype._updateCellSpanSize = function (indexX, indexY, cellSpan) {
-	var cell = this._getCell(indexX, indexY);
 
-	if (cell == null) {
-		return;
-	}
+/** Compare the values of obj1 and obj2. if they are the same object or have the same value, the result will be true. Otherwise, it will return false.
+* @public
+* @param {*} obj1
+* @param {*} obj2
+* @return {boolean}
+*/
+var deepEqual = function (obj1, obj2) {
 
-	if (cellSpan && cellSpan.colSpan > 1) {
-		cell.setWidth(this.getCellWidth(indexX, indexY));
-		this._columns[indexX].disableDeactivation(); // HACK: If a cell has column span, the column cannot be virtualized
-	} else {
-		cell.setWidth(-1);
+	if(obj1 === obj2) {
+		return true;
 	}
 
-	if (cellSpan && cellSpan.rowSpan > 1) {
-		cell.setHeight(this.getCellHeight(indexX, indexY)); /////
-	} else {
-		var height = this._trackY.isAtDefaultSize(indexY) ? -1 : this._trackY.getLaneSize(indexY);
-
-		cell.setHeight(height);
+	if (typeof obj1 !== typeof obj2) {
+		return false;
 	}
-};
-
-/**
- * @private
- * @param {Array.<CellSpan>} cellSpans
- */
-LayoutGrid.prototype._updateCellSpanLayout = function (cellSpans) {
-	if (cellSpans == null) { return; }
 
-	for (var i = cellSpans.length; --i >= 0; ) {
-		var cellSpan = cellSpans[i];
+	if (typeof obj1 === "object") {
 
-		this._updateCellSpanSize(cellSpan.indexX, cellSpan.indexY, cellSpan);
-	}
-};
+		// We need to split array and object for performance reason
+		if(Array.isArray(obj1)) {
+			if(obj1.length !== obj2.length) {
+				return false;
+			}
 
-/**
- * @private
- * @param {number} indexX
- * @param {number} indexY
- * @param {!CellSpan} cellSpan
- * @param {boolean} adding
- */
-LayoutGrid.prototype._updateCellSpan = function (indexX, indexY, cellSpan, adding) {
-	this._updateCellSpanSize(indexX, indexY, adding ? cellSpan : null);
-	this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, adding);
-};
+			for (var i = 0; i < obj1.length; i++) {
+				if (!deepEqual(obj1[i], obj2[i])) { // The array may not be a match if the elements are not sorted, so it will not be considered equal if there is a mismatch.
+					return false;
+				}
+			}
 
-/**
- * @private
- * @param {number} indexX
- * @param {number} indexY
- * @param {number} colSpan
- * @param {number} rowSpan
- * @param {boolean} adding
- */
-LayoutGrid.prototype._updateCellSpanClass = function (indexX, indexY, colSpan, rowSpan, adding) {
-	var column;
+		} else {
 
-	for (var c = 0; c < colSpan; ++c) {
-		column = this._columns[indexX + c];
+			if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+				return false;
+			}
 
-		if (!column) {
-			break;
+			for (var key in obj1) {
+				if (!deepEqual(obj1[key], obj2[key])) {
+					return false;
+				}
+			}
 		}
 
-		column.collapseCells(indexY, rowSpan, adding, (c === 0), (c > 0));
-	}
-
-	var cell = this._getCell(indexX, indexY);
 
-	if (cell) {
-		cell._colSpan = (adding) ? colSpan : 1;
-		cell._rowSpan = (adding) ? rowSpan : 1; // For quick rendering
+		return true;
 	}
-};
 
-/**
- * @private
- * @param {Array.<CellSpan>} cellSpans
- * @param {boolean} adding
- */
-LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
-	if (cellSpans == null) { return; }
+	return false;
 
-	for (var i = cellSpans.length; --i >= 0; ) {
-		var cellSpan = cellSpans[i];
+};
+/** Array.push() is much faster than Array.concat(). The downside is the parameters must be an array, whereas concat() has no such requirement. <br>
+* This method excels in extending known array property in an object.
+* @public
+* @function
+* @param {Object} obj
+* @param {string} propName
+* @param {*} ary
+* @return {Array} Returns the result of the extended array
+* @see {@link https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki}
+* @example
+* var obj = {};
+* extendArrayProperty(obj, "prop1", 1); // [1]
+* extendArrayProperty(obj, "prop1", 2); // [1, 2]
+* extendArrayProperty(obj, "prop1", [3, 4]); // [1, 2, 3, 4]
+* obj.prop2 = 5;
+* extendArrayProperty(obj, "prop2", 6); // [5, 6]
+* extendArrayProperty(obj, "prop2", [7]); // [5, 6, 7]
+* extendArrayProperty(obj, "prop2", null); // null
+*/
+var extendArrayProperty = function (obj, propName, ary) {
+	var objAry = null;
+	if(ary) {
+		var objVal = obj[propName];
+		if(objVal) {
+			if(Array.isArray(objVal)) {
+				objAry = objVal;
+			} else {
+				objAry = obj[propName] = [objVal];
+			}
+		} else {
+			objAry = obj[propName] = [];
+		}
+		// objAry is guaranteed to be an array at this point
 
-		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, adding);
+		if(Array.isArray(ary)) {
+			if(ary.length) {
+				if(ary.length > 1) {
+					Array.prototype.push.apply(objAry, ary);
+				} else {
+					objAry.push(ary[0]);
+				}
+			}
+		} else {
+			objAry.push(ary);
+		}
 	}
+	return objAry;
 };
 
-/**
- * @private
- * @param {Object} e
- */
-LayoutGrid.prototype._onMouseMove = function (e) {
-	var target = e["target"];
+/** @private
+* @param {string|Array.<string>} item
+* @return {string}
+*/
+var _encloseBracket = function(item) {
+	return Array.isArray(item) ? "{\n" + item.join("\n") + "\n}" : item;
+};
+/** @private
+* @param {string} str
+* @return {string}
+*/
+var _indentBracketContent = function(str){
+	return str.replace(/\n+/g, "\n\t").replace(/\n\t}$/, "\n}");
+};
+/** @public
+* @param {string|Array} css
+* @return {string} prettified CSS string
+* @example
+* prettifyCss(["div", [
+*   "color: red;",
+*   "padding: 20px;"
+* ],
+* ".class", [
+*   "margin: 0;"
+* ]
+* ]);
+*/
+var prettifyCss = function(css) {
+	if(css) {
+		var cssStr = "";
+		if (Array.isArray(css)) {
+			var ary = css.map(_encloseBracket);
+			cssStr = ary.join("\n").replace(/{\s*{/g, "{").replace(/\s+{/g, " {");
+		} else {
+			cssStr = (typeof css === "string") ? css : css + "";
+		}
 
-	var cellElement = util.closestElement(target, "cell");
-	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
-	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
-		var colElement = util.closestElement(target, "column");
-		colIndex =	this.getColumnIndex(colElement);
+		if(cssStr) {
+			return cssStr.replace(/{[\w\W]*?}/g, _indentBracketContent);
+		}
 	}
-	var rowIndex = this.getCellIndex(colIndex, cellElement);
-
-	this.setRowHighlight(rowIndex);
+	return "";
 };
-
-/**
- * @private
- * @param {Object} e
- */
-LayoutGrid.prototype._onMouseOut = function (e) {
-	var rel = e.relatedTarget;
-
-	if (rel) {
-		var thisElem = this._element;
-
-		while (rel.parentNode !== null) {
-			rel = rel.parentNode;
-
-			if (rel === thisElem) {
-				return;
+/** Get shadow root of the given element regardless of whether the element is in the DOM or not. The immediate shadow root parent is returned in case of nested shadow roots. Any other case return null.
+* @public
+* @param {Element} elem
+* @return {DocumentFragment}
+*/
+var getShadowRoot = function(elem) {
+	if(elem) {
+		var rootNode;
+		if(elem.shadowRoot) {
+			rootNode = elem.shadowRoot;
+		} else if(elem.getRootNode) {
+			rootNode = elem.getRootNode();
+		}
+		if(rootNode) { // getRootNode does not supported in IE. It should be implemented by the polyfills
+			if(rootNode !== document) { // element that is in the DOM and not in the shadow has document as its root node
+				if(rootNode !== elem) { // element that is NOT in the DOM and not in the shadow has itself as its root node
+					return rootNode;
+				}
 			}
 		}
 	}
-
-	this.setRowHighlight(-1);
+	return null;
 };
+/** Attach style tag to the proper document (in case of element inside a shadow root)
+* @public
+* @param {string} cssStr Valid CSS string (e.g. "div {color: red;}")
+* @param {Element=} targetContext Element that needs the CSS
+* @return {Element} New style tag
+*/
+var injectCss = function(cssStr, targetContext) {
+	if(!cssStr) {
+		return null;
+	}
 
-/**
- * @private
- * @param {number} rowIndex
- */
-LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
-	var selected = this._selectionList.getSelection(rowIndex);
-	this._enableStretchCellClass(rowIndex, "selected-row", selected);
-	this.enableRowClass(rowIndex, "selected-row", selected);
+	var styleTag = document.createElement("style");
+	styleTag.textContent = "\n" + cssStr + "\n";
+
+	var styleHost = getShadowRoot(targetContext);
+	var isInShadow = true;
+	if(!styleHost) {
+		isInShadow = false;
+		styleHost = document.head;
+	}
+
+	// Find a place to insert the style tag
+	var beforeElem;
+	if(isInShadow) {
+		if(styleHost.children && styleHost.children.length) {
+			beforeElem = styleHost.children[0];
+		}
+	}
+	if(beforeElem) {
+		styleHost.insertBefore(styleTag, beforeElem);
+	} else {
+		styleHost.appendChild(styleTag);
+	}
+	return styleTag;
 };
 
-/** @private
-* @param {number} rowIndex
+/** return true if browser is IE or Edge
+* @public
+* @return {boolean}
 */
-LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
-	this._enableStretchCellClass(rowIndex, "selected-row", true);
-	this.enableRowClass(rowIndex, "selected-row", true);
+var isIE = function () {
+	var ua = window.navigator.userAgent;
+	return (ua.indexOf('MSIE ') > 0) || (ua.indexOf('Trident/') > 0) || (ua.indexOf('Edge/') > 0);
 };
 
-/**
- * @private
- * @param {number} rowIndex
- */
-LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
-	this._enableStretchCellClass(rowIndex, "selected-row", false);
-	this.enableRowClass(rowIndex, "selected-row", false);
+/** return true if device is mac
+* @public
+* @return {boolean}
+*/
+var isMac = function () {
+	return /Mac/.test(navigator.platform);
 };
 
-/**
- * @public
- * @ignore
- */
-LayoutGrid.prototype._onEnterDocument = function () {
-	if (!this._initialized && this.getParent()) {
-		for (var c = 0; c < this._colCount; ++c) {
-			this._columns[c].enableAutoStyleUpdating();
-		}
-
-		this._syncLayoutToColumns(0);
-		this._initialized = true;
+/** Return true if device is mac
+* @public
+* @return {boolean}
+*/
+var isTouchDevice = function () {
+	if ((navigator["maxTouchPoints"] && navigator["maxTouchPoints"] < 256) ||
+		(navigator["msMaxTouchPoints"] && navigator["msMaxTouchPoints"] < 256)) {
+		return true;
 	}
+	return false;
 };
 
-/** @public
-* @ignore
-* @param {*} ctx
+/** parse nested object in to array
+* @public
+* @param {Object} obj
+* @param {Array=} ary
+* @return {Array}
 */
-LayoutGrid.prototype._setContext = function(ctx) {
-	this._ctx = ctx;
+var nestedObjectToArray = function (obj, ary) {
+	if (!ary) {
+		ary = [];
+	}
+	for (var key in obj) {
+		var element = obj[key];
+		if ('object' === typeof element) {
+			nestedObjectToArray(element, ary);
+		} else {
+			ary.push(element);
+		}
+	}
+	return ary;
 };
 
-/** @public
-* @ignore
-* @return {*} ctx
+/** Convert CSS rgb or rgba formats to CSS hex color string (# prefix)
+* @public
+* @param {string} rgbCode
+* @return {string}
+* @example
+* rgb2Hex("rgb(255, 255, 0)"); // "#FFFF00"
+* rgb2Hex("rgba(255, 255, 0, 1)"); // "#FFFF00"
+* rgb2Hex("255 255.0"); // "#FFFF00"
+* rgb2Hex("#FFFF00"); // "#FFFF00"
+* rgb2Hex("#1a1a1a"); // "#1a1a1a"
+* rgb2Hex("2552550"); // "2552550"
+* rgb2Hex("invalid"); // "invalid"
+* rgb2Hex(null); // ""
 */
-LayoutGrid.prototype._getContext = function () {
-	return this._ctx;
-};
+var rgb2Hex = function (rgbCode) {
+	if(!rgbCode || typeof rgbCode !== "string") {
+		return "";
+	}
+	if(rgbCode.charAt(0) === "#") {
+		return rgbCode;
+	}
+	var rgb = rgbCode.match(/\d+/g);
+	if(!rgb || rgb.length < 3) {
+		return rgbCode;
+	}
 
-/** This is a WORKAROUND to fix Internet Explorer couldn't render top 50% with translateX -50% correctly
- * @private
-*/
-LayoutGrid.prototype._resetTransformIETimer = function () {
-	if (util.isIE) {
-		if(!this._transformIETimer) {
-			this.enableClass("reset-transform");
-			this._transformIETimer = setTimeout(this._onResetTransformIE, 20);
+	var hex = "#";
+	for(var i = 0; i < 3; i++) {
+		var num = +rgb[i];
+		if(!(num >= 16)) { // Handle NaN case
+			hex += "0";
 		}
+		hex += (num) ? num.toString(16).toUpperCase() : "0";
 	}
+	return hex;
 };
-/** @private
+
+/** transform data to tab seperated value
+* @public
+* @param {*} data
+* @return {string}
 */
-LayoutGrid.prototype._onResetTransformIE = function () {
-	this._transformIETimer = 0;
-	this.enableClass("reset-transform", false);
-};
+var prepareTSVContent = function (data) {
+	if (data == null) {
+		return "";
+	}
 
-LayoutGrid._proto = LayoutGrid.prototype;
+	var content = (typeof data === 'string') ? data : data.toString();
 
-/* harmony default export */ const grid_LayoutGrid = (LayoutGrid);
+	if (!content.length) { return ""; }
+
+	// Replace any new line and tab
+	if (content.indexOf("\n") >= 0) {
+		content = content.replace(/[\r\n]/g, " ");
+	}
+
+	if (content.indexOf("\t") >= 0) {
+		content = content.replace(/\t/g, " ");
+	}
+
+	// Trim front and back spaces
+	if (content.charAt(0) === " " || content.charAt(content.length - 1) === " ") {
+		content = content.trim();
+	}
+
+	return content;
+};
+
+/* harmony default export */ const es6_Util = ((/* unused pure expression or super */ null && (Util_Util)));
 
 
-// EXTERNAL MODULE: ./node_modules/tr-grid-util/es6/Util.js
-var es6_Util = __webpack_require__(869);
 ;// CONCATENATED MODULE: ./node_modules/tr-grid-util/es6/GroupDefinitions.js
 
 
@@ -11552,7 +11455,7 @@ GroupDefinitions.getLeafDescendants = function (groupMap, groupId) {
 * @return {Object}
 */
 GroupDefinitions._cloneObject = function(obj) {
-	var newObj = (0,es6_Util/* cloneObject */.kI)(obj);
+	var newObj = cloneObject(obj);
 	if(Array.isArray(newObj.children)) {
 		newObj.children = newObj.children;
 	} else {
@@ -25443,6 +25346,7 @@ var Core_Core = function (opt_initializer) {
 
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
+	_t._onGridClicked = _t._onGridClicked.bind(_t);
 
 	_t._onWindowResize = _t._onWindowResize.bind(_t);
 	_t._onSectionDataChanged = _t._onSectionDataChanged.bind(_t);
@@ -25528,11 +25432,16 @@ var Core_Core = function (opt_initializer) {
 	_t._hscrollbar.setOtherScrollbar(_t._vscrollbar);
 	_t._vscrollbar.setOtherScrollbar(_t._hscrollbar);
 
-	if (util.isMobile) {
+	if (util.isMobile || util.isTouchDevice) {
 		_t._element.addEventListener("touchmove", this._onMouseMove, false);
 	} else {
 		_t._element.addEventListener("mousemove", this._onMouseMove, false);
 	}
+
+	if(util.isSafari){
+		_t._element.addEventListener("click", this._onGridClicked);
+	}
+
 	window.addEventListener("resize", _t._onWindowResize, false); // Should be unlistened after destroyed
 	_t._rowVirtualizer.listen("indexChanged", _t._onRowInViewChanged);
 	_t._colVirtualizer.listen("indexChanged", _t._onColInViewChanged);
@@ -25917,7 +25826,7 @@ Core_Core.prototype._batches = null;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.1.57";
+	return "5.1.63";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -26864,16 +26773,12 @@ Core_Core.prototype.removeColumnAt = function (index) {
 
 	if (this._hasListener("columnRemoved")) {
 		var e = {};
-		var batches = this._batches;
-		if(batches){
-			e["batches"] = batches;
-		}
 		e["atTheMiddle"] = true;
 		e["colIndex"] = index;
 		e["columns"] = "deprecated";
 		e["columnData"] = colDef["columnData"];
 		e["colId"] = colDef["id"] || "";
-		this._dispatch("columnRemoved", e);
+		this._dispatchColumnEvent("columnRemoved", e);
 	}
 
 	// Last index in view here might be different from before moving column if columns have different width.
@@ -27126,7 +27031,7 @@ Core_Core.prototype._moveColumn = function (fromCol, destCol) {
 		e["fromColIndex"] = fromCol;
 		e["toColIndex"] = destCol;
 		e["colId"] = colId; // TODO: Id may not needed
-		this._dispatch("columnMoved", e);
+		this._dispatchColumnEvent("columnMoved", e); // add remove move
 	}
 
 	// Last index in view here might be different from before moving column if columns have different width.
@@ -27196,6 +27101,9 @@ Core_Core.prototype.reorderColumns = function (colRefs, destCol) {
 		destId = destCol;
 	}
 
+	this.startBatch("move");
+
+	var dirty = 0;
 	if(Array.isArray(colRefs)) {
 		var srcLen = colRefs.length;
 		if(srcLen > 1) {
@@ -27238,7 +27146,6 @@ Core_Core.prototype.reorderColumns = function (colRefs, destCol) {
 				}
 			}
 
-			var dirty = 0;
 			for(i = srcLen; --i >= 0;) {
 				srcId = srcIds[i]; // Only valid source columns are left at this point
 				srcIdx = this.getColumnIndex(srcId);
@@ -27249,17 +27156,15 @@ Core_Core.prototype.reorderColumns = function (colRefs, destCol) {
 				dirty |= this._moveColumnByIndex(srcIdx, destIdx);
 				destId = srcId;
 			}
-			return dirty ? true : false;
 		} else {
-			return this.moveColumnById(colRefs[0], destId);
+			dirty = this.moveColumnById(colRefs[0], destId);
 		}
-	}
-
-	if(colRefs != null) {
+	} else if(colRefs != null) {
 		// colRefs will be a number or string
-		return this.moveColumnById(colRefs, destId);
+		dirty = this.moveColumnById(colRefs, destId);
 	}
-	return false;
+	this.stopBatch("move");
+	return dirty ? true : false;
 };
 
 /** @public
@@ -29776,6 +29681,53 @@ Core_Core.prototype.getColumnGroupChildIds = function (groupId) {
 	return null;
 };
 
+/** @public
+* @description Get a list of objects with column id and column index in sorted order
+* @param {Array.<string>} colIds
+* @param {Object=} columnMap
+* @return {!Array.<string>} Return column array with corresponding order to UI
+* @example
+* core.getValidColumnList(["c1","c2","c5"]); // Get list of valid columns
+* core.getValidColumnList(["c1","c2","c5"],{ "c2":true, "c5":true }); // Get list of valid columns from specific mapping
+*/
+Core_Core.prototype.getValidColumnList = function (colIds, columnMap) {
+	var colList = [];
+	if(!colIds){
+		return colList;
+	}
+	if(!columnMap){
+		columnMap = this.createColumnMap(colIds);
+	}
+	var colCount = this.getColumnCount();
+	for(var c = 0; c < colCount; ++c) {
+		var id = this._getColumnDef(c)["id"];
+		if(columnMap[id] != null){
+			colList.push({"index": c, "id": id});
+		}
+	}
+	return colList;
+};
+
+/** @public
+* @description Create mapping object from an array of strings
+* @param {Array.<string>=} colIds
+* @return {!Object} Column mapping object
+*/
+Core_Core.prototype.createColumnMap = function (colIds) {
+	if(!colIds){
+		colIds = this.getColumnIds();
+	}
+	var mappingObj = {};
+	var count = colIds.length;
+	for(var i = 0; i < count; i++){
+		var colId = colIds[i];
+		if(colId){
+			mappingObj[colId] = true;
+		}
+	}
+	return mappingObj;
+};
+
 /** @public
 * @param {string} batchType
 * @return {boolean}
@@ -29804,7 +29756,7 @@ Core_Core.prototype.stopBatch = function (batchType) {
 	this._dispatch("afterBatchOperation", { batches: this._batches, batchType: batchType });
 
 	delete this._batches[batchType];
-	if((0,es6_Util/* isEmptyObject */.Qr)(this._batches)){
+	if(isEmptyObject(this._batches)){
 		this._batches = null;
 	}
 	return true;
@@ -29813,6 +29765,17 @@ Core_Core.prototype.stopBatch = function (batchType) {
 
 //#region Private Methods
 /** @private
+* @param {string} type
+* @param {!Object} eventArg
+*/
+Core_Core.prototype._dispatchColumnEvent = function (type, eventArg) {
+	var batches = this._batches;
+	if(batches){
+		eventArg["batches"] = batches;
+	}
+	this._dispatch(type, eventArg);
+};
+/** @private
 */
 Core_Core.prototype._dispatchColumnPositionChanged = function () {
 	if(this._columnPositionConflator.conflate()) {
@@ -30052,20 +30015,16 @@ Core_Core.prototype._dispatchColumnAddedEvent = function (at, count, atTheMiddle
 	if (this._hasListener("columnAdded")) {
 		var e = {};
 		e["atTheMiddle"] = atTheMiddle;
-		var batches = this._batches;
-		if(batches){
-			e["batches"] = batches;
-		}
 		if(count === 1) {
 			e["colIndex"] = at;
 			e["context"] = ctx;
-			this._dispatch("columnAdded", e);
+			this._dispatchColumnEvent("columnAdded", e);
 		} else {
 			var ary = Array.isArray(ctx) ? ctx : [];
 			for (var i = 0; i < count; ++i) {
 				e["colIndex"] = at + i;
 				e["context"] = ary[i];
-				this._dispatch("columnAdded", e);
+				this._dispatchColumnEvent("columnAdded", e);
 			}
 		}
 	}
@@ -30207,15 +30166,11 @@ Core_Core.prototype._removeColumn = function (num) {  // TODO: change the logic
 
 	if (this._hasListener("columnRemoved")) {
 		var e = {};
-		var batches = this._batches;
-		if(batches){
-			e["batches"] = batches;
-		}
 		for (var c = colCount; --c >= newCount; ) {
 			var colDef = removedCols[c - newCount];
 			e["colIndex"] = c;
 			e["columnData"] = colDef ? colDef["columnData"] : null;
-			this._dispatch("columnRemoved", e);
+			this._dispatchColumnEvent("columnRemoved", e);
 		}
 	}
 };
@@ -30612,6 +30567,18 @@ Core_Core.prototype._onMouseMove = function () {
 	this._vscrollbar.flash();
 	this._hscrollbar.flash();
 };
+/** @private */
+Core_Core.prototype._onGridClicked = function () {
+	// research for dragging
+	var selection = window.getSelection();
+	if(selection.toString()){
+		return;
+	}
+	var activeElem = document.activeElement;
+	if(!this._element.contains(activeElem)){
+		this.focus();
+	}
+};
 
 /** @private
 * @param {Object} e
@@ -31289,8 +31256,9 @@ es6_Ext.inherits(SortableTitlePlugin, event_EventDispatcher);
 
 /** The sorting object which will be used for initialSort config.
  * @typedef {Object} SortableTitlePlugin~InitialSort
- * @property {number} colIndex Index of the column
- * @property {string} field field of the column
+ * @property {number=} colIndex Index of the column
+ * @property {string=} colId column id of the column
+ * @property {string=} field field of the column
  * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
  * @property {SortableTitlePlugin~SortOrder=} order Alias of sortOrder
  */
@@ -31752,7 +31720,7 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions["sortingSequence"] = sortingSeq.slice();
 	}
 
-	if((0,es6_Util/* isEmptyObject */.Qr)(obj["sorting"])) {
+	if(isEmptyObject(obj["sorting"])) {
 		delete obj["sorting"];
 	}
 
@@ -31948,6 +31916,7 @@ SortableTitlePlugin.prototype.getSortedColumns = function () {
 		var state = this._sortStates[i];
 		arr[i] = {
 			"colIndex": colIndex,
+			"colId": this._getColumnId(colIndex),
 			"field": state["field"] || "",
 			"sortOrder": state["sortOrder"] || "n"
 		};
@@ -31989,7 +31958,7 @@ SortableTitlePlugin.prototype.sortColumns = function (sortOptions, opt_arg) {
 			var opt = sortOptions[i];
 			var colRef = opt["colIndex"];
 			if(colRef < 0 || colRef == null) {
-				colRef = opt["field"];
+				colRef = opt["colId"] || opt["field"];
 			}
 			var state = this._prepareSorting(
 				colRef,
@@ -32576,19 +32545,9 @@ SortableTitlePlugin.prototype._prepareSorting = function (colRef, sortOrder) {
 		return null;
 	}
 
-	var colIndex = -1;
-	var field = "";
-	var priority = -1;
-	if(typeof colRef === "number") {
-		colIndex = colRef;
-		field = this.getColumnSortingField(colIndex);
-		priority = this.getSortPriority(colIndex);
-	} else if(typeof colRef === "string") {
-		field = colRef;
-		colIndex = this._getColumnIndexByField(field);
-		var fields = this.getColumnSortingFields();
-		priority = fields.indexOf(field);
-	}
+	var colIndex = this._getColumnIndex(colRef);
+	var priority = this.getSortPriority(colIndex);
+	var field = this.getColumnSortingField(colIndex);
 
 	var curState = (priority >= 0) ? this._sortStates[priority] : null;
 	var curOrder = curState ? curState["sortOrder"] : "n";
@@ -32972,21 +32931,29 @@ SortableTitlePlugin.prototype._getColumnIndexByOptions = function (sortOptions)
 	return -1;
 };
 /** @private
-* @param {string} field
+* @param {string|number} colRef
 * @return {number}
 */
-SortableTitlePlugin.prototype._getColumnIndexByField = function (field) {
-	if(field) {
-		var host = this._hosts[0];
-		var colCount = host ? host.getColumnCount() : 0;
-		for (var c = 0; c < colCount; ++c) {
-			if(field === this.getColumnSortingField(c)) {
-				return c;
-			}
-		}
+SortableTitlePlugin.prototype._getColumnIndex = function (colRef) {
+	var host = this._hosts[0];
+	if(host && colRef != null) {
+		return host.getColumnIndex(colRef);
 	}
 	return -1;
 };
+
+/** @private
+* @param {string|number} colRef
+* @return {string} column id or empty string for not found
+*/
+SortableTitlePlugin.prototype._getColumnId = function (colRef) {
+	var host = this._hosts[0];
+	if(host && colRef != null) {
+		return host.getColumnId(colRef);
+	}
+	return "";
+};
+
 /** @private
 * @param {number} colIndex
 * @return {Object}
@@ -33148,7 +33115,5 @@ grid.SortableTitlePlugin = plugins_SortableTitlePlugin;
 
 /* harmony default export */ const src = ((/* unused pure expression or super */ null && (Core)));
 
-})();
-
 /******/ })()
 ;