All files / src/app/shared/components/product/product-variation-select-enhanced product-variation-select-enhanced.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
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!-- desktop: display enhanced select boxes with color codes or swatch images with labels -->
@if ((deviceType$ | async) === 'desktop') {
<div ngbDropdown>
  <button ngbDropdownToggle type="button" class="btn variation-select" [id]="uuid + group.id">
    @for (option of group.options; track option.value) { @if (option.active) {
    <ng-container *ngTemplateOutlet="optionTemplate; context: { group, option }" />
    } }
  </button>
  <div ngbDropdownMenu class="variation-options" [attr.aria-labelledby]="uuid + group.id + 'label'">
    @for (option of group.options; track option.value) { @if (!option.alternativeCombination || multipleOptions) {
    <button
      ngbDropdownItem
      type="button"
      [value]="option.value"
      (click)="optionChange(group.id, option.value)"
      [attr.data-testing-id]="group.id + '-' + option.value"
    >
      <ng-container *ngTemplateOutlet="optionTemplate; context: { group, option }" />
    </button>
    } }
  </div>
</div>
} @else {
<!-- mobile/tablet: display a list of color codes or swatch images with labels -->
<div class="mobile-variation-select">
  @for (option of group.options; track option.value) {
  <div class="mobile-variation-option">
    <button type="button" class="btn btn-link btn-link-action" (click)="optionChange(group.id, option.value)">
      <ng-container *ngTemplateOutlet="optionTemplate; context: { group, option }" />
    </button>
  </div>
  }
</div>
}
 
<!-- reusable template to render the individual options as color code or image swatch with label -->
<ng-template #optionTemplate let-group="group" let-option="option">
  @if (group.attributeType === 'defaultAndColorCode') {
  <span
    class="color-code"
    [ngStyle]="{ 'background-color': '#' + option.metaData }"
    [ngClass]="{ 'light-color': option.label.toLowerCase() === 'white' }"
  ></span>
  } @if (group.attributeType === 'defaultAndSwatchImage') {
  <img class="image-swatch" [src]="option.metaData" alt="{{ option.label }}" />
  }
  <span class="label" [ngClass]="{ selected: option.active }"
    >{{ option.label }} @if (option.alternativeCombination) { -
    {{ 'product.available_in_different_configuration' | translate }}
    }
  </span>
</ng-template>