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
51
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ul class="filter-list" [id]="filterElement.id">
  <ng-container *ngFor="let facet of getFacets()">
    <li class="filter-item filter-layer{{ facet.level }}" [ngClass]="{ 'filter-selected': facet.selected }">
      <!-- selected -->
      <ng-container *ngIf="facet.selected; else notSelectedBox">
        <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>
          <ng-container *ngIf="filterElement.displayType === 'text_clear'">
            <fa-icon [icon]="['fas', 'times']" class="float-end filter-clear" />
          </ng-container>
        </button>
      </ng-container>
 
      <!-- not selected -->
      <ng-template #notSelectedBox>
        <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 }}
          <ng-container *ngIf="facet.level === maxLevel"> ({{ facet.count }}) </ng-container>
        </button>
      </ng-template>
    </li>
  </ng-container>
  <!-- show all/less -->
  <li class="filter-item" *ngIf="filterElement.limitCount !== -1 && facets.length > filterElement.limitCount">
    <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>