@agilemotion/oui-react-js 1.8.48 → 1.8.50

package/dist/ViewContext.js

@@ -183,14 +183,19 @@ class ViewContext {
   }
   signalGraph(id, event) {
     if (this.graphs.length > 0) {
-      let graphToSignal = this.graphs[this.graphs.length - 1];
+      let graphToSignal = null;
       for (const graph of this.graphs) {
         if (id === graph.id) {
           graphToSignal = graph;
           break;
         }
       }
-      graphToSignal.signal(event);
+      if (!graphToSignal && _Utils.default.isNull(id)) {
+        graphToSignal = this.graphs[this.graphs.length - 1];
+      }
+      if (graphToSignal) {
+        graphToSignal.signal(event);
+      }
     }
   }
   getUserDetails() {

package/dist/components/DocumentViewer.js

@@ -170,6 +170,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     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),
+    height: parsedConfig.attributes?.containerHeight,
     id: props.config.id
   })));
 }));

package/dist/components/TabPanel.bck.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _TabPage = _interopRequireDefault(require("./TabPage"));
+var _Section = _interopRequireDefault(require("./form/Section"));
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _Layout = require("./layout/Layout");
+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 a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`
+  };
+}
+const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [tabValue, setTabValue] = _react.default.useState(0);
+  const [errors, setErrors] = _react.default.useState({});
+  const [visibleTabPages, setVisibleTabPages] = _react.default.useState(null);
+  const [componentHandles] = _react.default.useState({});
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+  const createComponentHandle = component => {
+    if (_Utils.default.isNull(componentHandles[component.id])) {
+      let handle = {};
+      componentHandles[component.id] = handle;
+      return handle;
+    }
+    return componentHandles[component.id];
+  };
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.form)) {
+      props.form().setContainerErrorHandler(containerErrors => {
+        let shouldRefresh = false;
+        let properties = Object.getOwnPropertyNames(containerErrors);
+        for (const property of properties) {
+          if (errors[property] !== containerErrors[property]) {
+            shouldRefresh = true;
+            break;
+          }
+        }
+        if (_ApplicationManager.default.isFormMarkersEnabled() && shouldRefresh) {
+          setErrors(JSON.parse(JSON.stringify(containerErrors)));
+        }
+      });
+    }
+    if (props.config.tabPages) {
+      let allVisibleTabPages = [];
+      for (const page of props.config.tabPages) {
+        if (_Utils.default.isNull(page.id)) {
+          page.id = index + '-tab-page';
+        }
+        let parsedConfig = _Utils.default.parseConfig(page, props.viewId);
+        let visible = _Utils.default.isNull(parsedConfig.visible) || _Utils.default.evaluateBooleanExpression(parsedConfig.visible, page.id);
+        if (visible) {
+          allVisibleTabPages.push(page);
+        }
+      }
+      setVisibleTabPages(allVisibleTabPages);
+    }
+  }, []);
+  function renderTabPageComponent(component, tabId, index) {
+    if (_Utils.default.isNull(component.id)) {
+      component.id = index + '-tab-content';
+    }
+    return component.type === 'formSection' ? /*#__PURE__*/_react.default.createElement(_Section.default, {
+      keyHandler: props.keyHandler,
+      key: index,
+      config: component,
+      handle: createComponentHandle(component),
+      form: props.form,
+      parentId: tabId,
+      viewId: props.viewId,
+      values: props.values
+    }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      key: index,
+      viewId: props.viewId
+    }) : component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+      config: component,
+      handle: createComponentHandle(component),
+      key: index,
+      viewId: props.viewId
+    }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
+  }
+  function renderPage(page, pageIndex) {
+    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);
+    }));
+  }
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      getChildren: () => {
+        let children = [];
+        let properties = Object.getOwnPropertyNames(componentHandles);
+        for (const property of properties) {
+          let componentHandle = componentHandles[property];
+          children.push(componentHandle);
+          if (!_Utils.default.isNull(componentHandle.api.getChildren)) {
+            for (const child of componentHandle.api.getChildren()) {
+              children.push(child);
+            }
+          }
+        }
+        return children;
+      },
+      set value(value) {
+        setTabValue(value);
+      },
+      get value() {
+        return tabValue;
+      },
+      setPageHasError: (pageId, hasError) => {
+        setErrors({
+          ...errors,
+          [pageId]: hasError
+        });
+      },
+      clearErrors: () => {
+        setErrors({});
+      }
+    };
+  };
+  return !_Utils.default.isNull(visibleTabPages) && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: '100%'
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
+    position: "static",
+    color: "default",
+    style: {
+      background: 'transparent',
+      boxShadow: 'none',
+      borderBottom: '1px solid #d1d1d1'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    value: tabValue,
+    onChange: handleTabChange,
+    variant: "scrollable" // enables horizontal scroll
+    ,
+    scrollButtons: "auto" // shows arrows when needed
+    ,
+    allowScrollButtonsMobile: true // show arrows on mobile too
+    ,
+    textColor: "primary",
+    indicatorColor: "primary",
+    "aria-label": "tabs",
+    sx: {
+      // optional: reduce default min width so more tabs fit
+      '& .MuiTab-root': {
+        minWidth: 120
+      }
+    }
+  }, visibleTabPages?.length > 0 ? visibleTabPages.map((page, index) => /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
+    key: index,
+    label: page.attributes['label'],
+    wrapped: true // allow multi-line label
+  }, a11yProps(index), {
+    sx: {
+      maxWidth: 240,
+      // constrain so wrapping can occur
+      whiteSpace: 'normal',
+      // allow wrap
+      wordBreak: 'break-word',
+      // break long words
+      textTransform: 'uppercase',
+      // keep original casing
+      color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : undefined
+    }
+  }))) : null)), visibleTabPages.length > 0 ? visibleTabPages.map((page, index) => {
+    return /*#__PURE__*/_react.default.createElement(_TabPage.default, {
+      value: tabValue,
+      key: index,
+      index: index,
+      config: page
+    }, renderPage(page, index));
+  }) : null);
+}));
+var _default = exports.default = TabPanel;

package/dist/components/Toolbar.js

@@ -13,8 +13,6 @@ var _Button = _interopRequireDefault(require("./Button"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _Icon = _interopRequireDefault(require("./Icon"));
 var _ToolbarButton = _interopRequireDefault(require("./media/ToolbarButton"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
@@ -274,21 +272,7 @@ const Toolbar = props => {
         display: 'flex',
         alignItems: 'center'
       }
-    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-      title: "More"
-    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-      style: {
-        marginRight: '4px',
-        width: '20px',
-        height: '20px'
-      },
-      ref: anchorRef,
-      "aria-controls": "menu-list-grow",
-      "aria-haspopup": "true",
-      onClick: handleToggle
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      id: 'MORE'
-    }))))), anchorRef.current && /*#__PURE__*/_react.default.createElement(_Popper.default, {
+    })), anchorRef.current && /*#__PURE__*/_react.default.createElement(_Popper.default, {
       open: open,
       anchorEl: anchorRef.current,
       keepMounted: true,

package/dist/components/WordDocumentViewer.js

@@ -370,7 +370,7 @@ const WordDocumentViewer = props => {
     }
   }, errorMessage))), visible && items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: `${props.id}-container`,
-    height: '690px',
+    height: props.height || '1200px',
     ref: scope => {
       setContainer(scope);
     },
@@ -390,7 +390,7 @@ const WordDocumentViewer = props => {
     enableToolbar: !props.readOnly || props.commentsOnly
   }), visible && items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: `${props.id}-container`,
-    height: '690px',
+    height: props.height || '1200px',
     ref: scope => {
       setContainer(scope);
     },

package/dist/components/dashboard/FoldingSideTabDashboard.bck.js

@@ -0,0 +1,332 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _withWidth = require("material-ui/utils/withWidth");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Utils = _interopRequireDefault(require("../../Utils"));
+var _ViewPort = _interopRequireDefault(require("../layout/ViewPort"));
+var _reactRouterDom = require("react-router-dom");
+var _perfectScrollbar = _interopRequireDefault(require("perfect-scrollbar"));
+var _FoldingTabSidebar = _interopRequireDefault(require("./components/blackDashboard/sidebar/FoldingTabSidebar"));
+var _HomeNavbar = _interopRequireDefault(require("../navbars/HomeNavbar"));
+var _reactRedux = require("react-redux");
+var _DashboardStore = require("../../redux/store/DashboardStore");
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
+require("./FoldingSideTabDashboard.css");
+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); }
+let ps;
+const DATA_URL_PREFIX = 'data:image/png;base64,';
+function normalizeLogo(src) {
+  if (!src) return undefined;
+  const s = src.trim();
+  if (/^data:/i.test(s)) {
+    const dup = new RegExp(`^(${DATA_URL_PREFIX})+`, 'i');
+    return s.replace(dup, DATA_URL_PREFIX);
+  }
+  return DATA_URL_PREFIX + s;
+}
+const FoldingSideTabDashboard = props => {
+  const [navDrawerOpen, setNavDrawerOpen] = _react.default.useState(true);
+  const [loading, setLoading] = _react.default.useState(true);
+  const [activeColor, setActiveColor] = _react.default.useState('blue');
+  const [secondaryThemeColor, setSecondaryThemeColor] = _react.default.useState('');
+  const [primaryThemeColor, setPrimaryThemeColor] = _react.default.useState('');
+  const [themeTextColor, setThemeTextColor] = _react.default.useState('');
+  const [routes, setRoutes] = _react.default.useState([]);
+  const [logo, setLogo] = _react.default.useState(normalizeLogo(props.logo));
+  const [sidebarOpened, setSidebarOpened] = _react.default.useState(document.documentElement.className.indexOf('nav-open') !== -1);
+  const [sidebarMini, setSidebarMini] = _react.default.useState(true);
+  const [opacity, setOpacity] = _react.default.useState(0);
+  const [windowPinned, setWindowPinned] = _react.default.useState(false);
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const handleChangeRequestNavDrawer = () => {
+    setNavDrawerOpen(!navDrawerOpen);
+  };
+  const handleBgClick = color => {
+    setActiveColor(color);
+  };
+  _react.default.useEffect(() => {
+    if (navigator.platform.indexOf('Win') > -1) {
+      document.documentElement.classList.add('perfect-scrollbar-on');
+      document.documentElement.classList.remove('perfect-scrollbar-off');
+      let tables = document.querySelectorAll('.table-responsive');
+      for (let i = 0; i < tables.length; i++) {
+        ps = new _perfectScrollbar.default(tables[i]);
+      }
+    }
+    window.addEventListener('scroll', showNavbarButton);
+  });
+  _react.default.useEffect(() => {
+    if (props.width !== null && typeof props.width !== 'undefined') {
+      setNavDrawerOpen(props.width === _withWidth.LARGE);
+    }
+  }, [props.width]);
+  _react.default.useEffect(() => {
+    _SocketManager.default.init();
+    return () => {
+      _SocketManager.default.disconnect();
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    document.body.classList.add('white-content');
+    if (navigator.platform.indexOf('Win') > -1) {
+      //ps.destroy();
+      //document.documentElement.className.add("perfect-scrollbar-off");
+      //document.documentElement.classList.remove("perfect-scrollbar-on");
+    }
+    window.removeEventListener('scroll', showNavbarButton);
+    setActiveColor('agility');
+    setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor);
+    setPrimaryThemeColor(props.settings.systemProfileDto.firstCorporateBrandColor);
+    setThemeTextColor(props.settings.systemProfileDto.themeTextColor);
+    dispatch(_DashboardStore.actionCreators.setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor));
+    if (!_Utils.default.isNull(props.settings)) {
+      let dashboardMenu = {};
+      dashboardMenu.id = 'dashboard';
+      dashboardMenu.menus = [];
+      let myDashboardMenu = {};
+      myDashboardMenu.id = 'myDashboard';
+      myDashboardMenu.items = [];
+      myDashboardMenu.attributes = {};
+      myDashboardMenu.attributes.label = 'My Dashboards';
+      dashboardMenu.menus.push(myDashboardMenu);
+      if (!_Utils.default.isNull(props.settings.userDashboards)) {
+        for (let i = 0; i < props.settings.userDashboards.length; i++) {
+          let userDashboard = props.settings.userDashboards[i];
+          let item = {};
+          item.id = userDashboard.id;
+          item.attributes = {};
+          item.attributes.label = userDashboard.parameters.map.dashboardName;
+          myDashboardMenu.items.push(item);
+        }
+      }
+      let createNewMenu = {};
+      createNewMenu.id = 'createNew';
+      createNewMenu.items = [];
+      createNewMenu.attributes = {};
+      createNewMenu.attributes.label = 'Create New';
+      dashboardMenu.menus.push(createNewMenu);
+      if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
+        for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
+          let module = props.settings.systemProfileDto.modules[i];
+          if (!_Utils.default.isNull(module.dashBoardMenuBar)) {
+            for (let j = 0; j < module.dashBoardMenuBar.menus.length; j++) {
+              let menu = module.dashBoardMenuBar.menus[j];
+
+              // To keep the module classification, replace the line below with createNewMenu.items.push(menu)
+              createNewMenu.items = createNewMenu.items.concat(menu.items);
+            }
+          }
+        }
+      }
+      let newRoutes = [];
+      let newRoute = {};
+      if (_Utils.default.isNull(props.showDashboardMenu) || props.showDashboardMenu) {
+        newRoute.name = 'Dashboard';
+        newRoute.id = 'dashboard';
+        newRoute.icon = 'fa fa-pie-chart';
+        newRoute.layout = '/admin';
+        newRoute.level = 0;
+        newRoute.isParent = true;
+        newRoutes.push(newRoute);
+      }
+      if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
+        for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
+          let module = props.settings.systemProfileDto.modules[i];
+          let route = {};
+          route.name = module.label;
+          route.icon = module.icon;
+          route.menu = module.menu;
+          route.layout = '/admin';
+          route.level = 0;
+          if (module.menu) {
+            route.collapse = true;
+            route.state = module.name + 'Collapse';
+          }
+          newRoutes.push(route);
+        }
+      }
+      if (props.settings.settingsMenu) {
+        newRoute = {};
+        newRoute.name = 'Settings';
+        newRoute.icon = 'fa fa-cog';
+        newRoute.layout = '/admin';
+        newRoute.isParent = true;
+        newRoute.collapse = true;
+        newRoute.level = 0;
+        newRoute.menu = ''; // TODO : set menu value
+        newRoute.state = 'settingsMenuCollapse';
+        newRoutes.push(newRoute);
+      }
+      setRoutes(newRoutes);
+      props.settings.dashboardMenu = createNewMenu.items.length > 0 ? dashboardMenu : null;
+      setLoading(false);
+    }
+  }, [props.settings]);
+  const toggleSidebar = () => {
+    document.documentElement.classList.toggle('nav-open');
+    setSidebarOpened(!sidebarOpened);
+  };
+  const showNavbarButton = () => {
+    if (document.documentElement.scrollTop > 50 || document.scrollingElement.scrollTop > 50) {
+      setOpacity(1);
+    } else if (document.documentElement.scrollTop <= 50 || document.scrollingElement.scrollTop <= 50) {
+      setOpacity(0);
+    }
+  };
+  const getRoutes = routes => {
+    return routes.map((prop, key) => {
+      if (prop.collapse) {
+        return getRoutes(prop.views);
+      }
+      if (prop.layout === '/admin') {
+        return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+          path: prop.layout + prop.path,
+          component: prop.component,
+          key: key
+        });
+      } else {
+        return null;
+      }
+    });
+  };
+  const getActiveRoute = routes => {
+    let activeRoute = 'Dashboard';
+    for (let i = 0; i < routes.length; i++) {
+      if (routes[i].collapse && routes[i].views) {
+        let collapseActiveRoute = getActiveRoute(routes[i].views);
+        if (collapseActiveRoute !== activeRoute) {
+          return collapseActiveRoute;
+        }
+      } else {
+        if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
+          return routes[i].name;
+        }
+      }
+    }
+    return activeRoute;
+  };
+  const handleActiveClick = color => {
+    setActiveColor(color);
+  };
+  const handleMiniClick = () => {
+    let notifyMessage = 'Sidebar mini ';
+    if (document.body.classList.contains('sidebar-mini')) {
+      setSidebarMini(false);
+      notifyMessage += 'deactivated...';
+    } else {
+      setSidebarMini(true);
+      notifyMessage += 'activated...';
+    }
+    let options = {};
+    options = {
+      place: 'tr',
+      message: notifyMessage,
+      type: 'primary',
+      icon: 'tim-icons icon-bell-55',
+      autoDismiss: 7
+    };
+    document.body.classList.toggle('sidebar-mini');
+  };
+  const closeSidebar = () => {
+    setSidebarOpened(false);
+    document.documentElement.classList.remove('nav-open');
+  };
+  function launchDashboard() {
+    _ApplicationManager.default.closeAllViews();
+    //applicationManager.navigate('/switch');
+    _ApplicationManager.default.navigate('/view/dashboard');
+  }
+  return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "wrapper",
+    style: {
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "navbar-minimize-fixed",
+    style: {
+      opacity: opacity
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "minimize-sidebar btn btn-link btn-just-icon",
+    onClick: handleMiniClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "tim-icons icon-align-center visible-on-sidebar-regular text-muted"
+  }), /*#__PURE__*/_react.default.createElement("i", {
+    className: "tim-icons icon-bullet-list-67 visible-on-sidebar-mini text-muted"
+  })), ' '), ' ', /*#__PURE__*/_react.default.createElement(_FoldingTabSidebar.default, _extends({}, props, {
+    routes: routes,
+    activeColor: 'agility',
+    secondaryThemeColor: secondaryThemeColor,
+    activeRouteMenu: props.showDashboardMenu ? {
+      id: 'dashboard',
+      name: 'Dashboard'
+    } : null,
+    className: 'sidebar',
+    dashboardLauncher: () => {
+      launchDashboard();
+    },
+    appLogoPath: props.appLogoPath,
+    logo: {
+      outterLink: '',
+      text: '',
+      imgSrc: logo
+    },
+    logoStyle: props.logoStyle,
+    closeSidebar: closeSidebar
+  })), ' ', /*#__PURE__*/_react.default.createElement("div", {
+    className: "main-panel",
+    data: activeColor
+  }, /*#__PURE__*/_react.default.createElement(_HomeNavbar.default, _extends({}, props, {
+    color: primaryThemeColor,
+    themeTextColor: themeTextColor,
+    handleMiniClick: handleMiniClick,
+    brandText: getActiveRoute(routes),
+    sidebarOpened: sidebarOpened,
+    avatar: props.avatar,
+    settingsMenu: props.settings.settingsMenu,
+    toggleSidebar: toggleSidebar,
+    logoutCallBack: props.logoutCallBack
+  })), ' ', /*#__PURE__*/_react.default.createElement("div", {
+    className: "content",
+    style: {
+      height: "calc(100vh - 70px)",
+      maxHeight: "calc(100vh - 70px)"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "content w-100 h-100 row no-margin no-padding"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: windowPinned ? 'calc(100% - 320px)' : '100%',
+      height: "100%",
+      mxHeight: "100%",
+      overflow: 'auto',
+      paddingTop: '4px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
+    windowPinned: windowPinned
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      width: windowPinned ? '320px' : '0',
+      margin: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_WindowViewPort.default, {
+    stateChangeHandler: state => {
+      setWindowPinned(state.pinned);
+    }
+  }))))), ' '));
+};
+FoldingSideTabDashboard.propTypes = {
+  children: _propTypes.default.element,
+  width: _propTypes.default.number
+};
+var _default = exports.default = FoldingSideTabDashboard;

package/dist/components/dashboard/FoldingSideTabDashboard.css

@@ -1,3 +1,8 @@
 .sidebar .nav {
     margin-top: 0 !important;
 }
+
+.dashboard-main-content {
+    padding: 8px 8px;
+    background-color: #f5f6fa;
+}