@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/signatures/OLD.js

@@ -1,1138 +0,0 @@
-"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..."));