@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/badge/badge.ts

@@ -0,0 +1,43 @@
+import { computed, Directive, input } from '@angular/core';
+import { cva, VariantProps } from 'class-variance-authority';
+import { cn } from '@semantic-components/ui';
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type ScBadgeVariants = VariantProps<typeof badgeVariants>;
+
+@Directive({
+  selector: 'div[sc-badge], span[sc-badge]',
+  host: {
+    'data-slot': 'badge',
+    '[class]': 'class()',
+  },
+})
+export class ScBadge {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly variant = input<ScBadgeVariants['variant']>('default');
+
+  protected readonly class = computed(() =>
+    cn(badgeVariants({ variant: this.variant() }), this.classInput()),
+  );
+}

package/src/lib/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge';

package/src/lib/components/barcode-scanner/README.md

@@ -0,0 +1,144 @@
+# Barcode Scanner
+
+Scan barcodes and QR codes using your device's camera with the Barcode Detection API.
+
+## Components
+
+- `ScBarcodeScanner` - Full-featured scanner with controls
+- `ScBarcodeScannerSimple` - Simplified scanner wrapper
+
+## Usage
+
+```html
+<sc-barcode-scanner (detected)="onDetected($event)" />
+```
+
+## API
+
+### BarcodeFormat
+
+```typescript
+type BarcodeFormat = 'aztec' | 'code_128' | 'code_39' | 'code_93' | 'codabar' | 'data_matrix' | 'ean_13' | 'ean_8' | 'itf' | 'pdf417' | 'qr_code' | 'upc_a' | 'upc_e';
+```
+
+### BarcodeResult
+
+```typescript
+interface BarcodeResult {
+  rawValue: string;
+  format: BarcodeFormat;
+  boundingBox?: DOMRectReadOnly;
+  cornerPoints?: { x: number; y: number }[];
+}
+```
+
+### ScBarcodeScanner
+
+| Input            | Type              | Default                      | Description                   |
+| ---------------- | ----------------- | ---------------------------- | ----------------------------- |
+| `formats`        | `BarcodeFormat[]` | `['qr_code', 'ean_13', ...]` | Formats to detect             |
+| `showLastResult` | `boolean`         | `true`                       | Show last scanned code        |
+| `continuous`     | `boolean`         | `true`                       | Keep scanning after detection |
+| `scanInterval`   | `number`          | `100`                        | Detection interval (ms)       |
+| `class`          | `string`          | -                            | Additional CSS classes        |
+
+| Output     | Type            | Description                 |
+| ---------- | --------------- | --------------------------- |
+| `detected` | `BarcodeResult` | Emits when barcode detected |
+| `error$`   | `string`        | Emits on error              |
+
+## Examples
+
+### Basic Usage
+
+```html
+<sc-barcode-scanner (detected)="onDetected($event)" />
+```
+
+```typescript
+onDetected(result: BarcodeResult): void {
+  console.log('Scanned:', result.rawValue);
+  console.log('Format:', result.format);
+}
+```
+
+### QR Code Only
+
+```html
+<sc-barcode-scanner [formats]="['qr_code']" (detected)="onQRDetected($event)" />
+```
+
+### Product Barcodes
+
+```html
+<sc-barcode-scanner [formats]="['ean_13', 'ean_8', 'upc_a', 'upc_e']" (detected)="onProductDetected($event)" />
+```
+
+### Single Scan Mode
+
+Stop scanning after first detection:
+
+```html
+<sc-barcode-scanner [continuous]="false" (detected)="onSingleScan($event)" />
+```
+
+### Without Result Overlay
+
+```html
+<sc-barcode-scanner [showLastResult]="false" (detected)="handleResult($event)" />
+```
+
+## Features
+
+- Real-time barcode detection
+- Multiple barcode format support
+- Front/back camera switching
+- Flashlight/torch control (where supported)
+- Scanning area indicator
+- Last result overlay
+- Start/stop controls
+- Graceful fallback for unsupported browsers
+
+## Browser Support
+
+The Barcode Detection API is supported in:
+
+| Browser          | Support           |
+| ---------------- | ----------------- |
+| Chrome 83+       | Desktop & Android |
+| Edge 83+         | Desktop           |
+| Opera 69+        | Desktop & Android |
+| Samsung Internet | Android           |
+| Firefox          | Not supported     |
+| Safari           | Not supported     |
+
+For unsupported browsers, the component displays a helpful message.
+
+## Permissions
+
+The scanner requires camera access. Users will be prompted to grant permission when scanning starts.
+
+## Supported Barcode Formats
+
+| Format        | Description                         |
+| ------------- | ----------------------------------- |
+| `qr_code`     | QR Code                             |
+| `ean_13`      | European Article Number (13 digits) |
+| `ean_8`       | European Article Number (8 digits)  |
+| `upc_a`       | Universal Product Code A            |
+| `upc_e`       | Universal Product Code E            |
+| `code_128`    | Code 128                            |
+| `code_39`     | Code 39                             |
+| `code_93`     | Code 93                             |
+| `codabar`     | Codabar                             |
+| `itf`         | Interleaved 2 of 5                  |
+| `pdf417`      | PDF417                              |
+| `aztec`       | Aztec Code                          |
+| `data_matrix` | Data Matrix                         |
+
+## Accessibility
+
+- Keyboard accessible controls
+- ARIA labels on buttons
+- Focus indicators
+- Status messages for screen readers

package/src/lib/components/barcode-scanner/barcode-scanner-simple.ts

@@ -0,0 +1,36 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  ViewEncapsulation,
+} from '@angular/core';
+import {
+  ScBarcodeScanner,
+  BarcodeFormat,
+  BarcodeResult,
+} from './barcode-scanner';
+
+@Component({
+  selector: 'sc-barcode-scanner-simple',
+  imports: [ScBarcodeScanner],
+  template: `
+    <sc-barcode-scanner
+      [formats]="formats()"
+      [continuous]="continuous()"
+      [showLastResult]="showLastResult()"
+      (detected)="detected.emit($event)"
+      [class]="class()"
+    />
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScBarcodeScannerSimple {
+  readonly formats = input<BarcodeFormat[]>(['qr_code']);
+  readonly continuous = input<boolean>(false);
+  readonly showLastResult = input<boolean>(true);
+  readonly class = input<string>('');
+
+  readonly detected = output<BarcodeResult>();
+}

package/src/lib/components/barcode-scanner/barcode-scanner.ts

@@ -0,0 +1,460 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export type BarcodeFormat =
+  | 'aztec'
+  | 'code_128'
+  | 'code_39'
+  | 'code_93'
+  | 'codabar'
+  | 'data_matrix'
+  | 'ean_13'
+  | 'ean_8'
+  | 'itf'
+  | 'pdf417'
+  | 'qr_code'
+  | 'upc_a'
+  | 'upc_e';
+
+export interface BarcodeResult {
+  rawValue: string;
+  format: BarcodeFormat;
+  boundingBox?: DOMRectReadOnly;
+  cornerPoints?: { x: number; y: number }[];
+}
+
+// BarcodeDetector type declaration for browsers that support it
+declare class BarcodeDetector {
+  constructor(options?: { formats: string[] });
+  detect(image: ImageBitmapSource): Promise<DetectedBarcode[]>;
+  static getSupportedFormats(): Promise<string[]>;
+}
+
+interface DetectedBarcode {
+  rawValue: string;
+  format: string;
+  boundingBox: DOMRectReadOnly;
+  cornerPoints: { x: number; y: number }[];
+}
+
+@Component({
+  selector: 'sc-barcode-scanner',
+  template: `
+    <div [class]="containerClass()">
+      @if (!isSupported()) {
+        <div class="flex flex-col items-center justify-center p-8 text-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            class="size-12 text-muted-foreground mb-4"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" x2="12" y1="8" y2="12" />
+            <line x1="12" x2="12.01" y1="16" y2="16" />
+          </svg>
+          <p class="text-lg font-medium mb-2">Barcode Scanner Not Supported</p>
+          <p class="text-sm text-muted-foreground">
+            Your browser doesn't support the Barcode Detection API. Try using
+            Chrome, Edge, or Opera on desktop/Android.
+          </p>
+        </div>
+      } @else if (error()) {
+        <div class="flex flex-col items-center justify-center p-8 text-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            class="size-12 text-destructive mb-4"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" x2="9" y1="9" y2="15" />
+            <line x1="9" x2="15" y1="9" y2="15" />
+          </svg>
+          <p class="text-lg font-medium mb-2">Camera Error</p>
+          <p class="text-sm text-muted-foreground mb-4">{{ error() }}</p>
+          <button
+            type="button"
+            (click)="startScanning()"
+            class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+          >
+            Try Again
+          </button>
+        </div>
+      } @else {
+        <!-- Video Preview -->
+        <div class="relative">
+          <video
+            #videoElement
+            [class]="videoClass()"
+            autoplay
+            playsinline
+            muted
+          ></video>
+
+          <!-- Scanning Overlay -->
+          @if (isScanning()) {
+            <div class="absolute inset-0 pointer-events-none">
+              <!-- Corner markers -->
+              <div
+                class="absolute inset-8 border-2 border-primary/50 rounded-lg"
+              >
+                <div
+                  class="absolute -top-0.5 -left-0.5 w-8 h-8 border-t-4 border-l-4 border-primary rounded-tl-lg"
+                ></div>
+                <div
+                  class="absolute -top-0.5 -right-0.5 w-8 h-8 border-t-4 border-r-4 border-primary rounded-tr-lg"
+                ></div>
+                <div
+                  class="absolute -bottom-0.5 -left-0.5 w-8 h-8 border-b-4 border-l-4 border-primary rounded-bl-lg"
+                ></div>
+                <div
+                  class="absolute -bottom-0.5 -right-0.5 w-8 h-8 border-b-4 border-r-4 border-primary rounded-br-lg"
+                ></div>
+              </div>
+
+              <!-- Scanning line animation -->
+              <div class="absolute inset-x-8 top-8 bottom-8 overflow-hidden">
+                <div class="h-0.5 bg-primary/80 animate-scan"></div>
+              </div>
+            </div>
+          }
+
+          <!-- Last detected barcode overlay -->
+          @if (lastResult() && showLastResult()) {
+            <div
+              class="absolute bottom-4 left-4 right-4 bg-black/80 text-white p-3 rounded-lg"
+            >
+              <p class="text-xs text-white/70 mb-1">
+                {{ lastResult()?.format }}
+              </p>
+              <p class="font-mono text-sm break-all">
+                {{ lastResult()?.rawValue }}
+              </p>
+            </div>
+          }
+        </div>
+
+        <!-- Controls -->
+        <div class="flex items-center justify-between p-4 border-t">
+          <div class="flex items-center gap-2">
+            @if (!isScanning()) {
+              <button
+                type="button"
+                (click)="startScanning()"
+                class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  class="size-4"
+                >
+                  <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+                  <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+                  <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+                  <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+                  <rect width="10" height="8" x="7" y="8" rx="1" />
+                </svg>
+                Start Scanning
+              </button>
+            } @else {
+              <button
+                type="button"
+                (click)="stopScanning()"
+                class="inline-flex items-center gap-2 px-4 py-2 border rounded-md hover:bg-accent"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  class="size-4"
+                >
+                  <rect x="6" y="6" width="12" height="12" rx="2" />
+                </svg>
+                Stop
+              </button>
+            }
+
+            <!-- Camera switch -->
+            @if (hasMultipleCameras() && isScanning()) {
+              <button
+                type="button"
+                (click)="switchCamera()"
+                class="p-2 border rounded-md hover:bg-accent"
+                aria-label="Switch camera"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  class="size-5"
+                >
+                  <path d="M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" />
+                  <path d="M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5" />
+                  <circle cx="12" cy="12" r="3" />
+                  <path d="m18 22-3-3 3-3" />
+                  <path d="m6 2 3 3-3 3" />
+                </svg>
+              </button>
+            }
+          </div>
+
+          <!-- Torch toggle -->
+          @if (hasTorch() && isScanning()) {
+            <button
+              type="button"
+              (click)="toggleTorch()"
+              [class]="
+                torchOn()
+                  ? 'p-2 bg-yellow-500 text-white rounded-md'
+                  : 'p-2 border rounded-md hover:bg-accent'
+              "
+              aria-label="Toggle flashlight"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="size-5"
+              >
+                <path
+                  d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z"
+                />
+                <line x1="6" x2="18" y1="6" y2="6" />
+                <line x1="12" x2="12" y1="12" y2="12" />
+              </svg>
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `,
+  styles: `
+    @keyframes scan {
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(calc(100% - 2px));
+      }
+    }
+    .animate-scan {
+      animation: scan 2s ease-in-out infinite;
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScBarcodeScanner {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly videoRef =
+    viewChild<ElementRef<HTMLVideoElement>>('videoElement');
+
+  // Inputs
+  readonly formats = input<BarcodeFormat[]>([
+    'qr_code',
+    'ean_13',
+    'ean_8',
+    'code_128',
+    'code_39',
+    'upc_a',
+    'upc_e',
+  ]);
+  readonly showLastResult = input<boolean>(true);
+  readonly continuous = input<boolean>(true);
+  readonly scanInterval = input<number>(100);
+  readonly class = input<string>('');
+
+  // Outputs
+  readonly detected = output<BarcodeResult>();
+  readonly error$ = output<string>();
+
+  // Internal state
+  readonly isSupported = signal(false);
+  readonly isScanning = signal(false);
+  readonly error = signal<string | null>(null);
+  readonly lastResult = signal<BarcodeResult | null>(null);
+  readonly hasMultipleCameras = signal(false);
+  readonly hasTorch = signal(false);
+  readonly torchOn = signal(false);
+
+  private stream: MediaStream | null = null;
+  private detector: BarcodeDetector | null = null;
+  private scanIntervalId: ReturnType<typeof setInterval> | null = null;
+  private currentFacingMode: 'user' | 'environment' = 'environment';
+  private videoTrack: MediaStreamTrack | null = null;
+
+  protected readonly containerClass = computed(() =>
+    cn('bg-card border rounded-lg overflow-hidden', this.class()),
+  );
+
+  protected readonly videoClass = computed(() =>
+    cn('w-full aspect-video object-cover bg-muted'),
+  );
+
+  constructor() {
+    // Check for BarcodeDetector support
+    this.isSupported.set('BarcodeDetector' in window);
+
+    this.destroyRef.onDestroy(() => {
+      this.stopScanning();
+    });
+  }
+
+  async startScanning(): Promise<void> {
+    if (!this.isSupported()) return;
+
+    this.error.set(null);
+
+    try {
+      // Initialize detector
+      this.detector = new BarcodeDetector({
+        formats: this.formats() as string[],
+      });
+
+      // Check for multiple cameras
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const cameras = devices.filter((d) => d.kind === 'videoinput');
+      this.hasMultipleCameras.set(cameras.length > 1);
+
+      // Request camera access
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: this.currentFacingMode,
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+        },
+      });
+
+      const video = this.videoRef()?.nativeElement;
+      if (video) {
+        video.srcObject = this.stream;
+        await video.play();
+      }
+
+      // Check for torch support
+      this.videoTrack = this.stream.getVideoTracks()[0];
+      const capabilities =
+        this.videoTrack?.getCapabilities?.() as MediaTrackCapabilities & {
+          torch?: boolean;
+        };
+      this.hasTorch.set(!!capabilities?.torch);
+
+      this.isScanning.set(true);
+      this.startDetection();
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Failed to access camera';
+      this.error.set(message);
+      this.error$.emit(message);
+    }
+  }
+
+  stopScanning(): void {
+    this.isScanning.set(false);
+
+    if (this.scanIntervalId) {
+      clearInterval(this.scanIntervalId);
+      this.scanIntervalId = null;
+    }
+
+    if (this.stream) {
+      this.stream.getTracks().forEach((track) => track.stop());
+      this.stream = null;
+    }
+
+    const video = this.videoRef()?.nativeElement;
+    if (video) {
+      video.srcObject = null;
+    }
+
+    this.torchOn.set(false);
+    this.videoTrack = null;
+  }
+
+  async switchCamera(): Promise<void> {
+    this.currentFacingMode =
+      this.currentFacingMode === 'environment' ? 'user' : 'environment';
+    this.stopScanning();
+    await this.startScanning();
+  }
+
+  async toggleTorch(): Promise<void> {
+    if (!this.videoTrack) return;
+
+    try {
+      const newState = !this.torchOn();
+      await this.videoTrack.applyConstraints({
+        advanced: [{ torch: newState } as MediaTrackConstraintSet],
+      });
+      this.torchOn.set(newState);
+    } catch {
+      // Torch not supported or failed
+    }
+  }
+
+  private startDetection(): void {
+    if (this.scanIntervalId) {
+      clearInterval(this.scanIntervalId);
+    }
+
+    this.scanIntervalId = setInterval(async () => {
+      await this.detectBarcode();
+    }, this.scanInterval());
+  }
+
+  private async detectBarcode(): Promise<void> {
+    const video = this.videoRef()?.nativeElement;
+    if (!video || !this.detector || video.readyState !== video.HAVE_ENOUGH_DATA)
+      return;
+
+    try {
+      const barcodes = await this.detector.detect(video);
+
+      if (barcodes.length > 0) {
+        const barcode = barcodes[0];
+        const result: BarcodeResult = {
+          rawValue: barcode.rawValue,
+          format: barcode.format as BarcodeFormat,
+          boundingBox: barcode.boundingBox,
+          cornerPoints: barcode.cornerPoints,
+        };
+
+        this.lastResult.set(result);
+        this.detected.emit(result);
+
+        if (!this.continuous()) {
+          this.stopScanning();
+        }
+      }
+    } catch {
+      // Detection failed, continue scanning
+    }
+  }
+}

package/src/lib/components/barcode-scanner/index.ts

@@ -0,0 +1,3 @@
+export { ScBarcodeScanner } from './barcode-scanner';
+export { ScBarcodeScannerSimple } from './barcode-scanner-simple';
+export type { BarcodeFormat, BarcodeResult } from './barcode-scanner';