feat(carousel): add main carousel component with image support and integrate into store home page

src/app/core/services/tenant.interface.ts

@@ -46,6 +46,7 @@ export interface Tenant {
   selected_bank_account?: BankAccount | null;
   hero_config?: HeroConfig | null;
   event_config?: EventConfig | null;
+  main_carousel_images?: string[];
   menues?: Menu[];
 }
 

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -574,6 +574,24 @@
     </div>
   </section>
 
+  <section class="component-demo card shadow-sm mt-4" data-testid="main-carousel">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-3">Main Carousel</h2>
+
+      <p class="text-muted mb-4">
+        Carrusel panorámico compuesto únicamente por imágenes, con autoslide e indicadores.
+      </p>
+
+      <app-main-carousel
+        [images]="mainCarouselImages"
+        [imageAlts]="mainCarouselImageAlts"
+        [autoSlideInterval]="4000"
+        ariaLabel="Promociones de la tienda"
+      />
+    </div>
+  </section>
+
   <section class="component-demo card shadow-sm mt-4" data-testid="products-carousel">
     <div class="card-body">
       <span class="eyebrow">Reusable Component</span>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -180,6 +180,41 @@ describe('ReutilizablesTestPageComponent', () => {
     ).toBe(6);
   });
 
+  it('renders the main carousel demo with remote images', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant),
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub(),
+        },
+        {
+          provide: ModalService,
+          useValue: createModalServiceStub(),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const carouselDemo = element.querySelector('[data-testid="main-carousel"]');
+    const images = carouselDemo?.querySelectorAll('.main-carousel__image');
+    const indicators = carouselDemo?.querySelectorAll('.main-carousel__indicator');
+
+    expect(carouselDemo?.querySelector('app-main-carousel')).not.toBeNull();
+    expect(images).toHaveLength(3);
+    expect(indicators).toHaveLength(3);
+    expect(images?.[0].getAttribute('src')).toContain('images.unsplash.com');
+
+    fixture.destroy();
+  });
+
   it('renders the modal showcase and opens the confirm demos from the buttons', async () => {
     const modalServiceStub = createModalServiceStub();
     await TestBed.configureTestingModule({

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -15,6 +15,7 @@ import { ToastService } from '../../../../core/services/toast.service';
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
 import { CarouselComponent } from '../../../../shared/components/carousel/carousel.component';
+import { MainCarouselComponent } from '../../../../shared/components/main-carousel/main-carousel.component';
 
 interface CarouselProductMock {
   id: number;
@@ -41,6 +42,7 @@ interface CarouselProductMock {
     StepperComponent,
     StepComponent,
     CarouselComponent,
+    MainCarouselComponent,
   ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss',
@@ -73,6 +75,16 @@ export class ReutilizablesTestPageComponent {
   protected lastModalResult = 'Todavia no se abrio ningun modal.';
   protected readonly paginatorTotalPages = 8;
   protected readonly cartBackgroundColor = '#ffffff';
+  protected readonly mainCarouselImages = [
+    'https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&q=80',
+    'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1600&q=80',
+    'https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1600&q=80',
+  ];
+  protected readonly mainCarouselImageAlts = [
+    'Interior de una tienda de indumentaria',
+    'Colección de moda en exteriores',
+    'Percheros con prendas de distintos colores',
+  ];
 
   protected readonly testProducts = [
     {

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -1,3 +1,13 @@
+@if (tenant()?.main_carousel_images; as mainCarouselImages) {
+  @if (mainCarouselImages.length) {
+    <app-main-carousel
+      class="store-home__main-carousel"
+      [images]="mainCarouselImages"
+      ariaLabel="Imágenes destacadas de la tienda"
+    />
+  }
+}
+
 @if (tenant()?.hero_config || tenant()?.event_config) {
   <app-hero-banner
     [heroConfig]="tenant()?.hero_config"

src/app/features/store/pages/store-home-page/store-home-page.component.scss

@@ -2,6 +2,10 @@
   display: block;
 }
 
+.store-home__main-carousel {
+  margin-bottom: clamp(2rem, 4vw, 3rem);
+}
+
 app-hero-banner + app-store-section,
 app-store-section + app-store-section {
   margin-top: clamp(3rem, 6vw, 5rem);

src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts

@@ -1,3 +1,4 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
@@ -11,6 +12,8 @@ import {
   CatalogFeaturedItem,
 } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { Tenant } from '../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { ProductListComponent } from '../../../../shared/components/product-list/product-list.component';
 import { StoreHomePageComponent } from './store-home-page.component';
@@ -85,6 +88,33 @@ const pageOneItems: CatalogFeaturedItem[] = [
   },
 ];
 
+function createTenant(mainCarouselImages?: string[]): Tenant {
+  return {
+    id: 1,
+    codigo: 'acme',
+    nombre: 'Acme',
+    dominio: 'acme.com',
+    primary_color: '#6376f3',
+    secondary_color: '#a0a0a0',
+    danger_color: '#dc3545',
+    success_color: '#198754',
+    header_bg_color: '#ffffff',
+    footer_bg_color: '#ffffff',
+    header_logo: '/header.png',
+    footer_logo: '/footer.png',
+    main_carousel_images: mainCarouselImages,
+  };
+}
+
+function createTenantServiceStub(tenant: Tenant | null) {
+  const tenantState = signal(tenant);
+
+  return {
+    tenant: tenantState.asReadonly(),
+    getTenant: () => tenantState(),
+  };
+}
+
 describe('StoreHomePageComponent', () => {
   beforeEach(() => vi.restoreAllMocks());
 
@@ -115,6 +145,64 @@ describe('StoreHomePageComponent', () => {
     );
   });
 
+  it('renders the tenant main carousel images at the beginning of the home page', async () => {
+    const mainCarouselImages = [
+      'https://example.com/carousel-1.webp',
+      'https://example.com/carousel-2.webp',
+    ];
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        {
+          provide: CatalogService,
+          useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
+        },
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(createTenant(mainCarouselImages)),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const carousel = element.querySelector('app-main-carousel');
+    const images = carousel?.querySelectorAll('.main-carousel__image');
+
+    expect(element.firstElementChild).toBe(carousel);
+    expect(images).toHaveLength(2);
+    expect(images?.[0].getAttribute('src')).toBe(mainCarouselImages[0]);
+    expect(images?.[1].getAttribute('src')).toBe(mainCarouselImages[1]);
+
+    fixture.destroy();
+  });
+
+  it('does not render the main carousel when the tenant has no images', async () => {
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        {
+          provide: CatalogService,
+          useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
+        },
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(createTenant([])),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    expect((fixture.nativeElement as HTMLElement).querySelector('app-main-carousel')).toBeNull();
+  });
+
   it('requests another page for the selected featured group', async () => {
     const pageTwoItems = [{ id: 3, nombre: 'Mouse Gamer', precio: '15999.00', image: null }];
     const catalogServiceStub = {

src/app/features/store/pages/store-home-page/store-home-page.component.ts

@@ -21,6 +21,7 @@ import {
   ProductListItem,
 } from '../../../../shared/components/product-list/product-list.component';
 import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.component';
+import { MainCarouselComponent } from '../../../../shared/components/main-carousel/main-carousel.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import {
   STORE_HOME_PRODUCTS_ERROR_MESSAGE,
@@ -29,7 +30,12 @@ import {
 
 @Component({
   selector: 'app-store-home-page',
-  imports: [StoreSectionComponent, ProductListComponent, HeroBannerComponent],
+  imports: [
+    StoreSectionComponent,
+    ProductListComponent,
+    HeroBannerComponent,
+    MainCarouselComponent,
+  ],
   templateUrl: './store-home-page.component.html',
   styleUrl: './store-home-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/shared/components/main-carousel/main-carousel.component.html

@@ -0,0 +1,41 @@
+<section
+  class="main-carousel"
+  role="region"
+  aria-roledescription="carrusel"
+  [attr.aria-label]="ariaLabel()"
+  tabindex="0"
+  (mouseenter)="setPaused(true)"
+  (mouseleave)="setPaused(false)"
+  (focusin)="setPaused(true)"
+  (focusout)="setPaused(false)"
+  (keydown)="handleKeydown($event)"
+>
+  <div class="main-carousel__viewport" aria-live="off">
+    @for (image of images(); track $index; let index = $index) {
+      <img
+        class="main-carousel__image"
+        [class.main-carousel__image--active]="index === activeIndex()"
+        [src]="image"
+        [alt]="imageAlt(index)"
+        [attr.aria-hidden]="index === activeIndex() ? null : 'true'"
+        [attr.loading]="index === 0 ? 'eager' : 'lazy'"
+        draggable="false"
+      />
+    }
+  </div>
+
+  @if (hasMultipleImages()) {
+    <div class="main-carousel__indicators" role="group" aria-label="Seleccionar imagen">
+      @for (image of images(); track $index; let index = $index) {
+        <button
+          type="button"
+          class="main-carousel__indicator"
+          [class.main-carousel__indicator--active]="index === activeIndex()"
+          [attr.aria-label]="'Mostrar imagen ' + (index + 1)"
+          [attr.aria-current]="index === activeIndex() ? 'true' : null"
+          (click)="selectImage(index)"
+        ></button>
+      }
+    </div>
+  }
+</section>

src/app/shared/components/main-carousel/main-carousel.component.scss

@@ -0,0 +1,90 @@
+:host {
+  display: block;
+  min-width: 0;
+}
+
+.main-carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: #dedede;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary, #6376f3);
+    outline-offset: 2px;
+  }
+
+  &__viewport {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4 / 1;
+    min-height: 9rem;
+    max-height: 25rem;
+  }
+
+  &__image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 500ms ease,
+      visibility 500ms ease;
+    user-select: none;
+
+    &--active {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &__indicators {
+    position: absolute;
+    z-index: 1;
+    bottom: clamp(0.45rem, 1.2vw, 0.8rem);
+    left: 50%;
+    display: flex;
+    gap: 0.25rem;
+    transform: translateX(-50%);
+  }
+
+  &__indicator {
+    width: 0.32rem;
+    height: 0.32rem;
+    padding: 0;
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.55);
+    border: 0;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+    transition:
+      background-color 150ms ease,
+      transform 150ms ease;
+
+    &:hover,
+    &--active {
+      background: #ffffff;
+      transform: scale(1.2);
+    }
+
+    &:focus-visible {
+      outline: 2px solid #ffffff;
+      outline-offset: 2px;
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .main-carousel__viewport {
+    aspect-ratio: 2 / 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .main-carousel__image {
+    transition: none;
+  }
+}

src/app/shared/components/main-carousel/main-carousel.component.spec.ts

@@ -0,0 +1,84 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { MainCarouselComponent } from './main-carousel.component';
+
+@Component({
+  imports: [MainCarouselComponent],
+  template: `
+    <app-main-carousel
+      [images]="images"
+      [imageAlts]="['Primera promoción', 'Segunda promoción', 'Tercera promoción']"
+      [autoSlideInterval]="1000"
+    />
+  `,
+})
+class TestHostComponent {
+  readonly images = ['/images/one.webp', '/images/two.webp', '/images/three.webp'];
+}
+
+describe('MainCarouselComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('renderiza solamente las imágenes y sus indicadores', () => {
+    const element = fixture.nativeElement as HTMLElement;
+    const images = element.querySelectorAll('.main-carousel__image');
+    const indicators = element.querySelectorAll('.main-carousel__indicator');
+
+    expect(images).toHaveLength(3);
+    expect(indicators).toHaveLength(3);
+    expect(images[0].getAttribute('alt')).toBe('Primera promoción');
+    expect(images[0].classList).toContain('main-carousel__image--active');
+  });
+
+  it('avanza automáticamente entre las imágenes', () => {
+    fixture.destroy();
+    vi.useFakeTimers();
+
+    try {
+      fixture = TestBed.createComponent(TestHostComponent);
+      fixture.detectChanges();
+      vi.advanceTimersByTime(1000);
+      fixture.detectChanges();
+
+      const images = fixture.nativeElement.querySelectorAll('.main-carousel__image');
+      expect(images[1].classList).toContain('main-carousel__image--active');
+    } finally {
+      fixture.destroy();
+      vi.useRealTimers();
+    }
+  });
+
+  it('permite seleccionar una imagen desde los indicadores', () => {
+    const indicators = fixture.nativeElement.querySelectorAll(
+      '.main-carousel__indicator',
+    ) as NodeListOf<HTMLButtonElement>;
+
+    indicators[2].click();
+    fixture.detectChanges();
+
+    const images = fixture.nativeElement.querySelectorAll('.main-carousel__image');
+    expect(images[2].classList).toContain('main-carousel__image--active');
+    expect(indicators[2].getAttribute('aria-current')).toBe('true');
+  });
+
+  it('permite navegar con las flechas del teclado', () => {
+    const carousel = fixture.nativeElement.querySelector('.main-carousel') as HTMLElement;
+
+    carousel.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    fixture.detectChanges();
+
+    const images = fixture.nativeElement.querySelectorAll('.main-carousel__image');
+    expect(images[2].classList).toContain('main-carousel__image--active');
+  });
+});

src/app/shared/components/main-carousel/main-carousel.component.ts

@@ -0,0 +1,86 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  PLATFORM_ID,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+@Component({
+  selector: 'app-main-carousel',
+  templateUrl: './main-carousel.component.html',
+  styleUrl: './main-carousel.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MainCarouselComponent {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly requestedIndex = signal(0);
+  private readonly paused = signal(false);
+
+  readonly images = input.required<readonly string[]>();
+  readonly imageAlts = input<readonly string[]>([]);
+  readonly autoSlideInterval = input(5000);
+  readonly ariaLabel = input('Imágenes destacadas');
+
+  protected readonly activeIndex = computed(() => {
+    const imageCount = this.images().length;
+
+    return imageCount ? this.requestedIndex() % imageCount : 0;
+  });
+  protected readonly hasMultipleImages = computed(() => this.images().length > 1);
+
+  constructor() {
+    effect(() => {
+      const imageCount = this.images().length;
+      const interval = Math.max(this.autoSlideInterval(), 1000);
+
+      if (!isPlatformBrowser(this.platformId) || imageCount < 2) {
+        return;
+      }
+
+      const timer = window.setInterval(() => {
+        if (!this.paused()) {
+          this.requestedIndex.update((index) => (index + 1) % imageCount);
+        }
+      }, interval);
+
+      return () => window.clearInterval(timer);
+    });
+  }
+
+  protected selectImage(index: number): void {
+    if (index >= 0 && index < this.images().length) {
+      this.requestedIndex.set(index);
+    }
+  }
+
+  protected setPaused(paused: boolean): void {
+    this.paused.set(paused);
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (!this.hasMultipleImages()) {
+      return;
+    }
+
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.requestedIndex.update(
+        (index) => (index - 1 + this.images().length) % this.images().length,
+      );
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.requestedIndex.update((index) => (index + 1) % this.images().length);
+    }
+  }
+
+  protected imageAlt(index: number): string {
+    return this.imageAlts()[index] || `Imagen destacada ${index + 1}`;
+  }
+}