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

package/lib/filter-dialog/lib/filter-dialog.js

@@ -0,0 +1,1160 @@
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { BasicElement, html } from "@refinitiv-ui/core";
+import "@refinitiv-ui/elements/button";
+import "@refinitiv-ui/elements/checkbox";
+import "@refinitiv-ui/elements/combo-box";
+import "@refinitiv-ui/elements/item";
+import "@refinitiv-ui/elements/panel";
+import "@refinitiv-ui/elements/radio-button";
+import "@refinitiv-ui/elements/button-bar";
+import "@refinitiv-ui/elements/search-field";
+import "@refinitiv-ui/elements/datetime-picker";
+
+import {Dom} from "../../tr-grid-util/es6/Dom.js";
+import Popup from "../../tr-grid-util/es6/Popup.js";
+import DateTime from "../../tr-grid-util/es6/DateTime.js";
+import { DATE_TIME, toDateTimeType } from "../../tr-grid-util/es6/FieldFormatter.js";
+import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import translation from "./locale/translation.js";
+import "./checkbox-list.js";
+
+/**
+ * @typedef {Object} FilterDialog~Config
+ * @property {Object} data Column data
+ * @property {string=} sortState "a" for ascending or "d" for descending
+ * @property {boolean=} sortUI=true Show Sort area
+ * @property {boolean=} filterUI=true Show Filter area
+ * @property {boolean=} advancedFilter=true Show advanced tab
+ * @property {boolean=} compactMode=false Force compact mode in dialog
+ * @property {string=} dateTimeFormat="dd-MM-yy" Specifies the string format for the date time picker in the filter dialog based on date-fns format, follow https://date-fns.org/v3.6.0/docs/format.
+ * @property {(string|boolean)=} blankValues=false Display a Blanks item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
+ * @property {Function=} filterChanged Filter changed handler
+ * @property {Function=} confirm Alias of filterChanged
+ * @property {Function=} cancel Alias of dialog cancel
+ * @property {Function=} sortChanged Sort changed handler
+*/
+
+/**
+ * @typedef {Object} FilterDialog~ComboBoxItem
+ * @property {string} label text of item
+ * @property {string} value value of item when item is selected
+*/
+
+/** @type {string}
+* @private
+* @constant
+*/
+const BLANKS = "(Blanks)";
+
+/** @type {number}
+* @private
+* @constant
+*/
+const ITEM_LIMIT = 500;
+/** @type {Array.<Array>}
+* @private
+* @constant
+*/
+const DEFAULT_FILTERS = [
+	["CONT", "Contains"], //0
+	["NCONT", "Does Not Contain"], // 1
+	["GT", "Is Greater Than"], // 2
+	["GTE", "Is Greater Than Or Equal To"], // 3
+	["LT", "Is Less Than"], // 4
+	["LTE", "Is Less Than Or Equal To"], // 5
+	["BEGIN", "Begins With"], // 6
+	["NBEGIN", "Does Not Begin With"], // 7
+	["END", "Ends With"], // 8
+	["NEND", "Does Not End With"], // 9
+	["EQ", "Equals"], // 10
+	["NEQ", "Does Not Equal"] // 11
+];
+/** @type {Array.<Array>}
+* @private
+* @constant
+*/
+const BLANK_FILTERS = [
+	["EQ_BLANK", "Equal To Blank Value"],
+	["NEQ_BLANK", "Does Not Equal To Blank Value"]
+];
+/** @type {Object.<string, boolean>}
+* @private
+* @constant
+*/
+const BLANK_VALUES = {
+	"EQ_BLANK": true,
+	"NEQ_BLANK": true
+};
+/** @type {Array.<Array>}
+* @private
+* @constant
+*/
+const DATE_FILTERS = [
+	["DT", "Date is"],
+	["DTB", "Date is Before"],
+	["DTA", "Date is After"]
+];
+/** @type {Array.<Array>}
+* @private
+* @constant
+*/
+const TEXT_FILTERS = [
+	DEFAULT_FILTERS[0],
+	DEFAULT_FILTERS[1],
+	DEFAULT_FILTERS[6],
+	DEFAULT_FILTERS[7],
+	DEFAULT_FILTERS[8],
+	DEFAULT_FILTERS[9],
+	DEFAULT_FILTERS[10],
+	DEFAULT_FILTERS[11]
+];
+/** @type {Array.<Array>}
+* @private
+* @constant
+*/
+const NUMBER_FILTERS = [
+	DEFAULT_FILTERS[2],
+	DEFAULT_FILTERS[3],
+	DEFAULT_FILTERS[4],
+	DEFAULT_FILTERS[5],
+	["NUMEQ", "Equals"],
+	["NUMNEQ", "Does Not Equal"]
+];
+
+/** @private
+* @function
+* @param {Array.<String>} options
+* @returns {FilterDialog~ComboBoxItem}
+*/
+let arrayToComboBoxItem = function(options) {
+	return {
+		label: options[1],
+		value: options[0]
+	};
+};
+/** @private
+* @function
+* @param {Array.<Array>} conditions
+* @returns {Array.<Object>}
+*/
+let createComboBoxData = function(conditions) {
+	return conditions.map(arrayToComboBoxItem);
+};
+
+/**
+ * @class
+ * @public
+ */
+class FilterDialog extends BasicElement {
+	static get properties() {
+		return {
+			config: {type: Object},
+			data: {type: Object},
+			isShown: {type: Boolean},
+			target: {attribute: false},
+			filterMode: {type: String},
+			conditions: {attribute: false},
+			hiddenSortUI: {type: Boolean},
+			hiddenFilterUI: {type: Boolean},
+			hiddenAdvancedFilter: {type: Boolean},
+			sortState: {type: String},
+			useUTCTime: {type: Boolean},
+			fieldDataType: {type: String},
+			lang: { type: String, reflect: true }
+		};
+	}
+
+	static get is() {
+		return "filter-dialog";
+	}
+
+	constructor() {
+		super();
+
+		this._onWindowResized = this._onWindowResized.bind(this);
+		this._afterDialogOpened = this._afterDialogOpened.bind(this);
+
+		this.lang = "en";
+		this._lang = "en";
+		this._translation = translation;
+		this.hiddenSortUI = false;
+		this.hiddenFilterUI = false;
+		this.hiddenAdvancedFilter = false;
+		this.isShown = false;
+		this.sortState = "n";
+		this.fieldDataType = "";
+		this._blankValues = false;
+		this._blankValuesChecked = false;
+		this._compactMode = false;
+		this.useUTCTime = true;
+		this._dateTimeFormat = "dd-MM-yy";
+		this._popup = new Popup({
+			"shown": this._onPopupShown.bind(this),
+			"hidden": this._onPopupHidden.bind(this),
+			"autoRepositioning": false,
+			"autoClipping": false,
+			"uiBlocking": true
+		});
+		this._winResizedTimer = 0;
+		ElementObserver.addLanguageListener(this);
+	}
+
+	/**
+	* @private
+	* @param {Object} changedProperties
+	*/
+	update(changedProperties) {
+
+		if(changedProperties.has("lang")) {
+			this._lang = ElfUtil.toLangString(this.lang);
+		}
+		if(changedProperties.has("target")) {
+			this._popup.attachTo(this.target);
+		}
+
+		if(changedProperties.has("config")) {
+			let options = this.config;
+			if(options) {
+				if (options.data) {
+					this.data = options.data;
+				}
+
+				if (options.sortState) {
+					this.sortState = (options.sortState) ? options.sortState.charAt(0).toLowerCase() : "";
+				}
+
+				if (options.sortUI != null) {
+					this.hiddenSortUI = options.sortUI === false;
+				}
+
+				if (options.filterUI != null) {
+					this.hiddenFilterUI = options.filterUI === false;
+				}
+
+				if (options.dateTimeFormat != null) {
+					this._dateTimeFormat = options.dateTimeFormat;
+				}
+
+				if(options.advancedFilter != null) {
+					this.hiddenAdvancedFilter = options.advancedFilter === false;
+				}
+
+				if(options.blankValues != null ) {
+					this._blankValues = options.blankValues;
+				}
+
+				if(options.compactMode != null) {
+					this._compactMode = options.compactMode;
+				}
+
+				this._blankValuesChecked = false;
+				if(options.blankValuesChecked != null) {
+					this._blankValuesChecked = options.blankValuesChecked;
+				}
+
+				if(this._blankValues) {
+					this._addBlankItem();
+				}
+
+				if (options.target) {
+					this.target = options.target;
+					this._popup.attachTo(this.target);
+				}
+
+				if (typeof options.filterChanged === "function") {
+					this.addEventListener("filterChanged", options.filterChanged, false);
+				}
+
+				if (typeof options.confirm === "function") {
+					this.addEventListener("confirm", options.confirm, false);
+				}
+
+				if (typeof options.cancel === "function") {
+					this.addEventListener("cancel", options.cancel, false);
+				}
+
+				if (typeof options.sortChanged === "function") {
+					this.addEventListener("sortChanged", options.sortChanged, false);
+				}
+
+				if (options.filterMode) {
+					this.filterMode = options.filterMode;
+				}
+
+				if (options.conditions) {
+					this.conditions = options.conditions;
+				}
+
+				if (options.fieldDataType != null) {
+					this.fieldDataType = options.fieldDataType;
+					this._updateGeneralComboBoxes();
+				}
+
+				// allow config.lang overides default lang
+				if (options.lang) {
+					this._lang = ElfUtil.toLangString(options.lang);
+				}
+			}
+		}
+
+		super.update(changedProperties);
+	}
+
+	/** A `TemplateResult` that will be used to render the updated internal template
+	* @private
+	* @return {*}
+	*/
+	render() {
+		let lang = this._translation[this._lang] ? this._lang : "en";
+		let t =  this._translation[lang];
+		let dateTimeFormat = this._dateTimeFormat;
+		return html`
+			<ef-panel id="root_panel" spacing with-shadow with-border>
+				<div id="filterDialogContent" class="filter-dialog dialog-theme-wrapper">
+
+					<div class="group-block" id="filterSortUI">
+						<label class="group-label">${t["Sort by"]}:</label>
+						<div id="filterSortCoralSplitBtn">
+							<ef-button aria-label="sort in ascending order" toggles>A — Z</ef-button>
+							<ef-button aria-label="sort in descending order" toggles>Z — A</ef-button>
+						</div>
+					</div>
+
+					<hr id="separator"/>
+
+					<div class="group-block" id="filterUI">
+						<label class="group-label">${t["Filter by"]}:</label>
+						<div id="filterCoralSplitBtn">
+							<ef-button aria-label="filter by value" toggles active>${t["VALUE"]}</ef-button>
+							<ef-button aria-label="filter by condition" toggles>${t["CONDITION"]}</ef-button>
+						</div>
+
+						<div class="group-filter">
+							<div class="input-group" id="filterValueUI">
+								<ef-search-field id="dataFilter"></ef-search-field>
+								<checkbox-list id="dataSelector" lang="${lang}"></checkbox-list>
+							</div>
+
+							<div class="hide" id="filterAdvancedUI">
+								<div class="input-group" id="general_conditon">
+									<ef-combo-box placeholder="${t["Show rows where"]}:" lang="${lang}"></ef-combo-box>
+									<ef-combo-box placeholder="${t["Value"]}" lang="${lang}" free-text></ef-combo-box>
+
+									<div class="radio-group">
+										<ef-radio-button name="filterRadio" value="AND" checked>${t["And"]}</ef-radio-button>
+										<ef-radio-button name="filterRadio" value="OR">${t["Or"]}</ef-radio-button>
+									</div>
+
+									<ef-combo-box placeholder="${t["Show rows where"]}:" lang="${lang}"></ef-combo-box>
+									<ef-combo-box placeholder="${t["Value"]}" lang="${lang}" free-text></ef-combo-box>
+								</div>
+								<div class="input-group hide" id="datetime_conditon">
+									<ef-combo-box placeholder="${t["Show rows where"]}:" lang="${lang}"></ef-combo-box>
+									<ef-datetime-picker placeholder="${dateTimeFormat}" format="${dateTimeFormat}" lang="${lang}"></ef-datetime-picker>
+
+									<div class="radio-group">
+										<ef-radio-button name="filterRadio" value="AND" checked>${t["And"]}</ef-radio-button>
+										<ef-radio-button name="filterRadio" value="OR" >${t["Or"]}</ef-radio-button>
+									</div>
+									<ef-combo-box placeholder="${t["Show rows where"]}:" lang="${lang}"></ef-combo-box>
+									<ef-datetime-picker placeholder="${dateTimeFormat}" format="${dateTimeFormat}" lang="${lang}"></ef-datetime-picker>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="cancel-ok"">
+					<ef-button id="clear_btn">${t["Clear Filter"]}</ef-button>
+					<ef-button cta id="done_btn">${t["Done"]}</ef-button><ef-button id="cancel_btn">${t["Cancel"]}</ef-button>
+				</div>
+			</ef-panel>
+		`;
+	}
+
+	/**
+	* @private
+	* @override
+	*/
+	firstUpdated(changedProps) {
+		this._initialized = true;
+
+		const root = this.shadowRoot;
+
+		this.setAttribute("tabindex", "0");
+		this.setAttribute("role", "dialog");
+		this.setAttribute("aria-label", "filter");
+		this._separator = root.getElementById("separator");
+		this._rootContainer = root.getElementById("root_panel");
+		this._dialogContent = root.getElementById("filterDialogContent");
+		this._sortUI = root.getElementById("filterSortUI");
+		this._filterUI = root.getElementById("filterUI");
+		this._cancelBtn = root.getElementById("cancel_btn");
+		this._doneBtn = root.getElementById("done_btn");
+		this._clearBtn = root.getElementById("clear_btn");
+		this._sortBtns = root.getElementById("filterSortCoralSplitBtn");
+
+		this._dataFilter = root.getElementById("dataFilter");
+		this._dataSelector = root.getElementById("dataSelector");
+
+		this._filterBtns = root.getElementById("filterCoralSplitBtn");
+		this._valueFilterUI = root.getElementById("filterValueUI");
+
+		this._advFilterUI = root.getElementById("filterAdvancedUI");
+		this._generalCondUI = this._advFilterUI.querySelector("#general_conditon");
+		this._generalComboBoxes = this._generalCondUI.getElementsByTagName("ef-combo-box");
+		this._generalRadioBtns = this._generalCondUI.getElementsByTagName("ef-radio-button");
+		this._dateTimeCondUI = this._advFilterUI.querySelector("#datetime_conditon");
+		this._dateTimeComboBoxes = this._dateTimeCondUI.getElementsByTagName("ef-combo-box");
+		this._dateTimePickers = this._dateTimeCondUI.getElementsByTagName("ef-datetime-picker");
+		this._dateTimeRadioBtns = this._dateTimeCondUI.getElementsByTagName("ef-radio-button");
+
+		this._dateTimeComboBoxes[0].data = createComboBoxData(this._translateFilters(DATE_FILTERS));
+		this._dateTimeComboBoxes[1].data = createComboBoxData(this._translateFilters(DATE_FILTERS));
+
+		this._updateGeneralComboBoxes();
+
+		let comboxBoxes = this._advFilterUI.getElementsByTagName("ef-combo-box");
+		let len = comboxBoxes.length;
+		for (let i = 0; i < len; i++) {
+			comboxBoxes[i].addEventListener("keydown", this._onCondSelectorKeyDown);
+		}
+
+		this._dataFilter.addEventListener("value-changed", this._filterData.bind(this));
+
+		this._cancelBtn.addEventListener("click", this._onCancelBtnClick.bind(this));
+		this._doneBtn.addEventListener("click", this._onDoneBtnClick.bind(this));
+		this._clearBtn.addEventListener("click", this._clearAdvanceFilterUI.bind(this));
+
+		this._sortBtns.addEventListener("click", this._onClickSort.bind(this));
+		this._filterBtns.addEventListener("click", this._onClickFilter.bind(this));
+
+		this.addEventListener("keydown", function(e){
+			if(e.ctrlKey  || e.altKey || e.metaKey){
+				return;
+			}
+			let code = e.code;
+			if(code === "Escape" || code === "Enter"){
+				this._onCancelBtnClick();
+			}
+		});
+		window.addEventListener("resize", this._onWindowResize.bind(this));
+	}
+
+	/**
+	* @private
+	* @override
+	*/
+	updated(changedProps) {
+		// Update Sort UI
+		let isHiddenSortUIChanged = changedProps.has("hiddenSortUI");
+		let isHiddenFilterUIChanged = changedProps.has("hiddenFilterUI");
+		let isHiddenAdvancedFilterChanged = changedProps.has("hiddenAdvancedFilter");
+		if (isHiddenSortUIChanged) {
+			let pn = this._sortUI.parentNode;
+			if (this.hiddenSortUI) {
+				if (pn) {
+					pn.removeChild(this._sortUI);
+				}
+			} else {
+				if (!pn) {
+					// prepend child to _dialogContent
+					if (this._dialogContent.firstChild) {
+						this._dialogContent.insertBefore(this._sortUI, this._dialogContent.firstChild);
+					} else {
+						this._dialogContent.appendChild(this._sortUI);
+					}
+				}
+			}
+		}
+
+		if (isHiddenFilterUIChanged) {
+			// Update Filter UI
+			let pn = this._filterUI.parentNode;
+			if (this.hiddenFilterUI) {
+				if (pn) {
+					pn.removeChild(this._filterUI);
+				}
+				this._dialogContent.classList.add("no-filter-ui");
+			} else {
+				if (!pn) {
+					this._dialogContent.appendChild(this._filterUI);
+				}
+				this._dialogContent.classList.remove("no-filter-ui");
+			}
+		}
+
+		if (isHiddenSortUIChanged || isHiddenFilterUIChanged) {
+			let isHide = this.hiddenSortUI || this.hiddenFilterUI;
+			this._separator.classList.toggle("hide", isHide);
+		}
+		if(isHiddenAdvancedFilterChanged) {
+			// TODO: Add class for no advance filter
+			this._filterBtns.classList.toggle("hide", this.hiddenAdvancedFilter);
+		}
+
+		if (changedProps.has("isShown")) {
+			if (this.isShown) {
+				this._updateUIState(); // should updateUIState everytime popup being show
+				if(this._popup.isHidden()) { // If popup is not already in doc, append it
+					this._popup.show(); // Popup position will also be modified
+				}
+				setTimeout(this._afterDialogOpened, 0); //use setTimeout to make sure everything is rendered before focus
+			} else { // This is to handle the case where isShown is directly modified from the dialog. We need to synchronize the states
+				this._popup.hide();
+			}
+		}
+	}
+
+	/**
+	* @private
+	*/
+	_afterDialogOpened() {
+		if(!this.isShown) {
+			return;
+		}
+
+		this._cancelBtn.focus(); // Keep focus on cancel button when open dialog
+		this._updateDialogHeight(); // position of the popup element will always be updated
+
+		let popupElem = this._popup.getElement();
+		if(popupElem) {// After all changes, ensure that visibility is reset back
+			popupElem.style.visibility = "";
+		}
+		this.focus();
+	}
+
+	/** Initialize dialog
+	* @public
+	* @param {FilterDialog~Config} options - initial data
+	*/
+	init(options) {
+		this.config = options;
+	}
+
+	/** Show the dialog as a popup
+	* @public
+	*/
+	show() {
+		let popupElem = this._popup.getElement();
+		if(popupElem) {// To prevent blinking due to size and position change
+			popupElem.style.visibility = "hidden";
+		}
+		this._popup.appendChild(this); // To force first time initialization, focus is already included in updated()
+		this._popup.show();
+	}
+
+	/** Hide the dialog
+	* @public
+	*/
+	hide() {
+		this._popup.hide();
+	}
+
+	/**
+	* @private
+	*/
+	_onPopupShown() {
+		this.isShown = true; // To trigger update
+	}
+	/**
+	* @private
+	*/
+	_onPopupHidden() {
+		this.isShown = false; // For backward compatability
+		if (this._winResizedTimer) {
+			clearTimeout(this._winResizedTimer);
+			this._winResizedTimer = 0;
+		}
+		this.dispatchEvent(new CustomEvent("cancel"));
+	}
+
+	/**
+	* @private
+	*/
+	_onWindowResize() {
+		if(!this._winResizedTimer && this.isShown){
+			this._winResizedTimer = setTimeout(this._onWindowResized, 400);
+		}
+	}
+	/**
+	* @private
+	*/
+	_onWindowResized() {
+		this._winResizedTimer = 0;
+		this._updateDialogHeight();
+	}
+
+
+	/**
+	* @public
+	* @param {string} val Sorting state "d" or "a"
+	*/
+	setSortState(val) {
+		this.sortState = (val) ? val.charAt(0).toLowerCase() : "";
+	}
+
+	/** Hide Sort UI block
+	* @public
+	* @param {boolean} val - value
+	*/
+	hideSortUI(val) {
+		this.hiddenSortUI = val;
+	}
+
+	/**
+	* @private
+	* @param {*} e
+	*/
+	_filterData(e) {
+		this._dataSelector.filter(e.detail.value);
+	}
+
+	/**
+	* @private
+	* @param {*} e
+	*/
+	_onCondSelectorKeyDown(e) {
+		if (e.keyCode == 13) {
+			e.stopPropagation();
+		}
+	}
+
+	/**
+	* Click on sort buttons
+	* @private
+	* @param {object} e - event
+	*/
+	_onClickSort(e) {
+		const tgt = e.target;
+		let sortState = "n";
+
+		// TODO: Simplify getting sort state logics
+		const children = this._sortBtns.children;
+		if (children[0].contains(tgt)) {
+			sortState = "a";
+		} else if (children[1].contains(tgt)) {
+			sortState = "d";
+		}
+		this.sortState = sortState;
+
+		this.dispatchEvent(new CustomEvent("sortChanged", {
+			detail: {
+				value: sortState
+			}
+		}));
+		this.hide();
+		e.preventDefault();
+		e.stopPropagation();
+	}
+
+	/**
+	* Click on Filter By Value Condition buttons
+	* @private
+	* @param {object} e - event
+	*/
+	_onClickFilter(e) {
+		const tgt = e.target;
+		const children = this._filterBtns.children;
+		this.filterMode = (children[1].contains(tgt)) ? "custom" : "text"; // Using setter
+		e.preventDefault();
+		e.stopPropagation();
+		this._updateFilterModeSelectionUI();
+		this._updateDialogHeight();
+	}
+
+	/**
+	* @private
+	* @param {string} oper
+	* @param {*} val
+	* @returns {boolean}
+	*/
+	_isValidCondition(oper, val) {
+		if(oper) {
+			if(val || val === 0) {
+				return true;
+			} else { // Blank operations don't need value
+				return oper === BLANK_FILTERS[0][0] || oper === BLANK_FILTERS[1][0];
+			}
+		}
+		return false;
+	}
+	/**
+	* @private
+	* @param {object} e - event
+	*/
+	_onDoneBtnClick(e) {
+		let eventArg = {
+			bubbles: false,
+			detail: {
+				fieldDataType: this.fieldDataType
+			}
+		};
+		if (this._isAdvancedFilterMode()) {
+			// Retrieve filter conditions from UI;
+			let oper1, oper2, val1, val2, connector;
+			let dateTimeType = toDateTimeType(this.fieldDataType);
+			let fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+			let useUTCTime = false;
+			if (fdt === DATE_TIME) {
+				useUTCTime = this.useUTCTime;
+				oper1 = this._dateTimeComboBoxes[0].value;
+				val1 = this._dateTimePickers[0].value;
+				if(val1) {
+					val1 = this._getDateObject(val1);
+				}
+				oper2 = this._dateTimeComboBoxes[1].value;
+				val2 = this._dateTimePickers[1].value;
+				if(val2) {
+					val2 = this._getDateObject(val2);
+				}
+
+				if (this._dateTimeRadioBtns[0].checked) {
+					connector = "AND";
+				} else if (this._dateTimeRadioBtns[1].checked) {
+					connector = "OR";
+				}
+			} else {
+				oper1 = this._generalComboBoxes[0].value;
+				val1 = this._generalComboBoxes[1].value;
+				oper2 = this._generalComboBoxes[2].value;
+				val2 = this._generalComboBoxes[3].value;
+
+				if (this._generalRadioBtns[0].checked) {
+					connector = "AND";
+				} else if (this._generalRadioBtns[1].checked) {
+					connector = "OR";
+				}
+
+				// Perform automatic data type conversion for only number field data type
+				if (fdt === "number") {
+					let num = NaN;
+					if (val1) {
+						num = Number(val1);
+						if(num === num) { // Convert to number only when number is valid
+							val1 = num;
+						}
+					}
+
+					if (val2) {
+						num = Number(val2);
+						if(num === num) { // Convert to number only when number is valid
+							val2 = num;
+						}
+					}
+				}
+			}
+			let ary2D = [];
+
+			if(this._isValidCondition(oper1, val1)) {
+				ary2D.push([oper1, val1]);
+			}
+
+			if(this._isValidCondition(oper2, val2)) {
+				if(ary2D.length) {
+					ary2D[0][2] = connector;
+				}
+				ary2D.push([oper2, val2]);
+			}
+
+			if(useUTCTime) {
+				ary2D.forEach(function(itm) {
+					itm[3] = true;
+				});
+			}
+
+			eventArg.detail.conditions = ary2D;
+		} else {
+			eventArg.detail.value = this._dataSelector.getSelectedItems();
+		}
+
+		this.dispatchEvent(new CustomEvent("filterChanged", eventArg));
+		this.dispatchEvent(new CustomEvent("confirm", eventArg));
+		this.hide();
+	}
+
+	/**
+	* @private
+	* @param {object} e - event
+	*/
+	_onCancelBtnClick(e) {
+		this.dispatchEvent(new CustomEvent("cancel"));
+		this.hide();
+	}
+
+	/**
+	* @private
+	*/
+	_clearAdvanceFilterUI() {
+		let defaultVal = "";
+		let dateTimeType = toDateTimeType(this.fieldDataType);
+		let fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+		if (fdt === DATE_TIME) {
+			defaultVal = "DT";
+			this._clearValue(this._dateTimeComboBoxes[0], defaultVal);
+			this._clearValue(this._dateTimeComboBoxes[1]);
+			this._dateTimePickers[0].value = "";
+			this._dateTimePickers[1].value = "";
+			this._dateTimeRadioBtns[0].checked = true;
+		} else {
+			if(fdt === "number") {
+				defaultVal = "GT";
+			} else {
+				defaultVal = "CONT";
+			}
+			this._clearValue(this._generalComboBoxes[0], defaultVal);
+			this._clearValue(this._generalComboBoxes[1]);
+			this._clearValue(this._generalComboBoxes[2]);
+			this._clearValue(this._generalComboBoxes[3]);
+			this._generalRadioBtns[0].checked = true;
+		}
+	}
+	/**
+	* @private
+	*/
+	_updateGeneralComboBoxes() {
+		if(this._initialized) {
+			let filterItems;
+			let dateTimeType = toDateTimeType(this.fieldDataType);
+			let fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+			if(fdt === "number") {
+				filterItems = NUMBER_FILTERS;
+			} else if(fdt === "string" || fdt === "text") {
+				filterItems = TEXT_FILTERS;
+			} else {
+				filterItems = DEFAULT_FILTERS;
+			}
+			if(this._blankValues) {
+				filterItems = filterItems.concat(BLANK_FILTERS);
+			}
+			let translated = this._translateFilters(filterItems);
+			this._generalComboBoxes[0].data = createComboBoxData(translated);
+			this._generalComboBoxes[2].data = createComboBoxData(translated);
+		}
+	}
+
+	/**
+	* Filter is Advanced (By Condition) or Custom (By Value)
+	* @private
+	* @return {boolean}
+	*/
+	_isAdvancedFilterMode() {
+		const ch = this.filterMode ? this.filterMode.charAt(0).toLowerCase() : "";
+		// a - Advanced Filter by Condition; c - Custom Filter by Value
+		return (ch === "c" || ch === "a");
+	}
+
+	/**
+	* @private
+	* @param {Element} elem ef-combo-box element
+	* @param {string} defaultVal=""
+	*/
+	_clearValue(elem, defaultVal) {
+		if(elem.clearSelection) { // clearSelection is deprecated in ELF v4
+			elem.clearSelection();
+		} else {
+			// WORKAROUND:: combo box has a bug. Cannot clear text in free-mode
+			// So wee need to remove free-text and re-set again
+			// to track bug https://jira.refinitiv.com/browse/ELF-1694
+			// TODO:: need to remove WORKAROUND after ELF-1694 fixed
+			let hasFreeTextMode = elem.getAttribute("free-text") != null;
+			if (hasFreeTextMode) {
+				elem.removeAttribute("free-text");
+			}
+
+			elem.value = defaultVal || "";
+
+			if (hasFreeTextMode) {
+				elem.setAttribute("free-text", "");
+			}
+		}
+	}
+
+	/** to prepare and sync state from config into all UI
+	* @private
+	*/
+	_updateUIState() {
+		this._updateFilterModeSelectionUI();
+		this._dataFilter.value = "";
+		this._dataSelector.filter("");
+		this._updateValueSelector();
+		this._updateAdvanceFilterUI();
+		this._updateSortButtonUI();
+	}
+
+	/**
+	* @private
+	*/
+	_updateAdvanceFilterUI() {
+		this._clearAdvanceFilterUI();
+
+		let userConditions = this.conditions || null;
+		if (userConditions && typeof userConditions === "string") {
+			try {
+				userConditions = JSON.parse(userConditions);
+			} catch (err) {
+				return;
+			}
+		}
+
+		if (!Array.isArray(userConditions)) { // Expect 2D array
+			return;
+		}
+
+		const isDateType = toDateTimeType(this.fieldDataType);
+		const con1 = this._toConditionObject(userConditions[0], isDateType);
+		const con2 = con1 ? this._toConditionObject(userConditions[1], isDateType) : null;
+
+		let conSel1 = this._generalComboBoxes[0];
+		let valInput1 = this._generalComboBoxes[1];
+		let conSel2 = this._generalComboBoxes[2];
+		let valInput2 = this._generalComboBoxes[3];
+		let connectors = this._generalRadioBtns;
+
+		if (isDateType) {
+			conSel1 = this._dateTimeComboBoxes[0];
+			valInput1 = this._dateTimePickers[0];
+			conSel2 = this._dateTimeComboBoxes[1];
+			valInput2 = this._dateTimePickers[1];
+			connectors = this._dateTimeRadioBtns;
+		}
+		if (con1) {
+			this._updateConditionUIs(conSel1, valInput1, con1.operator, con1.value);
+		}
+		if (con2) {
+			this._updateConditionUIs(conSel2, valInput2, con2.operator, con2.value);
+		}
+
+		let andRadioBtn = (con1 && con2) ? (con1.connector !== "OR") : true;
+		connectors[0].checked = andRadioBtn; // AND radio button
+		connectors[1].checked = !andRadioBtn; // OR radio button
+	}
+	/**
+	* @private
+	* @param {Array} ary Condition in array format with length of three (e.g., ["LT", 5, "OR"])
+	* @param {boolean} isDateType
+	* @return {string}
+	*/
+	_toConditionObject(ary, isDateType) {
+		if(Array.isArray(ary) && ary.length) {
+			let op = ary[0];
+			if(op) {
+				let val = ary[1];
+				if(val || val === 0 || val === false || BLANK_VALUES[op]) {
+					if(isDateType) {
+						let date = (ary.rawValue != null) ? ary.rawValue : val;
+						if(!(date instanceof Date)){
+							date = new Date(date);
+						}
+						val = DateTime.format(date.getTime(), "yyyy-MM-dd", this.useUTCTime ? "GMT" : "LOCAL");
+					}
+					return {
+						operator: op,
+						value: val,
+						connector: ary[2] || ""
+					};
+				}
+			}
+		}
+		return null;
+	}
+	/** @private
+	* @param {Element} opCombobox
+	* @param {Element} valuePicker
+	* @param {string} opValue
+	* @param {string} value
+	*/
+	_updateConditionUIs(opCombobox, valuePicker, opValue, value) {
+		opCombobox.value = opValue;
+		valuePicker.value = value;
+	}
+
+	/** @private
+	* @returns {boolean}
+	*/
+	_updateDialogHeight() {
+		if(!this._compactMode) {
+			this._rootContainer.classList.remove("compact");
+		} else {
+			this._rootContainer.classList.add("compact"); // Compact mode impact height of element, so we need to set it before height changed to calculate exactly height
+		}
+		this._rootContainer.style.height = "";
+		this._popup.updatePosition(false); // update position without fallback
+
+		const position = Dom.getRelativePosition(this, document.body);
+		const dialogHeight = this.offsetHeight;
+		const windowHeight = window.innerHeight - 5; // Add some buffer
+		const dialogCoverage = position.y + dialogHeight;
+		const heightDiff = dialogCoverage - windowHeight;
+
+		let heightChange = false;
+		if(heightDiff > 0) {
+			heightChange = true;
+			const isAdvancedFilter = this._isAdvancedFilterMode();
+			const minHeight = isAdvancedFilter ? 262 : 216;
+			let newHeight = dialogHeight - heightDiff;
+			if(newHeight < minHeight || isAdvancedFilter){
+				newHeight = minHeight;
+			}
+			this._rootContainer.style.height = newHeight + "px";
+
+			const compactThreshold = 409;
+			if(newHeight < compactThreshold){
+				this._rootContainer.classList.add("compact");
+			}
+		}
+
+		this._popup.updatePosition(); // This must be called to apply fallback or height change
+		return heightChange;
+	}
+	/**
+	* @private
+	* @param {Array.<Object>|Object} data data for convert into array
+	* @return {Array.<Object>}
+	*/
+	_dataToArray(data) {
+		let ary = null;
+		if (Array.isArray(data)) {
+			ary = data;
+		} else if(data) {
+			ary = Object.keys(data); // TODO: Obsolete this
+		} else {
+			ary = [];
+		}
+		return ary;
+	}
+
+	/**
+	* @private
+	*/
+	_addBlankItem() {
+		let ary = this._dataToArray(this.data);
+		if(this._blankValues) {
+			let blankItem = {
+				id: "_blank",
+				title: this._blankValues,
+				nodes: [],
+				value: BLANKS, // The ".value" property is currently only usable with blank item abilities
+				checked: this._blankValuesChecked || false
+			};
+			this.data = [blankItem].concat(ary);
+		} else {
+			// Data selector can take large number of items
+			this.data = ary; // Preserve original referencing
+		}
+	}
+	/**
+	* @private
+	*/
+	_updateValueSelector() {
+		let ary = this._dataToArray(this.data);
+		this._dataSelector.data = ary; // Preserve original referencing
+		// Value selector for Filter by Condition
+		if(ary.length > ITEM_LIMIT) {
+			ary = ary.slice(0, ITEM_LIMIT); // Prevent combo box from over population
+		}
+		// Advance items
+		let advanceItems = [];
+		for (let i = 0; i < ary.length; i++) {
+			let item = ary[i];
+			if(!item.type) {
+				advanceItems.push(this._toComboBoxItem(item));
+			}
+		}
+		if(this._blankValues) {
+			let basicItems = advanceItems.slice(1);
+			this._generalComboBoxes[1].data = basicItems;
+			this._generalComboBoxes[3].data = basicItems;
+		} else {
+			this._generalComboBoxes[1].data = advanceItems;
+			this._generalComboBoxes[3].data = advanceItems;
+		}
+	}
+	/**
+	* @private
+	* @param {*} obj
+	* @returns {FilterDialog~ComboBoxItem}
+	*/
+	_toComboBoxItem(obj) {
+		let itemVal = (typeof obj === "string") ? obj : (obj.label || obj.title) || "";
+		return {
+			"label": itemVal,
+			"value": itemVal
+		};
+	}
+
+	/**
+	* Return date object
+	* @private
+	* @param {string} dateString // Date string in UTC format yyyy-MM-dd
+	* @return {Date}
+	*/
+	_getDateObject(dateString) {
+		let date = new Date(dateString);
+		if(date && this.useUTCTime == false){
+			date.setTime(date.getTime() + (date.getTimezoneOffset() * 60000)); // convert to local time
+		}
+		return date;
+	}
+
+	/**
+	* @private
+	* @return {Object}
+	*/
+	_getTranslation() {
+		let lang = this._translation[this._lang] ? this._lang : "en";
+		return this._translation[lang];
+	}
+
+	/**
+	* @private
+	* @param {Array} filters
+	* @return {Array}
+	*/
+	_translateFilters(filters) {
+		let trans = this._getTranslation();
+		let len = filters.length;
+		let items = [];
+		let item;
+		for (let i = 0; i < len; i++) {
+			item = filters[i];
+			items.push([item[0], trans[item[1]]]);
+		}
+		return items;
+	}
+
+	/**
+	* Set filter Visibilities of layout
+	* @private
+	*/
+	_updateFilterModeSelectionUI() {
+		// Filter By Value - Condition buttons
+		const children = this._filterBtns.children;
+		const isAdvanceMode = this._isAdvancedFilterMode();
+		children[0].active = !isAdvanceMode;
+		children[1].active = isAdvanceMode;
+		this._valueFilterUI.classList.toggle("hide", isAdvanceMode);
+		this._advFilterUI.classList.toggle("hide", !isAdvanceMode);
+		this._clearBtn.classList.toggle("hide", !isAdvanceMode);
+
+		const isDateTimeField = toDateTimeType(this.fieldDataType) ? true : false;
+		this._generalCondUI.classList.toggle("hide", isDateTimeField);
+		this._dateTimeCondUI.classList.toggle("hide", !isDateTimeField);
+	}
+
+	/**
+	* to update state of sort button
+	* @private
+	*/
+	_updateSortButtonUI() {
+		const sortState = this.sortState;
+		const children = this._sortBtns.children;
+		children[0].active = sortState === "a";
+		children[1].active = sortState === "d";
+	}
+}
+
+customElement("filter-dialog")(FilterDialog);
+
+export { FilterDialog };
+export default FilterDialog;