@arquimedes.co/eureka-forms 2.0.34-test → 2.0.35-test

package/dist/Form/Form.js

@@ -0,0 +1,216 @@
+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, useEffect, useRef, useState, } from 'react';
+import Navbar from '../Shared/Navbar/Navbar';
+import styles from './Form.module.css';
+import InternalFormStyle from '../constants/InternalFormStyle';
+import enLocale from 'date-fns/locale/en-US';
+import esLocale from 'date-fns/locale/es';
+import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
+import StepperForm from './FormTypes/StepperForm/StepperForm';
+import { FormStyleTypes, FormTypes, } from '../constants/FormStepTypes';
+import { calcValue } from './FormFunctions';
+import { FormProvider, useForm } from 'react-hook-form';
+import widgetInstance from '../Utils/AxiosWidget';
+import axiosInstance from '../Utils/AxiosAPI';
+import ReCAPTCHA from 'react-google-recaptcha';
+import ConfirmationDialog from './ConfirmationDialog/ConfirmationDialog';
+import MaterialProviders from '../Utils/MaterialProviders';
+import { useWidthStats } from './FormHooks';
+import { IdFormContext } from '../App/App';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import FormContext from '../Contexts/FormContext';
+import { getAppState } from '../Utils/store';
+import { focusStep } from '../States/SiteSlice';
+var localeMap = {
+    en: enLocale,
+    'en-US': enLocale,
+    es: esLocale,
+};
+export var getLocale = function () {
+    var _a;
+    return ((_a = localeMap[navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.userLanguage ||
+            navigator.language ||
+            navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
+};
+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, 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',
+        shouldFocusError: true,
+    });
+    var idForm = useContext(IdFormContext);
+    var recaptchaRef = useRef();
+    var dispatch = useAppDispatch();
+    var _m = useState(), showConfirmation = _m[0], setShowConfirmation = _m[1];
+    var idFocusStep = useAppSelector(function (state) { return state.site.focusStep; });
+    useEffect(function () {
+        if (idFocusStep) {
+            formMethods.setFocus(idFocusStep);
+            dispatch(focusStep(undefined));
+        }
+    }, [idFocusStep]);
+    var onSubmit = useCallback(function (values) { return __awaiter(_this, void 0, void 0, function () {
+        var token, state, newValues, deleteIds, _i, _a, idStep, _b, deleteIds_1, id, params, url, axios, resp, error_1;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    token = null;
+                    if (!(form.hasCaptcha && !internal && !customSubmit)) return [3 /*break*/, 2];
+                    token = recaptchaRef.current.getValue();
+                    if (!!token) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (recaptchaRef === null || recaptchaRef === void 0 ? void 0 : recaptchaRef.current.executeAsync())];
+                case 1:
+                    token = _c.sent();
+                    _c.label = 2;
+                case 2:
+                    if (!apiKey && !internal && !customSubmit)
+                        return [2 /*return*/];
+                    _c.label = 3;
+                case 3:
+                    _c.trys.push([3, 8, , 9]);
+                    return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];
+                case 4:
+                    state = _c.sent();
+                    newValues = __assign({}, state.site.values.global);
+                    deleteIds = [];
+                    for (_i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
+                        idStep = _a[_i];
+                        newValues[idStep] = calcValue(idStep, form.steps, values, customSteps, deleteIds);
+                    }
+                    for (_b = 0, deleteIds_1 = deleteIds; _b < deleteIds_1.length; _b++) {
+                        id = deleteIds_1[_b];
+                        delete newValues[id];
+                    }
+                    if (!customSubmit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, customSubmit(newValues, reload)];
+                case 5: return [2 /*return*/, _c.sent()];
+                case 6:
+                    if (customSubmitBtns)
+                        return [2 /*return*/, newValues];
+                    params = new URLSearchParams();
+                    if (idOrganization || internal)
+                        params.set('idOrganization', idOrganization !== null && idOrganization !== void 0 ? idOrganization : '');
+                    if (token)
+                        params.set('token', token);
+                    url = "/ticket/".concat(internal ? form.apiKey : apiKey);
+                    if (params.toString()) {
+                        url += "?".concat(params.toString());
+                    }
+                    axios = idOrganization || internal ? widgetInstance : axiosInstance;
+                    return [4 /*yield*/, axios.post(url, newValues)];
+                case 7:
+                    resp = _c.sent();
+                    setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    return [3 /*break*/, 9];
+                case 8:
+                    error_1 = _c.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 9];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [customSteps, internal, customSubmit, idOrganization, idForm]);
+    useWidthStats(containerRef, form, postview, internal);
+    var isResponsive = useAppSelector(function (state) { return state.widthStats.isResponsive; });
+    var renderForm = function () {
+        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, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) })) }))] }));
+    };
+    if (!idOrganization)
+        return _jsx(_Fragment, {});
+    //If currently displaying internal or form is standalone
+    if (postview || internal || !form.isStandAlone) {
+        return (_jsx("div", __assign({ style: {
+                backgroundColor: internal
+                    ? 'transparent'
+                    : (_c = (_b = form.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : InternalFormStyle.backgroundColor,
+                minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
+            } }, { children: _jsx("div", __assign({ className: styles.widgetFormContainer, ref: containerRef }, { children: renderForm() })) })));
+    }
+    else {
+        //Standalone cant have widget
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_e = (_d = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _d === void 0 ? void 0 : _d.navbarColor) !== null && _e !== void 0 ? _e : (_f = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _f === void 0 ? void 0 : _f.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+                        background: (_h = (_g = form.style) === null || _g === void 0 ? void 0 : _g.standAloneBackgroundColor) !== null && _h !== void 0 ? _h : '#ffffff',
+                    } }, { children: _jsx("div", __assign({ className: isResponsive
+                            ? styles.fullScreenStandAloneForm
+                            : styles.standAloneFormCard, style: {
+                            backgroundColor: (_k = (_j = form.style) === null || _j === void 0 ? void 0 : _j.backgroundColor) !== null && _k !== void 0 ? _k : InternalFormStyle.backgroundColor,
+                        } }, { children: renderForm() })) }))] }));
+    }
+}
+export default FormComponent;
+function FormTypeComponent(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var form = useContext(FormContext);
+    var renderTypes = function () {
+        switch (form.type) {
+            case FormTypes.STEPPER: {
+                return _jsx(StepperForm, __assign({}, props));
+            }
+            case FormTypes.COLUMN:
+            default: {
+                return _jsx(ColumnForm, __assign({}, props));
+            }
+        }
+    };
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+            return _jsx(MaterialProviders, { children: renderTypes() });
+        default:
+            return renderTypes();
+    }
+}

package/dist/Form/FormFunctions.js

@@ -0,0 +1,229 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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]; }
+    var step = steps[idStep];
+    if (!step)
+        return value;
+    var custom = customSteps === null || customSteps === void 0 ? void 0 : customSteps[step === null || step === void 0 ? void 0 : step.type];
+    if (custom !== undefined) {
+        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.type) {
+            case StepTypes.TEXTAREA: {
+                if (step.hasTextEditor) {
+                    var currentContent = value.getCurrentContent();
+                    return {
+                        value: currentContent.getPlainText(),
+                        draft: convertToRaw(currentContent),
+                    };
+                }
+                else {
+                    return {
+                        value: value,
+                        draft: stringToDraft(value),
+                    };
+                }
+            }
+            case StepTypes.FILEUPLOAD: {
+                return value.map(function (val) { return ({
+                    fileName: val.fileName,
+                    S3Key: val.S3Key,
+                }); });
+            }
+            case StepTypes.SELECTOR:
+            case StepTypes.CLASSIFIER_SELECTOR: {
+                return value.value;
+            }
+            case StepTypes.MAPPER: {
+                var elements = value === null || value === void 0 ? void 0 : value.filter(function (element) { return element.deleted !== true; });
+                var mappedValues = [];
+                for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
+                    var element = elements_1[_i];
+                    var newValue = {
+                        id: element.id,
+                    };
+                    for (var _c = 0, _d = Object.keys(element.originalValues); _c < _d.length; _c++) {
+                        var key = _d[_c];
+                        newValue[key] = element.originalValues[key];
+                    }
+                    if (element.value)
+                        newValue.value = element.value;
+                    for (var _e = 0, _f = Object.keys(step.steps); _e < _f.length; _e++) {
+                        var idStep_1 = _f[_e];
+                        var mappedId = element.ids[idStep_1];
+                        if (values[mappedId] !== undefined) {
+                            newValue[idStep_1] = calcValue(idStep_1, step.steps, values, customSteps, deleteIds, values[mappedId]);
+                            deleteIds.push(mappedId);
+                        }
+                    }
+                    mappedValues.push(newValue);
+                }
+                return mappedValues;
+            }
+            case StepTypes.TITLE: {
+                return value !== null && value !== void 0 ? value : undefined;
+            }
+            case StepTypes.COLLAPSIBLE:
+                deleteIds.push(idStep);
+                return;
+            default:
+                if ((step === null || step === void 0 ? void 0 : step.type) === 'CBR_INCIDENCIAS') {
+                    return value === null || value === void 0 ? void 0 : value.filter(function (incidencia) { return incidencia.deleted !== true; });
+                }
+                return value;
+        }
+    }
+};
+function stringToDraft(text) {
+    var draftStructure = {
+        blocks: [],
+        entityMap: {},
+    };
+    text.split('\n').forEach(function (element, index) {
+        draftStructure.blocks.push({
+            key: String(index),
+            text: element,
+            type: 'unstyled',
+            depth: 0,
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+        });
+    });
+    return draftStructure;
+}
+export function calcDependencies(steps, customSteps, allSteps, dependencies, values, addDependents) {
+    var _a, _b;
+    if (customSteps === void 0) { customSteps = {}; }
+    if (allSteps === void 0) { allSteps = steps; }
+    if (dependencies === void 0) { dependencies = {}; }
+    if (values === void 0) { values = {
+        global: {},
+        sections: {},
+    }; }
+    if (addDependents === void 0) { addDependents = true; }
+    for (var _i = 0, _c = Object.values(steps); _i < _c.length; _i++) {
+        var step = _c[_i];
+        if (step.dependencies) {
+            for (var _d = 0, _e = step.dependencies; _d < _e.length; _d++) {
+                var idDep = _e[_d];
+                if (dependencies[idDep] === undefined &&
+                    (addDependents || allSteps[idDep]))
+                    dependencies[idDep] = calcStepDependency(idDep, allSteps, values, customSteps);
+                if (addDependents)
+                    dependencies[idDep].dependents.push(step);
+            }
+        }
+        if (step.type === StepTypes.ENTITYVALUEPICKER) {
+            for (var _f = 0, _g = __spreadArray(__spreadArray([], step.path, true), step.filters, true); _f < _g.length; _f++) {
+                var dep = _g[_f];
+                if (dep.type !== EntityValueDataTypes.STEP)
+                    continue;
+                if ((_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.includes(dep.idStep))
+                    continue;
+                if (dependencies[dep.idStep] === undefined &&
+                    (addDependents || allSteps[dep.idStep])) {
+                    dependencies[dep.idStep] = calcStepDependency(dep.idStep, allSteps, values, customSteps);
+                }
+                if (addDependents)
+                    dependencies[dep.idStep].dependents.push(step);
+            }
+        }
+        if (step.type === StepTypes.MAPPER) {
+            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);
+        }
+    }
+    return dependencies;
+}
+export var calcMapperSubSteps = function (step, elements, customSteps) {
+    var _a;
+    if (elements === void 0) { elements = []; }
+    var newSteps = {};
+    for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {
+        var element = elements_2[_i];
+        var elemSteps = {};
+        for (var _b = 0, _c = Object.keys(step.steps); _b < _c.length; _b++) {
+            var idSubStep = _c[_b];
+            var baseStep = JSON.parse(JSON.stringify((_a = step.steps[idSubStep]) !== null && _a !== void 0 ? _a : '{}'));
+            var newIdStep = element.ids[idSubStep];
+            baseStep.id = newIdStep;
+            elemSteps[newIdStep] = baseStep;
+            newSteps[newIdStep] = baseStep;
+        }
+        calcRecursiveData(element, elemSteps, customSteps);
+    }
+    return newSteps;
+};
+function calcStepDependency(idStep, steps, values, customSteps) {
+    var _a;
+    var depStep = steps[idStep];
+    if (!depStep) {
+        console.error('Missing Step Dependency:', idStep);
+        var originalValue_1 = values.global[idStep];
+        return {
+            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: depStep.type,
+        value: calcStepDependencyValue(depStep, originalValue, customSteps),
+        dependents: [],
+    };
+}
+function calcStepDependencyValue(depStep, originalValue, customSteps) {
+    var _a;
+    var custom = customSteps[depStep === null || depStep === void 0 ? void 0 : depStep.type];
+    if (custom === null || custom === void 0 ? void 0 : custom.calcDependencyValue) {
+        return custom.calcDependencyValue(depStep, originalValue);
+    }
+    switch (depStep.type) {
+        case StepTypes.TEXTAREA: {
+            if (depStep.hasTextEditor) {
+                return originalValue
+                    ? convertFromRaw(originalValue).getPlainText()
+                    : null;
+            }
+            else {
+                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:
+            return originalValue !== null && originalValue !== void 0 ? originalValue : null;
+    }
+}

package/dist/{mjs/Form → Form}/FormHooks.js

@@ -2,14 +2,16 @@ import { createSelector } from 'reselect';
 import { useCallback, useLayoutEffect } from 'react';
 import { updateWidthStats } from '../States/WidthStatsSlice';
 import { useAppDispatch } from '../hooks';
-export const selectCurrentValues = createSelector([
-    (state) => state.site.idCurrentSection,
-    (state) => state.site.values.sections,
-], (idCurrent, values) => values[idCurrent ?? ''] ?? {});
+export var selectCurrentValues = createSelector([
+    function (state) { return state.site.idCurrentSection; },
+    function (state) {
+        return state.site.values.sections;
+    },
+], function (idCurrent, values) { var _a; return (_a = values[idCurrent !== null && idCurrent !== void 0 ? idCurrent : '']) !== null && _a !== void 0 ? _a : {}; });
 export function useWidthStats(containerRef, form, postview, internal) {
-    const calcWidthStats = useCallback((currentWidth) => {
-        let currentBreakPoint = form.size.blockNum;
-        const padding = postview || internal || !form.isStandAlone ? 0 : 40;
+    var calcWidthStats = useCallback(function (currentWidth) {
+        var currentBreakPoint = form.size.blockNum;
+        var padding = postview || internal || !form.isStandAlone ? 0 : 40;
         while (currentWidth <
             (form.size.blockSize + form.size.spacingSize) *
                 currentBreakPoint +
@@ -23,23 +25,24 @@ export function useWidthStats(containerRef, form, postview, internal) {
                     padding,
             isMobile: currentWidth <
                 (form.size.blockSize + form.size.spacingSize) * 2 + padding,
-            currentBreakPoint,
+            currentBreakPoint: currentBreakPoint,
         };
     }, [form, postview, internal]);
-    const dispatch = useAppDispatch();
+    var dispatch = useAppDispatch();
     /** Calcs the currentBreakPoint and if is mobile */
-    useLayoutEffect(() => {
-        const handleResize = () => {
-            const currentWidth = containerRef?.current?.offsetWidth;
+    useLayoutEffect(function () {
+        var handleResize = function () {
+            var _a;
+            var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
             if (currentWidth !== undefined) {
-                const current = calcWidthStats(currentWidth);
+                var current = calcWidthStats(currentWidth);
                 dispatch(updateWidthStats(current));
             }
         };
         /** On load add a resize listener to calc the currentBreakpoint */
         window.addEventListener('resize', handleResize);
         handleResize();
-        return () => {
+        return function () {
             window.removeEventListener('resize', handleResize);
         };
     }, []);

package/dist/Form/FormTypes/ColumnForm/ColumnForm.js

@@ -0,0 +1,95 @@
+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 } from "react/jsx-runtime";
+import { useCallback, useContext, useState } from 'react';
+import styles from './ColumnForm.module.css';
+import React from 'react';
+import Terms from '../../Terms/Terms';
+import { useFormContext } from 'react-hook-form';
+import { useAppSelector } from '../../../hooks';
+import Section from '../../Section/Section';
+import CustomContext from '../../../Contexts/CustomContext';
+import CustomBtn from '../../../Shared/CustomBtn/CustomBtn';
+function ColumnForm(_a) {
+    var _this = this;
+    var onSubmit = _a.onSubmit, customSubmitBtns = _a.customSubmitBtns;
+    var _b = useState(false), 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;
+    var sendLabel = useContext(CustomContext).sendLabel;
+    var previous = useAppSelector(function (state) { return state.site.previousSections; });
+    var next = useAppSelector(function (state) { return state.site.nextSections; });
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    var handleErrors = handleSubmit(function () { }, function (errors) {
+        console.error('Errors:', errors);
+    });
+    var submit = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var valid, values;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    return [4 /*yield*/, trigger(undefined, { shouldFocus: true })];
+                case 1:
+                    valid = _a.sent();
+                    /** Imprimir errores si no es valido */
+                    if (!valid) {
+                        handleErrors();
+                        return [2 /*return*/, setLoading(false)];
+                    }
+                    return [4 /*yield*/, onSubmit(getValues())];
+                case 2:
+                    values = _a.sent();
+                    setLoading(false);
+                    return [2 /*return*/, values];
+            }
+        });
+    }); }, []);
+    return (_jsxs("div", __assign({ className: styles.container, style: { color: formStyle.textColor } }, { children: [loading && _jsx("div", { className: styles.curtain }), previous.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), next.map(function (idSection) { return (_jsx(Section, { idSection: idSection }, idSection)); }), _jsx(Terms, {}), !postview && editable && (_jsxs(React.Fragment, { children: [!customSubmitBtns && (_jsx("div", __assign({ className: styles.submitBtnContainer }, { children: _jsx(CustomBtn, { onClick: submit, width: "calc(100% - 70px)", label: sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar', backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, loading: loading, "data-testid": "form__submit" }) }))), customSubmitBtns === null || customSubmitBtns === void 0 ? void 0 : customSubmitBtns(submit, loading)] }))] })));
+}
+export default ColumnForm;