- @if (activeSlide(); as slide) {
-
- @if (slide.subtitle) {
- {{ slide.subtitle }}
- }
- @if (slide.ctaLabel) {
-
- }
+ @if (visibleSlides().length) {
+
@if (allSlides().length > 1) {
@@ -49,6 +76,40 @@ const AUTOPLAY_INTERVAL_MS = 5000;
animation: hero-widget-in 420ms ease-out both;
}
+ .hero-widget__nav {
+ display: flex;
+ align-items: stretch;
+ gap: var(--space-sm, 8px);
+ }
+
+ .hero-widget__slides {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ gap: var(--space-lg, 24px);
+ }
+
+ .hero-widget__slide {
+ flex: 1 1 0;
+ min-width: 0;
+ }
+
+ .hero-widget__arrow {
+ flex-shrink: 0;
+ align-self: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: 1px solid var(--border-color, #d3dad9);
+ background: #fff;
+ color: var(--text-primary, #1e3c38);
+ cursor: pointer;
+ font-size: 1rem;
+
+ &:hover { background: var(--primary-color, #497671); color: #fff; }
+ &:focus-visible { outline: 2px solid var(--primary-color, #497671); outline-offset: 2px; }
+ }
+
.hero-widget__title {
margin: 0 0 var(--space-sm, 8px);
font-size: 2rem;
@@ -140,6 +201,7 @@ export class HeroWidgetComponent implements OnChanges, OnDestroy {
readonly activeIndex = signal(0);
private readonly dataSignal = signal(null);
private autoplayHandle: ReturnType | null = null;
+ private swipeStartX: number | null = null;
readonly allSlides = computed(() => {
const current = this.dataSignal();
@@ -152,6 +214,25 @@ export class HeroWidgetComponent implements OnChanges, OnDestroy {
readonly activeSlide = computed(() => this.allSlides()[this.activeIndex()] ?? null);
+ /** 1 or 2, reusing `layout.columns` (no dedicated "slides per page" field). 2 has nothing to show a second panel with when there's only one slide. */
+ get panelCount(): number {
+ const requested = this.section?.layout?.columns === 2 ? 2 : 1;
+ return requested === 2 && this.allSlides().length > 1 ? 2 : 1;
+ }
+
+ visibleSlides(): HeroSlideData[] {
+ const slides = this.allSlides();
+ if (slides.length === 0) {
+ return [];
+ }
+ if (this.panelCount === 2) {
+ const nextIndex = (this.activeIndex() + 1) % slides.length;
+ return [slides[this.activeIndex()], slides[nextIndex]];
+ }
+ const current = slides[this.activeIndex()];
+ return current ? [current] : [];
+ }
+
ngOnChanges(changes: SimpleChanges): void {
if (changes['data']) {
this.dataSignal.set(this.data);
@@ -169,6 +250,41 @@ export class HeroWidgetComponent implements OnChanges, OnDestroy {
this.setupAutoplay();
}
+ prevSlide(): void {
+ const total = this.allSlides().length;
+ if (total <= 1) {
+ return;
+ }
+ this.goTo((this.activeIndex() - 1 + total) % total);
+ }
+
+ nextSlide(): void {
+ const total = this.allSlides().length;
+ if (total <= 1) {
+ return;
+ }
+ this.goTo((this.activeIndex() + 1) % total);
+ }
+
+ onSwipeStart(event: TouchEvent): void {
+ this.swipeStartX = event.touches[0]?.clientX ?? null;
+ }
+
+ onSwipeEnd(event: TouchEvent): void {
+ const startX = this.swipeStartX;
+ this.swipeStartX = null;
+ if (startX === null) {
+ return;
+ }
+ const endX = event.changedTouches[0]?.clientX ?? startX;
+ const diff = startX - endX;
+ if (diff > SWIPE_THRESHOLD_PX) {
+ this.nextSlide();
+ } else if (diff < -SWIPE_THRESHOLD_PX) {
+ this.prevSlide();
+ }
+ }
+
onCtaClick(): void {
this.ctaClicked.emit();
}
diff --git a/src/app/widgets/ui/product-carousel-widget.component.spec.ts b/src/app/widgets/ui/product-carousel-widget.component.spec.ts
new file mode 100644
index 0000000..4c1b71c
--- /dev/null
+++ b/src/app/widgets/ui/product-carousel-widget.component.spec.ts
@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { SectionConfig } from '../../shared/models/config';
+import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
+import { ProductCarouselWidgetComponent } from './product-carousel-widget.component';
+
+function makeSection(columns?: number): SectionConfig {
+ return { id: 's1', type: 'product-carousel', order: 0, layout: { columns }, widgets: [] } as unknown as SectionConfig;
+}
+
+describe('ProductCarouselWidgetComponent sizing regression (layout.columns)', () => {
+ it('defaults to 4 items per page when layout.columns is unset', () => {
+ const fixture = TestBed.createComponent(ProductCarouselWidgetComponent);
+ fixture.componentInstance.section = makeSection(undefined);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.itemsPerPage()).toBe(4);
+ });
+
+ it('reflects layout.columns when set', () => {
+ const fixture = TestBed.createComponent(ProductCarouselWidgetComponent);
+ fixture.componentInstance.section = makeSection(3);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.itemsPerPage()).toBe(3);
+ });
+
+ it('applies the resolved value as the --items-per-page CSS custom property', () => {
+ const fixture = TestBed.createComponent(ProductCarouselWidgetComponent);
+ fixture.componentInstance.section = makeSection(2);
+ fixture.detectChanges();
+
+ const host = (fixture.nativeElement as HTMLElement).querySelector('.product-carousel-widget') as HTMLElement;
+ expect(host.style.getPropertyValue('--items-per-page').trim()).toBe('2');
+ });
+});
diff --git a/src/app/widgets/ui/product-carousel-widget.component.ts b/src/app/widgets/ui/product-carousel-widget.component.ts
index 353e035..4cdd37e 100644
--- a/src/app/widgets/ui/product-carousel-widget.component.ts
+++ b/src/app/widgets/ui/product-carousel-widget.component.ts
@@ -10,7 +10,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
standalone: true,
imports: [CommonModule, CatalogProductGridComponent, TranslatePipe],
template: `
-