@arquimedes.co/eureka-forms 1.1.4-test → 1.1.5

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

@@ -47,8 +47,10 @@ export interface MaterialStyle {
     type: FormStyleTypes.MATERIAL;
     backgroundColor: string;
     primaryColor: string;
+    secondaryColor: string;
     errorColor: string;
     primaryContrastColor: string;
+    secondaryContrastColor: string;
     textColor: string;
     outlineColor: string;
     stepBackgroundColor: string;

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

@@ -52,6 +52,7 @@ export interface DatePicker {
     id: string;
     type: Types.DATEPICKER;
     label: string;
+    pickTime: boolean;
     description: string | null;
     required: boolean;
     showIcon: boolean;

package/dist/App.js

@@ -69,8 +69,6 @@ function App(_a) {
     var _this = this;
     var _b, _c, _d, _e;
     var apiKey = _a.apiKey, domain = _a.domain, preview = _a.preview, formData = _a.formData, postview = _a.postview, isWidget = _a.isWidget, internal = _a.internal, valuesData = _a.valuesData, customSteps = _a.customSteps, handleConfirmed = _a.handleConfirmed, others = __rest(_a, ["apiKey", "domain", "preview", "formData", "postview", "isWidget", "internal", "valuesData", "customSteps", "handleConfirmed"]);
-    // eslint-disable-next-line no-console
-    console.log('PROPS:', { formData: formData, customSteps: customSteps });
     var _f = useState(undefined), form = _f[0], setForm = _f[1];
     var _g = useState({}), originalValues = _g[0], setOriginalValues = _g[1];
     var _h = useState(undefined), organizationInfo = _h[0], setOrganizationInfo = _h[1];

package/dist/FormComponents/Form/ColumnForm/ColumnForm.module.css

@@ -15,12 +15,13 @@
 .submitBtnContainer {
     margin-top: 10px;
     width: 200px;
+    max-width: calc(100% - 40px);
 }
 
 .submitBtn {
     border-radius: 20px;
     padding: 15px 10px;
-    width: 100%;
+    width: calc(100% - 30px);
     margin: 0 auto 0 auto;
     font-size: 1.4rem;
     cursor: pointer;

package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -20,7 +20,6 @@ function CheckBoxStep(_a) {
             width: widthStats.currentBreakPoint <= step.size
                 ? '100%'
                 : calcStepWidth(step.size, form),
-            maxWidth: '100%',
             minHeight: step.description || step.required ? '55px' : '43px',
         } }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }), void 0), _jsx(Controller, { name: step.id, control: control, defaultValue: false, rules: {
                             required: step.required

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

@@ -51,7 +51,6 @@ function ClassifierSelector(_a) {
                 width: widthStats.currentBreakPoint <= step.size
                     ? '100%'
                     : calcStepWidth(step.size, form),
-                maxWidth: '100%',
                 minHeight: step.description || step.required ? '55px' : '43px',
             } }, { children: _jsxs(RoundedSelect, __assign({ fullWidth: true, value: value, cantEdit: 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);

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.module.css

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

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.js

@@ -27,7 +27,7 @@ function DatePickerStep(_a) {
                     : undefined,
             }, shouldUnregister: true, render: function (_a) {
                 var field = _a.field;
-                return (_jsx(RoundedDatePicker, __assign({}, field, { showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
+                return (_jsx(RoundedDatePicker, __assign({}, field, { pickTime: step.pickTime, showIcon: step.showIcon, inputRef: field.ref, cantEdit: postview, contrastColor: formStyle.secondaryContrastColor, accentColor: formStyle.textColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, helperTextColor: formStyle.descriptionTextColor, fontWeight: 400, label: step.label, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, error: !!errors[step.id], required: step.required }), void 0));
             } }, void 0) }), void 0));

package/dist/FormComponents/Step/DatePickerStep/MaterialDatePickerStep/MaterialDatePickerStep.module.css

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

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -92,7 +92,7 @@ function TextAreaStep(_a) {
                                 }
                                 return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
                                         setFocus(true);
-                                    }, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
+                                    }, stripPastedStyles: true, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
                                         options: [
                                             'inline',
                                             'list',

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css

@@ -1,7 +1,7 @@
 .container,
 .textEditorContainer {
     width: fit-content;
-    max-width: 100%;
+    max-width: calc(100% - 20px);
     display: flex;
     padding: 10px;
     padding-bottom: 0px;

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.module.css

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

package/dist/constants/InternalFormStyle.js

@@ -4,7 +4,9 @@ var InternalFormStyle = {
     backgroundColor: '#ffffff',
     stepBackgroundColor: '#ffffff',
     primaryColor: '#3d5a7f',
+    secondaryColor: '#98c1d9',
     primaryContrastColor: '#ffffff',
+    secondaryContrastColor: '#ee6c4d',
     errorColor: '#cc2936',
     textColor: '#293241',
     outlineColor: '#b8b8b8',

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

@@ -12,10 +12,16 @@ interface StyleProps {
     outlineColor?: string;
     /** The backgroundColor of the input */
     backgroundColor?: string;
+    /** The contrastColor of the input */
+    contrastColor?: string;
+    /** The accent color of the input */
+    accentColor?: string;
     /** The color of the inner input */
     innerBackgroundColor?: string;
     /** The borderRadius of the input */
     borderRadius?: number;
+    /** If it should display the timePicker */
+    pickTime?: boolean;
     /** The padding of the input */
     padding?: string;
     /** The size of the font to display the input in */

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -39,7 +39,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { cloneElement } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
-import { KeyboardDatePicker, } from '@material-ui/pickers';
+import { KeyboardDatePicker, KeyboardDateTimePicker, } from '@material-ui/pickers';
 import { getLocale } from '../../FormComponents/Form/Form';
 import { format } from 'date-fns';
 var useDatePickerStyles = function (props) {
@@ -78,8 +78,9 @@ var useDatePickerStyles = function (props) {
                     : props.focusColor,
             },
             '& .EF-MuiInputAdornment-root': {
+                width: 5,
                 '& button': {
-                    marginRight: -20,
+                    marginLeft: -25,
                     fontSize: 18,
                     padding: 16,
                 },
@@ -159,11 +160,57 @@ var useDatePickerDialogStyles = function (props) {
                 color: props.backgroundColor,
                 backgroundColor: props.focusColor,
             },
+            //Title
+            '& .EF-MuiPickersToolbar-toolbar': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickerDTTabs-tabs': {
+                color: props.backgroundColor,
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersYear-yearSelected, .EF-MuiPickersYear-root:focus': {
+                color: props.focusColor,
+            },
+            '& .EF-MuiTabs-indicator': {
+                backgroundColor: props.contrastColor,
+            },
+            '& .EF-MuiPickersClockNumber-clockNumber': {
+                color: 'var(--accent)',
+            },
+            '& .EF-MuiPickersClockNumber-clockNumberSelected': {
+                color: props.backgroundColor,
+            },
+            '& .EF-MuiPickersClock-pin, .EF-MuiPickersClockPointer-pointer': {
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersClockPointer-noPoint': {
+                backgroundColor: props.focusColor,
+            },
+            '& .EF-MuiPickersClockPointer-thumb': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiPickersDay-dayDisabled': {
+                color: 'rgba(0, 0, 0, 0.38)',
+                pointerEvents: 'all',
+            },
+            '& .EF-MuiPickersDay-current': {
+                color: props.backgroundColor,
+                backgroundColor: 'var(--secondary2)',
+            },
+            '& .EF-MuiPickersDay-hidden': {
+                opacity: 0.4,
+                pointerEvents: 'none',
+            },
+            '& .EF-MuiPickersDay-hidden.EF-MuiPickersDay-current': {
+                opacity: 0.8,
+                pointerEvents: 'none',
+            },
         },
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.outlineColor, outlineColor = _c === void 0 ? '#0000003b' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, innerBackgroundColor = _a.innerBackgroundColor, _e = _a.textColor, textColor = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.borderRadius, borderRadius = _g === void 0 ? 10 : _g, _h = _a.padding, padding = _h === void 0 ? '6px 12px' : _h, _j = _a.fontSize, fontSize = _j === void 0 ? '1rem' : _j, _k = _a.shrunkenFontSize, shrunkenFontSize = _k === void 0 ? '1rem' : _k, _l = _a.helperTextColor, helperTextColor = _l === void 0 ? '#989898' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.outlineColor, outlineColor = _c === void 0 ? '#0000003b' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, innerBackgroundColor = _a.innerBackgroundColor, _e = _a.textColor, textColor = _e === void 0 ? '#293241' : _e, _f = _a.contrastColor, contrastColor = _f === void 0 ? '#ee6c4d' : _f, _g = _a.accentColor, accentColor = _g === void 0 ? '#293241' : _g, _h = _a.errorColor, errorColor = _h === void 0 ? '#cc2936' : _h, _j = _a.borderRadius, borderRadius = _j === void 0 ? 10 : _j, _k = _a.padding, padding = _k === void 0 ? '6px 0px 6px 12px' : _k, _l = _a.fontSize, fontSize = _l === void 0 ? '1rem' : _l, _m = _a.shrunkenFontSize, shrunkenFontSize = _m === void 0 ? '1rem' : _m, _o = _a.helperTextColor, helperTextColor = _o === void 0 ? '#989898' : _o, _p = _a.fontWeight, fontWeight = _p === void 0 ? '300' : _p, _q = _a.showIcon, showIcon = _q === void 0 ? true : _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", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "showIcon", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -200,6 +247,8 @@ function CustomDatePicker(_a) {
         padding: padding,
         cantEdit: cantEdit,
         textColor: textColor,
+        accentColor: accentColor,
+        contrastColor: contrastColor,
         focusColor: focusColor,
         hoverColor: focusColor + '0a',
         errorColor: errorColor,
@@ -226,25 +275,48 @@ function CustomDatePicker(_a) {
         fontWeight: fontWeight,
         helperTextColor: helperTextColor,
     })();
-    return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
-            disableEnforceFocus: true,
-            className: datePicker,
-            cancelLabel: '',
-        } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
-        , InputProps: {
-            required: required,
-            classes: classes,
-            disabled: cantEdit,
-        }, FormHelperTextProps: {
-            classes: helperTextStyles,
-        }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
-            if (!day) {
-                return dayComponent;
-            }
-            return (_jsx("div", __assign({ onClick: function () {
-                    onChange(day);
-                } }, { children: cloneElement(dayComponent) }), void 0));
-        }, variant: "dialog" }), void 0));
+    if (pickTime) {
+        return (_jsx(KeyboardDateTimePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'Pp', { locale: getLocale() }), format: "Pp", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+                disableEnforceFocus: true,
+                className: datePicker,
+                cancelLabel: '',
+            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
+            , InputProps: {
+                required: required,
+                classes: classes,
+                disabled: cantEdit,
+            }, FormHelperTextProps: {
+                classes: helperTextStyles,
+            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
+                if (!day) {
+                    return dayComponent;
+                }
+                return (_jsx("div", __assign({ onClick: function () {
+                        onChange(day);
+                    } }, { children: cloneElement(dayComponent) }), void 0));
+            }, variant: "dialog" }), void 0));
+    }
+    else {
+        return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
+                disableEnforceFocus: true,
+                className: datePicker,
+                cancelLabel: '',
+            } //Fixes the typescript declaration of the library: https://material-ui-pickers.dev/api/KeyboardDatePicker
+            , InputProps: {
+                required: required,
+                classes: classes,
+                disabled: cantEdit,
+            }, FormHelperTextProps: {
+                classes: helperTextStyles,
+            }, renderDay: function (day, selectedDate, dayInCurrentMonth, dayComponent) {
+                if (!day) {
+                    return dayComponent;
+                }
+                return (_jsx("div", __assign({ onClick: function () {
+                        onChange(day);
+                    } }, { children: cloneElement(dayComponent) }), void 0));
+            }, variant: "dialog" }), void 0));
+    }
 }
 /**
  * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.1.4-test",
+    "version": "1.1.5",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -81,5 +81,5 @@
     "files": [
         "/dist"
     ],
-    "proxy": "https://api.forms.capta.co"
+    "proxy": "https://api.forms.eureka-test.click"
 }