@block-auth.io/angular 0.1.0

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

@@ -0,0 +1,329 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  PLATFORM_ID,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { DropdownArrowComponent } from './dropdown-arrow.component';
+import { CheckIconComponent } from '../icons';
+
+export interface DropdownItem {
+  name: string;
+  value: string;
+  icon_url?: string;
+  isOptionSelected?: boolean;
+  [key: string]: unknown;
+}
+
+export const defaultItems: DropdownItem[] = [
+  { name: 'Select', value: 'service_default', icon_url: 'https://picsum.photos/200/300', isOptionSelected: true },
+  { name: 'Block-Auth', value: 'blockauth', icon_url: 'https://dashboard.block-auth.io/img/blockauth_logo.png', isOptionSelected: false },
+  { name: 'Auditech', value: 'auditech', icon_url: 'https://auditech.es/wp-content/uploads/2020/05/Auditech-Iso-Mobile.png', isOptionSelected: false },
+  { name: 'Microsoft', value: 'microsoft', icon_url: 'https://avatars.githubusercontent.com/u/6154722?s=200&v=4', isOptionSelected: false },
+];
+
+// - `setIsOpen` (callback) -> emit `isOpenChange` (dos-vías idiomática Angular).
+// - `onChangeSelectedItem` -> emit `changeSelectedItem`.
+// - `callbackWhenClickOutside` -> emit `clickOutside`.
+// - `containerWithActiveClickOutsideRef` (React ref) -> input `container?: HTMLElement | null`.
+//   Semántica 1:1 de DropdownBase.tsx (187-214): sin `container` no se añade
+//   listener (click-outside desactivado); con `container` el listener va sobre
+//   `container` (no `document`) solo cuando `isOpen`; "fuera" se calcula vs el
+//   contenedor propio del dropdown; al cerrar (o destruir) se quita, EXCEPTO si
+//   `isInsideModal` (leak deliberado del original). Se replica con `effect()`
+//   sobre `isOpen()` (equivalente al useEffect(...,[isOpen]) de react).
+// - SSR: la lógica de click-outside solo corre en navegador (isPlatformBrowser).
+// - Animación open/close: `bas-pop` (transitions.css). El CheckIcon del item
+//   seleccionado usa el icono compartido `ba-check-icon` (heroicons
+//   CheckIcon 20/solid, Task A6).
+@Component({
+  selector: 'ba-dropdown-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DropdownArrowComponent, CheckIconComponent],
+  template: `
+    <div
+      [class]="
+        'bas-box-border bas-group bas-relative bas-items-center ' + displayClassNames() + ' ' + classNames() + ' ' +
+        getHeight(showTitle(), size()) + ' ' + (showTitle() ? containerGridRows() : '')
+      "
+      [style.width]="width()"
+      [style.minWidth]="minWidth()"
+      [style.maxWidth]="maxWidth()"
+    >
+      @if (showTitle()) {
+        <p
+          [class]="
+            'bal-ba-transition-2 bas-m-0 bas-h-[18px] bas-text-sm ' +
+            (blueStyles()
+              ? 'bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]'
+              : 'bas-text-gray-700 group-hover:bas-text-gray-900')
+          "
+        >{{ title() }}</p>
+      }
+      @if (showFloatingLabel()) {
+        <span
+          [class]="
+            'bal-ba-transition-2 bas-group bas-absolute -bas-top-3 bas-left-2 bas-z-50 bas-flex bas-items-center bas-justify-center bas-px-1 bas-py-0.5 ' +
+            floatingLabelBgColor() + ' ' +
+            (blueStyles()
+              ? 'bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]'
+              : 'bas-text-gray-700 group-hover:bas-text-gray-900')
+          "
+        >
+          <p [class]="'bal-ba-transition-2 bas-m-0 ' + (size() !== 'xxs' ? 'bas-text-xs' : 'bas-text-xxs')">
+            {{ floatingLabelTxt() }}
+          </p>
+        </span>
+      }
+      <div #ddBaseContainer [class]="'bas-flex bas-w-full bas-flex-col bas-items-center bas-justify-start ' + getHeight(false, size())">
+        <button
+          [id]="btnId()"
+          [disabled]="disabled()"
+          [class]="
+            'bal-ba-transition-2 bal-ba-outline-none bas-relative bas-box-border bas-flex bas-w-full bas-cursor-pointer bas-flex-row bas-justify-between bas-gap-2 bas-border-2 bas-border-solid bas-bg-transparent bas-px-2 disabled:bas-cursor-not-allowed ' +
+            getBtnHeight(size()) + ' ' + borderRadiusClassNames() + ' ' +
+            (blueStyles() || isOpen()
+              ? 'bas-border-[var(--bal-primary-100)] group-hover:bas-border-[var(--bal-primary-300)]'
+              : 'bas-border-gray-300 group-hover:bas-border-gray-400')
+          "
+          (click)="onBtnClicked($event)"
+        >
+          <div class="bas-group bas-flex bas-h-full bas-w-full bas-flex-row bas-items-center bas-gap-1.5">
+            @if (showStatusIndicator()) {
+              <span [class]="'bas-h-2 bas-w-2 bas-rounded-full ' + (!isSelectedDefault() ? 'bas-bg-green-500' : 'bas-bg-sky-300')"></span>
+            }
+            @if (showImg() && selectedItem().icon_url) {
+              <img [src]="selectedItem().icon_url" [alt]="'Image of ' + selectedItem()[titleKeyName()]" class="bas-h-5 bas-w-5 bas-flex-shrink-0" />
+            }
+            <p
+              [class]="
+                'bal-ba-transition-2 bas-m-0 ' + (size() !== 'xxs' ? 'bas-text-base' : 'bas-text-sm') + ' ' +
+                (isOpen() || blueStyles()
+                  ? (!isSelectedDefault()
+                      ? 'bas-text-[var(--bal-primary-800)] group-hover:bas-text-[var(--bal-primary-900)]'
+                      : 'bas-text-[var(--bal-primary-500)] group-hover:bas-text-[var(--bal-primary-600)]')
+                  : (!isSelectedDefault()
+                      ? 'bas-text-gray-800 group-hover:bas-text-gray-900'
+                      : 'bas-text-gray-500 group-hover:bas-text-gray-600'))
+              "
+            >{{ selectedItem()[titleKeyName()] }}</p>
+          </div>
+          <div class="bas-h-full bas-w-fit bas-justify-center">
+            <ba-dropdown-arrow
+              id="web-type-arrow"
+              [isOpen]="isOpen()"
+              sizeClassNames="bas-h-3 bas-w-3"
+              [color]="blueStyles() || isOpen() ? 'var(--bal-primary-700)' : 'gray'"
+            />
+          </div>
+        </button>
+        @if (isOpen()) {
+          <div
+            class="ba-pop bal-ba-transition-2 bal-ba-shadow-base bal-ba-hover-shadow-md bas-absolute bas-top-full bas-z-50 bas-mt-1 bas-w-full bas-overflow-hidden bas-rounded-md bas-border bas-border-solid bas-border-[var(--bal-primary-100)] bas-bg-white hover:bas-border-[var(--bal-primary-300)]"
+            [style.minHeight.px]="listMinHeight()"
+          >
+            <ul
+              [class]="
+                'bal-ba-transition-2 bal-ba-scroll-base bas-m-0 bas-box-border bas-flex bas-h-full bas-w-full bas-flex-col bas-items-center bas-justify-start bas-p-0 bas-text-base bas-text-[var(--bal-primary-700)] hover:bas-text-[var(--bal-primary-900)] bas-overflow-y-auto'
+              "
+              [style.maxHeight.px]="listMinHeight()"
+            >
+              @for (item of items(); track item[keyName()]; let index = $index) {
+                <li
+                  [id]="'dropdown-base-item-' + item[keyName()]"
+                  [class]="
+                    'bal-ba-outline-none bas-group bas-box-border bas-flex bas-w-full bas-flex-row bas-items-center bas-justify-between bas-border-solid bas-border-[var(--bal-primary-90)] bas-px-2 bas-py-1 ' +
+                    getItemBorderStyles(index, items().length) + ' ' +
+                    (isItemDefault(item) ? 'bas-cursor-default' : 'bas-cursor-pointer') + ' ' +
+                    (isSelected(item) ? 'bas-bg-[#e7f2f7] hover:bas-bg-[#dbecf3]' : 'hover:bas-bg-[#f3f8fb]') + ' ' +
+                    (size() !== 'xxs' ? 'bas-min-h-[40px]' : 'bas-min-h-[34px]')
+                  "
+                  (click)="onItemClicked(item)"
+                >
+                  <div class="bas-group bas-flex bas-h-full bas-w-fit bas-flex-row bas-items-center bas-gap-1.5">
+                    @if (showStatusIndicator()) {
+                      <span
+                        [class]="
+                          'bas-h-2 bas-w-2 bas-rounded-full ' +
+                          (!isItemDefault(item) ? (isSelected(item) ? 'bas-bg-green-500' : 'bas-bg-slate-300') : 'bas-bg-sky-300')
+                        "
+                      ></span>
+                    }
+                    @if (showImg() && item.icon_url) {
+                      <img [src]="item.icon_url" [alt]="'Image of ' + item[titleKeyName()]" class="bas-h-5 bas-w-5 bas-flex-shrink-0" />
+                    }
+                    <p [class]="getOptionStyles(item, size())">{{ item[titleKeyName()] }}</p>
+                  </div>
+                  @if (showCheckWhenActive() && isSelected(item) && !isItemDefault(item)) {
+                    <span class="bal-ba-transition-2 bas-flex bas-items-center bas-text-[#004e98] group-hover:bas-text-[#00296b]">
+                      <ba-check-icon class="bas-h-4 bas-w-4" />
+                    </span>
+                  }
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </div>
+      @if (showTitle()) {
+        <p class="bal-ba-error-text-invisible bas-m-0 bas-h-[18px]">white space</p>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .ba-pop {
+        animation: ba-pop-in 0.15s ease;
+        transform-origin: top;
+      }
+      @keyframes ba-pop-in {
+        from { opacity: 0; transform: scale(0.95); }
+        to { opacity: 1; transform: scale(1); }
+      }
+    `,
+  ],
+})
+export class DropdownBaseComponent {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+  private readonly ddBaseContainer = viewChild<ElementRef<HTMLDivElement>>('ddBaseContainer');
+
+  btnId = input('dropdown-base-button');
+  isOpen = input(false);
+  title = input('Select an item');
+  showTitle = input(false);
+  showFloatingLabel = input(false);
+  floatingLabelTxt = input('Select an item');
+  floatingLabelBgColor = input('bas-bg-white');
+  size = input<'xxs' | 'xs' | 'tiny' | 'small' | 'base' | 'large'>('base');
+  items = input<DropdownItem[]>(defaultItems);
+  selectedItem = input<DropdownItem>(defaultItems[0]);
+  keyName = input('value');
+  titleKeyName = input('name');
+  width = input<number | string>('100%');
+  minWidth = input<number | string>(0);
+  maxWidth = input<number | string>('100%');
+  dropdownHeight = input<number | null>(null);
+  classNames = input('');
+  displayClassNames = input('bas-grid');
+  borderRadiusClassNames = input('bas-rounded-lg');
+  container = input<HTMLElement | null>(null);
+  isInsideModal = input(false);
+  showStatusIndicator = input(true);
+  showImg = input(false);
+  showCheckWhenActive = input(true);
+  manageActiveWithIsOptionSelected = input(false);
+  blueStyles = input(false);
+  disabled = input(false);
+
+  isOpenChange = output<boolean>();
+  changeSelectedItem = output<DropdownItem>();
+  clickOutside = output<void>();
+
+  private readonly handleClickOutside = (e: Event): void => {
+    const el = this.ddBaseContainer()?.nativeElement;
+    if (!el) return;
+    if (!el.contains(e.target as Node)) this.clickOutside.emit();
+  };
+
+  constructor() {
+    // Port 1:1 del useEffect(...,[isOpen]) de DropdownBase.tsx (187-214),
+    // solo en navegador (SSR-safe): añade el listener sobre `container` al
+    // abrir; lo quita al cerrar/destruir salvo `isInsideModal`.
+    effect((onCleanup) => {
+      if (!this.isBrowser) return;
+      const container = this.container();
+      if (!container) return;
+      const open = this.isOpen();
+      const removeEventListeners = () => {
+        if (this.isInsideModal()) return;
+        container.removeEventListener('click', this.handleClickOutside);
+      };
+      if (open) container.addEventListener('click', this.handleClickOutside);
+      else removeEventListeners();
+      onCleanup(removeEventListeners);
+    });
+  }
+
+  onBtnClicked(e: MouseEvent): void {
+    e.preventDefault();
+    this.isOpenChange.emit(!this.isOpen());
+  }
+
+  onItemClicked(item: DropdownItem): void {
+    this.changeSelectedItem.emit(item);
+    this.isOpenChange.emit(false);
+  }
+
+  isSelected = (item: DropdownItem): boolean =>
+    this.manageActiveWithIsOptionSelected()
+      ? !!item.isOptionSelected
+      : this.selectedItem()[this.keyName()] === item[this.keyName()];
+
+  isSelectedDefault = computed(() => `${this.selectedItem()[this.keyName()]}`.includes('default'));
+  isItemDefault = (item: DropdownItem): boolean => `${item[this.keyName()]}`.includes('default');
+
+  listMinHeight = computed(
+    () => this.dropdownHeight() || this.items().length * (this.size() !== 'xxs' ? 40 : 34) + 2,
+  );
+
+  containerGridRows = computed(
+    () =>
+      ({
+        xxs: 'bas-grid-rows-[18px_34px_18px]',
+        xs: 'bas-grid-rows-[18px_36px_18px]',
+        tiny: 'bas-grid-rows-[18px_38px_18px]',
+        small: 'bas-grid-rows-[18px_42px_18px]',
+        base: 'bas-grid-rows-[18px_46px_18px]',
+        large: 'bas-grid-rows-[18px_54px_18px]',
+      })[this.size()],
+  );
+
+  getHeight(showTitle: boolean, size: string): string {
+    return {
+      xxs: showTitle ? 'bas-h-[70px]' : 'bas-h-[34px]',
+      xs: showTitle ? 'bas-h-[72px]' : 'bas-h-[36px]',
+      tiny: showTitle ? 'bas-h-[74px]' : 'bas-h-[38px]',
+      small: showTitle ? 'bas-h-[78px]' : 'bas-h-[42px]',
+      base: showTitle ? 'bas-h-[82px]' : 'bas-h-[46px]',
+      large: showTitle ? 'bas-h-[90px]' : 'bas-h-[54px]',
+    }[size]!;
+  }
+
+  getBtnHeight(size: string): string {
+    return {
+      xxs: 'bas-min-h-[34px]',
+      xs: 'bas-min-h-[36px]',
+      tiny: 'bas-min-h-[38px]',
+      small: 'bas-min-h-[42px]',
+      base: 'bas-min-h-[46px]',
+      large: 'bas-min-h-[54px]',
+    }[size]!;
+  }
+
+  getOptionStyles(item: DropdownItem, size: string): string {
+    const classes = 'bas-m-0 bas-block bal-ba-transition-2';
+    if (`${item[this.keyName()]}`.includes('default')) return `${classes} bas-text-[#004e98] bas-text-sm`;
+    return `${classes} ${size !== 'xxs' ? 'bas-text-base' : 'bas-text-sm'} ${
+      this.isSelected(item)
+        ? 'bas-font-medium bas-text-[#00296b] group-hover:bas-text-[#002055]'
+        : 'bas-text-[#004e98] group-hover:bas-text-[#00296b]'
+    }`;
+  }
+
+  getItemBorderStyles(index: number, itemsLength: number): string {
+    let classNames = '';
+    if (index < itemsLength - 1) classNames += ' bas-border-x-0 bas-border-b bas-border-t-0 ';
+    else classNames += ' bas-border-0 ';
+    if (index === 0) classNames += ' bas-rounded-t-lg ';
+    else if (index === itemsLength - 1) classNames += ' bas-rounded-b-lg ';
+    return classNames;
+  }
+}

package/src/lib/primitives/helpers.ts

@@ -0,0 +1,151 @@
+// Port literal de packages/react/src/primitives/helpers.ts: helpers de UI
+// puros en TS, sin dependencias de React ni de framer-motion, por lo que se
+// copian tal cual (solo cambia el comentario de cabecera). Las variantes de
+// framer-motion (`dropdownContainerVariantsFromTopRight`, `liItemVariants`,
+// etc.) ya no las usa ningún primitivo Vue (DropdownBase anima con
+// `<Transition>` + CSS), pero se conservan por si algún componente futuro
+// las necesita como referencia/objeto de datos plano (no importan
+// framer-motion, son solo objetos JS).
+//
+// `imgUrlByService` ya vive en `@block-auth.io/core` utils — se reexporta
+// aquí para que los primitivos puedan importar todo desde un mismo sitio.
+import { utils } from '@block-auth.io/core';
+
+export const imgUrlByService = utils.imgUrlByService;
+
+/**
+ * Variantes framer-motion usadas por el `DropdownBase` original (el dropdown
+ * se revelaba desde la esquina superior derecha vía un círculo de
+ * clip-path animado). Portado literalmente desde `helperUI.dropdownContainerVariantsFromTopRight`.
+ * No se usa en el `DropdownBase.vue` (que anima con `<Transition name="bas-pop">`),
+ * se conserva por paridad de API con el paquete react.
+ */
+export function dropdownContainerVariantsFromTopRight(
+  height = 1000,
+  left: number | string = 'auto',
+) {
+  return {
+    open: {
+      clipPath: `circle(${height * 2 + 200}px at 100% 0%)`,
+      left,
+      transition: {
+        type: 'spring',
+        stiffness: 20,
+        restDelta: 2,
+        duration: 1,
+        delayChildren: 0.3,
+        staggerChildren: 0.05,
+      },
+    },
+    closed: {
+      clipPath: 'circle(0px at 100% 0%)',
+      left,
+      transition: {
+        delay: 0,
+        type: 'spring',
+        stiffness: 400,
+        damping: 40,
+      },
+    },
+  };
+}
+
+/**
+ * Variantes de stagger por item de la lista del dropdown. Portado
+ * literalmente desde `helperUI.liItemVariants`. No usado en `DropdownBase.vue`.
+ */
+export function liItemVariants(openOpacity = 1) {
+  return {
+    open: {
+      opacity: openOpacity,
+      y: 0,
+      transition: { duration: 0.2 },
+    },
+    closed: { opacity: 0, y: 20, transition: { duration: 0.2 } },
+  };
+}
+
+/* ------------------------------------------------------------------ *
+ * Helpers de tiempo + variantes de dropdown de pickers — absorbidos del
+ * `helperUI` original. Los usan `pickers/` y `LifetimeSliderBase`, ambos
+ * fuera de alcance en esta tarea (excluidos por el plan), pero se conservan
+ * (son TS puro, sin coste) por si un futuro port de esos componentes los
+ * necesita.
+ * ------------------------------------------------------------------ */
+
+/** Descompone segundos totales en `{ hours, minutes, seconds }`. */
+export function convertSecondsToTime(totalSeconds: number) {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return { hours, minutes, seconds };
+}
+
+/** Rellena con cero un número menor a 10 (`5` → `"05"`). */
+export function formatNumberToString(num: number) {
+  return num < 10 ? `0${num}` : `${num}`;
+}
+
+/** Parsea un string `HH:MM:SS` a segundos totales. */
+export function getSecFromTimeValue(timeValue: string) {
+  const [h, m, s] = timeValue.split(':');
+  return parseInt(h) * 3600 + parseInt(m) * 60 + parseInt(s);
+}
+
+/** Segundos totales → `HH:MM:SS` (port de `getTimeBySec`). */
+export function getTimeBySec(totalSeconds: number) {
+  const { hours, minutes, seconds } = convertSecondsToTime(totalSeconds);
+  return [hours, minutes, seconds].map(formatNumberToString).join(':');
+}
+
+/**
+ * Revelado del dropdown del picker (hacia abajo) — círculo de clip-path
+ * desde arriba al centro. Port literal de `dropdownContainerVariantsTopCenterCircle`.
+ */
+export function dropdownContainerVariantsTopCenterCircle(height = 1000) {
+  return {
+    open: {
+      clipPath: `circle(${height * 2 + 200}px at 50% 0%)`,
+      top: 0,
+      transition: {
+        type: 'spring',
+        stiffness: 20,
+        restDelta: 2,
+        duration: 1,
+        delayChildren: 0.3,
+        staggerChildren: 0.05,
+      },
+    },
+    closed: {
+      clipPath: 'circle(0px at 50% 0%)',
+      top: '-100%',
+      transition: { delay: 0, type: 'spring', stiffness: 400, damping: 40 },
+    },
+  };
+}
+
+/**
+ * Revelado del dropdown del picker (hacia arriba) — círculo de clip-path
+ * desde abajo al centro. Port literal de `dropdownContainerUpwardsVariants`.
+ */
+export function dropdownContainerUpwardsVariants(top = -288, height = 1000) {
+  return {
+    open: {
+      clipPath: `circle(${height * 2 + 200}px at 50% 100%)`,
+      top,
+      transition: {
+        type: 'tween',
+        stiffness: 20,
+        restDelta: 2,
+        duration: 2,
+        delayChildren: 0.3,
+        staggerChildren: 0.05,
+      },
+    },
+    closed: {
+      clipPath: 'circle(0px at 50% 100%)',
+      top,
+      transition: { delay: 0, type: 'tween', stiffness: 400, damping: 40 },
+    },
+  };
+}

package/src/lib/primitives/horizontal-loader.component.test.ts

@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/angular';
+import { HorizontalLoaderComponent } from './horizontal-loader.component';
+describe('HorizontalLoaderComponent', () => {
+  it('renderiza un svg', async () => {
+    const { container } = await render(HorizontalLoaderComponent);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  // Regresión: el host debe ser `display: contents` para que el <div> absoluto
+  // sea hijo directo del flex del botón (como en React). Sin esto el loader
+  // aparece descentrado dentro del botón en estado de carga.
+  it('el host es transparente al layout (display: contents)', async () => {
+    const { container } = await render(HorizontalLoaderComponent);
+    // testing-library monta el componente sobre su propio host (el `container`),
+    // donde Angular aplica el binding `host` del @Component.
+    expect(container.style.display).toBe('contents');
+  });
+});

package/src/lib/primitives/horizontal-loader.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+// Sin react-loader-spinner:
+// se dibujan 3 puntos SVG con una animación de opacidad escalonada
+// (definida en `styles`), reproduciendo el look del `ThreeDots` original.
+@Component({
+  selector: 'ba-horizontal-loader',
+  standalone: true,
+  // El host debe ser transparente al layout para que el <div> absoluto sea hijo
+  // directo del flex del botón (como en React, donde HorizontalLoader renderiza
+  // el <div> directamente). Sin esto el host `<ba-horizontal-loader>` es un
+  // flex-item de ancho ~0 colocado por `justify-center`, y la posición estática
+  // del <div> `bas-absolute` (sin left/top) se corre al centro; con `bas-w-full`
+  // se desborda a la derecha y el loader aparece descentrado.
+  host: { style: 'display: contents' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [class]="
+        'bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-flex bas-h-full bas-w-full bas-items-center bas-justify-center ' +
+        classNames()
+      "
+    >
+      <svg
+        class="bas-three-dots"
+        [attr.height]="loaderHeight()"
+        [attr.width]="loaderWidth()"
+        viewBox="0 0 80 40"
+        role="img"
+        aria-label="three-dots-loading"
+      >
+        <circle class="bas-dot bas-dot-1" cx="15" cy="20" r="9" [attr.fill]="loaderColor()" />
+        <circle class="bas-dot bas-dot-2" cx="40" cy="20" r="9" [attr.fill]="loaderColor()" />
+        <circle class="bas-dot bas-dot-3" cx="65" cy="20" r="9" [attr.fill]="loaderColor()" />
+      </svg>
+    </div>
+  `,
+  styles: [
+    `
+      @keyframes bas-three-dots-fade {
+        0%,
+        80%,
+        100% {
+          opacity: 0.25;
+        }
+        40% {
+          opacity: 1;
+        }
+      }
+      .bas-dot {
+        animation: bas-three-dots-fade 1.2s ease-in-out infinite;
+      }
+      .bas-dot-1 {
+        animation-delay: -0.32s;
+      }
+      .bas-dot-2 {
+        animation-delay: -0.16s;
+      }
+      .bas-dot-3 {
+        animation-delay: 0s;
+      }
+    `,
+  ],
+})
+export class HorizontalLoaderComponent {
+  loaderColor = input('#61a5c2');
+  loaderHeight = input(40);
+  loaderWidth = input(80);
+  classNames = input('bas-rounded-md');
+}

package/src/lib/primitives/icon-base.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 { IconBaseComponent } from './icon-base.component';
+
+describe('IconBaseComponent', () => {
+  it('renderiza el contenido proyectado cuando lo hay', async () => {
+    @Component({ standalone: true, imports: [IconBaseComponent], template: `<ba-icon-base><span data-testid="slot">x</span></ba-icon-base>` })
+    class Host {}
+    await render(Host);
+    expect(screen.getByTestId('slot')).toBeTruthy();
+  });
+  it('renderiza un <img> desde iconUrl cuando no hay contenido proyectado', async () => {
+    @Component({ standalone: true, imports: [IconBaseComponent], template: `<ba-icon-base iconUrl="https://x/y.png" />` })
+    class Host {}
+    const { container } = await render(Host);
+    expect(container.querySelector('img')?.getAttribute('src')).toBe('https://x/y.png');
+  });
+});

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

@@ -0,0 +1,58 @@
+import {
+  AfterViewChecked,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+
+// Renderiza el contenido proyectado
+// (equivalente al slot `icon` de Vue / ReactNode `icon` de React) si hay
+// contenido real, si no un <img> desde `iconUrl`, si no nada.
+//
+// Vue resuelve esto con `useSlots().default({}).length > 0` (comprobación en
+// tiempo de render de si el slot forwardeado produjo vnodes reales). Angular
+// no tiene un equivalente directo para <ng-content>, así que se envuelve la
+// proyección en un <span #iconSlot> propio del template (no del content) y
+// se comprueba en cada ciclo de content-check si ese wrapper terminó con
+// nodos hijos reales — mismo resultado observable (fallback a `iconUrl` solo
+// cuando no se proyectó nada).
+@Component({
+  selector: 'ba-icon-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span #iconSlot style="display: contents"><ng-content /></span>
+    @if (!hasIconContent() && iconUrl()) {
+      <img
+        [src]="iconUrl()"
+        [width]="iconWidth()"
+        [height]="iconHeight()"
+        [class]="'bas-flex-shrink-0 bas-object-contain ' + iconClassNames()"
+        [style.width.px]="iconWidth()"
+        [style.height.px]="iconHeight()"
+        alt=""
+      />
+    }
+  `,
+})
+export class IconBaseComponent implements AfterViewChecked {
+  iconUrl = input<string | undefined>(undefined);
+  iconWidth = input(24);
+  iconHeight = input(24);
+  iconClassNames = input('bas-rounded-full');
+
+  // Signal query (no `@ViewChild` — los decoradores de campo clásicos no se
+  // soportan en el modo JIT del harness de test AnalogJS/Vitest).
+  private readonly iconSlot = viewChild<ElementRef<HTMLElement>>('iconSlot');
+
+  hasIconContent = signal(false);
+
+  ngAfterViewChecked(): void {
+    const el = this.iconSlot()?.nativeElement ?? null;
+    const hasContent = !!el && el.childNodes.length > 0;
+    if (hasContent !== this.hasIconContent()) this.hasIconContent.set(hasContent);
+  }
+}

package/src/lib/primitives/img-loader.component.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { ImgLoaderComponent } from './img-loader.component';
+describe('ImgLoaderComponent', () => {
+  it('renderiza la imagen con el imgSrc dado', async () => {
+    @Component({ standalone: true, imports: [ImgLoaderComponent], template: `<ba-img-loader imgSrc="https://x/y.png" imgAlt="a" />` })
+    class Host {}
+    const { container } = await render(Host);
+    expect(container.querySelector('img')?.getAttribute('src')).toBe('https://x/y.png');
+  });
+});