techsbcn-storybook 0.24.1 → 0.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts +2 -1
  2. package/dist/components/fields/SelectFieldComponent/SelectField.d.ts +1 -0
  3. package/dist/components/modals/ModalComponent.d.ts +1 -0
  4. package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts +2 -0
  5. package/dist/components/tables/TableComponent/TableComponent.d.ts +4 -2
  6. package/dist/interfaces/search/SearchSimpleResult.d.ts +1 -0
  7. package/dist/techsbcn-storybook.cjs.development.js +95 -87
  8. package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
  9. package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
  10. package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
  11. package/dist/techsbcn-storybook.esm.js +95 -87
  12. package/dist/techsbcn-storybook.esm.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/components/fields/SelectFieldComponent/SelectAsyncField.tsx +9 -4
  15. package/src/components/fields/SelectFieldComponent/SelectField.scss +9 -0
  16. package/src/components/fields/SelectFieldComponent/SelectField.tsx +4 -1
  17. package/src/components/modals/ModalComponent.tsx +8 -4
  18. package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +2 -2
  19. package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +13 -11
  20. package/src/components/tables/TableComponent/TableComponent.scss +2 -2
  21. package/src/components/tables/TableComponent/TableComponent.tsx +127 -119
  22. package/src/data/SelectMock.tsx +9 -1
  23. package/src/interfaces/search/SearchSimpleResult.tsx +1 -0
  24. package/src/stories/Fields/Fields.stories.tsx +2 -1
  25. package/src/stories/Tables/TableComponent.stories.tsx +2 -2
package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts CHANGED
@@ -11,7 +11,7 @@ interface SelectAsyncFieldProps {
11
11
  disabled?: boolean;
12
12
  onChange?: (value: any, name: string) => void;
13
13
  onChangeValue?: (value: any) => void;
14
- onChangeOption?: (value: any, label: string) => void;
14
+ onChangeOption?: (value: any, label: string, extra?: any) => void;
15
15
  searchPromise: (filters: SearchFilters) => Promise<any>;
16
16
  invalid?: boolean;
17
17
  isClearable?: boolean;
@@ -22,6 +22,7 @@ interface SelectAsyncFieldProps {
22
22
  menuPlacement?: MenuPlacement;
23
23
  value?: any[];
24
24
  getOptionLabel?: (option: any) => any;
25
+ noBorders?: boolean;
25
26
  }
26
27
  export declare const SelectAsyncField: React.FunctionComponent<SelectAsyncFieldProps>;
27
28
  export {};
package/dist/components/fields/SelectFieldComponent/SelectField.d.ts CHANGED
@@ -23,6 +23,7 @@ interface SelectFieldProps {
23
23
  value?: any[];
24
24
  getOptionLabel?: (option: any) => any;
25
25
  addExtraOption?: any;
26
+ noBorders?: boolean;
26
27
  }
27
28
  export declare const SelectField: React.FunctionComponent<SelectFieldProps>;
28
29
  export {};
package/dist/components/modals/ModalComponent.d.ts CHANGED
@@ -14,6 +14,7 @@ interface ModalComponentProps {
14
14
  dividers?: boolean;
15
15
  children?: React.ReactNode;
16
16
  buttonActionsAlign?: 'flex-end' | 'center' | 'flex-start';
17
+ crossAvailable?: boolean;
17
18
  }
18
19
  export declare const ModalComponent: React.FC<ModalComponentProps>;
19
20
  export {};
package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts CHANGED
@@ -29,6 +29,7 @@ interface ColumnProps {
29
29
  label?: string;
30
30
  minWidth?: number;
31
31
  maxWidth?: number;
32
+ width?: number;
32
33
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
33
34
  alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
34
35
  action?: ActionProps[];
@@ -65,6 +66,7 @@ interface ColumnProps {
65
66
  enumSuffix?: string;
66
67
  };
67
68
  rowViewFormat?: (row: any) => any;
69
+ cellClassName?: (row: any) => string;
68
70
  }
69
71
  interface ActionProps {
70
72
  children: React.ReactNode;
package/dist/components/tables/TableComponent/TableComponent.d.ts CHANGED
@@ -26,10 +26,11 @@ interface TableComponentProps {
26
26
  isBordered?: boolean;
27
27
  }
28
28
  interface ColumnProps {
29
- id: string;
30
- label: string;
29
+ id?: string;
30
+ label?: string;
31
31
  minWidth?: number;
32
32
  maxWidth?: number;
33
+ width?: number;
33
34
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
34
35
  alignCell?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
35
36
  action?: ActionProps[];
@@ -68,6 +69,7 @@ interface ColumnProps {
68
69
  };
69
70
  orderBy?: string;
70
71
  rowViewFormat?: (row: any) => any;
72
+ cellClassName?: (row: any) => string;
71
73
  }
72
74
  interface ActionProps {
73
75
  children: React.ReactNode;
package/dist/interfaces/search/SearchSimpleResult.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export interface SearchSimpleResult {
2
2
  id: number;
3
3
  name: string;
4
+ extra?: any;
4
5
  }
package/dist/techsbcn-storybook.cjs.development.js CHANGED
@@ -310,7 +310,7 @@ MainWrapperComponent.defaultProps = {
310
310
  enableTrimBar: false
311
311
  };
312
312
 
313
- 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}";
313
+ 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: 50px;\n height: 50px;\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}";
314
314
  styleInject(css_248z$4);
315
315
 
316
316
  var css_248z$5 = ".text-field-component .MuiFormLabel-root {\n color: #666666 !important;\n font-size: 1rem !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.33rem 0.87rem;\n background-color: white !important;\n border-radius: 3px !important;\n font-size: 14px !important;\n}\n.text-field-component .MuiInputBase-root.end-icon-padding {\n padding: 0.1769rem 0.87rem;\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}";
@@ -605,9 +605,9 @@ var TableComponent = function TableComponent(props) {
605
605
  }
606
606
 
607
607
  if (column.isBoolean) {
608
- var booleanStr = value ? 'true' : 'false';
608
+ var booleanStr = value ? value ? 'true' : 'false' : '';
609
609
 
610
- if (column.isBoolean.enumType) {
610
+ if (column.isBoolean.enumType && booleanStr) {
611
611
  var _column$isBoolean3;
612
612
 
613
613
  if (column.isBoolean.enumSuffix) {
@@ -615,7 +615,7 @@ var TableComponent = function TableComponent(props) {
615
615
 
616
616
  return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
617
617
  } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
618
- } else if (column.isBoolean.enumSuffix) {
618
+ } else if (column.isBoolean.enumSuffix && booleanStr) {
619
619
  var _column$isBoolean4;
620
620
 
621
621
  return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
@@ -725,17 +725,18 @@ var TableComponent = function TableComponent(props) {
725
725
  key: column.isUnique ? guid : column.id,
726
726
  align: column.align ? column.align : 'center',
727
727
  style: {
728
+ width: column.width,
728
729
  minWidth: column.minWidth,
729
730
  maxWidth: column.maxWidth
730
731
  }
731
- }, column.id !== 'actions' && !column.isCheck && !column.isActiveFunction && !column.noSort ? React__default.createElement(_.TableSortLabel, {
732
+ }, (column.orderBy || column.id) && column.id !== 'actions' && !column.isCheck && !column.isActiveFunction && !column.noSort ? React__default.createElement(_.TableSortLabel, {
732
733
  className: "table-header-cell",
733
734
  active: column.orderBy ? filters.orderBy === column.orderBy : filters.orderBy === column.id,
734
735
  direction: filters.orderAsc ? 'asc' : 'desc',
735
736
  onClick: function onClick() {
736
- var _column$orderBy;
737
+ var _ref, _column$orderBy;
737
738
 
738
- return createSortHandler((_column$orderBy = column.orderBy) != null ? _column$orderBy : column.id);
739
+ return createSortHandler((_ref = (_column$orderBy = column.orderBy) != null ? _column$orderBy : column.id) != null ? _ref : '');
739
740
  },
740
741
  hideSortIcon: true
741
742
  }, column.label) : column.isCheck ? React__default.createElement(_.Box, {
@@ -771,69 +772,71 @@ var TableComponent = function TableComponent(props) {
771
772
  tabIndex: -1,
772
773
  key: index
773
774
  }, props.columns.map(function (column) {
774
- var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
775
- var isItemSelected = column.isCheck && isSelected(row.id);
776
- var guid = Math.random().toString(36).substring(7);
777
- return React__default.createElement(_.TableCell, {
778
- className: "table-cell",
779
- key: column.isUnique ? guid : column.id,
780
- sx: {
781
- textAlign: {
782
- xs: 'left',
783
- md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
784
- }
785
- },
786
- onClick: function onClick() {
787
- return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
788
- }
789
- }, React__default.createElement(_.Hidden, {
790
- mdUp: true
791
- }, column.label !== '-' && React__default.createElement(_.Box, {
792
- display: "inline-block",
793
- className: "label-cell"
794
- }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
795
- className: "format-value"
796
- }, value) : column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
797
- display: "flex",
798
- className: "actions"
799
- }, column.action && column.action.map(function (action, i) {
800
- return React__default.createElement(_.Box, {
801
- key: i
802
- }, action.onClick && React__default.createElement(_.Box, {
803
- className: "btn-action main-color-hover",
775
+ if (column.id) {
776
+ var value = column.rowViewFormat ? checkFormat(row, column.rowViewFormat) : ObjectbyString(row, column.id);
777
+ var isItemSelected = column.isCheck && isSelected(row.id);
778
+ var guid = Math.random().toString(36).substring(7);
779
+ return React__default.createElement(_.TableCell, {
780
+ className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
781
+ key: column.isUnique ? guid : column.id,
782
+ sx: {
783
+ textAlign: {
784
+ xs: 'left',
785
+ md: column.alignCell ? column.alignCell : column.align ? column.align : 'center'
786
+ }
787
+ },
804
788
  onClick: function onClick() {
805
- return action.onClick && action.onClick(row);
789
+ return !column.action && !column.isCheck && !column.isActiveFunction ? handleRowClick(row) : '';
806
790
  }
807
- }, action.children), action.onClickId && React__default.createElement(_.Box, {
791
+ }, React__default.createElement(_.Hidden, {
792
+ mdUp: true
793
+ }, column.label !== '-' && React__default.createElement(_.Box, {
794
+ display: "inline-block",
795
+ className: "label-cell"
796
+ }, column.label)), column.rowViewFormat ? React__default.createElement(_.Box, {
797
+ className: "format-value"
798
+ }, value) : column.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
799
+ display: "flex",
800
+ className: "actions"
801
+ }, column.action && column.action.map(function (action, i) {
802
+ return React__default.createElement(_.Box, {
803
+ key: i
804
+ }, action.onClick && React__default.createElement(_.Box, {
805
+ className: "btn-action main-color-hover",
806
+ onClick: function onClick() {
807
+ return action.onClick && action.onClick(row);
808
+ }
809
+ }, action.children), action.onClickId && React__default.createElement(_.Box, {
810
+ className: "btn-action main-color-hover",
811
+ onClick: function onClick() {
812
+ return action.onClickId && action.onClickId(row.id);
813
+ }
814
+ }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
815
+ className: "btn-action"
816
+ }, action.children));
817
+ }))) : column.isActiveFunction && row.length > 0 ? React__default.createElement(_.Box, {
808
818
  className: "btn-action main-color-hover",
809
819
  onClick: function onClick() {
810
- return action.onClickId && action.onClickId(row.id);
820
+ return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
811
821
  }
812
- }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
813
- className: "btn-action"
814
- }, action.children));
815
- }))) : column.isActiveFunction ? React__default.createElement(_.Box, {
816
- className: "btn-action main-color-hover",
817
- onClick: function onClick() {
818
- return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
819
- }
820
- }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck ? React__default.createElement(_.Box, {
821
- className: "checkbox-cell"
822
- }, React__default.createElement(_.Checkbox, {
823
- checked: isItemSelected,
824
- inputProps: {
825
- 'aria-labelledby': row.id
826
- },
827
- onChange: function onChange(event) {
828
- return onCheckAction(event, row.id);
829
- }
830
- })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
831
- className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
832
- }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
833
- className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
834
- }, formatValue(value, column)) : React__default.createElement(_.Box, {
835
- className: "" + (column.isImage ? '' : 'format-value')
836
- }, formatValue(value, column)));
822
+ }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && row.length > 0 ? React__default.createElement(_.Box, {
823
+ className: "checkbox-cell"
824
+ }, React__default.createElement(_.Checkbox, {
825
+ checked: isItemSelected,
826
+ inputProps: {
827
+ 'aria-labelledby': row.id
828
+ },
829
+ onChange: function onChange(event) {
830
+ return onCheckAction(event, row.id);
831
+ }
832
+ })) : column.isEditableTableCell && row.length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && row.length > 0 ? React__default.createElement(_.Box, {
833
+ className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
834
+ }, formatValue(value, column)) : column.isBoolean && row.length > 0 ? React__default.createElement(_.Box, {
835
+ className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
836
+ }, formatValue(value, column)) : React__default.createElement(_.Box, {
837
+ className: "" + (column.isImage ? '' : 'format-value')
838
+ }, formatValue(value, column)));
839
+ } else return null;
837
840
  }));
838
841
  }) : !props.loading ? React__default.createElement(_.TableRow, null, React__default.createElement(_.TableCell, {
839
842
  colSpan: props.columns.length
@@ -842,10 +845,10 @@ var TableComponent = function TableComponent(props) {
842
845
  count: props.totalCount,
843
846
  rowsPerPage: props.baseFilters.limit,
844
847
  labelRowsPerPage: props.values.SHOWING,
845
- labelDisplayedRows: function labelDisplayedRows(_ref) {
846
- var from = _ref.from,
847
- to = _ref.to,
848
- count = _ref.count;
848
+ labelDisplayedRows: function labelDisplayedRows(_ref2) {
849
+ var from = _ref2.from,
850
+ to = _ref2.to,
851
+ count = _ref2.count;
849
852
  return props.values.TABLE_LABEL_DISPLAY(from, to, count);
850
853
  },
851
854
  page: props.baseFilters.page - 1,
@@ -886,7 +889,7 @@ TableComponent.defaultProps = {
886
889
  showTotalCount: true
887
890
  };
888
891
 
889
- 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.with-scroll {\n max-height: 68vh;\n}\n.table-simple-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-simple-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-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-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-simple-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 color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n color: #505050 !important;\n border-right: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: rgba(255, 255, 255, 0.95);\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.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-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-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.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\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;\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 .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-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-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}";
892
+ 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.with-scroll {\n max-height: 68vh;\n}\n.table-simple-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-simple-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-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-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-simple-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 color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n color: #505050 !important;\n border-right: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: rgba(255, 255, 255, 0.95);\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.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-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-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.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\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;\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 .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-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-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: 50px;\n height: 50px;\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}";
890
893
  styleInject(css_248z$6);
891
894
 
892
895
  var SimpleTableComponent = function SimpleTableComponent(props) {
@@ -1012,9 +1015,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1012
1015
  }
1013
1016
 
1014
1017
  if (column.isBoolean) {
1015
- var booleanStr = value ? 'true' : 'false';
1018
+ var booleanStr = value ? value ? 'true' : 'false' : '';
1016
1019
 
1017
- if (column.isBoolean.enumType) {
1020
+ if (column.isBoolean.enumType && booleanStr) {
1018
1021
  var _column$isBoolean3;
1019
1022
 
1020
1023
  if (column.isBoolean.enumSuffix) {
@@ -1022,7 +1025,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1022
1025
 
1023
1026
  return props.values[((_column$isBoolean = column.isBoolean) == null ? void 0 : _column$isBoolean.enumType[booleanStr].toUpperCase()) + "_" + ((_column$isBoolean2 = column.isBoolean) == null ? void 0 : _column$isBoolean2.enumSuffix.toUpperCase())];
1024
1027
  } else return props.values[(_column$isBoolean3 = column.isBoolean) == null ? void 0 : _column$isBoolean3.enumType[booleanStr].toUpperCase()];
1025
- } else if (column.isBoolean.enumSuffix) {
1028
+ } else if (column.isBoolean.enumSuffix && booleanStr) {
1026
1029
  var _column$isBoolean4;
1027
1030
 
1028
1031
  return props.values[booleanStr.toUpperCase() + "_" + ((_column$isBoolean4 = column.isBoolean) == null ? void 0 : _column$isBoolean4.enumSuffix.toUpperCase())];
@@ -1128,6 +1131,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1128
1131
  key: column.isUnique ? guid : column.id,
1129
1132
  align: column.align ? column.align : 'center',
1130
1133
  style: {
1134
+ width: column.width,
1131
1135
  minWidth: column.minWidth,
1132
1136
  maxWidth: column.maxWidth
1133
1137
  }
@@ -1170,7 +1174,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1170
1174
  var isItemSelected = column.isCheck && isSelected(row.id);
1171
1175
  var guid = Math.random().toString(36).substring(7);
1172
1176
  return React__default.createElement(_.TableCell, {
1173
- className: "table-cell",
1177
+ className: "table-cell " + (column.cellClassName ? column.cellClassName(row) : ''),
1174
1178
  key: column.isUnique ? guid : column.id,
1175
1179
  sx: {
1176
1180
  textAlign: {
@@ -1186,7 +1190,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1186
1190
  }, column.label !== '-' && React__default.createElement(_.Box, {
1187
1191
  display: "inline-block",
1188
1192
  className: "label-cell"
1189
- }, column.label)), column.action ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
1193
+ }, column.label)), column.action && row.length > 0 ? React__default.createElement(_.Box, null, React__default.createElement(_.Box, {
1190
1194
  display: "flex",
1191
1195
  className: "actions"
1192
1196
  }, column.rowViewFormat ? React__default.createElement(_.Box, {
@@ -1207,12 +1211,12 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1207
1211
  }, action.children), !action.onClick && !action.onClickId && React__default.createElement(_.Box, {
1208
1212
  className: "btn-action"
1209
1213
  }, action.children));
1210
- }))) : column.isActiveFunction ? React__default.createElement(_.Box, {
1214
+ }))) : column.isActiveFunction && row.length > 0 ? React__default.createElement(_.Box, {
1211
1215
  className: "btn-action main-color-hover",
1212
1216
  onClick: function onClick() {
1213
1217
  return column.isActiveFunction && column.isActiveFunction.onClickId(row.id);
1214
1218
  }
1215
- }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck ? React__default.createElement(_.Box, {
1219
+ }, value ? column.isActiveFunction.activeIcon : column.isActiveFunction.disabledIcon) : column.isCheck && row.length > 0 ? React__default.createElement(_.Box, {
1216
1220
  className: "checkbox-cell"
1217
1221
  }, React__default.createElement(_.Checkbox, {
1218
1222
  checked: isItemSelected,
@@ -1224,9 +1228,9 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
1224
1228
 
1225
1229
  return (_props$isCheckTable18 = props.isCheckTable) != null && _props$isCheckTable18.onCheckedAction ? onCheckAction(event, row.id) : onCheckSingleAction(event, row.id);
1226
1230
  }
1227
- })) : column.isEditableTableCell ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn ? React__default.createElement(_.Box, {
1231
+ })) : column.isEditableTableCell && row.length > 0 ? EditableTableCell(row, value, column.id, column.isEditableTableCell) : column.enumColumn && row.length > 0 ? React__default.createElement(_.Box, {
1228
1232
  className: (column.enumColumn.hasColor ? (column.enumColumn.enumSuffix ? value.toLowerCase() + "-" + column.enumColumn.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-type-color" : '') + " format-value"
1229
- }, formatValue(value, column)) : column.isBoolean ? React__default.createElement(_.Box, {
1233
+ }, formatValue(value, column)) : column.isBoolean && row.length > 0 ? React__default.createElement(_.Box, {
1230
1234
  className: (column.isBoolean.hasColor ? (column.isBoolean.enumSuffix ? value.toString().toLowerCase() + "-" + column.isBoolean.enumSuffix.toLowerCase() : value.toString().toLowerCase()) + "-boolean-color" : '') + " format-value"
1231
1235
  }, formatValue(value, column)) : React__default.createElement(_.Box, {
1232
1236
  className: "" + (column.isImage ? '' : 'format-value')
@@ -1685,7 +1689,7 @@ TextSimpleComponent.defaultProps = {
1685
1689
  isFormLabel: true
1686
1690
  };
1687
1691
 
1688
- var css_248z$f = ".select-field .MuiFormLabel-root {\n color: #666666 !important;\n font-size: 1rem !important;\n transform: translate(0, 0.5px) scale(0.85);\n transform-origin: top left;\n text-overflow: initial !important;\n}\n.select-field .MuiFormLabel-root + .basic-multi-select .select__control {\n margin-top: 1.85px;\n}\n.select-field .select {\n font-size: 1rem;\n}\n.select-field .select__menu {\n z-index: 3 !important;\n background-color: white;\n}\n.select-field .select__control {\n cursor: pointer;\n border: 1px solid grey;\n border-radius: 3px !important;\n padding: 0.12rem 0.2rem;\n font-size: 14px;\n color: grey !important;\n background-color: transparent;\n}\n.select-field .select__option {\n cursor: pointer;\n color: #666666 !important;\n background-color: white !important;\n}\n.select-field .select__option--is-focused {\n background-color: rgba(0, 0, 0, 0.04) !important;\n color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n color: white !important;\n}\n.select-field .select__indicator {\n color: grey !important;\n}\n.select-field .select__indicator:hover {\n color: black !important;\n}\n.select-field .select__placeholder {\n text-overflow: ellipsis !important;\n color: #666666 !important;\n opacity: 1;\n}\n.select-field .select__single-value {\n color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n color: #666666 !important;\n font-size: 14px;\n}\n.select-field .select__control--is-focused {\n border-color: grey !important;\n box-shadow: none !important;\n}\n.select-field .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.select-field .has-error {\n color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n border-color: #F24726 !important;\n box-shadow: 0 0 0 1px #F24726;\n}";
1692
+ var css_248z$f = ".select-field .MuiFormLabel-root {\n color: #666666 !important;\n font-size: 1rem !important;\n transform: translate(0, 0.5px) scale(0.85);\n transform-origin: top left;\n text-overflow: initial !important;\n}\n.select-field .MuiFormLabel-root + .basic-multi-select .select__control {\n margin-top: 1.85px;\n}\n.select-field .select {\n font-size: 1rem;\n}\n.select-field .select__menu {\n z-index: 3 !important;\n background-color: white;\n}\n.select-field .select__control {\n cursor: pointer;\n border: 1px solid grey;\n border-radius: 3px !important;\n padding: 0.12rem 0.2rem;\n font-size: 14px;\n color: grey !important;\n background-color: transparent;\n}\n.select-field .select__option {\n cursor: pointer;\n color: #666666 !important;\n background-color: white !important;\n}\n.select-field .select__option--is-focused {\n background-color: rgba(0, 0, 0, 0.04) !important;\n color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n color: white !important;\n}\n.select-field .select__indicator {\n color: grey !important;\n}\n.select-field .select__indicator:hover {\n color: black !important;\n}\n.select-field .select__placeholder {\n text-overflow: ellipsis !important;\n color: #666666 !important;\n opacity: 1;\n}\n.select-field .select__single-value {\n color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n color: #666666 !important;\n font-size: 14px;\n}\n.select-field .select__control--is-focused {\n border-color: grey !important;\n box-shadow: none !important;\n}\n.select-field .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.select-field .has-error {\n color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n border-color: #F24726 !important;\n box-shadow: 0 0 0 1px #F24726;\n}\n.select-field .no-border .select__control {\n cursor: pointer;\n border: none !important;\n padding: 0 !important;\n}";
1689
1693
  styleInject(css_248z$f);
1690
1694
 
1691
1695
  var SelectField = function SelectField(props) {
@@ -1703,7 +1707,7 @@ var SelectField = function SelectField(props) {
1703
1707
  name: props.name,
1704
1708
  placeholder: props.placeholder,
1705
1709
  options: getOptions(),
1706
- className: "basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
1710
+ className: (props.noBorders ? 'no-border' : '') + " basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
1707
1711
  classNamePrefix: "custom-select select",
1708
1712
  onChange: function onChange(option) {
1709
1713
  props.onChange && props.onChange(option && option.length > 0 ? option.map(function (o) {
@@ -2532,7 +2536,7 @@ var SelectAsyncField = function SelectAsyncField(props) {
2532
2536
  offset: 0,
2533
2537
  page: 1,
2534
2538
  limit: 10,
2535
- orderBy: 'Name',
2539
+ orderBy: 'Id',
2536
2540
  orderAsc: true
2537
2541
  };
2538
2542
 
@@ -2566,7 +2570,8 @@ var SelectAsyncField = function SelectAsyncField(props) {
2566
2570
  options: items.map(function (r) {
2567
2571
  return {
2568
2572
  value: r.id,
2569
- label: r.name
2573
+ label: r.name,
2574
+ extra: r.extra
2570
2575
  };
2571
2576
  }),
2572
2577
  hasMore: items.length * filtersPage < totalCount,
@@ -2597,7 +2602,7 @@ var SelectAsyncField = function SelectAsyncField(props) {
2597
2602
  isMulti: props.isMulti,
2598
2603
  name: props.name,
2599
2604
  placeholder: props.placeholder,
2600
- className: "basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
2605
+ className: (props.noBorders ? 'no-border' : '') + " basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
2601
2606
  classNamePrefix: "custom-select select",
2602
2607
  onChange: function onChange(option) {
2603
2608
  props.onChange && props.onChange(option && option.length > 0 ? option.map(function (o) {
@@ -2610,7 +2615,9 @@ var SelectAsyncField = function SelectAsyncField(props) {
2610
2615
  return o.value;
2611
2616
  }) : option ? option.value : option, option && option.length > 0 ? option.map(function (o) {
2612
2617
  return o.label;
2613
- }) : option ? option.label : option);
2618
+ }) : option ? option.label : option, option && option.length > 0 ? option.map(function (o) {
2619
+ return o.extra;
2620
+ }) : option ? option.extra : option);
2614
2621
  },
2615
2622
  selectRef: props.inputRef,
2616
2623
  isDisabled: props.disabled,
@@ -3092,14 +3099,14 @@ var ModalComponent = function ModalComponent(props) {
3092
3099
  }, React__default.createElement(material.Box, {
3093
3100
  display: "flex",
3094
3101
  alignItems: "center"
3095
- }, props.title, props.onHide && React__default.createElement(material.Box, {
3102
+ }, props.title, props.onHide && props.crossAvailable && React__default.createElement(material.Box, {
3096
3103
  sx: {
3097
3104
  margin: '-1rem -1rem -1rem auto'
3098
3105
  }
3099
3106
  }, React__default.createElement(material.IconButton, {
3100
3107
  "aria-label": "close",
3101
3108
  onClick: props.onHide
3102
- }, React__default.createElement(iconsMaterial.Close, null))))), React__default.createElement(material.DialogContent, {
3109
+ }, React__default.createElement(iconsMaterial.Close, null))))), props.children && React__default.createElement(material.DialogContent, {
3103
3110
  sx: {
3104
3111
  overflowY: 'unset'
3105
3112
  },
@@ -3123,6 +3130,7 @@ ModalComponent.defaultProps = {
3123
3130
  fullWidth: true,
3124
3131
  loading: false,
3125
3132
  dividers: true,
3133
+ crossAvailable: true,
3126
3134
  buttonActionsAlign: 'flex-end'
3127
3135
  };
3128
3136