oa-componentbook 0.0.0-sit1.1

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;

package/build/dev/oa-widget-document-side-drawer/DocumentSideDrawer.js

@@ -0,0 +1,196 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+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 _CustomTabs = _interopRequireDefault(require("../../components/oa-component-tabs/CustomTabs"));
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * DocumentSideDrawer Component
+ * 
+ * A side drawer component that displays documents with optional metadata.
+ * Supports both single document (backward compatibility) and multiple documents (new feature).
+ * 
+ * @param {Object} props - Component props
+ * @param {string} props.title - Drawer title
+ * @param {Function} props.handleCloseDrawer - Function to close the drawer
+ * @param {Object|Array} props.documentConfig - Single document config or array of document configs
+ * @param {string} props.drawerWidth - Custom drawer width
+ * @param {Object} props.drawerButtonConfig - Button configuration for the drawer
+ * @param {Object} props.drawerTagConfig - Tag configuration (heading, tag, viewDetails)
+ * @param {boolean} props.onlyDocumentView - Whether to show only document viewer
+ * @param {React.ReactNode} props.children - Additional content to render
+ */
+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;
+
+  /**
+   * Determines if documentConfig contains multiple documents
+   * @returns {boolean} True if documentConfig is an array with multiple items
+   */
+  const isMultipleDocuments = Array.isArray(documentConfig) && documentConfig.length > 1;
+
+  /**
+   * Renders the document viewer(s) based on configuration
+   * @returns {React.ReactNode} Document viewer component(s)
+   */
+  const renderDocumentViewer = () => {
+    if (!documentConfig) return null;
+
+    // Handle multiple documents with tabs
+    if (isMultipleDocuments) {
+      return /*#__PURE__*/_react.default.createElement(_CustomTabs.default, {
+        data: {
+          tabs: documentConfig.map((doc, index) => ({
+            body: /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, doc, {
+              onlyDocumentView: onlyDocumentView
+            })),
+            key: String(index + 1),
+            label: doc.label || "Document ".concat(index + 1)
+          }))
+        },
+        "data-test": "tabs",
+        type: "card"
+      });
+    }
+
+    // Handle single document (backward compatibility)
+    const singleDocument = Array.isArray(documentConfig) ? documentConfig[0] : documentConfig;
+    return /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, _extends({}, singleDocument, {
+      onlyDocumentView: onlyDocumentView
+    }));
+  };
+
+  /**
+   * Renders the tooltip content for view details
+   * @param {Array} items - Array of detail items
+   * @param {string} title - Tooltip title
+   * @returns {React.ReactNode} Tooltip content
+   * 
+   */
+
+  const renderTooltipContent = (items, title) => {
+    const totalItems = (items === null || items === void 0 ? void 0 : items.length) || 0;
+    if (totalItems === 0) return null;
+    const numColumns = totalItems === 1 ? 1 : 2;
+    const col1Size = Math.ceil(totalItems / numColumns);
+    const col2Size = totalItems - col1Size;
+    const columns = [items.slice(0, col1Size),
+    // First column
+    items.slice(col1Size) // Second column
+    ];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-sl1-700",
+      color: "secondary-content"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      className: "tooltip-grid",
+      style: {
+        flexDirection: totalItems === 1 ? "column" : "row",
+        width: totalItems === 1 ? "100%" : "auto"
+      }
+    }, 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)))))));
+  };
+  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"
+  }, renderDocumentViewer(), !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-12 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-b2-400",
+    color: "primary-content"
+  }, 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,
+    placement: "bottomRight",
+    title: renderTooltipContent(drawerTagConfig.viewDetails.items, drawerTagConfig.viewDetails.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.oneOfType([_propTypes.default.object,
+  // Single document configuration
+  _propTypes.default.arrayOf(_propTypes.default.object) // Array of document configurations
+  ]),
+  drawerWidth: _propTypes.default.string,
+  drawerButtonConfig: _propTypes.default.object,
+  drawerTagConfig: _propTypes.default.object,
+  onlyDocumentView: _propTypes.default.bool
+};
+
+// 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.ant-tabs-nav{\n  margin: 0;\n}\n  .ant-tabs-top>.ant-tabs-nav::before {\n  border: none;\n      border-right: 1px solid #E0E0E0;\n  }\n  .ant-tabs-content-holder .customDocumentViewerOverlayHeader{\n        bottom: 60px;\n  }\n  .ant-tabs-tab{\n  border-radius: 0px !important;\n      border: none !important;\n       border-bottom: 2px solid transparent !important;\n  }\n    .ant-tabs-tab-active{\n    border-bottom: 2px solid var(--color-primary) !important;\n    }\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;

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

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

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

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

package/build/global-css/BorderRadius.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+/*
+? Keep this at the top level of the app using any of these components.
+* Do not add any children to it because this element does NOT render any of its children
+
+* Instead, follow a syntax similar to this:
+<>
+<BorderRadius />
+<App />
+</>
+*/
+
+const BorderRadius = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.border-radius-full {\n  border-radius: 9999px;\n}\n\n.border-radius-xlarge {\n  border-radius: 16px;\n}\n\n.border-radius-large {\n  border-radius: 12px;\n}\n\n.border-radius-medium {\n  border-radius: 8px;\n}\n\n.border-radius-small {\n  border-radius: 4px;\n}\n\n.border-radius-xsmall {\n  border-radius: 2px;\n}\n\n.border-radius-none {\n  border-radius: 0px;\n}\n"])));
+var _default = exports.default = BorderRadius;