@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,1405 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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 { 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.
+*/
+
+/** @typedef {(Object|boolean)} ColumnSelectionPlugin~Options
+* @description Extension options available in main grid configuration under `columnSelection` property
+* @property {boolean=} singleSelection=false If enabled, user can have one selection at any moment
+* @property {boolean=} clickToggle=false If enabled, click at the already selected column will deselect it
+* @property {Function=} selectionChanged=null selectionChanged event handler
+* @property {Function=} menuClicked=null Event Handler when user clicks on menu icon.
+* @property {string=} menuPosition="outside" show icon in column grid that have style outside and non-outside
+*/
+
+/** @typedef {Object} ColumnSelectionPlugin~ColumnOptions
+* @description Extension options available in column configuration object
+* @property {boolean=} unselectable=false If enabled, the specified column is not selectable
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {ColumnSelectionPlugin~Options=} options
+*/
+
+var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
+  var t = this;
+  t._onClick = t._onClick.bind(t);
+  t._onMouseDown = t._onMouseDown.bind(t);
+  t._onKeyDown = t._onKeyDown.bind(t);
+  t._onColumnRemoved = t._onColumnRemoved.bind(t);
+  t._onColumnAdded = t._onColumnAdded.bind(t);
+  t._onReselection = t._onReselection.bind(t);
+  t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
+  t._onBeforeBatchOperation = t._onBeforeBatchOperation.bind(t);
+  t._onAfterBatchOperation = t._onAfterBatchOperation.bind(t);
+  t._updateMenuIcon = t._updateMenuIcon.bind(t);
+  t._hosts = [];
+
+  if (options) {
+    t.config({
+      "columnSelection": options
+    });
+  }
+};
+
+Ext.inherits(ColumnSelectionPlugin, GridPlugin);
+/** Core grid object
+* @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._activeGrid = null;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._anchorCol = -1;
+/** @type {boolean}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._singleSelMode = false;
+/** @type {boolean}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._clickToggleMode = false;
+/** @type {(boolean|null)}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._hasSelection = false;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._timerId = 0;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._timerMenuId = 0;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._pendingSelectionOnAdded = -1;
+/** @type {Function}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._pendingSelectionOnRemoved = -1;
+/** @type {Function}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._onMenuClicked = null;
+/** @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._menuButton = null;
+/** @type {string}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._menuPosition = "outside";
+/** @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._cgp = null; // Column grouping extension
+
+/** @type {Array.<string>}
+* @private
+*/
+
+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
+};
+/**
+* @override
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype.hasMultiTableSupport = function () {
+  return true;
+};
+/** @public
+* @param {Object} host Core grid instance
+* @param {Object=} options Grid configuration object
+*/
+
+
+ColumnSelectionPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) {
+    return;
+  }
+
+  this._hosts.push(host);
+
+  host.listen("click", this._onClick);
+  host.listen("mousedown", this._onMouseDown);
+  host.listen("keydown", this._onKeyDown);
+  host.listen("columnRemoved", this._onColumnRemoved);
+  host.listen("columnAdded", this._onColumnAdded);
+  host.listen("columnPositionChanged", this._onColumnPositionChanged);
+  host.listen("beforeBatchOperation", this._onBeforeBatchOperation);
+  host.listen("afterBatchOperation", this._onAfterBatchOperation);
+  this.config(options);
+  this.applyStaticStyles(ColumnSelectionPlugin._styleCalculator);
+};
+/**
+* @protected
+* @ignore
+*/
+
+
+ColumnSelectionPlugin.prototype._afterInit = function () {
+  this._cgp = this._getPlugin("ColumnGroupingPlugin");
+};
+/** @public
+* @param {Object=} host core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  host.unlisten("click", this._onClick);
+  host.unlisten("mousedown", this._onMouseDown);
+  host.unlisten("keydown", this._onKeyDown);
+  host.unlisten("columnRemoved", this._onColumnRemoved);
+  host.unlisten("columnAdded", this._onColumnAdded);
+  host.unlisten("columnPositionChanged", this._onColumnPositionChanged);
+
+  this._hosts.splice(at, 1);
+
+  if (!this._hosts.length) {
+    if (this._timerId) {
+      clearTimeout(this._timerId);
+      this._timerId = 0;
+      this._timerMenuId = 0;
+    }
+  }
+
+  this._dispose();
+};
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+
+
+ColumnSelectionPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  var pluginOptions = options["columnSelection"];
+
+  if (pluginOptions) {
+    if (_typeof(pluginOptions) === "object") {
+      var val = pluginOptions["singleSelection"];
+
+      if (val) {
+        this._singleSelMode = true;
+      }
+
+      val = pluginOptions["clickToggle"];
+
+      if (val) {
+        this._clickToggleMode = true;
+      }
+
+      val = pluginOptions["menuClicked"];
+
+      if (val) {
+        this._onMenuClicked = val;
+      }
+
+      val = pluginOptions["menuPosition"];
+
+      if (val) {
+        this._menuPosition = val;
+      }
+
+      this.addListener(pluginOptions, "selectionChanged");
+    }
+  } else if (pluginOptions != null) {
+    this.disable();
+  }
+
+  var columns = options["columns"];
+
+  if (!Array.isArray(columns)) {
+    return;
+  }
+
+  var len = columns.length;
+
+  for (var c = 0; c < len; ++c) {
+    var column = columns[c];
+
+    var colData = this._newColumnData(c);
+
+    if (column["unselectable"]) {
+      colData["unselectable"] = true;
+    }
+  }
+};
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+
+
+ColumnSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
+  var obj = gridOptions || {};
+  var columns = obj.columns;
+
+  if (!columns) {
+    columns = obj.columns = [];
+  }
+
+  var len = this.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    var column = columns[i];
+
+    if (!column) {
+      column = columns[i] = {};
+    }
+
+    var unselectable = this._getColumnOption(i, 'unselectable', this._hosts[0]);
+
+    if (unselectable) {
+      column.unselectable = unselectable;
+    }
+  }
+
+  var extOptions = obj.columnSelection;
+
+  if (!extOptions) {
+    extOptions = obj.columnSelection = {};
+  }
+
+  extOptions.singleSelection = this._singleSelMode;
+  extOptions.clickToggle = this._clickToggleMode;
+  return obj;
+};
+/** @public
+* @param {boolean=} opt_bool
+*/
+
+
+ColumnSelectionPlugin.prototype.disable = function (opt_bool) {
+  this._disabled = opt_bool !== false;
+};
+/** @public
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype.isEnabled = function () {
+  return !this._disabled;
+};
+/** @public
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype.hasSelectedColumn = function () {
+  if (this._hasSelection != null) {
+    return this._hasSelection;
+  }
+
+  return this.getFirstSelectedColumn() >= 0;
+};
+/** @public
+* @return {!Array.<number>}
+*/
+
+
+ColumnSelectionPlugin.prototype.getSelectedColumns = function () {
+  var cols = [];
+
+  if (this._hasSelection !== false) {
+    var colCount = this.getColumnCount();
+
+    for (var i = 0; i < colCount; ++i) {
+      if (this.isSelectedColumn(i)) {
+        this._hasSelection = true;
+        cols.push(i);
+      }
+    }
+  }
+
+  return cols;
+};
+/** @public
+* @return {number}
+*/
+
+
+ColumnSelectionPlugin.prototype.getFirstSelectedColumn = function () {
+  if (this._hasSelection !== false) {
+    var colCount = this.getColumnCount();
+
+    for (var i = 0; i < colCount; ++i) {
+      if (this.isSelectedColumn(i)) {
+        this._hasSelection = true;
+        return i;
+      }
+    }
+  }
+
+  return -1;
+};
+/** @public
+* @return {number}
+*/
+
+
+ColumnSelectionPlugin.prototype.getLastSelectedColumn = function () {
+  if (this._hasSelection !== false) {
+    var colCount = this.getColumnCount();
+
+    for (var i = colCount; --i >= 0;) {
+      if (this.isSelectedColumn(i)) {
+        this._hasSelection = true;
+        return i;
+      }
+    }
+  }
+
+  return -1;
+}; // /** @public
+// * @return {!Array.<string>}
+// */
+// ColumnSelectionPlugin.prototype.getSelectedFields = function() {
+// var cols = this.getSelectedColumns();
+// var len = cols.length;
+// var fields = new Array(len);
+// for(var i = 0; i < len; ++i) {
+// fields[i] = this._getField(cols[i]);
+// }
+// return fields;
+// };
+
+/** Select or deselect a column on the active grid
+* @public
+* @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) {
+  var dirty = this._setSelectedColumn(colIndex, opt_select, opt_grid);
+
+  if (dirty) {
+    this._updateGroupSelection();
+  }
+
+  return dirty;
+};
+/** Select the specified column on an active grid, and clear all other column selections
+* @public
+* @param {(number|null)=} opt_colIndex
+* @param {Object=} opt_grid core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.selectSingleColumn = function (opt_colIndex, opt_grid) {
+  if (opt_colIndex == null) {
+    // null or undefined
+    opt_colIndex = this._anchorCol;
+  }
+
+  if (!(opt_colIndex >= 0)) {
+    opt_colIndex = 0;
+  }
+
+  var activeGrid = opt_grid || this._activeGrid;
+  this.clearAllSelections();
+
+  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
+* @param {number} anchorIndex
+* @param {number} len If 1, two column will be selected (anchor and the one next to it). Negative len will select column to the left. 0 only anchor column is selected.
+* @param {Object=} opt_grid core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.selectRange = function (anchorIndex, len, opt_grid) {
+  this._anchorCol = !(anchorIndex >= 0) ? 0 : anchorIndex;
+
+  this._selectFromAnchorToTarget(this._anchorCol + len);
+};
+/** Select all column in a single grid
+* @public
+*/
+
+
+ColumnSelectionPlugin.prototype.selectAllColumns = function () {
+  this.selectRange(0, this.getColumnCount());
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnPositionChanged = function (e) {
+  if (this._timerMenuId) {
+    return;
+  }
+
+  if (e.sender && e.sender === this._activeGrid) {
+    this._clearMenuIcon(); // Clear icon before re-renderer
+
+
+    this._timerMenuId = setTimeout(this._updateMenuIcon, 800);
+  }
+};
+/** @private
+* @return {boolean} return true if icon added
+*/
+
+
+ColumnSelectionPlugin.prototype._updateMenuIcon = function () {
+  this._timerMenuId = 0;
+
+  if (!this._onMenuClicked) {
+    // When not set to onMenuClicked, the icon is not displayed
+    return false;
+  }
+
+  var startColIndex = this.getFirstSelectedColumn();
+  var host = this._activeGrid;
+
+  if (startColIndex < 0 || !host) {
+    this._clearMenuIcon();
+
+    return false;
+  }
+
+  var parentEl = host.getParent().parentNode;
+  var endColIndex = this.getLastSelectedColumn();
+  var rectPos = host.getColumnRect(startColIndex, endColIndex);
+
+  if (rectPos.width <= 0 || rectPos.left > rectPos.gridWidth) {
+    // hide icon when selection left or right not show.
+    this._clearMenuIcon();
+
+    return false;
+  }
+
+  if (!this._menuButton) {
+    this._menuButton = document.createElement("div");
+
+    this._menuButton.classList.add("column-selection-menu");
+
+    if (this._menuPosition !== "outside") {
+      this._menuButton.classList.add("column-selection-menu-inside"); // currently not support runtime change
+
+    }
+
+    var coralItem = document.createElement("ef-icon");
+    coralItem.icon = "most-detail";
+
+    this._menuButton.appendChild(coralItem);
+
+    this._menuButton.addEventListener("click", this._onMenuClicked);
+  }
+
+  parentEl.appendChild(this._menuButton);
+  var c;
+  var iconSize = 28; // calculate actual view when have pinned right
+
+  var pinnedLeftCount = rectPos.leftPinnedIndex;
+  var pinnedLeftSize = 0;
+
+  for (c = 0; c <= pinnedLeftCount; c++) {
+    // include index 0 from leftPinnedIndex
+    pinnedLeftSize = pinnedLeftSize + host.getColumnWidth(c);
+  }
+
+  var rightPx = rectPos.left + rectPos.width;
+  var leftOffset = rightPx;
+  var topOffset = rectPos.top;
+
+  if (this._menuPosition !== "outside") {
+    iconSize = 24; // edit size icon and re-calculate
+
+    this._menuButton.classList.add("column-selection-menu-inside");
+
+    var actualView = rightPx + iconSize;
+    var endRightPosition = rectPos.scrollViewSize + pinnedLeftSize; // rectPos.scrollViewSize doesn't including pinned left size
+
+    if (actualView >= endRightPosition) {
+      // case swap top right to left side column, when can't add menu in right side (overflow right)
+      leftOffset = rectPos.left - iconSize;
+
+      if (leftOffset < 0) {
+        // only case select all row in inside mode
+        leftOffset = rectPos.gridWidth - iconSize;
+      }
+    }
+  } else {
+    // TODO : support in another mode currently have "outside" and "inside"
+    if (rightPx >= rectPos.gridWidth) {
+      leftOffset = rectPos.gridWidth; // Menu move to the right size if inside mode when overflow grid
+    }
+  }
+
+  this._menuButton.style.left = leftOffset + "px"; // Menu icon position in top right
+
+  this._menuButton.style.top = topOffset + "px";
+  return true;
+};
+/** @private */
+
+
+ColumnSelectionPlugin.prototype._clearMenuIcon = function () {
+  if (this._menuButton && this._menuButton.parentNode) {
+    this._menuButton.parentNode.removeChild(this._menuButton);
+  }
+};
+/** @public */
+
+
+ColumnSelectionPlugin.prototype.clearAllSelections = function () {
+  var tableCount = this._hosts.length;
+
+  if (this.hasSelectedColumn()) {
+    for (var c = this.getColumnCount(); --c >= 0;) {
+      if (this.isSelectedColumn(c)) {
+        for (var i = 0; i < tableCount; ++i) {
+          this._hosts[i].selectColumn(c, false);
+        }
+      }
+    }
+
+    this._hasSelection = false;
+    this._activeGrid = this._hosts[0] || null; // Maintain selectability even if there is no selection
+
+    this._clearMenuIcon();
+  }
+
+  this._updateGroupSelection();
+};
+/** Alias to clearAllSelections() method
+* @public
+* @function
+* @see {@link ColumnSelectionPlugin#clearAllSelections}
+*/
+
+
+ColumnSelectionPlugin.prototype.clearSelectedColumns = ColumnSelectionPlugin.prototype.clearAllSelections;
+/** @public
+* @param {(number|Array.<number>)=} cols
+*/
+
+ColumnSelectionPlugin.prototype.clearSelection = function (cols) {
+  if (cols) {
+    if (Array.isArray(cols)) {
+      for (var i = cols.length; --i >= 0;) {
+        this.setSelectedColumn(cols[i], false);
+      }
+    } else if (typeof cols === "number") {
+      this.setSelectedColumn(cols, false);
+    }
+  } else {
+    this.clearAllSelections();
+  }
+};
+/** Alias of {@link ColumnSelectionPlugin#selectAllColumns}
+* @public
+* @function
+*/
+
+
+ColumnSelectionPlugin.prototype.selectAll = ColumnSelectionPlugin.prototype.selectAllColumns;
+/** Alias of {@link ColumnSelectionPlugin#clearSelection}
+* @public
+* @function
+*/
+
+ColumnSelectionPlugin.prototype.deselectAll = ColumnSelectionPlugin.prototype.clearSelection;
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+
+ColumnSelectionPlugin.prototype.isSelectedColumn = function (colIndex) {
+  if (this._activeGrid) {
+    return this._activeGrid.isSelectedColumn(colIndex);
+  }
+
+  return false;
+};
+/** @public
+* @return {Object} core grid object
+*/
+
+
+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;
+};
+/** Update group selection according to current selected columns
+* @private
+*/
+
+
+ColumnSelectionPlugin.prototype._updateGroupSelection = function () {
+  if (this._cgp && this._cgp.selectGroupHeaders) {
+    this._cgp.selectGroupHeaders(this.getSelectedColumns());
+  }
+};
+/** 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.
+* @private
+* @param {MouseEvent} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onClick = function (e) {
+  if (this._disabled) {
+    return;
+  }
+
+  var host = this.getRelativeGrid(e);
+
+  if (!host) {
+    return;
+  }
+
+  var cgp = this._cgp;
+  var info = cgp ? cgp.getCellInfo(e) : host.getRelativePosition(e);
+
+  if (!info["hit"] || info["sectionType"] !== "title") {
+    return;
+  }
+
+  var cIndex = info["colIndex"];
+  var prevSel = this.isSelectedColumn(cIndex);
+
+  if (e.button === 2) {
+    // Right button
+    if (e.type === "click") {
+      // Do nothing on right click
+      return;
+    } // To allow right clicking at the content for context menu and multi column selection
+
+
+    if (prevSel) {
+      return;
+    }
+  }
+
+  var isNewGridClicked = !this._activeGrid || this._activeGrid !== host;
+  var groupId = info["groupId"];
+  var childIndices, childCount;
+
+  if (groupId) {
+    childIndices = cgp.getChildColumnIndices(groupId);
+    childCount = childIndices.length;
+  }
+
+  if (isNewGridClicked) {
+    this.clearAllSelections();
+    this._activeGrid = host;
+    this._anchorCol = -1;
+  }
+
+  if (e.ctrlKey || e.metaKey) {
+    if (!groupId && (!this._singleSelMode || prevSel)) {
+      this.setSelectedColumn(cIndex, !prevSel);
+      this._anchorCol = prevSel ? cIndex : this.getFirstSelectedColumn();
+    } else {
+      var newState = !this._isSelectedColumns(childIndices);
+
+      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 {
+      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);
+    }
+  }
+
+  if (this._anchorCol < 0) {
+    this._hasSelection = false;
+    this._activeGrid = this._hosts[0] || null; // Maintain selectability even if there is no selection
+  } else {
+    if (this._activeGrid && !prevSel) {
+      this._activeGrid.focus();
+    }
+  }
+
+  this._dispatchSelectionChanged(e, cIndex);
+};
+/** @private
+* @param {MouseEvent} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onMouseDown = function (e) {
+  if (e.button === 2) {
+    // Right button
+    if (e.shiftKey || e.ctrlKey) {
+      return;
+    }
+
+    this._onClick(e);
+  }
+};
+/** @private
+* @param {KeyboardEvent} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onKeyDown = function (e) {
+  if (!this._activeGrid || !this.hasSelectedColumn()) {
+    return;
+  }
+
+  switch (e.keyCode) {
+    case 9:
+      // Tab
+      if (this._selectByTab(e)) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+
+    case 37:
+      //Left arrow
+      if (this._selectByKey(-1, e)) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+
+    case 39:
+      //Right arrow
+      if (this._selectByKey(1, e)) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+
+    case 40:
+      //Down arrow
+      //window.setTimeout(this._gotoContent, 10); // RowSelection also listen to the keydown, and thus we have to use timer
+      if (this._gotoContent()) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnRemoved = function (e) {
+  var colIndex = e.colIndex;
+
+  if (this._timerId) {
+    if (this._pendingSelectionOnAdded > 0 && colIndex < this._pendingSelectionOnAdded) {
+      this._pendingSelectionOnAdded = this._pendingSelectionOnAdded - 1;
+    }
+
+    return;
+  } // Since column and its selection state has been removed, we have to keep track of the first selection across multiple calls
+
+
+  if (this._hasSelection) {
+    var firstSel = this.getFirstSelectedColumn();
+
+    if (firstSel < 0) {
+      // The last selection has been removed
+      this._hasSelection = false;
+
+      if (this._pendingSelectionOnRemoved < 0) {
+        if (colIndex >= this.getColumnCount()) {
+          colIndex = this.getColumnCount() - 1;
+        }
+
+        this._pendingSelectionOnRemoved = colIndex;
+      }
+
+      this._timerId = setTimeout(this._onReselection, 10);
+    } else {
+      this._pendingSelectionOnRemoved = firstSel;
+    }
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnAdded = function (e) {
+  if (this._timerId) {
+    this._pendingSelectionOnAdded = e.colIndex;
+    return;
+  }
+
+  if (this._hasSelection) {
+    this.clearAllSelections();
+
+    if (this._pendingSelectionOnAdded < 0) {
+      this._pendingSelectionOnAdded = e.colIndex;
+    }
+
+    this._timerId = setTimeout(this._onReselection, 10);
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onReselection = function (e) {
+  this._timerId = 0;
+  var pendingSelection = this._pendingSelectionOnAdded > -1 ? this._pendingSelectionOnAdded : this._pendingSelectionOnRemoved;
+  this.setSelectedColumn(pendingSelection, true);
+  this._pendingSelectionOnAdded = -1;
+  this._pendingSelectionOnRemoved = -1;
+
+  if (!this._activeGrid) {
+    this._activeGrid = this._hosts[0];
+  }
+
+  this._activeGrid.focus();
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onBeforeBatchOperation = function (e) {
+  var host = this._activeGrid;
+
+  if (this._hasSelection && e["batchType"] === "reset") {
+    var colCount = this.getColumnCount();
+
+    for (var i = 0; i < colCount; ++i) {
+      if (this.isSelectedColumn(i)) {
+        var colId = host.getColumnId(i);
+        var field = host.getColumnField(i);
+
+        if (colId) {
+          this._prevSelectedCols[colId] = field;
+        } else {
+          this._prevSelectedCols[field] = "";
+        }
+      }
+    }
+
+    this.clearAllSelections(); //clear all to improve performance during add/remove operation
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onAfterBatchOperation = function (e) {
+  if (e["batchType"] === "reset") {
+    var prevSelectedCols = Object.keys(this._prevSelectedCols);
+    var prevSelectedCount = prevSelectedCols.length;
+
+    if (prevSelectedCount) {
+      this.clearAllSelections();
+
+      for (var i = 0; i < prevSelectedCount; i++) {
+        var colId = prevSelectedCols[i];
+        var field = this._prevSelectedCols[colId];
+        var prevSelectedIndex = this.getColumnIndex(colId);
+
+        if (prevSelectedIndex < 0) {
+          prevSelectedIndex = this.getColumnIndex(field);
+        }
+
+        this.setSelectedColumn(prevSelectedIndex, true);
+      }
+
+      this._prevSelectedCols = {};
+    }
+  }
+};
+/** @private
+* @param {KeyboardEvent} e
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._selectByTab = function (e) {
+  var direction = e.shiftKey ? -1 : 1;
+  var next = direction < 0 ? this.getFirstSelectedColumn() : this.getLastSelectedColumn();
+
+  if (next < 0) {
+    return false; // No selected column
+  }
+
+  Dom.preventDefault(e);
+  next += direction;
+  var colCount = this.getColumnCount();
+
+  if (next < 0) {
+    if (this._gotoPrevGrid()) {
+      return true;
+    }
+
+    next = 0;
+  } else if (next >= colCount) {
+    if (this._gotoNextGrid()) {
+      return true;
+    }
+
+    next = colCount - 1;
+  }
+
+  this.selectSingleColumn(next);
+
+  this._activeGrid.scrollToColumn(next);
+
+  return true;
+};
+/** @private
+* @param {number} direction
+* @param {KeyboardEvent} e
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._selectByKey = function (direction, e) {
+  var curSel = direction < 0 ? this.getFirstSelectedColumn() : this.getLastSelectedColumn();
+
+  if (curSel < 0) {
+    return false; // No selected column
+  }
+
+  var colCount = this.getColumnCount();
+
+  var next = this._getNextSelection(curSel, direction);
+
+  if (next < 0) {
+    if (!e.shiftKey && this._gotoPrevGrid()) {
+      Dom.preventDefault(e);
+      return true;
+    }
+
+    next = 0;
+  } else if (next >= colCount) {
+    if (!e.shiftKey && this._gotoNextGrid()) {
+      Dom.preventDefault(e);
+      return true;
+    }
+
+    next = colCount - 1;
+  }
+
+  if (!this._activeGrid.isColumnVisible(next)) {
+    return false; // No further visible column can be selected
+  }
+
+  Dom.preventDefault(e);
+
+  if (e.shiftKey && !this._singleSelMode) {
+    this._selectFromAnchorToTarget(next);
+  } else {
+    this.selectSingleColumn(next);
+  }
+
+  this._activeGrid.scrollToColumn(next);
+
+  return true;
+};
+/** @private
+* @param {number} curSel
+* @param {number} direction Must not be zero
+* @return {number} next selection
+*/
+
+
+ColumnSelectionPlugin.prototype._getNextSelection = function (curSel, direction) {
+  var next = curSel + direction;
+  var colCount = this.getColumnCount(); // isColumnVisible() with negative index or invalid index gives true as a result.
+
+  while (!this._activeGrid.isColumnVisible(next)) {
+    // Skip invisible columns
+    if (next < 0 || next >= colCount) {
+      break; // no further visible selection
+    }
+
+    next += direction;
+  }
+
+  return next;
+};
+/** @private
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._gotoPrevGrid = function () {
+  if (this._activeGrid === this._hosts[0]) {
+    // This the first grid, so go to the content
+    return this._gotoContent();
+  } else {
+    var curIndex = this._hosts.indexOf(this._activeGrid);
+
+    if (curIndex > 0) {
+      this.selectSingleColumn(this._getNextSelection(this.getColumnCount(), -1), this._hosts[curIndex - 1]); // go to the next grid at the first column
+
+      return true;
+    }
+  }
+
+  return false;
+};
+/** @private
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._gotoNextGrid = function () {
+  var lastIndex = this._hosts.length - 1;
+
+  if (this._activeGrid === this._hosts[lastIndex]) {
+    // This the last grid, so go to the content
+    return this._gotoContent();
+  } else {
+    var curIndex = this._hosts.indexOf(this._activeGrid);
+
+    if (curIndex >= 0) {
+      this.selectSingleColumn(this._getNextSelection(-1, 1), this._hosts[curIndex + 1]); // go to the next grid at the first column
+
+      return true;
+    }
+  }
+
+  return false;
+};
+/** @private
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._gotoContent = function () {
+  if (this._activeGrid) {
+    var rsp = this._getPlugin("RowSelectionPlugin");
+
+    if (rsp) {
+      setTimeout(function (p, s, g) {
+        p["selectSingleRow"](0, s, g);
+      }.bind(null, rsp, this._activeGrid.getSectionSettings("content"), this._activeGrid), 10); // Since Row Selection plugin is also listening to key down, we have to avoid double executions
+
+      this.clearAllSelections();
+      return true;
+    }
+  }
+
+  return false;
+};
+/** @private
+* @param {number} targetIndex
+*/
+
+
+ColumnSelectionPlugin.prototype._selectFromAnchorToTarget = function (targetIndex) {
+  if (this._anchorCol < 0) {
+    this.selectSingleColumn(targetIndex);
+    return;
+  }
+
+  var i;
+  var grid = this._activeGrid;
+  this.clearAllSelections();
+
+  if (targetIndex <= this._anchorCol) {
+    for (i = targetIndex; i <= this._anchorCol; ++i) {
+      this._setSelectedColumn(i, true, grid);
+    }
+  } else {
+    for (i = this._anchorCol; i <= targetIndex; ++i) {
+      this._setSelectedColumn(i, true, grid);
+    }
+  }
+
+  this._updateGroupSelection();
+};
+/** @private
+* @param {Event} e
+* @param {number=} colIndex
+*/
+
+
+ColumnSelectionPlugin.prototype._dispatchSelectionChanged = function (e, colIndex) {
+  if (this._activeGrid) {
+    var rsp = this._getPlugin("RowSelectionPlugin");
+
+    if (rsp) {
+      rsp["clearSelectedRows"]();
+    }
+
+    var cep = this._getPlugin("CellEditingPlugin");
+
+    if (cep) {
+      cep["closeCellEditor"]();
+    }
+
+    cep = this._getPlugin("InCellEditingPlugin");
+
+    if (cep) {
+      cep["closeCellEditor"]();
+    }
+  }
+
+  this._dispatch("selectionChanged", {
+    "selectedCols": this.getSelectedColumns(),
+    "colIndex": colIndex,
+    "grid": this._activeGrid,
+    "event": e
+  });
+};
+/** @public
+*/
+
+
+ColumnSelectionPlugin.prototype.dispatchSelectionChanged = function () {
+  var selectedCols = this.getSelectedColumns();
+  var colIndex = selectedCols.length ? selectedCols[0] : -1;
+
+  this._dispatch("selectionChanged", {
+    "selectedCols": selectedCols,
+    "colIndex": colIndex,
+    "grid": this._activeGrid
+  });
+};
+/** @public
+* @description Select a specified column by a simulated mouse click input. This is for testing purpose.
+* @ignore
+* @param {number} colIndex
+* @param {Object=} mouseEvt
+*/
+
+
+ColumnSelectionPlugin.prototype.selectByMouse = function (colIndex, mouseEvt) {
+  if (!mouseEvt) {
+    mouseEvt = {};
+  }
+
+  mouseEvt.sectionType = "title";
+
+  var eventObj = this._mockMouseEvent(colIndex, 0, mouseEvt);
+
+  this._onClick(eventObj);
+};
+/** @public
+* @description Select a specified column by a keyboard input. This is for testing purpose.
+* @ignore
+* @param {number|string} keyCode Use key code number or "left" ,"right" or "tab" string
+* @param {Object=} keyboardEvt
+*/
+
+
+ColumnSelectionPlugin.prototype.selectByKey = function (keyCode, keyboardEvt) {
+  var eventObj = this._mockKeyboardEvent(keyCode, keyboardEvt);
+
+  this._onKeyDown(eventObj);
+};
+
+export default ColumnSelectionPlugin;
+export { ColumnSelectionPlugin, ColumnSelectionPlugin as ColumnSelection, ColumnSelectionPlugin as ColumnSelectionExtension };