@agilemotion/oui-react-js 1.3.4 → 1.3.5

package/dist/components/signatures/OLD.js

@@ -0,0 +1,1138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
+
+var _core = require("@material-ui/core");
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+
+var _reactPromiseTracker = require("react-promise-tracker");
+
+var _SignatureInputProps = _interopRequireDefault(require("./SignatureInputProps"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+var _Event = _interopRequireDefault(require("../../event/Event"));
+
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+
+var Base64 = _interopRequireWildcard(require("js-base64"));
+
+var _RestUtils = require("../../RestUtils");
+
+var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/ServiceCallActionHandler"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const INITIAL_ITEM = {
+  type: "initial",
+  defaultWidth: "100%",
+  defaultWidthOnPageDrop: "80px",
+  defaultHeightOnPageDrop: "80px"
+};
+const SIGN_ITEM = {
+  type: "sign",
+  defaultWidth: "100%",
+  defaultWidthOnPageDrop: "200px",
+  defaultHeightOnPageDrop: "80px"
+};
+const TEXT_ITEM = {
+  type: "text",
+  defaultWidth: "100%",
+  defaultWidthOnPageDrop: "200px",
+  defaultHeightOnPageDrop: "80px"
+};
+const DROP_ITEM_MARGIN = 32;
+const types = [INITIAL_ITEM, SIGN_ITEM, TEXT_ITEM];
+const useStyles = (0, _core.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  },
+  propertyWindow: {
+    height: "400px",
+    margin: "4px",
+    borderRadius: "4px",
+    paddingLeft: "24px",
+    borderBottom: "1px solid #e1e1e1",
+    borderTop: "1px solid #e1e1e1"
+  },
+  paletteButton: {
+    width: "270px",
+    height: "40px",
+    backgroundColor: "#e1e1e1",
+    margin: "4px",
+    textAlign: "center",
+    padding: "28px 0",
+    borderRadius: "4px"
+  },
+  paletteButtonSelected: {
+    '&:hover': {
+      backgroundColor: "yellowgreen"
+    },
+    width: "270px",
+    height: "40px",
+    backgroundColor: "yellowgreen",
+    margin: "4px",
+    textAlign: "center",
+    padding: "28px 0",
+    borderRadius: "4px"
+  },
+  palette: {
+    width: "280px",
+    borderRadius: "4px",
+    border: "1px solid #e1e1e1"
+  }
+}));
+
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+
+const json = response => {
+  return response.text();
+};
+
+const VALID_COLOR = "green";
+const INVALID_COLOR = "red";
+const location = window.location.protocol + "//" + window.location.hostname;
+const dragAndDropData = {}; //Global variable as Chrome doesn't allow access to event.dataTransfer in dragover
+
+const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        file = _React$useState2[0],
+        setFile = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(null),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        htmlTemplate = _React$useState4[0],
+        setHtmlTemplate = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        paletteSelectionId = _React$useState6[0],
+        setPaletteSelectionId = _React$useState6[1];
+
+  const paletteSelection = _react.default.useRef(null);
+
+  const idCounter = _react.default.useRef(0);
+
+  const _React$useState7 = _react.default.useState(null),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        value = _React$useState8[0],
+        setValue = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(null),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        selectedInputBoxValue = _React$useState10[0],
+        setSelectedInputBoxValue = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState([]),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        inputBoxValues = _React$useState12[0],
+        setInputBoxValues = _React$useState12[1];
+
+  const classes = useStyles();
+
+  const _React$useState13 = _react.default.useState(true),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        initializing = _React$useState14[0],
+        setInitializing = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(true),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        loading = _React$useState16[0],
+        setLoading = _React$useState16[1];
+
+  const documentName = _react.default.useRef(null);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(props.config.id);
+      }
+    }
+  });
+
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.valueChangeHandler)) {
+      props.valueChangeHandler(value);
+    }
+  }, [value]);
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      loadData: actionConfig => {
+        setLoading(true);
+        let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : !_Utils.default.isNull(actionConfig) !== null ? actionConfig.dataService : null;
+
+        if (!_Utils.default.isNull(service)) {
+          if (service.type === 'remoteObjectProxy') {
+            (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
+              setLoading(false);
+            }, e => {
+              console.error(e);
+
+              _Utils.default.publishSystemErrorMessage(props.viewId);
+            }, parameter => {
+              setLoading(false);
+            });
+          } else {
+            if (_Utils.default.isNull(actionConfig)) {
+              actionConfig = {};
+            }
+
+            actionConfig.service = service;
+
+            _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
+              setHtmlTemplate(data.template);
+              setLoading(false);
+            }, () => {});
+          }
+
+          return true;
+        } else {
+          if (!_Utils.default.isNull(actionConfig) && !_Utils.default.isNull(actionConfig.value)) {
+            let value = _ApplicationContext.default.isExpression(actionConfig.value) ? _ApplicationContext.default.resolveExpressionValue(actionConfig.value) : actionConfig.value;
+            setValue(value);
+
+            if (!_Utils.default.isNull(value)) {
+              setHtmlTemplate(value.htmlTemplate);
+              setInputBoxValues(value.signatureInputs);
+              idCounter.current = value.idCounter;
+            }
+          }
+
+          setLoading(false);
+        }
+      },
+
+      get model() {
+        return value;
+      },
+
+      get value() {
+        return value;
+      }
+
+    };
+  };
+
+  let mouseOverHandler = function mouseOverHandler(event) {
+    if (typeof event.target.className === 'string' && event.target.className.includes("dropTarget") && paletteSelection.current !== null) {
+      let originalBorder = event.target.style.border.replace(INVALID_COLOR, VALID_COLOR);
+      event.target.setAttribute('originalBorder', originalBorder);
+      event.target.style.border = "4px dashed " + VALID_COLOR;
+    }
+  };
+
+  let mouseOutHandler = function mouseOutHandler(event) {
+    if (typeof event.target.className === 'string' && event.target.className.includes("dropTarget")) {
+      let originalBorder = event.target.getAttribute("originalBorder");
+
+      if (_Utils.default.isNull(originalBorder)) {
+        originalBorder = "";
+      }
+
+      event.target.style.border = originalBorder;
+    }
+  };
+
+  const resetBorders = item => {
+    let elements = document.getElementsByClassName("_draggable_" + item.type);
+
+    var _iterator = _createForOfIteratorHelper(elements),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        const element = _step.value;
+        element.style.borderWidth = "2px";
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+
+  const getAllInputBoxElements = () => {
+    let elements = [];
+
+    var _iterator2 = _createForOfIteratorHelper(types),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        const type = _step2.value;
+
+        var _iterator3 = _createForOfIteratorHelper(document.getElementsByClassName("_draggable_" + type.type)),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const element = _step3.value;
+            elements.push(element);
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    return elements;
+  };
+
+  const getPageDropOffset = (left, top) => {
+    let leftOffset = 0;
+    let topOffset = 0;
+    let elements = getAllInputBoxElements();
+
+    var _iterator4 = _createForOfIteratorHelper(elements),
+        _step4;
+
+    try {
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        const element = _step4.value;
+
+        if (parseFloat(element.style.left.replace('px', '')) === left) {
+          leftOffset += 4;
+          left = parseFloat(element.style.left.replace('px', '')) + 4;
+        }
+
+        if (parseFloat(element.style.top.replace('px', '')) === top) {
+          topOffset += 4;
+          top = parseFloat(element.style.top.replace('px', ''));
+        }
+      }
+    } catch (err) {
+      _iterator4.e(err);
+    } finally {
+      _iterator4.f();
+    }
+
+    return {
+      leftOffset: leftOffset,
+      topOffset: topOffset
+    };
+  };
+
+  const convertToPixels = val => {
+    if (val.includes("pt")) {
+      let numericValue = parseFloat(val.replace('pt', ''));
+      return (4 * numericValue / 3).toFixed(0) + "px";
+    }
+
+    return val;
+  };
+
+  const resetAllBorder = () => {
+    resetBorders(INITIAL_ITEM);
+    resetBorders(SIGN_ITEM);
+    resetBorders(TEXT_ITEM);
+  };
+
+  let mouseClickHandler = function mouseClickHandler(event) {
+    resetAllBorder();
+    setSelectedInputBoxValue(null);
+
+    if (typeof event.target.className === 'string' && event.target.className.includes("dropTarget")) {
+      if (paletteSelection.current !== null) {
+        let node = document.createElement("div"); // TODO : First check if its an overlay or an adaptive mode
+
+        node.style.lineHeight = event.target.style.lineHeight;
+        node.style.border = "2px dashed " + INVALID_COLOR;
+        node.style.position = 'absolute';
+        node.style.borderRadius = '2px';
+        node.id = idCounter.current++;
+        node.className = "__agm_wf_signatureInput__ _draggable_" + paletteSelection.current.type;
+        node.setAttribute("draggable", true);
+
+        if (event.target.className.includes("page")) {
+          let top = !_Utils.default.isNull(event.target.style.top) && event.target.style.top.trim().length > 0 ? event.target.style.top.replaceAll('pt', '') : '0';
+          let topPos = parseFloat(top) + parseFloat(event.target.style.height.replace('pt', '')) - parseFloat(paletteSelection.current.defaultHeightOnPageDrop.replace('px', '')) * .75 - DROP_ITEM_MARGIN;
+          let pageDropOffset = getPageDropOffset(DROP_ITEM_MARGIN, parseFloat(convertToPixels(topPos + "pt").replace('px', '')));
+          node.style.top = convertToPixels(topPos - pageDropOffset.topOffset + 'pt');
+          node.style.width = paletteSelection.current.defaultWidthOnPageDrop;
+          node.style.height = paletteSelection.current.defaultHeightOnPageDrop;
+          node.style.padding = '8px';
+          node.style.left = DROP_ITEM_MARGIN + pageDropOffset.leftOffset + 'px';
+          event.target.appendChild(node);
+        } else {
+          let lineHeight = event.target.style.lineHeight;
+          let hasLineHeight = !_Utils.default.isNull(lineHeight) && lineHeight.trim().length > 0 && lineHeight.toString() !== '0';
+          node.style.top = hasLineHeight ? event.target.style.top : convertToPixels(parseFloat(event.target.style.top.replace('pt', '')) - 14.5 + 'pt');
+          node.style.left = event.target.style.left;
+          node.style.width = convertToPixels(event.target.style.width);
+          node.style.height = convertToPixels(hasLineHeight ? event.target.style.lineHeight : '14.5pt');
+          node.style.padding = parseFloat(node.style.height.replace('px', '')) > 32 ? '8px' : '0px';
+          event.target.parentElement.appendChild(node);
+        }
+
+        node.addEventListener('dragstart', dragStart, false);
+        let inputValue = {};
+        inputValue.id = node.id;
+        inputValue.height = node.style.height.replace("px", "");
+        inputValue.width = node.style.width.replace("px", "");
+        inputValue.type = paletteSelection.current.type === "initial" ? "INITIAL" : paletteSelection.current.type === "sign" ? "SIGN" : "TEXT INPUT";
+        inputBoxValues.push(inputValue);
+        setValue(null);
+      }
+
+      paletteSelection.current = null;
+      setPaletteSelectionId(null);
+    } else if (event.target.className.includes("_draggable_")) {
+      event.target.style.borderWidth = "4px";
+      let inputValue = getInputValue(event.target.id);
+      setSelectedInputBoxValue(inputValue);
+    }
+
+    if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
+      paletteSelection.current = null;
+      setPaletteSelectionId(null);
+      document.getElementsByTagName("body")[0].style.cursor = 'default';
+    }
+  };
+
+  _react.default.useEffect(() => {
+    return () => {
+      destroyEvents();
+    };
+  }, []);
+
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, value);
+
+    _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+  }, [value]);
+
+  const initDragAndDrop = className => {
+    setTimeout(() => {
+      let elements = document.getElementsByClassName(className);
+
+      var _iterator5 = _createForOfIteratorHelper(elements),
+          _step5;
+
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          const element = _step5.value;
+
+          if (className !== "page") {
+            element.addEventListener("dragstart", dragStart, false);
+          }
+
+          element.addEventListener("dragover", dragOver, false);
+          element.addEventListener("drop", drop, false);
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+    }, 2000);
+  };
+
+  const destroyEvents = () => {
+    let elements = document.getElementsByClassName("page");
+
+    var _iterator6 = _createForOfIteratorHelper(elements),
+        _step6;
+
+    try {
+      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+        const element = _step6.value;
+        element.removeEventListener("dragover", dragOver);
+        element.removeEventListener("drop", drop);
+      }
+    } catch (err) {
+      _iterator6.e(err);
+    } finally {
+      _iterator6.f();
+    }
+
+    let allInputs = getAllInputBoxElements();
+
+    var _iterator7 = _createForOfIteratorHelper(allInputs),
+        _step7;
+
+    try {
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+        const element = _step7.value;
+        element.removeEventListener("dragover", dragOver);
+        element.removeEventListener("drop", drop);
+        element.removeEventListener("dropStart", dragStart);
+      }
+    } catch (err) {
+      _iterator7.e(err);
+    } finally {
+      _iterator7.f();
+    }
+  };
+
+  _react.default.useEffect(() => {
+    initDragAndDrop("page");
+
+    var _iterator8 = _createForOfIteratorHelper(types),
+        _step8;
+
+    try {
+      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+        const type = _step8.value;
+        initDragAndDrop("_draggable_" + type.type);
+        resetBorders(type);
+      }
+    } catch (err) {
+      _iterator8.e(err);
+    } finally {
+      _iterator8.f();
+    }
+
+    if (!loading) {
+      setValue(null);
+    }
+
+    setSelectedInputBoxValue(null);
+    setInputBoxValues([]);
+    setPaletteSelectionId(null);
+  }, [htmlTemplate]);
+
+  function getElementPage(elementId) {
+    let pages = document.getElementsByClassName("page");
+
+    var _iterator9 = _createForOfIteratorHelper(pages),
+        _step9;
+
+    try {
+      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+        const page = _step9.value;
+        let elements = page.getElementsByClassName("__agm_wf_signatureInput__");
+
+        var _iterator10 = _createForOfIteratorHelper(elements),
+            _step10;
+
+        try {
+          for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+            const element = _step10.value;
+
+            if (element.id === elementId) {
+              return page;
+            }
+          }
+        } catch (err) {
+          _iterator10.e(err);
+        } finally {
+          _iterator10.f();
+        }
+      }
+    } catch (err) {
+      _iterator9.e(err);
+    } finally {
+      _iterator9.f();
+    }
+
+    return null;
+  }
+
+  function handleDragDrop(event) {
+    let offset;
+    offset = dragAndDropData.offset.split(',');
+    let dm = document.getElementById(dragAndDropData.id);
+    let page = getElementPage(dm.id);
+    let itemLeft = event.clientX + parseInt(offset[0], 10);
+    let itemTop = event.clientY + parseInt(offset[1], 10);
+    let itemWidth = parseFloat(convertToPixels(dm.style.width).replace('px', ''));
+    let itemHeight = parseFloat(convertToPixels(dm.style.height).replace('px', ''));
+    dm.style.left = itemLeft + 'px';
+    dm.style.top = itemTop + 'px';
+    let itemRight = itemLeft + itemWidth;
+    let itemBottom = itemTop + itemHeight;
+    let pageRight = parseFloat(convertToPixels(page.style.width).replace('px', ''));
+    let pageBottom = parseFloat(convertToPixels(page.style.height).replace('px', ''));
+
+    if (itemLeft < DROP_ITEM_MARGIN) {
+      dm.style.left = DROP_ITEM_MARGIN + 'px';
+    }
+
+    if (itemRight > pageRight - DROP_ITEM_MARGIN) {
+      dm.style.left = pageRight - DROP_ITEM_MARGIN - itemWidth + 'px';
+    }
+
+    if (itemTop < DROP_ITEM_MARGIN) {
+      dm.style.top = DROP_ITEM_MARGIN + 'px';
+    }
+
+    if (itemBottom > pageBottom - DROP_ITEM_MARGIN) {
+      dm.style.top = pageBottom - DROP_ITEM_MARGIN - itemHeight + 'px';
+    }
+
+    event.preventDefault();
+    return false;
+  }
+
+  function dragStart(event) {
+    document.body.style.cursor = "move";
+    let style = window.getComputedStyle(event.target, null);
+    dragAndDropData.offset = parseInt(style.getPropertyValue("left"), 10) - event.clientX + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY);
+    dragAndDropData.id = event.target.id;
+  }
+
+  function dragOver(event) {
+    document.body.style.cursor = "move";
+    return handleDragDrop(event);
+  }
+
+  function drop(event) {
+    document.body.style.cursor = "default";
+    return handleDragDrop(event);
+  }
+
+  const getInputValue = id => {
+    let index = 0;
+
+    var _iterator11 = _createForOfIteratorHelper(inputBoxValues),
+        _step11;
+
+    try {
+      for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+        const inputBoxValue = _step11.value;
+
+        if (inputBoxValue.id === id) {
+          inputBoxValue.index = index;
+          return inputBoxValue;
+        }
+
+        index++;
+      }
+    } catch (err) {
+      _iterator11.e(err);
+    } finally {
+      _iterator11.f();
+    }
+
+    return null;
+  };
+
+  const handleSubmit = () => event => {
+    setHtmlTemplate("");
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    let data = new FormData();
+    data.append("sourceType", "PDF");
+    data.append("targetType", "HTML");
+    data.append("file", file);
+    let fetchConfig = {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+    let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.documentConverterUrl;
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      setHtmlTemplate(data);
+      setFile(null);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationContext.default.clear();
+
+        _ApplicationContext.default.getApplicationHistory().push('/login');
+      }
+    }));
+  };
+
+  const handleChange = () => event => {
+    let files = event.target.files;
+    documentName.current = files[0].name;
+    setFile(files[0]);
+  };
+
+  const deleteInputItem = id => {
+    let val = getInputValue(id);
+    inputBoxValues.splice(val.index, 1);
+    let element = document.getElementById(id);
+    element.remove();
+    saveValue();
+  };
+
+  const clear = () => {
+    var _iterator12 = _createForOfIteratorHelper(inputBoxValues),
+        _step12;
+
+    try {
+      for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+        const inputBoxValue = _step12.value;
+        document.getElementById(inputBoxValue.id).remove();
+      }
+    } catch (err) {
+      _iterator12.e(err);
+    } finally {
+      _iterator12.f();
+    }
+
+    inputBoxValues.splice(0, inputBoxValues.length);
+    setValue(null);
+  };
+
+  const handleDuplicate = id => {
+    let inputValue = getInputValue(id);
+    let element = document.getElementById(id);
+    let pageElements = document.getElementsByClassName("page");
+    let elementPage = null;
+    let elementTop = 3 * parseFloat(element.style.top.replace("px", '').replace('pt', '')) / 4;
+    let pageElementTop = 0;
+
+    var _iterator13 = _createForOfIteratorHelper(pageElements),
+        _step13;
+
+    try {
+      for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+        const pageElement = _step13.value;
+        let pageElementHeight = parseFloat(pageElement.style.height.replace("px", '').replace('pt', ''));
+
+        if (elementTop >= pageElementTop && elementTop < pageElementTop + pageElementHeight) {
+          elementPage = pageElement;
+          break;
+        }
+
+        pageElementTop += pageElementHeight;
+      }
+    } catch (err) {
+      _iterator13.e(err);
+    } finally {
+      _iterator13.f();
+    }
+
+    let offset = elementTop - pageElementTop;
+    let pageNumber = 0;
+    let elementData = getInputValue(id);
+
+    var _iterator14 = _createForOfIteratorHelper(pageElements),
+        _step14;
+
+    try {
+      for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
+        const pageElement = _step14.value;
+        let pageElementHeight = parseFloat(pageElement.style.height.replace("px", '').replace('pt', ''));
+
+        if (pageElement !== elementPage) {
+          let node = document.createElement("div");
+          node.style.lineHeight = element.lineHeight;
+          node.style.border = element.style.border;
+          node.style.position = 'absolute';
+          node.style.borderWidth = '2px';
+          node.style.borderRadius = '2px';
+          node.style.width = element.style.width;
+          node.style.padding = element.style.padding;
+          node.style.height = element.style.height;
+          node.style.left = element.style.left;
+          node.innerText = element.innerText;
+          node.style.top = convertToPixels(pageNumber * pageElementHeight + offset + 'pt');
+          node.id = idCounter.current++;
+          node.className = element.className;
+          node.setAttribute("sid", element.getAttribute("sid"));
+          node.setAttribute("draggable", true);
+          let inputValue = {};
+          inputValue.id = node.id;
+          inputValue.height = node.style.height.replace("px", "");
+          inputValue.width = node.style.width.replace("px", "");
+          inputValue.type = elementData.type;
+          inputValue.signatory = elementData.signatory;
+          inputBoxValues.push(inputValue);
+          pageElement.appendChild(node);
+          node.addEventListener('dragstart', dragStart, false);
+          saveValue();
+        }
+      }
+    } catch (err) {
+      _iterator14.e(err);
+    } finally {
+      _iterator14.f();
+    }
+  };
+
+  function saveValue() {
+    let allValid = true;
+
+    var _iterator15 = _createForOfIteratorHelper(inputBoxValues),
+        _step15;
+
+    try {
+      for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
+        const inputBoxValue = _step15.value;
+
+        if (_Utils.default.isNull(inputBoxValue.signatory)) {
+          allValid = false;
+          break;
+        }
+      }
+    } catch (err) {
+      _iterator15.e(err);
+    } finally {
+      _iterator15.f();
+    }
+
+    if (allValid) {
+      let newValue = {};
+      newValue.htmlTemplate = document.getElementById("templateContainer").innerHTML.replace("div name=\"replaced_html\"", "html").replace("div name=\"replaced_body\"", "body");
+      newValue.htmlTemplateBase64 = Base64.encode(newValue.htmlTemplate);
+      newValue.signatureInputs = inputBoxValues;
+      newValue.idCounter = idCounter.current;
+      newValue.documentName = documentName.current;
+      setValue(newValue);
+    } else {
+      setValue(null);
+    }
+  }
+
+  const saveProps = (id, values) => {
+    let val = getInputValue(id);
+    val.width = values.width;
+    val.height = values.height;
+    val.signatory = values.signatory;
+    val.type = values.type === 'TEXT INPUT' ? 'TEXT_INPUT' : values.type;
+    let element = document.getElementById(id);
+    element.style.width = values.width + "px";
+    element.style.height = values.height + "px";
+    element.style.borderColor = VALID_COLOR;
+    element.innerText = values.signatory.map.name;
+    element.setAttribute("sid", values.signatory.map.emailAddress);
+    saveValue();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    style: {
+      padding: "0 32px"
+    }
+  }, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "100%",
+      maxHeight: "70vh"
+    }
+  }, _Utils.default.isNull(props.showToolbar) || props.showToolbar === true ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: "32px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    accept: "application/pdf",
+    className: classes.input,
+    id: "contained-button-file",
+    onChange: handleChange(),
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "contained-button-file"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: classes.button
+  }, "Upload File"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    disabled: _Utils.default.isNull(file),
+    className: classes.button,
+    onClick: handleSubmit()
+  }, "Generate Template"))))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: "auto"
+    }
+  }, !_Utils.default.isNull(htmlTemplate) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: 'row'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.palette, " col-*-*"),
+    style: {
+      maxHeight: "calc(70vh - 80px)",
+      overflow: "auto"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: paletteSelectionId === 'INITIAL_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
+    onClick: () => {
+      document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+      paletteSelection.current = INITIAL_ITEM;
+      setPaletteSelectionId('INITIAL_ITEM');
+    },
+    id: "initialPaletteButton",
+    classes: {
+      "label": "paletteButtonLabel"
+    }
+  }, "Initial Pad")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: paletteSelectionId === 'SIGN_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
+    onClick: () => {
+      document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+      paletteSelection.current = SIGN_ITEM;
+      setPaletteSelectionId('SIGN_ITEM');
+    },
+    id: "signPaletteButton",
+    classes: {
+      "label": "paletteButtonLabel"
+    }
+  }, "Signature Pad")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: paletteSelectionId === 'TEXT_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
+    onClick: () => {
+      document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+      paletteSelection.current = TEXT_ITEM;
+      setPaletteSelectionId('TEXT_ITEM');
+    },
+    id: "signPaletteButton",
+    classes: {
+      "label": "paletteButtonLabel"
+    }
+  }, "Text Input")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: classes.paletteButton,
+    onClick: () => {
+      clear();
+    },
+    id: "clearButton",
+    classes: {
+      "label": "paletteButtonLabel"
+    }
+  }, "Clear")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.propertyWindow)
+  }, /*#__PURE__*/_react.default.createElement(_SignatureInputProps.default, {
+    value: selectedInputBoxValue,
+    signatoryUrl: location + _ApplicationContext.default.getBaseApiUrl() + props.config.signatoryUrl,
+    saveHandler: (id, values) => saveProps(id, values),
+    deleteHandler: (id, values) => deleteInputItem(id, values),
+    dublicateHandler: id => handleDuplicate(id)
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxHeight: "calc(70vh - 80px)",
+      overflow: "auto",
+      width: "60%"
+    },
+    className: 'col-*-*',
+    id: "signaturePanel",
+    onClick: e => mouseClickHandler(e),
+    onMouseOver: e => mouseOverHandler(e),
+    onMouseOut: e => mouseOutHandler(e),
+    id: "templateContainer"
+  }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
+    html: htmlTemplate.replace('<html', "<div name=\"replaced_html\"").replace('</html>', '</div>').replace('<body', "<div name=\"replaced_body\"").replace('</body>', '</div>')
+  }))) : null)) : /*#__PURE__*/_react.default.createElement("div", null, "Loading..."));
+}));
+
+var _default = SignatureTemplateDesigner;
+exports.default = _default;
+
+/*#__PURE__*/
+_react.default.createElement("div", {
+  ref: ref,
+  style: {
+    padding: "0 32px"
+  }
+}, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: "100%",
+    maxHeight: "70vh"
+  }
+}, _Utils.default.isNull(props.showToolbar) || props.showToolbar === true ? /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginBottom: "32px"
+  }
+}, /*#__PURE__*/_react.default.createElement("input", {
+  accept: "application/pdf",
+  className: classes.input,
+  id: "contained-button-file",
+  onChange: handleChange(),
+  type: "file"
+}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  className: "row"
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "col-*-*"
+}, /*#__PURE__*/_react.default.createElement("label", {
+  htmlFor: "contained-button-file"
+}, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  variant: "contained",
+  component: "span",
+  className: classes.button
+}, "Upload File"))), /*#__PURE__*/_react.default.createElement("div", {
+  className: "col-*-*"
+}, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  variant: "contained",
+  component: "span",
+  disabled: _Utils.default.isNull(file),
+  className: classes.button,
+  onClick: handleSubmit()
+}, "Generate Template"))))) : null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    height: "auto"
+  }
+}, !_Utils.default.isNull(templateDoc) ? /*#__PURE__*/_react.default.createElement("div", {
+  className: 'row'
+}, /*#__PURE__*/_react.default.createElement("div", {
+  className: "".concat(classes.palette, " col-*-*"),
+  style: {
+    maxHeight: "calc(70vh - 80px)",
+    overflow: "auto",
+    width: '280px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  variant: "contained",
+  component: "span",
+  className: paletteSelectionId === 'INITIAL_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
+  onClick: () => grabPalleteItem({
+    id: 'INITIAL_ITEM',
+    description: 'Initial',
+    type: 'INITIAL_ITEM',
+    props: INITIAL_ITEM
+  }),
+  id: "initialPaletteButton",
+  classes: {
+    "label": "paletteButtonLabel"
+  }
+}, "Initial Pad"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  variant: "contained",
+  component: "span",
+  className: paletteSelectionId === 'SIGN_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
+  onClick: () => {
+    document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+    paletteSelection.current = SIGN_ITEM;
+    setPaletteSelectionId('SIGN_ITEM');
+  },
+  id: "signPaletteButton",
+  classes: {
+    "label": "paletteButtonLabel"
+  }
+}, "Signature Pad"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  variant: "contained",
+  component: "span",
+  className: paletteSelectionId === 'TEXT_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
+  onClick: () => {
+    document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+    paletteSelection.current = TEXT_ITEM;
+    setPaletteSelectionId('TEXT_ITEM');
+  },
+  id: "signPaletteButton",
+  classes: {
+    "label": "paletteButtonLabel"
+  }
+}, "Text Input"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  variant: "contained",
+  component: "span",
+  className: classes.paletteButton,
+  onClick: () => {
+    clear();
+  },
+  id: "clearButton",
+  classes: {
+    "label": "paletteButtonLabel"
+  }
+}, "Clear"), /*#__PURE__*/_react.default.createElement("div", {
+  className: "".concat(classes.propertyWindow)
+}, /*#__PURE__*/_react.default.createElement(_SignatureInputProps.default, {
+  value: selectedInputBoxValue,
+  signatoryUrl: location + _ApplicationContext.default.getBaseApiUrl() + props.config.signatoryUrl,
+  saveHandler: (id, values) => saveProps(id, values),
+  deleteHandler: (id, values) => deleteInputItem(id, values),
+  dublicateHandler: id => handleDuplicate(id)
+}))), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    border: "1px solid #e1e1e1",
+    borderRadius: "4px",
+    marginLeft: "8px",
+    height: "100%",
+    width: "calc(100% - 288px)"
+  },
+  className: 'col-*-*',
+  onClick: e => mouseClickHandler(e)
+}, templateDoc ? /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    maxHeight: "calc(70vh - 80px)",
+    overflow: "auto"
+  },
+  className: 'col-*-*',
+  id: "templateContainer"
+}, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
+  html: templateDoc.replace('<html', "<div name=\"replaced_html\"").replace('</html>', '</div>').replace('<body', "<div name=\"replaced_body\"").replace('</body>', '</div>')
+})) : /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: '100%',
+    display: 'inline-block',
+    textAlign: 'center',
+    marginTop: '64px'
+  }
+}, "no template to display"))) : null)) : /*#__PURE__*/_react.default.createElement("div", null, "Loading..."));