@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/progress/progress.ts

@@ -0,0 +1,62 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from '@angular/core';
+import type { FormValueControl } from '@angular/forms/signals';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-progress]',
+  host: {
+    role: 'progressbar',
+    'data-slot': 'progress',
+    '[class]': 'class()',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': 'max()',
+    '[attr.aria-valuenow]': 'value()',
+    '[attr.data-state]': 'state()',
+  },
+  template: `
+    <div
+      data-slot="progress-indicator"
+      [class]="indicatorClass()"
+      [style.transform]="'translateX(-' + (100 - percentage()) + '%)'"
+    ></div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScProgress implements FormValueControl<number | null> {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = model<number | null>(null);
+  readonly max = input<number | undefined>(100);
+
+  protected readonly percentage = computed(() => {
+    const val = this.value();
+    const maxVal = this.max() ?? 100;
+    if (val === null || maxVal === 0) return 0;
+    return Math.min(Math.max((val / maxVal) * 100, 0), 100);
+  });
+
+  protected readonly state = computed(() => {
+    const val = this.value();
+    const maxVal = this.max() ?? 100;
+    if (val === null) return 'indeterminate';
+    return val >= maxVal ? 'complete' : 'loading';
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      this.classInput(),
+    ),
+  );
+
+  protected readonly indicatorClass = computed(() =>
+    cn('h-full w-full flex-1 bg-primary transition-all'),
+  );
+}

package/src/lib/components/qr-code/README.md

@@ -0,0 +1,124 @@
+# QR Code
+
+Generate QR codes from text or URLs with customizable colors and optional logo support.
+
+## Components
+
+- `ScQrCode` - Basic QR code generator
+- `ScQrCodeDownload` - QR code with download button
+
+## Usage
+
+```html
+<sc-qr-code [value]="'https://example.com'" [size]="200" />
+```
+
+## API
+
+### ScQrCode
+
+| Input                  | Type                       | Default     | Description            |
+| ---------------------- | -------------------------- | ----------- | ---------------------- |
+| `value`                | `string`                   | _required_  | Text or URL to encode  |
+| `size`                 | `number`                   | `200`       | Size in pixels         |
+| `errorCorrectionLevel` | `'L' \| 'M' \| 'Q' \| 'H'` | `'M'`       | Error correction level |
+| `foregroundColor`      | `string`                   | `'#000000'` | Module color           |
+| `backgroundColor`      | `string`                   | `'#ffffff'` | Background color       |
+| `quietZone`            | `number`                   | `2`         | Quiet zone modules     |
+| `logo`                 | `string`                   | `''`        | Logo image URL         |
+| `logoSize`             | `number`                   | `0.2`       | Logo size (0-1)        |
+| `ariaLabel`            | `string`                   | `'QR Code'` | Accessibility label    |
+| `class`                | `string`                   | -           | Additional CSS classes |
+
+### ScQrCodeDownload
+
+Extends `ScQrCode` with:
+
+| Input           | Type      | Default      | Description          |
+| --------------- | --------- | ------------ | -------------------- |
+| `showDownload`  | `boolean` | `true`       | Show download button |
+| `downloadLabel` | `string`  | `'Download'` | Button label         |
+| `filename`      | `string`  | `'qrcode'`   | Download filename    |
+
+### Error Correction Levels
+
+| Level | Recovery | Use Case              |
+| ----- | -------- | --------------------- |
+| `L`   | ~7%      | Clean environments    |
+| `M`   | ~15%     | General use (default) |
+| `Q`   | ~25%     | Industrial use        |
+| `H`   | ~30%     | With logo overlay     |
+
+## Examples
+
+### Basic QR Code
+
+```html
+<sc-qr-code [value]="'https://example.com'" />
+```
+
+### Custom Colors
+
+```html
+<sc-qr-code [value]="'Hello World'" [foregroundColor]="'#1d4ed8'" [backgroundColor]="'#dbeafe'" />
+```
+
+### With Logo
+
+Use high error correction when adding a logo:
+
+```html
+<sc-qr-code [value]="'https://example.com'" [errorCorrectionLevel]="'H'" [logo]="'/assets/logo.svg'" [logoSize]="0.25" />
+```
+
+### Different Sizes
+
+```html
+<sc-qr-code [value]="'Small'" [size]="100" />
+<sc-qr-code [value]="'Medium'" [size]="150" />
+<sc-qr-code [value]="'Large'" [size]="200" />
+```
+
+### With Download
+
+```html
+<sc-qr-code-download [value]="'https://example.com'" [filename]="'my-qr-code'" [downloadLabel]="'Save QR Code'" />
+```
+
+### Common Use Cases
+
+```html
+<!-- Website URL -->
+<sc-qr-code [value]="'https://example.com'" />
+
+<!-- Phone number -->
+<sc-qr-code [value]="'tel:+1234567890'" />
+
+<!-- Email -->
+<sc-qr-code [value]="'mailto:hello@example.com'" />
+
+<!-- WiFi -->
+<sc-qr-code [value]="'WIFI:T:WPA;S:NetworkName;P:password;;'" />
+
+<!-- SMS -->
+<sc-qr-code [value]="'sms:+1234567890?body=Hello'" />
+
+<!-- vCard -->
+<sc-qr-code [value]="'BEGIN:VCARD\nVERSION:3.0\nN:Doe;John\nEND:VCARD'" />
+```
+
+## Features
+
+- Pure TypeScript QR code generation (no external dependencies)
+- SVG-based rendering for sharp display at any size
+- Customizable colors
+- Logo overlay support
+- Multiple error correction levels
+- Adjustable quiet zone
+- Download as PNG
+
+## Accessibility
+
+- ARIA role="img" with customizable label
+- High contrast between modules and background
+- Works with screen readers

package/src/lib/components/qr-code/index.ts

@@ -0,0 +1,3 @@
+export { ScQrCode } from './qr-code';
+export { ScQrCodeDownload } from './qr-code-download';
+export type { QRErrorCorrectionLevel } from './qr-code';

package/src/lib/components/qr-code/qr-code-download.ts

@@ -0,0 +1,105 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScQrCode, QRErrorCorrectionLevel } from './qr-code';
+
+@Component({
+  selector: 'sc-qr-code-download',
+  imports: [ScQrCode],
+  template: `
+    <div [class]="containerClass()">
+      <sc-qr-code
+        [value]="value()"
+        [size]="size()"
+        [errorCorrectionLevel]="errorCorrectionLevel()"
+        [foregroundColor]="foregroundColor()"
+        [backgroundColor]="backgroundColor()"
+        [quietZone]="quietZone()"
+        [logo]="logo()"
+        [logoSize]="logoSize()"
+      />
+      @if (showDownload()) {
+        <button type="button" (click)="download()" [class]="buttonClass()">
+          <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" x2="12" y1="15" y2="3" />
+          </svg>
+          {{ downloadLabel() }}
+        </button>
+      }
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScQrCodeDownload {
+  readonly value = input.required<string>();
+  readonly size = input<number>(200);
+  readonly errorCorrectionLevel = input<QRErrorCorrectionLevel>('M');
+  readonly foregroundColor = input<string>('#000000');
+  readonly backgroundColor = input<string>('#ffffff');
+  readonly quietZone = input<number>(2);
+  readonly logo = input<string>('');
+  readonly logoSize = input<number>(0.2);
+  readonly showDownload = input<boolean>(true);
+  readonly downloadLabel = input<string>('Download');
+  readonly filename = input<string>('qrcode');
+  readonly class = input<string>('');
+
+  protected readonly containerClass = computed(() =>
+    cn('inline-flex flex-col items-center gap-3', this.class()),
+  );
+
+  protected readonly buttonClass = computed(() =>
+    cn(
+      'inline-flex items-center gap-2 px-4 py-2 text-sm',
+      'border rounded-md hover:bg-accent transition-colors',
+      'focus:outline-none focus:ring-2 focus:ring-ring',
+    ),
+  );
+
+  download(): void {
+    const svg = document.querySelector('sc-qr-code svg');
+    if (!svg) return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const size = this.size();
+    canvas.width = size;
+    canvas.height = size;
+
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const img = new Image();
+    const svgBlob = new Blob([svgData], {
+      type: 'image/svg+xml;charset=utf-8',
+    });
+    const url = URL.createObjectURL(svgBlob);
+
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0, size, size);
+      URL.revokeObjectURL(url);
+
+      const link = document.createElement('a');
+      link.download = `${this.filename()}.png`;
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+    };
+
+    img.src = url;
+  }
+}

package/src/lib/components/qr-code/qr-code.ts

@@ -0,0 +1,121 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { generateQRCode } from './qr-generator';
+
+export type QRErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+@Component({
+  selector: 'sc-qr-code',
+  template: `
+    <div [class]="containerClass()" role="img" [attr.aria-label]="ariaLabel()">
+      <svg
+        [attr.viewBox]="viewBox()"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        class="block"
+      >
+        <!-- Background -->
+        <rect
+          x="0"
+          y="0"
+          [attr.width]="moduleCount() + quietZone() * 2"
+          [attr.height]="moduleCount() + quietZone() * 2"
+          [attr.fill]="backgroundColor()"
+        />
+
+        <!-- QR modules -->
+        @for (row of qrMatrix(); track $index; let rowIdx = $index) {
+          @for (cell of row; track $index; let colIdx = $index) {
+            @if (cell) {
+              <rect
+                [attr.x]="colIdx + quietZone()"
+                [attr.y]="rowIdx + quietZone()"
+                width="1"
+                height="1"
+                [attr.fill]="foregroundColor()"
+              />
+            }
+          }
+        }
+
+        <!-- Logo/Image overlay -->
+        @if (logo()) {
+          <rect
+            [attr.x]="logoPosition().x - logoPosition().padding"
+            [attr.y]="logoPosition().y - logoPosition().padding"
+            [attr.width]="logoPosition().size + logoPosition().padding * 2"
+            [attr.height]="logoPosition().size + logoPosition().padding * 2"
+            [attr.fill]="backgroundColor()"
+            [attr.rx]="logoPosition().padding"
+          />
+          <image
+            [attr.href]="logo()"
+            [attr.x]="logoPosition().x"
+            [attr.y]="logoPosition().y"
+            [attr.width]="logoPosition().size"
+            [attr.height]="logoPosition().size"
+            preserveAspectRatio="xMidYMid slice"
+          />
+        }
+      </svg>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScQrCode {
+  // Inputs
+  readonly value = input.required<string>();
+  readonly size = input<number>(200);
+  readonly errorCorrectionLevel = input<QRErrorCorrectionLevel>('M');
+  readonly foregroundColor = input<string>('#000000');
+  readonly backgroundColor = input<string>('#ffffff');
+  readonly quietZone = input<number>(2);
+  readonly logo = input<string>('');
+  readonly logoSize = input<number>(0.2); // Percentage of QR code size
+  readonly ariaLabel = input<string>('QR Code');
+  readonly class = input<string>('');
+
+  protected readonly qrMatrix = computed(() => {
+    const value = this.value();
+    if (!value) return [];
+    return generateQRCode(value, this.errorCorrectionLevel());
+  });
+
+  protected readonly moduleCount = computed(() => {
+    const matrix = this.qrMatrix();
+    return matrix.length || 21;
+  });
+
+  protected readonly viewBox = computed(() => {
+    const count = this.moduleCount();
+    const zone = this.quietZone();
+    const totalSize = count + zone * 2;
+    return `0 0 ${totalSize} ${totalSize}`;
+  });
+
+  protected readonly logoPosition = computed(() => {
+    const count = this.moduleCount();
+    const zone = this.quietZone();
+    const logoSizePercent = this.logoSize();
+    const logoModules = Math.floor(count * logoSizePercent);
+    const padding = 0.5;
+
+    return {
+      x: zone + (count - logoModules) / 2,
+      y: zone + (count - logoModules) / 2,
+      size: logoModules,
+      padding,
+    };
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('inline-block', this.class()),
+  );
+}