@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,47 +0,0 @@
-// 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

@@ -1,54 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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(),
-    ),
-  );
-}