@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/password-field/password-field-input.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_FIELD } from '../field';
+import { SC_PASSWORD_FIELD } from './password-field';
+
+@Component({
+  selector: 'input[sc-password-field-input]',
+  template: ``,
+  host: {
+    'data-slot': 'password-field-input',
+    '[id]': 'field.id()',
+    '[type]': 'passwordField.visible() ? "text" : "password"',
+    '[class]': 'class()',
+    '[value]': 'passwordField.value()',
+    '[disabled]': 'passwordField.disabled()',
+    '[attr.aria-invalid]': 'passwordField.invalid()',
+    '[readonly]': 'readonly()',
+    '[placeholder]': 'placeholder()',
+    '[autocomplete]': 'autocomplete()',
+    '(input)': 'onInput($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPasswordFieldInput {
+  readonly field = inject(SC_FIELD);
+  readonly passwordField = inject(SC_PASSWORD_FIELD);
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly placeholder = input<string>('');
+  readonly readonly = input<boolean>(false);
+  readonly autocomplete = input<string>('current-password');
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 pr-10 text-sm shadow-sm transition-colors',
+      'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+      'placeholder:text-muted-foreground',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+
+  onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.passwordField.setValue(input.value);
+  }
+}

package/src/lib/components/password-field/password-field-requirements.ts

@@ -0,0 +1,90 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PASSWORD_FIELD } from './password-field';
+
+export interface ScPasswordRequirement {
+  label: string;
+  test: (value: string) => boolean;
+}
+
+const DEFAULT_REQUIREMENTS: ScPasswordRequirement[] = [
+  { label: 'At least 8 characters', test: (v: string) => v.length >= 8 },
+  { label: 'Contains uppercase letter', test: (v: string) => /[A-Z]/.test(v) },
+  { label: 'Contains lowercase letter', test: (v: string) => /[a-z]/.test(v) },
+  { label: 'Contains number', test: (v: string) => /\d/.test(v) },
+  {
+    label: 'Contains special character',
+    test: (v: string) => /[!@#$%^&*(),.?":{}|<>]/.test(v),
+  },
+];
+
+@Component({
+  selector: '[sc-password-field-requirements]',
+  template: `
+    @if (passwordField.value()) {
+      <ul class="mt-2 space-y-1 text-xs">
+        @for (req of requirements(); track req.label) {
+          <li [class]="requirementClass(req.test(passwordField.value()))">
+            @if (req.test(passwordField.value())) {
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="inline size-3 mr-1"
+                aria-hidden="true"
+              >
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            } @else {
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="inline size-3 mr-1"
+                aria-hidden="true"
+              >
+                <circle cx="12" cy="12" r="10" />
+              </svg>
+            }
+            {{ req.label }}
+          </li>
+        }
+      </ul>
+    }
+  `,
+  host: {
+    'data-slot': 'password-field-requirements',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPasswordFieldRequirements {
+  readonly passwordField = inject(SC_PASSWORD_FIELD);
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly requirements = input<ScPasswordRequirement[]>(DEFAULT_REQUIREMENTS);
+
+  protected readonly class = computed(() => cn(this.classInput()));
+
+  protected requirementClass(met: boolean): string {
+    return cn(
+      'flex items-center',
+      met ? 'text-green-600' : 'text-muted-foreground',
+    );
+  }
+}

package/src/lib/components/password-field/password-field-strength-bar.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PASSWORD_FIELD } from './password-field';
+
+@Component({
+  selector: 'div[sc-password-field-strength-bar]',
+  template: ``,
+  host: {
+    'data-slot': 'password-field-strength-bar',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPasswordFieldStrengthBar {
+  readonly passwordField = inject(SC_PASSWORD_FIELD);
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly index = input.required<number>();
+
+  protected readonly strength = computed(() => {
+    const password = this.passwordField.value();
+    if (!password) return 0;
+
+    let score = 0;
+    if (password.length >= 8) score++;
+    if (password.length >= 12) score++;
+    if (/[A-Z]/.test(password)) score++;
+    if (/[a-z]/.test(password)) score++;
+    if (/\d/.test(password)) score++;
+    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score++;
+
+    // Map to 0-4 scale
+    if (score <= 2) return 0;
+    if (score <= 3) return 1;
+    if (score <= 4) return 2;
+    if (score <= 5) return 3;
+    return 4;
+  });
+
+  protected readonly class = computed(() => {
+    const strength = this.strength();
+    const index = this.index();
+    const colors = [
+      'bg-red-500',
+      'bg-orange-500',
+      'bg-yellow-500',
+      'bg-lime-500',
+      'bg-green-500',
+    ];
+
+    return cn(
+      'h-1 flex-1 rounded-full transition-colors',
+      index <= strength ? colors[strength] : 'bg-muted',
+      this.classInput(),
+    );
+  });
+}

package/src/lib/components/password-field/password-field-strength.ts

@@ -0,0 +1,91 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PASSWORD_FIELD } from './password-field';
+
+@Component({
+  selector: '[sc-password-field-strength]',
+  template: `
+    @if (passwordField.value()) {
+      <div class="mt-2 space-y-1">
+        <div class="flex gap-1">
+          @for (i of [0, 1, 2, 3]; track i) {
+            <div [class]="strengthBarClass(i)"></div>
+          }
+        </div>
+        <p [class]="strengthTextClass()">{{ strengthLabel() }}</p>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'password-field-strength',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPasswordFieldStrength {
+  readonly passwordField = inject(SC_PASSWORD_FIELD);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly strength = computed(() => {
+    const password = this.passwordField.value();
+    if (!password) return 0;
+
+    let score = 0;
+    if (password.length >= 8) score++;
+    if (password.length >= 12) score++;
+    if (/[A-Z]/.test(password)) score++;
+    if (/[a-z]/.test(password)) score++;
+    if (/\d/.test(password)) score++;
+    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) score++;
+
+    // Map to 0-4 scale
+    if (score <= 2) return 0;
+    if (score <= 3) return 1;
+    if (score <= 4) return 2;
+    if (score <= 5) return 3;
+    return 4;
+  });
+
+  protected readonly strengthLabel = computed(() => {
+    const labels = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
+    return labels[this.strength()];
+  });
+
+  protected readonly class = computed(() => cn(this.classInput()));
+
+  protected strengthBarClass(index: number): string {
+    const strength = this.strength();
+    const colors = [
+      'bg-red-500',
+      'bg-orange-500',
+      'bg-yellow-500',
+      'bg-lime-500',
+      'bg-green-500',
+    ];
+
+    return cn(
+      'h-1 flex-1 rounded-full transition-colors',
+      index <= strength ? colors[strength] : 'bg-muted',
+    );
+  }
+
+  protected readonly strengthTextClass = computed(() => {
+    const strength = this.strength();
+    const colors = [
+      'text-red-500',
+      'text-orange-500',
+      'text-yellow-500',
+      'text-lime-500',
+      'text-green-500',
+    ];
+    return cn('text-xs', colors[strength]);
+  });
+}

package/src/lib/components/password-field/password-field-toggle.ts

@@ -0,0 +1,86 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_PASSWORD_FIELD } from './password-field';
+
+@Component({
+  selector: 'button[sc-password-field-toggle]',
+  template: `
+    <ng-content>
+      @if (passwordField.visible()) {
+        <!-- Eye off icon -->
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4"
+        >
+          <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+          <path
+            d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"
+          />
+          <path
+            d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"
+          />
+          <line x1="2" x2="22" y1="2" y2="22" />
+        </svg>
+      } @else {
+        <!-- Eye icon -->
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="size-4"
+        >
+          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+          <circle cx="12" cy="12" r="3" />
+        </svg>
+      }
+    </ng-content>
+  `,
+  host: {
+    'data-slot': 'password-field-toggle',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'passwordField.disabled()',
+    '[attr.aria-label]':
+      'passwordField.visible() ? "Hide password" : "Show password"',
+    '[attr.aria-pressed]': 'passwordField.visible()',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPasswordFieldToggle {
+  readonly passwordField = inject(SC_PASSWORD_FIELD);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute right-0 top-0 h-full px-3 py-2',
+      'text-muted-foreground hover:text-foreground',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'transition-colors',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.passwordField.toggle();
+  }
+}

package/src/lib/components/password-field/password-field.ts

@@ -0,0 +1,95 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  computed,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  InjectionToken,
+  input,
+  model,
+  ModelSignal,
+  output,
+  signal,
+  untracked,
+  WritableSignal,
+} from '@angular/core';
+import { SC_FIELD } from '../field';
+
+// Token for password field context - interface to avoid circular dependency
+export interface ScPasswordFieldContext {
+  readonly value: ModelSignal<string>;
+  readonly visible: WritableSignal<boolean>;
+  readonly disabled: () => boolean;
+  readonly invalid: () => boolean;
+  toggle(): void;
+  setValue(value: string): void;
+}
+
+export const SC_PASSWORD_FIELD = new InjectionToken<ScPasswordFieldContext>(
+  'SC_PASSWORD_FIELD',
+);
+
+@Directive({
+  selector: 'div[sc-password-field], label[sc-password-field]',
+  exportAs: 'scPasswordField',
+  providers: [
+    { provide: SC_PASSWORD_FIELD, useExisting: ScPasswordField },
+    { provide: SC_FIELD, useExisting: ScPasswordField },
+  ],
+  host: {
+    '[attr.role]': 'role()',
+    'data-slot': 'password-field',
+    '[attr.data-invalid]': 'invalid()',
+    '[attr.data-disabled]': 'disabled() || null',
+  },
+})
+export class ScPasswordField implements ScPasswordFieldContext {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly id = input(inject(_IdGenerator).getId('sc-password-field-'));
+
+  protected readonly role = computed(() => {
+    const tagName = this.elementRef.nativeElement.tagName;
+    return tagName === 'LABEL' ? null : 'group';
+  });
+  readonly invalid = input<boolean>(false);
+  readonly value = model<string>('');
+  readonly disabled = input<boolean>(false);
+  readonly showByDefault = input<boolean>(false);
+
+  readonly valueChange = output<string>();
+  readonly visibilityChange = output<boolean>();
+
+  readonly visible = signal(false);
+
+  private readonly showByDefaultEffect = effect(() => {
+    const showByDefault = this.showByDefault();
+    untracked(() => {
+      if (showByDefault) {
+        this.visible.set(true);
+      }
+    });
+  });
+
+  toggle(): void {
+    this.visible.update((v) => !v);
+    this.visibilityChange.emit(this.visible());
+  }
+
+  show(): void {
+    this.visible.set(true);
+    this.visibilityChange.emit(true);
+  }
+
+  hide(): void {
+    this.visible.set(false);
+    this.visibilityChange.emit(false);
+  }
+
+  setValue(value: string): void {
+    if (this.disabled()) return;
+    this.value.set(value);
+    this.valueChange.emit(value);
+  }
+}

package/src/lib/components/pdf-viewer/README.md

@@ -0,0 +1,221 @@
+# PDF Viewer
+
+A document viewer component for displaying PDF files with navigation, zoom, and toolbar controls.
+
+## Installation
+
+Import the components from the pdf-viewer module:
+
+```typescript
+import { ScPdfViewer, ScPdfViewerToolbar } from '@/ui/pdf-viewer';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<sc-pdf-viewer [src]="pdfUrl" [title]="'My Document'" class="h-[600px]" />
+```
+
+### With Event Handlers
+
+```html
+<sc-pdf-viewer [src]="pdfUrl" (loaded)="onLoaded($event)" (pageChange)="onPageChange($event)" (zoomChange)="onZoomChange($event)" (errorEvent)="onError($event)" />
+```
+
+```typescript
+import type {
+  PdfLoadEvent,
+  PdfPageChangeEvent,
+  PdfZoomChangeEvent,
+  PdfErrorEvent,
+} from '@/ui/pdf-viewer';
+
+onLoaded(event: PdfLoadEvent): void {
+  console.log('PDF loaded, total pages:', event.totalPages);
+}
+
+onPageChange(event: PdfPageChangeEvent): void {
+  console.log('Page:', event.currentPage, '/', event.totalPages);
+}
+
+onZoomChange(event: PdfZoomChangeEvent): void {
+  console.log('Zoom level:', event.zoom, 'Scale:', event.scale);
+}
+
+onError(event: PdfErrorEvent): void {
+  console.error('Error loading PDF:', event.message);
+}
+```
+
+### Without Toolbar
+
+```html
+<sc-pdf-viewer [src]="pdfUrl" [showToolbar]="false" />
+```
+
+### Custom Toolbar Configuration
+
+```html
+<sc-pdf-viewer
+  [src]="pdfUrl"
+  [toolbarConfig]="{
+    showNavigation: true,
+    showPageInfo: true,
+    showZoom: true,
+    showRotate: false,
+    showDownload: true,
+    showPrint: false,
+    showFullscreen: true
+  }"
+/>
+```
+
+### Initial Page and Zoom
+
+```html
+<sc-pdf-viewer [src]="pdfUrl" [initialPage]="3" [initialZoom]="1.5" />
+```
+
+### Programmatic Control
+
+```typescript
+import { viewChild } from '@angular/core';
+import { ScPdfViewer } from '@/ui/pdf-viewer';
+
+readonly pdfViewer = viewChild(ScPdfViewer);
+
+goToPage(page: number): void {
+  this.pdfViewer()?.setPage(page);
+}
+
+setZoom(level: PdfZoomLevel): void {
+  this.pdfViewer()?.setZoom(level);
+}
+```
+
+## API Reference
+
+### ScPdfViewer
+
+The main PDF viewer component.
+
+#### Inputs
+
+| Input           | Type               | Default                  | Description                        |
+| --------------- | ------------------ | ------------------------ | ---------------------------------- |
+| `src`           | `string`           | `''`                     | URL of the PDF document            |
+| `title`         | `string`           | `''`                     | Document title for a11y & download |
+| `showToolbar`   | `boolean`          | `true`                   | Show or hide the toolbar           |
+| `toolbarConfig` | `PdfToolbarConfig` | `DEFAULT_TOOLBAR_CONFIG` | Configure toolbar controls         |
+| `initialPage`   | `number`           | `1`                      | Initial page to display            |
+| `initialZoom`   | `PdfZoomLevel`     | `'auto'`                 | Initial zoom level                 |
+| `class`         | `string`           | `''`                     | Additional CSS classes             |
+
+#### Outputs
+
+| Output       | Type                 | Description                |
+| ------------ | -------------------- | -------------------------- |
+| `loaded`     | `PdfLoadEvent`       | Emitted when PDF is loaded |
+| `pageChange` | `PdfPageChangeEvent` | Emitted when page changes  |
+| `zoomChange` | `PdfZoomChangeEvent` | Emitted when zoom changes  |
+| `errorEvent` | `PdfErrorEvent`      | Emitted on load error      |
+
+#### Public Methods
+
+| Method            | Parameters            | Description                 |
+| ----------------- | --------------------- | --------------------------- |
+| `setPage()`       | `page: number`        | Navigate to a specific page |
+| `setZoom()`       | `level: PdfZoomLevel` | Set the zoom level          |
+| `setTotalPages()` | `total: number`       | Set total page count        |
+
+### ScPdfViewerToolbar
+
+Standalone toolbar component (used internally or separately).
+
+## Type Definitions
+
+### PdfToolbarConfig
+
+```typescript
+interface PdfToolbarConfig {
+  showNavigation?: boolean; // Page navigation buttons
+  showZoom?: boolean; // Zoom controls
+  showDownload?: boolean; // Download button
+  showPrint?: boolean; // Print button
+  showFullscreen?: boolean; // Fullscreen toggle
+  showPageInfo?: boolean; // Page number display
+  showRotate?: boolean; // Rotate buttons
+}
+```
+
+### PdfZoomLevel
+
+```typescript
+type PdfZoomLevel = 'auto' | 'page-fit' | 'page-width' | number;
+```
+
+Available zoom presets:
+
+- `'auto'` - Automatic fit
+- `'page-fit'` - Fit entire page
+- `'page-width'` - Fit to page width
+- `number` - Specific scale (e.g., `1.5` for 150%)
+
+### Event Types
+
+```typescript
+interface PdfLoadEvent {
+  totalPages: number;
+}
+
+interface PdfPageChangeEvent {
+  currentPage: number;
+  totalPages: number;
+}
+
+interface PdfZoomChangeEvent {
+  zoom: PdfZoomLevel;
+  scale: number;
+}
+
+interface PdfErrorEvent {
+  error: Error;
+  message: string;
+}
+```
+
+## Features
+
+- **Native PDF Rendering**: Uses browser's built-in PDF viewer for maximum compatibility
+- **Page Navigation**: Previous/next buttons and direct page input
+- **Zoom Controls**: Zoom in/out, preset levels, and custom percentages
+- **Rotation**: Rotate document left or right
+- **Download**: Download the PDF file
+- **Print**: Print the document
+- **Fullscreen**: Toggle fullscreen viewing mode
+- **Loading State**: Shows spinner while PDF is loading
+- **Error Handling**: Displays error message with retry option
+- **Empty State**: Placeholder when no PDF is loaded
+- **Customizable Toolbar**: Show/hide individual controls
+- **Keyboard Accessible**: All controls are keyboard navigable
+
+## Styling
+
+The component uses Tailwind CSS classes and supports theming through CSS variables:
+
+- `--background` / `--foreground`: Base colors
+- `--muted` / `--muted-foreground`: Secondary colors
+- `--primary` / `--primary-foreground`: Accent colors
+- `--destructive`: Error colors
+- `--ring`: Focus ring color
+- `--border`: Border colors
+
+## Notes
+
+- **CORS**: PDF URLs must be served with appropriate CORS headers for cross-origin access
+- **Browser Support**: Uses native browser PDF rendering via `<object>` and `<iframe>` elements
+- **Page Count**: For accurate page count tracking, consider integrating PDF.js
+- **Print/Download**: Depends on browser permissions and PDF URL accessibility
+- **Security**: Be cautious with user-provided PDF URLs to prevent security issues