oa-componentbook 1.0.1-stage.43 → 1.0.1-stage.430

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

@@ -18,7 +18,10 @@ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorV
 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"];
+const _excluded = ["uploadedDocuments", "handleCustomOnChange", "multipleDoc", "showDelete", "formName", "getPreview", "isMandatory", "noOfUpload", "downloadCallback", "showDownloadButton", "showDeleteButton", "deleteHandler", "showRoateButton", "showZoomInButton", "showZoomOutButton", "uploadButtonConfig", "notShowPreviewButton", "removeHandler", "listType", "deleteModalConfig"];
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+/* eslint-disable */
 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 }; }
@@ -44,18 +47,18 @@ const getBase64 = file => new Promise((resolve, reject) => {
  * @returns {undefined}
  */
 const downloadFile = (base64String, fileName) => {
-  const link = document.createElement('a');
+  const link = document.createElement("a");
   link.href = base64String;
-  link.download = fileName || 'download';
+  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();
+  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'];
+  const imageFileExtensions = ["jpg", "jpeg", "png"];
 
   // Check if the file extension is in the array of image file extensions
   if (imageFileExtensions.indexOf(fileExtension) !== -1) {
@@ -94,24 +97,35 @@ function DocumentUpload(_ref) {
       deleteHandler,
       showRoateButton,
       showZoomInButton,
-      showZoomOutButton
+      showZoomOutButton,
+      uploadButtonConfig,
+      notShowPreviewButton,
+      removeHandler = () => {},
+      listType,
+      deleteModalConfig
     } = _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 [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)({});
+  const [isError, setIsError] = (0, _react.useState)(false);
+  const uploadRef = _react.default.useRef(null);
   (0, _react.useEffect)(() => {
     setFileList(uploadedDocuments);
   }, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
   const handlePreview = async file => {
+    // Don't show preview if notShowPreviewButton is true
+    if (notShowPreviewButton) {
+      return;
+    }
     if (file !== null && file !== void 0 && file.originFileObj) {
       setPreviewImage(file);
-    } else if ((file === null || file === void 0 ? void 0 : file.fileType) === 'thumbnail') {
+    } else if ((file === null || file === void 0 ? void 0 : file.fileType) === "thumbnail") {
       const url = await getPreview();
       setPreviewImage(url);
     } else {
@@ -126,16 +140,32 @@ function DocumentUpload(_ref) {
       fileList: newFileList,
       file
     } = _ref2;
+    if (antDesignProps !== null && antDesignProps !== void 0 && antDesignProps.customRequest) {
+      const isError = newFileList.some(f => (f === null || f === void 0 ? void 0 : f.status) === "error");
+      if (isError) {
+        setFileList([]);
+        setIsError(true);
+        setLoading(false);
+        return;
+      } else {
+        setIsError(false);
+      }
+      setFileList(newFileList);
+      const isUploading = newFileList.some(f => f.status === "uploading");
+      setLoading(isUploading);
+      return;
+    }
+
+    // Default behavior for non-custom uploads
     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';
+          modifiedFile.status = "done";
           if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
             modifiedFile.url = _PdfSampleImage.default;
-            // delete modifiedFile?.type;
           }
         }
       } catch (error) {
@@ -147,48 +177,93 @@ function DocumentUpload(_ref) {
     const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
     setFileList(tempList);
   };
+  const getUploadButtonIcon = () => {
+    if ((uploadButtonConfig === null || uploadButtonConfig === void 0 ? void 0 : uploadButtonConfig.icon) === "PlusOutlined") {
+      return /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null);
+  };
   const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
     style: {
       border: 0,
-      background: 'none'
+      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"));
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : getUploadButtonIcon(), /*#__PURE__*/_react.default.createElement("div", null, uploadButtonConfig !== null && uploadButtonConfig !== void 0 && uploadButtonConfig.text ? uploadButtonConfig === null || uploadButtonConfig === void 0 ? void 0 : uploadButtonConfig.text : "Upload"));
   const DeleteFile = async () => {
-    await deleteHandler(selectedFile);
+    await deleteHandler(selectedFile, isEmptyFileList => {
+      if (isEmptyFileList) {
+        setFileList([]);
+      }
+    });
     setDeleteConfirmation(false);
     if (showDeleteButton) {
       setPreviewOpen(false);
     }
   };
   const handleRemove = file => new Promise((resolve, reject) => {
-    setSelectedFile(file);
-    setDeleteConfirmation(true);
-    resolve(false);
+    // If file is uploading, cancel immediately without confirmation
+    if ((file === null || file === void 0 ? void 0 : file.status) === "uploading") {
+      // Remove file from list immediately to cancel upload
+      const newFileList = fileList.filter(f => f.uid !== file.uid);
+      setFileList(newFileList);
+      resolve(true); // Allow removal
+      if (removeHandler) removeHandler(file);
+      return;
+    }
+
+    // If file is done or error, show confirmation modal
+    if ((file === null || file === void 0 ? void 0 : file.status) === "done" || (file === null || file === void 0 ? void 0 : file.status) === "error") {
+      setSelectedFile(file);
+      setDeleteConfirmation(true);
+      resolve(false); // Prevent removal until confirmed
+      return;
+    }
+
+    // Default: allow removal
+    resolve(true);
   });
   const handleModalDeleteButton = file => {
     setSelectedFile(file);
     setDeleteConfirmation(true);
   };
+
+  // Get the appropriate remove icon based on file status
+  const getRemoveIcon = file => {
+    // Show cross icon during upload (to cancel)
+    if ((file === null || file === void 0 ? void 0 : file.status) === "uploading") {
+      return /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, null);
+    }
+    // Show delete icon after upload is done or if upload failed
+    if ((file === null || file === void 0 ? void 0 : file.status) === "done" || (file === null || file === void 0 ? void 0 : file.status) === "error") {
+      return /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null);
+    }
+    // Default to delete icon
+    return /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null);
+  };
   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"
+    onClick: listType === "picture" ? () => {
+      var _inst$upload, _inst$nativeElement, _inst$nativeElement$q, _inst$querySelector, _input$click;
+      if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) >= noOfUpload) return;
+      const inst = uploadRef.current;
+      if (inst !== null && inst !== void 0 && inst.onClick) {
+        inst.onClick();
+        return;
+      }
+      const input = (inst === null || inst === void 0 || (_inst$upload = inst.upload) === null || _inst$upload === void 0 ? void 0 : _inst$upload.input) || (inst === null || inst === void 0 ? void 0 : inst.fileInput) || (inst === null || inst === void 0 || (_inst$nativeElement = inst.nativeElement) === null || _inst$nativeElement === void 0 || (_inst$nativeElement$q = _inst$nativeElement.querySelector) === null || _inst$nativeElement$q === void 0 ? void 0 : _inst$nativeElement$q.call(_inst$nativeElement, 'input[type="file"]')) || (inst === null || inst === void 0 || (_inst$querySelector = inst.querySelector) === null || _inst$querySelector === void 0 ? void 0 : _inst$querySelector.call(inst, 'input[type="file"]'));
+      input === null || input === void 0 || (_input$click = input.click) === null || _input$click === void 0 || _input$click.call(input);
+    } : null,
+    className: listType === "picture" ? "uploadSecPad ".concat(isError && "errorBorder") : "uploadDiv"
   }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
-        colorBorder: _ColorVariablesMap.default['--color-divider'],
+        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']
+        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, {
@@ -196,24 +271,30 @@ function DocumentUpload(_ref) {
     rules: [{
       validator: (rule, value) => {
         if (isMandatory && !(value !== null && value !== void 0 && value.length)) {
-          return Promise.reject(new Error('Please upload the document.'));
+          if (typeof value === "object" && Object.keys(value).length > 0) {
+            return Promise.resolve();
+          }
+          return Promise.reject(new Error("Please upload the document."));
         }
         return Promise.resolve();
       }
     }]
   }, /*#__PURE__*/_react.default.createElement(_antd.Upload, _extends({
-    customRequest: () => {},
-    listType: "picture-card",
+    onClick: e => e.stopPropagation(),
+    ref: uploadRef,
+    listType: listType ? listType : "picture-card",
     fileList: fileList,
-    onPreview: handlePreview,
+    onPreview: notShowPreviewButton ? undefined : 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)
-    }
+      showRemoveIcon: showDelete !== undefined ? showDelete : true,
+      showPreviewIcon: !notShowPreviewButton,
+      removeIcon: file => getRemoveIcon(file),
+      previewIcon: notShowPreviewButton ? false : /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
+    },
+    maxCount: noOfUpload
   }, antDesignProps), (fileList === null || fileList === void 0 ? void 0 : fileList.length) >= noOfUpload ? null : uploadButton)))))), previewOpen && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
     open: previewOpen,
     previewFile: previewImage,
@@ -230,15 +311,17 @@ function DocumentUpload(_ref) {
   }), deleteConfirmation && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
     buttonConfig: [{
       callback: () => DeleteFile(),
-      label: 'Yes, Delete',
-      type: 'danger-primary'
+      label: "Yes, Delete",
+      type: "danger-primary"
     }],
-    imgSrc: _handIcon.default,
+    imgSrc: deleteModalConfig !== null && deleteModalConfig !== void 0 && deleteModalConfig.deleteImage ? deleteModalConfig.deleteImage : _handIcon.default,
     open: deleteConfirmation,
-    onCancel: () => setDeleteConfirmation(false),
-    title: "Delete Item?",
+    onCancel: () => {
+      setDeleteConfirmation(false);
+    },
+    title: deleteModalConfig !== null && deleteModalConfig !== void 0 && deleteModalConfig.title ? deleteModalConfig.title : "Delete Item?",
     className: "delete-modal-confirmation"
-  }, "This action will permanently delete the selected item"));
+  }, deleteModalConfig !== null && deleteModalConfig !== void 0 && deleteModalConfig.body ? deleteModalConfig.body : "This action will permanently delete the selected item"));
 }
 DocumentUpload.propTypes = {
   uploadedDocuments: _propTypes.default.array,
@@ -259,12 +342,15 @@ DocumentUpload.propTypes = {
   showDeleteButton: _propTypes.default.bool,
   showRoateButton: _propTypes.default.bool,
   showZoomInButton: _propTypes.default.bool,
-  showZoomOutButton: _propTypes.default.bool
+  showZoomOutButton: _propTypes.default.bool,
+  uploadButtonConfig: _propTypes.default.object,
+  // Config for upload button text
+  notShowPreviewButton: _propTypes.default.bool // Hide preview button
 };
 DocumentUpload.defaultProps = {
   uploadedDocuments: [],
   handleCustomOnChange: () => {},
-  formName: '',
+  formName: "",
   multipleDoc: 0,
   showDelete: true,
   getPreview: () => {},
@@ -277,6 +363,8 @@ DocumentUpload.defaultProps = {
   showDownloadButton: true,
   showRoateButton: true,
   showZoomInButton: true,
-  showZoomOutButton: true
+  showZoomOutButton: true,
+  uploadButtonConfig: null,
+  notShowPreviewButton: false
 };
 var _default = exports.default = DocumentUpload;

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

@@ -9,5 +9,5 @@ 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"])));
+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\n    .ant-upload.ant-upload-select,\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper\n    .ant-upload-list.ant-upload-list-picture-card\n    .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,\n  .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\n    .ant-upload-list.ant-upload-list-picture-card\n    .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\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-container,\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload.ant-upload-select {\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item::before,\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-actions,\n    .ant-upload-wrapper\n      .ant-upload-list\n      .ant-upload-list-item\n      .ant-upload-list-item-actions\n      .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\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-actions\n      .anticon-eye,\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper\n      .ant-upload-list.ant-upload-list-picture-card\n      .ant-upload-list-item-actions\n      .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  .errorBorder {\n    border: 1px dashed #de350b !important;\n  }\n\n  .uploadSecPad .ant-upload-list-picture {\n    padding: 0 !important;\n    gap: 0 !important;\n  }\n\n  .uploadSecPad\n    .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture\n    .ant-upload-list-item\n    .ant-upload-list-item-progress {\n    bottom: -2px;\n    width: calc(100% - 24px);\n    margin-top: 0;\n    padding-inline-start: 34px;\n  }\n\n  .uploadSecPad .ant-upload-list-item-thumbnail {\n    line-height: normal !important;\n    width: 24px !important;\n    height: 24px !important;\n    padding: 0;\n  }\n\n  .uploadSecPad .ant-upload-list-item-thumbnail .anticon-file,\n  .uploadSecPad .ant-upload-list-item-thumbnail .anticon-loading {\n    font-size: 24px !important;\n    color: #014fc5 !important;\n  }\n\n  .uploadSecPad .ant-upload-list-picture .ant-upload-list-item-done {\n    border: none !important;\n    margin: 0;\n    padding: 0;\n    height: auto;\n  }\n\n  .uploadSecPad .ant-upload-list-item-actions button,\n  .uploadSecPad .ant-upload-list-item-actions button:hover {\n    background: transparent !important;\n  }\n\n  .uploadSecPad .ant-upload-list-item-actions button .anticon-delete svg {\n    color: #de350b;\n    font-size: 18px;\n  }\n\n  .uploadSecPad\n    .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture\n    .ant-upload-list-item-uploading\n    .ant-upload-list-item-name {\n    color: #014fc5;\n  }\n  .uploadSecPad {\n    width: 100%;\n    border-radius: 4px;\n    border: 1px dashed #014fc5;\n    background: #f6f6f6;\n    padding: 24px 16px;\n    cursor: pointer;\n  }\n\n  .uploadSecPad .ant-upload-list-item-container {\n    width: 100%;\n  }\n\n  .uploadSecPad button {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    padding: 0;\n    margin: 0;\n    color: #014fc5;\n    cursor: pointer;\n  }\n  .uploadSecPad .ant-form-item-control-input {\n    min-height: auto;\n  }\n  .uploadSecPad .ant-upload-select {\n    padding: 0px;\n  }\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2 {\n    margin: 0;\n  }\n\n  .uploadSecPad\n    .ant-upload-wrapper\n    .ant-upload-list.ant-upload-list-picture\n    .ant-upload-list-item {\n    height: auto;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-style: none !important;\n    margin: 0;\n  }\n\n  @media only screen and (max-width: 600px) {\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-widget-document-modal/DocumentSideModal.js

@@ -0,0 +1,166 @@
+"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/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("./styles.js");
+var _CustomCheckBox = _interopRequireDefault(require("../../components/oa-component-checkbox/CustomCheckBox"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomDocumentViewer = _interopRequireDefault(require("../oa-component-document-viewer/CustomDocumentViewer"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _reactPdf = require("react-pdf");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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; }
+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); } /* eslint-disable */
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.min.js");
+function DocumentSideModal(_ref) {
+  let {
+    headerIcon,
+    headerText,
+    infoIcon,
+    infoText,
+    onClose,
+    customDocumentViewerProps,
+    initialSelectedPages,
+    initialSlide,
+    updateSelectedPages,
+    maxPages
+  } = _ref;
+  const [carouselPageNumber, setcarouselPageNumber] = (0, _react.useState)(initialSlide !== null && initialSlide !== void 0 ? initialSlide : 0);
+  const [selectedPages, setSelectedPages] = (0, _react.useState)([]); //selected page
+
+  (0, _react.useEffect)(() => {
+    if (initialSelectedPages) {
+      setSelectedPages(initialSelectedPages);
+    }
+  }, [initialSelectedPages]);
+  (0, _react.useEffect)(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  const pageRefs = (0, _react.useRef)([]);
+
+  /**
+   * Handles the checkbox change event.
+   * @param {boolean} checked if the checkbox is checked or not.
+   * The function will add or remove the current page number from the selectedPages state
+   * depending on the checked status. If the checkbox is checked and the selectedPages state
+   * length is less than maxPages (default 2), it will add the current page number to the selectedPages state.
+   * If the checkbox is unchecked, it will remove the current page number from the selectedPages state.
+   */
+  const handleCheckboxChange = checked => {
+    setSelectedPages(prevSelectedPages => {
+      if (checked) {
+        if (!prevSelectedPages.includes(carouselPageNumber) && prevSelectedPages.length < maxPages) {
+          return [...prevSelectedPages, carouselPageNumber];
+        }
+        return prevSelectedPages;
+      } else {
+        return prevSelectedPages.filter(page => page !== carouselPageNumber);
+      }
+    });
+  };
+
+  /**
+   * Updates the current carousel page number.
+   *
+   * @param {number} value - The new page number to set for the carousel.
+   */
+
+  const setcarouselPageNumberHandler = value => {
+    setcarouselPageNumber(value);
+  };
+
+  /**
+   * Deletes the page from selectedPages state.
+   * @param {number} pageNumber - The page number to delete from the selectedPages state.
+   */
+  const deleteSelectedPage = pageNumber => {
+    setSelectedPages(prevSelected => {
+      return prevSelected === null || prevSelected === void 0 ? void 0 : prevSelected.filter(item => item !== pageNumber);
+    });
+  };
+  const isPageSelected = (0, _react.useMemo)(() => selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.includes(carouselPageNumber), [selectedPages, carouselPageNumber]);
+  const disableCheckbox = (0, _react.useMemo)(() => !isPageSelected && selectedPages.length >= maxPages, [isPageSelected, selectedPages]);
+  return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "deviceName"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t2-700",
+    color: "primary-background"
+  }, headerText), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _Close.default,
+    size: 20,
+    onClick: onClose
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "previewSec"
+  }, /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, customDocumentViewerProps, {
+    setcarouselPageNumberHandler: setcarouselPageNumberHandler,
+    initialSlide: initialSlide,
+    selectedPages: selectedPages,
+    isFooterVisible: selectedPages.length > 0 // <-- new prop
+    ,
+    carouselPageNumber: carouselPageNumber,
+    deleteSelectedPage: deleteSelectedPage
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerSec"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "containerWidth"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
+    label: "Select Page ".concat(carouselPageNumber + 1),
+    checked: isPageSelected,
+    disabled: disableCheckbox,
+    onChange: e => handleCheckboxChange(e.target.checked)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b3-400",
+    color: disableCheckbox ? "warning" : "secondary-content"
+  }, "(Maximum ".concat(maxPages, " pages can be selected)")))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: selectedPages.length === 0 ? "Selected" : "".concat(selectedPages.length, " ").concat(selectedPages.length > 1 ? "" : "", " Selected"),
+    disabled: selectedPages.length === 0,
+    onClick: () => updateSelectedPages(selectedPages)
+  }))));
+}
+DocumentSideModal.propTypes = {
+  headerText: _propTypes.default.string,
+  initialSlide: _propTypes.default.number,
+  initialSelectedPages: _propTypes.default.arrayOf(_propTypes.default.number),
+  headerIcon: _propTypes.default.elementType,
+  // assuming it's a component like an Icon
+  infoIcon: _propTypes.default.elementType,
+  infoText: _propTypes.default.string,
+  onClose: _propTypes.default.func.isRequired,
+  customDocumentViewerProps: _propTypes.default.object,
+  updateSelectedPages: _propTypes.default.func.isRequired,
+  maxPages: _propTypes.default.number
+};
+
+// ✅ Default Props
+DocumentSideModal.defaultProps = {
+  headerText: "",
+  initialSelectedPages: [],
+  initialSlide: 0,
+  headerIcon: null,
+  infoIcon: null,
+  infoText: "",
+  customDocumentViewerProps: {},
+  maxPages: 2
+};
+var _default = exports.default = DocumentSideModal;

package/build/dev/oa-widget-document-modal/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Wrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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) } })); }
+const Wrapper = exports.Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.previewSec > div,.previewSec > div > div,.react-pdf__Document .ant-carousel,.slick-list,.slick-track,.slick-slide,.slick-slide > div,.slick-slide > div > div{\nheight: 100%;\n}\n.react-pdf__Document{\nheight: 100% !important;\noverflow: hidden !important;\nposition: relative;\n}\n.imgViewer .react-pdf__Page canvas{\n    height: 100% !important;\n    width: 100% !important;\n}\n.slick-slider{\n    height: 100%;\n}\n    display: flex;\n    flex-direction: column;\n    height: 100dvh;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1000;\n     background: rgba(0, 0, 0, 0.70);\n     @media screen and (-webkit-min-device-pixel-ratio: 0) {\n  @supports (-webkit-overflow-scrolling: touch) {\n    height: auto;\n}\n}\n@media only screen and (max-width: 600px) {\n  height: auto;\n}\n    \n    .react-pdf__Page{\n    display: flex !important;\n    justify-content: center;\n    \n    align-items: top;\n\n    }\n    .carouselFooter{\n        height: 88px !important;\n        width: 100%;\n        color: #fff;\n        position: fixed;\n        bottom: 72px;\n        display: flex;\n        align-items: center;\n        background: rgba(0, 0, 0, 0.70);\n        box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.14);\n        \n    }\n        .footerContainer{\n        max-width: 768px;\n        margin: 0 auto;\n        display: flex;\n        gap: 20px;\n        width: 100%;\n        }\n        .imgViewer{\n            position: relative;\n            width: 56px;\n            height: 56px;\n            border: 1px solid var(--color-primary-background);\n            border-radius: 8px;\n        }\n            // .imgViewer .react-pdf__Page canvas{\n            // position: absolute;\n            // top: 0;\n            // width: 100%;\n            // }\n            .imgViewer .react-pdf__Document{\n                position: absolute;\n                top: 0;\n                width: 100%;\n                border-radius: 8px;\n            }\n        .imgViewer svg{\n        position: absolute;\n        right: -9px;\n        color: #fff;\n        top: -9px;\n        z-index: 9;\n        background: var(--color-primary);\n        border-radius: 50%;\n        cursor: pointer;\n            font-weight: bolder;\n    padding: 2px;\n        }\n    .slick-prev,  .slick-next{\n    display: flex !important;\n    }\n        .ant-carousel .slick-prev::after,  .ant-carousel .slick-next::after {\n            display: none;\n        }\n    .ant-carousel .slick-next:hover,.slick-prev:hover{\n        color: #fff;\n        background: #212121;\n    }\n   .ant-carousel .slick-next::before ,.ant-carousel .slick-prev::before {display: none;}\n    .slick-slide > div > div{\n        display: flex !important;\n        flex-direction: column-reverse;\n        justify-content: center;\n        align-items: center;\n        padding: 0px 0 0;\n    }\n    .slick-disabled{\n        display: none !important;\n    }\n    // .react-transform-component{\n    // height: calc(100vh - 178px) !important;\n    // }\n  \n    .react-pdf__Page canvas{\n    width: max-content !important;\n    height: calc(100dvh - 72px - 48px) !important;\n    }\n    .react-transform-wrapper{\n            overflow-y: hidden !important;\n            padding: 0 !important;\n            height: 100% !important;\n    }\n        // .react-pdf__Page__textContent{\n        //     height: 80% !important;\n        //     width: auto !important;\n        // }\n  .deviceName{\n    height: 48px;\n    background: #212121;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n    .deviceName svg{\n        position: absolute;\n        right: 24px;\n        top: 16px;\n        color: #FFF;\n    }\n    .infoSec{\n        background: var(--color-background-warning);\n        height: 48px;\n        color:#212121;\n        align-items: center;\n        justify-content: center;\n        \n    }\n        .containerWidth{\n            max-width: 768px;\n            margin: 0 auto;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 8px 0 !important;\n        }\n            .containerWidth div{\n                display: flex;\n                align-items: center;\n                gap: 8px;\n            }\n        .previewSec{\n        flex: 1;\n        overflow: hidden;\n        }\n        .withFooter{\n        margin: 0 0 84px !important;\n        }\n        .customDocumentViewerOverlay{\n            display: flex;\n    flex-direction: column-reverse;\n    height: calc(100vh - 180px);\n    width: 100%;\n    align-items: anchor-center;\n        }\n    .pageNumber{\n    white-space: nowrap;\n    }\n    .customDocumentViewerOverlayHeader{\n            position: fixed !important;\n            bottom: 82px !important;\n    }\n .controlsWithFooter .customDocumentViewerOverlayHeader{\n    bottom: 170px !important;\n    }\n        .footerSec{\n        background: var(--color-primary-background);\n        height: 72px;\n        }\n        .footerSec .containerWidth{\n        height: 72px;\n        }\n        .footerSec .containerWidth div{\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 0;\n        }\n\n        @media only screen and (max-width: 600px) {\n        \n        .deviceName {\n            justify-content: start;\n            padding: 0 16px;\n}\n .footerSec{\n padding: 0 16px;\n }\n .carouselFooter{\n     display: flex;\n     height: 72px;\n    justify-content: flex-start;\n    align-items: center;\n}\n    .footerContainer{\n    padding: 0 16px;\n    width: 100%;\n    }\n    .infoSec{\n    padding: 0 16px;\n    }\n}\n"])));
+var _default = exports.default = Wrapper;