@block-auth.io/angular 0.1.0

package/src/lib/primitives/pickers/time-picker.component.ts

@@ -0,0 +1,124 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { convertSecondsToTime, formatNumberToString } from '../helpers';
+import { CiClock2Component } from '../../icons';
+import { DropdownPickerAnimatedBaseComponent } from './dropdown-picker-animated-base.component';
+import {
+  TimePickerDropdownSelectorComponent,
+  type TimeArrays,
+} from './time-picker-dropdown-selector.component';
+
+// Picker de tiempo `HH:MM:SS`. Construye los rangos de horas/minutos/segundos a
+// partir de los límites `min`/`max` en segundos y los renderiza dentro del
+// `<ba-dropdown-picker-animated-base>`. El label de Guardar llega por
+// `btnSaveText`. El icono del reloj usa `<ba-ci-clock2>`.
+// `:host { display: contents }`: el shell del picker es el hijo real del
+// contenedor.
+@Component({
+  selector: 'ba-time-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  imports: [
+    DropdownPickerAnimatedBaseComponent,
+    TimePickerDropdownSelectorComponent,
+    CiClock2Component,
+  ],
+  template: `
+    <ba-dropdown-picker-animated-base
+      [isOpen]="isOpen()"
+      [size]="size()"
+      [enableError]="enableError()"
+      [enableWhiteSpaces]="enableWhiteSpaces()"
+      [error]="error()"
+      [errorMessage]="errorMessage()"
+      [btnId]="id() + '-btn'"
+      [inputId]="id() + '-time-input'"
+      [inputValue]="timeInputValue()"
+      [container]="container()"
+      [exceptions]="exceptions()"
+      [width]="width()"
+      [isInsideModal]="isInsideModal()"
+      [modalId]="modalId()"
+      [dropdownDirection]="dropdownDirection()"
+      [classNames]="classNames()"
+      [btnZIndexClassNames]="btnZIndexClassNames()"
+      [dropdownZIndexClassNames]="dropdownZIndexClassNames()"
+      (isOpenChange)="isOpenChange.emit($event)"
+      (toggleDropdown)="toggleTimerDropdown.emit()"
+    >
+      <ba-ci-clock2
+        slot="icon"
+        class="bal-ba-transition-150 bas-h-6 bas-w-6 bas-cursor-pointer bas-text-[#468faf] hover:bas-text-[#014f86]"
+      />
+
+      <ba-time-picker-dropdown-selector
+        [id]="id()"
+        [hoursArray]="hoursArray()"
+        [minutesArrays]="minutesArrays()"
+        [secondsArrays]="secondsArrays()"
+        [defaultValues]="timeInputValue()"
+        [btnSaveText]="btnSaveText()"
+        (timeChanged)="timeChanged.emit($event)"
+        (toggleTimerDropdown)="toggleTimerDropdown.emit()"
+      />
+    </ba-dropdown-picker-animated-base>
+  `,
+})
+export class TimePickerComponent {
+  id = input('time-picker');
+  size = input<'xxs' | 'xs' | 'small' | 'base' | 'large'>('base');
+  isOpen = input(false);
+  min = input(10);
+  max = input(29100);
+  enableError = input(false);
+  enableWhiteSpaces = input(true);
+  error = input(false);
+  errorMessage = input('');
+  timeInputValue = input('01:00:00');
+  container = input<HTMLElement | null>(null);
+  exceptions = input<(HTMLElement | null)[]>([]);
+  btnSaveText = input('Save');
+  width = input<number | string>(152);
+  isInsideModal = input(false);
+  modalId = input('txns-overview');
+  dropdownDirection = input<'up' | 'down'>('down');
+  classNames = input('');
+  btnZIndexClassNames = input('bas-z-0');
+  dropdownZIndexClassNames = input('bas-z-50');
+
+  isOpenChange = output<boolean>();
+  toggleTimerDropdown = output<void>();
+  timeChanged = output<number>();
+
+  protected readonly hoursArray = computed(() =>
+    this.getHoursArray(this.min(), this.max()),
+  );
+  protected readonly minutesArrays = computed(() =>
+    this.getTimeArrays(this.min(), this.max(), 'minutes'),
+  );
+  protected readonly secondsArrays = computed(() =>
+    this.getTimeArrays(this.min(), this.max(), 'seconds'),
+  );
+
+  private getHoursArray(minSeconds: number, maxSeconds: number): string[] {
+    const minHours = convertSecondsToTime(minSeconds).hours;
+    const maxHours = convertSecondsToTime(maxSeconds).hours;
+    return Array.from({ length: maxHours - minHours + 1 }, (_, i) =>
+      formatNumberToString(i + minHours),
+    );
+  }
+
+  private getTimeArrays(
+    minSeconds: number,
+    maxSeconds: number,
+    timeType: 'minutes' | 'seconds',
+  ): TimeArrays {
+    const minTime = convertSecondsToTime(minSeconds)[timeType];
+    const maxTime = convertSecondsToTime(maxSeconds)[timeType];
+    return {
+      minRange: Array.from({ length: 60 - minTime }, (_, i) => formatNumberToString(i + minTime)),
+      defaultRange: Array.from({ length: 60 }, (_, i) => formatNumberToString(i)),
+      maxRange: Array.from({ length: maxTime + 1 }, (_, i) => formatNumberToString(i)),
+    };
+  }
+}

package/src/lib/primitives/pickers/time-unit-selector.component.ts

@@ -0,0 +1,82 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  effect,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+
+// Una columna scrolleable (horas | minutos | segundos) del time picker: al
+// hacer click en un valor lo emite; la columna auto-scrollea para alinear el
+// valor seleccionado arriba (fila de 32px). El `useState(hovered)` +
+// `useEffect(scrollTop)` de react -> signal + effect. `onChangeTimeUnit`
+// (callback prop) -> output `changeTimeUnit`.
+// `:host { display: contents }`: el `<div>` scrolleable es el hijo real del
+// grid de 3 columnas (como en react/vue).
+@Component({
+  selector: 'ba-time-unit-selector',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <div
+      #scrollableContainer
+      [id]="id() + '-' + timeUnit() + '-selector-container'"
+      [class]="
+        'bas-overflow-y-scroll bas-scroll-smooth ' +
+        (hovered() ? 'bal-ba-scroll-base' : 'bal-ba-no-scrollbar')
+      "
+      (mouseenter)="hovered.set(true)"
+      (mouseleave)="hovered.set(false)"
+    >
+      <div class="bas-flex bas-h-full bas-w-[38px] bas-flex-col">
+        @for (timeValue of timeUnitArray(); track $index) {
+          <button
+            type="button"
+            [id]="id() + '-' + timeUnit() + '-' + timeValue"
+            [class]="
+              'bal-ba-transition-150 bas-min-h-8 bas-flex bas-w-full bas-cursor-pointer ' +
+              'bas-items-center bas-justify-center bas-rounded-md bas-border-none ' +
+              'bas-text-sm bas-text-[--bal-primary-800] hover:bas-text-[--bal-primary-900] ' +
+              (selectedValue() === timeValue
+                ? 'bas-bg-[#caf0f8]'
+                : 'bas-bg-transparent hover:bas-bg-[#e1f6fb]')
+            "
+            (click)="changeTimeUnit.emit({ timeUnit: timeUnit(), value: timeValue })"
+          >
+            <p class="bas-m-0">{{ timeValue }}</p>
+          </button>
+        }
+        <span class="bas-min-h-[200px] bas-w-full"></span>
+      </div>
+    </div>
+  `,
+})
+export class TimeUnitSelectorComponent {
+  id = input('time-picker');
+  timeUnitArray = input<string[]>([]);
+  timeUnit = input<'hours' | 'minutes' | 'seconds' | ''>('');
+  selectedValue = input('');
+  firstValue = input(0);
+
+  changeTimeUnit = output<{ timeUnit: string; value: string }>();
+
+  protected readonly hovered = signal(false);
+  private readonly scrollableContainer =
+    viewChild<ElementRef<HTMLDivElement>>('scrollableContainer');
+
+  constructor() {
+    // Alinea el valor seleccionado arriba (32px por fila).
+    effect(() => {
+      const selectedNumber = parseInt(this.selectedValue(), 10);
+      const firstNumber = Number(this.firstValue());
+      const el = this.scrollableContainer()?.nativeElement;
+      if (el && !Number.isNaN(selectedNumber)) {
+        el.scrollTop = 32 * (selectedNumber - firstNumber);
+      }
+    });
+  }
+}

package/src/lib/primitives/progressbar.component.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen } from '@testing-library/angular';
+import { ProgressbarComponent } from './progressbar.component';
+describe('ProgressbarComponent', () => {
+  it('percent 100 cuando step3', async () => {
+    @Component({ standalone: true, imports: [ProgressbarComponent], template: `<ba-progressbar [step3]="true" />` })
+    class Host {}
+    await render(Host);
+    expect(screen.getByTestId('progressbar-fill').getAttribute('data-percent')).toBe('100');
+  });
+  it('percent 15 cuando step1', async () => {
+    @Component({ standalone: true, imports: [ProgressbarComponent], template: `<ba-progressbar [step1]="true" />` })
+    class Host {}
+    await render(Host);
+    expect(screen.getByTestId('progressbar-fill').getAttribute('data-percent')).toBe('15');
+  });
+});

package/src/lib/primitives/progressbar.component.ts

@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+// El original orquesta 12
+// AnimationControls de framer-motion; siguiendo el port Vue, esa coreografía
+// se sustituye por un único porcentaje derivado de los mismos props (`percent`)
+// que revela una capa coloreada superpuesta a la de fondo mediante `clip-path`,
+// animado con `transition` CSS. El subrayado decorativo no se reproduce.
+//
+// `activeUnderlineWhenFillStep1`/`activeUnderlineWhenFillToStep2` se aceptan
+// por paridad de API pero no afectan a `percent` (solo controlaban el
+// subrayado). Prioridad de `percent`: gana el flag del paso más avanzado
+// (misma elección deliberada documentada en Progressbar.vue).
+@Component({
+  selector: 'ba-progressbar',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="bas-relative bas-flex bas-h-[54px] bas-w-60 bas-flex-row bas-items-center bas-justify-between">
+      <!-- Fondo apagado (siempre visible) -->
+      <svg height="30" width="30" style="z-index: 1" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4,15a11,11 0 1,0 22,0a11,11 0 1,0 -22,0" stroke="#acd4e4" stroke-width="5" fill="transparent" />
+      </svg>
+      <svg width="82" height="8" style="position: absolute; left: 26px; z-index: 0" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#c4e0ec" d="M0 0h90v10H0Z" />
+      </svg>
+      <svg height="30" width="30" style="z-index: 1" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4,15a11,11 0 1,0 22,0a11,11 0 1,0 -22,0" stroke="#acd4e4" stroke-width="5" fill="transparent" />
+      </svg>
+      <svg width="82" height="8" style="position: absolute; left: 130px; z-index: 0" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#c4e0ec" d="M0 0h90v10H0Z" />
+      </svg>
+      <svg height="30" width="30" style="z-index: 1" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4,15a11,11 0 1,0 22,0a11,11 0 1,0 -22,0" stroke="#acd4e4" stroke-width="5" fill="transparent" />
+      </svg>
+
+      <!-- Capa coloreada, revelada según percent -->
+      <div
+        class="bas-absolute bas-flex bas-h-full bas-w-full bas-flex-row bas-items-center bas-justify-between bas-progress-fill"
+        [style.clip-path]="'inset(0 ' + (100 - percent()) + '% 0 0)'"
+        data-testid="progressbar-fill"
+        [attr.data-percent]="percent()"
+      >
+        <svg height="30" width="30" style="z-index: 1" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4,15a11,11 0 1,0 22,0a11,11 0 1,0 -22,0" stroke="#1961a4" stroke-width="5" fill="transparent" />
+          <circle r="5" cx="15" cy="15" fill="#1961a4" />
+        </svg>
+        <svg width="84" height="8" style="position: absolute; left: 26px; z-index: 0" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#1961a4" d="M0 0h90v10H0Z" />
+        </svg>
+        <svg height="30" width="30" style="z-index: 1" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4,15a11,11 0 1,0 22,0a11,11 0 1,0 -22,0" stroke="#1961a4" stroke-width="5" fill="transparent" />
+          <circle r="5" cx="15" cy="15" fill="#1961a4" />
+        </svg>
+        <svg width="84" height="8" style="position: absolute; left: 130px; z-index: 0" xmlns="http://www.w3.org/2000/svg">
+          <path fill="#1961a4" d="M0 0h90v10H0Z" />
+        </svg>
+        <svg height="30" width="30" style="z-index: 1" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4,15a11,11 0 1,0 22,0a11,11 0 1,0 -22,0" stroke="#1961a4" stroke-width="5" fill="transparent" />
+          <circle r="5" cx="15" cy="15" fill="#1961a4" />
+        </svg>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .bas-progress-fill {
+        transition: clip-path 0.6s ease;
+      }
+    `,
+  ],
+})
+export class ProgressbarComponent {
+  step1 = input(false);
+  step2 = input(false);
+  step3 = input(false);
+  goBackToStep1 = input(false);
+  goBackToStep2 = input(false);
+  fillStep1 = input(false);
+  activeUnderlineWhenFillStep1 = input(false);
+  fillToStep2 = input(false);
+  activeUnderlineWhenFillToStep2 = input(false);
+
+  percent = computed(() => {
+    if (this.step3()) return 100;
+    if (this.step2()) return 50;
+    if (this.step1()) return 15;
+    if (this.goBackToStep2()) return 50;
+    if (this.goBackToStep1()) return 15;
+    if (this.fillToStep2()) return 50;
+    if (this.fillStep1()) return 15;
+    return 0;
+  });
+}

package/src/lib/primitives/providersStyles.ts

@@ -0,0 +1,268 @@
+// Port literal de packages/react/src/primitives/providersStyles.ts: mapa de
+// estilos por provider, TS puro sin dependencias de React, copiado tal cual.
+import { imgUrlByService } from './helpers';
+
+export interface ProviderStyle {
+  /** Nombre para mostrar del provider. */
+  name: string;
+  /** Slug del provider. */
+  value: string;
+  /** URL del icono. */
+  imgSrc: string;
+  /** Color de fondo detrás del icono del provider en el loader. */
+  imgBgColor: string;
+  /** Color del loader (spinner). */
+  loaderColor: string;
+  /** Color base de marca. */
+  colorBase: string;
+  /** Clase `bas-*` de borde aplicada cuando el provider está seleccionado. */
+  borderStyles: string;
+  /** Clase `bas-*` de borde aplicada en hover. */
+  hoverBorderStyles: string;
+}
+
+export const providersStyles: Record<string, ProviderStyle> = {
+  blockauth: {
+    name: 'BlockAuth',
+    value: 'blockauth',
+    imgSrc: imgUrlByService('blockauth'),
+    imgBgColor: '#eff6ff',
+    loaderColor: '#1961a4',
+    colorBase: '#1961a4',
+    borderStyles: 'bas-border-[var(--bal-primary-100)]',
+    hoverBorderStyles: 'hover:bas-border-[var(--bal-primary-300)]',
+  },
+  google: {
+    name: 'Google',
+    value: 'google',
+    imgSrc: imgUrlByService('google'),
+    imgBgColor: '#fef2f2',
+    loaderColor: '#ef4444',
+    colorBase: '#dc2626',
+    borderStyles: 'bas-border-red-400',
+    hoverBorderStyles: 'hover:bas-border-red-600',
+  },
+  metamask: {
+    name: 'MetaMask',
+    value: 'metamask',
+    imgSrc: imgUrlByService('metamask'),
+    imgBgColor: '#fff7ed',
+    loaderColor: '#f97316',
+    colorBase: '#ea580c',
+    borderStyles: 'bas-border-orange-400',
+    hoverBorderStyles: 'hover:bas-border-orange-600',
+  },
+  microsoft: {
+    name: 'Microsoft',
+    value: 'microsoft',
+    imgSrc: imgUrlByService('microsoft'),
+    imgBgColor: '#eff6ff',
+    loaderColor: '#106ebe',
+    colorBase: '#106ebe',
+    borderStyles: 'bas-border-[#1d8dec]',
+    hoverBorderStyles: 'hover:bas-border-[#106ebe]',
+  },
+  phantom: {
+    name: 'Phantom',
+    value: 'phantom',
+    imgSrc: imgUrlByService('phantom'),
+    imgBgColor: '#faf5ff',
+    loaderColor: '#9333ea',
+    colorBase: '#9333ea',
+    borderStyles: 'bas-border-purple-400',
+    hoverBorderStyles: 'hover:bas-border-purple-600',
+  },
+  trustWallet: {
+    name: 'Trust Wallet',
+    value: 'trustwallet',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/trust-wallet.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  binance: {
+    name: 'Binance',
+    value: 'binance',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/binance.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  uniswap: {
+    name: 'Uniswap',
+    value: 'uniswap',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/uniswap.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  bitget: {
+    name: 'Bitget',
+    value: 'bitget',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/bitget.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  legder: {
+    name: 'Legder',
+    value: 'legder',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/legder.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  robinhood: {
+    name: 'Robinhood',
+    value: 'robinhood',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/robinhood.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  blockchaincom: {
+    name: 'Blockchain.com',
+    value: 'blockchaincom',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/blockchaincom.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  magiceden: {
+    name: 'Magic Eden',
+    value: 'magiceden',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/magiceden.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  kraken: {
+    name: 'Kraken',
+    value: 'kraken',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/kraken.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  coinbase: {
+    name: 'Coinbase',
+    value: 'coinbase',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/coinbase.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  enjin: {
+    name: 'Enjin',
+    value: 'enjin',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/enjin.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  coincircle: {
+    name: 'Coincircle',
+    value: 'coincircle',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/coincircle.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  crossmint: {
+    name: 'Crossmint',
+    value: 'crossmint',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/crossmint.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  ronin: {
+    name: 'Ronin',
+    value: 'ronin',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/ronin.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  thirdweb: {
+    name: 'Thirdweb',
+    value: 'thirdweb',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/thirdweb.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  wemix: {
+    name: 'Wemix',
+    value: 'wemix',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/wemix.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  bitbox: {
+    name: 'Bitbox',
+    value: 'bitbox',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/bitbox.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+  moonpay: {
+    name: 'Moonpay',
+    value: 'moonpay',
+    imgSrc: 'https://dashboard.block-auth.io/img/providers/moonpay.png',
+    imgBgColor: '#f0f9ff',
+    loaderColor: '#0b69ff',
+    colorBase: '#0b69ff',
+    borderStyles: 'bas-border-blue-400',
+    hoverBorderStyles: 'hover:bas-border-blue-600',
+  },
+};
+
+/** Etiquetas del panel editable, port literal de `editableTxts`. */
+export const editableTxts: Record<string, { es: string; en: string }> = {
+  edit: { es: 'Editar', en: 'Edit' },
+  searchEngine: { es: 'Buscador', en: 'Search engine' },
+  webTypes: { es: 'Tipos de web', en: 'Web types' },
+  columns: { es: 'Columnas', en: 'Columns' },
+  order: { es: 'Orden', en: 'Order' },
+  activate: { es: 'Activar', en: 'Activate' },
+  providerName: { es: 'Nombre del provider', en: 'Provider name' },
+};
+
+export default providersStyles;

package/src/lib/primitives/slider-base.component.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+
+// Slider de rango sobre un `<input type="range">` nativo cuyo track/relleno/thumb
+// se estilan vía las reglas `.bas-slider-base` de `@block-auth.io/ui-styles`
+// (src/input.css). La porción rellenada la maneja la custom property
+// `--bas-slider-fill` (porcentaje del valor actual entre min/max), calculada
+// acá para que el gradiente del track de WebKit y el `::-moz-range-progress`
+// de Firefox queden alineados.
+//
+// `onSliderValueChanged` (callback prop en react) -> output `sliderValueChanged`.
+// `:host { display: contents }`: el `<input>` es el hijo real del grid/flex del
+// padre (como en react/vue), así `bas-w-full` mide el 100% del contenedor.
+@Component({
+  selector: 'ba-slider-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  template: `
+    <input
+      [id]="id()"
+      type="range"
+      [attr.aria-label]="ariaLabel()"
+      [min]="min()"
+      [max]="max()"
+      [step]="step()"
+      [value]="sliderValue()"
+      [disabled]="disabled()"
+      [class]="'bas-slider-base bas-h-6 bas-w-full ' + classNames()"
+      [style.--bas-slider-fill.%]="fillPct()"
+      (input)="onInput($event)"
+    />
+  `,
+})
+export class SliderBaseComponent {
+  id = input('slider-id');
+  sliderValue = input(150);
+  step = input(1);
+  min = input(0);
+  max = input(100);
+  disabled = input(false);
+  ariaLabel = input('slider');
+  classNames = input('');
+
+  sliderValueChanged = output<number>();
+
+  protected readonly fillPct = computed(() => {
+    const range = this.max() - this.min();
+    return range > 0
+      ? Math.min(100, Math.max(0, ((this.sliderValue() - this.min()) / range) * 100))
+      : 0;
+  });
+
+  onInput(e: Event): void {
+    this.sliderValueChanged.emit(Number((e.target as HTMLInputElement).value));
+  }
+}