@zauru-sdk/components 1.0.116 → 1.0.119

package/dist/cjs/ConnectionState/ConnectionState.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectionState = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const hooks_1 = require("@zauru-sdk/hooks");
-const ConnectionState = () => {
-    const isOnline = (0, hooks_1.useIsOnline)();
-    // Definir estilos
-    const styles = {
-        container: {
-            padding: "10px",
-            borderRadius: "5px",
-            backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
-            color: isOnline ? "#155724" : "#721c24",
-            fontWeight: "bold",
-        },
-        text: {
-            fontSize: "16px",
-            margin: 0,
-        },
-    };
-    // Renderizar el estado de conexión
-    return ((0, jsx_runtime_1.jsx)("div", { style: styles.container, children: (0, jsx_runtime_1.jsx)("p", { style: styles.text, children: isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐" }) }));
-};
-exports.ConnectionState = ConnectionState;

package/dist/cjs/ConnectionState/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ConnectionState.js"), exports);

package/dist/cjs/Containers/BodyContainer.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BodyContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const BodyContainer = (props) => {
-    const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("body", { className: "flex flex-col min-h-screen m-0", children: children }) }));
-};
-exports.BodyContainer = BodyContainer;

package/dist/cjs/Containers/ButtonSectionContainer.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonSectionContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ButtonSectionContainer = (props) => {
-    const { children, className, whitBg = true } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { className: `${whitBg ? "bg-gray-50" : ""} px-4 py-3 text-right sm:px-6 ${className}`, children: children }));
-};
-exports.ButtonSectionContainer = ButtonSectionContainer;

package/dist/cjs/Containers/Container.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Container = (props) => {
-    const { title, description, children, className = "", rightContent } = props;
-    const titleInfo = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `mx-2 ${className}`, children: [rightContent && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: titleInfo }), (0, jsx_runtime_1.jsx)("div", { children: rightContent })] })), !rightContent && titleInfo, (0, jsx_runtime_1.jsx)("div", { className: "mt-5 space-y-5", children: children })] }) }));
-};
-exports.Container = Container;

package/dist/cjs/Containers/DoubleContainer.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DoubleContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const DoubleContainer = (props) => {
-    const { title, description, className = "", children } = props;
-    const getChildren = (index) => {
-        if (children && Array.isArray(children) && children[index]) {
-            return children[index];
-        }
-        if (children && index === 0) {
-            return children;
-        }
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: `mx-2 ${className}`, children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-3xl font-bold leading-8 text-gray-900", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-md text-gray-600", children: description })), (0, jsx_runtime_1.jsxs)("div", { className: "grid xl:grid-cols-3 md:grid-cols-1 gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "xl:col-span-2 md:col-span-1 mt-5", children: getChildren(0) }), (0, jsx_runtime_1.jsx)("div", { className: "xl:col-span-1 md:col-span-1 mt-5", children: getChildren(1) })] })] }) }));
-};
-exports.DoubleContainer = DoubleContainer;

package/dist/cjs/Containers/MainContainer.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const MainContainer = (props) => {
-    const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "md:p-10 p-0 mt-10 ml-2 mr-2 mb-10 md:mt-0 md:ml-0 md:mr-0 md:mb-0", children: children }) }));
-};
-exports.MainContainer = MainContainer;

package/dist/cjs/Containers/OutletContainer.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OutletContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const OutletContainer = (props) => {
-    const { children } = props;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-x-auto", children: children }) }));
-};
-exports.OutletContainer = OutletContainer;

package/dist/cjs/Containers/SubContainer.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SubContainer = (props) => {
-    const { title, description, children, className = "", rightContent } = props;
-    const titleInfo = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-xl font-bold leading-8 text-gray-900", children: title })), description && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-md text-gray-600", children: description }))] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `${className}`, children: [rightContent && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: titleInfo }), (0, jsx_runtime_1.jsx)("div", { children: rightContent })] })), !rightContent && titleInfo, (0, jsx_runtime_1.jsx)("div", { className: "mt-5 space-y-3", children: children })] }));
-};
-exports.SubContainer = SubContainer;

package/dist/cjs/Containers/index.js

@@ -1,23 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./BodyContainer.js"), exports);
-__exportStar(require("./ButtonSectionContainer.js"), exports);
-__exportStar(require("./Container.js"), exports);
-__exportStar(require("./DoubleContainer.js"), exports);
-__exportStar(require("./MainContainer.js"), exports);
-__exportStar(require("./OutletContainer.js"), exports);
-__exportStar(require("./SubContainer.js"), exports);

package/dist/cjs/DynamicTable/BasicPrintDynamicTable.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasicTableHTML = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const common_1 = require("@zauru-sdk/common");
-//TABLA PARA LA IMPRESION:
-const BasicTableHTML = (props) => {
-    const { data, footer, headers } = props;
-    return ((0, jsx_runtime_1.jsxs)("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: headers?.map((titulo, index) => ((0, jsx_runtime_1.jsx)("th", { style: {
-                            border: "1px solid black",
-                            padding: "10px",
-                            textAlign: "center",
-                            whiteSpace: "normal",
-                        }, children: titulo.label }, index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data?.map((fila, index) => ((0, jsx_runtime_1.jsx)("tr", { children: headers?.map((titulo, index) => ((0, jsx_runtime_1.jsx)("td", { style: {
-                            border: "1px solid black",
-                            padding: "1px",
-                            textAlign: "center",
-                            whiteSpace: "normal",
-                            fontSize: (0, common_1.isNumeric)(fila[titulo.name])
-                                ? "2em"
-                                : "1em",
-                        }, children: fila[titulo.name] }, index))) }, index))) }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("tr", { children: headers?.map((titulo, index) => ((0, jsx_runtime_1.jsx)("td", { style: {
-                            padding: "10px",
-                            textAlign: "center",
-                            whiteSpace: "normal",
-                            fontSize: (0, common_1.isNumeric)(footer[titulo.name])
-                                ? "2em"
-                                : "1em",
-                        }, children: footer[titulo.name] }, index))) }) })] }));
-};
-exports.BasicTableHTML = BasicTableHTML;

package/dist/cjs/DynamicTable/DynamicPrintTable.js

@@ -1,158 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicPrintTable = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const index_js_1 = require("../Form/TextField/index.js");
-const index_js_2 = require("../Form/SelectField/index.js");
-const redux_1 = require("@zauru-sdk/redux");
-const errorAnimation = {
-    hidden: { opacity: 0, y: -10 },
-    visible: { opacity: 1, y: 0 },
-};
-const DynamicPrintTable = ({ forwardedRef, ...props }) => {
-    const { items, onChange, className } = props;
-    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
-    const createItemSelect = (rowIndex, defaultValue) => ((0, jsx_runtime_1.jsx)(index_js_2.SelectField, { name: "item_select", isClearable: true, onChange: (value) => {
-            const selectedItem = items?.find((x) => x.value === value?.value);
-            updateRow(rowIndex, selectedItem);
-        }, options: items, defaultValue: defaultValue }, rowIndex));
-    const createItemQuantity = (rowIndex, defaultValue) => ((0, jsx_runtime_1.jsx)(index_js_1.TextField, { name: "item_quantity", type: "number", integer: true, defaultValue: defaultValue ?? 1, min: 1, onChange: (value) => {
-            updateRow(rowIndex, undefined, Number(value));
-        } }, rowIndex));
-    const createTemplateName = (rowIndex, defaultValue) => ((0, jsx_runtime_1.jsx)("div", { children: defaultValue != "" ? defaultValue : "No hay etiqueta" }, rowIndex));
-    const createRow = (rowIndex, item, quantity) => {
-        const itemCreated = createItemSelect(rowIndex, item ?? undefined);
-        const quantityCreated = createItemQuantity(rowIndex, quantity ?? 1);
-        const templateCreated = createTemplateName(rowIndex, item ? item.template : "Seleccione un item para visualizar su etiqueta.");
-        return [itemCreated, quantityCreated, templateCreated];
-    };
-    const [tableData, setTableData] = (0, react_1.useState)([]);
-    const [isInitialItemAdded, setIsInitialItemAdded] = (0, react_1.useState)(false);
-    const insertItems = (0, react_1.useCallback)((newItems) => {
-        setTableData((prevData) => [
-            ...(prevData ?? []),
-            ...newItems.map((item, index) => {
-                const rowIndex = (prevData?.length ?? 0) + index;
-                const [itemCreated, quantityCreated, templateCreated] = createRow(rowIndex, item);
-                updateRow(rowIndex, item, 1);
-                return [itemCreated, quantityCreated, templateCreated];
-            }),
-        ]);
-    }, [items]);
-    const getTableState = (temp) => {
-        const updatedData = temp ?? tableData;
-        const tableState = updatedData?.map((rowData) => {
-            const firstElement = rowData[0];
-            const item_id = react_1.default.isValidElement(firstElement)
-                ? firstElement.props.defaultValue?.value
-                : undefined;
-            const secondElement = rowData[1];
-            const quantity = react_1.default.isValidElement(secondElement)
-                ? secondElement.props.defaultValue
-                : undefined;
-            return {
-                item_id,
-                quantity,
-            };
-        });
-        return tableState;
-    };
-    const updateRow = (rowIndex, item, quantity) => {
-        setTableData((prevData) => {
-            const updatedData = prevData?.map((_, index) => {
-                if (index === rowIndex) {
-                    const firstElement = prevData[index][0];
-                    const selectedItem = item ??
-                        (react_1.default.isValidElement(firstElement)
-                            ? items?.find((x) => x.value === firstElement.props.defaultValue?.value)
-                            : undefined);
-                    const secondElement = prevData[index][1];
-                    const newQuantity = quantity
-                        ? quantity
-                        : react_1.default.isValidElement(secondElement)
-                            ? secondElement.props.defaultValue
-                            : undefined;
-                    return createRow(rowIndex, selectedItem, newQuantity);
-                }
-                else {
-                    return prevData[index];
-                }
-            });
-            if (onChange) {
-                const tableState = getTableState(updatedData);
-                onChange(tableState);
-            }
-            return updatedData;
-        });
-    };
-    const addRow = () => {
-        setTableData((prevData) => [
-            ...(prevData ?? []),
-            createRow(prevData?.length ?? 0),
-        ]);
-    };
-    const removeRow = (rowIndex) => {
-        setTableData((prevData) => prevData?.filter((_, index) => index !== rowIndex));
-    };
-    react_1.default.useImperativeHandle(forwardedRef, () => ({
-        insertItems,
-        getTableState,
-    }));
-    const pastelGrayBackground = {
-        backgroundColor: "#B69E99",
-    };
-    const renderHeader = () => ((0, jsx_runtime_1.jsxs)("tr", { style: { ...pastelGrayBackground }, children: [(0, jsx_runtime_1.jsx)("th", { className: "text-left align-middle p-2", children: "Item" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left align-middle p-2", children: "Cantidad" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left align-middle p-2", children: "Etiqueta" }), (0, jsx_runtime_1.jsx)("th", { className: "w-16" })] }));
-    const renderRow = (rowData, rowIndex) => ((0, jsx_runtime_1.jsxs)("tr", { children: [rowData.map((cellData, cellIndex) => ((0, jsx_runtime_1.jsx)("td", { className: "align-middle p-2", children: cellData }, cellIndex))), rowIndex !== 0 && ((0, jsx_runtime_1.jsx)("td", { className: "align-middle w-16", children: (0, jsx_runtime_1.jsx)("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        removeRow(rowIndex);
-                    }, type: "button", children: "x" }) }))] }, rowIndex));
-    const renderRows = () => {
-        return tableData?.map((rowData, rowIndex) => renderRow(rowData, rowIndex));
-    };
-    const error = formValidations[props.formName ?? "-1"][props.name];
-    const borderColor = error ? "border-red-500" : "border-transparent";
-    (0, react_1.useEffect)(() => {
-        if (!isInitialItemAdded && items?.length > 0) {
-            insertItems([items[0]]);
-            setIsInitialItemAdded(true);
-        }
-    }, [isInitialItemAdded, items, insertItems]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `${className} ${borderColor} border-2`, style: { overflowX: "auto" }, children: [!!error && (0, jsx_runtime_1.jsx)("div", { className: "text-red-500 text-sm mb-2", children: error }), (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { children: renderHeader() }), (0, jsx_runtime_1.jsx)("tbody", { children: renderRows() }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "align-middle", children: (0, jsx_runtime_1.jsx)("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
-                                            event.preventDefault();
-                                            event.stopPropagation();
-                                            addRow();
-                                        }, type: "button", children: "+" }) }), (0, jsx_runtime_1.jsxs)("td", { colSpan: 2, children: ["Total de etiquetas a imprimir:", " ", tableData?.reduce((sum, x) => {
-                                            const val = react_1.default.isValidElement(x[1])
-                                                ? x[1]?.props?.defaultValue
-                                                : undefined;
-                                            if (!sum)
-                                                return val;
-                                            return sum + val;
-                                        }, 0)] })] }) })] })] }));
-};
-exports.DynamicPrintTable = DynamicPrintTable;

package/dist/cjs/DynamicTable/DynamicTable.js

@@ -1,219 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicTable = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const index_js_1 = require("../Form/TextArea/index.js");
-const index_js_2 = require("../Form/TextField/index.js");
-const index_js_3 = require("../Form/Checkbox/index.js");
-const DynamicTable = ({ forwardedRef, ...props }, ref) => {
-    const [tableData, setTableData] = (0, react_1.useState)({});
-    const { cellInputs, intersectionTitle, className, onChange, defaultValue, margins, } = props;
-    (0, react_1.useEffect)(() => {
-        if (onChange) {
-            onChange(JSON.stringify(tableData));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tableData]);
-    (0, react_1.useEffect)(() => {
-        if (defaultValue) {
-            initializeTable(defaultValue);
-        }
-        else {
-            initializeTableWithDefaults();
-        }
-    }, [defaultValue]);
-    const getRows = () => {
-        const rowsIds = Object.keys(tableData)
-            .filter((key) => key.startsWith("row"))
-            .map((key) => parseInt(key.slice(3)));
-        return rowsIds.sort().map((id) => ({ id }));
-    };
-    const getCols = () => {
-        const colsIds = Object.keys(tableData)
-            .filter((key) => key.startsWith("column"))
-            .map((key) => parseInt(key.slice(6)));
-        return colsIds.sort().map((id) => ({ id }));
-    };
-    const addRow = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const rows = getRows();
-        const lastId = rows[rows.length - 1].id;
-        handleInputChange(`row${lastId + 1}`, 1);
-    };
-    const addCol = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const cols = getCols();
-        const lastId = cols[cols.length - 1].id;
-        handleInputChange(`column${lastId + 1}`, 1);
-    };
-    const removeRow = (rowId) => {
-        const newRowData = { ...tableData };
-        for (const key in newRowData) {
-            if (key.startsWith(`row${rowId}`) || key.startsWith(`cell-${rowId}-`)) {
-                delete newRowData[key];
-            }
-        }
-        setTableData(newRowData);
-    };
-    const removeCol = (colId) => {
-        const newRowData = { ...tableData };
-        for (const key in newRowData) {
-            if (key.startsWith(`column${colId}`) || key.endsWith(`-${colId}`)) {
-                delete newRowData[key];
-            }
-        }
-        setTableData(newRowData);
-    };
-    const getTotalForRow = (rowId) => {
-        return Number(tableData[`row${rowId}`] ?? 0) ?? 0;
-    };
-    const getTotalForColumn = (colId) => {
-        return Number(tableData[`column${colId}`] ?? 0) ?? 0;
-    };
-    const getTotalForRows = () => {
-        return getRows()
-            .map((row) => getTotalForRow(row.id))
-            .reduce((a, b) => a + b, 0);
-    };
-    const getTotalForColumns = () => {
-        return getCols()
-            .map((col) => getTotalForColumn(col.id))
-            .reduce((a, b) => a + b, 0);
-    };
-    const getRowsCount = () => {
-        return getRows().length;
-    };
-    const getColumnsCount = () => {
-        return getCols().length;
-    };
-    const handleInputChange = (name, value) => {
-        setTableData((prevData) => ({ ...prevData, [name]: value }));
-    };
-    const handleValidation = (cellId, colId, rowId) => {
-        const headerValue = tableData[`column${colId}`];
-        const rowValue = tableData[`row${rowId}`];
-        if (props.onValidate && props.onValidate(headerValue, rowValue)) {
-            return handleInputChange(cellId, true);
-        }
-        return { stopUIChange: true };
-    };
-    const handleRemoveValidation = (cellId) => {
-        handleInputChange(cellId, false);
-    };
-    const initializeTableWithDefaults = () => {
-        const initialData = { row0: 1, column0: 1 };
-        setTableData(initialData);
-    };
-    const initializeTable = (tableJson) => {
-        try {
-            const initialData = JSON.parse(tableJson);
-            setTableData(initialData);
-        }
-        catch (error) {
-            console.error("Error al inicializar la tabla:", error);
-        }
-    };
-    const cellBordered = {
-        border: "1px solid #ccc",
-    };
-    const pastelGrayBackground = {
-        backgroundColor: "#B69E99",
-    };
-    const cellCenteredContent = {
-        textAlign: "center",
-        verticalAlign: "middle",
-    };
-    const renderTotalHeight = () => {
-        const sumaFilas = getRows()
-            .map((row) => getTotalForRow(row.id))
-            .reduce((a, b) => a + b, 0);
-        const sumTotalFilas = sumaFilas +
-            (margins?.marginTop ?? 0) +
-            (getRows().length - 1) * (margins?.verticalGap ?? 0);
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "ml-4 inline-block", children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Total alto: ", sumTotalFilas, " "] }), margins && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["(Celdas: ", sumaFilas, " + M\u00E1rgen superior: ", margins?.marginTop ?? 0, " +", " ", getRows().length - 1, " Brechas verticales:", " ", Math.round((getRows().length - 1) * (margins?.verticalGap ?? 0)), ")"] }))] }));
-    };
-    const renderTotalWidth = () => {
-        const cols = getCols();
-        const sumaColumnas = cols
-            .map((col) => getTotalForColumn(col.id))
-            .reduce((a, b) => a + b, 0);
-        const sumaTotal = sumaColumnas +
-            (margins?.marginLeft ?? 0) +
-            (getCols().length - 1) * (margins?.horizontalGap ?? 0);
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "ml-4 inline-block", children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Total ancho: ", sumaTotal, " "] }), margins && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["(Celdas: ", sumaColumnas, " + M\u00E1rgen izquierdo:", " ", margins?.marginLeft ?? 0, " + ", getCols().length - 1, " Brechas horizontales:", " ", Math.round((getCols().length - 1) * (margins?.horizontalGap ?? 0)), ")"] }))] }));
-    };
-    const renderHeader = () => {
-        const cols = getCols();
-        return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "align-middle py-2 text-center", style: {
-                        ...cellBordered,
-                        ...pastelGrayBackground,
-                    }, children: intersectionTitle ?? "" }), cols.map((col) => ((0, jsx_runtime_1.jsx)("th", { className: "align-middle py-2 text-center", style: { ...cellBordered, ...pastelGrayBackground }, children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex", children: [(0, jsx_runtime_1.jsx)(index_js_2.TextField, { style: { maxWidth: "45%", minWidth: "45%" }, name: `column${col.id}`, defaultValue: tableData[`column${col.id}`] || 1, type: "number", onChange: (value) => handleInputChange(`column${col.id}`, value) }), col.id > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => removeCol(col.id), children: "x" }))] }) }, col.id))), (0, jsx_runtime_1.jsx)("th", { children: (0, jsx_runtime_1.jsx)("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addCol, children: "+" }) })] }));
-    };
-    const renderRow = (rowId) => {
-        const cols = getCols();
-        return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "align-middle", style: {
-                        ...cellBordered,
-                        ...pastelGrayBackground,
-                        textOverflow: "ellipsis",
-                        msTextOverflow: "ellipsis",
-                        maxWidth: "200px",
-                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex", children: [(0, jsx_runtime_1.jsx)(index_js_2.TextField, { style: { maxWidth: "45%", minWidth: "45%" }, name: `row${rowId}`, defaultValue: tableData[`row${rowId}`] || 1, type: "number", onChange: (value) => handleInputChange(`row${rowId}`, value) }), rowId > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "bg-red-500 hover:bg-red-600 font-bold py-1 px-2 rounded ml-2", onClick: () => {
-                                    removeRow(rowId);
-                                }, children: "x" }))] }) }), cols.map((col) => {
-                    const cellId = `cell-${rowId}-${col.id}`;
-                    const cellValidation = tableData[cellId] === true;
-                    if (!cellInputs)
-                        tableData[cellId] = cellValidation;
-                    return ((0, jsx_runtime_1.jsx)("td", { id: cellId, style: { ...cellBordered, ...cellCenteredContent }, children: cellInputs ? ((0, jsx_runtime_1.jsx)(index_js_1.TextArea, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : ((0, jsx_runtime_1.jsx)(index_js_3.CheckBox, { name: cellId, defaultValue: cellValidation, onChange: (value) => {
-                                if (value) {
-                                    return handleValidation(cellId, col.id, rowId);
-                                }
-                                else {
-                                    handleRemoveValidation(cellId);
-                                }
-                            } })) }, col.id));
-                }), rowId === 0 && ((0, jsx_runtime_1.jsx)("td", { rowSpan: getRows().length, style: { maxWidth: "100px" }, children: renderTotalHeight() }))] }, rowId));
-    };
-    const renderRows = () => {
-        const rows = getRows();
-        return rows.map((row) => renderRow(row.id));
-    };
-    // Use el "useImperativeHandle" para que el componente padre pueda acceder a los métodos deseados
-    react_1.default.useImperativeHandle(forwardedRef, () => ({
-        getTotalForRows,
-        getTotalForColumns,
-        getColumnsCount,
-        getRowsCount,
-    }));
-    return ((0, jsx_runtime_1.jsx)("div", { className: `${className}`, children: (0, jsx_runtime_1.jsxs)("table", { className: "border-collapse", children: [(0, jsx_runtime_1.jsx)("thead", { children: renderHeader() }), (0, jsx_runtime_1.jsx)("tbody", { children: renderRows() }), (0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: addRow, children: "+" }) }), (0, jsx_runtime_1.jsx)("td", { colSpan: getCols().length + 1, className: "text-left align-middle", style: {
-                                    textOverflow: "ellipsis",
-                                    msTextOverflow: "ellipsis",
-                                }, children: renderTotalWidth() })] }) })] }) }));
-};
-exports.DynamicTable = DynamicTable;