oa-componentbook 1.0.1-stage.364 → 1.0.1-stage.366

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 (20) 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-tag/CustomTag.js +1 -1
  5. package/build/index.js +14 -0
  6. package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js +215 -0
  7. package/build/layout/EntityOverviewLayout/reducer/entityOverviewLayoutReducer.js +77 -0
  8. package/build/layout/EntityOverviewLayout/styles.js +13 -0
  9. package/build/layout/GenricLayOut/GenricLayOut.js +15 -1
  10. package/build/layout/GenricLayOut/components/ProfileSection.js +85 -0
  11. package/build/layout/GenricLayOut/reducer/layoutReducer.js +5 -1
  12. package/build/layout/GenricLayOut/styles.js +6 -3
  13. package/build/widgets/oa-form-widget/FormWidget.js +29 -5
  14. package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js +115 -0
  15. package/build/widgets/oa-widget-profile-data/styles.js +13 -0
  16. package/build/widgets/oa-widget-progressive-steps/ProgressiveStepsWidget.js +92 -126
  17. package/build/widgets/oa-widget-progressive-steps/styles.js +1 -1
  18. package/build/widgets/oa-widget-user-management/UserManagementWidget.js +332 -0
  19. package/build/widgets/oa-widget-user-management/styles.js +15 -0
  20. package/package.json +1 -1
package/build/layout/GenricLayOut/GenricLayOut.js CHANGED
@@ -36,6 +36,7 @@ var _CustomViewer = _interopRequireDefault(require("../../components/oa-componen
36
36
  var _StaticFilter = _interopRequireDefault(require("./components/StaticFilter"));
37
37
  var _downloadFile = _interopRequireDefault(require("../../utils/download-file"));
38
38
  var _AppliedFilters = _interopRequireDefault(require("./components/AppliedFilters"));
39
+ var _ProfileSection = _interopRequireDefault(require("./components/ProfileSection"));
39
40
  var _FilterListRounded = _interopRequireDefault(require("@material-ui/icons/FilterListRounded"));
40
41
  const _excluded = ["filteredValue"],
41
42
  _excluded2 = ["sortOrder"];
@@ -77,6 +78,7 @@ function GenricLayOut(_ref) {
77
78
  handleModalCloseSuccess,
78
79
  handleSubHeadingSelectClick,
79
80
  handleCollapsibleKeyData,
81
+ handleProfileReroute,
80
82
  handleTableFooterApi
81
83
  } = {}
82
84
  } = _ref;
@@ -102,7 +104,8 @@ function GenricLayOut(_ref) {
102
104
  rightHeaderSecondButton,
103
105
  imageViewer,
104
106
  customDrawer,
105
- staticFilter
107
+ staticFilter,
108
+ profileData
106
109
  } = state !== null && state !== void 0 ? state : {};
107
110
  (0, _react.useEffect)(() => {
108
111
  init();
@@ -2042,10 +2045,21 @@ function GenricLayOut(_ref) {
2042
2045
  className: "oaRightLayouts"
2043
2046
  }, /*#__PURE__*/_react.default.createElement("div", {
2044
2047
  className: "oaTopHeaderAndBtnSec "
2048
+ }, /*#__PURE__*/_react.default.createElement("div", {
2049
+ className: "headerContent"
2050
+ }, /*#__PURE__*/_react.default.createElement("div", {
2051
+ className: "headerLeft"
2045
2052
  }, (header === null || header === void 0 ? void 0 : header.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, _extends({}, header, {
2046
2053
  onSubHeadingClick: onSubHeadingClick,
2047
2054
  handleSubHeadingSelect: handleSubHeadingSelect
2048
2055
  }))), /*#__PURE__*/_react.default.createElement("div", {
2056
+ className: "headerRight"
2057
+ }, /*#__PURE__*/_react.default.createElement(_ProfileSection.default, {
2058
+ profileData: profileData,
2059
+ onProfileClick: () => {
2060
+ handleProfileReroute();
2061
+ }
2062
+ })))), /*#__PURE__*/_react.default.createElement("div", {
2049
2063
  className: "layoutHeadingAndSearch"
2050
2064
  }, (imageViewer === null || imageViewer === void 0 ? void 0 : imageViewer.visible) && /*#__PURE__*/_react.default.createElement(_CustomViewer.default, {
2051
2065
  open: true,
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 .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 .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
@@ -36,6 +36,7 @@ var _CustomTooltip = _interopRequireDefault(require("../../components/oa-compone
36
36
  var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
37
37
  var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
38
38
  var _CollapsibleKeyValueWidget = _interopRequireDefault(require("../oa-widget-collapsible-key-value/CollapsibleKeyValueWidget"));
39
+ var _UserManagementWidget = _interopRequireDefault(require("../oa-widget-user-management/UserManagementWidget"));
39
40
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
40
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); }
41
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; }
@@ -352,6 +353,7 @@ function FormWidget(props) {
352
353
  key: item.key,
353
354
  data: item.value,
354
355
  info: keyValueInfo,
356
+ columnLayout: item === null || item === void 0 ? void 0 : item.columnLayout,
355
357
  customClassName: item.className,
356
358
  tagStatus: item === null || item === void 0 ? void 0 : item.tagStatus
357
359
  });
@@ -407,6 +409,19 @@ function FormWidget(props) {
407
409
  onFetchMoreInfo: item === null || item === void 0 ? void 0 : item.onFetchMoreInfo,
408
410
  handleCollapsibleKeyData: handleCollapsibleKeyData
409
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)));
410
425
  case "field":
411
426
  return renderFieldWidget(item);
412
427
  default:
@@ -441,19 +456,28 @@ function FormWidget(props) {
441
456
  heading,
442
457
  headingInfo,
443
458
  items,
444
- topDividerRequired
459
+ topDividerRequired,
460
+ columnLayout
445
461
  } = group;
446
462
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
447
463
  key: index
448
464
  }, bordered ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topDividerRequired === true && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
449
465
  className: "dividerLine"
450
- }), Heading(heading, headingInfo), /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FieldBoxBorder, null, 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", {
451
467
  key: i
452
468
  }, renderWidget(item))))) : /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FieldWithoutBorder, null, topDividerRequired !== false && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
453
469
  className: "dividerLine"
454
- }), Heading(heading, headingInfo), items.map((item, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
455
- key: i
456
- }, renderWidget(item)))));
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
+ }))));
457
481
  }), /*#__PURE__*/_react.default.createElement(_FormWidgetStyle.FormWidgetStyle, null, visible && /*#__PURE__*/_react.default.createElement("div", {
458
482
  className: "formBottomAction"
459
483
  }, cancel && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
package/build/widgets/oa-widget-profile-data/ProfileDataWidget.js ADDED
@@ -0,0 +1,115 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ProfileDataWidget;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
10
+ var _styles = require("./styles");
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+ /* eslint-disable */
13
+
14
+ function ProfileDataWidget(_ref) {
15
+ let {
16
+ image,
17
+ title,
18
+ line1,
19
+ line2,
20
+ line3,
21
+ line4,
22
+ line5,
23
+ alignProfile
24
+ } = _ref;
25
+ // Determine what to display in the icon
26
+ const getIconContent = () => {
27
+ if (!(image !== null && image !== void 0 && image.visible)) return null;
28
+ if (image.imageType === "source" && image.imageFile) {
29
+ return /*#__PURE__*/_react.default.createElement("img", {
30
+ src: image.imageFile,
31
+ alt: "Profile",
32
+ style: {
33
+ width: "100%",
34
+ height: "100%",
35
+ borderRadius: "50%",
36
+ objectFit: "cover"
37
+ }
38
+ });
39
+ }
40
+ if (image.imageType === "letterIcon") {
41
+ const letter = title !== null && title !== void 0 && title.label ? title.label.charAt(0).toUpperCase() : "";
42
+ return letter;
43
+ }
44
+ return null;
45
+ };
46
+ return /*#__PURE__*/_react.default.createElement(_styles.ProfileDataContainer, {
47
+ alignProfile: alignProfile
48
+ }, (image === null || image === void 0 ? void 0 : image.visible) && /*#__PURE__*/_react.default.createElement(_styles.ProfileIcon, {
49
+ style: {
50
+ backgroundColor: (image === null || image === void 0 ? void 0 : image.bgColor) || "#1976d2",
51
+ color: (image === null || image === void 0 ? void 0 : image.color) || "#ffffff"
52
+ }
53
+ }, getIconContent()), /*#__PURE__*/_react.default.createElement(_styles.ProfileInfo, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
54
+ color: (title === null || title === void 0 ? void 0 : title.color) || "primary-content",
55
+ typography: (title === null || title === void 0 ? void 0 : title.typography) || "type-h3-500",
56
+ className: "company-name"
57
+ }, (title === null || title === void 0 ? void 0 : title.label) || ""), /*#__PURE__*/_react.default.createElement("div", {
58
+ className: "company-details"
59
+ }, line1 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
60
+ color: line1.color || "secondary-content",
61
+ typography: line1.typography || "type-b1-400"
62
+ }, line1.label || ""), line2 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
63
+ color: line2.color || "secondary-content",
64
+ typography: line2.typography || "type-b1-400"
65
+ }, line2.label || ""), line3 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
66
+ color: line3.color || "secondary-content",
67
+ typography: line3.typography || "type-b1-400"
68
+ }, line3.label || ""), line4 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
69
+ color: line4.color || "secondary-content",
70
+ typography: line4.typography || "type-b1-400"
71
+ }, line4.label || ""), line5 && /*#__PURE__*/_react.default.createElement(_Typography.default, {
72
+ color: line5.color || "secondary-content",
73
+ typography: line5.typography || "type-b1-400"
74
+ }, line5.label || ""))));
75
+ }
76
+ ProfileDataWidget.propTypes = {
77
+ image: _propTypes.default.shape({
78
+ visible: _propTypes.default.bool,
79
+ imageType: _propTypes.default.oneOf(["source", "letterIcon"]),
80
+ imageFile: _propTypes.default.string,
81
+ color: _propTypes.default.string,
82
+ bgColor: _propTypes.default.string
83
+ }),
84
+ title: _propTypes.default.shape({
85
+ label: _propTypes.default.string,
86
+ typography: _propTypes.default.string,
87
+ color: _propTypes.default.string
88
+ }),
89
+ line1: _propTypes.default.shape({
90
+ label: _propTypes.default.string,
91
+ typography: _propTypes.default.string,
92
+ color: _propTypes.default.string
93
+ }),
94
+ line2: _propTypes.default.shape({
95
+ label: _propTypes.default.string,
96
+ typography: _propTypes.default.string,
97
+ color: _propTypes.default.string
98
+ }),
99
+ line3: _propTypes.default.shape({
100
+ label: _propTypes.default.string,
101
+ typography: _propTypes.default.string,
102
+ color: _propTypes.default.string
103
+ }),
104
+ line4: _propTypes.default.shape({
105
+ label: _propTypes.default.string,
106
+ typography: _propTypes.default.string,
107
+ color: _propTypes.default.string
108
+ }),
109
+ line5: _propTypes.default.shape({
110
+ label: _propTypes.default.string,
111
+ typography: _propTypes.default.string,
112
+ color: _propTypes.default.string
113
+ }),
114
+ alignProfile: _propTypes.default.string
115
+ };
package/build/widgets/oa-widget-profile-data/styles.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ProfileInfo = exports.ProfileIcon = exports.ProfileDataContainer = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ var _templateObject, _templateObject2, _templateObject3;
9
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
+ const ProfileDataContainer = exports.ProfileDataContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-start;\n gap: 24px;\n padding: ", ";\n background: ", ";\n border-radius: ", ";\n margin: ", ";\n box-shadow: ", ";\n border: ", ";\n max-width: ", ";\n justify-content: ", ";\n\n @media (max-width: 768px) {\n flex-direction: column;\n align-items: center;\n text-align: center;\n gap: 16px;\n margin: ", ";\n padding: 24px;\n }\n"])), props => props.alignProfile === 'center' ? '32px' : '32px', props => props.alignProfile === 'center' ? 'transparent' : '#ffffff', props => props.alignProfile === 'center' ? '0' : '12px', props => props.alignProfile === 'center' ? '24px auto' : '24px', props => props.alignProfile === 'center' ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.1)', props => props.alignProfile === 'center' ? 'none' : '1px solid #f0f0f0', props => props.alignProfile === 'center' ? '600px' : 'none', props => props.alignProfile === 'center' ? 'center' : 'flex-start', props => props.alignProfile === 'center' ? '16px auto' : '16px');
12
+ const ProfileIcon = exports.ProfileIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 48px;\n font-weight: 700;\n flex-shrink: 0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n font-size: 36px;\n }\n"])));
13
+ const ProfileInfo = exports.ProfileInfo = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n\n .company-name {\n margin-bottom: 4px;\n font-size: 24px;\n font-weight: 700;\n color: #333333;\n }\n\n .company-details {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n .ant-typography {\n font-size: 14px;\n line-height: 1.5;\n color: #666666;\n }\n }\n"])));