oa-componentbook 1.0.1-stage.76 → 1.0.1-stage.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,6 +17,7 @@ var _RotateRight = _interopRequireDefault(require("@material-ui/icons/RotateRigh
17
17
  var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
18
18
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
19
19
  var _styles = _interopRequireDefault(require("./styles"));
20
+ var _system = require("@material-ui/system");
20
21
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
22
  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); }
22
23
  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; }
@@ -35,7 +36,8 @@ function CustomDocumentViewer(_ref) {
35
36
  hideDownload,
36
37
  hidePageNumber,
37
38
  hideRotate,
38
- documentViewerOverlayHeight
39
+ documentViewerOverlayHeight,
40
+ docHeight
39
41
  } = _ref;
40
42
  const [totalPages, setTotalPages] = (0, _react.useState)(null);
41
43
  const [scale, setScale] = (0, _react.useState)(1.0);
@@ -64,27 +66,27 @@ function CustomDocumentViewer(_ref) {
64
66
 
65
67
  // Default download function; can be overridden by passing an onDownload prop.
66
68
  const defaultDownload = (0, _react.useCallback)(() => {
67
- if (fileType === 'image') {
69
+ if (fileType === "image") {
68
70
  // Fetch the image as a blob to force download.
69
71
  fetch(fileUrl, {
70
- mode: 'cors'
72
+ mode: "cors"
71
73
  }).then(res => res.blob()).then(blob => {
72
74
  const url = window.URL.createObjectURL(blob);
73
- const link = document.createElement('a');
75
+ const link = document.createElement("a");
74
76
  link.href = url;
75
- link.download = fileUrl.split('/').pop();
77
+ link.download = fileUrl.split("/").pop();
76
78
  document.body.appendChild(link);
77
79
  link.click();
78
80
  document.body.removeChild(link);
79
81
  window.URL.revokeObjectURL(url);
80
82
  }).catch(error => {
81
- console.error('Image download failed:', error);
83
+ console.error("Image download failed:", error);
82
84
  });
83
85
  } else {
84
86
  // For PDFs and other file types, use the standard download.
85
- const link = document.createElement('a');
87
+ const link = document.createElement("a");
86
88
  link.href = fileUrl;
87
- link.download = fileUrl.split('/').pop();
89
+ link.download = fileUrl.split("/").pop();
88
90
  document.body.appendChild(link);
89
91
  link.click();
90
92
  document.body.removeChild(link);
@@ -104,7 +106,7 @@ function CustomDocumentViewer(_ref) {
104
106
  const onMouseDown = e => {
105
107
  if (scale > 1.0) {
106
108
  isDragging = true;
107
- container.style.cursor = 'grabbing';
109
+ container.style.cursor = "grabbing";
108
110
  startX = e.pageX;
109
111
  startY = e.pageY;
110
112
  scrollLeft = container.scrollLeft;
@@ -119,17 +121,17 @@ function CustomDocumentViewer(_ref) {
119
121
  };
120
122
  const onMouseUp = function onMouseUp() {
121
123
  isDragging = false;
122
- container.style.cursor = scale > 1.0 ? 'grab' : 'auto';
124
+ container.style.cursor = scale > 1.0 ? "grab" : "auto";
123
125
  };
124
- container.addEventListener('mousedown', onMouseDown);
125
- container.addEventListener('mousemove', onMouseMove);
126
- container.addEventListener('mouseup', onMouseUp);
127
- container.addEventListener('mouseleave', onMouseUp);
126
+ container.addEventListener("mousedown", onMouseDown);
127
+ container.addEventListener("mousemove", onMouseMove);
128
+ container.addEventListener("mouseup", onMouseUp);
129
+ container.addEventListener("mouseleave", onMouseUp);
128
130
  return () => {
129
- container.removeEventListener('mousedown', onMouseDown);
130
- container.removeEventListener('mousemove', onMouseMove);
131
- container.removeEventListener('mouseup', onMouseUp);
132
- container.removeEventListener('mouseleave', onMouseUp);
131
+ container.removeEventListener("mousedown", onMouseDown);
132
+ container.removeEventListener("mousemove", onMouseMove);
133
+ container.removeEventListener("mouseup", onMouseUp);
134
+ container.removeEventListener("mouseleave", onMouseUp);
133
135
  };
134
136
  }, [scale]);
135
137
 
@@ -152,25 +154,23 @@ function CustomDocumentViewer(_ref) {
152
154
  });
153
155
  setCurrentPage(closestPage);
154
156
  };
155
- return /*#__PURE__*/_react.default.createElement("div", {
156
- className: "myChotaModal"
157
- }, /*#__PURE__*/_react.default.createElement(_styles.default, {
157
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.default, {
158
158
  documentViewerOverlayHeight: documentViewerOverlayHeight
159
159
  }, /*#__PURE__*/_react.default.createElement("div", {
160
160
  ref: containerRef,
161
- className: "customDocumentViewerOverlay",
161
+ className: "customDocumentViewerOverlay ".concat(docHeight),
162
162
  style: {
163
- cursor: scale > 1.0 ? 'grab' : 'auto'
163
+ cursor: scale > 1.0 ? "grab" : "auto"
164
164
  },
165
165
  onScroll: handleScroll
166
166
  }, /*#__PURE__*/_react.default.createElement("div", {
167
167
  className: "customDocumentViewerOverlayHeader"
168
- }, fileType === 'pdf' && !hidePageNumber ? /*#__PURE__*/_react.default.createElement("div", {
168
+ }, fileType === "pdf" && !hidePageNumber ? /*#__PURE__*/_react.default.createElement("div", {
169
169
  className: "pageNumber"
170
170
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
171
171
  className: "type-button-500",
172
172
  color: "primary-background"
173
- }, "Page", ' ', currentPage, ' ', "of", ' ', totalPages)) : fileType === 'image' && !hideRotate ? /*#__PURE__*/_react.default.createElement("div", {
173
+ }, "Page ", currentPage, " of ", totalPages)) : fileType === "image" && !hideRotate ? /*#__PURE__*/_react.default.createElement("div", {
174
174
  className: "pageNumber"
175
175
  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
176
176
  color: "primary-background",
@@ -178,7 +178,7 @@ function CustomDocumentViewer(_ref) {
178
178
  icon: _RotateRight.default,
179
179
  onClick: handleRotate,
180
180
  style: {
181
- cursor: 'pointer'
181
+ cursor: "pointer"
182
182
  }
183
183
  })) : null, !hideZoom && /*#__PURE__*/_react.default.createElement("div", {
184
184
  className: "customDocumentViewerOverlayHeaderIcons"
@@ -188,7 +188,7 @@ function CustomDocumentViewer(_ref) {
188
188
  icon: _icons.RemoveRounded,
189
189
  onClick: handleZoomOut,
190
190
  style: {
191
- cursor: scale === MIN_ZOOM ? 'not-allowed' : 'pointer'
191
+ cursor: scale === MIN_ZOOM ? "not-allowed" : "pointer"
192
192
  }
193
193
  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
194
194
  color: "primary-background",
@@ -196,7 +196,7 @@ function CustomDocumentViewer(_ref) {
196
196
  icon: _icons.ZoomInRounded,
197
197
  onClick: handleResetZoom,
198
198
  style: {
199
- cursor: scale === 1.0 ? 'not-allowed' : 'pointer'
199
+ cursor: scale === 1.0 ? "not-allowed" : "pointer"
200
200
  }
201
201
  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
202
202
  color: "primary-background",
@@ -204,7 +204,7 @@ function CustomDocumentViewer(_ref) {
204
204
  icon: _icons.AddRounded,
205
205
  onClick: handleZoomIn,
206
206
  style: {
207
- cursor: scale === MAX_ZOOM ? 'not-allowed' : 'pointer'
207
+ cursor: scale === MAX_ZOOM ? "not-allowed" : "pointer"
208
208
  }
209
209
  })), !hideDownload && /*#__PURE__*/_react.default.createElement("div", {
210
210
  className: "downloadIcon"
@@ -213,10 +213,10 @@ function CustomDocumentViewer(_ref) {
213
213
  size: 24,
214
214
  icon: _icons.GetAppRounded,
215
215
  onClick: handleDownload
216
- }))), fileType === 'pdf' && /*#__PURE__*/_react.default.createElement("div", {
216
+ }))), fileType === "pdf" && /*#__PURE__*/_react.default.createElement("div", {
217
217
  style: {
218
218
  transform: "scale(".concat(scale, ")"),
219
- transformOrigin: 'top center'
219
+ transformOrigin: "top center"
220
220
  }
221
221
  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
222
222
  file: fileUrl,
@@ -227,25 +227,25 @@ function CustomDocumentViewer(_ref) {
227
227
  key: "page_".concat(index + 1),
228
228
  ref: el => pageRefs.current[index] = el,
229
229
  style: {
230
- marginBottom: '20px',
231
- display: 'flex',
232
- justifyContent: 'center'
230
+ marginBottom: "20px",
231
+ display: "flex",
232
+ justifyContent: "center"
233
233
  }
234
234
  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
235
235
  pageNumber: index + 1,
236
236
  scale: 1.0
237
- }))))), fileType === 'image' && /*#__PURE__*/_react.default.createElement("div", {
237
+ }))))), fileType === "image" && /*#__PURE__*/_react.default.createElement("div", {
238
238
  style: {
239
239
  transform: "scale(".concat(scale, ") rotate(").concat(rotation, "deg)"),
240
- transformOrigin: 'center center'
240
+ transformOrigin: "center center"
241
241
  }
242
242
  }, /*#__PURE__*/_react.default.createElement("img", {
243
243
  src: fileUrl,
244
244
  alt: "document",
245
245
  style: {
246
- transition: 'transform 0.3s ease-in-out',
247
- maxWidth: '100%',
248
- maxHeight: '80vh'
246
+ transition: "transform 0.3s ease-in-out",
247
+ maxWidth: "100%",
248
+ maxHeight: "80vh"
249
249
  }
250
250
  })))));
251
251
  }
@@ -263,7 +263,8 @@ CustomDocumentViewer.propTypes = {
263
263
  // If true, hide page number display (for PDFs)
264
264
  hideRotate: _propTypes.default.bool,
265
265
  // If true, hide rotate control (for images)
266
- documentViewerOverlayHeight: _propTypes.default.string
266
+ documentViewerOverlayHeight: _propTypes.default.string,
267
+ docHeight: _propTypes.default.string
267
268
  };
268
269
  CustomDocumentViewer.defaultProps = {
269
270
  onDownload: null,
@@ -271,6 +272,7 @@ CustomDocumentViewer.defaultProps = {
271
272
  hideDownload: false,
272
273
  hidePageNumber: false,
273
274
  hideRotate: false,
274
- documentViewerOverlayHeight: '100vh'
275
+ documentViewerOverlayHeight: "100vh",
276
+ docHeight: ""
275
277
  };
276
278
  var _default = exports.default = CustomDocumentViewer;
@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
- 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: auto;\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 .ant-radio-group {\n display: flex;\n white-space: nowrap;\n }\n"])), props => props.documentViewerOverlayHeight);
11
+ 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: auto;\n align-items: center; position: relative;\n }\n\n .documentPdfHeight{height:calc(100vh - 114px);}\n\n .customDocumentViewerOverlayHeader {\n position: fixed;\n padding: 0 16px;\n bottom: 74px;\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 top:auto;\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 .ant-radio-group {\n display: flex;\n white-space: nowrap;\n }\n"])), props => props.documentViewerOverlayHeight);
12
12
  var _default = exports.default = DocumentViewerContainer;
@@ -17,7 +17,7 @@ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-componen
17
17
  var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
18
18
  var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
19
19
  var _styles = _interopRequireDefault(require("./styles"));
20
- const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig"];
20
+ const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig", "onlyDocumentView"];
21
21
  /* eslint-disable */
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
  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; }
@@ -30,7 +30,8 @@ function DocumentSideDrawer(_ref) {
30
30
  documentConfig,
31
31
  drawerWidth,
32
32
  drawerButtonConfig,
33
- drawerTagConfig
33
+ drawerTagConfig,
34
+ onlyDocumentView
34
35
  } = _ref,
35
36
  props = _objectWithoutProperties(_ref, _excluded);
36
37
  // Calculate the drawer width based on documentConfig or fallback to 480
@@ -44,7 +45,7 @@ function DocumentSideDrawer(_ref) {
44
45
  title: title
45
46
  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
46
47
  className: "viewerContainer"
47
- }, documentConfig && /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, documentConfig), /*#__PURE__*/_react.default.createElement("div", {
48
+ }, documentConfig && /*#__PURE__*/_react.default.createElement(_CustomDocumentViewer.default, documentConfig), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
48
49
  className: "rightContSection"
49
50
  }, drawerTagConfig && /*#__PURE__*/_react.default.createElement("div", {
50
51
  className: "grayBoxSec"
@@ -105,7 +106,9 @@ DocumentSideDrawer.propTypes = {
105
106
  // Optional custom drawer width
106
107
  drawerButtonConfig: _propTypes.default.object,
107
108
  // Button configuration for the drawer
108
- drawerTagConfig: _propTypes.default.object // Tag configuration (heading, tag, viewDetails)
109
+ drawerTagConfig: _propTypes.default.object,
110
+ // Tag configuration (heading, tag, viewDetails)
111
+ onlyDocumentView: _propTypes.default.bool // Optional prop to render only document viewer
109
112
  };
110
113
 
111
114
  // Default props to provide fallback values for optional props
@@ -115,6 +118,7 @@ DocumentSideDrawer.defaultProps = {
115
118
  documentConfig: null,
116
119
  drawerWidth: null,
117
120
  drawerButtonConfig: null,
118
- drawerTagConfig: null
121
+ drawerTagConfig: null,
122
+ onlyDocumentView: false
119
123
  };
120
124
  var _default = exports.default = DocumentSideDrawer;
@@ -7,5 +7,5 @@ exports.default = void 0;
7
7
  var _styledComponents = require("styled-components");
8
8
  var _templateObject;
9
9
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
10
- const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.tooltip-grid {\n display: flex;\n gap: 32px; /* Space between columns */\n}\n\n.tooltip-column {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n\n.multipleDocumentTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: max-content;\n border-radius: 12px;\n min-width: 300px;\n\n}\n .multipleDocumentTooltip .ant-tooltip-arrow:before{\n background: #fff;\n }\n .multipleDocumentTooltip li.tooltip-item{\n display: flex;\n gap: 8px;\n align-items: flex-start;\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px; \n padding: 8px 0;\n width: max-content;\n }\n .multipleDocumentTooltip ul .headingName{\n color: #717171;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px; \n letter-spacing: 0.24px;\n text-transform: uppercase;\n padding: 0 0 16px;\n }\n .multipleDocumentTooltip .flexWrap{\n display: flex;\n flex-wrap: wrap;\n column-count: 1;\n column-gap: 8px;\n list-style: none;\n justify-content: space-between;\n }\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n }\n .documentDrawer .ant-drawer-body{\n overflow: hidden;\n padding: 0;\n }\n .documentDrawer .rightContSection {\n overflow-x: auto;\n height: calc(100vh - 114px);\n }\n .documentDrawer .ant-radio-group{\n display: flex;\n white-space: nowrap;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: 348px;\n border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n background: #fff !important;\n}\n.OaFooterBtn{\n display: flex;\n justify-content: end;\n}\n.OaTooltip{\n max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: auto;\n margin: 30px 0px 0px;\n padding: 0px 8px 0 0;;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n .modalImg{\n width: 100%;\n }\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n @media only screen and (max-width: 574px) {\n .ant-steps-item-tail{\n inset-inline-start: 78px !important;\n \n }\n}\n @media only screen and (max-width: 480px) {\n .ant-steps-item-tail{\n inset-inline-start: 60px !important;\n \n }\n}\n@media only screen and (max-width: 600px) {\n \n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .ant-picker-dropdown { width: 100%; left: 0 !important; }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n\n"])));
10
+ const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.tooltip-grid {\n display: flex;\n gap: 32px;\n align-items: flex-start;\n padding: 8px 0 0;\n}\n\n.tooltip-column {\n display: flex;\n flex-direction: column;\n width: 280px;\n}\n\n\n.multipleDocumentTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: max-content;\n border-radius: 12px;\n min-width: 300px;\n\n}\n .multipleDocumentTooltip .ant-tooltip-arrow:before{\n background: #fff;\n }\n .multipleDocumentTooltip li.tooltip-item{\n display: flex;\n gap: 8px;\n align-items: flex-start;\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px; \n padding: 8px 0;\n // width: max-content;\n }\n .tooltip-item p{\n margin: 0;\n }\n .multipleDocumentTooltip ul .headingName{\n color: #717171;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px; \n letter-spacing: 0.24px;\n text-transform: uppercase;\n padding: 0 0 16px;\n }\n .multipleDocumentTooltip .flexWrap{\n display: flex;\n flex-wrap: wrap;\n column-count: 1;\n column-gap: 8px;\n list-style: none;\n justify-content: space-between;\n }\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n }\n .documentDrawer .ant-drawer-body{\n overflow: hidden;\n padding: 0;\n }\n .documentDrawer .rightContSection {\n overflow-y: scroll;\n height: calc(100vh - 114px);\n }\n .documentDrawer .ant-radio-group{\n display: flex;\n white-space: nowrap;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: 348px;\n border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n background: #fff !important;\n}\n.OaFooterBtn{\n display: flex;\n justify-content: end;\n}\n.OaTooltip{\n max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: auto;\n margin: 30px 0px 0px;\n padding: 0px 8px 0 0;;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n .modalImg{\n width: 100%;\n }\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n @media only screen and (max-width: 574px) {\n .ant-steps-item-tail{\n inset-inline-start: 78px !important;\n \n }\n}\n @media only screen and (max-width: 480px) {\n .ant-steps-item-tail{\n inset-inline-start: 60px !important;\n \n }\n}\n@media only screen and (max-width: 600px) {\n \n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .ant-picker-dropdown { width: 100%; left: 0 !important; }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n\n"])));
11
11
  var _default = exports.default = CommonStyles;
@@ -22,7 +22,7 @@ var _CustomButton = _interopRequireDefault(require("../../components/oa-componen
22
22
  var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
23
23
  var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
24
24
  var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
25
- const _excluded = ["children", "description", "docDetails", "multipleDocDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "actionRenderType", "actionContent", "systemStatus", "documentTitle", "descriptionTitle", "data-test", "form"];
25
+ const _excluded = ["children", "description", "docDetails", "multipleDocDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "actionRenderType", "actionContent", "systemStatus", "documentTitle", "descriptionTitle", "data-test", "form", "columnDynamicCssClass", "tooltipPlacement"];
26
26
  /* eslint-disable */
27
27
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
28
28
  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); }
@@ -54,7 +54,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
54
54
  * @property {string} ['data-test'] Data test string to be applied to the outermost element.
55
55
  */
56
56
  function ApprovalWidget(_ref) {
57
- var _approvalForm$disable2, _actionContent$label, _approvalForm$disable3, _approvalForm$disable4, _approvalForm$remarks, _approvalForm$disable5, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8;
57
+ var _approvalForm$disable2, _actionContent$label, _approvalForm$disable3, _approvalForm$disable4, _approvalForm$disable5, _approvalForm$remarks, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$disable10;
58
58
  let {
59
59
  children,
60
60
  description,
@@ -73,7 +73,9 @@ function ApprovalWidget(_ref) {
73
73
  documentTitle,
74
74
  descriptionTitle,
75
75
  "data-test": dataTest,
76
- form
76
+ form,
77
+ columnDynamicCssClass,
78
+ tooltipPlacement
77
79
  } = _ref,
78
80
  props = _objectWithoutProperties(_ref, _excluded);
79
81
  const getInitialValue = isApproved => {
@@ -94,11 +96,12 @@ function ApprovalWidget(_ref) {
94
96
  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
95
97
  className: "row"
96
98
  }, /*#__PURE__*/_react.default.createElement("div", {
97
- className: approvalForm.hidden ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-9 col-lg-9 gutter"
98
- }, /*#__PURE__*/_react.default.createElement("div", {
99
- className: "row"
100
- }, /*#__PURE__*/_react.default.createElement("div", {
101
- className: isQuestionStyleWidget ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-8 col-lg-8 gutter flexCol12"
99
+ className: columnDynamicCssClass === null || columnDynamicCssClass === void 0 ? void 0 : columnDynamicCssClass.firstColumn
100
+ // className={
101
+ // isQuestionStyleWidget
102
+ // ? "col-sm-12 col-md-12 col-lg-12"
103
+ // : ""
104
+ // }
102
105
  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
103
106
  className: "type-b2-400"
104
107
  }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement(_styles.Styledescription, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -125,7 +128,7 @@ function ApprovalWidget(_ref) {
125
128
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
126
129
  typography: "type-b2-400",
127
130
  color: "secondary-content"
128
- }, documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
131
+ }, documentTitle, " \xA0 \"docHeight\""), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
129
132
  disabled: (_approvalForm$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
130
133
  "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
131
134
  }, docDetails, {
@@ -140,8 +143,8 @@ function ApprovalWidget(_ref) {
140
143
  // ? "View Previous Description"
141
144
  // :
142
145
  "View History"
143
- }), children)), (systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
144
- className: "col-sm-12 col-md-4 col-lg-4 flexCol8"
146
+ }), children)), /*#__PURE__*/_react.default.createElement("div", {
147
+ className: columnDynamicCssClass === null || columnDynamicCssClass === void 0 ? void 0 : columnDynamicCssClass.secondColumn
145
148
  }, systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.map(status => {
146
149
  var _status$items;
147
150
  return /*#__PURE__*/_react.default.createElement("div", null, status.renderType === "text" && /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -150,41 +153,50 @@ function ApprovalWidget(_ref) {
150
153
  }, status.label), status.renderType === "tag" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, status)), status.renderType === "toolTip" && ((_status$items = status.items) === null || _status$items === void 0 ? void 0 : _status$items.length) > 0 && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
151
154
  overlayClassName: "multipleDocumentTooltip",
152
155
  isDisplayed: true,
156
+ placement: tooltipPlacement // Pass placement as a prop
157
+ ,
153
158
  title: (() => {
154
- const maxItemsPerColumn = 6; // Maximum 6 <li> per column
155
- const columns = [];
159
+ const totalItems = status.items.length;
160
+ const numColumns = totalItems === 1 ? 1 : 2; // 1 column if only 1 item, else 2 columns
156
161
 
157
- // Splitting items into columns of max 6 items each
158
- for (let i = 0; i < status.items.length; i += maxItemsPerColumn) {
159
- columns.push(status.items.slice(i, i + maxItemsPerColumn));
160
- }
161
- return /*#__PURE__*/_react.default.createElement("div", {
162
- className: "tooltip-grid"
163
- }, (status === null || status === void 0 ? void 0 : status.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
162
+ const col1Size = Math.ceil(totalItems / numColumns); // First column gets extra if odd
163
+ const col2Size = totalItems - col1Size; // Remaining items go to second column
164
+
165
+ const columns = [status.items.slice(0, col1Size),
166
+ // First column
167
+ status.items.slice(col1Size) // Second column
168
+ ];
169
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (status === null || status === void 0 ? void 0 : status.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
164
170
  typography: "type-sl1-700",
165
171
  color: "secondary-content"
166
- }, status.title), columns.map(columnItems => {
167
- var _columnItems$;
168
- return /*#__PURE__*/_react.default.createElement("div", {
169
- key: "col-".concat((_columnItems$ = columnItems[0]) === null || _columnItems$ === void 0 ? void 0 : _columnItems$.title),
170
- className: "tooltip-column"
171
- }, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
172
- key: item.title,
173
- className: "tooltip-item"
174
- }, item.type && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
175
- size: 20,
176
- icon: item.type === "positive" ? _Check.default : _Close.default,
177
- color: item.type === "positive" ? "positive" : "negative"
178
- }), item.title)));
179
- }));
172
+ }, status.title), /*#__PURE__*/_react.default.createElement("div", {
173
+ className: "tooltip-grid",
174
+ style: {
175
+ display: "flex",
176
+ gap: "16px",
177
+ flexDirection: totalItems === 1 ? "column" : "row",
178
+ // Make it single column if only 1 item
179
+ width: totalItems === 1 ? "100%" : "auto" // Full width if only 1 item
180
+ }
181
+ }, columns.map((columnItems, colIndex) => /*#__PURE__*/_react.default.createElement("div", {
182
+ key: "col-".concat(colIndex),
183
+ className: "tooltip-column"
184
+ }, columnItems.map(item => /*#__PURE__*/_react.default.createElement("li", {
185
+ key: item.title,
186
+ className: "tooltip-item"
187
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
188
+ size: 20,
189
+ icon: item.type === "positive" ? _Check.default : _Close.default,
190
+ color: item.type === "positive" ? "positive" : "negative"
191
+ }), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
180
192
  })()
181
193
  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
182
194
  type: "text-only",
183
195
  label: status.label
184
196
  })));
185
- })))), approvalForm.invisible && /*#__PURE__*/_react.default.createElement("div", {
186
- className: "col-sm-12 col-md-4 col-lg-4"
187
- }) || !approvalForm.hidden && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, actionRenderType === "text" && /*#__PURE__*/_react.default.createElement("div", {
197
+ })), /*#__PURE__*/_react.default.createElement("div", {
198
+ className: columnDynamicCssClass === null || columnDynamicCssClass === void 0 ? void 0 : columnDynamicCssClass.thirdColumn
199
+ }, actionRenderType === "text" && /*#__PURE__*/_react.default.createElement("div", {
188
200
  className: "oaActionText"
189
201
  }, (actionContent === null || actionContent === void 0 ? void 0 : actionContent.icon) && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
190
202
  icon: _CheckCircle.default,
@@ -192,9 +204,12 @@ function ApprovalWidget(_ref) {
192
204
  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
193
205
  typography: "type-b2-400",
194
206
  color: "secondary-content"
195
- }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : "-")), actionRenderType === "button" && /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent), actionRenderType === "radio" && /*#__PURE__*/_react.default.createElement("div", {
196
- className: "col-sm-12 col-md-4 col-lg-4"
197
- }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
207
+ }, (_actionContent$label = actionContent === null || actionContent === void 0 ? void 0 : actionContent.label) !== null && _actionContent$label !== void 0 ? _actionContent$label : "-")), actionRenderType === "button" && /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({}, actionContent, {
208
+ disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
209
+ })), actionRenderType === "radio" &&
210
+ /*#__PURE__*/
211
+ //className="col-sm-12 col-md-4 col-lg-4"
212
+ _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
198
213
  name: "isApproved-".concat(questionId),
199
214
  className: "custom-radio-group",
200
215
  initialValue: isApproved,
@@ -210,12 +225,12 @@ function ApprovalWidget(_ref) {
210
225
  value: isApproved
211
226
  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
212
227
  "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
213
- disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false,
228
+ disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false,
214
229
  label: "Mark as Approved",
215
230
  value: 1
216
231
  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
217
232
  "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
218
- disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false,
233
+ disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false,
219
234
  label: "Mark as Pending",
220
235
  value: 0
221
236
  }))), isApproved === 0 && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
@@ -231,13 +246,15 @@ function ApprovalWidget(_ref) {
231
246
  }]
232
247
  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
233
248
  "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
234
- disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false
249
+ disabled: (_approvalForm$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false
235
250
  })))), actionRenderType === "buttonWithForm" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, getFieldDecorator("validateDocumentButton#".concat(questionId), {
236
251
  rules: isMandatory ? [{
237
252
  required: true,
238
253
  message: "This field is required"
239
254
  }] : []
240
- })( /*#__PURE__*/_react.default.createElement(_CustomButton.default, actionContent))), actionRenderType === "radioWithForm" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
255
+ })( /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({}, actionContent, {
256
+ disabled: (_approvalForm$disable7 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable7 !== void 0 ? _approvalForm$disable7 : false
257
+ })))), actionRenderType === "radioWithForm" && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
241
258
  className: "custom-radio-group"
242
259
  }, getFieldDecorator("icQues_status_".concat(questionId), {
243
260
  rules: isMandatory ? [{
@@ -254,12 +271,12 @@ function ApprovalWidget(_ref) {
254
271
  "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
255
272
  label: "Mark as Approved",
256
273
  value: "Complete",
257
- disabled: (_approvalForm$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false
274
+ disabled: (_approvalForm$disable8 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable8 !== void 0 ? _approvalForm$disable8 : false
258
275
  }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
259
276
  "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
260
277
  label: "Mark as Pending",
261
278
  value: "Incomplete",
262
- disabled: (_approvalForm$disable7 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable7 !== void 0 ? _approvalForm$disable7 : false
279
+ disabled: (_approvalForm$disable9 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable9 !== void 0 ? _approvalForm$disable9 : false
263
280
  })))), form.getFieldValue("icQues_status_".concat(questionId)) == "Incomplete" && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
264
281
  className: "type-b2-400"
265
282
  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, getFieldDecorator("icQues_remarks_".concat(questionId), {
@@ -271,8 +288,8 @@ function ApprovalWidget(_ref) {
271
288
  }] : []
272
289
  })( /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
273
290
  "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
274
- disabled: (_approvalForm$disable8 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable8 !== void 0 ? _approvalForm$disable8 : false
275
- })))))) || undefined), hasDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
291
+ disabled: (_approvalForm$disable10 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable10 !== void 0 ? _approvalForm$disable10 : false
292
+ }))))))), hasDivider && /*#__PURE__*/_react.default.createElement(_antd.Divider, null));
276
293
  }
277
294
  ApprovalWidget.propTypes = {
278
295
  children: _propTypes.default.node,
@@ -315,7 +332,9 @@ ApprovalWidget.propTypes = {
315
332
  })),
316
333
  documentTitle: _propTypes.default.string,
317
334
  descriptionTitle: _propTypes.default.string,
318
- form: _propTypes.default.object
335
+ form: _propTypes.default.object,
336
+ tooltipPlacement: _propTypes.default.string,
337
+ columnDynamicCssClass: _propTypes.default.object
319
338
  };
320
339
  ApprovalWidget.defaultProps = {
321
340
  children: null,
@@ -332,6 +351,13 @@ ApprovalWidget.defaultProps = {
332
351
  systemStatus: [],
333
352
  documentTitle: "",
334
353
  descriptionTitle: "",
335
- form: null
354
+ form: null,
355
+ tooltipPlacement: "bottom",
356
+ // Default placement
357
+ columnDynamicCssClass: {
358
+ firstColumn: "col-sm-12 col-md-8 col-lg-8 gutter flexCol12",
359
+ secondColumn: "col-sm-12 col-md-4 col-lg-4 flexCol8",
360
+ thirdColumn: "col-sm-12 col-md-3 col-lg-3"
361
+ }
336
362
  };
337
363
  var _default = exports.default = ApprovalWidget;
@@ -33,7 +33,8 @@ function AddressDetails(_ref) {
33
33
  geolocationData,
34
34
  pinCodeServisible,
35
35
  editLocationHandler,
36
- onFinish
36
+ onFinish,
37
+ showAddressType
37
38
  } = _ref;
38
39
  return /*#__PURE__*/_react.default.createElement("div", {
39
40
  className: "addresBoxDiv"
@@ -49,12 +50,12 @@ function AddressDetails(_ref) {
49
50
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
50
51
  className: "type-b3-400",
51
52
  color: "secondary-content"
52
- }, (_geolocationData$addr2 = geolocationData.addressLine2) === null || _geolocationData$addr2 === void 0 ? void 0 : _geolocationData$addr2.secondaryAddress, (_geolocationData$addr3 = geolocationData.addressLine2) !== null && _geolocationData$addr3 !== void 0 && (_geolocationData$addr3 = _geolocationData$addr3.mainAddress) !== null && _geolocationData$addr3 !== void 0 && _geolocationData$addr3.includes(geolocationData.pincode) || (_geolocationData$addr4 = geolocationData.addressLine2) !== null && _geolocationData$addr4 !== void 0 && (_geolocationData$addr4 = _geolocationData$addr4.secondaryAddress) !== null && _geolocationData$addr4 !== void 0 && _geolocationData$addr4.includes(geolocationData.pincode) ? '' : ", ".concat(geolocationData.pincode)))), pinCodeServisible && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
53
+ }, (_geolocationData$addr2 = geolocationData.addressLine2) === null || _geolocationData$addr2 === void 0 ? void 0 : _geolocationData$addr2.secondaryAddress, (_geolocationData$addr3 = geolocationData.addressLine2) !== null && _geolocationData$addr3 !== void 0 && (_geolocationData$addr3 = _geolocationData$addr3.mainAddress) !== null && _geolocationData$addr3 !== void 0 && _geolocationData$addr3.includes(geolocationData.pincode) || (_geolocationData$addr4 = geolocationData.addressLine2) !== null && _geolocationData$addr4 !== void 0 && (_geolocationData$addr4 = _geolocationData$addr4.secondaryAddress) !== null && _geolocationData$addr4 !== void 0 && _geolocationData$addr4.includes(geolocationData.pincode) ? "" : ", ".concat(geolocationData.pincode)))), pinCodeServisible && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
53
54
  iconConfig: {
54
55
  icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
55
56
  icon: _EditOutlined.default
56
57
  }),
57
- position: 'left'
58
+ position: "left"
58
59
  },
59
60
  size: "small",
60
61
  label: "Edit location",
@@ -62,7 +63,8 @@ function AddressDetails(_ref) {
62
63
  onClick: editLocationHandler
63
64
  })), pinCodeServisible ? /*#__PURE__*/_react.default.createElement(_AddressForm.default, {
64
65
  geolocationData: geolocationData,
65
- onFinish: onFinish
66
+ onFinish: onFinish,
67
+ showAddressType: showAddressType
66
68
  }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
67
69
  color: "negative"
68
70
  }, "Pincode according to your pin on map is Non-serviceable, please move the pin to serviceable pincode."));
@@ -10,6 +10,7 @@ var _antd = require("antd");
10
10
  var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
11
11
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
12
12
  var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
13
+ var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
13
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
15
  /* eslint-disable */
15
16
 
@@ -28,7 +29,8 @@ function AddressForm(props) {
28
29
  const [form] = _antd.Form.useForm();
29
30
  const {
30
31
  geolocationData,
31
- onFinish
32
+ onFinish,
33
+ showAddressType
32
34
  } = props;
33
35
  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
34
36
  form: form,
@@ -51,7 +53,7 @@ function AddressForm(props) {
51
53
  name: "houseNo",
52
54
  rules: [{
53
55
  required: true,
54
- message: 'Please input your House no. / Flat / Floor!'
56
+ message: "Please input your House no. / Flat / Floor!"
55
57
  }]
56
58
  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
57
59
  placeholder: "Type here",
@@ -67,7 +69,28 @@ function AddressForm(props) {
67
69
  name: "landmark"
68
70
  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
69
71
  placeholder: "Type here"
70
- })))), /*#__PURE__*/_react.default.createElement("div", {
72
+ })))), showAddressType && /*#__PURE__*/_react.default.createElement("div", {
73
+ className: "margin-top-12"
74
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
75
+ color: "primary-content",
76
+ className: "type-b2-400"
77
+ }, "Address Type", /*#__PURE__*/_react.default.createElement(_Typography.default, {
78
+ color: "negative"
79
+ }, "*")), /*#__PURE__*/_react.default.createElement("div", {
80
+ className: "margin-top-4"
81
+ }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
82
+ name: "addressType",
83
+ rules: [{
84
+ required: true,
85
+ message: "Please select Address Type"
86
+ }]
87
+ }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, null, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
88
+ value: "RESIDENTIAL",
89
+ label: "Residential"
90
+ }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
91
+ value: "COMMERCIAL",
92
+ label: "Commercial"
93
+ }))))), /*#__PURE__*/_react.default.createElement("div", {
71
94
  className: "buttonBottom margin-top-24"
72
95
  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
73
96
  type: "primary",
@@ -44,7 +44,8 @@ function MapBaseLocation(_ref) {
44
44
  form,
45
45
  onFinish,
46
46
  openLocationNotDetectedModal,
47
- setOpenLocationNotDetectedModalState
47
+ setOpenLocationNotDetectedModalState,
48
+ showAddressType
48
49
  } = _ref;
49
50
  return /*#__PURE__*/_react.default.createElement(_styles.MapStyles, null, /*#__PURE__*/_react.default.createElement("div", {
50
51
  className: "containerMap"
@@ -58,7 +59,7 @@ function MapBaseLocation(_ref) {
58
59
  googleMapURL: googleMapURL,
59
60
  loadingElement: /*#__PURE__*/_react.default.createElement("div", {
60
61
  style: {
61
- height: '100%'
62
+ height: "100%"
62
63
  }
63
64
  }),
64
65
  containerElement: /*#__PURE__*/_react.default.createElement("div", {
@@ -66,7 +67,7 @@ function MapBaseLocation(_ref) {
66
67
  }),
67
68
  mapElement: /*#__PURE__*/_react.default.createElement("div", {
68
69
  style: {
69
- height: '100%'
70
+ height: "100%"
70
71
  }
71
72
  }),
72
73
  googleMapRef: googleMapRef,
@@ -74,6 +75,7 @@ function MapBaseLocation(_ref) {
74
75
  fetchAddressFromGoogleApi: fetchAddressFromGoogleApi,
75
76
  setOpenLocationNotDetectedModal: setOpenLocationNotDetectedModal
76
77
  }), /*#__PURE__*/_react.default.createElement(_AddressDetails.default, {
78
+ showAddressType: showAddressType,
77
79
  geolocationData: geolocationData,
78
80
  pinCodeServisible: pinCodeServisible,
79
81
  editLocationHandler: editLocationHandler,
@@ -78,7 +78,9 @@ function GenericUpload(_ref) {
78
78
  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, _extends({}, config.systemInfo, {
79
79
  iconConfig: {
80
80
  icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
81
- icon: _Info.default
81
+ icon: _Info.default,
82
+ size: 24,
83
+ color: "negative"
82
84
  }),
83
85
  position: 'left'
84
86
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.76",
3
+ "version": "1.0.1-stage.78",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",