valtech-components 2.0.983 → 2.0.984

package/lib/components/organisms/login-attempt-modal/login-attempt-modal.component.d.ts

@@ -0,0 +1,58 @@
+import { ButtonMetadata } from '../../types';
+import * as i0 from "@angular/core";
+/**
+ * `val-login-attempt-modal` — modal de confirmación de intento de inicio de sesión.
+ *
+ * Se abre cuando el usuario llega a la vista Seguridad vía
+ * `?token=...` desde el email/push de "nuevo acceso". Muestra el dispositivo
+ * detectado y dos acciones: confirmar que fue uno mismo (cierra sin hacer nada)
+ * o bloquear el dispositivo (ejecuta el token de acción).
+ *
+ * Inputs vía `componentProps` del ModalService. Sin `@Output` (no funcionan con
+ * `modalController.create()`) — usa callback `onBlock` y `_modalRef.dismiss`.
+ * Recibe los labels ya traducidos (agnóstico a i18n).
+ *
+ * Header canónico (Regla #5): sin `ion-title`, botón Cerrar texto en `slot=end`,
+ * título en el body con `val-display`.
+ */
+export declare class LoginAttemptModalComponent {
+    /** Título del modal (i18n ya resuelto). */
+    title: string;
+    /** Texto explicativo. */
+    body: string;
+    /** Descripción del dispositivo (navegador · OS · ubicación). */
+    deviceLabel: string;
+    /** Metadata secundaria (fecha, IP). Opcional. */
+    metaLabel: string;
+    /** Mensaje mostrado tras bloquear. */
+    doneLabel: string;
+    /** Labels de botones. */
+    mineLabel: string;
+    blockLabel: string;
+    closeLabel: string;
+    /** `true` si el dispositivo es móvil — cambia el icono. */
+    isMobile: boolean;
+    /**
+     * Callback que ejecuta el bloqueo (executeAction con el token) contra el
+     * backend. Lo provee el parent vía `componentProps`. Debe lanzar si falla.
+     */
+    onBlock?: () => Promise<void>;
+    /** Inyectado por `ModalService.open` — referencia para cerrar. */
+    _modalRef?: {
+        dismiss: (data?: unknown, role?: string) => void;
+    };
+    /** `true` tras bloquear con éxito — cambia el modal a estado "hecho". */
+    protected readonly done: import("@angular/core").WritableSignal<boolean>;
+    private working;
+    get deviceIcon(): string;
+    /** "Sí, fui yo" — cierra sin acción. El dispositivo ya está activo. */
+    confirmMine(): void;
+    /** "No fui yo" — ejecuta el bloqueo y pasa a estado done. */
+    confirmBlock(): Promise<void>;
+    close(): void;
+    get mineBtn(): Partial<ButtonMetadata>;
+    get blockBtn(): Partial<ButtonMetadata>;
+    get closeBtn(): Partial<ButtonMetadata>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoginAttemptModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoginAttemptModalComponent, "val-login-attempt-modal", never, { "title": { "alias": "title"; "required": false; }; "body": { "alias": "body"; "required": false; }; "deviceLabel": { "alias": "deviceLabel"; "required": false; }; "metaLabel": { "alias": "metaLabel"; "required": false; }; "doneLabel": { "alias": "doneLabel"; "required": false; }; "mineLabel": { "alias": "mineLabel"; "required": false; }; "blockLabel": { "alias": "blockLabel"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "onBlock": { "alias": "onBlock"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/organisms/security-view/security-view.component.d.ts

@@ -0,0 +1,130 @@
+import { ActionCardMetadata } from '../../molecules/action-card/types';
+import { ActionHeaderMetadata } from '../../molecules/action-header/types';
+import { PageLinksMetadata } from '../../molecules/page-links/types';
+import { ButtonMetadata } from '../../types';
+import { DeviceInfo, SessionInfo } from '../../../services/auth/types';
+import { SecurityViewConfig } from './types';
+import * as i0 from "@angular/core";
+/**
+ * `val-security-view` — vista Seguridad full-feature autocontenida (organism).
+ *
+ * Promovida desde `showcase` bajo el proceso de ADR-021. Reúne en una sola vista:
+ *  - **Sesiones activas** — única vista user-facing de "dónde tengo sesión".
+ *    Lista inline (limit 3) + modal "Ver todas" (`val-session-list-modal`) +
+ *    revoke individual / revoke-all (con confirmación).
+ *  - **Action-cards** — cambiar contraseña, cambiar email y MFA (cada una abre
+ *    el modal correspondiente de la lib).
+ *  - **Políticas legales** — links resueltos vía `LegalLinkService` (apps
+ *    satélite apuntan al main site).
+ *
+ * Deep-links del email (gateados por `config.handleDeepLinks`, default `true`):
+ *  - `?token=...&action=...` → modal `val-login-attempt-modal` (autorizar/bloquear
+ *    el nuevo acceso).
+ *  - `?mfaCode=...` → abre el modal MFA con el código pre-cargado.
+ *
+ * NO renderiza ion-content — vive dentro de val-page-wrapper.
+ *
+ * Auto-registra sus defaults i18n (es/en) en el constructor si el consumer no
+ * proveyó el namespace configurado (default `Settings.Security`).
+ */
+export declare class SecurityViewComponent {
+    private nav;
+    private i18n;
+    private deviceService;
+    private legalLink;
+    private toast;
+    private errors;
+    private router;
+    private route;
+    private sessionService;
+    private modalService;
+    private confirmDialog;
+    /**
+     * Config vía @Input (object-first). Si no se pasa, se cae al route data
+     * `securityConfig` (poblado por `provideValtechSecurityRoutes`).
+     * `resolvedConfig` mergea con los defaults — `@Input` gana sobre route data.
+     */
+    config?: SecurityViewConfig;
+    readonly resolvedConfig: import("@angular/core").Signal<Required<Omit<SecurityViewConfig, "onMfaCompleted">> & Pick<SecurityViewConfig, "onMfaCompleted">>;
+    /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
+    private get ns();
+    /**
+     * Lista de dispositivos del user. No se renderiza — solo alimenta el modal
+     * de confirmación de inicio de sesión (`handleActionTokenFromUrl`) para
+     * resolver un label legible desde el `targetId` del token.
+     */
+    protected devices: import("@angular/core").WritableSignal<DeviceInfo[]>;
+    readonly sessions: import("@angular/core").WritableSignal<SessionInfo[]>;
+    readonly sessionsLoading: import("@angular/core").WritableSignal<boolean>;
+    readonly isChangeEmailModalOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly isChangePasswordModalOpen: import("@angular/core").WritableSignal<boolean>;
+    readonly isMfaModalOpen: import("@angular/core").WritableSignal<boolean>;
+    /** Código MFA del deep-link `/verify` — pre-carga el modal en confirmación. */
+    readonly mfaPrefillCode: import("@angular/core").WritableSignal<string>;
+    readonly pageTitle: import("@angular/core").Signal<string>;
+    readonly pageDescription: import("@angular/core").Signal<string>;
+    readonly quickActionsTitle: import("@angular/core").Signal<string>;
+    readonly policiesTitle: import("@angular/core").Signal<string>;
+    readonly hasActionCards: import("@angular/core").Signal<boolean>;
+    readonly actionCards: import("@angular/core").Signal<ActionCardMetadata[]>;
+    /**
+     * Fuente única de links legales del producto. Se resuelven vía
+     * `LegalLinkService` — apps satélite apuntan al main site, el main site los
+     * deja relativos.
+     */
+    readonly policyLinksProps: import("@angular/core").Signal<PageLinksMetadata>;
+    readonly sessionsTitle: import("@angular/core").Signal<string>;
+    readonly sessionsEmptyLabel: import("@angular/core").Signal<string>;
+    readonly sessionsThis: import("@angular/core").Signal<string>;
+    readonly hasOtherSessions: import("@angular/core").Signal<boolean>;
+    /** Sesiones ordenadas: current primero, resto por createdAt desc. */
+    readonly sortedSessions: import("@angular/core").Signal<SessionInfo[]>;
+    /** Limit de sesiones mostradas inline. Si total > limit, "Ver todas" abre modal. */
+    private readonly VISIBLE_LIMIT;
+    readonly visibleSessions: import("@angular/core").Signal<SessionInfo[]>;
+    readonly hasMoreSessions: import("@angular/core").Signal<boolean>;
+    /** Titulo con count: "Sesiones activas (4)". Sin count si N=0. */
+    readonly sessionsTitleWithCount: import("@angular/core").Signal<string>;
+    readonly revokeOneButtonProps: import("@angular/core").Signal<Partial<ButtonMetadata>>;
+    readonly viewAllButtonProps: import("@angular/core").Signal<Partial<ButtonMetadata>>;
+    /** Action-header de Sesiones: title + count + boton "Cerrar todas las demas". */
+    readonly sessionsHeader: import("@angular/core").Signal<ActionHeaderMetadata>;
+    constructor();
+    /**
+     * Llega vía link del email de "nuevo acceso" (`?token=...`). Valida el token
+     * (sin ejecutar) y levanta el modal de confirmación. El bloqueo solo se
+     * ejecuta si el user confirma "no fui yo" dentro del modal.
+     */
+    private handleActionTokenFromUrl;
+    private toastTokenInvalid;
+    loadDevices(): Promise<void>;
+    onActionClick(action: ActionCardMetadata): void;
+    onMfaModalDismissed(): void;
+    /**
+     * El user llegó vía link del email, confirmó MFA en el modal. Cerramos el
+     * modal y, si hay hook `onMfaCompleted`, lo invocamos; si no, navegamos al
+     * `homeRoute` configurado — quedarse en Settings → Security daría la
+     * sensación de "tarea inconclusa" cuando el flow ya terminó.
+     */
+    onMfaEnabledViaDeeplink(): void;
+    /**
+     * Deep-link `/verify?...&verify-code=` → redirige a esta vista con `?mfaCode=`.
+     * Abre el modal MFA con el código pre-cargado en el paso de confirmación.
+     */
+    private handleMfaCodeFromUrl;
+    protected describeDevice(d: DeviceInfo): string;
+    protected formatDate(iso?: string): string;
+    private toastOk;
+    /** Icono según device: phone si UA mobile, sino laptop. */
+    deviceIcon(s: SessionInfo): string;
+    formatSessionMeta(s: SessionInfo): string;
+    onRevokeOne(sessionId: string): Promise<void>;
+    onRevokeAll(): Promise<void>;
+    /** Abre modal con la lista completa. Cada revoke pasa por `onRevoke`. */
+    openSessionsModal(): Promise<void>;
+    private loadSessions;
+    /** Lee del namespace configurado. */
+    protected tt(key: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SecurityViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SecurityViewComponent, "val-security-view", never, { "config": { "alias": "config"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/organisms/security-view/security-view.i18n.d.ts

@@ -0,0 +1,12 @@
+import { LanguagesContent } from '../../../services/i18n/types';
+/**
+ * Defaults i18n (es/en) embebidos en `val-security-view`. Auto-registrados en el
+ * constructor del componente si el consumer no proveyó el namespace
+ * (`Settings.Security` por default). Garantiza que nunca haya una key faltante
+ * evaluada por cada change-detection (ver nota en valtech-components/CLAUDE.md
+ * sobre el storm de CD con `val-debug-console`). El consumer puede override
+ * registrando el mismo namespace antes de que el componente monte.
+ *
+ * SOLO incluye las keys que la vista realmente usa.
+ */
+export declare const SECURITY_VIEW_I18N: LanguagesContent;

package/lib/components/organisms/security-view/security.routes.d.ts

@@ -0,0 +1,24 @@
+import { Routes } from '@angular/router';
+import { SecurityViewConfig } from './types';
+/**
+ * Helper para montar la vista Seguridad (`val-security-view`) como ruta en una
+ * app del factory. El `config` se pasa por route `data` (`securityConfig`) y el
+ * componente lo lee como fallback de su `@Input() config`.
+ *
+ * @example
+ * ```ts
+ * // settings.routes.ts
+ * export const settingsRoutes: Routes = [
+ *   ...provideValtechSecurityRoutes(),
+ *   { path: 'preferences', loadComponent: () => ... },
+ * ];
+ *
+ * // con config acotada:
+ * ...provideValtechSecurityRoutes({ config: { showPolicies: false } }),
+ * ...provideValtechSecurityRoutes({ config: { homeRoute: '/app/dashboard' } }),
+ * ```
+ */
+export declare function provideValtechSecurityRoutes(opts?: {
+    path?: string;
+    config?: SecurityViewConfig;
+}): Routes;

package/lib/components/organisms/security-view/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Configuración acotada de `val-security-view` (object-first). Tres ejes de
+ * variación permitidos — **NADA de slots arbitrarios** (ADR-021: una vista
+ * full-feature no abre slots; si falta algo, se promueve un nuevo punto de
+ * extensión):
+ *
+ *  - **secciones visibles** — gatean el render de cada bloque (sesiones,
+ *    action-cards de cambiar contraseña / email / MFA, políticas legales).
+ *  - **branding** — `i18nNamespace` para resolver los textos (default
+ *    `'Settings.Security'`).
+ *  - **comportamiento / callbacks** — manejo de deep-links del email
+ *    (`?token`/`?action`/`?mfaCode`), ruta de "home" tras completar MFA y un
+ *    hook opcional `onMfaCompleted`.
+ */
+export interface SecurityViewConfig {
+    /** Muestra la sección de sesiones activas. Default `true`. */
+    showSessions?: boolean;
+    /** Incluye la action-card "Cambiar contraseña". Default `true`. */
+    showChangePassword?: boolean;
+    /** Incluye la action-card "Cambiar email". Default `true`. */
+    showChangeEmail?: boolean;
+    /** Incluye la action-card "Autenticación de dos pasos (MFA)". Default `true`. */
+    showMfa?: boolean;
+    /** Muestra la sección de políticas legales relacionadas. Default `true`. */
+    showPolicies?: boolean;
+    /**
+     * Namespace i18n con el que la vista resuelve sus textos.
+     * Default `'Settings.Security'`.
+     */
+    i18nNamespace?: string;
+    /**
+     * Habilita el manejo de los deep-links del email
+     * (`?token`/`?action`/`?mfaCode`). Default `true`. Requiere que la vista esté
+     * montada como ruta (hay `ActivatedRoute`); en modo embebido sin ruta es no-op.
+     */
+    handleDeepLinks?: boolean;
+    /**
+     * Ruta a la que navegar tras completar MFA vía deep-link. Default `'/app/home'`.
+     * Ignorada si se provee `onMfaCompleted`.
+     */
+    homeRoute?: string;
+    /**
+     * Hook invocado cuando el usuario completa MFA vía deep-link. Si se provee, se
+     * llama **en lugar** de navegar a `homeRoute`. Útil para apps que quieran
+     * decidir el destino post-MFA.
+     */
+    onMfaCompleted?: () => void;
+}

package/lib/components/organisms/session-list-modal/session-list-modal.component.d.ts

@@ -0,0 +1,56 @@
+import { ButtonMetadata } from '../../types';
+import { SessionInfo } from '../../../services/auth/types';
+import * as i0 from "@angular/core";
+/**
+ * `val-session-list-modal` — modal de "Ver todas las sesiones activas". Organism
+ * compartido entre la vista Seguridad y la vista Cuenta del factory.
+ *
+ * Render reusa el mismo markup de la sección de sesiones inline (mismas clases
+ * CSS) pero sin truncar la lista.
+ *
+ * Inputs (vienen de `componentProps` del ModalService):
+ *  - `sessions` — snapshot inicial (mostrado al abrir)
+ *  - `thisLabel` / `revokeLabel` — i18n strings ya resueltas
+ *  - `onRevoke` — callback async que el parent ejecuta contra el backend; debe
+ *    retornar la lista actualizada para que el modal refresque en sitio.
+ *
+ * `@Output` events NO funcionan con `modalController.create()` — por eso usamos
+ * callback pasado por props + `_modalRef` para dismiss desde dentro.
+ *
+ * Header canónico (Regla #5): sin `ion-title`, botón Cerrar texto en `slot=end`,
+ * título en el body con `val-display`.
+ */
+export declare class SessionListModalComponent {
+    /** Snapshot inicial — el modal mantiene su propia copia y la refresca tras revoke. */
+    set sessions(value: SessionInfo[]);
+    /** Título del modal (ya traducido). */
+    title: string;
+    /** Label del botón cerrar del header (ya traducido). */
+    closeLabel: string;
+    /** Label "Esta sesión" (en idioma activo). */
+    thisLabel: string;
+    /** Label del botón revoke individual. */
+    revokeLabel: string;
+    /**
+     * Callback que ejecuta el revoke contra el backend y retorna la lista
+     * actualizada. Pasado por `componentProps` del ModalService.
+     */
+    onRevoke?: (sessionId: string) => Promise<SessionInfo[]>;
+    /**
+     * Inyectado por `ModalService.open` — referencia para cerrar desde dentro.
+     * Cualquier componente abierto vía el service recibe este objeto en
+     * `componentProps`.
+     */
+    _modalRef?: {
+        dismiss: (data?: unknown, role?: string) => void;
+    };
+    close(): void;
+    /** Lista local mutable — refrescada después de cada revoke confirmado. */
+    protected readonly sessionsLocal: import("@angular/core").WritableSignal<SessionInfo[]>;
+    handleRevoke(sessionId: string): Promise<void>;
+    get revokeBtn(): Partial<ButtonMetadata>;
+    deviceIcon(s: SessionInfo): string;
+    formatMeta(s: SessionInfo): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SessionListModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SessionListModalComponent, "val-session-list-modal", never, { "sessions": { "alias": "sessions"; "required": false; }; "title": { "alias": "title"; "required": false; }; "closeLabel": { "alias": "closeLabel"; "required": false; }; "thisLabel": { "alias": "thisLabel"; "required": false; }; "revokeLabel": { "alias": "revokeLabel"; "required": false; }; "onRevoke": { "alias": "onRevoke"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/organisms/session-list-modal/types.d.ts

@@ -0,0 +1,27 @@
+import { SessionInfo } from '../../../services/auth/types';
+/**
+ * Props de `val-session-list-modal` (organism compartido — lo reusan la vista
+ * Seguridad y la vista Cuenta).
+ *
+ * Se pasan por `componentProps` del `ModalService.openSheet(...)`. Son escalares
+ * + un callback (`onRevoke`) — NO `@Output`, porque los eventos no funcionan con
+ * `modalController.create()`. El componente es **agnóstico a i18n**: recibe los
+ * labels ya traducidos.
+ */
+export interface SessionListModalProps {
+    /** Snapshot inicial de sesiones — el modal mantiene su copia y la refresca tras revoke. */
+    sessions: SessionInfo[];
+    /** Título del modal (ya traducido). */
+    title: string;
+    /** Label del botón cerrar del header (ya traducido). */
+    closeLabel: string;
+    /** Label "Esta sesión" (en idioma activo). */
+    thisLabel: string;
+    /** Label del botón revoke individual. */
+    revokeLabel: string;
+    /**
+     * Callback que ejecuta el revoke contra el backend y retorna la lista
+     * actualizada para refrescar el modal en sitio.
+     */
+    onRevoke?: (sessionId: string) => Promise<SessionInfo[]>;
+}

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

package/package.json

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

package/public-api.d.ts

@@ -272,6 +272,12 @@ export * from './lib/components/organisms/settings-hub/settings-hub.component';
 export * from './lib/components/organisms/settings-hub/types';
 export * from './lib/components/organisms/settings-hub/settings-sections';
 export * from './lib/components/organisms/settings-hub/settings.routes';
+export * from './lib/components/organisms/security-view/security-view.component';
+export * from './lib/components/organisms/security-view/types';
+export * from './lib/components/organisms/security-view/security.routes';
+export * from './lib/components/organisms/login-attempt-modal/login-attempt-modal.component';
+export * from './lib/components/organisms/session-list-modal/session-list-modal.component';
+export * from './lib/components/organisms/session-list-modal/types';
 export * from './lib/components/organisms/skeleton-layout/skeleton-layout.component';
 export * from './lib/components/organisms/skeleton-layout/types';
 export * from './lib/components/organisms/faq/faq.component';