feat: implement quantity selector component for improved cart functionality

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

@@ -0,0 +1,23 @@
+<div class="quantity-selector" aria-label="Selector de cantidad">
+  <button
+    type="button"
+    class="quantity-selector__button"
+    aria-label="Disminuir cantidad"
+    [disabled]="quantity() <= min()"
+    (click)="onDecrease()"
+  >
+    -
+  </button>
+
+  <span class="quantity-selector__value">{{ quantity() }}</span>
+
+  <button
+    type="button"
+    class="quantity-selector__button"
+    aria-label="Aumentar cantidad"
+    [disabled]="quantity() >= max()"
+    (click)="onIncrease()"
+  >
+    +
+  </button>
+</div>

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

@@ -0,0 +1,47 @@
+:host {
+  display: inline-block;
+}
+
+.quantity-selector {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #d8d8d8;
+  border-radius: 6px;
+  overflow: hidden;
+  min-height: 44px;
+  background: #f6f6f6;
+
+  &__button {
+    width: 25px;
+    height: 44px;
+    padding: 0;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1;
+    color: #6f6f6f;
+    background: #f6f6f6;
+    border: 0;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    cursor: pointer;
+
+    &:not(:disabled):hover {
+      background-color: #e9e9e9;
+      color: #333333;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  &__value {
+    min-width: 35px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1;
+    color: #6f6f6f;
+    user-select: none;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+@Component({
+  selector: 'app-quantity-selector',
+  standalone: true,
+  imports: [],
+  templateUrl: './quantity-selector.component.html',
+  styleUrl: './quantity-selector.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QuantitySelectorComponent {
+  readonly quantity = input<number>(1);
+  readonly min = input<number>(1);
+  readonly max = input<number>(100);
+
+  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.decrease.emit();
+      this.quantityChange.emit(newValue);
+    }
+  }
+
+  protected onIncrease(): void {
+    if (this.quantity() < this.max()) {
+      const newValue = this.quantity() + 1;
+      this.increase.emit();
+      this.quantityChange.emit(newValue);
+    }
+  }
+}