@refinitiv-ui/efx-grid 6.0.24 → 6.0.26

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

@@ -7,22 +7,22 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 declare namespace ColumnSelectionPlugin {
 
     type Options = {
-        singleSelection?: boolean,
-        clickToggle?: boolean,
-        selectionChanged?: ((...params: any[]) => any),
-        menuClicked?: ((...params: any[]) => any),
-        menuPosition?: string
+        singleSelection?: boolean|null,
+        clickToggle?: boolean|null,
+        selectionChanged?: ((...params: any[]) => any)|null,
+        menuClicked?: ((...params: any[]) => any)|null,
+        menuPosition?: string|null
     };
 
     type ColumnOptions = {
-        unselectable?: boolean
+        unselectable?: boolean|null
     };
 
 }
 
 declare class ColumnSelectionPlugin extends GridPlugin {
 
-    constructor(options?: ColumnSelectionPlugin.Options);
+    constructor(options?: ColumnSelectionPlugin.Options|null);
 
     public getName(): string;
 
@@ -34,7 +34,7 @@ declare class ColumnSelectionPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public disable(opt_bool?: boolean): void;
+    public disable(opt_bool?: boolean|null): void;
 
     public isEnabled(): boolean;
 
@@ -46,9 +46,11 @@ declare class ColumnSelectionPlugin extends GridPlugin {
 
     public getLastSelectedColumn(): number;
 
-    public setSelectedColumn(colIndex: number, opt_select?: boolean, opt_grid?: any): boolean;
+    public setSelectedColumn(colIndex: number, opt_select?: boolean|null, opt_grid?: any): boolean;
 
-    public selectSingleColumn(opt_colIndex?: (number|null), opt_grid?: any): void;
+    public selectSingleColumn(opt_colIndex?: (number|null)|null, opt_grid?: any): void;
+
+    public selectSingleGroup(groupId: string, opt_grid?: any): void;
 
     public selectRange(anchorIndex: number, len: number, opt_grid?: any): void;
 
@@ -58,7 +60,7 @@ declare class ColumnSelectionPlugin extends GridPlugin {
 
     public clearSelectedColumns(): void;
 
-    public clearSelection(cols?: (number|(number)[])): void;
+    public clearSelection(cols?: (number|(number)[])|null): void;
 
     public selectAll(): void;
 

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

@@ -115,6 +115,12 @@ ColumnSelectionPlugin.prototype._menuButton = null;
 */
 
 ColumnSelectionPlugin.prototype._menuPosition = "outside";
+/** @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._cgp = null; // Column grouping extension
+
 /** @public
 * @return {string}
 */
@@ -152,15 +158,12 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
   host.listen("columnPositionChanged", this._onColumnPositionChanged);
   this.config(options);
 
-  if (this._onMenuClicked) {
-    // use styles menu icon only when want to use icon menu
-    if (ColumnSelectionPlugin._stylePromise) {
-      ColumnSelectionPlugin._applyThemeColor(host);
-    } else {
-      ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
+  if (ColumnSelectionPlugin._stylePromise) {
+    ColumnSelectionPlugin._applyThemeColor(host);
+  } else {
+    ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
 
-      ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
-    }
+    ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
   }
 };
 /** @private
@@ -170,7 +173,7 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
 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);
   }
 
@@ -194,6 +197,15 @@ ColumnSelectionPlugin._applyThemeColor = function (grid) {
     injectCss(ColumnSelectionPlugin._styles, grid.getParent());
   }
 };
+/**
+* @protected
+* @ignore
+*/
+
+
+ColumnSelectionPlugin.prototype._afterInit = function () {
+  this._cgp = this._getPlugin("ColumnGroupingPlugin");
+};
 /** @public
 * @param {Object=} host core grid object
 */
@@ -436,48 +448,13 @@ ColumnSelectionPlugin.prototype.getLastSelectedColumn = function () {
 
 
 ColumnSelectionPlugin.prototype.setSelectedColumn = function (colIndex, opt_select, opt_grid) {
-  if (!(colIndex >= 0)) {
-    return false;
-  }
-
-  if (opt_grid) {
-    if (opt_grid !== this._activeGrid) {
-      this._activeGrid = opt_grid; // TODO: Check if the grid is one of the hosts
-    }
-  }
-
-  if (!this._activeGrid) {
-    this._activeGrid = this._hosts[0]; // Select the first grid
-
-    if (!this._activeGrid) {
-      return false;
-    }
-  }
-
-  if (colIndex >= this.getColumnCount()) {
-    return false;
-  }
-
-  var selection = opt_select ? true : false;
-
-  if (selection && this._getColumnOption(colIndex, "unselectable")) {
-    return false;
-  }
-
-  this._hasSelection = selection ? true : null;
-  this._pendingSelectionOnAdded = -1; // New selection happens before resolving the pending selection
+  var dirty = this._setSelectedColumn(colIndex, opt_select, opt_grid);
 
-  this._pendingSelectionOnRemoved = -1; // New selection happens before resolving the pending selection
-
-  var len = this._hosts.length;
-
-  for (var i = 0; i < len; ++i) {
-    this._hosts[i].selectColumn(colIndex, selection);
+  if (dirty) {
+    this._updateGroupSelection();
   }
 
-  this._updateMenuIcon();
-
-  return true;
+  return dirty;
 };
 /** Select the specified column on an active grid, and clear all other column selections
 * @public
@@ -499,9 +476,42 @@ ColumnSelectionPlugin.prototype.selectSingleColumn = function (opt_colIndex, opt
   var activeGrid = opt_grid || this._activeGrid;
   this.clearAllSelections();
 
-  if (this.setSelectedColumn(opt_colIndex, true, activeGrid)) {
+  if (this._setSelectedColumn(opt_colIndex, true, activeGrid)) {
     this._anchorCol = opt_colIndex; // Update the anchor
   }
+
+  this._updateGroupSelection();
+};
+/**
+* Select the columns in a group on an active grid, and clear all other column selections
+* This does not working with single selection mode
+* @public
+* @param {string} groupId
+* @param {Object=} opt_grid core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.selectSingleGroup = function (groupId, opt_grid) {
+  var activeGrid = opt_grid || this._activeGrid;
+  var cgp = this._cgp;
+
+  if (!cgp || !groupId) {
+    return;
+  }
+
+  var childIndices = cgp.getChildColumnIndices(groupId);
+  var dirty = false;
+  this.clearAllSelections();
+
+  for (var i = 0; i <= childIndices.length; i++) {
+    dirty |= this._setSelectedColumn(childIndices[i], true, activeGrid);
+  }
+
+  if (dirty) {
+    this._anchorCol = childIndices[0];
+  }
+
+  this._updateGroupSelection();
 };
 /** Select from the anchorIndex to the target by length
 * @public
@@ -724,6 +734,116 @@ ColumnSelectionPlugin.prototype.isSelectedColumn = function (colIndex) {
 ColumnSelectionPlugin.prototype.getActiveGrid = function () {
   return this._activeGrid;
 };
+/** Select or deselect a column on the active grid
+* @private
+* @param {number} colIndex
+* @param {boolean=} opt_select=false Null or undefined value will be treated as false value
+* @param {Object=} opt_grid core grid object
+* @return {boolean} Return true for successful selection, otherwise false
+*/
+
+
+ColumnSelectionPlugin.prototype._setSelectedColumn = function (colIndex, opt_select, opt_grid) {
+  if (!(colIndex >= 0)) {
+    return false;
+  }
+
+  if (opt_grid) {
+    if (opt_grid !== this._activeGrid) {
+      this._activeGrid = opt_grid; // TODO: Check if the grid is one of the hosts
+    }
+  }
+
+  if (!this._activeGrid) {
+    this._activeGrid = this._hosts[0]; // Select the first grid
+
+    if (!this._activeGrid) {
+      return false;
+    }
+  }
+
+  if (colIndex >= this.getColumnCount()) {
+    return false;
+  }
+
+  var selection = opt_select ? true : false;
+
+  if (selection && this._getColumnOption(colIndex, "unselectable")) {
+    return false;
+  }
+
+  this._hasSelection = selection ? true : null;
+  this._pendingSelectionOnAdded = -1; // New selection happens before resolving the pending selection
+
+  this._pendingSelectionOnRemoved = -1; // New selection happens before resolving the pending selection
+
+  var len = this._hosts.length;
+
+  for (var i = 0; i < len; ++i) {
+    this._hosts[i].selectColumn(colIndex, selection);
+  }
+
+  this._updateMenuIcon();
+
+  return true;
+};
+/**
+* @private
+* @param {Array<number>} colIndices
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._isSelectedColumns = function (colIndices) {
+  var isAllSelected = false;
+  var count = colIndices.length;
+
+  if (this._activeGrid) {
+    for (var i = 0; i < count; i++) {
+      var colIndex = colIndices[i];
+      isAllSelected = this._activeGrid.isSelectedColumn(colIndex);
+
+      if (!isAllSelected) {
+        break;
+      }
+    }
+  }
+
+  return isAllSelected;
+};
+/**
+* @private
+* @param {Array<number>} colIndices
+*/
+
+
+ColumnSelectionPlugin.prototype._updateGroupSelection = function () {
+  var cgp = this._cgp;
+  var grid = this._activeGrid;
+
+  if (!cgp || !grid) {
+    return;
+  }
+
+  var section = grid.getSection("title");
+  var groupDefs = cgp.getGroupDefinitions();
+  var count = groupDefs.length;
+
+  for (var i = 0; i < count; i++) {
+    var groupDef = groupDefs[i];
+    var groupId = groupDef["id"];
+    var childIndices = cgp.getChildColumnIndices(groupId);
+    var rowIndex = cgp.getGroupLevel(groupId);
+    var colIndex = childIndices[0];
+    var cell = section.getCell(colIndex, rowIndex);
+
+    if (this._isSelectedColumns(childIndices)) {
+      cell.addClass("selected-group");
+    } else {
+      cell.removeClass("selected-group");
+    }
+  }
+};
 /** Left click on title causes selection change. <br>
 * Ctrl/Shift left click on title causes multi selection. <br>
 * Left click anywhere, not title, causes deselection.
@@ -743,7 +863,8 @@ ColumnSelectionPlugin.prototype._onClick = function (e) {
     return;
   }
 
-  var info = host.getRelativePosition(e);
+  var cgp = this._cgp;
+  var info = cgp ? cgp.getCellInfo(e) : host.getRelativePosition(e);
 
   if (!info["hit"] || info["sectionType"] !== "title") {
     return;
@@ -763,43 +884,72 @@ ColumnSelectionPlugin.prototype._onClick = function (e) {
   }
 
   var cIndex = info["colIndex"];
-  var singleSelection = !this._activeGrid || this._activeGrid !== host; // New grid is clicked
+  var isNewGridClicked = !this._activeGrid || this._activeGrid !== host;
+  var groupId = info["groupId"];
+  var childIndices, childCount;
+
+  if (groupId) {
+    childIndices = cgp.getChildColumnIndices(groupId);
+    childCount = childIndices.length;
+  }
 
-  if (singleSelection || this._singleSelMode) {
+  if (isNewGridClicked) {
     this.clearAllSelections();
     this._activeGrid = host;
-    this.setSelectedColumn(cIndex, true);
-    this._anchorCol = cIndex;
-  } else {
-    // The same active grid case
-    if (e.ctrlKey) {
-      var newState = !this.isSelectedColumn(cIndex); // toggle
+    this._anchorCol = -1;
+  }
 
-      this.setSelectedColumn(cIndex, newState);
+  if (e.ctrlKey || e.metaKey) {
+    if (!groupId && (!this._singleSelMode || this.isSelectedColumn(cIndex))) {
+      this.setSelectedColumn(cIndex, !this.isSelectedColumn(cIndex));
+      this._anchorCol = this.isSelectedColumn(cIndex) ? cIndex : this.getFirstSelectedColumn();
+    } else {
+      var newState = !this._isSelectedColumns(childIndices);
 
-      if (newState) {
-        this._anchorCol = cIndex;
-      } else if (this._anchorCol === cIndex) {
-        this._anchorCol = this.getFirstSelectedColumn();
+      for (var i = 0; i < childCount; i++) {
+        this.setSelectedColumn(childIndices[i], newState, host);
       }
+
+      this._anchorCol = newState ? childIndices[0] : this.getFirstSelectedColumn();
+    }
+  } else if (e.shiftKey && !this._singleSelMode) {
+    if (groupId) {
+      var firstGroupCol = childIndices[0];
+      var lastGroupCol = childIndices[childCount - 1];
+
+      if (this._anchorCol >= firstGroupCol && this._anchorCol <= lastGroupCol) {
+        this._anchorCol = firstGroupCol;
+        cIndex = lastGroupCol;
+      } else if (this._anchorCol > firstGroupCol) {
+        cIndex = firstGroupCol;
+      } else if (this._anchorCol < lastGroupCol) {
+        cIndex = lastGroupCol;
+      }
+    }
+
+    this._selectFromAnchorToTarget(cIndex);
+  } else if (this._clickToggleMode) {
+    var cols = this.getSelectedColumns();
+
+    if (cols.length === 1 && cols[0] === cIndex) {
+      this.setSelectedColumn(cIndex, false); // toggle
+
+      this._anchorCol = -1;
+    } else if (childIndices && cols.length == childCount && this._isSelectedColumns(childIndices)) {
+      this.clearAllSelections();
+      this._anchorCol = -1;
     } else {
-      if (e.shiftKey) {
-        this._selectFromAnchorToTarget(cIndex);
-      } else {
-        if (this._clickToggleMode) {
-          var cols = this.getSelectedColumns();
-
-          if (cols.length === 1 && cols[0] === cIndex) {
-            this.setSelectedColumn(cIndex, false); // toggle
-
-            this._anchorCol = -1;
-          } else {
-            this.selectSingleColumn(cIndex);
-          }
-        } else {
-          this.selectSingleColumn(cIndex);
-        }
+      groupId ? this.selectSingleGroup(groupId) : this.selectSingleColumn(cIndex);
+    }
+  } else {
+    if (this._singleSelMode) {
+      if (groupId) {
+        return;
       }
+
+      this.selectSingleColumn(cIndex);
+    } else {
+      groupId ? this.selectSingleGroup(groupId) : this.selectSingleColumn(cIndex);
     }
   }
 
@@ -1139,13 +1289,15 @@ ColumnSelectionPlugin.prototype._selectFromAnchorToTarget = function (targetInde
 
   if (targetIndex <= this._anchorCol) {
     for (i = targetIndex; i <= this._anchorCol; ++i) {
-      this.setSelectedColumn(i, true, grid);
+      this._setSelectedColumn(i, true, grid);
     }
   } else {
     for (i = this._anchorCol; i <= targetIndex; ++i) {
-      this.setSelectedColumn(i, true, grid);
+      this._setSelectedColumn(i, true, grid);
     }
   }
+
+  this._updateGroupSelection();
 };
 /** @private
 * @param {Event} e

package/lib/tr-grid-column-stack/es6/ColumnStack.d.ts

@@ -98,11 +98,11 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public getStackMemberIds(stackId: string): (string)[];
 
-    public getColumnIdsByIndex(columnIndex: number|(number)[]|null): (string)[];
+    public getColumnIdsByIndex(colIndices: number|(number)[]|null): (string)[];
 
-    public getColumnIndicesByColumnIds(columnId: string|(string)[]|null): (string)[];
+    public getColumnIndicesByColumnIds(colIds: string|(string)[]|null): (string)[];
 
-    public getColumnIdsByFields(field: string|(string)[]|null): (string)[];
+    public getColumnIdsByFields(fields: string|(string)[]|null): (string)[];
 
     public addColumnToStack(colRef: number|string|null, stackId: string): void;