@block-auth.io/angular 0.1.0

package/src/lib/components/sections/footer-section.component.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { FooterSectionComponent } from './footer-section.component';
+
+// Port de packages/react/src/components/sections/FooterSection.test.tsx.
+describe('FooterSection', () => {
+  it('renderiza el footer con el enlace', async () => {
+    @Component({
+      standalone: true,
+      imports: [FooterSectionComponent],
+      template: `<ba-footer-section text1="Powered by" text2="Block-Auth" href="https://block-auth.io" />`,
+    })
+    class HostComponent {}
+    await render(HostComponent);
+    const link = screen.getByText('Block-Auth');
+    expect(link.getAttribute('href')).toBe('https://block-auth.io');
+  });
+});

package/src/lib/components/sections/footer-section.component.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+/**
+ * Port literal de packages/react/src/components/sections/FooterSection.tsx
+ * (mapa: packages/vue/.../sections/FooterSection.vue). Footer presentacional
+ * puro, sin core logic ni stores.
+ */
+@Component({
+  selector: 'ba-footer-section',
+  standalone: true,
+  // Hijo directo del grid de content-signup: el host debe ser transparente al
+  // layout para que el <footer> interno sea el grid item real (ver
+  // providers-section para el detalle). Sin esto el layout del modal se solapa.
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <footer
+      data-testid="footer-section"
+      [class]="
+        'bas-group bas-box-border bas-flex bas-h-12 bas-items-end bas-justify-start bas-py-1 bas-text-left bas-text-gray-500 ' +
+        getFooterClassNames(isEditable(), device())
+      "
+    >
+      <p class="bas-ba-transition-2 bas-m-0 bas-text-left bas-text-gray-500 group-hover:bas-text-slate-600">
+        {{ text1() }}
+        <a
+          [href]="href()"
+          target="_blank"
+          rel="noreferrer"
+          class="bal-ba-transition-2 bas-font-semibold bas-leading-6 bas-text-[var(--bal-primary-900)] group-hover:bas-text-[var(--bal-primary-600)]"
+          >{{ text2() }}</a
+        >
+      </p>
+    </footer>
+  `,
+})
+export class FooterSectionComponent {
+  isEditable = input(false);
+  device = input<'desktop' | 'phone'>('desktop');
+  text1 = input('');
+  text2 = input('');
+  href = input('');
+
+  getFooterClassNames(editable: boolean, dev: string): string {
+    if (!editable) return 'bas-text-xxs xsm:bas-text-xs xsm1:bas-text-sm sm1:bas-col-span-2';
+    if (dev === 'phone') return 'bas-text-xs';
+    return 'bas-text-sm bas-col-span-2';
+  }
+}

package/src/lib/components/sections/internals/providers-buttons.component.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { ProvidersButtonsComponent } from './providers-buttons.component';
+
+// Port de packages/react/src/components/sections/internals/ProvidersButtons.test.tsx.
+// ProvidersButtons no inyecta el client (renderiza <ba-btn-base-provider>, que
+// tampoco lo hace), así que no requiere provideBlockAuthClientForTest.
+describe('ProvidersButtons', () => {
+  it('renderiza un boton por proveedor y propaga la seleccion', async () => {
+    const onSelected = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [ProvidersButtonsComponent],
+      template: `<ba-providers-buttons [showedProviders]="providers" (selectedServiceChange)="onSelected($event)" />`,
+    })
+    class HostComponent {
+      providers = ['metamask', 'phantom'];
+      onSelected = onSelected;
+    }
+    await render(HostComponent);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBe(2);
+    await fireEvent.click(buttons[0]);
+    expect(onSelected).toHaveBeenCalledWith('metamask');
+  });
+});

package/src/lib/components/sections/internals/providers-buttons.component.ts

@@ -0,0 +1,290 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  PLATFORM_ID,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { BtnArrowDirComponent } from '../../../primitives/btn-arrow-dir.component';
+import { providersStyles } from '../../../primitives/providersStyles';
+import { BtnBaseProviderComponent } from '../../btns/btn-base-provider.component';
+
+/**
+ * Grid de proveedores: tarjetas blancas bordeadas, cada una con el icono del
+ * provider sobre fondo tintado y el borde/hover de `providersStyles`.
+ *
+ * Diferencia de arquitectura respecto a react (idéntica al port Vue): allí
+ * `providersWrapperRef`/`providersContainerRef` los crea el padre
+ * (`ProvidersSection`) para medir `scrollWidth`/`clientWidth` y derivar
+ * `isProvidersScroll`. En Angular los template refs son locales al componente
+ * que los declara, así que ese efecto de medición se internaliza aquí (refs
+ * propios + estado `isProvidersScroll`). `setSelectedService` (callback) ->
+ * output `selectedServiceChange`. El shake de framer-motion -> clase `.ba-shake`.
+ */
+@Component({
+  selector: 'ba-providers-buttons',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnArrowDirComponent, BtnBaseProviderComponent],
+  template: `
+    <div
+      #wrapper
+      data-testid="providers-buttons"
+      [class]="
+        'bas-relative bas-z-30 bas-box-border bas-w-full ' +
+        getProvidersWrapperClassNames(providersFiltersEnabled(), isMobile(), isProvidersScroll(), isEditable(), device()) +
+        (isEditable() && isEditing() && !isOpenProvidersBtnsEditable ? ' ba-shake' : '')
+      "
+    >
+      @if (isMobile() && isProvidersScroll()) {
+        <div class="bas-box-border bas-flex bas-h-full bas-w-full bas-items-center bas-justify-start bas-pb-4">
+          <ba-btn-arrow-dir direction="back" [disabled]="false" arrowType="arrow" (clicked)="onScrollArrowClicked('left')" />
+        </div>
+      }
+
+      <div
+        #container
+        [attr.draggable]="isProvidersScroll()"
+        [class]="
+          'bal-ba-scroll-base bas-box-border bas-w-full bas-items-start ' +
+          (isMobile() && isProvidersScroll() ? '' : 'bas-justify-center') + ' ' +
+          (isEditable() && device() === 'phone' ? 'bal-ba-scroll-horizontal' : 'bal-ba-max-659-scroll-horizontal') + ' ' +
+          providersContainerClassNames(
+            uiConfigProvidersInfo().providersColumns ?? 3,
+            providersFiltersEnabled(),
+            showedProviders(),
+            isMobile(),
+            isEditable(),
+            device()
+          )
+        "
+      >
+        @for (item of showedProviders(); track $index) {
+          <div [class]="getBtnBaseProviderContainerClassNames(isEditable(), device())">
+            <ba-btn-base-provider
+              [text]="getBtnProviderText(item, uiConfigProvidersInfo().providersColumns ?? 3, isMobile(), uiConfigProvidersInfo().showProviderNameOnMobile)"
+              [sizeClassNames]="getBtnProviderSize(isMobile(), uiConfigProvidersInfo().showProviderNameOnMobile, isEditable(), device())"
+              [borderClassNames]="getBtnProviderBorderClassNames(item, selectedService())"
+              [isEditable]="isEditable()"
+              [device]="device()"
+              (providerClicked)="selectedServiceChange.emit(item)"
+            >
+              @if (providersStyles[item]) {
+                <img
+                  slot="icon"
+                  [src]="providersStyles[item].imgSrc"
+                  [alt]="providersStyles[item].name"
+                  [class]="getIconSizeClassNames(item, isEditable(), device()) + ' bas-rounded-lg'"
+                />
+              }
+            </ba-btn-base-provider>
+          </div>
+        }
+      </div>
+
+      @if (isMobile() && isProvidersScroll()) {
+        <div class="bas-box-border bas-flex bas-h-full bas-w-full bas-items-center bas-justify-end bas-pb-4">
+          <ba-btn-arrow-dir direction="forward" [disabled]="false" arrowType="arrow" (clicked)="onScrollArrowClicked('right')" />
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      @keyframes ba-shake {
+        0% { transform: rotate(0deg); }
+        35% { transform: rotate(-0.4deg); }
+        70% { transform: rotate(0.6deg); }
+        100% { transform: rotate(0deg); }
+      }
+      .ba-shake { animation: ba-shake 0.35s infinite; }
+    `,
+  ],
+})
+export class ProvidersButtonsComponent {
+  providersFiltersEnabled = input(false);
+  isMobile = input(false);
+  uiConfigProvidersInfo = input<{ providersColumns?: number; showProviderNameOnMobile?: boolean }>({
+    providersColumns: 3,
+    showProviderNameOnMobile: true,
+  });
+  showedProviders = input<string[]>([]);
+  selectedService = input('');
+  isEditable = input(false);
+  isEditing = input(false);
+  device = input<'desktop' | 'phone'>('desktop');
+
+  selectedServiceChange = output<string>();
+
+  // Alias del mapa de estilos para poder referenciarlo desde el template.
+  protected readonly providersStyles = providersStyles;
+  // `isOpenProvidersBtnsEditable` (useState local nunca mutado) — conservado
+  // por paridad de API del shake.
+  protected readonly isOpenProvidersBtnsEditable = false;
+
+  private readonly wrapperRef = viewChild<ElementRef<HTMLDivElement>>('wrapper');
+  private readonly containerRef = viewChild<ElementRef<HTMLDivElement>>('container');
+  protected readonly isProvidersScroll = signal(false);
+
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor() {
+    // Port 1:1 del efecto de medición de ProvidersSection.tsx (líneas 85-103),
+    // internalizado aquí (ver comentario de cabecera).
+    effect((onCleanup) => {
+      // Dependencias reactivas del efecto original.
+      const mobile = this.isMobile();
+      this.showedProviders();
+      this.isEditable();
+      this.isEditing();
+      this.device();
+      if (!mobile) {
+        this.isProvidersScroll.set(false);
+        return;
+      }
+      if (!isPlatformBrowser(this.platformId)) return;
+      this.measureScroll();
+      const t = setTimeout(() => this.measureScroll(), 500);
+      const onResize = () => this.measureScroll();
+      window.addEventListener('resize', onResize);
+      onCleanup(() => {
+        clearTimeout(t);
+        window.removeEventListener('resize', onResize);
+      });
+    });
+  }
+
+  private measureScroll(): void {
+    const container = this.containerRef()?.nativeElement;
+    const wrapper = this.wrapperRef()?.nativeElement;
+    if (!container || !wrapper) return;
+    this.isProvidersScroll.set(container.scrollWidth > wrapper.clientWidth - 24);
+  }
+
+  onScrollArrowClicked(direction: 'left' | 'right'): void {
+    const el = this.containerRef()?.nativeElement;
+    if (!el) return;
+    if (direction === 'left') el.scrollLeft -= 128;
+    else el.scrollLeft += 128;
+  }
+
+  // ------ CLASSNAMES (port literal) ------
+  providersContainerClassNames(
+    providersCols: number,
+    filtersEnabled: boolean,
+    providers: string[],
+    mobile: boolean,
+    editable: boolean,
+    dev: string,
+  ): string {
+    let classNames = '';
+    if (!editable)
+      classNames += ' bas-flex bas-flex-row bas-overflow-x-auto sm1:bas-grid sm1:bas-overflow-y-auto ';
+    else {
+      if (dev === 'phone') classNames += ' bas-flex bas-flex-row bas-overflow-x-auto ';
+      else classNames += ' bas-grid bas-overflow-y-auto ';
+    }
+    const height = mobile ? 'bas-h-full' : 'bas-h-fit';
+    const hPrClassNames = `bas-h-full ${!editable ? 'sm1:bas-pr-1.5' : dev !== 'phone' ? 'bas-pr-1.5' : ''}`;
+    const getHPrClassNames = (length: number) => {
+      if (providers.length > length) classNames += ` ${hPrClassNames} `;
+      else classNames += ` ${height} `;
+    };
+    const gridClassNames = (classWithSm1: string, classWithoutSm1: string) => {
+      if (!editable) return classWithSm1;
+      if (dev !== 'phone') return classWithoutSm1;
+      return '';
+    };
+    if (providersCols === 1) {
+      classNames += ` bas-gap-2 ${gridClassNames('sm1:bas-grid-cols-1', 'bas-grid-cols-1')} `;
+      if (filtersEnabled) getHPrClassNames(2);
+      else getHPrClassNames(3);
+    } else if (providersCols === 2) {
+      classNames += ` bas-gap-2.5 ${gridClassNames('sm1:bas-grid-cols-2', 'bas-grid-cols-2')} `;
+      if (filtersEnabled) getHPrClassNames(4);
+      else getHPrClassNames(6);
+    } else if (providersCols === 3) {
+      classNames += ` bas-gap-x-2 bas-gap-y-2.5 ${gridClassNames('sm1:bas-grid-cols-3', 'bas-grid-cols-3')} `;
+      if (filtersEnabled) getHPrClassNames(6);
+      else getHPrClassNames(9);
+    }
+    if (!mobile && filtersEnabled) {
+      if (!editable) classNames += ' sm1:bas-mt-4 sm1:bas-max-h-[calc(100%-16px)] ';
+      else if (dev !== 'phone') classNames += ' bas-mt-4 bas-max-h-[calc(100%-16px)] ';
+    }
+    return classNames;
+  }
+
+  getBtnProviderText(item: string, providerCols: number, mobile: boolean, showOnMobile?: boolean): string {
+    if ((providerCols === 1 && !mobile) || (mobile && showOnMobile)) return item;
+    return '';
+  }
+
+  getBtnProviderSize(mobile: boolean, showOnMobile: boolean | undefined, editable: boolean, dev: string): string {
+    let classNames = '';
+    if (!editable) classNames += ' sm1:bas-h-16 sm1:bas-w-full ';
+    else if (dev !== 'phone') classNames += ' bas-h-16 bas-w-full ';
+    if (!mobile) return classNames;
+    if (showOnMobile) classNames += ' bas-min-w-[128px] bas-h-12 ';
+    classNames += ' bas-w-16 bas-h-12 ';
+    return classNames;
+  }
+
+  getBtnProviderBorderClassNames(item: string, selected: string): string {
+    const style = providersStyles[item];
+    let classNames = `${style ? style.hoverBorderStyles : 'hover:bas-border-slate-400'}`;
+    if (item === 'blockauth') classNames += ' bas-border-[3px] ';
+    else classNames += ' bas-border-2 ';
+    if (selected === item && style) classNames += ` ${style.borderStyles} `;
+    else classNames += ' bas-border-slate-300 ';
+    return classNames;
+  }
+
+  getBtnBaseProviderContainerClassNames(editable: boolean, dev: string): string {
+    if (!editable) return 'bas-h-fit bas-w-fit sm1:bas-h-16 sm1:bas-w-full';
+    if (dev === 'phone') return 'bas-h-fit bas-w-fit';
+    return 'bas-h-16 bas-w-full';
+  }
+
+  getIconSizeClassNames(item: string, editable: boolean, dev: string): string {
+    if (item === 'blockauth') {
+      if (!editable) return 'bas-h-9 bas-w-9 sm1:bas-h-12 sm1:bas-w-12';
+      if (dev === 'phone') return 'bas-h-9 bas-w-9';
+      return 'bas-h-12 bas-w-12';
+    }
+    if (!editable) return 'bas-h-8 bas-w-8 sm1:bas-h-10 sm1:bas-w-10';
+    if (dev === 'phone') return 'bas-h-8 bas-w-8';
+    return 'bas-h-10 bas-w-10';
+  }
+
+  getProvidersWrapperClassNames(
+    filtersEnabled: boolean,
+    mobile: boolean,
+    providersScroll: boolean,
+    editable: boolean,
+    dev: string,
+  ): string {
+    const isMobileIsProvidersScrollClassNames = `${
+      mobile && providersScroll ? 'bas-grid bas-grid-cols-[40px_1fr_40px] bas-px-2' : 'bas-px-3'
+    }`;
+    if (!editable) {
+      return `bas-py-1.5 bas-col-span-2 bas-h-[76px] sm1:bas-col-span-1
+      sm1:bas-px-2 sm1:bas-py-0 ${filtersEnabled ? 'sm1:bas-h-[188px]' : 'sm1:bas-h-[230px]'} ${isMobileIsProvidersScrollClassNames}`;
+    }
+    if (dev === 'phone') {
+      return `bas-py-1.5 bas-col-span-2 bas-h-[76px]
+      ${isMobileIsProvidersScrollClassNames}`;
+    }
+    return `bas-col-span-1 bas-px-2 bas-py-0 ${filtersEnabled ? 'bas-h-[188px]' : 'bas-h-[230px]'} ${
+      mobile && providersScroll ? 'bas-grid bas-grid-cols-[40px_1fr_40px]' : ''
+    }`;
+  }
+}

package/src/lib/components/sections/internals/providers-filters.component.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { ProvidersFiltersComponent } from './providers-filters.component';
+
+// Port de packages/react/src/components/sections/internals/ProvidersFilters.test.tsx.
+// El i18n se lee del store `$locale` del core (singleton), así que no hace
+// falta un client falso para este componente presentacional.
+describe('ProvidersFilters', () => {
+  it('renderiza el buscador y propaga el cambio', async () => {
+    const onChangeProviderSearch = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [ProvidersFiltersComponent],
+      template: `<ba-providers-filters (changeProviderSearch)="onChangeProviderSearch($event)" />`,
+    })
+    class HostComponent {
+      onChangeProviderSearch = onChangeProviderSearch;
+    }
+    await render(HostComponent);
+    const input = screen.getByTestId('provider-search');
+    await fireEvent.input(input, { target: { value: 'meta' } });
+    expect(onChangeProviderSearch).toHaveBeenCalledWith('meta');
+  });
+});

package/src/lib/components/sections/internals/providers-filters.component.ts

@@ -0,0 +1,139 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
+import { InputBaseComponent } from '../../../primitives/input-base.component';
+import { DropdownBaseComponent, type DropdownItem } from '../../../primitives/dropdown-base.component';
+
+/**
+ * Fila de búsqueda de proveedores + filtro por web-type. El buscador es el
+ * `<ba-input-base>` absorbido; el filtro "Todos" es el `<ba-dropdown-base>`.
+ * El shake de framer-motion se traduce a la clase CSS `.ba-shake` (mismo
+ * patrón que el port Vue). Callback props -> outputs:
+ * `setOpenWebType` -> `openWebTypeChange`, `onChangeProviderSearch` ->
+ * `changeProviderSearch`, `onChangeWebType` -> `changeWebType`.
+ *
+ * `containerWithActiveClickOutsideRef` (React ref) -> input `container`
+ * reenviado a `<ba-dropdown-base>`. i18n vía el store `$locale` del core
+ * (mismo patrón que BtnBlockAuth), no vía BlockAuthService, para no exigir
+ * un client completo a este componente presentacional.
+ */
+// Extiende DropdownItem (incluye su index signature `[key: string]: unknown`)
+// para poder pasarse a `<ba-dropdown-base [items]/[selectedItem]>` bajo
+// strictTemplates de ng-packagr; `name`/`value` quedan explícitos por claridad.
+export interface WebTypeItem extends DropdownItem {
+  name: string;
+  value: string;
+}
+
+/** Ítems localizados del filtro de web-type ("Web 2"/"Web 3" iguales en ambos idiomas). */
+export const makeWebTypeItems = (t: (key: TextKey) => string): WebTypeItem[] => [
+  { name: t('webTypeAll'), value: 'all' },
+  { name: 'Web 2', value: 'web2' },
+  { name: 'Web 3', value: 'web3' },
+];
+
+@Component({
+  selector: 'ba-providers-filters',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [InputBaseComponent, DropdownBaseComponent],
+  template: `
+    <div
+      data-testid="providers-filters"
+      [class]="
+        'bas-relative bas-z-50 bas-box-border bas-h-fit bas-w-full bas-items-end bas-justify-end bas-gap-2 bas-px-2 ' +
+        (bothEnabled() ? 'bas-grid bas-grid-cols-[1fr_100px]' : 'bas-flex') +
+        (isEditable() && isEditing() && !isOpenFiltersEditable ? ' ba-shake' : '')
+      "
+    >
+      @if (uiConfigProvidersInfo().enableSearch) {
+        <ba-input-base
+          size="small"
+          [labelText]="searchLabelText() ?? t('search')"
+          inputId="search-provider-label"
+          inputTestId="provider-search"
+          [enableError]="false"
+          [isInputValueManaged]="true"
+          [className]="bothEnabled() ? '' : 'bas-max-w-[254px]'"
+          [inputValue]="searchProviderValue()"
+          (changedInputValue)="changeProviderSearch.emit($event)"
+          borderRadiusClassNames="bas-rounded-xl"
+          [blueStyles]="true"
+        />
+      }
+      @if (uiConfigProvidersInfo().enableWebTypeFilter) {
+        <div class="bas-w-full bas-max-w-[254px]">
+          <ba-dropdown-base
+            btnId="btn-web-type-filter"
+            [isOpen]="openWebType()"
+            (isOpenChange)="openWebTypeChange.emit($event)"
+            [showTitle]="false"
+            size="small"
+            [items]="items()"
+            [selectedItem]="selected()"
+            keyName="value"
+            (changeSelectedItem)="onDropdownChangeSelectedItem($event)"
+            width="100%"
+            [dropdownHeight]="122"
+            borderRadiusClassNames="bas-rounded-xl"
+            [container]="container()"
+            (clickOutside)="openWebTypeChange.emit(false)"
+            [showStatusIndicator]="true"
+            [showImg]="false"
+            [showCheckWhenActive]="true"
+            [manageActiveWithIsOptionSelected]="false"
+            [blueStyles]="true"
+            [disabled]="isEditable() && isEditing()"
+          />
+        </div>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      @keyframes ba-shake {
+        0% { transform: rotate(0deg); }
+        35% { transform: rotate(-0.4deg); }
+        70% { transform: rotate(0.6deg); }
+        100% { transform: rotate(0deg); }
+      }
+      .ba-shake { animation: ba-shake 0.35s infinite; }
+    `,
+  ],
+})
+export class ProvidersFiltersComponent {
+  container = input<HTMLElement | null>(null);
+  uiConfigProvidersInfo = input<{ enableSearch?: boolean; enableWebTypeFilter?: boolean }>({
+    enableSearch: true,
+    enableWebTypeFilter: true,
+  });
+  searchProviderValue = input('');
+  openWebType = input(false);
+  selectedWebType = input<WebTypeItem | undefined>(undefined);
+  webTypesItems = input<WebTypeItem[] | undefined>(undefined);
+  isEditable = input(false);
+  isEditing = input(false);
+  device = input<'desktop' | 'tablet' | 'phone'>('desktop');
+  searchLabelText = input<string | undefined>(undefined);
+
+  openWebTypeChange = output<boolean>();
+  changeProviderSearch = output<string>();
+  changeWebType = output<WebTypeItem>();
+
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  // `isOpenFiltersEditable` (useState local nunca mutado en el JSX pegado):
+  // se conserva por paridad de API del cálculo del shake.
+  protected readonly isOpenFiltersEditable = false;
+
+  protected items = computed<WebTypeItem[]>(() => this.webTypesItems() ?? makeWebTypeItems(this.t));
+  protected selected = computed<WebTypeItem>(() => this.selectedWebType() ?? this.items()[0]);
+  protected bothEnabled = computed(
+    () => !!this.uiConfigProvidersInfo().enableSearch && !!this.uiConfigProvidersInfo().enableWebTypeFilter,
+  );
+
+  onDropdownChangeSelectedItem(item: DropdownItem): void {
+    this.changeWebType.emit({ name: item.name, value: item.value });
+  }
+}

package/src/lib/components/sections/internals/selected-button.component.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { SelectedButtonComponent } from './selected-button.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' })),
+}));
+
+function makeClient() {
+  return {
+    web3: { signup: vi.fn() },
+    state: { $ui: map({}), $wallet: map({}) },
+  } as any;
+}
+
+// Port de packages/react/src/components/sections/internals/SelectedButton.test.tsx.
+describe('SelectedButton', () => {
+  it('renderiza el boton del servicio seleccionado (metamask)', async () => {
+    @Component({
+      standalone: true,
+      imports: [SelectedButtonComponent],
+      template: `<ba-selected-button selectedService="metamask" />`,
+    })
+    class HostComponent {}
+    await render(HostComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    expect(screen.getByText('MetaMask')).toBeDefined();
+  });
+});