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

package/dist/mjs/FormSteps/AYFStepMapper.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AYFFormStepTypes from '../constants/AYFFormStepTypes';
+import TextInputStep from './TextInputStep/TextInputStep';
+import SmartSelectStep from './SmartSelectStep/SmartSelectStep';
+import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
+import LocationOnRoundedIcon from '@material-ui/icons/LocationOnRounded';
+import DescriptionIcon from '@material-ui/icons/Description';
+import DatePickerStep from './DatePickerStep/DatePickerStep';
+import axios from 'axios';
+const baseUrl = `https://api.integrations.${process.env.REACT_APP_DOMAIN}/sinco/ayf/`;
+function AYFStepMapper(props) {
+    const getMonths = async () => {
+        return [
+            { id: '1', label: 'Enero' },
+            { id: '2', label: 'Febrero' },
+            { id: '3', label: 'Marzo' },
+            { id: '4', label: 'Abril' },
+            { id: '5', label: 'Mayo' },
+            { id: '6', label: 'Junio' },
+            { id: '7', label: 'Julio' },
+            { id: '8', label: 'Agosto' },
+            { id: '9', label: 'Septiembre' },
+            { id: '10', label: 'Octubre' },
+            { id: '11', label: 'Noviembre ' },
+            { id: '12', label: 'Diciembre' },
+        ];
+    };
+    const getCiudadesOptions = async (idOrganization, step, dependencyStore) => {
+        if (!idOrganization)
+            return null;
+        const nit = dependencyStore[step.idNitStep]?.value;
+        const params = new URLSearchParams({
+            idOrganization,
+            idCompany: nit,
+            nit: 'true',
+        });
+        for (const dep of step.dependencies ?? []) {
+            const value = dependencyStore[dep]?.value;
+            if (value && dep.startsWith('AYF')) {
+                switch (dep.split('-')?.[0]) {
+                    case AYFFormStepTypes.AYF_START_MONTH:
+                        params.set('startMonth', value.id);
+                        break;
+                    case AYFFormStepTypes.AYF_END_MONTH:
+                        params.set('endMonth', value.id);
+                        break;
+                    case AYFFormStepTypes.AYF_YEAR:
+                        params.set('year', value);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+        try {
+            return (await axios.get(baseUrl + 'CiudadesICA?' + params.toString())).data;
+            // eslint-disable-next-line no-empty
+        }
+        catch (error) {
+            return null;
+        }
+    };
+    switch (props.step.type) {
+        case AYFFormStepTypes.AYF_START_MONTH:
+        case AYFFormStepTypes.AYF_END_MONTH:
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, getOptions: getMonths, getOptionSelected: (option, value) => option.id === value.id, defaultValue: props.step.type === AYFFormStepTypes.AYF_START_MONTH
+                    ? { id: '1', label: 'Enero' }
+                    : { id: '12', label: 'Diciembre' }, getValueString: (value) => value?.id, icon: _jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                        marginRight: 4,
+                        marginTop: 2,
+                    } }) }));
+        case AYFFormStepTypes.AYF_YEAR:
+            return (_jsx(TextInputStep, { ...props, step: props.step, defaultValue: new Date().getFullYear().toString() }));
+        case AYFFormStepTypes.AYF_BILL_NUM:
+            return (_jsx(TextInputStep, { ...props, step: props.step, validation: {
+                    value: '^\\S*$',
+                    type: 'OTHER',
+                    message: 'No se permiten espacios',
+                }, maxLength: 30, icon: _jsx(DescriptionIcon, { style: { color: '#757575', fontSize: 23 } }) }));
+        case AYFFormStepTypes.AYF_CUT_OFF_DATE:
+            return (_jsx(DatePickerStep, { ...props, step: props.step, defaultValue: new Date() }));
+        case AYFFormStepTypes.AYF_ICA_CITY:
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, getOptions: getCiudadesOptions, getOptionSelected: (option, value) => option === value, getValueString: (value) => value, icon: _jsx(LocationOnRoundedIcon, { fill: "#757575", style: {
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                        marginRight: 3,
+                        marginTop: 1,
+                    } }) }));
+        default:
+            return _jsx("div", {});
+    }
+}
+export default AYFStepMapper;

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

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

package/dist/mjs/FormSteps/ApiSelectorStep/ApiSelectorStep.js

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

package/dist/mjs/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.d.ts

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

package/dist/mjs/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import FormStepTypes, { ApiSelectorOptionTypes, ApiSelectorParamTypes, } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';
+import widgetInstance from '../../../Utils/AxiosWidget';
+import axiosInstance from '../../../Utils/AxiosAPI';
+import InputIcon from '../../../Shared/InputIcon/InputIcon';
+import FormContext from '../../../Contexts/FormContext';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+function ApiSelectorComponent({ step, editable, ...others }) {
+    const form = useContext(FormContext);
+    function calcOptionId(option) {
+        return option?.[step.idAttribute] ?? '';
+    }
+    function calcOptionLabel(option) {
+        return option?.[step.labelAttribute] ?? '';
+    }
+    return (_jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { ...others, editable: editable, step: step, icon: step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined, getOptions: getApiOptions, getOptionSelected: (option, value) => calcOptionId(option) === calcOptionId(value), calcDepError: (steps) => {
+                for (const step of steps) {
+                    if (step.type === FormStepTypes.API_SELECTOR) {
+                        return 'Selecciona un ' + step.label;
+                    }
+                }
+                return undefined;
+            }, getValueString: (value) => calcOptionLabel(value), renderNestedSteps: (value) => {
+                if (!value)
+                    return _jsx(_Fragment, {});
+                const currentOption = step.options[calcOptionId(value)];
+                if (currentOption?.type === ApiSelectorOptionTypes.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 ApiSelectorComponent;
+const getApiOptions = async (idOrganization, step, dependencyStore) => {
+    function calcOptionId(option) {
+        return option?.[step.idAttribute] ?? '';
+    }
+    const params = new URLSearchParams({});
+    for (const filter of step.queryParams) {
+        switch (filter.type) {
+            case ApiSelectorParamTypes.STEP: {
+                const currentValue = dependencyStore[filter.idStep]?.value;
+                if (currentValue) {
+                    if (typeof currentValue === 'string')
+                        params.set(filter.key, currentValue);
+                    else
+                        params.set(filter.key, currentValue.label ?? currentValue.id);
+                }
+                else if (filter.required) {
+                    return null;
+                }
+                break;
+            }
+            case ApiSelectorParamTypes.VALUE:
+            default:
+                params.set(filter.key, filter.value);
+                break;
+        }
+    }
+    let url = step.url.replace('capta.co', process.env.REACT_APP_DOMAIN);
+    if (idOrganization && url.includes(process.env.REACT_APP_DOMAIN))
+        params.set('idOrganization', idOrganization);
+    if (!step.url.includes('?'))
+        url += '?';
+    url += params.toString();
+    const response = await (idOrganization
+        ? widgetInstance.get(url)
+        : axiosInstance.get(url));
+    return response.data.filter((option) => calcOptionId(option) &&
+        step.options[calcOptionId(option)]?.type !==
+            ApiSelectorOptionTypes.HIDE);
+};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CBRFormStep } from '../@Types/CBRFormStep';
+import { StepProps } from './Step';
+interface CBRStepProps extends Omit<StepProps, 'step'> {
+    step: CBRFormStep;
+}
+export interface StepOptions {
+    id: string | number;
+    label: string;
+    idMacroProyecto?: number;
+}
+declare function CBRStepMapper(props: CBRStepProps): JSX.Element;
+export default CBRStepMapper;

package/dist/mjs/FormSteps/CBRStepMapper.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CBRFormStepTypes from '../constants/CBRFormStepTypes';
+import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
+import TextInputStep from './TextInputStep/TextInputStep';
+import SmartSelectStep from './SmartSelectStep/SmartSelectStep';
+import TextAreaStep from './TextAreaStep/TextAreaStep';
+import CBRIncidentsStep from './@Construction/CBRIncidentsStep/CBRIncidentsStep';
+import CBRElementStep from './@Construction/CBRElementStep/CBRElementStep';
+import axios from 'axios';
+import CBRPropertyStep from './@Construction/CBRPropertyStep/CBRPropertyStep';
+import InputIcon from '../Shared/InputIcon/InputIcon';
+const baseUrl = `https://integrations.${process.env.REACT_APP_DOMAIN}/sinco/cbr/`;
+function CBRStepMapper(props) {
+    const getTipoDocOptions = async (idOrganization) => {
+        if (!idOrganization)
+            return null;
+        return (await axios.get(baseUrl + 'TiposDoc?idOrganization=' + idOrganization)).data;
+    };
+    const getProyectoOptions = async (idOrganization, step, dependencyStore) => {
+        if (!idOrganization)
+            return null;
+        const idMacroProyecto = dependencyStore[step.dependencies?.[0] ?? '']?.value?.id;
+        let proyectos = (await axios.get(baseUrl + 'Proyectos?idOrganization=' + idOrganization)).data;
+        if (idMacroProyecto) {
+            proyectos = proyectos.filter((proyecto) => proyecto.idMacroProyecto === idMacroProyecto);
+        }
+        return proyectos;
+    };
+    const getMacroProyectoOptions = async (idOrganization) => {
+        if (!idOrganization)
+            return null;
+        return (await axios.get(baseUrl + 'MacroProyectos?idOrganization=' + idOrganization)).data;
+    };
+    const getTipoSolicitanteOptions = async (idOrganization) => {
+        if (!idOrganization)
+            return null;
+        return (await axios.get(baseUrl + 'TiposSolicitante?idOrganization=' + idOrganization)).data;
+    };
+    const getTipoEspaciosOptions = async (idOrganization, step, dependencyStore) => {
+        if (step.dependencies && idOrganization) {
+            const idProyecto = dependencyStore[step.dependencies[0]]?.value?.id;
+            if (!idProyecto) {
+                return null; //null para indicar que falta la depedency
+            }
+            const params = new URLSearchParams({ idProyecto, idOrganization });
+            return (await axios.get(baseUrl + 'TiposEspacio?' + params.toString())).data;
+        }
+        else {
+            return null;
+        }
+    };
+    switch (props.step.type) {
+        case CBRFormStepTypes.CBR_EMAIL:
+            return (_jsx(TextInputStep, { ...props, step: props.step, validation: {
+                    type: 'EMAIL',
+                    value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                        .source,
+                    message: 'El correo no es válido',
+                } }));
+        case CBRFormStepTypes.CBR_CEL:
+        case CBRFormStepTypes.CBR_PHONE:
+            return (_jsx(TextInputStep, { ...props, step: props.step, validation: {
+                    type: 'OTHER',
+                    value: /^(\+[0-9])|([0-9])$/.source,
+                    message: 'El teléfono no es válido',
+                } }));
+        case CBRFormStepTypes.CBR_LAST_NAME:
+        case CBRFormStepTypes.CBR_FIRST_NAME:
+        case CBRFormStepTypes.CBR_MIDDLE_NAME:
+        case CBRFormStepTypes.CBR_SECOND_LAST_NAME:
+            return _jsx(TextInputStep, { ...props, step: props.step });
+        case CBRFormStepTypes.CBR_DOC:
+            return (_jsx(TextInputStep, { ...props, step: props.step, icon: _jsx(DocumentIconComponent, {}) }));
+        case CBRFormStepTypes.CBR_TIPO_DOC:
+            return (_jsx(SmartSelectStep, { ...props, step: { ...props.step, showIcon: false }, getOptions: getTipoDocOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
+        case CBRFormStepTypes.CBR_MACRO_PROYECTO:
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, icon: _jsx(InputIcon, { icon: 'PROJECT' }), getOptions: getMacroProyectoOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
+        case CBRFormStepTypes.CBR_PROYECTO:
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, icon: _jsx(InputIcon, { icon: 'PROJECT' }), getOptions: getProyectoOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
+        case CBRFormStepTypes.CBR_INMUEBLE:
+            return _jsx(CBRPropertyStep, { ...props, step: props.step });
+        case CBRFormStepTypes.CBR_TIPO_SOLICITANTE:
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, icon: _jsx(PersonRoundedIcon, { fill: "#757575", style: {
+                        display: 'flex',
+                        height: 23,
+                        width: 23,
+                        marginRight: 3,
+                        marginTop: 1,
+                    } }), getOptions: getTipoSolicitanteOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
+        case CBRFormStepTypes.CBR_TIPO_ESPACIO:
+            return (_jsx(SmartSelectStep, { ...props, step: props.step, icon: _jsx(InputIcon, { icon: 'SPACE' }), getOptions: getTipoEspaciosOptions, calcDepError: (steps) => {
+                    for (const step of steps) {
+                        if (step.type ===
+                            CBRFormStepTypes.CBR_PROYECTO) {
+                            return 'Selecciona un proyecto';
+                        }
+                    }
+                    return undefined;
+                }, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
+        case CBRFormStepTypes.CBR_LOCATIVAS:
+            return _jsx(CBRElementStep, { ...props, step: props.step });
+        case CBRFormStepTypes.CBR_COMENTARIO:
+            return _jsx(TextAreaStep, { ...props, step: props.step });
+        case CBRFormStepTypes.CBR_INCIDENCIAS:
+            return _jsx(CBRIncidentsStep, { ...props, step: props.step });
+        default:
+            return _jsx("div", {});
+    }
+}
+export default CBRStepMapper;
+function DocumentIconComponent() {
+    return (_jsx("div", { style: {
+            marginRight: 2,
+        }, children: _jsx(InputIcon, { icon: 'DOCUMENT' }) }));
+}

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

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

package/dist/mjs/FormSteps/CheckBoxStep/CheckBoxStep.js

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

package/dist/mjs/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.d.ts

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

package/dist/mjs/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './MaterialCheckBoxStep.module.css';
+import RoundedCheckBox from '../../../Shared/RoundedCheckBox/RoundedCheckBox';
+import React, { useContext } from 'react';
+import StepComponent from '../../Step';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function CheckBoxStep({ step, editable }) {
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? false,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    });
+    const { formStyle, postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const renderNested = () => {
+        const steps = value ? step.steps : step.uncheckedSteps;
+        return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
+                const subStep = form.steps[idStep];
+                return (_jsx(StepComponent, { editable: editable, step: subStep }, idStep));
+            }) }));
+    };
+    return (_jsxs(StepFillerContainer, { step: step, children: [_jsxs(MaterialInputContainer, { step: step, editable: editable, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, children: [step.label && (_jsxs("div", { className: styles.checkboxLbl, children: [step.label, step.required ? ' *' : '', ":"] })), _jsx(RoundedCheckBox, { ...field, inputRef: ref, onChange: onChange, "data-testid": step.id, padding: "0px", size: "1.6rem", error: !!error, cantEdit: !editable || postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.outlineColor, checked: value })] }), (step.description || !!error) && (_jsx("div", { className: styles.descriptionPar, style: {
+                            color: error
+                                ? formStyle.errorColor
+                                : formStyle.descriptionTextColor,
+                        }, children: error ? 'Este campo es obligatorio' : step.description }))] }), renderNested()] }));
+}
+export default CheckBoxStep;

package/dist/mjs/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -0,0 +1,26 @@
+.checkboxLbl {
+    font-size: 18px;
+    margin-right: 10px;
+    margin-left: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.labelCheckBoxContainer {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+    height: 31px;
+}
+
+.descriptionPar {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: 4px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

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

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

package/dist/mjs/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.js

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

package/dist/mjs/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.d.ts

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

package/dist/mjs/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext, useMemo } from 'react';
+import { ClassifierOptionTypes } from '../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+import { useFormStep } from '../../StepHooks';
+import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+import { calcDefaultValue } from '../../StepFunctions';
+function ClassifierSelectorStep({ step, editable, }) {
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
+        sizeChange: true,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const { formStyle, postview, preview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    if (!step.idClassifier)
+        return _jsx("div", {});
+    const classifier = form.classifiers?.[step.idClassifier];
+    if (!classifier)
+        return _jsx("div", {});
+    const options = useMemo(() => {
+        return classifier.children
+            ?.filter((idClassifier) => step.options[idClassifier]?.type !==
+            ClassifierOptionTypes.HIDE &&
+            form.classifiers?.[idClassifier])
+            .map((idClassifier) => {
+            const classifier = form.classifiers?.[idClassifier];
+            return {
+                value: classifier?._id,
+                label: classifier?.clientName?.trim?.() && preview
+                    ? classifier?.clientName
+                    : classifier?.name,
+            };
+        });
+    }, []);
+    const mapNestedOption = () => {
+        if (value) {
+            const currentOption = step.options[value.value];
+            if (currentOption?.type === ClassifierOptionTypes.NESTED) {
+                return (_jsx(React.Fragment, { children: currentOption.steps.map((idStep) => {
+                        const subStep = form.steps[idStep];
+                        return (_jsx(StepComponent, { step: subStep, editable: editable }, idStep));
+                    }) }));
+            }
+        }
+    };
+    return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(RoundedSmartSelect, { ...field, inputRef: ref, value: value, disabled: false, loading: false, options: options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: formStyle.stepBackgroundColor ?? 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: onChange, getOptionSelected: (option, value) => {
+                        return option.value === value?.value;
+                    }, helperText: error?.message?.toString() ?? step.description, error: !!error }) }), mapNestedOption()] }));
+}
+export default ClassifierSelectorStep;

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

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

package/dist/mjs/FormSteps/CollapsibleStep/CollapsibleStep.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../hooks';
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialCollapsibleStep from './MaterialTitleStep/MaterialCollapsibleStep';
+function CollapsibleStep({ step, ...others }) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    if (step.steps.length === 0)
+        return _jsx(_Fragment, {});
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialCollapsibleStep, { step: step, ...others });
+        }
+    }
+}
+export default CollapsibleStep;

package/dist/mjs/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.d.ts

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

package/dist/mjs/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.js

@@ -0,0 +1,53 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext, useEffect } from 'react';
+import styles from './MaterialCollapsibleStep.module.css';
+import { Controller, useFormContext } from 'react-hook-form';
+import StepComponent from '../../Step';
+import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppSelector } from '../../../hooks';
+function Collapsible({ step, open, setOpen, ...others }) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const { formState: { errors }, } = useFormContext();
+    const contentRef = React.useRef(null);
+    useEffect(() => {
+        if (!open && step.dependencies?.find((dep) => !!errors[dep])) {
+            setOpen(true);
+        }
+    }, step.dependencies?.map((dep) => errors[dep]) ?? []);
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: styles.container, style: {
+                    color: formStyle.textColor,
+                    borderColor: formStyle.primaryColor,
+                }, children: [_jsx("div", { className: styles.collapsibleLabel, onClick: () => {
+                            setOpen(!open);
+                        }, children: step.label }), _jsx("div", { className: styles.expand, onClick: () => {
+                            setOpen(!open);
+                        }, children: _jsx("div", { className: styles.expandIcon, children: open ? (_jsx(ExpandLessRoundedIcon, { fontSize: "inherit" })) : (_jsx(ExpandMoreRoundedIcon, { fontSize: "inherit" })) }) })] }), _jsx("div", { className: styles.content, style: {
+                    height: open === 'TRUE'
+                        ? 'auto'
+                        : open
+                            ? contentRef.current?.offsetHeight ?? 'auto'
+                            : 0,
+                }, children: _jsx("div", { className: styles.contentContainer, ref: contentRef, children: step.steps.map((idSubStep) => {
+                        const subStep = form.steps[idSubStep];
+                        return (_createElement(StepComponent, { ...others, step: subStep, key: idSubStep }));
+                    }) }) }), _jsx("div", { className: styles.separator, style: {
+                    backgroundColor: formStyle.primaryColor,
+                } })] }));
+}
+function CollapsibleStep(props) {
+    const { postview } = useAppSelector((state) => state.global);
+    const { clearErrors, formState: { errors }, } = useFormContext();
+    return (_jsx(Controller, { name: props.step.id, defaultValue: props.step.defaultValue ?? postview ? false : true, render: ({ field: { value, onChange } }) => (_jsx(Collapsible, { ...props, open: value, setOpen: (open) => {
+                if (!open) {
+                    const deps = props.step.dependencies?.filter((dep) => !!errors[dep]);
+                    if (deps)
+                        clearErrors(deps);
+                }
+                onChange(open);
+            } })) }));
+}
+export default CollapsibleStep;