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

src/app/shared/components/quantity-selector/quantity-selector.component.html

@@ -1,4 +1,4 @@
-<div class="quantity-selector" aria-label="Selector de cantidad">
+<div class="quantity-selector" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
   <button
     type="button"
     class="quantity-selector__button"

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -44,4 +44,29 @@
     color: #6f6f6f;
     user-select: none;
   }
+
+  &--small {
+    min-height: 18px;
+    border-radius: 0px;
+    border: 1px solid #cfcfcf;
+    background: #ffffff;
+
+    .quantity-selector__button {
+      width: 18px;
+      height: 18px;
+      font-size: 10px;
+      background: #ffffff;
+      color: #666666;
+
+      &:not(:disabled):hover {
+        background-color: #f0f0f0;
+      }
+    }
+
+    .quantity-selector__value {
+      min-width: 18px;
+      font-size: 10px;
+      color: #666666;
+    }
+  }
 }

src/app/shared/components/quantity-selector/quantity-selector.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
 
 @Component({
   selector: 'app-quantity-selector',
@@ -9,27 +9,25 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class QuantitySelectorComponent {
-  readonly quantity = input<number>(1);
+  readonly quantity = model<number>(1);
   readonly min = input<number>(1);
   readonly max = input<number>(100);
+  readonly size = input<'small' | 'medium'>('medium');
 
   readonly increase = output<void>();
   readonly decrease = output<void>();
-  readonly quantityChange = output<number>();
 
   protected onDecrease(): void {
     if (this.quantity() > this.min()) {
-      const newValue = this.quantity() - 1;
+      this.quantity.set(this.quantity() - 1);
       this.decrease.emit();
-      this.quantityChange.emit(newValue);
     }
   }
 
   protected onIncrease(): void {
     if (this.quantity() < this.max()) {
-      const newValue = this.quantity() + 1;
+      this.quantity.set(this.quantity() + 1);
       this.increase.emit();
-      this.quantityChange.emit(newValue);
     }
   }
 }