From 37bbd65cfee7676232a414f17aa852a2f4a4b4c1 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Thu, 23 Jul 2026 13:37:10 -0300 Subject: [PATCH] feat(carousel): adjust item width calculation for better distribution and responsiveness --- .../carousel/carousel.component.html | 10 +++---- .../carousel/carousel.component.scss | 4 +++ .../carousel/carousel.component.spec.ts | 7 +++-- .../components/carousel/carousel.component.ts | 27 +++++++++---------- .../product-list/product-list.component.scss | 5 ++-- 5 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/app/shared/components/carousel/carousel.component.html b/src/app/shared/components/carousel/carousel.component.html index 7e1cfe4..a908b81 100644 --- a/src/app/shared/components/carousel/carousel.component.html +++ b/src/app/shared/components/carousel/carousel.component.html @@ -1,9 +1,5 @@
-
+
@for (entry of page.items; track trackBy()(entry.index, entry.item)) { -
+
@for (item of items(); track trackBy()($index, item); let index = $index) { -
+
* { + width: 100%; + } } &__control { diff --git a/src/app/shared/components/carousel/carousel.component.spec.ts b/src/app/shared/components/carousel/carousel.component.spec.ts index 51d2efc..6dc454f 100644 --- a/src/app/shared/components/carousel/carousel.component.spec.ts +++ b/src/app/shared/components/carousel/carousel.component.spec.ts @@ -97,7 +97,7 @@ describe('CarouselComponent', () => { expect(scrollBy).toHaveBeenCalledTimes(2); }); - it('ajusta y centra el viewport para mostrar únicamente elementos completos', () => { + it('usa todo el ancho y distribuye el espacio sobrante entre elementos completos', () => { const host = fixture.nativeElement.querySelector('app-carousel') as HTMLElement; const firstItem = fixture.nativeElement.querySelector('.carousel__item') as HTMLElement; @@ -116,8 +116,11 @@ describe('CarouselComponent', () => { fixture.detectChanges(); const frame = fixture.nativeElement.querySelector('.carousel__frame') as HTMLElement; + const items = fixture.nativeElement.querySelectorAll('.carousel__item'); - expect(frame.style.width).toBe('512px'); + expect(frame.style.width).toBe(''); + expect(items[0].style.width).toBe('269px'); + expect(items[1].style.width).toBe('269px'); }); it('mantiene preparadas las páginas adyacentes y rota al terminar la transición', () => { diff --git a/src/app/shared/components/carousel/carousel.component.ts b/src/app/shared/components/carousel/carousel.component.ts index ba16955..5ae3006 100644 --- a/src/app/shared/components/carousel/carousel.component.ts +++ b/src/app/shared/components/carousel/carousel.component.ts @@ -59,18 +59,11 @@ export class CarouselComponent implements AfterViewInit { protected readonly canScrollPrevious = signal(false); protected readonly canScrollNext = signal(false); protected readonly hasOverflow = signal(false); - protected readonly viewportWidth = signal(null); + protected readonly itemWidth = signal(null); protected readonly itemsPerPage = signal(Number.MAX_SAFE_INTEGER); protected readonly currentPage = signal(0); protected readonly transitionDirection = signal<-1 | 0 | 1>(0); protected readonly hasMultipleItems = computed(() => this.items().length > 1); - protected readonly frameWidth = computed(() => { - const viewportWidth = this.viewportWidth(); - - return viewportWidth === null - ? null - : viewportWidth + (this.hasMultipleItems() ? CarouselComponent.CONTROL_SLOT_WIDTH * 2 : 0); - }); protected readonly resolvedGap = computed(() => Math.max(this.gap(), 0)); protected readonly pageCount = computed(() => Math.max(1, Math.ceil(this.items().length / this.itemsPerPage())), @@ -234,15 +227,18 @@ export class CarouselComponent implements AfterViewInit { ); if (!firstItem || availableViewportWidth <= 0) { - this.viewportWidth.set(null); + this.itemWidth.set(null); this.refreshNavigation(); return; } - const itemWidth = firstItem.getBoundingClientRect().width; + const assignedWidth = firstItem.style.width; + firstItem.style.width = ''; + const naturalItemWidth = firstItem.getBoundingClientRect().width; + firstItem.style.width = assignedWidth; - if (itemWidth <= 0) { - this.viewportWidth.set(null); + if (naturalItemWidth <= 0) { + this.itemWidth.set(null); this.refreshNavigation(); return; } @@ -250,10 +246,11 @@ export class CarouselComponent implements AfterViewInit { const gap = this.resolvedGap(); const fittingItems = Math.max( 1, - Math.floor((availableViewportWidth + gap) / (itemWidth + gap)), + Math.floor((availableViewportWidth + gap) / (naturalItemWidth + gap)), ); const visibleItems = Math.min(fittingItems, this.items().length); - const fittedWidth = visibleItems * itemWidth + Math.max(visibleItems - 1, 0) * gap; + const distributedItemWidth = + (availableViewportWidth - Math.max(visibleItems - 1, 0) * gap) / visibleItems; if (this.itemsPerPage() !== fittingItems) { this.itemsPerPage.set(fittingItems); @@ -261,7 +258,7 @@ export class CarouselComponent implements AfterViewInit { this.transitionDirection.set(0); } - this.viewportWidth.set(Math.min(Math.ceil(fittedWidth), availableViewportWidth)); + this.itemWidth.set(distributedItemWidth); if (this.circular()) { const hasOverflow = this.items().length > fittingItems; this.hasOverflow.set(hasOverflow); diff --git a/src/app/shared/components/product-list/product-list.component.scss b/src/app/shared/components/product-list/product-list.component.scss index c7f95b8..a71c8b8 100644 --- a/src/app/shared/components/product-list/product-list.component.scss +++ b/src/app/shared/components/product-list/product-list.component.scss @@ -34,12 +34,13 @@ min-width: 0; &--carousel { - width: clamp(15rem, 30vw, 18rem); + width: 100%; + min-width: clamp(15rem, 30vw, 18rem); height: 100%; } &--carousel-row { - width: clamp(18rem, 70vw, 32rem); + min-width: clamp(18rem, 70vw, 32rem); } } }