@m4l/components 9.2.23 → 9.2.25
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/@types/types.d.ts +8 -0
- package/components/DataGrid/tests/useSortColumnsRows.test.d.ts +1 -0
- package/components/PrintingSystem/PrintingSystem.d.ts +30 -0
- package/components/PrintingSystem/PrintingSystem.js +40 -25
- package/components/PrintingSystem/PrintingSystem.styles.d.ts +2 -0
- package/components/PrintingSystem/PrintingSystem.styles.js +263 -0
- package/components/PrintingSystem/classes/index.d.ts +14 -14
- package/components/PrintingSystem/classes/index.js +2 -40
- package/components/PrintingSystem/constants.d.ts +1 -0
- package/components/PrintingSystem/constants.js +4 -0
- package/components/PrintingSystem/slots/PrintingSystemEnum.d.ts +23 -0
- package/components/PrintingSystem/slots/PrintingSystemEnum.js +27 -0
- package/components/PrintingSystem/slots/PrintingSystemSlots.d.ts +63 -0
- package/components/PrintingSystem/slots/PrintingSystemSlots.js +111 -0
- package/components/PrintingSystem/subcomponents/BodyNode/index.d.ts +6 -1
- package/components/PrintingSystem/subcomponents/BodyNode/index.js +3 -5
- package/components/PrintingSystem/subcomponents/ChartNode/index.d.ts +6 -1
- package/components/PrintingSystem/subcomponents/ChartNode/index.js +3 -1
- package/components/PrintingSystem/subcomponents/DividerNode/index.d.ts +5 -1
- package/components/PrintingSystem/subcomponents/DividerNode/index.js +3 -1
- package/components/PrintingSystem/subcomponents/FooterNode/index.d.ts +6 -1
- package/components/PrintingSystem/subcomponents/FooterNode/index.js +3 -5
- package/components/PrintingSystem/subcomponents/GridNode/index.d.ts +6 -1
- package/components/PrintingSystem/subcomponents/GridNode/index.js +30 -24
- package/components/PrintingSystem/subcomponents/HeaderNode/index.d.ts +6 -1
- package/components/PrintingSystem/subcomponents/HeaderNode/index.js +3 -5
- package/components/PrintingSystem/subcomponents/ImageNode/index.d.ts +7 -1
- package/components/PrintingSystem/subcomponents/ImageNode/index.js +1 -4
- package/components/PrintingSystem/subcomponents/PageNode/index.d.ts +1 -1
- package/components/PrintingSystem/subcomponents/PageNode/index.js +3 -5
- package/components/PrintingSystem/subcomponents/Pager/index.d.ts +4 -1
- package/components/PrintingSystem/subcomponents/Pager/index.js +1 -4
- package/components/PrintingSystem/subcomponents/PaperNode/index.d.ts +4 -1
- package/components/PrintingSystem/subcomponents/PaperNode/index.js +34 -13
- package/components/PrintingSystem/subcomponents/PropertyValueNode/index.d.ts +4 -1
- package/components/PrintingSystem/subcomponents/PropertyValueNode/index.js +12 -16
- package/components/PrintingSystem/subcomponents/QRImageNode/index.d.ts +4 -1
- package/components/PrintingSystem/subcomponents/SectionNode/index.d.ts +1 -1
- package/components/PrintingSystem/subcomponents/SectionNode/index.js +3 -5
- package/components/PrintingSystem/subcomponents/TextBoxNode/index.d.ts +4 -1
- package/components/PrintingSystem/subcomponents/TextBoxNode/index.js +4 -9
- package/components/PrintingSystem/tests/PrintingSystem.test.d.ts +1 -0
- package/components/PrintingSystem/tests/mocks/sourceData.d.ts +440 -0
- package/components/PrintingSystem/tests/mocks/templateData.d.ts +2 -0
- package/components/PrintingSystem/types.d.ts +26 -1
- package/package.json +1 -1
- package/storybook/components/PrintingSystem/PrintingSystem.stories.d.ts +6 -0
- package/components/PrintingSystem/styles.js +0 -7
package/@types/types.d.ts
CHANGED
|
@@ -142,6 +142,7 @@ import { TimePickerOwnerState,TimePickerSlotsType } from '../components/mui_exte
|
|
|
142
142
|
import { DataGridOwnerState, DataGridSlotsType } from '../components/DataGrid/types';
|
|
143
143
|
import { DynamicFilterAndSortOwnerState, DynamicFilterAndSortSlotsType } from '../hooks/useDynamicFilterAndSort/types';
|
|
144
144
|
import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatusFormatter/types';
|
|
145
|
+
import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
|
|
145
146
|
|
|
146
147
|
declare module '@mui/material/styles' {
|
|
147
148
|
// Define the slots in the theme
|
|
@@ -216,6 +217,7 @@ declare module '@mui/material/styles' {
|
|
|
216
217
|
M4LDataGrid: DataGridSlotsType;
|
|
217
218
|
M4LDynamicFilterAndSort: DynamicFilterAndSortSlotsType;
|
|
218
219
|
M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
|
|
220
|
+
M4LPrintingSystem: PrintingSystemSlotsType;
|
|
219
221
|
}
|
|
220
222
|
interface ComponentsPropsList {
|
|
221
223
|
// Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
|
|
@@ -289,6 +291,7 @@ declare module '@mui/material/styles' {
|
|
|
289
291
|
M4LDataGrid: Partial<DataGridOwnerState>;
|
|
290
292
|
M4LDynamicFilterAndSort: Partial<DynamicFilterAndSortOwnerState>;
|
|
291
293
|
M4LChipStatusFormatter: Partial<ChipStatusFormatterOwnerState>;
|
|
294
|
+
M4LPrintingSystem: Partial<PrintingSystemOwnerState>;
|
|
292
295
|
}
|
|
293
296
|
interface Components {
|
|
294
297
|
M4LDynamicFilter?: {
|
|
@@ -651,5 +654,10 @@ declare module '@mui/material/styles' {
|
|
|
651
654
|
styleOverrides?: ComponentsOverrides<Theme>['M4LChipStatusFormatter'];
|
|
652
655
|
variants?: ComponentsVariants['M4LChipStatusFormatter'];
|
|
653
656
|
};
|
|
657
|
+
M4LPrintingSystem?: {
|
|
658
|
+
defaultProps?: ComponentsPropsList['M4LPrintingSystem'];
|
|
659
|
+
styleOverrides?: ComponentsOverrides<Theme>['M4LPrintingSystem'];
|
|
660
|
+
variants?: ComponentsVariants['M4LPrintingSystem'];
|
|
661
|
+
};
|
|
654
662
|
}
|
|
655
663
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,2 +1,32 @@
|
|
|
1
1
|
import { PrintingSystemProps, PrintingSystemRef } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* PrintingSystem Component
|
|
4
|
+
*
|
|
5
|
+
* Este componente se utiliza para renderizar documentos imprimibles como certificados,
|
|
6
|
+
* reportes o informes técnicos, basándose en una estructura de nodos (`templateData`)
|
|
7
|
+
* y datos de entrada (`sourceData`). Permite generar documentos con múltiples páginas,
|
|
8
|
+
* encabezados, pies de página, secciones, tablas y elementos de texto configurables.
|
|
9
|
+
*
|
|
10
|
+
* Se puede controlar su tamaño y estilo mediante las props `size` y `variant`.
|
|
11
|
+
* También expone una función `GoPrint` mediante `ref` para imprimir el contenido renderizado.
|
|
12
|
+
* @param {PrintingSystemProps} props - Propiedades del componente.
|
|
13
|
+
* @param {RootNode} props.templateData - Estructura jerárquica que describe los nodos a renderizar (header, pages, footer, etc.).
|
|
14
|
+
* @param {SourceData} props.sourceData - Datos utilizados para interpolar valores dentro de los nodos definidos en `templateData`.
|
|
15
|
+
* @param {string} [props.className] - Clases CSS adicionales para aplicar al contenedor raíz del componente.
|
|
16
|
+
* @param {'small' | 'medium' | 'large'} [props.size='medium'] - Tamaño base del documento que puede afectar tipografía y espaciado.
|
|
17
|
+
* @param {'body' | 'compact'} [props.variant='body'] - Variante de estilo del documento.
|
|
18
|
+
* @example
|
|
19
|
+
* const ref = useRef<PrintingSystemRef>(null);
|
|
20
|
+
*
|
|
21
|
+
* <PrintingSystem
|
|
22
|
+
* ref={ref}
|
|
23
|
+
* templateData={templateData}
|
|
24
|
+
* sourceData={sourceData}
|
|
25
|
+
* size="large"
|
|
26
|
+
* variant="compact"
|
|
27
|
+
* />
|
|
28
|
+
*
|
|
29
|
+
* <Button onClick={() => ref.current?.GoPrint()}>Imprimir</Button>
|
|
30
|
+
* @returns {JSX.Element} Componente visual que renderiza una estructura imprimible compuesta por páginas y nodos configurables.
|
|
31
|
+
*/
|
|
2
32
|
export declare const PrintingSystem: import('react').ForwardRefExoticComponent<PrintingSystemProps & import('react').RefAttributes<PrintingSystemRef>>;
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { p as printingSystemUtilityClasses } from "./classes/index.js";
|
|
3
|
-
import { P as PrintingSystemRoot } from "./styles.js";
|
|
4
|
-
import clsx from "clsx";
|
|
5
2
|
import { F as FactoryRender } from "./utils/FactoryRender/index.js";
|
|
6
3
|
import { P as PageRender } from "./utils/PageRender/index.js";
|
|
7
4
|
import { forwardRef, useRef, useImperativeHandle } from "react";
|
|
8
5
|
import { useTheme } from "@mui/material/styles";
|
|
6
|
+
import { P as PrintingSystemRootStyled } from "./slots/PrintingSystemSlots.js";
|
|
7
|
+
import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
|
|
8
|
+
import { P as PRINTING_SYSTEM_KEY_COMPONENT } from "./constants.js";
|
|
9
|
+
import { P as PrintingSystemSlots } from "./slots/PrintingSystemEnum.js";
|
|
10
|
+
import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
|
|
11
|
+
import clsx from "clsx";
|
|
9
12
|
const PrintingSystem = forwardRef((props, ref) => {
|
|
10
|
-
const { templateData: nodeRoot, sourceData, className } = props;
|
|
13
|
+
const { templateData: nodeRoot, sourceData, size = "medium", variant = "body", className, dataTestId } = props;
|
|
11
14
|
const theme = useTheme();
|
|
12
|
-
const classes = printingSystemUtilityClasses();
|
|
13
15
|
const listPages = Array.isArray(nodeRoot.pages) && nodeRoot.pages.length > 0 ? nodeRoot.pages : [];
|
|
14
16
|
const rootRef = useRef(null);
|
|
15
17
|
useImperativeHandle(ref, () => ({
|
|
@@ -27,9 +29,7 @@ const PrintingSystem = forwardRef((props, ref) => {
|
|
|
27
29
|
);
|
|
28
30
|
printDocument.body.appendChild(content.cloneNode(true));
|
|
29
31
|
const styleElement = printDocument.createElement("style");
|
|
30
|
-
styleElement.textContent =
|
|
31
|
-
${theme.components?.M4LPrintingSystem?.styleOverrides}
|
|
32
|
-
`;
|
|
32
|
+
styleElement.textContent = `${theme.components?.M4LPrintingSystem?.styleOverrides}`;
|
|
33
33
|
printDocument.head.appendChild(styleElement);
|
|
34
34
|
printDocument.close();
|
|
35
35
|
printWindow.print();
|
|
@@ -37,25 +37,40 @@ const PrintingSystem = forwardRef((props, ref) => {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
}));
|
|
40
|
+
const ownerState = {
|
|
41
|
+
size,
|
|
42
|
+
variant
|
|
43
|
+
};
|
|
40
44
|
const Header = () => /* @__PURE__ */ jsx(FactoryRender, { data: nodeRoot.header[0] });
|
|
41
45
|
const Footer = () => /* @__PURE__ */ jsx(FactoryRender, { data: nodeRoot.footer[0] });
|
|
42
|
-
return /* @__PURE__ */ jsx(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
47
|
+
PrintingSystemRootStyled,
|
|
48
|
+
{
|
|
49
|
+
className: clsx(getComponentSlotRoot(PRINTING_SYSTEM_KEY_COMPONENT), className),
|
|
50
|
+
...getPropDataTestId(PRINTING_SYSTEM_KEY_COMPONENT, PrintingSystemSlots.root, dataTestId),
|
|
51
|
+
ownerState,
|
|
52
|
+
ref: rootRef,
|
|
53
|
+
role: "region",
|
|
54
|
+
"aria-label": "Printing System",
|
|
55
|
+
children: listPages.map((page, id) => {
|
|
56
|
+
return /* @__PURE__ */ jsx(
|
|
57
|
+
PageRender,
|
|
58
|
+
{
|
|
59
|
+
data: page,
|
|
60
|
+
id: id + 1,
|
|
61
|
+
unitSize: nodeRoot.unitSizes,
|
|
62
|
+
mainColor: nodeRoot.mainColor,
|
|
63
|
+
countPages: listPages.length,
|
|
64
|
+
HeaderGeneral: Header,
|
|
65
|
+
FooterGeneral: Footer,
|
|
66
|
+
sourceData,
|
|
67
|
+
templateData: nodeRoot
|
|
68
|
+
},
|
|
69
|
+
page.key
|
|
70
|
+
);
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
);
|
|
59
74
|
});
|
|
60
75
|
export {
|
|
61
76
|
PrintingSystem as P
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
|
|
2
|
+
const printingSystemStyles = {
|
|
3
|
+
/**
|
|
4
|
+
* Root del componente PrintingSystem
|
|
5
|
+
*/
|
|
6
|
+
root: () => ({
|
|
7
|
+
position: "absolute",
|
|
8
|
+
backgroundColor: "#fff",
|
|
9
|
+
display: "flex",
|
|
10
|
+
flexDirection: "column",
|
|
11
|
+
alignItems: "center",
|
|
12
|
+
overflow: "visible",
|
|
13
|
+
color: "#5C6A6C",
|
|
14
|
+
top: 0,
|
|
15
|
+
left: 0,
|
|
16
|
+
right: 0,
|
|
17
|
+
height: "auto"
|
|
18
|
+
}),
|
|
19
|
+
/**
|
|
20
|
+
* Root del componente PageNode
|
|
21
|
+
*/
|
|
22
|
+
pageNodeRoot: () => ({
|
|
23
|
+
overflow: "hidden",
|
|
24
|
+
display: "flex",
|
|
25
|
+
flexDirection: "column",
|
|
26
|
+
pageBreakBefore: "always",
|
|
27
|
+
backgroundColor: "#fff"
|
|
28
|
+
}),
|
|
29
|
+
/**
|
|
30
|
+
* Root del componente SectionNode
|
|
31
|
+
*/
|
|
32
|
+
sectionNodeRoot: () => ({
|
|
33
|
+
display: "flex",
|
|
34
|
+
overflow: "hidden"
|
|
35
|
+
}),
|
|
36
|
+
/**
|
|
37
|
+
* Root del componente HeaderNode
|
|
38
|
+
*/
|
|
39
|
+
headerNodeRoot: () => ({
|
|
40
|
+
display: "flex",
|
|
41
|
+
justifyContent: "space-between",
|
|
42
|
+
overflow: "hidden"
|
|
43
|
+
}),
|
|
44
|
+
/**
|
|
45
|
+
* Root del componente FooterNode
|
|
46
|
+
*/
|
|
47
|
+
footerNodeRoot: () => ({
|
|
48
|
+
display: "flex",
|
|
49
|
+
justifyContent: "space-between",
|
|
50
|
+
overflow: "hidden"
|
|
51
|
+
}),
|
|
52
|
+
/**
|
|
53
|
+
* Root del componente TextBoxNode
|
|
54
|
+
*/
|
|
55
|
+
textBoxNodeRoot: ({ theme, ownerState }) => ({
|
|
56
|
+
height: "auto",
|
|
57
|
+
...ownerState?.variant === "body" && {
|
|
58
|
+
...getTypographyStyles(
|
|
59
|
+
theme.generalSettings.isMobile,
|
|
60
|
+
ownerState?.size || "medium",
|
|
61
|
+
ownerState?.variant || "body"
|
|
62
|
+
)
|
|
63
|
+
},
|
|
64
|
+
...ownerState?.variant === "h1" && {
|
|
65
|
+
...getTypographyStyles(
|
|
66
|
+
theme.generalSettings.isMobile,
|
|
67
|
+
ownerState?.size || "medium",
|
|
68
|
+
ownerState?.variant || "h1"
|
|
69
|
+
),
|
|
70
|
+
fontSize: `${theme.size.baseSpacings.sp4} !important`
|
|
71
|
+
},
|
|
72
|
+
...ownerState?.variant === "h3" && {
|
|
73
|
+
...getTypographyStyles(
|
|
74
|
+
theme.generalSettings.isMobile,
|
|
75
|
+
ownerState?.size || "medium",
|
|
76
|
+
ownerState?.variant || "subtitle"
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
}),
|
|
80
|
+
/**
|
|
81
|
+
* Root del componente BodyNode
|
|
82
|
+
*/
|
|
83
|
+
bodyNodeRoot: () => ({
|
|
84
|
+
display: "flex",
|
|
85
|
+
flex: "1"
|
|
86
|
+
}),
|
|
87
|
+
/**
|
|
88
|
+
* Root del componente PaperNode
|
|
89
|
+
*/
|
|
90
|
+
paperNodeRoot: () => ({
|
|
91
|
+
display: "flex",
|
|
92
|
+
flexDirection: "column"
|
|
93
|
+
}),
|
|
94
|
+
/**
|
|
95
|
+
* Container de titulos del componente PaperNode
|
|
96
|
+
*/
|
|
97
|
+
paperNodeContainerTitles: ({ theme }) => ({
|
|
98
|
+
display: "flex",
|
|
99
|
+
padding: theme.vars.size.baseSpacings.sp1,
|
|
100
|
+
border: theme.vars.size.baseSpacings["sp0-5"],
|
|
101
|
+
backgroundColor: "#F0F2F2"
|
|
102
|
+
}),
|
|
103
|
+
/**
|
|
104
|
+
* Titulo del componente PaperNode
|
|
105
|
+
*/
|
|
106
|
+
paperNodeTitle: ({ theme, ownerState }) => ({
|
|
107
|
+
...getTypographyStyles(
|
|
108
|
+
theme.generalSettings.isMobile,
|
|
109
|
+
ownerState?.size || "medium",
|
|
110
|
+
ownerState?.variant || "subtitleDens"
|
|
111
|
+
),
|
|
112
|
+
fontSize: `${theme.vars.size.baseSpacings.sp3} !important`,
|
|
113
|
+
color: "#364040"
|
|
114
|
+
}),
|
|
115
|
+
/**
|
|
116
|
+
* Titulo secundario del componente PaperNode
|
|
117
|
+
*/
|
|
118
|
+
paperNodeTitleSecondary: ({ theme, ownerState }) => ({
|
|
119
|
+
...getTypographyStyles(
|
|
120
|
+
theme.generalSettings.isMobile,
|
|
121
|
+
ownerState?.size || "medium",
|
|
122
|
+
ownerState?.variant || "subtitleDens"
|
|
123
|
+
),
|
|
124
|
+
fontSize: `${theme.vars.size.baseSpacings.sp3} !important`,
|
|
125
|
+
paddingLeft: theme.size.baseSpacings["sp2-5"],
|
|
126
|
+
marginLeft: theme.size.baseSpacings["sp2-5"],
|
|
127
|
+
borderLeft: "1px solid",
|
|
128
|
+
borderColor: "#A7B4B9"
|
|
129
|
+
}),
|
|
130
|
+
/**
|
|
131
|
+
* Contenido del componente PaperNode
|
|
132
|
+
*/
|
|
133
|
+
paperNodeContent: ({ theme }) => ({
|
|
134
|
+
padding: theme.vars.size.baseSpacings.sp1,
|
|
135
|
+
display: "flex",
|
|
136
|
+
flexDirection: "column",
|
|
137
|
+
gap: theme.size.baseSpacings["sp0-5"]
|
|
138
|
+
}),
|
|
139
|
+
/**
|
|
140
|
+
* Root del componente PropertyValueNode
|
|
141
|
+
*/
|
|
142
|
+
propertyValueNodeRoot: ({ ownerState }) => ({
|
|
143
|
+
display: "flex",
|
|
144
|
+
flexDirection: ownerState?.direction === "column" ? "column" : "row"
|
|
145
|
+
}),
|
|
146
|
+
/**
|
|
147
|
+
* Titulo del componente PropertyValueNode
|
|
148
|
+
*/
|
|
149
|
+
propertyValueNodeTitle: ({ theme, ownerState }) => ({
|
|
150
|
+
padding: theme.size.baseSpacings.sp1,
|
|
151
|
+
...getTypographyStyles(
|
|
152
|
+
theme.generalSettings.isMobile,
|
|
153
|
+
ownerState?.size || "medium",
|
|
154
|
+
ownerState?.variant || "body"
|
|
155
|
+
),
|
|
156
|
+
color: "#323B3B",
|
|
157
|
+
borderBottom: "1px solid",
|
|
158
|
+
borderColor: "#323B3B"
|
|
159
|
+
}),
|
|
160
|
+
/**
|
|
161
|
+
* Contenido del componente PropertyValueNode
|
|
162
|
+
*/
|
|
163
|
+
propertyValueNodeContent: ({ theme, ownerState }) => ({
|
|
164
|
+
padding: theme.size.baseSpacings.sp1,
|
|
165
|
+
border: "unset",
|
|
166
|
+
...getTypographyStyles(
|
|
167
|
+
theme.generalSettings.isMobile,
|
|
168
|
+
ownerState?.size || "medium",
|
|
169
|
+
ownerState?.variant || "body"
|
|
170
|
+
),
|
|
171
|
+
width: "100%",
|
|
172
|
+
borderBottom: "1px solid",
|
|
173
|
+
borderColor: "#E9EBEB"
|
|
174
|
+
}),
|
|
175
|
+
/**
|
|
176
|
+
* Root del componente DividerNode
|
|
177
|
+
*/
|
|
178
|
+
dividerNodeRoot: () => ({
|
|
179
|
+
backgroundColor: "#c9c9c9",
|
|
180
|
+
"&.M4LPrintingSystem-dividerNodeVertical": {
|
|
181
|
+
width: "1px",
|
|
182
|
+
height: "100%"
|
|
183
|
+
},
|
|
184
|
+
"&.M4LPrintingSystem-dividerNodeHorizontal": {
|
|
185
|
+
height: "1px",
|
|
186
|
+
width: "100%"
|
|
187
|
+
}
|
|
188
|
+
}),
|
|
189
|
+
/**
|
|
190
|
+
* Root del componente GridNode
|
|
191
|
+
*/
|
|
192
|
+
gridNodeRoot: () => ({
|
|
193
|
+
borderCollapse: "collapse",
|
|
194
|
+
width: "100%"
|
|
195
|
+
}),
|
|
196
|
+
/**
|
|
197
|
+
* Celda del componente GridNode
|
|
198
|
+
*/
|
|
199
|
+
gridNodeTd: ({ theme, ownerState }) => ({
|
|
200
|
+
display: "flex",
|
|
201
|
+
alignItems: "center",
|
|
202
|
+
padding: `${theme.size.baseSpacings["sp0-5"]} ${theme.size.baseSpacings["sp2-5"]}`,
|
|
203
|
+
minHeight: theme.size.baseSpacings.sp7,
|
|
204
|
+
height: "auto",
|
|
205
|
+
flex: "1",
|
|
206
|
+
...getTypographyStyles(
|
|
207
|
+
theme.generalSettings.isMobile,
|
|
208
|
+
ownerState?.size || "medium",
|
|
209
|
+
ownerState?.variant || "body"
|
|
210
|
+
),
|
|
211
|
+
color: "#364040"
|
|
212
|
+
}),
|
|
213
|
+
/**
|
|
214
|
+
* Celda del componente GridNode
|
|
215
|
+
*/
|
|
216
|
+
gridNodeTh: ({ theme, ownerState }) => ({
|
|
217
|
+
display: "flex",
|
|
218
|
+
alignItems: "center",
|
|
219
|
+
padding: `${theme.size.baseSpacings["sp0-5"]} ${theme.size.baseSpacings["sp2-5"]}`,
|
|
220
|
+
height: theme.size.baseSpacings.sp10,
|
|
221
|
+
borderRadius: theme.size.baseSpacings["sp2-5"],
|
|
222
|
+
backgroundColor: "#E1E9EA",
|
|
223
|
+
flex: "1",
|
|
224
|
+
...getTypographyStyles(
|
|
225
|
+
theme.generalSettings.isMobile,
|
|
226
|
+
ownerState?.size || "medium",
|
|
227
|
+
ownerState?.variant || "bodyDens"
|
|
228
|
+
),
|
|
229
|
+
color: "#364040",
|
|
230
|
+
"&:first-of-type": {
|
|
231
|
+
borderTopLeftRadius: theme.size.baseSpacings["sp2-5"]
|
|
232
|
+
},
|
|
233
|
+
"&:last-of-type": {
|
|
234
|
+
borderTopRightRadius: theme.size.baseSpacings["sp2-5"],
|
|
235
|
+
flex: 1
|
|
236
|
+
}
|
|
237
|
+
}),
|
|
238
|
+
/**
|
|
239
|
+
* Fila del componente GridNode
|
|
240
|
+
*/
|
|
241
|
+
gridNodeTr: ({ theme }) => ({
|
|
242
|
+
display: "flex",
|
|
243
|
+
width: "100%",
|
|
244
|
+
gap: theme.size.baseSpacings["sp0-5"],
|
|
245
|
+
"&:nth-of-type(odd) .M4LPrintingSystem-gridNodeTd": {
|
|
246
|
+
backgroundColor: "#F0F4F4"
|
|
247
|
+
},
|
|
248
|
+
"&:nth-of-type(even) .M4LPrintingSystem-gridNodeTd": {
|
|
249
|
+
backgroundColor: "#F7FCFC"
|
|
250
|
+
}
|
|
251
|
+
}),
|
|
252
|
+
/**
|
|
253
|
+
* Root del componente ChartNode
|
|
254
|
+
*/
|
|
255
|
+
chartNodeRoot: () => ({
|
|
256
|
+
display: "flex",
|
|
257
|
+
justifyContent: "center",
|
|
258
|
+
maxHeight: "300px"
|
|
259
|
+
})
|
|
260
|
+
};
|
|
261
|
+
export {
|
|
262
|
+
printingSystemStyles as p
|
|
263
|
+
};
|
|
@@ -7,29 +7,29 @@ export declare const printingSystemUtilityClasses: () => {
|
|
|
7
7
|
root: string;
|
|
8
8
|
pageNodeRoot: string;
|
|
9
9
|
sectionNodeRoot: string;
|
|
10
|
-
dividerNodeRoot: string;
|
|
11
|
-
dividerNodeVertical: string;
|
|
12
|
-
dividerNodeHorizontal: string;
|
|
13
|
-
textBoxNodeVariant: string;
|
|
14
|
-
textBoxNodeRoot: string;
|
|
15
10
|
headerNodeRoot: string;
|
|
16
|
-
|
|
11
|
+
footerNodeRoot: string;
|
|
12
|
+
textBoxNodeRoot: string;
|
|
13
|
+
bodyNodeRoot: string;
|
|
17
14
|
paperNodeRoot: string;
|
|
15
|
+
paperNodeContainerTitles: string;
|
|
18
16
|
paperNodeTitle: string;
|
|
17
|
+
paperNodeTitleSecondary: string;
|
|
19
18
|
paperNodeContent: string;
|
|
20
19
|
propertyValueNodeRoot: string;
|
|
21
20
|
propertyValueNodeTitle: string;
|
|
22
21
|
propertyValueNodeContent: string;
|
|
23
|
-
|
|
24
|
-
propertyValueNodeVertical: string;
|
|
22
|
+
dividerNodeRoot: string;
|
|
25
23
|
gridNodeRoot: string;
|
|
26
|
-
|
|
27
|
-
bodyNodeRoot: string;
|
|
28
|
-
paperNodeContainerTitles: string;
|
|
29
|
-
paperNodeTitleSecondary: string;
|
|
30
|
-
pagerNodeRoot: string;
|
|
24
|
+
gridNodeTd: string;
|
|
31
25
|
gridNodeTh: string;
|
|
32
26
|
gridNodeTr: string;
|
|
33
|
-
gridNodeTd: string;
|
|
34
27
|
chartNodeRoot: string;
|
|
28
|
+
dividerNodeVertical: string;
|
|
29
|
+
dividerNodeHorizontal: string;
|
|
30
|
+
textBoxNodeVariant: string;
|
|
31
|
+
imageNodeRoot: string;
|
|
32
|
+
propertyValueNodeHorizontal: string;
|
|
33
|
+
propertyValueNodeVertical: string;
|
|
34
|
+
pagerNodeRoot: string;
|
|
35
35
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { generateUtilityClasses } from "@mui/material";
|
|
2
|
-
import
|
|
2
|
+
import "@mui/base";
|
|
3
3
|
import { c as componentName } from "./constants.js";
|
|
4
|
-
import { g as getComponentUtilityClass } from "../../../utils/getComponentUtilityClass.js";
|
|
5
4
|
const classes = generateUtilityClasses(componentName, [
|
|
6
5
|
/* elements */
|
|
7
6
|
"root",
|
|
@@ -34,43 +33,6 @@ const classes = generateUtilityClasses(componentName, [
|
|
|
34
33
|
"chartNodeRoot"
|
|
35
34
|
/* states or variants of elements */
|
|
36
35
|
]);
|
|
37
|
-
const printingSystemUtilityClasses = () => {
|
|
38
|
-
const slots = {
|
|
39
|
-
root: ["root"],
|
|
40
|
-
pageNodeRoot: ["pageNodeRoot"],
|
|
41
|
-
sectionNodeRoot: ["sectionNodeRoot"],
|
|
42
|
-
dividerNodeRoot: ["dividerNodeRoot"],
|
|
43
|
-
dividerNodeVertical: ["dividerNodeVertical"],
|
|
44
|
-
dividerNodeHorizontal: ["dividerNodeHorizontal"],
|
|
45
|
-
textBoxNodeVariant: ["textBoxNodeVariant"],
|
|
46
|
-
textBoxNodeRoot: ["textBoxNodeRoot"],
|
|
47
|
-
headerNodeRoot: ["headerNodeRoot"],
|
|
48
|
-
imageNodeRoot: ["imageNodeRoot"],
|
|
49
|
-
paperNodeRoot: ["paperNodeRoot"],
|
|
50
|
-
paperNodeTitle: ["paperNodeTitle"],
|
|
51
|
-
paperNodeContent: ["paperNodeContent"],
|
|
52
|
-
propertyValueNodeRoot: ["propertyValueNodeRoot"],
|
|
53
|
-
propertyValueNodeTitle: ["propertyValueNodeTitle"],
|
|
54
|
-
propertyValueNodeContent: ["propertyValueNodeContent"],
|
|
55
|
-
propertyValueNodeHorizontal: ["propertyValueNodeHorizontal"],
|
|
56
|
-
propertyValueNodeVertical: ["propertyValueNodeVertical"],
|
|
57
|
-
gridNodeRoot: ["gridNodeRoot"],
|
|
58
|
-
footerNodeRoot: ["footerNodeRoot"],
|
|
59
|
-
bodyNodeRoot: ["bodyNodeRoot"],
|
|
60
|
-
paperNodeContainerTitles: ["paperNodeContainerTitles"],
|
|
61
|
-
paperNodeTitleSecondary: ["paperNodeTitleSecondary"],
|
|
62
|
-
pagerNodeRoot: ["pagerNodeRoot"],
|
|
63
|
-
gridNodeTh: ["gridNodeTh"],
|
|
64
|
-
gridNodeTr: ["gridNodeTr"],
|
|
65
|
-
gridNodeTd: ["gridNodeTd"],
|
|
66
|
-
chartNodeRoot: ["chartNodeRoot"]
|
|
67
|
-
};
|
|
68
|
-
const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
|
|
69
|
-
return {
|
|
70
|
-
...composedClasses
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
36
|
export {
|
|
74
|
-
classes as c
|
|
75
|
-
printingSystemUtilityClasses as p
|
|
37
|
+
classes as c
|
|
76
38
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PRINTING_SYSTEM_KEY_COMPONENT = "M4LPrintingSystem";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare enum PrintingSystemSlots {
|
|
2
|
+
root = "root",
|
|
3
|
+
pageNodeRoot = "pageNodeRoot",
|
|
4
|
+
sectionNodeRoot = "sectionNodeRoot",
|
|
5
|
+
headerNodeRoot = "headerNodeRoot",
|
|
6
|
+
footerNodeRoot = "footerNodeRoot",
|
|
7
|
+
textBoxNodeRoot = "textBoxNodeRoot",
|
|
8
|
+
bodyNodeRoot = "bodyNodeRoot",
|
|
9
|
+
paperNodeRoot = "paperNodeRoot",
|
|
10
|
+
paperNodeContainerTitles = "paperNodeContainerTitles",
|
|
11
|
+
paperNodeTitle = "paperNodeTitle",
|
|
12
|
+
paperNodeTitleSecondary = "paperNodeTitleSecondary",
|
|
13
|
+
paperNodeContent = "paperNodeContent",
|
|
14
|
+
propertyValueNodeRoot = "propertyValueNodeRoot",
|
|
15
|
+
propertyValueNodeTitle = "propertyValueNodeTitle",
|
|
16
|
+
propertyValueNodeContent = "propertyValueNodeContent",
|
|
17
|
+
dividerNodeRoot = "dividerNodeRoot",
|
|
18
|
+
gridNodeRoot = "gridNodeRoot",
|
|
19
|
+
gridNodeTd = "gridNodeTd",
|
|
20
|
+
gridNodeTh = "gridNodeTh",
|
|
21
|
+
gridNodeTr = "gridNodeTr",
|
|
22
|
+
chartNodeRoot = "chartNodeRoot"
|
|
23
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
var PrintingSystemSlots = /* @__PURE__ */ ((PrintingSystemSlots2) => {
|
|
2
|
+
PrintingSystemSlots2["root"] = "root";
|
|
3
|
+
PrintingSystemSlots2["pageNodeRoot"] = "pageNodeRoot";
|
|
4
|
+
PrintingSystemSlots2["sectionNodeRoot"] = "sectionNodeRoot";
|
|
5
|
+
PrintingSystemSlots2["headerNodeRoot"] = "headerNodeRoot";
|
|
6
|
+
PrintingSystemSlots2["footerNodeRoot"] = "footerNodeRoot";
|
|
7
|
+
PrintingSystemSlots2["textBoxNodeRoot"] = "textBoxNodeRoot";
|
|
8
|
+
PrintingSystemSlots2["bodyNodeRoot"] = "bodyNodeRoot";
|
|
9
|
+
PrintingSystemSlots2["paperNodeRoot"] = "paperNodeRoot";
|
|
10
|
+
PrintingSystemSlots2["paperNodeContainerTitles"] = "paperNodeContainerTitles";
|
|
11
|
+
PrintingSystemSlots2["paperNodeTitle"] = "paperNodeTitle";
|
|
12
|
+
PrintingSystemSlots2["paperNodeTitleSecondary"] = "paperNodeTitleSecondary";
|
|
13
|
+
PrintingSystemSlots2["paperNodeContent"] = "paperNodeContent";
|
|
14
|
+
PrintingSystemSlots2["propertyValueNodeRoot"] = "propertyValueNodeRoot";
|
|
15
|
+
PrintingSystemSlots2["propertyValueNodeTitle"] = "propertyValueNodeTitle";
|
|
16
|
+
PrintingSystemSlots2["propertyValueNodeContent"] = "propertyValueNodeContent";
|
|
17
|
+
PrintingSystemSlots2["dividerNodeRoot"] = "dividerNodeRoot";
|
|
18
|
+
PrintingSystemSlots2["gridNodeRoot"] = "gridNodeRoot";
|
|
19
|
+
PrintingSystemSlots2["gridNodeTd"] = "gridNodeTd";
|
|
20
|
+
PrintingSystemSlots2["gridNodeTh"] = "gridNodeTh";
|
|
21
|
+
PrintingSystemSlots2["gridNodeTr"] = "gridNodeTr";
|
|
22
|
+
PrintingSystemSlots2["chartNodeRoot"] = "chartNodeRoot";
|
|
23
|
+
return PrintingSystemSlots2;
|
|
24
|
+
})(PrintingSystemSlots || {});
|
|
25
|
+
export {
|
|
26
|
+
PrintingSystemSlots as P
|
|
27
|
+
};
|