@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,860 @@
+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 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 Show Sort area
+ * @property {boolean=} filterUI Show Filter area
+ * @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
+*/
+
+/** @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 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]
+];
+/** @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 {Object}
+*/
+var arrayToComboBoxItem = function(options) {
+	return {
+		label: options[1],
+		value: options[0]
+	};
+};
+/** @private
+* @function
+* @param {Array.<Array>} conditions
+* @returns {Array.<Object>}
+*/
+var 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},
+			sortState: {type: String},
+			fieldDataType: {type: String},
+			lang: { type: String, reflect: true }
+		};
+	}
+
+	static get is() {
+		return 'filter-dialog';
+	}
+
+	constructor() {
+		super();
+
+		this.lang = "en";
+		this._lang = "en";
+		this._translation = translation;
+		this.hiddenSortUI = false;
+		this.hiddenFilterUI = false;
+		this.isShown = false;
+		this.sortState = "n";
+		this.fieldDataType = "";
+		this._popup = new Popup({
+			"shown": this._onPopupShown.bind(this),
+			"hidden": this._onPopupHidden.bind(this)
+		});
+		ElementObserver.addLanguageListener(this);
+	}
+
+	/**
+	 * @private
+	 * @param {Object} changedProperties
+	 */
+	update(changedProperties) {
+
+		if(changedProperties.has("lang")) {
+			this._lang = ElfUtil.toLangString(this.lang);
+		}
+
+		if(changedProperties.has("config")) {
+			var 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.target) {
+					this.target = options.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() {
+		var lang = this._translation[this._lang] ? this._lang : "en";
+		var t =  this._translation[lang];
+		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>${t["Sort by"]}:</label>
+						<ef-button-bar managed id="filterSortCoralSplitBtn">
+							<ef-button toggles>A — Z</ef-button>
+							<ef-button toggles>Z — A</ef-button>
+						</ef-button-bar>
+					</div>
+
+					<hr id="separator"/>
+
+					<div class="group-block" id="filterUI">
+						<label>${t["Filter by"]}:</label>
+						<ef-button-bar managed id="filterCoralSplitBtn">
+							<ef-button toggles active>${t["VALUE"]}</ef-button>
+							<ef-button toggles>${t["CONDITION"]}</ef-button>
+						</ef-button-bar>
+
+						<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="DD-MM-YY" format="dd-MM-yy" 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="DD-MM-YY" format="dd-MM-yy" lang="${lang}"></ef-datetime-picker>
+							</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._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));
+	}
+
+	/**
+	 * @private
+	 * @override
+	 */
+	updated(changedProps) {
+		// Update Sort UI
+		var isHiddenSortUIChanged = changedProps.has('hiddenSortUI');
+		var isHiddenFilterUIChanged = changedProps.has('hiddenFilterUI');
+		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) {
+			var isHide = this.hiddenSortUI || this.hiddenFilterUI;
+			this._separator.classList.toggle('hide', isHide);
+		}
+
+		if (changedProps.has('isShown')) {
+			if (this.isShown) {
+				this._popup.attachTo(this.target, "bottom"); // This will cause popup to recalculate its position
+				this._updateUIState(); // should updateUIState everytime popup being show
+			}
+
+			this._popup.show(this.isShown);
+		}
+	}
+
+	/** Initialize dialog
+	 * @public
+	 * @param {FilterDialog~Config} options - initial data
+	 */
+	init(options) {
+		this.config = options;
+	}
+
+	/** Show the dialog as a popup
+	 * @public
+	 */
+	show() {
+		this._popup.appendChild(this); // To force first time initialization
+
+		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
+	}
+
+	/**
+	 * @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();
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event
+	 */
+	_onDoneBtnClick(e) {
+		let context;
+		if (this._isAdvancedFilterMode()) {
+			// Retrieve filter conditions from UI;
+			let oper1, oper2, val1, val2, connector;
+			var dateTimeType = toDateTimeType(this.fieldDataType);
+			var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+			if (fdt === DATE_TIME) {
+				oper1 = this._dateTimeComboBoxes[0].value;
+				val1 = this._dateTimePickers[0].value;
+				if(val1) {
+					val1 = new Date(val1);
+				}
+				oper2 = this._dateTimeComboBoxes[1].value;
+				val2 = this._dateTimePickers[1].value;
+				if(val2) {
+					val2 = new Date(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") {
+					var 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;
+						}
+					}
+				}
+			}
+
+			context = {
+				bubbles: false,
+				detail: {
+					conditions: [
+						[oper1, val1, connector],
+						[oper2, val2]
+					],
+					fieldDataType: this.fieldDataType
+				}
+			};
+		} else {
+			context = {
+				bubbles: false,
+				detail: {
+					value: this._dataSelector.getSelectedItems(),
+					fieldDataType: this.fieldDataType
+				}
+			};
+		}
+
+		this.dispatchEvent(new CustomEvent("filterChanged", context));
+		this.dispatchEvent(new CustomEvent("confirm", context));
+		this.hide();
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event
+	 */
+	_onCancelBtnClick(e) {
+		this.dispatchEvent(new CustomEvent('cancel'));
+		this.hide();
+	}
+
+	/**
+	 * @private
+	 */
+	_clearAdvanceFilterUI() {
+		var defaultVal = "";
+		var dateTimeType = toDateTimeType(this.fieldDataType);
+		var 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) {
+			var filterItems;
+			var dateTimeType = toDateTimeType(this.fieldDataType);
+			var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
+			if(fdt === "number") {
+				filterItems = NUMBER_FILTERS;
+			} else if(fdt === "general" || fdt === "text") {
+				filterItems = TEXT_FILTERS;
+			} else {
+				filterItems = DEFAULT_FILTERS;
+			}
+			var 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
+			var 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() {
+		// Reset Advance Filter UIs
+		this._clearAdvanceFilterUI();
+
+		let userConditions = this.conditions || null;
+		if (userConditions && typeof userConditions === "string") {
+			try {
+				userConditions = JSON.parse(userConditions);
+			} catch (err) {
+				return;
+			}
+		}
+
+		// Params is an array
+		if (Array.isArray(userConditions)) {
+			let conditions = /** @type{Array} */ (userConditions);
+			const con1 = conditions[0] || [];
+			const con2 = conditions[1] || [];
+			const connector = con1[2] || "";
+			const isDateTimeField = toDateTimeType(this.fieldDataType) ? true : false;
+			if (isDateTimeField) {
+				if (con1[0]) {
+					this._dateTimeComboBoxes[0].value = con1[0];
+					this._dateTimePickers[0].value = con1[1] ? this._getDateString(con1[1]) : "";
+
+					if (con2[0]) {
+						this._dateTimeComboBoxes[1].value = con2[0];
+						this._dateTimePickers[1].value = con2[1] ? this._getDateString(con2[1]) : "";
+					}
+				}
+				this._dateTimeRadioBtns[0].checked = connector !== "OR";
+				this._dateTimeRadioBtns[1].checked = connector === "OR";
+			} else {
+				if (con1[0]) {
+					this._generalComboBoxes[0].value = con1[0];
+					this._generalComboBoxes[1].value = con1[1] || "";
+
+					if (con2[0]) {
+						this._generalComboBoxes[2].value = con2[0];
+						this._generalComboBoxes[3].value = con2[1] || "";
+					}
+				}
+				this._generalRadioBtns.checked = connector !== "OR";
+				this._generalRadioBtns[1].checked = connector === "OR";
+			}
+		}
+	}
+
+	/**
+	 * @private
+	 */
+	_updateValueSelector() {
+		this._dataSelector.data = this.data; // Preserve original referencing
+
+		let data = this.data || [];
+		let items = null;
+		if (Array.isArray(data)) {
+			items = data;
+		} else {
+			items = Object.keys(data); // TODO: Obsolete this
+		}
+
+		// Value selector for Filter by Condition
+		this._generalComboBoxes[1].data = items.map(this._toComboBoxItem);
+		this._generalComboBoxes[3].data = items.map(this._toComboBoxItem);
+	}
+	/**
+	 * @private
+	 * @param {*} obj
+	 * @returns {Object}
+	 */
+	_toComboBoxItem(obj) {
+		let itemVal = (typeof obj === "string") ? obj : obj.title || "";
+		return {
+			"label": itemVal,
+			"value": itemVal
+		};
+	}
+
+	/**
+	 * Return date string in format yyyy-MM-dd
+	 * @private
+	 * @param {Object|string} date
+	 * @return {string}
+	 */
+	_getDateString(date) {
+		if (date instanceof Date) {
+			return DateTime.formatDateObject(date, 'yyyy-MM-dd');
+		} else {
+			var dateObj = new Date(date);
+			return DateTime.formatDateObject(dateObj, 'yyyy-MM-dd');
+		}
+	}
+
+	/**
+	 * @private
+	 * @return {Object}
+	 */
+	_getTranslation() {
+		var lang = this._translation[this._lang] ? this._lang : 'en';
+		return this._translation[lang];
+	}
+
+	/**
+	 * @private
+	 * @param {Array} filters
+	 * @return {Array}
+	 */
+	_translateFilters(filters) {
+		let trans = this._getTranslation();
+		var len = filters.length;
+		var items = [];
+		var item;
+		for (var 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;