oa-componentbook 1.0.1-stage.375 → 1.0.1-stage.377

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.
Files changed (10) hide show
  1. package/build/components/oa-component-table/CustomTableV1.js +22 -12
  2. package/build/components/oa-component-table/stylesV1.js +1 -1
  3. package/build/layout/EntityOverviewLayout/styles.js +1 -1
  4. package/build/layout/GenricLayOut/GenricLayOut.js +6 -3
  5. package/build/layout/GenricLayOut/styles.js +1 -1
  6. package/build/widgets/oa-widget-approval/ApprovalWidget.js +18 -11
  7. package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js +19 -10
  8. package/build/widgets/oa-widget-sidebar/SidebarWidget.js +25 -7
  9. package/build/widgets/oa-widget-sidebar/styles.js +4 -3
  10. package/package.json +1 -1
package/build/components/oa-component-table/CustomTableV1.js CHANGED
@@ -256,15 +256,22 @@ function CustomTableV1(_ref) {
256
256
  // Handle Data columns with ellipsisConfig and multiItemConfig
257
257
  let effectiveEllipsisConfig = ellipsisConfig;
258
258
  let effectiveMultiItemConfig = multiItemConfig;
259
- if (colEllipsisConfig && colEllipsisConfig.enabled) {
260
- effectiveEllipsisConfig = colEllipsisConfig;
261
- effectiveMultiItemConfig = _objectSpread(_objectSpread({}, multiItemConfig), {}, {
262
- enabled: false
263
- });
264
- }
265
- if (colMultiItemConfig && colMultiItemConfig.enabled) {
266
- effectiveMultiItemConfig = colMultiItemConfig;
267
- effectiveEllipsisConfig = _objectSpread(_objectSpread({}, ellipsisConfig), {}, {
259
+ if (!cardShow) {
260
+ if (colEllipsisConfig && colEllipsisConfig.enabled) {
261
+ effectiveEllipsisConfig = colEllipsisConfig;
262
+ effectiveMultiItemConfig = _objectSpread(_objectSpread({}, multiItemConfig), {}, {
263
+ enabled: false
264
+ });
265
+ }
266
+ if (colMultiItemConfig && colMultiItemConfig.enabled) {
267
+ effectiveMultiItemConfig = colMultiItemConfig;
268
+ effectiveEllipsisConfig = _objectSpread(_objectSpread({}, effectiveEllipsisConfig), {}, {
269
+ enabled: false
270
+ });
271
+ }
272
+ } else {
273
+ // In cardShow mode -> ellipsis off
274
+ effectiveEllipsisConfig = _objectSpread(_objectSpread({}, effectiveEllipsisConfig), {}, {
268
275
  enabled: false
269
276
  });
270
277
  }
@@ -306,7 +313,9 @@ function CustomTableV1(_ref) {
306
313
  }
307
314
 
308
315
  // Ellipsis popover
309
- if (effectiveEllipsisConfig.enabled && (0, _utils.isString)(value) && value.length > effectiveEllipsisConfig.limit) {
316
+ if (effectiveEllipsisConfig.enabled && !cardShow &&
317
+ // Completely disable ellipsis for mobile card view
318
+ (0, _utils.isString)(value) && value.length > effectiveEllipsisConfig.limit) {
310
319
  const truncated = "".concat(value.slice(0, effectiveEllipsisConfig.limit), "...");
311
320
  const popText = /*#__PURE__*/_react.default.createElement(_Typography.default, {
312
321
  typography: "type-b2-400",
@@ -356,7 +365,7 @@ function CustomTableV1(_ref) {
356
365
 
357
366
  // Returning processed columns in the same order as initial `columns` array
358
367
  return processedColumns;
359
- }, [columns, setConfig, ellipsisConfig, multiItemConfig, selectedRows]);
368
+ }, [columns, setConfig, ellipsisConfig, multiItemConfig, selectedRows, cardShow]);
360
369
  const tableStyle = {
361
370
  borderTop: "1px solid var(--color-divider)",
362
371
  overflow: "hidden",
@@ -453,7 +462,8 @@ function CustomTableV1(_ref) {
453
462
  onClick: () => handleViewMore(rowIndex)
454
463
  })), ctaColumnsSorted.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
455
464
  className: "footerCta"
456
- }, ctaColumnsSorted.filter(col => col.isCTA).map(col => /*#__PURE__*/_react.default.createElement("div", {
465
+ }, ctaColumnsSorted.filter(col => col.isCTA && col !== finalColumns[0]) // Exclude first column from footer
466
+ .map(col => /*#__PURE__*/_react.default.createElement("div", {
457
467
  key: col.key || col.dataIndex,
458
468
  style: {
459
469
  display: "flex",
package/build/components/oa-component-table/stylesV1.js CHANGED
@@ -16,4 +16,4 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
16
16
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
17
17
  const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu\xA0{padding: 0; top: 0;}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {border-radius: 0; padding: 12px !important;}\n.ant-dropdown .ant-table-filter-dropdown {border-radius: 8px;background: #FFF;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n.ant-dropdown .ant-table-filter-dropdown .ant-table-filter-dropdown-btns {padding: 12px; border: none;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link, .ant-dropdown .ant-table-filter-dropdown .ant-btn-primary {border-radius: 4px; min-width: 100px; padding: 7px 16px;\n border: 1px solid #014FC5; height: auto;text-align: center;font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px; }\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link {color: #014FC5; background: #fff;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-primary {background: #014FC5; color: #fff;}\n.ant-checkbox .ant-checkbox-inner {width: 18px; height: 18px; border: 1px solid #717171; border-radius: 2px;}\n.ant-checkbox-checked .ant-checkbox-inner {background-color: #014FC5; border-color: #014FC5;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-primary:hover {background:#82a9e2; border: 1px solid #82a9e2;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link:hover {border: 1px solid #82a9e2; color: #82a9e2;}\n.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {background: #DEF1FB;}\n.ant-table-wrapper .ant-table-pagination.ant-pagination {\n padding: 16px; margin: 0;\n border-top: solid 1px #E0E0E0;\n}\n\n"])));
18
18
  const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td {\n border: none;\n }\n .ant-table-row .ant-table-cell,\n .ant-table-thead .ant-table-cell {\n padding: 16px !important;\n }\n .ant-table-measure-row > td {\n padding: 0 !important;\n }\n"])));
19
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\n .fullWidthBtn button {\n width: 100%;\n }\n .fullWidthBtn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 16px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n .secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n .cardStyles {\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n margin: 0 0 24px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .showHideBtn {\n padding: 8px 0 16px;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong,\n .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n\n .srDetails span {\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n }\n\n .srDetails > span > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .srDetails > span > .type-sl1-700 {\n font-size: initial;\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 0 0 0;\n border-top: 1px solid var(--color-divider);\n width: 100%;\n align-items: center;\n }\n\n .footerCta .ant-dropdown-trigger {\n margin-bottom: 0;\n }\n\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\n }\n\n @media only screen and (max-width: 600px) {\n .keyValue span {\n word-break: break-word;\n overflow-wrap: break-word;\n}\n.mobileViewPagination{display: flex;\n justify-content: flex-end;\n margin: 16px 0px;}\n\n.mobileViewPagination .ant-pagination {\n padding: 0;\n}\n\n\n}\n\n"])));
19
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .fullWidthBtn button {\n width: 100%;\n }\n .fullWidthBtn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 16px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n .secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n .cardStyles {\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n margin: 0 0 24px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .showHideBtn {\n padding: 8px 0 16px;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong,\n .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n\n .srDetails span {\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n }\n\n .srDetails > span > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .srDetails > span > .type-sl1-700 {\n font-size: initial;\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 0 0 0;\n border-top: 1px solid var(--color-divider);\n width: 100%;\n align-items: center;\n }\n\n .footerCta .ant-dropdown-trigger {\n margin-bottom: 0;\n }\n\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\n }\n\n @media only screen and (max-width: 600px) {\n .keyValue span {\n word-break: break-word;\n overflow-wrap: break-word;\n }\n .keyValue strong {\n word-break: break-word;\n overflow-wrap: break-word;\n }\n .mobileViewPagination {\n display: flex;\n justify-content: flex-end;\n margin: 16px 0px;\n }\n\n .mobileViewPagination .ant-pagination {\n padding: 0;\n }\n }\n"])));
package/build/layout/EntityOverviewLayout/styles.js CHANGED
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject, _templateObject2, _templateObject3;
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 ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .fullPageLayout {\n display: flex;\n min-height: 100vh;\n background: #fafafa;\n }\n\n .oaRightLayouts {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .oaTopHeaderAndBtnSec {\n background: #ffffff;\n border-bottom: 1px solid #e8e8e8;\n padding: 20px 24px;\n\n .headerContent {\n margin-left: 160px;\n display: flex;\n align-items: center;\n gap: 16px;\n\n .pageTitle {\n margin: 0;\n }\n\n .backButton {\n border-radius: 50%;\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-secondary-background);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n }\n }\n\n .profileContent {\n flex: 1;\n padding: 0;\n overflow-y: auto;\n background: #ffffff;\n }\n\n .accordionsContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n padding: 0 24px;\n\n .accordion-item {\n width: 100%;\n max-width: 600px;\n background: var(--color-secondary-background);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\n .accordion-content {\n padding: 20px;\n\n .key-value-section {\n margin-bottom: 20px;\n }\n\n .action-buttons-section {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--color-border);\n }\n\n .custom-content {\n margin-top: 16px;\n }\n }\n }\n }\n\n @media (max-width: 768px) {\n .oaTopHeaderAndBtnSec {\n padding: 12px 16px;\n\n .headerContent {\n gap: 12px;\n }\n }\n\n .profileContent {\n padding: 16px;\n }\n\n .accordionsContainer {\n padding: 0 16px;\n\n .accordion-item {\n max-width: 100%;\n\n .accordion-content {\n padding: 16px;\n\n .action-buttons-section {\n flex-direction: column;\n align-items: stretch;\n }\n }\n }\n }\n }\n"])));
11
+ const ProfilePageStyle = exports.ProfilePageStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .fullPageLayout {\n display: flex;\n min-height: 100vh;\n background: #fafafa;\n }\n\n .oaRightLayouts {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n .oaTopHeaderAndBtnSec {\n background: #ffffff;\n border-bottom: 1px solid #e8e8e8;\n padding: 20px 24px;\n\n .headerContent {\n margin-left: 160px;\n display: flex;\n align-items: center;\n gap: 16px;\n\n .pageTitle {\n margin: 0;\n }\n\n .backButton {\n border-radius: 50%;\n width: 48px; /* Default desktop size */\n height: 48px; /* Default desktop size */\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-secondary-background);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition: all 0.2s ease;\n }\n }\n }\n\n .profileContent {\n flex: 1;\n padding: 0;\n overflow-y: auto;\n background: #ffffff;\n }\n\n .accordionsContainer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 16px;\n padding: 0 24px;\n\n .accordion-item {\n width: 100%;\n max-width: 600px;\n background: var(--color-secondary-background);\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n\n .accordion-content {\n padding: 20px;\n\n .key-value-section {\n margin-bottom: 20px;\n }\n\n .action-buttons-section {\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--color-border);\n }\n\n .custom-content {\n margin-top: 16px;\n }\n }\n }\n }\n\n @media (max-width: 768px) {\n .oaTopHeaderAndBtnSec {\n padding: 12px 16px;\n\n .headerContent {\n margin-left: 0; /* Remove left margin for mobile */\n gap: 12px;\n justify-content: flex-start; /* Align content to left */\n }\n }\n\n .oaTopHeaderAndBtnSec .headerContent .backButton {\n width: 40px !important; /* Mobile size with higher specificity */\n height: 40px !important; /* Mobile size with higher specificity */\n }\n\n .oaTopHeaderAndBtnSec .headerContent .backButton .MuiSvgIcon-root {\n font-size: 20px !important; /* Mobile icon size for Material-UI icons */\n }\n\n .profileContent {\n padding: 16px;\n }\n\n .accordionsContainer {\n padding: 0 16px;\n\n .accordion-item {\n max-width: 100%;\n\n .accordion-content {\n padding: 16px;\n\n .action-buttons-section {\n flex-direction: column;\n align-items: stretch;\n }\n }\n }\n }\n }\n"])));
12
12
  const DrawerWithOutFooter = exports.DrawerWithOutFooter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-drawer-footer {\n display: none !important;\n }\n"])));
13
13
  const DrawerContent = exports.DrawerContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 24px;\n\n .drawerTitle {\n margin-bottom: 24px;\n }\n\n .drawerDescription {\n margin-top: 24px;\n }\n"])));
package/build/layout/GenricLayOut/GenricLayOut.js CHANGED
@@ -52,7 +52,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
52
52
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
53
53
  function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable */
54
54
  function GenricLayOut(_ref) {
55
- var _state$misc22, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _state$customDrawer3, _state$customDrawer4, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables4, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination17, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
55
+ var _state$misc22, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _state$customDrawer3, _state$customDrawer4, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables4, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination17, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
56
56
  let {
57
57
  config,
58
58
  getInitialData,
@@ -2038,7 +2038,8 @@ function GenricLayOut(_ref) {
2038
2038
  width: 300
2039
2039
  }
2040
2040
  }, /*#__PURE__*/_react.default.createElement(_SidebarWidget.default, _extends({}, sidebar, {
2041
- handleFooterClick: handleFooterClick
2041
+ handleFooterClick: handleFooterClick,
2042
+ profileData: profileData
2042
2043
  }))), /*#__PURE__*/_react.default.createElement("div", {
2043
2044
  className: "oaRightLayouts"
2044
2045
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -2052,12 +2053,14 @@ function GenricLayOut(_ref) {
2052
2053
  handleSubHeadingSelect: handleSubHeadingSelect
2053
2054
  }))), /*#__PURE__*/_react.default.createElement("div", {
2054
2055
  className: "headerRight"
2056
+ }, /*#__PURE__*/_react.default.createElement("div", {
2057
+ className: (sidebar === null || sidebar === void 0 || (_sidebar$mobileMenuIt = sidebar.mobileMenuItems) === null || _sidebar$mobileMenuIt === void 0 || (_sidebar$mobileMenuIt = _sidebar$mobileMenuIt.items) === null || _sidebar$mobileMenuIt === void 0 ? void 0 : _sidebar$mobileMenuIt.length) > 0 ? 'hideProfileOnMobile' : ''
2055
2058
  }, /*#__PURE__*/_react.default.createElement(_ProfileSection.default, {
2056
2059
  profileData: profileData,
2057
2060
  onProfileClick: () => {
2058
2061
  handleProfileReroute();
2059
2062
  }
2060
- })))), /*#__PURE__*/_react.default.createElement("div", {
2063
+ }))))), /*#__PURE__*/_react.default.createElement("div", {
2061
2064
  className: "layoutHeadingAndSearch"
2062
2065
  }, (imageViewer === null || imageViewer === void 0 ? void 0 : imageViewer.visible) && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
2063
2066
  open: true,
package/build/layout/GenricLayOut/styles.js CHANGED
@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
16
16
  const DrawerWithOutFooter = exports.DrawerWithOutFooter = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.hubAutomationContainer .fullPageLayout {padding: 0 !important; background: #fff !important;}\n.hubAutomationContainer .fullPageLayout .oaRightLayouts{\n max-width: 1154px;\n margin: 24px auto;\n padding: 0 16px;\n box-shadow: none;}\n.oaDrawer div + div.ant-drawer-body{padding-bottom:100px !important;}\n\n.ant-checkbox-indeterminate .ant-checkbox-inner:after {\n background-color: #014fc5;\n}\n\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::before {display:none;}\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::after{ content: \"*\"; color: #DE350B; visibility: visible !important;}\n\n\n.cstUplaodWithFullWidth{margin-bottom:24px;}\n.cstUplaodWithFullWidth:last-child{margin-bottom:0;}\n.cstUplaodWithFullWidth .uploadDiv{width:100%;}\n.cstUplaodWithFullWidth .uploadDiv .ant-upload-list-item-container, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper .ant-upload-list-picture-card .ant-upload-select, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {\n width: 100%; \n height: 120px;\n}\n\n\n\n\n.oaDrawer .ant-form-item .ant-form-item-explain-error {\n color: #DE350B;\n font-size: 12px;\n margin: 4px 0 0 0;\n}\n.bottomSelectedSecion{background: #F6F6F6; padding: 16px 36px; position: fixed; bottom: 0; left: 0; right: 0;\nbox-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n display: flex; z-index: 2;\n align-items: center;\n justify-content: end;\n gap: 24px;}\n\n\n\n.listOfItems{ border-radius: 12px;\n border: 1px solid #E0E0E0;\n padding: 24px;\n margin: 24px 0 0 0;}\n modalSubheading{\n padding: 24px;\n margin: 24px 0 0 0;}\n\n.listOfItemsWithoutBorder{\n padding: 24px 0;\n margin: 24px 0 0 0;}\n\n modalSubheading{\n padding: 24px;\n margin: 24px 0 0 0;}\n\n\n\n\n.modalIconAndTextBox{display:flex; flex-direction:row; align-items: center; margin: 0 0 16px 0; gap:4px;}\n"])));
17
17
  const FormWidgetStyle = exports.FormWidgetStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .formBottomAction {\n position: absolute;\n bottom: 0px;\n background-color: rgb(249, 249, 249);\n box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8px;\n padding: 16px;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n z-index: 10;\n left: 0;\n right: 0;\n }\n\n .formBottomAction .ant-form-item {\n margin-bottom: 0px;\n }\n\n .searchErrorMsg {\n font-size: 12px;\n }\n .searchErrorMsg {\n font-size: 12px;\n }\n"])));
18
18
  const TableDataStyle = exports.TableDataStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .tableContainerList th,\n button {\n white-space: nowrap;\n }\n .tableContainerList th,\n button {\n white-space: nowrap;\n }\n"])));
19
- const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .oaTopHeaderAndBtnSec {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .headerContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .headerLeft {\n flex: 1;\n }\n\n .headerRight {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n }\n }\n\n .fullPageLayout {\n display: flex;\n padding: 8px;\n background: #f6f6f6;\n }\n .ant-pagination {\n padding: 0 16px;\n justify-content: end;\n }\n .layoutHeadingPage {\n display: flex;\n gap: 8px;\n margin: 0 0 32px 0;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n .topHadingWithIcon span {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n }\n\n .subHadingText {\n margin: 0 0 0 36px;\n }\n\n .subHading1Text {\n margin: 0 0 0 40px;\n }\n\n .marginNone {\n margin: 0 !important;\n }\n\n .subHadingText > span {\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n }\n\n .oaRightLayouts {\n width: 100%;\n min-height: calc(100vh - 16px);\n padding: 76px 48px;\n overflow-y: auto;\n border-radius: 16px;\n background: #fff;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .oaheaderSearchAndFilter {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 16px 0;\n gap: 16px;\n }\n\n .oaRightLayouts .iconAndTextSecBox {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n .inLine {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n .customeSelectDropdown {\n margin: 4px 0 0 8px;\n }\n\n .cardData {\n padding: 28px 0 48px 0;\n }\n\n .ant-carousel .slick-dots {\n position: static;\n margin: 20px auto 12px 0;\n }\n .ant-carousel .slick-dots li {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li button {\n width: 8px;\n height: 8px;\n background: #cacaca;\n border-radius: 50%;\n opacity: 0.5;\n }\n .ant-carousel .slick-dots li.slick-active {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li.slick-active button {\n width: 8px;\n height: 8px;\n opacity: 1;\n }\n .ant-carousel .slick-dots li::after {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 1;\n background: #717171;\n }\n\n .oaTabs .ant-tabs-nav {\n border-top: 1px solid #e0e0e0;\n border-left: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n padding: 12px 22px 0 22px;\n margin: 0 0 8px 0;\n background: #fff;\n border-radius: 4px 4px 0 0;\n }\n .ant-card-body {\n padding: 24px 16px !important;\n border-radius: 16px;\n background: #f6f6f6;\n }\n .cardContainer {\n display: flex;\n gap: 24px;\n }\n .selectAndSearch .noClear {\n border-radius: 0 4px 4px 0;\n width: 320px;\n }\n\n .searchErrorMsg {\n font-size: 12px;\n margin: 4px 0px 0px;\n color: #de350b;\n }\n .searchOnly {\n margin: 0px 0px 16px;\n position: relative;\n }\n .searchOnly .ant-input-affix-wrapper {\n border-radius: 4px;\n max-width: 420px;\n padding-left: 44px;\n }\n .searchOnly .cstSearchIcon {\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 2;\n }\n\n .selectAndSearch .ant-input-affix-wrapper {\n border-radius: 0 4px 4px 0;\n width: 320px;\n }\n\n .selectAndSearch {\n flex-shrink: 0;\n }\n\n .customeSelectDropdown .ant-select-selector {\n border: none;\n padding: 0;\n }\n .customeSelectDropdown .ant-select-selection-item > span {\n font-size: 24px;\n font-weight: 500;\n line-height: 32px;\n }\n\n .customeSelectDropdown .ant-select {\n margin: 0 0 0 32px;\n }\n\n .customeSelectDropdown .ant-select .ant-select-arrow {\n color: #014fc5;\n inset-inline-end: -6px;\n }\n\n .customeSelectDropdown .ant-select-selector {\n box-shadow: none !important;\n }\n .oaheaderButtons {\n display: flex;\n gap: 24px;\n align-items: center;\n position: relative;\n flex-grow: 1;\n justify-content: space-between;\n }\n\n .oaheaderButtons.single-child {\n justify-content: flex-end;\n }\n\n .oaheaderButtonsRight {\n display: flex;\n flex-direction: row;\n gap: 16px;\n }\n\n .oaheaderButtons .notifyDot {\n width: 12px;\n height: 12px;\n background: #de350b;\n position: absolute;\n top: -4px;\n right: -4px;\n border-radius: 50%;\n }\n\n @media only screen and (max-width: 600px) {\n .selectAndSearch .ant-input-affix-wrapper {\n width: calc(100% - 84px);\n }\n .oaheaderSearchAndFilter .dropDownSearchContainer {\n width: 100%;\n }\n\n .oaheaderSearchAndFilter {\n align-items: flex-end;\n flex-direction: column;\n gap: 16px;\n }\n\n .inLine {\n flex-direction: column;\n gap: 0;\n align-items: flex-start;\n }\n\n .subHadingText > span {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .fullPageLayout {\n flex-direction: column;\n padding: 0;\n }\n .oaRightLayouts {\n padding: 16px;\n border-radius: 0;\n background: #fff;\n box-shadow: none;\n height: auto;\n background: #f6f6f6;\n }\n .oaTabs .ant-tabs-nav {\n margin: 0 0 28px 0;\n padding: 12px 0 0 0;\n }\n .layoutHeadingPage {\n margin: 0 0 16px 0;\n background: #fff;\n padding: 16px;\n border-radius: 8px;\n width: 100%;\n }\n .layoutHeadingAndSearch {\n background: #fff;\n padding: 20px 16px;\n margin: 0;\n width: 100%;\n border-radius: 8px;\n }\n }\n"])));
19
+ const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .oaTopHeaderAndBtnSec {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n .headerContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n\n .headerLeft {\n flex: 1;\n }\n\n .headerRight {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n }\n }\n\n .fullPageLayout {\n display: flex;\n padding: 8px;\n background: #f6f6f6;\n }\n .ant-pagination {\n padding: 0 16px;\n justify-content: end;\n }\n .layoutHeadingPage {\n display: flex;\n gap: 8px;\n margin: 0 0 32px 0;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n .topHadingWithIcon span {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n }\n\n .subHadingText {\n margin: 0 0 0 36px;\n }\n\n .subHading1Text {\n margin: 0 0 0 40px;\n }\n\n .marginNone {\n margin: 0 !important;\n }\n\n .subHadingText > span {\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n }\n\n .oaRightLayouts {\n width: 100%;\n min-height: calc(100vh - 16px);\n padding: 76px 48px;\n overflow-y: auto;\n border-radius: 16px;\n background: #fff;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .oaheaderSearchAndFilter {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 16px 0;\n gap: 16px;\n }\n\n .oaRightLayouts .iconAndTextSecBox {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n .inLine {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n .customeSelectDropdown {\n margin: 4px 0 0 8px;\n }\n\n .cardData {\n padding: 28px 0 48px 0;\n }\n\n .ant-carousel .slick-dots {\n position: static;\n margin: 20px auto 12px 0;\n }\n .ant-carousel .slick-dots li {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li button {\n width: 8px;\n height: 8px;\n background: #cacaca;\n border-radius: 50%;\n opacity: 0.5;\n }\n .ant-carousel .slick-dots li.slick-active {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li.slick-active button {\n width: 8px;\n height: 8px;\n opacity: 1;\n }\n .ant-carousel .slick-dots li::after {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 1;\n background: #717171;\n }\n\n .oaTabs .ant-tabs-nav {\n border-top: 1px solid #e0e0e0;\n border-left: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n padding: 12px 22px 0 22px;\n margin: 0 0 8px 0;\n background: #fff;\n border-radius: 4px 4px 0 0;\n }\n .ant-card-body {\n padding: 24px 16px !important;\n border-radius: 16px;\n background: #f6f6f6;\n }\n .cardContainer {\n display: flex;\n gap: 24px;\n }\n .selectAndSearch .noClear {\n border-radius: 0 4px 4px 0;\n width: 320px;\n }\n\n .searchErrorMsg {\n font-size: 12px;\n margin: 4px 0px 0px;\n color: #de350b;\n }\n .searchOnly {\n margin: 0px 0px 16px;\n position: relative;\n }\n .searchOnly .ant-input-affix-wrapper {\n border-radius: 4px;\n max-width: 420px;\n padding-left: 44px;\n }\n .searchOnly .cstSearchIcon {\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 2;\n }\n\n .selectAndSearch .ant-input-affix-wrapper {\n border-radius: 0 4px 4px 0;\n width: 320px;\n }\n\n .selectAndSearch {\n flex-shrink: 0;\n }\n\n .customeSelectDropdown .ant-select-selector {\n border: none;\n padding: 0;\n }\n .customeSelectDropdown .ant-select-selection-item > span {\n font-size: 24px;\n font-weight: 500;\n line-height: 32px;\n }\n\n .customeSelectDropdown .ant-select {\n margin: 0 0 0 32px;\n }\n\n .customeSelectDropdown .ant-select .ant-select-arrow {\n color: #014fc5;\n inset-inline-end: -6px;\n }\n\n .customeSelectDropdown .ant-select-selector {\n box-shadow: none !important;\n }\n .oaheaderButtons {\n display: flex;\n gap: 24px;\n align-items: center;\n position: relative;\n flex-grow: 1;\n justify-content: space-between;\n }\n\n .oaheaderButtons.single-child {\n justify-content: flex-end;\n }\n\n .oaheaderButtonsRight {\n display: flex;\n flex-direction: row;\n gap: 16px;\n }\n\n .oaheaderButtons .notifyDot {\n width: 12px;\n height: 12px;\n background: #de350b;\n position: absolute;\n top: -4px;\n right: -4px;\n border-radius: 50%;\n }\n\n @media only screen and (max-width: 600px) {\n .selectAndSearch .ant-input-affix-wrapper {\n width: calc(100% - 84px);\n }\n .oaheaderSearchAndFilter .dropDownSearchContainer {\n width: 100%;\n }\n\n .oaheaderSearchAndFilter {\n align-items: flex-end;\n flex-direction: column;\n gap: 16px;\n }\n\n .inLine {\n flex-direction: column;\n gap: 0;\n align-items: flex-start;\n }\n\n .subHadingText > span {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .fullPageLayout {\n flex-direction: column;\n padding: 0;\n }\n .oaRightLayouts {\n padding: 16px;\n border-radius: 0;\n background: #fff;\n box-shadow: none;\n height: auto;\n background: #f6f6f6;\n }\n .oaTabs .ant-tabs-nav {\n margin: 0 0 28px 0;\n padding: 12px 0 0 0;\n }\n .layoutHeadingPage {\n margin: 0 0 16px 0;\n background: #fff;\n padding: 16px;\n border-radius: 8px;\n width: 100%;\n }\n .layoutHeadingAndSearch {\n background: #fff;\n padding: 20px 16px;\n margin: 0;\n width: 100%;\n border-radius: 8px;\n }\n \n /* Hide profile section on mobile when sidebar has profile icon */\n .hideProfileOnMobile {\n display: none !important;\n }\n }\n"])));
20
20
  const ListofDamageParts = exports.ListofDamageParts = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ul.damagedParts {\n display: flex;\n flex-direction: column;\n margin: 8px 0 0 16px;\n list-style-type: disc;\n }\n ul.damagedParts li {\n padding: 4px 0;\n width: 100%;\n }\n ul.damagedParts li::marker {\n color: #717171;\n font-size: 20px;\n }\n"])));
21
21
  const IncidentListParts = exports.IncidentListParts = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .qaSec dl {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n }\n .qaSec dl dt {\n display: flex;\n flex-direction: column;\n margin: 16px 0 0 0;\n }\n .qaSec dl dt:first-child {\n margin-top: 8px;\n }\n"])));
22
22
  const ProfileSectionContainer = exports.ProfileSectionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-left: auto;\n\n .profile-icon-container {\n position: relative;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])));
package/build/widgets/oa-widget-approval/ApprovalWidget.js CHANGED
@@ -16,7 +16,7 @@ var _styles = require("./styles");
16
16
  var _CustomRadio = _interopRequireDefault(require("../../components/oa-component-radio/CustomRadio"));
17
17
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
18
18
  var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
19
- const _excluded = ["children", "description", "docDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "data-test"];
19
+ const _excluded = ["children", "description", "docDetails", "approvalForm", "isMandatory", "hasDivider", "isQuestionStyleWidget", "questionId", "title", "viewOnClick", "data-test", "maxLength"];
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
  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
22
  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; }
@@ -59,9 +59,11 @@ function ApprovalWidget(_ref) {
59
59
  questionId,
60
60
  title,
61
61
  viewOnClick,
62
- 'data-test': dataTest
62
+ "data-test": dataTest,
63
+ maxLength
63
64
  } = _ref,
64
65
  props = _objectWithoutProperties(_ref, _excluded);
66
+ console.log(maxLength, "maxLength2");
65
67
  const getInitialValue = isApproved => {
66
68
  switch (isApproved) {
67
69
  case true:
@@ -77,11 +79,11 @@ function ApprovalWidget(_ref) {
77
79
  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
78
80
  className: "row"
79
81
  }, /*#__PURE__*/_react.default.createElement("div", {
80
- className: approvalForm.hidden ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-7 col-lg-7 gutter'
82
+ className: approvalForm.hidden ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-7 col-lg-7 gutter"
81
83
  }, /*#__PURE__*/_react.default.createElement("div", {
82
84
  className: "row"
83
85
  }, /*#__PURE__*/_react.default.createElement("div", {
84
- className: isQuestionStyleWidget ? 'col-sm-12 col-md-12 col-lg-12' : 'col-sm-12 col-md-8 col-lg-8 gutter'
86
+ className: isQuestionStyleWidget ? "col-sm-12 col-md-12 col-lg-12" : "col-sm-12 col-md-8 col-lg-8 gutter"
85
87
  }, title && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
86
88
  className: "type-b2-400"
87
89
  }, title, isMandatory && /*#__PURE__*/_react.default.createElement(_styles.RedText, null, "*"))), description && /*#__PURE__*/_react.default.createElement(_styles.Styledescription, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -92,7 +94,7 @@ function ApprovalWidget(_ref) {
92
94
  "data-test": dataTest ? "".concat(dataTest, "--view-button") : undefined,
93
95
  onClick: () => viewOnClick(questionId),
94
96
  type: "text-only",
95
- label: isQuestionStyleWidget ? 'View Previous Description' : 'View History'
97
+ label: isQuestionStyleWidget ? "View Previous Description" : "View History"
96
98
  }), children)), !isQuestionStyleWidget && /*#__PURE__*/_react.default.createElement("div", {
97
99
  className: "col-sm-12 col-md-4 col-lg-4"
98
100
  }, /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
@@ -112,7 +114,7 @@ function ApprovalWidget(_ref) {
112
114
  required: true,
113
115
  message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
114
116
  "data-test": "".concat(dataTest, "--is-approved-validation-message")
115
- }, "Approval status needs to be selected.") : 'Approval status needs to be selected.'
117
+ }, "Approval status needs to be selected.") : "Approval status needs to be selected."
116
118
  }]
117
119
  }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
118
120
  "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
@@ -132,12 +134,17 @@ function ApprovalWidget(_ref) {
132
134
  className: "type-b2-400"
133
135
  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
134
136
  name: "remarks-".concat(questionId),
135
- initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : '',
137
+ initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
136
138
  rules: [{
137
139
  required: true,
138
140
  message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
139
141
  "data-test": "".concat(dataTest, "--remarks-validation-message")
140
- }, "Remarks cannot be empty.") : 'Remarks cannot be empty.'
142
+ }, "Remarks cannot be empty.") : "Remarks cannot be empty."
143
+ }, maxLength && {
144
+ max: maxLength,
145
+ message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
146
+ "data-test": "".concat(dataTest, "--remarks-maxlength-validation-message")
147
+ }, "Remarks cannot exceed ".concat(maxLength, " characters.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Remarks cannot exceed ".concat(maxLength, " characters."))
141
148
  }]
142
149
  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
143
150
  "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
@@ -146,7 +153,7 @@ function ApprovalWidget(_ref) {
146
153
  }
147
154
  ApprovalWidget.propTypes = {
148
155
  children: _propTypes.default.node,
149
- 'data-test': _propTypes.default.string,
156
+ "data-test": _propTypes.default.string,
150
157
  description: _propTypes.default.string,
151
158
  // Leave description optional
152
159
  docDetails: _propTypes.default.shape({
@@ -176,8 +183,8 @@ ApprovalWidget.propTypes = {
176
183
  };
177
184
  ApprovalWidget.defaultProps = {
178
185
  children: null,
179
- 'data-test': null,
180
- description: '',
186
+ "data-test": null,
187
+ description: "",
181
188
  docDetails: {},
182
189
  approvalForm: {
183
190
  disabled: false,
package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js CHANGED
@@ -184,35 +184,39 @@ function ApprovalWidget(_ref) {
184
184
  }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
185
185
  name: "remarks-".concat(questionId),
186
186
  initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
187
- rules: isRequired ? [{
187
+ rules: [isRequired && {
188
188
  required: true,
189
189
  message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
190
190
  "data-test": "".concat(dataTest, "--remarks-validation-message")
191
191
  }, "Remarks cannot be empty.") : "Remarks cannot be empty."
192
- }] : []
192
+ }, maxLength && {
193
+ max: maxLength,
194
+ message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
195
+ "data-test": "".concat(dataTest, "--remarks-maxlength-validation-message")
196
+ }, "Remarks cannot exceed ".concat(maxLength, " characters.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Remarks cannot exceed ".concat(maxLength, " characters."))
197
+ }]
193
198
  }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
194
199
  "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
195
- disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false,
196
- maxLength: maxLength
200
+ disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
197
201
  })));
198
202
  };
199
203
 
200
204
  /**
201
205
  * BUSINESS LOGIC: Two different radio implementations exist for different approval scenarios
202
- *
206
+ *
203
207
  * "radio" - MANDATORY APPROVAL: Always requires user to select approval status
204
208
  * - Used when approval decision is compulsory (e.g., critical business processes)
205
209
  * - Both approval status AND remarks (if pending) are mandatory
206
210
  * - Cannot proceed without making a selection
207
- *
211
+ *
208
212
  * "radioOptional" - OPTIONAL APPROVAL: Approval status depends on isMandatory flag
209
213
  * - Used when approval might be optional based on business rules
210
214
  * - If isMandatory=true: Same behavior as "radio" (mandatory)
211
215
  * - If isMandatory=false: User can skip approval selection
212
216
  * - Provides flexibility for different approval workflows
213
- *
217
+ *
214
218
  * This separation allows the same component to handle both strict and flexible approval processes
215
- *
219
+ *
216
220
  * Renders the approval section based on action render type
217
221
  * @returns {React.ReactNode} Approval section component
218
222
  */
@@ -382,12 +386,17 @@ function ApprovalWidget(_ref) {
382
386
  validateStatus: form.getFieldError("icQues_remarks_".concat(questionId)) ? "error" : "",
383
387
  help: form.getFieldError("icQues_remarks_".concat(questionId)) || ""
384
388
  }, getFieldDecorator("icQues_remarks_".concat(questionId), {
385
- rules: isMandatory ? [{
389
+ rules: [isMandatory && {
386
390
  required: true,
387
391
  message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
388
392
  "data-test": "".concat(dataTest, "--remarks-validation-message")
389
393
  }, "Remarks cannot be empty.") : "Remarks cannot be empty."
390
- }] : [],
394
+ }, maxLength && {
395
+ max: maxLength,
396
+ message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
397
+ "data-test": "".concat(dataTest, "--remarks-maxlength-validation-message")
398
+ }, "Remarks cannot exceed ".concat(maxLength, " characters.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Remarks cannot exceed ".concat(maxLength, " characters."))
399
+ }],
391
400
  initialValue: (_approvalForm$remarks2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks2 !== void 0 ? _approvalForm$remarks2 : ""
392
401
  })( /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
393
402
  "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
package/build/widgets/oa-widget-sidebar/SidebarWidget.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/es.weak-map.js");
3
4
  Object.defineProperty(exports, "__esModule", {
4
5
  value: true
5
6
  });
@@ -14,8 +15,10 @@ var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
14
15
  var _Header = _interopRequireDefault(require("./components/Header"));
15
16
  var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
16
17
  var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
17
- var _styles = _interopRequireDefault(require("./styles"));
18
+ var _styles = _interopRequireWildcard(require("./styles"));
18
19
  var _CustomDropdown = _interopRequireDefault(require("../../components/oa-component-dropdown/CustomDropdown"));
20
+ 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); }
21
+ 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; }
19
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
23
  /* eslint-disable */
21
24
 
@@ -23,15 +26,21 @@ const {
23
26
  Sider
24
27
  } = _antd.Layout;
25
28
  function SidebarWidget(_ref) {
26
- var _footer$item, _menuItems$items, _footer$item2, _footer$item3;
29
+ var _mobileMenuItems$item, _footer$item, _menuItems$items, _footer$item2, _footer$item3;
27
30
  let {
28
31
  heading,
29
32
  menuItems = [],
33
+ mobileMenuItems = [],
30
34
  footer,
31
35
  location,
32
36
  history,
33
- handleFooterClick
37
+ handleFooterClick,
38
+ profileData // Add profileData prop
34
39
  } = _ref;
40
+ // Determine which menu items to use and whether to show profile icon
41
+ const shouldShowProfileIcon = (mobileMenuItems === null || mobileMenuItems === void 0 || (_mobileMenuItems$item = mobileMenuItems.items) === null || _mobileMenuItems$item === void 0 ? void 0 : _mobileMenuItems$item.length) > 0;
42
+ const activeMenuItems = shouldShowProfileIcon ? mobileMenuItems : menuItems;
43
+ console.log(profileData, "profileData");
35
44
  return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
36
45
  className: "oaLeftLayouts"
37
46
  }, /*#__PURE__*/_react.default.createElement(Sider, {
@@ -42,11 +51,12 @@ function SidebarWidget(_ref) {
42
51
  className: "logoContainer"
43
52
  }, (heading === null || heading === void 0 ? void 0 : heading.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, heading), /*#__PURE__*/_react.default.createElement("div", {
44
53
  className: "notShowInDesktop"
45
- }, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
46
- items: [...((menuItems === null || menuItems === void 0 ? void 0 : menuItems.items) || []), ...(footer !== null && footer !== void 0 && footer.visible ? [{
54
+ }, (activeMenuItems === null || activeMenuItems === void 0 ? void 0 : activeMenuItems.visible) && /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
55
+ items: [...((activeMenuItems === null || activeMenuItems === void 0 ? void 0 : activeMenuItems.items) || []), ...(footer !== null && footer !== void 0 && footer.visible ? [{
47
56
  label: footer === null || footer === void 0 || (_footer$item = footer.item) === null || _footer$item === void 0 ? void 0 : _footer$item.label,
48
57
  key: "footerAction",
49
- onClick: handleFooterClick
58
+ onClick: handleFooterClick,
59
+ danger: true
50
60
  }] : [])],
51
61
  trigger: ["click"],
52
62
  type: "primary",
@@ -57,7 +67,15 @@ function SidebarWidget(_ref) {
57
67
  history.replace(key === null || key === void 0 ? void 0 : key.path);
58
68
  }
59
69
  }
60
- }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
70
+ }, shouldShowProfileIcon && profileData !== null && profileData !== void 0 && profileData.visible ? /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
71
+ style: {
72
+ backgroundColor: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconBgColor) || 'primary', ")"),
73
+ color: "var(--color-".concat((profileData === null || profileData === void 0 ? void 0 : profileData.iconColor) || 'primary-content', ")")
74
+ }
75
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
76
+ color: "white",
77
+ typography: profileData === null || profileData === void 0 ? void 0 : profileData.mwebTypographyType
78
+ }, profileData === null || profileData === void 0 ? void 0 : profileData.iconText)) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
61
79
  color: "primary",
62
80
  icon: _Menu.default,
63
81
  size: 20
package/build/widgets/oa-widget-sidebar/styles.js CHANGED
@@ -3,10 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.default = exports.ProfileIcon = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
- var _templateObject; // styles.js
8
+ var _templateObject, _templateObject2; // styles.js
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 OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaLeftLayouts {\n padding: 24px 8px;\n background: #f6f6f6;\n }\n\n .logoContainer {\n padding: 0 12px 68px;\n display: flex;\n justify-content: space-between;\n }\n\n .logoutDiv {\n display: flex; flex-direction: row; margin: 140px 0 0 16px; gap: 8px; cursor: pointer;\n }\n\n\n\n\n\n .leftLogoSec {\n display: flex;\n flex-direction: row;\n gap: 8px;\n }\n\n .logoContainer em {\n width: 1px;\n background: #e0e0e0;\n }\n .logoContainer img {\n height: 32px;\n }\n .ant-layout-sider-light,\n .ant-menu-light {\n background: transparent;\n }\n .ant-menu-item {\n padding: 16px;\n border-radius: 50px;\n margin: 0 0 8px;\n height: auto;\n line-height: normal;\n border-radius: 999px;\n border: 1px solid #e0e0e0;\n background: #fff;\n }\n\n .ant-menu-item .ant-menu-title-content {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n .ant-menu-item-active {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-item-selected {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-light:not(.ant-menu-horizontal)\n .ant-menu-item:not(.ant-menu-item-selected):hover,\n :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n > .ant-menu:not(.ant-menu-horizontal)\n .ant-menu-item:not(.ant-menu-item-selected):hover {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-light.ant-menu-root.ant-menu-inline {\n border: none;\n }\n .ant-menu-item-selected {\n }\n\n .notShowInDesktop {\n display: none;\n }\n\n @media only screen and (max-width: 600px) {\n .oaLeftLayouts {\n background: #fff;\n padding: 16px;\n }\n .logoContainer {\n padding: 0;\n align-items: center;\n }\n\n .notShowInMobile {\n display: none;\n }\n .notShowInDesktop {\n display: flex;\n }\n\n .oaLeftLayouts .ant-layout-sider {\n max-width: none !important;\n width: 100% !important;\n }\n p.ant-dropdown-trigger {\n margin-bottom: 0;\n }\n }\n"])));
11
+ const OalayoutStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaLeftLayouts {\n padding: 24px 8px;\n background: #f6f6f6;\n }\n\n .logoContainer {\n padding: 0 12px 68px;\n display: flex;\n justify-content: space-between;\n }\n\n .logoutDiv {\n display: flex; flex-direction: row; margin: 140px 0 0 16px; gap: 8px; cursor: pointer;\n }\n\n .leftLogoSec {\n display: flex;\n flex-direction: row;\n gap: 8px;\n }\n\n .logoContainer em {\n width: 1px;\n background: #e0e0e0;\n }\n .logoContainer img {\n height: 32px;\n }\n .ant-layout-sider-light,\n .ant-menu-light {\n background: transparent;\n }\n .ant-menu-item {\n padding: 16px;\n border-radius: 50px;\n margin: 0 0 8px;\n height: auto;\n line-height: normal;\n border-radius: 999px;\n border: 1px solid #e0e0e0;\n background: #fff;\n }\n\n .ant-menu-item .ant-menu-title-content {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n .ant-menu-item-active {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-item-selected {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-light:not(.ant-menu-horizontal)\n .ant-menu-item:not(.ant-menu-item-selected):hover,\n :where(.css-dev-only-do-not-override-zcfrx9).ant-menu-light\n > .ant-menu:not(.ant-menu-horizontal)\n .ant-menu-item:not(.ant-menu-item-selected):hover {\n background: #014fc5;\n color: #fff;\n }\n .ant-menu-light.ant-menu-root.ant-menu-inline {\n border: none;\n }\n .ant-menu-item-selected {\n }\n\n .notShowInDesktop {\n display: none;\n }\n\n @media only screen and (max-width: 600px) {\n .oaLeftLayouts {\n background: #fff;\n padding: 16px;\n }\n .logoContainer {\n padding: 0;\n align-items: center;\n }\n\n .notShowInMobile {\n display: none;\n }\n .notShowInDesktop {\n display: flex;\n }\n\n .oaLeftLayouts .ant-layout-sider {\n max-width: none !important;\n width: 100% !important;\n }\n p.ant-dropdown-trigger {\n margin-bottom: 0;\n }\n }\n"])));
12
+ const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-primary);\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
12
13
  var _default = exports.default = OalayoutStyle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "1.0.1-stage.375",
3
+ "version": "1.0.1-stage.377",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",