All files / src/app/shared/components/filter/filter-swatch-images filter-swatch-images.component.ts

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
2x
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
2x
 
 
 
2x
 
 
 
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
import { Facet } from 'ish-core/models/facet/facet.model';
import { Filter } from 'ish-core/models/filter/filter.model';
import { URLFormParams } from 'ish-core/utils/url-form-params';
 
/**
 * The Filter Swatch Images Component displays filter group for colors. The facets of the filter group are presented as swatch images.
 *
 * @example
 * <ish-filter-dropdown
 *               [filterElement]="element"
 *               (applyFilter)="applyFilter($event)"
 * </ish-filter-dropdown>
 */
@Component({
  selector: 'ish-filter-swatch-images',
  templateUrl: './filter-swatch-images.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilterSwatchImagesComponent {
  /**
   * The filter group.
   */
  @Input({ required: true }) filterElement: Filter;
  @Output() applyFilter: EventEmitter<{ searchParameter: URLFormParams }> = new EventEmitter();
 
  /**
   * Applies a facet of the filter group and shows the new filtered result.
   */
  filter(facet: Facet) {
    this.applyFilter.emit({ searchParameter: facet.searchParameter });
  }
 
  getBackgroundColor(facet: Facet) {
    return facet.mappedType === 'colorcode' ? facet.mappedValue : undefined;
  }
 
  getBackgroundImage(facet: Facet) {
    return facet.mappedType === 'image' ? facet.mappedValue : undefined;
  }
}