Ontica/Empiria.Land.Intranet

<div [style.height.%]="100"
  [class.card-floating-container-gt-md]="cardFloatingEffect">

  <div class="card card-border card-shadow"
    [class.card-floating-primary-gt-md]="cardFloatingEffect">

    <div class="card-header card-header-flat">

      <div class="card-title">

        {{ fileViewerData.title ? fileViewerData.title : 'Visor de archivos' }}

        <div class="card-hint" [innerHTML]="getHintText() | safeHtml">

        </div>
      </div>

      <div class="card-header-options">
        <mat-icon *ngIf="showCloseButton" (click)="onClose()">close</mat-icon>
      </div>

    </div>

    <div class="card-body" [empNgSpinnerHost]="spinner" [style.marginTop.px]="4">

      <emp-ng-spinner #spinner [visible]="isLoading"></emp-ng-spinner>

      <ng-container *ngIf="showFileContainer">

        <emp-land-file-viewer-navigator *ngIf="showNavigatorTool"
          [selectedIndex]="selectedFileIndex"
          [pagesTotal]="fileViewerData.fileList.length"
          [showFileTool]="multiple"
          [showZoom]="showZoom"
          [zoom]="imageZoom"
          (zoomChange)="onZoomChanged($event)"
          (selectedIndexChange)="onSelectedIndexChanged($event)">

        </emp-land-file-viewer-navigator>


        <div class="file-container"
          [class.height-container-single]="!showNavigatorTool"
          [class.height-container-with-navigator]="showNavigatorTool">

          <ng-container *ngFor="let file of fileViewerData.fileList">

            <ng-container *ngIf="!file.type.includes('image') && file === selectedFile">

              <object [data]="file.url | safeUrl" type="{{file.type}}" class="object-file"
                [style.width.%]="100"
                [style.height.%]="100"
                (load)="onLoad()"
                (error)="onFileError(file)">

              </object>

              <div class="text-not-found" *ngIf="file.hasError">
                Error al cargar el archivo.
              </div>

            </ng-container>


            <ng-container *ngIf="file.type.includes('image') && file === this.selectedFile">

              <div #imageContainer class="image-container">

                  <img #imageFile class="image-file" *ngIf="isImageModeContainerSize"
                    cdkDrag cdkDragBoundary=".image-file"
                    [style.width.%]="imageZoom"
                    [src]="file.url | safeUrl"
                    (load)="onLoad()"
                    (error)="onFileError(file)">

                  <img #imageFile class="image-file" *ngIf="isImageModeOriginalSize"
                    [style.width.px]="imageWidthZoomed"
                    [src]="file.url | safeUrl"
                    (load)="onLoad()"
                    (error)="onFileError(file)">

                  <div class="text-not-found" *ngIf="file.hasError">
                    Error al cargar la imagen.
                  </div>

              </div>

            </ng-container>

          </ng-container>

        </div>

      </ng-container>

    </div>

  </div>

</div>