@block-auth.io/angular 0.2.10 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,37 +1,40 @@
-
-> @block-auth.io/angular@0.2.10 build /home/darius_jvc/projects/blockauth-sdk/packages/angular
-> pnpm build:css && ng-packagr -p ng-package.json -c tsconfig.lib.json
-
-
-> @block-auth.io/angular@0.2.10 build:css /home/darius_jvc/projects/blockauth-sdk/packages/angular
-> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
-
-Browserslist: caniuse-lite is outdated. Please run:
-  npx update-browserslist-db@latest
-  Why you should do it regularly: https://github.com/browserslist/update-db#readme
-
-Rebuilding...
-
-Done in 628ms.
-Building Angular Package
-
-------------------------------------------------------------------------------
-Building entry point '@block-auth.io/angular'
-------------------------------------------------------------------------------
-⠋ Compiling with Angular sources in partial compilation mode.⠙ Compiling with Angular sources in partial compilation mode.
-✔ Compiling with Angular sources in partial compilation mode.
-✔ Generating FESM and DTS bundles
-⠋ Copying assets✔ Copying assets
-⠋ Writing package manifestℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
-ℹ Removing devDependencies section in package.json.
-✔ Writing package manifest
-✔ Built @block-auth.io/angular
-
-------------------------------------------------------------------------------
-Built Angular Package
-- from: /home/darius_jvc/projects/blockauth-sdk/packages/angular
-- to:   /home/darius_jvc/projects/blockauth-sdk/packages/angular/dist
-------------------------------------------------------------------------------
-
-Build at: 2026-10-04T12:15:58.546Z - Time: 1297ms
-
+
+> @block-auth.io/angular@0.3.0 build /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> pnpm build:css && ng-packagr -p ng-package.json -c tsconfig.lib.json
+
+
+> @block-auth.io/angular@0.3.0 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
+
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+
+Rebuilding...
+
+Done in 2518ms.
+Building Angular Package
+
+------------------------------------------------------------------------------
+Building entry point '@block-auth.io/angular'
+------------------------------------------------------------------------------
+- Compiling with Angular sources in partial compilation mode.
+
+✔ Compiling with Angular sources in partial compilation mode.
+✔ Generating FESM and DTS bundles
+- Copying assets
+✔ Copying assets
+- Writing package manifest
+ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
+ℹ Removing devDependencies section in package.json.
+✔ Writing package manifest
+✔ Built @block-auth.io/angular
+
+------------------------------------------------------------------------------
+Built Angular Package
+- from: /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+- to:   /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular/dist
+------------------------------------------------------------------------------
+
+Build at: 2026-10-15T00:14:24.516Z - Time: 9555ms
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @block-auth.io/angular@0.3.0 lint /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> eslint src
+

package/.turbo/turbo-test.log

@@ -0,0 +1,102 @@
+
+> @block-auth.io/angular@0.3.0 pretest /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> pnpm build:css
+
+
+> @block-auth.io/angular@0.3.0 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
+
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+
+Rebuilding...
+
+Done in 5726ms.
+
+> @block-auth.io/angular@0.3.0 test /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> vitest run
+
+
+ RUN  v3.2.7 /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+
+ ✓ src/lib/components/dds/dropdown-profile-item.component.test.ts (5 tests) 184ms
+ ✓ src/lib/components/modals/modal-overlay.component.test.ts (4 tests) 287ms
+ ✓ src/lib/components/txns/internals/txn-error.component.test.ts (5 tests) 232ms
+ ✓ src/lib/components/modals/modal-restoration-expired.component.test.ts (4 tests) 329ms
+ ✓ src/lib/components/modals/modal-restore.component.test.ts (4 tests) 530ms
+ ✓ src/lib/components/dds/dropdown-profile.component.test.ts (6 tests) 497ms
+ ✓ src/lib/components/modals/modal-signin.component.test.ts (3 tests) 268ms
+ ✓ src/lib/runtime/block-auth-runtime.directive.test.ts (4 tests) 222ms
+ ✓ src/lib/components/btns/btn-block-auth.component.test.ts (4 tests) 556ms
+   ✓ BtnBlockAuth > renderiza con el id de provider y es clickable  364ms
+ ✓ src/lib/components/flow-block-auth.component.test.ts (3 tests) 688ms
+   ✓ FlowBlockAuth > renderiza el contenedor del orquestador sin romperse  405ms
+ ✓ src/lib/block-auth.service.test.ts (2 tests) 449ms
+   ✓ BlockAuthService > expone signals reactivos del estado del core y las acciones  400ms
+ ✓ src/lib/components/contents/content-signup.component.test.ts (3 tests) 752ms
+   ✓ ContentSignup > renderiza el contenido de signup  503ms
+ ✓ src/lib/components/dds/dropdown-profile-btn.component.test.ts (2 tests) 336ms
+ ✓ src/lib/primitives/lifetime-slider-base.component.test.ts (5 tests) 1370ms
+   ✓ LifetimeSliderBaseComponent > renderiza el slider (SliderBase) y el input del TimePicker con el valor HH:MM:SS  414ms
+   ✓ LifetimeSliderBaseComponent > emite toggleTimerDropdown al pulsar el botón del picker  351ms
+ ✓ src/lib/primitives/dropdown-base.component.test.ts (4 tests) 837ms
+   ✓ DropdownBaseComponent > al pulsar el boton emite isOpenChange con el valor invertido  699ms
+ ✓ src/lib/components/txns/txns-overview.component.test.ts (20 tests) 2756ms
+   ✓ TxnsOverview > con datos solicitados > al guardar vacío un dato cedido deja de cederlo sin enviarlo  378ms
+ ✓ src/lib/components/txns/internals/solicited-data-modal.component.test.ts (30 tests) 2736ms
+   ✓ SolicitedDataModal > renderiza el modal de datos solicitados con campos requeridos y opcionales  436ms
+   ✓ SolicitedDataModal > emite paramChange al escribir y validationChange según validez  306ms
+ ✓ src/lib/components/dds/change-account.component.test.ts (8 tests) 607ms
+ ✓ src/lib/components/txns/internals/txn-type.component.test.ts (3 tests) 229ms
+ ✓ src/lib/components/txns/internals/txn.component.test.ts (29 tests) 3829ms
+   ✓ Txn > el boton de configurar sesion revela el LifetimeSliderBase (slider + TimePicker)  328ms
+   ✓ Txn > "Quiero configurar el tiempo de mi sesión" abre el selector en un popup  518ms
+   ✓ Txn > Aceptar cierra el popup y conserva el tiempo elegido junto al enlace  623ms
+   ✓ Txn > cerrar con la x o fuera del popup conserva el tiempo elegido  307ms
+ ✓ src/lib/components/txns/internals/phone-input.component.test.ts (7 tests) 3141ms
+   ✓ PhoneInputComponent > busca y selecciona un país con el teclado y cierra con Escape  1012ms
+   ✓ PhoneInputComponent > mueve la opción activa con las flechas  1252ms
+   ✓ PhoneInputComponent > avisa si no hay países y usa el idioma activo  361ms
+ ✓ src/lib/primitives/btn-base.component.test.ts (3 tests) 277ms
+ ✓ src/lib/components/sections/login-section.component.test.ts (2 tests) 303ms
+ ✓ src/lib/provide-block-auth.test.ts (3 tests) 312ms
+ ✓ src/lib/primitives/arrow-icon.component.test.ts (2 tests) 203ms
+ ✓ src/lib/components/modals/modal-signup.component.test.ts (3 tests) 411ms
+ ✓ src/lib/primitives/btn-arrow-dir.component.test.ts (2 tests) 247ms
+ ✓ src/lib/__tests__/integration.test.ts (1 test) 853ms
+   ✓ integración Angular + core > conectar wallet propaga la address al estado consumido por Angular  851ms
+ ✓ src/lib/components/btns/btn-signin.component.test.ts (4 tests) 564ms
+   ✓ BtnSignin > renderiza con el id correcto  375ms
+ ✓ src/lib/teleport-body.directive.test.ts (2 tests) 96ms
+ ✓ src/lib/components/contents/content-signin.component.test.ts (2 tests) 133ms
+ ✓ src/lib/components/sections/internals/selected-button.component.test.ts (1 test) 140ms
+ ✓ src/lib/primitives/horizontal-loader.component.test.ts (2 tests) 134ms
+ ✓ src/lib/primitives/input-base.component.test.ts (2 tests) 152ms
+ ✓ src/lib/icons/icons.test.ts (17 tests) 431ms
+ ✓ src/lib/components/txns/internals/permissions-required-modal.component.test.ts (3 tests) 194ms
+ ✓ src/lib/primitives/icon-base.component.test.ts (2 tests) 146ms
+ ✓ src/lib/components/btns/btn-base-provider.component.test.ts (1 test) 161ms
+ ✓ src/lib/components/sections/internals/providers-buttons.component.test.ts (1 test) 200ms
+ ✓ src/lib/primitives/progressbar.component.test.ts (2 tests) 123ms
+ ✓ src/lib/inject-store.test.ts (1 test) 124ms
+ ✓ src/lib/components/sections/footer-section.component.test.ts (1 test) 183ms
+ ✓ src/lib/components/sections/internals/providers-filters.component.test.ts (1 test) 122ms
+ ✓ src/lib/primitives/img-loader.component.test.ts (1 test) 134ms
+ ✓ src/lib/primitives/dropdown-arrow.component.test.ts (1 test) 88ms
+ ✓ src/lib/primitives/divider-base.component.test.ts (1 test) 123ms
+ ✓ src/lib/components/btns/btn-metamask.component.test.ts (1 test) 125ms
+ ✓ src/lib/primitives/oval-spinner.component.test.ts (1 test) 71ms
+ ✓ src/lib/components/btns/btn-phantom.component.test.ts (1 test) 151ms
+ ✓ src/lib/components/btns/btn-wallet-connect.component.test.ts (1 test) 88ms
+ ✓ src/lib/components/sections/providers-section.component.test.ts (1 test) 97ms
+ ✓ src/lib/components/btns/btn-microsoft.component.test.ts (1 test) 93ms
+ ✓ src/lib/components/btns/btn-gmail.component.test.ts (1 test) 82ms
+ ✓ src/lib/components/btns/btn-google-base.component.test.ts (1 test) 75ms
+
+ Test Files  54 passed (54)
+      Tests  224 passed (224)
+   Start at  02:15:05
+   Duration  16.65s (transform 11.13s, setup 48.88s, collect 110.62s, tests 27.47s, environment 23.55s, prepare 32.88s)
+
+ ELIFECYCLE  Test failed. See above for more details.

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,19 @@
+
+> @block-auth.io/angular@0.3.0 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> pnpm build:css
+
+
+> @block-auth.io/angular@0.3.0 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
+
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
+
+Rebuilding...
+
+Done in 2017ms.
+
+> @block-auth.io/angular@0.3.0 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> tsc -p tsconfig.lib.json --noEmit
+

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # @block-auth.io/angular
 
+## 0.3.0
+
+### Minor Changes
+
+- cf32d5e: El teléfono de los datos solicitados se valida con `libphonenumber-js`
+  (1.13.14, metadatos `min`) y se envía en `userParams['users-phone']` en formato
+  E.164 (`+34634343343`). `@block-auth.io/core` exporta utilidades de teléfono
+  independientes del framework: `getPhoneCountries(locale)` (ISO2, prefijo,
+  bandera emoji y nombre localizado con `Intl.DisplayNames`),
+  `searchPhoneCountries`, `getPhoneCountryFlag`, `getPhoneDialCode`,
+  `getDefaultPhoneCountry` (región del idioma del navegador o `ES`),
+  `parsePhoneValue`, `formatPhoneForDisplay` (internacional, o el texto tal cual
+  si no se entiende), `isValidPhoneValue`, `toPhoneE164`, `buildPhoneE164`,
+  `buildPhoneValue`, `updatePhoneDraft` y `resolvePhoneDraft`. Se acepta también
+  el formato antiguo `34_634343343_es`. `solicitedData` añade
+  `PARAM_NORMALIZERS`, `normalizeParamValue`, `PARAM_DISPLAY_FORMATTERS` y
+  `formatParamValue`, y no marca como cambiado el mismo número escrito en otro
+  formato. Nuevos textos `phoneCountry`, `searchPhoneCountry` y
+  `noPhoneCountryResults`.
+
+  En React, Vue y Angular el campo de teléfono de `SolicitedDataModal` es un
+  selector de país (bandera y prefijo, con lista de países buscable por nombre,
+  código o prefijo, navegable con flechas, Enter para elegir y Escape para
+  cerrar) más el número nacional. El país por defecto es el del valor existente,
+  si no la región del idioma del navegador y si no España.
+  Nuevos componentes internos `PhoneInput` (React y Vue) y `ba-phone-input`
+  (Angular). `@block-auth.io/ui-styles` añade las clases `bal-ba-glass-phone`,
+  `bal-ba-glass-phone-row`, `bal-ba-glass-phone-country`,
+  `bal-ba-glass-phone-flag`, `bal-ba-glass-phone-chevron`,
+  `bal-ba-glass-phone-menu`, `bal-ba-glass-phone-search`,
+  `bal-ba-glass-phone-list`, `bal-ba-glass-phone-option(-active|-name|-dial)` y
+  `bal-ba-glass-phone-empty`.
+
+- df80cbe: Los datos solicitados de un login se piden al servidor. Nuevo
+  `client.txns.dataRequest(txnId)`: emite `user:txns:data` y resuelve con los
+  datos que pide la app (`slug`, `mode`, `status`, `value`), o `null` si el
+  servidor falla o no responde a tiempo. `client.txns.accept` acepta
+  `grantedParams` y `revokedParams` y los envía en `provider:signin`. Si el servidor rechaza la
+  aceptación por datos obligatorios ausentes, no autorizados o inválidos, el
+  login sigue abierto con `$ui.acceptTxnError` en lugar de llamar a `_onError`.
+  Nuevos tipos `TxnDataParam` y `TxnDataRequest`, y textos
+  `completeRequiredData`, `requiredDataError`, `shareData`, `saveData`,
+  `undoChange`, `savedToProfileHint`, `pendingChangeHint`, `notSharedHint`,
+  `clearField` y `acceptData`.
+
+  `TxnsOverview` usa `dataRequest` al seleccionar la transacción y, si devuelve
+  `null`, mantiene el cálculo con `uiConfig`. `SolicitedDataModal` muestra todos
+  los datos que pide la app como campos rellenos con el valor del perfil, cada
+  uno editable con una casilla "Ceder" (marcada por defecto en los `shared` y
+  `granted`, desmarcada en `consent`/`missing` salvo al escribir un valor válido
+  en un campo vacío), un botón "x" para limpiar el campo cuando
+  tiene contenido y, si el valor cambia, la decisión "Guardar" / "Deshacer".
+  Guardar un valor nuevo marca "Ceder"; si después se desmarca, el valor no se
+  envía y se indica que no se cederá. La lógica es pura y se exporta desde
+  `@block-auth.io/core` para los tres frameworks (`getSolicitedParams`,
+  `getSolicitedFields`, `getSolicitedAcceptParams`, `getSolicitedHintKey`,
+  `isSolicitedHintSuccess`, `isSolicitedDataComplete`, `setSolicitedValue`,
+  `setSolicitedShared`, `saveSolicitedValue`, `undoSolicitedValue` y las
+  constantes `PARAM_*`). ACEPTAR
+  queda deshabilitado mientras falte un obligatorio por ceder o haya un cambio
+  cedido sin decidir, y envía `userParams` con los valores nuevos guardados,
+  `grantedParams` con los valores del perfil `consent`/`granted` cedidos y
+  `revokedParams` con los opcionales `shared` o `granted` desmarcados. Un dato
+  `shared` cedido sin cambios no se envía. `SolicitedDataModal` acepta `params`,
+  `sharedParams`, `handleShareChange`, `savedParams`, `handleSaveParam`,
+  `handleUndoParam` y `errorTxt`; `Txn` acepta `grantedParams`, `revokedParams`
+  y `solicitedDataPending`.
+
+  En Vue, `TxnsOverview`, `Txn` y `SolicitedDataModal` replican el mismo
+  comportamiento: `SolicitedDataModal` acepta `params`, `sharedParams`,
+  `savedParams` y `errorTxt`, y emite `shareChange`, `saveParam` y `undoParam`;
+  `Txn` acepta `grantedParams`, `revokedParams` y `solicitedDataPending`.
+
+  En Angular, `TxnsOverviewComponent`, `TxnComponent` y
+  `SolicitedDataModalComponent` replican el mismo comportamiento y diseño:
+  `ba-solicited-data-modal`
+  acepta `params`, `sharedParams`, `savedParams` y `errorTxt` y emite
+  `shareChange` (`ShareChange`), `saveParam` y `undoParam`, y `ba-txn` acepta
+  `grantedParams`, `revokedParams` y `solicitedDataPending`.
+
+  En la aprobación del login, "Permisos requeridos" y "Datos solicitados" son
+  botones de cristal y las flechas animadas aparecen en "Datos solicitados"
+  siempre que quede algo pendiente para continuar, hasta que se resuelva. Al
+  pasar sobre ACEPTAR deshabilitado se indica qué falta: vibra la casilla de la
+  política si no está aceptada y, si no, vibra "Datos solicitados".
+  `ArrowIcon` (`ba-arrow-icon` en
+  Angular) acepta `visible`. `@block-auth.io/ui-styles` añade la clase
+  `bal-ba-head-shake` (keyframes `bal-ba-animate-head-shake`, equivalente a
+  `animate__headShake` de animate.css, desactivada con
+  `prefers-reduced-motion`).
+
+  Rediseño visual "crystal / liquid glass" de la pantalla de aprobación, los
+  modales de permisos y datos solicitados y el selector de tiempo de sesión, sin
+  cambiar tamaños ni contenido. `@block-auth.io/ui-styles` añade las clases
+  `bal-ba-glass-panel`, `bal-ba-glass-pop`, `bal-ba-glass-backdrop`,
+  `bal-ba-glass-rise`, `bal-ba-glass-stagger`, `bal-ba-glass-scroll`,
+  `bal-ba-glass-logo`, `bal-ba-glass-divider(-end)`, `bal-ba-glass-row`,
+  `bal-ba-glass-icon`, `bal-ba-glass-field`, `bal-ba-glass-label`,
+  `bal-ba-glass-badge(-required)`, `bal-ba-glass-input(-wrap|-clear)`,
+  `bal-ba-glass-check(-input|-box)`, `bal-ba-glass-decision`,
+  `bal-ba-glass-chip-btn(-primary)`, `bal-ba-glass-hint(-success)`,
+  `bal-ba-glass-error`, `bal-ba-glass-link`, `bal-ba-glass-consent(-checked)`,
+  `bal-ba-glass-action(-reject|-accept)`, `bal-ba-glass-time`,
+  `bal-ba-glass-slider` y `bal-ba-glass-btn-pending`, con animaciones cortas
+  desactivadas con `prefers-reduced-motion`.
+
+### Patch Changes
+
+- Updated dependencies [cf32d5e]
+- Updated dependencies [df80cbe]
+  - @block-auth.io/core@0.10.0
+  - @block-auth.io/ui-styles@0.5.0
+
 ## 0.2.10
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@block-auth.io/angular",
-  "version": "0.2.10",
+  "version": "0.3.0",
   "dependencies": {
     "nanostores": "^0.10.0",
     "tslib": "^2.6.0",
-    "@block-auth.io/core": "0.9.1",
-    "@block-auth.io/ui-styles": "0.4.0"
+    "@block-auth.io/ui-styles": "0.5.0",
+    "@block-auth.io/core": "0.10.0"
   },
   "peerDependencies": {
     "@angular/core": ">=20.0.0",

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

@@ -19,6 +19,15 @@ describe('PermissionsRequiredModal', () => {
     ).toBeDefined();
   });
 
+  it('usa el panel glass con filas e iconos animados', async () => {
+    const { container } = await render(PermissionsRequiredModalComponent);
+    const panel = container.querySelector('.bal-ba-glass-panel');
+    expect(panel?.className).toContain('bal-ba-glass-pop');
+    expect(panel?.className).toContain('bal-ba-glass-stagger');
+    expect(container.querySelectorAll('.bal-ba-glass-row')).toHaveLength(3);
+    expect(container.querySelectorAll('.bal-ba-glass-icon')).toHaveLength(3);
+  });
+
   it('respeta el locale activo', async () => {
     setLocale('es');
     await render(PermissionsRequiredModalComponent);

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

@@ -4,7 +4,7 @@ import { injectStore } from '../../../inject-store';
 
 // Port literal de packages/react/src/components/txns/internals/PermissionsRequiredModal.tsx
 // (mapa: packages/vue/.../PermissionsRequiredModal.vue). Sin props/outputs.
-const iconClassNames = 'bas-w-6 bas-h-6 bas-text-[#009F6B]';
+const iconClassNames = 'bal-ba-glass-icon bas-text-[#009F6B]';
 
 @Component({
   selector: 'ba-permissions-required-modal',
@@ -12,10 +12,10 @@ const iconClassNames = 'bas-w-6 bas-h-6 bas-text-[#009F6B]';
   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)]"
+      class="bal-ba-glass-panel bal-ba-glass-pop bal-ba-glass-stagger bas-box-border bas-grid bas-w-[334px] bas-grid-rows-3 bas-gap-3 bas-py-4 bas-pl-3"
     >
       @for (permission of requiredPermissions(); track $index) {
-      <div class="bas-flex bas-flex-row bas-items-center bas-gap-2">
+      <div class="bal-ba-glass-row">
         <span [class]="iconClassNames" aria-hidden="true">{{
           permission.icon
         }}</span>

package/src/lib/components/txns/internals/phone-input.component.test.ts

@@ -0,0 +1,119 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { setLocale } from '@block-auth.io/core';
+import { PhoneInputComponent } from './phone-input.component';
+
+const changes: string[] = [];
+
+@Component({
+  standalone: true,
+  imports: [PhoneInputComponent],
+  template: `<ba-phone-input inputId="phone" [value]="value" (valueChange)="onChange($event)" />
+    <button type="button" (click)="value = ''">reset</button>`,
+})
+class Host {
+  value = '';
+  onChange(next: string): void {
+    this.value = next;
+    changes.push(next);
+  }
+}
+
+const renderHost = async (value: string) => {
+  const result = await render(Host, { componentProperties: { value } });
+  await result.fixture.whenStable();
+  return result;
+};
+
+const countryButton = () => document.getElementById('phone-country') as HTMLButtonElement;
+const nationalInput = () => document.getElementById('phone') as HTMLInputElement;
+const search = () => document.getElementById('phone-country-search') as HTMLInputElement | null;
+
+describe('PhoneInputComponent', () => {
+  afterEach(() => {
+    changes.length = 0;
+    setLocale('en');
+  });
+
+  it('muestra la bandera, el prefijo y el número nacional del valor', async () => {
+    await renderHost('+34634343343');
+    expect(countryButton().textContent).toContain('🇪🇸');
+    expect(countryButton().textContent).toContain('+34');
+    expect(countryButton().getAttribute('aria-label')).toBe('Country: Spain +34');
+    expect(nationalInput().value).toBe('634 34 33 43');
+    expect(nationalInput().type).toBe('tel');
+  });
+
+  it('acepta el formato antiguo y lo muestra separado', async () => {
+    await renderHost('34_634343343_es');
+    expect(countryButton().textContent).toContain('+34');
+    expect(nationalInput().value).toBe('634 34 33 43');
+  });
+
+  it('envía el número en E.164 al escribir el número nacional', async () => {
+    await renderHost('+34');
+    await fireEvent.input(nationalInput(), { target: { value: '634 34 33 43' } });
+    expect(changes[changes.length - 1]).toBe('+34634343343');
+    expect(nationalInput().value).toBe('634 34 33 43');
+  });
+
+  it('busca y selecciona un país con el teclado y cierra con Escape', async () => {
+    const { fixture } = await renderHost('+34634343343');
+    await fireEvent.click(countryButton());
+    await fixture.whenStable();
+    expect(countryButton().getAttribute('aria-expanded')).toBe('true');
+    expect(document.activeElement).toBe(search());
+    expect(screen.getByRole('listbox')).toBeDefined();
+    await fireEvent.input(search()!, { target: { value: 'fran' } });
+    expect(screen.getAllByRole('option').map((option) => option.id)).toContain('phone-country-FR');
+    await fireEvent.keyDown(search()!, { key: 'Escape' });
+    expect(search()).toBeNull();
+    expect(document.activeElement).toBe(countryButton());
+
+    await fireEvent.click(countryButton());
+    await fireEvent.input(search()!, { target: { value: '+33' } });
+    expect(search()!.getAttribute('aria-activedescendant')).toBe('phone-country-FR');
+    await fireEvent.keyDown(search()!, { key: 'Enter' });
+    expect(search()).toBeNull();
+    expect(countryButton().textContent).toContain('+33');
+    expect(changes[changes.length - 1]).toBe('+33634343343');
+    expect(document.activeElement).toBe(nationalInput());
+  });
+
+  it('mueve la opción activa con las flechas', async () => {
+    await renderHost('+34634343343');
+    await fireEvent.keyDown(countryButton(), { key: 'ArrowDown' });
+    expect(search()!.getAttribute('aria-activedescendant')).toBe('phone-country-ES');
+    const options = screen.getAllByRole('option');
+    const index = options.findIndex((o) => o.id === 'phone-country-ES');
+    await fireEvent.keyDown(search()!, { key: 'ArrowDown' });
+    expect(search()!.getAttribute('aria-activedescendant')).toBe(options[index + 1].id);
+    await fireEvent.keyDown(search()!, { key: 'ArrowUp' });
+    await fireEvent.keyDown(search()!, { key: 'ArrowUp' });
+    expect(search()!.getAttribute('aria-activedescendant')).toBe(options[index - 1].id);
+    expect(document.getElementById('phone-country-ES')!.getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('avisa si no hay países y usa el idioma activo', async () => {
+    setLocale('es');
+    await renderHost('+4915112345678');
+    expect(countryButton().getAttribute('aria-label')).toBe('País: Alemania +49');
+    await fireEvent.click(countryButton());
+    expect(search()!.placeholder).toBe('Buscar país o prefijo');
+    await fireEvent.input(search()!, { target: { value: 'zzzz' } });
+    expect(screen.queryByRole('listbox')).toBeNull();
+    expect(screen.getByText('No hay países que coincidan')).toBeDefined();
+  });
+
+  it('cierra la lista al pulsar fuera y conserva el país al vaciar', async () => {
+    const { fixture } = await renderHost('+33612345678');
+    await fireEvent.click(countryButton());
+    await fireEvent.mouseDown(document.body);
+    fixture.detectChanges();
+    expect(search()).toBeNull();
+    await fireEvent.click(screen.getByText('reset'));
+    expect(nationalInput().value).toBe('');
+    expect(countryButton().textContent).toContain('+33');
+  });
+});