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

package/lib/formatters/es6/NumericInputFormatter.js

@@ -0,0 +1,64 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+let onElementUpdated = function (element, ctx) {
+	element.value = ctx.value;
+};
+
+let onElementCreated = function (element, ctx) {
+	element.setAttribute("type", "number");
+};
+
+let _changeHandler = function (e, ctx) {
+	ctx.value = e.detail.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+let _inputChangeHandler = function (e, ctx) {
+	ctx.value = +e.currentTarget.value;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let NumericInputFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+NumericInputFormatter.create = function (options) {
+	let tn = "input";
+	if(ElfUtil.hasComponent("ef-number-field")) {
+		tn = "ef-number-field";
+	} else if(ElfUtil.hasComponent("ef-input")) {
+		tn = "ef-input";
+	}
+
+	let defaultOpt = {
+		tagName: tn,
+		refName: "NumericInputFormatter",
+		onElementUpdated: onElementUpdated,
+		changeHook: "value-changed",
+		changeHandler: _changeHandler,
+		styles: {
+			margin: "0",
+			width: "100%"
+		}
+	};
+	if(tn !== "ef-number-field") {
+		defaultOpt.onElementCreated = onElementCreated;
+		if(tn === "input") {
+			defaultOpt.changeHook = "change";
+			defaultOpt.changeHandler = _inputChangeHandler;
+		}
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default NumericInputFormatter;
+export { NumericInputFormatter };

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

@@ -0,0 +1,25 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import {PercentBar} from "../../tr-grid-util/es6/PercentBar.js";
+
+declare namespace PercentBarFormatter {
+
+    type Options = {
+        alignment?: string|null,
+        movementColor?: boolean|null,
+        barColor?: string|null,
+        textHidden?: boolean|null,
+        textWidth?: (number|string)|null
+    };
+
+}
+
+declare class PercentBarFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|PercentBarFormatter.Options|any)|null): any;
+
+}
+
+export default PercentBarFormatter;
+export { PercentBarFormatter };

package/lib/formatters/es6/PercentBarFormatter.js

@@ -0,0 +1,62 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import {PercentBar} from "../../tr-grid-util/es6/PercentBar.js";
+
+/** @typedef {Object} PercentBarFormatter~Options
+* @description PercentBarFormatter options
+* @property {string=} alignment="left" Possible values are l, r, c, left, right, and center
+* @property {boolean=} movementColor=true If disabled, percent bar will not use up and down colors
+* @property {string=} barColor="" Custom color for bar element. This will override the movementColor
+* @property {boolean=} textHidden=false If enabled, text label will not be shown
+* @property {(number|string)=} textWidth=56 Number of pixel or percentage width
+*/
+
+/** Due to stamping technique is used in the FormatterBuilder, we have to store the constructor in context object
+* @private
+* @param {Object} ctx Context object
+* @param {Object} options User options
+*/
+let onContextCreated = function (ctx, options) {
+	ctx.PercentBar = PercentBar;
+};
+
+/** @private
+* @param {Element} element
+* @param {Object} ctx Context object
+*/
+let onElementCreated = function (element, ctx) {
+	element["_percentBar"] = new ctx.PercentBar(element, ctx);
+};
+
+/** @private
+* @param {Element} element
+* @param {Object} ctx Context object
+*/
+let onElementUpdated = function (element, ctx) {
+	element["_percentBar"].setValue(ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let PercentBarFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|PercentBarFormatter.Options|Object)=} options
+* @return {Object}
+*/
+PercentBarFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "div",
+		refName: "PercentBarFormatter",
+		onContextCreated: onContextCreated,
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default PercentBarFormatter;
+export { PercentBarFormatter };

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

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

package/lib/formatters/es6/SimpleImageFormatter.js

@@ -0,0 +1,64 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} SimpleImageFormatter~Options
+* @description FormatterBuilder options
+* @property {(string|number)=} height
+* @property {(string|number)=} width
+*/
+
+/** @private
+* @function
+* @param {Element} element
+* @param {Object} ctx
+*/
+let onElementUpdated = function (element, ctx) {
+	element.src = ctx.value;
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let SimpleImageFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|SimpleImageFormatter.Options|Object)=} options
+* @return {Object}
+*/
+SimpleImageFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "img",
+		refName: "SimpleImageFormatter",
+		styles: {
+			position: "absolute",
+			maxHeight: "100%",
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0,
+			margin: "auto"
+		},
+		onElementUpdated: onElementUpdated,
+		height: "auto",
+		width: "auto"
+	};
+
+	defaultOpt.attributes = {
+		height: defaultOpt.height,
+		width: defaultOpt.width
+	};
+	if (options) {
+		if (options.height != null) {
+			defaultOpt.attributes.height = options.height;
+		}
+		if (options.width != null) {
+			defaultOpt.attributes.width = options.width;
+		}
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default SimpleImageFormatter;
+export { SimpleImageFormatter };

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

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

package/lib/formatters/es6/SimpleInputFormatter.js

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

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

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

package/lib/formatters/es6/SimpleLinkFormatter.js

@@ -0,0 +1,48 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+/** @typedef {Object} SimpleLinkFormatter~Options
+* @description FormatterBuilder options
+* @property {string=} label
+* @property {string=} urlField Field used for href attributed
+*/
+
+/** @private
+* @param {Element} element
+* @param {Object} ctx Context object
+*/
+let onElementUpdated = function (element, ctx) {
+	let label = typeof ctx.label === "string" ? ctx.label : ctx.value;
+	element.textContent = label;
+	if(ctx.urlField) {
+		element.setAttribute("href", ctx.getData(ctx.urlField));
+	}
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let SimpleLinkFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|SimpleLinkFormatter.Options|Object)=} options
+* @return {Object}
+*/
+SimpleLinkFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "a",
+		refName: "SimpleLinkFormatter",
+		onElementUpdated: onElementUpdated,
+		attributes: {
+			class: 'text'
+		},
+		label: null,
+		urlField: null
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default SimpleLinkFormatter;
+export { SimpleLinkFormatter };

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

@@ -0,0 +1,23 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import TickCodes from "../../tr-grid-util/es6/TickCodes.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+declare namespace SimpleTickerFormatter {
+
+    type Options = {
+        positiveColor?: string|null,
+        negativeColor?: string|null
+    };
+
+}
+
+declare class SimpleTickerFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|SimpleTickerFormatter.Options|any)|null): any;
+
+}
+
+export default SimpleTickerFormatter;
+export { SimpleTickerFormatter };

package/lib/formatters/es6/SimpleTickerFormatter.js

@@ -0,0 +1,66 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import TickCodes from "../../tr-grid-util/es6/TickCodes.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+/** @typedef {Object} SimpleTickerFormatter~Options
+* @description FormatterBuilder options
+* @private
+* @property {string=} positiveColor Color code for up icon
+* @property {string=} negativeColor Color code for down icon
+*/
+
+let onContextCreated = function (ctx, options) {
+	if(ElfUtil.getElfVersion() > 3) {
+		ctx._upIcon = "arrow-up-fill";
+		ctx._downIcon = "arrow-down-fill";
+	} else {
+		ctx._upIcon = "arrow-up";
+		ctx._downIcon = "arrow-down";
+	}
+	ctx.TickCodes = TickCodes;
+};
+
+let onElementUpdated = function (element, ctx) {
+	let value = ctx.TickCodes[ctx.value];
+
+	if (value === 1) {
+		element.icon = ctx._upIcon;
+		element.style.color = ctx.positiveColor;
+	} else if (value === -1) {
+		element.icon = ctx._downIcon;
+		element.style.color = ctx.negativeColor;
+	} else {
+		element.icon = "";
+	}
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let SimpleTickerFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|SimpleTickerFormatter~Options|Object)=} options
+* @return {Object}
+*/
+SimpleTickerFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "ef-icon",
+		refName: "SimpleTickerFormatter",
+		onContextCreated: onContextCreated,
+		onElementUpdated: onElementUpdated,
+		styles: {
+			cursor: "default",
+			verticalAlign: "middle"
+		},
+		positiveColor: "#39C46E",
+		negativeColor: "#F5475B"
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default SimpleTickerFormatter;
+export { SimpleTickerFormatter };

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

@@ -0,0 +1,22 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+declare namespace SimpleToggleFormatter {
+
+    type Options = {
+        element1?: (string|Element)|null,
+        element2?: (string|Element)|null
+    };
+
+}
+
+declare class SimpleToggleFormatter {
+
+    constructor(options?: any);
+
+    public static create(options?: (FormatterBuilder.Options|SimpleToggleFormatter.Options|any)|null): any;
+
+}
+
+export default SimpleToggleFormatter;
+export { SimpleToggleFormatter };

package/lib/formatters/es6/SimpleToggleFormatter.js

@@ -0,0 +1,132 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+
+/** @typedef {Object} SimpleToggleFormatter~Options
+* @description FormatterBuilder options
+* @property {(string|Element)=} element1
+* @property {(string|Element)=} element2
+*/
+
+/** @private
+* @function
+* @param {Node} n
+* @return {Node}
+*/
+let _provideCloneMethod = function (n) {
+	if (n && n.cloneNode) {
+		return n;
+	} else { // Workaround: custom element may not have cloneNode() method
+		let span = document.createElement("span");
+		if (n) {
+			span.appendChild(n);
+		}
+		return span;
+	}
+};
+
+/** @private
+* @function
+* @param {string=} icon
+* @return {Element}
+*/
+let _createCoralButton = function (icon) {
+	let btn = document.createElement("ef-button");
+	let styles = "margin: 0;";
+	if(ElfUtil.isHaloTheme()) {
+		styles += " min-width: 26px;";
+	}
+	btn.setAttribute("style", styles);
+	if (icon) {
+		btn.setAttribute("icon", icon);
+	}
+	return btn;
+};
+
+/** @private
+* @function
+* @param {*} n
+* @return {Element}
+*/
+let _convertToElement = function (n) {
+	if (n) {
+		if (typeof n === "string") {
+			let div = document.createElement("div");
+			div.innerHTML = n.trim();
+			return div.firstChild;
+		}
+		return n;
+	}
+	return null;
+};
+
+let onContextCreated = function (ctx, options) {
+	ctx.element1 = _provideCloneMethod(ctx.element1);
+	ctx.element2 = _provideCloneMethod(ctx.element2);
+};
+
+let onElementCreated = function (element, ctx) {
+	element._element1 = ctx.element1.cloneNode(true);
+	element._element2 = ctx.element2.cloneNode(true);
+};
+
+let onElementUpdated = function (element, ctx) {
+	let prevChecked = element.firstChild ? element.firstChild === element._element1 : NaN;
+	let checked = ctx.value;
+	if (checked !== prevChecked) {
+		if (element.firstChild) {
+			element.removeChild(element.firstChild);
+		}
+		element.appendChild(checked ? element._element1 : element._element2);
+	}
+};
+
+/** To uncheck and toggle data of the previous focus radio button
+* @private
+* @param {*} e
+* @param {*} ctx
+*/
+let onClick = function (e, ctx) {
+	let checked = ctx.getData(ctx.field);
+	ctx.value = !checked;
+	ctx.setData(ctx.field, ctx.value);
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let SimpleToggleFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|SimpleToggleFormatter.Options|Object)=} options
+* @return {Object}
+*/
+SimpleToggleFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "div",
+		refName: "SimpleToggleFormatter",
+		onContextCreated: onContextCreated,
+		onElementCreated: onElementCreated,
+		onElementUpdated: onElementUpdated,
+		events: {
+			"click": onClick
+		},
+		element1: _createCoralButton("tick"),
+		element2: _createCoralButton()
+	};
+
+	if (options) {
+		if (options.element1) {
+			options.element1 = _convertToElement(options.element1);
+		}
+		if (options.element2) {
+			options.element2 = _convertToElement(options.element2);
+		}
+	}
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default SimpleToggleFormatter;
+export { SimpleToggleFormatter };

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

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

package/lib/formatters/es6/TextFormatter.js

@@ -0,0 +1,35 @@
+import FormatterBuilder from "./FormatterBuilder.js";
+
+
+let onElementUpdated = function (element, ctx) {
+	element.textContent = ctx.value;
+};
+
+let onElementCreated = function (element, ctx) {
+	element.classList.add("text");
+};
+
+/** @constructor
+* @param {*=} options
+*/
+let TextFormatter = function (options) {
+
+};
+
+/** @public
+* @param {(FormatterBuilder.Options|Object)=} options
+* @return {Object}
+*/
+TextFormatter.create = function (options) {
+	let defaultOpt = {
+		tagName: "div",
+		refName: "TextFormatter",
+		onElementUpdated: onElementUpdated,
+		onElementCreated: onElementCreated
+	};
+
+	return FormatterBuilder.create(options, defaultOpt);
+};
+
+export default TextFormatter;
+export { TextFormatter };