oa-componentbook 0.18.345 → 0.18.347

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.
@@ -202,7 +202,11 @@ function CustomTable(_ref) {
202
202
  emptyText
203
203
  },
204
204
  size: size
205
- }, antDesignProps))), /*#__PURE__*/_react.default.createElement("div", {
205
+ }, antDesignProps, {
206
+ scroll: {
207
+ x: 'max-content'
208
+ }
209
+ }))), /*#__PURE__*/_react.default.createElement("div", {
206
210
  className: cardShow && dataSource ? 'bottomPadding' : ''
207
211
  }, cardShow && dataSource && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.map((row, rowIndex) => {
208
212
  var _uppercaseColumns$, _uppercaseColumns3;
@@ -28,7 +28,8 @@ var _stylesV = require("./stylesV1");
28
28
  var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
29
29
  var _CustomDropdown = _interopRequireDefault(require("../oa-component-dropdown/CustomDropdown"));
30
30
  var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
31
- const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "ellipsisConfig", "multiItemConfig", "defaultCardShow", "setConfig", "customTableChange", "selectedRows"],
31
+ var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
32
+ const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "ellipsisConfig", "multiItemConfig", "defaultCardShow", "setConfig", "customTableChange", "selectedRows", "onMobilePageChange", "emptyStateCard"],
32
33
  _excluded2 = ["title", "dataIndex", "jsxConfig", "render", "ellipsisConfig", "multiItemConfig"];
33
34
  /* eslint-disable */
34
35
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,7 +58,9 @@ function CustomTableV1(_ref) {
57
58
  defaultCardShow,
58
59
  setConfig,
59
60
  customTableChange,
60
- selectedRows = []
61
+ selectedRows = [],
62
+ onMobilePageChange,
63
+ emptyStateCard
61
64
  } = _ref,
62
65
  antDesignProps = _objectWithoutProperties(_ref, _excluded);
63
66
  // State to manage card vs table view and expanded cards
@@ -352,9 +355,15 @@ function CustomTableV1(_ref) {
352
355
  };
353
356
 
354
357
  // Helper to get cell content (uses column render or dataIndex)
358
+ // Updated getContentToBeRender to handle array dataIndex
355
359
  const getContentToBeRender = (col, row) => {
356
- if (col.render) {
357
- return col.render(col.dataIndex ? row[col.dataIndex] : undefined, row);
360
+ if (typeof col.render === "function") {
361
+ const value = Array.isArray(col.dataIndex) ? getByPath(row, col.dataIndex.join(".")) : col.dataIndex ? row[col.dataIndex] : undefined;
362
+ return col.render(value, row);
363
+ }
364
+ if (Array.isArray(col.dataIndex)) {
365
+ var _getByPath;
366
+ return (_getByPath = getByPath(row, col.dataIndex.join("."))) !== null && _getByPath !== void 0 ? _getByPath : "";
358
367
  }
359
368
  if (col.dataIndex) {
360
369
  var _row$col$dataIndex;
@@ -443,14 +452,19 @@ function CustomTableV1(_ref) {
443
452
  flexWrap: "wrap"
444
453
  }
445
454
  }, getContentToBeRender(col, row)))));
446
- })), cardShow && dataSource && (pagination === null || pagination === void 0 ? void 0 : pagination.showPaginationOnMobile) && /*#__PURE__*/_react.default.createElement("div", {
447
- className: "fullWidthBtn"
448
- }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
449
- "data-test": "button",
450
- label: "Load More",
451
- type: "secondary",
452
- size: "large",
453
- onClick: () => pagination.onChangeHandlerForMobile()
455
+ }), cardShow && dataSource.length == 0 && emptyStateCard), cardShow && dataSource.length > 0 && onMobilePageChange && /*#__PURE__*/_react.default.createElement("div", {
456
+ className: "mobileViewPagination"
457
+ }, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
458
+ current: pagination.current,
459
+ pageSize: pagination.pageSize,
460
+ total: pagination.total,
461
+ onChange: page => {
462
+ onMobilePageChange === null || onMobilePageChange === void 0 || onMobilePageChange({
463
+ current: page,
464
+ pageSize: pagination.pageSize
465
+ });
466
+ },
467
+ showLessItems: true
454
468
  })));
455
469
  }
456
470
  CustomTableV1.propTypes = {
@@ -16,4 +16,4 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
16
16
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
17
17
  const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu\xA0{padding: 0; top: 0;}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {border-radius: 0; padding: 12px !important;}\n.ant-dropdown .ant-table-filter-dropdown {border-radius: 8px;background: #FFF;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n.ant-dropdown .ant-table-filter-dropdown .ant-table-filter-dropdown-btns {padding: 12px; border: none;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link, .ant-dropdown .ant-table-filter-dropdown .ant-btn-primary {border-radius: 4px; min-width: 100px; padding: 7px 16px;\n border: 1px solid #014FC5; height: auto;text-align: center;font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px; }\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link {color: #014FC5; background: #fff;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-primary {background: #014FC5; color: #fff;}\n.ant-checkbox .ant-checkbox-inner {width: 18px; height: 18px; border: 1px solid #717171; border-radius: 2px;}\n.ant-checkbox-checked .ant-checkbox-inner {background-color: #014FC5; border-color: #014FC5;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-primary:hover {background:#82a9e2; border: 1px solid #82a9e2;}\n.ant-dropdown .ant-table-filter-dropdown .ant-btn-link:hover {border: 1px solid #82a9e2; color: #82a9e2;}\n.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {background: #DEF1FB;}\n.ant-table-wrapper .ant-table-pagination.ant-pagination {\n padding: 16px; margin: 0;\n border-top: solid 1px #E0E0E0;\n}\n\n"])));
18
18
  const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n tr > td {\n vertical-align: top;\n }\n .ant-table-row:last-child td {\n border: none;\n }\n .ant-table-row .ant-table-cell,\n .ant-table-thead .ant-table-cell {\n padding: 16px !important;\n }\n .ant-table-measure-row > td {\n padding: 0 !important;\n }\n"])));
19
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .fullWidthBtn button {\n width: 100%;\n }\n .fullWidthBtn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 16px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n .secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n .cardStyles {\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n margin: 0 0 24px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .showHideBtn {\n padding: 8px 0 16px;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong,\n .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n\n .srDetails span {\n display: flex;\n flex-direction: row;\n gap: 4px;\n }\n\n .srDetails > span > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .srDetails > span > .type-sl1-700 {\n font-size: initial;\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 0 0 0;\n border-top: 1px solid var(--color-divider);\n width: 100%;\n align-items: center;\n }\n\n .footerCta .ant-dropdown-trigger {\n margin-bottom: 0;\n }\n\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\n }\n"])));
19
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\n .fullWidthBtn button {\n width: 100%;\n }\n .fullWidthBtn {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #fff;\n padding: 16px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n .secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n .cardStyles {\n padding: 16px;\n border-radius: 8px;\n border: 1px solid var(--color-divider);\n background: var(--color-primary-background);\n margin: 0 0 24px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n }\n\n .showHideBtn {\n padding: 8px 0 16px;\n }\n .keyValue {\n display: flex;\n gap: 12px;\n margin: 0 0 16px;\n }\n .keyValue:last-child {\n margin: 0;\n }\n .keyValue strong,\n .keyValue span {\n width: 100%;\n }\n .keyValue strong {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .keyValue span {\n color: var(--color-primary-content);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n .srDetails {\n padding: 0 0 12px;\n margin: 0 0 16px;\n border-bottom: 1px solid var(--color-divider);\n }\n\n .srDetails span {\n display: flex;\n flex-direction: row;\n gap: 4px;\n }\n\n .srDetails > span > div {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .srDetails > span > .type-sl1-700 {\n font-size: initial;\n }\n .footerCta {\n display: flex;\n justify-content: end;\n gap: 16px;\n padding: 16px 0 0 0;\n border-top: 1px solid var(--color-divider);\n width: 100%;\n align-items: center;\n }\n\n .footerCta .ant-dropdown-trigger {\n margin-bottom: 0;\n }\n\n .flexEnd {\n display: flex;\n justify-content: end;\n margin: 0 0 12px;\n }\n\n @media only screen and (max-width: 600px) {\n .keyValue span {\n word-break: break-word;\n overflow-wrap: break-word;\n}\n.mobileViewPagination{display: flex;\n justify-content: flex-end;\n margin: 16px 0px;}\n\n.mobileViewPagination .ant-pagination {\n padding: 0;\n}\n\n\n}\n\n"])));
@@ -50,7 +50,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
50
50
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
51
51
  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 */
52
52
  function GenricLayOut(_ref) {
53
- var _state$misc17, _imageViewer$content, _imageViewer$content2, _filterDrawer$applied11, _state$filterDrawer2, _state$filterDrawer3, _filterDrawer$data2, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables3, _tables$selectionType, _tabs$active4, _tables$selectionType2, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _filterDrawer$data3, _filterDrawer$data$fi, _filterDrawer$data4, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
53
+ var _state$misc18, _imageViewer$content, _imageViewer$content2, _filterDrawer$applied12, _state$filterDrawer2, _state$filterDrawer3, _filterDrawer$data2, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables3, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination31, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _filterDrawer$data3, _filterDrawer$data$fi, _filterDrawer$data4, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
54
54
  let {
55
55
  config,
56
56
  getInitialData,
@@ -1052,6 +1052,9 @@ function GenricLayOut(_ref) {
1052
1052
  type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
1053
1053
  });
1054
1054
  } else {
1055
+ if (selectedStaticFilterValue) {
1056
+ setStaticFilterData(data);
1057
+ }
1055
1058
  dispatch({
1056
1059
  type: _layoutReducer.actionTypes.SET_TABLE_DATA,
1057
1060
  payload: data
@@ -1679,9 +1682,63 @@ function GenricLayOut(_ref) {
1679
1682
  }
1680
1683
  }
1681
1684
  };
1685
+ const onMobilePageChange = async _ref5 => {
1686
+ let {
1687
+ current,
1688
+ pageSize
1689
+ } = _ref5;
1690
+ dispatch({
1691
+ type: _layoutReducer.actionTypes.SET_PAGINATION,
1692
+ payload: {
1693
+ current,
1694
+ pageSize
1695
+ }
1696
+ });
1697
+ if (handleTableChange) {
1698
+ var _state$dropdownSearch11, _state$inputSearch11, _state$tabs18, _tables$filter11, _tables$sorting27, _tables$sorting28, _header$subHeading21, _header$subHeading22, _staticFilter$data11, _filterDrawer$applied11, _state$misc17;
1699
+ const {
1700
+ error,
1701
+ data
1702
+ } = await handleTableChange(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (state === null || state === void 0 || (_state$dropdownSearch11 = state.dropdownSearch) === null || _state$dropdownSearch11 === void 0 || (_state$dropdownSearch11 = _state$dropdownSearch11.value) === null || _state$dropdownSearch11 === void 0 ? void 0 : _state$dropdownSearch11.trim()) && {
1703
+ searchedValue: state.dropdownSearch.value,
1704
+ selectedOption: state.dropdownSearch.selectedOption
1705
+ }), (state === null || state === void 0 || (_state$inputSearch11 = state.inputSearch) === null || _state$inputSearch11 === void 0 || (_state$inputSearch11 = _state$inputSearch11.value) === null || _state$inputSearch11 === void 0 ? void 0 : _state$inputSearch11.trim()) && {
1706
+ searchedValue: state.inputSearch.value
1707
+ }), {}, {
1708
+ selectedTab: state === null || state === void 0 || (_state$tabs18 = state.tabs) === null || _state$tabs18 === void 0 ? void 0 : _state$tabs18.active,
1709
+ current,
1710
+ pageSize,
1711
+ columnFilterStatus: tables === null || tables === void 0 || (_tables$filter11 = tables.filter) === null || _tables$filter11 === void 0 ? void 0 : _tables$filter11.value,
1712
+ field: tables === null || tables === void 0 || (_tables$sorting27 = tables.sorting) === null || _tables$sorting27 === void 0 ? void 0 : _tables$sorting27.sortBy,
1713
+ order: tables === null || tables === void 0 || (_tables$sorting28 = tables.sorting) === null || _tables$sorting28 === void 0 ? void 0 : _tables$sorting28.sortDirection
1714
+ }, (header === null || header === void 0 || (_header$subHeading21 = header.subHeading) === null || _header$subHeading21 === void 0 || (_header$subHeading21 = _header$subHeading21.jsxConfig) === null || _header$subHeading21 === void 0 ? void 0 : _header$subHeading21.type) == "select" ? {
1715
+ subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading22 = header.subHeading) === null || _header$subHeading22 === void 0 || (_header$subHeading22 = _header$subHeading22.jsxConfig) === null || _header$subHeading22 === void 0 ? void 0 : _header$subHeading22.value
1716
+ } : {}), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data11 = staticFilter.data) === null || _staticFilter$data11 === void 0 || (_staticFilter$data11 = _staticFilter$data11.find(item => item.selected)) === null || _staticFilter$data11 === void 0 ? void 0 : _staticFilter$data11.value) && {
1717
+ staticFilter: staticFilter.data.find(item => item.selected).value
1718
+ }), (filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters) && Object.keys((_filterDrawer$applied11 = filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters) !== null && _filterDrawer$applied11 !== void 0 ? _filterDrawer$applied11 : {}).length > 0 && {
1719
+ filterOn: filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters.filterBy,
1720
+ fromDate: filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters.fromDate,
1721
+ toDate: filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters.toDate
1722
+ }), (_state$misc17 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc17 !== void 0 ? _state$misc17 : {}));
1723
+ if (error) {
1724
+ showErrorNotification(error);
1725
+ dispatch({
1726
+ type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
1727
+ });
1728
+ } else {
1729
+ if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
1730
+ setStaticFilterData(data);
1731
+ }
1732
+ dispatch({
1733
+ type: _layoutReducer.actionTypes.SET_TABLE_DATA,
1734
+ payload: data
1735
+ });
1736
+ }
1737
+ }
1738
+ };
1682
1739
  console.log(state, "GenricLayOutstate");
1683
1740
  return /*#__PURE__*/_react.default.createElement(_styles.OapageWithDataStyle, {
1684
- className: (state === null || state === void 0 || (_state$misc17 = state.misc) === null || _state$misc17 === void 0 ? void 0 : _state$misc17.flow) === "hubAutomation" ? "hubAutomationContainer" : ""
1741
+ className: (state === null || state === void 0 || (_state$misc18 = state.misc) === null || _state$misc18 === void 0 ? void 0 : _state$misc18.flow) === "hubAutomation" ? "hubAutomationContainer" : ""
1685
1742
  }, /*#__PURE__*/_react.default.createElement(_styles.DrawerWithOutFooter, null), /*#__PURE__*/_react.default.createElement("div", {
1686
1743
  className: "fullPageLayout"
1687
1744
  }, /*#__PURE__*/_react.default.createElement(_GlobalCss.default, null, (sidebar === null || sidebar === void 0 ? void 0 : sidebar.visible) && /*#__PURE__*/_react.default.createElement(_SidebarWidget.default, _extends({}, sidebar, {
@@ -1739,7 +1796,7 @@ function GenricLayOut(_ref) {
1739
1796
  }),
1740
1797
  position: "left"
1741
1798
  })
1742
- }), Object.keys((_filterDrawer$applied11 = filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters) !== null && _filterDrawer$applied11 !== void 0 ? _filterDrawer$applied11 : {}).length > 0 && /*#__PURE__*/_react.default.createElement("span", {
1799
+ }), Object.keys((_filterDrawer$applied12 = filterDrawer === null || filterDrawer === void 0 ? void 0 : filterDrawer.appliedFilters) !== null && _filterDrawer$applied12 !== void 0 ? _filterDrawer$applied12 : {}).length > 0 && /*#__PURE__*/_react.default.createElement("span", {
1743
1800
  className: "notifyDot"
1744
1801
  })))), (inputSearch === null || inputSearch === void 0 ? void 0 : inputSearch.visible) && /*#__PURE__*/_react.default.createElement(_Search.default, _extends({}, inputSearch, {
1745
1802
  onInputChange: onSearchInputChange,
@@ -1780,7 +1837,9 @@ function GenricLayOut(_ref) {
1780
1837
  }, rowSelection),
1781
1838
  locale: {
1782
1839
  emptyText: emptyTableState
1783
- }
1840
+ },
1841
+ emptyStateCard: emptyTableState,
1842
+ onMobilePageChange: tables !== null && tables !== void 0 && (_tables$pagination31 = tables.pagination) !== null && _tables$pagination31 !== void 0 && _tables$pagination31.mwebPagination ? onMobilePageChange : undefined
1784
1843
  }))), (drawer === null || drawer === void 0 ? void 0 : drawer.visible) && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
1785
1844
  className: "oaDrawer",
1786
1845
  title: drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[(_tabs$active5 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active5 !== void 0 ? _tabs$active5 : "default"]) === 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,
@@ -54,3 +54,20 @@ ul.quick-filter-buttons li.selected {
54
54
  display: flex;
55
55
  margin: 0;
56
56
  }
57
+
58
+
59
+ @media only screen and (max-width: 600px) {
60
+ .quick-filter-container {
61
+ white-space: nowrap;
62
+ margin: 0 0 16px 0;
63
+ align-items: flex-start;
64
+ flex-direction: column;
65
+ }
66
+
67
+ ul.quick-filter-buttons {
68
+ overflow-x: scroll;
69
+ width: 100%;
70
+ }
71
+
72
+
73
+ }
@@ -41,14 +41,14 @@ function replaceVariables(config) {
41
41
  const fullMatch = value.match(/^{{\s*([^}]+)\s*}}$/);
42
42
  if (fullMatch) {
43
43
  const replacement = getValueFromSources(fullMatch[1]);
44
- return replacement !== undefined ? replacement : value; // ← Keep original if not found
44
+ return replacement !== undefined ? replacement : ""; // ← Keep original if not found
45
45
  }
46
46
 
47
47
  // Inline replacements: convert only primitive values
48
48
  return value.replace(/{{\s*([^}]+)\s*}}/g, (_, key) => {
49
49
  const replacement = getValueFromSources(key);
50
50
  if (replacement === undefined || typeof replacement === "object" || typeof replacement === "function") {
51
- return "{{".concat(key, "}}"); // ← Keep the placeholder intact
51
+ return ""; // ← Keep the placeholder intact
52
52
  }
53
53
  return String(replacement);
54
54
  });
@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
16
16
  const DrawerWithOutFooter = exports.DrawerWithOutFooter = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.hubAutomationContainer .fullPageLayout {padding: 0 !important; background: #fff !important;}\n.hubAutomationContainer .fullPageLayout .oaRightLayouts{\n max-width: 1154px;\n margin: 24px auto;\n padding: 0 16px;\n box-shadow: none;}\n.oaDrawer div + div.ant-drawer-body{padding-bottom:100px !important;}\n\n.ant-checkbox-indeterminate .ant-checkbox-inner:after {\n background-color: #014fc5;\n}\n\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::before {display:none;}\n.ant-form-item .ant-form-item-label >label.ant-form-item-required::after{ content: \"*\"; color: #DE350B; visibility: visible !important;}\n\n\n.cstUplaodWithFullWidth{margin-bottom:24px;}\n.cstUplaodWithFullWidth:last-child{margin-bottom:0;}\n.cstUplaodWithFullWidth .uploadDiv{width:100%;}\n.cstUplaodWithFullWidth .uploadDiv .ant-upload-list-item-container, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper .ant-upload-list-picture-card .ant-upload-select, .cstUplaodWithFullWidth .uploadDiv .ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container {\n width: 100%; \n height: 120px;\n}\n\n\n\n\n.oaDrawer .ant-form-item .ant-form-item-explain-error {\n color: #DE350B;\n font-size: 12px;\n margin: 4px 0 0 0;\n}\n.bottomSelectedSecion{background: #F6F6F6; padding: 16px 36px; position: fixed; bottom: 0; left: 0; right: 0;\nbox-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n display: flex; z-index: 2;\n align-items: center;\n justify-content: end;\n gap: 24px;}\n\n\n\n.listOfItems{ border-radius: 12px;\n border: 1px solid #E0E0E0;\n padding: 24px;\n margin: 24px 0 0 0;}\n modalSubheading{\n padding: 24px;\n margin: 24px 0 0 0;}\n\n.listOfItemsWithoutBorder{\n padding: 24px 0;\n margin: 24px 0 0 0;}\n\n modalSubheading{\n padding: 24px;\n margin: 24px 0 0 0;}\n\n\n\n\n.modalIconAndTextBox{display:flex; flex-direction:row; align-items: center; margin: 0 0 16px 0; gap:4px;}\n"])));
17
17
  const FormWidgetStyle = exports.FormWidgetStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .formBottomAction {\n position: absolute;\n bottom: 0px;\n background-color: rgb(249, 249, 249);\n box-shadow: rgba(0, 0, 0, 0.1) 0px -2px 8px;\n padding: 16px;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n z-index: 10;\n left: 0;\n right: 0;\n }\n\n .formBottomAction .ant-form-item {\n margin-bottom: 0px;\n }\n\n .searchErrorMsg {\n font-size: 12px;\n }\n .searchErrorMsg {\n font-size: 12px;\n }\n"])));
18
18
  const TableDataStyle = exports.TableDataStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .tableContainerList th,\n button {\n white-space: nowrap;\n }\n .tableContainerList th,\n button {\n white-space: nowrap;\n }\n"])));
19
- const OapageWithDataStyle = exports.OapageWithDataStyle = _styledComponents.default.aside(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .oaTopHeaderAndBtnSec {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n }\n\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 }\n\n .oaRightLayouts .iconAndTextSecBox {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n .inLine {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n .customeSelectDropdown {\n margin: 4px 0 0 8px;\n }\n\n .cardData {\n padding: 28px 0 48px 0;\n }\n\n .ant-carousel .slick-dots {\n position: static;\n margin: 20px auto 12px 0;\n }\n .ant-carousel .slick-dots li {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li button {\n width: 8px;\n height: 8px;\n background: #cacaca;\n border-radius: 50%;\n opacity: 0.5;\n }\n .ant-carousel .slick-dots li.slick-active {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li.slick-active button {\n width: 8px;\n height: 8px;\n opacity: 1;\n }\n .ant-carousel .slick-dots li::after {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 1;\n background: #717171;\n }\n\n .oaTabs .ant-tabs-nav {\n border-top: 1px solid #e0e0e0;\n border-left: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n padding: 12px 22px 0 22px;\n margin: 0 0 8px 0;\n background: #fff;\n border-radius: 4px 4px 0 0;\n }\n .ant-card-body {\n padding: 24px 16px !important;\n border-radius: 16px;\n background: #f6f6f6;\n }\n .cardContainer {\n display: flex;\n gap: 24px;\n }\n .selectAndSearch .noClear {\n border-radius: 0 4px 4px 0;\n max-width: 320px;\n width: 100%;\n }\n\n .searchErrorMsg {\n font-size: 12px;\n margin: 4px 0px 0px;\n color: #de350b;\n }\n .searchOnly {\n margin: 0px 0px 16px;\n position: relative;\n }\n .searchOnly .ant-input-affix-wrapper {\n border-radius: 4px;\n max-width: 420px;\n padding-left: 44px;\n }\n .searchOnly .cstSearchIcon {\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 2;\n }\n\n .selectAndSearch .ant-input-affix-wrapper {\n border-radius: 0 4px 4px 0;\n width: 320px;\n }\n\n .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 }\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 .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\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 }\n\n .oaRightLayouts .iconAndTextSecBox {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n }\n .inLine {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n\n .customeSelectDropdown {\n margin: 4px 0 0 8px;\n }\n\n .cardData {\n padding: 28px 0 48px 0;\n }\n\n .ant-carousel .slick-dots {\n position: static;\n margin: 20px auto 12px 0;\n }\n .ant-carousel .slick-dots li {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li button {\n width: 8px;\n height: 8px;\n background: #cacaca;\n border-radius: 50%;\n opacity: 0.5;\n }\n .ant-carousel .slick-dots li.slick-active {\n width: 8px;\n height: 8px;\n }\n .ant-carousel .slick-dots li.slick-active button {\n width: 8px;\n height: 8px;\n opacity: 1;\n }\n .ant-carousel .slick-dots li::after {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n opacity: 1;\n background: #717171;\n }\n\n .oaTabs .ant-tabs-nav {\n border-top: 1px solid #e0e0e0;\n border-left: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n padding: 12px 22px 0 22px;\n margin: 0 0 8px 0;\n background: #fff;\n border-radius: 4px 4px 0 0;\n }\n .ant-card-body {\n padding: 24px 16px !important;\n border-radius: 16px;\n background: #f6f6f6;\n }\n .cardContainer {\n display: flex;\n gap: 24px;\n }\n .selectAndSearch .noClear {\n border-radius: 0 4px 4px 0;\n max-width: 320px;\n width: 100%;\n }\n\n .searchErrorMsg {\n font-size: 12px;\n margin: 4px 0px 0px;\n color: #de350b;\n }\n .searchOnly {\n margin: 0px 0px 16px;\n position: relative;\n }\n .searchOnly .ant-input-affix-wrapper {\n border-radius: 4px;\n max-width: 420px;\n padding-left: 44px;\n }\n .searchOnly .cstSearchIcon {\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 2;\n }\n\n .selectAndSearch .ant-input-affix-wrapper {\n border-radius: 0 4px 4px 0;\n width: 320px;\n }\n\n .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 }\n\n .oaheaderButtons .notifyDot {\n width: 12px;\n height: 12px;\n background: #de350b;\n position: absolute;\n top: -4px;\n right: -4px;\n border-radius: 50%;\n }\n\n @media only screen and (max-width: 600px) {\n\n\n .selectAndSearch .ant-input-affix-wrapper {\n width:calc(100% - 84px);\n }\n.oaheaderSearchAndFilter .dropDownSearchContainer {width:100%;}\n\n\n.oaheaderSearchAndFilter{ \n align-items: flex-end;\n flex-direction: column;\n gap: 16px;\n }\n\n .inLine {\n flex-direction: column;\n gap: 0;\n align-items: flex-start;\n }\n\n .subHadingText > span {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .fullPageLayout {\n flex-direction: column;\n padding: 0;\n }\n .oaRightLayouts {\n padding: 16px;\n border-radius: 0;\n background: #fff;\n box-shadow: none;\n height: auto;\n background: #f6f6f6;\n }\n .oaTabs .ant-tabs-nav {\n margin: 0 0 28px 0;\n padding: 12px 0 0 0;\n }\n .layoutHeadingPage {\n margin: 0 0 16px 0;\n background: #fff;\n padding: 16px;\n border-radius: 8px;\n width: 100%;\n }\n .layoutHeadingAndSearch {\n background: #fff;\n padding: 20px 16px;\n margin: 0;\n width: 100%;\n border-radius: 8px;\n }\n }\n"])));
20
20
  const ListofDamageParts = exports.ListofDamageParts = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ul.damagedParts {\n display: flex;\n flex-direction: column;\n margin: 8px 0 0 16px;\n list-style-type: disc;\n }\n ul.damagedParts li {\n padding: 4px 0;\n width: 100%;\n }\n ul.damagedParts li::marker {\n color: #717171;\n font-size: 20px;\n }\n"])));
21
21
  const IncidentListParts = exports.IncidentListParts = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n .qaSec dl {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n }\n .qaSec dl dt {\n display: flex;\n flex-direction: column;\n margin: 16px 0 0 0;\n }\n .qaSec dl dt:first-child {\n margin-top: 8px;\n }\n"])));
22
22
  var _default = exports.default = {};
@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
- const GuideWidgetStyle = exports.GuideWidgetStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaGuideStep{\n display: flex; margin: 36px 0 0 0 ;\n flex-direction: column; \n\n }\n\n .oaGuideStep img{max-width: 100%;}\n .buttonSection{display:flex; flex-direction: row; justify-content: flex-end; margin: 24px 0 0 0 ; gap:16px;}\n\n\n"])));
11
+ const GuideWidgetStyle = exports.GuideWidgetStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .oaGuideStep{\n display: flex; margin: 36px 0 0 0 ;\n flex-direction: column; \n\n }\n.oaGuideStep .buttonSection .primary:hover{ background:#014fc5; border: 1px solid #014fc5;}\n.oaGuideStep .buttonSection .secondary:hover{ color:#014fc5; border: 1px solid #014fc5;}\n\n .oaGuideStep img{max-width: 100%;}\n .buttonSection{display:flex; flex-direction: row; justify-content: flex-end; margin: 24px 0 0 0 ; gap:16px;}\n\n\n"])));
12
12
  var _default = exports.default = {};
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ require("core-js/modules/web.dom-collections.iterator.js");
7
8
  require("core-js/modules/es.regexp.exec.js");
8
9
  require("core-js/modules/es.string.replace.js");
9
10
  var _react = _interopRequireDefault(require("react"));
@@ -22,7 +23,7 @@ const {
22
23
  Sider
23
24
  } = _antd.Layout;
24
25
  function SidebarWidget(_ref) {
25
- var _menuItems$items, _footer$item, _footer$item2;
26
+ var _footer$item, _menuItems$items, _footer$item2, _footer$item3;
26
27
  let {
27
28
  heading,
28
29
  menuItems = [],
@@ -39,14 +40,22 @@ function SidebarWidget(_ref) {
39
40
  className: "sidebar"
40
41
  }, /*#__PURE__*/_react.default.createElement("div", {
41
42
  className: "logoContainer"
42
- }, (heading === null || heading === void 0 ? void 0 : heading.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, heading), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement("div", {
43
+ }, (heading === null || heading === void 0 ? void 0 : heading.visible) && /*#__PURE__*/_react.default.createElement(_Header.default, heading), /*#__PURE__*/_react.default.createElement("div", {
43
44
  className: "notShowInDesktop"
44
- }, /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
45
- items: menuItems === null || menuItems === void 0 ? void 0 : menuItems.items,
45
+ }, (menuItems === null || menuItems === void 0 ? void 0 : menuItems.visible) && /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
46
+ items: [...((menuItems === null || menuItems === void 0 ? void 0 : menuItems.items) || []), ...(footer !== null && footer !== void 0 && footer.visible ? [{
47
+ label: footer === null || footer === void 0 || (_footer$item = footer.item) === null || _footer$item === void 0 ? void 0 : _footer$item.label,
48
+ key: "footerAction",
49
+ onClick: handleFooterClick
50
+ }] : [])],
46
51
  trigger: ["click"],
47
52
  type: "primary",
48
53
  onMenuItemClick: key => {
49
- history.replace(key === null || key === void 0 ? void 0 : key.path);
54
+ if ((key === null || key === void 0 ? void 0 : key.key) === "footerAction") {
55
+ handleFooterClick();
56
+ } else {
57
+ history.replace(key === null || key === void 0 ? void 0 : key.path);
58
+ }
50
59
  }
51
60
  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
52
61
  color: "primary",
@@ -70,9 +79,9 @@ function SidebarWidget(_ref) {
70
79
  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, item === null || item === void 0 ? void 0 : item.iconConfig), item.label))), (footer === null || footer === void 0 ? void 0 : footer.visible) && /*#__PURE__*/_react.default.createElement("div", {
71
80
  className: "logoutDiv",
72
81
  onClick: () => handleFooterClick()
73
- }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, footer === null || footer === void 0 || (_footer$item = footer.item) === null || _footer$item === void 0 ? void 0 : _footer$item.iconConfig), /*#__PURE__*/_react.default.createElement(_Typography.default, {
82
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, footer === null || footer === void 0 || (_footer$item2 = footer.item) === null || _footer$item2 === void 0 ? void 0 : _footer$item2.iconConfig), /*#__PURE__*/_react.default.createElement(_Typography.default, {
74
83
  color: "negative",
75
84
  typography: "type-button-500"
76
- }, footer === null || footer === void 0 || (_footer$item2 = footer.item) === null || _footer$item2 === void 0 ? void 0 : _footer$item2.label))))));
85
+ }, footer === null || footer === void 0 || (_footer$item3 = footer.item) === null || _footer$item3 === void 0 ? void 0 : _footer$item3.label))))));
77
86
  }
78
87
  var _default = exports.default = (0, _reactRouterDom.withRouter)(SidebarWidget);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.345",
3
+ "version": "0.18.347",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",