@semantic-components/ui-lab 0.62.0 → 0.63.0

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

@@ -0,0 +1,417 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { cn } from '@semantic-components/ui';
+import { ScPdfViewerToolbar } from './pdf-viewer-toolbar';
+import {
+  DEFAULT_TOOLBAR_CONFIG,
+  type PdfErrorEvent,
+  type PdfLoadEvent,
+  type PdfPageChangeEvent,
+  type PdfToolbarConfig,
+  type PdfZoomLevel,
+  type PdfZoomChangeEvent,
+} from './pdf-viewer-types';
+
+@Component({
+  selector: 'sc-pdf-viewer',
+  imports: [ScPdfViewerToolbar],
+  template: `
+    <div
+      #container
+      [class]="containerClass()"
+      [class.fullscreen]="isFullscreen()"
+    >
+      <!-- Toolbar -->
+      @if (showToolbar()) {
+        <sc-pdf-viewer-toolbar
+          [currentPage]="currentPage()"
+          [totalPages]="totalPages()"
+          [zoom]="zoom()"
+          [isFullscreen]="isFullscreen()"
+          [toolbarConfig]="toolbarConfig()"
+          (prevPage)="goToPrevPage()"
+          (nextPage)="goToNextPage()"
+          (goToPage)="goToPage($event)"
+          (zoomIn)="handleZoomIn()"
+          (zoomOut)="handleZoomOut()"
+          (zoomChange)="handleZoomChange($event)"
+          (rotateLeft)="handleRotateLeft()"
+          (rotateRight)="handleRotateRight()"
+          (download)="handleDownload()"
+          (print)="handlePrint()"
+          (toggleFullscreen)="toggleFullscreen()"
+        />
+      }
+
+      <!-- PDF Container -->
+      <div class="flex-1 relative overflow-hidden bg-muted/30">
+        <!-- Loading State -->
+        @if (isLoading()) {
+          <div
+            class="absolute inset-0 flex items-center justify-center bg-background/80 z-10"
+          >
+            <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>
+          </div>
+        }
+
+        <!-- Error State -->
+        @if (error()) {
+          <div
+            class="absolute inset-0 flex items-center justify-center bg-background z-10"
+          >
+            <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">
+                {{ 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)="retry()"
+              >
+                Retry
+              </button>
+            </div>
+          </div>
+        }
+
+        <!-- PDF Embed -->
+        @if (src() && !error()) {
+          <div
+            class="w-full h-full overflow-auto"
+            [style.transform]="'rotate(' + rotation() + 'deg)'"
+            [style.transform-origin]="'center center'"
+          >
+            <object
+              #pdfObject
+              [data]="safePdfUrl()"
+              type="application/pdf"
+              class="w-full h-full"
+              [style.min-height]="'100%'"
+              (load)="onLoad()"
+              (error)="onError($event)"
+            >
+              <!-- Fallback for browsers that don't support object -->
+              <iframe
+                #pdfIframe
+                [src]="safePdfUrl()"
+                class="w-full h-full border-0"
+                [title]="title() || 'PDF Document'"
+                (load)="onLoad()"
+                (error)="onError($event)"
+              ></iframe>
+            </object>
+          </div>
+        }
+
+        <!-- No Source -->
+        @if (!src()) {
+          <div class="absolute inset-0 flex items-center justify-center">
+            <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>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: block;
+    }
+
+    .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 ScPdfViewer {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly sanitizer = inject(DomSanitizer);
+  private readonly containerRef =
+    viewChild<ElementRef<HTMLDivElement>>('container');
+
+  readonly src = input<string>('');
+  readonly title = input<string>('');
+  readonly showToolbar = input(true);
+  readonly toolbarConfig = input<PdfToolbarConfig>(DEFAULT_TOOLBAR_CONFIG);
+  readonly initialPage = input(1);
+  readonly initialZoom = input<PdfZoomLevel>('auto');
+  readonly class = input<string>('');
+
+  readonly loaded = output<PdfLoadEvent>();
+  readonly pageChange = output<PdfPageChangeEvent>();
+  readonly zoomChange = output<PdfZoomChangeEvent>();
+  readonly errorEvent = output<PdfErrorEvent>();
+
+  protected readonly isLoading = signal(true);
+  protected readonly error = signal<string | null>(null);
+  protected readonly currentPage = signal(1);
+  protected readonly totalPages = signal(1);
+  protected readonly zoom = signal<PdfZoomLevel>('auto');
+  protected readonly rotation = signal(0);
+  protected readonly isFullscreen = signal(false);
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      'flex flex-col bg-background border rounded-lg overflow-hidden',
+      this.class(),
+    ),
+  );
+
+  protected readonly safePdfUrl = computed<SafeResourceUrl | ''>(() => {
+    const source = this.src();
+    if (!source) return '';
+
+    // Build URL with parameters for PDF viewer
+    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() {
+    // Initialize with input values
+    this.currentPage.set(this.initialPage());
+    this.zoom.set(this.initialZoom());
+
+    // Handle fullscreen change
+    const handleFullscreenChange = () => {
+      this.isFullscreen.set(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    this.destroyRef.onDestroy(() => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    });
+  }
+
+  protected onLoad(): void {
+    this.isLoading.set(false);
+    this.error.set(null);
+
+    // Emit load event - totalPages would need PDF.js for accurate count
+    // For now, we set a placeholder
+    this.loaded.emit({ totalPages: this.totalPages() });
+  }
+
+  protected onError(event: Event): void {
+    this.isLoading.set(false);
+    const errorMessage = 'Unable to load the PDF document.';
+    this.error.set(errorMessage);
+    this.errorEvent.emit({
+      error: new Error(errorMessage),
+      message: errorMessage,
+    });
+  }
+
+  protected retry(): void {
+    this.error.set(null);
+    this.isLoading.set(true);
+    // Force reload by updating the signal
+    const currentSrc = this.src();
+    // Trigger change detection
+    setTimeout(() => {
+      this.isLoading.set(true);
+    }, 0);
+  }
+
+  protected goToPrevPage(): void {
+    if (this.currentPage() > 1) {
+      this.goToPage(this.currentPage() - 1);
+    }
+  }
+
+  protected goToNextPage(): void {
+    if (this.currentPage() < this.totalPages()) {
+      this.goToPage(this.currentPage() + 1);
+    }
+  }
+
+  protected goToPage(page: number): void {
+    if (page >= 1 && page <= this.totalPages()) {
+      this.currentPage.set(page);
+      this.pageChange.emit({
+        currentPage: page,
+        totalPages: this.totalPages(),
+      });
+    }
+  }
+
+  protected handleZoomIn(): void {
+    const current = this.zoom();
+    let newZoom: number;
+
+    if (typeof current === 'number') {
+      newZoom = Math.min(current + 0.25, 4);
+    } else {
+      newZoom = 1.25;
+    }
+
+    this.handleZoomChange(newZoom);
+  }
+
+  protected handleZoomOut(): 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.handleZoomChange(newZoom);
+  }
+
+  protected handleZoomChange(level: PdfZoomLevel): void {
+    this.zoom.set(level);
+    this.zoomChange.emit({
+      zoom: level,
+      scale: typeof level === 'number' ? level : 1,
+    });
+  }
+
+  protected handleRotateLeft(): void {
+    this.rotation.update((r) => (r - 90) % 360);
+  }
+
+  protected handleRotateRight(): void {
+    this.rotation.update((r) => (r + 90) % 360);
+  }
+
+  protected handleDownload(): void {
+    const source = this.src();
+    if (!source) return;
+
+    const link = document.createElement('a');
+    link.href = source;
+    link.download = this.title() || 'document.pdf';
+    link.click();
+  }
+
+  protected handlePrint(): void {
+    const source = this.src();
+    if (!source) return;
+
+    const printWindow = window.open(source);
+    if (printWindow) {
+      printWindow.onload = () => {
+        printWindow.print();
+      };
+    }
+  }
+
+  protected toggleFullscreen(): void {
+    const container = this.containerRef()?.nativeElement;
+    if (!container) return;
+
+    if (!document.fullscreenElement) {
+      container.requestFullscreen().catch((err) => {
+        console.error('Error attempting to enable fullscreen:', err);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  }
+
+  // Public methods for external control
+  setPage(page: number): void {
+    this.goToPage(page);
+  }
+
+  setZoom(level: PdfZoomLevel): void {
+    this.handleZoomChange(level);
+  }
+
+  setTotalPages(total: number): void {
+    this.totalPages.set(total);
+  }
+}

package/src/lib/components/phone-input/README.md

@@ -0,0 +1,173 @@
+# Phone Input
+
+Phone number input with country code selector and formatting options.
+
+## Components
+
+- `ScPhoneInput` - Full phone input with searchable country dropdown
+- `ScPhoneInputSimple` - Simple phone input with automatic formatting
+
+## Usage
+
+### With Country Selector
+
+```html
+<sc-phone-input [(value)]="phone" [(countryCode)]="country" defaultCountry="US" (countryChange)="onCountryChange($event)" />
+```
+
+### Simple Input (US Format)
+
+```html
+<sc-phone-input-simple [(value)]="phone" format="us" placeholder="(555) 555-5555" />
+```
+
+### Simple Input (International Format)
+
+```html
+<sc-phone-input-simple [(value)]="phone" format="international" placeholder="+1 555 555 5555" />
+```
+
+## API
+
+### ScPhoneInput
+
+| Input            | Type        | Default          | Description            |
+| ---------------- | ----------- | ---------------- | ---------------------- |
+| `class`          | `string`    | `''`             | Additional CSS classes |
+| `placeholder`    | `string`    | `'Phone number'` | Placeholder text       |
+| `disabled`       | `boolean`   | `false`          | Disable the input      |
+| `defaultCountry` | `string`    | `'US'`           | Default country code   |
+| `countries`      | `Country[]` | `COUNTRIES`      | Custom country list    |
+
+| Output          | Type      | Description                          |
+| --------------- | --------- | ------------------------------------ |
+| `value`         | `string`  | Two-way binding for full number      |
+| `countryCode`   | `string`  | Two-way binding for country code     |
+| `valueChange`   | `string`  | Emits full number with dial code     |
+| `countryChange` | `Country` | Emits when country selection changes |
+
+| Method             | Returns                | Description                    |
+| ------------------ | ---------------------- | ------------------------------ |
+| `focus()`          | `void`                 | Focus the phone input          |
+| `getFullNumber()`  | `string`               | Get full number with dial code |
+| `getPhoneNumber()` | `string`               | Get phone number only          |
+| `getCountry()`     | `Country \| undefined` | Get selected country           |
+
+### ScPhoneInputSimple
+
+| Input         | Type                                | Default            | Description            |
+| ------------- | ----------------------------------- | ------------------ | ---------------------- |
+| `class`       | `string`                            | `''`               | Additional CSS classes |
+| `placeholder` | `string`                            | `'(555) 555-5555'` | Placeholder text       |
+| `disabled`    | `boolean`                           | `false`            | Disable the input      |
+| `showIcon`    | `boolean`                           | `true`             | Show phone icon        |
+| `format`      | `'us' \| 'international' \| 'none'` | `'us'`             | Number format          |
+
+| Output  | Type     | Description                     |
+| ------- | -------- | ------------------------------- |
+| `value` | `string` | Two-way binding for phone value |
+
+| Method          | Returns  | Description                 |
+| --------------- | -------- | --------------------------- |
+| `focus()`       | `void`   | Focus the input             |
+| `getRawValue()` | `string` | Get digits only (no format) |
+
+## Country Interface
+
+```typescript
+interface Country {
+  code: string; // ISO 3166-1 alpha-2 (e.g., 'US')
+  name: string; // Full country name
+  dialCode: string; // Dial code with + (e.g., '+1')
+  flag: string; // Flag emoji
+}
+```
+
+## Format Options
+
+| Format          | Example Output    | Description                |
+| --------------- | ----------------- | -------------------------- |
+| `us`            | `(555) 555-5555`  | US phone number format     |
+| `international` | `+1 555 555 5555` | International format       |
+| `none`          | `5555555555`      | Digits only, no formatting |
+
+## Utility Functions
+
+```typescript
+import { COUNTRIES, getCountryByCode, getCountryByDialCode } from './countries';
+
+// Get all countries
+const allCountries = COUNTRIES;
+
+// Find country by ISO code
+const usa = getCountryByCode('US');
+
+// Find country by dial code
+const uk = getCountryByDialCode('+44');
+```
+
+## Examples
+
+### Contact Form
+
+```html
+<form class="space-y-4">
+  <div>
+    <label>Name</label>
+    <input type="text" />
+  </div>
+  <div>
+    <label>Phone</label>
+    <sc-phone-input defaultCountry="US" />
+  </div>
+  <button type="submit">Submit</button>
+</form>
+```
+
+### With Validation
+
+```typescript
+@Component({
+  template: `
+    <sc-phone-input #phone [(value)]="phoneNumber" />
+    @if (phoneNumber() && phoneNumber().length < 10) {
+      <p class="text-destructive text-sm">Please enter a valid phone number</p>
+    }
+  `,
+})
+export class PhoneForm {
+  phoneNumber = signal('');
+}
+```
+
+### Custom Country List
+
+```typescript
+const europeanCountries: Country[] = [
+  { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧' },
+  { code: 'DE', name: 'Germany', dialCode: '+49', flag: '🇩🇪' },
+  { code: 'FR', name: 'France', dialCode: '+33', flag: '🇫🇷' },
+];
+
+// In template
+<sc-phone-input [countries]="europeanCountries" defaultCountry="GB" />
+```
+
+## Accessibility
+
+- Country selector button has `aria-expanded` and `aria-haspopup`
+- Country options have `role="option"` and `aria-selected`
+- Search input in dropdown for easy filtering
+- Keyboard navigation support (Enter to select, Escape to close)
+- Phone icon is decorative (no aria-label needed)
+
+## Included Countries
+
+The default `COUNTRIES` array includes 50+ countries covering:
+
+- North America (US, CA, MX)
+- Europe (UK, DE, FR, IT, ES, etc.)
+- Asia Pacific (JP, KR, CN, AU, SG, etc.)
+- Middle East (AE, SA, IL)
+- South America (BR, AR, CL, etc.)
+- Africa (ZA, NG, KE, EG)

package/src/lib/components/phone-input/countries.ts

@@ -0,0 +1,69 @@
+export interface Country {
+  code: string;
+  name: string;
+  dialCode: string;
+  flag: string;
+}
+
+export const COUNTRIES: Country[] = [
+  { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸' },
+  { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada', dialCode: '+1', flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia', dialCode: '+61', flag: '🇦🇺' },
+  { code: 'DE', name: 'Germany', dialCode: '+49', flag: '🇩🇪' },
+  { code: 'FR', name: 'France', dialCode: '+33', flag: '🇫🇷' },
+  { code: 'IT', name: 'Italy', dialCode: '+39', flag: '🇮🇹' },
+  { code: 'ES', name: 'Spain', dialCode: '+34', flag: '🇪🇸' },
+  { code: 'PT', name: 'Portugal', dialCode: '+351', flag: '🇵🇹' },
+  { code: 'NL', name: 'Netherlands', dialCode: '+31', flag: '🇳🇱' },
+  { code: 'BE', name: 'Belgium', dialCode: '+32', flag: '🇧🇪' },
+  { code: 'CH', name: 'Switzerland', dialCode: '+41', flag: '🇨🇭' },
+  { code: 'AT', name: 'Austria', dialCode: '+43', flag: '🇦🇹' },
+  { code: 'SE', name: 'Sweden', dialCode: '+46', flag: '🇸🇪' },
+  { code: 'NO', name: 'Norway', dialCode: '+47', flag: '🇳🇴' },
+  { code: 'DK', name: 'Denmark', dialCode: '+45', flag: '🇩🇰' },
+  { code: 'FI', name: 'Finland', dialCode: '+358', flag: '🇫🇮' },
+  { code: 'IE', name: 'Ireland', dialCode: '+353', flag: '🇮🇪' },
+  { code: 'PL', name: 'Poland', dialCode: '+48', flag: '🇵🇱' },
+  { code: 'CZ', name: 'Czech Republic', dialCode: '+420', flag: '🇨🇿' },
+  { code: 'RU', name: 'Russia', dialCode: '+7', flag: '🇷🇺' },
+  { code: 'UA', name: 'Ukraine', dialCode: '+380', flag: '🇺🇦' },
+  { code: 'TR', name: 'Turkey', dialCode: '+90', flag: '🇹🇷' },
+  { code: 'GR', name: 'Greece', dialCode: '+30', flag: '🇬🇷' },
+  { code: 'JP', name: 'Japan', dialCode: '+81', flag: '🇯🇵' },
+  { code: 'KR', name: 'South Korea', dialCode: '+82', flag: '🇰🇷' },
+  { code: 'CN', name: 'China', dialCode: '+86', flag: '🇨🇳' },
+  { code: 'HK', name: 'Hong Kong', dialCode: '+852', flag: '🇭🇰' },
+  { code: 'TW', name: 'Taiwan', dialCode: '+886', flag: '🇹🇼' },
+  { code: 'SG', name: 'Singapore', dialCode: '+65', flag: '🇸🇬' },
+  { code: 'MY', name: 'Malaysia', dialCode: '+60', flag: '🇲🇾' },
+  { code: 'TH', name: 'Thailand', dialCode: '+66', flag: '🇹🇭' },
+  { code: 'VN', name: 'Vietnam', dialCode: '+84', flag: '🇻🇳' },
+  { code: 'PH', name: 'Philippines', dialCode: '+63', flag: '🇵🇭' },
+  { code: 'ID', name: 'Indonesia', dialCode: '+62', flag: '🇮🇩' },
+  { code: 'IN', name: 'India', dialCode: '+91', flag: '🇮🇳' },
+  { code: 'PK', name: 'Pakistan', dialCode: '+92', flag: '🇵🇰' },
+  { code: 'BD', name: 'Bangladesh', dialCode: '+880', flag: '🇧🇩' },
+  { code: 'AE', name: 'United Arab Emirates', dialCode: '+971', flag: '🇦🇪' },
+  { code: 'SA', name: 'Saudi Arabia', dialCode: '+966', flag: '🇸🇦' },
+  { code: 'IL', name: 'Israel', dialCode: '+972', flag: '🇮🇱' },
+  { code: 'EG', name: 'Egypt', dialCode: '+20', flag: '🇪🇬' },
+  { code: 'ZA', name: 'South Africa', dialCode: '+27', flag: '🇿🇦' },
+  { code: 'NG', name: 'Nigeria', dialCode: '+234', flag: '🇳🇬' },
+  { code: 'KE', name: 'Kenya', dialCode: '+254', flag: '🇰🇪' },
+  { code: 'BR', name: 'Brazil', dialCode: '+55', flag: '🇧🇷' },
+  { code: 'MX', name: 'Mexico', dialCode: '+52', flag: '🇲🇽' },
+  { code: 'AR', name: 'Argentina', dialCode: '+54', flag: '🇦🇷' },
+  { code: 'CL', name: 'Chile', dialCode: '+56', flag: '🇨🇱' },
+  { code: 'CO', name: 'Colombia', dialCode: '+57', flag: '🇨🇴' },
+  { code: 'PE', name: 'Peru', dialCode: '+51', flag: '🇵🇪' },
+  { code: 'NZ', name: 'New Zealand', dialCode: '+64', flag: '🇳🇿' },
+];
+
+export function getCountryByCode(code: string): Country | undefined {
+  return COUNTRIES.find((c) => c.code === code);
+}
+
+export function getCountryByDialCode(dialCode: string): Country | undefined {
+  return COUNTRIES.find((c) => c.dialCode === dialCode);
+}

package/src/lib/components/phone-input/index.ts

@@ -0,0 +1,4 @@
+export { ScPhoneInput } from './phone-input';
+export { ScPhoneInputSimple } from './phone-input-simple';
+export { COUNTRIES, getCountryByCode, getCountryByDialCode } from './countries';
+export type { Country } from './countries';