@arquimedes.co/eureka-forms 2.0.54 → 2.0.56

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -54,8 +54,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
@@ -64,57 +64,111 @@ import InputIcon from '../../../Shared/InputIcon/InputIcon';
 import FormContext from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import { evaluateCondition } from '../../StepFunctions';
-import { recursivelyCalcConditionSteps } from '../../StepHooks';
+import { recursivelyCalcConditionSteps, selectDependencies, } from '../../StepHooks';
+import { useAppSelector } from '../../../hooks';
+import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
 function EntityValuePickerStep(_a) {
+    var _b, _c;
     var step = _a.step, editable = _a.editable;
     var form = useContext(FormContext);
-    return (_jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
-                return option._id === value._id;
-            }, calcDepError: function (steps) {
-                for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
-                    var step_1 = steps_1[_i];
-                    if (step_1.type === FormStepTypes.ENTITYVALUEPICKER) {
-                        return 'Selecciona un ' + step_1.label;
-                    }
-                }
-                return undefined;
-            }, filterOptions: function (options, dependencies) {
-                var filteredOptions = [];
-                for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
-                    var value = options_1[_i];
-                    var option = step.options[value._id];
-                    if ((option === null || option === void 0 ? void 0 : option.type) === EntityValueOptionTypes.HIDE)
-                        continue;
-                    if (!option ||
-                        !option.condition ||
-                        evaluateCondition(option.condition, dependencies))
-                        filteredOptions.push(value);
-                }
-                return filteredOptions;
-            }, getOptionsConditionsIdSteps: function () {
-                var _a;
-                var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
-                for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
-                    var option = _b[_i];
-                    if (option.type !== EntityValueOptionTypes.HIDE &&
-                        option.condition) {
-                        dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
-                    }
-                }
-                return dependencies;
-            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
-                if (!value)
-                    return _jsx(_Fragment, {});
-                var currentOption = step.options[value._id];
-                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
-                    return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
-                            var subStep = form.steps[idStep];
-                            return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
-                        }) }));
+    var _d = useState(), dialogs = _d[0], setDialogs = _d[1];
+    var dialogsIdStepDeps = useMemo(function () {
+        var ids = [];
+        if (!step.dialogs)
+            return ids;
+        for (var _i = 0, _a = step.dialogs; _i < _a.length; _i++) {
+            var dialog = _a[_i];
+            ids.push.apply(ids, recursivelyCalcConditionSteps(dialog.condition));
+        }
+        return ids;
+    }, []);
+    var dialogDeps = useAppSelector(function (state) {
+        return selectDependencies(state, dialogsIdStepDeps);
+    });
+    var handleCloseDialog = useCallback(function () {
+        setDialogs(function (dialogs) {
+            return dialogs && (dialogs === null || dialogs === void 0 ? void 0 : dialogs.pending.length) > 0
+                ? {
+                    current: dialogs.pending[0],
+                    pending: dialogs.pending.slice(1),
+                    value: dialogs.value,
                 }
-                else
-                    return _jsx(_Fragment, {});
-            } }) })));
+                : undefined;
+        });
+    }, []);
+    return (_jsxs(React.Fragment, { children: [dialogs !== undefined && ((_b = form.entities) === null || _b === void 0 ? void 0 : _b[step.idEntity]) && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: (_c = form.entities) === null || _c === void 0 ? void 0 : _c[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
+                        return option._id === value._id;
+                    }, calcDepError: function (steps) {
+                        for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
+                            var step_1 = steps_1[_i];
+                            if (step_1.type === FormStepTypes.ENTITYVALUEPICKER) {
+                                return 'Selecciona un ' + step_1.label;
+                            }
+                        }
+                        return undefined;
+                    }, changeListener: function (value) {
+                        var _a, _b;
+                        if (!value)
+                            return;
+                        var dialogsToDisplay = [];
+                        for (var _i = 0, _c = (_a = step.dialogs) !== null && _a !== void 0 ? _a : []; _i < _c.length; _i++) {
+                            var dialog = _c[_i];
+                            if (!dialog.condition) {
+                                dialogsToDisplay.push(dialog);
+                                continue;
+                            }
+                            if (evaluateCondition(dialog.condition, dialogDeps, {
+                                entity: (_b = form.entities) === null || _b === void 0 ? void 0 : _b[step.idEntity],
+                                entityValue: value,
+                            })) {
+                                dialogsToDisplay.push(dialog);
+                            }
+                        }
+                        if (dialogsToDisplay.length > 0) {
+                            setDialogs({
+                                value: value,
+                                current: dialogsToDisplay[0],
+                                pending: dialogsToDisplay.slice(1),
+                            });
+                        }
+                    }, filterOptions: function (options, dependencies) {
+                        var filteredOptions = [];
+                        for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
+                            var value = options_1[_i];
+                            var option = step.options[value._id];
+                            if ((option === null || option === void 0 ? void 0 : option.type) === EntityValueOptionTypes.HIDE)
+                                continue;
+                            if (!option ||
+                                !option.condition ||
+                                evaluateCondition(option.condition, dependencies))
+                                filteredOptions.push(value);
+                        }
+                        return filteredOptions;
+                    }, getOptionsConditionsIdSteps: function () {
+                        var _a;
+                        var dependencies = __spreadArray([], ((_a = step.dependencies) !== null && _a !== void 0 ? _a : []), true);
+                        for (var _i = 0, _b = Object.values(step.options); _i < _b.length; _i++) {
+                            var option = _b[_i];
+                            if (option.type !== EntityValueOptionTypes.HIDE &&
+                                option.condition) {
+                                dependencies.push.apply(dependencies, recursivelyCalcConditionSteps(option.condition));
+                            }
+                        }
+                        return dependencies;
+                    }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
+                        if (!value)
+                            return _jsx(_Fragment, {});
+                        var currentOption = step.options[value._id];
+                        if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) ===
+                            EntityValueOptionTypes.NESTED) {
+                            return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
+                                    var subStep = form.steps[idStep];
+                                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                                }) }));
+                        }
+                        else
+                            return _jsx(_Fragment, {});
+                    } }) }))] }));
 }
 export default EntityValuePickerStep;
 var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.d.ts

@@ -1,10 +1,13 @@
 import { MapperStepProps } from '../../MapperStep';
 import React from 'react';
 import { MapperElement } from '../../../../@Types/MapperElement';
+import { MapperValue } from '../MaterialMapperStep';
 export interface MapperElementComponentProps<Type> {
     num: number;
     loading?: boolean;
     element: MapperElement<Type>;
+    onChange: (value: MapperValue<Type>) => void;
+    value: MapperValue<Type>;
     handleDelete: () => void;
     children?: React.ReactNode;
 }

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js

@@ -18,6 +18,7 @@ import PillMapperElement from './PillMapperElement/PillMapperElement';
 import React, { useContext, useMemo } from 'react';
 import FormContext from '../../../../Contexts/FormContext';
 import CustomContext from '../../../../Contexts/CustomContext';
+import PagedMapperElement from './PagedMapperElement/PagedMapperElement';
 function MapperElementComponent(props) {
     var _a;
     var step = props.step, element = props.element, editable = props.editable;
@@ -43,6 +44,8 @@ function MapperElementComponent(props) {
             return _jsx(React.Fragment, { children: mapSubSteps() });
         case MapperStyleTypes.LIST:
             return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+        case MapperStyleTypes.PAGED:
+            return (_jsx(PagedMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
         case MapperStyleTypes.PILL:
         default:
             return (_jsx(PillMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../../../MapperStep';
+import { MapperElementComponentProps } from '../MapperElementComponent';
+declare function PagedMapperElement<Type = any>({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }: MapperStepProps<Type> & MapperElementComponentProps<Type>): JSX.Element;
+export default PagedMapperElement;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js

@@ -0,0 +1,204 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useContext, useMemo } from 'react';
+import styles from './PagedMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppDispatch, useAppSelector } from '../../../../../hooks';
+import { MobileStepper, makeStyles } from '@material-ui/core';
+import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
+import CustomBtn from '../../../../../Shared/CustomBtn/CustomBtn';
+import { useFormContext } from 'react-hook-form';
+import { updateNestedValues } from '../../../../../States/SiteSlice';
+function PagedMapperElement(_a) {
+    var _this = this;
+    var _b;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, onChange = _a.onChange, value = _a.value, handleDelete = _a.handleDelete, customElementModifiers = _a.customElementModifiers, customElementRender = _a.customElementRender;
+    var deletable = (_b = step.deletable) !== null && _b !== void 0 ? _b : true;
+    var size = useContext(FormContext).size;
+    var elements = value.elements, page = value.page;
+    var dispatch = useAppDispatch();
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
+    var totalElements = elements.filter(function (elem) { return !elem.deleted; });
+    var position = totalElements.findIndex(function (e) { return e.id == element.id; });
+    var pagingRef = React.useRef(null);
+    var _d = useFormContext(), getValues = _d.getValues, trigger = _d.trigger, handleSubmit = _d.handleSubmit;
+    var nextIndex = useMemo(function () {
+        for (var i = page + 1; i < elements.length; i++) {
+            var element_1 = elements[i];
+            if (!element_1.deleted) {
+                return i;
+            }
+        }
+        return null;
+    }, [value]);
+    var prevIndex = useMemo(function () {
+        for (var i = page - 1; i >= 0; i--) {
+            var element_2 = elements[i];
+            if (!element_2.deleted) {
+                return i;
+            }
+        }
+        return null;
+    }, [value]);
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    var handleErrors = handleSubmit(function () { }, function (errors) {
+        console.error('Errors:', errors);
+    });
+    var handleChangePage = useCallback(function (index) { return __awaiter(_this, void 0, void 0, function () {
+        var valid, values, nestedValues, _i, _a, _b, key, value_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
+                case 1:
+                    valid = _c.sent();
+                    /** Imprimir errores si no es valido */
+                    if (!valid) {
+                        handleErrors();
+                        return [2 /*return*/];
+                    }
+                    values = getValues();
+                    nestedValues = {};
+                    for (_i = 0, _a = Object.entries(values); _i < _a.length; _i++) {
+                        _b = _a[_i], key = _b[0], value_1 = _b[1];
+                        if (key.startsWith(step.id + '-' + element.id)) {
+                            nestedValues[key] = value_1;
+                        }
+                    }
+                    dispatch(updateNestedValues({
+                        key: step.id + '-' + element.id,
+                        values: nestedValues,
+                    }));
+                    location.href = '#' + step.id;
+                    //Updated the nestedValues in the values store.
+                    onChange({
+                        elements: elements,
+                        page: index,
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [elements]);
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
+    var name = calcName
+        ? calcName(element)
+        : step.unitLabel
+            ? step.unitLabel + ' ' + (num + 1)
+            : '';
+    var renderElement = function (renderElementButtons) {
+        var _a, _b, _c;
+        return (_jsx("div", __assign({ className: widthStats.isMobile
+                ? styles.mobileContainer
+                : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        ((_b = (_a = step.style) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : size.blockNum - 1),
+                } }, { children: [name && (_jsx("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: loading ? 'Cargando...' : name + ':' }))), _jsxs("div", __assign({ className: styles.btnsContainer }, { children: [renderElementButtons === null || renderElementButtons === void 0 ? void 0 : renderElementButtons(element), (deletable || !element.isOriginal) && (_jsx("div", __assign({ className: !editable || postview
+                                    ? styles.disabledDeleteBtn
+                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                                    if (editable && !postview) {
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                    }
+                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })), children, totalElements.length > 0 && (_jsx("div", __assign({ className: styles.pagingContainer, ref: pagingRef }, { children: _jsx(CustomStepper, { totalElements: totalElements.length, position: position, handleNext: nextIndex !== null
+                                ? function () {
+                                    return handleChangePage(nextIndex);
+                                }
+                                : undefined, handlePrev: prevIndex !== null
+                                ? function () {
+                                    return handleChangePage(prevIndex);
+                                }
+                                : undefined, width: (_c = pagingRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth }) })))] })) })));
+    };
+    return (_jsx("div", __assign({ className: styles.containerContainer }, { children: customElementRender
+            ? customElementRender(element, num, renderElement)
+            : renderElement() })));
+}
+export default PagedMapperElement;
+var useStepperStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            backgroundColor: 'transparent',
+            padding: '10px',
+            '& .EF-MuiMobileStepper-dot': {
+                width: 11,
+                height: 11,
+                backgroundColor: props.outlineColor,
+            },
+            '& .EF-MuiMobileStepper-dotActive': {
+                backgroundColor: props.primaryColor,
+            },
+            '& .EF-MuiLinearProgress-root': {
+                height: 8,
+                backgroundColor: props.outlineColor,
+                borderRadius: 4,
+                margin: '0px 8px',
+            },
+            '& .EF-MuiLinearProgress-barColorPrimary': {
+                backgroundColor: props.primaryColor,
+            },
+        },
+    }); });
+};
+function CustomStepper(_a) {
+    var position = _a.position, handleNext = _a.handleNext, totalElements = _a.totalElements, width = _a.width, handlePrev = _a.handlePrev;
+    var formStyle = useAppSelector(function (state) { return state.global.formStyle; });
+    var classes = useStepperStyles(formStyle)();
+    var fits = useMemo(function () {
+        return (width !== null && width !== void 0 ? width : 0) > 16 + totalElements * 15 + 128;
+    }, [width]);
+    if (!width)
+        return _jsx(_Fragment, {});
+    return (_jsx(MobileStepper, { className: classes.root, steps: totalElements, position: "static", variant: fits ? 'dots' : 'progress', activeStep: position, nextButton: _jsx(CustomBtn, __assign({ onClick: handleNext, disabled: !handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px" }, { children: _jsx(KeyboardArrowRight, { style: {
+                    width: 30,
+                    height: 30,
+                } }) })), backButton: _jsx(CustomBtn, __assign({ onClick: handlePrev, disabled: !handlePrev, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px" }, { children: _jsx(KeyboardArrowLeft, { style: {
+                    width: 30,
+                    height: 30,
+                } }) })) }));
+}

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.module.css

@@ -0,0 +1,75 @@
+.containerContainer {
+    margin-top: 10px;
+}
+
+.container,
+.mobileContainer {
+    background-color: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    width: fit-content;
+    border-radius: 20px;
+    margin-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+}
+
+.container {
+    max-width: calc(100% - 112px);
+    padding-right: 55px;
+    padding-left: 55px;
+}
+
+.mobileContainer {
+    max-width: calc(100% - 42px);
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.titleLbl {
+    width: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.btnsContainer {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+}
+
+.deleteBtn,
+.disabledDeleteBtn {
+    font-size: 24px;
+}
+
+.deleteBtn {
+    cursor: pointer;
+    height: 24px;
+}
+
+.pagingContainer {
+    width: 100%;
+}

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -3,13 +3,17 @@ import { MapperStepProps } from '../MapperStep';
 import { FieldError } from 'react-hook-form';
 import { MapperElement } from '../../../@Types/MapperElement';
 import { Form } from '../../../@Types';
+export interface MapperValue<Type> {
+    elements: MapperElement<Type>[];
+    page: number;
+}
 export interface MapperComponentProps<Type> extends MapperStepProps<Type> {
     form: Form;
     loading?: boolean;
     error: FieldError | undefined;
-    onChange: (elements: MapperElement<Type>[]) => void;
+    onChange: (value: MapperValue<Type>) => void;
     handleAddElement: (elementValue?: Type) => void;
-    elements: MapperElement<Type>[];
+    value: MapperValue<Type>;
     inputRef: any;
 }
 declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;

package/dist/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -29,8 +29,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useContext, useMemo, useCallback, } from 'react';
 import styles from './MaterialMapperStep.module.css';
 import { useFormContext } from 'react-hook-form';
@@ -45,11 +45,23 @@ import { useFormStep } from '../../StepHooks';
 import { addMapperStep } from '../../../App/AppFunctions';
 import { calcMapperSubSteps } from '../../../Form/FormFunctions';
 function MapperComponent(_a) {
-    var form = _a.form, step = _a.step, error = _a.error, loading = _a.loading, inputRef = _a.inputRef, editable = _a.editable, customAdd = _a.customAdd, elements = _a.elements, onChange = _a.onChange, handleAddElement = _a.handleAddElement, others = __rest(_a, ["form", "step", "error", "loading", "inputRef", "editable", "customAdd", "elements", "onChange", "handleAddElement"]);
+    var form = _a.form, step = _a.step, error = _a.error, value = _a.value, loading = _a.loading, inputRef = _a.inputRef, editable = _a.editable, customAdd = _a.customAdd, onChange = _a.onChange, handleAddElement = _a.handleAddElement, others = __rest(_a, ["form", "step", "error", "value", "loading", "inputRef", "editable", "customAdd", "onChange", "handleAddElement"]);
+    var page = value.page, elements = value.elements;
     var handleDeleteElement = useCallback(function (index) { return function () {
         var tempElements = __spreadArray([], elements, true);
         tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        onChange(tempElements);
+        var newPage = 0;
+        for (var i = page; i >= 0; i--) {
+            var element = elements[i];
+            if (!element.deleted) {
+                newPage = i;
+                break;
+            }
+        }
+        onChange({
+            elements: tempElements,
+            page: page === index ? newPage : page,
+        });
     }; }, [elements, onChange]);
     var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
     var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, postview = _b.postview;
@@ -64,11 +76,17 @@ function MapperComponent(_a) {
         }
     }, [step]).container;
     var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: form }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, loading: loading, handleDelete: handleDeleteElement(index) }))); }) })));
+        if (step.style.type === MapperStyleTypes.PAGED) {
+            var element = elements[page];
+            if (!element)
+                return _jsx(_Fragment, {});
+            return (_jsx(FormContext.Provider, __assign({ value: form }, { children: _createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: page, element: element, step: step, editable: editable, loading: loading, onChange: onChange, value: value, handleDelete: handleDeleteElement(page) })) })));
+        }
+        return (_jsx(FormContext.Provider, __assign({ value: form }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { num: index, key: element.id, element: element, step: step, editable: editable, loading: loading, onChange: onChange, value: value, handleDelete: handleDeleteElement(index) }))); }) })));
     };
     if (step.style.type === MapperStyleTypes.INLINE)
         return _jsx(React.Fragment, { children: mapElements() });
-    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id, id: step.id }, { children: [step.label && _jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
@@ -90,7 +108,7 @@ function MapperStep(props) {
     var dispatch = useAppDispatch();
     var setValue = useFormContext().setValue;
     var _a = useFormStep(step, {
-        defaultValue: [],
+        defaultValue: { elements: [], page: 0 },
         rules: {
             validate: function (array) {
                 return !step.required ||
@@ -99,10 +117,11 @@ function MapperStep(props) {
             },
         },
     }), ref = _a.ref, value = _a.value, onChange = _a.onChange, error = _a.error;
-    var _b = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _b[0], setLocalSteps = _b[1];
+    var elements = value.elements;
+    var _b = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _b[0], setLocalSteps = _b[1];
     //Por alguna razón si se saca esto del componente no se ejecuta el agregar inicial
     useEffect(function () {
-        if (value.length === 0 && !postview && editable && step.creatable) {
+        if (elements.length === 0 && !postview && editable && step.creatable) {
             if (!customAdd)
                 handleAddElement();
         }
@@ -115,8 +134,13 @@ function MapperStep(props) {
             var _c = _b[_i], key = _c[0], elems = _c[1];
             setValue(key, elems);
         }
-        var newElements = __spreadArray(__spreadArray([], value, true), [element], false);
-        onChange(newElements);
+        var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
+        onChange({
+            elements: newElements,
+            page: step.style.type === MapperStyleTypes.PAGED
+                ? elements.length - 1
+                : 0,
+        });
         setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
         dispatch(addStepsDependencies({
             steps: steps,
@@ -125,10 +149,11 @@ function MapperStep(props) {
         }));
     }, [step, form, customSteps, value, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    return (_jsx(MapperComponent, __assign({}, props, { error: error, inputRef: ref, onChange: onChange, handleAddElement: handleAddElement, form: subForm, elements: value })));
+    return (_jsx(MapperComponent, __assign({}, props, { error: error, inputRef: ref, onChange: onChange, value: value, handleAddElement: handleAddElement, form: subForm })));
 }
 export function CustomMapperStep(props) {
-    var step = props.step, elements = props.elements, onChange = props.onChange;
+    var step = props.step, value = props.value, onChange = props.onChange;
+    var elements = value.elements;
     var form = useContext(FormContext);
     var customSteps = useContext(CustomContext).customSteps;
     var dispatch = useAppDispatch();
@@ -143,7 +168,12 @@ export function CustomMapperStep(props) {
             setValue(key, elems);
         }
         var newElements = __spreadArray(__spreadArray([], elements, true), [element], false);
-        onChange(newElements);
+        onChange({
+            elements: newElements,
+            page: step.style.type === MapperStyleTypes.PAGED
+                ? elements.length - 1
+                : 0,
+        });
         setLocalSteps(function (oldLocalSteps) { return (__assign(__assign({}, oldLocalSteps), steps)); });
         dispatch(addStepsDependencies({
             steps: steps,
@@ -152,6 +182,6 @@ export function CustomMapperStep(props) {
         }));
     }, [step, form, customSteps, elements, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    return (_jsx(MapperComponent, __assign({}, props, { form: subForm, elements: elements, onChange: onChange, handleAddElement: handleAddElement })));
+    return (_jsx(MapperComponent, __assign({}, props, { form: subForm, onChange: onChange, handleAddElement: handleAddElement })));
 }
 export default MapperStep;