Ontica/Empiria.Land.Intranet

<div class="navigator
            fx-row-container fx-items-center">

  <div class="navigator-page-selection
              fx-item fx-star fx-items-center">

    <ng-container *ngIf="showFileTool">

      <div class="navigator-page-selection
                  fx-item-none fx-star fx-items-center"
           [style.width.px]="90">
        Ir al archivo:
      </div>

      <emp-ng-select [style.width.px]="100"
        bindValue="value" bindLabel="value" name="indexSelect"
        [(ngModel)]="selectedIndex" [ngModelOptions]="{standalone: true}"
        [items]="pagesList"
        (changes)="selectFileByIndex($event.value)">

      </emp-ng-select>

    </ng-container>

  </div>


  <div class="navigator-arrows
              fx-item-third fx-center fx-items-center">

    <ng-container *ngIf="showFileTool">

      <mat-icon (click)="firstFile()" title="Primer archivo">first_page</mat-icon>

      <mat-icon (click)="previousFile()" title="Archivo anterior">navigate_before</mat-icon>

      <div class="navigator-file-index-selector">
        <strong>{{selectedIndex}}</strong> {{' / ' + pagesTotal}}
      </div>

      <mat-icon (click)="nextFile()" title="Archivo siguiente">navigate_next</mat-icon>

      <mat-icon (click)="lastFile()" title="Último archivo">last_page</mat-icon>

    </ng-container>

  </div>


  <div class="navigator-zoom
              fx-item-third fx-end fx-items-center">

    <ng-container *ngIf="showZoom">

      <div [style.width.px]="50" class="text-align-left">Zoom:</div>

      <mat-slider tickInterval="5"
        [step]="zoomStep" [min]="zoomMin" [max]="zoomMax"
        (change)="onZoomChange($event)">

        <input matSliderThumb [(ngModel)]="zoom">

      </mat-slider>

      <div [style.width.px]="50" class="text-align-right">{{zoom}} %</div>

    </ng-container>

  </div>

</div>