@block-auth.io/angular 0.1.0

package/src/lib/components/sections/internals/selected-button.component.ts

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { injectBlockAuthClient } from '../../../provide-block-auth';
+import { injectStore } from '../../../inject-store';
+import { BtnBlockAuthComponent } from '../../btns/btn-block-auth.component';
+import { BtnGmailComponent } from '../../btns/btn-gmail.component';
+import { BtnMicrosoftComponent } from '../../btns/btn-microsoft.component';
+import { BtnMetamaskComponent } from '../../btns/btn-metamask.component';
+import { BtnPhantomComponent } from '../../btns/btn-phantom.component';
+import { BtnWalletConnectComponent } from '../../btns/btn-wallet-connect.component';
+
+/**
+ * Renderiza el botón de conexión del provider elegido. La rama
+ * `isWeb3Service` (cualquier provider habilitado no built-in) renderiza
+ * `<ba-btn-wallet-connect>` con el `walletService` seleccionado. `uiConfig`
+ * se lee reactivamente del store `$ui` del core.
+ *
+ * NOTA de idioma Angular: cuando `btnsConnectTxt` es falsy, el original de
+ * react/vue deja que cada botón use su propio label por defecto pasando
+ * `undefined`. En Angular una binding `[text]="undefined"` PISA el default de
+ * `input()` (a diferencia de Vue/React), así que se pasa como fallback el
+ * label por defecto del propio botón para conservar la paridad.
+ */
+const BUILT_IN = ['blockauth', 'google', 'microsoft', 'metamask', 'phantom'];
+
+@Component({
+  selector: 'ba-selected-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    BtnBlockAuthComponent,
+    BtnGmailComponent,
+    BtnMicrosoftComponent,
+    BtnMetamaskComponent,
+    BtnPhantomComponent,
+    BtnWalletConnectComponent,
+  ],
+  template: `
+    @if (selectedService() === 'blockauth') {
+      <ba-btn-block-auth [disabled]="disabled()" [isEditable]="isEditable()" />
+    }
+    @if (selectedService() === 'google') {
+      <ba-btn-gmail [text]="connectText() ?? 'Gmail'" [disabled]="disabled()" [isEditable]="isEditable()" />
+    }
+    @if (selectedService() === 'microsoft') {
+      <ba-btn-microsoft [text]="connectText() ?? 'Microsoft'" [disabled]="disabled()" [isEditable]="isEditable()" />
+    }
+    @if (selectedService() === 'metamask') {
+      <ba-btn-metamask
+        [text]="connectText() ?? 'MetaMask'"
+        [disabled]="disabled()"
+        [isTextInsteadOfAccount]="true"
+        [isEditable]="isEditable()"
+      />
+    }
+    @if (selectedService() === 'phantom') {
+      <ba-btn-phantom
+        [text]="connectText() ?? 'Phantom'"
+        [disabled]="disabled()"
+        [isTextInsteadOfAccount]="true"
+        [isEditable]="isEditable()"
+      />
+    }
+    @if (isWeb3Service()) {
+      <ba-btn-wallet-connect
+        [text]="connectText() ?? 'Connect Wallet'"
+        [disabled]="disabled()"
+        [isTextInsteadOfAccount]="true"
+        [isEditable]="isEditable()"
+        [walletService]="selectedService()"
+      />
+    }
+  `,
+})
+export class SelectedButtonComponent {
+  selectedService = input('');
+  btnsConnectTxt = input('');
+  showImgLoader = input(true);
+  isEditable = input(false);
+
+  private readonly client = injectBlockAuthClient();
+  private readonly ui = injectStore(this.client.state.$ui);
+
+  // Solo se pasa el texto de conexión cuando existe; si no, `undefined` para
+  // que el fallback del template use el label por defecto de cada botón.
+  protected connectText = computed<string | undefined>(() => this.btnsConnectTxt() || undefined);
+  protected disabled = computed(() => !this.showImgLoader());
+  protected isWeb3Service = computed(() => {
+    const config = (this.ui() as Record<string, any> | null)?.uiConfig?.config;
+    const svc = this.selectedService();
+    return !!config && !!config[svc] && !!config[svc].enabled && !BUILT_IN.includes(svc);
+  });
+}

package/src/lib/components/sections/login-section.component.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { LoginSectionComponent } from './login-section.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+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' })),
+}));
+
+function makeClient() {
+  return {
+    web3: { signup: vi.fn() },
+    state: { $ui: map({}), $wallet: map({}), $ws: map({}) },
+  } as any;
+}
+
+// Port de packages/react/src/components/sections/LoginSection.test.tsx.
+describe('LoginSection', () => {
+  it('renderiza la seccion de login', async () => {
+    @Component({
+      standalone: true,
+      imports: [LoginSectionComponent],
+      template: `<ba-login-section selectedService="metamask" createAccountTxt="Crear cuenta ahora" />`,
+    })
+    class HostComponent {}
+    await render(HostComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('login-section')).toBeDefined();
+  });
+
+  it('en la rama conectada (showImgLoader=false) renderiza el <ba-dropdown-profile> real (A10)', async () => {
+    @Component({
+      standalone: true,
+      imports: [LoginSectionComponent],
+      template: `<ba-login-section selectedService="blockauth" [showImgLoader]="false" [isServiceConnected]="true" />`,
+    })
+    class HostComponent {}
+    await render(HostComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByTestId('login-section')).toBeDefined();
+    expect(screen.getByTestId('dropdown-profile')).toBeDefined();
+    expect(screen.queryByTestId('dropdown-profile-placeholder')).toBeNull();
+  });
+});

package/src/lib/components/sections/login-section.component.ts

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { providersStyles } from '../../primitives/providersStyles';
+import { ImgLoaderComponent } from '../../primitives/img-loader.component';
+import { ArrowIconComponent } from '../../primitives/arrow-icon.component';
+import { SelectedButtonComponent } from './internals/selected-button.component';
+import { BtnSigninComponent } from '../btns/btn-signin.component';
+import { DropdownProfileComponent } from '../dds/dropdown-profile.component';
+
+/**
+ * Columna derecha de la card de signup. Dos estados, según `showImgLoader`
+ * (= no conectado al servicio seleccionado):
+ *  - NO conectado -> logo del provider (`<ba-img-loader>`) + botón de conexión
+ *    (`<ba-selected-button>`) + descripción.
+ *  - conectado -> el `<DropdownProfile>` de cuenta + separador "Completa el
+ *    último paso" + la fila `<ba-btn-signin>` "Iniciar sesión" flanqueada por
+ *    `<ba-arrow-icon>`.
+ *
+ * NOTA: `containerRef` existe en la interfaz react pero nunca se usa en el
+ * cuerpo (prop muerta) — se omite, igual que en el port Vue.
+ *
+ * A10: el placeholder de A9 (rama conectada) ahora renderiza el
+ * `<ba-dropdown-profile>` real.
+ */
+@Component({
+  selector: 'ba-login-section',
+  standalone: true,
+  // Hijo directo del grid de content-signup: el host debe ser transparente al
+  // layout para que el contenido interno sea el grid item real (ver
+  // providers-section para el detalle). Sin esto el layout del modal se solapa.
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ImgLoaderComponent,
+    ArrowIconComponent,
+    SelectedButtonComponent,
+    BtnSigninComponent,
+    DropdownProfileComponent,
+  ],
+  template: `
+    <section
+      data-testid="login-section"
+      [attr.data-service]="selectedService()"
+      class="bas-relative bas-box-border bas-flex bas-h-[230px] bas-w-full bas-flex-col bas-items-center bas-justify-between bas-gap-2 bas-pt-4 bas-px-2 lg:bas-px-6"
+    >
+      @if (showImgLoader()) {
+        <ba-img-loader
+          loaderId="signup-provider-loader"
+          [imgSrc]="isWeb3ProviderSelected() && imgQR() ? imgQR() : style().imgSrc"
+          [imgAlt]="'Img of ' + selectedService() + ' provider'"
+          [imgBgColor]="style().imgBgColor"
+          [loaderColor]="style().loaderColor"
+          [scaleImgWhenHovered]="!isWeb3ProviderSelected()"
+          [size]="isWeb3ProviderSelected() ? 'medium' : 'small'"
+        />
+      } @else {
+        <ba-dropdown-profile [isInsideModal]="true" dropdownBtnSize="small" />
+      }
+
+      <div class="bas-relative bas-box-border bas-flex bas-h-auto bas-w-full bas-flex-col bas-gap-4 bas-overflow-hidden bas-py-1">
+        @if (showImgLoader()) {
+          <!-- BOTON DE CONEXION DEL PROVIDER -->
+          <div class="bas-flex bas-h-auto bas-w-auto bas-justify-center">
+            <ba-selected-button
+              [selectedService]="selectedService()"
+              [btnsConnectTxt]="connectTxt()"
+              [showImgLoader]="showImgLoader()"
+              [isEditable]="isEditable()"
+            />
+          </div>
+          <!-- DESCRIPCION -->
+          <p [class]="'bas-m-0 bas-mx-auto bas-text-center bas-text-gray-900 ' + descriptionTextClassNames()">
+            {{ titleTxt() }} {{ descriptionTxt() }}
+          </p>
+        } @else {
+          <!-- CONECTADO: "Completa el último paso" + fila de Log In -->
+          <div class="bas-flex bas-w-full bas-flex-col bas-items-center bas-gap-4 bas-pt-2">
+            <div class="bas-flex bas-w-full bas-items-center bas-justify-center bas-gap-3">
+              <span class="bas-h-px bas-flex-1 bas-bg-[var(--bal-primary-300)]"></span>
+              <p class="bas-m-0 bas-text-center bas-text-[var(--bal-primary-600)]">{{ lastStepTxt() }}</p>
+              <span class="bas-h-px bas-flex-1 bas-bg-[var(--bal-primary-300)]"></span>
+            </div>
+            <div class="bas-flex bas-h-fit bas-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-4">
+              <ba-arrow-icon direction="right" />
+              <ba-btn-signin [text]="loginTxt()" [isDisabled]="!isServiceConnected()" [isEditable]="isEditable()" />
+              <ba-arrow-icon direction="left" />
+            </div>
+          </div>
+        }
+      </div>
+    </section>
+  `,
+})
+export class LoginSectionComponent {
+  imgQR = input('');
+  showImgLoader = input(true);
+  selectedService = input('blockauth');
+  isServiceConnected = input(false);
+  isEditable = input(false);
+  device = input<'desktop' | 'tablet' | 'phone'>('desktop');
+  titleTxt = input('');
+  descriptionTxt = input('Regístrate en segundos y olvídate de las contraseñas.');
+  /** Etiqueta localizada del botón de conexión del provider. */
+  btnsConnectTxt = input('');
+  /** @deprecated usar `btnsConnectTxt`. */
+  createAccountTxt = input('');
+  /** Etiqueta localizada de "Log In" (estado conectado). */
+  loginTxt = input('Iniciar sesión');
+  /** Etiqueta localizada de "Completa el último paso" (estado conectado). */
+  lastStepTxt = input('Completa el último paso');
+
+  protected isWeb3ProviderSelected = computed(
+    () => this.selectedService() === 'metamask' || this.selectedService() === 'phantom',
+  );
+  protected style = computed(() => providersStyles[this.selectedService()] ?? providersStyles['blockauth']);
+  protected connectTxt = computed(() => this.btnsConnectTxt() || this.createAccountTxt());
+  protected descriptionTextClassNames = computed(() => {
+    if (!this.isEditable()) return 'bas-text-xs bas-font-light lg:bas-text-base lg:bas-font-thin';
+    return this.device() === 'desktop' ? 'bas-text-base bas-font-thin' : 'bas-text-xs bas-font-light';
+  });
+}

package/src/lib/components/sections/providers-section.component.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { ProvidersSectionComponent } from './providers-section.component';
+
+// Port de packages/react/src/components/sections/ProvidersSection.test.tsx.
+// Usa `$locale` del core (singleton) para i18n; sin dependencias del client.
+describe('ProvidersSection', () => {
+  it('renderiza la seccion de proveedores', async () => {
+    @Component({
+      standalone: true,
+      imports: [ProvidersSectionComponent],
+      template: `<ba-providers-section [showedProviders]="providers" />`,
+    })
+    class HostComponent {
+      providers = ['metamask', 'phantom'];
+    }
+    await render(HostComponent);
+    expect(screen.getByTestId('providers-section')).toBeDefined();
+    expect(screen.getByTestId('providers-buttons')).toBeDefined();
+  });
+});

package/src/lib/components/sections/providers-section.component.ts

@@ -0,0 +1,187 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  PLATFORM_ID,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../inject-store';
+import {
+  ProvidersFiltersComponent,
+  makeWebTypeItems,
+  type WebTypeItem,
+} from './internals/providers-filters.component';
+import { ProvidersButtonsComponent } from './internals/providers-buttons.component';
+
+/**
+ * Columna izquierda de la card de signup: cabecera "Conectar con" (logo +
+ * título), filtros de búsqueda/web-type y grid de proveedores. Estado local de
+ * búsqueda/filtro cableado hacia abajo y expuesto al padre vía outputs
+ * (`selectedServiceChange`/`changeWebType`/`changeProviderSearch`).
+ *
+ * `useMobile(660)` -> señal `isMobile` interna, SSR-safe (queda en `false`
+ * hasta montar en cliente) y reactiva a `resize`. El efecto de medición de
+ * scroll se internaliza en `<ba-providers-buttons>` (ver su cabecera). i18n vía
+ * `$locale` del core (mismo patrón que BtnBlockAuth).
+ */
+@Component({
+  selector: 'ba-providers-section',
+  standalone: true,
+  // El elemento host es hijo directo del grid de content-signup, pero las clases
+  // de posicionamiento (bas-row-start-2, sm1:bas-row-span-2, etc.) van en el
+  // <section> interno. `display: contents` hace que ese <section> sea el grid
+  // item real (como en React, donde el div raíz ES el hijo del grid). Sin esto
+  // el host se auto-coloca y el layout del modal se solapa.
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ProvidersFiltersComponent, ProvidersButtonsComponent],
+  template: `
+    @if (hasConfig()) {
+      <section
+        data-testid="providers-section"
+        [class]="'bas-box-border bas-grid bas-items-center bas-justify-center ' + sectionContainerClassNames()"
+      >
+        <div class="bas-box-border bas-flex bas-h-[52px] bas-w-full bas-flex-row bas-items-center bas-justify-start bas-gap-2 bas-pl-2">
+          <img src="https://dashboard.block-auth.io/img/blockauth_logo.png" width="34" height="34" alt="Block-Auth" />
+          <h2 [class]="'bas-m-0 bas-text-2xl bas-font-normal bas-text-[#00509a] ' + h2ClassNames()">
+            {{ titleTxt() ?? t('connectWith') }}
+          </h2>
+        </div>
+
+        <ba-providers-filters
+          [container]="container()"
+          [uiConfigProvidersInfo]="info()"
+          [searchProviderValue]="searchProviderValue()"
+          (changeProviderSearch)="onChangeProviderSearchValue($event)"
+          [openWebType]="openWebType()"
+          (openWebTypeChange)="openWebType.set($event)"
+          [selectedWebType]="selectedWebType()"
+          [webTypesItems]="webTypesItems()"
+          (changeWebType)="onChangeWebTypeItem($event)"
+          [isEditable]="isEditable()"
+          [isEditing]="isEditing()"
+          [device]="device()"
+        />
+        <ba-providers-buttons
+          [providersFiltersEnabled]="providersFiltersEnabled()"
+          [isMobile]="isMobileLayout()"
+          [uiConfigProvidersInfo]="info()"
+          [showedProviders]="showedProviders()"
+          [selectedService]="selectedService()"
+          (selectedServiceChange)="selectedServiceChange.emit($event)"
+          [isEditable]="isEditable()"
+          [isEditing]="isEditing()"
+          [device]="device() === 'phone' ? 'phone' : 'desktop'"
+        />
+      </section>
+    }
+  `,
+})
+export class ProvidersSectionComponent {
+  container = input<HTMLElement | null>(null);
+  // Acepta `undefined` (ContentSignup lo pasa así cuando no hay config). En
+  // react un prop `undefined` recae en el default por parámetro; en Angular una
+  // binding `undefined` PISA el default de `input()`, así que se recae al
+  // default vía el `info()` computed.
+  uiConfigProvidersInfo = input<
+    | {
+        providersColumns?: number;
+        showProviderNameOnMobile?: boolean;
+        enableSearch?: boolean;
+        enableWebTypeFilter?: boolean;
+      }
+    | undefined
+  >(undefined);
+
+  private readonly DEFAULT_INFO = {
+    providersColumns: 3,
+    showProviderNameOnMobile: true,
+    enableSearch: true,
+    enableWebTypeFilter: true,
+  };
+  protected info = computed(() => this.uiConfigProvidersInfo() ?? this.DEFAULT_INFO);
+  selectedService = input('');
+  showedProviders = input<string[]>([]);
+  isEditable = input(false);
+  isEditing = input(false);
+  device = input<'desktop' | 'tablet' | 'phone'>('desktop');
+  titleTxt = input<string | undefined>(undefined);
+
+  selectedServiceChange = output<string>();
+  changeWebType = output<WebTypeItem>();
+  changeProviderSearch = output<string>();
+
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  // Recalcula (vía `t`, que lee `$locale`) cuando cambia el idioma, igual que
+  // el `useMemo(..., [locale])` de react.
+  protected webTypesItems = computed(() => makeWebTypeItems(this.t));
+  protected searchProviderValue = signal('');
+  private readonly selectedWebTypeValue = signal('all');
+  protected selectedWebType = computed(
+    () => this.webTypesItems().find((item) => item.value === this.selectedWebTypeValue()) ?? this.webTypesItems()[0],
+  );
+  protected openWebType = signal(false);
+
+  // useMobile(660): SSR-safe + reactivo a resize.
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly isMobile = signal(false);
+
+  constructor() {
+    if (isPlatformBrowser(this.platformId)) {
+      const onResize = () => this.isMobile.set(window.innerWidth < 660);
+      onResize();
+      window.addEventListener('resize', onResize);
+      this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));
+    }
+  }
+
+  protected hasConfig = computed(() => Object.keys(this.info()).length !== 0);
+  protected providersFiltersEnabled = computed(
+    () => !!this.info().enableSearch || !!this.info().enableWebTypeFilter,
+  );
+  protected isMobileLayout = computed(() => this.isMobile() || (this.isEditable() && this.device() === 'phone'));
+
+  onChangeWebTypeItem(webType: WebTypeItem): void {
+    this.selectedWebTypeValue.set(webType.value);
+    this.changeWebType.emit(webType);
+  }
+  onChangeProviderSearchValue(value: string): void {
+    this.searchProviderValue.set(value);
+    this.changeProviderSearch.emit(value);
+  }
+
+  // ----------------- CLASSNAMES (port literal) -----------------
+  protected useTallRows = computed(() => this.isMobileLayout() || this.providersFiltersEnabled());
+  protected sectionContainerClassNames = computed(() => {
+    if (!this.isEditable()) {
+      return `bas-row-start-2 bas-h-[140px] bas-grid-cols-[auto_1fr] bas-grid-rows-[52px_76px]
+        bas-gap-1 bas-pt-2 xsm1:bas-w-full sm1:bas-row-span-2 sm1:bas-row-start-auto
+        sm1:bas-h-[282px] sm1:bas-w-60 sm1:bas-grid-cols-1 sm1:bas-gap-0 sm1:bas-pt-0
+        ${this.useTallRows() ? 'sm1:bas-grid-rows-[52px_42px_188px]' : 'sm1:bas-grid-rows-[52px_0px_230px]'}`;
+    }
+    if (this.device() === 'phone') {
+      return 'bas-row-start-2 bas-h-[140px] bas-grid-cols-[auto_1fr] bas-grid-rows-[52px_76px] bas-gap-1 bas-pt-2';
+    }
+    return `bas-row-span-2 bas-row-start-auto bas-h-[282px] bas-w-60 bas-grid-cols-1
+      bas-gap-0 bas-pt-0 ${this.useTallRows() ? 'bas-grid-rows-[52px_42px_188px]' : 'bas-grid-rows-[52px_0px_230px]'}`;
+  });
+
+  protected bothFilters = computed(
+    () => !!this.info().enableSearch && !!this.info().enableWebTypeFilter,
+  );
+  protected h2ClassNames = computed(() => {
+    if (!this.isMobileLayout()) return '';
+    if (this.isEditable()) return this.device() === 'phone' ? 'bas-hidden' : 'bas-block';
+    if (this.providersFiltersEnabled()) return `bas-hidden ${this.bothFilters() ? 'xsm1:bas-block' : 'xsm:bas-block'}`;
+    return '';
+  });
+}

package/src/lib/components/txns/internals/permissions-required-modal.component.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/angular';
+import { PermissionsRequiredModalComponent } from './permissions-required-modal.component';
+
+// Port de packages/react/src/components/txns/internals/PermissionsRequiredModal.test.tsx
+// (mapa: packages/vue/.../PermissionsRequiredModal.test.ts).
+describe('PermissionsRequiredModal', () => {
+  it('renderiza el modal de permisos requeridos', async () => {
+    await render(PermissionsRequiredModalComponent);
+    expect(screen.getByText('Temporal access to identity')).toBeDefined();
+    expect(screen.getByText('Access to the list of authorised apps')).toBeDefined();
+    expect(screen.getByText('Only this transaction will be signed')).toBeDefined();
+  });
+});

package/src/lib/components/txns/internals/permissions-required-modal.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+// Port literal de packages/react/src/components/txns/internals/PermissionsRequiredModal.tsx
+// (mapa: packages/vue/.../PermissionsRequiredModal.vue). Sin props/outputs, sin
+// lógica de core: solo itera un array fijo de permisos.
+const iconClassNames = 'bas-w-6 bas-h-6 bas-text-[#009F6B]';
+const requiredPermissions = [
+  { message: 'Temporal access to identity', icon: '👤' },
+  { message: 'Access to the list of authorised apps', icon: '📝' },
+  { message: 'Only this transaction will be signed', icon: '🔄' },
+];
+
+@Component({
+  selector: 'ba-permissions-required-modal',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="bal-ba-transition-2 bas-box-border bas-grid bas-w-[334px] bas-grid-rows-3 bas-gap-3 bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)] bas-bg-[var(--bal-primary-10)] bas-py-4 bas-pl-3 hover:bas-border-[var(--bal-primary-300)]"
+    >
+      @for (permission of requiredPermissions; track $index) {
+        <div class="bas-flex bas-flex-row bas-items-center bas-gap-2">
+          <span [class]="iconClassNames" aria-hidden="true">{{ permission.icon }}</span>
+          <p class="bas-m-0 bas-text-start bas-text-base bas-text-[var(--bal-primary-800)]">
+            {{ permission.message }}
+          </p>
+        </div>
+      }
+    </div>
+  `,
+})
+export class PermissionsRequiredModalComponent {
+  protected readonly iconClassNames = iconClassNames;
+  protected readonly requiredPermissions = requiredPermissions;
+}

package/src/lib/components/txns/internals/solicited-data-modal.component.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { SolicitedDataModalComponent, type ParamChange } from './solicited-data-modal.component';
+
+// Port de packages/react/src/components/txns/internals/SolicitedDataModal.test.tsx
+// (mapa: packages/vue/.../SolicitedDataModal.test.ts). Presentacional, sin client.
+describe('SolicitedDataModal', () => {
+  it('renderiza el modal de datos solicitados con campos requeridos y opcionales', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal [requiredParams]="['users-email']" [optionalParams]="['users-phone']" />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.getByText('Email')).toBeDefined();
+    expect(screen.getByText('Phone')).toBeDefined();
+  });
+
+  it('emite paramChange al escribir y validationChange según validez', async () => {
+    const paramChanges: ParamChange[] = [];
+    const validationChanges: boolean[] = [];
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [optionalParams]="[]"
+        [userParamValues]="vals"
+        (paramChange)="pc($event)"
+        (validationChange)="vc($event)"
+      />`,
+    })
+    class Host {
+      vals: Record<string, string> = {};
+      pc = (e: ParamChange) => paramChanges.push(e);
+      vc = (v: boolean) => validationChanges.push(v);
+    }
+    const { fixture } = await render(Host);
+
+    // Sin params requeridos rellenados -> invalid emitido de inmediato (effect).
+    expect(validationChanges[validationChanges.length - 1]).toBe(false);
+
+    const input = screen.getByRole('textbox');
+    await fireEvent.input(input, { target: { value: 'not-an-email' } });
+    expect(paramChanges[paramChanges.length - 1]).toEqual({ slug: 'users-email', value: 'not-an-email' });
+
+    fixture.componentInstance.vals = { 'users-email': 'a@b.com' };
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    expect(validationChanges[validationChanges.length - 1]).toBe(true);
+  });
+
+  it('muestra el error inline tras blur con un valor invalido', async () => {
+    @Component({
+      standalone: true,
+      imports: [SolicitedDataModalComponent],
+      template: `<ba-solicited-data-modal
+        [requiredParams]="['users-email']"
+        [optionalParams]="[]"
+        [userParamValues]="{ 'users-email': 'not-an-email' }"
+      />`,
+    })
+    class Host {}
+    await render(Host);
+    const input = screen.getByRole('textbox');
+    await fireEvent.blur(input);
+    expect(screen.getByText('Enter a valid email (e.g. name@domain.com)')).toBeDefined();
+  });
+});