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

package/lib/column-format-dialog/lib/column-format-dialog.js

@@ -0,0 +1,2688 @@
+import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import {
+	BasicElement,
+	html
+} from "@refinitiv-ui/core";
+// import "@elf/atlas-autosuggest/lib/atlas-autosuggest.js"; //TODO: Not been use at the moment, But possible to use in the future
+import "@refinitiv-ui/elements/button";
+import "@refinitiv-ui/elements/checkbox";
+import "@refinitiv-ui/elements/collapse";
+import "@refinitiv-ui/elements/dialog";
+import "@refinitiv-ui/elements/icon";
+import "@refinitiv-ui/elements/text-field";
+import "@refinitiv-ui/elements/number-field";
+import "@refinitiv-ui/elements/list";
+import "@refinitiv-ui/elements/radio-button";
+import "@refinitiv-ui/elements/select";
+import "@refinitiv-ui/elements/button-bar";
+import "@refinitiv-ui/elements/tooltip";
+import "@refinitiv-ui/elements/item";
+import "@refinitiv-ui/elements/color-dialog";
+import ElfUtil from "../../tr-grid-util/es6/ElfUtil.js";
+import { DATE_TIME, toDateTimeType } from "../../tr-grid-util/es6/FieldFormatter.js";
+import ExpressionParser from "../../tr-grid-util/es6/ExpressionParser.js";
+import translation from "./locale/translation.js";
+import { PercentBar } from "../../tr-grid-util/es6/PercentBar.js";
+import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
+import { PreviewTable } from "./preview-table.js";
+
+/**
+ * @typedef {Object} ColumnFormatDialog~SupportDisplayStyleOptions
+ * @property {boolean} bar support "bar"
+ */
+
+/**
+ * @typedef {Object} ColumnFormatDialog~SupportValueFormatOptions
+ * @property {boolean} fx support "fx"
+ */
+
+/**
+ * @typedef {Object} ColumnFormatDialog~Config
+ * @property {Object} data Context object indicating current states of the column
+ * @property {boolean=} supportHighlightApplyToSwitch support HighlightApplyToSwitch
+ * @property {ColumnFormatDialog~SupportValueFormatOptions=} supportValueFormatOptions Support FxFormat
+ * @property {ColumnFormatDialog~SupportDisplayStyleOptions=} supportDisplayStyleOptions Support items in "Display Style" dropdown
+ * @property {Array.<string>=} fields List of available fields to be shown in the dialog
+ * @property {Function=} confirm Confirm event callback
+ * @property {Function=} cancel Cancel event callback
+ */
+
+const conditionDict = {
+	"GREATER_THAN": {
+		text: "Greater than",
+		expression: "[{0}] > {1}",
+		valueType: "number",
+		displayFormat: "Value > {0}",
+		regExp: /^\[[^[\]]+]\s*>\s*([+\-eE\d.]+)$/ // for auto-detect type of expression
+	},
+	"GREATER_THAN_OR_EQUAL_TO": {
+		text: "Greater than or equal to",
+		expression: "[{0}] >= {1}",
+		valueType: "number",
+		displayFormat: "Value >= {0}",
+		regExp: /^\[[^[\]]+]\s*>=\s*([+\-eE\d.]+)$/ // for auto-detect type of expression
+	},
+	"EQUAL_TO": {
+		text: "Equal to",
+		expression: "[{0}] === {1}",
+		valueType: "number",
+		displayFormat: "Value = {0}",
+		regExp: /^\[[^[\]]+]\s*===\s*([+\-eE\d.]+)$/ // for auto-detect type of expression
+	},
+	"LESS_THAN": {
+		text: "Less than",
+		expression: "[{0}] < {1}",
+		valueType: "number",
+		displayFormat: "Value < {0}",
+		regExp: /^\[[^[\]]+]\s*<\s*([+\-eE\d.]+)$/ // for auto-detect type of expression
+	},
+	"LESS_THAN_OR_EQUAL_TO": {
+		text: "Less than or equal to",
+		expression: "[{0}] <= {1}",
+		valueType: "number",
+		displayFormat: "Value <= {0}",
+		regExp: /^\[[^[\]]+]\s*<=\s*([+\-eE\d.]+)$/ // for auto-detect type of expression
+	},
+	"BETWEEN": {
+		text: "Between",
+		expression: "[{0}] > {1} && [{0}] < {2}",
+		valueType: "twoNumbers",
+		displayFormat: "Value Between {0} And {1}",
+		regExp: new RegExp(/^\[[^[\]]+]\s*>\s*([+\-eE\d.]+)\s*&&\s*\[[^[\]]+]\s*<\s*([+\-eE\d.]+)$/) // for auto-detect type of expression
+	},
+	"TEXT_THAT_CONTAINS": {
+		text: "Text that contains",
+		expression: 'String([{0}]).indexOf("{1}") > -1',
+		valueType: "text",
+		displayFormat: 'Text that contains \'{0}\'',
+		regExp: new RegExp(/^String\(\[[^[\]]+]\)\.indexOf\("([^()]+)"\)\s*>\s*-1$/) // for auto-detect type of expression
+	},
+	"TEXT_THAT_NOT_CONTAINS": {
+		text: "Text that not contains",
+		expression: 'String([{0}]).indexOf("{1}") < 0',
+		valueType: "text",
+		displayFormat: 'Text that not contains \'{0}\'',
+		regExp: new RegExp(/^String\(\[[^[\]]+]\)\.indexOf\("([^()]+)"\)\s*<\s*0$/) // for auto-detect type of expression
+	},
+	"TEXT_IS": {
+		text: "Text is",
+		expression: 'String([{0}]) === "{1}"',
+		valueType: "text",
+		displayFormat: 'Value = \'{0}\'',
+		regExp: new RegExp(/String\(\[[^[\]]+]\)\s*===\s*"(.+)"/) // for auto-detect type of expression
+	},
+	"BLANK": { // undefined, null, '', NaN
+		text: "Value is blank",
+		expression: "![{0}] && [{0}] !== 0",
+		valueType: "none",
+		displayFormat: "Value is blank",
+		regExp: new RegExp(/!\[[^[\]]+]\s*&&\s*\[[^[\]]+]\s*!==\s*0/) // for auto-detect type of expression
+	},
+	"NOT_BLANK": { // Has a value
+		text: "Value is not blank",
+		expression: "[{0}] || [{0}] === 0",
+		valueType: "none",
+		displayFormat: "Value is not blank",
+		regExp: new RegExp(/\[[^[\]]+]\s*\|\|\s*\[[^[\]]+]\s*===\s*0/) // for auto-detect type of expression
+	}
+};
+
+/**
+ * @class
+ * @public
+ */
+class ColumnFormatDialog extends BasicElement {
+
+	static get properties() {
+		return {
+			config: { type: Object },
+			data: { type: Object },
+			isShown: { type: Boolean },
+			lang: { type: String, reflect: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this.$ = {}; // WORKAROUND
+		this.isShown = false;
+		this._colors = null;
+
+		this.lang = "en";
+		this._lang = "en";
+		this._translation = translation;
+
+		this._onThemeLoaded = this._onThemeLoaded.bind(this);
+
+		this._constSelfColumn = "THIS_COLUMN";
+		this._colorConditionEditState = {
+			expression: {
+				name: "GREATER_THAN",
+				values: []
+			},
+			color: "",
+			backgroundColor: ""
+		};
+		this._atLeastOneBidOffer = false;
+
+		ElfUtil.getThemeColors().then(this._onThemeLoaded).catch(this._onThemeLoaded);
+		ElementObserver.addLanguageListener(this);
+	}
+
+	/**
+	 * @private
+	 * @param {Object} changedProperties
+	 */
+	update(changedProperties) {
+		if(changedProperties.has("lang")) {
+			this._lang = ElfUtil.toLangString(this.lang);
+		}
+		if (changedProperties.has("config")) {
+			this._config = Object.assign({
+				supportValueFormatOptions: {},
+				supportDisplayStyleOptions: {}
+			}, this.config);
+			if (!changedProperties.has("data")) {
+				if (this._config.data != null) {
+					this.data = this._config.data; // Assign data from user config
+				}
+			}
+
+			// allow config.lang overrides default lang
+			if (this._config.lang) {
+				this._lang = ElfUtil.toLangString(this._config.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-dialog style="width: inherit; " header="${t["Format"]}" id="formatDialog" lang="${lang}">
+				<div class="format-dialog dialog-theme-wrapper">
+					<div class="preview section-panel">
+						<div class="left-panel">
+							<div>${t["Preview"]}</div>
+						</div>
+						<div class="right-panel" >
+							<div id="preview_table" ></div>
+						</div>
+					</div>
+					<div class="options">
+						<!-- Value Format Section -->
+						<ef-collapse class="value-format" header="${t["Value Format"]}" expanded="true">
+							<div class="section-panel">
+								<div class="left-panel">
+									<div class="value-format__inner">
+										<ef-select class="ef-select-wrapper" id="valueFormatMenu"></ef-select>
+										<div class="value-menu-description" title="{{valueMenuDescription}}" id="valueMenuDesc">
+											<ef-icon icon="info"></ef-icon>
+										</div>
+										<ef-tooltip selector=".value-menu-description"></ef-tooltip>
+									</div>
+								</div>
+								<div class="right-panel">
+									<div style="display:none" id="valueFormatOther">
+										<div id="valueFormatNumberOrPercentage" style="padding-bottom: 3px; padding-top: 1px; display:none">
+											${t["Decimal Places"]}:
+											<ef-number-field id="colFormatValueDecimalPlaces" min="0" max="9" style="width: 75px;" value="2"/>
+										</div>
+										<div style="margin-top: 3px;">
+											<ef-checkbox id="colFormatValueUseSeparator"/>
+											<label for="col-format-value-use-separator">${t["Use 1000 Separator (,)"]}</label>
+										</div>
+										<div style="padding-top: 8px;">
+											<ef-checkbox id="colFormatPlusSign"/>
+											<label for="col-format-plus-sign">${t["Show + Sign"]}</label>
+										</div>
+										<div style="padding-top: 18px;" id="valueFormatScaledValues">
+											${t["Scale to"]}:
+											<ef-radio-button name="group1" id="colFormatValueScaledMillions" value="million" checked>${t["Millions"]}</ef-radio-button>
+											<ef-radio-button name="group1" id="colFormatValueScaledBillions" value="billion">${t["Billions"]}</ef-radio-button>
+										</div>
+										<div style="padding-top: 8px;" id="valueFormatPercentage">
+											<ef-checkbox id="colFormatPercentageMultiply"/>
+											<label for="col-format-percentage-multiply-by-100">${t["Multiply the cell value by 100"]}</label>
+										</div>
+									</div>
+
+									<div style="display:none" id="valueFormatDateTime">
+										<div style="margin-top: 1px; margin-bottom: 5px;">
+											<ef-list id="dateTimeList" items="dateFormatMenu" selected-item="dateFormatSelected" style="width: 100%; height: 115px"/>
+										</div>
+										<div style="width:100%; display:none" id="customDateFormatWrapper">
+											<ef-text-field id="customDateFormatInput" type="text" placeholder="${t["Custom"]}" style="width: 100%;"/>
+										</div>
+										<div style="margin-top: 8px;">
+											<ef-checkbox id="colFormatDateUseUtcTime"/>
+											<label for="colFormatDateUseUtcTime">${t["Convert to GMT Time"]}</label>
+										</div>
+									</div>
+
+									<div style="display: flex; flex-direction: column;" id="valueFormatFx">
+										<div style="margin-bottom: 20px;">
+											<div style="margin-bottom: 10px;">
+												<ef-checkbox id="colFormatFxEmphasize" checked/>
+												<label for="colFormatFxEmphasize">${t["Emphasize"]}</label>
+											</div>
+											<div>
+												<span>${t["Number of Pips digits (maximum 5)"]}:</span>
+											</div>
+											<div style="margin-bottom: 10px;">
+												<ef-number-field placeholder="${t["Number"]}" min="0" max="5" id="colFormatFxPipLength"/>
+											</div>
+											<div>
+												<span>${t["Pips Offset"]}:</span>
+											</div>
+											<div style="margin-bottom: 10px;">
+												<ef-number-field placeholder="${t["Number"]}" min="-10" max="10" id="colFormatFxPipOffset"/>
+											</div>
+											<div>
+												<span>${t["Number of half pips digits"]}:</span>
+											</div>
+											<div>
+												<ef-number-field placeholder="${t["Number"]}" min="0" max="10" id="colFormatFxSubPipLength"/>
+											</div>
+										</div>
+										<div>
+											<ef-button id="fxReset">${t["Reset to default"]}</ef-button>
+										</div>
+									</div>
+
+									<div style="display:none" id="valueFormatMessage">
+										"${t["Multiple columns are selected. Select a format or/and style to be applied to all of them."]}"
+									</div>
+
+								</div>
+							</div>
+						</ef-collapse>
+
+						<!-- Display Style Section -->
+						<ef-collapse class="display-style" header="${t["Display Style"]}" expanded="true">
+							<div class="section-panel display-style-panel">
+								<div class="display-style-panel__header">
+									<div class="left-panel">
+										<ef-select class="ef-select-wrapper display-style-panel__menu" id="displayFormatMenu"></ef-select>
+									</div>
+									<div class="right-panel">
+										<section class="align-section">
+											<label class="left-panel">${t["Alignment"]}:</label>
+											<div class="right-panel">
+												<tab-buttons mode="icon" tab-list="alignmentButtons" selected-id="generalAlignment"></tab-buttons>
+												<ef-button-bar
+													managed id="alignmentButtonsWrapper"
+													class="button-split"
+													mode="icon"
+													tab-list="alignmentButtons"
+													selected-id="generalAlignment"
+												>
+													<ef-button toggles id="tab-left" class="split-action icon"
+														icon="text-left" tabindex="0" textpos="after"
+														aria-disabled="false" aria-pressed="false" empty=""
+														highlight="false"
+													></ef-button>
+													<ef-button
+														toggles id="tab-center" class="split-action icon"
+														icon="text-center" tabindex="0" textpos="after"
+														aria-disabled="false" aria-pressed="false" empty=""
+														highlight="false"
+													></ef-button>
+													<ef-button
+														toggles id="tab-right" class="split-action icon"
+														icon="text-right" tabindex="0" textpos="after"
+														aria-disabled="false" aria-pressed="true" empty=""
+														highlight="true"
+													></ef-button>
+												</ef-button-bar>
+											</div>
+										</section>
+									</div>
+								</div>
+
+								<div class="display-style-panel__content">
+									<div class="left-panel"></div>
+									<div class="right-panel">
+										<div style="display:block" id="displayFormatGeneral"></div>
+
+										<div style="display:none" id="displayFormatBar">
+											<div style="padding-bottom: 10px;">
+												<ef-checkbox id="colFormatBarShowValues" checked/>
+												<label for="colFormatBarShowValues">${t["Show Values"]}</label>
+											</div>
+											<div style="padding-bottom: 10px;">
+												<ef-checkbox id="colFormatBarUseMovementColor" checked/>
+												<label for="colFormatBarUseMovementColor">${t["Use Movement Colors"]}</label>
+											</div>
+										</div>
+
+										<div class="display-format-heatmap" style="display:none" id="displayFormatHeatmap">
+											<div class="display-format-heatmap__apply">
+												<label class="left-panel">${t["Apply to"]}:</label>
+												<div class="right-panel" id="heatmapApplyContainer">
+													<ef-radio-button name="heatmapRadio" id="colFormatHeatmapApplyCell"
+																	value="cell"
+																	checked>${t["Cell"]}</ef-radio-button>
+													<ef-radio-button name="heatmapRadio" id="colFormatHeatmapApplyText"
+																	value="text">${t["Text"]}</ef-radio-button>
+												</div>
+											</div>
+											<div class="display-format-heatmap__midpoint">
+												<label class="left-panel">${t["Midpoint"]}:</label>
+												<div class="right-panel">
+														<ef-number-field id="colFormatHeatmapMidpoint" style="width: 75px;" value="0" />
+												</div>
+											</div>
+										</div>
+
+										<div style="display:none" id="displayFormatConditionalColor"></div>
+
+										<div style="display:none" id="displayFormatMessage">
+											${t["Multiple columns are selected. Select a format or/and style to be applied to all of them."]}
+										</div>
+									</div>
+								</div>
+
+								<div class="conditions-panel" style="display:none" id="displayFormatConditionsPanel">
+									<div class="conditions-panel__inner">
+										<div class="conditions-panel__header">
+											<div class="left-panel">
+												<label>${t["Based On"]}:</label>
+												<ef-select class="ef-select-wrapper" id="conditionalColorBasedonDropdown"></ef-select>
+											</div>
+											<div class="right-panel">
+												<ef-text-field class="ef-another-field" id="conditionalColorBasedonAutosuggestInput" style="display:none;"></ef-text-field>
+												<!--<atlas-autosuggest id="conditionalColorBasedonAutosuggest"></atlas-autosuggest>-->
+											</div>
+										</div>
+									</div>
+
+									<div class="conditions-container">
+										<div class="left-panel">${t["Conditions"]}: (${t["Stop If True"]})</div>
+										<div class="conditions-container__order right-panel">
+											<label>${t["Order"]}:</label>
+											<ef-button title="${t["Increase condition precedence"]}" id="moveUpConditionButton" icon="up"></ef-button>
+											<ef-button title="${t["Decrease condition precedence"]}" id="moveDownConditionButton" icon="down"></ef-button>
+											<ef-button class="conditions-container__add" title="${t["Add a condition"]}" id="addConditionButton">
+												${t["Add"]}...
+											</ef-button>
+										</div>
+									</div>
+									<div>
+										<ef-list id="conditionList"></ef-list>
+									</div>
+								</div>
+							</div>
+						</ef-collapse>
+
+						<!-- Updates Section -->
+						<ef-collapse class="updates" header="${t["Updates"]}" expanded="true">
+							<div class="section-panel">
+								<div class="colors-panel">
+									<div class="left-panel">
+										<ef-checkbox id="colFormatUpdatesUseColor"/>
+										<label for="colFormatUpdatesUseColor">${t["Color Based On"]}</label>
+									</div>
+
+									<div class="right-panel">
+										<div class="colortext-basedon">
+											<ef-select class="ef-select-wrapper left-panel" id="colorTextBasedonDropdown" disabled></ef-select>
+											<div class="right-panel" id="colorTextBasedonAutosuggestWrapper" style="display: none;">
+												<ef-text-field class="ef-another-field" id="colorTextBasedonAutosuggestInput" style="width: 100%">
+												</ef-text-field>
+												<!--<atlas-autosuggest id="colorTextBasedonAutosuggest"></atlas-autosuggest>-->
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<div class="highlight-panel">
+									<div class="left-panel">
+										<ef-checkbox id="colFormatUpdatesUseHighlight"/>
+										<label for="colFormatUpdatesUseHighlight">${t["Background Based On"]}</label>
+									</div>
+
+									<div class="right-panel">
+										<div class="highlight-basedon">
+											<ef-select class="ef-select-wrapper left-panel" id="highlightBasedonDropdown" disabled></ef-select>
+											<div class="right-panel" id="highlightBasedonAutosuggestWrapper" style="display: none;">
+												<ef-text-field class="ef-another-field" id="highlightBasedonAutosuggestInput"></ef-text-field>
+												<!--<atlas-autosuggest id="highlightBasedonAutosuggest"></atlas-autosuggest>-->
+											</div>
+										</div>
+
+										<div class="highlight-apply-block" id="highlightApplyToBlock">
+											<div class="highlight-apply-block__inner">
+												<label class="left-panel">${t["Apply to"]}:</label>
+												<div class="right-panel">
+													<ef-radio-button name="highlightRadio" id="colFormatUpdatesApplyCell"
+																	value="cell" checked disabled>${t["Cell"]}</ef-radio-button>
+													<ef-radio-button name="highlightRadio" id="colFormatUpdatesApplyBorder"
+																	value="border" disabled>${t["Border"]}</ef-radio-button>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</ef-collapse>
+					</div>
+				</div>
+			</ef-dialog>
+
+			<ef-dialog id="colorConditionDialog" header="${t["Edit Condition"]}" lang="${lang}">
+				<ef-color-dialog id="colorDialog" no-color allow-nocolor></ef-color-dialog>
+				<ef-color-dialog id="backgroundColorDialog" no-color allow-nocolor></ef-color-dialog>
+				<div class="container">
+					<!-- Preview -->
+					<div class="section">
+						<div class="input-group">
+							<div class="input-side">
+								<label>${t["Preview"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<div id="colorDialogSample">${t["Sample Format"]}</div>
+							</div>
+						</div>
+					</div>
+					<!-- Condition Type -->
+					<div class="section">
+						<div class="input-group">
+							<div class="input-side">
+								<label for="conditionSelect">${t["Condition"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<ef-select class="ef-select-wrapper" id="conditionSelect"></ef-select>
+							</div>
+						</div>
+					</div>
+					<!-- Number Value -->
+					<div class="section" id="conditionNumber">
+						<div class="input-group">
+							<div class="input-side">
+								<label for="conditionNumberValue" id="numberValueLabel">${t["Greater than"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<ef-number-field id="conditionNumberValue" value="0"></ef-number-field>
+							</div>
+						</div>
+					</div>
+					<!-- TwoNumber Value -->
+					<div class="section" id="conditionTwoNumbers" style="display:none">
+						<div class="input-group">
+							<div class="input-side">
+								<label for="conditionFirstValue">${t["Low Value"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<ef-number-field id="conditionFirstValue" value="0"></ef-number-field>
+							</div>
+						</div>
+						<div class="input-group">
+							<div class="input-side">
+								<label for="conditionSecondValue">${t["High Value"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<ef-number-field id="conditionSecondValue" value="0"></ef-number-field>
+							</div>
+						</div>
+					</div>
+					<!-- Test Value -->
+					<div class="section" id="conditionText" style="display:none">
+						<div class="input-group">
+							<div class="input-side">
+								<label for="conditionTextValue">${t["Text"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<ef-text-field id="conditionTextValue">
+							</div>
+						</div>
+					</div>
+					<!-- None Value -->
+					<div class="section" id="conditionNone" style="display:none">
+						<div style="height: 39px;"></div>
+					</div>
+					<!-- Color selection -->
+					<div class="section">
+						<div class="input-group">
+							<div class="input-side">
+								<label>${t["Text Color"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<div class="color-example" id="textColorExample"></div>
+							</div>
+						</div>
+						<div class="input-group">
+							<div class="input-side">
+								<label>${t["Cell Color"]}:</label>
+							</div><!-- prevent space
+							--><div class="input-side">
+								<div class="color-example input-side" id="backgroundColorExample"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</ef-dialog>
+		`;
+	}
+
+	/**
+	 * @private
+	 * @override
+	 */
+	firstUpdated(changedProperties) {
+		this._initElements();
+		this._initHandlers();
+		this._initAutosuggests();
+	}
+
+	/**
+	 * @private
+	 * @override
+	 */
+	updated(changedProperties) {
+		var dirty = false;
+		if (changedProperties.has("config") || changedProperties.has("data")) {
+			var fields = null;
+			if (this._config) {
+				fields = this._config.fields;
+
+				var onConfirmHandler = this._config.confirm;
+				if (typeof onConfirmHandler === "function") {
+					this.addEventListener("confirm", onConfirmHandler);
+				}
+
+				var onCancelHandler = this._config.cancel;
+				if (typeof onCancelHandler === "function") {
+					this.addEventListener("cancel", onCancelHandler);
+				}
+			}
+			if (changedProperties.has("config")) {
+				this._fillBaseFieldSelectors(fields); // populate dropdown items
+			}
+
+			this._initData(); // TODO: Data and states modification should be done in the "update" phase to prevent infinite loop
+			if (this._config) { // TODO: Make it so that we can bind data without a config object
+				dirty = true;
+			}
+		}
+		if (changedProperties.has("isShown")) {
+			this.$.formatDialog.opened = this.isShown;
+			if (!this.isShown) {
+				this.remove();
+			}
+		}
+		if (changedProperties.has("lang")) {
+			dirty = true;
+		}
+		if (dirty) {
+			this._bindData(this._data);
+		}
+	}
+
+	/**
+	 * @public
+	 * @param {ColumnFormatDialog~Config=} userConfig Configuration object used to initialize dialog and populate data
+	 */
+	init(userConfig) {
+		this.config = userConfig;
+	}
+
+	/** Show the dialog
+	 * @public
+	 */
+	show() {
+		if (!this.parentNode) {
+			document.body.appendChild(this); // custom element only work when it is in the document
+		}
+		this.isShown = true;
+	}
+
+	/** Hide the dialog
+	 * @public
+	 */
+	hide() {
+		this.isShown = false;
+	}
+
+	/**
+	 * @private
+	 * @return {Object}
+	 */
+	_getTranslation() {
+		var lang = this._translation[this._lang] ? this._lang : "en";
+		return this._translation[lang];
+	}
+
+	/**
+	 * @private
+	 */
+	_onThemeLoaded() {
+		this._colors = ElfUtil.getColors();
+	}
+
+	/**
+	 * @private
+	 */
+	_initData() {
+		const t = this;
+		var data = t._data = {
+			valueFormatTab: {
+				formatType: "general"
+			},
+			displayStyleTab: {
+				mode: "general",
+				alignment: "left",
+				general: {}
+			},
+			colorTextTab: {}
+		};
+
+		// prevent from changing user"s object
+		if (t.data.valueFormatTab) {
+			Object.assign(data.valueFormatTab, t.data.valueFormatTab);
+		}
+
+		if (t.data.displayStyleTab) {
+			Object.assign(data.displayStyleTab, t.data.displayStyleTab);
+		}
+
+		if (t.data.colorTextTab) {
+			Object.assign(data.colorTextTab, t.data.colorTextTab);
+		}
+
+		var formatType = data.valueFormatTab.formatType;
+		if (!formatType) {
+			data.valueFormatTab.formatType = "general";
+		} else {
+			var dateType = toDateTimeType(formatType);
+			if (dateType) {
+				data.valueFormatTab.formatType = DATE_TIME;
+			}
+		}
+		if (!data.displayStyleTab.mode) {
+			data.displayStyleTab.mode = "general";
+		}
+		if (!data.displayStyleTab.alignment) {
+			data.displayStyleTab.alignment = "left";
+		}
+
+		// TODO: t.conditions should not be public property. It should be prefixed with underscore
+		t.conditions = t._getDeepValue(t._data.displayStyleTab, "conditionalColor.conditions", []);
+		t.conditions.forEach((condition) => {
+			if (typeof condition.expression === "string") {
+				condition.expression = t._expresionStringToObject(condition.expression);
+			}
+		});
+	}
+
+	/** Convert expression string to object
+	 * @private
+	 * @param {string} expresionString String describing condition for coloring
+	 * @returns {{name: string, text: string, values: Array}} An object used by ELF components
+	 */
+	_expresionStringToObject(expresionString) {
+		for(let key in conditionDict) {
+			const matches = conditionDict[key].regExp.exec(expresionString);
+			if (Array.isArray(matches)) {
+				return {
+					name: key,
+					text: expresionString,
+					values: [matches[1], matches[2]]
+				};
+			}
+		}
+		return {};
+	}
+
+	/**
+	 * @private
+	 */
+	_initElements() {
+		const _s = this.shadowRoot;
+		var preivewTableElement = _s.getElementById("preview_table");
+		this._previewTable = new PreviewTable(preivewTableElement);
+		/**
+		 * Initialize
+		 */
+		this.$.alignmentButtonsWrapper = _s.getElementById("alignmentButtonsWrapper");
+		this.$.dateTimeList = _s.getElementById("dateTimeList");
+		this.$.colFormatValueDecimalPlaces = _s.getElementById("colFormatValueDecimalPlaces");
+		this.$.colFormatValueUseSeparator = _s.getElementById("colFormatValueUseSeparator");
+		this.$.colFormatPlusSign = _s.getElementById("colFormatPlusSign");
+		this.$.colFormatValueScaledBillions = _s.getElementById("colFormatValueScaledBillions");
+		this.$.colFormatValueScaledMillions = _s.getElementById("colFormatValueScaledMillions");
+		this.$.colFormatPercentageMultiply = _s.getElementById("colFormatPercentageMultiply");
+		this.$.colFormatDateUseUtcTime = _s.getElementById("colFormatDateUseUtcTime");
+		this.$.displayFormatGeneral = _s.getElementById("displayFormatGeneral");
+		this.$.displayFormatBar = _s.getElementById("displayFormatBar");
+		this.$.displayFormatHeatmap = _s.getElementById("displayFormatHeatmap");
+		this.$.displayFormatConditionalColor = _s.getElementById("displayFormatConditionalColor");
+		this.$.displayFormatConditionsPanel = _s.getElementById("displayFormatConditionsPanel");
+		this.$.displayFormatMessage = _s.getElementById("displayFormatMessage");
+		this.$.conditionalColorBasedonAutosuggestInput = _s.getElementById("conditionalColorBasedonAutosuggestInput");
+		this.$.conditionalColorBasedonDropdown = _s.getElementById("conditionalColorBasedonDropdown");
+		this.$.colorConditionDialog = _s.getElementById("colorConditionDialog");
+		this.$.colorTextBasedonAutosuggestInput = _s.getElementById("colorTextBasedonAutosuggestInput");
+		this.$.colorTextBasedonAutosuggestWrapper = _s.getElementById("colorTextBasedonAutosuggestWrapper");
+		this.$.colorTextBasedonDropdown = _s.getElementById("colorTextBasedonDropdown");
+		this.$.highlightBasedonAutosuggestInput = _s.getElementById("highlightBasedonAutosuggestInput");
+		this.$.highlightBasedonAutosuggestWrapper = _s.getElementById("highlightBasedonAutosuggestWrapper");
+		this.$.highlightBasedonDropdown = _s.getElementById("highlightBasedonDropdown");
+		this.$.colFormatFxEmphasize = _s.getElementById("colFormatFxEmphasize");
+		this.$.colFormatFxPipLength = _s.getElementById("colFormatFxPipLength");
+		this.$.colFormatFxPipOffset = _s.getElementById("colFormatFxPipOffset");
+		this.$.colFormatFxSubPipLength = _s.getElementById("colFormatFxSubPipLength");
+		this.$.colFormatBarShowValues = _s.getElementById("colFormatBarShowValues");
+		this.$.colFormatBarUseMovementColor = _s.getElementById("colFormatBarUseMovementColor");
+		this.$.colFormatHeatmapMidpoint = _s.getElementById("colFormatHeatmapMidpoint");
+		this.$.colFormatHeatmapApplyText = _s.getElementById("colFormatHeatmapApplyText");
+		this.$.colFormatHeatmapApplyCell = _s.getElementById("colFormatHeatmapApplyCell");
+		this.$.colFormatUpdatesUseColor = _s.getElementById("colFormatUpdatesUseColor");
+		this.$.colorTextBasedonDropdown = _s.getElementById("colorTextBasedonDropdown");
+		this.$.colorTextBasedonAutosuggestInput = _s.getElementById("colorTextBasedonAutosuggestInput");
+		this.$.colFormatUpdatesUseHighlight = _s.getElementById("colFormatUpdatesUseHighlight");
+		this.$.colFormatUpdatesApplyCell = _s.getElementById("colFormatUpdatesApplyCell");
+		this.$.colFormatUpdatesApplyBorder = _s.getElementById("colFormatUpdatesApplyBorder");
+		this.$.highlightApplyToBlock = _s.getElementById("highlightApplyToBlock");
+		this.$.conditionSelect = _s.getElementById("conditionSelect");
+		this.$.conditionList = _s.getElementById("conditionList");
+		this.$.valueFormatMenu = _s.getElementById("valueFormatMenu");
+		this.$.displayFormatMenu = _s.getElementById("displayFormatMenu");
+		this.$.valueFormatOther = _s.getElementById("valueFormatOther");
+		this.$.valueFormatNumberOrPercentage = _s.getElementById("valueFormatNumberOrPercentage");
+		this.$.valueFormatScaledValues = _s.getElementById("valueFormatScaledValues");
+		this.$.valueFormatPercentage = _s.getElementById("valueFormatPercentage");
+		this.$.valueFormatDateTime = _s.getElementById("valueFormatDateTime");
+		this.$.valueFormatFx = _s.getElementById("valueFormatFx");
+		this.$.valueFormatMessage = _s.getElementById("valueFormatMessage");
+		this.$.formatDialog = _s.getElementById("formatDialog");
+		this.$.addConditionButton = _s.getElementById("addConditionButton");
+		this.$.backgroundColorDialog = _s.getElementById("backgroundColorDialog");
+		this.$.backgroundColorExample = _s.getElementById("backgroundColorExample");
+		this.$.colorDialog = _s.getElementById("colorDialog");
+		this.$.colorDialogSample = _s.getElementById("colorDialogSample");
+		this.$.textColorExample = _s.getElementById("textColorExample");
+		this.$.moveUpConditionButton = _s.getElementById("moveUpConditionButton");
+		this.$.moveDownConditionButton = _s.getElementById("moveDownConditionButton");
+		this.$.customDateFormatInput = _s.getElementById("customDateFormatInput");
+		this.$.customDateFormatWrapper = _s.getElementById("customDateFormatWrapper");
+		this.$.fxReset = _s.getElementById("fxReset");
+		this.$.valueMenuDesc = _s.getElementById("valueMenuDesc");
+		this.$.conditionNumber = _s.getElementById("conditionNumber");
+		this.$.conditionTwoNumbers = _s.getElementById("conditionTwoNumbers");
+		this.$.conditionText = _s.getElementById("conditionText");
+		this.$.conditionNone = _s.getElementById("conditionNone");
+		this.$.numberValueLabel = _s.getElementById("numberValueLabel");
+		this.$.conditionNumberValue = _s.getElementById("conditionNumberValue");
+		this.$.conditionFirstValue = _s.getElementById("conditionFirstValue");
+		this.$.conditionSecondValue = _s.getElementById("conditionSecondValue");
+		this.$.conditionTextValue = _s.getElementById("conditionTextValue");
+
+		// TODO: Redundant variables remove these
+		this._conditionSelect = this.$.conditionSelect;
+		this._conditionList = this.$.conditionList;
+		this._valueFormatSelect = this.$.valueFormatMenu;
+		this._displayFormatSelect = this.$.displayFormatMenu;
+		this._colorConditionDialog = this.$.colorConditionDialog;
+		this._conditionalFieldInput = this.$.conditionalColorBasedonAutosuggestInput;
+		this._colorTextFieldInput = this.$.colorTextBasedonAutosuggestInput;
+
+		// inject percent bar style to elem
+		PercentBar.injectCss(this);
+	}
+
+	/**
+	 * @private
+	 * @param {Object=} opt_data - initial data
+	 */
+	_bindData(opt_data) { // TODO: opt_data and this._data are actually the same thing
+		var trans = this._getTranslation();
+
+		this._conditionalColorField = this.$.conditionalColorBasedonDropdown.value;
+		this.$.dateTimeList.data = this._getDateTimeListData();
+		this._setVisibleDisplayFormatOptions(this._data.displayStyleTab.mode);
+		this.$.colFormatValueDecimalPlaces.value = this._data.valueFormatTab.decimalPlaces || 2;
+		this.$.colFormatValueUseSeparator.checked = this._data.valueFormatTab.separator;
+		this.$.colFormatPlusSign.checked = this._data.valueFormatTab.plusSign;
+
+		if (this._data.valueFormatTab.scalingUnit === "billion") {
+			this.$.colFormatValueScaledBillions.checked = true;
+			this.$.colFormatValueScaledMillions.checked = false;
+		}
+		else {
+			this.$.colFormatValueScaledMillions.checked = true;
+			this.$.colFormatValueScaledBillions.checked = false;
+		}
+
+		this.$.colFormatPercentageMultiply.checked = this._data.valueFormatTab.multiplyBy100;
+
+		// Date Time Check when data loaded
+		if (this._data.valueFormatTab.formatType === DATE_TIME) {
+			this.$.colFormatDateUseUtcTime.checked = this._data.valueFormatTab.useUTCTime;
+			this.$.dateTimeList.value = this._data.valueFormatTab.dateTimeFormat;
+
+			if (this._data.valueFormatTab.isCustomDateFormat) { // Check use custom format
+				this.$.customDateFormatWrapper.style.display = "inline-flex";
+				this.$.customDateFormatInput.value = this._data.valueFormatTab.dateTimeFormat;
+				this._data.isCustomDateFormat = true;
+				this.$.dateTimeList.value = "customDateFormat";
+			} else {
+				this._data.isCustomDateFormat = false;
+				this.$.customDateFormatWrapper.style.display = "none";
+				this.$.dateTimeList.value = this._data.valueFormatTab.dateTimeFormat;
+			}
+			this._previewTable.setDateFormatString(this._data.valueFormatTab.dateTimeFormat);
+			this._previewTable.setDateFormatUseGMT(this._data.valueFormatTab.useUTCTime);
+		}
+
+		// Check fx section
+		if (this._atLeastOneBidOffer && this._config.supportValueFormatOptions.fx) {
+			this.$.colFormatFxEmphasize.checked = this._data.valueFormatTab.fxOptions.isEmphasize;
+			this.$.colFormatFxPipLength.value = this._data.valueFormatTab.fxOptions.pipLength;
+			this.$.colFormatFxPipOffset.value = this._data.valueFormatTab.fxOptions.pipStart;
+			this.$.colFormatFxSubPipLength.value = this._data.valueFormatTab.fxOptions.subPipLength;
+		}
+
+		this.$.colFormatBarShowValues.checked = this._data.displayStyleTab.bar ? this._data.displayStyleTab.bar.showValues : false;
+		this.$.colFormatBarUseMovementColor.checked = this._data.displayStyleTab.bar ? this._data.displayStyleTab.bar.useMovementColor : false;
+		{
+			// Init heatmap section
+
+			const heatmap = this._data.displayStyleTab.heatmap || {};
+			this.$.colFormatHeatmapMidpoint.value = heatmap.midPoint || 0;
+
+			if (heatmap.mode === "text") { // heatmap should choose one
+				this.$.colFormatHeatmapApplyText.checked = true;
+				this.$.colFormatHeatmapApplyCell.checked = false;
+			}
+			else {
+				this.$.colFormatHeatmapApplyCell.checked = true;
+				this.$.colFormatHeatmapApplyText.checked = false;
+			}
+
+		}
+
+		{
+
+			// Hide colorText update becuase displayStyle invisible
+			if (this._data.displayStyleTab.mode === "heatmap" || this._data.displayStyleTab.mode === "conditionalColor") {
+				this.$.colFormatUpdatesUseColor.disabled = true;
+			}
+
+			// Set accessibility for "Color Based On" block
+			const isColorText = !!this._data.colorTextTab.colorText;
+
+			this.$.colFormatUpdatesUseColor.checked = isColorText;
+			this.$.colorTextBasedonDropdown.disabled = !isColorText;
+			this.$.colorTextBasedonAutosuggestInput.disabled = !isColorText;
+
+			// When user send a blink another field
+			if (isColorText && isColorText.field !== this._constSelfColumn) {
+				this.$.colorTextBasedonAutosuggestWrapper.style.display = "inline-flex";
+				this.$.colorTextBasedonDropdown.value = "ANOTHER";
+				this.$.colorTextBasedonAutosuggestInput.value = this._data.colorTextTab.colorText.field;
+			}
+
+			this._previewTable.setUpdateStyleValueText(isColorText);
+			// ------------------------------------------------------
+
+			// Set accessibility for "Background Based On" block
+			const highlight = this._data.colorTextTab.highlight;
+			const isHighlight = !!highlight;
+
+			if (isHighlight) {
+				this._previewTable.setUpdateStyleValueCell(isHighlight);
+			}
+
+			this.$.colFormatUpdatesUseHighlight.checked = isHighlight;
+			this.$.highlightBasedonDropdown.disabled = !isHighlight;
+			this.$.highlightBasedonAutosuggestInput.disabled = !isHighlight;
+			this.$.colFormatUpdatesApplyCell.disabled = !isHighlight;
+			this.$.colFormatUpdatesApplyBorder.disabled = !isHighlight;
+
+
+			if (highlight && highlight.mode === "border") {
+				this.$.colFormatUpdatesApplyBorder.checked = true;
+				this.$.colFormatUpdatesApplyCell.checked = false;
+			} else {
+				this.$.colFormatUpdatesApplyCell.checked = true;
+				this.$.colFormatUpdatesApplyBorder.checked = false;
+			}
+
+			// When user send a blink another feild
+			if (highlight && highlight.field === "ANOTHER") {
+				this.$.highlightBasedonAutosuggestWrapper.style.display = "inline-flex";
+				this.$.highlightBasedonDropdown.value = "ANOTHER";
+				this.$.highlightBasedonAutosuggestInput.value = this._data.colorTextTab.highlight.field;
+			}
+
+			// Check support highlighting border and background
+			this.$.highlightApplyToBlock.style.display = this._config.supportHighlightApplyToSwitch !== false ? "block" : "none";
+			// -------------------------------------------------------
+		}
+
+		this._conditionDict = conditionDict;
+		var dropdownItems = [];
+
+		for (var key in conditionDict) {
+			if (conditionDict[key] != null) {
+				dropdownItems.push({ id: key, "value": key, "label": trans[conditionDict[key].text] });
+			}
+		}
+
+		this._conditionSelect.data = dropdownItems;
+		var conditionList = this.$.conditionList;
+		conditionList.renderer = this._conditionRenderer.bind(this);
+		this._initDefaultCondition();
+		this._createConditionListItems();
+
+
+		this._valueFormatSelect.data = this._getValueFormatMenu(opt_data);
+		this._setVisibleValueFormatOptions(this._data.valueFormatTab.formatType);
+		this._valueFormatSelected(this._data.valueFormatTab.formatType);
+		this._displayFormatSelect.data = this._getDisplayStyleMenu();
+
+
+		{
+			// Set align for all group of buttons
+			// Use ef-button-bar standard api `manageCoralButtons()` not working currently
+			// Because elem.managedCoralButtons will be undefined during this point
+			let textAlignment = this._data.displayStyleTab[this._data.displayStyleTab.mode].alignment;
+			const positions = ["left", "center", "right"];
+			if (positions.indexOf(textAlignment) < 0) {
+				textAlignment = "left";
+			}
+			for (let i = 0; i < positions.length; i++) {
+				const button = this.$.alignmentButtonsWrapper.children[i];
+				/**
+				 * WORKAROUND: Set active attrivute directly instead of standard method alignmentButtonsWrapper.manageCoralButtons(button)
+				 * {@link https://git.sami.int.thomsonreuters.com/elf/ef-button-bar/blob/v4/src/ef-button-bar.ts#L194}
+				 */
+				button.active = textAlignment === positions[i];
+			}
+			this._setAlignment(textAlignment);
+		}
+		this._checkDataForLoadStructurePreview();
+	}
+
+	/**
+	 * @private
+	 */
+	_initHandlers() {
+		this.$.formatDialog.addEventListener("confirm", this._onConfirm.bind(this));
+		this.$.formatDialog.addEventListener("cancel", this._onCancel.bind(this));
+		this.$.addConditionButton.onclick = this._addConditionButtonClick.bind(this);
+		this._valueFormatSelect.addEventListener("value-changed", function (e) {
+			var val;
+			if (e && e.detail) {
+				val = e.detail.value;
+			}
+			if (val) {
+				this._valueFormatSelected(val);
+			}
+		}.bind(this));
+		this.$.colFormatValueDecimalPlaces.addEventListener("value-changed", function (e) {
+			// manupulate input value and set to our cache value this._data.valueFormatTab.decimalPlaces
+
+			var value = Number(e.target.value);
+			var max = Number(e.target.getAttribute("max"));
+			var min = Number(e.target.getAttribute("min"));
+			if (value > max) {
+				value = max;
+			} else if (value < min) {
+				value = min;
+			}
+			this._previewTable.setValueFormatDecimalPlaces(value);
+		}.bind(this));
+
+		this.$.colFormatValueUseSeparator.addEventListener("checked-changed", function (e) {
+			this._previewTable.setValueFormatShowSeparatorSign(e.target.checked);
+		}.bind(this));
+
+		this.$.colFormatPlusSign.addEventListener("checked-changed", function (e) {
+			this._previewTable.setValueFormatShowPlusSign(e.target.checked);
+		}.bind(this));
+
+		this.$.colFormatPercentageMultiply.addEventListener("checked-changed", function (e) {
+			this._previewTable.setValueFormatShowPercentSignWithMultiply100(e.target.checked);
+		}.bind(this));
+
+		this.$.colFormatBarShowValues.addEventListener("checked-changed", function (e) {
+			this._previewTable.setDisplayStylePercentBarShowValue(e.target.checked);
+		}.bind(this));
+
+		this.$.colFormatBarUseMovementColor.addEventListener("checked-changed", function (e) {
+			this._previewTable.setDisplayStylePercentBarIsUsedMovement(e.target.checked);
+
+		}.bind(this));
+
+		this.$.colFormatValueScaledMillions.addEventListener("click", function (e) {
+			if (e.target.checked) {
+				this._previewTable.setValueFormatScaled("m");
+			}
+
+		}.bind(this));
+
+		this.$.colFormatValueScaledBillions.addEventListener("click", function (e) {
+			if (e.target.checked) {
+				this._previewTable.setValueFormatScaled("b");
+			}
+		}.bind(this));
+
+		this._displayFormatSelect.addEventListener("value-changed", function (e) {
+			var val;
+			if (e && e.detail) {
+				val = e.detail.value;
+			}
+			this._displayFormatSelected(val);
+		}.bind(this));
+		this._conditionSelect.addEventListener("value-changed", function (e) {
+			var val;
+			if (e && e.detail) {
+				val = e.detail.value;
+			}
+			if (val) {
+				this._setColorCondition(val);
+			}
+		}.bind(this));
+
+		this.$.textColorExample.onclick = function () {
+			this.$.colorDialog.opened = true;
+		}.bind(this);
+
+		this.$.backgroundColorExample.onclick = function () {
+			this.$.backgroundColorDialog.opened = true;
+		}.bind(this);
+
+		this.$.colorDialog.addEventListener("value-changed", function (e) {
+			if (e && e.detail) {
+				this._colorConditionColor = e.detail.value;
+				this.$.textColorExample.style.backgroundColor = e.detail.value;
+				this.$.colorDialogSample.style.color = e.detail.value;
+				this.$.textColorExample.classList.toggle("no-color", !e.detail.value);
+			}
+		}.bind(this));
+
+		this.$.backgroundColorDialog.addEventListener("value-changed", function (e) {
+			if (e && e.detail) {
+				this._colorConditionBackgroundColor = e.detail.value;
+				this.$.backgroundColorExample.style.backgroundColor = e.detail.value;
+				this.$.backgroundColorExample.classList.toggle("no-color", !e.detail.value);
+				this.$.colorDialogSample.style.backgroundColor = e.detail.value;
+			}
+		}.bind(this));
+
+		this.$.colFormatHeatmapMidpoint.addEventListener("value-changed", function (e) {
+			if (this.$.colFormatHeatmapApplyCell.checked) {
+				this._previewTable.setDisplayStyleHeatmap("cell", this.$.colFormatHeatmapMidpoint.value);
+			} else {
+				this._previewTable.setDisplayStyleHeatmap("text", this.$.colFormatHeatmapMidpoint.value);
+			}
+
+		}.bind(this));
+
+		this.$.colFormatHeatmapApplyCell.addEventListener("click", function (e) {
+			if (e.target.checked) {
+				this._previewTable.setDisplayStyleHeatmap("cell", this.$.colFormatHeatmapMidpoint.value);
+			}
+		}.bind(this));
+
+		this.$.colFormatHeatmapApplyText.addEventListener("click", function (e) {
+			if (e.target.checked) {
+				this._previewTable.setDisplayStyleHeatmap("text", this.$.colFormatHeatmapMidpoint.value);
+			}
+		}.bind(this));
+
+		this.$.colorConditionDialog.addEventListener("confirm", this._onColorConditionDialogConfirm.bind(this));
+		this.$.colorConditionDialog.addEventListener("cancel", this._onColorConditionDialogCancel.bind(this));
+
+		this._conditionList.addEventListener("value-changed", function (e) {
+			this._selectedConditionIdx = e.detail.value.id;
+		}.bind(this));
+
+		this.$.moveUpConditionButton.onclick = this._onMoveUpConditionClick.bind(this);
+		this.$.moveDownConditionButton.onclick = this._onMoveDownConditionClick.bind(this);
+
+		this.$.conditionalColorBasedonDropdown.addEventListener("value-changed", function (e) {
+			var val;
+			if (e && e.detail) {
+				val = e.detail.value;
+			}
+			this._setColorBaseOn(val);
+		}.bind(this));
+
+		this.$.colorTextBasedonDropdown.addEventListener("value-changed", this._colorTextBasedOnDropdownValueChanged.bind(this));
+		this.$.highlightBasedonDropdown.addEventListener("value-changed", this._highlightBasedOnDropdownValueChanged.bind(this));
+		this.$.colorTextBasedonAutosuggestInput.addEventListener("value-changed", (e) => {
+			if (this._data.colorTextTab.colorText) { // TODO: Handle the case where value-changed is triggered when tab is not opened
+				this._data.colorTextTab.colorText.field = e.detail.value;
+			}
+		});
+		this.$.highlightBasedonAutosuggestInput.addEventListener("value-changed", (e) => {
+			if (this._data.colorTextTab.highlight) { // TODO: Handle the case where value-changed is triggered when tab is not opened
+				this._data.colorTextTab.highlight.field = e.detail.value;
+			}
+		});
+		this.$.dateTimeList.addEventListener("value-changed", function (e) {
+			if (e && e.detail && e.detail.value) {
+				if (e.detail.value === "customDateFormat") {
+					this.$.customDateFormatWrapper.style.display = "inline-flex";
+					this._data.isCustomDateFormat = true;
+				} else {
+					this._data.isCustomDateFormat = false;
+					this.$.customDateFormatWrapper.style.display = "none";
+					this._previewTable.setDateFormatString(e.detail.value);
+				}
+
+			}
+		}.bind(this));
+
+		this.$.colFormatDateUseUtcTime.addEventListener("checked-changed", function (e) {
+			this._previewTable.setDateFormatUseGMT(e.target.checked);
+		}.bind(this));
+
+		this.$.customDateFormatInput.addEventListener("value-changed", function (e) {
+			this._previewTable.setDateFormatString(e.detail.value);
+		}.bind(this));
+
+		this.$.alignmentButtonsWrapper.addEventListener("click", function (e) {
+			if (!e || !e.target || e.target.id === "alignmentButtonsWrapper") {
+				return;
+			}
+			this._setAlignment(e.target.id);
+		}.bind(this));
+
+		this.$.colFormatFxEmphasize.addEventListener("checked-changed", function (e) {
+			this._data.valueFormatTab.fxOptions.isEmphasize = e.target.checked;
+
+		}.bind(this));
+
+		this.$.colFormatFxPipLength.addEventListener("value-changed", function (e) {
+			this._data.valueFormatTab.fxOptions.pipLength = e.detail.value;
+
+		}.bind(this));
+		/* colFormatFxSubPipLength.addEventListener check migrate  */
+		this.$.colFormatFxPipOffset.addEventListener("value-changed", function (e) {
+			this._data.valueFormatTab.fxOptions.pipStart = e.detail.value;
+
+		}.bind(this));
+
+		this.$.colFormatFxSubPipLength.addEventListener("value-changed", function (e) {
+			this._data.valueFormatTab.fxOptions.subPipLength = e.detail.value;
+
+		}.bind(this));
+
+		this.$.fxReset.onclick = function (e) {
+			this.$.colFormatFxEmphasize.checked = true;
+			this.$.colFormatFxPipLength.value = null;
+			this.$.colFormatFxPipOffset.value = null;
+			this.$.colFormatFxSubPipLength.value = null;
+		}.bind(this);
+
+		this.$.colFormatUpdatesUseColor.addEventListener("checked-changed", function (e) {
+			const isChecked = e.target.checked;
+			this._previewTable.setUpdateStyleValueText(isChecked);
+			this.$.colorTextBasedonDropdown.disabled = !isChecked;
+			this.$.colorTextBasedonAutosuggestInput.disabled = !isChecked;
+			if (isChecked) {
+				this._data.colorTextTab.colorText = {
+					field: this.$.colorTextBasedonDropdown.value
+				};
+			} else if (this._data.colorTextTab) {
+				this._data.colorTextTab.colorText = null;
+			}
+
+		}.bind(this));
+
+		this.$.colFormatUpdatesUseHighlight.addEventListener("checked-changed", function (e) {
+			const isChecked = e.target.checked;
+			this._previewTable.setUpdateStyleValueCell(isChecked);
+			this.$.highlightBasedonDropdown.disabled = !isChecked;
+			this.$.highlightBasedonAutosuggestInput.disabled = !isChecked;
+			this.$.colFormatUpdatesApplyCell.disabled = !isChecked;
+			this.$.colFormatUpdatesApplyBorder.disabled = !isChecked;
+			// Set initial border or cell when user check base on background
+			if (isChecked) {
+				this._data.colorTextTab.highlight = {
+					mode: this.$.colFormatUpdatesApplyBorder.checked ? "border" : "cell",
+					field: this.$.highlightBasedonDropdown.value
+				};
+				this._previewTable.setUpdateStyleValueCellBlinking(this.$.colFormatUpdatesApplyCell.checked); // set cell or border blinking defualt is cell blinking
+			} else if (this._data.colorTextTab) {
+				this._data.colorTextTab.highlight = null;
+			}
+
+
+		}.bind(this));
+
+		this.$.colFormatUpdatesApplyCell.addEventListener("click", function (e) {
+			if (e.target.checked) {
+				if (this._data.colorTextTab.highlight) {
+					this._data.colorTextTab.highlight.mode = "cell";
+				}
+				else {
+					this._data.colorTextTab.highlight = {
+						field: this.$.highlightBasedonDropdown.value,
+						mode: "cell"
+					};
+				}
+				this._previewTable.setUpdateStyleValueCellBlinking(e.target.checked); // set cell blinking
+			}
+
+		}.bind(this));
+
+		this.$.colFormatUpdatesApplyBorder.addEventListener("click", function (e) {
+			if (e.target.checked) {
+				if (this._data.colorTextTab.highlight) {
+					this._data.colorTextTab.highlight.mode = "border";
+				}
+				else {
+					this._data.colorTextTab.highlight = {
+						field: this.$.highlightBasedonDropdown.value,
+						mode: "border"
+					};
+				}
+				this._previewTable.setUpdateStyleValueCellBlinking(false); // set border blinking
+			}
+		}.bind(this));
+
+	}
+
+	/**
+	 * @private
+	 */
+	_initDefaultCondition() {
+		if (this.conditions.length) {
+			this._generateConditions();
+			return;
+		}
+
+		// var movementColor = userSettings["movementColor"];
+		var bgColor = ""; // WORKAROUNND: Check again when color dialog has "no color"
+
+		this.conditions = [
+			{
+				"expression": {
+					"name": "GREATER_THAN",
+					"values": [0]
+				},
+				"color": "green",
+				"backgroundColor": bgColor
+			},
+			{
+				"expression": {
+					"name": "EQUAL_TO",
+					"values": [0]
+				},
+				"color": "",
+				"backgroundColor": bgColor
+			},
+			{
+				"expression": {
+					"name": "LESS_THAN",
+					"values": [0]
+				},
+				"color": "red",
+				"backgroundColor": bgColor
+			}
+		];
+
+		this._generateConditions();
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e - event obj
+	 */
+	_colorTextBasedOnDropdownValueChanged(e) {
+		var val;
+
+		if (!this.$.colFormatUpdatesUseColor.checked) {
+			return;
+		}
+
+		if (e && e.detail) {
+			val = e.detail.value;
+		}
+
+		if (val === "ANOTHER") {
+			this.$.colorTextBasedonAutosuggestWrapper.style.display = "inline-flex";
+		} else {
+			if (!this._data.colorTextTab) {
+				this._data.colorTextTab = {};
+			}
+			this._data.colorTextTab.colorText = {
+				field: val
+			};
+			this.$.colorTextBasedonAutosuggestWrapper.style.display = "none";
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e - event object
+	 */
+	_highlightBasedOnDropdownValueChanged(e) {
+		var val;
+
+		if (!this.$.colFormatUpdatesUseHighlight.checked) {
+			return;
+		}
+
+		if (e && e.detail) {
+			val = e.detail.value;
+		}
+
+		if (val === "ANOTHER") {
+			this.$.highlightBasedonAutosuggestWrapper.style.display = "inline-flex";
+		} else if (this._data.colorTextTab && this._data.colorTextTab.highlight) {
+			this._data.colorTextTab.highlight.field = val;
+			this.$.highlightBasedonAutosuggestWrapper.style.display = "none";
+		} else {
+			if (!this._data.colorTextTab) {
+				this._data.colorTextTab = {};
+			}
+			this._data.colorTextTab.highlight = {
+				field: val
+			};
+			this.$.highlightBasedonAutosuggestWrapper.style.display = "none";
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {*} val - Value
+	 */
+	_displayFormatSelected(val) {
+		this._previewTable.setDisplayStyleMode(val);
+		this._setVisibleDisplayFormatOptions(val);
+		this._setDisplayFormat(val);
+	}
+
+	/**
+	 * @private
+	 * @param {*} val - Value
+	 */
+	_valueFormatSelected(val) {
+		this._previewTable.setFormatType(val);
+		this._setVisibleValueFormatOptions(val);
+		this._setValueFormat(val);
+		this._setValueMenuDescription(val);
+	}
+
+	/**
+	 * @private
+	 */
+	_addConditionButtonClick() {
+		this._conditionSelect.value = "GREATER_THAN";
+		this._colorConditionColor = "green";
+		this._colorConditionBackgroundColor = "";
+		this.$.textColorExample.style.backgroundColor = "green";
+		this.$.textColorExample.classList.remove("no-color");
+		this.$.backgroundColorExample.style.backgroundColor = "";
+		this.$.backgroundColorExample.classList.add("no-color");
+		this.$.colorDialogSample.style.color = "green";
+		this.$.colorDialogSample.style.backgroundColor = "";
+		this._colorConditionDialog.opened = true;
+	}
+
+	/**
+	 * @private
+	 * @param {Object} optData - initial data
+	 * @return {Array} - menu items
+	 */
+	_getValueFormatMenu(optData) {
+		var trans = this._getTranslation();
+		const menu = [
+			{ value: "general", label: trans["General"], "disabled": false },
+			{ value: "number", label: trans["Number"], "disabled": false },
+			{ value: "scaled", label: trans["Scaled Values"], "disabled": false },
+			{ value: "percent", label: trans["Percentage"], "disabled": false },
+			{ value: DATE_TIME, label: trans["Date & Time"], "disabled": false }
+		];
+		const fxItem = { value: "fx", label: trans["FX"], "disabled": false };
+
+		if (this._config.supportValueFormatOptions.fx) {
+			menu.push(fxItem);
+		}
+
+		menu.forEach(item => {
+			item.selected = item.value === this._data.valueFormatTab.formatType;
+		});
+
+		if (this._config.supportValueFormatOptions.fx) {
+			// need requirements for implementation
+			if (optData.fieldDataType === "fx") {
+				fxItem.disabled = true;
+			}
+			else {
+				menu.forEach(item => {
+					if (item !== fxItem) {
+						item.disabled = true;
+					}
+				});
+			}
+		}
+		return menu;
+	}
+
+	/** Generate DisplayStyle items
+	 * @private
+	 * @returns {Array.<{label: string, value: string}>} Object used by ELF"s coral list
+	 */
+	_getDisplayStyleMenu() {
+		var trans = this._getTranslation();
+		const menu = [
+			{ value: "general", label: trans["General"] }
+		];
+		if (this._config.supportDisplayStyleOptions.bar) {
+			menu.push({ value: "bar", label: trans["Bar"] });
+		}
+
+		if (this._config.supportDisplayStyleOptions.heatmap) {
+			menu.push({ value: "heatmap", label: trans["Heatmap"]}); // Check hidden
+		}
+
+		if (this._config.supportDisplayStyleOptions.conditionalColor) {
+			menu.push( { value: "conditionalColor", label: trans["Conditional Color"] });
+		}
+
+		menu.forEach(item => {
+			item.selected = item.value === this._data.displayStyleTab.mode;
+		});
+
+		return menu;
+	}
+
+	/**
+	 * @private
+	 */
+	_initAutosuggests() {
+		let conditionalFieldAutoSuggest = this.$.conditionalColorBasedonAutosuggest;
+
+		if (conditionalFieldAutoSuggest) {
+			conditionalFieldAutoSuggest.setAttribute("api-key", "czZTQ5MjY4");
+			conditionalFieldAutoSuggest.profile = "Field Selector";
+			conditionalFieldAutoSuggest.url = "http://localhost:3133/synapse/service/suggestions/suggest";
+			this._conditionalFieldAutoSuggest = conditionalFieldAutoSuggest;
+		}
+
+		this._initAutosuggest(this._conditionalFieldInput, this._conditionalFieldAutoSuggest);
+		let colorTextFieldAutoSuggest = this.$.colorTextBasedonAutosuggest;
+
+		if (colorTextFieldAutoSuggest) {
+			colorTextFieldAutoSuggest.setAttribute("api-key", "czZTQ5MjY4");
+			colorTextFieldAutoSuggest.profile = "Field Selector";
+			colorTextFieldAutoSuggest.url = "http://localhost:3133/synapse/service/suggestions/suggest";
+			this._colorTextFieldAutoSuggest = colorTextFieldAutoSuggest;
+			// this._colorText.append(colorTextFieldAutoSuggest);
+		}
+
+		this._initAutosuggest(this._colorTextFieldInput, this._colorTextFieldAutoSuggest);
+		this._highlightFieldInput = this.$.highlightBasedonAutosuggestInput;
+		let highlightFieldAutoSuggest = this.$.highlightBasedonAutosuggest;
+
+		if (highlightFieldAutoSuggest) {
+			highlightFieldAutoSuggest.setAttribute("api-key", "czZTQ5MjY4");
+			highlightFieldAutoSuggest.profile = "Field Selector";
+			highlightFieldAutoSuggest.url = "http://localhost:3133/synapse/service/suggestions/suggest";
+			this._highlightFieldAutoSuggest = highlightFieldAutoSuggest;
+		}
+
+		this._initAutosuggest(this._highlightFieldInput, this._highlightFieldAutoSuggest);
+	}
+
+	/**
+	 * @private
+	 * @param {Object} input - input element
+	 * @param {Object} autoSuggest - atlas-autosuggest element
+	 */
+	_initAutosuggest(input, autoSuggest) {
+		if (input && autoSuggest) {
+			autoSuggest.renderer = function (suggestion) {
+				if (suggestion.renderer) {
+					return suggestion.renderer(suggestion);
+				}
+				var el = document.createElement("atlas-suggest-item");
+				el.value = suggestion.value.subtitle;
+				el.asset = suggestion.value.vc;
+				el.label = suggestion.label;
+				el.description = suggestion.value.title;
+				el.symbol = (suggestion.value["p"]) ? /* Field */ suggestion.value["p"]["fn"] : /* Formula*/ suggestion.value["cmd"];
+				el.highlighted = suggestion.highlighted;
+				if (suggestion.hidden) {
+					el.style.display = "none";
+				}
+				return el;
+			};
+
+			autoSuggest.attach = input;
+
+			autoSuggest.addEventListener("item-select", function (e) {
+				if (!e || !e.detail) {
+					return;
+				}
+
+				if ((e.detail.method !== "click") && (e.detail.method !== "enter")) {
+					return;
+				}
+
+				if (!e.detail.suggestion) {
+					return;
+				}
+				var selectedItem = {
+					"label": e.detail.suggestion.label,
+					"field": e.detail.suggestion.value.p.fn,
+					"src": e.detail.suggestion.value.p.fsrc
+				};
+				this.updateDataWithAutosuggest(selectedItem, e.target);
+
+			}.bind(this));
+
+			autoSuggest.addEventListener("icon-click", function (e) {
+				// TODO: opening Udip dialog
+			});
+
+			autoSuggest.addEventListener("input", function (e) {
+				var value = e.srcElement.value;
+				if (value !== scope.selectedItem.label && value !== scope.selectedItem.field) {
+					var selectedItem = {
+						"label": value,
+						"field": value,
+						"src": ""
+					};
+					this.updateDataWithAutosuggest(selectedItem, e.target);
+				}
+			}.bind(this));
+		}
+	}
+
+	/**
+	 * @public
+	 * @param {Object} selectedItem - autosuggest selection
+	 * @param {Object} autoSuggest - source autosuggest element
+	 */
+	updateDataWithAutosuggest(selectedItem, autoSuggest) {
+		switch (autoSuggest.id) {
+		case "conditionalColorBasedonAutosuggest":
+			this._data.displayStyleTab.conditionalColor.field = selectedItem.field;
+			break;
+		case "colorTextBasedonAutosuggest":
+			this._data.colorTextTab.colorText.field = selectedItem.field;
+			break;
+		case "highlightBasedonAutosuggest":
+			this._data.colorTextTab.highlight.field = selectedItem.field;
+			break;
+		default:
+			break;
+		}
+	}
+
+	/**
+	 * @private
+	 * @description for load data from preview table
+	 */
+	_checkDataForLoadStructurePreview() {
+		if (this._data) {
+
+			// Parse condition color before send to preview table
+			if (this._config.data.displayStyleTab && this._config.data.displayStyleTab.conditionalColor) {
+				this._config.data.displayStyleTab.conditionalColor.conditions = this._config.data.displayStyleTab.conditionalColor.conditions.map(e => {
+					e.colors = {
+						color: e.color,
+						backgroundColor: e.backgroundColor
+					};
+					e.conditionSequence = ExpressionParser.parse(e.expression.text);
+					e.expressionObject = e.expression;
+					return e;
+				});
+			}
+
+			// load data from preview table by config from user
+			this._previewTable.loadDisplayData(this._data);
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} item - condition item
+	 * @param {*} composer
+	 * @param {Element} element
+	 * @return {Object} - condition DOM element
+	 */
+	_conditionRenderer(item, composer, element) {
+		var trans = this._getTranslation();
+		var deleteButton, modifyButton, sampleDiv, conditionTitle, sampleLabel;
+		if (!element) {
+			element = document.createElement("ef-item");
+
+			var container = document.createElement("div");
+			container.className = "condition-item";
+
+			conditionTitle = document.createElement("div");
+			conditionTitle.className = "condition-item-title left-panel";
+
+			var right = document.createElement("div");
+			right.className = "right-panel";
+
+			var sampleDivOuter = document.createElement("div");
+			sampleDivOuter.className = "condition-sample-outer";
+			sampleDiv = document.createElement("div");
+			sampleDiv.className = "condition-sample";
+			sampleDivOuter.appendChild(sampleDiv);
+
+			sampleLabel = document.createElement("label");
+			sampleDiv.appendChild(sampleLabel);
+
+			var buttonDiv = document.createElement("div");
+			buttonDiv.className = "condition-button";
+
+			modifyButton = document.createElement("ef-button");
+			modifyButton.className = "modify-button";
+			modifyButton.icon = "edit";
+			buttonDiv.appendChild(modifyButton);
+
+			deleteButton = document.createElement("ef-button");
+			deleteButton.className = "delete-button";
+			deleteButton.icon = "cross-circle";
+			buttonDiv.appendChild(deleteButton);
+
+			right.appendChild(sampleDivOuter);
+			right.appendChild(buttonDiv);
+
+			container.appendChild(conditionTitle);
+			container.appendChild(right);
+
+			element.appendChild(container);
+		} else {
+			deleteButton = element.querySelector(".delete-button");
+			modifyButton = element.querySelector(".modify-button");
+			sampleDiv = element.querySelector(".condition-sample");
+			sampleLabel = sampleDiv.getElementsByTagName("label")[0];
+			conditionTitle = element.querySelector("div.condition-item-title");
+		}
+
+		element.selected = this._selectedConditionIdx === item.value.id;
+
+		// Recommended to use tap event instead of click by elf team
+		if (deleteButton._onDeleteConditionClick) {
+			deleteButton.removeEventListener("tap", deleteButton._onDeleteConditionClick);
+		}
+		deleteButton._onDeleteConditionClick = this._onDeleteConditionClick.bind(this, item.value.id);
+		deleteButton.addEventListener("tap", deleteButton._onDeleteConditionClick);
+		deleteButton.title = trans["Remove"];
+
+		// Recommended to use tap event instead of click by elf team
+		if (modifyButton._onEditConditionClick) {
+			modifyButton.removeEventListener("tap", modifyButton._onEditConditionClick);
+		}
+		modifyButton._onEditConditionClick = this._onEditConditionClick.bind(this, item.value.id);
+		modifyButton.addEventListener("tap", modifyButton._onEditConditionClick);
+		modifyButton.title = trans["Edit"];
+
+		sampleLabel.innerText = trans["Sample Format"];
+
+		this._applyStyleObject(sampleDiv, {
+			"background-color": item.value.backgroundColor
+		});
+
+		this._applyStyleObject(sampleLabel, {
+			"color": item.value.color,
+			"text-align": this.conditionAlignment
+		});
+
+		conditionTitle.title = item.label;
+		conditionTitle.innerText = item.label;
+
+		return element;
+	}
+
+	/**
+	 * @private
+	 * @param {string} id - condition id
+	 */
+	_onDeleteConditionClick(id) {
+		var selectedConditionIdx = this._isEmpty(id) ? this._selectedConditionIdx : id;
+
+		if (this._isEmpty(selectedConditionIdx) || selectedConditionIdx < 0 || selectedConditionIdx >= this.conditions.length) {
+			return;
+		}
+
+		this.conditions.splice(selectedConditionIdx, 1);
+		this._createConditionListItems();
+		this._setConditionalColor();
+
+	}
+
+	/**
+	 * @private
+	 * @param {string} id - condition id
+	 */
+	_onEditConditionClick(id) {
+		var selectedConditionIdx = this._isEmpty(id) ? this._selectedConditionIdx : id;
+		this._selectedConditionIdx = selectedConditionIdx;
+
+		if (this._isEmpty(selectedConditionIdx) || selectedConditionIdx < 0 || selectedConditionIdx >= this.conditions.length) {
+			return;
+		}
+
+		var data = this.conditions[selectedConditionIdx];
+
+		if (data && data.expression) {
+			this._conditionSelect.value = data.expression.name;
+			this._colorConditionColor = data.color;
+			this.$.conditionTextValue.value = data.expression.values[0];
+			this.$.conditionNumberValue.value = data.expression.values[0];
+			this.$.conditionFirstValue.value = data.expression.values[0];
+			this.$.conditionSecondValue.value = data.expression.values[1];
+			this.$.textColorExample.style.backgroundColor = data.color;
+			this.$.textColorExample.classList.toggle("no-color", !data.color);
+			this._colorConditionBackgroundColor = data.backgroundColor;
+			this.$.backgroundColorExample.style.backgroundColor = data.backgroundColor;
+			this.$.backgroundColorExample.classList.toggle("no-color", !data.backgroundColor);
+			this.$.colorDialogSample.style.color = data.color;
+			this.$.colorDialogSample.style.backgroundColor = data.backgroundColor;
+		}
+
+		this._isConditionEditing = true;
+		this._colorConditionDialog.opened = true;
+	}
+
+	/**
+	 * @private
+	 * @param {number} selectedIndex -selected condition index
+	 * @param {number} moveCount - number of moves to do
+	 */
+	_swapCondition(selectedIndex, moveCount) {
+		var temp = this.conditions[selectedIndex];
+		var move = selectedIndex + moveCount;
+
+		this.conditions[selectedIndex] = this.conditions[move];
+		this.conditions[move] = temp;
+		this._createConditionListItems(move);
+		this._setConditionalColor();
+	}
+
+	/**
+	 * @private
+	 */
+	_onMoveUpConditionClick() {
+		var selectedConditionIdx = this._selectedConditionIdx;
+
+		if (this._isEmpty(selectedConditionIdx) || selectedConditionIdx <= 0 || selectedConditionIdx >= this.conditions.length) {
+			return;
+		}
+
+		this._swapCondition(selectedConditionIdx, -1);
+		this._setConditionalColor();
+
+	}
+
+	/**
+	 * @private
+	 */
+	_onMoveDownConditionClick() {
+		var selectedConditionIdx = this._selectedConditionIdx;
+
+		if (this._isEmpty(selectedConditionIdx) || selectedConditionIdx < 0 || selectedConditionIdx >= (this.conditions.length - 1)) {
+			return;
+		}
+
+		this._swapCondition(selectedConditionIdx, 1);
+		this._setConditionalColor();
+	}
+
+	/**
+	 * @private
+	 * @param {Array=} opt_fields - fields for dropdowns
+	 */
+	_fillBaseFieldSelectors(opt_fields) {
+		var trans = this._getTranslation();
+		var i;
+		let data = [
+			{ "id": "this-column", "label": trans["This Column"], "value": this._constSelfColumn },
+			{ "id": "another-field", "label": trans["Another Field"], "value": "ANOTHER" },
+			{ "type": "divider" }
+		];
+
+		if (opt_fields && opt_fields.length > 0) {
+			for (i = 0; i < opt_fields.length; i++) {
+				data.push({ "id": opt_fields[i], "label": opt_fields[i], "value": opt_fields[i] });
+			}
+		}
+		var condFieldData = JSON.parse(JSON.stringify(data));
+		var condFieldIndex = this._config.defaultToSelf ? 0 : 1;
+
+		var displayStyleTab = this._data ? this._data.displayStyleTab : null;
+		var conditionalColor = displayStyleTab ? displayStyleTab.conditionalColor : null;
+		var condColorField = conditionalColor ? conditionalColor.field : "";
+		if (!condColorField) {
+			condColorField = this._constSelfColumn;
+		}
+
+		if (condColorField) {
+			for (i = 0; i < condFieldData.length; i++) {
+				if (condFieldData[i].value === condColorField) {
+					condFieldIndex = i;
+					condFieldData[i].selected = true;
+				}
+			}
+		}
+
+		if (condColorField !== "MULTIPLE" && condColorField !== "default") {
+			condFieldData[condFieldIndex].selected = true;
+		}
+
+		if (condFieldIndex === 1) {
+			this.$.conditionalColorBasedonAutosuggestInput.value = condColorField;
+			this.$.conditionalColorBasedonAutosuggestInput.style.display = "inline-flex";
+		}
+
+		this.$.conditionalColorBasedonDropdown.data = condFieldData;
+		var colorFieldData = JSON.parse(JSON.stringify(data));
+		var colorFieldIndex = this._config.defaultToSelf ? 0 : 1;
+		var colorField;
+
+		var colorTextTab = this._data ? this._data.colorTextTab : null;
+		if (colorTextTab && colorTextTab.colorText && colorTextTab.colorText.field) {
+			colorField = colorTextTab.colorText.field;
+		}
+		else {
+			colorField = this._config.defaultToSelf ? "SELF" : "CF_NETCHNG";
+		}
+
+		if (colorField) {
+			for (i = 0; i < colorFieldData.length; i++) {
+				if (colorFieldData[i].value === colorField) {
+					colorFieldIndex = i;
+				}
+			}
+		}
+
+		if (colorField !== "MULTIPLE" && colorField.toLowerCase() !== "default") {
+			colorFieldData[colorFieldIndex].selected = true;
+		}
+
+		if (colorFieldIndex === 1) {
+			this.$.colorTextBasedonAutosuggestInput.value = colorField;
+			this.$.colorTextBasedonAutosuggestWrapper.style.display = "inline-flex";
+		}
+
+		this.$.colorTextBasedonDropdown.data = colorFieldData;
+		var highlightFieldData = JSON.parse(JSON.stringify(data));
+		var highlightFieldIndex = this._config.defaultToSelf ? 0 : 1;
+		var highlightField;
+
+		if (colorTextTab && colorTextTab.highlight && colorTextTab.highlight.field) {
+			highlightField = colorTextTab.highlight.field;
+		}
+		else {
+			highlightField = this._config.defaultToSelf ? "SELF" : "CF_TICK";
+		}
+
+		if (colorField) {
+			for (i = 0; i < highlightFieldData.length; i++) {
+				if (highlightFieldData[i].value === highlightField) {
+					highlightFieldIndex = i;
+				}
+			}
+		}
+
+		if (highlightField !== "MULTIPLE" && highlightField.toLowerCase() !== "default") {
+			highlightFieldData[highlightFieldIndex].selected = true;
+		}
+
+		if (highlightFieldIndex === 1) {
+			this.$.highlightBasedonAutosuggestInput.value = colorField;
+			this.$.highlightBasedonAutosuggestWrapper.style.display = "inline-flex";
+		}
+
+		this.$.highlightBasedonDropdown.data = highlightFieldData;
+	}
+
+	/**
+	 * @private
+	 * @param {*} value - Value
+	 */
+	_setAlignment(value) {
+		if (!value) return;
+
+		if (value.includes("left")) {
+			this._previewTable.setDisplayStyleAlignment("left");
+		}
+
+		else if (value.includes("center")) {
+			this._previewTable.setDisplayStyleAlignment("center");
+		}
+
+		else if (value.includes("right")) {
+			this._previewTable.setDisplayStyleAlignment("right");
+
+		}
+
+	}
+
+	/**
+	 * @private
+	 * @param {string} value - selected value
+	 */
+	_setVisibleValueFormatOptions(value) {
+		if (value !== "general" && value !== DATE_TIME && value !== "fx") {
+			this.$.valueFormatOther.style.display = "block";
+			if (value === "percent" || value === "number" || value === "scaled") {
+				this.$.valueFormatNumberOrPercentage.style.display = "block";
+			}
+			else {
+				this.$.valueFormatNumberOrPercentage.style.display = "none";
+			}
+			if (value === "scaled") {
+				this.$.valueFormatScaledValues.style.display = "block";
+			}
+			else {
+				this.$.valueFormatScaledValues.style.display = "none";
+			}
+			if (value === "percent") {
+				this.$.valueFormatPercentage.style.display = "block";
+			}
+			else {
+				this.$.valueFormatPercentage.style.display = "none";
+			}
+		}
+		else {
+			this.$.valueFormatOther.style.display = "none";
+		}
+
+		if (value === DATE_TIME) {
+			this.$.valueFormatDateTime.style.display = "block";
+		}
+		else {
+			this.$.valueFormatDateTime.style.display = "none";
+		}
+
+		if (value === "fx") {
+			this.$.valueFormatFx.style.display = "block";
+		}
+		else {
+			this.$.valueFormatFx.style.display = "none";
+		}
+
+		if (!value) {
+			this.$.valueFormatMessage.style.display = "block";
+		}
+		else {
+			this.$.valueFormatMessage.style.display = "none";
+		}
+
+	}
+
+	/**
+	 * @private
+	 * @param {string} value - selected value
+	 */
+	_setValueFormat(value) {
+		if (value) {
+			this._data.valueFormatTab.formatType = value;
+		}
+
+		var decimalPlacesValue = Number(this.$.colFormatValueDecimalPlaces.value);
+
+
+		switch (value) {
+		case "general":
+			this._previewTable.setValueFormatGeneral();
+			break;
+		case "number":
+			this._previewTable.setValueFormatDecimalPlaces(decimalPlacesValue);
+			this._previewTable.setValueFormatShowSeparatorSign(this.$.colFormatValueUseSeparator.checked);
+			this._previewTable.setValueFormatShowPlusSign(this.$.colFormatPlusSign.checked);
+			break;
+		case "scaled":
+			var scaleUnit = this.$.colFormatValueScaledMillions.checked ? "m" : "b";
+			this._previewTable.setValueFormatScaled(scaleUnit);
+			this._previewTable.setValueFormatShowSeparatorSign(this.$.colFormatValueUseSeparator.checked);
+			this._previewTable.setValueFormatShowPlusSign(this.$.colFormatPlusSign.checked);
+			break;
+		case "percent":
+			this._previewTable.setValueFormatShowPercentSignWithMultiply100(this.$.colFormatPercentageMultiply.checked);
+			this._previewTable.setValueFormatShowSeparatorSign(this.$.colFormatValueUseSeparator.checked);
+			this._previewTable.setValueFormatShowPlusSign(this.$.colFormatPlusSign.checked);
+			break;
+		case DATE_TIME:
+			this._previewTable.setDateFormatString(this.$.dateTimeList.value || "M/D/YY");
+			this._previewTable.setDateFormatUseGMT(this.$.colFormatDateUseUtcTime.checked);
+			this._previewTable.setDateFormatLanguage(this._lang);
+			break;
+		case "fx":
+			this._data.valueFormatTab.fxOptions = {
+				isEmphasize: this.$.colFormatFxEmphasize.checked,
+				pipLength: this.$.colFormatFxPipLength.value,
+				pipStart: this.$.colFormatFxPipOffset.value,
+				subPipLength: this.$.colFormatFxSubPipLength.value
+			};
+			break;
+		default:
+			break;
+		}
+
+
+	}
+
+	/**
+	 * @private
+	 * @param {string} value - selected value
+	 */
+	_setVisibleDisplayFormatOptions(value) {
+		if (value === "general") {
+			this.$.displayFormatGeneral.style.display = "block";
+		}
+		else {
+			this.$.displayFormatGeneral.style.display = "none";
+		}
+
+		if (value === "bar") {
+			this.$.displayFormatBar.style.display = "block";
+		}
+		else {
+			this.$.displayFormatBar.style.display = "none";
+		}
+
+		if (value === "heatmap") {
+			this.$.displayFormatHeatmap.style.display = "block";
+		}
+		else {
+			this.$.displayFormatHeatmap.style.display = "none";
+		}
+
+		if (value === "conditionalColor") {
+			this.$.displayFormatConditionalColor.style.display = "block";
+			this.$.displayFormatConditionsPanel.style.display = "block";
+		}
+		else {
+			this.$.displayFormatConditionalColor.style.display = "none";
+			this.$.displayFormatConditionsPanel.style.display = "none";
+		}
+
+		if (!value) {
+			this.$.displayFormatMessage.style.display = "block";
+		}
+		else {
+			this.$.displayFormatMessage.style.display = "none";
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {string} value - selected value
+	 */
+	_setDisplayFormat(value) {
+		this._data.displayStyleTab.mode = value;
+		if (value === "general") {
+			this._previewTable.setDisplayStyleMode("general");
+			this.$.colFormatUpdatesUseColor.disabled = false;
+
+		} else if (value === "bar") {
+			this._previewTable.setDisplayStylePercentBarShowValue(this.$.colFormatBarShowValues.checked);
+			this._previewTable.setDisplayStylePercentBarIsUsedMovement(this.$.colFormatBarUseMovementColor.checked);
+			this.$.colFormatUpdatesUseColor.disabled = false;
+
+		} else if (value === "heatmap") {
+			var midPoint = this.$.colFormatHeatmapMidpoint.value ? this.$.colFormatHeatmapMidpoint.value : 0;
+			var mode = this.$.colFormatHeatmapApplyText.checked ? "text" : "cell";
+			this.$.colFormatUpdatesUseColor.checked = false;
+			this.$.colFormatUpdatesUseColor.disabled = true;
+			this._previewTable.setUpdateStyleValueText(false);
+			this._previewTable.setDisplayStyleHeatmap(mode, midPoint);
+			this._previewTable.setUpdateStyleValueText(false);
+		} else if (value === "conditionalColor") {
+			this.$.colFormatUpdatesUseColor.checked = false;
+			this.$.colFormatUpdatesUseColor.disabled = true;
+			this._previewTable.setUpdateStyleValueText(false);
+			this._data.displayStyleTab.conditionalColor = {};
+			this._data.displayStyleTab.conditionalColor.conditions = this.conditions;
+			this._setConditionalColor();
+		}
+	}
+
+	/**
+	 * @private
+	 */
+	_setConditionalColor() {
+		var conditionFunctions = this.conditions.map(e => {
+			return {
+				conditionSequence: ExpressionParser.parse(e.expression.text),
+				colors: {
+					color: e.color,
+					backgroundColor: e.backgroundColor
+				},
+				expressionObject: e.expression,
+				expression: e.expression.text,
+				fields: e.fields
+			};
+		});
+
+		this._previewTable.setDisplayStyleConditional(conditionFunctions);
+	}
+
+	/**
+	 * @private
+	 * @param {string} value
+	 */
+	_setColorBaseOn(value) {
+		if (value && !this._data.displayStyleTab.conditionalColor) {
+			this._data.displayStyleTab.conditionalColor = {};
+		}
+		if (value === "ANOTHER") {
+			this.$.conditionalColorBasedonAutosuggestInput.style.display = "block";
+		}
+		else {
+			this.$.conditionalColorBasedonAutosuggestInput.style.display = "none";
+			this._data.displayStyleTab.conditionalColor.field = value;
+		}
+		this._generateConditions();
+	}
+	/**
+	 * @private
+	 * @param {string} value - selected value
+	 */
+	_setColorCondition(value) {
+		let condition = this._conditionDict[value];
+
+		if (condition) {
+			if (condition.valueType === "number") {
+				this.$.conditionNumber.style.display = "block";
+				this.$.numberValueLabel.innerText = condition.text + ":";
+			}
+			else {
+				this.$.conditionNumber.style.display = "none";
+			}
+
+			if (condition.valueType === "twoNumbers") {
+				this.$.conditionTwoNumbers.style.display = "block";
+			}
+			else {
+				this.$.conditionTwoNumbers.style.display = "none";
+			}
+
+			if (condition.valueType === "text") {
+				this.$.conditionText.style.display = "block";
+			}
+			else {
+				this.$.conditionText.style.display = "none";
+			}
+
+			if (!condition.valueType && condition.valueType === "none") {
+				this.$.conditionNone.style.display = "block";
+			}
+			else {
+				this.$.conditionNone.style.display = "none";
+			}
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {string} value - selected value;
+	 */
+	_setValueMenuDescription(value) {
+		var trans = this._getTranslation();
+		switch (value) {
+		case "general":
+			this.$.valueMenuDesc.title = trans["General format items have no specific number format."];
+			break;
+		case "number":
+			this.$.valueMenuDesc.title = trans["Number format is used for general display of numbers."];
+			break;
+		case "scaled":
+			this.$.valueMenuDesc.title = trans["Scaled values format is used for displaying large numbers."];
+			break;
+		case "percent":
+			this.$.valueMenuDesc.title = trans["Percentage format is used to display the result with a percent sign."];
+			break;
+		case DATE_TIME:
+			this.$.valueMenuDesc.title = trans["Date & time format displays date and time serial numbers as date values"];
+			break;
+		case "fx":
+			this.$.valueMenuDesc.title = trans["FX format is used for Bid/Offer columns."];
+			break;
+		default:
+			this.$.valueMenuDesc.title = trans["General format items have no specific number format."];
+			break;
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e - event object
+	 */
+	_onColorConditionDialogConfirm(e) {
+		if (e.cancelled) {
+			return;
+		}
+
+		let condition = this._conditionDict[this._conditionSelect.value];
+		this._colorConditionEditState.expression.name = this._conditionSelect.value;
+
+		if (condition) {
+			if (condition.valueType === "number") {
+				this._colorConditionEditState.expression.values = [this.$.conditionNumberValue.value];
+			}
+			if (condition.valueType === "twoNumbers") {
+				this._colorConditionEditState.expression.values = [this.$.conditionFirstValue.value, this.$.conditionSecondValue.value];
+			}
+			if (condition.valueType === "text") {
+				this._colorConditionEditState.expression.values = [this.$.conditionTextValue.value];
+			}
+		}
+
+		this._colorConditionEditState.color = this._colorConditionColor;
+		this._colorConditionEditState.backgroundColor = this._colorConditionBackgroundColor;
+		var newCondition = JSON.parse(JSON.stringify(this._colorConditionEditState));
+
+		if (this._isConditionEditing) {
+			this.conditions[this._selectedConditionIdx] = newCondition;
+			this._isConditionEditing = false;
+		}
+		else {
+			this.conditions.push(newCondition);
+		}
+
+		this._generateConditions();
+		this._createConditionListItems();
+		this._setConditionalColor();
+	}
+
+	/**
+	 * @private
+	 */
+	_onColorConditionDialogCancel() {
+		this._isConditionEditing = false;
+	}
+
+	/**
+	 * @private
+	 */
+	_generateConditions() {
+		if (!this.conditions) {
+			return;
+		}
+
+		var len = this.conditions.length;
+
+		for (var i = 0; i < len; i++) {
+			this._createCondition(this.conditions[i]);
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} newCondition - new condition object
+	 */
+	_createCondition(newCondition) {
+		let conditionalColorField;
+
+		if (this._data.displayStyleTab && this._data.displayStyleTab.conditionalColor) {
+			conditionalColorField = this._data.displayStyleTab.conditionalColor.field;
+		}
+
+		if (!conditionalColorField) {
+			conditionalColorField = this._constSelfColumn;
+		}
+
+		newCondition["fields"] = [{
+			"field": conditionalColorField,
+			"displayName": "",
+			"src": ""
+		}];
+
+		if (Array.isArray(newCondition.expression.values)) {
+			newCondition.expression.text = this._getExpression(conditionalColorField, newCondition["expression"]);
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {string} field - base field
+	 * @param {Object} expression - condition expression
+	 * @return {string} - formatted expression string
+	 */
+	_getExpression(field, expression) {
+		const val0 = expression.values[0];
+		const val1 = expression.values[1];
+
+		return this._formatCondition(this._conditionDict[expression.name].expression, field, val0, val1);
+	}
+
+	/**
+	 * @private
+	 * @param {string} format - formatting template
+	 * @return {string} - formatted condition
+	 */
+	_formatCondition(format) {
+		var args = Array.prototype.slice.call(arguments, 1);
+		return format.replace(/{(\d+)}/g, (function (match, number) {
+			return void 0 !== args[number] ? args[number] : match;
+		}));
+	}
+
+	/**
+	 * @private
+	 * @param {Object} data - condition data object
+	 * @return {string} - condition string
+	 */
+	_conditionToString(data) {
+		var trans = this._getTranslation();
+
+		// eslint-disable-next-line no-undefined
+		if (data === undefined || !conditionDict[data.name]) { // TODO: Fix this
+			return "";
+		}
+
+		var def = conditionDict[data.name];
+		var text;
+
+		switch (def.valueType) {
+		case "number":
+			text = this._formatCondition(trans[def.displayFormat], data.values[0]);
+			break;
+		case "twoNumbers":
+			text = this._formatCondition(trans[def.displayFormat], data.values[0], data.values[1]);
+			break;
+		case "none":
+			text = trans[def.displayFormat];
+			break;
+		default:
+			text = this._formatCondition(trans[def.displayFormat], data.values[0]);
+		}
+		return text;
+	}
+
+	/**
+	 * @private
+	 * @param {number} optSelectedIndex - selected condition index
+	 */
+	_createConditionListItems(optSelectedIndex) {
+		var conditions = this.conditions;
+		var conditionList = this._conditionList;
+
+		if (!conditions || !conditionList) {
+			return;
+		}
+
+		// Create list
+		var data = [];
+
+		for (var i = conditions.length; --i >= 0;) {
+			var condition = conditions[i];
+			data.unshift({
+				label: this._conditionToString(condition.expression), // Need to convert
+				value: Object.assign({
+					id: i
+				}, condition)
+			});
+		}
+		conditionList.data = data;
+
+		if (this._isEmpty(optSelectedIndex) || optSelectedIndex < 0 || optSelectedIndex >= data.length) {
+			// eslint-disable-next-line no-undefined
+			this._selectedConditionIdx = undefined;
+		}
+		else {
+			this._selectedConditionIdx = optSelectedIndex;
+
+			// Set selection
+			conditionList.selectItem(conditionList.data[optSelectedIndex]);
+		}
+		if (this._data && this._data.displayStyleTab && this._data.displayStyleTab.conditionalColor) {
+			this._data.displayStyleTab.conditionalColor.conditions = this.conditions;
+		}
+
+
+	}
+
+
+	/**
+	 * @private
+	 * @return {Object} - dialog output object
+	 */
+	_createOutput() {
+		// TODO: Handle the case where there is no data
+
+		var formatType = this._data.valueFormatTab.formatType;
+
+		let output = this._previewTable.getStructureFormat();
+
+		// restore user"s formatType for datetime type
+		var userFormatType = this.data.valueFormatTab.formatType;
+		if (formatType === DATE_TIME ) {
+			output.valueFormatTab.isCustomDateFormat = this._data.isCustomDateFormat ? this._data.isCustomDateFormat : false;
+			if(toDateTimeType(userFormatType)) {
+				output.valueFormatTab.formatType = userFormatType;
+			}
+		}
+
+
+		// Check fx section
+		if (formatType === "fx") {
+			const fxOptions = Object.assign({}, this._data.valueFormatTab.fxOptions);
+			output.valueFormatTab = this._data.valueFormatTab;
+			output.valueFormatTab.fxOptions = {
+				isEmphasize: fxOptions.isEmphasize,
+				pipLength: fxOptions.pipLength,
+				pipStart: fxOptions.pipStart,
+				subPipLength: fxOptions.subPipLength
+			};
+		}
+
+		// Conditional section
+		if (output.displayStyleTab && output.displayStyleTab.mode === "conditionalColor") {
+			// output.displayStyleTab = output.displayStyleTab;
+
+			const field = output.displayStyleTab.conditionalColor.field || this._constSelfColumn;
+			// compatibility with general and monitor
+			output.displayStyleTab.conditionalColor.conditions.forEach(condition => {
+				if (typeof condition.expression !== "string") {
+					condition.expressionObject = condition.expression;
+					condition.expression = condition.expression.text.replace(this._constSelfColumn, field);
+				}
+			});
+		}
+
+		// ColorTextTab section when data updated
+		if (output.colorTextTab && (output.colorTextTab.isTextChangedStyle || output.colorTextTab.isCellChangeStyle)) {
+			output.colorTextTab = {};
+			if (this.$.colFormatUpdatesUseColor.checked) {
+				output.colorTextTab.colorText = this._data.colorTextTab.colorText; // Field of base on color text changed defualt is "THIS_COLUMN"
+			}
+			if (this.$.colFormatUpdatesUseHighlight.checked) {
+				output.colorTextTab.highlight = this._data.colorTextTab.highlight; // Field of base on color background or border changed defualt is "THIS_COLUMN"
+				// compatibility with def-Grid
+				output.colorTextTab.blinking = {
+					field: this._data.colorTextTab.highlight.field,
+					border: this._data.colorTextTab.highlight.mode === "border"
+				};
+
+			}
+		}
+
+		return output;
+	}
+
+	/**
+	 * @private
+	 */
+	_onConfirm() {
+		var output = this._createOutput();
+		var event = new CustomEvent("confirm", {
+			cancelable: true,
+			detail: {
+				data: output,
+				value: output
+			}
+		});
+		this.dispatchEvent(event);
+		this.hide();
+	}
+
+	/**
+	 * @private
+	 */
+	 _onCancel() {
+		var event = new CustomEvent("cancel");
+		this.dispatchEvent(event);
+		this.hide();
+	}
+
+	/**
+	 * @private
+	 * @param {Object} el - dom element to apply styles
+	 * @param {Object} styleObject - styles to apply
+	 * @param {boolean} append - true if append styles, false if replace
+	 */
+	_applyStyleObject(el, styleObject, append) {
+		var styleString = "";
+
+		if (!el) {
+			return;
+		}
+
+		for (var property in styleObject) {
+			if (styleObject[property] == null) {
+				continue;
+			}
+
+			styleString += property + ":" + styleObject[property] + "; ";
+		}
+
+		var elStyle = el.style;
+
+		if (typeof elStyle.cssText === "undefined") {
+			el.setAttribute("style", styleString);
+
+			return;
+		}
+
+		if (append) {
+			// TODO: Add regexp for checking the character `;` at the end of line.
+			elStyle.cssText += styleString;
+		}
+		else {
+			elStyle.cssText = styleString;
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {Object} value - value to check
+	 * @param {boolean} allowEmptyString - allow empty strings
+	 * @return {boolean} - boolean check result
+	 */
+	_isEmpty(value, allowEmptyString) {
+		return (value === null || typeof value === "undefined") || (!allowEmptyString ? value === "" : false) || (this._isArray(value) && value.length === 0);
+	}
+
+	/**
+	 * @private
+	 * @param {Object} value - value to check
+	 * @return {boolean} - boolean check result
+	 */
+	_isArray(value) {
+		return Object.prototype.toString.call(value) === "[object Array]";
+	}
+
+
+	/**
+	 * @private
+	 * @return {Array}
+	 */
+	_getDateTimeListData() {
+		var lang = this._translation[this._lang] ? this._lang : "en";
+		var trans = this._getTranslation();
+		return [
+			{ type: "header", label: trans["Date"] },
+			{ value: "M/D/YY", label: "M/D/YY" },
+			{ value: "MM/DD/YY", label: "MM/DD/YY" },
+			{ value: "M/D/YYYY", label: "M/D/YYYY" },
+			{ value: "MM/DD/YYYY", label: "MM/DD/YYYY" },
+			{ value: "D-MMM-YY", label: "D-MMM-YY" },
+			{ value: "DD-MMM-YY", label: "DD-MMM-YY" },
+			{ value: "D-MMM-YYYY", label: "D-MMM-YYYY" },
+			{ value: "DD-MMM-YYYY", label: "DD-MMM-YYYY" },
+			{ value: "MMMM D, YYYY", label: "MMMM D, YYYY" },
+			{ value: "YYYY-MM-DD", label: "YYYY-MM-DD" },
+			{ value: "YYYYMMDD", label: "YYYYMMDD" },
+			{ value: "YYYY/M/D", label: "YYYY/M/D" },
+			{ value: "YYYY/MM/DD", label: "YYYY/MM/DD" },
+			{ value: "YYYY年M月D日", label: "YYYY年M月D日", hidden: (lang !== "ja" && lang !== "zh") }, // Show when set to Japanese or Chinese
+
+			{ type: "header", label: trans["Time"] },
+			{ value: "h:mm A", label: "h:mm A" },
+			{ value: "hh:mm A", label: "hh:mm A" },
+			{ value: "h:mm:ss A", label: "h:mm:ss A" },
+			{ value: "hh:mm:ss A", label: "hh:mm:ss A" },
+			{ value: "H:mm", label: "H:mm" },
+			{ value: "HH:mm", label: "HH:mm" },
+			{ value: "H:mm:ss", label: "H:mm:ss" },
+			{ value: "HH:mm:ss", label: "HH:mm:ss" },
+
+			{ type: "header", label: trans["Date & Time"] },
+			{ value: "M/D/YY h:mm A", label: "M/D/YY h:mm A" },
+			{ value: "M/D/YY h:mm:ss A", label: "M/D/YY h:mm:ss A" },
+			{ value: "M/D/YY H:mm", label: "M/D/YY H:mm" },
+			{ value: "M/D/YY H:mm:ss", label: "M/D/YY H:mm:ss" },
+			{ value: "MM/DD/YY h:mm A", label: "MM/DD/YY h:mm A" },
+			{ value: "MM/DD/YY h:mm:ss A", label: "MM/DD/YY h:mm:ss A" },
+			{ value: "MM/DD/YY H:mm", label: "MM/DD/YY H:mm" },
+			{ value: "MM/DD/YY H:mm:ss", label: "MM/DD/YY H:mm:ss" },
+			{ value: "M/D/YYYY h:mm A", label: "M/D/YYYY h:mm A" },
+			{ value: "M/D/YYYY h:mm:ss A", label: "M/D/YYYY h:mm:ss A" },
+			{ value: "M/D/YYYY H:mm", label: "M/D/YYYY H:mm" },
+			{ value: "M/D/YYYY H:mm:ss", label: "M/D/YYYY H:mm:ss" },
+			{ value: "MM/DD/YYYY h:mm A", label: "MM/DD/YYYY h:mm A" },
+			{ value: "MM/DD/YYYY h:mm:ss A", label: "MM/DD/YYYY h:mm:ss A" },
+			{ value: "MM/DD/YYYY H:mm", label: "MM/DD/YYYY H:mm" },
+			{ value: "MM/DD/YYYY H:mm:ss", label: "MM/DD/YYYY H:mm:ss" },
+			{ value: "YYYY年M月D日 H:mm", label: "YYYY年M月D日 H:mm", hidden: (lang !== "ja" && lang !== "zh") }, // Show when set to Japanese or Chinese
+
+			{ type: "header", label: trans["Custom"] },
+			{ value: "customDateFormat", label: trans["User Defined"] }
+		];
+	}
+
+	/** Gets the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.
+	 * @private
+	 * @param {Object} obj  The object to query
+	 * @param {string} path The path of the property to get.
+	 * @param {*} defaultValue The value returned for undefined resolved values.
+	 * @returns {*} Returns the resolved value
+	 */
+	_getDeepValue(obj, path, defaultValue) {
+		const paths = path.split(".");
+		const length = paths.length;
+		let current = obj;
+
+		for (let i = 0; i < length; i++) {
+			const key = paths[i];
+			// eslint-disable-next-line no-undefined
+			if (current[key] === undefined) { // TODO: Fix this
+				return defaultValue;
+			}
+			else {
+				current = current[key];
+			}
+		}
+
+		return current;
+	}
+
+}
+
+customElement("column-format-dialog")(ColumnFormatDialog);
+
+export { ColumnFormatDialog };
+export default ColumnFormatDialog;