@block-auth.io/angular 0.1.0

package/src/lib/components/txns/txns-overview.component.ts

@@ -0,0 +1,229 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+} from '@angular/core';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+import { TxnComponent } from './internals/txn.component';
+import { TxnTypeComponent } from './internals/txn-type.component';
+import { TxnErrorComponent } from './internals/txn-error.component';
+import { PermissionsRequiredModalComponent } from './internals/permissions-required-modal.component';
+import { SolicitedDataModalComponent, type ParamChange } from './internals/solicited-data-modal.component';
+
+// Orquestador de txns: lee las solicitudes pendientes de `$ws.requests` y la
+// config de UI de `$ui.uiConfig` (vía injectStore). Se conserva la navegación
+// prev/next, la composición de overlays permisos/datos-solicitados, la
+// derivación de required/optional params desde `uiConfig` y las clases `bas-`.
+// Se elimina `useLocale` (textos inline) y los wrappers framer-motion.
+interface TxnPreParams {
+  iconUrl?: string;
+  domain?: string;
+  appName?: string;
+  txnType?: string;
+  appKey?: string;
+  to?: string;
+  lifetime?: { value?: number; min?: number; max?: number };
+  [key: string]: unknown;
+}
+
+const accountShort = (addr: string | null | undefined): string =>
+  addr && addr.length > 10 ? `${addr.slice(0, 6)}…${addr.slice(-4)}` : (addr ?? '');
+
+const TXN_ERROR_TEXTS: Record<string, string> = {
+  no_transactions_found: 'No transactions found',
+  no_app_key_found: 'No application key found',
+  no_contract_address_found: 'No contract address found',
+  no_transactions_params_found: 'No transaction params found',
+  unknown: 'Something went wrong',
+};
+
+@Component({
+  selector: 'ba-txns-overview',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    TxnComponent,
+    TxnTypeComponent,
+    TxnErrorComponent,
+    PermissionsRequiredModalComponent,
+    SolicitedDataModalComponent,
+  ],
+  template: `
+    <div
+      data-testid="txns-overview"
+      class="bas-flex bas-box-border bas-relative bas-h-full bas-w-full bas-gap-6 bas-flex-col bas-items-center bas-p-6 bas-font-medium bas-justify-center"
+    >
+      @if (isEmpty() && isSigning()) {
+        <ba-txn-error
+          errorMessageTxt="No transactions found"
+          errorMessageSlug="no_transactions_found"
+          [closeTxns]="closeTxns()"
+          [isCountdown]="false"
+        />
+      } @else if (!isEmpty() && error().value) {
+        <ba-txn-error
+          [errorMessageTxt]="errorText()"
+          [errorMessageSlug]="error().messageSlug"
+          [closeTxns]="closeTxns()"
+          [isCountdown]="false"
+        />
+      } @else if (!isEmpty()) {
+        <div class="bas-flex bas-flex-col bas-items-center bas-gap-3">
+          <img
+            [src]="preParams().iconUrl || 'https://dashboard.block-auth.io/img/blockauth_logo.png'"
+            class="bas-h-16"
+            alt="app logo"
+          />
+          <h2 class="bas-m-0 bas-text-base bas-text-[var(--bal-primary-600)]">
+            {{ preParams().domain || 'dashboard.block-auth.io' }}
+          </h2>
+          <p class="bas-m-0 bas-text-lg bas-text-[var(--bal-primary-800)]">
+            {{ preParams().appName || 'Block-Auth' }}
+            <span class="bas-text-base bas-text-[var(--bal-primary-500)]">solicits to</span>
+            {{ accountShort(did()) }}
+          </p>
+        </div>
+        <ba-txn-type
+          [txnType]="preParams().txnType || 'Log In'"
+          [txnsLength]="txns().length"
+          (prevTxnClicked)="onPrevTxnClicked()"
+          (nextTxnClicked)="onNextTxnClicked()"
+        />
+        <div class="bas-h-[334px] bas-w-full bas-max-w-[330px]">
+          <ba-txn
+            [hasSolicitedData]="hasSolicitedData()"
+            [allRequiredFilled]="allRequiredFilled()"
+            [closeTxns]="closeTxns()"
+            [selectedTxnPreParams]="preParams()"
+            [userParamValues]="userParamValues()"
+            [addError]="addError"
+            (permissionsRequiredClicked)="showPermissions.set(true)"
+            (solicitedDataClicked)="showSolicitedData.set(true)"
+          />
+        </div>
+      }
+
+      @if (showPermissions()) {
+        <div
+          class="bal-ba-transition-2 bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
+          (click)="showPermissions.set(false)"
+        ></div>
+        <div class="bas-absolute bas-top-44 bas-z-40">
+          <ba-permissions-required-modal />
+        </div>
+      }
+
+      @if (showSolicitedData()) {
+        <div
+          class="bal-ba-transition-2 bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
+          (click)="showSolicitedData.set(false)"
+        ></div>
+        <div class="bas-absolute bas-top-32 bas-z-40">
+          <ba-solicited-data-modal
+            [requiredParams]="requiredParams()"
+            [optionalParams]="optionalParams()"
+            [userParamValues]="userParamValues()"
+            (paramChange)="handleParamChange($event)"
+            (validationChange)="allRequiredFilled.set($event)"
+          />
+        </div>
+      }
+    </div>
+  `,
+})
+export class TxnsOverviewComponent {
+  closeTxns = input<() => void>(() => {});
+
+  private readonly client = injectBlockAuthClient();
+  private readonly ws = injectStore(this.client.state.$ws);
+  private readonly ui = injectStore(this.client.state.$ui);
+
+  protected readonly accountShort = accountShort;
+
+  protected readonly selectedIndex = signal(0);
+  protected readonly showPermissions = signal(false);
+  protected readonly showSolicitedData = signal(false);
+  protected readonly userParamValues = signal<Record<string, string>>({});
+  protected readonly allRequiredFilled = signal(false);
+  protected readonly error = signal<{ value: boolean; messageSlug: string }>({
+    value: false,
+    messageSlug: '',
+  });
+
+  protected readonly txns = computed(() => this.ws().requests ?? []);
+  protected readonly did = computed(() => this.ws().did);
+  protected readonly isSigning = computed(() => this.ui().isSigning);
+  protected readonly isEmpty = computed(() => this.txns().length === 0);
+  protected readonly errorText = computed(
+    () => TXN_ERROR_TEXTS[this.error().messageSlug] ?? TXN_ERROR_TEXTS['unknown'],
+  );
+
+  private readonly selectedTxn = computed(
+    () => this.txns()[this.selectedIndex()] ?? this.txns()[0],
+  );
+  protected readonly preParams = computed<TxnPreParams>(() => {
+    const raw = this.selectedTxn()?.['pre_params'] as string | undefined;
+    if (!raw) return {};
+    try {
+      return JSON.parse(raw) as TxnPreParams;
+    } catch {
+      return {};
+    }
+  });
+
+  private readonly requiredOptionalParams = computed(() => {
+    const cfg =
+      (this.ui().uiConfig as { config?: Record<string, unknown> } | null)?.config ?? {};
+    const required: string[] = [];
+    const optional: string[] = [];
+    const kycMode = (cfg['modules'] as { kyc?: { mode?: string } } | undefined)?.kyc?.mode;
+    if (kycMode === 'required') required.push('modules-kyc');
+    else if (kycMode === 'optional') optional.push('modules-kyc');
+    Object.entries((cfg['params'] as Record<string, { mode?: string }>) || {}).forEach(
+      ([slug, paramCfg]) => {
+        if (paramCfg.mode === 'required') required.push(slug);
+        else if (paramCfg.mode === 'optional') optional.push(slug);
+      },
+    );
+    return { requiredParams: required, optionalParams: optional };
+  });
+  protected readonly requiredParams = computed(() => this.requiredOptionalParams().requiredParams);
+  protected readonly optionalParams = computed(() => this.requiredOptionalParams().optionalParams);
+  protected readonly hasSolicitedData = computed(
+    () => this.requiredParams().length > 0 || this.optionalParams().length > 0,
+  );
+
+  constructor() {
+    // ACCEPT is gated on `allRequiredFilled`. With no required params there's
+    // nothing to fill, so it must default to true.
+    effect(() => {
+      const params = this.requiredParams();
+      this.allRequiredFilled.set(params.length === 0);
+    });
+  }
+
+  // Surfaces an accept-validation error and clears the accepting loader.
+  addError = (messageSlug = 'unknown'): void => {
+    this.error.set({ value: true, messageSlug });
+    this.client.state.$ui.setKey('isAcceptingTxn', false);
+  };
+
+  handleParamChange({ slug, value }: ParamChange): void {
+    this.userParamValues.update((prev) => ({ ...prev, [slug]: value }));
+  }
+
+  onPrevTxnClicked(): void {
+    const len = this.txns().length;
+    if (len === 0) return;
+    this.selectedIndex.update((i) => (i === 0 ? len - 1 : i - 1));
+  }
+  onNextTxnClicked(): void {
+    const len = this.txns().length;
+    if (len === 0) return;
+    this.selectedIndex.update((i) => (i === len - 1 ? 0 : i + 1));
+  }
+}

package/src/lib/icons/ai-outline-disconnect.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/ai (AiOutlineDisconnect), espejo de
+// packages/vue/src/icons/AiOutlineDisconnect.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-ai-outline-disconnect',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true">
+      <path
+        d="M832.6 191.4c-84.6-84.6-221.5-84.6-306 0l-96.9 96.9 51 51 96.9-96.9c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204l-96.9 96.9 51.1 51.1 96.9-96.9c84.4-84.6 84.4-221.5-.1-306.1zM446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l96.9-96.9-51.1-51.1-96.9 96.9c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l96.9-96.9-51-51-96.8 97zM260.3 209.4a8.03 8.03 0 0 0-11.3 0L209.4 249a8.03 8.03 0 0 0 0 11.3l554.4 554.4c3.1 3.1 8.2 3.1 11.3 0l39.6-39.6c3.1-3.1 3.1-8.2 0-11.3L260.3 209.4z"
+      />
+    </svg>
+  `,
+})
+export class AiOutlineDisconnectComponent {
+  class = input('');
+}

package/src/lib/icons/bi-logo-gmail.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/bi (BiLogoGmail), espejo de
+// packages/vue/src/icons/BiLogoGmail.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-bi-logo-gmail',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path
+        d="m18.73 5.41-1.28 1L12 10.46 6.55 6.37l-1.28-1A2 2 0 0 0 2 7.05v11.59A1.36 1.36 0 0 0 3.36 20h3.19v-7.72L12 16.37l5.45-4.09V20h3.19A1.36 1.36 0 0 0 22 18.64V7.05a2 2 0 0 0-3.27-1.64z"
+      />
+    </svg>
+  `,
+})
+export class BiLogoGmailComponent {
+  class = input('');
+}

package/src/lib/icons/cg-profile.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/cg (CgProfile), espejo de
+// packages/vue/src/icons/CgProfile.vue (mismo `viewBox`/`d`, 2 `<path>` con
+// `fill-rule`/`clip-rule`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-cg-profile',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16 9C16 11.2091 14.2091 13 12 13C9.79086 13 8 11.2091 8 9C8 6.79086 9.79086 5 12 5C14.2091 5 16 6.79086 16 9ZM14 9C14 10.1046 13.1046 11 12 11C10.8954 11 10 10.1046 10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 14.0902 3.71255 16.014 4.90798 17.5417C6.55245 15.3889 9.14627 14 12.0645 14C14.9448 14 17.5092 15.3531 19.1565 17.4583C20.313 15.9443 21 14.0524 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12ZM12 21C9.84977 21 7.87565 20.2459 6.32767 18.9878C7.59352 17.1812 9.69106 16 12.0645 16C14.4084 16 16.4833 17.1521 17.7538 18.9209C16.1939 20.2191 14.1881 21 12 21Z"
+        fill="currentColor"
+      />
+    </svg>
+  `,
+})
+export class CgProfileComponent {
+  class = input('');
+}

package/src/lib/icons/check-icon.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de @heroicons/react/20/solid (CheckIcon), espejo de
+// packages/vue/src/icons/CheckIcon.vue (mismo `viewBox`/`d`, ver Task V6).
+// `:host { display: contents }` hace que el elemento `ba-check-icon` no
+// participe en el layout; el `class` que un consumidor le pase se enruta al
+// input `class` (declarado explícitamente) en vez de al atributo del host, y
+// se aplica al `<svg>` interno — así el resultado visual/DOM es equivalente
+// al de la SFC Vue, donde la clase cae directamente sobre el `<svg>`.
+@Component({
+  selector: 'ba-check-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+      />
+    </svg>
+  `,
+})
+export class CheckIconComponent {
+  class = input('');
+}

package/src/lib/icons/ci-clock2.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de `react-icons/ci` (CiClock2), usado por
+// `pickers/time-picker.component`. Espejo 1:1 de packages/vue/src/icons/CiClock2.vue
+// (mismo viewBox 0 0 24 24, mismos paths) para que un `grep` sobre el nombre
+// original siga encontrando el equivalente Angular.
+// `:host { display: contents }` + `class` input enrutado al `<svg>`: mismo
+// patrón que el resto de iconos (ver check-icon.component).
+@Component({
+  selector: 'ba-ci-clock2',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <g id="Clock_2">
+        <g>
+          <path
+            d="M12,21.933A9.933,9.933,0,1,1,21.933,12,9.944,9.944,0,0,1,12,21.933ZM12,3.067A8.933,8.933,0,1,0,20.933,12,8.943,8.943,0,0,0,12,3.067Z"
+          />
+          <path
+            d="M18,12.5H12a.429.429,0,0,1-.34-.14c-.01,0-.01-.01-.02-.02A.429.429,0,0,1,11.5,12V6a.5.5,0,0,1,1,0v5.5H18A.5.5,0,0,1,18,12.5Z"
+          />
+        </g>
+      </g>
+    </svg>
+  `,
+})
+export class CiClock2Component {
+  class = input('');
+}

package/src/lib/icons/fa-arrow-right.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/fa (FaArrowRight), espejo de
+// packages/vue/src/icons/FaArrowRight.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-fa-arrow-right',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true">
+      <path
+        d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+      />
+    </svg>
+  `,
+})
+export class FaArrowRightComponent {
+  class = input('');
+}

package/src/lib/icons/fa-times.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/fa (FaTimes), espejo de
+// packages/vue/src/icons/FaTimes.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-fa-times',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 352 512" fill="currentColor" aria-hidden="true">
+      <path
+        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+      />
+    </svg>
+  `,
+})
+export class FaTimesComponent {
+  class = input('');
+}

package/src/lib/icons/fa-undo.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/fa (FaUndo), espejo de
+// packages/vue/src/icons/FaUndo.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-fa-undo',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+      <path
+        d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"
+      />
+    </svg>
+  `,
+})
+export class FaUndoComponent {
+  class = input('');
+}

package/src/lib/icons/icons.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/angular';
+import type { Type } from '@angular/core';
+import * as icons from './index';
+
+// Espejo de packages/vue/src/icons/icons.test.ts: cada icono debe renderizar
+// un <svg> con `viewBox` y al menos un <path> con `d`. El host de cada
+// componente usa `display: contents` (ver check-icon.component.ts), así que
+// se consulta el `<svg>` dentro del `container`, no el host.
+describe('icons', () => {
+  it.each(Object.entries(icons))(
+    '%s renderiza un <svg> con viewBox y al menos un <path>',
+    async (_name, IconComponent) => {
+      const { container } = await render(IconComponent as Type<unknown>);
+      const svg = container.querySelector('svg');
+      expect(svg).not.toBeNull();
+      expect(svg?.getAttribute('viewBox')).toBeTruthy();
+      const paths = container.querySelectorAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+      paths.forEach((path) => {
+        expect(path.getAttribute('d')).toBeTruthy();
+      });
+    },
+  );
+});

package/src/lib/icons/index.ts

@@ -0,0 +1,22 @@
+// Barrel de iconos inline (Task A6). Cada componente reproduce fielmente el
+// SVG del icono de react-icons/heroicons homónimo (mismo nombre de export),
+// espejo 1:1 de packages/vue/src/icons/*.vue (mismo `viewBox`/`d`/`stroke`)
+// para que un futuro `grep` sobre el nombre original siga encontrando el
+// equivalente Angular sin fricción de traducción. Exports alfabetizados.
+export { AiOutlineDisconnectComponent } from './ai-outline-disconnect.component';
+export { BiLogoGmailComponent } from './bi-logo-gmail.component';
+export { CgProfileComponent } from './cg-profile.component';
+export { CheckIconComponent } from './check-icon.component';
+export { CiClock2Component } from './ci-clock2.component';
+export { FaArrowRightComponent } from './fa-arrow-right.component';
+export { FaTimesComponent } from './fa-times.component';
+export { FaUndoComponent } from './fa-undo.component';
+export { IoIosArrowBackComponent } from './io-ios-arrow-back.component';
+export { IoIosArrowForwardComponent } from './io-ios-arrow-forward.component';
+export { IoMdArrowBackComponent } from './io-md-arrow-back.component';
+export { IoMdArrowForwardComponent } from './io-md-arrow-forward.component';
+export { PiWarningFillComponent } from './pi-warning-fill.component';
+export { TbArrowsExchange2Component } from './tb-arrows-exchange2.component';
+export { TbCopyComponent } from './tb-copy.component';
+export { TbCopyCheckFilledComponent } from './tb-copy-check-filled.component';
+export { TiVendorMicrosoftComponent } from './ti-vendor-microsoft.component';

package/src/lib/icons/io-ios-arrow-back.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/io (IoIosArrowBack), espejo de
+// packages/vue/src/icons/IoIosArrowBack.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-io-ios-arrow-back',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+      <path
+        d="M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z"
+      />
+    </svg>
+  `,
+})
+export class IoIosArrowBackComponent {
+  class = input('');
+}

package/src/lib/icons/io-ios-arrow-forward.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/io (IoIosArrowForward), espejo de
+// packages/vue/src/icons/IoIosArrowForward.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-io-ios-arrow-forward',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+      <path
+        d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"
+      />
+    </svg>
+  `,
+})
+export class IoIosArrowForwardComponent {
+  class = input('');
+}

package/src/lib/icons/io-md-arrow-back.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/io (IoMdArrowBack), espejo de
+// packages/vue/src/icons/IoMdArrowBack.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-io-md-arrow-back',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+      <path d="M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.701H427v-42.75z" />
+    </svg>
+  `,
+})
+export class IoMdArrowBackComponent {
+  class = input('');
+}

package/src/lib/icons/io-md-arrow-forward.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/io (IoMdArrowForward), espejo de
+// packages/vue/src/icons/IoMdArrowForward.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-io-md-arrow-forward',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true">
+      <path d="M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.701H85v42.75z" />
+    </svg>
+  `,
+})
+export class IoMdArrowForwardComponent {
+  class = input('');
+}

package/src/lib/icons/pi-warning-fill.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/pi (PiWarningFill), espejo de
+// packages/vue/src/icons/PiWarningFill.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-pi-warning-fill',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+      <path
+        d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z"
+      />
+    </svg>
+  `,
+})
+export class PiWarningFillComponent {
+  class = input('');
+}

package/src/lib/icons/tb-arrows-exchange2.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/tb (TbArrowsExchange2), espejo de
+// packages/vue/src/icons/TbArrowsExchange2.vue (mismo `viewBox`/`d`, trazo en
+// vez de relleno: `fill="none"` + `stroke="currentColor"`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-tb-arrows-exchange2',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg
+      [class]="class()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M17 10h-14l4 -4" />
+      <path d="M7 14h14l-4 4" />
+    </svg>
+  `,
+})
+export class TbArrowsExchange2Component {
+  class = input('');
+}

package/src/lib/icons/tb-copy-check-filled.component.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Icono inline extraído de react-icons/tb (TbCopyCheckFilled), espejo de
+// packages/vue/src/icons/TbCopyCheckFilled.vue (mismo `viewBox`/`d`).
+// Ver check-icon.component.ts para la explicación del enrutado de `class`.
+@Component({
+  selector: 'ba-tb-copy-check-filled',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <svg [class]="class()" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path
+        d="M18.333 6a3.667 3.667 0 0 1 3.667 3.667v8.666a3.667 3.667 0 0 1 -3.667 3.667h-8.666a3.667 3.667 0 0 1 -3.667 -3.667v-8.666a3.667 3.667 0 0 1 3.667 -3.667zm-3.333 -4c1.094 0 1.828 .533 2.374 1.514a1 1 0 1 1 -1.748 .972c-.221 -.398 -.342 -.486 -.626 -.486h-10c-.548 0 -1 .452 -1 1v9.998c0 .32 .154 .618 .407 .805l.1 .065a1 1 0 1 1 -.99 1.738a3 3 0 0 1 -1.517 -2.606v-10c0 -1.652 1.348 -3 3 -3zm1.293 9.293l-3.293 3.292l-1.293 -1.292a1 1 0 0 0 -1.414 1.414l2 2a1 1 0 0 0 1.414 0l4 -4a1 1 0 0 0 -1.414 -1.414"
+      />
+    </svg>
+  `,
+})
+export class TbCopyCheckFilledComponent {
+  class = input('');
+}