@agilemotion/oui-react-js 1.8.42 → 1.8.44

package/dist/ApplicationManager.js

@@ -7,7 +7,6 @@ exports.default = exports.TEMPLATE_TOKEN_REGEX = exports.SYSTEM_EVENT = exports.
 var _Observable = _interopRequireDefault(require("./event/Observable"));
 var _Event = _interopRequireDefault(require("./event/Event"));
 var _EventType = _interopRequireDefault(require("./event/EventType"));
-var _Graph = _interopRequireDefault(require("./components/Graph"));
 var _Utils = _interopRequireDefault(require("./Utils"));
 var _DynamicJS = _interopRequireWildcard(require("./DynamicJS"));
 var _TypedValue = _interopRequireDefault(require("./TypedValue"));
@@ -80,13 +79,7 @@ class ApplicationManager {
           return instance.getActiveTenant();
         },
         getUniqueOrgForRole(role) {
-          let profile = JSON.parse(instance.getUserDetails().profile);
-          let roles = profile.organisations.filter(org => org.roles.includes(role)) // Filter organisations by role
-          .map(org => org.code);
-          if (roles.length > 1) {
-            throw new Error("There is more than one organisation for role : [" + role + "]");
-          }
-          return roles[0];
+          return instance.getUniqueOrgForRole(role);
         }
       };
       if (!Array.isArray) {
@@ -98,6 +91,15 @@ class ApplicationManager {
     }
     return ApplicationManager.instance;
   }
+  getUniqueOrgForRole(role) {
+    let profile = JSON.parse(this.getUserDetails().profile);
+    let roles = profile.organisations.filter(org => org.roles.includes(role)) // Filter organisations by role
+    .map(org => org.code);
+    if (roles.length > 1) {
+      throw new Error("There is more than one organisation for role : [" + role + "]");
+    }
+    return roles[0];
+  }
   addApplicationContextSubscription = subscription => {
     return new Promise(resolve => {
       _Observable.default.addApplicationContextSubscription(subscription);

package/dist/InteractionPortalApp.js

@@ -36,7 +36,6 @@ const InteractionPortalApp = props => {
     if (window.location.pathname !== '/reset-password' && window.location.pathname !== '/login' && window.location.pathname !== '/forgot-password' && window.location.pathname !== '/change-password') {
       navigate("/");
     }
-    console.log("\n\n\n\nImpl : ", props.implConfig);
   }, []);
   return /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
     theme: agilityTheme

package/dist/InteractionPortalAppHome.js

@@ -12,6 +12,11 @@ var _Utils = _interopRequireDefault(require("./Utils"));
 var _reactRouterDom = require("react-router-dom");
 var _RestUtils = require("./RestUtils");
 var _SideMenuModuleDashboard = _interopRequireDefault(require("./components/dashboard/SideMenuModuleDashboard"));
+var _SocketManager = _interopRequireDefault(require("./components/SocketManager"));
+var _FoldingSideTabDashboard = _interopRequireDefault(require("./components/dashboard/FoldingSideTabDashboard"));
+var _material = require("@mui/material");
+var _ThemeProvider = _interopRequireDefault(require("@mui/styles/ThemeProvider"));
+var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const location = window.location.protocol + "//" + window.location.hostname;
 const status = response => {
@@ -49,6 +54,8 @@ const InteractionPortalAppHome = /*#__PURE__*/_react.default.memo((props, ref) =
     });
     (0, _RestUtils.sendRequest)(location + _ApplicationManager.default.getContextRoot() + '/auth/api/v1/user/find', response => {
       _ApplicationManager.default.setUserDetails(response);
+      _SocketManager.default.init();
+      _ApplicationManager.default.setActiveTenant(_ApplicationManager.default.getUniqueOrgForRole('VENDOR'));
     }, e => {
       console.log(e);
     });
@@ -81,15 +88,74 @@ const InteractionPortalAppHome = /*#__PURE__*/_react.default.memo((props, ref) =
     className: "main w-100 h-100 d-inline-block"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100 h-100"
-  }, !loading && !_Utils.default.isNull(dashboardSettings) && !hasClientError ? /*#__PURE__*/_react.default.createElement(_SideMenuModuleDashboard.default, {
+  }, !loading && !_Utils.default.isNull(dashboardSettings) && !hasClientError ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `main w-100 h-100 d-inline-block coj-skin`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-100 h-100"
+  }, /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
+    theme: (0, _material.createTheme)({
+      palette: {
+        primary: {
+          main: props.implConfig.primaryColor
+        },
+        secondary: {
+          main: props.implConfig.secondaryColor
+        }
+      }
+    })
+  }, /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
+    theme: (0, _material.createTheme)({
+      palette: {
+        primary: {
+          main: dashboardSettings.systemProfileDto.firstCorporateBrandColor
+        },
+        secondary: {
+          main: dashboardSettings.systemProfileDto.secondCorporateBrandColor
+        }
+      },
+      components: {
+        MuiCssBaseline: {
+          styleOverrides: {
+            body: {
+              // Firefox
+              scrollbarColor: 'rgba(100, 100, 100, 0.4) transparent',
+              scrollbarWidth: 'thin'
+            },
+            // WebKit browsers
+            '::-webkit-scrollbar': {
+              width: '8px',
+              height: '8px'
+            },
+            '::-webkit-scrollbar-track': {
+              background: 'transparent'
+            },
+            '::-webkit-scrollbar-thumb': {
+              backgroundColor: 'rgba(100, 100, 100, 0.4)',
+              borderRadius: '4px',
+              transition: 'background-color 0.3s'
+            },
+            '::-webkit-scrollbar-thumb:hover': {
+              backgroundColor: 'rgba(100, 100, 100, 0.6)'
+            }
+          }
+        }
+      }
+    })
+  }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_FoldingSideTabDashboard.default, {
     logoutCallBack: () => {
       logout();
     },
     settings: dashboardSettings,
     avatar: !_Utils.default.isNull(avatarUrl) ? avatarUrl : null,
     logo: dashboardSettings.logo,
-    appLogoPath: props.implConfig.appLogo
-  }) : hasClientError ? /*#__PURE__*/_react.default.createElement("div", {
+    showDashboardMenu: false,
+    appLogoPath: /*dashboardSettings.logo*/null,
+    logoStyle: {
+      padding: '32px'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
+    color: loadingColor
+  })))))) : hasClientError ? /*#__PURE__*/_react.default.createElement("div", {
     style: "margin: 128px; color: red; font-size: 24px"
   }, "System error - Unknown client") : null), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
     color: loadingColor

package/dist/RestService.js

@@ -90,9 +90,9 @@ class RestService {
             } else {
               if (!this.isParamValueNull(parameterValue)) {
                 requestBody = parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue;
-                if (typeof requestBody === 'object') {
-                  requestBody.type = parameterValue.type;
-                }
+                /*if (typeof requestBody === 'object') {
+                    requestBody.type = parameterValue.type;
+                }*/
               }
             }
           }

package/dist/Utils.js

@@ -17,6 +17,13 @@ class Utils {
   static isNull(value) {
     return value === null || typeof value === 'undefined';
   }
+  static normalizeCssSize(value, fallback) {
+    if (value == null) return fallback;
+    // allow "72px", "5rem", etc.
+    if (typeof value === "string" && value.trim()) return value.trim();
+    if (typeof value === "number" && Number.isFinite(value)) return `${value}px`;
+    return fallback;
+  }
   static getInitials(name) {
     const parts = name.split(' ');
     let initials = '';

package/dist/assets/jss/components/customInputStyle.js

@@ -53,7 +53,6 @@ const customInputStyle = {
   },
   formControl: {
     margin: "0 0 17px 0",
-    paddingTop: "27px",
     position: "relative",
     verticalAlign: "unset",
     "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": {

package/dist/assets/jss/components/customInputStyle.jsx

@@ -55,7 +55,6 @@ const customInputStyle = {
     },
     formControl: {
         margin: "0 0 17px 0",
-        paddingTop: "27px",
         position: "relative",
         verticalAlign: "unset",
         "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": {

package/dist/components/DataGrid.js

@@ -429,7 +429,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
           processData(result, conf);
         }).catch(e => {
           console.error(e);
-          _Utils.default.publishErrorMessage(e, props.viewId);
+          if (e.errorType !== 'INVALID_PARAMETER') {
+            _Utils.default.publishErrorMessage(e, props.viewId);
+          }
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);
@@ -591,6 +593,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         updateColumnReadOnlyStatus(column, props.rows);
       }
       rowsRef.current = rowValues;
+      setSelected([]);
       setRows(rowValues);
     }
   }, [props.rows]);
@@ -744,6 +747,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   }
   return visible && /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
+    className: _Utils.default.getComponentAttribute(props.config, 'className', null),
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
       margin: '0',
       border: '1px solid #e2e2e2',
@@ -808,7 +812,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     },
     label: "Wrap table text"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "responsive-table",
+    className: `responsive-table`,
     style: {
       height: props.height
     }

package/dist/components/DocumentTemplateDesignerComponent.css

@@ -7,6 +7,8 @@
 @import '@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '@syncfusion/ej2-dropdowns/styles/material.css';
 @import "@syncfusion/ej2-react-documenteditor/styles/material.css";
+@import '@syncfusion/ej2-buttons/styles/material.css';
+@import '@syncfusion/ej2-splitbuttons/styles/material.css';
 
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
 }

package/dist/components/DocumentViewer.js

@@ -151,7 +151,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
   }, "Error loading document"), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/pdf' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_PDFViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {}
-  }), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && (!_Utils.default.isNull(value) || props.config.enableUpload) && /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
+  }), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && (!_Utils.default.isNull(value) || props.config.enableUpload) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {},
     valueHandler: wordEditorValueHandler,
@@ -167,6 +167,6 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     enableUpload: _Utils.default.evaluateBooleanExpression(parsedConfig.enableUpload, props.config.id),
     trackChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.trackChanges, props.config.id),
     id: props.config.id
-  }));
+  })));
 }));
 var _default = exports.default = DocumentViewer;

package/dist/components/SocketManager.js

@@ -99,14 +99,16 @@ class SocketManager {
     });
   };
   registerOnline() {
-    console.log('***** REGISTERING ONLINE *****');
     let userDetails = _ApplicationManager.default.getUserDetails();
+    // TODO : Resolve the hardcoding
+    let profile = typeof JSON.parse(userDetails.profile) === 'string' ? userDetails.profile : 'COJ';
+    console.log('***** REGISTERING ONLINE ***** [' + profile + ']');
     this.emitEvent(_SocketRequest.default.REGISTER_ONLINE, {
       user: {
         userId: userDetails.username,
         name: userDetails.name + ' ' + userDetails.surname
       },
-      orgCode: userDetails.profile
+      orgCode: profile
     }).then(data => {
       console.log("REGISTERED ONLINE - " + userDetails.username);
       this.connected = true;

package/dist/components/TitleBar.js

@@ -58,7 +58,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
     className: 'title-bar'
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      padding: '32px 0 4px 0',
+      padding: '4px 0 4px 0',
       fontSize: '24px',
       color: '#202124'
     }

package/dist/components/Toolbar.js

@@ -326,7 +326,7 @@ const Toolbar = props => {
     className: 'oui-toolbar',
     style: _Utils.default.mergeStyles({
       borderBottom: '1px solid #e2e2e2',
-      padding: '4px 0 0 0',
+      padding: '4px 0',
       overflow: 'hidden'
     }, props.config)
   }, render(props.config));

package/dist/components/WordDocumentViewer.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.KEY = exports.DOCSVC = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactPromiseTracker = require("react-promise-tracker");
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _ej2ReactDocumenteditor = require("@syncfusion/ej2-react-documenteditor");
@@ -13,19 +13,83 @@ var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"
 var _ej2Base = require("@syncfusion/ej2-base");
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _LottieIcon = _interopRequireDefault(require("./LottieIcon"));
+var _ej2ReactSplitbuttons = require("@syncfusion/ej2-react-splitbuttons");
 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 KEY = exports.KEY = 'ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5adkJiWHtWdXBXT2Je';
 (0, _ej2Base.registerLicense)(KEY);
 const DOCSVC = exports.DOCSVC = "https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/";
 _ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
+function useOnFullyVisible(callback) {
+  let {
+    threshold = 0.1
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const nextPaint = () => new Promise(res => requestAnimationFrame(() => requestAnimationFrame(res)));
+    const waitImages = () => {
+      const imgs = Array.from(el.querySelectorAll('img'));
+      const pending = imgs.filter(img => !(img.complete && img.naturalWidth > 0));
+      if (!pending.length) return Promise.resolve();
+      return Promise.all(pending.map(img => new Promise(r => {
+        const done = () => {
+          img.removeEventListener('load', done);
+          img.removeEventListener('error', done);
+          r();
+        };
+        img.addEventListener('load', done, {
+          once: true
+        });
+        img.addEventListener('error', done, {
+          once: true
+        });
+      })));
+    };
+    const waitFonts = () => 'fonts' in document && document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+    const io = new IntersectionObserver(async entries => {
+      const entry = entries[0];
+      const fullyVisible = entry.intersectionRatio >= threshold || entry.intersectionRatio >= 0.99;
+      if (fullyVisible) {
+        io.disconnect();
+        await waitImages();
+        await waitFonts();
+        await nextPaint();
+        callback(el);
+      }
+    }, {
+      threshold: [threshold, 0.99]
+    });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [callback, threshold]);
+  return ref;
+}
+const LEVEL_FMT = ['%1.', '%1.%2.', '%1.%2.%3.'];
+function applyLevel(ed) {
+  let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  const depth = Math.max(0, Math.min(level, LEVEL_FMT.length - 1));
+  ed.selection.paragraphFormat.listLevelNumber = depth;
+  ed.applyNumbering(LEVEL_FMT[depth], 'Arabic');
+}
 const WordDocumentViewer = props => {
   const [container, setContainer] = _react.default.useState(null);
   const [items, setItems] = _react.default.useState(null);
   const [height, setHeight] = _react.default.useState(0);
   const [width, setWidth] = _react.default.useState(0);
-  const [visible, setVisible] = _react.default.useState(false);
+  const [visible, setVisible] = _react.default.useState(true);
+  const [reRendering, setReRendering] = _react.default.useState(false);
   const [json, setJson] = _react.default.useState(null);
   const [errorMessage, setErrorMessage] = _react.default.useState(null);
+  const ref = useOnFullyVisible(el => {
+    console.log('Document fully visible & rendered:', el);
+    if (!reRendering) {
+      setVisible(false);
+      setReRendering(true);
+    }
+  });
 
   /*let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', '|', 'CreateLink', '|',
       {
@@ -47,14 +111,105 @@ const WordDocumentViewer = props => {
   _react.default.useEffect(() => {
     props.valueHandler.api = api();
   });
-  _react.default.useLayoutEffect(() => {
-    const timer = window.setTimeout(() => {
-      setVisible(true);
-    }, 1_000);
-    return () => window.clearTimeout(timer);
-  }, []);
+  const numberingItems = [{
+    id: 'lvl-0',
+    text: '1.'
+  }, {
+    id: 'lvl-1',
+    text: '1.1'
+  }, {
+    id: 'lvl-2',
+    text: '1.1.1'
+  }, {
+    separator: true
+  }, {
+    id: 'clear',
+    text: 'Clear list'
+  }];
+  const onNumberingSelect = args => {
+    const ed = containerRef.current?.documentEditor?.editor;
+    if (!ed) return;
+    switch (args.item.id) {
+      case 'lvl-0':
+        applyLevel(ed, 0);
+        break;
+      case 'lvl-1':
+        applyLevel(ed, 1);
+        break;
+      case 'lvl-2':
+        applyLevel(ed, 2);
+        break;
+      case 'clear':
+        ed.clearList();
+        break;
+      default:
+        break;
+    }
+  };
+  const onCreated = () => {
+    const container = containerRef.current;
+    const tb = container?.toolbarModule?.toolbar; // EJ2 Toolbar instance
+    if (!tb) return;
+
+    // 1) Add a placeholder button into the toolbar at the end
+    tb.addItems([{
+      type: 'Separator'
+    }, {
+      // Use a real HTML template (string) and give it an id
+      template: '<button id="numbering-ddb" class="e-btn e-flat" type="button">Numbering</button>',
+      tooltipText: 'Numbering styles'
+    }], tb.items.length);
+
+    // 2) Turn that placeholder into a functioning DropDownButton
+    const ddb = new DropDownButton({
+      content: 'Numbering',
+      cssClass: 'e-flat',
+      items: [{
+        id: 'lvl-0',
+        text: '1.'
+      }, {
+        id: 'lvl-1',
+        text: '1.1'
+      }, {
+        id: 'lvl-2',
+        text: '1.1.1'
+      }, {
+        separator: true
+      }, {
+        id: 'clear',
+        text: 'Clear list'
+      }],
+      select: args => {
+        const ed = container.documentEditor.editor;
+        if (!ed) return;
+        switch (args.item.id) {
+          case 'lvl-0':
+            applyLevel(ed, 0);
+            break;
+          case 'lvl-1':
+            applyLevel(ed, 1);
+            break;
+          case 'lvl-2':
+            applyLevel(ed, 2);
+            break;
+          case 'clear':
+            ed.clearList();
+            break;
+          default:
+            break;
+        }
+      }
+    }, '#numbering-ddb');
+
+    // (optional) keep a ref if you want to dispose on unmount
+    container._numberingDDB = ddb;
+  };
   _react.default.useEffect(() => {
-    let toolbarItems = ["Undo", "Redo", "Separator", {
+    let toolbarItems = props.commentsOnly ? ["Comments"] : ["Undo", "Redo", "Separator", {
+      id: 'bullets',
+      text: '• Bullets',
+      tooltipText: 'Bulleted list'
+    }, "Separator", {
       tooltipText: 'Bold',
       prefixIcon: 'e-icons e-bold',
       command: 'Bold'
@@ -87,6 +242,14 @@ const WordDocumentViewer = props => {
       }));
     }
   }, [props.file]);
+  _react.default.useEffect(() => {
+    if (reRendering) {
+      const timer = window.setTimeout(() => {
+        setVisible(true);
+      }, 1_000);
+      return () => window.clearTimeout(timer);
+    }
+  }, [reRendering]);
   function setupContainer() {
     container.documentEditor.currentUser = _ApplicationManager.default.getUserDetails().name + " " + _ApplicationManager.default.getUserDetails().surname;
   }
@@ -144,12 +307,39 @@ const WordDocumentViewer = props => {
       //container.documentEditor.isReadOnly = (props.readOnly || props.commentsOnly);
     }
   }, [json, container]);
+  const onToolbarClick = args => {
+    const ed = container?.documentEditor?.editor;
+    if (!ed) return;
+    switch (args.item.id) {
+      case 'bullets':
+        ed.applyBullet('\uf0b7', 'Symbol'); // •
+        break;
+      case 'numbering':
+        ed.applyNumbering('%1.', 'Arabic'); // 1.
+        break;
+      case 'level-0':
+        applyLevel(ed, 0);
+        break;
+      case 'level-1':
+        applyLevel(ed, 1);
+        break;
+      case 'level-2':
+        applyLevel(ed, 2);
+        break;
+      case 'clear-list':
+        ed.clearList();
+        break;
+      default:
+      // let built-ins (Undo/Redo/New/Open) work normally
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'no-margin no-padding',
     style: {
       height: '100%'
     },
-    id: `parent-container`
+    id: `parent-container`,
+    ref: ref
   }, !visible && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '100%',
@@ -178,7 +368,7 @@ const WordDocumentViewer = props => {
     style: {
       color: 'rgba(255, 255, 255, 0.8)'
     }
-  }, errorMessage))), items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+  }, errorMessage))), visible && items && (_Utils.default.isNull(props.trackChanges) || props.trackChanges === true) && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: `${props.id}-container`,
     height: '690px',
     ref: scope => {
@@ -191,13 +381,14 @@ const WordDocumentViewer = props => {
       }
     },
     enablePersistence: false,
+    toolbarClick: onToolbarClick,
     toolbarItems: items,
-    restrictEditing: props.readOnly,
+    restrictEditing: props.readOnly && !props.commentsOnly,
     showPropertiesPane: false,
     enableTrackChanges: true,
     serviceUrl: DOCSVC,
-    enableToolbar: !(props.readOnly || props.commentsOnly)
-  }), items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+    enableToolbar: !props.readOnly || props.commentsOnly
+  }), visible && items && props.trackChanges === false && /*#__PURE__*/_react.default.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
     id: `${props.id}-container`,
     height: '690px',
     ref: scope => {
@@ -210,11 +401,12 @@ const WordDocumentViewer = props => {
       }
     },
     enablePersistence: false,
+    toolbarClick: onToolbarClick,
     toolbarItems: items,
-    restrictEditing: props.readOnly,
+    restrictEditing: props.readOnly && !props.commentsOnly,
     showPropertiesPane: false,
     serviceUrl: DOCSVC,
-    enableToolbar: !(props.readOnly || props.commentsOnly)
+    enableToolbar: !props.readOnly || props.commentsOnly
   }));
 };
 var _default = exports.default = WordDocumentViewer;

package/dist/components/customInput/CustomInput.js

@@ -62,7 +62,10 @@ function CustomInput(props) {
     minLength: inputProps && inputProps.minLength ? inputProps.minLength : undefined
   };
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, _extends({}, formControlProps, {
-    className: formControlClasses
+    className: formControlClasses,
+    style: {
+      marginTop: '20px'
+    }
   }), labelText !== undefined ? /*#__PURE__*/_react.default.createElement(_InputLabel.default, _extends({
     className: classes.labelRoot + " " + labelClasses,
     htmlFor: id

package/dist/components/dashboard/FoldingSideTabDashboard.css

@@ -0,0 +1,3 @@
+.sidebar .nav {
+    margin-top: 0 !important;
+}