asab_webui_components 25.1.1

package/dist/components/DataTable/DataTable.scss

@@ -0,0 +1,37 @@
+
+.datatable {
+	margin-bottom: 0;
+	thead {
+		font-weight: 700;
+
+		th {
+			vertical-align: bottom;
+		}
+	}
+	tbody {
+		th {
+			font-weight: 400;
+		}
+	}
+	tr {
+		display: table-row;
+		text-align: left;
+		vertical-align: inherit;
+	}
+	th {
+		color: var(--bs-heading-color);
+	}
+	td, th {
+		vertical-align: middle;
+	}
+
+	.data-table-arrow-btn {
+		padding-left: 0.75rem;
+
+		i {
+			color: var(--bs-primary);
+			cursor: pointer;
+		}
+	}
+
+ }

package/dist/components/DataTable/LimitDropdown.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+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 && {}.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; }
+var LimitDropdown = function LimitDropdown(_ref) {
+  var _ref$translationRoute = _ref.translationRoute,
+    translationRoute = _ref$translationRoute === void 0 ? '' : _ref$translationRoute,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? 10 : _ref$limit,
+    limitValues = _ref.limitValues,
+    setPage = _ref.setPage,
+    setLimit = _ref.setLimit;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLimitOpen = _useState2[0],
+    setLimitDropdown = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "pe-0"
+  }, t("General|Items per page"), ":"), /*#__PURE__*/_react["default"].createElement(_reactstrap.Dropdown, {
+    isOpen: isLimitOpen,
+    toggle: function toggle() {
+      return setLimitDropdown(function (prev) {
+        return !prev;
+      });
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownToggle, {
+    color: "text-dark",
+    outline: true,
+    caret: true
+  }, limit), /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownMenu, null, limitValues.map(function (value, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownItem, {
+      onClick: function onClick() {
+        setPage(1);
+        setLimit(value);
+      },
+      key: idx
+    }, value);
+  }))));
+};
+var _default = exports["default"] = LimitDropdown;

package/dist/components/DataTable/Pagination.js

@@ -0,0 +1,204 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+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 && {}.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; }
+// OBSOLETED COMPONENT (Aug 2023) - don't use this in a new designs
+
+function _default(_ref) {
+  var currentPage = _ref.currentPage,
+    setPage = _ref.setPage,
+    lastPage = _ref.lastPage,
+    style = _ref.style;
+  var slots = lastPage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    middlePart = _useState4[0],
+    setMiddlePart = _useState4[1];
+  var _useState5 = (0, _react.useState)([1, lastPage]),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    arrayStartEnd = _useState6[0],
+    setArrayStartEnd = _useState6[1];
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+
+  // Initial render with default values
+  (0, _react.useEffect)(function () {
+    setArrayStartEnd([1, lastPage]);
+    pagesMiddle();
+  }, [slots]);
+
+  // Set last page
+  (0, _react.useEffect)(function () {
+    if (currentPage > lastPage && lastPage != 0) {
+      setPage(lastPage);
+    }
+  }, [lastPage]);
+
+  // Insert '...' with more or less variables to an middle part array
+  var pages = (0, _react.useMemo)(function () {
+    if (middlePart.length > 0) {
+      var p = (0, _toConsumableArray2["default"])(arrayStartEnd);
+      p.splice.apply(p, [1, 0].concat((0, _toConsumableArray2["default"])(middlePart)));
+      if (p[1] > 2) {
+        p.splice(1, 0, "less");
+      }
+      if (p[p.length - 2] + 1 < lastPage) {
+        p.splice(p.length - 1, 0, "more");
+      }
+      return p;
+    }
+    if (arrayStartEnd[0] == arrayStartEnd[1]) {
+      return [arrayStartEnd[0]];
+    }
+    if (lastPage == 0) {
+      return [1];
+    }
+    return arrayStartEnd;
+  }, [middlePart]);
+
+  // Compute pages to display in the middle of first and last page
+  var pagesMiddle = function pagesMiddle(action) {
+    var p = []; // Pages array
+    var start = currentPage - Math.floor(slots / 2);
+    var end = currentPage + Math.floor(slots / 2);
+    if (action == "less" || action == "more") {
+      /*
+      	Compute start and end pages (increment or decrement) of a page
+      	'...' value (more or less) click
+      */
+      if (action == "less") {
+        start = middlePart[0] - 1;
+        end = middlePart[middlePart.length - 1] - 1;
+        if (start < 1) {
+          start = 1 - Math.floor(slots / 2);
+        }
+        if (end < 1) {
+          end = 1 + Math.floor(slots / 2);
+        }
+      } else if (action == "more") {
+        start = middlePart[0] + 1;
+        end = middlePart[middlePart.length - 1] + 1;
+        if (end > lastPage) {
+          end = lastPage - 1;
+        }
+        if (start >= lastPage) {
+          start = middlePart[0];
+        }
+      }
+      for (var i = start; i <= end; i++) {
+        p.splice(i, 0, i);
+      }
+      setMiddlePart(p);
+    } else {
+      // Set start and end variables
+      if (start < 1) {
+        start = 1;
+        end = Math.min(slots, lastPage);
+      } else if (end > lastPage) {
+        start = Math.max(lastPage - slots + 1, 1);
+        end = lastPage;
+      }
+      if (action == lastPage) {
+        /*
+        	Triggers only when clicking on last page
+        	and computes the appropriate page values
+        */
+        var e = end - 4;
+        if (e <= 1) {
+          e = start + 1;
+        }
+        for (var _i = e; _i < end; _i++) {
+          p.splice(_i - 1, 0, _i);
+        }
+        setMiddlePart(p);
+      } else {
+        // Triggers initially and on 1st page click
+        for (var _i2 = start + 1; _i2 < end; _i2++) {
+          p.splice(_i2 - 1, 0, _i2);
+          if (_i2 == 5 && end > 5) {
+            setMiddlePart(p);
+            return;
+          }
+        }
+      }
+    }
+    setMiddlePart(p);
+  };
+
+  // Action triggered on value click in page dropdown
+  var pageDropdownClick = function pageDropdownClick(p) {
+    if (p == "more" || p == "less") {
+      pagesMiddle(p);
+      setOpen(false);
+    } else {
+      /*
+      	Manage cases when user clicks on last or first item
+      	and would like to skip all the other pages in between
+      */
+      if (p == lastPage || p == 1) {
+        pagesMiddle(p);
+      }
+      setPage(p);
+      setOpen(true);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Dropdown, {
+    isOpen: open,
+    toggle: function toggle() {
+      return setOpen(function (prev) {
+        return !prev;
+      });
+    },
+    direction: "down",
+    className: "border-start"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownToggle, {
+    color: "text-dark",
+    outline: true,
+    caret: true
+  }, currentPage), /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownMenu, null, pages && pages.map(function (page, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownItem, {
+      key: idx,
+      onClick: function onClick() {
+        return pageDropdownClick(page);
+      }
+    }, page == "more" || page == "less" ? "..." : page);
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "border-end ps-0"
+  }, pages && pages.length > 1 ? "".concat(t('General|of'), " ").concat(lastPage == 0 ? 1 : lastPage, " ").concat(t("General|Pages")) : "".concat(t('General|of'), " ").concat(lastPage == 0 ? 1 : lastPage, " ").concat(t('General|Page'))), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    type: "button",
+    color: "primary",
+    outline: true,
+    onClick: function onClick() {
+      return setPage(Math.max(1, currentPage - 1));
+    },
+    disabled: currentPage <= 1
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-chevron-double-left"
+  })), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    type: "button",
+    color: "primary",
+    outline: true,
+    onClick: function onClick() {
+      return setPage(currentPage + 1);
+    },
+    disabled: currentPage >= lastPage
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-chevron-double-right"
+  })));
+}

package/dist/components/DataTable/Search.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var Search = function Search(_ref) {
+  var search = _ref.search,
+    filterValue = _ref.filterValue,
+    setFilterValue = _ref.setFilterValue;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "float-end ms-3 data-table-search"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.InputGroup, null, search.icon && /*#__PURE__*/_react["default"].createElement(_reactstrap.InputGroupText, null, /*#__PURE__*/_react["default"].createElement("i", {
+    className: search.icon
+  })), /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
+    value: filterValue,
+    onChange: function onChange(e) {
+      return setFilterValue(e.target.value);
+    },
+    placeholder: search.placeholder,
+    type: "text",
+    bsSize: "sm",
+    name: "search"
+  })));
+};
+var _default = exports["default"] = Search;

package/dist/components/DataTable/Sort.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+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 && {}.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; }
+var Sort = function Sort(_ref) {
+  var sort = _ref.sort;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isSortOpen = _useState2[0],
+    setSortDropdown = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "float-end ms-3 data-table-sort"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Dropdown, {
+    isOpen: isSortOpen,
+    toggle: function toggle() {
+      return setSortDropdown(function (prev) {
+        return !prev;
+      });
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownToggle, {
+    caret: true
+  }, sort.icon && /*#__PURE__*/_react["default"].createElement("i", {
+    className: "".concat(sort.icon, " me-1")
+  }), sort.title), /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownMenu, null, sort.items.map(function (item, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownItem, {
+      onClick: function onClick() {
+        return sort.onClick(item.value);
+      },
+      key: idx
+    }, item.icon && /*#__PURE__*/_react["default"].createElement("i", {
+      className: "".concat(item.icon, " me-1")
+    }), item.name);
+  }))));
+};
+var _default = exports["default"] = Sort;

package/dist/components/DataTable/Table.js

@@ -0,0 +1,310 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRedux = require("react-redux");
+var _reactRouterDom = require("react-router-dom");
+var _reactJsonView = _interopRequireDefault(require("react-json-view"));
+var _reactstrap = require("reactstrap");
+var _DateTime = require("../DateTime");
+var _Buttons = require("./Buttons");
+require("./DataTable.scss");
+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" != _typeof3(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 && {}.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 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) { (0, _defineProperty2["default"])(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; }
+var TableCell = function TableCell(_ref) {
+  var _header$datetime, _header$datetime2;
+  var obj = _ref.obj,
+    header = _ref.header,
+    idx = _ref.idx,
+    showJson = _ref.showJson,
+    jsonTheme = _ref.jsonTheme,
+    isSublist = _ref.isSublist;
+  if (!obj) return /*#__PURE__*/_react["default"].createElement("td", {
+    className: "ps-3",
+    style: {
+      whiteSpace: "nowrap"
+    }
+  }, "-");
+  var cell, icon, customCellStyle;
+  var textLinkStyle = {
+    whiteSpace: "nowrap",
+    marginBottom: 0
+  };
+  if (header !== null && header !== void 0 && header.customCellStyle) {
+    customCellStyle = header.customCellStyle;
+    textLinkStyle = _objectSpread(_objectSpread({}, textLinkStyle), customCellStyle);
+  }
+  if (header !== null && header !== void 0 && header.icon) {
+    icon = typeof header.icon === 'string' ? /*#__PURE__*/_react["default"].createElement("i", {
+      className: "".concat(header.icon, " pe-1")
+    }) : header.icon;
+  } else {
+    icon = null;
+  }
+  if (showJson) {
+    return /*#__PURE__*/_react["default"].createElement("td", {
+      className: "pe-3 data-table-td",
+      style: {
+        padding: "auto"
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      onClick: showJson,
+      className: "data-table-button text-primary",
+      style: {
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/_react["default"].createElement("i", {
+      className: "bi bi-filetype-json"
+    })));
+  } else if (header.json) cell = /*#__PURE__*/_react["default"].createElement(_reactJsonView["default"], {
+    className: "data-table-reactjson",
+    src: obj[header.key],
+    name: false,
+    collapsed: true,
+    enableClipboard: false,
+    theme: jsonTheme
+  });else if (header.link) {
+    var pathname = "#";
+    if ((0, _typeof2["default"])(header.link) === "object") {
+      pathname = header.link.pathname + obj[header.link.key];
+    } else if (typeof header.link === "function") {
+      pathname = header.link(obj, header);
+    }
+    cell = obj[header.key] ? /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+      to: pathname,
+      className: "data-table-link",
+      style: textLinkStyle,
+      title: obj[header.key]
+    }, icon, " ", obj[header.key]) : "-";
+  } else if (header.datetime) cell = obj[header.key] ? /*#__PURE__*/_react["default"].createElement(_DateTime.DateTime, {
+    className: "data-table-datetime",
+    value: obj[header.key],
+    dateTimeFormat: header !== null && header !== void 0 && (_header$datetime = header.datetime) !== null && _header$datetime !== void 0 && _header$datetime.dateTimeFormat ? header === null || header === void 0 || (_header$datetime2 = header.datetime) === null || _header$datetime2 === void 0 ? void 0 : _header$datetime2.dateTimeFormat : "medium"
+  }) : "-";else if (header.actionButton) {
+    cell = /*#__PURE__*/_react["default"].createElement(_Buttons.ActionButton, {
+      row: obj,
+      header: header,
+      actionButton: header.actionButton
+    });
+  } else if (header.customComponent) {
+    cell = header.customComponent.generate(obj, header);
+  } else cell = obj[header.key] ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: textLinkStyle,
+    title: obj[header.key]
+  }, obj[header.key]) : "-";
+  if (icon && !(header.link || header.datetime || header.actionButton)) {
+    cell = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, icon, " ", cell);
+  }
+  return idx === 0 && !isSublist ? /*#__PURE__*/_react["default"].createElement("th", {
+    className: "data-table-th",
+    scope: "row",
+    style: _objectSpread({}, customCellStyle)
+  }, cell) : /*#__PURE__*/_react["default"].createElement("td", {
+    className: "ps-3 data-table-td",
+    style: _objectSpread({
+      whiteSpace: "nowrap"
+    }, customCellStyle)
+  }, cell);
+};
+var Headers = function Headers(_ref2) {
+  var headers = _ref2.headers,
+    advmode = _ref2.advmode,
+    sublists = _ref2.sublists;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("colgroup", {
+    className: "data-table-colgroup"
+  }, advmode && /*#__PURE__*/_react["default"].createElement("col", {
+    style: {
+      width: "1px"
+    }
+  }), sublists && /*#__PURE__*/_react["default"].createElement("col", {
+    style: {
+      width: "1px"
+    }
+  }), headers.map(function (_, idx) {
+    return /*#__PURE__*/_react["default"].createElement("col", {
+      className: "data-table-col".concat(idx),
+      style: _objectSpread({
+        width: idx === headers.length - 1 ? "auto" : "8em"
+      }, _.customHeaderStyle),
+      key: idx
+    });
+  })), /*#__PURE__*/_react["default"].createElement("thead", {
+    className: "data-table-thead"
+  }, /*#__PURE__*/_react["default"].createElement("tr", {
+    className: "data-table-tr"
+  }, advmode && /*#__PURE__*/_react["default"].createElement("th", {
+    className: "ps-3 data-table-adv-header-th"
+  }, " "), sublists && /*#__PURE__*/_react["default"].createElement("th", {
+    className: "ps-3 data-table-sub-header-th"
+  }, " "), headers.map(function (header, idx) {
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      key: idx,
+      className: "data-table-header-th".concat(idx !== 0 ? " ps-3" : "")
+    }, header.name);
+  }))));
+};
+var TableRow = function TableRow(_ref3) {
+  var obj = _ref3.obj,
+    advmode = _ref3.advmode,
+    headers = _ref3.headers,
+    rowStyle = _ref3.rowStyle,
+    rowClassName = _ref3.rowClassName,
+    category = _ref3.category,
+    collapseChildren = _ref3.collapseChildren,
+    toggleChildrenOnRowClick = _ref3.toggleChildrenOnRowClick;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isAdvUnwrapped = _useState2[0],
+    setAdvUnwrapped = _useState2[1];
+  var _useState3 = (0, _react.useState)(collapseChildren == false ? true : false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isSubUnwrapped = _useState4[0],
+    setSubUnwrapped = _useState4[1];
+  var theme = (0, _reactRedux.useSelector)(function (state) {
+    return state === null || state === void 0 ? void 0 : state.theme;
+  });
+  var getStyle = function getStyle(obj) {
+    if (rowStyle !== null && rowStyle !== void 0 && rowStyle.condition && rowStyle !== null && rowStyle !== void 0 && rowStyle.condition(obj)) {
+      return rowStyle.style;
+    }
+    return {};
+  };
+  var getClassName = function getClassName(obj) {
+    if (rowClassName !== null && rowClassName !== void 0 && rowClassName.condition && rowClassName !== null && rowClassName !== void 0 && rowClassName.condition(obj)) {
+      return rowClassName.className;
+    }
+    return "";
+  };
+  var getJsonTheme = function getJsonTheme(obj) {
+    if (rowStyle !== null && rowStyle !== void 0 && rowStyle.jsonTheme && rowStyle !== null && rowStyle !== void 0 && rowStyle.condition(obj)) {
+      return rowStyle.jsonTheme;
+    } else if (rowClassName !== null && rowClassName !== void 0 && rowClassName.jsonTheme && rowClassName !== null && rowClassName !== void 0 && rowClassName.condition(obj)) {
+      return rowClassName.jsonTheme;
+    } else if (theme !== "light") {
+      return "chalk";
+    } else {
+      return "rjv-default";
+    }
+  };
+  var style = (0, _react.useMemo)(function () {
+    return getStyle(obj);
+  }, [obj]);
+  var className = (0, _react.useMemo)(function () {
+    return getClassName(obj);
+  }, [obj]);
+  var jsonTheme = (0, _react.useMemo)(function () {
+    return getJsonTheme(obj, theme);
+  }, [obj, theme]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", {
+    // Enable data-table-tr-cursor class only when category is present and toggleChildrenOnRowClick is set to true
+    className: "data-table-tr ".concat(className, " ").concat(category && toggleChildrenOnRowClick == true && "data-table-tr-cursor"),
+    style: style
+    // Enable onClick only when category is present and toggleChildrenOnRowClick is set to true
+    ,
+    onClick: function onClick() {
+      return category && toggleChildrenOnRowClick == true && setSubUnwrapped(function (prev) {
+        return !prev;
+      });
+    }
+  }, advmode && /*#__PURE__*/_react["default"].createElement(TableCell, {
+    obj: obj,
+    showJson: function showJson() {
+      return setAdvUnwrapped(function (prev) {
+        return !prev;
+      });
+    }
+  }), category && /*#__PURE__*/_react["default"].createElement("td", {
+    className: "data-table-arrow-btn",
+    onClick: function onClick() {
+      return toggleChildrenOnRowClick == true ? null : setSubUnwrapped(function (prev) {
+        return !prev;
+      });
+    }
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: isSubUnwrapped ? "bi bi-arrow-down-circle" : "bi bi-arrow-right-circle"
+  })), headers.map(function (header, idx) {
+    return /*#__PURE__*/_react["default"].createElement(TableCell, {
+      obj: obj,
+      header: header,
+      idx: idx,
+      key: idx,
+      jsonTheme: jsonTheme
+    });
+  })), (category === null || category === void 0 ? void 0 : category.sublistKey) && obj[category.sublistKey] && isSubUnwrapped && obj[category.sublistKey]["data"].map(function (child, idx) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      className: "data-table-tr-child",
+      style: style,
+      key: "child-".concat(idx)
+    }, advmode && /*#__PURE__*/_react["default"].createElement("td", null), /*#__PURE__*/_react["default"].createElement("td", null), headers.map(function (header, idx) {
+      return /*#__PURE__*/_react["default"].createElement(TableCell, {
+        isSublist: true,
+        obj: child,
+        header: header,
+        idx: idx,
+        key: idx,
+        jsonTheme: jsonTheme
+      });
+    }));
+  }), advmode && isAdvUnwrapped && /*#__PURE__*/_react["default"].createElement("tr", {
+    className: "data-table-adv-tr",
+    style: {
+      backgroundColor: "rgba(0, 0, 0, 0.025)"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("td", {
+    colSpan: category !== null && category !== void 0 && category.sublistKey ? headers.length + 2 : headers.length + 1,
+    className: "data-table-adv-td"
+  }, /*#__PURE__*/_react["default"].createElement(_reactJsonView["default"], {
+    theme: theme === 'dark' ? "chalk" : "rjv-default",
+    src: obj,
+    name: false
+  }))));
+};
+var ASABTable = function ASABTable(_ref4) {
+  var data = _ref4.data,
+    headers = _ref4.headers,
+    advmode = _ref4.advmode,
+    rowStyle = _ref4.rowStyle,
+    rowClassName = _ref4.rowClassName,
+    category = _ref4.category,
+    collapseChildren = _ref4.collapseChildren,
+    toggleChildrenOnRowClick = _ref4.toggleChildrenOnRowClick;
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Table, {
+    hover: true,
+    responsive: true,
+    className: "datatable"
+  }, /*#__PURE__*/_react["default"].createElement(Headers, {
+    sublists: !!category,
+    headers: headers,
+    advmode: advmode
+  }), /*#__PURE__*/_react["default"].createElement("tbody", {
+    className: "data-table-tbody"
+  }, data && data.map(function (obj, idx) {
+    return /*#__PURE__*/_react["default"].createElement(TableRow, {
+      obj: obj,
+      advmode: advmode,
+      headers: headers,
+      rowStyle: rowStyle,
+      rowClassName: rowClassName,
+      category: category,
+      collapseChildren: collapseChildren,
+      toggleChildrenOnRowClick: toggleChildrenOnRowClick,
+      key: idx
+    });
+  })));
+};
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    theme: state.theme
+  };
+};
+var _default = exports["default"] = (0, _reactRedux.connect)(mapStateToProps)(ASABTable);