valtech-components 2.0.779 → 2.0.780

package/lib/components/atoms/user-avatar/types.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Configuración del componente `val-user-avatar`.
+ *
+ * Avatar smart con cadena de fallback:
+ *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
+ *
+ * Diseñado para headers, perfiles, listas de usuarios y dropdowns.
+ *
+ * @example Con user completo (greeting hero):
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user(), size: 'medium' }" />
+ * ```
+ *
+ * @example Standalone fields:
+ * ```html
+ * <val-user-avatar [props]="{ name: 'Juan Pérez', avatarUrl: '/a.jpg', size: 'small' }" />
+ * ```
+ *
+ * @example Header avatar clickable (link a /profile):
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goToProfile()" />
+ * ```
+ */
+export interface UserAvatarMetadata {
+    /**
+     * User shape — pasa el resultado de `auth.user()` directamente. Cualquier
+     * combinación de `name`/`avatarUrl`/`email` se acepta. Tienen precedencia
+     * sobre los props sueltos (`name`, `email`, `avatarUrl`) abajo.
+     */
+    user?: {
+        name?: string;
+        avatarUrl?: string;
+        email?: string;
+        handle?: string;
+    } | null;
+    /** Nombre directo — usado si no hay `user` o si `user.name` está vacío. */
+    name?: string;
+    /** Email directo — usado si no hay `user` o si `user.email` está vacío. */
+    email?: string;
+    /** URL de avatar directa — usado si no hay `user` o si `user.avatarUrl` está vacío. */
+    avatarUrl?: string;
+    /**
+     * Tamaño:
+     * - `'xsmall'` 24px
+     * - `'small'` (default) 32px
+     * - `'medium'` 48px
+     * - `'large'` 72px
+     * - `'xlarge'` 96px
+     */
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Forma:
+     * - `'circle'` (default) — redondo completo
+     * - `'square'` — bordes redondeados pero cuadrado
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * Color de fondo para el modo iniciales/icono. Cuando no se provee, se
+     * derive deterministicamente del `name`/`email` (mismo input → mismo color)
+     * para que el mismo user tenga siempre el mismo color.
+     */
+    background?: string;
+    /** Color del texto/icono cuando no hay foto. Default `'#fff'`. */
+    foreground?: string;
+    /**
+     * Mostrar border. Útil para overlays sobre fotos o backgrounds dark.
+     * Default: `false`.
+     */
+    bordered?: boolean;
+    /** Habilita grayscale (e.g., user desactivado). Default: `false`. */
+    grayscale?: boolean;
+    /** Clase CSS extra. */
+    cssClass?: string;
+}

package/lib/components/atoms/user-avatar/user-avatar.component.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '@angular/core';
+import { UserAvatarMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-user-avatar`
+ *
+ * Avatar **smart** con cadena de fallback automática:
+ *
+ *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
+ *
+ * Si la imagen falla en cargar (404, CORS, etc.), automáticamente cae a las
+ * iniciales sin que el caller tenga que hacer nada. Color de fondo derivado
+ * deterministicamente del user para que el mismo user tenga siempre el mismo
+ * color (a menos que `background` se sobrescriba).
+ *
+ * @example
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goProfile()" />
+ * ```
+ */
+export declare class UserAvatarComponent {
+    private readonly props_;
+    private readonly imageFailed;
+    set props(value: UserAvatarMetadata | undefined);
+    onClick: EventEmitter<void>;
+    /** Subscribers — usado para condicionar cursor/aria. */
+    get hasClick(): boolean;
+    readonly resolvedProps: import("@angular/core").Signal<UserAvatarMetadata>;
+    /** Resuelve los campos del user (user prop > campos sueltos). */
+    private readonly resolvedUser;
+    /** URL de imagen — empty si no hay o si la carga falló. */
+    readonly imageUrl: import("@angular/core").Signal<string>;
+    readonly showImage: import("@angular/core").Signal<boolean>;
+    /** Iniciales — 1-2 chars derivados de name (preferred) o email prefix. */
+    readonly initials: import("@angular/core").Signal<string>;
+    readonly sizeClass: import("@angular/core").Signal<"small" | "medium" | "large" | "xlarge" | "xsmall">;
+    readonly shapeClass: import("@angular/core").Signal<"circle" | "square">;
+    /** Background — explicito o derivado deterministicamente del user. */
+    readonly bgColor: import("@angular/core").Signal<string>;
+    readonly ariaLabel: import("@angular/core").Signal<string>;
+    onImageError(): void;
+    onImageLoad(): void;
+    /**
+     * Hash determinista string → HSL color del rango Valtech (purples/blues).
+     * Mismo seed → mismo color (consistencia entre sessions).
+     */
+    private colorFromSeed;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UserAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserAvatarComponent, "val-user-avatar", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/notes-box/notes-box.component.d.ts

@@ -1,21 +1,33 @@
-import { OnInit } from '@angular/core';
 import { NotesBoxMetadata } from './types';
 import * as i0 from "@angular/core";
-export declare class NotesBoxComponent implements OnInit {
-    /**
-     * Notes box configuration object.
-     * @type {NotesBoxMetadata}
-     * @property text - The main text content.
-     * @property prefix - Optional prefix text (bold).
-     * @property color - The background color of the box.
-     * @property textColor - The color of the text.
-     * @property size - The size of the text and box.
-     * @property rounded - Whether the box has rounded corners.
-     * @property padding - Custom padding for the box.
-     */
+/**
+ * `val-notes-box` — callout / admonition para resaltar información dentro de un
+ * flujo de texto.
+ *
+ * Diseño tipo GitHub/Docusaurus: fondo tintado suave, accent en el borde
+ * izquierdo, prefijo en mayúsculas pequeñas. Funciona en light & dark.
+ *
+ * El color es un Ionic Color (primary, success, warning, danger, tertiary, …).
+ * No usa `ion-card` ni `ion-color="X"` como background — sino una mezcla
+ * `rgba(--ion-color-X-rgb, 0.08)` para no asfixiar el contenido.
+ *
+ * Renderiza inline HTML (`<strong>`, links via `processLinks`) cuando los
+ * flags están activos.
+ *
+ * @example
+ * <val-notes-box [props]="{
+ *   text: 'Recordá guardar tus cambios antes de salir.',
+ *   prefix: 'Tip',
+ *   color: 'tertiary',
+ *   textColor: 'dark',
+ *   size: 'medium',
+ *   rounded: true,
+ *   allowPartialBold: true,
+ * }"></val-notes-box>
+ */
+export declare class NotesBoxComponent {
+    /** Notes box configuration object. */
     props: NotesBoxMetadata;
-    constructor();
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NotesBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NotesBoxComponent, "val-notes-box", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/types.d.ts

@@ -213,6 +213,17 @@ export type ToolbarAction = {
     description?: string;
     /** Associated image (if any) */
     image?: ImageMetadata;
+    /**
+     * User shape para el modo `AVATAR` — habilita fallback inteligente:
+     * foto → iniciales (de `name`/`email`) → icono persona. Si se omite, el
+     * toolbar solo muestra la imagen pasada en `description`.
+     */
+    user?: {
+        name?: string;
+        email?: string;
+        avatarUrl?: string;
+        handle?: string;
+    } | null;
 };
 /**
  * Metadata for an icon.

package/lib/services/auth/auth-state.service.d.ts

@@ -87,6 +87,20 @@ export declare class AuthStateService {
      * Actualiza el userId y email (después de parsear el token).
      */
     updateUserInfo(userId: string, email: string): void;
+    /**
+     * Hidrata el state con campos del profile (nombre, handle, avatar, phone).
+     * Invocado tras `getProfile()` o `updateProfile()` para que consumers de
+     * `auth.user()` vean los campos enriched automáticamente.
+     *
+     * Cualquier campo `undefined` se ignora (no sobrescribe con null). Campos
+     * `null` explícitos se persisten (signal de "limpiado").
+     */
+    updateProfileFields(fields: {
+        name?: string | null;
+        handle?: string | null;
+        avatarUrl?: string | null;
+        phone?: string | null;
+    }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AuthStateService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AuthStateService>;
 }

package/lib/services/auth/auth.service.d.ts

@@ -256,16 +256,20 @@ export declare class AuthService implements OnDestroy {
     switchOrg(organizationId: string): Observable<SwitchOrgResponse>;
     /**
      * Obtiene el perfil del usuario autenticado.
-     * Incluye información de MFA y teléfono.
+     * Incluye información de MFA y teléfono. Hidrata el state automáticamente
+     * con `name/handle/avatarUrl/phone` para que `auth.user()` los retorne.
      */
     getProfile(): Observable<GetProfileResponse>;
     /**
-     * Actualiza el perfil del usuario.
+     * Actualiza el perfil del usuario. Sincroniza state con los nuevos values
+     * (name/phone) — el backend response no los echo'a pero el caller ya tiene
+     * los valores que mandó.
      */
     updateProfile(request: UpdateProfileRequest): Observable<UpdateProfileResponse>;
     /**
-     * Actualiza el avatar del usuario en el backend.
-     * Nota: El estado local del avatar se maneja a través de getProfile().
+     * Actualiza el avatar del usuario en el backend. Sincroniza state con el
+     * `avatarUrl` retornado para que el header / dashboard se refresquen sin
+     * necesidad de un getProfile adicional.
      */
     updateAvatar(request: UpdateAvatarRequest): Observable<UpdateAvatarResponse>;
     /**

package/lib/services/auth/types.d.ts

@@ -55,6 +55,14 @@ export interface AuthState {
     userId: string | null;
     /** Email del usuario */
     email: string | null;
+    /** Nombre completo del usuario (poblado tras `getProfile()`) */
+    name?: string | null;
+    /** Username/handle (poblado tras `getProfile()`) */
+    handle?: string | null;
+    /** URL del avatar (poblado tras `getProfile()`) */
+    avatarUrl?: string | null;
+    /** Teléfono (poblado tras `getProfile()`) */
+    phone?: string | null;
     /** Roles del usuario */
     roles: string[];
     /** Permisos del usuario (formato 'resource:action') */

package/lib/version.d.ts

@@ -2,4 +2,4 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export declare const VERSION = "2.0.779";
+export declare const VERSION = "2.0.780";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.779",
+  "version": "2.0.780",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -46,6 +46,8 @@ export * from './lib/components/atoms/pattern/types';
 export * from './lib/components/atoms/pattern/motifs';
 export * from './lib/components/atoms/glass/glass.component';
 export { GlassMetadata } from './lib/components/atoms/glass/types';
+export * from './lib/components/atoms/user-avatar/user-avatar.component';
+export { UserAvatarMetadata } from './lib/components/atoms/user-avatar/types';
 export * from './lib/components/molecules/alert-box/alert-box.component';
 export * from './lib/components/molecules/alert-box/types';
 export * from './lib/components/molecules/button-group/button-group.component';