feat(product-row-card): update variant selection logic to default to first variant if none selected

src/app/shared/components/product-row-card/product-row-card.component.html

@@ -30,7 +30,7 @@
       @if (variants().length > 0) {
         <select class="form-select product-row-card__select" [(ngModel)]="selectedVariant">
           @for (variant of variants(); track variant.value) {
-            <option [value]="variant.value">{{ variant.label }}</option>
+            <option [ngValue]="variant.value">{{ variant.label }}</option>
           }
         </select>
       }

src/app/shared/components/product-row-card/product-row-card.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, input, output, model } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, model } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -27,6 +27,18 @@ export class ProductRowCardComponent {
   readonly quantity = model<number>(1);
   readonly selectedVariant = model<any>(null);
 
+  private readonly selectFirstVariant = effect(() => {
+    const variants = this.variants();
+    const selectedVariant = this.selectedVariant();
+
+    if (
+      variants.length > 0 &&
+      !variants.some((variant) => Object.is(variant.value, selectedVariant))
+    ) {
+      this.selectedVariant.set(variants[0].value);
+    }
+  });
+
   // Interactive events
   readonly buy = output<void>();
   readonly addToCart = output<{ quantity: number; variant: any }>();