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
          aria-current="true"
          class="btn btn-link btn-link-action link-decoration-hover"
          type="button"
          [attr.data-testing-id]="'filter-link-' + (facet.name | ishSanitize)"
          (click)="filter(facet)"
        >
          <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
          class="filter-item-name btn btn-link btn-link-action link-decoration-hover"
          type="button"
          [attr.data-testing-id]="'filter-link-' + (facet.name | ishSanitize)"
          (click)="filter(facet)"
        >
          {{ 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
        class="btn btn-link btn-link-action"
        type="button"
        [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 })
        "
        (click)="showAll = !showAll"
      >
        {{ (showAll ? 'search.filter.show_less.link' : 'search.filter.show_all.link') | translate }}
      </button>
    </li>
  }
</ul>