@agilemotion/oui-react-js 1.8.55 → 1.8.57

package/dist/components/Calendar.js

@@ -26,8 +26,12 @@ var _Icon = _interopRequireDefault(require("./Icon"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _Calendar = _interopRequireDefault(require("../js/Calendar"));
 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; }
+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); }
+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 eventTemplate = {
   id: '',
   title: '',
@@ -192,7 +196,7 @@ const Calendar = props => {
       } = _ref;
       // eslint-disable-next-line no-underscore-dangle
       const colorName = '#945c33';
-      return [`bg-light-${colorName}`];
+      return ["bg-light-".concat(colorName)];
     },
     viewDidMount() {
       setOpen(false);
@@ -230,8 +234,7 @@ const Calendar = props => {
         h: timeDate.getHours(),
         m: 0
       });
-      const calendarEvent = {
-        ...eventTemplate,
+      const calendarEvent = _objectSpread(_objectSpread({}, eventTemplate), {}, {
         schedule: {
           startDate: date,
           endDate: date,
@@ -241,7 +244,7 @@ const Calendar = props => {
           recurringEndDate: date
         },
         eventType: _Utils.default.getComponentAttribute(props.config, 'eventType', 'TRAINING')
-      };
+      });
       if (_Utils.default.isStringEmpty(calendarEvent.id)) {
         calendarEvent.id = null;
       }

package/dist/components/Chart.js

@@ -35,7 +35,7 @@ const Chart = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwa
   function load(parameters) {
     const accessToken = sessionStorage.getItem('accessToken');
     const idToken = sessionStorage.getItem('idToken');
-    let path = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + props.config.contentPath + `-${displayType.toLowerCase()}.html&access_token=${accessToken}&idToken=${idToken}`;
+    let path = location + _ApplicationManager.default.getContextRoot() + _ApplicationManager.default.getUIConfigPath() + '/html/get?version=1.0&id=' + props.config.contentPath + "-".concat(displayType.toLowerCase(), ".html&access_token=").concat(accessToken, "&idToken=").concat(idToken);
     for (const parameter of parameters) {
       path += '&' + parameter.name + '=' + parameter.value;
     }

package/dist/components/DataGrid.css

@@ -7,6 +7,15 @@
     border-bottom: 1px solid #e2e2e2;
 }
 
+.ouiTable-empty thead tr {
+    border-bottom: none;
+}
+
+.pagination-container {
+    width: 100%;
+    border-top: 1px solid #e2e2e2;
+}
+
 table.responsive-table {
     display: table;
     /* required for table-layout to be used (not normally necessary; included for completeness) */
@@ -63,7 +72,7 @@ table.responsive-table thead {
     padding: 0 !important;
 }
 
-.ouiTable .oui-table-row {
+.ouiTable .oui-table-row:not(:last-child) {
     border-bottom: 1px solid #e2e2e2;
 }
 

package/dist/components/DataGrid.js

@@ -29,12 +29,13 @@ var _Layout = require("./layout/Layout");
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
-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; }
+var _GrabContext = _interopRequireDefault(require("../interaction/GrabContext"));
+var _CursorOverlay = _interopRequireDefault(require("../interaction/CursorOverlay"));
+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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MULTI_SELECT_CHECKBOX_COL_WIDTH = exports.MULTI_SELECT_CHECKBOX_COL_WIDTH = 64;
 function evaluateTableCellWidth(multiSelect, column, columnCount) {
-  let width = _ApplicationManager.default.isExpression(column.attributes['width']) ? _DynamicJS.default.executeScript(`popupTitle_${column.id}`, column.attributes['width'], column) : column.attributes['width'];
+  let width = _ApplicationManager.default.isExpression(column.attributes['width']) ? _DynamicJS.default.executeScript("popupTitle_".concat(column.id), column.attributes['width'], column) : column.attributes['width'];
   return multiSelect === true ? 'calc(' + (!_Utils.default.isNull(width) ? width : 100 / columnCount + '%') + ' - ' + MULTI_SELECT_CHECKBOX_COL_WIDTH / columnCount + 'px)' : typeof width !== 'undefined' ? width : 100 / columnCount + '%';
 }
 function desc(a, b, orderBy) {
@@ -109,6 +110,7 @@ const useStyles = (0, _styles.makeStyles)(theme => ({
   }
 }));
 const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  var _config$attributes, _props$config$attribu, _props$config$attribu2, _props$config$attribu3;
   const classes = useStyles();
   const [order, setOrder] = _react.default.useState('desc');
   const [config] = _react.default.useState(_Utils.default.parseConfig(props.config, props.viewId));
@@ -137,6 +139,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   const rowsRef = _react.default.useRef([]);
   let noteKey = 0;
   const columnWidths = _react.default.useRef({});
+  const dragSpec = ((_config$attributes = config.attributes) === null || _config$attributes === void 0 ? void 0 : _config$attributes.dragSpec) || {};
+  const rowGrabSpec = dragSpec.row || {};
+  const rowsGrabbable = rowGrabSpec.enabled === true;
   const api = () => {
     return {
       get id() {
@@ -282,6 +287,18 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       }
     };
   };
+  function handleRowGrabToggle(row, index) {
+    if (!isRowGrabbable(row)) return;
+    if (_GrabContext.default.isActive()) return;
+    _GrabContext.default.grab(props.handle, {
+      row,
+      rowIndex: index,
+      componentId: props.config.id,
+      viewId: props.viewId
+    });
+    _CursorOverlay.default.show();
+    _Observable.default.fireEvent(_EventType.default.ROW_GRAB_START, new _Event.default(props.handle, props.viewId, row));
+  }
   function updateScrollBarPadding() {
     var tbody = document.getElementById('mainTableBody');
     if (tbody !== null && typeof tbody !== 'undefined') {
@@ -354,11 +371,46 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       _Observable.default.fireEvent(_EventType.default.SELECTION_CHANGE, event);
     }
   }
-  function handleClick(event, id) {
+  function isRowGrabbable(row) {
+    return rowsGrabbable && !isRowDragDisabled(row);
+  }
+  function isRowDragDisabled(row) {
+    if (!dragSpec.disabledWhen) {
+      return false;
+    }
+    return _DynamicJS.default.executeScriptObject('ROW-' + row.id + '-drag-disabled', dragSpec.disabledWhen, props.config.id, {
+      row: row
+    }, false);
+  }
+  function setCursor(cursor) {
+    document.body.style.cursor = cursor || 'default';
+  }
+  function handleRowMouseEnter(row) {
+    if (!isRowGrabbable(row)) {
+      return;
+    }
+
+    // Only show grab cursor if not already holding something
+    if (!_GrabContext.default.isActive()) {
+      setCursor(rowGrabSpec.cursor || 'grab');
+    }
+  }
+  function handleRowMouseLeave() {
+    setCursor('default');
+  }
+  function handleClick(event, row, index) {
+    if (event.target.closest('.editCell')) {
+      return;
+    }
+    event.stopPropagation();
+    if (rowsGrabbable && !isRowDragDisabled(row)) {
+      handleRowGrabToggle(row, index);
+      return;
+    }
     if (!_Utils.default.isNull(props.onCellSelectionChange)) {
       return;
     }
-    doHandleClick(event, id);
+    doHandleClick(event, row.id);
   }
   function handleCellClick(event, id, column) {
     if (column.fieldType !== 'document') {
@@ -724,7 +776,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   function renderTiles() {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, stableSort(rows, getSorting(order, orderBy)).map((row, index) => {
       const isItemSelected = isSelected(row.id);
-      const labelId = `enhanced-table-checkbox-${index}`;
+      const labelId = "enhanced-table-checkbox-".concat(index);
       row.index = index;
       return renderTile(row, index);
     }));
@@ -812,12 +864,12 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     },
     label: "Wrap table text"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: `responsive-table`,
+    className: "responsive-table",
     style: {
       height: props.height
     }
   }, /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Table, {
-    className: "ouiTable",
+    className: "".concat('ouiTable' + (rows.length === 0 ? ' ouiTable-empty' : '')),
     cellSpacing: "0",
     "aria-labelledby": "tableTitle",
     style: {
@@ -857,7 +909,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     id: "mainTableBody"
   }, rows.map((row, index) => {
     const isItemSelected = isSelected(row.id);
-    const labelId = `enhanced-table-checkbox-${index}`;
+    const labelId = "enhanced-table-checkbox-".concat(index);
     let defaultRowStyle = {
       display: 'flex',
       flexWrap: 'wrap',
@@ -865,7 +917,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     };
     return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
       style: props.config.rowAttributes && props.config.rowAttributes.style ? _Utils.default.mergeObjects(props.config.rowAttributes.style, defaultRowStyle) : defaultRowStyle,
-      onClick: event => handleClick(event, row.id),
+      onMouseEnter: () => handleRowMouseEnter(row),
+      onMouseLeave: handleRowMouseLeave,
+      onClick: event => handleClick(event, row, index),
       role: "checkbox",
       "aria-checked": isItemSelected,
       tabIndex: -1,
@@ -882,51 +936,56 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       inputProps: {
         'aria-labelledby': labelId
       }
-    })) : null, config.columns.map(column => _Utils.default.evaluateBooleanExpression(column.attributes['hidden'], props.config.id) === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
-      style: {
-        padding: 0,
-        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
-        height: '100%'
-      },
-      align: "left",
-      className: !props.disabled && isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
-      key: index + "_" + column.id
-    }, /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
-      handle: createColumnLayoutHandle(column, index),
-      key: index + "_" + column.id + "_layout",
-      tableRow: rows.find(r => r.id === row.id),
-      rowIndex: index,
-      config: JSON.parse(JSON.stringify(props.config.columns.find(col => col.id === column.id).layout)),
-      viewId: props.viewId,
-      parent: false
-    })) : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
-      style: {
-        width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
-        height: '100%'
-      },
-      align: "left",
-      className: !props.disabled && isItemSelected && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
-      key: index + "_" + column.id,
-      onClick: event => handleCellClick(event, row.id, column)
-    }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
-      wrap: wrap,
-      onRowError: rowErrorHandler,
-      handle: createCellEditorHandle(column),
-      viewId: props.viewId,
-      editor: !props.disabled && !row.readOnly && !row.columnReadOnly?.[column?.id] ? column.editor : null,
-      ref: /*#__PURE__*/_react.default.createRef(),
-      refCallback: createCell,
-      selected: isItemSelected,
-      validator: column.validator,
-      valueChangeHandler: editorChangeHandler,
-      columnConfig: column,
-      dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
-      row: row,
-      contentType: column.fieldType || column.editor?.fieldType,
-      cellFormatter: column.cellFormatter,
-      criteria: criteria
-    }))));
-  })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
+    })) : null, config.columns.map(column => {
+      var _row$columnReadOnly, _column$editor;
+      return _Utils.default.evaluateBooleanExpression(column.attributes['hidden'], props.config.id) === true ? null : column.layout ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+        style: {
+          padding: 0,
+          width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
+          height: '100%'
+        },
+        align: "left",
+        className: !props.disabled && isItemSelected && !_Utils.default.isNull(props.form) && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
+        key: index + "_" + column.id
+      }, /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+        handle: createColumnLayoutHandle(column, index),
+        key: index + "_" + column.id + "_layout",
+        tableRow: rows.find(r => r.id === row.id),
+        rowIndex: index,
+        config: JSON.parse(JSON.stringify(props.config.columns.find(col => col.id === column.id).layout)),
+        viewId: props.viewId,
+        parent: false
+      })) : /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
+        style: {
+          width: column.attributes.width ? column.attributes.width : 100 / config.columns.length + '%',
+          height: '100%'
+        },
+        align: "left",
+        className: !props.disabled && isItemSelected && !_Utils.default.isNull(column.editor) ? 'editCell' : null,
+        key: index + "_" + column.id,
+        onClick: event => handleCellClick(event, row.id, column)
+      }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
+        wrap: wrap,
+        onRowError: rowErrorHandler,
+        handle: createCellEditorHandle(column),
+        viewId: props.viewId,
+        editor: !props.disabled && !row.readOnly && !((_row$columnReadOnly = row.columnReadOnly) !== null && _row$columnReadOnly !== void 0 && _row$columnReadOnly[column === null || column === void 0 ? void 0 : column.id]) ? column.editor : null,
+        ref: /*#__PURE__*/_react.default.createRef(),
+        refCallback: createCell,
+        selected: isItemSelected,
+        validator: column.validator,
+        valueChangeHandler: editorChangeHandler,
+        columnConfig: column,
+        dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
+        row: row,
+        contentType: column.fieldType || ((_column$editor = column.editor) === null || _column$editor === void 0 ? void 0 : _column$editor.fieldType),
+        cellFormatter: column.cellFormatter,
+        criteria: criteria
+      }));
+    }));
+  })))), _Utils.default.isNull((_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.pagination) && (_Utils.default.isNull(props.pagination) || props.pagination === true) || (_props$config$attribu2 = props.config.attributes) !== null && _props$config$attribu2 !== void 0 && _props$config$attribu2.pagination && ((_props$config$attribu3 = props.config.attributes) === null || _props$config$attribu3 === void 0 ? void 0 : _props$config$attribu3.pagnation) === true ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pagination-container"
+  }, /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
     className: "grid-table-pagination",
     rowsPerPageOptions: rowsPerPageOptions,
     component: "div",
@@ -941,5 +1000,5 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     },
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
-  }) : null) : null);
+  })) : null) : null);
 }));

package/dist/components/DataGridColumn.js

@@ -44,7 +44,8 @@ const DataGridColumn = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     startWidth.current = e.target.parentElement.offsetWidth;
     originalWidths.current = {};
     for (let col of props.columns) {
-      const width = parseFloat(col.attributes.width?.replace('%', '') || 100 / props.columns.length);
+      var _col$attributes$width;
+      const width = parseFloat(((_col$attributes$width = col.attributes.width) === null || _col$attributes$width === void 0 ? void 0 : _col$attributes$width.replace('%', '')) || 100 / props.columns.length);
       originalWidths.current[col.id] = width;
     }
     document.addEventListener('mousemove', handleResizeMove);

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -17,8 +17,7 @@ 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 _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 _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);
 const DocumentTemplateDesignerComponent = props => {
@@ -136,7 +135,7 @@ const DocumentTemplateDesignerComponent = props => {
         });
         const formData = new FormData();
         formData.append('files', file, 'document.docx');
-        (0, _reactPromiseTracker.trackPromise)(fetch(`${_WordDocumentViewer.DOCSVC}Import`, {
+        (0, _reactPromiseTracker.trackPromise)(fetch("".concat(_WordDocumentViewer.DOCSVC, "Import"), {
           method: 'POST',
           body: formData
         }).then(response => {
@@ -451,7 +450,7 @@ const DocumentTemplateDesignerComponent = props => {
     let defaultAction = {
       actionType: 'script',
       script: {
-        lines: [`@#{this}.highlightSelection($event.data)`]
+        lines: ["@#{this}.highlightSelection($event.data)"]
       }
     };
     eventHandlingConfig.subscriptions = [];
@@ -481,13 +480,14 @@ const DocumentTemplateDesignerComponent = props => {
       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?.name ? props.file.name : 'document.docx', {
-        type: props.file?.type ? props.file.type : 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      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'
       });
     }
   };
@@ -543,7 +543,7 @@ const DocumentTemplateDesignerComponent = props => {
     valueChangeHandler: React.useCallback(val => {
       model.current = val;
       let newVal = validateProps(val.properties) ? val : null;
-      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal?.properties)) {
+      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal === null || newVal === void 0 ? void 0 : newVal.properties)) {
         if (newVal) {
           valueChangeHandler({
             properties: val.properties,

package/dist/components/DocumentTemplateDesignerComponent2.js

@@ -16,8 +16,7 @@ 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 _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 _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 => {
@@ -457,7 +456,7 @@ const DocumentTemplateDesignerComponent = props => {
     let defaultAction = {
       actionType: 'script',
       script: {
-        lines: [`@#{this}.highlightSelection($event.data)`]
+        lines: ["@#{this}.highlightSelection($event.data)"]
       }
     };
     eventHandlingConfig.subscriptions = [];
@@ -530,7 +529,7 @@ const DocumentTemplateDesignerComponent = props => {
     valueChangeHandler: React.useCallback(val => {
       model.current = val;
       let newVal = validateProps(val.properties) ? val : null;
-      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal?.properties)) {
+      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal === null || newVal === void 0 ? void 0 : newVal.properties)) {
         if (newVal) {
           valueChangeHandler({
             properties: val.properties,

package/dist/components/DocumentTemplatePlaceholderDialog.js

@@ -8,8 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 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; }
+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); }
 const DocumentTemplatePlaceholderDialog = _ref => {
   let {
     open,
@@ -38,7 +37,7 @@ const DocumentTemplatePlaceholderDialog = _ref => {
   };
   const handleInsert = () => {
     if (selectedIndex !== null) {
-      console.log(`Selected placeholder: ${placeholders[selectedIndex].title}`);
+      console.log("Selected placeholder: ".concat(placeholders[selectedIndex].title));
       onInsertHandler(placeholders[selectedIndex]);
     }
     onClose();
@@ -59,7 +58,7 @@ const DocumentTemplatePlaceholderDialog = _ref => {
     // className="char_block"
     ,
     style: {
-      border: selectedIndex === index ? `1px solid ${palette.primary.main}` : null,
+      border: selectedIndex === index ? "1px solid ".concat(palette.primary.main) : null,
       margin: '4px 0',
       borderRadius: '4px'
     }

package/dist/components/DocumentViewer.js

@@ -18,6 +18,7 @@ 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) => {
+  var _props$config$attribu2, _props$config$attribu3, _parsedConfig$attribu;
   const [loading, setLoading] = _react.default.useState(true);
   const [label, setLabel] = _react.default.useState(null);
   const [hasLoadingError, setHasLoadingError] = _react.default.useState(false);
@@ -28,6 +29,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     props.handle.api = api();
   });
   _react.default.useEffect(() => {
+    var _props$config$attribu;
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
     _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
@@ -35,7 +37,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     setLabel(_DynamicJS.default.evaluateExpression(label));
     let event = new _Event.default(props.handle, props.viewId, null);
     _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
-    if (props.config.attributes?.autoLoadData === false) {
+    if (((_props$config$attribu = props.config.attributes) === null || _props$config$attribu === void 0 ? void 0 : _props$config$attribu.autoLoadData) === false) {
       setLoading(false);
     }
     refresh();
@@ -89,7 +91,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
             let path = _Utils.default.getPropertyChainPath(componentValue);
             if (!_Utils.default.isNull(path.valueObject)) {
               _Observable.default.addSystemGeneratedSubscription(props.viewId, props.viewId, props.config.id, () => {
-                let value = _DynamicJS.default.executeScript(`${props.config.id}ValueEvaluator`, componentValue);
+                let value = _DynamicJS.default.executeScript("".concat(props.config.id, "ValueEvaluator"), componentValue);
                 if (!_Utils.default.isNull(value)) {
                   // TODO : set value
                 }
@@ -132,17 +134,25 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
           return await wordEditorValueHandler.api.getValue();
         }
         return null;
+      },
+      /**
+       * Framework API
+       * Called via config script:
+       *   @#{this}.insertReadonlyAnchor(...)
+       */
+      insertReadonlyAnchor: (value, dropPosition) => {
+        wordEditorValueHandler.api.insertReadonlyAnchor(value, dropPosition);
       }
     };
   };
   let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
   return visible && /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeStyles({}, props.config)
-  }, props.config.attributes?.label && /*#__PURE__*/_react.default.createElement("div", {
+  }, ((_props$config$attribu2 = props.config.attributes) === null || _props$config$attribu2 === void 0 ? void 0 : _props$config$attribu2.label) && /*#__PURE__*/_react.default.createElement("div", {
     style: _Utils.default.mergeObjects({
       fontSize: '20px',
       color: '#1d253b'
-    }, props.config.attributes?.labelStyle)
+    }, (_props$config$attribu3 = props.config.attributes) === null || _props$config$attribu3 === void 0 ? void 0 : _props$config$attribu3.labelStyle)
   }, label), loading && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginTop: '16px'
@@ -170,7 +180,7 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     commentsOnly: _Utils.default.evaluateBooleanExpression(parsedConfig.commentsOnly, props.config.id),
     enableUpload: _Utils.default.evaluateBooleanExpression(parsedConfig.enableUpload, props.config.id),
     trackChanges: _Utils.default.evaluateBooleanExpression(parsedConfig.trackChanges, props.config.id),
-    height: parsedConfig.attributes?.containerHeight,
+    height: (_parsedConfig$attribu = parsedConfig.attributes) === null || _parsedConfig$attribu === void 0 ? void 0 : _parsedConfig$attribu.containerHeight,
     id: props.config.id
   })));
 }));