oa-componentbook 1.0.1-stage.363 → 1.0.1-stage.365

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 (24) hide show
  1. package/build/components/oa-component-accordion/Accordion.js +102 -42
  2. package/build/components/oa-component-accordion/styles.js +2 -2
  3. package/build/components/oa-component-button/CustomButton.js +6 -4
  4. package/build/components/oa-component-icons/MaterialIcon.js +1 -1
  5. package/build/components/oa-component-modal/styles.js +1 -1
  6. package/build/components/oa-component-tag/CustomTag.js +18 -12
  7. package/build/index.js +14 -0
  8. package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js +215 -0
  9. package/build/layout/EntityOverviewLayout/reducer/entityOverviewLayoutReducer.js +77 -0
  10. package/build/layout/EntityOverviewLayout/styles.js +13 -0
  11. package/build/layout/GenricLayOut/GenricLayOut.js +299 -173
  12. package/build/layout/GenricLayOut/components/Header.js +7 -1
  13. package/build/layout/GenricLayOut/components/ProfileSection.js +85 -0
  14. package/build/layout/GenricLayOut/reducer/layoutReducer.js +5 -1
  15. package/build/layout/GenricLayOut/styles.js +6 -3
  16. package/build/widgets/oa-form-widget/FormWidget.js +89 -22
  17. package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js +91 -46
  18. package/build/widgets/oa-widget-key-value/KeyValueWidget.js +3 -0
  19. package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js +115 -0
  20. package/build/widgets/oa-widget-profile-data/styles.js +13 -0
  21. package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js +104 -105
  22. package/build/widgets/oa-widget-user-management/UserManagementWidget.js +332 -0
  23. package/build/widgets/oa-widget-user-management/styles.js +15 -0
  24. package/package.json +1 -1
package/build/layout/GenricLayOut/components/Header.js CHANGED
@@ -17,6 +17,7 @@ function Header(_ref) {
17
17
  let {
18
18
  heading,
19
19
  subHeading,
20
+ subHeading1,
20
21
  onSubHeadingClick,
21
22
  handleSubHeadingSelect
22
23
  } = _ref;
@@ -63,6 +64,11 @@ function Header(_ref) {
63
64
  color: (_subHeading$color = subHeading === null || subHeading === void 0 ? void 0 : subHeading.color) !== null && _subHeading$color !== void 0 ? _subHeading$color : "secondary-content"
64
65
  }, (subHeading === null || subHeading === void 0 || (_subHeading$icon = subHeading.icon) === null || _subHeading$icon === void 0 ? void 0 : _subHeading$icon.position) === "left" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, _extends({}, subHeading === null || subHeading === void 0 || (_subHeading$icon2 = subHeading.icon) === null || _subHeading$icon2 === void 0 ? void 0 : _subHeading$icon2.iconConfig, {
65
66
  className: "margin-right-8"
66
- })), subHeading === null || subHeading === void 0 ? void 0 : subHeading.text, (subHeading === null || subHeading === void 0 || (_subHeading$icon3 = subHeading.icon) === null || _subHeading$icon3 === void 0 ? void 0 : _subHeading$icon3.position) === "right" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, subHeading === null || subHeading === void 0 || (_subHeading$icon4 = subHeading.icon) === null || _subHeading$icon4 === void 0 ? void 0 : _subHeading$icon4.iconConfig)), subHeadingJsx(subHeading)));
67
+ })), subHeading === null || subHeading === void 0 ? void 0 : subHeading.text, (subHeading === null || subHeading === void 0 || (_subHeading$icon3 = subHeading.icon) === null || _subHeading$icon3 === void 0 ? void 0 : _subHeading$icon3.position) === "right" && /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, subHeading === null || subHeading === void 0 || (_subHeading$icon4 = subHeading.icon) === null || _subHeading$icon4 === void 0 ? void 0 : _subHeading$icon4.iconConfig)), subHeadingJsx(subHeading)), subHeading1 && /*#__PURE__*/_react.default.createElement("div", {
68
+ className: "subHadingText marginNone"
69
+ }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
70
+ typography: subHeading1 === null || subHeading1 === void 0 ? void 0 : subHeading1.type,
71
+ color: "secondary-content"
72
+ }, subHeading1 === null || subHeading1 === void 0 ? void 0 : subHeading1.text)));
67
73
  }
68
74
  var _default = exports.default = Header;
package/build/layout/GenricLayOut/components/ProfileSection.js ADDED
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.weak-map.js");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+ var _Typography = _interopRequireDefault(require("../../../components/oa-component-typography/Typography"));
12
+ var _styles = require("../styles");
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
+ 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); }
15
+ 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; }
16
+ /* eslint-disable */
17
+
18
+ /**
19
+ * ProfileSection component that displays a user profile icon with tooltip
20
+ *
21
+ * @param {Object} props - Component props
22
+ * @param {Object} props.profileData - Profile data object
23
+ * @param {string} props.profileData.iconText - Text to display in the circular icon
24
+ * @param {string} props.profileData.iconColor - Color of the text
25
+ * @param {string} props.profileData.iconBgColor - Background color of the circular icon
26
+ * @param {string} props.profileData.tooltipText - Text to display in the tooltip
27
+ * @param {boolean} props.profileData.visible - Whether to show the profile section
28
+ * @param {Function} props.onProfileClick - Function to call when profile is clicked
29
+ *
30
+ * @returns {JSX.Element} Profile section component
31
+ */
32
+ function ProfileSection(_ref) {
33
+ let {
34
+ profileData,
35
+ onProfileClick
36
+ } = _ref;
37
+ const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
38
+ if (!(profileData !== null && profileData !== void 0 && profileData.visible)) {
39
+ return null;
40
+ }
41
+ const {
42
+ iconText,
43
+ iconColor,
44
+ iconBgColor,
45
+ tooltipText
46
+ } = profileData;
47
+ return /*#__PURE__*/_react.default.createElement(_styles.ProfileSectionContainer, null, /*#__PURE__*/_react.default.createElement("div", {
48
+ className: "profile-icon-container",
49
+ onMouseEnter: () => setShowTooltip(true),
50
+ onMouseLeave: () => setShowTooltip(false),
51
+ onClick: onProfileClick
52
+ }, /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
53
+ style: {
54
+ backgroundColor: iconBgColor,
55
+ color: iconColor
56
+ }
57
+ }, iconText), showTooltip && /*#__PURE__*/_react.default.createElement(_styles.Tooltip, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
58
+ color: "white",
59
+ typography: "type-b2-400",
60
+ style: {
61
+ color: "#ffffff"
62
+ }
63
+ }, tooltipText))));
64
+ }
65
+ ProfileSection.propTypes = {
66
+ profileData: _propTypes.default.shape({
67
+ visible: _propTypes.default.bool,
68
+ iconText: _propTypes.default.string,
69
+ iconColor: _propTypes.default.string,
70
+ iconBgColor: _propTypes.default.string,
71
+ tooltipText: _propTypes.default.string
72
+ }),
73
+ onProfileClick: _propTypes.default.func
74
+ };
75
+ ProfileSection.defaultProps = {
76
+ profileData: {
77
+ visible: false,
78
+ iconText: "R",
79
+ iconColor: "#ffffff",
80
+ iconBgColor: "#666666",
81
+ tooltipText: "To manage the sub-admins, go to the Profile section."
82
+ },
83
+ onProfileClick: () => {}
84
+ };
85
+ var _default = exports.default = ProfileSection;
package/build/layout/GenricLayOut/reducer/layoutReducer.js CHANGED
@@ -55,7 +55,8 @@ const actionTypes = exports.actionTypes = {
55
55
  REMOVE_APPLIED_FILTER: "REMOVE_APPLIED_FILTER",
56
56
  CLEAR_ALL_APPLIED_FILTERS: "CLEAR_ALL_APPLIED_FILTERS",
57
57
  UPDATE_FILTER_FORM_VALUES: "UPDATE_FILTER_FORM_VALUES",
58
- SET_STATIC_FILTER: "SET_STATIC_FILTER"
58
+ SET_STATIC_FILTER: "SET_STATIC_FILTER",
59
+ SET_PROFILE_DATA: "SET_PROFILE_DATA"
59
60
  };
60
61
  function getFieldDefaultValue(widget) {
61
62
  switch (widget) {
@@ -284,6 +285,9 @@ const genericLayoutReducer = exports.genericLayoutReducer = (0, _immer.produce)(
284
285
  });
285
286
  }
286
287
  break;
288
+ case actionTypes.SET_PROFILE_DATA:
289
+ draft.profileData = _objectSpread(_objectSpread({}, draft.profileData), action.payload);
290
+ break;
287
291
  default:
288
292
  break;
289
293
  }
package/build/layout/GenricLayOut/styles.js CHANGED
@@ -5,9 +5,9 @@ require("core-js/modules/web.dom-collections.iterator.js");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.TableDataStyle = exports.OapageWithDataStyle = exports.ListofDamageParts = exports.IncidentListParts = exports.FormWidgetStyle = exports.DrawerWithOutFooter = void 0;
8
+ exports.default = exports.Tooltip = exports.TableDataStyle = exports.ProfileSectionContainer = exports.ProfileIcon = exports.OapageWithDataStyle = exports.ListofDamageParts = exports.IncidentListParts = exports.FormWidgetStyle = exports.DrawerWithOutFooter = void 0;
9
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
11
11
  /* eslint-disable */
12
12
  // styles.js
13
13
  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); }
@@ -16,7 +16,10 @@ 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\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 .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\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 max-width: 320px;\n width: 100%;\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{display:flex; flex-direction:row; gap:16px;} \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\n\n .selectAndSearch .ant-input-affix-wrapper {\n width:calc(100% - 84px);\n }\n.oaheaderSearchAndFilter .dropDownSearchContainer {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 .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"])));
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
+ 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"])));
23
+ const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n font-weight: 600;\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"])));
24
+ const Tooltip = exports.Tooltip = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 8px;\n background: #000000;\n color: #ffffff;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 12px;\n white-space: nowrap;\n z-index: 1000;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n\n &::before {\n content: '';\n position: absolute;\n top: -4px;\n right: 12px;\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000000;\n }\n"])));
22
25
  var _default = exports.default = {};
package/build/widgets/oa-form-widget/FormWidget.js CHANGED
@@ -8,6 +8,9 @@ Object.defineProperty(exports, "__esModule", {
8
8
  });
9
9
  exports.default = FormWidget;
10
10
  require("core-js/modules/web.dom-collections.iterator.js");
11
+ require("core-js/modules/es.regexp.constructor.js");
12
+ require("core-js/modules/es.regexp.exec.js");
13
+ require("core-js/modules/es.regexp.to-string.js");
11
14
  require("core-js/modules/es.array.includes.js");
12
15
  require("core-js/modules/es.string.includes.js");
13
16
  var _antd = require("antd");
@@ -33,6 +36,7 @@ var _CustomTooltip = _interopRequireDefault(require("../../components/oa-compone
33
36
  var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
34
37
  var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
35
38
  var _CollapsibleKeyValueWidget = _interopRequireDefault(require("../oa-widget-collapsible-key-value/CollapsibleKeyValueWidget"));
39
+ var _UserManagementWidget = _interopRequireDefault(require("../oa-widget-user-management/UserManagementWidget"));
36
40
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
37
41
  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); }
38
42
  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; }
@@ -43,7 +47,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
43
47
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
44
48
  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 */
45
49
  function FormWidget(props) {
46
- var _cancel$type, _cancel$size, _clear$type, _clear$size, _submit$type;
50
+ var _cancel$type, _cancel$size, _clear$type, _clear$size, _submit$type, _submit$disabled;
47
51
  const [form] = _antd.Form.useForm();
48
52
  const [dynamicRules, setDynamicRules] = (0, _react.useState)({});
49
53
  const {
@@ -61,15 +65,47 @@ function FormWidget(props) {
61
65
  visible,
62
66
  clear
63
67
  } = cta !== null && cta !== void 0 ? cta : {};
64
- const getFieldRules = item => {
65
- return dynamicRules[item === null || item === void 0 ? void 0 : item.name] || (item === null || item === void 0 ? void 0 : item.rules) || [];
68
+ const getFieldRules = (itemData, item) => {
69
+ if (item.customRulesCheck) {
70
+ return dynamicRules[item === null || item === void 0 ? void 0 : item.name] || (item === null || item === void 0 ? void 0 : item.rules) || [];
71
+ } else {
72
+ return getInputRules(itemData, item);
73
+ }
74
+ };
75
+ const modifedRuleWithItem = item => {
76
+ const temp = item === null || item === void 0 ? void 0 : item.map(r => {
77
+ if (!(r !== null && r !== void 0 && r.checkValidator) || !(r !== null && r !== void 0 && r.rule)) {
78
+ return null;
79
+ }
80
+ let pattern = r.rule.pattern;
81
+ if (typeof pattern === "string") {
82
+ const regex = new RegExp(pattern);
83
+ pattern = regex;
84
+ }
85
+ return _objectSpread(_objectSpread({}, r.rule), {}, {
86
+ pattern
87
+ });
88
+ }).filter(Boolean);
89
+ return temp;
90
+ };
91
+ const getInputRules = (itemData, item) => {
92
+ var _ref;
93
+ if (itemData !== null && itemData !== void 0 && itemData.customRules) {
94
+ for (const key in itemData === null || itemData === void 0 ? void 0 : itemData.customRules) {
95
+ if (item[key]) {
96
+ const modifiedRules = modifedRuleWithItem(itemData === null || itemData === void 0 ? void 0 : itemData.customRules[key]);
97
+ return modifiedRules;
98
+ }
99
+ }
100
+ }
101
+ const itemRules = (_ref = itemData || item) === null || _ref === void 0 ? void 0 : _ref.rules;
102
+ return modifedRuleWithItem(itemRules);
66
103
  };
67
104
  const handleDynamicRuleUpdate = (fieldName, value, dynamicRulesConfig) => {
68
105
  if (!dynamicRulesConfig) return;
69
- console.log(value, "handleDynamicRuleUpdate");
70
- Object.entries(dynamicRulesConfig).forEach(_ref => {
106
+ Object.entries(dynamicRulesConfig).forEach(_ref2 => {
71
107
  var _config$conditions;
72
- let [targetField, config] = _ref;
108
+ let [targetField, config] = _ref2;
73
109
  const condition = (_config$conditions = config.conditions) === null || _config$conditions === void 0 ? void 0 : _config$conditions.find(c => c.type === "equals" ? value == c.value : c.type == "not_equals" ? value != c.value : c.type == "includes" ? value === null || value === void 0 ? void 0 : value.includes(c.value) : c.validator ? c.validator(value) : false);
74
110
  const newRules = condition ? condition.rules : config.defaultRules || [];
75
111
  setDynamicRules(prev => _objectSpread(_objectSpread({}, prev), {}, {
@@ -103,7 +139,7 @@ function FormWidget(props) {
103
139
  };
104
140
  const renderFieldWidget = (item, index, itemData) => {
105
141
  if ((item === null || item === void 0 ? void 0 : item.widget) === "date" && (item === null || item === void 0 ? void 0 : item.visible) !== false) {
106
- var _item$props, _item$props$getDisabl;
142
+ var _item$props, _item$props$getDisabl, _item$disabled;
107
143
  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
108
144
  value: item === null || item === void 0 ? void 0 : item.value,
109
145
  name: item === null || item === void 0 ? void 0 : item.name,
@@ -116,11 +152,12 @@ function FormWidget(props) {
116
152
  width: "100%"
117
153
  },
118
154
  disabledDateFunction: item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 || (_item$props$getDisabl = _item$props.getDisabledDateLogic) === null || _item$props$getDisabl === void 0 ? void 0 : _item$props$getDisabl.call(_item$props, item.valueProp),
155
+ disabled: (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : false,
119
156
  defaultValue: item.defaultValue
120
157
  }, item === null || item === void 0 ? void 0 : item.props)));
121
158
  }
122
159
  if ((item === null || item === void 0 ? void 0 : item.widget) === "select" && (item === null || item === void 0 ? void 0 : item.visible) !== false) {
123
- var _item$disabled, _item$showSearch, _item$optionLabelProp;
160
+ var _item$disabled2, _item$showSearch, _item$optionLabelProp;
124
161
  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
125
162
  name: item === null || item === void 0 ? void 0 : item.name,
126
163
  label: item === null || item === void 0 ? void 0 : item.label,
@@ -130,7 +167,7 @@ function FormWidget(props) {
130
167
  options: item === null || item === void 0 ? void 0 : item.value,
131
168
  placeholder: item === null || item === void 0 ? void 0 : item.placeholder,
132
169
  defaultValue: item.defaultValueRequired && (item === null || item === void 0 ? void 0 : item.defaultValue) !== "" ? item === null || item === void 0 ? void 0 : item.defaultValue : undefined,
133
- disabled: (_item$disabled = item.disabled) !== null && _item$disabled !== void 0 ? _item$disabled : false
170
+ disabled: (_item$disabled2 = item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : false
134
171
  }, (item === null || item === void 0 ? void 0 : item.onChange) && {
135
172
  onChange: value => {
136
173
  // Call the original onChange if provided
@@ -151,20 +188,22 @@ function FormWidget(props) {
151
188
  },
152
189
  showSearch: (_item$showSearch = item === null || item === void 0 ? void 0 : item.showSearch) !== null && _item$showSearch !== void 0 ? _item$showSearch : false,
153
190
  filterOption: (input, option) => {
154
- var _toLowerCase, _ref2, _option$label$props$t, _option$label, _input$toLowerCase;
155
- return (_toLowerCase = (_ref2 = (_option$label$props$t = option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.props) === null || _option$label === void 0 ? void 0 : _option$label.title) !== null && _option$label$props$t !== void 0 ? _option$label$props$t : "").toLowerCase) === null || _toLowerCase === void 0 || (_toLowerCase = _toLowerCase.call(_ref2)) === null || _toLowerCase === void 0 ? void 0 : _toLowerCase.includes(input === null || input === void 0 || (_input$toLowerCase = input.toLowerCase) === null || _input$toLowerCase === void 0 ? void 0 : _input$toLowerCase.call(input));
191
+ var _toLowerCase, _ref3, _option$label$props$t, _option$label, _input$toLowerCase;
192
+ return (_toLowerCase = (_ref3 = (_option$label$props$t = option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.props) === null || _option$label === void 0 ? void 0 : _option$label.title) !== null && _option$label$props$t !== void 0 ? _option$label$props$t : "").toLowerCase) === null || _toLowerCase === void 0 || (_toLowerCase = _toLowerCase.call(_ref3)) === null || _toLowerCase === void 0 ? void 0 : _toLowerCase.includes(input === null || input === void 0 || (_input$toLowerCase = input.toLowerCase) === null || _input$toLowerCase === void 0 ? void 0 : _input$toLowerCase.call(input));
156
193
  }
157
194
  }, item.optionLabelProp && {
158
195
  optionLabelProp: (_item$optionLabelProp = item === null || item === void 0 ? void 0 : item.optionLabelProp) !== null && _item$optionLabelProp !== void 0 ? _item$optionLabelProp : ""
159
196
  })));
160
197
  }
161
198
  if ((item === null || item === void 0 ? void 0 : item.widget) === "textArea") {
199
+ var _item$disabled3;
162
200
  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
163
201
  name: item === null || item === void 0 ? void 0 : item.name,
164
202
  label: item === null || item === void 0 ? void 0 : item.label,
165
203
  rules: item === null || item === void 0 ? void 0 : item.rules
166
204
  }, /*#__PURE__*/_react.default.createElement(_CustomTextArea.default, {
167
205
  rows: 4,
206
+ disabled: (_item$disabled3 = item.disabled) !== null && _item$disabled3 !== void 0 ? _item$disabled3 : false,
168
207
  placeholder: item === null || item === void 0 ? void 0 : item.placeholder
169
208
  }));
170
209
  }
@@ -185,7 +224,7 @@ function FormWidget(props) {
185
224
  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
186
225
  name: "".concat(item === null || item === void 0 ? void 0 : item.name).concat(index ? index : ""),
187
226
  label: renderLabelWithTooltip(item === null || item === void 0 ? void 0 : item.label, item === null || item === void 0 ? void 0 : item.tooltip),
188
- rules: getFieldRules(item),
227
+ rules: getFieldRules(itemData, item),
189
228
  extra: item === null || item === void 0 ? void 0 : item.helpText,
190
229
  initialValue: item === null || item === void 0 ? void 0 : item.value
191
230
  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, _extends({}, item === null || item === void 0 ? void 0 : item.props, {
@@ -198,13 +237,14 @@ function FormWidget(props) {
198
237
  })));
199
238
  }
200
239
  if ((item === null || item === void 0 ? void 0 : item.widget) === "checkbox") {
201
- var _item$rules, _item$className;
240
+ var _item$rules, _item$disabled4, _item$className;
202
241
  return /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.BgColorCheckBox, null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
203
242
  name: "".concat(item === null || item === void 0 ? void 0 : item.name).concat(index ? index : ""),
204
243
  rules: item === null || item === void 0 || (_item$rules = item.rules) === null || _item$rules === void 0 ? void 0 : _item$rules.map(r => (r === null || r === void 0 ? void 0 : r.checkValidator) && (r === null || r === void 0 ? void 0 : r.rule)).filter(Boolean),
205
244
  valuePropName: "checked",
206
245
  initialValue: item === null || item === void 0 ? void 0 : item.checked
207
246
  }, /*#__PURE__*/_react.default.createElement(_CustomCheckBox.default, {
247
+ disabled: (_item$disabled4 = item.disabled) !== null && _item$disabled4 !== void 0 ? _item$disabled4 : false,
208
248
  size: "large",
209
249
  label: item === null || item === void 0 ? void 0 : item.label,
210
250
  className: (_item$className = item === null || item === void 0 ? void 0 : item.className) !== null && _item$className !== void 0 ? _item$className : ""
@@ -242,7 +282,7 @@ function FormWidget(props) {
242
282
  }
243
283
  };
244
284
  const renderWidget = item => {
245
- var _item$value, _item$value2, _item$value2$map, _item$value3, _item$value4, _item$value5, _item$value6, _item$iconConfig, _item$subType, _item$disabled2;
285
+ var _item$value, _item$value2, _item$value2$map, _item$value3, _item$value4, _item$value5, _item$value6, _item$iconConfig, _item$subType, _item$disabled5;
246
286
  switch (item === null || item === void 0 ? void 0 : item.type) {
247
287
  case "simpleList":
248
288
  if ((item === null || item === void 0 || (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.length) === 0) return null;
@@ -313,7 +353,9 @@ function FormWidget(props) {
313
353
  key: item.key,
314
354
  data: item.value,
315
355
  info: keyValueInfo,
316
- customClassName: item.className
356
+ columnLayout: item === null || item === void 0 ? void 0 : item.columnLayout,
357
+ customClassName: item.className,
358
+ tagStatus: item === null || item === void 0 ? void 0 : item.tagStatus
317
359
  });
318
360
  case "tag":
319
361
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -344,7 +386,7 @@ function FormWidget(props) {
344
386
  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
345
387
  type: (_item$subType = item === null || item === void 0 ? void 0 : item.subType) !== null && _item$subType !== void 0 ? _item$subType : "primary",
346
388
  label: item === null || item === void 0 ? void 0 : item.label,
347
- disabled: (_item$disabled2 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled2 !== void 0 ? _item$disabled2 : false,
389
+ disabled: (_item$disabled5 = item === null || item === void 0 ? void 0 : item.disabled) !== null && _item$disabled5 !== void 0 ? _item$disabled5 : false,
348
390
  onClick: () => {
349
391
  if (item !== null && item !== void 0 && item.onClick) {
350
392
  item.onClick(item === null || item === void 0 ? void 0 : item.action, item === null || item === void 0 ? void 0 : item.key);
@@ -367,6 +409,19 @@ function FormWidget(props) {
367
409
  onFetchMoreInfo: item === null || item === void 0 ? void 0 : item.onFetchMoreInfo,
368
410
  handleCollapsibleKeyData: handleCollapsibleKeyData
369
411
  }));
412
+ case "userManagement":
413
+ return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
414
+ name: (item === null || item === void 0 ? void 0 : item.name) || "users",
415
+ label: item === null || item === void 0 ? void 0 : item.label,
416
+ initialValue: (item === null || item === void 0 ? void 0 : item.value) || []
417
+ }, /*#__PURE__*/_react.default.createElement(_UserManagementWidget.default, _extends({
418
+ form: form,
419
+ fieldName: (item === null || item === void 0 ? void 0 : item.name) || "users",
420
+ initialData: (item === null || item === void 0 ? void 0 : item.value) || [],
421
+ fields: item === null || item === void 0 ? void 0 : item.fields,
422
+ disabled: (item === null || item === void 0 ? void 0 : item.disabled) || false,
423
+ customPageModal: props === null || props === void 0 ? void 0 : props.customPageModal
424
+ }, props)));
370
425
  case "field":
371
426
  return renderFieldWidget(item);
372
427
  default:
@@ -401,17 +456,28 @@ function FormWidget(props) {
401
456
  heading,
402
457
  headingInfo,
403
458
  items,
404
- topDividerRequired = true
459
+ topDividerRequired,
460
+ columnLayout
405
461
  } = group;
406
462
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
407
463
  key: index
408
- }, bordered ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Heading(heading, headingInfo), /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FieldBoxBorder, null, items.map((item, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
409
- key: i
410
- }, renderWidget(item))))) : /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FieldWithoutBorder, null, topDividerRequired && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
464
+ }, bordered ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topDividerRequired === true && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
411
465
  className: "dividerLine"
412
- }), Heading(heading, headingInfo), items.map((item, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
466
+ }), Heading(heading, headingInfo), /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FieldBoxBorder, null, items.map((item, i) => /*#__PURE__*/_react.default.createElement("div", {
413
467
  key: i
414
- }, renderWidget(item)))));
468
+ }, renderWidget(item))))) : /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FieldWithoutBorder, null, topDividerRequired !== false && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
469
+ className: "dividerLine"
470
+ }), Heading(heading, headingInfo), /*#__PURE__*/_react.default.createElement("div", {
471
+ style: columnLayout ? _objectSpread({}, columnLayout) : {}
472
+ }, items.map((item, i) => {
473
+ var _item$columnLayoutTem, _item$columnLayoutTem2;
474
+ return /*#__PURE__*/_react.default.createElement("div", {
475
+ key: i,
476
+ style: item !== null && item !== void 0 && item.columnLayoutTemp ? {
477
+ gridArea: (item === null || item === void 0 || (_item$columnLayoutTem = item.columnLayoutTemp) === null || _item$columnLayoutTem === void 0 ? void 0 : _item$columnLayoutTem.gridTemplateArea) || (item === null || item === void 0 || (_item$columnLayoutTem2 = item.columnLayoutTemp) === null || _item$columnLayoutTem2 === void 0 ? void 0 : _item$columnLayoutTem2.gridTempAreaName)
478
+ } : {}
479
+ }, renderWidget(item));
480
+ }))));
415
481
  }), /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FormWidgetStyle, null, visible && /*#__PURE__*/_react.default.createElement("div", {
416
482
  className: "formBottomAction"
417
483
  }, cancel && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
@@ -456,6 +522,7 @@ function FormWidget(props) {
456
522
  }
457
523
  })), submit && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
458
524
  type: (_submit$type = submit === null || submit === void 0 ? void 0 : submit.type) !== null && _submit$type !== void 0 ? _submit$type : "primary",
525
+ disabled: (_submit$disabled = submit.disabled) !== null && _submit$disabled !== void 0 ? _submit$disabled : false,
459
526
  onClick: () => {
460
527
  var _form$validateFields3;
461
528
  form === null || form === void 0 || (_form$validateFields3 = form.validateFields()) === null || _form$validateFields3 === void 0 || _form$validateFields3.then(value => {
package/build/widgets/oa-widget-approval/ApprovalWidgetNew.js CHANGED
@@ -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$disable5, _approvalForm$remarks, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$remarks2, _approvalForm$disable10;
57
+ var _approvalForm$disable5, _actionContent$label, _approvalForm$disable6, _approvalForm$disable7, _approvalForm$disable8, _approvalForm$disable9, _approvalForm$remarks2, _approvalForm$disable10;
58
58
  let {
59
59
  children,
60
60
  description,
@@ -134,6 +134,92 @@ function ApprovalWidget(_ref) {
134
134
  return "";
135
135
  }
136
136
  };
137
+
138
+ /**
139
+ * Renders the approval radio group with validation
140
+ * @param {boolean} isRequired - Whether the field is required
141
+ * @returns {React.ReactNode} Radio group component
142
+ */
143
+ const renderApprovalRadioGroup = function renderApprovalRadioGroup() {
144
+ var _approvalForm$disable, _approvalForm$disable2;
145
+ let isRequired = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
146
+ return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
147
+ name: "isApproved-".concat(questionId),
148
+ className: "custom-radio-group",
149
+ initialValue: isApproved,
150
+ rules: isRequired ? [{
151
+ required: true,
152
+ message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
153
+ "data-test": "".concat(dataTest, "--is-approved-validation-message")
154
+ }, "Approval status needs to be selected.") : "Approval status needs to be selected."
155
+ }] : []
156
+ }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
157
+ "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
158
+ onChange: onRadioChange,
159
+ value: isApproved
160
+ }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
161
+ "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
162
+ disabled: (_approvalForm$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
163
+ label: "Mark as Approved",
164
+ value: 1
165
+ }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
166
+ "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
167
+ disabled: (_approvalForm$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
168
+ label: "Mark as Pending",
169
+ value: 0
170
+ })));
171
+ };
172
+
173
+ /**
174
+ * Renders the remarks textarea with validation
175
+ * @param {boolean} isRequired - Whether the field is required
176
+ * @returns {React.ReactNode} Remarks section component
177
+ */
178
+ const renderRemarksSection = function renderRemarksSection() {
179
+ var _approvalForm$remarks, _approvalForm$disable3;
180
+ let isRequired = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
181
+ return isApproved === 0 && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
182
+ className: "type-b2-400"
183
+ }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
184
+ name: "remarks-".concat(questionId),
185
+ initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
186
+ rules: isRequired ? [{
187
+ required: true,
188
+ message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
189
+ "data-test": "".concat(dataTest, "--remarks-validation-message")
190
+ }, "Remarks cannot be empty.") : "Remarks cannot be empty."
191
+ }] : []
192
+ }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
193
+ "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
194
+ disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
195
+ })));
196
+ };
197
+
198
+ /**
199
+ * BUSINESS LOGIC: Two different radio implementations exist for different approval scenarios
200
+ *
201
+ * "radio" - MANDATORY APPROVAL: Always requires user to select approval status
202
+ * - Used when approval decision is compulsory (e.g., critical business processes)
203
+ * - Both approval status AND remarks (if pending) are mandatory
204
+ * - Cannot proceed without making a selection
205
+ *
206
+ * "radioOptional" - OPTIONAL APPROVAL: Approval status depends on isMandatory flag
207
+ * - Used when approval might be optional based on business rules
208
+ * - If isMandatory=true: Same behavior as "radio" (mandatory)
209
+ * - If isMandatory=false: User can skip approval selection
210
+ * - Provides flexibility for different approval workflows
211
+ *
212
+ * This separation allows the same component to handle both strict and flexible approval processes
213
+ *
214
+ * Renders the approval section based on action render type
215
+ * @returns {React.ReactNode} Approval section component
216
+ */
217
+ const renderApprovalSection = () => {
218
+ const isRadioType = actionRenderType === "radio" || actionRenderType === "radioOptional";
219
+ if (!isRadioType) return null;
220
+ const isRequired = actionRenderType === "radio" || isMandatory;
221
+ return /*#__PURE__*/_react.default.createElement("div", null, renderApprovalRadioGroup(isRequired), renderRemarksSection(isRequired));
222
+ };
137
223
  return /*#__PURE__*/_react.default.createElement(_styles.StyledContainer, null, /*#__PURE__*/_react.default.createElement("div", {
138
224
  className: "row"
139
225
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,14 +233,14 @@ function ApprovalWidget(_ref) {
147
233
  typography: "type-b2-400",
148
234
  color: "primary-content"
149
235
  }, description)), !isQuestionStyleWidget && ((multipleDocDetails === null || multipleDocDetails === void 0 ? void 0 : multipleDocDetails.length) > 0 ? multipleDocDetails.map(docDetails => {
150
- var _approvalForm$disable;
236
+ var _approvalForm$disable4;
151
237
  return /*#__PURE__*/_react.default.createElement("div", {
152
238
  className: "oaCustomerResponse"
153
239
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
154
240
  typography: "type-b2-400",
155
241
  color: "secondary-content"
156
242
  }, docDetails.documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
157
- disabled: (_approvalForm$disable = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable !== void 0 ? _approvalForm$disable : false,
243
+ disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false,
158
244
  "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
159
245
  }, docDetails, {
160
246
  formName: isMandatory ? "file-".concat(questionId) : undefined
@@ -165,7 +251,7 @@ function ApprovalWidget(_ref) {
165
251
  typography: "type-b2-400",
166
252
  color: "secondary-content"
167
253
  }, documentTitle, " \xA0"), /*#__PURE__*/_react.default.createElement(_UploadDownloadWidget.default, _extends({
168
- disabled: (_approvalForm$disable2 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable2 !== void 0 ? _approvalForm$disable2 : false,
254
+ disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false,
169
255
  "data-test": dataTest ? "".concat(dataTest, "--upload-download-widget") : undefined
170
256
  }, docDetails, {
171
257
  formName: isMandatory ? "file-".concat(questionId) : undefined
@@ -240,49 +326,8 @@ function ApprovalWidget(_ref) {
240
326
  typography: "type-b2-400",
241
327
  color: "secondary-content"
242
328
  }, (_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({
243
- disabled: (_approvalForm$disable3 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable3 !== void 0 ? _approvalForm$disable3 : false
244
- }, actionContent)), actionRenderType === "radio" &&
245
- /*#__PURE__*/
246
- //className="col-sm-12 col-md-4 col-lg-4"
247
- _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
248
- name: "isApproved-".concat(questionId),
249
- className: "custom-radio-group",
250
- initialValue: isApproved,
251
- rules: [{
252
- required: true,
253
- message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
254
- "data-test": "".concat(dataTest, "--is-approved-validation-message")
255
- }, "Approval status needs to be selected.") : "Approval status needs to be selected."
256
- }]
257
- }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
258
- "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-group") : undefined,
259
- onChange: onRadioChange,
260
- value: isApproved
261
- }, /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
262
- "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-yes") : undefined,
263
- disabled: (_approvalForm$disable4 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable4 !== void 0 ? _approvalForm$disable4 : false,
264
- label: "Mark as Approved",
265
- value: 1
266
- }), /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
267
- "data-test": dataTest ? "".concat(dataTest, "--is-approved-radio-no") : undefined,
268
- disabled: (_approvalForm$disable5 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable5 !== void 0 ? _approvalForm$disable5 : false,
269
- label: "Mark as Pending",
270
- value: 0
271
- }))), isApproved === 0 && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement("h5", {
272
- className: "type-b2-400"
273
- }, "Remarks"), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
274
- name: "remarks-".concat(questionId),
275
- initialValue: (_approvalForm$remarks = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.remarks) !== null && _approvalForm$remarks !== void 0 ? _approvalForm$remarks : "",
276
- rules: [{
277
- required: true,
278
- message: dataTest ? /*#__PURE__*/_react.default.createElement("span", {
279
- "data-test": "".concat(dataTest, "--remarks-validation-message")
280
- }, "Remarks cannot be empty.") : "Remarks cannot be empty."
281
- }]
282
- }, /*#__PURE__*/_react.default.createElement(_antd.Input.TextArea, {
283
- "data-test": dataTest ? "".concat(dataTest, "--remarks") : undefined,
284
329
  disabled: (_approvalForm$disable6 = approvalForm === null || approvalForm === void 0 ? void 0 : approvalForm.disabled) !== null && _approvalForm$disable6 !== void 0 ? _approvalForm$disable6 : false
285
- })))), actionRenderType === "buttonWithForm" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
330
+ }, actionContent)), renderApprovalSection(), actionRenderType === "buttonWithForm" && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
286
331
  validateStatus: form.getFieldError("validateDocumentButton#".concat(questionId)) ? "error" : "",
287
332
  help: /*#__PURE__*/_react.default.createElement("div", {
288
333
  className: "errorForRtv"