@block-auth.io/angular 0.1.0

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

@@ -0,0 +1,118 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+
+// El anillo giratorio de framer-motion
+// (`motion.span` con animate={{rotate:360}} infinito) pasa a ser una
+// animación CSS local. La <img> hace fade-in cuando termina de cargar
+// (`(load)`) aplicando las clases `bas-fade-enter-active`/`bas-fade-enter-from`
+// de transitions.css (equivalente al `<Transition name="bas-fade">` +
+// `v-show` del port Vue): se mantiene siempre montada (para que el navegador
+// pueda disparar `load`) y se alterna la clase `-enter-from` según `loaded()`.
+type ImgLoaderSize = 'small' | 'medium' | 'large' | 'big';
+
+const SIZES_CONTAINER: Record<ImgLoaderSize, string> = {
+  small: 'bas-h-[82px] bas-w-[82px]',
+  medium: 'bas-h-[90px] bas-w-[90px]',
+  large: 'bas-h-[120px] bas-w-[120px]',
+  big: 'bas-h-[200px] bas-w-[200px]',
+};
+const SIZES_ICON_CONTAINER: Record<ImgLoaderSize, string> = {
+  small: 'bas-h-[72px] bas-w-[72px]',
+  medium: 'bas-h-20 bas-w-20',
+  large: 'bas-h-[108px] bas-w-[108px]',
+  big: 'bas-h-[180px] bas-w-[180px]',
+};
+const SIZES_ICON: Record<ImgLoaderSize, string> = {
+  small: 'bas-h-16 bas-w-16',
+  medium: 'bas-h-[80px] bas-w-[80px]',
+  large: 'bas-h-[100px] bas-w-[100px]',
+  big: 'bas-h-[166px] bas-w-[166px]',
+};
+const MOTION_SIZES: Record<ImgLoaderSize, string> = {
+  small: 'bas-h-[112px] bas-w-[112px]',
+  medium: 'bas-h-[124px] bas-w-[124px]',
+  large: 'bas-h-[164px] bas-w-[164px]',
+  big: 'bas-h-[272px] bas-w-[272px]',
+};
+const MOTION_SPAN_SIZES: Record<ImgLoaderSize, string> = {
+  small: 'bas-border-[22px]',
+  medium: 'bas-border-[24px]',
+  large: 'bas-border-[28px]',
+  big: 'bas-border-[46px]',
+};
+
+@Component({
+  selector: 'ba-img-loader',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [class]="
+        'bas-relative bas-flex ' +
+        SIZES_CONTAINER[size()] +
+        ' bas-items-center bas-justify-center bas-overflow-hidden bas-rounded-lg'
+      "
+    >
+      <div
+        [class]="
+          'bas-z-10 bas-flex ' +
+          SIZES_ICON_CONTAINER[size()] +
+          ' bas-items-center bas-justify-center bas-rounded-md bas-bg-white'
+        "
+      >
+        <img
+          [src]="imgSrc()"
+          [alt]="imgAlt()"
+          [class]="
+            'bal-ba-transform-base bal-ba-transition-2 bas-rounded-md ' +
+            SIZES_ICON[size()] +
+            ' ' +
+            (scaleImgWhenHovered() ? 'bal-ba-hover-scale-110' : '') +
+            ' bas-fade-enter-active ' +
+            (loaded() ? '' : 'bas-fade-enter-from')
+          "
+          [style.background-color]="imgBgColor()"
+          (load)="loaded.set(true)"
+        />
+      </div>
+      <div [class]="'bas-absolute ' + MOTION_SIZES[size()]">
+        <span
+          [id]="loaderId()"
+          [class]="
+            'bas-img-loader-ring bas-left-0 bas-top-0 bas-box-border bas-block bas-h-full bas-w-full bas-rounded-full bas-border-solid bas-border-transparent ' +
+            MOTION_SPAN_SIZES[size()]
+          "
+          [style.border-top-color]="loaderColor()"
+        ></span>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      @keyframes bas-img-loader-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .bas-img-loader-ring {
+        animation: bas-img-loader-spin 1.25s linear infinite;
+      }
+    `,
+  ],
+})
+export class ImgLoaderComponent {
+  readonly SIZES_CONTAINER = SIZES_CONTAINER;
+  readonly SIZES_ICON_CONTAINER = SIZES_ICON_CONTAINER;
+  readonly SIZES_ICON = SIZES_ICON;
+  readonly MOTION_SIZES = MOTION_SIZES;
+  readonly MOTION_SPAN_SIZES = MOTION_SPAN_SIZES;
+
+  loaderId = input('img-fm-loader');
+  imgSrc = input('');
+  imgAlt = input('');
+  imgBgColor = input('');
+  loaderColor = input('');
+  scaleImgWhenHovered = input(false);
+  size = input<ImgLoaderSize>('small');
+
+  loaded = signal(false);
+}

package/src/lib/primitives/index.ts

@@ -0,0 +1,29 @@
+// Barrel de las primitivas de UI de @block-auth.io/angular.
+// Excluidas (fuera de scope, igual que en el port Vue): Switcher.
+export { ArrowIconComponent } from './arrow-icon.component';
+export { BtnArrowDirComponent } from './btn-arrow-dir.component';
+export { BtnBaseComponent } from './btn-base.component';
+export { DividerBaseComponent } from './divider-base.component';
+export { DropdownArrowComponent } from './dropdown-arrow.component';
+export { DropdownBaseComponent, type DropdownItem, defaultItems } from './dropdown-base.component';
+export { HorizontalLoaderComponent } from './horizontal-loader.component';
+export { IconBaseComponent } from './icon-base.component';
+export { ImgLoaderComponent } from './img-loader.component';
+export { InputBaseComponent } from './input-base.component';
+export { LifetimeSliderBaseComponent } from './lifetime-slider-base.component';
+export { OvalSpinnerComponent } from './oval-spinner.component';
+export { ProgressbarComponent } from './progressbar.component';
+export { SliderBaseComponent } from './slider-base.component';
+
+// pickers/* — port de packages/react/src/primitives/pickers.
+export { DropdownPickerAnimatedBaseComponent } from './pickers/dropdown-picker-animated-base.component';
+export { PickerButtonComponent } from './pickers/picker-button.component';
+export { TimePickerComponent } from './pickers/time-picker.component';
+export {
+  TimePickerDropdownSelectorComponent,
+  type TimeArrays,
+} from './pickers/time-picker-dropdown-selector.component';
+export { TimeUnitSelectorComponent } from './pickers/time-unit-selector.component';
+
+export { providersStyles, type ProviderStyle } from './providersStyles';
+export * from './helpers';

package/src/lib/primitives/input-base.component.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { InputBaseComponent } from './input-base.component';
+describe('InputBaseComponent', () => {
+  it('renderiza el label', async () => {
+    @Component({ standalone: true, imports: [InputBaseComponent], template: `<ba-input-base labelText="Correo" inputId="e" />` })
+    class Host {}
+    await render(Host);
+    expect(screen.getByText('Correo')).toBeTruthy();
+  });
+  it('emite changedInputValue en input cuando isInputValueManaged', async () => {
+    const onChange = vi.fn();
+    @Component({ standalone: true, imports: [InputBaseComponent], template: `<ba-input-base [isInputValueManaged]="true" inputTestId="in" (changedInputValue)="f($event)" />` })
+    class Host { f = onChange; }
+    await render(Host);
+    await fireEvent.input(screen.getByTestId('in'), { target: { value: 'hola' } });
+    expect(onChange).toHaveBeenCalledWith('hola');
+  });
+});

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

@@ -0,0 +1,210 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+
+// `register` (react-hook-form) no tiene
+// equivalente y se elimina; `onChangedInputValue` -> emit `changedInputValue`.
+// `min`/`max`/`step` se dejan sin default (undefined) para no introducir un
+// clamp que react nunca tuvo por defecto (misma decisión que InputBase.vue).
+type InputSize = 'xxs' | 'xs' | 'small' | 'base' | 'medium';
+
+@Component({
+  selector: 'ba-input-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [class]="
+        (enableError() ? displayClassNames() + ' ' + widthClassNames() + ' bas-items-center bas-gap-1.5' : '') +
+        ' ' + outerHeightGrid() + ' ' + className()
+      "
+    >
+      @if ((enableError() || info()) && enableWhiteSpaces()) {
+        <p class="bal-ba-error-text-invisible bas-m-0 bas-h-[18px]">white space</p>
+      }
+      <div [class]="'bas-relative bas-min-w-0 ' + innerHeightGrid()">
+        @if (isTextArea()) {
+          <textarea
+            [id]="inputId()"
+            [class]="inputClassNames()"
+            placeholder=""
+            [disabled]="isDisabled()"
+            [readonly]="isReadOnly()"
+            autocomplete="off"
+            [value]="isInputValueManaged() ? inputValue() : ''"
+            (input)="isInputValueManaged() && onInput($event)"
+          ></textarea>
+        } @else {
+          <input
+            [type]="type()"
+            [id]="inputId()"
+            [attr.data-testid]="inputTestId()"
+            [class]="inputClassNames()"
+            placeholder=""
+            [disabled]="isDisabled()"
+            [readonly]="isReadOnly()"
+            autocomplete="off"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.step]="step()"
+            [value]="isInputValueManaged() ? inputValue() : ''"
+            (input)="isInputValueManaged() && onInput($event)"
+          />
+        }
+        <label [for]="inputId()" [class]="floatingLabelClassNames()">
+          <p [class]="'bas-m-0 ' + (isDisabled() ? 'bas-cursor-not-allowed' : 'bas-cursor-text')">
+            {{ labelText() }}
+          </p>
+        </label>
+      </div>
+      @if (enableError() || info()) {
+        <p
+          [class]="
+            'bas-m-0 bas-h-[18px] ' +
+            (error() || info() ? 'bal-ba-error-text' : 'bal-ba-error-text-invisible') + ' ' +
+            (info() ? (blueStyles() ? 'bal-ba-info-text-blue-styles' : 'bal-ba-info-text') : '')
+          "
+        >
+          {{ error() ? errorMessage() : '' }}{{ info() ? infoMessage() : '' }}
+        </p>
+      }
+    </div>
+  `,
+})
+export class InputBaseComponent {
+  type = input('text');
+  inputId = input('floating_outlined');
+  isTextArea = input(false);
+  labelText = input('Floating outlined');
+  size = input<InputSize>('base');
+  isDisabled = input(false);
+  isReadOnly = input(false);
+  enableError = input(true);
+  enableWhiteSpaces = input(true);
+  error = input(false);
+  errorMessage = input('Error message');
+  info = input(false);
+  infoMessage = input('Info message');
+  isBgRedWhenError = input(false);
+  bgColor = input('bas-bg-transparent');
+  bgColorWhenError = input('bas-bg-red-50');
+  isInputValueManaged = input(false);
+  inputValue = input('');
+  floatingLabelTextStyles = input('bas-text-sm');
+  floatingLabelBgColor = input('bas-bg-white');
+  borderRadiusClassNames = input('bas-rounded-lg');
+  displayClassNames = input('bas-grid');
+  className = input('');
+  widthClassNames = input('bas-w-full');
+  blueStyles = input(false);
+  min = input<number | undefined>(undefined);
+  max = input<number | undefined>(undefined);
+  step = input<number | undefined>(undefined);
+  inputTestId = input<string | undefined>(undefined);
+
+  /** Equivalente al emit `changedInputValue` de InputBase.vue. */
+  changedInputValue = output<string>();
+
+  onInput(e: Event): void {
+    this.changedInputValue.emit((e.target as HTMLInputElement | HTMLTextAreaElement).value);
+  }
+
+  private heightGrid(enableError: boolean, enableWhiteSpaces: boolean): string {
+    if (!this.isTextArea()) {
+      return {
+        xxs: enableError
+          ? enableWhiteSpaces ? 'bas-h-[82px] bas-grid-rows-[18px_34px_18px]' : 'bas-h-[58px] bas-grid-rows-[34px_18px]'
+          : 'bas-h-[34px]',
+        xs: enableError
+          ? enableWhiteSpaces ? 'bas-h-[86px] bas-grid-rows-[18px_38px_18px]' : 'bas-h-[62px] bas-grid-rows-[38px_18px]'
+          : 'bas-h-[38px]',
+        small: enableError
+          ? enableWhiteSpaces ? 'bas-h-[90px] bas-grid-rows-[18px_42px_18px]' : 'bas-h-[66px] bas-grid-rows-[42px_18px]'
+          : 'bas-h-[42px]',
+        base: enableError
+          ? enableWhiteSpaces ? 'bas-h-[94px] bas-grid-rows-[18px_46px_18px]' : 'bas-h-[70px] bas-grid-rows-[46px_18px]'
+          : 'bas-h-[46px]',
+        medium: enableError
+          ? enableWhiteSpaces ? 'bas-h-[102px] bas-grid-rows-[18px_54px_18px]' : 'bas-h-[78px] bas-grid-rows-[54px_18px]'
+          : 'bas-h-[54px]',
+      }[this.size()];
+    }
+    return {
+      xxs: enableError
+        ? enableWhiteSpaces ? 'bas-h-[96px] bas-grid-rows-[18px_48px_18px]' : 'bas-h-[72px] bas-grid-rows-[48px_18px]'
+        : 'bas-h-[48px]',
+      xs: enableError
+        ? enableWhiteSpaces ? 'bas-h-[112px] bas-grid-rows-[18px_64px_18px]' : 'bas-h-[88px] bas-grid-rows-[64px_18px]'
+        : 'bas-h-[64px]',
+      small: enableError
+        ? enableWhiteSpaces ? 'bas-h-[128px] bas-grid-rows-[18px_80px_18px]' : 'bas-h-[104px] bas-grid-rows-[80px_18px]'
+        : 'bas-h-[80px]',
+      base: enableError
+        ? enableWhiteSpaces ? 'bas-h-[144px] bas-grid-rows-[18px_96px_18px]' : 'bas-h-[120px] bas-grid-rows-[96px_18px]'
+        : 'bas-h-[96px]',
+      medium: enableError
+        ? enableWhiteSpaces ? 'bas-h-[160px] bas-grid-rows-[18px_112px_18px]' : 'bas-h-[136px] bas-grid-rows-[112px_18px]'
+        : 'bas-h-[112px]',
+    }[this.size()];
+  }
+
+  outerHeightGrid = computed(() => this.heightGrid(this.enableError(), this.enableWhiteSpaces()));
+  innerHeightGrid = computed(() => this.heightGrid(false, false));
+
+  private inputHeightClassNames = computed(() => {
+    if (!this.isTextArea()) {
+      return {
+        xxs: 'bas-h-[34px] bas-pb-0.5 bas-pt-1.5',
+        xs: 'bas-h-[38px] bas-pb-0.5 bas-pt-2',
+        small: 'bas-h-[42px] bas-pb-1 bas-pt-2.5',
+        base: 'bas-h-[46px] bas-pb-1.5 bas-pt-3',
+        medium: 'bas-h-[54px] bas-pb-2.5 bas-pt-4',
+      }[this.size()];
+    }
+    return {
+      xxs: 'bas-h-[48px] bas-pb-0.5 bas-pt-1.5',
+      xs: 'bas-h-[64px] bas-pb-0.5 bas-pt-2',
+      small: 'bas-h-[80px] bas-pb-1 bas-pt-2.5',
+      base: 'bas-h-[96px] bas-pb-1.5 bas-pt-3',
+      medium: 'bas-h-[112px] bas-pb-2.5 bas-pt-4',
+    }[this.size()];
+  });
+
+  inputClassNames = computed(
+    () => `bal-ba-floating-input-base bal-ba-floating-input-outlined
+    bas-peer bas-box-border bas-block bas-w-full bas-appearance-none bas-border-2
+    bal-ba-transition-150 bas-border-solid bas-px-2.5 bas-text-sm bal-ba-outline-none
+    bal-ba-shadow-base bal-ba-focus-shadow-none disabled:bas-cursor-not-allowed
+    disabled:bas-border-gray-200 disabled:bas-text-gray-500
+    ${this.size() !== 'xxs' ? 'xsm1:bas-text-base' : ''} ${this.isTextArea() ? 'bal-ba-scroll-base bas-resize-none' : ''}
+    ${this.borderRadiusClassNames()} ${this.inputHeightClassNames()} ${
+      !this.error()
+        ? `focus:bas-border-[var(--bal-primary-100)] focus:hover:bas-border-[var(--bal-primary-300)] ${
+            this.blueStyles()
+              ? 'bas-text-[#004e98] hover:bas-text-[#00296b] bas-border-[var(--bal-primary-100)] hover:bas-border-[var(--bal-primary-300)]'
+              : `bas-text-gray-800 hover:bas-text-gray-900 bas-border-gray-300 hover:bas-border-gray-400
+              focus:bas-text-[#004e98] focus:hover:bas-text-[#00296b]`
+          }`
+        : 'bas-border-red-500 bas-text-red-500 focus:bas-border-red-600'
+    } ${this.isBgRedWhenError() && this.error() ? this.bgColorWhenError() : this.bgColor()}`,
+  );
+
+  floatingLabelClassNames = computed(
+    () => `bal-ba-floating-label-base bal-ba-floating-label-outlined
+    bal-ba-transform-base bal-ba-transition-2 bas-absolute
+    bas-start-1 bas-z-10 bas-origin-[0] bas-cursor-text bas-px-2
+    peer-placeholder-shown:bas-top-1/2 peer-focus:bas-px-2
+    rtl:peer-focus:bas-left-auto ${
+      this.size() === 'small'
+        ? 'bal-ba-floating-label-small-outlined bas-top-1 peer-focus:bas-top-1'
+        : 'bal-ba-floating-label-base-medium-outlined bas-top-2 peer-focus:bas-top-2'
+    } ${
+      this.isDisabled()
+        ? 'bas-cursor-not-allowed bas-text-gray-400'
+        : !this.error()
+          ? this.blueStyles()
+            ? 'bas-text-[#004e98] peer-hover:bas-text-[#00296b]'
+            : `bas-text-gray-500 peer-hover:bas-text-gray-600
+                      peer-focus:bas-text-[#004e98] peer-focus:hover:bas-text-[#00296b]`
+          : 'bas-text-red-500 peer-focus:bas-text-red-500'
+    } ${this.isBgRedWhenError() && this.error() ? this.bgColorWhenError() : this.floatingLabelBgColor()} ${this.floatingLabelTextStyles()}`,
+  );
+}

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

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, fireEvent } from '@testing-library/angular';
+import { LifetimeSliderBaseComponent } from './lifetime-slider-base.component';
+
+// Espejo de packages/vue/src/primitives/LifetimeSliderBase.test.ts. Cubre el
+// árbol completo del port (LifetimeSliderBase -> TimePicker ->
+// DropdownPickerAnimatedBase + TimePickerDropdownSelector + TimeUnitSelector +
+// SliderBase), en particular la reconciliación de rangos y el commit en
+// segundos de TimePickerDropdownSelector, que es la parte con más estado.
+describe('LifetimeSliderBaseComponent', () => {
+  const TEMPLATE = `
+    <ba-lifetime-slider-base
+      id="lt"
+      [sliderValue]="sliderValue"
+      [min]="10"
+      [max]="29100"
+      [timeInputValue]="timeInputValue"
+      [isOpen]="isOpen"
+      (sliderValueChanged)="onSlider($event)"
+      (timeChanged)="onTime($event)"
+      (toggleTimerDropdown)="onToggle()"
+    />
+  `;
+
+  function makeHost(overrides: Partial<Record<string, unknown>> = {}) {
+    @Component({ standalone: true, imports: [LifetimeSliderBaseComponent], template: TEMPLATE })
+    class Host {
+      sliderValue = 3600;
+      timeInputValue = '01:00:00';
+      isOpen = false;
+      onSlider = vi.fn();
+      onTime = vi.fn();
+      onToggle = vi.fn();
+      constructor() {
+        Object.assign(this, overrides);
+      }
+    }
+    return Host;
+  }
+
+  it('renderiza el slider (SliderBase) y el input del TimePicker con el valor HH:MM:SS', async () => {
+    const { container } = await render(makeHost());
+    const slider = container.querySelector('#lt-slider') as HTMLInputElement;
+    expect(slider).not.toBeNull();
+    expect(slider.type).toBe('range');
+    expect(slider.value).toBe('3600');
+    const timeInput = container.querySelector('#lt-time-picker-time-input') as HTMLInputElement;
+    expect(timeInput.value).toBe('01:00:00');
+  });
+
+  it('emite toggleTimerDropdown al pulsar el botón del picker', async () => {
+    const onToggle = vi.fn();
+    const { container } = await render(makeHost({ onToggle }));
+    await fireEvent.click(container.querySelector('#lt-time-picker-btn') as HTMLButtonElement);
+    expect(onToggle).toHaveBeenCalledOnce();
+  });
+
+  it('abierto: muestra las 3 columnas del picker (horas/minutos/segundos) y el botón Save', async () => {
+    const { container } = await render(makeHost({ isOpen: true }));
+    expect(container.querySelector('#lt-time-picker-hours-selector-container')).not.toBeNull();
+    expect(container.querySelector('#lt-time-picker-minutes-selector-container')).not.toBeNull();
+    expect(container.querySelector('#lt-time-picker-seconds-selector-container')).not.toBeNull();
+    expect(container.querySelector('#lt-time-picker-btn-save')).not.toBeNull();
+  });
+
+  it('elegir una hora y guardar emite timeChanged en segundos', async () => {
+    const onTime = vi.fn();
+    const onToggle = vi.fn();
+    const { container } = await render(makeHost({ isOpen: true, onTime, onToggle }));
+    // Selecciona 02 horas (id `${id}-time-picker-hours-02`).
+    await fireEvent.click(container.querySelector('#lt-time-picker-hours-02') as HTMLElement);
+    const save = container.querySelector('#lt-time-picker-btn-save') as HTMLButtonElement;
+    expect(save.disabled).toBe(false); // cambió respecto del valor inicial
+    await fireEvent.click(save);
+    // 02:00:00 -> 7200s.
+    expect(onTime).toHaveBeenCalledWith(7200);
+    expect(onToggle).toHaveBeenCalledOnce();
+  });
+
+  it('mover el slider emite sliderValueChanged en segundos', async () => {
+    const onSlider = vi.fn();
+    const { container } = await render(makeHost({ onSlider }));
+    const slider = container.querySelector('#lt-slider') as HTMLInputElement;
+    await fireEvent.input(slider, { target: { value: '7200' } });
+    expect(onSlider).toHaveBeenCalledWith(7200);
+  });
+});

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

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { TimePickerComponent } from './pickers/time-picker.component';
+import { SliderBaseComponent } from './slider-base.component';
+
+// Control de lifetime de sesión: un `<ba-time-picker>` `HH:MM:SS` junto a un
+// `<ba-slider-base>`, ambos manejando el mismo valor. El padre guarda el valor
+// en segundos y lo pasa como `sliderValue` (número) y `timeInputValue` (el mismo
+// valor formateado `HH:MM:SS`); tanto `sliderValueChanged` como `timeChanged`
+// reportan de vuelta en segundos, así el padre mantiene ambas vistas en sync.
+// `:host { display: contents }`: el grid raíz es el hijo real del contenedor.
+@Component({
+  selector: 'ba-lifetime-slider-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style: 'display: contents' },
+  imports: [TimePickerComponent, SliderBaseComponent],
+  template: `
+    <div [class]="classNames()">
+      <div [class]="timePickerContainerClassNames()">
+        <ba-time-picker
+          [id]="id() + '-time-picker'"
+          size="small"
+          [error]="timeInputError()"
+          [errorMessage]="timeInputErrorMessage()"
+          [isOpen]="isOpen()"
+          [min]="min()"
+          [max]="max()"
+          [btnSaveText]="btnSaveText()"
+          [timeInputValue]="timeInputValue()"
+          [isInsideModal]="isTimePickerInsideModal()"
+          [modalId]="modalId()"
+          [dropdownDirection]="timePickerDropdownDirection()"
+          (isOpenChange)="isOpenChange.emit($event)"
+          (toggleTimerDropdown)="toggleTimerDropdown.emit()"
+          (timeChanged)="timeChanged.emit($event)"
+        />
+      </div>
+      <ba-slider-base
+        [id]="id() + '-slider'"
+        [sliderValue]="sliderValue()"
+        [step]="step()"
+        [min]="min()"
+        [max]="max()"
+        [classNames]="sliderContainerClassNames()"
+        (sliderValueChanged)="sliderValueChanged.emit($event)"
+      />
+    </div>
+  `,
+})
+export class LifetimeSliderBaseComponent {
+  id = input('lifetime-slider');
+  sliderValue = input(150);
+  step = input(1);
+  min = input(0);
+  max = input(100);
+  btnSaveText = input('Save');
+  timeInputError = input(false);
+  timeInputErrorMessage = input('');
+  timeInputValue = input('08:05:00');
+  isOpen = input(false);
+  isTimePickerInsideModal = input(false);
+  modalId = input('txns-overview');
+  timePickerDropdownDirection = input<'up' | 'down'>('down');
+  classNames = input(
+    'bas-grid bas-h-auto bas-w-full bas-grid-rows-[auto_auto] bas-items-center bas-gap-2 ' +
+      '2xsm1:bas-grid-cols-[152px_1fr] 2xsm1:bas-grid-rows-1 1xl:bas-gap-4 2xl:bas-gap-8 bas-mb-6 bas-mt-2',
+  );
+  timePickerContainerClassNames = input('bas-flex bas-w-full bas-items-center bas-justify-center');
+  sliderContainerClassNames = input('');
+
+  sliderValueChanged = output<number>();
+  timeChanged = output<number>();
+  isOpenChange = output<boolean>();
+  toggleTimerDropdown = output<void>();
+}

package/src/lib/primitives/oval-spinner.component.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/angular';
+import { OvalSpinnerComponent } from './oval-spinner.component';
+describe('OvalSpinnerComponent', () => {
+  it('renderiza un svg con la clase de spin', async () => {
+    const { container } = await render(OvalSpinnerComponent);
+    expect(container.querySelector('.bas-oval-spin')).toBeTruthy();
+  });
+});