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

package/build/components/oa-component-accordion/Accordion.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
@@ -11,14 +12,12 @@ var _KeyboardArrowUpRounded = _interopRequireDefault(require("@material-ui/icons
 var _styles = require("./styles");
 var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
 var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _KeyValueWidget = _interopRequireDefault(require("../../widgets/oa-widget-key-value/KeyValueWidget"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Renders a MaterialIcon that rotates depending on the state of isActive.
- *
- * @param {boolean} isActive - Whether the icon should be rotated or not.
- *
- * @returns {React.ReactElement} - A React element representing the CollapseIcon.
- */
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable */
 function CollapseIcon(_ref) {
   let {
     isActive
@@ -29,29 +28,40 @@ function CollapseIcon(_ref) {
     rotate: isActive ? 0 : 180
   });
 }
+function renderCustomBody(customBody, onActionClick) {
+  if (!customBody || !customBody.items) return null;
+  return customBody.items.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: index,
+    className: "custom-body-item"
+  }, item.heading && /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-body-heading"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: item.heading.type,
+    color: "primary-content"
+  }, item.heading.label)), item.dataConfig && item.dataConfig.type === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-body-content"
+  }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
+    data: item.dataConfig.data,
+    customClassName: "gst-details-keyvalue"
+  })), item.dataConfig && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-body-content"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: item.dataConfig.subType,
+    onClick: () => {
+      if (onActionClick && item.dataConfig.onClick) {
+        onActionClick(item.dataConfig.onClick, item.dataConfig);
+      }
+    },
+    label: item.dataConfig.label
+  }))));
+}
 CollapseIcon.propTypes = {
   isActive: _propTypes.default.bool.isRequired
 };
-
-/**
- * Accordion component that renders a collapsible panel with the given header text, body content,
- * and optional small text. The component is disabled if the `disabled` prop is true.
- *
- * @param {React.ReactNode} body - Content to be rendered in the collapsible panel.
- * @param {string} [dataTest] - String to be used as a data-test attribute on the component.
- * @param {boolean} [disabled=false] - Whether the component is disabled or not.
- * @param {string} headerText - Text to be displayed as the header of the collapsible panel.
- * @param {string} [smallText] - Optional small text to be displayed next to the header text.
- * @param {string | number} [key] - Key to be used for the collapsible panel.
- * @param {string | number} [defaultActiveKey] - Key of the collapsible panel that should be active by default.
- * @param {boolean} [hasContentPadding=true] - Whether to apply content padding to the collapsible panel or not.
- * @param {Function} [onChange=() => {}] - Function to be called when the panel is expanded or collapsed.
- * @param {string | number} [activeKey] - Key of the collapsible panel that is currently active.
- */
 function Accordion(_ref2) {
   let {
     body,
-    'data-test': dataTest,
+    "data-test": dataTest,
     disabled,
     headerText,
     smallText,
@@ -60,13 +70,17 @@ function Accordion(_ref2) {
     hasContentPadding,
     // New prop to determine whether to apply contentPadding
     onChange,
-    activeKey
+    activeKey,
+    componentConfig,
+    subtext,
+    customBody,
+    onActionClick
   } = _ref2;
   const themeConfig = {
     components: {
       Collapse: {
-        headerBg: _ColorVariablesMap.default['--color-secondary-background'],
-        contentPadding: hasContentPadding ? '20px 24px' : '0' // Adjust the value as needed
+        headerBg: _ColorVariablesMap.default["--color-secondary-background"],
+        contentPadding: hasContentPadding ? "20px 24px" : "0" // Adjust the value as needed
       }
     }
   };
@@ -75,43 +89,89 @@ function Accordion(_ref2) {
   }, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
     expandIcon: CollapseIcon,
     expandIconPosition: "end",
-    defaultActiveKey: disabled ? '-1' : defaultActiveKey,
+    defaultActiveKey: disabled ? "-1" : defaultActiveKey,
     onChange: onChange
   }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
     "data-test": dataTest ? "".concat(dataTest, "--complete") : undefined,
-    collapsible: disabled ? 'disabled' : undefined,
+    collapsible: disabled ? "disabled" : undefined,
     key: activeKey || key,
     header: /*#__PURE__*/_react.default.createElement("div", {
       "data-test": dataTest ? "".concat(dataTest, "--header") : undefined,
       className: "type-button-500"
-    }, headerText, smallText && /*#__PURE__*/_react.default.createElement(_styles.SmallText, null, smallText))
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-content"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-main"
+    }, componentConfig && (componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.type) === "tag" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-tag"
+    }, /*#__PURE__*/_react.default.createElement(_CustomTag.default, _extends({
+      type: componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.subType,
+      label: componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.label
+    }, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.props))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-text"
+    }, headerText, smallText && /*#__PURE__*/_react.default.createElement(_styles.SmallText, null, smallText)), subtext && /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-subtext"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: subtext === null || subtext === void 0 ? void 0 : subtext.type,
+      color: "secondary-content"
+    }, subtext === null || subtext === void 0 ? void 0 : subtext.label)))))
+  }, body && /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridContainer"
+  }, body), customBody && /*#__PURE__*/_react.default.createElement("div", {
     className: "gridContainer"
-  }, body)))));
+  }, renderCustomBody(customBody, onActionClick))))));
 }
 Accordion.propTypes = {
   body: _propTypes.default.node,
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   disabled: _propTypes.default.bool,
   headerText: _propTypes.default.string.isRequired,
   smallText: _propTypes.default.string,
   hasContentPadding: _propTypes.default.bool,
-  // New prop for controlling contentPadding
   key: _propTypes.default.string,
   defaultActiveKey: _propTypes.default.string,
   onChange: _propTypes.default.func,
-  activeKey: _propTypes.default.string || _propTypes.default.number
+  activeKey: _propTypes.default.string || _propTypes.default.number,
+  componentConfig: _propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    subType: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    props: _propTypes.default.object
+  }),
+  subtext: _propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired
+  }),
+  customBody: _propTypes.default.shape({
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      heading: _propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        label: _propTypes.default.string.isRequired
+      }),
+      dataConfig: _propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        data: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]).isRequired,
+        subType: _propTypes.default.string,
+        label: _propTypes.default.string,
+        onClick: _propTypes.default.string
+      })
+    }))
+  }),
+  onActionClick: _propTypes.default.func
 };
 Accordion.defaultProps = {
-  body: '',
-  'data-test': null,
+  body: "",
+  "data-test": null,
   disabled: false,
-  smallText: '',
-  key: '1',
-  defaultActiveKey: '1',
+  smallText: "",
+  key: "1",
+  defaultActiveKey: "1",
   hasContentPadding: true,
-  // Default value for contentPadding
   onChange: () => {},
-  activeKey: null
+  activeKey: null,
+  componentConfig: null,
+  subtext: null,
+  customBody: null,
+  onActionClick: null
 };
 var _default = exports.default = Accordion;

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

@@ -9,5 +9,5 @@ var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #E21616;\n  margin: 0 0 0 4px;\n"])));
-const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n  background: var(--color-disabled-button);\n}\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text{\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse>.ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse{\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  \n  .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n    padding: 12px 24px;\n  }\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content>.ant-collapse-content-box {\n      padding: 16px;\n  }\n  .ant-collapse>.ant-collapse-item>.ant-collapse-header {\n    padding: 12px 16px;\n  }\n  }\n"])));
+const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #e21616;\n  margin: 0 0 0 4px;\n"])));
+const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-collapse .ant-collapse-item-disabled {\n    background: var(--color-disabled-button);\n  }\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text {\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse > .ant-collapse-item:last-child,\n  .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n  .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse > .ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse {\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n\n  .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n    padding: 12px 24px;\n  }\n\n  /* New styles for header content layout */\n  .header-content {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .header-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex: 1;\n    gap: 8px;\n  }\n\n  .header-tag {\n    margin-bottom: 4px;\n  }\n\n  .header-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .header-subtext {\n    margin-top: 4px;\n    color: var(--color-secondary-content);\n  }\n\n  /* Custom body styles */\n  .custom-body-item {\n    margin-bottom: 24px;\n  }\n\n  .custom-body-heading {\n    margin-bottom: 16px;\n  }\n\n  .custom-body-content {\n    // margin-top: 8px;\n  }\n\n  .custom-body-button {\n    margin-top: 16px;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .gst-details-keyvalue {\n    .key-value-item {\n      margin-bottom: 4px;\n    }\n\n    .key {\n      font-weight: 400;\n      color: var(--color-primary-content);\n    }\n\n    .value {\n      font-weight: 700;\n      color: var(--color-primary-content);\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n      padding: 16px;\n    }\n    .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n      padding: 12px 16px;\n    }\n  }\n"])));

package/build/components/oa-component-button/CustomButton.js

@@ -61,14 +61,14 @@ function CustomButton(_ref) {
   }, domProps), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-container"
   }, iconConfig.position === 'left' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
-    size: iconSize
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize
   }), label && (showEllipsis ? /*#__PURE__*/_react.default.createElement(_styles.EllipsisTypography, {
     title: label,
     typography: buttonTypography
   }, label) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: buttonTypography
   }, label)), iconConfig.position === 'right' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
-    size: iconSize
+    size: (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.size) || iconSize
   })));
 }
 CustomButton.propTypes = {
@@ -80,7 +80,8 @@ CustomButton.propTypes = {
   iconConfig: _propTypes.default.shape({
     icon: _propTypes.default.node,
     position: _propTypes.default.oneOf(['left', 'right']),
-    style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+    style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+    size: _propTypes.default.number
   }),
   label: _propTypes.default.node,
   showEllipsis: _propTypes.default.bool,
@@ -93,7 +94,8 @@ CustomButton.defaultProps = {
   disabled: false,
   htmlType: 'button',
   iconConfig: {
-    position: 'left'
+    position: 'left',
+    size: 20
   },
   label: '',
   showEllipsis: false,

package/build/components/oa-component-icons/MaterialIcon.js

@@ -39,7 +39,7 @@ function MaterialIcon(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   const renderedIcon = /*#__PURE__*/_react.default.createElement(Icon, _extends({
     style: _objectSpread({
-      color: color ? _ColorVariablesMap.default["--color-".concat(color)] : undefined,
+      color: color && _ColorVariablesMap.default["--color-".concat(color)] ? _ColorVariablesMap.default["--color-".concat(color)] : color || undefined,
       fontSize: size ? "".concat(size, "px") : 'inherit',
       transition: 'transform .3s ease',
       transform: "rotate(".concat(rotate, "deg)")

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

@@ -11,4 +11,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: flex-end;\n  margin: 36px 0 0;\n  @media (max-width: 768px) {\n    justify-content: space-between;\n    button{\n      width: 100%;\n    }\n  }\n"])));
 const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 12px 0 0;\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 32px 0 0 0;\n\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 32px 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  img {\n    height: 36px;\n    width: 36px;\n  }\n"])));

package/build/components/oa-component-tag/CustomTag.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable */
 /**
  * A simple tag component that displays a label.
  *
@@ -21,40 +23,44 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 function CustomTag(_ref) {
   let {
-    'data-test': dataTest,
+    "data-test": dataTest,
     label,
     type,
     visible,
     bgColor,
     borderColor,
-    textColor
+    textColor,
+    style
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
     "data-test": dataTest,
     type: type,
     visible: visible,
     bgColor: bgColor,
     borderColor: borderColor,
     textColor: textColor
-  }, /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, style && {
+    style
+  }), /*#__PURE__*/_react.default.createElement(_styles.CenteredTextContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-button-500"
   }, label)));
 }
 CustomTag.propTypes = {
-  'data-test': _propTypes.default.string,
+  "data-test": _propTypes.default.string,
   label: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf(['success', 'pending', 'failed', 'recommended', 'primary', 'blue']),
+  type: _propTypes.default.oneOf(["success", "pending", "failed", "recommended", "primary", "blue", "custom"]),
   visible: _propTypes.default.bool,
   bgColor: _propTypes.default.string,
   borderColor: _propTypes.default.string,
-  textColor: _propTypes.default.string
+  textColor: _propTypes.default.string,
+  style: _propTypes.default.object
 };
 CustomTag.defaultProps = {
-  'data-test': null,
-  type: '',
+  "data-test": null,
+  type: "",
   visible: true,
-  bgColor: '',
-  borderColor: '',
-  textColor: ''
+  bgColor: "",
+  borderColor: "",
+  textColor: ""
 };
 var _default = exports.default = CustomTag;

package/build/index.js

@@ -365,6 +365,12 @@ Object.defineProperty(exports, "ElevationDemo", {
     return _ElevationDemo.default;
   }
 });
+Object.defineProperty(exports, "EntityOverviewLayout", {
+  enumerable: true,
+  get: function get() {
+    return _EntityOverviewLayout.default;
+  }
+});
 Object.defineProperty(exports, "FeedbackWidget", {
   enumerable: true,
   get: function get() {
@@ -491,6 +497,12 @@ Object.defineProperty(exports, "Preview", {
     return _Preview.default;
   }
 });
+Object.defineProperty(exports, "ProfileDataWidget", {
+  enumerable: true,
+  get: function get() {
+    return _ProfileDataWidget.default;
+  }
+});
 Object.defineProperty(exports, "ProgressiveStepsWidget", {
   enumerable: true,
   get: function get() {
@@ -744,6 +756,8 @@ var _CustomDocumentViewer = _interopRequireDefault(require("./dev/oa-component-d
 var _DocumentSideModal = _interopRequireDefault(require("./dev/oa-widget-document-modal/DocumentSideModal"));
 var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
 var _GenricLayOut = _interopRequireDefault(require("./layout/GenricLayOut/GenricLayOut"));
+var _EntityOverviewLayout = _interopRequireDefault(require("./layout/EntityOverviewLayout/EntityOverviewLayout"));
+var _ProfileDataWidget = _interopRequireDefault(require("./widgets/oa-widget-profile-data/ProfileDataWidget"));
 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); }
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/layout/EntityOverviewLayout/EntityOverviewLayout.js

@@ -0,0 +1,215 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EntityOverviewLayout;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+var _react = _interopRequireWildcard(require("react"));
+var _entityOverviewLayoutReducer = require("./reducer/entityOverviewLayoutReducer");
+var _GlobalCss = _interopRequireDefault(require("../../global-css/GlobalCss"));
+var _staticConfigResolver = _interopRequireDefault(require("../GenricLayOut/resolver/staticConfigResolver"));
+var _CustomNotification = _interopRequireDefault(require("../../components/oa-component-notification/CustomNotification"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
+var _antd = require("antd");
+var _ProfileDataWidget = _interopRequireDefault(require("../../widgets/oa-widget-profile-data/ProfileDataWidget"));
+var _Accordion = _interopRequireDefault(require("../../components/oa-component-accordion/Accordion"));
+var _KeyValueWidget = _interopRequireDefault(require("../../widgets/oa-widget-key-value/KeyValueWidget"));
+var _CustomDrawer = _interopRequireDefault(require("../../components/oa-component-drawer/CustomDrawer"));
+var _DetailDataLayout = _interopRequireDefault(require("../DetailDataLayout/DetailDataLayout"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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 */
+function EntityOverviewLayout(_ref) {
+  var _backButton$iconConfi, _backButton$iconConfi2, _drawer$data, _drawer$data$drawer$a, _drawer$data2;
+  let {
+    config,
+    getInitialData,
+    handlers: {
+      handleBackButton,
+      addUserClick,
+      deleteUserClick,
+      editUserClick,
+      handleDrawerData
+    }
+  } = _ref;
+  const [state, dispatch] = (0, _react.useReducer)(_entityOverviewLayoutReducer.entityOverviewLayoutReducer, config !== null && config !== void 0 ? config : _entityOverviewLayoutReducer.initialState);
+  const stateRef = (0, _react.useRef)(state);
+  const notificationRef = (0, _react.useRef)(null);
+  const openNotification = (0, _react.useCallback)(params => notificationRef.current.openNotification(params), []);
+  const {
+    pageTitle,
+    backButton,
+    profileData,
+    accordionData,
+    drawer,
+    modal
+  } = state !== null && state !== void 0 ? state : {};
+  (0, _react.useEffect)(() => {
+    init();
+  }, []);
+  (0, _react.useEffect)(() => {
+    stateRef.current = state;
+  }, [state]);
+  const init = async () => {
+    dispatch({
+      type: _entityOverviewLayoutReducer.actionTypes.SET_LOADING,
+      payload: true
+    });
+    if (getInitialData) {
+      var _state$misc;
+      const {
+        error,
+        data
+      } = await (getInitialData === null || getInitialData === void 0 ? void 0 : getInitialData(_objectSpread({}, (_state$misc = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc !== void 0 ? _state$misc : {})));
+      if (error) {
+        showErrorNotification(error);
+        const dynamicConfig = (0, _staticConfigResolver.default)(config, {});
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.INIT,
+          payload: dynamicConfig
+        });
+      } else {
+        const dynamicConfig = (0, _staticConfigResolver.default)(config, data !== null && data !== void 0 ? data : {});
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.INIT,
+          payload: dynamicConfig
+        });
+      }
+    } else {
+      const dynamicConfig = (0, _staticConfigResolver.default)(config, {});
+      dispatch({
+        type: _entityOverviewLayoutReducer.actionTypes.INIT,
+        payload: dynamicConfig
+      });
+    }
+    dispatch({
+      type: _entityOverviewLayoutReducer.actionTypes.SET_LOADING,
+      payload: false
+    });
+  };
+  const showErrorNotification = message => {
+    openNotification({
+      description: message,
+      type: "failure",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+  const showSuccessNotification = message => {
+    openNotification({
+      description: message,
+      type: "success",
+      mode: "dark",
+      showIcon: true,
+      placement: "bottomRight"
+    });
+  };
+  const handleActionClick = (actionType, actionData) => {
+    var _config$drawer, _drawerDetailData$dat, _state$drawer;
+    switch (actionType) {
+      case "PROFILE-DRAWER":
+        const record = _objectSpread({}, config === null || config === void 0 || (_config$drawer = config.drawer) === null || _config$drawer === void 0 || (_config$drawer = _config$drawer.data) === null || _config$drawer === void 0 ? void 0 : _config$drawer[actionData === null || actionData === void 0 ? void 0 : actionData.drawerKey]);
+        const drawerDetailData = handleDrawerData(actionData === null || actionData === void 0 ? void 0 : actionData.drawerData);
+        console.log(record, "record");
+        console.log(drawerDetailData, "drawerDetailData");
+        const dynamicConfig = (0, _staticConfigResolver.default)(record, (_drawerDetailData$dat = drawerDetailData === null || drawerDetailData === void 0 ? void 0 : drawerDetailData.data) !== null && _drawerDetailData$dat !== void 0 ? _drawerDetailData$dat : {});
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.SET_DRAWER,
+          payload: {
+            data: _objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$drawer = state.drawer) === null || _state$drawer === void 0 ? void 0 : _state$drawer.data) || {}), {}, {
+              [actionData === null || actionData === void 0 ? void 0 : actionData.drawerKey]: dynamicConfig
+            }),
+            active: actionData === null || actionData === void 0 ? void 0 : actionData.drawerKey
+          }
+        });
+        dispatch({
+          type: _entityOverviewLayoutReducer.actionTypes.TOGGLE_DRAWER,
+          payload: "profile-edit"
+        });
+        break;
+      default:
+        console.log("Unknown action type:", actionType);
+    }
+  };
+  console.log(state, "EntityOverviewLayout state");
+  return /*#__PURE__*/_react.default.createElement(_styles.ProfilePageStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fullPageLayout"
+  }, /*#__PURE__*/_react.default.createElement(_GlobalCss.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaRightLayouts"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "oaTopHeaderAndBtnSec"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerContent"
+  }, (backButton === null || backButton === void 0 ? void 0 : backButton.visible) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "backButton",
+    onClick: () => {
+      handleBackButton();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: (backButton === null || backButton === void 0 || (_backButton$iconConfi = backButton.iconConfig) === null || _backButton$iconConfi === void 0 ? void 0 : _backButton$iconConfi.color) || "primary-content",
+    size: (backButton === null || backButton === void 0 || (_backButton$iconConfi2 = backButton.iconConfig) === null || _backButton$iconConfi2 === void 0 ? void 0 : _backButton$iconConfi2.size) || 24,
+    icon: backButton.iconConfig.icon
+  })), (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.visible) && (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title.color,
+    typography: pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title.type,
+    className: "pageTitle"
+  }, pageTitle.title))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "profileContent"
+  }, (profileData === null || profileData === void 0 ? void 0 : profileData.visible) && /*#__PURE__*/_react.default.createElement(_ProfileDataWidget.default, _extends({}, profileData === null || profileData === void 0 ? void 0 : profileData.data, {
+    alignProfile: profileData === null || profileData === void 0 ? void 0 : profileData.alignProfile
+  })), (accordionData === null || accordionData === void 0 ? void 0 : accordionData.visible) && Array.isArray(accordionData === null || accordionData === void 0 ? void 0 : accordionData.data) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "accordionsContainer"
+  }, accordionData.data.map((accordion, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: accordion.key || index,
+    className: "accordion-item"
+  }, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    key: accordion.key || index,
+    headerText: accordion.headerText,
+    defaultActiveKey: accordion.defaultActiveKey,
+    activeKey: accordion.activeKey,
+    subtext: accordion.subText,
+    componentConfig: accordion.componentConfig,
+    disabled: accordion.disabled,
+    hasContentPadding: accordion.hasContentPadding,
+    onChange: activeKeys => {
+      if (accordion.onChange) {
+        accordion.onChange(activeKeys);
+      }
+    },
+    customBody: accordion.customBody,
+    onActionClick: handleActionClick
+  })))))), /*#__PURE__*/_react.default.createElement(_CustomNotification.default, {
+    ref: notificationRef
+  }), /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    className: "oaDrawer",
+    open: (drawer === null || drawer === void 0 ? void 0 : drawer.visible) === true,
+    onClose: () => dispatch({
+      type: _entityOverviewLayoutReducer.actionTypes.CLOSE_DRAWER
+    }),
+    title: drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[drawer === null || drawer === void 0 ? void 0 : drawer.active]) === null || _drawer$data === void 0 ? void 0 : _drawer$data.title,
+    width: 860,
+    footer: null
+  }, /*#__PURE__*/_react.default.createElement(_DetailDataLayout.default, _extends({}, (_drawer$data$drawer$a = drawer === null || drawer === void 0 || (_drawer$data2 = drawer.data) === null || _drawer$data2 === void 0 ? void 0 : _drawer$data2[drawer === null || drawer === void 0 ? void 0 : drawer.active]) !== null && _drawer$data$drawer$a !== void 0 ? _drawer$data$drawer$a : {}, {
+    customPageModal: modal,
+    addUserClick: addUserClick,
+    deleteUserClick: deleteUserClick,
+    editUserClick: editUserClick
+  }))))));
+}
+EntityOverviewLayout.propTypes = {};
+EntityOverviewLayout.defaultProps = {};