techsbcn-storybook 0.12.7 → 0.13.0

package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts

@@ -8,9 +8,9 @@ interface SelectAsyncFieldProps {
     isMulti?: boolean;
     className?: string;
     disabled?: boolean;
-    onChange?: (value: number, name: string) => void;
-    onChangeValue?: (value: number) => void;
-    onChangeOption?: (value: number, label: string) => void;
+    onChange?: (value: any, name: string) => void;
+    onChangeValue?: (value: any) => void;
+    onChangeOption?: (value: any, label: string) => void;
     searchPromise: (filters: SearchFilters) => Promise<any>;
     invalid?: boolean;
     isClearable?: boolean;

package/dist/components/fields/SelectFieldComponent/SelectField.d.ts

@@ -8,8 +8,8 @@ interface SelectFieldProps {
     isMulti?: boolean;
     className?: string;
     disabled?: boolean;
-    onChange?: (value: number, name: string) => void;
-    onChangeValue?: (value: number) => void;
+    onChange?: (value: any, name: string) => void;
+    onChangeValue?: (value: any) => void;
     invalid?: boolean;
     isClearable?: boolean;
     helperText?: string;

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

@@ -13,8 +13,9 @@ interface SimpleTableComponentProps {
     };
     loading?: boolean;
     onClickRow?: (id: number) => void;
+    onClickRowData?: (row: any) => void;
     isCheckTable?: {
-        checkAllItems?: boolean;
+        noCheckAllItems?: boolean;
         rowsChecked?: number[];
         onCheckedAction?: (ids: number[]) => void;
         onCheckedSingleAction?: (id: number) => void;

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

@@ -16,6 +16,7 @@ interface TableComponentProps {
     baseFilters: SearchFilters;
     onFiltersChange?: (filters: SearchFilters) => void;
     onClickRow?: (id: number) => void;
+    onClickRowData?: (row: any) => void;
     isCheckTable?: {
         rowsChecked?: number[];
         onCheckedAction?: (ids: number[]) => void;

package/dist/data/enums/ActiveStatus.d.ts

@@ -1,4 +1,4 @@
 export declare enum ActiveStatus {
-    true = "ENABLE",
-    false = "DISABLE"
+    true = "true",
+    false = "false"
 }

package/dist/interfaces/search/SearchFilters.d.ts

@@ -8,3 +8,4 @@ export interface SearchFilters extends ObjectKey {
     orderBy: string;
     orderAsc: boolean;
 }
+export declare const SearchBaseDefaults: SearchFilters;

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

@@ -136,7 +136,7 @@ var SearchComponent = function SearchComponent(props) {
   }, React__default.createElement(material.Grid, {
     item: true,
     xs: props.actions ? 6 : 12,
-    md: 4
+    md: props.searchBar ? 4 : props.actions ? 6 : 12
   }, React__default.createElement(material.Box, {
     px: 1,
     className: (props.enableAfter ? 'main-background-color-after' : '') + " title"
@@ -191,10 +191,10 @@ var SearchComponent = function SearchComponent(props) {
   }))) : React__default.createElement(material.Box, {
     ml: "auto",
     className: "wrapper-actions"
-  }, ActionsList(props.actions)))), React__default.createElement(material.Grid, {
+  }, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: props.actions ? 8 : 7
+    md: props.actions && props.searchBar ? 8 : props.actions ? 6 : 7
   }, React__default.createElement(material.Box, {
     display: "flex",
     alignItems: "center"
@@ -240,15 +240,19 @@ var SearchComponent = function SearchComponent(props) {
   })))));
 };
 
-var css_248z$2 = ".linear-progress-component {\n  position: relative;\n  height: 4px;\n  z-index: 0;\n  overflow: hidden;\n}\n.linear-progress-component .MuiLinearProgress-root {\n  background-color: transparent !important;\n}\n.linear-progress-component .linear-progress-main-color.MuiLinearProgress-bar {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  width: 100%;\n  filter: blur(8px);\n}";
+var css_248z$2 = ".linear-progress-component {\n  position: relative;\n  height: 4px;\n  z-index: 0;\n  overflow: hidden;\n}\n.linear-progress-component .MuiLinearProgress-root {\n  background-color: transparent !important;\n}\n.linear-progress-component .linear-progress-main-color {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  width: 100%;\n  filter: blur(8px);\n}";
 styleInject(css_248z$2);
 
 var LinearProgressComponent = function LinearProgressComponent() {
   return React__default.createElement(material.Box, {
     className: "linear-progress-component"
   }, React__default.createElement(material.Box, {
-    className: "linear-progress-main-color MuiLinearProgress-bar"
-  }), React__default.createElement(material.LinearProgress, null));
+    className: "linear-progress-main-color main-background-color"
+  }), React__default.createElement(material.LinearProgress, {
+    classes: {
+      bar: 'main-background-color'
+    }
+  }));
 };
 
 var css_248z$3 = ".main-wrapper-component {\n  background-color: white;\n  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n}\n.main-wrapper-component .main-background-color-after {\n  position: relative;\n}\n.main-wrapper-component .main-background-color-after:after {\n  content: \"\";\n  position: absolute;\n  left: -17px;\n  top: -4px;\n  width: 4px;\n  height: 30px;\n}\n.main-wrapper-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.main-wrapper-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.main-wrapper-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
@@ -284,7 +288,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}";
@@ -392,8 +396,9 @@ var TableComponent = function TableComponent(props) {
     if (props.onFiltersChange) props.onFiltersChange(newFilters);
   };
 
-  var handleRowClick = function handleRowClick(id) {
-    if (props.onClickRow) props.onClickRow(id);
+  var handleRowClick = function handleRowClick(row) {
+    if (props.onClickRow) props.onClickRow(row.id);
+    if (props.onClickRowData) props.onClickRowData(row);
   };
 
   var createSortHandler = function createSortHandler(orderBy) {
@@ -631,7 +636,7 @@ var TableComponent = function TableComponent(props) {
   }))), props.rows && props.rows.length > 0 ? props.rows.map(function (row, index) {
     var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
     return React__default.createElement(_.TableRow, {
-      className: "table-rows " + rowColor + " " + (props.onClickRow ? 'row-click' : ''),
+      className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
       role: "checkbox",
       tabIndex: -1,
       key: row.id || index
@@ -648,7 +653,7 @@ var TableComponent = function TableComponent(props) {
           }
         },
         onClick: function onClick() {
-          return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row.id) : '';
+          return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
         }
       }, React__default.createElement(_.Hidden, {
         mdUp: true
@@ -694,7 +699,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, {
@@ -747,11 +752,11 @@ 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) {
-  var _props$isCheckTable10, _props$isCheckTable11, _props$isCheckTable12, _props$isCheckTable13;
+  var _props$isCheckTable10, _props$isCheckTable11, _props$isCheckTable12;
 
   var isSelected = function isSelected(id) {
     var _props$isCheckTable;
@@ -759,8 +764,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     return JSON.parse(JSON.stringify((_props$isCheckTable = props.isCheckTable) == null ? void 0 : _props$isCheckTable.rowsChecked)).indexOf(id) !== -1;
   };
 
-  var handleRowClick = function handleRowClick(id) {
-    if (props.onClickRow) props.onClickRow(id);
+  var handleRowClick = function handleRowClick(row) {
+    if (props.onClickRow) props.onClickRow(row.id);
+    if (props.onClickRowData) props.onClickRowData(row);
   };
 
   var onCheckAction = function onCheckAction(event, id) {
@@ -940,14 +946,14 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     className: "table-simple-component"
   }, React__default.createElement(_.Paper, {
     className: "paper-container"
-  }, ((_props$isCheckTable10 = props.isCheckTable) == null ? void 0 : _props$isCheckTable10.checkAllItems) && React__default.createElement(_.Hidden, {
+  }, props.isCheckTable && !props.isCheckTable.noCheckAllItems && React__default.createElement(_.Hidden, {
     mdUp: true
   }, React__default.createElement(_.Box, {
     display: "block",
     className: "checkbox-cell"
   }, React__default.createElement(_.Checkbox, {
-    indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable11 = props.isCheckTable) == null ? void 0 : _props$isCheckTable11.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable12 = props.isCheckTable) == null ? void 0 : _props$isCheckTable12.rowsChecked)).length < props.rows.length,
-    checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable13 = props.isCheckTable) == null ? void 0 : _props$isCheckTable13.rowsChecked)).length === props.rows.length,
+    indeterminate: props.rows && JSON.parse(JSON.stringify((_props$isCheckTable10 = props.isCheckTable) == null ? void 0 : _props$isCheckTable10.rowsChecked)).length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable11 = props.isCheckTable) == null ? void 0 : _props$isCheckTable11.rowsChecked)).length < props.rows.length,
+    checked: props.rows && props.rows.length > 0 && JSON.parse(JSON.stringify((_props$isCheckTable12 = props.isCheckTable) == null ? void 0 : _props$isCheckTable12.rowsChecked)).length === props.rows.length,
     onChange: handleSelectAllClick
   }))), React__default.createElement(_.TableContainer, {
     className: "table-container"
@@ -959,7 +965,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$isCheckTable14, _props$isCheckTable15, _props$isCheckTable16;
+      var _props$isCheckTable13, _props$isCheckTable14, _props$isCheckTable15, _props$isCheckTable16;
 
       return React__default.createElement(_.TableCell, {
         className: "table-column",
@@ -969,7 +975,7 @@ 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$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,
@@ -997,7 +1003,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
     var rowColor = props.rowsColorColumn && ObjectbyString(row, props.rowsColorColumn.columnName) === props.rowsColorColumn.columnValue ? "row-color-" + props.rowsColorColumn.columnValue : '';
     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' : ''),
+      className: "table-rows " + rowColor + " " + (props.onClickRow || props.onClickRowData ? 'row-click' : ''),
       role: "checkbox",
       tabIndex: -1,
       selected: isRowSelected,
@@ -1017,7 +1023,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
             }
           },
           onClick: function onClick() {
-            return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row.id) : '';
+            return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
           }
         }, React__default.createElement(_.Hidden, {
           mdUp: true
@@ -1065,7 +1071,7 @@ var SimpleTableComponent = function SimpleTableComponent(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)));
       } else return null;
     }));
@@ -2429,8 +2435,14 @@ var LoginForm = function LoginForm(props) {
   }),
       control = _useForm.control,
       handleSubmit = _useForm.handleSubmit,
+      getValues = _useForm.getValues,
+      trigger = _useForm.trigger,
       errors = _useForm.formState.errors;
 
+  var onHandleKeyChange = function onHandleKeyChange(event) {
+    if (event.key === 'Enter') props.onClick(getValues());
+  };
+
   return React__default.createElement(material.Box, {
     m: 2
   }, props.topComponent && React__default.createElement(material.Box, {
@@ -2463,7 +2475,38 @@ var LoginForm = function LoginForm(props) {
         inputRef: ref,
         onChange: function onChange(e) {
           _onChange(e);
-        }
+        },
+        onKeyUp: function () {
+          var _onKeyUp = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
+            var result;
+            return runtime_1.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return trigger();
+
+                  case 2:
+                    result = _context.sent;
+
+                    if (result) {
+                      onHandleKeyChange(e);
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          function onKeyUp(_x) {
+            return _onKeyUp.apply(this, arguments);
+          }
+
+          return onKeyUp;
+        }()
       });
     }
   })), React__default.createElement(material.Grid, {
@@ -2489,6 +2532,37 @@ var LoginForm = function LoginForm(props) {
         onChange: function onChange(e) {
           _onChange2(e);
         },
+        onKeyUp: function () {
+          var _onKeyUp2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(e) {
+            var result;
+            return runtime_1.wrap(function _callee2$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    _context2.next = 2;
+                    return trigger();
+
+                  case 2:
+                    result = _context2.sent;
+
+                    if (result) {
+                      onHandleKeyChange(e);
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee2);
+          }));
+
+          function onKeyUp(_x2) {
+            return _onKeyUp2.apply(this, arguments);
+          }
+
+          return onKeyUp;
+        }(),
         endIcon: React__default.createElement(material.IconButton, {
           "aria-label": "toggle password visibility",
           onClick: handleClickShowPassword,
@@ -2519,6 +2593,8 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
   }),
       handleSubmit = _useForm.handleSubmit,
       control = _useForm.control,
+      getValues = _useForm.getValues,
+      trigger = _useForm.trigger,
       errors = _useForm.formState.errors;
 
   var _useState = React.useState(false),
@@ -2533,6 +2609,10 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
     event.preventDefault();
   };
 
+  var onHandleKeyChange = function onHandleKeyChange(event) {
+    if (event.key === 'Enter') props.onClick(getValues());
+  };
+
   return React__default.createElement(_.Box, {
     m: 2
   }, props.topComponent && React__default.createElement(_.Box, {
@@ -2566,6 +2646,37 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
         onChange: function onChange(e) {
           _onChange(e);
         },
+        onKeyUp: function () {
+          var _onKeyUp = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
+            var result;
+            return runtime_1.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return trigger();
+
+                  case 2:
+                    result = _context.sent;
+
+                    if (result) {
+                      onHandleKeyChange(e);
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          function onKeyUp(_x) {
+            return _onKeyUp.apply(this, arguments);
+          }
+
+          return onKeyUp;
+        }(),
         endIcon: React__default.createElement(_.IconButton, {
           "aria-label": "toggle password visibility",
           onClick: handleClickShowPassword,
@@ -2597,6 +2708,37 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
         onChange: function onChange(e) {
           _onChange2(e);
         },
+        onKeyUp: function () {
+          var _onKeyUp2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(e) {
+            var result;
+            return runtime_1.wrap(function _callee2$(_context2) {
+              while (1) {
+                switch (_context2.prev = _context2.next) {
+                  case 0:
+                    _context2.next = 2;
+                    return trigger();
+
+                  case 2:
+                    result = _context2.sent;
+
+                    if (result) {
+                      onHandleKeyChange(e);
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context2.stop();
+                }
+              }
+            }, _callee2);
+          }));
+
+          function onKeyUp(_x2) {
+            return _onKeyUp2.apply(this, arguments);
+          }
+
+          return onKeyUp;
+        }(),
         endIcon: React__default.createElement(_.IconButton, {
           "aria-label": "toggle password visibility",
           onClick: handleClickShowPassword,
@@ -2625,8 +2767,14 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
   }),
       control = _useForm.control,
       handleSubmit = _useForm.handleSubmit,
+      getValues = _useForm.getValues,
+      trigger = _useForm.trigger,
       errors = _useForm.formState.errors;
 
+  var onHandleKeyChange = function onHandleKeyChange(event) {
+    if (event.key === 'Enter') props.onClick(getValues());
+  };
+
   return React__default.createElement(material.Box, {
     m: 2
   }, props.topComponent && React__default.createElement(material.Box, {
@@ -2653,7 +2801,38 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
         inputRef: ref,
         onChange: function onChange(e) {
           _onChange(e);
-        }
+        },
+        onKeyUp: function () {
+          var _onKeyUp = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(e) {
+            var result;
+            return runtime_1.wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return trigger();
+
+                  case 2:
+                    result = _context.sent;
+
+                    if (result) {
+                      onHandleKeyChange(e);
+                    }
+
+                  case 4:
+                  case "end":
+                    return _context.stop();
+                }
+              }
+            }, _callee);
+          }));
+
+          function onKeyUp(_x) {
+            return _onKeyUp.apply(this, arguments);
+          }
+
+          return onKeyUp;
+        }()
       });
     }
   })), React__default.createElement(material.Box, {