oa-componentbook 1.0.1-stage.6 → 1.0.1-stage.61

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

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

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

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** ***********  ✨ Codeium Command ⭐  ************ */
+/**
+ * FeedbackForm component renders an iframe and a script tag.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.iframeSrc - The source URL for the iframe.
+ * @param {string} props.scriptSrc - The source URL for the script.
+ * @param {boolean} props.open - A boolean value to control the effect.
+ *
+ * The component uses a useEffect hook to send a postMessage to the iframe
+ * content window once the iframe has loaded, enabling specific settings.
+ * The iframe is styled to fill the entire viewport.
+ */
+
+/** ****  1da5e3d4-a27c-425d-956f-e856770f0f0d  ****** */
+function FeedbackForm(_ref) {
+  let {
+    iframeSrc,
+    scriptSrc,
+    open
+  } = _ref;
+  const [iframeKey, setIframeKey] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    const iframe = document.getElementById('s2c_embed_90232');
+    if (iframe) {
+      iframe.onload = function () {
+        const ifrmContWin = iframe.contentWindow;
+        const sendPostMsg = 'hideHeader=false&hideFooter=false';
+        ifrmContWin.postMessage(sendPostMsg, '*');
+      };
+    }
+    setIframeKey(prevKey => prevKey + 1);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: 0,
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("iframe", {
+    key: iframeKey,
+    id: "s2c_embed_90232",
+    width: "100%",
+    frameBorder: "0" // Removed line gap
+    ,
+    src: iframeSrc,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    title: "Feedback Survey"
+  }), /*#__PURE__*/_react.default.createElement("script", {
+    type: "text/javascript",
+    src: scriptSrc
+  }));
+}
+FeedbackForm.propTypes = {
+  iframeSrc: _propTypes.default.string.isRequired,
+  scriptSrc: _propTypes.default.string.isRequired,
+  open: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = FeedbackForm;

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

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

package/build/components/oa-component-info/CustomInfo.js

@@ -27,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} fontColor - The color of the text.
  * @param {object} iconConfig - Configuration for the icon.
  * @param {string} title - The title to be displayed.
+ * @param {string} borderColor - The border color of the component.
  *
  * @returns {ReactElement} A styled component with the specified properties.
  */
@@ -37,7 +38,8 @@ function CustomInfo(_ref) {
     description,
     fontColor,
     iconConfig,
-    title
+    title,
+    borderColor
   } = _ref;
   /**
    * Renders the icon based on the presence of a title.
@@ -65,7 +67,8 @@ function CustomInfo(_ref) {
     }, renderIcon()) : renderIcon();
   };
   return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
-    $color: color
+    $color: color,
+    $borderColor: borderColor
   }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: fontColor,
     typography: "type-t2-700"
@@ -96,7 +99,8 @@ CustomInfo.propTypes = {
     position: _propTypes.default.oneOf(['left', 'right']),
     tooltipText: _propTypes.default.string
   }),
-  title: _propTypes.default.string
+  title: _propTypes.default.string,
+  borderColor: _propTypes.default.string
 };
 CustomInfo.defaultProps = {
   buttonConfig: {
@@ -110,5 +114,6 @@ CustomInfo.defaultProps = {
   },
   fontColor: 'primary-content',
   title: '',
-  description: ''
+  description: '',
+  borderColor: ''
 };

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

@@ -8,8 +8,8 @@ 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 RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n"])));
-const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n"])));
+const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
 const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
   as: 'section'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  \n  button {\n    margin-left: 8px;\n  };\n"])), props => props.$color);
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);

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

@@ -0,0 +1,276 @@
+"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; }
+/* eslint-disable */
+
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const ZOOM_STEP = 0.2;
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 3.0;
+function CustomDocumentViewer(_ref) {
+  let {
+    fileType,
+    fileUrl,
+    onDownload,
+    hideZoom,
+    hideDownload,
+    hidePageNumber,
+    hideRotate,
+    documentViewerOverlayHeight
+  } = _ref;
+  const [totalPages, setTotalPages] = (0, _react.useState)(null);
+  const [scale, setScale] = (0, _react.useState)(1.0);
+  const [currentPage, setCurrentPage] = (0, _react.useState)(1);
+  // For image rotation.
+  const [rotation, setRotation] = (0, _react.useState)(0);
+  const containerRef = (0, _react.useRef)(null);
+  const pageRefs = (0, _react.useRef)([]);
+
+  // When the document loads, update total pages (for PDFs).
+  const onDocumentLoadSuccess = _ref2 => {
+    let {
+      numPages
+    } = _ref2;
+    setTotalPages(numPages);
+  };
+  // Zoom handlers.
+  const handleZoomIn = (0, _react.useCallback)(() => setScale(prev => Math.min(prev + ZOOM_STEP, MAX_ZOOM)), []);
+  const handleZoomOut = (0, _react.useCallback)(() => setScale(prev => Math.max(prev - ZOOM_STEP, MIN_ZOOM)), []);
+  const handleResetZoom = (0, _react.useCallback)(() => setScale(1.0), []);
+
+  // Single rotation handler for images – rotates 90° clockwise each click.
+  const handleRotate = (0, _react.useCallback)(() => {
+    setRotation(prev => prev + 90);
+  }, []);
+
+  // Default download function; can be overridden by passing an onDownload prop.
+  const defaultDownload = (0, _react.useCallback)(() => {
+    if (fileType === 'image') {
+      // Fetch the image as a blob to force download.
+      fetch(fileUrl, {
+        mode: 'cors'
+      }).then(res => res.blob()).then(blob => {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileUrl.split('/').pop();
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      }).catch(error => {
+        console.error('Image download failed:', error);
+      });
+    } else {
+      // For PDFs and other file types, use the standard download.
+      const link = document.createElement('a');
+      link.href = fileUrl;
+      link.download = fileUrl.split('/').pop();
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [fileUrl, fileType]);
+  const handleDownload = onDownload || defaultDownload;
+
+  // Enable dragging when zoomed in.
+  (0, _react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let isDragging = false;
+    let startX;
+    let startY;
+    let scrollLeft;
+    let scrollTop;
+    const onMouseDown = e => {
+      if (scale > 1.0) {
+        isDragging = true;
+        container.style.cursor = 'grabbing';
+        startX = e.pageX;
+        startY = e.pageY;
+        scrollLeft = container.scrollLeft;
+        scrollTop = container.scrollTop;
+      }
+    };
+    const onMouseMove = e => {
+      if (!isDragging) return;
+      e.preventDefault();
+      container.scrollLeft = scrollLeft - (e.pageX - startX);
+      container.scrollTop = scrollTop - (e.pageY - startY);
+    };
+    const onMouseUp = function onMouseUp() {
+      isDragging = false;
+      container.style.cursor = scale > 1.0 ? 'grab' : 'auto';
+    };
+    container.addEventListener('mousedown', onMouseDown);
+    container.addEventListener('mousemove', onMouseMove);
+    container.addEventListener('mouseup', onMouseUp);
+    container.addEventListener('mouseleave', onMouseUp);
+    return () => {
+      container.removeEventListener('mousedown', onMouseDown);
+      container.removeEventListener('mousemove', onMouseMove);
+      container.removeEventListener('mouseup', onMouseUp);
+      container.removeEventListener('mouseleave', onMouseUp);
+    };
+  }, [scale]);
+
+  // (Optional) Scroll event to update the current page (for PDFs).
+  const handleScroll = () => {
+    const container = containerRef.current;
+    if (!container) return;
+    const containerRect = container.getBoundingClientRect();
+    let closestPage = 1;
+    let minDistance = Infinity;
+    pageRefs.current.forEach((ref, index) => {
+      if (ref) {
+        const rect = ref.getBoundingClientRect();
+        const distance = Math.abs(rect.top - containerRect.top);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestPage = index + 1;
+        }
+      }
+    });
+    setCurrentPage(closestPage);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    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;