feat(carousel): introduce new catalog group layout options and update related components for enhanced product display

src/app/shared/components/product-list/product-list.component.html

@@ -3,7 +3,7 @@
   [class.product-list--row]="effectiveLayout() === 'row'"
   [class.product-list--column]="effectiveLayout() !== 'row'"
 >
-  @for (item of items().data; track item.id; let index = $index) {
+  @for (item of itemData(); track item.id; let index = $index) {
     <div class="product-list__item">
       @switch (effectiveLayout()) {
         @case ('row') {
@@ -39,13 +39,15 @@
   }
 </div>
 
-@if (items().meta.last_page > 1) {
-  <div class="product-list__paginator d-flex justify-content-center">
-    <app-paginator
-      [page]="items().meta.current_page"
-      [totalPages]="items().meta.last_page"
-      [disabled]="loading()"
-      (pageChange)="pageChange.emit($event)"
-    />
-  </div>
+@if (pagination(); as paginatedItems) {
+  @if (paginatedItems.meta.last_page > 1) {
+    <div class="product-list__paginator d-flex justify-content-center">
+      <app-paginator
+        [page]="paginatedItems.meta.current_page"
+        [totalPages]="paginatedItems.meta.last_page"
+        [disabled]="loading()"
+        (pageChange)="pageChange.emit($event)"
+      />
+    </div>
+  }
 }

src/app/shared/components/product-list/product-list.component.spec.ts

@@ -3,6 +3,7 @@ import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { ApiPaginatedResponse } from '../../../core/services/api-paginated-response.interface';
+import { CatalogFeaturedItems } from '../../../core/services/catalog/catalog.interface';
 import { ProductListComponent, ProductListItem, ProductListLayout } from './product-list.component';
 
 describe('ProductListComponent', () => {
@@ -38,11 +39,14 @@ describe('ProductListComponent', () => {
     TestBed.resetTestingModule();
   });
 
-  async function render(layout: ProductListLayout) {
+  async function render(
+    layout: ProductListLayout,
+    productItems: CatalogFeaturedItems = paginatedItems(),
+  ) {
     await TestBed.configureTestingModule({ imports: [ProductListComponent] }).compileComponents();
     const fixture = TestBed.createComponent(ProductListComponent);
     fixture.componentRef.setInput('layout', layout);
-    fixture.componentRef.setInput('items', paginatedItems());
+    fixture.componentRef.setInput('items', productItems);
     fixture.detectChanges();
 
     return fixture;
@@ -128,4 +132,12 @@ describe('ProductListComponent', () => {
 
     expect(pageChangeSpy).toHaveBeenCalledWith(2);
   });
+
+  it('renders plain items without pagination', async () => {
+    const fixture = await render('row', items);
+    const element = fixture.nativeElement as HTMLElement;
+
+    expect(element.querySelectorAll('app-product-row-card')).toHaveLength(2);
+    expect(element.querySelector('app-paginator')).toBeNull();
+  });
 });

src/app/shared/components/product-list/product-list.component.ts

@@ -10,9 +10,9 @@ import {
   signal,
 } from '@angular/core';
 
-import { ApiPaginatedResponse } from '../../../core/services/api-paginated-response.interface';
 import {
   CatalogFeaturedItem,
+  CatalogFeaturedItems,
   CatalogFeaturedItemVariant,
   CatalogProductLayout,
 } from '../../../core/services/catalog/catalog.interface';
@@ -51,7 +51,7 @@ export class ProductListComponent {
   private readonly mobile = signal(false);
 
   readonly layout = input.required<ProductListLayout>();
-  readonly items = input.required<ApiPaginatedResponse<ProductListItem[]>>();
+  readonly items = input.required<CatalogFeaturedItems>();
   readonly loading = input(false);
 
   readonly buy = output<ProductListItem>();
@@ -61,6 +61,16 @@ export class ProductListComponent {
   protected readonly effectiveLayout = computed<ProductListLayout>(() =>
     this.mobile() && this.layout() === 'row' ? 'column_with_cart' : this.layout(),
   );
+  protected readonly itemData = computed(() => {
+    const items = this.items();
+
+    return Array.isArray(items) ? items : items.data;
+  });
+  protected readonly pagination = computed(() => {
+    const items = this.items();
+
+    return Array.isArray(items) ? null : items;
+  });
 
   constructor() {
     afterNextRender(() => {