@refinitiv-ui/efx-grid 6.0.79 → 6.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/lib/column-dragging/es6/ColumnDragging.js +1 -1
  2. package/lib/column-selection-dialog/lib/column-selection-dialog.js +12 -11
  3. package/lib/column-selection-dialog/lib/locale/translation-de.js +2 -1
  4. package/lib/column-selection-dialog/lib/locale/translation-en.js +2 -1
  5. package/lib/column-selection-dialog/lib/locale/translation-ja.js +2 -1
  6. package/lib/column-selection-dialog/lib/locale/translation-zh-hant.js +2 -1
  7. package/lib/column-selection-dialog/lib/locale/translation-zh.js +2 -1
  8. package/lib/column-selection-dialog/themes/base.less +45 -24
  9. package/lib/column-selection-dialog/themes/elemental/dark/column-selection-dialog.js +1 -1
  10. package/lib/column-selection-dialog/themes/elemental/dark/es5/all-elements.js +1 -1
  11. package/lib/column-selection-dialog/themes/elemental/light/column-selection-dialog.js +1 -1
  12. package/lib/column-selection-dialog/themes/elemental/light/es5/all-elements.js +1 -1
  13. package/lib/column-selection-dialog/themes/halo/dark/column-selection-dialog.js +1 -1
  14. package/lib/column-selection-dialog/themes/halo/dark/es5/all-elements.js +1 -1
  15. package/lib/column-selection-dialog/themes/halo/light/column-selection-dialog.js +1 -1
  16. package/lib/column-selection-dialog/themes/halo/light/es5/all-elements.js +1 -1
  17. package/lib/column-selection-dialog/themes/solar/charcoal/column-selection-dialog.js +1 -1
  18. package/lib/column-selection-dialog/themes/solar/charcoal/es5/all-elements.js +1 -1
  19. package/lib/column-selection-dialog/themes/solar/pearl/column-selection-dialog.js +1 -1
  20. package/lib/column-selection-dialog/themes/solar/pearl/es5/all-elements.js +1 -1
  21. package/lib/core/dist/core.js +26 -1
  22. package/lib/core/dist/core.min.js +1 -1
  23. package/lib/core/es6/data/DataView.d.ts +4 -0
  24. package/lib/core/es6/data/DataView.js +25 -0
  25. package/lib/core/es6/grid/Core.js +1 -1
  26. package/lib/grid/index.js +1 -1
  27. package/lib/tr-grid-column-selection/es6/ColumnSelection.d.ts +1 -2
  28. package/lib/tr-grid-column-selection/es6/ColumnSelection.js +12 -42
  29. package/lib/tr-grid-contextmenu/es6/ContextMenu.d.ts +1 -2
  30. package/lib/tr-grid-contextmenu/es6/ContextMenu.js +99 -132
  31. package/lib/tr-grid-row-grouping/es6/RowGrouping.d.ts +2 -0
  32. package/lib/tr-grid-row-grouping/es6/RowGrouping.js +33 -15
  33. package/lib/tr-grid-row-selection/es6/RowSelection.d.ts +1 -2
  34. package/lib/tr-grid-row-selection/es6/RowSelection.js +28 -51
  35. package/lib/types/es6/ColumnSelection.d.ts +1 -2
  36. package/lib/types/es6/ContextMenu.d.ts +1 -2
  37. package/lib/types/es6/Core/data/DataView.d.ts +4 -0
  38. package/lib/types/es6/RowGrouping.d.ts +2 -0
  39. package/lib/types/es6/RowSelection.d.ts +1 -2
  40. package/lib/versions.json +6 -6
  41. package/package.json +1 -1
@@ -198,6 +198,10 @@ declare class DataView extends EventDispatcher {
198
198
 
199
199
  public disableCollapsing(bool?: boolean|null): void;
200
200
 
201
+ public setGroupColor(groupColor: string): void;
202
+
203
+ public getGroupColor(): string;
204
+
201
205
  public getVisibleRowCount(): number;
202
206
 
203
207
  public isRowDataInGroup(rowData: any, groupID?: string|null): boolean;
@@ -233,6 +233,10 @@ DataView.prototype._groupRows = null; // Shared between groups
233
233
  */
234
234
  DataView.prototype._groupId = "";
235
235
  /** @private
236
+ * @type {string}
237
+ */
238
+ DataView.prototype._groupColor = "";
239
+ /** @private
236
240
  * @type {*}
237
241
  */
238
242
  DataView.prototype._groupValue;
@@ -1815,6 +1819,27 @@ DataView.prototype.isCollapsible = function() {
1815
1819
  DataView.prototype.disableCollapsing = function(bool) {
1816
1820
  this._collapsible = !(bool !== false);
1817
1821
  };
1822
+ /**
1823
+ * @public
1824
+ * @param {string} groupColor
1825
+ */
1826
+ DataView.prototype.setGroupColor = function(groupColor) {
1827
+ if(this._groupLevel === 1) {
1828
+ this._groupColor = groupColor;
1829
+ }
1830
+ };
1831
+ /**
1832
+ * @public
1833
+ * @return {string}
1834
+ */
1835
+ DataView.prototype.getGroupColor = function() {
1836
+ if(this._groupLevel === 0) {
1837
+ return "";
1838
+ } else if(this._groupLevel === 1) {
1839
+ return this._groupColor;
1840
+ }
1841
+ return this._parent.getGroupColor();
1842
+ };
1818
1843
  /** @private
1819
1844
  * @return {?Array.<string>}
1820
1845
  */
@@ -570,7 +570,7 @@ Core.prototype._firstRendered = false;
570
570
  * @return {string}
571
571
  */
572
572
  Core.getVersion = function () {
573
- return "5.1.84";
573
+ return "5.1.85";
574
574
  };
575
575
  /** {@link ElementWrapper#dispose}
576
576
  * @override
package/lib/grid/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import {Grid} from "./lib/efx-grid.js";
2
2
  export {Grid}
3
- window.EFX_GRID = { version: "6.0.79" };
3
+ window.EFX_GRID = { version: "6.0.80" };
@@ -1,8 +1,7 @@
1
1
  import { Ext } from "../../tr-grid-util/es6/Ext.js";
2
2
  import { Dom } from "../../tr-grid-util/es6/Dom.js";
3
3
  import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
4
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
5
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
4
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
5
 
7
6
  declare namespace ColumnSelectionPlugin {
8
7
 
@@ -3,8 +3,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
3
3
  import { Ext } from "../../tr-grid-util/es6/Ext.js";
4
4
  import { Dom } from "../../tr-grid-util/es6/Dom.js";
5
5
  import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
6
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
7
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
8
7
  /** @event ColumnSelectionPlugin#selectionChanged
9
8
  * @description Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
10
9
  */
@@ -36,7 +35,6 @@ var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
36
35
  t._onColumnRemoved = t._onColumnRemoved.bind(t);
37
36
  t._onColumnAdded = t._onColumnAdded.bind(t);
38
37
  t._onReselection = t._onReselection.bind(t);
39
- t._onThemeLoaded = t._onThemeLoaded.bind(t);
40
38
  t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
41
39
  t._onBeforeBatchOperation = t._onBeforeBatchOperation.bind(t);
42
40
  t._onAfterBatchOperation = t._onAfterBatchOperation.bind(t);
@@ -129,10 +127,20 @@ ColumnSelectionPlugin.prototype._cgp = null; // Column grouping extension
129
127
 
130
128
  ColumnSelectionPlugin.prototype._prevSelectedCols = {}; // previous selected columns during batch operation
131
129
 
130
+ /** @private
131
+ * @return {string}
132
+ */
133
+
134
+ ColumnSelectionPlugin._styleCalculator = function () {
135
+ 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
136
+ ], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
137
+ return prettifyCss(styles);
138
+ };
132
139
  /** @public
133
140
  * @return {string}
134
141
  */
135
142
 
143
+
136
144
  ColumnSelectionPlugin.prototype.getName = function () {
137
145
  return "ColumnSelectionPlugin"; // Read Only
138
146
  };
@@ -167,45 +175,7 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
167
175
  host.listen("beforeBatchOperation", this._onBeforeBatchOperation);
168
176
  host.listen("afterBatchOperation", this._onAfterBatchOperation);
169
177
  this.config(options);
170
-
171
- if (ColumnSelectionPlugin._stylePromise) {
172
- ColumnSelectionPlugin._applyThemeColor(host);
173
- } else {
174
- ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
175
-
176
- ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
177
- }
178
- };
179
- /** @private
180
- */
181
-
182
-
183
- ColumnSelectionPlugin.prototype._onThemeLoaded = function () {
184
- if (!ColumnSelectionPlugin._styles) {
185
- 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
186
- ], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
187
- ColumnSelectionPlugin._styles = prettifyCss(styles);
188
- }
189
-
190
- for (var i = this._hosts.length; --i >= 0;) {
191
- ColumnSelectionPlugin._applyThemeColor(this._hosts[i]);
192
- }
193
- };
194
- /** @private
195
- * @param {Object} grid core grid instance
196
- */
197
-
198
-
199
- ColumnSelectionPlugin._applyThemeColor = function (grid) {
200
- if (!grid || grid._columnSelectionStyles) {
201
- return;
202
- }
203
-
204
- if (ColumnSelectionPlugin._styles) {
205
- grid._columnSelectionStyles = true; // Prevent loading the same style twice
206
-
207
- injectCss(ColumnSelectionPlugin._styles, grid.getParent());
208
- }
178
+ this.applyStaticStyles(ColumnSelectionPlugin._styleCalculator);
209
179
  };
210
180
  /**
211
181
  * @protected
@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
2
2
  import Ext from "../../tr-grid-util/es6/Ext.js";
3
3
  import MenuEventAPI from "./MenuEventAPI.js";
4
4
  import PopupMenu from "./PopupMenu.js";
5
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
5
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
7
6
  import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
8
7
 
9
8
  declare namespace ContextMenuPlugin {
@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
2
2
  import Ext from "../../tr-grid-util/es6/Ext.js";
3
3
  import MenuEventAPI from "./MenuEventAPI.js";
4
4
  import PopupMenu from "./PopupMenu.js";
5
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
5
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
7
6
  import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
8
7
 
9
8
  /** @typedef {"header" | "content" | "footer" | "filterRow"} ContextMenuPlugin~Context
@@ -78,7 +77,6 @@ var ContextMenuPlugin = function (options) {
78
77
 
79
78
  t._onItemClicked = t._onItemClicked.bind(t);
80
79
  t._rightClickedHandler = t._rightClickedHandler.bind(t);
81
- t._onThemeLoaded = t._onThemeLoaded.bind(t);
82
80
 
83
81
  t.config({ "contextMenu": options });
84
82
  };
@@ -93,14 +91,7 @@ ContextMenuPlugin.prototype._contextMap = {
93
91
  "footer": "footer",
94
92
  "filterRow": "filterRow"
95
93
  };
96
- /** @type {string}
97
- * @private
98
- */
99
- ContextMenuPlugin._styles = ""; // Static variable
100
- /** @type {Promise<Object>}
101
- * @private
102
- */
103
- ContextMenuPlugin._stylePromise = null; // Static variable
94
+
104
95
  /** @type {boolean}
105
96
  * @private
106
97
  */
@@ -130,6 +121,102 @@ ContextMenuPlugin.prototype._rsp = null;
130
121
  */
131
122
  ContextMenuPlugin.prototype._contextMenu = null;
132
123
 
124
+ /** @private
125
+ * @param {Object} colors
126
+ * @return {string}
127
+ */
128
+ ContextMenuPlugin._styleCalculator = function (colors) {
129
+ var css = prettifyCss([
130
+ ".tr-contextmenu", [
131
+ "outline: none;",
132
+ "box-sizing: border-box;",
133
+ "-moz-box-sizing: border-box;",
134
+ "border-style: solid;",
135
+ "border-width: 1px;",
136
+ "overflow: hidden;",
137
+ "padding: 1px;",
138
+ "margin: 0;",
139
+ "user-select: none;",
140
+ "list-style-type: none;",
141
+ "background-color: backgroundColor;",
142
+ "color: fontColor;",
143
+ "border-color: borderColor;"
144
+ ],
145
+ ".tr-contextmenu-item", [
146
+ "list-style: none;",
147
+ "padding: 3px 7px;",
148
+ "margin: 0;",
149
+ "vertical-align: middle;",
150
+ "white-space: nowrap;",
151
+ "cursor: pointer;",
152
+ "line-height: 20px;"
153
+ ],
154
+ ".tr-contextmenu-item[disabled]", [
155
+ "color: disabledColor;",
156
+ "cursor: default;"
157
+ ],
158
+ ".tr-contextmenu-item", [
159
+ "padding-right: 20px;"
160
+ ],
161
+ ".tr-contextmenu-item:hover:not([disabled])", [
162
+ "background-color: hoveredColor;"
163
+ ],
164
+ ".tr-contextmenu-popup", [
165
+ "box-shadow: 0 0 10px rgba(0,0,0,0.5);",
166
+ "z-index: 10;"
167
+ ],
168
+ ".tr-contextmenu-item.has-child", [
169
+ "position: relative;"
170
+ ],
171
+ ".tr-contextmenu-item.has-child:after", [
172
+ "box-sizing: border-box;",
173
+ "-moz-box-sizing: border-box;",
174
+ "display: inline-block;",
175
+ "width: 7px;",
176
+ "height: 7px;",
177
+ "border-style: solid;",
178
+ "border-width: 1px;",
179
+ "content: \"\";",
180
+ "-webkit-transform: rotate(45deg);",
181
+ "transform: rotate(45deg);",
182
+ "border-left-width: 0;",
183
+ "border-bottom-width: 0;",
184
+ "position: absolute;",
185
+ "right: 8px;",
186
+ "top: -webkit-calc(50% - 4px);",
187
+ "top: -moz-calc(50% - 4px);",
188
+ "top: calc(50% - 4px);",
189
+ "border-color: fontColor;"
190
+ ],
191
+ ".tr-contextmenu-item[data-type=\"separator\"]", [
192
+ "padding: 0;",
193
+ "border: none;",
194
+ "border-bottom-style: solid;",
195
+ "border-bottom-width: 1px;",
196
+ "border-bottom-color: disabledColor;"
197
+ ]
198
+ ]);
199
+
200
+ var hex = CellPainter.rgb2Hex(colors.tableBg);
201
+ var triplet = CellPainter.hex2Num(hex);
202
+ var bw = CellPainter.blackAndWhite(triplet);
203
+ var blendRatio;
204
+ if (bw === "#000000") { // Light theme
205
+ blendRatio = 0.1;
206
+ css = css.replace(/disabledColor/g, "lightgrey");
207
+ } else { // Dark theme
208
+ blendRatio = 0.2;
209
+ css = css.replace(/disabledColor/g, "gray");
210
+ }
211
+ var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
212
+ css = css.replace(/hoveredColor/g, hoverd);
213
+ css = css.replace(/backgroundColor/g, colors.tableBg);
214
+ css = css.replace(/fontColor/g, colors.tableText);
215
+ css = css.replace(/borderColor/g, colors.tableBorder);
216
+
217
+ return css;
218
+ };
219
+
133
220
  /** @public
134
221
  * @return {string}
135
222
  */
@@ -151,14 +238,7 @@ ContextMenuPlugin.prototype.initialize = function (host, options) {
151
238
 
152
239
  t.config(options);
153
240
 
154
- if(ContextMenuPlugin._styles) { // Theme has been loaded
155
- ContextMenuPlugin._applyThemeColor(host);
156
- } else { // Theme has NOT been loaded. Wait for the theme to be loaded
157
- if(!ContextMenuPlugin._stylePromise) {
158
- ContextMenuPlugin._stylePromise = ElfUtil.getThemeColors();
159
- }
160
- ContextMenuPlugin._stylePromise.then(t._onThemeLoaded).catch(t._onThemeLoaded);
161
- }
241
+ t.applyStaticStyles(ContextMenuPlugin._styleCalculator);
162
242
  };
163
243
 
164
244
  /** @public
@@ -356,119 +436,6 @@ ContextMenuPlugin.prototype._onItemClicked = function (e) {
356
436
  }
357
437
  };
358
438
 
359
- /** @private
360
- */
361
- ContextMenuPlugin.prototype._onThemeLoaded = function () {
362
- if(!ContextMenuPlugin._styles) { // Theme can be loaded only once
363
- var colors = ElfUtil.getColors();
364
- var css = prettifyCss([
365
- ".tr-contextmenu", [
366
- "outline: none;",
367
- "box-sizing: border-box;",
368
- "-moz-box-sizing: border-box;",
369
- "border-style: solid;",
370
- "border-width: 1px;",
371
- "overflow: hidden;",
372
- "padding: 1px;",
373
- "margin: 0;",
374
- "user-select: none;",
375
- "list-style-type: none;",
376
- "background-color: backgroundColor;",
377
- "color: fontColor;",
378
- "border-color: borderColor;"
379
- ],
380
- ".tr-contextmenu-item", [
381
- "list-style: none;",
382
- "padding: 3px 7px;",
383
- "margin: 0;",
384
- "vertical-align: middle;",
385
- "white-space: nowrap;",
386
- "cursor: pointer;",
387
- "line-height: 20px;"
388
- ],
389
- ".tr-contextmenu-item[disabled]", [
390
- "color: disabledColor;",
391
- "cursor: default;"
392
- ],
393
- ".tr-contextmenu-item", [
394
- "padding-right: 20px;"
395
- ],
396
- ".tr-contextmenu-item:hover:not([disabled])", [
397
- "background-color: hoveredColor;"
398
- ],
399
- ".tr-contextmenu-popup", [
400
- "box-shadow: 0 0 10px rgba(0,0,0,0.5);",
401
- "z-index: 10;"
402
- ],
403
- ".tr-contextmenu-item.has-child", [
404
- "position: relative;"
405
- ],
406
- ".tr-contextmenu-item.has-child:after", [
407
- "box-sizing: border-box;",
408
- "-moz-box-sizing: border-box;",
409
- "display: inline-block;",
410
- "width: 7px;",
411
- "height: 7px;",
412
- "border-style: solid;",
413
- "border-width: 1px;",
414
- "content: \"\";",
415
- "-webkit-transform: rotate(45deg);",
416
- "transform: rotate(45deg);",
417
- "border-left-width: 0;",
418
- "border-bottom-width: 0;",
419
- "position: absolute;",
420
- "right: 8px;",
421
- "top: -webkit-calc(50% - 4px);",
422
- "top: -moz-calc(50% - 4px);",
423
- "top: calc(50% - 4px);",
424
- "border-color: fontColor;"
425
- ],
426
- ".tr-contextmenu-item[data-type=\"separator\"]", [
427
- "padding: 0;",
428
- "border: none;",
429
- "border-bottom-style: solid;",
430
- "border-bottom-width: 1px;",
431
- "border-bottom-color: disabledColor;"
432
- ]
433
- ]);
434
-
435
- var hex = CellPainter.rgb2Hex(colors.tableBg);
436
- var triplet = CellPainter.hex2Num(hex);
437
- var bw = CellPainter.blackAndWhite(triplet);
438
- var blendRatio;
439
- if (bw === "#000000") { // Light theme
440
- blendRatio = 0.1;
441
- css = css.replace(/disabledColor/g, "lightgrey");
442
- } else { // Dark theme
443
- blendRatio = 0.2;
444
- css = css.replace(/disabledColor/g, "gray");
445
- }
446
- var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
447
- css = css.replace(/hoveredColor/g, hoverd);
448
- css = css.replace(/backgroundColor/g, colors.tableBg);
449
- css = css.replace(/fontColor/g, colors.tableText);
450
- css = css.replace(/borderColor/g, colors.tableBorder);
451
-
452
- ContextMenuPlugin._styles = css;
453
- }
454
-
455
- for(var i = this._hosts.length; --i >= 0;) {
456
- ContextMenuPlugin._applyThemeColor(this._hosts[i]);
457
- }
458
- };
459
- /** @private
460
- * @param {Object} grid core grid object
461
- */
462
- ContextMenuPlugin._applyThemeColor = function(grid) {
463
- if(!grid || grid._contextMenuStyles) {
464
- return;
465
- }
466
- if(ContextMenuPlugin._styles) {
467
- grid._contextMenuStyles = true; // Prevent loading the same style twice
468
- injectCss(ContextMenuPlugin._styles, grid.getElement());
469
- }
470
- };
471
-
472
439
 
473
440
 
474
441
  export default ContextMenuPlugin;
@@ -87,6 +87,8 @@ declare class RowGroupingPlugin extends GridPlugin {
87
87
 
88
88
  public setDefaultCollapse(collapse: boolean): void;
89
89
 
90
+ public setGroupColor(groupRef: string, groupColor: string): void;
91
+
90
92
  public getDefaultCollapse(): boolean;
91
93
 
92
94
  public sortGroups(): void;
@@ -25,7 +25,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
25
25
  * @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.
26
26
  * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
27
27
  * @property {Object=} predefinedColors Predefined color object map for color tag
28
- * @property {Object=} groupColors The object map of group ID and predefined color.
28
+ * @property {Object=} groupColors - Deprecated, the object map of group ID and predefined color.
29
29
  * @property {boolean=} defaultCollapse=false Collapsing groups by default when a group is created
30
30
  * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
31
31
  * @property {Function=} groupAdded=null Event handler
@@ -1012,6 +1012,25 @@ RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
1012
1012
  }
1013
1013
  };
1014
1014
 
1015
+ /** @public
1016
+ * @param {string} groupRef
1017
+ * @param {string} groupColor color name from predefinedColors
1018
+ */
1019
+ RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
1020
+ var dv = this.getDataView();
1021
+ if(!dv) {
1022
+ return;
1023
+ }
1024
+ var grp = dv.getGroup(groupRef);
1025
+ if(grp) {
1026
+ grp.setGroupColor(groupColor);
1027
+ var host = this._hosts[0];
1028
+ if(host) {
1029
+ host.requestRowRefresh();
1030
+ }
1031
+ }
1032
+ };
1033
+
1015
1034
  /** @public
1016
1035
  * @return {boolean}
1017
1036
  */
@@ -1172,8 +1191,18 @@ RowGroupingPlugin.prototype._onGroupAdded = function (e) {
1172
1191
  newGroup.disableCollapsing();
1173
1192
  }
1174
1193
  }
1175
- this._dispatch("groupAdded", e);
1176
1194
 
1195
+ var groupColors = this._groupColors;
1196
+ var groupColor;
1197
+ if(groupColors) { // Backward compatibility
1198
+ var groupId = newGroup.getGroupId();
1199
+ groupColor = groupColors[groupId];
1200
+ if(groupColor) {
1201
+ newGroup.setGroupColor(groupColor);
1202
+ }
1203
+ }
1204
+
1205
+ this._dispatch("groupAdded", e);
1177
1206
  if (this._autoGroupSorting) {
1178
1207
  if (!this._sortingTimer) {
1179
1208
  this._sortingTimer = setTimeout(this.sortGroups, 100);
@@ -1387,20 +1416,9 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
1387
1416
  indentSize = maxColWidth;
1388
1417
  }
1389
1418
 
1419
+ var groupColor = currentGroup.getGroupColor();
1420
+ arg.colorTagClass = groupColor;
1390
1421
  arg.indentSize = indentSize;
1391
-
1392
- if (this._groupColors) {
1393
- // TODO: Need better method to find the first level parent's group id
1394
- var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
1395
- if (curGroupLevel > 1) {
1396
- for (var i = curGroupLevel; i > 1; i--) {
1397
- rootGroup = rootGroup.getDataSource();
1398
- }
1399
- }
1400
- var groupId = rootGroup.getGroupId();
1401
- arg.colorTagClass = this._groupColors[groupId];
1402
- }
1403
-
1404
1422
  if (groupView) {
1405
1423
  rowPainter.applyHeaderStyle(arg);
1406
1424
  this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);
@@ -3,8 +3,7 @@ import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
3
3
  import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
4
4
  import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
5
5
  import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
6
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
7
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
8
7
 
9
8
  declare namespace RowSelectionPlugin {
10
9
 
@@ -3,8 +3,7 @@ import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
3
3
  import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
4
4
  import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
5
5
  import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
6
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
7
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
8
7
  var isMac = isMacFn();
9
8
  /** Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
10
9
  * @event RowSelectionPlugin#selectionChanged
@@ -45,7 +44,6 @@ var RowSelectionPlugin = function (options) {
45
44
  t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
46
45
  t._onReselection = t._onReselection.bind(t);
47
46
  t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
48
- t._onThemeLoaded = t._onThemeLoaded.bind(t);
49
47
  t._onRowPositionChanged = t._onRowPositionChanged.bind(t);
50
48
  t._updateMenuIcon = t._updateMenuIcon.bind(t);
51
49
 
@@ -131,6 +129,32 @@ RowSelectionPlugin.prototype._timerMenuId = 0;
131
129
  */
132
130
  RowSelectionPlugin.prototype._pendingSelection = null;
133
131
 
132
+ /** @private
133
+ * @return {string}
134
+ */
135
+ RowSelectionPlugin._styleCalculator = function() {
136
+ var styles = [
137
+ ".row-selection-menu", [
138
+ "position: absolute;",
139
+ "background-color: var(--grid-column-menu-icon-bgcolor);",
140
+ "color: var(--grid-column-menu-icon-color);",
141
+ "z-index: 1;",
142
+ "cursor: pointer;",
143
+ "text-align: center;",
144
+ "width: 16px;",
145
+ "height: 16px;",
146
+ "padding: 6px;"
147
+ ],
148
+ ".row-selection-menu:hover", [
149
+ "background-color: var(--grid-column-menu-icon-hover-bgcolor);"
150
+ ],
151
+ ".row-selection-menu-inside", [
152
+ "padding: 4px;"
153
+ ]
154
+ ];
155
+ return prettifyCss(styles);
156
+ };
157
+
134
158
  /** @public
135
159
  * @return {string}
136
160
  */
@@ -172,57 +196,10 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
172
196
  this.config(options);
173
197
 
174
198
  if(this._onMenuClicked) { // use styles menu icon only when want to use icon menu
175
- if(RowSelectionPlugin._stylePromise) {
176
- RowSelectionPlugin._applyThemeColor(host);
177
- } else {
178
- RowSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
179
- RowSelectionPlugin._stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
180
- }
199
+ this.applyStaticStyles(RowSelectionPlugin._styleCalculator);
181
200
  }
182
-
183
201
  };
184
202
 
185
- /** @private
186
- */
187
- RowSelectionPlugin.prototype._onThemeLoaded = function() {
188
- if(!RowSelectionPlugin._styles) {
189
- var styles = [
190
- ".row-selection-menu", [
191
- "position: absolute;",
192
- "background-color: var(--grid-column-menu-icon-bgcolor);",
193
- "color: var(--grid-column-menu-icon-color);",
194
- "z-index: 1;",
195
- "cursor: pointer;",
196
- "text-align: center;",
197
- "width: 16px;",
198
- "height: 16px;",
199
- "padding: 6px;"
200
- ],
201
- ".row-selection-menu:hover", [
202
- "background-color: var(--grid-column-menu-icon-hover-bgcolor);"
203
- ],
204
- ".row-selection-menu-inside", [
205
- "padding: 4px;"
206
- ]
207
- ];
208
- RowSelectionPlugin._styles = prettifyCss(styles);
209
- }
210
- for(var i = this._hosts.length; --i >= 0;) {
211
- RowSelectionPlugin._applyThemeColor(this._hosts[i]);
212
- }
213
- };
214
- /** @private
215
- * @param {Object} grid core grid instance
216
- */
217
- RowSelectionPlugin._applyThemeColor = function(grid) {
218
- if(!grid || grid._rowSelectionStyles) {
219
- return;
220
- }
221
- if(RowSelectionPlugin._styles) {
222
- grid._rowSelectionStyles = true; // Prevent loading the same style twice
223
- injectCss(RowSelectionPlugin._styles, grid.getParent());
224
- }
225
- };
226
203
  /** @public
227
204
  * @param {Object=} host core grid instance
228
205
  */
@@ -1,8 +1,7 @@
1
1
  import { Ext } from "../../tr-grid-util/es6/Ext.js";
2
2
  import { Dom } from "../../tr-grid-util/es6/Dom.js";
3
3
  import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
4
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
5
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
4
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
5
 
7
6
  declare namespace ColumnSelectionPlugin {
8
7
 
@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
2
2
  import Ext from "../../tr-grid-util/es6/Ext.js";
3
3
  import MenuEventAPI from "./MenuEventAPI.js";
4
4
  import PopupMenu from "./PopupMenu.js";
5
- import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
6
- import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
5
+ import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
7
6
  import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
8
7
 
9
8
  declare namespace ContextMenuPlugin {