@zauru-sdk/components 1.0.51 → 1.0.53

package/dist/cjs/DynamicTable/DynamicPrintTable.js

@@ -0,0 +1,158 @@
+"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.SelectFieldWithoutValidation, { 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.TextFieldWithoutValidation, { 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

@@ -0,0 +1,219 @@
+"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.TextFieldWithoutValidation, { 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.TextFieldWithoutValidation, { 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.TextAreaWithoutValidation, { name: cellId, defaultValue: tableData[cellId] || "", onChange: (value) => handleInputChange(cellId, value) })) : ((0, jsx_runtime_1.jsx)(index_js_3.CheckboxWithoutValidation, { 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;

package/dist/cjs/DynamicTable/GenericDynamicTable.js

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericDynamicTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_js_1 = require("../Form/SelectField/index.js");
+const index_js_2 = require("../Form/TextField/index.js");
+const index_js_3 = require("../Form/Checkbox/index.js");
+const index_js_4 = require("../Modal/index.js");
+const index_js_5 = require("../Buttons/index.js");
+const redux_1 = require("@zauru-sdk/redux");
+const common_1 = require("@zauru-sdk/common");
+const index_js_6 = require("../Skeletons/index.js");
+const index_js_7 = require("../WithTooltip/index.js");
+const icons_1 = require("@zauru-sdk/icons");
+const GenericDynamicTableErrorComponent = ({ name, formName, }) => {
+    const { formValidations } = (0, redux_1.useAppSelector)((state) => state.formValidation);
+    const error = formValidations[formName ?? "-1"]?.[name ?? "-1"];
+    return error ? ((0, jsx_runtime_1.jsxs)("p", { className: `mt-2 text-sm text-red-600 dark:text-red-500`, children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Oops!" }), " ", error] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+};
+const GenericDynamicTable = (props) => {
+    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, } = props;
+    const [tableData, setTableData] = (0, react_1.useState)(defaultValue);
+    const [deletedData, setDeletedData] = (0, react_1.useState)([]);
+    const [search, setSearch] = (0, react_1.useState)("");
+    const [filteredTableData, setFilteredTableData] = (0, react_1.useState)(tableData);
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [itemsPerPage, setItemsPerPage] = (0, react_1.useState)(defaultItemsPerPage);
+    (0, react_1.useEffect)(() => {
+        if (defaultValue.length) {
+            setTableData(defaultValue);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setFilteredTableData(tableData);
+    }, [tableData]);
+    (0, react_1.useEffect)(() => {
+        changeFilteredData();
+    }, [tableData, search]);
+    const totalPages = () => {
+        return Math.ceil(filteredTableData.length / itemsPerPage);
+    };
+    const addRow = () => {
+        const defs = {};
+        columns.forEach((x) => {
+            defs[`${x.name}`] =
+                x.type == "label" || x.type == "textField"
+                    ? ""
+                    : x.type == "selectField"
+                        ? 0
+                        : x.type == "checkbox"
+                            ? false
+                            : 0;
+        });
+        setTableData((prevData) => [
+            ...prevData,
+            { id: (0, common_1.generateClientUUID)(), ...defs },
+        ]);
+    };
+    const removeRow = (rowId) => {
+        const newDeletedData = [...deletedData];
+        const deletedItem = tableData?.find((x) => x.id === rowId);
+        if (deletedItem && !isNaN(deletedItem.id)) {
+            newDeletedData.push(deletedItem);
+        }
+        setDeletedData(newDeletedData);
+        setTableData((prevData) => prevData?.filter((x) => x.id !== rowId));
+    };
+    const handleChange = (name, value, rowId) => {
+        // Encontrar el índice de la fila que está cambiando
+        const rowIndex = tableData.findIndex((x) => x.id === rowId);
+        // Crear una copia del objeto en esa fila
+        const updatedRow = { ...tableData[rowIndex], [name]: value };
+        // Copiar todo el array
+        const updatedData = [...tableData];
+        // Reemplazar el objeto en la fila que cambió
+        updatedData[rowIndex] = updatedRow;
+        // Actualizar el estado con el nuevo array
+        setTableData(updatedData);
+        onChange && onChange(updatedData);
+    };
+    const renderHeader = () => ((0, jsx_runtime_1.jsxs)("tr", { style: { ...thCSSProperties }, children: [columns.map((column, index) => {
+                const ancho = column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
+                return ((0, jsx_runtime_1.jsx)("th", { className: `text-left align-middle p-2 ${thElementsClassName}`, style: { width: `${ancho}%` }, children: column.label }, index));
+            }), editable && (0, jsx_runtime_1.jsx)("th", { style: { width: "4%" } })] }));
+    const renderRow = (rowData, index) => {
+        return ((0, jsx_runtime_1.jsxs)("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [columns.map((column) => {
+                    if (loading) {
+                        return ((0, jsx_runtime_1.jsx)("td", { className: "align-middle p-1", children: (0, jsx_runtime_1.jsx)(index_js_6.LoadingInputSkeleton, {}) }, `${rowData.id}-${column.name}`));
+                    }
+                    const tempVal = rowData[column.name];
+                    const defaultVal = column.type === "selectField"
+                        ? column.options?.find((x) => x.value === tempVal)
+                        : tempVal;
+                    if (column.type === "label") {
+                        return ((0, jsx_runtime_1.jsx)("td", { className: "align-middle p-1", children: (0, jsx_runtime_1.jsx)("div", { children: defaultVal }) }, `${rowData.id}-${column.name}`));
+                    }
+                    const FieldComponent = column.type === "textField"
+                        ? index_js_2.TextFieldWithoutValidation
+                        : column.type === "checkbox"
+                            ? index_js_3.CheckboxWithoutValidation
+                            : index_js_1.SelectFieldWithoutValidation;
+                    const setTableValue = (columnName, newValue) => {
+                        setTableData((prevState) => {
+                            // Encontrar el índice de la fila que está cambiando
+                            const rowIndex = prevState.findIndex((x) => x.id === rowData.id);
+                            // Crear una copia del objeto en esa fila
+                            const updatedRow = {
+                                ...prevState[rowIndex],
+                                [columnName]: newValue,
+                            };
+                            // Copiar todo el array
+                            const updatedData = [...prevState];
+                            // Reemplazar el objeto en la fila que cambió
+                            updatedData[rowIndex] = updatedRow;
+                            return updatedData;
+                        });
+                    };
+                    return ((0, jsx_runtime_1.jsx)("td", { className: "align-middle p-1", children: column.loadingOptions ? ((0, jsx_runtime_1.jsx)(index_js_6.LoadingInputSkeleton, {})) : ((0, jsx_runtime_1.jsx)(FieldComponent, { 
+                            //name={column.name}
+                            type: column.textFieldType, integer: !!column.integer, disabled: column.disabled, isClearable: true, onChange: (value) => {
+                                const sendValue = value?.value ?? value;
+                                handleChange(column.name, sendValue, rowData.id);
+                                column.onChange &&
+                                    column.onChange(rowData, sendValue, setTableValue);
+                            }, defaultValue: defaultVal, options: column.options ?? [] }, `${rowData.id}-${column.name}`)) }, `${rowData.id}-${column.name}`));
+                }), editable && ((0, jsx_runtime_1.jsx)("td", { className: "align-middle w-16", children: (0, jsx_runtime_1.jsx)(index_js_7.WithTooltip, { text: "Eliminar", 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();
+                                (0, index_js_4.createModal)({
+                                    title: "¿Está seguro que quiere eliminar este registro?",
+                                    description: "Una vez eliminada la información no podrá ser recuperada.",
+                                }).then((response) => {
+                                    if (response === "OK") {
+                                        removeRow(rowData.id);
+                                    }
+                                });
+                            }, type: "button", children: (0, jsx_runtime_1.jsx)(icons_1.TrashSvg, {}) }) }) }))] }, rowData.id));
+    };
+    const renderRows = () => {
+        let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+        if (loading) {
+            mapeable = [
+                { id: 1 },
+                { id: 2 },
+                { id: 3 },
+                { id: 4 },
+                { id: 5 },
+                { id: 6 },
+                { id: 7 },
+                { id: 8 },
+                { id: 9 },
+                { id: 10 },
+            ];
+        }
+        return mapeable.map((rowData, index) => renderRow(rowData, index));
+    };
+    const handleChangeSearch = (newSearch) => {
+        setSearch(newSearch);
+    };
+    const changeFilteredData = () => {
+        if (search) {
+            const filteredData = tableData.filter((rowData) => {
+                for (const searchable of searcheables) {
+                    const column = columns.find((col) => col.name === searchable.value);
+                    if (column) {
+                        const tempVal = rowData[column.name];
+                        const defaultVal = column.type === "selectField"
+                            ? column.options?.find((x) => x.value === tempVal)?.label
+                            : tempVal;
+                        if (defaultVal
+                            ?.toString()
+                            .toLowerCase()
+                            .includes(search.toLowerCase())) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            });
+            setFilteredTableData(filteredData);
+        }
+        else {
+            setFilteredTableData(tableData);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GenericDynamicTableErrorComponent, { name: name }), (0, jsx_runtime_1.jsx)("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), (0, jsx_runtime_1.jsx)("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), (0, jsx_runtime_1.jsxs)("div", { className: `${className}`, children: [searcheables.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(index_js_2.TextFieldWithoutValidation, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
+                                .map((x) => x.label)
+                                .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), (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() }), footerRow && !editable ? ((0, jsx_runtime_1.jsx)("tfoot", { className: "border-t-2 border-black", children: (0, jsx_runtime_1.jsx)("tr", { children: Object.keys(footerRow ?? {})?.map((x, indx) => {
+                                        return ((0, jsx_runtime_1.jsx)("td", { className: "align-middle", children: footerRow[x] }, indx));
+                                    }) }) })) : editable ? ((0, jsx_runtime_1.jsx)("tfoot", { children: (0, jsx_runtime_1.jsx)("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.jsx)(jsx_runtime_1.Fragment, {}))] }), paginated && totalPages() > 1 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mt-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(index_js_5.Button, { type: "button", disabled: currentPage === 1, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), (0, jsx_runtime_1.jsx)("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), (0, jsx_runtime_1.jsx)(index_js_5.Button, { type: "button", disabled: currentPage === totalPages(), onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("select", { value: itemsPerPage, onChange: (e) => {
+                                        setItemsPerPage(Number(e.target.value));
+                                        setCurrentPage(1); // resetear la página al cambiar los elementos por página
+                                    }, children: itemsPerPageOptions.map((option) => ((0, jsx_runtime_1.jsxs)("option", { value: option, children: [option, " elementos por p\u00E1gina"] }, option))) }) })] }))] })] }));
+};
+exports.GenericDynamicTable = GenericDynamicTable;

package/dist/cjs/DynamicTable/index.js

@@ -0,0 +1,20 @@
+"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("./BasicPrintDynamicTable.js"), exports);
+__exportStar(require("./DynamicPrintTable.js"), exports);
+__exportStar(require("./DynamicTable.js"), exports);
+__exportStar(require("./GenericDynamicTable.js"), exports);

package/dist/cjs/Footer/Footer.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_js_1 = require("./../ConnectionState/index.js");
+const COLORS = {
+    purple: "bg-purple-500",
+    pink: "bg-pink-500",
+    indigo: "bg-indigo-500",
+    cyan: "bg-cyan-500",
+    slate: "bg-slate-500",
+    green: "bg-green-500",
+    red: "bg-red-500",
+    sky: "bg-sky-500",
+};
+const Footer = ({ href, selectedColor, showConnection = false, }) => {
+    const color = COLORS[selectedColor];
+    return ((0, jsx_runtime_1.jsx)("footer", { className: `inset-x-0 bottom-0 px-2 py-[20px] ${color}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "px-4 mx-auto flex flex-wrap items-center justify-center", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-white text-[1.2rem]", children: [`Creado en `, " ", (0, jsx_runtime_1.jsx)("a", { href: href, children: "Zauru" }), " ", `con ❤️ ${new Date().getFullYear()} v.3.2`] }), showConnection && ((0, jsx_runtime_1.jsx)("div", { className: "ml-5", children: (0, jsx_runtime_1.jsx)(index_js_1.ConnectionState, {}) }))] }) }));
+};
+exports.Footer = Footer;

package/dist/cjs/Footer/index.js

@@ -0,0 +1,17 @@
+"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("./Footer.js"), exports);