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
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div *ngIf="visible$ | async" class="add-to-cart">
  <button
    type="submit"
    name="addProduct"
    class="btn"
    [ngClass]="cssClass"
    [class.btn-primary]="!displayIcon"
    [disabled]="buttonDisabled$ | async"
    [title]="displayIcon ? (translationKey$ | async | translate) : ''"
    [tabindex]="ariaHidden ? -1 : 0"
    [attr.aria-hidden]="ariaHidden"
    (click)="addToBasket()"
    data-testing-id="addToCartButton"
  >
    <ng-container *ngIf="(displaySpinner$ | async) !== true; else spinning">
      <!-- Add to Cart button -->
      <ng-container *ngIf="displayIcon; else defaultButton">
        <fa-icon [icon]="['fas', 'shopping-cart']" />
      </ng-container>
 
      <ng-template #defaultButton>{{ translationKey$ | async | translate }}</ng-template>
    </ng-container>
    <!-- button with spinning animation after Add to Cart -->
    <ng-template #spinning>
      <fa-icon [icon]="['fas', 'spinner']" [spin]="true" [ngClass]="{ 'pe-3': !displayIcon }" />
      <span *ngIf="!displayIcon">{{ 'common.button.spinning.label' | translate }}</span>
    </ng-template>
  </button>
</div>