oa-componentbook 1.0.1-stage.51 → 1.0.1-stage.52

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

@@ -0,0 +1,275 @@
+"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"));
+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; }
+_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
+  } = _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;
+    return 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)(function () {
+    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();
+      container.scrollLeft = scrollLeft - (e.pageX - startX);
+      container.scrollTop = scrollTop - (e.pageY - startY);
+    };
+    const 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", {
+    className: "myChotaModal"
+  }, /*#__PURE__*/_react.default.createElement(_styles.default, {
+    documentViewerOverlayHeight: documentViewerOverlayHeight
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "customDocumentViewerOverlay",
+    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", {
+    style: {
+      transform: "scale(".concat(scale, ") rotate(").concat(rotation, "deg)"),
+      transformOrigin: "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
+};
+CustomDocumentViewer.defaultProps = {
+  onDownload: null,
+  hideZoom: false,
+  hideDownload: false,
+  hidePageNumber: false,
+  hideRotate: false,
+  documentViewerOverlayHeight: "100vh"
+};
+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: scroll;\n    align-items: center;\n  }\n\n  .customDocumentViewerOverlayHeader {\n    position: absolute;\n    padding: 0 16px;\n    bottom: 12px;\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  }\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"])), props => props.documentViewerOverlayHeight);
+var _default = exports.default = DocumentViewerContainer;

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

@@ -0,0 +1,86 @@
+"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 _styles = _interopRequireDefault(require("./styles"));
+const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig"];
+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) {
+  let {
+      title,
+      handleCloseDrawer,
+      documentConfig,
+      drawerWidth,
+      drawerButtonConfig,
+      drawerTagConfig
+    } = _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",
+    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), /*#__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.viewDetails && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    label: drawerTagConfig.viewDetails.label,
+    onClick: function noRefCheck() {},
+    type: "text-only"
+  }))), 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)
+};
+
+// Default props to provide fallback values for optional props
+DocumentSideDrawer.defaultProps = {
+  title: "",
+  handleCloseDrawer: () => {},
+  documentConfig: null,
+  drawerWidth: null,
+  drawerButtonConfig: null,
+  drawerTagConfig: null
+};
+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;

package/build/global-css/commonStyles.js

@@ -7,5 +7,5 @@ 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) } })); }
-const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n      margin-bottom: 0 !important;\n  }\n  .ant-notification .ant-notification-notice-wrapper{\n    background: transparent;\n  }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n    position: inherit !important;\n    width: 24px  !important;\n    height: 24px  !important;\n  }\n    .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n  padding-inline-end: 0px !important;\n}\n    .ant-notification-notice-close > button{\n    width: 24px  !important;\n    height: 24px !important;\n    }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    justify-content: space-between;\n  }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n    vertical-align: middle;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item {  \n  min-height: auto;\n  padding: 12px 16px;\n  color: var(--color-primary-content) ;\n  line-height: 20px;\n  border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n  position: relative;\n  width: 100%;\n  max-height: 300px;\n  overflow-x: auto;\n}\n.overLayImg{\n  background: rgb(0 0 0 / 40%);\n  border-radius: 12px 12px 0px 0px;\n  overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n  padding: 24px 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: 348px;\n  border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n  background: #fff !important;\n}\n.OaFooterBtn{\n  display: flex;\n  justify-content: end;\n}\n.OaTooltip{\n  max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n  padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n  width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n  font-size: 14px !important;\n}\n.gappingIcons{\n  display: flex;\n  gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n  height: 350px;\n    overflow-y: auto;\n    margin: 30px 0px 0px;\n    padding: 0px 8px 0 0;;\n    \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n  width: 8px;\n  height: 100px;\n  border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n  background: #f6f6f6; \n  border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n  background: #888; \n  border-radius: 8px;\n  height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\n   .modalImg{\n        width: 100%;\n    }\n.overflowScroll{\n  position: relative;\n}\n.ascCollapse .ant-collapse-header{\n  border-radius: 4px !important;\n  background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n  overflow: hidden;\n}\n.ascCollapse .totalVal{\n  display: flex;\n  gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n  display: none\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n  @media only screen and (max-width: 574px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 78px !important;\n        \n    }\n}\n     @media only screen and (max-width: 480px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 60px !important;\n        \n    }\n}\n@media only screen and (max-width: 600px) {\n    \n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n      .ant-picker-dropdown { width: 100%; left: 0 !important; }\n  .mobilesIcons li.ant-dropdown-menu-item > svg {\n    display: block;\n}\n.imageZoom .ant-modal-body>div{\n  height: auto;\n  overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n  padding-right: 16px !important;\n}\n  .fadeImg{\n    max-height: auto;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n"])));
+const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n  min-height: auto !important;\n }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n      margin-bottom: 0 !important;\n  }\n  .ant-notification .ant-notification-notice-wrapper{\n    background: transparent;\n  }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n    position: inherit !important;\n    width: 24px  !important;\n    height: 24px  !important;\n  }\n    .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n  padding-inline-end: 0px !important;\n}\n    .ant-notification-notice-close > button{\n    width: 24px  !important;\n    height: 24px !important;\n    }\n  .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    justify-content: space-between;\n  }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n    padding: 16px !important;\n  }\n  .ant-drawer .ant-drawer-footer {\n    padding: 12px 16px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n    vertical-align: middle;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n  padding-right: 16px;\n }\n .ant-modal-footer{\n  padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n  padding: 24px 16px 32px;\n  padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n  background: var(--color-primary-background) ;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item {  \n  min-height: auto;\n  padding: 12px 16px;\n  color: var(--color-primary-content) ;\n  line-height: 20px;\n  border-radius: 0px;\n}\n\n.label-date-dropdown {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n  position: relative;\n  width: 100%;\n  max-height: 300px;\n  overflow-x: auto;\n}\n.overLayImg{\n  background: rgb(0 0 0 / 40%);\n  border-radius: 12px 12px 0px 0px;\n  overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n  padding: 24px 16px;\n  background: #fff;\n  color: #212121;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  width: 348px;\n  border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n  background: #fff !important;\n}\n.OaFooterBtn{\n  display: flex;\n  justify-content: end;\n}\n.OaTooltip{\n  max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n  padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n  width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n  transform: rotate(90deg);\n  color: var(--color-primary) !important;\n  font-size: 14px !important;\n}\n.gappingIcons{\n  display: flex;\n  gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n  height: 350px;\n    overflow-y: auto;\n    margin: 30px 0px 0px;\n    padding: 0px 8px 0 0;;\n    \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n  width: 8px;\n  height: 100px;\n  border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n  background: #f6f6f6; \n  border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n  background: #888; \n  border-radius: 8px;\n  height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n  background: #555; \n}\n   .modalImg{\n        width: 100%;\n    }\n.overflowScroll{\n  position: relative;\n}\n.ascCollapse .ant-collapse-header{\n  border-radius: 4px !important;\n  background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n  overflow: hidden;\n}\n.ascCollapse .totalVal{\n  display: flex;\n  gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n  display: none\n}\n  .ant-notification-notice-close svg{\n  font-size: 24px !important;\n  height: auto;\n  }\n  @media only screen and (max-width: 574px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 78px !important;\n        \n    }\n}\n     @media only screen and (max-width: 480px) {\n         .ant-steps-item-tail{\n        inset-inline-start: 60px !important;\n        \n    }\n}\n@media only screen and (max-width: 600px) {\n    \n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n      .ant-picker-dropdown { width: 100%; left: 0 !important; }\n  .mobilesIcons li.ant-dropdown-menu-item > svg {\n    display: block;\n}\n.imageZoom .ant-modal-body>div{\n  height: auto;\n  overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n  padding-right: 16px !important;\n}\n  .fadeImg{\n    max-height: auto;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n      width: 24px;     font-size: 12px; font-weight: bold; }\n\n  .ant-picker-dropdown .ant-picker-content th {\n      height: 24px;\n  }\n  .ant-picker-dropdown .ant-picker-content td {\n      font-size: 12px;\n  }\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n      width: 100%;\n  }\n\n}\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n  .multipleDocumentTooltip ul{\n      margin: 0;\n    padding: 0;\n    list-style: none\n    }\n     .multipleDocumentTooltip ul li{\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      color: #212121;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px; \n      width: 47%;\n      padding: 8px 0;\n      }\n     .multipleDocumentTooltip ul .headingName{\n      color: #717171;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 700;\n      line-height: 16px; \n      letter-spacing: 0.24px;\n      text-transform: uppercase;\n      padding: 0 0 16px;\n     }\n      .multipleDocumentTooltip .flexWrap{\n          display: flex;\n          flex-wrap: wrap;\n          column-count: 1;\n          column-gap: 8px;\n          list-style: none;\n          justify-content: space-between;\n      }\n"])));
 var _default = exports.default = CommonStyles;

package/build/index.js

@@ -35,6 +35,12 @@ Object.defineProperty(exports, "ApprovalWidget", {
     return _ApprovalWidget.default;
   }
 });
+Object.defineProperty(exports, "ApprovalWidgetNew", {
+  enumerable: true,
+  get: function get() {
+    return _ApprovalWidgetNew.default;
+  }
+});
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
   get: function get() {
@@ -311,6 +317,12 @@ Object.defineProperty(exports, "DocUploadWidget", {
     return _DocUploadWidget.default;
   }
 });
+Object.defineProperty(exports, "DocumentSideDrawer", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentSideDrawer.default;
+  }
+});
 Object.defineProperty(exports, "DropdownSearchInput", {
   enumerable: true,
   get: function get() {
@@ -335,6 +347,12 @@ Object.defineProperty(exports, "FeedbackWidget", {
     return _FeedbackWidget.default;
   }
 });
+Object.defineProperty(exports, "GenericUpload", {
+  enumerable: true,
+  get: function get() {
+    return _ReUploadDrawer.default;
+  }
+});
 Object.defineProperty(exports, "GlobalCss", {
   enumerable: true,
   get: function get() {
@@ -545,6 +563,12 @@ Object.defineProperty(exports, "colorOptions", {
     return _colorOptions.colorOptions;
   }
 });
+Object.defineProperty(exports, "customForm", {
+  enumerable: true,
+  get: function get() {
+    return _antd.Form;
+  }
+});
 Object.defineProperty(exports, "getCheckboxTheme", {
   enumerable: true,
   get: function get() {
@@ -563,6 +587,8 @@ Object.defineProperty(exports, "typographyOptions", {
     return _typographyOptions.typographyOptions;
   }
 });
+var _antd = require("antd");
+var _ReUploadDrawer = _interopRequireDefault(require("./widgets/oa-widget-reupload-drawer/ReUploadDrawer"));
 var _Accordion = _interopRequireDefault(require("./components/oa-component-accordion/Accordion"));
 var _CustomDetails = _interopRequireDefault(require("./widgets/oa-widget-custom-details/CustomDetails"));
 var _DocUploadWidget = _interopRequireDefault(require("./widgets/oa-widget-document-upload/DocUploadWidget"));
@@ -616,6 +642,7 @@ var _AddressWidget = _interopRequireDefault(require("./widgets/oa-widget-address
 var _AddSparePartWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartWidget"));
 var _AddSparePartCollapseWidget = _interopRequireDefault(require("./widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget"));
 var _ApprovalWidget = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidget"));
+var _ApprovalWidgetNew = _interopRequireDefault(require("./widgets/oa-widget-approval/ApprovalWidgetNew"));
 var _CloseClaimWidget = _interopRequireDefault(require("./widgets/oa-widget-close-claim/CloseClaimWidget"));
 var _KeyValueWidget = _interopRequireDefault(require("./widgets/oa-widget-key-value/KeyValueWidget"));
 var _NotesWidget = _interopRequireDefault(require("./widgets/oa-widget-notes/NotesWidget"));
@@ -652,6 +679,7 @@ var _MapBaseLocation = _interopRequireDefault(require("./widgets/oa-widget-map-b
 var _CustomTimeline2 = _interopRequireDefault(require("./dev/oa-component-timeline/CustomTimeline"));
 var _DocUploadCardWidget2 = _interopRequireDefault(require("./dev/oa-widget-document-upload-card/DocUploadCardWidget"));
 var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/CustomUpload"));
+var _DocumentSideDrawer = _interopRequireDefault(require("./dev/oa-widget-document-side-drawer/DocumentSideDrawer"));
 var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
 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; }

package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js

@@ -0,0 +1,257 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _UploadDownloadWidget = _interopRequireDefault(require("../oa-widget-upload-download/UploadDownloadWidget"));
+var _styles = require("./styles");
+var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
+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 _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+const _excluded = ["children", "description", "docDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "actionRenderType", "actionContent", "systemStatus", "documentTitle", "descriptionTitle", "data-test"];
+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); }
+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; }
+/**
+ * @typedef {import('../../components/oa-component-upload/CustomUpload').DocumentDetails} DocumentDetails
+ *
+ * @typedef {Object} ApprovalForm
+ * @property {boolean} [disabled=false] Whether the approval form is disabled.
+ * @property {boolean} [hidden=false] Whether the approval form is hidden.
+ * @property {boolean} [invisible=false] Whether the approval form is invisible (preserving layout).
+ * @property {boolean} [isApproved] Initial value for the approval status.
+ * @property {string} [remarks] Initial value for the remarks.
+ *
+ * @typedef {Object} Props
+ * @property {React.ReactNode} [children] Content to be rendered inside the ApprovalWidget.
+ * @property {string} [description] Description for the widget.
+ * @property {DocumentDetails} [docDetails] Document details for the widget.
+ * @property {ApprovalForm} [approvalForm] Form data for approval.
+ * @property {boolean} [isMandatory=false] Whether the widget is mandatory.
+ * @property {boolean} [hasDivider=false] Display a divider line beneath the widget.
+ * @property {boolean} [isQuestionStyleWidget=false] Whether the widget has a question-style layout.
+ * @property {string|number} questionId Identifier for the question.
+ * @property {string} title Title of the widget.
+ * @property {Function} [viewOnClick] Callback function for the view action.
+ * @property {string} ['data-test'] Data test string to be applied to the outermost element.
+ */
+function ApprovalWidget(_ref) {
+  var _approvalForm$disable, _actionContent$label, _approvalForm$disable2, _approvalForm$disable3, _approvalForm$remarks, _approvalForm$disable4;
+  let {
+      children,
+      description,
+      docDetails,
+      approvalForm,
+      isMandatory,
+      hasDivider,
+      isQuestionStyleWidget,
+      questionId,
+      title,
+      viewOnClick,
+      actionRenderType,
+      actionContent,
+      systemStatus,
+      documentTitle,
+      descriptionTitle,
+      'data-test': dataTest
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const getInitialValue = isApproved => {
+    switch (isApproved) {
+      case true:
+        return 1;
+      case false:
+        return 0;
+      default:
+        return undefined;
+    }
+  };
+  const [isApproved, setIsApproved] = (0, _react.useState)(getInitialValue(approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.isApproved));
+  const onRadioChange = event => setIsApproved(event.target.value);
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: approvalForm.hidden ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-7 col-lg-7 gutter'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: isQuestionStyleWidget ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-9 col-lg-9 gutter flexCol12'
+  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "type-b2-400"
+  }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement(_styles.Styledescription, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, descriptionTitle), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, description)), !isQuestionStyleWidget && /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaCustomerResponse"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, documentTitle, ' ', "\xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
+    disabled: (_approvalForm$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
+    "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
+  }, docDetails, {
+    formName: isMandatory ? "file-".concat(questionId) : undefined
+  }))), viewOnClick && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    className: "view-button",
+    "data-test": dataTest ? "".concat(dataTest, "--view-button") : undefined,
+    onClick: () => viewOnClick(questionId),
+    type: "text-only",
+    label: isQuestionStyleWidget ? 'View Previous Description' : 'View History'
+  }), children)), !isQuestionStyleWidget && /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-3 col-lg-3 flexCol8"
+  }, systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.map(status => /*#__PURE__*/_react.default.createElement("div", null, status.renderType === 'text' && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, status.label), status.renderType === 'tag' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, status)), status.renderType === 'toolTip' && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    overlayClassName: "multipleDocumentTooltip",
+    isDisplayed: true,
+    title: /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "headingName"
+    }, "Model response"), /*#__PURE__*/_react.default.createElement("div", {
+      className: "flexWrap"
+    }, [...Array(5)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
+      key: "".concat(index + 5, "_close")
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      size: 20,
+      icon: _Close.default,
+      color: "negative"
+    }), ' ', status.title)), [...Array(2)].map((_, index) => /*#__PURE__*/_react.default.createElement("li", {
+      key: "".concat(index + 5, "_positive")
+    }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      size: 20,
+      icon: _Check.default,
+      color: "positive"
+    }), ' ', status.title))))
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "text-only",
+    label: status.label
+  }))))))), approvalForm.invisible && /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-5 col-lg-5"
+  }) || !approvalForm.hidden && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actionRenderType === 'text' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaActionText"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CheckCircle.default,
+    color: "secondary-content"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : '-')), actionRenderType === 'button' && /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent), actionRenderType === 'radio' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-sm-12 col-md-5 col-lg-5"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "isApproved-".concat(questionId),
+    className: "custom-radio-group",
+    initialValue: isApproved,
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--is-approved-validation-message")
+      }, "Approval status needs to be selected.") : 'Approval status needs to be selected.'
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
+    onChange: onRadioChange,
+    value: isApproved
+  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
+    disabled: (_approvalForm$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
+    label: "Mark as Approved",
+    value: 1
+  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+    "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
+    disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false,
+    label: "Mark as Pending",
+    value: 0
+  }))), isApproved === 0 && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "type-b2-400"
+  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "remarks-".concat(questionId),
+    initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : '',
+    rules: [{
+      required: true,
+      message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
+        "data-test": "".concat(dataTest, "--remarks-validation-message")
+      }, "Remarks cannot be empty.") : 'Remarks cannot be empty.'
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
+    "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
+    disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false
+  }))))) || undefined), hasDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
+}
+ApprovalWidget.propTypes = {
+  children: _propTypes.default.node,
+  'data-test': _propTypes.default.string,
+  description: _propTypes.default.string,
+  // Leave description optional
+  docDetails: _propTypes.default.shape({
+    multiple: _propTypes.default.bool,
+    onUpload: _propTypes.default.func,
+    uploadedDocuments: _propTypes.default.arrayOf(_propTypes.default.shape({
+      name: _propTypes.default.string,
+      onDelete: _propTypes.default.func,
+      onDownload: _propTypes.default.func
+    }))
+  }),
+  hasDivider: _propTypes.default.bool,
+  // Leave hasDivider optional,
+  approvalForm: _propTypes.default.shape({
+    disabled: _propTypes.default.bool,
+    hidden: _propTypes.default.bool,
+    invisible: _propTypes.default.bool,
+    isApproved: _propTypes.default.bool,
+    remarks: _propTypes.default.string
+  }),
+  isMandatory: _propTypes.default.bool,
+  isQuestionStyleWidget: _propTypes.default.bool,
+  questionId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  title: _propTypes.default.string.isRequired,
+  // Make title required
+  viewOnClick: _propTypes.default.func,
+  actionRenderType: _propTypes.default.string,
+  actionContent: _propTypes.default.shape({
+    label: _propTypes.default.string
+  }),
+  systemStatus: _propTypes.default.arrayOf(_propTypes.default.shape({
+    renderType: _propTypes.default.string,
+    label: _propTypes.default.string,
+    title: _propTypes.default.string
+  })),
+  documentTitle: _propTypes.default.string,
+  descriptionTitle: _propTypes.default.string
+};
+ApprovalWidget.defaultProps = {
+  children: null,
+  'data-test': undefined,
+  description: '',
+  docDetails: {},
+  approvalForm: {},
+  isMandatory: false,
+  hasDivider: false,
+  isQuestionStyleWidget: false,
+  viewOnClick: undefined,
+  actionRenderType: undefined,
+  actionContent: {},
+  systemStatus: [],
+  documentTitle: '',
+  descriptionTitle: ''
+};
+var _default = exports.default = ApprovalWidget;

package/build/widgets/oa-widget-approval/styles.js

@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const Styledescription = exports.Styledescription = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 0 8px;\n"])));
-const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 0 16px;\nlabel.ant-radio-wrapper:first-child{\n  margin-inline-end: 16px;\n}\n.paddind-bottom-4{\n  padding: 0 0 4px;\n}\n  .container {\n    margin-bottom: 16px;\n  }\n\n  h4{\n    padding: 0 0 4px;\n  }\n.view-button {\n  justify-content: start;\n}\n  .ant-form-item.custom-radio-group {\n    margin-bottom: 12px;\n  }\n\n  .ant-divider-horizontal {\n    margin: 16px 0px 0px;\n  }\n\n  .ant-form-item .ant-form-item-control-input {\n    min-height: auto;\n  }\n\n  .ant-radio-group-outline {\n    display: flex;\n    justify-content: start;\n  }\n\n  textarea {\n    padding: 16px; \n    min-height: 88px;\n    resize: none;\n    border-radius: 4px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n\n  h5 {\n    margin: 0 0 4px;\n    color: var(--color-primary-content);\n  }\n\n  radiofield label {\n    white-space: nowrap;\n  }\n\n  docdetailstag a {\n    white-space: nowrap;\n  }\n  \n"])));
+const Styledescription = exports.Styledescription = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // padding: 0 0 8px;\n"])));
+const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 0 16px;\n  label.ant-radio-wrapper:first-child {\n    margin-inline-end: 16px;\n  }\n  .ant-radio-wrapper {\n    white-space: nowrap;\n  }\n  .paddind-bottom-4 {\n    padding: 0 0 4px;\n  }\n  .container {\n    margin-bottom: 16px;\n  }\n\n  .view-button {\n    justify-content: start;\n  }\n  .ant-form-item.custom-radio-group {\n    margin-bottom: 12px;\n  }\n\n  .ant-divider-horizontal {\n    margin: 16px 0px 0px;\n  }\n\n  .ant-form-item .ant-form-item-control-input {\n    min-height: auto;\n  }\n\n  .ant-radio-group-outline {\n    display: flex;\n    justify-content: start;\n  }\n\n  textarea {\n    padding: 16px;\n    min-height: 88px;\n    resize: none;\n    border-radius: 4px;\n    border: 1px solid var(--color-placeholder-text);\n  }\n\n  h5 {\n    margin: 0 0 4px;\n    color: var(--color-primary-content);\n  }\n\n  radiofield label {\n    white-space: nowrap;\n  }\n\n  docdetailstag a {\n    white-space: nowrap;\n  }\n  .oaCustomerResponse {\n    display: flex;\n    align-items: center;\n  }\n  .oaCustomerResponse section {\n    padding: 0;\n  }\n  .oaActionText {\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    height: fit-content;\n  }\n  .flexCol8 {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .flexCol12 {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n"])));
 const RedText = exports.RedText = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: red;\n  margin-left: 4px;\n"])));

package/build/widgets/oa-widget-reupload-drawer/ReUploadDrawer.js

@@ -0,0 +1,160 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireDefault(require("react"));
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _CustomUpload = _interopRequireDefault(require("../../dev/oa-component-upload/CustomUpload"));
+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 GenericUpload(_ref) {
+  var _config$documents;
+  let {
+    config,
+    uploadHandler,
+    deleteHandler: _deleteHandler,
+    downloadHandler,
+    previewHandler,
+    visible,
+    onClose,
+    validationConfig = {
+      maxSize: 5,
+      allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+      customValidation: null
+    },
+    uploadedDocuments,
+    showDelete = true,
+    showPreview = false,
+    form
+  } = _ref;
+  const validateFile = (file, docTypeId) => {
+    const isValidType = validationConfig.allowedTypes.includes(file.type);
+    if (!isValidType) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["Only ".concat(validationConfig.allowedTypes.map(type => type.split('/')[1].toUpperCase()).join('/'), " files are allowed!")]
+      }]);
+      return false;
+    }
+    const isValidSize = file.size / 1024 / 1024 < validationConfig.maxSize;
+    if (!isValidSize) {
+      form.setFields([{
+        name: docTypeId,
+        errors: ["File must be smaller than ".concat(validationConfig.maxSize, "MB!")]
+      }]);
+      return false;
+    }
+    if (validationConfig.customValidation) {
+      return validationConfig.customValidation(file, docTypeId);
+    }
+    return true;
+  };
+  const handleUpload = async (file, docTypeId) => {
+    if (!validateFile(file, docTypeId)) {
+      return null;
+    }
+    return uploadHandler(file, docTypeId);
+  };
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: config.title,
+    width: config.width,
+    open: visible,
+    onClose: onClose,
+    buttonConfig: config.buttonConfig
+  }, config.systemInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({}, config.systemInfo, {
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _Info.default
+      }),
+      position: 'left'
+    }
+  }))), (config === null || config === void 0 ? void 0 : config.heading) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-32"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-t1-500",
+    color: "primary-content"
+  }, config.heading, ' ')), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form
+  }, (_config$documents = config.documents) === null || _config$documents === void 0 ? void 0 : _config$documents.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.docTypeId
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-bottom-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-500",
+    color: "primary-content"
+  }, item === null || item === void 0 ? void 0 : item.docName)), /*#__PURE__*/_react.default.createElement(_CustomUpload.default, {
+    handleCustomOnChange: (file, status) => handleUpload(file, item.docTypeId),
+    formName: item.docTypeId,
+    uploadedDocuments: uploadedDocuments && uploadedDocuments[item.docTypeId] ? [uploadedDocuments[item.docTypeId]] : [],
+    deleteHandler: selectedFile => _deleteHandler(item.docTypeId),
+    downloadCallback: file => downloadHandler(item.docTypeId),
+    getPreview: previewHandler || (() => {}),
+    showDelete: showDelete,
+    showPreview: showPreview,
+    accept: validationConfig.allowedTypes.join(', '),
+    docName: item.docName
+  })))));
+}
+GenericUpload.propTypes = {
+  config: _propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    width: _propTypes.default.number,
+    buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
+      callback: _propTypes.default.func,
+      label: _propTypes.default.string,
+      type: _propTypes.default.string
+    })),
+    systemInfo: _propTypes.default.shape({
+      title: _propTypes.default.string,
+      color: _propTypes.default.string,
+      description: _propTypes.default.node
+    }),
+    heading: _propTypes.default.string,
+    documents: _propTypes.default.arrayOf(_propTypes.default.shape({
+      title: _propTypes.default.string,
+      docTypeId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+      docName: _propTypes.default.string
+    }))
+  }).isRequired,
+  uploadHandler: _propTypes.default.func.isRequired,
+  deleteHandler: _propTypes.default.func.isRequired,
+  downloadHandler: _propTypes.default.func.isRequired,
+  previewHandler: _propTypes.default.func,
+  validationConfig: _propTypes.default.shape({
+    maxSize: _propTypes.default.number,
+    allowedTypes: _propTypes.default.arrayOf(_propTypes.default.string),
+    customValidation: _propTypes.default.func
+  }),
+  uploadedDocuments: _propTypes.default.object,
+  showDelete: _propTypes.default.bool,
+  showPreview: _propTypes.default.bool,
+  form: _propTypes.default.object.isRequired,
+  visible: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired
+};
+GenericUpload.defaultProps = {
+  previewHandler: () => {},
+  validationConfig: {
+    maxSize: 5,
+    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'],
+    customValidation: null
+  },
+  uploadedDocuments: {},
+  showDelete: true,
+  showPreview: false
+};
+var _default = exports.default = GenericUpload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.51",
+  "version": "1.0.1-stage.52",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -72,7 +72,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "update-package-lock": "npm i --package-lock-only",
-    "lint": "eslint src/** --ext .js,.jsx",
+    "lint": "eslint \"src/**/*.{js,jsx}\"",
     "lint-fix": "npm run lint -- --fix",
     "lint-fix-quiet": "npm run lint-fix -- --quiet",
     "pre-commit": "./pre-commit.sh"