@agilemotion/oui-react-js 1.8.56 → 1.8.58

package/dist/components/TemplateItemEventHandler.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _TemplateTable = _interopRequireDefault(require("./TemplateTable"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const parse = val => {
   return parseFloat(val.replace('px', ''));
 };
@@ -13,126 +16,244 @@ const boundCheck = (pos, mousePos) => {
   return pos - 8 < mousePos && pos + 8 > mousePos;
 };
 class TemplateItemEventHandler {
-  constructor() {}
-  dragStart = event => {
-    if (this.selectedNode === event.target) {
-      if (document.body.style.cursor !== "move" || this.resizingTableColumn) {
-        if (!this.resizingTableColumn || this.resizingBoundaryTableColumn) {
-          this.currentResizeNode = event.target;
+  constructor() {
+    _defineProperty(this, "dragStart", event => {
+      if (this.selectedNode === event.target) {
+        if (document.body.style.cursor !== "move" || this.resizingTableColumn) {
+          if (!this.resizingTableColumn || this.resizingBoundaryTableColumn) {
+            this.currentResizeNode = event.target;
+          }
+          event.preventDefault();
         }
-        event.preventDefault();
+        let parentLeft = event.target.parentElement.offsetLeft;
+        let parentTop = event.target.parentElement.offsetTop;
+        this.dragOffset.x = event.clientX - (parentLeft + parseFloat(event.target.style.left.replace('px', '')));
+        this.dragOffset.y = event.clientY - (parentTop + parseFloat(event.target.style.top.replace('px', '')));
       }
-      let parentLeft = event.target.parentElement.offsetLeft;
-      let parentTop = event.target.parentElement.offsetTop;
-      this.dragOffset.x = event.clientX - (parentLeft + parseFloat(event.target.style.left.replace('px', '')));
-      this.dragOffset.y = event.clientY - (parentTop + parseFloat(event.target.style.top.replace('px', '')));
-    }
-  };
-  dragOver = event => {
-    event.preventDefault();
-  };
-  initDragAndDrop = (selectionHandler, container) => {
-    this.dragOffset = {};
-    setTimeout(() => {
-      let elements = document.getElementsByClassName("dropTarget");
-      for (const element of elements) {
-        element.addEventListener("dragstart", this.dragStart, false);
-        element.addEventListener("dragover", this.dragOver, false);
+    });
+    _defineProperty(this, "dragOver", event => {
+      event.preventDefault();
+    });
+    _defineProperty(this, "initDragAndDrop", (selectionHandler, container) => {
+      this.dragOffset = {};
+      setTimeout(() => {
+        let elements = document.getElementsByClassName("dropTarget");
+        for (const element of elements) {
+          element.addEventListener("dragstart", this.dragStart, false);
+          element.addEventListener("dragover", this.dragOver, false);
+        }
+      }, 2000);
+      container.addEventListener("mousedown", this.handleMouseDown);
+      container.addEventListener("mouseup", event => this.handleMouseUp(event, selectionHandler));
+      container.addEventListener("mousemove", this.handleMouseMove);
+      let parent = document.getElementsByClassName('__sys_placeholders')[0];
+      let placeHolders = document.getElementsByClassName('_draggable_');
+      let dropTarget = this.getDropTarget(parent);
+      for (const placeHolder of placeHolders) {
+        placeHolder.addEventListener('mousemove', event => this.handleItemMouseMove(event, parent), false);
+        placeHolder.addEventListener('mouseout', this.handleItemMouseOut, false);
+        placeHolder.addEventListener('mouseup', event => this.handleItemMouseClick(placeHolder, placeHolder.id, selectionHandler), false);
+        placeHolder.addEventListener('dragend', event => this.handleItemDrop(event, document.getElementsByClassName('dropTarget')[0]), false);
       }
-    }, 2000);
-    container.addEventListener("mousedown", this.handleMouseDown);
-    container.addEventListener("mouseup", event => this.handleMouseUp(event, selectionHandler));
-    container.addEventListener("mousemove", this.handleMouseMove);
-    let parent = document.getElementsByClassName('__sys_placeholders')[0];
-    let placeHolders = document.getElementsByClassName('_draggable_');
-    let dropTarget = this.getDropTarget(parent);
-    for (const placeHolder of placeHolders) {
-      placeHolder.addEventListener('mousemove', event => this.handleItemMouseMove(event, parent), false);
-      placeHolder.addEventListener('mouseout', this.handleItemMouseOut, false);
-      placeHolder.addEventListener('mouseup', event => this.handleItemMouseClick(placeHolder, placeHolder.id, selectionHandler), false);
-      placeHolder.addEventListener('dragend', event => this.handleItemDrop(event, document.getElementsByClassName('dropTarget')[0]), false);
-    }
-  };
-  handleMouseMove = event => {
-    this.resizeNode(event, this.currentResizeNode);
-  };
-  handleMouseDown = event => {
-    this.mouseDown = true;
-  };
-  handleMouseUp = (event, selectionHandler) => {
-    this.mouseDown = false;
-    this.currentResizeNode = null;
-    document.body.style.cursor = "default";
-    if (typeof event.target.className === 'string' && event.target.className !== '_draggable_' && !event.target.className.startsWith('_item_table')) {
+    });
+    _defineProperty(this, "handleMouseMove", event => {
+      this.resizeNode(event, this.currentResizeNode);
+    });
+    _defineProperty(this, "handleMouseDown", event => {
+      this.mouseDown = true;
+    });
+    _defineProperty(this, "handleMouseUp", (event, selectionHandler) => {
+      this.mouseDown = false;
+      this.currentResizeNode = null;
+      document.body.style.cursor = "default";
+      if (typeof event.target.className === 'string' && event.target.className !== '_draggable_' && !event.target.className.startsWith('_item_table')) {
+        this.resetBorders();
+        this.selectedNode = null;
+        this.selectedNodeInitPosition = null;
+        if (selectionHandler) {
+          selectionHandler(null);
+        }
+      }
+      this.tableItemPreResizeWidth = null;
+      this.tableItemPreResizeHeight = null;
+      this.lastColItemPreResizeWidth = null;
+      this.firstColItemPreResizeWidth = null;
+      this.firstRowItemPreResizeHeight = null;
+      this.resizingTableColumn = false;
+    });
+    _defineProperty(this, "handleGrabRelease", (event, props, selectionHandler) => {
+      let width = props.width;
+      let height = props.height;
+      let parent = event.target;
+      let dropTarget = this.getDropTarget(parent);
+      if (dropTarget) {
+        let container = document.getElementById('templateContainer');
+        let node = document.createElement("div");
+        node.id = props.id;
+        node.style.left = (props.left ? props.left : container.scrollLeft + event.clientX - dropTarget.offsetLeft) + 'px';
+        node.style.top = (props.top ? props.top : container.scrollTop + event.clientY - dropTarget.offsetTop) + 'px';
+        node.style.border = '2px dashed green';
+        node.style.fontSize = '11px';
+        node.style.position = 'absolute';
+        node.style.verticalAlign = 'middle';
+        node.style.padding = '0 4px';
+        node.className = "_draggable_";
+        node.setAttribute("draggable", true);
+        if (props.sid) {
+          node.setAttribute("sid", props.sid);
+        }
+        if (props.sdesc) {
+          node.setAttribute("sdesc", props.sdesc);
+        }
+        if (props.type === 'TABLE') {
+          let table = new _TemplateTable.default(props.table, node).build((resizing, boundary) => {
+            this.resizingTableColumn = resizing;
+            this.resizingBoundaryTableColumn = boundary;
+          }, parent => {
+            return this.selectedNode === parent;
+          });
+          node.appendChild(table);
+          node.style.padding = '1px';
+          node.style.width = parse(table.style.width) + 2 + 'px';
+          node.style.height = parse(table.style.height) + 2 + 'px';
+          node.style.lineHeight = node.style.height;
+        } else {
+          node.style.height = height + 'px';
+          node.style.width = width + 'px';
+          node.style.lineHeight = node.style.height;
+          node.innerHTML = props.description;
+        }
+        node.addEventListener('dragend', event => this.handleItemDrop(event, dropTarget), false);
+        let placeHolders = dropTarget.getElementsByClassName('__sys_placeholders')[0];
+        node.addEventListener('mousemove', event => this.handleItemMouseMove(event, placeHolders), false);
+        node.addEventListener('mouseout', this.handleItemMouseOut, false);
+        node.addEventListener('mouseup', event => this.handleItemMouseClick(node, props.id, selectionHandler), false);
+        placeHolders.appendChild(node);
+        this.selectedNode = node;
+        this.setSelectedInitNodePos();
+      }
+      if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
+        document.getElementsByTagName("body")[0].style.cursor = 'default';
+      }
+    });
+    _defineProperty(this, "handleItemDrop", (event, target) => {
+      //console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + this.dragOffset.y);
+      event.target.style.left = event.clientX - this.dragOffset.x + 'px';
+      event.target.style.top = event.clientY - this.dragOffset.y + 'px';
+      event.preventDefault();
+      this.currentResizeNode = null;
+      this.mouseDown = false;
+      document.body.style.cursor = "default";
       this.resetBorders();
-      this.selectedNode = null;
-      this.selectedNodeInitPosition = null;
-      if (selectionHandler) {
-        selectionHandler(null);
+      event.target.style.border = '2px dashed green';
+    });
+    _defineProperty(this, "resizeNode", (event, node) => {
+      if (this.mouseDown && node) {
+        let container = document.getElementById('templateContainer');
+        if (container) {
+          let mouseX = event.clientX - this.resizingItemParent.getBoundingClientRect().left;
+          let mouseY = event.clientY - this.resizingItemParent.getBoundingClientRect().top;
+          let resizeSpec = {
+            leftOffset: 0,
+            rightOffset: 0,
+            topOffset: 0,
+            bottomOffset: 0
+          };
+          console.log("X : " + event.clientX + " Y : " + event.clientY + " MX : " + mouseX + " NL : " + node.style.left);
+          if (this.boundCheckLeft) {
+            let widthDiff = mouseX - parse(node.style.left);
+            let newWidth = parse(node.style.width) - widthDiff;
+            console.log("WD : " + widthDiff + " NW : " + newWidth + " MX : " + mouseX + " NL : " + node.style.left);
+            //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
+            resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
+            if (newWidth >= 20) {
+              node.style.width = newWidth + 'px';
+              node.style.left = mouseX + 'px';
+            }
+          }
+          if (this.boundCheckRight) {
+            let newWidth = mouseX - parse(node.style.left);
+            resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
+            if (newWidth >= 20) {
+              node.style.width = newWidth + 'px';
+            }
+          }
+          if (this.boundCheckTop) {
+            let heightDiff = mouseY - parse(node.style.top);
+            let newHeight = parse(node.style.height) - heightDiff;
+            resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
+            if (newHeight >= 20) {
+              node.style.height = newHeight + 'px';
+              node.style.lineHeight = newHeight + 'px';
+              node.style.top = mouseY + 'px';
+            }
+            resizeSpec.topResized = true;
+          }
+          if (this.boundCheckBottom) {
+            let newHeight = mouseY - parse(node.style.top);
+            resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
+            if (newHeight >= 20) {
+              node.style.height = newHeight + 'px';
+              node.style.lineHeight = newHeight + 'px';
+            }
+            resizeSpec.bottomResized = true;
+          }
+          this.resizeTables(node, resizeSpec);
+        }
       }
-    }
-    this.tableItemPreResizeWidth = null;
-    this.tableItemPreResizeHeight = null;
-    this.lastColItemPreResizeWidth = null;
-    this.firstColItemPreResizeWidth = null;
-    this.firstRowItemPreResizeHeight = null;
-    this.resizingTableColumn = false;
-  };
-  handleGrabRelease = (event, props, selectionHandler) => {
-    let width = props.width;
-    let height = props.height;
-    let parent = event.target;
-    let dropTarget = this.getDropTarget(parent);
-    if (dropTarget) {
-      let container = document.getElementById('templateContainer');
-      let node = document.createElement("div");
-      node.id = props.id;
-      node.style.left = (props.left ? props.left : container.scrollLeft + event.clientX - dropTarget.offsetLeft) + 'px';
-      node.style.top = (props.top ? props.top : container.scrollTop + event.clientY - dropTarget.offsetTop) + 'px';
-      node.style.border = '2px dashed green';
-      node.style.fontSize = '11px';
-      node.style.position = 'absolute';
-      node.style.verticalAlign = 'middle';
-      node.style.padding = '0 4px';
-      node.className = "_draggable_";
-      node.setAttribute("draggable", true);
-      if (props.sid) {
-        node.setAttribute("sid", props.sid);
+    });
+    _defineProperty(this, "updateCursor", (node, event, itemParent) => {
+      if (!this.mouseDown && this.selectedNode) {
+        let container = document.getElementById('templateContainer');
+        let left = parse(node.style.left) + container.offsetLeft;
+        let right = left + parse(node.style.width);
+        let top = parse(node.style.top) + itemParent.offsetTop;
+        let bottom = top + parse(node.style.height);
+        let mouseX = event.clientX + container.scrollLeft;
+        let mouseY = event.clientY - itemParent.getBoundingClientRect().top;
+        this.boundCheckTop = boundCheck(top, mouseY);
+        this.boundCheckLeft = boundCheck(left, mouseX);
+        this.boundCheckRight = boundCheck(right, mouseX);
+        this.boundCheckBottom = boundCheck(bottom, mouseY);
+        if (this.boundCheckTop && this.boundCheckLeft || this.boundCheckBottom && this.boundCheckRight) {
+          document.body.style.cursor = "nwse-resize";
+        } else if (this.boundCheckTop && this.boundCheckRight || this.boundCheckBottom && this.boundCheckLeft) {
+          document.body.style.cursor = "nesw-resize";
+        } else if (this.boundCheckTop || this.boundCheckBottom) {
+          document.body.style.cursor = "ns-resize";
+        } else if (this.boundCheckLeft || this.boundCheckRight) {
+          document.body.style.cursor = "ew-resize";
+        } else {
+          document.body.style.cursor = "move";
+        }
+        this.resizingItemParent = itemParent;
       }
-      if (props.sdesc) {
-        node.setAttribute("sdesc", props.sdesc);
+    });
+    _defineProperty(this, "resetBorders", () => {
+      let items = document.getElementsByClassName("_draggable_");
+      for (const item of items) {
+        item.style.border = 'none';
       }
-      if (props.type === 'TABLE') {
-        let table = new _TemplateTable.default(props.table, node).build((resizing, boundary) => {
-          this.resizingTableColumn = resizing;
-          this.resizingBoundaryTableColumn = boundary;
-        }, parent => {
-          return this.selectedNode === parent;
-        });
-        node.appendChild(table);
-        node.style.padding = '1px';
-        node.style.width = parse(table.style.width) + 2 + 'px';
-        node.style.height = parse(table.style.height) + 2 + 'px';
-        node.style.lineHeight = node.style.height;
-      } else {
-        node.style.height = height + 'px';
-        node.style.width = width + 'px';
-        node.style.lineHeight = node.style.height;
-        node.innerHTML = props.description;
+    });
+    _defineProperty(this, "handleItemMouseOut", event => {
+      if (!this.currentResizeNode) {
+        document.body.style.cursor = "default";
       }
-      node.addEventListener('dragend', event => this.handleItemDrop(event, dropTarget), false);
-      let placeHolders = dropTarget.getElementsByClassName('__sys_placeholders')[0];
-      node.addEventListener('mousemove', event => this.handleItemMouseMove(event, placeHolders), false);
-      node.addEventListener('mouseout', this.handleItemMouseOut, false);
-      node.addEventListener('mouseup', event => this.handleItemMouseClick(node, props.id, selectionHandler), false);
-      placeHolders.appendChild(node);
+    });
+    _defineProperty(this, "handleItemMouseMove", (event, itemParent) => {
+      let node = event.target;
+      this.updateCursor(node, event, itemParent);
+    });
+    _defineProperty(this, "handleItemMouseClick", (node, id, selectionHandler) => {
+      this.resetBorders();
+      node.style.border = '2px dashed green';
       this.selectedNode = node;
       this.setSelectedInitNodePos();
-    }
-    if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
-      document.getElementsByTagName("body")[0].style.cursor = 'default';
-    }
-  };
+      if (selectionHandler) {
+        selectionHandler(id, node);
+      }
+    });
+  }
   getDropTarget(node) {
     let parent = node;
     let dropTarget = null;
@@ -145,17 +266,6 @@ class TemplateItemEventHandler {
     }
     return dropTarget;
   }
-  handleItemDrop = (event, target) => {
-    //console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + this.dragOffset.y);
-    event.target.style.left = event.clientX - this.dragOffset.x + 'px';
-    event.target.style.top = event.clientY - this.dragOffset.y + 'px';
-    event.preventDefault();
-    this.currentResizeNode = null;
-    this.mouseDown = false;
-    document.body.style.cursor = "default";
-    this.resetBorders();
-    event.target.style.border = '2px dashed green';
-  };
   resizeTables(node, spec) {
     let tables = node.getElementsByClassName('_item_table');
     let table = tables && tables.length > 0 ? tables[0] : null;
@@ -168,7 +278,7 @@ class TemplateItemEventHandler {
     if (table) {
       if (spec.rightOffset !== 0) {
         let numCols = table['data-num-cols'];
-        let lastCols = node.getElementsByClassName(`_item_table_col_${numCols - 1}`);
+        let lastCols = node.getElementsByClassName("_item_table_col_".concat(numCols - 1));
         let newWidth;
         let resized = true;
         for (const lastCol of lastCols) {
@@ -233,112 +343,6 @@ class TemplateItemEventHandler {
       }
     }
   }
-  resizeNode = (event, node) => {
-    if (this.mouseDown && node) {
-      let container = document.getElementById('templateContainer');
-      if (container) {
-        let mouseX = event.clientX - this.resizingItemParent.getBoundingClientRect().left;
-        let mouseY = event.clientY - this.resizingItemParent.getBoundingClientRect().top;
-        let resizeSpec = {
-          leftOffset: 0,
-          rightOffset: 0,
-          topOffset: 0,
-          bottomOffset: 0
-        };
-        console.log("X : " + event.clientX + " Y : " + event.clientY + " MX : " + mouseX + " NL : " + node.style.left);
-        if (this.boundCheckLeft) {
-          let widthDiff = mouseX - parse(node.style.left);
-          let newWidth = parse(node.style.width) - widthDiff;
-          console.log("WD : " + widthDiff + " NW : " + newWidth + " MX : " + mouseX + " NL : " + node.style.left);
-          //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
-          resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
-          if (newWidth >= 20) {
-            node.style.width = newWidth + 'px';
-            node.style.left = mouseX + 'px';
-          }
-        }
-        if (this.boundCheckRight) {
-          let newWidth = mouseX - parse(node.style.left);
-          resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
-          if (newWidth >= 20) {
-            node.style.width = newWidth + 'px';
-          }
-        }
-        if (this.boundCheckTop) {
-          let heightDiff = mouseY - parse(node.style.top);
-          let newHeight = parse(node.style.height) - heightDiff;
-          resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
-          if (newHeight >= 20) {
-            node.style.height = newHeight + 'px';
-            node.style.lineHeight = newHeight + 'px';
-            node.style.top = mouseY + 'px';
-          }
-          resizeSpec.topResized = true;
-        }
-        if (this.boundCheckBottom) {
-          let newHeight = mouseY - parse(node.style.top);
-          resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
-          if (newHeight >= 20) {
-            node.style.height = newHeight + 'px';
-            node.style.lineHeight = newHeight + 'px';
-          }
-          resizeSpec.bottomResized = true;
-        }
-        this.resizeTables(node, resizeSpec);
-      }
-    }
-  };
-  updateCursor = (node, event, itemParent) => {
-    if (!this.mouseDown && this.selectedNode) {
-      let container = document.getElementById('templateContainer');
-      let left = parse(node.style.left) + container.offsetLeft;
-      let right = left + parse(node.style.width);
-      let top = parse(node.style.top) + itemParent.offsetTop;
-      let bottom = top + parse(node.style.height);
-      let mouseX = event.clientX + container.scrollLeft;
-      let mouseY = event.clientY - itemParent.getBoundingClientRect().top;
-      this.boundCheckTop = boundCheck(top, mouseY);
-      this.boundCheckLeft = boundCheck(left, mouseX);
-      this.boundCheckRight = boundCheck(right, mouseX);
-      this.boundCheckBottom = boundCheck(bottom, mouseY);
-      if (this.boundCheckTop && this.boundCheckLeft || this.boundCheckBottom && this.boundCheckRight) {
-        document.body.style.cursor = "nwse-resize";
-      } else if (this.boundCheckTop && this.boundCheckRight || this.boundCheckBottom && this.boundCheckLeft) {
-        document.body.style.cursor = "nesw-resize";
-      } else if (this.boundCheckTop || this.boundCheckBottom) {
-        document.body.style.cursor = "ns-resize";
-      } else if (this.boundCheckLeft || this.boundCheckRight) {
-        document.body.style.cursor = "ew-resize";
-      } else {
-        document.body.style.cursor = "move";
-      }
-      this.resizingItemParent = itemParent;
-    }
-  };
-  resetBorders = () => {
-    let items = document.getElementsByClassName("_draggable_");
-    for (const item of items) {
-      item.style.border = 'none';
-    }
-  };
-  handleItemMouseOut = event => {
-    if (!this.currentResizeNode) {
-      document.body.style.cursor = "default";
-    }
-  };
-  handleItemMouseMove = (event, itemParent) => {
-    let node = event.target;
-    this.updateCursor(node, event, itemParent);
-  };
-  handleItemMouseClick = (node, id, selectionHandler) => {
-    this.resetBorders();
-    node.style.border = '2px dashed green';
-    this.selectedNode = node;
-    this.setSelectedInitNodePos();
-    if (selectionHandler) {
-      selectionHandler(id, node);
-    }
-  };
   setSelectedInitNodePos() {
     this.selectedNodeInitPosition = {
       top: parse(this.selectedNode.style.top),

package/dist/components/TemplateTable.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const boundCheck = (pos, mousePos) => {
   return pos - 8 < mousePos && pos + 8 > mousePos;
 };
@@ -13,6 +16,31 @@ const parse = val => {
 const DEFAULT_COL_WIDTH = 32;
 class TemplateTable {
   constructor(config, parent) {
+    _defineProperty(this, "handleMouseMove", event => {
+      if (this.currentResizeCol && this.mouseDown) {}
+    });
+    _defineProperty(this, "getElementWidth", el => {
+      return el ? parseFloat(el.style.width.replace("px", "")) : null;
+    });
+    _defineProperty(this, "build", (colResizeHandler, parentSelectionChecker) => {
+      let tableConfig = this.config;
+      let tableHeight = tableConfig.defaultRowHeight * tableConfig.defaultNumRows;
+      let tableWidth = 0;
+      for (const column of tableConfig.columns) {
+        tableWidth += column.defaultWidth;
+      }
+      let table = document.createElement("div");
+      table['data-num-cols'] = tableConfig.columns.length;
+      table.className = '_item_table';
+      table.style.border = '1px solid #aaa';
+      table.style.width = tableWidth + 'px';
+      table.style.height = tableHeight + 'px';
+      let sortedCols = tableConfig.columns.sort((a, b) => a.id - b.id);
+      for (let i = 0; i < tableConfig.defaultNumRows; i++) {
+        table.appendChild(this.createRow(tableConfig, sortedCols, tableWidth, i, colResizeHandler, parentSelectionChecker));
+      }
+      return table;
+    });
     this.config = config;
     this.parent = parent;
     const _this = this;
@@ -59,7 +87,7 @@ class TemplateTable {
     });
   }
   resizeColumn(index, width) {
-    let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName(`_item_table_col_${index}`);
+    let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
     if (elements && elements.length > 0) {
       for (const element of elements) {
         element.style.width = width + 'px';
@@ -70,7 +98,7 @@ class TemplateTable {
     if (this.currentResizeCol) {
       this.currentResizeCol.style.borderWidth = width;
       let index = this.currentResizeCol['data-index'];
-      let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName(`_item_table_col_${index}`);
+      let elements = this.currentResizeCol.parentElement.parentElement.getElementsByClassName("_item_table_col_".concat(index));
       if (elements && elements.length > 0) {
         for (const element of elements) {
           element.style.borderWidth = width;
@@ -78,12 +106,6 @@ class TemplateTable {
       }
     }
   }
-  handleMouseMove = event => {
-    if (this.currentResizeCol && this.mouseDown) {}
-  };
-  getElementWidth = el => {
-    return el ? parseFloat(el.style.width.replace("px", "")) : null;
-  };
   createRow(tableConfig, cols, tableWidth, index, colResizeHandler, parentSelectionChecker) {
     let row = document.createElement("div");
     row.className = '_item_table_tr row';
@@ -101,7 +123,7 @@ class TemplateTable {
       if (i !== cols.length - 1) {
         colEl.style.borderRight = '1px solid #aaa';
       }
-      colEl.className = `_item_table_td _item_table_col_${i} col-*-*`;
+      colEl.className = "_item_table_td _item_table_col_".concat(i, " col-*-*");
       colEl['data-index'] = i;
       colEl.style.minWidth = DEFAULT_COL_WIDTH + 'px';
       colEl.style.height = '100%';
@@ -117,7 +139,7 @@ class TemplateTable {
         _this.currentClientX = e.clientX;
         _this.curResizeColWidth = _this.getElementWidth(colEl);
         let index = e.target['data-index'];
-        let elements = row.parentElement.getElementsByClassName(`_item_table_col_${index + 1}`);
+        let elements = row.parentElement.getElementsByClassName("_item_table_col_".concat(index + 1));
         if (elements && elements.length > 0) {
           _this.curResizeNxtColWidth = _this.getElementWidth(elements[0]);
         }
@@ -127,24 +149,5 @@ class TemplateTable {
     }
     return row;
   }
-  build = (colResizeHandler, parentSelectionChecker) => {
-    let tableConfig = this.config;
-    let tableHeight = tableConfig.defaultRowHeight * tableConfig.defaultNumRows;
-    let tableWidth = 0;
-    for (const column of tableConfig.columns) {
-      tableWidth += column.defaultWidth;
-    }
-    let table = document.createElement("div");
-    table['data-num-cols'] = tableConfig.columns.length;
-    table.className = '_item_table';
-    table.style.border = '1px solid #aaa';
-    table.style.width = tableWidth + 'px';
-    table.style.height = tableHeight + 'px';
-    let sortedCols = tableConfig.columns.sort((a, b) => a.id - b.id);
-    for (let i = 0; i < tableConfig.defaultNumRows; i++) {
-      table.appendChild(this.createRow(tableConfig, sortedCols, tableWidth, i, colResizeHandler, parentSelectionChecker));
-    }
-    return table;
-  };
 }
 exports.default = TemplateTable;

package/dist/components/TitleBar.js

@@ -31,7 +31,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
         actions: [{
           actionType: 'script',
           script: {
-            lines: [`if($event.data.name === 'title-${props.viewId}'){`, `   let component = @#{${props.config.id}};`, `   if(component) {`, `      component.title = $event.data.value`, `   }`, '}']
+            lines: ["if($event.data.name === 'title-".concat(props.viewId, "'){"), "   let component = @#{".concat(props.config.id, "};"), "   if(component) {", "      component.title = $event.data.value", "   }", '}']
           }
         }]
       };
@@ -63,7 +63,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
       color: '#202124'
     }
   }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
-    html: `<p>${title}</p>`
+    html: "<p>".concat(title, "</p>")
   })));
 }));
 var _default = exports.default = TitleBar;