feat(carousel): implement product carousel component with mock data and styles

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

@@ -0,0 +1,128 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  PLATFORM_ID,
+  TemplateRef,
+  computed,
+  inject,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+
+export interface CarouselItemContext<T> {
+  $implicit: T;
+  index: number;
+}
+
+export type CarouselTrackBy<T> = (index: number, item: T) => unknown;
+
+@Component({
+  selector: 'app-carousel',
+  imports: [NgTemplateOutlet],
+  templateUrl: './carousel.component.html',
+  styleUrl: './carousel.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CarouselComponent<T> implements AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly viewport = viewChild.required<ElementRef<HTMLElement>>('viewport');
+
+  readonly items = input.required<readonly T[]>();
+  readonly itemTemplate = input.required<TemplateRef<CarouselItemContext<T>>>();
+  readonly trackBy = input<CarouselTrackBy<T>>((index) => index);
+  readonly scrollStep = input<number | null>(null);
+  readonly ariaLabel = input('Carrusel');
+  readonly previousLabel = input('Mostrar elementos anteriores');
+  readonly nextLabel = input('Mostrar elementos siguientes');
+
+  protected readonly canScrollPrevious = signal(false);
+  protected readonly canScrollNext = signal(false);
+  protected readonly hasMultipleItems = computed(() => this.items().length > 1);
+
+  ngAfterViewInit(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+
+    const viewport = this.viewport().nativeElement;
+    this.refreshNavigation();
+
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(() => this.refreshNavigation());
+    resizeObserver?.observe(viewport);
+
+    const mutationObserver =
+      typeof MutationObserver === 'undefined'
+        ? null
+        : new MutationObserver(() => this.refreshNavigation());
+    mutationObserver?.observe(viewport, { childList: true });
+
+    this.destroyRef.onDestroy(() => {
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    });
+  }
+
+  previous(): void {
+    this.scroll(-1);
+  }
+
+  next(): void {
+    this.scroll(1);
+  }
+
+  scrollTo(index: number): void {
+    const item = this.viewport().nativeElement.children.item(index) as HTMLElement | null;
+
+    item?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start',
+    });
+  }
+
+  protected handleScroll(): void {
+    this.refreshNavigation();
+  }
+
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.previous();
+    }
+
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.next();
+    }
+  }
+
+  private scroll(direction: -1 | 1): void {
+    const viewport = this.viewport().nativeElement;
+    const configuredStep = this.scrollStep();
+    const step =
+      configuredStep !== null && configuredStep > 0 ? configuredStep : viewport.clientWidth;
+
+    viewport.scrollBy({
+      left: direction * step,
+      behavior: 'smooth',
+    });
+  }
+
+  private refreshNavigation(): void {
+    const viewport = this.viewport().nativeElement;
+    const maxScrollLeft = Math.max(viewport.scrollWidth - viewport.clientWidth, 0);
+    const tolerance = 1;
+
+    this.canScrollPrevious.set(viewport.scrollLeft > tolerance);
+    this.canScrollNext.set(viewport.scrollLeft < maxScrollLeft - tolerance);
+  }
+}