All files / src/app/shared/components/filter/filter-text filter-text.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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ul class="filter-list" [id]="filterElement.id">
  @for (facet of getFacets(); track facet.name) {
  <li class="filter-item filter-layer{{ facet.level }}" [ngClass]="{ 'filter-selected': facet.selected }">
    <!-- selected -->
    @if (facet.selected) {
    <button
      type="button"
      class="btn btn-link btn-link-action link-decoration-hover"
      (click)="filter(facet)"
      [attr.data-testing-id]="'filter-link-' + (facet.name | ishSanitize)"
      aria-current="true"
    >
      <span class="filter-item-name"> {{ facet.displayName }} </span>
      <span class="count"> ({{ facet.count }}) </span>
      @if (filterElement.displayType === 'text_clear') {
      <i class="bi bi-x-lg float-end filter-clear"></i>
      }
    </button>
    <!-- not selected -->
    } @else {
    <button
      type="button"
      class="filter-item-name btn btn-link btn-link-action link-decoration-hover"
      (click)="filter(facet)"
      [attr.data-testing-id]="'filter-link-' + (facet.name | ishSanitize)"
    >
      {{ facet.displayName }}{{ facet.level === maxLevel ? ' (' + facet.count + ')' : '' }}
    </button>
    }
  </li>
  }
  <!-- show all/less -->
  @if (filterElement.limitCount !== -1 && facets.length > filterElement.limitCount) {
  <li class="filter-item">
    <button
      type="button"
      class="btn btn-link btn-link-action"
      (click)="showAll = !showAll"
      [attr.aria-label]="
        showAll
          ? ('search.filter.show_less.link.aria_label' | translate : { filterGroupName: filterElement.name })
          : ('search.filter.show_all.link.aria_label' | translate : { filterGroupName: filterElement.name })
      "
    >
      {{ (showAll ? 'search.filter.show_less.link' : 'search.filter.show_all.link') | translate }}
    </button>
  </li>
  }
</ul>