@arquimedes.co/eureka-forms 3.0.31 → 3.0.32

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

@@ -1,30 +1,52 @@
+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);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import styles from './ListMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
-import DeleteIcon from '../../../../../Icons/DeleteIcon';
-function ListMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, }) {
-    const { size } = useContext(FormContext);
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const { calcName } = customElementModifiers ?? {};
-    const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
-    return (_jsxs("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, children: [_jsx("div", { className: styles.bulletContainer, style: {
+function ListMapperElement(_a) {
+    var _b, _c;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, handleDelete = _a.handleDelete, customElementModifiers = _a.customElementModifiers;
+    var size = useContext(FormContext).size;
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
+    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)
+            : '';
+    return (_jsxs("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: [_jsx("div", __assign({ className: styles.bulletContainer, style: {
                     height: name ? 28 : 40,
-                }, children: _jsx("div", { className: styles.bullet, style: {
+                } }, { children: _jsx("div", { className: styles.bullet, style: {
                         backgroundColor: formStyle.outlineColor,
                         borderColor: formStyle.descriptionTextColor,
-                    } }) }), _jsxs("div", { className: styles.contentContainer, style: {
-                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
-                }, children: [name && (_jsxs("div", { className: styles.title, style: { color: formStyle.textColor }, children: [(name || loading) && (_jsx("label", { className: styles.titleLbl, children: loading ? 'Cargando...' : name + ':' })), step.deletable !== false && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
+                    } }) })), _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
+                } }, { children: [name && (_jsxs("div", __assign({ className: styles.title, style: { color: formStyle.textColor } }, { children: [(name || loading) && (_jsx("label", __assign({ className: styles.titleLbl }, { children: loading ? 'Cargando...' : name + ':' }))), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
+                                    ? styles.disabledDeleteBtn
+                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
                                     if (editable && !postview) {
-                                        handleDelete?.();
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
                                     }
-                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] })), children] }), !name && step.deletable !== false && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: () => {
+                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] }))), children] })), !name && step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
+                    ? styles.disabledDeleteBtn
+                    : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: function () {
                     if (editable && !postview) {
-                        handleDelete?.();
+                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
                     }
-                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }));
+                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })));
 }
 export default ListMapperElement;

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

@@ -1,5 +1,16 @@
+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);
+};
 import { createElement as _createElement } from "react";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../../Step';
 import { MapperStyleTypes } from '../../../../constants/FormStepTypes';
 import ListMapperElement from './ListMapperElement/ListMapperElement';
@@ -9,35 +20,35 @@ import FormContext from '../../../../Contexts/FormContext';
 import CustomContext from '../../../../Contexts/CustomContext';
 import PagedMapperElement from './PagedMapperElement/PagedMapperElement';
 function MapperElementComponent(props) {
-    const { step, element, editable } = props;
-    const customContext = useContext(CustomContext);
-    const form = useContext(FormContext);
-    const nestedCustomContext = useMemo(() => {
+    var _a;
+    var step = props.step, element = props.element, editable = props.editable;
+    var customContext = useContext(CustomContext);
+    var form = useContext(FormContext);
+    if (element.deleted) {
+        return _jsx("div", {});
+    }
+    var nestedCustomContext = useMemo(function () {
         if (!props.calcCustomStepProps)
             return customContext;
-        return {
-            ...customContext,
-            customStepProps: props.calcCustomStepProps(element, customContext.customStepProps),
-        };
+        return __assign(__assign({}, customContext), { customStepProps: props.calcCustomStepProps(element, customContext.customStepProps) });
     }, [element, customContext]);
-    if (element.deleted)
-        return _jsx(_Fragment, {});
-    const mapSubSteps = () => {
-        return (_jsx(CustomContext.Provider, { value: nestedCustomContext, children: step.rootSteps.map((idSubStep) => {
-                const subStep = form.steps[element.ids[idSubStep]];
-                return (_createElement(StepComponent, { ...props, editable: editable ? (step.editable ?? true) : false, step: subStep, key: element.ids[idSubStep] }));
-            }) }));
+    var mapSubSteps = function () {
+        return (_jsx(CustomContext.Provider, __assign({ value: nestedCustomContext }, { children: step.rootSteps.map(function (idSubStep) {
+                var _a;
+                var subStep = form.steps[element.ids[idSubStep]];
+                return (_createElement(StepComponent, __assign({}, props, { editable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: element.ids[idSubStep] })));
+            }) })));
     };
-    switch (step.style?.type) {
+    switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
         case MapperStyleTypes.INLINE:
             return _jsx(React.Fragment, { children: mapSubSteps() });
         case MapperStyleTypes.LIST:
-            return (_jsx(ListMapperElement, { ...props, step: step, children: mapSubSteps() }));
+            return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
         case MapperStyleTypes.PAGED:
-            return (_jsx(PagedMapperElement, { ...props, step: step, children: mapSubSteps() }));
+            return (_jsx(PagedMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
         case MapperStyleTypes.PILL:
         default:
-            return (_jsx(PillMapperElement, { ...props, step: step, children: mapSubSteps() }));
+            return (_jsx(PillMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
     }
 }
 export default MapperElementComponent;

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

@@ -1,3 +1,4 @@
+/// <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;

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

@@ -1,116 +1,206 @@
+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';
-import DeleteIcon from '../../../../../Icons/DeleteIcon';
-import { MobileStepper, styled } from '@mui/material';
-import ArrowRightIcon from '../../../../../Icons/ArrowRightIcon';
-import ArrowLeftIcon from '../../../../../Icons/ArrowLeftIcon';
-function PagedMapperElement({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }) {
-    const deletable = step.deletable ?? true;
-    const { size } = useContext(FormContext);
-    const { elements, page } = value;
-    const dispatch = useAppDispatch();
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const totalElements = elements.filter((elem) => !elem.deleted);
-    const position = totalElements.findIndex((e) => e.id == element.id);
-    const containerRef = React.useRef(null);
-    const pagingRef = React.useRef(null);
-    const { getValues, trigger, handleSubmit } = useFormContext();
-    const nextIndex = useMemo(() => {
-        for (let i = page + 1; i < elements.length; i++) {
-            const element = elements[i];
-            if (!element.deleted) {
+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 containerRef = React.useRef(null);
+    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]);
-    const prevIndex = useMemo(() => {
-        for (let i = page - 1; i >= 0; i--) {
-            const element = elements[i];
-            if (!element.deleted) {
+    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 */
-    const handleErrors = handleSubmit(() => { }, (errors) => {
+    var handleErrors = handleSubmit(function () { }, function (errors) {
         console.error('Errors:', errors);
     });
-    const handleChangePage = useCallback(async (index) => {
-        const valid = await trigger(undefined, { shouldFocus: true });
-        /** Imprimir errores si no es valido */
-        if (!valid) {
-            void handleErrors();
-            return;
-        }
-        const values = getValues();
-        const nestedValues = {};
-        for (const [key, value] of Object.entries(values)) {
-            if (key.startsWith(step.id + '-' + element.id)) {
-                nestedValues[key] = value;
+    var handleChangePage = useCallback(function (index) { return __awaiter(_this, void 0, void 0, function () {
+        var valid, values, nestedValues, _i, _a, _b, key, value_1;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0: return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
+                case 1:
+                    valid = _d.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,
+                    }));
+                    (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.scrollIntoView({ behavior: 'smooth' });
+                    //Updated the nestedValues in the values store.
+                    onChange({
+                        elements: elements,
+                        page: index,
+                    });
+                    return [2 /*return*/];
             }
-        }
-        dispatch(updateNestedValues({
-            key: step.id + '-' + element.id,
-            values: nestedValues,
-        }));
-        containerRef.current?.scrollIntoView({ behavior: 'smooth' });
-        //Updated the nestedValues in the values store.
-        onChange({
-            elements,
-            page: index,
         });
-        return;
-    }, [elements]);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const { calcName } = customElementModifiers ?? {};
-    const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
-    const renderElement = (renderElementButtons) => {
-        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
-                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
-                }, children: [name && (_jsx("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
+    }); }, [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, ref: containerRef }, { 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?.();
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
                                     }
-                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }), children, totalElements.length > 0 && (_jsx("div", { className: styles.pagingContainer, ref: pagingRef, children: _jsx(CustomStepper, { totalElements: totalElements.length, position: position, handleNext: nextIndex !== null ? () => void handleChangePage(nextIndex) : undefined, handlePrev: prevIndex !== null ? () => void handleChangePage(prevIndex) : undefined, width: pagingRef.current?.clientWidth }) }))] }) }));
+                                } }, { 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", { className: styles.containerContainer, children: customElementRender ? customElementRender(element, num, renderElement) : renderElement() }));
+    return (_jsx("div", __assign({ className: styles.containerContainer }, { children: customElementRender
+            ? customElementRender(element, num, renderElement)
+            : renderElement() })));
 }
 export default PagedMapperElement;
-const StyledStepper = styled(MobileStepper)(({ formStyle }) => ({
-    backgroundColor: 'transparent',
-    padding: '10px',
-    '& .Erk-MuiMobileStepper-dot': {
-        width: 11,
-        height: 11,
-        backgroundColor: formStyle.outlineColor,
-    },
-    '& .Erk-MuiMobileStepper-dotActive': {
-        backgroundColor: formStyle.primaryColor,
-    },
-    '& .Erk-MuiLinearProgress-root': {
-        height: 8,
-        backgroundColor: formStyle.outlineColor,
-        borderRadius: 4,
-        margin: '0px 8px',
-    },
-    '& .Erk-MuiLinearProgress-barColorPrimary': {
-        backgroundColor: formStyle.primaryColor,
-    },
-}));
-function CustomStepper({ position, handleNext, totalElements, width, handlePrev }) {
-    const formStyle = useAppSelector((state) => state.global.formStyle);
-    const fits = useMemo(() => {
-        return (width ?? 0) > 16 + totalElements * 15 + 128;
-    }, [totalElements, width]);
+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(StyledStepper, { formStyle: formStyle, steps: totalElements, position: "static", variant: fits ? 'dots' : 'progress', activeStep: position, nextButton: _jsx(CustomBtn, { onClick: handleNext, disabled: !handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px", children: _jsx(ArrowRightIcon, { style: { width: 30, height: 30 } }) }), backButton: _jsx(CustomBtn, { onClick: handlePrev, disabled: !handlePrev, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, padding: "0px", height: "30px", width: "54px", borderRadius: "10px", children: _jsx(ArrowLeftIcon, { style: { width: 30, height: 30 } }) }) }));
+    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/PillMapperElement/PillMapperElement.d.ts

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

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

@@ -1,33 +1,60 @@
+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);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from 'react';
 import styles from './PillMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
-import DeleteIcon from '../../../../../Icons/DeleteIcon';
-function PillMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }) {
-    const deletable = step.deletable ?? true;
-    const { size } = useContext(FormContext);
-    const { formStyle, postview } = useAppSelector((state) => state.global);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const { calcName } = customElementModifiers ?? {};
-    const name = useMemo(() => {
-        return calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
+function PillMapperElement(_a) {
+    var _b, _c, _d;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, 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 _e = useAppSelector(function (state) { return state.global; }), formStyle = _e.formStyle, postview = _e.postview;
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
+    var name = useMemo(function () {
+        return calcName
+            ? calcName(element)
+            : step.unitLabel
+                ? step.unitLabel + ' ' + (num + 1)
+                : '';
     }, [calcName, element, num, step.unitLabel]);
-    const isDeleted = customElementModifiers?.isDeleted?.(element) ?? false;
-    const renderElement = (renderElementButtons) => {
-        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, style: {
+    var isDeleted = (_d = (_c = customElementModifiers === null || customElementModifiers === void 0 ? void 0 : customElementModifiers.isDeleted) === null || _c === void 0 ? void 0 : _c.call(customElementModifiers, element)) !== null && _d !== void 0 ? _d : false;
+    var renderElement = function (renderElementButtons) {
+        var _a, _b;
+        return (_jsx("div", __assign({ className: widthStats.isMobile
+                ? styles.mobileContainer
+                : styles.container, style: {
                 opacity: isDeleted ? 0.5 : 1,
-            }, children: _jsxs("div", { className: styles.contentContainer, style: {
-                    width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
-                }, children: [name && (_jsx("div", { className: styles.titleLbl, style: {
+            } }, { 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,
-                            textDecoration: isDeleted ? 'line-through' : 'none',
-                        }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
+                            textDecoration: isDeleted
+                                ? 'line-through'
+                                : 'none',
+                        } }, { 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?.();
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
                                     }
-                                }, children: _jsx(DeleteIcon, { style: { fontSize: 'inherit' } }) }))] }), children] }) }));
+                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })), children] })) })));
     };
-    return (_jsx("div", { className: styles.containerContainer, children: customElementRender ? customElementRender(element, num, renderElement) : renderElement() }));
+    return (_jsx("div", __assign({ className: styles.containerContainer }, { children: customElementRender
+            ? customElementRender(element, num, renderElement)
+            : renderElement() })));
 }
 export default PillMapperElement;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MapperStepProps } from '../MapperStep';
 import { FieldError } from 'react-hook-form';
 import { MapperElement } from '../../../@Types/MapperElement';