@agilemotion/oui-react-js 1.8.78 → 2.0.0

package/dist/components/facialRecognition/FacialVerification.js

@@ -10,7 +10,9 @@ var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _Event = _interopRequireDefault(require("../../event/Event"));
 var _EventType = _interopRequireDefault(require("../../event/EventType"));
 var _FaceRecognitionComponent = _interopRequireDefault(require("./FaceRecognitionComponent"));
-var _ej2Base = require("@syncfusion/ej2-base");
+var _ApplicationManager = _interopRequireWildcard(require("../../ApplicationManager"));
+var _FoldingSideTabDashboard = require("../dashboard/FoldingSideTabDashboard");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const status = response => {
   if (response.ok) {
@@ -28,6 +30,7 @@ const location = window.location.protocol + '//' + window.location.hostname + ':
 const FacialVerification = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [visible, setVisible] = _react.default.useState(false);
   const [value, setValue] = _react.default.useState(null);
+  const [offset, setOffset] = _react.default.useState(_FoldingSideTabDashboard.DRAWER_WIDTH);
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
@@ -38,13 +41,29 @@ const FacialVerification = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.
     let event = new _Event.default(props.handle, props.viewId, null);
     _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
     props.handle.api.refresh();
+    let listener = {};
+    listener.id = 'facialVerificationDashboardStateListener';
+    listener.type = _ApplicationManager.DASHBOARD_STATE;
+    listener.handler = state => {
+      setOffset(state.leftOffset);
+    };
+    _ApplicationManager.default.addApplicationListener(listener);
     return () => {
       _Observable.default.clearComponentEventListeners(props.handle);
+      _ApplicationManager.default.removeApplicationListener('facialVerificationDashboardStateListener');
     };
   }, []);
   _react.default.useEffect(() => {
     let event = new _Event.default(props.handle, props.viewId, value);
     _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+
+    // Fire FACIAL_VERIFICATION_SUCCESS only on a confirmed pass.
+    // Subscribers (e.g. forms with autoLoadData=false) use this to
+    // defer their loadData until the user is verified, instead of
+    // pulling sensitive data on view mount.
+    if (!_Utils.default.isNull(value) && value.outcome === 'SUCCESS') {
+      _Observable.default.fireEvent(_EventType.default.FACIAL_VERIFICATION_SUCCESS, event);
+    }
   }, [value]);
   const api = () => {
     return {
@@ -72,7 +91,9 @@ const FacialVerification = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.
     };
   };
   return visible && /*#__PURE__*/_react.default.createElement("div", {
-    style: _Utils.default.mergeStyles({}, props.config)
+    style: _Utils.default.mergeStyles({
+      width: "calc(100% - ".concat(offset, "px)")
+    }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_FaceRecognitionComponent.default, {
     mode: "verify",
     onComplete: response => {

package/dist/components/form/FieldSet.js

@@ -36,6 +36,7 @@ var _Switch = _interopRequireDefault(require("./Switch"));
 var _IconField = _interopRequireDefault(require("./IconField"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
 var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
+var _Layout = require("../layout/Layout");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FieldSet = /*#__PURE__*/_react.default.memo(props => {
   const [fieldGrid] = _react.default.useState(_Utils.default.getFieldGrid(props.config.attributes, props.config.fields));
@@ -339,6 +340,13 @@ const FieldSet = /*#__PURE__*/_react.default.memo(props => {
           handle: createComponentHandle(component),
           viewId: props.viewId
         });
+      case 'LAYOUT':
+        return /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+          config: component,
+          form: props.form,
+          handle: createComponentHandle(component),
+          viewId: props.viewId
+        });
       case 'ICON':
         return /*#__PURE__*/_react.default.createElement(_IconField.default, {
           keyHandler: props.keyHandler,

package/dist/components/form/ImageEditor.js

@@ -48,7 +48,6 @@ const json = response => {
 };
 const location = window.location.protocol + "//" + window.location.hostname;
 const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(props => {
-  var _base$value;
   const [viewerFile, setViewerFile] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null);
   const [angle, setAngle] = _react.default.useState(0);
   const [zoomDepth, setZoomDepth] = _react.default.useState(null);
@@ -409,48 +408,70 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: 'ZOOM_IN'
     })
-  }) : null)), !_Utils.default.isNull(base.value) || !_Utils.default.isNull(viewerFile) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "row",
-    style: {
-      padding: "8px 0",
-      marginLeft: '0',
-      marginRight: '0'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "__image_parent",
-    style: {
-      width: "100%",
-      height: height,
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundColor: 'transparent',
-      backgroundImage: "url(".concat(require('./transparent.jpeg'), ")"),
-      border: '4px solid #e1e1e1',
-      borderRadius: '4px'
-    },
-    className: "col-*-*"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.button,
-    style: {
-      width: 'auto',
-      height: parseFloat(height.replace('px', '')) - 20 + 'px',
-      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px',
-      textAlign: 'center',
-      overflow: 'auto',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "__image_container"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    id: "__image",
-    src: (viewerFile === null || viewerFile === void 0 ? void 0 : viewerFile.base64) || ((_base$value = base.value) === null || _base$value === void 0 ? void 0 : _base$value.url),
-    alt: '',
-    style: {
-      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
-    }
-  }))))) : null);
+  }) : null)), !_Utils.default.isNull(base.value) || !_Utils.default.isNull(viewerFile) ? (_base$value => {
+    // Two display modes:
+    //   - default (no user-driven zoom): image fits the box,
+    //     object-fit contain, parent overflow hidden → no scrollbars.
+    //   - zoomed (user clicked Zoom In): explicit width/height
+    //     applied by the zoom useEffect, parent overflow auto so
+    //     the user can pan around the larger-than-box image.
+    const isZoomed = zoomDepth !== null && zoomDepth > 0;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "row",
+      style: {
+        padding: "8px 0",
+        marginLeft: '0',
+        marginRight: '0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      id: "__image_parent",
+      style: {
+        width: "100%",
+        height: height,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+        backgroundColor: 'transparent',
+        backgroundImage: "url(".concat(require('./transparent.jpeg'), ")"),
+        border: '1px solid #e1e1e1',
+        borderRadius: '4px',
+        overflow: isZoomed ? 'auto' : 'hidden',
+        boxSizing: 'border-box',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '6px'
+      },
+      className: "col-*-*"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      id: "__image_container",
+      style: isZoomed ? {
+        display: 'inline-block'
+      } : {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      id: "__image",
+      src: (viewerFile === null || viewerFile === void 0 ? void 0 : viewerFile.base64) || ((_base$value = base.value) === null || _base$value === void 0 ? void 0 : _base$value.url),
+      alt: '',
+      draggable: false,
+      style: isZoomed ? {
+        display: 'block',
+        userSelect: 'none'
+      } : {
+        maxWidth: '100%',
+        maxHeight: '100%',
+        width: 'auto',
+        height: 'auto',
+        objectFit: 'contain',
+        display: 'block',
+        userSelect: 'none'
+      }
+    }))));
+  })() : null);
 });
 const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(props => {
   const [file, setFile] = _react.default.useState(null);

package/dist/components/form/MultiFileUploadField.js

@@ -48,7 +48,7 @@ const json = response => {
 };
 const location = window.location.protocol + '//' + window.location.hostname;
 const DocumentUpload = props => {
-  var _props$config$attribu;
+  var _props$config$attribu, _props$config$attribu2;
   const [files, setFiles] = _react.default.useState(null);
   const [multiple] = _react.default.useState(props.multiple === true);
   const [payloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
@@ -225,6 +225,7 @@ const DocumentUpload = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({}, props.config)
   }, /*#__PURE__*/_react.default.createElement("input", {
+    accept: ((_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.accept) || "application/pdf",
     className: classes.input,
     id: "contained-button-file-".concat(props.config.id),
     disabled: base.disabled,
@@ -234,7 +235,7 @@ const DocumentUpload = props => {
     type: "file"
   }), /*#__PURE__*/_react.default.createElement("div", null, !base.disabled && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      height: (_props$config$attribu = props.config.attributes) !== null && _props$config$attribu !== void 0 && _props$config$attribu.showThumbImages ? null : '48px'
+      height: (_props$config$attribu2 = props.config.attributes) !== null && _props$config$attribu2 !== void 0 && _props$config$attribu2.showThumbImages ? null : '48px'
     }
   }, /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "contained-button-file-".concat(props.config.id)
@@ -256,19 +257,19 @@ const DocumentUpload = props => {
       marginBottom: '8px'
     }
   }, files ? files.map((file, index) => {
-    var _props$config$attribu2, _props$config$attribu3;
+    var _props$config$attribu3, _props$config$attribu4;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       style: {
         marginLeft: '0',
         marginRight: '8px',
-        width: (_props$config$attribu2 = props.config.attributes) !== null && _props$config$attribu2 !== void 0 && _props$config$attribu2.showThumbImages ? null : '100%'
+        width: (_props$config$attribu3 = props.config.attributes) !== null && _props$config$attribu3 !== void 0 && _props$config$attribu3.showThumbImages ? null : '100%'
       }
     }, /*#__PURE__*/_react.default.createElement(_FileThumb.default, {
       key: file.name,
       file: file,
       disabled: base.disabled,
-      showImage: (_props$config$attribu3 = props.config.attributes) === null || _props$config$attribu3 === void 0 ? void 0 : _props$config$attribu3.showThumbImages,
+      showImage: (_props$config$attribu4 = props.config.attributes) === null || _props$config$attribu4 === void 0 ? void 0 : _props$config$attribu4.showThumbImages,
       onDelete: file => {
         deleteFile(file);
       }

package/dist/components/form/RadioGroup.js

@@ -19,15 +19,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(props => {
   const base = props.base;
-  const label = _Utils.default.getComponentAttribute(props.config, 'label', null);
   // TODO : Support calling a rest end-point to get options
   const options = _Utils.default.getComponentAttribute(props.config, 'options', []);
   const [value, setValue] = _react.default.useState(base.value ? base.value : props.defaultValue);
+  const [label, setLabel] = _react.default.useState(base.value ? base.value : props.defaultValue);
   _react.default.useEffect(() => {
     if (base.value) {
       setValue(base.value);
     }
   }, [base.value]);
+  _react.default.useEffect(() => {
+    try {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+      setLabel(_Utils.default.prop(_Utils.default.getComponentAttribute(parsedConfig, 'label', null)));
+    } catch (e) {
+      setLabel(_Utils.default.getComponentAttribute(props.config, 'label', ''));
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
     error: base.hasError,
     style: _Utils.default.mergeStyles({

package/dist/components/form/Section.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
-var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _FieldSet = _interopRequireDefault(require("./FieldSet"));
 var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _HtmlPanel = _interopRequireDefault(require("../HtmlPanel"));
-var _Video = _interopRequireDefault(require("../media/Video"));
 var _VideoPlayer = _interopRequireDefault(require("../media/VideoPlayer"));
+var _Layout = require("../layout/Layout");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Section = /*#__PURE__*/_react.default.memo(props => {
   const [fieldGrid, setFieldGrid] = _react.default.useState(null);
@@ -73,6 +72,13 @@ const Section = /*#__PURE__*/_react.default.memo(props => {
       viewId: props.viewId,
       key: componentKey++,
       values: props.values
+    }) : component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+      config: component,
+      handle: createComponentHandle(component),
+      disabled: props.disabled,
+      viewId: props.viewId,
+      key: componentKey++,
+      values: props.values
     }) : /*#__PURE__*/_react.default.createElement("div", {
       key: componentKey++
     }, 'Unsupported form section component type ' + component.type);

package/dist/components/form/TransferList.js

@@ -189,19 +189,23 @@ const TransferList = /*#__PURE__*/_react.default.memo((props, ref) => {
       children.push(selectionListHandle);
       return children;
     },
-    valueParser: value => {
-      if (!_Utils.default.isNull(value)) {
-        let objectArray = value;
-        let val = [];
-        if (objectArray.length > 0) {
-          let type = objectArray[0].type;
-          for (const objectArrayElement of objectArray) {
-            val.push(objectArrayElement);
+    valueParser: (value, inbound) => {
+      if (inbound) {
+        if (!_Utils.default.isNull(value) && value.length > 0) {
+          let objectArray = value;
+          let val = [];
+          if (objectArray.length > 0) {
+            let type = objectArray[0].type;
+            for (const objectArrayElement of objectArray) {
+              val.push(objectArrayElement);
+            }
           }
+          return val;
         }
-        return val;
+        return [];
+      } else {
+        return value;
       }
-      return [];
     },
     loadDataHandler: () => loadData()
   }), base => /*#__PURE__*/_react.default.createElement(TransferListComponent, _extends({

package/dist/components/form/UploadField.js

@@ -20,6 +20,11 @@ var _EventType = _interopRequireDefault(require("../../event/EventType"));
 var _noimage = _interopRequireDefault(require("./noimage.png"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   button: {
     margin: theme.spacing(1)
@@ -46,6 +51,7 @@ const json = response => {
 };
 const location = window.location.protocol + "//" + window.location.hostname;
 const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo(props => {
+  var _props$config$attribu, _props$config$attribu2, _props$config$attribu3;
   const [viewerFile, setViewerFile] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null);
   const [payloadStorageMode, setPayloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
   const [files, setFiles] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? [props.initialFile] : null);
@@ -102,6 +108,10 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
         metadata.documentRepositoryCacheId = data;
         cacheId.current = data;
         base.handleValueChange(metadata);
+        let event = new _Event.default(props.handle, props.viewId, _objectSpread(_objectSpread({}, metadata), {}, {
+          url: reader.result
+        }));
+        _Observable.default.fireEvent(_EventType.default.DOCUMENT_CACHED, event);
       }).catch(e => {
         if (e.code === 401) {
           _ApplicationManager.default.clear();
@@ -209,7 +219,7 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
     }
   };
   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",
+    accept: props.style === 'IMAGE' ? "image/jpeg,image/gif,image/png,image/x-eps" : ((_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.accept) || "application/pdf",
     className: classes.input,
     id: "contained-button-file-".concat(props.config.id),
     disabled: base.disabled,
@@ -242,15 +252,18 @@ const DocumentUpload = exports.DocumentUpload = /*#__PURE__*/_react.default.memo
   }, 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",
+    variant: "text",
     component: "span",
     disabled: base.disabled,
     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", {
+    },
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'UPLOAD'
+    })
+  }, (_props$config$attribu2 = props.config.attributes) !== null && _props$config$attribu2 !== void 0 && _props$config$attribu2.label ? (_props$config$attribu3 = props.config.attributes) === null || _props$config$attribu3 === void 0 ? void 0 : _props$config$attribu3.label : "")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       color: "#f44336",
       padding: "0 8px"

package/dist/components/layout/Layout.css

@@ -4,5 +4,53 @@
     flex-direction: column;
     height: 100% !important;
     width: 100% !important;
-    padding: 8px 0 0 0 !important;
+    padding: 0 !important;
+}
+
+/* ---------------------------------------------------------------------
+ * Resize splitters — emitted only when a Layout has splitter: true in
+ * its config. The library (react-resizable-panels) handles the cursor
+ * and drag mechanics; we only paint the handle.
+ * ------------------------------------------------------------------- */
+.oui-splitter {
+    background: transparent;
+    transition: background-color 120ms ease;
+    flex: 0 0 auto;
+    position: relative;
+}
+
+.oui-splitter-h {
+    width: 6px;
+    cursor: col-resize;
+}
+
+.oui-splitter-v {
+    height: 6px;
+    cursor: row-resize;
+}
+
+.oui-splitter:hover,
+.oui-splitter[data-resize-handle-active] {
+    background-color: rgba(0, 120, 215, 0.4);
+}
+
+/* Subtle middle dot to hint that the handle is draggable. */
+.oui-splitter::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.18);
+    border-radius: 1px;
+}
+
+.oui-splitter-h::after {
+    width: 2px;
+    height: 24px;
+}
+
+.oui-splitter-v::after {
+    width: 24px;
+    height: 2px;
 }

package/dist/components/layout/Layout.js

@@ -33,6 +33,7 @@ var _Chart = _interopRequireDefault(require("../Chart"));
 var _FacialRegistration = _interopRequireDefault(require("../facialRecognition/FacialRegistration"));
 var _FacialVerification = _interopRequireDefault(require("../facialRecognition/FacialVerification"));
 var _Spinner = _interopRequireDefault(require("../Spinner"));
+var _reactResizablePanels = require("react-resizable-panels");
 require("./Layout.css");
 var _Chat = _interopRequireDefault(require("../media/Chat"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -369,9 +370,48 @@ const Layout = props => {
     }
     return style;
   }
+
+  /**
+   * Render children wrapped in a <PanelGroup> with <PanelResizeHandle>s
+   * between consecutive children. Activated when layout.splitter === true.
+   * Per-component sizing flows through these optional fields:
+   *   splitterDefaultSize  — initial size as a percentage (0-100)
+   *   splitterMinSize      — minimum size as a percentage
+   *   splitterMaxSize      — maximum size as a percentage
+   *   splitterCollapsible  — whether the panel can be dragged to collapse
+   */
+  function renderWithSplitters(layout) {
+    const direction = layout.orientation === 'VERTICAL' ? 'vertical' : 'horizontal';
+    const handleClass = direction === 'horizontal' ? 'oui-splitter oui-splitter-h' : 'oui-splitter oui-splitter-v';
+    const children = [];
+    layout.components.forEach((component, index) => {
+      if (index > 0) {
+        children.push(/*#__PURE__*/_react.default.createElement(_reactResizablePanels.Separator, {
+          key: "handle-".concat(component.id),
+          className: handleClass
+        }));
+      }
+      children.push(/*#__PURE__*/_react.default.createElement(_reactResizablePanels.Panel, {
+        key: "panel-".concat(component.id),
+        defaultSize: component.splitterDefaultSize,
+        minSize: component.splitterMinSize,
+        maxSize: component.splitterMaxSize,
+        collapsible: component.splitterCollapsible
+      }, renderComponent(component, null)));
+    });
+    return /*#__PURE__*/_react.default.createElement(_reactResizablePanels.Group, {
+      orientation: direction
+    }, children);
+  }
   function render(layout) {
     setMissingComponentIds();
-    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) => {
+    if (_Utils.default.isNull(layout.components) || layout.components.length === 0) {
+      return /*#__PURE__*/_react.default.createElement("div", null, "I am a dum empty Layout");
+    }
+    if (layout.splitter === true) {
+      return renderWithSplitters(layout);
+    }
+    return layout.orientation === 'VERTICAL' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, layout.components.map((component, index) => {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: index
       }, renderComponent(component, null));

package/dist/components/layout/View.css

@@ -1,4 +1,4 @@
-:root { --header-h: 72px; --view-header-h: 104px; --view-header-min: 104px}
+:root { --header-h: 72px; --view-header-h: 92px; --view-header-min: 92px}
 
 .view {
     padding: 16px 8px 16px 32px;

package/dist/components/navbars/PortalNavbar.js

@@ -14,6 +14,7 @@ var _reactstrap = require("reactstrap");
 var _ActionHandlers = _interopRequireDefault(require("../../event/ActionHandlers"));
 var _ApplicationManager = _interopRequireWildcard(require("../../ApplicationManager"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
@@ -34,6 +35,7 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
   _react.default.useEffect(() => {
     if (initializing.current) {
       let avatarListener = {};
+      avatarListener.id = 'portalNavBarAvatarListener';
       avatarListener.type = _ApplicationManager.AVATAR_LISTENER_TYPE;
       avatarListener.handler = avatar => {
         setAvatarUrl(avatar.url);
@@ -41,6 +43,9 @@ const PortalNavbar = /*#__PURE__*/_react.default.memo(props => {
       _ApplicationManager.default.addApplicationListener(avatarListener);
       initializing.current = false;
     }
+    return () => {
+      _ApplicationManager.default.removeApplicationListener('portalNavBarAvatarListener');
+    };
   }, []);
   const launchView = path => {
     let actionConfig = {};