document-viewer.component.html

<div class="example-loading-shade" *ngIf="loading">
    <mat-progress-spinner [mode]="loadingInfo.mode" [value]="loadingInfo.percent"></mat-progress-spinner>
    <div style="padding-top: 10px;">{{loadingInfo.message}}</div>
</div>
<div *ngIf="file.content === null && !loading" class="view-doc-container" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
    <i class="fa fa-file-upload upload-icon"></i><br />
    Glisser-déposer<br />ou
    <div style="display: flex;">
        <button mat-button class="button-form-primary-alt" [matMenuTriggerFor]="menu"
            style="margin-right:20px;align-items: center;justify-content: center;text-align: center;display: flex;">
            <span class="menu-label">
                Choisir un modèle
            </span>
            <i class="fa fa-chevron-down menu-icon"></i>
        </button>
        <mat-menu #menu="matMenu" [class]="'menuForm'">
            <button mat-menu-item>Modèle 1</button>
            <button mat-menu-item>Modèle 2</button>
        </mat-menu>
        <button mat-button (click)="docToUpload.click()" class="button-form-primary-alt"
            style="align-items: center;justify-content: center;text-align: center;display: flex;">Choisissez
            votre fichier</button>
    </div>
</div>
<input type="file" #docToUpload name="files[]" (change)="uploadTrigger($event)" style="display:none;">
<div style="display: block;width:100%;" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
    <div *ngIf="!loading" class="viewer-tools">
        <button *ngIf="editMode" mat-icon-button (click)="docToUpload.click()" [matTooltip]="lang.uploadAnOtherFile">
            <mat-icon class="fa fa-file-upload"></mat-icon>
        </button>
        <button mat-icon-button (click)="downloadOriginalFile()" [matTooltip]="lang.downloadOriginalFile">
            <mat-icon class="fa fa-download"></mat-icon>
        </button>
        <!--<button mat-icon-button (click)="printPdf()" matTooltip="Imprimer le pdf">
            <mat-icon class="fa fa-print"></mat-icon>
        </button>-->
        <button *ngIf="editMode" mat-icon-button (click)="cleanFile()" [matTooltip]="lang.removeFile">
            <mat-icon class="fa fa-trash" color="warn"></mat-icon>
        </button>
    </div>
    <pdf-viewer *ngIf="file.src!==null" [src]="file.src" [render-text]="true" [autoresize]="true"
        [original-size]="false" [show-all]="true" (error)="onError($event)" style="width:100%;"></pdf-viewer>
</div>
<div *ngIf="file.content !== null && noConvertedFound" class="no-doc-container" appUploadFileDragDrop (onFileDropped)="dndUploadFile($event)">
    <div class="loaded-file"><i class="fa fa-file"></i>&nbsp;<a (click)="docToUpload.click()">{{file.name}}</a>&nbsp;<b>{{lang.loaded}}</b></div>

    <div class="no-view"><i class="far fa-eye-slash no-view-icon"></i><br />{{lang.noAvailablePreview}}</div>
    
 </div>