@arquimedes.co/eureka-forms 1.9.89-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

@@ -361,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) {

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/MapperElement.js

@@ -33,7 +33,6 @@ function MapperElementComponent(props) {
     switch ((_c = step.style) === null || _c === void 0 ? void 0 : _c.type) {
         case MapperStyleTypes.INLINE:
             return _jsx(React.Fragment, { children: mapSubSteps() });
-        case undefined:
         case MapperStyleTypes.LIST:
             return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
         case MapperStyleTypes.PILL:

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

@@ -236,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:
@@ -254,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/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/package.json

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