ncoronel
7f4aa81d4b
- Implemented a new immersive store header component with a background image, logo, hero content, and a continuous image carousel. - Integrated the Smooch font for enhanced typography in the header. - Updated the store layout to support the new immersive header type. - Added necessary styles and templates for the immersive header and carousel components. - Enhanced unit tests to cover the new immersive header functionality.
25 lines
934 B
TypeScript
25 lines
934 B
TypeScript
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-continuous-image-carousel',
|
|
templateUrl: './continuous-image-carousel.component.html',
|
|
styleUrl: './continuous-image-carousel.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class ContinuousImageCarouselComponent {
|
|
readonly images = input.required<readonly string[]>();
|
|
readonly ariaLabel = input('Imágenes destacadas');
|
|
|
|
// One full set must cover the viewport before the duplicate set takes over.
|
|
protected readonly trackImages = computed(() => {
|
|
const images = this.images().filter(Boolean);
|
|
if (images.length === 0) return [];
|
|
|
|
return Array.from(
|
|
{ length: Math.max(images.length, 5) },
|
|
(_, index) => images[index % images.length],
|
|
);
|
|
});
|
|
protected readonly durationSeconds = computed(() => Math.max(this.trackImages().length * 4, 16));
|
|
}
|