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

package/dist/mjs/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.module.css

@@ -0,0 +1,62 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    width: 900px;
+    max-width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+.collapsibleLabel {
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    cursor: default;
+    text-align: start;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    -o-user-select: none;
+    user-select: none; /* Non-prefixed version, currently */
+}
+
+.content {
+    width: 100%;
+    overflow: hidden;
+    transition: height ease 0.9s;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 2px;
+}
+.expandIcon {
+    height: 24px;
+    width: 24px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.separator {
+    height: 1px;
+    width: calc(100% - 20px);
+    margin-left: 10px;
+    margin-bottom: 10px;
+    border-radius: 20px;
+}

package/dist/mjs/FormSteps/CustomStep.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { StepProps } from './Step';
+import { Form } from '../@Types';
+import { GlobalState } from '../States/GlobalSlice';
+import { WidthStats } from '../Form/Form';
+import { StepDependency } from './StepHooks';
+import { SiteState } from '../States/SiteSlice';
+export interface CustomStepProps extends StepProps, GlobalState, StepDependency {
+    form: Form;
+    dependencyStore: SiteState['dependencies'];
+    customStepProps: Record<string, any>;
+    widthStats: WidthStats;
+}
+export interface CustomStep {
+    componentProps?: Record<string, any>;
+    component: (props: CustomStepProps) => JSX.Element;
+    calcValue?: (step: any, value: any) => any;
+    /** Function to change custom steps nested step ids to the generated ones. */
+    calcRecursiveData?: (step: any, ids: Record<string, string>) => void;
+    calcDependencyValue?: (step: any, value: any) => any;
+}
+interface CustomStepComponentProps extends StepProps {
+    customStep: CustomStep;
+}
+declare function CustomStepComponent({ customStep, ...props }: CustomStepComponentProps): JSX.Element;
+export default CustomStepComponent;

package/dist/mjs/FormSteps/CustomStep.js

@@ -0,0 +1,24 @@
+import FormContext from '../Contexts/FormContext';
+import { useAppSelector } from '../hooks';
+import CustomStepPropsContext from '../Contexts/CustomContext';
+import { useContext } from 'react';
+import { useStepDependency } from './StepHooks';
+function CustomStepComponent({ customStep, ...props }) {
+    const form = useContext(FormContext);
+    const global = useAppSelector((state) => state.global);
+    const { customStepProps } = useContext(CustomStepPropsContext);
+    const dependencyStore = useAppSelector((state) => state.site.dependencies);
+    const widthStats = useAppSelector((state) => state.widthStats);
+    const dependencyInfo = useStepDependency(props.step, undefined);
+    return customStep.component({
+        ...global,
+        ...dependencyInfo,
+        ...props,
+        dependencyStore,
+        widthStats,
+        form,
+        customStepProps,
+        ...(customStep.componentProps ?? {}),
+    });
+}
+export default CustomStepComponent;

package/dist/mjs/FormSteps/DatePickerStep/DatePickerStep.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DatePicker } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface DatePickerStepProps extends StepProps {
+    /** The DatePickerStep to display */
+    step: DatePicker;
+    /** Default value to display */
+    defaultValue?: Date | null;
+}
+declare function DatePickerStep(props: DatePickerStepProps): JSX.Element;
+export default DatePickerStep;

package/dist/mjs/FormSteps/DatePickerStep/DatePickerStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialDatePickerStep from './MaterialDatePickerStep/MaterialDatePickerStep';
+import { useAppSelector } from '../../hooks';
+function DatePickerStep(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialDatePickerStep, { ...props });
+        }
+    }
+}
+export default DatePickerStep;

package/dist/mjs/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DatePickerStepProps } from '../DatePickerStep';
+declare function DatePickerStep({ step, editable, defaultValue, }: DatePickerStepProps): JSX.Element;
+export default DatePickerStep;

package/dist/mjs/FormSteps/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import RoundedDatePicker from '../../../Shared/RoundedDatePicker/RoundedDatePicker';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function DatePickerStep({ step, editable, defaultValue, }) {
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    return (_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(RoundedDatePicker, { ...field, value: value, onChange: onChange, pickTime: step.pickTime, clearable: !step.required, clearLabel: "Borrar", inputRef: ref, cantEdit: !editable || postview, secondaryColor: formStyle.secondaryColor, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: error?.message ?? step.description, error: !!error, required: step.required }) }));
+}
+export default DatePickerStep;

package/dist/mjs/FormSteps/EntityValueStep/EntityValuePickerStep.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { EntityValuePicker } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface StepOptions {
+    id: string | number;
+    label: string;
+}
+export interface EntityValuePickerStepProps extends StepProps {
+    /** The EntityValuePickerStep to display */
+    step: EntityValuePicker;
+    /** Default value to display */
+    defaultValue?: Date | null;
+}
+declare function EntityValuePickerStep(props: EntityValuePickerStepProps): JSX.Element;
+export default EntityValuePickerStep;

package/dist/mjs/FormSteps/EntityValueStep/EntityValuePickerStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../hooks';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialEntityValuePickerStep from './MaterialEntityValuePickerStep/MaterialEntityValuePickerStep';
+function EntityValuePickerStep(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialEntityValuePickerStep, { ...props });
+        }
+    }
+}
+export default EntityValuePickerStep;

package/dist/mjs/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { EntityValuePickerStepProps } from '../EntityValuePickerStep';
+declare function EntityValuePickerStep({ step, editable, }: EntityValuePickerStepProps): JSX.Element;
+export default EntityValuePickerStep;

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

@@ -0,0 +1,84 @@
+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({ step, editable, }) {
+    const form = useContext(FormContext);
+    return (_jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getEntityValueOptions, getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
+                for (const step of steps) {
+                    if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
+                        return 'Selecciona un ' + step.label;
+                    }
+                }
+                return undefined;
+            }, getValueString: (value) => value?._id, renderNestedSteps: (value) => {
+                if (!value)
+                    return _jsx(_Fragment, {});
+                const currentOption = step.options[value._id];
+                if (currentOption?.type === EntityValueOptionTypes.NESTED) {
+                    return (_jsx(React.Fragment, { children: currentOption.steps.map((idStep) => {
+                            const subStep = form.steps[idStep];
+                            return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+                        }) }));
+                }
+                else
+                    return _jsx(_Fragment, {});
+            } }) }));
+}
+export default EntityValuePickerStep;
+const getEntityValueOptions = async (idOrganization, step, dependencyStore) => {
+    if (!idOrganization)
+        return null;
+    let urlPath = '';
+    for (const path of step.path) {
+        let idEntityValue = 'null';
+        switch (path.type) {
+            case EntityValueDataTypes.STEP: {
+                const currentValue = dependencyStore[path.idStep]?.value;
+                if (!currentValue)
+                    return null;
+                if (typeof currentValue === 'string')
+                    idEntityValue = currentValue;
+                else
+                    idEntityValue = currentValue._id ?? currentValue.id;
+                break;
+            }
+            case EntityValueDataTypes.VALUE:
+            default:
+                idEntityValue = path.idEntityValue ?? 'null';
+                break;
+        }
+        urlPath +=
+            '/' + path.idEntity + (idEntityValue ? '/' + idEntityValue : '');
+    }
+    const params = new URLSearchParams({});
+    for (const filter of step.filters) {
+        switch (filter.type) {
+            case EntityValueDataTypes.STEP: {
+                const currentValue = dependencyStore[filter.idStep]?.value;
+                if (currentValue) {
+                    if (typeof currentValue === 'string')
+                        params.set(filter.idProperty, currentValue);
+                    else
+                        params.set(filter.idProperty, currentValue._id ?? currentValue.id);
+                }
+                else if (filter.required) {
+                    return null;
+                }
+                break;
+            }
+            case EntityValueDataTypes.VALUE:
+            default:
+                params.set(filter.idProperty, filter.value);
+                break;
+        }
+    }
+    const url = `${idOrganization}/entities/${step.idEntity}${urlPath}?${params.toString()}`;
+    const response = await widgetInstance.get(url);
+    return response.data.filter((option) => step.options[option._id]?.type !== EntityValueOptionTypes.HIDE);
+};

package/dist/mjs/FormSteps/FileUploadStep/FileUploadStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FileUpload } from '../../@Types/FormStep';
+import { StepProps } from '../Step';
+export interface FileUploadStepProps extends StepProps {
+    /** The FileUploadStep to display */
+    step: FileUpload;
+}
+declare function FileUploadStep(props: FileUploadStepProps): JSX.Element;
+export default FileUploadStep;

package/dist/mjs/FormSteps/FileUploadStep/FileUploadStep.js

@@ -0,0 +1,14 @@
+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) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialFileUploadStep, { ...props });
+        }
+    }
+}
+export default FileUploadStep;

package/dist/mjs/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { FileObject, UploadedFileObject } from '../MaterialFileUploadStep';
+import { FormStyle } from '../../../../@Types/Form';
+interface FileComponentProps {
+    file: FileObject | UploadedFileObject;
+    formStyle: FormStyle;
+    error: boolean;
+    handleRemove: () => void;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+}
+declare function FileUploadComponent({ file, formStyle, error, handleRemove, fetchDownloadUrl, }: FileComponentProps): JSX.Element;
+export default FileUploadComponent;

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

@@ -0,0 +1,70 @@
+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({ file, formStyle, error, handleRemove, fetchDownloadUrl, }) {
+    const [downloading, setDownloading] = useState(false);
+    if (!file) {
+        return _jsx("div", {});
+    }
+    const downloadFile = async () => {
+        if (fetchDownloadUrl && file.S3Key && file.fileName) {
+            try {
+                setDownloading(true);
+                const fileUrl = await fetchDownloadUrl(file.S3Key, file.fileName);
+                const a = document.createElement('a');
+                a.href = fileUrl;
+                a.setAttribute('download', file.fileName);
+                a.click();
+                setDownloading(false);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+    };
+    const calcIcon = () => {
+        if (downloading) {
+            return (_jsx("div", { 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", { className: styles.loaderContainer, children: _jsx(Loader, { size: 26, color: formStyle.primaryColor }) }));
+                case 'DONE':
+                    return (_jsx("div", { className: styles.documentIcon, style: { color: formStyle.primaryColor }, children: _jsx(DescriptionRoundedIcon, {}) }));
+                case 'ERROR':
+                    return (_jsx("div", { className: styles.documentIcon, style: { color: formStyle.errorColor }, children: _jsx(ErrorRoundedIcon, {}) }));
+                default:
+                    return _jsx("div", {});
+            }
+        }
+        else {
+            return (_jsx("div", { className: styles.documentIcon, style: { color: formStyle.primaryColor }, children: _jsx(DescriptionRoundedIcon, {}) }));
+        }
+    };
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.iconContainer, children: calcIcon() }), _jsx("div", { className: (fetchDownloadUrl && file.S3Key) ||
+                    file.downloadUrl
+                    ? styles.downloadableLbl
+                    : styles.label, style: {
+                    color: error ? formStyle.errorColor : formStyle.textColor,
+                }, onClick: () => {
+                    if (isUploadedFileObject(file) && file.downloadUrl) {
+                        const a = document.createElement('a');
+                        a.href = file.downloadUrl;
+                        a.setAttribute('download', file.fileName);
+                        a.click();
+                    }
+                    else if (fetchDownloadUrl !== undefined && file.S3Key) {
+                        downloadFile();
+                    }
+                }, children: file.file?.name ?? file.fileName }), _jsx("div", { className: styles.deletBtn, onClick: () => {
+                    handleRemove();
+                }, children: file.state !== undefined && (_jsx(ClearRoundedIcon, { fontSize: "inherit" })) })] }));
+}
+export default FileUploadComponent;

package/dist/mjs/FormSteps/FileUploadStep/MaterialFileUploadStep/FileComponent/FileComponent.module.css

@@ -0,0 +1,53 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 4px;
+}
+
+.documentIcon {
+    font-size: 26px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+}
+
+.label,
+.downloadableLbl {
+    font-size: 1rem;
+    margin-left: 2px;
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 80px);
+}
+.downloadableLbl {
+    cursor: pointer;
+}
+.downloadableLbl:hover {
+    text-decoration: underline;
+}
+.deletBtn {
+    font-size: 26px;
+    height: 26px;
+    margin-left: 5px;
+    color: '#787878';
+    cursor: pointer;
+}
+.loaderContainer {
+    position: relative;
+    height: 26px;
+    width: 26px;
+}
+
+.iconContainer {
+    height: 30px;
+    width: 30px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/dist/mjs/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { FileUploadStepProps } from '../FileUploadStep';
+export interface FileObject {
+    state: 'STARTING' | 'UPLOADING' | 'DONE' | 'CANCEL' | 'ERROR';
+    file: File;
+    postInfo: any;
+    fileName?: string;
+    S3Key?: string;
+    error?: boolean;
+}
+export interface UploadedFileObject {
+    fileName: string;
+    S3Key: string;
+    downloadUrl?: string;
+}
+export declare function isUploadedFileObject(file: UploadedFileObject | FileObject): file is UploadedFileObject;
+declare function FileUploadStep({ step, editable }: FileUploadStepProps): JSX.Element;
+export default FileUploadStep;

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

@@ -0,0 +1,179 @@
+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({ step, editable }) {
+    const { ref, value, onChange, error: fieldError, } = useFormStep(step, {
+        defaultValue: [],
+        rules: {
+            validate: (array) => ((step.required && array.length > 0) || !step.required) &&
+                array.find((file) => !file.S3Key) === undefined,
+        },
+    });
+    const { fetchDownloadUrl } = useContext(CustomContext);
+    const { formStyle, idOrganization, postview } = useAppSelector((state) => state.global);
+    const { clearErrors } = useFormContext();
+    const [error, setError] = useState(undefined);
+    const [fileChange, setFileChange] = useState([]);
+    const inputRef = useRef();
+    useEffect(() => {
+        const filesToFetchLink = [];
+        const filesChanged = [];
+        for (const file of fileChange) {
+            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') {
+                const newValue = [...value];
+                for (let i = 0; i < value.length; i++) {
+                    if (value[i].file === file.file) {
+                        newValue.splice(i, 1);
+                        break;
+                    }
+                }
+                onChange(newValue);
+            }
+        }
+        if (filesChanged.length > 0) {
+            const newValue = [...value];
+            for (const file of filesChanged) {
+                for (let i = 0; i < value.length; i++) {
+                    if (value[i].file === file.file) {
+                        newValue[i] = file;
+                    }
+                }
+            }
+            onChange(newValue);
+        }
+        if (filesToFetchLink.length > 0) {
+            getLinks(filesToFetchLink);
+            onChange([...value, ...filesToFetchLink]);
+        }
+    }, [fileChange]);
+    async function getLinks(pFiles) {
+        try {
+            const fileLinks = await getUploadUrls(pFiles.map((file) => file.file), idOrganization);
+            const errorsExt = [];
+            setFileChange(pFiles.map((file, index) => {
+                if (fileLinks[index] === 'ERROR:INVALIDEXTENSION') {
+                    errorsExt.push(file.file.name.split('.').pop() ?? '');
+                    return { ...file, state: 'ERROR' };
+                }
+                else {
+                    return {
+                        ...file,
+                        state: 'UPLOADING',
+                        postInfo: fileLinks[index],
+                    };
+                }
+            }));
+            if (errorsExt.length === 1) {
+                setError('La extención .' + errorsExt[0] + ' no es válida');
+            }
+            else if (errorsExt.length > 1) {
+                setError('Las extenciónes .' +
+                    errorsExt.join(',.') +
+                    ' no son válidas');
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    async function uploadFile(pFile) {
+        try {
+            const resp = await Promise.all([
+                postFile(pFile.file, pFile.postInfo),
+                new Promise((resolve) => setTimeout(resolve, 1000)),
+            ]);
+            setFileChange([{ ...pFile, state: 'DONE', ...resp[0] }]);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    const calcErrorMsg = () => {
+        if (fieldError) {
+            const errNum = value.filter((val) => 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", { className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: editable === false || postview
+            ? {}
+            : {
+                minHeight: '100px',
+            }, "data-testid": step.id, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
+                    const files = e.target.files;
+                    if (files) {
+                        const filesArray = Array.from(files);
+                        const maxFiles = filesArray.filter((file) => file.size > maxSize);
+                        if (maxFiles.length > 0) {
+                            setError('El tamaño máximo de carga es de 30Mb.');
+                        }
+                        else {
+                            setFileChange(filesArray
+                                .filter((file) => value.find((val) => val.file ===
+                                file) === undefined)
+                                .map((file) => ({
+                                state: 'STARTING',
+                                file,
+                                postInfo: null,
+                            })));
+                        }
+                        inputRef.current.value = '';
+                    }
+                }, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { 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: () => {
+                            if (editable && !postview) {
+                                const input = inputRef.current;
+                                if (input !== null) {
+                                    clearErrors(step.id);
+                                    setError(undefined);
+                                    input.click();
+                                }
+                            }
+                        } })] }), _jsx("div", { className: styles.filesContainer, children: value.map((file, index) => (_jsx(FileComponent, { formStyle: formStyle, file: file, error: (!!fieldError &&
+                        file.state !== 'DONE') ||
+                        file.state === 'ERROR', handleRemove: () => {
+                        if (value.filter((val) => val.state === 'ERROR').length === 1) {
+                            clearErrors(step.id);
+                            setError(undefined);
+                        }
+                        if (file.state !== undefined) {
+                            setFileChange([
+                                {
+                                    ...file,
+                                    state: 'CANCEL',
+                                },
+                            ]);
+                        }
+                    }, fetchDownloadUrl: fetchDownloadUrl }, index))) }), _jsx("div", { className: styles.errorMsg, style: { color: formStyle.errorColor }, children: error ?? calcErrorMsg() })] }));
+}
+export default FileUploadStep;