@agilemotion/oui-react-js 1.8.57 → 1.8.59

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -4,503 +4,52 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _ej2ReactDocumenteditor = require("@syncfusion/ej2-react-documenteditor");
-var _ej2Base = require("@syncfusion/ej2-base");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
+var React = _interopRequireWildcard(require("react"));
 require("./DocumentTemplateDesignerComponent.css");
-var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _DocumentViewer = _interopRequireDefault(require("./DocumentViewer"));
 var _Form = _interopRequireDefault(require("./form/Form"));
-var _EventType = _interopRequireDefault(require("../event/EventType"));
-var _Observable = _interopRequireDefault(require("../event/Observable"));
-var _Utils = _interopRequireDefault(require("../Utils"));
-var _reactPromiseTracker = require("react-promise-tracker");
-var _WordDocumentViewer = require("./WordDocumentViewer");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-(0, _ej2Base.registerLicense)(_WordDocumentViewer.KEY);
-_ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const DocumentTemplateDesignerComponent = props => {
-  const {
-    contractTemplate,
-    uploadTrigger,
-    valueChangeHandler,
-    addDocumentMetaDataHandler,
-    value
-  } = props;
-  const [container, setContainer] = React.useState(null);
-  const model = React.useRef({});
+  const propertiesComponentHandle = React.useState({});
+  const templateDesignerComponentHandle = React.useState({});
   const [doc, setDoc] = React.useState(null);
-  const [file, setFile] = React.useState(null);
-  const [documentData, setDocumentData] = React.useState(null);
-  const [contentState] = React.useState({
-    changed: false
-  });
-  const btnRef = (0, _react.useRef)(null);
-  const currentVal = (0, _react.useRef)(null);
-  const propertiesFormHandle = React.useRef({});
-  const onToolbarClick = args => {
-    switch (args.item.id) {
-      case "Custom":
-        break;
-      default:
-        break;
-    }
-  };
-  const onWrapText = text => {
-    let content = '';
-    const index = text.lastIndexOf(' ');
-    if (index !== -1) {
-      content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
-    } else {
-      content = text;
-    }
-    return content;
-  };
-  const findNext = () => {
-    container.documentEditor.search.searchResults.index = container.documentEditor.search.searchResults.index + 1;
-  };
-  const findPrev = () => {
-    container.documentEditor.search.searchResults.index = container.documentEditor.search.searchResults.index - 1;
-  };
-  let next = {
-    prefixIcon: "e-chevron-down",
-    click: findNext.bind(void 0),
-    tooltipText: 'Next placeholder',
-    text: '',
-    id: "NextPlaceHolder"
-  };
-  let previous = {
-    prefixIcon: "e-chevron-up",
-    click: findPrev.bind(void 0),
-    tooltipText: 'Previous placeholder',
-    text: '',
-    id: "PrevPlaceHolder"
-  };
-  let apply = {
-    prefixIcon: "e-icons e-save",
-    click: applyChanges.bind(void 0),
-    tooltipText: 'Previous placeholder',
-    text: 'Apply',
-    id: "PrevPlaceHolder"
-  };
-  let items = ["Open", apply, "Undo", "Redo", "Separator", {
-    tooltipText: 'Bold',
-    prefixIcon: 'e-icons e-bold',
-    command: 'Bold'
-  }, {
-    tooltipText: 'Italic',
-    prefixIcon: 'e-icons e-italic',
-    command: 'Italic'
-  }, "Separator", "Image", "Table", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "InsertFootnote", "Separator", "Find"];
-  let searchHighlightColor = {
-    searchHighlightColor: 'Red'
-  };
-  const saveDoc = () => {
-    return new Promise((accept, reject) => {
-      if (container && container.documentEditor) {
-        container.documentEditor.saveAsBlob('Docx').then(blob => {
-          accept(blob);
-        }).catch(e => {
-          console.error("Error saving document");
-          reject(e);
-        });
-      }
-    });
-  };
-  const onContentChange = () => {
-    contentState.changed = true;
-  };
-  (0, _react.useEffect)(() => {
-    if (uploadTrigger != null && btnRef.current) {
-      btnRef.current.click();
-    }
-  }, [uploadTrigger]);
-  (0, _react.useEffect)(() => {
-    if (value) {
-      let i = 0;
-      for (const property of value.properties) {
-        property.id = i++;
-      }
-      propertiesFormHandle.current.api.model = {
-        properties: value.properties
-      };
-      if (value.file && value.file.url) {
-        let tokens = value.file.url.split(';base64,');
-        let type = tokens[0].replace("data:", "");
-        let base64 = tokens[1];
-        const arrayBuffer = _Utils.default.base64ToArrayBuffer(base64);
-        const file = new Blob([arrayBuffer], {
-          type
-        });
-        const formData = new FormData();
-        formData.append('files', file, 'document.docx');
-        (0, _reactPromiseTracker.trackPromise)(fetch("".concat(_WordDocumentViewer.DOCSVC, "Import"), {
-          method: 'POST',
-          body: formData
-        }).then(response => {
-          (0, _reactPromiseTracker.trackPromise)(response.json().then(json => {
-            setDocumentData(json);
-          }));
-        }));
-      }
-    }
-  }, [value]);
-  const getFooterText = () => {
-    container.documentEditor.selection.goToFooter();
-    container.documentEditor.selection.selectAll();
-    let footerText = container.documentEditor.selection.getText();
-    container.documentEditor.selection.closeHeaderFooter();
-    container.documentEditor.selection.clear();
-    return footerText;
-  };
-  function applyChanges() {
-    setup();
-  }
-  const comparePositions = (a, b) => {
-    if (a.location.yIn === b.location.yIn && a.location.xIn === b.location.xIn) {
-      return 0;
-    }
-    if (a.location.yIn > b.location.yIn) {
-      return 1;
-    }
-    if (a.location.yIn < b.location.yIn) {
-      return -1;
-    }
-    if (a.location.yIn === b.location.yIn) {
-      if (a.location.xIn < b.location.xIn) {
-        return -1;
-      } else {
-        return 1;
-      }
-    }
-    return 0;
-  };
-  const getSearchStartPosition = (anchorPosition, searchList) => {
-    if (!anchorPosition) {
-      return searchList[0].startIn;
-    }
-    for (const searchListElement of searchList) {
-      if (comparePositions(searchListElement.startIn, anchorPosition) >= 0) {
-        return searchListElement.startIn;
-      }
-    }
-    return anchorPosition;
-  };
-  const getSearchEndPosition = (anchorPosition, searchList) => {
-    if (!anchorPosition) {
-      return searchList[0].endIn;
-    }
-    for (const searchListElement of searchList) {
-      if (comparePositions(searchListElement.endIn, anchorPosition) >= 0) {
-        return searchListElement.endIn;
-      }
-    }
-    return anchorPosition;
-  };
-  function generateSubstrings(sentence) {
-    let substrings = [];
-    for (let i = 0; i < sentence.length; i++) {
-      substrings.push(sentence.substring(0, i + 1)); // Add substring from index 0 to i
-    }
-    return substrings;
-  }
-  function detectWordWrap(anchorPosition, startPosition, endPosition, editor, sentence, startY) {
-    let substrings = generateSubstrings(sentence);
-    let wordWrapAnchorPosition = anchorPosition;
-    let wordWrapPositions = [];
-    if (substrings.length === 1) {
-      wordWrapPositions.push({
-        startPosition,
-        endPosition
-      });
-    } else {
-      let wordWrapTokens = [];
-      let currentY = startY;
-      let wordWrapIndex = 0;
-      let pos = 0;
-      for (const substring of substrings) {
-        container.documentEditor.search.find(substring);
-        let endPosition = getSearchEndPosition(wordWrapAnchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
-        wordWrapAnchorPosition = endPosition;
-        if (endPosition.location.yIn > currentY) {
-          wordWrapTokens.push(sentence.substring(wordWrapIndex, pos));
-          currentY = endPosition.location.yIn;
-          wordWrapIndex = pos;
-        }
-        pos++;
-      }
-
-      //Add last substring
-      wordWrapTokens.push(sentence.substring(wordWrapIndex, sentence.length));
-      //console.log("\n\n\n\n\nWORD WRAP TOKENS : [" + wordWrapIndex + "]", wordWrapTokens);
-      for (const wordWrapToken of wordWrapTokens) {
-        container.documentEditor.search.find(wordWrapToken);
-        let startPosition = getSearchStartPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
-        let endPosition = getSearchEndPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
-        wordWrapPositions.push({
-          startPosition,
-          endPosition
-        });
-      }
-    }
-    return wordWrapPositions;
-  }
-  const setPlaceholderPositions = prop => {
-    console.log("SETTING PLACE HOLDER POSITIONS FOR : " + prop.placeHolder);
-    container.documentEditor.search.find(prop.originalText);
-    let searchResults = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList;
-    prop.positions = [];
-    for (const searchResult of searchResults) {
-      if (searchResult.endIn.location.yIn > searchResult.startIn.location.yIn) {
-        let positions = detectWordWrap(searchResult.startIn, searchResult.startIn, searchResult.endIn, container.documentEditor, prop.originalText, searchResult.startIn.location.yIn);
-        for (const position of positions) {
-          prop.positions.push({
-            start: {
-              paragraph: {
-                x: position.startPosition.currentWidget.paragraph.x,
-                y: position.startPosition.currentWidget.paragraph.y,
-                height: position.startPosition.currentWidget.paragraph.height
-              },
-              x: position.startPosition.location.xIn,
-              y: position.startPosition.location.yIn
-            },
-            end: {
-              paragraph: {
-                x: position.endPosition.currentWidget.paragraph.x,
-                y: position.endPosition.currentWidget.paragraph.y,
-                height: position.endPosition.currentWidget.paragraph.height
-              },
-              x: position.endPosition.location.xIn,
-              y: position.endPosition.location.yIn
-            }
-          });
-        }
-      } else {
-        prop.positions.push({
-          start: {
-            paragraph: {
-              x: searchResult.startIn.currentWidget.paragraph.x,
-              y: searchResult.startIn.currentWidget.paragraph.y,
-              height: searchResult.startIn.currentWidget.paragraph.height
-            },
-            x: searchResult.startIn.location.xIn,
-            y: searchResult.startIn.location.yIn
-          },
-          end: {
-            paragraph: {
-              x: searchResult.endIn.currentWidget.paragraph.x,
-              y: searchResult.endIn.currentWidget.paragraph.y,
-              height: searchResult.endIn.currentWidget.paragraph.height
-            },
-            x: searchResult.endIn.location.xIn,
-            y: searchResult.endIn.location.yIn
-          }
-        });
-      }
-    }
-    console.log(prop);
-    console.log("\n\n");
-  };
-  function setup() {
-    let initialFormValue = {
-      properties: []
-    };
-    if (container) {
-      container.documentEditor.selection.selectAll();
-      const text = container.documentEditor.selection.getText();
-      container.documentEditor.selection.clear();
-      const bodyMatches = removeNextLineCharsFromPlaceholders(text, '<<', '>>');
-      const footerText = getFooterText();
-      let footerMatches = removeNextLineCharsFromPlaceholders(footerText, '<<', '>>');
-      const matches = bodyMatches.concat(footerMatches);
-
-      //container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
-      //container.documentEditor.search.findAll(/<<[\s\S]*?>>/g);
-
-      matches.forEach(match => {
-        let prop = model.current.properties.find(p => p.placeHolder === match.text);
-        if (!prop) {
-          prop = {
-            placeHolder: match.text
-          };
-        }
-        prop.originalText = match.originalText;
-        setPlaceholderPositions(prop);
-        if (!initialFormValue.properties.find(p => p.placeHolder === match.text)) {
-          initialFormValue.properties.push(prop);
-        }
-      });
-      let i = 0;
-      for (const property of initialFormValue.properties) {
-        property.id = i++;
-      }
-      propertiesFormHandle.current.api.bindData(initialFormValue);
-      saveDoc().then(blob => {
-        const newFile = new File([blob], props.documentName, {
-          type: blob.type
-        });
-        setFile(newFile);
-        if (contentState.changed) {
-          if (!initialFormValue) {
-            valueChangeHandler(null);
-          } else {
-            let newVal = validateProps(initialFormValue.properties) ? {
-              properties: initialFormValue.properties,
-              file: newFile
-            } : null;
-            valueChangeHandler(newVal);
-          }
-        }
-        contentState.changed = false;
-      });
-    }
-  }
-  (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) {
-      for (const property of properties) {
-        if (!property.valueField) {
-          valid = false;
-          break;
-        }
-      }
-    }
-    return valid;
-  };
-  const removeNextLineCharsFromPlaceholders = (text, startTag, endTag) => {
-    const matches = [];
-    let index = 0;
-    while (index < text.length) {
-      const startIndex = text.indexOf(startTag, index);
-      if (startIndex === -1) break;
-      const endIndex = text.indexOf(endTag, startIndex + startTag.length);
-      if (endIndex === -1) break;
-      let find = text.substring(startIndex, endIndex + endTag.length);
-      let split = find.split("\r");
-      if (split.length > 1) {
-        container.documentEditor.search.find(split[0]);
-        let startPosition = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList[0].startIn;
-        container.documentEditor.search.find(split[split.length - 1]);
-        let endPosition = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList[0].endIn;
-        let selection = container.documentEditor.selection;
-        selection.selectRange(startPosition, endPosition);
-        if (selection && selection.start && selection.end) {
-          let selectedText = selection.getText();
-          container.documentEditor.editor.delete();
-          container.documentEditor.editor.insertText(selectedText.replace(/(\r\n|\n|\r)/gm, ""));
-        } else {
-          console.error("No valid selection found");
-        }
-      }
-      matches.push({
-        originalText: find,
-        start: startIndex,
-        end: endIndex + endTag.length,
-        text: find.replace(/(\r\n|\n|\r)/gm, "")
-      });
-      index = endIndex + endTag.length;
-    }
-    return matches;
-  };
-  function setupContainer() {
-    container.documentEditor.currentUser = _ApplicationManager.default.getUserDetails().name + " " + _ApplicationManager.default.getUserDetails().surname;
-  }
-  (0, _react.useEffect)(() => {
-    if (container) {
-      setupContainer();
-      //autoSave();
-
-      const editor = container.documentEditor;
-      editor.addEventListener("keyDown", event => {
-        const startPosition = container.documentEditor.selection.start;
-        let selectedProperty;
-        for (const property of model.current.properties) {
-          for (const position of property.positions) {
-            if (position.start.y === startPosition.location.yIn && position.start.x <= startPosition.location.xIn && position.end.x >= startPosition.location.xIn) {
-              selectedProperty = property;
-              break;
-            }
-          }
-        }
-        if (selectedProperty) {
-          event.event.preventDefault();
-          if (event.event.key === "Backspace") {
-            // For some reason, preventDefault does not work on the backspace key so we throw this exception as a temporary measure to prevent it
-            throw new Error("Backspace pressed on restricted area");
-          }
-        }
-      });
-    }
-  }, [container]);
-  (0, _react.useEffect)(() => {
+  React.useEffect(() => {
     props.handle.api = api();
   });
-  (0, _react.useEffect)(() => {
-    props.handle.api = api();
-    let eventHandlingConfig = {};
-    let defaultAction = {
-      actionType: 'script',
-      script: {
-        lines: ["@#{this}.highlightSelection($event.data)"]
-      }
-    };
-    eventHandlingConfig.subscriptions = [];
-    let subscription = {
-      publisher: 'propertiesGrid',
-      eventType: _EventType.default.SELECTION_CHANGE,
-      actions: [defaultAction]
-    };
-    eventHandlingConfig.subscriptions.push(subscription);
-    _Observable.default.addSubscriptions(_Utils.default.parseConfig({
-      id: props.id + "DocTemplateDesigner",
-      eventHandlingConfig
-    }, props.viewId).eventHandlingConfig, props.handle, props.viewId);
-    return () => {
-      _Observable.default.clearComponentEventListeners(props.handle);
-    };
-  }, []);
-  const doHighlightSelection = selectedPropertyRows => {
-    if (container && selectedPropertyRows && selectedPropertyRows.length > 0) {
-      container.documentEditor.selection.clear();
-      container.documentEditor.search.find(selectedPropertyRows[0].placeHolder);
-    }
-  };
-  const saveAsBase64 = async () => {
-    if (props.allowUnresolvedChanges === false && container.documentEditor.revisions.length > 0) {
-      setErrorMessage("Please accept or reject all suggested changes");
-      return null;
-    }
-    if (container) {
-      var _props$file, _props$file2;
-      container.documentEditor.editor.stopProtection("password");
-      let blob = await container.documentEditor.saveAsBlob('Docx');
-      if (props.commentsOnly) {
-        container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
-      }
-      return new File([blob], (_props$file = props.file) !== null && _props$file !== void 0 && _props$file.name ? props.file.name : 'document.docx', {
-        type: (_props$file2 = props.file) !== null && _props$file2 !== void 0 && _props$file2.type ? props.file.type : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-      });
+  React.useEffect(() => {
+    if (props.value) {
+      propertiesComponentHandle.api.model = {
+        properties: props.value.properties
+      };
     }
-  };
+  }, [props.value]);
   const api = () => {
     return {
       get id() {
-        return props.id + "DocTemplateDesigner";
+        return props.id + "-templateDesignerComponent";
       },
-      highlightSelection: selectedPropertyRow => {
-        doHighlightSelection(selectedPropertyRow);
+      getChildren: () => {
+        return [propertiesComponentHandle, templateDesignerComponentHandle];
       },
       getValue: () => {
-        return saveAsBase64();
+        if (templateDesignerComponentHandle.api) {
+          return {
+            file: templateDesignerComponentHandle.api.getValue(),
+            properties: propertiesComponentHandle.api.value
+          };
+        }
+      },
+      getDocumentValue: async () => {
+        if (templateDesignerComponentHandle.api) {
+          return templateDesignerComponentHandle.api.getDocumentValue();
+        }
+        return null;
       }
     };
   };
@@ -511,88 +60,39 @@ const DocumentTemplateDesignerComponent = props => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: "40%",
-      overflow: "auto",
+      width: "25%",
+      overflow: "hidden",
       minHeight: "250px",
       height: "100%",
-      border: "1px solid #e1e1e1",
       borderRadius: '4px',
-      marginRight: "4px"
+      padding: "0 16px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: "100%",
-      fontSize: "12px",
-      backgroundColor: "#fafafa",
-      padding: "8px",
-      height: "77px",
-      color: "rgba(0, 0, 0, 0.87)",
-      borderBottom: "#f1f1f1",
-      display: "flex",
-      alignItems: "center"
-    }
-  }, "Properties"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
+      width: "calc(100% - 8px)",
       marginTop: "4px",
-      padding: "0 8px"
+      padding: "0",
+      overflowY: "hidden",
+      maxHeight: "100%"
     }
   }, /*#__PURE__*/React.createElement(_Form.default, {
-    config: props.propertiesFormConfig,
-    handle: propertiesFormHandle.current,
-    valueChangeHandler: React.useCallback(val => {
-      model.current = val;
-      let newVal = validateProps(val.properties) ? val : null;
-      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal === null || newVal === void 0 ? void 0 : newVal.properties)) {
-        if (newVal) {
-          valueChangeHandler({
-            properties: val.properties,
-            file
-          });
-          currentVal.current = val.properties;
-        } else {
-          if (currentVal.current) {
-            currentVal.current = null;
-            valueChangeHandler(null);
-          }
-        }
-      }
-    }, [file]),
+    config: props.propertiesForm,
+    handle: propertiesComponentHandle,
     viewId: props.viewId,
     className: 'defaultForm'
   }))), props.visible && /*#__PURE__*/React.createElement("div", {
     className: 'col no-margin no-padding',
     style: {
-      maxWidth: 'calc(60% - 16px)',
+      maxWidth: '75%',
       height: '100%'
     }
-  }, /*#__PURE__*/React.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
-    id: "container",
-    height: '590px',
-    ref: scope => {
-      setContainer(scope);
-    },
-    created: () => {
-      if (container) {
-        container.resize();
-        container.documentEditor.resize();
-      }
-    },
-    documentChange: doc => {
-      if (container) {
-        setupContainer();
-      }
-      setDoc(doc);
-    }
-    //documentEditorSettings={searchHighlightColor}
-    ,
-    showPropertiesPane: false,
-    enableTrackChanges: false,
-    toolbarItems: items,
-    toolbarClick: onToolbarClick,
-    contentChange: onContentChange,
-    serviceUrl: _WordDocumentViewer.DOCSVC,
-    enableToolbar: true
+  }, /*#__PURE__*/React.createElement(_DocumentViewer.default, {
+    config: props.templateViewer,
+    handle: templateDesignerComponentHandle,
+    viewId: props.viewId,
+    onValueChange: file => props.valueChangeHandler(_objectSpread(_objectSpread({}, propertiesComponentHandle.api.value), {}, {
+      file: file
+    }))
   })));
 };
 var _default = exports.default = DocumentTemplateDesignerComponent;

package/dist/components/DocumentViewer.js

@@ -169,9 +169,12 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     file: value,
     onDocumentLoadSuccess: () => {},
     valueHandler: wordEditorValueHandler,
-    valueChangeHandler: () => {
+    valueChangeHandler: file => {
       let event = new _Event.default(props.handle, props.viewId, null);
       _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
+      if (props.onValueChange) {
+        props.onValueChange(file);
+      }
     },
     allowUnresolvedChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.allowUnresolvedChanges, props.config.id),
     disableRejectChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.disableRejectChanges, props.config.id),