@arquimedes.co/eureka-forms 2.0.24 → 2.0.25

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

@@ -12,7 +12,7 @@ export interface Form {
     hasCaptcha?: boolean;
     isStandAlone?: boolean;
     style?: FormStyle;
-    Branding?: Branding;
+    branding?: Branding;
     classifiers?: Record<string, Classifier>;
     terms?: Term[];
     hiddenSteps?: string[];

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

@@ -27,7 +27,6 @@ export interface FileUpload extends GSteps.GBaseStep {
     label: string;
     description: string | null;
     required: boolean;
-    value: string[];
 }
 export interface Separator extends GSteps.GSeparator {
     type: Types.SEPARATOR;

package/dist/App/App.d.ts

@@ -39,6 +39,8 @@ export interface AppProps {
     fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
     /** Function to call after the confimation dialog has been closed */
     handleConfirmed?: () => void;
+    /** Function called to scroll to the top */
+    scrollToTop?: () => void;
 }
 export declare const IdFormContext: React.Context<string>;
 declare function AppComponent({ formData, valuesData, ...props }: AppProps): JSX.Element;

package/dist/App/App.js

@@ -74,6 +74,6 @@ function App(_a) {
                 sendLabel: props.sendLabel,
                 fetchDownloadUrl: props.fetchDownloadUrl,
                 customStepProps: (_g = props.customStepProps) !== null && _g !== void 0 ? _g : {},
-            } }, { children: _jsx("div", __assign({ className: styles.container }, { children: _jsx(FormComponent, { form: form, reload: reload, branding: branding, apiKey: props.apiKey, isWidget: !!isWidget, customSteps: customSteps, containerRef: containerRef, customSubmit: props.customSubmit, customSubmitBtns: props.customSubmitBtns }) })) })));
+            } }, { children: _jsx("div", __assign({ className: styles.container }, { children: _jsx(FormComponent, { form: form, reload: reload, branding: branding, apiKey: props.apiKey, isWidget: !!isWidget, customSteps: customSteps, containerRef: containerRef, customSubmit: props.customSubmit, scrollToTop: props.scrollToTop, customSubmitBtns: props.customSubmitBtns }) })) })));
     }
 }

package/dist/App/AppFunctions.js

@@ -173,10 +173,9 @@ export var mapOriginalValue = function (step, value, values, form) {
         }
         case StepTypes.CLASSIFIER_SELECTOR: {
             var stepClassifier = (_d = form === null || form === void 0 ? void 0 : form.classifiers) === null || _d === void 0 ? void 0 : _d[(_e = step.idClassifier) !== null && _e !== void 0 ? _e : ''];
-            if (stepClassifier) {
+            if (stepClassifier && !value.value) {
                 var classifier = (_f = form.classifiers) === null || _f === void 0 ? void 0 : _f[value];
-                if (!(value === null || value === void 0 ? void 0 : value.value))
-                    return { value: value, label: classifier === null || classifier === void 0 ? void 0 : classifier.name };
+                return { value: value, label: classifier === null || classifier === void 0 ? void 0 : classifier.name };
             }
             break;
         }

package/dist/Form/Form.d.ts

@@ -29,10 +29,12 @@ export interface BaseFormProps extends CustomAppProps {
     apiKey: string | undefined;
     customSubmit: AppProps['customSubmit'];
     containerRef: React.RefObject<HTMLDivElement>;
+    scrollToTop?: () => void;
 }
 export interface FormComponentProps extends CustomAppProps {
     /** Function called when users clicks submit */
     onSubmit: (values: FieldValues) => Promise<any>;
+    scrollToTop?: () => void;
 }
-declare function FormComponent({ form, apiKey, reload, isWidget, branding, customSteps, containerRef, customSubmit, customSubmitBtns, }: BaseFormProps): JSX.Element;
+declare function FormComponent({ form, apiKey, reload, isWidget, branding, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, }: BaseFormProps): JSX.Element;
 export default FormComponent;

package/dist/Form/Form.js

@@ -62,7 +62,7 @@ import axiosInstance from '../Utils/AxiosAPI';
 import ReCAPTCHA from 'react-google-recaptcha';
 import ConfirmationDialog from './ConfirmationDialog/ConfirmationDialog';
 import MaterialProviders from '../Utils/MaterialProviders';
-import { useWidthStats } from './Hooks';
+import { useWidthStats } from './FormHooks';
 import { IdFormContext } from '../App/App';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import FormContext from '../Contexts/FormContext';
@@ -84,7 +84,7 @@ export var getLocale = function () {
 function FormComponent(_a) {
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns;
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, scrollToTop = _a.scrollToTop, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns;
     var _l = useAppSelector(function (state) { return state.global; }), idOrganization = _l.idOrganization, internal = _l.internal, postview = _l.postview;
     var formMethods = useForm({
         mode: 'onTouched',
@@ -168,7 +168,7 @@ function FormComponent(_a) {
         return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: function () {
                         reload();
                         setShowConfirmation(undefined);
-                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, customSubmitBtns: customSubmitBtns }) })) }))] }));
+                    } })), form.hasCaptcha && !internal && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) })) }))] }));
     };
     if (!idOrganization)
         return _jsx(_Fragment, {});

package/dist/Form/FormFunctions.d.ts

@@ -4,6 +4,9 @@ import { CustomStep } from '../FormSteps/CustomStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 import { MapperElement } from '../@Types/MapperElement';
 import { ValuesStore } from '../States/SiteSlice';
+/**
+ * Function that cals the value of a step to output on submit
+ */
 export declare const calcValue: (idStep: string, steps: Record<string, FormStep>, values: Record<string, any>, customSteps: Record<string, CustomStep> | undefined, deleteIds: string[], value?: any) => any;
 export declare function calcDependencies(steps: Record<string, FormStep | CBRFormStep>, customSteps?: Record<string, CustomStep>, allSteps?: Record<string, FormStep | CBRFormStep>, dependencies?: DependencyStore, values?: ValuesStore, addDependents?: boolean): DependencyStore;
 export declare const calcMapperSubSteps: (step: Mapper, elements: MapperElement<any>[] | undefined, customSteps: Record<string, CustomStep>) => Record<string, FormStep>;

package/dist/Form/FormFunctions.js

@@ -18,9 +18,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { convertToRaw } from 'draft-js';
+import { convertFromRaw, convertToRaw } from 'draft-js';
 import StepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
 import { calcRecursiveData } from '../App/AppFunctions';
+/**
+ * Function that cals the value of a step to output on submit
+ */
 export var calcValue = function (idStep, steps, values, customSteps, deleteIds, value) {
     var _a, _b;
     if (value === void 0) { value = values[idStep]; }
@@ -32,7 +35,7 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
         return (_b = (_a = custom.calcValue) === null || _a === void 0 ? void 0 : _a.call(custom, step, value)) !== null && _b !== void 0 ? _b : value;
     }
     else {
-        switch (step === null || step === void 0 ? void 0 : step.type) {
+        switch (step.type) {
             case StepTypes.TEXTAREA: {
                 if (step.hasTextEditor) {
                     var currentContent = value.getCurrentContent();
@@ -58,9 +61,6 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
             case StepTypes.CLASSIFIER_SELECTOR: {
                 return value.value;
             }
-            case StepTypes.COLLAPSIBLE: {
-                return !!value;
-            }
             case StepTypes.MAPPER: {
                 var elements = value === null || value === void 0 ? void 0 : value.filter(function (element) { return element.deleted !== true; });
                 var mappedValues = [];
@@ -88,6 +88,7 @@ export var calcValue = function (idStep, steps, values, customSteps, deleteIds,
                 return mappedValues;
             }
             case StepTypes.TITLE:
+            case StepTypes.COLLAPSIBLE:
                 deleteIds.push(idStep);
                 return;
             default:
@@ -128,7 +129,6 @@ export function calcDependencies(steps, customSteps, allSteps, dependencies, val
     if (addDependents === void 0) { addDependents = true; }
     for (var _i = 0, _c = Object.values(steps); _i < _c.length; _i++) {
         var step = _c[_i];
-        var originalValue = (_a = values.sections[step.idSection]) === null || _a === void 0 ? void 0 : _a[step.id];
         if (step.dependencies) {
             for (var _d = 0, _e = step.dependencies; _d < _e.length; _d++) {
                 var idDep = _e[_d];
@@ -144,7 +144,7 @@ export function calcDependencies(steps, customSteps, allSteps, dependencies, val
                 var dep = _g[_f];
                 if (dep.type !== EntityValueDataTypes.STEP)
                     continue;
-                if ((_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.includes(dep.idStep))
+                if ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.includes(dep.idStep))
                     continue;
                 if (dependencies[dep.idStep] === undefined &&
                     (addDependents || allSteps[dep.idStep])) {
@@ -155,7 +155,7 @@ export function calcDependencies(steps, customSteps, allSteps, dependencies, val
             }
         }
         if (step.type === StepTypes.MAPPER) {
-            var subSteps = calcMapperSubSteps(step, originalValue, customSteps);
+            var subSteps = calcMapperSubSteps(step, (_b = values.sections[step.idSection]) === null || _b === void 0 ? void 0 : _b[step.id], customSteps);
             var hasSubSteps = Object.keys(subSteps).length > 0;
             calcDependencies(hasSubSteps ? subSteps : step.steps, customSteps, __assign(__assign({}, allSteps), subSteps), dependencies, values, hasSubSteps);
         }
@@ -182,22 +182,21 @@ export var calcMapperSubSteps = function (step, elements, customSteps) {
     return newSteps;
 };
 function calcStepDependency(idStep, steps, values, customSteps) {
-    var _a, _b;
+    var _a;
     var depStep = steps[idStep];
     if (!depStep) {
         console.error('Missing Step Dependency:', idStep);
+        var originalValue_1 = values.global[idStep];
         return {
-            type: 'MISSING',
-            value: null,
+            type: originalValue_1 ? 'ORIGINAL' : 'MISSING',
+            value: originalValue_1 !== null && originalValue_1 !== void 0 ? originalValue_1 : null,
             dependents: [],
         };
     }
     var originalValue = (_a = values.sections[depStep.idSection]) === null || _a === void 0 ? void 0 : _a[depStep.id];
     return {
-        type: (_b = depStep === null || depStep === void 0 ? void 0 : depStep.type) !== null && _b !== void 0 ? _b : 'ORIGINAL',
-        value: depStep
-            ? calcStepDependencyValue(depStep, originalValue, customSteps)
-            : originalValue !== null && originalValue !== void 0 ? originalValue : null,
+        type: depStep.type,
+        value: calcStepDependencyValue(depStep, originalValue, customSteps),
         dependents: [],
     };
 }
@@ -210,13 +209,16 @@ function calcStepDependencyValue(depStep, originalValue, customSteps) {
     switch (depStep.type) {
         case StepTypes.TEXTAREA: {
             if (depStep.hasTextEditor) {
-                return null;
+                return originalValue
+                    ? convertFromRaw(originalValue).getPlainText()
+                    : null;
             }
             else {
-                return originalValue === null || originalValue === void 0 ? void 0 : originalValue.value;
+                return originalValue !== null && originalValue !== void 0 ? originalValue : null;
             }
         }
         case StepTypes.MAPPER: {
+            //TODO: Esto aun no se usa
             return ((_a = originalValue === null || originalValue === void 0 ? void 0 : originalValue.map(function (mapperValue) { var _a; return (_a = mapperValue.value) !== null && _a !== void 0 ? _a : mapperValue; })) !== null && _a !== void 0 ? _a : null);
         }
         default:

package/dist/Form/FormTypes/StepperForm/StepperForm.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FormComponentProps } from '../../Form';
-declare function StepperForm({ onSubmit }: FormComponentProps): JSX.Element;
+declare function StepperForm({ onSubmit, scrollToTop, }: FormComponentProps): JSX.Element;
 export default StepperForm;

package/dist/Form/FormTypes/StepperForm/StepperForm.js

@@ -59,7 +59,7 @@ import { getAppState } from '../../../Utils/store';
 import { IdFormContext } from '../../../App/App';
 function StepperForm(_a) {
     var _this = this;
-    var onSubmit = _a.onSubmit;
+    var onSubmit = _a.onSubmit, scrollToTop = _a.scrollToTop;
     var _b = useState(undefined), loading = _b[0], setLoading = _b[1];
     var _c = useAppSelector(function (state) { return state.global; }), postview = _c.postview, editable = _c.editable, formStyle = _c.formStyle;
     var _d = useFormContext(), trigger = _d.trigger, getValues = _d.getValues, handleSubmit = _d.handleSubmit;
@@ -75,6 +75,7 @@ function StepperForm(_a) {
     });
     var handlePrevious = useCallback(function () {
         dispatch(SiteReducer.handlePrevious(getValues()));
+        scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
     }, []);
     var handleNext = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
         var valid, state, values, response;
@@ -92,6 +93,7 @@ function StepperForm(_a) {
                     }
                     if (next.length > 0) {
                         dispatch(SiteReducer.handleNext(getValues()));
+                        scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
                         return [2 /*return*/, setLoading(undefined)];
                     }
                     return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];

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

@@ -2,12 +2,16 @@
 import { MapperStepProps } from '../MapperStep';
 import { FieldError } from 'react-hook-form';
 import { MapperElement } from '../../../@Types/MapperElement';
-declare function MapperStep<Type>({ step, editable, customAdd, ...others }: MapperStepProps<Type>): JSX.Element;
-export declare function CustomMapperStep<Type>({ step, error, editable, customAdd, loading, elements, inputRef, onChange, ...others }: MapperStepProps<Type> & {
-    loading: boolean;
+import { Form } from '../../../@Types';
+export interface MapperComponentProps<Type> extends MapperStepProps<Type> {
+    form: Form;
+    loading?: boolean;
     error: FieldError | undefined;
     onChange: (elements: MapperElement<Type>[]) => void;
+    handleAddElement: (elementValue?: Type) => void;
     elements: MapperElement<Type>[];
     inputRef: any;
-}): JSX.Element;
+}
+declare function MapperStep<Type>(props: MapperStepProps<Type>): JSX.Element;
+export declare function CustomMapperStep<Type>(props: Omit<MapperComponentProps<Type>, 'form' | 'handleAddElement'>): JSX.Element;
 export default MapperStep;

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

@@ -44,14 +44,52 @@ import CustomContext from '../../../Contexts/CustomContext';
 import { useFormStep } from '../../StepHooks';
 import { addMapperStep } from '../../../App/AppFunctions';
 import { calcMapperSubSteps } from '../../../Form/FormFunctions';
-function MapperStep(_a) {
-    var step = _a.step, editable = _a.editable, customAdd = _a.customAdd, others = __rest(_a, ["step", "editable", "customAdd"]);
-    var form = useContext(FormContext);
+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 handleDeleteElement = useCallback(function (index) { return function () {
+        var tempElements = __spreadArray([], elements, true);
+        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
+        onChange(tempElements);
+    }; }, [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;
+    var container = useMemo(function () {
+        var _a;
+        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+            case MapperStyleTypes.LIST:
+                return { container: styles.listContainer };
+            case MapperStyleTypes.PILL:
+            default:
+                return { container: styles.pillContainer };
+        }
+    }, [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.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: {
+                    margin: step.description
+                        ? '10px 0px'
+                        : '0px 0px 5px 0px',
+                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    elements.filter(function (elem) { return !elem.deleted; }).length < step.max) && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!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();
+                            }
+                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
+                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) {
+    var step = props.step, editable = props.editable, customAdd = props.customAdd;
+    var form = useContext(FormContext);
+    var postview = useAppSelector(function (state) { return state.global; }).postview;
     var customSteps = useContext(CustomContext).customSteps;
     var dispatch = useAppDispatch();
     var setValue = useFormContext().setValue;
-    var _c = useFormStep(step, {
+    var _a = useFormStep(step, {
         defaultValue: [],
         rules: {
             validate: function (array) {
@@ -60,9 +98,9 @@ function MapperStep(_a) {
                         array.filter(function (elem) { return !elem.deleted; }).length > 0);
             },
         },
-    }), ref = _c.ref, value = _c.value, onChange = _c.onChange, error = _c.error;
-    var _d = useState(calcMapperSubSteps(step, value, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
-    //Por alguna razón si se saca del componente no se ejecuta.
+    }), 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];
+    //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 (!customAdd)
@@ -86,50 +124,16 @@ function MapperStep(_a) {
             allSteps: __assign(__assign({}, form.steps), steps),
         }));
     }, [step, form, customSteps, value, onChange]);
-    var handleDeleteElement = useCallback(function (index) { return function () {
-        var tempElements = __spreadArray([], value, true);
-        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        onChange(tempElements);
-    }; }, [value, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    var inputValue = useMemo(function () { return JSON.stringify(value); }, [value]);
-    var container = useMemo(function () {
-        var _a;
-        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
-            case MapperStyleTypes.LIST:
-                return { container: styles.listContainer };
-            case MapperStyleTypes.PILL:
-            default:
-                return { container: styles.pillContainer };
-        }
-    }, [step]).container;
-    var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: value.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, 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: {
-                    margin: step.description
-                        ? '10px 0px'
-                        : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: ref, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
-                (!step.max ||
-                    value.filter(function (elem) { return !elem.deleted; })
-                        .length < step.max) && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!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();
-                            }
-                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(ref, !editable || postview, handleAddElement)] }))), !!error && value.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+    return (_jsx(MapperComponent, __assign({}, props, { error: error, inputRef: ref, onChange: onChange, handleAddElement: handleAddElement, form: subForm, elements: value })));
 }
-export function CustomMapperStep(_a) {
-    var step = _a.step, error = _a.error, editable = _a.editable, customAdd = _a.customAdd, _b = _a.loading, loading = _b === void 0 ? false : _b, elements = _a.elements, inputRef = _a.inputRef, onChange = _a.onChange, others = __rest(_a, ["step", "error", "editable", "customAdd", "loading", "elements", "inputRef", "onChange"]);
+export function CustomMapperStep(props) {
+    var step = props.step, elements = props.elements, onChange = props.onChange;
     var form = useContext(FormContext);
-    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, postview = _c.postview;
     var customSteps = useContext(CustomContext).customSteps;
     var dispatch = useAppDispatch();
     var setValue = useFormContext().setValue;
-    var _d = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _d[0], setLocalSteps = _d[1];
+    var _a = useState(calcMapperSubSteps(step, elements, customSteps)), localSteps = _a[0], setLocalSteps = _a[1];
     var handleAddElement = useCallback(function (elementValue) {
         var _a = addMapperStep(step, customSteps), element = _a.element, steps = _a.steps, mappers = _a.mappers;
         if (elementValue)
@@ -147,40 +151,7 @@ export function CustomMapperStep(_a) {
             allSteps: __assign(__assign({}, form.steps), steps),
         }));
     }, [step, form, customSteps, elements, onChange]);
-    var handleDeleteElement = useCallback(function (index) { return function () {
-        var tempElements = __spreadArray([], elements, true);
-        tempElements[index] = __assign(__assign({}, tempElements[index]), { deleted: true });
-        onChange(tempElements);
-    }; }, [elements, onChange]);
     var subForm = useMemo(function () { return (__assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) })); }, [localSteps]);
-    var inputValue = useMemo(function () { return JSON.stringify(elements); }, [elements]);
-    var container = useMemo(function () {
-        var _a;
-        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
-            case MapperStyleTypes.LIST:
-                return { container: styles.listContainer };
-            case MapperStyleTypes.PILL:
-            default:
-                return { container: styles.pillContainer };
-        }
-    }, [step]).container;
-    var mapElements = function () {
-        return (_jsx(FormContext.Provider, __assign({ value: subForm }, { children: elements.map(function (element, index) { return (_createElement(MapperElementComponent, __assign({}, others, { key: element.id, num: index, loading: loading, element: element, step: step, editable: editable, 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: {
-                    margin: step.description
-                        ? '10px 0px'
-                        : '0px 0px 5px 0px',
-                } }, { children: step.description }))), mapElements(), _jsx("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
-                (!step.max ||
-                    elements.filter(function (elem) { return !elem.deleted; }).length < step.max) && (_jsxs("div", __assign({ className: styles.btnContainer }, { children: [!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();
-                            }
-                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
-                elements.filter(function (elem) { return !elem.deleted; }).length === 0 && (_jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+    return (_jsx(MapperComponent, __assign({}, props, { form: subForm, elements: elements, onChange: onChange, handleAddElement: handleAddElement })));
 }
 export default MapperStep;

package/dist/FormSteps/StepFunctions.d.ts

@@ -1,9 +1,9 @@
 import { FormSize } from '../@Types/Form';
 import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../@Types/FormStep';
+import { AYFFormStep } from '../@Types/AYFFormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
 export declare function calcFillerSize(step: FillerSteps, 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;
 export declare const calcDefaultValue: (step: FormStep | CBRFormStep) => any;
 export declare const iterateNestedSteps: (idStep: string, steps: Record<string, FormStep>, iteration: (step: FormStep) => void) => void;
@@ -13,4 +13,4 @@ export declare const iterateNestedSteps: (idStep: string, steps: Record<string,
  * @param idModifier optional modifier for the ids of the substeps and all other properties
  * @returns list of the ids of the direct substeps of the step, if modifier returns modified steps
  */
-export declare const calcSubSteps: (step: FormStep, idModifier?: ((idSubStep: string) => string) | undefined) => string[];
+export declare const calcSubSteps: (step: FormStep | CBRFormStep | AYFFormStep, idModifier?: ((idSubStep: string) => string) | undefined) => string[];

package/dist/FormSteps/StepFunctions.js

@@ -14,7 +14,7 @@ export function calcFillerSize(step, steps, values, size) {
         return 0;
     }
 }
-export function recursivelyCheckOpenSize(idStep, steps, values) {
+function recursivelyCheckOpenSize(idStep, steps, values) {
     var step = steps[idStep];
     var value = values[idStep];
     switch (step.type) {

package/dist/Shared/Navbar/Navbar.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import Navbar from './Navbar';
+declare const meta: {
+    component: typeof Navbar;
+    tags: string[];
+    args: {
+        logo: string;
+        color: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/Shared/Navbar/Navbar.stories.js

@@ -0,0 +1,13 @@
+import Navbar from './Navbar';
+var meta = {
+    component: Navbar,
+    tags: ['autodocs'],
+    args: {
+        logo: 'https://content.capta.co/Capta/CaptaWhite.svg',
+        color: '#3d5a7f',
+    },
+};
+export default meta;
+export var Default = {
+    args: {},
+};

package/dist/Shared/Rating/Rating.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import Rating from './Rating';
+declare const meta: {
+    component: typeof Rating;
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ScaleRating: Story;
+export declare const ScaleRatingWidthValue: Story;
+export declare const LikeRating: Story;
+export declare const LikeRatingWithValue: Story;
+export declare const SatisfactionRating: Story;
+export declare const SatisfactionRatingWidthValue: Story;

package/dist/Shared/Rating/Rating.stories.js

@@ -0,0 +1,59 @@
+import Rating from './Rating';
+import { RatingTypes } from '../../constants/FormStepTypes';
+var meta = {
+    component: Rating,
+    tags: ['autodocs'],
+    args: {},
+};
+export default meta;
+export var ScaleRating = {
+    args: {
+        type: RatingTypes.SCALE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+export var ScaleRatingWidthValue = {
+    args: {
+        type: RatingTypes.SCALE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 4,
+    },
+};
+export var LikeRating = {
+    args: {
+        type: RatingTypes.LIKE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+export var LikeRatingWithValue = {
+    args: {
+        type: RatingTypes.LIKE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 1,
+    },
+};
+export var SatisfactionRating = {
+    args: {
+        type: RatingTypes.SATISFACTION,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+export var SatisfactionRatingWidthValue = {
+    args: {
+        type: RatingTypes.SATISFACTION,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 3,
+    },
+};

package/dist/Shared/RoundedButton/RoundedButton.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+import RoundedButton from './RoundedButton';
+declare const meta: {
+    component: typeof RoundedButton;
+    tags: string[];
+    args: {
+        text: string;
+        backgroundColor: string;
+        color: string;
+        disabled: false;
+        fontSize: string;
+        padding: string;
+        borderRadius: number;
+        height: number;
+        bold: false;
+        width: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const DifferentColors: Story;

package/dist/Shared/RoundedButton/RoundedButton.stories.js

@@ -0,0 +1,36 @@
+import RoundedButton from './RoundedButton';
+var meta = {
+    component: RoundedButton,
+    tags: ['autodocs'],
+    args: {
+        text: 'Label',
+        backgroundColor: '#3d5a7f',
+        color: '#ffffff',
+        disabled: false,
+        fontSize: '1rem',
+        padding: '0 13px 0 13px',
+        borderRadius: 10,
+        height: 28,
+        bold: false,
+        width: 'fit-content',
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        text: 'Label',
+    },
+};
+export var Disabled = {
+    args: {
+        text: 'Label',
+        disabled: true,
+    },
+};
+export var DifferentColors = {
+    args: {
+        text: 'Label',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+};