openaire-library/searchPages/searchUtils/browseStatistic.component.html

     <span class="uk-h6">{{filter.title}}</span>
      <div *ngIf="filter.values.length == 0" class="uk-alert uk-alert-primary" role="alert">No {{filter.title}} statistics found</div>
      <ul *ngIf="filter.values.length > 0 && !viewAll" class="uk-list browseFilters">

        <li *ngFor= "let value of filter.values.slice(0,5)" class= " uk-margin-remove-top"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
          <a class = " filterItem"  [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
          <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
        </li>
        <li *ngIf= " filter.values.length > 5  " class= " uk-margin-remove-top">
          <a href="#modal-{{filter.filterId}}" uk-toggle><span class="uk-text-muted">View more </span><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-right" ratio="1"><polygon points="8 5 13 10 8 15"></polygon></svg>
</span></a>

          <!--
              uk-toggle="target: modal-"
              uk-toggle='{"target": modal-}'>
              uk-toggle target="modal-"
          -->
          <!--span uk-toggle='{"target": modal-}'><span class="uk-text-muted clickable">View more </span><a><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-right" ratio="1"><polygon points="8 5 13 10 8 15"></polygon></svg>
</span></a></span-->
        </li>
      </ul>
      <ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-divider   browseFilters">
        <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
        <a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
          <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
        </li>
        <li *ngIf= " filter.values.length > 5 && viewAll " (click)="viewAll=false;">
          <span  ><span class="uk-text-muted clickable">View less </span><a><span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-up" ratio="1"><polygon points="5 13 10 8 15 13"></polygon></svg></span></a></span>
        </li>
      </ul>


      <!-- This is the modal -->
      <div id="modal-{{filter.filterId}}" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
          <button class="uk-modal-close-default" type="button" uk-close></button>

          <h4 class="tm-article-subtitle">{{filter.title}}</h4>
          <ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line   browseFilters">
            <li *ngFor= "let value of filter.values"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
            <a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
              <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
            </li>
          </ul>
        </div>
      </div>