All files / src/app/shared/components/product/product-quantity product-quantity.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (visible$ | async) {
<div [ngClass]="{ 'has-error': hasQuantityError$ | async }" class="quantity-input">
  @switch (type) { @case ('select') {
  <select
    (change)="change($event.target)"
    class="form-control"
    [id]="elementId"
    [attr.aria-label]="'product.quantity.aria_label' | translate"
    data-testing-id="quantity"
  >
    @for (opt of selectValues$ | async; track opt) {
    <option [value]="opt" [selected]="opt === (quantity$ | async)">
      {{ opt }}
    </option>
    }
  </select>
  } @case ('input') {
  <input
    class="form-control"
    [id]="elementId"
    data-testing-id="quantity"
    type="number"
    pattern="[0-9]*"
    [value]="quantity$ | async"
    [min]="min$ | async"
    [max]="max$ | async"
    [step]="step$ | async"
    [attr.aria-label]="'product.quantity.aria_label' | translate"
    [attr.aria-invalid]="(hasQuantityError$ | async) ? 'true' : undefined"
    [attr.aria-describedby]="ariaDescribedByIds$ | async"
    (change)="change($event.target)"
    (keyup)="change($event.target)"
  />
  } @default {
  <div class="counter-input">
    <button
      type="button"
      class="btn btn-link decrease-button"
      (click)="decrease()"
      [disabled]="cannotDecrease$ | async"
      [attr.data-testing-id]="'decrease-quantity-' + elementId"
      translate
      tabindex="-1"
    >
      product.quantity.decrease.text
    </button>
    <button
      type="button"
      class="btn btn-link increase-button"
      (click)="increase()"
      [disabled]="cannotIncrease$ | async"
      [attr.data-testing-id]="'increase-quantity-' + elementId"
      translate
      tabindex="-1"
    >
      product.quantity.increase.text
    </button>
    <input
      class="form-control text-center"
      [id]="elementId"
      data-testing-id="quantity"
      type="number"
      pattern="[0-9]*"
      [value]="quantity$ | async"
      [min]="min$ | async"
      [max]="max$ | async"
      [step]="step$ | async"
      (change)="change($event.target)"
      (keyup)="change($event.target)"
      [attr.aria-label]="'product.quantity.aria_label' | translate"
      [attr.aria-invalid]="(hasQuantityError$ | async) ? 'true' : undefined"
      [attr.aria-describedby]="ariaDescribedByIds$ | async"
    />
  </div>
  } } @if (hasQuantityError$ | async) {
  <small [id]="elementId + '-validation-error'" class="validation-message">{{ quantityError$ | async }}</small>
  }
</div>
}