@arquimedes.co/eureka-forms 1.6.0-test → 1.6.2-test

package/dist/@Types/Form.d.ts

@@ -60,7 +60,7 @@ export interface MaterialStyle {
     descriptionTextColor: string;
 }
 export interface Section {
-    _id: string;
+    id: string;
     name: string;
     title?: string;
     steps: string[];

package/dist/@Types/FormStep.d.ts

@@ -1,6 +1,6 @@
-import Types, { ClassifierOptionTypes, OptionTypes } from '../constants/FormStepTypes';
+import Types, { ClassifierOptionTypes, OptionTypes, RatingTypes } from '../constants/FormStepTypes';
 import * as GSteps from './GenericFormSteps';
-export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
+export declare type FormStep = Title | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
 export interface Title extends GSteps.GBaseStep {
     type: Types.TITLE;
     title: string;
@@ -9,6 +9,13 @@ export interface Title extends GSteps.GBaseStep {
 export interface CheckBox extends GSteps.GCheckBox {
     type: Types.CHECKBOX;
 }
+export interface Rating extends GSteps.GBaseStep {
+    type: Types.RATING;
+    label: string;
+    description: string;
+    required: boolean;
+    ratingType: RatingTypes;
+}
 export interface FileUpload extends GSteps.GBaseStep {
     type: Types.FILEUPLOAD;
     label: string;
@@ -33,6 +40,7 @@ export interface FormSelector extends GSteps.GBaseStep {
     label: string;
     description: string;
     required: boolean;
+    searchable: boolean;
     options: FormSelectorOption[];
     size: 1 | 2 | 3 | 4;
     maxSize: number;
@@ -60,6 +68,7 @@ export interface ClassifierSelector extends GSteps.GBaseStep {
     idClassifier: string | null;
     label: string;
     description: string;
+    searchable: boolean;
     options: Record<string, FormClassifierSelectorOption>;
     required: boolean;
     size: 1 | 2 | 3 | 4;

package/dist/App.js

@@ -109,7 +109,7 @@ function App(_a) {
             loadInfo(apiKey, domain);
         }
         else if (isWidget && apiKey && domain) {
-            //Is iframe
+            //Is widget
             loadOrgInfo(domain);
             loadInfo(apiKey, domain);
         }

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -24,12 +24,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { ClassifierOptionTypes } from '../../../../constants/FormStepTypes';
-import RoundedSelect from '../../../../shared/RoundedSelect/RoundedSelect';
-import { MenuItem } from '@material-ui/core';
 import styles from './MaterialClassifierSelectorStep.module.css';
 import StepComponent from '../../Step';
 import { Controller } from 'react-hook-form';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
+import RoundedSmartSelect from '../../../../shared/RoundedSmartSelect/RoundedSmartSelect';
 function ClassifierSelector(_a) {
     var step = _a.step, form = _a.form, level = _a.level, errors = _a.errors, value = _a.value, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, inputRef = _a.inputRef, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, others = __rest(_a, ["step", "form", "level", "errors", "value", "onBlur", "control", "editable", "onChange", "postview", "inputRef", "formStyle", "getValues", "widthStats", "handleSizeChange"]);
     var _b = useState(level === 0
@@ -42,6 +41,21 @@ function ClassifierSelector(_a) {
     if (!classifier) {
         return _jsx("div", {}, void 0);
     }
+    var options = classifier.children
+        .filter(function (classifier) {
+        var _a;
+        return ((_a = step.options[classifier._id]) === null || _a === void 0 ? void 0 : _a.type) !==
+            ClassifierOptionTypes.HIDE;
+    })
+        .map(function (classifier) {
+        var _a;
+        return typeof classifier === 'string'
+            ? {
+                value: classifier,
+                label: (_a = form.classifiers[classifier]) === null || _a === void 0 ? void 0 : _a.name,
+            }
+            : { value: classifier._id, label: classifier.name };
+    });
     var sizeChange = function () {
         handleSizeChange();
         if (level === 0) {
@@ -49,30 +63,24 @@ function ClassifierSelector(_a) {
         }
     };
     var renderSelect = function () {
+        var _a;
         return (_jsx("div", __assign({ className: styles.container, style: {
                 width: widthStats.currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: !editable || postview, helperTextColor: formStyle.descriptionTextColor, errorColor: formStyle.errorColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, label: step.label ? step.label : classifier.name, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
-                    onChange(event.target.value);
+            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, iconComponent: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
+                    onChange(value);
                     sizeChange();
-                }, "data-testid": step.id, inputRef: inputRef, helperText: errors[step.id]
+                }, getOptionSelected: function (option, value) {
+                    return option.value === (value === null || value === void 0 ? void 0 : value.value);
+                }, helperText: errors[step.id]
                     ? errors[step.id].message
-                    : step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
-                        .filter(function (classifier) {
-                        var _a;
-                        return ((_a = step.options[classifier._id]) === null || _a === void 0 ? void 0 : _a.type) !==
-                            ClassifierOptionTypes.HIDE;
-                    })
-                        .map(function (classifier) {
-                        var _a;
-                        return typeof classifier === 'string' ? (_jsx(MenuItem, __assign({ value: classifier, style: { whiteSpace: 'normal' } }, { children: (_a = form.classifiers[classifier]) === null || _a === void 0 ? void 0 : _a.name }), classifier)) : (_jsx(MenuItem, __assign({ value: classifier._id, style: { whiteSpace: 'normal' } }, { children: classifier.name }), classifier._id));
-                    })] }), void 0) }), step.id));
+                    : step.description, error: !!errors[step.id] }, void 0) }), step.id));
     };
     var mapNestedOption = function () {
         if (value) {
-            var currentOption = step.options[value];
+            var currentOption = step.options[step.searchable ? value.value : value];
             if ((currentOption === null || currentOption === void 0 ? void 0 : currentOption.type) === ClassifierOptionTypes.NESTED) {
                 return (_jsx(React.Fragment, { children: currentOption.steps.map(function (idStep, index) {
                         var subStep = form.steps[idStep];

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

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

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

@@ -0,0 +1,65 @@
+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 styles from './MaterialRatingStep.module.css';
+import { RatingTypes } from '../../../../constants/FormStepTypes';
+import LikeRating from './Ratings/LikeRating';
+import ScaleRating from './Ratings/ScaleRating';
+import SatisfactionRating from './Ratings/SatisfactionRating';
+import { Controller } from 'react-hook-form';
+import React from 'react';
+function MaterialRatingStep(_a) {
+    var step = _a.step, errors = _a.errors, others = __rest(_a, ["step", "errors"]);
+    var mapRating = function (field) {
+        switch (step.ratingType) {
+            case RatingTypes.LIKE:
+                return (_jsx(LikeRating, __assign({ step: step, errors: errors }, others, { inputRef: field.ref, value: field.value, onChange: field.onChange }), void 0));
+            case RatingTypes.SATISFACTION:
+                return (_jsx(SatisfactionRating, __assign({ step: step, errors: errors }, others, { inputRef: field.ref, value: field.value, onChange: field.onChange }), void 0));
+            case RatingTypes.SCALE:
+                return (_jsx(ScaleRating, __assign({ step: step, errors: errors }, others, { inputRef: field.ref, value: field.value, onChange: field.onChange }), void 0));
+            default:
+                return _jsx("div", {}, void 0);
+        }
+    };
+    return (_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 ? ' *' : '') }), void 0), _jsx(Controller, { name: step.id, control: others.control, defaultValue: 1, rules: {
+                    required: step.required
+                        ? 'Este campo es obligatorio'
+                        : undefined,
+                }, shouldUnregister: true, render: function (_a) {
+                    var _b, _c, _d;
+                    var field = _a.field;
+                    return (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.ratingContainer }, { children: mapRating(field) }), void 0), (step.description || step.required) && (_jsx("div", __assign({ className: styles.stepDescriptionLabel, style: {
+                                    color: !!errors[step.id] &&
+                                        field.value === null
+                                        ? (_b = others.formStyle.errorColor) !== null && _b !== void 0 ? _b : '#cc2936'
+                                        : (_c = others.formStyle
+                                            .descriptionTextColor) !== null && _c !== void 0 ? _c : '#989898',
+                                } }, { children: !!errors[step.id] && field.value === null
+                                    ? (_d = errors[step.id]) === null || _d === void 0 ? void 0 : _d.message
+                                    : step.description }), void 0))] }, void 0));
+                } }, void 0)] }), void 0));
+}
+export default MaterialRatingStep;

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

@@ -0,0 +1,55 @@
+.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;
+}
+.disabledSentimentContainer,
+.sentimentContainer {
+    font-size: 60px;
+    height: 60px;
+    color: var(--eureka-outline);
+}
+.disabledLikeContainer,
+.likeContainer {
+    font-size: 60px;
+    height: 75px;
+    color: var(--eureka-outline);
+}
+
+.likeContainer:hover,
+.sentimentContainer:hover {
+    transform: scale(1.2);
+    cursor: pointer;
+    color: var(--eureka-primary);
+}
+.hiddenInput {
+    height: 0;
+    width: 0;
+    padding: 0;
+    border-width: 0;
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RatingStepProps } from '../../RatingStep';
+declare function LikeRating({ value, inputRef, editable, postview, onChange, formStyle, }: RatingStepProps & {
+    value: any;
+    onChange: Function;
+    inputRef: any;
+}): JSX.Element;
+export default LikeRating;

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

@@ -0,0 +1,45 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import ThumbDownRoundedIcon from '@material-ui/icons/ThumbDownRounded';
+import ThumbUpRoundedIcon from '@material-ui/icons/ThumbUpRounded';
+import styles from '../MaterialRatingStep.module.css';
+function LikeRating(_a) {
+    var _b, _c, _d, _e;
+    var value = _a.value, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, onChange = _a.onChange, formStyle = _a.formStyle;
+    var cantEdit = !editable || postview;
+    return (_jsxs("div", __assign({ className: styles.ratingContainer, style: {
+            '--eureka-primary': (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f',
+            '--eureka-outline': (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8',
+        } }, { children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput }, void 0), _jsx("div", __assign({ className: cantEdit
+                    ? styles.disabledLikeContainer
+                    : styles.likeContainer, onClick: function () {
+                    if (!cantEdit)
+                        onChange(value === 1 ? null : 1);
+                } }, { children: _jsx(ThumbUpRoundedIcon, { fontSize: "inherit", style: value === 1
+                        ? {
+                            color: (_d = formStyle.primaryColor) !== null && _d !== void 0 ? _d : '#3d5a7f',
+                        }
+                        : {} }, void 0) }), void 0), _jsx("div", __assign({ className: cantEdit
+                    ? styles.disabledLikeContainer
+                    : styles.likeContainer, onClick: function () {
+                    if (!cantEdit)
+                        onChange(value === 0 ? null : 0);
+                } }, { children: _jsx(ThumbDownRoundedIcon, { fontSize: "inherit", style: value === 0
+                        ? {
+                            color: (_e = formStyle.primaryColor) !== null && _e !== void 0 ? _e : '#3d5a7f',
+                            marginTop: 14,
+                            marginLeft: 15,
+                        }
+                        : { marginTop: 14, marginLeft: 15 } }, void 0) }), void 0)] }), void 0));
+}
+export default LikeRating;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RatingStepProps } from '../../RatingStep';
+declare function SatisfactionRating({ value, inputRef, editable, postview, onChange, formStyle, }: RatingStepProps & {
+    value: any;
+    onChange: Function;
+    inputRef: any;
+}): JSX.Element;
+export default SatisfactionRating;

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

@@ -0,0 +1,63 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from '../MaterialRatingStep.module.css';
+import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
+import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
+import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
+import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
+function SatisfactionRating(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var value = _a.value, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, onChange = _a.onChange, formStyle = _a.formStyle;
+    var cantEdit = !editable || postview;
+    return (_jsxs("div", __assign({ className: styles.ratingContainer, style: {
+            '--eureka-primary': (_b = formStyle.primaryColor) !== null && _b !== void 0 ? _b : '#3d5a7f',
+            '--eureka-outline': (_c = formStyle.outlineColor) !== null && _c !== void 0 ? _c : '#b8b8b8',
+        } }, { children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput }, void 0), _jsx("div", __assign({ className: cantEdit
+                    ? styles.disabledSentimentContainer
+                    : styles.sentimentContainer, onClick: function () {
+                    if (!cantEdit)
+                        onChange(value === 1 ? null : 1);
+                } }, { children: _jsx(SentimentVeryDissatisfiedIcon, { fontSize: "inherit", style: value === 1
+                        ? {
+                            color: (_d = formStyle.primaryColor) !== null && _d !== void 0 ? _d : '#3d5a7f',
+                        }
+                        : {} }, void 0) }), void 0), _jsx("div", __assign({ className: cantEdit
+                    ? styles.disabledSentimentContainer
+                    : styles.sentimentContainer, onClick: function () {
+                    if (!cantEdit)
+                        onChange(value === 2 ? null : 2);
+                } }, { children: _jsx(SentimentDissatisfiedIcon, { fontSize: "inherit", style: value === 2
+                        ? {
+                            color: (_e = formStyle.primaryColor) !== null && _e !== void 0 ? _e : '#3d5a7f',
+                        }
+                        : {} }, void 0) }), void 0), _jsx("div", __assign({ className: cantEdit
+                    ? styles.disabledSentimentContainer
+                    : styles.sentimentContainer, onClick: function () {
+                    if (!cantEdit)
+                        onChange(value === 3 ? null : 3);
+                } }, { children: _jsx(SentimentSatisfiedAltIcon, { fontSize: "inherit", style: value === 3
+                        ? {
+                            color: (_f = formStyle.primaryColor) !== null && _f !== void 0 ? _f : '#3d5a7f',
+                        }
+                        : {} }, void 0) }), void 0), _jsx("div", __assign({ className: cantEdit
+                    ? styles.disabledSentimentContainer
+                    : styles.sentimentContainer, onClick: function () {
+                    if (!cantEdit)
+                        onChange(value === 4 ? null : 4);
+                } }, { children: _jsx(SentimentVerySatisfiedIcon, { fontSize: "inherit", style: value === 4
+                        ? {
+                            color: (_g = formStyle.primaryColor) !== null && _g !== void 0 ? _g : '#3d5a7f',
+                        }
+                        : {} }, void 0) }), void 0)] }), void 0));
+}
+export default SatisfactionRating;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RatingStepProps } from '../../RatingStep';
+declare function ScaleRating({ value, inputRef, editable, postview, onChange, widthStats, formStyle, }: RatingStepProps & {
+    value: any;
+    onChange: Function;
+    inputRef: any;
+}): JSX.Element;
+export default ScaleRating;

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

@@ -0,0 +1,65 @@
+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 styles from '../MaterialRatingStep.module.css';
+import { Rating } from '@material-ui/lab';
+import GradeRoundedIcon from '@material-ui/icons/GradeRounded';
+import { makeStyles } from '@material-ui/core';
+import React from 'react';
+var useRatingStyles = function (props) {
+    var _a, _b;
+    return makeStyles({
+        root: {
+            '&.Mui-disabled': {
+                opacity: 1,
+            },
+            '& .EF-MuiRating-iconFilled': {
+                color: (_a = props.focusColor) !== null && _a !== void 0 ? _a : '#3d5a7f',
+            },
+            '& .EF-MuiRating-iconEmpty': {
+                color: (_b = props.outlineColor) !== null && _b !== void 0 ? _b : '#b8b8b8',
+            },
+        },
+    });
+};
+function ScaleRating(_a) {
+    var value = _a.value, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, onChange = _a.onChange, widthStats = _a.widthStats, formStyle = _a.formStyle;
+    var cantEdit = !editable || postview;
+    var ratingClasses = useRatingStyles({
+        outlineColor: formStyle.outlineColor,
+        focusColor: formStyle.primaryColor,
+    })();
+    return (_jsxs(React.Fragment, { children: [_jsx("input", { ref: inputRef, className: styles.hiddenInput }, void 0), _jsx(Rating, { value: value, onChange: function (_event, newValue) {
+                    if (!cantEdit)
+                        onChange(newValue);
+                }, disabled: cantEdit, classes: ratingClasses, name: "customized-icons", size: "large", defaultValue: 0, getLabelText: function (value) { return value + '/5'; }, max: 5, IconContainerComponent: widthStats.isMobile ? SmallIconContainer : IconContainer }, void 0)] }, void 0));
+}
+function IconContainer(_a) {
+    var value = _a.value, other = __rest(_a, ["value"]);
+    return (_jsx("span", __assign({ className: 'icon' + value }, other, { children: _jsx(GradeRoundedIcon, { style: { fontSize: 60 } }, void 0) }), void 0));
+}
+function SmallIconContainer(_a) {
+    var value = _a.value, other = __rest(_a, ["value"]);
+    return (_jsx("span", __assign({ className: 'icon' + value }, other, { children: _jsx(GradeRoundedIcon, { style: { fontSize: 50 } }, void 0) }), void 0));
+}
+export default ScaleRating;

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,25 @@
+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: {
+            return _jsx(MaterialRatingStep, __assign({}, props), void 0);
+        }
+        default: {
+            return _jsx(MaterialRatingStep, __assign({}, props), void 0);
+        }
+    }
+}
+export default RatingStep;

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -24,12 +24,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { OptionTypes } from '../../../../constants/FormStepTypes';
-import RoundedSelect from '../../../../shared/RoundedSelect/RoundedSelect';
-import { MenuItem } from '@material-ui/core';
 import styles from './MaterialSelectorStep.module.css';
 import StepComponent from '../../Step';
 import { calcFillerSize, calcStepWidth } from '../../StepFunctions';
 import { Controller } from 'react-hook-form';
+import RoundedSmartSelect from '../../../../shared/RoundedSmartSelect/RoundedSmartSelect';
 function Selector(_a) {
     var step = _a.step, form = _a.form, value = _a.value, level = _a.level, onBlur = _a.onBlur, control = _a.control, editable = _a.editable, onChange = _a.onChange, postview = _a.postview, formStyle = _a.formStyle, getValues = _a.getValues, widthStats = _a.widthStats, handleSizeChange = _a.handleSizeChange, errors = _a.errors, inputRef = _a.inputRef, others = __rest(_a, ["step", "form", "value", "level", "onBlur", "control", "editable", "onChange", "postview", "formStyle", "getValues", "widthStats", "handleSizeChange", "errors", "inputRef"]);
     var _b = useState(level === 0
@@ -42,24 +41,26 @@ function Selector(_a) {
         }
     };
     var renderSelect = function () {
+        var _a;
         return (_jsx("div", __assign({ className: styles.container, style: {
                 width: widthStats.currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { children: _jsxs(RoundedSelect, __assign({ value: value, fullWidth: true, inputRef: inputRef, cantEdit: !editable || postview, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, label: step.label, "data-testid": step.id, required: step.required, containerMargin: "0px", height: '31px', onBlur: onBlur, handleUpdate: function (event) {
-                    onChange(event.target.value);
-                    sizeChange();
+            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: step.options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, iconComponent: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
+                    onChange(value);
+                }, getOptionSelected: function (option, value) {
+                    return option.value === (value === null || value === void 0 ? void 0 : value.value);
                 }, helperText: errors[step.id]
                     ? errors[step.id].message
-                    : step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), step.options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0) }), void 0));
+                    : step.description, error: !!errors[step.id] }, void 0) }), void 0));
     };
     var mapNestedOption = function () {
         var currentOptionIndex = null;
         var currentOption = null;
         for (var i = 0; i < step.options.length; i++) {
             var option = step.options[i];
-            if (option.value === value) {
+            if (option.value === (step.searchable ? value.value : value)) {
                 currentOptionIndex = i;
                 currentOption = option;
             }

package/dist/FormComponents/Step/Step.js

@@ -32,6 +32,7 @@ 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';
 function StepComponent(_a) {
     var _b;
     var step = _a.step, props = __rest(_a, ["step"]);
@@ -67,6 +68,9 @@ function StepComponent(_a) {
         case Types.FILEUPLOAD: {
             return _jsx(FileUploadStep, __assign({ step: step }, props), void 0);
         }
+        case Types.RATING: {
+            return _jsx(RatingStep, __assign({ step: step }, props), void 0);
+        }
         default:
             break;
     }

package/dist/constants/FormStepTypes.d.ts

@@ -7,6 +7,7 @@ export declare enum FormStyleTypes {
 }
 declare enum TYPES {
     TITLE = "TITLE",
+    RATING = "RATING",
     CHECKBOX = "CHECKBOX",
     TEXTAREA = "TEXTAREA",
     DATEPICKER = "DATEPICKER",
@@ -25,4 +26,9 @@ export declare enum ClassifierOptionTypes {
     HIDE = "CLASSIFIER_HIDE",
     NESTED = "CLASSIFIER_NESTED"
 }
+export declare enum RatingTypes {
+    SCALE = "SCALE",
+    SATISFACTION = "SATISFACTION",
+    LIKE = "LIKE"
+}
 export default TYPES;

package/dist/constants/FormStepTypes.js

@@ -10,6 +10,7 @@ export var FormStyleTypes;
 var TYPES;
 (function (TYPES) {
     TYPES["TITLE"] = "TITLE";
+    TYPES["RATING"] = "RATING";
     TYPES["CHECKBOX"] = "CHECKBOX";
     TYPES["TEXTAREA"] = "TEXTAREA";
     TYPES["DATEPICKER"] = "DATEPICKER";
@@ -30,4 +31,10 @@ export var ClassifierOptionTypes;
     ClassifierOptionTypes["HIDE"] = "CLASSIFIER_HIDE";
     ClassifierOptionTypes["NESTED"] = "CLASSIFIER_NESTED";
 })(ClassifierOptionTypes || (ClassifierOptionTypes = {}));
+export var RatingTypes;
+(function (RatingTypes) {
+    RatingTypes["SCALE"] = "SCALE";
+    RatingTypes["SATISFACTION"] = "SATISFACTION";
+    RatingTypes["LIKE"] = "LIKE";
+})(RatingTypes || (RatingTypes = {}));
 export default TYPES;

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -20,11 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Autocomplete, { createFilterOptions, } from '@material-ui/lab/Autocomplete';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
-import { Popper } from '@material-ui/core';
+import { MenuItem, Popper } from '@material-ui/core';
 import RoundedSelect from '../RoundedSelect/RoundedSelect';
 var filter = createFilterOptions();
 var useTextfieldStyles = function (props) {
@@ -113,6 +113,9 @@ var useTextfieldStyles = function (props) {
             '& .EF-MuiAutocomplete-popupIndicatorOpen': {
                 transform: props.showIcon ? 'none' : 'rotate(180deg)',
             },
+            '& .EF-MuiAutocomplete-clearIndicator': {
+                display: 'none',
+            },
         },
     }); });
 };
@@ -157,7 +160,7 @@ export default function RoundedSmartSelect(_a) {
             }, value: value ? value : null, onChange: function (event, newValue) {
                 handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
             }, filterOptions: function (options, params) {
-                if (value) {
+                if (value && value.label === (params === null || params === void 0 ? void 0 : params.inputValue)) {
                     return options;
                 }
                 else {
@@ -166,8 +169,8 @@ export default function RoundedSmartSelect(_a) {
             }, renderOption: function (option) { return option.label; }, renderInput: function (params) { return (_jsx(TextField, __assign({ classes: textFieldClasses }, params, { inputRef: inputRef, onBlur: onBlur, name: name, variant: "outlined", label: label, required: required, error: error, helperText: helperText }), void 0)); }, style: { pointerEvents: 'none' }, noOptionsText: "No hay opciones" }, void 0));
     }
     else {
-        return (_jsx(RoundedSelect, { onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: handleUpdate, onOpen: function () {
+        return (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: handleUpdate, onOpen: function () {
                 //Show loading icon if loading
-            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, void 0));
+            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0));
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.6.0-test",
+    "version":"1.6.2-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",