@refinitiv-ui/efx-grid 6.0.92 → 6.0.93

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -37,10 +37,10 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 * @property {string=} cssClass cssClass="" Predefined color class name
 * @property {string=} field Field to be used for this specific condition, overriding the field defined in ConditionalColoringOptions
 * @example
-* var conditions1 = [ // Add cssClass for any value that is greater than or equal to 10, and less than or equal to 20
+* let conditions1 = [ // Add cssClass for any value that is greater than or equal to 10, and less than or equal to 20
 *   {expression: [["GTE", 10, "AND"], ["LTE", 20]], cssClass: "predefinedColors"}
 * ];
-* var conditions2 = [ // Add background color for any fieldA value that is not blank value (e.g., null, undefined, 0, false, empty string)
+* let conditions2 = [ // Add background color for any fieldA value that is not blank value (e.g., null, undefined, 0, false, empty string)
 *   {
 *     expression: function(rowData) {
 *       return rowData["fieldA"] ? true : false;
@@ -49,7 +49,7 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 *     field: "fieldA"
 *   }
 * ];
-* var conditions3 = [ // Add text color for any fieldA value that is not equal to 10
+* let conditions3 = [ // Add text color for any fieldA value that is not equal to 10
 *   {expression: "[fieldA] != 10", color: "red"}
 * ];
 */
@@ -74,30 +74,50 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 * @property {string=} levelClass CSS class name.
 */
 
-var COLORING_TYPE = "coloring";
-var BLINKING_TYPE = "blinking";
-var CLEARING_BG = {
+/** @type {string}
+* @private
+* @constant
+*/
+const COLORING_TYPE = "coloring";
+/** @type {string}
+* @private
+* @constant
+*/
+const BLINKING_TYPE = "blinking";
+/** @type {Object}
+* @private
+* @constant
+*/
+const CLEARING_BG = {
 	"backgroundColor": 1
 };
-var CLEARING_TEXT = {
+/** @type {Object}
+* @private
+* @constant
+*/
+const CLEARING_TEXT = {
 	"color": 1
 };
-var CLEARING_ALL = {
+/** @type {Object}
+* @private
+* @constant
+*/
+const CLEARING_ALL = {
 	"backgroundColor": 1,
 	"color": 1
 };
 
-var _bracketExp = /\[[^\[\]]*\]/g;
+let _bracketExp = /\[[^\[\]]*\]/g;
 
 /** @private
 * @param {string} exp Expression string
 * @return {Array.<string>}
 */
-var _getFieldsFromExpression = function(exp) {
-	var fields = [];
+let _getFieldsFromExpression = function(exp) {
+	let fields = [];
 	if(exp && typeof exp === "string") {
-		var matches = exp.match(_bracketExp);
-		for (var i = 0; i < matches.length; i++) {
+		let matches = exp.match(_bracketExp);
+		for (let i = 0; i < matches.length; i++) {
 			fields.push(matches[i].replace(/[\[\]]/g, ""));
 		}
 	}
@@ -107,7 +127,7 @@ var _getFieldsFromExpression = function(exp) {
 /** @constructor
 * @extends {GridPlugin}
 */
-var ConditionalColoringPlugin = function () {
+let ConditionalColoringPlugin = function () {
 	this._onSectionBinding = this._onSectionBinding.bind(this);
 	this._onColumnAdded = this._onColumnAdded.bind(this);
 	this._onColumnRemoved = this._onColumnRemoved.bind(this);
@@ -182,14 +202,14 @@ ConditionalColoringPlugin.prototype.hasMultiTableSupport = function() {
 ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 	host._prevDataRows = {};
 
-	var hosts = this._hosts;
+	let hosts = this._hosts;
 	if(hosts.indexOf(host) >= 0) { return; }
 
 	hosts.push(host);
 
-	var extOptions = options["conditionalColoring"];
+	let extOptions = options["conditionalColoring"];
 	if (extOptions) {
-		var predefinedColors = extOptions["predefinedColors"];
+		let predefinedColors = extOptions["predefinedColors"];
 		if (predefinedColors != null && typeof predefinedColors === "object") {
 			if (!this._predefinedColors) {
 				this._predefinedColors = predefinedColors;
@@ -199,11 +219,11 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 			this._injectPredefinedColors(host);
 			host.enableClass(ConditionalColoringPlugin._controlClass);
 		}
-		var blinkingDuration = extOptions["blinkingDuration"];
+		let blinkingDuration = extOptions["blinkingDuration"];
 		if(blinkingDuration != null  && typeof blinkingDuration === "number"){
 			this._blinkingDuration = blinkingDuration;
 		}
-		var insertionBlinking = extOptions["insertionBlinking"];
+		let insertionBlinking = extOptions["insertionBlinking"];
 		if(insertionBlinking != null){
 			this._insertionBlinking = insertionBlinking;
 		}
@@ -235,10 +255,10 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 * @ignore
 */
 ConditionalColoringPlugin.prototype._afterInit = function () {
-	var pendingFields = this._pendingFields;
+	let pendingFields = this._pendingFields;
 	if(pendingFields) {
-		var fields, colIndex, type;
-		for(var i = 0; i < pendingFields.length; i++) {
+		let fields, colIndex, type;
+		for(let i = 0; i < pendingFields.length; i++) {
 			fields = pendingFields[i][0];
 			colIndex = pendingFields[i][1];
 			type = pendingFields[i][2];
@@ -252,7 +272,7 @@ ConditionalColoringPlugin.prototype._afterInit = function () {
 * @param {Object} host core grid object
 */
 ConditionalColoringPlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
+	let at = this._hosts.indexOf(host);
 	if(at < 0) { return; }
 	this._hosts.splice(at, 1);
 
@@ -283,11 +303,11 @@ ConditionalColoringPlugin.prototype.beforeProcessOption = function (optionName,
 ConditionalColoringPlugin.prototype.config = function (options) {
 	if(!options) { return; }
 
-	var columns = options["columns"];
+	let columns = options["columns"];
 	if(!columns) { return; }
 
-	var len = columns.length;
-	for(var i = 0; i < len; ++i) {
+	let len = columns.length;
+	for(let i = 0; i < len; ++i) {
 		this.setColumnColoring(i, columns[i]);
 	}
 };
@@ -297,9 +317,9 @@ ConditionalColoringPlugin.prototype.config = function (options) {
 * @return {!Object}
 */
 ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
-	var extOptions = obj["conditionalColoring"];
+	let extOptions = obj["conditionalColoring"];
 	if(!extOptions) {
 		extOptions = obj["conditionalColoring"] = {};
 	}
@@ -316,14 +336,14 @@ ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions["insertionBlinking"] = this._insertionBlinking;
 	}
 
-	var columns = obj.columns;
+	let columns = obj.columns;
 	if (!columns) {
 		columns = obj.columns = [];
 	}
 
-	var len = this.getColumnCount();
-	for (var i = 0; i < len; ++i) {
-		var column = columns[i];
+	let len = this.getColumnCount();
+	for (let i = 0; i < len; ++i) {
+		let column = columns[i];
 		if (!column) {
 			column = columns[i] = {};
 		}
@@ -343,25 +363,25 @@ ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, optio
 	if(!options) {
 		options = {};
 	}
-	var host = this._hosts[0];
-	var conditions = this._getColumnOption(colIndex, "conditions", host);
+	let host = this._hosts[0];
+	let conditions = this._getColumnOption(colIndex, "conditions", host);
 	if (Array.isArray(conditions) && conditions.length > 0) {
 		options.conditions = [];
 
-		var returnedFields = [
+		let returnedFields = [
 			"expression",
 			"backgroundColor",
 			"color",
 			"cssClass",
 			"field"
 		];
-		var count = conditions.length;
-		for (var n = 0; n < count; n++) {
-			var exCondition = {};
-			var cond = conditions[n];
+		let count = conditions.length;
+		for (let n = 0; n < count; n++) {
+			let exCondition = {};
+			let cond = conditions[n];
 			extendObject(exCondition, cond, returnedFields);
 			if(typeof exCondition["expression"] === "function") {
-				var origExp = cond["origExpression"];
+				let origExp = cond["origExpression"];
 				if(origExp) {
 					exCondition["expression"] = origExp;
 				}
@@ -371,23 +391,23 @@ ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, optio
 		}
 	}
 
-	var colorText = this._getColumnOption(colIndex, "colorText", host);
+	let colorText = this._getColumnOption(colIndex, "colorText", host);
 	if (colorText) {
 		options.colorText = colorText;
 	}
 
 	// alias with colorText
-	var tickColor = this._getColumnOption(colIndex, "tickColor", host);
+	let tickColor = this._getColumnOption(colIndex, "tickColor", host);
 	if (tickColor) {
 		options.tickColor = tickColor;
 	}
 
-	var blinking = this._getColumnOption(colIndex, "blinking", host);
+	let blinking = this._getColumnOption(colIndex, "blinking", host);
 	if (blinking) {
 		options.blinking = blinking;
 	}
 
-	var field = this._getField(colIndex);
+	let field = this._getField(colIndex);
 	if (field) {
 		options.field = field;
 	}
@@ -402,12 +422,12 @@ ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, optio
 ConditionalColoringPlugin.prototype._applyStyle = function(host, options) {
 	if(!options) { return; }
 
-	var columns = options["columns"];
+	let columns = options["columns"];
 	if(!columns) { return; }
 
-	var painter;
-	var len = columns.length;
-	for(var i = 0; i < len; ++i) {
+	let painter;
+	let len = columns.length;
+	for(let i = 0; i < len; ++i) {
 		painter = this.getColumnPainter(i);
 		if(this._isValidPainter(painter)) {
 			host.enableColumnClass(i, "conditionally-colored", true);
@@ -421,9 +441,9 @@ ConditionalColoringPlugin.prototype._applyStyle = function(host, options) {
 */
 ConditionalColoringPlugin.prototype._enableColumnStyle = function(colIndex, enabled) {
 	enabled = enabled !== false;
-	var hosts = this._hosts;
-	var grid;
-	for(var i = hosts.length; --i >= 0;) {
+	let hosts = this._hosts;
+	let grid;
+	for(let i = hosts.length; --i >= 0;) {
 		grid = hosts[i];
 		grid.enableColumnClass(colIndex, "conditionally-colored", enabled);
 	}
@@ -437,7 +457,7 @@ ConditionalColoringPlugin.prototype._isValidPainter = function(painter) {
 	if (!painter) {
 		return false;
 	}
-	var type = painter.getColoringType();
+	let type = painter.getColoringType();
 	if (type !== CellPainter.ColoringTypes.HEATMAP) {
 		return true;
 	} else {
@@ -450,8 +470,8 @@ ConditionalColoringPlugin.prototype._isValidPainter = function(painter) {
 * @param {Object=} styleMapping
 */
 ConditionalColoringPlugin.prototype._clearCellStyles = function(colIndex, styleMapping) {
-	var i, grid, sect, rowCount, r, cell;
-	var hosts = this._hosts;
+	let i, grid, sect, rowCount, r, cell;
+	let hosts = this._hosts;
 	for(i = hosts.length; --i >= 0;) {
 		grid = hosts[i];
 		sect = grid.getSection("content");
@@ -468,10 +488,10 @@ ConditionalColoringPlugin.prototype._clearCellStyles = function(colIndex, styleM
 /** @private
 */
 ConditionalColoringPlugin.prototype._cachePreviousValue = function() {
-	var colCount = this.getColumnCount();
-	var hosts = this._hosts;
-	var len = hosts.length;
-	var i, c, host;
+	let colCount = this.getColumnCount();
+	let hosts = this._hosts;
+	let len = hosts.length;
+	let i, c, host;
 	for (i = 0; i < len; i++) {
 		host = hosts[i];
 		for (c = 0; c < colCount; ++c) {
@@ -485,13 +505,13 @@ ConditionalColoringPlugin.prototype._cachePreviousValue = function() {
 * @param {Object} host
 */
 ConditionalColoringPlugin.prototype._cacheColumnPreviousValue = function(colIndex, host) {
-	var prevDataRows = host._prevDataRows || {};
-	var dv = host.getDataSource();
-	var rowCount = dv.getRowCount();
-	var colData = this._getColumnData(colIndex);
+	let prevDataRows = host._prevDataRows || {};
+	let dv = host.getDataSource();
+	let rowCount = dv.getRowCount();
+	let colData = this._getColumnData(colIndex);
 	if (colData["blinking"]) {
-		var field = colData["blinkingField"] || this._getField(colIndex);
-		var r, rid, value, prevDataRow;
+		let field = colData["blinkingField"] || this._getField(colIndex);
+		let r, rid, value, prevDataRow;
 		for (r = 0; r < rowCount; r++) {
 			rid = dv.getRowId(r);
 			value = this._getData(dv, r, field);
@@ -517,9 +537,9 @@ ConditionalColoringPlugin.prototype._addDataFields = function(fieldRef, colRef,
 	if(!this._realTimeGrid || !fieldRef || !type) {
 		return;
 	}
-	var referrer = null;
+	let referrer = null;
 	if (colRef != null) {
-		var colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		let colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
 		referrer = colDef ? colDef.getId() + "_" + type : null;
 	}
 
@@ -535,9 +555,9 @@ ConditionalColoringPlugin.prototype._removeDataFields = function(fieldRef, colRe
 	if(!this._realTimeGrid || !fieldRef || !type) {
 		return;
 	}
-	var referrer = null;
+	let referrer = null;
 	if (colRef != null) {
-		var colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
+		let colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
 		referrer = colDef ? colDef.getId() + "_" + type : null;
 	}
 	this._realTimeGrid.removeDataFields(fieldRef, referrer);
@@ -551,11 +571,11 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
 	if(!this._realTimeGrid || !type) {
 		return;
 	}
-	var referrer = null;
+	let referrer = null;
 	if (colRef != null) {
-		var colId = colRef;
+		let colId = colRef;
 		if (typeof colRef === "number") {
-			var colDef = this._realTimeGrid.getColumnDefinition(colRef);
+			let colDef = this._realTimeGrid.getColumnDefinition(colRef);
 			if (colDef) {
 				colId = colDef.getId();
 			}
@@ -577,7 +597,7 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
 * @see {@link ConditionalColoringPlugin.setConditionalColoring}
 * @see {@link ConditionalColoringPlugin.setColumnBlinking}
 * @example
-* var columnOptions1 = {
+* let columnOptions1 = {
 *   "field": "string",
 *   "conditions": [{ // Array.<Object> Condition Object Properties
 *     "expression": "[column0] > 0", // string
@@ -585,14 +605,14 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
 *     "color": "" // Optional string e.g. #000000, white
 *   }]
 * };
-* var columnOptions2 = {
+* let columnOptions2 = {
 *   "field": "string",
 *   "colorText": true, // string as Field or boolean for text coloring mode
 *   "blinking": true
 * };
 */
 ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
-	var blinkingOptions, field;
+	let blinkingOptions, field;
 	if(columnOptions) {
 		blinkingOptions = columnOptions["blinking"];
 		field = columnOptions["field"];
@@ -601,7 +621,7 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 	this.setColumnBlinking(colIndex, blinkingOptions, field);
 	this.setConditionalColoring(colIndex, columnOptions);
 
-	var colData = this._newColumnData(colIndex);
+	let colData = this._newColumnData(colIndex);
 	if (colData["painter"] && !(colData["coloringFields"] || colData["blinkingField"])) { // Clear existing painter
 		this._clearPainter(colData);
 	}
@@ -612,7 +632,7 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 * @param {ConditionalColoringPlugin~ConditionalColoringOptions=} coloringOptions
 */
 ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex, coloringOptions) {
-	var colData = this._newColumnData(colIndex);
+	let colData = this._newColumnData(colIndex);
 
 	colData["conditions"] = null; // WARNING: This clears existing user states
 	if(coloringOptions) {
@@ -624,13 +644,13 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 		colData["colorText"] = null;
 		colData["tickColor"] = null;
 	}
-	var painter = colData["painter"];
-	var prevFields = colData["coloringFields"] ? Object.keys(colData["coloringFields"]) : null;
-	var colorOptions = this._prepareColorOptions(colIndex, coloringOptions);
+	let painter = colData["painter"];
+	let prevFields = colData["coloringFields"] ? Object.keys(colData["coloringFields"]) : null;
+	let colorOptions = this._prepareColorOptions(colIndex, coloringOptions);
 
 	if (this._isValidPainter(painter)) {
 		if (prevFields) {
-			var effectiveStyles = painter.getEffectiveStyles();
+			let effectiveStyles = painter.getEffectiveStyles();
 			this._clearCellStyles(colIndex, effectiveStyles); // Need to clear the existing previous coloring styles here
 		}
 		painter.resetColoring(); // Release any used memory
@@ -638,14 +658,14 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 
 	if(colorOptions.hasColor) { // Set new coloring
 		colData["conditions"] = coloringOptions["conditions"]; // WARNING: This stores user object
-		var newFieldsMap = colorOptions.fields;
+		let newFieldsMap = colorOptions.fields;
 		if (!painter) {
 			painter = colData["painter"] = new CellPainter();
 		} else if (prevFields) {
 			// Remove unused fields
-			var unusedFields = [];
-			var prevField;
-			for (var i = 0; i < prevFields.length; i++) {
+			let unusedFields = [];
+			let prevField;
+			for (let i = 0; i < prevFields.length; i++) {
 				prevField = prevFields[i];
 				if (!newFieldsMap[prevField]) {
 					unusedFields.push(prevField);
@@ -657,14 +677,14 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 		}
 
 		if(colorOptions.condColoring) {
-			var conditions = colorOptions.condColoring.conditions;
+			let conditions = colorOptions.condColoring.conditions;
 			painter.setConditions(conditions);
 			this._setEffectiveStyles(painter, conditions);
 		} else if(colorOptions.colorText) {
-			var options = colorOptions.colorText;
+			let options = colorOptions.colorText;
 			if (options.useThemeColors) {
 				if (!ConditionalColoringPlugin._colorTextStyles) {
-					var styles = {
+					let styles = {
 						positive: {
 							color: "var(--color-scheme-positive)"
 						},
@@ -685,7 +705,7 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 			}
 		}
 
-		var fields = Object.keys(newFieldsMap);
+		let fields = Object.keys(newFieldsMap);
 		if (this._initializedGrid) {
 			this._addDataFields(fields, colIndex, COLORING_TYPE);
 		} else {
@@ -707,9 +727,9 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 		this._enableColumnStyle(colIndex, false);
 	}
 	if (this._initializedGrid) {
-		var core = this._hosts[0];
+		let core = this._hosts[0];
 		if(core){
-			var rowColoring = core.getPlugin('RowColoringPlugin');
+			let rowColoring = core.getPlugin('RowColoringPlugin');
 			if(rowColoring && rowColoring.forceUpdateRowColor){
 				rowColoring.forceUpdateRowColor();
 			}
@@ -724,13 +744,13 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 * @param {string=} field If not specified, column field will be used
 */
 ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blinkingOptions, field) {
-	var colData = this._newColumnData(colIndex);
-	var prevField = colData["blinkingField"];
+	let colData = this._newColumnData(colIndex);
+	let prevField = colData["blinkingField"];
 	colData["blinking"] = blinkingOptions;
-	var painter = colData["painter"];
-	var bOptions = this._prepareBlinkingOptions(colIndex, blinkingOptions, field);
+	let painter = colData["painter"];
+	let bOptions = this._prepareBlinkingOptions(colIndex, blinkingOptions, field);
 	if (bOptions) {
-		var newBlinkingField = bOptions.field;
+		let newBlinkingField = bOptions.field;
 		if (!painter) {
 			colData["painter"] = painter = new CellPainter();
 		} else if(prevField) {
@@ -740,7 +760,7 @@ ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blin
 				this._removeDataFields(prevField, colIndex, BLINKING_TYPE);
 			}
 		}
-		var blinkDuration = bOptions.duration || this._blinkingDuration;
+		let blinkDuration = bOptions.duration || this._blinkingDuration;
 		painter.setBlinkingDuration(blinkDuration);
 		painter.disableLevelColor(bOptions.level === false);
 		if (bOptions.customColor) {
@@ -755,8 +775,8 @@ ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blin
 			// Emerald Grid needs to cache in the initializing phase
 			// Atlas Blotter will cache in the first binding
 			if (this._compositeGrid || this._initializedGrid) {
-				var host, hosts = this._hosts;
-				for (var i = 0; i < hosts.length; i++) {
+				let host, hosts = this._hosts;
+				for (let i = 0; i < hosts.length; i++) {
 					host = hosts[i];
 					this._cacheColumnPreviousValue(colIndex, host);
 				}
@@ -793,20 +813,20 @@ ConditionalColoringPlugin.prototype.blinkRow = function (rowIndex, blinkSignal,
 	host = host || this._hosts[0];
 	if (!host) return;
 
-	var dv = host.getDataSource();
+	let dv = host.getDataSource();
 	if (!dv) return;
 
-	var section = host.getSection('content');
+	let section = host.getSection('content');
 	if (!section) return;
 
-	var rowData = dv.getRowDataAt(rowIndex);
+	let rowData = dv.getRowDataAt(rowIndex);
 
-	var colCount = section.getColumnCount();
-	for (var c = 0; c < colCount; ++c) {
-		var painter = this.getColumnPainter(c);
+	let colCount = section.getColumnCount();
+	for (let c = 0; c < colCount; ++c) {
+		let painter = this.getColumnPainter(c);
 		if (!painter) continue;
 
-		var cell = section.getCell(c, rowIndex, false);
+		let cell = section.getCell(c, rowIndex, false);
 		if (!cell) continue;
 		painter.blink(cell, blinkSignal, rowData);
 	}
@@ -823,9 +843,9 @@ ConditionalColoringPlugin.prototype._prepareBlinkingOptions = function (colIndex
 		return null;
 	}
 
-	var bOptions = {};
-	var field = columnField || this._getField(colIndex);
-	var blinkField = field;
+	let bOptions = {};
+	let field = columnField || this._getField(colIndex);
+	let blinkField = field;
 	if (typeof blinkingOptions === "string") {
 		blinkField = blinkingOptions;
 	} else if(typeof blinkingOptions === "object") {
@@ -851,11 +871,11 @@ ConditionalColoringPlugin.prototype._prepareBlinkingOptions = function (colIndex
 * @param {Object} obj
 * @param {Array|string} entries
 */
-var _addMapEntries = function(obj, entries) {
+let _addMapEntries = function(obj, entries) {
 	if(entries) {
 		if(Array.isArray(entries)) {
-			var len = entries.length;
-			for(var i = 0; i < len; ++i) {
+			let len = entries.length;
+			for(let i = 0; i < len; ++i) {
 				obj[entries[i]] = true;
 			}
 		} else {
@@ -872,33 +892,33 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
 	if(!columnOptions) {
 		return {};
 	}
-	var colField = this._getField(colIndex);
-	var inputField = columnOptions["inputField"] || ""; // The value is from user so it can be "THIS_COLUMN" or null
-	var field = ConditionalColoringPlugin._convertKeyword(inputField, colField);
+	let colField = this._getField(colIndex);
+	let inputField = columnOptions["inputField"] || ""; // The value is from user so it can be "THIS_COLUMN" or null
+	let field = ConditionalColoringPlugin._convertKeyword(inputField, colField);
 	if(columnOptions["field"]) {
 		field = /** @type{string} */(columnOptions["field"]);
 	}
 
-	var hasColor = 0;
-	var fieldMap = {};
+	let hasColor = 0;
+	let fieldMap = {};
 
 	// Check if there is another type of coloring
-	var colorText = columnOptions["colorText"] || columnOptions["tickColor"];
-	var conditions = columnOptions["conditions"];
-	var conditionCount = conditions ? conditions.length : 0;
-	var colorOptions = {};
+	let colorText = columnOptions["colorText"] || columnOptions["tickColor"];
+	let conditions = columnOptions["conditions"];
+	let conditionCount = conditions ? conditions.length : 0;
+	let colorOptions = {};
 	if(conditionCount) {
 		colorOptions.condColoring = {};
 		colorOptions.condColoring.conditions = conditions;
 
-		var formatter = (field == colField) ? columnOptions["textFormatter"] : null; // TODO: This text formatter is not used or defined any where
-		var builder = ConditionalColoringPlugin.getFilterBuilder();
+		let formatter = (field == colField) ? columnOptions["textFormatter"] : null; // TODO: This text formatter is not used or defined any where
+		let builder = ConditionalColoringPlugin.getFilterBuilder();
 
-		for(var i = conditionCount; --i >= 0;) {
-			var cond = conditions[i];
-			var exp = cond ? cond["expression"] : null;
+		for(let i = conditionCount; --i >= 0;) {
+			let cond = conditions[i];
+			let exp = cond ? cond["expression"] : null;
 			if(Array.isArray(exp)) {
-				var fieldPerCon = cond["field"] || field;
+				let fieldPerCon = cond["field"] || field;
 				cond["expression"] = builder.parse(exp, fieldPerCon, null, fieldPerCon); // WARNING: This alters user object
 				if(cond["expression"]) {
 					cond["origExpression"] = exp;
@@ -914,9 +934,9 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
 			} else if(field && cond["condition"]) {
 				hasColor = 1;
 				builder.setFieldDefinition(field, formatter, field); // TODO: Each condition could have different fields
-				var oper = cond["condition"]; // WARNING: This condition is used by Format dialog. It's undocumented
-				var value1 = cond["value1"];
-				var value2 = cond["value2"];
+				let oper = cond["condition"]; // WARNING: This condition is used by Format dialog. It's undocumented
+				let value1 = cond["value1"];
+				let value2 = cond["value2"];
 
 				if(oper !== "BTW") {
 					builder.addCondition(oper, value1);
@@ -980,10 +1000,10 @@ ConditionalColoringPlugin._convertKeyword = function(userInput, fallback) {
 * @return {Object} mapping of inserted row id
 */
 ConditionalColoringPlugin._mapInsertedRowId = function (events) {
-	var insertedDict = {};
-	var eventCount = events ? events.length : 0;
-	for (var i = 0; i < eventCount; ++i) {
-		var event = events[i];
+	let insertedDict = {};
+	let eventCount = events ? events.length : 0;
+	for (let i = 0; i < eventCount; ++i) {
+		let event = events[i];
 
 		// map inserted row
 		if (event.type === "inserted") {
@@ -999,26 +1019,26 @@ ConditionalColoringPlugin._mapInsertedRowId = function (events) {
 * @return {!Array.<Object>} Array of merged changes
 */
 ConditionalColoringPlugin._mergeUpdates = function(e) {
-	var evts = e.events; // dataSource event
-	var evtCount = evts ? evts.length : 0;
-	var dv = e.dataSource;
-	var changedRows = [];
-	var evt, i;
+	let evts = e.events; // dataSource event
+	let evtCount = evts ? evts.length : 0;
+	let dv = e.dataSource;
+	let changedRows = [];
+	let evt, i;
 	for (i = 0; i < evtCount; ++i) {
 		evt = evts[i];
 
 		// merge update event
 		if (evt.type === "updated") {
-			var rowIndex = dv.getRowIndex(evt.rid);
+			let rowIndex = dv.getRowIndex(evt.rid);
 			if (!changedRows[rowIndex]) {
 				changedRows[rowIndex] = {
 					changed: {},
 					rid: evt.rid
 				};
 			}
-			var mergedChanges = changedRows[rowIndex].changed;
-			var changes = evt.changes;
-			for (var key in changes) {
+			let mergedChanges = changedRows[rowIndex].changed;
+			let changes = evt.changes;
+			for (let key in changes) {
 				mergedChanges[key] = 1;
 			}
 		}
@@ -1030,10 +1050,10 @@ ConditionalColoringPlugin._mergeUpdates = function(e) {
 * @return {string} prettified CSS string
 */
 ConditionalColoringPlugin.prototype._prepareStyles = function(colors) {
-	var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .column.conditionally-colored .cell";
-	var css = [];
-	var ss, styles, value;
-	for (var className in colors) {
+	let prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .column.conditionally-colored .cell";
+	let css = [];
+	let ss, styles, value;
+	for (let className in colors) {
 		css.push(prefix + "." + className);
 		ss = [];
 		styles = colors[className];
@@ -1057,10 +1077,10 @@ ConditionalColoringPlugin.prototype._prepareStyles = function(colors) {
 */
 ConditionalColoringPlugin.prototype._injectColorTextStyles = function() {
 	if (ConditionalColoringPlugin._colorTextStyles) {
-		var hosts = this._hosts;
-		var len = hosts.length;
-		for (var i = 0; i < len; i++) {
-			var host = hosts[i];
+		let hosts = this._hosts;
+		let len = hosts.length;
+		for (let i = 0; i < len; i++) {
+			let host = hosts[i];
 			host.enableClass(ConditionalColoringPlugin._controlClass);
 			if (!host._colorTextStyles) {
 				injectCss(ConditionalColoringPlugin._colorTextStyles, host.getElement());
@@ -1086,9 +1106,9 @@ ConditionalColoringPlugin.prototype.setPredefinedColors = function(predefinedCol
 	if (predefinedColors != null && typeof predefinedColors === "object") {
 		this._predefinedColors = predefinedColors;
 		this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
-		var hosts = this._hosts;
-		var len = hosts.length;
-		for (var i = 0; i < len; i++) {
+		let hosts = this._hosts;
+		let len = hosts.length;
+		for (let i = 0; i < len; i++) {
 			this._injectPredefinedColors(hosts[i]);
 		}
 	}
@@ -1121,7 +1141,7 @@ ConditionalColoringPlugin.prototype._requestRowRefresh = function () {
 	if(!this._hasColoring()){
 		return;
 	}
-	for(var i = this._hosts.length; --i >= 0;) {
+	for(let i = this._hosts.length; --i >= 0;) {
 		this._hosts[i].requestRowRefresh();
 	}
 };
@@ -1140,12 +1160,12 @@ ConditionalColoringPlugin.prototype.getColumnPainter = function (colIndex) {
 * @param {Object=} rowData A row data which will be used to determine a color together with a colIndex
 */
 ConditionalColoringPlugin.prototype.applyColor = function (colIndex, cell, rowData) {
-	var painter = this.getColumnPainter(colIndex);
+	let painter = this.getColumnPainter(colIndex);
 	if (!painter) { return; }
 
 	if (!rowData) rowData = {};
-	var field = this._getField(colIndex);
-	var changes = {};
+	let field = this._getField(colIndex);
+	let changes = {};
 	changes[field] = 1;
 	painter.render(cell, rowData, NaN, NaN, changes); // NaN values are min and max values for heatmap calculation
 };
@@ -1154,22 +1174,22 @@ ConditionalColoringPlugin.prototype.applyColor = function (colIndex, cell, rowDa
 * @param {Object} e
 */
 ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
-	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
+	let dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
 	if(!dataRows) {
 		return; // dataRows could be empty in case of no column is presented
 	}
 
-	var c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
-	var dataRow, insertedId, colData, cachedValues, updatePrev;
-	var section = e["section"];
-	var colCount = section.getColumnCount();
-	var fromR = /** @type{number} */(e["fromRowIndex"]);
-	var toR = /** @type{number} */(e["toRowIndex"]);
-	var actualUpdate = e["actualUpdate"];
-	var dv = e["dataSource"];
-	var host = e["sender"];
+	let c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
+	let dataRow, insertedId, colData, cachedValues, updatePrev;
+	let section = e["section"];
+	let colCount = section.getColumnCount();
+	let fromR = /** @type{number} */(e["fromRowIndex"]);
+	let toR = /** @type{number} */(e["toRowIndex"]);
+	let actualUpdate = e["actualUpdate"];
+	let dv = e["dataSource"];
+	let host = e["sender"];
 
-	var blinkingEnabled = actualUpdate && this._blinkingEnabled;
+	let blinkingEnabled = actualUpdate && this._blinkingEnabled;
 	if (blinkingEnabled) {
 		insertedId = ConditionalColoringPlugin._mapInsertedRowId(e.events);
 		if (this._compositeGrid) {
@@ -1177,16 +1197,16 @@ ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
 		}
 	}
 
-	var prevDataRow, prevDataRows = host._prevDataRows;
-	var prevIds = Object.keys(prevDataRows);
-	var prevRowCount = prevIds.length;
+	let prevDataRow, prevDataRows = host._prevDataRows;
+	let prevIds = Object.keys(prevDataRows);
+	let prevRowCount = prevIds.length;
 	for (r = fromR; r < toR; ++r) {
 		dataRow = this._rowGetter(dataRows[r]);
 		if (!dataRow) continue; // prevent from null value access when using with RowGroupingExtension
 
 		changedCols = null;
-		var allowBlinking = false;
-		var insertedRow = null;
+		let allowBlinking = false;
+		let insertedRow = null;
 		if (blinkingEnabled) {
 			if (this._realTimeGrid) {
 				// TODO: check rid from e.rids
@@ -1229,14 +1249,14 @@ ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
 			painter = this.getColumnPainter(c);
 			if (painter) {
 				colData = this._getColumnData(c);
-				var bgBlinking = false;
+				let bgBlinking = false;
 				if (colData["blinking"] && actualUpdate) {
-					var blinking = false;
-					var field = colData["blinkingField"] || this._getField(c);
-					var newValue = dataRow[field];
+					let blinking = false;
+					let field = colData["blinkingField"] || this._getField(c);
+					let newValue = dataRow[field];
 					if(allowBlinking){
 						if (prevDataRow) {
-							var prevValue = prevDataRow[field];
+							let prevValue = prevDataRow[field];
 							if (prevValue != null) {
 								if (changedCols && changedCols[field]) {
 									blinking = true;
@@ -1285,7 +1305,7 @@ ConditionalColoringPlugin.prototype._onColumnAdded = function(e) {
 * @param {Object} e
 */
 ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
-	var colData = /** @type{Object} */(e.columnData);
+	let colData = /** @type{Object} */(e.columnData);
 	if (!colData) {
 		return;
 	}
@@ -1293,7 +1313,7 @@ ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
 	this._clearPainter(colData);
 
 	// Removed column
-	var colId = e["colId"];
+	let colId = e["colId"];
 	if (colId) {
 		if (colData["coloringFields"]) {
 			this._removeFieldReferrer(colId, COLORING_TYPE);
@@ -1304,13 +1324,13 @@ ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
 	}
 
 	// Another columns
-	var field = colData["field"];
+	let field = colData["field"];
 	if (field) {
-		var colDef = colData["COL_DEF"];
-		var isStaticField = colDef ? !colDef.isRealTimeField() : true;
+		let colDef = colData["COL_DEF"];
+		let isStaticField = colDef ? !colDef.isRealTimeField() : true;
 		if (isStaticField) {
-			var colCount = this.getColumnCount();
-			for (var i = 0; i < colCount; i++) {
+			let colCount = this.getColumnCount();
+			for (let i = 0; i < colCount; i++) {
 				colData = this._getColumnData(i);
 				if (colData["coloringFields"] && colData["coloringFields"][field]) {
 					this.setConditionalColoring(i, null);
@@ -1336,7 +1356,7 @@ ConditionalColoringPlugin.prototype._onThemeLoaded = function () {
 ConditionalColoringPlugin.prototype._clearPainter = function (colData) {
 	if (colData) {
 		ConditionalColoringPlugin._cleanUpPrevFields();
-		var painter = colData["painter"];
+		let painter = colData["painter"];
 		if (painter) {
 			if (this._isValidPainter(painter)) {
 				painter.dispose();
@@ -1356,12 +1376,12 @@ ConditionalColoringPlugin.prototype._clearPainter = function (colData) {
  * @param {Array<ConditionalColoringPlugin~Condition>} conditions
  */
 ConditionalColoringPlugin.prototype._setEffectiveStyles = function(painter, conditions) {
-	var effectiveStyles = null;
-	var hasColor = false;
-	var hasBackgroundColor = false;
-	var condCount = conditions ? conditions.length : 0;
-	for(var i = 0; i < condCount; i++){
-		var cond = conditions[i];
+	let effectiveStyles = null;
+	let hasColor = false;
+	let hasBackgroundColor = false;
+	let condCount = conditions ? conditions.length : 0;
+	for(let i = 0; i < condCount; i++){
+		let cond = conditions[i];
 		if(cond["color"]){
 			hasColor = true;
 		}
@@ -1384,21 +1404,21 @@ ConditionalColoringPlugin.prototype._setEffectiveStyles = function(painter, cond
  */
 ConditionalColoringPlugin._cleanUpPrevFields = function() {
 	// Assume that all hosts are using the same columns' options
-	var colCount = this.getColumnCount();
-	var colData, blinkingFields = {};
-	var isBlinking = false;
-	for (var c = 0; c < colCount; c++) {
+	let colCount = this.getColumnCount();
+	let colData, blinkingFields = {};
+	let isBlinking = false;
+	for (let c = 0; c < colCount; c++) {
 		colData = this._getColumnData(c);
 		if (colData["blinking"]) {
 			blinkingFields[colData["blinkingField"]] = isBlinking = true;
 		}
 	}
 
-	var hosts = this._hosts;
-	var len = hosts.length;
-	var host, i;
+	let hosts = this._hosts;
+	let len = hosts.length;
+	let host, i;
 	if (isBlinking) {
-		var prevDataRow, prevDataRows, rid, field;
+		let prevDataRow, prevDataRows, rid, field;
 		for (i = 0; i < len; i++) {
 			host = hosts[i];
 			prevDataRows = host._prevDataRows;
@@ -1423,9 +1443,9 @@ ConditionalColoringPlugin._cleanUpPrevFields = function() {
 /** @public
  */
 ConditionalColoringPlugin.cleanUpPrevRows = function() {
-	var hosts = this._hosts;
-	var len = hosts.length;
-	var host, dv, i, n, rids, rid, prevDataRows;
+	let hosts = this._hosts;
+	let len = hosts.length;
+	let host, dv, i, n, rids, rid, prevDataRows;
 	for (i = 0; i < len; i++) {
 		host = hosts[i];
 		dv = host.getDataSource();
@@ -1461,11 +1481,11 @@ ConditionalColoringPlugin._stopCleanUpInterval = function() {
  * @return {Boolean}
 */
 ConditionalColoringPlugin.prototype._hasColoring = function() {
-	var hosts = this._hosts;
-	var grid = hosts[0];
+	let hosts = this._hosts;
+	let grid = hosts[0];
 
-	var colCount = this.getColumnCount();
-	for(var colIndex = 0; colIndex < colCount; colIndex++){
+	let colCount = this.getColumnCount();
+	for(let colIndex = 0; colIndex < colCount; colIndex++){
 		if(grid.hasColumnClass(colIndex, "conditionally-colored")){
 			return true;
 		}