@agilemotion/oui-react-js 1.8.57 → 1.8.59

package/dist/components/media/ToolbarButton.js

@@ -10,36 +10,35 @@ var _UseIsVisible = require("../UseIsVisible");
 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); }
 /* eslint-disable react-hooks/exhaustive-deps */
 
-const ToolbarButton = props => {
-  var _props$root;
+const ToolbarButton = _ref => {
+  let {
+    children,
+    root,
+    onVisibilityChange,
+    id
+  } = _ref;
   const ref = (0, _react.useRef)();
-  const isVisible = (0, _UseIsVisible.useIsVisible)(ref, (_props$root = props.root) === null || _props$root === void 0 ? void 0 : _props$root.current);
-  const [visible, setVisible] = (0, _react.useState)(null);
-  const [contentWidth, setContentWidth] = (0, _react.useState)(null);
-  const {
-    children
-  } = props;
+  const isVisible = (0, _UseIsVisible.useIsVisible)(ref, root === null || root === void 0 ? void 0 : root.current);
+  const last = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    if (visible === null) {
-      setVisible(true);
-    } else {
-      setVisible(isVisible);
-      props.onVisibilityChange(isVisible);
-      if (isVisible) {
-        setContentWidth(ref.current.getBoundingClientRect().right - ref.current.getBoundingClientRect().left);
-      }
+    if (last.current !== isVisible) {
+      last.current = isVisible;
+      onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange(isVisible);
     }
   }, [isVisible]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: {
-      width: isVisible ? '100%' : 0,
-      minWidth: isVisible ? '100%' : 0
+      display: 'inline-flex',
+      alignItems: 'center',
+      visibility: isVisible ? 'visible' : 'hidden',
+      pointerEvents: isVisible ? 'auto' : 'none',
+      height: '100%',
+      maxHeight: '100%',
+      width: '100%',
+      minWidth: 'unset',
+      whiteSpace: 'nowrap'
     }
-  }, !isVisible ? /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: contentWidth ? contentWidth : '100%'
-    }
-  }, "\xA0") : children);
+  }, children);
 };
 var _default = exports.default = ToolbarButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.57",
+  "version": "1.8.59",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",
@@ -54,16 +54,16 @@
     "@mui/styles": "^6.4.6",
     "@mui/x-date-pickers": "^7.27.1",
     "@mui/x-tree-view": "^7.26.0",
-    "@syncfusion/ej2-base": "^26.2.10",
-    "@syncfusion/ej2-buttons": "^26.2.10",
-    "@syncfusion/ej2-documenteditor": "^26.2.14",
-    "@syncfusion/ej2-lists": "^26.2.14",
-    "@syncfusion/ej2-navigations": "^26.2.12",
-    "@syncfusion/ej2-react-base": "^26.2.10",
-    "@syncfusion/ej2-react-documenteditor": "^26.2.14",
-    "@syncfusion/ej2-react-popups": "^26.2.11",
+    "@syncfusion/ej2-base": "^31.2.2",
+    "@syncfusion/ej2-buttons": "^31.2.2",
+    "@syncfusion/ej2-documenteditor": "^31.2.2",
+    "@syncfusion/ej2-lists": "^31.2.2",
+    "@syncfusion/ej2-navigations": "^31.2.2",
+    "@syncfusion/ej2-react-base": "^31.2.2",
+    "@syncfusion/ej2-react-documenteditor": "^31.2.2",
+    "@syncfusion/ej2-react-popups": "^31.2.2",
     "@syncfusion/ej2-react-splitbuttons": "^31.2.2",
-    "@syncfusion/ej2-splitbuttons": "^26.2.10",
+    "@syncfusion/ej2-splitbuttons": "^31.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/dist/components/DocumentTemplateDesignerComponent2.js

@@ -1,584 +0,0 @@
-"use strict";
-
-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;
-require("./DocumentTemplateDesignerComponent.css");
-var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-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");
-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)('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5adkJiWHtWdXBXT2Je');
-_ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
-const DocumentTemplateDesignerComponent = props => {
-  const {
-    contractTemplate,
-    uploadTrigger,
-    valueChangeHandler,
-    addDocumentMetaDataHandler,
-    value
-  } = props;
-  const [container, setContainer] = React.useState(null);
-  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
-  });
-  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('https://ej2services.syncfusion.com/production/web-services/api/documenteditor/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();
-  }
-  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);
-
-      if (model.current.properties) {
-        matches.forEach(match => {
-          let prop = model.current.properties.find(p => p.placeHolder === match.text);
-          let indexData = {
-            start: match.start,
-            end: match.end,
-            linePositions: match.linePositions
-          };
-          if (!prop) {
-            prop = {
-              placeHolder: match.text,
-              indexes: [indexData]
-            };
-          } else {
-            if (!prop.indexes) {
-              prop.indexes = [];
-            }
-            prop.indexes.push(indexData);
-          }
-          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 getLinePositions = (line, anchorPosition) => {
-    let linePositions = [];
-    container.documentEditor.search.find(line);
-    let searchList = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList;
-    let startPosition = getSearchStartPosition(anchorPosition, searchList);
-    let endPosition = getSearchEndPosition(anchorPosition, searchList);
-    console.log("\n\n\n\n\n\nSEARCH LIST : ", endPosition.location.yIn);
-    console.log(endPosition);
-    for (const textSearchResult of searchList) {
-      console.log(textSearchResult.endIn.location.yIn);
-    }
-    console.log("CHECKING WORD WRAP [" + line + "] : " + startPosition.location.yIn + " - " + endPosition.location.yIn);
-    // We have a word wrap if this condition is true
-    console.log("WORD WRAP JOINT ", detectWordWrap(anchorPosition, startPosition, endPosition, container.documentEditor, line, endPosition.location.yIn));
-    if (startPosition.location.yIn < endPosition.location.yIn) {
-      linePositions.push({
-        startX: startPosition.location.xIn,
-        startY: startPosition.location.yIn,
-        endX: endPosition.location.xIn,
-        endY: endPosition.location.yIn
-      });
-      console.log("\n\n\n\n\n\nMATHATA : [" + line + "]");
-      console.log(startPosition.location.xIn + " : " + endPosition.location.xIn);
-      console.log(startPosition.location.yIn + " : " + endPosition.location.yIn);
-    } else {
-      linePositions.push({
-        startX: startPosition.location.xIn,
-        startY: startPosition.location.yIn,
-        endX: endPosition.location.xIn,
-        endY: endPosition.location.yIn
-      });
-    }
-    return {
-      endPosition,
-      linePositions
-    };
-  };
-  const removeNextLineCharsFromPlaceholders = (text, startTag, endTag) => {
-    const matches = [];
-    let index = 0;
-    let anchorPosition = null;
-    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");
-      let linePositions = [];
-
-      //container.documentEditor.selection.start.setPositionInternal(startIndex);
-
-      if (split.length > 1) {
-        container.documentEditor.search.find(split[0]);
-        let startPosition = getSearchStartPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
-        container.documentEditor.search.find(split[split.length - 1]);
-        let endPosition = getSearchEndPosition(anchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
-        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, ""));
-          for (const token of split) {
-            let placeholderLinePositions = getLinePositions(token, anchorPosition);
-            anchorPosition = placeholderLinePositions.endPosition;
-            linePositions.push(placeholderLinePositions.linePositions);
-          }
-        } else {
-          console.error("No valid selection found");
-        }
-      } else {
-        let placeholderLinePositions = getLinePositions(split[0], anchorPosition);
-        anchorPosition = placeholderLinePositions.endPosition;
-        linePositions.push(placeholderLinePositions.linePositions);
-      }
-      matches.push({
-        start: startIndex,
-        end: endIndex + endTag.length,
-        text: find.replace(/(\r\n|\n|\r)/gm, ""),
-        linePositions: linePositions
-      });
-      index = endIndex + endTag.length;
-    }
-    return matches;
-  };
-  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 detectWordWrap(anchorPosition, startPosition, endPosition, editor, sentence, startY) {
-    let substrings = generateSubstrings(sentence);
-    let wordWrapPositions = [];
-    let wordWrapAnchorPosition = anchorPosition;
-
-    //container.documentEditor.selection.select(startPosition, endPosition);
-
-    let prevPosition = startPosition;
-    let currentY = startY;
-    console.log("SUBSTRINGS FOR [" + sentence + "] : ", substrings);
-    console.log("ANCHOR : ", anchorPosition);
-    for (const substring of substrings) {
-      container.documentEditor.search.find(substring);
-      let endPosition = getSearchEndPosition(wordWrapAnchorPosition, container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList);
-      wordWrapAnchorPosition = endPosition;
-      //container.documentEditor.selection.select(startPosition, endPosition);
-
-      console.log("[" + sentence + "] " + endPosition.location.yIn + " : " + currentY);
-      if (endPosition.location.yIn > currentY) {
-        wordWrapPositions.push({
-          prevPosition,
-          endPosition
-        });
-        currentY = endPosition.location.yIn;
-        prevPosition = endPosition;
-      }
-      console.log(substring + " - " + endPosition.location.yIn);
-    }
-    if (wordWrapPositions.length === 0) {
-      wordWrapPositions.push({
-        startPosition,
-        endPosition
-      });
-    }
-    return wordWrapPositions;
-  }
-  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 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 index of property.indexes) {
-            for (const linePosition of index.linePositions) {
-              console.log(property.placeHolder + "START X : " + linePosition.startX + " END X : " + linePosition.endX + " - CURSOR X : " + startPosition.location.xIn + " CURSOR Y : " + startPosition.location.yIn);
-              if (linePosition.startY === startPosition.location.yIn && linePosition.startX <= startPosition.location.xIn && linePosition.endX >= startPosition.location.xIn) {
-                console.log("PHAKATI");
-                selectedProperty = property;
-                break;
-              } else {
-                console.log("TEST 1 : " + (linePosition.startY === startPosition.location.yIn) + " TEST 2 " + (linePosition.startX <= startPosition.location.xIn) + " TEST 3 " + (linePosition.endX >= startPosition.location.xIn));
-              }
-            }
-            if (selectedProperty) {
-              break;
-            }
-          }
-        }
-        if (selectedProperty) {
-          console.log("\n\n\n\n\nPREVENTING DEFAULT [" + selectedProperty.placeHolder + "]");
-          event.event.preventDefault();
-        }
-      });
-    }
-  }, [container]);
-  (0, _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 api = () => {
-    return {
-      get id() {
-        return props.id + "DocTemplateDesigner";
-      },
-      highlightSelection: selectedPropertyRow => {
-        doHighlightSelection(selectedPropertyRow);
-      }
-    };
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: 'row no-margin no-padding',
-    style: {
-      height: "100%"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "40%",
-      overflow: "auto",
-      minHeight: "250px",
-      height: "100%",
-      border: "1px solid #e1e1e1",
-      borderRadius: '4px',
-      marginRight: "4px"
-    }
-  }, /*#__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%",
-      marginTop: "4px",
-      padding: "0 8px"
-    }
-  }, /*#__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]),
-    viewId: props.viewId,
-    className: 'defaultForm'
-  }))), props.visible && /*#__PURE__*/React.createElement("div", {
-    className: 'col no-margin no-padding',
-    style: {
-      maxWidth: 'calc(60% - 16px)',
-      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: "https://services.syncfusion.com/react/production/api/documenteditor/",
-    enableToolbar: true
-  })));
-};
-var _default = exports.default = DocumentTemplateDesignerComponent;