@agilemotion/oui-react-js 1.8.30 → 1.8.32

package/dist/components/StepperTitleBar.js

@@ -88,9 +88,18 @@ const StepperTitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
         return [];
       },
       show() {
-        let steps = _ApplicationManager.default.graphs[0].getTitleStack();
+        let graphs = [];
+        for (const key of Object.keys(this.viewContext)) {
+          let viewManager = this.viewContext[key];
+          for (const graph of viewManager.getGraphs()) {
+            graphs.push(graph);
+          }
+        }
+
+        // TODO : Ensure this picks the graph from the correct view
+        let steps = graphs[graphs.length - 1].getTitleStack();
         setSteps(steps);
-        currentIndex.current = _ApplicationManager.default.graphs[0].getCurrentNodeIndex();
+        currentIndex.current = graphs[graphs.length - 1].getCurrentNodeIndex();
         setActiveSegmentPercentage(100 - 10 * (steps.length - 1));
       }
     };

package/dist/components/TabPage.js

@@ -39,7 +39,7 @@ const TabPage = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
   let componentKey = 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({
-      width: "inherit"
+      width: "100%"
     }, props.config)
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, _extends({
     component: "div",

package/dist/components/TabPanel.js

@@ -86,7 +86,8 @@ const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
     return /*#__PURE__*/_react.default.createElement("div", {
       style: {
         margin: '16px'
-      }
+      },
+      className: 'tab-page-container'
     }, page.components.map((component, index) => {
       return renderTabPageComponent(component, page.id, pageIndex + index);
     }));

package/dist/components/TitleBar.js

@@ -31,7 +31,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
         actions: [{
           actionType: 'script',
           script: {
-            lines: [`if($event.data.name === 'title'){`, `   let component = @#{${props.config.id}};`, `   if(component) {`, `      component.title = $event.data.value`, `   }`, '}']
+            lines: [`if($event.data.name === 'title-${props.viewId}'){`, `   let component = @#{${props.config.id}};`, `   if(component) {`, `      component.title = $event.data.value`, `   }`, '}']
           }
         }]
       };

package/dist/components/Toolbar.js

@@ -21,6 +21,7 @@ var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAway
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _MenuItem = _interopRequireDefault(require("./menu/MenuItem"));
+require("./Button.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -137,15 +138,11 @@ const Toolbar = props => {
     setOpen(prevOpen => !prevOpen);
   };
   function getDefaultStyle(item) {
-    return {
+    return _Utils.default.mergeStyles({
       height: item.type === 'toolbarSpacer' ? item.attributes?.style?.height ? item.attributes?.style?.height : '100%' : null,
       width: item.type === 'toolbarSpacer' ? '2' ? item.attributes?.style?.width : '100%' : null,
-      minWidth: item.type === 'toolbarSpacer' ? '2' : _Utils.default.isNull(item.attributes) || _Utils.default.isNull(item.attributes['label']) ? '60px' : null,
-      marginLeft: item.type === 'toolbarSpacer' ? '4px' : 0,
-      marginRight: 4,
-      marginBottom: 4,
-      marginTop: item.type === 'toolbarSpacer' ? '6px' : 0
-    };
+      minWidth: item.type === 'toolbarSpacer' ? '2' : _Utils.default.isNull(item.attributes) || _Utils.default.isNull(item.attributes['label']) ? '0px' : null
+    }, item);
   }
   function renderItem(item, defaultId) {
     if (_Utils.default.isNull(item.id)) {
@@ -326,6 +323,7 @@ const Toolbar = props => {
   }
   return visible && /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
+    className: 'oui-toolbar',
     style: _Utils.default.mergeStyles({
       borderBottom: '1px solid #e2e2e2',
       padding: '4px 0 0 0',

package/dist/components/WordDocumentViewer.js

@@ -12,12 +12,16 @@ require("./DocumentTemplateDesignerComponent.css");
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 var _ej2Base = require("@syncfusion/ej2-base");
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
+var _LottieIcon = _interopRequireDefault(require("./LottieIcon"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 (0, _ej2Base.registerLicense)('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5adkJiWHtWdXBXT2Je');
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
 const WordDocumentViewer = props => {
   const [container, setContainer] = _react.default.useState(null);
   const [items, setItems] = _react.default.useState(null);
+  const [height, setHeight] = _react.default.useState(0);
+  const [width, setWidth] = _react.default.useState(0);
+  const [visible, setVisible] = _react.default.useState(false);
   const [json, setJson] = _react.default.useState(null);
   const [errorMessage, setErrorMessage] = _react.default.useState(null);
 
@@ -41,6 +45,12 @@ const WordDocumentViewer = props => {
   _react.default.useEffect(() => {
     props.valueHandler.api = api();
   });
+  _react.default.useLayoutEffect(() => {
+    const timer = window.setTimeout(() => {
+      setVisible(true);
+    }, 1_000);
+    return () => window.clearTimeout(timer);
+  }, []);
   _react.default.useEffect(() => {
     let toolbarItems = ["Undo", "Redo", "Separator", {
       tooltipText: 'Bold',
@@ -133,12 +143,23 @@ const WordDocumentViewer = props => {
     }
   }, [json, container]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col no-margin no-padding',
+    className: 'no-margin no-padding',
     style: {
       height: '100%'
     },
     id: 'parent-container'
-  }, errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+  }, !visible && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%',
+      width: '100%',
+      flexWrap: 'wrap',
+      display: 'flex',
+      justifyContent: 'center',
+      alignContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
+    id: 'waiting-sm'
+  })), errorMessage && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       padding: '0 32px 0 32px',
       maxHeight: '64px'
@@ -155,7 +176,7 @@ const WordDocumentViewer = props => {
     style: {
       color: 'rgba(255, 255, 255, 0.8)'
     }
-  }, errorMessage))), items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+  }, errorMessage))), visible && items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "container",
     height: '690px',
     ref: scope => {
@@ -168,11 +189,12 @@ const WordDocumentViewer = props => {
       }
     },
     toolbarItems: items,
+    restrictEditing: props.readOnly,
     showPropertiesPane: false,
     enableTrackChanges: true,
     serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
     enableToolbar: !(props.readOnly || props.commentsOnly)
-  }), items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+  }), visible && items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: "container",
     height: '690px',
     ref: scope => {
@@ -185,6 +207,7 @@ const WordDocumentViewer = props => {
       }
     },
     toolbarItems: items,
+    restrictEditing: props.readOnly,
     showPropertiesPane: false,
     serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
     enableToolbar: !(props.readOnly || props.commentsOnly)

package/dist/components/customInput/File.js

@@ -64,8 +64,7 @@ const File = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwar
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-*',
     style: {
-      marginLeft: '0',
-      width: '72px'
+      marginLeft: '0'
     }
   }, /*#__PURE__*/_react.default.createElement("input", {
     accept: "*/*",

package/dist/components/dashboard/SideMenuModuleDashboard.css

@@ -8,6 +8,10 @@
 
 }
 
+.side-menu-module-dashboard .viewport {
+    width: calc(100% - 448px) !important;
+}
+
 .side-menu-module-dashboard .sidebar {
     height: 100vh !important;
     z-index: 10000 !important;

package/dist/components/dashboard/components/Header.js

@@ -60,7 +60,7 @@ const Header = props => {
     }
   };
   _react.default.useEffect(() => {
-    let listener = new _EventListener.default(null, "dashboard", "applicationManager", _EventType.default.APPLICATION_CONTEXT_CHANGE, null, e => {
+    let listener = new _EventListener.default(null, "dashboard", "applicationManager", "dashboard", _EventType.default.APPLICATION_CONTEXT_CHANGE, null, e => {
       if (e.data.property.name === 'title') {
         setTitle(e.data.property.value);
       }

package/dist/components/form/CurrencyField.js

@@ -18,7 +18,7 @@ const CurrencyFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_reac
   const base = props.base;
   const width = !_Utils.default.isNull(props.config.attributes?.style?.width) ? props.config.attributes.style.width : "100%";
   const maxWidth = !_Utils.default.isNull(props.config.attributes?.style?.maxWidth) ? props.config.attributes.style.maxWidth : null;
-  const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "240px";
+  const minWidth = !_Utils.default.isNull(props.config.attributes?.style?.minWidth) ? props.config.attributes.style.minWidth : "232px";
   const height = !_Utils.default.isNull(props.config.attributes?.style?.height) ? props.config.attributes.style.height : null;
   const currency = !_Utils.default.isNull(props.config.attributes?.currency) ? props.config.attributes.currency : "ZAR";
   const currencySymbol = !_Utils.default.isNull(props.config.attributes?.currencySymbol) ? props.config.attributes.currencySymbol : "R";

package/dist/components/form/DatePicker.js

@@ -88,7 +88,7 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/
     disabled: base.disabled,
     label: props.config.attributes['label'],
     value: base.value ? (0, _dayjs.default)(base.value) : null,
-    className: props.className,
+    className: 'oui-form-item' + props.className ? ' ' + props.className : '',
     onChange: newValue => handleDateChange(newValue.toDate()),
     error: base.hasError,
     format: "DD/MM/YYYY",

package/dist/components/form/FieldSet.js

@@ -504,7 +504,7 @@ const FieldSet = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
         let style = field.attributes?.containerStyle ? _Utils.default.mergeObjects(field.attributes?.containerStyle, containerStyle) : containerStyle;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: (i + 1) * index,
-          className: "col-*-*",
+          className: "col-*-* oui-form-item-container",
           style: style
         }, renderComponent(field));
       }));

package/dist/components/form/Form.css

@@ -23,6 +23,14 @@
     width: 100%;
 }
 
+.oui-form-item-container .ouiTable .oui-table-row {
+    border-bottom: 1px solid #ddd;
+}
+
+.oui-form-item-container .ouiTable tbody > tr.oui-table-row:last-of-type {
+    border-bottom: 0;
+}
+
 .lookup-field-input input {
     width: calc(100% - 64px);
     overflow: hidden !important;

package/dist/components/form/IconField.js

@@ -7,13 +7,17 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BaseField = require("./BaseField");
 var _Icon = _interopRequireDefault(require("../Icon"));
+var _Utils = _interopRequireDefault(require("../../Utils"));
 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 IconWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    id: props.config.iconId
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.config.attributes?.label && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', ''))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: props.config.iconId,
+    color: props.config.iconColor
+  })));
 }));
 const IconField = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {

package/dist/components/form/LookupField.js

@@ -79,7 +79,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     base.handleValueChange(null);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-100 lookup row no-margin no-padding",
+    className: "w-100 lookup row no-margin no-padding oui-form-item",
     style: _Utils.default.mergeStyles({
       width: width,
       minWidth: minWidth,

package/dist/components/form/Section.js

@@ -18,6 +18,7 @@ const Section = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
   const [fieldGrid, setFieldGrid] = _react.default.useState(null);
   const [width, setWidth] = _react.default.useState(null);
   const [componentHandles] = _react.default.useState({});
+  const [visible, setVisible] = _react.default.useState(true);
   let componentKey = 0;
   _react.default.useEffect(() => {
     props.handle.api = api();
@@ -107,6 +108,10 @@ const Section = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
             componentHandle.api.refresh();
           }
         }
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+        if (!_Utils.default.isNull(parsedConfig.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
+        }
       }
     };
   };
@@ -134,7 +139,7 @@ const Section = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.for
       }));
     }));
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: width
     }

package/dist/components/form/SelectItem.js

@@ -66,6 +66,7 @@ const SelectItemComponent = props => {
     }
   }, [loadFullOptionList, props.refreshData]);
   return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    className: 'oui-form-item',
     fullWidth: true,
     margin: "dense",
     size: "small",

package/dist/components/form/TextField.js

@@ -56,6 +56,7 @@ const TextFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     rows: rows,
     disabled: base.disabled,
     size: "small",
+    className: 'oui-form-item',
     style: {
       minWidth: minWidth,
       width: width,

package/dist/components/form/TimePicker.js

@@ -47,6 +47,7 @@ const CustomTimePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/
     ampm: false,
     slotProps: {
       textField: {
+        className: 'oui-form-item',
         variant: "outlined",
         margin: "dense",
         size: "small",

package/dist/components/form/TransferList.js

@@ -102,9 +102,10 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo((props, ref) => {
     style: {
       border: `1px solid ${base.hasError ? '#f44336' : '#e1e1e1'}`,
       width: '45%',
-      minWidth: '320px',
+      minWidth: '240px',
       borderRadius: '4px'
-    }
+    },
+    className: 'oui-form-item'
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
     config: props.config.optionsGrid,
     handle: props.optionsListHandle,
@@ -144,9 +145,10 @@ const TransferListComponent = /*#__PURE__*/_react.default.memo((props, ref) => {
     style: {
       border: `1px solid ${base.hasError ? '#f44336' : '#e1e1e1'}`,
       width: '45%',
-      minWidth: '320px',
+      minWidth: '240px',
       borderRadius: '4px'
-    }
+    },
+    className: 'oui-form-item'
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
     config: props.config.selectionGrid,
     handle: props.selectionListHandle,
@@ -171,7 +173,6 @@ const TransferList = /*#__PURE__*/_react.default.memo((props, ref) => {
       component: props.handle,
       viewId: props.viewId
     }).then(result => {
-      console.log("\n\n\n\n\nRESULTS : ", result);
       setData(result);
     }).catch(e => {
       console.error(e);

package/dist/components/layout/Layout.js

@@ -32,6 +32,7 @@ var _ProgressTracker = _interopRequireDefault(require("../ProgressTracker"));
 var _Chart = _interopRequireDefault(require("../Chart"));
 var _FacialRegistration = _interopRequireDefault(require("../facialRecognition/FacialRegistration"));
 var _FacialVerification = _interopRequireDefault(require("../facialRecognition/FacialVerification"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -274,6 +275,13 @@ const Layout = props => {
             key: index,
             viewId: props.viewId
           });
+        case 'spinner':
+          return /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
         default:
           return /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
       }
@@ -307,7 +315,8 @@ const Layout = props => {
       },
       refresh() {
         if (!_Utils.default.isNull(props.config.visible)) {
-          setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
+          let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, props.config.id));
         }
       }
     };
@@ -376,7 +385,7 @@ const Layout = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
     style: getLayoutStyle(props.config, 'transparent'),
-    className: `${_Utils.default.getComponentAttribute(props.config, 'className', '') + (props.config.orientation === 'HORIZONTAL' ? ' row' : '')}`
+    className: `${_Utils.default.getComponentAttribute(props.config, 'className', 'default-oui-layout') + (props.config.orientation === 'HORIZONTAL' ? ' row' : '')}`
   }, render(props.config));
 };
 exports.Layout = Layout;

package/dist/components/layout/View.css

@@ -28,6 +28,63 @@
     justify-content: center
 }
 
+.max-h-40 {
+}
+
+/* 150% zoom res */
+@media (max-width: 1512px) and (max-height: 982px) and (min-resolution: 2dppx) {
+    .max-h-40 {
+        max-height: 150px !important;
+    }
+
+    .flex-nowrap {
+        flex-wrap: wrap !important;
+    }
+
+    .flex-child-nowrap {
+        width: 100% !important;
+    }
+
+    .view {
+        padding: 0 8px !important;
+    }
+
+    .grid-table-pagination div {
+        font-size: 12px;
+    }
+
+    .grid-table-pagination p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 12px;
+        font-size: 12px;
+        margin-top: 4px;
+    }
+
+    .tab-page-container {
+        margin: 0;
+    }
+
+    .default-oui-layout {
+        margin: 8px;
+        padding: 0 !important;
+    }
+
+    .defaultForm {
+        margin: 0;
+    }
+
+    .oui-form-item {
+        min-width: 232px !important;
+    }
+
+    .oui-form-item-container {
+        min-width: 240px !important;
+        margin: 0 4px;
+    }
+}
+
 /* Smartphones (landscape); */
 @media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
     .view {

package/dist/components/layout/ViewPort.js

@@ -41,6 +41,7 @@ const ViewPort = props => {
     console.log("LOADING VIEWPORT");
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: "viewport",
     style: {
       height: 'calc(100vh - 96px)',
       maxHeight: 'calc(100vh - 96px)',

package/dist/components/layout/Window.js

@@ -265,7 +265,10 @@ const Window = props => {
       right: 0
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'dialogHeader row'
+    className: 'dialogHeader row',
+    style: {
+      marginTop: '24px'
+    }
   }, minimizable && /*#__PURE__*/_react.default.createElement("div", null, displayState === 'MAXIMIZED' ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onClick: e => {
       minimizeView(e);

package/dist/components/layout/WindowViewPort.js

@@ -11,19 +11,29 @@ var _View = require("./View");
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Utils = _interopRequireDefault(require("../../Utils"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const WindowViewContainer = props => {
   const [view, setView] = _react.default.useState(null);
   const [pinned, setPinned] = _react.default.useState(false);
+  const [defaultDisplayState, setDefaultDisplayState] = _react.default.useState('MAXIMIZED');
   const counter = (0, _react.useRef)(0);
   function loadView(context) {
     if (context) {
       if (Object.keys(context).find(key => key === 'windowView')) {
         setView(null);
         setView(context.windowView);
-        setPinned(false);
+        if (!_Utils.default.isNull(context.pinned)) {
+          setPinned(context.pinned);
+        }
+        if (_Utils.default.isNull(context.windowView)) {
+          setPinned(false);
+        }
+        if (!_Utils.default.isNull(context.defaultDisplayState)) {
+          setDefaultDisplayState(context.defaultDisplayState);
+        }
       }
     }
   }
@@ -58,7 +68,7 @@ const WindowViewContainer = props => {
       pinnable: true,
       minimizable: false,
       open: true,
-      displayState: 'MAXIMIZED',
+      displayState: defaultDisplayState,
       leftOffset: windowLeftOffset || '344px',
       onPinned: () => {
         if (!pinned) {
@@ -71,7 +81,9 @@ const WindowViewContainer = props => {
         });
         setPinned(!pinned);
       },
-      onClose: () => {}
+      onClose: () => {
+        setPinned(false);
+      }
     }, /*#__PURE__*/_react.default.createElement(_View.View, {
       config: view.config,
       key: view.config.id,
@@ -88,7 +100,7 @@ const WindowViewContainer = props => {
         marginRight: '8px',
         position: 'absolute',
         right: 0,
-        top: 0
+        top: 16
       }
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: 'DOCK'

package/dist/components/media/ClosablePanel.css

@@ -5,7 +5,7 @@
 }
 
 .closable-panel-header {
-  height: 72px;
+  height: 64px;
   text-align: right;
   padding: 8px;
   display: inline-block;

package/dist/components/media/ToolbarButton.js

@@ -33,7 +33,8 @@ const ToolbarButton = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      width: '100%'
+      width: isVisible ? '100%' : 0,
+      minWidth: isVisible ? '100%' : 0
     }
   }, !isVisible ? /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/dist/components/media/TrainingRoom.js

@@ -65,6 +65,13 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defaul
   const [screenShared, setScreenShared] = _react.default.useState(null);
   const [startScreenSharing, setStartScreenSharing] = _react.default.useState(false);
   const [raisedHands, setRaisedHands] = (0, _react.useState)([]);
+  const api = () => {
+    return {
+      loadChats() {
+        fetchChats();
+      }
+    };
+  };
   const handler = () => {
     return {
       get id() {
@@ -234,6 +241,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defaul
   };
   (0, _react.useEffect)(() => {
     eventHandler.api = handler();
+    props.handle.api = api();
   });
   (0, _react.useEffect)(() => {
     if (props.settings) {
@@ -360,7 +368,7 @@ const TrainingRoom = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defaul
   const hangUp = () => {
     _SocketManager.default.leaveMeeting(props.calendarEvent.id);
     _ApplicationManager.default.setHasActiveMeeting(false);
-    _ApplicationManager.default.removeLoadedGraph(false);
+    _ApplicationManager.default.removeLoadedGraph('window');
     setSideBarOpen(false);
     setSideBarTab('');
   };

package/dist/components/media/VCEventType.js

@@ -46,7 +46,6 @@ class VCEventType {
   static DENIED = "DENIED";
   static JOIN_MEETING_PERMIT = "JOIN_MEETING_PERMIT";
   static RECEIVING_CALL = "RECEIVING_CALL";
-  static CALL_REJECTED = "CALL_REJECTED";
   static USERS_ONLINE = "USERS_ONLINE";
   static USER_ONLINE = "USER_ONLINE";
   static USER_OFFLINE = "USER_OFFLINE";
@@ -64,7 +63,6 @@ class VCEventType {
   static POLL_RECORDING_STATUS = "POLL_RECORDING_STATUS";
   static REQUEST_TO_JOIN = "REQUEST_TO_JOIN";
   static REQUEST_TO_JOIN_MEETING = "REQUEST_TO_JOIN_MEETING";
-  static AUDIO_VISUAL_SETTINGS_CHANGED = "AUDIO_VISUAL_SETTINGS_CHANGED";
   static CREATE_WEBRTC_TRANSPORT = "CREATE_WEBRTC_TRANSPORT";
   static CONNECT_TRANSPORT = "CONNECT_TRANSPORT";
   static CLOSE_ALL_USER_TRANSPORTS = "CLOSE_ALL_USER_TRANSPORTS";
@@ -80,7 +78,6 @@ class VCEventType {
   static STOP_RECORDING = "STOP_RECORDING";
   static UPDATE_CALENDAR = "UPDATE_CALENDAR";
   static REQUEST_TO_JOIN_MEETING_ANSWERED = "REQUEST_TO_JOIN_MEETING_ANSWERED";
-  static PEER_DISCONNECT = "PEER_DISCONNECT";
   static CONSUMER_CLOSED = "CONSUMER_CLOSED";
   static CANCEL_SCREEN_SHARE = "CANCEL_SCREEN_SHARE";
   static SHARING_STOPPED = "SHARING_STOPPED";