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

package/lib/formatters/es6/index.d.ts

@@ -0,0 +1,64 @@
+/* eslint-disable */
+
+import CoralButtonFormatter from "./CoralButtonFormatter.js";
+import CoralCheckboxFormatter from "./CoralCheckboxFormatter.js";
+import CoralComboBoxFormatter from "./CoralComboBoxFormatter.js";
+import CoralIconFormatter from "./CoralIconFormatter.js";
+import CoralInputFormatter from "./CoralInputFormatter.js";
+import CoralRadioButtonFormatter from "./CoralRadioButtonFormatter.js";
+import CoralSelectFormatter from "./CoralSelectFormatter.js";
+import CoralToggleFormatter from "./CoralToggleFormatter.js";
+import DuplexEmeraldDateTimePickerFormatter from "./DuplexEmeraldDateTimePickerFormatter.js";
+import EmeraldDateTimePickerFormatter from "./EmeraldDateTimePickerFormatter.js";
+import NumericInputFormatter from "./NumericInputFormatter.js";
+import PercentBarFormatter from "./PercentBarFormatter.js";
+import SimpleImageFormatter from "./SimpleImageFormatter.js";
+import SimpleInputFormatter from "./SimpleInputFormatter.js";
+import SimpleLinkFormatter from "./SimpleLinkFormatter.js";
+import SimpleTickerFormatter from "./SimpleTickerFormatter.js";
+import SimpleToggleFormatter from "./SimpleToggleFormatter.js";
+import TextFormatter from "./TextFormatter.js";
+
+import EFButtonFormatter from "./EFButtonFormatter.js";
+import EFCheckboxFormatter from "./EFCheckboxFormatter.js";
+import EFComboBoxFormatter from "./EFComboBoxFormatter.js";
+import EFDateTimePickerFormatter from "./EFDateTimePickerFormatter.js";
+import EFIconFormatter from "./EFIconFormatter.js";
+import EFNumberFieldFormatter from "./EFNumberFieldFormatter.js";
+import EFRadioButtonFormatter from "./EFRadioButtonFormatter.js";
+import EFSelectFormatter from "./EFSelectFormatter.js";
+import EFTextFieldFormatter from "./EFTextFieldFormatter.js";
+import EFToggleFormatter from "./EFToggleFormatter.js"; 
+
+
+
+export {
+	CoralButtonFormatter,
+	CoralCheckboxFormatter,
+	CoralComboBoxFormatter,
+	CoralIconFormatter,
+	CoralInputFormatter,
+	CoralRadioButtonFormatter,
+	CoralSelectFormatter,
+	CoralToggleFormatter,
+	DuplexEmeraldDateTimePickerFormatter,
+	EmeraldDateTimePickerFormatter,
+	NumericInputFormatter,
+	PercentBarFormatter,
+	SimpleImageFormatter,
+	SimpleInputFormatter,
+	SimpleLinkFormatter,
+	SimpleTickerFormatter,
+	SimpleToggleFormatter,
+	TextFormatter,
+	EFButtonFormatter,
+	EFCheckboxFormatter,
+	EFComboBoxFormatter,
+	EFDateTimePickerFormatter,
+	EFIconFormatter,
+	EFNumberFieldFormatter,
+	EFRadioButtonFormatter,
+	EFSelectFormatter,
+	EFTextFieldFormatter,
+	EFToggleFormatter
+};

package/lib/formatters/es6/index.js

@@ -0,0 +1,88 @@
+/* eslint-disable */
+
+import CoralButtonFormatter from "./CoralButtonFormatter.js";
+import CoralCheckboxFormatter from "./CoralCheckboxFormatter.js";
+import CoralComboBoxFormatter from "./CoralComboBoxFormatter.js";
+import CoralIconFormatter from "./CoralIconFormatter.js";
+import CoralInputFormatter from "./CoralInputFormatter.js";
+import CoralRadioButtonFormatter from "./CoralRadioButtonFormatter.js";
+import CoralSelectFormatter from "./CoralSelectFormatter.js";
+import CoralToggleFormatter from "./CoralToggleFormatter.js";
+import DuplexEmeraldDateTimePickerFormatter from "./DuplexEmeraldDateTimePickerFormatter.js";
+import EmeraldDateTimePickerFormatter from "./EmeraldDateTimePickerFormatter.js";
+import NumericInputFormatter from "./NumericInputFormatter.js";
+import PercentBarFormatter from "./PercentBarFormatter.js";
+import SimpleImageFormatter from "./SimpleImageFormatter.js";
+import SimpleInputFormatter from "./SimpleInputFormatter.js";
+import SimpleLinkFormatter from "./SimpleLinkFormatter.js";
+import SimpleTickerFormatter from "./SimpleTickerFormatter.js";
+import SimpleToggleFormatter from "./SimpleToggleFormatter.js";
+import TextFormatter from "./TextFormatter.js";
+
+import EFButtonFormatter from "./EFButtonFormatter.js";
+import EFCheckboxFormatter from "./EFCheckboxFormatter.js";
+import EFComboBoxFormatter from "./EFComboBoxFormatter.js";
+import EFDateTimePickerFormatter from "./EFDateTimePickerFormatter.js";
+import EFIconFormatter from "./EFIconFormatter.js";
+import EFNumberFieldFormatter from "./EFNumberFieldFormatter.js";
+import EFRadioButtonFormatter from "./EFRadioButtonFormatter.js";
+import EFSelectFormatter from "./EFSelectFormatter.js";
+import EFTextFieldFormatter from "./EFTextFieldFormatter.js";
+import EFToggleFormatter from "./EFToggleFormatter.js"; 
+
+// tsd-disable
+var tr = window["tr"];
+if (!tr) {
+	tr = window["tr"] = {};
+}
+
+tr.CoralButtonFormatter = CoralButtonFormatter;
+tr.CoralCheckboxFormatter = CoralCheckboxFormatter;
+tr.CoralComboBoxFormatter = CoralComboBoxFormatter;
+tr.CoralIconFormatter = CoralIconFormatter;
+tr.CoralInputFormatter = CoralInputFormatter;
+tr.CoralRadioButtonFormatter = CoralRadioButtonFormatter;
+tr.CoralSelectFormatter = CoralSelectFormatter;
+tr.CoralToggleFormatter = CoralToggleFormatter;
+tr.DuplexEmeraldDateTimePickerFormatter = DuplexEmeraldDateTimePickerFormatter;
+tr.EmeraldDateTimePickerFormatter = EmeraldDateTimePickerFormatter;
+tr.NumericInputFormatter = NumericInputFormatter;
+tr.PercentBarFormatter = PercentBarFormatter;
+tr.SimpleImageFormatter = SimpleImageFormatter;
+tr.SimpleInputFormatter = SimpleInputFormatter;
+tr.SimpleLinkFormatter = SimpleLinkFormatter;
+tr.SimpleTickerFormatter = SimpleTickerFormatter;
+tr.SimpleToggleFormatter = SimpleToggleFormatter;
+tr.TextFormatter = TextFormatter;
+// tsd-enable
+
+export {
+	CoralButtonFormatter,
+	CoralCheckboxFormatter,
+	CoralComboBoxFormatter,
+	CoralIconFormatter,
+	CoralInputFormatter,
+	CoralRadioButtonFormatter,
+	CoralSelectFormatter,
+	CoralToggleFormatter,
+	DuplexEmeraldDateTimePickerFormatter,
+	EmeraldDateTimePickerFormatter,
+	NumericInputFormatter,
+	PercentBarFormatter,
+	SimpleImageFormatter,
+	SimpleInputFormatter,
+	SimpleLinkFormatter,
+	SimpleTickerFormatter,
+	SimpleToggleFormatter,
+	TextFormatter,
+	EFButtonFormatter,
+	EFCheckboxFormatter,
+	EFComboBoxFormatter,
+	EFDateTimePickerFormatter,
+	EFIconFormatter,
+	EFNumberFieldFormatter,
+	EFRadioButtonFormatter,
+	EFSelectFormatter,
+	EFTextFieldFormatter,
+	EFToggleFormatter
+};

package/lib/grid/index.d.ts

@@ -0,0 +1,2 @@
+import {Grid} from "./lib/efx-grid.js";
+export {Grid}

package/lib/grid/index.js

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

package/lib/grid/lib/efx-grid.d.ts

@@ -0,0 +1,53 @@
+import { JSXInterface } from "../../tr-grid-util/es6/jsx";
+import {
+	ResponsiveElement,
+	css,
+	unsafeCSS,
+	html
+} from "@refinitiv-ui/core";
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import RowDefinition from "../../rt-grid/es6/RowDefinition.js";
+import ColumnDefinition from "../../rt-grid/es6/ColumnDefinition.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+import { Grid as RealtimeGrid } from "../../rt-grid/es6/Grid.js";
+import ConditionalColoringPlugin from "../../tr-grid-conditional-coloring/es6/ConditionalColoring.js";
+import RowSegmentingPlugin from "../../row-segmenting/es6/RowSegmenting.js";
+import ColumnDraggingPlugin from "../../column-dragging/es6/ColumnDragging.js";
+import cssStr from "../../core/es6/tr-grid-theme.js";
+
+declare namespace Grid {
+
+    type Config = {
+        config?: any,
+        data?: any[]|null,
+        columns?: any[]|null,
+        rows?: any[]|null
+    };
+
+}
+
+declare class Grid extends ResponsiveElement {
+
+    constructor();
+
+    config?: RealtimeGrid.GridOptions|null;
+    data?: any[]|null;
+    columns?: (ColumnDefinition.Options)[]|null;
+    rows?: (RowDefinition.Options)[]|null;
+    api?: RealtimeGrid|null;
+
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"efx-grid": Grid;
+	}
+	namespace JSX {
+		interface IntrinsicElements {
+			"efx-grid": Grid | JSXInterface.HTMLAttributes;
+		}
+	}
+}
+
+export default Grid;
+export { Grid };

package/lib/grid/lib/efx-grid.js

@@ -0,0 +1,444 @@
+/* eslint-disable */
+import {
+	ResponsiveElement,
+	css,
+	unsafeCSS,
+	html
+} from "@refinitiv-ui/core";
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import RowDefinition from "../../rt-grid/es6/RowDefinition.js";
+import ColumnDefinition from "../../rt-grid/es6/ColumnDefinition.js";
+/* eslint-enable */
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+import { Grid as RealtimeGrid } from "../../rt-grid/es6/Grid.js";
+import ConditionalColoringPlugin from "../../tr-grid-conditional-coloring/es6/ConditionalColoring.js";
+import RowSegmentingPlugin from "../../row-segmenting/es6/RowSegmenting.js";
+import ColumnDraggingPlugin from "../../column-dragging/es6/ColumnDragging.js";
+import cssStr from "../../core/es6/tr-grid-theme.js";
+
+const coreGridStyle = css`${unsafeCSS(cssStr)}`;
+let preloadPromise = null;
+
+/**
+ * @typedef {Object} Grid~Config
+ * @property {Object=} config
+ * @property {Array=} data
+ * @property {Array=} columns
+ * @property {Array=} rows
+ */
+
+/**
+ * @class
+ * @constructor
+ * @public
+ */
+class Grid extends ResponsiveElement {
+
+	static properties = {
+		/**
+		 * Configuration for initializing the grid.
+		 * @public
+		 * @type {RealtimeGrid~GridOptions}
+		 */
+		config: { type: Object },
+		/**
+		 * Property for updating internal grid data.
+		 * @public
+		 * @type {Array}
+		 */
+		data: { type: Array },
+		/**
+		 * Property for updating grid columns.
+		 * @public
+		 * @type {Array<ColumnDefinition~Options>}
+		 */
+		columns: { type: Array },
+		/**
+		 * Property for updating grid rows.
+		 * @public
+		 * @type {Array<RowDefinition~Options>}
+		 */
+		rows: { type: Array }
+	};
+
+	/** Element version number. Note: This need to be inject in release process.
+	 * @static
+	 * @returns {string}
+	 */
+	static get version() {
+		return 'PUBLISH_VERSION';
+	}
+
+	/**
+	 * The actual grid object. This object exposes all Real-time Grid's API.
+	 * @public
+	 * @type {RealtimeGrid}
+	 */
+	api = null;
+
+	constructor() {
+		super();
+
+		// Reactive properties
+		this.config = null;
+		this.data = null;
+		this.columns = null;
+		this.rows = null;
+
+		// Internal properties
+		this._resizeTimer = 0;
+
+		this._onResizeHandler = this._onResizeHandler.bind(this);
+		this.resizedCallback = this.resizedCallback.bind(this);
+		this._preloadElfIcon = this._preloadElfIcon.bind(this);
+	}
+
+	/**
+	 * @protected
+	 * @ignore
+	 */
+	firstUpdated() {
+		// pre load elf svg icon
+		this._preloadElfIcon();
+	}
+
+	/**
+	 * @protected
+	 * @ignore
+	 * @param {Object} changedProperties
+	 */
+	update(changedProperties) {
+		const isColumnsChanged = this._isValidChange(changedProperties, 'columns');
+		const isRowsChanged = this._isValidChange(changedProperties, 'rows');
+		const isDataChanged = this._isValidChange(changedProperties, 'data');
+		const rows = this.rows;
+		const data = this.data;
+
+		if (isColumnsChanged) {
+			this._columnsChange();
+		}
+
+		if (isDataChanged && isRowsChanged) {
+			if (data && rows) { // merge rows and data
+				this._rowsUpdated(true);
+				this._dataUpdated();
+			}
+			else if (rows && !data) { // treat as row changed only
+				this._rowsUpdated(false);
+			}
+			else if (data && !rows) { // treat as data changed only
+				this._dataUpdated();
+			}
+			else {
+				this._removeAllRows();
+			}
+		}
+		else if (isRowsChanged) {
+			if (rows) {
+				this._rowsUpdated(false);
+			}
+			else {
+				this._removeAllRows();
+			}
+		}
+		else if (isDataChanged) {
+			if (data) {
+				this._dataUpdated();
+			}
+			else {
+				this._removeAllRows();
+			}
+		}
+
+		super.update(changedProperties);
+	}
+
+	/**
+	 * @protected
+	 * @ignore
+	 * @param {Object} changedProperties
+	 */
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('config')) {
+			this._configChange();
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} changedProperties
+	 * @param {string} propName
+	 * @return {boolean}
+	 */
+	_isValidChange (changedProperties, propName) {
+		if (changedProperties.has(propName)) {
+			if (changedProperties.get(propName) != null
+				// eslint-disable-next-line
+				// @ts-ignore
+				|| this[propName] != null) { // avoid undefined <-> null changing
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * @private
+	 */
+	_columnsChange() {
+		if (this.api) {
+			this.api.setColumns(this.columns);
+		}
+	}
+
+	/**
+	 * @private
+	 */
+	_removeAllRows() {
+		if (this.api) {
+			this.rows = null;
+			this.data = null;
+			this.api.removeAllRows();
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {boolean} dataChange
+	 */
+	_rowsUpdated(dataChange) {
+		const api = this.api;
+		if (api) {
+			if (!dataChange) {
+				this.data = null;
+			}
+			api.removeAllRows();
+			if(this.rows) {
+				api.insertRows(this.rows);
+			}
+		}
+	}
+
+	/**
+	 * @private
+	 */
+	_dataUpdated() {
+		const api = this.api;
+		if (api && this.data) { // TODO: parse string data to JSON object
+			api.updateDataSet(this.data);
+		}
+	}
+
+	/**
+	 * @private
+	 */
+	_configChange() {
+		let gridElem;
+		if (this.api) {
+			// Remove old grid element and Realtime Grid's API
+			gridElem = this.api.getElement();
+			this.api.dispose();
+			if (gridElem.parentNode) {
+				gridElem.parentNode.removeChild(gridElem);
+			}
+			this.api = null;
+		}
+
+		const options = this.config;
+		if (!options || !this.shadowRoot) {
+			// Do not create or render anything if no config is provided
+			return;
+		}
+
+		// Apply default settings
+		if (options.scrollbar == null) {
+			options.scrollbar = true;
+		}
+		if (options.rowSegmenting == null) {
+			options.rowSegmenting = {};
+		}
+		if (options.rowSegmenting) {
+			if (options.rowSegmenting.spanning == null) {
+				options.rowSegmenting.spanning = false;
+			}
+		}
+		// Inject extensions for some specific built-in features
+		let extList = {};
+		let extensions = options.plugins || options.extensions;
+		if (extensions) {
+			for (let i = extensions.length; --i >= 0;) {
+				let extName = extensions[i].getName();
+				extList[extName] = 1;
+			}
+		}
+		else {
+			options.extensions = extensions = [];
+		}
+
+		if (!extList['ConditionalColoringPlugin']) {
+			extensions.push(new ConditionalColoringPlugin());
+		}
+		if (!extList['RowGroupingPlugin'] && !extList['RowSegmentingPlugin']) {
+			extensions.push(new RowSegmentingPlugin());
+		}
+		if (!extList['ColumnDraggingPlugin']) {
+			extensions.push(new ColumnDraggingPlugin());
+		}
+
+		// use row height from theme if row height is not specified
+		if (!options.rowHeight) {
+			const rowHeight = parseFloat(this.getComputedVariable('--grid-row-height'));
+			if (rowHeight) {
+				options.rowHeight = rowHeight;
+			}
+		}
+
+		// use header height from theme if header height is not specified
+		if (!options.headerRowHeight) {
+			const headerHeight = parseFloat(this.getComputedVariable('--grid-header-height'));
+			if (headerHeight) {
+				options.headerRowHeight = headerHeight;
+			}
+		}
+
+		// set html property for column
+		if (!this.config.columns && this.columns) {
+			this.config.columns = this.columns;
+		}
+
+		// set html property for rows
+		if (!this.config.rows && this.rows) {
+			this.config.rows = this.rows;
+		}
+
+		// set html property for dataModel
+		if (!(this.config.staticDataRows || this.config.dataModel) && this.data) {
+			this.config.staticDataRows = this.data;
+		}
+
+		// Inject icons and theme name
+		ElfUtil.injectIcons(options, this);
+
+		if (ElfUtil.isHaloTheme()) {
+			if (options.borders == null) {
+				options.borders = false;
+			}
+			if (options.contentVerticalLines == null) {
+				options.contentVerticalLines = false;
+			}
+		}
+
+		if (options.RTK) {
+			ElfUtil.setRTK(options.RTK);
+		}
+
+		const grid = this.api = new RealtimeGrid(null, options);
+		gridElem = grid.getElement();
+		gridElem.classList.add('tr-fill-parent');
+
+		if (options.themeName && options.icons) {
+			grid.getCoreGrid().addClass(options.themeName);
+		}
+
+		this.shadowRoot.appendChild(gridElem);
+
+		// should call resizedCallback every time when change config
+		// because resize event will fire only first time init atlas blotter and resize event occur
+		// but just config change resizedCallback will never been call so we need to call it manually
+		this.resizedCallback();
+
+		const evtArg = {
+			api: this.api,
+			element: this
+		};
+		if (typeof options.whenDefined === 'function') {
+			options.whenDefined(evtArg);
+		}
+		this.dispatchEvent(new CustomEvent('configured', { bubbles: true, detail: evtArg }));
+	}
+
+	/**
+	 * @private
+	 * Update grid layout when
+	 * the element's size has been changed
+	 * @return {void}
+	 */
+	_onResizeHandler() {
+		this._resizeTimer = 0;
+
+		if (this.api) {
+			this.api.getCoreGrid().updateLayout();
+		}
+	}
+
+	/**
+	 * @private
+	 * Load preload icon for element framework v7
+	 */
+	_preloadElfIcon() {
+		// pre load elf svg icon
+		if(!preloadPromise) { // import only one time
+			preloadPromise = import("@refinitiv-ui/elements/icon").then(function(e) {
+				let preload = e.preload;
+				if (preloadd) {
+					const iconList = ElfUtil.prepareIconPreloading();
+					if (iconList) {
+						preload(...iconList);
+					}
+				}
+			}).catch(function(){});
+		}
+	}
+
+	/** Called when the element's size has changed
+	 * @public
+	 * @return {void}
+	 * @ignore
+	 */
+	resizedCallback() {
+		if (!this._resizeTimer) {
+			// split layout updating to another execution-loop
+			// to prevents resizeObserver triggers resize-loop-error
+			this._resizeTimer = setTimeout(this._onResizeHandler, 50);
+		}
+	}
+
+	/**
+	 * A `CSSResult` that will be used
+	 * to style the host, slotted children
+	 * and the internal template of the element.
+	 * @return {CSSResult | Array.<CSSResult>} CSS template
+	 */
+	static get styles() {
+		return [coreGridStyle, css`
+			:host {
+				display: block;
+				max-height: 2000px; /* Prevent rendering all rows */
+				position: relative; /* Enforce z-index */
+				z-index: 0;
+			}
+			:host .tr-fill-parent>.tr-grid { /* WORKAROUND: To make ef-popup float on top of the scrollbars */
+				z-index: unset;
+			}
+			:host .grid-scrollbar {
+				z-index: 1;
+			}
+		`];
+	}
+
+	/**
+	 * need to have this to prevent error on IE
+	 * A `TemplateResult` that will be used
+	 * to render the updated internal template.
+	 * @return {TemplateResult} Render template
+	 */
+	render() {
+		return html``;
+	}
+}
+
+customElement('efx-grid')(Grid);
+
+export default Grid;
+export { Grid };