@soyfri/shared-library 1.3.14 → 1.3.16
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/{DatePicker-BS543Ayk.js → DatePicker-BSNboVhN.js} +26 -2
- package/DatePicker-BSNboVhN.js.map +1 -0
- package/{DatePicker-BXdDk2g_.cjs → DatePicker-BoqxWAhj.cjs} +26 -2
- package/DatePicker-BoqxWAhj.cjs.map +1 -0
- package/components/DatePicker/DatePicker.cjs +1 -1
- package/components/DatePicker/DatePicker.js +1 -1
- package/components/InputGroup/InputGroup.cjs +1 -1
- package/components/InputGroup/InputGroup.js +1 -1
- package/components/StatusMessage/StatusMessage.cjs +79 -0
- package/components/StatusMessage/StatusMessage.cjs.map +1 -0
- package/components/StatusMessage/StatusMessage.d.ts +44 -0
- package/components/StatusMessage/StatusMessage.js +79 -0
- package/components/StatusMessage/StatusMessage.js.map +1 -0
- package/components/StatusMessage/index.d.ts +1 -0
- package/components/StatusMessage.d.ts +2 -0
- package/package.json +6 -1
- package/DatePicker-BS543Ayk.js.map +0 -1
- package/DatePicker-BXdDk2g_.cjs.map +0 -1
|
@@ -36,6 +36,30 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
|
|
|
36
36
|
import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
|
|
37
37
|
import { styled } from "@mui/system";
|
|
38
38
|
import { TextField, Box } from "@mui/material";
|
|
39
|
+
import require$$0 from "dayjs";
|
|
40
|
+
var enGb$1 = { exports: {} };
|
|
41
|
+
var enGb = enGb$1.exports;
|
|
42
|
+
var hasRequiredEnGb;
|
|
43
|
+
function requireEnGb() {
|
|
44
|
+
if (hasRequiredEnGb) return enGb$1.exports;
|
|
45
|
+
hasRequiredEnGb = 1;
|
|
46
|
+
(function(module, exports) {
|
|
47
|
+
!(function(e, a) {
|
|
48
|
+
module.exports = a(require$$0);
|
|
49
|
+
})(enGb, (function(e) {
|
|
50
|
+
function a(e2) {
|
|
51
|
+
return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
|
|
52
|
+
}
|
|
53
|
+
var t = a(e), _ = { name: "en-gb", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), weekdaysShort: "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), weekdaysMin: "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), monthsShort: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), weekStart: 1, yearStart: 4, relativeTime: { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" }, formats: { LT: "HH:mm", LTS: "HH:mm:ss", L: "DD/MM/YYYY", LL: "D MMMM YYYY", LLL: "D MMMM YYYY HH:mm", LLLL: "dddd, D MMMM YYYY HH:mm" }, ordinal: function(e2) {
|
|
54
|
+
var a2 = ["th", "st", "nd", "rd"], t2 = e2 % 100;
|
|
55
|
+
return "[" + e2 + (a2[(t2 - 20) % 10] || a2[t2] || a2[0]) + "]";
|
|
56
|
+
} };
|
|
57
|
+
return t.default.locale(_, null, true), _;
|
|
58
|
+
}));
|
|
59
|
+
})(enGb$1);
|
|
60
|
+
return enGb$1.exports;
|
|
61
|
+
}
|
|
62
|
+
requireEnGb();
|
|
39
63
|
const StyledTextField = styled(TextField)(({ theme }) => ({
|
|
40
64
|
"& .MuiInputBase-root": {
|
|
41
65
|
maxHeight: "34px",
|
|
@@ -110,7 +134,7 @@ const DatePicker = (_a) => {
|
|
|
110
134
|
}
|
|
111
135
|
}
|
|
112
136
|
}, [error]);
|
|
113
|
-
return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(
|
|
137
|
+
return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: "en-gb", children: /* @__PURE__ */ jsx(
|
|
114
138
|
Box,
|
|
115
139
|
{
|
|
116
140
|
sx: {
|
|
@@ -174,4 +198,4 @@ const DatePicker = (_a) => {
|
|
|
174
198
|
export {
|
|
175
199
|
DatePicker as D
|
|
176
200
|
};
|
|
177
|
-
//# sourceMappingURL=DatePicker-
|
|
201
|
+
//# sourceMappingURL=DatePicker-BSNboVhN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker-BSNboVhN.js","sources":["../node_modules/dayjs/locale/en-gb.js","../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_locale_en_gb=a(e.dayjs)}(this,(function(e){\"use strict\";function a(e){return e&&\"object\"==typeof e&&\"default\"in e?e:{default:e}}var t=a(e),_={name:\"en-gb\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),weekdaysShort:\"Sun_Mon_Tue_Wed_Thu_Fri_Sat\".split(\"_\"),weekdaysMin:\"Su_Mo_Tu_We_Th_Fr_Sa\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),monthsShort:\"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec\".split(\"_\"),weekStart:1,yearStart:4,relativeTime:{future:\"in %s\",past:\"%s ago\",s:\"a few seconds\",m:\"a minute\",mm:\"%d minutes\",h:\"an hour\",hh:\"%d hours\",d:\"a day\",dd:\"%d days\",M:\"a month\",MM:\"%d months\",y:\"a year\",yy:\"%d years\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd, D MMMM YYYY HH:mm\"},ordinal:function(e){var a=[\"th\",\"st\",\"nd\",\"rd\"],t=e%100;return\"[\"+e+(a[(t-20)%10]||a[t]||a[0])+\"]\"}};return t.default.locale(_,null,!0),_}));","import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField } from '@mui/material';\nimport 'dayjs/locale/en-gb';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale=\"en-gb\">\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["this","e","a","t","React","MuiDatePicker","_a","_b"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -37,6 +37,30 @@ const LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider")
|
|
|
37
37
|
const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
|
|
38
38
|
const system = require("@mui/system");
|
|
39
39
|
const material = require("@mui/material");
|
|
40
|
+
const require$$0 = require("dayjs");
|
|
41
|
+
var enGb$1 = { exports: {} };
|
|
42
|
+
var enGb = enGb$1.exports;
|
|
43
|
+
var hasRequiredEnGb;
|
|
44
|
+
function requireEnGb() {
|
|
45
|
+
if (hasRequiredEnGb) return enGb$1.exports;
|
|
46
|
+
hasRequiredEnGb = 1;
|
|
47
|
+
(function(module2, exports2) {
|
|
48
|
+
!(function(e, a) {
|
|
49
|
+
module2.exports = a(require$$0);
|
|
50
|
+
})(enGb, (function(e) {
|
|
51
|
+
function a(e2) {
|
|
52
|
+
return e2 && "object" == typeof e2 && "default" in e2 ? e2 : { default: e2 };
|
|
53
|
+
}
|
|
54
|
+
var t = a(e), _ = { name: "en-gb", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), weekdaysShort: "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"), weekdaysMin: "Su_Mo_Tu_We_Th_Fr_Sa".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), monthsShort: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"), weekStart: 1, yearStart: 4, relativeTime: { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" }, formats: { LT: "HH:mm", LTS: "HH:mm:ss", L: "DD/MM/YYYY", LL: "D MMMM YYYY", LLL: "D MMMM YYYY HH:mm", LLLL: "dddd, D MMMM YYYY HH:mm" }, ordinal: function(e2) {
|
|
55
|
+
var a2 = ["th", "st", "nd", "rd"], t2 = e2 % 100;
|
|
56
|
+
return "[" + e2 + (a2[(t2 - 20) % 10] || a2[t2] || a2[0]) + "]";
|
|
57
|
+
} };
|
|
58
|
+
return t.default.locale(_, null, true), _;
|
|
59
|
+
}));
|
|
60
|
+
})(enGb$1);
|
|
61
|
+
return enGb$1.exports;
|
|
62
|
+
}
|
|
63
|
+
requireEnGb();
|
|
40
64
|
const StyledTextField = system.styled(material.TextField)(({ theme }) => ({
|
|
41
65
|
"& .MuiInputBase-root": {
|
|
42
66
|
maxHeight: "34px",
|
|
@@ -111,7 +135,7 @@ const DatePicker = (_a) => {
|
|
|
111
135
|
}
|
|
112
136
|
}
|
|
113
137
|
}, [error]);
|
|
114
|
-
return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
138
|
+
return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: "en-gb", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
115
139
|
material.Box,
|
|
116
140
|
{
|
|
117
141
|
sx: {
|
|
@@ -173,4 +197,4 @@ const DatePicker = (_a) => {
|
|
|
173
197
|
) });
|
|
174
198
|
};
|
|
175
199
|
exports.DatePicker = DatePicker;
|
|
176
|
-
//# sourceMappingURL=DatePicker-
|
|
200
|
+
//# sourceMappingURL=DatePicker-BoqxWAhj.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker-BoqxWAhj.cjs","sources":["../node_modules/dayjs/locale/en-gb.js","../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["!function(e,a){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=a(require(\"dayjs\")):\"function\"==typeof define&&define.amd?define([\"dayjs\"],a):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_locale_en_gb=a(e.dayjs)}(this,(function(e){\"use strict\";function a(e){return e&&\"object\"==typeof e&&\"default\"in e?e:{default:e}}var t=a(e),_={name:\"en-gb\",weekdays:\"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday\".split(\"_\"),weekdaysShort:\"Sun_Mon_Tue_Wed_Thu_Fri_Sat\".split(\"_\"),weekdaysMin:\"Su_Mo_Tu_We_Th_Fr_Sa\".split(\"_\"),months:\"January_February_March_April_May_June_July_August_September_October_November_December\".split(\"_\"),monthsShort:\"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec\".split(\"_\"),weekStart:1,yearStart:4,relativeTime:{future:\"in %s\",past:\"%s ago\",s:\"a few seconds\",m:\"a minute\",mm:\"%d minutes\",h:\"an hour\",hh:\"%d hours\",d:\"a day\",dd:\"%d days\",M:\"a month\",MM:\"%d months\",y:\"a year\",yy:\"%d years\"},formats:{LT:\"HH:mm\",LTS:\"HH:mm:ss\",L:\"DD/MM/YYYY\",LL:\"D MMMM YYYY\",LLL:\"D MMMM YYYY HH:mm\",LLLL:\"dddd, D MMMM YYYY HH:mm\"},ordinal:function(e){var a=[\"th\",\"st\",\"nd\",\"rd\"],t=e%100;return\"[\"+e+(a[(t-20)%10]||a[t]||a[0])+\"]\"}};return t.default.locale(_,null,!0),_}));","import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField } from '@mui/material';\nimport 'dayjs/locale/en-gb';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale=\"en-gb\">\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["module","this","e","a","t","styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDatePicker","_a","_b"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const DatePicker = require("../../DatePicker-
|
|
3
|
+
const DatePicker = require("../../DatePicker-BoqxWAhj.cjs");
|
|
4
4
|
exports.DatePicker = DatePicker.DatePicker;
|
|
5
5
|
//# sourceMappingURL=DatePicker.cjs.map
|
|
@@ -25,7 +25,7 @@ const material = require("@mui/material");
|
|
|
25
25
|
const DatePicker = require("@mui/x-date-pickers/DatePicker");
|
|
26
26
|
const Input = require("../../Input-c8MwNNPg.cjs");
|
|
27
27
|
const Select = require("../../Select-BO2N56sm.cjs");
|
|
28
|
-
const DatePicker$1 = require("../../DatePicker-
|
|
28
|
+
const DatePicker$1 = require("../../DatePicker-BoqxWAhj.cjs");
|
|
29
29
|
const InputGroup = ({ children }) => {
|
|
30
30
|
const childrenArray = React.Children.toArray(children);
|
|
31
31
|
const childrenWithDividers = childrenArray.map((child, index) => {
|
|
@@ -23,7 +23,7 @@ import { Box, TextField, Select } from "@mui/material";
|
|
|
23
23
|
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
|
|
24
24
|
import { I as Input } from "../../Input-DFHs7cJ_.js";
|
|
25
25
|
import { S as Select$1 } from "../../Select-BcLkyHSE.js";
|
|
26
|
-
import { D as DatePicker$1 } from "../../DatePicker-
|
|
26
|
+
import { D as DatePicker$1 } from "../../DatePicker-BSNboVhN.js";
|
|
27
27
|
const InputGroup = ({ children }) => {
|
|
28
28
|
const childrenArray = Children.toArray(children);
|
|
29
29
|
const childrenWithDividers = childrenArray.map((child, index) => {
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const material = require("@mui/material");
|
|
5
|
+
const iconsMaterial = require("@mui/icons-material");
|
|
6
|
+
const StatusMessage = ({
|
|
7
|
+
title,
|
|
8
|
+
description,
|
|
9
|
+
messageType = "success",
|
|
10
|
+
displayType = "alert",
|
|
11
|
+
close,
|
|
12
|
+
open = true
|
|
13
|
+
}) => {
|
|
14
|
+
const getAlertVariant = () => {
|
|
15
|
+
switch (messageType) {
|
|
16
|
+
case "success":
|
|
17
|
+
return "success";
|
|
18
|
+
case "danger":
|
|
19
|
+
return "error";
|
|
20
|
+
case "warning":
|
|
21
|
+
return "warning";
|
|
22
|
+
default:
|
|
23
|
+
return "info";
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const getIcon = () => {
|
|
27
|
+
switch (messageType) {
|
|
28
|
+
case "success":
|
|
29
|
+
return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
|
|
30
|
+
case "danger":
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
|
|
32
|
+
case "warning":
|
|
33
|
+
return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
|
|
34
|
+
default:
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const alertVariant = getAlertVariant();
|
|
39
|
+
if (!description) {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
43
|
+
material.Dialog,
|
|
44
|
+
{
|
|
45
|
+
open,
|
|
46
|
+
onClose: close,
|
|
47
|
+
"aria-labelledby": "message-dialog-title",
|
|
48
|
+
maxWidth: "md",
|
|
49
|
+
PaperProps: {
|
|
50
|
+
sx: {
|
|
51
|
+
borderRadius: "16px",
|
|
52
|
+
p: 2
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: getIcon() }),
|
|
58
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", color: "text.secondary", children: description })
|
|
60
|
+
] }),
|
|
61
|
+
close && /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
65
|
+
material.Alert,
|
|
66
|
+
{
|
|
67
|
+
severity: alertVariant,
|
|
68
|
+
sx: { mb: 2, mt: 2 },
|
|
69
|
+
onClose: close,
|
|
70
|
+
action: close && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
|
|
73
|
+
/* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { mt: 1 }, children: description })
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
) });
|
|
77
|
+
};
|
|
78
|
+
exports.StatusMessage = StatusMessage;
|
|
79
|
+
//# sourceMappingURL=StatusMessage.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusMessage.cjs","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Alert,\n Box,\n Typography,\n Dialog,\n DialogContent,\n DialogActions,\n Button\n} from '@mui/material';\nimport {\n ErrorOutline as ErrorOutlineIcon,\n CheckCircleOutline as CheckCircleOutlineIcon,\n WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n title: string | undefined;\n description?: string;\n messageType?: 'success' | 'danger' | 'warning';\n displayType?: 'alert' | 'modal';\n close?: () => void;\n // Propiedad para controlar la visibilidad del modal desde el padre\n open?: boolean;\n}\n\nconst StatusMessage = ({\n title,\n description,\n messageType = 'success',\n displayType = 'alert',\n close,\n open = true,\n}: StatusMessageProps) => {\n\n const getAlertVariant = () => {\n switch (messageType) {\n case 'success':\n return 'success';\n case 'danger':\n return 'error';\n case 'warning':\n return 'warning';\n default:\n return 'info'; // Fallback\n }\n };\n\n const getIcon = () => {\n switch (messageType) {\n case 'success':\n return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n case 'danger':\n return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n case 'warning':\n return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n default:\n return null;\n }\n };\n\n const alertVariant = getAlertVariant();\n\n if (!description) {\n return null;\n }\n\n return (\n <>\n {displayType === 'modal' ? (\n <Dialog\n open={open}\n onClose={close}\n aria-labelledby=\"message-dialog-title\"\n maxWidth=\"md\"\n PaperProps={{\n sx: {\n borderRadius: '16px',\n p: 2,\n },\n }}\n >\n <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n <Box sx={{ mb: 2 }}>\n {getIcon()}\n </Box>\n <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n {title || ''}\n </Typography>\n <Typography variant=\"body1\" color=\"text.secondary\">\n {description}\n </Typography>\n </DialogContent>\n {close && (\n <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n <Button onClick={close} variant=\"contained\" color={alertVariant}>\n Aceptar\n </Button>\n </DialogActions>\n )}\n </Dialog>\n ) : (\n <Alert\n severity={alertVariant}\n sx={{ mb: 2, mt: 2 }}\n onClose={close}\n action={\n close && (\n <Button onClick={close} size=\"small\" color=\"inherit\">\n Cerrar\n </Button>\n )\n }\n >\n <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n <Typography variant=\"body2\" sx={{ mt: 1 }}>\n {description}\n </Typography>\n </Alert>\n )}\n </>\n );\n};\n\nexport default StatusMessage;\n"],"names":["jsx","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","Fragment","jsxs","Dialog","DialogContent","Box","Typography","DialogActions","Button","Alert"],"mappings":";;;;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAOA,2BAAAA,IAACC,oCAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAOD,2BAAAA,IAACE,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAOF,2BAAAA,IAACG,8BAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACEH,2BAAAA,IAAAI,WAAAA,UAAA,EACG,0BAAgB,UACfC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAAD,2BAAAA,KAACE,SAAAA,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAAP,+BAACQ,SAAAA,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACAR,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,yCACCA,SAAAA,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACCT,2BAAAA,IAACU,SAAAA,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAAV,+BAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJN,2BAAAA;AAAAA,IAACO,SAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACEZ,2BAAAA,IAACW,SAAAA,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAAX,2BAAAA,IAACS,SAAAA,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACAT,2BAAAA,IAACS,SAAAA,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia
|
|
3
|
+
* en un modal o una alerta, utilizando el sistema de diseño de Material-UI.
|
|
4
|
+
*
|
|
5
|
+
* El componente puede mostrar alertas con estilos específicos o un modal personalizable
|
|
6
|
+
* usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional
|
|
7
|
+
* para cerrar el mensaje.
|
|
8
|
+
*
|
|
9
|
+
* @param {StatusMessageProps} props - Las propiedades del componente.
|
|
10
|
+
* @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.
|
|
11
|
+
* @param {string} [props.description] - Descripción o contenido detallado del mensaje.
|
|
12
|
+
* @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.
|
|
13
|
+
* @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.
|
|
14
|
+
* @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.
|
|
15
|
+
* @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* // Ejemplo de uso como una alerta:
|
|
19
|
+
* <StatusMessage
|
|
20
|
+
* title="Operación Exitosa"
|
|
21
|
+
* description="La operación se ha completado correctamente."
|
|
22
|
+
* messageType="success"
|
|
23
|
+
* displayType="alert"
|
|
24
|
+
* />
|
|
25
|
+
*
|
|
26
|
+
* // Ejemplo de uso como un modal:
|
|
27
|
+
* <StatusMessage
|
|
28
|
+
* title="Advertencia"
|
|
29
|
+
* description="Se ha producido un error inesperado."
|
|
30
|
+
* messageType="danger"
|
|
31
|
+
* displayType="modal"
|
|
32
|
+
* close={() => console.log('Modal cerrado')}
|
|
33
|
+
* />
|
|
34
|
+
*/
|
|
35
|
+
export interface StatusMessageProps {
|
|
36
|
+
title: string | undefined;
|
|
37
|
+
description?: string;
|
|
38
|
+
messageType?: 'success' | 'danger' | 'warning';
|
|
39
|
+
displayType?: 'alert' | 'modal';
|
|
40
|
+
close?: () => void;
|
|
41
|
+
open?: boolean;
|
|
42
|
+
}
|
|
43
|
+
declare const StatusMessage: ({ title, description, messageType, displayType, close, open, }: StatusMessageProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
44
|
+
export default StatusMessage;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert } from "@mui/material";
|
|
3
|
+
import { WarningAmber, ErrorOutline, CheckCircleOutline } from "@mui/icons-material";
|
|
4
|
+
const StatusMessage = ({
|
|
5
|
+
title,
|
|
6
|
+
description,
|
|
7
|
+
messageType = "success",
|
|
8
|
+
displayType = "alert",
|
|
9
|
+
close,
|
|
10
|
+
open = true
|
|
11
|
+
}) => {
|
|
12
|
+
const getAlertVariant = () => {
|
|
13
|
+
switch (messageType) {
|
|
14
|
+
case "success":
|
|
15
|
+
return "success";
|
|
16
|
+
case "danger":
|
|
17
|
+
return "error";
|
|
18
|
+
case "warning":
|
|
19
|
+
return "warning";
|
|
20
|
+
default:
|
|
21
|
+
return "info";
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const getIcon = () => {
|
|
25
|
+
switch (messageType) {
|
|
26
|
+
case "success":
|
|
27
|
+
return /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: "64px", color: "success.main" } });
|
|
28
|
+
case "danger":
|
|
29
|
+
return /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: "64px", color: "error.main" } });
|
|
30
|
+
case "warning":
|
|
31
|
+
return /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: "64px", color: "warning.main" } });
|
|
32
|
+
default:
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const alertVariant = getAlertVariant();
|
|
37
|
+
if (!description) {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ jsx(Fragment, { children: displayType === "modal" ? /* @__PURE__ */ jsxs(
|
|
41
|
+
Dialog,
|
|
42
|
+
{
|
|
43
|
+
open,
|
|
44
|
+
onClose: close,
|
|
45
|
+
"aria-labelledby": "message-dialog-title",
|
|
46
|
+
maxWidth: "md",
|
|
47
|
+
PaperProps: {
|
|
48
|
+
sx: {
|
|
49
|
+
borderRadius: "16px",
|
|
50
|
+
p: 2
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsxs(DialogContent, { sx: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", p: 4, gap: 2 }, children: [
|
|
55
|
+
/* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: getIcon() }),
|
|
56
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h2", sx: { fontWeight: "bold" }, children: title || "" }),
|
|
57
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: description })
|
|
58
|
+
] }),
|
|
59
|
+
close && /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: close, variant: "contained", color: alertVariant, children: "Aceptar" }) })
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
) : /* @__PURE__ */ jsxs(
|
|
63
|
+
Alert,
|
|
64
|
+
{
|
|
65
|
+
severity: alertVariant,
|
|
66
|
+
sx: { mb: 2, mt: 2 },
|
|
67
|
+
onClose: close,
|
|
68
|
+
action: close && /* @__PURE__ */ jsx(Button, { onClick: close, size: "small", color: "inherit", children: "Cerrar" }),
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
|
|
71
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: description })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
) });
|
|
75
|
+
};
|
|
76
|
+
export {
|
|
77
|
+
StatusMessage
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=StatusMessage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Alert,\n Box,\n Typography,\n Dialog,\n DialogContent,\n DialogActions,\n Button\n} from '@mui/material';\nimport {\n ErrorOutline as ErrorOutlineIcon,\n CheckCircleOutline as CheckCircleOutlineIcon,\n WarningAmber as WarningAmberIcon\n} from '@mui/icons-material';\n\n/**\n * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia\n * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.\n *\n * El componente puede mostrar alertas con estilos específicos o un modal personalizable\n * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional\n * para cerrar el mensaje.\n *\n * @param {StatusMessageProps} props - Las propiedades del componente.\n * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.\n * @param {string} [props.description] - Descripción o contenido detallado del mensaje.\n * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.\n * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.\n * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.\n * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.\n *\n * @example\n * // Ejemplo de uso como una alerta:\n * <StatusMessage\n * title=\"Operación Exitosa\"\n * description=\"La operación se ha completado correctamente.\"\n * messageType=\"success\"\n * displayType=\"alert\"\n * />\n *\n * // Ejemplo de uso como un modal:\n * <StatusMessage\n * title=\"Advertencia\"\n * description=\"Se ha producido un error inesperado.\"\n * messageType=\"danger\"\n * displayType=\"modal\"\n * close={() => console.log('Modal cerrado')}\n * />\n */\n\nexport interface StatusMessageProps {\n title: string | undefined;\n description?: string;\n messageType?: 'success' | 'danger' | 'warning';\n displayType?: 'alert' | 'modal';\n close?: () => void;\n // Propiedad para controlar la visibilidad del modal desde el padre\n open?: boolean;\n}\n\nconst StatusMessage = ({\n title,\n description,\n messageType = 'success',\n displayType = 'alert',\n close,\n open = true,\n}: StatusMessageProps) => {\n\n const getAlertVariant = () => {\n switch (messageType) {\n case 'success':\n return 'success';\n case 'danger':\n return 'error';\n case 'warning':\n return 'warning';\n default:\n return 'info'; // Fallback\n }\n };\n\n const getIcon = () => {\n switch (messageType) {\n case 'success':\n return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;\n case 'danger':\n return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;\n case 'warning':\n return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;\n default:\n return null;\n }\n };\n\n const alertVariant = getAlertVariant();\n\n if (!description) {\n return null;\n }\n\n return (\n <>\n {displayType === 'modal' ? (\n <Dialog\n open={open}\n onClose={close}\n aria-labelledby=\"message-dialog-title\"\n maxWidth=\"md\"\n PaperProps={{\n sx: {\n borderRadius: '16px',\n p: 2,\n },\n }}\n >\n <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>\n <Box sx={{ mb: 2 }}>\n {getIcon()}\n </Box>\n <Typography variant=\"h4\" component=\"h2\" sx={{ fontWeight: 'bold' }}>\n {title || ''}\n </Typography>\n <Typography variant=\"body1\" color=\"text.secondary\">\n {description}\n </Typography>\n </DialogContent>\n {close && (\n <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n <Button onClick={close} variant=\"contained\" color={alertVariant}>\n Aceptar\n </Button>\n </DialogActions>\n )}\n </Dialog>\n ) : (\n <Alert\n severity={alertVariant}\n sx={{ mb: 2, mt: 2 }}\n onClose={close}\n action={\n close && (\n <Button onClick={close} size=\"small\" color=\"inherit\">\n Cerrar\n </Button>\n )\n }\n >\n <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n {title}\n </Typography>\n <Typography variant=\"body2\" sx={{ mt: 1 }}>\n {description}\n </Typography>\n </Alert>\n )}\n </>\n );\n};\n\nexport default StatusMessage;\n"],"names":["CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":";;;AA6DA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AACT,MAA0B;AAExB,QAAM,kBAAkB,MAAM;AAC5B,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,UAAU,MAAM;AACpB,YAAQ,aAAA;AAAA,MACN,KAAK;AACH,eAAO,oBAACA,sBAAuB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAClF,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,gBAAgB;AAAA,MAC1E,KAAK;AACH,eAAO,oBAACC,gBAAiB,IAAI,EAAE,UAAU,QAAQ,OAAO,kBAAkB;AAAA,MAC5E;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,eAAe,gBAAA;AAErB,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,SACE,oBAAA,UAAA,EACG,0BAAgB,UACf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,mBAAgB;AAAA,MAChB,UAAS;AAAA,MACT,YAAY;AAAA,QACV,IAAI;AAAA,UACF,cAAc;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MACL;AAAA,MAGF,UAAA;AAAA,QAAA,qBAAC,eAAA,EAAc,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,WAAW,UAAU,GAAG,GAAG,KAAK,KACnH,UAAA;AAAA,UAAA,oBAAC,OAAI,IAAI,EAAE,IAAI,KACZ,qBACH;AAAA,UACA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAK,IAAI,EAAE,YAAY,OAAA,GACvD,UAAA,SAAS,GAAA,CACZ;AAAA,8BACC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAC/B,UAAA,YAAA,CACH;AAAA,QAAA,GACF;AAAA,QACC,SACC,oBAAC,eAAA,EAAc,IAAI,EAAE,gBAAgB,UAAU,GAAG,EAAA,GAChD,UAAA,oBAAC,QAAA,EAAO,SAAS,OAAO,SAAQ,aAAY,OAAO,cAAc,qBAEjE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,IAAI,EAAE,IAAI,GAAG,IAAI,EAAA;AAAA,MACjB,SAAS;AAAA,MACT,QACE,SACE,oBAAC,QAAA,EAAO,SAAS,OAAO,MAAK,SAAQ,OAAM,WAAU,UAAA,SAAA,CAErD;AAAA,MAIJ,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,YAAY,OAAA,GACxC,UAAA,MAAA,CACH;AAAA,QACA,oBAAC,cAAW,SAAQ,SAAQ,IAAI,EAAE,IAAI,EAAA,GACnC,UAAA,YAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as StatusMessage } from './StatusMessage';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soyfri/shared-library",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -58,6 +58,11 @@
|
|
|
58
58
|
"require": "./components/Stepper/Stepper.cjs",
|
|
59
59
|
"types": "./components/Stepper/Stepper.d.ts"
|
|
60
60
|
},
|
|
61
|
+
"./components/StatusMessage": {
|
|
62
|
+
"import": "./components/StatusMessage/StatusMessage.js",
|
|
63
|
+
"require": "./components/StatusMessage/StatusMessage.cjs",
|
|
64
|
+
"types": "./components/StatusMessage/StatusMessage.d.ts"
|
|
65
|
+
},
|
|
61
66
|
"./components/Stat": {
|
|
62
67
|
"import": "./components/Stat/Stat.js",
|
|
63
68
|
"require": "./components/Stat/Stat.cjs",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker-BS543Ayk.js","sources":["../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["React","MuiDatePicker","_a","_b"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker-BXdDk2g_.cjs","sources":["../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { DateValidationError } from '@mui/x-date-pickers/models';\nimport { Dayjs } from 'dayjs';\nimport { styled } from '@mui/system';\nimport { Box, TextField, TextFieldProps } from '@mui/material';\n\n// Define las props para el CustomDatePicker\ninterface DatePickerProps {\n label: string;\n selectedDate: Dayjs | null;\n onDateChange: (date: Dayjs | null) => void;\n minDate?: Dayjs;\n maxDate?: Dayjs;\n disabled?: boolean;\n readOnly?: boolean;\n slotProps?: any;\n}\n\n// 1. Reutilizar el componente estilizado del Input\n// El DatePicker renderiza un TextField por dentro, así que podemos usar el mismo componente estilizado.\nconst StyledTextField = styled(TextField)(({ theme }) => ({\n '& .MuiInputBase-root': {\n maxHeight: '34px',\n padding: '8px 10px',\n borderRadius: '10px',\n display: 'flex',\n alignItems: 'center',\n fontSize: '14px',\n },\n '& .MuiInputBase-input': {\n padding: '0 !important',\n height: '18px',\n display: 'flex',\n alignItems: 'center',\n marginTop: '-4px'\n },\n '& .MuiInputLabel-root': {\n top: '50%',\n transform: 'translate(14px, -50%)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)',\n fontSize: '16px !important',\n '> legend': {\n display: 'none',\n }\n },\n },\n '& .MuiOutlinedInput-notchedOutline': {\n border: '0.7px solid',\n borderColor: '#e0e0e0',\n },\n}));\n\n/**\n * Componente de DatePicker personalizado de Material UI.\n * Permite seleccionar una fecha y actualiza un estado Dayjs.\n */\nexport const DatePicker: React.FC<DatePickerProps> = ({\n label,\n selectedDate,\n onDateChange,\n minDate,\n maxDate,\n disabled,\n readOnly,\n slotProps,\n ...rest\n}) => {\n const [error, setError] = React.useState<DateValidationError | null>(null);\n\n const errorMessage = useMemo(() => {\n switch (error) {\n case 'minDate':\n case 'maxDate': {\n return 'Fecha fuera del rango permitido';\n }\n case 'invalidDate': {\n return 'Formato de fecha inválido';\n }\n case 'disableFuture': {\n return 'No se permiten fechas futuras';\n }\n case 'disablePast': {\n return 'No se permiten fechas pasadas';\n }\n default: {\n return '';\n }\n }\n }, [error]);\n\n return (\n <LocalizationProvider dateAdapter={AdapterDayjs}>\n <Box\n sx={{\n width: '100%',\n display: 'grid',\n marginBottom: '10px',\n marginTop: '10px'\n }}\n\n >\n <MuiDatePicker\n label={label}\n value={selectedDate}\n onChange={onDateChange}\n minDate={minDate}\n maxDate={maxDate}\n onError={(newError) => setError(newError)}\n disabled={disabled}\n readOnly={readOnly}\n className='date-picker-custom'\n sx={{\n \n \n '& .MuiPickersInputBase-root, .MuiPickersOutlinedInput-root': {\n maxHeight: '28px',\n borderRadius: '10px'\n },\n\n // 3. Sobreescribir el label para que esté centrado verticalmente\n '& .MuiInputLabel-root': {\n // El label se alinea con el padding del input base.\n top: '50%',\n transform: 'translate(14px, -50%)',\n \n // Estilo para el label \"encogido\" cuando el input está lleno o en foco\n '&.MuiInputLabel-shrink': {\n transform: 'translate(1px, -200%) scale(0.75)', // Ajustar la posición para que se vea por encima del input\n fontSize: '16px !important',\n '> legend': {\n display: 'none', // Ocultar el legend del outline\n }\n },\n },\n '& .MuiPickersInputBase-root > fieldset > legend':{\n display: 'none', // Ocultar el legend del outline\n },\n\n }}\n // 2. Usar 'slotProps' para pasar el componente estilizado al TextField\n slotProps={{\n ...slotProps,\n textField: {\n ...slotProps?.textField,\n helperText: errorMessage || slotProps?.textField?.helperText,\n error: !!errorMessage || slotProps?.textField?.error,\n InputProps: {\n ...slotProps?.textField?.InputProps,\n inputComponent: StyledTextField,\n },\n },\n }}\n {...rest}\n />\n </Box>\n </LocalizationProvider>\n );\n};\n\nexport default DatePicker;"],"names":["styled","TextField","useMemo","jsx","LocalizationProvider","AdapterDayjs","Box","MuiDatePicker","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,kBAAkBA,OAAAA,OAAOC,SAAAA,SAAS,EAAE,CAAC,EAAE,aAAa;AAAA,EACxD,wBAAwB;AAAA,IACtB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAAA,EAEZ,yBAAyB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,yBAAyB;AAAA,IACvB,KAAK;AAAA,IACL,WAAW;AAAA,IACX,0BAA0B;AAAA,MACxB,WAAW;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,sCAAsC;AAAA,IACpC,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA;AAEjB,EAAE;AAMK,MAAM,aAAwC,CAAC,OAUhD;AAVgD,eACpD;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MARoD,IASjD,iBATiD,IASjD;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;;AAGA,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAqC,IAAI;AAEzE,QAAM,eAAeC,MAAAA,QAAQ,MAAM;AACjC,YAAQ,OAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK,WAAW;AACd,eAAO;AAAA,MACT;AAAA,MACA,KAAK,eAAe;AAClB,eAAO;AAAA,MACT;AAAA,MACA,KAAK,iBAAiB;AACpB,eAAO;AAAA,MACT;AAAA,MACA,KAAK,eAAe;AAClB,eAAO;AAAA,MACT;AAAA,MACA,SAAS;AACP,eAAO;AAAA,MACT;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,KAAK,CAAC;AAEV,SACEC,2BAAAA,IAACC,qBAAAA,sBAAA,EAAqB,aAAaC,aAAAA,cACjC,UAAAF,2BAAAA;AAAAA,IAACG,SAAAA;AAAAA,IAAA;AAAA,MACG,IAAI;AAAA,QACA,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,MAIjB,UAAAH,2BAAAA;AAAAA,QAACI,aAAAA;AAAAA,QAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,SAAS,CAAC,aAAa,SAAS,QAAQ;AAAA,UACxC;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UACV,IAAI;AAAA,YAGF,8DAA8D;AAAA,cAC5D,WAAW;AAAA,cACX,cAAc;AAAA,YAAA;AAAA;AAAA,YAIhB,yBAAyB;AAAA;AAAA,cAEvB,KAAK;AAAA,cACL,WAAW;AAAA;AAAA,cAGX,0BAA0B;AAAA,gBACxB,WAAW;AAAA;AAAA,gBACX,UAAU;AAAA,gBACV,YAAY;AAAA,kBACV,SAAS;AAAA;AAAA,gBAAA;AAAA,cACX;AAAA,YACF;AAAA,YAEF,mDAAkD;AAAA,cAChD,SAAS;AAAA;AAAA,YAAA;AAAA,UACX;AAAA,UAIF,WAAW,iCACN,YADM;AAAA,YAET,WAAW,iCACN,uCAAW,YADL;AAAA,cAET,YAAY,kBAAgBC,MAAA,uCAAW,cAAX,gBAAAA,IAAsB;AAAA,cAClD,OAAO,CAAC,CAAC,kBAAgBC,MAAA,uCAAW,cAAX,gBAAAA,IAAsB;AAAA,cAC/C,YAAY,kCACP,4CAAW,cAAX,mBAAsB,aADf;AAAA,gBAEV,gBAAgB;AAAA,cAAA;AAAA,YAClB;AAAA,UACF;AAAA,WAEE;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,GAEJ;AAEJ;;"}
|