valtech-components 2.0.778 → 2.0.780

package/lib/components/atoms/glass/glass.component.d.ts

@@ -0,0 +1,43 @@
+import { GlassMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-glass`
+ *
+ * Capa **glassmorphism** reusable. Frosted glass overlay con backdrop blur,
+ * tint semi-translúcido, border sutil y shadow. Acepta cualquier contenido via
+ * `<ng-content>` — desde un texto a un card entero.
+ *
+ * Ideal sobre backgrounds decorativos (val-pattern, gradients, imágenes) para
+ * mejorar legibilidad del contenido sin tapar la decoración.
+ *
+ * @example Pill sobre patrón:
+ * ```html
+ * <val-glass><h1>Buenos días</h1></val-glass>
+ * ```
+ *
+ * @example Card glass (block) con auto tint:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', display: 'block', radius: '20px', padding: '24px' }">
+ *   <p>Contenido del card</p>
+ * </val-glass>
+ * ```
+ */
+export declare class GlassComponent {
+    private readonly props_;
+    set props(value: GlassMetadata | undefined);
+    /** Snapshot reactivo de los props con defaults aplicados. */
+    readonly resolvedProps: import("@angular/core").Signal<GlassMetadata>;
+    /**
+     * Resuelve el background según `tint` + `tintAlpha`.
+     * - `'dark'` → rgba purple-dark
+     * - `'light'` → rgba blanco
+     * - `'auto'` → CSS var con fallback (resolved vía media/class del tema)
+     * - custom string → usado tal cual
+     */
+    readonly bgStyle: import("@angular/core").Signal<string>;
+    readonly filterStyle: import("@angular/core").Signal<string>;
+    readonly borderStyle: import("@angular/core").Signal<"none" | "1px solid rgba(0, 0, 0, 0.08)" | "1px solid rgba(255, 255, 255, 0.08)">;
+    readonly shadowStyle: import("@angular/core").Signal<"none" | "0 2px 8px rgba(0, 0, 0, 0.15)" | "0 12px 40px rgba(0, 0, 0, 0.35)" | "0 4px 24px rgba(0, 0, 0, 0.25)">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlassComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlassComponent, "val-glass", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/atoms/glass/types.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Configuración del componente `val-glass`.
+ *
+ * Capa glassmorphism (frosted glass) — backdrop blur + tint semi-translúcido +
+ * border sutil + shadow. Diseñada para usarse SOBRE backgrounds decorativos
+ * (patterns, gradients, hero images) para mejorar legibilidad del contenido
+ * sin tapar la decoración.
+ *
+ * @example Pill sobre patrón (greeting hero):
+ * ```html
+ * <val-glass>
+ *   <h1>Buenos días, Juan</h1>
+ * </val-glass>
+ * ```
+ *
+ * @example Card glass auto-tint según tema:
+ * ```html
+ * <val-glass [props]="{ tint: 'auto', radius: '20px', padding: '24px', display: 'block' }">
+ *   <p>Contenido</p>
+ * </val-glass>
+ * ```
+ *
+ * @example Light glass sobre dark bg:
+ * ```html
+ * <val-glass [props]="{ tint: 'light', tintAlpha: 0.15, blur: 16 }">
+ *   ...
+ * </val-glass>
+ * ```
+ */
+export interface GlassMetadata {
+    /**
+     * Tint del fondo. Built-in:
+     * - `'dark'` (default) — `rgba(14, 4, 32, alpha)` — combina con palette Valtech purple
+     * - `'light'` — `rgba(255, 255, 255, alpha)` — para usar sobre dark bg
+     * - `'auto'` — switch por tema activo (`body.dark` → dark, sino light)
+     *
+     * También acepta una string CSS color custom (`rgba(...)`, `hsl(...)`, hex).
+     * Si pasas custom, `tintAlpha` se ignora.
+     */
+    tint?: 'dark' | 'light' | 'auto' | string;
+    /** Alpha del tint (0..1). Default `0.55`. Ignorado si `tint` es custom string. */
+    tintAlpha?: number;
+    /** Blur radius en px. Default `10`. Subir a 16-24 para más frosting. */
+    blur?: number;
+    /** Saturate filter % (acompañando blur). Default `140`. */
+    saturate?: number;
+    /** Border radius. Cualquier CSS length. Default `'14px'`. */
+    radius?: string;
+    /** Padding interno. CSS shorthand. Default `'10px 18px'`. */
+    padding?: string;
+    /** Mostrar border sutil (1px rgba blanco). Default `true`. */
+    border?: boolean;
+    /**
+     * Elevación de shadow:
+     * - `'none'` — sin shadow
+     * - `'sm'` — `0 2px 8px rgba(0,0,0,0.15)`
+     * - `'md'` (default) — `0 4px 24px rgba(0,0,0,0.25)`
+     * - `'lg'` — `0 12px 40px rgba(0,0,0,0.35)`
+     */
+    elevation?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Display mode:
+     * - `'inline-block'` (default) — fit-content, ideal para pills/badges
+     * - `'block'` — fill parent width, ideal para cards
+     * - `'flex'` — flex column, ideal para layouts internos
+     */
+    display?: 'inline-block' | 'block' | 'flex';
+    /** Clase CSS extra. */
+    cssClass?: string;
+}

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.778";
+export declare const VERSION = "2.0.780";

package/package.json

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

package/public-api.d.ts

@@ -44,6 +44,10 @@ export * from './lib/components/atoms/rights-footer/types';
 export * from './lib/components/atoms/pattern/pattern.component';
 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';