opt-cc/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

<div class="scroll-btn"
     *ngIf="isLeftScrollVisible"
     (mouseenter)="setRepeater(-10)"
     (mouseleave)="clearRepeater()">
  <mat-icon svgIcon="chevron-left"></mat-icon>
</div>

<div class="campaign-horizontal-list" #horizontalList>
  <div class="campaign-entry"
       [ngClass]="{active : selectedCampaignId === 'all'}"
       (click)="select({_id:'all'})">
    {{'stats.campaign.title.all.time.overview' | translate}}
  </div>
  <div class="campaign-entry"
       *ngFor="let campaign of campaigns"
       [ngClass]="{active : campaign._id === selectedCampaignId}"
       (click)="select(campaign)">
    {{campaign.title}}
    <span style="display:inline-block;"
          *ngIf="loginService.hasPermission(3)">
      <button mat-icon-button
              [matMenuTriggerFor]="menu"
              (click)="$event.stopPropagation()"
              style="height: 20px; line-height: 20px;">
        <mat-icon svgIcon="more-vert"></mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="edit(campaign)">
          <mat-icon svgIcon="edit"></mat-icon>
          <span>{{'stats.campaign.manage.edit' | translate}}</span>
        </button>
        <button mat-menu-item (click)="delete(campaign)">
          <mat-icon svgIcon="delete"></mat-icon>
          <span>{{'stats.campaign.manage.delete' | translate}}</span>
        </button>
      </mat-menu>
    </span>
  </div>
</div>

<div class="scroll-btn scroll-btn-right"
     *ngIf="isRightScrollVisible"
     (mouseenter)="setRepeater(10)"
     (mouseleave)="clearRepeater()">
  <mat-icon svgIcon="chevron-right"></mat-icon>
</div>