feat(carousel): enhance carousel component with gap support and layout adjustments

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

@@ -601,6 +601,7 @@
         [items]="carouselProducts"
         [itemTemplate]="productCarouselItem"
         [trackBy]="trackCarouselProduct"
+        [gap]="16"
         ariaLabel="Productos con imágenes de prueba"
       />
     </div>

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

@@ -22,7 +22,6 @@
 .carousel-product {
   width: clamp(15rem, 30vw, 18rem);
   height: 100%;
-  margin-right: 1rem;
 
   app-product-column-with-image {
     display: block;

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

@@ -1,8 +1,10 @@
 <section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
+  <div class="carousel__frame" [style.width.px]="viewportWidth()">
     <div
       #viewport
       class="carousel__viewport"
       tabindex="0"
+      [style.gap.px]="resolvedGap()"
       (scroll)="handleScroll()"
       (keydown)="handleKeydown($event)"
     >
@@ -37,4 +39,5 @@
         <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
       </button>
     }
+  </div>
 </section>

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

@@ -4,8 +4,13 @@
 }
 
 .carousel {
+  width: 100%;
+
+  &__frame {
     position: relative;
     width: 100%;
+    margin-inline: auto;
+  }
 
   &__viewport {
     display: flex;

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

@@ -31,19 +31,23 @@ export type CarouselTrackBy<T> = (index: number, item: T) => unknown;
 export class CarouselComponent<T> implements AfterViewInit {
   private readonly destroyRef = inject(DestroyRef);
   private readonly platformId = inject(PLATFORM_ID);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   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 gap = input(0);
   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 viewportWidth = signal<number | null>(null);
   protected readonly hasMultipleItems = computed(() => this.items().length > 1);
+  protected readonly resolvedGap = computed(() => Math.max(this.gap(), 0));
 
   ngAfterViewInit(): void {
     if (!isPlatformBrowser(this.platformId)) {
@@ -51,18 +55,18 @@ export class CarouselComponent<T> implements AfterViewInit {
     }
 
     const viewport = this.viewport().nativeElement;
-    this.refreshNavigation();
+    this.refreshLayout();
 
     const resizeObserver =
       typeof ResizeObserver === 'undefined'
         ? null
-        : new ResizeObserver(() => this.refreshNavigation());
-    resizeObserver?.observe(viewport);
+        : new ResizeObserver(() => this.refreshLayout());
+    resizeObserver?.observe(this.host.nativeElement);
 
     const mutationObserver =
       typeof MutationObserver === 'undefined'
         ? null
-        : new MutationObserver(() => this.refreshNavigation());
+        : new MutationObserver(() => this.refreshLayout());
     mutationObserver?.observe(viewport, { childList: true });
 
     this.destroyRef.onDestroy(() => {
@@ -109,7 +113,9 @@ export class CarouselComponent<T> implements AfterViewInit {
     const viewport = this.viewport().nativeElement;
     const configuredStep = this.scrollStep();
     const step =
-      configuredStep !== null && configuredStep > 0 ? configuredStep : viewport.clientWidth;
+      configuredStep !== null && configuredStep > 0
+        ? configuredStep
+        : viewport.clientWidth + this.resolvedGap();
 
     viewport.scrollBy({
       left: direction * step,
@@ -125,4 +131,35 @@ export class CarouselComponent<T> implements AfterViewInit {
     this.canScrollPrevious.set(viewport.scrollLeft > tolerance);
     this.canScrollNext.set(viewport.scrollLeft < maxScrollLeft - tolerance);
   }
+
+  private refreshLayout(): void {
+    const viewport = this.viewport().nativeElement;
+    const firstItem = viewport.firstElementChild as HTMLElement | null;
+    const availableWidth = this.host.nativeElement.clientWidth;
+
+    if (!firstItem || availableWidth <= 0) {
+      this.viewportWidth.set(null);
+      this.refreshNavigation();
+      return;
+    }
+
+    const itemWidth = firstItem.getBoundingClientRect().width;
+
+    if (itemWidth <= 0) {
+      this.viewportWidth.set(null);
+      this.refreshNavigation();
+      return;
+    }
+
+    const gap = this.resolvedGap();
+    const fittingItems = Math.max(
+      1,
+      Math.floor((availableWidth + gap) / (itemWidth + gap)),
+    );
+    const visibleItems = Math.min(fittingItems, viewport.children.length);
+    const fittedWidth = visibleItems * itemWidth + Math.max(visibleItems - 1, 0) * gap;
+
+    this.viewportWidth.set(Math.min(Math.ceil(fittedWidth), availableWidth));
+    this.refreshNavigation();
+  }
 }