@refinitiv-ui/efx-grid 6.0.79 → 6.0.80

package/lib/core/es6/data/DataView.d.ts

@@ -198,6 +198,10 @@ declare class DataView extends EventDispatcher {
 
     public disableCollapsing(bool?: boolean|null): void;
 
+    public setGroupColor(groupColor: string): void;
+
+    public getGroupColor(): string;
+
     public getVisibleRowCount(): number;
 
     public isRowDataInGroup(rowData: any, groupID?: string|null): boolean;

package/lib/core/es6/data/DataView.js

@@ -233,6 +233,10 @@ DataView.prototype._groupRows = null; // Shared between groups
 */
 DataView.prototype._groupId = "";
 /** @private
+* @type {string}
+*/
+DataView.prototype._groupColor = "";
+/** @private
 * @type {*}
 */
 DataView.prototype._groupValue;
@@ -1815,6 +1819,27 @@ DataView.prototype.isCollapsible = function() {
 DataView.prototype.disableCollapsing = function(bool) {
 	this._collapsible = !(bool !== false);
 };
+/**
+* @public
+* @param {string} groupColor
+*/
+DataView.prototype.setGroupColor = function(groupColor) {
+	if(this._groupLevel === 1) {
+		this._groupColor = groupColor;
+	}
+};
+/**
+* @public
+* @return {string}
+*/
+DataView.prototype.getGroupColor = function() {
+	if(this._groupLevel === 0) {
+		return "";
+	} else if(this._groupLevel === 1) {
+		return this._groupColor;
+	}
+	return this._parent.getGroupColor();
+};
 /** @private
 * @return {?Array.<string>}
 */

package/lib/core/es6/grid/Core.js

@@ -570,7 +570,7 @@ Core.prototype._firstRendered = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.84";
+	return "5.1.85";
 };
 /** {@link ElementWrapper#dispose}
 * @override

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.79" };
+window.EFX_GRID = { version: "6.0.80" };

package/lib/tr-grid-column-selection/es6/ColumnSelection.d.ts

@@ -1,8 +1,7 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionPlugin {
 

package/lib/tr-grid-column-selection/es6/ColumnSelection.js

@@ -3,8 +3,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @event ColumnSelectionPlugin#selectionChanged
 * @description Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
 */
@@ -36,7 +35,6 @@ var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
   t._onColumnRemoved = t._onColumnRemoved.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onReselection = t._onReselection.bind(t);
-  t._onThemeLoaded = t._onThemeLoaded.bind(t);
   t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
   t._onBeforeBatchOperation = t._onBeforeBatchOperation.bind(t);
   t._onAfterBatchOperation = t._onAfterBatchOperation.bind(t);
@@ -129,10 +127,20 @@ ColumnSelectionPlugin.prototype._cgp = null; // Column grouping extension
 
 ColumnSelectionPlugin.prototype._prevSelectedCols = {}; // previous selected columns during batch operation
 
+/** @private
+* @return {string}
+*/
+
+ColumnSelectionPlugin._styleCalculator = function () {
+  var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
+  ], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
+  return prettifyCss(styles);
+};
 /** @public
 * @return {string}
 */
 
+
 ColumnSelectionPlugin.prototype.getName = function () {
   return "ColumnSelectionPlugin"; // Read Only
 };
@@ -167,45 +175,7 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
   host.listen("beforeBatchOperation", this._onBeforeBatchOperation);
   host.listen("afterBatchOperation", this._onAfterBatchOperation);
   this.config(options);
-
-  if (ColumnSelectionPlugin._stylePromise) {
-    ColumnSelectionPlugin._applyThemeColor(host);
-  } else {
-    ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
-
-    ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
-  }
-};
-/** @private
-*/
-
-
-ColumnSelectionPlugin.prototype._onThemeLoaded = function () {
-  if (!ColumnSelectionPlugin._styles) {
-    var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
-    ], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
-    ColumnSelectionPlugin._styles = prettifyCss(styles);
-  }
-
-  for (var i = this._hosts.length; --i >= 0;) {
-    ColumnSelectionPlugin._applyThemeColor(this._hosts[i]);
-  }
-};
-/** @private
-* @param {Object} grid core grid instance
-*/
-
-
-ColumnSelectionPlugin._applyThemeColor = function (grid) {
-  if (!grid || grid._columnSelectionStyles) {
-    return;
-  }
-
-  if (ColumnSelectionPlugin._styles) {
-    grid._columnSelectionStyles = true; // Prevent loading the same style twice
-
-    injectCss(ColumnSelectionPlugin._styles, grid.getParent());
-  }
+  this.applyStaticStyles(ColumnSelectionPlugin._styleCalculator);
 };
 /**
 * @protected

package/lib/tr-grid-contextmenu/es6/ContextMenu.d.ts

@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Ext from "../../tr-grid-util/es6/Ext.js";
 import MenuEventAPI from "./MenuEventAPI.js";
 import PopupMenu from "./PopupMenu.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
 
 declare namespace ContextMenuPlugin {

package/lib/tr-grid-contextmenu/es6/ContextMenu.js

@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Ext from "../../tr-grid-util/es6/Ext.js";
 import MenuEventAPI from "./MenuEventAPI.js";
 import PopupMenu from "./PopupMenu.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
 
 /** @typedef {"header" | "content" | "footer" | "filterRow"} ContextMenuPlugin~Context
@@ -78,7 +77,6 @@ var ContextMenuPlugin = function (options) {
 
 	t._onItemClicked = t._onItemClicked.bind(t);
 	t._rightClickedHandler = t._rightClickedHandler.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
 	t.config({ "contextMenu": options });
 };
@@ -93,14 +91,7 @@ ContextMenuPlugin.prototype._contextMap = {
 	"footer": "footer",
 	"filterRow": "filterRow"
 };
-/** @type {string}
-* @private
-*/
-ContextMenuPlugin._styles = ""; // Static variable
-/** @type {Promise<Object>}
-* @private
-*/
-ContextMenuPlugin._stylePromise = null; // Static variable
+
 /** @type {boolean}
 * @private
 */
@@ -130,6 +121,102 @@ ContextMenuPlugin.prototype._rsp = null;
 */
 ContextMenuPlugin.prototype._contextMenu = null;
 
+/** @private
+* @param {Object} colors
+* @return {string}
+*/
+ContextMenuPlugin._styleCalculator = function (colors) {
+	var css = prettifyCss([
+		".tr-contextmenu", [
+			"outline: none;",
+			"box-sizing: border-box;",
+			"-moz-box-sizing: border-box;",
+			"border-style: solid;",
+			"border-width: 1px;",
+			"overflow: hidden;",
+			"padding: 1px;",
+			"margin: 0;",
+			"user-select: none;",
+			"list-style-type: none;",
+			"background-color: backgroundColor;",
+			"color: fontColor;",
+			"border-color: borderColor;"
+		],
+		".tr-contextmenu-item", [
+			"list-style: none;",
+			"padding: 3px 7px;",
+			"margin: 0;",
+			"vertical-align: middle;",
+			"white-space: nowrap;",
+			"cursor: pointer;",
+			"line-height: 20px;"
+		],
+		".tr-contextmenu-item[disabled]", [
+			"color: disabledColor;",
+			"cursor: default;"
+		],
+		".tr-contextmenu-item", [
+			"padding-right: 20px;"
+		],
+		".tr-contextmenu-item:hover:not([disabled])", [
+			"background-color: hoveredColor;"
+		],
+		".tr-contextmenu-popup", [
+			"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
+			"z-index: 10;"
+		],
+		".tr-contextmenu-item.has-child", [
+			"position: relative;"
+		],
+		".tr-contextmenu-item.has-child:after", [
+			"box-sizing: border-box;",
+			"-moz-box-sizing: border-box;",
+			"display: inline-block;",
+			"width: 7px;",
+			"height: 7px;",
+			"border-style: solid;",
+			"border-width: 1px;",
+			"content: \"\";",
+			"-webkit-transform: rotate(45deg);",
+			"transform: rotate(45deg);",
+			"border-left-width: 0;",
+			"border-bottom-width: 0;",
+			"position: absolute;",
+			"right: 8px;",
+			"top: -webkit-calc(50% - 4px);",
+			"top: -moz-calc(50% - 4px);",
+			"top: calc(50% - 4px);",
+			"border-color: fontColor;"
+		],
+		".tr-contextmenu-item[data-type=\"separator\"]", [
+			"padding: 0;",
+			"border: none;",
+			"border-bottom-style: solid;",
+			"border-bottom-width: 1px;",
+			"border-bottom-color: disabledColor;"
+		]
+	]);
+
+	var hex = CellPainter.rgb2Hex(colors.tableBg);
+	var triplet = CellPainter.hex2Num(hex);
+	var bw = CellPainter.blackAndWhite(triplet);
+	var blendRatio;
+	if (bw === "#000000") { // Light theme
+		blendRatio = 0.1;
+		css = css.replace(/disabledColor/g, "lightgrey");
+	} else { // Dark theme
+		blendRatio = 0.2;
+		css = css.replace(/disabledColor/g, "gray");
+	}
+	var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
+	css = css.replace(/hoveredColor/g, hoverd);
+	css = css.replace(/backgroundColor/g, colors.tableBg);
+	css = css.replace(/fontColor/g, colors.tableText);
+	css = css.replace(/borderColor/g, colors.tableBorder);
+
+	return css;
+};
+
 /** @public
 * @return {string}
 */
@@ -151,14 +238,7 @@ ContextMenuPlugin.prototype.initialize = function (host, options) {
 
 	t.config(options);
 
-	if(ContextMenuPlugin._styles) { // Theme has been loaded
-		ContextMenuPlugin._applyThemeColor(host);
-	} else { // Theme has NOT been loaded. Wait for the theme to be loaded
-		if(!ContextMenuPlugin._stylePromise) {
-			ContextMenuPlugin._stylePromise = ElfUtil.getThemeColors();
-		}
-		ContextMenuPlugin._stylePromise.then(t._onThemeLoaded).catch(t._onThemeLoaded);
-	}
+	t.applyStaticStyles(ContextMenuPlugin._styleCalculator);
 };
 
 /** @public
@@ -356,119 +436,6 @@ ContextMenuPlugin.prototype._onItemClicked = function (e) {
 	}
 };
 
-/** @private
-*/
-ContextMenuPlugin.prototype._onThemeLoaded = function () {
-	if(!ContextMenuPlugin._styles) { // Theme can be loaded only once
-		var colors = ElfUtil.getColors();
-		var css = prettifyCss([
-			".tr-contextmenu", [
-				"outline: none;",
-				"box-sizing: border-box;",
-				"-moz-box-sizing: border-box;",
-				"border-style: solid;",
-				"border-width: 1px;",
-				"overflow: hidden;",
-				"padding: 1px;",
-				"margin: 0;",
-				"user-select: none;",
-				"list-style-type: none;",
-				"background-color: backgroundColor;",
-				"color: fontColor;",
-				"border-color: borderColor;"
-			],
-			".tr-contextmenu-item", [
-				"list-style: none;",
-				"padding: 3px 7px;",
-				"margin: 0;",
-				"vertical-align: middle;",
-				"white-space: nowrap;",
-				"cursor: pointer;",
-				"line-height: 20px;"
-			],
-			".tr-contextmenu-item[disabled]", [
-				"color: disabledColor;",
-				"cursor: default;"
-			],
-			".tr-contextmenu-item", [
-				"padding-right: 20px;"
-			],
-			".tr-contextmenu-item:hover:not([disabled])", [
-				"background-color: hoveredColor;"
-			],
-			".tr-contextmenu-popup", [
-				"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
-				"z-index: 10;"
-			],
-			".tr-contextmenu-item.has-child", [
-				"position: relative;"
-			],
-			".tr-contextmenu-item.has-child:after", [
-				"box-sizing: border-box;",
-				"-moz-box-sizing: border-box;",
-				"display: inline-block;",
-				"width: 7px;",
-				"height: 7px;",
-				"border-style: solid;",
-				"border-width: 1px;",
-				"content: \"\";",
-				"-webkit-transform: rotate(45deg);",
-				"transform: rotate(45deg);",
-				"border-left-width: 0;",
-				"border-bottom-width: 0;",
-				"position: absolute;",
-				"right: 8px;",
-				"top: -webkit-calc(50% - 4px);",
-				"top: -moz-calc(50% - 4px);",
-				"top: calc(50% - 4px);",
-				"border-color: fontColor;"
-			],
-			".tr-contextmenu-item[data-type=\"separator\"]", [
-				"padding: 0;",
-				"border: none;",
-				"border-bottom-style: solid;",
-				"border-bottom-width: 1px;",
-				"border-bottom-color: disabledColor;"
-			]
-		]);
-
-		var hex = CellPainter.rgb2Hex(colors.tableBg);
-		var triplet = CellPainter.hex2Num(hex);
-		var bw = CellPainter.blackAndWhite(triplet);
-		var blendRatio;
-		if (bw === "#000000") { // Light theme
-			blendRatio = 0.1;
-			css = css.replace(/disabledColor/g, "lightgrey");
-		} else { // Dark theme
-			blendRatio = 0.2;
-			css = css.replace(/disabledColor/g, "gray");
-		}
-		var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
-		css = css.replace(/hoveredColor/g, hoverd);
-		css = css.replace(/backgroundColor/g, colors.tableBg);
-		css = css.replace(/fontColor/g, colors.tableText);
-		css = css.replace(/borderColor/g, colors.tableBorder);
-
-		ContextMenuPlugin._styles = css;
-	}
-
-	for(var i = this._hosts.length; --i >= 0;) {
-		ContextMenuPlugin._applyThemeColor(this._hosts[i]);
-	}
-};
-/** @private
-* @param {Object} grid core grid object
-*/
-ContextMenuPlugin._applyThemeColor = function(grid) {
-	if(!grid || grid._contextMenuStyles) {
-		return;
-	}
-	if(ContextMenuPlugin._styles) {
-		grid._contextMenuStyles = true; // Prevent loading the same style twice
-		injectCss(ContextMenuPlugin._styles, grid.getElement());
-	}
-};
-
 
 
 export default ContextMenuPlugin;

package/lib/tr-grid-row-grouping/es6/RowGrouping.d.ts

@@ -87,6 +87,8 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public setDefaultCollapse(collapse: boolean): void;
 
+    public setGroupColor(groupRef: string, groupColor: string): void;
+
     public getDefaultCollapse(): boolean;
 
     public sortGroups(): void;

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

@@ -25,7 +25,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {(boolean|number|Array.<number>)=} indentSize Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
 * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
 * @property {Object=} predefinedColors Predefined color object map for color tag
-* @property {Object=} groupColors The object map of group ID and predefined color.
+* @property {Object=} groupColors - Deprecated, the object map of group ID and predefined color.
 * @property {boolean=} defaultCollapse=false Collapsing groups by default when a group is created
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
 * @property {Function=} groupAdded=null Event handler
@@ -1012,6 +1012,25 @@ RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
 	}
 };
 
+/** @public
+* @param {string} groupRef
+* @param {string} groupColor color name from predefinedColors
+*/
+RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
+	var dv = this.getDataView();
+	if(!dv) {
+		return;
+	}
+	var grp = dv.getGroup(groupRef);
+	if(grp) {
+		grp.setGroupColor(groupColor);
+		var host = this._hosts[0];
+		if(host) {
+			host.requestRowRefresh();
+		}
+	}
+};
+
 /** @public
 * @return {boolean}
 */
@@ -1172,8 +1191,18 @@ RowGroupingPlugin.prototype._onGroupAdded = function (e) {
 			newGroup.disableCollapsing();
 		}
 	}
-	this._dispatch("groupAdded", e);
 
+	var groupColors = this._groupColors;
+	var groupColor;
+	if(groupColors) { // Backward compatibility
+		var groupId = newGroup.getGroupId();
+		groupColor = groupColors[groupId];
+		if(groupColor) {
+			newGroup.setGroupColor(groupColor);
+		}
+	}
+
+	this._dispatch("groupAdded", e);
 	if (this._autoGroupSorting) {
 		if (!this._sortingTimer) {
 			this._sortingTimer = setTimeout(this.sortGroups, 100);
@@ -1387,20 +1416,9 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			indentSize = maxColWidth;
 		}
 
+		var groupColor = currentGroup.getGroupColor();
+		arg.colorTagClass = groupColor;
 		arg.indentSize = indentSize;
-
-		if (this._groupColors) {
-			// TODO: Need better method to find the first level parent's group id
-			var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
-			if (curGroupLevel > 1) {
-				for (var i = curGroupLevel; i > 1; i--) {
-					rootGroup = rootGroup.getDataSource();
-				}
-			}
-			var groupId = rootGroup.getGroupId();
-			arg.colorTagClass = this._groupColors[groupId];
-		}
-
 		if (groupView) {
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);

package/lib/tr-grid-row-selection/es6/RowSelection.d.ts

@@ -3,8 +3,7 @@ import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowSelectionPlugin {
 

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

@@ -3,8 +3,7 @@ import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 var isMac = isMacFn();
 /** Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
 * @event RowSelectionPlugin#selectionChanged
@@ -45,7 +44,6 @@ var RowSelectionPlugin = function (options) {
 	t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
 	t._onReselection = t._onReselection.bind(t);
 	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 	t._onRowPositionChanged = t._onRowPositionChanged.bind(t);
 	t._updateMenuIcon = t._updateMenuIcon.bind(t);
 
@@ -131,6 +129,32 @@ RowSelectionPlugin.prototype._timerMenuId = 0;
 */
 RowSelectionPlugin.prototype._pendingSelection = null;
 
+/** @private
+* @return {string}
+*/
+RowSelectionPlugin._styleCalculator = function() {
+	var styles = [
+		".row-selection-menu", [
+			"position: absolute;",
+			"background-color: var(--grid-column-menu-icon-bgcolor);",
+			"color: var(--grid-column-menu-icon-color);",
+			"z-index: 1;",
+			"cursor: pointer;",
+			"text-align: center;",
+			"width: 16px;",
+			"height: 16px;",
+			"padding: 6px;"
+		],
+		".row-selection-menu:hover", [
+			"background-color: var(--grid-column-menu-icon-hover-bgcolor);"
+		],
+		".row-selection-menu-inside", [
+			"padding: 4px;"
+		]
+	];
+	return prettifyCss(styles);
+};
+
 /** @public
 * @return {string}
 */
@@ -172,57 +196,10 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
 	this.config(options);
 
 	if(this._onMenuClicked) { // use styles menu icon only when want to use icon menu
-		if(RowSelectionPlugin._stylePromise) {
-			RowSelectionPlugin._applyThemeColor(host);
-		} else {
-			RowSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
-			RowSelectionPlugin._stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
-		}
+		this.applyStaticStyles(RowSelectionPlugin._styleCalculator);
 	}
-
 };
 
-/** @private
-*/
-RowSelectionPlugin.prototype._onThemeLoaded = function() {
-	if(!RowSelectionPlugin._styles) {
-		var styles = [
-			".row-selection-menu", [
-				"position: absolute;",
-				"background-color: var(--grid-column-menu-icon-bgcolor);",
-				"color: var(--grid-column-menu-icon-color);",
-				"z-index: 1;",
-				"cursor: pointer;",
-				"text-align: center;",
-				"width: 16px;",
-				"height: 16px;",
-				"padding: 6px;"
-			],
-			".row-selection-menu:hover", [
-				"background-color: var(--grid-column-menu-icon-hover-bgcolor);"
-			],
-			".row-selection-menu-inside", [
-				"padding: 4px;"
-			]
-		];
-		RowSelectionPlugin._styles = prettifyCss(styles);
-	}
-	for(var i = this._hosts.length; --i >= 0;) {
-		RowSelectionPlugin._applyThemeColor(this._hosts[i]);
-	}
-};
-/** @private
-* @param {Object} grid core grid instance
-*/
-RowSelectionPlugin._applyThemeColor = function(grid) {
-	if(!grid || grid._rowSelectionStyles) {
-		return;
-	}
-	if(RowSelectionPlugin._styles) {
-		grid._rowSelectionStyles = true; // Prevent loading the same style twice
-		injectCss(RowSelectionPlugin._styles, grid.getParent());
-	}
-};
 /** @public
 * @param {Object=} host core grid instance
 */

package/lib/types/es6/ColumnSelection.d.ts

@@ -1,8 +1,7 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionPlugin {
 

package/lib/types/es6/ContextMenu.d.ts

@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Ext from "../../tr-grid-util/es6/Ext.js";
 import MenuEventAPI from "./MenuEventAPI.js";
 import PopupMenu from "./PopupMenu.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
 
 declare namespace ContextMenuPlugin {