oa-componentbook 0.18.310 → 0.18.313

package/build/dev/oa-component-upload/CustomUpload.js

@@ -0,0 +1,282 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _CustomViewer = _interopRequireDefault(require("../../components/oa-component-viewer/CustomViewer"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _handIcon = _interopRequireDefault(require("../../images/hand-icon.svg"));
+var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
+var _styles = require("./styles");
+const _excluded = ["uploadedDocuments", "handleCustomOnChange", "multipleDoc", "showDelete", "formName", "getPreview", "isMandatory", "noOfUpload", "downloadCallback", "showDownloadButton", "showDeleteButton", "deleteHandler", "showRoateButton", "showZoomInButton", "showZoomOutButton"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * Takes a file and returns a Promise that resolves with the file as a base64 encoded string.
+ * The Promise is rejected if there is an error reading the file.
+ * @param {File} file The file to be converted to base64
+ * @returns {Promise<string>} A Promise that resolves with the file as a base64 encoded string
+ */
+const getBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = error => reject(error);
+});
+/**
+ * Downloads a file from a base64 encoded string.
+ * @param {string} base64String The base64 encoded string of the file to be downloaded
+ * @param {string} [fileName] The name of the file to be downloaded. If not provided, the file will be downloaded with the name 'download'.
+ * @returns {undefined}
+ */
+const downloadFile = (base64String, fileName) => {
+  const link = document.createElement('a');
+  link.href = base64String;
+  link.download = fileName || 'download';
+  link.click();
+};
+function isImageFile(fileName) {
+  var _fileName$split;
+  // Extract the file extension from the file name
+  const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split('.')) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
+
+  // Define an array of image file extensions
+  const imageFileExtensions = ['jpg', 'jpeg', 'png'];
+
+  // Check if the file extension is in the array of image file extensions
+  if (imageFileExtensions.indexOf(fileExtension) !== -1) {
+    return true;
+  }
+  return false;
+}
+/**
+ * DocumentUpload is a component that allows users to upload documents. It takes a number of props which control its behavior.
+ * @param {object} props The props passed to the component
+ * @param {array} [props.uploadedDocuments=[]] An array of documents that have already been uploaded
+ * @param {function} props.handleCustomOnChange A function that is called whenever the list of uploaded documents changes
+ * @param {number} [props.multipleDoc=0] The maximum number of documents that can be uploaded. If set to 0, there is no limit
+ * @param {boolean} [props.showDelete=false] Whether or not to show a delete button next to each uploaded document
+ * @param {string} [props.formName] The name of the form field that the uploaded documents should be associated with
+ * @param {function} [props.getPreview] A function that is called whenever the user clicks on an uploaded document. It should return a Promise that resolves with the URL of the document
+ * @param {boolean} [props.isMandatory=false] Whether or not the component is mandatory
+ * @param {number} [props.noOfUpload=1] The number of document that can be uploaded.
+ * @param {function} [props.downloadCallback] A function that is called whenever the user clicks on the download button. It should return a Promise that resolves with the URL of the document
+ * @param {function} [props.deleteHandler] A function that is called whenever the user clicks on the delete button. It should return a Promise that resolves with the deleted document
+ * @returns {object} A React component
+ */
+function DocumentUpload(_ref) {
+  let {
+      uploadedDocuments = [],
+      handleCustomOnChange,
+      multipleDoc,
+      showDelete,
+      formName,
+      getPreview,
+      isMandatory,
+      noOfUpload,
+      downloadCallback,
+      showDownloadButton,
+      showDeleteButton,
+      deleteHandler,
+      showRoateButton,
+      showZoomInButton,
+      showZoomOutButton
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
+  const [previewImage, setPreviewImage] = (0, _react.useState)(null);
+  const [previewTitle, setPreviewTitle] = (0, _react.useState)('');
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, _react.useState)(false);
+  const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
+  const [selectedDocumentData, setSelectedDocumentData] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    setFileList(uploadedDocuments);
+  }, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
+  const handlePreview = async file => {
+    if (file !== null && file !== void 0 && file.originFileObj) {
+      setPreviewImage(file);
+    } else if ((file === null || file === void 0 ? void 0 : file.fileType) === 'thumbnail') {
+      const url = await getPreview();
+      setPreviewImage(url);
+    } else {
+      setPreviewImage(file === null || file === void 0 ? void 0 : file.url);
+    }
+    setPreviewTitle(file === null || file === void 0 ? void 0 : file.name);
+    setPreviewOpen(true);
+    setSelectedDocumentData(file);
+  };
+  const handleChange = async _ref2 => {
+    let {
+      fileList: newFileList,
+      file
+    } = _ref2;
+    const modifiedList = await Promise.all(newFileList.map(async files => {
+      let modifiedFile = files;
+      setLoading(true);
+      try {
+        if ((file === null || file === void 0 ? void 0 : file.uid) === (files === null || files === void 0 ? void 0 : files.uid)) {
+          await handleCustomOnChange(files);
+          modifiedFile.status = 'done';
+          if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
+            modifiedFile.url = _PdfSampleImage.default;
+            // delete modifiedFile?.type;
+          }
+        }
+      } catch (error) {
+        modifiedFile = null;
+      }
+      setLoading(false);
+      return modifiedFile;
+    }));
+    const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
+    setFileList(tempList);
+  };
+  const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 0,
+      background: 'none'
+    },
+    type: "button"
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) :
+  /*#__PURE__*/
+  // <CustomIcon
+  //   className="UploadImg"
+  //   alt="phone img"
+  //   src={offerImg}
+  // />
+  _react.default.createElement(_icons.UploadOutlined, null), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
+  const DeleteFile = async () => {
+    await deleteHandler(selectedFile);
+    setDeleteConfirmation(false);
+    if (showDeleteButton) {
+      setPreviewOpen(false);
+    }
+  };
+  const handleRemove = file => new Promise((resolve, reject) => {
+    setSelectedFile(file);
+    setDeleteConfirmation(true);
+    resolve(false);
+  });
+  const handleModalDeleteButton = file => {
+    setSelectedFile(file);
+    setDeleteConfirmation(true);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "uploadDiv"
+  }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorBorder: _ColorVariablesMap.default['--color-divider'],
+        borderRadiusLG: 4,
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
+        colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorText: _ColorVariablesMap.default['--color-secondary-content']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: formName,
+    rules: [{
+      validator: (rule, value) => {
+        if (isMandatory && !(value !== null && value !== void 0 && value.length)) {
+          return Promise.reject(new Error('Please upload the document.'));
+        }
+        return Promise.resolve();
+      }
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Upload, _extends({
+    customRequest: () => {},
+    listType: "picture-card",
+    fileList: fileList,
+    onPreview: handlePreview,
+    onChange: handleChange,
+    onRemove: handleRemove,
+    showUploadList: {
+      showDownloadIcon: false,
+      showRemoveIcon: showDelete,
+      removeIcon: /*#__PURE__*/_react.default.createElement(_icons.DeleteFilled, null),
+      previewIcon: /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
+    }
+  }, antDesignProps), (fileList === null || fileList === void 0 ? void 0 : fileList.length) >= noOfUpload ? null : uploadButton)))))), previewOpen && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
+    open: previewOpen,
+    previewFile: previewImage,
+    title: previewTitle,
+    onCancel: () => setPreviewOpen(false),
+    downloadCallback: downloadCallback,
+    deleteCallback: handleModalDeleteButton,
+    selectedDocumentData: selectedDocumentData,
+    showDownloadButton: showDownloadButton,
+    showDeleteButton: showDeleteButton,
+    showRoateButton: showRoateButton,
+    showZoomInButton: showZoomInButton,
+    showZoomOutButton: showZoomOutButton
+  }), deleteConfirmation && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    buttonConfig: [{
+      callback: () => DeleteFile(),
+      label: 'Yes, Delete',
+      type: 'danger-primary'
+    }],
+    imgSrc: _handIcon.default,
+    open: deleteConfirmation,
+    onCancel: () => setDeleteConfirmation(false),
+    title: "Delete Item?",
+    className: "delete-modal-confirmation"
+  }, "This action will permanently delete the selected item"));
+}
+DocumentUpload.propTypes = {
+  uploadedDocuments: _propTypes.default.array,
+  handleCustomOnChange: _propTypes.default.func,
+  deleteHandler: _propTypes.default.func,
+  formName: _propTypes.default.string,
+  showDelete: _propTypes.default.bool,
+  multipleDoc: _propTypes.default.number,
+  getPreview: _propTypes.default.func,
+  // Define the getPreview prop type
+  isMandatory: _propTypes.default.bool,
+  noOfUpload: _propTypes.default.number,
+  downloadCallback: _propTypes.default.func,
+  // function will be used to download the document
+  deleteCallback: _propTypes.default.func,
+  // function will be used to delete the document
+  showDownloadButton: _propTypes.default.bool,
+  showDeleteButton: _propTypes.default.bool,
+  showRoateButton: _propTypes.default.bool,
+  showZoomInButton: _propTypes.default.bool,
+  showZoomOutButton: _propTypes.default.bool
+};
+DocumentUpload.defaultProps = {
+  uploadedDocuments: [],
+  handleCustomOnChange: () => {},
+  formName: '',
+  multipleDoc: 0,
+  showDelete: true,
+  getPreview: () => {},
+  isMandatory: true,
+  deleteHandler: () => {},
+  noOfUpload: 1,
+  downloadCallback: () => {},
+  deleteCallback: () => {},
+  showDeleteButton: false,
+  showDownloadButton: true,
+  showRoateButton: true,
+  showZoomInButton: true,
+  showZoomOutButton: true
+};
+var _default = exports.default = DocumentUpload;

package/build/dev/oa-component-upload/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSection = exports.MainStyleSec = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-upload-list{\n  display: flex !important;\n  gap: 16px !important;\n  flex-wrap: wrap !important;\n}\n.ant-upload-wrapper .ant-upload-list::before {\n    display: none;\n}\n.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n  width: 96px;\n  height: 96px;\n  margin-block: 0;\n  margin-inline: 0;\n}\n.ant-upload-select button >  span.UploadImg{\n  width: 24px !important;\n  height: 24px;\n}\n.ant-upload-select button >  span.UploadImg > img{\n  width: 100% !important;\n}\n.ant-upload-list-item-container:last-child{\n  margin: 0 !important;\n}\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.ant-upload-disabled .button{\n  cursor: not-allowed;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,.ant-upload-list-item-A{\n    border: 1px solid var(--color-divider) !important;\n  }\n \n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n \n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n \n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  \n  @media only screen and (max-width: 600px) {\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n      opacity: 1;\n    }\n    .ant-upload-list-item-actions a {\n      height: 16px;\n      align-items: center;\n      justify-content: center;\n      width: 16px !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px !important;\n    padding: 0px !important;\n    color: #fff;\n}\n  }\n"])));
+const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2{\n    margin: 0;\n  }\n \n  @media only screen and (max-width: 600px) {\n    \n    .ant-upload-list-item-actions button {\n      height: 16px!important;\n      width: 16px !important;\n      justify-content: center;\n  }\n  .ant-upload-list-item-actions a {\n    height: 16px;\n    width: 16px !important;\n    align-items: center;\n    justify-content: center;\n}\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div{\n      display: none;\n    }\n  }\n"])));

package/build/dev/oa-component-viewer/CustomViewer.js

@@ -0,0 +1,326 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url-search-params.js");
+require("core-js/modules/es.array.includes.js");
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+var _ArrowBackIos = _interopRequireDefault(require("@material-ui/icons/ArrowBackIos"));
+var _ArrowForwardIos = _interopRequireDefault(require("@material-ui/icons/ArrowForwardIos"));
+var _DeleteOutline = _interopRequireDefault(require("@material-ui/icons/DeleteOutline"));
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+var _Rotate90DegreesCcw = _interopRequireDefault(require("@material-ui/icons/Rotate90DegreesCcw"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactPdf = require("react-pdf");
+require("react-pdf/dist/esm/Page/AnnotationLayer.css");
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
+var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = require("./styles");
+const _excluded = ["downloadCallback", "deleteCallback", "title", "selectedDocumentData", "previewFile", "fileName", "showDownloadButton", "showDeleteButton", "showRoateButton", "showZoomInButton", "showZoomOutButton"],
+  _excluded2 = ["zoomIn", "zoomOut"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const supportedImage = ['png', 'jpeg', 'jpg'];
+const supportedPdf = ['pdf'];
+const supportedVideos = ['mp4', 'mkv', 'webm'];
+
+/**
+ * Renders content based on the specified format.
+ *
+ * @param {string} format - The format of the content to render ('PDF' or 'IMAGE').
+ * @param {boolean} file - Indicates if a file is present.
+ * @param {string} url - The URL of the file to render.
+ * @param {number} pageNumber - The page number to render for PDF files.
+ * @param {function} onDocumentLoadSuccess - Callback function to handle successful document load.
+ *
+ * @returns {React.ReactElement} - A React element representing the rendered content.
+ * If the format is 'PDF' and a file is present, it renders a PDF document.
+ * If the format is 'IMAGE' and a file is present, it renders an image.
+ * Displays a loader if the file is not present.
+ * Returns a message for unsupported file formats.
+ */
+const renderContent = (format, file, url, pageNumber, onDocumentLoadSuccess) => {
+  if (format === 'PDF') {
+    return file ? /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+      file: url,
+      onLoadSuccess: onDocumentLoadSuccess
+    }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+      pageNumber: pageNumber
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+  }
+  if (format === 'IMAGE') {
+    return file ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "overflowScroll"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      alt: "example",
+      style: {
+        width: '100%'
+      },
+      src: url
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+  }
+  if (format === 'VIDEO') {
+    return file ? /*#__PURE__*/_react.default.createElement("video", {
+      controls: true,
+      style: {
+        width: '100%'
+      },
+      src: url
+    }, /*#__PURE__*/_react.default.createElement("track", {
+      kind: "captions"
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", null, "Unsupported file format");
+};
+
+/**
+ * Component that renders controls for zooming, rotating and navigating through the pages of a PDF document.
+ *
+ * @param {function} setRotationDegree - Callback function to change the rotation degree of the document.
+ * @param {number} pageNumber - The current page number of the document.
+ * @param {number} numPages - The total number of pages in the document.
+ * @param {function} setPageNumber - Callback function to change the current page number of the document.
+ * @param {function} getFileFormat - Function that returns the format of the document ('PDF' or 'IMAGE').
+ * @param {function} handleZoomIn - Callback function to handle zooming in.
+ * @param {function} handleZoomOut - Callback function to handle zooming out.
+ *
+ * @returns {React.ReactElement} - A React element that renders the controls.
+ */
+function Controls(_ref) {
+  let {
+    setRotationDegree,
+    pageNumber,
+    numPages,
+    setPageNumber,
+    getFileFormat,
+    handleZoomIn,
+    handleZoomOut,
+    showRoateButton,
+    showZoomInButton,
+    showZoomOutButton
+  } = _ref;
+  const rotate = () => {
+    setRotationDegree(prevRotationDegree => prevRotationDegree + 90);
+  };
+  const handleKeyPress = (event, callback) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      callback();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledZoom, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flextBodyContain"
+  }, showZoomInButton && /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleZoomIn,
+    onKeyDown: event => handleKeyPress(event, handleZoomIn),
+    className: "iconWidthPad"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Add.default,
+    color: "primary"
+  })), showZoomOutButton && /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleZoomOut,
+    onKeyDown: event => handleKeyPress(event, handleZoomOut),
+    className: "iconWidthPad"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Remove.default,
+    color: "primary"
+  }))), getFileFormat === 'PDF' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flextBodyContain pdfFlexStyles"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    tabIndex: 0,
+    onClick: () => setPageNumber(pageNumber - 1),
+    onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber - 1)),
+    className: "iconWidthPad iconWidthPadPdf",
+    disabled: pageNumber <= 1
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _ArrowBackIos.default
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, "Page", ' ', pageNumber, ' ', "of", ' ', numPages), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    tabIndex: 0,
+    onClick: () => setPageNumber(pageNumber + 1),
+    onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber + 1)),
+    className: "iconWidthPad iconWidthPadPdf",
+    disabled: pageNumber >= numPages
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _ArrowForwardIos.default
+  }))), showRoateButton && /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: rotate,
+    onKeyDown: event => handleKeyPress(event, rotate),
+    className: "iconWidthPad posroated"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Rotate90DegreesCcw.default,
+    color: "primary"
+  })));
+}
+Controls.propTypes = {
+  setRotationDegree: _propTypes.default.func.isRequired,
+  pageNumber: _propTypes.default.number.isRequired,
+  numPages: _propTypes.default.number.isRequired,
+  setPageNumber: _propTypes.default.func.isRequired,
+  getFileFormat: _propTypes.default.string.isRequired,
+  handleZoomIn: _propTypes.default.func.isRequired,
+  handleZoomOut: _propTypes.default.func.isRequired,
+  showRoateButton: _propTypes.default.bool.isRequired,
+  showZoomInButton: _propTypes.default.bool.isRequired,
+  showZoomOutButton: _propTypes.default.bool.isRequired
+};
+function CustomViewer(_ref2) {
+  let {
+      downloadCallback,
+      deleteCallback,
+      title,
+      selectedDocumentData,
+      previewFile,
+      fileName = 'download',
+      showDownloadButton,
+      showDeleteButton,
+      showRoateButton,
+      showZoomInButton,
+      showZoomOutButton
+    } = _ref2,
+    antDesignProps = _objectWithoutProperties(_ref2, _excluded);
+  const [rotationDegree, setRotationDegree] = (0, _react.useState)(0);
+  const [numPages, setNumPages] = (0, _react.useState)(null);
+  const [pageNumber, setPageNumber] = (0, _react.useState)(1);
+  const [initialScale, setInitialScale] = (0, _react.useState)(1);
+  const [scale, setScale] = (0, _react.useState)(1);
+  const onDocumentLoadSuccess = _ref3 => {
+    let {
+      numPages: pages
+    } = _ref3;
+    setNumPages(pages);
+    setPageNumber(1);
+  };
+  const handleZoomIn = () => {
+    setScale(scale + 0.1);
+  };
+  const handleZoomOut = () => {
+    if (scale > initialScale) {
+      setScale(scale - 0.1);
+    }
+  };
+  const getUrl = (0, _react.useMemo)(() => {
+    if (typeof previewFile === 'string') {
+      return previewFile;
+    }
+    if (typeof previewFile === 'object' && previewFile) {
+      return URL.createObjectURL(previewFile.originFileObj);
+    }
+    return null;
+  }, [previewFile]);
+  const getFileFormat = (0, _react.useMemo)(() => {
+    var _title$split, _previewFile$type;
+    const fileExtension = typeof previewFile === 'string' ? title === null || title === void 0 || (_title$split = title.split('.')) === null || _title$split === void 0 || (_title$split = _title$split.pop()) === null || _title$split === void 0 ? void 0 : _title$split.toLowerCase() : previewFile === null || previewFile === void 0 || (_previewFile$type = previewFile.type) === null || _previewFile$type === void 0 ? void 0 : _previewFile$type.split('/')[1];
+    if (supportedImage.includes(fileExtension)) {
+      return 'IMAGE';
+    }
+    if (supportedPdf.includes(fileExtension)) {
+      return 'PDF';
+    }
+    if (supportedVideos.includes(fileExtension)) {
+      return 'VIDEO';
+    }
+    return 'UNSUPPORTED';
+  }, [previewFile, title]);
+  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, _extends({
+    width: 860,
+    className: "imageZoom",
+    buttonConfig: [...(showDownloadButton ? [{
+      callback: () => {
+        downloadCallback(selectedDocumentData);
+      },
+      label: 'Download'
+    }] : []), ...(showDeleteButton ? [{
+      callback: () => {
+        deleteCallback(selectedDocumentData);
+      },
+      label: 'Delete',
+      type: 'danger-text-only',
+      iconConfig: {
+        icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _DeleteOutline.default,
+          size: 24
+        }),
+        position: 'left'
+      }
+    }] : [])]
+  }, antDesignProps), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref4 => {
+    let {
+        zoomIn,
+        zoomOut
+      } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded2);
+    return /*#__PURE__*/_react.default.createElement(_styles.PdfStyles, null, /*#__PURE__*/_react.default.createElement(Controls, {
+      setRotationDegree: setRotationDegree,
+      pageNumber: pageNumber,
+      numPages: numPages,
+      setPageNumber: setPageNumber,
+      getFileFormat: getFileFormat,
+      handleZoomIn: handleZoomIn,
+      handleZoomOut: handleZoomOut,
+      showRoateButton: showRoateButton,
+      showZoomInButton: showZoomInButton,
+      showZoomOutButton: showZoomOutButton
+    }), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        transform: "rotate(".concat(rotationDegree, "deg) scale(").concat(scale, ")")
+      }
+    }, renderContent(getFileFormat, previewFile, getUrl, pageNumber, onDocumentLoadSuccess))));
+  }));
+}
+CustomViewer.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  previewFile: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
+  fileName: _propTypes.default.string,
+  antDesignProps: _propTypes.default.object,
+  downloadCallback: _propTypes.default.func,
+  selectedDocumentData: _propTypes.default.object,
+  showDownloadButton: _propTypes.default.bool,
+  showDeleteButton: _propTypes.default.bool,
+  deleteCallback: _propTypes.default.func,
+  showRoateButton: _propTypes.default.bool,
+  showZoomInButton: _propTypes.default.bool,
+  showZoomOutButton: _propTypes.default.bool
+};
+CustomViewer.defaultProps = {
+  fileName: 'download',
+  antDesignProps: {},
+  downloadCallback: () => {},
+  selectedDocumentData: {},
+  showDownloadButton: true,
+  showDeleteButton: false,
+  deleteCallback: () => {},
+  showRoateButton: true,
+  showZoomInButton: true,
+  showZoomOutButton: true
+};
+var _default = exports.default = CustomViewer;

package/build/dev/oa-component-viewer/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mainStyle = exports.StyledZoom = exports.PdfStyles = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const mainStyle = exports.mainStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nposition: relative;\nbackground: red;\n"])));
+const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.flextBodyContain{\n    position: absolute;\n    right: 52px;\n    bottom: 116px;\n    flex-direction: column;\n    z-index: 9999;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n    position: absolute;\n    right: 52px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    top: 68px;\n    z-index: 999;\n    border-radius: 4px;\n}\n.iconWidthPad{\n    cursor: pointer;\n    background: var(--color-primary-background);    \n    padding: 6px;\n    height: 32px;\n    width: 32px;\n    border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n    border: none;\n}\n@media screen and (max-width: 992px) {\n    .posroated,.flextBodyContain{\n        right: 38px;\n    }\n  }\n"])));
+const PdfStyles = exports.PdfStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ncanvas{\n    margin: 0 auto;\n}\n.pdfFlexStyles{\n    left: 0;\n    right: 0;\n    bottom: 92px;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: #fff;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 8px;\n    gap: 12px;\n}\n.iconWidthPadPdf {\n    width: auto;\n    height: auto;\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border: none;\n    border-bottom: none;\n}\n\nbutton:disabled {\n    color: var(--color-disabled-button);\n    cursor: not-allowed; \n    border:none;\n  }\n  button{\n    color: var(--color-primary-content);\n  }\n@media screen and (max-width: 600px) {\n\n    canvas {\n        width: 100% !important;\n        height: auto !important;\n    }\n  }\n"])));

package/build/dev/oa-widget-document-upload-card/DocUploadCardWidget.js

@@ -0,0 +1,179 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _styles = require("./styles");
+var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
+var _upload = _interopRequireDefault(require("../../images/upload.svg"));
+var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
+var _CustomUpload = _interopRequireDefault(require("../../components/oa-component-upload/CustomUpload"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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; }
+/**
+ * Takes a file and returns a Promise that resolves with the file as a base64 encoded string.
+ * The Promise is rejected if there is an error reading the file.
+ * @param {File} file The file to be converted to base64
+ * @returns {Promise<string>} A Promise that resolves with the file as a base64 encoded string
+ */
+const getBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = error => reject(error);
+});
+/**
+ * Downloads a file from a base64 encoded string.
+ * @param {string} base64String The base64 encoded string of the file to be downloaded
+ * @param {string} [fileName] The name of the file to be downloaded. If not provided, the file will be downloaded with the name 'download'.
+ * @returns {undefined}
+ */
+const downloadFile = (base64String, fileName) => {
+  const link = document.createElement('a');
+  link.href = base64String;
+  link.download = fileName || 'download';
+  link.click();
+};
+
+/**
+   * A component that allows users to upload documents.
+   * The component displays the uploaded documents in a list.
+   * The component also allows users to delete the uploaded documents.
+   * @param {object} props The props passed to the component
+   * @param {array} [props.uploadedDocuments=[]] An array of documents that have already been uploaded
+   * @param {function} props.onChange A function that is called whenever the list of uploaded documents changes
+   * @param {number} [props.multipleDoc=0] The maximum number of documents that can be uploaded. If set to 0, there is no limit
+   * @param {boolean} [props.showDelete=false] Whether or not to show a delete button next to each uploaded document
+   * @param {string} [props.subText] A string that is displayed below the heading
+   * @param {string} [props.heading] A string that is displayed above the upload button
+   * @param {string} [props.formName] The name of the form field that the uploaded documents should be associated with
+   * @param {function} [props.getPreview] A function that is called whenever the user clicks on an uploaded document. It should return a Promise that resolves with the URL of the document
+   * @param {string} [props.infoText] A string that is displayed below the subText
+   * @param {boolean} [props.isMandatory=false] Whether or not the component is mandatory
+   * @returns {object} A React component
+   */
+function DocumentUploadCard(props) {
+  const {
+    uploadedDocuments = [],
+    multipleDoc,
+    showDelete,
+    subText,
+    heading,
+    formName,
+    getPreview,
+    infoText,
+    isMandatory
+  } = props;
+  const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
+  const [previewImage, setPreviewImage] = (0, _react.useState)(null);
+  const [previewTitle, setPreviewTitle] = (0, _react.useState)('');
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
+  const handleCancel = () => setPreviewOpen(false);
+
+  /**
+   * Determines if the given file is an image file based on its file extension.
+   * @param {string} fileName The name of the file to check
+   * @returns {boolean} Whether or not the file is an image file
+   */
+  function isImageFile(fileName) {
+    var _fileName$split;
+    // Extract the file extension from the file name
+    const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split('.')) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
+
+    // Define an array of image file extensions
+    const imageFileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
+
+    // Check if the file extension is in the array of image file extensions
+    if (imageFileExtensions.indexOf(fileExtension) !== -1) {
+      return true;
+    }
+    return false;
+  }
+  (0, _react.useEffect)(() => {
+    setFileList(uploadedDocuments);
+  }, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
+  const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 0,
+      background: 'none'
+    },
+    type: "button"
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    className: "UploadImg",
+    alt: "phone img",
+    src: _upload.default
+  }), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
+  return /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, (heading || subText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "uploadSecPad"
+  }, heading && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    className: "type-t2-700"
+  }, heading, isMandatory && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "negative"
+  }, " *"))), typeof subText === 'string' && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      whiteSpace: 'pre-line'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-b2-400"
+  }, subText)), /*#__PURE__*/_react.default.isValidElement(subText) && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      whiteSpace: 'pre-line'
+    }
+  }, subText), infoText && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    color: "background-warning",
+    description: infoText
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "uploadDiv "
+  }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorBorder: _ColorVariablesMap.default['--color-divider'],
+        borderRadiusLG: 4,
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        colorPrimaryBorder: _ColorVariablesMap.default['--color-divider'],
+        colorFillAlter: _ColorVariablesMap.default['--color-secondary-background'],
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        colorText: _ColorVariablesMap.default['--color-secondary-content']
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomUpload.default, props)))));
+}
+DocumentUploadCard.propTypes = {
+  uploadedDocuments: _propTypes.default.array,
+  subText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  heading: _propTypes.default.string,
+  formName: _propTypes.default.string,
+  infoText: _propTypes.default.string,
+  showDelete: _propTypes.default.bool,
+  multipleDoc: _propTypes.default.number,
+  getPreview: _propTypes.default.func,
+  // Define the getPreview prop type
+  isMandatory: _propTypes.default.bool
+};
+DocumentUploadCard.defaultProps = {
+  uploadedDocuments: [],
+  subText: '',
+  heading: '',
+  formName: '',
+  infoText: '',
+  multipleDoc: 0,
+  showDelete: true,
+  getPreview: () => {},
+  isMandatory: true
+};
+var _default = exports.default = DocumentUploadCard;

package/build/dev/oa-widget-document-upload-card/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSection = exports.MainStyleSec = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n.uploadDiv{\n  width: 96px;\n  position: relative;\n}\n.uploadDiv em{\n  position: absolute;\n  right: -9px;\n  top: -9px;\n  font-style: normal;\n  width: 20px;\n  height: 20px;\n  background: var(--color-warning);\n  z-index: 9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  color: #fff;\n  font-size: 12px;\n  line-height: 0;\n}\n.UploadImg img{\n  height: 24px;\n  width: 24px;\n\n}\n.UploadImg{\n  justify-content: center;\n  cursor: pointer;\n}\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done,.ant-upload-list-item-A{\n    border: 1px solid var(--color-divider) !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before ant-upload-list-item-actions > a\n  {\n    background: red !important;\n  }\n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before{\n    background: transparent;\n    opacity: 1;\n  }\n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n    opacity: 1;\n  }\n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n    color: #fff;\n  }\n  @media only screen and (max-width: 600px) {\n    .uploadDiv {\n      width: 64px;\n  }\n  .uploadDiv em{\n    width: 16px;\n    height: 16px;\n  }\n  }\n"])));
+const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2{\n    margin: 0;\n  }\n  .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n    width: 96px;\n    height: 96px;\n    margin: 0;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n    width: 96px !important;\n    height: 96px !important;\n    margin: 0;\n  }\n  @media only screen and (max-width: 600px) {\n    .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px !important;\n      height: 64px !important;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n      font-size:12px;\n      margin: 0 !important;\n      padding: 0 !important;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .ant-upload-list-item-actions button {\n      height: 16px!important;\n      width: 16px !important;\n      justify-content: center;\n  }\n  .ant-upload-list-item-actions a {\n    height: 16px;\n    width: 16px !important;\n    align-items: center;\n    justify-content: center;\n}\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div{\n      display: none;\n    }\n  }\n"])));

package/build/index.js

@@ -275,6 +275,12 @@ Object.defineProperty(exports, "CustomUpload", {
     return _CustomUpload.default;
   }
 });
+Object.defineProperty(exports, "CustomUploadDev", {
+  enumerable: true,
+  get: function get() {
+    return _CustomUpload2.default;
+  }
+});
 Object.defineProperty(exports, "CustomerRatingCard", {
   enumerable: true,
   get: function get() {
@@ -293,6 +299,12 @@ Object.defineProperty(exports, "DocUploadCardWidget", {
     return _DocUploadCardWidget.default;
   }
 });
+Object.defineProperty(exports, "DocUploadCardWidgetDev", {
+  enumerable: true,
+  get: function get() {
+    return _DocUploadCardWidget2.default;
+  }
+});
 Object.defineProperty(exports, "DocUploadWidget", {
   enumerable: true,
   get: function get() {
@@ -618,6 +630,8 @@ var _PincodeBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-p
 var _MapBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-map-base-location/MapBaseLocation"));
 var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
 var _TrackShipmentWidget2 = _interopRequireDefault(require("./dev/oa-widget-track-shipment/TrackShipmentWidget"));
+var _DocUploadCardWidget2 = _interopRequireDefault(require("./dev/oa-widget-document-upload-card/DocUploadCardWidget"));
+var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/CustomUpload"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget.js

@@ -332,7 +332,7 @@ function CustomPinPatternCaptureWidget(_ref) {
     onChange: patternArray => setPattern(patternArray),
     onFinish: () => handlePatternComplete(pattern),
     disabled: (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0
-  }), renderNumbersOnDots())), showButtons && /*#__PURE__*/_react.default.createElement("div", {
+  }), renderNumbersOnDots())), /*#__PURE__*/_react.default.createElement("div", null, showButtons && /*#__PURE__*/_react.default.createElement("div", {
     className: "buttonAlign"
   }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
     type: "text-only",
@@ -353,7 +353,7 @@ function CustomPinPatternCaptureWidget(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "type-b3-400",
     color: "secondary-content"
-  }, "Note: Your device PIN/Pattern is 100% secure with us. It will only be used to check your device condition during repair.")))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+  }, "Note: Your device PIN/Pattern is 100% secure with us. It will only be used to check your device condition during repair."))))), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
     buttonConfig: [{
       callback: onCancelOfMisMatchModal,
       label: 'Redraw pattern',

package/build/widgets/oa-widget-input-pattern-pin/styles.js

@@ -9,4 +9,4 @@ var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: black !important;\n}\n  .pattern-container {\n          position: relative;\n        }\n        .numbers-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-wrap: wrap;\n          right: 0;\n              width: 300px;\n    height: 300px;\n    margin: 0 auto;\n        }\n        .dot-number {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100px;\n          height: 100px;\n        }\n  .react-pattern-lock__point-wrapper{\n      z-index: 9;\n  }\n.flexAlignPattern{\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: calc(100vh - 0px);\n    gap: 24px;\n}\n    .flexAlignPattern .ant-form-item{\n        text-align: left;\n    }\n        .ant-form-item-explain-error{\n        color: var(--color-negative) !important;\n        }\n    .cancelIcon{\n        position: absolute;\n       right: 16px;\n       cursor: pointer;\n    }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: #0275DA !important;\n      min-width: 20px !important;\n    min-height: 20px !important;\n}\n    .react-pattern-lock__point-inner{\n      background: #0275DA;\n      min-width: 20px !important;\n    min-height: 20px !important;\n    }\n\n    .posRelative{\n    position: relative;\n    }\n .disabled  .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: var(--color-placeholder-text) !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n        z-index: 2;\n}\n      .greyDisabledDots .react-pattern-lock__point-inner{\n        background: var(--color-placeholder-text);\n      }  \n        .dot-number span{\n          width: 16px;\n          height: 16px;\n          background: var(--color-divider);\n          z-index: 2;\n          font-size: 11px;\n          font-style: normal;\n          font-weight: 700;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          color: #717171;\n              line-height: 0;\n              z-index: 9;\n        }\n          .activedotoverlay span{\n            background: #0275DA;\n            color: #fff;\n          }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: black !important;\n}\n  .buttonAlign{\n      display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 0 24px;\n  }\n    .buttonAlign button{\n      width: 100%;\n    }\n      .textInfo{\n        padding: 12px;\n            border-top: 1px solid #D9D9D9;\n            text-align: left;\n            margin: 16px 0 0;\n            text-align: left;\n      }\n          .alignLeft{\n          text-align: left;\n          }\n          .selected .react-pattern-lock__point{\n              width: 28px !important;\n              height: 28px !important;\n              background: #DEF1FB !important;\n              border-radius: 50% !important;\n          }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: #0275DA !important;\n}\n   @media screen and (-webkit-min-device-pixel-ratio: 0) {\n        @supports (-webkit-overflow-scrolling: touch) {\n            .react-pattern-lock__pattern-wrapper{\n                    width: 274px !important;\n                    height: 274px !important;\n            }\n}\n            }\n"])));
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: black !important;\n}\n  .pattern-container {\n          position: relative;\n        }\n        .numbers-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-wrap: wrap;\n          right: 0;\n              width: 300px;\n    height: 300px;\n    margin: 0 auto;\n        }\n        .dot-number {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 100px;\n          height: 100px;\n        }\n  .react-pattern-lock__point-wrapper{\n      z-index: 9;\n  }\n.flexAlignPattern{\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: calc(100vh - 0px);\n    gap: 24px;\n}\n    .flexAlignPattern .ant-form-item{\n        text-align: left;\n    }\n        .ant-form-item-explain-error{\n        color: var(--color-negative) !important;\n        }\n    .cancelIcon{\n        position: absolute;\n       right: 16px;\n       cursor: pointer;\n    }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: #0275DA !important;\n      min-width: 20px !important;\n    min-height: 20px !important;\n}\n    .react-pattern-lock__point-inner{\n      background: #0275DA;\n      min-width: 20px !important;\n    min-height: 20px !important;\n    }\n\n    .posRelative{\n    position: relative;\n    }\n .disabled  .react-pattern-lock__point .react-pattern-lock__point-inner {\n  background: var(--color-placeholder-text) !important;\n      min-width: 12px !important;\n    min-height: 12px !important;\n        z-index: 2;\n}\n      .greyDisabledDots .react-pattern-lock__point-inner{\n        background: var(--color-placeholder-text);\n      }  \n        .dot-number span{\n          width: 16px;\n          height: 16px;\n          background: var(--color-divider);\n          z-index: 2;\n          font-size: 11px;\n          font-style: normal;\n          font-weight: 700;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          border-radius: 50%;\n          color: #717171;\n              line-height: 0;\n              z-index: 9;\n        }\n          .activedotoverlay span{\n            background: #0275DA;\n            color: #fff;\n          }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: black !important;\n}\n  .buttonAlign{\n      display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 0 24px;\n  }\n    .buttonAlign button{\n      width: 100%;\n    }\n      .textInfo{\n        padding: 12px;\n            border-top: 1px solid #D9D9D9;\n            text-align: left;\n            margin: 32px 0 0;\n            text-align: left;\n      }\n          .alignLeft{\n          text-align: left;\n          }\n          .selected .react-pattern-lock__point{\n              width: 28px !important;\n              height: 28px !important;\n              background: #DEF1FB !important;\n              border-radius: 50% !important;\n          }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n  background: #0275DA !important;\n}\n   @media screen and (-webkit-min-device-pixel-ratio: 0) {\n        @supports (-webkit-overflow-scrolling: touch) {\n            .react-pattern-lock__pattern-wrapper{\n                    width: 274px !important;\n                    height: 274px !important;\n            }\n}\n            }\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.310",
+  "version": "0.18.313",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",