feat: integrate quantity selector component into cart and product detail pages for enhanced functionality

src/app/shared/components/cart-item/cart-item.component.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
 
 export interface CartItemAttribute {
   label: string;
@@ -8,6 +9,7 @@ export interface CartItemAttribute {
 @Component({
   selector: 'app-cart-item',
   standalone: true,
+  imports: [QuantitySelectorComponent],
   templateUrl: './cart-item.component.html',
   styleUrl: './cart-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -21,6 +23,27 @@ export class CartItemComponent {
   readonly attributes = input<CartItemAttribute[]>([]);
   readonly quantity = input<number>(1);
 
+  readonly quantityChange = output<number>();
+  readonly remove = output<void>();
+  readonly increase = output<void>();
+  readonly decrease = output<void>();
+
+  protected onQuantityChange(newQuantity: number): void {
+    this.quantityChange.emit(newQuantity);
+  }
+
+  protected onRemove(): void {
+    this.remove.emit();
+  }
+
+  protected onIncrease(): void {
+    this.increase.emit();
+  }
+
+  protected onDecrease(): void {
+    this.decrease.emit();
+  }
+
   protected readonly formattedOriginalPrice = computed(() => {
     const price = this.originalPrice();
     return price === null ? null : this.formatCurrency(price);