techsbcn-storybook 0.13.2 → 0.14.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SearchFilters } from '../../../interfaces';
 import './SelectField.scss';
+declare type MenuPlacement = 'bottom' | 'auto' | 'top';
 interface SelectAsyncFieldProps {
     name: string;
     placeholder?: string;
@@ -18,6 +19,7 @@ interface SelectAsyncFieldProps {
     filters?: any;
     inputRef?: React.Ref<any>;
     label?: string;
+    menuPlacement?: MenuPlacement;
 }
 export declare const SelectAsyncField: React.FunctionComponent<SelectAsyncFieldProps>;
 export {};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import './SelectField.scss';
+declare type MenuPlacement = 'bottom' | 'auto' | 'top';
 interface SelectFieldProps {
     name: string;
     placeholder?: string;
@@ -16,6 +17,8 @@ interface SelectFieldProps {
     isSearchable?: boolean;
     inputRef?: React.Ref<any>;
     label?: string;
+    menuPlacement?: MenuPlacement;
+    isLoading?: boolean;
 }
 export declare const SelectField: React.FunctionComponent<SelectFieldProps>;
 export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import './TextSimpleComponent.scss';
 interface TextSimpleComponentProps {
-    label?: string;
+    label?: any;
     value?: any;
     className?: string;
     error?: boolean;
@@ -11,6 +11,7 @@ interface TextSimpleComponentProps {
     noBorders?: boolean;
     fullWidth?: boolean;
     noMargin?: boolean;
+    isLoading?: boolean;
 }
 export declare const TextSimpleComponent: React.FC<TextSimpleComponentProps>;
 export {};

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

@@ -259,9 +259,12 @@ var css_248z$3 = ".main-wrapper-component {\n  background-color: white;\n  box-s
 styleInject(css_248z$3);
 
 var MainWrapperComponent = function MainWrapperComponent(props) {
-  return React__default.createElement(React__default.Fragment, null, props.loadingProgressBar && React__default.createElement(LinearProgressComponent, null), React__default.createElement(_.Box, {
-    className: "main-wrapper-component"
+  return React__default.createElement(_.Box, {
+    className: "main-wrapper-component",
+    height: "100%"
   }, React__default.createElement(_.Box, {
+    height: "4px"
+  }, props.loadingProgressBar && React__default.createElement(LinearProgressComponent, null)), React__default.createElement(_.Box, {
     py: 2
   }, props.loading ? React__default.createElement(_.Box, {
     display: "flex",
@@ -286,7 +289,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
     px: 2
   }, React__default.createElement(_.CircularProgress, {
     className: "circular-progress-main-color"
-  })) : React__default.createElement(React__default.Fragment, null)))));
+  })) : 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.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}";
@@ -936,7 +939,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
         type: editableCell.isTextField.type,
         onChange: handleTextFieldChange,
         name: fieldName,
-        defaultValue: value
+        defaultValue: value,
+        step: "any",
+        minNumber: 0
       });
     } else {
       return value;
@@ -1463,7 +1468,7 @@ ButtonComponent.defaultProps = {
   component: 'button'
 };
 
-var css_248z$e = ".text-simple-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-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666 !important;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
+var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n  color: #666666;\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-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n  margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n  margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n  border: none !important;\n  padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n  color: #666666;\n  font-size: 1rem;\n  border: 1px solid grey;\n  padding: 0.868rem;\n  border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n  border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n  color: #F24726 !important;\n}";
 styleInject(css_248z$e);
 
 var TextSimpleComponent = function TextSimpleComponent(props) {
@@ -1515,13 +1520,16 @@ var SelectField = function SelectField(props) {
     ref: props.inputRef,
     isDisabled: props.disabled,
     isClearable: props.isClearable,
-    isSearchable: props.isSearchable
+    isSearchable: props.isSearchable,
+    isLoading: props.isLoading,
+    menuPlacement: props.menuPlacement
   }), props.helperText && React__default.createElement("div", {
     className: "helper-text " + (props.invalid ? 'has-error' : '')
   }, props.helperText));
 };
 SelectField.defaultProps = {
-  isClearable: true
+  isClearable: true,
+  menuPlacement: 'auto'
 };
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -2408,13 +2416,15 @@ var SelectAsyncField = function SelectAsyncField(props) {
     selectRef: props.inputRef,
     isDisabled: props.disabled,
     isClearable: props.isClearable,
-    loadOptions: loadOptions
+    loadOptions: loadOptions,
+    menuPlacement: props.menuPlacement
   }), props.helperText && React__default.createElement("div", {
     className: "helper-text " + (props.invalid ? 'has-error' : '')
   }, props.helperText));
 };
 SelectAsyncField.defaultProps = {
-  isClearable: true
+  isClearable: true,
+  menuPlacement: 'auto'
 };
 
 var LoginForm = function LoginForm(props) {
@@ -2440,10 +2450,6 @@ var LoginForm = function LoginForm(props) {
       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, {
@@ -2484,17 +2490,22 @@ var LoginForm = function LoginForm(props) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    _context.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context.stop();
                 }
@@ -2540,17 +2551,22 @@ var LoginForm = function LoginForm(props) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
-                    _context2.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context2.next = 5;
+                      break;
+                    }
+
+                    _context2.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context2.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context2.stop();
                 }
@@ -2610,10 +2626,6 @@ 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, {
@@ -2654,17 +2666,22 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    _context.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context.stop();
                 }
@@ -2716,17 +2733,22 @@ var ChangePasswordForm = function ChangePasswordForm(props) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
                   case 0:
-                    _context2.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context2.next = 5;
+                      break;
+                    }
+
+                    _context2.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context2.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context2.stop();
                 }
@@ -2772,10 +2794,6 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
       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, {
@@ -2810,17 +2828,22 @@ var ResetPasswordForm = function ResetPasswordForm(props) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    _context.next = 2;
+                    if (!(e.key === 'Enter')) {
+                      _context.next = 5;
+                      break;
+                    }
+
+                    _context.next = 3;
                     return trigger();
 
-                  case 2:
+                  case 3:
                     result = _context.sent;
 
                     if (result) {
-                      onHandleKeyChange(e);
+                      props.onClick(getValues());
                     }
 
-                  case 4:
+                  case 5:
                   case "end":
                     return _context.stop();
                 }