tailjng 0.1.6 → 0.1.7

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,177 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.j-pdf-viewer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 18.75rem;
+}
+
+.j-pdf-viewer__frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 18.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background-color: var(--color-background);
+}
+
+:host-context(.dark) .j-pdf-viewer__frame,
+:host-context(html.dark) .j-pdf-viewer__frame {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+.j-pdf-viewer__frame--mobile {
+  min-height: 60vh;
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+.j-pdf-viewer__fallback,
+.j-pdf-viewer__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  text-align: center;
+  border: 1px dashed var(--color-border);
+  border-radius: 0.75rem;
+  min-height: 18.75rem;
+}
+
+:host-context(.dark) .j-pdf-viewer__fallback,
+:host-context(.dark) .j-pdf-viewer__empty,
+:host-context(html.dark) .j-pdf-viewer__fallback,
+:host-context(html.dark) .j-pdf-viewer__empty {
+  border-color: var(--color-dark-border);
+}
+
+.j-pdf-viewer__fallback {
+  display: none;
+}
+
+.j-pdf-viewer__fallback-title,
+.j-pdf-viewer__mobile-title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+
+:host-context(.dark) .j-pdf-viewer__fallback-title,
+:host-context(.dark) .j-pdf-viewer__mobile-title,
+:host-context(html.dark) .j-pdf-viewer__fallback-title,
+:host-context(html.dark) .j-pdf-viewer__mobile-title {
+  color: var(--color-dark-foreground);
+}
+
+.j-pdf-viewer__fallback-text,
+.j-pdf-viewer__mobile-text,
+.j-pdf-viewer__message {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: var(--color-muted-foreground);
+  max-width: 20rem;
+}
+
+:host-context(.dark) .j-pdf-viewer__fallback-text,
+:host-context(.dark) .j-pdf-viewer__mobile-text,
+:host-context(.dark) .j-pdf-viewer__message,
+:host-context(html.dark) .j-pdf-viewer__fallback-text,
+:host-context(html.dark) .j-pdf-viewer__mobile-text,
+:host-context(html.dark) .j-pdf-viewer__message {
+  color: var(--color-dark-muted-foreground);
+}
+
+.j-pdf-viewer__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.j-pdf-viewer__actions--stacked {
+  flex-direction: column;
+  width: 100%;
+  max-width: 16rem;
+}
+
+.j-pdf-viewer__mobile {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.j-pdf-viewer__mobile-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.875rem;
+  padding: 1.25rem;
+  text-align: center;
+  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%
+  );
+}
+
+.j-pdf-viewer__mobile-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.j-pdf-viewer__mobile-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-top: 0;
+  border-radius: 0 0 0.75rem 0.75rem;
+  background-color: var(--color-background);
+}
+
+:host-context(.dark) .j-pdf-viewer__mobile-bar,
+:host-context(html.dark) .j-pdf-viewer__mobile-bar {
+  border-color: var(--color-dark-border);
+  background-color: var(--color-dark-background);
+}
+
+@media (max-width: 767px) {
+  .j-pdf-viewer {
+    min-height: 14rem;
+  }
+
+  .j-pdf-viewer__frame {
+    min-height: 14rem;
+  }
+}