techsbcn-storybook 0.23.2 → 0.23.3

package/dist/components/modals/ModalComponent.d.ts

@@ -13,6 +13,7 @@ interface ModalComponentProps {
     onHide: () => void;
     dividers?: boolean;
     children?: React.ReactNode;
+    buttonActionsAlign?: 'flex-end' | 'center' | 'flex-start';
 }
 export declare const ModalComponent: React.FC<ModalComponentProps>;
 export {};

package/dist/components/wrappers/MainWrapperComponent/MainWrapperComponent.d.ts

@@ -9,6 +9,7 @@ interface MainWrapperComponentProps {
     divider?: boolean;
     children?: React.ReactNode;
     height?: string;
+    enableTrimBar?: boolean;
 }
 export declare const MainWrapperComponent: React.FC<MainWrapperComponentProps>;
 export {};

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

@@ -70,7 +70,7 @@ var PublicFormWrapper = function PublicFormWrapper(props) {
   }, props.children)));
 };
 
-var css_248z$1 = ".search-component .title {\n  color: #000;\n  font-size: 18px !important;\n  font-weight: 400;\n  position: relative;\n}\n.search-component .tune-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  cursor: pointer;\n  color: white;\n}\n.search-component .tune-btn:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .btn {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}\n\n.search-menu-actions .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-menu-actions .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-menu-actions .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
+var css_248z$1 = ".search-component .title {\n  color: #000;\n  font-size: 17px !important;\n  font-weight: 400;\n  position: relative;\n}\n.search-component .tune-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 50px;\n  cursor: pointer;\n  color: white;\n}\n.search-component .tune-btn:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .btn {\n  max-width: 100%;\n  width: auto;\n}\n.search-component .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-component .wrapper-actions .btn-action .MuiButton-root {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-component .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}\n\n.search-menu-actions .wrapper-actions .btn-action {\n  cursor: pointer;\n}\n.search-menu-actions .wrapper-actions .btn-action .btn {\n  width: max-content;\n}\n.search-menu-actions .wrapper-actions .btn-action svg {\n  font-size: 40px;\n}";
 styleInject(css_248z$1);
 
 var ActionsList = function ActionsList(actions) {
@@ -269,11 +269,11 @@ var LinearProgressComponent = function LinearProgressComponent() {
   }));
 };
 
-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: -16px;\n  top: -1px;\n  width: 3px;\n  height: 20px;\n}\n.main-wrapper-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n  max-width: 100%;\n  width: auto;\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}";
+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: -16px;\n  top: 2px;\n  width: 3px;\n  height: 20px;\n}\n.main-wrapper-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n  max-width: 100%;\n  width: auto;\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}";
 styleInject(css_248z$3);
 
 var MainWrapperComponent = function MainWrapperComponent(props) {
-  var _props$height;
+  var _props$height, _props$headerProps$en;
 
   return React__default.createElement(_.Box, {
     className: "main-wrapper-component",
@@ -291,12 +291,12 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
   })) : React__default.createElement(React__default.Fragment, null, props.headerProps && React__default.createElement(_.Box, {
     mb: props.divider ? 1.5 : 0
   }, React__default.createElement(SearchComponent, Object.assign({}, props.headerProps, {
-    enableAfter: true
+    enableAfter: (_props$headerProps$en = props.headerProps.enableAfter) != null ? _props$headerProps$en : true
   }))), props.divider && React__default.createElement(_.Divider, null), props.children && !props.loadingChildren ? React__default.createElement(_.Box, {
     pt: props.headerProps ? 2 : 0,
     px: 2
   }, React__default.createElement(_.Box, {
-    className: "" + (props.headerProps ? '' : 'main-background-color-after')
+    className: "" + (props.enableTrimBar ? 'main-background-color-after' : '')
   }, props.children)) : props.loadingChildren ? React__default.createElement(_.Box, {
     display: "flex",
     justifyContent: "center",
@@ -306,6 +306,9 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
     className: "circular-progress-main-color"
   })) : React__default.createElement(React__default.Fragment, null))));
 };
+MainWrapperComponent.defaultProps = {
+  enableTrimBar: false
+};
 
 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.with-scroll {\n  max-height: 68vh;\n}\n.table-component .paper-container .table-container .table-column {\n  font-weight: bold;\n  font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !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  font-weight: bold;\n  padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container.table-simple {\n  border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container.table-simple .table-column:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container.table-simple .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-bordered .table-column {\n  border-bottom: 1px solid #eaeaea !important;\n  border-top: 1px solid #eaeaea !important;\n  border-right: 1px solid #eaeaea !important;\n  border-bottom: 1px solid #eaeaea !important;\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .table-container.table-bordered .table-column:first-child {\n  border-left: 1px solid #eaeaea;\n}\n.table-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n  border-right: 1px solid #eaeaea;\n  color: #505050 !important;\n}\n.table-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n  border-left: 1px solid #eaeaea;\n}\n.table-component .paper-container .table-container .table-rows.table-striped td {\n  background-color: rgba(255, 255, 255, 0.95);\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.row-click:hover.table-striped {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\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.table-striped {\n  background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\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 .table-container .table-rows .format-value {\n  font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n}\n.table-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n  font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\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.table-bordered {\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination {\n  margin-left: auto;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination li button {\n  border-color: #dee2e6 !important;\n  margin: 0px;\n  border-radius: 0px !important;\n  color: #7a7a7a !important;\n  border-top: 1px solid;\n  border-bottom: 1px solid;\n  border-left: 0px solid;\n  border-right: 1px solid;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination li:nth-child(1) .MuiPaginationItem-root {\n  border-radius: 5px 0 0 5px !important;\n  border-left: 1px solid;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination li:nth-last-child(1) .MuiPaginationItem-root {\n  border-radius: 0 5px 5px 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-bordered .pagination .MuiPaginationItem-icon {\n  color: #7a7a7a !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-simple .pagination .MuiPaginationItem-page {\n  background-color: #3f4d67;\n  color: white !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-simple .pagination li:nth-child(2) .MuiPaginationItem-page {\n  border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root.table-simple .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n  border-radius: 0 5px 5px 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n  border-radius: 0px;\n  margin: 1px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n  color: white !important;\n  background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n  padding: 14px;\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  .table-component .MuiTablePagination-root.table-bordered .pagination {\n    margin-left: 0;\n  }\n}";
 styleInject(css_248z$4);
@@ -1599,7 +1602,7 @@ var AppHeader = function AppHeader(props) {
   }, React__default.createElement(MenuIcon, null)), props.children));
 };
 
-var css_248z$d = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 14px !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-reverse-color {\n  border: 1px solid #3299C7;\n  color: #3299C7;\n  background-color: white !important;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #666666 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #666666c4 !important;\n  color: #030303b4 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white;\n  width: 17px !important;\n  height: 17px !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
+var css_248z$d = ".MuiButton-root {\n  width: auto;\n  padding: 0.8rem 1rem !important;\n  text-transform: inherit !important;\n  line-height: inherit !important;\n  box-shadow: none !important;\n  font-size: 14px !important;\n  background-color: #3299C7;\n}\n.MuiButton-root.Mui-disabled {\n  opacity: 0.5;\n}\n.MuiButton-root.loading-button {\n  opacity: 1 !important;\n}\n.MuiButton-root.main-background-color.Mui-disabled {\n  color: white !important;\n}\n.MuiButton-root.btn-login {\n  width: 100%;\n}\n.MuiButton-root.btn-reverse-color {\n  border: 1px solid #3299C7;\n  color: #3299C7;\n  background-color: white !important;\n}\n.MuiButton-root.btn-modal-cancel {\n  background-color: #748892 !important;\n}\n.MuiButton-root.btn-modal-cancel.Mui-disabled {\n  background-color: #748892 !important;\n}\n.MuiButton-root:hover {\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.MuiButton-root .MuiCircularProgress-root {\n  color: white;\n  width: 17px !important;\n  height: 17px !important;\n}\n.MuiButton-root .MuiButton-label .MuiCircularProgress-root {\n  color: white;\n}\n.MuiButton-root .MuiButton-startIcon svg {\n  font-size: 20px !important;\n}\n.MuiButton-root .MuiButton-endIcon svg {\n  font-size: 20px !important;\n}";
 styleInject(css_248z$d);
 
 var ButtonComponent = function ButtonComponent(props) {
@@ -1607,11 +1610,11 @@ var ButtonComponent = function ButtonComponent(props) {
     type: props.type && props.type,
     variant: "contained",
     form: props.form && props.form,
-    className: (props.reverseColors ? 'btn-reverse-color main-color main-border-color' : 'main-background-color') + "  " + (props.className ? props.className : ''),
+    className: (props.reverseColors ? 'btn-reverse-color main-color main-border-color' : 'main-background-color') + " " + (props.loading ? 'loading-button' : '') + " " + (props.className ? props.className : ''),
     startIcon: !props.loading && props.startIcon,
     endIcon: !props.loading && props.endIcon,
     onClick: props.onClick,
-    disabled: !props.loading && props.disabled,
+    disabled: props.loading || props.disabled,
     component: props.component
   }, props.loading ? React__default.createElement(_.CircularProgress, {
     className: "" + (props.reverseColors ? 'circular-progress-main-color' : ''),
@@ -3100,7 +3103,11 @@ var ModalComponent = function ModalComponent(props) {
     },
     id: "modal-description",
     dividers: props.dividers
-  }, props.children), React__default.createElement(material.DialogActions, null, props.cancelButton && React__default.createElement(ButtonComponent, Object.assign({
+  }, props.children), React__default.createElement(material.DialogActions, {
+    sx: {
+      justifyContent: props.buttonActionsAlign
+    }
+  }, props.cancelButton && React__default.createElement(ButtonComponent, Object.assign({
     disabled: props.loading,
     className: "btn-modal-cancel " + (props.cancelButton.className ? props.cancelButton.className : ''),
     onClick: props.cancelButton.onClick ? props.cancelButton.onClick : props.onHide
@@ -3113,7 +3120,8 @@ ModalComponent.defaultProps = {
   modalSize: 'sm',
   fullWidth: true,
   loading: false,
-  dividers: true
+  dividers: true,
+  buttonActionsAlign: 'flex-end'
 };
 
 var css_248z$g = ".tabs-component .Mui-selected {\n  color: white !important;\n  border: none !important;\n  background-color: #3299C7;\n}\n.tabs-component .MuiTabs-indicator {\n  display: none;\n}\n.tabs-component .MuiTab-root {\n  margin: 2px 2px 0px;\n  border: 1px solid #00000038;\n  border-bottom: none;\n  border-radius: 5% 5% 0% 0%;\n  color: rgba(0, 0, 0, 0.54);\n}\n.tabs-component .MuiTabPanel-root {\n  border: 1px solid #00000038;\n  margin: 0px 2px 0px;\n  border-radius: 0% 5px 5px 5px;\n}";