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

package/dist/cjs/Form/FormFunctions.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcMapperSubSteps = exports.calcDependencies = exports.calcValue = void 0;
+const draft_js_1 = require("draft-js");
+const FormStepTypes_1 = __importStar(require("../constants/FormStepTypes"));
+const AppFunctions_1 = require("../App/AppFunctions");
+/**
+ * Function that cals the value of a step to output on submit
+ */
+const calcValue = (idStep, steps, values, customSteps, deleteIds, value = values[idStep]) => {
+    var _a, _b;
+    const step = steps[idStep];
+    if (!step)
+        return value;
+    const 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 FormStepTypes_1.default.TEXTAREA: {
+                if (step.hasTextEditor) {
+                    const currentContent = value.getCurrentContent();
+                    return {
+                        value: currentContent.getPlainText(),
+                        draft: (0, draft_js_1.convertToRaw)(currentContent),
+                    };
+                }
+                else {
+                    return {
+                        value,
+                        draft: stringToDraft(value),
+                    };
+                }
+            }
+            case FormStepTypes_1.default.FILEUPLOAD: {
+                return value.map((val) => ({
+                    fileName: val.fileName,
+                    S3Key: val.S3Key,
+                }));
+            }
+            case FormStepTypes_1.default.SELECTOR:
+            case FormStepTypes_1.default.CLASSIFIER_SELECTOR: {
+                return value.value;
+            }
+            case FormStepTypes_1.default.MAPPER: {
+                const elements = value === null || value === void 0 ? void 0 : value.filter((element) => element.deleted !== true);
+                const mappedValues = [];
+                for (const element of elements) {
+                    const newValue = {
+                        id: element.id,
+                    };
+                    for (const key of Object.keys(element.originalValues)) {
+                        newValue[key] = element.originalValues[key];
+                    }
+                    if (element.value)
+                        newValue.value = element.value;
+                    for (const idStep of Object.keys(step.steps)) {
+                        const mappedId = element.ids[idStep];
+                        if (values[mappedId] !== undefined) {
+                            newValue[idStep] = (0, exports.calcValue)(idStep, step.steps, values, customSteps, deleteIds, values[mappedId]);
+                            deleteIds.push(mappedId);
+                        }
+                    }
+                    mappedValues.push(newValue);
+                }
+                return mappedValues;
+            }
+            case FormStepTypes_1.default.TITLE: {
+                return value !== null && value !== void 0 ? value : undefined;
+            }
+            case FormStepTypes_1.default.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((incidencia) => incidencia.deleted !== true);
+                }
+                return value;
+        }
+    }
+};
+exports.calcValue = calcValue;
+function stringToDraft(text) {
+    const draftStructure = {
+        blocks: [],
+        entityMap: {},
+    };
+    text.split('\n').forEach((element, index) => {
+        draftStructure.blocks.push({
+            key: String(index),
+            text: element,
+            type: 'unstyled',
+            depth: 0,
+            inlineStyleRanges: [],
+            entityRanges: [],
+            data: {},
+        });
+    });
+    return draftStructure;
+}
+function calcDependencies(steps, customSteps = {}, allSteps = steps, dependencies = {}, values = {
+    global: {},
+    sections: {},
+}, addDependents = true) {
+    var _a, _b;
+    for (const step of Object.values(steps)) {
+        if (step.dependencies) {
+            for (const idDep of step.dependencies) {
+                if (dependencies[idDep] === undefined &&
+                    (addDependents || allSteps[idDep]))
+                    dependencies[idDep] = calcStepDependency(idDep, allSteps, values, customSteps);
+                if (addDependents)
+                    dependencies[idDep].dependents.push(step);
+            }
+        }
+        if (step.type === FormStepTypes_1.default.ENTITYVALUEPICKER) {
+            for (const dep of [...step.path, ...step.filters]) {
+                if (dep.type !== FormStepTypes_1.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 === FormStepTypes_1.default.MAPPER) {
+            const subSteps = (0, exports.calcMapperSubSteps)(step, (_b = values.sections[step.idSection]) === null || _b === void 0 ? void 0 : _b[step.id], customSteps);
+            const hasSubSteps = Object.keys(subSteps).length > 0;
+            calcDependencies(hasSubSteps ? subSteps : step.steps, customSteps, Object.assign(Object.assign({}, allSteps), subSteps), dependencies, values, hasSubSteps);
+        }
+    }
+    return dependencies;
+}
+exports.calcDependencies = calcDependencies;
+const calcMapperSubSteps = (step, elements = [], customSteps) => {
+    var _a;
+    const newSteps = {};
+    for (const element of elements) {
+        const elemSteps = {};
+        for (const idSubStep of Object.keys(step.steps)) {
+            const baseStep = JSON.parse(JSON.stringify((_a = step.steps[idSubStep]) !== null && _a !== void 0 ? _a : '{}'));
+            const newIdStep = element.ids[idSubStep];
+            baseStep.id = newIdStep;
+            elemSteps[newIdStep] = baseStep;
+            newSteps[newIdStep] = baseStep;
+        }
+        (0, AppFunctions_1.calcRecursiveData)(element, elemSteps, customSteps);
+    }
+    return newSteps;
+};
+exports.calcMapperSubSteps = calcMapperSubSteps;
+function calcStepDependency(idStep, steps, values, customSteps) {
+    var _a;
+    const depStep = steps[idStep];
+    if (!depStep) {
+        console.error('Missing Step Dependency:', idStep);
+        const originalValue = values.global[idStep];
+        return {
+            type: originalValue ? 'ORIGINAL' : 'MISSING',
+            value: originalValue !== null && originalValue !== void 0 ? originalValue : null,
+            dependents: [],
+        };
+    }
+    const 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;
+    const 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 FormStepTypes_1.default.TEXTAREA: {
+            if (depStep.hasTextEditor) {
+                return originalValue
+                    ? (0, draft_js_1.convertFromRaw)(originalValue).getPlainText()
+                    : null;
+            }
+            else {
+                return originalValue !== null && originalValue !== void 0 ? originalValue : null;
+            }
+        }
+        case FormStepTypes_1.default.MAPPER: {
+            //TODO: Esto aun no se usa
+            return ((_a = originalValue === null || originalValue === void 0 ? void 0 : originalValue.map((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/cjs/Form/FormHooks.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidthStats = exports.selectCurrentValues = void 0;
+const reselect_1 = require("reselect");
+const react_1 = require("react");
+const WidthStatsSlice_1 = require("../States/WidthStatsSlice");
+const hooks_1 = require("../hooks");
+exports.selectCurrentValues = (0, reselect_1.createSelector)([
+    (state) => state.site.idCurrentSection,
+    (state) => state.site.values.sections,
+], (idCurrent, values) => { var _a; return (_a = values[idCurrent !== null && idCurrent !== void 0 ? idCurrent : '']) !== null && _a !== void 0 ? _a : {}; });
+function useWidthStats(containerRef, form, postview, internal) {
+    const calcWidthStats = (0, react_1.useCallback)((currentWidth) => {
+        let currentBreakPoint = form.size.blockNum;
+        const padding = postview || internal || !form.isStandAlone ? 0 : 40;
+        while (currentWidth <
+            (form.size.blockSize + form.size.spacingSize) *
+                currentBreakPoint +
+                padding) {
+            currentBreakPoint--;
+        }
+        return {
+            isResponsive: currentWidth <
+                (form.size.blockSize + form.size.spacingSize) *
+                    form.size.blockNum +
+                    padding,
+            isMobile: currentWidth <
+                (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+            currentBreakPoint,
+        };
+    }, [form, postview, internal]);
+    const dispatch = (0, hooks_1.useAppDispatch)();
+    /** Calcs the currentBreakPoint and if is mobile */
+    (0, react_1.useLayoutEffect)(() => {
+        const handleResize = () => {
+            var _a;
+            const 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);
+                dispatch((0, WidthStatsSlice_1.updateWidthStats)(current));
+            }
+        };
+        /** On load add a resize listener to calc the currentBreakpoint */
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+}
+exports.useWidthStats = useWidthStats;

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

@@ -0,0 +1,50 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ColumnForm_module_css_1 = __importDefault(require("./ColumnForm.module.css"));
+const react_2 = __importDefault(require("react"));
+const Terms_1 = __importDefault(require("../../Terms/Terms"));
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../../hooks");
+const Section_1 = __importDefault(require("../../Section/Section"));
+const CustomContext_1 = __importDefault(require("../../../Contexts/CustomContext"));
+const CustomBtn_1 = __importDefault(require("../../../Shared/CustomBtn/CustomBtn"));
+function ColumnForm({ onSubmit, customSubmitBtns, }) {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const { postview, editable, formStyle } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const { trigger, getValues, handleSubmit } = (0, react_hook_form_1.useFormContext)();
+    const { sendLabel } = (0, react_1.useContext)(CustomContext_1.default);
+    const previous = (0, hooks_1.useAppSelector)((state) => state.site.previousSections);
+    const next = (0, hooks_1.useAppSelector)((state) => state.site.nextSections);
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    const handleErrors = handleSubmit(() => { }, (errors) => {
+        console.error('Errors:', errors);
+    });
+    const submit = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        setLoading(true);
+        const valid = yield trigger(undefined, { shouldFocus: true });
+        /** Imprimir errores si no es valido */
+        if (!valid) {
+            handleErrors();
+            return setLoading(false);
+        }
+        const values = yield onSubmit(getValues());
+        setLoading(false);
+        return values;
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: ColumnForm_module_css_1.default.container, style: { color: formStyle.textColor } }, { children: [loading && (0, jsx_runtime_1.jsx)("div", { className: ColumnForm_module_css_1.default.curtain }), previous.map((idSection) => ((0, jsx_runtime_1.jsx)(Section_1.default, { idSection: idSection }, idSection))), next.map((idSection) => ((0, jsx_runtime_1.jsx)(Section_1.default, { idSection: idSection }, idSection))), (0, jsx_runtime_1.jsx)(Terms_1.default, {}), !postview && editable && ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [!customSubmitBtns && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: ColumnForm_module_css_1.default.submitBtnContainer }, { children: (0, jsx_runtime_1.jsx)(CustomBtn_1.default, { 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)] }))] })));
+}
+exports.default = ColumnForm;

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

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const StepperForm_module_css_1 = __importDefault(require("./StepperForm.module.css"));
+const Terms_1 = __importDefault(require("../../Terms/Terms"));
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../../hooks");
+const Section_1 = __importDefault(require("../../Section/Section"));
+const CustomContext_1 = __importDefault(require("../../../Contexts/CustomContext"));
+const SiteReducer = __importStar(require("../../../States/SiteSlice"));
+const store_1 = require("../../../Utils/store");
+const App_1 = require("../../../App/App");
+const CustomBtn_1 = __importDefault(require("../../../Shared/CustomBtn/CustomBtn"));
+function StepperForm({ onSubmit, scrollToTop, }) {
+    const [loading, setLoading] = (0, react_1.useState)(undefined);
+    const { postview, editable, formStyle } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const { trigger, getValues, handleSubmit } = (0, react_hook_form_1.useFormContext)();
+    const { sendLabel } = (0, react_1.useContext)(CustomContext_1.default);
+    const dispatch = (0, hooks_1.useAppDispatch)();
+    const previous = (0, hooks_1.useAppSelector)((state) => state.site.previousSections);
+    const idCurrent = (0, hooks_1.useAppSelector)((state) => state.site.idCurrentSection);
+    const idForm = (0, react_1.useContext)(App_1.IdFormContext);
+    const next = (0, hooks_1.useAppSelector)((state) => state.site.nextSections);
+    /** Esto se usa para no tener que escuchar todo el tiempo los errores del formulario */
+    const handleErrors = handleSubmit(() => { }, (errors) => {
+        console.error('Errors:', errors);
+    });
+    const handlePrevious = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        dispatch(SiteReducer.handlePrevious(getValues()));
+        scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
+    }), []);
+    const handleNext = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        setLoading('NEXT');
+        const valid = yield trigger(undefined, { shouldFocus: true });
+        /** Imprimir errores si no es valido */
+        if (!valid) {
+            handleErrors();
+            return setLoading(undefined);
+        }
+        if (next.length > 0) {
+            dispatch(SiteReducer.handleNext(getValues()));
+            scrollToTop === null || scrollToTop === void 0 ? void 0 : scrollToTop();
+            return setLoading(undefined);
+        }
+        const state = yield dispatch((0, store_1.getAppState)({ idForm })).unwrap();
+        /** put all the values of the previous sections into a single object */
+        let values = state.site.previousSections.reduce((v, idSection) => (Object.assign(Object.assign({}, v), state.site.values.sections[idSection])), {});
+        /** Add the current section's values */
+        values = Object.assign(Object.assign({}, values), getValues());
+        const response = yield onSubmit(values);
+        setLoading(undefined);
+        return response;
+    }), [next]);
+    if (!idCurrent)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: StepperForm_module_css_1.default.container, style: { color: formStyle.textColor } }, { children: [loading && (0, jsx_runtime_1.jsx)("div", { className: StepperForm_module_css_1.default.curtain }), (0, jsx_runtime_1.jsx)(Section_1.default, { idSection: idCurrent }, idCurrent), next.length === 0 && (0, jsx_runtime_1.jsx)(Terms_1.default, {}), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: StepperForm_module_css_1.default.btnsContainer }, { children: [previous.length > 0 && ((0, jsx_runtime_1.jsx)(CustomBtn_1.default, { label: "Volver", "data-testid": "form__back", onClick: handlePrevious, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'BACK' })), (next.length > 0 || (!postview && editable)) && ((0, jsx_runtime_1.jsx)(CustomBtn_1.default, { label: next.length > 0
+                            ? 'Siguiente'
+                            : sendLabel !== null && sendLabel !== void 0 ? sendLabel : 'Enviar', "data-testid": "form__submit", onClick: handleNext, backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, disabled: !!loading, loading: loading === 'NEXT' }))] }))] })));
+}
+exports.default = StepperForm;

package/dist/cjs/Form/Section/MaterialSection/MaterialSection.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Step_1 = __importDefault(require("../../../FormSteps/Step"));
+const MaterialSection_module_css_1 = __importDefault(require("./MaterialSection.module.css"));
+const hooks_1 = require("../../../hooks");
+const react_1 = require("react");
+const CustomContext_1 = __importDefault(require("../../../Contexts/CustomContext"));
+const FormContext_1 = __importDefault(require("../../../Contexts/FormContext"));
+function MaterialSection({ idSection }) {
+    var _a;
+    const currentBreakPoint = (0, hooks_1.useAppSelector)(hooks_1.selectBreakPoint);
+    const { editable } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const form = (0, react_1.useContext)(FormContext_1.default);
+    const { sendLabel } = (0, react_1.useContext)(CustomContext_1.default);
+    const section = form.sections[idSection];
+    if (!section)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialSection_module_css_1.default.container, style: {
+            width: (form.size.blockSize + form.size.spacingSize) *
+                form.size.blockNum,
+            justifyContent: sendLabel !== undefined &&
+                currentBreakPoint < form.size.blockNum
+                ? 'center'
+                : 'normal',
+        } }, { children: (_a = section.steps) === null || _a === void 0 ? void 0 : _a.map((idStep) => {
+            const step = form.steps[idStep];
+            return ((0, jsx_runtime_1.jsx)(Step_1.default, { editable: editable, step: step }, idStep));
+        }) })));
+}
+exports.default = MaterialSection;

package/dist/cjs/Form/Section/Section.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormStepTypes_1 = require("../../constants/FormStepTypes");
+const MaterialSection_1 = __importDefault(require("./MaterialSection/MaterialSection"));
+const SectionContext_1 = __importDefault(require("../../Contexts/SectionContext"));
+const hooks_1 = require("../../hooks");
+function SectionComponent(props) {
+    const formStyle = (0, hooks_1.useAppSelector)((state) => state.global.formStyle);
+    const renderSectionType = () => {
+        switch (formStyle.type) {
+            case FormStepTypes_1.FormStyleTypes.MATERIAL:
+            default: {
+                return (0, jsx_runtime_1.jsx)(MaterialSection_1.default, Object.assign({}, props));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(SectionContext_1.default.Provider, Object.assign({ value: props.idSection }, { children: renderSectionType() })));
+}
+exports.default = SectionComponent;

package/dist/cjs/Form/Terms/Term/MaterialTerm/MaterialTerm.js

@@ -0,0 +1,92 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@material-ui/core");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const RoundedButton_1 = __importDefault(require("../../../../Shared/RoundedButton/RoundedButton"));
+const RoundedCheckBox_1 = __importDefault(require("../../../../Shared/RoundedCheckBox/RoundedCheckBox"));
+const CloseRounded_1 = __importDefault(require("@material-ui/icons/CloseRounded"));
+const MaterialTerm_module_css_1 = __importDefault(require("./MaterialTerm.module.css"));
+const hooks_1 = require("../../../../hooks");
+const toolkit_1 = require("@reduxjs/toolkit");
+const selectOriginalValue = (0, toolkit_1.createSelector)([
+    (state) => state.site.values,
+    (state, idTerm) => idTerm,
+], (values, idTerm) => values.global[idTerm]);
+function TermComponent({ term, tempError }) {
+    var _a;
+    const { formStyle, postview } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const originalValue = (0, hooks_1.useAppSelector)((state) => selectOriginalValue(state, term.id));
+    const _b = (0, react_hook_form_1.useController)({
+        name: term.id,
+        rules: {
+            required: true,
+        },
+        defaultValue: originalValue !== null && originalValue !== void 0 ? originalValue : false,
+        shouldUnregister: true,
+    }), _c = _b.field, { ref } = _c, field = __rest(_c, ["ref"]), { fieldState: { error } } = _b;
+    const [showDialog, setShowDialog] = (0, react_2.useState)(false);
+    /**
+     * Function that renders the highlighted text
+     * @returns a string with span highlighted
+     */
+    const renderText = (text) => {
+        if (text) {
+            const parts = text.split(/{{(.*?)}}/gi);
+            for (let i = 1; i < parts.length; i += 2) {
+                parts[i] = ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: MaterialTerm_module_css_1.default.highlight, style: {
+                        color: !!error && tempError
+                            ? formStyle.errorColor
+                            : formStyle.primaryColor,
+                    }, onClick: () => {
+                        var _a, _b, _c, _d, _e;
+                        if (((_a = term.clickEffect) === null || _a === void 0 ? void 0 : _a.type) === 'LINK') {
+                            (_d = (_c = (_b = window
+                                .open) === null || _b === void 0 ? void 0 : _b.call(window, term.clickEffect.url, '_blank')) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        }
+                        else if (((_e = term.clickEffect) === null || _e === void 0 ? void 0 : _e.type) === 'DIALOG') {
+                            setShowDialog(true);
+                        }
+                    } }, { children: parts[i] }), i));
+            }
+            return parts;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.Dialog, Object.assign({ PaperProps: {
+                    style: {
+                        borderRadius: '20px',
+                    },
+                }, onClose: () => {
+                    setShowDialog(false);
+                }, open: showDialog }, { children: ((_a = term.clickEffect) === null || _a === void 0 ? void 0 : _a.type) === 'DIALOG' && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialTerm_module_css_1.default.dialogContainer, style: { color: formStyle.textColor } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTerm_module_css_1.default.closeIcon, onClick: () => {
+                                setShowDialog(false);
+                            } }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTerm_module_css_1.default.dialogTitle, style: {
+                                borderBottom: '1px solid ' + formStyle.primaryColor,
+                            } }, { children: term.clickEffect.title })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTerm_module_css_1.default.dialogContentContainer }, { children: term.clickEffect.text })), (0, jsx_runtime_1.jsx)(RoundedButton_1.default, { text: 'Aceptar', padding: "20px 15px", backgroundColor: formStyle.primaryColor, color: formStyle.primaryContrastColor, fontSize: 20, onClick: () => {
+                                setShowDialog(false);
+                                if (!postview) {
+                                    field.onChange(true);
+                                }
+                            } })] }))) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialTerm_module_css_1.default.container + ' noselect' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTerm_module_css_1.default.checkboxContainer }, { children: (0, jsx_runtime_1.jsx)(RoundedCheckBox_1.default, Object.assign({ inputRef: ref }, field, { checked: field.value, cantEdit: postview, padding: "5px", checkedColor: formStyle.primaryColor, errorColor: formStyle.errorColor, size: "1.5rem", error: !!error })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialTerm_module_css_1.default.messageContainer, style: {
+                            color: !!error && tempError
+                                ? formStyle.errorColor
+                                : 'inherit',
+                        } }, { children: renderText(term.message) }))] }))] }));
+}
+exports.default = TermComponent;

package/dist/cjs/Form/Terms/Term/Term.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormStepTypes_1 = require("../../../constants/FormStepTypes");
+const hooks_1 = require("../../../hooks");
+const MaterialTerm_1 = __importDefault(require("./MaterialTerm/MaterialTerm"));
+function TermComponent(props) {
+    const { formStyle } = (0, hooks_1.useAppSelector)((state) => state.global);
+    switch (formStyle.type) {
+        case FormStepTypes_1.FormStyleTypes.MATERIAL:
+        default: {
+            return (0, jsx_runtime_1.jsx)(MaterialTerm_1.default, Object.assign({}, props));
+        }
+    }
+}
+exports.default = TermComponent;

package/dist/cjs/Form/Terms/Terms.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Terms_module_css_1 = __importDefault(require("./Terms.module.css"));
+const Term_1 = __importDefault(require("./Term/Term"));
+const react_hook_form_1 = require("react-hook-form");
+const FormContext_1 = __importDefault(require("../../Contexts/FormContext"));
+const hooks_1 = require("../../hooks");
+function Terms() {
+    const { postview, internal } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const isInteralAgent = (0, hooks_1.useAppSelector)((state) => state.site.values.global['INTERNAL_CREATING_AGENT'] !== undefined);
+    const form = (0, react_1.useContext)(FormContext_1.default);
+    const { formState: { isSubmitting }, } = (0, react_hook_form_1.useFormContext)();
+    const [tempError, setTempError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isSubmitting)
+            return;
+        setTempError(true);
+        setTimeout(() => {
+            setTempError(false);
+        }, 500);
+    }, [isSubmitting]);
+    if (form.terms &&
+        (!internal || (internal && postview)) &&
+        !isInteralAgent) {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: Terms_module_css_1.default.termsContainer, style: {
+                width: (form.size.blockSize + form.size.spacingSize) *
+                    form.size.blockNum,
+            } }, { children: form.terms.map((term) => ((0, jsx_runtime_1.jsx)(Term_1.default, { term: term, tempError: tempError }, term.id))) })));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+}
+exports.default = Terms;