@datarailsshared/dr_renderer 1.2.111-dev → 1.2.113

package/src/published_items_renderer.js

@@ -1,387 +1,387 @@
-let getPublishedItemsRenderer = function (publishedItemsRenderer) {
-
-  this.document = {};
-  this.scope = {};
-  this.options = {};
-  this.isScenarioMode = null;
-
-  publishedItemsRenderer.formulaCellClicked = function (event, scope, options, window) {
-    event.stopPropagation();
-    event.preventDefault();
-    try {
-      const td = event.currentTarget;
-      const a = td.querySelector('a');
-      const locationId = a.getAttribute('location_id');
-      scope.callFromPublishItem(event, options.widgetId, options.dashboardId, locationId, window.published_item_sheetname);
-    } catch (e) {
-    }
-    return false;
-  }
-
-  publishedItemsRenderer.resizeTable = function (options, iframeWindow) {
-    options.alreadySetTimeout = null;
-    const publish_item_image = iframeWindow.document.getElementById('publish_item_image');
-    const table = iframeWindow.document.getElementsByTagName("table")[0];
-    const body = iframeWindow.document.getElementsByTagName("body")[0];
-
-    if (table && options.responsive) {
-      publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-    }
-
-    publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
-  }
-
-  publishedItemsRenderer.zoomTable = function(iframeWindow, table, body) {
-    let body_zoom = body.style.zoom;
-    body_zoom = parseFloat(body_zoom) || 1;
-
-    let zoom = table.style.zoom;
-    zoom = parseFloat(zoom) || 1;
-
-    const positionInfo = table.getBoundingClientRect();
-    let width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-
-    if (width < iframeWindow.innerWidth) {
-      zoom += 0.05;
-
-      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-      if (width < iframeWindow.innerWidth) {
-        table.style.zoom = zoom;
-        setTimeout(function () {
-          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-        }, 10);
-      }
-    } else if (width >= iframeWindow.innerWidth) {
-      zoom -= 0.05;
-
-      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-      table.style.zoom = zoom;
-      if (width >= iframeWindow.innerWidth) {
-        setTimeout(function () {
-          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-        }, 10);
-      }
-    }
-  }
-
-  publishedItemsRenderer.resizePublishedImage = function(publish_item_image, iframeWindow, body) {
-    if (!publish_item_image) return;
-
-    let body_zoom = body.style.zoom;
-    body_zoom = parseFloat(body_zoom) || 1;
-
-    if (publish_item_image.style.height === '100%') {
-      publish_item_image.style.height = 'auto';
-      publish_item_image.style.width = '100%';
-      publish_item_image.style.marginTop = "";
-      setTimeout(function () {
-        publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
-      }, 10);
-    }
-
-    const imgPositionInfo = publish_item_image.getBoundingClientRect();
-    const height = (imgPositionInfo.height + imgPositionInfo.y * 2) * body_zoom;
-    if (height > iframeWindow.innerHeight) {
-      publish_item_image.style.height = '100%';
-      publish_item_image.style.width = 'auto';
-    } else if (height < iframeWindow.innerHeight) {
-      const temp = (iframeWindow.innerHeight - height) / 2;
-      publish_item_image.style.marginTop = (temp / body_zoom + imgPositionInfo.y) + "px";
-    }
-  }
-
-  publishedItemsRenderer.resetTableZoom = function (document) {
-    const table = document.getElementsByTagName("table")[0];
-    if (table) {
-      table.style.zoom = 1;
-    }
-  }
-
-  publishedItemsRenderer.changedAutoResize = function (options, iframeWindow, document) {
-    Object.assign(iframeWindow.__options__, options);
-    const table = document.getElementsByTagName("table")[0];
-    if (table) {
-      table.style.margin = options.responsive ? '0 auto' : '';
-    }
-
-    if (!options.responsive) {
-      publishedItemsRenderer.resetTableZoom(document);
-    } else {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(options, iframeWindow);
-        }, 100);
-      }
-    }
-  }
-
-  publishedItemsRenderer.changedInputValue = function (firstTime, scope, options) {
-    const input_values = [];
-    if (options.inputValuesData) {
-      for (let key in options.inputValuesData) {
-        input_values.push(options.inputValuesData[key]);
-      }
-    }
-
-    try {
-      scope.changedInputValues(input_values, options.widgetId, options.dashboardId, firstTime);
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  publishedItemsRenderer.changedInputElement = function (event, scope, options) {
-    const inputElement = event.currentTarget;
-    const name = inputElement.getAttribute('name');
-    const metaData = options.inputValuesData ? options.inputValuesData[name] : null;
-    let newValue = inputElement.value;
-    if (metaData) {
-      if (metaData.type === 'editInput') {
-        newValue = parseFloat(newValue);
-      } else if (metaData.type === 'editInputPercent') {
-        newValue = parseFloat(newValue) + '%';
-      }
-
-      if (metaData.value !== newValue) {
-        metaData.value = newValue;
-        publishedItemsRenderer.changedInputValue(false, scope, options);
-      }
-    }
-  }
-
-  publishedItemsRenderer.createInputElement = function (tdElement, inputMetaData, formatValue, scope, options, document) {
-    const _this = this;
-    tdElement.innerHTML = '';
-    if (inputMetaData) {
-      switch (inputMetaData.type) {
-        case "editInput":
-        case "editInputPercent":
-          let inEl = document.createElement("INPUT");
-          let labelEl = document.createElement("LABEL");
-
-          if (inputMetaData.value === 'DR_INPUT') {
-            labelEl.innerText = null;
-          } else {
-            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inputMetaData.value).value : inputMetaData.value;
-          }
-          if (_this.isScenarioMode) {
-            labelEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;");
-          } else {
-            labelEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
-          }
-          const onLabelClick = function (event, isScenarioMode) {
-            event.stopPropagation();
-            if (isScenarioMode) {
-              inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
-            } else {
-              inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
-            }
-            labelEl.style.display = 'none';
-            setTimeout(function () {
-              inEl.focus();
-            }, 1)
-          }
-          labelEl.addEventListener("click", (event) => onLabelClick(event, _this.isScenarioMode));
-
-          inEl.setAttribute("type", "number");
-          inEl.setAttribute("name", inputMetaData.name);
-          if (_this.isScenarioMode) {
-            inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
-          } else {
-            inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
-          }
-          inEl.value = inputMetaData.type === 'editInputPercent' ? parseFloat(inputMetaData.value.replace('%', '')) : inputMetaData.value;
-          inEl.addEventListener("focusout", function (event) {
-            event.preventDefault();
-            publishedItemsRenderer.changedInputElement(event, scope, options);
-            inEl.style.display = 'none';
-            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
-            labelEl.style.display = 'block';
-          });
-          inEl.addEventListener("keyup", function (event) {
-            // Number 13 is the "Enter" key on the keyboard
-            if (event.keyCode === 13) {
-              // Cancel the default action, if needed
-              event.preventDefault();
-              publishedItemsRenderer.changedInputElement(event, scope, options);
-              inEl.style.display = 'none';
-              labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
-              labelEl.style.display = 'block';
-            }
-          });
-          tdElement.appendChild(inEl);
-          tdElement.appendChild(labelEl);
-          break;
-        case "dateInput":
-          let dateEl = document.createElement("DIV");
-          const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
-          const formattedDate = formatValue('d', format, inputMetaData.value).value
-          if (_this.isScenarioMode) {
-             dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
-          } else {
-            dateEl.innerHTML = '<label class="value dateInput" style="cursor: pointer;">' + formattedDate + '</label>';
-          }
-          tdElement.appendChild(dateEl);
-          tdElement.classList.toggle("input-filter-list-td");
-          tdElement.setAttribute("name", inputMetaData.name);
-          tdElement.addEventListener("click", function (event) {
-            try {
-              scope.openDatePickerFromPublishedItem(event, options.widgetId, options.dashboardId, inputMetaData, format);
-            } catch (e) {
-              console.error(e);
-            }
-          })
-          break;
-        case "excelList":
-          let selectEl = document.createElement("SELECT");
-          selectEl.setAttribute("name", inputMetaData.name);
-          selectEl.setAttribute("class", "dr_input");
-          for (let i = 0; i < inputMetaData.values.length; i++) {
-            let option = document.createElement("option");
-            option.setAttribute("value", inputMetaData.values[i]);
-            option.innerText = inputMetaData.values[i];
-            if (inputMetaData.values[i] === inputMetaData.value) {
-              option.setAttribute("selected", "");
-            }
-            selectEl.appendChild(option);
-          }
-          selectEl.addEventListener("change", function (event) {
-            publishedItemsRenderer.changedInputElement(event, scope, options)
-          });
-          tdElement.appendChild(selectEl);
-          break;
-        case "filterList":
-          let listHolderEl = document.createElement("DIV");
-          listHolderEl.setAttribute("class", "filter_list_holder");
-          if (_this.isScenarioMode) {
-            listHolderEl.innerHTML = '<label class="value filterList" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
-          } else {
-            listHolderEl.innerHTML = '<label class="value filterList" style="cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
-          }
-          tdElement.appendChild(listHolderEl);
-          tdElement.classList.toggle("input-filter-list-td");
-          tdElement.setAttribute("name", inputMetaData.name);
-          tdElement.addEventListener("click", function (event) {
-            let inputElement = event.currentTarget;
-            let name = inputElement.getAttribute('name');
-            let metaData = options.inputValuesData ? options.inputValuesData[name] : null;
-            if (metaData) {
-              try {
-                scope.openFilterListFromPublishedItem(event, options.widgetId, options.dashboardId, metaData);
-              } catch (e) {
-                console.error(e);
-              }
-            }
-          });
-          break;
-      }
-    }
-  }
-
-  publishedItemsRenderer.changedInputFilterValue = function (metaData, newValue, document) {
-    let tdLabelElement = document.querySelector('td[name="' + metaData.name + '"]>div>label[class="value"]');
-    if (tdLabelElement) {
-      tdLabelElement.innerText = newValue;
-    }
-    console.log(tdLabelElement, newValue);
-  }
-
-  publishedItemsRenderer.changeStylesForLabel = function (elementsArray, styles, isScenarioMode) {
-    if (elementsArray.length) {
-      elementsArray.forEach(element => {
-        element.setAttribute("style", isScenarioMode ? styles : "cursor:pointer;");
-      })
-    }
-  }
-
-  publishedItemsRenderer.prepareInputCells = function (document, scope, options, isScenarioMode) {
-    const inputCells = document.querySelectorAll('td>a[href="DR_INPUT"], td>div>a[href="DR_INPUT"]');
-    const inputs = document.querySelectorAll('td>input');
-    const dateInputs = document.querySelectorAll('.dateInput');
-    const filterList = document.querySelectorAll('.filterList');
-    const styleForLabel = "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;";
-    if (!options.inputValuesData) {
-      options.inputValuesData = {};
-    }
-    publishedItemsRenderer.changeStylesForLabel(filterList, styleForLabel, isScenarioMode);
-    publishedItemsRenderer.changeStylesForLabel(dateInputs, styleForLabel, isScenarioMode);
-    if (inputs.length) {
-      inputs.forEach(element => {
-        const labelElement = element.nextSibling;
-        labelElement.setAttribute("style", isScenarioMode ?
-          "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;" :
-          "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
-      });
-    }
-    if (inputCells.length) {
-      for (let i = 0; i < inputCells.length; i++) {
-        let tdElement = inputCells[i].parentElement;
-        let inputId = inputCells[i].getAttribute('name') || 'no_attribute';
-        publishedItemsRenderer.createInputElement(tdElement, options.inputValuesData[inputId], scope.highchartsRenderer.formatValue, scope, options, document, isScenarioMode);
-      }
-    }
-  }
-
-  publishedItemsRenderer.addEventListeners = function (document, iframeWindow, scope, options) {
-    document.addEventListener("DOMContentLoaded", function () {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(options, iframeWindow);
-        }, 50);
-      }
-    });
-    iframeWindow.addEventListener("resize", function () {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
-        }, 100);
-      }
-    });
-
-    // Add click event to cell with formula
-    let all_a_hrefs = document.querySelectorAll('td a[location_id]');
-    for (let i = 0; i < all_a_hrefs.length; i++) {
-      let td_elem = all_a_hrefs[i].closest('td');
-      td_elem.classList.add("apply_hover");
-      td_elem.addEventListener('click', function (event) {
-        publishedItemsRenderer.formulaCellClicked(event, scope, options, iframeWindow)
-      });
-    }
-  }
-
-  publishedItemsRenderer.scenarioModeChange = function (flag, document) {
-    this.isScenarioMode = flag;
-    publishedItemsRenderer.prepareInputCells(document, this.scope, this.options, this.isScenarioMode);
-  }
-
-  publishedItemsRenderer.getInputValues = function () {
-    return this.options.inputValuesData;
-  }
-
-  publishedItemsRenderer.initPublishedItem = function (document, iframeWindow, scope, options) {
-    this.document = document;
-    this.scope = scope;
-    this.options = options;
-    iframeWindow.__options__ = options;
-    publishedItemsRenderer.prepareInputCells(document, scope, options, this.isScenarioMode);
-    publishedItemsRenderer.applyInitDocumentStyles(document, iframeWindow);
-    publishedItemsRenderer.addEventListeners(document, iframeWindow, scope, options);
-
-    setTimeout(function () {
-      publishedItemsRenderer.changedInputValue(true, scope, options);
-    }, 500);
-  }
-
-  publishedItemsRenderer.applyInitDocumentStyles = function(document, iframeWindow) {
-    const table = document.getElementsByTagName('table')[0];
-    if (table) {
-      table.style.overflow = 'hidden';
-      table.style.margin = iframeWindow.__options__.responsive ? '0 auto' : '';
-    }
-
-    const body = document.body;
-    body.style.margin = '0';
-  }
-}
-
-module.exports = getPublishedItemsRenderer;
+let getPublishedItemsRenderer = function (publishedItemsRenderer) {
+
+  this.document = {};
+  this.scope = {};
+  this.options = {};
+  this.isScenarioMode = null;
+
+  publishedItemsRenderer.formulaCellClicked = function (event, scope, options, window) {
+    event.stopPropagation();
+    event.preventDefault();
+    try {
+      const td = event.currentTarget;
+      const a = td.querySelector('a');
+      const locationId = a.getAttribute('location_id');
+      scope.callFromPublishItem(event, options.widgetId, options.dashboardId, locationId, window.published_item_sheetname);
+    } catch (e) {
+    }
+    return false;
+  }
+
+  publishedItemsRenderer.resizeTable = function (options, iframeWindow) {
+    options.alreadySetTimeout = null;
+    const publish_item_image = iframeWindow.document.getElementById('publish_item_image');
+    const table = iframeWindow.document.getElementsByTagName("table")[0];
+    const body = iframeWindow.document.getElementsByTagName("body")[0];
+
+    if (table && options.responsive) {
+      publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+    }
+
+    publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
+  }
+
+  publishedItemsRenderer.zoomTable = function(iframeWindow, table, body) {
+    let body_zoom = body.style.zoom;
+    body_zoom = parseFloat(body_zoom) || 1;
+
+    let zoom = table.style.zoom;
+    zoom = parseFloat(zoom) || 1;
+
+    const positionInfo = table.getBoundingClientRect();
+    let width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+
+    if (width < iframeWindow.innerWidth) {
+      zoom += 0.05;
+
+      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+      if (width < iframeWindow.innerWidth) {
+        table.style.zoom = zoom;
+        setTimeout(function () {
+          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+        }, 10);
+      }
+    } else if (width >= iframeWindow.innerWidth) {
+      zoom -= 0.05;
+
+      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+      table.style.zoom = zoom;
+      if (width >= iframeWindow.innerWidth) {
+        setTimeout(function () {
+          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+        }, 10);
+      }
+    }
+  }
+
+  publishedItemsRenderer.resizePublishedImage = function(publish_item_image, iframeWindow, body) {
+    if (!publish_item_image) return;
+
+    let body_zoom = body.style.zoom;
+    body_zoom = parseFloat(body_zoom) || 1;
+
+    if (publish_item_image.style.height === '100%') {
+      publish_item_image.style.height = 'auto';
+      publish_item_image.style.width = '100%';
+      publish_item_image.style.marginTop = "";
+      setTimeout(function () {
+        publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
+      }, 10);
+    }
+
+    const imgPositionInfo = publish_item_image.getBoundingClientRect();
+    const height = (imgPositionInfo.height + imgPositionInfo.y * 2) * body_zoom;
+    if (height > iframeWindow.innerHeight) {
+      publish_item_image.style.height = '100%';
+      publish_item_image.style.width = 'auto';
+    } else if (height < iframeWindow.innerHeight) {
+      const temp = (iframeWindow.innerHeight - height) / 2;
+      publish_item_image.style.marginTop = (temp / body_zoom + imgPositionInfo.y) + "px";
+    }
+  }
+
+  publishedItemsRenderer.resetTableZoom = function (document) {
+    const table = document.getElementsByTagName("table")[0];
+    if (table) {
+      table.style.zoom = 1;
+    }
+  }
+
+  publishedItemsRenderer.changedAutoResize = function (options, iframeWindow, document) {
+    Object.assign(iframeWindow.__options__, options);
+    const table = document.getElementsByTagName("table")[0];
+    if (table) {
+      table.style.margin = options.responsive ? '0 auto' : '';
+    }
+
+    if (!options.responsive) {
+      publishedItemsRenderer.resetTableZoom(document);
+    } else {
+      if (!options.alreadySetTimeout) {
+        options.alreadySetTimeout = setTimeout(function () {
+          publishedItemsRenderer.resizeTable(options, iframeWindow);
+        }, 100);
+      }
+    }
+  }
+
+  publishedItemsRenderer.changedInputValue = function (firstTime, scope, options) {
+    const input_values = [];
+    if (options.inputValuesData) {
+      for (let key in options.inputValuesData) {
+        input_values.push(options.inputValuesData[key]);
+      }
+    }
+
+    try {
+      scope.changedInputValues(input_values, options.widgetId, options.dashboardId, firstTime);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  publishedItemsRenderer.changedInputElement = function (event, scope, options) {
+    const inputElement = event.currentTarget;
+    const name = inputElement.getAttribute('name');
+    const metaData = options.inputValuesData ? options.inputValuesData[name] : null;
+    let newValue = inputElement.value;
+    if (metaData) {
+      if (metaData.type === 'editInput') {
+        newValue = parseFloat(newValue);
+      } else if (metaData.type === 'editInputPercent') {
+        newValue = parseFloat(newValue) + '%';
+      }
+
+      if (metaData.value !== newValue) {
+        metaData.value = newValue;
+        publishedItemsRenderer.changedInputValue(false, scope, options);
+      }
+    }
+  }
+
+  publishedItemsRenderer.createInputElement = function (tdElement, inputMetaData, formatValue, scope, options, document) {
+    const _this = this;
+    tdElement.innerHTML = '';
+    if (inputMetaData) {
+      switch (inputMetaData.type) {
+        case "editInput":
+        case "editInputPercent":
+          let inEl = document.createElement("INPUT");
+          let labelEl = document.createElement("LABEL");
+
+          if (inputMetaData.value === 'DR_INPUT') {
+            labelEl.innerText = null;
+          } else {
+            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inputMetaData.value).value : inputMetaData.value;
+          }
+          if (_this.isScenarioMode) {
+            labelEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+          } else {
+            labelEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+          }
+          const onLabelClick = function (event, isScenarioMode) {
+            event.stopPropagation();
+            if (isScenarioMode) {
+              inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+            } else {
+              inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+            }
+            labelEl.style.display = 'none';
+            setTimeout(function () {
+              inEl.focus();
+            }, 1)
+          }
+          labelEl.addEventListener("click", (event) => onLabelClick(event, _this.isScenarioMode));
+
+          inEl.setAttribute("type", "number");
+          inEl.setAttribute("name", inputMetaData.name);
+          if (_this.isScenarioMode) {
+            inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          } else {
+            inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          }
+          inEl.value = inputMetaData.type === 'editInputPercent' ? parseFloat(inputMetaData.value.replace('%', '')) : inputMetaData.value;
+          inEl.addEventListener("focusout", function (event) {
+            event.preventDefault();
+            publishedItemsRenderer.changedInputElement(event, scope, options);
+            inEl.style.display = 'none';
+            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
+            labelEl.style.display = 'block';
+          });
+          inEl.addEventListener("keyup", function (event) {
+            // Number 13 is the "Enter" key on the keyboard
+            if (event.keyCode === 13) {
+              // Cancel the default action, if needed
+              event.preventDefault();
+              publishedItemsRenderer.changedInputElement(event, scope, options);
+              inEl.style.display = 'none';
+              labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
+              labelEl.style.display = 'block';
+            }
+          });
+          tdElement.appendChild(inEl);
+          tdElement.appendChild(labelEl);
+          break;
+        case "dateInput":
+          let dateEl = document.createElement("DIV");
+          const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
+          const formattedDate = formatValue('d', format, inputMetaData.value).value
+          if (_this.isScenarioMode) {
+             dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
+          } else {
+            dateEl.innerHTML = '<label class="value dateInput" style="cursor: pointer;">' + formattedDate + '</label>';
+          }
+          tdElement.appendChild(dateEl);
+          tdElement.classList.toggle("input-filter-list-td");
+          tdElement.setAttribute("name", inputMetaData.name);
+          tdElement.addEventListener("click", function (event) {
+            try {
+              scope.openDatePickerFromPublishedItem(event, options.widgetId, options.dashboardId, inputMetaData, format);
+            } catch (e) {
+              console.error(e);
+            }
+          })
+          break;
+        case "excelList":
+          let selectEl = document.createElement("SELECT");
+          selectEl.setAttribute("name", inputMetaData.name);
+          selectEl.setAttribute("class", "dr_input");
+          for (let i = 0; i < inputMetaData.values.length; i++) {
+            let option = document.createElement("option");
+            option.setAttribute("value", inputMetaData.values[i]);
+            option.innerText = inputMetaData.values[i];
+            if (inputMetaData.values[i] === inputMetaData.value) {
+              option.setAttribute("selected", "");
+            }
+            selectEl.appendChild(option);
+          }
+          selectEl.addEventListener("change", function (event) {
+            publishedItemsRenderer.changedInputElement(event, scope, options)
+          });
+          tdElement.appendChild(selectEl);
+          break;
+        case "filterList":
+          let listHolderEl = document.createElement("DIV");
+          listHolderEl.setAttribute("class", "filter_list_holder");
+          if (_this.isScenarioMode) {
+            listHolderEl.innerHTML = '<label class="value filterList" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          } else {
+            listHolderEl.innerHTML = '<label class="value filterList" style="cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          }
+          tdElement.appendChild(listHolderEl);
+          tdElement.classList.toggle("input-filter-list-td");
+          tdElement.setAttribute("name", inputMetaData.name);
+          tdElement.addEventListener("click", function (event) {
+            let inputElement = event.currentTarget;
+            let name = inputElement.getAttribute('name');
+            let metaData = options.inputValuesData ? options.inputValuesData[name] : null;
+            if (metaData) {
+              try {
+                scope.openFilterListFromPublishedItem(event, options.widgetId, options.dashboardId, metaData);
+              } catch (e) {
+                console.error(e);
+              }
+            }
+          });
+          break;
+      }
+    }
+  }
+
+  publishedItemsRenderer.changedInputFilterValue = function (metaData, newValue, document) {
+    let tdLabelElement = document.querySelector('td[name="' + metaData.name + '"]>div>label[class="value"]');
+    if (tdLabelElement) {
+      tdLabelElement.innerText = newValue;
+    }
+    console.log(tdLabelElement, newValue);
+  }
+
+  publishedItemsRenderer.changeStylesForLabel = function (elementsArray, styles, isScenarioMode) {
+    if (elementsArray.length) {
+      elementsArray.forEach(element => {
+        element.setAttribute("style", isScenarioMode ? styles : "cursor:pointer;");
+      })
+    }
+  }
+
+  publishedItemsRenderer.prepareInputCells = function (document, scope, options, isScenarioMode) {
+    const inputCells = document.querySelectorAll('td>a[href="DR_INPUT"], td>div>a[href="DR_INPUT"]');
+    const inputs = document.querySelectorAll('td>input');
+    const dateInputs = document.querySelectorAll('.dateInput');
+    const filterList = document.querySelectorAll('.filterList');
+    const styleForLabel = "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;";
+    if (!options.inputValuesData) {
+      options.inputValuesData = {};
+    }
+    publishedItemsRenderer.changeStylesForLabel(filterList, styleForLabel, isScenarioMode);
+    publishedItemsRenderer.changeStylesForLabel(dateInputs, styleForLabel, isScenarioMode);
+    if (inputs.length) {
+      inputs.forEach(element => {
+        const labelElement = element.nextSibling;
+        labelElement.setAttribute("style", isScenarioMode ?
+          "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;" :
+          "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+      });
+    }
+    if (inputCells.length) {
+      for (let i = 0; i < inputCells.length; i++) {
+        let tdElement = inputCells[i].parentElement;
+        let inputId = inputCells[i].getAttribute('name') || 'no_attribute';
+        publishedItemsRenderer.createInputElement(tdElement, options.inputValuesData[inputId], scope.highchartsRenderer.formatValue, scope, options, document, isScenarioMode);
+      }
+    }
+  }
+
+  publishedItemsRenderer.addEventListeners = function (document, iframeWindow, scope, options) {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (!options.alreadySetTimeout) {
+        options.alreadySetTimeout = setTimeout(function () {
+          publishedItemsRenderer.resizeTable(options, iframeWindow);
+        }, 50);
+      }
+    });
+    iframeWindow.addEventListener("resize", function () {
+      if (!options.alreadySetTimeout) {
+        options.alreadySetTimeout = setTimeout(function () {
+          publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
+        }, 100);
+      }
+    });
+
+    // Add click event to cell with formula
+    let all_a_hrefs = document.querySelectorAll('td a[location_id]');
+    for (let i = 0; i < all_a_hrefs.length; i++) {
+      let td_elem = all_a_hrefs[i].closest('td');
+      td_elem.classList.add("apply_hover");
+      td_elem.addEventListener('click', function (event) {
+        publishedItemsRenderer.formulaCellClicked(event, scope, options, iframeWindow)
+      });
+    }
+  }
+
+  publishedItemsRenderer.scenarioModeChange = function (flag, document) {
+    this.isScenarioMode = flag;
+    publishedItemsRenderer.prepareInputCells(document, this.scope, this.options, this.isScenarioMode);
+  }
+
+  publishedItemsRenderer.getInputValues = function () {
+    return this.options.inputValuesData;
+  }
+
+  publishedItemsRenderer.initPublishedItem = function (document, iframeWindow, scope, options) {
+    this.document = document;
+    this.scope = scope;
+    this.options = options;
+    iframeWindow.__options__ = options;
+    publishedItemsRenderer.prepareInputCells(document, scope, options, this.isScenarioMode);
+    publishedItemsRenderer.applyInitDocumentStyles(document, iframeWindow);
+    publishedItemsRenderer.addEventListeners(document, iframeWindow, scope, options);
+
+    setTimeout(function () {
+      publishedItemsRenderer.changedInputValue(true, scope, options);
+    }, 500);
+  }
+
+  publishedItemsRenderer.applyInitDocumentStyles = function(document, iframeWindow) {
+    const table = document.getElementsByTagName('table')[0];
+    if (table) {
+      table.style.overflow = 'hidden';
+      table.style.margin = iframeWindow.__options__.responsive ? '0 auto' : '';
+    }
+
+    const body = document.body;
+    body.style.margin = '0';
+  }
+}
+
+module.exports = getPublishedItemsRenderer;