@lanaco/lnc-react-ui 2.1.46 → 2.1.47

package/lib/index.js

@@ -7023,6 +7023,148 @@ ConfirmationForm.propTypes = {
   color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "background"])
 };
 
+var css_248z$5 = ".styles-module_dropbtn__3BuA0 {\n  font-size: var(--base-additional-text-font-size);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.styles-module_disabled__3pCU6 {\n  color: gray;\n}\n\n.styles-module_dropdownContent__2g5rN {\n  display: none;\n  position: absolute;\n  background-color: #f1f1f1;\n  min-width: 160px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n}\n\n.styles-module_dropdownContent__2g5rN a {\n  background-color: var(--lanaco-grids-and-forms-color);\n  color: var(--color-base-blue) !important;\n  padding: 6px 6px;\n  text-decoration: none;\n  display: block;\n  font-size: 14px;\n  padding: 2px;\n}\n\n.styles-module_dropdownContent__2g5rN a:hover {\n  background-color: gainsboro;\n  color: #0091a7 !important;\n}\n\n.styles-module_dropdown__zPTAO:hover .styles-module_dropdownContent__2g5rN {\n  display: block;\n}\n\n.styles-module_linkInnerSpan__2Gjny {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 2px;\n}\n\n.styles-module_linkIconSpan__1IQ0O {\n  min-width: 20%;\n  max-width: 20%;\n}\n\n.styles-module_iconSpan__2IYf9 {\n  position: relative;\n}\n\n@keyframes styles-module_mymove__2DflL {\n  from {\n    top: 0px;\n  }\n  to {\n    top: 3px;\n  }\n}\n\n.styles-module_dropdown__zPTAO:hover .styles-module_iconSpan__2IYf9 {\n  animation: styles-module_mymove__2DflL 0.4s;\n  animation-iteration-count: infinite;\n}\n";
+var styles = {"dropbtn":"styles-module_dropbtn__3BuA0","disabled":"styles-module_disabled__3pCU6","dropdownContent":"styles-module_dropdownContent__2g5rN","dropdown":"styles-module_dropdown__zPTAO","linkInnerSpan":"styles-module_linkInnerSpan__2Gjny","linkIconSpan":"styles-module_linkIconSpan__1IQ0O","iconSpan":"styles-module_iconSpan__2IYf9","mymove":"styles-module_mymove__2DflL"};
+styleInject(css_248z$5);
+
+var _templateObject$q;
+
+var getPadding = function getPadding(size) {
+  if (size === "small") return "0.4125rem 0.34375rem";
+  if (size === "medium") return "0.475rem 0.415625rem";
+  if (size === "large") return "0.5375rem 0.44375rem";
+};
+
+var heightBySize$d = function heightBySize(size) {
+  if (size === "small") return "max-height: 1.625rem; min-height: 1.625rem;";
+  if (size === "medium") return "max-height: 2rem; min-height: 2rem;";
+  if (size === "large") return "max-height: 2.375rem; min-height: 2.375rem;";
+};
+
+var Span$1 = newStyled.span(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: inherit;\n  font-size: ", ";\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) {
+  return props.theme.typography[props.size].fontSize;
+}, function (props) {
+  return getPadding(props.size);
+}, function (props) {
+  return props.theme.palette[props.color].main;
+}, function (props) {
+  return heightBySize$d(props.size);
+});
+
+var Icon$2 = function Icon(props) {
+  var tooltip = props.tooltip,
+      icon = props.icon,
+      iconStyle = props.iconStyle,
+      className = props.className,
+      size = props.size,
+      color = props.color,
+      theme = props.theme;
+  var themeProps = {
+    theme: theme,
+    size: size,
+    color: color
+  };
+
+  var getIconClass = function getIconClass() {
+    var style = iconStyle === "solid" ? "fas" : "far";
+    return "".concat(style, " fa-").concat(icon, " fa-fw");
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Span$1, _extends__default['default']({}, themeProps, {
+    className: className,
+    tooltip: tooltip
+  }), /*#__PURE__*/React__default['default'].createElement("i", {
+    className: getIconClass()
+  }));
+};
+
+Icon$2.defaultProps = {
+  tooltip: "",
+  icon: "",
+  iconStyle: "solid",
+  className: "",
+  size: "small",
+  color: "primary",
+  theme: theme
+};
+Icon$2.propTypes = {
+  tooltip: PropTypes__default['default'].string,
+  theme: PropTypes__default['default'].object.isRequired,
+  icon: PropTypes__default['default'].string,
+  iconStyle: PropTypes__default['default'].oneOf(["solid", "regular"]),
+  className: PropTypes__default['default'].string,
+  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
+  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "white", "black"])
+};
+
+var _templateObject$p, _templateObject2$k, _templateObject3$f;
+
+var Dropdown = newStyled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral__default['default'](["\n  display: ", ";\n  position: absolute;\n  background-color: white;\n  min-width: 160px;\n  border-radius: 3.5px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n"])), function (props) {
+  return props.show ? "block" : "none";
+});
+var ItemWrapper$2 = newStyled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral__default['default'](["\n  padding: 2px;\n"])));
+var Item$4 = newStyled.a(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral__default['default'](["\n  background-color: white;\n  color: ", ";\n  padding: 6px 6px;\n  text-decoration: none;\n  display: block;\n  font-size: 12px;\n  padding: 2px;\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), theme.palette.primary.main, theme.palette.primary.light); //============================================================
+
+var DropdownMenu = function DropdownMenu(props) {
+  var _props$actionData = props.actionData,
+      actionData = _props$actionData === void 0 ? function () {} : _props$actionData,
+      _props$items = props.items,
+      items = _props$items === void 0 ? [] : _props$items;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var onHover = function onHover() {
+    if (props.disabled !== true) setShow(true);
+  };
+
+  var onBlur = function onBlur() {
+    setShow(false);
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    onMouseOver: onHover,
+    onMouseOut: onBlur
+  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+    disabled: props.disabled,
+    onClick: onHover,
+    icon: "bars",
+    inverted: true
+  })), /*#__PURE__*/React__default['default'].createElement(Dropdown, {
+    show: show
+  }, items.map(function (x, i) {
+    return /*#__PURE__*/React__default['default'].createElement(ItemWrapper$2, {
+      key: i,
+      onMouseOver: onHover,
+      onMouseOut: onBlur
+    }, /*#__PURE__*/React__default['default'].createElement(Item$4, {
+      href: "#",
+      onMouseOver: onHover,
+      onMouseOut: onBlur,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        x.action(actionData);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: styles.linkInnerSpan
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: styles.linkIconSpan
+    }, /*#__PURE__*/React__default['default'].createElement(Icon$2, {
+      icon: x.icon
+    })), x.name)));
+  })));
+};
+
+var freeze = function freeze(dependcies) {
+  var freeze = false;
+  dependcies.forEach(function (el) {
+    freeze = freeze || el;
+  });
+  return freeze;
+};
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -14660,11 +14802,11 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return React.cloneElement(child); })));
 };
 
-var _templateObject$q, _templateObject2$k;
-var Overlay = newStyled(motion.div)(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral__default['default'](["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n"])), function (props) {
+var _templateObject$o, _templateObject2$j;
+var Overlay = newStyled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral__default['default'](["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n  overflow: hidden;\n"])), function (props) {
   return props.zIndex;
 });
-var ModalContainer = newStyled(motion.div)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral__default['default'](["\n  width: 50%;\n  background-color: white;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  border-radius: 0.2rem;\n  background: white;\n  z-index: ", ";\n"])), function (props) {
+var ModalContainer = newStyled(motion.div)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral__default['default'](["\n  width: 50%;\n  background-color: white;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  border-radius: 0.2rem;\n  background: white;\n  z-index: ", ";\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.zIndex;
@@ -14707,8 +14849,7 @@ var Content$4 = newStyled.div(function (props) {
 });
 
 function Modal(props) {
-  var onClose = props.onClose,
-      open = props.open,
+  var open = props.open,
       zIndex = props.zIndex,
       header = props.header,
       className = props.className,
@@ -14721,6 +14862,18 @@ function Modal(props) {
       width = props.width,
       basic = props.basic,
       headerTitleComponent = props.headerTitleComponent;
+  React.useEffect(function () {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [open]);
+
+  var onClose = function onClose(event) {
+    props.onClose(event);
+  };
+
   var themeProps = {
     theme: theme,
     size: size,
@@ -14735,7 +14888,6 @@ function Modal(props) {
     if (event.target !== event.currentTarget) return;
 
     if (clickOutsideToClose || !showHeader) {
-      document.body.style.overflow = "auto";
       onClose(event);
     }
   };
@@ -14753,11 +14905,6 @@ function Modal(props) {
       top: "-50%"
     }
   };
-
-  if (open) {
-    document.body.style.overflow = "hidden";
-  }
-
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, open && /*#__PURE__*/React__default['default'].createElement(Overlay, _extends__default['default']({}, themeProps, {
     onClick: onClickOutsideModal,
     className: className
@@ -14770,7 +14917,6 @@ function Modal(props) {
     icon: "times",
     iconStyle: "solid",
     onClick: function onClick(e) {
-      document.body.style.overflow = "auto";
       onClose(e);
     },
     color: basic ? "transparent" : themeProps.color
@@ -14807,164 +14953,133 @@ Modal.propTypes = {
   headerTitleComponent: PropTypes__default['default'].node
 };
 
-var css_248z$5 = ".styles-module_dropbtn__3BuA0 {\n  font-size: var(--base-additional-text-font-size);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.styles-module_disabled__3pCU6 {\n  color: gray;\n}\n\n.styles-module_dropdownContent__2g5rN {\n  display: none;\n  position: absolute;\n  background-color: #f1f1f1;\n  min-width: 160px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n}\n\n.styles-module_dropdownContent__2g5rN a {\n  background-color: var(--lanaco-grids-and-forms-color);\n  color: var(--color-base-blue) !important;\n  padding: 6px 6px;\n  text-decoration: none;\n  display: block;\n  font-size: 14px;\n  padding: 2px;\n}\n\n.styles-module_dropdownContent__2g5rN a:hover {\n  background-color: gainsboro;\n  color: #0091a7 !important;\n}\n\n.styles-module_dropdown__zPTAO:hover .styles-module_dropdownContent__2g5rN {\n  display: block;\n}\n\n.styles-module_linkInnerSpan__2Gjny {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 2px;\n}\n\n.styles-module_linkIconSpan__1IQ0O {\n  min-width: 20%;\n  max-width: 20%;\n}\n\n.styles-module_iconSpan__2IYf9 {\n  position: relative;\n}\n\n@keyframes styles-module_mymove__2DflL {\n  from {\n    top: 0px;\n  }\n  to {\n    top: 3px;\n  }\n}\n\n.styles-module_dropdown__zPTAO:hover .styles-module_iconSpan__2IYf9 {\n  animation: styles-module_mymove__2DflL 0.4s;\n  animation-iteration-count: infinite;\n}\n";
-var styles = {"dropbtn":"styles-module_dropbtn__3BuA0","disabled":"styles-module_disabled__3pCU6","dropdownContent":"styles-module_dropdownContent__2g5rN","dropdown":"styles-module_dropdown__zPTAO","linkInnerSpan":"styles-module_linkInnerSpan__2Gjny","linkIconSpan":"styles-module_linkIconSpan__1IQ0O","iconSpan":"styles-module_iconSpan__2IYf9","mymove":"styles-module_mymove__2DflL"};
-styleInject(css_248z$5);
-
-var _templateObject$p;
-
-var getPadding = function getPadding(size) {
-  if (size === "small") return "0.4125rem 0.34375rem";
-  if (size === "medium") return "0.475rem 0.415625rem";
-  if (size === "large") return "0.5375rem 0.44375rem";
-};
-
-var heightBySize$d = function heightBySize(size) {
-  if (size === "small") return "max-height: 1.625rem; min-height: 1.625rem;";
-  if (size === "medium") return "max-height: 2rem; min-height: 2rem;";
-  if (size === "large") return "max-height: 2.375rem; min-height: 2.375rem;";
+var heightBySize$c = function heightBySize(size, hasText) {
+  if (size === "small") return "1.625rem";
+  if (size === "medium") return "2rem";
+  if (size === "large") return "2.375rem";
 };
 
-var Span$1 = newStyled.span(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  box-sizing: border-box;\n  background-color: inherit;\n  font-size: ", ";\n  padding: ", ";\n  color: ", ";\n  ", "\n"])), function (props) {
-  return props.theme.typography[props.size].fontSize;
-}, function (props) {
-  return getPadding(props.size);
-}, function (props) {
-  return props.theme.palette[props.color].main;
-}, function (props) {
-  return heightBySize$d(props.size);
+var Select = newStyled.select(function (props) {
+  return {
+    fontFamily: props.theme.typography.fontFamily,
+    outline: "none",
+    backgroundColor: props.theme.palette[props.color].lighter,
+    color: props.theme.palette[props.color].textDark,
+    transition: "all 250ms",
+    fontSize: props.theme.typography[props.size].fontSize,
+    border: "0px",
+    borderBottom: "0.125rem solid ".concat(props.theme.palette[props.color].main),
+    width: "100%",
+    boxSizing: "border-box",
+    minHeight: heightBySize$c(props.size),
+    maxHeight: heightBySize$c(props.size),
+    cursor: "pointer",
+    "&:focus": {
+      backgroundColor: props.theme.palette.common.white,
+      color: props.theme.palette.common.black
+    },
+    "&:disabled": {
+      backgroundColor: props.theme.palette.gray[200],
+      borderBottom: "0.125rem solid ".concat(props.theme.palette.gray[900]),
+      color: props.theme.palette.gray.textLight,
+      cursor: "default",
+      opacity: 0.7
+    }
+  };
 });
-
-var Icon$2 = function Icon(props) {
-  var tooltip = props.tooltip,
-      icon = props.icon,
-      iconStyle = props.iconStyle,
-      className = props.className,
+var Option = newStyled.option(function (props) {
+  return {
+    fontFamily: props.theme.typography.fontFamily
+  };
+});
+var DropDown = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
+  var mapNameTo = props.mapNameTo,
+      mapValueTo = props.mapValueTo,
+      id = props.id,
+      preventDefault = props.preventDefault,
+      onChange = props.onChange,
+      items = props.items,
+      disabled = props.disabled,
       size = props.size,
       color = props.color,
-      theme = props.theme;
-  var themeProps = {
-    theme: theme,
-    size: size,
-    color: color
+      theme = props.theme,
+      value = props.value,
+      tooltip = props.tooltip,
+      withoutEmpty = props.withoutEmpty,
+      className = props.className;
+
+  var handleOnChange = function handleOnChange(e) {
+    if (preventDefault) e.preventDefault();
+    onChange(id, e.target.value);
   };
 
-  var getIconClass = function getIconClass() {
-    var style = iconStyle === "solid" ? "fas" : "far";
-    return "".concat(style, " fa-").concat(icon, " fa-fw");
+  var getItems = function getItems() {
+    var name = "name";
+    var value = "value";
+    if (mapNameTo && mapNameTo !== "") name = mapNameTo;
+    if (mapValueTo && mapValueTo !== "") value = mapValueTo;
+    return items.map(function (el, i) {
+      return /*#__PURE__*/React__default['default'].createElement(Option, {
+        theme: theme,
+        size: size,
+        color: color,
+        key: i,
+        value: el[value]
+      }, el[name]);
+    });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Span$1, _extends__default['default']({}, themeProps, {
-    className: className,
-    tooltip: tooltip
-  }), /*#__PURE__*/React__default['default'].createElement("i", {
-    className: getIconClass()
-  }));
-};
-
-Icon$2.defaultProps = {
+  return /*#__PURE__*/React__default['default'].createElement(Select, {
+    theme: theme,
+    size: size,
+    color: color,
+    className: className,
+    disabled: disabled,
+    "default": value,
+    title: tooltip,
+    onChange: handleOnChange,
+    value: value,
+    ref: ref
+  }, !withoutEmpty && /*#__PURE__*/React__default['default'].createElement(Option, {
+    theme: theme,
+    size: size,
+    color: color,
+    key: -1,
+    value: -1
+  }, "???"), getItems());
+});
+DropDown.defaultProps = {
+  id: "",
+  disabled: false,
   tooltip: "",
-  icon: "",
-  iconStyle: "solid",
+  onChange: function onChange() {},
   className: "",
+  preventDefault: true,
   size: "small",
   color: "primary",
-  theme: theme
+  theme: theme,
+  items: [],
+  withoutEmpty: false,
+  mapValueTo: "value",
+  mapNameTo: "name"
 };
-Icon$2.propTypes = {
-  tooltip: PropTypes__default['default'].string,
+DropDown.propTypes = {
   theme: PropTypes__default['default'].object.isRequired,
-  icon: PropTypes__default['default'].string,
-  iconStyle: PropTypes__default['default'].oneOf(["solid", "regular"]),
+  id: PropTypes__default['default'].string,
+  disabled: PropTypes__default['default'].bool,
+  tooltip: PropTypes__default['default'].string,
+  onChange: PropTypes__default['default'].func,
   className: PropTypes__default['default'].string,
+  preventDefault: PropTypes__default['default'].bool,
+  withoutEmpty: PropTypes__default['default'].bool,
+  mapValueTo: PropTypes__default['default'].string,
+  mapNameTo: PropTypes__default['default'].string,
   size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
-  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray", "white", "black"])
-};
-
-var _templateObject$o, _templateObject2$j, _templateObject3$f;
-
-var Dropdown = newStyled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral__default['default'](["\n  display: ", ";\n  position: absolute;\n  background-color: white;\n  min-width: 160px;\n  border-radius: 3.5px;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n"])), function (props) {
-  return props.show ? "block" : "none";
-});
-var ItemWrapper$2 = newStyled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral__default['default'](["\n  padding: 2px;\n"])));
-var Item$4 = newStyled.a(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral__default['default'](["\n  background-color: white;\n  color: ", ";\n  padding: 6px 6px;\n  text-decoration: none;\n  display: block;\n  font-size: 12px;\n  padding: 2px;\n\n  &:hover {\n    background-color: whitesmoke;\n    color: ", ";\n  }\n"])), theme.palette.primary.main, theme.palette.primary.light); //============================================================
-
-var DropdownMenu = function DropdownMenu(props) {
-  var _props$actionData = props.actionData,
-      actionData = _props$actionData === void 0 ? function () {} : _props$actionData,
-      _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      show = _useState2[0],
-      setShow = _useState2[1];
-
-  var onHover = function onHover() {
-    if (props.disabled !== true) setShow(true);
-  };
-
-  var onBlur = function onBlur() {
-    setShow(false);
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
-    onMouseOver: onHover,
-    onMouseOut: onBlur
-  }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
-    disabled: props.disabled,
-    onClick: onHover,
-    icon: "bars",
-    inverted: true
-  })), /*#__PURE__*/React__default['default'].createElement(Dropdown, {
-    show: show
-  }, items.map(function (x, i) {
-    return /*#__PURE__*/React__default['default'].createElement(ItemWrapper$2, {
-      key: i,
-      onMouseOver: onHover,
-      onMouseOut: onBlur
-    }, /*#__PURE__*/React__default['default'].createElement(Item$4, {
-      href: "#",
-      onMouseOver: onHover,
-      onMouseOut: onBlur,
-      onClick: function onClick(e) {
-        e.preventDefault();
-        x.action(actionData);
-      }
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: styles.linkInnerSpan
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: styles.linkIconSpan
-    }, /*#__PURE__*/React__default['default'].createElement(Icon$2, {
-      icon: x.icon
-    })), x.name)));
-  })));
-};
-
-var FormMode = {
-  READ: "READ",
-  EDIT: "EDIT",
-  ADD: "ADD"
-};
-
-var ViewType = {
-  TABLE_VIEW: "TableView",
-  FORM_VIEW: "FormView"
-};
-
-var css_248z$4 = ".styles-module_editedBorder__1kxLW {\n  border-top: 4.5px solid orange;\n  /* padding-top: 10px; */\n}\n\n.styles-module_successBorder__2_tn2 {\n  border-top: 4.5px solid green;\n  /* padding-top: 10px; */\n}\n\n.styles-module_flexContainer__ifOLC {\n  display: flex;\n  justify-content: space-between;\n}\n\n@media only screen and (max-width: 1081px) {\n  .styles-module_flexContainer__ifOLC {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .styles-module_filterContainerHolder__3Fvqv {\n    min-width: 100% !important;\n    max-width: 100% !important;\n  }\n}\n\n.styles-module_flexInnerContainer__29aU5 {\n  display: flex;\n  align-content: center;\n  align-items: center;\n}\n\n.styles-module_filterContainerHolder__3Fvqv {\n  min-width: 50%;\n  max-width: 50%;\n}\n\n.styles-module_flexItem__2CpYr {\n  padding-left: 6px;\n  padding-right: 6px;\n  font-size: 1.4em;\n  max-height: 40px;\n}\n\n.styles-module_view__38xGS {\n  margin-top: 15px;\n  box-shadow: 0 0 20px #bebebe;\n  height: 100%;\n  overflow-y: auto;\n  max-height: calc(100vh - 120px);\n}\n\n.styles-module_contextMenu__1wBsk {\n  margin-left: 20px;\n}\n\n.styles-module_disabledChildren__3QAyB:hover {\n  cursor: not-allowed;\n}\n\n.styles-module_disabledChildren__3QAyB * {\n  pointer-events: none;\n  opacity: 1;\n}\n\n.styles-module_movementFlexContainer__2DCXk {\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_container__2BNuf {\n  display: grid;\n  grid-template-columns: 70% 30%;\n}\n\n.styles-module_flexContainerLeft__20szj {\n  display: flex;\n  flex-direction: row;\n  padding-left: 15px;\n}\n\n.styles-module_flexContainerRight__2Dfw9 {\n  display: flex;\n  flex-direction: row-reverse;\n  padding-right: 22px;\n}\n\n.styles-module_movementFlexItem__bTNJZ {\n  padding: 10px;\n}\n\n.styles-module_row__19N86 {\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_cell__1sqid {\n  background-color: inherit;\n  cursor: pointer;\n}\n\n.styles-module_pointer__3spmX {\n  cursor: pointer !important;\n}\n\n.styles-module_header__1y2iY {\n  cursor: pointer;\n  background-color: var(--color-base-blue);\n  color: var(--color-base-white);\n  border-right: 1px solid #003954;\n  text-align: left;\n  padding-right: 5px;\n}\n\n.styles-module_header__1y2iY:hover {\n  background-color: #00496b;\n}\n\n.styles-module_header__1y2iY:hover .styles-module_headerInnerIconDiv__bwi4x {\n  color: white;\n}\n\n.styles-module_specialRenderCell__-KydO {\n  background-color: inherit;\n  cursor: pointer;\n  font-size: 1em;\n}\n\n.styles-module_header__1y2iY,\n.styles-module_specialRenderCell__-KydO {\n  text-align: center;\n  padding-left: 5px;\n}\n\n.styles-module_withLeftPadding__3jC1x {\n  padding-left: 5px;\n}\n\n.styles-module_cell__1sqid,\n.styles-module_specialRenderCell__-KydO {\n  border-right: 1px solid #ccc;\n  padding-left: 5px;\n}\n\n.styles-module_tableRowEven__jVl2g {\n  background: white;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-top: 1px solid transparent;\n}\n\n.styles-module_tableRowOdd__25e6T {\n  background: whitesmoke;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-top: 1px solid transparent;\n}\n\n.styles-module_tableRowEven__jVl2g:hover,\n.styles-module_tableRowOdd__25e6T:hover {\n  border: 1px solid #0091a7 !important;\n  position: relative;\n  background-color: #73abf12e;\n}\n\n.styles-module_checkedRow__UiEsv {\n  background-color: #ccebf0 !important;\n  border-top: 1px solid gray;\n  border-bottom: 1px solid gray;\n}\n\n.styles-module_table__3M2Ek {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n@media screen and (max-width: 1400px) {\n  .styles-module_table__3M2Ek {\n    width: 100%;\n    font-size: 0.7em;\n  }\n}\n\n.styles-module_headerInnerDiv__39OF- {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.styles-module_headerInnerIconDiv__bwi4x {\n  color: #b0b3b5;\n}\n\n.styles-module_selectColumn__2K77f {\n  width: 50px !important;\n  padding-right: 5px;\n}\n\n@media (max-width: 576px) {\n  .styles-module_hide-576__1hiUv {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .styles-module_hide-768__2KkSI {\n    display: none;\n  }\n}\n\n@media (max-width: 992px) {\n  .styles-module_hide-992__2BwXA {\n    display: none;\n  }\n\n  .styles-module_cell__1sqid,\n  .styles-module_header__1y2iY {\n    display: none;\n  }\n\n  .styles-module_cell__1sqid:first-child,\n  .styles-module_cell__1sqid:nth-child(2),\n  .styles-module_cell__1sqid:nth-child(3),\n  .styles-module_header__1y2iY:first-child,\n  .styles-module_header__1y2iY:nth-child(2),\n  .styles-module_header__1y2iY:nth-child(3) {\n    display: table-cell;\n  }\n}\n\n@media (max-width: 1200px) {\n  .styles-module_hide-1200__3CTPm {\n    display: none;\n  }\n}\n\n.styles-module_tablePaginationContainer__2vs7V {\n  display: flex;\n  flex-direction: row;\n  font-size: 0.8em;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  padding: 5px;\n}\n\n.styles-module_tablePaginationItem__3RjNk {\n  padding-left: 10px;\n  display: flex;\n  align-items: center;\n}\n\n.styles-module_exportButtons__vd7yH {\n  display: flex;\n  font-size: 2em;\n  justify-content: space-evenly;\n  padding-right: 10px;\n  width: 5%;\n}\n\n.styles-module_innerPaginationContainer__3eHKY {\n  display: flex;\n}\n\n.styles-module_dirtyInfoButton__3U1xV {\n  width: 100%;\n  height: 100%;\n  font-size: 1em;\n}\n";
-styleInject(css_248z$4);
-
-var freeze = function freeze(dependcies) {
-  var freeze = false;
-  dependcies.forEach(function (el) {
-    freeze = freeze || el;
-  });
-  return freeze;
+  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
 };
 
-var _templateObject$n, _templateObject2$i;
-var Container$j = newStyled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  font-size: ", ";\n  font-family: ", ";\n  padding: 0px 8px;\n"])), function (props) {
+var _templateObject$n, _templateObject2$i, _templateObject3$e, _templateObject4$d, _templateObject5$c, _templateObject6$a;
+var Container$j = newStyled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
   return props.theme.typography.small.fontSize;
 }, function (props) {
   return props.theme.typography.fontFamily;
@@ -14972,72 +15087,379 @@ var Container$j = newStyled.div(_templateObject$n || (_templateObject$n = _tagge
 var Item$3 = newStyled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.first ? "0" : "6px";
 });
+var ExportItem = newStyled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
+var ItemText = newStyled.div(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral__default['default'](["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemCurrentPage = newStyled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
+var ItemDropdown = newStyled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral__default['default'](["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
 
-var FormViewMovement = function FormViewMovement(props) {
-  //====== PROPS ======
-  var _props$Config = props.Config,
-      CanGoToFirstItem = _props$Config.CanGoToFirstItem,
-      CanGoToLastItem = _props$Config.CanGoToLastItem,
-      CanGoToNextItem = _props$Config.CanGoToNextItem,
-      CanGoToPreviousItem = _props$Config.CanGoToPreviousItem,
-      IsLoading = _props$Config.IsLoading,
-      goToFirstItem = _props$Config.goToFirstItem,
-      goToLastItem = _props$Config.goToLastItem,
-      goToNextItem = _props$Config.goToNextItem,
-      goToPreviousItem = _props$Config.goToPreviousItem;
-  var _props$Localization = props.Localization,
-      Localization = _props$Localization === void 0 ? {} : _props$Localization,
+var Pagination = function Pagination(props) {
+  //======================== PROPS ============================================
+  var EnableExports = props.EnableExports,
+      CurrentPage = props.CurrentPage,
+      IsLoading = props.IsLoading,
+      DataCount = props.DataCount,
+      PageSizes = props.PageSizes,
+      PageSize = props.PageSize,
+      OnPageSizeChanged = props.OnPageSizeChanged,
+      LoadedDataCount = props.LoadedDataCount,
+      CanGoToNextPage = props.CanGoToNextPage,
+      CanGoToPreviousPage = props.CanGoToPreviousPage,
+      CanGoToFirstPage = props.CanGoToFirstPage,
+      CanGoToLastPage = props.CanGoToLastPage,
+      goToNextPage = props.goToNextPage,
+      goToPreviousPage = props.goToPreviousPage,
+      goToFirstPage = props.goToFirstPage,
+      goToLastPage = props.goToLastPage,
+      Export = props.Export,
+      Localization = props.Localization,
+      withPageInformation = props.withPageInformation,
+      inverted = props.inverted,
       theme = props.theme,
       size = props.size,
       color = props.color;
   var themeProps = {
     theme: theme,
     size: size,
-    color: color
-  }; //====== LIFECYCLE ======
-  //====== EVENTS ======
-  //====== METHODS ======
+    color: color,
+    inverted: inverted
+  }; //======================== METHODS ==========================================
+
+  var getShowingNumberOfRows = function getShowingNumberOfRows() {
+    if (DataCount === 0) return Localization.NoRowsToShow || "No data to show";
+    var text = Localization.Showing || "Showing ";
+    var multiplicator = parseInt(CurrentPage - 1) * parseInt(PageSize);
+    text += DataCount === 0 ? 0 : multiplicator + 1;
+    text += "-";
+    text += parseInt(LoadedDataCount) + multiplicator;
+    text += (Localization.Of || " of ") + DataCount;
+    return text;
+  };
+
+  var freeze = function freeze(dependcies) {
+    var freeze = false;
+    dependcies.forEach(function (el) {
+      freeze = freeze || el;
+    });
+    return freeze;
+  };
 
   var freezeLoading = function freezeLoading() {
     var args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return freeze([IsLoading].concat(_toConsumableArray__default['default'](args)));
-  }; //====== RENDER ======
+  };
+
+  var getPageSizes = function getPageSizes() {
+    return PageSizes.map(function (x) {
+      return {
+        name: x,
+        value: x
+      };
+    });
+  };
+
+  var exportToExcel = function exportToExcel() {
+    return Export();
+  };
+
+  var handlePageSizeChanged = function handlePageSizeChanged(_, value) {
+    return OnPageSizeChanged(value);
+  }; //======================== RENDER ==========================================
+
+
+  var renderRowInformation = function renderRowInformation() {
+    if (!withPageInformation) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(ItemText, _extends__default['default']({}, themeProps, {
+      key: -1
+    }), getShowingNumberOfRows());
+  };
 
+  var renderCurrentPage = function renderCurrentPage() {
+    return /*#__PURE__*/React__default['default'].createElement(ItemCurrentPage, _extends__default['default']({}, themeProps, {
+      key: 0
+    }), CurrentPage);
+  };
 
   var renderFirst = function renderFirst() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$3, _extends__default['default']({}, themeProps, {
+    return /*#__PURE__*/React__default['default'].createElement(Item$3, _extends__default['default']({
       first: true
+    }, themeProps, {
+      key: 1
     }), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
       icon: "angle-double-left",
-      onClick: freezeLoading() ? function () {} : goToFirstItem,
-      disabled: !CanGoToFirstItem,
-      tooltip: Localization.First,
-      inverted: true
+      onClick: freezeLoading() ? function () {} : function () {
+        return goToFirstPage(PageSize, CurrentPage);
+      },
+      disabled: !CanGoToFirstPage,
+      tooltip: Localization.First
     })));
   };
 
-  var renderLast = function renderLast() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$3, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
-      icon: "angle-double-right",
-      onClick: freezeLoading() ? function () {} : goToLastItem,
-      disabled: !CanGoToLastItem,
-      tooltip: Localization.Last,
-      inverted: true
+  var renderPrevious = function renderPrevious() {
+    return /*#__PURE__*/React__default['default'].createElement(Item$3, _extends__default['default']({
+      key: 2
+    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+      icon: "angle-left",
+      onClick: freezeLoading() ? function () {} : function () {
+        return goToPreviousPage(PageSize, CurrentPage);
+      },
+      disabled: !CanGoToPreviousPage,
+      tooltip: Localization.Previous
     })));
   };
 
   var renderNext = function renderNext() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$3, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+    return /*#__PURE__*/React__default['default'].createElement(Item$3, _extends__default['default']({
+      key: 3
+    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
       icon: "angle-right",
-      onClick: freezeLoading() ? function () {} : goToNextItem,
-      disabled: !CanGoToNextItem,
+      onClick: freezeLoading() ? function () {} : function () {
+        return goToNextPage(PageSize, CurrentPage);
+      },
+      disabled: !CanGoToNextPage,
+      tooltip: Localization.Next
+    })));
+  };
+
+  var renderLast = function renderLast() {
+    return /*#__PURE__*/React__default['default'].createElement(Item$3, _extends__default['default']({
+      key: 4
+    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+      icon: "angle-double-right",
+      onClick: freezeLoading() ? function () {} : function () {
+        return goToLastPage(PageSize, CurrentPage);
+      },
+      disabled: !CanGoToLastPage,
+      tooltip: Localization.Last
+    })));
+  };
+
+  var renderPageSize = function renderPageSize() {
+    return /*#__PURE__*/React__default['default'].createElement(ItemDropdown, _extends__default['default']({
+      key: 5
+    }, themeProps), /*#__PURE__*/React__default['default'].createElement(DropDown, _extends__default['default']({}, themeProps, {
+      items: getPageSizes(),
+      value: PageSize // disabled={freezeLoading()}
+      ,
+      onChange: freezeLoading() ? function () {} : handlePageSizeChanged,
+      withoutEmpty: true
+    })));
+  };
+
+  var renderExportButtons = function renderExportButtons() {
+    if (!EnableExports) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(ExportItem, _extends__default['default']({
+      key: 6
+    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+      icon: "file-excel",
+      onClick: freezeLoading() ? function () {} : function () {
+        return exportToExcel();
+      },
+      tooltip: Localization.ExportToExcel
+    })));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Container$j, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
+};
+
+Pagination.defaultProps = {
+  Config: {},
+  withPageInformation: true,
+  Localization: {
+    First: "First",
+    Last: "Last",
+    Next: "Next",
+    Previous: "Previous"
+  },
+  //------------------------------
+  EnableExports: false,
+  CurrentPage: 1,
+  IsLoading: false,
+  DataCount: 0,
+  PageSizes: [10, 20, 30, 40, 50],
+  PageSize: 10,
+  OnPageSizeChanged: function OnPageSizeChanged() {},
+  LoadedDataCount: 0,
+  CanGoToNextPage: false,
+  CanGoToPreviousPage: false,
+  CanGoToFirstPage: false,
+  CanGoToLastPage: false,
+  goToNextPage: function goToNextPage() {},
+  goToPreviousPage: function goToPreviousPage() {},
+  goToFirstPage: function goToFirstPage() {},
+  goToLastPage: function goToLastPage() {},
+  Export: function Export() {},
+  //-------------------------------
+  inverted: false,
+  theme: theme,
+  color: "primary",
+  size: "small"
+};
+Pagination.propTypes = {
+  Config: PropTypes__default['default'].object,
+  Localization: PropTypes__default['default'].object,
+  withPageInformation: PropTypes__default['default'].bool,
+  //------------------------------
+  EnableExports: PropTypes__default['default'].bool,
+  CurrentPage: PropTypes__default['default'].number,
+  IsLoading: PropTypes__default['default'].bool,
+  DataCount: PropTypes__default['default'].number,
+  PageSizes: PropTypes__default['default'].array,
+  PageSize: PropTypes__default['default'].number,
+  OnPageSizeChanged: PropTypes__default['default'].func,
+  LoadedDataCount: PropTypes__default['default'].number,
+  CanGoToNextPage: PropTypes__default['default'].bool,
+  CanGoToPreviousPage: PropTypes__default['default'].bool,
+  CanGoToFirstPage: PropTypes__default['default'].bool,
+  CanGoToLastPage: PropTypes__default['default'].bool,
+  goToNextPage: PropTypes__default['default'].func,
+  goToPreviousPage: PropTypes__default['default'].func,
+  goToFirstPage: PropTypes__default['default'].func,
+  goToLastPage: PropTypes__default['default'].func,
+  Export: PropTypes__default['default'].func,
+  //-------------------------------
+  inverted: PropTypes__default['default'].bool,
+  theme: PropTypes__default['default'].object.isRequired,
+  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
+  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
+};
+
+var _templateObject$m, _templateObject2$h;
+
+var heightBySize$b = function heightBySize(size) {
+  if (size === "small") return "\n          width: 1.4rem;\n          height: 1.4rem;\n        ";
+  if (size === "medium") return "\n            width: 1.6rem;\n            height: 1.6rem;\n        ";
+  if (size === "large") return "\n          width: 1.8rem;\n          height: 1.8rem;\n        ";
+};
+
+var spin$2 = keyframes$2(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral__default['default'](["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var StyledSpinner = newStyled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  ", "\n  border: 0.3125rem solid ", ";\n  border-radius: 50%;\n  border-top-color: ", ";\n  animation: ", " 0.8s ease-in-out infinite;\n"])), function (props) {
+  return heightBySize$b(props.size);
+}, function (props) {
+  return props.theme.palette[props.color].lighter;
+}, function (props) {
+  return props.theme.palette[props.color].main;
+}, spin$2);
+
+var Spinner = function Spinner(props) {
+  var className = props.className,
+      size = props.size,
+      color = props.color,
+      theme = props.theme;
+  var themeProps = {
+    theme: theme,
+    size: size,
+    color: color
+  };
+  return /*#__PURE__*/React__default['default'].createElement(StyledSpinner, _extends__default['default']({}, themeProps, {
+    className: className
+  }));
+};
+
+Spinner.defaultProps = {
+  className: "",
+  size: "small",
+  color: "primary",
+  theme: theme
+};
+Spinner.propTypes = {
+  theme: PropTypes__default['default'].object.isRequired,
+  className: PropTypes__default['default'].string,
+  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
+  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
+};
+
+var css_248z$4 = ".fade1-enter {\n  opacity: 0;\n}\n.fade1-exit {\n  opacity: 1;\n}\n.fade1-enter-active {\n  opacity: 1;\n}\n.fade1-exit-active {\n  opacity: 0;\n}\n.fade1-enter-active,\n.fade1-exit-active {\n  transition: opacity 330ms;\n}\n\n.fade2-enter {\n  opacity: 0;\n}\n.fade2-exit {\n  opacity: 1;\n}\n.fade2-enter-active {\n  opacity: 1;\n}\n.fade2-exit-active {\n  opacity: 0;\n}\n.fade2-enter-active,\n.fade2-exit-active {\n  transition: opacity 330ms;\n}\n";
+styleInject(css_248z$4);
+
+var FormMode = {
+  READ: "READ",
+  EDIT: "EDIT",
+  ADD: "ADD"
+};
+
+var ViewType = {
+  TABLE_VIEW: "TableView",
+  FORM_VIEW: "FormView"
+};
+
+var css_248z$3 = ".styles-module_editedBorder__1kxLW {\n  border-top: 4.5px solid orange;\n  /* padding-top: 10px; */\n}\n\n.styles-module_successBorder__2_tn2 {\n  border-top: 4.5px solid green;\n  /* padding-top: 10px; */\n}\n\n.styles-module_flexContainer__ifOLC {\n  display: flex;\n  justify-content: space-between;\n}\n\n@media only screen and (max-width: 1081px) {\n  .styles-module_flexContainer__ifOLC {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .styles-module_filterContainerHolder__3Fvqv {\n    min-width: 100% !important;\n    max-width: 100% !important;\n  }\n}\n\n.styles-module_flexInnerContainer__29aU5 {\n  display: flex;\n  align-content: center;\n  align-items: center;\n}\n\n.styles-module_filterContainerHolder__3Fvqv {\n  min-width: 50%;\n  max-width: 50%;\n}\n\n.styles-module_flexItem__2CpYr {\n  padding-left: 6px;\n  padding-right: 6px;\n  font-size: 1.4em;\n  max-height: 40px;\n}\n\n.styles-module_view__38xGS {\n  margin-top: 15px;\n  box-shadow: 0 0 20px #bebebe;\n  height: 100%;\n  overflow-y: auto;\n  max-height: calc(100vh - 120px);\n}\n\n.styles-module_contextMenu__1wBsk {\n  margin-left: 20px;\n}\n\n.styles-module_disabledChildren__3QAyB:hover {\n  cursor: not-allowed;\n}\n\n.styles-module_disabledChildren__3QAyB * {\n  pointer-events: none;\n  opacity: 1;\n}\n\n.styles-module_movementFlexContainer__2DCXk {\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_container__2BNuf {\n  display: grid;\n  grid-template-columns: 70% 30%;\n}\n\n.styles-module_flexContainerLeft__20szj {\n  display: flex;\n  flex-direction: row;\n  padding-left: 15px;\n}\n\n.styles-module_flexContainerRight__2Dfw9 {\n  display: flex;\n  flex-direction: row-reverse;\n  padding-right: 22px;\n}\n\n.styles-module_movementFlexItem__bTNJZ {\n  padding: 10px;\n}\n\n.styles-module_row__19N86 {\n  display: flex;\n  flex-direction: row;\n}\n\n.styles-module_cell__1sqid {\n  background-color: inherit;\n  cursor: pointer;\n}\n\n.styles-module_pointer__3spmX {\n  cursor: pointer !important;\n}\n\n.styles-module_header__1y2iY {\n  cursor: pointer;\n  background-color: var(--color-base-blue);\n  color: var(--color-base-white);\n  border-right: 1px solid #003954;\n  text-align: left;\n  padding-right: 5px;\n}\n\n.styles-module_header__1y2iY:hover {\n  background-color: #00496b;\n}\n\n.styles-module_header__1y2iY:hover .styles-module_headerInnerIconDiv__bwi4x {\n  color: white;\n}\n\n.styles-module_specialRenderCell__-KydO {\n  background-color: inherit;\n  cursor: pointer;\n  font-size: 1em;\n}\n\n.styles-module_header__1y2iY,\n.styles-module_specialRenderCell__-KydO {\n  text-align: center;\n  padding-left: 5px;\n}\n\n.styles-module_withLeftPadding__3jC1x {\n  padding-left: 5px;\n}\n\n.styles-module_cell__1sqid,\n.styles-module_specialRenderCell__-KydO {\n  border-right: 1px solid #ccc;\n  padding-left: 5px;\n}\n\n.styles-module_tableRowEven__jVl2g {\n  background: white;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-top: 1px solid transparent;\n}\n\n.styles-module_tableRowOdd__25e6T {\n  background: whitesmoke;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-top: 1px solid transparent;\n}\n\n.styles-module_tableRowEven__jVl2g:hover,\n.styles-module_tableRowOdd__25e6T:hover {\n  border: 1px solid #0091a7 !important;\n  position: relative;\n  background-color: #73abf12e;\n}\n\n.styles-module_checkedRow__UiEsv {\n  background-color: #ccebf0 !important;\n  border-top: 1px solid gray;\n  border-bottom: 1px solid gray;\n}\n\n.styles-module_table__3M2Ek {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n@media screen and (max-width: 1400px) {\n  .styles-module_table__3M2Ek {\n    width: 100%;\n    font-size: 0.7em;\n  }\n}\n\n.styles-module_headerInnerDiv__39OF- {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.styles-module_headerInnerIconDiv__bwi4x {\n  color: #b0b3b5;\n}\n\n.styles-module_selectColumn__2K77f {\n  width: 50px !important;\n  padding-right: 5px;\n}\n\n@media (max-width: 576px) {\n  .styles-module_hide-576__1hiUv {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .styles-module_hide-768__2KkSI {\n    display: none;\n  }\n}\n\n@media (max-width: 992px) {\n  .styles-module_hide-992__2BwXA {\n    display: none;\n  }\n\n  .styles-module_cell__1sqid,\n  .styles-module_header__1y2iY {\n    display: none;\n  }\n\n  .styles-module_cell__1sqid:first-child,\n  .styles-module_cell__1sqid:nth-child(2),\n  .styles-module_cell__1sqid:nth-child(3),\n  .styles-module_header__1y2iY:first-child,\n  .styles-module_header__1y2iY:nth-child(2),\n  .styles-module_header__1y2iY:nth-child(3) {\n    display: table-cell;\n  }\n}\n\n@media (max-width: 1200px) {\n  .styles-module_hide-1200__3CTPm {\n    display: none;\n  }\n}\n\n.styles-module_tablePaginationContainer__2vs7V {\n  display: flex;\n  flex-direction: row;\n  font-size: 0.8em;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  padding: 5px;\n}\n\n.styles-module_tablePaginationItem__3RjNk {\n  padding-left: 10px;\n  display: flex;\n  align-items: center;\n}\n\n.styles-module_exportButtons__vd7yH {\n  display: flex;\n  font-size: 2em;\n  justify-content: space-evenly;\n  padding-right: 10px;\n  width: 5%;\n}\n\n.styles-module_innerPaginationContainer__3eHKY {\n  display: flex;\n}\n\n.styles-module_dirtyInfoButton__3U1xV {\n  width: 100%;\n  height: 100%;\n  font-size: 1em;\n}\n";
+styleInject(css_248z$3);
+
+var _templateObject$l, _templateObject2$g;
+var Container$i = newStyled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  font-size: ", ";\n  font-family: ", ";\n  padding: 0px 8px;\n"])), function (props) {
+  return props.theme.typography.small.fontSize;
+}, function (props) {
+  return props.theme.typography.fontFamily;
+});
+var Item$2 = newStyled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.first ? "0" : "6px";
+});
+
+var FormViewMovement = function FormViewMovement(props) {
+  //====== PROPS ======
+  var _props$Config = props.Config,
+      CanGoToFirstItem = _props$Config.CanGoToFirstItem,
+      CanGoToLastItem = _props$Config.CanGoToLastItem,
+      CanGoToNextItem = _props$Config.CanGoToNextItem,
+      CanGoToPreviousItem = _props$Config.CanGoToPreviousItem,
+      IsLoading = _props$Config.IsLoading,
+      goToFirstItem = _props$Config.goToFirstItem,
+      goToLastItem = _props$Config.goToLastItem,
+      goToNextItem = _props$Config.goToNextItem,
+      goToPreviousItem = _props$Config.goToPreviousItem;
+  var _props$Localization = props.Localization,
+      Localization = _props$Localization === void 0 ? {} : _props$Localization,
+      theme = props.theme,
+      size = props.size,
+      color = props.color;
+  var themeProps = {
+    theme: theme,
+    size: size,
+    color: color
+  }; //====== LIFECYCLE ======
+  //====== EVENTS ======
+  //====== METHODS ======
+
+  var freezeLoading = function freezeLoading() {
+    var args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return freeze([IsLoading].concat(_toConsumableArray__default['default'](args)));
+  }; //====== RENDER ======
+
+
+  var renderFirst = function renderFirst() {
+    return /*#__PURE__*/React__default['default'].createElement(Item$2, _extends__default['default']({}, themeProps, {
+      first: true
+    }), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+      icon: "angle-double-left",
+      onClick: freezeLoading() ? function () {} : goToFirstItem,
+      disabled: !CanGoToFirstItem,
+      tooltip: Localization.First,
+      inverted: true
+    })));
+  };
+
+  var renderLast = function renderLast() {
+    return /*#__PURE__*/React__default['default'].createElement(Item$2, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+      icon: "angle-double-right",
+      onClick: freezeLoading() ? function () {} : goToLastItem,
+      disabled: !CanGoToLastItem,
+      tooltip: Localization.Last,
+      inverted: true
+    })));
+  };
+
+  var renderNext = function renderNext() {
+    return /*#__PURE__*/React__default['default'].createElement(Item$2, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+      icon: "angle-right",
+      onClick: freezeLoading() ? function () {} : goToNextItem,
+      disabled: !CanGoToNextItem,
       tooltip: Localization.Next,
       inverted: true
     })));
   };
 
   var renderPrevious = function renderPrevious() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$3, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
+    return /*#__PURE__*/React__default['default'].createElement(Item$2, themeProps, /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
       icon: "angle-left",
       onClick: freezeLoading() ? function () {} : goToPreviousItem,
       disabled: !CanGoToPreviousItem,
@@ -15046,7 +15468,7 @@ var FormViewMovement = function FormViewMovement(props) {
     })));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$j, themeProps, renderFirst(), renderPrevious(), renderNext(), renderLast());
+  return /*#__PURE__*/React__default['default'].createElement(Container$i, themeProps, renderFirst(), renderPrevious(), renderNext(), renderLast());
 };
 
 FormViewMovement.defaultProps = {
@@ -32286,13 +32708,13 @@ var TableSelectionType = {
   MULTIPLE: "multiple"
 };
 
-var _templateObject$m, _templateObject2$h, _templateObject3$e, _templateObject4$d, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6, _templateObject11$4, _templateObject12$3;
-var Container$i = newStyled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
-var Wrapper$2 = newStyled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
-var TableTable$1 = newStyled.table(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
-var TableHead$1 = newStyled.thead(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
-var TableHeadRow$1 = newStyled.tr(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
-var TableHeadCell$1 = newStyled.th(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral__default['default'](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
+var _templateObject$k, _templateObject2$f, _templateObject3$d, _templateObject4$c, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6, _templateObject11$4, _templateObject12$3;
+var Container$h = newStyled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral__default['default'](["\n  border-radius: 3px;\n  font-size: ", ";\n  font-family: ", ";\n"])), theme.typography.small.fontSize, theme.typography.fontFamily);
+var Wrapper$2 = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  display: block;\n  overflow-x: auto;\n  white-space: nowrap;\n"])));
+var TableTable$1 = newStyled.table(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral__default['default'](["\n  border-collapse: collapse;\n  width: 100%;\n"])));
+var TableHead$1 = newStyled.thead(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral__default['default'](["\n  color: ", ";\n  border-top: 1px solid #80808025;\n"])), theme.palette.primary.textDark);
+var TableHeadRow$1 = newStyled.tr(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral__default['default'](["\n  border-bottom: 1px solid #80808025;\n"])));
+var TableHeadCell$1 = newStyled.th(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral__default['default'](["\n  text-align: left;\n  transition: all 250ms ease;\n  font-weight: 900;\n  font-size: 13px;\n\n  ", "\n\n  &:first-of-type {\n    border-radius: 3px 0 0 0;\n  }\n\n  &:last-of-type {\n    border-radius: 0 3px 0 0;\n  }\n\n  &:hover {\n    // background-color: ", ";\n    background-color: whitesmoke;\n    cursor: ", ";\n  }\n"])), function (props) {
   return props.selectionCell === true ? "width: 27px; padding: 1px 1px 1px 6px;" : "padding: 5px 5px 5px 6px;";
 }, theme.palette.primary.light, function (props) {
   return props.hideOrdering ? "inherit" : "pointer";
@@ -32362,569 +32784,151 @@ var TableView = function TableView(props) {
     }));
     return array.indexOf(item) > -1;
   };
-
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
-      return renderBodyRow(dataItem, i);
-    }));
-  };
-
-  var renderBodyRow = function renderBodyRow(dataItem, i) {
-    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyRow$1, {
-      selectedRow: rowSelected,
-      key: i
-    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
-      return x.hide !== true;
-    }).map(function (col, j) {
-      return renderBodyCell(dataItem, col, i, j);
-    }));
-  };
-
-  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
-    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
-
-    var onClick = function onClick() {
-      props.disabled ? null : ChangeToFormView(dataItem, rowIndex);
-    };
-
-    if (!EnableFormView) onClick = function onClick() {};
-    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
-
-    if (IsLookup) {
-      onClick = function onClick() {
-        if (!IsLoading) {
-          LookupTakeItem(dataItem);
-        }
-      };
-    }
-
-    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-      key: tabIndex,
-      onClick: onClick
-    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
-      ChangeToFormView(dataItem, rowIndex);
-    }) : cellData);
-  };
-
-  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
-    if (IsLookup) {
-      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-        selectionCell: true,
-        key: -1
-      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
-        inverted: true,
-        onClick: function onClick() {
-          if (!IsLoading) {
-            LookupTakeItem(dataItem);
-          }
-        },
-        icon: "arrow-right",
-        disabled: props.disabled
-      }));
-    }
-
-    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
-      selectionCell: true,
-      key: -1
-    }, /*#__PURE__*/React__default['default'].createElement(CheckBox, {
-      checked: selected,
-      onChange: function onChange(e, val) {
-        return handleOnSelection(dataItem, val);
-      },
-      id: rowIndex,
-      disabled: props.disabled
-    }));
-  };
-
-  var renderHeaderCell = function renderHeaderCell(def, i) {
-    var headerClick = function headerClick() {};
-
-    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
-    var isAccessor = def.accessor === Accessor;
-    var orderingIconClass; //-------------------------------------------------------------------
-
-    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
-    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
-    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
-    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
-
-    if (!isAccessor) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
-    };
-    if (isAccessor && Ascending) headerClick = function headerClick() {
-      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
-    };
-    if (isAccessor && Descending) headerClick = function headerClick() {
-      return OnHeaderClick("", "", false, true);
-    }; //-------------------------------------------------------------------
-
-    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      hideOrdering: hideOrdering,
-      key: i,
-      onClick: IsLoading || hideOrdering ? function () {} : headerClick
-    }, /*#__PURE__*/React__default['default'].createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default['default'].createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default['default'].createElement(HeaderCellIcon$1, {
-      sort: orderingIconClass === "sort"
-    }, /*#__PURE__*/React__default['default'].createElement(Icon$2, {
-      color: "white",
-      icon: orderingIconClass
-    }))));
-  };
-
-  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
-    var title = SelectedEntirePage ? "Deselect all" : "Select all";
-    if (SelectedEntirePage && Localization.DeselectAll) title = Localization.DeselectAll;
-    if (!SelectedEntirePage && Localization.SelectAll) title = Localization.SelectAll;
-    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1,
-      title: title,
-      disabled: props.disabled
-    });
-    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
-      selectionCell: true,
-      key: -1,
-      title: title
-    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default['default'].createElement(CheckBox, {
-      checked: SelectedEntirePage,
-      onChange: function onChange() {
-        return handleSelectAll(!SelectedEntirePage);
-      },
-      id: "SelectedEntirePage",
-      disabled: props.disabled
-    }));
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(Container$i, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$2, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
-    cellSpacing: 0
-  }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
-    return x.hide !== true;
-  }).map(function (col, i) {
-    return renderHeaderCell(col, i);
-  }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
-};
-
-var heightBySize$c = function heightBySize(size, hasText) {
-  if (size === "small") return "1.625rem";
-  if (size === "medium") return "2rem";
-  if (size === "large") return "2.375rem";
-};
-
-var Select = newStyled.select(function (props) {
-  return {
-    fontFamily: props.theme.typography.fontFamily,
-    outline: "none",
-    backgroundColor: props.theme.palette[props.color].lighter,
-    color: props.theme.palette[props.color].textDark,
-    transition: "all 250ms",
-    fontSize: props.theme.typography[props.size].fontSize,
-    border: "0px",
-    borderBottom: "0.125rem solid ".concat(props.theme.palette[props.color].main),
-    width: "100%",
-    boxSizing: "border-box",
-    minHeight: heightBySize$c(props.size),
-    maxHeight: heightBySize$c(props.size),
-    cursor: "pointer",
-    "&:focus": {
-      backgroundColor: props.theme.palette.common.white,
-      color: props.theme.palette.common.black
-    },
-    "&:disabled": {
-      backgroundColor: props.theme.palette.gray[200],
-      borderBottom: "0.125rem solid ".concat(props.theme.palette.gray[900]),
-      color: props.theme.palette.gray.textLight,
-      cursor: "default",
-      opacity: 0.7
-    }
-  };
-});
-var Option = newStyled.option(function (props) {
-  return {
-    fontFamily: props.theme.typography.fontFamily
-  };
-});
-var DropDown = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
-  var mapNameTo = props.mapNameTo,
-      mapValueTo = props.mapValueTo,
-      id = props.id,
-      preventDefault = props.preventDefault,
-      onChange = props.onChange,
-      items = props.items,
-      disabled = props.disabled,
-      size = props.size,
-      color = props.color,
-      theme = props.theme,
-      value = props.value,
-      tooltip = props.tooltip,
-      withoutEmpty = props.withoutEmpty,
-      className = props.className;
-
-  var handleOnChange = function handleOnChange(e) {
-    if (preventDefault) e.preventDefault();
-    onChange(id, e.target.value);
-  };
-
-  var getItems = function getItems() {
-    var name = "name";
-    var value = "value";
-    if (mapNameTo && mapNameTo !== "") name = mapNameTo;
-    if (mapValueTo && mapValueTo !== "") value = mapValueTo;
-    return items.map(function (el, i) {
-      return /*#__PURE__*/React__default['default'].createElement(Option, {
-        theme: theme,
-        size: size,
-        color: color,
-        key: i,
-        value: el[value]
-      }, el[name]);
-    });
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(Select, {
-    theme: theme,
-    size: size,
-    color: color,
-    className: className,
-    disabled: disabled,
-    "default": value,
-    title: tooltip,
-    onChange: handleOnChange,
-    value: value,
-    ref: ref
-  }, !withoutEmpty && /*#__PURE__*/React__default['default'].createElement(Option, {
-    theme: theme,
-    size: size,
-    color: color,
-    key: -1,
-    value: -1
-  }, "???"), getItems());
-});
-DropDown.defaultProps = {
-  id: "",
-  disabled: false,
-  tooltip: "",
-  onChange: function onChange() {},
-  className: "",
-  preventDefault: true,
-  size: "small",
-  color: "primary",
-  theme: theme,
-  items: [],
-  withoutEmpty: false,
-  mapValueTo: "value",
-  mapNameTo: "name"
-};
-DropDown.propTypes = {
-  theme: PropTypes__default['default'].object.isRequired,
-  id: PropTypes__default['default'].string,
-  disabled: PropTypes__default['default'].bool,
-  tooltip: PropTypes__default['default'].string,
-  onChange: PropTypes__default['default'].func,
-  className: PropTypes__default['default'].string,
-  preventDefault: PropTypes__default['default'].bool,
-  withoutEmpty: PropTypes__default['default'].bool,
-  mapValueTo: PropTypes__default['default'].string,
-  mapNameTo: PropTypes__default['default'].string,
-  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
-  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
-};
-
-var _templateObject$l, _templateObject2$g, _templateObject3$d, _templateObject4$c, _templateObject5$b, _templateObject6$9;
-var Container$h = newStyled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  flex-direction: row;\n  justify-content: left;\n  align-items: center;\n  border-radius: 3px;\n  padding: 4px;\n  font-size: ", ";\n  font-family: ", ";\n"])), function (props) {
-  return props.theme.typography.small.fontSize;
-}, function (props) {
-  return props.theme.typography.fontFamily;
-});
-var Item$2 = newStyled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral__default['default'](["\n  padding-left: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
-  return props.first ? "0" : "6px";
-});
-var ExportItem = newStyled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n"])));
-var ItemText = newStyled.div(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral__default['default'](["\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemCurrentPage = newStyled.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral__default['default'](["\n  padding-left: 6px;\n  display: flex;\n  align-items: center;\n"])));
-var ItemDropdown = newStyled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral__default['default'](["\n  padding-left: 14px;\n  display: flex;\n  align-items: center;\n"])));
-
-var Pagination = function Pagination(props) {
-  //======================== PROPS ============================================
-  var EnableExports = props.EnableExports,
-      CurrentPage = props.CurrentPage,
-      IsLoading = props.IsLoading,
-      DataCount = props.DataCount,
-      PageSizes = props.PageSizes,
-      PageSize = props.PageSize,
-      OnPageSizeChanged = props.OnPageSizeChanged,
-      LoadedDataCount = props.LoadedDataCount,
-      CanGoToNextPage = props.CanGoToNextPage,
-      CanGoToPreviousPage = props.CanGoToPreviousPage,
-      CanGoToFirstPage = props.CanGoToFirstPage,
-      CanGoToLastPage = props.CanGoToLastPage,
-      goToNextPage = props.goToNextPage,
-      goToPreviousPage = props.goToPreviousPage,
-      goToFirstPage = props.goToFirstPage,
-      goToLastPage = props.goToLastPage,
-      Export = props.Export,
-      Localization = props.Localization,
-      withPageInformation = props.withPageInformation,
-      inverted = props.inverted,
-      theme = props.theme,
-      size = props.size,
-      color = props.color;
-  var themeProps = {
-    theme: theme,
-    size: size,
-    color: color,
-    inverted: inverted
-  }; //======================== METHODS ==========================================
-
-  var getShowingNumberOfRows = function getShowingNumberOfRows() {
-    if (DataCount === 0) return Localization.NoRowsToShow || "No data to show";
-    var text = Localization.Showing || "Showing ";
-    var multiplicator = parseInt(CurrentPage - 1) * parseInt(PageSize);
-    text += DataCount === 0 ? 0 : multiplicator + 1;
-    text += "-";
-    text += parseInt(LoadedDataCount) + multiplicator;
-    text += (Localization.Of || " of ") + DataCount;
-    return text;
-  };
-
-  var freeze = function freeze(dependcies) {
-    var freeze = false;
-    dependcies.forEach(function (el) {
-      freeze = freeze || el;
-    });
-    return freeze;
-  };
-
-  var freezeLoading = function freezeLoading() {
-    var args = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    return freeze([IsLoading].concat(_toConsumableArray__default['default'](args)));
-  };
-
-  var getPageSizes = function getPageSizes() {
-    return PageSizes.map(function (x) {
-      return {
-        name: x,
-        value: x
-      };
-    });
-  };
-
-  var exportToExcel = function exportToExcel() {
-    return Export();
-  };
-
-  var handlePageSizeChanged = function handlePageSizeChanged(_, value) {
-    return OnPageSizeChanged(value);
-  }; //======================== RENDER ==========================================
-
-
-  var renderRowInformation = function renderRowInformation() {
-    if (!withPageInformation) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    return /*#__PURE__*/React__default['default'].createElement(ItemText, _extends__default['default']({}, themeProps, {
-      key: -1
-    }), getShowingNumberOfRows());
-  };
-
-  var renderCurrentPage = function renderCurrentPage() {
-    return /*#__PURE__*/React__default['default'].createElement(ItemCurrentPage, _extends__default['default']({}, themeProps, {
-      key: 0
-    }), CurrentPage);
-  };
-
-  var renderFirst = function renderFirst() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$2, _extends__default['default']({
-      first: true
-    }, themeProps, {
-      key: 1
-    }), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
-      icon: "angle-double-left",
-      onClick: freezeLoading() ? function () {} : function () {
-        return goToFirstPage(PageSize, CurrentPage);
-      },
-      disabled: !CanGoToFirstPage,
-      tooltip: Localization.First
-    })));
-  };
-
-  var renderPrevious = function renderPrevious() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$2, _extends__default['default']({
-      key: 2
-    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
-      icon: "angle-left",
-      onClick: freezeLoading() ? function () {} : function () {
-        return goToPreviousPage(PageSize, CurrentPage);
-      },
-      disabled: !CanGoToPreviousPage,
-      tooltip: Localization.Previous
-    })));
-  };
-
-  var renderNext = function renderNext() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$2, _extends__default['default']({
-      key: 3
-    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
-      icon: "angle-right",
-      onClick: freezeLoading() ? function () {} : function () {
-        return goToNextPage(PageSize, CurrentPage);
-      },
-      disabled: !CanGoToNextPage,
-      tooltip: Localization.Next
-    })));
+
+  var renderBody = function renderBody() {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, Data.map(function (dataItem, i) {
+      return renderBodyRow(dataItem, i);
+    }));
   };
 
-  var renderLast = function renderLast() {
-    return /*#__PURE__*/React__default['default'].createElement(Item$2, _extends__default['default']({
-      key: 4
-    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
-      icon: "angle-double-right",
-      onClick: freezeLoading() ? function () {} : function () {
-        return goToLastPage(PageSize, CurrentPage);
-      },
-      disabled: !CanGoToLastPage,
-      tooltip: Localization.Last
-    })));
+  var renderBodyRow = function renderBodyRow(dataItem, i) {
+    var rowSelected = isItemInArray(dataItem, SelectedData, SelectionIndicator);
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyRow$1, {
+      selectedRow: rowSelected,
+      key: i
+    }, renderSelectionCell(dataItem, rowSelected, i), Columns.filter(function (x) {
+      return x.hide !== true;
+    }).map(function (col, j) {
+      return renderBodyCell(dataItem, col, i, j);
+    }));
   };
 
-  var renderPageSize = function renderPageSize() {
-    return /*#__PURE__*/React__default['default'].createElement(ItemDropdown, _extends__default['default']({
-      key: 5
-    }, themeProps), /*#__PURE__*/React__default['default'].createElement(DropDown, _extends__default['default']({}, themeProps, {
-      items: getPageSizes(),
-      value: PageSize // disabled={freezeLoading()}
-      ,
-      onChange: freezeLoading() ? function () {} : handlePageSizeChanged,
-      withoutEmpty: true
-    })));
+  var renderBodyCell = function renderBodyCell(dataItem, def, rowIndex, cellIndex) {
+    var tabIndex = rowIndex * Columns.length + cellIndex + 50;
+
+    var onClick = function onClick() {
+      props.disabled ? null : ChangeToFormView(dataItem, rowIndex);
+    };
+
+    if (!EnableFormView) onClick = function onClick() {};
+    if (!EnableSelection || ReadOnly) onClick = function onClick() {};
+
+    if (IsLookup) {
+      onClick = function onClick() {
+        if (!IsLoading) {
+          LookupTakeItem(dataItem);
+        }
+      };
+    }
+
+    var cellData = def.isObject === true ? dataItem[def.accessor][def.objectAccessor] : dataItem[def.accessor];
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+      key: tabIndex,
+      onClick: onClick
+    }, isFunction(def.specialRender) ? def.specialRender(dataItem, function () {
+      ChangeToFormView(dataItem, rowIndex);
+    }) : cellData);
   };
 
-  var renderExportButtons = function renderExportButtons() {
-    if (!EnableExports) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-    return /*#__PURE__*/React__default['default'].createElement(ExportItem, _extends__default['default']({
-      key: 6
-    }, themeProps), /*#__PURE__*/React__default['default'].createElement(Button$1, _extends__default['default']({}, themeProps, {
-      icon: "file-excel",
-      onClick: freezeLoading() ? function () {} : function () {
-        return exportToExcel();
+  var renderSelectionCell = function renderSelectionCell(dataItem, selected, rowIndex) {
+    if (IsLookup) {
+      return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+        selectionCell: true,
+        key: -1
+      }, /*#__PURE__*/React__default['default'].createElement(Button$1, {
+        inverted: true,
+        onClick: function onClick() {
+          if (!IsLoading) {
+            LookupTakeItem(dataItem);
+          }
+        },
+        icon: "arrow-right",
+        disabled: props.disabled
+      }));
+    }
+
+    if (!EnableSelection || ReadOnly || IsLookup) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(TableBodyCell$1, {
+      selectionCell: true,
+      key: -1
+    }, /*#__PURE__*/React__default['default'].createElement(CheckBox, {
+      checked: selected,
+      onChange: function onChange(e, val) {
+        return handleOnSelection(dataItem, val);
       },
-      tooltip: Localization.ExportToExcel
-    })));
+      id: rowIndex,
+      disabled: props.disabled
+    }));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Container$h, themeProps, renderFirst(), renderPrevious(), renderCurrentPage(), renderNext(), renderLast(), renderPageSize(), renderRowInformation(), renderExportButtons());
-};
+  var renderHeaderCell = function renderHeaderCell(def, i) {
+    var headerClick = function headerClick() {};
 
-Pagination.defaultProps = {
-  Config: {},
-  withPageInformation: true,
-  Localization: {
-    First: "First",
-    Last: "Last",
-    Next: "Next",
-    Previous: "Previous"
-  },
-  //------------------------------
-  EnableExports: false,
-  CurrentPage: 1,
-  IsLoading: false,
-  DataCount: 0,
-  PageSizes: [10, 20, 30, 40, 50],
-  PageSize: 10,
-  OnPageSizeChanged: function OnPageSizeChanged() {},
-  LoadedDataCount: 0,
-  CanGoToNextPage: false,
-  CanGoToPreviousPage: false,
-  CanGoToFirstPage: false,
-  CanGoToLastPage: false,
-  goToNextPage: function goToNextPage() {},
-  goToPreviousPage: function goToPreviousPage() {},
-  goToFirstPage: function goToFirstPage() {},
-  goToLastPage: function goToLastPage() {},
-  Export: function Export() {},
-  //-------------------------------
-  inverted: false,
-  theme: theme,
-  color: "primary",
-  size: "small"
-};
-Pagination.propTypes = {
-  Config: PropTypes__default['default'].object,
-  Localization: PropTypes__default['default'].object,
-  withPageInformation: PropTypes__default['default'].bool,
-  //------------------------------
-  EnableExports: PropTypes__default['default'].bool,
-  CurrentPage: PropTypes__default['default'].number,
-  IsLoading: PropTypes__default['default'].bool,
-  DataCount: PropTypes__default['default'].number,
-  PageSizes: PropTypes__default['default'].array,
-  PageSize: PropTypes__default['default'].number,
-  OnPageSizeChanged: PropTypes__default['default'].func,
-  LoadedDataCount: PropTypes__default['default'].number,
-  CanGoToNextPage: PropTypes__default['default'].bool,
-  CanGoToPreviousPage: PropTypes__default['default'].bool,
-  CanGoToFirstPage: PropTypes__default['default'].bool,
-  CanGoToLastPage: PropTypes__default['default'].bool,
-  goToNextPage: PropTypes__default['default'].func,
-  goToPreviousPage: PropTypes__default['default'].func,
-  goToFirstPage: PropTypes__default['default'].func,
-  goToLastPage: PropTypes__default['default'].func,
-  Export: PropTypes__default['default'].func,
-  //-------------------------------
-  inverted: PropTypes__default['default'].bool,
-  theme: PropTypes__default['default'].object.isRequired,
-  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
-  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
-};
+    var hideOrdering = !EnableOrdering || (def.sortable === undefined ? false : def.sortable === false);
+    var isAccessor = def.accessor === Accessor;
+    var orderingIconClass; //-------------------------------------------------------------------
 
-var _templateObject$k, _templateObject2$f;
+    if (isAccessor && Ascending) orderingIconClass = "long-arrow-alt-up";
+    if (isAccessor && Descending) orderingIconClass = "long-arrow-alt-down";
+    if (isAccessor && !Ascending && !Descending) orderingIconClass = "sort";
+    if (!isAccessor) orderingIconClass = "sort"; //-------------------------------------------------------------------
 
-var heightBySize$b = function heightBySize(size) {
-  if (size === "small") return "\n          width: 1.4rem;\n          height: 1.4rem;\n        ";
-  if (size === "medium") return "\n            width: 1.6rem;\n            height: 1.6rem;\n        ";
-  if (size === "large") return "\n          width: 1.8rem;\n          height: 1.8rem;\n        ";
-};
+    if (!isAccessor) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, true, false);
+    };
+    if (isAccessor && Ascending) headerClick = function headerClick() {
+      return OnHeaderClick(def.sourceEntityName, def.accessor, false, true);
+    };
+    if (isAccessor && Descending) headerClick = function headerClick() {
+      return OnHeaderClick("", "", false, true);
+    }; //-------------------------------------------------------------------
 
-var spin$2 = keyframes$2(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral__default['default'](["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var StyledSpinner = newStyled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default['default'](["\n  display: inline-block;\n  ", "\n  border: 0.3125rem solid ", ";\n  border-radius: 50%;\n  border-top-color: ", ";\n  animation: ", " 0.8s ease-in-out infinite;\n"])), function (props) {
-  return heightBySize$b(props.size);
-}, function (props) {
-  return props.theme.palette[props.color].lighter;
-}, function (props) {
-  return props.theme.palette[props.color].main;
-}, spin$2);
+    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      hideOrdering: hideOrdering,
+      key: i,
+      onClick: IsLoading || hideOrdering ? function () {} : headerClick
+    }, /*#__PURE__*/React__default['default'].createElement(HeaderInnerCell$1, null, /*#__PURE__*/React__default['default'].createElement(HeaderCellText$1, null, def.displayName), !hideOrdering && /*#__PURE__*/React__default['default'].createElement(HeaderCellIcon$1, {
+      sort: orderingIconClass === "sort"
+    }, /*#__PURE__*/React__default['default'].createElement(Icon$2, {
+      color: "white",
+      icon: orderingIconClass
+    }))));
+  };
 
-var Spinner = function Spinner(props) {
-  var className = props.className,
-      size = props.size,
-      color = props.color,
-      theme = props.theme;
-  var themeProps = {
-    theme: theme,
-    size: size,
-    color: color
+  var renderSelectAllHeaderCell = function renderSelectAllHeaderCell() {
+    var title = SelectedEntirePage ? "Deselect all" : "Select all";
+    if (SelectedEntirePage && Localization.DeselectAll) title = Localization.DeselectAll;
+    if (!SelectedEntirePage && Localization.SelectAll) title = Localization.SelectAll;
+    if (IsLookup) return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1,
+      title: title,
+      disabled: props.disabled
+    });
+    if (!EnableSelection || ReadOnly || IsLookup && SelectionType === TableSelectionType.SINGLE) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+    return /*#__PURE__*/React__default['default'].createElement(TableHeadCell$1, {
+      selectionCell: true,
+      key: -1,
+      title: title
+    }, SelectionType === TableSelectionType.MULTIPLE && /*#__PURE__*/React__default['default'].createElement(CheckBox, {
+      checked: SelectedEntirePage,
+      onChange: function onChange() {
+        return handleSelectAll(!SelectedEntirePage);
+      },
+      id: "SelectedEntirePage",
+      disabled: props.disabled
+    }));
   };
-  return /*#__PURE__*/React__default['default'].createElement(StyledSpinner, _extends__default['default']({}, themeProps, {
-    className: className
-  }));
-};
 
-Spinner.defaultProps = {
-  className: "",
-  size: "small",
-  color: "primary",
-  theme: theme
-};
-Spinner.propTypes = {
-  theme: PropTypes__default['default'].object.isRequired,
-  className: PropTypes__default['default'].string,
-  size: PropTypes__default['default'].oneOf(["small", "medium", "large"]),
-  color: PropTypes__default['default'].oneOf(["primary", "secondary", "success", "error", "warning", "gray"])
+  return /*#__PURE__*/React__default['default'].createElement(Container$h, null, /*#__PURE__*/React__default['default'].createElement(Wrapper$2, null, /*#__PURE__*/React__default['default'].createElement(TableTable$1, {
+    cellSpacing: 0
+  }, /*#__PURE__*/React__default['default'].createElement(TableHead$1, null, /*#__PURE__*/React__default['default'].createElement(TableHeadRow$1, null, renderSelectAllHeaderCell(), Columns.filter(function (x) {
+    return x.hide !== true;
+  }).map(function (col, i) {
+    return renderHeaderCell(col, i);
+  }))), /*#__PURE__*/React__default['default'].createElement(TableBody$1, null, renderBody()))));
 };
 
-var css_248z$3 = ".fade1-enter {\n  opacity: 0;\n}\n.fade1-exit {\n  opacity: 1;\n}\n.fade1-enter-active {\n  opacity: 1;\n}\n.fade1-exit-active {\n  opacity: 0;\n}\n.fade1-enter-active,\n.fade1-exit-active {\n  transition: opacity 330ms;\n}\n\n.fade2-enter {\n  opacity: 0;\n}\n.fade2-exit {\n  opacity: 1;\n}\n.fade2-enter-active {\n  opacity: 1;\n}\n.fade2-exit-active {\n  opacity: 0;\n}\n.fade2-enter-active,\n.fade2-exit-active {\n  transition: opacity 330ms;\n}\n";
-styleInject(css_248z$3);
-
 var _templateObject$j, _templateObject2$e, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$3;
 
 function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -33322,11 +33326,11 @@ var DataView = function DataView(props) {
       return component;
     }
 
-    if (renderForm && !General.DataFromBackend) {
+    if (!General.DataFromBackend) {
       return /*#__PURE__*/React__default['default'].createElement(Modal, {
         id: "FormViewInModal",
         basic: true,
-        open: true,
+        open: renderForm,
         size: "medium",
         header: props.modalLabel || "",
         onClose: ChangeToTableView