oa-componentbook 0.0.0-sit1.1

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

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSwitchConfig = exports.default = exports.SwitchStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _templateObject; // ToggleStyles.js
+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) } })); }
+var _default = exports.default = {};
+const SwitchStyle = exports.SwitchStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-switch{\n  min-width: 56px;\n  height: 32px;\n}\n.ant-switch .ant-switch-handle::before{\n  border-radius: 50px;\n}\n.ant-switch .ant-switch-handle{\n  width: 28px;\n  height: 28px;\n}\n.ant-switch.ant-switch-checked .ant-switch-handle {\n  inset-inline-start: calc(100% - 30px);\n}\n.ant-switch-small .ant-switch-handle{\n  width: 16px;\n  height: 16px;\n}\n.ant-switch.ant-switch-small.ant-switch-checked .ant-switch-handle {\n  inset-inline-start: calc(100% - 18px) !important;\n}\n  .ant-switch.ant-switch-small {\n    min-width: 35px;\n    height: 20px;\n"])));
+const getSwitchConfig = _ref => {
+  let {
+    disabled
+  } = _ref;
+  return {
+    // trackPadding: '2px',
+    // handleSizeSM: '1rem',
+    // handleSize: '28',
+    // trackHeightSM: '1.25rem',
+    // trackHeight: '2rem',
+    // trackMinWidthSM: '2.1875rem',
+    // trackMinWidth: '3.5rem',
+
+    // Toggle handle color.
+    handleBg: "var(".concat(disabled ? '--color-secondary-content' : '--color-primary-background', ")"),
+    // Toggle labels color.
+    colorText: "var(".concat(disabled ? '--color-secondary-content' : '--color-primary-background', ")"),
+    // Toggle on, background color
+    colorPrimary: "var(".concat(disabled ? '--color-disabled-button' : '--color-primary', ")"),
+    // Toggle on, hover background color
+    colorPrimaryHover: 'var(--color-primary-hover)',
+    // Toggle off, hover background color.
+    colorTextTertiary: 'var(--color-primary-hover)',
+    // Toggle off, background color.
+    colorTextQuaternary: "var(".concat(disabled ? '--color-disabled-button' : '--color-secondary-content', ")"),
+    // Removes lightening effect on disable.
+    opacityLoading: 1
+  };
+};
+exports.getSwitchConfig = getSwitchConfig;

package/build/components/oa-component-tooltip/CustomTooltip.js

@@ -0,0 +1,70 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _tooltipPlacementOption = require("../../global-css/tooltip-placement-option");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+const _excluded = ["title", "placement", "children", "mode", "data-test"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * CustomTooltip component that wraps the children with a tooltip.
+ *
+ * @param {string|React.ReactNode} title - The title of the tooltip.
+ * @param {string} placement - The placement of the tooltip.
+ * @param {React.ReactNode} children - The content to be wrapped with the tooltip.
+ * @param {string} dataTest - The data attribute for testing purposes.
+ * @param {object} antDesignProps - Additional props for the Ant Design Tooltip component.
+ * @returns {React.ReactNode} The component with the tooltip.
+ */
+function CustomTooltip(_ref) {
+  let {
+      title,
+      placement,
+      children,
+      mode,
+      'data-test': dataTest
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Tooltip: {
+          colorBgSpotlight: _ColorVariablesMap.default['--color-primary-content'],
+          borderRadius: 4,
+          paddingXS: 8,
+          paddingSM: 16,
+          sizePopupArrow: 12,
+          boxShadowSecondary: null
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, _extends({
+    title: title,
+    placement: placement,
+    "data-test": dataTest,
+    overlayClassName: mode === 'light' ? 'customLightTooltip' : ''
+  }, antDesignProps), children));
+}
+CustomTooltip.propTypes = {
+  title: _propTypes.default.node.isRequired,
+  placement: _propTypes.default.oneOf(_tooltipPlacementOption.tooltipPlacementOptions),
+  children: _propTypes.default.node,
+  'data-test': _propTypes.default.string,
+  mode: _propTypes.default.oneOf(['light', 'dark'])
+};
+CustomTooltip.defaultProps = {
+  placement: 'top',
+  children: null,
+  'data-test': null,
+  mode: 'dark'
+};
+var _default = exports.default = CustomTooltip;

package/build/components/oa-component-typography/Typography.js

@@ -0,0 +1,58 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+var _colorOptions = require("../../global-css/color-options");
+var _typographyOptions = require("../../global-css/typography-options");
+const _excluded = ["children", "color", "data-test", "typography"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * A Typography component.
+ *
+ * This component renders a styled span with the text
+ * you provide. It also provides optional props for
+ * changing the color of the text, providing a data-test
+ * value for testing, and providing a typography style
+ * from the design system.
+ *
+ * @param {string} children The text to render inside the Typography component.
+ * @param {string} color The color of the text. Should be one of the values from the design system.
+ * @param {string} [data-test] The value for the data-test attribute.
+ * @param {string} [typography] The typography style from the design system to use.
+ * @return {ReactElement} The rendered component.
+ */
+function Typography(_ref) {
+  let {
+      children,
+      color,
+      'data-test': dataTest,
+      typography
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTypography, _extends({
+    color: color,
+    className: "".concat(typography),
+    "data-test": dataTest
+  }, props), children);
+}
+Typography.propTypes = {
+  color: _propTypes.default.oneOf(_colorOptions.colorOptions),
+  children: _propTypes.default.node.isRequired,
+  'data-test': _propTypes.default.string,
+  typography: _propTypes.default.oneOf(_typographyOptions.typographyOptions)
+};
+Typography.defaultProps = {
+  color: null,
+  'data-test': null,
+  typography: null
+};
+var _default = exports.default = Typography;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTypography = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TypographiesMap = _interopRequireDefault(require("../../global-css/TypographiesMap"));
+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) } })); }
+var _default = exports.default = {};
+const StyledTypography = exports.StyledTypography = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // If a color is provided then that is used, otherwise the color is inherited from parent.\n  color: ", ";\n\n  &.type-d1-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-d2-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-h1-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-h2-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-h3-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n\n  &.type-t1-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-t2-700 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-b1-400 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-b2-400 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-b3-400 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-button-500 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n  }\n  \n  &.type-sl1-700 {\n    font-size: ", "px;\n    font-weight: ", ";\n    line-height: ", "px;\n    letter-spacing: ", "px;\n    text-transform: ", ";\n  }  \n"])), props => props.color !== null ? "var(--color-".concat(props.color, ")") : 'inherit', _TypographiesMap.default['type-d1-500']['font-size'], _TypographiesMap.default['type-d1-500']['font-weight'], _TypographiesMap.default['type-d1-500']['line-height'], _TypographiesMap.default['type-d2-500']['font-size'], _TypographiesMap.default['type-d2-500']['font-weight'], _TypographiesMap.default['type-d2-500']['line-height'], _TypographiesMap.default['type-h1-500']['font-size'], _TypographiesMap.default['type-h1-500']['font-weight'], _TypographiesMap.default['type-h1-500']['line-height'], _TypographiesMap.default['type-h2-500']['font-size'], _TypographiesMap.default['type-h2-500']['font-weight'], _TypographiesMap.default['type-h2-500']['line-height'], _TypographiesMap.default['type-h3-500']['font-size'], _TypographiesMap.default['type-h3-500']['font-weight'], _TypographiesMap.default['type-h3-500']['line-height'], _TypographiesMap.default['type-t1-500']['font-size'], _TypographiesMap.default['type-t1-500']['font-weight'], _TypographiesMap.default['type-t1-500']['line-height'], _TypographiesMap.default['type-t2-700']['font-size'], _TypographiesMap.default['type-t2-700']['font-weight'], _TypographiesMap.default['type-t2-700']['line-height'], _TypographiesMap.default['type-b1-400']['font-size'], _TypographiesMap.default['type-b1-400']['font-weight'], _TypographiesMap.default['type-b1-400']['line-height'], _TypographiesMap.default['type-b2-400']['font-size'], _TypographiesMap.default['type-b2-400']['font-weight'], _TypographiesMap.default['type-b2-400']['line-height'], _TypographiesMap.default['type-b3-400']['font-size'], _TypographiesMap.default['type-b3-400']['font-weight'], _TypographiesMap.default['type-b3-400']['line-height'], _TypographiesMap.default['type-button-500']['font-size'], _TypographiesMap.default['type-button-500']['font-weight'], _TypographiesMap.default['type-button-500']['line-height'], _TypographiesMap.default['type-sl1-700']['font-size'], _TypographiesMap.default['type-sl1-700']['font-weight'], _TypographiesMap.default['type-sl1-700']['line-height'], _TypographiesMap.default['type-sl1-700']['letter-spacing'], _TypographiesMap.default['type-sl1-700']['text-transform']);

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

@@ -0,0 +1,332 @@
+"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.promise.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _RemoveRedEye = _interopRequireDefault(require("@material-ui/icons/RemoveRedEye"));
+var _CustomInfo = _interopRequireDefault(require("../oa-component-info/CustomInfo"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _styles = require("./styles");
+var _CustomLoader = _interopRequireDefault(require("../oa-component-loader/CustomLoader"));
+var _upload = _interopRequireDefault(require("../../images/upload.svg"));
+var _CustomIcon = _interopRequireDefault(require("../oa-component-icons/CustomIcon"));
+var _CustomViewer = _interopRequireDefault(require("../oa-component-viewer/CustomViewer"));
+var _CustomModal = _interopRequireDefault(require("../oa-component-modal/CustomModal"));
+var _handIcon = _interopRequireDefault(require("../../images/hand-icon.svg"));
+var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+const _excluded = ["uploadedDocuments", "onChange", "multipleDoc", "showDelete", "formName", "getPreview", "isMandatory", "noOfUpload", "downloadCallback", "formRules", "allowLocalDelete", "deleteHandler", "s3ResponseReturn", "form", "beforeUploadFileValidations", "allowedMediaType", "maxAllowedSize", "generateS3Url", "uploadOnS3", "label"];
+/* eslint-disable */
+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; }
+/**
+ * Takes a file and returns a Promise that resolves with the file as a base64 encoded string.
+ * The Promise is rejected if there is an error reading the file.
+ * @param {File} file The file to be converted to base64
+ * @returns {Promise<string>} A Promise that resolves with the file as a base64 encoded string
+ */
+const getBase64 = file => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = error => reject(error);
+});
+/**
+ * Downloads a file from a base64 encoded string.
+ * @param {string} base64String The base64 encoded string of the file to be downloaded
+ * @param {string} [fileName] The name of the file to be downloaded. If not provided, the file will be downloaded with the name 'download'.
+ * @returns {undefined}
+ */
+const downloadFile = (base64String, fileName) => {
+  const link = document.createElement("a");
+  link.href = base64String;
+  link.download = fileName || "download";
+  link.click();
+};
+function isImageFile(fileName) {
+  var _fileName$split;
+  // Extract the file extension from the file name
+  const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split(".")) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
+
+  // Define an array of image file extensions
+  const imageFileExtensions = ["jpg", "jpeg", "png"];
+
+  // Check if the file extension is in the array of image file extensions
+  if (imageFileExtensions.indexOf(fileExtension) !== -1) {
+    return true;
+  }
+  return false;
+}
+/**
+ * DocumentUpload is a component that allows users to upload documents. It takes a number of props which control its behavior.
+ * @param {object} props The props passed to the component
+ * @param {array} [props.uploadedDocuments=[]] An array of documents that have already been uploaded
+ * @param {function} props.onChange A function that is called whenever the list of uploaded documents changes
+ * @param {number} [props.multipleDoc=0] The maximum number of documents that can be uploaded. If set to 0, there is no limit
+ * @param {boolean} [props.showDelete=false] Whether or not to show a delete button next to each uploaded document
+ * @param {string} [props.formName] The name of the form field that the uploaded documents should be associated with
+ * @param {function} [props.getPreview] A function that is called whenever the user clicks on an uploaded document. It should return a Promise that resolves with the URL of the document
+ * @param {boolean} [props.isMandatory=false] Whether or not the component is mandatory
+ * @param {number} [props.noOfUpload=1] The number of document that can be uploaded.
+ * @param {function} [props.downloadCallback] A function that is called whenever the user clicks on the download button. It should return a Promise that resolves with the URL of the document
+ * @param {function} [props.deleteHandler] A function that is called whenever the user clicks on the delete button. It should return a Promise that resolves with the deleted document
+ * @returns {object} A React component
+ */
+function DocumentUpload(_ref) {
+  let {
+      uploadedDocuments = [],
+      onChange,
+      multipleDoc,
+      showDelete,
+      formName,
+      getPreview,
+      isMandatory,
+      noOfUpload,
+      downloadCallback,
+      formRules,
+      allowLocalDelete,
+      deleteHandler,
+      s3ResponseReturn = () => {},
+      form,
+      beforeUploadFileValidations,
+      allowedMediaType,
+      maxAllowedSize,
+      generateS3Url,
+      uploadOnS3,
+      label
+    } = _ref,
+    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+  const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
+  const [previewImage, setPreviewImage] = (0, _react.useState)(null);
+  const [previewTitle, setPreviewTitle] = (0, _react.useState)("");
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
+  const [deleteConfirmation, setDeleteConfirmation] = (0, _react.useState)(false);
+  const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
+  const [selectedDocumentData, setSelectedDocumentData] = (0, _react.useState)({});
+  const notificationRef = (0, _react.useRef)(null);
+  const openNotification = (0, _react.useCallback)(params => notificationRef.current.openNotification(params), []);
+  (0, _react.useEffect)(() => {
+    setFileList(uploadedDocuments);
+  }, [uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length]);
+  const handlePreview = async file => {
+    if (file !== null && file !== void 0 && file.originFileObj) {
+      setPreviewImage(file);
+    } else if ((file === null || file === void 0 ? void 0 : file.fileType) === "thumbnail") {
+      const url = await getPreview();
+      setPreviewImage(url);
+    } else {
+      setPreviewImage(file === null || file === void 0 ? void 0 : file.url);
+    }
+    setPreviewTitle(file === null || file === void 0 ? void 0 : file.name);
+    setPreviewOpen(true);
+    setSelectedDocumentData(file);
+  };
+  const beforeUpload = (file, allowedMimeTypes, maxSizeMB) => {
+    if (allowedMimeTypes && (allowedMediaType === null || allowedMediaType === void 0 ? void 0 : allowedMediaType.length) > 0) {
+      const isAllowedType = allowedMimeTypes.includes(file.type);
+      if (!isAllowedType) {
+        openNotification({
+          description: "Only files of type: ".concat(allowedMimeTypes.join(", "), " are allowed!"),
+          type: "failure"
+        });
+        return false;
+      }
+    }
+    if (maxSizeMB) {
+      const isUnderSizeLimit = file.size / 1024 / 1024 < maxSizeMB;
+      if (!isUnderSizeLimit) {
+        openNotification({
+          description: "File must be smaller than ".concat(maxSizeMB, "MB!"),
+          type: "failure"
+        });
+        return false;
+      }
+    }
+    return true;
+  };
+  const handleChange = async _ref2 => {
+    let {
+      fileList: newFileList,
+      file
+    } = _ref2;
+    const modifiedList = await Promise.all(newFileList.map(async files => {
+      let modifiedFile = files;
+      setLoading(true);
+      try {
+        if ((file === null || file === void 0 ? void 0 : file.uid) === (files === null || files === void 0 ? void 0 : files.uid)) {
+          if (generateS3Url) {
+            var _response, _response2, _response3;
+            if (beforeUploadFileValidations && formName && !beforeUpload(file, allowedMediaType, maxAllowedSize)) {
+              setLoading(false);
+              return false;
+            }
+            let response = await generateS3Url(files.name);
+            response = (_response = response) === null || _response === void 0 ? void 0 : _response.data;
+            s3ResponseReturn(response);
+            await uploadOnS3((_response2 = response) === null || _response2 === void 0 || (_response2 = _response2.response) === null || _response2 === void 0 || (_response2 = _response2.data) === null || _response2 === void 0 ? void 0 : _response2.uploadUrl, files);
+            if (((_response3 = response) === null || _response3 === void 0 || (_response3 = _response3.response) === null || _response3 === void 0 || (_response3 = _response3.status) === null || _response3 === void 0 ? void 0 : _response3.toLowerCase()) == "success") {
+              var _response4;
+              modifiedFile.status = "done";
+              modifiedFile.s3Uid = (_response4 = response) === null || _response4 === void 0 || (_response4 = _response4.response) === null || _response4 === void 0 || (_response4 = _response4.data) === null || _response4 === void 0 ? void 0 : _response4.uuid;
+              if (!isImageFile(files === null || files === void 0 ? void 0 : files.name)) {
+                modifiedFile.url = _PdfSampleImage.default;
+              }
+            } else {
+              modifiedFile.status = "failed";
+              modifiedFile = null;
+            }
+          } else {
+            await onChange(files);
+            modifiedFile.status = "done";
+            if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
+              modifiedFile.url = _PdfSampleImage.default;
+            }
+          }
+        }
+      } catch (error) {
+        modifiedFile = null;
+      }
+      setLoading(false);
+      return modifiedFile;
+    }));
+    const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
+    setFileList(tempList);
+  };
+  const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
+    style: {
+      border: 0,
+      background: "none"
+    },
+    type: "button"
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
+  const DeleteFile = async () => {
+    if (allowLocalDelete) {
+      const files = fileList;
+      const updatedFiles = files.filter(file => file.uid != selectedFile.uid);
+      const tempList = updatedFiles === null || updatedFiles === void 0 ? void 0 : updatedFiles.filter(Boolean);
+      setFileList(tempList);
+      setDeleteConfirmation(false);
+      form === null || form === void 0 || form.setFields([{
+        name: formName,
+        value: null
+      }]);
+    } else {
+      await deleteHandler(selectedFile);
+      setDeleteConfirmation(false);
+    }
+  };
+  const handleRemove = file => new Promise((resolve, reject) => {
+    setSelectedFile(file);
+    setDeleteConfirmation(true);
+    resolve(false);
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "uploadDiv"
+  }, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      token: {
+        colorBorder: _ColorVariablesMap.default["--color-divider"],
+        borderRadiusLG: 4,
+        colorPrimaryHover: _ColorVariablesMap.default["--color-primary"],
+        colorPrimaryBorder: _ColorVariablesMap.default["--color-divider"],
+        colorFillAlter: _ColorVariablesMap.default["--color-secondary-background"],
+        colorError: _ColorVariablesMap.default["--color-negative"],
+        colorText: _ColorVariablesMap.default["--color-secondary-content"]
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    label: label !== null && label !== void 0 ? label : "",
+    name: formName,
+    rules: formRules || [{
+      required: isMandatory,
+      message: "Required"
+    }],
+    initialValue: (uploadedDocuments === null || uploadedDocuments === void 0 ? void 0 : uploadedDocuments.length) > 0 ? fileList : []
+  }, /*#__PURE__*/_react.default.createElement(_antd.Upload, _extends({
+    customRequest: () => {},
+    listType: "picture-card",
+    fileList: fileList,
+    onPreview: handlePreview,
+    onChange: handleChange,
+    onRemove: handleRemove,
+    showUploadList: {
+      showDownloadIcon: false,
+      showRemoveIcon: showDelete,
+      removeIcon: /*#__PURE__*/_react.default.createElement(_icons.DeleteFilled, null),
+      previewIcon: /*#__PURE__*/_react.default.createElement(_icons.EyeFilled, null)
+    }
+  }, antDesignProps), (fileList === null || fileList === void 0 ? void 0 : fileList.length) >= noOfUpload ? null : uploadButton)))))), previewOpen && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
+    open: previewOpen,
+    previewFile: previewImage,
+    title: previewTitle,
+    onCancel: () => setPreviewOpen(false),
+    downloadCallback: downloadCallback,
+    selectedDocumentData: selectedDocumentData
+  }), deleteConfirmation && /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
+    buttonConfig: [{
+      callback: () => DeleteFile(previewImage),
+      label: "Yes, Delete",
+      type: "danger-primary"
+    }],
+    imgSrc: _handIcon.default,
+    open: deleteConfirmation,
+    onCancel: () => setDeleteConfirmation(false),
+    title: "Delete Item?"
+  }, "This action will permanently delete the selected item"), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  }));
+}
+DocumentUpload.propTypes = {
+  uploadedDocuments: _propTypes.default.array,
+  onChange: _propTypes.default.func,
+  deleteHandler: _propTypes.default.func,
+  formName: _propTypes.default.string,
+  showDelete: _propTypes.default.bool,
+  multipleDoc: _propTypes.default.number,
+  getPreview: _propTypes.default.func,
+  // Define the getPreview prop type
+  isMandatory: _propTypes.default.bool,
+  noOfUpload: _propTypes.default.number,
+  downloadCallback: _propTypes.default.func,
+  // function will be used to download the document,
+  allowLocalDelete: _propTypes.default.bool,
+  formRules: _propTypes.default.array,
+  beforeUploadFileValidations: _propTypes.default.bool,
+  allowedMediaType: _propTypes.default.array,
+  maxAllowedSize: _propTypes.default.string
+};
+DocumentUpload.defaultProps = {
+  uploadedDocuments: [],
+  onChange: () => {},
+  formName: "",
+  multipleDoc: 0,
+  showDelete: true,
+  getPreview: () => {},
+  isMandatory: true,
+  deleteHandler: () => {},
+  noOfUpload: 1,
+  downloadCallback: () => {},
+  allowLocalDelete: true,
+  beforeUploadFileValidations: false,
+  allowedMediaType: [],
+  maxAllowedSize: ""
+};
+var _default = exports.default = DocumentUpload;

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

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