Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 83 84 85 | 8x | @if (visible$ | async) {
<div class="quantity-input" [ngClass]="{ 'has-error': hasQuantityError$ | async }">
@switch (type) {
@case ('select') {
<select
class="form-control"
data-testing-id="quantity"
[attr.aria-label]="'product.quantity.aria_label' | translate"
[id]="elementId"
(change)="change($event.target)"
>
@for (opt of selectValues$ | async; track opt) {
<option [selected]="opt === (quantity$ | async)" [value]="opt">
{{ opt }}
</option>
}
</select>
}
@case ('input') {
<input
class="form-control"
data-testing-id="quantity"
pattern="[0-9]*"
type="number"
[attr.aria-describedby]="ariaDescribedByIds$ | async"
[attr.aria-invalid]="(hasQuantityError$ | async) ? 'true' : undefined"
[attr.aria-label]="'product.quantity.aria_label' | translate"
[id]="elementId"
[max]="max$ | async"
[min]="min$ | async"
[step]="step$ | async"
[value]="quantity$ | async"
(change)="change($event.target)"
(keyup)="change($event.target)"
/>
}
@default {
<div class="counter-input">
<button
class="btn btn-link decrease-button"
tabindex="-1"
translate
type="button"
[attr.data-testing-id]="'decrease-quantity-' + elementId"
[disabled]="cannotDecrease$ | async"
(click)="decrease()"
>
product.quantity.decrease.text
</button>
<button
class="btn btn-link increase-button"
tabindex="-1"
translate
type="button"
[attr.data-testing-id]="'increase-quantity-' + elementId"
[disabled]="cannotIncrease$ | async"
(click)="increase()"
>
product.quantity.increase.text
</button>
<input
class="form-control text-center"
data-testing-id="quantity"
pattern="[0-9]*"
type="number"
[attr.aria-describedby]="ariaDescribedByIds$ | async"
[attr.aria-invalid]="(hasQuantityError$ | async) ? 'true' : undefined"
[attr.aria-label]="'product.quantity.aria_label' | translate"
[id]="elementId"
[max]="max$ | async"
[min]="min$ | async"
[step]="step$ | async"
[value]="quantity$ | async"
(change)="change($event.target)"
(keyup)="change($event.target)"
/>
</div>
}
}
@if (hasQuantityError$ | async) {
<small class="validation-message" [id]="elementId + '-validation-error'">{{ quantityError$ | async }}</small>
}
</div>
}
|