oa-componentbook 0.18.218 → 0.18.220

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

@@ -101,29 +101,26 @@ function DocumentUpload(_ref) {
       fileList: newFileList,
       file
     } = _ref2;
-    if (file.status === 'removed') {
-      // setSelectedFile(file);
-      // setDeleteConfirmation(true);
-    } else {
-      const modifiedList = await Promise.all(newFileList.map(async files => {
-        let modifiedFile = files;
-        setLoading(true);
-        try {
+    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)) {
           await onChange(files);
           modifiedFile.status = 'done';
           if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
             modifiedFile.url = _PdfSampleImage.default;
             // delete modifiedFile?.type;
           }
-        } catch (error) {
-          modifiedFile = null;
         }
-        setLoading(false);
-        return modifiedFile;
-      }));
-      const tempList = modifiedList === null || modifiedList === void 0 ? void 0 : modifiedList.filter(Boolean);
-      setFileList(tempList);
-    }
+      } 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: {

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

@@ -9,5 +9,5 @@ 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.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{\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  }\n"])));
+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.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  }\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"])));

package/build/components/oa-component-viewer/CustomViewer.js

@@ -37,59 +37,135 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 _reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
 const supportedImage = ['png', 'jpeg', 'jpg'];
 const supportedPdf = ['pdf'];
-const renderContent = (format, file, url, pageNumber, onDocumentLoadSuccess, numPages) => {
+const renderContent = (format, file, url, pageNumber, onDocumentLoadSuccess) => {
   if (format === 'PDF') {
-    if (file) {
-      return /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
-        file: url,
-        onLoadSuccess: onDocumentLoadSuccess
-      }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
-        pageNumber: pageNumber
-      }));
-    }
-    return /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+    return file ? /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+      file: url,
+      onLoadSuccess: onDocumentLoadSuccess
+    }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+      pageNumber: pageNumber
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
   }
   if (format === 'IMAGE') {
-    if (file) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "overflowScroll"
-      }, /*#__PURE__*/_react.default.createElement("img", {
-        alt: "example",
-        style: {
-          width: '100%'
-        },
-        src: url
-      }));
-    }
-    return /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
+    return file ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "overflowScroll"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      alt: "example",
+      style: {
+        width: '100%'
+      },
+      src: url
+    })) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null);
   }
   return /*#__PURE__*/_react.default.createElement("div", null, "Unsupported file format");
 };
-function CustomViewer(_ref) {
+function Controls(_ref) {
+  let {
+    setRotationDegree,
+    pageNumber,
+    numPages,
+    setPageNumber,
+    getFileFormat,
+    handleZoomIn,
+    handleZoomOut
+  } = _ref;
+  const rotate = () => {
+    setRotationDegree(prevRotationDegree => prevRotationDegree + 90);
+  };
+  const handleKeyPress = (event, callback) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      callback();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledZoom, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flextBodyContain"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleZoomIn,
+    onKeyDown: event => handleKeyPress(event, handleZoomIn),
+    className: "iconWidthPad"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Add.default,
+    color: "primary"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleZoomOut,
+    onKeyDown: event => handleKeyPress(event, handleZoomOut),
+    className: "iconWidthPad"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Remove.default,
+    color: "primary"
+  }))), getFileFormat === 'PDF' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flextBodyContain pdfFlexStyles"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: () => setPageNumber(pageNumber - 1),
+    onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber - 1)),
+    className: "iconWidthPad iconWidthPadPdf"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _ArrowBackIos.default,
+    disabled: pageNumber <= 1
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    className: "type-b2-400",
+    color: "primary-content"
+  }, "Page", ' ', pageNumber, ' ', "of", ' ', numPages), /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: () => setPageNumber(pageNumber + 1),
+    onKeyDown: event => handleKeyPress(event, () => setPageNumber(pageNumber + 1)),
+    className: "iconWidthPad iconWidthPadPdf"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _ArrowForwardIos.default,
+    disabled: pageNumber >= numPages
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: rotate,
+    onKeyDown: event => handleKeyPress(event, rotate),
+    className: "iconWidthPad posroated"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    size: 18,
+    icon: _Rotate90DegreesCcw.default,
+    color: "primary"
+  })));
+}
+Controls.propTypes = {
+  setRotationDegree: _propTypes.default.func.isRequired,
+  pageNumber: _propTypes.default.number.isRequired,
+  numPages: _propTypes.default.number.isRequired,
+  setPageNumber: _propTypes.default.func.isRequired,
+  getFileFormat: _propTypes.default.string.isRequired,
+  handleZoomIn: _propTypes.default.func.isRequired,
+  handleZoomOut: _propTypes.default.func.isRequired
+};
+function CustomViewer(_ref2) {
   let {
       downloadCallback,
       title,
       selectedDocumentData,
       previewFile,
       fileName = 'download'
-    } = _ref,
-    antDesignProps = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    antDesignProps = _objectWithoutProperties(_ref2, _excluded);
   const [rotationDegree, setRotationDegree] = (0, _react.useState)(0);
   const [numPages, setNumPages] = (0, _react.useState)(null);
   const [pageNumber, setPageNumber] = (0, _react.useState)(1);
   const [initialScale, setInitialScale] = (0, _react.useState)(1);
   const [scale, setScale] = (0, _react.useState)(1);
-  const onDocumentLoadSuccess = _ref2 => {
+  const onDocumentLoadSuccess = _ref3 => {
     let {
       numPages: pages
-    } = _ref2;
+    } = _ref3;
     setNumPages(pages);
     setPageNumber(1);
   };
-  const handlePreview = file => {
-    const url = URL.createObjectURL(file === null || file === void 0 ? void 0 : file.originFileObj);
-    return url;
-  };
   const handleZoomIn = () => {
     setScale(scale + 0.1);
   };
@@ -103,13 +179,13 @@ function CustomViewer(_ref) {
       return previewFile;
     }
     if (typeof previewFile === 'object' && previewFile) {
-      return URL.createObjectURL(previewFile === null || previewFile === void 0 ? void 0 : previewFile.originFileObj);
+      return URL.createObjectURL(previewFile.originFileObj);
     }
     return null;
   }, [previewFile]);
   const getFileFormat = (0, _react.useMemo)(() => {
-    var _title$split$pop, _previewFile$type;
-    const fileExtension = typeof previewFile === 'string' ? title === null || title === void 0 || (_title$split$pop = title.split('.').pop()) === null || _title$split$pop === void 0 ? void 0 : _title$split$pop.toLowerCase() : previewFile === null || previewFile === void 0 || (_previewFile$type = previewFile.type) === null || _previewFile$type === void 0 || (_previewFile$type = _previewFile$type.split('/')) === null || _previewFile$type === void 0 ? void 0 : _previewFile$type[1];
+    var _previewFile$type;
+    const fileExtension = typeof previewFile === 'string' ? title.split('.').pop().toLowerCase() : previewFile === null || previewFile === void 0 || (_previewFile$type = previewFile.type) === null || _previewFile$type === void 0 ? void 0 : _previewFile$type.split('/')[1];
     if (supportedImage.includes(fileExtension)) {
       return 'IMAGE';
     }
@@ -126,12 +202,12 @@ function CustomViewer(_ref) {
       },
       label: 'Download'
     }]
-  }, antDesignProps), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref3 => {
+  }, antDesignProps), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref4 => {
     let {
         zoomIn,
         zoomOut
-      } = _ref3,
-      rest = _objectWithoutProperties(_ref3, _excluded2);
+      } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded2);
     return /*#__PURE__*/_react.default.createElement(_styles.PdfStyles, null, /*#__PURE__*/_react.default.createElement(Controls, {
       setRotationDegree: setRotationDegree,
       pageNumber: pageNumber,
@@ -144,7 +220,7 @@ function CustomViewer(_ref) {
       style: {
         transform: "rotate(".concat(rotationDegree, "deg) scale(").concat(scale, ")")
       }
-    }, renderContent(getFileFormat, previewFile, getUrl, pageNumber, onDocumentLoadSuccess, numPages))));
+    }, renderContent(getFileFormat, previewFile, getUrl, pageNumber, onDocumentLoadSuccess))));
   }));
 }
 CustomViewer.propTypes = {
@@ -153,7 +229,6 @@ CustomViewer.propTypes = {
   fileName: _propTypes.default.string,
   antDesignProps: _propTypes.default.object,
   downloadCallback: _propTypes.default.func,
-  // function will be used to download the document
   selectedDocumentData: _propTypes.default.object
 };
 CustomViewer.defaultProps = {
@@ -162,70 +237,4 @@ CustomViewer.defaultProps = {
   downloadCallback: () => {},
   selectedDocumentData: {}
 };
-var _default = exports.default = CustomViewer;
-function Controls(_ref4) {
-  let {
-    setRotationDegree,
-    pageNumber,
-    numPages,
-    setPageNumber,
-    getFileFormat,
-    handleZoomIn,
-    handleZoomOut
-  } = _ref4;
-  const rotate = () => {
-    setRotationDegree(prevRotationDegree => prevRotationDegree + 90);
-  };
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledZoom, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flextBodyContain"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "iconWidthPad"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    onClick: handleZoomIn,
-    size: 18,
-    icon: _Add.default,
-    color: "primary"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "iconWidthPad"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    onClick: handleZoomOut,
-    size: 18,
-    icon: _Remove.default,
-    color: "primary"
-  }))), getFileFormat === 'PDF' && /*#__PURE__*/_react.default.createElement("div", {
-    className: "flextBodyContain pdfFlexStyles"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "iconWidthPad iconWidthPadPdf"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    onClick: () => setPageNumber(pageNumber - 1),
-    disabled: pageNumber <= 1,
-    size: 18,
-    icon: _ArrowBackIos.default
-  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "type-b2-400",
-    color: "primary-content"
-  }, "Page", ' ', pageNumber, ' ', "of", ' ', numPages), /*#__PURE__*/_react.default.createElement("div", {
-    className: "iconWidthPad iconWidthPadPdf"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    onClick: () => setPageNumber(pageNumber + 1),
-    disabled: pageNumber >= numPages,
-    size: 18,
-    icon: _ArrowForwardIos.default
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "iconWidthPad posroated"
-  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
-    onClick: rotate,
-    size: 18,
-    icon: _Rotate90DegreesCcw.default,
-    color: "primary"
-  })));
-}
-Controls.propTypes = {
-  setRotationDegree: _propTypes.default.func.isRequired,
-  pageNumber: _propTypes.default.number.isRequired,
-  numPages: _propTypes.default.number.isRequired,
-  setPageNumber: _propTypes.default.func.isRequired,
-  getFileFormat: _propTypes.default.string.isRequired,
-  handleZoomIn: _propTypes.default.func.isRequired,
-  handleZoomOut: _propTypes.default.func.isRequired
-};
+var _default = exports.default = CustomViewer;

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

@@ -10,5 +10,5 @@ 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 mainStyle = exports.mainStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nposition: relative;\nbackground: red;\n"])));
-const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.overflowScroll{\n    height: 350px;\n    overflow-y: auto;\n}\n.flextBodyContain{\n    position: absolute;\n    right: 42px;\n    bottom: 116px;\n    flex-direction: column;\n    z-index: 9999;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n    position: absolute;\n    right: 42px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    top: 92px;\n    z-index: 999;\n    border-radius: 4px;\n}\n.iconWidthPad{\n    \n    background: var(--color-primary-background);    \n    padding: 6px;\n    height: 32px;\n    width: 32px;\n    border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n    border: none;\n}\n@media screen and (max-width: 600px) {\n    .overflowScroll{\n        height: auto;\n        overflow-y: inherit;\n    }\n  }\n"])));
+const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.flextBodyContain{\n    position: absolute;\n    right: 42px;\n    bottom: 116px;\n    flex-direction: column;\n    z-index: 9999;\n    display: flex;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n    position: absolute;\n    right: 42px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n    top: 92px;\n    z-index: 999;\n    border-radius: 4px;\n}\n.iconWidthPad{\n    cursor: pointer;\n    background: var(--color-primary-background);    \n    padding: 6px;\n    height: 32px;\n    width: 32px;\n    border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n    border: none;\n}\n"])));
 const PdfStyles = exports.PdfStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\ncanvas{\n    margin: 0 auto;\n}\n.react-pdf__Page{\n    height: 350px;\n    overflow-y: auto;\n}\n.pdfFlexStyles{\n    left: 0;\n    right: 0;\n    bottom: 92px;\n    width: fit-content;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    background: #fff;\n    margin-left: auto;\n    margin-right: auto;\n    padding: 8px;\n    gap: 12px;\n}\n.iconWidthPadPdf {\n    width: auto;\n    height: auto;\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border-bottom: none;\n}\nbutton:disabled {\n    color: var(--color-disabled-button);\n    cursor: not-allowed; \n  }\n  button{\n    color: var(--color-primary-content);\n  }\n@media screen and (max-width: 600px) {\n    .react-pdf__Page {\n        height: auto;\n        overflow-y: inherit;\n\n    }\n    canvas {\n        width: 100% !important;\n        height: auto !important;\n    }\n  }\n"])));

package/build/global-css/GridLayout.js

@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // TODO: Figure out a way to make this work with storybook.
 // Can be used to wrap the entire application, to make these styles available to every component
 
-const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\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 @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@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\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\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\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.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.overflowScroll{\n  height: 350px;\n  overflow-y: auto;\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.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}\n@media only screen and (max-width: 600px) {\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n  .overflowScroll{\n    height: 350px;\n    overflow-y: auto;\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\n\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n"])));
+const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\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 @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@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\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\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\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.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.overflowScroll{\n  height: 350px;\n  overflow-y: auto;\n  margin: 20px 0 0;\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.ant-collapse-item-active .ant-collapse-arrow{\n  transform: rotate(180deg) !important;\n}\n@media only screen and (max-width: 600px) {\n  .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n      padding: 8px;\n  }\n  .overflowScroll{\n    height: 350px;\n    overflow-y: auto;\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\n\n.ant-picker .ant-picker-clear{\n  font-size: 20px;\n}\n"])));
 var _default = exports.default = GridLayout;

package/build/widgets/oa-widget-document-upload/styles.js

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

package/build/widgets/oa-widget-spare-part/SparePartsCollapseWidget.js

@@ -7,12 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _icons = require("@ant-design/icons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));
-var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
-var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-info/CustomInfo"));
 var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
 var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,7 +26,7 @@ function SparePartsCollapseWidget(_ref) {
     data,
     onDelete
   } = _ref;
-  const generateItemRows = (items, panelKey) => items.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
+  const generateItemRows = (items, panelKey) => items.map(item => /*#__PURE__*/_react.default.createElement("div", {
     key: item.id,
     style: {
       display: 'flex',
@@ -64,10 +61,10 @@ function SparePartsCollapseWidget(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       className: "type-b2-400",
       color: "secondary-content"
-    }), panel.subTitle)),
+    }, panel.subTitle))),
     key: panel.id,
     className: "ascCollapse",
-    extra: /*#__PURE__*/_react.default.createElement("div", {
+    extra: onDelete && /*#__PURE__*/_react.default.createElement("div", {
       onClick: e => e.stopPropagation(),
       onKeyDown: e => handleKeyDown(e, index),
       role: "button",
@@ -83,6 +80,9 @@ function SparePartsCollapseWidget(_ref) {
 }
 SparePartsCollapseWidget.propTypes = {
   data: _propTypes.default.array.isRequired,
-  onDelete: _propTypes.default.func.isRequired
+  onDelete: _propTypes.default.func
+};
+SparePartsCollapseWidget.defaultProps = {
+  onDelete: null
 };
 var _default = exports.default = SparePartsCollapseWidget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.218",
+  "version": "0.18.220",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",