Enhancement: Improved popup preview, respect embedded viewer, error handling (#4947)

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -56,7 +56,7 @@
               </svg>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
             </a>
             <ng-template #previewContent>
-              <object [data]="previewUrl | safeUrl" class="preview" width="100%"></object>
+              <pngx-preview-popup [document]="document"></pngx-preview-popup>
             </ng-template>
             <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
               <svg class="sidebaricon" fill="currentColor" class="sidebaricon">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -19,6 +19,7 @@ import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentCardLargeComponent } from './document-card-large.component'
 import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 const doc = {
   id: 10,
@@ -50,6 +51,7 @@ describe('DocumentCardLargeComponent', () => {
         IfPermissionsDirective,
         SafeUrlPipe,
         IsNumberPipe,
+        PreviewPopupComponent,
       ],
       providers: [DatePipe],
       imports: [

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -15,10 +15,7 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
 @Component({
   selector: 'pngx-document-card-large',
   templateUrl: './document-card-large.component.html',
-  styleUrls: [
-    './document-card-large.component.scss',
-    '../popover-preview/popover-preview.scss',
-  ],
+  styleUrls: ['./document-card-large.component.scss'],
 })
 export class DocumentCardLargeComponent extends ComponentWithPermissions {
   constructor(