@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

@@ -1,121 +0,0 @@
-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()),
-  );
-}