@arquimedes.co/eureka-forms 3.0.57-new-steps → 3.0.59-new-steps

package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.module.css

@@ -1,22 +1,28 @@
 .input {
     width: 100%;
     box-sizing: border-box;
-    height: 40px;
+    height: 31px;
     padding: 6px 12px;
     font-size: 1rem;
-    color: var(--eureka-text, #333);
+    font-family: inherit;
+    color: var(--eureka-text, #293241);
     background-color: var(--eureka-bg, #fff);
-    border: 1px solid var(--eureka-outline, #ccc);
+    border: 1px solid var(--eureka-outline, #b8b8b8);
     border-radius: 10px;
     outline: none;
 }
 
-.input:hover:not(:disabled) {
-    border-color: var(--eureka-primary, #1976d2);
+.input::placeholder {
+    color: var(--eureka-text, #293241);
+    opacity: 0.5;
+}
+
+.input:hover:not(:disabled):not(:read-only) {
+    border-color: var(--eureka-primary, #3d5a7f);
 }
 
-.input:focus {
-    border-color: var(--eureka-primary, #1976d2);
+.input:focus:not(:read-only) {
+    border-color: var(--eureka-primary, #3d5a7f);
     border-width: 2px;
     padding: 5px 11px;
 }
@@ -40,7 +46,7 @@
     overflow-y: auto;
     padding: 4px;
     background-color: var(--eureka-bg, #fff);
-    border: 1px solid var(--eureka-outline, #ccc);
+    border: 1px solid var(--eureka-outline, #b8b8b8);
     border-radius: 10px;
     box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
 }
@@ -68,7 +74,7 @@
 
 .item[data-highlighted],
 .item:hover {
-    background-color: var(--eureka-primary, #1976d2);
+    background-color: var(--eureka-primary, #3d5a7f);
     color: #fff;
 }
 

package/dist/Shared/ErkIconButton/ErkIconButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ErkIconButtonProps {
+    /** Tooltip y nombre accesible del botón. */
+    title: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Muestra un spinner en lugar del icono (y deshabilita el botón). */
+    loading?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Botón de icono de la casa: cuadrado redondeado con la misma altura y borde
+ * que los inputs del form (theming vía variables --eureka-*), con tooltip.
+ */
+declare function ErkIconButton({ title, onClick, disabled, loading, children, className }: ErkIconButtonProps): JSX.Element;
+export default ErkIconButton;

package/dist/Shared/ErkIconButton/ErkIconButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress, Tooltip } from '@mui/material';
+import styles from './ErkIconButton.module.css';
+/**
+ * Botón de icono de la casa: cuadrado redondeado con la misma altura y borde
+ * que los inputs del form (theming vía variables --eureka-*), con tooltip.
+ */
+function ErkIconButton({ title, onClick, disabled = false, loading = false, children, className }) {
+    return (_jsx(Tooltip, { title: title, children: _jsx("span", { className: styles.wrap, children: _jsx("button", { type: "button", "aria-label": title, disabled: disabled || loading, className: className ? `${styles.button} ${className}` : styles.button, onClick: onClick, children: loading ? _jsx(CircularProgress, { size: 16 }) : children }) }) }));
+}
+export default ErkIconButton;

package/dist/Shared/ErkIconButton/ErkIconButton.module.css

@@ -0,0 +1,41 @@
+.wrap {
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+/* Mismo alto, radio y borde que los inputs del form (ErkTextField small) */
+.button {
+    height: 31px;
+    width: 31px;
+    box-sizing: border-box;
+    border: 1px solid var(--eureka-outline, #b8b8b8);
+    border-radius: 10px;
+    background-color: var(--eureka-bg, #fff);
+    color: var(--eureka-text, #293241);
+    display: grid;
+    place-items: center;
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.button svg {
+    width: 18px;
+    height: 18px;
+}
+
+.button:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-color: var(--eureka-primary, #3d5a7f);
+    color: var(--eureka-primary, #3d5a7f);
+}
+
+.button:focus-visible {
+    outline: 2px solid var(--eureka-primary, #3d5a7f);
+    outline-offset: 1px;
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}

package/dist/Shared/ErkLocationField/ErkLocationField.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from '@mui/material';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
 import { AddressFieldMode, LocationInputMode, } from '../../@Types/LocationFormStep';
 import ErkAddressAutocomplete from '../ErkAddressAutocomplete/ErkAddressAutocomplete';
 import { reverseGeocode } from '../ErkAddressAutocomplete/googlePlaces';
 import { applyAddressFields, fieldConfig } from './addressFields';
 import ErkTextField from '../ErkTextField/ErkTextField';
 import ErkButton from '../ErkButton/ErkButton';
+import ErkIconButton from '../ErkIconButton/ErkIconButton';
 import LocationIcon from '../../Icons/LocationIcon';
 import EditIcon from '../../Icons/EditIcon';
 import CloseIcon from '../../Icons/CloseIcon';
@@ -120,6 +121,8 @@ function ErkLocationField({ value, onChange, allowedModes, addressFields, region
     if (readOnly) {
         return (_jsx("div", { className: styles.readOnlyContainer, children: _jsxs("div", { className: styles.readOnlyCard, children: [_jsx("div", { className: styles.readOnlyIcon, children: _jsx(LocationIcon, { fill: "var(--eureka-primary)" }) }), _jsxs("div", { className: styles.readOnlyDetails, children: [value?.name && _jsx("span", { className: styles.readOnlyName, children: value.name }), _jsx("span", { className: styles.readOnlyAddress, children: value?.address ?? 'Ubicación no proporcionada' }), value?.latitude !== undefined && value?.longitude !== undefined && (_jsxs("span", { className: styles.readOnlyCoords, children: ["Coordenadas: ", value.latitude.toFixed(6), ", ", value.longitude.toFixed(6)] }))] })] }) }));
     }
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.inputRow, children: value?.address ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: _jsx(ErkTextField, { label: "Ubicaci\u00F3n seleccionada", value: value.address, readOnly: true, error: error, helperText: helperText, required: required, inputRef: inputRef }) }), canManual && (_jsx(Tooltip, { title: "Editar direcci\u00F3n manualmente", children: _jsx(IconButton, { "aria-label": "Editar direcci\u00F3n manualmente", className: styles.actionButton, onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) }) })), _jsx(Tooltip, { title: "Limpiar selecci\u00F3n", children: _jsx(IconButton, { "aria-label": "Limpiar selecci\u00F3n", className: styles.actionButton, onClick: clearValue, children: _jsx(CloseIcon, { fill: "currentColor" }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: canGoogle ? (_jsx(ErkAddressAutocomplete, { value: value, onChange: handleGoogle, regionCodes: regionCodes, error: error, required: required, inputRef: inputRef })) : canManual ? (_jsx(ErkTextField, { label: "Ingresa una ubicaci\u00F3n...", value: value?.address ?? '', onChange: (text) => onChange(text ? { source: LocationInputMode.MANUAL, address: text } : null), error: error, helperText: helperText, required: required, inputRef: inputRef })) : (_jsx(ErkTextField, { label: "Usa el bot\u00F3n para obtener tu ubicaci\u00F3n", value: "", readOnly: true, error: error, helperText: helperText, required: required, inputRef: inputRef })) }), canGps && (_jsx(Tooltip, { title: "Obtener ubicaci\u00F3n por GPS", children: _jsx(IconButton, { "aria-label": "Obtener ubicaci\u00F3n por GPS", className: styles.actionButton, disabled: gpsLoading, onClick: handleGps, children: gpsLoading ? _jsx(CircularProgress, { size: 18 }) : _jsx(LocationIcon, { fill: "currentColor" }) }) })), canManual && (_jsx(Tooltip, { title: "Ingresar direcci\u00F3n manualmente", children: _jsx(IconButton, { "aria-label": "Ingresar direcci\u00F3n manualmente", className: styles.actionButton, onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) }) }))] })) }), (gpsError ?? (!value?.address && canGoogle && helperText)) && (_jsx("div", { className: error || gpsError ? styles.errorText : styles.helperText, children: gpsError ?? helperText })), _jsxs(Dialog, { open: manualOpen, onClose: () => setManualOpen(false), maxWidth: "sm", fullWidth: true, slotProps: { paper: { className: styles.dialogPaper } }, children: [_jsx(DialogTitle, { className: styles.dialogTitle, children: "Ingresar Direcci\u00F3n" }), _jsx(DialogContent, { className: styles.dialogContent, children: _jsxs("div", { className: styles.manualGrid, children: [_jsx("div", { className: styles.manualRow, children: _jsx("div", { className: styles.col12, children: manualField('street', 'Calle / Carrera / Avenida (Línea 1)', true) }) }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('streetNumber', 'Número / Portal') }), _jsx("div", { className: styles.col6, children: manualField('unit', 'Apto / Oficina / Interior') })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('neighborhood', 'Barrio / Zona') }), _jsx("div", { className: styles.col6, children: manualField('city', 'Ciudad', true) })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col4, children: manualField('state', 'Estado / Provincia / Dpto') }), _jsx("div", { className: styles.col4, children: manualField('postalCode', 'Código Postal') }), _jsx("div", { className: styles.col4, children: manualField('country', 'País', true) })] })] }) }), _jsxs(DialogActions, { style: { padding: '16px 0 0 0', gap: '12px' }, children: [_jsx(ErkButton, { text: "Cancelar", variant: "outlined", onClick: () => setManualOpen(false) }), _jsx(ErkButton, { text: "Guardar", variant: "contained", disabled: !canSaveManual, onClick: saveManual })] })] })] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.inputRow, children: value?.address ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: _jsx("input", { ref: inputRef, className: error ? `${styles.plainInput} ${styles.plainInputError}` : styles.plainInput, value: value.address, readOnly: true, "aria-label": "Ubicaci\u00F3n seleccionada" }) }), canManual && (_jsx(ErkIconButton, { title: "Editar direcci\u00F3n manualmente", onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) })), _jsx(ErkIconButton, { title: "Limpiar selecci\u00F3n", onClick: clearValue, children: _jsx(CloseIcon, { fill: "currentColor" }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: canGoogle ? (_jsx(ErkAddressAutocomplete, { value: value, onChange: handleGoogle, regionCodes: regionCodes, error: error, required: required, inputRef: inputRef })) : canManual ? (_jsx("input", { ref: inputRef, className: error ? `${styles.plainInput} ${styles.plainInputError}` : styles.plainInput, placeholder: "Ingresa una ubicaci\u00F3n...", value: value?.address ?? '', required: required, onChange: (e) => onChange(e.target.value
+                                    ? { source: LocationInputMode.MANUAL, address: e.target.value }
+                                    : null) })) : (_jsx("input", { ref: inputRef, className: error ? `${styles.plainInput} ${styles.plainInputError}` : styles.plainInput, placeholder: "Usa el bot\u00F3n para obtener tu ubicaci\u00F3n", value: "", readOnly: true })) }), canGps && (_jsx(ErkIconButton, { title: "Obtener ubicaci\u00F3n por GPS", loading: gpsLoading, onClick: handleGps, children: _jsx(LocationIcon, { fill: "currentColor" }) })), canManual && (_jsx(ErkIconButton, { title: "Ingresar direcci\u00F3n manualmente", onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) }))] })) }), (gpsError ?? helperText) && (_jsx("div", { className: error || gpsError ? styles.errorText : styles.helperText, children: gpsError ?? helperText })), _jsxs(Dialog, { open: manualOpen, onClose: () => setManualOpen(false), maxWidth: "sm", fullWidth: true, slotProps: { paper: { className: styles.dialogPaper } }, children: [_jsx(DialogTitle, { className: styles.dialogTitle, children: "Ingresar Direcci\u00F3n" }), _jsx(DialogContent, { className: styles.dialogContent, children: _jsxs("div", { className: styles.manualGrid, children: [_jsx("div", { className: styles.manualRow, children: _jsx("div", { className: styles.col12, children: manualField('street', 'Calle / Carrera / Avenida (Línea 1)', true) }) }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('streetNumber', 'Número / Portal') }), _jsx("div", { className: styles.col6, children: manualField('unit', 'Apto / Oficina / Interior') })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('neighborhood', 'Barrio / Zona') }), _jsx("div", { className: styles.col6, children: manualField('city', 'Ciudad', true) })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col4, children: manualField('state', 'Estado / Provincia / Dpto') }), _jsx("div", { className: styles.col4, children: manualField('postalCode', 'Código Postal') }), _jsx("div", { className: styles.col4, children: manualField('country', 'País', true) })] })] }) }), _jsxs(DialogActions, { style: { padding: '16px 0 0 0', gap: '12px' }, children: [_jsx(ErkButton, { text: "Cancelar", variant: "outlined", onClick: () => setManualOpen(false) }), _jsx(ErkButton, { text: "Guardar", variant: "contained", disabled: !canSaveManual, onClick: saveManual })] })] })] }));
 }
 export default ErkLocationField;

package/dist/Shared/ErkLocationField/ErkLocationField.module.css

@@ -18,27 +18,38 @@
     min-width: 0;
 }
 
-.actionButton {
-    border: 1px solid var(--eureka-outline, #d9dee6) !important;
-    border-radius: 10px !important;
-    padding: 5px !important;
-    height: 33px !important;
-    width: 33px !important;
-    background-color: var(--eureka-bg, #fff) !important;
-    color: var(--eureka-text, #333) !important;
-    flex-shrink: 0;
-    transition: all 0.2s ease-in-out;
-    margin-top: 5px !important;
+/* Mismo input del buscador de direcciones, para estados sin autocomplete */
+.plainInput {
+    width: 100%;
+    box-sizing: border-box;
+    height: 31px;
+    padding: 6px 12px;
+    font-size: 1rem;
+    font-family: inherit;
+    color: var(--eureka-text, #293241);
+    background-color: var(--eureka-bg, #fff);
+    border: 1px solid var(--eureka-outline, #b8b8b8);
+    border-radius: 10px;
+    outline: none;
 }
 
-.actionButton:hover:not(:disabled) {
-    background-color: rgba(0, 0, 0, 0.04) !important;
-    border-color: var(--eureka-primary, #1976d2) !important;
-    color: var(--eureka-primary, #1976d2) !important;
+.plainInput::placeholder {
+    color: var(--eureka-text, #293241);
+    opacity: 0.5;
 }
 
-.actionButton:disabled {
-    opacity: 0.5;
+.plainInput:hover:not(:disabled):not(:read-only) {
+    border-color: var(--eureka-primary, #3d5a7f);
+}
+
+.plainInput:focus:not(:read-only) {
+    border-color: var(--eureka-primary, #3d5a7f);
+    border-width: 2px;
+    padding: 5px 11px;
+}
+
+.plainInputError {
+    border-color: var(--eureka-error, #e53935);
 }
 
 .helperText {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.57-new-steps",
+  "version":"3.0.59-new-steps",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",