paperless-ngx/src-ui/src/app/components/common/preview-popup/preview-popup.component.html

<div class="preview-popup-container">
  @if (error) {
    <div class="w-100 h-100 position-relative">
      <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
    </div>
  } @else {
    @if (renderAsObject) {
      <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
    } @else {
      @if (requiresPassword) {
        <div class="w-100 h-100 position-relative">
          <svg width="2em" height="2em" fill="currentColor" class="position-absolute top-50 start-50 translate-middle">
            <use xlink:href="assets/bootstrap-icons.svg#file-earmark-lock"/>
          </svg>
        </div>
      }
      @if (!requiresPassword) {
        <pngx-pdf-viewer
          [src]="previewURL"
          [original-size]="false"
          [show-borders]="true"
          [show-all]="true"
          (error)="onError($event)">
        </pngx-pdf-viewer>
      }
    }
  }
</div>