tailjng 0.1.5 → 0.1.7

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

@@ -1,28 +1,78 @@
-<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]="iconsService.icons.circleAlert" size="35" class="text-primary"></lucide-icon>
+<div class="j-pdf-viewer" [ngClass]="ngClasses">
+  @if (!hasUrl) {
+    <div class="j-pdf-viewer__empty">
+      <JIcon
+        [icon]="Icons.CircleAlert"
+        [size]="32"
+        iconClass="text-muted-foreground"
+        [ariaHidden]="true"
+      />
+      <p class="j-pdf-viewer__message">{{ emptyMessage }}</p>
+    </div>
+  } @else if (showDesktopEmbed) {
+    <iframe
+      class="j-pdf-viewer__frame"
+      [src]="safeUrl"
+      [title]="documentTitle"
+      loading="lazy"
+    ></iframe>
+  } @else if (useMobileLayout) {
+    <div class="j-pdf-viewer__mobile">
+      @if (showMobileActions) {
+        <div class="j-pdf-viewer__mobile-card">
+          <JIcon
+            [icon]="Icons.FileUp"
+            [size]="36"
+            iconClass="text-primary dark:text-dark-primary"
+            [ariaHidden]="true"
+          />
+          <div class="j-pdf-viewer__mobile-copy">
+            <h3 class="j-pdf-viewer__mobile-title">{{ documentTitle }}</h3>
+            <p class="j-pdf-viewer__mobile-text">
+              En móvil, abre el PDF en el visor del sistema para navegar y hacer zoom con
+              mejor experiencia.
+            </p>
+          </div>
+          <div class="j-pdf-viewer__actions j-pdf-viewer__actions--stacked">
+            <JButton
+              [text]="'Abrir PDF'"
+              [icon]="Icons.Eye"
+              (clicked)="openInBrowser()"
+            />
+            <JButton
+              [text]="'Descargar'"
+              [icon]="Icons.Download"
+              classes="secondary"
+              (clicked)="downloadPdf()"
+            />
+          </div>
+        </div>
+      }
 
-      <!-- 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>
+      @if (showMobileEmbed) {
+        <iframe
+          class="j-pdf-viewer__frame j-pdf-viewer__frame--mobile"
+          [src]="safeUrl"
+          [title]="documentTitle"
+          loading="lazy"
+        ></iframe>
 
-      <!-- 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 class="j-pdf-viewer__mobile-bar">
+          <JButton
+            [text]="'Abrir'"
+            [icon]="Icons.Eye"
+            size="sm"
+            (clicked)="openInBrowser()"
+          />
+          <JButton
+            [text]="'Descargar'"
+            [icon]="Icons.Download"
+            size="sm"
+            classes="secondary"
+            (clicked)="downloadPdf()"
+          />
+        </div>
+      }
     </div>
-  </object>
+  }
 </div>

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

@@ -1,31 +1,184 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { CircleAlert, LucideAngularModule } from 'lucide-angular';
-import { JIconsService } from 'tailjng';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JButtonComponent } from '../../button/button.component';
+import { JIconComponent } from '../../icon/icon.component';
+import { PdfViewerMobileMode } from './pdf-viewer.types';
 
+export type { PdfViewerMobileMode } from './pdf-viewer.types';
+
+/**
+ * PDF viewer with desktop embed and a mobile-friendly open/download experience.
+ *
+ * Install: `npx tailjng add viewer-pdf`
+ */
 @Component({
   selector: 'JPdfViewer',
-  standalone: true,
-  imports: [LucideAngularModule],
+  imports: [NgClass, JButtonComponent, JIconComponent],
   templateUrl: './pdf-viewer.component.html',
-  styleUrls: ['./pdf-viewer.component.scss']
+  styleUrl: './pdf-viewer.component.css',
 })
-export class JPdfViewerComponent implements OnChanges {
+export class JPdfViewerComponent implements OnInit, OnChanges {
+  readonly Icons = Icons;
 
-  // URLs normales (strings) para usarlas en <a href="">
-  @Input() url = 'http://example/example.pdf';
+  @Input() url = '';
+  @Input() title = '';
+  @Input() emptyMessage = 'No hay un PDF para mostrar';
+  @Input() mobileMode: PdfViewerMobileMode = 'auto';
+  /** When true on mobile (non-iOS), tries an iframe embed before falling back to actions only. */
+  @Input() mobileEmbed = true;
+  @Input() ngClasses: Record<string, boolean> = {};
 
-  // URLs “seguras” para <object>
   safeUrl: SafeResourceUrl | null = null;
+  isMobileViewport = false;
+
+  constructor(private readonly sanitizer: DomSanitizer) {}
+
+  /**
+   * Whether the mobile layout should be used.
+   */
+  get useMobileLayout(): boolean {
+    if (this.mobileMode === 'embed') {
+      return false;
+    }
+
+    if (this.mobileMode === 'actions') {
+      return true;
+    }
+
+    return this.isMobileViewport;
+  }
+
+  /**
+   * iOS does not reliably render PDFs inside iframe/object.
+   */
+  get isIOS(): boolean {
+    if (typeof navigator === 'undefined') {
+      return false;
+    }
+
+    return (
+      /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+    );
+  }
+
+  /**
+   * Whether to render the iframe on mobile (typically Android).
+   */
+  get showMobileEmbed(): boolean {
+    return this.useMobileLayout && this.mobileEmbed && !this.isIOS && !!this.safeUrl;
+  }
+
+  /**
+   * Whether to show the mobile action card (open / download).
+   */
+  get showMobileActions(): boolean {
+    return this.useMobileLayout && (!this.showMobileEmbed || this.isIOS);
+  }
+
+  /**
+   * Whether desktop embed mode is active.
+   */
+  get showDesktopEmbed(): boolean {
+    return !this.useMobileLayout && !!this.safeUrl;
+  }
+
+  /**
+   * Display name derived from the URL or `title` input.
+   */
+  get documentTitle(): string {
+    if (this.title.trim()) {
+      return this.title.trim();
+    }
+
+    if (!this.url) {
+      return 'Documento PDF';
+    }
+
+    try {
+      const path = new URL(this.url, window.location.origin).pathname;
+      const fileName = path.split('/').pop();
+      return fileName ? decodeURIComponent(fileName) : 'Documento PDF';
+    } catch {
+      return 'Documento PDF';
+    }
+  }
+
+  /**
+   * Whether a PDF URL is available.
+   */
+  get hasUrl(): boolean {
+    return !!this.url?.trim();
+  }
 
-  constructor(
-    public iconsService: JIconsService,
-    private sanitizer: DomSanitizer
-  ) { }
+  ngOnInit(): void {
+    this.syncViewport();
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['url']) {
-      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+      this.safeUrl = this.hasUrl
+        ? this.sanitizer.bypassSecurityTrustResourceUrl(this.buildEmbedUrl(this.url))
+        : null;
+    }
+  }
+
+  @HostListener('window:resize')
+  onWindowResize(): void {
+    this.syncViewport();
+  }
+
+  /**
+   * Opens the PDF in a new browser tab (native viewer on mobile).
+   */
+  openInBrowser(): void {
+    if (!this.hasUrl) {
+      return;
     }
+
+    window.open(this.url, '_blank', 'noopener,noreferrer');
+  }
+
+  /**
+   * Triggers download / open for the PDF file.
+   */
+  downloadPdf(): void {
+    if (!this.hasUrl) {
+      return;
+    }
+
+    const link = document.createElement('a');
+    link.href = this.url;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    link.download = this.documentTitle;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  private syncViewport(): void {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    this.isMobileViewport = window.matchMedia('(max-width: 767px)').matches;
+  }
+
+  private buildEmbedUrl(rawUrl: string): string {
+    if (rawUrl.includes('#')) {
+      return rawUrl;
+    }
+
+    return `${rawUrl}#view=FitH`;
   }
 }

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

@@ -0,0 +1 @@
+export type PdfViewerMobileMode = 'auto' | 'embed' | 'actions';

package/src/styles.css

@@ -5,8 +5,8 @@
 }
 
 .scroll-element::-webkit-scrollbar {
-  width: 5px;
-  height: 5px
+  width: 8px;
+  height: 8px
 }
 
 .scroll-element::-webkit-scrollbar-track {

package/lib/services/static/icons.service.d.ts

@@ -1,65 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class JIconsService {
-    icons: {
-        info: import("lucide-angular").LucideIconData;
-        success: import("lucide-angular").LucideIconData;
-        error: import("lucide-angular").LucideIconData;
-        warning: import("lucide-angular").LucideIconData;
-        question: import("lucide-angular").LucideIconData;
-        close: import("lucide-angular").LucideIconData;
-        check: import("lucide-angular").LucideIconData;
-        zoomIn: import("lucide-angular").LucideIconData;
-        zoomOut: import("lucide-angular").LucideIconData;
-        rotateRight: import("lucide-angular").LucideIconData;
-        rotateLeft: import("lucide-angular").LucideIconData;
-        reset: import("lucide-angular").LucideIconData;
-        fullscreen: import("lucide-angular").LucideIconData;
-        exitFullscreen: import("lucide-angular").LucideIconData;
-        img: import("lucide-angular").LucideIconData;
-        imgs: import("lucide-angular").LucideIconData;
-        imageOff: import("lucide-angular").LucideIconData;
-        upload: import("lucide-angular").LucideIconData;
-        view: import("lucide-angular").LucideIconData;
-        chevronUp: import("lucide-angular").LucideIconData;
-        chevronDown: import("lucide-angular").LucideIconData;
-        chevronsUpDown: import("lucide-angular").LucideIconData;
-        squareDashedMousePointer: import("lucide-angular").LucideIconData;
-        search: import("lucide-angular").LucideIconData;
-        copy: import("lucide-angular").LucideIconData;
-        save: import("lucide-angular").LucideIconData;
-        sun: import("lucide-angular").LucideIconData;
-        moon: import("lucide-angular").LucideIconData;
-        loading: import("lucide-angular").LucideIconData;
-        table: import("lucide-angular").LucideIconData;
-        listFilter: import("lucide-angular").LucideIconData;
-        firstPage: import("lucide-angular").LucideIconData;
-        prevPage: import("lucide-angular").LucideIconData;
-        nextPage: import("lucide-angular").LucideIconData;
-        lastPage: import("lucide-angular").LucideIconData;
-        arrowBigRight: import("lucide-angular").LucideIconData;
-        filter: import("lucide-angular").LucideIconData;
-        filterList: import("lucide-angular").LucideIconData;
-        eraser: import("lucide-angular").LucideIconData;
-        transh: import("lucide-angular").LucideIconData;
-        default: import("lucide-angular").LucideIconData;
-        fileSpreadsheet: import("lucide-angular").LucideIconData;
-        monitorUp: import("lucide-angular").LucideIconData;
-        download: import("lucide-angular").LucideIconData;
-        fileUp: import("lucide-angular").LucideIconData;
-        listRestart: import("lucide-angular").LucideIconData;
-        editRowLine: import("lucide-angular").LucideIconData;
-        editRow: import("lucide-angular").LucideIconData;
-        edit: import("lucide-angular").LucideIconData;
-        delete: import("lucide-angular").LucideIconData;
-        ellipsisVertical: import("lucide-angular").LucideIconData;
-        calendar: import("lucide-angular").LucideIconData;
-        clock: import("lucide-angular").LucideIconData;
-        circleAlert: import("lucide-angular").LucideIconData;
-        clipboard: import("lucide-angular").LucideIconData;
-        link: import("lucide-angular").LucideIconData;
-        linkOff: import("lucide-angular").LucideIconData;
-    };
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<JIconsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<JIconsService>;
-}

package/src/lib/components/colors-config/README.md

@@ -1,38 +0,0 @@
-# Colores Tailjng — configuración del proyecto
-
-Carpeta generada por `init:app`, `sync:app` o `npx tailjng add colors`.
-
-## Archivos
-
-| Archivo | Para qué |
-|---------|----------|
-| `colors.config.ts` | Variantes (`primary`, `success_soft`, …) + las tuyas (`brand`, etc.) |
-| `colors.safelist.css` | Clases Tailwind que el build debe generar (`@apply`) |
-
-## Añadir un color propio
-
-**1.** En `colors.config.ts`:
-
-```typescript
-brand: 'bg-indigo-600 text-white hover:bg-indigo-700 border border-indigo-500 shadow-md',
-brand_soft: 'bg-indigo-500/10 text-indigo-600 border border-indigo-500/20 shadow-sm',
-```
-
-**2.** En `colors.safelist.css`, dentro del bloque `@layer utilities`:
-
-```css
-.__tailjng_custom_colors__ {
-  @apply bg-indigo-600 text-white hover:bg-indigo-700 border-indigo-500 bg-indigo-500/10 text-indigo-600;
-}
-```
-
-**3.** Uso en componentes:
-
-```html
-<JButton classes="brand" text="Guardar" />
-<JBadge classes="brand_soft" value="N" />
-```
-
-## Provider
-
-`app.config.ts` debe incluir `tailjngColorsProvider` (lo añade `init:app` / `sync:app`).

package/src/lib/components/menu/options-coach-menu/options-coach-menu.component.scss

@@ -1,12 +0,0 @@
-.menu-options-list,
-.menu-option-item {
-  width: 100%;
-  min-width: 100%;
-}
-
-:host ::ng-deep .menu-option-item j-button,
-:host ::ng-deep .menu-option-item jbutton {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-}

package/src/lib/components/toggle-radio/toggle-radio.component.html

@@ -1,51 +0,0 @@
-@if (internalOptions.length > 0) {
-    <div class="flex rounded-md overflow-hidden border border-border dark:border-dark-border text-sm min-h-[40px] select-none" [ngClass]="{ 'opacity-50': isDisabled || isComponentDisabled }" [class]="classes">
-        
-    <ng-container>
-            @for (opt of internalOptions; track $index) {
-                <button
-                type="button"
-                [disabled]="isDisabled || isComponentDisabled"
-                (click)="select(opt.value)"
-                [ngClass]="{
-                    'bg-primary dark:bg-dark-primary text-white': selectedValue === opt.value,
-                    'bg-background dark:bg-dark-background hover:bg-muted/80 hover:dark:bg-dark-muted/30 text-gray-700 dark:text-white': selectedValue !== opt.value,
-                    'cursor-not-allowed pointer-events-none': isDisabled || isComponentDisabled
-                }"
-                class="w-full py-2 px-4 font-medium border-r border-border last:border-none focus:outline-none transition-colors duration-200 ease-in-out cursor-pointer"
-                [class]="classesElement"
-                >
-                {{ opt.label }}
-                </button>
-            }
-        </ng-container>
-
-    </div>
-} @else if (isLoading) {
-
-    <div class="flex text-black dark:text-white gap-2 items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]">
-        <lucide-icon [name]="iconsService.icons.loading" [size]="15" class="text-gray-400 animate-spin" />
-        <span>Cargando...</span>
-    </div>  
-
-} @else {
-
-    <div class="flex text-black dark:text-white items-center justify-center rounded-md overflow-hidden border border-border dark:border-dark-border h-[40px]">
-        No hay opciones
-    </div>  
-
-}
-  
-<!-- Clear button -->
-@if (showClear && selectedValue !== null) {
-    <div class="mt-2">
-        <button 
-        type="button" 
-        (click)="clear()" 
-        [disabled]="isDisabled || isComponentDisabled"
-        class="text-xs text-red-500 underline disabled:opacity-50 disabled:cursor-not-allowed">
-        Limpiar selección
-        </button>
-    </div>
-}
-