feat: add labels to ticket selector columns

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html

@@ -20,6 +20,17 @@
     <span class="ticket-selector__label">Seleccioná Entrada/s:</span>
 
     <div class="ticket-selector__rows">
+      @if (attributes().length > 0) {
+        <div class="ticket-selector__columns" aria-hidden="true">
+          <div class="ticket-selector__column-labels">
+            @for (attribute of attributes(); track attribute.key) {
+              <span class="ticket-selector__column-label">{{ attribute.label }}</span>
+            }
+          </div>
+          <span class="ticket-selector__action-spacer"></span>
+        </div>
+      }
+
       @for (row of rows(); track row.id) {
         <div class="ticket-selector__row">
           <div class="ticket-selector__row-content">

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss

@@ -57,6 +57,30 @@
     gap: 0.5rem;
   }
 
+  &__columns {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: 0.5rem;
+  }
+
+  &__column-labels {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(120px, 1fr));
+    gap: 0.5rem;
+  }
+
+  &__column-label {
+    color: #666;
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  &__action-spacer {
+    width: 38px;
+  }
+
   &__row {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -160,6 +184,10 @@
       grid-template-columns: 1fr;
     }
 
+    &__columns {
+      display: none;
+    }
+
     &__map {
       margin-top: 2rem;
     }

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.spec.ts

@@ -209,6 +209,23 @@ describe('ProductTicketSelectorComponent', () => {
     expect(removeButton?.classList.contains('icon-btn--bordered')).toBe(true);
   });
 
+  it('shows one header row with the label of every selector', async () => {
+    const { fixture } = await createComponent({
+      maps: [mapResponse([variant(401, 'general', 'A', '1', '1')])],
+    });
+
+    const headerRows = fixture.nativeElement.querySelectorAll('.ticket-selector__columns');
+    const labels = fixture.nativeElement.querySelectorAll('.ticket-selector__column-label');
+
+    expect(headerRows).toHaveLength(1);
+    expect([...labels].map((label: Element) => label.textContent?.trim())).toEqual([
+      'Tipo',
+      'Sector',
+      'Fila',
+      'Asiento',
+    ]);
+  });
+
   it('clears only the seat after a stock conflict when the row still has alternatives', async () => {
     const failed = variant(401, 'general', 'A', '1', '1');
     const alternative = variant(402, 'general', 'A', '1', '2');

src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts

@@ -71,7 +71,7 @@ export class ProductTicketSelectorComponent {
   private readonly viewReady = signal(false);
   private readonly mapReady = signal(false);
   private readonly variants = signal<CatalogFeaturedItemVariant[]>([]);
-  private readonly attributes = signal<VariantAttribute[]>([]);
+  protected readonly attributes = signal<VariantAttribute[]>([]);
   private mapRequest: Subscription | null = null;
 
   readonly productId = input.required<number>();