@agilemotion/oui-react-js 1.8.42 → 1.8.43

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/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/form/GridField.js

@@ -15,6 +15,7 @@ var _Toolbar = _interopRequireDefault(require("../Toolbar"));
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function getEditorType(columnName, gridConfig) {
@@ -58,7 +59,8 @@ const GridFieldWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     }
     setCrudToolstripWidth(numCrudButtons * 40 + 'px');
     try {
-      let label = _DynamicJS.default.executeScript(props.config.id + 'label', _Utils.default.getComponentAttribute(props.config, 'label', ''), props.config.viewId, true, null, null, false);
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+      let label = _ApplicationManager.default.isExpression(parsedConfig.attributes['label']) ? _DynamicJS.default.executeScript(props.config.id + 'label', _Utils.default.getComponentAttribute(parsedConfig, 'label', ''), props.config.viewId, true, null, null, false) : parsedConfig.attributes['label'];
       setLabel(label);
     } catch (e) {
       setLabel(_Utils.default.getComponentAttribute(props.config, 'label', ''));

package/dist/components/form/RadioGroup.js

@@ -13,6 +13,8 @@ var _BaseField = require("./BaseField");
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
 var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _DynamicJS = _interopRequireDefault(require("../../DynamicJS"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
@@ -50,6 +52,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.d
       base.handleValueChange(e.target.value);
     }
   }, options.map((option, index) => {
+    let label = _ApplicationManager.default.isExpression(option.label) ? _DynamicJS.default.executeScript(props.config.id + 'label', option.label, props.config.viewId, true, null, null, false) : option.label;
     return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
       key: index,
       value: option.value,
@@ -57,7 +60,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.d
         disabled: base.disabled,
         checked: option.value === value
       }),
-      label: option.label
+      label: label
     });
   })), base.errorMessage && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.42",
+  "version": "1.8.43",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",
@@ -62,6 +62,7 @@
     "@syncfusion/ej2-react-base": "^26.2.10",
     "@syncfusion/ej2-react-documenteditor": "^26.2.14",
     "@syncfusion/ej2-react-popups": "^26.2.11",
+    "@syncfusion/ej2-react-splitbuttons": "^31.2.2",
     "@syncfusion/ej2-splitbuttons": "^26.2.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -93,10 +94,10 @@
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-bootstrap": "^1.5.2",
     "react-bootstrap-switch": "^15.5.3",
     "react-confirm-alert": "^3.0.6",
+    "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-feather": "^2.0.10",
     "react-google-autocomplete": "^2.7.3",