@arquimedes.co/eureka-forms 1.9.88-test → 1.9.90-test

package/dist/@Types/FormStep.d.ts

@@ -5,10 +5,13 @@ export interface Title extends GSteps.GBaseStep {
     type: Types.TITLE;
     title: string;
     description: string | null;
+    size?: 1 | 2 | 3 | 4;
 }
 export interface CheckBox extends GSteps.GCheckBox {
     type: Types.CHECKBOX;
-    steps: string[];
+    steps?: string[];
+    uncheckedSteps?: string[];
+    maxSize: number;
 }
 export interface Rating extends GSteps.GBaseStep {
     type: Types.RATING;

package/dist/App.js

@@ -91,9 +91,7 @@ function App(_a) {
         else {
             setForm(form);
         }
-        if (valuesData !== undefined) {
-            setOriginalValues(mapOriginalValues(valuesData, form));
-        }
+        setOriginalValues(mapOriginalValues(valuesData !== null && valuesData !== void 0 ? valuesData : {}, form));
     };
     function fetchPreview(formData, valuesData) {
         return __awaiter(this, void 0, void 0, function () {
@@ -363,22 +361,14 @@ var migrateForm = function (form, classifiers) {
     return newForm;
 };
 function getStaticWidth(step) {
-    if (step.type === StepTypes.SELECTOR ||
-        step.type === StepTypes.TEXTINPUT ||
-        step.type === StepTypes.CLASSIFIER_SELECTOR) {
-        switch (step.size) {
-            case SIZES.LARGE:
-                return 4;
-            case SIZES.MEDIUM:
-                return 2;
-            case SIZES.SMALL:
-                return 1;
-            default:
-                return 1;
-        }
-    }
-    else {
-        return 4;
+    switch (step.size) {
+        case SIZES.SMALL:
+            return 1;
+        case SIZES.MEDIUM:
+            return 2;
+        case SIZES.LARGE:
+        default:
+            return 4;
     }
 }
 var mapOriginalValues = function (originalValues, form) {
@@ -425,8 +415,33 @@ var mapOriginalValues = function (originalValues, form) {
             newValues[idValue] = originalValues[idValue];
         }
     }
+    addInitialMappers(newValues, form.steps);
+    console.log(newValues);
     return newValues;
 };
+var addInitialMappers = function (newValues, steps) {
+    for (var _i = 0, _a = Object.values(steps); _i < _a.length; _i++) {
+        var step = _a[_i];
+        if (step.type !== StepTypes.MAPPER)
+            continue;
+        var idElement = nanoid();
+        var newElement = {
+            ids: {},
+            id: idElement,
+        };
+        var newSteps = {};
+        for (var _b = 0, _c = Object.keys(step.steps); _b < _c.length; _b++) {
+            var idStep = _c[_b];
+            var baseStep = JSON.parse(JSON.stringify(step.steps[idStep]));
+            var newIdStep = step.id + '-' + idStep + '-' + idElement;
+            baseStep.id = newIdStep;
+            newElement.ids[idStep] = newIdStep;
+            newSteps[newIdStep] = baseStep;
+        }
+        addInitialMappers(newValues, step.steps);
+        newValues[step.id] = [newElement];
+    }
+};
 export var mapOriginalValue = function (step, value, form) {
     var _a, _b, _c, _d;
     switch (step === null || step === void 0 ? void 0 : step.type) {

package/dist/FormComponents/Form/ColumnForm/ColumnForm.js

@@ -237,6 +237,10 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
     }
     else {
         switch (step === null || step === void 0 ? void 0 : step.type) {
+            case Types.TITLE: {
+                deleteIds.push(idStep);
+                return null;
+            }
             case Types.TEXTAREA: {
                 if (step.hasTextEditor) {
                     var currentContent = value.getCurrentContent();

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -23,33 +23,63 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
-import { calcStepWidth } from '../../StepFunctions';
+import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 import RoundedCheckBox from '../../../../shared/RoundedCheckBox/RoundedCheckBox';
 import { Controller } from 'react-hook-form';
-import React from 'react';
+import React, { useState } from 'react';
 import StepComponent from '../../Step';
 function CheckBox(_a) {
-    var step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["step", "form", "value", "onBlur", "errors", "onChange", "inputRef", "editable", "postview", "formStyle", "widthStats"]);
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
-                    width: widthStats.currentBreakPoint <= step.size
-                        ? '100%'
-                        : calcStepWidth(step.size, form.size),
-                    minHeight: step.description ||
-                        (!postview && editable && step.required)
-                        ? '55px'
-                        : '43px',
-                } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [step.label && (_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }))), _jsx(RoundedCheckBox, { onChange: onChange, onBlur: onBlur, "data-testid": step.id, inputRef: inputRef, padding: "0px", size: "1.6rem", error: !!errors[step.id], cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })] })), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
-                            color: !!errors[step.id]
-                                ? formStyle.errorColor
-                                : formStyle.descriptionTextColor,
-                        } }, { children: !!errors[step.id]
-                            ? 'Este campo es obligatorio'
-                            : step.description })))] })), value &&
-                step.steps &&
-                step.steps.map(function (idSubStep) {
-                    var subStep = form.steps[idSubStep];
-                    return (_createElement(StepComponent, __assign({}, others, { editable: editable, postview: postview, errors: errors, formStyle: formStyle, form: form, widthStats: widthStats, step: subStep, key: idSubStep, handleSizeChange: function () { } })));
-                })] }));
+    var step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, level = _a.level, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, getValues = _a.getValues, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["step", "form", "value", "onBlur", "errors", "level", "onChange", "inputRef", "editable", "postview", "getValues", "formStyle", "widthStats"]);
+    var handleSizeChange = others.handleSizeChange;
+    var _b = useState(level === 0
+        ? calcFillerSize(step, form.steps, getValues(), form.size)
+        : 0), fillerSize = _b[0], setFillerSize = _b[1];
+    var sizeChange = function () {
+        handleSizeChange === null || handleSizeChange === void 0 ? void 0 : handleSizeChange();
+        if (level === 0) {
+            setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
+        }
+    };
+    var renderCheckbox = function () {
+        return (_jsxs("div", __assign({ className: styles.container, style: {
+                width: widthStats.currentBreakPoint <= step.size
+                    ? '100%'
+                    : calcStepWidth(step.size, form.size),
+                minHeight: step.description ||
+                    (!postview && editable && step.required)
+                    ? '55px'
+                    : '43px',
+            } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [step.label && (_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }))), _jsx(RoundedCheckBox, { onChange: onChange, onBlur: onBlur, "data-testid": step.id, inputRef: inputRef, padding: "0px", size: "1.6rem", error: !!errors[step.id], cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })] })), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
+                        color: !!errors[step.id]
+                            ? formStyle.errorColor
+                            : formStyle.descriptionTextColor,
+                    } }, { children: !!errors[step.id]
+                        ? 'Este campo es obligatorio'
+                        : step.description })))] }), step.id));
+    };
+    var renderNested = function () {
+        var steps = value ? step.steps : step.uncheckedSteps;
+        if (!steps)
+            return;
+        return (_jsx(React.Fragment, { children: steps.map(function (idStep) {
+                var subStep = form.steps[idStep];
+                return (_createElement(StepComponent, __assign({}, others, { postview: postview, editable: editable, widthStats: widthStats, getValues: getValues, formStyle: formStyle, errors: errors, form: form, step: subStep, key: idStep, level: level + 1, handleSizeChange: function () {
+                        sizeChange();
+                    } })));
+            }) }));
+    };
+    if (level === 0 && step.maxSize < form.size.blockNum) {
+        return (_jsxs("div", __assign({ className: styles.firstLvlContainer, style: {
+                width: widthStats.currentBreakPoint <= step.size
+                    ? '100%'
+                    : 'fit-content',
+            } }, { children: [renderCheckbox(), renderNested(), level === 0 && step.maxSize < form.size.blockNum && (_jsx("div", { className: styles.smallSeparator, style: {
+                        width: fillerSize,
+                    } }, "SEPARATOR"))] })));
+    }
+    else {
+        return (_jsxs(React.Fragment, { children: [renderCheckbox(), renderNested(), level === 0 && _jsx("div", { className: styles.separator })] }));
+    }
 }
 function CheckBoxStep(props) {
     var _a;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.js

@@ -20,15 +20,26 @@ function ListMapperElement(_a) {
     var name = calcName
         ? calcName(element)
         : step.unitLabel + ' ' + (num + 1);
-    return (_jsx("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: _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 && (_jsx("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: loading ? '' : name + ':' }))), step.deletable !== false && (_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] })) })));
+    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: {
+                        backgroundColor: formStyle.outlineColor,
+                        borderColor: formStyle.descriptionTextColor,
+                    } }) })), _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: [_jsx("label", __assign({ className: styles.titleLbl }, { children: loading ? '' : name + ':' })), step.deletable !== false && (_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] })), !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 === null || handleDelete === void 0 ? void 0 : handleDelete();
+                    }
+                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })));
 }
 export default ListMapperElement;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/ListMapperElement/ListMapperElement.module.css

@@ -1,41 +1,53 @@
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    display: flex;
+    flex-direction: row;
     width: fit-content;
-    border-radius: 20px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    margin-left: auto;
     margin-right: auto;
-    padding-top: 20px;
-    padding-bottom: 20px;
     position: relative;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    max-width: 100%;
 }
-.container {
-    max-width: calc(100% - 112px);
-    padding-right: 55px;
-    padding-left: 55px;
+.bulletContainer {
+    display: flex;
+    margin-left: 30px;
+    margin-right: 10px;
+    align-items: center;
 }
-
-.mobileContainer {
-    max-width: calc(100% - 42px);
-    padding-right: 20px;
-    padding-left: 20px;
+.bullet {
+    border-width: 2px;
+    border-style: solid;
+    margin-bottom: 2px;
+    height: 20px;
+    width: 20px;
+    border-radius: 20px;
+    margin-left: 10px;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); */
 }
 
 .titleLbl {
     width: 100%;
-    font-size: 20px;
-    font-weight: 600;
+    height: 28px;
+    margin-right: 10px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: default;
-    margin-left: 10px;
     margin-bottom: 10px;
 }
 
+.title {
+    height: 28px;
+    margin-bottom: 5px;
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
 .contentContainer {
     margin-left: auto;
     margin-right: auto;
@@ -49,10 +61,10 @@
 
 .deleteBtn,
 .disabledDeleteBtn {
+    display: flex;
     font-size: 24px;
-    position: absolute;
-    right: 15px;
-    top: 15px;
+    margin-right: 8px;
+    margin-left: auto;
 }
 
 .deleteBtn {

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.js

@@ -13,9 +13,9 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../../Step';
 import { MapperStyleTypes } from '../../../../../constants/FormStepTypes';
-import styles from './MapperElement.module.css';
 import ListMapperElement from './ListMapperElement/ListMapperElement';
 import PillMapperElement from './PillMapperElement/PillMapperElement';
+import React from 'react';
 function MapperElementComponent(props) {
     var _a, _b, _c;
     var level = props.level, form = props.form, step = props.step, element = props.element, editable = props.editable;
@@ -32,7 +32,7 @@ function MapperElementComponent(props) {
     };
     switch ((_c = step.style) === null || _c === void 0 ? void 0 : _c.type) {
         case MapperStyleTypes.INLINE:
-            return (_jsx("div", __assign({ className: styles.contentContainer }, { children: mapSubSteps() })));
+            return _jsx(React.Fragment, { children: mapSubSteps() });
         case MapperStyleTypes.LIST:
             return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
         case MapperStyleTypes.PILL:

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -6,7 +6,7 @@ export interface MapperElement<Type> {
     deleted?: boolean;
     value?: Type;
 }
-export declare function ElementsComponent<Type = any>({ step, form, inputRef, editable, postview, elements, formStyle, customAdd, loading, dependencyStore, setDependencyStore, ...others }: MapperStepProps<Type> & {
+export declare function ElementsComponent<Type = any>({ step, form, errors, inputRef, editable, postview, elements, formStyle, customAdd, loading, dependencyStore, setDependencyStore, ...others }: MapperStepProps<Type> & {
     loading?: boolean;
     onChange: (elements: MapperElement<Type>[]) => void;
     elements: MapperElement<Type>[];

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -30,7 +30,7 @@ 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 { useState, useEffect, cloneElement } from 'react';
+import React, { useState, useEffect, cloneElement } from 'react';
 import styles from './MaterialMapperStep.module.css';
 import { Controller } from 'react-hook-form';
 import StepTypes, { ClassifierOptionTypes, EntityValueOptionTypes, MapperStyleTypes, OptionTypes, } from '../../../../constants/FormStepTypes';
@@ -42,7 +42,7 @@ import AYFFormStepTypes from '../../../../constants/AYFFormStepTypes';
 import CBRFormStepTypes from '../../../../constants/CBRFormStepTypes';
 export function ElementsComponent(_a) {
     var _b, _c;
-    var step = _a.step, form = _a.form, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, elements = _a.elements, formStyle = _a.formStyle, customAdd = _a.customAdd, _d = _a.loading, loading = _d === void 0 ? false : _d, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "inputRef", "editable", "postview", "elements", "formStyle", "customAdd", "loading", "dependencyStore", "setDependencyStore"]);
+    var step = _a.step, form = _a.form, errors = _a.errors, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, elements = _a.elements, formStyle = _a.formStyle, customAdd = _a.customAdd, _d = _a.loading, loading = _d === void 0 ? false : _d, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "errors", "inputRef", "editable", "postview", "elements", "formStyle", "customAdd", "loading", "dependencyStore", "setDependencyStore"]);
     var _e = useState(true), firstRender = _e[0], setFirstRender = _e[1];
     /** Mapper Steps to pass down */
     var _f = useState(), localSteps = _f[0], setLocalSteps = _f[1];
@@ -123,15 +123,20 @@ export function ElementsComponent(_a) {
     var container = calcStyles().container;
     if (!localSteps)
         return _jsx("div", {});
+    var mapElements = function () {
+        return elements.map(function (element, index) { return (_jsx(MapperElementComponent, __assign({ num: index, loading: loading, element: element, formStyle: formStyle, step: step, errors: errors, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
+                var tempElements = __spreadArray([], elements, true);
+                tempElements[index].deleted = true;
+                onChange(tempElements);
+            } }, others), element.id)); });
+    };
+    if (step.style.type === MapperStyleTypes.INLINE)
+        return _jsx(React.Fragment, { children: mapElements() });
     return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor } }, { children: [_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',
-                } }, { children: step.description }))), elements.map(function (element, index) { return (_jsx(MapperElementComponent, __assign({ num: index, loading: loading, element: element, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
-                    var tempElements = __spreadArray([], elements, true);
-                    tempElements[index].deleted = true;
-                    onChange(tempElements);
-                } }, others), element.id)); }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput }), step.creatable !== false && !customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                } }, { children: step.description }))), mapElements(), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput }), step.creatable !== false && !customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
                             if (editable && !postview) {
                                 handleAddElement();
                             }
@@ -141,13 +146,16 @@ export function ElementsComponent(_a) {
                             inputRef: inputRef,
                             disabled: !editable || postview,
                             handleAddElement: handleAddElement,
-                        })] }))] })));
+                        })] })), !!errors[step.id] &&
+                elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
 }
 function MapperStep(props) {
     return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: [], rules: {
-            required: props.step.required
-                ? 'Este campo es obligatorio'
-                : undefined,
+            validate: function (array) {
+                return (props.step.required &&
+                    array.filter(function (elem) { return !elem.deleted; }).length > 0) ||
+                    !props.step.required;
+            },
         }, shouldUnregister: true, render: function (_a) {
             var _b = _a.field, ref = _b.ref, value = _b.value, field = __rest(_b, ["ref", "value"]);
             return (_jsx(ElementsComponent, __assign({}, props, field, { elements: value, inputRef: ref })));
@@ -228,6 +236,13 @@ function calcRecursiveData(element, newSteps, deps, customSteps, originalValues)
                         step.steps[i] = newId;
                     }
                 }
+                if (step.uncheckedSteps) {
+                    for (var i = 0; i < step.uncheckedSteps.length; i++) {
+                        var idStep_6 = step.uncheckedSteps[i];
+                        var newId = element.ids[idStep_6];
+                        step.uncheckedSteps[i] = newId;
+                    }
+                }
                 break;
             }
             case StepTypes.ENTITYVALUEPICKER:
@@ -246,8 +261,8 @@ function calcRecursiveData(element, newSteps, deps, customSteps, originalValues)
                     var option = step.options[idOption];
                     if (option.type === EntityValueOptionTypes.NESTED) {
                         for (var i = 0; i < option.steps.length; i++) {
-                            var idStep_6 = option.steps[i];
-                            var newId = element.ids[idStep_6];
+                            var idStep_7 = option.steps[i];
+                            var newId = element.ids[idStep_7];
                             option.steps[i] = newId;
                         }
                     }

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.module.css

@@ -40,3 +40,9 @@
     margin-bottom: 3px;
     width: fit-content;
 }
+
+.errorMsg {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    margin-left: 15px;
+}

package/dist/FormComponents/Step/StepFunctions.d.ts

@@ -1,5 +1,5 @@
 import { FormSize } from '../../@Types/Form';
-import { ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../../@Types/FormStep';
-export declare function calcFillerSize(step: FormSelector | ClassifierSelector | EntityValuePicker, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
+import { CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../../@Types/FormStep';
+export declare function calcFillerSize(step: FormSelector | ClassifierSelector | EntityValuePicker | CheckBox, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
 export declare function recursivelyCheckOpenSize(idStep: string, steps: Record<string, FormStep>, values: Record<string, any>): number;
 export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;

package/dist/FormComponents/Step/StepFunctions.js

@@ -56,6 +56,19 @@ export function recursivelyCheckOpenSize(idStep, steps, values) {
         }
         return size;
     }
+    if (step.type === Types.CHECKBOX) {
+        var size = step.size;
+        var stepSteps = value ? step.steps : step.uncheckedSteps;
+        if (stepSteps) {
+            var optionSize = 0;
+            for (var _f = 0, stepSteps_1 = stepSteps; _f < stepSteps_1.length; _f++) {
+                var pStepId = stepSteps_1[_f];
+                optionSize += recursivelyCheckOpenSize(pStepId, steps, values);
+            }
+            size += optionSize;
+        }
+        return size;
+    }
     else {
         return 4;
     }

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TitleStepProps } from '../TitleStep';
-declare function TitleStep({ step, formStyle, widthStats, }: TitleStepProps): JSX.Element;
+declare function TitleStep(props: TitleStepProps): JSX.Element;
 export default TitleStep;

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -10,11 +10,35 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
-function TitleStep(_a) {
-    var step = _a.step, formStyle = _a.formStyle, widthStats = _a.widthStats;
-    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.titleLbl, style: { textAlign: widthStats.isMobile ? 'center' : 'start' } }, { children: step.title })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
-                    margin: step.title ? '10px 0px' : '0px 0px 5px 0px',
-                } }, { children: step.description })))] })));
+function Title(_a) {
+    var _b;
+    var step = _a.step, form = _a.form, _c = _a.value, title = _c.title, description = _c.description, formStyle = _a.formStyle, widthStats = _a.widthStats;
+    var size = (_b = step.size) !== null && _b !== void 0 ? _b : form.size.blockNum;
+    return (_jsxs("div", __assign({ className: styles.container, style: {
+            color: formStyle.textColor,
+            width: widthStats.currentBreakPoint <= size
+                ? '100%'
+                : calcStepWidth(size, form.size),
+        } }, { children: [title && (_jsx("div", __assign({ className: styles.titleLbl, style: {
+                    textAlign: widthStats.isMobile &&
+                        widthStats.currentBreakPoint <= size
+                        ? 'center'
+                        : 'start',
+                } }, { children: title }))), description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                    margin: title ? '10px 0px' : '0px 0px 5px 0px',
+                } }, { children: description })))] })));
+}
+function TitleStep(props) {
+    var _a;
+    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: (_a = props.originalValues[props.step.id]) !== null && _a !== void 0 ? _a : {
+            title: props.step.title,
+            description: props.step.description,
+        }, render: function (_a) {
+            var field = _a.field;
+            return _jsx(Title, __assign({}, props, field));
+        } }));
 }
 export default TitleStep;

package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css

@@ -1,8 +1,7 @@
 .container {
     display: flex;
     flex-direction: column;
-    width: 900px;
-    max-width: 100%;
+    max-width: calc(100% - 20px);
     padding: 5px 10px;
 }
 

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -48,6 +48,7 @@ var useDatePickerStyles = function (props) {
             borderRadius: props.borderRadius,
             cursor: props.cantEdit ? 'default' : 'pointer',
             height: props.height,
+            backgroundColor: props.backgroundColor,
             '& input, textarea': {
                 cursor: props.cantEdit ? 'default' : 'pointer',
                 padding: props.padding,
@@ -57,7 +58,6 @@ var useDatePickerStyles = function (props) {
                 '&::placeholder': {
                     fontSize: props.fontSize,
                 },
-                backgroundColor: props.backgroundColor,
                 borderRadius: props.borderRadius,
             },
             '& .EF-MuiOutlinedInput-notchedOutline': {

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -139,7 +139,8 @@ var useTextfieldStyles = function (props) {
     });
 };
 export default function RoundedSmartSelect(_a) {
-    var options = _a.options, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, _c = _a.getValueString, getValueString = _c === void 0 ? function (value) { return value.value; } : _c, _d = _a.color, color = _d === void 0 ? '#293241' : _d, _e = _a.errorColor, errorColor = _e === void 0 ? '#cc2936' : _e, _f = _a.focusColor, focusColor = _f === void 0 ? '#3d5a7f' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.outlineColor, outlineColor = _h === void 0 ? '#b8b8b8' : _h, _j = _a.backgroundColor, backgroundColor = _j === void 0 ? '#ffffff' : _j, _k = _a.cantEdit, cantEdit = _k === void 0 ? false : _k, _l = _a.loading, loading = _l === void 0 ? false : _l, _m = _a.height, height = _m === void 0 ? '31px' : _m, _o = _a.fontSize, fontSize = _o === void 0 ? '1rem' : _o, required = _a.required, changeListener = _a.changeListener, error = _a.error, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.borderRadius, borderRadius = _q === void 0 ? 10 : _q, _r = _a.fontWeight, fontWeight = _r === void 0 ? '400' : _r, icon = _a.icon, _s = _a.searchable, searchable = _s === void 0 ? false : _s, _t = _a.containerMargin, containerMargin = _t === void 0 ? '0px' : _t, _u = _a.showIcon, showIcon = _u === void 0 ? true : _u, inputRef = _a.inputRef, disabled = _a.disabled, _v = _a.creatable, creatable = _v === void 0 ? false : _v, onBlur = _a.onBlur, name = _a.name, onFocus = _a.onFocus;
+    var _b;
+    var options = _a.options, _c = _a.value, value = _c === void 0 ? '' : _c, handleUpdate = _a.handleUpdate, label = _a.label, _d = _a.getValueString, getValueString = _d === void 0 ? function (value) { return value.value; } : _d, _e = _a.color, color = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.focusColor, focusColor = _g === void 0 ? '#3d5a7f' : _g, _h = _a.helperTextColor, helperTextColor = _h === void 0 ? '#989898' : _h, _j = _a.outlineColor, outlineColor = _j === void 0 ? '#b8b8b8' : _j, _k = _a.backgroundColor, backgroundColor = _k === void 0 ? '#ffffff' : _k, _l = _a.cantEdit, cantEdit = _l === void 0 ? false : _l, _m = _a.loading, loading = _m === void 0 ? false : _m, _o = _a.height, height = _o === void 0 ? '31px' : _o, _p = _a.fontSize, fontSize = _p === void 0 ? '1rem' : _p, required = _a.required, changeListener = _a.changeListener, error = _a.error, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _q = _a.readOnly, readOnly = _q === void 0 ? false : _q, _r = _a.borderRadius, borderRadius = _r === void 0 ? 10 : _r, _s = _a.fontWeight, fontWeight = _s === void 0 ? '400' : _s, icon = _a.icon, _t = _a.searchable, searchable = _t === void 0 ? false : _t, _u = _a.containerMargin, containerMargin = _u === void 0 ? '0px' : _u, _v = _a.showIcon, showIcon = _v === void 0 ? true : _v, inputRef = _a.inputRef, disabled = _a.disabled, _w = _a.creatable, creatable = _w === void 0 ? false : _w, onBlur = _a.onBlur, name = _a.name, onFocus = _a.onFocus;
     var props = {
         color: color,
         height: height,
@@ -229,6 +230,6 @@ export default function RoundedSmartSelect(_a) {
                     ? function (props) {
                         return cloneElement(icon, props);
                     }
-                    : undefined, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }), 'EMPTY'), options === null || options === void 0 ? void 0 : options.map(function (option) { return (_jsx(MenuItem, __assign({ value: getValueString(option), style: { whiteSpace: 'normal' } }, { children: option.label }), getValueString(option))); })] })));
+                    : undefined, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: options ? 'Sin Seleccionar' : 'Cargando...' }) }), 'EMPTY'), options === null || options === void 0 ? void 0 : options.map(function (option) { return (_jsx(MenuItem, __assign({ value: getValueString(option), style: { whiteSpace: 'normal' } }, { children: option.label }), getValueString(option))); }), options === undefined && value !== undefined && (_jsx(MenuItem, __assign({ value: getValueString(value), style: { whiteSpace: 'normal' } }, { children: (_b = value.label) !== null && _b !== void 0 ? _b : '' }), getValueString(value)))] })));
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.9.88-test",
+    "version":"1.9.90-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.module.css

@@ -1,10 +0,0 @@
-.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;
-}