@agilemotion/oui-react-js 1.3.4 → 1.3.6

package/dist/BusinessPortalAppHome.js

@@ -69,10 +69,15 @@ const BusinessPortalAppHome = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
         loadingColor = _React$useState6[0],
         setLoadingColor = _React$useState6[1];
 
-  const _React$useState7 = _react.default.useState(location + props.contextRoot + props.implConfig.authUrl + "/user/avatar?" + "access_token=" + sessionStorage.getItem("accessToken") + "&idToken=" + sessionStorage.getItem("idToken")),
+  const _React$useState7 = _react.default.useState(false),
         _React$useState8 = _slicedToArray(_React$useState7, 2),
-        avatarUrl = _React$useState8[0],
-        setAvatarUrl = _React$useState8[1];
+        hasClientError = _React$useState8[0],
+        setHasClientError = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(location + props.contextRoot + props.implConfig.authUrl + "/user/avatar?" + "access_token=" + sessionStorage.getItem("accessToken") + "&idToken=" + sessionStorage.getItem("idToken")),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        avatarUrl = _React$useState10[0],
+        setAvatarUrl = _React$useState10[1];
 
   const history = (0, _reactRouter.useHistory)();
 
@@ -90,8 +95,13 @@ const BusinessPortalAppHome = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
 
       _ApplicationContext.default.setFilesApiPath(props.implConfig.filesApiPath);
 
-      let implId = sessionStorage.getItem("implId");
-      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + props.contextRoot + props.implConfig.baseApiUrl + "/ui/setup/" + (implId ? implId : "default")), {
+      let cid = sessionStorage.getItem("cid");
+
+      if (window.location.host.startsWith("localhost") && !cid) {
+        cid = 'default';
+      }
+
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + props.contextRoot + props.implConfig.baseApiUrl + "/ui/setup/" + cid), {
         method: 'GET',
         headers: {
           'Accept': 'application/json',
@@ -106,6 +116,8 @@ const BusinessPortalAppHome = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
 
           _ApplicationContext.default.getApplicationHistory().push('/login');
         }
+
+        setHasClientError(true);
       }));
     }
   });
@@ -143,7 +155,7 @@ const BusinessPortalAppHome = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     className: "main w-100 h-100 d-inline-block"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100 h-100"
-  }, dashboardSettings !== null ? /*#__PURE__*/_react.default.createElement(_BusinessPortalAppDashboard.default, {
+  }, dashboardSettings !== null && !hasClientError ? /*#__PURE__*/_react.default.createElement(_BusinessPortalAppDashboard.default, {
     logoutCallBack: () => {
       logout();
     },
@@ -151,7 +163,9 @@ const BusinessPortalAppHome = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     avatar: !_Utils.default.isNull(avatarUrl) ? avatarUrl : null,
     logo: dashboardSettings.logo,
     appLogoPath: props.implConfig.appLogo
-  }) : null), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
+  }) : hasClientError ? /*#__PURE__*/_react.default.createElement("div", {
+    style: "margin: 128px; color: red; font-size: 24px"
+  }, "System error - Unknown client") : null), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
     color: loadingColor
   })));
 }));

package/dist/RestUtils.js

@@ -42,7 +42,15 @@ const json = response => {
 };
 
 class RestUtils {
-  invokeRest(service, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) {
+  isParamValueNull(paramValue) {
+    if (_Utils.default.isNull(paramValue)) {
+      return true;
+    }
+
+    return paramValue.hasOwnProperty('value') ? _Utils.default.isNull(paramValue.value) : false;
+  }
+
+  invokeRest(service, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage, event = null) {
     let url = service.url.startsWith('http://') || service.url.startsWith('https://') ? service.url : location + "".concat(_ApplicationContext.default.getContextRoot() + service.url);
     let requestBody = null;
 
@@ -58,11 +66,9 @@ class RestUtils {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           const parameter = _step.value;
 
-          let parameterValue = _ApplicationContext.default.resolveParameterValue(parameter);
-
-          if (!_Utils.default.isNull(parameter.validator) && !_Utils.default.evaluateBooleanExpression(parameter.validator.nullable, parameter.name) && (_Utils.default.isNull(parameterValue) || _Utils.default.isNull(parameterValue.value))) {
-            console.debug('Invalid parameter value ' + parameter.name);
+          let parameterValue = _ApplicationContext.default.resolveParameterValue(parameter, event ? event.data : null);
 
+          if (!_Utils.default.isNull(parameter.validator) && !_Utils.default.evaluateBooleanExpression(parameter.validator.nullable, parameter.name) && this.isParamValueNull(parameterValue)) {
             if (!_Utils.default.isNull(invalidParamCallback)) {
               invalidParamCallback(parameter);
             }
@@ -97,7 +103,7 @@ class RestUtils {
 
           if (httpParameterType === 'PATH_VARIABLE') {
             if (!_Utils.default.isNull(parameterValue)) {
-              pathParameters += '/' + (typeof parameterValue.value === 'object' ? JSON.stringify(parameterValue.value) : parameterValue.value);
+              pathParameters += '/' + (typeof parameterValue.value === 'object' ? JSON.stringify(parameterValue.value) : parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue);
             }
           }
 
@@ -106,7 +112,7 @@ class RestUtils {
               console.error("Only one request body is permitted");
               return;
             } else {
-              if (!_Utils.default.isNull(parameterValue)) {
+              if (!this.isParamValueNull(parameterValue)) {
                 requestBody = parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue;
 
                 if (parameterValue.type === 'MapObject') {
@@ -152,7 +158,7 @@ class RestUtils {
       postData(url, response => {
         let responseData = !_Utils.default.isNull(response) ? response.data : null;
 
-        if (!_Utils.default.isNull(responseData) && responseData.type === 'MessageDto' && responseData.messageType === "ERROR") {
+        if (!_Utils.default.isNull(responseData) && response.dataType === 'message' && responseData.messageType === "ERROR") {
           this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_FAILURE);
         } else {
           if (!_Utils.default.isNull(successCallback)) {
@@ -203,7 +209,7 @@ class RestUtils {
     }
   }
 
-  invokeRpc(rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) {
+  invokeRpc(rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage, event = null) {
     let request = {};
     request.id = viewId;
     request.service = rpcDetails.serviceId;
@@ -218,7 +224,7 @@ class RestUtils {
         parameter.name = parameterConfig.name;
         parameter.index = parameterConfig.index;
 
-        let val = _ApplicationContext.default.resolveParameterValue(parameterConfig);
+        let val = _ApplicationContext.default.resolveParameterValue(parameterConfig, event ? event.data : null);
 
         if (!_Utils.default.isNull(val)) {
           parameter.value = val.value; // TODO : Make the default object type a library setting
@@ -238,7 +244,7 @@ class RestUtils {
           parameter.type = 'String';
         }
 
-        if (!_Utils.default.isNull(parameterConfig.validator) && _Utils.default.evaluateBooleanExpression(parameterConfig.validator.nullable, parameterConfig.name) === false && _Utils.default.isNull(parameter.value)) {
+        if (!_Utils.default.isNull(parameterConfig.validator) && _Utils.default.evaluateBooleanExpression(parameterConfig.validator.nullable, parameterConfig.name) === false && this.isParamValueNull(parameter)) {
           if (!_Utils.default.isNull(invalidParamCallback)) {
             invalidParamCallback(parameter);
           }
@@ -264,7 +270,7 @@ class RestUtils {
 
         let responseData = !_Utils.default.isNull(response) ? response.data : null;
 
-        if (!_Utils.default.isNull(responseData) && responseData.type === 'MessageDto' && responseData.messageType === "ERROR") {
+        if (!_Utils.default.isNull(responseData) && response.dataType === 'message' && responseData.messageType === "ERROR") {
           this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_FAILURE);
         } else {
           this.fireEvent(viewId, component, _EventType.default.SERVICE_CALL_SUCCESS, response.data);
@@ -398,7 +404,7 @@ class RestUtils {
     if (successCallback !== null) {
       let responseData = !_Utils.default.isNull(response) ? response.data : null;
 
-      if (!_Utils.default.isNull(responseData) && responseData.type === 'MessageDto') {
+      if (!_Utils.default.isNull(responseData) && response.dataType === 'message') {
         let event = new _Event.default(_ApplicationContext.default, viewId, responseData);
 
         _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
@@ -456,14 +462,14 @@ const download = (url, successCallback, errorCallback, secure) => {
 
 exports.download = download;
 
-const invokeRpc = (rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) => {
-  instance.invokeRpc(rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage);
+const invokeRpc = (rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage, event = null) => {
+  instance.invokeRpc(rpcDetails, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage, event);
 };
 
 exports.invokeRpc = invokeRpc;
 
-const invokeRest = (serviceConfig, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage) => {
-  instance.invokeRest(serviceConfig, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage);
+const invokeRest = (serviceConfig, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage, event = null) => {
+  instance.invokeRest(serviceConfig, component, viewId, successCallback, errorCallback, invalidParamCallback, returnValueBinding, successMessage, event);
 };
 
 exports.invokeRest = invokeRest;

package/dist/Utils.js

@@ -190,7 +190,7 @@ class Utils {
 
   static getFieldGrid(attributes, fields) {
     let fieldGrid = {};
-    let maxColspan = !Utils.isNull(attributes) ? attributes.layoutColumns : 1;
+    let maxColspan = !Utils.isNull(attributes) && !Utils.isNull(attributes.layoutColumns) ? attributes.layoutColumns : 1;
     fieldGrid.maxColPerRow = maxColspan;
     fieldGrid.rows = [];
     let currRow = this.createRow();
@@ -374,8 +374,6 @@ _defineProperty(Utils, "getPropertyChainPath", expression => {
 
 _defineProperty(Utils, "mergeStyles", (defaultStyle, config) => {
   let configStyle = Utils.getComponentAttribute(config, 'style', null);
-  console.log(config.id);
-  console.log(configStyle);
 
   if (configStyle) {
     let properties = Object.getOwnPropertyNames(configStyle);

package/dist/components/PopupView.js

@@ -41,9 +41,9 @@ function PopupViewDialog(props) {
         title = _React$useState2[0],
         setTitle = _React$useState2[1];
 
-  const height = _Utils.default.getComponentAttribute(props.view.config, 'height', '28vh');
+  const height = _Utils.default.getComponentStyleAttribute(props.view.config, 'height', '28vh');
 
-  const width = _Utils.default.getComponentAttribute(props.view.config, 'width', '40vw');
+  const width = _Utils.default.getComponentStyleAttribute(props.view.config, 'width', '40vw');
 
   const useStyles = (0, _styles.makeStyles)(theme => ({
     dialogPaper: {
@@ -70,7 +70,8 @@ function PopupViewDialog(props) {
     id: "alert-dialog-title"
   }, title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     style: {
-      overflow: "hidden"
+      overflow: "hidden",
+      padding: "0"
     }
   }, /*#__PURE__*/_react.default.createElement(_View.View, {
     config: props.view.config,

package/dist/components/SignaturePanel.js

@@ -15,8 +15,6 @@ var _RestUtils = require("../RestUtils");
 
 var _ServiceCallActionHandler = _interopRequireDefault(require("../event/ServiceCallActionHandler"));
 
-var _DocumentContainer = _interopRequireDefault(require("@agilemotion/signi-vault-ui/dist/DocumentContainer"));
-
 var _AgilitySignaturePanel = _interopRequireDefault(require("./signatures/AgilitySignaturePanel"));
 
 var _Event = _interopRequireDefault(require("../event/Event"));
@@ -95,14 +93,14 @@ const SignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         return value;
       },
 
-      loadData: actionConfig => {
+      loadData: (actionConfig, event) => {
         let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
 
         if (!_Utils.default.isNull(service)) {
           if (service.type === 'remoteObjectProxy') {
             (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {
               setConfig(result);
-            }, e => {}, parameter => {});
+            }, e => {}, parameter => {}, null, null, event);
           } else {
             if (_Utils.default.isNull(actionConfig)) {
               actionConfig = {};
@@ -110,7 +108,7 @@ const SignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
 
             actionConfig.service = service;
 
-            _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
+            _ServiceCallActionHandler.default.execute(actionConfig, event, null, props.viewId, data => {
               setConfig(data);
             }, () => {});
           }
@@ -129,9 +127,6 @@ const SignaturePanel = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     config: config,
     imageProcessingUrl: props.config.imageProcessingUrl,
     signatureImageUrl: props.config.signatureImageUrl
-  }) : props.config.provider === 'SIGNIVAULT' ? /*#__PURE__*/_react.default.createElement(_DocumentContainer.default, {
-    handle: handle,
-    config: config
   }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported provider") : /*#__PURE__*/_react.default.createElement("div", {
     style: {
       padding: '32px 0 32px 48px'

package/dist/components/StepperTitleBar.css

@@ -26,6 +26,9 @@
     border: none;
 }
 
+.stepActive .box {
+}
+
 .dot {
     width: 30px;
     height: 30px;
@@ -57,6 +60,10 @@
     width: calc(50% - 15px);
 }
 
+.stepVisited .rightLine {
+    width: calc(100% - 15px) !important;
+}
+
 .step .lastLine {
     width: calc(50% - 15px);
 }
@@ -76,7 +83,6 @@
     color: #ffffff;
     font-size: 16px;
     height: 30px;
-    float: right;
     border-top-right-radius: 100px;
     border-bottom-right-radius: 100px;
     padding: 2px 8px;

package/dist/components/StepperTitleBar.js

@@ -57,8 +57,8 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
 
   const _React$useState5 = _react.default.useState(null),
         _React$useState6 = _slicedToArray(_React$useState5, 2),
-        segmentPercentage = _React$useState6[0],
-        setSegmentPercentage = _React$useState6[1];
+        activeSegmentPercentage = _React$useState6[0],
+        setActiveSegmentPercentage = _React$useState6[1];
 
   const currentIndex = _react.default.useRef(null);
 
@@ -133,7 +133,7 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
 
         setSteps(steps);
         currentIndex.current = _ApplicationContext.default.graphs[0].getCurrentNodeIndex();
-        setSegmentPercentage(100 / steps.length);
+        setActiveSegmentPercentage(100 - 10 * (steps.length - 1));
       }
 
     };
@@ -145,14 +145,16 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
     }, graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
       className: (graphicsCounter <= currentIndex.current ? "".concat(classes.themeBorder, " ") : '') + 'leftLine' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter <= currentIndex.current ? "".concat(classes.theme, " box") : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
+      className: (graphicsCounter <= currentIndex.current ? "".concat(classes.theme, " box row") : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
       style: {
-        display: "table-cell"
-      }
+        marginLeft: 'unset',
+        marginRight: 'unset'
+      },
+      id: 'step-' + graphicsCounter
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: 'dot'
+      className: 'dot col-*-*'
     }, step.index + 1), graphicsCounter === currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "title",
+      className: "title col-*-*",
       id: "titleDiv"
     }, step.title) : null), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
       className: (graphicsCounter < currentIndex.current ? "".concat(classes.themeBorder, " ") : '') + 'rightLine' + (graphicsCounter === 0 ? ' firstLine' : '')
@@ -178,7 +180,7 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
         whiteSpace: "nowrap",
         paddingTop: '8px',
         maxHeight: '8px',
-        width: segmentPercentage + '%'
+        width: (graphicsCounter === currentIndex.current ? activeSegmentPercentage : 10) + '%'
       },
       id: 'step-container-' + counter++
     }, renderStep(step)))))));
@@ -191,10 +193,9 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
       fontSize: '24px',
       color: '#202124',
       padding: "16px 0",
-      margin: "0",
-      width: "70%"
+      margin: "0"
     }, props.config)
-  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(segmentPercentage) && !_Utils.default.isNull(currentIndex.current) ? render() : null) : null);
+  }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(activeSegmentPercentage) && !_Utils.default.isNull(currentIndex.current) ? render() : null) : null);
 }));
 
 var _default = StepperTitleBar;

package/dist/components/TemplateDesigner.css

@@ -1,3 +1,7 @@
+.dropTarget {
+    border: 2px dashed #a1a1a1;
+}
+
 ._draggable_ {
     position: absolute;
     border-radius: 2px;
@@ -10,4 +14,4 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-}
+}

package/dist/components/TemplateDesigner.js

@@ -203,9 +203,9 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
         setSelectedItem = _React$useState18[1];
 
   _react.default.useEffect(() => {
-    props.handle.api = api();
-
     if (initializing) {
+      props.handle.api = api();
+
       let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
@@ -222,24 +222,40 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     }
   });
 
-  _react.default.useEffect(() => {
-    props.handle.api = api();
+  const setup = () => {
+    let container = document.getElementById('templateContainer');
 
-    if (templateDoc) {
-      templateItemEventHandler.initDragAndDrop();
+    if (!_Utils.default.isNull(templateDoc) && !_Utils.default.isNull(container)) {
+      templateItemEventHandler.initDragAndDrop((id, node) => {
+        setSelectedItem(id);
+      }, container);
     }
+  };
+
+  _react.default.useEffect(() => {
+    setup();
+  });
+
+  _react.default.useEffect(() => {
+    setup();
   }, [templateDoc]);
 
-  function getFetchConfig(data, method) {
+  function getFetchConfig(data, method, contentType = null) {
     const accessToken = sessionStorage.getItem("accessToken");
     const idToken = sessionStorage.getItem("idToken");
+    let headers = {
+      'Accept': 'application/json',
+      'Authorization': 'Bearer ' + accessToken,
+      'idToken': idToken
+    };
+
+    if (contentType) {
+      headers['Content-Type'] = contentType;
+    }
+
     return {
       method: method,
-      headers: {
-        'Accept': 'application/json',
-        'Authorization': 'Bearer ' + accessToken,
-        'idToken': idToken
-      },
+      headers: headers,
       body: data
     };
   }
@@ -277,14 +293,29 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   };
 
   const handleSave = () => {
-    alert('SAVE FIREEEE');
+    let payload = document.getElementById("templateContainer").innerHTML.replace("<div name=\"replaced_html\", '<html'").replace('</div>', '</html>').replace("<div name=\"replaced_body\"", '<body').replace('</div>', '</body>').replace('2px dashed green', 'none');
+    let templateData = {};
+    templateData.templateType = templateType;
+    templateData.payloadBase64 = btoa(payload);
+    let fetchConfig = getFetchConfig(JSON.stringify(templateData), 'POST', 'application/json');
+    let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.templateStorageUrl;
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {//alert('SAVE RESULT : ' + JSON.stringify(data));
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationContext.default.clear();
+
+        _ApplicationContext.default.getApplicationHistory().push('/login');
+      }
+    }));
   };
 
   const handleOk = () => {
     let fetchConfig = getFetchConfig(null, 'GET');
     setFileDialogOpen(false);
     (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + _ApplicationContext.default.getBaseApiUrl() + props.config.metaDataUrl + '/' + templateType.id), fetchConfig).then(status).then(json).then(data => {
-      setDesignData(JSON.parse(data));
+      let designData = JSON.parse(data);
+      setDesignData(designData);
+      setTemplateDoc(atob(designData.template.payloadBase64));
     }).catch(e => {
       if (e.code === 401) {
         _ApplicationContext.default.clear();
@@ -299,6 +330,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   };
 
   const loadDoc = file => {
+    setTemplateDoc(null);
     let data = new FormData();
     data.append("sourceType", "PDF");
     data.append("targetType", "HTML");
@@ -318,6 +350,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
 
   let mouseClickHandler = function mouseClickHandler(event) {
     if (grabbedItem) {
+      setSelectedItem(grabbedItem.id);
       templateItemEventHandler.handleGrabRelease(event, {
         id: grabbedItem.id,
         width: 200,
@@ -385,7 +418,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     id: 'DELETE'
   })), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     component: "span",
-    disabled: selectedItem === null,
+    disabled: !templateDoc,
     variant: 'contained',
     size: "large",
     onClick: handleSave
@@ -432,7 +465,6 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       overflow: "auto"
     },
     className: 'col-*-*',
-    id: "signaturePanel",
     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>')