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

package/lib/tr-grid-filter-input/es6/FilterInput.js

@@ -0,0 +1,1027 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import {ElfDate} from '../../tr-grid-util/es6/ElfDate.js';
+import { CoralItems } from '../../tr-grid-util/es6/CoralItems.js';
+
+/** @typedef {Object} FilterInputPlugin~GridColumn
+* @description FilterInputPlugin options available in each individual grid's column
+* @property {FilterInputPlugin~ColumnOptions=} filterInput=null
+*/
+
+/** @typedef {(Object|boolean)} FilterInputPlugin~ColumnOptions
+* @description FilterInputPlugin options available in "filterInput" property on grid's column
+* @property {Function=} defaultLogic=null Logic for filtering
+* @property {Function=} filterLogic=null Alias to `defaultLogic`
+* @property {boolean=} disabled=false Disable UI
+* @property {string=} placeholder="" Placeholder text inside the input
+* @property {string=} type="text" Type of UI. Available types are "number", "multiselect" ,"select", "dropdown", "date"
+* @property {Array=} entries Entries of dropdown filters when type is "select"
+* @property {*=} defaultValue Default value of input filter
+* @property {string=} trigger="keyup" Available types of trigger are `false | ""` (no trigger) , `"keyup"` (default) , `"enter"` (on enter key *only available for text type)
+*/
+
+/** @typedef {Object} FilterInputPlugin~Options
+* @description FilterInputPlugin options available in main grid configuration under `filterInput` property
+* @property {Function=} inputCreated=null Handler executed after filter input is created
+* @property {string=} trigger="keyup" Available types of trigger are `false | ""` (no trigger) , `"keyup"` (default) , `"enter"` (on enter key *only available for text type)
+*/
+
+/** @callback {Function} FilterInputPlugin~FilterLogic
+* @description Logic used to filter in/out on each row
+* @property {Object} e Object contains all related information provided by the extension
+* @property {string=} e.inputText Text for filter
+* @property {Element} e.input Input element
+* @property {string} e.field Field of the column being filtered
+* @property {Object} rowData Row Data of the filtered row
+*/
+
+/** @event FilterInputPlugin#inputCreated
+* @description `inputCreated` fired on each creation of filter input
+* @type {Object}
+* @property {Element} input Input element
+* @property {Element} cell
+* @property {number} colIndex
+* @property {number|null} colId
+* @property {number} rowIndex
+* @property {Object} grid core grid object
+* @property {Object} section Section(ILayoutGrid) contains all of the filter inputs
+*/
+
+/** @private
+* @param {string} str
+* @return {string}
+*/
+function convertToLowerCase(str) {
+	if(typeof str === "string") {
+		return str.toLowerCase();
+	}
+	return "";
+}
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {FilterInputPlugin~Options=} options
+*/
+var FilterInputPlugin = function (options) {
+	this._onInputChanged = this._onInputChanged.bind(this);
+	this._onOpenedChanged = this._onOpenedChanged.bind(this);
+	this._onDateChanged = this._onDateChanged.bind(this);
+	this._onPostDataSourceChanged = this._onPostDataSourceChanged.bind(this);
+	this._onColumnAdded = this._onColumnAdded.bind(this);
+	this._onRowFilteringRetrieved = this._onRowFilteringRetrieved.bind(this);
+	this._onRowFilteringFailed = this._onRowFilteringFailed.bind(this);
+	this._onColumnFilterFailed = this._onColumnFilterFailed.bind(this);
+	this.refresh = this.refresh.bind(this);
+	this._updateUIs = this._updateUIs.bind(this);
+
+	this._hosts = [];
+	if(options) {
+		this.config({"filterInput": options});
+	}
+};
+Ext.inherits(FilterInputPlugin, GridPlugin);
+
+/** Filter Processor used to perform actual filtering (This extension provides only UIs).
+* @type {*}
+* @private
+*/
+FilterInputPlugin.prototype._filterProc = null;
+/** @type {Object}
+* @private
+*/
+FilterInputPlugin.prototype._gridConfig = null;
+
+/** Array of grid sections
+* @type {Array.<Object>}
+* @private
+*/
+FilterInputPlugin.prototype._inputSects = null;
+
+/** @type {number}
+* @private
+*/
+FilterInputPlugin.prototype._refreshTimer = 0;
+/** @type {number}
+* @private
+*/
+FilterInputPlugin.prototype._uiTimer = 0;
+/** @type {boolean}
+* @private
+*/
+FilterInputPlugin.prototype._freezeInputValue = false;
+/** @type {string|boolean}
+* @private
+*/
+FilterInputPlugin.prototype._inputTrigger = "keyup";
+
+/** @public
+* @return {string}
+*/
+FilterInputPlugin.prototype.getName = function () {
+	return "FilterInputPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+FilterInputPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	host.listen("postDataSourceChanged", this._onPostDataSourceChanged);
+	host.listen("columnAdded", this._onColumnAdded);
+
+	this.config(options);
+	// In case of lazy loading
+	// var title = host.getSection("title");
+	// if(title) {
+	// 	this._onPostDataSourceChanged();
+	// }
+};
+/** @public
+* @param {Object} host core grid object
+*/
+FilterInputPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	host.unlisten("postDataSourceChanged", this._onPostDataSourceChanged);
+	this._hosts.splice(at, 1);
+	if(this._inputSects && at < this._inputSects.length) {
+		this._inputSects.splice(at, 1);
+	}
+	if(!this._hosts.length) {
+		this._compositeGrid = this._realTimeGrid = this._filterBuilder = null;
+		this._filterProc = this._gridConfig = this._inputSects = null;
+
+		if(this._refreshTimer) {
+			clearTimeout(this._refreshTimer);
+			this._refreshTimer = 0;
+		}
+		if(this._uiTimer) {
+			clearTimeout(this._uiTimer);
+			this._uiTimer = 0;
+		}
+	}
+};
+
+/** Prevent built-in config
+* @public
+* @ignore
+* @param {string} optionName
+* @param {Object} options
+* @return {*}
+*/
+FilterInputPlugin.prototype.beforeProcessOption = function(optionName, options) {
+	if (optionName === 'filterRow' || optionName === 'FilterRow') {
+		return false; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+/** @private
+* @param {string} optionName
+* @param {Object} options
+*/
+FilterInputPlugin.prototype._afterInit = function() {
+	// Retrieve RowFilteringPlugin is async operation
+	// onPostDataSourceChange has logic to apply default filter, which need to be done after RowFilteringPlugin is loaded
+	this._requestPlugin(this._hosts[0], "RowFilteringPlugin", this._gridConfig)
+		.then(this._onRowFilteringRetrieved)
+		.catch(this._onRowFilteringFailed)
+		.finally(this._onPostDataSourceChanged);
+};
+
+/** @public
+* @param {Object=} options
+*/
+FilterInputPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+	this._gridConfig = options; // For loading dependency
+
+	var filterInputOptions = options["filterInput"];
+	this.addListener(filterInputOptions, "inputCreated");
+
+	if(filterInputOptions){
+		if(filterInputOptions["trigger"] != null){
+			this._inputTrigger = filterInputOptions["trigger"];
+		}
+	}
+
+	var columns = options["columns"];
+	var len = columns ? columns.length : 0;
+	for(var c = 0; c < len; ++c) {
+		this._retrieveColumnOption(c, columns[c]);
+	}
+};
+
+/** Get a current state of grid and extension config
+ * @public
+ * @param {Object=} out_obj
+ * @returns {!Object}
+ */
+FilterInputPlugin.prototype.getConfigObject = function (out_obj) {
+	var obj = out_obj || {};
+
+	var columns = obj.columns;
+	if (!columns) {
+		columns = obj.columns = [];
+	}
+
+	var len = this.getColumnCount();
+	for(var i = 0; i < len; ++i) {
+		var col = columns[i];
+		if (!col) {
+			col = columns[i] = {};
+		}
+
+		var filterInput = col.filterInput = {};
+
+		var opt = this._getExtColumnOption(i);
+
+		if (!opt) { continue; }
+		if (opt.disabled != null) {
+			filterInput.disabled = opt.disabled;
+		}
+		if (opt.placeholder != null) {
+			filterInput.placeholder = opt.placeholder;
+		}
+		if (opt.type != null) {
+			filterInput.type = opt.type;
+		}
+		if (opt.entries != null) {
+			filterInput.entries = opt.entries;
+		}
+
+		if (opt.defaultValue != null) {
+			filterInput.defaultValue = opt.defaultValue;
+		}
+
+		if (opt.trigger != null) {
+			filterInput.trigger = opt.trigger;
+		}
+	}
+	return obj;
+};
+
+/** @private
+* @param {*} proc Filter Processor
+*/
+FilterInputPlugin.prototype._onRowFilteringRetrieved = function (proc) {
+	this._gridConfig = null;
+	if(proc) {
+		this._filterProc = proc;
+		this.refresh();
+	}
+};
+/** @private
+* @param {*} proc Filter Processor
+* @returns {*}
+*/
+FilterInputPlugin.prototype._onRowFilteringFailed = function () {
+	return this._requestPlugin(this._hosts[0], "ColumnFilterPlugin", this._gridConfig)
+		.then(this._onRowFilteringRetrieved)
+		.catch(this._onColumnFilterFailed); // Gracefully resolve if we fail this time
+};
+/** @private */
+FilterInputPlugin.prototype._onColumnFilterFailed = function () {
+	this._gridConfig = null;
+};
+
+/** @private
+* @param {Object=} e
+*/
+FilterInputPlugin.prototype._onColumnAdded = function (e) {
+	if(e.context && e.colIndex != null) {
+		this._retrieveColumnOption(e.colIndex, e.context);
+	}
+	this._requestUIUpdate();
+};
+
+/** @private */
+FilterInputPlugin.prototype._requestUIUpdate = function () {
+	if(!this._uiTimer) { // HACK: To wait for other plugins receive columnAdded and avoid removing the wrong column filter
+		this._uiTimer = setTimeout(this._updateUIs, 50);
+	}
+};
+/** @private */
+FilterInputPlugin.prototype._updateUIs = function () {
+	this._uiTimer = 0;
+	if(this._inputSects) {
+		var len = this._inputSects.length;
+		for(var i = 0; i < len; ++i) {
+			this._createColumnInputs(this._inputSects[i], this._hosts[i]);
+		}
+	}
+};
+/** @private
+* @param {Object=} e
+*/
+FilterInputPlugin.prototype._onPostDataSourceChanged = function (e) {
+	if(this._inputSects) { // TODO: Handle multiple hosts
+		return;
+	}
+
+	var len = this._hosts.length;
+	if (!len) {
+		return;
+	}
+
+	this._inputSects = [];
+
+	var rowHeight = window.getComputedStyle(this._hosts[0].getElement()).getPropertyValue('--grid-row-height'); // TODO: This should be retrieved from core grid
+	if (rowHeight) {
+		rowHeight = parseInt(rowHeight, 10);
+	}
+
+	var host;
+
+	for(var i = 0; i < len; ++i) {
+		host = this._hosts[i];
+		var titles = host.getAllSections("title");
+		var lastTitle = titles[titles.length - 1];
+		var at = lastTitle ? lastTitle.getIndex() + 1 : 0;
+		var section = this._inputSects[i] = host.addSectionAt(at, "title", "filterInputs");
+
+		if (rowHeight) {
+			section.setDefaultRowHeight(rowHeight);
+		}
+
+		section.enableClass("filter-inputs");
+		section.addRow(1);
+	}
+
+	if(!host.getVScrollStartIndex || host.getVScrollStartIndex() >= 0) {
+		host.freezeSection(at);
+	}
+
+	this._requestUIUpdate();
+};
+
+/** @private
+* @param {Object=} e
+*/
+FilterInputPlugin.prototype._onDateChanged = function (e) {
+	var host = this.getRelativeGrid(e);
+
+	if(host) {
+		var pos = host.getRelativePosition(e);
+		var colIndex = pos.colIndex;
+		var dateObj = ElfDate.getDate(e.detail) || e.target.value;
+		// TODO: Date object should be used for filtering instead of string
+		var dateStr = dateObj ? dateObj.toDateString().substr(4) : "";
+		this.filterColumn(colIndex, dateStr);
+	}
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {Object} host core grid object
+*/
+FilterInputPlugin.prototype._createColumnInputs = function(section, host) {
+	var colCount = section.getColumnCount();
+
+	for(var c = 0; c < colCount; ++c) {
+		var cell = section.getCell(c, 0);
+		var elem = cell.getContent();
+		if(elem) {
+			continue;
+		}
+		cell.enableClass("no-sort"); // Prevent sorting
+		var colOpt = this._newExtColumnOption(c);
+		if(colOpt["disabled"]) {
+			continue;
+		}
+		elem = this._createFilterUI(colOpt);
+
+		cell.setContent(elem);
+
+		var arg = colOpt._filterArguments = {};
+		arg.input = elem;
+		arg.field = this._getField(c);
+		arg.cell = cell;
+		arg.grid = host;
+
+		var inputArgs = {
+			"input": elem,
+			"cell": cell,
+			"colIndex": c,
+			"rowIndex": 0,
+			"grid": host,
+			"section": section
+		};
+		if (this._compositeGrid) {
+			inputArgs['colId'] = this._compositeGrid.getColumnId(c);
+		}
+
+		this._dispatch("inputCreated", inputArgs);
+
+		// To apply default filter, colOpt._filterArguments needs to be initailzed
+		var defaultValue = colOpt.defaultValue;
+		if(defaultValue){
+			var elemType = convertToLowerCase(colOpt.type);
+			if(elemType === "date"){
+				var dateObj =  ElfDate.from(defaultValue);
+				defaultValue = dateObj ? dateObj.toDateString().substr(4) : "";
+			}
+
+			if(elemType === "multiselect"){
+				var textMap = FilterInputPlugin._createMapObject(defaultValue);
+				this.filterColumn(c, "", textMap);
+			} else {
+				this.filterColumn(c, defaultValue);
+			}
+		}
+	}
+};
+
+/** @type {Object.<string, string>=}
+* @private
+*/
+FilterInputPlugin._uiMap = {
+	number: "ef-input",
+	select: "ef-select",
+	multiselect: "ef-combo-box",
+	dropdown: "ef-select",
+	date: "ef-datetime-picker"
+};
+
+/** @private
+* @param {Object} colOpt
+* @return {!Element}
+*/
+FilterInputPlugin.prototype._createFilterUI = function(colOpt) {
+	var elemType = convertToLowerCase(colOpt.type);
+	var defaultValue = colOpt.defaultValue;
+	var elemTrigger = colOpt.trigger != null ? colOpt.trigger : this._inputTrigger;
+	var uiTag = FilterInputPlugin._uiMap[elemType] || "input";
+	if (uiTag == "ef-input") {
+		if(ElfUtil.hasComponent("ef-number-field")) {
+			uiTag = "ef-number-field";
+		}
+	} else if (uiTag == "input") {
+		if (ElfUtil.hasComponent("ef-search-field")) {
+			uiTag = "ef-search-field";
+		}
+	}
+
+	var elem = document.createElement(uiTag);
+	elem.className = "filter-input";
+	elem.style.width = "100%";
+	elem.style.margin = "0";
+	elem.setAttribute("aria-label", "column filtering");
+	var placeholder = colOpt["placeholder"];
+	if(placeholder) {
+		elem.setAttribute("placeholder", placeholder);
+	}
+
+	// Prevent trigering other actions when a user interacts with filter input
+	elem.addEventListener("keydown", FilterInputPlugin._stopPropagation, false);
+	elem.addEventListener("click", FilterInputPlugin._stopPropagation, false);
+
+	switch(uiTag) {
+	case "ef-input":
+		elem.setAttribute("type", "number");
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-number-field":
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-select":
+		elem.data = CoralItems.create(colOpt.entries);
+		elem.addEventListener("opened-changed", this._onOpenedChanged, false);
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-combo-box":
+		elem.multiple = true;
+		elem.data = CoralItems.create(colOpt.entries);
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onInputChanged, false);
+		}
+		break;
+	case "ef-datetime-picker":
+		if(elemTrigger != false && elemTrigger != ""){
+			elem.addEventListener("value-changed", this._onDateChanged, false);
+		}
+		break;
+	case "ef-search-field":
+		if(elemTrigger != false && elemTrigger != ""){
+			if(elemTrigger == "enter"){
+				var plugin = this;
+				elem.addEventListener("keyup", function(e){
+					if(e.key == "Enter"){
+						plugin._onInputChanged(e);
+					}
+				}, false);
+			} else {
+				elem.addEventListener("value-changed", this._onInputChanged, false);
+			}
+		}
+		break;
+	default:
+		elem.setAttribute("type", "search");
+		if(elemTrigger != false && elemTrigger != ""){
+			if(elemTrigger == "enter"){
+				var fip = this;
+				elem.addEventListener("keyup", function(e){
+					if(e.key == "Enter"){
+						fip._onInputChanged(e);
+					}
+				}, false);
+			} else {
+				elem.addEventListener("keyup", this._onInputChanged, false);
+			}
+		}
+		break;
+	}
+
+	if(defaultValue){
+		if(elemType === "multiselect"){
+			elem.values = defaultValue;
+		} else {
+			elem.value = defaultValue;
+		}
+	}
+
+	return elem;
+};
+
+/** @private
+* @param {number} colIndex
+* @return {Object}
+*/
+FilterInputPlugin.prototype._getExtColumnOption = function(colIndex) {
+	return this._getColumnOption(colIndex, "filterInputOption") || null;
+};
+/** @private
+* @param {number} colIndex
+* @return {!Object}
+*/
+FilterInputPlugin.prototype._newExtColumnOption = function(colIndex) {
+	var colData = this._newColumnData(colIndex);
+	var option = colData["filterInputOption"];
+	if(!option) {
+		option = colData["filterInputOption"] = {};
+		option._comparingLogic = FilterInputPlugin._containingFilter;
+	}
+	return option;
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} colDef
+*/
+FilterInputPlugin.prototype._retrieveColumnOption = function(colIndex, colDef) {
+	var filterOption = colDef ? colDef["filterInput"] : null;
+	if(filterOption != null) {
+		var option = this._newExtColumnOption(colIndex);
+		if(filterOption) {
+			var elemType = convertToLowerCase(filterOption["type"]);
+			if(elemType) {
+				option["type"] = elemType;
+			}
+
+			var defaultLogic = filterOption["filterLogic"] || filterOption["defaultLogic"];
+			if(defaultLogic != null) {
+				if(typeof defaultLogic === "function") {
+					option._comparingLogic = defaultLogic;
+				} else if(!defaultLogic) {
+					option._comparingLogic = null;
+				}
+			}
+			if(elemType === "multiselect" && option._comparingLogic === FilterInputPlugin._containingFilter){
+				option._comparingLogic = FilterInputPlugin._multiSelectionFilter;
+			}
+
+			var disabled = filterOption["disabled"];
+			if(disabled != null) {
+				option["disabled"] = disabled ? true : false;
+			}
+			var placeholder = filterOption["placeholder"];
+			if(typeof placeholder == "string") {
+				option["placeholder"] = placeholder;
+			}
+
+			var entries = filterOption["entries"];
+			if (Array.isArray(entries)) {
+				// Add Clear filter option
+				if(elemType === "select") {
+					entries.push({
+						label: 'No Filter',
+						value: 'No Filter'
+					});
+				}
+				option["entries"] = entries;
+			}
+
+			var defaultValue = filterOption["defaultValue"];
+			if(defaultValue) {
+				option["defaultValue"] = defaultValue;
+			}
+
+			var trigger = filterOption["trigger"];
+			if(typeof trigger == "string" || trigger == false) {
+				option["trigger"] = trigger;
+			}
+		} else {
+			option["disabled"] = true;
+		}
+	} else if(this._getExtColumnOption(colIndex)) {
+		// Reset everything to default
+		this._getColumnData(colIndex)["filterInputOption"] = null;
+	}
+};
+
+/** @public
+* @ignore
+* @param {number} colIndex
+* @param {string} text
+*/
+FilterInputPlugin.prototype.updateUI = function (colIndex, text) {
+	if (this._freezeInputValue) return;
+
+	var input = this.getColumnInput(colIndex);
+	if (input) {
+		input.value = text;
+	}
+
+	this._updateColumnOption(colIndex, text);
+};
+
+/** @private
+* @param {number} colIndex
+* @param {string|number} text
+* @param {Object=} textMap
+* @return {Object} Column option
+*/
+FilterInputPlugin.prototype._updateColumnOption = function (colIndex, text, textMap) {
+	var option = this._getExtColumnOption(colIndex);
+	if (!option) { return null; }
+
+	var inputText = "";
+	if (text || text === 0) {
+		inputText = typeof text !== "string" ? text + "" : text;
+	}
+	var arg = option._filterArguments;
+	if (arg) {
+		arg.inputText = option.inputText = inputText;
+		arg.lowerCasedText = inputText.toLowerCase();
+		arg.colIndex = colIndex;
+		if(textMap && !Object.keys(textMap).length){
+			textMap = null;
+		}
+		arg.textMap = option.textMap = textMap;
+	}
+	return option;
+};
+
+/** @public
+* @param {number} colIndex
+* @return {Element} Input element
+*/
+FilterInputPlugin.prototype.getColumnInput = function(colIndex) {
+	if(this._inputSects) {
+		var sect = this._inputSects[0]; // TODO: Handle multi-grids
+		var cell = sect.getCell(colIndex, 0);
+		if(cell && cell.getElement()) {
+			return cell.getContent();
+		}
+	}
+	return null;
+};
+
+/** Clear input UI and remove all filters from the specified column
+* @public
+* @param {(null|number)=} colIndex=null clear filter input at specific colIndex, if null then all input will be clear.
+*/
+FilterInputPlugin.prototype.removeColumnFilters = function (colIndex) {
+	var sect = this._inputSects && this._inputSects[0]; // TODO: Handle multi-grids
+	if (sect) {
+		if (colIndex != null) {
+			this.updateUI(colIndex, '');
+		} else {
+			var count = this.getColumnCount();
+			for (var index = 0; index < count; index++) {
+				this.updateUI(index, '');
+			}
+		}
+	}
+	this._freezeInputValue = true;
+	this._filterProc.removeColumnFilters(colIndex);
+	this._freezeInputValue = false;
+};
+
+/** Alias to {@link FilterInputPlugin#removeColumnFilters} Clear input UI and remove all filters from the specified column
+* @public
+* @function
+* @param {(null|number)=} colIndex=null clear filter input at specific colIndex, if null then all input will be clear.
+*/
+FilterInputPlugin.prototype.removeColumnFilter = FilterInputPlugin.prototype.removeColumnFilters;
+
+/** @public
+* @param {number} colIndex
+* @param {*} value
+*/
+FilterInputPlugin.prototype.setInputValue = function(colIndex, value) {
+	var inputElem = this.getColumnInput(colIndex);
+	if(!inputElem){
+		return;
+	}
+	var colOpt = this._getExtColumnOption(colIndex);
+	var elemType = convertToLowerCase(colOpt.type);
+
+	var dateValue;
+	if(elemType === "date"){
+		var dateObj =  ElfDate.from(value);
+		dateValue = dateObj ? dateObj.toDateString().substr(4) : "";
+	}
+
+	if(elemType === "multiselect"){
+		inputElem.values = value;
+		var textMap = FilterInputPlugin._createMapObject(value);
+		this.filterColumn(colIndex, "", textMap);
+	} else {
+		inputElem.value = value;
+		this.filterColumn(colIndex, elemType === "date" ? dateValue : value);
+	}
+
+};
+/** @public
+* @param {number} colIndex
+* @param {boolean=} disabled
+*/
+FilterInputPlugin.prototype.disableColumnInput = function(colIndex, disabled) {
+	var inputElem = this.getColumnInput(colIndex);
+	if(inputElem) {
+		disabled = disabled != null ? disabled : true;
+		if(disabled) {
+			inputElem.setAttribute("disabled", "");
+		} else {
+			inputElem.removeAttribute("disabled");
+		}
+	}
+};
+/** @public
+* @ignore
+* @param {number} colIndex
+* @return {Object}
+*/
+FilterInputPlugin.prototype.getColumnFilter = function(colIndex) {
+	var proc = this._filterProc;
+	if(proc){
+	 return proc.getColumnFilterState(colIndex);
+	}
+	return null;
+};
+/** @public
+* @ignore
+* @param {number} colIndex
+* @return {Function}
+*/
+FilterInputPlugin.prototype.getFilterLogic = function(colIndex) {
+	var option = this._getExtColumnOption(colIndex);
+	return option._comparingLogic;
+};
+/** Force filtering for every column
+* @public
+* @param {number=} delayMs=0 Set delay in millisecond to avoid repeatedly filtering
+*/
+FilterInputPlugin.prototype.refresh = function(delayMs) {
+	if(delayMs) {
+		if(!this._refreshTimer) {
+			this._refreshTimer = setTimeout(this.refresh, delayMs);
+		}
+		return;
+	}
+	this._refreshTimer = 0;
+
+	if(this._filterProc) {
+		this._filterProc.refresh();
+	}
+};
+/** Change filter logic or context
+* @public
+* @param {number} colIndex
+* @param {Function} func
+* @param {*=} ctx Context object that will be provided as the first parameter of the filter function
+*/
+FilterInputPlugin.prototype.setFilterLogic = function(colIndex, func, ctx) {
+	if(colIndex < 0) { return; }
+
+	var option = this._newExtColumnOption(colIndex);
+	var inputText = option.inputText;
+	var textMap = option.textMap;
+
+	if(func) {
+		if(ctx != null) {
+			option._filterArguments = ctx; // WARNING: This replaces all existing argument
+		}
+	} else {
+		func = null;
+	}
+	option._comparingLogic = func;
+	if(inputText || textMap) {
+		this.filterColumn(colIndex, inputText, textMap);
+	}
+};
+
+/** Force filtering for a single column by changing filtering text
+* @public
+* @param {number} colIndex
+* @param {string} text
+* @param {Object=} textMap
+*/
+FilterInputPlugin.prototype.filterColumn = function (colIndex, text, textMap) {
+	var option = this._updateColumnOption(colIndex, text, textMap);
+	if (!option) { return; }
+
+	// This is because we need to toggle the icon
+	this._setColumnFilter(colIndex, option);
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} filterOptions
+*/
+FilterInputPlugin.prototype._setColumnFilter = function(colIndex, filterOptions) {
+	var proc = this._filterProc;
+	if (proc) {
+		this._freezeInputValue = true;
+		if (proc.hasColumnFilter()) { // TODO: There should be a way to get column filters
+			proc.removeColumnFilters(colIndex); // TODO: this is slow
+		}
+		var hasFilterContent = filterOptions.inputText || filterOptions.textMap;
+		if(filterOptions._comparingLogic && hasFilterContent) {
+			var columnFilter = filterOptions._columnFilter;
+			if(!columnFilter) {
+				// The given rowData for the filter function has already been converted by RowFiltering Extension
+				columnFilter = filterOptions._columnFilter = FilterInputPlugin._compareRow.bind(null, filterOptions);
+			}
+
+			proc.addColumnFilter(colIndex, columnFilter);
+		}
+		this._freezeInputValue = false;
+	}
+};
+
+
+/** @private
+* @param {Object=} e
+*/
+FilterInputPlugin.prototype._onInputChanged = function (e) {
+	FilterInputPlugin._stopPropagation(e);
+
+	var host = this.getRelativeGrid(e);
+	if(!host) { return; }
+	var pos = host.getRelativePosition(e);
+	var colIndex = pos.colIndex;
+
+	var input = /** @type{Element} */(e.currentTarget);
+	var filterValue = input.value;
+	var textMap;
+
+	// If selected No Filter option - remove select filter
+	if (filterValue === "No Filter" && input.tagName.indexOf("SELECT") >= 0) {
+		filterValue = null;
+	}
+	else if(input.tagName.indexOf("COMBO-BOX") >= 0){
+		textMap = FilterInputPlugin._createMapObject(input.values);
+	}
+
+	this.filterColumn(colIndex, filterValue, textMap);
+};
+/** @private
+* @param {Object=} e
+* @description WORKAROUND:: set pointer events none to ef-select when options popup opened.
+* this will make ef-select can close popup when click at ef-select
+*/
+FilterInputPlugin.prototype._onOpenedChanged = function (e) {
+	if (e.detail.value) { //open
+		e.currentTarget.style.pointerEvents = "none";
+	} else { //close
+		var ect = e.currentTarget;
+		setTimeout(function(){
+			ect.style.pointerEvents = "";
+		});
+	}
+};
+
+/** @private
+* @param {Object=} e
+*/
+FilterInputPlugin._stopPropagation = function (e) {
+	if(e) {
+		e.stopPropagation();
+	}
+};
+
+/** @private
+* @function
+* @param {Object} filterOptions
+* @param {Object} rowData The given rowData has already been converted by RowFiltering Extension
+* @param {string|number} rid
+* @return {boolean}
+*/
+FilterInputPlugin._compareRow = function(filterOptions, rowData, rid) {
+	return filterOptions._comparingLogic(filterOptions._filterArguments, rowData);
+};
+
+/** @private
+* @function
+* @param {Array<string|number>} ary
+* @return {Object}
+*/
+FilterInputPlugin._createMapObject = function(ary) {
+	var textMap = {};
+	if(ary){
+		var count  = ary.length;
+		for(var i = 0; i < count; i++){
+			var key = ary[i];
+			if(key == null || key === ""){
+				continue;
+			}
+			var str = FilterInputPlugin._transformToLowercaseString(key);
+			textMap[str] = true;
+		}
+	}
+	return textMap;
+};
+
+/** @private
+* @function
+* @param {Object} data
+* @return {string}
+*/
+FilterInputPlugin._transformToLowercaseString = function(data) {
+	var dataStr = "";
+	if(typeof data != "string") {
+		if(data instanceof Date) {
+			dataStr = data.toDateString().toLowerCase();
+		} else {
+			dataStr = (data + "").toLocaleLowerCase();
+		}
+	} else if(data) {
+		dataStr = data.toLowerCase();
+	}
+	return dataStr;
+};
+
+/** Default Filter Logic
+* @private
+* @function
+* @param {Object} e Filter argument
+* @param {Object} rowData
+* @return {boolean}
+*/
+FilterInputPlugin._containingFilter = function(e, rowData) {
+	var str = e.lowerCasedText || e.inputText;
+	var eventType = e.input && e.input.type;
+	if(str) {
+		var data = rowData[e.field];
+		if(data != null) {
+			var dataStr =  FilterInputPlugin._transformToLowercaseString(data);
+			if (dataStr) {
+				if (eventType === "number") {
+					// Custom check if type is number
+					return Number(dataStr) === Number(str);
+				} else {
+					// Normal check if type is not a number
+					return dataStr.indexOf(str) >= 0;
+				}
+			}
+		}
+		return false;
+	}
+	return true;
+};
+
+/** Filter Logic for multi selection input
+* @private
+* @function
+* @param {Object} e Filter argument
+* @param {Object} rowData
+* @return {boolean}
+*/
+FilterInputPlugin._multiSelectionFilter = function(e, rowData) {
+	var inputMap = e.textMap;
+	if(inputMap) {
+		var data = rowData[e.field];
+		if(data != null) {
+			var dataStr =  FilterInputPlugin._transformToLowercaseString(data);
+			if (dataStr) {
+				return inputMap[dataStr] ? true : false;
+			}
+		}
+		return false;
+	}
+	return true;
+};
+
+
+
+export default FilterInputPlugin;
+export { FilterInputPlugin, FilterInputPlugin as FilterInput, FilterInputPlugin as FilterInputExtension };