oa-componentbook 0.18.124 → 0.18.126

package/build/components/oa-component-header/CustomHeader.js

@@ -5,8 +5,92 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = HeaderBar;
 var _react = _interopRequireDefault(require("react"));
+var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+var _VerticalAlignBottom = _interopRequireDefault(require("@material-ui/icons/VerticalAlignBottom"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
 var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _CustomInput = _interopRequireDefault(require("../oa-component-input/CustomInput"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const noRefCheck = () => {};
 function HeaderBar() {
-  return /*#__PURE__*/_react.default.createElement("h1", null, "Header");
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "customHeader"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexProp"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowBack.default,
+    size: 24,
+    className: "margin-right-12"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, "My Sub Outlets")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec deskView"
+  }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _Search.default
+      }),
+      position: 'left'
+    },
+    label: "Search",
+    onClick: noRefCheck,
+    type: "text-only",
+    className: "margin-right-24"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _VerticalAlignBottom.default
+      }),
+      position: 'left'
+    },
+    label: "Export",
+    onClick: noRefCheck,
+    type: "text-only",
+    className: "margin-right-24"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    "data-test": "button",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _Add.default
+      }),
+      position: 'left'
+    },
+    label: "Add Sub Outlet",
+    onClick: noRefCheck,
+    size: "Medium",
+    type: "secondary"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec mobView"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 24,
+    className: "margin-right-16",
+    icon: _Search.default
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 24,
+    className: "margin-right-16",
+    icon: _VerticalAlignBottom.default
+  }), /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    color: "primary",
+    size: 24,
+    icon: _Add.default
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerSearch"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowBack.default,
+    size: 24,
+    className: "margin-right-12"
+  }), /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    placeholder: "Search by option 1, option 2 ...."
+  }))));
 }

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

@@ -9,4 +9,4 @@ var _templateObject;
 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 StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-progress-line {\n    margin-inline-end: 0;\n    margin-bottom: 0;\n}\n.ant-progress .ant-progress-bg {height:4px !important;}\n.ant-progress {line-height:0; height:4px}\n.ant-progress .ant-progress-outer { height:4px !important;}\n"])));
+const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexProp{display:flex; flex-direction: row; align-items: center; justify-content: space-between; width:100%;}\n.flexSec{display:flex; flex-direction: row; justify-content: flex-start;}\n.flexSec svg{cursor:pointer;}\n.mobView{display:none;}\n.deskView{display:flex;}\n.headerSearch {display: flex; width:100%; flex-direction: row; justify-content: flex-start; align-items: center;  background-color: var(--color-primary-background); position: absolute; padding: 6px 0; left: 0; right: 0;}\n.customHeader{min-height: 60px; position: relative; display: flex; align-items: center;   justify-content: space-between;}\n\n@media only screen and (max-width: 600px) {\n.mobView{display:flex;}\n.deskView{display:none;}\n.headerSearch {align-items: flex-start; flex-direction: column; justify-content: flex-start; padding: 18px 0; }\n.headerSearch input{margin:18px 0 0 0;} \n\n}\n\n\n"])));

package/build/global-css/GridLayout.js

@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // TODO: Figure out a way to make this work with storybook.
 // Can be used to wrap the entire application, to make these styles available to every component
 
-const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px !important;\n  }\n }\n@media (max-width: 600px) {\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n      vertical-align: middle;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n }\n}\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n\n"])));
+const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n\n.container-fluid {\n  width: 100%;\n  padding: 0 16px;\n}\n\n.row {\n  display: flex;\n  flex-direction: column;\n}\n\n.gutter {\n  padding: 0 24px 0 0;\n}\n\n.row::after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n\n@media (min-width: 768px) {\n  .row {\n    flex-direction: row;\n  }\n\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n\n  .col-sm-9 {\n    width: 75%;\n  }\n\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n\n  .col-md-2 {\n    width: 16.66667%;\n  }\n\n  .col-md-3 {\n    width: 25%;\n  }\n\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n  .gutter {\n    padding: 0 24px 0 0;\n  }\n\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n\n  .col-lg-3 {\n    width: 25%;\n  }\n\n  .col-lg-4 {\n    width: 33.33333%;\n  }\n\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n\n  .col-lg-6 {\n    width: 50%;\n  }\n\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n\n  .col-lg-9 {\n    width: 75%;\n  }\n\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n.ant-modal .ant-modal-content {\n  padding: 24px 24px 32px;\n  border-radius: 12px;\n }\n @media (max-width: 372px) {\n  .ant-picker-date-panel .ant-picker-body{\n    padding: 8px;\n  }\n }\n@media (max-width: 600px) {\n  .ant-picker-dropdown .ant-picker-date-panel{\n    width: 100%;\n  }\n  .ant-picker-dropdown .ant-picker-time-panel-column {\n    overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n    width: 2px;\n  }\n\n  .ant-modal-root .ant-modal-wrap {\n    position: fixed;\n    overflow: inherit;\n  }\n  .ant-modal-root .ant-modal-centered .ant-modal{\n      vertical-align: middle;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n    width: 100% !important;\n    max-width: 100%!important;\n    // transform-origin: bottom !important;\n    //animation-duration: 0s !important;\n    animation-name: slideUp;\n    animation-duration: 0.2s;\n    transition: .3s ease-in-out;\n    animation-timing-function: ease-in;\n    }\n    @keyframes slideUp {\n      0%,\n      50% {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n       \n      60%,\n      100% {\n        transform: translateY(0);\n        opacity: 1;\n      \n      }\n    }\n .ant-modal .ant-modal-content {\n  bottom: -8px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  border-bottom-left-radius: 0px;\n  border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n  max-height: calc(90vh - 126px);\n  overflow: auto;\n }\n}\n@media (min-width: 1200px) {\n  .gutter {\n    padding: 0 32px 0 0;\n  }\n\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n  \n  .col-xl-2 {\n    width: 16.66667%;\n  }\n\n  .col-xl-3 {\n    width: 25%;\n  }\n\n  .col-xl-4 {\n    width: 33.33333%;\n  }\n\n  .col-xl-5 {\n    width: 41.66667%;\n  }\n\n  .col-xl-6 {\n    width: 50%;\n  }\n\n  .col-xl-7 {\n    width: 58.33333%;\n  }\n\n  .col-xl-8 {\n    width: 66.66667%;\n  }\n\n  .col-xl-9 {\n    width: 75%;\n  }\n\n  .col-xl-10 {\n    width: 83.33333%;\n  }\n\n  .col-xl-11 {\n    width: 91.66667%;\n  }\n\n  .col-xl-12 {\n    width: 100%;\n  }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n  padding: 12px 24px;\n}\n.ant-dropdown-menu{\n  min-width: 256px;\n  top: 4px;\n}\n.ant-space-item span{\n  line-height: 0 !important;\n  display: flex;\n}\n\n"])));
 var _default = exports.default = GridLayout;

package/build/index.js

@@ -131,6 +131,18 @@ Object.defineProperty(exports, "CustomFormItem", {
     return _CustomFormItem.default;
   }
 });
+Object.defineProperty(exports, "CustomFormWidget", {
+  enumerable: true,
+  get: function get() {
+    return _CustomFormWidget.default;
+  }
+});
+Object.defineProperty(exports, "CustomHeaderWidget", {
+  enumerable: true,
+  get: function get() {
+    return _CustomHeaderWidget.default;
+  }
+});
 Object.defineProperty(exports, "CustomInfo", {
   enumerable: true,
   get: function get() {
@@ -485,6 +497,8 @@ var _MembershipCard = _interopRequireDefault(require("./widgets/oa-widget-member
 var _MembershipDetailCard = _interopRequireDefault(require("./widgets/oa-widget-detailcard/MembershipDetailCard"));
 var _ServiceCard = _interopRequireDefault(require("./widgets/oa-widget-servicecard/ServiceCard"));
 var _CustomProgressBar = _interopRequireDefault(require("./components/oa-component-progress-bar/CustomProgressBar"));
+var _CustomHeaderWidget = _interopRequireDefault(require("./widgets/oa-widget-header/CustomHeaderWidget"));
+var _CustomFormWidget = _interopRequireDefault(require("./widgets/oa-widget-form/CustomFormWidget"));
 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/widgets/oa-widget-document-upload/DocUploadWidget.js

@@ -20,8 +20,6 @@ var _styles = require("./styles");
 var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
 var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
 var _PdfSampleImage = _interopRequireDefault(require("../../images/PdfSampleImage.png"));
-var _upload = _interopRequireDefault(require("../../images/upload.svg"));
-var _CustomIcon = _interopRequireDefault(require("../../components/oa-component-icons/CustomIcon"));
 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; }
@@ -125,11 +123,11 @@ function DocumentUpload(props) {
       background: 'none'
     },
     type: "button"
-  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
-    className: "UploadImg",
-    alt: "phone img",
-    src: _upload.default
-  }), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
+  }, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.UploadOutlined, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, "Upload"));
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, (heading || subText) && /*#__PURE__*/_react.default.createElement("div", {
     className: "uploadSecPad"
   }, heading && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -137,15 +135,13 @@ function DocumentUpload(props) {
     className: "type-t2-700"
   }, heading, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "negative"
-  }, " *"))), subText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, "*"))), subText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "secondary-content",
     className: "type-b2-400"
   }, subText)), infoText && /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
     color: "background-warning",
     description: infoText
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "uploadDiv"
-  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     theme: {
       token: {
         colorBorder: _ColorVariablesMap.default['--color-primary'],

package/build/widgets/oa-widget-document-upload/styles.js

@@ -9,5 +9,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 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) } })); }
-const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-form-item{\n  margin-bottom: 0;\n}\n.ant-upload button{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n} \n.uploadDiv{\n  width: 96px;\n}\n.UploadImg img{\n  height: 24px;\n  width: 24px;\n\n}\n.UploadImg{\n  justify-content: center;\n  cursor: pointer;\n}\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done{\n    border: 1px solid var(--color-divider) !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before ant-upload-list-item-actions > a\n  {\n    background: red !important;\n  }\n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before{\n    background: transparent;\n    opacity: 1;\n  }\n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n    opacity: 1;\n  }\n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n    color: #fff;\n  }\n  @media only screen and (max-width: 600px) {\n    .uploadDiv {\n      width: 64px;\n  }\n  }\n"])));
+const MainStyleSec = exports.MainStyleSec = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.uploadSecPad div{\n  padding: 0 0 8px;\n}\n.anticon-upload{\n  font-size: 24px;\n}\n.uploadSecPad{\n  width: 100%;\n}\n.uploadSecPad div:last-child{\n  padding: 0;\n}\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  .ant-upload-list-item-done{\n    border: 1px solid var(--color-divider) !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item:hover::before ant-upload-list-item-actions > a\n  {\n    background: red !important;\n  }\n  .ant-upload-list-item-actions{\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before{\n    background: transparent;\n    opacity: 1;\n  }\n.ant-upload-list-item-actions button{\n  background: #212121;\n    border-radius: 50px;\n    height: 24px !important;\n    display: flex;\n    align-items: center;\n}\n.ant-btn-text:not(:disabled):not(.ant-btn-disabled):hover{\n  background: #212121;\n}\n  .ant-upload-list-item-actions a{\n    background: #212121;\n    border-radius: 50px;\n    height: 24px;\n    display: flex;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions,.ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action {\n    opacity: 1;\n  }\n  .ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item{\n    opacity: 1 !important;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n    color: #fff;\n  }\n"])));
 const StyledSection = exports.StyledSection = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 16px;\n  justify-content: space-between;\n  h2{\n    margin: 0;\n  }\n  .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n    width: 96px;\n    height: 96px;\n    margin: 0;\n  }\n  .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n    width: 96px !important;\n    height: 96px !important;\n    margin: 0;\n  }\n  @media only screen and (max-width: 600px) {\n    .ant-upload-select, .ant-upload-wrapper, .ant-upload-wrapper, .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container{\n      width: 64px;\n      height: 64px;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select{\n      width: 64px !important;\n      height: 64px !important;\n    }\n    .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye,.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete{\n      font-size:12px;\n      margin: 0 !important;\n      padding: 0 !important;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .ant-upload-list-item-actions button {\n      height: 16px!important;\n      width: 16px !important;\n      justify-content: center;\n  }\n  .ant-upload-list-item-actions a {\n    height: 16px;\n    width: 16px !important;\n    align-items: center;\n    justify-content: center;\n}\n    .ant-upload-list-item-actions {\n      gap: 8px;\n    }\n    .ant-upload button span + div{\n      display: none;\n    }\n  }\n"])));

package/build/widgets/oa-widget-form/CustomFormWidget.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomFormWidget;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomFormWidget(_ref) {
+  var _Form$useForm, _Form$useForm2, _formItem$map;
+  let {
+    handleFormSubmit,
+    formItem
+  } = _ref;
+  const [form] = (_Form$useForm = _antd.Form === null || _antd.Form === void 0 || (_Form$useForm2 = _antd.Form.useForm) === null || _Form$useForm2 === void 0 ? void 0 : _Form$useForm2.call(_antd.Form)) !== null && _Form$useForm !== void 0 ? _Form$useForm : [];
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    onFinish: handleFormSubmit
+  }, formItem === null || formItem === void 0 || (_formItem$map = formItem.map) === null || _formItem$map === void 0 ? void 0 : _formItem$map.call(formItem, item => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: (0, _utils.getUUID)()
+  }, item.label && /*#__PURE__*/_react.default.createElement(_antd.Typography, null, item.label), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, item.formItem, item.child), item.secondaryChild)));
+}
+CustomFormWidget.propTypes = {
+  handleFormSubmit: _propTypes.default.func,
+  formItem: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string,
+    formItem: _propTypes.default.object,
+    child: _propTypes.default.node,
+    secondaryChild: _propTypes.default.node
+  }))
+};
+CustomFormWidget.defaultProps = {
+  handleFormSubmit: () => {},
+  formItem: []
+};

package/build/widgets/oa-widget-form/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nheader{background: var(--color-primary-background); box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14);}\n.flexProp{display:flex; flex-direction: row; align-items: center; justify-content: space-between; min-height:60px;}\n.flexSec{display:flex; flex-direction: row; justify-content: flex-start;}\n.flexSec svg{cursor:pointer;}\n.mobView{display:none;}\n.deskView{display:flex;}\n\n@media only screen and (max-width: 600px) {\n.mobView{display:flex;}\n.deskView{display:none;}\n}\n\n\n"])));

package/build/widgets/oa-widget-header/CustomHeaderWidget.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomHeaderWidget;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));
+var _styles = require("./styles");
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _utils = require("../../utils");
+var _CustomInput = _interopRequireDefault(require("../../components/oa-component-input/CustomInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomHeaderWidget(_ref) {
+  let {
+    heading,
+    showHeading,
+    leftIconCmp,
+    rightIconCmp,
+    showSearch,
+    searchProps,
+    searchBackArrowHandler
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.StyleContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "customHeader"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexProp"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec"
+  }, leftIconCmp.map(iconCmp => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: (0, _utils.getUUID)()
+  }, iconCmp)), showHeading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "primary-content",
+    typography: "type-t2-700"
+  }, heading)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec deskView"
+  }, rightIconCmp.map(iconCmp => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: (0, _utils.getUUID)()
+  }, iconCmp))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flexSec mobView"
+  }, rightIconCmp.map(iconCmp => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: (0, _utils.getUUID)()
+  }, iconCmp)))), showSearch && /*#__PURE__*/_react.default.createElement("div", {
+    className: "headerSearch"
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _ArrowBack.default,
+    size: 24,
+    className: "margin-right-12",
+    onClick: searchBackArrowHandler
+  }), /*#__PURE__*/_react.default.createElement(_CustomInput.default, searchProps))));
+}
+CustomHeaderWidget.propTypes = {
+  heading: _propTypes.default.string,
+  showHeading: _propTypes.default.bool,
+  leftIconCmp: _propTypes.default.arrayOf(_propTypes.default.node),
+  rightIconCmp: _propTypes.default.arrayOf(_propTypes.default.node),
+  showSearch: _propTypes.default.bool,
+  searchProps: _propTypes.default.any,
+  searchBackArrowHandler: _propTypes.default.func
+};
+CustomHeaderWidget.defaultProps = {
+  heading: 'My sub outlet',
+  showHeading: true,
+  leftIconCmp: [],
+  rightIconCmp: [],
+  showSearch: false,
+  searchProps: {},
+  searchBackArrowHandler: () => {}
+};

package/build/widgets/oa-widget-header/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+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 StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.flexProp{display:flex; flex-direction: row; align-items: center; justify-content: space-between; width:100%;}\n.flexSec{display:flex; flex-direction: row; justify-content: flex-start;}\n.flexSec svg{cursor:pointer;}\n.mobView{display:none;}\n.deskView{display:flex;}\n.headerSearch {display: flex; width:100%; flex-direction: row; justify-content: flex-start; align-items: center;  background-color: var(--color-primary-background); position: absolute; padding: 6px 0; left: 0; right: 0;}\n.customHeader{min-height: 60px; position: relative; display: flex; align-items: center;   justify-content: space-between;}\n\n@media only screen and (max-width: 600px) {\n.mobView{display:flex;}\n.deskView{display:none;}\n.headerSearch {align-items: flex-start; flex-direction: column; justify-content: flex-start; padding: 18px 0;top:0; }\n.headerSearch input{margin:18px 0 0 0;} \n\n}\n\n\n"])));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.124",
+  "version": "0.18.126",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",

package/build/components/oa-component-header/customClass.css

@@ -1,9 +0,0 @@
-.primaryDropdownClass .ant-dropdown-menu {
-    padding: 8px 0;
-    overflow: hidden;
-    min-width: 186px;
-}
-.primaryDropdownClass .ant-dropdown-menu .ant-dropdown-menu-item {
-    padding: 12px;
-}
-.primaryDropdownClass .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):hover{ background-color:#FBE5DF; color: #DE350B;}

package/build/images/upload.svg

@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_1930_6853" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-<rect width="24" height="24" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_1930_6853)">
-<path d="M5.94233 19.5C5.55017 19.5 5.21175 19.3576 4.92705 19.0729C4.64235 18.7882 4.5 18.4498 4.5 18.0577V15.4923C4.5 15.3313 4.55472 15.1965 4.66417 15.0879C4.77362 14.9793 4.90952 14.925 5.07185 14.925C5.2342 14.925 5.36858 14.9793 5.475 15.0879C5.5814 15.1965 5.6346 15.3313 5.6346 15.4923V18.0577C5.6346 18.1346 5.66665 18.2051 5.73075 18.2692C5.79487 18.3333 5.86539 18.3654 5.94233 18.3654H18.0576C18.1346 18.3654 18.2051 18.3333 18.2692 18.2692C18.3333 18.2051 18.3654 18.1346 18.3654 18.0577V15.4923C18.3654 15.3313 18.4201 15.1965 18.5295 15.0879C18.639 14.9793 18.7749 14.925 18.9372 14.925C19.0996 14.925 19.2339 14.9793 19.3403 15.0879C19.4467 15.1965 19.5 15.3313 19.5 15.4923V18.0577C19.5 18.4498 19.3576 18.7882 19.0729 19.0729C18.7882 19.3576 18.4498 19.5 18.0576 19.5H5.94233ZM11.4327 6.69807L9.07308 9.0577C8.96488 9.16923 8.83398 9.22243 8.6804 9.2173C8.5268 9.21218 8.38777 9.15385 8.2633 9.0423C8.15242 8.9232 8.09844 8.78541 8.10138 8.62895C8.10433 8.47248 8.16157 8.33848 8.2731 8.22695L11.4958 5.0043C11.5717 4.9284 11.6512 4.87217 11.7344 4.83562C11.8176 4.79909 11.9077 4.78082 12.0046 4.78082C12.1015 4.78082 12.19 4.79909 12.2702 4.83562C12.3503 4.87217 12.4282 4.92827 12.5038 5.0039L15.7423 8.24232C15.8538 8.35386 15.9112 8.48558 15.9144 8.6375C15.9176 8.78943 15.8634 8.92436 15.752 9.0423C15.6276 9.15385 15.4884 9.20962 15.3346 9.20962C15.1807 9.20962 15.0448 9.15065 14.9269 9.0327L12.5673 6.69807V15.3481C12.5673 15.5091 12.5126 15.644 12.4031 15.7525C12.2937 15.8611 12.1578 15.9154 11.9954 15.9154C11.8331 15.9154 11.6987 15.8611 11.5923 15.7525C11.4859 15.644 11.4327 15.5091 11.4327 15.3481V6.69807Z" fill="#014FC5"/>
-</g>
-</svg>