oa-componentbook 1.0.1-stage.9 → 1.0.1-stage.90

package/build/components/oa-component-accordion/Accordion.js

@@ -45,6 +45,8 @@ CollapseIcon.propTypes = {
  * @param {string | number} [key] - Key to be used for the collapsible panel.
  * @param {string | number} [defaultActiveKey] - Key of the collapsible panel that should be active by default.
  * @param {boolean} [hasContentPadding=true] - Whether to apply content padding to the collapsible panel or not.
+ * @param {Function} [onChange=() => {}] - Function to be called when the panel is expanded or collapsed.
+ * @param {string | number} [activeKey] - Key of the collapsible panel that is currently active.
  */
 function Accordion(_ref2) {
   let {
@@ -57,7 +59,8 @@ function Accordion(_ref2) {
     defaultActiveKey,
     hasContentPadding,
     // New prop to determine whether to apply contentPadding
-    onChange
+    onChange,
+    activeKey
   } = _ref2;
   const themeConfig = {
     components: {
@@ -77,7 +80,7 @@ function Accordion(_ref2) {
   }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
     "data-test": dataTest ? "".concat(dataTest, "--complete") : undefined,
     collapsible: disabled ? 'disabled' : undefined,
-    key: key,
+    key: activeKey || key,
     header: /*#__PURE__*/_react.default.createElement("div", {
       "data-test": dataTest ? "".concat(dataTest, "--header") : undefined,
       className: "type-button-500"
@@ -96,7 +99,8 @@ Accordion.propTypes = {
   // New prop for controlling contentPadding
   key: _propTypes.default.string,
   defaultActiveKey: _propTypes.default.string,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  activeKey: _propTypes.default.string || _propTypes.default.number
 };
 Accordion.defaultProps = {
   body: '',
@@ -107,6 +111,7 @@ Accordion.defaultProps = {
   defaultActiveKey: '1',
   hasContentPadding: true,
   // Default value for contentPadding
-  onChange: () => {}
+  onChange: () => {},
+  activeKey: null
 };
 var _default = exports.default = Accordion;

package/build/components/oa-component-feedback-form/FeedbackForm.js

@@ -0,0 +1,75 @@
+"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");
+var _react = _interopRequireWildcard(require("react"));
+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; }
+/** ***********  ✨ Codeium Command ⭐  ************ */
+/**
+ * FeedbackForm component renders an iframe and a script tag.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.iframeSrc - The source URL for the iframe.
+ * @param {string} props.scriptSrc - The source URL for the script.
+ * @param {boolean} props.open - A boolean value to control the effect.
+ *
+ * The component uses a useEffect hook to send a postMessage to the iframe
+ * content window once the iframe has loaded, enabling specific settings.
+ * The iframe is styled to fill the entire viewport.
+ */
+
+/** ****  1da5e3d4-a27c-425d-956f-e856770f0f0d  ****** */
+function FeedbackForm(_ref) {
+  let {
+    iframeSrc,
+    scriptSrc,
+    open
+  } = _ref;
+  const [iframeKey, setIframeKey] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const iframe = document.getElementById('s2c_embed_90232');
+    if (iframe) {
+      iframe.onload = function () {
+        const ifrmContWin = iframe.contentWindow;
+        const sendPostMsg = 'hideHeader=false&hideFooter=false';
+        ifrmContWin.postMessage(sendPostMsg, '*');
+      };
+    }
+    setIframeKey(prevKey => prevKey + 1);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: 0,
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("iframe", {
+    key: iframeKey,
+    id: "s2c_embed_90232",
+    width: "100%",
+    frameBorder: "0" // Removed line gap
+    ,
+    src: iframeSrc,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    title: "Feedback Survey"
+  }), /*#__PURE__*/_react.default.createElement("script", {
+    type: "text/javascript",
+    src: scriptSrc
+  }));
+}
+FeedbackForm.propTypes = {
+  iframeSrc: _propTypes.default.string.isRequired,
+  scriptSrc: _propTypes.default.string.isRequired,
+  open: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = FeedbackForm;

package/build/components/oa-component-feedback-tooltip/FeedbackTooltip.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomTooltip = _interopRequireDefault(require("../oa-component-tooltip/CustomTooltip"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/** ***********  ✨ Codeium Command ⭐  ************ */
+/**
+ * FeedbackTooltip component displays a tooltip with a title, description, and buttons.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.hasClickedFeedback - Flag indicating if feedback button was clicked.
+ * @param {string} props.tooltipTitle - Title text for the tooltip.
+ * @param {string} props.tooltipDescription - Description text for the tooltip.
+ * @param {string} props.tooltipButtonLabel - Label for the tooltip button.
+ * @param {string} props.feedbackButtonLabel - Label for the feedback button.
+ * @param {Function} props.onButtonClick - Callback function for the tooltip button click.
+ * @param {Function} props.onFeedbackButtonClick - Callback function for the feedback button click.
+ * @param {boolean} props.tooltipOpen - Flag to control the visibility of the tooltip.
+ *
+ * @returns {ReactElement} The rendered FeedbackTooltip component.
+ */
+
+/** ****  8ccbdb54-5c16-4cae-9d57-f492fd44997c  ****** */
+
+function FeedbackTooltip(props) {
+  const {
+    hasClickedFeedback,
+    tooltipTitle,
+    tooltipDescription,
+    tooltipButtonLabel,
+    feedbackButtonLabel,
+    onButtonClick,
+    onFeedbackButtonClick,
+    tooltipOpen
+  } = props !== null && props !== void 0 ? props : {};
+  return /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    open: tooltipOpen && !hasClickedFeedback,
+    overlayClassName: "OaTooltip",
+    placement: "left",
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-t1-500",
+      color: "primary-content"
+    }, tooltipTitle), /*#__PURE__*/_react.default.createElement("div", {
+      className: "padding-top-4 padding-bottom-32"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "type-b2-400",
+      color: "secondary-content"
+    }, tooltipDescription)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "OaFooterBtn"
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      label: tooltipButtonLabel,
+      onClick: onButtonClick
+    })))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "whiteBg"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    className: "feedbackBtn",
+    onClick: onFeedbackButtonClick,
+    size: "large",
+    label: feedbackButtonLabel
+  })));
+}
+var _default = exports.default = FeedbackTooltip;

package/build/components/oa-component-modal/styles.js

@@ -10,4 +10,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 24px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  flex-direction: column;\n  margin: 0 0 16px;\n  padding: 0 42px 0 0;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));

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

@@ -0,0 +1,281 @@
+"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 _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 _system = require("@material-ui/system");
+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 = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const ZOOM_STEP = 0.2;
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 3.0;
+function CustomDocumentViewer(_ref) {
+  let {
+    fileType,
+    fileUrl,
+    onDownload,
+    hideZoom,
+    hideDownload,
+    hidePageNumber,
+    hideRotate,
+    documentViewerOverlayHeight,
+    docHeight
+  } = _ref;
+  const [totalPages, setTotalPages] = (0, _react.useState)(null);
+  const [scale, setScale] = (0, _react.useState)(1.0);
+  const [currentPage, setCurrentPage] = (0, _react.useState)(1);
+  // For image rotation.
+  const [rotation, setRotation] = (0, _react.useState)(0);
+  const containerRef = (0, _react.useRef)(null);
+  const pageRefs = (0, _react.useRef)([]);
+
+  // When the document loads, update total pages (for PDFs).
+  const onDocumentLoadSuccess = _ref2 => {
+    let {
+      numPages
+    } = _ref2;
+    setTotalPages(numPages);
+  };
+  // Zoom handlers.
+  const handleZoomIn = (0, _react.useCallback)(() => setScale(prev => Math.min(prev + ZOOM_STEP, MAX_ZOOM)), []);
+  const handleZoomOut = (0, _react.useCallback)(() => setScale(prev => Math.max(prev - ZOOM_STEP, MIN_ZOOM)), []);
+  const handleResetZoom = (0, _react.useCallback)(() => setScale(1.0), []);
+
+  // Single rotation handler for images – rotates 90° clockwise each click.
+  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 the image as a blob to force download.
+      fetch(fileUrl, {
+        mode: "cors"
+      }).then(res => res.blob()).then(blob => {
+        const url = window.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);
+        window.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;
+
+  // Enable dragging when zoomed in.
+  (0, _react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let isDragging = false;
+    let startX;
+    let startY;
+    let scrollLeft;
+    let scrollTop;
+    const onMouseDown = e => {
+      if (scale > 1.0) {
+        isDragging = true;
+        container.style.cursor = "grabbing";
+        startX = e.pageX;
+        startY = e.pageY;
+        scrollLeft = container.scrollLeft;
+        scrollTop = container.scrollTop;
+      }
+    };
+    const onMouseMove = e => {
+      if (!isDragging) return;
+      e.preventDefault();
+      const deltaX = e.pageX - startX;
+      const deltaY = e.pageY - startY;
+      container.scrollLeft = scrollLeft - deltaX;
+      container.scrollTop = scrollTop - deltaY;
+    };
+    const onMouseUp = function onMouseUp() {
+      isDragging = false;
+      container.style.cursor = scale > 1.0 ? "grab" : "auto";
+    };
+    container.addEventListener("mousedown", onMouseDown);
+    container.addEventListener("mousemove", onMouseMove);
+    container.addEventListener("mouseup", onMouseUp);
+    container.addEventListener("mouseleave", onMouseUp);
+    return () => {
+      container.removeEventListener("mousedown", onMouseDown);
+      container.removeEventListener("mousemove", onMouseMove);
+      container.removeEventListener("mouseup", onMouseUp);
+      container.removeEventListener("mouseleave", onMouseUp);
+    };
+  }, [scale]);
+
+  // (Optional) Scroll event to update the current page (for PDFs).
+  const handleScroll = () => {
+    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);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    documentViewerOverlayHeight: documentViewerOverlayHeight
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "customDocumentViewerOverlay ".concat(docHeight),
+    style: {
+      cursor: scale > 1.0 ? "grab" : "auto"
+    },
+    onScroll: handleScroll
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "customDocumentViewerOverlayHeader"
+  }, fileType === "pdf" && !hidePageNumber ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pageNumber"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-button-500",
+    color: "primary-background"
+  }, "Page ", currentPage, " of ", totalPages)) : fileType === "image" && !hideRotate ? /*#__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"
+    }
+  })) : null, !hideZoom && /*#__PURE__*/_react.default.createElement("div", {
+    className: "customDocumentViewerOverlayHeaderIcons"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.RemoveRounded,
+    onClick: handleZoomOut,
+    style: {
+      cursor: scale === MIN_ZOOM ? "not-allowed" : "pointer"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.ZoomInRounded,
+    onClick: handleResetZoom,
+    style: {
+      cursor: scale === 1.0 ? "not-allowed" : "pointer"
+    }
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary-background",
+    size: 24,
+    icon: _icons.AddRounded,
+    onClick: handleZoomIn,
+    style: {
+      cursor: scale === MAX_ZOOM ? "not-allowed" : "pointer"
+    }
+  })), !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 === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      transform: "scale(".concat(scale, ")"),
+      transformOrigin: "top center"
+    }
+  }, /*#__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", {
+    className: "oaImgCenter",
+    style: {
+      transform: "scale(".concat(scale, ") rotate(").concat(rotation, "deg)"),
+      transformOrigin: scale > 1.4 ? "left top" : "center center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: fileUrl,
+    alt: "document",
+    style: {
+      transition: "transform 0.3s ease-in-out",
+      maxWidth: "100%",
+      maxHeight: "80vh"
+    }
+  })))));
+}
+CustomDocumentViewer.propTypes = {
+  fileType: _propTypes.default.string.isRequired,
+  // "pdf" or "image"
+  fileUrl: _propTypes.default.string.isRequired,
+  onDownload: _propTypes.default.func,
+  // Optional custom download function
+  hideZoom: _propTypes.default.bool,
+  // If true, hide zoom controls (for PDFs)
+  hideDownload: _propTypes.default.bool,
+  // If true, hide download button
+  hidePageNumber: _propTypes.default.bool,
+  // If true, hide page number display (for PDFs)
+  hideRotate: _propTypes.default.bool,
+  // If true, hide rotate control (for images)
+  documentViewerOverlayHeight: _propTypes.default.string,
+  docHeight: _propTypes.default.string
+};
+CustomDocumentViewer.defaultProps = {
+  onDownload: null,
+  hideZoom: false,
+  hideDownload: false,
+  hidePageNumber: false,
+  hideRotate: false,
+  documentViewerOverlayHeight: "100vh",
+  docHeight: ""
+};
+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  .customDocumentViewerOverlay {\n    background-color: var(--color-primary-content);\n    height: ", ";\n    display: flex;\n    justify-content: flex-start;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    flex-direction: column;\n    overflow: auto;\n    align-items: center; position: relative;\n  }\n\n  .documentPdfHeight{height:calc(100vh - 114px);}\n\n  .customDocumentViewerOverlayHeader {\n    position: fixed;\n    padding: 0 16px;\n    bottom: 74px;\n    left: auto;\n    right: auto;\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    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 40px;\n    top:auto;\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        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n    }\n"])), props => props.documentViewerOverlayHeight);
+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-side-drawer/DocumentSideDrawer.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("react-pdf/dist/esm/Page/AnnotationLayer.css");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _CustomDocumentViewer = _interopRequireDefault(require("../oa-component-document-viewer/CustomDocumentViewer"));
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _styles = _interopRequireDefault(require("./styles"));
+const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig", "onlyDocumentView"];
+/* eslint-disable */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+function DocumentSideDrawer(_ref) {
+  var _drawerTagConfig$view;
+  let {
+      title,
+      handleCloseDrawer,
+      documentConfig,
+      drawerWidth,
+      drawerButtonConfig,
+      drawerTagConfig,
+      onlyDocumentView
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Calculate the drawer width based on documentConfig or fallback to 480
+  const calculatedWidth = drawerWidth !== null && drawerWidth !== void 0 ? drawerWidth : documentConfig ? 1200 : 480;
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    buttonConfig: drawerButtonConfig,
+    "data-test": "document-side-drawer",
+    className: "documentDrawer",
+    width: calculatedWidth,
+    onClose: handleCloseDrawer,
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "viewerContainer"
+  }, documentConfig && /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, documentConfig), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
+    className: "rightContSection"
+  }, drawerTagConfig && /*#__PURE__*/_react.default.createElement("div", {
+    className: "grayBoxSec"
+  }, drawerTagConfig.heading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t2-700",
+    color: "primary-content"
+  }, drawerTagConfig.heading), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-16 statusSec"
+  }, drawerTagConfig.tag && (
+  // Conditionally render CustomTag or Typography based on tag type
+  drawerTagConfig.tag.type ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+    label: drawerTagConfig.tag.label,
+    type: drawerTagConfig.tag.type
+  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-button-500"
+  }, drawerTagConfig.tag.label)), ((_drawerTagConfig$view = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view === void 0 || (_drawerTagConfig$view = _drawerTagConfig$view.items) === null || _drawerTagConfig$view === void 0 ? void 0 : _drawerTagConfig$view.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    overlayClassName: "multipleDocumentTooltip",
+    isDisplayed: true,
+    title: ((_drawerTagConfig$view2, _drawerTagConfig$view3, _drawerTagConfig$view4, _drawerTagConfig$view5) => {
+      const totalItems = (_drawerTagConfig$view2 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view2 === void 0 ? void 0 : _drawerTagConfig$view2.items.length;
+      const numColumns = totalItems === 1 ? 1 : 2; // 1 column if only 1 item, else 2 columns
+
+      const col1Size = Math.ceil(totalItems / numColumns); // First column gets extra if odd
+      const col2Size = totalItems - col1Size; // Remaining items go to second column
+
+      const columns = [(_drawerTagConfig$view3 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view3 === void 0 ? void 0 : _drawerTagConfig$view3.items.slice(0, col1Size), // First column
+      (_drawerTagConfig$view4 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view4 === void 0 ? void 0 : _drawerTagConfig$view4.items.slice(col1Size) // Second column
+      ];
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_drawerTagConfig$view5 = drawerTagConfig.viewDetails) === null || _drawerTagConfig$view5 === void 0 ? void 0 : _drawerTagConfig$view5.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        typography: "type-sl1-700",
+        color: "secondary-content"
+      }, drawerTagConfig.viewDetails.title), /*#__PURE__*/_react.default.createElement("div", {
+        className: "tooltip-grid",
+        style: {
+          flexDirection: totalItems === 1 ? "column" : "row",
+          // Single column if only 1 item
+          width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
+        }
+      }, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
+        key: "col-".concat(colIndex),
+        className: "tooltip-column"
+      }, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
+        key: item.title,
+        className: "tooltip-item"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        size: 20,
+        icon: item.type === "positive" ? _Check.default : _Close.default,
+        color: item.type === "positive" ? "positive" : "negative"
+      }), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
+    })()
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    label: drawerTagConfig.viewDetails.label
+  })))), props.children))));
+}
+
+// Define the prop types to enforce correct data types for the props
+DocumentSideDrawer.propTypes = {
+  title: _propTypes.default.string,
+  handleCloseDrawer: _propTypes.default.func,
+  documentConfig: _propTypes.default.object,
+  // Pass the document configuration as an object
+  drawerWidth: _propTypes.default.string,
+  // Optional custom drawer width
+  drawerButtonConfig: _propTypes.default.object,
+  // Button configuration for the drawer
+  drawerTagConfig: _propTypes.default.object,
+  // Tag configuration (heading, tag, viewDetails)
+  onlyDocumentView: _propTypes.default.bool // Optional prop to render only document viewer
+};
+
+// Default props to provide fallback values for optional props
+DocumentSideDrawer.defaultProps = {
+  title: "",
+  handleCloseDrawer: () => {},
+  documentConfig: null,
+  drawerWidth: null,
+  drawerButtonConfig: null,
+  drawerTagConfig: null,
+  onlyDocumentView: false
+};
+var _default = exports.default = DocumentSideDrawer;

package/build/dev/oa-widget-document-side-drawer/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 ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .viewerContainer > div {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  .viewerContainer {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n  .rightContSection {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n  }\n  .grayBoxSec {\n    border-radius: 8px;\n    background: #f6f6f6;\n    padding: 12px 16px;\n  }\n  .statusSec {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  .statusSec button {\n    margin-left: 8px;\n  }\n"])));
+var _default = exports.default = ViewerContainer;