@visiion/forms-library 1.4.18 → 1.4.19

package/dist/index.esm.js

@@ -23183,4 +23183,1267 @@ var GenericForm = function (_a) {
     return formContent;
 };
 
-export { AddressInput, Alert, CheckboxInput, Checklist, Common, DatePicker, DynamicInput, GenericForm, GoogleMaps, InputWrapper, NavigationButton, RadioInput, RadioOption, RutInput, SelectInput, StatusScreen, SubtitleInput, SwornDeclaration, TextInput, TextInputField, TextareaInput, clean as cleanRut, commonValidations, createValidationSchema, formatRut, maskRut, useMiDt, validateOnlyNumbersAndLetters, validate as validateRut };
+// se convierte tags a mayúsculas excepto (h) que debe preservarse
+var convertTagsToUppercase$1 = function (text) {
+    return text.replace(/\(([a-z]\d*)\)/g, function (match, tag) {
+        if (tag === 'h')
+            return match; // se preserva (h) minúscula
+        return "(".concat(tag.toUpperCase(), ")");
+    });
+};
+var SelectorComponent = function (_a) {
+    var value = _a.value, onChange = _a.onChange, options = _a.options, placeholder = _a.placeholder;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var dropdownRef = useRef(null);
+    // Encontrar la opción seleccionada
+    // Comparar normalizando los tags a mayúsculas para ambos valores
+    var selectedOption = options.find(function (option) { return convertTagsToUppercase$1(option.texto_visible) === convertTagsToUppercase$1(value); });
+    // Cerrar dropdown al hacer click fuera
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    return (jsxs("div", { className: "relative", ref: dropdownRef, children: [jsx("button", { type: "button", onClick: function () { return setIsOpen(!isOpen); }, className: "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-left focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500", children: selectedOption ? convertTagsToUppercase$1(selectedOption.texto_visible) : placeholder }), isOpen && (jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg", children: options.map(function (option) { return (jsx("button", { type: "button", onClick: function () {
+                        onChange(option.texto_visible);
+                        setIsOpen(false);
+                    }, className: "w-full px-3 py-2 text-left hover:bg-gray-100 focus:bg-gray-100 focus:outline-none", children: convertTagsToUppercase$1(option.texto_visible) }, option.id)); }) }))] }));
+};
+
+// se convierte tags dentro del texto (excepto el tag principal H/h)
+var convertInnerTagsToUppercase = function (text) {
+    return text.replace(/\(([a-z]\d*)\)/g, function (match, tag) {
+        // si el tag es 'h' solo (sin número), no convertir
+        if (tag === 'h')
+            return match;
+        return "(".concat(tag.toUpperCase(), ")");
+    });
+};
+var MultiSelectorComponent = function (_a) {
+    var value = _a.value, onChange = _a.onChange, options = _a.options, placeholder = _a.placeholder;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var dropdownRef = useRef(null);
+    // se parsean los valores seleccionados (separados por " y ")
+    var parseSelectedValues = function (val) {
+        if (!val || val.trim() === '')
+            return [];
+        return val
+            .split(' y ')
+            .map(function (v) { return v.trim(); })
+            .filter(Boolean);
+    };
+    var selectedValues = parseSelectedValues(value);
+    // se verifica si una opción está seleccionada
+    var isSelected = function (option) {
+        var normalizedOption = convertInnerTagsToUppercase(option.texto_visible);
+        return selectedValues.some(function (sv) { return convertInnerTagsToUppercase(sv) === normalizedOption; });
+    };
+    // se maneja el toggle de una opción
+    var handleToggle = function (option) {
+        var newSelected;
+        if (isSelected(option)) {
+            // se remueve
+            newSelected = selectedValues.filter(function (sv) {
+                return convertInnerTagsToUppercase(sv) !== convertInnerTagsToUppercase(option.texto_visible);
+            });
+        }
+        else {
+            // se agrega
+            newSelected = __spreadArray(__spreadArray([], selectedValues, true), [option.texto_visible], false);
+        }
+        // se ordena según el orden de las opciones
+        var sortedSelected = newSelected.sort(function (a, b) {
+            var _a, _b;
+            var optA = options.find(function (o) { return convertInnerTagsToUppercase(o.texto_visible) === convertInnerTagsToUppercase(a); });
+            var optB = options.find(function (o) { return convertInnerTagsToUppercase(o.texto_visible) === convertInnerTagsToUppercase(b); });
+            return ((_a = optA === null || optA === void 0 ? void 0 : optA.orden) !== null && _a !== void 0 ? _a : 0) - ((_b = optB === null || optB === void 0 ? void 0 : optB.orden) !== null && _b !== void 0 ? _b : 0);
+        });
+        // se unen con " y "
+        onChange(sortedSelected.join(' y '));
+    };
+    // se cierra dropdown al hacer click fuera
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    // se muestra el texto de selección
+    var displayText = selectedValues.length > 0
+        ? selectedValues.map(function (v) { return convertInnerTagsToUppercase(v); }).join(' y ')
+        : placeholder;
+    return (jsxs("div", { className: "relative", ref: dropdownRef, children: [jsx("button", { type: "button", onClick: function () { return setIsOpen(!isOpen); }, className: "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-left focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500", children: jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: selectedValues.length === 0 ? 'text-gray-400' : '', children: displayText }), jsx("span", { className: "ml-2 text-xs text-gray-500", children: selectedValues.length > 0 && "(".concat(selectedValues.length, ")") })] }) }), isOpen && (jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg", children: options.map(function (option) {
+                    var selected = isSelected(option);
+                    return (jsx("button", { type: "button", onClick: function () { return handleToggle(option); }, className: "flex w-full items-center px-3 py-2 text-left hover:bg-gray-100 focus:bg-gray-100 focus:outline-none ".concat(selected ? 'bg-sky-50' : ''), children: jsxs("div", { className: "flex flex-1 items-center", children: [jsx("div", { className: "mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border-2 ".concat(selected ? 'border-sky-600 bg-sky-600' : 'border-gray-300'), children: selected && (jsx("svg", { className: "h-3 w-3 text-white", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { d: "M5 13l4 4L19 7" }) })) }), jsx("span", { children: convertInnerTagsToUppercase(option.texto_visible) })] }) }, option.id));
+                }) }))] }));
+};
+
+// Función auxiliar para convertir tags a mayúsculas
+var convertTagsToUppercase = function (text) {
+    return text.replace(/\(([a-z]\d*)\)/g, function (_, tag) { return "(".concat(tag.toUpperCase(), ")"); });
+};
+var TextComponent = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, _b = _a.rows, rows = _b === void 0 ? 3 : _b;
+    // Manejar cambios en el textarea y convertir tags a mayúsculas
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        var normalizedValue = convertTagsToUppercase(newValue);
+        onChange(normalizedValue);
+    };
+    return (jsxs("div", { className: "space-y-4", children: [jsx("label", { className: "inline-block px-2 py-1 text-sm font-medium rounded ".concat(value ? 'text-green-800 bg-green-100' : 'text-orange-800'), style: value ? {} : { backgroundColor: 'rgb(254, 238, 221)' }, children: label }), jsx("textarea", { value: value, onChange: handleChange, placeholder: placeholder, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400 resize-none", rows: rows })] }));
+};
+
+// Función para detectar el tipo de período según el formato de valores presentes
+var detectDateType = function (valor) {
+    if (!valor)
+        return 'dia';
+    var first = valor.split('|').map(function (p) { return p.split(' - ')[0].trim(); }).find(Boolean) || '';
+    if (/^\d{2}\/\d{2}\/\d{4}$/.test(first))
+        return 'dia';
+    if (/^\d{2}\/\d{4}$/.test(first))
+        return 'mes';
+    if (/^\d{4}$/.test(first))
+        return 'año';
+    return 'dia';
+};
+// Función para formatear fecha a YYYY-MM-DD
+var formatDateToYYYYMMDD = function (date) {
+    if (!date)
+        return '';
+    var parts = date.split('/');
+    if (parts.length === 3) {
+        return "".concat(parts[2], "-").concat(parts[1].padStart(2, '0'), "-").concat(parts[0].padStart(2, '0'));
+    }
+    return date;
+};
+// Función para formatear fecha a dd/mm/yyyy
+var formatDateToDDMMYYYY = function (date) {
+    if (!date)
+        return '';
+    // Si ya está en formato dd/mm/yyyy, devolverlo tal como está
+    if (/^\d{2}\/\d{2}\/\d{4}$/.test(date)) {
+        return date;
+    }
+    // Si está en formato YYYY-MM-DD, convertir a dd/mm/yyyy
+    if (/^\d{4}-\d{2}-\d{2}$/.test(date)) {
+        var parts = date.split('-');
+        return "".concat(parts[2], "/").concat(parts[1], "/").concat(parts[0]);
+    }
+    return date;
+};
+// Mes: MM/YYYY <-> YYYY-MM
+var formatMonthToYYYYMM = function (mmYYYY) {
+    if (!mmYYYY)
+        return '';
+    var _a = mmYYYY.split('/'), mm = _a[0], yyyy = _a[1];
+    if (mm && yyyy)
+        return "".concat(yyyy, "-").concat(mm.padStart(2, '0'));
+    return mmYYYY;
+};
+var formatMonthToMMYYYY = function (yyyyMM) {
+    if (!yyyyMM)
+        return '';
+    var _a = yyyyMM.split('-'), yyyy = _a[0], mm = _a[1];
+    if (yyyy && mm)
+        return "".concat(mm, "/").concat(yyyy);
+    return yyyyMM;
+};
+// Comparador genérico para rangos
+var toComparable = function (v, tipo) {
+    if (!v)
+        return '';
+    if (tipo === 'dia')
+        return formatDateToYYYYMMDD(v);
+    if (tipo === 'mes')
+        return formatMonthToYYYYMM(v);
+    return v; // año ya está en YYYY
+};
+var isValidRange = function (desde, hasta, tipo) {
+    if (!desde || !hasta)
+        return true;
+    return toComparable(desde, tipo) <= toComparable(hasta, tipo);
+};
+// Función para parsear períodos
+var parsePeriods = function (valor) {
+    if (!valor)
+        return [{ desde: '', hasta: '' }];
+    var periods = valor.split('|').map(function (period) {
+        var parts = period.split(' - ');
+        return {
+            desde: parts[0] || '',
+            hasta: parts[1] || ''
+        };
+    });
+    return periods.length > 0 ? periods : [{ desde: '', hasta: '' }];
+};
+// Función para formatear períodos para reemplazo
+var formatPeriodsForReplacement = function (valor) {
+    if (!valor)
+        return '';
+    // Si el valor no contiene '|' ni ' - ', es una fecha única
+    if (!valor.includes('|') && !valor.includes(' - ')) {
+        return valor; // Devolver la fecha tal como está
+    }
+    var periods = parsePeriods(valor);
+    var validPeriods = periods.filter(function (p) { return p.desde && p.hasta; });
+    if (validPeriods.length === 0)
+        return '';
+    // se formatea especial para:
+    // - día: "del 01 de febrero del 2024 al 25 de marzo del 2024"
+    // - mes: "de marzo del 2024 a mayo del 2024"
+    var dayPattern = /^\d{2}\/\d{2}\/\d{4}$/;
+    var monthPattern = /^\d{2}\/\d{4}$/;
+    var monthNames = [
+        'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
+        'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
+    ];
+    var formatLongDay = function (ddmmyyyy) {
+        var _a = ddmmyyyy.split('/'), dd = _a[0], mm = _a[1], yyyy = _a[2];
+        var monthIdx = Math.max(0, Math.min(11, Number(mm) - 1));
+        var monthName = monthNames[monthIdx] || mm;
+        return "".concat(dd, " de ").concat(monthName, " del ").concat(yyyy);
+    };
+    var formatLongMonth = function (mmyyyy) {
+        var _a = mmyyyy.split('/'), mm = _a[0], yyyy = _a[1];
+        var monthIdx = Math.max(0, Math.min(11, Number(mm) - 1));
+        var monthName = monthNames[monthIdx] || mm;
+        return "".concat(monthName, " del ").concat(yyyy);
+    };
+    var periodStrings = validPeriods.map(function (p) {
+        var isDayRange = dayPattern.test(p.desde) && dayPattern.test(p.hasta);
+        if (isDayRange) {
+            return "del ".concat(formatLongDay(p.desde), " al ").concat(formatLongDay(p.hasta));
+        }
+        var isMonthRange = monthPattern.test(p.desde) && monthPattern.test(p.hasta);
+        if (isMonthRange) {
+            return "de ".concat(formatLongMonth(p.desde), " a ").concat(formatLongMonth(p.hasta));
+        }
+        var isYearRange = /^\d{4}$/.test(p.desde) && /^\d{4}$/.test(p.hasta);
+        if (isYearRange) {
+            return "desde el ".concat(p.desde, " al ").concat(p.hasta);
+        }
+        return "".concat(p.desde, " al ").concat(p.hasta);
+    });
+    if (periodStrings.length === 1) {
+        return periodStrings[0];
+    }
+    else if (periodStrings.length === 2) {
+        return "".concat(periodStrings[0], " y ").concat(periodStrings[1]);
+    }
+    else {
+        var lastPeriod = periodStrings.pop();
+        return "".concat(periodStrings.join(', '), " y ").concat(lastPeriod);
+    }
+};
+var PeriodComponent = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange;
+    // Estados internos del componente
+    var _b = useState('dia'), dateType = _b[0], setDateType = _b[1];
+    // se inicializa el tipo una sola vez a partir del valor inicial; luego solo cambia por acción del usuario
+    var initializedTypeRef = useRef(false);
+    useEffect(function () {
+        if (!initializedTypeRef.current) {
+            var detectedType = detectDateType(value);
+            setDateType(detectedType);
+            initializedTypeRef.current = true;
+        }
+    }, [value]);
+    // Handlers internos
+    var handleTypeChange = function (newType) {
+        setDateType(newType);
+        onChange(''); // Limpiar el valor al cambiar tipo
+    };
+    // se maneja mediante rangos para todos los tipos (día, mes, año)
+    var periods = parsePeriods(value);
+    // detección de rangos duplicados (según tipo actual)
+    var comparableRanges = periods.map(function (p) { return "".concat(toComparable(p.desde, dateType), "|").concat(toComparable(p.hasta, dateType)); });
+    var seenKeys = new Set();
+    var duplicateFlags = comparableRanges.map(function (key) {
+        // evita marcar como duplicado si el rango está incompleto
+        if (!key || key === '|' || key.startsWith('|') || key.endsWith('|'))
+            return false;
+        var isDup = seenKeys.has(key);
+        seenKeys.add(key);
+        return isDup;
+    });
+    var addPeriod = function () {
+        var newPeriods = __spreadArray(__spreadArray([], periods, true), [{ desde: '', hasta: '' }], false);
+        var newValor = newPeriods.map(function (p) { return "".concat(p.desde, " - ").concat(p.hasta); }).join('|');
+        onChange(newValor);
+    };
+    var removePeriod = function (index) {
+        var newPeriods = periods.filter(function (_, i) { return i !== index; });
+        var newValor = newPeriods.map(function (p) { return "".concat(p.desde, " - ").concat(p.hasta); }).join('|');
+        onChange(newValor);
+    };
+    var updatePeriod = function (index, field, value) {
+        var _a;
+        var newPeriods = __spreadArray([], periods, true);
+        newPeriods[index] = __assign(__assign({}, newPeriods[index]), (_a = {}, _a[field] = value, _a));
+        var newValor = newPeriods.map(function (p) { return "".concat(p.desde, " - ").concat(p.hasta); }).join('|');
+        onChange(newValor);
+    };
+    // validaciones para habilitar/deshabilitar agregar rango
+    var isPeriodComplete = function (p) { return !!(p.desde && p.hasta && isValidRange(p.desde, p.hasta, dateType)); };
+    var lastPeriod = periods[periods.length - 1] || { desde: '', hasta: '' };
+    var allRangesOrderValid = periods.every(function (p) { return !p.desde || !p.hasta || isValidRange(p.desde, p.hasta, dateType); })
+        && periods.every(function (p, idx) { return idx === 0 || !periods[idx - 1].hasta || !p.desde || isValidRange(periods[idx - 1].hasta, p.desde, dateType); });
+    var canAddAnother = isPeriodComplete(lastPeriod) && !duplicateFlags[periods.length - 1] && allRangesOrderValid;
+    return (jsxs("div", { className: "space-y-4", children: [jsxs("label", { className: "inline-block px-2 py-1 text-sm font-medium rounded ".concat(value ? 'text-green-800 bg-green-100' : 'text-orange-800'), style: value ? {} : { backgroundColor: 'rgb(254, 238, 221)' }, children: ["(", label, ")"] }), jsxs("div", { className: "flex gap-2", children: [jsx("button", { type: "button", onClick: function () { return handleTypeChange('dia'); }, className: "px-3 py-2 text-sm rounded-md border transition-colors ".concat(dateType === 'dia'
+                            ? 'bg-gray-300 text-gray-900 border-gray-500 shadow-sm'
+                            : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'), children: "D\u00EDa" }), jsx("button", { type: "button", onClick: function () { return handleTypeChange('mes'); }, className: "px-3 py-2 text-sm rounded-md border transition-colors ".concat(dateType === 'mes'
+                            ? 'bg-gray-300 text-gray-900 border-gray-500 shadow-sm'
+                            : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'), children: "Mes" }), jsx("button", { type: "button", onClick: function () { return handleTypeChange('año'); }, className: "px-3 py-2 text-sm rounded-md border transition-colors ".concat(dateType === 'año'
+                            ? 'bg-gray-300 text-gray-900 border-gray-500 shadow-sm'
+                            : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'), children: "A\u00F1o" })] }), (dateType === 'dia' || dateType === 'mes') && (jsxs(Fragment$1, { children: [periods.map(function (period, index) {
+                        var _a;
+                        return (jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "flex-1", children: jsx("input", { type: dateType === 'mes' ? 'month' : 'date', min: (function () {
+                                                    var _a;
+                                                    if (index === 0)
+                                                        return undefined;
+                                                    var prevHasta = ((_a = periods[index - 1]) === null || _a === void 0 ? void 0 : _a.hasta) || '';
+                                                    if (!prevHasta)
+                                                        return undefined;
+                                                    return dateType === 'mes' ? formatMonthToYYYYMM(prevHasta) : formatDateToYYYYMMDD(prevHasta);
+                                                })(), max: (function () {
+                                                    var today = new Date();
+                                                    if (dateType === 'mes') {
+                                                        var yyyy = today.getFullYear();
+                                                        var mm = String(today.getMonth() + 1).padStart(2, '0');
+                                                        return "".concat(yyyy, "-").concat(mm);
+                                                    }
+                                                    else {
+                                                        var yyyy = today.getFullYear();
+                                                        var mm = String(today.getMonth() + 1).padStart(2, '0');
+                                                        var dd = String(today.getDate()).padStart(2, '0');
+                                                        return "".concat(yyyy, "-").concat(mm, "-").concat(dd);
+                                                    }
+                                                })(), value: dateType === 'mes'
+                                                    ? (period.desde ? formatMonthToYYYYMM(period.desde) : '')
+                                                    : (period.desde ? formatDateToYYYYMMDD(period.desde) : ''), onChange: function (e) {
+                                                    var newDesde = dateType === 'mes'
+                                                        ? formatMonthToMMYYYY(e.target.value)
+                                                        : formatDateToDDMMYYYY(e.target.value);
+                                                    updatePeriod(index, 'desde', newDesde);
+                                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400" }) }), jsx("span", { className: "text-sm text-gray-600 font-medium", children: "al" }), jsx("div", { className: "flex-1", children: jsxs("div", { className: "relative", children: [jsx("input", { type: dateType === 'mes' ? 'month' : 'date', min: period.desde ? (dateType === 'mes' ? formatMonthToYYYYMM(period.desde) : formatDateToYYYYMMDD(period.desde)) : undefined, max: index === periods.length - 1 ? (function () {
+                                                            var today = new Date();
+                                                            if (dateType === 'mes') {
+                                                                var yyyy = today.getFullYear();
+                                                                var mm = String(today.getMonth() + 1).padStart(2, '0');
+                                                                return "".concat(yyyy, "-").concat(mm);
+                                                            }
+                                                            else {
+                                                                var yyyy = today.getFullYear();
+                                                                var mm = String(today.getMonth() + 1).padStart(2, '0');
+                                                                var dd = String(today.getDate()).padStart(2, '0');
+                                                                return "".concat(yyyy, "-").concat(mm, "-").concat(dd);
+                                                            }
+                                                        })() : undefined, value: dateType === 'mes'
+                                                            ? (period.hasta ? formatMonthToYYYYMM(period.hasta) : '')
+                                                            : (period.hasta ? formatDateToYYYYMMDD(period.hasta) : ''), onChange: function (e) {
+                                                            var newHasta = dateType === 'mes'
+                                                                ? formatMonthToMMYYYY(e.target.value)
+                                                                : formatDateToDDMMYYYY(e.target.value);
+                                                            updatePeriod(index, 'hasta', newHasta);
+                                                        }, className: "w-full px-3 py-2 pr-10 border rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 hover:border-gray-400 ".concat(period.desde && period.hasta && !isValidRange(period.desde, period.hasta, dateType)
+                                                            ? 'border-red-500 focus:ring-red-500'
+                                                            : 'border-gray-300 focus:ring-blue-500') }), periods.length > 1 && (jsx("button", { type: "button", onClick: function () { return removePeriod(index); }, className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-red-500 hover:text-red-700 transition-colors", title: "Eliminar per\u00EDodo", children: jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }) })] }), index > 0 && ((_a = periods[index - 1]) === null || _a === void 0 ? void 0 : _a.hasta) && period.desde && !isValidRange(periods[index - 1].hasta, period.desde, dateType) && (jsx("p", { className: "text-xs text-red-600", children: "El inicio debe ser posterior o igual al final del rango anterior" })), duplicateFlags[index] && (jsx("p", { className: "text-xs text-red-600", children: "El rango est\u00E1 duplicado" })), period.desde && period.hasta && !isValidRange(period.desde, period.hasta, dateType) && (jsx("p", { className: "text-xs text-red-600", children: "La fecha final debe ser posterior a la fecha inicial" }))] }, index));
+                    }), jsx("div", { className: "w-full", children: jsx("button", { type: "button", onClick: addPeriod, disabled: !canAddAnother, className: "w-full px-3 py-2 text-sm border rounded-md transition-colors ".concat(canAddAnother
+                                ? 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+                                : 'bg-gray-200 text-gray-400 border-gray-300 cursor-not-allowed'), title: !canAddAnother ? 'Completa y corrige el rango actual antes de agregar otro' : '', children: "+ Agregar rango" }) })] })), dateType === 'año' && (jsxs(Fragment$1, { children: [periods.map(function (period, index) {
+                        var _a;
+                        return (jsxs("div", { className: "space-y-2", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "flex-1", children: jsx("input", { type: "number", min: (function () {
+                                                    var _a;
+                                                    if (index === 0)
+                                                        return '1900';
+                                                    var prevHasta = ((_a = periods[index - 1]) === null || _a === void 0 ? void 0 : _a.hasta) || '';
+                                                    return prevHasta || '1900';
+                                                })(), max: new Date().getFullYear().toString(), value: period.desde || '', onChange: function (e) {
+                                                    var value = e.target.value;
+                                                    var numValue = Number(value);
+                                                    var currentYear = new Date().getFullYear();
+                                                    // se valida que no sea mayor al año actual
+                                                    if (value && numValue > currentYear) {
+                                                        return; // no actualizar si supera el año actual
+                                                    }
+                                                    updatePeriod(index, 'desde', value);
+                                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400" }) }), jsx("span", { className: "text-sm text-gray-600 font-medium", children: "al" }), jsx("div", { className: "flex-1", children: jsxs("div", { className: "relative", children: [jsx("input", { type: "number", min: period.desde || '1900', max: index === periods.length - 1 ? new Date().getFullYear().toString() : '2100', value: period.hasta || '', onChange: function (e) {
+                                                            var value = e.target.value;
+                                                            var numValue = Number(value);
+                                                            var currentYear = new Date().getFullYear();
+                                                            var isLastPeriod = index === periods.length - 1;
+                                                            // se valida que el último período no supere el año actual
+                                                            if (isLastPeriod && value && numValue > currentYear) {
+                                                                return; // no actualizar si supera el año actual
+                                                            }
+                                                            updatePeriod(index, 'hasta', value);
+                                                        }, className: "w-full px-3 py-2 pr-10 border rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all duration-200 hover:border-gray-400 ".concat(period.desde && period.hasta && !isValidRange(period.desde, period.hasta, dateType)
+                                                            ? 'border-red-500 focus:ring-red-500'
+                                                            : 'border-gray-300 focus:ring-blue-500') }), periods.length > 1 && (jsx("button", { type: "button", onClick: function () { return removePeriod(index); }, className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-red-500 hover:text-red-700 transition-colors", title: "Eliminar per\u00EDodo", children: jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }) })] }), index > 0 && ((_a = periods[index - 1]) === null || _a === void 0 ? void 0 : _a.hasta) && period.desde && !isValidRange(periods[index - 1].hasta, period.desde, dateType) && (jsx("p", { className: "text-xs text-red-600", children: "El inicio debe ser posterior o igual al final del rango anterior" })), period.desde && period.hasta && !isValidRange(period.desde, period.hasta, dateType) && (jsx("p", { className: "text-xs text-red-600", children: "El a\u00F1o final debe ser posterior o igual al inicial" }))] }, index));
+                    }), jsx("div", { className: "w-full", children: jsx("button", { type: "button", onClick: addPeriod, className: "w-full px-3 py-2 text-sm bg-gray-100 text-gray-700 border border-gray-300 rounded-md hover:bg-gray-200 transition-colors", children: "+ Agregar rango" }) })] }))] }));
+};
+// se calcula la cantidad total de meses de los períodos seleccionados (para tags P)
+function calcularMesesDePeriodos(valor) {
+    console.log('@@@calcularMesesDePeriodos valor:', valor);
+    if (!valor)
+        return 0;
+    var dayPattern = /^\d{2}\/\d{2}\/\d{4}$/;
+    var monthPattern = /^\d{2}\/\d{4}$/;
+    var yearPattern = /^\d{4}$/;
+    var parseDay = function (s) {
+        var _a = s.split('/').map(function (x) { return Number(x); }), dd = _a[0], mm = _a[1], yyyy = _a[2];
+        return { y: yyyy, m: mm, d: dd };
+    };
+    var monthsDiffInclusive = function (y1, m1, y2, m2) { return (y2 - y1) * 12 + (m2 - m1) + 1; };
+    var parts = valor.split('|').map(function (p) { return p.trim(); }).filter(Boolean);
+    var total = 0;
+    for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+        var p = parts_1[_i];
+        var _a = p.split(' - ').map(function (x) { return (x || '').trim(); }), desde = _a[0], hasta = _a[1];
+        if (!desde || !hasta)
+            continue;
+        if (dayPattern.test(desde) && dayPattern.test(hasta)) {
+            var a = parseDay(desde);
+            var b = parseDay(hasta);
+            total += monthsDiffInclusive(a.y, a.m, b.y, b.m);
+        }
+        else if (monthPattern.test(desde) && monthPattern.test(hasta)) {
+            var _b = desde.split('/').map(Number), m1 = _b[0], y1 = _b[1];
+            var _c = hasta.split('/').map(Number), m2 = _c[0], y2 = _c[1];
+            total += monthsDiffInclusive(y1, m1, y2, m2);
+        }
+        else if (yearPattern.test(desde) && yearPattern.test(hasta)) {
+            var y1 = Number(desde);
+            var y2 = Number(hasta);
+            total += (y2 - y1 + 1) * 12;
+        }
+    }
+    console.log('@@@calcularMesesDePeriodos meses:', total);
+    return total;
+}
+// se verifica si un período está completo (tiene ambas fechas)
+function isPeriodComplete(valor) {
+    if (!valor)
+        return false;
+    // patrones válidos: día (dd/mm/yyyy), mes (mm/yyyy), año (yyyy)
+    var dayPattern = /^\d{2}\/\d{2}\/\d{4}$/;
+    var monthPattern = /^\d{2}\/\d{4}$/;
+    var yearPattern = /^\d{4}$/;
+    // si es un valor único (no contiene ' - ' ni '|'), está completo si coincide con alguno de los formatos
+    if (!valor.includes(' - ') && !valor.includes('|')) {
+        var v = valor.trim();
+        return dayPattern.test(v) || monthPattern.test(v) || yearPattern.test(v);
+    }
+    // si contiene períodos, se verifica que cada uno tenga ambas fechas
+    var periods = valor.split('|');
+    return periods.every(function (period) {
+        var trimmedPeriod = period.trim();
+        if (!trimmedPeriod.includes(' - '))
+            return false;
+        var _a = trimmedPeriod.split(' - '), desde = _a[0], hasta = _a[1];
+        var d = (desde || '').trim();
+        var h = (hasta || '').trim();
+        var isValidSide = function (s) { return dayPattern.test(s) || monthPattern.test(s) || yearPattern.test(s); };
+        return !!d && !!h && isValidSide(d) && isValidSide(h);
+    });
+}
+
+// se normaliza el input a números y una sola coma
+var normalizeAmount = function (text) {
+    // permite dígitos y comas
+    var onlyNumbersAndComma = text.replace(/[^0-9,]/g, '');
+    // deja solo la primera coma si hubiera más de una
+    var seenComma = false;
+    var result = '';
+    for (var _i = 0, onlyNumbersAndComma_1 = onlyNumbersAndComma; _i < onlyNumbersAndComma_1.length; _i++) {
+        var ch = onlyNumbersAndComma_1[_i];
+        if (ch === ',') {
+            if (!seenComma) {
+                result += ch;
+                seenComma = true;
+            }
+        }
+        else {
+            result += ch;
+        }
+    }
+    return result;
+};
+var AmountComponent = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder;
+    var handleChange = useCallback(function (e) {
+        var normalized = normalizeAmount(e.target.value);
+        onChange(normalized);
+    }, [onChange]);
+    return (jsxs("div", { className: "space-y-4", children: [jsx("label", { className: "inline-block px-2 py-1 text-sm font-medium rounded ".concat(value ? 'text-green-800 bg-green-100' : 'text-orange-800'), style: value ? {} : { backgroundColor: 'rgb(254, 238, 221)' }, children: label }), jsx("input", { type: "text", inputMode: "decimal", value: value, onChange: handleChange, placeholder: placeholder, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400" })] }));
+};
+
+// se convierte YYYY-MM-DD -> dd/mm/yyyy
+var toDDMMYYYY = function (yyyyMMdd) {
+    if (!yyyyMMdd)
+        return '';
+    var _a = yyyyMMdd.split('-'), yyyy = _a[0], mm = _a[1], dd = _a[2];
+    if (!yyyy || !mm || !dd)
+        return yyyyMMdd;
+    return "".concat(dd.padStart(2, '0'), "/").concat(mm.padStart(2, '0'), "/").concat(yyyy);
+};
+// se convierte dd/mm/yyyy -> YYYY-MM-DD
+var toYYYYMMDD = function (ddMMyyyy) {
+    if (!ddMMyyyy)
+        return '';
+    var _a = ddMMyyyy.split('/'), dd = _a[0], mm = _a[1], yyyy = _a[2];
+    if (!dd || !mm || !yyyy)
+        return ddMMyyyy;
+    return "".concat(yyyy, "-").concat(mm.padStart(2, '0'), "-").concat(dd.padStart(2, '0'));
+};
+var DateComponent = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange;
+    var inputValue = value ? toYYYYMMDD(value) : '';
+    var handleChange = function (e) {
+        var v = e.target.value; // YYYY-MM-DD
+        onChange(toDDMMYYYY(v)); // guarda dd/mm/yyyy
+    };
+    return (jsxs("div", { className: "space-y-4", children: [jsx("label", { className: "inline-block px-2 py-1 text-sm font-medium rounded ".concat(value ? 'text-green-800 bg-green-100' : 'text-orange-800'), style: value ? {} : { backgroundColor: 'rgb(254, 238, 221)' }, children: label }), jsx("input", { type: "date", value: inputValue, onChange: handleChange, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400" })] }));
+};
+
+// se normaliza a entero positivo (> 0)
+var normalizePositiveInt = function (text) {
+    var digits = text.replace(/[^0-9]/g, '');
+    if (!digits)
+        return '';
+    // elimina ceros a la izquierda
+    var normalized = String(parseInt(digits, 10));
+    // si parseInt da NaN o 0, devolver vacío (no válido)
+    if (!normalized || normalized === '0' || normalized === 'NaN')
+        return '';
+    return normalized;
+};
+var NumberComponent = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder;
+    var handleChange = useCallback(function (e) {
+        var normalized = normalizePositiveInt(e.target.value);
+        onChange(normalized);
+    }, [onChange]);
+    return (jsxs("div", { className: "space-y-4", children: [jsx("label", { className: "inline-block px-2 py-1 text-sm font-medium rounded ".concat(value ? 'text-green-800 bg-green-100' : 'text-orange-800'), style: value ? {} : { backgroundColor: 'rgb(254, 238, 221)' }, children: label }), jsx("input", { type: "number", min: 1, step: 1, inputMode: "numeric", value: value, onChange: handleChange, placeholder: placeholder, className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400" })] }));
+};
+
+var ConstruirHechoInfraccionalModal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, onSave = _a.onSave, nombreTrabajador = _a.nombreTrabajador, hechoInfraccionalDataProp = _a.hechoInfraccionalData, loading = _a.loading, hechoInfraccionalDataSaved = _a.hechoInfraccionalDataSaved, _b = _a.numeroTrabajadoresConstatados, numeroTrabajadoresConstatados = _b === void 0 ? 0 : _b;
+    console.log('hechoInfraccionalDataProp:', hechoInfraccionalDataProp);
+    // se manejan los estados internos para la carga de datos
+    var _c = useState(null), hechoInfraccionalData = _c[0], setHechoInfraccionalData = _c[1];
+    var _d = useState(false), isSaving = _d[0], setIsSaving = _d[1];
+    var _e = useState({
+        previsualizacion: '',
+        elementos: {},
+    }), formData = _e[0], setFormData = _e[1];
+    var _f = useState(''), textoOriginal = _f[0], setTextoOriginal = _f[1];
+    // se guarda un mapeo de código en mayúscula -> case original del texto_base
+    var _g = useState({}), tagCaseMap = _g[0], setTagCaseMap = _g[1];
+    var ensureObservationTag = function (data) {
+        var _a, _b;
+        if (!(data === null || data === void 0 ? void 0 : data.data))
+            return data;
+        var clonedData = data;
+        var currentText = clonedData.data.texto_base || '';
+        var hasObservationInText = /\(O\)/.test(currentText);
+        if (!hasObservationInText) {
+            var needsSpace = currentText && !currentText.endsWith(' ');
+            clonedData.data.texto_base = "".concat(currentText).concat(needsSpace ? ' ' : '', "(O)");
+        }
+        if (!Array.isArray(clonedData.data.elementos)) {
+            clonedData.data.elementos = [];
+        }
+        var hasObservationElement = clonedData.data.elementos.some(function (elemento) { return elemento.codigo === 'O'; });
+        if (!hasObservationElement) {
+            var lastElement = clonedData.data.elementos[clonedData.data.elementos.length - 1];
+            var newId = lastElement ? lastElement.id + 1 : 1;
+            var newHechoId = lastElement ? lastElement.hecho_id : ((_b = (_a = clonedData.data) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null);
+            clonedData.data.elementos.push({
+                id: newId,
+                hecho_id: newHechoId,
+                codigo: 'O',
+                texto_placeholder: 'Ingrese observaciones generales... ',
+                tipo_dato: 'texto',
+                es_multiple: false,
+                es_obligatorio: false,
+                opciones: [],
+            });
+        }
+        return clonedData;
+    };
+    // se sincroniza el dato entregado por el padre
+    useEffect(function () {
+        if (isOpen) {
+            var dataClone = hechoInfraccionalDataProp
+                ? JSON.parse(JSON.stringify(hechoInfraccionalDataProp))
+                : null;
+            var enhancedData = dataClone ? ensureObservationTag(dataClone) : null;
+            setHechoInfraccionalData(enhancedData);
+        }
+    }, [isOpen, hechoInfraccionalDataProp]);
+    // se limpian los datos cuando el modal se cierra
+    useEffect(function () {
+        if (!isOpen) {
+            setHechoInfraccionalData(null);
+            setFormData({
+                previsualizacion: '',
+                elementos: {},
+            });
+            setTextoOriginal('');
+            setTagCaseMap({});
+            setIsSaving(false);
+        }
+    }, [isOpen]);
+    // se extraen los tags del texto base preservando mayúsculas/minúsculas
+    var extractTagsFromText = function (text) {
+        // se usa un regex más específico que NO detecta (a) cuando está dentro de una palabra
+        // busca patrones como (H1), (P), (T1) pero NO (a) dentro de "trabajador(a)"
+        var tagRegex = /(?<!\w)\(([A-Za-z]\d*)\)(?!\w)/g;
+        var matches = [];
+        var match;
+        while ((match = tagRegex.exec(text)) !== null) {
+            matches.push(match[1]); // se preserva el case original
+        }
+        return matches;
+    };
+    // se extraen todos los tags del estado actual (incluyendo opciones seleccionadas)
+    var extractAllTagsFromCurrentState = function () {
+        var allTags = new Set();
+        // se agregan los tags del texto base
+        var baseTags = extractTagsFromText(textoOriginal);
+        baseTags.forEach(function (tag) { return allTags.add(tag); });
+        // se agregan los tags de las opciones seleccionadas
+        Object.values(formData.elementos).forEach(function (valor) {
+            if (valor) {
+                var tagsInValue = extractTagsFromText(valor);
+                tagsInValue.forEach(function (tag) { return allTags.add(tag); });
+            }
+        });
+        return Array.from(allTags);
+    };
+    // se resetea cuando se abre el modal
+    useEffect(function () {
+        if (isOpen) {
+            // se resetea inmediatamente cuando se abre el modal
+            setFormData({
+                previsualizacion: '',
+                elementos: {},
+            });
+            setTextoOriginal('');
+        }
+    }, [isOpen]);
+    // se cargan los datos cuando se abre el modal
+    useEffect(function () {
+        if (hechoInfraccionalData === null || hechoInfraccionalData === void 0 ? void 0 : hechoInfraccionalData.data) {
+            var elementosIniciales_1 = {};
+            var textoBase = hechoInfraccionalData.data.texto_base || '';
+            var caseMap_1 = {};
+            // se extrae el mapeo de case del texto_base
+            var tagsInText = extractTagsFromText(textoBase);
+            tagsInText.forEach(function (tag) {
+                var upperTag = tag.toUpperCase();
+                // se guarda el case original del texto_base usando la clave en mayúscula
+                caseMap_1[upperTag] = tag;
+            });
+            // se inicializan todos los elementos disponibles (se muestran dinámicamente según necesidad)
+            if (hechoInfraccionalData.data.elementos) {
+                hechoInfraccionalData.data.elementos.forEach(function (elemento) {
+                    // la API devuelve el código en mayúscula, se usa como clave
+                    elementosIniciales_1[elemento.codigo.toUpperCase()] = '';
+                    // se reemplaza [TRABAJADOR] y [FECHA] en las opciones del elemento
+                    if (elemento.opciones) {
+                        elemento.opciones.forEach(function (opcion) {
+                            opcion.texto_visible = replaceTrabajadorTag(opcion.texto_visible);
+                            opcion.texto_visible = replaceFechaTag(opcion.texto_visible);
+                            opcion.texto_visible = replaceNumeroTrabajadoresConstatadosTag(opcion.texto_visible);
+                            // Tags como (T1)(T2) solo en opciones: inicializar claves y case como en front002
+                            extractTagsFromText(opcion.texto_visible).forEach(function (tag) {
+                                var upperTag = tag.toUpperCase();
+                                if (!elementosIniciales_1[upperTag]) {
+                                    elementosIniciales_1[upperTag] = '';
+                                }
+                                if (!caseMap_1[upperTag]) {
+                                    caseMap_1[upperTag] = tag;
+                                }
+                            });
+                        });
+                    }
+                });
+            }
+            // se agregan elementos especiales (como P, M, F y N) que no están en la API
+            tagsInText.forEach(function (tag) {
+                var upperTag = tag.toUpperCase();
+                var treatAsDate = isDateOverrideForPeriodTag(tag);
+                var isSpecial = treatAsDate ||
+                    isPeriodTag(tag) ||
+                    isAmountTag(tag) ||
+                    isDateTag(tag) ||
+                    /^N\d*$/i.test(tag);
+                if (isSpecial && !elementosIniciales_1[upperTag]) {
+                    elementosIniciales_1[upperTag] = '';
+                }
+            });
+            // si hay data previamente guardada, sobreescribir valores
+            console.log('hechoInfraccionalDataSaved:', { hechoInfraccionalDataSaved: hechoInfraccionalDataSaved });
+            var elementosFinales = __assign({}, elementosIniciales_1);
+            if (hechoInfraccionalDataSaved === null || hechoInfraccionalDataSaved === void 0 ? void 0 : hechoInfraccionalDataSaved.elementos) {
+                elementosFinales = __assign(__assign({}, elementosIniciales_1), Object.fromEntries(Object.entries(hechoInfraccionalDataSaved.elementos).map(function (_a) {
+                    var k = _a[0], v = _a[1];
+                    return [
+                        k.toUpperCase(),
+                        String(v),
+                    ];
+                })));
+            }
+            // reconstruir previsualización desde el texto base y elementos finales
+            var previsualizacionInicial = rebuildTextFromOriginal(textoBase, elementosFinales);
+            // se mantiene el texto base con los tags especiales para el coloreado
+            setFormData({
+                previsualizacion: previsualizacionInicial,
+                elementos: elementosFinales,
+            });
+            setTextoOriginal(textoBase);
+            setTagCaseMap(caseMap_1);
+        }
+        else {
+            // se resetea cuando no hay datos
+            setFormData({
+                previsualizacion: '',
+                elementos: {},
+            });
+            setTextoOriginal('');
+            setTagCaseMap({});
+        }
+    }, [hechoInfraccionalData, hechoInfraccionalDataSaved]);
+    // se detecta si un tag es de período
+    var isPeriodTag = function (tag) {
+        return /^P\d*$/i.test(tag);
+    };
+    // se detecta si un tag es de monto
+    var isAmountTag = function (tag) {
+        return /^M\d*$/i.test(tag);
+    };
+    // se detecta si un tag es de fecha específica (F)
+    var isDateTag = function (tag) {
+        return /^F\d*$/i.test(tag);
+    };
+    // si aparece "fecha(tag)" o "día(tag)" y el tag es de período (P), se interpreta como fecha (F)
+    var isDateOverrideForPeriodTag = function (tag) {
+        if (!isPeriodTag(tag))
+            return false;
+        var baseTag = tag.replace(/\d+$/, ''); // P2, P3 -> P
+        var pattern = new RegExp("(?:fecha|(?:el\\s+)?d[i\u00ED]a)\\s*\\(\\s*".concat(baseTag, "\\s*\\)"), 'i');
+        // buscar en el texto base
+        if (pattern.test(textoOriginal)) {
+            return true;
+        }
+        // buscar en los valores seleccionados (por ejemplo dentro de H2)
+        for (var _i = 0, _a = Object.values(formData.elementos); _i < _a.length; _i++) {
+            var valor = _a[_i];
+            if (typeof valor === 'string' && pattern.test(valor)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    // si aparece "año(tag)" y el tag es de período (P), se interpreta como número (año)
+    var isYearOverrideForPeriodTag = function (tag) {
+        if (!isPeriodTag(tag))
+            return false;
+        var baseTag = tag.replace(/\d+$/, ''); // P2, P3 -> P
+        var pattern = new RegExp("a(?:\u00F1|n)os*(s*".concat(baseTag, "s*)"), 'i');
+        // prueba directa con acento y sin acento
+        if (pattern.test(textoOriginal))
+            return true;
+        var normalize = function (s) { return s.normalize('NFD').replace(/[\u0300-\u036f]/g, ''); };
+        var textoSinAcentos = normalize(textoOriginal);
+        var patternNoAccent = new RegExp("anos*(s*".concat(baseTag, "s*)"), 'i');
+        if (patternNoAccent.test(textoSinAcentos))
+            return true;
+        // fallback por inclusión simple
+        var low = textoOriginal.toLowerCase();
+        if (low.includes("a\u00F1o (".concat(baseTag.toLowerCase(), ")")) ||
+            low.includes("a\u00F1o(".concat(baseTag.toLowerCase(), ")")))
+            return true;
+        var lowNoAccent = textoSinAcentos.toLowerCase();
+        if (lowNoAccent.includes("ano (".concat(baseTag.toLowerCase(), ")")) ||
+            lowNoAccent.includes("ano(".concat(baseTag.toLowerCase(), ")")))
+            return true;
+        for (var _i = 0, _a = Object.values(formData.elementos); _i < _a.length; _i++) {
+            var valor = _a[_i];
+            if (typeof valor === 'string') {
+                if (pattern.test(valor))
+                    return true;
+                var valorSinAcentos = normalize(valor);
+                if (patternNoAccent.test(valorSinAcentos))
+                    return true;
+                var vlow = valor.toLowerCase();
+                if (vlow.includes("a\u00F1o (".concat(baseTag.toLowerCase(), ")")) ||
+                    vlow.includes("a\u00F1o(".concat(baseTag.toLowerCase(), ")")))
+                    return true;
+                var vlowNoAccent = valorSinAcentos.toLowerCase();
+                if (vlowNoAccent.includes("ano (".concat(baseTag.toLowerCase(), ")")) ||
+                    vlowNoAccent.includes("ano(".concat(baseTag.toLowerCase(), ")")))
+                    return true;
+            }
+        }
+        return false;
+    };
+    // se detecta si un tag es numérico (N)
+    var isNumberTag = function (tag) {
+        return /^N\d*$/i.test(tag);
+    };
+    // se reemplaza el tag [TRABAJADOR] con el nombre del trabajador
+    var replaceTrabajadorTag = function (text) {
+        return text.replace(/\[TRABAJADOR\]/g, nombreTrabajador);
+    };
+    var replaceNumeroTrabajadoresConstatadosTag = function (text) {
+        return text.replace(/\[NUMEROTRABAJADORESCONSTATADOS\]/g, String(numeroTrabajadoresConstatados));
+    };
+    // se obtiene la fecha actual en formato dd/mm/yyyy
+    var getFechaActual = function () {
+        var hoy = new Date();
+        var dia = hoy.getDate().toString().padStart(2, '0');
+        var mes = (hoy.getMonth() + 1).toString().padStart(2, '0');
+        var año = hoy.getFullYear();
+        return "".concat(dia, "/").concat(mes, "/").concat(año);
+    };
+    function formatearMilesSinDecimales(valor) {
+        var numero = Number(String(valor)
+            .replace(/\./g, '') // quita puntos
+            .replace(',', ''));
+        return numero.toLocaleString('es-CL', {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        });
+    }
+    // se calcula la suma de meses considerando todos los tags P del formulario (excluye overrides a fecha o año)
+    var calcularMesesTotales = function () {
+        var tags = extractAllTagsFromCurrentState().filter(function (t) { return isPeriodTag(t) && !isDateOverrideForPeriodTag(t) && !isYearOverrideForPeriodTag(t); });
+        var total = 0;
+        tags.forEach(function (t) {
+            var v = formData.elementos[t.toUpperCase()];
+            if (v)
+                total += calcularMesesDePeriodos(v);
+        });
+        return total;
+    };
+    // se reemplaza el tag [FECHA] con la fecha actual
+    var replaceFechaTag = function (text) {
+        return text.replace(/\[FECHA\]/g, getFechaActual());
+    };
+    // se manejan los cambios en elementos
+    var handleElementoChange = function (codigo, valor) {
+        setFormData(function (prev) {
+            var nuevosElementos = __assign({}, prev.elementos);
+            // se preserva el valor tal cual, sin normalizar a mayúsculas
+            // solo se normalizan tags internos que NO son 'h' o 'H' solos
+            var valorProcesado = valor;
+            if (!isPeriodTag(codigo)) {
+                // se convierten tags a mayúsculas excepto (h) que debe preservarse
+                valorProcesado = valor.replace(/\(([a-z]\d*)\)/g, function (match, tag) {
+                    if (tag === 'h')
+                        return match; // se preserva (h) minúscula
+                    return "(".concat(tag.toUpperCase(), ")");
+                });
+            }
+            if (isAmountTag(codigo)) {
+                valorProcesado = '$' + formatearMilesSinDecimales(valor);
+            }
+            // se actualiza el elemento seleccionado
+            var codigoUpper = codigo.toUpperCase();
+            nuevosElementos[codigoUpper] = valorProcesado;
+            // si se cambió un elemento padre, se resetean todos los elementos hijos
+            // que ya no están presentes en el nuevo valor seleccionado
+            if (valorProcesado) {
+                var tagsEnNuevoValor_1 = extractTagsFromText(valorProcesado);
+                var tagsEnValorAnterior = extractTagsFromText(prev.elementos[codigoUpper] || '');
+                // se encuentran los tags que estaban en el valor anterior pero no en el nuevo
+                var tagsAResetear = tagsEnValorAnterior.filter(function (tag) { return !tagsEnNuevoValor_1.includes(tag); });
+                // se resetean los elementos que ya no son válidos
+                tagsAResetear.forEach(function (tag) {
+                    nuevosElementos[tag.toUpperCase()] = '';
+                });
+            }
+            else {
+                // si se limpió el valor, se resetean todos los elementos hijos
+                var tagsEnValorAnterior = extractTagsFromText(prev.elementos[codigoUpper] || '');
+                tagsEnValorAnterior.forEach(function (tag) {
+                    nuevosElementos[tag.toUpperCase()] = '';
+                });
+            }
+            // se reconstruye la previsualización desde el texto original
+            var newPrevisualizacion = rebuildTextFromOriginal(textoOriginal, nuevosElementos);
+            return __assign(__assign({}, prev), { elementos: nuevosElementos, previsualizacion: newPrevisualizacion });
+        });
+    };
+    // se procesan los tags anidados en un valor
+    var processNestedTags = function (text, elementos) {
+        var result = text;
+        var hasChanges = true;
+        var iterations = 0;
+        var maxIterations = 5; // se previenen bucles infinitos
+        while (hasChanges && iterations < maxIterations) {
+            hasChanges = false;
+            iterations++;
+            var tagRegex = /\(([A-Za-z]\d*)\)/g;
+            var match = void 0;
+            while ((match = tagRegex.exec(result)) !== null) {
+                var fullMatch = match[0], codigo = match[1];
+                // se busca el valor usando mayúscula (como vienen de la API)
+                var codigoUpper = codigo.toUpperCase();
+                var valor = elementos[codigoUpper];
+                if (valor) {
+                    var valorFormateado = valor;
+                    if (isPeriodTag(codigo)) {
+                        valorFormateado = formatPeriodsForReplacement(valor);
+                    }
+                    else if (isAmountTag(codigo)) {
+                        valorFormateado = valor;
+                    }
+                    else {
+                        // se preserva el case, solo se normalizan tags internos excepto (h)
+                        valorFormateado = valor.replace(/\(([a-z]\d*)\)/g, function (match, tag) {
+                            if (tag === 'h')
+                                return match;
+                            return "(".concat(tag.toUpperCase(), ")");
+                        });
+                    }
+                    // se escapan caracteres especiales del regex
+                    var escapedTag = fullMatch.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                    var beforeReplace = result;
+                    console.log('processNestedTags', { fullMatch: fullMatch, codigo: codigo, valor: valor, valorFormateado: valorFormateado });
+                    result = result.replace(new RegExp(escapedTag, 'g'), valorFormateado);
+                    if (beforeReplace !== result) {
+                        hasChanges = true;
+                    }
+                }
+            }
+        }
+        return result;
+    };
+    // se reconstruye el texto desde el original con reemplazos anidados
+    var rebuildTextFromOriginal = function (originalText, elementos) {
+        var result = originalText;
+        var hasChanges = true;
+        var iterations = 0;
+        var maxIterations = 10; // se previenen bucles infinitos
+        // se itera hasta que no haya más reemplazos que hacer
+        while (hasChanges && iterations < maxIterations) {
+            hasChanges = false;
+            iterations++;
+            // Regex corregido: ahora incluye [NUMEROTRABAJADORESCONSTATADOS]
+            var tagRegex = /((?<!\w)\(([A-Za-z]\d*)\)(?!\w)|\[TRABAJADOR\]|\[FECHA\]|\[NUMEROTRABAJADORESCONSTATADOS\])/g;
+            var match = void 0;
+            var replacements = [];
+            // se busca el tag (O) y se elimina en caso de no tener valor
+            var OBSERVATION_TAG = 'O';
+            if (!elementos[OBSERVATION_TAG]) {
+                result = result.replace(/\(O\)/g, '');
+            }
+            while ((match = tagRegex.exec(result)) !== null) {
+                var fullMatch = match[0];
+                // Tags especiales
+                if (fullMatch === '[TRABAJADOR]' ||
+                    fullMatch === '[FECHA]' ||
+                    fullMatch === '[NUMEROTRABAJADORESCONSTATADOS]') {
+                    var replacement = fullMatch === '[TRABAJADOR]'
+                        ? nombreTrabajador
+                        : fullMatch === '[FECHA]'
+                            ? getFechaActual()
+                            : String(numeroTrabajadoresConstatados);
+                    replacements.push({ tag: fullMatch, replacement: replacement });
+                }
+                else {
+                    // Tag normal (H1), (T1), etc.
+                    var codigoSinParentesis = fullMatch.slice(1, -1); // (H1) -> H1
+                    var codigoUpper = codigoSinParentesis.toUpperCase();
+                    var valor = elementos[codigoUpper];
+                    if (valor) {
+                        var valorFormateado = valor;
+                        if (isPeriodTag(codigoSinParentesis)) {
+                            valorFormateado = formatPeriodsForReplacement(valor);
+                        }
+                        else if (isAmountTag(codigoSinParentesis)) {
+                            valorFormateado = valor;
+                        }
+                        else {
+                            // se preservan tags internos
+                            valorFormateado = valor.replace(/\(([a-z]\d*)\)/g, function (match, tag) {
+                                if (tag === 'h')
+                                    return match;
+                                return "(".concat(tag.toUpperCase(), ")");
+                            });
+                        }
+                        // no se procesa recursivamente aquí, se hará en la siguiente iteración
+                        replacements.push({ tag: fullMatch, replacement: valorFormateado });
+                    }
+                }
+            }
+            // se aplican los reemplazos
+            replacements.forEach(function (_a) {
+                var tag = _a.tag, replacement = _a.replacement;
+                if (result.includes(tag)) {
+                    var escapedTag = tag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                    var beforeReplace = result;
+                    result = result.replace(new RegExp(escapedTag, 'g'), replacement);
+                    if (beforeReplace !== result) {
+                        hasChanges = true;
+                    }
+                }
+            });
+        }
+        return result;
+    };
+    // se renderiza el texto con colores
+    var renderTextWithColors = function (text) {
+        if (!text)
+            return null;
+        var processNestedReplacements = function (inputText) {
+            var parts = [];
+            var lastIndex = 0;
+            // se buscan los tags en el texto (incluyendo [TRABAJADOR] y [FECHA])
+            // se usa el mismo regex mejorado que NO detecta (a) dentro de palabras
+            var tagRegex = /((?<!\w)\([A-Za-z]\d*\)(?!\w)|\[TRABAJADOR\]|\[FECHA\]|\[NUMEROTRABAJADORESCONSTATADOS\])/g;
+            var match;
+            while ((match = tagRegex.exec(inputText)) !== null) {
+                var fullMatch = match[0];
+                var startIndex = match.index;
+                // se agrega el texto antes del tag
+                if (startIndex > lastIndex) {
+                    parts.push(inputText.slice(lastIndex, startIndex));
+                }
+                // se determina si es un tag especial [TRABAJADOR] o [FECHA]
+                if (fullMatch === '[TRABAJADOR]' ||
+                    fullMatch === '[FECHA]' ||
+                    fullMatch === '[NUMEROTRABAJADORESCONSTATADOS]') {
+                    // tags especiales reemplazados - color verde
+                    var replacement = fullMatch === '[TRABAJADOR]'
+                        ? nombreTrabajador
+                        : fullMatch === '[FECHA]'
+                            ? getFechaActual()
+                            : String(numeroTrabajadoresConstatados);
+                    parts.push(jsx("span", { className: "rounded bg-green-100 px-1 text-green-800", children: replacement }, "".concat(fullMatch, "-").concat(startIndex)));
+                }
+                else {
+                    // se maneja como tag normal (H1), (T1), etc.
+                    var codigo = fullMatch.slice(1, -1); // remover paréntesis preservando case
+                    var codigoUpper = codigo.toUpperCase(); // se usa mayúscula para buscar en elementos
+                    // se busca el valor usando el código en mayúscula (como vienen de la API)
+                    var valor = formData.elementos[codigoUpper];
+                    if (valor) {
+                        var valorProcesado = void 0;
+                        if (isPeriodTag(codigoUpper)) {
+                            valorProcesado = formatPeriodsForReplacement(valor);
+                        }
+                        else if (isAmountTag(codigoUpper)) {
+                            valorProcesado = valor;
+                        }
+                        else {
+                            valorProcesado = processNestedTags(valor, formData.elementos);
+                        }
+                        // texto reemplazado - color verde
+                        parts.push(jsx("span", { className: "rounded bg-green-100 px-1 text-green-800", children: valorProcesado }, "".concat(codigo, "-").concat(startIndex)));
+                    }
+                    else {
+                        // tag sin reemplazar - color naranja (muestra el case original del texto_base)
+                        parts.push(jsx("span", { className: "rounded bg-orange-100 px-1 text-orange-800", children: fullMatch }, "".concat(codigo, "-").concat(startIndex)));
+                    }
+                }
+                lastIndex = startIndex + fullMatch.length;
+            }
+            // se agrega el texto restante
+            if (lastIndex < inputText.length) {
+                parts.push(inputText.slice(lastIndex));
+            }
+            return parts.length > 0 ? parts : inputText;
+        };
+        return processNestedReplacements(text);
+    };
+    // se renderiza el elemento según su tipo
+    var renderElemento = function (elemento) {
+        var tag = elemento.codigo;
+        var valor = formData.elementos[tag.toUpperCase()] || '';
+        var isDateOv = isDateOverrideForPeriodTag(tag);
+        var isYearOv = isYearOverrideForPeriodTag(tag);
+        // prioridad: fecha (override), año (override), luego período
+        if (isDateTag(tag) || (isPeriodTag(tag) && isDateOv)) {
+            return (jsx(DateComponent, { label: "(".concat(tag, ")"), value: valor, onChange: function (value) { return handleElementoChange(tag, value); } }, tag));
+        }
+        if (isPeriodTag(tag) && isYearOv) {
+            return (jsx(NumberComponent, { label: "(".concat(tag, ")"), value: valor, onChange: function (value) { return handleElementoChange(tag, value); }, placeholder: 'Ingrese año (4 dígitos)' }, tag));
+        }
+        if (isPeriodTag(tag) && !isDateOv && !isYearOv) {
+            return (jsx(PeriodComponent, { label: tag, value: valor, onChange: function (value) { return handleElementoChange(tag, value); } }, tag));
+        }
+        if (isAmountTag(tag)) {
+            return (jsx(AmountComponent, { label: "(".concat(tag, ")"), value: valor, onChange: function (value) { return handleElementoChange(tag, value); }, placeholder: elemento.texto_placeholder || 'Ingrese el monto' }, tag));
+        }
+        if (/^N\d*$/i.test(tag)) {
+            return (jsx(NumberComponent, { label: "(".concat(tag, ")"), value: valor, onChange: function (value) { return handleElementoChange(tag, value); }, placeholder: elemento.texto_placeholder || 'Ingrese un número mayor a 0' }, tag));
+        }
+        if (elemento.tipo_dato === 'seleccion') {
+            // se obtiene el case original del texto_base para este tag
+            // el tag ya viene en mayúscula de la API, se busca en el mapa (clave siempre en mayúscula)
+            var originalCase = tagCaseMap[tag.toUpperCase()] || tag;
+            // se detecta si es selección múltiple (H mayúscula) o simple (h minúscula) según el case original
+            var isMultiple = originalCase === 'H' ||
+                (originalCase.length > 1 && originalCase[0] === 'H' && /^\d+$/.test(originalCase.slice(1)));
+            return (jsxs("div", { className: "space-y-4", children: [jsxs("label", { className: "inline-block rounded px-2 py-1 text-sm font-medium ".concat(valor ? 'bg-green-100 text-green-800' : 'text-orange-800'), style: valor ? {} : { backgroundColor: 'rgb(254, 238, 221)' }, children: ["(", originalCase, ")", isMultiple && jsx("span", { className: "ml-1 text-xs", children: "(m\u00FAltiple)" })] }), isMultiple ? (jsx(MultiSelectorComponent, { value: valor, onChange: function (value) { return handleElementoChange(tag, value); }, options: elemento.opciones, placeholder: "Seleccionar ".concat(originalCase, "...") })) : (jsx(SelectorComponent, { value: valor, onChange: function (value) { return handleElementoChange(tag, value); }, options: elemento.opciones, placeholder: "Seleccionar ".concat(originalCase, "...") }))] }, tag));
+        }
+        // por defecto, se renderiza como texto
+        return (jsx(TextComponent, { label: tag !== 'O' ? "(".concat(tag, ")") : '(Observaciones)', value: valor, onChange: function (value) { return handleElementoChange(tag, value); }, placeholder: elemento.texto_placeholder || "Ingrese ".concat(tag, "..."), rows: 3 }, tag));
+    };
+    // se verifica si todos los tags están completos
+    var areAllTagsComplete = function () {
+        // se obtienen todos los tags del estado actual (incluidos anidados y renombrados como P2, P3, ...)
+        var allTags = extractAllTagsFromCurrentState();
+        var indexOfObservations = allTags.indexOf('O');
+        if (indexOfObservations !== -1) {
+            allTags.splice(indexOfObservations, 1);
+        }
+        // se verifica que todos los tags tengan valores
+        return allTags.every(function (tag) {
+            // se normaliza el tag a mayúscula para buscar en elementos (como vienen de la API)
+            var tagUpper = tag.toUpperCase();
+            if (isPeriodTag(tag) && !isDateOverrideForPeriodTag(tag)) {
+                // para períodos, se verifica que tengan valor y estén completos
+                var valor = formData.elementos[tagUpper];
+                if (!valor || valor.trim() === '')
+                    return false;
+                // se verifica que los períodos estén completos (tengan ambas fechas)
+                return isPeriodComplete(valor);
+            }
+            else if (isPeriodTag(tag) && isDateOverrideForPeriodTag(tag)) {
+                // si es override a fecha, requiere una fecha simple dd/mm/yyyy
+                var valor = (formData.elementos[tagUpper] || '').trim();
+                return /^\d{2}\/\d{2}\/\d{4}$/.test(valor);
+            }
+            else if (isNumberTag(tag)) {
+                var valor = (formData.elementos[tagUpper] || '').trim();
+                if (!valor)
+                    return false;
+                // entero positivo > 0
+                return /^[1-9]\d*$/.test(valor);
+            }
+            else if (isAmountTag(tag)) {
+                var valor = (formData.elementos[tagUpper] || '').trim();
+                if (valor == '$0')
+                    return false;
+                return true;
+            }
+            else {
+                // para otros elementos, se verifica que tengan valor
+                return formData.elementos[tagUpper] && formData.elementos[tagUpper].trim() !== '';
+            }
+        });
+    };
+    // se verifica si un período está completo (tiene ambas fechas)
+    // se maneja el guardado
+    var handleSave = function () { return __awaiter$1(void 0, void 0, void 0, function () {
+        var textoFinal, meses;
+        return __generator(this, function (_a) {
+            setIsSaving(true);
+            try {
+                console.log('formData to save:', formData);
+                console.log('textoOriginal to save:', textoOriginal);
+                textoFinal = rebuildTextFromOriginal(textoOriginal, formData.elementos);
+                console.log('textoFinal to save:', textoFinal);
+                meses = calcularMesesTotales();
+                onSave({ texto: textoFinal, mesesPeriodos: meses, formData: formData });
+            }
+            finally {
+                setIsSaving(false);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    if (!isOpen)
+        return null;
+    return (jsx("div", { className: "fixed inset-0 z-50 flex items-end justify-end bg-black bg-opacity-50", children: jsxs("div", { className: "flex h-full w-1/2 flex-col bg-white", children: [jsx("div", { className: "border-b border-gray-200 bg-white px-6 py-12", children: jsx("h2", { className: "text-4xl font-bold text-blue", children: "Construir hecho infraccional" }) }), jsx("div", { className: "min-h-0 flex-1", children: jsx("form", { className: "flex h-full flex-col", children: jsx("div", { className: "min-h-0 flex-1", children: jsx("div", { className: "flex h-full flex-col", children: jsx("div", { className: "min-h-0 flex-1", children: jsxs("div", { className: "flex h-full flex-col", children: [jsx("div", { className: "flex-shrink-0 border-b border-gray-200 p-4", children: jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mb-2 text-sm font-bold text-gray-700", children: "Previsualizaci\u00F3n:" }), jsx("div", { className: "min-h-[60px] rounded-lg border border-gray-300 bg-white p-3 text-gray-800", children: renderTextWithColors(textoOriginal) })] }) }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", style: { zIndex: 1 }, children: jsx("div", { className: "rounded-lg p-3", children: loading ? (jsx("div", { className: "flex items-center justify-center py-12", children: jsxs("div", { className: "flex flex-col items-center space-y-4", children: [jsx("div", { className: "border-blue-600 h-12 w-12 animate-spin rounded-full border-b-2" }), jsx("p", { className: "text-sm text-gray-600", children: "Cargando hecho infraccional..." })] }) })) : (jsx("div", { className: "space-y-4", children: (function () {
+                                                            var _a;
+                                                            // se extraen todos los tags (base + anidados)
+                                                            var allTags = extractAllTagsFromCurrentState();
+                                                            // se filtran los elementos que están en los tags detectados
+                                                            // se normaliza comparando en mayúscula porque la API devuelve códigos en mayúscula
+                                                            var allTagsUpper = allTags.map(function (t) { return t.toUpperCase(); });
+                                                            var elementosFromAPI = (((_a = hechoInfraccionalData === null || hechoInfraccionalData === void 0 ? void 0 : hechoInfraccionalData.data) === null || _a === void 0 ? void 0 : _a.elementos) || []).filter(function (elemento) {
+                                                                if (!allTagsUpper.includes(elemento.codigo.toUpperCase()))
+                                                                    return false;
+                                                                // si algún tag P está overrideado en el texto base, también debemos excluirlo
+                                                                if (isPeriodTag(elemento.codigo) &&
+                                                                    (isDateOverrideForPeriodTag(elemento.codigo) ||
+                                                                        isYearOverrideForPeriodTag(elemento.codigo))) {
+                                                                    return false; // evitar duplicar como periodo si será fecha o año
+                                                                }
+                                                                return true;
+                                                            });
+                                                            // se agregan elementos especiales que no están en la API (como P, M, F y N)
+                                                            var elementosEspeciales = allTags
+                                                                .filter(function (tag) {
+                                                                var _a, _b;
+                                                                return (isPeriodTag(tag) ||
+                                                                    isAmountTag(tag) ||
+                                                                    isDateTag(tag) ||
+                                                                    isNumberTag(tag)) &&
+                                                                    !((_b = (_a = hechoInfraccionalData === null || hechoInfraccionalData === void 0 ? void 0 : hechoInfraccionalData.data) === null || _a === void 0 ? void 0 : _a.elementos) === null || _b === void 0 ? void 0 : _b.some(function (e) {
+                                                                        return e.codigo.toUpperCase() === tag.toUpperCase();
+                                                                    }));
+                                                            })
+                                                                .map(function (tag) { return ({
+                                                                codigo: tag.toUpperCase(), // se normaliza a mayúscula como la API
+                                                                descripcion: "".concat(isPeriodTag(tag) ? 'Período' : isAmountTag(tag) ? 'Monto' : isDateTag(tag) ? 'Fecha' : 'Número', " ").concat(tag),
+                                                                tipo_dato: isPeriodTag(tag) &&
+                                                                    !isDateOverrideForPeriodTag(tag) &&
+                                                                    !isYearOverrideForPeriodTag(tag)
+                                                                    ? 'periodo'
+                                                                    : isAmountTag(tag)
+                                                                        ? 'monto'
+                                                                        : isDateTag(tag) ||
+                                                                            (isPeriodTag(tag) && isDateOverrideForPeriodTag(tag))
+                                                                            ? 'fecha'
+                                                                            : 'numero',
+                                                                opciones: [],
+                                                            }); });
+                                                            var codigosYaRenderizados = new Set(__spreadArray(__spreadArray([], elementosFromAPI, true), elementosEspeciales, true).map(function (e) {
+                                                                return e.codigo.toUpperCase();
+                                                            }));
+                                                            // Tags visibles (p. ej. T1, T2) sin fila en API: campo texto como front002
+                                                            var elementosTextoImplicitos = allTags
+                                                                .map(function (t) { return t.toUpperCase(); })
+                                                                .filter(function (u, i, arr) { return arr.indexOf(u) === i; })
+                                                                .filter(function (u) { return u !== 'O' && !codigosYaRenderizados.has(u); })
+                                                                .map(function (u) { return ({
+                                                                id: 0,
+                                                                codigo: u,
+                                                                texto_placeholder: undefined,
+                                                                tipo_dato: 'texto',
+                                                                es_multiple: false,
+                                                                es_obligatorio: false,
+                                                                opciones: [],
+                                                            }); });
+                                                            var elementosToRender = __spreadArray(__spreadArray(__spreadArray([], elementosFromAPI, true), elementosEspeciales, true), elementosTextoImplicitos, true);
+                                                            var elementosObservacion = elementosToRender.filter(function (elemento) { var _a; return ((_a = elemento.codigo) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'O'; });
+                                                            var elementosSinObservacion = elementosToRender.filter(function (elemento) { var _a; return ((_a = elemento.codigo) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== 'O'; });
+                                                            var elementosOrdenados = __spreadArray(__spreadArray([], elementosSinObservacion, true), elementosObservacion, true);
+                                                            return elementosOrdenados.map(function (elemento) {
+                                                                return renderElemento(elemento);
+                                                            });
+                                                        })() })) }) }), jsxs("div", { className: "mt-8 flex justify-between border-t border-gray-200 px-6 pb-6 pt-6", children: [jsx("button", { type: "button", className: "text-blue-600 hover:text-blue-800 border-blue-600 rounded-md border px-4 py-2 transition-colors", onClick: onClose, children: "Volver" }), jsx("button", { type: "button", disabled: loading || isSaving || !areAllTagsComplete(), className: "rounded-md px-4 py-2 transition-colors ".concat(loading || isSaving || !areAllTagsComplete()
+                                                            ? 'cursor-not-allowed bg-gray-400 text-gray-600'
+                                                            : 'hover:bg-blue-700 bg-blue text-white'), onClick: handleSave, children: isSaving ? 'Guardando...' : 'Guardar' })] })] }) }) }) }) }) })] }) }));
+};
+
+export { AddressInput, Alert, CheckboxInput, Checklist, Common, ConstruirHechoInfraccionalModal, DatePicker, DynamicInput, GenericForm, GoogleMaps, InputWrapper, NavigationButton, RadioInput, RadioOption, RutInput, SelectInput, StatusScreen, SubtitleInput, SwornDeclaration, TextInput, TextInputField, TextareaInput, clean as cleanRut, commonValidations, createValidationSchema, formatRut, maskRut, useMiDt, validateOnlyNumbersAndLetters, validate as validateRut };