@arquimedes.co/eureka-forms 1.9.79-test → 1.9.80-test

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.module.css

@@ -0,0 +1,60 @@
+.container,
+.mobileContainer {
+    background-color: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    width: fit-content;
+    border-radius: 20px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    position: relative;
+}
+.container {
+    max-width: calc(100% - 112px);
+    padding-right: 55px;
+    padding-left: 55px;
+}
+
+.mobileContainer {
+    max-width: calc(100% - 42px);
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.titleLbl {
+    width: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.deleteBtn,
+.disabledDeleteBtn {
+    font-size: 24px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+}
+
+.deleteBtn {
+    cursor: pointer;
+}

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillElementContainer/PillElementContainer.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../../../MapperStep';
+import { MapperElementComponentProps } from '../MapperElement';
+declare function PillElementContainer<Type = any>({ step, form, num, element, children, editable, postview, formStyle, handleDelete, widthStats, customElementModifiers, }: MapperStepProps & MapperElementComponentProps<Type> & {
+    num: number;
+    formStyle: {
+        textColor: string;
+    };
+    handleDelete?: Function;
+    /** children to render */
+    children?: any;
+}): JSX.Element;
+export default PillElementContainer;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillElementContainer/PillElementContainer.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styles from './PillElementContainer.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+function PillElementContainer(_a) {
+    var _b, _c;
+    var step = _a.step, form = _a.form, num = _a.num, element = _a.element, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats, customElementModifiers = _a.customElementModifiers;
+    var size = form.size;
+    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
+    return (_jsx("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                width: (size.blockSize + size.spacingSize) *
+                    ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
+            } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [calcName
+                            ? calcName(element)
+                            : step.unitLabel + ' ' + (num + 1), ":"] })), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
+                        ? styles.disabledDeleteBtn
+                        : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                        if (editable && !postview) {
+                            handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                        }
+                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) }))), children] })) })));
+}
+export default PillElementContainer;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillElementContainer/PillElementContainer.module.css

@@ -0,0 +1,60 @@
+.container,
+.mobileContainer {
+    background-color: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    width: fit-content;
+    border-radius: 20px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    position: relative;
+}
+.container {
+    max-width: calc(100% - 112px);
+    padding-right: 55px;
+    padding-left: 55px;
+}
+
+.mobileContainer {
+    max-width: calc(100% - 42px);
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.titleLbl {
+    width: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.deleteBtn,
+.disabledDeleteBtn {
+    font-size: 24px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+}
+
+.deleteBtn {
+    cursor: pointer;
+}

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../MapperStep';
+export interface MapperElement<Type> {
+    ids: Record<string, string>;
+    id: string;
+    deleted?: boolean;
+    value?: Type;
+}
+export declare function ElementsComponent<Type = any>({ step, form, inputRef, editable, postview, elements, formStyle, customAdd, dependencyStore, setDependencyStore, ...others }: MapperStepProps & {
+    onChange: (elements: MapperElement<Type>[]) => void;
+    elements: MapperElement<Type>[];
+    inputRef: any;
+}): JSX.Element;
+declare function MapperStep(props: MapperStepProps): JSX.Element;
+export default MapperStep;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -0,0 +1,275 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, cloneElement } from 'react';
+import styles from './MaterialMapperStep.module.css';
+import { Controller } from 'react-hook-form';
+import StepTypes, { ClassifierOptionTypes, EntityValueOptionTypes, MapperStyleTypes, OptionTypes, } from '../../../../constants/FormStepTypes';
+import RoundedButton from '../../../../shared/RoundedButton/RoundedButton';
+import { nanoid } from 'nanoid';
+import { calcStepDependencyValue } from '../../../Form/ColumnForm/ColumnForm';
+import MapperElementComponent from './Element/MapperElement';
+import AYFFormStepTypes from '../../../../constants/AYFFormStepTypes';
+import CBRFormStepTypes from '../../../../constants/CBRFormStepTypes';
+export function ElementsComponent(_a) {
+    var _b, _c;
+    var step = _a.step, form = _a.form, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, elements = _a.elements, formStyle = _a.formStyle, customAdd = _a.customAdd, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "inputRef", "editable", "postview", "elements", "formStyle", "customAdd", "dependencyStore", "setDependencyStore"]);
+    var _d = useState(true), firstRender = _d[0], setFirstRender = _d[1];
+    /** Mapper Steps to pass down */
+    var _e = useState(), localSteps = _e[0], setLocalSteps = _e[1];
+    var onChange = function (elements) {
+        var _a;
+        var _b;
+        if (dependencyStore[step.id] !== undefined && customAdd) {
+            setDependencyStore(__assign(__assign({}, dependencyStore), (_a = {}, _a[step.id] = (_b = elements.map(function (element) { return element.value; })) !== null && _b !== void 0 ? _b : null, _a)));
+        }
+        others.onChange(elements);
+    };
+    useEffect(function () {
+        var _a;
+        if (firstRender) {
+            if (elements.length > 0) {
+                var newSteps = {};
+                var deps = __assign({}, dependencyStore);
+                for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
+                    var element = elements_1[_i];
+                    var elemSteps = {};
+                    for (var _b = 0, _c = Object.keys(step.steps); _b < _c.length; _b++) {
+                        var idStep = _c[_b];
+                        var baseStep = JSON.parse(JSON.stringify((_a = step.steps[idStep]) !== null && _a !== void 0 ? _a : '{}'));
+                        var newIdStep = element.ids[idStep];
+                        baseStep.id = newIdStep;
+                        elemSteps[newIdStep] = baseStep;
+                        newSteps[newIdStep] = baseStep;
+                    }
+                    calcRecursiveData(element, elemSteps, deps, others.customSteps, others.originalValues);
+                }
+                setDependencyStore(deps);
+                setLocalSteps(__assign(__assign({}, localSteps), newSteps));
+            }
+            else if (elements.length === 0 && !postview && editable) {
+                handleAddElement();
+            }
+            setFirstRender(false);
+        }
+        else {
+            onChange([]);
+        }
+    }, __spreadArray([], ((_c = (_b = step.dependencies) === null || _b === void 0 ? void 0 : _b.map(function (dep) { return dependencyStore[dep]; })) !== null && _c !== void 0 ? _c : []), true));
+    var handleAddElement = function (value) {
+        var idElement = nanoid();
+        var newElement = {
+            ids: {},
+            id: idElement,
+            value: value,
+        };
+        var newSteps = {};
+        for (var _i = 0, _a = Object.keys(step.steps); _i < _a.length; _i++) {
+            var idStep = _a[_i];
+            var baseStep = JSON.parse(JSON.stringify(step.steps[idStep]));
+            var newIdStep = step.id + '-' + idStep + '-' + idElement;
+            baseStep.id = newIdStep;
+            newElement.ids[idStep] = newIdStep;
+            newSteps[newIdStep] = baseStep;
+        }
+        var deps = __assign({}, dependencyStore);
+        calcRecursiveData(newElement, newSteps, others.customSteps, deps);
+        onChange(__spreadArray(__spreadArray([], elements, true), [newElement], false));
+        setLocalSteps(__assign(__assign({}, localSteps), newSteps));
+        setDependencyStore(deps);
+    };
+    var calcStyles = function () {
+        var _a;
+        switch ((_a = step.style) === null || _a === void 0 ? void 0 : _a.type) {
+            case MapperStyleTypes.LIST:
+                return { container: styles.listContainer };
+            case MapperStyleTypes.PILL:
+            default:
+                return { container: styles.pillContainer };
+        }
+    };
+    var container = calcStyles().container;
+    if (!localSteps)
+        return _jsx("div", {});
+    return (_jsxs("div", __assign({ className: container, style: { color: formStyle.textColor } }, { children: [_jsx("div", __assign({ className: styles.titleLbl }, { children: step.label })), step.description && (_jsx("p", __assign({ className: styles.descriptionPar, style: {
+                    margin: step.description
+                        ? '10px 0px'
+                        : '0px 0px 5px 0px',
+                } }, { children: step.description }))), elements.map(function (element, index) { return (_jsx(MapperElementComponent, __assign({ num: index, element: element, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
+                    var tempElements = __spreadArray([], elements, true);
+                    tempElements[index].deleted = true;
+                    onChange(tempElements);
+                } }, others), element.id)); }), _jsxs("div", __assign({ className: styles.btnContainer }, { children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput }), step.creatable !== false && !customAdd && (_jsx(RoundedButton, { disabled: !editable || postview, text: step.addBtnLabel, color: formStyle.primaryContrastColor, backgroundColor: formStyle.primaryColor, fontSize: '1rem', padding: '5px 15px 5px 15px', onClick: function () {
+                            if (editable && !postview) {
+                                handleAddElement();
+                            }
+                        } })), step.creatable !== false &&
+                        customAdd &&
+                        cloneElement(customAdd, {
+                            inputRef: inputRef,
+                            disabled: !editable || postview,
+                            handleAddElement: handleAddElement,
+                        })] }))] })));
+}
+function MapperStep(props) {
+    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: [], rules: {
+            required: props.step.required
+                ? 'Este campo es obligatorio'
+                : undefined,
+        }, shouldUnregister: true, render: function (_a) {
+            var _b = _a.field, ref = _b.ref, value = _b.value, field = __rest(_b, ["ref", "value"]);
+            return (_jsx(ElementsComponent, __assign({}, props, field, { elements: value, inputRef: ref })));
+        } }));
+}
+export default MapperStep;
+function calcRecursiveData(element, newSteps, deps, customSteps, originalValues) {
+    if (originalValues === void 0) { originalValues = {}; }
+    for (var _i = 0, _a = Object.keys(newSteps); _i < _a.length; _i++) {
+        var idStep = _a[_i];
+        var step = newSteps[idStep];
+        if (step.dependencies) {
+            for (var i = 0; i < step.dependencies.length; i++) {
+                var idDep = step.dependencies[i];
+                var newId = element.ids[idDep];
+                if (newId) {
+                    step.dependencies[i] = newId;
+                    deps[newId] = calcStepDependencyValue(newSteps[newId], originalValues);
+                }
+            }
+        }
+        var custom = customSteps[step === null || step === void 0 ? void 0 : step.type];
+        if (custom === null || custom === void 0 ? void 0 : custom.calcRecursiveData) {
+            custom.calcRecursiveData(step, element.ids);
+        }
+        switch (step.type) {
+            case StepTypes.SELECTOR: {
+                for (var _b = 0, _c = step.options; _b < _c.length; _b++) {
+                    var option = _c[_b];
+                    if (option.type === OptionTypes.NESTED) {
+                        for (var i = 0; i < option.steps.length; i++) {
+                            var idStep_1 = option.steps[i];
+                            var newId = element.ids[idStep_1];
+                            option.steps[i] = newId;
+                        }
+                    }
+                }
+                break;
+            }
+            case StepTypes.CLASSIFIER_SELECTOR:
+                for (var _d = 0, _e = Object.keys(step.options); _d < _e.length; _d++) {
+                    var idOption = _e[_d];
+                    var option = step.options[idOption];
+                    if (option.type === ClassifierOptionTypes.NESTED) {
+                        for (var i = 0; i < option.steps.length; i++) {
+                            var idStep_2 = option.steps[i];
+                            var newId = element.ids[idStep_2];
+                            option.steps[i] = newId;
+                        }
+                    }
+                }
+                break;
+            case StepTypes.RATING:
+                if (step.nestedSteps) {
+                    for (var _f = 0, _g = step.nestedSteps; _f < _g.length; _f++) {
+                        var steps = _g[_f];
+                        for (var i = 0; i < steps.length; i++) {
+                            var idStep_3 = steps[i];
+                            var newId = element.ids[idStep_3];
+                            steps[i] = newId;
+                        }
+                    }
+                }
+                break;
+            case StepTypes.COLLAPSIBLE: {
+                for (var i = 0; i < step.steps.length; i++) {
+                    var idStep_4 = step.steps[i];
+                    var newId = element.ids[idStep_4];
+                    step.steps[i] = newId;
+                }
+                break;
+            }
+            case StepTypes.CHECKBOX: {
+                if (step.steps) {
+                    for (var i = 0; i < step.steps.length; i++) {
+                        var idStep_5 = step.steps[i];
+                        var newId = element.ids[idStep_5];
+                        step.steps[i] = newId;
+                    }
+                }
+                break;
+            }
+            case StepTypes.ENTITYVALUEPICKER:
+                for (var _h = 0, _j = step.filters; _h < _j.length; _h++) {
+                    var filter = _j[_h];
+                    if (filter.idStep) {
+                        var newId = element.ids[filter.idStep];
+                        if (newId) {
+                            filter.idStep = newId;
+                            deps[newId] = calcStepDependencyValue(newSteps[newId], originalValues);
+                        }
+                    }
+                }
+                for (var _k = 0, _l = Object.keys(step.options); _k < _l.length; _k++) {
+                    var idOption = _l[_k];
+                    var option = step.options[idOption];
+                    if (option.type === EntityValueOptionTypes.NESTED) {
+                        for (var i = 0; i < option.steps.length; i++) {
+                            var idStep_6 = option.steps[i];
+                            var newId = element.ids[idStep_6];
+                            option.steps[i] = newId;
+                        }
+                    }
+                }
+                break;
+            case CBRFormStepTypes.CBR_LOCATIVAS:
+                var elementStep = step;
+                if (elementStep.subStep) {
+                    var newId = element.ids[elementStep.subStep];
+                    if (newId) {
+                        elementStep.subStep = newId;
+                    }
+                }
+                break;
+            case AYFFormStepTypes.AYF_ICA_CITY:
+                var cityStep = step;
+                if (cityStep.idNitStep) {
+                    var newId = element.ids[cityStep.idNitStep];
+                    if (newId) {
+                        cityStep.idNitStep = newId;
+                    }
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.module.css

@@ -0,0 +1,42 @@
+.pillContainer {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 20px);
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+}
+
+.listContainer {
+    display: flex;
+    flex-direction: column;
+    padding: 5px 0px;
+}
+
+.hiddenInput {
+    height: 0;
+    width: 0;
+    padding: 0;
+    border-width: 0;
+}
+
+.titleLbl {
+    font-size: 24px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+}
+
+.descriptionPar {
+    font-size: 16px;
+    white-space: pre-wrap;
+    cursor: default;
+}
+
+.btnContainer {
+    margin-top: 15px;
+    margin-left: 15px;
+    margin-bottom: 3px;
+    width: fit-content;
+}

package/dist/FormComponents/Step/RatingStep/MaterialRatingStep/MaterialRatingStep.d.ts

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

package/dist/FormComponents/Step/RatingStep/MaterialRatingStep/MaterialRatingStep.js

@@ -0,0 +1,71 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import styles from './MaterialRatingStep.module.css';
+import { Controller } from 'react-hook-form';
+import React from 'react';
+import Rating from '../../../../shared/Rating/Rating';
+import { RatingTypes } from '../../../../constants/FormStepTypes';
+import StepComponent from '../../Step';
+function MaterialRatingStep(_a) {
+    var _b, _c, _d, _e, _f;
+    var form = _a.form, step = _a.step, value = _a.value, level = _a.level, errors = _a.errors, onChange = _a.onChange, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, others = __rest(_a, ["form", "step", "value", "level", "errors", "onChange", "inputRef", "editable", "postview", "formStyle", "widthStats"]);
+    var renderNestedOption = function () {
+        var currentOption;
+        if (value !== undefined && value !== null && step.nestedSteps) {
+            if (step.ratingType === RatingTypes.LIKE) {
+                currentOption = step.nestedSteps[value];
+            }
+            else {
+                currentOption = step.nestedSteps[value - 1];
+            }
+            if (currentOption && currentOption.length > 0) {
+                return (_jsx(React.Fragment, { children: currentOption.map(function (idSubStep) {
+                        var subStep = form.steps[idSubStep];
+                        return (_createElement(StepComponent, __assign({}, others, { form: form, postview: postview, editable: editable, formStyle: formStyle, errors: errors, widthStats: widthStats, step: subStep, key: idSubStep, level: level + 1 })));
+                    }) }));
+            }
+        }
+    };
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: styles.container, style: {
+                    paddingBottom: step.description || step.required ? 0 : 15,
+                } }, { children: [_jsx("div", __assign({ className: styles.labelLabel }, { children: step.label + (step.required ? ' *' : '') })), _jsx("div", __assign({ className: styles.ratingContainer }, { children: _jsx(Rating, { name: step.id, type: step.ratingType, isMobile: widthStats.isMobile, focusColor: (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f', unSelectedColor: (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8', disabled: !editable || postview, value: value, onChange: onChange, inputRef: inputRef }) })), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
+                            color: !!errors[step.id] && value === null
+                                ? (_d = formStyle.errorColor) !== null && _d !== void 0 ? _d : '#cc2936'
+                                : (_e = formStyle.descriptionTextColor) !== null && _e !== void 0 ? _e : '#989898',
+                        } }, { children: !!errors[step.id] && value === null
+                            ? (_f = errors[step.id]) === null || _f === void 0 ? void 0 : _f.message
+                            : step.description })))] })), renderNestedOption()] }));
+}
+function RatingStep(props) {
+    return (_jsx(Controller, { name: props.step.id, control: props.control, defaultValue: null, rules: {
+            required: props.step.required
+                ? 'Este campo es obligatorio'
+                : undefined,
+        }, shouldUnregister: true, render: function (_a) {
+            var _b = _a.field, ref = _b.ref, field = __rest(_b, ["ref"]);
+            return (_jsx(MaterialRatingStep, __assign({}, props, field, { inputRef: ref })));
+        } }));
+}
+export default RatingStep;

package/dist/FormComponents/Step/RatingStep/MaterialRatingStep/MaterialRatingStep.module.css

@@ -0,0 +1,30 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: calc(100% - 20px);
+    padding: 5px 10px;
+    padding-bottom: 15px;
+}
+.labelLabel {
+    font-size: 16px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+.ratingContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.stepDescriptionLabel {
+    font-size: 0.75rem;
+    margin-top: 5px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    min-height: 20px;
+}

package/dist/FormComponents/Step/RatingStep/RatingStep.d.ts

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

package/dist/FormComponents/Step/RatingStep/RatingStep.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../../constants/FormStepTypes';
+import MaterialRatingStep from './MaterialRatingStep/MaterialRatingStep';
+function RatingStep(props) {
+    switch (props.formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialRatingStep, __assign({}, props));
+        }
+    }
+}
+export default RatingStep;

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.d.ts

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