@arquimedes.co/eureka-forms 3.0.2-refactor → 3.0.4-refactor

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js +1 -1
  2. package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js +4 -4
  3. package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/DraftEditor.css +16 -18
  4. package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js +2 -2
  5. package/dist/Icons/@ErkIcon.d.ts +2 -2
  6. package/dist/Icons/@ErkIcon.js +1 -2
  7. package/dist/Shared/ErkDatePicker/ErkDatePicker.d.ts +1 -1
  8. package/dist/Shared/ErkDatePicker/ErkDatePicker.js +52 -38
  9. package/dist/Shared/ErkPhoneInput/EkrPhoneInput.d.ts +1 -0
  10. package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js +6 -8
  11. package/dist/Shared/ErkSelect/ErkSelect.js +12 -12
  12. package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js +5 -5
  13. package/dist/Shared/ErkTextField/ErkTextField.d.ts +3 -2
  14. package/dist/Shared/ErkTextField/ErkTextField.js +30 -25
  15. package/dist/Shared/ErkTimePicker/ErkTimePicker.js +1 -1
  16. package/dist/Shared/Rating/Ratings/ScaleRating.js +3 -3
  17. package/dist/Shared/Toggle/Toggle.js +1 -1
  18. package/dist/Utils/MuiClassnameSetup.d.ts +1 -1
  19. package/dist/Utils/MuiClassnameSetup.js +1 -1
  20. package/dist/index.css +10 -0
  21. package/package.json +1 -1
  22. package/dist/Icons/@ErkIcon.css +0 -9
package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js CHANGED
@@ -121,7 +121,7 @@ function FileUploadStep({ step, editable }) {
121
121
  }
122
122
  return '';
123
123
  };
124
- return (_jsxs("div", { className: styles.container + (error || !!fieldError ? ' EF-error' : ''), style: {
124
+ return (_jsxs("div", { className: styles.container + (error || !!fieldError ? ' Erk-error' : ''), style: {
125
125
  minHeight: editable === false || postview ? undefined : '100px',
126
126
  }, "data-testid": step.id, children: [_jsx("div", { className: styles.labelLabel, children: step.label }), step.description && (_jsx("div", { className: styles.stepDescriptionLabel, style: { color: formStyle.descriptionTextColor }, children: step.description })), _jsx("input", { type: "file", ref: inputRef, className: styles.filesInput, onChange: (e) => {
127
127
  const files = e.target.files;
package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js CHANGED
@@ -91,21 +91,21 @@ export default PagedMapperElement;
91
91
  const StyledStepper = styled(MobileStepper)(({ formStyle }) => ({
92
92
  backgroundColor: 'transparent',
93
93
  padding: '10px',
94
- '& .EF-MuiMobileStepper-dot': {
94
+ '& .Erk-MuiMobileStepper-dot': {
95
95
  width: 11,
96
96
  height: 11,
97
97
  backgroundColor: formStyle.outlineColor,
98
98
  },
99
- '& .EF-MuiMobileStepper-dotActive': {
99
+ '& .Erk-MuiMobileStepper-dotActive': {
100
100
  backgroundColor: formStyle.primaryColor,
101
101
  },
102
- '& .EF-MuiLinearProgress-root': {
102
+ '& .Erk-MuiLinearProgress-root': {
103
103
  height: 8,
104
104
  backgroundColor: formStyle.outlineColor,
105
105
  borderRadius: 4,
106
106
  margin: '0px 8px',
107
107
  },
108
- '& .EF-MuiLinearProgress-barColorPrimary': {
108
+ '& .Erk-MuiLinearProgress-barColorPrimary': {
109
109
  backgroundColor: formStyle.primaryColor,
110
110
  },
111
111
  }));
package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/DraftEditor.css CHANGED
@@ -1,34 +1,34 @@
1
- .EF-DraftContainer {
1
+ .Erk-DraftContainer {
2
2
  font: inherit;
3
3
  font-size: 1rem;
4
4
  }
5
5
  .postview-editor {
6
6
  cursor: default !important;
7
7
  }
8
- .EF-DraftContainer .DraftEditor-root {
8
+ .Erk-DraftContainer .DraftEditor-root {
9
9
  height: unset;
10
10
  }
11
11
 
12
- .EF-DraftContainer .rdw-option-wrapper {
12
+ .Erk-DraftContainer .rdw-option-wrapper {
13
13
  border-radius: 7px;
14
14
  border: 1px solid var(--eureka-outline);
15
15
  background-color: transparent;
16
16
  }
17
17
 
18
- .EF-DraftContainer .rdw-option-wrapper:active {
18
+ .Erk-DraftContainer .rdw-option-wrapper:active {
19
19
  border: 1px solid var(--eureka-primary);
20
20
  }
21
- .EF-DraftContainer .rdw-option-wrapper:hover {
21
+ .Erk-DraftContainer .rdw-option-wrapper:hover {
22
22
  box-shadow: none;
23
23
  border: 1px solid var(--eureka-primary);
24
24
  }
25
25
 
26
- .EF-DraftContainer .rdw-option-active {
26
+ .Erk-DraftContainer .rdw-option-active {
27
27
  border: 1px solid var(--eureka-primary);
28
28
  box-shadow: none;
29
29
  }
30
30
 
31
- .EF-DraftContainer .rdw-editor-toolbar {
31
+ .Erk-DraftContainer .rdw-editor-toolbar {
32
32
  border-radius: 15px 15px 0 0;
33
33
  border: none;
34
34
  border-bottom: 1px solid var(--eureka-outline);
@@ -39,38 +39,38 @@
39
39
  pointer-events: none;
40
40
  }
41
41
 
42
- .EF-DraftContainer .rdw-editor-main {
42
+ .Erk-DraftContainer .rdw-editor-main {
43
43
  cursor: text;
44
44
  padding-top: 12px;
45
45
  padding-bottom: 40px;
46
46
  margin-right: 0px;
47
47
  }
48
48
 
49
- .EF-DraftContainer .public-DraftStyleDefault-block {
49
+ .Erk-DraftContainer .public-DraftStyleDefault-block {
50
50
  margin: 0px 0;
51
51
  max-width: 100%;
52
52
  }
53
53
 
54
- .EF-DraftContainer .rdw-image-imagewrapper {
54
+ .Erk-DraftContainer .rdw-image-imagewrapper {
55
55
  max-width: 100%;
56
56
  /* cursor: pointer; */
57
57
  position: relative;
58
58
  }
59
59
 
60
- .EF-DraftContainer .rdw-image-alignment-editor {
60
+ .Erk-DraftContainer .rdw-image-alignment-editor {
61
61
  padding-right: 10px;
62
62
  padding-left: 5px;
63
63
  margin-left: -5px;
64
64
  }
65
- .EF-DraftContainer .rdw-editing-image {
65
+ .Erk-DraftContainer .rdw-editing-image {
66
66
  border: 1px solid var(--secondary);
67
67
  }
68
68
 
69
- .EF-DraftContainer .DraftEditor-root figure {
69
+ .Erk-DraftContainer .DraftEditor-root figure {
70
70
  margin: 0px;
71
71
  }
72
72
 
73
- .EF-DraftContainer .rdw-image-alignment-option {
73
+ .Erk-DraftContainer .rdw-image-alignment-option {
74
74
  font-size: 16px !important;
75
75
  width: 20px;
76
76
  height: 20px;
@@ -83,14 +83,12 @@
83
83
  border: 1px solid var(--light-grey);
84
84
  }
85
85
 
86
- .EF-DraftContainer .rdw-image-alignment-options-popup {
86
+ .Erk-DraftContainer .rdw-image-alignment-options-popup {
87
87
  width: fit-content;
88
88
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
89
89
  }
90
90
 
91
91
  /* Hides empty placeholder */
92
- .EF-DraftContainer
93
- .RichEditor-hidePlaceholder
94
- .public-DraftEditorPlaceholder-root {
92
+ .Erk-DraftContainer .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
95
93
  display: none;
96
94
  }
package/dist/FormSteps/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaEditorStep.js CHANGED
@@ -83,8 +83,8 @@ function TextAreaStep({ step, editable }) {
83
83
  setFocus(false);
84
84
  }
85
85
  }, children: _jsx("div", { className: postview
86
- ? styles.postViewContainer + ' EF-DraftContainer'
87
- : styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: () => {
86
+ ? styles.postViewContainer + ' Erk-DraftContainer'
87
+ : styles.textContainer + ' Erk-DraftContainer', style: calcStyle(), onMouseEnter: () => {
88
88
  if (canEdit) {
89
89
  setHovering(true);
90
90
  }
package/dist/Icons/@ErkIcon.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import './@ErkIcon.css';
2
1
  export interface IconProps {
3
2
  fill?: string;
4
3
  contrast?: string;
@@ -6,9 +5,10 @@ export interface IconProps {
6
5
  style?: React.CSSProperties;
7
6
  className?: string;
8
7
  size?: number;
8
+ onClick?: () => void;
9
+ preserveAspectRatio?: 'none';
9
10
  }
10
11
  export declare function useIconProps(props: IconProps): IconProps & {
11
12
  width?: number;
12
13
  height?: number;
13
- color?: string;
14
14
  };
package/dist/Icons/@ErkIcon.js CHANGED
@@ -1,9 +1,8 @@
1
- import './@ErkIcon.css';
2
1
  export function useIconProps(props) {
3
2
  return {
4
- color: props.fill,
5
3
  width: props.size,
6
4
  height: props.size,
5
+ fill: 'currentColor',
7
6
  className: 'ErkIcon',
8
7
  ...props,
9
8
  };
package/dist/Shared/ErkDatePicker/ErkDatePicker.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { MobileDatePickerProps as MuiDatePickerProps, PickerValidDate } from '@mui/x-date-pickers';
3
3
  import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
4
- interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText'> {
4
+ interface ErkDatePickerProps extends Omit<MuiDatePickerProps<PickerValidDate>, 'ref' | 'onChange'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
5
5
  onChange?: (date: Date | null) => void;
6
6
  /** If it should display the timePicker */
7
7
  pickTime?: boolean;
package/dist/Shared/ErkDatePicker/ErkDatePicker.js CHANGED
@@ -5,7 +5,7 @@ import { styled, Dialog as MuiDialog } from '@mui/material';
5
5
  import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, PickersDay as MuiPickerDay, } from '@mui/x-date-pickers';
6
6
  import { StyledTextField } from '../ErkTextField/ErkTextField';
7
7
  const StyledDateTimePicker = styled(MuiDateTimePicker)(({ ...props }) => ({
8
- '& .EF-MuiInputBase-root': {
8
+ '& .Erk-MuiInputBase-root': {
9
9
  cursor: props.disabled ? 'default' : 'pointer',
10
10
  '& input': {
11
11
  cursor: props.disabled ? 'default' : 'pointer',
@@ -14,7 +14,7 @@ const StyledDateTimePicker = styled(MuiDateTimePicker)(({ ...props }) => ({
14
14
  },
15
15
  }));
16
16
  const StyledDatePicker = styled(MuiDatePicker)(({ ...props }) => ({
17
- '& .EF-MuiInputBase-root': {
17
+ '& .Erk-MuiInputBase-root': {
18
18
  cursor: props.disabled ? 'default' : 'pointer',
19
19
  '& input': {
20
20
  cursor: props.disabled ? 'default' : 'pointer',
@@ -22,7 +22,7 @@ const StyledDatePicker = styled(MuiDatePicker)(({ ...props }) => ({
22
22
  },
23
23
  }));
24
24
  const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
25
- '&.MuiPickersToolbar-root': {
25
+ '&.Erk-MuiPickersToolbar-root': {
26
26
  backgroundColor: theme.palette.primary.main,
27
27
  color: theme.palette.primary.contrastText,
28
28
  '& span': {
@@ -30,17 +30,17 @@ const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
30
30
  textTransform: 'capitalize',
31
31
  color: theme.palette.primary.contrastText,
32
32
  },
33
- '& .MuiDateTimePickerToolbar-dateContainer': {
33
+ '& .Erk-MuiDateTimePickerToolbar-dateContainer': {
34
34
  '& span': {
35
35
  fontSize: '1.1rem',
36
36
  },
37
37
  },
38
- '& .MuiDateTimePickerToolbar-timeDigitsContainer': {
38
+ '& .Erk-MuiDateTimePickerToolbar-timeDigitsContainer': {
39
39
  '& span': {
40
40
  fontSize: '2.3rem',
41
41
  },
42
42
  },
43
- '& .MuiDateTimePickerToolbar-ampmSelection': {
43
+ '& .Erk-MuiDateTimePickerToolbar-ampmSelection': {
44
44
  '& span': {
45
45
  color: theme.palette.primary.contrastText + '8b',
46
46
  '&.Mui-selected': {
@@ -51,13 +51,13 @@ const StyledDateTimeToolBar = styled(MuiDateTimePickerToolbar)(({ theme }) => ({
51
51
  },
52
52
  },
53
53
  cursor: 'default',
54
- '& .MuiTypography-root': {
54
+ '& .Erk-MuiTypography-root': {
55
55
  textTransform: 'capitalize',
56
56
  color: theme.palette.primary.contrastText,
57
57
  },
58
58
  }));
59
59
  const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
60
- '&.MuiPickersToolbar-root': {
60
+ '&.Erk-MuiPickersToolbar-root': {
61
61
  backgroundColor: theme.palette.primary.main,
62
62
  color: theme.palette.primary.contrastText,
63
63
  '& span': {
@@ -67,55 +67,36 @@ const StyledDateToolBar = styled(MuiDatePickerToolbar)(({ theme }) => ({
67
67
  },
68
68
  },
69
69
  cursor: 'default',
70
- '& .MuiTypography-root': {
70
+ '& .Erk-MuiTypography-root': {
71
71
  textTransform: 'capitalize',
72
72
  color: theme.palette.primary.contrastText,
73
73
  },
74
74
  }));
75
75
  const StyledDialog = styled(MuiDialog)(({ theme }) => ({
76
- '& .MuiDialog-paper': {
76
+ '& .Erk-MuiDialog-paper': {
77
77
  borderRadius: '5px',
78
78
  backgroundColor: 'transparent',
79
79
  },
80
- '& .EF-MuiDialogActions-root': {
81
- '& .EF-MuiButtonBase-root': { fontWeight: 700 },
82
- },
83
- '& .MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
84
- '& .MuiDayCalendar-weekDayLabel': {
85
- cursor: 'default',
86
- },
87
- '& .MuiPickersCalendarHeader-root': {
88
- marginTop: 5,
89
- },
90
- '& .MuiDateCalendar-root': {
91
- height: 'fit-content',
92
- },
93
- '& .MuiPickersSlideTransition-root': {
94
- minHeight: '195px',
95
- },
96
- '& .MuiClock-root': {
97
- marginTop: '34px',
98
- marginBottom: '30px',
99
- },
100
- '& .MuiTimeClock-arrowSwitcher': {
101
- top: 5,
80
+ '& .Erk-MuiDialogActions-root': {
81
+ '& .Erk-MuiButtonBase-root': { fontWeight: 700 },
102
82
  },
83
+ '& .Erk-MuiDialogContent-root': { scrollbarColor: theme.palette.primary.main + ' white' },
103
84
  }));
104
85
  const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
105
86
  fontWeight: 500,
106
87
  fontSize: '0.9rem',
107
88
  lineHeight: 'normal',
108
- '&.MuiPickersDay-today': {
89
+ '&.Erk-MuiPickersDay-today': {
109
90
  backgroundColor: theme.palette.primary.main + '33',
110
91
  },
111
- '&.MuiPickersDay-dayOutsideMonth': {
92
+ '&.Erk-MuiPickersDay-dayOutsideMonth': {
112
93
  color: 'rgb(0,0,0,0.4)',
113
94
  '&.Mui-selected': {
114
95
  color: theme.palette.primary.contrastText,
115
96
  },
116
97
  },
117
98
  }));
118
- function CustomDatePicker({ error, required, disabled, readOnly, helperText, pickTime = false, ...others }) {
99
+ function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', pickTime = false, ...others }) {
119
100
  if (pickTime) {
120
101
  return (_jsx(StyledDateTimePicker, { ampm: true, ...others, disabled: disabled ?? readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
121
102
  actionBar: {
@@ -123,8 +104,30 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
123
104
  },
124
105
  layout: {
125
106
  sx: {
107
+ //Pasar esto al componente de layout?
126
108
  backgroundColor: '#ffffff',
127
109
  textTransform: 'capitalize',
110
+ '& .Erk-MuiDayCalendar-weekDayLabel': {
111
+ gridColumn: 1,
112
+ gridRow: 2,
113
+ },
114
+ '& .Erk-MuiPickersLayout-root': {
115
+ backgroundColor: 'red',
116
+ },
117
+ '& .Erk-MuiPickersCalendarHeader-root': {
118
+ marginTop: '5px',
119
+ },
120
+ '& .Erk-MuiDateCalendar-root': {
121
+ height: 'fit-content',
122
+ },
123
+ '& .Erk-MuiClock-root': {
124
+ fontSize: 16,
125
+ marginTop: '34px',
126
+ marginBottom: '30px',
127
+ },
128
+ '& .Erk-MuiTimeClock-arrowSwitcher': {
129
+ top: 5,
130
+ },
128
131
  },
129
132
  },
130
133
  monthButton: {
@@ -139,12 +142,13 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
139
142
  },
140
143
  textField: {
141
144
  error,
145
+ size,
142
146
  disabled,
143
147
  helperText,
144
148
  placeholder: '',
145
149
  InputProps: {
146
150
  disabled: disabled ?? readOnly,
147
- endAdornment: _jsx(CalendarIcon, { fill: "#000000a0" }),
151
+ endAdornment: _jsx(CalendarIcon, { fill: "#000000a0", size: 22 }),
148
152
  },
149
153
  },
150
154
  }, slots: {
@@ -163,6 +167,15 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
163
167
  sx: {
164
168
  backgroundColor: '#ffffff',
165
169
  textTransform: 'capitalize',
170
+ '& .Erk-MuiDayCalendar-weekDayLabel': {
171
+ cursor: 'default',
172
+ },
173
+ '& .Erk-MuiPickersCalendarHeader-root': {
174
+ marginTop: '5px',
175
+ },
176
+ '& .Erk-MuiDateCalendar-root': {
177
+ height: 'fit-content',
178
+ },
166
179
  },
167
180
  },
168
181
  monthButton: {
@@ -176,16 +189,17 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, pic
176
189
  toolbarPlaceholder: '– –',
177
190
  },
178
191
  textField: {
192
+ size,
179
193
  error,
180
194
  disabled,
181
195
  helperText,
182
196
  placeholder: '',
183
197
  InputProps: {
184
198
  disabled: disabled ?? readOnly,
185
- endAdornment: _jsx(CalendarIcon, { fill: "#000000a0" }),
199
+ endAdornment: _jsx(CalendarIcon, { fill: "#000000a0", size: 22 }),
186
200
  },
187
201
  },
188
- }, localeText: {}, slots: {
202
+ }, slots: {
189
203
  day: StyledDay,
190
204
  dialog: StyledDialog,
191
205
  toolbar: StyledDateToolBar,
package/dist/Shared/ErkPhoneInput/EkrPhoneInput.d.ts CHANGED
@@ -6,6 +6,7 @@ interface ErkPhoneInputProps {
6
6
  onChange: (value: string) => void;
7
7
  inputRef?: any;
8
8
  readOnly?: boolean;
9
+ defaultCountry?: string;
9
10
  }
10
11
  /**
11
12
  * Generic phoneinput with apps designs. Is class due to the use in the react-hook-forms library
package/dist/Shared/ErkPhoneInput/EkrPhoneInput.js CHANGED
@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React, { useMemo } from 'react';
3
3
  import parse from 'libphonenumber-js/max';
4
4
  import { defaultCountries, FlagImage, parseCountry, usePhoneInput } from 'react-international-phone';
5
- import { useAppSelector } from '../../hooks';
6
5
  import isoCountries from 'i18n-iso-countries';
7
6
  import es from 'i18n-iso-countries/langs/es.json';
8
7
  import { InputAdornment, Select, styled } from '@mui/material';
@@ -14,7 +13,7 @@ const StyledSelect = styled(Select)(({ theme }) => ({
14
13
  input: {
15
14
  padding: 0,
16
15
  },
17
- '& .EF-MuiSelect-select.EF-MuiInputBase-inputSizeSmall': {
16
+ '& .Erk-MuiSelect-select.Erk-MuiInputBase-inputSizeSmall': {
18
17
  paddingBottom: 0,
19
18
  borderBottom: 'none',
20
19
  },
@@ -23,19 +22,18 @@ const StyledSelect = styled(Select)(({ theme }) => ({
23
22
  padding: 0,
24
23
  margin: 0,
25
24
  },
26
- '&.EF-MuiInputBase-root::before': {
25
+ '&.Erk-MuiInputBase-root::before': {
27
26
  borderBottom: 'none !important',
28
27
  },
29
- '&.EF-MuiInput-underline::after': {
28
+ '&.Erk-MuiInput-underline::after': {
30
29
  borderBottom: 'none',
31
30
  },
32
31
  }));
33
- function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disabled = false, ...others }) {
34
- const defaultCountry = useAppSelector((state) => state.global.countryCode);
32
+ function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disabled = false, defaultCountry, ...others }) {
35
33
  const { inputValue, handlePhoneValueChange, inputRef: phoneRef, country, setCountry, } = usePhoneInput({
36
34
  value: '+' + value,
37
35
  inputRef,
38
- defaultCountry: defaultCountry.toLowerCase(),
36
+ defaultCountry: (defaultCountry ?? 'CO').toLowerCase(),
39
37
  disableDialCodePrefill: true,
40
38
  disableDialCodeAndPrefix: true,
41
39
  onChange: (data) => onChange(data.phone.replace('+', '')),
@@ -49,7 +47,7 @@ function CustomPhoneInput({ value, onChange, inputRef, readOnly = false, disable
49
47
  };
50
48
  })
51
49
  .sort((a, b) => a.name.localeCompare(b.name)), []);
52
- return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, size: "small", variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
50
+ return (_jsx("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: _jsx(StyledTextField, { ...others, value: inputValue, readOnly: readOnly, disabled: disabled, fullWidth: true, variant: "outlined", onChange: handlePhoneValueChange, type: "tel", padding: "6px 12px 6px 6px", autoComplete: "tel", inputRef: phoneRef, onPaste: (e) => {
53
51
  const value = e.clipboardData.getData('Text');
54
52
  if (!value.startsWith('+')) {
55
53
  const phone = parse('+' + value);
package/dist/Shared/ErkSelect/ErkSelect.js CHANGED
@@ -5,51 +5,51 @@ export const StyledSelect = styled(MuiSelect)(({ theme, ...props }) => ({
5
5
  borderRadius: 10,
6
6
  opacity: props.disabled ? 0.5 : 1,
7
7
  backgroundColor: theme.palette.background.default,
8
- '&.EF-MuiInputBase-adornedEnd': {
8
+ '&.Erk-MuiInputBase-adornedEnd': {
9
9
  paddingRight: 7,
10
10
  },
11
- '& .EF-MuiSelect-select': {
11
+ '& .Erk-MuiSelect-select': {
12
12
  fontSize: '1rem',
13
13
  padding: '6px 12px',
14
14
  lineHeight: '1.188em',
15
15
  height: '1.188em',
16
- '&.EF-MuiInputBase-inputAdornedEnd': {
16
+ '&.Erk-MuiInputBase-inputAdornedEnd': {
17
17
  paddingRight: 0,
18
18
  },
19
19
  whiteSpace: 'nowrap',
20
20
  overflow: 'hidden',
21
21
  textOverflow: 'ellipsis',
22
22
  },
23
- '& .EF-MuiOutlinedInput-notchedOutline': {
23
+ '& .Erk-MuiOutlinedInput-notchedOutline': {
24
24
  borderColor: theme.palette.outline.main,
25
25
  },
26
- '&:hover:not(.Mui-readOnly) .EF-MuiOutlinedInput-notchedOutline': {
26
+ '&:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
27
27
  borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
28
28
  },
29
29
  '& .Mui-disabled, &.Mui-readOnly': {
30
30
  cursor: 'default',
31
31
  pointerEvents: 'none',
32
32
  },
33
- '&.EF-MuiInputBase-root.Mui-focused': {
34
- '& .EF-MuiOutlinedInput-notchedOutline': {
33
+ '&.Erk-MuiInputBase-root.Mui-focused': {
34
+ '& .Erk-MuiOutlinedInput-notchedOutline': {
35
35
  borderColor: theme.palette.primary.main,
36
36
  borderWidth: 2,
37
37
  },
38
38
  },
39
- '& .EF-MuiInputAdornment-root': {
39
+ '& .Erk-MuiInputAdornment-root': {
40
40
  marginLeft: 0,
41
41
  color: theme.palette.text.primary + 'a0',
42
42
  },
43
- '& .EF-MuiSelect-iconOpen': {
43
+ '& .Erk-MuiSelect-iconOpen': {
44
44
  transform: props.IconComponent ? 'none' : undefined,
45
45
  },
46
46
  }));
47
47
  export const StyledInputLabel = styled(MuiInputLabel)(({ theme, ...props }) => ({
48
48
  color: theme.palette.text.primary + '8a',
49
- '&.EF-MuiInputLabel-root.Mui-focused': {
49
+ '&.Erk-MuiInputLabel-root.Mui-focused': {
50
50
  color: theme.palette.primary.main,
51
51
  },
52
- '&.EF-MuiFormLabel-root:not(.EF-MuiInputLabel-shrink)': {
52
+ '&.Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
53
53
  transform: 'translate(12px, 5px) scale(1)',
54
54
  maxWidth: 'calc(100% - 40px)',
55
55
  },
@@ -74,7 +74,7 @@ function CustomSelect({ label, error, onChange, children, required, value = '',
74
74
  if (!readOnly && !disabled)
75
75
  setOpen(!open);
76
76
  }, children: _jsx(IconComponent, {}) })) : undefined, onFocus: (e) => {
77
- if (!e.relatedTarget?.closest('.EF-MuiPaper-root')) {
77
+ if (!e.relatedTarget?.closest('.Erk-MuiPaper-root')) {
78
78
  setOpen(true);
79
79
  }
80
80
  }, onOpen: () => setOpen(true), onClose: () => setOpen(false), inputProps: { disabled: readOnly || disabled }, children: children }), helperText && _jsx(StyledHelperText, { disabled: disabled, children: helperText })] }));
package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js CHANGED
@@ -4,22 +4,22 @@ import ErkSelect from '../ErkSelect/ErkSelect';
4
4
  import { StyledTextField } from '../ErkTextField/ErkTextField';
5
5
  const filter = createFilterOptions();
6
6
  const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, ...props }) => ({
7
- '& .EF-MuiInputBase-root': {
7
+ '& .Erk-MuiInputBase-root': {
8
8
  cursor: props.disabled || props.readOnly ? 'default' : 'text',
9
9
  },
10
- '& .EF-MuiInputBase-input': {
10
+ '& .Erk-MuiInputBase-input': {
11
11
  paddingRight: 24,
12
12
  },
13
- '& .EF-MuiAutocomplete-endAdornment': {
13
+ '& .Erk-MuiAutocomplete-endAdornment': {
14
14
  marginLeft: 0,
15
15
  marginRight: 9,
16
16
  cursor: 'inherit',
17
17
  color: theme.palette.text.primary + 'a0',
18
- '& .EF-MuiButtonBase-root': {
18
+ '& .Erk-MuiButtonBase-root': {
19
19
  padding: 0,
20
20
  },
21
21
  },
22
- '& .EF-MuiAutocomplete-popupIndicatorOpen': {
22
+ '& .Erk-MuiAutocomplete-popupIndicatorOpen': {
23
23
  transform: props.popupIcon ? 'none' : undefined,
24
24
  },
25
25
  }));
package/dist/Shared/ErkTextField/ErkTextField.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { OutlinedTextFieldProps as MuiTextFieldProps } from '@mui/material';
2
2
  import React, { CSSProperties } from 'react';
3
3
  interface StyleProps {
4
+ fontSize?: CSSProperties['fontSize'];
4
5
  padding?: CSSProperties['padding'];
5
6
  readOnly?: boolean;
6
7
  }
@@ -10,10 +11,10 @@ export declare const StyledTextField: import("@emotion/styled").StyledComponent<
10
11
  export type ErkTextFieldSlotProps = Omit<ErkTextFieldProps, 'value' | 'onChange'>;
11
12
  export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | 'onChange'>, StyleProps {
12
13
  /** The value of the textfield */
13
- value?: string;
14
+ value?: string | number;
14
15
  onChange?: (value: string) => void;
15
16
  /** The icon to display */
16
- IconComponent?: React.ElementType;
17
+ IconComponent?: React.ElementType | React.ReactNode;
17
18
  /** The max length of the string */
18
19
  maxLength?: number;
19
20
  }
package/dist/Shared/ErkTextField/ErkTextField.js CHANGED
@@ -1,23 +1,23 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { styled, TextField as MuiTextField, } from '@mui/material';
2
+ import { styled, TextField as MuiTextField, useTheme, } from '@mui/material';
3
3
  import React, { useCallback, useMemo } from 'react';
4
- import { useAppSelector } from '../../hooks';
5
- export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12px', ...props }) => ({
4
+ export const StyledTextField = styled(MuiTextField)(({ theme, label, size, fontSize = '1rem', padding = '6px 12px', ...props }) => ({
6
5
  borderRadius: 10,
7
6
  opacity: props.disabled ? 0.5 : 1,
8
- backgroundColor: theme.palette.stepBackgroundColor.default,
7
+ marginTop: label ? 5 : undefined,
8
+ minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
9
9
  '& input, textarea': {
10
+ fontSize,
10
11
  cursor: props.disabled || props.readOnly ? 'default' : 'text',
11
12
  padding,
12
13
  fontWeight: 400,
13
14
  color: theme.palette.text.primary,
14
- fontSize: '1rem',
15
- lineHeight: '1.188em', //Esto.
16
- height: '1.188em', //Esto.
15
+ lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
16
+ height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
17
17
  borderRadius: 10,
18
18
  },
19
- '& .EF-MuiFormLabel-root:not(.EF-MuiInputLabel-shrink)': {
20
- transform: 'translate(12px, 5px) scale(1)', //Quitando esto y el height queda con height de 40px
19
+ '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
20
+ transform: `translate(12px, ${size === 'small' ? 5 : 9}px) scale(1)`,
21
21
  },
22
22
  '& label': {
23
23
  color: theme.palette.text.primary + '8a',
@@ -26,12 +26,12 @@ export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12p
26
26
  textOverflow: 'ellipsis',
27
27
  },
28
28
  '& input + fieldset': {},
29
- '& .EF-MuiOutlinedInput-root': {
29
+ '& .Erk-MuiOutlinedInput-root': {
30
30
  '&.Mui-focused fieldset': {
31
31
  borderColor: theme.palette.primary.main,
32
32
  borderWidth: 2,
33
33
  },
34
- '& .EF-MuiOutlinedInput-notchedOutline': {
34
+ '& .Erk-MuiOutlinedInput-notchedOutline': {
35
35
  borderRadius: 10,
36
36
  borderColor: theme.palette.outline.main,
37
37
  '& legend': {
@@ -39,7 +39,7 @@ export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12p
39
39
  },
40
40
  },
41
41
  },
42
- '& .EF-MuiOutlinedInput-root:hover:not(.Mui-readOnly) .EF-MuiOutlinedInput-notchedOutline': {
42
+ '& .Erk-MuiOutlinedInput-root:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
43
43
  borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
44
44
  },
45
45
  '& label.Mui-focused': {
@@ -48,54 +48,59 @@ export const StyledTextField = styled(MuiTextField)(({ theme, padding = '6px 12p
48
48
  '& .Mui-error': {
49
49
  color: theme.palette.error.main,
50
50
  },
51
- '& .EF-MuiInputBase-adornedEnd': {
51
+ '& .Erk-MuiInputBase-adornedEnd': {
52
52
  paddingRight: '7px',
53
53
  },
54
- '& .EF-MuiFormHelperText-root': {
54
+ '& .Erk-MuiFormHelperText-root': {
55
55
  color: theme.palette.helperText.primary,
56
56
  position: 'relative',
57
57
  marginRight: props.maxLength ? 40 : 14,
58
58
  overflow: 'hidden',
59
+ minHeight: 20,
59
60
  textOverflow: 'ellipsis',
60
61
  },
61
- '& .EF-MuiFormHelperText-root.Mui-error': {
62
+ '& .Erk-MuiFormHelperText-root.Mui-error': {
62
63
  color: theme.palette.error.main,
63
64
  },
64
- '& .EF-MuiInputBase-multiline': {
65
+ '& .Erk-MuiInputBase-multiline': {
65
66
  padding: 0,
66
67
  },
67
- '& .EF-MuiInputAdornment-root': {
68
- paddingTop: 2,
68
+ '& .Erk-MuiInputAdornment-root': {
69
+ paddingTop: size === 'small' ? 2 : 0,
69
70
  marginRight: 0,
70
71
  },
71
72
  }));
72
- function CustomTextfield({ value = '', onChange, IconComponent, ...others }) {
73
+ function CustomTextfield({ onChange, value = '', IconComponent, size = 'small', ...others }) {
73
74
  const { readOnly, disabled, maxLength } = others;
74
- const { descriptionTextColor } = useAppSelector((state) => state.global.formStyle);
75
+ const { palette } = useTheme();
75
76
  const handleChange = useCallback((event) => {
76
77
  onChange?.(event.target.value);
77
78
  }, [onChange]);
78
79
  const inputProps = useMemo(() => ({
80
+ ...others.inputProps,
79
81
  spellCheck: true,
80
82
  endAdornment: IconComponent,
81
83
  disabled: !!readOnly || !!disabled,
82
- }), [disabled, readOnly, IconComponent]);
83
- const length = maxLength ? value?.length : null;
84
+ }), [others.inputProps, IconComponent, readOnly, disabled]);
85
+ const length = maxLength ? value.toString()?.length : null;
84
86
  if (maxLength) {
85
87
  inputProps.inputProps = { maxLength };
86
88
  }
87
- return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(StyledTextField, { ...others, value: value, fullWidth: true, size: "small", variant: "outlined", onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: others.helperText
89
+ const helperText = others.helperText ?? (others.error === false ? ' ' : undefined);
90
+ return (_jsxs("div", { style: { position: 'relative', width: '100%', maxWidth: '100%' }, children: [_jsx(StyledTextField, { ...others, value: value, fullWidth: true, size: size, helperText: helperText, variant: "outlined", onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: helperText
88
91
  ? {
89
92
  position: 'absolute',
90
93
  bottom: '3px',
91
94
  right: '8px',
95
+ minHeight: '20px',
92
96
  fontSize: '12px',
93
- color: descriptionTextColor,
97
+ color: palette.helperText.primary,
94
98
  }
95
99
  : {
96
100
  fontSize: '12px',
97
- color: descriptionTextColor,
101
+ color: palette.helperText.primary,
98
102
  textAlign: 'right',
103
+ minHeight: '20px',
99
104
  paddingRight: '8px',
100
105
  paddingTop: '2px',
101
106
  paddingBottom: '2px',
package/dist/Shared/ErkTimePicker/ErkTimePicker.js CHANGED
@@ -85,7 +85,7 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
85
85
  if (!readOnly && !disabled)
86
86
  setOpen(!open);
87
87
  }, children: _jsx(ClockIcon, {}) }), onFocus: (e) => {
88
- if (!e.relatedTarget?.closest('.EF-MuiPaper-root') && !readOnly && !disabled) {
88
+ if (!e.relatedTarget?.closest('.Erk-MuiPaper-root') && !readOnly && !disabled) {
89
89
  setOpen(true);
90
90
  }
91
91
  }, onOpen: () => {
package/dist/Shared/Rating/Ratings/ScaleRating.js CHANGED
@@ -6,13 +6,13 @@ const StyledRating = styled(MuiRating)(({ theme }) => ({
6
6
  '&.Mui-disabled': {
7
7
  opacity: 1,
8
8
  },
9
- '& .EF-MuiRating-iconFilled': {
9
+ '& .Erk-MuiRating-iconFilled': {
10
10
  color: theme.palette.primary.main,
11
11
  },
12
- '& .EF-MuiRating-iconEmpty': {
12
+ '& .Erk-MuiRating-iconEmpty': {
13
13
  color: theme.palette.outline.main,
14
14
  },
15
- '& .EF-MuiRating-visuallyHidden': {
15
+ '& .Erk-MuiRating-visuallyHidden': {
16
16
  display: 'none',
17
17
  },
18
18
  }));
package/dist/Shared/Toggle/Toggle.js CHANGED
@@ -3,7 +3,7 @@ import { styled, Switch as MuiSwitch } from '@mui/material';
3
3
  const Styled = styled(MuiSwitch)(({ theme, checked }) => ({
4
4
  marginTop: -6,
5
5
  marginBottom: -6,
6
- '& .EF-MuiSwitch-track': {
6
+ '& .Erk-MuiSwitch-track': {
7
7
  backgroundColor: checked ? theme.palette.primary.main : undefined,
8
8
  },
9
9
  }));
package/dist/Utils/MuiClassnameSetup.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SEED = "EF";
1
+ export declare const SEED = "Erk";
package/dist/Utils/MuiClassnameSetup.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
2
- export const SEED = 'EF';
2
+ export const SEED = 'Erk';
3
3
  ClassNameGenerator.configure((componentName) => `${SEED}-${componentName}`);
package/dist/index.css CHANGED
@@ -2,3 +2,13 @@ body {
2
2
  margin: 0;
3
3
  font-size: 16px;
4
4
  }
5
+
6
+ .ErkIcon {
7
+ width: 1em;
8
+ height: 1em;
9
+ fill: currentColor;
10
+ display: inline-block;
11
+ font-size: 1.5rem;
12
+ flex-shrink: 0;
13
+ user-select: none;
14
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arquimedes.co/eureka-forms",
3
3
  "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
4
- "version":"3.0.2-refactor",
4
+ "version":"3.0.4-refactor",
5
5
  "scripts": {
6
6
  "watch": "tsc --noEmit --watch --project tsconfig.app.json",
7
7
  "start": "vite",
package/dist/Icons/@ErkIcon.css DELETED
@@ -1,9 +0,0 @@
1
- .ErkIcon {
2
- width: 1em;
3
- height: 1em;
4
- fill: currentColor;
5
- display: inline-block;
6
- font-size: 1.5rem;
7
- flex-shrink: 0;
8
- user-select: none;
9
- }