@agilemotion/oui-react-js 1.8.30 → 1.8.32

package/dist/ViewContext.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewContext = exports.SYSTEM_EVENT = exports.LEGEND_ARROW_ICON = void 0;
+var _Observable = _interopRequireDefault(require("./event/Observable"));
+var _Event = _interopRequireDefault(require("./event/Event"));
+var _EventType = _interopRequireDefault(require("./event/EventType"));
+var _Utils = _interopRequireDefault(require("./Utils"));
+var _DynamicJS = _interopRequireWildcard(require("./DynamicJS"));
+var _Graph = _interopRequireDefault(require("./components/Graph"));
+var _ApplicationManager = _interopRequireDefault(require("./ApplicationManager"));
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SYSTEM_EVENT = exports.SYSTEM_EVENT = 'SYSTEM_EVENT';
+const LEGEND_ARROW_ICON = exports.LEGEND_ARROW_ICON = ` <i class=\"fa fa-arrow-right fa-xs\" aria-hidden=\"true\" style='color:__COLOR__'></i> `;
+class ViewContext {
+  constructor(id) {
+    this.views = [];
+    this.props = {};
+    this.navHistory = [];
+    this.graphs = [];
+    this.id = id;
+  }
+
+  /**
+   * update appbar title
+   *
+   * @param viewId
+   * @param title
+   */
+  updateAppBarTitle = (viewId, title) => {
+    let view = this.getView(viewId);
+    if (!view) {
+      return;
+    }
+    let legendIconArrow = LEGEND_ARROW_ICON.replace('__COLOR__', this.props.secondaryColor);
+    let titleValue = '';
+    if (!title.match(_DynamicJS.TEMPLATE_REGEX)) {
+      titleValue = title;
+    } else {
+      titleValue = _DynamicJS.default.executeScript(viewId + 'Title', title, viewId);
+    }
+    for (const navHistoryElement of this.navHistory) {
+      if (navHistoryElement.viewId === viewId) {
+        navHistoryElement.title = titleValue;
+      }
+    }
+    let legendValue = '<span>';
+    let counter = 0;
+    for (const navHistoryElement of this.navHistory) {
+      legendValue += `${navHistoryElement.title}`;
+      if (counter++ < this.navHistory.length - 1) {
+        legendValue += legendIconArrow;
+      }
+    }
+    legendValue += '</span>';
+    this.props.appBarTitle = legendValue;
+    let property = {};
+    property.name = 'title-' + viewId;
+    property.value = this.props.appBarTitle;
+
+    // When we introduce the view manager, it must become the event source instead of applicationManager
+    let event = new _Event.default(_ApplicationManager.default, SYSTEM_EVENT, property);
+    _Observable.default.fireEvent(_EventType.default.APPLICATION_CONTEXT_CHANGE, event);
+    if (this.graphs.length > 0) {
+      property = {};
+      property.name = 'stepperTitle';
+      let event = new _Event.default(_ApplicationManager.default, SYSTEM_EVENT, property);
+      _Observable.default.fireEvent(_EventType.default.APPLICATION_CONTEXT_CHANGE, event);
+    }
+  };
+
+  /**
+   * clears all views
+   *
+   */
+  clear = () => {
+    this.views.splice(0, this.views.length);
+  };
+
+  /**
+   * add view configuration
+   *
+   * @param view the listener to be added
+   * @param path
+   * @param forward
+   */
+  addView = (view, path, forward) => {
+    let topView = this.getTopView();
+    if (topView) {
+      this.closeView(topView.config.id, forward);
+    }
+    if (view.parent) {
+      this.navHistory.splice(0, this.navHistory.length);
+      for (const contextView of this.views) {
+        if (!_Utils.default.isNull(contextView) && !_Utils.default.isNull(contextView.handle.api)) {
+          this.closeView(contextView.handle.api.id, forward);
+        }
+      }
+    }
+    if (forward || view.parent) {
+      let historyElement = {};
+      historyElement.viewId = view.config.id;
+      historyElement.parent = view.parent;
+      historyElement.graphId = view.graphId;
+      historyElement.path = path;
+      this.navHistory.push(historyElement);
+    }
+    this.views.push(view);
+  };
+
+  /**
+   * closes the current view
+   *
+   */
+  closeAllViews = () => {
+    for (const view of this.views) {
+      this.closeView(view.config.id, false);
+    }
+  };
+
+  /**
+   * get all view
+   *
+   */
+  getViews = () => {
+    return this.views;
+  };
+
+  /**
+   * get all graphs
+   *
+   */
+  getGraphs = () => {
+    return this.graphs;
+  };
+
+  /**
+   * closes the specified view
+   *
+   * @param viewId the listener to be added
+   * @param forward
+   */
+  closeView = (viewId, forward) => {
+    let view = this.getView(viewId);
+    if (view) {
+      if (!_Utils.default.isNull(view) && !_Utils.default.isNull(view.handle.api)) {
+        _Observable.default.clearEventListeners(viewId);
+        let index = this.views.findIndex(v => v.handle.api.id === viewId);
+        if (index >= 0) {
+          this.views.splice(index, 1);
+          if (!forward) {
+            let viewIndex = this.navHistory.findIndex(h => h.viewId === viewId);
+            if (viewIndex >= 0) {
+              this.navHistory.splice(viewIndex, 1);
+            }
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * Returns a view configuration with a particular id
+   *
+   */
+  getView = id => {
+    for (const view of this.views) {
+      if (id === view.config.id) {
+        return view;
+      }
+    }
+    return null;
+  };
+  getTopView() {
+    if (this.views.length > 0) {
+      return this.views[this.views.length - 1];
+    }
+    return null;
+  }
+  signalGraph(id, event) {
+    if (this.graphs.length > 0) {
+      let graphToSignal = this.graphs[this.graphs.length - 1];
+      for (const graph of this.graphs) {
+        if (id === graph.id) {
+          graphToSignal = graph;
+          break;
+        }
+      }
+      graphToSignal.signal(event);
+    }
+  }
+  getUserDetails() {
+    return this.props.userDetails;
+  }
+  removeLoadedGraph() {
+    if (this.graphs.length > 0) {
+      let graph = this.graphs[this.graphs.length - 1];
+      let graphViews = this.views.filter(view => view.graphId === graph.id);
+      for (const graphView of graphViews) {
+        this.closeView(graphView.config.id, false);
+      }
+      this.graphs.splice(0, this.graphs.length);
+      let graphHistory = this.navHistory.filter(view => view.graphId === graph.id);
+      for (const graphHistoryElement of graphHistory) {
+        this.navHistory.splice(this.navHistory.findIndex(e => e === graphHistoryElement), 1);
+      }
+      return graph;
+    }
+  }
+  loadGraph(isParent, config, parameterValues) {
+    if (isParent) {
+      this.navHistory.splice(0, this.navHistory.length);
+      for (const contextView of this.views) {
+        this.closeView(contextView.handle.api.id, false);
+      }
+    }
+    let graph = new _Graph.default(_Utils.default.parseConfig(config));
+    this.graphs.push(graph);
+    for (const parameterValue of parameterValues) {
+      graph.model[parameterValue.name] = parameterValue.value;
+    }
+    graph.init();
+  }
+
+  /**
+   *
+   */
+  getPreviousHistoryElement = () => {
+    if (this.navHistory.length > 1) {
+      return this.navHistory[this.navHistory.length - 2];
+    }
+    return null;
+  };
+}
+exports.ViewContext = ViewContext;

package/dist/components/AlertBar.js

@@ -20,7 +20,7 @@ const AlertBar = /*#__PURE__*/_react.default.memo(props => {
     let defaultAction = {
       actionType: 'script',
       script: {
-        lines: [`@#{${props.config.id}}.message = $event.data.message`, `@#{${props.config.id}}.variant = $event.data.messageType === 'ERROR' ? 'danger' : $event.data.messageType === 'WARN' ? 'warning' : $event.data.messageType === 'SUCCESS' ? 'success' : 'info' `]
+        lines: [`if('${props.viewId}' === $event.viewId) {`, `   @#{${props.config.id}}.message = $event.data.message`, `   @#{${props.config.id}}.variant = $event.data.messageType === 'ERROR' ? 'danger' : $event.data.messageType === 'WARN' ? 'warning' : $event.data.messageType === 'SUCCESS' ? 'success' : 'info'`, `}`]
       }
     };
     if (_Utils.default.isNull(eventHandlingConfig.subscriptions)) {

package/dist/components/Button.css

@@ -0,0 +1,3 @@
+.oui button {
+  margin-right: 4px !important;
+}

package/dist/components/Button.js

@@ -15,6 +15,7 @@ var _Event = _interopRequireDefault(require("../event/Event"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
+require("./Button.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   root: {
@@ -49,7 +50,8 @@ const Button = props => {
   }, [config]);
   _react.default.useEffect(() => {
     try {
-      let label = _DynamicJS.default.executeScript(props.config.id + 'label', _Utils.default.getComponentAttribute(props.config, 'label', ''), props.config.viewId, true, null, null, false);
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+      let label = _DynamicJS.default.executeScript(parsedConfig.id + 'label', _Utils.default.getComponentAttribute(parsedConfig, 'label', ''), parsedConfig.viewId, true, null, null, false);
       setLabel(label);
     } catch (e) {
       setLabel(_Utils.default.getComponentAttribute(props.config, 'label', ''));
@@ -93,7 +95,7 @@ const Button = props => {
     };
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.root,
+    className: `${classes.root} oui button`,
     style: {
       width: props.attributes?.style?.width,
       display: visible ? 'block' : 'none'
@@ -118,7 +120,7 @@ const Button = props => {
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: props.config.icon,
-    color: props.config.attributes?.style?.color ? props.config.attributes?.style?.color : 'white'
+    color: props.config.attributes?.style?.color ? props.config.attributes?.style?.color : _ApplicationManager.default.getApplicationSecondaryColor()
   })) : /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: color === 'secondary' || color === 'primary' ? 'contained' : 'text',
     "aria-controls": "menu-list-grow",

package/dist/components/DataGrid.css

@@ -82,6 +82,10 @@ table.responsive-table thead {
     overflow: hidden;
 }
 
+.ouiTable .oui-toolbar {
+    border-bottom: unset !important;
+}
+
 .cellError, .editCellError {
     border: 1px solid red !important;
     border-radius: 4px;

package/dist/components/DataGrid.js

@@ -273,8 +273,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         if (filterHandle && filterHandle.api) {
           filterHandle.api.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);
+        if (!_Utils.default.isNull(parsedConfig.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
         }
       },
       set visible(visible) {
@@ -468,7 +469,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     let isEditable = false;
     let visibleColumnCount = 0;
     for (const column of config.columns) {
-      if (!_Utils.default.getComponentAttribute(column, 'hidden', false)) {
+      let hidden = _Utils.default.getComponentAttribute(column, 'hidden', false);
+      if (!_Utils.default.evaluateBooleanExpression(hidden, props.config.id)) {
         visibleColumnCount++;
       }
     }
@@ -745,6 +747,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     return editorHandles[column.id + "_editor"];
   }
   return visible && /*#__PURE__*/_react.default.createElement("div", {
+    id: props.config.id,
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
       margin: '0',
       border: '1px solid #e2e2e2',
@@ -879,7 +882,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       inputProps: {
         'aria-labelledby': labelId
       }
-    })) : null, config.columns.map(column => column.attributes['hidden'] === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+    })) : null, config.columns.map(column => _Utils.default.evaluateBooleanExpression(column.attributes['hidden'], props.config.id) === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       style: {
         padding: 0,
         width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
@@ -924,6 +927,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       criteria: criteria
     }))));
   })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+    className: "grid-table-pagination",
     rowsPerPageOptions: rowsPerPageOptions,
     component: "div",
     count: totalNumberOfRows,

package/dist/components/DataGridFilter.js

@@ -32,7 +32,7 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     if (!_Utils.default.isNull(props.config)) {
       let visibleCols = 0;
       for (const column of config.columns) {
-        let attribute = column.attributes['hidden'];
+        let attribute = _Utils.default.evaluateBooleanExpression(column.attributes['hidden'], props.config.id);
         if (_Utils.default.isNull(attribute) || attribute === false) {
           visibleCols++;
         }
@@ -242,7 +242,7 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     style: {
       width: column.width
     }
-  }, !column.attributes['hidden'] ? column.attributes['filterable'] === true ? /*#__PURE__*/_react.default.createElement("div", {
+  }, !_Utils.default.evaluateBooleanExpression(column.attributes['hidden'], props.config.id) ? column.attributes['filterable'] === true ? /*#__PURE__*/_react.default.createElement("div", {
     className: (!_Utils.default.isNull(props.filterWrapperClass) ? props.filterWrapperClass : 'filterWraper') + ' row no-margin no-padding'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col no-margin no-padding'

package/dist/components/DataGridHeading.js

@@ -70,7 +70,7 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     inputProps: {
       'aria-label': 'select all'
     }
-  })) : null, props.config.columns.map(column => column.attributes['hidden'] === true ? null : /*#__PURE__*/_react.default.createElement(_DataGridColumn.default, {
+  })) : null, props.config.columns.map(column => _Utils.default.evaluateBooleanExpression(column.attributes['hidden'], props.config.id) === true ? null : /*#__PURE__*/_react.default.createElement(_DataGridColumn.default, {
     key: columnCounter++,
     config: column,
     handle: createColumnHandle(),

package/dist/components/DocumentViewer.js

@@ -22,6 +22,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
   const [label, setLabel] = _react.default.useState(null);
   const [hasLoadingError, setHasLoadingError] = _react.default.useState(false);
   const [value, setValue] = _react.default.useState(null);
+  const [visible, setVisible] = _react.default.useState(false);
   const wordEditorValueHandler = {};
   _react.default.useEffect(() => {
     props.handle.api = api();
@@ -34,6 +35,9 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     setLabel(_DynamicJS.default.evaluateExpression(label));
     let event = new _Event.default(props.handle, props.viewId, null);
     _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    if (props.config.attributes?.autoLoadData === false) {
+      setLoading(false);
+    }
   }, []);
   function doLoadData(actionConfig) {
     if (!_Utils.default.isNull(actionConfig) && !_Utils.default.isNull(actionConfig.value)) {
@@ -105,6 +109,13 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
       set label(label) {
         setLabel(label);
       },
+      refresh() {
+        if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(props.config.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(props.config.visible, props.config.id));
+        } else {
+          setVisible(true);
+        }
+      },
       getDocumentValue: async () => {
         if (wordEditorValueHandler.api) {
           return await wordEditorValueHandler.api.getValue();
@@ -113,13 +124,14 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
       }
     };
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({}, props.config)
   }, props.config.attributes?.label && /*#__PURE__*/_react.default.createElement("div", {
-    style: _Utils.default.mergeObjects({
+    style: _Utils.default.mergeObjects(props.config.attributes?.labelStyle, {
       fontSize: '20px',
       color: '#1d253b'
-    }, props.config.attributes?.labelStyle)
+    })
   }, label), loading && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginTop: '16px'
@@ -140,13 +152,13 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
       let event = new _Event.default(props.handle, props.viewId, null);
       _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
     },
-    allowUnresolvedChanges: props.config.allowUnresolvedChanges,
-    disableRejectChanges: props.config.disableRejectChanges,
-    disableAcceptChanges: props.config.disableAcceptChanges,
-    readOnly: props.config.readOnly,
-    commentsOnly: props.config.commentsOnly,
-    enableUpload: props.config.enableUpload,
-    trackChanges: props.config.trackChanges
+    allowUnresolvedChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.allowUnresolvedChanges, props.config.id),
+    disableRejectChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.disableRejectChanges, props.config.id),
+    disableAcceptChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.disableAcceptChanges, props.config.id),
+    readOnly: _Utils.default.evaluateBooleanExpression(parsedConfig.readOnly, props.config.id),
+    commentsOnly: _Utils.default.evaluateBooleanExpression(parsedConfig.commentsOnly, props.config.id),
+    enableUpload: _Utils.default.evaluateBooleanExpression(parsedConfig.enableUpload, props.config.id),
+    trackChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.trackChanges, props.config.id)
   }));
 }));
 var _default = exports.default = DocumentViewer;

package/dist/components/Graph.js

@@ -57,6 +57,8 @@ class Graph {
     if (root.action.actionType === 'route') {
       root.action.window = this.config.isWindow;
       root.action.graphId = this.config.id;
+      root.action.pinned = this.config.pinned;
+      root.action.defaultDisplayState = this.config.defaultDisplayState;
     }
     if (root.onStart) {
       for (const action of root.onStart.actions) {

package/dist/components/HtmlPanel.js

@@ -85,7 +85,6 @@ const HtmlPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       },
       loadData: (actionConfig, event) => {
         if (actionConfig && actionConfig.value) {
-          console.log("\n\n\n\n\n HTML PANEL : ", actionConfig.value);
           let data = _ApplicationManager.default.resolveExpressionValue(actionConfig.value, event?.data);
           console.log("DATA : ", data);
           let templateScript = Handlebars.compile(template);

package/dist/components/Icon.js

@@ -44,6 +44,10 @@ var _WarningRounded = _interopRequireDefault(require("@mui/icons-material/Warnin
 var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
 var _Visibility = _interopRequireDefault(require("@mui/icons-material/Visibility"));
+var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
+var _Phone = _interopRequireDefault(require("@mui/icons-material/Phone"));
+var _Cancel = _interopRequireDefault(require("@mui/icons-material/Cancel"));
+var _colors = require("@mui/material/colors");
 var _iconsMaterial = require("@mui/icons-material");
 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; }
@@ -239,6 +243,24 @@ class Icon extends _react.Component {
           color: this.props.color
         }
       });
+    } else if (this.props.id === 'DONE') {
+      return /*#__PURE__*/_react.default.createElement(_Done.default, {
+        style: {
+          color: '#2e7d32'
+        }
+      });
+    } else if (this.props.id === 'CANCEL') {
+      return /*#__PURE__*/_react.default.createElement(_Close.default, {
+        sx: {
+          color: _colors.red[500]
+        }
+      });
+    } else if (this.props.id === 'PHONE') {
+      return /*#__PURE__*/_react.default.createElement(_Phone.default, {
+        style: {
+          color: '#2e7d32'
+        }
+      });
     }
     return null;
   }

package/dist/components/LottieIcon.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const LottieIcon = props => {
   if (props.id === 'waiting-sm') {
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactLottie.default, {
+    return /*#__PURE__*/_react.default.createElement(_reactLottie.default, {
       options: {
         loop: true,
         autoplay: true,
@@ -30,27 +30,27 @@ const LottieIcon = props => {
       },
       height: 80,
       width: 80
-    }));
+    });
   }
 
   /*if (props.id === 'call-loading') {
-     return (
-       <div>
-         <Lottie
-           options={{
-             loop: true,
-             autoplay: true,
-             animationData: callLoading,
-             rendererSettings: {
-               preserveAspectRatio: "xMidYMid slice"
-             }
-           }}
-           height={40}
-           width={40}
-         />
-       </div>
-     );
-   }*/
+  return (
+    <div>
+      <Lottie
+        options={{
+          loop: true,
+          autoplay: true,
+          animationData: callLoading,
+          rendererSettings: {
+            preserveAspectRatio: "xMidYMid slice"
+          }
+        }}
+        height={40}
+        width={40}
+      />
+    </div>
+  );
+  }*/
 
   if (props.id === 'waiting') {
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactLottie.default, {

package/dist/components/SocketManager.js

@@ -11,6 +11,7 @@ var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _VCEventManager = _interopRequireDefault(require("./media/VCEventManager"));
 var _Event = _interopRequireDefault(require("../event/Event"));
 var _VCEventType = require("./media/VCEventType");
+var _Observable = _interopRequireDefault(require("../event/Observable"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class SocketManager {
   constructor() {
@@ -62,6 +63,8 @@ class SocketManager {
             socket: this.socket,
             payload: payload
           });
+          let event = new _Event.default(_ApplicationManager.default, 'SYSTEM_EVENT', payload);
+          _Observable.default.fireEvent(value, event);
         }
       });
     }
@@ -120,6 +123,7 @@ class SocketManager {
         meetingId: meetingId
       }).catch(error => {});
     }
+    _ApplicationManager.default.setHasActiveMeeting(false);
   };
   endSession = meetingId => {
     if (this.socket) {
@@ -133,6 +137,7 @@ class SocketManager {
         }).catch(error => {});
       }).catch(error => {});
     }
+    _ApplicationManager.default.setHasActiveMeeting(false);
   };
   createEvent() {
     let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;

package/dist/components/Spinner.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _Event = _interopRequireDefault(require("../event/Event"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _LottieIcon = _interopRequireDefault(require("./LottieIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Spinner = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [visible, setVisible] = _react.default.useState(true);
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+    _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
+    props.handle.api.refresh();
+    return () => {
+      _Observable.default.clearComponentEventListeners(props.handle);
+    };
+  }, []);
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      loadData: (actionConfig, event) => {},
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+        if (!_Utils.default.isNull(props.config) && !_Utils.default.isNull(parsedConfig.visible)) {
+          setVisible(_Utils.default.evaluateBooleanExpression(parsedConfig.visible, parsedConfig.id));
+        } else {
+          setVisible(true);
+        }
+      },
+      getChildren: () => {
+        return [];
+      },
+      set visible(visible) {
+        setVisible(visible);
+      }
+    };
+  };
+  return visible && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({}, props.config)
+  }, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement(_LottieIcon.default, {
+    id: props.config.icon
+  }) : null);
+}));
+var _default = exports.default = Spinner;