@arquimedes.co/eureka-forms 1.9.4-test → 1.9.5-test

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

@@ -0,0 +1,9 @@
+import AYFFormStepTypes from '../constants/AYFFormStepTypes';
+import { GSmartSelect, GTextInput } from './GenericFormSteps';
+export declare type AYFFormStep = AYFListStep | AYFBillNumStep;
+export interface AYFListStep extends Omit<GSmartSelect, 'searchable'> {
+    type: AYFFormStepTypes.AYF_START_MONTH | AYFFormStepTypes.AYF_END_MONTH | AYFFormStepTypes.AYF_YEAR | AYFFormStepTypes.AYF_START_YEAR | AYFFormStepTypes.AYF_END_YEAR;
+}
+export interface AYFBillNumStep extends GTextInput {
+    type: AYFFormStepTypes.AYF_BILL_NUM;
+}

package/dist/@Types/AYFFormStep.js

@@ -0,0 +1 @@
+export {};

package/dist/FormComponents/Step/@Construction/CBRLocativasStep/CBRLocativasStep.js

@@ -64,7 +64,7 @@ function CBRLocativasStep(props) {
             else {
                 return null;
             }
-        }, iconComponent: LeakIconComponent }, { children: _jsx(LocativasSubStepRenderer, {}, void 0) }), void 0));
+        } }, { children: _jsx(LocativasSubStepRenderer, {}, void 0) }), void 0));
 }
 export default CBRLocativasStep;
 function LocativasSubStepRenderer(_a) {
@@ -84,15 +84,7 @@ function LocativasSubStepRenderer(_a) {
                 marginTop: 2,
             } }, void 0), calcInvalidDeps: calcInvalidDependencies, getOptions: getLocativasOptions, calcDepError: calcDepError, getOptionSelected: function (option, value) {
             return option.id === value.id;
-        }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; }, iconComponent: LeakIconComponent }, { children: _jsx(LocativasSubStepRenderer, {}, void 0) }), void 0));
-}
-function LeakIconComponent(props) {
-    return (_jsx(Leak, { className: props.className, fill: "#757575", style: {
-            display: 'flex',
-            height: 23,
-            width: 23,
-            marginTop: 2,
-        } }, void 0));
+        }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; } }, { children: _jsx(LocativasSubStepRenderer, {}, void 0) }), void 0));
 }
 var getLocativasOptions = function (idOrganization, step, dependencyStore) { return __awaiter(void 0, void 0, void 0, function () {
     var idProyecto, response, father_1;

package/dist/FormComponents/Step/@Construction/CBRPropertyStep/CBRPropertyStep.js

@@ -117,7 +117,7 @@ function CBRPropertyStepComponent(props) {
                             }
                         }
                     }
-                    : undefined, iconComponent: PropertyIconComponent, getOptions: getInmueblesOptions }), void 0), showWarning !== undefined && (_jsx(Dialog, __assign({ PaperProps: {
+                    : undefined, getOptions: getInmueblesOptions }), void 0), showWarning !== undefined && (_jsx(Dialog, __assign({ PaperProps: {
                     style: {
                         borderRadius: '20px',
                         maxWidth: '100vw',
@@ -130,11 +130,4 @@ function CBRPropertyStepComponent(props) {
                                         } }, void 0) }), void 0)] }), void 0)] }), void 0) }), void 0))] }, void 0));
 }
 export default CBRPropertyStepComponent;
-function PropertyIconComponent(props) {
-    return (_jsx(PropertyIcon, { className: props.className, fill: "#757575", style: {
-            display: 'flex',
-            height: 23,
-            width: 23,
-        } }, void 0));
-}
 var PropertyIcon = function (props) { return (_jsx("svg", __assign({ fill: props.fill, className: props.class, style: props.style, height: "512", viewBox: "0 0 512 512", width: "512", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("g", __assign({ id: "_01-home", "data-name": "01-home" }, { children: _jsxs("g", __assign({ id: "glyph" }, { children: [_jsx("path", { d: "m256 4c-108.075 0-196 87.925-196 196 0 52.5 31.807 119.92 94.537 200.378a1065.816 1065.816 0 0 0 93.169 104.294 12 12 0 0 0 16.588 0 1065.816 1065.816 0 0 0 93.169-104.294c62.73-80.458 94.537-147.878 94.537-200.378 0-108.075-87.925-196-196-196zm0 336c-77.2 0-140-62.8-140-140s62.8-140 140-140 140 62.8 140 140-62.8 140-140 140z" }, void 0), _jsx("path", { d: "m352.072 183.121-88-80a12 12 0 0 0 -16.144 0l-88 80a12.006 12.006 0 0 0 -2.23 15.039 12.331 12.331 0 0 0 10.66 5.84h11.642v76a12 12 0 0 0 12 12h28a12 12 0 0 0 12-12v-44a12 12 0 0 1 12-12h24a12 12 0 0 1 12 12v44a12 12 0 0 0 12 12h28a12 12 0 0 0 12-12v-76h11.642a12.331 12.331 0 0 0 10.66-5.84 12.006 12.006 0 0 0 -2.23-15.039z" }, void 0)] }), void 0) }), void 0) }), void 0)); };

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

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

package/dist/FormComponents/Step/AYFStepMapper.js

@@ -0,0 +1,100 @@
+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 __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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import AYFFormStepTypes from '../../constants/AYFFormStepTypes';
+import TextInputStep from './TextInputStep/TextInputStep';
+import SmartSelectStep from './SmartSelectStep/SmartSelectStep';
+import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
+import DescriptionIcon from '@material-ui/icons/Description';
+function AYFStepMapper(props) {
+    var _this = this;
+    var getMonths = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            return [2 /*return*/, [
+                    { id: '1', label: 'Enero' },
+                    { id: '2', label: 'Febrero' },
+                    { id: '3', label: 'Marzo' },
+                    { id: '4', label: 'Abril' },
+                    { id: '5', label: 'Mayo' },
+                    { id: '6', label: 'Junio' },
+                    { id: '7', label: 'Julio' },
+                    { id: '8', label: 'Agosto' },
+                    { id: '9', label: 'Septiembre' },
+                    { id: '10', label: 'Octubre' },
+                    { id: '11', label: 'Noviembre ' },
+                    { id: '12', label: 'Diciembre' },
+                ]];
+        });
+    }); };
+    switch (props.step.type) {
+        case AYFFormStepTypes.AYF_START_MONTH:
+        case AYFFormStepTypes.AYF_END_MONTH:
+            return (_jsx(SmartSelectStep, __assign({}, props, { step: props.step, getOptions: getMonths, getOptionSelected: function (option, value) {
+                    return option.id === value.id;
+                }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; }, icon: _jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                        marginRight: 4,
+                        marginTop: 2,
+                    } }, void 0) }), void 0));
+        case AYFFormStepTypes.AYF_YEAR:
+        case AYFFormStepTypes.AYF_START_YEAR:
+        case AYFFormStepTypes.AYF_END_YEAR:
+            return (_jsx(TextInputStep, __assign({}, props, { step: props.step, defaultValue: new Date().getFullYear().toString(), icon: _jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                        marginRight: 4,
+                        marginTop: 2,
+                    } }, void 0) }), void 0));
+        case AYFFormStepTypes.AYF_BILL_NUM:
+            return (_jsx(TextInputStep, __assign({}, props, { step: props.step, icon: _jsx(DescriptionIcon, { style: { color: '#757575', fontSize: 23 } }, void 0) }), void 0));
+        default:
+            return _jsx("div", {}, void 0);
+    }
+}
+export default AYFStepMapper;

package/dist/FormComponents/Step/CBRStepMapper.js

@@ -138,9 +138,9 @@ function CBRStepMapper(props) {
         case CBRFormStepTypes.CBR_MACRO_PROYECTO:
             return (_jsx(SmartSelectStep, __assign({}, props, { step: props.step, icon: _jsx(ProjectIcon, { fill: "#757575", style: {
                         display: 'flex',
-                        height: 24,
-                        width: 24,
-                    } }, void 0), iconComponent: ProjectIconComponent, getOptions: getMacroProyectoOptions, getOptionSelected: function (option, value) {
+                        height: 23,
+                        width: 23,
+                    } }, void 0), getOptions: getMacroProyectoOptions, getOptionSelected: function (option, value) {
                     return option.id === value.id;
                 }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; } }), void 0));
         case CBRFormStepTypes.CBR_PROYECTO:
@@ -148,7 +148,7 @@ function CBRStepMapper(props) {
                         display: 'flex',
                         height: 24,
                         width: 24,
-                    } }, void 0), iconComponent: ProjectIconComponent, getOptions: getProyectoOptions, getOptionSelected: function (option, value) {
+                    } }, void 0), getOptions: getProyectoOptions, getOptionSelected: function (option, value) {
                     return option.id === value.id;
                 }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; } }), void 0));
         case CBRFormStepTypes.CBR_INMUEBLE:
@@ -158,7 +158,9 @@ function CBRStepMapper(props) {
                         display: 'flex',
                         height: 23,
                         width: 23,
-                    } }, void 0), iconComponent: PersonRoundedIcon, getOptions: getTipoSolicitanteOptions, getOptionSelected: function (option, value) {
+                        marginRight: 3,
+                        marginTop: 1,
+                    } }, void 0), getOptions: getTipoSolicitanteOptions, getOptionSelected: function (option, value) {
                     return option.id === value.id;
                 }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; } }), void 0));
         case CBRFormStepTypes.CBR_TIPO_ESPACIO:
@@ -166,7 +168,7 @@ function CBRStepMapper(props) {
                         display: 'flex',
                         height: 23,
                         width: 23,
-                    } }, void 0), iconComponent: SpaceTypeIconComponent, getOptions: getTipoEspaciosOptions, calcDepError: function (types) {
+                    } }, void 0), getOptions: getTipoEspaciosOptions, calcDepError: function (types) {
                     for (var _i = 0, _a = types; _i < _a.length; _i++) {
                         var type = _a[_i];
                         if (type === CBRFormStepTypes.CBR_PROYECTO) {
@@ -188,13 +190,6 @@ function CBRStepMapper(props) {
     }
 }
 export default CBRStepMapper;
-function ProjectIconComponent(props) {
-    return (_jsx(ProjectIcon, { className: props.className, fill: "#757575", style: {
-            display: 'flex',
-            height: 23,
-            width: 23,
-        } }, void 0));
-}
 function DocumentIconComponent(props) {
     return (_jsx("div", __assign({ style: {
             marginRight: 2,
@@ -204,13 +199,6 @@ function DocumentIconComponent(props) {
                 width: 23,
             } }, void 0) }), void 0));
 }
-function SpaceTypeIconComponent(props) {
-    return (_jsx(SpaceTypeIcon, { className: props.className, fill: "#757575", style: {
-            display: 'flex',
-            height: 23,
-            width: 23,
-        } }, void 0));
-}
 var SpaceTypeIcon = function (props) { return (_jsxs("svg", __assign({ fill: props.fill, className: props.class, style: props.style, width: "512pt", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64" }, { children: [_jsx("title", { children: "SpaceType" }, void 0), _jsxs("g", __assign({ id: "space_type", "data-name": "space type" }, { children: [_jsx("path", { d: "M29.74,39A10.21,10.21,0,0,0,27.61,39,1.63,1.63,0,0,0,26,40.61V53.35A1.63,1.63,0,0,0,27.61,55h1.74A1.63,1.63,0,0,0,31,53.35V40.61A1.63,1.63,0,0,0,29.74,39Z" }, void 0), _jsx("path", { d: "M57.35,39a10.27,10.27,0,0,0-2.13.05A1.63,1.63,0,0,0,54,40.61V53.35A1.63,1.63,0,0,0,55.61,55h1.74A1.63,1.63,0,0,0,59,53.35V40.61A1.63,1.63,0,0,0,57.35,39Z" }, void 0), _jsx("path", { d: "M33,54a1,1,0,0,0,1,1H51a1,1,0,0,0,1-1V49H33Z" }, void 0), _jsx("path", { d: "M49,42H36a3,3,0,0,0-3,3v2H52V45A3,3,0,0,0,49,42Z" }, void 0), _jsx("path", { d: "M54,31a5,5,0,0,0-5-5H36a5,5,0,0,0-5,5v6.39a3.62,3.62,0,0,1,1.86,2.24A4.68,4.68,0,0,1,33,41c1.37-1.37,4.2-1,16-1a5,5,0,0,1,2.68.78c.64.39.07.39.46-1.15a3.65,3.65,0,0,1,1.43-2C54.15,37.19,54,38.41,54,31Z" }, void 0), _jsx("path", { d: "M17,32c-5.85,0-4.33,0-4-.05a7.06,7.06,0,0,0,6-7,7,7,0,0,0-4.47,1.59,7.08,7.08,0,0,0-2.07-5.05,7.06,7.06,0,0,0-2.07,5.05,7,7,0,0,0-4.47-1.59,7.07,7.07,0,0,0,6,7c.36.08,1.89.05-4,.05l1.71,6H3V55H5V50H20v5h2V38H15.26ZM15,45H10V43h5Z" }, void 0), _jsx("path", { d: "M26,21h6L31,10H19L18,21h6V40.61a3.63,3.63,0,0,1,2-3.24Z" }, void 0)] }), void 0)] }), void 0)); };
 var DocumentIcon = function (props) { return (_jsx("svg", __assign({ fill: props.fill, className: props.class, style: props.style, id: "bold", enableBackground: "new 0 0 24 24", height: "512", viewBox: "0 0 24 24", width: "512", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "m21.25 3h-18.5c-1.517 0-2.75 1.233-2.75 2.75v12.5c0 1.517 1.233 2.75 2.75 2.75h18.5c1.517 0 2.75-1.233 2.75-2.75v-12.5c0-1.517-1.233-2.75-2.75-2.75zm-13.75 4c1.378 0 2.5 1.122 2.5 2.5s-1.122 2.5-2.5 2.5-2.5-1.122-2.5-2.5 1.122-2.5 2.5-2.5zm4.5 9.25c0 .414-.336.75-.75.75h-7.5c-.414 0-.75-.336-.75-.75v-.5c0-1.517 1.233-2.75 2.75-2.75h3.5c1.517 0 2.75 1.233 2.75 2.75zm8.25.75h-5.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-4h-5.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75zm0-4h-5.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75z" }, void 0) }), void 0)); };
 var ProjectIcon = function (props) { return (_jsx("svg", __assign({ fill: props.fill, className: props.class, style: props.style, height: "480pt", viewBox: "0 -8 480 480", width: "480pt", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "m440 448v-49.960938c10.546875-6.214843 16.726562-17.816406 16-30.039062 0-17.671875-10.742188-32-24-32s-24 14.328125-24 32c-.726562 12.222656 5.453125 23.824219 16 30.039062v49.960938h-56v-243.054688l-48-24v43.054688h24v16h-24v32h24v16h-24v32h24v16h-24v32h24v16h-24v32h24v16h-24v16h-16v-321.96875l-96-27.421875v29.390625h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v32h56v16h-56v16h-16v-448h-144v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v32h72v16h-72v16h-48v16h480v-16zm0 0" }, void 0) }), void 0)); };

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

@@ -70,7 +70,7 @@ function ClassifierSelector(_a) {
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { 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) {
+            } }, { 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, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
                     onChange(value);
                     sizeChange();
                 }, getOptionSelected: function (option, value) {

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

@@ -47,10 +47,10 @@ function Selector(_a) {
                     ? '100%'
                     : calcStepWidth(step.size, form.size),
                 minHeight: step.description || step.required ? '55px' : '43px',
-            } }, { 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) {
+            } }, { 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, 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);
+                    return (option === null || option === void 0 ? void 0 : 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] }, void 0) }), void 0));

package/dist/FormComponents/Step/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -66,7 +66,7 @@ import React from 'react';
 function SmartSelect(_a) {
     var _this = this;
     var _b, _c, _d, _e;
-    var icon = _a.icon, step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, trigger = _a.trigger, children = _a.children, editable = _a.editable, onChange = _a.onChange, inputRef = _a.inputRef, postview = _a.postview, formStyle = _a.formStyle, getOptions = _a.getOptions, widthStats = _a.widthStats, organization = _a.organization, calcDepError = _a.calcDepError, iconComponent = _a.iconComponent, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, originalValues = _a.originalValues, changeListener = _a.changeListener, dependencyStore = _a.dependencyStore, _f = _a.calcInvalidDeps, calcInvalidDeps = _f === void 0 ? function (step, depStore) {
+    var icon = _a.icon, step = _a.step, form = _a.form, value = _a.value, onBlur = _a.onBlur, errors = _a.errors, trigger = _a.trigger, children = _a.children, editable = _a.editable, onChange = _a.onChange, inputRef = _a.inputRef, postview = _a.postview, formStyle = _a.formStyle, getOptions = _a.getOptions, widthStats = _a.widthStats, organization = _a.organization, calcDepError = _a.calcDepError, valueOverwrite = _a.valueOverwrite, getValueString = _a.getValueString, originalValues = _a.originalValues, changeListener = _a.changeListener, dependencyStore = _a.dependencyStore, _f = _a.calcInvalidDeps, calcInvalidDeps = _f === void 0 ? function (step, depStore) {
         var _a;
         var missingDeps = [];
         for (var _i = 0, _b = (_a = step.dependencies) !== null && _a !== void 0 ? _a : []; _i < _b.length; _i++) {
@@ -76,7 +76,7 @@ function SmartSelect(_a) {
             }
         }
         return missingDeps;
-    } : _f, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["icon", "step", "form", "value", "onBlur", "errors", "trigger", "children", "editable", "onChange", "inputRef", "postview", "formStyle", "getOptions", "widthStats", "organization", "calcDepError", "iconComponent", "valueOverwrite", "getValueString", "originalValues", "changeListener", "dependencyStore", "calcInvalidDeps", "getValueWarning", "getOptionSelected", "setDependencyStore"]);
+    } : _f, getValueWarning = _a.getValueWarning, getOptionSelected = _a.getOptionSelected, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["icon", "step", "form", "value", "onBlur", "errors", "trigger", "children", "editable", "onChange", "inputRef", "postview", "formStyle", "getOptions", "widthStats", "organization", "calcDepError", "valueOverwrite", "getValueString", "originalValues", "changeListener", "dependencyStore", "calcInvalidDeps", "getValueWarning", "getOptionSelected", "setDependencyStore"]);
     var _g = useState(true), first = _g[0], setFirst = _g[1];
     var _h = useState(), options = _h[0], setOptions = _h[1];
     var _j = useState(), error = _j[0], setError = _j[1];
@@ -176,7 +176,7 @@ function SmartSelect(_a) {
                     if (options === undefined && !(!editable || postview)) {
                         setLoading(true);
                     }
-                }, "data-testid": step.id }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: options === null, loading: loading, options: options !== null && options !== void 0 ? options : [], inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, iconComponent: step.showIcon ? iconComponent : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
+                }, "data-testid": step.id }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: options === null, loading: loading, options: options !== null && options !== void 0 ? options : [], inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : '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", handleUpdate: function (value) {
                         var _a;
                         if (dependencyStore[step.id] !== undefined) {
                             setDependencyStore(__assign(__assign({}, dependencyStore), (_a = {}, _a[step.id] = value, _a)));

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

@@ -7,8 +7,6 @@ export interface SmartSelectStepProps extends Omit<StepProps, 'step'> {
     step: GSmartSelect;
     /** The icon to display */
     icon?: React.ReactNode;
-    /** The iconComponent to display in the selector */
-    iconComponent?: any;
     /** Function to call to get the options of the selector, return null if dependency is not met */
     getOptions: (idOrganization: string, step: GSmartSelect, dependencyStore: Record<string, any>) => Promise<any[] | null>;
     /** Function to determine the currently selected option */

package/dist/FormComponents/Step/Step.js

@@ -33,6 +33,7 @@ import FileUploadStep from './FileUploadStep/FileUploadStep';
 import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
 import CBRStepMapper from './CBRStepMapper';
 import RatingStep from './RatingStep/RatingStep';
+import AYFStepMapper from './AYFStepMapper';
 function StepComponent(_a) {
     var _b;
     var step = _a.step, props = __rest(_a, ["step"]);
@@ -77,6 +78,9 @@ function StepComponent(_a) {
     if (step.type.startsWith('CBR')) {
         return _jsx(CBRStepMapper, __assign({}, props, { step: step }), void 0);
     }
+    else if (step.type.startsWith('AYF')) {
+        return _jsx(AYFStepMapper, __assign({}, props, { step: step }), void 0);
+    }
     return _jsx("div", {}, void 0);
 }
 export default StepComponent;

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TextInputStepProps } from '../TextInputStep';
-declare function TextInputStep({ icon, step, form, control, editable, postview, formStyle, widthStats, errors, }: TextInputStepProps): JSX.Element;
+declare function TextInputStep({ icon, step, form, errors, control, editable, postview, formStyle, widthStats, defaultValue, }: TextInputStepProps): JSX.Element;
 export default TextInputStep;

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -15,7 +15,7 @@ import styles from './MaterialTextInputStep.module.css';
 import { Controller } from 'react-hook-form';
 import { calcStepWidth } from '../../StepFunctions';
 function TextInputStep(_a) {
-    var icon = _a.icon, step = _a.step, form = _a.form, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, errors = _a.errors;
+    var icon = _a.icon, step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b;
     return (_jsx("div", __assign({ className: styles.container, style: {
             width: widthStats.currentBreakPoint <= step.size
                 ? '100%'
@@ -23,7 +23,7 @@ function TextInputStep(_a) {
             minHeight: step.description || step.required || step.validation
                 ? '55px'
                 : '43px',
-        } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: "", rules: {
+        } }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: defaultValue, rules: {
                 required: step.required
                     ? 'Este campo es obligatorio'
                     : undefined,

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

@@ -6,6 +6,8 @@ export interface TextInputStepProps extends StepProps {
     step: TextInput;
     /** The icon to display */
     icon?: React.ReactNode;
+    /** Default value to display */
+    defaultValue?: string;
 }
 declare function TextInputStep(props: TextInputStepProps): JSX.Element;
 export default TextInputStep;

package/dist/constants/AYFFormStepTypes.d.ts

@@ -0,0 +1,9 @@
+export declare enum AYFFormStepTypes {
+    AYF_START_MONTH = "AYF_START_MONTH",
+    AYF_END_MONTH = "AYF_END_MONTH",
+    AYF_YEAR = "AYF_YEAR",
+    AYF_BILL_NUM = "AYF_BILL_NUM",
+    AYF_START_YEAR = "AYF_START_YEAR",
+    AYF_END_YEAR = "AYF_END_YEAR"
+}
+export default AYFFormStepTypes;

package/dist/constants/AYFFormStepTypes.js

@@ -0,0 +1,10 @@
+export var AYFFormStepTypes;
+(function (AYFFormStepTypes) {
+    AYFFormStepTypes["AYF_START_MONTH"] = "AYF_START_MONTH";
+    AYFFormStepTypes["AYF_END_MONTH"] = "AYF_END_MONTH";
+    AYFFormStepTypes["AYF_YEAR"] = "AYF_YEAR";
+    AYFFormStepTypes["AYF_BILL_NUM"] = "AYF_BILL_NUM";
+    AYFFormStepTypes["AYF_START_YEAR"] = "AYF_START_YEAR";
+    AYFFormStepTypes["AYF_END_YEAR"] = "AYF_END_YEAR";
+})(AYFFormStepTypes || (AYFFormStepTypes = {}));
+export default AYFFormStepTypes;

package/dist/shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -36,6 +36,8 @@ interface StyleProps {
     cantEdit?: boolean;
     /** The color of the helper text when not error */
     helperTextColor?: string;
+    /** Height of the component */
+    height?: string;
 }
 interface RoundedDatePickerProps extends StyleProps {
 }

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -48,6 +48,7 @@ var useDatePickerStyles = function (props) {
             borderRadius: props.borderRadius,
             backgroundColor: props.backgroundColor,
             cursor: props.cantEdit ? 'default' : 'pointer',
+            height: props.height,
             '& input, textarea': {
                 cursor: props.cantEdit ? 'default' : 'pointer',
                 padding: props.padding,
@@ -86,6 +87,9 @@ var useDatePickerStyles = function (props) {
                     padding: 16,
                 },
             },
+            '&.Erk-MuiOutlinedInput-adornedEnd': {
+                paddingRight: 11,
+            },
             '& .Mui-error': {
                 color: props.errorColor,
             },
@@ -101,7 +105,7 @@ var useDatePickerLabelStyles = function (props) {
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             maxWidth: 'calc(100% - 50px)',
-            marginTop: '-4px',
+            marginTop: props.height != '40px' ? '-4px' : '0px',
             textOverflow: 'ellipsis',
             fontSize: props.fontSize,
             '&.Mui-focused': {
@@ -211,7 +215,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.cantEdit, cantEdit = _r === void 0 ? false : _r, _s = _a.pickTime, pickTime = _s === void 0 ? false : _s, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "cantEdit", "pickTime", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -227,6 +231,7 @@ function CustomDatePicker(_a) {
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
         helperTextColor: helperTextColor,
+        height: height,
     })();
     var labelClasses = useDatePickerLabelStyles({
         padding: padding,
@@ -243,6 +248,7 @@ function CustomDatePicker(_a) {
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
         helperTextColor: helperTextColor,
+        height: height,
     })();
     var datePicker = useDatePickerDialogStyles({
         padding: padding,
@@ -262,6 +268,7 @@ function CustomDatePicker(_a) {
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
         helperTextColor: helperTextColor,
+        height: height,
     })().datePicker;
     var helperTextStyles = useDatePickerHelperTextStyles({
         padding: padding,
@@ -276,6 +283,7 @@ function CustomDatePicker(_a) {
         shrunkenFontSize: shrunkenFontSize,
         fontWeight: fontWeight,
         helperTextColor: helperTextColor,
+        height: height,
     })();
     if (pickTime) {
         return (_jsx(DateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, InputLabelProps: { classes: labelClasses }, DialogProps: {
@@ -287,7 +295,10 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
-                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                    } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
@@ -309,7 +320,10 @@ function CustomDatePicker(_a) {
                 required: required,
                 classes: classes,
                 disabled: cantEdit,
-                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: { color: '#757575' } }, void 0)),
+                endAdornment: (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit", style: {
+                        color: '#757575',
+                        fontSize: 20,
+                    } }, void 0)),
             }, FormHelperTextProps: {
                 classes: helperTextStyles,
             }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {

package/dist/shared/RoundedSelect/RoundedSelect.d.ts

@@ -17,6 +17,8 @@ interface StyleProps {
     color?: string;
     /** The fontsize of the content */
     fontSize?: string;
+    /** The weight of the font of the value and the placeholder */
+    fontWeight?: any;
     /** The color of the inner input */
     innerBackgroundColor?: string;
     /** If input is readOnly */
@@ -25,7 +27,9 @@ interface StyleProps {
     helperTextColor?: string;
     /** The borderRadius of the input */
     borderRadius?: number;
-    /** If custom iconComponent exists */
+    /** The padding to the left of the input */
+    paddingLeft?: number;
+    /** If custom icon exists and should be displayed */
     showIcon?: boolean;
 }
 interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
@@ -38,8 +42,8 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
         name?: string | undefined;
         value: any;
     }>, child?: React.ReactNode) => void;
-    /** Strig to place in the label */
-    label: string;
+    /** String to place in the label */
+    label?: string;
     /** Minimum width in px of the component */
     minWidth?: number;
     /** The color of the outline when selected and hovered on */
@@ -52,6 +56,8 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
     containerMargin?: string;
     /** The icon to display */
     iconComponent?: any;
+    /** the components ref */
+    ref?: any;
     /** The color of the inner input */
     innerBackgroundColor?: string;
 }

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -85,12 +85,18 @@ var useOutlinedInputStyles = function (props) {
             '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
                 borderColor: props.outlineColor,
             },
+            '& .EF-MuiSelect-root': {
+                paddingLeft: props.paddingLeft,
+            },
             '&$focused $notchedOutline': {
                 borderColor: props.focusColor,
             },
             '& .EF-MuiSelect-icon.Mui-disabled': {
                 color: props.outlineColor,
             },
+            '& .EF-MuiSelect-icon.iconOutlined': {
+                right: 8,
+            },
             '& .EF-MuiSelect-iconOpen': {
                 transform: props.showIcon ? 'none' : 'rotate(180deg)',
             },
@@ -106,6 +112,7 @@ var useLabelInputStyles = function (props) {
             color: props.focusColor + ' !important',
         },
         root: {
+            fontWeight: props.fontWeight,
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             maxWidth: 'calc(100% - 45px)',
@@ -135,26 +142,27 @@ var useHelperTextStyles = function (props) {
     }); });
 };
 function CustomSelect(_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.fontSize, fontSize = _f === void 0 ? '1rem' : _f, _g = _a.outlineColor, outlineColor = _g === void 0 ? '#0000003b' : _g, _h = _a.helperTextColor, helperTextColor = _h === void 0 ? '#989898' : _h, _j = _a.backgroundColor, backgroundColor = _j === void 0 ? '#ffffff' : _j, _k = _a.readOnly, readOnly = _k === void 0 ? false : _k, _l = _a.borderRadius, borderRadius = _l === void 0 ? 10 : _l, innerBackgroundColor = _a.innerBackgroundColor, _m = _a.cantEdit, cantEdit = _m === void 0 ? false : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.containerMargin, containerMargin = _p === void 0 ? '8px' : _p, _q = _a.height, height = _q === void 0 ? '40px' : _q, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "fontSize", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "innerBackgroundColor", "cantEdit", "showIcon", "containerMargin", "height", "required", "iconComponent", "error"]);
-    var props = {
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.outlineColor, outlineColor = _f === void 0 ? '#0000003b' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.readOnly, readOnly = _j === void 0 ? false : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, innerBackgroundColor = _a.innerBackgroundColor, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 14 : _l, _m = _a.cantEdit, cantEdit = _m === void 0 ? false : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.containerMargin, containerMargin = _p === void 0 ? '8px' : _p, _q = _a.height, height = _q === void 0 ? '40px' : _q, _r = _a.fontSize, fontSize = _r === void 0 ? '1rem' : _r, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "innerBackgroundColor", "paddingLeft", "cantEdit", "showIcon", "containerMargin", "height", "fontSize", "required", "iconComponent", "error"]);
+    var styleProps = {
         color: color,
         height: height,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        cantEdit: cantEdit,
         errorColor: errorColor,
         focusColor: focusColor,
+        paddingLeft: paddingLeft,
         outlineColor: outlineColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        borderRadius: borderRadius,
         helperTextColor: helperTextColor,
         backgroundColor: backgroundColor,
-        borderRadius: borderRadius,
-        readOnly: readOnly,
-        fontSize: fontSize,
-        cantEdit: cantEdit,
         showIcon: showIcon && iconComponent !== undefined,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
     };
     var classes = useStyles();
-    var outlinedInputClasses = useOutlinedInputStyles(props)();
-    var labelClasses = useLabelInputStyles(props)();
-    var helperTextClasses = useHelperTextStyles(props)();
+    var outlinedInputClasses = useOutlinedInputStyles(styleProps)();
+    var labelClasses = useLabelInputStyles(styleProps)();
+    var helperTextClasses = useHelperTextStyles(styleProps)();
     return (_jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
             ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -27,7 +27,7 @@ interface StyleProps {
     fontWeight?: number | string;
     /** The color of the helper text when not error */
     helperTextColor?: string;
-    /** If custom iconComponent exists */
+    /** If custom icon exists and should be displayed */
     showIcon?: boolean;
 }
 export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color'>, StyleProps {
@@ -41,7 +41,7 @@ export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color'>,
     handleUpdate?: (event: React.ChangeEvent<{
         name?: string | undefined;
         value: any;
-    }>, child?: React.ReactNode) => void;
+    }> | string, child?: React.ReactNode) => void;
     /** Strig to place in the label */
     label: string;
     /** Minimum width in px of the component */
@@ -52,10 +52,10 @@ export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color'>,
     containerMargin?: string;
     /** The icon to display */
     icon?: React.ReactNode;
-    /** The iconComponent to display in the selector */
-    iconComponent?: any;
     /** If the options are searchable */
     searchable?: boolean;
+    /** If can create new option */
+    creatable?: boolean;
     /** Function to determine the currently selected option */
     getOptionSelected?: (option: any, value: any) => boolean;
     /** Function to determine the current value in string format */
@@ -63,5 +63,5 @@ export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color'>,
     /** Function called on each value change */
     changeListener?: (value: any) => void;
 }
-export default function RoundedSmartSelect({ options, value, handleUpdate, label, getValueString, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, changeListener, error, innerBackgroundColor, getOptionSelected, helperText, readOnly, borderRadius, fontWeight, icon, iconComponent, searchable, containerMargin, showIcon, inputRef, disabled, onBlur, name, }: RoundedSmartSelectProps): JSX.Element;
+export default function RoundedSmartSelect({ options, value, handleUpdate, label, getValueString, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, changeListener, error, innerBackgroundColor, getOptionSelected, helperText, readOnly, borderRadius, fontWeight, icon, searchable, containerMargin, showIcon, inputRef, disabled, creatable, onBlur, name, }: RoundedSmartSelectProps): JSX.Element;
 export {};

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -24,6 +24,7 @@ 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 { cloneElement } from 'react';
 import { MenuItem, Popper } from '@material-ui/core';
 import RoundedSelect from '../RoundedSelect/RoundedSelect';
 import CircularProgress from '@material-ui/core/CircularProgress';
@@ -124,7 +125,7 @@ var useTextfieldStyles = function (props) {
     }); });
 };
 export default function RoundedSmartSelect(_a) {
-    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.value, value = _c === void 0 ? '' : _c, handleUpdate = _a.handleUpdate, label = _a.label, _d = _a.getValueString, getValueString = _d === void 0 ? function (value) { return value.value; } : _d, _e = _a.color, color = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.focusColor, focusColor = _g === void 0 ? '#3d5a7f' : _g, _h = _a.helperTextColor, helperTextColor = _h === void 0 ? '#989898' : _h, _j = _a.outlineColor, outlineColor = _j === void 0 ? '#b8b8b8' : _j, _k = _a.backgroundColor, backgroundColor = _k === void 0 ? '#ffffff' : _k, _l = _a.cantEdit, cantEdit = _l === void 0 ? false : _l, _m = _a.loading, loading = _m === void 0 ? false : _m, _o = _a.height, height = _o === void 0 ? '31px' : _o, _p = _a.fontSize, fontSize = _p === void 0 ? '1rem' : _p, required = _a.required, changeListener = _a.changeListener, error = _a.error, innerBackgroundColor = _a.innerBackgroundColor, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _q = _a.readOnly, readOnly = _q === void 0 ? false : _q, _r = _a.borderRadius, borderRadius = _r === void 0 ? 10 : _r, _s = _a.fontWeight, fontWeight = _s === void 0 ? '400' : _s, icon = _a.icon, iconComponent = _a.iconComponent, _t = _a.searchable, searchable = _t === void 0 ? false : _t, _u = _a.containerMargin, containerMargin = _u === void 0 ? '0px' : _u, _v = _a.showIcon, showIcon = _v === void 0 ? true : _v, inputRef = _a.inputRef, disabled = _a.disabled, onBlur = _a.onBlur, name = _a.name;
+    var _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.value, value = _c === void 0 ? '' : _c, handleUpdate = _a.handleUpdate, label = _a.label, _d = _a.getValueString, getValueString = _d === void 0 ? function (value) { return value.value; } : _d, _e = _a.color, color = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.focusColor, focusColor = _g === void 0 ? '#3d5a7f' : _g, _h = _a.helperTextColor, helperTextColor = _h === void 0 ? '#989898' : _h, _j = _a.outlineColor, outlineColor = _j === void 0 ? '#b8b8b8' : _j, _k = _a.backgroundColor, backgroundColor = _k === void 0 ? '#ffffff' : _k, _l = _a.cantEdit, cantEdit = _l === void 0 ? false : _l, _m = _a.loading, loading = _m === void 0 ? false : _m, _o = _a.height, height = _o === void 0 ? '31px' : _o, _p = _a.fontSize, fontSize = _p === void 0 ? '1rem' : _p, required = _a.required, changeListener = _a.changeListener, error = _a.error, innerBackgroundColor = _a.innerBackgroundColor, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _q = _a.readOnly, readOnly = _q === void 0 ? false : _q, _r = _a.borderRadius, borderRadius = _r === void 0 ? 10 : _r, _s = _a.fontWeight, fontWeight = _s === void 0 ? '400' : _s, icon = _a.icon, _t = _a.searchable, searchable = _t === void 0 ? false : _t, _u = _a.containerMargin, containerMargin = _u === void 0 ? '0px' : _u, _v = _a.showIcon, showIcon = _v === void 0 ? true : _v, inputRef = _a.inputRef, disabled = _a.disabled, _w = _a.creatable, creatable = _w === void 0 ? false : _w, onBlur = _a.onBlur, name = _a.name;
     var props = {
         color: color,
         height: height,
@@ -143,7 +144,7 @@ export default function RoundedSmartSelect(_a) {
     };
     var textFieldClasses = useTextfieldStyles(props)();
     if (searchable) {
-        return (_jsx(Autocomplete, { size: "small", fullWidth: true, openOnFocus: true, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575' } }, void 0)) : showIcon && icon ? (icon) : undefined, onOpen: function () { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options, getOptionLabel: function (option) {
+        return (_jsx(Autocomplete, { size: "small", fullWidth: true, openOnFocus: true, freeSolo: creatable, disabled: cantEdit || disabled, popupIcon: loading ? (_jsx(CircularProgress, { size: 22, style: { color: '#757575' } }, void 0)) : showIcon && icon ? (icon) : undefined, onOpen: function () { }, loading: loading, loadingText: 'Cargando...', closeIcon: false, options: options, getOptionLabel: function (option) {
                 var _a, _b;
                 // Value selected with enter, right from the input
                 if (typeof option === 'string') {
@@ -160,16 +161,42 @@ export default function RoundedSmartSelect(_a) {
                 var style = _a.style, props = __rest(_a, ["style"]);
                 return (_jsx(Popper, __assign({}, props, { style: __assign(__assign({}, style), { zIndex: 1305 }) }), void 0));
             }, value: value ? value : null, onChange: function (event, newValue) {
-                changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue);
-                handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
+                if (creatable) {
+                    if (typeof newValue === 'string') {
+                        changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue);
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
+                    }
+                    else if (newValue && newValue.inputValue) {
+                        changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue.inputValue);
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue.inputValue); // Create a new value from the user input
+                    }
+                    else {
+                        changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue === null || newValue === void 0 ? void 0 : newValue.label);
+                        handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue === null || newValue === void 0 ? void 0 : newValue.label);
+                    }
+                }
+                else {
+                    changeListener === null || changeListener === void 0 ? void 0 : changeListener(newValue);
+                    handleUpdate === null || handleUpdate === void 0 ? void 0 : handleUpdate(newValue);
+                }
             }, filterOptions: function (options, params) {
                 if (value && value.label === (params === null || params === void 0 ? void 0 : params.inputValue)) {
                     return options;
                 }
                 else {
-                    return filter(options, params);
+                    var filtered = filter(options, params);
+                    // Suggest the creation of a new value
+                    if (creatable && params.inputValue !== '') {
+                        filtered.push({
+                            inputValue: params.inputValue,
+                            label: "Crear \"" + params.inputValue + "\"",
+                        });
+                    }
+                    return filtered;
                 }
-            }, 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));
+            }, renderOption: function (option) {
+                return typeof option === 'string' ? option : 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 (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: function (event) {
@@ -178,6 +205,10 @@ export default function RoundedSmartSelect(_a) {
                 }));
             }, onOpen: function () {
                 //Show loading icon if loading
-            }, value: getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, innerBackgroundColor: innerBackgroundColor, 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: getValueString(option), style: { whiteSpace: 'normal' } }, { children: option.label }), getValueString(option))); })] }), void 0));
+            }, value: getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, innerBackgroundColor: innerBackgroundColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: error, iconComponent: icon
+                ? function (props) {
+                    return cloneElement(icon, props);
+                }
+                : undefined, 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: getValueString(option), style: { whiteSpace: 'normal' } }, { children: option.label }), getValueString(option))); })] }), void 0));
     }
 }

package/package.json

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