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

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

@@ -33,11 +33,15 @@
       }
     </div>
 
-    <div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions" aria-hidden="true">
-      <button class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-btn" type="button">-</button>
-      <span class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-value" >{{ quantity() }}</span>
-      <button class="border d-inline-flex align-items-center justify-content-center bg-white rounded-0 cart-item-qty-btn" type="button">+</button>
-      <button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button">
+    <div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions">
+      <app-quantity-selector
+        size="small"
+        [quantity]="quantity()"
+        (quantityChange)="onQuantityChange($event)"
+        (increase)="onIncrease()"
+        (decrease)="onDecrease()"
+      />
+      <button class="border-0 bg-transparent d-inline-flex align-items-center justify-content-center cart-item-remove-btn" type="button" (click)="onRemove()">
         <i class="fa-solid fa-trash"></i>
       </button>
     </div>

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

@@ -92,19 +92,8 @@
   gap: 0.125rem;
 }
 
-.cart-item-qty-btn,
-.cart-item-qty-value {
-  width: 18px;
-  height: 18px;
-  border-color: #cfcfcf !important;
-  color: #666666;
-  font-size: 10px;
-  line-height: 1;
-}
 
-.cart-item-qty-btn {
-  padding: 0;
-}
+
 
 .cart-item-remove-btn {
   width: 18px;

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);