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

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

@@ -0,0 +1 @@
+export * from "./RowSelection";

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

@@ -0,0 +1 @@
+export * from "./RowSelection.js";

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

@@ -0,0 +1,64 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {injectCss, prettifyCss} from "../../tr-grid-util/es6/Util.js";
+
+declare namespace RowColoringPlugin {
+
+    type Options = {
+        bgColoring?: boolean|null,
+        textColoring?: boolean|null,
+        bgColorField?: string|null,
+        textColorField?: string|null,
+        cssField?: string|null,
+        cssRangeField?: string|null,
+        altCssField?: string|null,
+        predefinedColors?: any,
+        predefinedColoring?: boolean|null
+    };
+
+}
+
+declare class RowColoringPlugin extends GridPlugin {
+
+    constructor(options?: RowColoringPlugin.Options|null);
+
+    public getName(): string;
+
+    public initialize(host: any, options?: any): void;
+
+    public unload(host: any): void;
+
+    public config(options?: any): void;
+
+    public getConfigObject(gridOptions?: any): any;
+
+    public setRowColor(rowRef: string|number|null, bgColor?: (string|null)|null, txtColor?: (string|null)|null): void;
+
+    public getRowColor(rowRef: string|number|null): string;
+
+    public removeRowColor(rowRef: string|number|null): void;
+
+    public toggleRowColor(rowRef: string|number|null, bgColor?: (string|null)|null, txtColor?: (string|null)|null, state?: boolean|null): boolean;
+
+    public setRowPredefinedColor(rowRef: string|number|null, color?: (string|null)|null, range?: (number)[]|null, altColor?: (string|null)|null): void;
+
+    public getPredefinedColors(): any;
+
+    public setPredefinedColors(predefinedColors: any): void;
+
+    public disableTextColoring(opt_bool?: boolean|null): void;
+
+    public disableBgColoring(opt_bool?: boolean|null): void;
+
+    public disableRowColoring(disabled?: boolean|null): void;
+
+    public static getContrastColor(hexColor: string): string;
+
+    public getContrastColor(hexColor: string): string;
+
+    public forceUpdateRowColor(): void;
+
+}
+
+export default RowColoringPlugin;
+export { RowColoringPlugin, RowColoringPlugin as RowColoring, RowColoringPlugin as RowColoringExtension };

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

@@ -0,0 +1,615 @@
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+/** @typedef {Object} RowColoringPlugin~Options
+* @description The options can be specified by `rowColoring` property of the main grid's options:
+* @property {boolean=} bgColoring=true If disabled, background color will not be applied to the row
+* @property {boolean=} textColoring=true If disabled, text color will not be applied to the row
+* @property {string=} bgColorField="BG_COLOR" Apply background color based on the given field
+* @property {string=} textColorField="TEXT_COLOR" Apply text color based on the given field
+* @property {string=} cssField="CSS_CLASS" Apply CSS class based on the given field
+* @property {string=} cssRangeField="" Apply CSS class only on the given range field, which range will be array 2 element, the first element is start column used colour and the second one is the length of column applied
+* @property {string=} altCssField="" Apply alternative CSS class based on the given field which not in range field
+* @property {Object=} predefinedColors Predefined color object map
+* @property {boolean=} predefinedColoring=false If enabled, predefined colors will be used instead of inline styling. The bgColoring and textColoring will be turned off.
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {RowColoringPlugin~Options=} options
+*/
+var RowColoringPlugin = function RowColoringPlugin(options) {
+  this._onSectionBinding = this._onSectionBinding.bind(this);
+  this._updateRowColor = this._updateRowColor.bind(this);
+  this._hosts = [];
+  if (options) {
+    this.config({
+      "rowColoring": options
+    });
+  }
+};
+Ext.inherits(RowColoringPlugin, GridPlugin);
+
+/** @type {string}
+* @private
+*/
+RowColoringPlugin._controlClass = "predefined-color";
+/** @type {boolean}
+* @private
+*/
+RowColoringPlugin.prototype._disabled = false;
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._bgField = "BG_COLOR";
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._txtColorField = "TEXT_COLOR";
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._cssField = "CSS_CLASS";
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._cssRangeField = "";
+/** @type {string}
+* @private
+*/
+RowColoringPlugin.prototype._altCssField = "";
+/** @type {boolean}
+* @private
+*/
+RowColoringPlugin.prototype._txtEnabled = true;
+/** @type {boolean}
+* @private
+*/
+RowColoringPlugin.prototype._bgEnabled = true;
+/** @type {boolean}
+* @private
+*/
+RowColoringPlugin.prototype._predefinedColoring = false;
+/** @type {Object}
+* @private
+*/
+RowColoringPlugin.prototype._predefinedColors = null;
+/** @type {Object}
+* @private
+*/
+RowColoringPlugin.prototype._styleTag = null;
+/** @type {number}
+* @private
+*/
+RowColoringPlugin.prototype._updateTimer = 0;
+
+/** @public
+* @return {string}
+*/
+RowColoringPlugin.prototype.getName = function () {
+  return "RowColoringPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid instance
+* @param {Object=} options
+*/
+RowColoringPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) {
+    return;
+  }
+  this._hosts.push(host);
+  host.listen("preSectionDataBinding", this._onSectionBinding);
+  this.config(options);
+  this._updateTimer = setTimeout(this._updateRowColor, 100); // For lazy loading
+};
+/** @public
+* @param {Object} host core grid instance
+*/
+RowColoringPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+  if (at < 0) {
+    return;
+  }
+  host.unlisten("preSectionDataBinding", this._onSectionBinding);
+  this._hosts.splice(at, 1);
+  if (!this._hosts.length) {
+    if (this._updateTimer) {
+      clearTimeout(this._updateTimer);
+      this._updateTimer = 0;
+    }
+  }
+  this._dispose();
+};
+/** @public
+* @param {Object=} options
+*/
+RowColoringPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+  var pluginOption = options["rowColoring"];
+  if (pluginOption) {
+    var bool = pluginOption["bgColoring"];
+    if (bool != null) {
+      this._bgEnabled = bool ? true : false;
+    }
+    bool = pluginOption["textColoring"];
+    if (bool != null) {
+      this._txtEnabled = bool ? true : false;
+    }
+    bool = pluginOption["predefinedColoring"];
+    if (bool != null) {
+      this._predefinedColoring = bool ? true : false;
+      if (bool) {
+        this._hosts[0].enableClass("predefined-color");
+      }
+    }
+    if (pluginOption["bgColorField"] || pluginOption["textColorField"] || pluginOption["cssField"]) {
+      var field = pluginOption["bgColorField"];
+      if (field) {
+        this._bgField = field;
+      }
+      field = pluginOption["textColorField"];
+      if (field) {
+        this._txtColorField = field;
+      }
+      field = pluginOption["cssField"];
+      if (field) {
+        this._cssField = field;
+      }
+      field = pluginOption["cssRangeField"];
+      if (field) {
+        this._cssRangeField = field;
+      }
+      field = pluginOption["altCssField"];
+      if (field) {
+        this._altCssField = field;
+      }
+    }
+    if (pluginOption["predefinedColors"]) {
+      this._injectStyles(pluginOption["predefinedColors"]);
+    }
+  }
+};
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowColoringPlugin.prototype.getConfigObject = function (gridOptions) {
+  var obj = gridOptions || {};
+  var extOptions = obj.rowColoring;
+  if (!extOptions) {
+    extOptions = obj.rowColoring = {};
+  }
+  extOptions.bgColoring = this._bgEnabled;
+  extOptions.textColoring = this._txtEnabled;
+  extOptions.predefinedColoring = this._predefinedColoring;
+  if (this._bgField !== "BG_COLOR") {
+    extOptions.bgColorField = this._bgField;
+  }
+  if (this._txtColorField !== "TEXT_COLOR") {
+    extOptions.textColorField = this._txtColorField;
+  }
+  if (this._cssField !== "CSS_CLASS") {
+    extOptions.cssField = this._cssField;
+  }
+  if (this._cssRangeField) {
+    extOptions.cssRangeField = this._cssRangeField;
+  }
+  if (this._altCssField) {
+    extOptions.altCssField = this._altCssField;
+  }
+  if (this._predefinedColors) {
+    extOptions.predefinedColors = this._predefinedColors;
+  }
+  return obj;
+};
+
+/** @public
+* @param {string|number} rowRef Row id in the data table or row index
+* @param {(string|null)=} bgColor
+* @param {(string|null)=} txtColor
+*/
+RowColoringPlugin.prototype.setRowColor = function (rowRef, bgColor, txtColor) {
+  var dv = this._getDataView();
+  if (!dv) {
+    return;
+  }
+  if (typeof rowRef === "string") {
+    rowRef = dv.getRowIndex(rowRef);
+  }
+  if (rowRef == null || rowRef < 0) {
+    return;
+  }
+  var values = {};
+  // TODO: Allow customization of the default colors
+  values[this._bgField] = bgColor || "";
+  values[this._txtColorField] = txtColor || "";
+  this._setRowData(dv, rowRef, values);
+};
+/** @public
+* @param {string|number} rowRef Row id in the data table or row index
+* @return {string} bgColor
+*/
+RowColoringPlugin.prototype.getRowColor = function (rowRef) {
+  var dv = this._getDataView();
+  if (!dv) {
+    return "";
+  }
+  if (typeof rowRef === "string") {
+    rowRef = dv.getRowIndex(rowRef);
+  }
+  if (rowRef == null || rowRef < 0) {
+    return "";
+  }
+  return this._getData(dv, rowRef, this._bgField) || "";
+};
+/** @public
+* @param {string|number} rowRef Row id in the data table or row index
+*/
+RowColoringPlugin.prototype.removeRowColor = function (rowRef) {
+  this.setRowColor(rowRef, "", "");
+};
+/** @public
+* @param {string|number} rowRef Row id in the data table or row index
+* @param {(string|null)=} bgColor
+* @param {(string|null)=} txtColor
+* @param {boolean=} state Specify this flag to force the color state
+* @return {boolean} Return current color state (after execution)
+*/
+RowColoringPlugin.prototype.toggleRowColor = function (rowRef, bgColor, txtColor, state) {
+  if (state == null) {
+    state = this.getRowColor(rowRef) ? true : false;
+  }
+  if (state) {
+    this.removeRowColor(rowRef);
+  } else {
+    this.setRowColor(rowRef, bgColor, txtColor);
+  }
+  return !state;
+};
+/** @public
+* @description Set predefined color into row reference
+* @param {string|number} rowRef Row id in the data table or row index
+* @param {(string|null)=} color Predefined color being applied to row
+* @param {Array<number>=} range Range of column applied colour which array 2 element, the first element is start column used colour and the second one is the length of column applied, it doesn't provide a range, the columns will apply the colour all columns in row reference
+* @param {(string|null)=} altColor Alternative predefined color being applied to row if the column doesn't in the rage
+* @example
+* rowColoringExt.setRowPredefinedColor(2, "c-red") // set predefined color into row index 2 all row.
+* rowColoringExt.setRowPredefinedColor(2, "c-red", [2, 5]) // set predefined color into row index 2 and applied since column 2 and next 5 columns
+* rowColoringExt.setRowPredefinedColor(2, "c-red", [2]) // if pass only 1 element into rage parameter, the row will be applied since 2 to last column
+* rowColoringExt.setRowPredefinedColor(2, "c-red", [2, 5], "c-yellow") // set predefined color into row index 2 and applied since column 2 and next 5 columns and another column will be set color c-yellow
+*/
+RowColoringPlugin.prototype.setRowPredefinedColor = function (rowRef, color, range, altColor) {
+  var dv = this._getDataView();
+  if (!dv) {
+    return;
+  }
+  if (typeof rowRef === "string") {
+    rowRef = dv.getRowIndex(rowRef);
+  }
+  if (rowRef == null || rowRef < 0) {
+    return;
+  }
+  this._setStaticData(dv, rowRef, this._cssField, color || "");
+  // eslint-disable-next-line no-undefined
+  if (this._cssRangeField && range !== undefined) {
+    this._setStaticData(dv, rowRef, this._cssRangeField, range);
+  }
+  // eslint-disable-next-line no-undefined
+  if (this._altCssField && altColor !== undefined) {
+    this._setStaticData(dv, rowRef, this._altCssField, altColor);
+  }
+};
+/** @public
+* @return {Object} Return predefined color object map
+*/
+RowColoringPlugin.prototype.getPredefinedColors = function () {
+  return this._predefinedColors;
+};
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowColoringPlugin.prototype.setPredefinedColors = function (predefinedColors) {
+  if (predefinedColors != null) {
+    this._injectStyles(predefinedColors);
+  }
+};
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowColoringPlugin.prototype._injectStyles = function (predefinedColors) {
+  var prefix1 = ".tr-grid." + RowColoringPlugin._controlClass + " .section .column .cell";
+  var prefix2 = ".tr-grid." + RowColoringPlugin._controlClass + " .section .cover-layer .cell";
+  var css = [];
+  var ss, styles, value;
+  for (var className in predefinedColors) {
+    css.push(prefix1 + "." + className + ", " + prefix2 + "." + className);
+    ss = [];
+    styles = predefinedColors[className];
+    value = styles["backgroundColor"];
+    if (value) {
+      ss.push("background-color: " + value + ";");
+    }
+    value = styles["color"];
+    if (value) {
+      ss.push("color: " + value + ";");
+    }
+    css.push(ss);
+  }
+  var host = this._hosts[0];
+  if (this._styleTag) {
+    this._styleTag.parentNode.removeChild(this._styleTag);
+    this._styleTag = null;
+  }
+  this._styleTag = injectCss(prettifyCss(css), host.getElement());
+  this._predefinedColors = predefinedColors;
+};
+/** @private
+* @param {string|number} rowRef Row id in the data table or row index
+* @param {Object} dv DataView
+* @return {string}
+*/
+RowColoringPlugin.prototype._getRowId = function (rowRef, dv) {
+  if (typeof rowRef === "number") {
+    return dv ? dv.getRowId(rowRef) : "";
+  } else if (typeof rowRef === "string") {
+    return rowRef;
+  }
+  return "";
+};
+/** @private
+* @return {Object} DataView
+*/
+RowColoringPlugin.prototype._getDataView = function () {
+  var host = this._hosts[0];
+  return host ? host.getDataSource() : null;
+};
+
+/** @public
+* @param {boolean=} opt_bool
+*/
+RowColoringPlugin.prototype.disableTextColoring = function (opt_bool) {
+  this._txtEnabled = opt_bool !== false;
+};
+/** @public
+* @param {boolean=} opt_bool
+*/
+RowColoringPlugin.prototype.disableBgColoring = function (opt_bool) {
+  this._bgEnabled = opt_bool !== false;
+};
+/** @public
+* @param {boolean=} disabled
+*/
+RowColoringPlugin.prototype.disableRowColoring = function (disabled) {
+  this._disabled = disabled !== false;
+};
+
+/** @public
+* @function
+* @param {string} hexColor
+* @return {string} color in CSS hex format (e.g. #FF00FF)
+*/
+RowColoringPlugin.getContrastColor = function (hexColor) {
+  if (!hexColor) {
+    return '';
+  }
+  var hexInt = parseInt(hexColor.replace(/[^0-9A-F]/gi, ''), 16);
+  var r = hexInt >> 16 & 255;
+  var g = hexInt >> 8 & 255;
+  var b = hexInt & 255;
+  var brightness = Math.sqrt(r * r * 0.241 + g * g * 0.691 + b * b * 0.068);
+  if (brightness >= 135) {
+    // Brighter color has more impact to human eye than the darker color
+    return '#000000';
+  }
+  return '#FFFFFF';
+};
+/** @public
+* @function
+* @param {string} hexColor
+* @return {string} color in CSS hex format (e.g. #FF00FF)
+*/
+RowColoringPlugin.prototype.getContrastColor = RowColoringPlugin.getContrastColor;
+
+/** @private
+* @param {Object} e
+*/
+RowColoringPlugin.prototype._onSectionBinding = function (e) {
+  if (e["sectionType"] === "content") {
+    this._updateRowColor(e["fromRowIndex"], e["toRowIndex"]);
+  }
+};
+
+/** @private
+* @param {Object} section
+* @param {number} fromR from row index
+* @param {number} toR to row index
+* @param {boolean=} forceUpdate force update coloring
+*/
+RowColoringPlugin.prototype._applyColor = function (section, fromR, toR, forceUpdate) {
+  var colCount = section.getColumnCount();
+  var dv = this._getDataView();
+  var textColor, bgColor, el, cell, stretchedCell;
+  var txtEnabled = this._txtEnabled;
+  var bgEnabled = this._bgEnabled;
+  for (var r = fromR; r < toR; ++r) {
+    textColor = bgColor = "";
+    var rowData = this._getRow(dv, r);
+    if (rowData) {
+      if (txtEnabled) {
+        textColor = rowData[this._txtColorField] || "";
+      }
+      if (bgEnabled) {
+        bgColor = rowData[this._bgField] || "";
+      }
+    }
+    stretchedCell = section.getStretchedCell(null, r);
+    if (stretchedCell) {
+      el = stretchedCell.getElement();
+      if (textColor || el._textColor) {
+        if (el._textColor !== textColor || forceUpdate) {
+          stretchedCell.setStyle("color", textColor);
+          el._textColor = textColor;
+        }
+      }
+      if (bgColor || el._bgColor) {
+        if (el._bgColor !== bgColor || forceUpdate) {
+          stretchedCell.setStyle("backgroundColor", bgColor);
+          el._bgColor = bgColor;
+        }
+      }
+    }
+    for (var c = 0; c < colCount; ++c) {
+      cell = section.getCell(c, r, false);
+      if (!cell) {
+        continue;
+      }
+      el = cell.getElement();
+      if (!el) {
+        continue;
+      }
+      if (textColor || el._textColor) {
+        if (el._textColor !== textColor || forceUpdate) {
+          cell.setStyle("color", textColor);
+          el._textColor = textColor;
+        }
+      }
+      if (bgColor || el._bgColor) {
+        if (el._bgColor !== bgColor || forceUpdate) {
+          cell.setStyle("backgroundColor", bgColor);
+          el._bgColor = bgColor;
+        }
+      }
+    }
+  }
+};
+
+/** @private
+* @param {Object} section
+* @param {number} fromR from row index
+* @param {number} toR to row index
+*/
+RowColoringPlugin.prototype._applyPredefinedColor = function (section, fromR, toR) {
+  var colCount = section.getColumnCount();
+  var dv = this._getDataView();
+  var cssField = this._cssField;
+  var altCssField = this._altCssField;
+  var rangeField = this._cssRangeField;
+  var className, el, start, end, altCssClass, range, colorSelected, stretchedCell, cell;
+  for (var r = fromR; r < toR; ++r) {
+    className = altCssClass = "";
+    start = end = range = null;
+    var rowData = this._getRow(dv, r);
+    if (rowData) {
+      className = rowData[cssField] || "";
+      altCssClass = rowData[altCssField] || "";
+      range = rowData[rangeField];
+      if (Array.isArray(range)) {
+        start = range[0];
+        end = range[1] ? range[0] + range[1] : colCount; // handled case user provide only the start field (not provide the length of columns)
+      }
+    }
+
+    stretchedCell = section.getStretchedCell(null, r);
+    if (stretchedCell) {
+      el = stretchedCell.getElement();
+      if (el._coloringClass !== className) {
+        if (el._coloringClass) {
+          el.classList.remove(el._coloringClass);
+          el._coloringClass = "";
+        }
+        if (className) {
+          el.classList.add(className);
+          el._coloringClass = className;
+        }
+      }
+    }
+    for (var c = 0; c < colCount; ++c) {
+      cell = section.getCell(c, r, false);
+      if (!cell) {
+        continue;
+      }
+      el = cell.getElement();
+      if (!el) {
+        continue;
+      }
+      if (className && range && (c < start || c > end)) {
+        // use alternative color
+        colorSelected = altCssClass;
+      } else {
+        // use normal color
+        colorSelected = className;
+      }
+      if (el._coloringClass === colorSelected) {
+        continue;
+      }
+      if (el._coloringClass) {
+        el.classList.remove(el._coloringClass);
+        el._coloringClass = "";
+      }
+      if (colorSelected) {
+        el.classList.add(colorSelected);
+        el._coloringClass = colorSelected;
+      }
+    }
+  }
+};
+
+/** @private
+* @param {number=} fromR from row index
+* @param {number=} toR to row index
+*/
+RowColoringPlugin.prototype._updateRowColor = function (fromR, toR) {
+  this._updateTimer = 0;
+  if (this._disabled) {
+    return;
+  }
+  var dv = this._getDataView();
+  if (!dv) {
+    return;
+  }
+  var host = this._hosts ? this._hosts[0] : null;
+  var section = host ? host.getSection("content") : null;
+  if (!section) {
+    return;
+  }
+  if (!fromR) {
+    fromR = section.getFirstIndexInView();
+  }
+  if (toR == null) {
+    toR = section.getLastIndexInView() + 1;
+  }
+  // TODO: consolidate the 2 separated flows
+  if (this._predefinedColoring) {
+    this._applyPredefinedColor(section, fromR, toR);
+  } else {
+    this._applyColor(section, fromR, toR);
+  }
+};
+/** @public
+*/
+RowColoringPlugin.prototype.forceUpdateRowColor = function () {
+  if (this._disabled) {
+    return;
+  }
+  var dv = this._getDataView();
+  if (!dv) {
+    return;
+  }
+  var host = this._hosts ? this._hosts[0] : null;
+  var section = host ? host.getSection("content") : null;
+  if (!section) {
+    return;
+  }
+  var fromR = section.getFirstIndexInView();
+  var toR = section.getLastIndexInView() + 1;
+  if (this._predefinedColoring) {
+    this._applyPredefinedColor(section, fromR, toR);
+  } else {
+    this._applyColor(section, fromR, toR, true);
+  }
+};
+export default RowColoringPlugin;
+export { RowColoringPlugin, RowColoringPlugin as RowColoring, RowColoringPlugin as RowColoringExtension };

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

@@ -0,0 +1 @@
+export * from "./RowColoring";

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

@@ -0,0 +1 @@
+export * from "./RowColoring.js";