tailjng 0.1.6 → 0.1.8

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

@@ -1,27 +1,55 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  HostListener,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
-import { 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 { JTooltipDirective } from '../../tooltip/tooltip.directive';
-
+import { ImageObjectFit, ImageViewerControlSize } from './image-viewer.types';
+
+export type { ImageObjectFit, ImageViewerControlSize } from './image-viewer.types';
+
+const ZOOM_MIN = 0.5;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.1;
+
+const CONTROL_BUTTON_SIZES: Record<ImageViewerControlSize, string> = {
+  sm: 'w-[28px] h-[28px]',
+  md: 'w-[32px] h-[32px]',
+  lg: 'w-[38px] h-[38px]',
+};
+
+const CONTROL_ICON_SIZES: Record<ImageViewerControlSize, number> = {
+  sm: 15,
+  md: 18,
+  lg: 21,
+};
+
+/**
+ * Image viewer with zoom, rotate, pan, download, and fullscreen controls.
+ *
+ * Install: `npx tailjng add viewer-image`
+ */
 @Component({
   selector: 'JImageViewer',
-  imports: [CommonModule, LucideAngularModule, JButtonComponent, JTooltipDirective],
+  imports: [NgClass, JButtonComponent, JTooltipDirective, JIconComponent],
   templateUrl: './image-viewer.component.html',
-  styleUrl: './image-viewer.component.css'
+  styleUrl: './image-viewer.component.css',
 })
 export class JImageViewerComponent implements OnChanges {
+  readonly Icons = Icons;
 
   @Input() src: string | SafeUrl | null = null;
-  @Input() alt: string = 'Imagen';
-  @Input() emptyMessage: string = 'La imagen no existe';
-
-  @Input() objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' = 'contain';
-
+  @Input() alt = 'Imagen';
+  @Input() emptyMessage = 'La imagen no existe';
+  @Input() objectFit: ImageObjectFit = 'contain';
   @Input() showControls = true;
-
   @Input() showRotateLeft?: boolean;
   @Input() showRotateRight?: boolean;
   @Input() showReset?: boolean;
@@ -29,16 +57,16 @@ export class JImageViewerComponent implements OnChanges {
   @Input() showFullscreen?: boolean;
   @Input() showZoomIn?: boolean;
   @Input() showZoomOut?: boolean;
-
-  @Input() controlSize: 'sm' | 'md' | 'lg' = 'md';
+  @Input() controlSize: ImageViewerControlSize = 'md';
+  @Input() ngClasses: Record<string, boolean> = {};
 
   posX = 0;
   posY = 0;
-
   zoom = 1;
   rotate = 0;
-
   isFullscreen = false;
+  isDownloading = false;
+
   internalLoading = true;
   animateTransform = true;
   hasError = false;
@@ -46,98 +74,159 @@ export class JImageViewerComponent implements OnChanges {
   private dragging = false;
   private dragStart = { x: 0, y: 0 };
 
+  /**
+   * Whether the image is still loading.
+   */
   get loading(): boolean {
     return this.internalLoading;
   }
 
+  /**
+   * Whether a source URL is provided.
+   */
   get hasImage(): boolean {
     return !!this.src;
   }
 
-  constructor(public readonly iconsService: JIconsService) { }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['src'] && changes['src'].currentValue !== changes['src'].previousValue) {
-      this.reset();
+  /**
+   * Whether zoom out is at the minimum level.
+   */
+  get isZoomMin(): boolean {
+    return this.zoom <= ZOOM_MIN;
+  }
 
-      this.hasError = false;
-      this.internalLoading = !!this.src;
-    }
+  /**
+   * Whether zoom in is at the maximum level.
+   */
+  get isZoomMax(): boolean {
+    return this.zoom >= ZOOM_MAX;
   }
 
+  /**
+   * CSS transform applied to the image.
+   */
+  get imageTransform(): string {
+    return `scale(${this.zoom}) rotate(${this.rotate}deg) translate(${this.posX}px, ${this.posY}px)`;
+  }
 
   /**
-   * Handles the successful loading of the image.
+   * Tailwind size classes for toolbar buttons.
    */
-  handleLoad() {
-    this.internalLoading = false;
-    this.hasError = false;
+  get buttonSizeClass(): string {
+    return CONTROL_BUTTON_SIZES[this.controlSize];
   }
 
+  /**
+   * Icon size in px for toolbar buttons.
+   */
+  get buttonIconSize(): number {
+    return CONTROL_ICON_SIZES[this.controlSize];
+  }
 
+  /**
+   * Shared classes for floating control buttons.
+   */
+  get controlButtonClasses(): string {
+    return `secondary rounded-lg shrink-0 opacity-30 hover:opacity-100 transition-opacity duration-200 ${this.buttonSizeClass}`;
+  }
 
   /**
-   * Handles the error loading of the image.
+   * Class map for the controls toolbar position.
    */
-  handleError() {
-    this.internalLoading = false;
-    this.hasError = true;
+  get controlsPositionClasses(): Record<string, boolean> {
+    return {
+      'top-3 right-3': this.isFullscreen,
+      'top-2 right-2': !this.isFullscreen,
+    };
   }
 
+  /**
+   * Class map for the image element.
+   */
+  get imageClasses(): Record<string, boolean> {
+    return {
+      'j-image-viewer__image': true,
+      'invisible': this.loading,
+      'transition-transform': this.animateTransform,
+      'duration-200': this.animateTransform,
+      'ease-in-out': this.animateTransform,
+    };
+  }
 
+  /**
+   * Whether at least one toolbar action is visible.
+   */
+  get hasAnyControlVisible(): boolean {
+    return [
+      this.showRotateLeft,
+      this.showRotateRight,
+      this.showReset,
+      this.showZoomOut,
+      this.showZoomIn,
+      this.showDownload,
+      this.showFullscreen,
+    ].some((value) => this.isControlVisible(value));
+  }
 
   /**
-   * Toggles fullscreen mode for the image viewer.
-   * @param container
+   * Fullscreen toggle icon based on current state.
    */
-  toggleFullscreen(container: HTMLElement) {
-    if (!document.fullscreenElement) {
-      container.requestFullscreen();
-      this.isFullscreen = true;
-    } else {
-      document.exitFullscreen();
-      this.isFullscreen = false;
+  get fullscreenIcon() {
+    return this.isFullscreen ? Icons.Minimize2 : Icons.Scan;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['src'] && changes['src'].currentValue !== changes['src'].previousValue) {
+      this.resetView();
+      this.hasError = false;
+      this.internalLoading = !!this.src;
     }
   }
 
+  @HostListener('document:fullscreenchange')
+  onFullscreenChange(): void {
+    this.isFullscreen = !!document.fullscreenElement;
+  }
 
   /**
-   * Downloads the currently displayed image.
+   * Whether a specific toolbar action should render.
    */
-  isDownloading = false;
-
-  private getImageUrl(): string {
-    if (!this.src) return '';
+  isControlVisible(value?: boolean): boolean {
+    return value ?? this.showControls;
+  }
 
-    if (typeof this.src === 'string') {
-      return this.src;
-    }
+  onImageLoad(): void {
+    this.internalLoading = false;
+    this.hasError = false;
+  }
 
-    const anySrc = this.src as any;
+  onImageError(): void {
+    this.internalLoading = false;
+    this.hasError = true;
+  }
 
-    if (anySrc.changingThisBreaksApplicationSecurity) {
-      return anySrc.changingThisBreaksApplicationSecurity as string;
+  toggleFullscreen(container: HTMLElement): void {
+    if (!document.fullscreenElement) {
+      container.requestFullscreen();
+      this.isFullscreen = true;
+      return;
     }
 
-    return this.src.toString();
+    document.exitFullscreen();
+    this.isFullscreen = false;
   }
 
-
-
-  /**
-   * Downloads the currently displayed image, handling both base64 and normal URLs.
-   * @returns 
-   */
-  download() {
+  download(): void {
     try {
-      if (!this.src) return;
+      if (!this.src) {
+        return;
+      }
 
       this.isDownloading = true;
 
-      const imageUrl = this.getImageUrl();
+      const imageUrl = this.resolveImageUrl();
       const fileName = this.alt?.replace(/\s+/g, '') || 'imagen';
 
-      // Si es base64
       if (imageUrl.startsWith('data:image')) {
         const link = document.createElement('a');
         link.href = imageUrl;
@@ -149,7 +238,6 @@ export class JImageViewerComponent implements OnChanges {
         return;
       }
 
-      // Si es URL normal
       fetch(imageUrl)
         .then((response) => {
           if (!response.ok) {
@@ -175,172 +263,89 @@ export class JImageViewerComponent implements OnChanges {
         .finally(() => {
           this.isDownloading = false;
         });
-
     } catch (err) {
       this.isDownloading = false;
       console.error('Error general en download():', err);
     }
   }
 
-
-
-
-  /**
-   * Zooms in the image.
-   */
-  zoomIn() {
-    this.zoom = Math.min(this.zoom + 0.1, 3);
+  zoomIn(): void {
+    this.zoom = Math.min(this.zoom + ZOOM_STEP, ZOOM_MAX);
   }
 
-
-
-  /**
-   * Zooms out the image.
-   */
-  zoomOut() {
-    this.zoom = Math.max(this.zoom - 0.1, 0.5);
+  zoomOut(): void {
+    this.zoom = Math.max(this.zoom - ZOOM_STEP, ZOOM_MIN);
   }
 
-
-
-  /**
-   * Rotates the image to the right.
-   */
-  rotateRightImg() {
+  rotateRight(): void {
     this.rotate += 90;
   }
 
-
-
-  /**
-   * Rotates the image to the left.
-   */
-  rotateLeftImg() {
+  rotateLeft(): void {
     this.rotate -= 90;
   }
 
-
-
-  /**
-   * Resets the image viewer to its initial state.
-   */
-  reset() {
+  resetView(): void {
     this.zoom = 1;
     this.rotate = 0;
     this.posX = 0;
     this.posY = 0;
   }
 
+  startDrag(event: MouseEvent): void {
+    if (this.zoom <= 1) {
+      return;
+    }
 
-
-  /**
-   * Starts dragging the image.
-   * @param event The mouse event.
-   * @returns
-   */
-  startDrag(event: MouseEvent) {
-    if (this.zoom <= 1) return;
     this.dragging = true;
     this.animateTransform = false;
-
     this.dragStart = {
       x: event.clientX,
-      y: event.clientY
+      y: event.clientY,
     };
 
     document.addEventListener('mousemove', this.onDrag);
     document.addEventListener('mouseup', this.endDrag);
   }
 
-
-
-  /**
-   * Handles the dragging of the image.
-   * @param event The mouse event.
-   * @returns
-   */
-  onDrag = (event: MouseEvent) => {
-    if (!this.dragging) return;
+  private onDrag = (event: MouseEvent): void => {
+    if (!this.dragging) {
+      return;
+    }
 
     const deltaX = event.clientX - this.dragStart.x;
     const deltaY = event.clientY - this.dragStart.y;
-
     const angleRad = (this.rotate % 360) * (Math.PI / 180);
-
     const rotatedX = deltaX * Math.cos(angleRad) + deltaY * Math.sin(angleRad);
     const rotatedY = deltaY * Math.cos(angleRad) - deltaX * Math.sin(angleRad);
 
     this.posX += rotatedX;
     this.posY += rotatedY;
-
     this.dragStart.x = event.clientX;
     this.dragStart.y = event.clientY;
   };
 
-
-  /**
-   * Ends dragging the image.
-   */
-  endDrag = () => {
+  private endDrag = (): void => {
     this.dragging = false;
     this.animateTransform = true;
     document.removeEventListener('mousemove', this.onDrag);
     document.removeEventListener('mouseup', this.endDrag);
   };
 
+  private resolveImageUrl(): string {
+    if (!this.src) {
+      return '';
+    }
 
+    if (typeof this.src === 'string') {
+      return this.src;
+    }
 
-  /**
-   * Returns the CSS class for the control buttons based on the selected size.
-   */
-  get buttonSizeClass(): string {
-    const sizes = {
-      sm: 'w-[28px] h-[28px]',
-      md: 'w-[32px] h-[32px]',
-      lg: 'w-[38px] h-[38px]',
-    };
-
-    return sizes[this.controlSize];
-  }
-
-
-  /**
-   * Returns the icon size for the control buttons based on the selected size.
-   */
-  get buttonIconSize(): number {
-    const sizes = {
-      sm: 15,
-      md: 18,
-      lg: 21,
-    };
-
-    return sizes[this.controlSize];
-  }
-
-
-  /**
-   * Determines if a control button should be visible based on the input value and the general showControls flag.
-   * @param value The specific control visibility input value.
-   * @returns True if the control should be visible, false otherwise.
-   */
-  isControlVisible(value?: boolean): boolean {
-    return value ?? this.showControls;
-  }
-
+    const safe = this.src as SafeUrl & { changingThisBreaksApplicationSecurity?: string };
+    if (safe.changingThisBreaksApplicationSecurity) {
+      return safe.changingThisBreaksApplicationSecurity;
+    }
 
-  /**
-   * Determines if any control button is visible, used to conditionally display the controls container.
-   * @returns True if at least one control is visible, false otherwise.
-   */
-  get hasAnyControlVisible(): boolean {
-    return [
-      this.showRotateLeft,
-      this.showRotateRight,
-      this.showReset,
-      this.showZoomOut,
-      this.showZoomIn,
-      this.showDownload,
-      this.showFullscreen,
-    ].some(value => this.isControlVisible(value));
+    return this.src.toString();
   }
 }

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

@@ -0,0 +1,3 @@
+export type ImageObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+
+export type ImageViewerControlSize = 'sm' | 'md' | 'lg';

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

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.j-pdf-viewer__mobile-card {
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-muted) 22%, var(--color-background)) 0%,
+    var(--color-background) 100%
+  );
+}
+
+:host-context(.dark) .j-pdf-viewer__mobile-card,
+:host-context(html.dark) .j-pdf-viewer__mobile-card {
+  border-color: var(--color-dark-border);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--color-dark-muted) 30%, var(--color-dark-background)) 0%,
+    var(--color-dark-background) 100%
+  );
+}

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

@@ -1,28 +1,99 @@
-<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="flex h-full min-h-[18.75rem] w-full flex-col max-md:min-h-56"
+  [ngClass]="ngClasses"
+>
+  @if (!hasUrl) {
+    <div
+      class="flex min-h-[18.75rem] flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border p-6 text-center max-md:min-h-56 dark:border-dark-border"
+    >
+      <JIcon
+        [icon]="Icons.CircleAlert"
+        [size]="32"
+        iconClass="text-muted-foreground"
+        [ariaHidden]="true"
+      />
+      <p
+        class="m-0 max-w-80 text-[0.8125rem] leading-[1.45] text-muted-foreground dark:text-dark-muted-foreground"
+      >
+        {{ emptyMessage }}
+      </p>
+    </div>
+  } @else if (showDesktopEmbed) {
+    <iframe
+      class="block h-full min-h-[18.75rem] w-full rounded-xl border border-border bg-background max-md:min-h-56 dark:border-dark-border dark:bg-dark-background"
+      [src]="safeUrl"
+      [title]="documentTitle"
+      loading="lazy"
+    ></iframe>
+  } @else if (useMobileLayout) {
+    <div class="flex h-full w-full flex-col gap-0">
+      @if (showMobileActions) {
+        <div
+          class="j-pdf-viewer__mobile-card flex flex-1 flex-col items-center justify-center gap-3.5 p-5 text-center"
+        >
+          <JIcon
+            [icon]="Icons.FileUp"
+            [size]="36"
+            iconClass="text-primary dark:text-dark-primary"
+            [ariaHidden]="true"
+          />
+          <div class="flex flex-col gap-1.5">
+            <h3
+              class="m-0 text-[0.9375rem] font-semibold text-foreground dark:text-dark-foreground"
+            >
+              {{ documentTitle }}
+            </h3>
+            <p
+              class="m-0 max-w-80 text-[0.8125rem] leading-[1.45] text-muted-foreground dark:text-dark-muted-foreground"
+            >
+              En móvil, abre el PDF en el visor del sistema para navegar y hacer zoom con
+              mejor experiencia.
+            </p>
+          </div>
+          <div
+            class="flex w-full max-w-64 flex-col flex-wrap items-center justify-center gap-2"
+          >
+            <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="block min-h-[60vh] w-full rounded-t-xl border border-border bg-background dark:border-dark-border dark:bg-dark-background"
+          [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="flex items-center justify-center gap-2 rounded-b-xl border border-t-0 border-border bg-background px-3 py-2.5 dark:border-dark-border dark:bg-dark-background"
+        >
+          <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>