componentes-sinco 1.0.2-rc.1 → 1.0.2-rc.4
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/index.cjs +3928 -0
- package/dist/index.css +42 -0
- package/dist/index.d.cts +396 -0
- package/dist/index.d.ts +396 -0
- package/dist/index.js +3872 -0
- package/package.json +70 -24
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,3928 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __copyProps = (to, from, except, desc) => {
|
|
42
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(from))
|
|
44
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
45
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return to;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
50
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
51
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
52
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
53
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
54
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
55
|
+
mod
|
|
56
|
+
));
|
|
57
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
|
+
|
|
59
|
+
// src/index.ts
|
|
60
|
+
var src_exports = {};
|
|
61
|
+
__export(src_exports, {
|
|
62
|
+
ADCSincoTheme: () => ADCSincoTheme,
|
|
63
|
+
AdproSincoTheme: () => AdproSincoTheme,
|
|
64
|
+
FooterAction: () => FooterAction,
|
|
65
|
+
PageHeader: () => PageHeader,
|
|
66
|
+
SCAutocomplete: () => SCAutocomplete,
|
|
67
|
+
SCCalendarSwipeable: () => SCCalendarSwipeable,
|
|
68
|
+
SCDataGrid: () => SCDataGrid,
|
|
69
|
+
SCDialog: () => SCDialog,
|
|
70
|
+
SCDrawer: () => SCDrawer,
|
|
71
|
+
SCMenu: () => SCMenu,
|
|
72
|
+
SCModal: () => SCModal,
|
|
73
|
+
SCMultiSelect: () => SCMultiSelect,
|
|
74
|
+
SCTabs: () => SCTabs,
|
|
75
|
+
SCTextArea: () => SCTextArea,
|
|
76
|
+
SCTextField: () => SCTextField,
|
|
77
|
+
SCToastNotification: () => SCToastNotification,
|
|
78
|
+
SincoTheme: () => SincoTheme,
|
|
79
|
+
ToastProgress: () => ToastProgress,
|
|
80
|
+
capitalize: () => capitalize,
|
|
81
|
+
getButtonColor: () => getButtonColor,
|
|
82
|
+
getIcon: () => getIcon,
|
|
83
|
+
getIconComponent: () => getIconComponent2,
|
|
84
|
+
getIconMultiSelect: () => getIconMultiSelect,
|
|
85
|
+
getModalColor: () => getModalColor,
|
|
86
|
+
modalStateConfig: () => modalStateConfig,
|
|
87
|
+
useFilteredItems: () => useFilteredItems,
|
|
88
|
+
useMultiSelectHandlers: () => useMultiSelectHandlers,
|
|
89
|
+
useProgress: () => useProgress
|
|
90
|
+
});
|
|
91
|
+
module.exports = __toCommonJS(src_exports);
|
|
92
|
+
|
|
93
|
+
// src/Components/Drawer/SCDrawer.tsx
|
|
94
|
+
var import_react5 = __toESM(require("react"), 1);
|
|
95
|
+
var import_material4 = require("@mui/material");
|
|
96
|
+
var import_Grid22 = __toESM(require("@mui/material/Grid2"), 1);
|
|
97
|
+
var import_Close = __toESM(require("@mui/icons-material/Close"), 1);
|
|
98
|
+
|
|
99
|
+
// src/Components/Textfield/SCTextField.tsx
|
|
100
|
+
var import_react = __toESM(require("react"), 1);
|
|
101
|
+
var import_material = require("@mui/material");
|
|
102
|
+
var import_Grid2 = __toESM(require("@mui/material/Grid2"), 1);
|
|
103
|
+
var import_icons_material = require("@mui/icons-material");
|
|
104
|
+
|
|
105
|
+
// src/Components/Textfield/Helpers/validateIcon.tsx
|
|
106
|
+
var Muicon = __toESM(require("@mui/icons-material"), 1);
|
|
107
|
+
function getIconComponent(name) {
|
|
108
|
+
if (typeof name !== "string") return name;
|
|
109
|
+
return name in Muicon ? Muicon[name] : void 0;
|
|
110
|
+
}
|
|
111
|
+
function getIconValidation(name) {
|
|
112
|
+
if (typeof name !== "string") {
|
|
113
|
+
return (name == null ? void 0 : name.type) ? "icon" : "text";
|
|
114
|
+
}
|
|
115
|
+
return name in Muicon ? "icon" : "text";
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// src/Components/Textfield/Helpers/validateKeyDown.tsx
|
|
119
|
+
function validateKeyDown(event2, format2) {
|
|
120
|
+
const key = event2.key;
|
|
121
|
+
const target = event2.target;
|
|
122
|
+
if (format2 === "int" && !/^[0-9]$/.test(key)) {
|
|
123
|
+
event2.preventDefault();
|
|
124
|
+
}
|
|
125
|
+
if (format2 === "decimal" && (target.value === "" && key === "." || key === "-" || key === "+")) {
|
|
126
|
+
event2.preventDefault();
|
|
127
|
+
}
|
|
128
|
+
if (target.type === "text") {
|
|
129
|
+
const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ0-9\s_\-.,@]+$/;
|
|
130
|
+
if (!regex.test(key)) {
|
|
131
|
+
event2.preventDefault();
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// src/Components/Textfield/Helpers/validateOnBlur.tsx
|
|
137
|
+
var validateOnBlurField = ({
|
|
138
|
+
value,
|
|
139
|
+
required = false,
|
|
140
|
+
setError,
|
|
141
|
+
onBlur
|
|
142
|
+
}) => (event2) => {
|
|
143
|
+
const isError = !value.trim() && required;
|
|
144
|
+
setError(isError);
|
|
145
|
+
if (onBlur) {
|
|
146
|
+
onBlur(event2);
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
// src/Components/Textfield/SCTextField.tsx
|
|
151
|
+
var SCTextField = ({
|
|
152
|
+
//informativas
|
|
153
|
+
title,
|
|
154
|
+
iconTitle,
|
|
155
|
+
infoTitle,
|
|
156
|
+
label = "",
|
|
157
|
+
placeholder = "",
|
|
158
|
+
infoElement,
|
|
159
|
+
iconInputStart,
|
|
160
|
+
iconInputEnd,
|
|
161
|
+
maxLength,
|
|
162
|
+
//Apariencia
|
|
163
|
+
variant = "outlined",
|
|
164
|
+
format: format2,
|
|
165
|
+
disabled,
|
|
166
|
+
required,
|
|
167
|
+
size,
|
|
168
|
+
width = "100%",
|
|
169
|
+
color,
|
|
170
|
+
background,
|
|
171
|
+
//Funcionales
|
|
172
|
+
state,
|
|
173
|
+
value,
|
|
174
|
+
onChange,
|
|
175
|
+
onBlur,
|
|
176
|
+
onKeyDown
|
|
177
|
+
}) => {
|
|
178
|
+
const inputComponents = {
|
|
179
|
+
outlined: import_material.OutlinedInput,
|
|
180
|
+
filled: import_material.FilledInput,
|
|
181
|
+
standard: import_material.Input
|
|
182
|
+
};
|
|
183
|
+
const InputComponent = inputComponents[variant] || import_material.OutlinedInput;
|
|
184
|
+
let IconInputStartValidation;
|
|
185
|
+
let IconInputEndValidation;
|
|
186
|
+
let IconInputStart;
|
|
187
|
+
let IconInputEnd;
|
|
188
|
+
let IconTitle;
|
|
189
|
+
const [showPassword, setShowPassword] = (0, import_react.useState)(false);
|
|
190
|
+
const [error, setError] = (0, import_react.useState)(false);
|
|
191
|
+
const [anchorInfoTitle, setAnchorInfoTitle] = (0, import_react.useState)(null);
|
|
192
|
+
const openInfoTitle = Boolean(anchorInfoTitle);
|
|
193
|
+
const [anchorInfoElement, setAnchorInfoElement] = (0, import_react.useState)(null);
|
|
194
|
+
const openInfoElement = Boolean(anchorInfoElement);
|
|
195
|
+
(0, import_react.useEffect)(() => {
|
|
196
|
+
if (error) {
|
|
197
|
+
setTimeout(() => {
|
|
198
|
+
setError(false);
|
|
199
|
+
}, 1e3);
|
|
200
|
+
}
|
|
201
|
+
}, [error]);
|
|
202
|
+
if (iconInputStart) {
|
|
203
|
+
IconInputStartValidation = getIconValidation(iconInputStart);
|
|
204
|
+
IconInputStart = getIconComponent(iconInputStart);
|
|
205
|
+
}
|
|
206
|
+
if (iconInputEnd) {
|
|
207
|
+
IconInputEndValidation = getIconValidation(iconInputEnd);
|
|
208
|
+
IconInputEnd = getIconComponent(iconInputEnd);
|
|
209
|
+
}
|
|
210
|
+
if (iconTitle) {
|
|
211
|
+
IconTitle = getIconComponent(iconTitle);
|
|
212
|
+
}
|
|
213
|
+
const handleClickShowPassword = () => setShowPassword((show) => !show);
|
|
214
|
+
const handleMouseDownPassword = (event2) => {
|
|
215
|
+
event2.preventDefault();
|
|
216
|
+
};
|
|
217
|
+
const handleKeyDown = (event2) => {
|
|
218
|
+
validateKeyDown(event2, format2);
|
|
219
|
+
if (onKeyDown) onKeyDown(event2);
|
|
220
|
+
};
|
|
221
|
+
const handleInputChange = (event2) => {
|
|
222
|
+
let valueMax = maxLength ? maxLength + 1 : 50;
|
|
223
|
+
if (event2.target.value.length < valueMax) {
|
|
224
|
+
if (state) {
|
|
225
|
+
state(event2.target.value);
|
|
226
|
+
}
|
|
227
|
+
if (onChange) {
|
|
228
|
+
onChange(event2);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
};
|
|
232
|
+
const handleBlur = validateOnBlurField({ value, required, setError, onBlur });
|
|
233
|
+
const handleOpenInfoTitle = (event2) => {
|
|
234
|
+
setAnchorInfoTitle(event2.currentTarget);
|
|
235
|
+
};
|
|
236
|
+
const handleCloseInfoTitle = () => {
|
|
237
|
+
setAnchorInfoTitle(null);
|
|
238
|
+
};
|
|
239
|
+
const handleOpenInfoElement = (event2) => {
|
|
240
|
+
setAnchorInfoElement(event2.currentTarget);
|
|
241
|
+
};
|
|
242
|
+
const handleCloseInfoElement = () => {
|
|
243
|
+
setAnchorInfoElement(null);
|
|
244
|
+
};
|
|
245
|
+
return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width } }, /* @__PURE__ */ import_react.default.createElement(import_Grid2.default, { container: true, alignItems: "center", mb: 1.25, gap: 0.5 }, iconTitle && IconTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }) : "", title ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { mx: 0.5, variant: "subtitle2", color: "text.secondary" }, title) : "", infoTitle ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
246
|
+
import_icons_material.InfoOutlined,
|
|
247
|
+
{
|
|
248
|
+
color: "action",
|
|
249
|
+
fontSize: "small",
|
|
250
|
+
onMouseEnter: (event2) => handleOpenInfoTitle(event2),
|
|
251
|
+
onMouseLeave: () => handleCloseInfoTitle()
|
|
252
|
+
}
|
|
253
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
254
|
+
import_material.Popover,
|
|
255
|
+
{
|
|
256
|
+
sx: {
|
|
257
|
+
pointerEvents: "none",
|
|
258
|
+
"& .MuiBackdrop-root": {
|
|
259
|
+
backgroundColor: "transparent"
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
open: openInfoTitle,
|
|
263
|
+
anchorEl: anchorInfoTitle,
|
|
264
|
+
onClose: handleCloseInfoTitle,
|
|
265
|
+
anchorOrigin: {
|
|
266
|
+
vertical: "bottom",
|
|
267
|
+
horizontal: "left"
|
|
268
|
+
},
|
|
269
|
+
transformOrigin: {
|
|
270
|
+
vertical: "top",
|
|
271
|
+
horizontal: "left"
|
|
272
|
+
},
|
|
273
|
+
disableRestoreFocus: true
|
|
274
|
+
},
|
|
275
|
+
/* @__PURE__ */ import_react.default.createElement(import_material.Typography, { p: 2 }, infoTitle.text)
|
|
276
|
+
)) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoTitle.text, "data-testid": "test-infoTitle", placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react.default.createElement(
|
|
277
|
+
import_icons_material.InfoOutlined,
|
|
278
|
+
{
|
|
279
|
+
color: "action",
|
|
280
|
+
fontSize: "small"
|
|
281
|
+
}
|
|
282
|
+
))) : ""), /* @__PURE__ */ import_react.default.createElement(import_Grid2.default, { container: true, sx: { flexWrap: "nowrap", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
|
|
283
|
+
import_material.FormControl,
|
|
284
|
+
{
|
|
285
|
+
color,
|
|
286
|
+
fullWidth: true,
|
|
287
|
+
size: size ? size : "medium",
|
|
288
|
+
variant,
|
|
289
|
+
sx: { background: background || "transparent", borderRadius: "4px" }
|
|
290
|
+
},
|
|
291
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
292
|
+
import_material.InputLabel,
|
|
293
|
+
{
|
|
294
|
+
"data-testid": "test-label",
|
|
295
|
+
htmlFor: "",
|
|
296
|
+
required: required && label !== "" ? true : false,
|
|
297
|
+
error,
|
|
298
|
+
disabled: disabled || false
|
|
299
|
+
},
|
|
300
|
+
label ? label : ""
|
|
301
|
+
),
|
|
302
|
+
/* @__PURE__ */ import_react.default.createElement(
|
|
303
|
+
InputComponent,
|
|
304
|
+
{
|
|
305
|
+
size: size ? size : "medium",
|
|
306
|
+
fullWidth: true,
|
|
307
|
+
value,
|
|
308
|
+
error,
|
|
309
|
+
id: label == null ? void 0 : label.replace(/\s+/g, ""),
|
|
310
|
+
disabled: disabled != null ? disabled : false,
|
|
311
|
+
onKeyDown: handleKeyDown,
|
|
312
|
+
onChange: handleInputChange,
|
|
313
|
+
onBlur: handleBlur,
|
|
314
|
+
inputProps: { maxLength: maxLength ? maxLength : 50 },
|
|
315
|
+
type: !showPassword && format2 === "password" ? "password" : (format2 || "text").toUpperCase() === "INT" || (format2 || "text").toUpperCase() === "DECIMAL" ? "number" : "text",
|
|
316
|
+
className: format2 === "password" && !showPassword ? "" : "",
|
|
317
|
+
placeholder,
|
|
318
|
+
startAdornment: iconInputStart ? /* @__PURE__ */ import_react.default.createElement(import_material.InputAdornment, { position: "start" }, IconInputStartValidation === "text" ? iconInputStart : IconInputStart ? /* @__PURE__ */ import_react.default.createElement(IconInputStart, { fontSize: "small" }) : null) : "",
|
|
319
|
+
endAdornment: /* @__PURE__ */ import_react.default.createElement(import_material.InputAdornment, { position: "end" }, format2 === "password" ? /* @__PURE__ */ import_react.default.createElement(
|
|
320
|
+
import_material.IconButton,
|
|
321
|
+
{
|
|
322
|
+
"aria-label": "toggle password visibility",
|
|
323
|
+
onClick: handleClickShowPassword,
|
|
324
|
+
onMouseDown: handleMouseDownPassword,
|
|
325
|
+
edge: "end"
|
|
326
|
+
},
|
|
327
|
+
showPassword ? /* @__PURE__ */ import_react.default.createElement(import_icons_material.VisibilityOff, null) : /* @__PURE__ */ import_react.default.createElement(import_icons_material.Visibility, null)
|
|
328
|
+
) : iconInputEnd === void 0 && infoElement !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
329
|
+
import_icons_material.InfoOutlined,
|
|
330
|
+
{
|
|
331
|
+
"data-testid": "test-infoElement",
|
|
332
|
+
sx: { ml: 0.5 },
|
|
333
|
+
color: "action",
|
|
334
|
+
fontSize: "small",
|
|
335
|
+
component: "svg",
|
|
336
|
+
onMouseEnter: (event2) => handleOpenInfoElement(event2),
|
|
337
|
+
onMouseLeave: () => handleCloseInfoElement()
|
|
338
|
+
}
|
|
339
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
340
|
+
import_material.Popover,
|
|
341
|
+
{
|
|
342
|
+
sx: {
|
|
343
|
+
pointerEvents: "none",
|
|
344
|
+
"& .MuiBackdrop-root": {
|
|
345
|
+
backgroundColor: "transparent"
|
|
346
|
+
}
|
|
347
|
+
},
|
|
348
|
+
open: openInfoElement,
|
|
349
|
+
anchorEl: anchorInfoElement,
|
|
350
|
+
onClose: handleCloseInfoElement,
|
|
351
|
+
anchorOrigin: {
|
|
352
|
+
vertical: "bottom",
|
|
353
|
+
horizontal: "left"
|
|
354
|
+
},
|
|
355
|
+
transformOrigin: {
|
|
356
|
+
vertical: "top",
|
|
357
|
+
horizontal: "left"
|
|
358
|
+
},
|
|
359
|
+
disableRestoreFocus: true
|
|
360
|
+
},
|
|
361
|
+
/* @__PURE__ */ import_react.default.createElement(import_material.Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
|
|
362
|
+
)) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react.default.createElement(
|
|
363
|
+
import_icons_material.InfoOutlined,
|
|
364
|
+
{
|
|
365
|
+
color: "action",
|
|
366
|
+
fontSize: "small"
|
|
367
|
+
}
|
|
368
|
+
))) : iconInputEnd !== void 0 ? IconInputEndValidation === "text" ? iconInputEnd : IconInputEnd ? /* @__PURE__ */ import_react.default.createElement(IconInputEnd, { fontSize: "small" }) : null : ""),
|
|
369
|
+
label: label ? label + (format2 === "password" && !showPassword ? "" : "") : "",
|
|
370
|
+
autoComplete: format2 === "password" ? "new-password" : "off"
|
|
371
|
+
}
|
|
372
|
+
)
|
|
373
|
+
), (iconInputEnd !== void 0 || format2 === "password") && infoElement ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, infoElement.component === "popover" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
|
|
374
|
+
import_icons_material.InfoOutlined,
|
|
375
|
+
{
|
|
376
|
+
"data-testid": "test-infoElement",
|
|
377
|
+
component: "svg",
|
|
378
|
+
sx: { marginLeft: "4px" },
|
|
379
|
+
color: "action",
|
|
380
|
+
fontSize: "small",
|
|
381
|
+
onMouseEnter: (event2) => handleOpenInfoElement(event2),
|
|
382
|
+
onMouseLeave: handleCloseInfoElement
|
|
383
|
+
}
|
|
384
|
+
), /* @__PURE__ */ import_react.default.createElement(
|
|
385
|
+
import_material.Popover,
|
|
386
|
+
{
|
|
387
|
+
sx: { pointerEvents: "none" },
|
|
388
|
+
open: openInfoElement,
|
|
389
|
+
anchorEl: anchorInfoElement,
|
|
390
|
+
onClose: handleCloseInfoElement,
|
|
391
|
+
anchorOrigin: {
|
|
392
|
+
vertical: "bottom",
|
|
393
|
+
horizontal: "left"
|
|
394
|
+
},
|
|
395
|
+
transformOrigin: {
|
|
396
|
+
vertical: "top",
|
|
397
|
+
horizontal: "left"
|
|
398
|
+
},
|
|
399
|
+
disableRestoreFocus: true
|
|
400
|
+
},
|
|
401
|
+
/* @__PURE__ */ import_react.default.createElement(import_material.Typography, { "data-testid": "test-popover-text", p: 2 }, infoElement.text)
|
|
402
|
+
)) : /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: infoElement.text, placement: "bottom-end", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react.default.createElement(
|
|
403
|
+
import_icons_material.InfoOutlined,
|
|
404
|
+
{
|
|
405
|
+
sx: { marginLeft: "4px" },
|
|
406
|
+
color: "action",
|
|
407
|
+
fontSize: "small"
|
|
408
|
+
}
|
|
409
|
+
))) : ""));
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
// src/Components/ToastNotification/SCToastNotification.tsx
|
|
413
|
+
var import_react3 = __toESM(require("react"), 1);
|
|
414
|
+
var import_material2 = require("@mui/material");
|
|
415
|
+
var import_icons_material2 = require("@mui/icons-material");
|
|
416
|
+
|
|
417
|
+
// src/Components/ToastNotification/useProgress.ts
|
|
418
|
+
var import_react2 = require("react");
|
|
419
|
+
var useProgress = (timeProgress, lote) => {
|
|
420
|
+
const [progress, setProgress] = (0, import_react2.useState)(0);
|
|
421
|
+
(0, import_react2.useEffect)(() => {
|
|
422
|
+
const interval = setInterval(() => {
|
|
423
|
+
setProgress((prev) => {
|
|
424
|
+
if (prev >= 100) {
|
|
425
|
+
clearInterval(interval);
|
|
426
|
+
}
|
|
427
|
+
if (lote) {
|
|
428
|
+
const nextProgress = prev + lote;
|
|
429
|
+
return nextProgress <= 100 ? nextProgress : 100;
|
|
430
|
+
} else {
|
|
431
|
+
return prev + 1;
|
|
432
|
+
}
|
|
433
|
+
});
|
|
434
|
+
}, timeProgress * 10);
|
|
435
|
+
return () => {
|
|
436
|
+
clearInterval(interval);
|
|
437
|
+
};
|
|
438
|
+
}, [timeProgress, lote]);
|
|
439
|
+
return {
|
|
440
|
+
progress
|
|
441
|
+
};
|
|
442
|
+
};
|
|
443
|
+
var ToastProgress = (timeProgress) => {
|
|
444
|
+
const [progress, setProgress] = (0, import_react2.useState)(100);
|
|
445
|
+
(0, import_react2.useEffect)(() => {
|
|
446
|
+
const interval = setInterval(() => {
|
|
447
|
+
setProgress((prev) => {
|
|
448
|
+
if (prev <= 0) {
|
|
449
|
+
clearInterval(interval);
|
|
450
|
+
}
|
|
451
|
+
return prev - 1;
|
|
452
|
+
});
|
|
453
|
+
}, timeProgress * 10);
|
|
454
|
+
return () => {
|
|
455
|
+
clearInterval(interval);
|
|
456
|
+
};
|
|
457
|
+
}, [timeProgress]);
|
|
458
|
+
return {
|
|
459
|
+
progressToast: progress
|
|
460
|
+
};
|
|
461
|
+
};
|
|
462
|
+
|
|
463
|
+
// src/Components/ToastNotification/SCToastNotification.tsx
|
|
464
|
+
var SCToastNotification = (toast) => {
|
|
465
|
+
var _a;
|
|
466
|
+
const [stateOptions, setStateOptions] = (0, import_react3.useState)(true);
|
|
467
|
+
const [stateToast, setStateToast] = (0, import_react3.useState)(true);
|
|
468
|
+
const timeProgress = toast.time || 10;
|
|
469
|
+
const { progress } = useProgress(timeProgress);
|
|
470
|
+
const toastColorConfig = toast.type || "info";
|
|
471
|
+
const toastIconOption = {
|
|
472
|
+
success: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.CheckCircleRounded, { color: "success" }),
|
|
473
|
+
error: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.ErrorRounded, { color: "error" }),
|
|
474
|
+
warning: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.WarningRounded, { color: "warning" }),
|
|
475
|
+
info: /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.InfoRounded, { color: "info" })
|
|
476
|
+
};
|
|
477
|
+
const acciones = [...toast.actions || [{ text: "Action", fn: () => {
|
|
478
|
+
alert("");
|
|
479
|
+
} }, { text: "Consultar", fn: () => {
|
|
480
|
+
} }]];
|
|
481
|
+
const ToastIconConfig = toastIconOption[toast.type];
|
|
482
|
+
const closeToast = () => {
|
|
483
|
+
setStateToast(false);
|
|
484
|
+
};
|
|
485
|
+
const toggleToastOptions = () => {
|
|
486
|
+
setStateOptions((prevShowOptions) => !prevShowOptions);
|
|
487
|
+
};
|
|
488
|
+
(0, import_react3.useEffect)(() => {
|
|
489
|
+
progress >= 100 && setStateToast(false);
|
|
490
|
+
}, [progress]);
|
|
491
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, stateToast && /* @__PURE__ */ import_react3.default.createElement(
|
|
492
|
+
import_material2.Stack,
|
|
493
|
+
{
|
|
494
|
+
position: "fixed",
|
|
495
|
+
zIndex: 1400,
|
|
496
|
+
right: 16,
|
|
497
|
+
top: 16,
|
|
498
|
+
width: 370,
|
|
499
|
+
sx: {
|
|
500
|
+
boxShadow: (theme) => theme.shadows[8]
|
|
501
|
+
}
|
|
502
|
+
},
|
|
503
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
504
|
+
import_material2.Box,
|
|
505
|
+
{
|
|
506
|
+
padding: 1.5,
|
|
507
|
+
gap: 1.5,
|
|
508
|
+
display: "flex",
|
|
509
|
+
alignItems: "center",
|
|
510
|
+
sx: {
|
|
511
|
+
backgroundColor: {
|
|
512
|
+
success: "success.50",
|
|
513
|
+
error: "error.50",
|
|
514
|
+
warning: "warning.50",
|
|
515
|
+
info: "info.50"
|
|
516
|
+
}[toastColorConfig]
|
|
517
|
+
}
|
|
518
|
+
},
|
|
519
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
520
|
+
import_material2.Stack,
|
|
521
|
+
{
|
|
522
|
+
p: 1,
|
|
523
|
+
gap: 1,
|
|
524
|
+
borderRadius: 50,
|
|
525
|
+
bgcolor: {
|
|
526
|
+
success: "success.100",
|
|
527
|
+
error: "error.100",
|
|
528
|
+
warning: "warning.100",
|
|
529
|
+
info: "info.100"
|
|
530
|
+
}[(_a = toast.type) != null ? _a : "info"]
|
|
531
|
+
},
|
|
532
|
+
/* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, null, ToastIconConfig)
|
|
533
|
+
),
|
|
534
|
+
/* @__PURE__ */ import_react3.default.createElement(import_material2.Divider, { orientation: "vertical", flexItem: true }),
|
|
535
|
+
/* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { width: 285 }, /* @__PURE__ */ import_react3.default.createElement(
|
|
536
|
+
import_material2.Stack,
|
|
537
|
+
{
|
|
538
|
+
justifyContent: "space-between",
|
|
539
|
+
flexDirection: "row",
|
|
540
|
+
alignItems: "center"
|
|
541
|
+
},
|
|
542
|
+
/* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { variant: "subtitle2", color: "text.primary" }, toast.title),
|
|
543
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
544
|
+
import_material2.IconButton,
|
|
545
|
+
{
|
|
546
|
+
size: "small",
|
|
547
|
+
"data-testid": "close-icon",
|
|
548
|
+
onClick: closeToast
|
|
549
|
+
},
|
|
550
|
+
/* @__PURE__ */ import_react3.default.createElement(import_icons_material2.Close, { fontSize: "small" })
|
|
551
|
+
)
|
|
552
|
+
), /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { gap: 0.5 }, /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { color: "text.primary", variant: "body2" }, toast.subtitle), !stateOptions && toast.listITems && toast.listITems.length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, null, toast.listITems.map((element, i) => /* @__PURE__ */ import_react3.default.createElement(import_material2.Typography, { variant: "caption", key: i }, "\u2022 ", element)))), /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { justifyContent: "flex-end", flexDirection: "row", gap: 0.5 }, toast.actions && toast.actions.length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_material2.Stack, { flexDirection: "row", gap: 0.5 }, toast.actions.map((button, index) => /* @__PURE__ */ import_react3.default.createElement(
|
|
553
|
+
import_material2.Button,
|
|
554
|
+
{
|
|
555
|
+
key: index,
|
|
556
|
+
color: toast.type === "info" ? "info" : toast.type === "success" ? "success" : toast.type === "error" ? "error" : "warning",
|
|
557
|
+
variant: "text",
|
|
558
|
+
onClick: button.fn,
|
|
559
|
+
disabled: button.disabled || false,
|
|
560
|
+
size: "small"
|
|
561
|
+
},
|
|
562
|
+
button.text.charAt(0).toUpperCase() + button.text.slice(1).toLowerCase()
|
|
563
|
+
))), toast.seeMore && /* @__PURE__ */ import_react3.default.createElement(
|
|
564
|
+
import_material2.Button,
|
|
565
|
+
{
|
|
566
|
+
onClick: toggleToastOptions,
|
|
567
|
+
size: "small",
|
|
568
|
+
variant: "text",
|
|
569
|
+
color: toastColorConfig
|
|
570
|
+
},
|
|
571
|
+
stateOptions ? "Ver m\xE1s" : "Ver menos",
|
|
572
|
+
stateOptions ? /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.KeyboardArrowDown, null) : /* @__PURE__ */ import_react3.default.createElement(import_icons_material2.KeyboardArrowUp, null)
|
|
573
|
+
)))
|
|
574
|
+
),
|
|
575
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
576
|
+
import_material2.LinearProgress,
|
|
577
|
+
{
|
|
578
|
+
sx: {
|
|
579
|
+
".MuiLinearProgress-bar": {
|
|
580
|
+
transition: "0.1s linear !important",
|
|
581
|
+
transform: "scaleX(-1)"
|
|
582
|
+
}
|
|
583
|
+
},
|
|
584
|
+
color: toastColorConfig,
|
|
585
|
+
variant: "determinate",
|
|
586
|
+
value: 100 - progress
|
|
587
|
+
}
|
|
588
|
+
)
|
|
589
|
+
));
|
|
590
|
+
};
|
|
591
|
+
|
|
592
|
+
// src/Components/TextArea/Helpers/validateIcon.tsx
|
|
593
|
+
var MuiIcons = __toESM(require("@mui/icons-material"), 1);
|
|
594
|
+
function getIcon(name) {
|
|
595
|
+
if (!name || !(name in MuiIcons)) {
|
|
596
|
+
return null;
|
|
597
|
+
}
|
|
598
|
+
return MuiIcons[name];
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
// src/Components/TextArea/SCTextArea.tsx
|
|
602
|
+
var import_react4 = __toESM(require("react"), 1);
|
|
603
|
+
var import_material3 = require("@mui/material");
|
|
604
|
+
var import_icons_material3 = require("@mui/icons-material");
|
|
605
|
+
var SCTextArea = ({
|
|
606
|
+
//informativas
|
|
607
|
+
title,
|
|
608
|
+
iconTitle,
|
|
609
|
+
infoTitle,
|
|
610
|
+
label = "",
|
|
611
|
+
placeholder,
|
|
612
|
+
maxLength = 200,
|
|
613
|
+
//apariencia
|
|
614
|
+
variant,
|
|
615
|
+
disabled,
|
|
616
|
+
required,
|
|
617
|
+
width = "100%",
|
|
618
|
+
rows = 3,
|
|
619
|
+
colorTitle,
|
|
620
|
+
background,
|
|
621
|
+
//funcionales
|
|
622
|
+
state,
|
|
623
|
+
value,
|
|
624
|
+
onBlur
|
|
625
|
+
}) => {
|
|
626
|
+
const [helperCount, setHelperCount] = (0, import_react4.useState)(0);
|
|
627
|
+
const [stateError, setStateError] = (0, import_react4.useState)(false);
|
|
628
|
+
const [anchorInfoTitle, setAnchorInfoTitle] = import_react4.default.useState(null);
|
|
629
|
+
const openInfoTitle = Boolean(anchorInfoTitle);
|
|
630
|
+
(0, import_react4.useEffect)(() => {
|
|
631
|
+
setHelperCount(value == null ? void 0 : value.length);
|
|
632
|
+
}, [value]);
|
|
633
|
+
const IconTitle = getIcon(iconTitle);
|
|
634
|
+
const handleBlur = (event2) => {
|
|
635
|
+
if (required && value.trim() === "") {
|
|
636
|
+
setStateError(true);
|
|
637
|
+
setTimeout(() => {
|
|
638
|
+
setStateError(false);
|
|
639
|
+
}, 1e3);
|
|
640
|
+
return;
|
|
641
|
+
}
|
|
642
|
+
if (onBlur) {
|
|
643
|
+
onBlur(event2);
|
|
644
|
+
}
|
|
645
|
+
};
|
|
646
|
+
const handleOpenInfoTitle = (event2) => {
|
|
647
|
+
setAnchorInfoTitle(event2.currentTarget);
|
|
648
|
+
};
|
|
649
|
+
const handleCloseInfoTitle = () => {
|
|
650
|
+
setAnchorInfoTitle(null);
|
|
651
|
+
};
|
|
652
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { width } }, /* @__PURE__ */ import_react4.default.createElement(import_material3.Grid2, { container: true, sx: { alignItems: "center" }, gap: 0.5 }, iconTitle && IconTitle && /* @__PURE__ */ import_react4.default.createElement(import_material3.SvgIcon, { color: "action", fontSize: "small", component: IconTitle }), title && /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { color: colorTitle || "text.secondary", variant: "subtitle2" }, title), infoTitle ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, infoTitle.component === "popover" ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
653
|
+
import_icons_material3.InfoOutlined,
|
|
654
|
+
{
|
|
655
|
+
color: "action",
|
|
656
|
+
fontSize: "small",
|
|
657
|
+
onMouseEnter: (event2) => handleOpenInfoTitle(event2),
|
|
658
|
+
onMouseLeave: () => handleCloseInfoTitle()
|
|
659
|
+
}
|
|
660
|
+
), /* @__PURE__ */ import_react4.default.createElement(
|
|
661
|
+
import_material3.Popover,
|
|
662
|
+
{
|
|
663
|
+
sx: { pointerEvents: "none" },
|
|
664
|
+
open: openInfoTitle,
|
|
665
|
+
anchorEl: anchorInfoTitle,
|
|
666
|
+
onClose: handleCloseInfoTitle,
|
|
667
|
+
anchorOrigin: {
|
|
668
|
+
vertical: "bottom",
|
|
669
|
+
horizontal: "left"
|
|
670
|
+
},
|
|
671
|
+
transformOrigin: {
|
|
672
|
+
vertical: "top",
|
|
673
|
+
horizontal: "left"
|
|
674
|
+
},
|
|
675
|
+
disableRestoreFocus: true
|
|
676
|
+
},
|
|
677
|
+
/* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { sx: { p: 2 } }, infoTitle.text)
|
|
678
|
+
)) : /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: infoTitle.text, placement: "bottom-start", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react4.default.createElement(
|
|
679
|
+
import_icons_material3.InfoOutlined,
|
|
680
|
+
{
|
|
681
|
+
color: "action",
|
|
682
|
+
fontSize: "small"
|
|
683
|
+
}
|
|
684
|
+
))) : ""), /* @__PURE__ */ import_react4.default.createElement(import_material3.Stack, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
685
|
+
import_material3.TextField,
|
|
686
|
+
{
|
|
687
|
+
required,
|
|
688
|
+
placeholder,
|
|
689
|
+
error: stateError,
|
|
690
|
+
variant,
|
|
691
|
+
sx: { mt: "10px", background: background || "transparent", borderRadius: "4px" },
|
|
692
|
+
id: "outlined-multiline-static",
|
|
693
|
+
label,
|
|
694
|
+
multiline: true,
|
|
695
|
+
disabled,
|
|
696
|
+
rows,
|
|
697
|
+
value,
|
|
698
|
+
onBlur: handleBlur,
|
|
699
|
+
onChange: (e) => {
|
|
700
|
+
if (state) {
|
|
701
|
+
state(e.target.value.substring(0, maxLength));
|
|
702
|
+
}
|
|
703
|
+
},
|
|
704
|
+
autoComplete: "off"
|
|
705
|
+
}
|
|
706
|
+
)), /* @__PURE__ */ import_react4.default.createElement(import_material3.Stack, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
707
|
+
import_material3.Typography,
|
|
708
|
+
{
|
|
709
|
+
variant: "caption",
|
|
710
|
+
color: "text.secondary",
|
|
711
|
+
mr: 1,
|
|
712
|
+
mt: 1,
|
|
713
|
+
align: "right"
|
|
714
|
+
},
|
|
715
|
+
helperCount + "/" + maxLength
|
|
716
|
+
))));
|
|
717
|
+
};
|
|
718
|
+
|
|
719
|
+
// src/Components/Drawer/Helpers/Utils.tsx
|
|
720
|
+
var Muicon2 = __toESM(require("@mui/icons-material"), 1);
|
|
721
|
+
var import_icons_material4 = require("@mui/icons-material");
|
|
722
|
+
var getIcon2 = (iconName) => {
|
|
723
|
+
if (iconName && iconName in Muicon2) {
|
|
724
|
+
return Muicon2[iconName];
|
|
725
|
+
}
|
|
726
|
+
return import_icons_material4.FilterListOutlined;
|
|
727
|
+
};
|
|
728
|
+
var cleanInputs = (arrayElements) => {
|
|
729
|
+
var _a, _b;
|
|
730
|
+
for (let i = 0; i < arrayElements.length; i++) {
|
|
731
|
+
if (arrayElements[i].component === void 0) {
|
|
732
|
+
(_b = (_a = arrayElements[i]).state) == null ? void 0 : _b.call(_a, "");
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
};
|
|
736
|
+
|
|
737
|
+
// src/Components/Drawer/Helpers/validateInput.tsx
|
|
738
|
+
var validateInputs = (arrayElements, onError, onSuccess) => {
|
|
739
|
+
var _a;
|
|
740
|
+
let requiredValues = 0;
|
|
741
|
+
let filledValues = 0;
|
|
742
|
+
for (let i = 0; i < arrayElements.length; i++) {
|
|
743
|
+
if (arrayElements[i].component === void 0) {
|
|
744
|
+
if (arrayElements[i].required) {
|
|
745
|
+
requiredValues++;
|
|
746
|
+
}
|
|
747
|
+
if (arrayElements[i].required && ((_a = arrayElements[i].value) == null ? void 0 : _a.trim()) !== "") {
|
|
748
|
+
filledValues++;
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
if (requiredValues === filledValues) {
|
|
753
|
+
onSuccess();
|
|
754
|
+
} else {
|
|
755
|
+
onError({
|
|
756
|
+
type: "error",
|
|
757
|
+
title: "Algunos campos son requeridos",
|
|
758
|
+
time: 10
|
|
759
|
+
});
|
|
760
|
+
}
|
|
761
|
+
};
|
|
762
|
+
|
|
763
|
+
// src/generales/capitalize.tsx
|
|
764
|
+
function capitalize(text) {
|
|
765
|
+
return text.charAt(0).toUpperCase() + text.slice(1);
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
// src/Components/Drawer/SCDrawer.tsx
|
|
769
|
+
var SCDrawer = ({
|
|
770
|
+
//informativas
|
|
771
|
+
title,
|
|
772
|
+
arrayElements = [],
|
|
773
|
+
actions,
|
|
774
|
+
buttonDrawer,
|
|
775
|
+
//Apariencia
|
|
776
|
+
colorTitle,
|
|
777
|
+
anchor = "left",
|
|
778
|
+
width,
|
|
779
|
+
//Funcionales
|
|
780
|
+
open
|
|
781
|
+
}) => {
|
|
782
|
+
var _a;
|
|
783
|
+
const [drawerOpen, setDrawerOpen] = import_react5.default.useState(open);
|
|
784
|
+
const [toast, setToast] = import_react5.default.useState(null);
|
|
785
|
+
const handleDrawerClose = () => {
|
|
786
|
+
setDrawerOpen(false);
|
|
787
|
+
};
|
|
788
|
+
const toggleDrawer = (newOpen) => () => {
|
|
789
|
+
setDrawerOpen(newOpen);
|
|
790
|
+
};
|
|
791
|
+
const ButtonIcon = getIcon2(buttonDrawer == null ? void 0 : buttonDrawer.icon);
|
|
792
|
+
const setToastWithDelay = (toastContent) => {
|
|
793
|
+
setToast(null);
|
|
794
|
+
setTimeout(() => {
|
|
795
|
+
setToast(toastContent);
|
|
796
|
+
}, 10);
|
|
797
|
+
};
|
|
798
|
+
const inputValidation = () => validateInputs(arrayElements, setToastWithDelay, handleDrawerClose);
|
|
799
|
+
const clean = () => cleanInputs(arrayElements);
|
|
800
|
+
actions = actions != null ? actions : [{ text: "Limpiar", fn: clean }, { text: "Consultar", fn: inputValidation }];
|
|
801
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, toast && /* @__PURE__ */ import_react5.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react5.default.createElement(
|
|
802
|
+
import_material4.Button,
|
|
803
|
+
{
|
|
804
|
+
"data-testid": "test-buttonDrawer",
|
|
805
|
+
sx: { textTransform: "capitalize" },
|
|
806
|
+
color: buttonDrawer == null ? void 0 : buttonDrawer.color,
|
|
807
|
+
onClick: toggleDrawer(true),
|
|
808
|
+
size: "small",
|
|
809
|
+
variant: (buttonDrawer == null ? void 0 : buttonDrawer.variant) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.variant : "text",
|
|
810
|
+
startIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "left" || !(buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) ? /* @__PURE__ */ import_react5.default.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null,
|
|
811
|
+
endIcon: (buttonDrawer == null ? void 0 : buttonDrawer.iconPosition) === "right" ? /* @__PURE__ */ import_react5.default.createElement(ButtonIcon, { color: (buttonDrawer == null ? void 0 : buttonDrawer.color) != void 0 ? buttonDrawer == null ? void 0 : buttonDrawer.color : "primary" }) : null
|
|
812
|
+
},
|
|
813
|
+
capitalize((_a = buttonDrawer == null ? void 0 : buttonDrawer.text) != null ? _a : "Drawer")
|
|
814
|
+
), /* @__PURE__ */ import_react5.default.createElement(
|
|
815
|
+
import_material4.Drawer,
|
|
816
|
+
{
|
|
817
|
+
open: drawerOpen,
|
|
818
|
+
onClose: toggleDrawer(false),
|
|
819
|
+
anchor: anchor != null ? anchor : "left",
|
|
820
|
+
sx: {
|
|
821
|
+
"& .MuiDrawer-paper": {
|
|
822
|
+
width: width != null ? width : "450px",
|
|
823
|
+
boxSizing: "border-box",
|
|
824
|
+
borderRadius: anchor !== "right" ? "0px 4px 4px 0px" : "4px 0px 0px 4px"
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
},
|
|
828
|
+
/* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { flexDirection: "column", height: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_Grid22.default, { container: true, sx: { backgroundColor: "secondary.main", alignItems: "center", height: "42px", textAlign: "left", padding: "10px 12px 10px 12px", justifyContent: "space-between", alignContent: "center" } }, /* @__PURE__ */ import_react5.default.createElement(import_material4.Typography, { variant: "h6", color: colorTitle || "text.primary" }, title != null ? title : "Personaliza tu b\xFAsqueda"), /* @__PURE__ */ import_react5.default.createElement(import_material4.IconButton, { onClick: handleDrawerClose }, /* @__PURE__ */ import_react5.default.createElement(import_Close.default, { color: "action", "data-testid": "test-button-close" }))), /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { alignItems: "flex-start", height: "100%", gap: "16px", flex: 1, overflow: "auto", padding: "12px 16px 12px 16px" }, arrayElements == null ? void 0 : arrayElements.map((arrayElement, index) => {
|
|
829
|
+
var _a2, _b;
|
|
830
|
+
return /* @__PURE__ */ import_react5.default.createElement(
|
|
831
|
+
import_material4.Box,
|
|
832
|
+
{
|
|
833
|
+
key: `Stack_${(_a2 = arrayElement.type) != null ? _a2 : ""} ${(_b = arrayElement.label) != null ? _b : ""}${index}`,
|
|
834
|
+
sx: { width: "100%" }
|
|
835
|
+
},
|
|
836
|
+
arrayElement.component ? /* @__PURE__ */ import_react5.default.createElement(import_material4.Stack, { direction: "row", alignItems: "left", gap: 1 }, arrayElement.component) : arrayElement.type === "textField" ? /* @__PURE__ */ import_react5.default.createElement(
|
|
837
|
+
SCTextField,
|
|
838
|
+
{
|
|
839
|
+
title: arrayElement.title,
|
|
840
|
+
iconTitle: arrayElement.iconTitle,
|
|
841
|
+
infoTitle: arrayElement.infoTitle,
|
|
842
|
+
label: arrayElement.label,
|
|
843
|
+
placeholder: arrayElement.placeholder,
|
|
844
|
+
infoElement: arrayElement.infoElement,
|
|
845
|
+
iconInputStart: arrayElement.iconInputStart,
|
|
846
|
+
iconInputEnd: arrayElement.iconInputEnd,
|
|
847
|
+
maxLength: arrayElement.maxLength,
|
|
848
|
+
variant: arrayElement.variant,
|
|
849
|
+
format: arrayElement.format,
|
|
850
|
+
disabled: arrayElement.disabled,
|
|
851
|
+
required: arrayElement.required,
|
|
852
|
+
size: arrayElement.size,
|
|
853
|
+
width: arrayElement.width,
|
|
854
|
+
color: arrayElement.color,
|
|
855
|
+
background: arrayElement.background,
|
|
856
|
+
state: arrayElement.state,
|
|
857
|
+
value: arrayElement.value || "",
|
|
858
|
+
onChange: arrayElement.onChange,
|
|
859
|
+
onBlur: arrayElement.onBlur,
|
|
860
|
+
onKeyDown: arrayElement.onKeyDown
|
|
861
|
+
}
|
|
862
|
+
) : arrayElement.type === "textArea" ? /* @__PURE__ */ import_react5.default.createElement(
|
|
863
|
+
SCTextArea,
|
|
864
|
+
{
|
|
865
|
+
title: arrayElement.title,
|
|
866
|
+
iconTitle: arrayElement.iconTitle,
|
|
867
|
+
infoTitle: arrayElement.infoTitle,
|
|
868
|
+
label: arrayElement.label,
|
|
869
|
+
placeholder: arrayElement.placeholder,
|
|
870
|
+
maxLength: arrayElement.maxLength,
|
|
871
|
+
variant: arrayElement.variant,
|
|
872
|
+
disabled: arrayElement.disabled,
|
|
873
|
+
required: arrayElement.required,
|
|
874
|
+
width: arrayElement.width,
|
|
875
|
+
rows: arrayElement.rows,
|
|
876
|
+
background: arrayElement.background,
|
|
877
|
+
state: arrayElement.state,
|
|
878
|
+
value: arrayElement.value || "",
|
|
879
|
+
onBlur: arrayElement.onBlur
|
|
880
|
+
}
|
|
881
|
+
) : null
|
|
882
|
+
);
|
|
883
|
+
})), actions != void 0 && actions.length > 0 ? /* @__PURE__ */ import_react5.default.createElement(
|
|
884
|
+
import_Grid22.default,
|
|
885
|
+
{
|
|
886
|
+
container: true,
|
|
887
|
+
bgcolor: "background.default",
|
|
888
|
+
gap: 2,
|
|
889
|
+
padding: "9px 16px 9px 16px",
|
|
890
|
+
height: "42px",
|
|
891
|
+
alignItems: "center",
|
|
892
|
+
justifyContent: actions.length > 1 ? "space-between" : !anchor && anchor != "right" ? "flex-end" : "flex-start",
|
|
893
|
+
flexDirection: anchor != "right" ? "row-reverse" : "row"
|
|
894
|
+
},
|
|
895
|
+
actions.map((btn, index) => /* @__PURE__ */ import_react5.default.createElement(
|
|
896
|
+
import_material4.Button,
|
|
897
|
+
{
|
|
898
|
+
key: index,
|
|
899
|
+
variant: index === 0 || actions && actions.length < 2 ? "contained" : "text",
|
|
900
|
+
color: "primary",
|
|
901
|
+
onClick: btn.fn,
|
|
902
|
+
disabled: btn.disabled || false,
|
|
903
|
+
size: "small"
|
|
904
|
+
},
|
|
905
|
+
btn.text
|
|
906
|
+
))
|
|
907
|
+
) : "")
|
|
908
|
+
));
|
|
909
|
+
};
|
|
910
|
+
|
|
911
|
+
// src/Components/MultiSelect/SCMultiSelect.tsx
|
|
912
|
+
var import_react8 = __toESM(require("react"), 1);
|
|
913
|
+
var import_material5 = require("@mui/material");
|
|
914
|
+
var import_icons_material6 = require("@mui/icons-material");
|
|
915
|
+
|
|
916
|
+
// src/Components/MultiSelect/helpers/useHandlers.tsx
|
|
917
|
+
var import_react6 = require("react");
|
|
918
|
+
function useMultiSelectHandlers() {
|
|
919
|
+
const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
|
|
920
|
+
const [open, setOpen] = (0, import_react6.useState)(false);
|
|
921
|
+
const [selectedItems, setSelectedItems] = (0, import_react6.useState)([]);
|
|
922
|
+
const [filterValue, setFilterValue] = (0, import_react6.useState)("");
|
|
923
|
+
const handleOpen = (0, import_react6.useCallback)((e) => {
|
|
924
|
+
setAnchorEl(e.currentTarget);
|
|
925
|
+
setOpen(true);
|
|
926
|
+
}, []);
|
|
927
|
+
const handleClose = (0, import_react6.useCallback)(() => {
|
|
928
|
+
setAnchorEl(null);
|
|
929
|
+
setOpen(false);
|
|
930
|
+
}, []);
|
|
931
|
+
const handleFilterChange = (0, import_react6.useCallback)(
|
|
932
|
+
(e) => {
|
|
933
|
+
setFilterValue(e.target.value);
|
|
934
|
+
},
|
|
935
|
+
[]
|
|
936
|
+
);
|
|
937
|
+
const handleCheckboxToggle = (0, import_react6.useCallback)((item) => {
|
|
938
|
+
setSelectedItems(
|
|
939
|
+
(prev) => prev.includes(item) ? prev.filter((i) => i !== item) : [...prev, item]
|
|
940
|
+
);
|
|
941
|
+
}, []);
|
|
942
|
+
return {
|
|
943
|
+
anchorEl,
|
|
944
|
+
open,
|
|
945
|
+
selectedItems,
|
|
946
|
+
filterValue,
|
|
947
|
+
setSelectedItems,
|
|
948
|
+
handleOpen,
|
|
949
|
+
handleClose,
|
|
950
|
+
handleFilterChange,
|
|
951
|
+
handleCheckboxToggle,
|
|
952
|
+
setOpen
|
|
953
|
+
};
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
// src/Components/MultiSelect/helpers/Utils.tsx
|
|
957
|
+
var MuiIcons2 = __toESM(require("@mui/icons-material"), 1);
|
|
958
|
+
var import_icons_material5 = require("@mui/icons-material");
|
|
959
|
+
function getIconMultiSelect(name) {
|
|
960
|
+
return name in MuiIcons2 ? MuiIcons2[name] : import_icons_material5.FilterListOutlined;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
// src/Components/MultiSelect/helpers/useFilteredItems.tsx
|
|
964
|
+
var import_react7 = require("react");
|
|
965
|
+
function useFilteredItems(items, filterValue, getItemLabel, selectedItems) {
|
|
966
|
+
const filteredItems = (0, import_react7.useMemo)(
|
|
967
|
+
() => items.filter(
|
|
968
|
+
(item) => getItemLabel(item).toLowerCase().includes(filterValue.toLowerCase())
|
|
969
|
+
),
|
|
970
|
+
[items, filterValue, getItemLabel]
|
|
971
|
+
);
|
|
972
|
+
const sortedItems = (0, import_react7.useMemo)(() => {
|
|
973
|
+
return [
|
|
974
|
+
...filteredItems.filter((item) => selectedItems.includes(item)),
|
|
975
|
+
...filteredItems.filter((item) => !selectedItems.includes(item))
|
|
976
|
+
];
|
|
977
|
+
}, [filteredItems, selectedItems]);
|
|
978
|
+
return { filteredItems, sortedItems };
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
// src/Components/MultiSelect/SCMultiSelect.tsx
|
|
982
|
+
function SCMultiSelect({
|
|
983
|
+
textButton,
|
|
984
|
+
button,
|
|
985
|
+
items,
|
|
986
|
+
topPanel,
|
|
987
|
+
actions,
|
|
988
|
+
dense = false,
|
|
989
|
+
open,
|
|
990
|
+
selectAll = false,
|
|
991
|
+
getItemLabel
|
|
992
|
+
}) {
|
|
993
|
+
var _a, _b;
|
|
994
|
+
const {
|
|
995
|
+
anchorEl,
|
|
996
|
+
open: openMultiselect,
|
|
997
|
+
selectedItems,
|
|
998
|
+
filterValue,
|
|
999
|
+
setSelectedItems,
|
|
1000
|
+
handleOpen,
|
|
1001
|
+
handleClose,
|
|
1002
|
+
handleFilterChange,
|
|
1003
|
+
handleCheckboxToggle,
|
|
1004
|
+
setOpen
|
|
1005
|
+
} = useMultiSelectHandlers();
|
|
1006
|
+
(0, import_react8.useEffect)(() => {
|
|
1007
|
+
if (open !== void 0) {
|
|
1008
|
+
setOpen(open);
|
|
1009
|
+
}
|
|
1010
|
+
}, [open, setOpen]);
|
|
1011
|
+
(0, import_react8.useEffect)(() => {
|
|
1012
|
+
setSelectedItems([]);
|
|
1013
|
+
}, [items, setSelectedItems]);
|
|
1014
|
+
const { filteredItems, sortedItems } = useFilteredItems(items, filterValue, getItemLabel, selectedItems);
|
|
1015
|
+
const Icon = (0, import_react8.useMemo)(() => {
|
|
1016
|
+
var _a2;
|
|
1017
|
+
return getIconMultiSelect((_a2 = button == null ? void 0 : button.icon) != null ? _a2 : "FilterListOutlined");
|
|
1018
|
+
}, [button == null ? void 0 : button.icon]);
|
|
1019
|
+
const handleSelectAll = () => {
|
|
1020
|
+
const allSelected2 = selectedItems.length === filteredItems.length;
|
|
1021
|
+
setSelectedItems(allSelected2 ? [] : filteredItems);
|
|
1022
|
+
};
|
|
1023
|
+
const allSelected = filteredItems.length > 0 && selectedItems.length === filteredItems.length;
|
|
1024
|
+
const resolvedActions = actions != null ? actions : [
|
|
1025
|
+
{ text: "Limpiar", fn: handleClose },
|
|
1026
|
+
{ text: "Aplicar", fn: () => {
|
|
1027
|
+
} }
|
|
1028
|
+
];
|
|
1029
|
+
return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
|
|
1030
|
+
import_material5.Button,
|
|
1031
|
+
{
|
|
1032
|
+
"test-id": "multiselect-button",
|
|
1033
|
+
color: (_a = button == null ? void 0 : button.color) != null ? _a : "primary",
|
|
1034
|
+
onClick: handleOpen,
|
|
1035
|
+
variant: (_b = button == null ? void 0 : button.variant) != null ? _b : "text",
|
|
1036
|
+
size: "small",
|
|
1037
|
+
startIcon: (button == null ? void 0 : button.iconPosition) === "left" || !(button == null ? void 0 : button.iconPosition) ? /* @__PURE__ */ import_react8.default.createElement(Icon, null) : null,
|
|
1038
|
+
endIcon: (button == null ? void 0 : button.iconPosition) === "right" ? /* @__PURE__ */ import_react8.default.createElement(Icon, null) : null
|
|
1039
|
+
},
|
|
1040
|
+
capitalize(textButton != null ? textButton : "MultiSelect")
|
|
1041
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
1042
|
+
import_material5.Popover,
|
|
1043
|
+
{
|
|
1044
|
+
elevation: 8,
|
|
1045
|
+
anchorEl,
|
|
1046
|
+
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1047
|
+
open: openMultiselect,
|
|
1048
|
+
onClose: () => setOpen(false)
|
|
1049
|
+
},
|
|
1050
|
+
/* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { minWidth: "320px", "data-testid": "multiselect-container", bgcolor: "white", boxShadow: 3, borderRadius: 1 }, /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { py: 1, px: 2 }, topPanel != null ? topPanel : /* @__PURE__ */ import_react8.default.createElement(import_material5.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ import_react8.default.createElement(
|
|
1051
|
+
import_material5.TextField,
|
|
1052
|
+
{
|
|
1053
|
+
"data-testid": "multiselect-input",
|
|
1054
|
+
fullWidth: true,
|
|
1055
|
+
size: "small",
|
|
1056
|
+
variant: "outlined",
|
|
1057
|
+
placeholder: "Buscar",
|
|
1058
|
+
value: filterValue,
|
|
1059
|
+
onChange: handleFilterChange,
|
|
1060
|
+
slotProps: {
|
|
1061
|
+
input: {
|
|
1062
|
+
endAdornment: /* @__PURE__ */ import_react8.default.createElement(import_material5.InputAdornment, { position: "end" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.SearchOutlined, { fontSize: "small" }))
|
|
1063
|
+
}
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
))), /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { maxHeight: "300px", overflow: "auto" }, selectAll && /* @__PURE__ */ import_react8.default.createElement(import_material5.MenuItem, { dense, onClick: handleSelectAll }, /* @__PURE__ */ import_react8.default.createElement(import_material5.ListItemIcon, null, /* @__PURE__ */ import_react8.default.createElement(import_material5.Checkbox, { checked: allSelected, color: "primary" })), "Todos los items"), sortedItems.length > 0 ? sortedItems.map((item) => /* @__PURE__ */ import_react8.default.createElement(
|
|
1067
|
+
import_material5.MenuItem,
|
|
1068
|
+
{
|
|
1069
|
+
key: getItemLabel(item),
|
|
1070
|
+
dense,
|
|
1071
|
+
onClick: () => handleCheckboxToggle(item)
|
|
1072
|
+
},
|
|
1073
|
+
/* @__PURE__ */ import_react8.default.createElement(import_material5.ListItemIcon, null, /* @__PURE__ */ import_react8.default.createElement(
|
|
1074
|
+
import_material5.Checkbox,
|
|
1075
|
+
{
|
|
1076
|
+
checked: selectedItems.includes(item),
|
|
1077
|
+
color: "primary"
|
|
1078
|
+
}
|
|
1079
|
+
)),
|
|
1080
|
+
getItemLabel(item)
|
|
1081
|
+
)) : /* @__PURE__ */ import_react8.default.createElement(import_material5.MenuItem, { disabled: true }, "No se encontraron resultados")), /* @__PURE__ */ import_react8.default.createElement(import_material5.Stack, { direction: "row", gap: 1, p: 1, justifyContent: "space-between", bgcolor: "grey.50" }, resolvedActions.map((button2, index) => {
|
|
1082
|
+
var _a2;
|
|
1083
|
+
return /* @__PURE__ */ import_react8.default.createElement(
|
|
1084
|
+
import_material5.Button,
|
|
1085
|
+
{
|
|
1086
|
+
key: index,
|
|
1087
|
+
variant: index === 0 || resolvedActions.length < 2 ? "text" : "contained",
|
|
1088
|
+
onClick: button2.fn,
|
|
1089
|
+
disabled: (_a2 = button2.disabled) != null ? _a2 : false,
|
|
1090
|
+
size: "small"
|
|
1091
|
+
},
|
|
1092
|
+
capitalize(button2.text)
|
|
1093
|
+
);
|
|
1094
|
+
})))
|
|
1095
|
+
));
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
// src/Components/SCDialog.tsx
|
|
1099
|
+
var import_react9 = __toESM(require("react"), 1);
|
|
1100
|
+
var import_material6 = require("@mui/material");
|
|
1101
|
+
var import_Grid23 = __toESM(require("@mui/material/Grid2"), 1);
|
|
1102
|
+
var import_Close2 = __toESM(require("@mui/icons-material/Close"), 1);
|
|
1103
|
+
var Muicon3 = __toESM(require("@mui/icons-material"), 1);
|
|
1104
|
+
var SCDialog = ({ title, iconTitle, subtitle, content, actions, buttonDialog, disableClose, dividers, widthContent, heightContent, background, setShow, show }) => {
|
|
1105
|
+
let i = 0;
|
|
1106
|
+
let iconTitleValidation = "";
|
|
1107
|
+
let IconTitle;
|
|
1108
|
+
let ButtonIcon;
|
|
1109
|
+
const [open, setOpen] = (0, import_react9.useState)(show);
|
|
1110
|
+
(0, import_react9.useEffect)(() => {
|
|
1111
|
+
if (show) {
|
|
1112
|
+
handleOpen();
|
|
1113
|
+
}
|
|
1114
|
+
}, [show]);
|
|
1115
|
+
if ((buttonDialog == null ? void 0 : buttonDialog.icon) != void 0) {
|
|
1116
|
+
if (Muicon3[buttonDialog == null ? void 0 : buttonDialog.icon] == void 0) {
|
|
1117
|
+
ButtonIcon = buttonDialog == null ? void 0 : buttonDialog.icon;
|
|
1118
|
+
} else {
|
|
1119
|
+
ButtonIcon = Muicon3[buttonDialog == null ? void 0 : buttonDialog.icon];
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
if (iconTitle) {
|
|
1123
|
+
if (Muicon3[iconTitle] == void 0) {
|
|
1124
|
+
if (iconTitle && import_react9.default.isValidElement(iconTitle) && iconTitle.type == void 0) {
|
|
1125
|
+
iconTitleValidation = "image";
|
|
1126
|
+
IconTitle = iconTitle;
|
|
1127
|
+
} else {
|
|
1128
|
+
iconTitleValidation = "icon";
|
|
1129
|
+
IconTitle = iconTitle;
|
|
1130
|
+
}
|
|
1131
|
+
} else {
|
|
1132
|
+
iconTitleValidation = "icon";
|
|
1133
|
+
IconTitle = Muicon3[iconTitle];
|
|
1134
|
+
}
|
|
1135
|
+
}
|
|
1136
|
+
const handleOpen = () => setOpen(true);
|
|
1137
|
+
const handleClose = () => {
|
|
1138
|
+
setOpen(false);
|
|
1139
|
+
if (setShow) {
|
|
1140
|
+
setShow(false);
|
|
1141
|
+
}
|
|
1142
|
+
};
|
|
1143
|
+
const dialogActions = actions != null ? actions : [{ text: "Cerrar", fn: handleClose }];
|
|
1144
|
+
content = content != null ? content : { component: /* @__PURE__ */ import_react9.default.createElement(import_material6.Box, null, " Aqui va el contenido ") };
|
|
1145
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", null, buttonDialog ? /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, buttonDialog.text != void 0 ? /* @__PURE__ */ import_react9.default.createElement(import_material6.Tooltip, { placement: "bottom-start", title: buttonDialog.tooltip != void 0 ? buttonDialog.tooltip : "", slotProps: { popper: { modifiers: [{ name: "offset", options: { offset: [0, -14] } }] } } }, /* @__PURE__ */ import_react9.default.createElement(import_material6.Button, { size: "small", color: buttonDialog.color != void 0 ? buttonDialog.color : "primary", variant: (buttonDialog == null ? void 0 : buttonDialog.variant) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.variant : "text", startIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "left" || !(buttonDialog == null ? void 0 : buttonDialog.iconPosition) ? /* @__PURE__ */ import_react9.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", endIcon: (buttonDialog == null ? void 0 : buttonDialog.iconPosition) == "right" ? /* @__PURE__ */ import_react9.default.createElement(ButtonIcon, { color: buttonDialog.color != void 0 ? buttonDialog.color : "primary" }) : "", onClick: handleOpen }, " ", (buttonDialog == null ? void 0 : buttonDialog.text) != void 0 ? buttonDialog.text : "", " ")) : /* @__PURE__ */ import_react9.default.createElement(import_material6.IconButton, { style: { cursor: "pointer" }, onClick: handleOpen }, /* @__PURE__ */ import_react9.default.createElement(import_material6.SvgIcon, { fontSize: "small", color: (buttonDialog == null ? void 0 : buttonDialog.color) != void 0 ? buttonDialog == null ? void 0 : buttonDialog.color : "action", component: ButtonIcon }))) : "", /* @__PURE__ */ import_react9.default.createElement(import_material6.Modal, { open: open || false, onClose: handleClose }, /* @__PURE__ */ import_react9.default.createElement(
|
|
1146
|
+
import_material6.Dialog,
|
|
1147
|
+
{
|
|
1148
|
+
open: open || false,
|
|
1149
|
+
onClose: disableClose ? void 0 : handleClose,
|
|
1150
|
+
maxWidth: "xl",
|
|
1151
|
+
sx: {
|
|
1152
|
+
width: "100% !important",
|
|
1153
|
+
"& .MuiBackdrop-root": {
|
|
1154
|
+
backdropFilter: "blur(0px) !important"
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
},
|
|
1158
|
+
title && /* @__PURE__ */ import_react9.default.createElement(import_material6.DialogTitle, { sx: { m: 0, padding: "8px 16px 8px 16px" }, id: "dialog-title" }, /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, { container: true, size: 12, sx: { justifyContent: "space-between" } }, /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, { container: true, size: 11, sx: { alignItems: "center" } }, iconTitle ? iconTitleValidation == "image" ? /* @__PURE__ */ import_react9.default.createElement(import_material6.Box, { sx: { marginRight: "16px", width: "44px", height: "44px", borderRadius: "1px" } }, /* @__PURE__ */ import_react9.default.createElement("img", { src: IconTitle, width: "44px", height: "44px" })) : /* @__PURE__ */ import_react9.default.createElement(import_material6.SvgIcon, { color: "action", fontSize: "small", component: IconTitle, sx: { marginRight: "16px" } }) : "", /* @__PURE__ */ import_react9.default.createElement(import_Grid23.default, null, /* @__PURE__ */ import_react9.default.createElement(import_material6.Typography, { color: "text.primary", variant: "h6", gutterBottom: true }, title ? title : ""), /* @__PURE__ */ import_react9.default.createElement(import_material6.Typography, { color: "text.secondary", variant: "body2", gutterBottom: true }, subtitle ? subtitle : ""))), disableClose != true ? /* @__PURE__ */ import_react9.default.createElement(import_material6.IconButton, { onClick: handleClose, size: "small", color: "default", sx: { height: 22, width: 22 } }, /* @__PURE__ */ import_react9.default.createElement(import_Close2.default, null)) : "")),
|
|
1159
|
+
/* @__PURE__ */ import_react9.default.createElement(
|
|
1160
|
+
import_material6.DialogContent,
|
|
1161
|
+
{
|
|
1162
|
+
dividers: dividers ? dividers : false,
|
|
1163
|
+
sx: {
|
|
1164
|
+
m: 0,
|
|
1165
|
+
padding: "12px 16px 8px 16px",
|
|
1166
|
+
background: background ? background : "white",
|
|
1167
|
+
height: !heightContent ? "508px" : heightContent,
|
|
1168
|
+
width: widthContent == "extra-small" ? "444px" : widthContent == "small" ? "600px" : widthContent == "medium" ? "900px" : widthContent == "large" ? "1200px" : widthContent == "extra-large" ? "1536px" : "900px"
|
|
1169
|
+
}
|
|
1170
|
+
},
|
|
1171
|
+
content.url ? /* @__PURE__ */ import_react9.default.createElement(
|
|
1172
|
+
"iframe",
|
|
1173
|
+
{
|
|
1174
|
+
style: { border: "none", minWidth: "100%", minHeight: "100%" },
|
|
1175
|
+
id: "inlineFrameExample",
|
|
1176
|
+
title: "Inline Frame Example",
|
|
1177
|
+
src: content.url
|
|
1178
|
+
}
|
|
1179
|
+
) : content.component
|
|
1180
|
+
),
|
|
1181
|
+
dialogActions.length > 0 ? /* @__PURE__ */ import_react9.default.createElement(import_material6.DialogActions, { sx: { gap: 1, m: 0, padding: "12px 16px 12px 16px" } }, dialogActions.map((boton) => /* @__PURE__ */ import_react9.default.createElement(
|
|
1182
|
+
import_material6.Button,
|
|
1183
|
+
{
|
|
1184
|
+
key: i = i + 1,
|
|
1185
|
+
autoFocus: true,
|
|
1186
|
+
variant: i == 1 || dialogActions.length < 2 ? "contained" : "text",
|
|
1187
|
+
color: "primary",
|
|
1188
|
+
size: "small",
|
|
1189
|
+
onClick: boton.fn,
|
|
1190
|
+
disabled: boton.disabled || false
|
|
1191
|
+
},
|
|
1192
|
+
boton.text
|
|
1193
|
+
))) : ""
|
|
1194
|
+
)));
|
|
1195
|
+
};
|
|
1196
|
+
|
|
1197
|
+
// src/Components/SCMenu.tsx
|
|
1198
|
+
var import_react11 = __toESM(require("react"), 1);
|
|
1199
|
+
var import_material7 = require("@mui/material");
|
|
1200
|
+
var import_Grid24 = __toESM(require("@mui/material/Grid2"), 1);
|
|
1201
|
+
|
|
1202
|
+
// src/Components/Hooks/useWindowDimensions.ts
|
|
1203
|
+
var import_react10 = require("react");
|
|
1204
|
+
function getWindowDimensions() {
|
|
1205
|
+
const { innerWidth: width, innerHeight: height } = window;
|
|
1206
|
+
return {
|
|
1207
|
+
width,
|
|
1208
|
+
height
|
|
1209
|
+
};
|
|
1210
|
+
}
|
|
1211
|
+
function useWindowDimensions() {
|
|
1212
|
+
const [windowDimensions, setWindowDimensions] = (0, import_react10.useState)(getWindowDimensions());
|
|
1213
|
+
(0, import_react10.useEffect)(() => {
|
|
1214
|
+
function handleResize() {
|
|
1215
|
+
setWindowDimensions(getWindowDimensions());
|
|
1216
|
+
}
|
|
1217
|
+
window.addEventListener("resize", handleResize);
|
|
1218
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
1219
|
+
}, []);
|
|
1220
|
+
return windowDimensions;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
// src/Components/SCMenu.tsx
|
|
1224
|
+
var Muicon4 = __toESM(require("@mui/icons-material"), 1);
|
|
1225
|
+
var SCMenu = ({ header, options, defaultOption, disable, widthMenu, heightMenu, widthPage }) => {
|
|
1226
|
+
const { height, width } = useWindowDimensions();
|
|
1227
|
+
const menuSize = widthMenu ? parseInt(widthMenu) : 284;
|
|
1228
|
+
const pageSize = widthPage ? parseInt(widthPage) : width - menuSize;
|
|
1229
|
+
const widthContainer = menuSize + pageSize;
|
|
1230
|
+
let heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
|
|
1231
|
+
const [selectedIndex, setSelectedIndex] = import_react11.default.useState("1");
|
|
1232
|
+
const [value, setValue] = import_react11.default.useState("1");
|
|
1233
|
+
import_react11.default.useEffect(() => {
|
|
1234
|
+
heightContainer = heightMenu ? parseInt(heightMenu) : height - 76;
|
|
1235
|
+
}, [height]);
|
|
1236
|
+
import_react11.default.useEffect(() => {
|
|
1237
|
+
if (defaultOption) {
|
|
1238
|
+
handleClickMenusItem(event, void 0);
|
|
1239
|
+
}
|
|
1240
|
+
}, [defaultOption]);
|
|
1241
|
+
options.map(function(option, index, array) {
|
|
1242
|
+
if (option == null ? void 0 : option.iconLeft) {
|
|
1243
|
+
if ((option == null ? void 0 : option.iconLeft.type) == void 0) {
|
|
1244
|
+
option.iconLeft = Muicon4[option == null ? void 0 : option.iconLeft];
|
|
1245
|
+
} else {
|
|
1246
|
+
option;
|
|
1247
|
+
}
|
|
1248
|
+
}
|
|
1249
|
+
if (option == null ? void 0 : option.iconRight) {
|
|
1250
|
+
if ((option == null ? void 0 : option.iconRight.type) == void 0) {
|
|
1251
|
+
option.iconRight = Muicon4[option == null ? void 0 : option.iconRight];
|
|
1252
|
+
} else {
|
|
1253
|
+
option;
|
|
1254
|
+
}
|
|
1255
|
+
}
|
|
1256
|
+
});
|
|
1257
|
+
const handleClickMenusItem = (event2, index) => {
|
|
1258
|
+
if (defaultOption && index == void 0) {
|
|
1259
|
+
setSelectedIndex(defaultOption);
|
|
1260
|
+
setValue(defaultOption);
|
|
1261
|
+
} else if (index != void 0) {
|
|
1262
|
+
setSelectedIndex(String(index + 1));
|
|
1263
|
+
setValue(String(index + 1));
|
|
1264
|
+
}
|
|
1265
|
+
};
|
|
1266
|
+
return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(import_Grid24.default, { container: true, sx: { height: heightContainer, width: widthContainer, flexDirection: "column" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.Paper, { sx: { width: menuSize, height: heightContainer, overflow: "auto" } }, header && header.component, /* @__PURE__ */ import_react11.default.createElement(import_material7.MenuList, { sx: { height: options.length * 45, padding: "8px 0px" } }, options.map((option, index) => /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
|
|
1267
|
+
import_material7.MenuItem,
|
|
1268
|
+
{
|
|
1269
|
+
disabled: disable == true ? true : false,
|
|
1270
|
+
key: index,
|
|
1271
|
+
selected: String(index + 1) === selectedIndex,
|
|
1272
|
+
onClick: (event2) => handleClickMenusItem(event2, index)
|
|
1273
|
+
},
|
|
1274
|
+
option.iconLeft ? /* @__PURE__ */ import_react11.default.createElement(import_material7.ListItemIcon, { sx: { color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconLeft })) : "",
|
|
1275
|
+
/* @__PURE__ */ import_react11.default.createElement(import_Grid24.default, { container: true, size: 12, sx: { maxWidth: 220, flexWrap: "noWrap", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.Typography, { noWrap: true, variant: "caption", color: String(index + 1) === selectedIndex ? "primary" : "active" }, option.name), option.iconRight ? /* @__PURE__ */ import_react11.default.createElement(import_material7.ListItemIcon, { sx: { minWidth: "0px !important", color: String(index + 1) === selectedIndex ? "primary" : "active" } }, /* @__PURE__ */ import_react11.default.createElement(import_material7.SvgIcon, { fontSize: "small", color: String(index + 1) === selectedIndex ? "primary" : "action", component: option.iconRight })) : "")
|
|
1276
|
+
), option.divider == true ? /* @__PURE__ */ import_react11.default.createElement(import_material7.Divider, null) : "")))), /* @__PURE__ */ import_react11.default.createElement(import_Grid24.default, { container: true }, options.map((option, index) => option.page ? String(index + 1) == value ? /* @__PURE__ */ import_react11.default.createElement(import_material7.Box, { sx: { padding: "16px", width: pageSize, height: heightContainer }, key: index }, option.page) : "" : /* @__PURE__ */ import_react11.default.createElement(import_material7.Typography, { color: "error" }, "No se ha configurado el componente a visualizar")))));
|
|
1277
|
+
};
|
|
1278
|
+
|
|
1279
|
+
// src/Components/SCTabs.tsx
|
|
1280
|
+
var import_react12 = __toESM(require("react"), 1);
|
|
1281
|
+
var import_material8 = require("@mui/material");
|
|
1282
|
+
var import_TabPanel = __toESM(require("@mui/lab/TabPanel"), 1);
|
|
1283
|
+
var import_TabContext = __toESM(require("@mui/lab/TabContext"), 1);
|
|
1284
|
+
var Muicon5 = __toESM(require("@mui/icons-material"), 1);
|
|
1285
|
+
var SCTabs = ({ options, defaultOption, typeIcon, background, iconPosition, colorTab, orientation, variant, scrollButtons, children }) => {
|
|
1286
|
+
const [toast, setToast] = import_react12.default.useState(null);
|
|
1287
|
+
let i = 0;
|
|
1288
|
+
let j = 0;
|
|
1289
|
+
let k = 0;
|
|
1290
|
+
let l = 0;
|
|
1291
|
+
let validateTypeIcon = true;
|
|
1292
|
+
const [value, setValue] = import_react12.default.useState("1");
|
|
1293
|
+
(0, import_react12.useEffect)(() => {
|
|
1294
|
+
if (defaultOption) {
|
|
1295
|
+
handleChange(event, void 0);
|
|
1296
|
+
}
|
|
1297
|
+
}, [defaultOption]);
|
|
1298
|
+
options.map(function(option) {
|
|
1299
|
+
const optionsLength = options.length;
|
|
1300
|
+
if (option == null ? void 0 : option.iconOrBadge) {
|
|
1301
|
+
if (typeIcon == "icon") {
|
|
1302
|
+
if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == true) {
|
|
1303
|
+
validateTypeIcon = true;
|
|
1304
|
+
option.iconOrBadge = Muicon5[option == null ? void 0 : option.iconOrBadge];
|
|
1305
|
+
} else {
|
|
1306
|
+
validateTypeIcon = false;
|
|
1307
|
+
setTimeout(() => {
|
|
1308
|
+
setToast({
|
|
1309
|
+
type: "error",
|
|
1310
|
+
title: "Componente SCTabs",
|
|
1311
|
+
subtitle: "En Option todos los iconOrBadge deben ser iconos de MUI, por favor verificar.",
|
|
1312
|
+
time: 50
|
|
1313
|
+
});
|
|
1314
|
+
}, 10);
|
|
1315
|
+
return;
|
|
1316
|
+
}
|
|
1317
|
+
} else if (typeIcon == "badge") {
|
|
1318
|
+
if ((option == null ? void 0 : option.iconOrBadge) in Muicon5 == false) {
|
|
1319
|
+
validateTypeIcon = true;
|
|
1320
|
+
option;
|
|
1321
|
+
} else {
|
|
1322
|
+
validateTypeIcon = false;
|
|
1323
|
+
setTimeout(() => {
|
|
1324
|
+
setToast({
|
|
1325
|
+
type: "error",
|
|
1326
|
+
title: "Componente SCTabs",
|
|
1327
|
+
subtitle: "En Option todos los iconOrBadge deben ser numeros para el badge, por favor verificar.",
|
|
1328
|
+
time: 10
|
|
1329
|
+
});
|
|
1330
|
+
}, 10);
|
|
1331
|
+
return;
|
|
1332
|
+
}
|
|
1333
|
+
}
|
|
1334
|
+
}
|
|
1335
|
+
});
|
|
1336
|
+
const handleChange = (event2, newValue) => {
|
|
1337
|
+
if (defaultOption && newValue == void 0) {
|
|
1338
|
+
setValue(defaultOption);
|
|
1339
|
+
} else if (newValue != void 0) {
|
|
1340
|
+
setValue(newValue);
|
|
1341
|
+
}
|
|
1342
|
+
};
|
|
1343
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, validateTypeIcon == true ? /* @__PURE__ */ import_react12.default.createElement(import_material8.Box, { sx: { height: orientation == "vertical" ? "100%" : "auto", display: "flex", flexDirection: orientation == "vertical" ? "row" : "column" }, id: "tabsitos" }, /* @__PURE__ */ import_react12.default.createElement(import_TabContext.default, { value }, /* @__PURE__ */ import_react12.default.createElement(
|
|
1344
|
+
import_material8.Tabs,
|
|
1345
|
+
{
|
|
1346
|
+
value,
|
|
1347
|
+
onChange: handleChange,
|
|
1348
|
+
variant: variant ? orientation == "vertical" && variant == "fullWidth" ? "standard" : variant : "standard",
|
|
1349
|
+
scrollButtons: scrollButtons == false ? false : true,
|
|
1350
|
+
visibleScrollbar: scrollButtons == false ? true : false,
|
|
1351
|
+
textColor: colorTab,
|
|
1352
|
+
indicatorColor: colorTab,
|
|
1353
|
+
orientation: orientation || "horizontal",
|
|
1354
|
+
sx: { borderBottom: orientation == "vertical" ? 0 : 1, borderRight: orientation == "vertical" ? 1 : 0, borderColor: "divider", background: background || "" }
|
|
1355
|
+
},
|
|
1356
|
+
options.map((option) => /* @__PURE__ */ import_react12.default.createElement(
|
|
1357
|
+
import_material8.Tab,
|
|
1358
|
+
{
|
|
1359
|
+
value: String(i = i + 1),
|
|
1360
|
+
key: j = j + 1,
|
|
1361
|
+
label: option.name || "",
|
|
1362
|
+
disabled: option.disabled || false,
|
|
1363
|
+
iconPosition: iconPosition || "end",
|
|
1364
|
+
icon: typeIcon == "badge" ? /* @__PURE__ */ import_react12.default.createElement(
|
|
1365
|
+
import_material8.Badge,
|
|
1366
|
+
{
|
|
1367
|
+
sx: {
|
|
1368
|
+
width: "20px",
|
|
1369
|
+
height: "20px",
|
|
1370
|
+
"& .MuiBadge-badge": {
|
|
1371
|
+
top: "10px",
|
|
1372
|
+
right: "10px"
|
|
1373
|
+
}
|
|
1374
|
+
},
|
|
1375
|
+
variant: "standard",
|
|
1376
|
+
badgeContent: option.iconOrBadge,
|
|
1377
|
+
color: value == String(i) ? colorTab ? colorTab : "primary" : "default"
|
|
1378
|
+
}
|
|
1379
|
+
) : typeIcon == "icon" ? /* @__PURE__ */ import_react12.default.createElement(import_material8.SvgIcon, { fontSize: "small", component: option.iconOrBadge, color: value == String(i) ? colorTab ? colorTab : "primary" : "action", sx: { width: "20px", height: "20px" } }) : "",
|
|
1380
|
+
sx: { "& .MuiTab-icon": { margin: "0px !important" }, padding: "10px 16px", gap: "4px" }
|
|
1381
|
+
}
|
|
1382
|
+
))
|
|
1383
|
+
), children, options.map((option) => /* @__PURE__ */ import_react12.default.createElement(
|
|
1384
|
+
import_TabPanel.default,
|
|
1385
|
+
{
|
|
1386
|
+
key: k = k + 1,
|
|
1387
|
+
value: String(l = l + 1),
|
|
1388
|
+
sx: { padding: "16px" }
|
|
1389
|
+
},
|
|
1390
|
+
option.page ? option.page : /* @__PURE__ */ import_react12.default.createElement(import_material8.Typography, null, "No se ha configurado el componente a visualizar ")
|
|
1391
|
+
)))) : /* @__PURE__ */ import_react12.default.createElement(import_material8.Box, { sx: { height: "200px" } }, toast && /* @__PURE__ */ import_react12.default.createElement(SCToastNotification, __spreadValues({}, toast))));
|
|
1392
|
+
};
|
|
1393
|
+
|
|
1394
|
+
// src/Components/FooterAction/FooterAction.tsx
|
|
1395
|
+
var import_react13 = __toESM(require("react"), 1);
|
|
1396
|
+
var import_material9 = require("@mui/material");
|
|
1397
|
+
var FooterAction = ({
|
|
1398
|
+
leftContent,
|
|
1399
|
+
rightContent,
|
|
1400
|
+
label,
|
|
1401
|
+
variant
|
|
1402
|
+
}) => {
|
|
1403
|
+
return /* @__PURE__ */ import_react13.default.createElement(
|
|
1404
|
+
import_material9.AppBar,
|
|
1405
|
+
{
|
|
1406
|
+
color: "inherit",
|
|
1407
|
+
sx: { position: variant == "float" ? "relative" : "fixed", left: 0, right: "auto", width: "100%", top: "auto", bottom: 0 }
|
|
1408
|
+
},
|
|
1409
|
+
/* @__PURE__ */ import_react13.default.createElement(
|
|
1410
|
+
import_material9.Toolbar,
|
|
1411
|
+
{
|
|
1412
|
+
id: "footer-toolbar",
|
|
1413
|
+
sx: { gap: 1.5, minHeight: "50px !important" }
|
|
1414
|
+
},
|
|
1415
|
+
leftContent,
|
|
1416
|
+
/* @__PURE__ */ import_react13.default.createElement(import_material9.Box, { flexGrow: 1 }),
|
|
1417
|
+
label && /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "body2", color: "text.secondary" }, label),
|
|
1418
|
+
rightContent
|
|
1419
|
+
)
|
|
1420
|
+
);
|
|
1421
|
+
};
|
|
1422
|
+
|
|
1423
|
+
// src/Components/Modal/Helpers/Data.tsx
|
|
1424
|
+
var import_react14 = __toESM(require("react"), 1);
|
|
1425
|
+
var import_icons_material7 = require("@mui/icons-material");
|
|
1426
|
+
var modalStateConfig = {
|
|
1427
|
+
info: {
|
|
1428
|
+
color: "info",
|
|
1429
|
+
defaultDescription: "Se [sincronizar\xE1n] los datos trabajados en modo offline y se [subir\xE1n] a los servidores.",
|
|
1430
|
+
icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Info, { color: "info", fontSize: "medium" })
|
|
1431
|
+
},
|
|
1432
|
+
delete: {
|
|
1433
|
+
color: "delete",
|
|
1434
|
+
defaultDescription: "[Elemento espec\xEDfico] [dejar\xE1 de existir en todos los lugares donde est\xE9 en uso]. Esta acci\xF3n es irreversible.",
|
|
1435
|
+
icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Info, { color: "error", fontSize: "medium" })
|
|
1436
|
+
},
|
|
1437
|
+
warning: {
|
|
1438
|
+
color: "warning",
|
|
1439
|
+
defaultDescription: "Se descartar\xE1 la [creaci\xF3n] y los cambios se perder\xE1n.",
|
|
1440
|
+
icon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material7.Warning, { color: "warning", fontSize: "medium" })
|
|
1441
|
+
}
|
|
1442
|
+
};
|
|
1443
|
+
|
|
1444
|
+
// src/Components/Modal/Helpers/Utils.tsx
|
|
1445
|
+
var MuiIcons3 = __toESM(require("@mui/icons-material"), 1);
|
|
1446
|
+
var import_icons_material8 = require("@mui/icons-material");
|
|
1447
|
+
var getIconComponent2 = (iconName) => {
|
|
1448
|
+
return iconName && MuiIcons3[iconName] ? MuiIcons3[iconName] : import_icons_material8.FilterListOutlined;
|
|
1449
|
+
};
|
|
1450
|
+
var getModalColor = (state) => {
|
|
1451
|
+
var _a;
|
|
1452
|
+
const colors = {
|
|
1453
|
+
info: "info.100",
|
|
1454
|
+
delete: "error.100",
|
|
1455
|
+
warning: "warning.100"
|
|
1456
|
+
};
|
|
1457
|
+
return (_a = colors[state]) != null ? _a : "warning.100";
|
|
1458
|
+
};
|
|
1459
|
+
var getButtonColor = (state) => {
|
|
1460
|
+
var _a;
|
|
1461
|
+
const colorMap = {
|
|
1462
|
+
info: "info",
|
|
1463
|
+
delete: "error",
|
|
1464
|
+
warning: "warning"
|
|
1465
|
+
};
|
|
1466
|
+
return (_a = colorMap[state]) != null ? _a : "info";
|
|
1467
|
+
};
|
|
1468
|
+
|
|
1469
|
+
// src/Components/Modal/SCModal.tsx
|
|
1470
|
+
var import_react15 = __toESM(require("react"), 1);
|
|
1471
|
+
var import_material10 = require("@mui/material");
|
|
1472
|
+
var import_icons_material9 = require("@mui/icons-material");
|
|
1473
|
+
var SCModal = ({
|
|
1474
|
+
buttonModal,
|
|
1475
|
+
state = "info",
|
|
1476
|
+
open,
|
|
1477
|
+
title,
|
|
1478
|
+
description,
|
|
1479
|
+
action
|
|
1480
|
+
}) => {
|
|
1481
|
+
var _a, _b, _c, _d, _e;
|
|
1482
|
+
const [openModal, setOpenModal] = (0, import_react15.useState)(open != null ? open : false);
|
|
1483
|
+
(0, import_react15.useEffect)(() => {
|
|
1484
|
+
if (open !== void 0) {
|
|
1485
|
+
setOpenModal(open);
|
|
1486
|
+
}
|
|
1487
|
+
}, [open]);
|
|
1488
|
+
const Icon = (0, import_react15.useMemo)(() => getIconComponent2(buttonModal == null ? void 0 : buttonModal.icon), [buttonModal == null ? void 0 : buttonModal.icon]);
|
|
1489
|
+
const handleClose = (0, import_react15.useCallback)(() => setOpenModal(false), []);
|
|
1490
|
+
const toggleModal = (newOpen) => () => setOpenModal(newOpen);
|
|
1491
|
+
const prevAction = (0, import_react15.useMemo)(
|
|
1492
|
+
() => action != null ? action : [{ text: "Cancelar", fn: handleClose }, { text: "Consultar", fn: () => {
|
|
1493
|
+
} }],
|
|
1494
|
+
[action, handleClose]
|
|
1495
|
+
);
|
|
1496
|
+
const { icon, defaultDescription } = modalStateConfig[state];
|
|
1497
|
+
return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
|
|
1498
|
+
import_material10.Button,
|
|
1499
|
+
{
|
|
1500
|
+
"data-testid": "test-buttonModal",
|
|
1501
|
+
color: (_a = buttonModal == null ? void 0 : buttonModal.color) != null ? _a : "primary",
|
|
1502
|
+
onClick: toggleModal(true),
|
|
1503
|
+
variant: (_b = buttonModal == null ? void 0 : buttonModal.variant) != null ? _b : "text",
|
|
1504
|
+
size: (_c = buttonModal == null ? void 0 : buttonModal.size) != null ? _c : "small",
|
|
1505
|
+
startIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "left" && /* @__PURE__ */ import_react15.default.createElement(Icon, null),
|
|
1506
|
+
endIcon: (buttonModal == null ? void 0 : buttonModal.iconPosition) === "right" && /* @__PURE__ */ import_react15.default.createElement(Icon, null)
|
|
1507
|
+
},
|
|
1508
|
+
capitalize((_d = buttonModal == null ? void 0 : buttonModal.text) != null ? _d : "filtrar")
|
|
1509
|
+
), /* @__PURE__ */ import_react15.default.createElement(import_material10.Modal, { open: openModal, onClose: toggleModal(false), sx: { boxShadow: 8 } }, /* @__PURE__ */ import_react15.default.createElement(
|
|
1510
|
+
import_material10.Box,
|
|
1511
|
+
{
|
|
1512
|
+
sx: {
|
|
1513
|
+
position: "absolute",
|
|
1514
|
+
top: "50%",
|
|
1515
|
+
left: "50%",
|
|
1516
|
+
transform: "translate(-50%, -50%)",
|
|
1517
|
+
width: 400,
|
|
1518
|
+
bgcolor: "background.paper",
|
|
1519
|
+
borderRadius: 1,
|
|
1520
|
+
boxShadow: 24
|
|
1521
|
+
}
|
|
1522
|
+
},
|
|
1523
|
+
/* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { direction: "row", alignItems: "center", p: 1, gap: 1.5 }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Box, { display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "50%", height: 36, width: 36, bgcolor: getModalColor(state) }, icon), /* @__PURE__ */ import_react15.default.createElement(import_material10.Typography, { variant: "h6", color: "text.primary" }, title)), /* @__PURE__ */ import_react15.default.createElement(import_material10.IconButton, { onClick: toggleModal(false), "data-testid": "test-buttonClose" }, /* @__PURE__ */ import_react15.default.createElement(import_icons_material9.Close, { color: "action" }))),
|
|
1524
|
+
/* @__PURE__ */ import_react15.default.createElement(import_material10.Stack, { py: 1, px: 3, gap: 1.5 }, /* @__PURE__ */ import_react15.default.createElement(import_material10.Typography, { variant: "body1" }, description || defaultDescription)),
|
|
1525
|
+
action && /* @__PURE__ */ import_react15.default.createElement(
|
|
1526
|
+
import_material10.Stack,
|
|
1527
|
+
{
|
|
1528
|
+
id: "Action",
|
|
1529
|
+
direction: "row",
|
|
1530
|
+
gap: 1,
|
|
1531
|
+
p: 1,
|
|
1532
|
+
justifyContent: "end",
|
|
1533
|
+
bgcolor: "grey.50",
|
|
1534
|
+
sx: { borderRadius: 1 }
|
|
1535
|
+
},
|
|
1536
|
+
/* @__PURE__ */ import_react15.default.createElement(
|
|
1537
|
+
import_material10.Button,
|
|
1538
|
+
{
|
|
1539
|
+
color: "inherit",
|
|
1540
|
+
variant: "text",
|
|
1541
|
+
onClick: handleClose,
|
|
1542
|
+
size: "small"
|
|
1543
|
+
},
|
|
1544
|
+
capitalize("cancelar")
|
|
1545
|
+
),
|
|
1546
|
+
/* @__PURE__ */ import_react15.default.createElement(
|
|
1547
|
+
import_material10.Button,
|
|
1548
|
+
{
|
|
1549
|
+
"data-testid": "test-aceptar",
|
|
1550
|
+
color: getButtonColor(state),
|
|
1551
|
+
variant: "contained",
|
|
1552
|
+
onClick: (_e = action[0]) == null ? void 0 : _e.fn,
|
|
1553
|
+
disabled: false,
|
|
1554
|
+
size: "small"
|
|
1555
|
+
},
|
|
1556
|
+
capitalize(action[0].text)
|
|
1557
|
+
)
|
|
1558
|
+
)
|
|
1559
|
+
)));
|
|
1560
|
+
};
|
|
1561
|
+
|
|
1562
|
+
// src/Components/PageHeader/PageHeader.tsx
|
|
1563
|
+
var import_react16 = __toESM(require("react"), 1);
|
|
1564
|
+
var import_material11 = require("@mui/material");
|
|
1565
|
+
var PageHeader = ({
|
|
1566
|
+
title,
|
|
1567
|
+
subtitle,
|
|
1568
|
+
actions,
|
|
1569
|
+
buttonBack,
|
|
1570
|
+
fixed,
|
|
1571
|
+
shadow = true
|
|
1572
|
+
}) => {
|
|
1573
|
+
return /* @__PURE__ */ import_react16.default.createElement(
|
|
1574
|
+
import_material11.Stack,
|
|
1575
|
+
{
|
|
1576
|
+
"data-testid": "main-container",
|
|
1577
|
+
justifyContent: "center",
|
|
1578
|
+
height: 48,
|
|
1579
|
+
position: fixed ? "fixed" : "relative",
|
|
1580
|
+
width: fixed ? "100%" : "inherit",
|
|
1581
|
+
bgcolor: "background.paper",
|
|
1582
|
+
zIndex: 10,
|
|
1583
|
+
sx: { boxShadow: shadow ? (theme) => theme.shadows[1] : "none" }
|
|
1584
|
+
},
|
|
1585
|
+
/* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { "data-testid": "page-header-content", height: 40, px: 3, pl: buttonBack ? 1 : 3, direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "left-section", direction: "row", alignItems: "center", gap: 1 }, buttonBack, /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "text-section", gap: 0.5 }, /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { "data-testid": "page-header-title", variant: "h6", color: "text.primary" }, title), subtitle && /* @__PURE__ */ import_react16.default.createElement(import_material11.Typography, { "data-testid": "page-header-subtitle", variant: "caption", color: "text.primary" }, subtitle))), actions && /* @__PURE__ */ import_react16.default.createElement(import_material11.Stack, { id: "right-actions", direction: "row", alignItems: "center", gap: 1 }, actions))
|
|
1586
|
+
);
|
|
1587
|
+
};
|
|
1588
|
+
|
|
1589
|
+
// src/Components/SCCalendarSwipeable.tsx
|
|
1590
|
+
var import_react17 = __toESM(require("react"), 1);
|
|
1591
|
+
var import_material12 = require("@mui/material");
|
|
1592
|
+
var import_Grid25 = __toESM(require("@mui/material/Grid2"), 1);
|
|
1593
|
+
var import_AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
|
|
1594
|
+
var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
|
|
1595
|
+
var import_StaticDatePicker = require("@mui/x-date-pickers/StaticDatePicker");
|
|
1596
|
+
var import_locale = require("date-fns/locale");
|
|
1597
|
+
var import_date_fns = require("date-fns");
|
|
1598
|
+
var import_KeyboardDoubleArrowDown = __toESM(require("@mui/icons-material/KeyboardDoubleArrowDown"), 1);
|
|
1599
|
+
var import_KeyboardDoubleArrowUp = __toESM(require("@mui/icons-material/KeyboardDoubleArrowUp"), 1);
|
|
1600
|
+
var SCCalendarSwipeable = ({
|
|
1601
|
+
//informativas
|
|
1602
|
+
//apariencia
|
|
1603
|
+
background,
|
|
1604
|
+
//funcionales
|
|
1605
|
+
setState,
|
|
1606
|
+
state
|
|
1607
|
+
}) => {
|
|
1608
|
+
let convertFecha;
|
|
1609
|
+
const [fecha, setFecha] = (0, import_react17.useState)(/* @__PURE__ */ new Date());
|
|
1610
|
+
const [fechaSeleccionada, setFechaSeleccionada] = (0, import_react17.useState)();
|
|
1611
|
+
const [stateVal, setstateVal] = import_react17.default.useState(/* @__PURE__ */ new Date());
|
|
1612
|
+
const [openCalendar, setOpenCalendar] = import_react17.default.useState(false);
|
|
1613
|
+
const hoy = /* @__PURE__ */ new Date();
|
|
1614
|
+
const inicioSemana = (0, import_date_fns.startOfWeek)(fecha, { weekStartsOn: 0 });
|
|
1615
|
+
const diasSemana = Array.from({ length: 7 }, (_, i) => (0, import_date_fns.addDays)(inicioSemana, i));
|
|
1616
|
+
import_react17.default.useEffect(() => {
|
|
1617
|
+
if (fecha != null) {
|
|
1618
|
+
handleConvertFecha(fecha);
|
|
1619
|
+
}
|
|
1620
|
+
}, [fecha]);
|
|
1621
|
+
const handleConvertFecha = (fecha2) => {
|
|
1622
|
+
if (fecha2) {
|
|
1623
|
+
let day = (fecha2.getDate() < 10 ? "0" : "") + fecha2.getDate();
|
|
1624
|
+
let month = (fecha2.getMonth() + 1 < 10 ? "0" : "") + (fecha2.getMonth() + 1);
|
|
1625
|
+
let year = fecha2.getFullYear();
|
|
1626
|
+
convertFecha = day + "/" + month + "/" + year;
|
|
1627
|
+
setState(convertFecha);
|
|
1628
|
+
setFecha(fecha2);
|
|
1629
|
+
}
|
|
1630
|
+
};
|
|
1631
|
+
const toggleCalendar = (newOpen) => () => {
|
|
1632
|
+
setOpenCalendar(newOpen);
|
|
1633
|
+
};
|
|
1634
|
+
const locale = __spreadValues({}, import_locale.es);
|
|
1635
|
+
return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(import_LocalizationProvider.LocalizationProvider, { dateAdapter: import_AdapterDateFns.AdapterDateFns, adapterLocale: locale }, openCalendar == false ? /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { "data-testid": "calendar-mobile", sx: { width: "100%", background: background ? background : "white", display: "flex", flexDirection: "column", alignItems: "center" } }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "100%", maxWidth: "320px", background: "transparent" } }, /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { container: true, gap: 0.5, sx: {
|
|
1636
|
+
justifyContent: "space-between",
|
|
1637
|
+
padding: "12px 0px",
|
|
1638
|
+
background: "transparent"
|
|
1639
|
+
} }, diasSemana.map((dia) => /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { sx: { width: "36px" }, key: dia.toString() }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "36px", height: "40px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react17.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: "#10184099" } }, (0, import_date_fns.format)(dia, "EEEE", { locale: import_locale.es }).charAt(0).toUpperCase())), /* @__PURE__ */ import_react17.default.createElement(
|
|
1640
|
+
import_material12.Box,
|
|
1641
|
+
{
|
|
1642
|
+
onClick: () => setFecha(dia),
|
|
1643
|
+
sx: {
|
|
1644
|
+
padding: "10px",
|
|
1645
|
+
textAlign: "center",
|
|
1646
|
+
backgroundColor: (0, import_date_fns.isSameDay)(dia, fecha) ? "#2063a0" : "transparent",
|
|
1647
|
+
cursor: "pointer",
|
|
1648
|
+
borderRadius: "50%",
|
|
1649
|
+
//border: '1px solid lightgray',
|
|
1650
|
+
position: "relative"
|
|
1651
|
+
//width: '36px',
|
|
1652
|
+
//height: '36px',
|
|
1653
|
+
}
|
|
1654
|
+
},
|
|
1655
|
+
/* @__PURE__ */ import_react17.default.createElement(import_material12.Typography, { sx: { fontSize: "12px !important", color: (0, import_date_fns.isSameDay)(dia, fecha) ? "white" : "#101840DE" } }, (0, import_date_fns.format)(dia, "d"))
|
|
1656
|
+
)))), /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.IconButton, { "data-testid": "open-calendar-button", onClick: toggleCalendar(true) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowDown.default, null))))) : /* @__PURE__ */ import_react17.default.createElement(import_material12.Box, { sx: { width: "100%", background: "white" } }, /* @__PURE__ */ import_react17.default.createElement(
|
|
1657
|
+
import_StaticDatePicker.StaticDatePicker,
|
|
1658
|
+
{
|
|
1659
|
+
orientation: "landscape",
|
|
1660
|
+
openTo: "day",
|
|
1661
|
+
value: fecha,
|
|
1662
|
+
slotProps: { toolbar: { hidden: true }, actionBar: { actions: [] } },
|
|
1663
|
+
sx: { fontSize: "12px !important", height: "300px !important", background: background ? background : "white", "& .MuiDayCalendar-header": { justifyContent: "space-between" }, "& .MuiDayCalendar-weekContainer": { justifyContent: "space-between" }, "& .MuiPickersCalendarHeader-root": { paddingLeft: "0px", paddingRight: "0px", color: "#10184099" }, "& .MuiPickersDay-root": { fontSize: "12px !important" }, "& .MuiDayCalendar-weekDayLabel": { fontSize: "12px !important" } },
|
|
1664
|
+
onChange: (newValue) => setFecha(newValue)
|
|
1665
|
+
}
|
|
1666
|
+
), /* @__PURE__ */ import_react17.default.createElement(import_Grid25.default, { container: true, justifyContent: "center" }, /* @__PURE__ */ import_react17.default.createElement(import_material12.IconButton, { "data-testid": "close-calendar-button", onClick: toggleCalendar(false) }, /* @__PURE__ */ import_react17.default.createElement(import_KeyboardDoubleArrowUp.default, null))))));
|
|
1667
|
+
};
|
|
1668
|
+
|
|
1669
|
+
// src/Components/SCDataGrid.tsx
|
|
1670
|
+
var import_react18 = __toESM(require("react"), 1);
|
|
1671
|
+
var import_x_data_grid_pro = require("@mui/x-data-grid-pro");
|
|
1672
|
+
var import_x_license_pro = require("@mui/x-license-pro");
|
|
1673
|
+
var import_styles = require("@mui/styles");
|
|
1674
|
+
var useStyles = (0, import_styles.makeStyles)({
|
|
1675
|
+
root: {
|
|
1676
|
+
"& .MuiDataGrid-filler": {
|
|
1677
|
+
display: "none !important"
|
|
1678
|
+
},
|
|
1679
|
+
"& .MuiDataGrid-footerContainer": {
|
|
1680
|
+
minHeight: "26px !important",
|
|
1681
|
+
height: "26px !important"
|
|
1682
|
+
},
|
|
1683
|
+
"& .MuiTablePagination-toolbar": {
|
|
1684
|
+
minHeight: "25px !important",
|
|
1685
|
+
height: "25px !important"
|
|
1686
|
+
},
|
|
1687
|
+
"& .MuiTablePagination-actions .MuiIconButton-root": {
|
|
1688
|
+
padding: "0px !important"
|
|
1689
|
+
},
|
|
1690
|
+
"&.MuiDataGrid-root": {
|
|
1691
|
+
"--DataGrid-topContainerHeight": "0px !important"
|
|
1692
|
+
/* Cambia este valor según tus necesidades */
|
|
1693
|
+
},
|
|
1694
|
+
"MuiDataGrid-root .MuiDataGrid-virtualScrollerContent .MuiDataGrid-row": {
|
|
1695
|
+
"--height": "0px !important",
|
|
1696
|
+
"minHeight": "0px !important",
|
|
1697
|
+
"maxHeight": "0px !important"
|
|
1698
|
+
},
|
|
1699
|
+
"& .MuiDataGrid-cell": {
|
|
1700
|
+
padding: "0 !important"
|
|
1701
|
+
}
|
|
1702
|
+
}
|
|
1703
|
+
});
|
|
1704
|
+
var SCDataGrid = (_a) => {
|
|
1705
|
+
var _b = _a, { data, columns, rowsTable, checkboxSelection, width, height, maxHeight, density, agrupacion, groupingColDef, getTreeDataPath } = _b, props = __objRest(_b, ["data", "columns", "rowsTable", "checkboxSelection", "width", "height", "maxHeight", "density", "agrupacion", "groupingColDef", "getTreeDataPath"]);
|
|
1706
|
+
const apiRef = (0, import_x_data_grid_pro.useGridApiRef)();
|
|
1707
|
+
const classes = useStyles();
|
|
1708
|
+
import_x_license_pro.LicenseInfo.setLicenseKey(
|
|
1709
|
+
"77d49a57fbc5f4af35ddb05c5f1742e0Tz0xMTI3MjgsRT0xNzc4MzcxMTk5MDAwLFM9cHJvLExNPXN1YnNjcmlwdGlvbixQVj1RMy0yMDI0LEtWPTI="
|
|
1710
|
+
);
|
|
1711
|
+
let validationTreeData = getTreeDataPath ? true : false;
|
|
1712
|
+
let paginalion = 10;
|
|
1713
|
+
let valor = 80;
|
|
1714
|
+
let alto = 345;
|
|
1715
|
+
let estilot = "compact";
|
|
1716
|
+
let tamanoEncabezado = density == "compact" ? 24 : density == "standard" ? 36 : density == "comfortable" ? 52 : 24;
|
|
1717
|
+
let tamanoCelda = density == "compact" ? 22 : density == "standard" ? 28 : density == "comfortable" ? 48 : 22;
|
|
1718
|
+
let dataConvert = [];
|
|
1719
|
+
const [groupDataLenght, setGroupDataLengh] = (0, import_react18.useState)(0);
|
|
1720
|
+
checkboxSelection = checkboxSelection || false;
|
|
1721
|
+
const rows = rowsTable ? rowsTable : validationTreeData != false ? parseInt(data.length) : data.length < 10 ? parseInt(data.length) : 10;
|
|
1722
|
+
width = width || "100%";
|
|
1723
|
+
density = density || "compact";
|
|
1724
|
+
agrupacion = agrupacion || false;
|
|
1725
|
+
groupingColDef = groupingColDef || {};
|
|
1726
|
+
getTreeDataPath = getTreeDataPath || void 0;
|
|
1727
|
+
const [pageSize, setPageSize] = (0, import_react18.useState)(rows);
|
|
1728
|
+
const [arrayRows, setArrayRows] = (0, import_react18.useState)([]);
|
|
1729
|
+
const [heightTable, setHeightTable] = (0, import_react18.useState)(height || 0);
|
|
1730
|
+
(0, import_react18.useEffect)(() => {
|
|
1731
|
+
if ((data == null ? void 0 : data.length) > 0) {
|
|
1732
|
+
dataConvertRows(data, void 0);
|
|
1733
|
+
if (validationTreeData) {
|
|
1734
|
+
countGroupedElements(data, getTreeDataPath);
|
|
1735
|
+
}
|
|
1736
|
+
}
|
|
1737
|
+
}, [data]);
|
|
1738
|
+
(0, import_react18.useEffect)(() => {
|
|
1739
|
+
if (groupDataLenght > 0 && validationTreeData == true) {
|
|
1740
|
+
setHeightTable(heightTable ? heightTable : groupDataLenght * tamanoCelda + tamanoEncabezado + 27);
|
|
1741
|
+
} else if (groupDataLenght <= 0 && validationTreeData == false) {
|
|
1742
|
+
setHeightTable(heightTable ? heightTable : rows * tamanoCelda + tamanoEncabezado + 27);
|
|
1743
|
+
}
|
|
1744
|
+
}, [groupDataLenght]);
|
|
1745
|
+
const dataConvertRows = (data2, columnId) => {
|
|
1746
|
+
let dataConvert2 = [];
|
|
1747
|
+
if ((data2 == null ? void 0 : data2.length) > 0) {
|
|
1748
|
+
const dataKeys = Object.keys(data2[0]);
|
|
1749
|
+
data2.map((item) => {
|
|
1750
|
+
const newKeys = {};
|
|
1751
|
+
let i = 0;
|
|
1752
|
+
let id = dataConvert2.length + 1;
|
|
1753
|
+
for (i = 0; i < dataKeys.length; i++) {
|
|
1754
|
+
newKeys[dataKeys[i]] = item[dataKeys[i]];
|
|
1755
|
+
}
|
|
1756
|
+
newKeys.id = columnId ? item[columnId] : id;
|
|
1757
|
+
dataConvert2 = [...dataConvert2, newKeys];
|
|
1758
|
+
});
|
|
1759
|
+
}
|
|
1760
|
+
setArrayRows(dataConvert2);
|
|
1761
|
+
};
|
|
1762
|
+
const isRowSelectable = (params) => params.row.bloqueoChecked == false ? false : true;
|
|
1763
|
+
const [selectionModel, setSelectionModel] = (0, import_react18.useState)([]);
|
|
1764
|
+
const handleSelectionChange = (newSelection) => {
|
|
1765
|
+
console.log(data);
|
|
1766
|
+
console.log(arrayRows);
|
|
1767
|
+
if (groupDataLenght > 0 && validationTreeData == true) {
|
|
1768
|
+
let numberGrouped = 0;
|
|
1769
|
+
let idsRowSelectBefore = [];
|
|
1770
|
+
let idRowSelect = [];
|
|
1771
|
+
for (let i = 0; i < newSelection.length; i++) {
|
|
1772
|
+
if (typeof newSelection[i] === "string") {
|
|
1773
|
+
if (newSelection[i].includes("auto-generated-row-null")) {
|
|
1774
|
+
numberGrouped = i;
|
|
1775
|
+
}
|
|
1776
|
+
} else {
|
|
1777
|
+
idsRowSelectBefore.push(newSelection[i]);
|
|
1778
|
+
}
|
|
1779
|
+
}
|
|
1780
|
+
arrayRows.forEach((array) => {
|
|
1781
|
+
if (typeof newSelection[numberGrouped] === "string") {
|
|
1782
|
+
if (newSelection[numberGrouped].includes(array.name)) {
|
|
1783
|
+
idRowSelect.push(array.id);
|
|
1784
|
+
}
|
|
1785
|
+
}
|
|
1786
|
+
});
|
|
1787
|
+
if (idRowSelect !== null) {
|
|
1788
|
+
const soloEnArr1 = idsRowSelectBefore.filter((elemento) => !idRowSelect.includes(elemento));
|
|
1789
|
+
const hasCommonElements = idsRowSelectBefore.some((element) => idRowSelect.includes(element));
|
|
1790
|
+
if (hasCommonElements == true) {
|
|
1791
|
+
setSelectionModel([...soloEnArr1]);
|
|
1792
|
+
} else {
|
|
1793
|
+
setSelectionModel([...idsRowSelectBefore, ...idRowSelect]);
|
|
1794
|
+
}
|
|
1795
|
+
}
|
|
1796
|
+
} else {
|
|
1797
|
+
setSelectionModel([...newSelection]);
|
|
1798
|
+
}
|
|
1799
|
+
};
|
|
1800
|
+
const countGroupedElements = (row, getTreeDataPath2) => {
|
|
1801
|
+
const groupedCounts = {};
|
|
1802
|
+
data.forEach((row2) => {
|
|
1803
|
+
const path = getTreeDataPath2(row2) || [];
|
|
1804
|
+
const key = path[0];
|
|
1805
|
+
if (!groupedCounts[key]) {
|
|
1806
|
+
groupedCounts[key] = 0;
|
|
1807
|
+
}
|
|
1808
|
+
groupedCounts[key]++;
|
|
1809
|
+
});
|
|
1810
|
+
setGroupDataLengh(Object.keys(groupedCounts).length);
|
|
1811
|
+
return groupedCounts;
|
|
1812
|
+
};
|
|
1813
|
+
const virtualScrollerHeight = validationTreeData ? groupDataLenght * tamanoCelda + 10 : rows * tamanoCelda;
|
|
1814
|
+
return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, heightTable > 0 ? /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", width, maxHeight } }, /* @__PURE__ */ import_react18.default.createElement(
|
|
1815
|
+
import_x_data_grid_pro.DataGridPro,
|
|
1816
|
+
__spreadProps(__spreadValues({
|
|
1817
|
+
apiRef
|
|
1818
|
+
}, props), {
|
|
1819
|
+
rows: arrayRows,
|
|
1820
|
+
columns,
|
|
1821
|
+
density,
|
|
1822
|
+
treeData: validationTreeData,
|
|
1823
|
+
getTreeDataPath,
|
|
1824
|
+
groupingColDef: validationTreeData == true ? groupingColDef : false,
|
|
1825
|
+
pagination: true,
|
|
1826
|
+
initialState: {
|
|
1827
|
+
pagination: { paginationModel: { pageSize: rows } }
|
|
1828
|
+
},
|
|
1829
|
+
checkboxSelection,
|
|
1830
|
+
rowSelectionModel: selectionModel,
|
|
1831
|
+
onRowSelectionModelChange: (newSelection) => handleSelectionChange(newSelection),
|
|
1832
|
+
isRowSelectable,
|
|
1833
|
+
disableRowSelectionOnClick: true,
|
|
1834
|
+
className: classes.root,
|
|
1835
|
+
localeText: {
|
|
1836
|
+
noRowsLabel: "No hay filas",
|
|
1837
|
+
columnMenuLabel: "Men\xFA de columna",
|
|
1838
|
+
footerTotalRows: "Filas Totales:",
|
|
1839
|
+
footerRowSelected: (count) => `${count.toLocaleString()} fila(s) seleccionada(s)`,
|
|
1840
|
+
// Ejemplo de traducción dinámica
|
|
1841
|
+
MuiTablePagination: {
|
|
1842
|
+
labelRowsPerPage: "Filas por p\xE1gina:",
|
|
1843
|
+
labelDisplayedRows: ({ from, to, count }) => `${from}\u2013${to} de ${count !== -1 ? count : `m\xE1s de ${to}`}`
|
|
1844
|
+
}
|
|
1845
|
+
}
|
|
1846
|
+
})
|
|
1847
|
+
))) : "");
|
|
1848
|
+
};
|
|
1849
|
+
|
|
1850
|
+
// src/Components/SCAutocomplete.tsx
|
|
1851
|
+
var import_react19 = __toESM(require("react"), 1);
|
|
1852
|
+
var import_material13 = require("@mui/material");
|
|
1853
|
+
var import_Grid26 = __toESM(require("@mui/material/Grid2"), 1);
|
|
1854
|
+
var import_icons_material10 = require("@mui/icons-material");
|
|
1855
|
+
var Muicon6 = __toESM(require("@mui/icons-material"), 1);
|
|
1856
|
+
function SCAutocomplete({
|
|
1857
|
+
label = "",
|
|
1858
|
+
data,
|
|
1859
|
+
columnGroup,
|
|
1860
|
+
getItemValue,
|
|
1861
|
+
type = "normal",
|
|
1862
|
+
checkMassive = false,
|
|
1863
|
+
deleteType = "button",
|
|
1864
|
+
fnAplicar,
|
|
1865
|
+
required,
|
|
1866
|
+
disabled,
|
|
1867
|
+
background,
|
|
1868
|
+
setState,
|
|
1869
|
+
state
|
|
1870
|
+
}) {
|
|
1871
|
+
const labelContent = `<span class="red-asterisk">* </span>` + label;
|
|
1872
|
+
let group = "";
|
|
1873
|
+
let isSelected = false;
|
|
1874
|
+
const [selectedOptions, setSelectedOptions] = import_react19.default.useState([]);
|
|
1875
|
+
const [prevData, setPrevData] = import_react19.default.useState(data);
|
|
1876
|
+
(0, import_react19.useEffect)(() => {
|
|
1877
|
+
let dataChangeValidation = JSON.stringify(prevData) === JSON.stringify(data);
|
|
1878
|
+
if (dataChangeValidation == false) {
|
|
1879
|
+
setState({ hiddenValue: "-1", textValue: "" });
|
|
1880
|
+
setSelectedOptions([]);
|
|
1881
|
+
setPrevData(data);
|
|
1882
|
+
}
|
|
1883
|
+
}, [data]);
|
|
1884
|
+
(0, import_react19.useEffect)(() => {
|
|
1885
|
+
if (type == "multiselect") {
|
|
1886
|
+
if (state.hiddenValue != "-1") {
|
|
1887
|
+
setSelectedOptions(data.filter(
|
|
1888
|
+
(item) => Array.isArray(state.hiddenValue) ? state.hiddenValue.includes(getItemValue(item).value) : getItemValue(item).value === state.hiddenValue
|
|
1889
|
+
));
|
|
1890
|
+
}
|
|
1891
|
+
}
|
|
1892
|
+
}, [state.hiddenValue]);
|
|
1893
|
+
data.map(function(option, index, array) {
|
|
1894
|
+
if (option == null ? void 0 : option.icon) {
|
|
1895
|
+
if ((option == null ? void 0 : option.icon.type) == void 0) {
|
|
1896
|
+
option.icon = Muicon6[option == null ? void 0 : option.icon];
|
|
1897
|
+
} else {
|
|
1898
|
+
option;
|
|
1899
|
+
}
|
|
1900
|
+
}
|
|
1901
|
+
});
|
|
1902
|
+
const cleanOptions = (event2) => {
|
|
1903
|
+
setState({ hiddenValue: "-1", textValue: "" });
|
|
1904
|
+
setSelectedOptions([]);
|
|
1905
|
+
};
|
|
1906
|
+
const handleCheckAll = (event2) => {
|
|
1907
|
+
if (event2.target.checked) {
|
|
1908
|
+
setSelectedOptions(data);
|
|
1909
|
+
setState({
|
|
1910
|
+
hiddenValue: data.map((item) => getItemValue(item).value),
|
|
1911
|
+
textValue: data.map((item) => getItemValue(item).text)
|
|
1912
|
+
});
|
|
1913
|
+
} else {
|
|
1914
|
+
setSelectedOptions([]);
|
|
1915
|
+
setState({ hiddenValue: "-1", textValue: "" });
|
|
1916
|
+
}
|
|
1917
|
+
};
|
|
1918
|
+
const allSelected = data.length > 0 && selectedOptions.length === data.length;
|
|
1919
|
+
const handleChange = (event2, value) => {
|
|
1920
|
+
if (type === "multiselect") {
|
|
1921
|
+
const ids = value.map((v) => getItemValue ? getItemValue(v).value : "");
|
|
1922
|
+
const texts = value.map((v) => getItemValue ? getItemValue(v).text : "");
|
|
1923
|
+
setSelectedOptions(value);
|
|
1924
|
+
setState({
|
|
1925
|
+
hiddenValue: ids,
|
|
1926
|
+
textValue: texts
|
|
1927
|
+
});
|
|
1928
|
+
} else {
|
|
1929
|
+
setState({
|
|
1930
|
+
hiddenValue: getItemValue(value).value,
|
|
1931
|
+
textValue: getItemValue(value).text
|
|
1932
|
+
});
|
|
1933
|
+
}
|
|
1934
|
+
};
|
|
1935
|
+
const selectedValue = type === "multiselect" ? data.filter(
|
|
1936
|
+
(item) => state.hiddenValue.includes(getItemValue(item).value)
|
|
1937
|
+
) : data.find(
|
|
1938
|
+
(item) => getItemValue(item).value === state.hiddenValue
|
|
1939
|
+
) || null;
|
|
1940
|
+
return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, data && /* @__PURE__ */ import_react19.default.createElement(
|
|
1941
|
+
import_material13.Autocomplete,
|
|
1942
|
+
{
|
|
1943
|
+
multiple: type === "multiselect",
|
|
1944
|
+
clearOnEscape: true,
|
|
1945
|
+
disabled,
|
|
1946
|
+
options: data,
|
|
1947
|
+
onChange: handleChange,
|
|
1948
|
+
getOptionLabel: (option) => getItemValue(option).text,
|
|
1949
|
+
value: selectedValue,
|
|
1950
|
+
sx: {
|
|
1951
|
+
background: background || "transparent",
|
|
1952
|
+
width: "100%",
|
|
1953
|
+
maxWidth: "100%",
|
|
1954
|
+
"& .MuiAutocomplete-tag": {
|
|
1955
|
+
maxWidth: 120,
|
|
1956
|
+
overflow: "hidden",
|
|
1957
|
+
textOverflow: "ellipsis",
|
|
1958
|
+
whiteSpace: "nowrap"
|
|
1959
|
+
},
|
|
1960
|
+
"& .MuiAutocomplete-inputRoot": {
|
|
1961
|
+
flexWrap: "nowrap !important",
|
|
1962
|
+
overflowX: "auto"
|
|
1963
|
+
}
|
|
1964
|
+
},
|
|
1965
|
+
limitTags: 2,
|
|
1966
|
+
renderTags: (value, getTagProps) => {
|
|
1967
|
+
const limit = 2;
|
|
1968
|
+
return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, value.slice(0, limit).map((option, index) => /* @__PURE__ */ import_react19.default.createElement(
|
|
1969
|
+
import_material13.Chip,
|
|
1970
|
+
__spreadProps(__spreadValues({
|
|
1971
|
+
color: "default",
|
|
1972
|
+
size: "small",
|
|
1973
|
+
variant: "filled",
|
|
1974
|
+
label: getItemValue(option).text
|
|
1975
|
+
}, getTagProps({ index })), {
|
|
1976
|
+
style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
|
|
1977
|
+
})
|
|
1978
|
+
)), value.length > limit && /* @__PURE__ */ import_react19.default.createElement(import_material13.Box, { sx: { ml: 0.5, fontSize: 13, color: "#666", display: "flex", alignItems: "center" } }, `+${value.length - limit}`));
|
|
1979
|
+
},
|
|
1980
|
+
renderOption: (props, option) => {
|
|
1981
|
+
const _a = props, { key } = _a, optionProps = __objRest(_a, ["key"]);
|
|
1982
|
+
let isValid;
|
|
1983
|
+
if (type == "multiselect") {
|
|
1984
|
+
isSelected = selectedOptions.some(
|
|
1985
|
+
(selected) => getItemValue(selected).value === getItemValue(option).value
|
|
1986
|
+
);
|
|
1987
|
+
}
|
|
1988
|
+
if (columnGroup) {
|
|
1989
|
+
isValid = group == option[columnGroup];
|
|
1990
|
+
group = option[columnGroup];
|
|
1991
|
+
}
|
|
1992
|
+
return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, { key }, columnGroup ? !isValid ? /* @__PURE__ */ import_react19.default.createElement(import_material13.Typography, { color: "text.secondary", sx: { margin: "7px 16px !important", fontSize: "13px !important" } }, option[columnGroup]) : "" : "", /* @__PURE__ */ import_react19.default.createElement(import_material13.MenuItem, __spreadProps(__spreadValues({}, optionProps), { style: { background: type != "multiselect" ? state.hiddenValue == getItemValue(option).value ? "#dfe6ec" : "white" : "white", padding: "7px 16px" } }), type != "multiselect" && getItemValue(option).icon != void 0 ? /* @__PURE__ */ import_react19.default.createElement(import_material13.ListItemIcon, { sx: { minWidth: "10px !important" } }, /* @__PURE__ */ import_react19.default.createElement(import_material13.SvgIcon, { fontSize: "small", color: "action", component: getItemValue(option).icon })) : "", type == "multiselect" ? /* @__PURE__ */ import_react19.default.createElement(import_material13.Checkbox, { checked: isSelected, value: getItemValue(option).text, color: "primary" }) : "", /* @__PURE__ */ import_react19.default.createElement(import_material13.ListItemText, { primary: getItemValue(option).text, color: "text.primary" }))));
|
|
1993
|
+
},
|
|
1994
|
+
renderInput: (params) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
|
|
1995
|
+
import_material13.TextField,
|
|
1996
|
+
__spreadProps(__spreadValues({}, params), {
|
|
1997
|
+
label: required ? /* @__PURE__ */ import_react19.default.createElement("span", { dangerouslySetInnerHTML: { __html: labelContent } }) : label,
|
|
1998
|
+
placeholder: selectedOptions.length == 0 ? "B\xFAsqueda" : "",
|
|
1999
|
+
InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
|
|
2000
|
+
endAdornment: /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, deleteType == "icon" && state.hiddenValue != "-1" ? /* @__PURE__ */ import_react19.default.createElement(import_material13.IconButton, { size: "small", onClick: cleanOptions, sx: { marginLeft: "auto", textAlign: "right", padding: "0px" } }, /* @__PURE__ */ import_react19.default.createElement(import_icons_material10.Clear, { fontSize: "small" })) : "", /* @__PURE__ */ import_react19.default.createElement(import_material13.InputAdornment, { style: { zIndex: 1, position: "relative" }, position: "end" }, /* @__PURE__ */ import_react19.default.createElement(import_icons_material10.Search, { fontSize: "small", color: "action", style: { cursor: "pointer" } })))
|
|
2001
|
+
})
|
|
2002
|
+
})
|
|
2003
|
+
)),
|
|
2004
|
+
slotProps: {
|
|
2005
|
+
listbox: {
|
|
2006
|
+
component: import_react19.default.forwardRef(function ListboxComponent(props, ref) {
|
|
2007
|
+
return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
|
|
2008
|
+
import_material13.Box,
|
|
2009
|
+
__spreadProps(__spreadValues({
|
|
2010
|
+
ref
|
|
2011
|
+
}, props), {
|
|
2012
|
+
sx: __spreadValues({
|
|
2013
|
+
position: "relative",
|
|
2014
|
+
paddingBottom: "56px",
|
|
2015
|
+
backgroundColor: "white"
|
|
2016
|
+
}, props.sx)
|
|
2017
|
+
}),
|
|
2018
|
+
checkMassive && type == "multiselect" ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_material13.FormControlLabel, { control: /* @__PURE__ */ import_react19.default.createElement(import_material13.Checkbox, { checked: allSelected, indeterminate: selectedOptions.length > 0 && selectedOptions.length < data.length, onChange: handleCheckAll, color: "primary" }), label: "Todos los item", sx: { marginLeft: "0px !important", marginRight: "0px !important", padding: "7px 16px" } }), /* @__PURE__ */ import_react19.default.createElement(import_material13.Divider, null)) : "",
|
|
2019
|
+
props.children,
|
|
2020
|
+
deleteType == "button" || fnAplicar ? /* @__PURE__ */ import_react19.default.createElement(
|
|
2021
|
+
import_Grid26.default,
|
|
2022
|
+
{
|
|
2023
|
+
container: true,
|
|
2024
|
+
sx: {
|
|
2025
|
+
position: "sticky",
|
|
2026
|
+
bottom: -8,
|
|
2027
|
+
left: 0,
|
|
2028
|
+
width: "100%",
|
|
2029
|
+
backgroundColor: "grey.50",
|
|
2030
|
+
padding: "8px 16px",
|
|
2031
|
+
textAlign: "left",
|
|
2032
|
+
justifyContent: "space-between"
|
|
2033
|
+
}
|
|
2034
|
+
},
|
|
2035
|
+
deleteType == "button" ? /* @__PURE__ */ import_react19.default.createElement(
|
|
2036
|
+
import_material13.Button,
|
|
2037
|
+
{
|
|
2038
|
+
variant: "text",
|
|
2039
|
+
color: "primary",
|
|
2040
|
+
size: "small",
|
|
2041
|
+
onClick: (event2) => {
|
|
2042
|
+
event2.stopPropagation();
|
|
2043
|
+
cleanOptions(event2);
|
|
2044
|
+
}
|
|
2045
|
+
},
|
|
2046
|
+
"Limpiar"
|
|
2047
|
+
) : "",
|
|
2048
|
+
fnAplicar && /* @__PURE__ */ import_react19.default.createElement(
|
|
2049
|
+
import_material13.Button,
|
|
2050
|
+
{
|
|
2051
|
+
variant: "contained",
|
|
2052
|
+
color: "primary",
|
|
2053
|
+
size: "small",
|
|
2054
|
+
onClick: fnAplicar
|
|
2055
|
+
},
|
|
2056
|
+
"Aplicar"
|
|
2057
|
+
)
|
|
2058
|
+
) : ""
|
|
2059
|
+
));
|
|
2060
|
+
})
|
|
2061
|
+
}
|
|
2062
|
+
}
|
|
2063
|
+
}
|
|
2064
|
+
));
|
|
2065
|
+
}
|
|
2066
|
+
|
|
2067
|
+
// src/Theme/index.ts
|
|
2068
|
+
var import_styles3 = require("@mui/material/styles");
|
|
2069
|
+
|
|
2070
|
+
// src/Theme/components.ts
|
|
2071
|
+
var import_react20 = __toESM(require("react"), 1);
|
|
2072
|
+
var import_icons_material11 = require("@mui/icons-material");
|
|
2073
|
+
var components = {
|
|
2074
|
+
MuiSelect: {
|
|
2075
|
+
styleOverrides: {
|
|
2076
|
+
outlined: {
|
|
2077
|
+
paddingBlock: "13px"
|
|
2078
|
+
},
|
|
2079
|
+
iconStandard: {
|
|
2080
|
+
"&.MuiSelect-iconStandard.MuiSvgIcon-root": {
|
|
2081
|
+
top: "calc(50% - .4em)"
|
|
2082
|
+
}
|
|
2083
|
+
},
|
|
2084
|
+
iconFilled: {
|
|
2085
|
+
"&.MuiSelect-iconFilled.MuiSvgIcon-root": {
|
|
2086
|
+
top: "calc(50% - .15em)"
|
|
2087
|
+
}
|
|
2088
|
+
},
|
|
2089
|
+
iconOutlined: {
|
|
2090
|
+
"&.MuiSelect-iconOutlined.MuiSvgIcon-root": {
|
|
2091
|
+
top: "calc(50% - .35em)"
|
|
2092
|
+
}
|
|
2093
|
+
},
|
|
2094
|
+
icon: {
|
|
2095
|
+
width: 16,
|
|
2096
|
+
height: 16
|
|
2097
|
+
},
|
|
2098
|
+
root: {
|
|
2099
|
+
fontSize: 13,
|
|
2100
|
+
fontStyle: "normal",
|
|
2101
|
+
fontWeight: 400,
|
|
2102
|
+
letterSpacing: "0.15px",
|
|
2103
|
+
lineHeight: "19px"
|
|
2104
|
+
}
|
|
2105
|
+
}
|
|
2106
|
+
},
|
|
2107
|
+
MuiSpeedDialIcon: {
|
|
2108
|
+
styleOverrides: {
|
|
2109
|
+
icon: {
|
|
2110
|
+
height: 24,
|
|
2111
|
+
width: 24
|
|
2112
|
+
}
|
|
2113
|
+
}
|
|
2114
|
+
},
|
|
2115
|
+
MuiSpeedDialAction: {
|
|
2116
|
+
styleOverrides: {
|
|
2117
|
+
fab: {
|
|
2118
|
+
height: 40,
|
|
2119
|
+
width: 40
|
|
2120
|
+
}
|
|
2121
|
+
}
|
|
2122
|
+
},
|
|
2123
|
+
MuiBadge: {
|
|
2124
|
+
styleOverrides: {
|
|
2125
|
+
badge: {
|
|
2126
|
+
fontSize: "11px",
|
|
2127
|
+
fontWeight: 400,
|
|
2128
|
+
lineHeight: "11px",
|
|
2129
|
+
letterSpacing: ".14px"
|
|
2130
|
+
}
|
|
2131
|
+
}
|
|
2132
|
+
},
|
|
2133
|
+
MuiSpeedDial: {
|
|
2134
|
+
styleOverrides: {
|
|
2135
|
+
fab: {
|
|
2136
|
+
height: 56,
|
|
2137
|
+
width: 56
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2140
|
+
},
|
|
2141
|
+
MuiAccordion: {
|
|
2142
|
+
styleOverrides: {
|
|
2143
|
+
root: {
|
|
2144
|
+
".MuiButtonBase-root.MuiAccordionSummary-root": {
|
|
2145
|
+
minHeight: 44,
|
|
2146
|
+
height: 44
|
|
2147
|
+
}
|
|
2148
|
+
}
|
|
2149
|
+
}
|
|
2150
|
+
},
|
|
2151
|
+
MuiTabs: {
|
|
2152
|
+
styleOverrides: {
|
|
2153
|
+
root: {
|
|
2154
|
+
minHeight: 40
|
|
2155
|
+
}
|
|
2156
|
+
}
|
|
2157
|
+
},
|
|
2158
|
+
MuiTab: {
|
|
2159
|
+
styleOverrides: {
|
|
2160
|
+
labelIcon: {
|
|
2161
|
+
paddingBlock: 10
|
|
2162
|
+
},
|
|
2163
|
+
root: {
|
|
2164
|
+
textTransform: "none",
|
|
2165
|
+
minHeight: 40
|
|
2166
|
+
}
|
|
2167
|
+
}
|
|
2168
|
+
},
|
|
2169
|
+
MuiDataGrid: {
|
|
2170
|
+
defaultProps: {
|
|
2171
|
+
density: "compact"
|
|
2172
|
+
},
|
|
2173
|
+
styleOverrides: {
|
|
2174
|
+
columnHeader: {
|
|
2175
|
+
variants: [
|
|
2176
|
+
{
|
|
2177
|
+
props: { density: "compact" },
|
|
2178
|
+
style: {
|
|
2179
|
+
"--height": "24px",
|
|
2180
|
+
minHeight: "24px !important",
|
|
2181
|
+
maxHeight: "24px !important"
|
|
2182
|
+
}
|
|
2183
|
+
},
|
|
2184
|
+
{
|
|
2185
|
+
props: { density: "standard" },
|
|
2186
|
+
style: {
|
|
2187
|
+
"--height": "36px",
|
|
2188
|
+
minHeight: "36px !important",
|
|
2189
|
+
maxHeight: "36px !important"
|
|
2190
|
+
}
|
|
2191
|
+
},
|
|
2192
|
+
{
|
|
2193
|
+
props: { density: "comfortable" },
|
|
2194
|
+
style: {
|
|
2195
|
+
"--height": "52px",
|
|
2196
|
+
minHeight: "52px !important",
|
|
2197
|
+
maxHeight: "52px !important"
|
|
2198
|
+
}
|
|
2199
|
+
}
|
|
2200
|
+
]
|
|
2201
|
+
},
|
|
2202
|
+
columnSeparator: {
|
|
2203
|
+
variants: [
|
|
2204
|
+
{
|
|
2205
|
+
props: { density: "compact" },
|
|
2206
|
+
style: {
|
|
2207
|
+
"--height": "24px",
|
|
2208
|
+
minHeight: "24px !important",
|
|
2209
|
+
maxHeight: "24px !important"
|
|
2210
|
+
}
|
|
2211
|
+
},
|
|
2212
|
+
{
|
|
2213
|
+
props: { density: "standard" },
|
|
2214
|
+
style: {
|
|
2215
|
+
"--height": "36px",
|
|
2216
|
+
minHeight: "36px !important",
|
|
2217
|
+
maxHeight: "36px !important"
|
|
2218
|
+
}
|
|
2219
|
+
},
|
|
2220
|
+
{
|
|
2221
|
+
props: { density: "comfortable" },
|
|
2222
|
+
style: {
|
|
2223
|
+
"--height": "52px",
|
|
2224
|
+
minHeight: "52px !important",
|
|
2225
|
+
maxHeight: "52px !important"
|
|
2226
|
+
}
|
|
2227
|
+
}
|
|
2228
|
+
]
|
|
2229
|
+
},
|
|
2230
|
+
iconButtonContainer: {
|
|
2231
|
+
fontSize: 16
|
|
2232
|
+
},
|
|
2233
|
+
columnHeaderDraggableContainer: {
|
|
2234
|
+
variants: [
|
|
2235
|
+
{
|
|
2236
|
+
props: { density: "compact" },
|
|
2237
|
+
style: {
|
|
2238
|
+
"--height": "24px",
|
|
2239
|
+
minHeight: "24px !important",
|
|
2240
|
+
maxHeight: "24px !important"
|
|
2241
|
+
}
|
|
2242
|
+
},
|
|
2243
|
+
{
|
|
2244
|
+
props: { density: "standard" },
|
|
2245
|
+
style: {
|
|
2246
|
+
"--height": "36px",
|
|
2247
|
+
minHeight: "36px !important",
|
|
2248
|
+
maxHeight: "36px !important"
|
|
2249
|
+
}
|
|
2250
|
+
},
|
|
2251
|
+
{
|
|
2252
|
+
props: { density: "comfortable" },
|
|
2253
|
+
style: {
|
|
2254
|
+
"--height": "52px",
|
|
2255
|
+
minHeight: "52px !important",
|
|
2256
|
+
maxHeight: "52px !important"
|
|
2257
|
+
}
|
|
2258
|
+
}
|
|
2259
|
+
]
|
|
2260
|
+
},
|
|
2261
|
+
columnHeaderTitle: {
|
|
2262
|
+
fontFamily: "Roboto",
|
|
2263
|
+
fontWeight: 500,
|
|
2264
|
+
fontSize: 13,
|
|
2265
|
+
lineHeight: 1.5,
|
|
2266
|
+
letterSpacing: 0.17
|
|
2267
|
+
},
|
|
2268
|
+
row: {
|
|
2269
|
+
variants: [
|
|
2270
|
+
{
|
|
2271
|
+
props: { density: "compact" },
|
|
2272
|
+
style: {
|
|
2273
|
+
"--height": "22px",
|
|
2274
|
+
minHeight: "22px !important",
|
|
2275
|
+
maxHeight: "22px !important"
|
|
2276
|
+
}
|
|
2277
|
+
},
|
|
2278
|
+
{
|
|
2279
|
+
props: { density: "standard" },
|
|
2280
|
+
style: {
|
|
2281
|
+
"--height": "28px",
|
|
2282
|
+
minHeight: "28px !important",
|
|
2283
|
+
maxHeight: "28px !important"
|
|
2284
|
+
}
|
|
2285
|
+
},
|
|
2286
|
+
{
|
|
2287
|
+
props: { density: "comfortable" },
|
|
2288
|
+
style: {
|
|
2289
|
+
"--height": "48px",
|
|
2290
|
+
minHeight: "48px !important",
|
|
2291
|
+
maxHeight: "48px !important"
|
|
2292
|
+
}
|
|
2293
|
+
}
|
|
2294
|
+
]
|
|
2295
|
+
},
|
|
2296
|
+
cell: {
|
|
2297
|
+
fontFamily: "Roboto",
|
|
2298
|
+
fontWeight: 300,
|
|
2299
|
+
fontSize: 12,
|
|
2300
|
+
lineHeight: 1.5,
|
|
2301
|
+
letterSpacing: 0.17,
|
|
2302
|
+
display: "flex",
|
|
2303
|
+
alignItems: "center",
|
|
2304
|
+
variants: [
|
|
2305
|
+
{
|
|
2306
|
+
props: { density: "compact" },
|
|
2307
|
+
style: {
|
|
2308
|
+
"--height": "22px",
|
|
2309
|
+
minHeight: "22px !important",
|
|
2310
|
+
maxHeight: "22px !important"
|
|
2311
|
+
}
|
|
2312
|
+
},
|
|
2313
|
+
{
|
|
2314
|
+
props: { density: "standard" },
|
|
2315
|
+
style: {
|
|
2316
|
+
"--height": "28px",
|
|
2317
|
+
minHeight: "28px !important",
|
|
2318
|
+
maxHeight: "28px !important"
|
|
2319
|
+
}
|
|
2320
|
+
},
|
|
2321
|
+
{
|
|
2322
|
+
props: { density: "comfortable" },
|
|
2323
|
+
style: {
|
|
2324
|
+
"--height": "48px",
|
|
2325
|
+
minHeight: "48px !important",
|
|
2326
|
+
maxHeight: "48px !important"
|
|
2327
|
+
}
|
|
2328
|
+
}
|
|
2329
|
+
],
|
|
2330
|
+
// COMPONENTES DENTRO DE CELDAS
|
|
2331
|
+
".MuiButtonBase-root": {
|
|
2332
|
+
lineHeight: 0,
|
|
2333
|
+
textTransform: "capitalize"
|
|
2334
|
+
},
|
|
2335
|
+
// CELDA ENFOCADA
|
|
2336
|
+
".MuiDataGrid-cell": {
|
|
2337
|
+
"&:focus": {
|
|
2338
|
+
outline: "transparent",
|
|
2339
|
+
borderWidth: 0
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
},
|
|
2343
|
+
// BOTOM MENU EN LAS CABECERA DE CADA COLUMNA
|
|
2344
|
+
menuIconButton: {
|
|
2345
|
+
svg: {
|
|
2346
|
+
fontSize: "16px"
|
|
2347
|
+
}
|
|
2348
|
+
},
|
|
2349
|
+
menu: {
|
|
2350
|
+
svg: {
|
|
2351
|
+
fontSize: "16px !important"
|
|
2352
|
+
},
|
|
2353
|
+
".MuiMenuItem-root": {
|
|
2354
|
+
minHeight: "28px",
|
|
2355
|
+
height: "28px"
|
|
2356
|
+
}
|
|
2357
|
+
},
|
|
2358
|
+
pinnedRows: {
|
|
2359
|
+
borderTop: "1px solid rgba(228, 236, 244, 1)"
|
|
2360
|
+
},
|
|
2361
|
+
root: {
|
|
2362
|
+
// FONT-SIZE DE CELDA EN MODO EDICION
|
|
2363
|
+
".MuiInputBase-root": {
|
|
2364
|
+
fontFamily: "Roboto",
|
|
2365
|
+
fontWeight: 300,
|
|
2366
|
+
fontSize: 12,
|
|
2367
|
+
letterSpacing: 0.17,
|
|
2368
|
+
borderRadius: "0px"
|
|
2369
|
+
},
|
|
2370
|
+
// CELDA FOCUS
|
|
2371
|
+
".Mui-focused, .MuiOutlinedInput-notchedOutline": {
|
|
2372
|
+
borderWidth: "0px !important"
|
|
2373
|
+
},
|
|
2374
|
+
// TAMAÑO PEQUEÑO
|
|
2375
|
+
"&.MuiDataGrid-root--densityCompact": {
|
|
2376
|
+
".MuiSvgIcon-root": {
|
|
2377
|
+
fontSize: 16
|
|
2378
|
+
},
|
|
2379
|
+
".MuiDataGrid-cellCheckbox": {
|
|
2380
|
+
".MuiButtonBase-root": {
|
|
2381
|
+
padding: 4
|
|
2382
|
+
}
|
|
2383
|
+
}
|
|
2384
|
+
}
|
|
2385
|
+
}
|
|
2386
|
+
}
|
|
2387
|
+
},
|
|
2388
|
+
MuiRating: {
|
|
2389
|
+
defaultProps: {
|
|
2390
|
+
size: "small"
|
|
2391
|
+
},
|
|
2392
|
+
styleOverrides: {
|
|
2393
|
+
sizeSmall: {
|
|
2394
|
+
fontSize: 18
|
|
2395
|
+
},
|
|
2396
|
+
sizeMedium: {
|
|
2397
|
+
fontSize: 24
|
|
2398
|
+
},
|
|
2399
|
+
sizeLarge: {
|
|
2400
|
+
fontSize: 30
|
|
2401
|
+
}
|
|
2402
|
+
}
|
|
2403
|
+
},
|
|
2404
|
+
MuiDrawer: {
|
|
2405
|
+
styleOverrides: {
|
|
2406
|
+
root: {
|
|
2407
|
+
boxShadow: "0px 3px 1px -2px rgba(24, 39, 75, 0.20), 0px 2px 2px 0px rgba(24, 39, 75, 0.14), 0px 1px 5px 0px rgba(24, 39, 75, 0.12)"
|
|
2408
|
+
}
|
|
2409
|
+
}
|
|
2410
|
+
},
|
|
2411
|
+
MuiTooltip: {
|
|
2412
|
+
styleOverrides: {
|
|
2413
|
+
tooltip: {
|
|
2414
|
+
backgroundColor: "#424242"
|
|
2415
|
+
}
|
|
2416
|
+
}
|
|
2417
|
+
},
|
|
2418
|
+
MuiDialog: {
|
|
2419
|
+
styleOverrides: {
|
|
2420
|
+
root: ({ theme }) => ({
|
|
2421
|
+
boxShadow: "0px 11px 15px -7px rgba(24, 39, 75, 0.2), 0px 24px 38px 3px rgba(24, 39, 75, 0.14), 0px 9px 46px 8px rgba(24, 39, 75, 0.12)",
|
|
2422
|
+
"& .MuiBackdrop-root": {
|
|
2423
|
+
backgroundColor: "#00000047"
|
|
2424
|
+
}
|
|
2425
|
+
})
|
|
2426
|
+
}
|
|
2427
|
+
},
|
|
2428
|
+
MuiBackdrop: {
|
|
2429
|
+
styleOverrides: {
|
|
2430
|
+
root: {
|
|
2431
|
+
backgroundColor: "#00000047"
|
|
2432
|
+
}
|
|
2433
|
+
}
|
|
2434
|
+
},
|
|
2435
|
+
MuiDialogTitle: {
|
|
2436
|
+
styleOverrides: {
|
|
2437
|
+
root: {
|
|
2438
|
+
padding: "8px 16px !important"
|
|
2439
|
+
}
|
|
2440
|
+
}
|
|
2441
|
+
},
|
|
2442
|
+
MuiDialogContent: {
|
|
2443
|
+
styleOverrides: {
|
|
2444
|
+
root: {
|
|
2445
|
+
padding: "8px 16px !important"
|
|
2446
|
+
}
|
|
2447
|
+
}
|
|
2448
|
+
},
|
|
2449
|
+
MuiDialogActions: {
|
|
2450
|
+
styleOverrides: {
|
|
2451
|
+
root: {
|
|
2452
|
+
padding: "12px 16px !important"
|
|
2453
|
+
}
|
|
2454
|
+
}
|
|
2455
|
+
},
|
|
2456
|
+
MuiCheckbox: {
|
|
2457
|
+
variants: [
|
|
2458
|
+
{
|
|
2459
|
+
props: { size: "large" },
|
|
2460
|
+
style: {
|
|
2461
|
+
padding: 9,
|
|
2462
|
+
"& .MuiSvgIcon-fontSizeLarge": {
|
|
2463
|
+
height: 24,
|
|
2464
|
+
width: 24,
|
|
2465
|
+
fontSize: 24
|
|
2466
|
+
}
|
|
2467
|
+
}
|
|
2468
|
+
},
|
|
2469
|
+
{
|
|
2470
|
+
props: { size: "small" },
|
|
2471
|
+
style: {
|
|
2472
|
+
padding: 3
|
|
2473
|
+
}
|
|
2474
|
+
},
|
|
2475
|
+
{
|
|
2476
|
+
props: { size: "medium" },
|
|
2477
|
+
style: {
|
|
2478
|
+
padding: 4
|
|
2479
|
+
}
|
|
2480
|
+
}
|
|
2481
|
+
],
|
|
2482
|
+
defaultProps: {
|
|
2483
|
+
size: "small"
|
|
2484
|
+
}
|
|
2485
|
+
},
|
|
2486
|
+
MuiToggleButton: {
|
|
2487
|
+
styleOverrides: {
|
|
2488
|
+
sizeSmall: {
|
|
2489
|
+
height: 32
|
|
2490
|
+
},
|
|
2491
|
+
sizeMedium: {
|
|
2492
|
+
height: 38
|
|
2493
|
+
},
|
|
2494
|
+
sizeLarge: {
|
|
2495
|
+
height: 48
|
|
2496
|
+
}
|
|
2497
|
+
}
|
|
2498
|
+
},
|
|
2499
|
+
MuiChip: {
|
|
2500
|
+
defaultProps: {
|
|
2501
|
+
size: "small",
|
|
2502
|
+
variant: "standard",
|
|
2503
|
+
color: "default"
|
|
2504
|
+
},
|
|
2505
|
+
styleOverrides: {
|
|
2506
|
+
icon: {
|
|
2507
|
+
opacity: "70%"
|
|
2508
|
+
},
|
|
2509
|
+
deleteIconSmall: {
|
|
2510
|
+
height: 16,
|
|
2511
|
+
width: 16
|
|
2512
|
+
},
|
|
2513
|
+
deleteIconMedium: {
|
|
2514
|
+
height: 20,
|
|
2515
|
+
width: 20
|
|
2516
|
+
},
|
|
2517
|
+
sizeSmall: {
|
|
2518
|
+
height: 16
|
|
2519
|
+
},
|
|
2520
|
+
sizeMedium: {
|
|
2521
|
+
height: 20
|
|
2522
|
+
},
|
|
2523
|
+
avatarSmall: {
|
|
2524
|
+
height: 14,
|
|
2525
|
+
width: 14
|
|
2526
|
+
},
|
|
2527
|
+
avatarMedium: {
|
|
2528
|
+
height: 18,
|
|
2529
|
+
width: 18
|
|
2530
|
+
},
|
|
2531
|
+
iconColorPrimary: ({ theme }) => ({
|
|
2532
|
+
color: theme.palette.primary.main
|
|
2533
|
+
}),
|
|
2534
|
+
colorDefault: ({ theme }) => ({
|
|
2535
|
+
backgroundColor: theme.palette.default.main,
|
|
2536
|
+
color: theme.palette.default.contrastText
|
|
2537
|
+
}),
|
|
2538
|
+
deleteIcon: ({ theme }) => ({
|
|
2539
|
+
variants: [
|
|
2540
|
+
{
|
|
2541
|
+
props: { variant: "filled" },
|
|
2542
|
+
style: {
|
|
2543
|
+
color: theme.palette.background.paper,
|
|
2544
|
+
opacity: "50%"
|
|
2545
|
+
}
|
|
2546
|
+
},
|
|
2547
|
+
{
|
|
2548
|
+
props: { variant: "standard" },
|
|
2549
|
+
style: {
|
|
2550
|
+
color: theme.palette.default.contrastText,
|
|
2551
|
+
opacity: "30%",
|
|
2552
|
+
":hover": {
|
|
2553
|
+
color: theme.palette.default.contrastText,
|
|
2554
|
+
opacity: "30%"
|
|
2555
|
+
}
|
|
2556
|
+
}
|
|
2557
|
+
},
|
|
2558
|
+
{
|
|
2559
|
+
props: { variant: "outlined" },
|
|
2560
|
+
style: {
|
|
2561
|
+
color: theme.palette.action.active,
|
|
2562
|
+
opacity: "54%",
|
|
2563
|
+
":hover": {
|
|
2564
|
+
color: theme.palette.action.active,
|
|
2565
|
+
opacity: "54%"
|
|
2566
|
+
}
|
|
2567
|
+
}
|
|
2568
|
+
},
|
|
2569
|
+
{
|
|
2570
|
+
props: { variant: "filled", color: "default" },
|
|
2571
|
+
style: {
|
|
2572
|
+
color: theme.palette.default.contrastText,
|
|
2573
|
+
opacity: "30%"
|
|
2574
|
+
}
|
|
2575
|
+
}
|
|
2576
|
+
]
|
|
2577
|
+
}),
|
|
2578
|
+
avatar: ({ theme }) => ({
|
|
2579
|
+
lineHeight: 1.8,
|
|
2580
|
+
variants: [
|
|
2581
|
+
{
|
|
2582
|
+
props: { variant: "filled" },
|
|
2583
|
+
style: {
|
|
2584
|
+
backgroundColor: theme.palette.background.paper,
|
|
2585
|
+
opacity: "70%",
|
|
2586
|
+
color: theme.palette.default.contrastText
|
|
2587
|
+
}
|
|
2588
|
+
},
|
|
2589
|
+
{
|
|
2590
|
+
props: { variant: "standard" },
|
|
2591
|
+
style: {
|
|
2592
|
+
backgroundColor: theme.palette.default.contrastText,
|
|
2593
|
+
color: theme.palette.primary.contrastText
|
|
2594
|
+
}
|
|
2595
|
+
},
|
|
2596
|
+
{
|
|
2597
|
+
props: { variant: "outlined", color: "error" },
|
|
2598
|
+
style: {
|
|
2599
|
+
backgroundColor: theme.palette.error.main,
|
|
2600
|
+
color: theme.palette.background.paper
|
|
2601
|
+
}
|
|
2602
|
+
},
|
|
2603
|
+
{
|
|
2604
|
+
props: { variant: "outlined", color: "success" },
|
|
2605
|
+
style: {
|
|
2606
|
+
backgroundColor: theme.palette.success.main,
|
|
2607
|
+
color: theme.palette.background.paper
|
|
2608
|
+
}
|
|
2609
|
+
},
|
|
2610
|
+
{
|
|
2611
|
+
props: { variant: "outlined", color: "info" },
|
|
2612
|
+
style: {
|
|
2613
|
+
backgroundColor: theme.palette.info.main,
|
|
2614
|
+
color: theme.palette.background.paper
|
|
2615
|
+
}
|
|
2616
|
+
},
|
|
2617
|
+
{
|
|
2618
|
+
props: { variant: "outlined", color: "warning" },
|
|
2619
|
+
style: {
|
|
2620
|
+
backgroundColor: theme.palette.warning.main,
|
|
2621
|
+
color: theme.palette.background.paper
|
|
2622
|
+
}
|
|
2623
|
+
},
|
|
2624
|
+
{
|
|
2625
|
+
props: { variant: "outlined", color: "default" },
|
|
2626
|
+
style: {
|
|
2627
|
+
backgroundColor: theme.palette.grey[400],
|
|
2628
|
+
color: theme.palette.background.paper
|
|
2629
|
+
}
|
|
2630
|
+
},
|
|
2631
|
+
{
|
|
2632
|
+
props: { variant: "filled", color: "default" },
|
|
2633
|
+
style: {
|
|
2634
|
+
backgroundColor: theme.palette.default.contrastText,
|
|
2635
|
+
color: theme.palette.background.paper
|
|
2636
|
+
}
|
|
2637
|
+
}
|
|
2638
|
+
]
|
|
2639
|
+
}),
|
|
2640
|
+
label: ({ theme }) => __spreadValues({}, theme.typography.caption),
|
|
2641
|
+
root: ({ theme }) => ({
|
|
2642
|
+
height: "inherit",
|
|
2643
|
+
borderRadius: 4,
|
|
2644
|
+
variants: [
|
|
2645
|
+
{
|
|
2646
|
+
props: { variant: "outlined", color: "default" },
|
|
2647
|
+
style: {
|
|
2648
|
+
border: `1px solid ${theme.palette.grey[400]}`,
|
|
2649
|
+
backgroundColor: "transparent ",
|
|
2650
|
+
color: theme.palette.default.contrastText,
|
|
2651
|
+
":hover": {
|
|
2652
|
+
backgroundColor: theme.palette.default.main
|
|
2653
|
+
}
|
|
2654
|
+
}
|
|
2655
|
+
},
|
|
2656
|
+
{
|
|
2657
|
+
props: { variant: "standard", color: "default" },
|
|
2658
|
+
style: {
|
|
2659
|
+
backgroundColor: theme.palette.default.main,
|
|
2660
|
+
color: theme.palette.default.contrastText,
|
|
2661
|
+
":hover": {
|
|
2662
|
+
backgroundColor: theme.palette.default.dark
|
|
2663
|
+
}
|
|
2664
|
+
}
|
|
2665
|
+
},
|
|
2666
|
+
{
|
|
2667
|
+
props: { variant: "filled", color: "default" },
|
|
2668
|
+
style: {
|
|
2669
|
+
backgroundColor: theme.palette.grey[50],
|
|
2670
|
+
color: theme.palette.default.contrastText,
|
|
2671
|
+
":hover": {
|
|
2672
|
+
backgroundColor: theme.palette.grey[100]
|
|
2673
|
+
}
|
|
2674
|
+
}
|
|
2675
|
+
},
|
|
2676
|
+
{
|
|
2677
|
+
props: { variant: "filled", color: "default" },
|
|
2678
|
+
style: {
|
|
2679
|
+
backgroundColor: theme.palette.grey[50],
|
|
2680
|
+
color: theme.palette.default.contrastText,
|
|
2681
|
+
":hover": {
|
|
2682
|
+
backgroundColor: theme.palette.grey[100]
|
|
2683
|
+
}
|
|
2684
|
+
}
|
|
2685
|
+
},
|
|
2686
|
+
{
|
|
2687
|
+
props: { variant: "standard", avatar: true },
|
|
2688
|
+
style: {
|
|
2689
|
+
backgroundColor: theme.palette.default.contrastText,
|
|
2690
|
+
color: theme.palette.default.contrastText
|
|
2691
|
+
}
|
|
2692
|
+
},
|
|
2693
|
+
{
|
|
2694
|
+
props: { variant: "standard" },
|
|
2695
|
+
style: {
|
|
2696
|
+
backgroundColor: theme.palette.default.contrastText,
|
|
2697
|
+
color: theme.palette.default.contrastText
|
|
2698
|
+
}
|
|
2699
|
+
},
|
|
2700
|
+
{
|
|
2701
|
+
props: { variant: "standard", color: "primary" },
|
|
2702
|
+
style: {
|
|
2703
|
+
backgroundColor: theme.palette.chipPrimary.main,
|
|
2704
|
+
":hover": {
|
|
2705
|
+
backgroundColor: theme.palette.chipPrimary.dark
|
|
2706
|
+
}
|
|
2707
|
+
}
|
|
2708
|
+
},
|
|
2709
|
+
{
|
|
2710
|
+
props: { variant: "standard", color: "secondary" },
|
|
2711
|
+
style: {
|
|
2712
|
+
backgroundColor: theme.palette.chipSecondary.main,
|
|
2713
|
+
":hover": {
|
|
2714
|
+
backgroundColor: theme.palette.chipSecondary.dark
|
|
2715
|
+
}
|
|
2716
|
+
}
|
|
2717
|
+
},
|
|
2718
|
+
{
|
|
2719
|
+
props: { variant: "standard", color: "info" },
|
|
2720
|
+
style: {
|
|
2721
|
+
backgroundColor: theme.palette.chipInfo.main,
|
|
2722
|
+
":hover": {
|
|
2723
|
+
backgroundColor: theme.palette.chipInfo.dark
|
|
2724
|
+
}
|
|
2725
|
+
}
|
|
2726
|
+
},
|
|
2727
|
+
{
|
|
2728
|
+
props: { variant: "standard", color: "error" },
|
|
2729
|
+
style: {
|
|
2730
|
+
backgroundColor: theme.palette.chipError.main,
|
|
2731
|
+
":hover": {
|
|
2732
|
+
backgroundColor: theme.palette.chipError.dark
|
|
2733
|
+
}
|
|
2734
|
+
}
|
|
2735
|
+
},
|
|
2736
|
+
{
|
|
2737
|
+
props: { variant: "standard", color: "success" },
|
|
2738
|
+
style: {
|
|
2739
|
+
backgroundColor: theme.palette.chipSuccess.main,
|
|
2740
|
+
":hover": {
|
|
2741
|
+
backgroundColor: theme.palette.chipSuccess.dark
|
|
2742
|
+
}
|
|
2743
|
+
}
|
|
2744
|
+
},
|
|
2745
|
+
{
|
|
2746
|
+
props: { variant: "standard", color: "warning" },
|
|
2747
|
+
style: {
|
|
2748
|
+
backgroundColor: theme.palette.chipWarning.main,
|
|
2749
|
+
":hover": {
|
|
2750
|
+
backgroundColor: theme.palette.chipWarning.dark
|
|
2751
|
+
}
|
|
2752
|
+
}
|
|
2753
|
+
}
|
|
2754
|
+
]
|
|
2755
|
+
})
|
|
2756
|
+
}
|
|
2757
|
+
},
|
|
2758
|
+
MuiAvatar: {
|
|
2759
|
+
styleOverrides: {
|
|
2760
|
+
root: {
|
|
2761
|
+
display: "flex",
|
|
2762
|
+
alignContent: "center"
|
|
2763
|
+
}
|
|
2764
|
+
}
|
|
2765
|
+
},
|
|
2766
|
+
MuiAlert: {
|
|
2767
|
+
defaultProps: {
|
|
2768
|
+
iconMapping: {
|
|
2769
|
+
success: import_react20.default.createElement(import_icons_material11.CheckCircleRounded),
|
|
2770
|
+
error: import_react20.default.createElement(import_icons_material11.ErrorRounded),
|
|
2771
|
+
warning: import_react20.default.createElement(import_icons_material11.WarningRounded),
|
|
2772
|
+
info: import_react20.default.createElement(import_icons_material11.InfoRounded)
|
|
2773
|
+
}
|
|
2774
|
+
},
|
|
2775
|
+
variants: [
|
|
2776
|
+
{
|
|
2777
|
+
props: { variant: "filled" },
|
|
2778
|
+
style: {
|
|
2779
|
+
color: "#fff"
|
|
2780
|
+
}
|
|
2781
|
+
},
|
|
2782
|
+
{
|
|
2783
|
+
props: { variant: "outlined" },
|
|
2784
|
+
style: {
|
|
2785
|
+
padding: "7px 12px 7px 12px"
|
|
2786
|
+
}
|
|
2787
|
+
}
|
|
2788
|
+
],
|
|
2789
|
+
styleOverrides: {
|
|
2790
|
+
message: ({ theme }) => ({
|
|
2791
|
+
padding: "0px 4px",
|
|
2792
|
+
minWidth: 0,
|
|
2793
|
+
variants: [
|
|
2794
|
+
{
|
|
2795
|
+
props: { variant: "standard" },
|
|
2796
|
+
style: {
|
|
2797
|
+
color: theme.palette.text.primary
|
|
2798
|
+
}
|
|
2799
|
+
},
|
|
2800
|
+
{
|
|
2801
|
+
props: { variant: "outlined" },
|
|
2802
|
+
style: {
|
|
2803
|
+
color: theme.palette.text.primary
|
|
2804
|
+
}
|
|
2805
|
+
}
|
|
2806
|
+
]
|
|
2807
|
+
}),
|
|
2808
|
+
icon: ({ theme }) => ({
|
|
2809
|
+
padding: "4px",
|
|
2810
|
+
marginRight: 0,
|
|
2811
|
+
display: "flex",
|
|
2812
|
+
alignItems: "center",
|
|
2813
|
+
borderRadius: 100,
|
|
2814
|
+
variants: [
|
|
2815
|
+
{
|
|
2816
|
+
props: { variant: "standard", color: "success" },
|
|
2817
|
+
style: {
|
|
2818
|
+
backgroundColor: theme.palette.success[100]
|
|
2819
|
+
}
|
|
2820
|
+
},
|
|
2821
|
+
{
|
|
2822
|
+
props: { variant: "standard", color: "error" },
|
|
2823
|
+
style: {
|
|
2824
|
+
backgroundColor: theme.palette.error[100]
|
|
2825
|
+
}
|
|
2826
|
+
},
|
|
2827
|
+
{
|
|
2828
|
+
props: { variant: "standard", color: "info" },
|
|
2829
|
+
style: {
|
|
2830
|
+
backgroundColor: theme.palette.info[100]
|
|
2831
|
+
}
|
|
2832
|
+
},
|
|
2833
|
+
{
|
|
2834
|
+
props: { variant: "standard", color: "warning" },
|
|
2835
|
+
style: {
|
|
2836
|
+
backgroundColor: theme.palette.warning[100]
|
|
2837
|
+
}
|
|
2838
|
+
}
|
|
2839
|
+
]
|
|
2840
|
+
}),
|
|
2841
|
+
action: ({ theme }) => ({
|
|
2842
|
+
display: "flex",
|
|
2843
|
+
gap: 1.5,
|
|
2844
|
+
padding: "0px",
|
|
2845
|
+
variants: [
|
|
2846
|
+
{
|
|
2847
|
+
props: { variant: "standard" },
|
|
2848
|
+
style: {
|
|
2849
|
+
color: theme.palette.action.active
|
|
2850
|
+
}
|
|
2851
|
+
},
|
|
2852
|
+
{
|
|
2853
|
+
props: { variant: "outlined" },
|
|
2854
|
+
style: {
|
|
2855
|
+
color: theme.palette.action.active
|
|
2856
|
+
}
|
|
2857
|
+
}
|
|
2858
|
+
]
|
|
2859
|
+
}),
|
|
2860
|
+
root: {
|
|
2861
|
+
padding: "8px 12px 8px 12px",
|
|
2862
|
+
borderRadius: "8px",
|
|
2863
|
+
display: "flex",
|
|
2864
|
+
alignItems: "center",
|
|
2865
|
+
gap: 1.5,
|
|
2866
|
+
minWidth: "296px"
|
|
2867
|
+
}
|
|
2868
|
+
}
|
|
2869
|
+
},
|
|
2870
|
+
MuiAlertTitle: {
|
|
2871
|
+
defaultProps: {
|
|
2872
|
+
variant: "subtitle2"
|
|
2873
|
+
},
|
|
2874
|
+
styleOverrides: {
|
|
2875
|
+
root: {
|
|
2876
|
+
marginBottom: 0,
|
|
2877
|
+
marginTop: 2.5
|
|
2878
|
+
}
|
|
2879
|
+
}
|
|
2880
|
+
},
|
|
2881
|
+
MuiButton: {
|
|
2882
|
+
styleOverrides: {
|
|
2883
|
+
root: {
|
|
2884
|
+
fontFamily: "Roboto",
|
|
2885
|
+
textTransform: "unset",
|
|
2886
|
+
fontWeightLight: 300,
|
|
2887
|
+
fontSize: "13px",
|
|
2888
|
+
lineHeight: "normal",
|
|
2889
|
+
"@media(max-width: 885px)": {
|
|
2890
|
+
fontSize: 14
|
|
2891
|
+
}
|
|
2892
|
+
},
|
|
2893
|
+
startIcon: {
|
|
2894
|
+
marginLeft: 2
|
|
2895
|
+
},
|
|
2896
|
+
endIcon: {
|
|
2897
|
+
marginRight: 2
|
|
2898
|
+
},
|
|
2899
|
+
sizeSmall: {
|
|
2900
|
+
height: 26,
|
|
2901
|
+
".MuiSvgIcon-fontSizeSmall": {
|
|
2902
|
+
height: 16,
|
|
2903
|
+
width: 16
|
|
2904
|
+
},
|
|
2905
|
+
".MuiSvgIcon-fontSizeMedium": {
|
|
2906
|
+
height: 18,
|
|
2907
|
+
width: 18
|
|
2908
|
+
},
|
|
2909
|
+
".MuiSvgIcon-fontSizeLarge": {
|
|
2910
|
+
height: 20,
|
|
2911
|
+
width: 20
|
|
2912
|
+
}
|
|
2913
|
+
},
|
|
2914
|
+
sizeMedium: {
|
|
2915
|
+
height: 32,
|
|
2916
|
+
".MuiSvgIcon-fontSizeSmall": {
|
|
2917
|
+
height: 16,
|
|
2918
|
+
width: 16
|
|
2919
|
+
},
|
|
2920
|
+
".MuiSvgIcon-fontSizeMedium": {
|
|
2921
|
+
height: 18,
|
|
2922
|
+
width: 18
|
|
2923
|
+
},
|
|
2924
|
+
".MuiSvgIcon-fontSizeLarge": {
|
|
2925
|
+
height: 20,
|
|
2926
|
+
width: 20
|
|
2927
|
+
}
|
|
2928
|
+
},
|
|
2929
|
+
sizeLarge: {
|
|
2930
|
+
height: 38,
|
|
2931
|
+
".MuiSvgIcon-fontSizeSmall": {
|
|
2932
|
+
height: 16,
|
|
2933
|
+
width: 16
|
|
2934
|
+
},
|
|
2935
|
+
"&.MuiSvgIcon-fontSizeMedium": {
|
|
2936
|
+
height: 18,
|
|
2937
|
+
width: 18
|
|
2938
|
+
}
|
|
2939
|
+
}
|
|
2940
|
+
}
|
|
2941
|
+
},
|
|
2942
|
+
MuiButtonGroup: {
|
|
2943
|
+
defaultProps: {
|
|
2944
|
+
size: "small"
|
|
2945
|
+
}
|
|
2946
|
+
},
|
|
2947
|
+
MuiFab: {
|
|
2948
|
+
defaultProps: {
|
|
2949
|
+
size: "small"
|
|
2950
|
+
},
|
|
2951
|
+
styleOverrides: {
|
|
2952
|
+
circular: {
|
|
2953
|
+
boxShadow: "0px 1px 18px 0px rgba(24, 39, 75, 0.12), 0px 6px 10px 0px rgba(24, 39, 75, 0.14), 0px 3px 5px -1px rgba(24, 39, 75, 0.20)",
|
|
2954
|
+
sizeSmall: {
|
|
2955
|
+
height: 36,
|
|
2956
|
+
width: 36,
|
|
2957
|
+
svg: {
|
|
2958
|
+
height: 20,
|
|
2959
|
+
width: 20
|
|
2960
|
+
}
|
|
2961
|
+
},
|
|
2962
|
+
sizeMedium: {
|
|
2963
|
+
height: 48,
|
|
2964
|
+
width: 48,
|
|
2965
|
+
svg: {
|
|
2966
|
+
height: 22,
|
|
2967
|
+
width: 22
|
|
2968
|
+
}
|
|
2969
|
+
},
|
|
2970
|
+
sizeLarge: {
|
|
2971
|
+
height: 56,
|
|
2972
|
+
width: 56,
|
|
2973
|
+
svg: {
|
|
2974
|
+
height: 24,
|
|
2975
|
+
width: 24
|
|
2976
|
+
}
|
|
2977
|
+
}
|
|
2978
|
+
},
|
|
2979
|
+
extended: {
|
|
2980
|
+
gap: 1,
|
|
2981
|
+
boxShadow: " 0px 1px 18px 0px rgba(24, 39, 75, 0.12), 0px 6px 10px 0px rgba(24, 39, 75, 0.14), 0px 3px 5px -1px rgba(24, 39, 75, 0.20)",
|
|
2982
|
+
sizeSmall: {
|
|
2983
|
+
height: 32,
|
|
2984
|
+
svg: {
|
|
2985
|
+
height: 20,
|
|
2986
|
+
width: 20,
|
|
2987
|
+
marginRight: 4
|
|
2988
|
+
}
|
|
2989
|
+
},
|
|
2990
|
+
sizeMedium: {
|
|
2991
|
+
height: 38,
|
|
2992
|
+
svg: {
|
|
2993
|
+
height: 22,
|
|
2994
|
+
width: 22,
|
|
2995
|
+
marginRight: 4
|
|
2996
|
+
}
|
|
2997
|
+
},
|
|
2998
|
+
sizeLarge: {
|
|
2999
|
+
height: 48,
|
|
3000
|
+
svg: {
|
|
3001
|
+
height: 24,
|
|
3002
|
+
width: 24,
|
|
3003
|
+
marginRight: 4
|
|
3004
|
+
}
|
|
3005
|
+
}
|
|
3006
|
+
},
|
|
3007
|
+
root: {
|
|
3008
|
+
textTransform: "capitalize"
|
|
3009
|
+
}
|
|
3010
|
+
}
|
|
3011
|
+
},
|
|
3012
|
+
MuiFormControl: {
|
|
3013
|
+
defaultProps: {
|
|
3014
|
+
size: "small",
|
|
3015
|
+
margin: "none"
|
|
3016
|
+
}
|
|
3017
|
+
},
|
|
3018
|
+
MuiFormHelperText: {
|
|
3019
|
+
defaultProps: {
|
|
3020
|
+
margin: "dense"
|
|
3021
|
+
}
|
|
3022
|
+
},
|
|
3023
|
+
MuiSvgIcon: {
|
|
3024
|
+
styleOverrides: {
|
|
3025
|
+
fontSizeLarge: {
|
|
3026
|
+
width: 35,
|
|
3027
|
+
height: 35,
|
|
3028
|
+
fontSize: 35
|
|
3029
|
+
},
|
|
3030
|
+
fontSizeMedium: {
|
|
3031
|
+
width: 20,
|
|
3032
|
+
height: 20,
|
|
3033
|
+
fontSize: 20
|
|
3034
|
+
},
|
|
3035
|
+
fontSizeSmall: {
|
|
3036
|
+
width: 16,
|
|
3037
|
+
height: 16,
|
|
3038
|
+
fontSize: 16
|
|
3039
|
+
}
|
|
3040
|
+
}
|
|
3041
|
+
},
|
|
3042
|
+
MuiIconButton: {
|
|
3043
|
+
defaultProps: {
|
|
3044
|
+
color: "inherit"
|
|
3045
|
+
},
|
|
3046
|
+
styleOverrides: {
|
|
3047
|
+
sizeSmall: {
|
|
3048
|
+
padding: 3
|
|
3049
|
+
},
|
|
3050
|
+
sizeMedium: {
|
|
3051
|
+
padding: 8
|
|
3052
|
+
},
|
|
3053
|
+
sizeLarge: {
|
|
3054
|
+
padding: 12
|
|
3055
|
+
}
|
|
3056
|
+
}
|
|
3057
|
+
},
|
|
3058
|
+
MuiInputBase: {
|
|
3059
|
+
defaultProps: {
|
|
3060
|
+
margin: "none"
|
|
3061
|
+
},
|
|
3062
|
+
styleOverrides: {
|
|
3063
|
+
root: {
|
|
3064
|
+
"&.MuiInput-underline": {
|
|
3065
|
+
marginTop: 9
|
|
3066
|
+
},
|
|
3067
|
+
".MuiOutlinedInput-input.MuiInputBase-inputSizeSmall": {
|
|
3068
|
+
paddingBlock: 6.51
|
|
3069
|
+
},
|
|
3070
|
+
".MuiOutlinedInput-input": {
|
|
3071
|
+
paddingBlock: 14
|
|
3072
|
+
}
|
|
3073
|
+
}
|
|
3074
|
+
}
|
|
3075
|
+
},
|
|
3076
|
+
MuiOutlinedInput: {
|
|
3077
|
+
styleOverrides: {
|
|
3078
|
+
notchedOutline: {
|
|
3079
|
+
borderColor: "rgba(16, 24, 64, 0.23)"
|
|
3080
|
+
}
|
|
3081
|
+
}
|
|
3082
|
+
},
|
|
3083
|
+
MuiAutocomplete: {
|
|
3084
|
+
defaultProps: {
|
|
3085
|
+
size: "small"
|
|
3086
|
+
},
|
|
3087
|
+
styleOverrides: {
|
|
3088
|
+
root: {
|
|
3089
|
+
"&.MuiAutocomplete-root .MuiOutlinedInput-root": {
|
|
3090
|
+
padding: "6px 14px 6px 10px"
|
|
3091
|
+
},
|
|
3092
|
+
"& .MuiAutocomplete-endAdornment": {
|
|
3093
|
+
top: "calc(50% - 12px)",
|
|
3094
|
+
transform: "none"
|
|
3095
|
+
},
|
|
3096
|
+
"&.MuiAutocomplete-root .MuiOutlinedInput-root.MuiInputBase-sizeSmall": {
|
|
3097
|
+
paddingBlock: 3.5,
|
|
3098
|
+
paddingRight: 14,
|
|
3099
|
+
".MuiIconButton-sizeSmall .MuiAutocomplete-popupIndicator": {
|
|
3100
|
+
padding: 5
|
|
3101
|
+
}
|
|
3102
|
+
}
|
|
3103
|
+
}
|
|
3104
|
+
}
|
|
3105
|
+
},
|
|
3106
|
+
MuiInputLabel: {
|
|
3107
|
+
styleOverrides: {
|
|
3108
|
+
asterisk: ({ theme }) => ({
|
|
3109
|
+
color: theme.palette.error.main
|
|
3110
|
+
}),
|
|
3111
|
+
root: {
|
|
3112
|
+
display: "flex",
|
|
3113
|
+
gap: ".2rem",
|
|
3114
|
+
flexDirection: "row-reverse",
|
|
3115
|
+
fontSize: 13,
|
|
3116
|
+
fontStyle: "normal",
|
|
3117
|
+
fontWeight: 400,
|
|
3118
|
+
letterSpacing: "0.15px"
|
|
3119
|
+
},
|
|
3120
|
+
filled: {
|
|
3121
|
+
"&.MuiInputLabel-filled.MuiInputLabel-sizeSmall:not(.MuiInputLabel-shrink)": {
|
|
3122
|
+
transform: "translate(12px,15px) scale(1)"
|
|
3123
|
+
},
|
|
3124
|
+
"&.MuiInputLabel-filled.MuiInputLabel-sizeMedium:not(.MuiInputLabel-shrink)": {
|
|
3125
|
+
transform: "translate(12px,19px) scale(1)"
|
|
3126
|
+
}
|
|
3127
|
+
},
|
|
3128
|
+
standard: {
|
|
3129
|
+
"&.MuiInputLabel-standard.MuiInputLabel-sizeSmall:not(.MuiInputLabel-shrink)": {
|
|
3130
|
+
transform: "translate(0, 14px) scale(1)"
|
|
3131
|
+
},
|
|
3132
|
+
"&.MuiInputLabel-standard.MuiInputLabel-sizeMedium:not(.MuiInputLabel-shrink)": {
|
|
3133
|
+
transform: "translate(0, 16px) scale(1)"
|
|
3134
|
+
}
|
|
3135
|
+
},
|
|
3136
|
+
outlined: {
|
|
3137
|
+
"&.MuiInputLabel-outlined.MuiInputLabel-sizeSmall ": {
|
|
3138
|
+
transform: "translate(14px,8px) scale(1)"
|
|
3139
|
+
},
|
|
3140
|
+
"&.MuiInputLabel-outlined ": {
|
|
3141
|
+
transform: "translate(14px, 14px) scale(1)",
|
|
3142
|
+
"&.MuiInputLabel-shrink": {
|
|
3143
|
+
transform: "translate(14px, -7px) scale(0.75)"
|
|
3144
|
+
}
|
|
3145
|
+
}
|
|
3146
|
+
}
|
|
3147
|
+
},
|
|
3148
|
+
defaultProps: {
|
|
3149
|
+
margin: "dense"
|
|
3150
|
+
}
|
|
3151
|
+
},
|
|
3152
|
+
MuiCard: {
|
|
3153
|
+
styleOverrides: {
|
|
3154
|
+
root: {
|
|
3155
|
+
overflow: "initial",
|
|
3156
|
+
boxShadow: "0px 2px 1px -2px rgba(24, 39, 75, 0.20), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 1px 3px 0px rgba(24, 39, 75, 0.12)"
|
|
3157
|
+
}
|
|
3158
|
+
}
|
|
3159
|
+
},
|
|
3160
|
+
MuiCardHeader: {
|
|
3161
|
+
styleOverrides: {
|
|
3162
|
+
root: {
|
|
3163
|
+
padding: "8px 16px "
|
|
3164
|
+
}
|
|
3165
|
+
}
|
|
3166
|
+
},
|
|
3167
|
+
MuiCardContent: {
|
|
3168
|
+
styleOverrides: {
|
|
3169
|
+
root: {
|
|
3170
|
+
padding: "8px 16px "
|
|
3171
|
+
}
|
|
3172
|
+
}
|
|
3173
|
+
},
|
|
3174
|
+
MuiCardActions: {
|
|
3175
|
+
styleOverrides: {
|
|
3176
|
+
root: {
|
|
3177
|
+
padding: "8px 16px"
|
|
3178
|
+
}
|
|
3179
|
+
}
|
|
3180
|
+
},
|
|
3181
|
+
MuiRadio: {
|
|
3182
|
+
variants: [
|
|
3183
|
+
{
|
|
3184
|
+
props: { size: "small" },
|
|
3185
|
+
style: {
|
|
3186
|
+
padding: 3
|
|
3187
|
+
}
|
|
3188
|
+
},
|
|
3189
|
+
{
|
|
3190
|
+
props: { size: "medium" },
|
|
3191
|
+
style: {
|
|
3192
|
+
padding: 4
|
|
3193
|
+
}
|
|
3194
|
+
},
|
|
3195
|
+
{
|
|
3196
|
+
props: { size: "large" },
|
|
3197
|
+
style: {
|
|
3198
|
+
padding: 9,
|
|
3199
|
+
"& .MuiSvgIcon-fontSizeLarge": {
|
|
3200
|
+
width: 24,
|
|
3201
|
+
height: 24,
|
|
3202
|
+
fontSize: 24
|
|
3203
|
+
}
|
|
3204
|
+
}
|
|
3205
|
+
}
|
|
3206
|
+
],
|
|
3207
|
+
defaultProps: {
|
|
3208
|
+
size: "small"
|
|
3209
|
+
}
|
|
3210
|
+
},
|
|
3211
|
+
MuiSwitch: {
|
|
3212
|
+
variants: [
|
|
3213
|
+
{
|
|
3214
|
+
props: { size: "small" },
|
|
3215
|
+
style: {
|
|
3216
|
+
height: 22,
|
|
3217
|
+
".MuiSwitch-switchBase": {
|
|
3218
|
+
padding: 3
|
|
3219
|
+
}
|
|
3220
|
+
}
|
|
3221
|
+
}
|
|
3222
|
+
],
|
|
3223
|
+
defaultProps: {
|
|
3224
|
+
size: "small"
|
|
3225
|
+
}
|
|
3226
|
+
},
|
|
3227
|
+
MuiTextField: {
|
|
3228
|
+
defaultProps: {
|
|
3229
|
+
size: "small",
|
|
3230
|
+
margin: "none"
|
|
3231
|
+
},
|
|
3232
|
+
variants: [
|
|
3233
|
+
{
|
|
3234
|
+
props: { variant: "standard" },
|
|
3235
|
+
style: {
|
|
3236
|
+
".MuiInputBase-input.MuiInputBase-inputSizeSmall": {
|
|
3237
|
+
padding: 1.5
|
|
3238
|
+
}
|
|
3239
|
+
}
|
|
3240
|
+
}
|
|
3241
|
+
]
|
|
3242
|
+
},
|
|
3243
|
+
MuiList: {
|
|
3244
|
+
defaultProps: {
|
|
3245
|
+
dense: false
|
|
3246
|
+
},
|
|
3247
|
+
styleOverrides: {
|
|
3248
|
+
padding: {
|
|
3249
|
+
".MuiListItem-padding": {
|
|
3250
|
+
paddingBlock: 1
|
|
3251
|
+
}
|
|
3252
|
+
},
|
|
3253
|
+
dense: {
|
|
3254
|
+
".MuiListItem-dense": {
|
|
3255
|
+
padding: "0.25px 0px 0.25px 16px"
|
|
3256
|
+
}
|
|
3257
|
+
}
|
|
3258
|
+
}
|
|
3259
|
+
},
|
|
3260
|
+
MuiListItemButton: {
|
|
3261
|
+
styleOverrides: {
|
|
3262
|
+
dense: {
|
|
3263
|
+
padding: "4px 16px 4px 16px "
|
|
3264
|
+
},
|
|
3265
|
+
root: {
|
|
3266
|
+
padding: "8.21px 16px",
|
|
3267
|
+
".MuiListItemText-multiline": {
|
|
3268
|
+
marginBlock: "4px"
|
|
3269
|
+
}
|
|
3270
|
+
}
|
|
3271
|
+
}
|
|
3272
|
+
},
|
|
3273
|
+
MuiMenuItem: {
|
|
3274
|
+
styleOverrides: {
|
|
3275
|
+
dense: {
|
|
3276
|
+
height: 30,
|
|
3277
|
+
minHeight: 30,
|
|
3278
|
+
".MuiListItemText-root > .MuiTypography-root": {
|
|
3279
|
+
lineHeight: "14.3px",
|
|
3280
|
+
letterSpacing: 0.15
|
|
3281
|
+
}
|
|
3282
|
+
},
|
|
3283
|
+
root: {
|
|
3284
|
+
padding: "7px 16px 7px 16px",
|
|
3285
|
+
".MuiMenuList-root": {
|
|
3286
|
+
height: 34,
|
|
3287
|
+
minHeight: 34
|
|
3288
|
+
},
|
|
3289
|
+
".MuiListItemText-root > .MuiTypography-root": {
|
|
3290
|
+
lineHeight: "20px",
|
|
3291
|
+
letterSpacing: 0.17
|
|
3292
|
+
},
|
|
3293
|
+
".MuiListItemIcon-root": {
|
|
3294
|
+
minWidth: 32
|
|
3295
|
+
}
|
|
3296
|
+
}
|
|
3297
|
+
}
|
|
3298
|
+
},
|
|
3299
|
+
MuiTableBody: {
|
|
3300
|
+
styleOverrides: {
|
|
3301
|
+
root: {
|
|
3302
|
+
".MuiTableCell-body.MuiTableCell-sizeMedium": {
|
|
3303
|
+
padding: "16px !important"
|
|
3304
|
+
}
|
|
3305
|
+
}
|
|
3306
|
+
}
|
|
3307
|
+
},
|
|
3308
|
+
MuiTableCell: {
|
|
3309
|
+
styleOverrides: {
|
|
3310
|
+
sizeMedium: {
|
|
3311
|
+
padding: 13
|
|
3312
|
+
}
|
|
3313
|
+
}
|
|
3314
|
+
},
|
|
3315
|
+
MuiTable: {
|
|
3316
|
+
defaultProps: {
|
|
3317
|
+
size: "small"
|
|
3318
|
+
},
|
|
3319
|
+
styleOverrides: {
|
|
3320
|
+
root: {
|
|
3321
|
+
minWidth: 630
|
|
3322
|
+
}
|
|
3323
|
+
}
|
|
3324
|
+
}
|
|
3325
|
+
};
|
|
3326
|
+
|
|
3327
|
+
// src/Theme/palette.ts
|
|
3328
|
+
var BasicPalette = {
|
|
3329
|
+
default: {
|
|
3330
|
+
main: "#E4E5E7",
|
|
3331
|
+
dark: "#D1D3D7",
|
|
3332
|
+
light: "#F2F2F3",
|
|
3333
|
+
contrastText: "#5A5E73"
|
|
3334
|
+
},
|
|
3335
|
+
chipInfo: {
|
|
3336
|
+
main: "#C0E8FC",
|
|
3337
|
+
dark: "#9CD8FA",
|
|
3338
|
+
light: "#E0F4FE",
|
|
3339
|
+
contrastText: "#5A5E73"
|
|
3340
|
+
},
|
|
3341
|
+
chipWarning: {
|
|
3342
|
+
main: "#FCE4C0",
|
|
3343
|
+
dark: "#FAD19C",
|
|
3344
|
+
light: "#F3F2F0",
|
|
3345
|
+
contrastText: "#5A5E73"
|
|
3346
|
+
},
|
|
3347
|
+
chipError: {
|
|
3348
|
+
main: "#FCD4D4",
|
|
3349
|
+
dark: "#F4B9B9",
|
|
3350
|
+
light: "#FEEAEA",
|
|
3351
|
+
contrastText: "#5A5E73"
|
|
3352
|
+
},
|
|
3353
|
+
chipSuccess: {
|
|
3354
|
+
main: "#DDF8C3",
|
|
3355
|
+
dark: "#C8F3A2",
|
|
3356
|
+
light: "#EFFCE2",
|
|
3357
|
+
contrastText: "#5A5E73"
|
|
3358
|
+
},
|
|
3359
|
+
error: {
|
|
3360
|
+
50: "#F9E8E8",
|
|
3361
|
+
100: "#F1C7C7",
|
|
3362
|
+
200: "#E8A1A1",
|
|
3363
|
+
300: "#DF7B7B",
|
|
3364
|
+
light: "#D85F5F",
|
|
3365
|
+
main: "#D14343",
|
|
3366
|
+
600: "#CC3D3D",
|
|
3367
|
+
700: "#C63434",
|
|
3368
|
+
800: "#C02C2C",
|
|
3369
|
+
dark: "#B51E1E",
|
|
3370
|
+
A100: "#FFECEC",
|
|
3371
|
+
A200: "#FFB9B9",
|
|
3372
|
+
A400: "#FF8686",
|
|
3373
|
+
A700: "#FF6D6D",
|
|
3374
|
+
contrastText: "#ffffff"
|
|
3375
|
+
},
|
|
3376
|
+
warning: {
|
|
3377
|
+
50: "#FFF0E0",
|
|
3378
|
+
100: "#FEDAB3",
|
|
3379
|
+
200: "#FDC280",
|
|
3380
|
+
300: "#FCAA4D",
|
|
3381
|
+
light: "#FC9726",
|
|
3382
|
+
main: "#FB8500",
|
|
3383
|
+
600: "#FA7D00",
|
|
3384
|
+
700: "#FA7200",
|
|
3385
|
+
800: "#F96800",
|
|
3386
|
+
dark: "#F85500",
|
|
3387
|
+
A100: "#FFFFFF",
|
|
3388
|
+
A200: "#FFF1EB",
|
|
3389
|
+
A400: "#FFCCB8",
|
|
3390
|
+
A700: "#FFBA9F",
|
|
3391
|
+
contrastText: "#ffffff"
|
|
3392
|
+
},
|
|
3393
|
+
info: {
|
|
3394
|
+
50: "#E6F3F8",
|
|
3395
|
+
100: "#C0E2EE",
|
|
3396
|
+
200: "#96CFE2",
|
|
3397
|
+
300: "#6CBCD6",
|
|
3398
|
+
light: "#4DADCE",
|
|
3399
|
+
main: "#2D9FC5",
|
|
3400
|
+
600: "#2897BF",
|
|
3401
|
+
700: "#228DB8",
|
|
3402
|
+
800: "#1C83B0",
|
|
3403
|
+
dark: "#1172A3",
|
|
3404
|
+
A100: "#D4EFFF",
|
|
3405
|
+
A200: "#A1DCFF",
|
|
3406
|
+
A400: "#6ECAFF",
|
|
3407
|
+
A700: "#54C1FF",
|
|
3408
|
+
contrastText: "#ffffff"
|
|
3409
|
+
},
|
|
3410
|
+
success: {
|
|
3411
|
+
50: "#F2F9E7",
|
|
3412
|
+
100: "#DDEFC4",
|
|
3413
|
+
200: "#C7E49D",
|
|
3414
|
+
300: "#B1D975",
|
|
3415
|
+
light: "#A0D158",
|
|
3416
|
+
main: "#8FC93A",
|
|
3417
|
+
600: "#87C334",
|
|
3418
|
+
700: "#7CBC2C",
|
|
3419
|
+
800: "#72B525",
|
|
3420
|
+
dark: "#60A918",
|
|
3421
|
+
A100: "#EDFFDE",
|
|
3422
|
+
A200: "#D2FFAB",
|
|
3423
|
+
A400: "#B6FF78",
|
|
3424
|
+
A700: "#A9FF5E",
|
|
3425
|
+
contrastText: "#ffffff"
|
|
3426
|
+
},
|
|
3427
|
+
grey: {
|
|
3428
|
+
50: "#FBFBFB",
|
|
3429
|
+
100: "#F5F5F6",
|
|
3430
|
+
200: "#EAEBEC",
|
|
3431
|
+
300: "#DCDEE0",
|
|
3432
|
+
400: "#CED1D4",
|
|
3433
|
+
500: "#C4C7CA",
|
|
3434
|
+
600: "#B9BDC1",
|
|
3435
|
+
700: "#B2B7BB",
|
|
3436
|
+
800: "#AAAEB3",
|
|
3437
|
+
900: "#A2A6AB",
|
|
3438
|
+
A100: "#FFFFFF",
|
|
3439
|
+
A200: "#FFFFFF",
|
|
3440
|
+
A400: "#D4EAFF",
|
|
3441
|
+
A700: "#BBDDFF"
|
|
3442
|
+
},
|
|
3443
|
+
text: {
|
|
3444
|
+
primary: "#101840de",
|
|
3445
|
+
secondary: "#10184099",
|
|
3446
|
+
disabled: "#10184061"
|
|
3447
|
+
},
|
|
3448
|
+
action: {
|
|
3449
|
+
active: "#1018408a",
|
|
3450
|
+
hover: "#1018400a",
|
|
3451
|
+
selected: "#10184014",
|
|
3452
|
+
disabled: "#10184042",
|
|
3453
|
+
disabledBackground: "#1018401f",
|
|
3454
|
+
focus: "#1018401f"
|
|
3455
|
+
},
|
|
3456
|
+
background: {
|
|
3457
|
+
default: "#f5f5f5",
|
|
3458
|
+
paper: "#fff"
|
|
3459
|
+
},
|
|
3460
|
+
common: {
|
|
3461
|
+
black: "#000",
|
|
3462
|
+
white: "#fff"
|
|
3463
|
+
},
|
|
3464
|
+
divider: "#0000001f"
|
|
3465
|
+
};
|
|
3466
|
+
var paletteERP = __spreadValues({
|
|
3467
|
+
primary: {
|
|
3468
|
+
50: "#E4ECF4",
|
|
3469
|
+
100: "#BCD0E3",
|
|
3470
|
+
200: "#8FB1D0",
|
|
3471
|
+
300: "#6392BD",
|
|
3472
|
+
light: "#417AAE",
|
|
3473
|
+
main: "#2063A0",
|
|
3474
|
+
600: "#1C5B98",
|
|
3475
|
+
700: "#18518E",
|
|
3476
|
+
800: "#134784",
|
|
3477
|
+
dark: "#0B3573",
|
|
3478
|
+
A100: "#A5C5FF",
|
|
3479
|
+
A200: "#72A4FF",
|
|
3480
|
+
A400: "#3F83FF",
|
|
3481
|
+
A700: "#2572FF",
|
|
3482
|
+
contrastText: "#ffffff"
|
|
3483
|
+
},
|
|
3484
|
+
secondary: {
|
|
3485
|
+
50: "#E0F7FA",
|
|
3486
|
+
100: "#B3EBF2",
|
|
3487
|
+
200: "#80DEEA",
|
|
3488
|
+
300: "#4DD0E1",
|
|
3489
|
+
light: "#26C6DA",
|
|
3490
|
+
main: "#00BCD4",
|
|
3491
|
+
600: "#00B6CF",
|
|
3492
|
+
700: "#00ADC9",
|
|
3493
|
+
800: "#00A5C3",
|
|
3494
|
+
dark: "#0097B9",
|
|
3495
|
+
A100: "#E2F9FF",
|
|
3496
|
+
A200: "#AFEEFF",
|
|
3497
|
+
A400: "#7CE3FF",
|
|
3498
|
+
A700: "#63DDFF",
|
|
3499
|
+
contrastText: "#ffffff"
|
|
3500
|
+
},
|
|
3501
|
+
chipPrimary: {
|
|
3502
|
+
main: "#C4E1F5",
|
|
3503
|
+
dark: "#A2CDEE",
|
|
3504
|
+
light: "#E2F0FA",
|
|
3505
|
+
contrastText: "#5A5E73"
|
|
3506
|
+
},
|
|
3507
|
+
chipSecondary: {
|
|
3508
|
+
main: "#C4F6FD",
|
|
3509
|
+
dark: "#A8F1FB",
|
|
3510
|
+
light: "#E0FBFE",
|
|
3511
|
+
contrastText: "#545E73"
|
|
3512
|
+
}
|
|
3513
|
+
}, BasicPalette);
|
|
3514
|
+
var paletteADPRO = __spreadValues({
|
|
3515
|
+
primary: {
|
|
3516
|
+
50: "#F8FAFB",
|
|
3517
|
+
100: "#E6EFF0",
|
|
3518
|
+
200: "#D2E3E4",
|
|
3519
|
+
300: "#82C6CB",
|
|
3520
|
+
light: "#2B9DA7",
|
|
3521
|
+
main: "#058C97",
|
|
3522
|
+
600: "#04848F",
|
|
3523
|
+
700: "#047984",
|
|
3524
|
+
800: "#036F7A",
|
|
3525
|
+
dark: "#015C69",
|
|
3526
|
+
A100: "#98F0FF",
|
|
3527
|
+
A200: "#65E9FF",
|
|
3528
|
+
A400: "#32E1FF",
|
|
3529
|
+
A700: "#32E1FF"
|
|
3530
|
+
},
|
|
3531
|
+
secondary: {
|
|
3532
|
+
50: "#E0F7FA",
|
|
3533
|
+
100: "#B3EBF2",
|
|
3534
|
+
200: "#80DEEA",
|
|
3535
|
+
300: "#4DD0E1",
|
|
3536
|
+
light: "#26C6DA",
|
|
3537
|
+
main: "#00BCD4",
|
|
3538
|
+
600: "#00B6CF",
|
|
3539
|
+
700: "#00ADC9",
|
|
3540
|
+
800: "#00A5C3",
|
|
3541
|
+
dark: "#0097B9",
|
|
3542
|
+
A100: "#E2F9FF",
|
|
3543
|
+
A200: "#AFEEFF",
|
|
3544
|
+
A400: "#7CE3FF",
|
|
3545
|
+
A700: "#63DDFF",
|
|
3546
|
+
contrastText: "#ffffff"
|
|
3547
|
+
},
|
|
3548
|
+
chipPrimary: {
|
|
3549
|
+
main: "#CEE7E9",
|
|
3550
|
+
dark: "#B2D9DC",
|
|
3551
|
+
light: "#E3F1F2",
|
|
3552
|
+
contrastText: "#5A5E73"
|
|
3553
|
+
},
|
|
3554
|
+
chipSecondary: {
|
|
3555
|
+
main: "#C4F6FD",
|
|
3556
|
+
dark: "#A8F1FB",
|
|
3557
|
+
light: "#E0FBFE",
|
|
3558
|
+
contrastText: "#545E73"
|
|
3559
|
+
}
|
|
3560
|
+
}, BasicPalette);
|
|
3561
|
+
var paletteADC = __spreadValues({
|
|
3562
|
+
primary: {
|
|
3563
|
+
50: "#F8FAFB",
|
|
3564
|
+
100: "#E6EFF0",
|
|
3565
|
+
200: "#D2E3E4",
|
|
3566
|
+
300: "#82C6CB",
|
|
3567
|
+
light: "#2B9DA7",
|
|
3568
|
+
main: "#058C97",
|
|
3569
|
+
600: "#04848F",
|
|
3570
|
+
700: "#047984",
|
|
3571
|
+
800: "#036F7A",
|
|
3572
|
+
dark: "#015C69",
|
|
3573
|
+
A100: "#98F0FF",
|
|
3574
|
+
A200: "#65E9FF",
|
|
3575
|
+
A400: "#32E1FF",
|
|
3576
|
+
A700: "#32E1FF"
|
|
3577
|
+
},
|
|
3578
|
+
secondary: {
|
|
3579
|
+
50: "#E0F7FA",
|
|
3580
|
+
100: "#B3EBF2",
|
|
3581
|
+
200: "#80DEEA",
|
|
3582
|
+
300: "#4DD0E1",
|
|
3583
|
+
light: "#26C6DA",
|
|
3584
|
+
main: "#00BCD4",
|
|
3585
|
+
600: "#00B6CF",
|
|
3586
|
+
700: "#00ADC9",
|
|
3587
|
+
800: "#00A5C3",
|
|
3588
|
+
dark: "#0097B9",
|
|
3589
|
+
A100: "#E2F9FF",
|
|
3590
|
+
A200: "#AFEEFF",
|
|
3591
|
+
A400: "#7CE3FF",
|
|
3592
|
+
A700: "#63DDFF",
|
|
3593
|
+
contrastText: "#ffffff"
|
|
3594
|
+
},
|
|
3595
|
+
chipPrimary: {
|
|
3596
|
+
main: "#D4D8F7",
|
|
3597
|
+
dark: "#B2B9F0",
|
|
3598
|
+
light: "#E5E8FA",
|
|
3599
|
+
contrastText: "#5A5E73"
|
|
3600
|
+
},
|
|
3601
|
+
chipSecondary: {
|
|
3602
|
+
main: "#E0E0E0",
|
|
3603
|
+
dark: "#D1D1D1",
|
|
3604
|
+
light: "#EBEBEB",
|
|
3605
|
+
contrastText: "#545E73"
|
|
3606
|
+
}
|
|
3607
|
+
}, BasicPalette);
|
|
3608
|
+
|
|
3609
|
+
// node_modules/@mui/system/esm/createBreakpoints/createBreakpoints.js
|
|
3610
|
+
var sortBreakpointsValues = (values) => {
|
|
3611
|
+
const breakpointsAsArray = Object.keys(values).map((key) => ({
|
|
3612
|
+
key,
|
|
3613
|
+
val: values[key]
|
|
3614
|
+
})) || [];
|
|
3615
|
+
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
|
|
3616
|
+
return breakpointsAsArray.reduce((acc, obj) => {
|
|
3617
|
+
return __spreadProps(__spreadValues({}, acc), {
|
|
3618
|
+
[obj.key]: obj.val
|
|
3619
|
+
});
|
|
3620
|
+
}, {});
|
|
3621
|
+
};
|
|
3622
|
+
function createBreakpoints(breakpoints2) {
|
|
3623
|
+
const _a = breakpoints2, {
|
|
3624
|
+
values: values = {
|
|
3625
|
+
xs: 0,
|
|
3626
|
+
// phone
|
|
3627
|
+
sm: 600,
|
|
3628
|
+
// tablet
|
|
3629
|
+
md: 900,
|
|
3630
|
+
// small laptop
|
|
3631
|
+
lg: 1200,
|
|
3632
|
+
// desktop
|
|
3633
|
+
xl: 1536
|
|
3634
|
+
// large screen
|
|
3635
|
+
},
|
|
3636
|
+
unit = "px",
|
|
3637
|
+
step = 5
|
|
3638
|
+
} = _a, other = __objRest(_a, [
|
|
3639
|
+
// The breakpoint **start** at this value.
|
|
3640
|
+
// For instance with the first breakpoint xs: [xs, sm).
|
|
3641
|
+
"values",
|
|
3642
|
+
"unit",
|
|
3643
|
+
"step"
|
|
3644
|
+
]);
|
|
3645
|
+
const sortedValues = sortBreakpointsValues(values);
|
|
3646
|
+
const keys = Object.keys(sortedValues);
|
|
3647
|
+
function up(key) {
|
|
3648
|
+
const value = typeof values[key] === "number" ? values[key] : key;
|
|
3649
|
+
return `@media (min-width:${value}${unit})`;
|
|
3650
|
+
}
|
|
3651
|
+
function down(key) {
|
|
3652
|
+
const value = typeof values[key] === "number" ? values[key] : key;
|
|
3653
|
+
return `@media (max-width:${value - step / 100}${unit})`;
|
|
3654
|
+
}
|
|
3655
|
+
function between(start, end) {
|
|
3656
|
+
const endIndex = keys.indexOf(end);
|
|
3657
|
+
return `@media (min-width:${typeof values[start] === "number" ? values[start] : start}${unit}) and (max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === "number" ? values[keys[endIndex]] : end) - step / 100}${unit})`;
|
|
3658
|
+
}
|
|
3659
|
+
function only(key) {
|
|
3660
|
+
if (keys.indexOf(key) + 1 < keys.length) {
|
|
3661
|
+
return between(key, keys[keys.indexOf(key) + 1]);
|
|
3662
|
+
}
|
|
3663
|
+
return up(key);
|
|
3664
|
+
}
|
|
3665
|
+
function not(key) {
|
|
3666
|
+
const keyIndex = keys.indexOf(key);
|
|
3667
|
+
if (keyIndex === 0) {
|
|
3668
|
+
return up(keys[1]);
|
|
3669
|
+
}
|
|
3670
|
+
if (keyIndex === keys.length - 1) {
|
|
3671
|
+
return down(keys[keyIndex]);
|
|
3672
|
+
}
|
|
3673
|
+
return between(key, keys[keys.indexOf(key) + 1]).replace("@media", "@media not all and");
|
|
3674
|
+
}
|
|
3675
|
+
return __spreadValues({
|
|
3676
|
+
keys,
|
|
3677
|
+
values: sortedValues,
|
|
3678
|
+
up,
|
|
3679
|
+
down,
|
|
3680
|
+
between,
|
|
3681
|
+
only,
|
|
3682
|
+
not,
|
|
3683
|
+
unit
|
|
3684
|
+
}, other);
|
|
3685
|
+
}
|
|
3686
|
+
|
|
3687
|
+
// src/Theme/breakpoints.ts
|
|
3688
|
+
var breakpoints = createBreakpoints({
|
|
3689
|
+
values: {
|
|
3690
|
+
xs: 0,
|
|
3691
|
+
sm: 600,
|
|
3692
|
+
md: 960,
|
|
3693
|
+
lg: 1280,
|
|
3694
|
+
xl: 1920
|
|
3695
|
+
}
|
|
3696
|
+
});
|
|
3697
|
+
|
|
3698
|
+
// src/Theme/mixins.ts
|
|
3699
|
+
var mixins = {
|
|
3700
|
+
toolbar: {
|
|
3701
|
+
minHeight: 48,
|
|
3702
|
+
[breakpoints.down("md")]: {
|
|
3703
|
+
minHeight: 52
|
|
3704
|
+
}
|
|
3705
|
+
}
|
|
3706
|
+
};
|
|
3707
|
+
|
|
3708
|
+
// src/Theme/module.ts
|
|
3709
|
+
var import_Typography = require("@mui/material/Typography");
|
|
3710
|
+
var import_Radio = require("@mui/material/Radio");
|
|
3711
|
+
var import_Chip = require("@mui/material/Chip");
|
|
3712
|
+
var import_Checkbox = require("@mui/material/Checkbox");
|
|
3713
|
+
var import_styles2 = require("@mui/material/styles");
|
|
3714
|
+
|
|
3715
|
+
// src/Theme/typography.ts
|
|
3716
|
+
var typography = {
|
|
3717
|
+
fontSize: 13,
|
|
3718
|
+
body1: {
|
|
3719
|
+
fontFamily: "Roboto",
|
|
3720
|
+
fontSize: 14,
|
|
3721
|
+
fontWeight: 400,
|
|
3722
|
+
lineHeight: "16px",
|
|
3723
|
+
letterSpacing: "0.15px",
|
|
3724
|
+
"@media(max-width: 885px)": {
|
|
3725
|
+
fontSize: 15
|
|
3726
|
+
}
|
|
3727
|
+
},
|
|
3728
|
+
body2: {
|
|
3729
|
+
fontFamily: "Roboto",
|
|
3730
|
+
fontSize: 13,
|
|
3731
|
+
fontWeight: 400,
|
|
3732
|
+
lineHeight: "16px",
|
|
3733
|
+
letterSpacing: "0.17px",
|
|
3734
|
+
"@media(max-width: 885px)": {
|
|
3735
|
+
fontSize: 14
|
|
3736
|
+
}
|
|
3737
|
+
},
|
|
3738
|
+
body3: {
|
|
3739
|
+
fontFamily: "Roboto",
|
|
3740
|
+
fontWeight: 300,
|
|
3741
|
+
fontSize: 12,
|
|
3742
|
+
lineHeight: "16px",
|
|
3743
|
+
letterSpacing: "0.17px",
|
|
3744
|
+
[breakpoints.down("md")]: {
|
|
3745
|
+
fontSize: 11
|
|
3746
|
+
}
|
|
3747
|
+
},
|
|
3748
|
+
subtitle1: {
|
|
3749
|
+
fontFamily: "Roboto",
|
|
3750
|
+
fontSize: 14,
|
|
3751
|
+
fontWeight: 500,
|
|
3752
|
+
lineHeight: "16px",
|
|
3753
|
+
letterSpacing: "0.15px",
|
|
3754
|
+
"@media(max-width: 885px)": {
|
|
3755
|
+
fontSize: 15
|
|
3756
|
+
}
|
|
3757
|
+
},
|
|
3758
|
+
subtitle2: {
|
|
3759
|
+
fontFamily: "Roboto",
|
|
3760
|
+
fontSize: 13,
|
|
3761
|
+
fontWeight: 500,
|
|
3762
|
+
lineHeight: "16px",
|
|
3763
|
+
letterSpacing: "0.1px",
|
|
3764
|
+
"@media(max-width: 885px)": {
|
|
3765
|
+
fontSize: 14
|
|
3766
|
+
}
|
|
3767
|
+
},
|
|
3768
|
+
caption: {
|
|
3769
|
+
fontFamily: "Roboto",
|
|
3770
|
+
fontSize: 11,
|
|
3771
|
+
fontWeight: 400,
|
|
3772
|
+
lineHeight: "14px",
|
|
3773
|
+
letterSpacing: "0.4px",
|
|
3774
|
+
"@media(max-width: 885px)": {
|
|
3775
|
+
fontSize: 12
|
|
3776
|
+
}
|
|
3777
|
+
},
|
|
3778
|
+
overline: {
|
|
3779
|
+
fontFamily: "Roboto",
|
|
3780
|
+
fontSize: 11,
|
|
3781
|
+
fontWeight: 400,
|
|
3782
|
+
lineHeight: "24px",
|
|
3783
|
+
letterSpacing: "1px",
|
|
3784
|
+
"@media(max-width: 885px)": {
|
|
3785
|
+
fontSize: 12
|
|
3786
|
+
}
|
|
3787
|
+
},
|
|
3788
|
+
h6: {
|
|
3789
|
+
fontFamily: "Nunito",
|
|
3790
|
+
fontSize: 16,
|
|
3791
|
+
fontWeight: 600,
|
|
3792
|
+
lineHeight: "16px",
|
|
3793
|
+
letterSpacing: "0.15px",
|
|
3794
|
+
"@media(max-width: 885px)": {
|
|
3795
|
+
fontSize: 17
|
|
3796
|
+
}
|
|
3797
|
+
},
|
|
3798
|
+
h5: {
|
|
3799
|
+
fontFamily: "Nunito",
|
|
3800
|
+
fontSize: 18,
|
|
3801
|
+
fontWeight: 600,
|
|
3802
|
+
letterSpacing: 0,
|
|
3803
|
+
lineHeight: "24px"
|
|
3804
|
+
},
|
|
3805
|
+
h4: {
|
|
3806
|
+
fontFamily: "Nunito",
|
|
3807
|
+
fontSize: 22,
|
|
3808
|
+
fontWeight: 600,
|
|
3809
|
+
lineHeight: "24px",
|
|
3810
|
+
letterSpacing: "0.25px"
|
|
3811
|
+
},
|
|
3812
|
+
h3: {
|
|
3813
|
+
fontFamily: "Nunito",
|
|
3814
|
+
fontSize: 28,
|
|
3815
|
+
fontWeight: 500,
|
|
3816
|
+
lineHeight: "32px",
|
|
3817
|
+
letterSpacing: 0
|
|
3818
|
+
},
|
|
3819
|
+
h2: {
|
|
3820
|
+
fontFamily: "Nunito",
|
|
3821
|
+
fontSize: 32,
|
|
3822
|
+
fontWeight: 400,
|
|
3823
|
+
lineHeight: "40px",
|
|
3824
|
+
letterSpacing: -0.5
|
|
3825
|
+
},
|
|
3826
|
+
h1: {
|
|
3827
|
+
fontFamily: "Nunito",
|
|
3828
|
+
fontSize: 40,
|
|
3829
|
+
fontWeight: 300,
|
|
3830
|
+
letterSpacing: -1.5,
|
|
3831
|
+
lineHeight: "48px"
|
|
3832
|
+
}
|
|
3833
|
+
};
|
|
3834
|
+
|
|
3835
|
+
// src/Theme/shadows.ts
|
|
3836
|
+
var shadows = [
|
|
3837
|
+
"none",
|
|
3838
|
+
"0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
|
|
3839
|
+
"0px 1px 5px rgba(24, 39, 75, 0.12), 0px 2px 2px rgba(24, 39, 75, 0.14), 0px 3px 1px -2px rgba(24, 39, 75, 0.2)",
|
|
3840
|
+
"0px 1px 8px rgba(24, 39, 75, 0.12), 0px 3px 4px rgba(24, 39, 75, 0.14), 0px 3px 3px -2px rgba(24, 39, 75, 0.2)",
|
|
3841
|
+
"0px 2px 4px -1px rgba(24, 39, 75, 0.2), 0px 4px 5px rgba(24, 39, 75, 0.14), 0px 1px 10px rgba(24, 39, 75, 0.12)",
|
|
3842
|
+
"0px 3px 5px -1px rgba(24, 39, 75, 0.2), 0px 5px 8px rgba(24, 39, 75, 0.14), 0px 1px 14px rgba(24, 39, 75, 0.12)",
|
|
3843
|
+
"0px 3px 5px -1px rgba(24, 39, 75, 0.2), 0px 6px 10px rgba(24, 39, 75, 0.14), 0px 1px 18px rgba(24, 39, 75, 0.12)",
|
|
3844
|
+
"0px 4px 5px -2px rgba(24, 39, 75, 0.2), 0px 7px 10px 1px rgba(24, 39, 75, 0.14), 0px 2px 16px 1px rgba(24, 39, 75, 0.12)",
|
|
3845
|
+
"0px 5px 5px -3px rgba(24, 39, 75, 0.2), 0px 8px 10px 1px rgba(24, 39, 75, 0.14), 0px 3px 14px 2px rgba(24, 39, 75, 0.12)",
|
|
3846
|
+
"0px 5px 6px -3px rgba(24, 39, 75, 0.2), 0px 9px 12px 1px rgba(24, 39, 75, 0.14), 0px 3px 16px 2px rgba(24, 39, 75, 0.12)",
|
|
3847
|
+
"0px 6px 6px -3px rgba(24, 39, 75, 0.2), 0px 10px 14px 1px rgba(24, 39, 75, 0.14), 0px 4px 18px 3px rgba(24, 39, 75, 0.12)",
|
|
3848
|
+
"0px 6px 7px -4px rgba(24, 39, 75, 0.2), 0px 11px 15px 1px rgba(24, 39, 75, 0.14), 0px 4px 20px 3px rgba(24, 39, 75, 0.12)",
|
|
3849
|
+
"0px 7px 8px -4px rgba(24, 39, 75, 0.2), 0px 12px 17px 2px rgba(24, 39, 75, 0.14), 0px 5px 22px 4px rgba(24, 39, 75, 0.12)",
|
|
3850
|
+
"0px 7px 8px -4px rgba(24, 39, 75, 0.2), 0px 13px 19px 2px rgba(24, 39, 75, 0.14), 0px 5px 24px 4px rgba(24, 39, 75, 0.12)",
|
|
3851
|
+
"0px 7px 9px -4px rgba(24, 39, 75, 0.2), 0px 14px 21px 2px rgba(24, 39, 75, 0.14), 0px 5px 26px 4px rgba(24, 39, 75, 0.12)",
|
|
3852
|
+
"0px 8px 9px -5px rgba(24, 39, 75, 0.2), 0px 15px 22px 2px rgba(24, 39, 75, 0.14), 0px 6px 28px 5px rgba(24, 39, 75, 0.12)",
|
|
3853
|
+
"0px 8px 10px -5px rgba(24, 39, 75, 0.2), 0px 16px 24px 2px rgba(24, 39, 75, 0.14), 0px 6px 30px 5px rgba(24, 39, 75, 0.12)",
|
|
3854
|
+
"0px 8px 11px -5px rgba(24, 39, 75, 0.2), 0px 17px 26px 2px rgba(24, 39, 75, 0.14), 0px 6px 32px 5px rgba(24, 39, 75, 0.12)",
|
|
3855
|
+
"0px 9px 11px -5px rgba(24, 39, 75, 0.2), 0px 18px 28px 2px rgba(24, 39, 75, 0.14), 0px 7px 34px 6px rgba(24, 39, 75, 0.12)",
|
|
3856
|
+
"0px 9px 12px -6px rgba(24, 39, 75, 0.2), 0px 19px 29px 2px rgba(24, 39, 75, 0.14), 0px 7px 36px 6px rgba(24, 39, 75, 0.12)",
|
|
3857
|
+
"0px 10px 13px -6px rgba(24, 39, 75, 0.2), 0px 20px 31px 3px rgba(24, 39, 75, 0.14), 0px 8px 38px 7px rgba(24, 39, 75, 0.12)",
|
|
3858
|
+
"0px 10px 13px -6px rgba(24, 39, 75, 0.2), 0px 21px 33px 3px rgba(24, 39, 75, 0.14), 0px 8px 40px 7px rgba(24, 39, 75, 0.12)",
|
|
3859
|
+
"0px 10px 14px -6px rgba(24, 39, 75, 0.2), 0px 22px 35px 3px rgba(24, 39, 75, 0.14), 0px 8px 42px 7px rgba(24, 39, 75, 0.12)",
|
|
3860
|
+
"0px 11px 14px -7px rgba(24, 39, 75, 0.2), 0px 23px 36px 3px rgba(24, 39, 75, 0.14), 0px 9px 44px 8px rgba(24, 39, 75, 0.12)",
|
|
3861
|
+
"0px 11px 15px -7px rgba(24, 39, 75, 0.2), 0px 24px 38px 3px rgba(24, 39, 75, 0.14), 0px 9px 46px 8px rgba(24, 39, 75, 0.12)"
|
|
3862
|
+
];
|
|
3863
|
+
|
|
3864
|
+
// src/Theme/theme.ts
|
|
3865
|
+
var BasicTheme = {
|
|
3866
|
+
components,
|
|
3867
|
+
typography,
|
|
3868
|
+
spacing: 8,
|
|
3869
|
+
mixins,
|
|
3870
|
+
breakpoints,
|
|
3871
|
+
shadows
|
|
3872
|
+
};
|
|
3873
|
+
var ERPTheme = __spreadValues({
|
|
3874
|
+
palette: paletteERP
|
|
3875
|
+
}, BasicTheme);
|
|
3876
|
+
var ADPROTheme = __spreadValues({
|
|
3877
|
+
palette: paletteADPRO
|
|
3878
|
+
}, BasicTheme);
|
|
3879
|
+
var ADCTheme = __spreadValues({
|
|
3880
|
+
palette: paletteADC
|
|
3881
|
+
}, BasicTheme);
|
|
3882
|
+
|
|
3883
|
+
// src/Theme/index.ts
|
|
3884
|
+
var SincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ERPTheme));
|
|
3885
|
+
var AdproSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADPROTheme));
|
|
3886
|
+
var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme));
|
|
3887
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
3888
|
+
0 && (module.exports = {
|
|
3889
|
+
ADCSincoTheme,
|
|
3890
|
+
AdproSincoTheme,
|
|
3891
|
+
FooterAction,
|
|
3892
|
+
PageHeader,
|
|
3893
|
+
SCAutocomplete,
|
|
3894
|
+
SCCalendarSwipeable,
|
|
3895
|
+
SCDataGrid,
|
|
3896
|
+
SCDialog,
|
|
3897
|
+
SCDrawer,
|
|
3898
|
+
SCMenu,
|
|
3899
|
+
SCModal,
|
|
3900
|
+
SCMultiSelect,
|
|
3901
|
+
SCTabs,
|
|
3902
|
+
SCTextArea,
|
|
3903
|
+
SCTextField,
|
|
3904
|
+
SCToastNotification,
|
|
3905
|
+
SincoTheme,
|
|
3906
|
+
ToastProgress,
|
|
3907
|
+
capitalize,
|
|
3908
|
+
getButtonColor,
|
|
3909
|
+
getIcon,
|
|
3910
|
+
getIconComponent,
|
|
3911
|
+
getIconMultiSelect,
|
|
3912
|
+
getModalColor,
|
|
3913
|
+
modalStateConfig,
|
|
3914
|
+
useFilteredItems,
|
|
3915
|
+
useMultiSelectHandlers,
|
|
3916
|
+
useProgress
|
|
3917
|
+
});
|
|
3918
|
+
/*! Bundled license information:
|
|
3919
|
+
|
|
3920
|
+
@mui/system/esm/index.js:
|
|
3921
|
+
(**
|
|
3922
|
+
* @mui/system v7.1.1
|
|
3923
|
+
*
|
|
3924
|
+
* @license MIT
|
|
3925
|
+
* This source code is licensed under the MIT license found in the
|
|
3926
|
+
* LICENSE file in the root directory of this source tree.
|
|
3927
|
+
*)
|
|
3928
|
+
*/
|