ywana-core8 0.1.94 → 0.1.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.94",
+  "version": "0.1.96",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/textfield2.css

@@ -97,19 +97,27 @@
 .textfield2-clear,
 .textfield2-password-toggle {
     position: absolute;
-    top: 50%;
+    /* Centrado respecto al input, no al contenedor completo */
+    top: calc(1.5rem + 1.25rem);  /* padding-top del contenedor + mitad de la altura del input */
     transform: translateY(-50%);
     right: 0.75rem;  /* Más espacio desde el borde */
     color: var(--text-color-light, #666);
     cursor: pointer;
     transition: color 0.2s ease;
     z-index: 2;
+    /* Asegurar que el icono tenga el tamaño correcto */
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /* Icons positioning for outlined variant */
 .textfield2-outlined .textfield2-clear,
 .textfield2-outlined .textfield2-password-toggle {
-    right: 0.75rem;  /* Alineado con el padding del input */
+    /* Para outlined, centramos respecto al input que tiene padding de 1rem */
+    top: 3.3rem;
 }
 
 .textfield2-clear:hover,
@@ -117,24 +125,11 @@
     color: var(--text-color, #333);
 }
 
-/* For fields without labels, the centering still works with transform */
+/* For fields without labels, ajustar posición */
 .textfield2.no-label .textfield2-clear,
 .textfield2.no-label .textfield2-password-toggle {
-    /* Remove top override - let transform handle centering */
-}
-
-.textfield2-password-toggle {
-    right: 2.5rem;  /* Más espacio para el clear button */
-}
-
-/* When both clear and password toggle are present */
-.textfield2.textfield2-password .textfield2-clear {
-    right: 2.5rem;
-}
-
-/* Outlined variant - icon spacing */
-.textfield2-outlined .textfield2-password-toggle {
-    right: 2.5rem;
+    /* Para campos sin label, centramos respecto al input directamente */
+    top: calc(0.5rem + 1.25rem);  /* padding-top reducido + mitad altura input */
 }
 
 .textfield2-outlined.textfield2-password .textfield2-clear {
@@ -375,21 +370,43 @@
     .textfield2 {
         padding-top: 1.25rem;
     }
-    
+
     .textfield2 > input,
     .textfield2 > textarea {
         font-size: 0.9rem;
         padding: 8px 8px 8px 0.4rem;
     }
-    
+
     .textfield2 > label {
         font-size: 0.8rem;
         left: 0.3rem;
     }
-    
+
     .textfield2-helper {
         font-size: 0.7rem;
     }
+
+    /* Ajustar posición de iconos en móvil */
+    .textfield2-clear,
+    .textfield2-password-toggle {
+        top: calc(1.25rem + 1.2rem);  /* padding-top móvil + mitad altura input móvil */
+        right: 0.5rem;
+        width: 1.3rem;
+        height: 1.3rem;
+    }
+
+    .textfield2.no-label .textfield2-clear,
+    .textfield2.no-label .textfield2-password-toggle {
+        top: calc(0.5rem + 1.2rem);  /* padding-top reducido + mitad altura input móvil */
+    }
+
+    .textfield2-password-toggle {
+        right: 2.2rem;
+    }
+
+    .textfield2.textfield2-password .textfield2-clear {
+        right: 2.2rem;
+    }
 }
 
 /* High contrast mode support */

package/src/widgets/login/LoginBox.example.js

@@ -0,0 +1,195 @@
+import React, { useState } from 'react'
+import { LoginBox } from './LoginBox'
+
+/**
+ * LoginBox Examples
+ * 
+ * Ejemplos de uso del componente LoginBox con diferentes configuraciones
+ * para verificar el centrado de iconos en los textfields.
+ */
+
+export const LoginBoxExamples = () => {
+    const [loginState, setLoginState] = useState({
+        loading: false,
+        message: '',
+        lastLogin: null
+    })
+
+    const handleLogin = (user, password) => {
+        console.log('Login attempt:', { user, password })
+        
+        setLoginState(prev => ({ ...prev, loading: true, message: '' }))
+        
+        // Simular proceso de login
+        setTimeout(() => {
+            if (user === 'admin' && password === 'admin') {
+                setLoginState({
+                    loading: false,
+                    message: '',
+                    lastLogin: { user, timestamp: new Date() }
+                })
+                console.log('Login successful!')
+            } else {
+                setLoginState({
+                    loading: false,
+                    message: 'Usuario o contraseña incorrectos',
+                    lastLogin: null
+                })
+            }
+        }, 2000)
+    }
+
+    const resetLogin = () => {
+        setLoginState({
+            loading: false,
+            message: '',
+            lastLogin: null
+        })
+    }
+
+    return (
+        <div style={{ 
+            padding: '2rem', 
+            backgroundColor: '#f5f5f5',
+            minHeight: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '2rem'
+        }}>
+            <h1>LoginBox Examples</h1>
+            
+            {/* Ejemplo 1: LoginBox básico */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>1. LoginBox Básico</h2>
+                <p>LoginBox estándar con labels en español</p>
+                <LoginBox
+                    userLabel="Usuario"
+                    passwordLabel="Contraseña"
+                    loginLabel="Iniciar Sesión"
+                    onOK={handleLogin}
+                    loading={loginState.loading}
+                    message={loginState.message}
+                />
+                {loginState.lastLogin && (
+                    <div style={{ 
+                        marginTop: '1rem', 
+                        padding: '1rem', 
+                        backgroundColor: '#e8f5e8',
+                        borderRadius: '4px',
+                        fontSize: '0.9rem'
+                    }}>
+                        ✅ Login exitoso: {loginState.lastLogin.user} 
+                        <br />
+                        {loginState.lastLogin.timestamp.toLocaleString()}
+                        <br />
+                        <button onClick={resetLogin} style={{ marginTop: '0.5rem' }}>
+                            Reset
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            {/* Ejemplo 2: LoginBox con valores predefinidos */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>2. LoginBox con Valores Predefinidos</h2>
+                <p>Para probar el centrado de iconos con texto existente</p>
+                <LoginBox
+                    userLabel="Email"
+                    userValue="usuario@ejemplo.com"
+                    passwordLabel="Password"
+                    passwordValue="password123"
+                    loginLabel="Sign In"
+                    onOK={(user, pass) => console.log('Login with preset values:', { user, pass })}
+                />
+            </div>
+
+            {/* Ejemplo 3: LoginBox en inglés */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>3. LoginBox en Inglés</h2>
+                <p>Labels en inglés para verificar diferentes longitudes de texto</p>
+                <LoginBox
+                    userLabel="Username"
+                    passwordLabel="Password"
+                    loginLabel="Log In"
+                    onOK={(user, pass) => console.log('English login:', { user, pass })}
+                />
+            </div>
+
+            {/* Ejemplo 4: LoginBox con contenido adicional */}
+            <div style={{ 
+                backgroundColor: 'white', 
+                padding: '2rem', 
+                borderRadius: '8px',
+                boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
+                maxWidth: '400px'
+            }}>
+                <h2>4. LoginBox con Contenido Adicional</h2>
+                <p>LoginBox con elementos adicionales en el footer</p>
+                <LoginBox
+                    userLabel="Usuario"
+                    passwordLabel="Contraseña"
+                    loginLabel="Entrar"
+                    onOK={(user, pass) => console.log('Login with extra content:', { user, pass })}
+                >
+                    <div style={{ 
+                        width: '100%', 
+                        textAlign: 'center', 
+                        marginTop: '1rem',
+                        fontSize: '0.9rem',
+                        color: '#666'
+                    }}>
+                        <a href="#" style={{ color: '#2196f3', textDecoration: 'none' }}>
+                            ¿Olvidaste tu contraseña?
+                        </a>
+                        <br />
+                        <span style={{ fontSize: '0.8rem' }}>
+                            ¿No tienes cuenta? <a href="#" style={{ color: '#2196f3' }}>Regístrate</a>
+                        </span>
+                    </div>
+                </LoginBox>
+            </div>
+
+            {/* Información de prueba */}
+            <div style={{ 
+                backgroundColor: '#fff3cd', 
+                padding: '1rem', 
+                borderRadius: '4px',
+                border: '1px solid #ffeaa7',
+                maxWidth: '600px'
+            }}>
+                <h3>💡 Información de Prueba</h3>
+                <p><strong>Para probar el login exitoso:</strong></p>
+                <ul>
+                    <li>Usuario: <code>admin</code></li>
+                    <li>Contraseña: <code>admin</code></li>
+                </ul>
+                <p><strong>Verificar centrado de iconos:</strong></p>
+                <ul>
+                    <li>Los iconos de "clear" (X) deben aparecer centrados verticalmente en los campos</li>
+                    <li>El icono de "visibility toggle" en el campo de contraseña debe estar centrado</li>
+                    <li>Probar en diferentes tamaños de pantalla (responsive)</li>
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default LoginBoxExamples