@agilemotion/oui-react-js 1.3.7 → 1.3.9

package/dist/components/layout/Layout.js

@@ -11,8 +11,6 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-
 var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 
 var _DataGrid = require("../DataGrid");
@@ -33,148 +31,50 @@ var _Tree = require("../Tree");
 
 var _Form = _interopRequireDefault(require("../form/Form"));
 
-var _asyncMutex = require("async-mutex");
-
 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; }
-
-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 _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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+var _Calendar = _interopRequireDefault(require("../Calendar"));
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+var _Video = _interopRequireDefault(require("../media/Video"));
 
-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."); }
+var _VCRoom = _interopRequireDefault(require("../media/VCRoom"));
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
 
 const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const _React$useState = _react.default.useState({}),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        componentHandles = _React$useState2[0];
-
-  const _React$useState3 = _react.default.useState([]),
-        _React$useState4 = _slicedToArray(_React$useState3, 1),
-        loadedComponents = _React$useState4[0];
-
-  const _React$useState5 = _react.default.useState(false),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        visible = _React$useState6[0],
-        setVisible = _React$useState6[1];
+  const [componentHandles] = _react.default.useState({});
 
-  const _React$useState7 = _react.default.useState(true),
-        _React$useState8 = _slicedToArray(_React$useState7, 2),
-        initializing = _React$useState8[0],
-        setInitializing = _React$useState8[1];
+  const [loadedComponents] = _react.default.useState([]);
 
-  const loadingRef = _react.default.useRef(true);
+  const [visible, setVisible] = _react.default.useState(false);
 
-  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++) {
-          let component = layout.components[i];
-
-          if (_Utils.default.isNull(component.id)) {
-            component.id = props.config.id + '_' + component.type + "_" + i;
-          }
-
-          component.key = keyCounter++;
-        }
-      }
-
-      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
-
-      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
-
-      _Observable.default.addSystemSubscriptions(parsedConfig);
-
-      if (!_Utils.default.isNull(props.config.visible)) {
-        setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
-      } else {
-        setVisible(true);
-      }
-
-      setInitializing(false);
-    }
+    props.handle.api = api();
   });
 
-  function loadCompleteHandler(_x) {
-    return _loadCompleteHandler.apply(this, arguments);
-  }
-
-  function _loadCompleteHandler() {
-    _loadCompleteHandler = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(id) {
-      var release, allLoaded, i, component;
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(loadingRef.current === true)) {
-              _context.next = 5;
-              break;
-            }
-
-            _context.next = 3;
-            return mutex.acquire();
-
-          case 3:
-            release = _context.sent;
-
-            try {
-              loadedComponents.push(id);
-              allLoaded = true;
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
-              if (!_Utils.default.isNull(props.config.components)) {
-                for (i = 0; i < props.config.components.length; i++) {
-                  component = props.config.components[i];
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
 
-                  if (!loadedComponents.includes(component.id)) {
-                    allLoaded = false;
-                  }
-                }
-              }
+    _Observable.default.addSystemSubscriptions(parsedConfig);
 
-              if (allLoaded) {
-                props.loadCompleteHandler(props.config.id);
-                loadingRef.current = false;
-              }
-            } finally {
-              release();
-            }
-
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return _loadCompleteHandler.apply(this, arguments);
-  }
+    if (!_Utils.default.isNull(parsedConfig.visible)) {
+      setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, props.config.id));
+    } else {
+      setVisible(true);
+    }
+  }, []);
 
   function createComponentHandle(component) {
     if (_Utils.default.isNull(componentHandles[component.id])) {
@@ -186,106 +86,124 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     return componentHandles[component.id];
   }
 
-  const createLayoutHandle = (layout, api) => {
-    if (_Utils.default.isNull(componentHandles[layout.id])) {
-      let handle = {};
-      componentHandles[layout.id] = handle;
-      handle.api = api;
-      return handle;
+  _react.default.useLayoutEffect(() => {
+    props.handle.api = api();
+  }, []);
+
+  const setMissingComponentIds = () => {
+    let layout = props.config;
+
+    if (!layout.id) {
+      layout.id = '_parent_layout';
     }
 
-    return componentHandles[layout.id];
+    layout.key = keyCounter++;
+
+    if (!_Utils.default.isNull(layout.components)) {
+      for (let i = 0; i < layout.components.length; i++) {
+        let component = layout.components[i];
+
+        if (_Utils.default.isNull(component.id)) {
+          component.id = layout.id + '_' + component.type + '_' + i;
+        }
+
+        component.key = keyCounter++;
+      }
+    }
   };
 
   function renderComponent(component) {
-    return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(Layout, {
-      handleFactory: (layout, api) => {
-        createLayoutHandle(component, api);
-      },
-      config: component,
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'dataGrid' ? /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'form' ? /*#__PURE__*/_react.default.createElement(_Form.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      className: 'defaultForm',
-      loadCompleteHandler: loadCompleteHandler
-    }) : 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, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'titleBar' ? /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'stepperTitleBar' ? /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'alertBar' ? /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'signatureTemplateDesigner' ? /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'documentViewer' ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      viewId: props.viewId,
-      loadCompleteHandler: loadCompleteHandler
-    }) : component.type === 'signaturePanel' ? /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
-      config: component,
-      handle: createComponentHandle(component),
-      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);
+    if (_Utils.default.isNull(component.id)) {
+      return null;
+    } else {
+      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(Layout, {
+        handle: createComponentHandle(component),
+        config: component,
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'dataGrid' ? /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'form' ? /*#__PURE__*/_react.default.createElement(_Form.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId,
+        className: 'defaultForm'
+      }) : component.type === 'htmlPanel' ? /*#__PURE__*/_react.default.createElement(_HtmlPanel.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        viewId: props.viewId,
+        ref: /*#__PURE__*/_react.default.createRef()
+      }) : component.type === 'tree' ? /*#__PURE__*/_react.default.createElement(_Tree.Tree, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'titleBar' ? /*#__PURE__*/_react.default.createElement(_TitleBar.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'stepperTitleBar' ? /*#__PURE__*/_react.default.createElement(_StepperTitleBar.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'alertBar' ? /*#__PURE__*/_react.default.createElement(_AlertBar.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'signatureTemplateDesigner' ? /*#__PURE__*/_react.default.createElement(_SignatureTemplateDesigner.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'documentViewer' ? /*#__PURE__*/_react.default.createElement(_DocumentViewer.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'vcRoom' ? /*#__PURE__*/_react.default.createElement(_VCRoom.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'userVideo' ? /*#__PURE__*/_react.default.createElement(_Video.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'signaturePanel' ? /*#__PURE__*/_react.default.createElement(_SignaturePanel.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'dialog' ? /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'calendar' ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : component.type === 'templateDesigner' ? /*#__PURE__*/_react.default.createElement(_TemplateDesigner.default, {
+        config: component,
+        handle: createComponentHandle(component),
+        ref: /*#__PURE__*/_react.default.createRef(),
+        viewId: props.viewId
+      }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
+    }
   }
 
   const api = () => {
@@ -295,43 +213,29 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         return props.config.id;
       },
 
+      set visible(val) {
+        setVisible(val);
+      },
+
       getChildren: () => {
+        //console.log("\n\n\n\nGETTING LAYOUT KIDS : ", componentHandles);
         let children = [];
         let properties = Object.getOwnPropertyNames(componentHandles);
 
-        var _iterator = _createForOfIteratorHelper(properties),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            const property = _step.value;
-            let componentHandle = componentHandles[property];
-            children.push(componentHandle);
-
-            if (!_Utils.default.isNull(componentHandle.api) && !_Utils.default.isNull(componentHandle.api.getChildren)) {
-              let moreChildren = componentHandle.api.getChildren();
-
-              if (!_Utils.default.isNull(moreChildren)) {
-                var _iterator2 = _createForOfIteratorHelper(moreChildren),
-                    _step2;
-
-                try {
-                  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                    const child = _step2.value;
-                    children.push(child);
-                  }
-                } catch (err) {
-                  _iterator2.e(err);
-                } finally {
-                  _iterator2.f();
-                }
+        for (const property of properties) {
+          let componentHandle = componentHandles[property]; //console.log(property, componentHandle);
+
+          children.push(componentHandle);
+
+          if (!_Utils.default.isNull(componentHandle.api) && !_Utils.default.isNull(componentHandle.api.getChildren)) {
+            let moreChildren = componentHandle.api.getChildren();
+
+            if (!_Utils.default.isNull(moreChildren)) {
+              for (const child of moreChildren) {
+                children.push(child);
               }
             }
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
 
         return children;
@@ -348,8 +252,9 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
 
   function getDefaultComponentContainerStyle(component) {
     return _Utils.default.mergeStyles({
-      width: '100%',
-      height: '100%',
+      width: 'auto',
+      height: 'auto',
+      margin: 0,
       minHeight: 0
     }, component);
   }
@@ -359,7 +264,9 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       overflow: 'auto',
       border: 'none',
       minWidth: '128px',
-      height: '100%',
+      width: 'auto',
+      height: 'auto',
+      display: visible ? 'block' : 'none',
       margin: 0,
       padding: 0
     }, component);
@@ -372,60 +279,38 @@ const Layout = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }
 
   function render(layout) {
-    if (_Utils.default.isNull(layout.components) || layout.components.length === 0) {
-      loadCompleteHandler(layout.id);
-    }
-
+    setMissingComponentIds();
     let counter = 0;
-
-    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 className = _Utils.default.getComponentAttribute(component, 'className', null);
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "row-*-*",
-        key: component.key
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "col-*-* ".concat(className),
-        style: className === null || className === 'none' ? getDefaultComponentContainerStyle(component) : null
-      }, renderComponent(component)));
+    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(_react.default.Fragment, null, layout.components.map((component, index) => {
+      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component)) : /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: index
+      }, renderComponent(component));
     })) : /*#__PURE__*/_react.default.createElement("div", {
-      className: "row",
       style: {
-        margin: margin,
-        height: height
+        display: 'table',
+        width: '100%',
+        height: '100%'
       }
     }, layout.components.map(component => {
-      let className = _Utils.default.getComponentAttribute(component, 'className', null);
+      let className = _Utils.default.getComponentAttribute(component, 'className', '');
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderComponent(component)) : /*#__PURE__*/_react.default.createElement("div", {
         key: counter++,
-        className: "col-*-* ".concat(_Utils.default.getComponentAttribute(component, 'className', null)),
-        style: className === null || className === 'none' ? getDefaultComponentContainerStyle(component) : null
+        style: {
+          display: 'table-cell',
+          height: '100%',
+          verticalAlign: 'middle'
+        },
+        className: "".concat(className)
       }, renderComponent(component));
     }));
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '100%',
-      overflow: 'hidden',
-      display: visible ? 'block' : 'none'
-    }
-  }, initializing === false ? !_Utils.default.isNull(props.config.attributes) && props.config.attributes.style === 'none' ? /*#__PURE__*/_react.default.createElement("div", {
-    style: getLayoutStyle(props.config, 'transparent')
-  }, render(props.config)) : /*#__PURE__*/_react.default.createElement(_Paper.default, {
-    ref: ref,
-    style: getLayoutStyle(props.config, null)
-  }, render(props.config)) : null);
+    id: props.config.id,
+    style: _Utils.default.mergeStyles(getLayoutStyle(props.config, 'transparent'), props.config),
+    className: "".concat(_Utils.default.getComponentAttribute(props.config, 'className', null))
+  }, render(props.config));
 });
 
 exports.Layout = Layout;

package/dist/components/layout/VC.css

@@ -0,0 +1,17 @@
+.settings-container {
+    height: 100% !important;
+}
+
+.settings-content {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    width: 100% !important;
+    height: calc(100% - 64px) !important;
+    flex-direction: column !important;
+}
+
+.av-settings-container {
+    width: 500px !important;
+    height: 400px !important;
+}

package/dist/components/layout/View.css

@@ -3,6 +3,22 @@
     background-color: #ffffff;
 }
 
+.no-margin {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.no-padding {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.centered-flex-box {
+    display: flex;
+    align-Items: center;
+    justify-content: center
+}
+
 /* Smartphones (landscape); */
 @media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
     .view {
@@ -40,4 +56,4 @@
     .view {
 
     }
-}
+}