@agilemotion/oui-react-js 1.8.49 → 1.8.51

package/dist/InteractionPortalAppHome.js

@@ -151,7 +151,7 @@ const InteractionPortalAppHome = /*#__PURE__*/_react.default.memo((props, ref) =
     showDashboardMenu: false,
     appLogoPath: /*dashboardSettings.logo*/null,
     logoStyle: {
-      padding: '32px'
+      width: '120px'
     }
   }), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
     color: loadingColor

package/dist/components/TabPanel.bck.js

@@ -0,0 +1,201 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _AppBar = _interopRequireDefault(require("@mui/material/AppBar"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _TabPage = _interopRequireDefault(require("./TabPage"));
+var _Section = _interopRequireDefault(require("./form/Section"));
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _Layout = require("./layout/Layout");
+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 a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`
+  };
+}
+const TabPanel = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [tabValue, setTabValue] = _react.default.useState(0);
+  const [errors, setErrors] = _react.default.useState({});
+  const [visibleTabPages, setVisibleTabPages] = _react.default.useState(null);
+  const [componentHandles] = _react.default.useState({});
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+  const createComponentHandle = component => {
+    if (_Utils.default.isNull(componentHandles[component.id])) {
+      let handle = {};
+      componentHandles[component.id] = handle;
+      return handle;
+    }
+    return componentHandles[component.id];
+  };
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+  });
+  _react.default.useEffect(() => {
+    if (!_Utils.default.isNull(props.form)) {
+      props.form().setContainerErrorHandler(containerErrors => {
+        let shouldRefresh = false;
+        let properties = Object.getOwnPropertyNames(containerErrors);
+        for (const property of properties) {
+          if (errors[property] !== containerErrors[property]) {
+            shouldRefresh = true;
+            break;
+          }
+        }
+        if (_ApplicationManager.default.isFormMarkersEnabled() && shouldRefresh) {
+          setErrors(JSON.parse(JSON.stringify(containerErrors)));
+        }
+      });
+    }
+    if (props.config.tabPages) {
+      let allVisibleTabPages = [];
+      for (const page of props.config.tabPages) {
+        if (_Utils.default.isNull(page.id)) {
+          page.id = index + '-tab-page';
+        }
+        let parsedConfig = _Utils.default.parseConfig(page, props.viewId);
+        let visible = _Utils.default.isNull(parsedConfig.visible) || _Utils.default.evaluateBooleanExpression(parsedConfig.visible, page.id);
+        if (visible) {
+          allVisibleTabPages.push(page);
+        }
+      }
+      setVisibleTabPages(allVisibleTabPages);
+    }
+  }, []);
+  function renderTabPageComponent(component, tabId, index) {
+    if (_Utils.default.isNull(component.id)) {
+      component.id = index + '-tab-content';
+    }
+    return component.type === 'formSection' ? /*#__PURE__*/_react.default.createElement(_Section.default, {
+      keyHandler: props.keyHandler,
+      key: index,
+      config: component,
+      handle: createComponentHandle(component),
+      form: props.form,
+      parentId: tabId,
+      viewId: props.viewId,
+      values: props.values
+    }) : component.type === 'toolbar' ? /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+      config: component,
+      handle: createComponentHandle(component),
+      key: index,
+      viewId: props.viewId
+    }) : component.type === 'layout' ? /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
+      config: component,
+      handle: createComponentHandle(component),
+      key: index,
+      viewId: props.viewId
+    }) : /*#__PURE__*/_react.default.createElement("div", null, 'Unsupported component type ' + component.type);
+  }
+  function renderPage(page, pageIndex) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        margin: '16px'
+      },
+      className: 'tab-page-container'
+    }, page.components.map((component, index) => {
+      return renderTabPageComponent(component, page.id, pageIndex + index);
+    }));
+  }
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+      getChildren: () => {
+        let children = [];
+        let properties = Object.getOwnPropertyNames(componentHandles);
+        for (const property of properties) {
+          let componentHandle = componentHandles[property];
+          children.push(componentHandle);
+          if (!_Utils.default.isNull(componentHandle.api.getChildren)) {
+            for (const child of componentHandle.api.getChildren()) {
+              children.push(child);
+            }
+          }
+        }
+        return children;
+      },
+      set value(value) {
+        setTabValue(value);
+      },
+      get value() {
+        return tabValue;
+      },
+      setPageHasError: (pageId, hasError) => {
+        setErrors({
+          ...errors,
+          [pageId]: hasError
+        });
+      },
+      clearErrors: () => {
+        setErrors({});
+      }
+    };
+  };
+  return !_Utils.default.isNull(visibleTabPages) && /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: '100%'
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
+    position: "static",
+    color: "default",
+    style: {
+      background: 'transparent',
+      boxShadow: 'none',
+      borderBottom: '1px solid #d1d1d1'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    value: tabValue,
+    onChange: handleTabChange,
+    variant: "scrollable" // enables horizontal scroll
+    ,
+    scrollButtons: "auto" // shows arrows when needed
+    ,
+    allowScrollButtonsMobile: true // show arrows on mobile too
+    ,
+    textColor: "primary",
+    indicatorColor: "primary",
+    "aria-label": "tabs",
+    sx: {
+      // optional: reduce default min width so more tabs fit
+      '& .MuiTab-root': {
+        minWidth: 120
+      }
+    }
+  }, visibleTabPages?.length > 0 ? visibleTabPages.map((page, index) => /*#__PURE__*/_react.default.createElement(_Tab.default, _extends({
+    key: index,
+    label: page.attributes['label'],
+    wrapped: true // allow multi-line label
+  }, a11yProps(index), {
+    sx: {
+      maxWidth: 240,
+      // constrain so wrapping can occur
+      whiteSpace: 'normal',
+      // allow wrap
+      wordBreak: 'break-word',
+      // break long words
+      textTransform: 'uppercase',
+      // keep original casing
+      color: _ApplicationManager.default.isFormMarkersEnabled() && errors !== null && errors[page.id] === true ? '#ed5249' : undefined
+    }
+  }))) : null)), visibleTabPages.length > 0 ? visibleTabPages.map((page, index) => {
+    return /*#__PURE__*/_react.default.createElement(_TabPage.default, {
+      value: tabValue,
+      key: index,
+      index: index,
+      config: page
+    }, renderPage(page, index));
+  }) : null);
+}));
+var _default = exports.default = TabPanel;

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.js

@@ -11,7 +11,6 @@ var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
 var _material = require("@mui/material");
 var _RestUtils = require("../../../../../RestUtils");
 require("./FoldingTabSidebar.css");
-var _Mail = _interopRequireDefault(require("@mui/icons-material/Mail"));
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable */

package/dist/components/form/ImageEditor_bck.js

@@ -0,0 +1,466 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageEditorComponent = exports.ImageEditor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _BaseField = require("./BaseField");
+var _styles = require("@mui/styles");
+var _Utils = _interopRequireDefault(require("../../Utils"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
+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 useStyles = (0, _styles.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  }
+}));
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+const json = response => {
+  return response.text();
+};
+const location = window.location.protocol + "//" + window.location.hostname;
+const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [multiple] = _react.default.useState(props.multiple === true);
+  const [angle, setAngle] = _react.default.useState(0);
+  const [zoomDepth, setZoomDepth] = _react.default.useState(null);
+  const [originalImageWidth, setOriginalImageWidth] = _react.default.useState(null);
+  const [originalImageHeight, setOriginalImageHeight] = _react.default.useState(null);
+  const [payloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
+  const classes = useStyles();
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
+  const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
+  const base = props.base;
+  _react.default.useEffect(() => {}, [props.initialFile]);
+  function getFetchConfig(data) {
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    return {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+  }
+  function getRotateAngle(action) {
+    let rotateAngle = null;
+    if ("rotateLeft" === action) {
+      rotateAngle = -90;
+    } else if ("rotateRight" === action) {
+      rotateAngle = 90;
+    }
+    return rotateAngle;
+  }
+  function process(callback, data, action) {
+    let fetchConfig = getFetchConfig(data);
+    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
+    let rotateAngle = getRotateAngle(action);
+    if (rotateAngle) {
+      url += "?" + rotateAngle;
+    }
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      callback(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationManager.default.clear();
+        _ApplicationManager.default.getApplicationHistory().push('/login');
+      }
+    }));
+  }
+  const handleChange = () => event => {
+    if (cacheId.current) {
+      remove().then(() => cacheId.current = null).catch(e => {});
+    }
+    let files = event.target.files;
+    let file = files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      if (!_Utils.default.isNull(file)) {
+        let fileMetaData = {};
+        fileMetaData.name = file.name;
+        fileMetaData.type = file.type;
+        fileMetaData.size = file.size;
+        if (base.value) {
+          fileMetaData.id = base.value.id;
+        }
+        if ('base64' === payloadStorageMode) {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              fileMetaData.url = data;
+              base.handleValueChange(fileMetaData);
+            }, reader.result, 'removeBackground');
+          } else {
+            fileMetaData.url = file.base64;
+            base.handleValueChange(fileMetaData);
+          }
+        } else {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              setCacheModeValue(fileMetaData, file);
+            }, reader.result, 'removeBackground');
+          } else {
+            setCacheModeValue(fileMetaData, file);
+          }
+        }
+      }
+    };
+    reader.onloadend = () => {};
+  };
+  const setCacheModeValue = (fileMetaData, file) => {
+    fileMetaData.correlationId = props.config.id;
+    fileMetaData.domain = props.viewId;
+    if (cacheId.current) {
+      remove().then(() => {
+        cacheId.current = null;
+        upload(fileMetaData, file, reader);
+      }).catch(e => {});
+    } else {
+      upload(fileMetaData, file, reader);
+    }
+  };
+  const upload = (metadata, file, reader) => {
+    let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
+    if (uploadUrl === null) {
+      uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
+    }
+    let payloadStorageMode = props.config.payloadStorageMode;
+    if (payloadStorageMode === 'post') {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let data = new FormData();
+      metadata.correlationId = props.viewId + "." + props.config.id;
+      data.append("metadata", JSON.stringify(metadata));
+      data.append("file", file);
+      let fetchConfig = {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        },
+        body: data
+      };
+      let url = location + uploadUrl;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+        metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+        metadata.documentRepositoryCacheId = data;
+        cacheId.current = data;
+        base.handleValueChange(metadata);
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        }
+        let message = {
+          messageType: 'ERROR',
+          message: 'An error has accurred while uploading file'
+        };
+        let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+        _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+      }));
+    } else {
+      metadata.payload = reader.result;
+      base.handleValueChange(metadata);
+    }
+  };
+  const remove = () => {
+    return new Promise((resolve, reject) => {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let fetchConfig = {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        }
+      };
+      let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
+        resolve();
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        } else {
+          reject(e);
+        }
+      }));
+    });
+  };
+  _react.default.useEffect(() => {
+    let container = document.getElementById("__image_container");
+    let image = document.getElementById("__image");
+    if (container) {
+      let ratio = 10 * zoomDepth / 100;
+      container.style.width = originalImageWidth + originalImageWidth * ratio + "px";
+      container.style.height = originalImageHeight + originalImageHeight * ratio + "px";
+      image.style.width = container.style.width;
+      image.style.height = container.style.height;
+    }
+  }, [zoomDepth]);
+  const zoom = direction => {
+    if (originalImageWidth === null) {
+      setOriginalImageWidth(document.getElementById("__image").width);
+      setOriginalImageHeight(document.getElementById("__image").height);
+    }
+    let depth = direction === "In" ? zoomDepth + 1 : zoomDepth - 1;
+    if (depth <= 0) {
+      depth = 1;
+    }
+    setZoomDepth(depth);
+  };
+  const rotate = direction => {
+    let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
+    if (rotateMode === null || rotateMode === 'SERVER') {
+      process(data => {
+        base.handleValueChange({
+          ...base.value,
+          url: data
+        });
+      }, base.value.url, 'rotate' + direction);
+    } else {
+      let rotateAngle = angle + getRotateAngle("rotate" + direction);
+      document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
+      setAngle(rotateAngle);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: _Utils.default.mergeStyles({
+      width: width
+    }, props.config)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', '')))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    accept: "image/jpeg,image/gif,image/png,image/x-eps",
+    className: classes.input,
+    id: `contained-button-file-${props.config.id}`,
+    disabled: base.disabled,
+    required: base.required,
+    multiple: multiple,
+    onChange: handleChange(),
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: `contained-button-file-${props.config.id}`
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    component: "span",
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '120px',
+      height: '40px',
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null
+    },
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'UPLOAD'
+    })
+  }, "UPLOAD")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "8px 0"
+    }
+  }, base.errorMessage)) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Left'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_LEFT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Right'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_RIGHT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('Out'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_OUT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('In'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_IN'
+    })
+  }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      padding: "8px 0",
+      marginLeft: '0',
+      marginRight: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_parent",
+    style: {
+      width: "100%",
+      height: height,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundColor: 'transparent',
+      backgroundImage: `url(${require('./transparent.jpeg')})`,
+      border: '4px solid #e1e1e1',
+      borderRadius: '4px'
+    },
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.button,
+    style: {
+      width: 'auto',
+      height: parseFloat(height.replace('px', '')) - 20 + 'px',
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px',
+      textAlign: 'center',
+      overflow: 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    id: "__image",
+    src: base.value.url,
+    alt: '',
+    style: {
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
+    }
+  }))))) : null);
+}));
+const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [file, setFile] = _react.default.useState(null);
+  const clearTrigger = _react.default.useRef(false);
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (inbound) {
+        clearTrigger.current = !clearTrigger.current;
+        if (!_Utils.default.isNull(value)) {
+          let val = value;
+
+          // TODO : Support multiple file upload
+          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+            if (typeof value.length !== 'undefined' && value.length > 0) {
+              val = value[0];
+            } else {
+              if (value.documentRepositoryId) {
+                return value;
+              }
+              return null;
+            }
+          }
+          if (val.map) {
+            val = val.map;
+          }
+          let fileMetaData = {};
+          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.id = val.id;
+          fileMetaData.type = val.type;
+          fileMetaData.size = val.size;
+          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
+          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
+          fileMetaData.url = val.url;
+          if (!_Utils.default.isNull(val.url)) {
+            let file = {};
+            file.base64 = val.url;
+            setFile(file);
+          }
+          return fileMetaData;
+        }
+      }
+      return value;
+    },
+    valueChangeCallback: value => {
+      if (_Utils.default.isNull(value)) {
+        clearTrigger.current = !clearTrigger.current;
+      }
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
+    base: base,
+    initialFile: file,
+    clearTrigger: clearTrigger.current
+  }, props)));
+}));
+var _default = exports.default = ImageEditor;