@block-auth.io/angular 0.2.10 → 0.3.0

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();
+  }
+}