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

package/dist/cjs/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PillMapperElement_module_css_1 = __importDefault(require("./PillMapperElement.module.css"));
+const DeleteRounded_1 = __importDefault(require("@material-ui/icons/DeleteRounded"));
+const FormContext_1 = __importDefault(require("../../../../../Contexts/FormContext"));
+const hooks_1 = require("../../../../../hooks");
+function PillMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }) {
+    var _a;
+    const deletable = (_a = step.deletable) !== null && _a !== void 0 ? _a : true;
+    const { size } = (0, react_1.useContext)(FormContext_1.default);
+    const { formStyle, postview } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const widthStats = (0, hooks_1.useAppSelector)((state) => state.widthStats);
+    const { calcName } = customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {};
+    const name = calcName
+        ? calcName(element)
+        : step.unitLabel
+            ? step.unitLabel + ' ' + (num + 1)
+            : '';
+    const renderElement = (renderElementButtons) => {
+        var _a, _b;
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: widthStats.isMobile
+                ? PillMapperElement_module_css_1.default.mobileContainer
+                : PillMapperElement_module_css_1.default.container, style: {
+                pageBreakInside: 'avoid',
+            } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: PillMapperElement_module_css_1.default.contentContainer, style: {
+                    width: (size.blockSize + size.spacingSize) *
+                        ((_b = (_a = step.style) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : size.blockNum - 1),
+                } }, { children: [name && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: PillMapperElement_module_css_1.default.titleLbl, style: { color: formStyle.textColor } }, { children: loading ? 'Cargando...' : name + ':' }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: PillMapperElement_module_css_1.default.btnsContainer }, { children: [renderElementButtons === null || renderElementButtons === void 0 ? void 0 : renderElementButtons(element), (deletable || !element.isOriginal) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: !editable || postview
+                                    ? PillMapperElement_module_css_1.default.disabledDeleteBtn
+                                    : PillMapperElement_module_css_1.default.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
+                                    if (editable && !postview) {
+                                        handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                                    }
+                                } }, { children: (0, jsx_runtime_1.jsx)(DeleteRounded_1.default, { fontSize: "inherit" }) })))] })), children] })) })));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: PillMapperElement_module_css_1.default.containerContainer }, { children: customElementRender
+            ? customElementRender(element, num, renderElement)
+            : renderElement() })));
+}
+exports.default = PillMapperElement;

package/dist/cjs/FormSteps/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -0,0 +1,163 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomMapperStep = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __importStar(require("react"));
+const MaterialMapperStep_module_css_1 = __importDefault(require("./MaterialMapperStep.module.css"));
+const react_hook_form_1 = require("react-hook-form");
+const FormStepTypes_1 = require("../../../constants/FormStepTypes");
+const RoundedButton_1 = __importDefault(require("../../../Shared/RoundedButton/RoundedButton"));
+const MapperElementComponent_1 = __importDefault(require("./Element/MapperElementComponent"));
+const SiteSlice_1 = require("../../../States/SiteSlice");
+const FormContext_1 = __importDefault(require("../../../Contexts/FormContext"));
+const hooks_1 = require("../../../hooks");
+const CustomContext_1 = __importDefault(require("../../../Contexts/CustomContext"));
+const StepHooks_1 = require("../../StepHooks");
+const AppFunctions_1 = require("../../../App/AppFunctions");
+const FormFunctions_1 = require("../../../Form/FormFunctions");
+function MapperComponent(_a) {
+    var { form, step, error, loading, inputRef, editable, customAdd, elements, onChange, handleAddElement } = _a, others = __rest(_a, ["form", "step", "error", "loading", "inputRef", "editable", "customAdd", "elements", "onChange", "handleAddElement"]);
+    const handleDeleteElement = (0, react_2.useCallback)((index) => () => {
+        const tempElements = [...elements];
+        tempElements[index] = Object.assign(Object.assign({}, tempElements[index]), { deleted: true });
+        onChange(tempElements);
+    }, [elements, onChange]);
+    const inputValue = (0, react_2.useMemo)(() => JSON.stringify(elements), [elements]);
+    const { formStyle, postview } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const { container } = (0, react_2.useMemo)(() => {
+        var _a;
+        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+            case FormStepTypes_1.MapperStyleTypes.LIST:
+                return { container: MaterialMapperStep_module_css_1.default.listContainer };
+            case FormStepTypes_1.MapperStyleTypes.PILL:
+            default:
+                return { container: MaterialMapperStep_module_css_1.default.pillContainer };
+        }
+    }, [step]);
+    const mapElements = () => {
+        return ((0, jsx_runtime_1.jsx)(FormContext_1.default.Provider, Object.assign({ value: form }, { children: elements.map((element, index) => ((0, react_1.createElement)(MapperElementComponent_1.default, Object.assign({}, others, { key: element.id, num: index, element: element, step: step, editable: editable, loading: loading, handleDelete: handleDeleteElement(index) })))) })));
+    };
+    if (step.style.type === FormStepTypes_1.MapperStyleTypes.INLINE)
+        return (0, jsx_runtime_1.jsx)(react_2.default.Fragment, { children: mapElements() });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: container, style: { color: formStyle.textColor }, "data-testid": step.id }, { children: [step.label && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialMapperStep_module_css_1.default.titleLbl }, { children: step.label })), step.description && ((0, jsx_runtime_1.jsx)("p", Object.assign({ className: MaterialMapperStep_module_css_1.default.descriptionPar, style: {
+                    margin: step.description
+                        ? '10px 0px'
+                        : '0px 0px 5px 0px',
+                } }, { children: step.description }))), mapElements(), (0, jsx_runtime_1.jsx)("input", { id: step.id, ref: inputRef, className: 'hidden-input', readOnly: true, value: inputValue }), step.creatable !== false &&
+                (!step.max ||
+                    elements.filter((elem) => !elem.deleted).length < step.max) && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialMapperStep_module_css_1.default.btnContainer }, { children: [!customAdd && ((0, jsx_runtime_1.jsx)(RoundedButton_1.default, { disabled: !editable || postview, text: step.addBtnLabel +
+                            (step.required ? ' *' : ''), color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: () => {
+                            if (editable && !postview) {
+                                handleAddElement();
+                            }
+                        } })), customAdd === null || customAdd === void 0 ? void 0 : customAdd(inputRef, !editable || postview, handleAddElement)] }))), !!error &&
+                elements.filter((elem) => !elem.deleted).length === 0 && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialMapperStep_module_css_1.default.errorMsg, style: { color: formStyle.errorColor } }, { children: "Este campo es obligatorio" })))] })));
+}
+function MapperStep(props) {
+    const { step, editable, customAdd } = props;
+    const form = (0, react_2.useContext)(FormContext_1.default);
+    const { postview } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const { customSteps } = (0, react_2.useContext)(CustomContext_1.default);
+    const dispatch = (0, hooks_1.useAppDispatch)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { ref, value, onChange, error } = (0, StepHooks_1.useFormStep)(step, {
+        defaultValue: [],
+        rules: {
+            validate: (array) => !step.required ||
+                (step.required &&
+                    array.filter((elem) => !elem.deleted).length > 0),
+        },
+    });
+    const [localSteps, setLocalSteps] = (0, react_2.useState)((0, FormFunctions_1.calcMapperSubSteps)(step, value, customSteps));
+    //Por alguna razón si se saca esto del componente no se ejecuta el agregar inicial
+    (0, react_2.useEffect)(() => {
+        if (value.length === 0 && !postview && editable && step.creatable) {
+            if (!customAdd)
+                handleAddElement();
+        }
+    }, []);
+    const handleAddElement = (0, react_2.useCallback)((elementValue) => {
+        const { element, steps, mappers } = (0, AppFunctions_1.addMapperStep)(step, customSteps);
+        if (elementValue)
+            element.value = elementValue;
+        for (const [key, elems] of Object.entries(mappers)) {
+            setValue(key, elems);
+        }
+        const newElements = [...value, element];
+        onChange(newElements);
+        setLocalSteps((oldLocalSteps) => (Object.assign(Object.assign({}, oldLocalSteps), steps)));
+        dispatch((0, SiteSlice_1.addStepsDependencies)({
+            steps,
+            customSteps,
+            allSteps: Object.assign(Object.assign({}, form.steps), steps),
+        }));
+    }, [step, form, customSteps, value, onChange]);
+    const subForm = (0, react_2.useMemo)(() => (Object.assign(Object.assign({}, form), { steps: Object.assign(Object.assign({}, form.steps), localSteps) })), [localSteps]);
+    return ((0, jsx_runtime_1.jsx)(MapperComponent, Object.assign({}, props, { error: error, inputRef: ref, onChange: onChange, handleAddElement: handleAddElement, form: subForm, elements: value })));
+}
+function CustomMapperStep(props) {
+    const { step, elements, onChange } = props;
+    const form = (0, react_2.useContext)(FormContext_1.default);
+    const { customSteps } = (0, react_2.useContext)(CustomContext_1.default);
+    const dispatch = (0, hooks_1.useAppDispatch)();
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const [localSteps, setLocalSteps] = (0, react_2.useState)((0, FormFunctions_1.calcMapperSubSteps)(step, elements, customSteps));
+    const handleAddElement = (0, react_2.useCallback)((elementValue) => {
+        const { element, steps, mappers } = (0, AppFunctions_1.addMapperStep)(step, customSteps);
+        if (elementValue)
+            element.value = elementValue;
+        for (const [key, elems] of Object.entries(mappers)) {
+            setValue(key, elems);
+        }
+        const newElements = [...elements, element];
+        onChange(newElements);
+        setLocalSteps((oldLocalSteps) => (Object.assign(Object.assign({}, oldLocalSteps), steps)));
+        dispatch((0, SiteSlice_1.addStepsDependencies)({
+            steps,
+            customSteps,
+            allSteps: Object.assign(Object.assign({}, form.steps), steps),
+        }));
+    }, [step, form, customSteps, elements, onChange]);
+    const subForm = (0, react_2.useMemo)(() => (Object.assign(Object.assign({}, form), { steps: Object.assign(Object.assign({}, form.steps), localSteps) })), [localSteps]);
+    return ((0, jsx_runtime_1.jsx)(MapperComponent, Object.assign({}, props, { form: subForm, elements: elements, onChange: onChange, handleAddElement: handleAddElement })));
+}
+exports.CustomMapperStep = CustomMapperStep;
+exports.default = MapperStep;

package/dist/cjs/FormSteps/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MaterialRatingStep_module_css_1 = __importDefault(require("./MaterialRatingStep.module.css"));
+const react_1 = __importStar(require("react"));
+const Rating_1 = __importDefault(require("../../../Shared/Rating/Rating"));
+const FormStepTypes_1 = require("../../../constants/FormStepTypes");
+const Step_1 = __importDefault(require("../../Step"));
+const FormContext_1 = __importDefault(require("../../../Contexts/FormContext"));
+const hooks_1 = require("../../../hooks");
+const StepHooks_1 = require("../../StepHooks");
+const StepFunctions_1 = require("../../StepFunctions");
+function RatingStep({ step, editable }) {
+    var _a, _b, _c, _d;
+    const { ref, value, onChange, error } = (0, StepHooks_1.useFormStep)(step, {
+        defaultValue: (0, StepFunctions_1.calcDefaultValue)(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const { formStyle, postview } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const form = (0, react_1.useContext)(FormContext_1.default);
+    const widthStats = (0, hooks_1.useAppSelector)((state) => state.widthStats);
+    const renderNestedOption = () => {
+        let currentOption;
+        if (value !== undefined && value !== null && step.nestedSteps) {
+            if (step.ratingType === FormStepTypes_1.RatingTypes.LIKE) {
+                currentOption = step.nestedSteps[value];
+            }
+            else {
+                currentOption = step.nestedSteps[value - 1];
+            }
+            if (currentOption && currentOption.length > 0) {
+                return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: currentOption.map((idSubStep) => {
+                        const subStep = form.steps[idSubStep];
+                        return ((0, jsx_runtime_1.jsx)(Step_1.default, { editable: editable, step: subStep }, idSubStep));
+                    }) }));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: MaterialRatingStep_module_css_1.default.container, style: {
+                    paddingBottom: step.description || step.required ? 0 : 15,
+                } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialRatingStep_module_css_1.default.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialRatingStep_module_css_1.default.ratingContainer }, { children: (0, jsx_runtime_1.jsx)(Rating_1.default, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_a = formStyle.primaryColor) !== null && _a !== void 0 ? _a : '#3d5a7f', unSelectedColor: (_b = formStyle.outlineColor) !== null && _b !== void 0 ? _b : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: ref }) })), (step.description || step.required) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: MaterialRatingStep_module_css_1.default.stepDescriptionLabel, style: {
+                            color: !!error && value === null
+                                ? (_c = formStyle.errorColor) !== null && _c !== void 0 ? _c : '#cc2936'
+                                : (_d = formStyle.descriptionTextColor) !== null && _d !== void 0 ? _d : '#989898',
+                        } }, { children: !!error && value === null
+                            ? error === null || error === void 0 ? void 0 : error.message
+                            : step.description })))] })), renderNestedOption()] }));
+}
+exports.default = RatingStep;

package/dist/cjs/FormSteps/RatingStep/RatingStep.js

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

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

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const FormStepTypes_1 = require("../../../constants/FormStepTypes");
+const Step_1 = __importDefault(require("../../Step"));
+const RoundedSmartSelect_1 = __importDefault(require("../../../Shared/RoundedSmartSelect/RoundedSmartSelect"));
+const FormContext_1 = __importDefault(require("../../../Contexts/FormContext"));
+const hooks_1 = require("../../../hooks");
+const StepHooks_1 = require("../../StepHooks");
+const StepFiller_1 = __importDefault(require("../../Utils/@StepFiller/StepFiller"));
+const MaterialInputContainer_1 = __importDefault(require("../../Utils/MaterialInputContainer/MaterialInputContainer"));
+const StepFunctions_1 = require("../../StepFunctions");
+function SelectorStep({ step, editable }) {
+    var _a, _b, _c;
+    const { ref, value, onChange, error, field } = (0, StepHooks_1.useFormStep)(step, {
+        defaultValue: (0, StepFunctions_1.calcDefaultValue)(step),
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+        sizeChange: true,
+    });
+    const form = (0, react_1.useContext)(FormContext_1.default);
+    const { postview, formStyle } = (0, hooks_1.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 === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value)) {
+                currentOptionIndex = i;
+                currentOption = option;
+            }
+        }
+        if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === FormStepTypes_1.OptionTypes.NESTED &&
+            currentOptionIndex !== null) {
+            return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: currentOption.steps.map((idSubStep) => {
+                    const subStep = form.steps[idSubStep];
+                    return ((0, jsx_runtime_1.jsx)(Step_1.default, { editable: editable, step: subStep }, idSubStep));
+                }) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MaterialInputContainer_1.default, Object.assign({ step: step, editable: editable }, { children: (0, jsx_runtime_1.jsx)(RoundedSmartSelect_1.default, Object.assign({}, field, { value: value, inputRef: ref, handleUpdate: onChange, disabled: false, loading: false, options: step.options, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : '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 === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);
+                    }, helperText: (_c = (_b = error === null || error === void 0 ? void 0 : error.message) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : step.description, error: !!error })) })), value && mapNestedOption()] }));
+}
+function SelectorStepContainer(props) {
+    return ((0, jsx_runtime_1.jsx)(StepFiller_1.default, Object.assign({ step: props.step }, { children: (0, jsx_runtime_1.jsx)(SelectorStep, Object.assign({}, props)) })));
+}
+exports.default = SelectorStepContainer;

package/dist/cjs/FormSteps/SelectorStep/SelectorStep.js

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("../../../hooks");
+const MaterialSeparatorStep_module_css_1 = __importDefault(require("./MaterialSeparatorStep.module.css"));
+function SeparatorStep({ step }) {
+    const { formStyle } = (0, hooks_1.useAppSelector)((state) => state.global);
+    return ((0, jsx_runtime_1.jsx)("div", { className: MaterialSeparatorStep_module_css_1.default.container, style: {
+            backgroundColor: step.transparent
+                ? 'transparent'
+                : formStyle.primaryColor,
+        } }));
+}
+exports.default = SeparatorStep;

package/dist/cjs/FormSteps/SeparatorStep/SeparatorStep.js

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

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

@@ -0,0 +1,139 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const RoundedSmartSelect_1 = __importDefault(require("../../../Shared/RoundedSmartSelect/RoundedSmartSelect"));
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const FormContext_1 = __importDefault(require("../../../Contexts/FormContext"));
+const hooks_1 = require("../../../hooks");
+const SiteSlice_1 = require("../../../States/SiteSlice");
+const StepHooks_1 = require("../../StepHooks");
+const MaterialInputContainer_1 = __importDefault(require("../../Utils/MaterialInputContainer/MaterialInputContainer"));
+function SmartSelectStep({ icon, step, editable, getOptions, calcDepError, defaultValue, valueOverwrite, getValueString, changeListener, getValueWarning, getOptionSelected, renderNestedSteps, }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { ref, value, error, field, onChange: handleChange, } = (0, StepHooks_1.useFormStep)(step, {
+        sizeChange: true,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const onChange = (0, react_1.useCallback)((value) => handleChange(valueOverwrite ? valueOverwrite(value) : value), [handleChange, valueOverwrite]);
+    const { postview, formStyle, idOrganization } = (0, hooks_1.useAppSelector)((state) => state.global);
+    const form = (0, react_1.useContext)(FormContext_1.default);
+    const [options, setOptions] = (0, react_1.useState)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [firstTime, setFirstTime] = (0, react_1.useState)(true);
+    const [touched, setTouched] = (0, react_1.useState)(false);
+    const dispatch = (0, hooks_1.useAppDispatch)();
+    const dependencyStore = (0, hooks_1.useAppSelector)((state) => state.site.dependencies);
+    const { emptyDep, invalids } = (0, hooks_1.useAppSelector)((state) => (0, StepHooks_1.selectDependencies)(state, step, form));
+    const { getValues, setFocus } = (0, react_hook_form_1.useFormContext)();
+    const isEmpty = (0, hooks_1.useAppSelector)((state) => { var _a; return (_a = state.site.dependencies[step.id]) === null || _a === void 0 ? void 0 : _a.empty; });
+    const disabled = emptyDep;
+    (0, react_1.useEffect)(() => {
+        if (!postview && editable) {
+            calcOptions(firstTime);
+            if (firstTime)
+                setFirstTime(false);
+        }
+        else if (value && !step.searchable) {
+            setOptions([value]);
+        }
+    }, (_b = (_a = step.dependencies) === null || _a === void 0 ? void 0 : _a.map((dep) => { var _a; return (_a = dependencyStore[dep]) === null || _a === void 0 ? void 0 : _a.value; })) !== null && _b !== void 0 ? _b : []);
+    const calcOptions = (firstTime) => __awaiter(this, void 0, void 0, function* () {
+        if (!firstTime)
+            setOptions(undefined);
+        if (value && !firstTime)
+            setLoading(true);
+        try {
+            const resp = yield (getOptions === null || getOptions === void 0 ? void 0 : 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 && newValue !== void 0 ? 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((0, SiteSlice_1.setEmptyDependency)({
+                    step,
+                    empty,
+                }));
+            }
+        }
+        catch (error) {
+            console.error(error);
+            setOptions(null);
+        }
+        setLoading(false);
+    });
+    const warning = (0, react_1.useMemo)(() => getValueWarning === null || getValueWarning === void 0 ? void 0 : getValueWarning(value), [value]);
+    const onFocus = (0, react_1.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((0, SiteSlice_1.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 = (0, react_1.useMemo)(() => {
+        if (postview || loading)
+            return undefined;
+        if (invalids.length > 0 && touched) {
+            return calcDepError === null || calcDepError === void 0 ? void 0 : 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 ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(MaterialInputContainer_1.default, Object.assign({ step: step, onClick: onFocus, editable: editable }, { children: (0, jsx_runtime_1.jsx)(RoundedSmartSelect_1.default, Object.assign({}, field, { inputRef: ref, value: value, handleUpdate: onChange, onFocus: onFocus, disabled: options === null || disabled, hidden: disabled, loading: loading, options: options !== null && options !== void 0 ? options : undefined, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_c = formStyle.stepBackgroundColor) !== null && _c !== void 0 ? _c : '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: (_g = (_f = (_d = errorMsg !== null && errorMsg !== void 0 ? errorMsg : warning) !== null && _d !== void 0 ? _d : (_e = error === null || error === void 0 ? void 0 : error.message) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : step.description) !== null && _g !== void 0 ? _g : undefined, error: !!errorMsg || !!warning || !!error })) })), renderNestedSteps === null || renderNestedSteps === void 0 ? void 0 : renderNestedSteps(value)] }));
+}
+exports.default = SmartSelectStep;

package/dist/cjs/FormSteps/SmartSelectStep/SmartSelectStep.js

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