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>
        <mat-accordion class="header-expand">
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                <div>
                  <mat-form-field>
                    <input matInput [value]="mainDocument.reference" title="{{mainDocument.reference}}"
                      placeholder="Référence" disabled>
                  </mat-form-field>

                </div>
                <div>
                  <mat-form-field>
                    <input matInput [value]="mainDocument.description" title="{{mainDocument.description}}"
                      placeholder="Description" disabled>
                  </mat-form-field>
                </div>
                <div>
                    <mat-form-field *ngIf="mainDocument.deadLine != null">
                      <input matInput [value]="mainDocument.deadLine" title="{{mainDocument.deadLine}}"
                        placeholder="Date limite de traitement" disabled>
                    </mat-form-field>
                  </div>
              </mat-panel-title>
            </mat-expansion-panel-header>
            <div class="header-expand-content">
              <mat-form-field>
                <input matInput [value]="mainDocument.title" title="{{mainDocument.title}}" placeholder="Sujet"
                  disabled>
              </mat-form-field>
            </div>
            <div class="header-expand-content">
                <mat-form-field>
                  <input matInput [value]="mainDocument.sender" title="{{mainDocument.sender}}" placeholder="Émis par"
                    disabled>
                </mat-form-field>
              </div>
            <div class="header-expand-content">
              <mat-form-field>
                <input matInput [value]="mainDocument.processingUserDisplay"
                  title="{{mainDocument.processingUserDisplay}}" placeholder="À signer par" disabled>
              </mat-form-field>
            </div>
            <div class="header-expand-content" *ngFor="let data of mainDocument.metadata;">
              <mat-form-field>
                <input matInput [value]="data.value" title="{{data.value}}" placeholder="{{data.label}}" disabled>
              </mat-form-field>
            </div>
          </mat-expansion-panel>
        </mat-accordion>

        <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>
    <ng-container *ngIf="!freezeSidenavClose">
      <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>
    </ng-container>
    <article class="article" style="position: fixed;" #article [style.left.px]="this.signaturesService.x"
      [style.top.px]="this.signaturesService.y" (panstart)="onPanStart($event)" (panmove)="onPan($event)">
      <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].title}}</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 *ngIf="action.allowed" [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>