@block-auth.io/angular 0.1.0

package/src/lib/components/dds/change-account.component.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { ChangeAccountComponent } from './change-account.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' })),
+}));
+
+// Port de packages/react/src/components/dds/ChangeAccountComponent.test.tsx
+// (mapa: packages/vue/.../ChangeAccountComponent.test.ts).
+describe('ChangeAccountComponent', () => {
+  function makeClient() {
+    return {
+      web3: { signup: vi.fn() },
+      oauth: { signupGoogle: vi.fn(), signupMicrosoft: vi.fn() },
+      connectBlockAuth: vi.fn(),
+      state: { $ui: map({}), $ws: map({}), $wallet: map({}) },
+    } as any;
+  }
+
+  const renderFor = (serviceName: string) =>
+    render(ChangeAccountComponent, {
+      inputs: { serviceName, text: 'Change account' },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+
+  it('renderiza el texto "Change account" para el serviceName blockauth', async () => {
+    await renderFor('blockauth');
+    expect(screen.getByText('Change account')).toBeDefined();
+  });
+
+  for (const svc of ['blockauth', 'google', 'microsoft', 'metamask', 'phantom']) {
+    it(`renderiza para el provider soportado "${svc}"`, async () => {
+      await renderFor(svc);
+      expect(screen.getByText('Change account')).toBeDefined();
+    });
+  }
+
+  it('no renderiza ningun boton para un serviceName desconocido', async () => {
+    await renderFor('desconocido');
+    expect(screen.queryByText('Change account')).toBeNull();
+  });
+
+  it('emite changeAccountClicked al pulsar la fila', async () => {
+    const onChange = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [ChangeAccountComponent],
+      template: `<ba-change-account serviceName="blockauth" text="Change account" (changeAccountClicked)="f()" />`,
+    })
+    class Host {
+      f = onChange;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    await fireEvent.click(screen.getByText('Change account'));
+    expect(onChange).toHaveBeenCalled();
+  });
+});

package/src/lib/components/dds/change-account.component.ts

@@ -0,0 +1,112 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { TbArrowsExchange2Component } from '../../icons';
+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 { DropdownProfileItemComponent } from './dropdown-profile-item.component';
+
+// Rama de 5 vías sobre `serviceName` (blockauth/google/microsoft/metamask/
+// phantom): cada una envuelve un `<ba-dropdown-profile-item>` (con el icono de
+// intercambio) dentro del botón del provider en modo `isDropdownProfile`, que
+// re-dispara el flujo de conexión de ese provider.
+//
+// El click real de "cambiar cuenta" no lo dispara este output por sí solo: el
+// `<button>` nativo de cada `Btn*` en modo `isDropdownProfile` tiene su propio
+// `(click)` (que ejecuta el signin/connect real); el `dropdown-profile-item`
+// anidado es un `<div>` hijo de ese botón, y al clicarlo el evento burbujea al
+// botón exterior, disparando AMBOS handlers.
+@Component({
+  selector: 'ba-change-account',
+  standalone: true,
+  // Igual que `ba-dropdown-profile-item`: host transparente al layout para que
+  // el <div bas-w-full> sea hijo directo del flex de la <ul> y llene el ancho
+  // (con `bas-items-center` en la ul, un host inline se encogería y centraría).
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    BtnBlockAuthComponent,
+    BtnGmailComponent,
+    BtnMicrosoftComponent,
+    BtnMetamaskComponent,
+    BtnPhantomComponent,
+    DropdownProfileItemComponent,
+  ],
+  template: `
+    <div class="bas-h-9 bas-w-full">
+      @switch (serviceName()) {
+        @case ('blockauth') {
+          <ba-btn-block-auth [text]="text()" [isDropdownProfile]="true">
+            <ba-dropdown-profile-item
+              id="ba-ddi-change-account-1"
+              [text]="text()"
+              [firstIcon]="exchangeIcon"
+              [isTopBorder]="isTopBorder()"
+              [disabled]="disabled()"
+              (clicked)="changeAccountClicked.emit()"
+            />
+          </ba-btn-block-auth>
+        }
+        @case ('google') {
+          <ba-btn-gmail [text]="text()" [isDropdownProfile]="true">
+            <ba-dropdown-profile-item
+              id="ba-ddi-change-account-1"
+              [text]="text()"
+              [firstIcon]="exchangeIcon"
+              [isTopBorder]="isTopBorder()"
+              [disabled]="disabled()"
+              (clicked)="changeAccountClicked.emit()"
+            />
+          </ba-btn-gmail>
+        }
+        @case ('microsoft') {
+          <ba-btn-microsoft [text]="text()" [isDropdownProfile]="true">
+            <ba-dropdown-profile-item
+              id="ba-ddi-change-account-1"
+              [text]="text()"
+              [firstIcon]="exchangeIcon"
+              [isTopBorder]="isTopBorder()"
+              [disabled]="disabled()"
+              (clicked)="changeAccountClicked.emit()"
+            />
+          </ba-btn-microsoft>
+        }
+        @case ('metamask') {
+          <ba-btn-metamask [text]="text()" [isDropdownProfile]="true">
+            <ba-dropdown-profile-item
+              id="ba-ddi-change-account-1"
+              [text]="text()"
+              [firstIcon]="exchangeIcon"
+              [isTopBorder]="isTopBorder()"
+              [disabled]="disabled()"
+              (clicked)="changeAccountClicked.emit()"
+            />
+          </ba-btn-metamask>
+        }
+        @case ('phantom') {
+          <ba-btn-phantom [text]="text()" [isDropdownProfile]="true">
+            <ba-dropdown-profile-item
+              id="ba-ddi-change-account-1"
+              [text]="text()"
+              [firstIcon]="exchangeIcon"
+              [isTopBorder]="isTopBorder()"
+              [disabled]="disabled()"
+              (clicked)="changeAccountClicked.emit()"
+            />
+          </ba-btn-phantom>
+        }
+      }
+    </div>
+  `,
+})
+export class ChangeAccountComponent {
+  serviceName = input('');
+  text = input('');
+  disabled = input(false);
+  isTopBorder = input(false);
+
+  changeAccountClicked = output<void>();
+
+  protected readonly exchangeIcon = TbArrowsExchange2Component;
+}

package/src/lib/components/dds/dropdown-profile-btn.component.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { DropdownProfileBtnComponent } from './dropdown-profile-btn.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' })),
+}));
+
+// Port de packages/react/src/components/dds/DropdownProfileBtn.test.tsx (mapa:
+// packages/vue/.../DropdownProfileBtn.test.ts).
+describe('DropdownProfileBtn', () => {
+  function makeClient(ws: Record<string, any> = {}) {
+    return { state: { $ui: map({}), $ws: map({ ...ws }) } } as any;
+  }
+
+  it('renderiza el data-service del serviceName y emite clicked al pulsar', async () => {
+    const onClick = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileBtnComponent],
+      template: `<ba-dropdown-profile-btn serviceName="blockauth" (clicked)="f()" />`,
+    })
+    class Host {
+      f = onClick;
+    }
+    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+
+    const btn = screen.getByTestId('dropdown-profile-btn');
+    expect(btn.getAttribute('data-service')).toBe('blockauth');
+    await fireEvent.click(btn);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('copia el DID al clicar la fila del DID sin propagar el click al boton', async () => {
+    const writeText = vi.fn();
+    Object.assign(navigator, { clipboard: { writeText } });
+    const onClick = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileBtnComponent],
+      template: `<ba-dropdown-profile-btn serviceName="blockauth" (clicked)="f()" />`,
+    })
+    class Host {
+      f = onClick;
+    }
+    // Forzar un DID legible desde $ws (fallback cuando storage está vacío).
+    await render(Host, {
+      providers: [provideBlockAuthClientForTest(makeClient({ did: '0xabcdef1234567890' }))],
+    });
+
+    const didRow = screen.getByText(/^did:/);
+    await fireEvent.click(didRow);
+    // Copia el DID completo, no la etiqueta acortada.
+    expect(writeText).toHaveBeenCalledWith('0xabcdef1234567890');
+    // stopPropagation: el click de copiar no debe emitir el click del botón.
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});

package/src/lib/components/dds/dropdown-profile-btn.component.ts

@@ -0,0 +1,185 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
+import { utils } from '@block-auth.io/core';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+import { providersStyles } from '../../primitives/providersStyles';
+import { DropdownArrowComponent } from '../../primitives/dropdown-arrow.component';
+import { TbCopyComponent, TbCopyCheckFilledComponent } from '../../icons';
+
+// El click-outside lo maneja el PADRE, que envuelve este componente en su
+// propio `<div>` con una template ref; por eso aquí no hay prop de contenedor.
+// Los `classNames` por tamaño salen de mapas indexados por `dropdownBtnSize`.
+//
+// `rawDid`/`rawAccount` se leen dentro de `computed()`s que dependen de `ui`/`ws`
+// (relee storage vía `utils.browserBase` en cada recompute).
+@Component({
+  selector: 'ba-dropdown-profile-btn',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DropdownArrowComponent, TbCopyComponent, TbCopyCheckFilledComponent],
+  template: `
+    <div
+      data-testid="dropdown-profile-btn"
+      [attr.data-service]="serviceNameResolved()"
+      [class]="
+        'bal-ba-transition-2 bas-group bas-relative bas-box-border bas-grid bas-h-full bas-w-full bas-cursor-pointer bas-flex-row bas-items-center bas-justify-between bas-gap-1 bas-overflow-hidden bas-rounded-lg bas-mx-auto ' +
+        dropdownBtnBgClassNames() + ' bas-border-2 bas-border-solid ' +
+        gridClassNames() + ' ' +
+        (dropdownBtnBorderClassNames() || style().borderStyles + ' ' + style().hoverBorderStyles)
+      "
+      [style.minHeight]="height() != null ? height() + 'px' : null"
+      [style.width]="widthStyle()"
+      (click)="clicked.emit()"
+    >
+      <span
+        [class]="
+          'bas-absolute bas-right-2.5 bas-top-1.5 bas-h-2 bas-w-2 bas-rounded-full ' +
+          (!isSignedFirstCheck() ? 'bas-bg-gray-400' : !isSigned() ? 'bas-bg-red-400' : 'bas-bg-green-400')
+        "
+      ></span>
+      <div class="bas-z-10 bas-flex bas-h-full bas-w-full bas-items-center bas-justify-center bas-rounded-md">
+        <img
+          [src]="style().imgSrc"
+          [alt]="serviceNameResolved() + ' icon'"
+          [class]="'bal-ba-transition-2 bal-ba-transform-base bal-ba-hover-scale-110 bas-rounded-md ' + imgSizesClassNames()"
+          [style.backgroundColor]="style().imgBgColor"
+        />
+      </div>
+      <div
+        [class]="'bal-ba-transition-2 bas-flex bas-h-full bas-w-full bas-flex-col bas-items-center bas-justify-center bas-font-semibold bas-min-w-0 ' + dropdownBtnTextColorClassNames()"
+      >
+        <div
+          [class]="
+            'bal-ba-transition-2 bas-flex bas-max-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-1 bas-cursor-pointer ' +
+            (isDidCopied() ? 'bas-text-[#4d849b]' : 'hover:bas-opacity-50')
+          "
+          (click)="onCopyDid($event)"
+        >
+          <p class="bas-m-0 bas-truncate bas-text-sm">{{ did() }}</p>
+          @if (isDidCopied()) {
+            <ba-tb-copy-check-filled class="bal-ba-transition-2 bas-h-[18px] bas-w-[18px] bas-shrink-0" />
+          } @else {
+            <ba-tb-copy class="bal-ba-transition-2 bas-h-[18px] bas-w-[18px] bas-shrink-0" />
+          }
+        </div>
+        @if (showAccountRow()) {
+          <div
+            [class]="
+              'bal-ba-transition-2 bas-flex bas-max-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-1 bas-cursor-pointer ' +
+              (isAccountCopied() ? 'bas-text-[#4d849b]' : 'hover:bas-opacity-50')
+            "
+            (click)="onCopyAccount($event)"
+          >
+            <p class="bas-m-0 bas-truncate bas-text-xs">{{ accountSubtitle() }}</p>
+            @if (isAccountCopied()) {
+              <ba-tb-copy-check-filled class="bal-ba-transition-2 bas-h-4 bas-w-4 bas-shrink-0" />
+            } @else {
+              <ba-tb-copy class="bal-ba-transition-2 bas-h-4 bas-w-4 bas-shrink-0" />
+            }
+          </div>
+        }
+      </div>
+      <div [class]="arrowContainerClassNames()">
+        <ba-dropdown-arrow
+          id="ba-ddp-btn-arrow"
+          [isOpen]="isProfileOpen()"
+          [color]="style().colorBase"
+          [sizeClassNames]="arrowSizesClassNames()"
+        />
+      </div>
+    </div>
+  `,
+})
+export class DropdownProfileBtnComponent {
+  serviceName = input<string | null>(null);
+  dropdownBtnBgClassNames = input('bas-bg-transparent');
+  dropdownBtnSize = input<'xs' | 'small' | 'base' | 'large'>('xs');
+  dropdownBtnBorderClassNames = input<string | undefined>(undefined);
+  dropdownBtnTextColorClassNames = input(
+    'bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]',
+  );
+  height = input<number | null>(null);
+  isProfileOpen = input(false);
+
+  clicked = output<void>();
+
+  private readonly client = injectBlockAuthClient();
+  private readonly ui = injectStore(this.client.state.$ui);
+  private readonly ws = injectStore(this.client.state.$ws);
+
+  private readonly gridClassNamesBySize: Record<string, string> = {
+    xs: 'bas-grid-cols-[46px_1fr_28px]',
+    small: 'bas-grid-cols-[46px_1fr_28px]',
+    base: 'bas-grid-cols-[56px_1fr_28px]',
+    large: 'bas-grid-cols-[56px_1fr_28px]',
+  };
+  private readonly widthBySize: Record<string, number> = { xs: 224, small: 224, base: 244, large: 244 };
+  private readonly imgSizesClassNamesBySize: Record<string, string> = {
+    xs: 'bas-h-9 bas-w-9',
+    small: 'bas-h-10 bas-w-10',
+    base: 'bas-h-12 bas-w-12',
+    large: 'bas-h-12 bas-w-12',
+  };
+  private readonly arrowSizesClassNamesBySize: Record<string, string> = {
+    xs: 'bas-h-3.5 bas-w-3.5',
+    small: 'bas-h-3.5 bas-w-3.5',
+    base: 'bas-h-4 bas-w-4',
+    large: 'bas-h-4 bas-w-4',
+  };
+
+  protected readonly serviceNameResolved = computed(
+    () => this.serviceName() ?? this.ui().serviceName ?? 'blockauth',
+  );
+  protected readonly style = computed(
+    () => providersStyles[this.serviceNameResolved()] ?? providersStyles['blockauth'],
+  );
+  protected readonly isSignedFirstCheck = computed(() => this.ui().isSignedFirstCheck);
+  protected readonly isSigned = computed(() => this.ui().isSigned);
+
+  private short = (value: string, start: number, end: number): string =>
+    value.length > start + end ? `${value.slice(0, start)}…${value.slice(-end)}` : value;
+
+  private readonly rawDid = computed(() => {
+    const session = utils.browserBase.getSession();
+    const external = utils.browserBase.getExternalService();
+    return (this.serviceNameResolved() === 'blockauth' ? session.did : external.did) || this.ws().did || '';
+  });
+  protected readonly did = computed(() => this.short(this.rawDid(), 6, 4).replace('0x', 'did:'));
+  private readonly rawAccount = computed(() => utils.browserBase.getExternalService().account || '');
+  protected readonly accountSubtitle = computed(() =>
+    this.serviceNameResolved() === 'blockauth' ? '' : this.short(this.rawAccount(), 5, 8),
+  );
+  protected readonly showAccountRow = computed(
+    () => this.serviceNameResolved() !== 'blockauth' && !!this.rawAccount(),
+  );
+
+  protected readonly isDidCopied = signal(false);
+  protected readonly isAccountCopied = signal(false);
+
+  protected readonly gridClassNames = computed(() => this.gridClassNamesBySize[this.dropdownBtnSize()]);
+  protected readonly imgSizesClassNames = computed(() => this.imgSizesClassNamesBySize[this.dropdownBtnSize()]);
+  protected readonly arrowSizesClassNames = computed(() => this.arrowSizesClassNamesBySize[this.dropdownBtnSize()]);
+  protected readonly widthStyle = computed(() => `min(100%, ${this.widthBySize[this.dropdownBtnSize()]}px)`);
+  protected readonly arrowContainerClassNames = computed(() => {
+    let classNames = 'bas-h-full bas-w-full bas-justify-center';
+    const size = this.dropdownBtnSize();
+    if (size === 'xs' || size === 'small') classNames += ' bas-pt-1.5';
+    return classNames;
+  });
+
+  onCopyDid(e: MouseEvent): void {
+    this.copy(this.rawDid(), this.isDidCopied, e);
+  }
+  onCopyAccount(e: MouseEvent): void {
+    this.copy(this.rawAccount(), this.isAccountCopied, e);
+  }
+
+  private copy(value: string, copiedSignal: { set: (v: boolean) => void }, e: MouseEvent): void {
+    // Don't toggle the dropdown open/closed when the user only wants to copy.
+    e.stopPropagation();
+    if (!value) return;
+    void navigator.clipboard?.writeText(value);
+    copiedSignal.set(true);
+    setTimeout(() => copiedSignal.set(false), 3000);
+  }
+}

package/src/lib/components/dds/dropdown-profile-item.component.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { DropdownProfileItemComponent } from './dropdown-profile-item.component';
+
+// Port de packages/react/src/components/dds/DropdownProfileItem.test.tsx (mapa:
+// packages/vue/.../DropdownProfileItem.test.ts). Puramente presentacional.
+describe('DropdownProfileItem', () => {
+  it('renderiza el texto y emite clicked al pulsar', async () => {
+    const onClick = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileItemComponent],
+      template: `<ba-dropdown-profile-item text="Disconnect" (clicked)="f()" />`,
+    })
+    class Host {
+      f = onClick;
+    }
+    await render(Host);
+    await fireEvent.click(screen.getByText('Disconnect'));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('no emite clicked cuando disabled=true', async () => {
+    const onClick = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileItemComponent],
+      template: `<ba-dropdown-profile-item text="Disconnect" [disabled]="true" (clicked)="f()" />`,
+    })
+    class Host {
+      f = onClick;
+    }
+    await render(Host);
+    await fireEvent.click(screen.getByText('Disconnect'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('renderiza el contenido proyectado de los slots firstIcon/secondIcon', async () => {
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileItemComponent],
+      template: `<ba-dropdown-profile-item text="Item">
+        <span slot="firstIcon" data-testid="first-icon"></span>
+        <span slot="secondIcon" data-testid="second-icon"></span>
+      </ba-dropdown-profile-item>`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.getByTestId('first-icon')).toBeDefined();
+    expect(screen.getByTestId('second-icon')).toBeDefined();
+  });
+
+  it('aplica el estilo de borde superior cuando isTopBorder=true', async () => {
+    const { container } = await render(DropdownProfileItemComponent, {
+      inputs: { text: 'Item', isTopBorder: true },
+    });
+    expect(container.querySelector('li')?.className).toContain('bas-border-t');
+  });
+
+  // Regresión: el host es display:contents para que el <li> (bas-w-full) sea hijo
+  // directo del flex de la <ul> y los items queden alineados a la izquierda (no
+  // centrados por el `bas-items-center` de la ul encogiendo el host).
+  it('el host es transparente al layout (display: contents)', async () => {
+    @Component({
+      standalone: true,
+      imports: [DropdownProfileItemComponent],
+      template: `<ba-dropdown-profile-item text="Item" />`,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const host = container.querySelector('ba-dropdown-profile-item') as HTMLElement;
+    expect(host.style.display).toBe('contents');
+  });
+});

package/src/lib/components/dds/dropdown-profile-item.component.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, Type, input, output } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+
+// `firstIcon`/`secondIcon` (ReactNode) -> proyección de contenido con
+// `[slot=firstIcon]`/`[slot=secondIcon]` (misma convención `[slot=icon]` ya
+// usada por `ba-btn-base-provider`). `onClick` -> output `clicked`.
+//
+// Además, para el caso de la lista de items adicionales de `DropdownProfile`
+// (iconos dinámicos por-item que no se pueden proyectar estáticamente dentro de
+// un `@for`), se acepta un `firstIcon` opcional como *tipo de componente*
+// (`Type<unknown>`) renderizado vía `NgComponentOutlet` — equivalente Angular
+// idiomático del `VNode | (() => VNode)` del port Vue.
+//
+// La animación framer-motion (`motion.li` + `liItemVariants`) se elimina: el
+// panel completo se anima a nivel de `DropdownProfile` (mismo patrón que
+// `DropdownBase`). `onAnimationComplete` también se elimina aquí; la señal
+// equivalente ("panel abierto") la gestiona `DropdownProfile`.
+@Component({
+  selector: 'ba-dropdown-profile-item',
+  standalone: true,
+  // El host debe ser transparente al layout para que el <li> (bas-w-full) sea
+  // hijo directo del flex de la <ul> (como en React, donde <motion.li> se
+  // renderiza directamente). Sin esto el host `<ba-dropdown-profile-item>` es un
+  // flex-item que, con `bas-items-center` en la ul, se encoge a su contenido y
+  // queda CENTRADO en vez de llenar el ancho y alinear el texto a la izquierda.
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgComponentOutlet],
+  template: `
+    <li
+      [id]="id()"
+      [class]="
+        'bas-box-border bas-max-h-[36px] bas-min-h-[36px] bas-w-full ' +
+        (isTopBorder()
+          ? 'bas-border-t bas-border-[var(--bal-primary-90)] bas-border-solid bas-border-x-0 bas-border-b-0 bas-box-border hover:bas-border-[var(--bal-primary-100)] bal-ba-transition-2'
+          : '')
+      "
+    >
+      <div
+        [class]="
+          'bal-ba-transition-2 bas-box-border bas-flex bas-w-full bas-flex-row bas-items-center bas-justify-between bas-gap-2 bas-px-2 bas-py-1 bas-text-[var(--bal-primary-700)] hover:bas-bg-[var(--bal-primary-10)] hover:bas-text-[var(--bal-primary-900)] ' +
+          classNames() + ' ' +
+          (isTopBorder() ? 'bas-h-[35px]' : 'bas-h-9') + ' ' +
+          (disabled() ? 'bas-cursor-not-allowed bas-opacity-50' : 'bas-cursor-pointer')
+        "
+        (click)="onItemClicked()"
+      >
+        <div class="bas-flex bas-h-full bas-w-fit bas-flex-row bas-items-center bas-gap-3">
+          @if (firstIcon()) {
+            <ng-container [ngComponentOutlet]="firstIcon()" [ngComponentOutletInputs]="{ class: 'bas-h-5 bas-w-5' }" />
+          }
+          <ng-content select="[slot=firstIcon]" />
+          <p class="bas-m-0 bas-text-base">{{ text() }}</p>
+        </div>
+        <ng-content select="[slot=secondIcon]" />
+      </div>
+    </li>
+  `,
+})
+export class DropdownProfileItemComponent {
+  id = input('dd-item-container');
+  text = input('');
+  isTopBorder = input(false);
+  classNames = input('');
+  disabled = input(false);
+  /** Icono dinámico opcional (tipo de componente) para items en bucle. */
+  firstIcon = input<Type<unknown> | null>(null);
+
+  clicked = output<void>();
+
+  onItemClicked(): void {
+    if (!this.disabled()) this.clicked.emit();
+  }
+}