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

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}`;
+  }
+}