@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,47 @@
+// Root directive
+export { ScPdfViewerRoot, SC_PDF_VIEWER } from './pdf-viewer-root';
+
+// Container
+export { ScPdfViewerContainer } from './pdf-viewer-container';
+
+// Toolbar components
+export { ScPdfViewerToolbar } from './pdf-viewer-toolbar-base';
+export { ScPdfViewerNav } from './pdf-viewer-nav';
+export { ScPdfViewerPrevPage } from './pdf-viewer-prev-page';
+export { ScPdfViewerNextPage } from './pdf-viewer-next-page';
+export { ScPdfViewerPageInfo } from './pdf-viewer-page-info';
+export { ScPdfViewerZoom } from './pdf-viewer-zoom';
+export { ScPdfViewerZoomIn } from './pdf-viewer-zoom-in';
+export { ScPdfViewerZoomOut } from './pdf-viewer-zoom-out';
+export { ScPdfViewerZoomSelect } from './pdf-viewer-zoom-select';
+export { ScPdfViewerRotateLeft } from './pdf-viewer-rotate-left';
+export { ScPdfViewerRotateRight } from './pdf-viewer-rotate-right';
+export { ScPdfViewerDownload } from './pdf-viewer-download';
+export { ScPdfViewerPrint } from './pdf-viewer-print';
+export { ScPdfViewerFullscreen } from './pdf-viewer-fullscreen';
+export { ScPdfViewerSeparator } from './pdf-viewer-separator';
+export { ScPdfViewerSpacer } from './pdf-viewer-spacer';
+
+// Content
+export { ScPdfViewerContent } from './pdf-viewer-content';
+
+// State components
+export { ScPdfViewerLoading } from './pdf-viewer-loading';
+export { ScPdfViewerError } from './pdf-viewer-error';
+export { ScPdfViewerEmpty } from './pdf-viewer-empty';
+export { ScPdfViewerRetry } from './pdf-viewer-retry';
+
+// Types
+export { DEFAULT_TOOLBAR_CONFIG, ZOOM_LEVELS } from './pdf-viewer-types';
+export type {
+  PdfZoomLevel,
+  PdfToolbarConfig,
+  PdfLoadEvent,
+  PdfPageChangeEvent,
+  PdfZoomChangeEvent,
+  PdfErrorEvent,
+} from './pdf-viewer-types';
+
+// Legacy exports for backward compatibility
+export { ScPdfViewer } from './pdf-viewer';
+export { ScPdfViewerToolbar as ScPdfViewerToolbarLegacy } from './pdf-viewer-toolbar';

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

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PDF_VIEWER } from './pdf-viewer-root';
+
+@Component({
+  selector: '[sc-pdf-viewer-container]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-container',
+    '[class]': 'class()',
+    '[class.fullscreen]': 'pdfViewer.isFullscreen()',
+  },
+  styles: `
+    [data-slot='pdf-viewer-container'] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    [data-slot='pdf-viewer-container'].fullscreen {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 50 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerContainer {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('bg-background border rounded-lg overflow-hidden', this.classInput()),
+  );
+
+  constructor() {
+    // Register this container with the root for fullscreen support
+    this.pdfViewer.setContainerElement(this.elementRef);
+  }
+}

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

@@ -0,0 +1,60 @@
+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: '[sc-pdf-viewer-content]',
+  template: `
+    <ng-content />
+
+    @if (pdfViewer.showContent()) {
+      <div
+        class="w-full h-full overflow-auto"
+        [style.transform]="'rotate(' + pdfViewer.rotation() + 'deg)'"
+        [style.transform-origin]="'center center'"
+      >
+        <object
+          [data]="pdfViewer.safePdfUrl()"
+          type="application/pdf"
+          class="w-full h-full"
+          [style.min-height]="'100%'"
+          (load)="pdfViewer.onLoad()"
+          (error)="onError()"
+        >
+          <iframe
+            [src]="pdfViewer.safePdfUrl()"
+            class="w-full h-full border-0"
+            [title]="pdfViewer.title() || 'PDF Document'"
+            (load)="pdfViewer.onLoad()"
+            (error)="onError()"
+          ></iframe>
+        </object>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-content',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerContent {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex-1 relative overflow-hidden bg-muted/30', this.classInput()),
+  );
+
+  protected onError(): void {
+    this.pdfViewer.onError();
+  }
+}

package/src/lib/components/pdf-viewer/pdf-viewer-download.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-download]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-download',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-label]': '"Download PDF"',
+    '(click)': 'pdfViewer.download()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerDownload {
+  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-empty.ts

@@ -0,0 +1,62 @@
+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: '[sc-pdf-viewer-empty]',
+  template: `
+    @if (!pdfViewer.hasSource()) {
+      <div [class]="overlayClass()">
+        <ng-content>
+          <div class="flex flex-col items-center gap-3 text-center px-4">
+            <div
+              class="w-16 h-16 rounded-full bg-muted flex items-center justify-center"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="text-muted-foreground"
+              >
+                <path
+                  d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
+                />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" x2="8" y1="13" y2="13" />
+                <line x1="16" x2="8" y1="17" y2="17" />
+                <line x1="10" x2="8" y1="9" y2="9" />
+              </svg>
+            </div>
+            <p class="text-sm text-muted-foreground">No PDF selected</p>
+          </div>
+        </ng-content>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-empty',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerEmpty {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly overlayClass = computed(() =>
+    cn('absolute inset-0 flex items-center justify-center', this.classInput()),
+  );
+}

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

@@ -0,0 +1,73 @@
+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: '[sc-pdf-viewer-error]',
+  template: `
+    @if (pdfViewer.error()) {
+      <div [class]="overlayClass()">
+        <ng-content>
+          <div class="flex flex-col items-center gap-3 text-center px-4">
+            <div
+              class="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="text-destructive"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="m15 9-6 6" />
+                <path d="m9 9 6 6" />
+              </svg>
+            </div>
+            <p class="text-sm font-medium text-foreground">
+              Failed to load PDF
+            </p>
+            <p class="text-sm text-muted-foreground max-w-xs">
+              {{ pdfViewer.error() }}
+            </p>
+            <button
+              type="button"
+              class="mt-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+              (click)="pdfViewer.retry()"
+            >
+              Retry
+            </button>
+          </div>
+        </ng-content>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-error',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerError {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly overlayClass = computed(() =>
+    cn(
+      'absolute inset-0 flex items-center justify-center bg-background z-10',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,36 @@
+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-fullscreen]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-fullscreen',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-label]':
+      'pdfViewer.isFullscreen() ? "Exit fullscreen" : "Enter fullscreen"',
+    '[attr.aria-pressed]': 'pdfViewer.isFullscreen()',
+    '(click)': 'pdfViewer.toggleFullscreen()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerFullscreen {
+  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-loading.ts

@@ -0,0 +1,44 @@
+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: '[sc-pdf-viewer-loading]',
+  template: `
+    @if (pdfViewer.isLoading()) {
+      <div [class]="overlayClass()">
+        <ng-content>
+          <div class="flex flex-col items-center gap-3">
+            <div
+              class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"
+            ></div>
+            <p class="text-sm text-muted-foreground">Loading PDF...</p>
+          </div>
+        </ng-content>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-loading',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerLoading {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly overlayClass = computed(() =>
+    cn(
+      'absolute inset-0 flex items-center justify-center bg-background/80 z-10',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: '[sc-pdf-viewer-nav]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-nav',
+    role: 'group',
+    '[attr.aria-label]': '"Page navigation"',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerNav {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex items-center gap-1', this.classInput()),
+  );
+}

package/src/lib/components/pdf-viewer/pdf-viewer-next-page.ts

@@ -0,0 +1,38 @@
+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-next-page]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-next-page',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': '!pdfViewer.canGoNext()',
+    '[attr.aria-label]': '"Next page"',
+    '(click)': 'pdfViewer.goToNextPage()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerNextPage {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-2 rounded-lg hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/pdf-viewer/pdf-viewer-page-info.ts

@@ -0,0 +1,53 @@
+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: '[sc-pdf-viewer-page-info]',
+  template: `
+    <input
+      type="number"
+      [value]="pdfViewer.currentPage()"
+      (change)="onPageInput($event)"
+      (keydown.enter)="onPageInput($event)"
+      class="w-12 px-2 py-1 text-sm text-center border rounded bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+      [attr.min]="1"
+      [attr.max]="pdfViewer.totalPages()"
+      aria-label="Current page"
+    />
+    <span class="text-sm text-muted-foreground">
+      / {{ pdfViewer.totalPages() }}
+    </span>
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-page-info',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerPageInfo {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex items-center gap-1 px-2', this.classInput()),
+  );
+
+  protected onPageInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const page = parseInt(input.value, 10);
+    if (!isNaN(page) && page >= 1 && page <= this.pdfViewer.totalPages()) {
+      this.pdfViewer.goToPage(page);
+    } else {
+      input.value = this.pdfViewer.currentPage().toString();
+    }
+  }
+}

package/src/lib/components/pdf-viewer/pdf-viewer-prev-page.ts

@@ -0,0 +1,38 @@
+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-prev-page]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-prev-page',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': '!pdfViewer.canGoPrev()',
+    '[attr.aria-label]': '"Previous page"',
+    '(click)': 'pdfViewer.goToPrevPage()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerPrevPage {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'p-2 rounded-lg hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/pdf-viewer/pdf-viewer-print.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-print]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-print',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-label]': '"Print PDF"',
+    '(click)': 'pdfViewer.print()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerPrint {
+  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-retry.ts

@@ -0,0 +1,36 @@
+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-retry]',
+  template: `
+    <ng-content>Retry</ng-content>
+  `,
+  host: {
+    'data-slot': 'pdf-viewer-retry',
+    type: 'button',
+    '[class]': 'class()',
+    '(click)': 'pdfViewer.retry()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPdfViewerRetry {
+  readonly pdfViewer = inject(SC_PDF_VIEWER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'mt-2 px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors',
+      this.classInput(),
+    ),
+  );
+}