@block-auth.io/angular 0.2.9 → 0.3.0

package/.turbo/turbo-typecheck.log

@@ -1,19 +1,19 @@
-
-> @block-auth.io/angular@0.2.8 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
-> pnpm build:css
-
-
-> @block-auth.io/angular@0.2.8 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 1810ms.
-
-> @block-auth.io/angular@0.2.8 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
-> tsc -p tsconfig.lib.json --noEmit
-
+
+> @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,125 @@
 # @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
+
+- Updated dependencies
+  - @block-auth.io/core@0.9.1
+
 ## 0.2.9
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@block-auth.io/angular",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "dependencies": {
     "nanostores": "^0.10.0",
     "tslib": "^2.6.0",
-    "@block-auth.io/core": "0.9.0",
-    "@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');
+  });
+});

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

@@ -0,0 +1,301 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostListener,
+  computed,
+  effect,
+  inject,
+  input,
+  linkedSignal,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import {
+  $locale,
+  getDefaultPhoneCountry,
+  getPhoneCountries,
+  resolvePhoneDraft,
+  searchPhoneCountries,
+  t as translate,
+  updatePhoneDraft,
+  type PhoneCountryCode,
+  type PhoneDraft,
+  type TextKey,
+} from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
+
+@Component({
+  selector: 'ba-phone-input',
+  standalone: true,
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="bal-ba-glass-phone">
+      <div class="bal-ba-glass-phone-row">
+        <button
+          #countryButton
+          type="button"
+          [id]="inputId() + '-country'"
+          aria-haspopup="listbox"
+          [attr.aria-expanded]="isOpen() ? 'true' : 'false'"
+          [attr.aria-controls]="isOpen() ? listId() : null"
+          [attr.aria-label]="buttonLabel()"
+          class="bal-ba-glass-phone-country"
+          (click)="toggle()"
+          (keydown)="onButtonKeyDown($event)"
+        >
+          <span class="bal-ba-glass-phone-flag" aria-hidden="true">{{
+            selected()?.flag
+          }}</span>
+          <span aria-hidden="true">{{ selected()?.dialCode }}</span>
+          <svg
+            viewBox="0 0 10 10"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+            class="bal-ba-glass-phone-chevron"
+          >
+            <path d="M2 3.5 5 6.5 8 3.5" />
+          </svg>
+        </button>
+        <div class="bal-ba-glass-input-wrap">
+          <input
+            #nationalInput
+            [id]="inputId()"
+            type="tel"
+            inputmode="tel"
+            autocomplete="tel-national"
+            [value]="draft().nationalNumber"
+            [attr.aria-invalid]="invalid() ? 'true' : 'false'"
+            [attr.aria-describedby]="describedBy()"
+            class="bal-ba-glass-input"
+            (input)="onNationalInput($event)"
+            (blur)="blurred.emit()"
+          />
+          <ng-content />
+        </div>
+      </div>
+      @if (isOpen()) {
+      <div class="bal-ba-glass-phone-menu">
+        <input
+          #search
+          type="text"
+          role="combobox"
+          autocomplete="off"
+          aria-expanded="true"
+          aria-autocomplete="list"
+          [id]="inputId() + '-country-search'"
+          [attr.aria-controls]="listId()"
+          [attr.aria-activedescendant]="activeId()"
+          [attr.aria-label]="t('searchPhoneCountry')"
+          [placeholder]="t('searchPhoneCountry')"
+          [value]="query()"
+          class="bal-ba-glass-input bal-ba-glass-phone-search"
+          (input)="onQueryInput($event)"
+          (keydown)="onSearchKeyDown($event)"
+        />
+        @if (filtered().length) {
+        <ul
+          #list
+          role="listbox"
+          [id]="listId()"
+          [attr.aria-label]="t('phoneCountry')"
+          class="bal-ba-glass-phone-list"
+        >
+          @for (country of filtered(); track country.iso2; let index = $index) {
+          <li
+            role="option"
+            [id]="optionId(country.iso2)"
+            [attr.aria-selected]="
+              country.iso2 === draft().country ? 'true' : 'false'
+            "
+            [class]="
+              'bal-ba-glass-phone-option' +
+              (index === activeIndex()
+                ? ' bal-ba-glass-phone-option-active'
+                : '')
+            "
+            (mousedown)="$event.preventDefault()"
+            (mouseenter)="activeIndex.set(index)"
+            (click)="select(country.iso2)"
+          >
+            <span aria-hidden="true">{{ country.flag }}</span>
+            <span class="bal-ba-glass-phone-option-name">{{
+              country.name
+            }}</span>
+            <span class="bal-ba-glass-phone-option-dial">{{
+              country.dialCode
+            }}</span>
+          </li>
+          }
+        </ul>
+        } @else {
+        <p role="status" class="bal-ba-glass-phone-empty">
+          {{ t('noPhoneCountryResults') }}
+        </p>
+        }
+      </div>
+      }
+    </div>
+  `,
+})
+export class PhoneInputComponent {
+  inputId = input.required<string>();
+  value = input<string>('');
+  invalid = input(false);
+  describedBy = input<string | null>(null);
+
+  valueChange = output<string>();
+  blurred = output<void>();
+
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly countryButton =
+    viewChild.required<ElementRef<HTMLButtonElement>>('countryButton');
+  private readonly nationalInput =
+    viewChild.required<ElementRef<HTMLInputElement>>('nationalInput');
+  private readonly search = viewChild<ElementRef<HTMLInputElement>>('search');
+  private readonly list = viewChild<ElementRef<HTMLUListElement>>('list');
+  private readonly defaultCountry = getDefaultPhoneCountry();
+
+  protected readonly draft = linkedSignal<string, PhoneDraft>({
+    source: this.value,
+    computation: (value, previous) =>
+      resolvePhoneDraft(value, previous?.value ?? null, this.defaultCountry),
+  });
+  protected readonly isOpen = signal(false);
+  protected readonly query = signal('');
+  protected readonly activeIndex = signal(0);
+  protected readonly countries = computed(() =>
+    getPhoneCountries(this.locale()),
+  );
+  protected readonly filtered = computed(() =>
+    searchPhoneCountries(this.countries(), this.query()),
+  );
+  protected readonly selected = computed(() =>
+    this.countries().find((country) => country.iso2 === this.draft().country),
+  );
+  protected readonly listId = computed(() => `${this.inputId()}-countries`);
+  protected readonly activeId = computed(() => {
+    const active = this.filtered()[this.activeIndex()];
+    return active ? this.optionId(active.iso2) : null;
+  });
+  protected readonly buttonLabel = computed(() =>
+    `${this.t('phoneCountry')}: ${
+      this.selected()?.name ?? this.draft().country
+    } ${this.selected()?.dialCode ?? ''}`.trim(),
+  );
+
+  constructor() {
+    effect(() => {
+      this.search()?.nativeElement.focus();
+    });
+    effect(() => {
+      const id = this.activeId();
+      const list = this.list()?.nativeElement;
+      if (!id || !list) return;
+      list
+        .querySelector<HTMLElement>(`#${id}`)
+        ?.scrollIntoView?.({ block: 'nearest' });
+    });
+  }
+
+  @HostListener('document:mousedown', ['$event'])
+  onDocumentMouseDown(event: MouseEvent): void {
+    if (!this.isOpen()) return;
+    if (!this.host.nativeElement.contains(event.target as Node)) this.isOpen.set(false);
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.key !== 'Escape' || !this.isOpen()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.close();
+  }
+
+  focus(): void {
+    this.nationalInput().nativeElement.focus();
+  }
+
+  protected optionId(iso2: string): string {
+    return `${this.inputId()}-country-${iso2}`;
+  }
+
+  protected toggle(): void {
+    if (this.isOpen()) this.close();
+    else this.open();
+  }
+
+  protected select(iso2: PhoneCountryCode): void {
+    this.commit(updatePhoneDraft(iso2, this.draft().nationalNumber));
+    this.isOpen.set(false);
+    this.focus();
+  }
+
+  protected onNationalInput(event: Event): void {
+    this.commit(
+      updatePhoneDraft(
+        this.draft().country,
+        (event.target as HTMLInputElement).value,
+      ),
+    );
+  }
+
+  protected onQueryInput(event: Event): void {
+    this.query.set((event.target as HTMLInputElement).value);
+    this.activeIndex.set(0);
+  }
+
+  protected onSearchKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const total = this.filtered().length;
+      if (!total) return;
+      const delta = event.key === 'ArrowDown' ? 1 : -1;
+      this.activeIndex.update((index) => (index + delta + total) % total);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const active = this.filtered()[this.activeIndex()];
+      if (active) this.select(active.iso2);
+    } else if (event.key === 'Tab') {
+      this.isOpen.set(false);
+    }
+  }
+
+  protected onButtonKeyDown(event: KeyboardEvent): void {
+    if (event.key !== 'ArrowDown' || this.isOpen()) return;
+    event.preventDefault();
+    this.open();
+  }
+
+  private commit(next: PhoneDraft): void {
+    this.draft.set(next);
+    if (next.value !== this.value()) this.valueChange.emit(next.value);
+  }
+
+  private open(): void {
+    this.query.set('');
+    this.activeIndex.set(
+      Math.max(
+        0,
+        this.countries().findIndex(
+          (country) => country.iso2 === this.draft().country,
+        ),
+      ),
+    );
+    this.isOpen.set(true);
+  }
+
+  private close(): void {
+    this.isOpen.set(false);
+    this.countryButton().nativeElement.focus();
+  }
+}