@agilemotion/oui-react-js 1.8.6 → 1.8.8

package/dist/components/DataGrid.css

@@ -23,7 +23,7 @@ table.responsive-table thead {
         left: 0;
         right: 0;
         width: 100%;
-        height: 50px;
+        min-height: 50px;
         line-height: 3em;
         background: #eee;
         table-layout: fixed;

package/dist/components/DataGridHeading.js

@@ -57,7 +57,7 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     style: {
       display: 'flex',
       flexWrap: 'wrap',
-      height: '56px'
+      minHeight: '56px'
     }
   }, props.config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Th, {
     padding: "checkbox",

package/dist/components/ProgressTracker.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../event/Event"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _RestService = require("../RestService");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Handlebars = require('handlebars');
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+const json = response => {
+  return response.text();
+};
+const location = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port;
+const HtmlPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [data, setData] = _react.default.useState(null);
+  const [visible, setVisible] = _react.default.useState(false);
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
+    doLoadData();
+  }, []);
+  _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 doLoadData = actionConfig => {
+    let service;
+    if (actionConfig && actionConfig.service) {
+      service = actionConfig.service;
+    } else {
+      service = props.config.dataService;
+    }
+    if (!_Utils.default.isNull(service)) {
+      let method = service.type === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
+      method({
+        service: service,
+        component: props.handle,
+        viewId: props.viewId
+      }).then(result => {
+        setData(result);
+      }).catch(e => {
+        console.error(e);
+        _Utils.default.publishErrorMessage(e, props.viewId);
+      });
+    }
+  };
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      loadData: actionConfig => {
+        doLoadData(actionConfig);
+      },
+      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)
+  }, data && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.steps.map((step, index) => {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        margin: "4px"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "inline-block",
+        width: "100%",
+        padding: "16px",
+        borderRadius: "32px",
+        maxWidth: "100%",
+        backgroundColor: step.sequence < data.currentStep.sequence ? '#50cd89' : step.sequence === data.currentStep.sequence ? _ApplicationManager.default.getApplicationPrimaryColor() : 'white',
+        border: step.sequence < data.currentStep.sequence ? '1px solid ' + '#FFFFFF' : step.sequence === data.currentStep.sequence ? '1px solid ' + _ApplicationManager.default.getApplicationPrimaryColor() : '1px solid ' + _ApplicationManager.default.getApplicationSecondaryColor(),
+        color: step.sequence < data.currentStep.sequence ? '#FFFFFF' : null,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        fontSize: "20px"
+      }
+    }, step.description), step.startDate && step.endDate && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontStyle: "italic",
+        fontSize: '12px',
+        width: "100%",
+        display: 'flex',
+        justifyContent: 'left',
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, step.startDate + " - " + step.endDate))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index < data.steps.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        height: "24px",
+        marginLeft: "48px"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: "-12px",
+        height: "calc(100% + 12px)",
+        width: "4px",
+        backgroundColor: "#e1e1e1"
+      }
+    }))));
+  })));
+}));
+var _default = exports.default = HtmlPanel;

package/dist/components/form/DatePicker.js

@@ -57,14 +57,24 @@ const CustomDatePickerComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/
     }
     return id === "minDate" ? "1970-01-01" : "9000-12-31";
   };
+  _react.default.useEffect(() => {
+    setMinDate(props.config.attributes?.minDate);
+    setMaxDate(props.config.attributes?.maxDate);
+  }, []);
   _react.default.useEffect(() => {
     if (minDate === null) {
       setMinDate(getLimitDate("minDate"));
+    } else {
+      setMinDate(minDate);
     }
+  }, [minDate]);
+  _react.default.useEffect(() => {
     if (maxDate === null) {
       setMaxDate(getLimitDate("maxDate"));
+    } else {
+      setMaxDate(maxDate);
     }
-  }, []);
+  }, [maxDate]);
   const secondaryColor = (0, _reactRedux.useSelector)(state => state.dashboard.secondaryThemeColor);
   const style = _Utils.default.mergeStyles({
     minWidth: minWidth,

package/dist/components/form/LookupField.js

@@ -82,7 +82,6 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     className: 'col-*-*',
     style: {
       width: '72px',
-      marginRight: '8px',
       height: '100%'
     }
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -96,7 +95,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   }, "...")), /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-* no-margin no-padding',
     style: {
-      width: 'calc(100% - 80px)',
+      width: 'calc(100% - 72px)',
       marginBottom: base.value ? '0' : '8px'
     }
   }, /*#__PURE__*/_react.default.createElement(_TextField.default, {

package/dist/components/layout/CollapsiblePanel.css

@@ -1,9 +1,9 @@
-.coll-panel-container {
-    font-family: sans-serif;
-    text-align: center;
-}
-
-.coll-panel-btn:focus {
-    outline: 0;
-    box-shadow: none;
-}
+.coll-panel-container {
+    font-family: sans-serif;
+    text-align: center;
+}
+
+.coll-panel-btn:focus {
+    outline: 0;
+    box-shadow: none;
+}

package/dist/components/layout/Layout.js

@@ -28,6 +28,7 @@ var _Portlet = _interopRequireDefault(require("../Portlet"));
 var _TabPanel = _interopRequireDefault(require("../TabPanel"));
 var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTemplateDesigner"));
 var _ChatRoomWrapper = _interopRequireDefault(require("../media/chat/ChatRoomWrapper"));
+var _ProgressTracker = _interopRequireDefault(require("../ProgressTracker"));
 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; }
@@ -242,6 +243,13 @@ const Layout = props => {
             key: index,
             viewId: props.viewId
           });
+        case 'progressTracker':
+          return /*#__PURE__*/_react.default.createElement(_ProgressTracker.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
         default:
           return /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
       }

package/dist/components/layout/View.css

@@ -1,68 +1,68 @@
-.view {
-    padding: 0 32px;
-    background-color: #ffffff;
-    border-radius: 4px;
-}
-
-.window-unpinned .view {
-    width: 0 !important;;
-}
-
-.window-pinned .view {
-    padding: 0 8px;
-}
-
-.no-margin {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-}
-
-.no-padding {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-}
-
-.centered-flex-box {
-    display: flex;
-    align-Items: center;
-    justify-content: center
-}
-
-/* Smartphones (landscape); */
-@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
-    .view {
-        padding: 0 16px;
-    }
-}
-
-/* Smartphones (portrait); */
-@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
-    .view {
-        padding: 0 16px;
-    }
-}
-
-/* iPads (portrait and landscape); */
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
-    .view {
-        padding: 0 24px;
-    }
-}
-
-/* iPad 3 */
-@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
-    .view {
-        padding: 0 24px;
-    }
-}
-
-/* small desktop screens */
-@media only screen and (max-width : 600px) {
-}
-
-/* low resolution desktop */
-@media only screen and (max-width : 1200px) {
-    .view {
-
-    }
-}
+.view {
+    padding: 0 32px;
+    background-color: #ffffff;
+    border-radius: 4px;
+}
+
+.window-unpinned .view {
+    width: 0 !important;;
+}
+
+.window-pinned .view {
+    padding: 0 8px;
+}
+
+.no-margin {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.no-padding {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.centered-flex-box {
+    display: flex;
+    align-Items: center;
+    justify-content: center
+}
+
+/* Smartphones (landscape); */
+@media only screen and (min-device-width : 361px) and (max-device-width : 480px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* Smartphones (portrait); */
+@media only screen and (min-device-width : 280px) and (max-device-width : 360px) {
+    .view {
+        padding: 0 16px;
+    }
+}
+
+/* iPads (portrait and landscape); */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* iPad 3 */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+    .view {
+        padding: 0 24px;
+    }
+}
+
+/* small desktop screens */
+@media only screen and (max-width : 600px) {
+}
+
+/* low resolution desktop */
+@media only screen and (max-width : 1200px) {
+    .view {
+
+    }
+}

package/dist/components/loader.css

@@ -1,36 +1,36 @@
-.loaderModal {
-	display: block; /* Hidden by default */
-	position: fixed; /* Stay in place */
-	z-index: 3000; /* Sit on top */
-	left: 0;
-	top: 0;
-	width: 100vw; /* Full width */
-	height: 100vh; /* Full height */
-	overflow: auto; /* Enable scroll if needed */
-	background-color: rgb(0,0,0); /* Fallback color */
-	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
-}
-
-/* Modal Content/Box */
-.modal-content {
-	background-color: transparent;
-	margin: 30% auto; /* 15% from the top and centered */
-	padding: 20px;
-	border: 1px solid #888;
-	width: 10%; /* Could be more or less, depending on screen size */
-}
-
-/* The Close Button */
-.close {
-	color: #aaa;
-	float: right;
-	font-size: 28px;
-	font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-	color: black;
-	text-decoration: none;
-	cursor: pointer;
-}
+.loaderModal {
+	display: block; /* Hidden by default */
+	position: fixed; /* Stay in place */
+	z-index: 3000; /* Sit on top */
+	left: 0;
+	top: 0;
+	width: 100vw; /* Full width */
+	height: 100vh; /* Full height */
+	overflow: auto; /* Enable scroll if needed */
+	background-color: rgb(0,0,0); /* Fallback color */
+	background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+	background-color: transparent;
+	margin: 30% auto; /* 15% from the top and centered */
+	padding: 20px;
+	border: 1px solid #888;
+	width: 10%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+	color: black;
+	text-decoration: none;
+	cursor: pointer;
+}

package/dist/components/media/Video.css

@@ -1,4 +1,4 @@
-.user-video {
-    min-width: 280px;
-    height: 280px;
-}
+.user-video {
+    min-width: 280px;
+    height: 280px;
+}

package/dist/components/signatures/ResponsiveTable.css

@@ -1,91 +1,91 @@
-.table thead th {
-}
-
-table.responsive-table {
-    display: table;
-    /* required for table-layout to be used (not normally necessary; included for completeness) */
-    table-layout: fixed;
-    /* this keeps your columns with fixed with exactly the right width */
-    width: 100% !important;
-    /* table must have width set for fixed layout to work as expected */
-    height: 100%;
-}
-
-table.responsive-table thead {
-        position: fixed;
-        top: 50px;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 50px;
-        line-height: 3em;
-        background: #eee;
-        table-layout: fixed;
-        display: table;
-    }
-
-    table.responsive-table th {
-        background: #eee;
-    }
-
-    table.responsive-table td {
-        line-height: 2em;
-    }
-
-    table.responsive-table tr > td,
-    table.responsive-table th {
-        text-align: left;
-    }
-
-.table td, .table th {
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-    min-width: 0 !important;
-    border-bottom: 1px solid rgba(224, 224, 224, 1) !important;
-    border-top: none !important;
-}
-
-.selectCell {
-    white-space: normal !important;
-    text-overflow: unset !important;
-}
-
-.selectCell span{
-    padding: 0 !important;
-}
-
-.table td {
-    padding: 6px 24px 6px 16px;
-    border-top: none !important;
-    display: table-cell;
-    font-size: 0.875rem;
-    text-align: left;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    font-weight: 400;
-    line-height: 1.43;
-    border-bottom: 1px solid rgba(224, 224, 224, 1);
-    letter-spacing: 0.01071em;
-    vertical-align: inherit
-}
-
-.table th {
-    color: rgba(0, 0, 0, 0.54);
-    font-size: 0.75rem;
-    font-weight: 500;
-    line-height: 1.3125rem;
-}
-
-.table {
-    table-layout: fixed;
-}
-
-    .table-scrollbar {
-    position: relative;
-    overflow: auto;
-}
-
-@media screen and (max-width: 40em) {
- 
-  
-}
+.table thead th {
+}
+
+table.responsive-table {
+    display: table;
+    /* required for table-layout to be used (not normally necessary; included for completeness) */
+    table-layout: fixed;
+    /* this keeps your columns with fixed with exactly the right width */
+    width: 100% !important;
+    /* table must have width set for fixed layout to work as expected */
+    height: 100%;
+}
+
+table.responsive-table thead {
+        position: fixed;
+        top: 50px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        min-height: 50px;
+        line-height: 3em;
+        background: #eee;
+        table-layout: fixed;
+        display: table;
+    }
+
+    table.responsive-table th {
+        background: #eee;
+    }
+
+    table.responsive-table td {
+        line-height: 2em;
+    }
+
+    table.responsive-table tr > td,
+    table.responsive-table th {
+        text-align: left;
+    }
+
+.table td, .table th {
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    min-width: 0 !important;
+    border-bottom: 1px solid rgba(224, 224, 224, 1) !important;
+    border-top: none !important;
+}
+
+.selectCell {
+    white-space: normal !important;
+    text-overflow: unset !important;
+}
+
+.selectCell span{
+    padding: 0 !important;
+}
+
+.table td {
+    padding: 6px 24px 6px 16px;
+    border-top: none !important;
+    display: table-cell;
+    font-size: 0.875rem;
+    text-align: left;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: 400;
+    line-height: 1.43;
+    border-bottom: 1px solid rgba(224, 224, 224, 1);
+    letter-spacing: 0.01071em;
+    vertical-align: inherit
+}
+
+.table th {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.3125rem;
+}
+
+.table {
+    table-layout: fixed;
+}
+
+    .table-scrollbar {
+    position: relative;
+    overflow: auto;
+}
+
+@media screen and (max-width: 40em) {
+ 
+  
+}

package/dist/components/signatures/widgets.css

@@ -1,126 +1,126 @@
-@media all and (min-width: 480px) {
-    .btn-primary {
-        border-color: transparent;
-    }
-
-    #menubar-scroll::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-        background-color: #F5F5F5;
-    }
-
-    #menubar-scroll::-webkit-scrollbar {
-        width: 6px !important;
-        background-color: #F5F5F5;
-    }
-
-    #menubar-scroll::-webkit-scrollbar-thumb {
-        background-color: #939393 !important;
-    }
-
-    .menu-table button {
-        height: 96px;
-        width: 100%;
-        border-radius: 0 !important;
-        text-decoration:none;
-    }
-
-    .menu-table .toolStripButtonSelected {
-        text-decoration: none;
-    }
-
-    .menu-table .btn-primary:focus {
-        box-shadow: none;
-        text-decoration: none;
-    }
-    .footer {
-        font-size: 14px;
-        text-align: center;
-        color: white;
-        height: 10vh;
-        padding-top: 8px;
-    }
-
-    .react-pdf__Page__canvas{
-        width: 100% !important;
-    }
-
-    .header {
-        background-clip:border-box;
-        border-bottom: 1px solid #e1e1e1;
-    }
-
-    .header shadow {
-        /**box-shadow: 0 0.15rem 1.75rem 0 rgba(40, 41, 55, 0.15) !important;**/
-    }
-
-        .header span {
-            /**color: #fff;**/
-    }
-
-    .header .form-inline .form-control {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        position: relative;
-        flex: 1 1 auto;
-        width: 1%;
-        margin-bottom: 0;
-        display: inline-block;
-        width: auto;
-        vertical-align: middle;
-        background-color: #f8f9fc !important;
-        border: 0 !important;
-    }
-
-    .btn-primary, .btn, .btn-primary:hover, .btn:hover, .btn-primary:focus, .btn:focus {
-        outline: none !important;
-        outline-offset: unset !important;
-        border-color: transparent !important;
-        box-shadow: none !important;
-        text-decoration: none;
-    }
-
-    .header .btn-primary {
-        display: block;
-        color: #fff;
-        border-radius: 0px;
-        /*box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.2);*/
-        //background-color: #114084;
-        border-top: 1px solid rgba(255,255,255,0.5) !important;
-        margin-top: -5px;
-        text-decoration: none;
-    }
-
-    .header .btn {
-        font-weight: 400;
-        text-align: center;
-        vertical-align: middle;
-        -ms-user-select: none;
-        user-select: none;
-        border: 1px solid transparent;
-        padding: 0.375rem 0.75rem;
-        font-size: 1rem;
-        line-height: 2;
-        width: 100%;
-        text-align:left;
-        text-decoration:none;
-        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    }
-    .border {
-        border: 0px solid #dee2e6 !important;
-    }
-
-    .header .dropdown-toggle::after {
-        display: inline-block;
-        margin-left: .255em;
-        vertical-align: .255em;
-        content: none !important;
-        border-top: .3em solid;
-        border-right: .3em solid transparent;
-        border-bottom: 0;
-        border-left: .3em solid transparent;
-    }
-
-    .search .card-body{
-       height: 60vh !important;  
-    }
-}
+@media all and (min-width: 480px) {
+    .btn-primary {
+        border-color: transparent;
+    }
+
+    #menubar-scroll::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        background-color: #F5F5F5;
+    }
+
+    #menubar-scroll::-webkit-scrollbar {
+        width: 6px !important;
+        background-color: #F5F5F5;
+    }
+
+    #menubar-scroll::-webkit-scrollbar-thumb {
+        background-color: #939393 !important;
+    }
+
+    .menu-table button {
+        height: 96px;
+        width: 100%;
+        border-radius: 0 !important;
+        text-decoration:none;
+    }
+
+    .menu-table .toolStripButtonSelected {
+        text-decoration: none;
+    }
+
+    .menu-table .btn-primary:focus {
+        box-shadow: none;
+        text-decoration: none;
+    }
+    .footer {
+        font-size: 14px;
+        text-align: center;
+        color: white;
+        height: 10vh;
+        padding-top: 8px;
+    }
+
+    .react-pdf__Page__canvas{
+        width: 100% !important;
+    }
+
+    .header {
+        background-clip:border-box;
+        border-bottom: 1px solid #e1e1e1;
+    }
+
+    .header shadow {
+        /**box-shadow: 0 0.15rem 1.75rem 0 rgba(40, 41, 55, 0.15) !important;**/
+    }
+
+        .header span {
+            /**color: #fff;**/
+    }
+
+    .header .form-inline .form-control {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        position: relative;
+        flex: 1 1 auto;
+        width: 1%;
+        margin-bottom: 0;
+        display: inline-block;
+        width: auto;
+        vertical-align: middle;
+        background-color: #f8f9fc !important;
+        border: 0 !important;
+    }
+
+    .btn-primary, .btn, .btn-primary:hover, .btn:hover, .btn-primary:focus, .btn:focus {
+        outline: none !important;
+        outline-offset: unset !important;
+        border-color: transparent !important;
+        box-shadow: none !important;
+        text-decoration: none;
+    }
+
+    .header .btn-primary {
+        display: block;
+        color: #fff;
+        border-radius: 0px;
+        /*box-shadow: 0px 4px 6px 2px rgba(0,0,0,0.2);*/
+        //background-color: #114084;
+        border-top: 1px solid rgba(255,255,255,0.5) !important;
+        margin-top: -5px;
+        text-decoration: none;
+    }
+
+    .header .btn {
+        font-weight: 400;
+        text-align: center;
+        vertical-align: middle;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid transparent;
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
+        line-height: 2;
+        width: 100%;
+        text-align:left;
+        text-decoration:none;
+        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+    .border {
+        border: 0px solid #dee2e6 !important;
+    }
+
+    .header .dropdown-toggle::after {
+        display: inline-block;
+        margin-left: .255em;
+        vertical-align: .255em;
+        content: none !important;
+        border-top: .3em solid;
+        border-right: .3em solid transparent;
+        border-bottom: 0;
+        border-left: .3em solid transparent;
+    }
+
+    .search .card-body{
+       height: 60vh !important;  
+    }
+}

package/dist/view/Dashboard.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _reactstrap = require("reactstrap");
 var _Icon = _interopRequireDefault(require("../components/Icon"));
@@ -18,7 +18,11 @@ var _Event = _interopRequireDefault(require("../event/Event"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 var _AlertBar = _interopRequireDefault(require("../components/AlertBar"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _View = require("../components/layout/View");
 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 location = window.location.protocol + '//' + window.location.hostname;
 const text = response => {
   return response.text();
@@ -28,38 +32,55 @@ const DashboardCard = props => {
   const [path, setPath] = _react.default.useState(null);
   const [name, setName] = _react.default.useState(null);
   const [displayType, setDisplayType] = _react.default.useState(null);
+  const [view, setview] = _react.default.useState(null);
   const {
     settings
   } = props;
   const [id, setId] = _react.default.useState(props.settings.id);
   const [content, setContent] = _react.default.useState(null);
   const [ref] = _react.default.useState(/*#__PURE__*/_react.default.createRef());
+  const keyCounter = (0, _react.useRef)(0);
   _react.default.useEffect(() => {
     const accessToken = sessionStorage.getItem('accessToken');
     const idToken = sessionStorage.getItem('idToken');
-    if (path) {
-      let fetchConfig = {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'text/html',
-          'Accept': 'text/html',
-          'Authorization': 'Bearer ' + accessToken,
-          'idToken': idToken
+    const handle = {
+      api: {
+        get id() {
+          return 'dashboard-menus';
+        },
+        loaded() {
+          return true;
         }
-      };
-
-      /*trackPromise(
-          fetch(encodeURI(path), fetchConfig)
-              .then(text)
-              .then((data) => {
-                  setContent(data);
-              })
-              .catch((e) => {
-                  console.error(e);
-              })
-      );*/
-    }
-  }, [path]);
+      }
+    };
+    if (path && displayType) {
+      if (displayType === 'VIEW') {
+        (0, _RestUtils.sendRequest)(path, data => {
+          setview(/*#__PURE__*/_react.default.createElement(_View.View, {
+            key: data.id + "-" + keyCounter.current++,
+            config: data,
+            parameters: [],
+            handle: handle
+          }));
+        });
+      } else {
+        let fetchConfig = {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'text/html',
+            'Accept': 'text/html',
+            'Authorization': 'Bearer ' + accessToken,
+            'idToken': idToken
+          }
+        };
+        (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(path), fetchConfig).then(text).then(data => {
+          setContent(data);
+        }).catch(e => {
+          console.error(e);
+        }));
+      }
+    }
+  }, [path, displayType]);
   _react.default.useEffect(() => {
     if (!path) {
       // TODO: Make the base URL dynamic
@@ -79,7 +100,13 @@ const DashboardCard = props => {
         setName(defaultName);
         const accessToken = sessionStorage.getItem('accessToken');
         const idToken = sessionStorage.getItem('idToken');
-        setPath(location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + data.contentPath + `-${defaultDisplayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`);
+        if (defaultDisplayType === 'VIEW') {
+          let url = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/view/get?version=1.0&id=' + data.contentPath;
+          setPath(url);
+          setDisplayType(defaultDisplayType);
+        } else {
+          setPath(location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + data.contentPath + `-${defaultDisplayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`);
+        }
       }, e => {
         console.error(e);
       });
@@ -198,14 +225,19 @@ const DashboardCard = props => {
       height: '32vh',
       padding: '8px 32px 0 0'
     }
-  }, !_Utils.default.isNull(path) ? /*#__PURE__*/_react.default.createElement("object", {
+  }, !_Utils.default.isNull(path) && !_Utils.default.isNull(displayType) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("object", {
     data: path,
     type: "text/html",
     style: {
       width: '100%',
       height: '100%'
     }
-  }) : /*#__PURE__*/_react.default.createElement("p", null, "Loading...")));
+  }), !_Utils.default.isNull(path) && displayType !== 'VIEW' && /*#__PURE__*/_react.default.createElement("p", null, "Loading..."), displayType === 'VIEW' && !_Utils.default.isNull(view) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: "100%"
+    }
+  }, view)));
 };
 const WorkFlowCard = props => {
   const [sp, setSp] = _react.default.useState(null);
@@ -278,7 +310,6 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
   const [cardRows, setCardRows] = _react.default.useState(null);
   const [cardsPerRow, setCardsPerRow] = _react.default.useState(null);
   let dashboardCardCounter = 0;
-  let keyCounter = 0;
   const api = {
     get id() {
       return '_sys_dashboard';
@@ -350,11 +381,33 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       }, null);
     });
   };
+  async function loadMenus() {
+    if (_Utils.default.isNull(menuItems) && !_Utils.default.isNull(settings.systemProfileDto.modules)) {
+      let dashboardMenuitems = [];
+      for (let i = 0; i < settings.systemProfileDto.modules.length; i++) {
+        let module = settings.systemProfileDto.modules[i];
+        if (!_Utils.default.isNull(module.dashboardMenu)) {
+          let menus = await getDashboardMenu(module.dashboardMenu);
+          if (menus) {
+            for (let j = 0; j < menus.length; j++) {
+              let menu = menus[j];
+              if (menu.items) {
+                for (const item of menu.items) {
+                  dashboardMenuitems.push(item);
+                }
+              }
+            }
+          }
+        }
+      }
+      setMenuItems(dashboardMenuitems);
+    }
+  }
   _react.default.useEffect(() => {
-    /*let rpcConfig = {
-        "type": "rpc",
-        "procedureName": "getWorkFlowSummary",
-        "serviceId": "BPM.WorkFlow"
+    /*let rpcConfig = {
+        "type": "rpc",
+        "procedureName": "getWorkFlowSummary",
+        "serviceId": "BPM.WorkFlow"
     };*/
 
     let cardsPerRow = 2;
@@ -383,25 +436,7 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
       console.error(e);
       // TODO : Show error message
     }, true, true);
-    if (_Utils.default.isNull(menuItems) && !_Utils.default.isNull(settings.systemProfileDto.modules)) {
-      let dashboardMenuitems = [];
-      for (let i = 0; i < settings.systemProfileDto.modules.length; i++) {
-        let module = settings.systemProfileDto.modules[i];
-        if (!_Utils.default.isNull(module.dashboardMenu)) {
-          getDashboardMenu(module.dashboardMenu).then(menus => {
-            if (menus) {
-              for (let j = 0; j < menus.length; j++) {
-                let menu = menus[j];
-                for (const item of menu.items) {
-                  dashboardMenuitems.push(item);
-                }
-              }
-            }
-          }).catch(e => {});
-        }
-      }
-      setMenuItems(dashboardMenuitems);
-    }
+    loadMenus();
     if (!_Utils.default.isNull(settings) && !_Utils.default.isNull(userDashboards) && _Utils.default.isNull(cardRows) && !_Utils.default.isNull(cardsPerRow)) {
       setupCardRows();
     }
@@ -428,14 +463,17 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     className: 'col-*-*',
     style: {
       padding: '14px',
-      width: '120px'
+      width: '136px'
     }
   }, /*#__PURE__*/_react.default.createElement("p", {
     style: {
       fontSize: '24px'
     }
   }, "Dashboard")), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'col-*-*'
+    className: 'col-*-*',
+    style: {
+      marginTop: "4px"
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledDropdown, null, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
     color: "default",
     "data-toggle": "dropdown",
@@ -449,9 +487,9 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     className: "dropdown-navbar",
     end: true,
     tag: "ul"
-  }, menuItems.map(item => /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
+  }, menuItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_reactstrap.NavLink, {
     tag: "li",
-    key: keyCounter++
+    key: index
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "nav-item",
     onClick: () => {
@@ -491,19 +529,18 @@ const Dashboard = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.f
     title: 'Due Today',
     itemCount: taskSummary.dueTodayItemCount,
     path: '/workflow/views/due-today-work-items.json'
-  })), /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(cardRows) ? cardRows.map(row => /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(cardRows) ? cardRows.map((row, i) => /*#__PURE__*/_react.default.createElement("div", {
     className: 'row',
     style: {
       margin: '0 0 16px 0'
     },
-    key: keyCounter++
-  }, row.map(userDashboard => /*#__PURE__*/_react.default.createElement(DashboardCard, {
+    key: i
+  }, row.map((userDashboard, j) => /*#__PURE__*/_react.default.createElement(DashboardCard, {
     settings: userDashboard,
     index: dashboardCardCounter,
-    key: dashboardCardCounter++,
+    key: i + j,
     onDelete: () => {
       userDashboards.splice(userDashboards.indexOf(userDashboard), 1);
-      console.log("\n\n\n\nUD : ", userDashboards);
       setupCardRows(userDashboard);
     }
   })))) : null))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "files": [
     "dist"
   ],
@@ -138,5 +138,13 @@
   "description": "export NODE_OPTIONS=--openssl-legacy-provider",
   "main": "gulpfile.js",
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/agilemotion/oui-react-js.git"
+  },
+  "bugs": {
+    "url": "https://gitlab.com/agilemotion/oui-react-js/issues"
+  },
+  "homepage": "https://gitlab.com/agilemotion/oui-react-js#readme"
 }