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

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -0,0 +1,146 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes, } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import widgetInstance from '../../../Utils/AxiosWidget';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import FormContext from '../../../Contexts/FormContext';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+function EntityValuePickerStep(_a) {
+    var step = _a.step, editable = _a.editable;
+    var form = useContext(FormContext);
+    return (_jsx(StepFillerContainer, __assign({ step: step }, { children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: function (option, value) {
+                return option._id === value._id;
+            }, calcDepError: function (steps) {
+                for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
+                    var step_1 = steps_1[_i];
+                    if (step_1.type === FormStepTypes.ENTITYVALUEPICKER) {
+                        return 'Selecciona un ' + step_1.label;
+                    }
+                }
+                return undefined;
+            }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value._id; }, renderNestedSteps: function (value) {
+                if (!value)
+                    return _jsx(_Fragment, {});
+                var currentOption = step.options[value._id];
+                if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === EntityValueOptionTypes.NESTED) {
+                    return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep) {
+                            var subStep = form.steps[idStep];
+                            return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                        }) }));
+                }
+                else
+                    return _jsx(_Fragment, {});
+            } }) })));
+}
+export default EntityValuePickerStep;
+var getEntityValueOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
+    var urlPath, _i, _a, path, idEntityValue, currentValue, params, _b, _c, filter, currentValue, url, response;
+    var _d, _e, _f, _g, _h;
+    return __generator(this, function (_j) {
+        switch (_j.label) {
+            case 0:
+                if (!idOrganization)
+                    return [2 /*return*/, null];
+                urlPath = '';
+                for (_i = 0, _a = step.path; _i < _a.length; _i++) {
+                    path = _a[_i];
+                    idEntityValue = 'null';
+                    switch (path.type) {
+                        case EntityValueDataTypes.STEP: {
+                            currentValue = (_d = dependencyStore[path.idStep]) === null || _d === void 0 ? void 0 : _d.value;
+                            if (!currentValue)
+                                return [2 /*return*/, null];
+                            if (typeof currentValue === 'string')
+                                idEntityValue = currentValue;
+                            else
+                                idEntityValue = (_e = currentValue._id) !== null && _e !== void 0 ? _e : currentValue.id;
+                            break;
+                        }
+                        case EntityValueDataTypes.VALUE:
+                        default:
+                            idEntityValue = (_f = path.idEntityValue) !== null && _f !== void 0 ? _f : 'null';
+                            break;
+                    }
+                    urlPath +=
+                        '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
+                }
+                params = new URLSearchParams({});
+                for (_b = 0, _c = step.filters; _b < _c.length; _b++) {
+                    filter = _c[_b];
+                    switch (filter.type) {
+                        case EntityValueDataTypes.STEP: {
+                            currentValue = (_g = dependencyStore[filter.idStep]) === null || _g === void 0 ? void 0 : _g.value;
+                            if (currentValue) {
+                                if (typeof currentValue === 'string')
+                                    params.set(filter.idProperty, currentValue);
+                                else
+                                    params.set(filter.idProperty, (_h = currentValue._id) !== null && _h !== void 0 ? _h : currentValue.id);
+                            }
+                            else if (filter.required) {
+                                return [2 /*return*/, null];
+                            }
+                            break;
+                        }
+                        case EntityValueDataTypes.VALUE:
+                        default:
+                            params.set(filter.idProperty, filter.value);
+                            break;
+                    }
+                }
+                url = "".concat(idOrganization, "/entities/").concat(step.idEntity).concat(urlPath, "?").concat(params.toString());
+                return [4 /*yield*/, widgetInstance.get(url)];
+            case 1:
+                response = _j.sent();
+                return [2 /*return*/, response.data.filter(function (option) { var _a; return ((_a = step.options[option._id]) === null || _a === void 0 ? void 0 : _a.type) !== EntityValueOptionTypes.HIDE; })];
+        }
+    });
+}); };

package/dist/FormSteps/FileUploadStep/FileUploadStep.js

@@ -0,0 +1,25 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../hooks';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialFileUploadStep from './MaterialFileUploadStep/MaterialFileUploadStep';
+function FileUploadStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialFileUploadStep, __assign({}, props));
+        }
+    }
+}
+export default FileUploadStep;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.js

@@ -0,0 +1,131 @@
+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 { isUploadedFileObject, } from '../MaterialFileUploadStep';
+import styles from './FileComponent.module.css';
+import ClearRoundedIcon from '@material-ui/icons/ClearRounded';
+import DescriptionRoundedIcon from '@material-ui/icons/DescriptionRounded';
+import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
+import Loader from '../../../../Shared/Loader/Loader';
+import { useState } from 'react';
+function FileUploadComponent(_a) {
+    var _this = this;
+    var _b, _c;
+    var file = _a.file, formStyle = _a.formStyle, error = _a.error, handleRemove = _a.handleRemove, fetchDownloadUrl = _a.fetchDownloadUrl;
+    var _d = useState(false), downloading = _d[0], setDownloading = _d[1];
+    if (!file) {
+        return _jsx("div", {});
+    }
+    var downloadFile = function () { return __awaiter(_this, void 0, void 0, function () {
+        var fileUrl, a, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(fetchDownloadUrl && file.S3Key && file.fileName)) return [3 /*break*/, 4];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    setDownloading(true);
+                    return [4 /*yield*/, fetchDownloadUrl(file.S3Key, file.fileName)];
+                case 2:
+                    fileUrl = _a.sent();
+                    a = document.createElement('a');
+                    a.href = fileUrl;
+                    a.setAttribute('download', file.fileName);
+                    a.click();
+                    setDownloading(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var calcIcon = function () {
+        if (downloading) {
+            return (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }) })));
+        }
+        else if (file.state !== undefined) {
+            switch (file.state) {
+                case 'STARTING':
+                case 'UPLOADING':
+                    return (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }) })));
+                case 'DONE':
+                    return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}) })));
+                case 'ERROR':
+                    return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.errorColor } }, { children: _jsx(ErrorRoundedIcon, {}) })));
+                default:
+                    return _jsx("div", {});
+            }
+        }
+        else {
+            return (_jsx("div", __assign({ className: styles.documentIcon, style: { color: formStyle.primaryColor } }, { children: _jsx(DescriptionRoundedIcon, {}) })));
+        }
+    };
+    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx("div", __assign({ className: styles.iconContainer }, { children: calcIcon() })), _jsx("div", __assign({ className: (fetchDownloadUrl && file.S3Key) ||
+                    file.downloadUrl
+                    ? styles.downloadableLbl
+                    : styles.label, style: {
+                    color: error ? formStyle.errorColor : formStyle.textColor,
+                }, onClick: function () {
+                    if (isUploadedFileObject(file) && file.downloadUrl) {
+                        var a = document.createElement('a');
+                        a.href = file.downloadUrl;
+                        a.setAttribute('download', file.fileName);
+                        a.click();
+                    }
+                    else if (fetchDownloadUrl !== undefined && file.S3Key) {
+                        downloadFile();
+                    }
+                } }, { children: (_c = (_b = file.file) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : file.fileName })), _jsx("div", __assign({ className: styles.deletBtn, onClick: function () {
+                    handleRemove();
+                } }, { children: file.state !== undefined && (_jsx(ClearRoundedIcon, { fontSize: "inherit" })) }))] })));
+}
+export default FileUploadComponent;

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -0,0 +1,265 @@
+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 };
+    }
+};
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './MaterialFileUploadStep.module.css';
+import { useFormContext } from 'react-hook-form';
+import RoundedButton from '../../../Shared/RoundedButton/RoundedButton';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { getAcceptedExtensions } from '../../../constants/Files/FileExtensions';
+import { getUploadUrls, postFile } from '../../../Services/FileService';
+import FileComponent from './FileComponent/FileComponent';
+import maxSize from '../../../constants/Files/FileMaxSize';
+import { useAppSelector } from '../../../hooks';
+import CustomContext from '../../../Contexts/CustomContext';
+import { useFormStep } from '../../StepHooks';
+export function isUploadedFileObject(file) {
+    return file.state === undefined && file.S3Key !== undefined;
+}
+function FileUploadStep(_a) {
+    var step = _a.step, editable = _a.editable;
+    var _b = useFormStep(step, {
+        defaultValue: [],
+        rules: {
+            validate: function (array) {
+                return ((step.required && array.length > 0) || !step.required) &&
+                    array.find(function (file) { return !file.S3Key; }) === undefined;
+            },
+        },
+    }), ref = _b.ref, value = _b.value, onChange = _b.onChange, fieldError = _b.error;
+    var fetchDownloadUrl = useContext(CustomContext).fetchDownloadUrl;
+    var _c = useAppSelector(function (state) { return state.global; }), formStyle = _c.formStyle, idOrganization = _c.idOrganization, postview = _c.postview;
+    var clearErrors = useFormContext().clearErrors;
+    var _d = useState(undefined), error = _d[0], setError = _d[1];
+    var _e = useState([]), fileChange = _e[0], setFileChange = _e[1];
+    var inputRef = useRef();
+    useEffect(function () {
+        var filesToFetchLink = [];
+        var filesChanged = [];
+        for (var _i = 0, fileChange_1 = fileChange; _i < fileChange_1.length; _i++) {
+            var file = fileChange_1[_i];
+            if (file.state === 'STARTING') {
+                filesToFetchLink.push(file);
+            }
+            if (file.state === 'UPLOADING') {
+                uploadFile(file);
+                filesChanged.push(file);
+            }
+            if (file.state === 'DONE' ||
+                file.state === 'ERROR') {
+                filesChanged.push(file);
+            }
+            if (file.state === 'CANCEL') {
+                var newValue = __spreadArray([], value, true);
+                for (var i = 0; i < value.length; i++) {
+                    if (value[i].file === file.file) {
+                        newValue.splice(i, 1);
+                        break;
+                    }
+                }
+                onChange(newValue);
+            }
+        }
+        if (filesChanged.length > 0) {
+            var newValue = __spreadArray([], value, true);
+            for (var _a = 0, filesChanged_1 = filesChanged; _a < filesChanged_1.length; _a++) {
+                var file = filesChanged_1[_a];
+                for (var i = 0; i < value.length; i++) {
+                    if (value[i].file === file.file) {
+                        newValue[i] = file;
+                    }
+                }
+            }
+            onChange(newValue);
+        }
+        if (filesToFetchLink.length > 0) {
+            getLinks(filesToFetchLink);
+            onChange(__spreadArray(__spreadArray([], value, true), filesToFetchLink, true));
+        }
+    }, [fileChange]);
+    function getLinks(pFiles) {
+        return __awaiter(this, void 0, void 0, function () {
+            var fileLinks_1, errorsExt_1, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, getUploadUrls(pFiles.map(function (file) { return file.file; }), idOrganization)];
+                    case 1:
+                        fileLinks_1 = _a.sent();
+                        errorsExt_1 = [];
+                        setFileChange(pFiles.map(function (file, index) {
+                            var _a;
+                            if (fileLinks_1[index] === 'ERROR:INVALIDEXTENSION') {
+                                errorsExt_1.push((_a = file.file.name.split('.').pop()) !== null && _a !== void 0 ? _a : '');
+                                return __assign(__assign({}, file), { state: 'ERROR' });
+                            }
+                            else {
+                                return __assign(__assign({}, file), { state: 'UPLOADING', postInfo: fileLinks_1[index] });
+                            }
+                        }));
+                        if (errorsExt_1.length === 1) {
+                            setError('La extención .' + errorsExt_1[0] + ' no es válida');
+                        }
+                        else if (errorsExt_1.length > 1) {
+                            setError('Las extenciónes .' +
+                                errorsExt_1.join(',.') +
+                                ' no son válidas');
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        console.error(error_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function uploadFile(pFile) {
+        return __awaiter(this, void 0, void 0, function () {
+            var resp, error_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, Promise.all([
+                                postFile(pFile.file, pFile.postInfo),
+                                new Promise(function (resolve) { return setTimeout(resolve, 1000); }),
+                            ])];
+                    case 1:
+                        resp = _a.sent();
+                        setFileChange([__assign(__assign(__assign({}, pFile), { state: 'DONE' }), resp[0])]);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_2 = _a.sent();
+                        console.error(error_2);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    var calcErrorMsg = function () {
+        if (fieldError) {
+            var errNum = value.filter(function (val) { return val.state === 'ERROR'; }).length;
+            if (errNum === 1) {
+                return 'Este archivo no es válido';
+            }
+            else if (errNum > 1) {
+                return 'Estos archivos no son válidos';
+            }
+            else {
+                return 'Este campo es obligatorio';
+            }
+        }
+        return '';
+    };
+    return (_jsxs("div", __assign({ className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: {
+            breakInside: 'avoid',
+            minHeight: editable === false || postview ? undefined : '100px',
+        }, "data-testid": step.id }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label })), step.description && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor } }, { children: step.description }))), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: function (e) {
+                    var files = e.target.files;
+                    if (files) {
+                        var filesArray = Array.from(files);
+                        var maxFiles = filesArray.filter(function (file) { return file.size > maxSize; });
+                        if (maxFiles.length > 0) {
+                            setError('El tamaño máximo de carga es de 30Mb.');
+                        }
+                        else {
+                            setFileChange(filesArray
+                                .filter(function (file) {
+                                return value.find(function (val) {
+                                    return val.file ===
+                                        file;
+                                }) === undefined;
+                            })
+                                .map(function (file) {
+                                return ({
+                                    state: 'STARTING',
+                                    file: file,
+                                    postInfo: null,
+                                });
+                            }));
+                        }
+                        inputRef.current.value = '';
+                    }
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(RoundedButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                            if (editable && !postview) {
+                                var input = inputRef.current;
+                                if (input !== null) {
+                                    clearErrors(step.id);
+                                    setError(undefined);
+                                    input.click();
+                                }
+                            }
+                        } })] })), _jsx("div", __assign({ className: styles.filesContainer }, { children: value.map(function (file, index) { return (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError &&
+                        file.state !== 'DONE') ||
+                        file.state === 'ERROR', handleRemove: function () {
+                        if (value.filter(function (val) {
+                            return val.state === 'ERROR';
+                        }).length === 1) {
+                            clearErrors(step.id);
+                            setError(undefined);
+                        }
+                        if (file.state !== undefined) {
+                            setFileChange([
+                                __assign(__assign({}, file), { state: 'CANCEL' }),
+                            ]);
+                        }
+                    }, fetchDownloadUrl: fetchDownloadUrl }, index)); }) })), _jsx("div", __assign({ className: styles.errorMsg, style: { color: formStyle.errorColor } }, { children: error !== null && error !== void 0 ? error : calcErrorMsg() }))] })));
+}
+export default FileUploadStep;

package/dist/FormSteps/MapperStep/MapperStep.js

@@ -0,0 +1,25 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialMapperStep from './MaterialMapperStep/MaterialMapperStep';
+import { useAppSelector } from '../../hooks';
+function MapperStep(props) {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialMapperStep, __assign({}, props));
+        }
+    }
+}
+export default MapperStep;

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

@@ -0,0 +1,52 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import styles from './ListMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import FormContext from '../../../../../Contexts/FormContext';
+import { useAppSelector } from '../../../../../hooks';
+function ListMapperElement(_a) {
+    var _b, _c;
+    var step = _a.step, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, handleDelete = _a.handleDelete, customElementModifiers = _a.customElementModifiers;
+    var size = useContext(FormContext).size;
+    var _d = useAppSelector(function (state) { return state.global; }), formStyle = _d.formStyle, postview = _d.postview;
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
+    var name = calcName
+        ? calcName(element)
+        : step.unitLabel
+            ? step.unitLabel + ' ' + (num + 1)
+            : '';
+    return (_jsxs("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: [_jsx("div", __assign({ className: styles.bulletContainer, style: {
+                    height: name ? 28 : 40,
+                } }, { children: _jsx("div", { className: styles.bullet, style: {
+                        backgroundColor: formStyle.outlineColor,
+                        borderColor: formStyle.descriptionTextColor,
+                    } }) })), _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
+                } }, { children: [name && (_jsxs("div", __assign({ className: styles.title, style: { color: formStyle.textColor } }, { children: [(name || loading) && (_jsx("label", __assign({ className: styles.titleLbl }, { children: loading ? 'Cargando...' : name + ':' }))), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
+                                    ? styles.disabledDeleteBtn
+                                    : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                                    if (editable && !postview) {
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                    }
+                                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] }))), children] })), !name && step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
+                    ? styles.disabledDeleteBtn
+                    : styles.deleteBtn, style: { color: formStyle.textColor, marginTop: 7 }, onClick: function () {
+                    if (editable && !postview) {
+                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                    }
+                } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })))] })));
+}
+export default ListMapperElement;