@arquimedes.co/eureka-forms 3.0.53-new-steps → 3.0.53-test

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 (102) hide show
  1. package/dist/@Types/FormStep.d.ts +2 -7
  2. package/dist/@Types/FormStep.js +1 -2
  3. package/dist/FormSteps/Step.js +0 -16
  4. package/dist/FormSteps/StepFunctions.js +0 -14
  5. package/dist/FormSteps/StepFunctions.test.js +0 -54
  6. package/dist/Shared/ErkDatePicker/ErkDatePicker.js +7 -5
  7. package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts +3 -2
  8. package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js +5 -4
  9. package/dist/constants/FormStepTypes.d.ts +1 -5
  10. package/dist/constants/FormStepTypes.js +0 -4
  11. package/dist/index.lib.d.ts +2 -4
  12. package/dist/index.lib.js +1 -3
  13. package/package.json +7 -8
  14. package/dist/@Types/AvailabilityFormStep.d.ts +0 -48
  15. package/dist/@Types/AvailabilityFormStep.js +0 -24
  16. package/dist/@Types/BankAccountFormStep.d.ts +0 -67
  17. package/dist/@Types/BankAccountFormStep.js +0 -14
  18. package/dist/@Types/BookingFormStep.d.ts +0 -166
  19. package/dist/@Types/BookingFormStep.js +0 -44
  20. package/dist/@Types/CalendarFormStep.d.ts +0 -192
  21. package/dist/@Types/CalendarFormStep.js +0 -48
  22. package/dist/@Types/CommunicationChannelFormStep.d.ts +0 -51
  23. package/dist/@Types/CommunicationChannelFormStep.js +0 -15
  24. package/dist/@Types/ConsentFormStep.d.ts +0 -36
  25. package/dist/@Types/ConsentFormStep.js +0 -8
  26. package/dist/@Types/EntityFormFormStep.d.ts +0 -66
  27. package/dist/@Types/EntityFormFormStep.js +0 -20
  28. package/dist/@Types/EventFormStep.d.ts +0 -52
  29. package/dist/@Types/EventFormStep.js +0 -13
  30. package/dist/@Types/ExternalReferenceFormStep.d.ts +0 -74
  31. package/dist/@Types/ExternalReferenceFormStep.js +0 -20
  32. package/dist/@Types/LocationFormStep.d.ts +0 -159
  33. package/dist/@Types/LocationFormStep.js +0 -46
  34. package/dist/@Types/NumericFormSteps.d.ts +0 -108
  35. package/dist/@Types/NumericFormSteps.js +0 -20
  36. package/dist/@Types/PredefinedSelectorFormStep.d.ts +0 -51
  37. package/dist/@Types/PredefinedSelectorFormStep.js +0 -39
  38. package/dist/@Types/StepRef.d.ts +0 -135
  39. package/dist/@Types/StepRef.js +0 -49
  40. package/dist/FormSteps/BookingStep/BookingStep.d.ts +0 -17
  41. package/dist/FormSteps/BookingStep/BookingStep.js +0 -14
  42. package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts +0 -7
  43. package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js +0 -32
  44. package/dist/FormSteps/CalendarStep/CalendarStep.d.ts +0 -7
  45. package/dist/FormSteps/CalendarStep/CalendarStep.js +0 -14
  46. package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.d.ts +0 -7
  47. package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.js +0 -31
  48. package/dist/FormSteps/LocationStep/LocationStep.d.ts +0 -10
  49. package/dist/FormSteps/LocationStep/LocationStep.js +0 -14
  50. package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts +0 -3
  51. package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js +0 -47
  52. package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css +0 -18
  53. package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts +0 -3
  54. package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js +0 -168
  55. package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.module.css +0 -94
  56. package/dist/FormSteps/NumberStep/NumberStep.d.ts +0 -10
  57. package/dist/FormSteps/NumberStep/NumberStep.js +0 -14
  58. package/dist/Icons/AddIcon.d.ts +0 -3
  59. package/dist/Icons/AddIcon.js +0 -7
  60. package/dist/Icons/EditIcon.d.ts +0 -3
  61. package/dist/Icons/EditIcon.js +0 -7
  62. package/dist/Icons/RemoveIcon.d.ts +0 -3
  63. package/dist/Icons/RemoveIcon.js +0 -7
  64. package/dist/Icons/ViewDayIcon.d.ts +0 -3
  65. package/dist/Icons/ViewDayIcon.js +0 -7
  66. package/dist/Icons/ViewWeekIcon.d.ts +0 -3
  67. package/dist/Icons/ViewWeekIcon.js +0 -7
  68. package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.d.ts +0 -19
  69. package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.js +0 -80
  70. package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.module.css +0 -82
  71. package/dist/Shared/ErkAddressAutocomplete/googlePlaces.d.ts +0 -29
  72. package/dist/Shared/ErkAddressAutocomplete/googlePlaces.js +0 -139
  73. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.d.ts +0 -31
  74. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js +0 -223
  75. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.module.css +0 -608
  76. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.d.ts +0 -28
  77. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.js +0 -117
  78. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.d.ts +0 -1
  79. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.js +0 -49
  80. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.d.ts +0 -1
  81. package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.js +0 -107
  82. package/dist/Shared/ErkCalendar/CalendarFunctions.d.ts +0 -28
  83. package/dist/Shared/ErkCalendar/CalendarFunctions.js +0 -121
  84. package/dist/Shared/ErkCalendar/CalendarPopovers.d.ts +0 -45
  85. package/dist/Shared/ErkCalendar/CalendarPopovers.js +0 -110
  86. package/dist/Shared/ErkCalendar/ErkCalendar.d.ts +0 -73
  87. package/dist/Shared/ErkCalendar/ErkCalendar.js +0 -293
  88. package/dist/Shared/ErkCalendar/ErkCalendar.module.css +0 -775
  89. package/dist/Shared/ErkCalendar/ErkCalendar.test.d.ts +0 -1
  90. package/dist/Shared/ErkCalendar/ErkCalendar.test.js +0 -171
  91. package/dist/Shared/ErkLocationField/ErkLocationField.d.ts +0 -23
  92. package/dist/Shared/ErkLocationField/ErkLocationField.js +0 -73
  93. package/dist/Shared/ErkLocationField/ErkLocationField.module.css +0 -29
  94. package/dist/Shared/ErkLocationField/addressFields.d.ts +0 -12
  95. package/dist/Shared/ErkLocationField/addressFields.js +0 -34
  96. package/dist/Shared/ErkLocationField/locationRestrictions.d.ts +0 -6
  97. package/dist/Shared/ErkLocationField/locationRestrictions.js +0 -51
  98. package/dist/Shared/ErkLocationInput/ErkLocationInput.d.ts +0 -15
  99. package/dist/Shared/ErkLocationInput/ErkLocationInput.js +0 -502
  100. package/dist/Shared/ErkLocationInput/ErkLocationInput.module.css +0 -115
  101. package/dist/Shared/ErkNumberField/ErkNumberField.d.ts +0 -42
  102. package/dist/Shared/ErkNumberField/ErkNumberField.js +0 -170
@@ -1,32 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useContext } from 'react';
3
- import { useFormStep } from '../../StepHooks';
4
- import FormContext from '../../../Contexts/FormContext';
5
- import { selectBreakPoint, useAppSelector } from '../../../hooks';
6
- import { calcStepWidth } from '../../StepFunctions';
7
- import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
8
- /**
9
- * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
10
- * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
11
- */
12
- function MaterialBookingStep({ step, editable, fetchSlots }) {
13
- const currentBreakPoint = useAppSelector(selectBreakPoint);
14
- const { postview, formStyle } = useAppSelector((state) => state.global);
15
- const formCtx = useContext(FormContext);
16
- const isReadOnly = !editable || postview;
17
- const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
18
- const cssVars = {
19
- width: widthStyle,
20
- '--eureka-outline': formStyle.outlineColor,
21
- '--eureka-primary': formStyle.primaryColor,
22
- '--eureka-text': formStyle.textColor,
23
- '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
24
- '--booking-accent': formStyle.secondaryContrastColor,
25
- };
26
- const { ref, value, onChange, error } = useFormStep(step, {
27
- defaultValue: null,
28
- rules: { required: step.required ? 'Selecciona una cita' : undefined },
29
- });
30
- return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: onChange, label: step.label, description: step.description, durationMinutes: step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: step.personSelectionMode, persons: step.persons, collectContact: step.collectContact, fetchSlots: fetchSlots, readOnly: isReadOnly, error: error?.message }) }));
31
- }
32
- export default MaterialBookingStep;
@@ -1,7 +0,0 @@
1
- import { CalendarStep } from '../../@Types/CalendarFormStep';
2
- import { StepProps } from '../Step';
3
- export interface CalendarStepProps extends StepProps {
4
- step: CalendarStep;
5
- }
6
- declare function CalendarStepComponent(props: CalendarStepProps): JSX.Element;
7
- export default CalendarStepComponent;
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { FormStyleTypes } from '../../constants/FormStepTypes';
3
- import MaterialCalendarStep from './MaterialCalendarStep/MaterialCalendarStep';
4
- import { useAppSelector } from '../../hooks';
5
- function CalendarStepComponent(props) {
6
- const { formStyle } = useAppSelector((state) => state.global);
7
- switch (formStyle.type) {
8
- case FormStyleTypes.MATERIAL:
9
- default: {
10
- return _jsx(MaterialCalendarStep, { ...props });
11
- }
12
- }
13
- }
14
- export default CalendarStepComponent;
@@ -1,7 +0,0 @@
1
- import { CalendarStepProps } from '../CalendarStep';
2
- /**
3
- * Conector del paso CALENDAR: enlaza el estado del formulario (`useFormStep`) y el
4
- * theming del form con el componente reutilizable `ErkCalendar` (en Shared).
5
- */
6
- declare function MaterialCalendarStep({ step, editable }: CalendarStepProps): JSX.Element;
7
- export default MaterialCalendarStep;
@@ -1,31 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useContext } from 'react';
3
- import { useFormStep } from '../../StepHooks';
4
- import FormContext from '../../../Contexts/FormContext';
5
- import { selectBreakPoint, useAppSelector } from '../../../hooks';
6
- import { calcStepWidth } from '../../StepFunctions';
7
- import ErkCalendar from '../../../Shared/ErkCalendar/ErkCalendar';
8
- /**
9
- * Conector del paso CALENDAR: enlaza el estado del formulario (`useFormStep`) y el
10
- * theming del form con el componente reutilizable `ErkCalendar` (en Shared).
11
- */
12
- function MaterialCalendarStep({ step, editable }) {
13
- const currentBreakPoint = useAppSelector(selectBreakPoint);
14
- const { postview, formStyle } = useAppSelector((state) => state.global);
15
- const formCtx = useContext(FormContext);
16
- const isReadOnly = !editable || postview;
17
- const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
18
- const cssVars = {
19
- width: widthStyle,
20
- '--eureka-outline': formStyle.outlineColor,
21
- '--eureka-primary': formStyle.primaryColor,
22
- '--eureka-text': formStyle.textColor,
23
- '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
24
- };
25
- const { ref, value, onChange, error } = useFormStep(step, {
26
- defaultValue: null,
27
- rules: { required: step.required ? 'Este campo es obligatorio' : undefined },
28
- });
29
- return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkCalendar, { value: value, onChange: onChange, defaultView: step.defaultView, enabledViews: step.enabledViews, allowedCategories: step.allowedCategories, eventTemplates: step.eventTemplates, showWeekends: step.showWeekends, minTime: step.minTime, maxTime: step.maxTime, allowRecurring: step.allowRecurring, timezone: step.timezone, readOnly: isReadOnly, error: error?.message }) }));
30
- }
31
- export default MaterialCalendarStep;
@@ -1,10 +0,0 @@
1
- import { LocationStep } from '../../@Types/LocationFormStep';
2
- import { StepProps } from '../Step';
3
- export interface LocationStepProps extends StepProps {
4
- /** The LocationStep to display */
5
- step: LocationStep;
6
- /** The icon to display */
7
- IconComponent?: React.ElementType;
8
- }
9
- declare function LocationStepComponent(props: LocationStepProps): JSX.Element;
10
- export default LocationStepComponent;
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { FormStyleTypes } from '../../constants/FormStepTypes';
3
- import MaterialLocationStep from './MaterialLocationStep/MaterialLocationStep';
4
- import { useAppSelector } from '../../hooks';
5
- function LocationStepComponent(props) {
6
- const { formStyle } = useAppSelector((state) => state.global);
7
- switch (formStyle.type) {
8
- case FormStyleTypes.MATERIAL:
9
- default: {
10
- return _jsx(MaterialLocationStep, { ...props });
11
- }
12
- }
13
- }
14
- export default LocationStepComponent;
@@ -1,3 +0,0 @@
1
- import { LocationStepProps } from '../LocationStep';
2
- declare function MaterialLocationStep({ step, editable }: LocationStepProps): JSX.Element;
3
- export default MaterialLocationStep;
@@ -1,47 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useContext } from 'react';
3
- import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
4
- import { useFormStep } from '../../StepHooks';
5
- import FormContext from '../../../Contexts/FormContext';
6
- import { selectBreakPoint, useAppSelector } from '../../../hooks';
7
- import { calcStepWidth } from '../../StepFunctions';
8
- import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
9
- import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
10
- import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
11
- import styles from './MaterialLocationStep.module.css';
12
- function MaterialLocationStep({ step, editable }) {
13
- const currentBreakPoint = useAppSelector(selectBreakPoint);
14
- const { postview } = useAppSelector((state) => state.global);
15
- const form = useContext(FormContext);
16
- const isReadOnly = !editable || postview;
17
- const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
18
- const { ref, value, onChange, error } = useFormStep(step, {
19
- defaultValue: step.defaultValue ?? null,
20
- rules: {
21
- required: step.required ? 'La ubicación es obligatoria' : undefined,
22
- validate: (val) => {
23
- if (!val)
24
- return step.required ? 'La ubicación es obligatoria' : true;
25
- if (val.source === LocationInputMode.MANUAL) {
26
- // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
27
- const detail = val.addressDetail;
28
- const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
29
- if (step.required && isRequired('street') && !detail?.street)
30
- return 'Por favor completa la calle en el formulario manual.';
31
- if (step.required && isRequired('city') && !detail?.city)
32
- return 'Por favor completa la ciudad en el formulario manual.';
33
- if (step.required && isRequired('country') && !detail?.country)
34
- return 'Por favor completa el país en el formulario manual.';
35
- return true;
36
- }
37
- if (val.latitude === undefined || val.longitude === undefined) {
38
- return step.required ? 'Coordenadas geográficas no capturadas.' : true;
39
- }
40
- // Restricciones geográficas (radio / geofence).
41
- return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
42
- },
43
- },
44
- });
45
- return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
46
- }
47
- export default MaterialLocationStep;
@@ -1,18 +0,0 @@
1
- .container {
2
- max-width: 100%;
3
- display: flex;
4
- flex-direction: column;
5
- gap: 6px;
6
- padding: 5px 10px 0;
7
- box-sizing: border-box;
8
- }
9
-
10
- .label {
11
- font-size: 14px;
12
- font-weight: 500;
13
- color: var(--eureka-text, #333);
14
- }
15
-
16
- .required {
17
- color: var(--eureka-error, #e53935);
18
- }
@@ -1,3 +0,0 @@
1
- import { NumberStepProps } from '../NumberStep';
2
- declare function MaterialNumberStep({ step, editable }: NumberStepProps): JSX.Element;
3
- export default MaterialNumberStep;
@@ -1,168 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useContext, useState, useEffect } from 'react';
3
- import { NumberStepType, } from '../../../@Types/NumericFormSteps';
4
- import { useFormStep } from '../../StepHooks';
5
- import FormContext from '../../../Contexts/FormContext';
6
- import { selectBreakPoint, useAppSelector } from '../../../hooks';
7
- import { calcStepWidth } from '../../StepFunctions';
8
- import ErkNumberField from '../../../Shared/ErkNumberField/ErkNumberField';
9
- import ErkSelect from '../../../Shared/ErkSelect/ErkSelect';
10
- import ErkMenuItem from '../../../Shared/ErkMenuItem';
11
- import styles from './MaterialNumberStep.module.css';
12
- const DEFAULT_CURRENCIES = ['COP', 'USD', 'EUR', 'MXN', 'CLP', 'BRL'];
13
- const DEFAULT_UNITS = ['unidades', 'kg', 'g', 'm', 'cm', 'l', 'ml', 'hrs', 'mes', 'año'];
14
- // ---------------------------------------------------------------------------
15
- // Helpers
16
- // ---------------------------------------------------------------------------
17
- function getNumericValue(value) {
18
- if (value === null || value === undefined)
19
- return null;
20
- if (typeof value === 'number')
21
- return value;
22
- return value.value;
23
- }
24
- // ---------------------------------------------------------------------------
25
- // Component
26
- // ---------------------------------------------------------------------------
27
- function MaterialNumberStep({ step, editable }) {
28
- const currentBreakPoint = useAppSelector(selectBreakPoint);
29
- const { postview, formStyle } = useAppSelector((state) => state.global);
30
- const form = useContext(FormContext);
31
- const isReadOnly = !editable || postview;
32
- const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
33
- const isComposite = step.numberType === NumberStepType.MONEY ||
34
- step.numberType === NumberStepType.MEASURE ||
35
- step.numberType === NumberStepType.UNIT_PRICE;
36
- // Narrowed views — only used after the corresponding numberType check
37
- const asMoney = step;
38
- const asMeasure = step;
39
- const asUnitPrice = step;
40
- const { ref, value, onChange, error } = useFormStep(step, {
41
- defaultValue: step.defaultValue ?? null,
42
- rules: {
43
- required: step.required ? 'Este campo es obligatorio' : undefined,
44
- validate: (val) => {
45
- if (!step.required && (val === null || val === undefined || val === ''))
46
- return true;
47
- if (step.required && (val === null || val === undefined || val === ''))
48
- return 'Este campo es obligatorio';
49
- const numVal = getNumericValue(val);
50
- if (numVal === null)
51
- return 'Formato numérico inválido';
52
- if (step.min !== undefined && numVal < step.min)
53
- return `El valor mínimo es ${step.min}`;
54
- if (step.max !== undefined && numVal > step.max)
55
- return `El valor máximo es ${step.max}`;
56
- return true;
57
- },
58
- },
59
- });
60
- // Currency/unit selectors
61
- const [selectedCurrency, setSelectedCurrency] = useState(() => {
62
- const v = value;
63
- return v?.currency ?? asMoney.currency ?? asUnitPrice.currency ?? 'COP';
64
- });
65
- const [selectedUnit, setSelectedUnit] = useState(() => {
66
- const v = value;
67
- return v?.unit ?? asMeasure.unit ?? asUnitPrice.unit ?? 'unidades';
68
- });
69
- // Sync when value changes externally
70
- useEffect(() => {
71
- if (value && typeof value === 'object') {
72
- if ('currency' in value && value.currency && value.currency !== selectedCurrency) {
73
- void Promise.resolve().then(() => setSelectedCurrency(value.currency));
74
- }
75
- if ('unit' in value && value.unit && value.unit !== selectedUnit) {
76
- void Promise.resolve().then(() => setSelectedUnit(value.unit));
77
- }
78
- }
79
- }, [value, selectedCurrency, selectedUnit]);
80
- // ---------------------------------------------------------------------------
81
- // Handlers: wrap ErkNumberField's (number | null) into the step value shape
82
- // ---------------------------------------------------------------------------
83
- const handleNumberChange = (num) => {
84
- if (num === null) {
85
- onChange(null);
86
- return;
87
- }
88
- if (step.numberType === NumberStepType.MONEY) {
89
- onChange({ value: num, currency: selectedCurrency });
90
- }
91
- else if (step.numberType === NumberStepType.MEASURE) {
92
- onChange({ value: num, unit: selectedUnit });
93
- }
94
- else if (step.numberType === NumberStepType.UNIT_PRICE) {
95
- onChange({ value: num, currency: selectedCurrency, unit: selectedUnit });
96
- }
97
- else {
98
- onChange(num);
99
- }
100
- };
101
- const handleCurrencyChange = (curr) => {
102
- const next = curr ?? 'USD';
103
- setSelectedCurrency(next);
104
- const num = getNumericValue(value);
105
- if (num !== null) {
106
- onChange(step.numberType === NumberStepType.UNIT_PRICE
107
- ? { value: num, currency: next, unit: selectedUnit }
108
- : { value: num, currency: next });
109
- }
110
- };
111
- const handleUnitChange = (u) => {
112
- const next = u ?? 'unidades';
113
- setSelectedUnit(next);
114
- const num = getNumericValue(value);
115
- if (num !== null) {
116
- onChange(step.numberType === NumberStepType.UNIT_PRICE
117
- ? { value: num, currency: selectedCurrency, unit: next }
118
- : { value: num, unit: next });
119
- }
120
- };
121
- // ---------------------------------------------------------------------------
122
- // Static suffix text shown inside ErkNumberField
123
- // ---------------------------------------------------------------------------
124
- const staticSuffix = () => {
125
- if (step.numberType === NumberStepType.PERCENTAGE)
126
- return '%';
127
- if (step.numberType === NumberStepType.MONEY && !asMoney.allowCurrencyChange)
128
- return asMoney.currency ?? 'USD';
129
- if (step.numberType === NumberStepType.MEASURE && !asMeasure.allowUnitChange)
130
- return asMeasure.unit ?? 'unidades';
131
- // UNIT_PRICE renders its adornment fully inside the field only when neither part is editable.
132
- if (step.numberType === NumberStepType.UNIT_PRICE && !asUnitPrice.allowCurrencyChange && !asUnitPrice.allowUnitChange)
133
- return `${asUnitPrice.currency ?? 'USD'} / ${asUnitPrice.unit ?? 'unidades'}`;
134
- if (!isComposite && step.suffix)
135
- return step.suffix;
136
- return undefined;
137
- };
138
- // ---------------------------------------------------------------------------
139
- // Resolved selector lists
140
- // ---------------------------------------------------------------------------
141
- const currenciesList = step.numberType === NumberStepType.MONEY || step.numberType === NumberStepType.UNIT_PRICE
142
- ? (step.availableCurrencies ?? DEFAULT_CURRENCIES)
143
- : [];
144
- const unitsList = step.numberType === NumberStepType.MEASURE || step.numberType === NumberStepType.UNIT_PRICE
145
- ? (step.availableUnits ?? DEFAULT_UNITS)
146
- : [];
147
- const isMoneyDynamic = step.numberType === NumberStepType.MONEY && asMoney.allowCurrencyChange;
148
- const isMeasureDynamic = step.numberType === NumberStepType.MEASURE && asMeasure.allowUnitChange;
149
- // UNIT_PRICE has two independent toggles: currency and unit can each be fixed or selectable.
150
- const isUnitPriceCurrencyDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowCurrencyChange;
151
- const isUnitPriceUnitDynamic = step.numberType === NumberStepType.UNIT_PRICE && !!asUnitPrice.allowUnitChange;
152
- const isUnitPriceDynamic = isUnitPriceCurrencyDynamic || isUnitPriceUnitDynamic;
153
- // ---------------------------------------------------------------------------
154
- // Shared CSS vars
155
- // ---------------------------------------------------------------------------
156
- const cssVars = {
157
- width: widthStyle,
158
- '--eureka-outline': formStyle.outlineColor,
159
- '--eureka-primary': formStyle.primaryColor,
160
- '--eureka-text': formStyle.textColor,
161
- '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
162
- };
163
- // ---------------------------------------------------------------------------
164
- // Read-only view
165
- // ---------------------------------------------------------------------------
166
- return (_jsx("div", { className: styles.container, style: cssVars, children: _jsxs("div", { className: styles.inputRow, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkNumberField, { label: step.label, value: getNumericValue(value), onChange: handleNumberChange, error: !!error, errorBorder: true, required: step.required, helperText: error?.message ?? step.description ?? undefined, inputRef: ref, min: step.min, max: step.max, decimals: step.numberType === NumberStepType.INTEGER ? 0 : (step.decimals ?? 2), suffix: staticSuffix(), readOnly: isReadOnly, spinner: step.spinner, step: step.step, placeholder: step.placeholder }) }), isMoneyDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })), isMeasureDynamic && (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })), isUnitPriceDynamic && (_jsxs(_Fragment, { children: [isUnitPriceCurrencyDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedCurrency, onChange: handleCurrencyChange, clearable: false, children: currenciesList.map((c) => (_jsx(ErkMenuItem, { value: c, children: c }, c))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.currency ?? 'USD' })), _jsx("span", { className: styles.dividerSlash, children: "/" }), isUnitPriceUnitDynamic ? (_jsx("div", { className: styles.selectWrapper, children: _jsx(ErkSelect, { value: selectedUnit, onChange: handleUnitChange, clearable: false, children: unitsList.map((u) => (_jsx(ErkMenuItem, { value: u, children: u }, u))) }) })) : (_jsx("span", { className: styles.suffixText, children: asUnitPrice.unit ?? 'unidades' }))] }))] }) }));
167
- }
168
- export default MaterialNumberStep;
@@ -1,94 +0,0 @@
1
- .container {
2
- display: flex;
3
- flex-direction: column;
4
- width: 100%;
5
- }
6
-
7
- .inputRow {
8
- display: flex;
9
- align-items: flex-start;
10
- gap: 12px;
11
- width: 100%;
12
- }
13
-
14
- .selectWrapper {
15
- width: 100px;
16
- min-width: 90px;
17
- }
18
-
19
- .dividerSlash {
20
- align-self: flex-start;
21
- display: flex;
22
- align-items: center;
23
- justify-content: center;
24
- height: 40px;
25
- font-size: 20px;
26
- font-weight: bold;
27
- color: var(--eureka-text, #333);
28
- opacity: 0.6;
29
- margin-left: 2px;
30
- margin-right: 2px;
31
- }
32
-
33
- .suffixText {
34
- align-self: flex-start;
35
- display: flex;
36
- align-items: center;
37
- height: 40px;
38
- font-size: 14px;
39
- font-weight: 600;
40
- color: var(--eureka-primary, #1976d2);
41
- padding: 0 4px;
42
- user-select: none;
43
- }
44
-
45
- /* Read-Only Styles */
46
- .readOnlyContainer {
47
- width: 100%;
48
- margin-bottom: 8px;
49
- }
50
-
51
- .readOnlyCard {
52
- display: flex;
53
- align-items: center;
54
- padding: 12px 16px;
55
- border: 1px solid var(--eureka-outline, #e0e0e0);
56
- border-radius: 12px;
57
- background-color: var(--eureka-bg, #ffffff);
58
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
59
- transition: box-shadow 0.2s ease, border-color 0.2s ease;
60
- }
61
-
62
- .readOnlyCard:hover {
63
- border-color: var(--eureka-primary, #1976d2);
64
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
65
- }
66
-
67
- .readOnlyDetails {
68
- display: flex;
69
- flex-direction: column;
70
- gap: 2px;
71
- width: 100%;
72
- }
73
-
74
- .readOnlyLabel {
75
- font-size: 11px !important;
76
- text-transform: uppercase;
77
- letter-spacing: 0.5px;
78
- color: var(--eureka-text, #333) !important;
79
- opacity: 0.6;
80
- font-weight: 600 !important;
81
- }
82
-
83
- .readOnlyValue {
84
- font-size: 16px !important;
85
- font-weight: 600 !important;
86
- color: var(--eureka-primary, #1976d2) !important;
87
- }
88
-
89
- .readOnlyDesc {
90
- font-size: 12px !important;
91
- color: var(--eureka-text, #333) !important;
92
- opacity: 0.5;
93
- margin-top: 2px !important;
94
- }
@@ -1,10 +0,0 @@
1
- import { NumberStep } from '../../@Types/FormStep';
2
- import { StepProps } from '../Step';
3
- export interface NumberStepProps extends StepProps {
4
- /** The NumberStep to display */
5
- step: NumberStep;
6
- /** The icon to display */
7
- IconComponent?: React.ElementType;
8
- }
9
- declare function NumberStepComponent(props: NumberStepProps): JSX.Element;
10
- export default NumberStepComponent;
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { FormStyleTypes } from '../../constants/FormStepTypes';
3
- import MaterialNumberStep from './MaterialNumberStep/MaterialNumberStep';
4
- import { useAppSelector } from '../../hooks';
5
- function NumberStepComponent(props) {
6
- const { formStyle } = useAppSelector((state) => state.global);
7
- switch (formStyle.type) {
8
- case FormStyleTypes.MATERIAL:
9
- default: {
10
- return _jsx(MaterialNumberStep, { ...props });
11
- }
12
- }
13
- }
14
- export default NumberStepComponent;
@@ -1,3 +0,0 @@
1
- import { IconProps } from './@ErkIcon';
2
- declare function AddIcon(props: IconProps): JSX.Element;
3
- export default AddIcon;
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useIconProps } from './@ErkIcon';
3
- function AddIcon(props) {
4
- const iconProps = useIconProps(props);
5
- return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }));
6
- }
7
- export default AddIcon;
@@ -1,3 +0,0 @@
1
- import { IconProps } from './@ErkIcon';
2
- declare function EditIcon(props: IconProps): JSX.Element;
3
- export default EditIcon;
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useIconProps } from './@ErkIcon';
3
- function EditIcon(props) {
4
- const iconProps = useIconProps(props);
5
- return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) }));
6
- }
7
- export default EditIcon;
@@ -1,3 +0,0 @@
1
- import { IconProps } from './@ErkIcon';
2
- declare function RemoveIcon(props: IconProps): JSX.Element;
3
- export default RemoveIcon;
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useIconProps } from './@ErkIcon';
3
- function RemoveIcon(props) {
4
- const iconProps = useIconProps(props);
5
- return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M19 13H5v-2h14v2z" }) }));
6
- }
7
- export default RemoveIcon;
@@ -1,3 +0,0 @@
1
- import { IconProps } from './@ErkIcon';
2
- declare function ViewDayIcon(props: IconProps): JSX.Element;
3
- export default ViewDayIcon;
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useIconProps } from './@ErkIcon';
3
- function ViewDayIcon(props) {
4
- const iconProps = useIconProps(props);
5
- return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 21h19v-2H2v2zm0-4h19v-8H2v8zm0-10h19V5H2v2z" }) }));
6
- }
7
- export default ViewDayIcon;
@@ -1,3 +0,0 @@
1
- import { IconProps } from './@ErkIcon';
2
- declare function ViewWeekIcon(props: IconProps): JSX.Element;
3
- export default ViewWeekIcon;
@@ -1,7 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useIconProps } from './@ErkIcon';
3
- function ViewWeekIcon(props) {
4
- const iconProps = useIconProps(props);
5
- return (_jsx("svg", { ...iconProps, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z" }) }));
6
- }
7
- export default ViewWeekIcon;
@@ -1,19 +0,0 @@
1
- import React from 'react';
2
- import { LocationStepValue } from '../../@Types/LocationFormStep';
3
- export interface ErkAddressAutocompleteProps {
4
- value?: LocationStepValue | null;
5
- onChange: (value: LocationStepValue) => void;
6
- /** ISO-2 para acotar las sugerencias (ej. ['co']). */
7
- regionCodes?: string[];
8
- placeholder?: string;
9
- error?: boolean;
10
- required?: boolean;
11
- readOnly?: boolean;
12
- inputRef?: React.Ref<HTMLInputElement>;
13
- }
14
- /**
15
- * Buscador de direcciones con el `Autocomplete` de Base UI + Google Places.
16
- * Emite un `LocationStepValue` (source GOOGLE_PLACES) con el desglose estructurado.
17
- */
18
- declare function ErkAddressAutocomplete({ value, onChange, regionCodes, placeholder, error, required, readOnly, inputRef, }: ErkAddressAutocompleteProps): JSX.Element;
19
- export default ErkAddressAutocomplete;