@agilemotion/oui-react-js 1.3.2 → 1.3.3

package/dist/components/form/Section.js

@@ -17,6 +17,8 @@ var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 
+var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
+
 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; } } }; }
@@ -100,7 +102,17 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
       viewId: props.viewId,
       values: props.values,
       key: componentKey++
-    }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported form section component type " + component.type);
+    }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      key: componentKey++,
+      values: props.values,
+      loadCompleteHandler: props.loadCompleteHandler
+    }) : /*#__PURE__*/_react.default.createElement("div", {
+      key: componentKey++
+    }, "Unsupported form section component type " + component.type);
   }
 
   const api = () => {
@@ -122,18 +134,20 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
             let componentHandle = componentHandles[property];
             children.push(componentHandle);
 
-            var _iterator2 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
-                _step2;
-
-            try {
-              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                const child = _step2.value;
-                children.push(child);
+            if (componentHandle.api) {
+              var _iterator2 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
+                  _step2;
+
+              try {
+                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                  const child = _step2.value;
+                  children.push(child);
+                }
+              } catch (err) {
+                _iterator2.e(err);
+              } finally {
+                _iterator2.f();
               }
-            } catch (err) {
-              _iterator2.e(err);
-            } finally {
-              _iterator2.f();
             }
           }
         } catch (err) {
@@ -143,7 +157,30 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
         }
 
         return children;
+      },
+
+      refresh() {
+        let properties = Object.getOwnPropertyNames(componentHandles);
+
+        var _iterator3 = _createForOfIteratorHelper(properties),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            const property = _step3.value;
+            let componentHandle = componentHandles[property];
+
+            if (componentHandle.api && componentHandle.api.refresh) {
+              componentHandle.api.refresh();
+            }
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
       }
+
     };
   };
 
@@ -152,21 +189,23 @@ const Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.fo
   };
 
   function render(section) {
-    let margin = !_Utils.default.isNull(section.attributes) && !_Utils.default.isNull(section.attributes['margin']) ? section.attributes['margin'] : null;
     let counter = 0;
-    return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", null, fieldGrid.rows.map(row => {
+    return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        overflow: 'hidden'
+      }
+    }, fieldGrid.rows.map(row => {
       return /*#__PURE__*/_react.default.createElement(_Grid.default, {
         container: true,
-        spacing: 2,
-        style: {
-          margin: margin,
+        style: _Utils.default.mergeStyles({
+          margin: '0',
           textAlign: 'left',
           width: '100%'
-        },
+        }, section),
         key: componentKey++
       }, row.fields.map(field => {
         if (_Utils.default.isNull(field.id)) {
-          field.id = counter + "-" + field.type + '-section-component';
+          field.id = counter++ + "-" + field.type + '-section-component';
         }
 
         return renderComponent(field);

package/dist/components/form/SelectItem.js

@@ -63,8 +63,9 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
 
   _react.default.useEffect(() => {
     if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
-      (0, _RestUtils.invokeRpc)(props.config.dataService, props.handle, props.viewId, result => {
-        let data = result.data;
+      let method = props.config.dataService.type === 'remoteObjectProxy' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
+      method(props.config.dataService, props.handle, props.viewId, result => {
+        let data = props.config.dataService.type === 'remoteObjectProxy' ? result.data : result;
         let options = [];
 
         if (_Utils.default.isNull(props.validator) || props.validator.nullable) {
@@ -118,7 +119,8 @@ const SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_reac
     size: "small",
     variant: "outlined"
   }, base.selectOptions.map(option => option.id === '_EMPTY_VALUE' ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-    value: ""
+    value: "",
+    key: option.id
   }, /*#__PURE__*/_react.default.createElement("em", null, "\xA0")) : /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
     key: option.id,
     value: option.id

package/dist/components/form/SignatureTemplateDesignerField.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BaseField = require("./BaseField");
+
+var _SignatureTemplateDesigner = _interopRequireDefault(require("../signatures/SignatureTemplateDesigner"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const SignatureTemplateDesignerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+
+  const designerHandler = _react.default.useState({});
+
+  return /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
+    config: props.config.designer,
+    handle: designerHandler,
+    ref: /*#__PURE__*/_react.default.createRef(),
+    viewId: props.viewId,
+    loadCompleteHandler: () => {},
+    showToolbar: false,
+    valueChangeHandler: value => {
+      base.handleValueChange(value);
+    }
+  });
+}));
+
+const SignatureTemplateDesignerField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle
+  }), base => /*#__PURE__*/_react.default.createElement(SignatureTemplateDesignerComponent, _extends({
+    ref: ref,
+    base: base
+  }, props)));
+}));
+
+var _default = SignatureTemplateDesignerField;
+exports.default = _default;

package/dist/components/form/TextField.js

@@ -40,11 +40,7 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
         _React$useState2 = _slicedToArray(_React$useState, 1),
         multiline = _React$useState2[0];
 
-  const minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
-
-  const height = _Utils.default.getComponentAttribute(props.config, 'height', multiline ? '200px' : null);
+  const height = _Utils.default.getComponentStyleAttribute(props.config, 'height', multiline ? '200px' : null);
 
   const rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
@@ -81,12 +77,12 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     rows: rows,
     disabled: base.disabled,
     size: "small",
-    style: {
-      minWidth: minWidth,
-      width: width,
+    style: _Utils.default.mergeStyles({
+      minWidth: '240px',
+      width: '100%',
       height: height,
       color: 'secondary'
-    },
+    }, props.config),
     variant: "outlined"
   });
 }));

package/dist/components/form/TransferList.js

@@ -132,9 +132,9 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     try {
       for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
         const item = _step2.value;
-        let objectRef = {};
-        objectRef.id = item.id;
-        objectRefs.push(objectRef);
+        //let objectRef = {};
+        //objectRef.id = item.id;
+        objectRefs.push(item);
       }
     } catch (err) {
       _iterator2.e(err);
@@ -184,7 +184,6 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     error: base.hasError
   }, label) : null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
-    spacing: 2,
     alignItems: "stretch",
     className: classes.root,
     style: {
@@ -196,7 +195,7 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     item: true,
     style: {
       border: "1px solid ".concat(base.hasError ? '#f44336' : '#e1e1e1'),
-      width: '45%',
+      width: '40%',
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
@@ -212,7 +211,8 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
   })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
     item: true,
     style: {
-      margin: 'auto'
+      margin: 'auto',
+      width: '20%'
     }
   }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
     container: true,
@@ -237,7 +237,7 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_re
     item: true,
     style: {
       border: "1px solid ".concat(base.hasError ? '#f44336' : '#e1e1e1'),
-      width: '45%',
+      width: '40%',
       borderRadius: '4px'
     }
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {

package/dist/components/form/UploadField.js

@@ -135,6 +135,10 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     setCacheId();
   });
 
+  _react.default.useEffect(() => {
+    setViewerFile(props.initialFile);
+  }, [props.initialFile]);
+
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.valueMode)) {
       setValueMode(props.valueMode);
@@ -183,34 +187,41 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       };
 
       const upload = (metadata, file, uploadUrl) => {
-        const accessToken = sessionStorage.getItem("accessToken");
-        const idToken = sessionStorage.getItem("idToken");
-        let data = new FormData();
-        metadata.correlationId = props.viewId + "." + props.config.id;
-        data.append("metadata", JSON.stringify(metadata));
-        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() + uploadUrl;
-        (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
-          metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
-          metadata.documentRepositoryCacheId = data;
-          setCacheId(data);
+        let uploadMode = _Utils.default.getComponentAttribute(props.config, "uploadMode", "POST");
+
+        if (uploadMode === 'POST') {
+          const accessToken = sessionStorage.getItem("accessToken");
+          const idToken = sessionStorage.getItem("idToken");
+          let data = new FormData();
+          metadata.correlationId = props.viewId + "." + props.config.id;
+          data.append("metadata", JSON.stringify(metadata));
+          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() + uploadUrl;
+          (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+            metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+            metadata.documentRepositoryCacheId = data;
+            setCacheId(data);
+            base.handleValueChange(metadata);
+          }).catch(e => {
+            if (e.code === 401) {
+              _ApplicationContext.default.clear();
+
+              _ApplicationContext.default.getApplicationHistory().push('/login');
+            }
+          }));
+        } else {
+          metadata.payloadBase64 = reader.result;
           base.handleValueChange(metadata);
-        }).catch(e => {
-          if (e.code === 401) {
-            _ApplicationContext.default.clear();
-
-            _ApplicationContext.default.getApplicationHistory().push('/login');
-          }
-        }));
+        }
       };
 
       reader.onloadend = () => {
@@ -220,6 +231,10 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
           fileMetaData.type = allFiles[0].type;
           fileMetaData.size = allFiles[0].size;
 
+          if (base.value) {
+            fileMetaData.id = base.value.id;
+          }
+
           if ('base64' === valueMode) {
             fileMetaData.url = allFiles[0].base64;
             base.handleValueChange(fileMetaData);
@@ -252,15 +267,15 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", {
     accept: props.style === 'IMAGE' ? "image/jpeg,image/gif,image/png,image/x-eps" : "image/jpeg,image/gif,image/png,application/pdf,image/x-eps",
     className: classes.input,
-    id: "contained-button-file",
+    id: "contained-button-file-".concat(props.config.id),
     disabled: base.disabled,
     required: base.required,
     multiple: multiple,
     onChange: handleChange(),
     type: "file"
   }), props.style === 'IMAGE' ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "contained-button-file"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    htmlFor: "contained-button-file-".concat(props.config.id)
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: classes.button,
@@ -271,25 +286,41 @@ const DocumentUpload = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       backgroundRepeat: 'no-repeat',
       backgroundSize: 'cover',
       backgroundColor: 'transparent',
-      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(props.config.dataService) ? "url(".concat(location + _ApplicationContext.default.getBaseApiUrl() + _ApplicationContext.default.getFilesApiPath() + '/get/file?fileId=' + (!_Utils.default.isNull(base.value) ? base.value.id : '-1') + '&fileService=' + props.config.dataService.serviceId + (!_Utils.default.isNull(defaultImage) ? '&defaultImage=' + defaultImage : '') + '&access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./default-avatar.png'), ")")
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null,
+      backgroundImage: !_Utils.default.isNull(viewerFile) ? "url(".concat(viewerFile.base64, ")") : !_Utils.default.isNull(base.value) ? "url(".concat(location + _ApplicationContext.default.getBaseApiUrl() + '/docs/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"), ")") : "url(".concat(require('./' + _Utils.default.getComponentAttribute(props.config, 'defaultImage', 'default-avatar.png')), ")")
+    }
+  })), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "0 8px"
     }
-  }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: "contained-button-file"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, base.errorMessage)) : null)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "contained-button-file-".concat(props.config.id)
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     disabled: base.disabled,
-    className: classes.button
-  }, props.config.attributes['label'] ? props.config.attributes['label'] : "Upload File")), /*#__PURE__*/_react.default.createElement("label", null, !_Utils.default.isNull(base.value) ? _Utils.default.isNull(base.value.id) || _Utils.default.isNull(props.config.dataService) ? base.value.name : /*#__PURE__*/_react.default.createElement("a", {
-    href: location + _ApplicationContext.default.getBaseApiUrl() + _ApplicationContext.default.getFilesApiPath() + '/get/file?fileId=' + base.value.id + '&fileService=' + props.config.dataService.serviceId + '&access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"),
+    className: classes.button,
+    style: {
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null
+    }
+  }, props.config.attributes['label'] ? props.config.attributes['label'] : "Upload File")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "0 8px"
+    }
+  }, base.errorMessage)) : null), /*#__PURE__*/_react.default.createElement("label", null, !_Utils.default.isNull(base.value) ? _Utils.default.isNull(base.value.id) ? base.value.name : /*#__PURE__*/_react.default.createElement("a", {
+    href: location + _ApplicationContext.default.getBaseApiUrl() + '/docs/manager/download/' + base.value.documentRepositoryId + '?access_token=' + sessionStorage.getItem("accessToken") + '&idToken=' + sessionStorage.getItem("idToken"),
     target: '_blank'
-  }, base.value.name) : null), nullable && base.value ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }, base.value.name) : null), !base.disabled && nullable && base.value ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
     ref: ref,
     "aria-haspopup": "true",
     onClick: () => {
       base.handleValueChange(null);
-      document.getElementById('contained-button-file').value = null;
+      document.getElementById("contained-button-file-".concat(props.config.id)).value = null;
     }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'DELETE'
@@ -321,14 +352,27 @@ const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
         setClearTrigger(!clearTrigger);
 
         if (!_Utils.default.isNull(value)) {
-          let val = value;
+          let val = value; // TODO : Support multiple file upload
 
-          if (value.map) {
-            val = value.map;
+          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+            if (typeof value.length !== 'undefined' && value.length > 0) {
+              val = value[0];
+            } else {
+              if (value.documentRepositoryId) {
+                return value;
+              }
+
+              return null;
+            }
+          }
+
+          if (val.map) {
+            val = val.map;
           }
 
           let fileMetaData = {};
           fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.id = val.id;
           fileMetaData.type = val.type;
           fileMetaData.size = val.size;
           fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
@@ -342,6 +386,13 @@ const UploadField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defaul
 
           return fileMetaData;
         }
+      } else {
+        // TODO : Support multiple file upload
+        if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+          let valArray = [];
+          valArray.push(value);
+          return valArray;
+        }
       }
 
       return value;

package/dist/components/layout/CollapsiblePanel.js

@@ -9,16 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactstrap = require("reactstrap");
 
-var _reactBootstrap = require("react-bootstrap");
-
 var _MenuItem = _interopRequireDefault(require("material-ui/MenuItem"));
 
-var _styles = require("material-ui/styles");
-
 var _colors = require("material-ui/styles/colors");
 
-var _gridOn = _interopRequireDefault(require("material-ui/svg-icons/image/grid-on"));
-
 var _Utils = _interopRequireDefault(require("../../Utils"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/layout/Layout.js

@@ -21,6 +21,8 @@ var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
 
 var _SignatureTemplateDesigner = _interopRequireDefault(require("../signatures/SignatureTemplateDesigner"));
 
+var _TemplateDesigner = _interopRequireDefault(require("../TemplateDesigner"));
+
 var _AlertBar = _interopRequireDefault(require("../AlertBar"));
 
 var _TitleBar = _interopRequireDefault(require("../TitleBar"));
@@ -37,6 +39,8 @@ var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
 
 var _SignaturePanel = _interopRequireDefault(require("../SignaturePanel"));
 
+var _Dialog = _interopRequireDefault(require("../Dialog"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -83,12 +87,14 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const loadingRef = _react.default.useRef(true);
 
   const mutex = new _asyncMutex.Mutex();
+  let keyCounter = 0;
 
   _react.default.useEffect(() => {
     props.handleFactory(props.config, api());
 
     if (initializing) {
       let layout = props.config;
+      layout.key = keyCounter++;
 
       if (!_Utils.default.isNull(layout.components)) {
         for (let i = 0; i < layout.components.length; i++) {
@@ -98,7 +104,7 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             component.id = props.config.id + '_' + component.type + "_" + i;
           }
 
-          component.key = i;
+          component.key = keyCounter++;
         }
       }
 
@@ -222,6 +228,7 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
       config: component,
       handle: createComponentHandle(component),
+      viewId: props.viewId,
       ref: /*#__PURE__*/_react.default.createRef(),
       loadCompleteHandler: loadCompleteHandler
     }) : component.type === 'tree' ? /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
@@ -266,6 +273,18 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ref: /*#__PURE__*/_react.default.createRef(),
       viewId: props.viewId,
       loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'dialog' ? /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
+    }) : component.type === 'templateDesigner' ? /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      ref: /*#__PURE__*/_react.default.createRef(),
+      viewId: props.viewId,
+      loadCompleteHandler: loadCompleteHandler
     }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported component type " + component.type);
   }
 
@@ -328,23 +347,22 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   };
 
   function getDefaultComponentContainerStyle(component) {
-    return {
-      width: _Utils.default.getComponentAttribute(component, 'width', '100%'),
+    return _Utils.default.mergeStyles({
+      width: '100%',
       height: '100%',
-      minWidth: _Utils.default.getComponentAttribute(component, 'minWidth', null),
-      minHeight: _Utils.default.getComponentAttribute(component, 'minHeight', 0)
-    };
+      minHeight: 0
+    }, component);
   }
 
   function getLayoutStyle(component, backgroundColor) {
-    let style = {
-      overflow: _Utils.default.getComponentAttribute(component, 'overflow', 'auto'),
+    let style = _Utils.default.mergeStyles({
+      overflow: 'auto',
+      border: 'none',
       minWidth: '128px',
       height: '100%',
-      maxHeight: _Utils.default.getComponentAttribute(component, 'maxHeight', null),
-      margin: _Utils.default.getComponentAttribute(component, 'margin', 0),
-      padding: _Utils.default.getComponentAttribute(component, 'padding', 0)
-    };
+      margin: 0,
+      padding: 0
+    }, component);
 
     if (!_Utils.default.isNull(backgroundColor)) {
       style.backgroundColor = backgroundColor;
@@ -362,34 +380,37 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
     let height = _Utils.default.getComponentAttribute(layout, 'height', 'auto');
 
+    let margin = _Utils.default.getComponentAttribute(layout, 'margin', '0');
+
     return _Utils.default.isNull(layout.components) || layout.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, "I am a dum empty Layout") : layout.orientation === 'VERTICAL' ? /*#__PURE__*/_react.default.createElement("div", {
       style: {
         margin: '0',
         height: height
       }
     }, layout.components.map(component => {
-      let style = _Utils.default.getComponentAttribute(component, 'style', null);
+      let className = _Utils.default.getComponentAttribute(component, 'className', null);
 
+      console.log(getDefaultComponentContainerStyle(component));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "row-*-*",
         key: component.key
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "col-*-* ".concat(style),
-        style: style === null || style === 'none' ? getDefaultComponentContainerStyle(component) : null
+        className: "col-*-* ".concat(className),
+        style: className === null || className === 'none' ? getDefaultComponentContainerStyle(component) : null
       }, renderComponent(component)));
     })) : /*#__PURE__*/_react.default.createElement("div", {
-      className: "row-*-*",
+      className: "row",
       style: {
-        margin: '0',
+        margin: margin,
         height: height
       }
     }, layout.components.map(component => {
-      let style = _Utils.default.getComponentAttribute(component, 'style', null);
+      let className = _Utils.default.getComponentAttribute(component, 'className', null);
 
       return /*#__PURE__*/_react.default.createElement("div", {
         key: counter++,
-        className: "col-*-* ".concat(_Utils.default.getComponentAttribute(component, 'style', null)),
-        style: style === null || style === 'none' ? getDefaultComponentContainerStyle(component) : null
+        className: "col-*-* ".concat(_Utils.default.getComponentAttribute(component, 'className', null)),
+        style: className === null || className === 'none' ? getDefaultComponentContainerStyle(component) : null
       }, renderComponent(component));
     }));
   }