@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,239 @@
+import {
+  computed,
+  DestroyRef,
+  Directive,
+  ElementRef,
+  inject,
+  InjectionToken,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import {
+  type PdfErrorEvent,
+  type PdfLoadEvent,
+  type PdfPageChangeEvent,
+  type PdfZoomChangeEvent,
+  type PdfZoomLevel,
+} from './pdf-viewer-types';
+
+export const SC_PDF_VIEWER = new InjectionToken<ScPdfViewerRoot>(
+  'SC_PDF_VIEWER',
+);
+
+@Directive({
+  selector: '[sc-pdf-viewer]',
+  exportAs: 'scPdfViewer',
+  providers: [{ provide: SC_PDF_VIEWER, useExisting: ScPdfViewerRoot }],
+  host: {
+    'data-slot': 'pdf-viewer',
+    '[attr.data-loading]': 'isLoading() || null',
+    '[attr.data-error]': 'error() ? true : null',
+    '[attr.data-fullscreen]': 'isFullscreen() || null',
+  },
+})
+export class ScPdfViewerRoot {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly sanitizer = inject(DomSanitizer);
+
+  // Inputs
+  readonly src = input<string>('');
+  readonly title = input<string>('');
+  readonly initialPage = input(1);
+  readonly initialZoom = input<PdfZoomLevel>('auto');
+
+  // Outputs
+  readonly loaded = output<PdfLoadEvent>();
+  readonly pageChange = output<PdfPageChangeEvent>();
+  readonly zoomChange = output<PdfZoomChangeEvent>();
+  readonly errorEvent = output<PdfErrorEvent>();
+
+  // State signals
+  readonly isLoading = signal(true);
+  readonly error = signal<string | null>(null);
+  readonly currentPage = signal(1);
+  readonly totalPages = signal(1);
+  readonly zoom = signal<PdfZoomLevel>('auto');
+  readonly rotation = signal(0);
+  readonly isFullscreen = signal(false);
+
+  // Container element ref for fullscreen
+  private containerElement: ElementRef<HTMLElement> | null = null;
+
+  // Computed values
+  readonly canGoPrev = computed(() => this.currentPage() > 1);
+  readonly canGoNext = computed(() => this.currentPage() < this.totalPages());
+  readonly hasSource = computed(() => !!this.src());
+  readonly showContent = computed(() => this.hasSource() && !this.error());
+
+  readonly safePdfUrl = computed<SafeResourceUrl | ''>(() => {
+    const source = this.src();
+    if (!source) return '';
+
+    const params = new URLSearchParams();
+    const page = this.currentPage();
+    const z = this.zoom();
+
+    if (page > 1) {
+      params.set('page', page.toString());
+    }
+
+    if (typeof z === 'number') {
+      params.set('zoom', (z * 100).toString());
+    } else if (z === 'page-fit') {
+      params.set('view', 'Fit');
+    } else if (z === 'page-width') {
+      params.set('view', 'FitH');
+    }
+
+    const paramString = params.toString();
+    const separator = source.includes('?') ? '&' : '#';
+
+    const url = paramString ? `${source}${separator}${paramString}` : source;
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  });
+
+  constructor() {
+    this.currentPage.set(this.initialPage());
+    this.zoom.set(this.initialZoom());
+
+    const handleFullscreenChange = () => {
+      this.isFullscreen.set(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    this.destroyRef.onDestroy(() => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    });
+  }
+
+  // Methods for child components to call
+  setContainerElement(element: ElementRef<HTMLElement>): void {
+    this.containerElement = element;
+  }
+
+  onLoad(): void {
+    this.isLoading.set(false);
+    this.error.set(null);
+    this.loaded.emit({ totalPages: this.totalPages() });
+  }
+
+  onError(message = 'Unable to load the PDF document.'): void {
+    this.isLoading.set(false);
+    this.error.set(message);
+    this.errorEvent.emit({
+      error: new Error(message),
+      message,
+    });
+  }
+
+  retry(): void {
+    this.error.set(null);
+    this.isLoading.set(true);
+  }
+
+  goToPrevPage(): void {
+    if (this.canGoPrev()) {
+      this.goToPage(this.currentPage() - 1);
+    }
+  }
+
+  goToNextPage(): void {
+    if (this.canGoNext()) {
+      this.goToPage(this.currentPage() + 1);
+    }
+  }
+
+  goToPage(page: number): void {
+    if (page >= 1 && page <= this.totalPages()) {
+      this.currentPage.set(page);
+      this.pageChange.emit({
+        currentPage: page,
+        totalPages: this.totalPages(),
+      });
+    }
+  }
+
+  zoomIn(): void {
+    const current = this.zoom();
+    let newZoom: number;
+
+    if (typeof current === 'number') {
+      newZoom = Math.min(current + 0.25, 4);
+    } else {
+      newZoom = 1.25;
+    }
+
+    this.setZoom(newZoom);
+  }
+
+  zoomOut(): void {
+    const current = this.zoom();
+    let newZoom: number;
+
+    if (typeof current === 'number') {
+      newZoom = Math.max(current - 0.25, 0.25);
+    } else {
+      newZoom = 0.75;
+    }
+
+    this.setZoom(newZoom);
+  }
+
+  setZoom(level: PdfZoomLevel): void {
+    this.zoom.set(level);
+    this.zoomChange.emit({
+      zoom: level,
+      scale: typeof level === 'number' ? level : 1,
+    });
+  }
+
+  rotateLeft(): void {
+    this.rotation.update((r) => (r - 90) % 360);
+  }
+
+  rotateRight(): void {
+    this.rotation.update((r) => (r + 90) % 360);
+  }
+
+  download(): void {
+    const source = this.src();
+    if (!source) return;
+
+    const link = document.createElement('a');
+    link.href = source;
+    link.download = this.title() || 'document.pdf';
+    link.click();
+  }
+
+  print(): void {
+    const source = this.src();
+    if (!source) return;
+
+    const printWindow = window.open(source);
+    if (printWindow) {
+      printWindow.onload = () => {
+        printWindow.print();
+      };
+    }
+  }
+
+  toggleFullscreen(): void {
+    const container = this.containerElement?.nativeElement;
+    if (!container) return;
+
+    if (!document.fullscreenElement) {
+      container.requestFullscreen().catch((err) => {
+        console.error('Error attempting to enable fullscreen:', err);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  }
+
+  setTotalPages(total: number): void {
+    this.totalPages.set(total);
+  }
+}

package/src/lib/components/pdf-viewer/pdf-viewer-rotate-left.ts

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PDF_VIEWER } from './pdf-viewer-root';
+
+@Component({
+  selector: 'button[sc-pdf-viewer-rotate-left]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-rotate-left',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-label]': '"Rotate left"',
+    '(click)': 'pdfViewer.rotateLeft()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerRotateLeft {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('p-2 rounded-lg hover:bg-muted transition-colors', this.classInput()),
+  );
+}

package/src/lib/components/pdf-viewer/pdf-viewer-rotate-right.ts

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PDF_VIEWER } from './pdf-viewer-root';
+
+@Component({
+  selector: 'button[sc-pdf-viewer-rotate-right]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-rotate-right',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-label]': '"Rotate right"',
+    '(click)': 'pdfViewer.rotateRight()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerRotateRight {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('p-2 rounded-lg hover:bg-muted transition-colors', this.classInput()),
+  );
+}

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

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-pdf-viewer-separator]',
+  template: ``,
+  host: {
+    'data-slot': 'pdf-viewer-separator',
+    role: 'separator',
+    '[attr.aria-orientation]': '"vertical"',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerSeparator {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('w-px h-6 bg-border', this.classInput()),
+  );
+}

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

@@ -0,0 +1,24 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-pdf-viewer-spacer]',
+  template: ``,
+  host: {
+    'data-slot': 'pdf-viewer-spacer',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerSpacer {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('flex-1', this.classInput()));
+}

package/src/lib/components/pdf-viewer/pdf-viewer-toolbar-base.ts

@@ -0,0 +1,34 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+// Toolbar Container (Composable)
+@Component({
+  selector: '[sc-pdf-viewer-toolbar]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-toolbar',
+    role: 'toolbar',
+    '[attr.aria-label]': '"PDF viewer toolbar"',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerToolbar {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex items-center gap-2 px-3 py-2 bg-background border-b',
+      this.classInput(),
+    ),
+  );
+}