oa-componentbook 1.0.1-stage.4 → 1.0.1-stage.400

package/build/dev/oa-component-document-viewer/CustomDocumentViewer.js

@@ -0,0 +1,367 @@
+"use strict";
+
+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.promise.js");
+require("core-js/modules/web.url.js");
+require("core-js/modules/web.url-search-params.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactPdf = require("react-pdf");
+var _icons = require("@material-ui/icons");
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _RotateRight = _interopRequireDefault(require("@material-ui/icons/RotateRight"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+var _antd = require("antd");
+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; }
+/* eslint-disable */
+
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.min.js");
+function CustomDocumentViewer(_ref) {
+  let {
+    fileType,
+    fileUrl,
+    onDownload,
+    hideZoom,
+    hideDownload,
+    hidePageNumber,
+    hideRotate,
+    documentViewerOverlayHeight,
+    oaImgCenterHeight,
+    docHeight,
+    onlyDocumentView,
+    setcarouselPageNumberHandler,
+    initialSlide,
+    // in case of carousel - we can specify the initialSlide for opening specific page
+    carouselPageNumber,
+    selectedPages,
+    deleteSelectedPage
+  } = _ref;
+  const [totalPages, setTotalPages] = (0, _react.useState)(null);
+  const [currentPage, setCurrentPage] = (0, _react.useState)(1); // For image rotation.
+  const [rotation, setRotation] = (0, _react.useState)(0);
+  const [transformUtils, setTransformUtils] = (0, _react.useState)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const pageRefs = (0, _react.useRef)([]);
+  const carouselRef = (0, _react.useRef)();
+  const transformUtilsRefs = (0, _react.useRef)([]); // holds utils per page
+
+  // When the document loads, update total pages (for PDFs).
+  const onDocumentLoadSuccess = _ref2 => {
+    let {
+      numPages
+    } = _ref2;
+    return setTotalPages(numPages);
+  };
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    // Early return if not in carousel mode or carousel ref isn't ready
+    if (fileType !== "pdfWithCarousel" || !carouselRef.current) return;
+
+    // Ensure totalPages is valid before arithmetic
+    if (!totalPages || typeof totalPages !== "number") return;
+
+    // Check for right arrow and ensure we're not on the last page
+    if (event.key === "ArrowRight" && carouselPageNumber < totalPages - 1) {
+      var _carouselRef$current;
+      (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.next();
+    }
+    // Check for left arrow and ensure we're not on the first page
+    else if (event.key === "ArrowLeft" && carouselPageNumber > 0) {
+      var _carouselRef$current2;
+      (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 || _carouselRef$current2.prev();
+    }
+  }, [fileType, carouselPageNumber, totalPages]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const handleRotate = (0, _react.useCallback)(() => setRotation(prev => prev + 90), []);
+  // Default download function; can be overridden by passing an onDownload prop.
+  const defaultDownload = (0, _react.useCallback)(() => {
+    if (fileType === "image") {
+      fetch(fileUrl, {
+        mode: "cors"
+      }).then(res => res.blob()).then(blob => {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileUrl.split("/").pop();
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }).catch(error => console.error("Image download failed:", error));
+    } else {
+      // For PDFs and other file types, use the standard download.
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      link.download = fileUrl.split("/").pop();
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [fileUrl, fileType]);
+  const handleDownload = onDownload || defaultDownload;
+  const customNextArrow = /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-slick-arrow custom-next"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _icons.KeyboardArrowRight,
+    size: 32
+  }));
+  const customPrevArrow = /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-slick-arrow custom-prev"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _icons.KeyboardArrowLeft,
+    size: 32
+  }));
+  const handleScroll = (0, _react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    let closestPage = 1;
+    let minDistance = Infinity;
+    pageRefs.current.forEach((ref, index) => {
+      if (ref) {
+        const rect = ref.getBoundingClientRect();
+        const distance = Math.abs(rect.top - containerRect.top);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestPage = index + 1;
+        }
+      }
+    });
+    setCurrentPage(closestPage);
+  }, []);
+  const Controls = (0, _react.useMemo)(() => {
+    return _ref3 => {
+      let {
+        zoomIn,
+        zoomOut,
+        resetTransform
+      } = _ref3;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "customDocumentViewerOverlayHeader"
+      }, !hideRotate && fileType === "image" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "pageNumber"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _RotateRight.default,
+        onClick: handleRotate,
+        style: {
+          cursor: "pointer"
+        }
+      })), !hidePageNumber && fileType === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "pageNumber"
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        className: "type-button-500",
+        color: "primary-background"
+      }, "Page ", currentPage, " of ", totalPages)), !hidePageNumber && fileType === "pdfWithCarousel" && /*#__PURE__*/_react.default.createElement("div", {
+        className: "pageNumber"
+      }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        className: "type-button-500",
+        color: "primary-background"
+      }, "Page ", carouselPageNumber + 1, " out of ", totalPages)), !hideZoom && /*#__PURE__*/_react.default.createElement("div", {
+        className: "customDocumentViewerOverlayHeaderIcons"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.RemoveRounded,
+        onClick: () => zoomOut()
+      }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.ZoomInRounded,
+        onClick: () => resetTransform()
+      }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.AddRounded,
+        onClick: () => zoomIn()
+      })), !hideDownload && /*#__PURE__*/_react.default.createElement("div", {
+        className: "downloadIcon"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: "primary-background",
+        size: 24,
+        icon: _icons.GetAppRounded,
+        onClick: handleDownload
+      })));
+    };
+  }, [fileType, hideZoom, hideDownload, hidePageNumber, hideRotate, currentPage, totalPages, handleRotate, handleDownload, carouselPageNumber, transformUtils]);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    documentViewerOverlayHeight: documentViewerOverlayHeight,
+    oaImgCenterHeight: oaImgCenterHeight
+  }, fileType === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "customDocumentViewerOverlay ".concat(docHeight, " ").concat(fileType === "pdf" ? "pdfHeaderStyle" : "", " ").concat(onlyDocumentView ? " onlyDocumentView" : ""),
+    onScroll: handleScroll,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    initialScale: 1,
+    initialPositionX: 200,
+    wheel: {
+      disabled: true
+    },
+    pinch: {
+      disabled: true
+    },
+    doubleClick: {
+      disabled: true
+    }
+  }, utils => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Controls, utils), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, {
+    wrapperStyle: {
+      overflowY: "auto"
+      // height: "calc(100vh - 112px)",
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, Array.from({
+    length: totalPages
+  }, (_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(index + 1),
+    ref: el => pageRefs.current[index] = el,
+    style: {
+      marginBottom: "20px",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: index + 1,
+    scale: 1.0
+  })))))))), fileType === "image" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    initialScale: 1
+    // wheel={{ disabled: true }}
+    ,
+    initialPositionX: 200,
+    initialPositionY: 100
+  }, utils => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Controls, utils), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, {
+    wrapperClass: "customDocumentViewerOverlay ".concat(onlyDocumentView ? " onlyDocumentView" : "")
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: fileUrl,
+    alt: "document",
+    style: {
+      maxWidth: "100%",
+      maxHeight: "50%",
+      transform: "rotate(".concat(rotation, "deg)"),
+      transformOrigin: "center center",
+      transition: "transform 0.3s ease-in-out"
+    }
+  }))))), fileType === "pdfWithCarousel" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.length) > 0 ? "controlsWithFooter" : ""
+  }, transformUtils && /*#__PURE__*/_react.default.createElement(Controls, transformUtils)), /*#__PURE__*/_react.default.createElement(_antd.Carousel, {
+    ref: carouselRef,
+    arrows: true,
+    infinite: false,
+    dots: false,
+    nextArrow: customNextArrow,
+    beforeChange: (current, next) => {
+      setcarouselPageNumberHandler(next);
+      const nextUtils = transformUtilsRefs.current[next];
+      if (nextUtils) setTransformUtils(nextUtils); // update Controls to work on new page
+      // setCarouselPageNumber(next + 1);
+    },
+    prevArrow: customPrevArrow,
+    initialSlide: initialSlide !== null && initialSlide !== void 0 ? initialSlide : 0
+  }, Array.from({
+    length: totalPages
+  }, (_, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(index + 1),
+    ref: el => pageRefs.current[index] = el
+  }, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, {
+    initialScale: 1,
+    initialPositionX: 200,
+    wheel: {
+      disabled: true
+    },
+    pinch: {
+      disabled: true
+    },
+    doubleClick: {
+      disabled: true
+    },
+    onInit: utils => {
+      transformUtilsRefs.current[index] = utils;
+      if (index === 0) {
+        setTransformUtils(utils); // default for initial slide
+      }
+    }
+  }, utils => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, {
+    wrapperStyle: {
+      overflowY: "auto",
+      display: "flex",
+      justifyContent: "center",
+      padding: "20px 0"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: index + 1,
+    scale: 1.0
+  })))))))), (selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.length) > 0 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "carouselFooter"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "footerContainer"
+  }, selectedPages === null || selectedPages === void 0 ? void 0 : selectedPages.map(pageNumber => /*#__PURE__*/_react.default.createElement("div", {
+    className: "imgViewer"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _Close.default,
+    size: 20,
+    onClick: () => deleteSelectedPage(pageNumber)
+  }), /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: fileUrl
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    key: "page_".concat(pageNumber + 1),
+    ref: el => pageRefs.current[pageNumber] = el,
+    style: {
+      marginBottom: "20px",
+      display: "flex",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: pageNumber + 1,
+    scale: 1.0
+  })))))))))));
+}
+CustomDocumentViewer.propTypes = {
+  fileType: _propTypes.default.string.isRequired,
+  fileUrl: _propTypes.default.string.isRequired,
+  onDownload: _propTypes.default.func,
+  hideZoom: _propTypes.default.bool,
+  hideDownload: _propTypes.default.bool,
+  hidePageNumber: _propTypes.default.bool,
+  hideRotate: _propTypes.default.bool,
+  documentViewerOverlayHeight: _propTypes.default.string,
+  docHeight: _propTypes.default.string,
+  oaImgCenterHeight: _propTypes.default.string,
+  onlyDocumentView: _propTypes.default.bool,
+  setcarouselPageNumberHandler: _propTypes.default.func,
+  initialSlide: _propTypes.default.number,
+  carouselPageNumber: _propTypes.default.number,
+  selectedPages: _propTypes.default.array
+};
+CustomDocumentViewer.defaultProps = {
+  onDownload: null,
+  hideZoom: false,
+  hideDownload: false,
+  hidePageNumber: false,
+  hideRotate: false,
+  documentViewerOverlayHeight: "100vh",
+  docHeight: "",
+  oaImgCenterHeight: "calc(-114px + 100vh)",
+  onlyDocumentView: false,
+  setcarouselPageNumberHandler: null,
+  initialSlide: 0,
+  carouselPageNumber: 0,
+  selectedPages: []
+};
+var _default = exports.default = CustomDocumentViewer;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 DocumentViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  .customDocumentViewerOverlay .react-transform-component {\n    background-color: var(--color-primary-content);\n    // height: ", ";\n    height: calc(100vh - 114px);\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .onlyDocumentView .react-transform-component {\n    height: calc(100vh - 114px + 61px);\n  }\n  .react-pdf__Document {\n    height: -webkit-fill-available;\n    overflow: auto;\n  }\n\n  .react-pdf__Page {\n    cursor: grab;\n    display: contents;\n  }\n    .react-pdf__Page canvas{\n      max-width: 100% !important;\n      height: -webkit-fill-available !important;\n    }\n  .viewerContainer > div {\n    position: rtelative;\n  }\n  .documentPdfHeight {\n    height: calc(100vh - 114px);\n  }\n  .pdfHeaderStyle .react-transform-component {\n    display: block;\n  }\n  .react-transform-component img {\n    cursor: grab;\n    pointer-events: auto;\n  }\n  .customDocumentViewerOverlayHeader {\n    position: absolute;\n    bottom: 16px;\n    left: 50%;\n    transform: translateX(-50%); /* Center horizontally */\n\n    padding: 0 16px;\n    height: 40px;\n    width: fit-content;\n    border-radius: 4px;\n    z-index: 99;\n    background: rgba(0, 0, 0, 0.7);\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n\n    padding: 0 16px;\n    height: 40px;\n    width: fit-content;\n    border-radius: 4px;\n    z-index: 99;\n    background: rgba(0, 0, 0, 0.7);\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .customDocumentViewerOverlayHeaderIcons {\n    display: flex;\n    padding: 8px 0;\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .downloadIcon {\n    border-left: solid 1px #fff;\n    padding-left: 16px;\n    margin-left: 16px;\n    height: 100%;\n    align-items: center;\n    display: flex;\n  }\n  .pageNumber {\n    border-right: solid 1px #fff;\n    padding-right: 16px;\n    margin-right: 16px;\n    height: 100%;\n    align-items: center;\n    display: flex;\n  }\n  .ant-radio-group {\n    display: flex;\n    white-space: nowrap;\n  }\n  .oaImgCenter {\n    // height: calc(-114px + 100vh);\n    height: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n  }\n  // slider css from here\n  .slick-prev,\n  .slick-next {\n    z-index: 100;\n    width: 36px;\n    height: 36px;\n    // display: flex !important;\n    align-items: center;\n    justify-content: center;\n    background: #212121;\n    border-radius: 50%;\n    color: #fff; \n        opacity: 1;\n  }\n\n  .slick-prev::before,\n  .slick-next::before {\n    font-size: 20px;\n    color: white;\n    opacity: 1;\n  }\n\n  .slick-prev {\n    left: 8px;\n  }\n  .slick-next {\n    right: 8px;\n  }\n"])), props => props.documentViewerOverlayHeight, props => props.oaImgCenterHeight);
+var _default = exports.default = DocumentViewerContainer;

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

@@ -196,6 +196,9 @@ function DocumentUpload(_ref) {
     rules: [{
       validator: (rule, value) => {
         if (isMandatory && !(value !== null && value !== void 0 && value.length)) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            return Promise.resolve();
+          }
           return Promise.reject(new Error('Please upload the document.'));
         }
         return Promise.resolve();

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;