techsbcn-storybook 0.24.0 → 0.25.1
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.
- package/dist/components/fields/SelectFieldComponent/SelectAsyncField.d.ts +2 -1
- package/dist/components/fields/SelectFieldComponent/SelectField.d.ts +1 -0
- package/dist/components/modals/ModalComponent.d.ts +1 -0
- package/dist/components/tables/TableComponent/TableComponent.d.ts +2 -1
- package/dist/interfaces/search/SearchSimpleResult.d.ts +1 -0
- package/dist/techsbcn-storybook.cjs.development.js +17 -13
- package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
- package/dist/techsbcn-storybook.esm.js +17 -13
- package/dist/techsbcn-storybook.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/fields/SelectFieldComponent/SelectAsyncField.tsx +9 -4
- package/src/components/fields/SelectFieldComponent/SelectField.scss +9 -0
- package/src/components/fields/SelectFieldComponent/SelectField.tsx +4 -1
- package/src/components/fields/TextSimpleComponent/TextSimpleComponent.scss +1 -3
- package/src/components/modals/ModalComponent.tsx +8 -4
- package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +2 -2
- package/src/components/tables/TableComponent/TableComponent.scss +2 -2
- package/src/components/tables/TableComponent/TableComponent.tsx +6 -3
- package/src/data/SelectMock.tsx +9 -1
- package/src/interfaces/search/SearchSimpleResult.tsx +1 -0
- package/src/stories/Fields/Fields.stories.tsx +4 -3
|
@@ -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 {};
|
|
@@ -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 {};
|
|
@@ -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:
|
|
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}";
|
|
@@ -541,7 +541,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
541
541
|
};
|
|
542
542
|
|
|
543
543
|
var formatValue = function formatValue(value, column) {
|
|
544
|
-
var _column$enumColumn;
|
|
544
|
+
var _column$enumColumn, _column$priceFormat$c, _column$priceFormat, _column$priceFormat2, _column$priceFormat$c2, _column$priceFormat3;
|
|
545
545
|
|
|
546
546
|
if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
|
|
547
547
|
var _column$enumColumn2, _column$enumColumn9;
|
|
@@ -581,7 +581,7 @@ var TableComponent = function TableComponent(props) {
|
|
|
581
581
|
}
|
|
582
582
|
|
|
583
583
|
if (column.isDate && value) return dayjs.utc(value).tz(dayjs.tz.guess()).format('L');
|
|
584
|
-
if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + props.values.SYMBOL_EURO;
|
|
584
|
+
if (column.isPrice && value) return "" + ((_column$priceFormat$c = (_column$priceFormat = column.priceFormat) == null ? void 0 : _column$priceFormat.currencyStart) != null ? _column$priceFormat$c : '') + Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + (!((_column$priceFormat2 = column.priceFormat) != null && _column$priceFormat2.currencyStart) ? (_column$priceFormat$c2 = (_column$priceFormat3 = column.priceFormat) == null ? void 0 : _column$priceFormat3.currencyEnd) != null ? _column$priceFormat$c2 : props.values.SYMBOL_EURO : '');
|
|
585
585
|
|
|
586
586
|
if (column.isImage && value) {
|
|
587
587
|
if (column.isImage.isUrl) {
|
|
@@ -886,7 +886,7 @@ TableComponent.defaultProps = {
|
|
|
886
886
|
showTotalCount: true
|
|
887
887
|
};
|
|
888
888
|
|
|
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:
|
|
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: 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
890
|
styleInject(css_248z$6);
|
|
891
891
|
|
|
892
892
|
var SimpleTableComponent = function SimpleTableComponent(props) {
|
|
@@ -1627,7 +1627,7 @@ ButtonComponent.defaultProps = {
|
|
|
1627
1627
|
component: 'button'
|
|
1628
1628
|
};
|
|
1629
1629
|
|
|
1630
|
-
var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\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-simple-component .MuiFormLabel-root + .text-simple-box {\n margin-top: 2px;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-
|
|
1630
|
+
var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\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-simple-component .MuiFormLabel-root + .text-simple-box {\n margin-top: 2px;\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.in-center.label-margin {\n margin-top: 38px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.in-center {\n margin-top: 15px !important;\n}\n.text-simple-component .text-simple-box.label-margin {\n margin-top: 25px !important;\n}\n.text-simple-component .text-simple-box.in-center {\n margin-top: 10px !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: 14px;\n border: 1px solid grey;\n border-radius: 3px !important;\n padding: 0.611rem 0.87rem;\n line-height: 1.4375em;\n letter-spacing: 0.00938em;\n}\n.text-simple-component .text-simple-box.icon-padding {\n padding: 0.49rem 0.87rem;\n}\n.text-simple-component .text-simple-box.end-icon-padding {\n padding: 0.177rem 0.87rem;\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 .helper-text.no-border {\n margin-top: 12px;\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}";
|
|
1631
1631
|
styleInject(css_248z$e);
|
|
1632
1632
|
|
|
1633
1633
|
var TextSimpleComponent = function TextSimpleComponent(props) {
|
|
@@ -1685,7 +1685,7 @@ TextSimpleComponent.defaultProps = {
|
|
|
1685
1685
|
isFormLabel: true
|
|
1686
1686
|
};
|
|
1687
1687
|
|
|
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}";
|
|
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}\n.select-field .no-border .select__control {\n cursor: pointer;\n border: none !important;\n padding: 0 !important;\n}";
|
|
1689
1689
|
styleInject(css_248z$f);
|
|
1690
1690
|
|
|
1691
1691
|
var SelectField = function SelectField(props) {
|
|
@@ -1703,7 +1703,7 @@ var SelectField = function SelectField(props) {
|
|
|
1703
1703
|
name: props.name,
|
|
1704
1704
|
placeholder: props.placeholder,
|
|
1705
1705
|
options: getOptions(),
|
|
1706
|
-
className: "basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
|
|
1706
|
+
className: (props.noBorders ? 'no-border' : '') + " basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
|
|
1707
1707
|
classNamePrefix: "custom-select select",
|
|
1708
1708
|
onChange: function onChange(option) {
|
|
1709
1709
|
props.onChange && props.onChange(option && option.length > 0 ? option.map(function (o) {
|
|
@@ -2532,7 +2532,7 @@ var SelectAsyncField = function SelectAsyncField(props) {
|
|
|
2532
2532
|
offset: 0,
|
|
2533
2533
|
page: 1,
|
|
2534
2534
|
limit: 10,
|
|
2535
|
-
orderBy: '
|
|
2535
|
+
orderBy: 'Id',
|
|
2536
2536
|
orderAsc: true
|
|
2537
2537
|
};
|
|
2538
2538
|
|
|
@@ -2566,7 +2566,8 @@ var SelectAsyncField = function SelectAsyncField(props) {
|
|
|
2566
2566
|
options: items.map(function (r) {
|
|
2567
2567
|
return {
|
|
2568
2568
|
value: r.id,
|
|
2569
|
-
label: r.name
|
|
2569
|
+
label: r.name,
|
|
2570
|
+
extra: r.extra
|
|
2570
2571
|
};
|
|
2571
2572
|
}),
|
|
2572
2573
|
hasMore: items.length * filtersPage < totalCount,
|
|
@@ -2597,7 +2598,7 @@ var SelectAsyncField = function SelectAsyncField(props) {
|
|
|
2597
2598
|
isMulti: props.isMulti,
|
|
2598
2599
|
name: props.name,
|
|
2599
2600
|
placeholder: props.placeholder,
|
|
2600
|
-
className: "basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
|
|
2601
|
+
className: (props.noBorders ? 'no-border' : '') + " basic-multi-select " + (props.className ? props.className : '') + " " + (props.invalid ? 'has-error' : ''),
|
|
2601
2602
|
classNamePrefix: "custom-select select",
|
|
2602
2603
|
onChange: function onChange(option) {
|
|
2603
2604
|
props.onChange && props.onChange(option && option.length > 0 ? option.map(function (o) {
|
|
@@ -2610,7 +2611,9 @@ var SelectAsyncField = function SelectAsyncField(props) {
|
|
|
2610
2611
|
return o.value;
|
|
2611
2612
|
}) : option ? option.value : option, option && option.length > 0 ? option.map(function (o) {
|
|
2612
2613
|
return o.label;
|
|
2613
|
-
}) : option ? option.label : option)
|
|
2614
|
+
}) : option ? option.label : option, option && option.length > 0 ? option.map(function (o) {
|
|
2615
|
+
return o.extra;
|
|
2616
|
+
}) : option ? option.extra : option);
|
|
2614
2617
|
},
|
|
2615
2618
|
selectRef: props.inputRef,
|
|
2616
2619
|
isDisabled: props.disabled,
|
|
@@ -3092,14 +3095,14 @@ var ModalComponent = function ModalComponent(props) {
|
|
|
3092
3095
|
}, React__default.createElement(material.Box, {
|
|
3093
3096
|
display: "flex",
|
|
3094
3097
|
alignItems: "center"
|
|
3095
|
-
}, props.title, props.onHide && React__default.createElement(material.Box, {
|
|
3098
|
+
}, props.title, props.onHide && props.crossAvailable && React__default.createElement(material.Box, {
|
|
3096
3099
|
sx: {
|
|
3097
3100
|
margin: '-1rem -1rem -1rem auto'
|
|
3098
3101
|
}
|
|
3099
3102
|
}, React__default.createElement(material.IconButton, {
|
|
3100
3103
|
"aria-label": "close",
|
|
3101
3104
|
onClick: props.onHide
|
|
3102
|
-
}, React__default.createElement(iconsMaterial.Close, null))))), React__default.createElement(material.DialogContent, {
|
|
3105
|
+
}, React__default.createElement(iconsMaterial.Close, null))))), props.children && React__default.createElement(material.DialogContent, {
|
|
3103
3106
|
sx: {
|
|
3104
3107
|
overflowY: 'unset'
|
|
3105
3108
|
},
|
|
@@ -3123,6 +3126,7 @@ ModalComponent.defaultProps = {
|
|
|
3123
3126
|
fullWidth: true,
|
|
3124
3127
|
loading: false,
|
|
3125
3128
|
dividers: true,
|
|
3129
|
+
crossAvailable: true,
|
|
3126
3130
|
buttonActionsAlign: 'flex-end'
|
|
3127
3131
|
};
|
|
3128
3132
|
|