@agilemotion/oui-react-js 1.7.0 → 1.7.2

package/dist/components/signatures/DocumentContainer.js

@@ -25,7 +25,7 @@ const DocumentContainer = props => {
   }, [props.initialImage]);
   _react.default.useEffect(() => {
     createTemplate();
-  }, [initialImage, signatureImage]);
+  }, [initialImage, signatureImage, props.refresher]);
   const createTemplate = () => {
     let template = props.config.documents[0].template;
     let signers = props.config.documents[0].signers;
@@ -49,24 +49,26 @@ const DocumentContainer = props => {
       if (signer.email === props.config.signatoryId) {
         let signingInputs = signer.signatureInputs;
         for (const signingInput of signingInputs) {
-          let color = 'transparent';
-          if ("SIGN" === signingInput.inputType && signatureImage === null || "INITIAL" === signingInput.inputType && initialImage === null) {
-            color = 'red';
+          let border = 'none';
+          if ("SIGN" === signingInput.inputType && signatureImage === null || "TEXT_INPUT" === signingInput.inputType && !signingInput.value || "INITIAL" === signingInput.inputType && initialImage === null) {
+            border = '2px dashed red';
           }
           console.log(signingInput.tagName + " - " + signingInput.index + " - " + initialImage);
           console.log(signingInput);
-          template = template.replace(signingInput.tagName, `<sgvp${signingInput.index} />`);
-          rendererProps[`sgvp${signingInput.index}`] = props => /*#__PURE__*/_react.default.createElement("div", {
+          template = template.replace(signingInput.tagName + '_', `<sgvp${signingInput.index} />`);
+          rendererProps[`sgvp${signingInput.index}`] = () => /*#__PURE__*/_react.default.createElement("div", {
             style: {
               borderRadius: '4px',
               position: 'absolute',
-              width: '100px',
-              height: '60px'
+              width: '100%',
+              height: 'inherit',
+              border: border
             }
           }, "SIGN" === signingInput.inputType && signatureImage !== null ? /*#__PURE__*/_react.default.createElement("img", {
             src: signatureImage,
             alt: '',
             style: {
+              height: 'inherit',
               maxHeight: '100%',
               maxWidth: '100%'
             }
@@ -74,10 +76,53 @@ const DocumentContainer = props => {
             src: initialImage,
             alt: '',
             style: {
+              height: 'inherit',
               maxHeight: '100%',
               maxWidth: '100%'
             }
-          }) : null);
+          }) : "TEXT_INPUT" === signingInput.inputType ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+            id: signingInput.tagName + "_" + signingInput.index,
+            style: {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: 'calc(100% - 4px)',
+              height: 'calc(100% - 4px)',
+              margin: '2px',
+              border: 'none',
+              zIndex: 0,
+              textAlign: 'left'
+            },
+            onClick: e => {
+              let inputText = document.getElementById(signingInput.tagName + "_" + signingInput.index + "_input");
+              inputText.value = e.target.innerText;
+              inputText.style.display = "inline-block";
+              inputText.focus();
+            }
+          }, signingInput.value), /*#__PURE__*/_react.default.createElement("input", {
+            id: signingInput.tagName + "_" + signingInput.index + "_input",
+            placeholder: 'Enter text here...',
+            style: {
+              position: 'absolute',
+              top: -4,
+              left: 0,
+              width: 'calc(100% - 4px)',
+              height: 'calc(100% - 4px)',
+              margin: '2px',
+              border: 'none',
+              display: 'none',
+              zIndex: 1
+            },
+            onBlur: e => {
+              document.getElementById(signingInput.tagName + "_" + signingInput.index).innerText = e.target.value;
+              signingInput.value = e.target.value;
+              e.target.style.display = "none";
+              props.onInputValueChange(signingInput);
+            },
+            onChange: e => {
+              signingInput.value = e.target.value;
+            }
+          })) : null);
         }
       }
     }
@@ -85,7 +130,7 @@ const DocumentContainer = props => {
     setDocumentContent(template.replace("<html>", "<!--html-->").replace("</html>", "<!--/html-->").replace("<head>", "<!--head-->").replace("</head>", "<!--/head-->").replace("<body>", "<!--body-->").replace("</body>", "<!--/body-->"));
   };
   return documentContent !== null && htmlRendererProps !== null ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "container"
+    className: "container signature-doc-container"
   }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
     html: documentContent,
     components: htmlRendererProps

package/dist/components/signatures/SignatureInputProps.js

@@ -13,6 +13,7 @@ var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogAct
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _core = require("@material-ui/core");
 var _SignatorySearch = _interopRequireDefault(require("./SignatorySearch"));
+var _Form = _interopRequireDefault(require("../form/Form"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const isNull = val => {
   return val === null || typeof val === 'undefined';
@@ -33,9 +34,22 @@ const SigPropsLookupField = exports.SigPropsLookupField = /*#__PURE__*/_react.de
   const [currentSelection, setCurrentSelection] = _react.default.useState(null);
   const [value, setValue] = _react.default.useState(props.value);
   const [open, setOpen] = _react.default.useState(false);
+  const formHandle = _react.default.useRef({});
   _react.default.useEffect(() => {
+    console.log("NEW PROPS VAL : ", props.value);
     setValue(props.value);
+    formHandle.current.api.model = {
+      signatory: props.value
+    };
   }, [props.value]);
+  _react.default.useEffect(() => {
+    props.valueChangeHandler('signatory', value);
+  }, [value]);
+  _react.default.useEffect(() => {
+    if (currentSelection) {
+      setSelectionAsValue(currentSelection);
+    }
+  }, [currentSelection]);
   const handleClose = () => {
     setOpen(false);
   };
@@ -45,14 +59,25 @@ const SigPropsLookupField = exports.SigPropsLookupField = /*#__PURE__*/_react.de
     };
     setValue(currentSelection);
     props.valueChangeHandler('signatory', currentSelection);
-    handleClose();
+    if (!props.signatorySearchForm) {
+      handleClose();
+    }
   };
   const openSearch = () => {
     setOpen(true);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100 lookup"
-  }, /*#__PURE__*/_react.default.createElement("table", {
+  }, props.signatorySearchForm && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Form.default, {
+    disabled: props.disabled,
+    config: props.signatorySearchForm,
+    handle: formHandle.current,
+    valueChangeHandler: _react.default.useCallback(val => {
+      setCurrentSelection(val?.signatory);
+    }, []),
+    viewId: props.viewId,
+    className: 'defaultForm'
+  })), !props.signatorySearchForm && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("table", {
     className: "w-100"
   }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
     width: "200px"
@@ -109,7 +134,7 @@ const SigPropsLookupField = exports.SigPropsLookupField = /*#__PURE__*/_react.de
     onClick: setSelectionAsValue,
     color: "primary",
     disabled: currentSelection === null || typeof currentSelection === 'undefined'
-  }, "Ok"))))));
+  }, "Ok")))))));
 });
 const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
@@ -117,6 +142,7 @@ const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
   const [width, setWidth] = _react.default.useState('');
   const [height, setHeight] = _react.default.useState('');
   const [signatory, setSignatory] = _react.default.useState(null);
+  const [initialSignatory, setInitialSignatory] = _react.default.useState(null);
   const [widthValid, setWidthValid] = _react.default.useState(true);
   const [heightValid, setHeightValid] = _react.default.useState(true);
   const [signatoryValid, setSignatoryValid] = _react.default.useState(isNull(props.value) || !isNull(props.value.signatory));
@@ -126,20 +152,32 @@ const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
       setWidth(props.value.width);
       setHeight(props.value.height);
       setSignatory(props.value.signatory);
-      setWidthValid(validateNumeric(props.value.width, 280));
-      setHeightValid(validateNumeric(props.value.height, 150));
+      setInitialSignatory(props.value.signatory);
+      setWidthValid(validateNumeric(props.value.width, 10000000));
+      setHeightValid(validateNumeric(props.value.height, 10000000));
       setSignatoryValid(!isNull(props.value.signatory));
     } else {
       setWidth('');
       setHeight('');
       setSignatory(null);
+      setInitialSignatory(null);
     }
   }, [props.value]);
+  _react.default.useEffect(() => {
+    if (props.dragHeight) {
+      setHeight(props.dragHeight);
+    }
+  }, [props.dragHeight]);
+  _react.default.useEffect(() => {
+    if (props.dragWidth) {
+      setWidth(props.dragWidth);
+    }
+  }, [props.dragWidth]);
   _react.default.useEffect(() => {
     if (!isNull(value)) {
-      let widthCheck = validateNumeric(width, 280);
+      let widthCheck = validateNumeric(width, 10000000);
       setWidthValid(widthCheck);
-      let heightCheck = validateNumeric(height, 150);
+      let heightCheck = validateNumeric(height, 10000000);
       setHeightValid(heightCheck);
       let signatoryCheck = !isNull(signatory);
       setSignatoryValid(signatoryCheck);
@@ -160,7 +198,7 @@ const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     props.dublicateHandler(value.id);
   };
   const validateNumeric = (val, maxVal) => {
-    let regex = new RegExp('^[0-9]+$');
+    let regex = new RegExp('^\\d+(\\.\\d+)?$');
     return !isNull(val) && regex.test(val) && parseFloat(val) <= maxVal;
   };
   const valueChangeHandler = (field, fieldValue) => {
@@ -170,6 +208,9 @@ const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
       setHeight(fieldValue);
     } else if ('signatory' === field) {
       setSignatory(fieldValue);
+      if (!initialSignatory) {
+        setInitialSignatory(fieldValue);
+      }
     }
   };
   const save = () => {
@@ -198,10 +239,12 @@ const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
       width: "100%"
     }
   }, /*#__PURE__*/_react.default.createElement(SigPropsLookupField, {
-    value: signatory,
+    value: initialSignatory,
     valueChangeHandler: valueChangeHandler,
     disabled: value === null,
+    viewId: props.viewId,
     signatoryUrl: props.signatoryUrl,
+    signatorySearchForm: props.signatorySearchForm,
     signatoryService: props.signatoryService,
     error: !signatoryValid
   }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
@@ -241,6 +284,13 @@ const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     onChange: e => valueChangeHandler("height", e.target.value),
     variant: "outlined"
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: classes.button,
+    onClick: () => handleApplyToAllPages(),
+    disabled: value === null || !widthValid || !heightValid || !signatoryValid,
+    id: "signPaletteButton"
+  }, "DUPLICATE ITEM ON ALL PAGES"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: classes.button,

package/dist/components/signatures/SignatureTemplateDesigner.js

@@ -20,6 +20,8 @@ var _RestUtils = require("../../RestUtils");
 var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/ServiceCallActionHandler"));
 var _TemplateItemEventHandler = _interopRequireDefault(require("../TemplateItemEventHandler"));
 require("../TemplateDesigner.css");
+var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
+var _Docs = _interopRequireDefault(require("../../js/Docs"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -107,11 +109,15 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
   const idCounter = _react.default.useRef(0);
   const [value, setValue] = _react.default.useState(null);
   const [selectedInputBoxValue, setSelectedInputBoxValue] = _react.default.useState(null);
+  const [selectedInputBoxDragHeight, setSelectedInputBoxDragHeight] = _react.default.useState(null);
+  const [selectedInputBoxDragWidth, setSelectedInputBoxDragWidth] = _react.default.useState(null);
   const [inputBoxValues, setInputBoxValues] = _react.default.useState([]);
   const classes = useStyles();
   const [loading, setLoading] = _react.default.useState(_Utils.default.isNull(props.autoLoadData) || props.autoLoadData === true);
   const documentName = _react.default.useRef(null);
   const [grabbedItem, setGrabbedItem] = _react.default.useState(null);
+  const [signatoryUrl, setSignatoryUrl] = _react.default.useState(null);
+  const [signatorySearchForm, setSignatorySearchForm] = _react.default.useState(null);
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -119,16 +125,21 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
     _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+    setup();
+    setSignatoryUrl(_DynamicJS.default.executeScript(`signatoryUrl`, parsedConfig.signatoryUrl));
+    setSignatorySearchForm(_DynamicJS.default.executeScript(`signatorySearchForm`, parsedConfig.signatorySearchForm));
   }, []);
+  _react.default.useEffect(() => {
+    if (props.config.templateDocument) {
+      setTemplateDoc(_DynamicJS.default.executeScript(`templateDocument`, props.config.templateDocument));
+    }
+  }, [props.config.templateDocument]);
   const setup = () => {
     let container = document.getElementById('templateContainer');
     if (!_Utils.default.isNull(templateDoc) && !_Utils.default.isNull(container)) {
-      templateItemEventHandler.initDragAndDrop(id => {}, container);
+      templateItemEventHandler.initDragAndDrop(null, container);
     }
   };
-  _react.default.useEffect(() => {
-    setup();
-  }, []);
   _react.default.useEffect(() => {
     setup();
   }, [templateDoc]);
@@ -137,6 +148,12 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       props.valueChangeHandler(value);
     }
   }, [value]);
+  const memorizedHtmlString = _react.default.useMemo(() => {
+    if (templateDoc) {
+      return templateDoc.replace('<html', '<div name="replaced_html"').replace('</html>', '</div>').replace('<body', '<div name="replaced_body"').replace('</body>', '</div>');
+    }
+    return null;
+  }, [templateDoc]);
   const api = () => {
     return {
       get id() {
@@ -211,6 +228,10 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
           inputValue = newItem(id, node.style.width, node.style.height);
           inputBoxValues.push(inputValue);
         }
+        inputValue.height = node.style.height.replace('px', '');
+        inputValue.width = node.style.width.replace('px', '');
+        setSelectedInputBoxDragHeight(inputValue.height);
+        setSelectedInputBoxDragWidth(inputValue.width);
         saveValue();
         setSelectedInputBoxValue(inputValue);
       });
@@ -288,51 +309,47 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     setValue(null);
   };
   const getProps = type => {
-    if (type === 'INITIAL_ITEM') {
-      return INITIAL_ITEM;
-    } else if (type === 'SIGN_ITEM') {
-      return SIGN_ITEM;
+    switch (type) {
+      case 'INITIAL_ITEM':
+        return INITIAL_ITEM;
+      case 'SIGN_ITEM':
+        return SIGN_ITEM;
     }
     return TEXT_ITEM;
   };
   const handleDuplicate = id => {
-    // TODO : Fix this function
     let element = document.getElementById(id);
     let pageElements = document.getElementsByClassName('dropTarget');
-    let elementPage = null;
-    let elementTop = 3 * parseFloat(element.style.top.replace('px', '').replace('pt', '')) / 4;
-    let pageElementTop = 0;
-    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;
-    }
-    let offset = elementTop - pageElementTop;
+    let elementTop = parseFloat(element.style.top.replace('px', '').replace('pt', ''));
     let pageNumber = 0;
     let elementData = getInputValue(id);
     for (const pageElement of pageElements) {
-      let pageElementHeight = parseFloat(pageElement.style.height.replace('px', '').replace('pt', ''));
-      if (pageElement !== elementPage) {
+      if (pageElement !== element.parentElement.parentElement) {
+        let newId = idCounter.current++;
         let item = {
-          id: idCounter.current++,
-          description: elementData.description,
+          id: newId,
+          description: elementData.signatory.emailAddress + "_" + newId,
           type: elementData.type,
           props: getProps(elementData.type)
         };
+        inputBoxValues.push({
+          ...elementData,
+          id: newId,
+          index: newId
+        });
         grabPalleteItem(item);
         let event = {
           target: pageElement
         };
         templateItemEventHandler.handleGrabRelease(event, {
           id: item.id,
-          top: pageNumber * pageElementHeight + offset,
+          top: elementTop,
           left: parseFloat(element.style.left.replace('px', '')),
           width: parseFloat(element.style.width.replace('px', '')),
           height: parseFloat(element.style.height.replace('px', '')),
           description: item.description,
+          sid: elementData.signatory.emailAddress,
+          sdesc: elementData.signatory.names + ' ' + elementData.signatory.lastName,
           type: item.type
         }, (id, node) => {
           let inputValue = getInputValue(id);
@@ -341,17 +358,21 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
             inputBoxValues.push(inputValue);
             setValue(null);
           }
+          inputValue.height = node.style.height.replace('px', '');
+          inputValue.width = node.style.width.replace('px', '');
+          setSelectedInputBoxDragHeight(inputValue.height);
+          setSelectedInputBoxDragWidth(inputValue.width);
           setSelectedInputBoxValue(inputValue);
         });
         setGrabbedItem(null);
       }
       pageNumber++;
     }
+    saveValue();
   };
   function saveValue() {
     let allValid = true;
     for (const inputBoxValue of inputBoxValues) {
-      console.log('\n\n\n\nSIG VAL : ' + inputBoxValue.signatory);
       if (_Utils.default.isNull(inputBoxValue.signatory)) {
         allValid = false;
         break;
@@ -359,8 +380,8 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     }
     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.htmlTemplateBase64 = Base64.encode(newValue.htmlTemplate);
+      newValue.htmlTemplate = document.getElementById('templateContainer').innerHTML.replaceAll('2px dashed #a1a1a1', 'none').replaceAll('2px dashed green', 'none').replaceAll('div name="replaced_html"', 'html').replaceAll('div name="replaced_body"', 'body');
+      newValue.htmlTemplateBase64 = _Docs.default.removeAllHtmlBackGroundImages(Base64.encode(newValue.htmlTemplate));
       newValue.signatureInputs = inputBoxValues;
       newValue.idCounter = idCounter.current;
       newValue.documentName = documentName.current;
@@ -378,9 +399,16 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     let element = document.getElementById(id);
     element.style.width = values.width + 'px';
     element.style.height = values.height + 'px';
+    element.style.verticalAlign = 'middle';
+    element.style.padding = '0 4px';
+    element.style.lineHeight = element.style.height;
+    element.style.fontSize = '11px';
     element.style.borderColor = VALID_COLOR;
-    element.innerText = values.signatory.emailAddress + '_' + id;
-    element.setAttribute('sid', values.signatory.emailAddress);
+    if (values.signatory) {
+      element.innerHTML = values.signatory.emailAddress;
+      element.setAttribute('sid', values.signatory.emailAddress);
+      element.setAttribute('sdesc', values.signatory.names + ' ' + values.signatory.lastName);
+    }
     saveValue();
   };
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -393,7 +421,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
       width: '100%',
       maxHeight: '70vh'
     }
-  }, _Utils.default.isNull(props.showToolbar) || props.showToolbar === true ? /*#__PURE__*/_react.default.createElement("div", {
+  }, _Utils.default.isNull(props.config.templateDocument) && (_Utils.default.isNull(props.showToolbar) || props.showToolbar === true) ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginBottom: '32px'
     }
@@ -425,7 +453,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     style: {
       height: 'auto'
     }
-  }, !_Utils.default.isNull(templateDoc) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, !_Utils.default.isNull(memorizedHtmlString) ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'row'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: `${classes.palette} col-*-*`,
@@ -491,8 +519,12 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     className: `${classes.propertyWindow}`
   }, /*#__PURE__*/_react.default.createElement(_SignatureInputProps.default, {
     value: selectedInputBoxValue,
-    signatoryUrl: props.config.signatoryUrl,
+    dragWidth: selectedInputBoxDragWidth,
+    dragHeight: selectedInputBoxDragHeight,
+    signatoryUrl: signatoryUrl,
+    viewId: props.viewId,
     signatoryService: props.config.signatoryService,
+    signatorySearchForm: signatorySearchForm,
     saveHandler: (id, values) => saveProps(id, values),
     deleteHandler: (id, values) => deleteInputItem(id, values),
     dublicateHandler: id => handleDuplicate(id)
@@ -500,13 +532,14 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     style: {
       border: '1px solid #e1e1e1',
       borderRadius: '4px',
-      marginLeft: '8px',
+      paddingLeft: '8px',
+      paddingTop: '8px',
       height: '100%',
       width: 'calc(100% - 288px)'
     },
-    className: 'col-*-*',
+    className: 'col-*-* templateDesigner',
     onClick: e => mouseClickHandler(e)
-  }, templateDoc ? /*#__PURE__*/_react.default.createElement("div", {
+  }, memorizedHtmlString ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxHeight: 'calc(70vh - 80px)',
       overflow: 'auto'
@@ -514,7 +547,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     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>')
+    html: memorizedHtmlString
   })) : /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',

package/dist/event/ActionHandlers.js

@@ -47,8 +47,11 @@ class ActionHandlers {
     let viewId = listener.getViewId();
     this.invokeHandler(action, be, component, viewId);
   }
-  invokeHandler(action, be, component, viewId) {
+  async invokeHandler(action, be, component, viewId) {
     let actionHandler = this.getActionHandler(action.actionType);
+    if (!actionHandler) {
+      throw new Error("No action handler found for [" + action.actionType + "]");
+    }
     let message = action.confirmationMessage;
     let condition = action.condition;
     let shouldRun = true;
@@ -57,13 +60,13 @@ class ActionHandlers {
     }
     if (shouldRun) {
       if (!_Utils.default.isNull(message)) {
-        _ApplicationManager.default.openConfirmDialog(message, result => {
+        _ApplicationManager.default.openConfirmDialog(message, async result => {
           if (result === true) {
-            actionHandler.execute(action, be, component, viewId);
+            await actionHandler.execute(action, be, component, viewId);
           }
         });
       } else {
-        actionHandler.execute(action, be, component, viewId);
+        await actionHandler.execute(action, be, component, viewId);
       }
     }
   }

package/dist/event/RouteActionHandler.js

@@ -34,9 +34,9 @@ class RouteActionHandler {
     let isPopup = _Utils.default.isNull(actionConfig.popUp) ? false : actionConfig.popUp;
     let isWindow = _Utils.default.isNull(actionConfig.window) ? false : actionConfig.window;
     if (!_Utils.default.isNull(actionConfig.pathEvaluator)) {
-      path = _DynamicJS.default.executeScriptObject(currentViewId + 'ViewEvaluator_' + event.source.id, actionConfig.pathEvaluator);
+      path = _DynamicJS.default.executeScriptObject(currentViewId + 'ViewEvaluator_' + event?.source.id, actionConfig.pathEvaluator);
     } else {
-      path = _ApplicationManager.default.isExpression(actionConfig.path) ? _ApplicationManager.default.resolveExpressionValue(actionConfig.path, event.data) : actionConfig.path;
+      path = _ApplicationManager.default.isExpression(actionConfig.path) ? _ApplicationManager.default.resolveExpressionValue(actionConfig.path, event?.data) : actionConfig.path;
       if ('@#{history.back}' === actionConfig.path && _ApplicationManager.default.graphs.length === 0) {
         let historyElement = _ApplicationManager.default.getPreviousHistoryElement();
         if (historyElement === null) {
@@ -52,7 +52,7 @@ class RouteActionHandler {
     if (!_Utils.default.isNull(actionConfig.parameters)) {
       for (let i = 0; i < actionConfig.parameters.length; i++) {
         let parameter = actionConfig.parameters[i];
-        let parameterValue = _ApplicationManager.default.resolveParameterValue(parameter, event.data);
+        let parameterValue = _ApplicationManager.default.resolveParameterValue(parameter, event?.data);
         let validator = parameter.validator;
         if (_Utils.default.isNull(parameterValue) && !_Utils.default.isNull(validator) && _Utils.default.evaluateBooleanExpression(validator.nullable, parameter.name) === false) {
           console.error('Routing to path ' + path + ', failed. A null value for a NON-NULLABLE parameter was found - ' + JSON.stringify(parameter));

package/dist/event/ScriptActionHandler.js

@@ -15,8 +15,8 @@ class ScriptActionHandler {
     return ScriptActionHandler.instance;
   }
   execute(actionConfig, event, component, currentViewId) {
-    let componentId = event.getSource().api.id;
-    _DynamicJS.default.executeScriptObject(currentViewId + '_' + componentId + '_script', actionConfig.script, componentId, {}, event);
+    let componentId = event?.getSource().api.id;
+    _DynamicJS.default.executeScriptObject(currentViewId + '_' + (componentId ? componentId : currentViewId) + '_script', actionConfig.script, componentId, {}, event);
   }
 }
 const instance = new ScriptActionHandler();