54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
||
|
|
import { ProductCardConfig } from '../../shared/models/ui';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-product-carousel-widget',
|
||
|
|
standalone: true,
|
||
|
|
imports: [CommonModule],
|
||
|
|
template: `
|
||
|
|
<section class="product-carousel-widget">
|
||
|
|
@if (title) {
|
||
|
|
<h2>{{ title }}</h2>
|
||
|
|
}
|
||
|
|
|
||
|
|
<div class="product-carousel-widget__grid">
|
||
|
|
@for (item of items; track item.id) {
|
||
|
|
<article class="product-card">
|
||
|
|
<img [src]="item.imageUrl" [alt]="item.title" loading="lazy" />
|
||
|
|
<h3>{{ item.title }}</h3>
|
||
|
|
@if (item.subtitle) {
|
||
|
|
<p>{{ item.subtitle }}</p>
|
||
|
|
}
|
||
|
|
<strong>{{ item.price.amount }} {{ item.price.currency }}</strong>
|
||
|
|
<button type="button" (click)="onProductClick(item)">{{ actionLabel }}</button>
|
||
|
|
</article>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
`,
|
||
|
|
styles: [
|
||
|
|
`
|
||
|
|
.product-carousel-widget { padding: 1rem; }
|
||
|
|
.product-carousel-widget__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
|
||
|
|
.product-card { padding: 0.75rem; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md, 12px); }
|
||
|
|
img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 0.5rem; }
|
||
|
|
h3 { margin: 0 0 0.25rem; font-size: 1rem; }
|
||
|
|
p { margin: 0 0 0.5rem; color: var(--text-secondary, #667a77); }
|
||
|
|
button { margin-top: 0.5rem; border: none; border-radius: 8px; padding: 0.5rem 0.75rem; cursor: pointer; background: var(--primary-color, #497671); color: #fff; }
|
||
|
|
`
|
||
|
|
],
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
||
|
|
})
|
||
|
|
export class ProductCarouselWidgetComponent {
|
||
|
|
@Input() title: string = '';
|
||
|
|
@Input() actionLabel: string = 'Select';
|
||
|
|
@Input() items: ProductCardConfig[] = [];
|
||
|
|
|
||
|
|
@Output() productSelected = new EventEmitter<ProductCardConfig>();
|
||
|
|
|
||
|
|
onProductClick(item: ProductCardConfig): void {
|
||
|
|
this.productSelected.emit(item);
|
||
|
|
}
|
||
|
|
}
|