tailjng 0.0.37 → 0.0.39

package/cli/settings/components-list.js

@@ -50,10 +50,14 @@ function getComponentList() {
             path: "src/lib/components/progress-bar",
             dependencies: [],
         },
-        'image-viewer': {
-            path: "src/lib/components/image/image-viewer",
+        'viewer-image': {
+            path: "src/lib/components/viewer/viewer-image",
             dependencies: ["button"],
         },
+        'viewer-pdf': {
+            path: "src/lib/components/viewer/viewer-pdf",
+            dependencies: [],
+        },
         'dialog': {
             path: "src/lib/components/dialog",
             dependencies: [],
@@ -114,10 +118,10 @@ function getComponentList() {
             path: "src/lib/components/menu/menu-options-table",
             dependencies: ["button"],
         },
-        
-        
-        
-        
+
+
+
+
         'table-crud-complete': {
             path: "src/lib/components/table/table-crud-complete",
             dependencies: ["button", "paginator-complete", "filter-complete", "checkbox-input", "menu-options-table", "dialog", "image-viewer", "select-dropdown", "input"],

package/cli/settings/header-generator.js

@@ -27,7 +27,7 @@ Authors:
 License:
   This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
 
-Version: 0.0.37
+Version: 0.0.39
 Creation Date: 2025-01-04
 ===============================================`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/src/lib/components/card/card-crud-complete/complete-crud-card.component.html

@@ -3,18 +3,18 @@
   @if (isSearch) {
     <JFilter
       [params]="params"
-      [columns]="columns" 
-      [endpoint]="endpoint" 
-      [mainEndpoint]="mainEndpoint" 
-      [data]="data" 
-      [(searchQuery)]="searchQuery" 
-      (search)="onSearch()" 
+      [columns]="columns"
+      [endpoint]="endpoint"
+      [mainEndpoint]="mainEndpoint"
+      [data]="data"
+      [(searchQuery)]="searchQuery"
+      (search)="onSearch()"
       [searchPlaceholder]="searchPlaceholder"
       [(itemsPerPage)]="itemsPerPage"
-      [itemsPerPageOptions]="itemsPerPageOptions" 
+      [itemsPerPageOptions]="itemsPerPageOptions"
       (onItemsPerPageChangeEvent)="onItemsPerPageChange()"
-      [isLoadingSearch]="isLoading('search')" 
-      [isLoadingPerPage]="isLoading('itemsPerPage')" 
+      [isLoadingSearch]="isLoading('search')"
+      [isLoadingPerPage]="isLoading('itemsPerPage')"
       [isLoadingAditionalButtons]="loadingStates.aditionalButtons"
       (clearFilters)="onClearFilters($event)"
       [filtersButton]="filtersButton"
@@ -33,12 +33,12 @@
   @if (isPaginator) {
     <div class="my-4">
       <JCompletePaginator
-        [currentPage]="currentPage" 
-        [itemsPerPageOptions]="itemsPerPageOptions" 
+        [currentPage]="currentPage"
+        [itemsPerPageOptions]="itemsPerPageOptions"
         [itemsPerPage]="itemsPerPage"
-        [totalItems]="totalItems" 
-        [pages]="pages" 
-        (pageChange)="handlePageChange($event)" 
+        [totalItems]="totalItems"
+        [pages]="pages"
+        (pageChange)="handlePageChange($event)"
         [isLoading]="isLoading('pagination')"
       />
     </div>
@@ -57,25 +57,25 @@
       <div class="j-crud-card grid grid-cols-4 items-start max-[1300px]:grid-cols-3 max-[1150px]:grid-cols-2 max-[800px]:grid-cols-1 gap-4 my-4">
         @for (item of displayData; track item?.id) {
           <div class="flex flex-col gap-3 rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground shadow-sm hover:shadow-lg hover:border-primary/50 hover:dark:border-primary transition-all duration-300">
-            <ng-container 
-              *ngTemplateOutlet="itemTemplate; context: { 
-                $implicit: item, 
-                getValue: getValue.bind(this), 
-                columns: columns, 
-                item: item, 
-                template: getTemplate, 
-                toggleExpanded: toggleExpanded.bind(this), 
-                isExpanded: isExpanded.bind(this), 
+            <ng-container
+              *ngTemplateOutlet="itemTemplate; context: {
+                $implicit: item,
+                getValue: getValue.bind(this),
+                columns: columns,
+                item: item,
+                template: getTemplate,
+                toggleExpanded: toggleExpanded.bind(this),
+                isExpanded: isExpanded.bind(this),
                 expandData: getExpandData.bind(this),
                 expandTemplate: expandTemplate,
                 isLoadingExpand: isLoadingExpand.bind(this),
-              }" 
+              }"
             />
           </div>
         }
       </div>
-      
-      
+
+
     } @else {
       <div class="j-crud-card w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px]">
         <p>No se ha definido ninguna plantilla personalizada (<code>itemTemplate</code>).</p>
@@ -83,20 +83,21 @@
     }
 
   } @else if (!isLoading('pagination')) {
-    <div class="j-crud-card w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border hover:border-primary/50 hover:dark:border-primary">
-      No hay datos disponibles
+    <div class="j-crud-card w-full flex flex-col gap-3 justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border hover:border-primary/50 hover:dark:border-primary">
+      <lucide-icon [name]="iconsService.icons.info" size="35" class="text-primary"></lucide-icon>
+      <p class="text-black dark:text-white">No hay datos disponibles</p>
     </div>
   }
 
   @if (isPaginator) {
     <div class="my-4">
       <JCompletePaginator
-        [currentPage]="currentPage" 
-        [itemsPerPageOptions]="itemsPerPageOptions" 
+        [currentPage]="currentPage"
+        [itemsPerPageOptions]="itemsPerPageOptions"
         [itemsPerPage]="itemsPerPage"
-        [totalItems]="totalItems" 
-        [pages]="pages" 
-        (pageChange)="handlePageChange($event)" 
+        [totalItems]="totalItems"
+        [pages]="pages"
+        (pageChange)="handlePageChange($event)"
         [isLoading]="isLoading('pagination')"
       />
     </div>

package/src/lib/components/dialog/dialog.component.html

@@ -4,39 +4,47 @@
     @if (overlay) {
       <div class="fixed inset-0 z-[999] bg-black/50"></div>
     }
-  
+
     <!-- Modal -->
     <div class="fixed inset-0 z-[1000] flex pointer-events-none" [ngClass]="getPositionClass()">
-  
-      <div @modalTransition
-           class="pointer-events-auto bg-white dark:bg-foreground rounded-[12px] shadow-lg border-2 border-border dark:border-dark-border"
-           [ngStyle]="getOffsetStyles()"
-           data-draggable-dialog
-      >
-  
+
+    <div @modalTransition
+        class="pointer-events-auto bg-white dark:bg-foreground rounded-[12px] shadow-lg border-2 border-border dark:border-dark-border"
+        [ngStyle]="getOffsetStyles()"
+        [style.width]="getModalWidth()"
+        [style.min-width]="!isFullScreen() ? '200px' : null"
+        [style.min-height]="!isFullScreen() ? '40px' : null"
+        data-draggable-dialog
+    >
         <!-- Header draggable -->
         @if (draggable) {
-          <div class="flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-move select-none"
-               (mousedown)="$event.stopPropagation(); startDrag($event)">
-            <h3 class="text-[1em] font-semibold text-white leading-none">{{ title }}</h3>
+          <div
+            class="flex items-center p-1 pl-4 pr-4 gap-2 bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border rounded-[10px] font-semibold text-2sm cursor-move select-none"
+            (mousedown)="$event.stopPropagation(); startDrag($event)"
+          >
+            <h3
+              class="flex-1 min-w-0 text-[1em] font-semibold text-white leading-none truncate"
+            >
+              {{ title }}
+            </h3>
 
-            <button 
-              type="button" 
+            <button
+              type="button"
               (click)="$event.stopPropagation(); onClose()"
-              class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer"
+              class="flex-shrink-0 p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer"
             >
               <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
             </button>
-
           </div>
         }
-  
+
+
         <!-- Header normal -->
         @if (!draggable) {
           <div class="flex p-1 pl-4 pr-4 justify-between items-center bg-primary dark:bg-dark-primary border-b border-border dark:border-dark-border  rounded-[10px] font-semibold text-2sm cursor-normal select-none">
             <h3 class="text-[1em] font-semibold text-white leading-none">{{ title }}</h3>
-            <button 
-              type="button" 
+            <button
+              type="button"
               (click)="onClose()"
               class="p-2 rounded-full border border-border dark:border-dark-border text-white hover:bg-dark-background focus:outline-none cursor-pointer"
             >
@@ -47,22 +55,19 @@
 
         <!-- Content -->
         <div class="m-2"
-             [ngClass]="{ 'jdialog-full': isFullScreen() }"
-             [ngStyle]="{
-                width: getModalWidth(),
-                height: getModalHeight(),
-                'min-width': !isFullScreen() ? '200px' : null,
-                'min-height': !isFullScreen() ? '40px' : null
-             }"
+            [ngClass]="{ 'jdialog-full': isFullScreen() }"
+            [ngStyle]="{
+                height: getModalHeight()
+            }"
         >
           @if (dialogTemplate) {
             <ng-container [ngTemplateOutlet]="dialogTemplate"></ng-container>
           }
         </div>
-  
+
+
       </div>
 
     </div>
 
   }
-  

package/src/lib/components/dialog/dialog.component.ts

@@ -123,8 +123,8 @@ export class JDialogComponent implements OnChanges {
    * Handles the escape key press event.
    * @param event The keyboard event.
    */
-  @HostListener('document:keydown.escape', ['$event'])
-  handleEscape(event: KeyboardEvent) {
+  @HostListener('document:keydown.escape')
+  handleEscape() {
     if (this.openModal) {
       this.onClose();
     }
@@ -171,7 +171,7 @@ export class JDialogComponent implements OnChanges {
   /**
    * Starts the drag operation.
    * @param event The mouse event.
-   * @returns 
+   * @returns
    */
   startDrag(event: MouseEvent) {
     if (!this.draggable) return;

package/src/lib/components/form/form-sidebar/sidebar-form.component.ts

@@ -1,4 +1,3 @@
-
 import { CommonModule } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, HostListener, Input, Output, TemplateRef } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -38,13 +37,13 @@ export class JSidebarFormComponent {
 
   titleForm: string = 'REGISTRO';
   @Input() typeForm: FormType = 'none';
-  
+
   @Input() checkboxes: DynamicCheckbox[] = [];
   @Input() size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';
   @Input() bgColor: string = 'bg-white dark:bg-foreground';
   @Input() style: { [key: string]: any } = {};
   @Input() isLoading: boolean = false;
-  
+
   constructor(public readonly iconsService: JIconsService) { }
 
   onSubmit() {
@@ -55,8 +54,8 @@ export class JSidebarFormComponent {
     this.closeForm.emit()
   }
 
-  @HostListener('document:keydown.escape', ['$event'])
-  handleEscape(event: KeyboardEvent) {
+  @HostListener('document:keydown.escape')
+  handleEscape() {
     if (this.openForm) {
       this.onClose();
     }

package/src/lib/components/table/table-complete/complete-table.component.html

@@ -47,7 +47,7 @@
       <table class="min-w-full bg-white dark:bg-dark-background rounded">
         <thead class="bg-primary dark:bg-dark-primary text-white dark:text-white select-none h-[50px]">
           <tr>
-            
+
             <!-- Counter column -->
             <th
               class="px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold">
@@ -93,15 +93,15 @@
             <!-- Actions column - Sticky header -->
              @if (isOptions) {
               <th class="!sticky !right-0 bg-primary dark:bg-dark-primary min-w-[50px] px-4 py-2 text-center text-xs font-medium text-white uppercase tracking-wider border-b border-border dark:border-dark-border font-bold shadow-[-4px_0_5px_rgba(0,0,0,0.1)] z-1">
-                
+
                 <span class="text-[10px] opacity-80 border border-border dark:border-dark-border p-2 pl-3 pr-3 rounded-full">Opciones</span>
-                
+
                 <!-- Pseudoelemento para el borde central -->
                 <div class="absolute top-[15px] bottom-[15px] left-0 w-[1px] bg-border dark:bg-dark-border"></div>
 
               </th>
             }
-            
+
           </tr>
         </thead>
         <tbody class="bg-white dark:bg-foreground text-black dark:text-white">
@@ -240,8 +240,9 @@
             <tr>
               <td [attr.colspan]="columns.length + 1"
                   class="px-4 py-8 text-center text-sm text-black dark:text-white">
-                <div class="flex flex-col gap-3 items-center justify-center py-4">
-                  <p>No hay datos disponibles</p>
+                <div class="absolute inset-0 flex flex-col gap-3 items-center justify-center py-4 bg-white/80 dark:bg-foreground/80 backdrop-blur-sm z-501 select-none rounded">
+                  <lucide-icon [name]="iconsService.icons.info" size="35" class="text-primary"></lucide-icon>
+                  <p class="text-black dark:text-white">No hay datos disponibles</p>
                 </div>
               </td>
             </tr>
@@ -250,4 +251,4 @@
       </table>
     </div>
   </div>
-</div>
+</div>

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.html

@@ -545,7 +545,7 @@
              <td [attr.colspan]="getVisibleColumnsCount() + 3"
               class="px-4 py-8 text-center text-sm text-black dark:text-white">
               <div class="flex flex-col gap-3 items-center justify-center py-4">
-                <lucide-icon [name]="iconsService.icons.loading" size="30" class="text-primary animate-spin"></lucide-icon>
+                <lucide-icon [name]="iconsService.icons.info" size="30" class="text-primary"></lucide-icon>
                 <p>No hay datos disponibles</p>
               </div>
             </td>

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.ts

@@ -13,14 +13,14 @@ import { JButtonComponent } from '../../button/button.component';
 import { JInputCheckboxComponent } from '../../checkbox/checkbox-input/input-checkbox.component';
 import { JOptionsTableMenuComponent } from '../../menu/menu-options-table/options-table-menu.component';
 import { JDialogComponent } from '../../dialog/dialog.component';
-import { JViewerImageComponent } from '../../image/image-viewer/viewer-image.component';
 import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
 import { JInputComponent } from '../../input/input/input.component';
+import { JViewerPdfComponent } from '../../viewer/viewer-pdf/pdf-viewer.component';
 
 @Component({
   selector: 'JCompleteCrudTable',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule, JButtonComponent, JInputCheckboxComponent, JOptionsTableMenuComponent, JDialogComponent, JViewerImageComponent, JDropdownSelectComponent, JInputComponent],
+  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule, JButtonComponent, JInputCheckboxComponent, JOptionsTableMenuComponent, JDialogComponent, JViewerPdfComponent, JDropdownSelectComponent, JInputComponent],
   templateUrl: './complete-crud-table.component.html',
   styleUrl: './complete-crud-table.component.scss',
   animations: [
@@ -76,7 +76,7 @@ export class JCompleteCrudTableComponent implements OnInit {
   @Input() optionsType: 'button' | 'dropdown' = 'button';
   @Input() isOptions: boolean = true;
 
-  // Expansion 
+  // Expansion
   expandTemplate?: (row: any) => string;
   expandedRows: Set<any> = new Set();
 
@@ -1049,4 +1049,4 @@ export class JCompleteCrudTableComponent implements OnInit {
 
 
 
-}
+}

package/src/lib/components/{image/image-viewer/viewer-image.component.html → viewer/viewer-image/image-viewer.component.html}

@@ -1,62 +1,65 @@
 <div class="relative w-full h-full" #container>
 
-    <div class="absolute flex flex-col gap-1 z-2" [ngClass]="{ 'top-3 left-3': isFullscreen, 'top-0 left-0': !isFullscreen }">
+    <div class="absolute flex gap-1 z-2" [ngClass]="{ 'top-3 left-3': isFullscreen, 'top-0 left-0': !isFullscreen }">
       <JButton
-        (clicked)="reset()"
+        [icon]="iconsService.icons.rotateLeft"
+        [iconSize]="20"
+        (clicked)="rotateLeftImg()"
         classes="secondary w-[35px] h-[35px]"
-      >
-        <lucide-icon [name]="iconsService.icons.reset" size="20" />
-      </JButton>
+      />
 
       <JButton
-        (clicked)="rotateLeftImg()"
+        [icon]="iconsService.icons.reset"
+        [iconSize]="20"
+        (clicked)="reset()"
         classes="secondary w-[35px] h-[35px]"
-      >
-        <lucide-icon [name]="iconsService.icons.rotateLeft" size="20" />
-      </JButton>
+      />
+    </div>
 
+
+    <div class="absolute flex flex-col gap-1 z-2" [ngClass]="{ 'top-3 left-3': isFullscreen, 'top-10 left-0': !isFullscreen }">
       <JButton
+        [icon]="iconsService.icons.rotateRight"
+        [iconSize]="20"
         (clicked)="rotateRightImg()"
         classes="secondary w-[35px] h-[35px]"
-      >
-        <lucide-icon [name]="iconsService.icons.rotateRight" size="20" />
-      </JButton>
+      />
     </div>
 
 
     <div class="absolute flex gap-1 z-2" [ngClass]="{ 'top-3 right-3': isFullscreen, 'top-0 right-0': !isFullscreen }">
       <JButton
-        [disabled]="zoom === 3"
+        [icon]="iconsService.icons.download"
+        [iconSize]="20"
         (clicked)="download()"
+        [isLoading]="isDownloading"
         classes="secondary w-[35px] h-[35px]"
-      >
-        <lucide-icon [name]="iconsService.icons.download" size="20" />
-      </JButton>
+      />
 
       <JButton
+        [icon]="isFullscreen ? iconsService.icons.exitFullscreen : iconsService.icons.fullscreen"
+        [iconSize]="20"
         (clicked)="toggleFullscreen(container)"
         classes="secondary w-[35px] h-[35px]"
-      >
-        @if (isFullscreen) {
-          <lucide-icon [name]="iconsService.icons.exitFullscreen" size="20" />
-        } @else {
-          <lucide-icon [name]="iconsService.icons.fullscreen" size="20" />
-        }
-      </JButton>
+      />
     </div>
 
     <div class="absolute flex flex-col gap-1 z-2" [ngClass]="{ 'top-13 right-3': isFullscreen, 'top-10 right-0': !isFullscreen }">
       <JButton
+        [icon]="iconsService.icons.zoomIn"
+        [iconSize]="20"
         [disabled]="zoom === 3"
         (clicked)="zoomIn()"
         classes="secondary w-[35px] h-[35px]"
-      >
-        <lucide-icon [name]="iconsService.icons.zoomIn" size="20" />
-      </JButton>
+      />
 
-      <JButton [disabled]="zoom === 0.5" (clicked)="zoomOut()" classes="secondary w-[35px] h-[35px]">
-        <lucide-icon [name]="iconsService.icons.zoomOut" size="20" />
-      </JButton>
+      <JButton
+        [icon]="iconsService.icons.zoomOut"
+        [iconSize]="20"
+        [disabled]="zoom === 0.5"
+        (clicked)="zoomOut()"
+        classes="secondary w-[35px] h-[35px]"
+      />
     </div>
 
 

package/src/lib/components/{image/image-viewer/viewer-image.component.ts → viewer/viewer-image/image-viewer.component.ts}

@@ -6,12 +6,12 @@ import { JIconsService } from 'tailjng';
 import { JButtonComponent } from '../../button/button.component';
 
 @Component({
-  selector: 'JViewerImage',
+  selector: 'JImageViewer',
   imports: [CommonModule, LucideAngularModule, JButtonComponent],
-  templateUrl: './viewer-image.component.html',
-  styleUrl: './viewer-image.component.css'
+  templateUrl: './image-viewer.component.html',
+  styleUrl: './image-viewer.component.css'
 })
-export class JViewerImageComponent implements OnChanges {
+export class JImageViewerComponent implements OnChanges {
 
   @Input() src!: string | SafeUrl;
   @Input() alt: string = 'Imagen';
@@ -86,50 +86,80 @@ export class JViewerImageComponent implements OnChanges {
   /**
    * Downloads the currently displayed image.
    */
+  isDownloading = false;
+
+  private getImageUrl(): string {
+    if (typeof this.src === 'string') {
+      return this.src;
+    }
+
+    // SafeUrlImpl → sacar la propiedad interna
+    const anySrc = this.src as any;
+    if (anySrc.changingThisBreaksApplicationSecurity) {
+      return anySrc.changingThisBreaksApplicationSecurity as string;
+    }
+
+    // fallback (por si acaso)
+    return this.src.toString();
+  }
+
   download() {
     try {
       if (!this.src) return;
 
-      // Convierte SafeUrl a string si es necesario
-      const imageUrl = this.src.toString();
+      this.isDownloading = true;
 
-      // Nombre de archivo predeterminado
+      const imageUrl = this.getImageUrl();
       const fileName = this.alt?.replace(/\s+/g, '') || 'imagen';
 
-      // Detecta si es base64 o URL
+      // Si es base64
       if (imageUrl.startsWith('data:image')) {
-        // Base64 → descarga directa
         const link = document.createElement('a');
         link.href = imageUrl;
         link.download = `${fileName}.png`;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
-      } else {
-        // Descarga vía fetch para evitar CORS si es necesario
-        fetch(imageUrl)
-          .then((response) => response.blob())
-          .then((blob) => {
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = `${fileName}.${blob.type.split('/')[1] || 'png'}`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-          })
-          .catch((error) => {
-            console.error('Error al descargar la imagen:', error);
-          });
+        this.isDownloading = false;
+        return;
       }
+
+      // Si es URL normal
+      fetch(imageUrl)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then((blob) => {
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          const ext = blob.type.split('/')[1] || 'png';
+
+          link.href = url;
+          link.download = `${fileName}.${ext}`;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        })
+        .catch((error) => {
+          console.error('Error al descargar la imagen:', error);
+        })
+        .finally(() => {
+          this.isDownloading = false;
+        });
+
     } catch (err) {
+      this.isDownloading = false;
       console.error('Error general en download():', err);
     }
   }
 
 
 
+
   /**
    * Zooms in the image.
    */

package/src/lib/components/viewer/viewer-pdf/pdf-viewer.component.html

@@ -0,0 +1,28 @@
+<div class="flex-1 flex flex-col items-center justify-center">
+  <object
+    [data]="safeUrl"
+    type="application/pdf"
+    class="w-full h-full min-h-[300px] md:h-[75vh] overflow-auto"
+  >
+    <div class="p-6 flex flex-col items-center justify-center text-center gap-3">
+      <!-- Icono -->
+      <lucide-icon [name]="icons.circleAlert" size="35" class="text-primary"></lucide-icon>
+
+      <!-- Texto -->
+      <div class="space-y-1">
+        <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+          No se pudo mostrar el PDF
+        </h3>
+        <p class="text-xs text-slate-500 dark:text-slate-400 max-w-xs">
+          Tu navegador no es compatible con la visualización embebida de este documento.
+          Puedes descargarlo y verlo en tu visor de PDF preferido.
+        </p>
+      </div>
+
+      <!-- Botón -->
+      <a [href]="safeUrl" target="_blank" class="inline-flex items-center justify-center px-4 py-2 rounded-full text-xs font-medium bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors">
+        Descargar archivo
+      </a>
+    </div>
+  </object>
+</div>

package/src/lib/components/viewer/viewer-pdf/pdf-viewer.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { CircleAlert, LucideAngularModule } from 'lucide-angular';
+
+@Component({
+  selector: 'JPdfViewer',
+  standalone: true,
+  imports: [LucideAngularModule],
+  templateUrl: './pdf-viewer.component.html',
+  styleUrls: ['./pdf-viewer.component.scss']
+})
+export class JViewerPdfComponent implements OnChanges {
+
+  icons = {
+    circleAlert: CircleAlert
+  };
+
+  // URLs normales (strings) para usarlas en <a href="">
+  @Input() url = 'http://example/example.pdf';
+
+  // URLs “seguras” para <object>
+  safeUrl: SafeResourceUrl | null = null;
+
+  constructor(private sanitizer: DomSanitizer) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['url']) {
+      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+    }
+  }
+}