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

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

@@ -0,0 +1,23 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+declare namespace CoralComboBoxFormatter {
+
+    type Options = {
+        data?: any[]|null,
+        entries?: any[]|null,
+        items?: any[]|null
+    };
+
+}
+
+declare class CoralComboBoxFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|CoralComboBoxFormatter.Options|any)|null): any;
+
+}
+
+export default CoralComboBoxFormatter;
+export { CoralComboBoxFormatter };

package/lib/formatters/es6/CoralComboBoxFormatter.js

@@ -0,0 +1,103 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+/** @typedef {Object} CoralComboBoxFormatter~Options
+* @description CoralComboBoxFormatter options
+* @property {Array=} data Item list to be displayed on the coral select. The given object should contains at least value properties. If string is given, it will be treated as the value.
+* @property {Array=} entries Alias to `data` property
+* @property {Array=} items Alias to `data` property
+*/
+
+/** @private
+* @param {Object} ctx Context object
+* @param {Object} options User options
+*/
+let onContextCreated = function (ctx, options) {
+	let userItems = options.data || options.entries || options.items;
+	if(Array.isArray(userItems)) {
+		let i;
+		let len = userItems.length;
+		let userItem;
+		for(i = 0; i < len; ++i) {
+			userItem = userItems[i];
+			if(userItem != null) {
+				if (typeof userItem !== "object") {
+					userItem = { value: userItem };
+				}
+			} else {
+				userItem = {value: ""};
+			}
+			let label = userItem.label;
+			if(!label && typeof label !== "string") { // 0, false, null, undefined, NaN
+				userItem.label = userItem.value + "";
+			}
+			userItems[i] = userItem;
+		}
+		ctx.data = userItems;
+
+		let mappedData = ctx._mappedData = {}; // WORKAROUND: Since combobox does not accept raw value for selection, it actually needs item element
+		for (i = 0; i < len; ++i) {
+			userItem = userItems[i];
+			mappedData[userItem.value] = userItem;
+		}
+	}
+};
+
+let onElementCreated = function (element, ctx) {
+	element.data = ctx.data;
+};
+
+let onElementUpdated = function (element, ctx) {
+	if (ctx._mappedData) {
+		if(ElfUtil.getElfVersion() > 3) {
+			element.value = ctx.value;
+		} else {
+			element.value = ctx._mappedData[ctx.value];
+		}
+	}
+};
+
+let _changeHandler = function (e, ctx) {
+	if (e.detail.value == null) {
+		return;
+	}
+	if(ElfUtil.getElfVersion() > 3) {
+		ctx.value = e.detail.value;
+	} else {
+		ctx.value = e.detail.value.value;
+	}
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let CoralComboBoxFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralComboBoxFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralComboBoxFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-combo-box",
+		refName: "CoralComboBoxFormatter",
+		styles: {
+			maxWidth: "100%",
+			margin: "0"
+		},
+		onContextCreated: onContextCreated,
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		data: null
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralComboBoxFormatter;
+export { CoralComboBoxFormatter };

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

@@ -0,0 +1,21 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare namespace CoralIconFormatter {
+
+    type Options = {
+        icon?: (string|any)|null,
+        size?: (number|string)|null
+    };
+
+}
+
+declare class CoralIconFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|CoralIconFormatter.Options|any)|null): any;
+
+}
+
+export default CoralIconFormatter;
+export { CoralIconFormatter };

package/lib/formatters/es6/CoralIconFormatter.js

@@ -0,0 +1,50 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} CoralIconFormatter~Options
+* @description FormatterBuilder options
+* @property {(string|Object)=} icon
+* @property {(number|string)=} size
+*/
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+let onElementUpdated = function (element, ctx) {
+	let icon = ctx.value;
+	if (ctx.icon != null && typeof ctx.icon === "object") {
+		icon = ctx.icon[ctx.value];
+	}
+	if (typeof ctx.icon === "string") {
+		icon = ctx.icon;
+	}
+	element.icon = icon;
+	element.size = ctx.size;
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let CoralIconFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralIconFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralIconFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-icon",
+		refName: "CoralIconFormatter",
+		onElementUpdated: onElementUpdated,
+		icon: null, // use icon from ctx.value
+		size: 15
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralIconFormatter;
+export { CoralIconFormatter };

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

@@ -0,0 +1,12 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare class CoralInputFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|any)|null): any;
+
+}
+
+export default CoralInputFormatter;
+export { CoralInputFormatter };

package/lib/formatters/es6/CoralInputFormatter.js

@@ -0,0 +1,45 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+let onElementUpdated = function (element, ctx) {
+	element.value = ctx.value;
+};
+
+let _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let CoralInputFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+CoralInputFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-input",
+		refName: "CoralInputFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		styles: {
+			margin: "0",
+			width: "100%"
+		}
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralInputFormatter;
+export { CoralInputFormatter };

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

@@ -0,0 +1,20 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare namespace CoralRadioButtonFormatter {
+
+    type Options = {
+        initialIndex?: number|null
+    };
+
+}
+
+declare class CoralRadioButtonFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|CoralRadioButtonFormatter.Options|any)|null): any;
+
+}
+
+export default CoralRadioButtonFormatter;
+export { CoralRadioButtonFormatter };

package/lib/formatters/es6/CoralRadioButtonFormatter.js

@@ -0,0 +1,85 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} CoralRadioButtonFormatter~Options
+* @description FormatterBuilder options
+* @property {number=} initialIndex
+*/
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+let onElementCreated = function (element, ctx) {
+	let dv = ctx.grid.getDataSource();
+	let rid = dv.getRowId(ctx.rowIndex);
+	let index = dv.getRowIndex(rid);
+	let checked = index === ctx.initialIndex;
+	if (checked) {
+		ctx.previousId = rid;
+		ctx.setData(ctx.field, checked);
+	}
+	ctx.value = checked;
+};
+
+let onElementUpdated = function (element, ctx) {
+	let dv = ctx.grid.getDataSource();
+	let rid = dv.getRowId(ctx.rowIndex);
+	let checked = (rid === ctx.previousId) && ctx.value;
+	element.checked = checked;
+};
+
+/** To bound data and view of the current focus radio button
+* @private
+* @param {*} e
+* @param {*} ctx
+*/
+let _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+
+	let dv = ctx.grid.getDataSource();
+	let rid = dv.getRowId(ctx.rowIndex);
+	if (ctx.previousId && ctx.previousId !== rid) {
+		let row = dv.getRowData(ctx.previousId);
+		if (row) {
+			if (row["ROW_DEF"]) {
+				row["ROW_DEF"].setData(ctx.field, false);
+			} else {
+				dv.setData(ctx.previousId, ctx.field, false);
+			}
+		}
+	}
+	ctx.previousId = dv.getRowId(ctx.rowIndex);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let CoralRadioButtonFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralRadioButtonFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralRadioButtonFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-radio-button",
+		refName: "CoralRadioButtonFormatter",
+		styles: {
+			margin: 0
+		},
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated,
+		changeHook: "checked-changed",
+		changeHandler: _changeHandler,
+		initialIndex: -1 // does not checked by default
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralRadioButtonFormatter;
+export { CoralRadioButtonFormatter };

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

@@ -0,0 +1,23 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import CoralItems from "../../tr-grid-util/es6/CoralItems.js";
+
+declare namespace CoralSelectFormatter {
+
+    type Options = {
+        data?: any[]|null,
+        entries?: any[]|null,
+        items?: any[]|null
+    };
+
+}
+
+declare class CoralSelectFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|CoralSelectFormatter.Options|any)|null): any;
+
+}
+
+export default CoralSelectFormatter;
+export { CoralSelectFormatter };

package/lib/formatters/es6/CoralSelectFormatter.js

@@ -0,0 +1,71 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import CoralItems from "../../tr-grid-util/es6/CoralItems.js";
+
+/** @typedef {Object} CoralSelectFormatter~Options
+* @description CoralSelectFormatter options
+* @property {Array=} data Item list to be displayed on the coral select. The given object should contains at least value properties. If string is given, it will be treated as the value.
+* @property {Array=} entries Alias to `data` property
+* @property {Array=} items Alias to `data` property
+*/
+
+/** @private
+* @param {Object} ctx Context object
+* @param {Object} options User options
+*/
+let onContextCreated = function (ctx, options) {
+	let userItems = options.data || options.entries || options.items;
+	ctx.data = CoralItems.create(userItems);
+};
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+let onElementCreated = function (element, ctx) {
+	if (ctx.data) {
+		element.data = ctx.data;
+	}
+};
+
+let onElementUpdated = function (element, ctx) {
+	element.value = ctx.value;
+};
+
+let _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let CoralSelectFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|CoralSelectFormatter.Options|Object)=} options
+* @return {Object}
+*/
+CoralSelectFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-select",
+		refName: "CoralSelectFormatter",
+		styles: {
+			maxWidth: "100%",
+			margin: "0"
+		},
+		onContextCreated: onContextCreated,
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		data: null
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralSelectFormatter;
+export { CoralSelectFormatter };

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

@@ -0,0 +1,12 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare class CoralToggleFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|any)|null): any;
+
+}
+
+export default CoralToggleFormatter;
+export { CoralToggleFormatter };

package/lib/formatters/es6/CoralToggleFormatter.js

@@ -0,0 +1,47 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+let onElementUpdated = function (element, ctx) {
+	element.checked = ctx.value;
+};
+
+/** To bound data and view of the current ef-toggle state
+* @private
+* @function
+* @param {*} e
+* @param {*} ctx
+*/
+let _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let CoralToggleFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+CoralToggleFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-toggle",
+		refName: "CoralToggleFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "checked-changed",
+		changeHandler: _changeHandler
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default CoralToggleFormatter;
+export { CoralToggleFormatter };

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

@@ -0,0 +1,14 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfDate from "../../tr-grid-util/es6/ElfDate.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+declare class DuplexEmeraldDateTimePickerFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|any)|null): any;
+
+}
+
+export default DuplexEmeraldDateTimePickerFormatter;
+export { DuplexEmeraldDateTimePickerFormatter };

package/lib/formatters/es6/DuplexEmeraldDateTimePickerFormatter.js

@@ -0,0 +1,119 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfDate from "../../tr-grid-util/es6/ElfDate.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+let onDuplexContextCreated = function (ctx, options) {
+	ctx.ElfDate = ElfDate;
+	ctx.fromField = options.from;
+	ctx.toField = options.to;
+};
+
+let _onElementUpdated = function (element, ctx) {
+	let from = ctx.ElfDate.from(ctx.getData(ctx.fromField));
+	let to = ctx.ElfDate.from(ctx.getData(ctx.toField));
+
+	if(!ctx.ElfDate.equal(element.from, from)) {
+		element.from = from;
+	}
+	if(!ctx.ElfDate.equal(element.to, to)) {
+		element.to = to;
+	}
+};
+
+let _onElfV4ElementUpdated = function (element, ctx) {
+	let from = ctx.ElfDate.from(ctx.getData(ctx.fromField));
+	let to = ctx.ElfDate.from(ctx.getData(ctx.toField));
+
+	element.values = [ctx.ElfDate.toYMD(from), ctx.ElfDate.toYMD(to)];
+};
+
+let _onFieldFromBound = function (e, ctx) {
+	let from = ctx.ElfDate.from(e.currentTarget.from);
+	let currentData = ctx.getData(ctx.fromField);
+	if (!ctx.ElfDate.equal(currentData, from)) {
+		ctx.setData(ctx.fromField, from);
+	}
+};
+
+let _onFieldToBound = function (e, ctx) {
+	let to = ctx.ElfDate.from(e.currentTarget.to);
+	if (to == null) {
+		return;
+	}
+	let currentData = ctx.getData(ctx.toField);
+	if (!ctx.ElfDate.equal(currentData, to)) {
+		ctx.setData(ctx.toField, to);
+	}
+};
+
+/** @private
+* @param {Object} e
+* @param {Object} ctx
+*/
+let _onElfV4ValueChanged = function (e, ctx) {
+	let dates = e.currentTarget.values;
+	let from = null;
+	let to = null;
+	if(typeof dates === "string") {
+		dates = dates.split(",");
+	}
+	if(Array.isArray(dates)) {
+		from = ctx.ElfDate.from(dates[0]);
+		to = ctx.ElfDate.from(dates[1]);
+	}
+	if(!from || !to) {
+		return;
+	}
+
+	let currentData = ctx.getData(ctx.fromField);
+	if (!ctx.ElfDate.equal(currentData, from)) {
+		ctx.setData(ctx.fromField, from);
+	}
+
+	currentData = ctx.getData(ctx.toField);
+	if (!ctx.ElfDate.equal(currentData, to)) {
+		ctx.setData(ctx.toField, to);
+	}
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let DuplexEmeraldDateTimePickerFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+DuplexEmeraldDateTimePickerFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-datetime-picker",
+		refName: "DuplexEmeraldDateTimePickerFormatter",
+		onContextCreated: onDuplexContextCreated,
+		onElementUpdated: _onElementUpdated,
+		attributes: {
+			range: "",
+			duplex: ""
+		},
+		styles: {
+			margin: "0"
+		}
+	};
+
+	if(ElfUtil.getElfVersion() >= 4) {
+		defaultOpt.onElementUpdated = _onElfV4ElementUpdated;
+		defaultOpt.changeHook = "value-changed";
+		defaultOpt.changeHandler = _onElfV4ValueChanged;
+	} else {
+		defaultOpt.changeHooks = ["from-changed", "to-changed"];
+		defaultOpt.changeHandlers = [_onFieldFromBound, _onFieldToBound];
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+
+export default DuplexEmeraldDateTimePickerFormatter;
+export { DuplexEmeraldDateTimePickerFormatter };

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

@@ -0,0 +1,20 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+declare namespace EFButtonFormatter {
+
+    type Options = {
+        label?: string|null
+    };
+
+}
+
+declare class EFButtonFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|EFButtonFormatter.Options|any)|null): any;
+
+}
+
+export default EFButtonFormatter;
+export { EFButtonFormatter };