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
54
55
56
57
58
59
60
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!-- desktop: display enhanced select boxes with color codes or swatch images with labels -->
@if ((deviceType$ | async) === 'desktop') {
  <div ngbDropdown>
    <button class="btn variation-select" ngbDropdownToggle type="button" [id]="uuid + group.id">
      @for (option of group.options; track option.value) {
        @if (option.active) {
          <ng-container *ngTemplateOutlet="optionTemplate; context: { group, option }" />
        }
      }
    </button>
    <div class="variation-options" ngbDropdownMenu [attr.aria-labelledby]="uuid + group.id + 'label'">
      @for (option of group.options; track option.value) {
        @if (!option.alternativeCombination || multipleOptions) {
          <button
            ngbDropdownItem
            type="button"
            [attr.data-testing-id]="group.id + '-' + option.value"
            [value]="option.value"
            (click)="optionChange(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 class="btn btn-link btn-link-action" type="button" (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"
      [ngClass]="{ 'light-color': option.label.toLowerCase() === 'white' }"
      [ngStyle]="{ 'background-color': '#' + option.metaData }"
    ></span>
  }
  @if (group.attributeType === 'defaultAndSwatchImage') {
    <img class="image-swatch" alt="{{ option.label }}" [src]="option.metaData" />
  }
  <span class="label" [ngClass]="{ selected: option.active }"
    >{{ option.label }}
    @if (option.alternativeCombination) {
      -
      {{ 'product.available_in_different_configuration' | translate }}
    }
  </span>
</ng-template>