@refinitiv-ui/efx-grid 6.0.4 → 6.0.6

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -18,16 +18,17 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {boolean=} tabToMove=false If enabled, pressing tab key while editor is active will open editor on the next editable cell.
 * @property {boolean=} contentSource="textContent" By default, the text in the editor will be populated with textContent of the target cell. Use "field" to populated data from grid's data model. Use "empty" to shows empty editor.
 * @property {boolean=} inlineStyling=false force inline styles regardless of elf version.
-* @property {boolean=} disablingScroll=false Scrollbar will be frozen when editor opened.
+* @property {boolean=} disablingScroll=false Scrollbar will be frozen when editor opened. Deprecated in favor of uiBlocking
+* @property {boolean=} uiBlocking=false append transparent overlay to block ui interaction
 * @property {Function=} preEditorOpening=null Handler before editor is opened
 * @property {Function=} editorOpened=null Handler after editor is opened
 * @property {Function=} beforeCommit=null Handler before data binding, allowing data type conversion
 * @property {Function=} editorClosed=null Handler after editor is closed
 * @property {Function=} keyUp=null Handler for each keyup of the input text box
-* @property {Function=} beforeRowCommit=null Handler before all editor in row commit
-* @property {Function=} rowEditorClosed=null Handler after all editors closed
-* @property {boolean=} uiBlocking=false append transparent overlay to block ui interaction
-* @property {Element=} autoSuggest=null Element of ef-autosuggest for handled with input cell
+* @property {Function=} beforeRowCommit=null Handler before committing from all editors in the row
+* @property {Function=} rowEditorClosed=null Handler after closing of all editors
+* @property {Element=} autoSuggest=null Element of ef-autosuggest or atlas-autosuggest for handled with input cell
+* @property {boolean=} closingOnScroll=true If disabled, scrolling will not automatically close editor. autoHiding, closingOnScroll
 */
 
 /** @typedef {Object} InCellEditingPlugin~Cache
@@ -67,7 +68,7 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @property {number} rowIndex
 * @property {string} field
 * @property {Element} inputElement
-* @property {Element} autoSuggest
+* @property {Element} autoSuggest ef-autosuggest or atlas-autosuggest
 * @example
 * var cep = new InCellEditingPlugin();
 * cep.listen("editorOpened", function(e) {
@@ -154,13 +155,12 @@ var InCellEditingPlugin = function InCellEditingPlugin(options) {
   t._onTextKeyUp = t._onTextKeyUp.bind(t);
   t._onTouchStart = t._onTouchStart.bind(t);
   t._onTouchEnd = t._onTouchEnd.bind(t);
-  t._onTimer = t._onTimer.bind(t);
+  t._onTouchTimer = t._onTouchTimer.bind(t);
   t._createContentEditor = t._createContentEditor.bind(t);
   t._createTitleEditor = t._createTitleEditor.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onValueChanged = t._onValueChanged.bind(t);
   t._onAutoSuggestItemSelected = t._onAutoSuggestItemSelected.bind(t);
-  t._onAutoSuggestTapStart = t._onAutoSuggestTapStart.bind(t);
   t._hosts = [];
 
   if (options) {
@@ -271,7 +271,7 @@ InCellEditingPlugin.prototype._autoCommitText = false;
 * @private
 */
 
-InCellEditingPlugin.prototype._timerId = 0;
+InCellEditingPlugin.prototype._touchTimerId = 0;
 /** @type {number}
 * @private
 */
@@ -336,6 +336,21 @@ InCellEditingPlugin.prototype._defaultTag = "input";
 */
 
 InCellEditingPlugin.prototype._rowClosing = false;
+/** @type {boolean}
+* @private
+*/
+
+InCellEditingPlugin.prototype._closingOnScroll = true;
+/** @type {number}
+* @private
+*/
+
+InCellEditingPlugin.prototype._editorTimerId = 0;
+/** @type {boolean}
+* @private
+*/
+
+InCellEditingPlugin._scrolling = false;
 /** @type {number}
 * @private
 */
@@ -352,11 +367,11 @@ InCellEditingPlugin._primaryColor = "";
 
 InCellEditingPlugin._styles = prettifyCss([":host .cell.editing input[type=text]", ["border-style: solid;"]]);
 /** @private
-* @param {Object} colors
 */
 
-InCellEditingPlugin._onThemeLoaded = function (colors) {
-  if (!InCellEditingPlugin._primaryColor) InCellEditingPlugin._primaryColor = colors.primary;
+InCellEditingPlugin._onThemeLoaded = function () {
+  var colors = ElfUtil.getColors();
+  InCellEditingPlugin._primaryColor = colors.primary;
 };
 /** @private
 * @param {string} tag element tag
@@ -395,10 +410,9 @@ InCellEditingPlugin.prototype._createInputElement = function (tag) {
   }
 
   if (this._autoSuggest) {
-    this._autoSuggest.addEventListener("tapstart", t._onAutoSuggestTapStart); // TODO: remove this function after elf fixed item-select doesn't fire click events
-
-
     this._autoSuggest.addEventListener("item-select", t._onAutoSuggestItemSelected);
+
+    this._autoSuggest.addEventListener("wheel", t._stopPropagation, false);
   }
 
   elem.addEventListener("keydown", t._onTextKeyDown, false);
@@ -533,8 +547,13 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
     return;
   }
 
+  if (!this._hosts.length) {
+    window.addEventListener("scroll", this._onScroll);
+  }
+
   host.listen("columnAdded", this._onColumnAdded);
   host.getVScrollbar().listen("scroll", this._onScroll);
+  host.getHScrollbar().listen("scroll", this._onScroll);
 
   if (this._dblClick) {
     host.listen("dblclick", this._onDoubleClick); // Make a comparable functionality for touchscreen
@@ -563,7 +582,7 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
   this.config(options);
 
   if (!InCellEditingPlugin._primaryColor) {
-    ElfUtil.getThemeColors().then(InCellEditingPlugin._onThemeLoaded);
+    ElfUtil.getThemeColors().then(InCellEditingPlugin._onThemeLoaded)["catch"](InCellEditingPlugin._onThemeLoaded);
   }
 };
 /** Remove redundant built-in composite-grid feature
@@ -643,6 +662,10 @@ InCellEditingPlugin.prototype.config = function (options) {
 
   if (pluginOption["autoSuggest"]) {
     t._autoSuggest = pluginOption["autoSuggest"];
+  }
+
+  if (pluginOption["closingOnScroll"] == false) {
+    t._closingOnScroll = false;
   } // event callback
 
 
@@ -749,11 +772,18 @@ InCellEditingPlugin.prototype.unload = function (host) {
 
   host.unlisten("columnAdded", this._onColumnAdded);
   host.getVScrollbar().unlisten("scroll", this._onScroll);
+  host.getHScrollbar().unlisten("scroll", this._onScroll);
   host.unlisten("dblclick", this._onDoubleClick);
   host.unlisten("touchstart", this._onTouchStart);
   host.unlisten("touchend", this._onTouchEnd);
   host.unlisten("touchcancel", this._onTouchEnd);
 
+  if (!this._hosts.length) {
+    this._touchTimerId = 0;
+    this._editorTimerId = 0;
+    window.removeEventListener("scroll", this._onScroll);
+  }
+
   this._dispose();
 };
 /** @public
@@ -1122,9 +1152,16 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
   var rowIndex = arg["rowIndex"];
   var section = arg["section"];
   var cell = section.getCell(colIndex, rowIndex);
+  var rowSpan = 1;
+  var stretchedCell = section.getStretchedCell(cell, rowIndex);
 
-  if (!cell || cell.hasClass("no-editing") || cell.hasClass("folder")) {
-    // TODO: Allow cell with folder (expander arrow) to be editable for row segmenting
+  if (stretchedCell) {
+    cell = stretchedCell;
+  } else {
+    rowSpan = section.getCellRowSpan(colIndex, rowIndex);
+  }
+
+  if (!cell || cell.hasClass("no-editing")) {
     return;
   } // Everything has been verified at this point. We can start the opening process.
   // close row editor first
@@ -1132,10 +1169,20 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
 
   t.closeRowEditor(false, host);
   section.addClass("edit-mode");
+  t._lastActiveGrid = host;
   t._activePos = arg;
   arg["cell"] = t._activeCell = cell;
   arg["content"] = t._prevContent = cell.getContent();
-  arg["field"] = t._getField(colIndex); // Initialize UIs
+  arg["field"] = t._getField(colIndex);
+  var dataSource = arg["dataSource"];
+
+  if (dataSource != null) {
+    var rowId = arg["rowId"] = this._getRowId(arg["rowIndex"]);
+
+    arg["groupHeader"] = dataSource.isSegmentSeparator(rowId) || dataSource.getGroupByRowId(rowId);
+    arg["rowData"] = this._getRow(dataSource, rowId);
+  } // Initialize UIs
+
 
   if (arg["sectionType"] === "title") {
     t._activeInCellCache = t._createTitleEditor(host);
@@ -1170,7 +1217,7 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
   }
 
   var rowH = section.getRowHeight(rowIndex);
-  var width = section.getCellWidth(colIndex, rowIndex);
+  var width = cell.getWidth();
 
   if (!host.isPinnedColumn(colIndex)) {
     var hScrollbar = host.getHScrollbar();
@@ -1190,7 +1237,12 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
     editorStyle.width = "";
   }
 
-  editorStyle.height = rowH + "px"; // Attach our popup (balloon element)
+  if (rowSpan > 1) {
+    editorStyle.height = cell.getHeight() + "px";
+  } else {
+    editorStyle.height = rowH + "px";
+  } // Attach our popup (balloon element)
+
 
   var parentElement = document.body;
 
@@ -1203,10 +1255,14 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
   }
 
   balloonPopup.enableUIBlocking(t._uiBlocking);
-  balloonPopup.attachTo(cell.getElement());
   balloonPopup.addEventListener("hidden", t._onPopupHide);
   balloonPopup.disableAutoHiding(false);
-  balloonPopup.show(true, parentElement); // Attach user element
+  balloonPopup.disableHideOnScroll(true);
+  balloonPopup.attachTo(cell.getElement());
+  balloonPopup.show(true, parentElement);
+
+  this._updateEditorPopup(t._activeInCellCache, cell, host); // Attach user element
+
 
   if (t._customElement) {
     t._customElementPopup.attachTo(editor);
@@ -1230,9 +1286,13 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
   arg["autoSuggest"] = t._autoSuggest;
 
   if (t._autoSuggest) {
-    if (t._autoSuggest.parentNode !== host.getElement()) {
+    if (t._autoSuggest.attach === inputElement) {
+      t._autoSuggest.attach = null; // WORKAROUND: reset attach for re-attach target
+    }
+
+    if (t._autoSuggest.parentNode !== editor) {
       // if we appendChild all time when open editor, events won't work
-      host.getElement().appendChild(t._autoSuggest);
+      editor.appendChild(t._autoSuggest);
     }
 
     t._autoSuggest.attach = inputElement;
@@ -1252,8 +1312,6 @@ InCellEditingPlugin.prototype._openEditor = function (e, host, arg) {
   arg["initialText"] = t._initialText = t.getText(); // After all modifications, cache the string for text change event
 
   t._editing = true; // Editing state cannot be false until a text has been committed or cancelled
-
-  t._lastActiveGrid = host;
 };
 /** Using to open row editor.
 * @public
@@ -1299,7 +1357,7 @@ InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
 
     var cell = section.getCell(columnIndex, rowIndex);
 
-    if (!cell || cell.hasClass("no-editing") || cell.hasClass("folder")) {
+    if (!cell || cell.hasClass("no-editing")) {
       continue;
     } // all verify is done
     // create editor, popup, inputElement
@@ -1345,11 +1403,14 @@ InCellEditingPlugin.prototype.openRowEditor = function (rowIndex, grid) {
 
     var width = section.getCellWidth(columnIndex, rowIndex);
     editorStyle.width = width + "px";
-    editor.classList.remove("balloon"); // Attach our popup (editor element)
-
+    editor.classList.remove("balloon");
+    balloonPopup.disableAutoHiding(true);
+    balloonPopup.disableHideOnScroll(true);
     balloonPopup.attachTo(cell.getElement());
     balloonPopup.show(true, parentElement);
-    balloonPopup.disableAutoHiding(true); // this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
+
+    this._updateEditorPopup(inCellCache, cell, grid); // this._updateEditorLayout(inputElement); // Adjust sizes after append to the DOM
+
   } // if firstInput not undefined that mean at lease one popup is open
 
 
@@ -1517,10 +1578,39 @@ InCellEditingPlugin.prototype.toggleRowEditor = function (rowIndex, isCommit, gr
 
 
 InCellEditingPlugin.prototype._onScroll = function (e) {
-  // just close editor
-  this.closeRowEditor(false);
+  this._scrolling = true;
+
+  if (!this._closingOnScroll && this._editing) {
+    if (this._activeInCellCache) {
+      var popup = this._activeInCellCache.balloonPopup;
+      popup.hide();
+    } else if (this._activeRowId) {
+      var grid = this.getActiveGrid() || this._lastActiveGrid;
+
+      var section = grid.getSection("content");
+      var lastIndex = (section.getColumnCount() || 0) - 1;
+
+      for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+        var columnData = this._getColumnData(columnIndex, grid);
+
+        var inCellCache = columnData["inCellCache"];
+
+        if (!inCellCache) {
+          continue;
+        }
+
+        var popupCache = inCellCache["balloonPopup"];
 
-  this._commitText(false);
+        if (popupCache) {
+          popupCache.hide();
+        }
+      }
+    }
+  }
+
+  this._onPopupHide();
+
+  this._scrolling = false;
 };
 /** handle popup hidden event
 * @private
@@ -1529,9 +1619,16 @@ InCellEditingPlugin.prototype._onScroll = function (e) {
 
 
 InCellEditingPlugin.prototype._onPopupHide = function (e) {
-  // in cell editing mode, when popup hide for any reason
+  if (!this._closingOnScroll) {
+    if (this._scrolling) {
+      this.requestShowEditorPopup();
+      return;
+    }
+  } // in cell editing mode, when popup hide for any reason
   // cell editing will be close and make a commit. (depend on _autoCommitText flag)
   // WARNING: when user scroll outside grid. it will call _onPopupHide as well
+
+
   this._commitText(this._autoCommitText); // for row editing mode if editor hide by any reason
   // we will call close closeRowEditor to reset all internal flag status
   // row editing mode not care about _autoCommitText. (for the time being)
@@ -1544,34 +1641,17 @@ InCellEditingPlugin.prototype._onPopupHide = function (e) {
 */
 
 
-InCellEditingPlugin.prototype._onAutoSuggestTapStart = function (event) {
-  // TODO: Remove this function and use _onAutoSuggestItemSelected instead of this function
-  // This WORKAROUND by use "tapstart" event instead of "item-select" event in ef-autosugest
-  var target = event.target;
-
-  if (target.value) {
-    this.setText(target.value);
-
-    this._commitText(true);
-  }
-};
-/** @private
-* @param {Object} event
-*/
-
-
 InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
-  // TODO: Replace This function instead of _onAutoSuggestTapStart when elf fixed item-select.
-  // Currently, we use tapstart instead of item-select, so it's not support other method of item-select
-  // Currently, this function doesn't execute until item-select event fired from auto-suggest
-  var method = event.detail.method;
-  var value = event.detail.target.value;
+  if (event.detail.target) {
+    var method = event.detail.method;
+    var value = event.detail.target.value;
 
-  if (method === 'enter' || method === 'click') {
-    if (value) {
-      this.setText(value);
+    if (method === 'enter' || method === 'click') {
+      if (value) {
+        this.setText(value);
 
-      this._commitText(true);
+        this._commitText(true);
+      }
     }
   }
 };
@@ -1701,6 +1781,7 @@ InCellEditingPlugin.prototype._commitText = function (committed) {
   arg["section"].removeClass("edit-mode");
   t._editing = false;
   var enteredValue = arg["text"] = this.getValue();
+  var groupHeader = arg["groupHeader"] || false;
 
   if (committed) {
     if (t.hasListener("beforeCommit")) {
@@ -1710,7 +1791,7 @@ InCellEditingPlugin.prototype._commitText = function (committed) {
       enteredValue = arg["text"];
     }
 
-    if (committed && t._dataBinding) {
+    if (committed && t._dataBinding && !groupHeader) {
       var sectionSettings = arg["sectionSettings"];
       var sectionType = sectionSettings.getType(); // case edit content
 
@@ -1807,9 +1888,9 @@ InCellEditingPlugin.prototype._listenForTriggering = function (host, bool) {
 
 
 InCellEditingPlugin.prototype._onTouchStart = function (e) {
-  this._resetTimer();
+  this._resetTouchTimer();
 
-  this._timerId = setTimeout(this._onTimer, this._longPressTime);
+  this._touchTimerId = setTimeout(this._onTouchTimer, this._longPressTime);
 };
 /** Use only press time on mobile devices.
 * @private
@@ -1817,8 +1898,8 @@ InCellEditingPlugin.prototype._onTouchStart = function (e) {
 */
 
 
-InCellEditingPlugin.prototype._onTimer = function (e) {
-  this._timerId = 0;
+InCellEditingPlugin.prototype._onTouchTimer = function (e) {
+  this._touchTimerId = 0;
 };
 /** Use only On-Touch-End event on mobile devices.
 * @private
@@ -1827,7 +1908,7 @@ InCellEditingPlugin.prototype._onTimer = function (e) {
 
 
 InCellEditingPlugin.prototype._onTouchEnd = function (e) {
-  if (!this._resetTimer()) {
+  if (!this._resetTouchTimer()) {
     this._onDoubleClick(e); // Trigger cell editor
 
   }
@@ -1838,10 +1919,10 @@ InCellEditingPlugin.prototype._onTouchEnd = function (e) {
 */
 
 
-InCellEditingPlugin.prototype._resetTimer = function () {
-  if (this._timerId) {
-    clearTimeout(this._timerId);
-    this._timerId = 0;
+InCellEditingPlugin.prototype._resetTouchTimer = function () {
+  if (this._touchTimerId) {
+    clearTimeout(this._touchTimerId);
+    this._touchTimerId = 0;
     return true;
   }
 
@@ -2040,7 +2121,7 @@ InCellEditingPlugin.prototype.getBalloonPopup = function () {
   // we should receive column index to return balloonPopup in specific column
   return this._activeInCellCache ? this._activeInCellCache["balloonPopup"] : null;
 };
-/** Get ef-autosuggest
+/** Get ef-autosuggest or atlas-autosuggest
 * @public
 * @return {Element}
 */
@@ -2075,6 +2156,165 @@ InCellEditingPlugin.prototype._freezeScrolling = function (grid, frozen) {
   vs && vs.freezeScrolling(frozen);
   hs && hs.freezeScrolling(frozen);
 };
+/** Set a timer to call onUpdateEditorPopup only once to avoid performance issue
+* @public
+*/
+
+
+InCellEditingPlugin.prototype.requestShowEditorPopup = function () {
+  if (!this._editorTimerId) {
+    this._editorTimerId = setTimeout(this._onUpdateEditorPopup.bind(this), 100);
+  }
+};
+/** @private */
+
+
+InCellEditingPlugin.prototype._onUpdateEditorPopup = function () {
+  this._editorTimerId = 0;
+
+  var grid = this.getActiveGrid() || this._lastActiveGrid;
+
+  if (!grid) {
+    return;
+  }
+
+  var parentElement = document.body;
+
+  if (this._compositeGrid || this._realTimeGrid) {
+    parentElement = grid.getElement().parentElement;
+  }
+
+  if (this._activeInCellCache) {
+    var activePos = this._activePos;
+
+    if (activePos) {
+      var section = grid.getSection(activePos["sectionType"]);
+      var cell = section.getCell(activePos["colIndex"], activePos["rowIndex"]);
+
+      if (cell) {
+        var popup = this._activeInCellCache["balloonPopup"];
+        popup.attachTo(cell.getElement());
+        popup.show(true, parentElement);
+
+        this._updateEditorPopup(this._activeInCellCache, cell, grid);
+      }
+    }
+  } else if (this._activeRowId) {
+    var sectionContent = grid.getSection("content");
+
+    var rowIndex = this._getRowIndex(this._activeRowId);
+
+    if (sectionContent.isRowVisible(rowIndex)) {
+      var lastIndex = (sectionContent.getColumnCount() || 0) - 1;
+
+      for (var columnIndex = 0; columnIndex <= lastIndex; columnIndex++) {
+        var columnData = this._getColumnData(columnIndex, grid);
+
+        var inCellCache = columnData["inCellCache"];
+        var cellContent = sectionContent.getCell(columnIndex, rowIndex);
+
+        if (!inCellCache || !cellContent) {
+          continue;
+        }
+
+        var popupCache = inCellCache["balloonPopup"];
+        popupCache.attachTo(cellContent.getElement());
+        popupCache.show(true, parentElement);
+
+        this._updateEditorPopup(inCellCache, cellContent, grid);
+      }
+    }
+  }
+
+  grid.focus();
+};
+/** Update editor popup position and styles
+* @private
+* @param {Object} contentEditor
+* @param {Object} cell
+* @param {Object} grid grid instance
+*/
+
+
+InCellEditingPlugin.prototype._updateEditorPopup = function (contentEditor, cell, grid) {
+  var popup = contentEditor["balloonPopup"];
+  var editor = contentEditor["editor"];
+  var popupElem = popup.getElement();
+  var pos = grid.getRelativePosition(cell);
+  var width = cell.getWidth();
+  var height = cell.getHeight();
+  var colRect = grid.getColumnRect(0, grid.getColumnCount());
+  var rowRect = grid.getRowRect(0, grid.getRowCount());
+  var offsetWidth = colRect.scrollViewSize;
+  var offsetHeight = rowRect.scrollViewSize;
+  var offsetLeft = 0;
+  var offsetTop = pos["sectionType"] == "content" ? rowRect.scrollViewTop : 0;
+  var newHeight = height;
+  var newWidth = width;
+  var displayStyle = "inline-block";
+  var marginLeft = 0;
+  var marginTop = 0;
+
+  if (colRect.leftPinnedIndex != -1) {
+    var diff = 0;
+
+    if (grid.getVScrollbar().isActive()) {
+      diff -= 8; // If column is left pinned, scrollbar width need to be subtracted
+    }
+
+    diff += colRect.width - colRect.scrollViewSize;
+    offsetWidth += diff;
+    offsetLeft += diff;
+  }
+
+  if (editor.classList.contains("balloon") && !this._activeRowId) {
+    popupElem.style.display = "";
+    editor.style.width = "";
+    editor.style.marginLeft = "";
+    editor.style.marginTop = "";
+    marginLeft = -4;
+    marginTop = -4;
+    newWidth = popup.getElement().offsetWidth;
+  }
+
+  if (!pos["hit"]) {
+    displayStyle = "none";
+  } else {
+    var acquiredWidth = pos["x"] + newWidth;
+    var acquiredHeight = pos["y"] - offsetTop + newHeight; // Left overflow
+
+    if (pos["x"] < offsetLeft) {
+      newWidth = newWidth - (offsetLeft - pos["x"]);
+      marginLeft = marginLeft + Math.abs(pos["x"] - offsetLeft);
+    } // Right overflow
+
+
+    if (acquiredWidth > offsetWidth) {
+      newWidth = newWidth - (acquiredWidth - offsetWidth);
+    } // Top overflow
+
+
+    if (pos["y"] < offsetTop) {
+      newHeight = newHeight + pos["y"] - offsetTop;
+      marginTop = marginTop + Math.abs(pos["y"] - offsetTop);
+    } // Bottom overflow
+
+
+    if (acquiredHeight > offsetHeight) {
+      newHeight = newHeight - (acquiredHeight - offsetHeight);
+    }
+
+    if (newWidth < 48 && newWidth != width || newHeight < 16 && newHeight != height) {
+      displayStyle = "none";
+    }
+  }
+
+  popupElem.style.display = displayStyle;
+  editor.style.width = newWidth ? newWidth + "px" : "";
+  editor.style.height = newHeight ? newHeight + "px" : "";
+  editor.style.marginLeft = marginLeft ? marginLeft + "px" : 0;
+  editor.style.marginTop = marginTop ? marginTop + "px" : 0;
+};
 
 export default InCellEditingPlugin;
 export { InCellEditingPlugin, InCellEditingPlugin as InCellEditing, InCellEditingPlugin as InCellEditingExtension };

package/lib/tr-grid-percent-bar/es6/PercentBar.d.ts

@@ -52,7 +52,7 @@ declare class PercentBarPlugin extends GridPlugin {
 
     public setColumnPercentBar(colIndex: number, columnOptions: PercentBarPlugin.ColumnOptions): void;
 
-    public reloadThemeColors(): void;
+    public reloadThemeColors(): Promise<any>|null;
 
 }
 

package/lib/tr-grid-percent-bar/es6/PercentBar.js

@@ -58,11 +58,6 @@ PercentBarPlugin._runningId = 0;
 * @private
 */
 
-PercentBarPlugin._themeLoaded = false;
-/** @type {boolean}
-* @private
-*/
-
 PercentBarPlugin._themeRevision = 0;
 /** @type {boolean}
 * @private
@@ -128,9 +123,9 @@ PercentBarPlugin.prototype.initialize = function (host, options) {
     host.listen("columnAlignmentChanged", this._requestRowRefresh);
   }
 
-  if (!PercentBarPlugin._themeLoaded && !this._themeLoading) {
+  if (!this._themeLoading) {
     this._themeLoading = true;
-    ElfUtil.getThemeColors().then(this._onThemeLoaded);
+    ElfUtil.getThemeColors(this._onThemeLoaded).then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
   }
 };
 /** @override */
@@ -523,7 +518,6 @@ PercentBarPlugin.prototype._getAutoTextSizing = function (colIndex, pBarOpt) {
 
 
 PercentBarPlugin.prototype._onThemeLoaded = function () {
-  PercentBarPlugin._themeLoaded = true;
   PercentBarPlugin._themeRevision++;
 
   this._requestRowRefresh();
@@ -534,7 +528,7 @@ PercentBarPlugin.prototype._onThemeLoaded = function () {
 
 
 PercentBarPlugin.prototype._onPostSectionBinding = function (e) {
-  if (!PercentBarPlugin._themeLoaded) {
+  if (!ElfUtil.isThemeLoaded()) {
     return;
   }
 
@@ -789,12 +783,15 @@ PercentBarPlugin.prototype._requestRowRefresh = function () {
   }
 };
 /** @public
+* @description Reload theme colors and rerender percent bars.
+* Should call after overwriting css variables for MovementColor without changing movement-color-profile attribute.
+* @function
+* @return {Promise<Object>}
 */
 
 
 PercentBarPlugin.prototype.reloadThemeColors = function () {
-  PercentBarPlugin._themeLoaded = ElfUtil.themeReady = null;
-  ElfUtil.getThemeColors().then(this._onThemeLoaded);
+  return ElfUtil.reloadThemeColors().then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
 };
 
 export default PercentBarPlugin;