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

package/dist/mjs/FormSteps/RatingStep/RatingStep.js

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

package/dist/mjs/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.d.ts

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

package/dist/mjs/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import { OptionTypes } 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 SelectorStep({ step, editable }) {
+    const { ref, value, onChange, error, field } = useFormStep(step, {
+        defaultValue: calcDefaultValue(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    });
+    const form = useContext(FormContext);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const mapNestedOption = () => {
+        let currentOptionIndex = null;
+        let currentOption = null;
+        for (let i = 0; i < step.options.length; i++) {
+            const option = step.options[i];
+            if (option?.value === value?.value) {
+                currentOptionIndex = i;
+                currentOption = option;
+            }
+        }
+        if (currentOption?.type === OptionTypes.NESTED &&
+            currentOptionIndex !== null) {
+            return (_jsx(React.Fragment, { children: currentOption.steps.map((idSubStep) => {
+                    const subStep = form.steps[idSubStep];
+                    return (_jsx(StepComponent, { editable: editable, step: subStep }, idSubStep));
+                }) }));
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, editable: editable, children: _jsx(RoundedSmartSelect, { ...field, value: value, inputRef: ref, handleUpdate: onChange, disabled: false, loading: false, options: step.options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: formStyle.stepBackgroundColor ?? 'white', label: step.label, 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", getOptionSelected: (option, value) => {
+                        return option?.value === value?.value;
+                    }, helperText: error?.message?.toString() ?? step.description, error: !!error }) }), value && mapNestedOption()] }));
+}
+function SelectorStepContainer(props) {
+    return (_jsx(StepFillerContainer, { step: props.step, children: _jsx(SelectorStep, { ...props }) }));
+}
+export default SelectorStepContainer;

package/dist/mjs/FormSteps/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css

@@ -0,0 +1,9 @@
+.container {
+    width: fit-content;
+    max-width: calc(100% - 20px);
+    display: flex;
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 5px;
+    margin-bottom: 0px;
+}

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

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

package/dist/mjs/FormSteps/SelectorStep/SelectorStep.js

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

package/dist/mjs/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.d.ts

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

package/dist/mjs/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppSelector } from '../../../hooks';
+import styles from './MaterialSeparatorStep.module.css';
+function SeparatorStep({ step }) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    return (_jsx("div", { className: styles.container, style: {
+            backgroundColor: step.transparent
+                ? 'transparent'
+                : formStyle.primaryColor,
+        } }));
+}
+export default SeparatorStep;

package/dist/mjs/FormSteps/SeparatorStep/MaterialSeparatorStep/MaterialSeparatorStep.module.css

@@ -0,0 +1,7 @@
+.container {
+    height: 2px;
+    width: calc(100% - 20px);
+    margin-bottom: 5px;
+    margin-left: 10px;
+    border-radius: 20px;
+}

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

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

package/dist/mjs/FormSteps/SeparatorStep/SeparatorStep.js

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

package/dist/mjs/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SmartSelectStepProps } from '../SmartSelectStep';
+import { GSmartSelect } from '../../../@Types/GenericFormSteps';
+declare function SmartSelectStep<StepType extends GSmartSelect>({ icon, step, editable, getOptions, calcDepError, defaultValue, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, renderNestedSteps, }: SmartSelectStepProps<StepType>): JSX.Element;
+export default SmartSelectStep;

package/dist/mjs/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from 'react-hook-form';
+import RoundedSmartSelect from '../../../Shared/RoundedSmartSelect/RoundedSmartSelect';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React from 'react';
+import FormContext from '../../../Contexts/FormContext';
+import { useAppDispatch, useAppSelector } from '../../../hooks';
+import { focusStep, setEmptyDependency } from '../../../States/SiteSlice';
+import { selectDependencies, useFormStep } from '../../StepHooks';
+import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
+function SmartSelectStep({ icon, step, editable, getOptions, calcDepError, defaultValue, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, renderNestedSteps, }) {
+    const { ref, value, error, field, onChange: handleChange, } = useFormStep(step, {
+        sizeChange: true,
+        defaultValue: defaultValue ?? null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const onChange = useCallback((value) => handleChange(valueOverwrite ? valueOverwrite(value) : value), [handleChange, valueOverwrite]);
+    const { postview, formStyle, idOrganization } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const [options, setOptions] = useState();
+    const [loading, setLoading] = useState(false);
+    const [firstTime, setFirstTime] = useState(true);
+    const [touched, setTouched] = useState(false);
+    const dispatch = useAppDispatch();
+    const dependencyStore = useAppSelector((state) => state.site.dependencies);
+    const { emptyDep, invalids } = useAppSelector((state) => selectDependencies(state, step, form));
+    const { getValues, setFocus } = useFormContext();
+    const isEmpty = useAppSelector((state) => state.site.dependencies[step.id]?.empty);
+    const disabled = emptyDep;
+    useEffect(() => {
+        if (!postview && editable) {
+            calcOptions(firstTime);
+            if (firstTime)
+                setFirstTime(false);
+        }
+        else if (value && !step.searchable) {
+            setOptions([value]);
+        }
+    }, step.dependencies?.map((dep) => dependencyStore[dep]?.value) ?? []);
+    const calcOptions = async (firstTime) => {
+        if (!firstTime)
+            setOptions(undefined);
+        if (value && !firstTime)
+            setLoading(true);
+        try {
+            const resp = await getOptions?.(idOrganization, step, dependencyStore);
+            if (value) {
+                /** If the value is still valid select it */
+                if (resp && getValueString(value) !== undefined) {
+                    const newValue = resp.find((option) => getValueString(option) === getValueString(value));
+                    if (!firstTime)
+                        onChange(newValue ?? null);
+                }
+                else if (!firstTime)
+                    onChange(null);
+            }
+            setOptions(resp);
+            const empty = resp === null ? undefined : resp.length === 0;
+            /** Tell the dependency store this input is empty or not */
+            if (empty !== !!isEmpty) {
+                dispatch(setEmptyDependency({
+                    step,
+                    empty,
+                }));
+            }
+        }
+        catch (error) {
+            console.error(error);
+            setOptions(null);
+        }
+        setLoading(false);
+    };
+    const warning = useMemo(() => getValueWarning?.(value), [value]);
+    const onFocus = useCallback(() => {
+        if (disabled || !editable || postview)
+            return;
+        if (options === null) {
+            if (!value) {
+                if (invalids.length > 0) {
+                    const depStep = form.steps[invalids[0]];
+                    if (form.type === 'STEPPER' &&
+                        step.idSection !== depStep.idSection) {
+                        dispatch(focusStep({
+                            step: form.steps[invalids[0]],
+                            values: getValues(),
+                        }));
+                    }
+                    else {
+                        setFocus(invalids[0]);
+                    }
+                }
+                else if (value === undefined) {
+                    setLoading(true);
+                }
+            }
+        }
+        if (options === undefined) {
+            setLoading(true);
+        }
+        if (!touched)
+            setTouched(true);
+    }, [options, disabled, postview, editable, invalids, touched]);
+    const errorMsg = useMemo(() => {
+        if (postview || loading)
+            return undefined;
+        if (invalids.length > 0 && touched) {
+            return calcDepError?.(invalids.map((idDep) => form.steps[idDep]));
+        }
+        else if (value && options) {
+            const currentOption = options.find((option) => getOptionSelected(option, value));
+            if (!currentOption) {
+                return 'Este campo es obligatorio';
+            }
+        }
+        else if (options === null && invalids.length === 0) {
+            return 'Error al cargar las opciones';
+        }
+        return undefined;
+    }, [invalids, touched, value, options]);
+    return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, onClick: onFocus, editable: editable, children: _jsx(RoundedSmartSelect, { ...field, inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled: options === null || disabled, hidden: disabled, loading: loading, options: options ?? undefined, cantEdit: !editable || postview, fullWidth: true, backgroundColor: formStyle.stepBackgroundColor ?? 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", getOptionSelected: getOptionSelected, getValueString: getValueString, helperText: errorMsg ??
+                        warning ??
+                        error?.message?.toString() ??
+                        step.description ??
+                        undefined, error: !!errorMsg || !!warning || !!error }) }), renderNestedSteps?.(value)] }));
+}
+export default SmartSelectStep;

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { StepProps } from '../Step';
+import { GSmartSelect } from '../../@Types/GenericFormSteps';
+import { FormStep } from '../../@Types/FormStep';
+import { DependencyStore } from '../../Form/Form';
+export interface SmartSelectStepProps<StepType extends GSmartSelect = GSmartSelect> extends Omit<StepProps, 'step'> {
+    /** The SmartSelectStep to display */
+    step: StepType;
+    /** The icon to display */
+    icon?: React.ReactNode;
+    /** Function to call to get the options of the selector, return null if dependency is not met */
+    getOptions: (idOrganization: string | undefined, step: StepType, dependencyStore: DependencyStore) => Promise<any[] | null>;
+    /** Function to determine the currently selected option */
+    getOptionSelected: (option: any, value: any) => boolean;
+    /** Function to determine the current value in string format */
+    getValueString: (value: any | undefined) => string;
+    /** Function to if currently selected option has warning */
+    getValueWarning?: (value: any | undefined) => string | null;
+    /** Function that returns the error message based on the steps of the missing Dependencies, undefined if no error msg */
+    calcDepError?: (steps: FormStep[]) => string | undefined;
+    /** Function that overwrites the value before setting it */
+    valueOverwrite?: (value: any | null) => any;
+    /** Function called on each value change */
+    changeListener?: (value: any) => void;
+    /** default Value to select */
+    defaultValue?: any;
+    /** function called to render nested elements when selected */
+    renderNestedSteps?: (value: any) => JSX.Element;
+}
+declare function SmartSelectStep(props: SmartSelectStepProps): JSX.Element;
+export default SmartSelectStep;

package/dist/mjs/FormSteps/SmartSelectStep/SmartSelectStep.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormStep } from '../@Types/FormStep';
+export interface StepProps {
+    step: FormStep;
+    editable: boolean;
+}
+declare function StepComponent({ step, ...props }: StepProps): JSX.Element;
+export default StepComponent;

package/dist/mjs/FormSteps/Step.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Types from '../constants/FormStepTypes';
+import SelectorStep from './SelectorStep/SelectorStep';
+import SeparatorStep from './SeparatorStep/SeparatorStep';
+import TextInputStep from './TextInputStep/TextInputStep';
+import TitleStep from './TitleStep/TitleStep';
+import ClassifierSelectorStep from './ClassifierSelectorStep/ClassifierSelectorStep';
+import TextAreaStep from './TextAreaStep/TextAreaStep';
+import DatePickerStep from './DatePickerStep/DatePickerStep';
+import FileUploadStep from './FileUploadStep/FileUploadStep';
+import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
+import CBRStepMapper from './CBRStepMapper';
+import RatingStep from './RatingStep/RatingStep';
+import AYFStepMapper from './AYFStepMapper';
+import EntityValuePickerStep from './EntityValueStep/EntityValuePickerStep';
+import MapperStep from './MapperStep/MapperStep';
+import CollapsibleStep from './CollapsibleStep/CollapsibleStep';
+import ApiSelectorStep from './ApiSelectorStep/ApiSelectorStep';
+import CustomStep from './CustomStep';
+import { useAppSelector } from '../hooks';
+import { useContext } from 'react';
+import CustomContext from '../Contexts/CustomContext';
+import { selectOriginalValue } from './StepHooks';
+function StepComponent({ step, ...props }) {
+    if (!step) {
+        console.error('Step not found!', step);
+        return _jsx("div", {});
+    }
+    const { postview, partial } = useAppSelector((state) => state.global);
+    const { customSteps } = useContext(CustomContext);
+    const originalValue = useAppSelector((state) => selectOriginalValue(state, step));
+    const customStep = customSteps[step.type];
+    const editable = props.editable ? step.editable ?? true : false;
+    if ((postview || !editable) &&
+        (partial || step.partial) &&
+        originalValue === undefined) {
+        return _jsx("div", {});
+    }
+    if (customStep) {
+        return (_jsx(CustomStep, { ...props, step: step, editable: editable, customStep: customStep }));
+    }
+    switch (step.type) {
+        case Types.TITLE: {
+            return (_jsx(TitleStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.SELECTOR: {
+            return (_jsx(SelectorStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.CHECKBOX: {
+            return (_jsx(CheckBoxStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.CLASSIFIER_SELECTOR: {
+            return (_jsx(ClassifierSelectorStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.TEXTAREA: {
+            return (_jsx(TextAreaStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.TEXTINPUT: {
+            return (_jsx(TextInputStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.DATEPICKER: {
+            return (_jsx(DatePickerStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.SEPARATOR: {
+            return (_jsx(SeparatorStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.FILEUPLOAD: {
+            return (_jsx(FileUploadStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.RATING: {
+            return (_jsx(RatingStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.COLLAPSIBLE: {
+            return (_jsx(CollapsibleStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.ENTITYVALUEPICKER: {
+            return (_jsx(EntityValuePickerStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.API_SELECTOR: {
+            return (_jsx(ApiSelectorStep, { ...props, step: step, editable: editable }));
+        }
+        case Types.MAPPER: {
+            return (_jsx(MapperStep, { ...props, step: step, editable: editable }));
+        }
+        default:
+            break;
+    }
+    if (step.type.startsWith('CBR')) {
+        return (_jsx(CBRStepMapper, { ...props, step: step, editable: editable }));
+    }
+    else if (step.type.startsWith('AYF')) {
+        return (_jsx(AYFStepMapper, { ...props, step: step, editable: editable }));
+    }
+    return _jsx("div", {});
+}
+export default StepComponent;

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

@@ -0,0 +1,16 @@
+import { FormSize } from '../@Types/Form';
+import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelector, FormStep } from '../@Types/FormStep';
+import { AYFFormStep } from '../@Types/AYFFormStep';
+import { CBRFormStep } from '../@Types/CBRFormStep';
+export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
+export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
+export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
+export declare const calcDefaultValue: (step: FormStep | CBRFormStep) => any;
+export declare const iterateNestedSteps: (idStep: string, steps: Record<string, FormStep>, iteration: (step: FormStep) => void) => void;
+/**
+ * Utility function to calc the substeps of a step
+ * @param step step to calc the substeps
+ * @param idModifier optional modifier for the ids of the substeps and all other properties
+ * @returns list of the ids of the substeps of the step, if modifier returns modified steps
+ */
+export declare const calcSubSteps: (idStep: string, allSteps: Record<string, FormStep | CBRFormStep | AYFFormStep>, idModifier?: ((idSubStep: string) => string) | undefined) => string[];