@block-auth.io/angular 0.1.0

package/src/lib/provide-block-auth.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+
+vi.mock('@wagmi/core', () => ({
+  createConfig: vi.fn(() => ({ connectors: [] })),
+  connect: vi.fn(), disconnect: vi.fn(), getAccount: vi.fn(() => ({})),
+  signMessage: vi.fn(), watchAccount: vi.fn(() => () => undefined), http: vi.fn(),
+}));
+vi.mock('@wagmi/connectors', () => ({
+  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+}));
+
+import { provideBlockAuth, injectBlockAuthClient } from './provide-block-auth';
+
+@Component({
+  selector: 'ba-probe', standalone: true,
+  template: `<span data-testid="probe">{{ kind }}</span>`,
+})
+class ProbeComponent {
+  client = injectBlockAuthClient();
+  kind = typeof this.client.web3.signup;
+}
+
+describe('provideBlockAuth', () => {
+  it('provee el client y injectBlockAuthClient lo inyecta', async () => {
+    await render(ProbeComponent, {
+      providers: [provideBlockAuth({ apiKey: 'k', apiSecret: 's', walletConnectProjectId: 'pid' })],
+    });
+    expect(screen.getByTestId('probe').textContent).toBe('function');
+  });
+
+  it('inyecta el stylesheet del SDK en head una sola vez', async () => {
+    await render(ProbeComponent, {
+      providers: [provideBlockAuth({ apiKey: 'k', apiSecret: 's', walletConnectProjectId: 'pid' })],
+    });
+    expect(document.head.querySelectorAll('style[data-blockauth]').length).toBe(1);
+  });
+
+  it('injectBlockAuthClient sin provider lanza error claro', async () => {
+    await expect(render(ProbeComponent)).rejects.toThrow(/provideBlockAuth/);
+  });
+});

package/src/lib/provide-block-auth.ts

@@ -0,0 +1,43 @@
+import { DOCUMENT } from '@angular/common';
+import { InjectionToken, inject, makeEnvironmentProviders, type EnvironmentProviders } from '@angular/core';
+import { createBlockAuthClient, type BlockAuthClient, type BlockAuthClientConfig } from '@block-auth.io/core';
+import { BLOCKAUTH_CSS } from '../styles.generated';
+
+const BLOCK_AUTH_CLIENT = new InjectionToken<BlockAuthClient>('BLOCK_AUTH_CLIENT');
+
+function injectSdkStyles(doc: Document): void {
+  if (doc.head.querySelector('style[data-blockauth]')) return;
+  const style = doc.createElement('style');
+  style.setAttribute('data-blockauth', '');
+  style.textContent = BLOCKAUTH_CSS;
+  doc.head.appendChild(style);
+}
+
+/**
+ * Registra el BlockAuthClient en el injector (equivalente Angular del plugin
+ * createBlockAuth de Vue / <BlockAuthProvider> de React) e inyecta el
+ * stylesheet del SDK en <head> (idempotente: solo una vez por documento).
+ */
+export function provideBlockAuth(config: BlockAuthClientConfig): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    {
+      provide: BLOCK_AUTH_CLIENT,
+      useFactory: () => {
+        const doc = inject(DOCUMENT);
+        if (doc?.head) injectSdkStyles(doc);   // SSR-safe: only touch <head> in browser
+        return createBlockAuthClient(config);
+      },
+    },
+  ]);
+}
+
+export function injectBlockAuthClient(): BlockAuthClient {
+  const client = inject(BLOCK_AUTH_CLIENT, { optional: true });
+  if (!client) {
+    throw new Error('[block-auth] injectBlockAuthClient() requiere provideBlockAuth(config) en los providers');
+  }
+  return client;
+}
+
+// Test-only alias so lib/testing.ts (Task A7) can fabricate a fake-client provider.
+export const BLOCK_AUTH_CLIENT_INTERNAL: InjectionToken<BlockAuthClient> = BLOCK_AUTH_CLIENT;

package/src/lib/runtime/block-auth-runtime.directive.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { map } from 'nanostores';
+
+// Se mockea `@block-auth.io/core` PARCIALMENTE (patrón de content-signup.test):
+// se conserva todo lo real y solo se espían `createAuthRuntime` (devuelve un
+// runtime de mentira `{ start, stop }`) y `startExtensionSync` (devuelve un
+// cleanup espía). Así `injectStore(client.state.$ws)` usa el nanostore real y
+// no hace falta un client real ni los mocks de `@wagmi/*`.
+const startSpy = vi.fn();
+const stopSpy = vi.fn();
+const extensionCleanupSpy = vi.fn();
+const startExtensionSyncSpy = vi.fn(() => extensionCleanupSpy);
+const createAuthRuntimeSpy = vi.fn(() => ({ start: startSpy, stop: stopSpy, logout: vi.fn() }));
+
+vi.mock('@block-auth.io/core', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@block-auth.io/core')>();
+  return {
+    ...actual,
+    createAuthRuntime: () => createAuthRuntimeSpy(),
+    startExtensionSync: () => startExtensionSyncSpy(),
+  };
+});
+
+import { BlockAuthRuntimeDirective } from './block-auth-runtime.directive';
+import { provideBlockAuthClientForTest } from '../testing';
+
+function makeClient(ready = false) {
+  return { state: { $ws: map<{ ready: boolean }>({ ready }) } } as any;
+}
+
+@Component({
+  standalone: true,
+  imports: [BlockAuthRuntimeDirective],
+  template: `<ng-container baRuntime></ng-container>`,
+})
+class HostComponent {}
+
+describe('BlockAuthRuntimeDirective', () => {
+  beforeEach(() => {
+    startSpy.mockClear();
+    stopSpy.mockClear();
+    extensionCleanupSpy.mockClear();
+    createAuthRuntimeSpy.mockClear();
+    startExtensionSyncSpy.mockClear();
+  });
+
+  it('al montar arranca startExtensionSync + createAuthRuntime + start', async () => {
+    await render(HostComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(startExtensionSyncSpy).toHaveBeenCalledTimes(1);
+    expect(createAuthRuntimeSpy).toHaveBeenCalledTimes(1);
+    expect(startSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('al destruir llama runtime.stop() y el cleanup de startExtensionSync', async () => {
+    const { fixture } = await render(HostComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    fixture.destroy();
+    expect(stopSpy).toHaveBeenCalledTimes(1);
+    expect(extensionCleanupSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('no reconecta en el `false` inicial (antes de la primera conexión)', async () => {
+    const { fixture } = await render(HostComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient(false))],
+    });
+    expect(startSpy).toHaveBeenCalledTimes(1);
+    fixture.detectChanges();
+    expect(startSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('reconecta (re-start) cuando `ready` pasa de true a false tras el teardown', async () => {
+    const client = makeClient(false);
+    const { fixture } = await render(HostComponent, {
+      providers: [provideBlockAuthClientForTest(client)],
+    });
+    expect(startSpy).toHaveBeenCalledTimes(1); // conexión inicial
+
+    client.state.$ws.setKey('ready', true);
+    fixture.detectChanges();
+    expect(startSpy).toHaveBeenCalledTimes(1); // sin start extra al conectar
+
+    client.state.$ws.setKey('ready', false);
+    fixture.detectChanges();
+    expect(startSpy).toHaveBeenCalledTimes(2); // reconexión
+  });
+});

package/src/lib/runtime/block-auth-runtime.directive.ts

@@ -0,0 +1,68 @@
+import { PLATFORM_ID, Directive, OnDestroy, OnInit, effect, inject, output } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { createAuthRuntime, startExtensionSync, type AuthRuntime } from '@block-auth.io/core';
+import { injectBlockAuthClient } from '../provide-block-auth';
+import { injectStore } from '../inject-store';
+
+// Inicializador fino del runtime dirigido por el core, como DIRECTIVA sin
+// plantilla (`[baRuntime]`).
+//
+// Al montar arranca `startExtensionSync()` (lo que en React hace el
+// `BlockAuthProvider` en su efecto de montaje — fusionado acá igual que en el
+// composable de Vue) y `createAuthRuntime(client, callbacks).start()` (connect →
+// signin → cablea todos los handlers `sdk:*`/`provider:*`/`user:txns*`/`signin:*`
+// → dirige el estado nanostores que lee la UI). Al destruir llama `runtime.stop()`
+// (limpia el timeout de unsign + el intervalo de polling de user:txns y
+// desconecta) y el cleanup de `startExtensionSync()`.
+//
+// El `input` no reactivo no existe acá: los callbacks son OUTPUTS
+// (`success`/`errored`/`loggedOut`) que `FlowBlockAuth` reenvía a sus propios
+// outputs.
+@Directive({ selector: '[baRuntime]', standalone: true })
+export class BlockAuthRuntimeDirective implements OnInit, OnDestroy {
+  success = output<string | undefined>();
+  errored = output<void>();
+  loggedOut = output<void>();
+
+  private platformId = inject(PLATFORM_ID);
+  private client = injectBlockAuthClient();
+  private ws = injectStore(this.client.state.$ws);
+  private runtime: AuthRuntime | null = null;
+  private wasReady = false;
+  private stopExtensionSync: (() => void) | null = null;
+
+  constructor() {
+    // Reconexión tras el teardown del DeletionService (ready true→false),
+    // port del segundo useEffect de BlockAuthRuntime (react). Es no-op hasta
+    // que exista un runtime (p.ej. en SSR, donde ngOnInit sale temprano).
+    effect(() => {
+      const ready = this.ws().ready;
+      if (ready) { this.wasReady = true; return; }
+      if (this.wasReady && this.runtime) {
+        this.wasReady = false;
+        void this.runtime.start();
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    // Angular Universal corre ngOnInit en el servidor; el trabajo de browser
+    // (startExtensionSync / runtime.start) nunca debe correr server-side.
+    if (!isPlatformBrowser(this.platformId)) return;
+    this.stopExtensionSync = startExtensionSync();
+    this.runtime = createAuthRuntime(this.client, {
+      onSuccess: (address) => this.success.emit(address),
+      onError: () => this.errored.emit(),
+      onLogout: () => this.loggedOut.emit(),
+    });
+    void this.runtime.start();
+  }
+
+  ngOnDestroy(): void {
+    this.runtime?.stop();
+    this.runtime = null;
+    this.wasReady = false;
+    this.stopExtensionSync?.();
+    this.stopExtensionSync = null;
+  }
+}

package/src/lib/teleport-body.directive.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { TeleportBodyDirective } from './teleport-body.directive';
+
+@Component({
+  selector: 'ba-teleport-host',
+  standalone: true,
+  imports: [TeleportBodyDirective],
+  template: `<div baTeleportBody data-testid="tp">content</div>`,
+})
+class TeleportHostComponent {}
+
+describe('TeleportBodyDirective', () => {
+  it('mueve el host element a document.body al montar', async () => {
+    const { fixture } = await render(TeleportHostComponent);
+    const node = screen.getByTestId('tp');
+    expect(node.parentElement).toBe(document.body);
+    fixture.destroy();
+  });
+
+  it('elimina el nodo de document.body al destruir', async () => {
+    const { fixture } = await render(TeleportHostComponent);
+    const node = screen.getByTestId('tp');
+    expect(document.body.contains(node)).toBe(true);
+    fixture.destroy();
+    expect(document.body.contains(node)).toBe(false);
+  });
+});

package/src/lib/teleport-body.directive.ts

@@ -0,0 +1,21 @@
+import { DOCUMENT } from '@angular/common';
+import { Directive, ElementRef, OnDestroy, OnInit, inject } from '@angular/core';
+
+/**
+ * Mueve el host element a document.body al iniciar (equivalente a
+ * createPortal(..., document.body) / <Teleport to="body">) y lo elimina al
+ * destruir. Necesario para que el overlay fixed de los modales no quede
+ * atrapado en ancestros con transform.
+ */
+@Directive({ selector: '[baTeleportBody]', standalone: true })
+export class TeleportBodyDirective implements OnInit, OnDestroy {
+  private readonly el = inject(ElementRef<HTMLElement>);
+  private readonly doc = inject(DOCUMENT);
+
+  ngOnInit(): void {
+    this.doc.body.appendChild(this.el.nativeElement);
+  }
+  ngOnDestroy(): void {
+    this.el.nativeElement.remove();
+  }
+}

package/src/lib/testing.ts

@@ -0,0 +1,15 @@
+import type { Provider } from '@angular/core';
+import type { BlockAuthClient } from '@block-auth.io/core';
+// El token es privado de provide-block-auth; se reexporta desde allí con un
+// nombre interno (`BLOCK_AUTH_CLIENT_INTERNAL`) para poder fabricar providers
+// de test que inyecten un client falso sin arrancar el client real.
+import { BLOCK_AUTH_CLIENT_INTERNAL } from './provide-block-auth';
+
+/**
+ * Helper SOLO de tests (no se exporta en public-api): registra un client
+ * parcial/falso bajo el token de BlockAuth, de modo que
+ * `injectBlockAuthClient()` lo devuelva en lugar del client real.
+ */
+export function provideBlockAuthClientForTest(client: Partial<BlockAuthClient>): Provider {
+  return { provide: BLOCK_AUTH_CLIENT_INTERNAL, useValue: client };
+}

package/src/lib/transitions.css

@@ -0,0 +1,23 @@
+/* fade — sustituye a motion.div animate={{opacity}} */
+.bas-fade-enter-active, .bas-fade-leave-active { transition: opacity 0.2s ease; }
+.bas-fade-enter-from, .bas-fade-leave-to { opacity: 0; }
+
+/* pop — sustituye al scale+fade de DropdownBase/DropdownProfile */
+.bas-pop-enter-active, .bas-pop-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  transform-origin: top;
+}
+.bas-pop-enter-from, .bas-pop-leave-to { opacity: 0; transform: scale(0.95); }
+
+/* slide-up — entrada de modales (bottom sheet en móvil) */
+.bas-slide-up-enter-active, .bas-slide-up-leave-active { transition: transform 0.25s ease, opacity 0.25s ease; }
+.bas-slide-up-enter-from, .bas-slide-up-leave-to { transform: translateY(16px); opacity: 0; }
+
+/* expand — alto animado de ProvidersFilters/TxnsOverview */
+.bas-expand-enter-active, .bas-expand-leave-active { transition: max-height 0.25s ease, opacity 0.25s ease; overflow: hidden; }
+.bas-expand-enter-from, .bas-expand-leave-to { max-height: 0; opacity: 0; }
+.bas-expand-enter-to, .bas-expand-leave-from { max-height: 600px; }
+
+/* spinner oval — sustituye a react-loader-spinner */
+@keyframes bas-spin { to { transform: rotate(360deg); } }
+.bas-oval-spin { animation: bas-spin 0.8s linear infinite; }

package/src/public-api.ts

@@ -0,0 +1,85 @@
+// API pública de @block-auth.io/angular. Espejo de packages/react/src/index.ts
+// (los estilos se inyectan en runtime vía provideBlockAuth, no acá — ng-packagr
+// no hace inline de CSS como tsup). testing.ts NO se exporta (helper de tests).
+
+// Provider / DI
+export { provideBlockAuth, injectBlockAuthClient } from './lib/provide-block-auth';
+export { injectStore } from './lib/inject-store';
+export { BlockAuthService, type Locale, type TextKey } from './lib/block-auth.service';
+
+// Runtime / directivas
+export { BlockAuthRuntimeDirective } from './lib/runtime/block-auth-runtime.directive';
+export { TeleportBodyDirective } from './lib/teleport-body.directive';
+
+// Orchestrator
+export { FlowBlockAuthComponent } from './lib/components/flow-block-auth.component';
+
+// User profile / role helpers (re-exportados del core, como el viejo `main.js`)
+export {
+  loadUserProfile,
+  getUserRoles,
+  getUserRoleNames,
+  getUserRoleSlugs,
+  hasRole,
+  hasRoleBySlug,
+  hasAnyRole,
+  hasAnyRoleBySlug,
+  type BlockAuthUserProfile,
+  type BlockAuthUserRole,
+} from '@block-auth.io/core';
+
+// Buttons (barrel existente)
+export {
+  BtnBaseProviderComponent,
+  BtnBlockAuthComponent,
+  BtnGmailComponent,
+  BtnGoogleBaseComponent,
+  BtnMetamaskComponent,
+  BtnMicrosoftComponent,
+  BtnPhantomComponent,
+  BtnSigninComponent,
+  BtnWalletConnectComponent,
+} from './lib/components/btns';
+
+// Contents
+export { ContentSigninComponent } from './lib/components/contents/content-signin.component';
+export { ContentSignupComponent } from './lib/components/contents/content-signup.component';
+
+// Dropdown / profile
+export {
+  DropdownProfileComponent,
+  type DropdownProfileAdditionalItem,
+} from './lib/components/dds/dropdown-profile.component';
+export { DropdownProfileBtnComponent } from './lib/components/dds/dropdown-profile-btn.component';
+export { DropdownProfileItemComponent } from './lib/components/dds/dropdown-profile-item.component';
+export { ChangeAccountComponent } from './lib/components/dds/change-account.component';
+
+// Modals
+export { ModalOverlayComponent } from './lib/components/modals/modal-overlay.component';
+export { ModalSigninComponent } from './lib/components/modals/modal-signin.component';
+export { ModalSignupComponent } from './lib/components/modals/modal-signup.component';
+export { ModalRestoreComponent } from './lib/components/modals/modal-restore.component';
+export { ModalRestorationExpiredComponent } from './lib/components/modals/modal-restoration-expired.component';
+
+// Sections (+ internals)
+export { LoginSectionComponent } from './lib/components/sections/login-section.component';
+export { ProvidersSectionComponent } from './lib/components/sections/providers-section.component';
+export { FooterSectionComponent } from './lib/components/sections/footer-section.component';
+export { ProvidersButtonsComponent } from './lib/components/sections/internals/providers-buttons.component';
+export { SelectedButtonComponent } from './lib/components/sections/internals/selected-button.component';
+export {
+  ProvidersFiltersComponent,
+  makeWebTypeItems,
+  type WebTypeItem,
+} from './lib/components/sections/internals/providers-filters.component';
+
+// Transactions (+ internals)
+export { TxnsOverviewComponent } from './lib/components/txns/txns-overview.component';
+export { TxnComponent } from './lib/components/txns/internals/txn.component';
+export { TxnTypeComponent } from './lib/components/txns/internals/txn-type.component';
+export { TxnErrorComponent } from './lib/components/txns/internals/txn-error.component';
+export { PermissionsRequiredModalComponent } from './lib/components/txns/internals/permissions-required-modal.component';
+export {
+  SolicitedDataModalComponent,
+  type ParamChange,
+} from './lib/components/txns/internals/solicited-data-modal.component';

package/src/vitest.setup.ts

@@ -0,0 +1,8 @@
+import '@analogjs/vite-plugin-angular/setup-vitest';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

package/tailwind.config.cjs

@@ -0,0 +1,6 @@
+const preset = require('@block-auth.io/ui-styles/tailwind');
+
+module.exports = {
+  presets: [preset],
+  content: ['./src/**/*.ts', './src/**/*.html'],
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "skipLibCheck": true,
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist"],
+  "angularCompilerOptions": { "strictTemplates": true }
+}

package/tsconfig.lib.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": { "declaration": true, "types": [] },
+  "exclude": ["dist", "src/**/*.test.ts", "src/vitest.setup.ts"],
+  "angularCompilerOptions": {
+    "strictTemplates": true,
+    "compilationMode": "partial"
+  }
+}

package/vite.config.mts

@@ -0,0 +1,44 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import angular from '@analogjs/vite-plugin-angular';
+
+export default defineConfig({
+  // Sin tsconfig.spec.json propio (el paquete solo tiene tsconfig.json +
+  // tsconfig.lib.json): apuntar el plugin al tsconfig base evita el warning
+  // "Unable to resolve tsconfig at .../tsconfig.spec.json".
+  //
+  // `experimental.useAngularCompilationAPI: true` es OBLIGATORIO: sin él el
+  // plugin preserva los decoradores para que TestBed compile en JIT, y el
+  // compilador JIT NO soporta signal inputs (`input()` no se registra como
+  // binding → NG0303 "Can't bind to ...") ni queries/decoradores de campo
+  // (`@ViewChild`/`@Input` → "Standard Angular field decorators are not
+  // supported in JIT mode"). Con esta opción el plugin usa la API de
+  // compilación real de Angular (calidad AOT), que emite los metadatos de
+  // signal input/output y hace que el binding entre componentes funcione.
+  plugins: [angular({ tsconfig: './tsconfig.json', experimental: { useAngularCompilationAPI: true } })],
+  // pnpm crea DOS variantes peer de `@wagmi/core@3.5.2` (una por typescript
+  // 5.8.3 y otra por 5.9.3): `@block-auth.io/core` importa una y el paquete
+  // angular la otra. Sin dedupe, `vi.mock('@wagmi/core')` de los tests solo
+  // parchea la copia resuelta desde el test → la copia que usa core queda real
+  // (ProviderNotFoundError). dedupe colapsa ambas en una sola copia para que el
+  // mock alcance también a core (idéntico efecto al del monorepo de react/vue).
+  resolve: { dedupe: ['@wagmi/core', '@wagmi/connectors'] },
+  test: {
+    // Requerido por el patch de zone.js que instala
+    // `@analogjs/vite-plugin-angular/setup-vitest` (envuelve describe/it/
+    // beforeEach en globalThis) y por `"types": ["vitest/globals"]` del
+    // tsconfig — mismo convenio que packages/vue.
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/vitest.setup.ts'],
+    include: ['src/**/*.test.ts'],
+    css: false,
+    passWithNoTests: true,
+    // `@block-auth.io/core` (dist ESM del workspace) debe pasar por el resolver
+    // de vite (inline) en vez de importarse nativamente, para que su
+    // `import '@wagmi/core'` respete el `resolve.dedupe` de arriba y quede
+    // interceptable por `vi.mock('@wagmi/core')` de los tests de integración
+    // (importado nativamente saltaría tanto el dedupe como el mock).
+    server: { deps: { inline: [/@block-auth\.io[/\\]core/, /packages[/\\]core[/\\]dist/] } },
+  },
+});