@agilemotion/oui-react-js 1.3.8 → 1.3.9

package/dist/components/signatures/SignatureTemplateDesigner.js

@@ -37,26 +37,12 @@ var _TemplateItemEventHandler = _interopRequireDefault(require("../TemplateItemE
 
 require("../TemplateDesigner.css");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { 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 = {
   defaultWidthOnPageDrop: 80,
   defaultHeightOnPageDrop: 80
@@ -82,40 +68,40 @@ const useStyles = (0, _core.makeStyles)(theme => ({
     color: 'red'
   },
   propertyWindow: {
-    height: "400px",
-    margin: "4px",
-    borderRadius: "4px",
-    paddingLeft: "24px",
-    borderBottom: "1px solid #e1e1e1",
-    borderTop: "1px solid #e1e1e1"
+    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",
+    width: '270px',
+    height: '40px',
+    backgroundColor: '#e1e1e1',
+    margin: '4px',
+    textAlign: 'center',
+    padding: '28px 0',
+    borderRadius: '4px',
     cursor: 'grabbing'
   },
   paletteButtonSelected: {
     '&:hover': {
-      backgroundColor: "yellowgreen"
+      backgroundColor: 'yellowgreen'
     },
-    width: "270px",
-    height: "40px",
-    backgroundColor: "yellowgreen",
-    margin: "4px",
-    textAlign: "center",
-    padding: "28px 0",
-    borderRadius: "4px",
+    width: '270px',
+    height: '40px',
+    backgroundColor: 'yellowgreen',
+    margin: '4px',
+    textAlign: 'center',
+    padding: '28px 0',
+    borderRadius: '4px',
     cursor: 'grabbing'
   },
   palette: {
-    width: "280px",
-    borderRadius: "4px",
-    border: "1px solid #e1e1e1"
+    width: '280px',
+    borderRadius: '4px',
+    border: '1px solid #e1e1e1'
   }
 }));
 
@@ -133,81 +119,46 @@ const json = response => {
   return response.text();
 };
 
-const location = window.location.protocol + "//" + window.location.hostname;
+const location = window.location.protocol + '//' + window.location.hostname;
 const templateItemEventHandler = new _TemplateItemEventHandler.default();
-const VALID_COLOR = "green";
+const VALID_COLOR = 'green';
 
 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 [file, setFile] = _react.default.useState(null);
 
-  const _React$useState3 = _react.default.useState(null),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        templateDoc = _React$useState4[0],
-        setTemplateDoc = _React$useState4[1];
+  const [templateDoc, setTemplateDoc] = _react.default.useState(null);
 
-  const _React$useState5 = _react.default.useState(null),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        paletteSelectionId = _React$useState6[0],
-        setPaletteSelectionId = _React$useState6[1];
+  const [paletteSelectionId, setPaletteSelectionId] = _react.default.useState(null);
 
   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 [value, setValue] = _react.default.useState(null);
 
-  const _React$useState9 = _react.default.useState(null),
-        _React$useState10 = _slicedToArray(_React$useState9, 2),
-        selectedInputBoxValue = _React$useState10[0],
-        setSelectedInputBoxValue = _React$useState10[1];
+  const [selectedInputBoxValue, setSelectedInputBoxValue] = _react.default.useState(null);
 
-  const _React$useState11 = _react.default.useState([]),
-        _React$useState12 = _slicedToArray(_React$useState11, 2),
-        inputBoxValues = _React$useState12[0],
-        setInputBoxValues = _React$useState12[1];
+  const [inputBoxValues, setInputBoxValues] = _react.default.useState([]);
 
   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(_Utils.default.isNull(props.autoLoadData) || props.autoLoadData === true),
-        _React$useState16 = _slicedToArray(_React$useState15, 2),
-        loading = _React$useState16[0],
-        setLoading = _React$useState16[1];
+  const [loading, setLoading] = _react.default.useState(_Utils.default.isNull(props.autoLoadData) || props.autoLoadData === true);
 
   const documentName = _react.default.useRef(null);
 
-  const _React$useState17 = _react.default.useState(null),
-        _React$useState18 = _slicedToArray(_React$useState17, 2),
-        grabbedItem = _React$useState18[0],
-        setGrabbedItem = _React$useState18[1];
+  const [grabbedItem, setGrabbedItem] = _react.default.useState(null);
 
   _react.default.useEffect(() => {
-    if (initializing) {
-      props.handle.api = api();
-
-      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    props.handle.api = api();
+  });
 
-      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
-      _Observable.default.addSystemSubscriptions(parsedConfig);
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-      setInitializing(false);
-
-      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
-        props.loadCompleteHandler(props.config.id);
-      }
-    }
-  });
+    _Observable.default.addSystemSubscriptions(parsedConfig);
+  }, []);
 
   const setup = () => {
     let container = document.getElementById('templateContainer');
@@ -219,7 +170,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
 
   _react.default.useEffect(() => {
     setup();
-  });
+  }, []);
 
   _react.default.useEffect(() => {
     setup();
@@ -242,7 +193,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
         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') {
+          if (service.type === 'rpc') {
             (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
               setLoading(false);
             }, e => {
@@ -296,14 +247,15 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
   const newItem = (id, width, height) => {
     let inputValue = {};
     inputValue.id = id;
-    inputValue.height = height.replace("px", "");
-    inputValue.width = width.replace("px", "");
-    inputValue.type = paletteSelection.current === "INITIAL_ITEM" ? "INITIAL" : paletteSelection.current === "SIGN_ITEM" ? "SIGN" : "TEXT INPUT";
+    inputValue.height = height.replace('px', '');
+    inputValue.width = width.replace('px', '');
+    inputValue.type = paletteSelection.current === 'INITIAL_ITEM' ? 'INITIAL' : paletteSelection.current === 'SIGN_ITEM' ? 'SIGN' : 'TEXT INPUT';
     return inputValue;
   };
 
-  let mouseClickHandler = function mouseClickHandler(event) {
+  let mouseClickHandler = function (event) {
     if (grabbedItem) {
+      setValue(null);
       setSelectedInputBoxValue(null);
       templateItemEventHandler.handleGrabRelease(event, {
         id: grabbedItem.id,
@@ -317,9 +269,9 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
         if (!inputValue) {
           inputValue = newItem(id, node.style.width, node.style.height);
           inputBoxValues.push(inputValue);
-          setValue(null);
         }
 
+        saveValue();
         setSelectedInputBoxValue(inputValue);
       });
     }
@@ -329,7 +281,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
   };
 
   const grabPalleteItem = item => {
-    document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+    document.getElementsByTagName('body')[0].style.cursor = 'grabbing';
     setPaletteSelectionId(item.type);
     paletteSelection.current = item.type;
     setGrabbedItem(item);
@@ -344,37 +296,26 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
   const getInputValue = id => {
     let index = 0;
 
-    var _iterator = _createForOfIteratorHelper(inputBoxValues),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        const inputBoxValue = _step.value;
-
-        if (inputBoxValue.id === id) {
-          inputBoxValue.index = index;
-          return inputBoxValue;
-        }
-
-        index++;
+    for (const inputBoxValue of inputBoxValues) {
+      if (inputBoxValue.id === id) {
+        inputBoxValue.index = index;
+        return inputBoxValue;
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
+
+      index++;
     }
 
     return null;
   };
 
   const handleSubmit = () => event => {
-    setTemplateDoc("");
-    const accessToken = sessionStorage.getItem("accessToken");
-    const idToken = sessionStorage.getItem("idToken");
+    setTemplateDoc('');
+    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);
+    data.append('sourceType', 'PDF');
+    data.append('targetType', 'HTML');
+    data.append('file', file);
     let fetchConfig = {
       method: 'POST',
       headers: {
@@ -384,7 +325,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       },
       body: data
     };
-    let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.documentConverterUrl;
+    let url = location + _ApplicationContext.default.getContextRoot() + props.config.documentConverterUrl;
     (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
       setTemplateDoc(data);
       setFile(null);
@@ -435,110 +376,81 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
   const handleDuplicate = id => {
     // TODO : Fix this function
     let element = document.getElementById(id);
-    let pageElements = document.getElementsByClassName("dropTarget");
+    let pageElements = document.getElementsByClassName('dropTarget');
     let elementPage = null;
-    let elementTop = 3 * parseFloat(element.style.top.replace("px", '').replace('pt', '')) / 4;
+    let elementTop = 3 * parseFloat(element.style.top.replace('px', '').replace('pt', '')) / 4;
     let pageElementTop = 0;
 
-    var _iterator2 = _createForOfIteratorHelper(pageElements),
-        _step2;
-
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        const pageElement = _step2.value;
-        let pageElementHeight = parseFloat(pageElement.style.height.replace("px", '').replace('pt', ''));
+    for (const pageElement of pageElements) {
+      let pageElementHeight = parseFloat(pageElement.style.height.replace('px', '').replace('pt', ''));
 
-        if (elementTop >= pageElementTop && elementTop < pageElementTop + pageElementHeight) {
-          elementPage = pageElement;
-          break;
-        }
-
-        pageElementTop += pageElementHeight;
+      if (elementTop >= pageElementTop && elementTop < pageElementTop + pageElementHeight) {
+        elementPage = pageElement;
+        break;
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
+
+      pageElementTop += pageElementHeight;
     }
 
     let offset = elementTop - pageElementTop;
     let pageNumber = 0;
     let elementData = getInputValue(id);
 
-    var _iterator3 = _createForOfIteratorHelper(pageElements),
-        _step3;
-
-    try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        const pageElement = _step3.value;
-        let pageElementHeight = parseFloat(pageElement.style.height.replace("px", '').replace('pt', ''));
-
-        if (pageElement !== elementPage) {
-          let item = {
-            id: idCounter.current++,
-            description: elementData.description,
-            type: elementData.type,
-            props: getProps(elementData.type)
-          };
-          grabPalleteItem(item);
-          let event = {
-            target: pageElement
-          };
-          templateItemEventHandler.handleGrabRelease(event, {
-            id: item.id,
-            top: pageNumber * pageElementHeight + offset,
-            left: parseFloat(element.style.left.replace("px", "")),
-            width: parseFloat(element.style.width.replace("px", "")),
-            height: parseFloat(element.style.height.replace("px", "")),
-            description: item.description,
-            type: item.type
-          }, (id, node) => {
-            let inputValue = getInputValue(id);
-
-            if (!inputValue) {
-              inputValue = newItem(item.id, node.style.width, node.style.height);
-              inputBoxValues.push(inputValue);
-              setValue(null);
-            }
-
-            setSelectedInputBoxValue(inputValue);
-          });
-          setGrabbedItem(null);
-        }
+    for (const pageElement of pageElements) {
+      let pageElementHeight = parseFloat(pageElement.style.height.replace('px', '').replace('pt', ''));
+
+      if (pageElement !== elementPage) {
+        let item = {
+          id: idCounter.current++,
+          description: elementData.description,
+          type: elementData.type,
+          props: getProps(elementData.type)
+        };
+        grabPalleteItem(item);
+        let event = {
+          target: pageElement
+        };
+        templateItemEventHandler.handleGrabRelease(event, {
+          id: item.id,
+          top: pageNumber * pageElementHeight + offset,
+          left: parseFloat(element.style.left.replace('px', '')),
+          width: parseFloat(element.style.width.replace('px', '')),
+          height: parseFloat(element.style.height.replace('px', '')),
+          description: item.description,
+          type: item.type
+        }, (id, node) => {
+          let inputValue = getInputValue(id);
+
+          if (!inputValue) {
+            inputValue = newItem(item.id, node.style.width, node.style.height);
+            inputBoxValues.push(inputValue);
+            setValue(null);
+          }
 
-        pageNumber++;
+          setSelectedInputBoxValue(inputValue);
+        });
+        setGrabbedItem(null);
       }
-    } catch (err) {
-      _iterator3.e(err);
-    } finally {
-      _iterator3.f();
+
+      pageNumber++;
     }
   };
 
   function saveValue() {
     let allValid = true;
 
-    var _iterator4 = _createForOfIteratorHelper(inputBoxValues),
-        _step4;
+    for (const inputBoxValue of inputBoxValues) {
+      console.log('\n\n\n\nSIG VAL : ' + inputBoxValue.signatory);
 
-    try {
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-        const inputBoxValue = _step4.value;
-
-        if (_Utils.default.isNull(inputBoxValue.signatory)) {
-          allValid = false;
-          break;
-        }
+      if (_Utils.default.isNull(inputBoxValue.signatory)) {
+        allValid = false;
+        break;
       }
-    } catch (err) {
-      _iterator4.e(err);
-    } finally {
-      _iterator4.f();
     }
 
     if (allValid) {
       let newValue = {};
-      newValue.htmlTemplate = document.getElementById("templateContainer").innerHTML.replace("2px dashed #a1a1a1", "none").replace("2px dashed green", "none").replace("div name=\"replaced_html\"", "html").replace("div name=\"replaced_body\"", "body");
+      newValue.htmlTemplate = document.getElementById('templateContainer').innerHTML.replace('2px dashed #a1a1a1', 'none').replace('2px dashed green', 'none').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;
@@ -556,38 +468,38 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     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.width = values.width + 'px';
+    element.style.height = values.height + 'px';
     element.style.borderColor = VALID_COLOR;
-    element.innerText = values.signatory.map.emailAddress + "_" + id;
-    element.setAttribute("sid", values.signatory.map.emailAddress);
+    element.innerText = values.signatory.emailAddress + '_' + id;
+    element.setAttribute('sid', values.signatory.emailAddress);
     saveValue();
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      padding: "0 32px"
+      padding: '0 32px'
     }
   }, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      width: "100%",
-      maxHeight: "70vh"
+      width: '100%',
+      maxHeight: '70vh'
     }
   }, _Utils.default.isNull(props.showToolbar) || props.showToolbar === true ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginBottom: "32px"
+      marginBottom: '32px'
     }
   }, /*#__PURE__*/_react.default.createElement("input", {
-    accept: "application/pdf",
+    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"
+    className: 'row'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
+    className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "contained-button-file"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -595,7 +507,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     component: "span",
     className: classes.button
   }, "Upload File"))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
+    className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
@@ -604,15 +516,15 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     onClick: handleSubmit()
   }, "Generate Template"))))) : null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      height: "auto"
+      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",
+      maxHeight: 'calc(70vh - 80px)',
+      overflow: 'auto',
       width: '280px'
     }
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -625,9 +537,9 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       type: 'INITIAL_ITEM',
       props: INITIAL_ITEM
     }),
-    id: "initialPaletteButton",
+    id: 'initialPaletteButton',
     classes: {
-      "label": "paletteButtonLabel"
+      'label': 'paletteButtonLabel'
     }
   }, "Initial Pad"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
@@ -639,9 +551,9 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       type: 'SIGN_ITEM',
       props: SIGN_ITEM
     }),
-    id: "initialPaletteButton",
+    id: 'initialPaletteButton',
     classes: {
-      "label": "paletteButtonLabel"
+      'label': 'paletteButtonLabel'
     }
   }, "Signature Pad"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
@@ -653,9 +565,9 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       type: 'TEXT_ITEM',
       props: TEXT_ITEM
     }),
-    id: "initialPaletteButton",
+    id: 'initialPaletteButton',
     classes: {
-      "label": "paletteButtonLabel"
+      'label': 'paletteButtonLabel'
     }
   }, "Text Input"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
@@ -664,38 +576,38 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     onClick: () => {
       clear();
     },
-    id: "clearButton",
+    id: 'clearButton',
     classes: {
-      "label": "paletteButtonLabel"
+      '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,
+    signatoryUrl: props.config.signatoryUrl,
     signatoryService: props.config.signatoryService,
     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)"
+      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"
+      maxHeight: 'calc(70vh - 80px)',
+      overflow: 'auto'
     },
     className: 'col-*-*',
-    id: "templateContainer"
+    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>')
+    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%',