document.component.html

<div *ngIf="enterApp" class="enterApp" [@enterApp]>
  <mat-icon svgIcon="maarchLogo" class="maarchLogo"></mat-icon>
</div>
<mat-sidenav-container autosize>
  <mat-sidenav #snav mode="over" fixedInViewport="true" [disableClose]="freezeSidenavClose" [style.width.px]="350">
    <app-sidebar [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-sidebar>
  </mat-sidenav>
  <mat-sidenav-content class="mainView">
    <div *ngIf="loadingDoc" style="position: fixed;z-index: 2;display: flex;background: #fffc;width: 100%;height: 100%;justify-content: center;align-items: center;">
      <mat-spinner></mat-spinner>
    </div>
    <header class="header" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose"
      [@slideDown]>
      <article class="header-infos">
        <section class="header-action">
          <button mat-icon-button (click)="this.snav.toggle();">
            <mat-icon fontSet="fas" fontIcon="fa-bars"></mat-icon>
          </button>
        </section>
        <div class="header-info">
          <p class="c-active-color bold" *ngIf="mainDocument.reference">Référence : </p>
          <p class="ellipsis" *ngIf="mainDocument.reference">{{mainDocument.reference}}</p>
          <p class="c-active-color bold" *ngIf="mainDocument.subject">Sujet : </p>
          <p class="ellipsis" *ngIf="mainDocument.subject">{{mainDocument.subject}}</p>
        </div>
        <div class="header-info">
          <p class="c-active-color bold" *ngIf="mainDocument.sender">Émis par : </p>
          <p class="ellipsis" *ngIf="mainDocument.sender">{{mainDocument.sender}} ({{mainDocument.sender_entity}})</p>
          <p class="c-active-color bold" *ngIf="mainDocument.recipient">Pour : </p>
          <p class="ellipsis" *ngIf="mainDocument.recipient">{{mainDocument.recipient}}</p>
        </div>
        <div class="header-info">
          <p class="c-active-color bold" *ngIf="mainDocument.limit_date">Date limite de traitement : </p>
          <p class="ellipsis" *ngIf="mainDocument.limit_date">{{mainDocument.limit_date}} (<b>{{mainDocument.priority}}</b>)</p>
          <p class="c-active-color bold" *ngIf="mainDocument.processingUserDisplay">À signer par : </p>
          <p class="ellipsis" *ngIf="mainDocument.processingUserDisplay">{{mainDocument.processingUserDisplay}}</p>
        </div>
        <section class="header-action">
          <button mat-icon-button [matMenuTriggerFor]="menu">
            <mat-icon fontSet="fas" fontIcon="fa-cog"></mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button [disabled]="checkEmptiness()" mat-menu-item (click)="removeTags();">Tout effacer</button>
            <button [disabled]="checkEmptyNote()" mat-menu-item (click)="undoTag();">Annuler la précedente note</button>
          </mat-menu>
        </section>
      </article>
    </header>
    <article class="article" style="position: fixed;" #article *ngIf="!freezeSidenavClose" [style.left.px]="this.signaturesService.x"
      [style.top.px]="this.signaturesService.y" (panstart)="onPanStart($event)" (panmove)="onPan($event)">
      <button class="btn-previous" [disabled]="disableState" (tap)="prevPage()" *ngIf="pageNum > 1 && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-left fa-3x"></i></button>
      <button class="btn-previous" (tap)="prevDoc()" *ngIf="currentDoc > 0 &&  pageNum === 1 && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-left fa-3x"></i><i class="fas fa-chevron-left fa-3x"></i></button>
      <button class="btn-next" [disabled]="disableState" (tap)="nextPage()" *ngIf="pageNum < totalPages && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-right fa-3x"></i></button>
      <button class="btn-next" (tap)="nextDoc()" *ngIf="pageNum == totalPages && docList.length > currentDoc+1 && !this.signaturesService.annotationMode"><i
          class="fas fa-chevron-right fa-3x"></i><i class="fas fa-chevron-right fa-3x"></i></button>
      <div class="canvas-wrapper" #canvasWrapper>
        <simple-pdf-viewer [ngClass]="{
          'pdf-page-canvas':!signaturesService.renderingDoc,
          'pdf-page-canvas-loading-doc':signaturesService.renderingDoc
        }" #pdfViewer [src]="pdfDataArr" removePageBorders="true" (onLoadComplete)="pdfRendered()"
          (onError)="pdfError($event)"></simple-pdf-viewer>

        <app-document-note-list [ngClass]="{
          'pdf-page-canvas':!signaturesService.renderingDoc,
          'pdf-page-canvas-loading-doc':signaturesService.renderingDoc
        }" *ngIf="currentDoc == 0"></app-document-note-list>
        <div [style.width.px]="signaturesService.workingAreaWidth*signaturesService.scale" (tap)="addAnnotation($event)"
          [style.height.px]="signaturesService.workingAreaHeight*signaturesService.scale" style="position:absolute;left:0;top:0;"></div>
        <app-document-sign-list [ngClass]="{
          'pdf-page-canvas':!signaturesService.renderingDoc,
          'pdf-page-canvas-loading-doc':signaturesService.renderingDoc
        }" [canvas]="canvasWrapper" *ngIf="currentDoc == 0"></app-document-sign-list>

        <app-document-note-pad (triggerEvent)="zoomMinus()" #appDocumentNotePad *ngIf="currentDoc == 0"></app-document-note-pad>

      </div>
      <div class="page-under">
        <div class="page-under-fold"></div>
      </div>
      <section class="page-info" *ngIf="!this.signaturesService.annotationMode && docList[currentDoc]">
        <div class="page-info-doc">Doc {{currentDoc+1}}/{{docList.length}} : {{docList[currentDoc].subject}}</div>
        <div class="page-info-page">page {{ pageNum }} / {{ totalPages }}</div>
      </section>
    </article>
    <footer class="footer" *ngIf="!this.signaturesService.annotationMode && !freezeSidenavClose"
      [@slideUp]>
      <ng-container *ngFor="let action of actionsList;">
        <button [style.color]="action.color" [style.borderColor]="action.color" class="btn" (click)="launchEvent(action)"><i
            class="{{action.logo}} fa-2x"></i>{{action.label}}</button>
      </ng-container>
    </footer>
    <app-drawer></app-drawer>
  </mat-sidenav-content>
  <mat-sidenav #snavRight mode="over" fixedInViewport="true" [style.width.%]="80" position='end' disableClose='true'>
    <app-my-profile [snavLeftComponent]="this.snav" [snavRightComponent]="this.snavRight"></app-my-profile>
  </mat-sidenav>
</mat-sidenav-container>