@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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