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
81
82
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div *ngIf="visible$ | async" [ngClass]="{ 'has-error': hasQuantityError$ | async }" class="quantity-input">
  <ng-container [ngSwitch]="type">
    <ng-template ngSwitchCase="select">
      <select
        (change)="change($event.target)"
        class="form-control"
        [id]="elementId"
        [attr.aria-label]="'product.quantity.aria_label' | translate"
        data-testing-id="quantity"
      >
        <option *ngFor="let opt of selectValues$ | async" [value]="opt" [selected]="opt === (quantity$ | async)">
          {{ opt }}
        </option>
      </select>
    </ng-template>
    <ng-template ngSwitchCase="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)"
      />
    </ng-template>
    <ng-template ngSwitchDefault>
      <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>
    </ng-template>
  </ng-container>
 
  <small *ngIf="hasQuantityError$ | async" [id]="elementId + '-validation-error'" class="validation-message">{{
    quantityError$ | async
  }}</small>
</div>