@refinitiv-ui/efx-grid 6.0.5 → 6.0.7

package/lib/tr-grid-printer/es6/SectionWriter.js

@@ -201,5 +201,13 @@ SectionWriter.prototype.getCellElement = function (colIndex, rowIndex) {
 	return this._table.getCell(colIndex, rowIndex);
 };
 
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+SectionWriter.prototype._startBindingSession = function (enabled) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+
 
 export { SectionWriter };

package/lib/tr-grid-range-bar/es6/RangeBar.js

@@ -35,11 +35,6 @@ Ext.inherits(RangeBarPlugin, GridPlugin);
 * @private
 */
 
-RangeBarPlugin._themeLoaded = false;
-/** @type {boolean}
-* @private
-*/
-
 RangeBarPlugin.prototype._themeLoading = false;
 /** @type {number}
 * @private
@@ -75,9 +70,9 @@ RangeBarPlugin.prototype.initialize = function (host, options) {
   host.listen("columnAdded", this._onColumnAdded);
   host.listen("columnRemoved", this._onColumnRemoved);
 
-  if (!RangeBarPlugin._themeLoaded && !this._themeLoading) {
+  if (!this._themeLoading) {
     this._themeLoading = true;
-    ElfUtil.getThemeColors().then(this._onThemeLoaded);
+    ElfUtil.getThemeColors().then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
   }
 };
 /** @override */
@@ -265,8 +260,6 @@ RangeBarPlugin.prototype._getColumnRangeDef = function (colIndex) {
 
 
 RangeBarPlugin.prototype._onThemeLoaded = function () {
-  RangeBarPlugin._themeLoaded = true;
-
   for (var i = this._hosts.length; --i >= 0;) {
     this._hosts[i].requestRowRefresh();
   }
@@ -277,7 +270,7 @@ RangeBarPlugin.prototype._onThemeLoaded = function () {
 
 
 RangeBarPlugin.prototype._renderer = function (e) {
-  if (!RangeBarPlugin._themeLoaded) {
+  if (!ElfUtil.isThemeLoaded()) {
     return;
   }
 

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -46,6 +46,12 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public getGuideline(): Element|null;
 
+    public disable(disabled?: boolean): void;
+
+    public isDisabled(): boolean;
+
+    public disableUIs(disabled?: boolean): void;
+
 }
 
 export default RowDraggingPlugin;

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -8,7 +8,7 @@ import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 /** @typedef {Object} RowDraggingPlugin~Options
 * @description Available options describing `rowDragging` object specified in grid's option
 * @property {boolean=} dragBox=false If enabled, information box will be shown during the drag
-* @property {boolean=} disabled=false If enabled, dataTransfer and autoScroll will be disabled, and guileline UI will not been shown.
+* @property {boolean=} disabled=false A flag to turn off UIs, while events will still be dispatched. If enabled, guileline and drag box will be hidden. autoScroll will also be turned off.
 * @property {boolean=} mouseInput=true If disabled, mousemove/mousedown will not trigger the drag operation.
 * @property {boolean=} dataTransfer=true If disabled, internal row data will not be moved at the end of the drag operation.
 * @property {boolean=} autoScroll=true If disabled, grid will not be verticallly scrolled when mouse is hovering around the edges of the grid.
@@ -85,7 +85,9 @@ var RowDraggingPlugin = function (options) {
 	t._dragBoxIcon = document.createElement("ef-icon");
 	t._dragBoxIcon.className = "drag-box-icon";
 
-	t.config({ "rowDragging": options });
+	if(options) {
+		t.config({ "rowDragging": options });
+	}
 };
 Ext.inherits(RowDraggingPlugin, GridPlugin);
 
@@ -110,7 +112,12 @@ RowDraggingPlugin.prototype._dragBox = null;
 * @private
 */
 RowDraggingPlugin.prototype._dragBoxIcon = null;
-/** For disabled UI
+/** For disabling UIs
+* @type {boolean}
+* @private
+*/
+RowDraggingPlugin.prototype._uiDisabled = false;
+/** For disabling drag and drop functionalities
 * @type {boolean}
 * @private
 */
@@ -249,7 +256,7 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 		DragUI.applyThemeColor(host);
 	} else {
 		DragUI.stylePromise = ElfUtil.getThemeColors();
-		DragUI.stylePromise.then(this._onThemeLoaded);
+		DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
 	}
 
 	// In case of lazy loading
@@ -275,9 +282,9 @@ RowDraggingPlugin.prototype.unload = function (host) {
 };
 
 /** @private
-* @param {Object} colors
 */
-RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
+RowDraggingPlugin.prototype._onThemeLoaded = function() {
+	var colors = ElfUtil.getColors();
 	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
 	for(var i = this._hosts.length; --i >= 0;) {
 		DragUI.applyThemeColor(this._hosts[i]);
@@ -318,7 +325,7 @@ RowDraggingPlugin.prototype.config = function (options) {
 	}
 
 	if (extOptions["disabled"]) {
-		this._disabled = true;
+		this._uiDisabled = true;
 	}
 
 	this.addListener(extOptions, "dragStart");
@@ -343,7 +350,7 @@ RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
 	extOptions.mouseInput = this._mouseInput;
 	extOptions.autoScroll = this._autoScroll;
 	extOptions.dataTransfer = this._dataTransfer;
-	extOptions.disabled = this._disabled;
+	extOptions.disabled = this._uiDisabled;
 
 	return obj;
 };
@@ -354,6 +361,9 @@ RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
 */
 RowDraggingPlugin.prototype.startDrag = function (startRef) {
 	if (this._dragging || this._hosts.length <= 0) { return; }
+	if (this._disabled) {
+		return;
+	}
 
 	var pos;
 	if (startRef) {
@@ -401,6 +411,31 @@ RowDraggingPlugin.prototype.getGuideline = function () {
 	return this._guideline;
 };
 
+/** Disable drag and drop functionality. Unlike disableUIs method, no events will be triggered or dispatched by user actions.
+* This method is useful for temporary turnning off drag and drop functionalities.
+* @public
+* @param {boolean=} disabled
+* @see {@link RowDraggingPlugin#disable}
+*/
+RowDraggingPlugin.prototype.disable = function (disabled) {
+	this._disabled = disabled !== false;
+};
+/** @public
+* @return {boolean}
+*/
+RowDraggingPlugin.prototype.isDisabled = function () {
+	return this._disabled;
+};
+/** Disable UIs, while events will still be triggered by user actions. This method modify `disabled` property on the configuration object.
+* This method is useful for customizing UIs during the drag operations.
+* @public
+* @param {boolean=} disabled
+* @see {@link RowDraggingPlugin#disable}
+*/
+RowDraggingPlugin.prototype.disableUIs = function (disabled) {
+	this._uiDisabled = disabled !== false;
+};
+
 /** @private
 * @param {*} e
 * @return {!Object}
@@ -467,7 +502,7 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 	}
 
 	// Update UI, grid cursor and guideline
-	if (!this._disabled) { //disabledUI
+	if (!this._uiDisabled) { //disabledUI
 		var grid = this._pos["grid"] || null;
 		if (!grid) return;
 
@@ -536,7 +571,7 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 
 	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
 	this._dispatch("drag", this._pos);
-	if(!this._disabled) {
+	if(!this._uiDisabled) {
 		e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
 		var drop = this._dragUI.renderDragBox(e, this._startingGrid);
 		if(!drop) { // can not be drop or not allow to drop or insertion
@@ -582,20 +617,18 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		 // WARNING: dropTarget is not correct for element in a shadow root
 		destPos["dropTarget"] = e ? e.target : null;
 
-		if (!this.disabled) {
-			if (this._dataTransfer && _isInContentSection(this._pos)) {
-				var destGrid = destPos["grid"] || srcGrid;
-				var destRowIndex = destPos["rowIndex"];
+		if (this._dataTransfer && _isInContentSection(this._pos)) {
+			var destGrid = destPos["grid"] || srcGrid;
+			var destRowIndex = destPos["rowIndex"];
 
-				var rowSelection = srcGrid.getPlugin('RowSelectionPlugin');
-				var srcRowIndices = rowSelection && rowSelection.getSelectedRows();
-				if (!srcRowIndices || !srcRowIndices.length) {
-					// case no row selection or it disabled
-					srcRowIndices = this._startingRid; // Str Type
-				}
-
-				this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, destPos);
+			var rowSelection = srcGrid.getPlugin('RowSelectionPlugin');
+			var srcRowIndices = rowSelection && rowSelection.getSelectedRows();
+			if (!srcRowIndices || !srcRowIndices.length) {
+				// case no row selection or it disabled
+				srcRowIndices = this._startingRid; // Str Type
 			}
+
+			this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, destPos);
 		}
 	}
 
@@ -689,7 +722,7 @@ RowDraggingPlugin.prototype._isDragCancelled = function () {
 */
 RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
 	var pos = this._pos;
-	if (this._disabled || !pos || pos["invalidTarget"]) {
+	if (this._uiDisabled || !pos || pos["invalidTarget"]) {
 		return;
 	}
 

package/lib/tr-grid-row-filtering/es6/RowFiltering.d.ts

@@ -18,7 +18,8 @@ declare namespace RowFilteringPlugin {
 
     type ColumnOptions = {
         filter?: RowFilteringPlugin.Expression,
-        filterState?: any
+        filterState?: any,
+        filterIcon?: boolean
     };
 
     type FilterDialogOptions = {
@@ -86,13 +87,13 @@ declare class RowFilteringPlugin extends GridPlugin {
 
     public getAllColumnFilters(): (((...params: any[]) => any))[];
 
-    public getFilterExpressions(): (RowFilteringPlugin.FilterExpression)[];
+    public getFilterExpressions(): (RowFilteringPlugin.FilterExpression)[]|null;
 
     public setFilterExpressions(filterExps: (RowFilteringPlugin.FilterExpression)[]): void;
 
     public hasColumnFilter(): boolean;
 
-    public getColumnFilterIcons(colIndex: number): (Element)[];
+    public getColumnFilterIcons(colIndex: number): (Element)[]|null;
 
     public updateAllColumnIcons(): void;
 

package/lib/tr-grid-row-filtering/es6/RowFiltering.js

@@ -56,6 +56,7 @@ The expression can take various forms:<br>
 * @description Extension column options that can be specified on each individual grid's column option:
 * @property {RowFilteringPlugin~Expression=} filter An expression string or Function
 * @property {*=} filterState Context object that will be passed as the third parameter for the filter logic
+* @property {boolean=} filterIcon=true If disabled, filter icon will not be shown. This property only works with 'always' mode
 */
 
 /** @typedef {Object} RowFilteringPlugin~FilterDialogOptions
@@ -234,7 +235,7 @@ RowFilteringPlugin.prototype.initialize = function (host, options) {
   this._hosts.push(host);
 
   if (!RowFilteringPlugin._styles) {
-    RowFilteringPlugin._styles = prettifyCss([".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon", ["display: flex;"], ".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon", ["display: none;"], ".floating-panel", ["position:relative;"], ".floating-panel .title-filter-icon", ["color: var(--grid-title-filter-icon-color,inherit);"], ".floating-panel .title-filter-icon:hover", ["color: var(--grid-title-filter-icon-hover-color,inherit);"], ".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter", ["padding-left:0px;"], ".tiny-col .cell .floating-panel .title-filter-icon:before", ["content: '.';", "position: absolute;", "margin-left: auto;", "margin-right: auto;", "left: 0;", "right: 0;", "top: -10px;", "font-size: 10px;", "font-family: monospace;", "color: var(--grid-title-dot-icon,inherit);", "text-align:center;"]]);
+    RowFilteringPlugin._styles = prettifyCss([".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon", ["display: flex;"], ".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon", ["display: none;"], ".floating-panel", ["position:relative;"], ".floating-panel .title-filter-icon", ["color: var(--grid-title-filter-icon-color,inherit);"], ".title .floating-panel .title-filter-icon:hover", ["color: var(--grid-title-filter-icon-hover-color,inherit);"], ".always-on-filter .floating-panel .title-filter-icon", ["color: var(--grid-header-txtcolor,inherit);"], ".always-on-filter .active-filter .floating-panel .title-filter-icon", ["color: var(--grid-title-filter-icon-hover-color,inherit);"], ".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter", ["padding-left:0px;"], ".tiny-col.movable .cell .floating-panel .title-filter-icon:before", ["content: '.';", "position: absolute;", "margin-left: auto;", "margin-right: auto;", "left: 0;", "right: 0;", "top: -10px;", "font-size: 10px;", "font-family: monospace;", "color: var(--grid-title-dot-icon,inherit);", "text-align:center;"]]);
   }
 
   if (!host._rowFilteringStyles) {
@@ -292,10 +293,18 @@ RowFilteringPlugin.prototype.config = function (options) {
     if (rowFiltering["iconActivation"]) {
       this._iconActivation = rowFiltering["iconActivation"];
 
-      if (this._iconActivation === "onHover") {
-        this._hosts[0].enableClass("hovering-filter-icon", true);
-      } else {
-        this._hosts[0].enableClass("hovering-filter-icon", false);
+      for (var index = 0; index < this._hosts.length; index++) {
+        if (this._iconActivation === "onHover") {
+          this._hosts[index].enableClass("hovering-filter-icon", true);
+        } else {
+          this._hosts[index].enableClass("hovering-filter-icon", false);
+        }
+
+        if (this._iconActivation === "always") {
+          this._hosts[index].enableClass("always-on-filter", true);
+        } else {
+          this._hosts[index].enableClass("always-on-filter", false);
+        }
       }
     }
 
@@ -323,8 +332,6 @@ RowFilteringPlugin.prototype.config = function (options) {
 
     this._setColumnOptions(i, column);
   }
-
-  this.updateAllColumnIcons(); //Create icon at first time
 };
 /** @public
 * @param {Object=} gridOptions
@@ -627,18 +634,26 @@ RowFilteringPlugin.prototype.setColumnFilter = function (colIndex, exp, ctx) {
 
 
 RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, columnOptions) {
+  var colOptions = this._newExtColumnOptions(colIndex);
+
+  var filterIcon = columnOptions["filterIcon"];
   var fieldDataType = columnOptions["fieldDataType"] || columnOptions["dataType"]; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
 
   if (fieldDataType) {
-    var colOptions = this._newExtColumnOptions(colIndex);
-
     colOptions.fieldDataType = fieldDataType; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
   }
 
+  if (filterIcon != null) {
+    colOptions.filterIcon = filterIcon;
+  }
+
+  var iconActivation = filterIcon == false ? "none" : this._iconActivation;
   var exp = columnOptions["filter"];
 
   if (exp) {
     this.addColumnFilter(colIndex, exp, columnOptions["filterState"]);
+  } else if (iconActivation == "always" || iconActivation == "onHover") {
+    this._updateColumnIcon(colIndex);
   }
 };
 /** @private
@@ -1241,6 +1256,9 @@ RowFilteringPlugin.prototype.refresh = function () {
 RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
   var cfo = this._getColumnFilterOption(colIndex);
 
+  var co = this._getExtColumnOptions(colIndex);
+
+  var iconActivation = co.filterIcon == false ? "none" : this._iconActivation;
   var hasFilter = cfo ? cfo._filters.length : 0;
 
   for (var i = this._hosts.length; --i >= 0;) {
@@ -1254,6 +1272,8 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
     var rCount = tsect.getRowCount();
     var cell = tsect.getCell(colIndex, rCount - 1, true); // Get bottom cell
 
+    var column = tsect.getColumn(colIndex);
+
     if (!cell) {
       continue;
     } // HACK: Update cell padding for all type of icons (sorting and column grouping icons)
@@ -1263,8 +1283,16 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
       cell["updatePadding"]();
     }
 
-    var onActiveFilter = this._iconActivation !== "always" && this._iconActivation !== "onHover";
-    var noFilterIcon = this._disabled || this._iconActivation === "none" || onActiveFilter && !hasFilter;
+    var isColumnMovable = host.isColumnMovable(colIndex);
+
+    if (isColumnMovable) {
+      column.enableClass("movable", true);
+    } else {
+      column.enableClass("movable", false);
+    }
+
+    var onActiveFilter = iconActivation !== "always" && iconActivation !== "onHover";
+    var noFilterIcon = this._disabled || iconActivation === "none" || onActiveFilter && !hasFilter;
 
     if (!noFilterIcon) {
       if (!cell._filterIcon) {
@@ -1292,7 +1320,7 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
         cell._filterIcon = filterIcon;
       }
 
-      if (hasFilter || this._iconActivation == "always") {
+      if (hasFilter) {
         cell.enableClass("active-filter", true);
       } else {
         cell.enableClass("active-filter", false);
@@ -1709,6 +1737,21 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
     this._filterDialog.init(dialogConfig);
   }
 
+  var colData = host.getColumnData(colIndex);
+  var formatOptions = colData.formatOptions;
+  var useUTCTime = false;
+
+  if (formatOptions) {
+    if (formatOptions.formatType) {
+      useUTCTime = true;
+
+      if (formatOptions.useUTCTime != null) {
+        useUTCTime = formatOptions.useUTCTime;
+      }
+    }
+  }
+
+  this._filterDialog.useUTCTime = useUTCTime;
   this._filterDialog.target = cell.getElement();
   this._filterDialog._colIndex = colIndex;
   this._filterDialog.data = items; // TODO: Move all settings to configuration object
@@ -1915,7 +1958,8 @@ RowFilteringPlugin.prototype._onColumnRemoved = function (e) {
     return;
   }
 
-  var cfo = colData["filterOption"];
+  var crf = colData["rowFiltering"];
+  var cfo = crf["filterOption"];
 
   if (cfo) {
     var funcIndex = this._columnFilters.indexOf(cfo);

package/lib/tr-grid-row-grouping/es6/RowGrouping.js

@@ -1088,7 +1088,7 @@ RowGroupingPlugin.prototype._clearSectionStyles = function (colIndex) {
 		var fi = section.getFirstIndexInView();
 		var li = section.getLastIndexInView();
 		for (var r = fi; r <= li; r++) {
-			rowPainter.removeHeaderStyle(section, colIndex, r);
+			rowPainter.removeAllStyles(section, colIndex, r);
 		}
 	}
 };

package/lib/tr-grid-row-selection/es6/RowSelection.js

@@ -176,16 +176,15 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
 			RowSelectionPlugin._applyThemeColor(host);
 		} else {
 			RowSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
-			RowSelectionPlugin._stylePromise.then(this._onThemeLoaded);
+			RowSelectionPlugin._stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
 		}
 	}
 
 };
 
 /** @private
-* @param {Object} colors
 */
-RowSelectionPlugin.prototype._onThemeLoaded = function(colors) {
+RowSelectionPlugin.prototype._onThemeLoaded = function() {
 	if(!RowSelectionPlugin._styles) {
 		var styles = [
 			".row-selection-menu", [

package/lib/tr-grid-rowcoloring/es6/RowColoring.d.ts

@@ -30,8 +30,6 @@ declare class RowColoringPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public getRowConfigObject(rowId: string): any|null;
-
     public setRowColor(rowRef: string|number, bgColor?: (string|null), txtColor?: (string|null)): void;
 
     public getRowColor(rowRef: string|number): string;

package/lib/tr-grid-rowcoloring/es6/RowColoring.js

@@ -231,42 +231,6 @@ RowColoringPlugin.prototype.getConfigObject = function (gridOptions) {
   return obj;
 };
 /** @public
-* @param {string} rowId
-* @return {Object|null} If this row doesn't contain a config object, return null.
-*/
-
-
-RowColoringPlugin.prototype.getRowConfigObject = function (rowId) {
-  // TODO: Should be call a method for get data from dataTable in tr-grid-util instead of call direct in dataTable
-  var dv = this._getDataView();
-
-  if (!dv) {
-    return null;
-  }
-
-  var dt = dv.getDataSource();
-
-  if (!dt) {
-    return null;
-  }
-
-  var rowData = this._rowGetter(dt.getRowData(rowId)); // get data from dataTable
-
-
-  if (!rowData) {
-    return null;
-  }
-
-  var obj = {}; // Only css field for predefine user color classes are currently supported
-
-  if (rowData[this._cssField]) {
-    obj[this._cssField] = rowData[this._cssField];
-    return obj;
-  }
-
-  return null;
-};
-/** @public
 * @param {string|number} rowRef Row id in the data table or row index
 * @param {(string|null)=} bgColor
 * @param {(string|null)=} txtColor
@@ -369,10 +333,7 @@ RowColoringPlugin.prototype.setRowPredefinedColor = function (rowRef, color) {
     return;
   }
 
-  var values = {};
-  values[this._cssField] = color || "";
-
-  this._setRowData(dv, rowRef, values);
+  this._setStaticData(dv, rowRef, this._cssField, color || "");
 };
 /** @public
 * @return {Object} Return predefined color object map

package/lib/tr-grid-util/es6/CellPainter.d.ts

@@ -5,31 +5,31 @@ import { ElfUtil } from "./ElfUtil.js";
 declare namespace CellPainter {
 
     type Expression = {
-        name?: string,
+        name?: string|null,
         text: string,
-        values?: any[]
+        values?: any[]|null
     };
 
     type Condition = {
         field: string,
-        expression: CellPainter.Expression|string,
-        backgroundColor?: string,
-        color?: string,
-        fontSize?: string,
-        fontWeight?: string,
-        fontStyle?: string,
-        textAlign?: string,
-        textDecoration?: string
+        expression: CellPainter.Expression|string|null,
+        backgroundColor?: string|null,
+        color?: string|null,
+        fontSize?: string|null,
+        fontWeight?: string|null,
+        fontStyle?: string|null,
+        textAlign?: string|null,
+        textDecoration?: string|null
     };
 
     type ThemeColors = {
-        baseGrid?: string,
-        baseText?: string,
-        up?: string,
-        down?: string,
-        level?: string,
-        tickUp?: string,
-        tickDown?: string
+        baseGrid?: string|null,
+        baseText?: string|null,
+        up?: string|null,
+        down?: string|null,
+        level?: string|null,
+        tickUp?: string|null,
+        tickDown?: string|null
     };
 
     enum ColoringTypes {
@@ -46,7 +46,7 @@ declare class CellPainter {
 
     public static readonly themeReady: Promise<any>|null;
 
-    public static parse(expression: string|((...params: any[]) => any)): ((...params: any[]) => any)|null;
+    public static parse(expression: string|((...params: any[]) => any)|null): ((...params: any[]) => any)|null;
 
     public dispose(): void;
 
@@ -68,15 +68,15 @@ declare class CellPainter {
 
     public getColoringType(): CellPainter.ColoringTypes|null;
 
-    public setConditions(conditions: (CellPainter.Condition)[]): void;
+    public setConditions(conditions: (CellPainter.Condition)[]|null): void;
 
     public setColumnStats(columnStats: any): void;
 
     public getColumnStats(): any;
 
-    public addHeatmap(field: string, midPoint: number, upColor: string, downColor: string, baseColor: string, opt_textMode?: (string|boolean)): any;
+    public addHeatmap(field: string, midPoint: number, upColor: string, downColor: string, baseColor: string, opt_textMode?: (string|boolean)|null): any;
 
-    public addHeatmapWithTheme(field: string, midPoint: number, opt_textMode?: (string|boolean)): any;
+    public addHeatmapWithTheme(field: string, midPoint: number, opt_textMode?: (string|boolean)|null): any;
 
     public addColorText(field: string, upColor: string, downColor: string, levelColor: string): any;
 
@@ -86,23 +86,23 @@ declare class CellPainter {
 
     public addTickColorTextWithTheme(): any;
 
-    public addTickBlink(upColor: string, downColor: string, levelColor: string, opt_border?: (string|boolean)): any;
+    public addTickBlink(upColor: string, downColor: string, levelColor: string, opt_border?: (string|boolean)|null): any;
 
-    public addTickBlinkWithTheme(opt_border?: (string|boolean)): any;
+    public addTickBlinkWithTheme(opt_border?: (string|boolean)|null): any;
 
-    public addBlink(field: string, upColor: string, downColor: string, levelColor: string, opt_border?: (string|boolean)): any;
+    public addBlink(field: string, upColor: string, downColor: string, levelColor: string, opt_border?: (string|boolean)|null): any;
 
-    public addBlinkWithTheme(field: string, opt_border?: (string|boolean)): any;
+    public addBlinkWithTheme(field: string, opt_border?: (string|boolean)|null): any;
 
-    public renderForPrinting(cell: Element, rowData: any, min: number, max: number): void;
+    public renderForPrinting(cell: Element|null, rowData: any, min: number, max: number): void;
 
     public static blendColor(baseColor: string, maxColor: string, ratio: number): (number)[]|null;
 
     public static rgb2Hex(rgbCode: string): string;
 
-    public static num2Hex(triplet: (number)[]): string;
+    public static num2Hex(triplet: (number)[]|null): string;
 
-    public static num2Rgb(triplet: (number)[]): string;
+    public static num2Rgb(triplet: (number)[]|null): string;
 
     public static hex2Num(hex: string): (number)[]|null;
 
@@ -114,7 +114,7 @@ declare class CellPainter {
 
     public static reloadThemeColors(): Promise<any>|null;
 
-    public static getOppositeColor(hexCode: string|(number)[]): string;
+    public static getOppositeColor(hexCode: string|(number)[]|null): string;
 
     public render(cell: any, rowData: any, min: number, max: number, changedCols?: any): void;
 
@@ -128,7 +128,7 @@ declare class CellPainter {
 
     public verifyBlinking(cell: any, rowData: any): void;
 
-    public disableLevelColor(disabled?: boolean): void;
+    public disableLevelColor(disabled?: boolean|null): void;
 
 }