npm - @agilemotion/oui-react-js - Versions diffs - 1.8.1 → 1.8.3 - Mend

@agilemotion/oui-react-js 1.8.1 → 1.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (310) hide show

package/dist/components/DataGrid.js CHANGED Viewed

@@ -5,29 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = exports.DataGrid = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _reactSuperResponsiveTable = require("react-super-responsive-table");
 require("react-super-responsive-table/dist/SuperResponsiveTableStyle.css");
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 require("./DataGrid.css");
-var _RestUtils = require("../RestUtils");
+var _RestService = require("../RestService");
 var _DataGridFilter = _interopRequireDefault(require("./DataGridFilter"));
 var _DataGridHeading = _interopRequireDefault(require("./DataGridHeading"));
 var _TableCellContent = _interopRequireDefault(require("./TableCellContent"));
-var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
+var _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
 var _colors = require("material-ui/styles/colors");
 var _Event = _interopRequireDefault(require("../event/Event"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _mobx = require("mobx");
 var $ = _interopRequireWildcard(require("jquery"));
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 var _Layout = require("./layout/Layout");
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
+var _actions = require("npm/lib/install/actions");
 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 }; }
@@ -107,7 +108,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     width: 1
   }
 }));
-const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
   const [order, setOrder] = _react.default.useState('desc');
   const [config] = _react.default.useState(_Utils.default.parseConfig(props.config, props.viewId));
@@ -406,12 +407,15 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
         serviceType = 'rpc';
       }
       if (serviceType === 'rpc' || serviceType === 'rest') {
-        let method = serviceType === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
-        method(service, props.handle, props.viewId, result => {
+        let method = serviceType === 'rpc' ? _RestService.invokeRpc : _RestService.invokeRest;
+        method({
+          service: service,
+          component: props.handle,
+          viewId: props.viewId
+        }).then(result => {
           processData(result, conf);
-        }, e => {
+        }).catch(e => {
           console.error(e);
-          //Utils.publishSystemErrorMessage(props.viewId);
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);
@@ -548,7 +552,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
   const editorChangeHandler = (rowId, field, value) => {
     for (const row of rows) {
       if (row.id === rowId) {
-        row[field] = value;
+        _Utils.default.updateNestedProperty(row, field, value);
         break;
       }
     }
@@ -655,7 +659,6 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     return editorHandles[column.id + "_editor"];
   }
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
       margin: '0',
       border: '1px solid #e2e2e2',
@@ -686,6 +689,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     ref: /*#__PURE__*/_react.default.createRef(),
     handle: filterHandle,
     config: props.config,
+    viewId: props.viewId,
     filterWrapperClass: props.filterWrapperClass,
     scrollWidth: scrollWidth,
     onFilterSubmit: search,
@@ -712,10 +716,16 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     style: {
       width: '100%'
     }
+  }, /*#__PURE__*/_react.default.createElement("thead", {
+    className: 'filterHead',
+    style: {
+      width: 'calc(100% - ' + props.scrollWidth + 'px)'
+    }
   }, isFilterable() ? /*#__PURE__*/_react.default.createElement(_DataGridFilter.default, {
     handle: filterHandle,
     ref: /*#__PURE__*/_react.default.createRef(),
     config: config,
+    viewId: props.viewId,
     filterWrapperClass: props.filterWrapperClass,
     scrollWidth: scrollWidth,
     onFilterSubmit: search,
@@ -729,7 +739,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     onSelectAllClick: handleSelectAllClick,
     onRequestSort: handleRequestSort,
     rowCount: totalNumberOfRows
-  }), /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tbody, {
+  })), /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tbody, {
     className: classes.tableBody,
     style: {
       maxHeight: _Utils.default.isNull(props.bodyMaxHeight) ? props.bodyMaxHeight : '42vh'
@@ -740,7 +750,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     const labelId = `enhanced-table-checkbox-${index}`;
     let defaultRowStyle = {
       display: 'flex',
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
+      alignItems: 'center'
     };
     return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
       style: props.config.rowAttributes && props.config.rowAttributes.style ? _Utils.default.mergeObjects(props.config.rowAttributes.style, defaultRowStyle) : defaultRowStyle,
@@ -764,7 +775,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     })) : null, config.columns.map(column => column.attributes['hidden'] === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       style: {
         padding: 0,
-        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%'
+        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
+        height: '100%'
       },
       align: "left",
       className: isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
@@ -779,7 +791,8 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
       parent: false
     })) : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       style: {
-        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%'
+        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
+        height: '100%'
       },
       align: "left",
       className: isItemSelected && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
@@ -811,7 +824,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     nextIconButtonProps: {
       'aria-label': 'next page'
     },
-    onChangePage: handleChangePage,
-    onChangeRowsPerPage: handleChangeRowsPerPage
+    onPageChange: handleChangePage,
+    onRowsPerPageChange: handleChangeRowsPerPage
   }) : null) : null);
 }));

package/dist/components/DataGridColumn.js CHANGED Viewed

@@ -8,9 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _reactSuperResponsiveTable = require("react-super-responsive-table");
-var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
 require("./DataGrid.css");
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const useStyles = (0, _styles.makeStyles)(theme => ({
   tableHeaderCell: {
@@ -22,7 +22,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     textAlign: 'right !important'
   }
 }));
-const DataGridColumn = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DataGridColumn = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [config, setConfig] = _react.default.useState(props.config);
   const [label] = _react.default.useState(props.config.attributes['label']);
   const [postfix, setPostfix] = _react.default.useState('');
@@ -61,7 +61,9 @@ const DataGridColumn = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     padding: 'default',
     className: config.cellFormat === 'MONEY' || config.cellFormat === 'NUMBER' ? classes.tableHeaderCellNumeric : classes.tableHeaderCell,
     style: {
-      width: config.attributes.width
+      width: config.attributes.width,
+      display: 'flex',
+      alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
     active: config.attributes['sortable'] === true,

package/dist/components/DataGridFilter.js CHANGED Viewed

@@ -10,11 +10,11 @@ var _reactSuperResponsiveTable = require("react-super-responsive-table");
 var _Form = _interopRequireDefault(require("./form/Form"));
 require("./form/Form.css");
 var _DataGrid = require("./DataGrid");
-var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DataGridFilter = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     onFilterSubmit,
     config
@@ -58,16 +58,16 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     }
     editorConfig.className = 'columnFilterEditor';
     editorConfig.attributes = !_Utils.default.isNull(attributes) ? attributes : {};
-    if (!editorConfig.attributes.minWidth) {
-      editorConfig.attributes.minWidth = 0;
-    }
-    if (!editorConfig.attributes.marginLeft) {
-      editorConfig.attributes.marginLeft = 0;
-    }
-    editorConfig.attributes.style = {
+    editorConfig.attributes.containerStyle = _Utils.default.mergeObjects({
       minWidth: 0,
-      maxWidth: '98%'
-    };
+      maxWidth: '98%',
+      marginLeft: 0
+    }, editorConfig.attributes.containerStyle);
+    editorConfig.attributes.style = _Utils.default.mergeObjects({
+      minWidth: 0,
+      maxWidth: '98%',
+      marginLeft: 0
+    }, editorConfig.attributes.style);
     editorConfig.dataBinding = columnId;
     return editorConfig;
   };
@@ -173,8 +173,9 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
           let column = props.config.columns[i];
           if (column.attributes['filterable'] === true) {
             let param = {};
-            param.name = column.id;
-            param.value = _Utils.default.isNull(model[column.id]) ? null : model[column.id];
+            param.name = column.dataBinding || column.id;
+            let val = model[column.id];
+            param.value = _Utils.default.isNull(val) || typeof val === 'string' && val.toString().trim().length === 0 ? null : val;
             if (column.fieldType === 'DATE') {
               if (param.value === null) {
                 param.value = new Date().getTime();
@@ -200,7 +201,6 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     };
   };
   return config.gridType === 'TILE' ? /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     className: 'row'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'col'
@@ -227,13 +227,7 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-label": "search",
     onClick: submitFilter
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))) : !_Utils.default.isNull(numVisibleCols) ? /*#__PURE__*/_react.default.createElement("thead", {
-    className: 'filterHead',
-    style: {
-      width: 'calc(100% - ' + props.scrollWidth + 'px)'
-    },
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))) : !_Utils.default.isNull(numVisibleCols) ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
     style: {
       display: 'flex',
       flexWrap: 'wrap'
@@ -249,17 +243,14 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       width: column.width
     }
   }, !column.attributes['hidden'] ? column.attributes['filterable'] === true ? /*#__PURE__*/_react.default.createElement("div", {
-    className: !_Utils.default.isNull(props.filterWrapperClass) ? props.filterWrapperClass : 'filterWraper'
-  }, /*#__PURE__*/_react.default.createElement("table", {
-    width: "100%"
-  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
-    style: {
-      overflow: 'hidden !important'
-    }
+    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'
   }, /*#__PURE__*/_react.default.createElement(_Form.default, {
     config: createFormConfig(column, column.id),
     handle: createFormHandle(),
     ref: /*#__PURE__*/_react.default.createRef(),
+    viewId: props.viewId,
     keyHandler: e => {
       if (e.key === 'Enter') {
         submitFilter();
@@ -274,17 +265,19 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
         fieldValidity[id] = false;
       }
     }
-  })), ++columnCounter === numVisibleCols ? /*#__PURE__*/_react.default.createElement("td", {
-    className: 'filterWraperSearchIcon'
+  })), ++columnCounter === numVisibleCols && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'col-*-*',
+    style: {
+      width: '52px',
+      marginTop: "4px"
+    }
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    "aria-label": "search",
     onClick: submitFilter
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))) : null)))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "filterWraperBlank"
-  }, ++columnCounter === numVisibleCols ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    "aria-label": "delete",
+  }, ++columnCounter === numVisibleCols && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     onClick: submitFilter
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)) : null) : null)))) : null;
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))) : null))) : null;
 }));
 function arePropsEqual(prev, next) {
   return prev.config === next.config && prev.scrollWidth === next.scrollWidth;

package/dist/components/DataGridHeading.js CHANGED Viewed

@@ -7,10 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactSuperResponsiveTable = require("react-super-responsive-table");
 var _DataGrid = require("./DataGrid");
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _DataGridColumn = _interopRequireDefault(require("./DataGridColumn"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@material-ui/core/styles");
+var _styles = require("@mui/styles");
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -21,7 +21,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
     overflow: 'inherit'
   }
 }));
-const DataGridHeading = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DataGridHeading = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
   const {
     onSelectAllClick,
@@ -37,9 +37,6 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
-  _react.default.useEffect(() => {
-    console.log('DATA GRID HEADING RENDERED');
-  }, []);
   const createColumnHandle = () => {
     let handle = {};
     columnHandles.push(handle);
@@ -56,16 +53,11 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
       }
     };
   };
-  return /*#__PURE__*/_react.default.createElement("thead", {
-    className: classes.tableHead,
-    style: {
-      width: "calc(100% - " + props.scrollWidth + "px)"
-    },
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
+  return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
     style: {
       display: 'flex',
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
+      height: '56px'
     }
   }, props.config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Th, {
     padding: "checkbox",
@@ -84,7 +76,7 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.de
     handle: createColumnHandle(),
     ref: /*#__PURE__*/_react.default.createRef(),
     createSortHandler: createSortHandler
-  }))));
+  })));
 }));
 DataGridHeading.propTypes = {
   numSelected: _propTypes.default.number.isRequired,

package/dist/components/Dialog.js CHANGED Viewed

@@ -8,11 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _Layout = require("./layout/Layout");
-var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
-var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Dialog = exports.Dialog = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Dialog = exports.Dialog = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [layoutHandle] = _react.default.useState({});
   const [model] = _react.default.useState({});
   const [open, setOpen] = _react.default.useState(false);

package/dist/components/DocumentTemplateDesigner.css CHANGED Viewed

File without changes

package/dist/components/DocumentTemplateDesigner.js CHANGED Viewed

@@ -12,7 +12,7 @@ var _DocumentTemplateDesignerComponent = _interopRequireDefault(require("./Docum
 var _Event = _interopRequireDefault(require("../event/Event"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DocumentTemplateDesigner = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DocumentTemplateDesigner = props => {
   const [visible, setVisible] = _react.default.useState(false);
   const [loading, setLoading] = _react.default.useState(true);
   const [value, setValue] = _react.default.useState(null);
@@ -23,6 +23,10 @@ const DocumentTemplateDesigner = /*#__PURE__*/_react.default.forwardRef((props,
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
+  _react.default.useEffect(() => {
+    let event = new _Event.default(props.handle, props.viewId, value);
+    _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+  }, [value]);
   _react.default.useEffect(() => {
     props.handle.api = api();
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
@@ -79,7 +83,6 @@ const DocumentTemplateDesigner = /*#__PURE__*/_react.default.forwardRef((props,
     setValue(newValue);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     className: 'documentTemplateDesigner',
     style: _Utils.default.mergeStyles({
       display: visible ? 'block' : 'none',
@@ -97,5 +100,5 @@ const DocumentTemplateDesigner = /*#__PURE__*/_react.default.forwardRef((props,
     value: value,
     valueChangeHandler: onValueChange
   }));
-});
+};
 var _default = exports.default = DocumentTemplateDesigner;

package/dist/components/DocumentTemplateDesignerComponent.css CHANGED Viewed

File without changes

package/dist/components/DocumentTemplateDesignerComponent.js CHANGED Viewed

@@ -32,6 +32,7 @@ const DocumentTemplateDesignerComponent = props => {
   const model = React.useRef({});
   const [doc, setDoc] = React.useState(null);
   const [file, setFile] = React.useState(null);
+  const [documentData, setDocumentData] = React.useState(null);
   const [contentState] = React.useState({
     changed: false
   });
@@ -139,7 +140,7 @@ const DocumentTemplateDesignerComponent = props => {
           body: formData
         }).then(response => {
           (0, _reactPromiseTracker.trackPromise)(response.json().then(json => {
-            container.documentEditor.open(json);
+            setDocumentData(json);
           }));
         }));
       }
@@ -187,9 +188,7 @@ const DocumentTemplateDesignerComponent = props => {
       for (const property of initialFormValue.properties) {
         property.id = i++;
       }
-      //console.log("\n\n\n\n\n\nINITITIAL VALUES : ", initialFormValue);
-      propertiesFormHandle.current.api.model = initialFormValue;
+      propertiesFormHandle.current.api.bindData(initialFormValue);
       saveDoc().then(blob => {
         const newFile = new File([blob], props.documentName, {
           type: blob.type
@@ -199,10 +198,11 @@ const DocumentTemplateDesignerComponent = props => {
           if (!initialFormValue) {
             valueChangeHandler(null);
           } else {
-            valueChangeHandler({
+            let newVal = validateProps(initialFormValue.properties) ? {
               properties: initialFormValue.properties,
               file: newFile
-            });
+            } : null;
+            valueChangeHandler(newVal);
           }
         }
         contentState.changed = false;
@@ -212,6 +212,11 @@ const DocumentTemplateDesignerComponent = props => {
   (0, _react.useEffect)(() => {
     setup();
   }, [doc]);
+  (0, _react.useEffect)(() => {
+    if (container && documentData) {
+      container.documentEditor.open(JSON.stringify(documentData));
+    }
+  }, [documentData]);
   const validateProps = properties => {
     let valid = properties && properties.length > 0;
     if (valid) {
@@ -393,6 +398,7 @@ const DocumentTemplateDesignerComponent = props => {
     //documentEditorSettings={searchHighlightColor}
     ,
     showPropertiesPane: false,
+    enableTrackChanges: false,
     toolbarItems: items,
     toolbarClick: onToolbarClick,
     contentChange: onContentChange,

package/dist/components/DocumentTemplatePlaceholderDialog.js CHANGED Viewed

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _core = require("@material-ui/core");
-var _icons = require("@material-ui/icons");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 require("./DocumentTemplateDesignerComponent.css");
 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; }
@@ -32,7 +32,7 @@ const DocumentTemplatePlaceholderDialog = _ref => {
   }];
   const {
     palette
-  } = (0, _core.useTheme)();
+  } = (0, _material.useTheme)();
   const handleListItemClick = index => {
     setSelectedIndex(index);
   };
@@ -43,16 +43,16 @@ const DocumentTemplatePlaceholderDialog = _ref => {
     }
     onClose();
   };
-  return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
+  return /*#__PURE__*/_react.default.createElement(_material.Dialog, {
     open: open,
     onClose: onClose,
     fullWidth: true,
     maxWidth: 'md'
-  }, /*#__PURE__*/_react.default.createElement(_core.DialogTitle, null, "Select a Placeholder"), /*#__PURE__*/_react.default.createElement(_core.DialogContent, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_material.DialogTitle, null, "Select a Placeholder"), /*#__PURE__*/_react.default.createElement(_material.DialogContent, null, /*#__PURE__*/_react.default.createElement("div", {
     id: "customTbarDialog"
-  }, /*#__PURE__*/_react.default.createElement(_core.List, null, placeholders.map((placeholder, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+  }, /*#__PURE__*/_react.default.createElement(_material.List, null, placeholders.map((placeholder, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
     key: index
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItem, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
     button: true,
     selected: selectedIndex === index,
     onClick: () => handleListItemClick(index)
@@ -63,13 +63,13 @@ const DocumentTemplatePlaceholderDialog = _ref => {
       margin: '4px 0',
       borderRadius: '4px'
     }
-  }, /*#__PURE__*/_react.default.createElement(_core.ListItemAvatar, null, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, /*#__PURE__*/_react.default.createElement(_icons.AddCircle, null))), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
+  }, /*#__PURE__*/_react.default.createElement(_material.ListItemAvatar, null, /*#__PURE__*/_react.default.createElement(_material.Avatar, null, /*#__PURE__*/_react.default.createElement(_iconsMaterial.AddCircle, null))), /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
     primary: placeholder.title,
     secondary: ''
-  })), index < placeholders.length - 1 && /*#__PURE__*/_react.default.createElement(_core.Divider, null)))))), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+  })), index < placeholders.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, null)))))), /*#__PURE__*/_react.default.createElement(_material.DialogActions, null, /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: onClose,
     color: "primary"
-  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_core.Button, {
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: handleInsert,
     color: "primary",
     disabled: selectedIndex === null

package/dist/components/DocumentViewer.js CHANGED Viewed

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Utils = _interopRequireDefault(require("../Utils"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-var _RestUtils = require("../RestUtils");
+var _RestService = require("../RestService");
 var _ServiceCallActionHandler = _interopRequireDefault(require("../event/ServiceCallActionHandler"));
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
 require("./DocumentViewer.css");
@@ -17,7 +17,7 @@ var _WordDocumentViewer = _interopRequireDefault(require("./WordDocumentViewer")
 var _Event = _interopRequireDefault(require("../event/Event"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [loading, setLoading] = _react.default.useState(true);
   const [label, setLabel] = _react.default.useState(null);
   const [hasLoadingError, setHasLoadingError] = _react.default.useState(false);
@@ -43,7 +43,11 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
       let service = !_Utils.default.isNull(props.config.dataService) ? props.config.dataService : actionConfig !== null ? actionConfig.dataService : null;
       if (!_Utils.default.isNull(service)) {
         if (service.type === 'rpc') {
-          (0, _RestUtils.invokeRpc)(service, props.handle, props.viewId, result => {}, e => {}, parameter => {});
+          (0, _RestService.invokeRpc)({
+            service: service,
+            component: props.handle,
+            viewId: props.viewId
+          }).then(response => {}).catch(e => {});
         } else {
           if (_Utils.default.isNull(actionConfig)) {
             actionConfig = {};
@@ -110,13 +114,12 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     };
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
     style: _Utils.default.mergeStyles({}, props.config)
   }, props.config.attributes?.label && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
+    style: _Utils.default.mergeObjects({
       fontSize: '20px',
       color: '#1d253b'
-    }
+    }, props.config.attributes?.labelStyle)
   }, label), loading && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginTop: '16px'
@@ -133,6 +136,10 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.def
     file: value,
     onDocumentLoadSuccess: () => {},
     valueHandler: wordEditorValueHandler,
+    valueChangeHandler: () => {
+      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,