All files / src/app/shared/components/product/product-add-to-basket product-add-to-basket.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
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (visible$ | async) {
  <div class="add-to-cart">
    <button
      class="btn"
      data-testing-id="addToCartButton"
      name="addProduct"
      type="submit"
      [attr.aria-hidden]="ariaHidden"
      [class.btn-primary]="!displayIcon"
      [disabled]="buttonDisabled$ | async"
      [ngClass]="cssClass"
      [tabindex]="ariaHidden ? -1 : 0"
      [title]="displayIcon ? (translationKey$ | async | translate) : ''"
      (click)="addToBasket()"
    >
      <!-- prettier-ignore -->
      @if ((displaySpinner$ | async) !== true) {
        <!-- Add to Cart button -->
        @if (displayIcon) {
          <i class="bi bi-cart-fill"></i>
        } @else {{{ translationKey$ | async | translate }}}
      }
      @else {
        <!-- button with spinning animation after Add to Cart -->
        <i class="bi bi-arrow-clockwise spin-icon"></i>
        @if (!displayIcon) {
          <span>{{ 'common.button.spinning.label' | translate }}</span>
        }
      }
    </button>
  </div>
}