techsbcn-storybook 0.12.4 → 0.12.8

package/dist/components/fields/ButtonComponent/ButtonComponent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import './ButtonComponent.scss';
 export interface ButtonComponentProps {
     className?: string;
-    label?: string;
+    label?: any;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     onClick?: () => void;

package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts

@@ -14,6 +14,7 @@ interface SimpleTableComponentProps {
     loading?: boolean;
     onClickRow?: (id: number) => void;
     isCheckTable?: {
+        noCheckAllItems?: boolean;
         rowsChecked?: number[];
         onCheckedAction?: (ids: number[]) => void;
         onCheckedSingleAction?: (id: number) => void;

package/dist/techsbcn-storybook.cjs.development.js

@@ -284,7 +284,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
   })) : React__default.createElement(React__default.Fragment, null))));
 };
 
-var css_248z$4 = ".table-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n  overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n  justify-content: center !important;\n  flex-wrap: wrap;\n  padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n  flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n  color: white !important;\n  background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n  .table-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: 100%;\n    border-bottom: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-component .paper-container .table-container .table-rows .table-cell {\n    display: inline-block !important;\n  }\n  .table-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 300px;\n  }\n}";
+var css_248z$4 = ".table-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n  overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n  justify-content: center !important;\n  flex-wrap: wrap;\n  padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n  flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n  color: white !important;\n  background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n  .table-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
 styleInject(css_248z$4);
 
 var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.text-field-component .MuiFormLabel-root + .MuiInputBase-formControl {\n  margin-top: 25px !important;\n}\n.text-field-component .MuiInputBase-root.no-border {\n  border: none !important;\n  padding: 0 !important;\n  width: fit-content !important;\n}\n.text-field-component .MuiInputBase-root {\n  color: #666666 !important;\n  border: 1px solid grey;\n  padding: 0.43rem 0.87rem;\n  background-color: white !important;\n  border-radius: 3px !important;\n}\n.text-field-component .MuiInputBase-root.Mui-error {\n  border: 1px solid #F24726 !important;\n}\n.text-field-component .MuiInputBase-root:not(.Mui-disabled):hover {\n  border: 1px solid grey;\n}\n.text-field-component .MuiInputBase-root.Mui-focused {\n  border: 1px solid #3299C7;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input {\n  color: #666666 !important;\n  background-color: white !important;\n}\n.text-field-component .MuiInputBase-root .MuiInputBase-input::placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.text-field-component .MuiInputBase-root .Mui-disabled {\n  -webkit-text-fill-color: #666666 !important;\n}\n.text-field-component .MuiFormHelperText-root {\n  padding: 0 !important;\n  font-size: 0.85rem !important;\n  color: #666666;\n}";
@@ -324,6 +324,9 @@ var TextFieldComponent = function TextFieldComponent(props) {
       disableUnderline: true,
       startAdornment: props.startIcon,
       endAdornment: props.endIcon,
+      classes: {
+        focused: 'main-border-color'
+      },
       inputProps: {
         max: props.maxNumber,
         min: props.minNumber,
@@ -691,7 +694,7 @@ var TableComponent = function TableComponent(props) {
       }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
         className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
       }, formatValue(value, column)) : React__default.createElement(_.Box, {
-        className: "format-value"
+        className: "" + (column.isImage ? '' : 'format-value')
       }, formatValue(value, column)));
     }));
   }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
@@ -713,6 +716,7 @@ var TableComponent = function TableComponent(props) {
     },
     onRowsPerPageChange: handleChangeRowsPerPage,
     component: "div",
+    className: "table-pagination",
     ActionsComponent: function ActionsComponent(_actions) {
       return React__default.createElement(_.Box, {
         flexShrink: 0,
@@ -727,7 +731,14 @@ var TableComponent = function TableComponent(props) {
         hideNextButton: true,
         hidePrevButton: true,
         showFirstButton: true,
-        showLastButton: true
+        showLastButton: true,
+        renderItem: function renderItem(item) {
+          return React__default.createElement(_.PaginationItem, Object.assign({
+            classes: {
+              selected: 'main-background-color'
+            }
+          }, item));
+        }
       }));
     }
   })));
@@ -736,7 +747,7 @@ TableComponent.defaultProps = {
   showTotalCount: true
 };
 
-var css_248z$6 = ".table-simple-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n@media (max-width: 992px) {\n  .table-simple-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-simple-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: 100%;\n    border-bottom: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .table-cell {\n    display: inline-block !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 300px;\n  }\n}";
+var css_248z$6 = ".table-simple-component .paper-container {\n  box-shadow: none;\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n  padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n  color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n  color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container {\n  max-height: 68vh;\n  border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container .table-column:last-child {\n  border-right: none !important;\n  border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: 1rem !important;\n  padding: 10px !important;\n  border-top: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n  color: black;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n  cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n  background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n  padding: 6px !important;\n  overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n  width: 100%;\n  height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n  object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n  float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n  color: rgba(0, 0, 0, 0.54);\n  display: inline-block;\n  text-decoration: none;\n  font-size: 1.6em !important;\n  padding: 0px 7px;\n  cursor: pointer;\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n  opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n  width: 80px !important;\n  height: 80px !important;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 5px;\n  margin: auto;\n  color: grey;\n}\n@media (max-width: 992px) {\n  .table-simple-component .paper-container .table-container {\n    max-height: 60vh;\n    border-top: 1px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .MuiTable-root {\n    border-collapse: collapse !important;\n  }\n  .table-simple-component .paper-container .table-container .MuiTableHead-root {\n    display: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows {\n    border-bottom: 2px solid #cccccc;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n    width: auto;\n    border-bottom: none !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n    font-size: 1rem;\n    vertical-align: top;\n    width: 50%;\n    height: auto;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n    display: inline-block;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .table-cell {\n    display: block !important;\n  }\n  .table-simple-component .paper-container .table-container .table-rows .format-value {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    width: 50%;\n    max-width: 299px;\n  }\n}";
 styleInject(css_248z$6);
 
 var SimpleTableComponent = function SimpleTableComponent(props) {
@@ -929,7 +940,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     className: "table-simple-component"
   }, React__default.createElement(_.Paper, {
     className: "paper-container"
-  }, props.isCheckTable && React__default.createElement(_.Hidden, {
+  }, props.isCheckTable && !props.isCheckTable.noCheckAllItems && React__default.createElement(_.Hidden, {
     mdUp: true
   }, React__default.createElement(_.Box, {
     display: "block",
@@ -948,7 +959,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     smDown: true
   }, React__default.createElement(_.TableHead, null, React__default.createElement(_.TableRow, null, props.columns.map(function (column) {
     if (column.id) {
-      var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15;
+      var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15, _props$isCheckTable16;
 
       return React__default.createElement(_.TableCell, {
         className: "table-column",
@@ -958,11 +969,11 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
           minWidth: column.minWidth,
           maxWidth: column.maxWidth
         }
-      }, column.isCheck ? React__default.createElement(_.Box, {
+      }, column.isCheck && !((_props$isCheckTable13 = props.isCheckTable) != null && _props$isCheckTable13.noCheckAllItems) ? React__default.createElement(_.Box, {
         className: "checkbox-cell"
       }, React__default.createElement(_.Checkbox, {
-        indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable13 = props.isCheckTable) == null ? void 0 : _props$isCheckTable13.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable14 = props.isCheckTable) == null ? void 0 : _props$isCheckTable14.rowsChecked)).length < props.rows.length,
-        checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable15 = props.isCheckTable) == null ? void 0 : _props$isCheckTable15.rowsChecked)).length === props.rows.length,
+        indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable14 = props.isCheckTable) == null ? void 0 : _props$isCheckTable14.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable15 = props.isCheckTable) == null ? void 0 : _props$isCheckTable15.rowsChecked)).length < props.rows.length,
+        checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable16 = props.isCheckTable) == null ? void 0 : _props$isCheckTable16.rowsChecked)).length === props.rows.length,
         onChange: handleSelectAllClick
       })) : React__default.createElement(_.Box, {
         className: "table-header-cell"
@@ -980,11 +991,11 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
   }, React__default.createElement(_.CircularProgress, {
     className: "circular-progress-main-color"
   }))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
-    var _props$isCheckTable16;
+    var _props$isCheckTable17;
 
     var key = props.rows[index + 1] && props.rows[index + 1].id === row.id ? index : row.id;
     var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
-    var isRowSelected = ((_props$isCheckTable16 = props.isCheckTable) == null ? void 0 : _props$isCheckTable16.rowsChecked) && isSelected(row.id);
+    var isRowSelected = ((_props$isCheckTable17 = props.isCheckTable) == null ? void 0 : _props$isCheckTable17.rowsChecked) && isSelected(row.id);
     return React__default.createElement(_.TableRow, {
       className: "table-rows " + rowColor + " " + (props.onClickRow ? 'row-click' : ''),
       role: "checkbox",
@@ -1045,16 +1056,16 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
             'aria-labelledby': row.id
           },
           onChange: function onChange(event) {
-            var _props$isCheckTable17;
+            var _props$isCheckTable18;
 
-            return (_props$isCheckTable17 = props.isCheckTable) != null && _props$isCheckTable17.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
+            return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
           }
         })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
           className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
         }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
           className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
         }, formatValue(value, column)) : React__default.createElement(_.Box, {
-          className: "format-value"
+          className: "" + (column.isImage ? '' : 'format-value')
         }, formatValue(value, column)));
       } else return null;
     }));
@@ -1454,7 +1465,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
     display: "flex",
     flexDirection: "column"
   }, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(_.Box, {
-    display: "flex",
+    display: "" + (props.startIcon || props.endIcon ? 'flex' : 'block'),
     alignItems: "center",
     className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
     width: "" + (props.fullWidth ? 'auto' : 'fit-content')
@@ -2486,15 +2497,13 @@ var LoginForm = function LoginForm(props) {
       });
     }
   })))), React__default.createElement(material.Box, {
-    mb: 5
+    mb: 4
   }, React__default.createElement(ButtonComponent, {
     label: props.valuesText.buttonText,
     loading: props.loading,
     className: "btn-login",
     onClick: handleSubmit(props.onClick)
-  })), props.bottomComponent && React__default.createElement(material.Box, {
-    m: 2
-  }, props.bottomComponent));
+  })), props.bottomComponent && React__default.createElement(material.Box, null, props.bottomComponent));
 };
 
 var ChangePasswordForm = function ChangePasswordForm(props) {
@@ -2524,10 +2533,12 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
     event.preventDefault();
   };
 
-  return React__default.createElement(_.Box, null, props.topComponent && React__default.createElement(_.Box, {
+  return React__default.createElement(_.Box, {
     m: 2
-  }, props.topComponent), React__default.createElement(_.Box, {
+  }, props.topComponent && React__default.createElement(_.Box, {
     m: 2
+  }, props.topComponent), React__default.createElement(_.Box, {
+    my: 2
   }, React__default.createElement(_.Grid, {
     container: true,
     direction: "column",
@@ -2595,15 +2606,13 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
       });
     }
   })))), React__default.createElement(_.Box, {
-    m: 2
+    mb: 4
   }, React__default.createElement(ButtonComponent, {
     label: props.valuesText.buttonText,
     className: "btn-login",
     onClick: handleSubmit(props.onClick),
     loading: props.loading
-  })), props.bottomComponent && React__default.createElement(_.Box, {
-    m: 2
-  }, props.bottomComponent));
+  })), props.bottomComponent && React__default.createElement(_.Box, null, props.bottomComponent));
 };
 
 var ResetPasswordForm = function ResetPasswordForm(props) {
@@ -2623,7 +2632,6 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
   }, props.topComponent && React__default.createElement(material.Box, {
     m: 2
   }, props.topComponent), React__default.createElement(material.Box, {
-    mx: 2,
     my: 2
   }, React__default.createElement(reactHookForm.Controller, {
     control: control,
@@ -2649,16 +2657,13 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
       });
     }
   })), React__default.createElement(material.Box, {
-    mx: 2,
-    mb: 5
+    mb: 4
   }, React__default.createElement(ButtonComponent, {
     label: props.valuesText.buttonText,
     className: "btn-login",
     onClick: handleSubmit(props.onClick),
     loading: props.loading
-  })), props.bottomComponent && React__default.createElement(material.Box, {
-    m: 2
-  }, props.bottomComponent));
+  })), props.bottomComponent && React__default.createElement(material.Box, null, props.bottomComponent));
 };
 
 var ModalComponent = function ModalComponent(props) {
@@ -2734,6 +2739,9 @@ var TabsComponent = function TabsComponent(props) {
     return a.value - b.value;
   }).map(function (tabLabel) {
     return React__default.createElement(material.Tab, {
+      classes: {
+        selected: 'main-background-color'
+      },
       key: tabLabel.value,
       label: tabLabel.label,
       value: tabLabel.value.toString()