@soyfri/shared-library 1.3.15 → 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/package.json +1 -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) => {
|
package/package.json
CHANGED
|
@@ -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":"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"}
|